@zoreal/oauth2-react 0.2.15 → 0.2.16

package/dist/index.d.cts

@@ -243,25 +243,6 @@ declare function useZorealOAuth(): ZorealOAuthContextProps;
 
 declare function ZorealLogin(props: ZorealLoginProps): react.JSX.Element;
 
-/**
- * The light of the pairing dialog's QR well, run around whatever this wraps
- * while `busy` is true: the well's colours, line, halo and lap, on a dash
- * that travels the outline at one speed whatever the shape.
- *
- * The SDK's own button uses it for the gap on a phone between the tap and the
- * hand-over to the app. A site with its own sign-in button MAY wrap that
- * button the same way: set your busy state on the tap, clear it when
- * `onSuccess` or `onError` fires. `radius` is the wrapped control's corner
- * radius in pixels, so the light follows its shape; `theme` picks the light
- * and dark strengths the dialog uses, following the OS by default.
- *
- * It is a wrapper, and a wrapper is a change to your markup, so know what it
- * does before you use it: it is inline by default and shrinks to the button,
- * so a full-width button needs `block`; the light sits outside the button,
- * so an ancestor with `overflow: hidden` clips it; and a selector that relies
- * on the button's parent (`.card > button`) no longer matches. A site that
- * would rather draw its own busy state needs nothing from here.
- */
 declare function ZorealBusyRing({ busy, radius, theme, block, className, style, children, }: {
     busy: boolean;
     radius?: number;

package/dist/index.d.ts

@@ -243,25 +243,6 @@ declare function useZorealOAuth(): ZorealOAuthContextProps;
 
 declare function ZorealLogin(props: ZorealLoginProps): react.JSX.Element;
 
-/**
- * The light of the pairing dialog's QR well, run around whatever this wraps
- * while `busy` is true: the well's colours, line, halo and lap, on a dash
- * that travels the outline at one speed whatever the shape.
- *
- * The SDK's own button uses it for the gap on a phone between the tap and the
- * hand-over to the app. A site with its own sign-in button MAY wrap that
- * button the same way: set your busy state on the tap, clear it when
- * `onSuccess` or `onError` fires. `radius` is the wrapped control's corner
- * radius in pixels, so the light follows its shape; `theme` picks the light
- * and dark strengths the dialog uses, following the OS by default.
- *
- * It is a wrapper, and a wrapper is a change to your markup, so know what it
- * does before you use it: it is inline by default and shrinks to the button,
- * so a full-width button needs `block`; the light sits outside the button,
- * so an ancestor with `overflow: hidden` clips it; and a selector that relies
- * on the button's parent (`.card > button`) no longer matches. A site that
- * would rather draw its own busy state needs nothing from here.
- */
 declare function ZorealBusyRing({ busy, radius, theme, block, className, style, children, }: {
     busy: boolean;
     radius?: number;

package/dist/index.js

@@ -5,7 +5,7 @@ import { createContext, useContext, useMemo, useState as useState2 } from "react
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.15";
+var SDK_VERSION = "0.2.16";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1334,10 +1334,15 @@ var CSS = `
    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. */
+   tint, its line width, its halo, its four second lap. The outline's length
+   is measured by the component and set as --zrl-ring-len, and every dash
+   and offset is a fraction of it, because pathLength does not scale dash
+   values given from CSS. A stroke cannot fade along its length, so the tail
+   is a stack of dashes sharing one head, each shorter and more opaque than
+   the one under it, with opacities chosen so the stack composes to a
+   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 {
   position: relative;
   display: inline-flex;
@@ -1356,6 +1361,7 @@ var CSS = `
 }
 .${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
 .${PREFIX}-ring-svg rect {
+  --zrl-l: var(--zrl-ring-len, 600px);
   x: 2px;
   y: 2px;
   width: calc(100% - 4px);
@@ -1364,23 +1370,18 @@ var CSS = `
   stroke: var(--zrl-beam);
   stroke-width: var(--zrl-beam-line);
   stroke-linecap: round;
+  stroke-dashoffset: var(--zrl-s, 0px);
   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-head { 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); }
+  from { stroke-dashoffset: var(--zrl-s, 0px); }
+  to { stroke-dashoffset: calc(var(--zrl-s, 0px) - var(--zrl-l)); }
 }
-.${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; }
@@ -1962,8 +1963,11 @@ function useZorealLogin(options) {
 }
 
 // src/ring.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TAIL = 0.3;
+var STACK = Array.from({ length: 12 }, (_, i) => 12 - i);
+var HALO = [3, 2, 1];
 function ZorealBusyRing({
   busy,
   radius = 8,
@@ -1976,11 +1980,42 @@ function ZorealBusyRing({
   useEffect3(() => {
     ensureStyles();
   }, []);
+  const wrapRef = useRef3(null);
+  const measureRef = useRef3(null);
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const rect = measureRef.current;
+    if (!wrap || !rect) return;
+    const measure = () => {
+      const length = rect.getTotalLength();
+      if (length > 0) wrap.style.setProperty("--zrl-ring-len", `${length}px`);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(wrap);
+    return () => observer.disconnect();
+  }, [radius]);
   const rx = radius + 2;
-  const layer = (name) => /* @__PURE__ */ jsx5("rect", { className: cx(name), rx, ry: rx, pathLength: 100 });
+  const layer = (key, name, len, alpha, ref) => /* @__PURE__ */ jsx5(
+    "rect",
+    {
+      ref,
+      className: cx(name),
+      rx,
+      ry: rx,
+      style: {
+        strokeDasharray: `calc(var(--zrl-l) * ${len}) calc(var(--zrl-l) * ${1 - len})`,
+        "--zrl-s": `calc(var(--zrl-l) * ${-(TAIL - len)})`,
+        opacity: alpha
+      }
+    },
+    key
+  );
   return /* @__PURE__ */ jsxs5(
     "span",
     {
+      ref: wrapRef,
       className: className ? `${cx("root")} ${cx("ring")} ${className}` : `${cx("root")} ${cx("ring")}`,
       "data-theme": theme,
       "data-busy": busy,
@@ -1988,10 +2023,10 @@ function ZorealBusyRing({
       children: [
         children,
         /* @__PURE__ */ jsxs5("svg", { className: cx("ring-svg"), "aria-hidden": "true", children: [
-          layer("ring-halo"),
-          layer("ring-tail"),
-          layer("ring-body"),
-          layer("ring-head")
+          HALO.map(
+            (n, i) => layer(`h${n}`, "ring-halo", TAIL * n / HALO.length, `calc(var(--zrl-glow-opacity) * 0.6 / ${n})`, i === 0 ? measureRef : void 0)
+          ),
+          STACK.map((n) => layer(`t${n}`, n <= 2 ? "ring-head" : "ring-tail", TAIL * n / STACK.length, String(1 / n)))
         ] })
       ]
     }
@@ -2094,7 +2129,7 @@ function ZorealLogin(props) {
 }
 
 // src/useZorealAutoLogin.ts
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 function useZorealAutoLogin(options) {
   const { login } = useZorealFlow({
     flow: "browser-direct",
@@ -2111,7 +2146,7 @@ function useZorealAutoLogin(options) {
     },
     onNonOAuthError: (e) => options.onError?.(e)
   });
-  const fired = useRef3(false);
+  const fired = useRef4(false);
   useEffect4(() => {
     if (options.disabled || fired.current) return;
     fired.current = true;