@juspay/svelte-ui-components 4.32.1 → 4.33.1

package/dist/ThinkingOrb/ThinkingOrb.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { attract, GRAVITY_DEFAULTS, type GravityPointer } from './orb/gravity';
+  import { paintFrame } from './orb/paint';
+  import { MODES } from './orb/modes';
+  import { prefersReducedMotion } from '../utils';
+  import { parseCssColor } from '../VoiceOrb/orbMath';
+  import type { Rgb } from '../types';
+  import type {
+    GravityOptions,
+    OrbState,
+    ThinkingOrbProperties,
+    ThinkingOrbSize
+  } from './properties';
+
+  let {
+    state: orbState = 'working',
+    size = 64,
+    speed = 1,
+    paused = false,
+    color,
+    dots = 1,
+    dotSize = 1,
+    gravity = false,
+    ariaLabel,
+    classes,
+    testId,
+    onfirstframe
+  }: ThinkingOrbProperties = $props();
+
+  const SIZES: readonly ThinkingOrbSize[] = [64, 32, 20];
+  const FALLBACK_TINT: Rgb = { r: 128, g: 128, b: 128 };
+  /** A fixed, representative instant a reduced-motion orb holds — any single
+   * frame works, since every mode is required to be non-blank at every `t`. */
+  const REDUCED_MOTION_INSTANT = 2.4;
+  /** The backing store never scales past this multiple of the CSS size, so a
+   * very-high-density display can't push the canvas past a sane pixel budget. */
+  const MAX_BACKING_SCALE = 2;
+
+  // <sui-thinking-orb> passes `state`/`size` straight from string/number
+  // attributes, so a value no mode or size knows about can reach here. Fall
+  // back rather than let a missing MODES entry leave nothing drawn.
+  const safeState: OrbState = $derived(Object.hasOwn(MODES, orbState) ? orbState : 'working');
+  const safeSize: ThinkingOrbSize = $derived(SIZES.includes(size) ? size : 64);
+  const density = $derived(Math.max(0.1, dots));
+  const dotScale = $derived(Math.max(0.1, dotSize));
+
+  /*
+   * Gravity is motion: under reduced motion it is switched off outright
+   * rather than merely un-animated, so a still frame never carries a pointer
+   * pull a user asked motion to not see.
+   */
+  const gravityOptions = $derived.by((): GravityOptions | null => {
+    if (!gravity || reducedMotion) {
+      return null;
+    }
+    return gravity === true ? GRAVITY_DEFAULTS : gravity;
+  });
+
+  let canvas: HTMLCanvasElement | null = $state(null);
+  /*
+   * `reducedMotion`/`onScreen`/`tabVisible` feed `shouldRun` below (a
+   * `$derived`), so they must be real `$state` for it to react when they
+   * 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 announcedFirstFrame = false;
+  let resolvedColorInput = '';
+  let resolvedTint: Rgb = FALLBACK_TINT;
+  let pointer: GravityPointer = null;
+  let animationHandle = 0;
+  /** The orb's own clock: speed-scaled seconds, starting at 0 on mount and
+   * advancing only while the loop actually runs (see the main `$effect`). A
+   * still orb simply stops touching it, so it holds the exact instant it
+   * stopped at with no extra bookkeeping. */
+  let clock = 0;
+
+  const shouldRun = $derived(!paused && !reducedMotion && onScreen && tabVisible);
+
+  /** What a still orb paints: the fixed instant under reduced motion, else
+   * whatever `clock` last reached. */
+  const heldInstant = (): number => (reducedMotion ? REDUCED_MOTION_INSTANT : clock);
+
+  /*
+   * Assigning an unparseable colour to `fillStyle` is a spec no-op, so the
+   * candidate is tried against two different backgrounds and the results
+   * compared -- agreement means the browser accepted and normalised it (see
+   * VoiceOrb.svelte, which uses the same trick).
+   */
+  const normalizeColor = (context: CanvasRenderingContext2D, value: string): string | null => {
+    if (value.length === 0) {
+      return null;
+    }
+    const previous = context.fillStyle;
+    context.fillStyle = '#000000';
+    context.fillStyle = value;
+    const onBlack = context.fillStyle;
+    context.fillStyle = '#ffffff';
+    context.fillStyle = value;
+    const onWhite = context.fillStyle;
+    context.fillStyle = previous;
+    return typeof onBlack === 'string' && onBlack === onWhite ? onBlack : null;
+  };
+
+  const readColorInput = (
+    target: HTMLCanvasElement
+  ): { declared: string; inherited: string; key: string } => {
+    const styles = getComputedStyle(target);
+    const declared = styles.getPropertyValue('--sui-thinking-orb-color').trim();
+    const inherited = styles.color.trim();
+    return { declared, inherited, key: `${declared}|${inherited}` };
+  };
+
+  /** `color` prop wins outright; otherwise re-read via getComputedStyle, cached by the raw input string. */
+  const resolveTint = (context: CanvasRenderingContext2D): Rgb => {
+    if (color) {
+      return color;
+    }
+    if (canvas === null) {
+      return resolvedTint;
+    }
+    const { declared, inherited, key } = readColorInput(canvas);
+    if (key === resolvedColorInput) {
+      return resolvedTint;
+    }
+    resolvedColorInput = key;
+    const normalized = normalizeColor(context, declared) ?? normalizeColor(context, inherited);
+    resolvedTint = (normalized === null ? null : parseCssColor(normalized)) ?? FALLBACK_TINT;
+    return resolvedTint;
+  };
+
+  /** A still orb has no running loop to pick up a moved pointer on its own,
+   * so gravity repaints it directly; a running orb's loop already paints the
+   * latest pointer every tick and needs no help here. */
+  const repaintIfStill = (): void => {
+    if (shouldRun || gravityOptions === null) {
+      return;
+    }
+    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;
+    }
+    const rect = canvas.getBoundingClientRect();
+    pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    repaintIfStill();
+  };
+
+  const releasePointer = (): void => {
+    pointer = null;
+    repaintIfStill();
+  };
+
+  /** SSR renders with no `window`; the backing store is left at 1x until the
+   * component actually mounts in a browser and can ask it for a real ratio. */
+  const resolveBackingScale = (): number => {
+    if (typeof window === 'undefined') {
+      return 1;
+    }
+    return Math.min(MAX_BACKING_SCALE, window.devicePixelRatio ?? 1);
+  };
+
+  /** Paints one instant. `instant` is already speed-scaled seconds -- either
+   * the orb's own running `clock` or the fixed reduced-motion instant. Safe
+   * to call whether or not the loop is running. */
+  const draw = (instant: number): void => {
+    if (canvas === null) {
+      return;
+    }
+    const context = canvas.getContext('2d');
+    if (context === null) {
+      return;
+    }
+
+    const dpr = resolveBackingScale();
+    const backingPx = Math.round(safeSize * dpr);
+    if (canvas.width !== backingPx || canvas.height !== backingPx) {
+      canvas.width = backingPx;
+      canvas.height = backingPx;
+    }
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    const frame = MODES[safeState](instant, { size: safeSize, density, dotScale });
+    const gOpts = gravityOptions;
+    const painted = gOpts === null ? frame : attract(frame, pointer, gOpts);
+    paintFrame(context, painted, { tint: resolveTint(context) });
+
+    if (!announcedFirstFrame) {
+      announcedFirstFrame = true;
+      onfirstframe?.();
+    }
+  };
+
+  /*
+   * Re-runs whenever `shouldRun` or anything the leading `draw` reads changes
+   * (`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
+   * repaints from scratch with no dependency list to maintain by hand.
+   *
+   * `clock` itself is never read synchronously here, only inside the `loop`
+   * closure below, which runs later from `requestAnimationFrame` -- so
+   * advancing it never retriggers this effect. That's what lets `speed`
+   * change the clock's rate starting next tick with no jump and no loop
+   * restart: `loop` reads the live `speed` prop itself, every tick.
+   */
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    // A still orb (paused, reduced motion or off screen) never touches
+    // `clock`, so it simply holds whatever instant it last reached -- no
+    // separate "was it frozen" bookkeeping needed. At least one frame is
+    // always painted, so the canvas is never blank.
+    draw(heldInstant());
+    if (!shouldRun) {
+      return;
+    }
+    // Reset on every (re)start of the loop, including a resume from
+    // stillness: the first tick after a (re)start must not count the time
+    // that passed before it, so it advances `clock` by zero and every tick
+    // after that measures real elapsed time again.
+    let previousFrameTime: number | null = null;
+    const loop = (frameTime: number): void => {
+      const deltaSeconds = previousFrameTime === null ? 0 : (frameTime - previousFrameTime) / 1000;
+      previousFrameTime = frameTime;
+      clock += deltaSeconds * speed;
+      draw(clock);
+      animationHandle = requestAnimationFrame(loop);
+    };
+    animationHandle = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(animationHandle);
+  });
+
+  onMount(() => {
+    if (canvas === null) {
+      return;
+    }
+
+    // Every optional platform API below follows the same shape: build it
+    // when the browser exposes the constructor/method it needs, otherwise
+    // leave the binding `null` so the optional-chaining calls below no-op.
+    let intersectionObserver: IntersectionObserver | null = null;
+    if (typeof IntersectionObserver !== 'undefined') {
+      intersectionObserver = new IntersectionObserver(([entry]) => {
+        onScreen = entry.isIntersecting;
+      });
+      intersectionObserver.observe(canvas);
+    }
+
+    const onVisibilityChange = (): void => {
+      tabVisible = document.visibilityState !== 'hidden';
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+
+    /*
+     * 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.
+     */
+    let themeObserver: MutationObserver | null = null;
+    if (typeof MutationObserver !== 'undefined') {
+      themeObserver = new MutationObserver(repaintIfColorChanged);
+      themeObserver.observe(document.documentElement, { attributes: true });
+      themeObserver.observe(document.body, { attributes: true });
+    }
+
+    const onMotionChange = (event: MediaQueryListEvent): void => {
+      reducedMotion = event.matches;
+    };
+    let motionQuery: MediaQueryList | null = null;
+    if (typeof window.matchMedia === 'function') {
+      motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      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 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 (event.propertyName !== 'color' && event.propertyName !== '--sui-thinking-orb-color') {
+        return;
+      }
+      repaintIfColorChanged();
+    };
+    document.addEventListener('transitionend', onColorTransitionEnd);
+
+    return () => {
+      intersectionObserver?.disconnect();
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+      document.removeEventListener('transitionend', onColorTransitionEnd);
+      themeObserver?.disconnect();
+      motionQuery?.removeEventListener('change', onMotionChange);
+      colorSchemeQuery?.removeEventListener('change', repaintIfColorChanged);
+    };
+  });
+</script>
+
+<!-- The canvas is a picture with a label, not a control: the pointer handlers
+     only feed the optional gravity effect and never act, so role="img" is
+     accurate. -->
+<!-- svelte-ignore a11y_no_interactive_element_to_noninteractive_role -->
+<canvas
+  bind:this={canvas}
+  role="img"
+  aria-label={ariaLabel ?? `${safeState.charAt(0).toUpperCase()}${safeState.slice(1)}…`}
+  class={classes}
+  data-pw={typeof testId === 'string' ? testId : null}
+  style:width={`${safeSize}px`}
+  style:height={`${safeSize}px`}
+  style:display="block"
+  onpointermove={trackPointer}
+  onpointerleave={releasePointer}
+  onpointercancel={releasePointer}
+></canvas>

package/dist/ThinkingOrb/ThinkingOrb.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ThinkingOrbProperties } from './properties';
+declare const ThinkingOrb: import("svelte").Component<ThinkingOrbProperties, {}, "">;
+type ThinkingOrb = ReturnType<typeof ThinkingOrb>;
+export default ThinkingOrb;

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

@@ -0,0 +1,30 @@
+/**
+ * Pulls a frame's dots toward a pointer position, so an orb can feel alive
+ * under the cursor without any mode ever knowing pointers exist -- the same
+ * separation `paintFrame` keeps between a mode and the canvas.
+ */
+import type { Frame } from './types';
+/**
+ * Where gravity pulls toward, in the same coordinate space as a `Dot`.
+ * `null` means nothing is hovering, and gravity does nothing.
+ */
+export type GravityPointer = {
+    x: number;
+    y: number;
+} | null;
+/** How far gravity reaches (`radius`, px) and how hard it pulls at its centre (`strength`, px). */
+export type GravityOptions = {
+    radius: number;
+    strength: number;
+};
+/** A reach and pull tuned to read as a subtle few px of drift, never a snap to the cursor. */
+export declare const GRAVITY_DEFAULTS: GravityOptions;
+/**
+ * Returns a NEW `Frame` with every dot and stroke endpoint inside
+ * `options.radius` of `pointer` pulled toward it, the pull smoothly fading
+ * to nothing at the radius edge; marks outside are returned untouched. Each
+ * stroke endpoint moves by the same amount a dot at that point would, so a
+ * line stays attached to the nodes it joins. A `null` pointer is a no-op:
+ * `frame` is returned as-is. Never mutates `frame` or anything inside it.
+ */
+export declare const attract: (frame: Frame, pointer: GravityPointer, options: GravityOptions) => Frame;

package/dist/ThinkingOrb/orb/gravity.js

@@ -0,0 +1,64 @@
+/**
+ * Pulls a frame's dots toward a pointer position, so an orb can feel alive
+ * under the cursor without any mode ever knowing pointers exist -- the same
+ * separation `paintFrame` keeps between a mode and the canvas.
+ */
+import { easeOutCubic } from './space';
+/** A reach and pull tuned to read as a subtle few px of drift, never a snap to the cursor. */
+export const GRAVITY_DEFAULTS = {
+    radius: 32,
+    strength: 6
+};
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+/**
+ * Where one point ends up after `pointer` pulls on it. The pull is capped at
+ * the point's own distance from `pointer` -- without that cap, a point
+ * already close to the pointer (distance smaller than `strength`) would
+ * overshoot past it. Shared by dots and stroke endpoints so a line stays
+ * attached to the nodes it joins: each endpoint moves exactly as far as a
+ * dot sitting at that same spot would.
+ */
+const attractPoint = (point, pointer, options) => {
+    const dx = pointer.x - point.x;
+    const dy = pointer.y - point.y;
+    const distance = Math.hypot(dx, dy);
+    if (distance === 0 || distance >= options.radius) {
+        return point;
+    }
+    const proximity = clamp01(1 - distance / options.radius);
+    const pull = Math.min(easeOutCubic(proximity) * options.strength, distance);
+    const scale = pull / distance;
+    return { x: point.x + dx * scale, y: point.y + dy * scale };
+};
+const attractDot = (dot, pointer, options) => {
+    const moved = attractPoint(dot, pointer, options);
+    return moved.x === dot.x && moved.y === dot.y ? dot : { ...dot, x: moved.x, y: moved.y };
+};
+const attractStroke = (stroke, pointer, options) => {
+    const start = attractPoint({ x: stroke.x1, y: stroke.y1 }, pointer, options);
+    const end = attractPoint({ x: stroke.x2, y: stroke.y2 }, pointer, options);
+    if (start.x === stroke.x1 &&
+        start.y === stroke.y1 &&
+        end.x === stroke.x2 &&
+        end.y === stroke.y2) {
+        return stroke;
+    }
+    return { ...stroke, x1: start.x, y1: start.y, x2: end.x, y2: end.y };
+};
+/**
+ * Returns a NEW `Frame` with every dot and stroke endpoint inside
+ * `options.radius` of `pointer` pulled toward it, the pull smoothly fading
+ * to nothing at the radius edge; marks outside are returned untouched. Each
+ * stroke endpoint moves by the same amount a dot at that point would, so a
+ * line stays attached to the nodes it joins. A `null` pointer is a no-op:
+ * `frame` is returned as-is. Never mutates `frame` or anything inside it.
+ */
+export const attract = (frame, pointer, options) => {
+    if (pointer === null) {
+        return frame;
+    }
+    return {
+        dots: frame.dots.map((dot) => attractDot(dot, pointer, options)),
+        strokes: frame.strokes.map((stroke) => attractStroke(stroke, pointer, options))
+    };
+};

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

@@ -0,0 +1,33 @@
+/**
+ * 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 type { ModeFn } from '../types';
+/**
+ * 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 declare const composing: ModeFn;
+/**
+ * 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 declare const breathing: ModeFn;
+/**
+ * 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 declare const shaping: ModeFn;