@juspay/svelte-ui-components 4.33.0 → 4.33.1

package/dist/ThinkingOrb/ThinkingOrb.svelte

@@ -61,20 +61,19 @@
   /*
    * `reducedMotion`/`onScreen`/`tabVisible` feed `shouldRun` below (a
    * `$derived`), so they must be real `$state` for it to react when they
-   * change. `dark` is `$state` for the same reason `draw` below reads it
-   * synchronously inside the main `$effect` -- writing it must retrigger
-   * that effect, otherwise a theme flip while the loop is stopped (paused,
-   * or reduced motion, which paints exactly once) would leave the ink ramp
-   * on the wrong theme for as long as the orb stays still. `pointer` is a
-   * plain `let`, not `$state`: a still orb repaints explicitly on pointer
-   * events (see `repaintIfStill`), and a running orb's loop already reads
-   * the latest pointer every tick, so retriggering the whole effect on every
-   * pointer move would only tear down and restart the loop for nothing.
+   * change. `pointer` is a plain `let`, not `$state`: a still orb repaints
+   * explicitly on pointer events (see `repaintIfStill`), and a running orb's
+   * loop already reads the latest pointer every tick, so retriggering the
+   * whole effect on every pointer move would only tear down and restart the
+   * loop for nothing. A theme change works the same way: a still orb
+   * repaints explicitly (see `repaintIfColorChanged`) once its *resolved*
+   * colour actually moves, rather than through a theme-flavoured state write
+   * -- the paint never needs to know the theme itself, only the colour it
+   * comes out to.
    */
   let reducedMotion = $state(prefersReducedMotion());
   let onScreen = $state(true);
   let tabVisible = $state(true);
-  let dark = $state(false);
   let announcedFirstFrame = false;
   let resolvedColorInput = '';
   let resolvedTint: Rgb = FALLBACK_TINT;
@@ -150,6 +149,22 @@
     draw(heldInstant());
   };
 
+  /** A still orb repaints only when its resolved colour actually changed --
+   * whatever mechanism the host used to flip theme (an attribute on `<html>`
+   * or `<body>`, or a CSS transition landing). An explicit `color` prop
+   * never depends on the theme, and a running orb already re-reads the
+   * colour every frame via `draw`, so both bail out here. `readColorInput`'s
+   * cached key is what `resolveTint` itself compares against, so this check
+   * and the eventual repaint can never disagree about whether anything moved. */
+  const repaintIfColorChanged = (): void => {
+    if (shouldRun || color || canvas === null) {
+      return;
+    }
+    if (readColorInput(canvas).key !== resolvedColorInput) {
+      draw(heldInstant());
+    }
+  };
+
   const trackPointer = (event: PointerEvent): void => {
     if (canvas === null || !gravity) {
       return;
@@ -196,7 +211,7 @@
     const frame = MODES[safeState](instant, { size: safeSize, density, dotScale });
     const gOpts = gravityOptions;
     const painted = gOpts === null ? frame : attract(frame, pointer, gOpts);
-    paintFrame(context, painted, { dark, tint: resolveTint(context) });
+    paintFrame(context, painted, { tint: resolveTint(context) });
 
     if (!announcedFirstFrame) {
       announcedFirstFrame = true;
@@ -206,7 +221,7 @@
 
   /*
    * Re-runs whenever `shouldRun` or anything the leading `draw` reads changes
-   * (`safeState`, `safeSize`, `density`, `dotScale`, `gravityOptions`, `dark`,
+   * (`safeState`, `safeSize`, `density`, `dotScale`, `gravityOptions`,
    * `color`, `reducedMotion`, ...) -- Svelte tracks every reactive read inside
    * this body, including transitively through that synchronous `draw` call,
    * so a prop change tears down the previous rAF (the cleanup below) and
@@ -266,23 +281,18 @@
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     /*
-     * This repo's `ThemeSwitcher` stamps `data-theme="dark"` on
-     * `document.documentElement` -- one attribute on one element -- so a
-     * `MutationObserver` there alone catches every theme change. It exists
-     * only to keep `paintFrame`'s `dark` argument current: the tint colour
-     * itself comes from CSS, resolved in `resolveTint` above.
+     * The orb never asks how a host marks its theme -- `theme`, `data-theme`,
+     * a class, an inline `style`, `color-scheme`, on `<html>` or `<body>`, or
+     * anything else -- it only cares whether the colour it actually resolves
+     * to (see `resolveTint`) moved. So this observes every attribute change
+     * on both elements, unfiltered, and lets `repaintIfColorChanged` decide
+     * whether anything worth a repaint happened.
      */
-    const readTheme = (): void => {
-      dark = document.documentElement.getAttribute('data-theme') === 'dark';
-    };
-    readTheme();
     let themeObserver: MutationObserver | null = null;
     if (typeof MutationObserver !== 'undefined') {
-      themeObserver = new MutationObserver(readTheme);
-      themeObserver.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['data-theme']
-      });
+      themeObserver = new MutationObserver(repaintIfColorChanged);
+      themeObserver.observe(document.documentElement, { attributes: true });
+      themeObserver.observe(document.body, { attributes: true });
     }
 
     const onMotionChange = (event: MediaQueryListEvent): void => {
@@ -294,24 +304,26 @@
       motionQuery.addEventListener('change', onMotionChange);
     }
 
+    // A host that themes only through `@media (prefers-color-scheme)` changes
+    // the inherited colour when the OS flips theme, with no attribute change
+    // and no transition for the checks around it to catch.
+    let colorSchemeQuery: MediaQueryList | null = null;
+    if (typeof window.matchMedia === 'function') {
+      colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      colorSchemeQuery.addEventListener('change', repaintIfColorChanged);
+    }
+
     /*
-     * A still orb only repaints on its own when `dark` flips. A host that
-     * transitions its `color` (this repo's own layout fades `body` across a
-     * theme switch) leaves a just-frozen frame at the outgoing colour, with
-     * nothing else to redraw it. Re-read once the transition lands and
-     * repaint the same frozen instant if the resolved colour actually moved.
-     * A running orb re-reads every frame already and needs none of this.
+     * A host that transitions its `color` (this repo's own layout fades
+     * `body` across a theme switch) leaves a just-frozen frame at the
+     * outgoing colour, with nothing else to redraw it: no attribute changed,
+     * so the observer above never fires. Re-check once the transition lands.
      */
     const onColorTransitionEnd = (event: TransitionEvent): void => {
-      if (shouldRun || color || canvas === null) {
-        return;
-      }
       if (event.propertyName !== 'color' && event.propertyName !== '--sui-thinking-orb-color') {
         return;
       }
-      if (readColorInput(canvas).key !== resolvedColorInput) {
-        draw(heldInstant());
-      }
+      repaintIfColorChanged();
     };
     document.addEventListener('transitionend', onColorTransitionEnd);
 
@@ -321,6 +333,7 @@
       document.removeEventListener('transitionend', onColorTransitionEnd);
       themeObserver?.disconnect();
       motionQuery?.removeEventListener('change', onMotionChange);
+      colorSchemeQuery?.removeEventListener('change', repaintIfColorChanged);
     };
   });
 </script>

package/dist/ThinkingOrb/orb/paint.d.ts

@@ -1,22 +1,27 @@
 /**
- * Turns one `Frame` into canvas calls. The only place that knows about theme
- * and colour -- a mode never sees `dark` or `tint`, only the 0..1 `ink` it
- * assigns each mark.
+ * Turns one `Frame` into canvas calls. The only place that knows about
+ * colour -- a mode never sees `tint`, only the 0..1 `ink` it assigns each
+ * mark.
  */
 import type { Rgb } from '../../types';
 import type { Frame } from './types';
-/** What `paintFrame` needs beyond the frame itself: the theme and the base colour. */
+/** What `paintFrame` needs beyond the frame itself: the base colour. */
 export type PaintOptions = {
-    dark: boolean;
     tint: Rgb;
 };
 /**
- * Maps `ink` (0 = full `tint`) to an exact, testable colour string: fading
- * toward white in light theme and toward black in dark theme, so a mark
- * further away can fade into either background without ever reading as the
- * wrong theme's ink.
+ * Every mark draws in the tint colour itself -- an exact, testable colour
+ * string that never changes with depth. Depth is expressed as transparency
+ * instead (see `inkAlpha`), so a mark reads correctly against any
+ * background rather than only a solid white or black one.
  */
-export declare const inkColor: (tint: Rgb, ink: number, dark: boolean) => string;
+export declare const inkColor: (tint: Rgb) => string;
+/**
+ * Maps `ink` (0 = fully opaque) to the opacity a mark paints at: it fades
+ * toward fully transparent as `ink` rises, multiplied with the mark's own
+ * `alpha` so the two fades compound rather than override each other.
+ */
+export declare const inkAlpha: (ink: number, alpha: number) => number;
 /**
  * Clears the canvas and draws a `Frame`: every stroke, then every dot, each
  * group sorted far-to-near by `depth` so nearer marks are painted last and

package/dist/ThinkingOrb/orb/paint.js

@@ -1,23 +1,22 @@
 /**
- * Turns one `Frame` into canvas calls. The only place that knows about theme
- * and colour -- a mode never sees `dark` or `tint`, only the 0..1 `ink` it
- * assigns each mark.
+ * Turns one `Frame` into canvas calls. The only place that knows about
+ * colour -- a mode never sees `tint`, only the 0..1 `ink` it assigns each
+ * mark.
  */
 const clamp01 = (value) => Math.max(0, Math.min(1, value));
 /**
- * Maps `ink` (0 = full `tint`) to an exact, testable colour string: fading
- * toward white in light theme and toward black in dark theme, so a mark
- * further away can fade into either background without ever reading as the
- * wrong theme's ink.
+ * Every mark draws in the tint colour itself -- an exact, testable colour
+ * string that never changes with depth. Depth is expressed as transparency
+ * instead (see `inkAlpha`), so a mark reads correctly against any
+ * background rather than only a solid white or black one.
  */
-export const inkColor = (tint, ink, dark) => {
-    const amount = clamp01(ink);
-    const fadeTo = dark ? 0 : 255;
-    const r = Math.round(tint.r + (fadeTo - tint.r) * amount);
-    const g = Math.round(tint.g + (fadeTo - tint.g) * amount);
-    const b = Math.round(tint.b + (fadeTo - tint.b) * amount);
-    return `rgb(${r} ${g} ${b})`;
-};
+export const inkColor = (tint) => `rgb(${tint.r} ${tint.g} ${tint.b})`;
+/**
+ * Maps `ink` (0 = fully opaque) to the opacity a mark paints at: it fades
+ * toward fully transparent as `ink` rises, multiplied with the mark's own
+ * `alpha` so the two fades compound rather than override each other.
+ */
+export const inkAlpha = (ink, alpha) => clamp01(1 - clamp01(ink)) * clamp01(alpha);
 /**
  * Clears the canvas and draws a `Frame`: every stroke, then every dot, each
  * group sorted far-to-near by `depth` so nearer marks are painted last and
@@ -25,10 +24,11 @@ export const inkColor = (tint, ink, dark) => {
  */
 export const paintFrame = (ctx, frame, options) => {
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const color = inkColor(options.tint);
     const strokes = [...frame.strokes].sort((a, b) => a.depth - b.depth);
     for (const stroke of strokes) {
-        ctx.strokeStyle = inkColor(options.tint, stroke.ink, options.dark);
-        ctx.globalAlpha = clamp01(stroke.alpha);
+        ctx.strokeStyle = color;
+        ctx.globalAlpha = inkAlpha(stroke.ink, stroke.alpha);
         ctx.lineWidth = stroke.width;
         ctx.beginPath();
         ctx.moveTo(stroke.x1, stroke.y1);
@@ -37,8 +37,8 @@ export const paintFrame = (ctx, frame, options) => {
     }
     const dots = [...frame.dots].sort((a, b) => a.depth - b.depth);
     for (const dot of dots) {
-        ctx.fillStyle = inkColor(options.tint, dot.ink, options.dark);
-        ctx.globalAlpha = clamp01(dot.alpha);
+        ctx.fillStyle = color;
+        ctx.globalAlpha = inkAlpha(dot.ink, dot.alpha);
         ctx.beginPath();
         ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
         ctx.fill();

package/dist-wc/index.js

@@ -24055,15 +24055,12 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 }, attract = (e, t, n) => t === null ? e : {
 	dots: e.dots.map((e) => attractDot(e, t, n)),
 	strokes: e.strokes.map((e) => attractStroke(e, t, n))
-}, clamp01$3 = (e) => Math.max(0, Math.min(1, e)), inkColor = (e, t, n) => {
-	let i = clamp01$3(t), a = n ? 0 : 255;
-	return `rgb(${Math.round(e.r + (a - e.r) * i)} ${Math.round(e.g + (a - e.g) * i)} ${Math.round(e.b + (a - e.b) * i)})`;
-}, paintFrame = (e, t, n) => {
+}, clamp01$3 = (e) => Math.max(0, Math.min(1, e)), inkColor = (e) => `rgb(${e.r} ${e.g} ${e.b})`, inkAlpha = (e, t) => clamp01$3(1 - clamp01$3(e)) * clamp01$3(t), paintFrame = (e, t, n) => {
 	e.clearRect(0, 0, e.canvas.width, e.canvas.height);
-	let i = [...t.strokes].sort((e, t) => e.depth - t.depth);
-	for (let t of i) e.strokeStyle = inkColor(n.tint, t.ink, n.dark), e.globalAlpha = clamp01$3(t.alpha), e.lineWidth = t.width, e.beginPath(), e.moveTo(t.x1, t.y1), e.lineTo(t.x2, t.y2), e.stroke();
-	let a = [...t.dots].sort((e, t) => e.depth - t.depth);
-	for (let t of a) e.fillStyle = inkColor(n.tint, t.ink, n.dark), e.globalAlpha = clamp01$3(t.alpha), e.beginPath(), e.arc(t.x, t.y, t.radius, 0, Math.PI * 2), e.fill();
+	let i = inkColor(n.tint), a = [...t.strokes].sort((e, t) => e.depth - t.depth);
+	for (let t of a) e.strokeStyle = i, e.globalAlpha = inkAlpha(t.ink, t.alpha), e.lineWidth = t.width, e.beginPath(), e.moveTo(t.x1, t.y1), e.lineTo(t.x2, t.y2), e.stroke();
+	let o = [...t.dots].sort((e, t) => e.depth - t.depth);
+	for (let t of o) e.fillStyle = i, e.globalAlpha = inkAlpha(t.ink, t.alpha), e.beginPath(), e.arc(t.x, t.y, t.radius, 0, Math.PI * 2), e.fill();
 	e.globalAlpha = 1;
 }, TWO_PI$1 = Math.PI * 2, WORLD_RADIUS_RATIO = .38, clamp01$2 = (e) => Math.max(0, Math.min(1, e)), clamp$1 = (e, t, n) => Math.max(t, Math.min(n, e)), originOf = (e) => e.size / 2, worldRadiusOf = (e) => e.size * WORLD_RADIUS_RATIO, INK_NEAR = .05, INK_FAR = .72, shadeByDepth = (e) => INK_FAR - (INK_FAR - INK_NEAR) * clamp01$2(e), toDot = (e, t, n, i) => ({
 	x: e.x,
@@ -24347,7 +24344,7 @@ function ThinkingOrb(e, t) {
 		r: 128,
 		g: 128,
 		b: 128
-	}, R = 2.4, te = 2, ne = /* @__PURE__ */ user_derived(() => Object.hasOwn(MODES, n()) ? n() : "working"), re = /* @__PURE__ */ user_derived(() => C.includes(i()) ? i() : 64), G = /* @__PURE__ */ user_derived(() => Math.max(.1, c())), be = /* @__PURE__ */ user_derived(() => Math.max(.1, l())), Me = /* @__PURE__ */ user_derived(() => !u() || get(Ue) ? null : u() === !0 ? GRAVITY_DEFAULTS : u()), Re = /* @__PURE__ */ state(null), Ue = /* @__PURE__ */ state(proxy(prefersReducedMotion())), it = /* @__PURE__ */ state(!0), at = /* @__PURE__ */ state(!0), ot = /* @__PURE__ */ state(!1), ct = !1, lt = "", ut = k, dt = null, ft = 0, pt = 0, mt = /* @__PURE__ */ user_derived(() => !o() && !get(Ue) && get(it) && get(at)), ht = () => get(Ue) ? 2.4 : pt, gt = (e, t) => {
+	}, R = 2.4, te = 2, ne = /* @__PURE__ */ user_derived(() => Object.hasOwn(MODES, n()) ? n() : "working"), re = /* @__PURE__ */ user_derived(() => C.includes(i()) ? i() : 64), G = /* @__PURE__ */ user_derived(() => Math.max(.1, c())), be = /* @__PURE__ */ user_derived(() => Math.max(.1, l())), Me = /* @__PURE__ */ user_derived(() => !u() || get(Ue) ? null : u() === !0 ? GRAVITY_DEFAULTS : u()), Re = /* @__PURE__ */ state(null), Ue = /* @__PURE__ */ state(proxy(prefersReducedMotion())), it = /* @__PURE__ */ state(!0), at = /* @__PURE__ */ state(!0), ot = !1, ct = "", lt = k, ut = null, dt = 0, ft = 0, pt = /* @__PURE__ */ user_derived(() => !o() && !get(Ue) && get(it) && get(at)), mt = () => get(Ue) ? 2.4 : ft, ht = (e, t) => {
 		if (t.length === 0) return null;
 		let n = e.fillStyle;
 		e.fillStyle = "#000000", e.fillStyle = t;
@@ -24355,32 +24352,34 @@ function ThinkingOrb(e, t) {
 		e.fillStyle = "#ffffff", e.fillStyle = t;
 		let a = e.fillStyle;
 		return e.fillStyle = n, typeof i == "string" && i === a ? i : null;
-	}, _t = (e) => {
+	}, gt = (e) => {
 		let t = getComputedStyle(e), n = t.getPropertyValue("--sui-thinking-orb-color").trim(), i = t.color.trim();
 		return {
 			declared: n,
 			inherited: i,
 			key: `${n}|${i}`
 		};
-	}, vt = (e) => {
+	}, _t = (e) => {
 		if (s()) return s();
-		if (get(Re) === null) return ut;
-		let { declared: t, inherited: n, key: i } = _t(get(Re));
-		if (i === lt) return ut;
-		lt = i;
-		let a = gt(e, t) ?? gt(e, n);
-		return ut = (a === null ? null : parseCssColor(a)) ?? k, ut;
+		if (get(Re) === null) return lt;
+		let { declared: t, inherited: n, key: i } = gt(get(Re));
+		if (i === ct) return lt;
+		ct = i;
+		let a = ht(e, t) ?? ht(e, n);
+		return lt = (a === null ? null : parseCssColor(a)) ?? k, lt;
+	}, vt = () => {
+		get(pt) || get(Me) === null || Ct(mt());
 	}, yt = () => {
-		get(mt) || get(Me) === null || Ct(ht());
+		get(pt) || s() || get(Re) === null || gt(get(Re)).key !== ct && Ct(mt());
 	}, bt = (e) => {
 		if (get(Re) === null || !u()) return;
 		let t = get(Re).getBoundingClientRect();
-		dt = {
+		ut = {
 			x: e.clientX - t.left,
 			y: e.clientY - t.top
-		}, yt();
+		}, vt();
 	}, xt = () => {
-		dt = null, yt();
+		ut = null, vt();
 	}, St = () => typeof window > "u" ? 1 : Math.min(2, window.devicePixelRatio ?? 1), Ct = (e) => {
 		if (get(Re) === null) return;
 		let t = get(Re).getContext("2d");
@@ -24392,18 +24391,15 @@ function ThinkingOrb(e, t) {
 			density: get(G),
 			dotScale: get(be)
 		}), o = get(Me);
-		paintFrame(t, o === null ? a : attract(a, dt, o), {
-			dark: get(ot),
-			tint: vt(t)
-		}), ct || (ct = !0, S()?.());
+		paintFrame(t, o === null ? a : attract(a, ut, o), { tint: _t(t) }), ot || (ot = !0, S()?.());
 	};
 	user_effect(() => {
-		if (Ct(ht()), !get(mt)) return;
+		if (Ct(mt()), !get(pt)) return;
 		let e = null, t = (n) => {
 			let i = e === null ? 0 : (n - e) / 1e3;
-			e = n, pt += i * a(), Ct(pt), ft = requestAnimationFrame(t);
+			e = n, ft += i * a(), Ct(ft), dt = requestAnimationFrame(t);
 		};
-		return ft = requestAnimationFrame(t), () => cancelAnimationFrame(ft);
+		return dt = requestAnimationFrame(t), () => cancelAnimationFrame(dt);
 	}), onMount(() => {
 		if (get(Re) === null) return;
 		let e = null;
@@ -24414,24 +24410,19 @@ function ThinkingOrb(e, t) {
 			set(at, document.visibilityState !== "hidden");
 		};
 		document.addEventListener("visibilitychange", t);
-		let n = () => {
-			set(ot, document.documentElement.getAttribute("data-theme") === "dark");
-		};
-		n();
-		let i = null;
-		typeof MutationObserver < "u" && (i = new MutationObserver(n), i.observe(document.documentElement, {
-			attributes: !0,
-			attributeFilter: ["data-theme"]
-		}));
-		let a = (e) => {
+		let n = null;
+		typeof MutationObserver < "u" && (n = new MutationObserver(yt), n.observe(document.documentElement, { attributes: !0 }), n.observe(document.body, { attributes: !0 }));
+		let i = (e) => {
 			set(Ue, e.matches, !0);
-		}, o = null;
-		typeof window.matchMedia == "function" && (o = window.matchMedia("(prefers-reduced-motion: reduce)"), o.addEventListener("change", a));
-		let c = (e) => {
-			get(mt) || s() || get(Re) === null || e.propertyName !== "color" && e.propertyName !== "--sui-thinking-orb-color" || _t(get(Re)).key !== lt && Ct(ht());
-		};
-		return document.addEventListener("transitionend", c), () => {
-			e?.disconnect(), document.removeEventListener("visibilitychange", t), document.removeEventListener("transitionend", c), i?.disconnect(), o?.removeEventListener("change", a);
+		}, a = null;
+		typeof window.matchMedia == "function" && (a = window.matchMedia("(prefers-reduced-motion: reduce)"), a.addEventListener("change", i));
+		let o = null;
+		typeof window.matchMedia == "function" && (o = window.matchMedia("(prefers-color-scheme: dark)"), o.addEventListener("change", yt));
+		let s = (e) => {
+			e.propertyName !== "color" && e.propertyName !== "--sui-thinking-orb-color" || yt();
+		};
+		return document.addEventListener("transitionend", s), () => {
+			e?.disconnect(), document.removeEventListener("visibilitychange", t), document.removeEventListener("transitionend", s), n?.disconnect(), a?.removeEventListener("change", i), o?.removeEventListener("change", yt);
 		};
 	});
 	var wt = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.33.0",
+  "version": "4.33.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",