@zoreal/oauth2-js 0.1.14 → 0.1.16

package/README.md

@@ -140,7 +140,7 @@ is nothing to configure and nothing to draw.
 
 | | |
 | --- | --- |
-| **Mobile** | No QR. The pairing link opens the ZOREAL ID app and the modal never appears. Force one or the other with `display: 'qr'` / `'link'`. The choice is made before the pairing is created, because the provider binds the surface there: a link-mode pairing is claimed only by the app that opened that exact link, and has no QR at all. |
+| **Mobile** | No QR and no modal. `startLogin` creates the pairing and sends the tab to the pairing link, which the ZOREAL ID app claims; with no app installed the same link is the page that installs it. That is one round trip after the tap, so disable the button you were tapped on and show it working until the promise settles. Force one or the other with `display: 'qr'` / `'link'`. The choice is made before the pairing is created, because the provider binds the surface there: a link-mode pairing is claimed only by the app that opened that exact link, and has no QR at all. |
 | **Live status** | Copy and title follow the pairing: waiting for a scan, then waiting for approval once the code is claimed (the spent QR blurs out behind a phone glyph). |
 | **Title** | Says what the scan is for, inferred from the request: "Scan to sign in" for `openid`, `email` and `profile.name`; "Scan to verify your identity" once a document attribute such as `zoreal.age` or `profile.birthdate` is requested; "Scan to prove you are a real human" for `openid` alone with `acr_values: 'zoreal.live'`. Override with `intent`, one of `'sign-in'`, `'identify'`, `'presence'`, when the scope does not say. |
 | **Countdown** | Counts down to expiry, turning amber under 20s. Reads the clock each tick rather than decrementing, so a backgrounded tab comes back honest. |

package/dist/index.cjs

@@ -60,7 +60,7 @@ function unsafeClaims(idToken) {
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.1.14";
+var SDK_VERSION = "0.1.16";
 var SDK_NAME = "@zoreal/oauth2-js";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
@@ -1434,6 +1434,65 @@ var CSS = `
 }
 
 @keyframes ${PREFIX}-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
+   even on a square and useless on a wide button: it crawls along the long
+   sides and lights two edges at once near the ends. So here the light is a
+   dash on an SVG outline, which moves at one speed the whole way round
+   whatever the shape, drawn with the well's tokens: its colour and head
+   tint, its line width, its halo, its four second lap. pathLength makes the
+   outline 100 units long, so every dash and offset is a percentage of the
+   way round; the three layers share one head at 30 and differ in length
+   and brightness, which is the comet's tail. Shown only while busy. */
+.${PREFIX}-ring {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  --zrl-beam-time: 4s;
+}
+.${PREFIX}-ring-svg {
+  position: absolute;
+  inset: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  overflow: visible;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+}
+.${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
+.${PREFIX}-ring-svg rect {
+  x: 2px;
+  y: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  fill: none;
+  stroke: var(--zrl-beam);
+  stroke-width: var(--zrl-beam-line);
+  stroke-linecap: round;
+  animation: ${PREFIX}-dash var(--zrl-beam-time) linear infinite;
+}
+.${PREFIX}-ring-tail { stroke-dasharray: 30 70; stroke-dashoffset: 0; opacity: 0.35; }
+.${PREFIX}-ring-body { stroke-dasharray: 16 84; stroke-dashoffset: -14; opacity: 0.8; }
+.${PREFIX}-ring-head { stroke-dasharray: 5 95; stroke-dashoffset: -25; stroke: var(--zrl-beam-head); }
+.${PREFIX}-ring-halo {
+  stroke-dasharray: 30 70;
+  stroke-dashoffset: 0;
+  stroke-width: calc(var(--zrl-glow-core) * 2 + var(--zrl-beam-line));
+  opacity: calc(var(--zrl-glow-opacity) * 0.5);
+  filter: blur(var(--zrl-glow-blur));
+}
+@keyframes ${PREFIX}-dash {
+  to { stroke-dashoffset: calc(var(--zrl-dash-start, 0) - 100); }
+}
+.${PREFIX}-ring-body { --zrl-dash-start: -14; }
+.${PREFIX}-ring-head { --zrl-dash-start: -25; }
+@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; }
+}
+
 
 @media (prefers-reduced-motion: reduce) {
   .${PREFIX}-scrim,