Zeno Progress

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import {
  AnimatePresence,
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
} from "motion/react";

import { cn } from "@/lib/utils";

/**
 * Keep:
 * - One rAF loop draws the bar on a canvas and writes the percentage and `aria-valuenow` straight
 *   to the DOM, so a run never re-renders except when the step label changes.
 * - The gap is tracked as log10 and only ever halves, so the fill never reaches the end on its
 *   own; only `done` closes it, on a spring with `bounce: 0` that never overshoots.
 * - The zoom window freezes when `done` arrives, so the snap runs through the magnified gap.
 * - The percentage is floored and never reads 100% until the fill has landed.
 * - Reduced motion drops the ruler and zoom: past 90% the track breathes instead, `done` jumps the
 *   fill and labels only fade.
 */
const TIMING = {
  /** Each halving of the gap, in ms (the `interval` prop). */
  interval: 1000,
  /** Halvings the fill takes to get up to speed from a standstill. */
  rampUp: 0.35,
  /** The gap closing when done arrives, over `snapDuration`. */
  snap: { type: "spring", bounce: 0 },
  /** How long the snap takes, in seconds (the `snapDuration` prop, the spring's visualDuration). */
  snapDuration: 0.36,
  /** The ticks flashing and sinking after the snap, in seconds. */
  clear: 0.62,
  /** Labels sliding. */
  roll: { type: "spring", visualDuration: 0.34, bounce: 0 },
  /** Labels fading under reduced motion, in seconds. */
  fade: { duration: 0.16 },
  /** The fill heading back for a new run, in seconds, and its curve. */
  rewind: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
  /** One breath of the reduced-motion gap, in seconds. */
  breathe: 2.8,
} as const;

/* ─────────────────────────────────────────────────────────
 * ZENO PROGRESS STORYBOARD
 *
 *  run       the fill closes half of what's left every
 *            `interval`, easing out of a standstill, so it
 *            reads as steady work early and a crawl late. It
 *            never reaches the end on its own
 *  ruler     past ~90% the gap grows a ruler: ticks rise out
 *            of the track across the last stretch
 *  zoom      the last stretch becomes a magnifier with a fixed
 *            width. The gap is re-scaled to fill most of it,
 *            so the ruler zooms in toward the end point at a
 *            steady rate: ticks stream out from the end, grow
 *            as they spread, a finer tier rises between them
 *            and the fill eats them as they pass its edge. The
 *            label gains a decimal every tenfold zoom
 *  done      the zoom holds, the fill runs through the gap to
 *            the end on a spring with no overshoot, the ticks
 *            flash once and sink, and the label rolls to the
 *            done text
 *  again     `done` back to false: the fill rewinds to the
 *            start and a new run begins
 *  reduced   no ruler or zoom. Past 90% the gap breathes
 *            slowly instead, and done is a plain jump
 * ───────────────────────────────────────────────────────── */

const BAR = {
  height: 6, // px track
  canvas: 22, // px drawing area: ticks reach above and below the track
  tick: [4, 18], // px tick height, finest to tallest
  minSpacing: 2.5, // px between ticks before a finer tier shows
  tallSpacing: 90, // px between ticks at which they reach full height
  eat: 18, // px past the fill's edge over which ticks are eaten
  lens: [0.24, 48, 160], // magnifier: share of the track, min px, max px
  gapShare: 0.55, // share of the magnifier the zoomed gap keeps
  rulerFrom: 0.12, // gap left when the ruler starts to rise
  rulerTo: 0.07, // gap left when it's fully up
  maxDecimals: 6,
} as const;

const LOG2 = Math.log10(2);
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
const smoothstep = (a: number, b: number, v: number) => {
  const t = clamp((v - a) / (b - a), 0, 1);
  return t * t * (3 - 2 * t);
};

/** Percent left to go, shown at a precision that keeps two digits of it moving. */
function formatPercent(logGap: number, maxDecimals: number) {
  const decimals = clamp(Math.floor(-(logGap + 2)) + 2, 0, maxDecimals);
  const f = 10 ** decimals;
  let shown = Math.floor((100 - 100 * 10 ** logGap) * f) / f;
  // Floats round 99.99999999… up to 100; never claim the end early.
  if (shown >= 100) shown = 100 - 1 / f;
  return { text: `${shown.toFixed(decimals)}%`, decimals };
}

/** Halvings of the gap so far, easing out of a standstill. */
const halvingsAt = (ms: number, interval: number) => {
  const t = Math.max(0, ms / interval);
  return (t * t) / (t + TIMING.rampUp);
};

/** Width of the magnifier at the end of a track this wide. */
const lensOf = (width: number) => clamp(width * BAR.lens[0], BAR.lens[1], BAR.lens[2]);

/**
 * The window the lens shows, as log10 of a share of the bar: the lens at 1:1,
 * then the gap over `gapShare` of it, joined by a soft minimum so the zoom
 * eases in instead of starting with a kink.
 */
function zoomFor(gap: number, width: number, zooming: boolean) {
  const z0 = Math.log10(lensOf(width) / Math.max(width, 1));
  if (!zooming) return z0;
  const u = gap - Math.log10(BAR.gapShare) - z0;
  return z0 + u - Math.log10(1 + 10 ** (3 * u)) / 3;
}

type Geometry = { width: number; dpr: number };

/** Everything a frame needs, kept out of React so a run never re-renders. */
type Run = {
  /** performance.now() the run began; null until its first frame. */
  start: number | null;
  /** log10 of the gap and the zoom window at the moment `done` arrived. */
  doneGap: number | null;
  doneZoom: number;
  doneDecimals: number;
  /** When the fill reached the end, for the ticks' flash. */
  landed: number | null;
  completed: boolean;
  /** Ruler height when done arrived, so an early finish has no ticks to flash. */
  doneRuler: number;
  step: number;
  value: number;
  text: string;
};

const freshRun = (): Run => ({
  start: null,
  doneGap: null,
  doneZoom: 0,
  doneDecimals: 0,
  landed: null,
  completed: false,
  doneRuler: 0,
  step: 0,
  value: 0,
  text: "0%",
});

export interface ZenoProgressProps {
  /** The work is finished. The parent owns it: the bar only gets there when this turns true. */
  done?: boolean;
  /** Labels shown in turn as the fill moves. The last one holds through the crawl. */
  steps?: string[];
  /** Fixed label while running. Overrides `steps`. */
  label?: string;
  /** Label once done. */
  doneLabel?: string;
  /** Milliseconds for each halving of the gap. */
  interval?: number;
  /** Seconds the gap takes to snap shut once `done` arrives, on a spring that never overshoots. */
  snapDuration?: number;
  /** Zoom into the gap with a ruler past 90%. Off, the bar just crawls. */
  ruler?: boolean;
  /** Called once the fill reaches the end after `done`. */
  onComplete?: () => void;
  /** Classes that set the bar's color (a `text-*` color). The track and ticks are drawn from it. */
  barClassName?: string;
  className?: string;
}

export function ZenoProgress({
  done = false,
  steps,
  label,
  doneLabel = "Done",
  interval = TIMING.interval,
  snapDuration = TIMING.snapDuration,
  ruler = true,
  onComplete,
  barClassName,
  className,
}: ZenoProgressProps) {
  const reduced = useReducedMotion() ?? false;
  const rootRef = React.useRef<HTMLDivElement>(null);
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const percentRef = React.useRef<HTMLSpanElement>(null);

  const snap = useMotionValue(done ? 1 : 0);
  const rewind = useMotionValue(0);
  const [step, setStep] = React.useState(0);
  // A new run starts back on the first step.
  const [lastDone, setLastDone] = React.useState(done);
  if (lastDone !== done) {
    setLastDone(done);
    if (!done) setStep(0);
  }

  const stepCount = steps?.length ?? 0;
  const options = React.useRef({ interval, snapDuration, ruler, reduced, stepCount, onComplete });
  React.useEffect(() => {
    options.current = { interval, snapDuration, ruler, reduced, stepCount, onComplete };
  });

  const run = React.useRef<Run>(freshRun());
  const geometry = React.useRef<Geometry>({ width: 0, dpr: 1 });
  const color = React.useRef("#000");
  const frame = React.useRef(0);
  const wake = React.useRef<() => void>(() => {});
  const seenDone = React.useRef<boolean | null>(null);

  // The frame loop: reads the clock and the springs, draws the bar and writes the label.
  React.useEffect(() => {
    const canvas = canvasRef.current;
    const root = rootRef.current;
    const percent = percentRef.current;
    if (!canvas || !root || !percent) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let colorAge = Infinity;
    const readColor = () => {
      // Passed to the canvas as-is: Tailwind's colors are oklch().
      color.current = getComputedStyle(canvas).color;
    };

    const draw = (now: number) => {
      frame.current = 0;
      const { interval, ruler, reduced, stepCount, onComplete } = options.current;
      const r = run.current;
      const { width: W, dpr } = geometry.current;
      if (r.start === null) r.start = now;

      // Gap left, in log10 so it can shrink past what a float can hold.
      const halvings = halvingsAt(now - r.start, interval);
      const liveGap = -halvings * LOG2;

      const lens = lensOf(W);
      const z0 = Math.log10(lens / Math.max(W, 1));
      const zooming = ruler && !reduced;

      const s = snap.get();
      let gap: number;
      let zoom: number;
      if (r.doneGap === null) {
        gap = liveGap;
        zoom = zoomFor(gap, W, zooming);
      } else {
        gap = s >= 1 ? -Infinity : r.doneGap + Math.log10(1 - s);
        zoom = r.doneZoom;
      }
      const g = 10 ** gap;
      const z = 10 ** zoom;

      // Fill edge: the main stretch shows [0, 1 - z], the lens shows [1 - z, 1].
      const split = W - lens;
      const edge = g < z ? split + lens * (1 - g / z) : ((1 - g) / Math.max(1 - z, 1e-9)) * split;
      const fill = Math.max(edge, rewind.get() * W);

      // The ruler rises with the fill and, after done, flashes and sinks.
      const liveRuler = zooming ? smoothstep(BAR.rulerFrom, BAR.rulerTo, 10 ** liveGap) : 0;
      const rulerUp = r.doneGap === null ? liveRuler : r.doneRuler;
      if (r.doneGap !== null && s > 0.985 && r.landed === null) r.landed = now;
      const clearing = r.landed === null ? 0 : clamp((now - r.landed) / 1000 / TIMING.clear, 0, 1);
      const flash = clearing < 0.22 ? clearing / 0.22 : 1 - (clearing - 0.22) / 0.78;
      const sink = 1 - clearing * clearing;

      // Label and value.
      let text: string;
      let value: number;
      if (r.doneGap !== null && (r.landed !== null || s >= 1)) {
        text = "100%";
        value = 100;
      } else {
        const max = reduced ? 0 : r.doneGap === null ? BAR.maxDecimals : r.doneDecimals;
        text = formatPercent(gap, max).text;
        value = Math.floor(100 * (1 - g));
      }
      if (text !== r.text) {
        r.text = text;
        percent.textContent = text;
      }
      if (value !== r.value) {
        r.value = value;
        root.setAttribute("aria-valuenow", String(value));
      }
      if (stepCount > 1 && r.doneGap === null) {
        const next = Math.min(stepCount - 1, Math.floor(halvings / (Math.log2(10) / (stepCount - 1))));
        if (next !== r.step) {
          r.step = next;
          setStep(next);
        }
      }
      if (r.landed !== null && !r.completed) {
        r.completed = true;
        onComplete?.();
      }

      // Draw.
      if (colorAge++ > 30) {
        readColor();
        colorAge = 0;
      }
      const H = BAR.canvas;
      const cy = H / 2;
      const T = BAR.height;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, W, H);
      if (W <= 0) return;

      const breathing = reduced && r.doneGap === null && 10 ** liveGap < 0.1;
      const breath = breathing ? 0.5 - 0.5 * Math.cos(((now - r.start) / 1000 / TIMING.breathe) * Math.PI * 2) : 0;
      ctx.save();
      ctx.beginPath();
      ctx.roundRect(0, cy - T / 2, W, T, T / 2);
      ctx.clip();
      ctx.fillStyle = color.current;
      ctx.globalAlpha = 0.12 + 0.16 * breath;
      ctx.fillRect(0, 0, W, H);
      ctx.globalAlpha = 1;
      ctx.fillRect(0, 0, fill, H);
      ctx.restore();

      const height = rulerUp * sink;
      if (height > 0.001) {
        const windowPx = lens / (z * 100); // px per percent inside the lens
        // Tiers like a ruler's: tenths, halves, wholes, then the next decade up.
        // A tick belongs to the coarsest tier it lands on, and its height and
        // opacity follow that tier's spacing, so every tick grows continuously.
        const decade = Math.floor(Math.log10(BAR.minSpacing / windowPx));
        const tiers: number[] = [];
        for (let level = decade; level <= decade + 3; level++) tiers.push(10 ** level, 5 * 10 ** level);
        const marks: { x: number; h: number; a: number }[] = [];
        tiers.forEach((unit, k) => {
          const spacing = unit * windowPx;
          if (spacing < BAR.minSpacing || spacing > lens) return;
          const every = k + 1 < tiers.length ? Math.round(tiers[k + 1] / unit) : Infinity;
          const grown = clamp(Math.log10(spacing / BAR.minSpacing) / Math.log10(BAR.tallSpacing / BAR.minSpacing), 0, 1);
          const h = BAR.tick[0] + (BAR.tick[1] - BAR.tick[0]) * grown;
          const a = smoothstep(BAR.minSpacing, BAR.minSpacing * 3, spacing);
          for (let j = 1; j * spacing <= lens + 0.5; j++) {
            if (j % every !== 0) marks.push({ x: W - j * spacing, h, a });
          }
        });
        marks.push({ x: W - 0.75, h: BAR.tick[1], a: 1 }); // the end post
        // The lens' left edge, cut into the fill once the zoom is under way.
        const zoomed = smoothstep(0, 0.3, z0 - zoom);

        ctx.fillStyle = color.current;
        for (const m of marks) {
          if (m.x < split - 0.5) continue;
          const eaten = m.x <= fill ? 1 - clamp((fill - m.x) / BAR.eat, 0, 1) : 1;
          // Over the fill only the ends that stick out of the track show.
          const alpha = m.a * Math.max(0.6 * eaten, flash);
          if (alpha <= 0.01) continue;
          const h = m.h * height;
          ctx.globalAlpha = alpha;
          ctx.fillRect(Math.round(m.x * dpr) / dpr - 0.5, cy - h / 2, 1, h);
        }
        if (zoomed > 0.01 && fill > split) {
          ctx.globalCompositeOperation = "destination-out";
          ctx.globalAlpha = zoomed * (1 - clearing);
          ctx.fillRect(Math.round(split * dpr) / dpr - 1, cy - T / 2, 1.5, T);
        }
        ctx.globalCompositeOperation = "source-over";
        ctx.globalAlpha = 1;
      }

      const settled = r.doneGap !== null && (r.landed !== null ? clearing >= 1 : false) && rewind.get() === 0;
      if (!settled) frame.current = requestAnimationFrame(draw);
    };

    wake.current = () => {
      if (!frame.current) frame.current = requestAnimationFrame(draw);
    };

    const observer = new ResizeObserver(([entry]) => {
      const dpr = window.devicePixelRatio || 1;
      const width = entry.contentRect.width;
      geometry.current = { width, dpr };
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(BAR.canvas * dpr);
      colorAge = Infinity;
      wake.current();
    });
    observer.observe(canvas);
    wake.current();

    return () => {
      observer.disconnect();
      cancelAnimationFrame(frame.current);
      frame.current = 0;
      wake.current = () => {};
    };
  }, [snap, rewind]);

  // `done` drives the run: arriving snaps the gap shut, leaving starts a new run.
  React.useEffect(() => {
    const previous = seenDone.current;
    seenDone.current = done;
    const r = run.current;
    if (previous === done) return;

    if (done) {
      if (previous === null) {
        // Mounted finished: show the full bar, nothing to animate.
        Object.assign(r, { doneGap: -Infinity, landed: -Infinity, completed: true, text: "100%", value: 100 });
        snap.jump(1);
        if (percentRef.current) percentRef.current.textContent = "100%";
        wake.current();
        return;
      }
      const { interval, snapDuration, ruler, reduced } = options.current;
      const gap = r.start === null ? 0 : -halvingsAt(performance.now() - r.start, interval) * LOG2;
      r.doneZoom = zoomFor(gap, geometry.current.width, ruler && !reduced);
      r.doneGap = gap;
      r.doneDecimals = formatPercent(gap, reduced ? 0 : BAR.maxDecimals).decimals;
      r.doneRuler = ruler && !reduced ? smoothstep(BAR.rulerFrom, BAR.rulerTo, 10 ** gap) : 0;
      if (reduced) snap.jump(1);
      else animate(snap, 1, { ...TIMING.snap, visualDuration: snapDuration });
      wake.current();
      return;
    }

    // A new run. Rewind from wherever the last one left the fill.
    const from = previous === null ? 0 : r.doneGap === null ? 0 : 1;
    run.current = freshRun();
    snap.jump(0);
    if (percentRef.current) percentRef.current.textContent = "0%";
    rootRef.current?.setAttribute("aria-valuenow", "0");
    if (from > 0 && !options.current.reduced) {
      rewind.jump(from);
      animate(rewind, 0, TIMING.rewind);
    } else {
      rewind.jump(0);
    }
    wake.current();
  }, [done, snap, rewind]);

  const text = done ? doneLabel : (label ?? steps?.[Math.min(step, stepCount - 1)] ?? "Working");
  const slide = reduced ? { opacity: 0 } : { y: "100%", opacity: 0 };
  const leave = reduced ? { opacity: 0 } : { y: "-100%", opacity: 0 };

  return (
    <div
      ref={rootRef}
      role="progressbar"
      aria-valuemin={0}
      aria-valuemax={100}
      aria-valuenow={done ? 100 : 0}
      aria-valuetext={text}
      aria-busy={!done}
      className={cn("w-full text-sm text-zinc-600 dark:text-zinc-400", className)}
    >
      <div className="flex items-baseline justify-between gap-4">
        <span className="relative h-[1lh] min-w-0 flex-1 overflow-hidden">
          <AnimatePresence initial={false} mode="popLayout">
            <motion.span
              key={text}
              className="block truncate"
              initial={slide}
              animate={{ y: 0, opacity: 1 }}
              exit={leave}
              transition={reduced ? TIMING.fade : TIMING.roll}
            >
              {text}
            </motion.span>
          </AnimatePresence>
        </span>
        <span ref={percentRef} aria-hidden className="shrink-0 font-medium tabular-nums text-zinc-900 dark:text-zinc-100">
          0%
        </span>
      </div>
      <canvas
        ref={canvasRef}
        aria-hidden
        className={cn("mt-1 block h-[22px] w-full text-zinc-900 dark:text-zinc-100", barClassName)}
      />
      <span className="sr-only" aria-live="polite">
        {done ? doneLabel : ""}
      </span>
    </div>
  );
}