@zoreal/oauth2-js 0.1.19 → 0.1.20

package/dist/index.d.cts

@@ -211,6 +211,17 @@ interface LoginHandle<T> {
 
 declare function startLogin(options: BrowserDirectLoginOptions): LoginHandle<ZorealCredentialResponse>;
 declare function startLogin(options: AuthCodeLoginOptions): LoginHandle<ZorealCodeResponse>;
+/**
+ * Finishes a same-device sign-in on the page the ZOREAL ID app reopened.
+ *
+ * Call it on every page load where `startLogin` can be called. It answers
+ * null at once when this page load is not a return; otherwise it takes the
+ * flow saved before the tap, polls the pairing named in the fragment, and
+ * resolves the way `startLogin` would have: an ID token in browser-direct
+ * mode, the code and the verifier in auth-code mode. The fragment is removed
+ * from the address bar as it is read.
+ */
+declare function resumeLogin(options: Pick<StartLoginOptions, 'clientId' | 'issuer' | 'onState'>): LoginHandle<ZorealCredentialResponse | ZorealCodeResponse> | null;
 
 /**
  * The pairing modal, in plain DOM.
@@ -310,7 +321,7 @@ declare function mountPairingModal(state: PairingState, options: PairingModalOpt
  *                                  auth-code mode leaves it to the RP backend.
  */
 declare const WIRE_VERSION = 1;
-declare const SDK_VERSION = "0.1.19";
+declare const SDK_VERSION = "0.1.20";
 declare const SDK_NAME = "@zoreal/oauth2-js";
 declare const DEFAULT_ISSUER = "https://id.zoreal.com";
 /** Pending TTL is short. Poll gently; over-polling cancels the request. */
@@ -466,4 +477,4 @@ declare function unsafeClaims(idToken: string): Record<string, unknown>;
  */
 declare function resolveIntent(intent: LoginIntent | undefined, scope: string | undefined, acrValues: string | readonly string[] | undefined): LoginIntent;
 
-export { type AcrValue, type AuthCodeLoginOptions, type BrowserDirectLoginOptions, DEFAULT_ISSUER, DEFAULT_PAIRING_TIMEOUT_MS, DEFAULT_QR_REFRESH_SECONDS, type ErrorCode, FlowAbandonedError, type LoginHandle, type LoginIntent, type NonOAuthError, OAuthFlowError, POLL_INTERVAL_ENROLLING_MS, POLL_INTERVAL_MS, type PairCreated, type PairDisplay, type PairImmediate, type PairStartResponse, type PairStatusResponse, type PairingModalHandle, type PairingModalOptions, type PairingState, type PairingUI, SDK_NAME, SDK_VERSION, type SelectBy, type StartLoginOptions, type StartPairingParams, type TokenResponse, WIRE_VERSION, type ZorealCodeResponse, type ZorealCredentialResponse, type ZorealTheme, challengeS256, exchangeCode, generateState, generateVerifier, isMobileUserAgent, mountPairingModal, pollUntilApproved, resolveIntent, startLogin, startPairing, unsafeClaims };
+export { type AcrValue, type AuthCodeLoginOptions, type BrowserDirectLoginOptions, DEFAULT_ISSUER, DEFAULT_PAIRING_TIMEOUT_MS, DEFAULT_QR_REFRESH_SECONDS, type ErrorCode, FlowAbandonedError, type LoginHandle, type LoginIntent, type NonOAuthError, OAuthFlowError, POLL_INTERVAL_ENROLLING_MS, POLL_INTERVAL_MS, type PairCreated, type PairDisplay, type PairImmediate, type PairStartResponse, type PairStatusResponse, type PairingModalHandle, type PairingModalOptions, type PairingState, type PairingUI, SDK_NAME, SDK_VERSION, type SelectBy, type StartLoginOptions, type StartPairingParams, type TokenResponse, WIRE_VERSION, type ZorealCodeResponse, type ZorealCredentialResponse, type ZorealTheme, challengeS256, exchangeCode, generateState, generateVerifier, isMobileUserAgent, mountPairingModal, pollUntilApproved, resolveIntent, resumeLogin, startLogin, startPairing, unsafeClaims };

package/dist/index.d.ts

@@ -211,6 +211,17 @@ interface LoginHandle<T> {
 
 declare function startLogin(options: BrowserDirectLoginOptions): LoginHandle<ZorealCredentialResponse>;
 declare function startLogin(options: AuthCodeLoginOptions): LoginHandle<ZorealCodeResponse>;
+/**
+ * Finishes a same-device sign-in on the page the ZOREAL ID app reopened.
+ *
+ * Call it on every page load where `startLogin` can be called. It answers
+ * null at once when this page load is not a return; otherwise it takes the
+ * flow saved before the tap, polls the pairing named in the fragment, and
+ * resolves the way `startLogin` would have: an ID token in browser-direct
+ * mode, the code and the verifier in auth-code mode. The fragment is removed
+ * from the address bar as it is read.
+ */
+declare function resumeLogin(options: Pick<StartLoginOptions, 'clientId' | 'issuer' | 'onState'>): LoginHandle<ZorealCredentialResponse | ZorealCodeResponse> | null;
 
 /**
  * The pairing modal, in plain DOM.
@@ -310,7 +321,7 @@ declare function mountPairingModal(state: PairingState, options: PairingModalOpt
  *                                  auth-code mode leaves it to the RP backend.
  */
 declare const WIRE_VERSION = 1;
-declare const SDK_VERSION = "0.1.19";
+declare const SDK_VERSION = "0.1.20";
 declare const SDK_NAME = "@zoreal/oauth2-js";
 declare const DEFAULT_ISSUER = "https://id.zoreal.com";
 /** Pending TTL is short. Poll gently; over-polling cancels the request. */
@@ -466,4 +477,4 @@ declare function unsafeClaims(idToken: string): Record<string, unknown>;
  */
 declare function resolveIntent(intent: LoginIntent | undefined, scope: string | undefined, acrValues: string | readonly string[] | undefined): LoginIntent;
 
-export { type AcrValue, type AuthCodeLoginOptions, type BrowserDirectLoginOptions, DEFAULT_ISSUER, DEFAULT_PAIRING_TIMEOUT_MS, DEFAULT_QR_REFRESH_SECONDS, type ErrorCode, FlowAbandonedError, type LoginHandle, type LoginIntent, type NonOAuthError, OAuthFlowError, POLL_INTERVAL_ENROLLING_MS, POLL_INTERVAL_MS, type PairCreated, type PairDisplay, type PairImmediate, type PairStartResponse, type PairStatusResponse, type PairingModalHandle, type PairingModalOptions, type PairingState, type PairingUI, SDK_NAME, SDK_VERSION, type SelectBy, type StartLoginOptions, type StartPairingParams, type TokenResponse, WIRE_VERSION, type ZorealCodeResponse, type ZorealCredentialResponse, type ZorealTheme, challengeS256, exchangeCode, generateState, generateVerifier, isMobileUserAgent, mountPairingModal, pollUntilApproved, resolveIntent, startLogin, startPairing, unsafeClaims };
+export { type AcrValue, type AuthCodeLoginOptions, type BrowserDirectLoginOptions, DEFAULT_ISSUER, DEFAULT_PAIRING_TIMEOUT_MS, DEFAULT_QR_REFRESH_SECONDS, type ErrorCode, FlowAbandonedError, type LoginHandle, type LoginIntent, type NonOAuthError, OAuthFlowError, POLL_INTERVAL_ENROLLING_MS, POLL_INTERVAL_MS, type PairCreated, type PairDisplay, type PairImmediate, type PairStartResponse, type PairStatusResponse, type PairingModalHandle, type PairingModalOptions, type PairingState, type PairingUI, SDK_NAME, SDK_VERSION, type SelectBy, type StartLoginOptions, type StartPairingParams, type TokenResponse, WIRE_VERSION, type ZorealCodeResponse, type ZorealCredentialResponse, type ZorealTheme, challengeS256, exchangeCode, generateState, generateVerifier, isMobileUserAgent, mountPairingModal, pollUntilApproved, resolveIntent, resumeLogin, startLogin, startPairing, unsafeClaims };

package/dist/index.js

@@ -14,7 +14,7 @@ function unsafeClaims(idToken) {
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.1.19";
+var SDK_VERSION = "0.1.20";
 var SDK_NAME = "@zoreal/oauth2-js";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
@@ -198,6 +198,76 @@ function titleFor(t, intent) {
   return t.title;
 }
 
+// src/return.ts
+var PREFIX = "zoreal:oauth2:return:";
+var DONE = "zoreal:oauth2:done:";
+var MAX_AGE_MS = 10 * 60 * 1e3;
+function storage() {
+  try {
+    return typeof localStorage === "undefined" ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+function saveReturnFlow(flow) {
+  try {
+    storage()?.setItem(PREFIX + flow.requestId, JSON.stringify(flow));
+  } catch {
+  }
+}
+function peekReturnFlow(requestId) {
+  const store = storage();
+  if (!store) return null;
+  const raw = store.getItem(PREFIX + requestId);
+  if (!raw) return null;
+  try {
+    const flow = JSON.parse(raw);
+    if (flow.v !== 1 || flow.requestId !== requestId) return null;
+    if (Date.now() - flow.createdAt > MAX_AGE_MS) return null;
+    return flow;
+  } catch {
+    return null;
+  }
+}
+function forgetReturnFlow(requestId) {
+  try {
+    storage()?.removeItem(PREFIX + requestId);
+  } catch {
+  }
+  if (pending === requestId) pending = null;
+}
+function markReturnDone(requestId) {
+  try {
+    const store = storage();
+    store?.setItem(DONE + requestId, String(Date.now()));
+    store?.removeItem(PREFIX + requestId);
+  } catch {
+  }
+}
+function isReturnDone(requestId) {
+  return storage()?.getItem(DONE + requestId) !== null && storage()?.getItem(DONE + requestId) !== void 0;
+}
+function returnToUrl() {
+  if (typeof window === "undefined") return void 0;
+  const { href } = window.location;
+  const hash = href.indexOf("#");
+  return hash === -1 ? href : href.slice(0, hash);
+}
+var RETURN_MARK = /(?:^|[#&])zoreal_return=([A-Za-z0-9]{32})(?:&|$)/;
+var pending = null;
+function pendingReturnId() {
+  if (pending) return pending;
+  if (typeof window === "undefined") return null;
+  const match = RETURN_MARK.exec(window.location.hash);
+  if (!match) return null;
+  pending = match[1];
+  try {
+    window.history.replaceState(window.history.state, "", returnToUrl());
+  } catch {
+  }
+  return pending;
+}
+
 // src/i18n.ts
 var en = {
   title: "Scan to sign in",
@@ -1041,8 +1111,8 @@ function interpolate(template, time) {
 }
 
 // src/styles.ts
-var PREFIX = "zrl";
-var cx = (name) => `${PREFIX}-${name}`;
+var PREFIX2 = "zrl";
+var cx = (name) => `${PREFIX2}-${name}`;
 var STYLE_ELEMENT_ID = "zoreal-pairing-styles";
 var LIGHT = `
   --zrl-scrim: rgba(16, 18, 27, 0.45);
@@ -1106,13 +1176,13 @@ var DARK = `
   --zrl-glow-opacity: 0.85;
 `;
 var CSS = `
-.${PREFIX}-root { ${LIGHT} }
-.${PREFIX}-root[data-theme="dark"] { ${DARK} }
+.${PREFIX2}-root { ${LIGHT} }
+.${PREFIX2}-root[data-theme="dark"] { ${DARK} }
 @media (prefers-color-scheme: dark) {
-  .${PREFIX}-root[data-theme="auto"] { ${DARK} }
+  .${PREFIX2}-root[data-theme="auto"] { ${DARK} }
 }
 
-.${PREFIX}-scrim {
+.${PREFIX2}-scrim {
   position: fixed;
   inset: 0;
   z-index: 2147483000;
@@ -1124,10 +1194,10 @@ var CSS = `
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   font-family: inherit;
-  animation: ${PREFIX}-fade 200ms ease-out both;
+  animation: ${PREFIX2}-fade 200ms ease-out both;
 }
 
-.${PREFIX}-card {
+.${PREFIX2}-card {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -1139,14 +1209,14 @@ var CSS = `
   outline: 1px solid var(--zrl-ring);
   outline-offset: -1px;
   text-align: center;
-  animation: ${PREFIX}-rise 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  animation: ${PREFIX2}-rise 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
 }
 
-.${PREFIX}-body { padding: 28px 24px 20px; }
+.${PREFIX2}-body { padding: 28px 24px 20px; }
 
-.${PREFIX}-lockup { display: block; margin: 0 auto; color: var(--zrl-ink); }
+.${PREFIX2}-lockup { display: block; margin: 0 auto; color: var(--zrl-ink); }
 
-.${PREFIX}-title {
+.${PREFIX2}-title {
   margin: 18px 0 0;
   font-size: 18px;
   font-weight: 600;
@@ -1155,7 +1225,7 @@ var CSS = `
   color: var(--zrl-ink);
 }
 
-.${PREFIX}-body-text {
+.${PREFIX2}-body-text {
   margin: 6px auto 0;
   max-width: 30ch;
   font-size: 14px;
@@ -1163,7 +1233,7 @@ var CSS = `
   color: var(--zrl-ink-soft);
 }
 
-.${PREFIX}-qr-well {
+.${PREFIX2}-qr-well {
   position: relative;
   display: grid;
   place-items: center;
@@ -1202,9 +1272,9 @@ var CSS = `
    All three share one containing block, the well's padding box, so the two
    comets ride the same path; the spent badge is a later sibling and paints
    above them. */
-.${PREFIX}-qr-beam,
-.${PREFIX}-qr-beam-glow,
-.${PREFIX}-qr-beam-glow-band {
+.${PREFIX2}-qr-beam,
+.${PREFIX2}-qr-beam-glow,
+.${PREFIX2}-qr-beam-glow-band {
   position: absolute;
   inset: calc(0px - var(--zrl-beam-line));
   border: var(--zrl-beam-line) solid transparent;
@@ -1217,7 +1287,7 @@ var CSS = `
   mask-clip: padding-box, border-box;
   mask-composite: intersect;
 }
-.${PREFIX}-qr-beam-glow {
+.${PREFIX2}-qr-beam-glow {
   inset: calc(0px - var(--zrl-glow-reach));
   border-width: var(--zrl-glow-reach);
   border-radius: calc(var(--zrl-radius) - 1px + var(--zrl-glow-reach));
@@ -1225,7 +1295,7 @@ var CSS = `
   opacity: var(--zrl-glow-opacity);
   will-change: filter;
 }
-.${PREFIX}-qr-beam-glow-band {
+.${PREFIX2}-qr-beam-glow-band {
   inset: calc(0px - var(--zrl-glow-core));
   border-width: var(--zrl-glow-core);
   border-radius: calc(var(--zrl-radius) - 1px + var(--zrl-glow-core));
@@ -1236,8 +1306,8 @@ var CSS = `
    border reads as the well's own line with a light passing over it; shown
    once the light has stopped. Every path below ends here, which is what
    makes them look the same at rest. */
-.${PREFIX}-qr-beam::before,
-.${PREFIX}-qr-beam-glow-band::before {
+.${PREFIX2}-qr-beam::before,
+.${PREFIX2}-qr-beam-glow-band::before {
   content: '';
   position: absolute;
   inset: -50%;
@@ -1250,8 +1320,8 @@ var CSS = `
    whole. A transform animation runs on the compositor, so the light keeps
    moving while the page is busy; animating the gradient angle instead
    repaints every frame on the main thread and stutters. */
-.${PREFIX}-qr-beam::after,
-.${PREFIX}-qr-beam-glow-band::after {
+.${PREFIX2}-qr-beam::after,
+.${PREFIX2}-qr-beam-glow-band::after {
   content: '';
   position: absolute;
   inset: -50%;
@@ -1262,7 +1332,7 @@ var CSS = `
     var(--zrl-beam-head) 348deg,
     transparent 356deg 360deg
   );
-  animation: ${PREFIX}-orbit var(--zrl-beam-time) linear infinite;
+  animation: ${PREFIX2}-orbit var(--zrl-beam-time) linear infinite;
   will-change: transform;
   transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
@@ -1270,15 +1340,15 @@ var CSS = `
 /* Spent: the light stops where it is and fades, and the edge settles to the
    dim glow. Paused rather than removed, so it does not jump back to its start
    on the way out. */
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam::after,
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam-glow-band::after {
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam::after,
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam-glow-band::after {
   animation-play-state: paused;
   opacity: 0;
 }
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam::before { opacity: 0.55; }
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam-glow-band::before { opacity: 0.7; }
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam::before { opacity: 0.55; }
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam-glow-band::before { opacity: 0.7; }
 
-.${PREFIX}-qr {
+.${PREFIX2}-qr {
   display: block;
   width: 100%;
   height: 100%;
@@ -1293,17 +1363,17 @@ var CSS = `
 /* Once the code is claimed the QR is spent. Blurring it out rather than
    swapping it keeps one object on screen through the state change, so the eye
    reads a transformation instead of two things trading places. */
-.${PREFIX}-qr[data-spent="true"] { opacity: 0.2; filter: var(--zrl-qr-spent-filter); transform: scale(0.96); }
+.${PREFIX2}-qr[data-spent="true"] { opacity: 0.2; filter: var(--zrl-qr-spent-filter); transform: scale(0.96); }
 
-.${PREFIX}-qr-overlay {
+.${PREFIX2}-qr-overlay {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
-  animation: ${PREFIX}-fade 200ms ease-out both;
+  animation: ${PREFIX2}-fade 200ms ease-out both;
 }
 
-.${PREFIX}-qr-badge {
+.${PREFIX2}-qr-badge {
   display: grid;
   place-items: center;
   width: 56px;
@@ -1313,7 +1383,7 @@ var CSS = `
   color: var(--zrl-accent-ink);
 }
 
-.${PREFIX}-status {
+.${PREFIX2}-status {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1324,8 +1394,8 @@ var CSS = `
   color: var(--zrl-ink);
 }
 
-.${PREFIX}-dot { position: relative; display: grid; place-items: center; width: 8px; height: 8px; }
-.${PREFIX}-dot i {
+.${PREFIX2}-dot { position: relative; display: grid; place-items: center; width: 8px; height: 8px; }
+.${PREFIX2}-dot i {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -1333,25 +1403,25 @@ var CSS = `
   background: var(--zrl-accent);
   font-style: normal;
 }
-.${PREFIX}-dot i:first-child { animation: ${PREFIX}-ping 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.${PREFIX2}-dot i:first-child { animation: ${PREFIX2}-ping 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
 
-.${PREFIX}-timer {
+.${PREFIX2}-timer {
   margin: 4px 0 0;
   font-size: 12px;
   font-variant-numeric: tabular-nums;
   color: var(--zrl-ink-mute);
   transition: color 200ms ease-out;
 }
-.${PREFIX}-timer[data-urgent="true"] { color: var(--zrl-urgent); }
+.${PREFIX2}-timer[data-urgent="true"] { color: var(--zrl-urgent); }
 
-.${PREFIX}-help {
+.${PREFIX2}-help {
   padding: 14px 24px;
   border-top: 1px solid var(--zrl-line-soft);
   background: var(--zrl-surface-sunken);
   border-radius: 0;
 }
-.${PREFIX}-help-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--zrl-ink); }
-.${PREFIX}-help-body {
+.${PREFIX2}-help-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--zrl-ink); }
+.${PREFIX2}-help-body {
   margin: 4px auto 0;
   max-width: 34ch;
   font-size: 12px;
@@ -1359,9 +1429,9 @@ var CSS = `
   color: var(--zrl-ink-soft);
 }
 
-.${PREFIX}-footer { padding: 12px; border-top: 1px solid var(--zrl-line-soft); }
+.${PREFIX2}-footer { padding: 12px; border-top: 1px solid var(--zrl-line-soft); }
 
-.${PREFIX}-cancel {
+.${PREFIX2}-cancel {
   display: block;
   width: 100%;
   padding: 10px;
@@ -1375,10 +1445,10 @@ var CSS = `
   cursor: pointer;
   transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
 }
-.${PREFIX}-cancel:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
-.${PREFIX}-cancel:active { transform: scale(0.99); }
+.${PREFIX2}-cancel:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
+.${PREFIX2}-cancel:active { transform: scale(0.99); }
 
-.${PREFIX}-secured {
+.${PREFIX2}-secured {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1390,9 +1460,9 @@ var CSS = `
   border-radius: 6px;
   transition: color 150ms ease-out;
 }
-.${PREFIX}-secured:hover { color: var(--zrl-ink); }
+.${PREFIX2}-secured:hover { color: var(--zrl-ink); }
 
-.${PREFIX}-close {
+.${PREFIX2}-close {
   position: absolute;
   top: 12px;
   inset-inline-end: 12px;
@@ -1408,25 +1478,25 @@ var CSS = `
   cursor: pointer;
   transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
 }
-.${PREFIX}-close:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
-.${PREFIX}-close:active { transform: scale(0.95); }
+.${PREFIX2}-close:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
+.${PREFIX2}-close:active { transform: scale(0.95); }
 
-.${PREFIX}-card :focus-visible {
+.${PREFIX2}-card :focus-visible {
   outline: 2px solid var(--zrl-accent);
   outline-offset: 2px;
 }
 
-@keyframes ${PREFIX}-fade { from { opacity: 0 } to { opacity: 1 } }
-@keyframes ${PREFIX}-rise {
+@keyframes ${PREFIX2}-fade { from { opacity: 0 } to { opacity: 1 } }
+@keyframes ${PREFIX2}-rise {
   from { opacity: 0; transform: translateY(10px) scale(0.98) }
   to { opacity: 1; transform: none }
 }
-@keyframes ${PREFIX}-ping {
+@keyframes ${PREFIX2}-ping {
   0% { transform: scale(1); opacity: 0.5 }
   70%, 100% { transform: scale(2.6); opacity: 0 }
 }
 
-@keyframes ${PREFIX}-orbit { to { transform: rotate(360deg) } }
+@keyframes ${PREFIX2}-orbit { to { transform: rotate(360deg) } }
 /* THE BUSY RING. The light of the QR well, around any control that is
    waiting on the provider: the button on a phone between the tap and the
    hand-over to the app. The well's sweep is a cone from the centre, which is
@@ -1443,13 +1513,13 @@ var CSS = `
    straight fade from the head to nothing three tenths of the way back; the
    component sets each layer's length, offset and opacity. Shown only while
    busy. */
-.${PREFIX}-ring {
+.${PREFIX2}-ring {
   position: relative;
   display: inline-flex;
   vertical-align: middle;
   --zrl-beam-time: 4s;
 }
-.${PREFIX}-ring-svg {
+.${PREFIX2}-ring-svg {
   position: absolute;
   inset: -4px;
   width: calc(100% + 8px);
@@ -1459,8 +1529,8 @@ var CSS = `
   opacity: 0;
   transition: opacity 200ms ease-out;
 }
-.${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
-.${PREFIX}-ring-svg rect {
+.${PREFIX2}-ring[data-busy="true"] > .${PREFIX2}-ring-svg { opacity: 1; }
+.${PREFIX2}-ring-svg rect {
   --zrl-l: var(--zrl-ring-len, 600px);
   x: 2px;
   y: 2px;
@@ -1471,37 +1541,37 @@ var CSS = `
   stroke-width: var(--zrl-beam-line);
   stroke-linecap: round;
   stroke-dashoffset: var(--zrl-s, 0px);
-  animation: ${PREFIX}-dash var(--zrl-beam-time) linear infinite;
+  animation: ${PREFIX2}-dash var(--zrl-beam-time) linear infinite;
 }
-.${PREFIX}-ring-head { stroke: var(--zrl-beam-head); }
-.${PREFIX}-ring-halo {
+.${PREFIX2}-ring-head { stroke: var(--zrl-beam-head); }
+.${PREFIX2}-ring-halo {
   stroke-width: calc(var(--zrl-glow-core) * 2 + var(--zrl-beam-line));
   filter: blur(var(--zrl-glow-blur));
 }
-@keyframes ${PREFIX}-dash {
+@keyframes ${PREFIX2}-dash {
   from { stroke-dashoffset: var(--zrl-s, 0px); }
   to { stroke-dashoffset: calc(var(--zrl-s, 0px) - var(--zrl-l)); }
 }
 @media (prefers-reduced-motion: reduce) {
-  .${PREFIX}-ring-svg rect { animation: none; stroke-dasharray: none; opacity: 0.45; }
-  .${PREFIX}-ring-halo, .${PREFIX}-ring-head { display: none; }
+  .${PREFIX2}-ring-svg rect { animation: none; stroke-dasharray: none; opacity: 0.45; }
+  .${PREFIX2}-ring-halo, .${PREFIX2}-ring-head { display: none; }
 }
 
 
 @media (prefers-reduced-motion: reduce) {
-  .${PREFIX}-scrim,
-  .${PREFIX}-card,
-  .${PREFIX}-qr-overlay { animation: none }
-  .${PREFIX}-dot i:first-child { animation: none; opacity: 0.35 }
-  .${PREFIX}-qr,
-  .${PREFIX}-cancel,
-  .${PREFIX}-close,
-  .${PREFIX}-timer { transition: none }
+  .${PREFIX2}-scrim,
+  .${PREFIX2}-card,
+  .${PREFIX2}-qr-overlay { animation: none }
+  .${PREFIX2}-dot i:first-child { animation: none; opacity: 0.35 }
+  .${PREFIX2}-qr,
+  .${PREFIX2}-cancel,
+  .${PREFIX2}-close,
+  .${PREFIX2}-timer { transition: none }
   /* No travelling light; the edge keeps its dim static glow instead. */
-  .${PREFIX}-qr-beam::after,
-  .${PREFIX}-qr-beam-glow-band::after { animation: none; opacity: 0 }
-  .${PREFIX}-qr-beam::before { opacity: 0.55 }
-  .${PREFIX}-qr-beam-glow-band::before { opacity: 0.7 }
+  .${PREFIX2}-qr-beam::after,
+  .${PREFIX2}-qr-beam-glow-band::after { animation: none; opacity: 0 }
+  .${PREFIX2}-qr-beam::before { opacity: 0.55 }
+  .${PREFIX2}-qr-beam-glow-band::before { opacity: 0.7 }
 }
 `;
 function ensureStyles() {
@@ -1906,8 +1976,23 @@ function startLogin(options) {
     try {
       let code;
       let selectBy = "device";
+      let returnId = null;
       if (useAppLink && typeof window !== "undefined") {
         const requestId = generateRequestId();
+        saveReturnFlow({
+          v: 1,
+          issuer,
+          clientId: options.clientId,
+          flow,
+          verifier,
+          nonce,
+          state,
+          scope: options.scope ?? "openid",
+          appState: options.app_state,
+          requestId,
+          createdAt: Date.now()
+        });
+        returnId = requestId;
         const startUrl = sameDeviceStartUrl(issuer, {
           client_id: options.clientId,
           scope: options.scope ?? "openid",
@@ -1920,7 +2005,8 @@ function startLogin(options) {
           prompt: options.prompt,
           locale: options.locale,
           request_id: requestId,
-          origin: window.location.origin
+          origin: window.location.origin,
+          return_to: returnToUrl()
         });
         selectBy = "app_link";
         surface.requestId = requestId;
@@ -1942,6 +2028,9 @@ function startLogin(options) {
           controller.signal,
           { tolerateUnknownUntil: Date.now() + 15e3 }
         );
+        if (isReturnDone(requestId)) {
+          throw new DOMException("aborted", "AbortError");
+        }
       } else {
         const started = await startPairing(
           issuer,
@@ -2042,6 +2131,7 @@ function startLogin(options) {
         }
         teardown();
       }
+      if (returnId) markReturnDone(returnId);
       if (flow === "auth-code") {
         const response2 = {
           code,
@@ -2095,6 +2185,67 @@ function startLogin(options) {
     }
   };
 }
+function resumeLogin(options) {
+  const id = pendingReturnId();
+  if (!id) return null;
+  const saved = peekReturnFlow(id);
+  if (!saved || saved.clientId !== options.clientId) return null;
+  forgetReturnFlow(id);
+  const issuer = options.issuer ?? saved.issuer;
+  const controller = new AbortController();
+  const promise = (async () => {
+    const code = await pollUntilApproved(
+      issuer,
+      id,
+      (s) => options.onState?.({ ...s, appLink: true }),
+      controller.signal,
+      { tolerateUnknownUntil: Date.now() + 5e3 }
+    );
+    let response;
+    if (saved.flow === "auth-code") {
+      response = {
+        code,
+        scope: saved.scope,
+        app_state: saved.appState,
+        code_verifier: saved.verifier,
+        nonce: saved.nonce
+      };
+    } else {
+      const tokens = await exchangeCode(issuer, {
+        code,
+        code_verifier: saved.verifier,
+        client_id: options.clientId
+      });
+      const claims = unsafeClaims(tokens.id_token);
+      response = {
+        credential: tokens.id_token,
+        clientId: options.clientId,
+        select_by: "app_link",
+        acr: claims.acr ?? "zoreal.device"
+      };
+    }
+    markReturnDone(id);
+    return response;
+  })();
+  promise.catch(() => {
+  });
+  return {
+    promise,
+    cancel: () => controller.abort(),
+    get requestId() {
+      return id;
+    },
+    get pairUrl() {
+      return void 0;
+    },
+    get qrUrl() {
+      return void 0;
+    },
+    get appLink() {
+      return true;
+    }
+  };
+}
 export {
   DEFAULT_ISSUER,
   DEFAULT_PAIRING_TIMEOUT_MS,
@@ -2114,6 +2265,7 @@ export {
   mountPairingModal,
   pollUntilApproved,
   resolveIntent,
+  resumeLogin,
   startLogin,
   startPairing,
   unsafeClaims