@zoreal/oauth2-js 0.1.14 → 0.1.16

package/dist/index.d.cts

@@ -305,7 +305,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.14";
+declare const SDK_VERSION = "0.1.16";
 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

@@ -305,7 +305,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.14";
+declare const SDK_VERSION = "0.1.16";
 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.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;
@@ -1388,6 +1388,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,