@zoreal/oauth2-js 0.1.10 → 0.1.12

package/dist/index.d.cts

@@ -289,7 +289,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.10";
+declare const SDK_VERSION = "0.1.12";
 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. */

package/dist/index.d.ts

@@ -289,7 +289,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.10";
+declare const SDK_VERSION = "0.1.12";
 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. */

package/dist/index.js

@@ -14,7 +14,7 @@ function unsafeClaims(idToken) {
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.1.10";
+var SDK_VERSION = "0.1.12";
 var SDK_NAME = "@zoreal/oauth2-js";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
@@ -977,9 +977,111 @@ var CSS = `
   margin: 20px auto 0;
   padding: 12px;
   border: 1px solid var(--zrl-line);
-  border-radius: 16px;
+  border-radius: var(--zrl-radius);
   background: var(--zrl-qr-bg);
+  /* The light on the edge takes its shape and colour from here. The colour
+     is fixed, not themed: the brand blue on both grounds, a lighter tint of
+     it at the head, no other hue. */
+  --zrl-radius: 16px;
+  --zrl-beam: #00b4d9;
+  --zrl-beam-head: #7fe0f4;
+  --zrl-beam-size: 100px;
+  --zrl-beam-time: 4s;
+  --zrl-glow-reach: 20px;
+  --zrl-glow-core: 3px;
+}
+
+/* The light on the well's edge: a short comet running along the border, with
+   a soft glow outside it. Three overlays inside the well, each masked so the
+   comet can only ever paint where its mask allows, and the white interior lies
+   outside every mask: nothing here can reach the quiet zone a camera needs,
+   whatever the comet is doing. The mask is the padding box cut out of the
+   border box, a transparent layer clipped to the padding box intersected
+   with a solid one clipped to the border box. The prefixed form is for Chrome
+   before 120 and Safari before 15.4; the unprefixed one, declared after it,
+   wins everywhere else.
+
+   qr-beam keeps a 1px ring on the border line: the comet itself.
+   qr-beam-glow is the glow: a wide band outside the well that blurs whatever
+   is inside it, and inside it qr-beam-glow-band keeps a 3px ring with a
+   second copy of the comet. The blur has to sit on the parent because a
+   filter is applied before a mask: blurred on the band itself, the glow
+   would be cut back to the band's own edge. On the parent it runs after the
+   band has clipped the comet thin and before the parent's mask cuts away the
+   inward half, which is what makes it fade outward and never over the QR.
+   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 {
+  position: absolute;
+  inset: -1px;
+  border: 1px solid transparent;
+  border-radius: var(--zrl-radius);
+  pointer-events: none;
+  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
+  -webkit-mask-clip: padding-box, border-box;
+  -webkit-mask-composite: source-in;
+  mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
+  mask-clip: padding-box, border-box;
+  mask-composite: intersect;
+}
+.${PREFIX}-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));
+  filter: blur(6px);
+  opacity: 0.7;
+}
+.${PREFIX}-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));
+}
+
+/* At rest the edge holds a dim, even blue: a 1px line on the border and, from
+   the glow band, a soft halo outside it. Hidden while the comet runs, so the
+   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 {
+  content: '';
+  position: absolute;
+  inset: -50%;
+  background: var(--zrl-beam);
+  opacity: 0;
+  transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/* The moving light. Declared bottom-up: the transform fallback here, and each
+   @supports block further down replaces it where the browser allows. */
+.${PREFIX}-qr-beam::after,
+.${PREFIX}-qr-beam-glow-band::after {
+  content: '';
+  position: absolute;
+  inset: -50%;
+  background: conic-gradient(
+    from var(--zrl-angle, 0deg),
+    transparent 0deg 245deg,
+    var(--zrl-beam) 332deg 346deg,
+    transparent 356deg 360deg
+  );
+  animation: ${PREFIX}-orbit 3s linear infinite;
+  transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/* 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 {
+  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; }
 
 .${PREFIX}-qr {
   display: block;
@@ -1123,6 +1225,54 @@ var CSS = `
   70%, 100% { transform: scale(2.6); opacity: 0 }
 }
 
+/* Three ways to move the light, one look at rest.
+   Where offset-path takes a rect() (Chrome 116, Firefox 122, Safari 18) the
+   comet rides the edge. Before that, a conic gradient turns inside the same
+   masks instead: on a registered custom property where @property exists, and
+   by rotating an oversized square where it does not, since an untyped custom
+   property cannot interpolate and the light would snap once a cycle.
+   There is no direct query for @property support. transition-behavior
+   shipped after it in every engine (Chrome 117 vs 85, Firefox 129 vs 128,
+   Safari 17.4 vs 16.4), so it stands in: a yes is never wrong, and a no only
+   sends a capable browser down the transform tier, which looks the same.
+   inherits: false so the angle stays on the element that animates it and
+   never reaches the host page or the well. */
+@property --zrl-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@keyframes ${PREFIX}-orbit { to { transform: rotate(360deg) } }
+@keyframes ${PREFIX}-orbit-angle { to { --zrl-angle: 360deg } }
+@keyframes ${PREFIX}-beam { to { offset-distance: 100% } }
+@supports (transition-behavior: allow-discrete) {
+  .${PREFIX}-qr-beam::after {
+    inset: -1px;
+    animation-name: ${PREFIX}-orbit-angle;
+  }
+  .${PREFIX}-qr-beam-glow-band::after {
+    inset: calc(0px - var(--zrl-glow-core));
+    animation-name: ${PREFIX}-orbit-angle;
+  }
+}
+/* The comet: a square that rides the well's edge on a rounded-rect path, its
+   anchor a little ahead of centre, turned to face the way it travels, and
+   masked down to what its overlay allows. The gradient runs against the
+   direction of travel: a light head, the blue body, nothing behind. One lap
+   in 4s, linear: continuous motion has no ease. */
+@supports (offset-path: rect(0 auto auto 0)) {
+  .${PREFIX}-qr-beam::after,
+  .${PREFIX}-qr-beam-glow-band::after {
+    inset: auto;
+    width: var(--zrl-beam-size);
+    height: var(--zrl-beam-size);
+    background: linear-gradient(to left, var(--zrl-beam-head), var(--zrl-beam), transparent);
+    offset-path: rect(0 auto auto 0 round calc(var(--zrl-radius) - 1px));
+    offset-anchor: 60% 50%;
+    animation: ${PREFIX}-beam var(--zrl-beam-time) linear infinite;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .${PREFIX}-scrim,
   .${PREFIX}-card,
@@ -1132,6 +1282,11 @@ var CSS = `
   .${PREFIX}-cancel,
   .${PREFIX}-close,
   .${PREFIX}-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 }
 }
 `;
 function ensureStyles() {
@@ -1237,6 +1392,12 @@ function mountPairingModal(state, options) {
   title.id = titleId;
   const bodyText = el("p", cx("body-text"));
   const well = el("div", cx("qr-well"));
+  const glow = el("span", cx("qr-beam-glow"));
+  glow.setAttribute("aria-hidden", "true");
+  glow.appendChild(el("span", cx("qr-beam-glow-band")));
+  const beam = el("span", cx("qr-beam"));
+  beam.setAttribute("aria-hidden", "true");
+  well.append(glow, beam);
   const qr = el("img", cx("qr"));
   qr.alt = t.qrAlt;
   qr.width = 180;
@@ -1295,6 +1456,7 @@ function mountPairingModal(state, options) {
     bodyText.textContent = s.status === "enrolling" ? t.bodyEnrolling : settled ? t.bodyApprove : t.bodyScan;
     statusLabel.textContent = settled ? t.waitingApproval : t.waiting;
     qr.dataset.spent = String(settled);
+    well.dataset.spent = String(settled);
     overlay.style.display = settled ? "" : "none";
     if (s.qrUrl) showFrame(s.qrUrl);
   };