@juspay/svelte-ui-components 4.32.1 → 4.33.1

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

@@ -0,0 +1,201 @@
+/**
+ * The "form" modes: composing, breathing and shaping. Each one reads as a
+ * single evolving surface or ring rather than a swarm of independent points,
+ * so the motion stays legible down at 20px instead of dissolving into noise
+ * the way a large loose point cloud would.
+ *
+ * All three share one placement idiom: build each dot in its own object
+ * space (a band or ring parametrised by its index, deformed however that
+ * mode's intent calls for), spin the whole thing with `rotateY` for a sense
+ * of turning, tilt it with `rotateX` so it reads in 3D, then `project`. That
+ * split keeps "the shape's own motion" and "the camera's fixed angle on it"
+ * from tangling together in the per-dot math.
+ */
+import { easeInOutCubic, hashUnit, modeSizing, project, rotateX, rotateY, rotateZ } from '../space';
+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));
+/** Nearer dots read as more saturated tint; `paintFrame` turns low ink into more of `tint`. */
+const depthToInk = (depth) => clamp01(1 - depth);
+/** 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. */
+const depthToRadiusFactor = (depth) => 0.7 + depth * 0.3;
+/** Builds one `Dot` from a projected point; `jitter` gives per-dot size variety from `hashUnit`. */
+const dotFrom = (projected, baseRadius, sizing, jitter) => ({
+    x: projected.x,
+    y: projected.y,
+    depth: projected.depth,
+    radius: sizing.radius(baseRadius) * depthToRadiusFactor(projected.depth) * jitter,
+    ink: depthToInk(projected.depth),
+    alpha: depthToAlpha(projected.depth)
+});
+/** Turns an object-space point into a placed, projected `Dot` via the shared spin/tilt/project steps. */
+const place = (point, spinAngle, tiltAngle, originPx, worldRadius, baseRadius, sizing, jitter) => {
+    const spun = rotateY(point, spinAngle);
+    const tilted = rotateX(spun, tiltAngle);
+    const projected = project(tilted, originPx, worldRadius);
+    return dotFrom(projected, baseRadius, sizing, jitter);
+};
+const EMPTY_STROKES = [];
+// --- composing ---------------------------------------------------------
+const RIBBON_BASE_COUNT = 260;
+const RIBBON_BASE_DOT_RADIUS = 2.2;
+const RIBBON_THREADS = { 64: 7, 32: 5, 20: 4 };
+const RIBBON_HALF_WIDTH = 0.4;
+/** 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
+ * angle, since an equatorial ring is rotationally symmetric about that axis. */
+const RIBBON_AXIS_TILT = 0.68;
+const RIBBON_RIPPLE_WAVES = 3;
+const RIBBON_RIPPLE_SPEED = 1.15;
+const RIBBON_RIPPLE_AMPLITUDE = 0.5;
+const RIBBON_THREAD_JITTER = 0.1;
+const RIBBON_SPIN_SPEED = 0.48;
+const RIBBON_CAMERA_TILT = 0.45;
+/** Edge threads only dim toward the background; nothing here shrinks a dot's
+ * radius, so the ribbon keeps a full-width row of legible marks even where a
+ * combined ink/alpha/radius fade would collapse an edge row to a speck. */
+const RIBBON_EDGE_ALPHA_FLOOR = 0.5;
+const RIBBON_EDGE_INK_LIFT = 0.22;
+/**
+ * A ribbon of dots looped once around the sphere on its own tilted great
+ * circle -- distinct from the spin axis -- rippling along its length like a
+ * travelling wave through cloth while the whole ribbon turns.
+ */
+export const composing = (t, ctx) => {
+    const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
+    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 total = threads * perThread;
+    const dots = [];
+    for (let index = 0; index < total; index += 1) {
+        const thread = index % threads;
+        const step = Math.floor(index / threads);
+        // w ranges -1 (one edge thread) .. 0 (centre) .. 1 (other edge thread).
+        const w = threads > 1 ? (thread / (threads - 1)) * 2 - 1 : 0;
+        const u = (step / perThread) * TWO_PI;
+        const ripple = Math.sin(u * RIBBON_RIPPLE_WAVES + t * RIBBON_RIPPLE_SPEED) * RIBBON_RIPPLE_AMPLITUDE;
+        // A standard spherical parametrisation keeps every point exactly on a
+        // sphere of `worldRadius` regardless of `phi`, so the ribbon stays safely
+        // inside the canvas no matter how far the ripple bends it.
+        const phi = w * RIBBON_HALF_WIDTH + ripple;
+        const onSphere = {
+            x: Math.cos(phi) * Math.cos(u) * worldRadius,
+            y: Math.sin(phi) * worldRadius,
+            z: Math.cos(phi) * Math.sin(u) * worldRadius
+        };
+        const onAxis = rotateZ(onSphere, RIBBON_AXIS_TILT);
+        const jitter = 1 - RIBBON_THREAD_JITTER / 2 + hashUnit(index * 7 + 1) * RIBBON_THREAD_JITTER;
+        const placed = place(onAxis, t * RIBBON_SPIN_SPEED, RIBBON_CAMERA_TILT, originPx, worldRadius, RIBBON_BASE_DOT_RADIUS, sizing, jitter);
+        const edgeFeather = Math.abs(w);
+        dots.push({
+            ...placed,
+            ink: clamp01(placed.ink + edgeFeather * RIBBON_EDGE_INK_LIFT),
+            alpha: clamp01(placed.alpha * (1 - edgeFeather * (1 - RIBBON_EDGE_ALPHA_FLOOR)))
+        });
+    }
+    return { dots, strokes: EMPTY_STROKES };
+};
+// --- breathing -----------------------------------------------------------
+const BREATHING_BASE_COUNT = 210;
+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
+ * radius this much smaller still lands at about the same on-screen extent as
+ * its siblings' fixed radius, without the peak pushing past the canvas. */
+const BREATHING_WORLD_RADIUS_RATIO = 0.34;
+const BREATHING_AMPLITUDE = 0.09;
+const BREATHING_SPEED = 0.55;
+const BREATHING_SHAPE_HARMONIC = 5;
+const BREATHING_SHAPE_SPEED = 0.22;
+const BREATHING_SHAPE_AMPLITUDE = 0.035;
+const BREATHING_SPIN_SPEED = 0.12;
+const BREATHING_TILT = 0.62;
+/**
+ * A single ring that swells and relaxes on a slow sine, with a faint,
+ * higher-harmonic wobble layered on top so its outline never reads as a
+ * perfectly static circle even at rest.
+ */
+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 breathe = Math.sin(t * BREATHING_SPEED);
+    const dots = [];
+    for (let index = 0; index < count; index += 1) {
+        const angle = (index / count) * TWO_PI;
+        const wobble = Math.sin(angle * BREATHING_SHAPE_HARMONIC + t * BREATHING_SHAPE_SPEED) *
+            BREATHING_SHAPE_AMPLITUDE;
+        const radiusFactor = 1 + breathe * BREATHING_AMPLITUDE + wobble;
+        const point = {
+            x: Math.cos(angle) * radiusFactor * worldRadius,
+            y: 0,
+            z: Math.sin(angle) * radiusFactor * worldRadius
+        };
+        const jitter = 0.88 + hashUnit(index * 11 + 5) * 0.24;
+        dots.push(place(point, t * BREATHING_SPIN_SPEED, BREATHING_TILT, originPx, worldRadius, BREATHING_BASE_DOT_RADIUS, sizing, jitter));
+    }
+    return { dots, strokes: EMPTY_STROKES };
+};
+// --- shaping ---------------------------------------------------------------
+const SHAPING_BASE_COUNT = 210;
+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
+// back where they started at the same instant -- a true seamless loop.
+const SHAPING_SPIN_SPEED = (2 * Math.PI) / SHAPING_CYCLE_SECONDS;
+const SHAPING_TILT = 0.6;
+/** The radial distance of a regular `sides`-gon's straight edge at `angle`, circumradius 1. */
+const polygonRadius = (angle, sides) => {
+    const segment = TWO_PI / sides;
+    const half = segment / 2;
+    const wrapped = ((angle % segment) + segment) % segment;
+    return Math.cos(half) / Math.cos(wrapped - half);
+};
+const lerp = (from, to, amount) => from + (to - from) * amount;
+/**
+ * A ring that morphs circle to triangle to square and back over a fixed
+ * cycle, each leg eased so the shape comes to rest at every corner instead
+ * of snapping into it -- which also makes the wrap from the last leg back to
+ * the first exactly continuous.
+ */
+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 cyclePos = (((t / SHAPING_CYCLE_SECONDS) % 1) + 1) % 1;
+    const phaseFloat = cyclePos * 3;
+    const phaseIndex = Math.min(2, Math.floor(phaseFloat));
+    const eased = easeInOutCubic(phaseFloat - phaseIndex);
+    const dots = [];
+    for (let index = 0; index < count; index += 1) {
+        const angle = (index / count) * TWO_PI;
+        const triangleR = polygonRadius(angle, 3);
+        const squareR = polygonRadius(angle, 4);
+        let radiusFactor;
+        if (phaseIndex === 0) {
+            radiusFactor = lerp(1, triangleR, eased);
+        }
+        else if (phaseIndex === 1) {
+            radiusFactor = lerp(triangleR, squareR, eased);
+        }
+        else {
+            radiusFactor = lerp(squareR, 1, eased);
+        }
+        const point = {
+            x: Math.cos(angle) * radiusFactor * worldRadius,
+            y: 0,
+            z: Math.sin(angle) * radiusFactor * worldRadius
+        };
+        const jitter = 0.9 + hashUnit(index * 17 + 9) * 0.2;
+        dots.push(place(point, t * SHAPING_SPIN_SPEED, SHAPING_TILT, originPx, worldRadius, SHAPING_BASE_DOT_RADIUS, sizing, jitter));
+    }
+    return { dots, strokes: EMPTY_STROKES };
+};

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;