@crievo/omni 0.1.3 → 0.1.4

package/studio/web/components/bencho/PullToRefresh.tsx

@@ -0,0 +1,527 @@
+/* A portfolio card. Pull it down and it stretches; let go past the line and it refreshes. Run along the chart to read
+   the day back. Ported from bencho.dev (MIT).
+
+   Elasticity is feedback, never latency: every outcome has already happened by the time anything settles. The
+   refresh fires on release, not when the ring stops turning, and the new figure lands with the spring back.
+   The commitment happens at a distance, not on release: crossing the threshold arms the refresh while the finger is
+   still down, so you know it will happen. Deciding on release would hide the only information the gesture carries. */
+
+import {
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+const mix = (a: number, b: number, t: number) => a + (b - a) * t;
+
+/* Screen pixels are not layout pixels: the stage can scale the card. Every drag divides by this before it believes
+   a delta. */
+const zoomOf = (el: HTMLElement) => el.getBoundingClientRect().width / (el.offsetWidth || 1) || 1;
+
+/* One spring for everything that settles: it accumulates velocity toward the target, damps it, and snaps when both
+   the delta and the velocity fall under 0.02. `dt` is in sixtieths of a second and the damping is raised to it
+   rather than multiplied by it, so a dropped frame decays the same energy as the two frames it replaced. The loop
+   parks itself the moment the value settles.
+   The pair is chosen by damping ratio, zeta = -ln(d) / (2 * sqrt(k)): 0 is heavy and arrives without a ring
+   (zeta ~0.85), 50 sits near 0.41, 100 is lively with two visible rebounds (~0.20). */
+const springOf = (tune: number) => ({
+  /* stiffness: how hard it is pulled toward the target */
+  k: 0.08 + (tune / 100) * 0.16,
+  /* decay, per frame: how much of the velocity survives */
+  d: 0.62 + (tune / 100) * 0.2,
+});
+
+/* The snap threshold is absolute, so the caller works in pixels. */
+function useSpring(target: number, tune = 50, instant = false) {
+  const [at, setAt] = useState(target);
+  const cur = useRef(target);
+  const vel = useRef(0);
+  const raf = useRef(0);
+
+  useEffect(() => {
+    if (instant) {
+      cur.current = target;
+      vel.current = 0;
+      setAt(target);
+      return;
+    }
+    const { k, d } = springOf(tune);
+    let prev = 0;
+    const tick = (t: number) => {
+      const dt = prev ? clamp((t - prev) / 16.67, 0, 2.5) : 1;
+      prev = t;
+      vel.current += (target - cur.current) * k * dt;
+      vel.current *= d ** dt;
+      cur.current += vel.current * dt;
+      if (Math.abs(target - cur.current) < 0.02 && Math.abs(vel.current) < 0.02) {
+        cur.current = target;
+        vel.current = 0;
+        setAt(target);
+        raf.current = 0;
+        return;
+      }
+      setAt(cur.current);
+      raf.current = requestAnimationFrame(tick);
+    };
+    raf.current = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf.current);
+      raf.current = 0;
+    };
+    /* `tune` sits beside `target` because the loop closes over it; restarting picks up from the refs, so it
+       continues rather than snapping. */
+  }, [target, tune, instant]);
+
+  return at;
+}
+
+/* Read once: a preference, not a live input. */
+const stillness = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+/* The stage scales the card, and the scale lands on the card's own coordinate space; this reads it back. */
+function useGooScale() {
+  const box = useRef<HTMLDivElement | null>(null);
+  const [k, setK] = useState(1);
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    const read = () => {
+      const r = el.getBoundingClientRect();
+      const next = r.width / (el.offsetWidth || r.width) || 1;
+      setK(was => (Math.abs(was - next) < 0.001 ? was : next));
+    };
+    read();
+    const ro = new ResizeObserver(read);
+    ro.observe(el);
+    /* a transform change is not a resize */
+    const t = window.setInterval(read, 500);
+    return () => {
+      ro.disconnect();
+      window.clearInterval(t);
+    };
+  }, []);
+  return { box, k };
+}
+
+/* Three fixed readings, cycled in order, each starting where the last one ended: a refresh continues the day rather
+   than resetting it. One array is the whole truth: the balance is the last point, the change is last minus first,
+   the percentage is that over the first. */
+const READS: number[][] = [
+  [
+    57630.15, 57672.02, 57697.31, 57740.67, 57829.15, 57881.9, 57875.25, 57871.44, 57841.43, 57824.68, 57957.03,
+    58078.61, 58095.22, 58136.25, 58156.95, 58113.65, 58180.3, 58394.72, 58518.55, 58536.23, 58450.89, 58354.12,
+    58489.6, 58573.06, 58508.69, 58536.64, 58594.77, 58647.64, 58668.57, 58682.61, 58720.06, 58743.78, 58784.11,
+    58834.75,
+  ],
+  [
+    58834.75, 58842.84, 58858.72, 58877.48, 58874.75, 58872.61, 58896.56, 58906.48, 58893.08, 58922.63, 58981.41,
+    58963.18, 58940.77, 59001.24, 59035.63, 59026.34, 59052.16, 59073.47, 59033.25, 59010.92, 58996.54, 58935.27,
+    58911.5, 58975.07, 59037.9, 59022.02, 59004.8, 59038.44, 59055.78, 59056.52, 59072.15, 59078.52, 59088.28, 59102.4,
+  ],
+  [
+    59102.4, 59086.9, 59077.06, 59068.52, 59055.95, 59019.04, 58999.47, 58975.1, 58903.86, 58916.98, 58989.57, 58926.11,
+    58763.26, 58683.68, 58727.54, 58778.0, 58758.83, 58718.66, 58682.76, 58709.66, 58792.35, 58782.87, 58692.33,
+    58598.58, 58598.77, 58672.38, 58655.19, 58615.97, 58621.85, 58624.03, 58595.53, 58549.14, 58523.68, 58516.05,
+  ],
+];
+
+/* Tabular figures: the same advance for every digit, so the number can change on a refresh or under a scrub without
+   anything after it moving. */
+const money = (n: number) => n.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+/* the cents ride at a lighter weight, so split them off */
+const split = (n: number): [string, string] => {
+  const s = money(n);
+  const comma = s.lastIndexOf(",");
+  return [s.slice(0, comma), s.slice(comma)];
+};
+
+const signed = (n: number) => (n < 0 ? "−" : "+") + money(Math.abs(n));
+const percent = (n: number) => n.toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
+
+/* Thirty-four readings across a trading day. The scrub says when, because a number with no time on it is just a
+   different number. */
+const OPEN = 9 * 60;
+const SHUT = 17 * 60 + 30;
+const clock = (i: number, n: number) => {
+  const m = Math.round(OPEN + ((SHUT - OPEN) * i) / (n - 1));
+  return `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`;
+};
+
+/* Six is where a ring still reads as a circle rather than a polygon; it is a knob, so this is only the start. */
+const DOTS = 6;
+
+/* Every window is real: tails of the recorded session (09:00 to 17:30 across 34 readings), so the balance is the
+   same number in all three and only the change differs. */
+const WINDOWS = [
+  { id: "1h", label: "1H", take: 5, span: "última hora" },
+  { id: "4h", label: "4H", take: 17, span: "últimas 4 horas" },
+  { id: "1d", label: "1D", take: 34, span: "hoje" },
+] as const;
+
+/* A curve, not a polyline: Catmull-Rom converted to cubic béziers, so it passes through every reading exactly and
+   the control points come from the neighbours on either side. The stroke, the points and the evaluator come out of
+   one pass because they all have to agree: a scrub dot must sit on the curve, not beside it. */
+function curve(vals: number[], w: number, h: number, pad: number) {
+  const lo = Math.min(...vals);
+  const hi = Math.max(...vals);
+  const pt = vals.map((v, i) => ({
+    x: (i / (vals.length - 1)) * w,
+    y: h - pad - ((v - lo) / (hi - lo || 1)) * (h - pad * 2),
+  }));
+
+  const seg = pt.slice(0, -1).map((p1, i) => {
+    const p0 = pt[i - 1] ?? p1;
+    const p2 = pt[i + 1];
+    const p3 = pt[i + 2] ?? p2;
+    /* a sixth of the neighbour span is the standard Catmull-Rom tension: tighter and it corners, looser and it loops */
+    return {
+      p1,
+      p2,
+      c1: { x: p1.x + (p2.x - p0.x) / 6, y: p1.y + (p2.y - p0.y) / 6 },
+      c2: { x: p2.x - (p3.x - p1.x) / 6, y: p2.y - (p3.y - p1.y) / 6 },
+    };
+  });
+
+  let d = `M${pt[0].x.toFixed(2)} ${pt[0].y.toFixed(2)}`;
+  for (const g of seg) {
+    d += ` C${g.c1.x.toFixed(2)} ${g.c1.y.toFixed(2)} ${g.c2.x.toFixed(2)} ${g.c2.y.toFixed(2)} ${g.p2.x.toFixed(2)} ${g.p2.y.toFixed(2)}`;
+  }
+
+  /* Anywhere along the line, not just at a reading: the same cubic the path is made of, at a fractional index.
+     Lerping between two readings would put the dot on the chord, which is beside the curve wherever it bends. */
+  const at = (u: number) => {
+    const i = Math.min(seg.length - 1, Math.max(0, Math.floor(u)));
+    const g = seg[i];
+    const t = Math.min(1, Math.max(0, u - i));
+    const m = 1 - t;
+    return {
+      x: m ** 3 * g.p1.x + 3 * m * m * t * g.c1.x + 3 * m * t * t * g.c2.x + t ** 3 * g.p2.x,
+      y: m ** 3 * g.p1.y + 3 * m * m * t * g.c1.y + 3 * m * t * t * g.c2.y + t ** 3 * g.p2.y,
+    };
+  };
+
+  return { d, pt, at };
+}
+
+/* the card's corner (a knob); the tabs follow it */
+const CORNER = 20;
+
+/* The room the rebound compresses into: negative padding does not exist, so the card carries this much at rest and
+   the bounce spends it. */
+const SQUASH = 8;
+
+/* How far the card can stretch. The stylesheet cancels the growth in layout with a matching negative margin, so the
+   card paints taller and measures the same; what is left is a limit of taste. `tanh` is near-linear where it
+   matters (at 40 of pull the card has grown 38, so it follows the finger) and bends only near the top: 68 at the
+   58px threshold, 104 at a 200px heave against a ceiling of 110. */
+const GROW = 110;
+
+export function PullToRefresh({
+  /* how much the pull fights back, 0..100 */
+  resistance = 50,
+  /* px before it commits */
+  threshold = 58,
+  /* how fast the ring turns while it works, 0..100 */
+  spin = 50,
+  /* how many dots the loading wheel is made of, 3..10 */
+  dots = DOTS,
+  /* the card's own corner, 0..40; the tabs follow it */
+  corner = CORNER,
+}: {
+  resistance?: number;
+  threshold?: number;
+  spin?: number;
+  dots?: number;
+  corner?: number;
+} = {}) {
+  const scroll = useRef<HTMLDivElement | null>(null);
+  const grab = useRef<{ x: number; y: number; from: number; on: boolean } | null>(null);
+  const off = useRef(0);
+  const [raw, setRaw] = useState(0);
+  const [phase, setPhase] = useState<"idle" | "hold" | "work">("idle");
+  /* which reading is on screen; a refresh advances it, so the gesture has an outcome you can point at */
+  const [read, setRead] = useState(0);
+  /* which point the pointer is over (a fractional index), or null for "the latest" */
+  const [scrub, setScrub] = useState<number | null>(null);
+  /* how much of the session is drawn; the whole day by default */
+  const [win, setWin] = useState(WINDOWS.length - 1);
+  const still = stillness();
+  const { box, k } = useGooScale();
+
+  /* the tail of the reading, as long as the chosen window */
+  const day = READS[read % READS.length];
+  const series = day.slice(Math.max(0, day.length - WINDOWS[win].take));
+  /* where the window starts in the day: the first point of the 1H window is half past four, not nine, and the same
+     reading must report the same time in every window */
+  const offset = day.length - series.length;
+  useEffect(() => () => window.clearTimeout(off.current), []);
+
+  /* Rubber, not a rail: a linear pull tells you nothing on the way. This saturates, so the last twenty pixels cost
+     more than the first twenty. R is where the curve gives up and has to stay well above the threshold's ceiling,
+     or the top of the range would be a pull that can never commit. */
+  const R = 700 - (resistance / 100) * 380;
+  const drawn = (R * raw) / (R + raw);
+  const target = phase === "work" ? threshold : phase === "hold" ? drawn : 0;
+  /* Tracking the finger is instant, because it is the finger. The spring is only ever the journey home. */
+  const sprung = useSpring(target, 58, still || phase === "hold");
+  /* clamped at zero: the content is at the top of its own scroller and there is nothing above it to reveal */
+  const at = Math.max(0, sprung);
+
+  /* The sheet slides down and the card follows it, growing by the same number, so the top edge stays put and the
+     bottom travels with the finger. It rides `sprung`, not the clamped `at`: that unclamped tail is the bounce.
+     The spring at tune 58 is under-damped, so on the way home it goes past zero before it settles, and the card
+     compresses a few pixels below its resting height (SQUASH is the padding it carries at rest to give back). */
+  const grow =
+    sprung >= 0
+      ? GROW * Math.tanh(sprung / GROW)
+      : /* the rebound is not damped: it is a short sharp give, and the same curve would flatten the one part that
+           is supposed to snap */
+        Math.max(-SQUASH, sprung);
+
+  /* how far through the gesture we are, and whether it has committed; read off the same number, so the ring and
+     the decision cannot disagree */
+  const p = clamp(at / threshold, 0, 1);
+  const armed = p >= 1;
+
+  /* One index feeds the balance, the change, the time and the dot on the line, so they cannot drift apart. It is
+     continuous: snapping to a reading moved the number in steps and the dot in hops, and the hops were the tell,
+     because the line under it is a smooth curve. */
+  const last = series.length - 1;
+  const shown = scrub ?? last;
+  const lo = Math.floor(shown);
+  const hi = Math.min(last, Math.ceil(shown));
+  const value = mix(series[lo], series[hi], shown - lo);
+  const change = value - series[0];
+  const up = change >= 0;
+  const pct = (change / series[0]) * 100;
+  const [whole, cents] = split(value);
+
+  /* The gesture is undecided until it has moved a few pixels, then becomes exactly one of three things: a pull, a
+     scroll (upward) or a scrub (sideways). Pointer capture keeps it from stranding mid-gesture, and one pixel of
+     upward jitter no longer throws it away. */
+  const DEADZONE = 4;
+
+  const start = (e: ReactPointerEvent) => {
+    const sc = scroll.current;
+    if (!sc || phase === "work" || sc.scrollTop > 0) return;
+    grab.current = { x: e.clientX, y: e.clientY, from: zoomOf(sc), on: false };
+  };
+
+  const move = (e: ReactPointerEvent) => {
+    const g = grab.current;
+    if (!g) return;
+    const dy = (e.clientY - g.y) / g.from;
+    const dx = (e.clientX - g.x) / g.from;
+
+    if (!g.on) {
+      /* upward: this is a scroll, not a pull */
+      if (dy < -DEADZONE) {
+        grab.current = null;
+        return;
+      }
+      /* sideways is a scrub: any sideways travel carries a pixel or two of downward drift, which used to commit a
+         pull and swallow the gesture. Whichever axis is winning owns it. */
+      if (Math.abs(dx) > DEADZONE && Math.abs(dx) > Math.abs(dy)) {
+        grab.current = null;
+        return;
+      }
+      if (dy < DEADZONE) return;
+      g.on = true;
+      /* the pointer is ours until it is released, wherever it goes */
+      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+      /* a pull is not a reading: put the card back on "now" */
+      setScrub(null);
+    }
+
+    setPhase("hold");
+    /* clamped rather than cancelled: pulling back past where you started is still the same pull */
+    setRaw(Math.max(0, dy));
+  };
+
+  const done = () => {
+    const g = grab.current;
+    if (!g) return;
+    grab.current = null;
+    setRaw(0);
+    /* an uncommitted press never pulled anything, so it has nothing to decide */
+    if (!g.on) return;
+    if (armed) refresh();
+    else setPhase("idle");
+  };
+
+  /* the outcome, immediately; the ring turning afterwards is a report on something that has already happened */
+  const refresh = () => {
+    setPhase("work");
+    setScrub(null);
+    window.clearTimeout(off.current);
+    off.current = window.setTimeout(() => {
+      /* the new figure lands with the spring back, not before it */
+      setRead(n => n + 1);
+      setPhase("idle");
+    }, 1150);
+  };
+
+  /* The scrub is read as a fraction of the plot's own box, so it needs no zoom correction: both sides of the
+     division are screen pixels. */
+  const onScrub = (e: ReactPointerEvent) => {
+    if (grab.current?.on || phase === "work") return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const t = clamp((e.clientX - r.left) / (r.width || 1), 0, 1);
+    setScrub(t * last);
+  };
+
+  /* Clamped rather than trusted. */
+  const n = Math.max(3, Math.min(10, Math.round(dots)));
+
+  /* The ring grows with the count: at ten dots a fixed radius would be crowded, so the radius takes a pixel and a
+     bit per dot above six and gives one back below it, keeping the gap between neighbours roughly constant. */
+  const ring = 12 + (n - DOTS) * 1.3;
+  /* the dots draw together as you pull and open back into a ring while it works */
+  const spread = phase === "work" ? ring : ring + 3 - p * 3;
+  /* the ring winds with the finger; while it works the whole group turns instead, on its own clock */
+  const turn = phase === "work" ? 0 : p * 220;
+  const c = curve(series, 100, 40, 4);
+  const dot = c.at(shown);
+
+  return (
+    <div
+      className="bn-bal"
+      ref={box}
+      data-phase={phase}
+      data-armed={armed}
+      data-flat={still || undefined}
+      style={
+        {
+          "--at": `${at.toFixed(2)}px`,
+          /* what the card's own height gains, rest padding included */
+          "--grow": `${(SQUASH + grow).toFixed(2)}px`,
+          /* how formed the ring is: 0 while the pull is barely started, 1 the moment it commits */
+          "--p": p.toFixed(3),
+          /* slow: 2.4s a turn at the default and never under 1.4, since a spinner that races reads as panic */
+          "--rpm": `${(3000 - (spin / 100) * 1200).toFixed(0)}ms`,
+          "--k": k,
+          /* one knob, two corners: the tab is 32 tall, so a radius past 16 is the same pill, and the default lands
+             on it */
+          "--bal-r": `${clamp(corner, 0, 40)}px`,
+          "--bal-tab-r": `${Math.min(16, clamp(corner, 0, 40) * 0.62).toFixed(2)}px`,
+        } as CSSProperties
+      }
+    >
+      {/* the indicator sits under the sheet and is revealed as the sheet is pulled down off it. Dots placed with
+          sine and cosine rather than by rotating each one, so a dot stays a dot at every angle; the ring turns as
+          one element, linearly. */}
+      <div className="bn-bal-goo" aria-hidden={phase === "idle"}>
+        {Array.from({ length: n }, (_, i) => {
+          const a = (((i / n) * 360 + turn) * Math.PI) / 180;
+          return (
+            <span
+              // biome-ignore lint/suspicious/noArrayIndexKey: a fixed ring of identical dots
+              key={i}
+              className="bn-bal-drop"
+              style={
+                {
+                  "--dx": (Math.sin(a) * spread).toFixed(2),
+                  "--dy": (-Math.cos(a) * spread).toFixed(2),
+                } as CSSProperties
+              }
+            />
+          );
+        })}
+      </div>
+
+      <div
+        className="bn-bal-scroll"
+        ref={scroll}
+        /* the keyboard route in: a drag is not something a keyboard can express */
+        tabIndex={0}
+        role="group"
+        aria-label="Carteira. Pressione Enter para atualizar."
+        onKeyDown={e => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          if (phase !== "work") refresh();
+        }}
+        onPointerDown={start}
+        onPointerMove={move}
+        onPointerUp={done}
+        onPointerCancel={done}
+        /* the last resort: capture can be taken away (another pointer, a scroll the browser decides to own) */
+        onLostPointerCapture={done}
+      >
+        <div className="bn-bal-sheet">
+          <p className="bn-bal-sum">
+            <span className="bn-bal-cur">R$</span>
+            {whole}
+            <span className="bn-bal-dec">{cents}</span>
+          </p>
+          {/* the change and, while you are reading the line back, when; same shape either way, so the row does not
+              reflow as you scrub across it */}
+          <p className="bn-bal-move" data-up={up}>
+            {signed(change)} · {percent(Math.abs(pct))}%
+            <span className="bn-bal-when">
+              {scrub === null ? WINDOWS[win].span : clock(offset + shown, day.length)}
+            </span>
+          </p>
+
+          {/* The svg stretches with preserveAspectRatio "none" so one 100-unit series fits any card width, and that
+              stretches everything: a circle inside it comes out an ellipse. The curve survives because a stroke can
+              opt out with vector-effect; a filled shape cannot. So the dot and the guide are elements over the top,
+              positioned from the same points the path was built from. */}
+          <span
+            className="bn-bal-plot"
+            data-up={up}
+            data-scrub={scrub !== null || undefined}
+            onPointerMove={onScrub}
+            onPointerDown={onScrub}
+            onPointerLeave={() => setScrub(null)}
+          >
+            <svg className="bn-bal-line" viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true">
+              <path className="bn-bal-curve" d={c.d} />
+            </svg>
+            {/* only while reading: a permanent guide is a second axis nobody asked for */}
+            <i className="bn-bal-guide" style={{ left: `${dot.x}%` }} />
+            {/* down the chart as a fraction, which the stylesheet resolves against the chart's height rather than
+                the plot's, which is 12px taller */}
+            <i className="bn-bal-tip" style={{ left: `${dot.x}%`, ["--tip" as string]: (dot.y / 40).toFixed(4) }} />
+          </span>
+
+          <div
+            className="bn-bal-win"
+            role="group"
+            aria-label="Janela de tempo"
+            style={{ "--win": win, "--win-n": WINDOWS.length } as CSSProperties}
+          >
+            {/* One pill that travels, rather than three backgrounds taking turns: a shape that moves says "this
+                one, and it came from that one". Placed by arithmetic in CSS, not by measuring: every tab is
+                `flex: 1`, and a translate in percent of the pill's own width is exactly one tab per step. */}
+            <span className="bn-bal-win-pill" aria-hidden="true" />
+            {WINDOWS.map((wdw, i) => (
+              <button
+                type="button"
+                key={wdw.id}
+                className="bn-bal-win-btn"
+                data-on={i === win || undefined}
+                aria-pressed={i === win}
+                onClick={() => {
+                  if (i === win) return;
+                  /* a window change is a different question, so the reading you were pointing at is no longer the
+                     one you meant */
+                  setScrub(null);
+                  setWin(i);
+                }}
+              >
+                {wdw.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}