@zoreal/oauth2-react 0.2.15 → 0.2.16

package/dist/index.cjs

@@ -41,7 +41,7 @@ var import_react2 = require("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;
@@ -1370,10 +1370,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;
@@ -1392,6 +1397,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);
@@ -1400,23 +1406,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; }
@@ -2000,6 +2001,9 @@ function useZorealLogin(options) {
 // src/ring.tsx
 var import_react4 = require("react");
 var import_jsx_runtime5 = require("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,
@@ -2012,11 +2016,42 @@ function ZorealBusyRing({
   (0, import_react4.useEffect)(() => {
     ensureStyles();
   }, []);
+  const wrapRef = (0, import_react4.useRef)(null);
+  const measureRef = (0, import_react4.useRef)(null);
+  (0, import_react4.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__ */ (0, import_jsx_runtime5.jsx)("rect", { className: cx(name), rx, ry: rx, pathLength: 100 });
+  const layer = (key, name, len, alpha, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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__ */ (0, import_jsx_runtime5.jsxs)(
     "span",
     {
+      ref: wrapRef,
       className: className ? `${cx("root")} ${cx("ring")} ${className}` : `${cx("root")} ${cx("ring")}`,
       "data-theme": theme,
       "data-busy": busy,
@@ -2024,10 +2059,10 @@ function ZorealBusyRing({
       children: [
         children,
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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)))
         ] })
       ]
     }