@juspay/svelte-ui-components 4.32.1 → 4.33.0

package/dist/ThinkingOrb/orb/paint.js

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+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.
+ */
+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})`;
+};
+/**
+ * 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 const paintFrame = (ctx, frame, options) => {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    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.lineWidth = stroke.width;
+        ctx.beginPath();
+        ctx.moveTo(stroke.x1, stroke.y1);
+        ctx.lineTo(stroke.x2, stroke.y2);
+        ctx.stroke();
+    }
+    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.beginPath();
+        ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+};

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

@@ -0,0 +1,63 @@
+/**
+ * Pure 3D helpers shared by every mode: rotation, perspective projection,
+ * even sphere sampling, easing and a seeded per-index hash. Nothing here
+ * touches a canvas or keeps state, so a mode stays a plain function of
+ * `(t, ctx)` and every helper below is trivial to unit test in isolation.
+ */
+import type { ModeSize } from './types';
+/** A point in the mode's own 3D world space, before projection to the canvas. */
+export type Point3 = {
+    x: number;
+    y: number;
+    z: number;
+};
+/** A `Point3` projected onto the canvas: screen px plus normalised depth and raw scale. */
+export type Projected = {
+    x: number;
+    y: number;
+    depth: number;
+    scale: number;
+};
+/** The two scalers `modeSizing` hands back: multiply a mode's own base counts and radii by them. */
+export type ModeSizing = {
+    count: (base: number) => number;
+    radius: (base: number) => number;
+};
+/** Rotates a point about the X axis (mixes y and z). */
+export declare const rotateX: (point: Point3, angle: number) => Point3;
+/** Rotates a point about the Y axis (mixes x and z). */
+export declare const rotateY: (point: Point3, angle: number) => Point3;
+/** Rotates a point about the Z axis (mixes x and y). */
+export declare const rotateZ: (point: Point3, angle: number) => Point3;
+/**
+ * Projects a world point with perspective onto a canvas centred at
+ * `(originPx, originPx)`. `worldRadius` is the extent the point's `z` is
+ * expected to range over (typically the sphere/shape radius the mode drew it
+ * at), and is what turns `z` into a 0..1 `depth`: nearer (more negative `z`)
+ * is 1, farther is 0.
+ */
+export declare const project: (point: Point3, originPx: number, worldRadius: number) => Projected;
+/**
+ * The `index`-th of `count` points spread evenly over a sphere of `radius`,
+ * via a golden-angle spiral. Deterministic in `index` and `count` alone, and
+ * even across the whole surface rather than crowding the poles the way a
+ * uniformly-sampled latitude/longitude grid would.
+ */
+export declare const sampleSphere: (index: number, count: number, radius: number) => Point3;
+/** Cubic ease, slow-fast-slow, for a motion that starts and ends at rest. */
+export declare const easeInOutCubic: (t: number) => number;
+/** Cubic ease-out, fast-then-slow, for a motion that only needs to settle at the end. */
+export declare const easeOutCubic: (t: number) => number;
+/**
+ * A deterministic 0..1 value for an integer seed (a dot's index is the usual
+ * one). Gives every mode per-dot variety -- a phase offset, a size jitter --
+ * without `Math.random`, so the same `(t, ctx)` always paints the same frame.
+ */
+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);
+ * 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

@@ -0,0 +1,115 @@
+/**
+ * Pure 3D helpers shared by every mode: rotation, perspective projection,
+ * even sphere sampling, easing and a seeded per-index hash. Nothing here
+ * touches a canvas or keeps state, so a mode stays a plain function of
+ * `(t, ctx)` and every helper below is trivial to unit test in isolation.
+ */
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+/** Rotates a point about the X axis (mixes y and z). */
+export const rotateX = (point, angle) => {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return {
+        x: point.x,
+        y: point.y * cos - point.z * sin,
+        z: point.y * sin + point.z * cos
+    };
+};
+/** Rotates a point about the Y axis (mixes x and z). */
+export const rotateY = (point, angle) => {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return {
+        x: point.x * cos + point.z * sin,
+        y: point.y,
+        z: point.z * cos - point.x * sin
+    };
+};
+/** Rotates a point about the Z axis (mixes x and y). */
+export const rotateZ = (point, angle) => {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return {
+        x: point.x * cos - point.y * sin,
+        y: point.x * sin + point.y * cos,
+        z: point.z
+    };
+};
+const FOCAL_LENGTH_PX = 320;
+/**
+ * Projects a world point with perspective onto a canvas centred at
+ * `(originPx, originPx)`. `worldRadius` is the extent the point's `z` is
+ * expected to range over (typically the sphere/shape radius the mode drew it
+ * at), and is what turns `z` into a 0..1 `depth`: nearer (more negative `z`)
+ * is 1, farther is 0.
+ */
+export const project = (point, originPx, worldRadius) => {
+    const safeRadius = worldRadius > 0 ? worldRadius : 1;
+    const perspective = FOCAL_LENGTH_PX / (FOCAL_LENGTH_PX + point.z);
+    return {
+        x: originPx + point.x * perspective,
+        y: originPx + point.y * perspective,
+        depth: clamp01((safeRadius - point.z) / (safeRadius * 2)),
+        scale: perspective
+    };
+};
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+/**
+ * The `index`-th of `count` points spread evenly over a sphere of `radius`,
+ * via a golden-angle spiral. Deterministic in `index` and `count` alone, and
+ * even across the whole surface rather than crowding the poles the way a
+ * uniformly-sampled latitude/longitude grid would.
+ */
+export const sampleSphere = (index, count, radius) => {
+    const safeCount = count > 0 ? Math.floor(count) : 1;
+    const wrapped = ((Math.floor(index) % safeCount) + safeCount) % safeCount;
+    const y = 1 - (2 * wrapped + 1) / safeCount;
+    const ringRadius = Math.sqrt(Math.max(0, 1 - y * y));
+    const angle = wrapped * GOLDEN_ANGLE;
+    return {
+        x: Math.cos(angle) * ringRadius * radius,
+        y: y * radius,
+        z: Math.sin(angle) * ringRadius * radius
+    };
+};
+/** Cubic ease, slow-fast-slow, for a motion that starts and ends at rest. */
+export const easeInOutCubic = (t) => {
+    const clamped = clamp01(t);
+    return clamped < 0.5 ? 4 * clamped ** 3 : 1 - (-2 * clamped + 2) ** 3 / 2;
+};
+/** Cubic ease-out, fast-then-slow, for a motion that only needs to settle at the end. */
+export const easeOutCubic = (t) => {
+    const clamped = clamp01(t);
+    return 1 - (1 - clamped) ** 3;
+};
+/**
+ * A deterministic 0..1 value for an integer seed (a dot's index is the usual
+ * one). Gives every mode per-dot variety -- a phase offset, a size jitter --
+ * without `Math.random`, so the same `(t, ctx)` always paints the same frame.
+ */
+export const hashUnit = (seed) => {
+    let hash = (seed | 0) >>> 0;
+    hash = Math.imul(hash ^ (hash >>> 16), 0x45d9f3b);
+    hash = Math.imul(hash ^ (hash >>> 16), 0x45d9f3b);
+    hash = (hash ^ (hash >>> 16)) >>> 0;
+    return hash / 4294967296;
+};
+const REFERENCE_SIZE = 64;
+const RADIUS_GROWTH_EXPONENT = 0.6;
+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);
+ * radii grow sub-linearly, with a floor that keeps dots visible at 20px.
+ */
+export const modeSizing = (size, density, dotScale) => {
+    const sizeRatio = size / REFERENCE_SIZE;
+    const areaRatio = sizeRatio * sizeRatio;
+    const safeDensity = density > 0 ? density : 0.1;
+    const safeDotScale = dotScale > 0 ? dotScale : 0.1;
+    return {
+        count: (base) => Math.max(1, Math.round(base * areaRatio * safeDensity)),
+        radius: (base) => Math.max(MIN_DOT_RADIUS_PX, base * sizeRatio ** RADIUS_GROWTH_EXPONENT * safeDotScale)
+    };
+};

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

@@ -0,0 +1,52 @@
+/**
+ * The shared vocabulary between `ThinkingOrb`'s modes, its painter and its
+ * gravity pass. A mode never touches a canvas directly -- it only ever
+ * describes one instant as a `Frame`, so it stays a pure, testable function
+ * of `(t, ctx)` with nothing environment-specific to mock.
+ */
+/** One canvas size `ThinkingOrb` renders at; a mode adapts to whichever it is given. */
+export type ModeSize = 64 | 32 | 20;
+/**
+ * One drawn point. `x`/`y` are canvas CSS px, `depth` is 0 (far) to 1 (near),
+ * `ink` is 0 to 1 and is turned into a colour by `paintFrame`, and `alpha` is
+ * 0 to 1 opacity.
+ */
+export type Dot = {
+    x: number;
+    y: number;
+    depth: number;
+    radius: number;
+    ink: number;
+    alpha: number;
+};
+/** One drawn line segment. Same coordinate, depth, ink and alpha units as `Dot`. */
+export type Stroke = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    depth: number;
+    width: number;
+    ink: number;
+    alpha: number;
+};
+/** Everything to paint for one instant: strokes and dots, in no particular order. */
+export type Frame = {
+    dots: readonly Dot[];
+    strokes: readonly Stroke[];
+};
+/**
+ * What a mode renders at and how strongly. `density` and `dotScale` are
+ * multipliers already floored at 0.1 by the component, never negative or zero.
+ */
+export type ModeContext = {
+    size: ModeSize;
+    density: number;
+    dotScale: number;
+};
+/**
+ * A mode: a pure function of elapsed, already speed-scaled seconds and the
+ * context it draws into. Must be non-blank, finite and in-bounds at every `t`,
+ * including `t = 0`.
+ */
+export type ModeFn = (t: number, ctx: ModeContext) => Frame;

package/dist/ThinkingOrb/orb/types.js

@@ -0,0 +1,7 @@
+/**
+ * The shared vocabulary between `ThinkingOrb`'s modes, its painter and its
+ * gravity pass. A mode never touches a canvas directly -- it only ever
+ * describes one instant as a `Frame`, so it stays a pure, testable function
+ * of `(t, ctx)` with nothing environment-specific to mock.
+ */
+export {};

package/dist/ThinkingOrb/properties.d.ts

@@ -0,0 +1,68 @@
+import type { Rgb } from '../types';
+import type { GravityOptions } from './orb/gravity';
+import type { ModeSize } from './orb/types';
+export type { GravityOptions };
+/**
+ * The nine animations `ThinkingOrb` can play. Full descriptions of each are
+ * in docs/ThinkingOrb.md.
+ */
+export type OrbState = 'working' | 'searching' | 'solving' | 'listening' | 'connecting' | 'weaving' | 'composing' | 'breathing' | 'shaping';
+/** The three fixed canvas sizes `ThinkingOrb` can draw at, in CSS pixels. */
+export type ThinkingOrbSize = ModeSize;
+export type MandatoryThinkingOrbProperties = Record<string, never>;
+export type OptionalThinkingOrbProperties = {
+    /**
+     * Which animation to show.
+     * - `working` — dots travel in short trails along six differently tilted loops around the centre, each loop at its own pace
+     * - `searching` — a bright band sweeps around a speckled sphere, running from top to bottom while it goes, and brightens whichever dots it passes over
+     * - `solving` — four horizontal bands each turn a quarter-turn out of place, one after another, hold there a moment, then straighten out again starting from the last one that turned, looping the whole way through
+     * - `listening` — a wave of brightness rises through a stack of rings, swelling the dots in whichever ring it currently reaches
+     * - `connecting` — a small scattering of nodes across a sphere, linked to their closest neighbours, with small bright dots travelling along those links
+     * - `weaving` — three spiral strands wrap around a sphere end to end, swinging into and out of each other's path so they appear to cross as it spins
+     * - `composing` — a broad ribbon of dots, fading out at its edges, ripples like fabric while the whole thing turns
+     * - `breathing` — a single ring of dots slowly swells and settles on a steady cycle, its edge never quite resting
+     * - `shaping` — a ring of dots gradually reshapes itself, rounding out and pulling into a triangle, then a square, before smoothing back to round, on a repeating loop
+     * @default 'working'
+     */
+    state?: OrbState;
+    /** How big the canvas is, in CSS pixels. Only 64, 32 and 20 have real artwork; any other number falls back to `64`. @default 64 */
+    size?: ThinkingOrbSize;
+    /** Multiplies how fast the animation's own clock advances: `1` is normal pace, `2` is double speed, `0` holds it still. @default 1 */
+    speed?: number;
+    /** Stops the animation and leaves whatever frame was last drawn on screen. @default false */
+    paused?: boolean;
+    /**
+     * Sets the colour the dots and lines are drawn in. Left unset, the orb
+     * reads `--sui-thinking-orb-color`, falls back to the inherited CSS
+     * `color`, and finally to a mid-grey if neither resolves to something the
+     * canvas can use.
+     */
+    color?: Rgb;
+    /**
+     * Scales how many dots (or strands, or nodes, depending on the state) an
+     * animation draws. Anything below `0.1` is treated as `0.1`. @default 1
+     */
+    dots?: number;
+    /** Scales the size of every dot the animation draws. Anything below `0.1` is treated as `0.1`. @default 1 */
+    dotSize?: number;
+    /**
+     * While the pointer sits over the canvas, dots near it get pulled toward
+     * it — scoped to this instance's own canvas only. `true` uses the built-in
+     * reach and pull; pass a `GravityOptions` object to set your own
+     * `radius`/`strength`. Purely decorative, and deliberately has no
+     * keyboard equivalent — see docs/ThinkingOrb.md's Accessibility section.
+     * @default false
+     */
+    gravity?: boolean | GravityOptions;
+    /** Replaces the default label generated for the current state. See docs/ThinkingOrb.md's Accessibility section. */
+    ariaLabel?: string;
+    /** Extra CSS class names added to the canvas element. */
+    classes?: string;
+    /** Sets the `data-pw` attribute on the canvas, so tests can select it. */
+    testId?: string;
+};
+export type ThinkingOrbEventProperties = {
+    /** Called exactly once, right after the first frame is actually painted — this happens after mount, not at the same moment. */
+    onfirstframe?: () => void;
+};
+export type ThinkingOrbProperties = OptionalThinkingOrbProperties & ThinkingOrbEventProperties;

package/dist/ThinkingOrb/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export { default as Calendar } from './Calendar/Calendar.svelte';
 export { default as RelativeTime } from './RelativeTime/RelativeTime.svelte';
 export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
 export { default as ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.svelte';
+export { default as ThinkingOrb } from './ThinkingOrb/ThinkingOrb.svelte';
 export { default as ToolCallLog } from './ToolCallLog/ToolCallLog.svelte';
 export { default as TaskList } from './TaskList/TaskList.svelte';
 export { default as Book } from './Book/Book.svelte';
@@ -166,6 +167,7 @@ export type * from './Calendar/properties';
 export type * from './RelativeTime/properties';
 export type * from './ThemeSwitcher/properties';
 export type * from './ThinkingIndicator/properties';
+export type * from './ThinkingOrb/properties';
 export type * from './ToolCallLog/properties';
 export type * from './TaskList/properties';
 export type * from './SoundKit/properties';

package/dist/index.js

@@ -55,6 +55,7 @@ export { default as Calendar } from './Calendar/Calendar.svelte';
 export { default as RelativeTime } from './RelativeTime/RelativeTime.svelte';
 export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
 export { default as ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.svelte';
+export { default as ThinkingOrb } from './ThinkingOrb/ThinkingOrb.svelte';
 export { default as ToolCallLog } from './ToolCallLog/ToolCallLog.svelte';
 export { default as TaskList } from './TaskList/TaskList.svelte';
 export { default as Book } from './Book/Book.svelte';

package/dist-codemod/codemod/migration-assets/legacy-display.css

@@ -17,7 +17,7 @@
  * stylesheet is a crutch for the migration window, not a permanent override.
  */
 
-/* components whose new default is `block` (87) */
+/* components whose new default is `block` (88) */
 sui-accordion { --sui-accordion-display: inline; }
 sui-area-chart { --sui-area-chart-display: inline; }
 sui-aspect-ratio { --sui-aspect-ratio-display: inline; }
@@ -98,6 +98,7 @@ sui-table { --sui-table-display: inline; }
 sui-tabs { --sui-tabs-display: inline; }
 sui-task-list { --sui-task-list-display: inline; }
 sui-thinking-indicator { --sui-thinking-indicator-display: inline; }
+sui-thinking-orb { --sui-thinking-orb-display: inline; }
 sui-toast { --sui-toast-display: inline; }
 sui-toggle { --sui-toggle-display: inline; }
 sui-tool-call-log { --sui-tool-call-log-display: inline; }

package/dist-codemod/codemod/migration-assets/wc-display.json

@@ -459,6 +459,11 @@
     "property": "--sui-thinking-indicator-display",
     "default": "block"
   },
+  {
+    "tag": "sui-thinking-orb",
+    "property": "--sui-thinking-orb-display",
+    "default": "block"
+  },
   {
     "tag": "sui-toast",
     "property": "--sui-toast-display",