@zoreal/oauth2-react 0.2.10 → 0.2.12

package/dist/index.cjs

@@ -39,7 +39,7 @@ var import_react2 = require("react");
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.10";
+var SDK_VERSION = "0.2.12";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -859,8 +859,20 @@ var LIGHT = `
   --zrl-accent-ink: #04698a;
   --zrl-urgent: #b4761a;
   --zrl-qr-bg: #ffffff;
+  --zrl-qr-filter: none;
+  --zrl-qr-spent-filter: blur(3px);
+  --zrl-qr-blend: normal;
   --zrl-shadow: 0 1px 2px rgba(16, 18, 27, 0.06), 0 20px 50px -12px rgba(16, 18, 27, 0.3);
   --zrl-ring: rgba(16, 18, 27, 0.07);
+  /* The light on the QR well's edge. Brand blue on both grounds, a lighter
+     tint at the head; only its strength is themed, see the dark block. */
+  --zrl-beam: #00b4d9;
+  --zrl-beam-head: #7fe0f4;
+  --zrl-beam-line: 2px;
+  --zrl-glow-core: 4px;
+  --zrl-glow-reach: 24px;
+  --zrl-glow-blur: 8px;
+  --zrl-glow-opacity: 0.6;
 `;
 var DARK = `
   --zrl-scrim: rgba(0, 0, 0, 0.62);
@@ -875,12 +887,24 @@ var DARK = `
   --zrl-accent-soft: #0d3b47;
   --zrl-accent-ink: #7fdcf0;
   --zrl-urgent: #e0a952;
-  /* The QR well stays white in dark mode on purpose: a scanner needs the
-     quiet-zone contrast, and an inverted QR fails on a good number of phone
-     cameras. It reads as a deliberate light panel, not a theming miss. */
-  --zrl-qr-bg: #ffffff;
+  /* The code is drawn light on the dark surface: the panel is transparent
+     and the image is inverted and screened, so only the modules and the
+     mark show. */
+  --zrl-qr-bg: transparent;
+  --zrl-qr-filter: invert(1);
+  --zrl-qr-spent-filter: invert(1) blur(3px);
+  --zrl-qr-blend: screen;
   --zrl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 50px -12px rgba(0, 0, 0, 0.65);
   --zrl-ring: rgba(255, 255, 255, 0.1);
+  /* A glow that reads on a white card disappears on a dark one: the light
+     here is brighter and wider, and its halo reaches further out. */
+  --zrl-beam: #22c8ec;
+  --zrl-beam-head: #c2f3fc;
+  --zrl-beam-line: 3px;
+  --zrl-glow-core: 6px;
+  --zrl-glow-reach: 32px;
+  --zrl-glow-blur: 10px;
+  --zrl-glow-opacity: 0.85;
 `;
 var CSS = `
 .${PREFIX}-root { ${LIGHT} }
@@ -940,115 +964,128 @@ var CSS = `
   color: var(--zrl-ink-soft);
 }
 
-/* The light around the well: a thin ring in the accent, one bright arc
-   travelling round it, and a soft glow of the same colour bleeding a few
-   pixels outward. It says the pairing is live without a word.
-
-   It sits BELOW the well, which is why the well is wrapped instead of given a
-   pseudo-element. Anything drawn inside the well paints over the white quiet
-   zone the camera needs, and a negative z-index from inside the well lands
-   wherever the card's stacking context happens to be that frame (the card's
-   entrance animation makes and unmakes one). The wrapper is the well's old
-   box exactly, same size, same margin, so nothing moves; the well keeps its
-   own stacking order on top, and the ring cannot touch the QR. */
-.${PREFIX}-qr-halo {
-  position: relative;
-  isolation: isolate;
-  width: 204px;
-  height: 204px;
-  margin: 20px auto 0;
-}
-
 .${PREFIX}-qr-well {
   position: relative;
-  z-index: 1;
   display: grid;
   place-items: center;
   box-sizing: border-box;
   width: 204px;
   height: 204px;
-  margin: 0;
+  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 from here and its colour and
+     strength from the theme tokens above. One lap in 4s on every tier. */
+  --zrl-radius: 16px;
+  --zrl-beam-time: 4s;
 }
 
-/* The glow is the ring's own alpha, blurred and drawn beneath it, so it
-   follows the arc round and fades with it. It has to be a parent of the
-   masked band: a filter is applied before a mask, so a shadow cast from the
-   band itself would be cut off at the band's edge. Two shadows because one
-   2px source blurred over 10px is too faint to read as light; the second
-   blurs the first. */
-.${PREFIX}-qr-glow {
+/* 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 thin 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: -2px;
+  inset: calc(0px - var(--zrl-beam-line));
+  border: var(--zrl-beam-line) solid transparent;
+  border-radius: calc(var(--zrl-radius) - 1px + var(--zrl-beam-line));
   pointer-events: none;
-  filter: drop-shadow(0 0 3px var(--zrl-accent)) drop-shadow(0 0 10px var(--zrl-accent));
+  -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;
 }
-
-/* The band: a 2px ring just outside the well, cut with a mask that keeps the
-   padding and drops the content box. The gradient is on a pseudo-element
-   rather than on the band, because in the fallback it has to rotate as a
-   whole while the band stays put. The prefixed mask is for Chrome before 120;
-   the unprefixed one, declared after it, wins everywhere else. */
-.${PREFIX}-qr-arc {
-  position: absolute;
-  inset: 0;
-  padding: 2px;
-  border-radius: 18px;
-  overflow: hidden;
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  mask-composite: exclude;
+.${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(var(--zrl-glow-blur));
+  opacity: var(--zrl-glow-opacity);
+  will-change: filter;
 }
-.${PREFIX}-qr-arc::before,
-.${PREFIX}-qr-arc::after {
+.${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 light. Mostly transparent, a tail that builds over a quarter turn, a
-   short full-strength head and a drop-off within a few degrees, so it reads
-   as travelling rather than blinking. One revolution every 3s, linear:
-   continuous motion has no ease. Oversized so its corners still cover the
-   band mid-rotation in the transform fallback; the property path shrinks it
-   back to the band. */
-.${PREFIX}-qr-arc::before {
+/* The moving light: an oversized square carrying a conic sweep, rotated
+   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 {
+  content: '';
+  position: absolute;
   inset: -50%;
   background: conic-gradient(
-    from var(--zrl-angle, 0deg),
-    transparent 0deg 245deg,
-    var(--zrl-accent) 332deg 346deg,
+    from 0deg,
+    transparent 0deg 220deg,
+    var(--zrl-beam) 330deg,
+    var(--zrl-beam-head) 348deg,
     transparent 356deg 360deg
   );
-  animation: ${PREFIX}-orbit 3s linear infinite;
-}
-
-/* The rest state: the same ring, evenly lit. Faint under the moving light so
-   the ring reads as a ring; stronger once the light has stopped. */
-.${PREFIX}-qr-arc::after {
-  inset: 0;
-  background: var(--zrl-accent);
-  opacity: 0.16;
+  animation: ${PREFIX}-orbit var(--zrl-beam-time) linear infinite;
+  will-change: transform;
+  transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
-/* Spent: the light stops where it is and fades, and the ring settles to a
-   dim, even glow. Paused rather than removed, so it does not jump back to
-   its start on the way out. */
-.${PREFIX}-qr-halo[data-spent="true"] .${PREFIX}-qr-arc::before {
+/* 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-halo[data-spent="true"] .${PREFIX}-qr-arc::after { opacity: 0.34; }
+.${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;
   width: 100%;
   height: 100%;
   border-radius: 8px;
+  filter: var(--zrl-qr-filter);
+  mix-blend-mode: var(--zrl-qr-blend);
   transition: filter 300ms cubic-bezier(0.23, 1, 0.32, 1),
     opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
     transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
@@ -1057,7 +1094,7 @@ 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: blur(3px); transform: scale(0.96); }
+.${PREFIX}-qr[data-spent="true"] { opacity: 0.2; filter: var(--zrl-qr-spent-filter); transform: scale(0.96); }
 
 .${PREFIX}-qr-overlay {
   position: absolute;
@@ -1186,32 +1223,7 @@ var CSS = `
   70%, 100% { transform: scale(2.6); opacity: 0 }
 }
 
-/* Two ways to turn the light, one look.
-   Where the browser can register a typed custom property, the gradient's own
-   angle animates and the element never moves. Where it cannot (Firefox before
-   128), an untyped custom property cannot interpolate and the light would
-   snap once a cycle, so the oversized pseudo-element rotates instead and the
-   band's mask keeps the ring in place. At rest the two are the same pixels:
-   same gradient, same centre, angle zero.
-   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 fallback, 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 } }
-@supports (transition-behavior: allow-discrete) {
-  .${PREFIX}-qr-arc::before {
-    inset: 0;
-    animation-name: ${PREFIX}-orbit-angle;
-  }
-}
 
 @media (prefers-reduced-motion: reduce) {
   .${PREFIX}-scrim,
@@ -1222,10 +1234,11 @@ var CSS = `
   .${PREFIX}-cancel,
   .${PREFIX}-close,
   .${PREFIX}-timer { transition: none }
-  /* No travelling light. The ring keeps a still, soft glow instead, a step
-     brighter than the spent state so pending and spent still read apart. */
-  .${PREFIX}-qr-arc::before { animation: none; opacity: 0 }
-  .${PREFIX}-qr-arc::after { opacity: 0.5 }
+  /* 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() {
@@ -1336,12 +1349,11 @@ function PairingModal({
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ZorealLockup, { height: 44, className: cx("lockup") }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: titleId, className: cx("title"), children: settled ? t.titleApprove : t.title }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("body-text"), children: body }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("qr-halo"), "data-spent": settled, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-glow"), "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-arc") }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("qr-well"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { className: cx("qr"), "data-spent": settled, src: frameUrl, alt: t.qrAlt, width: 180, height: 180 }),
-                settled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-badge"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPhone, {}) }) })
-              ] })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("qr-well"), "data-spent": settled, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-beam-glow"), "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-beam-glow-band") }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-beam"), "aria-hidden": true }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { className: cx("qr"), "data-spent": settled, src: frameUrl, alt: t.qrAlt, width: 180, height: 180 }),
+              settled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-badge"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPhone, {}) }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("status"), children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: cx("dot"), children: [