Chart Recorder

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12export interface ChartRecorderRect {
13  /** 0–1 left edge of the readable safe area. */
14  x: number;
15  /** 0–1 top edge of the readable safe area. */
16  y: number;
17  /** 0–1 width of the readable safe area. */
18  w: number;
19  /** 0–1 height of the readable safe area. */
20  h: number;
21}
22 
23export interface ChartRecorderProps extends React.HTMLAttributes<HTMLDivElement> {
24  /** Number of instrument lanes (2–5). Default 5 (the full violet→cyan spectrum). */
25  lanes?: number;
26  /** Tick/lattice detail density multiplier. ~0.6–1.6. */
27  density?: number;
28  /** Overall ink luminance/glow of the field (0–1.4). */
29  intensity?: number;
30  /** Pen-sweep speed multiplier. 0 freezes on a single rich still frame. */
31  speed?: number;
32  /** Region where lanes thin/quiet down so foreground text stays readable (0–1 coords). */
33  safeArea?: ChartRecorderRect;
34  /**
35   * Violet end of the lane spectrum (any CSS color). Overrides lane 0's fixed
36   * Motion Lab hue (`#9e84ff`); the remaining lanes always keep their exact
37   * lab colors. Omit to use the fixed lab spectrum as-is.
38   */
39  accent?: string;
40  /** Deterministic seed for the generated geometry (SSR-stable). */
41  seed?: number;
42  /** Pause the sweep when scrolled offscreen or the tab is hidden. */
43  pauseWhenHidden?: boolean;
44  /** Force the static, motion-free variant regardless of system preference. */
45  reducedMotion?: boolean;
46}
47 
48/* -------------------------------------------------------------------------- */
49/* Deterministic model                                                        */
50/* -------------------------------------------------------------------------- */
51 
52/** mulberry32 — no Math.random / Date.now at render or module scope (SSR-stable). */
53function makeRng(seed: number) {
54  let a = seed >>> 0;
55  return () => {
56    a = (a + 0x6d2b79f5) | 0;
57    let t = Math.imul(a ^ (a >>> 15), 1 | a);
58    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
59    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
60  };
61}
62 
63const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
64// … truncated