BJORK Live line

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useCallback, useEffect, useRef, useState } from "react";
import { LiveLine, createRandomWalk, type LivePoint } from "@/components/ui/bjork-live-line";
import { mulberry32 } from "@/components/ui/bjork-live-line-utils/components-bjork-ui-_core-random";

const T0 = 1_700_000_000_000;

const SAMPLE_MS = 250;

const MAX_SAMPLES = 1500;

function sampleSpike(rnd: () => number, v: number): number {
  return rnd() < 0.012 ? v + 70 : v;
}

function seedHistory(seed: number, end: number, spanMs: number): LivePoint[] {
  const walk = createRandomWalk(seed, { base: 180, volatility: 4, hz: 4 });
  const rnd = mulberry32(seed + 17);
  const out: LivePoint[] = [];
  for (let t = end - spanMs; t <= end; t += SAMPLE_MS) {
    out.push({ t, v: sampleSpike(rnd, walk.next(t).v) });
  }
  return out;
}

const PREVIEW_HISTORY = seedHistory(3, T0, 60000);

const THRESHOLD = { value: 250, label: "SLO 250ms" };

const formatDemoValue = (v: number) => `${Math.round(v)} ms`;

function LiveDemo({
  isPreview,
  windowMs,
  easing,
  paused,
  onPausedChange,
  onRegisterControls,
}: {
  isPreview: boolean;
  windowMs: number;
  easing: number;
  paused: boolean;
  onPausedChange: (paused: boolean) => void;
  onRegisterControls: (controls: { injectSpike: () => void }) => void;
}) {
  const [live, setLive] = useState<LivePoint[]>(PREVIEW_HISTORY);
  const nextT = useRef(T0);

  // Live stream at 4Hz. Pure timestamps on the synthetic clock, so nothing here reads Date.now().
  useEffect(() => {
    if (isPreview) return;
    const walk = createRandomWalk(3, { base: 180, volatility: 4, hz: 4 });
    const rnd = mulberry32(20);
    const id = setInterval(() => {
      nextT.current += SAMPLE_MS;
      const t = nextT.current;
      const v = sampleSpike(rnd, walk.next(t).v);
      setLive((prev) => [...prev, { t, v }].slice(-MAX_SAMPLES));
    }, SAMPLE_MS);
    return () => clearInterval(id);
  }, [isPreview]);

  useEffect(() => {
    onRegisterControls({
      injectSpike: () => {
        nextT.current += SAMPLE_MS;
        const t = nextT.current;
        setLive((prev) => [...prev, { t, v: (prev[prev.length - 1]?.v ?? 180) + 140 }].slice(-MAX_SAMPLES));
      },
    });
  }, [onRegisterControls]);

  return (
    <LiveLine
      data={isPreview ? PREVIEW_HISTORY : live}
      window={windowMs}
      easing={easing}
      paused={isPreview ? true : paused}
      showPauseButton={!isPreview}
      onPausedChange={onPausedChange}
      threshold={THRESHOLD}
      formatValue={formatDemoValue}
      scrub
      ariaLabel="p95 latency"
    />
  );
}
function SourceDemo(){
const isPreview = false;
const [windowMs, setWindowMs] = useState(60000);
const [easing, setEasing] = useState(0.08);
const [paused, setPaused] = useState(false);
const spikeRef = useRef<() => void>(() => {});
const registerControls = useCallback((c: { injectSpike: () => void }) => {
    spikeRef.current = c.injectSpike;
  }, []);
const reset = () => {
    setWindowMs(60000);
    setEasing(0.08);
    setPaused(false);
  };
return <>

      <div className="flex w-full min-w-0 flex-col gap-5">
        <LiveDemo
          isPreview={isPreview}
          windowMs={windowMs}
          easing={easing}
          paused={paused}
          onPausedChange={setPaused}
          onRegisterControls={registerControls}
        />
      </div>
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}