@crievo/omni 0.1.3 → 0.1.5

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

@@ -0,0 +1,705 @@
+/* Hold to record. The pill opens into a bar and the level rises in it as bars, newest on the right. Let go and the
+   recording becomes a clip: press play and the bars light up as the playhead passes them, drag across them to scrub.
+   Slide left while holding and it is thrown away: the bars collapse and the pill closes back to where it started.
+   Ported from bencho.dev (MIT).
+
+   A concept, not a recorder: nothing listens. The level is a stand-in shaped like speech (syllables inside phrases,
+   with pauses), so the block is about the gesture and the shapes, and asks nobody for a microphone.
+
+   The playhead is a number, not a render: progress is one CSS variable on the wave, and each bar decides its own
+   brightness from it and its index in calc(). Playing costs no React renders at all.
+
+   Two ways to use it. With no `state` it is the demo above, alone. With `state` it is controlled, a real recorder's
+   face: the parent owns the microphone and the clip and tells the pill where it is (idle, recording, clip), how loud
+   (`level`), how long (`elapsed`) and what to play (`audioUrl`); the pill reports `onStart`, `onStop`, `onCancel`,
+   `onDiscard`. `mode="tap"` swaps the hold gesture for tap to start and tap to stop (the studio records 30 s to
+   3 min, nobody holds a pill that long): the slide to throw away becomes a cancel button. */
+
+import { type CSSProperties, useEffect, useRef, useState } from "react";
+import { Microphone, X } from "../icons";
+
+/* 56 tall and 17px type, the Slide to confirm pill's size, so the pills read as one family */
+const H = 56;
+const IDLE_W = 216;
+const OPEN_W = 300;
+/* the tap pill carries a stop and a cancel button (and "record another" on the clip) that the hold pill does not */
+const OPEN_W_TAP = 340;
+/* one bar per sample while recording */
+const SAMPLE = 70;
+/* pointer travel, in px, that throws the recording away */
+const CANCEL = 90;
+/* shorter than this is a tap, not a recording */
+const MIN_MS = 500;
+const MAX_MS = 30000;
+
+type Phase = "idle" | "rec" | "cancel" | "clip";
+type Clip = { raw: number[]; ms: number };
+
+const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v));
+
+/* speech, roughly: syllables inside phrases, and gaps between */
+function standIn(t: number) {
+  const syll = Math.abs(Math.sin(t * 6.1) * Math.sin(t * 1.9 + 0.7));
+  const phrase = Math.sin(t * 0.9 + 0.4) > -0.55 ? 1 : 0.1;
+  return Math.min(1, 0.06 + syll * phrase * (0.5 + Math.random() * 0.5));
+}
+
+/* n bars from however many samples, each the loudest it covers */
+function resample(src: number[], n: number) {
+  if (!src.length) return Array(n).fill(0);
+  return Array.from({ length: n }, (_, i) => {
+    const a = Math.floor((i * src.length) / n);
+    const b = Math.max(a + 1, Math.floor(((i + 1) * src.length) / n));
+    let m = 0;
+    for (let k = a; k < b && k < src.length; k++) m = Math.max(m, src[k]);
+    return m;
+  });
+}
+
+const fmt = (ms: number) => {
+  const s = Math.floor(ms / 1000);
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+};
+
+/* Play into pause, drawn: the same two quadrilaterals, wound the same way, the pause's bars and the play triangle
+   split down its own axis. */
+const PLAY = [
+  [7, 4, 13, 7.6, 13, 16.4, 7, 20],
+  [13, 7.6, 19, 12, 19, 12, 13, 16.4],
+];
+const PAUSE = [
+  [7, 5, 10.5, 5, 10.5, 19, 7, 19],
+  [13.5, 5, 17, 5, 17, 19, 13.5, 19],
+];
+
+function PlayMark({ on }: { on: boolean }) {
+  const [t, setT] = useState(on ? 1 : 0);
+  const now = useRef(t);
+  now.current = t;
+  useEffect(() => {
+    const from = now.current;
+    const to = on ? 1 : 0;
+    const t0 = performance.now();
+    let raf = 0;
+    const step = (ts: number) => {
+      const u = Math.min(1, (ts - t0) / 220);
+      setT(from + (to - from) * (1 - (1 - u) ** 4));
+      if (u < 1) raf = requestAnimationFrame(step);
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [on]);
+  const d = PLAY.map((q, k) => {
+    const p = q.map((v, i) => (v + (PAUSE[k][i] - v) * t).toFixed(2));
+    return `M${p[0]} ${p[1]}L${p[2]} ${p[3]}L${p[4]} ${p[5]}L${p[6]} ${p[7]}Z`;
+  }).join("");
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+      <path d={d} fill="currentColor" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+/* the stop control: a rounded square, the way the play mark is a rounded triangle */
+function StopMark() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="5" y="5" width="14" height="14" rx="3" fill="currentColor" />
+    </svg>
+  );
+}
+
+/* the capsule filled, the stand drawn: solid like the play mark it becomes a clip beside, rather than an outline */
+function MicMark() {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.2"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <rect x="8.5" y="2" width="7" height="12.5" rx="3.5" fill="currentColor" stroke="none" />
+      <path d="M5 11.5a7 7 0 0 0 14 0" />
+      <path d="M12 18.5V22" />
+    </svg>
+  );
+}
+
+export type VoiceNoteState = "idle" | "recording" | "clip";
+
+export type VoiceNoteProps = {
+  /* how many bars the wave is drawn with */
+  bars?: number;
+  /* how tall a given level draws, 0..100 */
+  gain?: number;
+  /* how far the pill overshoots as it opens and closes, 0..100 */
+  bounce?: number;
+  corner?: number;
+  /* "hold": press and hold, slide left to throw away. "tap": tap to start, tap to stop, a cancel button */
+  mode?: "hold" | "tap";
+  /* giving a state makes the pill controlled: it stops simulating and follows the props below */
+  state?: VoiceNoteState;
+  onStart?: () => void;
+  /* the recording ended on purpose; the parent turns it into state "clip" (or back to "idle" if it was too short) */
+  onStop?: () => void;
+  /* the recording was thrown away before it became a clip; the parent drops it */
+  onCancel?: () => void;
+  /* the clip's discard button; the parent drops the clip and goes back to "idle" */
+  onDiscard?: () => void;
+  /* a "record another" button on the clip, for a parent that keeps several takes */
+  onAgain?: () => void;
+  /* live microphone level, 0..1, while state is "recording" */
+  level?: number;
+  /* seconds recorded so far */
+  elapsed?: number;
+  /* the recording is stopped when it gets here */
+  maxSeconds?: number;
+  /* what the clip plays, and how long it is in seconds (a MediaRecorder blob does not know its own length) */
+  audioUrl?: string;
+  duration?: number;
+  disabled?: boolean;
+  /* a line under the pill, in red, for a microphone that is blocked or missing */
+  error?: string;
+  /* the idle label */
+  idleLabel?: string;
+  className?: string;
+};
+
+export function VoiceNote(props: VoiceNoteProps = {}) {
+  const {
+    bars = 28,
+    gain = 60,
+    bounce = 40,
+    corner = H / 2,
+    mode = "hold",
+    state,
+    onAgain,
+    level = 0,
+    elapsed = 0,
+    audioUrl,
+    duration = 0,
+    disabled,
+    error,
+    idleLabel,
+    className,
+  } = props;
+  const controlled = state !== undefined;
+  const tap = mode === "tap";
+
+  const [phase, setPhase] = useState<Phase>("idle");
+  const [levels, setLevels] = useState<number[]>([]);
+  const [ms, setMs] = useState(0);
+  const [clip, setClip] = useState<Clip | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [pull, setPull] = useState(0);
+  const pullRef = useRef(0);
+
+  const ph = useRef<Phase>("idle");
+  const raw = useRef<number[]>([]);
+  const t0 = useRef(0);
+  const timer = useRef(0);
+  const later = useRef(0);
+  const x0 = useRef(0);
+  const root = useRef<HTMLDivElement>(null);
+  const wave = useRef<HTMLDivElement>(null);
+  const time = useRef<HTMLSpanElement>(null);
+  const prog = useRef(0);
+  const praf = useRef(0);
+  const scrub = useRef(false);
+  const clipRef = useRef<Clip | null>(null);
+  clipRef.current = clip;
+  /* the latest props, for the sampling interval and the audio events that outlive a render */
+  const live = useRef(props);
+  live.current = props;
+  const audio = useRef<{ el: HTMLAudioElement; url: string } | null>(null);
+  /* a click that put focus in the pill: the control it lands on is replaced as the phase changes, and the
+     keyboard should not be dropped on the page when it is */
+  const focusIn = useRef(false);
+
+  const go = (p: Phase) => {
+    ph.current = p;
+    setPhase(p);
+  };
+
+  const n = Math.round(clamp(bars, 12, 48));
+  const g = 0.4 + (clamp(gain, 0, 100) / 100) * 1.2;
+  const r = clamp(corner, 0, H / 2);
+  /* the play disc sits 6 inside: concentric once there is a curve to follow, square with the pill when there is not */
+  const inner = Math.max(0, r - 6 * Math.min(1, r / 12));
+
+  /* the clip's length: the parent's number when it gave one, else what the pill timed */
+  const clipMs = () =>
+    live.current.duration && live.current.duration > 0 ? live.current.duration * 1000 : (clipRef.current?.ms ?? 0);
+
+  const stopPlay = () => {
+    cancelAnimationFrame(praf.current);
+    praf.current = 0;
+    audio.current?.el.pause();
+    setPlaying(false);
+  };
+
+  useEffect(
+    () => () => {
+      clearInterval(timer.current);
+      clearTimeout(later.current);
+      cancelAnimationFrame(praf.current);
+      audio.current?.el.pause();
+    },
+    [],
+  );
+
+  /* another clip: the old one's audio is not this one's */
+  // biome-ignore lint/correctness/useExhaustiveDependencies: audioUrl is the trigger, the body only drops the element
+  useEffect(() => {
+    if (audio.current && audio.current.url !== audioUrl) {
+      audio.current.el.pause();
+      audio.current = null;
+      cancelAnimationFrame(praf.current);
+      praf.current = 0;
+      setPlaying(false);
+    }
+  }, [audioUrl]);
+
+  const paintProg = () => {
+    wave.current?.style.setProperty("--prog", prog.current.toFixed(4));
+    const len = clipMs();
+    if (time.current && len) {
+      const p = prog.current;
+      time.current.textContent = fmt(p > 0 && p < 1 ? p * len : len);
+    }
+  };
+
+  const close = (_how: "whisk" | "tock") => {
+    go("cancel");
+    clearTimeout(later.current);
+    later.current = window.setTimeout(() => {
+      setClip(null);
+      pullRef.current = 0;
+      setPull(0);
+      go("idle");
+    }, 360);
+  };
+
+  /* the level history the bars draw: the stand-in when alone, the parent's microphone when controlled */
+  const sample = () => {
+    clearInterval(timer.current);
+    raw.current = [];
+    setLevels([]);
+    setMs(0);
+    setClip(null);
+    pullRef.current = 0;
+    setPull(0);
+    t0.current = performance.now();
+    timer.current = window.setInterval(() => {
+      const took = performance.now() - t0.current;
+      const l = live.current;
+      if (controlled) {
+        raw.current.push(clamp(l.level ?? 0, 0, 1));
+        setMs((l.elapsed ?? 0) * 1000);
+        if (l.maxSeconds && (l.elapsed ?? 0) >= l.maxSeconds) {
+          clearInterval(timer.current);
+          l.onStop?.();
+        }
+      } else {
+        raw.current.push(standIn(took / 1000));
+        setMs(took);
+        if (took >= MAX_MS) end(false);
+      }
+      setLevels(raw.current.slice(-64));
+    }, SAMPLE);
+  };
+
+  const keepClip = (len: number) => {
+    clearInterval(timer.current);
+    prog.current = 0;
+    setClip({ raw: raw.current.slice(), ms: len });
+    pullRef.current = 0;
+    setPull(0);
+    go("clip");
+  };
+
+  const end = (cancel: boolean) => {
+    if (ph.current !== "rec") return;
+    clearInterval(timer.current);
+    if (controlled) {
+      /* the clip, if there is one, arrives as state "clip" */
+      if (cancel) {
+        live.current.onCancel?.();
+        close("whisk");
+      } else {
+        live.current.onStop?.();
+      }
+      return;
+    }
+    const took = performance.now() - t0.current;
+    if (cancel || took < MIN_MS) {
+      close(cancel ? "whisk" : "tock");
+      return;
+    }
+    keepClip(took);
+  };
+
+  const begin = () => {
+    if (ph.current !== "idle" || disabled) return;
+    if (controlled) {
+      live.current.onStart?.();
+      return;
+    }
+    stopPlay();
+    sample();
+    go("rec");
+  };
+
+  /* controlled: the parent's state is the truth, the phase only follows it (and animates the way in and out) */
+  // biome-ignore lint/correctness/useExhaustiveDependencies: state and phase are the triggers; the helpers are re-made each render
+  useEffect(() => {
+    if (!controlled) return;
+    if (state === "recording") {
+      if (phase === "idle" || phase === "clip") {
+        stopPlay();
+        sample();
+        go("rec");
+      }
+    } else if (state === "clip") {
+      if (phase === "rec")
+        keepClip(live.current.duration ? live.current.duration * 1000 : (live.current.elapsed ?? 0) * 1000);
+      else if (phase === "idle") {
+        raw.current = [];
+        keepClip(clipMs());
+      }
+    } else if (phase === "rec") {
+      /* it ended without becoming a clip: thrown away, or too short */
+      clearInterval(timer.current);
+      close("tock");
+    } else if (phase === "clip") {
+      stopPlay();
+      close("whisk");
+    }
+  }, [controlled, state, phase]);
+
+  /* a click left focus in the pill: hand it to the control that replaces the one that just went */
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the phase is the trigger
+  useEffect(() => {
+    if (!tap || !focusIn.current) return;
+    const el = root.current;
+    if (!el) return;
+    const target =
+      phase === "rec"
+        ? el.querySelector<HTMLElement>(".bn-vn-stop")
+        : phase === "clip"
+          ? el.querySelector<HTMLElement>(".bn-vn-play")
+          : phase === "idle"
+            ? el
+            : null;
+    target?.focus({ preventScroll: true });
+  }, [phase, tap]);
+
+  const el = () => {
+    if (!audioUrl) return null;
+    if (audio.current?.url !== audioUrl) {
+      const a = new Audio(audioUrl);
+      a.preload = "auto";
+      audio.current = { el: a, url: audioUrl };
+    }
+    return audio.current.el;
+  };
+
+  const toggle = () => {
+    const len = clipMs();
+    if (!clipRef.current || !len) return;
+    if (praf.current) {
+      stopPlay();
+      return;
+    }
+    if (prog.current >= 1) prog.current = 0;
+    const a = el();
+    if (a) {
+      try {
+        a.currentTime = prog.current * (len / 1000);
+      } catch {
+        /* not seekable yet */
+      }
+      a.onended = () => {
+        prog.current = 1;
+        paintProg();
+        stopPlay();
+      };
+      a.play().catch(stopPlay);
+    }
+    setPlaying(true);
+    let prev = performance.now();
+    const step = (ts: number) => {
+      if (!scrub.current) {
+        /* with sound the audio is the clock, and never reads as finished before it says so */
+        prog.current = a
+          ? Math.min(0.999, a.currentTime / (len / 1000))
+          : Math.min(1, prog.current + (ts - prev) / len);
+      }
+      prev = ts;
+      paintProg();
+      if (!a && prog.current >= 1) {
+        stopPlay();
+        return;
+      }
+      praf.current = requestAnimationFrame(step);
+    };
+    praf.current = requestAnimationFrame(step);
+  };
+
+  const seek = (clientX: number) => {
+    const w = wave.current;
+    if (!w || !clipRef.current) return;
+    const b = w.getBoundingClientRect();
+    prog.current = clamp((clientX - b.left) / b.width, 0, 1);
+    const a = audio.current?.el;
+    if (a) {
+      try {
+        a.currentTime = prog.current * (clipMs() / 1000);
+      } catch {
+        /* not seekable yet */
+      }
+    }
+    paintProg();
+  };
+
+  const discard = () => {
+    stopPlay();
+    live.current.onDiscard?.();
+    close("whisk");
+  };
+
+  /* the bars */
+  const bar = (v: number, i: number, key: string | number) => (
+    <i key={key} className="bn-vn-bar" style={{ "--l": clamp(v * g, 0, 1).toFixed(3), "--i": i } as CSSProperties} />
+  );
+
+  /* recording: the last n samples, right-aligned, and the rest of the row the resting dot a bar starts from */
+  const recBars = () => {
+    const start = raw.current.length - levels.length;
+    const out = [];
+    for (let j = 0; j < n; j++) {
+      const k = levels.length - n + j;
+      out.push(k >= 0 ? bar(levels[k], j, start + k) : bar(0, j, `e${j}`));
+    }
+    return out;
+  };
+
+  const shift = -pull * CANCEL * 0.5;
+  const armed = pull >= 1;
+  const open = phase !== "idle";
+  const showClip = clip && (phase === "clip" || phase === "cancel");
+  const asButton = phase === "idle" || (phase === "rec" && !tap);
+  const shown = clipMs() || clip?.ms || 0;
+
+  return (
+    <div className={`bn-vn-frame${className ? ` ${className}` : ""}`} data-mode={mode}>
+      <div
+        ref={root}
+        className="bn-vn"
+        data-phase={phase}
+        data-mode={mode}
+        data-disabled={disabled || undefined}
+        role={asButton ? "button" : undefined}
+        tabIndex={asButton && !disabled ? 0 : -1}
+        aria-disabled={asButton && disabled ? true : undefined}
+        aria-label={
+          phase === "rec"
+            ? tap
+              ? undefined
+              : "Gravando. Solte para manter, Esc para descartar."
+            : phase === "idle"
+              ? tap
+                ? (idleLabel ?? "Gravar")
+                : "Segure para gravar uma nota de voz"
+              : undefined
+        }
+        style={
+          {
+            "--w": `${open ? (tap ? OPEN_W_TAP : OPEN_W) : IDLE_W}px`,
+            "--r": `${r}px`,
+            "--inner": `${inner}px`,
+            "--ov": (1 + (clamp(bounce, 0, 100) / 100) * 0.7).toFixed(3),
+            "--pull": pull.toFixed(3),
+          } as CSSProperties
+        }
+        onClick={() => {
+          if (tap && ph.current === "idle") begin();
+        }}
+        onPointerDown={e => {
+          if (tap || ph.current !== "idle" || disabled) return;
+          try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+          } catch {
+            /* a scripted pointer */
+          }
+          x0.current = e.clientX;
+          begin();
+        }}
+        onPointerMove={e => {
+          if (tap || ph.current !== "rec") return;
+          const p = clamp((x0.current - e.clientX) / CANCEL, 0, 1);
+          /* all the way arms it (a tick as it catches) and sliding back disarms; letting go is what decides */
+          pullRef.current = p;
+          setPull(p);
+        }}
+        onPointerUp={e => {
+          if (tap) return;
+          try {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+          } catch {
+            /* never captured */
+          }
+          end(pullRef.current >= 1);
+        }}
+        onPointerCancel={() => {
+          if (!tap) end(false);
+        }}
+        onKeyDown={e => {
+          if (e.target !== e.currentTarget && e.key !== "Escape") return;
+          if ((e.key === " " || e.key === "Enter") && !e.repeat && ph.current === "idle") {
+            e.preventDefault();
+            begin();
+          } else if (e.key === "Escape" && ph.current === "rec") {
+            /* a dialog around the pill would take Esc as "close" */
+            e.stopPropagation();
+            end(true);
+          }
+        }}
+        onKeyUp={e => {
+          /* only while recording: the play and discard buttons inside act on keyup, and this would swallow it */
+          if (!tap && (e.key === " " || e.key === "Enter") && ph.current === "rec") {
+            e.preventDefault();
+            end(false);
+          }
+        }}
+        onFocusCapture={() => {
+          focusIn.current = true;
+        }}
+        onBlurCapture={e => {
+          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusIn.current = false;
+        }}
+        onBlur={() => {
+          if (!tap && ph.current === "rec") end(false);
+        }}
+        onContextMenu={e => e.preventDefault()}
+      >
+        {phase === "idle" && (
+          <span key="idle" className="bn-vn-in bn-vn-idle">
+            <MicMark />
+            {tap ? (idleLabel ?? "Gravar") : "Segure para gravar"}
+          </span>
+        )}
+
+        {(phase === "rec" || (phase === "cancel" && !clip)) && (
+          <span key="rec" className="bn-vn-in bn-vn-rec" style={{ translate: `${shift}px 0` }}>
+            <span className="bn-vn-dot" />
+            <span className="bn-vn-time">{fmt(ms)}</span>
+            <span className="bn-vn-wave" style={{ "--n": n } as CSSProperties}>
+              {recBars()}
+            </span>
+            {tap && (
+              <>
+                <button type="button" className="bn-vn-x" aria-label="Descartar a gravação" onClick={() => end(true)}>
+                  <X size={18} weight="bold" />
+                </button>
+                <button
+                  type="button"
+                  className="bn-vn-play bn-vn-stop"
+                  aria-label="Parar a gravação"
+                  onClick={() => end(false)}
+                >
+                  <StopMark />
+                </button>
+              </>
+            )}
+          </span>
+        )}
+
+        {/* slid all the way: the cancel mark takes the dot's place. It sits on the pill rather than in the sliding
+            row, which by now has gone half out of the left edge */}
+        {!tap && (phase === "rec" || (phase === "cancel" && !clip)) && (
+          <span className="bn-vn-cancel" data-on={armed || undefined} aria-hidden="true">
+            <X size={16} weight="bold" />
+          </span>
+        )}
+
+        {showClip && (
+          <span key="clip" className="bn-vn-in bn-vn-clip">
+            <button type="button" className="bn-vn-play" aria-label={playing ? "Pausar" : "Tocar"} onClick={toggle}>
+              <PlayMark on={playing} />
+            </button>
+            <span
+              ref={wave}
+              className="bn-vn-wave bn-vn-scrub"
+              style={{ "--n": n, "--prog": prog.current } as CSSProperties}
+              onPointerDown={e => {
+                try {
+                  e.currentTarget.setPointerCapture(e.pointerId);
+                } catch {
+                  /* a scripted pointer */
+                }
+                scrub.current = true;
+                seek(e.clientX);
+              }}
+              onPointerMove={e => {
+                if (scrub.current) seek(e.clientX);
+              }}
+              onPointerUp={e => {
+                try {
+                  e.currentTarget.releasePointerCapture(e.pointerId);
+                } catch {
+                  /* never captured */
+                }
+                scrub.current = false;
+              }}
+              onPointerCancel={() => {
+                scrub.current = false;
+              }}
+            >
+              {resample(clip.raw, n).map((v, i) => bar(v, i, i))}
+            </span>
+            <span ref={time} className="bn-vn-time">
+              {fmt(shown)}
+            </span>
+            {onAgain && (
+              <button
+                type="button"
+                className="bn-vn-x"
+                aria-label="Gravar outra"
+                onClick={() => {
+                  stopPlay();
+                  onAgain();
+                }}
+              >
+                <Microphone size={18} weight="bold" />
+              </button>
+            )}
+            <button type="button" className="bn-vn-x" aria-label="Descartar" onClick={discard}>
+              <X size={18} weight="bold" />
+            </button>
+          </span>
+        )}
+      </div>
+      {!tap && (
+        <span
+          className="bn-vn-hint"
+          data-on={phase === "rec" || undefined}
+          data-armed={(phase === "rec" && armed) || undefined}
+          style={{ "--pull": pull.toFixed(3) } as CSSProperties}
+          aria-hidden="true"
+        >
+          {phase === "rec" && armed ? "Solte para cancelar" : "‹ Deslize para cancelar"}
+        </span>
+      )}
+      {error && (
+        <p className="bn-vn-note" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}