@crievo/omni 0.1.3 → 0.1.4

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

@@ -0,0 +1,385 @@
+/* Slide to confirm: a handle you push across a track. It follows the pointer exactly, and past the mark it takes over
+   and finishes the journey itself.
+   Ported from bencho.dev (MIT).
+
+   The handle becomes the answer. On commit it unfurls leftward and fills the track it was crossing, and the arrow it
+   carried becomes a check: one object changing shape, so no second element is needed to say "done".
+   The right edge must not move meanwhile: the width grows by exactly what the offset loses (`GRIP + (anchor - x)`
+   against `PAD + x`), so the edge is stationary by arithmetic and not by two springs agreeing (two springs drifted
+   6.8px apart). */
+
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { animate, motion, useMotionValue, useTransform } from "motion/react";
+import { ArrowRight, Check } from "../icons";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+const SPAN = 280;
+const H = 56;
+/* the inset the handle keeps from the track, all four sides */
+const PAD = 4;
+/* the handle is sized by the height; widening the track buys travel, not a longer handle */
+const GRIP = H - PAD * 2;
+/* below this the centred label starts to sit under the resting handle */
+const MIN = 220;
+const MAX = 380;
+
+/* a pill, and the top of the corner knob */
+const CORNER = H / 2;
+const SPEED = 50;
+
+/* the dot sits 4px inside the track, so the ring around it is the whole budget for a hover: 3% of 48 is 0.7 a side */
+const SWELL = 1.03;
+
+/* how long the finished state stands before it resets */
+const HOLD = 1500;
+/* a refused action does not celebrate: the handle stays long enough to land, then goes home so the slide can be tried again */
+const REFUSED = 450;
+/* a fluid track still needs room for the label beside the resting handle, but no ceiling: it fills what it is given */
+const FLUID_MIN = 200;
+
+export function SlideToConfirm({
+  /* the track's corner, px; the handle's is this less the inset, which keeps the two curves parallel */
+  corner = CORNER,
+  /* how quickly it takes over once you let go, 0..100 */
+  speed = SPEED,
+  /* the track's length, px; the mark and the label and arrow fades are fractions of the travel, so all follow it.
+     "fill" takes the width of the container instead (measured, so the same maths holds at any size) */
+  width = SPAN,
+  /* the words on the track, and the verb in the label tells what leaves the studio: it is the whole warning */
+  label = "Deslize para confirmar",
+  /* what the finished handle says, and what it says while the action is still running */
+  doneLabel = "Confirmado",
+  busyLabel = "Enviando…",
+  /* the action is still running after the slide (the owner's own flag, for a request this component did not start) */
+  busy = false,
+  disabled = false,
+  /* runs once, only when the handle reaches the mark. A rejection, or a resolved `false`, means it did not go through:
+     the handle goes home without the check, ready for another try */
+  onConfirm,
+  className,
+}: {
+  corner?: number;
+  speed?: number;
+  width?: number | "fill";
+  label?: string;
+  doneLabel?: string;
+  busyLabel?: string;
+  busy?: boolean;
+  disabled?: boolean;
+  onConfirm?: () => Promise<unknown> | void;
+  className?: string;
+} = {}) {
+  const [done, setDone] = useState(false);
+  const [held, setHeld] = useState(false);
+  const [hot, setHot] = useState(false);
+  /* the action started by the commit: running, then how it ended (null until it has) */
+  const [running, setRunning] = useState(false);
+  const [outcome, setOutcome] = useState<boolean | null>(null);
+  const [measured, setMeasured] = useState(SPAN);
+  const root = useRef<HTMLDivElement | null>(null);
+  const alive = useRef(true);
+  const track = useRef<HTMLDivElement | null>(null);
+  /* the live grab: a ref, since it changes on every frame of a gesture */
+  const grip = useRef<{ id: number; grab: number | null; moved: boolean } | null>(null);
+  const beat = useRef(0);
+  /* the keyboard's slide is under way */
+  const sliding = useRef(false);
+
+  const x = useMotionValue(0);
+  /* where the handle planted itself: zero except while unfurling, then the offset it had when it committed */
+  const anchor = useMotionValue(0);
+  /* the settle: a dip of about 3% and back, so the unfurl lands instead of stopping. On the track, so the whole block
+     gives at once. Its own clock, not the spring's (the spring is nearly there for most of its run) */
+  const pulse = useMotionValue(1);
+  /* the arrow's own fade, so it leaves on the commit rather than on x */
+  const shown = useMotionValue(1);
+
+  /* the width is read every render: the derived values below re-run with it */
+  const fluid = width === "fill";
+  const span = fluid ? Math.max(FLUID_MIN, measured) : clamp(Math.round(width), MIN, MAX);
+  const working = running || busy;
+  const idle = !disabled || done;
+  /* a refused action leaves the handle blank on its way home: neither the check nor the spinner would be true */
+  const said = done && outcome !== false;
+  const TRAVEL = span - PAD * 2 - GRIP;
+
+  const r = clamp(corner, 0, CORNER);
+  /* `r - PAD`, floored at zero: at r = 0 both are square together */
+  const gripR = Math.max(0, r - PAD);
+  /* the end is the commit and there is no knob: firing at 60% would let a knock on the handle confirm */
+  const mark = TRAVEL;
+
+  /* speed, deliberately not bounce: the shape has a hard wall at both ends, and on commit the handle exactly fills the
+     track, so an overshoot came out of the left edge (42px outside at bounce 50). Damping is derived to sit on
+     critical at any stiffness: c = 2 * sqrt(k * m) */
+  const stiff = 260 + (clamp(speed, 0, 100) / 100) * 640;
+  const spring = {
+    type: "spring" as const,
+    stiffness: stiff,
+    damping: 2 * Math.sqrt(stiff * 0.9),
+    mass: 0.9,
+  };
+  /* the return is 0.62 of critical so it arrives with something left over; the overshoot never shows as movement
+     (`seen` clamps at the wall), it shows as the squash below */
+  const home = { ...spring, damping: 2 * Math.sqrt(stiff * 0.9) * 0.62 };
+
+  /* offsetWidth, not a rect: a rect is scaled by any transform above, and the maths below wants the laid-out width.
+     Before paint, so a fluid track never shows once at the demo width */
+  useLayoutEffect(() => {
+    const el = root.current;
+    if (!fluid || !el) return;
+    const read = () => setMeasured(Math.round(el.offsetWidth));
+    read();
+    const ro = new ResizeObserver(read);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [fluid]);
+
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      window.clearTimeout(beat.current);
+      loose.current?.();
+    };
+  }, []);
+
+  /* the finished state stands once the action has ended, not from the commit: while it runs the handle says so. The
+     reset waits for the owner's own busy flag too, so a request this component did not start is not cut short */
+  useEffect(() => {
+    if (!done || working || outcome === null) return;
+    beat.current = window.setTimeout(rewind, outcome ? HOLD : REFUSED);
+    return () => window.clearTimeout(beat.current);
+  }, [done, working, outcome]);
+
+  /* The drag is followed on the window. Pointer capture is best-effort (it throws on a synthetic id and a browser can
+     drop it mid-gesture), and a release landing elsewhere left the handle held at the far end forever. Listening on
+     the window means a release anywhere ends the drag. Bound at the press, not in an effect: an effect waits for the
+     commit, and a fast flick can put its first pointermove, the one that sets the grab offset, in that gap. */
+  const loose = useRef<(() => void) | null>(null);
+  /* handlers are rebuilt every render and the listeners are not, so they are reached through a ref */
+  const live = useRef<{
+    move: (e: PointerEvent) => void;
+    up: (e: PointerEvent) => void;
+  }>({ move: () => {}, up: () => {} });
+
+  const watch = () => {
+    loose.current?.();
+    const onMove = (e: PointerEvent) => live.current.move(e);
+    const onUp = (e: PointerEvent) => {
+      live.current.up(e);
+      loose.current?.();
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    loose.current = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+      loose.current = null;
+    };
+  };
+
+  /* everything else is read off x: the wash behind the handle, the label giving up its ink and the arrow fading near
+     the end are three readings of one number. Both readings clamp: `seen` is what the transform uses, `x` stays the
+     honest value the drag wrote */
+  const seen = useTransform(x, v => clamp(v, 0, TRAVEL));
+  const wide = useTransform([seen, anchor], ([v, a]: number[]) => GRIP + clamp(a - v, 0, TRAVEL));
+
+  /* the overshoot becomes a squash: at zero the handle is already against the end of its track, so the energy that
+     would carry it past turns into compression (the two scales multiply to keep area). Origin at the left edge, the
+     wall it hit. Capped at 8%: the return overshoots by about 18 units, so the cap is the squash (14 read as a squish) */
+  const over = useTransform(x, v => Math.max(0, -v));
+  const squash = useTransform(over, o => 1 - Math.min(0.08, o / 110));
+  const wash = useTransform(seen, v => v + GRIP);
+  const say = useTransform(seen, [0, TRAVEL * 0.55], [1, 0]);
+  /* read off x alone the arrow faded back in during the unfurl (x returns to zero), under the word that replaced it;
+     `shown` is switched by the commit itself */
+  const arrow = useTransform(
+    [seen, shown],
+    ([v, on]: number[]) => on * clamp(1 - (v - TRAVEL * 0.55) / (TRAVEL * 0.4), 0, 1),
+  );
+
+  /* the swell is multiplied into the squash transform instead of set as its own `scale` property, which applies first
+     and would move the handle along the track it sits on */
+  const sx = useTransform(squash, q => q * (hot && !held && !done ? SWELL : 1));
+  const sy = useTransform(squash, q => (1 / q) * (hot && !held && !done ? SWELL : 1));
+
+  const local = (clientX: number) => {
+    const box = track.current?.getBoundingClientRect();
+    if (!box) return 0;
+    /* the block can be drawn at a fraction of its own size: the rect's width against the laid-out width is that scale */
+    const k = box.width / span;
+    return (clientX - box.left) / (k || 1);
+  };
+
+  const finish = () => {
+    setDone(true);
+    /* x goes to zero and that is the whole morph: x loses TRAVEL while width gains it, so the right edge stays put.
+       Sending x to TRAVEL instead left the handle at the end AND grown to full width, spilling over its frame. Both
+       values ride the same spring, which keeps them in step frame by frame */
+    anchor.set(x.get());
+    animate(shown, 0, { duration: 0.16 });
+    animate(x, 0, spring);
+    animate(pulse, [1, 0.974, 1], {
+      duration: 0.42,
+      times: [0, 0.62, 1],
+      ease: [0.33, 0.55, 0.2, 1],
+      /* a beat behind the unfurl, so the landing dips rather than the take-off */
+      delay: 0.1,
+    });
+    setOutcome(null);
+    setRunning(true);
+    Promise.resolve()
+      .then(onConfirm)
+      .then(
+        r => r !== false,
+        () => false,
+      )
+      .then(ok => {
+        if (!alive.current) return;
+        setRunning(false);
+        setOutcome(ok);
+      });
+  };
+
+  /* the reset is the anchor coming home with x already at zero: the right edge sweeps left, the unfurl backwards */
+  const rewind = () => {
+    setDone(false);
+    setOutcome(null);
+    animate(shown, 1, { duration: 0.22, delay: 0.12 });
+    animate(anchor, 0, { type: "spring", stiffness: 380, damping: 34, mass: 0.9 });
+  };
+
+  const down = (e: ReactPointerEvent) => {
+    if (done || disabled) return;
+    e.stopPropagation();
+    /* no offset yet: it is taken at the first move, so a press away from the handle does not teleport it; that move
+       asks for the position the handle already has and every later one is a delta */
+    grip.current = { id: e.pointerId, grab: null, moved: false };
+    setHeld(true);
+    /* throws on a pointer id that is not live (a synthetic event); the drag works without it */
+    try {
+      track.current?.setPointerCapture(e.pointerId);
+    } catch {
+      /* not live */
+    }
+    watch();
+  };
+
+  /* both handlers take the native event too, since the ones that matter arrive from the window */
+  const move = (e: PointerEvent | ReactPointerEvent) => {
+    const g = grip.current;
+    if (!g || g.id !== e.pointerId) return;
+    const at = local(e.clientX);
+    if (g.grab === null) {
+      g.grab = at - x.get();
+      return;
+    }
+    const next = clamp(at - g.grab, 0, TRAVEL);
+    if (Math.abs(next - x.get()) > 0.5) g.moved = true;
+    x.set(next);
+  };
+
+  const up = (e: PointerEvent | ReactPointerEvent) => {
+    const g = grip.current;
+    if (!g) return;
+    grip.current = null;
+    /* the release throws when the pointer was never captured; unguarded it left the handle stuck where the drag ended */
+    try {
+      track.current?.releasePointerCapture?.(e.pointerId);
+    } catch {
+      /* never captured */
+    }
+    setHeld(false);
+    if (x.get() >= mark) finish();
+    else animate(x, 0, home);
+  };
+
+  live.current = { move, up };
+
+  /* Enter and Space on the handle: the same journey, taken by the code. It runs to the end of the track and commits from
+     there, so the unfurl starts from the same place as a drag's. (A click is not used: a drag that ends on the handle
+     clicks too.) */
+  const key = (e: ReactKeyboardEvent) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    if (done || disabled || e.repeat || grip.current || sliding.current) return;
+    sliding.current = true;
+    animate(x, TRAVEL, spring).then(() => {
+      sliding.current = false;
+      if (alive.current) finish();
+    });
+  };
+
+  return (
+    <div
+      className={className ? `bn-sld ${className}` : "bn-sld"}
+      ref={root}
+      style={{ width: fluid ? "100%" : span, height: H }}
+      data-disabled={!idle || undefined}
+    >
+      <motion.div
+        className="bn-sld-track"
+        ref={track}
+        style={{ borderRadius: r, scale: pulse }}
+        data-held={held || undefined}
+        data-done={done || undefined}
+        onPointerDown={down}
+      >
+        {/* the ground already covered: it ends at the handle, not under it */}
+        <motion.i className="bn-sld-wash" aria-hidden="true" style={{ width: wash, borderRadius: gripR }} />
+
+        <motion.span className="bn-sld-say" style={{ opacity: say }}>
+          {label}
+        </motion.span>
+
+        <motion.button
+          type="button"
+          className="bn-sld-grip"
+          disabled={!idle}
+          aria-busy={(done && working) || undefined}
+          onKeyDown={key}
+          onPointerEnter={() => setHot(true)}
+          onPointerLeave={() => setHot(false)}
+          style={{
+            x: seen,
+            scaleX: sx,
+            scaleY: sy,
+            /* the morph is one number: `wide` is read off x and the anchor, so the width is arithmetic on the value
+               the spring already moves. A scale would drag the corner radius with it */
+            width: wide,
+            borderRadius: gripR,
+          }}
+          transition={{ type: "spring", stiffness: 380, damping: 34, mass: 0.7 }}
+          aria-label={done ? (working ? busyLabel : doneLabel) : label}
+        >
+          <motion.span className="bn-sld-arrow" style={{ opacity: arrow }} aria-hidden="true">
+            <ArrowRight size={20} weight="bold" />
+          </motion.span>
+
+          {/* the word only exists once there is room for it, and arrives with the width rather than after it */}
+          <motion.span
+            className="bn-sld-done"
+            aria-hidden="true"
+            initial={false}
+            animate={{ opacity: said ? 1 : 0, scale: said ? 1 : 0.7 }}
+            transition={{ duration: 0.16, ease: [0.33, 0.55, 0.2, 1] }}
+          >
+            {working ? <i className="bn-sld-spin" /> : <Check size={20} weight="bold" />}
+            {working ? busyLabel : doneLabel}
+          </motion.span>
+        </motion.button>
+      </motion.div>
+    </div>
+  );
+}