@juspay/svelte-ui-components 4.32.1 → 4.33.0

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

@@ -0,0 +1,9 @@
+/**
+ * The single place that maps a public `OrbState` name to the mode function
+ * that draws it. `ThinkingOrb.svelte` only ever imports `MODES`, never a mode
+ * file directly, so adding a state is a one-line change here plus a new
+ * export in whichever mode file it belongs to.
+ */
+import type { OrbState } from '../../properties';
+import type { ModeFn } from '../types';
+export declare const MODES: Record<OrbState, ModeFn>;

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

@@ -0,0 +1,20 @@
+/**
+ * The single place that maps a public `OrbState` name to the mode function
+ * that draws it. `ThinkingOrb.svelte` only ever imports `MODES`, never a mode
+ * file directly, so adding a state is a one-line change here plus a new
+ * export in whichever mode file it belongs to.
+ */
+import { listening, searching, solving, working } from './sphere';
+import { connecting, weaving } from './network';
+import { breathing, composing, shaping } from './form';
+export const MODES = {
+    working,
+    searching,
+    solving,
+    listening,
+    connecting,
+    weaving,
+    composing,
+    breathing,
+    shaping
+};

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

@@ -0,0 +1,12 @@
+/**
+ * The two "network" modes: `connecting` draws a small graph of nodes on a
+ * sphere with pulses running its edges, and `weaving` draws three strands
+ * braided around a sphere. Both are built from the same handful of points
+ * placed on a sphere and rotated over time, so they share their sizing and
+ * projection setup below.
+ */
+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. */
+export declare const weaving: ModeFn;

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

@@ -0,0 +1,181 @@
+/**
+ * The two "network" modes: `connecting` draws a small graph of nodes on a
+ * sphere with pulses running its edges, and `weaving` draws three strands
+ * braided around a sphere. Both are built from the same handful of points
+ * placed on a sphere and rotated over time, so they share their sizing and
+ * projection setup below.
+ */
+import { hashUnit, modeSizing, project, rotateX, rotateY, sampleSphere } from '../space';
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+/** Both modes read as a sphere of this radius, centred in the canvas -- the spec's ~40% of `size`. */
+const SPHERE_RADIUS_RATIO = 0.4;
+/** The count/radius scaler, canvas centre and world sphere radius every mode below draws into. */
+const sphereGeometry = (ctx) => ({
+    sizing: modeSizing(ctx.size, ctx.density, ctx.dotScale),
+    originPx: ctx.size / 2,
+    sphereRadius: ctx.size * SPHERE_RADIUS_RATIO
+});
+const squaredDistance = (a, b) => {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    const dz = a.z - b.z;
+    return dx * dx + dy * dy + dz * dz;
+};
+// ---------------------------------------------------------------------------
+// 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;
+const MIN_NODE_COUNT = 6;
+const NEIGHBOR_COUNT = 3;
+const NODE_BASE_RADIUS = 3.4;
+const PULSE_BASE_RADIUS = 2;
+const EDGE_BASE_WIDTH = 1.1;
+const NODE_ROTATE_SPEED = 0.35;
+const NODE_TILT = 0.45;
+const EDGE_FLICKER_SPEED = 0.5;
+const EDGE_MIN_ALPHA = 0.25;
+const PULSE_SPEED = 0.6;
+/**
+ * Every unordered pair `(i, j)` where `j` is one of `i`'s `perNode` closest
+ * points (by straight-line distance), deduplicated so a mutual pair is only
+ * one edge. `points` are pre-rotation world positions: a rigid rotation
+ * never changes which points are nearest, so the graph itself can be built
+ * once per frame from them and stay stable as the sphere spins.
+ */
+const nearestNeighborEdges = (points, perNode) => {
+    const indices = points.map((_, index) => index);
+    const candidates = indices.flatMap((i) => indices
+        .filter((j) => j !== i)
+        .sort((a, b) => squaredDistance(points[i], points[a]) - squaredDistance(points[i], points[b]))
+        .slice(0, perNode)
+        .map((j) => (i < j ? [i, j] : [j, i])));
+    return candidates.filter(([a, b], index) => candidates.findIndex(([x, y]) => x === a && y === b) === index);
+};
+/** A few nodes on a sphere; lines to near neighbours carry small travelling pulses. */
+export const connecting = (t, ctx) => {
+    const { sizing, originPx, sphereRadius } = sphereGeometry(ctx);
+    const nodeCount = Math.max(MIN_NODE_COUNT, sizing.count(NODE_BASE_COUNT));
+    const basePoints = Array.from({ length: nodeCount }, (_, index) => sampleSphere(index, nodeCount, sphereRadius));
+    const projected = basePoints
+        .map((point) => rotateX(point, NODE_TILT))
+        .map((point) => rotateY(point, t * NODE_ROTATE_SPEED))
+        .map((point) => project(point, originPx, sphereRadius));
+    const nodeDots = projected.map((p) => ({
+        x: p.x,
+        y: p.y,
+        depth: p.depth,
+        radius: sizing.radius(NODE_BASE_RADIUS),
+        ink: clamp01(1 - p.depth * 0.85),
+        alpha: 0.5 + p.depth * 0.45
+    }));
+    const edges = nearestNeighborEdges(basePoints, NEIGHBOR_COUNT);
+    const strokes = edges.map(([a, b], index) => {
+        const pa = projected[a];
+        const pb = projected[b];
+        const depth = (pa.depth + pb.depth) / 2;
+        const flicker = 0.5 +
+            0.5 *
+                Math.sin(t * EDGE_FLICKER_SPEED * Math.PI * 2 + hashUnit(index * 97 + 11) * Math.PI * 2);
+        return {
+            x1: pa.x,
+            y1: pa.y,
+            x2: pb.x,
+            y2: pb.y,
+            depth,
+            width: sizing.radius(EDGE_BASE_WIDTH),
+            ink: clamp01(1 - depth * 0.7),
+            alpha: EDGE_MIN_ALPHA + (1 - EDGE_MIN_ALPHA) * flicker
+        };
+    });
+    const pulses = edges.map(([a, b], index) => {
+        const pa = projected[a];
+        const pb = projected[b];
+        const travel = 0.5 + 0.5 * Math.sin(t * PULSE_SPEED * Math.PI * 2 + hashUnit(index * 53 + 7) * Math.PI * 2);
+        return {
+            x: pa.x + (pb.x - pa.x) * travel,
+            y: pa.y + (pb.y - pa.y) * travel,
+            depth: pa.depth + (pb.depth - pa.depth) * travel,
+            radius: sizing.radius(PULSE_BASE_RADIUS),
+            ink: 0.05,
+            alpha: 0.9
+        };
+    });
+    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.
+// ---------------------------------------------------------------------------
+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;
+const STRAND_ROTATE_SPEED = 0.3;
+const STRAND_TILT = 0.5;
+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;
+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.
+ */
+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);
+};
+/** Three strands wrapped around a sphere, crossing as they spiral from top to bottom. */
+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 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),
+        alpha: 0.55 + p.depth * 0.4
+    })));
+    const strokes = strands.flatMap((points, strand) => points.slice(1).map((p, i) => {
+        const previous = points[i];
+        const depth = (previous.depth + p.depth) / 2;
+        return {
+            x1: previous.x,
+            y1: previous.y,
+            x2: p.x,
+            y2: p.y,
+            depth,
+            width: sizing.radius(STRAND_STROKE_BASE_WIDTH),
+            ink: clamp01(1 - depth * 0.75 + strand * 0.06),
+            alpha: 0.6 + depth * 0.35
+        };
+    }));
+    return { dots, strokes };
+};

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

@@ -0,0 +1,11 @@
+/**
+ * Sphere-family modes: marks that read as points spread across, or orbiting,
+ * a solid sphere. Each mode is a pure function of `(t, ctx)` -- the geometry,
+ * tuning constants and small helpers below are local to this file so every
+ * mode's numbers stay easy to read next to the mode that uses them.
+ */
+import type { ModeFn } from '../types';
+export declare const working: ModeFn;
+export declare const searching: ModeFn;
+export declare const solving: ModeFn;
+export declare const listening: ModeFn;

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

@@ -0,0 +1,364 @@
+/**
+ * Sphere-family modes: marks that read as points spread across, or orbiting,
+ * a solid sphere. Each mode is a pure function of `(t, ctx)` -- the geometry,
+ * tuning constants and small helpers below are local to this file so every
+ * mode's numbers stay easy to read next to the mode that uses them.
+ */
+import { easeInOutCubic, easeOutCubic, hashUnit, modeSizing, project, rotateX, rotateY, rotateZ, sampleSphere } from '../space';
+const TWO_PI = Math.PI * 2;
+/**
+ * `project`'s perspective makes a near point's on-screen radius bulge past
+ * its world radius, so every mode keeps its sphere a little inside the 40%
+ * mark to leave that bulge room before the canvas edge.
+ */
+const WORLD_RADIUS_RATIO = 0.38;
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const originOf = (ctx) => ctx.size / 2;
+const worldRadiusOf = (ctx) => ctx.size * WORLD_RADIUS_RATIO;
+/** Near marks read brighter (low ink); far ones fade toward the background. */
+const INK_NEAR = 0.05;
+const INK_FAR = 0.72;
+const shadeByDepth = (depth) => INK_FAR - (INK_FAR - INK_NEAR) * clamp01(depth);
+const toDot = (at, radius, ink, alpha) => ({
+    x: at.x,
+    y: at.y,
+    depth: at.depth,
+    radius,
+    ink: clamp01(ink),
+    alpha: clamp01(alpha)
+});
+const toStroke = (from, to, width, ink, alpha) => ({
+    x1: from.x,
+    y1: from.y,
+    x2: to.x,
+    y2: to.y,
+    depth: (from.depth + to.depth) / 2,
+    width,
+    ink: clamp01(ink),
+    alpha: clamp01(alpha)
+});
+// ---------------------------------------------------------------------------
+// working -- particles travelling several tilted orbits around a centre
+// ---------------------------------------------------------------------------
+/** Particles travel in short trailing arcs ("trains") rather than scattering
+ * independently around their orbit -- a lone random phase per particle reads
+ * 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 };
+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;
+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
+ * depth shading, so each of the six paths reads as its own band rather than
+ * all of them blurring into one undifferentiated cloud. */
+const WORKING_ORBIT_INK_SPREAD = 0.3;
+/** However low an orbit's `weight` sits, its dots never fade past this floor. */
+const WORKING_ORBIT_ALPHA_FLOOR = 0.65;
+/** A train's trailing-most particle never fades past this floor, so the arc's
+ * tail stays legible instead of thinning away to nothing. */
+const WORKING_TRAIL_ALPHA_FLOOR = 0.35;
+/** Every particle's own orbital plane, radius, pace and shading weight, keyed by its orbit. */
+const workingOrbit = (orbit) => {
+    const seed = orbit * 31 + 7;
+    return {
+        tilt: (hashUnit(seed) - 0.5) * Math.PI,
+        roll: hashUnit(seed + 3) * TWO_PI,
+        orbitRadiusFactor: 0.5 + 0.45 * hashUnit(seed + 5),
+        speedFactor: 0.6 + 1.3 * hashUnit(seed + 9),
+        weight: 0.35 + 0.65 * hashUnit(seed + 15)
+    };
+};
+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 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 leadAngle = leadPhase + t * WORKING_ANGULAR_SPEED * orbit.speedFactor;
+        const orbitRadius = worldRadius * orbit.orbitRadiusFactor;
+        for (let slot = 0; slot < WORKING_TRAIN_LENGTH; slot += 1) {
+            const angle = leadAngle - slot * arcStep;
+            const planar = {
+                x: Math.cos(angle) * orbitRadius,
+                y: 0,
+                z: Math.sin(angle) * orbitRadius
+            };
+            const tilted = rotateX(planar, orbit.tilt);
+            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 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));
+            dots.push(toDot(projected, radius, ink, alpha));
+        }
+    }
+    return { dots, strokes: [] };
+};
+// ---------------------------------------------------------------------------
+// searching -- a dotted globe with a meridian band sweeping around it
+// ---------------------------------------------------------------------------
+const SEARCHING_BASE_COUNT = 150;
+const SEARCHING_BASE_RADIUS_PX = 1.5;
+const SEARCHING_BAND_HALF_WIDTH = 0.42;
+const SEARCHING_SWEEP_SPEED = 1.15;
+const SEARCHING_SPIN_SPEED = 0.18;
+const SEARCHING_TILT = -0.55;
+const SEARCHING_ARC_SEGMENTS = 10;
+/** How much of the pole-to-pole range the band's guide arc spans, short of
+ * the poles themselves so its end segments stay distinct marks rather than
+ * converging to a single point. */
+const SEARCHING_ARC_LATITUDE_SPAN = 0.92;
+/** How much darker, more opaque and larger a dot gets the closer the sweep
+ * passes over it, so the band reads as a clear lit stripe against the rest
+ * of the dotted globe instead of a faint gradient. */
+const SEARCHING_BAND_INK_BOOST = 0.75;
+const SEARCHING_BAND_ALPHA_BOOST = 0.35;
+const SEARCHING_BAND_RADIUS_BOOST = 1.3;
+/** The guide arc itself: wide, dark and opaque so the sweep's leading edge
+ * is legible on its own, not just via the dots it lifts. */
+const SEARCHING_ARC_STROKE_RADIUS = 2.2;
+const SEARCHING_ARC_INK = 0;
+const SEARCHING_ARC_ALPHA = 0.7;
+/** Shortest signed-free distance between two angles, always in 0..π. */
+const angleDistance = (a, b) => {
+    const diff = Math.abs(a - b) % TWO_PI;
+    return diff > Math.PI ? TWO_PI - diff : diff;
+};
+export const searching = (t, ctx) => {
+    const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
+    const origin = originOf(ctx);
+    const worldRadius = worldRadiusOf(ctx);
+    const count = sizing.count(SEARCHING_BASE_COUNT);
+    const sweepAngle = t * SEARCHING_SWEEP_SPEED;
+    const dots = Array.from({ length: count }, (_unused, i) => {
+        const surface = sampleSphere(i, count, worldRadius);
+        const tilted = rotateX(surface, SEARCHING_TILT);
+        const point = rotateY(tilted, t * SEARCHING_SPIN_SPEED);
+        const longitude = Math.atan2(point.z, point.x);
+        const distance = angleDistance(longitude, sweepAngle);
+        const lift = easeOutCubic(clamp01(1 - distance / SEARCHING_BAND_HALF_WIDTH));
+        const projected = project(point, origin, worldRadius);
+        const ink = shadeByDepth(projected.depth) - lift * SEARCHING_BAND_INK_BOOST;
+        const alpha = 0.55 + projected.depth * 0.25 + lift * SEARCHING_BAND_ALPHA_BOOST;
+        const radius = sizing.radius(SEARCHING_BASE_RADIUS_PX) * (1 + lift * SEARCHING_BAND_RADIUS_BOOST);
+        return toDot(projected, radius, ink, alpha);
+    });
+    const arcPoints = Array.from({ length: SEARCHING_ARC_SEGMENTS + 1 }, (_unused, j) => {
+        const latFrac = j / SEARCHING_ARC_SEGMENTS;
+        const phi = (latFrac - 0.5) * Math.PI * SEARCHING_ARC_LATITUDE_SPAN;
+        const point = {
+            x: Math.cos(phi) * Math.cos(sweepAngle) * worldRadius,
+            y: Math.sin(phi) * worldRadius,
+            z: Math.cos(phi) * Math.sin(sweepAngle) * worldRadius
+        };
+        return project(point, origin, worldRadius);
+    });
+    const strokeWidth = sizing.radius(SEARCHING_ARC_STROKE_RADIUS);
+    const strokes = Array.from({ length: SEARCHING_ARC_SEGMENTS }, (_unused, j) => toStroke(arcPoints[j], arcPoints[j + 1], strokeWidth, SEARCHING_ARC_INK, SEARCHING_ARC_ALPHA));
+    return { dots, strokes };
+};
+// ---------------------------------------------------------------------------
+// solving -- tiers that snap a quarter turn out of alignment, hold scrambled,
+// then resolve back, on a loop. Landmark dots and fixed seam rings make the
+// misalignment legible: an otherwise-uniform, evenly-sampled dot texture
+// looks identical under any rotation about the spin axis, so turning a
+// "band" of it invisibly wouldn't read as scrambling at all.
+// ---------------------------------------------------------------------------
+const SOLVING_BASE_COUNT = 130;
+const SOLVING_BASE_RADIUS_PX = 1.5;
+const SOLVING_TIER_COUNT = 4;
+const SOLVING_TURN_DURATION = 0.16;
+const SOLVING_TURN_GAP = 0.3;
+const SOLVING_HOLD_GAP = 0.55;
+const SOLVING_TILT = -0.5;
+/** Each tier carries this many oversized landmark dots at fixed, evenly
+ * spaced longitudes, so a quarter turn visibly displaces a recognisable
+ * cluster relative to its neighbours instead of only reshuffling texture
+ * that looks the same before and after. */
+const SOLVING_LANDMARKS_PER_TIER = 3;
+const SOLVING_LANDMARK_RADIUS_PX = 3.1;
+const SOLVING_LANDMARK_INK_BOOST = 0.45;
+const SOLVING_LANDMARK_ALPHA = 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. */
+const SOLVING_SEAM_SEGMENTS = 12;
+const SOLVING_SEAM_STROKE_RADIUS = 1.05;
+const SOLVING_SEAM_INK = 0.15;
+const SOLVING_SEAM_ALPHA = 0.5;
+const solvingTurnStart = (tier) => tier * SOLVING_TURN_GAP;
+const solvingTurnEnd = (tier) => solvingTurnStart(tier) + SOLVING_TURN_DURATION;
+const SOLVING_HOLD_START = solvingTurnEnd(SOLVING_TIER_COUNT - 1) + SOLVING_HOLD_GAP;
+const solvingReturnStart = (tier) => SOLVING_HOLD_START + (SOLVING_TIER_COUNT - 1 - tier) * SOLVING_TURN_GAP;
+const solvingReturnEnd = (tier) => solvingReturnStart(tier) + SOLVING_TURN_DURATION;
+/** Full snap-scramble-then-resolve length; the mode repeats every this many seconds. */
+const SOLVING_CYCLE = solvingReturnEnd(0) + SOLVING_HOLD_GAP;
+/** 0 (solved) snaps out to 1 (quarter-turned) and back. The snap out eases
+ * only at its landing (a fast start reads as a sudden turn); the return to
+ * solved eases at both ends, reading as a calmer resolve. */
+const solvingTierTurn = (tier, cyclePos) => {
+    const turnStart = solvingTurnStart(tier);
+    const turnEnd = solvingTurnEnd(tier);
+    const returnStart = solvingReturnStart(tier);
+    const returnEnd = solvingReturnEnd(tier);
+    if (cyclePos <= turnStart) {
+        return 0;
+    }
+    if (cyclePos < turnEnd) {
+        return easeOutCubic((cyclePos - turnStart) / SOLVING_TURN_DURATION);
+    }
+    if (cyclePos < returnStart) {
+        return 1;
+    }
+    if (cyclePos < returnEnd) {
+        return 1 - easeInOutCubic((cyclePos - returnStart) / SOLVING_TURN_DURATION);
+    }
+    return 0;
+};
+const solvingTierOf = (yUnit) => clamp(Math.floor(((1 - yUnit) / 2) * SOLVING_TIER_COUNT), 0, SOLVING_TIER_COUNT - 1);
+const solvingTierDirection = (tier) => (hashUnit(tier * 53 + 21) < 0.5 ? -1 : 1);
+/** The y-unit (-1..1) at the centre of a tier's latitude band. */
+const solvingTierCenterYUnit = (tier) => 1 - (2 * tier + 1) / SOLVING_TIER_COUNT;
+/** The y-unit (-1..1) of the fixed cut between one tier and the next. */
+const solvingSeamYUnit = (seam) => 1 - (2 * (seam + 1)) / SOLVING_TIER_COUNT;
+const solvingTurnAngle = (tier, cyclePos) => solvingTierTurn(tier, cyclePos) * solvingTierDirection(tier) * (Math.PI / 2);
+export const solving = (t, ctx) => {
+    const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
+    const origin = originOf(ctx);
+    const worldRadius = worldRadiusOf(ctx);
+    const count = sizing.count(SOLVING_BASE_COUNT);
+    const cyclePos = t - SOLVING_CYCLE * Math.floor(t / SOLVING_CYCLE);
+    const texture = Array.from({ length: count }, (_unused, i) => {
+        const surface = sampleSphere(i, count, worldRadius);
+        const yUnit = worldRadius > 0 ? surface.y / worldRadius : 0;
+        const tier = solvingTierOf(yUnit);
+        const turned = rotateY(surface, solvingTurnAngle(tier, cyclePos));
+        const point = rotateX(turned, SOLVING_TILT);
+        const projected = project(point, origin, worldRadius);
+        const ink = shadeByDepth(projected.depth);
+        const alpha = 0.55 + 0.3 * hashUnit(i * 3 + 9);
+        const radius = sizing.radius(SOLVING_BASE_RADIUS_PX);
+        return toDot(projected, radius, ink, alpha);
+    });
+    const landmarks = 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 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 base = {
+            x: Math.cos(longitude) * ringRadius,
+            y,
+            z: Math.sin(longitude) * ringRadius
+        };
+        const turned = rotateY(base, solvingTurnAngle(tier, cyclePos));
+        const point = rotateX(turned, SOLVING_TILT);
+        const projected = project(point, origin, worldRadius);
+        const ink = shadeByDepth(projected.depth) - SOLVING_LANDMARK_INK_BOOST;
+        return toDot(projected, sizing.radius(SOLVING_LANDMARK_RADIUS_PX), ink, SOLVING_LANDMARK_ALPHA);
+    });
+    const seamWidth = sizing.radius(SOLVING_SEAM_STROKE_RADIUS);
+    const seams = Array.from({ length: SOLVING_TIER_COUNT - 1 }, (_unused, seam) => {
+        const yUnit = solvingSeamYUnit(seam);
+        const y = yUnit * worldRadius;
+        const ringRadius = Math.sqrt(Math.max(0, 1 - yUnit * yUnit)) * worldRadius;
+        const ringPoints = Array.from({ length: SOLVING_SEAM_SEGMENTS + 1 }, (_unusedPoint, j) => {
+            const angle = (j / SOLVING_SEAM_SEGMENTS) * TWO_PI;
+            const point = {
+                x: Math.cos(angle) * ringRadius,
+                y,
+                z: Math.sin(angle) * ringRadius
+            };
+            return project(rotateX(point, SOLVING_TILT), origin, worldRadius);
+        });
+        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 };
+};
+// ---------------------------------------------------------------------------
+// listening -- stacked horizontal rings with a wave rolling through them
+// ---------------------------------------------------------------------------
+/** 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 };
+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;
+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
+ * ring near the equator is nearly as wide as the sphere itself, so even this
+ * shallow a tilt must stay well under the gap between ring centres below or
+ * 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;
+/** 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 listeningRing = (ring, ringCount, worldRadius) => {
+    const yUnit = (-1 + (2 * ring + 1) / ringCount) * LISTENING_Y_SPAN;
+    const y = yUnit * worldRadius;
+    const ringRadius = Math.sqrt(Math.max(0, worldRadius * worldRadius - y * y));
+    const phase = hashUnit(ring * 17 + 3) * TWO_PI;
+    const wave = (t) => (Math.sin(TWO_PI * (ring / ringCount - t * LISTENING_WAVE_SPEED)) + 1) / 2;
+    return { y, ringRadius, phase, wave };
+};
+export const listening = (t, ctx) => {
+    const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
+    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 dots = Array.from({ length: ringCount }, (_unused, r) => {
+        const ring = listeningRing(r, ringCount, worldRadius);
+        const wave = ring.wave(t);
+        return Array.from({ length: dotsPerRing }, (_unusedDot, k) => {
+            const angle = (k / dotsPerRing) * TWO_PI + ring.phase;
+            const planar = {
+                x: Math.cos(angle) * ring.ringRadius,
+                y: ring.y,
+                z: Math.sin(angle) * ring.ringRadius
+            };
+            const tilted = rotateX(planar, LISTENING_TILT);
+            const point = rotateY(tilted, t * LISTENING_SPIN_SPEED);
+            const projected = project(point, origin, worldRadius);
+            const ink = shadeByDepth(projected.depth) - wave * LISTENING_LIFT_INK;
+            const alpha = 0.6 + wave * 0.3;
+            const radius = sizing.radius(LISTENING_BASE_RADIUS_PX) * (1 + wave * LISTENING_SWELL);
+            return toDot(projected, radius, ink, alpha);
+        });
+    }).flat();
+    return { dots, strokes: [] };
+};

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

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+import type { Rgb } from '../../types';
+import type { Frame } from './types';
+/** What `paintFrame` needs beyond the frame itself: the theme and 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.
+ */
+export declare const inkColor: (tint: Rgb, ink: number, dark: boolean) => string;
+/**
+ * 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
+ * sit on top.
+ */
+export declare const paintFrame: (ctx: CanvasRenderingContext2D, frame: Frame, options: PaintOptions) => void;