@juspay/svelte-ui-components 4.33.0 → 4.33.2

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/modes/form.js

@@ -16,8 +16,11 @@ const TWO_PI = Math.PI * 2;
 /** The shared "reads as a form inside a square" contract: radius as a share of `size`. */
 const FORM_RADIUS_RATIO = 0.4;
 const clamp01 = (value) => Math.max(0, Math.min(1, value));
+/** How far toward transparent the farthest dot's ink goes. `paintFrame` multiplies (1 - ink) with
+ * `alpha`, so ink reaching 1 would erase the far side of a ring or ribbon however high its alpha. */
+const FAR_INK = 0.6;
 /** Nearer dots read as more saturated tint; `paintFrame` turns low ink into more of `tint`. */
-const depthToInk = (depth) => clamp01(1 - depth);
+const depthToInk = (depth) => clamp01((1 - depth) * FAR_INK);
 /** Farther dots stay at partial opacity rather than fading to nothing, so no instant reads blank. */
 const depthToAlpha = (depth) => clamp01(0.5 + depth * 0.5);
 /** Nearer dots draw a touch larger, reinforcing the depth `paintFrame`'s draw order already implies. */
@@ -40,10 +43,13 @@ const place = (point, spinAngle, tiltAngle, originPx, worldRadius, baseRadius, s
 };
 const EMPTY_STROKES = [];
 // --- composing ---------------------------------------------------------
-const RIBBON_BASE_COUNT = 260;
+/** Dots along each thread at 64px; `countAlongPath` keeps their spacing as the canvas shrinks. */
+const RIBBON_PER_THREAD_BASE = 36;
 const RIBBON_BASE_DOT_RADIUS = 2.2;
-const RIBBON_THREADS = { 64: 7, 32: 5, 20: 4 };
-const RIBBON_HALF_WIDTH = 0.4;
+/** Fewer, narrower threads than a full band: at 7 threads across 0.4 rad the 64px ribbon covered
+ * most of the sphere and read as a filled ball rather than a strip of cloth. */
+const RIBBON_THREADS = { 64: 5, 32: 4, 20: 3 };
+const RIBBON_HALF_WIDTH = 0.3;
 /** The ribbon's own great circle sits tilted off the spin axis by this much,
  * so spinning genuinely sweeps its width through the frame -- a band that
  * happened to lie flat on the equator would look identical at every spin
@@ -51,7 +57,9 @@ const RIBBON_HALF_WIDTH = 0.4;
 const RIBBON_AXIS_TILT = 0.68;
 const RIBBON_RIPPLE_WAVES = 3;
 const RIBBON_RIPPLE_SPEED = 1.15;
-const RIBBON_RIPPLE_AMPLITUDE = 0.5;
+/** Kept under RIBBON_HALF_WIDTH: a ripple wider than the band itself swings the ribbon toward
+ * the pole and folds it over itself, which reads as a knot rather than cloth. */
+const RIBBON_RIPPLE_AMPLITUDE = 0.18;
 const RIBBON_THREAD_JITTER = 0.1;
 const RIBBON_SPIN_SPEED = 0.48;
 const RIBBON_CAMERA_TILT = 0.45;
@@ -70,7 +78,7 @@ export const composing = (t, ctx) => {
     const worldRadius = ctx.size * FORM_RADIUS_RATIO;
     const originPx = ctx.size / 2;
     const threads = RIBBON_THREADS[ctx.size];
-    const perThread = Math.max(1, Math.ceil(sizing.count(RIBBON_BASE_COUNT) / threads));
+    const perThread = sizing.countAlongPath(RIBBON_PER_THREAD_BASE);
     const total = threads * perThread;
     const dots = [];
     for (let index = 0; index < total; index += 1) {
@@ -102,7 +110,9 @@ export const composing = (t, ctx) => {
     return { dots, strokes: EMPTY_STROKES };
 };
 // --- breathing -----------------------------------------------------------
-const BREATHING_BASE_COUNT = 210;
+/** Dots around the ring at 64px. A ring's length grows with `size`, not its area, so this goes
+ * through `countAlongPath`: 210 area-scaled dots sat 0.65px apart at 64px and fused into a line. */
+const BREATHING_BASE_COUNT = 32;
 const BREATHING_BASE_DOT_RADIUS = 1.7;
 /** Sits below composing/shaping's ~0.4: at the peak of its breath this ring
  * already swells by its amplitude plus its shape wobble below, so a resting
@@ -125,7 +135,7 @@ export const breathing = (t, ctx) => {
     const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
     const worldRadius = ctx.size * BREATHING_WORLD_RADIUS_RATIO;
     const originPx = ctx.size / 2;
-    const count = sizing.count(BREATHING_BASE_COUNT);
+    const count = sizing.countAlongPath(BREATHING_BASE_COUNT);
     const breathe = Math.sin(t * BREATHING_SPEED);
     const dots = [];
     for (let index = 0; index < count; index += 1) {
@@ -144,7 +154,8 @@ export const breathing = (t, ctx) => {
     return { dots, strokes: EMPTY_STROKES };
 };
 // --- shaping ---------------------------------------------------------------
-const SHAPING_BASE_COUNT = 210;
+/** Dots around the outline at 64px, through `countAlongPath` for the same reason as breathing. */
+const SHAPING_BASE_COUNT = 36;
 const SHAPING_BASE_DOT_RADIUS = 1.7;
 const SHAPING_CYCLE_SECONDS = 12;
 // One full turn per morph cycle, so the shape and its orientation both land
@@ -169,7 +180,7 @@ export const shaping = (t, ctx) => {
     const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
     const worldRadius = ctx.size * FORM_RADIUS_RATIO;
     const originPx = ctx.size / 2;
-    const count = sizing.count(SHAPING_BASE_COUNT);
+    const count = sizing.countAlongPath(SHAPING_BASE_COUNT);
     const cyclePos = (((t / SHAPING_CYCLE_SECONDS) % 1) + 1) % 1;
     const phaseFloat = cyclePos * 3;
     const phaseIndex = Math.min(2, Math.floor(phaseFloat));

package/dist/ThinkingOrb/orb/modes/network.d.ts

@@ -8,5 +8,5 @@
 import type { ModeFn } from '../types';
 /** A few nodes on a sphere; lines to near neighbours carry small travelling pulses. */
 export declare const connecting: ModeFn;
-/** Three strands wrapped around a sphere, crossing as they spiral from top to bottom. */
+/** Three closed strands wrapped around a sphere, crossing over and under each other as they turn. */
 export declare const weaving: ModeFn;

package/dist/ThinkingOrb/orb/modes/network.js

@@ -25,11 +25,14 @@ const squaredDistance = (a, b) => {
 // connecting -- a few nodes on a sphere, linked to their nearest neighbours,
 // with small bright pulses running along the links.
 // ---------------------------------------------------------------------------
-const NODE_BASE_COUNT = 16;
+/** A few nodes, not a molecule: at 16 nodes x 3 neighbours the 64px graph carried ~24 edges, each
+ * with its own pulse, and the pulses were lost among the nodes. */
+const NODE_BASE_COUNT = 10;
 const MIN_NODE_COUNT = 6;
-const NEIGHBOR_COUNT = 3;
+const NEIGHBOR_COUNT = 2;
 const NODE_BASE_RADIUS = 3.4;
-const PULSE_BASE_RADIUS = 2;
+/** Well under a node's radius, so a pulse reads as something travelling a link, not another node. */
+const PULSE_BASE_RADIUS = 1.4;
 const EDGE_BASE_WIDTH = 1.1;
 const NODE_ROTATE_SPEED = 0.35;
 const NODE_TILT = 0.45;
@@ -104,63 +107,75 @@ export const connecting = (t, ctx) => {
     return { dots: [...nodeDots, ...pulses], strokes };
 };
 // ---------------------------------------------------------------------------
-// weaving -- three strands spiralling from top to bottom around a sphere, offset
-// in phase so they interleave; the depth sort in `paintFrame` is what makes
-// them cross over and under each other.
+// weaving -- three closed strands wrapped around a sphere like the windings on
+// a ball of yarn; the depth sort in `paintFrame` is what makes them cross over
+// and under each other.
 // ---------------------------------------------------------------------------
 const STRAND_COUNT = 3;
-const STRAND_POINTS_BASE_COUNT = 26;
-const MIN_STRAND_POINTS = 10;
-/** Lower than a bare spiral would use: the braid swing below is what supplies
- * the winding, so the longitude term only needs to carry the strands most of
- * the way around, not add its own extra turns on top. */
-const STRAND_WRAPS = 1.1;
+/** Points around each closed strand at 64px, through `countAlongPath`. */
+const STRAND_POINTS_BASE_COUNT = 40;
+/** Enough points that a strand still draws as a curve at 20px; at 10 its segments were long
+ * enough to show as straight edges and the three strands drew an angular cage. */
+const MIN_STRAND_POINTS = 16;
+/** Each strand is a great circle tilted this far off the horizontal, and the three are turned
+ * 120 degrees apart about the vertical axis, so every pair crosses twice per turn. A pole-to-pole
+ * spiral kept projecting two strands onto nearly the same path. */
+const STRAND_INCLINATION = 0.6;
+/** A slow wave running along each strand, so the three read as threads being worked rather than
+ * three rigid hoops. Small, so the wave never folds a strand across its neighbour's path. */
+const STRAND_WAVE_COUNT = 3;
+const STRAND_WAVE_AMPLITUDE = 0.12;
+const STRAND_WAVE_SPEED = 0.9;
 const STRAND_ROTATE_SPEED = 0.3;
-const STRAND_TILT = 0.5;
+/** How far the camera looks down on the sphere: 1.1 rad, about 63 degrees. A ring turns edge-on,
+ * and draws as a straight bar, when its axis is square to the line of sight. Each ring's axis sits
+ * STRAND_INCLINATION (about 34 degrees) off vertical, and this tilt leaves the vertical about
+ * 90 - 63 = 27 degrees off the line of sight, so a ring's axis is never more than 34 + 27 = 61
+ * degrees off it. No spin angle, and so no paused frame, draws a ring flatter than about
+ * cos 61 = 48% of its width. */
+const STRAND_TILT = 1.1;
 const STRAND_DOT_BASE_RADIUS = 1.6;
 const STRAND_STROKE_BASE_WIDTH = 1.4;
-/** How many times a strand swings past its neighbours along its own pole-to-
- * pole length -- enough that a still frame always lands inside more than one
- * crossing, not so many the braid blurs into texture. */
-const STRAND_BRAID_CYCLES = 2.5;
-/** A constant 120-degree offset alone keeps the three strands in the same
- * relative order the whole way, which reads as one thick spiral rather than
- * three distinct ones. Two strands only visibly swap places, i.e. actually
- * cross, once the swing below overtakes half their 120-degree separation;
- * this sits comfortably past that so every pair of strands crosses, not just
- * wobbles toward each other. */
-const STRAND_BRAID_SWING = 1.3;
+/** At the small sizes the strand lines carry the motif and the beads only clutter it, so lines
+ * thicken and beads shrink as the canvas does. */
+const STRAND_STROKE_SIZE_FACTOR = { 64: 1, 32: 1.2, 20: 1.5 };
+const STRAND_DOT_SIZE_FACTOR = { 64: 1, 32: 0.85, 20: 0.7 };
+/** Depth still dims a strand's far side, but only this far, so no stretch of it disappears. */
+const STRAND_DEPTH_INK = 0.45;
+/** A slight per-strand shade; the paths and their over/under crossings are what separate them. */
+const STRAND_SHADE_STEP = 0.1;
 const strandBaseAngle = (strand) => (strand / STRAND_COUNT) * Math.PI * 2;
 /**
- * The `pointIndex`-th of `pointsPerStrand` points of `strand`, spiralling
- * from the top of the sphere to the bottom. Each strand's longitude oscillates around its own
- * 120-degree slot (the braid swing) on top of the shared spiral term, so
- * strands actually change places rather than staying a fixed distance apart;
- * folding `t` into the shared longitude term spins the whole braid rigidly,
- * which is what keeps every point exactly on the sphere at every instant.
+ * The `pointIndex`-th of `pointsPerStrand` points around closed `strand`: a
+ * great circle (the first and last points meet) with a small wave in latitude
+ * travelling along it, inclined by `STRAND_INCLINATION`, turned to its own
+ * 120-degree slot and spun with the rest. Latitude and longitude keep every
+ * point exactly on the sphere, whatever the wave does.
  */
 const strandPoint = (strand, pointIndex, pointsPerStrand, sphereRadius, t) => {
-    const u = pointIndex / (pointsPerStrand - 1);
-    const phi = u * Math.PI - Math.PI / 2;
-    const y = sphereRadius * Math.sin(phi);
-    const ringRadius = sphereRadius * Math.cos(phi);
-    const base = strandBaseAngle(strand);
-    const swing = STRAND_BRAID_SWING * Math.sin(u * STRAND_BRAID_CYCLES * Math.PI * 2 + base);
-    const theta = u * STRAND_WRAPS * Math.PI * 2 + base + swing + t * STRAND_ROTATE_SPEED;
-    const spun = { x: ringRadius * Math.cos(theta), y, z: ringRadius * Math.sin(theta) };
-    return rotateX(spun, STRAND_TILT);
+    const u = (pointIndex / (pointsPerStrand - 1)) * Math.PI * 2;
+    const latitude = STRAND_WAVE_AMPLITUDE *
+        Math.sin(u * STRAND_WAVE_COUNT + t * STRAND_WAVE_SPEED + strandBaseAngle(strand));
+    const onCircle = {
+        x: sphereRadius * Math.cos(latitude) * Math.cos(u),
+        y: sphereRadius * Math.sin(latitude),
+        z: sphereRadius * Math.cos(latitude) * Math.sin(u)
+    };
+    const inclined = rotateX(onCircle, STRAND_INCLINATION);
+    const turned = rotateY(inclined, strandBaseAngle(strand) + t * STRAND_ROTATE_SPEED);
+    return rotateX(turned, STRAND_TILT);
 };
-/** Three strands wrapped around a sphere, crossing as they spiral from top to bottom. */
+/** Three closed strands wrapped around a sphere, crossing over and under each other as they turn. */
 export const weaving = (t, ctx) => {
     const { sizing, originPx, sphereRadius } = sphereGeometry(ctx);
-    const pointsPerStrand = Math.max(MIN_STRAND_POINTS, sizing.count(STRAND_POINTS_BASE_COUNT));
+    const pointsPerStrand = Math.max(MIN_STRAND_POINTS, sizing.countAlongPath(STRAND_POINTS_BASE_COUNT));
     const strands = Array.from({ length: STRAND_COUNT }, (_, strand) => Array.from({ length: pointsPerStrand }, (_, pointIndex) => project(strandPoint(strand, pointIndex, pointsPerStrand, sphereRadius, t), originPx, sphereRadius)));
     const dots = strands.flatMap((points, strand) => points.map((p) => ({
         x: p.x,
         y: p.y,
         depth: p.depth,
-        radius: sizing.radius(STRAND_DOT_BASE_RADIUS),
-        ink: clamp01(1 - p.depth * 0.8 + strand * 0.08),
+        radius: sizing.radius(STRAND_DOT_BASE_RADIUS) * STRAND_DOT_SIZE_FACTOR[ctx.size],
+        ink: clamp01((1 - p.depth) * STRAND_DEPTH_INK + strand * STRAND_SHADE_STEP),
         alpha: 0.55 + p.depth * 0.4
     })));
     const strokes = strands.flatMap((points, strand) => points.slice(1).map((p, i) => {
@@ -172,8 +187,8 @@ export const weaving = (t, ctx) => {
             x2: p.x,
             y2: p.y,
             depth,
-            width: sizing.radius(STRAND_STROKE_BASE_WIDTH),
-            ink: clamp01(1 - depth * 0.75 + strand * 0.06),
+            width: sizing.radius(STRAND_STROKE_BASE_WIDTH) * STRAND_STROKE_SIZE_FACTOR[ctx.size],
+            ink: clamp01((1 - depth) * STRAND_DEPTH_INK + strand * STRAND_SHADE_STEP),
             alpha: 0.6 + depth * 0.35
         };
     }));

package/dist/ThinkingOrb/orb/modes/sphere.js

@@ -46,21 +46,17 @@ const toStroke = (from, to, width, ink, alpha) => ({
  * as noise once density thins the count out at 32/20px, while a handful of
  * particles held close together always reads as motion along a path. */
 const WORKING_TRAIN_BASE_COUNT = 22;
-/** Keeps at least this many short arcs on screen at each size. At 32/64px the
- * area scaler alone already clears this floor, so it only bites at 20px. More
- * than one train per orbit (WORKING_ORBIT_COUNT = 6) matters because depth
- * shading fades whichever half of each orbit is on the far side of the
- * sphere at a given instant almost to the background -- one train per orbit
- * left whole quadrants with no train currently on the near side to fill
- * them; two independently-phased laps around the six orbits keeps at least
- * a couple of quadrants covered at every instant, not just on average. */
-const WORKING_MIN_TRAINS = { 64: 3, 32: 3, 20: 12 };
+/** Keeps at least this many short arcs on screen at 64px (32/20px use WORKING_SMALL_LAYOUT). The
+ * area scaler alone already clears it at the default density; it only bites when density is low. */
+const WORKING_MIN_TRAINS_64 = 3;
 const WORKING_TRAIN_LENGTH = 5;
 /** How far apart, in radians, a train's particles trail behind its lead --
  * wide enough to read as a short curved arc, short enough to stay a cluster
  * rather than smearing back into the full-orbit scatter this replaces. */
 const WORKING_TRAIN_ARC_SPAN = 0.5;
-const WORKING_BASE_RADIUS_PX = 1.6;
+/** At 1.6, with a +/-25% jitter, 20px dots came out 0.6-1px across and the arcs blurred into a
+ * smudge; this and the narrower jitter below keep a train a visible stroke at every size. */
+const WORKING_BASE_RADIUS_PX = 2.2;
 const WORKING_ORBIT_COUNT = 6;
 const WORKING_ANGULAR_SPEED = 1.1;
 /** How far an orbit's `weight` can push its dots' ink away from the shared
@@ -83,19 +79,58 @@ const workingOrbit = (orbit) => {
         weight: 0.35 + 0.65 * hashUnit(seed + 15)
     };
 };
+/** At 32/20px six randomly tilted orbits of short arcs collapse into one busy cluster: each arc is
+ * only a few px long and the orbits overlap. These sizes instead spread a few orbits evenly around
+ * the view axis (like an atom symbol) and give each train a long arc, so every train draws a
+ * visible curve and the separate orbits stay readable. */
+const WORKING_SMALL_LAYOUT = {
+    32: { orbits: 4, trainLength: 6, arcSpan: 1 },
+    20: { orbits: 3, trainLength: 7, arcSpan: 1.25 }
+};
+/** How far each small-size orbit tips out of edge-on. Its projection is an ellipse sin(tilt) as
+ * tall as it is wide; near 1 rad every orbit projects to nearly the same circle and rolling it
+ * about the view axis changes nothing, so the orbits merged into one ring. */
+const WORKING_SMALL_ORBIT_TILT = 0.5;
+/** At 32/20px each orbit's path is drawn as a faint thin ellipse under its trains: a 20px train
+ * alone is too short to show which ellipse it is travelling, so without the path the trains read
+ * as a pinwheel rather than as particles circling several tilted orbits. */
+const WORKING_PATH_SEGMENTS = 24;
+const WORKING_PATH_WIDTH_PX = 0.8;
+const WORKING_PATH_INK = 0.5;
+const WORKING_PATH_ALPHA = 0.45;
+const WORKING_SMALL_ORBIT_RADIUS = 0.85;
+const WORKING_SMALL_SPEEDS = [0.8, 1.15, 1.45, 1];
+/** One orbit of the small-size layout: shared tilt, rolled evenly around the view axis. */
+const workingSmallOrbit = (orbit, orbits) => ({
+    ...workingOrbit(orbit),
+    tilt: WORKING_SMALL_ORBIT_TILT,
+    roll: (orbit / orbits) * Math.PI,
+    orbitRadiusFactor: WORKING_SMALL_ORBIT_RADIUS,
+    speedFactor: WORKING_SMALL_SPEEDS[orbit % WORKING_SMALL_SPEEDS.length]
+});
 export const working = (t, ctx) => {
     const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
     const origin = originOf(ctx);
     const worldRadius = worldRadiusOf(ctx);
-    const trainCount = Math.max(WORKING_MIN_TRAINS[ctx.size], sizing.count(WORKING_TRAIN_BASE_COUNT));
-    const arcStep = WORKING_TRAIN_ARC_SPAN / (WORKING_TRAIN_LENGTH - 1);
+    const small = WORKING_SMALL_LAYOUT[ctx.size];
+    // Small sizes run two opposite trains per orbit (scaled by density); 64px keeps its own swarm.
+    const lapsPerOrbit = Math.max(1, Math.round(2 * ctx.density));
+    const trainCount = small
+        ? small.orbits * lapsPerOrbit
+        : Math.max(WORKING_MIN_TRAINS_64, sizing.count(WORKING_TRAIN_BASE_COUNT));
+    const trainLength = small ? small.trainLength : WORKING_TRAIN_LENGTH;
+    const arcStep = (small ? small.arcSpan : WORKING_TRAIN_ARC_SPAN) / (trainLength - 1);
     const dots = [];
     for (let train = 0; train < trainCount; train += 1) {
-        const orbit = workingOrbit(train % WORKING_ORBIT_COUNT);
-        const leadPhase = hashUnit(train * 5 + 1) * TWO_PI;
+        const orbit = small
+            ? workingSmallOrbit(train % small.orbits, small.orbits)
+            : workingOrbit(train % WORKING_ORBIT_COUNT);
+        const leadPhase = small
+            ? (Math.floor(train / small.orbits) / lapsPerOrbit) * TWO_PI + (train % small.orbits) * 0.9
+            : hashUnit(train * 5 + 1) * TWO_PI;
         const leadAngle = leadPhase + t * WORKING_ANGULAR_SPEED * orbit.speedFactor;
         const orbitRadius = worldRadius * orbit.orbitRadiusFactor;
-        for (let slot = 0; slot < WORKING_TRAIN_LENGTH; slot += 1) {
+        for (let slot = 0; slot < trainLength; slot += 1) {
             const angle = leadAngle - slot * arcStep;
             const planar = {
                 x: Math.cos(angle) * orbitRadius,
@@ -106,17 +141,35 @@ export const working = (t, ctx) => {
             const point = rotateZ(tilted, orbit.roll);
             const projected = project(point, origin, worldRadius);
             const seed = train * 13 + slot * 7 + 2;
-            const trail = 1 - slot / (WORKING_TRAIN_LENGTH - 1);
+            const trail = 1 - slot / (trainLength - 1);
             const ink = shadeByDepth(projected.depth) +
                 (hashUnit(seed) - 0.5) * 0.08 -
                 (orbit.weight - 0.5) * WORKING_ORBIT_INK_SPREAD;
             const alpha = (WORKING_TRAIL_ALPHA_FLOOR + (1 - WORKING_TRAIL_ALPHA_FLOOR) * trail) *
                 (WORKING_ORBIT_ALPHA_FLOOR + (1 - WORKING_ORBIT_ALPHA_FLOOR) * orbit.weight);
-            const radius = sizing.radius(WORKING_BASE_RADIUS_PX) * (0.75 + 0.5 * hashUnit(seed + 3));
+            const radius = sizing.radius(WORKING_BASE_RADIUS_PX) * (0.9 + 0.25 * hashUnit(seed + 3));
             dots.push(toDot(projected, radius, ink, alpha));
         }
     }
-    return { dots, strokes: [] };
+    const paths = small
+        ? Array.from({ length: small.orbits }, (_unused, orbitIndex) => {
+            const orbit = workingSmallOrbit(orbitIndex, small.orbits);
+            const orbitRadius = worldRadius * orbit.orbitRadiusFactor;
+            const points = Array.from({ length: WORKING_PATH_SEGMENTS + 1 }, (_unusedPoint, j) => {
+                const angle = (j / WORKING_PATH_SEGMENTS) * TWO_PI;
+                const planar = {
+                    x: Math.cos(angle) * orbitRadius,
+                    y: 0,
+                    z: Math.sin(angle) * orbitRadius
+                };
+                return project(rotateZ(rotateX(planar, orbit.tilt), orbit.roll), origin, worldRadius);
+            });
+            return points
+                .slice(1)
+                .map((to, j) => toStroke(points[j], to, sizing.radius(WORKING_PATH_WIDTH_PX), WORKING_PATH_INK, WORKING_PATH_ALPHA));
+        }).flat()
+        : [];
+    return { dots, strokes: paths };
 };
 // ---------------------------------------------------------------------------
 // searching -- a dotted globe with a meridian band sweeping around it
@@ -200,9 +253,23 @@ const SOLVING_TILT = -0.5;
  * cluster relative to its neighbours instead of only reshuffling texture
  * that looks the same before and after. */
 const SOLVING_LANDMARKS_PER_TIER = 3;
+/** One phase for every tier, so in the solved pose each tier's landmarks line up into the same
+ * three columns and a turned tier visibly breaks out of them. A per-tier phase scattered them
+ * even when solved, leaving nothing for a turn to disturb. */
+const SOLVING_LANDMARK_PHASE = hashUnit(5) * TWO_PI;
 const SOLVING_LANDMARK_RADIUS_PX = 3.1;
 const SOLVING_LANDMARK_INK_BOOST = 0.45;
 const SOLVING_LANDMARK_ALPHA = 0.9;
+/** Each landmark also draws a short meridian stroke spanning its tier. Solved, the strokes of all
+ * tiers join into three unbroken vertical lines; a turned tier's strokes jump sideways and break
+ * the lines into a visible staircase. Held scrambled, loose landmark dots alone still formed tidy
+ * columns of their own and read as just another solved pose. */
+const SOLVING_MERIDIAN_POINTS_PER_TIER = 3;
+const SOLVING_MERIDIAN_WIDTH_PX = 1.6;
+const SOLVING_MERIDIAN_INK_BOOST = 0.35;
+const SOLVING_MERIDIAN_ALPHA = 0.85;
+/** The meridians stop this far short of the poles, where all three would otherwise converge. */
+const SOLVING_MERIDIAN_Y_LIMIT = 0.9;
 /** A static ring of short strokes at each cut between tiers, unaffected by
  * any turn, so the "cut into bands" structure reads even while the puzzle
  * sits solved and nothing is moving. */
@@ -270,8 +337,7 @@ export const solving = (t, ctx) => {
         const yUnit = solvingTierCenterYUnit(tier);
         const y = yUnit * worldRadius;
         const ringRadius = Math.sqrt(Math.max(0, 1 - yUnit * yUnit)) * worldRadius;
-        const phase = hashUnit(tier * 29 + 5) * TWO_PI;
-        const longitude = phase + (slot / SOLVING_LANDMARKS_PER_TIER) * TWO_PI;
+        const longitude = SOLVING_LANDMARK_PHASE + (slot / SOLVING_LANDMARKS_PER_TIER) * TWO_PI;
         const base = {
             x: Math.cos(longitude) * ringRadius,
             y,
@@ -299,7 +365,31 @@ export const solving = (t, ctx) => {
         });
         return Array.from({ length: SOLVING_SEAM_SEGMENTS }, (_unusedSegment, j) => toStroke(ringPoints[j], ringPoints[j + 1], seamWidth, SOLVING_SEAM_INK, SOLVING_SEAM_ALPHA));
     }).flat();
-    return { dots: [...texture, ...landmarks], strokes: seams };
+    const meridianWidth = sizing.radius(SOLVING_MERIDIAN_WIDTH_PX);
+    const meridians = Array.from({ length: SOLVING_TIER_COUNT * SOLVING_LANDMARKS_PER_TIER }, (_unused, i) => {
+        const tier = Math.floor(i / SOLVING_LANDMARKS_PER_TIER);
+        const slot = i % SOLVING_LANDMARKS_PER_TIER;
+        const longitude = SOLVING_LANDMARK_PHASE + (slot / SOLVING_LANDMARKS_PER_TIER) * TWO_PI;
+        const topYUnit = Math.min(SOLVING_MERIDIAN_Y_LIMIT, 1 - (2 * tier) / SOLVING_TIER_COUNT);
+        const bottomYUnit = Math.max(-SOLVING_MERIDIAN_Y_LIMIT, 1 - (2 * (tier + 1)) / SOLVING_TIER_COUNT);
+        const points = Array.from({ length: SOLVING_MERIDIAN_POINTS_PER_TIER }, (_unusedPoint, j) => {
+            const yUnit = topYUnit + ((bottomYUnit - topYUnit) * j) / (SOLVING_MERIDIAN_POINTS_PER_TIER - 1);
+            const ringRadius = Math.sqrt(Math.max(0, 1 - yUnit * yUnit)) * worldRadius;
+            const base = {
+                x: Math.cos(longitude) * ringRadius,
+                y: yUnit * worldRadius,
+                z: Math.sin(longitude) * ringRadius
+            };
+            const turned = rotateY(base, solvingTurnAngle(tier, cyclePos));
+            return project(rotateX(turned, SOLVING_TILT), origin, worldRadius);
+        });
+        return points.slice(1).map((to, j) => {
+            const from = points[j];
+            const depth = (from.depth + to.depth) / 2;
+            return toStroke(from, to, meridianWidth, shadeByDepth(depth) - SOLVING_MERIDIAN_INK_BOOST, SOLVING_MERIDIAN_ALPHA);
+        });
+    }).flat();
+    return { dots: [...texture, ...landmarks], strokes: [...seams, ...meridians] };
 };
 // ---------------------------------------------------------------------------
 // listening -- stacked horizontal rings with a wave rolling through them
@@ -307,13 +397,17 @@ export const solving = (t, ctx) => {
 /** Fewer, fatter rings at the smaller presets read as distinct stacked bands;
  * six thin rings at 20px used to compress into a single smudge. */
 const LISTENING_RING_COUNT = { 64: 5, 32: 4, 20: 3 };
+/** Dots per ring at 64px, through `countAlongPath` so 32px keeps a denser ring than 20px
+ * instead of both falling to the minimum below. */
 const LISTENING_DOTS_PER_RING_BASE = 26;
 /** A ring below this many dots reads as a loose cluster of points rather than
  * a line, especially once it is a small ellipse at 20px. */
 const LISTENING_MIN_DOTS_PER_RING = 10;
 const LISTENING_BASE_RADIUS_PX = 1.5;
 const LISTENING_WAVE_SPEED = 0.6;
-const LISTENING_SWELL = 0.55;
+/** How much a ring's dots grow as the wave crests through it. At 0.55 the crest ate most of the
+ * gap between rings at 32/20px, where the rings sit only a few px apart. */
+const LISTENING_SWELL = 0.3;
 const LISTENING_LIFT_INK = 0.45;
 const LISTENING_SPIN_SPEED = 0.12;
 /** A ring's own vertical thickness once tilted is (its radius) x sin(tilt); a
@@ -322,10 +416,10 @@ const LISTENING_SPIN_SPEED = 0.12;
  * neighbouring rings' ellipses swallow the empty space between them. Kept
  * shallow rather than flattened to zero so a ring still reads as an ellipse
  * seen slightly from above, not a flat line. */
-const LISTENING_TILT = -0.13;
+const LISTENING_TILT = -0.1;
 /** Rings are stacked between +/- this fraction of the world radius, short of
  * the poles so the top and bottom rings stay full circles, not points. */
-const LISTENING_Y_SPAN = 0.82;
+const LISTENING_Y_SPAN = 0.86;
 const listeningRing = (ring, ringCount, worldRadius) => {
     const yUnit = (-1 + (2 * ring + 1) / ringCount) * LISTENING_Y_SPAN;
     const y = yUnit * worldRadius;
@@ -339,8 +433,7 @@ export const listening = (t, ctx) => {
     const origin = originOf(ctx);
     const worldRadius = worldRadiusOf(ctx);
     const ringCount = LISTENING_RING_COUNT[ctx.size];
-    const totalBase = ringCount * LISTENING_DOTS_PER_RING_BASE;
-    const dotsPerRing = Math.max(LISTENING_MIN_DOTS_PER_RING, Math.round(sizing.count(totalBase) / ringCount));
+    const dotsPerRing = Math.max(LISTENING_MIN_DOTS_PER_RING, sizing.countAlongPath(LISTENING_DOTS_PER_RING_BASE));
     const dots = Array.from({ length: ringCount }, (_unused, r) => {
         const ring = listeningRing(r, ringCount, worldRadius);
         const wave = ring.wave(t);

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/ThinkingOrb/orb/space.d.ts

@@ -18,9 +18,13 @@ export type Projected = {
     depth: number;
     scale: number;
 };
-/** The two scalers `modeSizing` hands back: multiply a mode's own base counts and radii by them. */
+/** The scalers `modeSizing` hands back: multiply a mode's own base counts and radii by them. */
 export type ModeSizing = {
+    /** For marks spread over an area (a swarm, a globe's surface): scales with `size` squared. */
     count: (base: number) => number;
+    /** For marks spaced along a line (a ring, a thread): scales with `size`, so the gap between
+     * neighbours keeps the same share of the canvas at every size instead of closing up. */
+    countAlongPath: (base: number) => number;
     radius: (base: number) => number;
 };
 /** Rotates a point about the X axis (mixes y and z). */
@@ -57,7 +61,8 @@ export declare const hashUnit: (seed: number) => number;
 /**
  * Turns `(size, density, dotScale)` into a count scaler and a radius scaler,
  * so every mode derives its dot counts and radii the same way instead of
- * keeping its own per-size table. Counts scale with area (`size` squared);
+ * keeping its own per-size table. Counts scale with area (`size` squared) for
+ * marks spread over a surface and with `size` for marks spaced along a path;
  * radii grow sub-linearly, with a floor that keeps dots visible at 20px.
  */
 export declare const modeSizing: (size: ModeSize, density: number, dotScale: number) => ModeSizing;

package/dist/ThinkingOrb/orb/space.js

@@ -100,7 +100,8 @@ const MIN_DOT_RADIUS_PX = 0.6;
 /**
  * Turns `(size, density, dotScale)` into a count scaler and a radius scaler,
  * so every mode derives its dot counts and radii the same way instead of
- * keeping its own per-size table. Counts scale with area (`size` squared);
+ * keeping its own per-size table. Counts scale with area (`size` squared) for
+ * marks spread over a surface and with `size` for marks spaced along a path;
  * radii grow sub-linearly, with a floor that keeps dots visible at 20px.
  */
 export const modeSizing = (size, density, dotScale) => {
@@ -110,6 +111,7 @@ export const modeSizing = (size, density, dotScale) => {
     const safeDotScale = dotScale > 0 ? dotScale : 0.1;
     return {
         count: (base) => Math.max(1, Math.round(base * areaRatio * safeDensity)),
+        countAlongPath: (base) => Math.max(1, Math.round(base * sizeRatio * safeDensity)),
         radius: (base) => Math.max(MIN_DOT_RADIUS_PX, base * sizeRatio ** RADIUS_GROWTH_EXPONENT * safeDotScale)
     };
 };

package/dist-wc/index.js

@@ -24017,6 +24017,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 	let i = e / REFERENCE_SIZE, a = i * i, o = t > 0 ? t : .1, s = n > 0 ? n : .1;
 	return {
 		count: (e) => Math.max(1, Math.round(e * a * o)),
+		countAlongPath: (e) => Math.max(1, Math.round(e * i * o)),
 		radius: (e) => Math.max(MIN_DOT_RADIUS_PX, e * i ** RADIUS_GROWTH_EXPONENT * s)
 	};
 }, GRAVITY_DEFAULTS = {
@@ -24055,15 +24056,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,
@@ -24081,11 +24079,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 	width: n,
 	ink: clamp01$2(i),
 	alpha: clamp01$2(a)
-}), WORKING_TRAIN_BASE_COUNT = 22, WORKING_MIN_TRAINS = {
-	64: 3,
-	32: 3,
-	20: 12
-}, WORKING_TRAIN_LENGTH = 5, WORKING_TRAIN_ARC_SPAN = .5, WORKING_BASE_RADIUS_PX = 1.6, WORKING_ORBIT_COUNT = 6, WORKING_ANGULAR_SPEED = 1.1, WORKING_ORBIT_INK_SPREAD = .3, WORKING_ORBIT_ALPHA_FLOOR = .65, WORKING_TRAIL_ALPHA_FLOOR = .35, workingOrbit = (e) => {
+}), WORKING_TRAIN_BASE_COUNT = 22, WORKING_MIN_TRAINS_64 = 3, WORKING_TRAIN_LENGTH = 5, WORKING_TRAIN_ARC_SPAN = .5, WORKING_BASE_RADIUS_PX = 2.2, WORKING_ORBIT_COUNT = 6, WORKING_ANGULAR_SPEED = 1.1, WORKING_ORBIT_INK_SPREAD = .3, WORKING_ORBIT_ALPHA_FLOOR = .65, WORKING_TRAIL_ALPHA_FLOOR = .35, workingOrbit = (e) => {
 	let t = e * 31 + 7;
 	return {
 		tilt: (hashUnit(t) - .5) * Math.PI,
@@ -24094,22 +24088,54 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		speedFactor: .6 + 1.3 * hashUnit(t + 9),
 		weight: .35 + .65 * hashUnit(t + 15)
 	};
-}, working = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = Math.max(WORKING_MIN_TRAINS[t.size], n.count(WORKING_TRAIN_BASE_COUNT)), s = WORKING_TRAIN_ARC_SPAN / (WORKING_TRAIN_LENGTH - 1), c = [];
-	for (let t = 0; t < o; t += 1) {
-		let o = workingOrbit(t % WORKING_ORBIT_COUNT), l = hashUnit(t * 5 + 1) * TWO_PI$1 + e * WORKING_ANGULAR_SPEED * o.speedFactor, u = a * o.orbitRadiusFactor;
-		for (let e = 0; e < WORKING_TRAIN_LENGTH; e += 1) {
-			let f = l - e * s, p = project(rotateZ(rotateX({
-				x: Math.cos(f) * u,
+}, WORKING_SMALL_LAYOUT = {
+	32: {
+		orbits: 4,
+		trainLength: 6,
+		arcSpan: 1
+	},
+	20: {
+		orbits: 3,
+		trainLength: 7,
+		arcSpan: 1.25
+	}
+}, WORKING_SMALL_ORBIT_TILT = .5, WORKING_PATH_SEGMENTS = 24, WORKING_PATH_WIDTH_PX = .8, WORKING_PATH_INK = .5, WORKING_PATH_ALPHA = .45, WORKING_SMALL_ORBIT_RADIUS = .85, WORKING_SMALL_SPEEDS = [
+	.8,
+	1.15,
+	1.45,
+	1
+], workingSmallOrbit = (e, t) => ({
+	...workingOrbit(e),
+	tilt: WORKING_SMALL_ORBIT_TILT,
+	roll: e / t * Math.PI,
+	orbitRadiusFactor: WORKING_SMALL_ORBIT_RADIUS,
+	speedFactor: WORKING_SMALL_SPEEDS[e % WORKING_SMALL_SPEEDS.length]
+}), working = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = WORKING_SMALL_LAYOUT[t.size], s = Math.max(1, Math.round(2 * t.density)), c = o ? o.orbits * s : Math.max(WORKING_MIN_TRAINS_64, n.count(WORKING_TRAIN_BASE_COUNT)), l = o ? o.trainLength : WORKING_TRAIN_LENGTH, u = (o ? o.arcSpan : WORKING_TRAIN_ARC_SPAN) / (l - 1), f = [];
+	for (let t = 0; t < c; t += 1) {
+		let c = o ? workingSmallOrbit(t % o.orbits, o.orbits) : workingOrbit(t % WORKING_ORBIT_COUNT), p = (o ? Math.floor(t / o.orbits) / s * TWO_PI$1 + t % o.orbits * .9 : hashUnit(t * 5 + 1) * TWO_PI$1) + e * WORKING_ANGULAR_SPEED * c.speedFactor, h = a * c.orbitRadiusFactor;
+		for (let e = 0; e < l; e += 1) {
+			let o = p - e * u, s = project(rotateZ(rotateX({
+				x: Math.cos(o) * h,
 				y: 0,
-				z: Math.sin(f) * u
-			}, o.tilt), o.roll), i, a), h = t * 13 + e * 7 + 2, S = 1 - e / (WORKING_TRAIN_LENGTH - 1), C = shadeByDepth(p.depth) + (hashUnit(h) - .5) * .08 - (o.weight - .5) * WORKING_ORBIT_INK_SPREAD, k = (WORKING_TRAIL_ALPHA_FLOOR + (1 - WORKING_TRAIL_ALPHA_FLOOR) * S) * (WORKING_ORBIT_ALPHA_FLOOR + (1 - WORKING_ORBIT_ALPHA_FLOOR) * o.weight), R = n.radius(WORKING_BASE_RADIUS_PX) * (.75 + .5 * hashUnit(h + 3));
-			c.push(toDot(p, R, C, k));
+				z: Math.sin(o) * h
+			}, c.tilt), c.roll), i, a), S = t * 13 + e * 7 + 2, C = 1 - e / (l - 1), k = shadeByDepth(s.depth) + (hashUnit(S) - .5) * .08 - (c.weight - .5) * WORKING_ORBIT_INK_SPREAD, R = (WORKING_TRAIL_ALPHA_FLOOR + (1 - WORKING_TRAIL_ALPHA_FLOOR) * C) * (WORKING_ORBIT_ALPHA_FLOOR + (1 - WORKING_ORBIT_ALPHA_FLOOR) * c.weight), te = n.radius(WORKING_BASE_RADIUS_PX) * (.9 + .25 * hashUnit(S + 3));
+			f.push(toDot(s, te, k, R));
 		}
 	}
 	return {
-		dots: c,
-		strokes: []
+		dots: f,
+		strokes: o ? Array.from({ length: o.orbits }, (e, t) => {
+			let s = workingSmallOrbit(t, o.orbits), c = a * s.orbitRadiusFactor, l = Array.from({ length: 25 }, (e, t) => {
+				let n = t / WORKING_PATH_SEGMENTS * TWO_PI$1;
+				return project(rotateZ(rotateX({
+					x: Math.cos(n) * c,
+					y: 0,
+					z: Math.sin(n) * c
+				}, s.tilt), s.roll), i, a);
+			});
+			return l.slice(1).map((e, t) => toStroke(l[t], e, n.radius(WORKING_PATH_WIDTH_PX), WORKING_PATH_INK, WORKING_PATH_ALPHA));
+		}).flat() : []
 	};
 }, SEARCHING_BASE_COUNT = 150, SEARCHING_BASE_RADIUS_PX = 1.5, SEARCHING_BAND_HALF_WIDTH = .42, SEARCHING_SWEEP_SPEED = 1.15, SEARCHING_SPIN_SPEED = .18, SEARCHING_TILT = -.55, SEARCHING_ARC_SEGMENTS = 10, SEARCHING_ARC_LATITUDE_SPAN = .92, SEARCHING_BAND_INK_BOOST = .75, SEARCHING_BAND_ALPHA_BOOST = .35, SEARCHING_BAND_RADIUS_BOOST = 1.3, SEARCHING_ARC_STROKE_RADIUS = 2.2, SEARCHING_ARC_INK = 0, SEARCHING_ARC_ALPHA = .7, angleDistance = (e, t) => {
 	let n = Math.abs(e - t) % TWO_PI$1;
@@ -24130,7 +24156,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		dots: c,
 		strokes: Array.from({ length: SEARCHING_ARC_SEGMENTS }, (e, t) => toStroke(l[t], l[t + 1], u, SEARCHING_ARC_INK, SEARCHING_ARC_ALPHA))
 	};
-}, SOLVING_BASE_COUNT = 130, SOLVING_BASE_RADIUS_PX = 1.5, SOLVING_TIER_COUNT = 4, SOLVING_TURN_DURATION = .16, SOLVING_TURN_GAP = .3, SOLVING_HOLD_GAP = .55, SOLVING_TILT = -.5, SOLVING_LANDMARKS_PER_TIER = 3, SOLVING_LANDMARK_RADIUS_PX = 3.1, SOLVING_LANDMARK_INK_BOOST = .45, SOLVING_LANDMARK_ALPHA = .9, SOLVING_SEAM_SEGMENTS = 12, SOLVING_SEAM_STROKE_RADIUS = 1.05, SOLVING_SEAM_INK = .15, SOLVING_SEAM_ALPHA = .5, solvingTurnStart = (e) => e * SOLVING_TURN_GAP, solvingTurnEnd = (e) => solvingTurnStart(e) + SOLVING_TURN_DURATION, SOLVING_HOLD_START = solvingTurnEnd(SOLVING_TIER_COUNT - 1) + SOLVING_HOLD_GAP, solvingReturnStart = (e) => SOLVING_HOLD_START + (SOLVING_TIER_COUNT - 1 - e) * SOLVING_TURN_GAP, solvingReturnEnd = (e) => solvingReturnStart(e) + SOLVING_TURN_DURATION, SOLVING_CYCLE = solvingReturnEnd(0) + SOLVING_HOLD_GAP, solvingTierTurn = (e, t) => {
+}, SOLVING_BASE_COUNT = 130, SOLVING_BASE_RADIUS_PX = 1.5, SOLVING_TIER_COUNT = 4, SOLVING_TURN_DURATION = .16, SOLVING_TURN_GAP = .3, SOLVING_HOLD_GAP = .55, SOLVING_TILT = -.5, SOLVING_LANDMARKS_PER_TIER = 3, SOLVING_LANDMARK_PHASE = hashUnit(5) * TWO_PI$1, SOLVING_LANDMARK_RADIUS_PX = 3.1, SOLVING_LANDMARK_INK_BOOST = .45, SOLVING_LANDMARK_ALPHA = .9, SOLVING_MERIDIAN_POINTS_PER_TIER = 3, SOLVING_MERIDIAN_WIDTH_PX = 1.6, SOLVING_MERIDIAN_INK_BOOST = .35, SOLVING_MERIDIAN_ALPHA = .85, SOLVING_MERIDIAN_Y_LIMIT = .9, SOLVING_SEAM_SEGMENTS = 12, SOLVING_SEAM_STROKE_RADIUS = 1.05, SOLVING_SEAM_INK = .15, SOLVING_SEAM_ALPHA = .5, solvingTurnStart = (e) => e * SOLVING_TURN_GAP, solvingTurnEnd = (e) => solvingTurnStart(e) + SOLVING_TURN_DURATION, SOLVING_HOLD_START = solvingTurnEnd(SOLVING_TIER_COUNT - 1) + SOLVING_HOLD_GAP, solvingReturnStart = (e) => SOLVING_HOLD_START + (SOLVING_TIER_COUNT - 1 - e) * SOLVING_TURN_GAP, solvingReturnEnd = (e) => solvingReturnStart(e) + SOLVING_TURN_DURATION, SOLVING_CYCLE = solvingReturnEnd(0) + SOLVING_HOLD_GAP, solvingTierTurn = (e, t) => {
 	let n = solvingTurnStart(e), i = solvingTurnEnd(e), a = solvingReturnStart(e), o = solvingReturnEnd(e);
 	return t <= n ? 0 : t < i ? easeOutCubic((t - n) / SOLVING_TURN_DURATION) : t < a ? 1 : t < o ? 1 - easeInOutCubic((t - a) / SOLVING_TURN_DURATION) : 0;
 }, solvingTierOf = (e) => clamp$1(Math.floor((1 - e) / 2 * SOLVING_TIER_COUNT), 0, SOLVING_TIER_COUNT - 1), solvingTierDirection = (e) => hashUnit(e * 53 + 21) < .5 ? -1 : 1, solvingTierCenterYUnit = (e) => 1 - (2 * e + 1) / SOLVING_TIER_COUNT, solvingSeamYUnit = (e) => 1 - 2 * (e + 1) / SOLVING_TIER_COUNT, solvingTurnAngle = (e, t) => solvingTierTurn(e, t) * solvingTierDirection(e) * (Math.PI / 2), solving = (e, t) => {
@@ -24138,7 +24164,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		let c = sampleSphere(t, o, a), l = project(rotateX(rotateY(c, solvingTurnAngle(solvingTierOf(a > 0 ? c.y / a : 0), s)), SOLVING_TILT), i, a), u = shadeByDepth(l.depth), f = .55 + .3 * hashUnit(t * 3 + 9);
 		return toDot(l, n.radius(SOLVING_BASE_RADIUS_PX), u, f);
 	}), l = Array.from({ length: SOLVING_TIER_COUNT * SOLVING_LANDMARKS_PER_TIER }, (e, t) => {
-		let o = Math.floor(t / SOLVING_LANDMARKS_PER_TIER), c = t % SOLVING_LANDMARKS_PER_TIER, l = solvingTierCenterYUnit(o), u = l * a, f = Math.sqrt(Math.max(0, 1 - l * l)) * a, p = hashUnit(o * 29 + 5) * TWO_PI$1 + c / SOLVING_LANDMARKS_PER_TIER * TWO_PI$1, h = project(rotateX(rotateY({
+		let o = Math.floor(t / SOLVING_LANDMARKS_PER_TIER), c = t % SOLVING_LANDMARKS_PER_TIER, l = solvingTierCenterYUnit(o), u = l * a, f = Math.sqrt(Math.max(0, 1 - l * l)) * a, p = SOLVING_LANDMARK_PHASE + c / SOLVING_LANDMARKS_PER_TIER * TWO_PI$1, h = project(rotateX(rotateY({
 			x: Math.cos(p) * f,
 			y: u,
 			z: Math.sin(p) * f
@@ -24154,16 +24180,29 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 			}, SOLVING_TILT), i, a);
 		});
 		return Array.from({ length: SOLVING_SEAM_SEGMENTS }, (e, t) => toStroke(c[t], c[t + 1], u, SOLVING_SEAM_INK, SOLVING_SEAM_ALPHA));
+	}).flat(), p = n.radius(SOLVING_MERIDIAN_WIDTH_PX), h = Array.from({ length: SOLVING_TIER_COUNT * SOLVING_LANDMARKS_PER_TIER }, (e, t) => {
+		let n = Math.floor(t / SOLVING_LANDMARKS_PER_TIER), o = SOLVING_LANDMARK_PHASE + t % SOLVING_LANDMARKS_PER_TIER / SOLVING_LANDMARKS_PER_TIER * TWO_PI$1, c = Math.min(SOLVING_MERIDIAN_Y_LIMIT, 1 - 2 * n / SOLVING_TIER_COUNT), l = Math.max(-.9, 1 - 2 * (n + 1) / SOLVING_TIER_COUNT), u = Array.from({ length: SOLVING_MERIDIAN_POINTS_PER_TIER }, (e, t) => {
+			let u = c + (l - c) * t / (SOLVING_MERIDIAN_POINTS_PER_TIER - 1), f = Math.sqrt(Math.max(0, 1 - u * u)) * a;
+			return project(rotateX(rotateY({
+				x: Math.cos(o) * f,
+				y: u * a,
+				z: Math.sin(o) * f
+			}, solvingTurnAngle(n, s)), SOLVING_TILT), i, a);
+		});
+		return u.slice(1).map((e, t) => {
+			let n = u[t];
+			return toStroke(n, e, p, shadeByDepth((n.depth + e.depth) / 2) - SOLVING_MERIDIAN_INK_BOOST, SOLVING_MERIDIAN_ALPHA);
+		});
 	}).flat();
 	return {
 		dots: [...c, ...l],
-		strokes: f
+		strokes: [...f, ...h]
 	};
 }, LISTENING_RING_COUNT = {
 	64: 5,
 	32: 4,
 	20: 3
-}, LISTENING_DOTS_PER_RING_BASE = 26, LISTENING_MIN_DOTS_PER_RING = 10, LISTENING_BASE_RADIUS_PX = 1.5, LISTENING_WAVE_SPEED = .6, LISTENING_SWELL = .55, LISTENING_LIFT_INK = .45, LISTENING_SPIN_SPEED = .12, LISTENING_TILT = -.13, LISTENING_Y_SPAN = .82, listeningRing = (e, t, n) => {
+}, LISTENING_DOTS_PER_RING_BASE = 26, LISTENING_MIN_DOTS_PER_RING = 10, LISTENING_BASE_RADIUS_PX = 1.5, LISTENING_WAVE_SPEED = .6, LISTENING_SWELL = .3, LISTENING_LIFT_INK = .45, LISTENING_SPIN_SPEED = .12, LISTENING_TILT = -.1, LISTENING_Y_SPAN = .86, listeningRing = (e, t, n) => {
 	let i = (-1 + (2 * e + 1) / t) * LISTENING_Y_SPAN * n;
 	return {
 		y: i,
@@ -24172,15 +24211,15 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		wave: (n) => (Math.sin(TWO_PI$1 * (e / t - n * LISTENING_WAVE_SPEED)) + 1) / 2
 	};
 }, listening = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = LISTENING_RING_COUNT[t.size], s = o * LISTENING_DOTS_PER_RING_BASE, c = Math.max(LISTENING_MIN_DOTS_PER_RING, Math.round(n.count(s) / o));
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = LISTENING_RING_COUNT[t.size], s = Math.max(LISTENING_MIN_DOTS_PER_RING, n.countAlongPath(LISTENING_DOTS_PER_RING_BASE));
 	return {
-		dots: Array.from({ length: o }, (t, s) => {
-			let l = listeningRing(s, o, a), u = l.wave(e);
-			return Array.from({ length: c }, (t, o) => {
-				let s = o / c * TWO_PI$1 + l.phase, f = project(rotateY(rotateX({
-					x: Math.cos(s) * l.ringRadius,
+		dots: Array.from({ length: o }, (t, c) => {
+			let l = listeningRing(c, o, a), u = l.wave(e);
+			return Array.from({ length: s }, (t, o) => {
+				let c = o / s * TWO_PI$1 + l.phase, f = project(rotateY(rotateX({
+					x: Math.cos(c) * l.ringRadius,
 					y: l.y,
-					z: Math.sin(s) * l.ringRadius
+					z: Math.sin(c) * l.ringRadius
 				}, LISTENING_TILT), e * LISTENING_SPIN_SPEED), i, a), p = shadeByDepth(f.depth) - u * LISTENING_LIFT_INK, h = .6 + u * .3;
 				return toDot(f, n.radius(LISTENING_BASE_RADIUS_PX) * (1 + u * LISTENING_SWELL), p, h);
 			});
@@ -24194,7 +24233,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 }), squaredDistance = (e, t) => {
 	let n = e.x - t.x, i = e.y - t.y, a = e.z - t.z;
 	return n * n + i * i + a * a;
-}, NODE_BASE_COUNT = 16, MIN_NODE_COUNT = 6, NEIGHBOR_COUNT = 3, NODE_BASE_RADIUS = 3.4, PULSE_BASE_RADIUS = 2, EDGE_BASE_WIDTH = 1.1, NODE_ROTATE_SPEED = .35, NODE_TILT = .45, EDGE_FLICKER_SPEED = .5, EDGE_MIN_ALPHA = .25, PULSE_SPEED = .6, nearestNeighborEdges = (e, t) => {
+}, NODE_BASE_COUNT = 10, MIN_NODE_COUNT = 6, NEIGHBOR_COUNT = 2, NODE_BASE_RADIUS = 3.4, PULSE_BASE_RADIUS = 1.4, EDGE_BASE_WIDTH = 1.1, NODE_ROTATE_SPEED = .35, NODE_TILT = .45, EDGE_FLICKER_SPEED = .5, EDGE_MIN_ALPHA = .25, PULSE_SPEED = .6, nearestNeighborEdges = (e, t) => {
 	let n = e.map((e, t) => t), i = n.flatMap((i) => n.filter((e) => e !== i).sort((t, n) => squaredDistance(e[i], e[t]) - squaredDistance(e[i], e[n])).slice(0, t).map((e) => i < e ? [i, e] : [e, i]));
 	return i.filter(([e, t], n) => i.findIndex(([n, i]) => n === e && i === t) === n);
 }, connecting = (e, t) => {
@@ -24232,51 +24271,59 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		dots: [...l, ...p],
 		strokes: f
 	};
-}, STRAND_COUNT = 3, STRAND_POINTS_BASE_COUNT = 26, MIN_STRAND_POINTS = 10, STRAND_WRAPS = 1.1, STRAND_ROTATE_SPEED = .3, STRAND_TILT = .5, STRAND_DOT_BASE_RADIUS = 1.6, STRAND_STROKE_BASE_WIDTH = 1.4, STRAND_BRAID_CYCLES = 2.5, STRAND_BRAID_SWING = 1.3, strandBaseAngle = (e) => e / STRAND_COUNT * Math.PI * 2, strandPoint = (e, t, n, i, a) => {
-	let o = t / (n - 1), s = o * Math.PI - Math.PI / 2, c = i * Math.sin(s), l = i * Math.cos(s), u = strandBaseAngle(e), f = STRAND_BRAID_SWING * Math.sin(o * STRAND_BRAID_CYCLES * Math.PI * 2 + u), p = o * STRAND_WRAPS * Math.PI * 2 + u + f + a * STRAND_ROTATE_SPEED;
-	return rotateX({
-		x: l * Math.cos(p),
-		y: c,
-		z: l * Math.sin(p)
-	}, STRAND_TILT);
+}, STRAND_COUNT = 3, STRAND_POINTS_BASE_COUNT = 40, MIN_STRAND_POINTS = 16, STRAND_INCLINATION = .6, STRAND_WAVE_COUNT = 3, STRAND_WAVE_AMPLITUDE = .12, STRAND_WAVE_SPEED = .9, STRAND_ROTATE_SPEED = .3, STRAND_TILT = 1.1, STRAND_DOT_BASE_RADIUS = 1.6, STRAND_STROKE_BASE_WIDTH = 1.4, STRAND_STROKE_SIZE_FACTOR = {
+	64: 1,
+	32: 1.2,
+	20: 1.5
+}, STRAND_DOT_SIZE_FACTOR = {
+	64: 1,
+	32: .85,
+	20: .7
+}, STRAND_DEPTH_INK = .45, STRAND_SHADE_STEP = .1, strandBaseAngle = (e) => e / STRAND_COUNT * Math.PI * 2, strandPoint = (e, t, n, i, a) => {
+	let o = t / (n - 1) * Math.PI * 2, s = STRAND_WAVE_AMPLITUDE * Math.sin(o * STRAND_WAVE_COUNT + a * STRAND_WAVE_SPEED + strandBaseAngle(e));
+	return rotateX(rotateY(rotateX({
+		x: i * Math.cos(s) * Math.cos(o),
+		y: i * Math.sin(s),
+		z: i * Math.cos(s) * Math.sin(o)
+	}, STRAND_INCLINATION), strandBaseAngle(e) + a * STRAND_ROTATE_SPEED), STRAND_TILT);
 }, weaving = (e, t) => {
-	let { sizing: n, originPx: i, sphereRadius: a } = sphereGeometry(t), o = Math.max(MIN_STRAND_POINTS, n.count(STRAND_POINTS_BASE_COUNT)), s = Array.from({ length: STRAND_COUNT }, (t, n) => Array.from({ length: o }, (t, s) => project(strandPoint(n, s, o, a, e), i, a)));
+	let { sizing: n, originPx: i, sphereRadius: a } = sphereGeometry(t), o = Math.max(MIN_STRAND_POINTS, n.countAlongPath(STRAND_POINTS_BASE_COUNT)), s = Array.from({ length: STRAND_COUNT }, (t, n) => Array.from({ length: o }, (t, s) => project(strandPoint(n, s, o, a, e), i, a)));
 	return {
-		dots: s.flatMap((e, t) => e.map((e) => ({
+		dots: s.flatMap((e, i) => e.map((e) => ({
 			x: e.x,
 			y: e.y,
 			depth: e.depth,
-			radius: n.radius(STRAND_DOT_BASE_RADIUS),
-			ink: clamp01$1(1 - e.depth * .8 + t * .08),
+			radius: n.radius(STRAND_DOT_BASE_RADIUS) * STRAND_DOT_SIZE_FACTOR[t.size],
+			ink: clamp01$1((1 - e.depth) * STRAND_DEPTH_INK + i * STRAND_SHADE_STEP),
 			alpha: .55 + e.depth * .4
 		}))),
-		strokes: s.flatMap((e, t) => e.slice(1).map((i, a) => {
-			let o = e[a], s = (o.depth + i.depth) / 2;
+		strokes: s.flatMap((e, i) => e.slice(1).map((a, o) => {
+			let s = e[o], c = (s.depth + a.depth) / 2;
 			return {
-				x1: o.x,
-				y1: o.y,
-				x2: i.x,
-				y2: i.y,
-				depth: s,
-				width: n.radius(STRAND_STROKE_BASE_WIDTH),
-				ink: clamp01$1(1 - s * .75 + t * .06),
-				alpha: .6 + s * .35
+				x1: s.x,
+				y1: s.y,
+				x2: a.x,
+				y2: a.y,
+				depth: c,
+				width: n.radius(STRAND_STROKE_BASE_WIDTH) * STRAND_STROKE_SIZE_FACTOR[t.size],
+				ink: clamp01$1((1 - c) * STRAND_DEPTH_INK + i * STRAND_SHADE_STEP),
+				alpha: .6 + c * .35
 			};
 		}))
 	};
-}, TWO_PI = Math.PI * 2, FORM_RADIUS_RATIO = .4, clamp01 = (e) => Math.max(0, Math.min(1, e)), depthToInk = (e) => clamp01(1 - e), depthToAlpha = (e) => clamp01(.5 + e * .5), depthToRadiusFactor = (e) => .7 + e * .3, dotFrom = (e, t, n, i) => ({
+}, TWO_PI = Math.PI * 2, FORM_RADIUS_RATIO = .4, clamp01 = (e) => Math.max(0, Math.min(1, e)), FAR_INK = .6, depthToInk = (e) => clamp01((1 - e) * FAR_INK), depthToAlpha = (e) => clamp01(.5 + e * .5), depthToRadiusFactor = (e) => .7 + e * .3, dotFrom = (e, t, n, i) => ({
 	x: e.x,
 	y: e.y,
 	depth: e.depth,
 	radius: n.radius(t) * depthToRadiusFactor(e.depth) * i,
 	ink: depthToInk(e.depth),
 	alpha: depthToAlpha(e.depth)
-}), place = (e, t, n, i, a, o, s, c) => dotFrom(project(rotateX(rotateY(e, t), n), i, a), o, s, c), EMPTY_STROKES = [], RIBBON_BASE_COUNT = 260, RIBBON_BASE_DOT_RADIUS = 2.2, RIBBON_THREADS = {
-	64: 7,
-	32: 5,
-	20: 4
-}, RIBBON_HALF_WIDTH = .4, RIBBON_AXIS_TILT = .68, RIBBON_RIPPLE_WAVES = 3, RIBBON_RIPPLE_SPEED = 1.15, RIBBON_RIPPLE_AMPLITUDE = .5, RIBBON_THREAD_JITTER = .1, RIBBON_SPIN_SPEED = .48, RIBBON_CAMERA_TILT = .45, RIBBON_EDGE_ALPHA_FLOOR = .5, RIBBON_EDGE_INK_LIFT = .22, composing = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = RIBBON_THREADS[t.size], s = Math.max(1, Math.ceil(n.count(RIBBON_BASE_COUNT) / o)), c = o * s, l = [];
+}), place = (e, t, n, i, a, o, s, c) => dotFrom(project(rotateX(rotateY(e, t), n), i, a), o, s, c), EMPTY_STROKES = [], RIBBON_PER_THREAD_BASE = 36, RIBBON_BASE_DOT_RADIUS = 2.2, RIBBON_THREADS = {
+	64: 5,
+	32: 4,
+	20: 3
+}, RIBBON_HALF_WIDTH = .3, RIBBON_AXIS_TILT = .68, RIBBON_RIPPLE_WAVES = 3, RIBBON_RIPPLE_SPEED = 1.15, RIBBON_RIPPLE_AMPLITUDE = .18, RIBBON_THREAD_JITTER = .1, RIBBON_SPIN_SPEED = .48, RIBBON_CAMERA_TILT = .45, RIBBON_EDGE_ALPHA_FLOOR = .5, RIBBON_EDGE_INK_LIFT = .22, composing = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = RIBBON_THREADS[t.size], s = n.countAlongPath(RIBBON_PER_THREAD_BASE), c = o * s, l = [];
 	for (let t = 0; t < c; t += 1) {
 		let c = t % o, u = Math.floor(t / o), f = o > 1 ? c / (o - 1) * 2 - 1 : 0, p = u / s * TWO_PI, h = Math.sin(p * RIBBON_RIPPLE_WAVES + e * RIBBON_RIPPLE_SPEED) * RIBBON_RIPPLE_AMPLITUDE, S = f * RIBBON_HALF_WIDTH + h, C = rotateZ({
 			x: Math.cos(S) * Math.cos(p) * i,
@@ -24293,8 +24340,8 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		dots: l,
 		strokes: EMPTY_STROKES
 	};
-}, BREATHING_BASE_COUNT = 210, BREATHING_BASE_DOT_RADIUS = 1.7, BREATHING_WORLD_RADIUS_RATIO = .34, BREATHING_AMPLITUDE = .09, BREATHING_SPEED = .55, BREATHING_SHAPE_HARMONIC = 5, BREATHING_SHAPE_SPEED = .22, BREATHING_SHAPE_AMPLITUDE = .035, BREATHING_SPIN_SPEED = .12, BREATHING_TILT = .62, breathing = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * BREATHING_WORLD_RADIUS_RATIO, a = t.size / 2, o = n.count(BREATHING_BASE_COUNT), s = Math.sin(e * BREATHING_SPEED), c = [];
+}, BREATHING_BASE_COUNT = 32, BREATHING_BASE_DOT_RADIUS = 1.7, BREATHING_WORLD_RADIUS_RATIO = .34, BREATHING_AMPLITUDE = .09, BREATHING_SPEED = .55, BREATHING_SHAPE_HARMONIC = 5, BREATHING_SHAPE_SPEED = .22, BREATHING_SHAPE_AMPLITUDE = .035, BREATHING_SPIN_SPEED = .12, BREATHING_TILT = .62, breathing = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * BREATHING_WORLD_RADIUS_RATIO, a = t.size / 2, o = n.countAlongPath(BREATHING_BASE_COUNT), s = Math.sin(e * BREATHING_SPEED), c = [];
 	for (let t = 0; t < o; t += 1) {
 		let l = t / o * TWO_PI, u = Math.sin(l * BREATHING_SHAPE_HARMONIC + e * BREATHING_SHAPE_SPEED) * BREATHING_SHAPE_AMPLITUDE, f = 1 + s * BREATHING_AMPLITUDE + u, p = {
 			x: Math.cos(l) * f * i,
@@ -24307,11 +24354,11 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		dots: c,
 		strokes: EMPTY_STROKES
 	};
-}, SHAPING_BASE_COUNT = 210, SHAPING_BASE_DOT_RADIUS = 1.7, SHAPING_CYCLE_SECONDS = 12, SHAPING_SPIN_SPEED = 2 * Math.PI / SHAPING_CYCLE_SECONDS, SHAPING_TILT = .6, polygonRadius = (e, t) => {
+}, SHAPING_BASE_COUNT = 36, SHAPING_BASE_DOT_RADIUS = 1.7, SHAPING_CYCLE_SECONDS = 12, SHAPING_SPIN_SPEED = 2 * Math.PI / SHAPING_CYCLE_SECONDS, SHAPING_TILT = .6, polygonRadius = (e, t) => {
 	let n = TWO_PI / t, i = n / 2, a = (e % n + n) % n;
 	return Math.cos(i) / Math.cos(a - i);
 }, lerp = (e, t, n) => e + (t - e) * n, shaping = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = n.count(SHAPING_BASE_COUNT), s = (e / SHAPING_CYCLE_SECONDS % 1 + 1) % 1 * 3, c = Math.min(2, Math.floor(s)), l = easeInOutCubic(s - c), u = [];
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = n.countAlongPath(SHAPING_BASE_COUNT), s = (e / SHAPING_CYCLE_SECONDS % 1 + 1) % 1 * 3, c = Math.min(2, Math.floor(s)), l = easeInOutCubic(s - c), u = [];
 	for (let t = 0; t < o; t += 1) {
 		let s = t / o * TWO_PI, f = polygonRadius(s, 3), p = polygonRadius(s, 4), h;
 		h = c === 0 ? lerp(1, f, l) : c === 1 ? lerp(f, p, l) : lerp(p, 1, l);
@@ -24347,7 +24394,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 +24402,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 +24441,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 +24460,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.2",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",