@crievo/omni 0.1.2 → 0.1.4

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

@@ -0,0 +1,342 @@
+/* An alert-volume card: a stack of four sources for every day (or week), and under the baseline the few that bounced.
+   Ported from bencho.dev (MIT).
+
+   Run along it: the column under the pointer gets a ring round its whole stack, the rest step back (their colour
+   mixed toward the slab, never faded), and one tooltip glides beside it on a spring with the date, the total and what
+   made it up. Day / Week swaps the dataset; every segment eases to its new height and offset a beat after its left
+   neighbour, and the same transition grows the bars out of the baseline the first time the card is seen. */
+
+import { type CSSProperties, type PointerEvent, useEffect, useMemo, useRef, useState } from "react";
+import { animate, motion, useMotionValue } from "motion/react";
+
+const W = 300;
+const PAD = 16;
+const CW = W - PAD * 2; // the plot's width
+const CH = 104; // room above the baseline
+const BH = 22; // room below it for the bounced bars
+const SEG_GAP = 2;
+const LIFT = 2; // air between the baseline and the bars either side of it
+const TIP_W = 132;
+const SPRING = { type: "spring" as const, stiffness: 380, damping: 34 };
+
+const CATS = ["Direto", "Busca", "Social", "E-mail"] as const;
+const MONTHS = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
+const LAST = Date.UTC(2026, 9, 11); // the last day shown, Oct 11
+const DAY_MS = 86400000;
+
+type Mode = "Day" | "Week";
+type Bar = { vals: number[]; esc: number; label: string; short: string };
+
+const MODES: { id: Mode; label: string }[] = [
+  { id: "Day", label: "Dia" },
+  { id: "Week", label: "Semana" },
+];
+
+/* a small seeded generator: the same chart on every load */
+function mulberry(seed: number) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+const fmtDay = (ms: number) => {
+  const d = new Date(ms);
+  return `${d.getUTCDate()} ${MONTHS[d.getUTCMonth()]}`;
+};
+
+function makeBars(mode: Mode, n: number): Bar[] {
+  const rnd = mulberry(mode === "Day" ? 4396 : 9117);
+  const base = [520, 360, 210, 260];
+  const out: Bar[] = [];
+  for (let i = 0; i < 30; i++) {
+    /* only the last n are kept, so the data does not reshuffle with the count */
+    const back = 29 - i;
+    if (mode === "Day") {
+      const ms = LAST - back * DAY_MS;
+      const wd = new Date(ms).getUTCDay();
+      const quiet = wd === 0 || wd === 6 ? 0.55 : 1;
+      const surge = rnd() < 0.12 ? 1.5 : 1;
+      const vals = base.map((b, k) => Math.round(b * quiet * (0.6 + rnd() * 0.8) * (k === 3 ? surge * surge : surge)));
+      const esc = Math.round(3 + rnd() * 9 * quiet * surge);
+      out.push({ vals, esc, label: fmtDay(ms), short: fmtDay(ms) });
+    } else {
+      const end = LAST - back * 7 * DAY_MS;
+      const start = end - 6 * DAY_MS;
+      const vals = base.map(b => Math.round(b * 5.6 * (0.75 + rnd() * 0.5)));
+      const esc = Math.round(30 + rnd() * 44);
+      const s = new Date(start);
+      const e = new Date(end);
+      const label =
+        s.getUTCMonth() === e.getUTCMonth()
+          ? `${s.getUTCDate()} – ${fmtDay(end)}`
+          : `${fmtDay(start)} – ${fmtDay(end)}`;
+      out.push({ vals, esc, label, short: fmtDay(start) });
+    }
+  }
+  return out.slice(30 - n);
+}
+
+const fmt = (v: number) => Math.round(v).toLocaleString("pt-BR");
+const sum = (a: number[]) => a.reduce((s, v) => s + v, 0);
+
+export function StackedBars({
+  colour = "Colour",
+  bars = 20,
+  gap = 6,
+}: {
+  colour?: "Mono" | "Colour";
+  bars?: number;
+  gap?: number;
+}) {
+  const n = Math.max(2, Math.round(bars));
+  const [mode, setMode] = useState<Mode>("Day");
+  const [at, setAt] = useState<number | null>(null);
+  const [seen, setSeen] = useState(false);
+  const root = useRef<HTMLDivElement | null>(null);
+  const plot = useRef<HTMLDivElement | null>(null);
+
+  /* grow in once, the first time the card is on screen */
+  useEffect(() => {
+    const el = root.current;
+    if (!el || seen) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setSeen(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      ([e]) => {
+        if (e.isIntersecting) {
+          setSeen(true);
+          io.disconnect();
+        }
+      },
+      { threshold: 0.3 },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [seen]);
+
+  const data = useMemo(() => makeBars(mode, n), [mode, n]);
+
+  /* geometry: the gap gives way before a bar gets thinner than 3px, so 30 bars at the widest gap still draw */
+  const g = Math.max(1, Math.min(gap, (CW - 3 * n) / (n - 1)));
+  const bw = (CW - g * (n - 1)) / n;
+  const r = Math.min(2.5, bw / 2);
+  const totals = data.map(b => sum(b.vals));
+  const maxT = Math.max(...totals);
+  const maxE = Math.max(...data.map(b => b.esc));
+  const scale = (CH - LIFT - 2 - SEG_GAP * (CATS.length - 1)) / maxT;
+  const layout = data.map(b => {
+    let y = 0;
+    const segs = b.vals.map(v => {
+      const h = Math.max(2, v * scale);
+      const s = { bottom: y, h };
+      y += h + SEG_GAP;
+      return s;
+    });
+    return { segs, top: y - SEG_GAP, esc: Math.max(3, (b.esc / maxE) * (BH - LIFT - 2)) };
+  });
+
+  /* The headline pops in on a change: every character is keyed by a generation, so a new total is new elements and
+     each plays one short entrance, left to right. The first paint does not play it; only a change does. */
+  const total = sum(totals);
+  const [gen, setGen] = useState(0);
+  const last = useRef(total);
+  useEffect(() => {
+    if (last.current === total) return;
+    last.current = total;
+    setGen(g => g + 1);
+  }, [total]);
+
+  /* ring and tooltip: placed at once when they appear, glide after */
+  const ringX = useMotionValue(0);
+  const ringY = useMotionValue(0);
+  const ringH = useMotionValue(0);
+  const tipX = useMotionValue(0);
+  const was = useRef<number | null>(null);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the motion values and `layout` follow from these
+  useEffect(() => {
+    if (at === null || at >= n) {
+      was.current = null;
+      return;
+    }
+    const L = layout[at];
+    const left = at * (bw + g);
+    const x = left - 3;
+    const up = seen ? L.top : 0;
+    const down = seen ? L.esc : 0;
+    const y = CH - LIFT - up - 3;
+    const h = up + LIFT + 1 + LIFT + down + 6;
+    /* beside the column: right while it fits there, else left */
+    const right = left + bw + 8;
+    const tx = right + TIP_W <= CW || left - 8 - TIP_W < 0 ? Math.min(CW - TIP_W, right) : left - 8 - TIP_W;
+    const go = (mv: typeof ringX, v: number) => {
+      if (was.current === null) mv.set(v);
+      else animate(mv, v, SPRING);
+    };
+    go(ringX, x);
+    go(ringY, y);
+    go(ringH, h);
+    go(tipX, tx);
+    was.current = at;
+  }, [at, n, bw, g, mode, seen]);
+
+  const pick = (e: PointerEvent) => {
+    const b = plot.current?.getBoundingClientRect();
+    if (!b || b.width === 0) return;
+    const i = Math.floor(((e.clientX - b.left) / b.width) * n);
+    setAt(Math.max(0, Math.min(n - 1, i)));
+  };
+
+  const cur = at !== null && at < n ? data[at] : null;
+  const top2 = cur
+    ? cur.vals
+        .map((v, k) => ({ v, k }))
+        .sort((a, b) => b.v - a.v)
+        .slice(0, 2)
+    : [];
+
+  return (
+    <div
+      ref={root}
+      className="bn-stb"
+      data-colour={colour === "Colour" ? "on" : "off"}
+      data-scrub={cur ? "" : undefined}
+      style={{ width: W, ["--stb-r" as string]: `${r}px`, ["--stb-rr" as string]: `${r + 3}px` } as CSSProperties}
+    >
+      <div className="bn-stb-head">
+        <div className="bn-stb-titles">
+          <div className="bn-stb-title">Tráfego</div>
+          <div className="bn-stb-sub">
+            Últimos {n} {mode === "Day" ? "dias" : "semanas"}
+          </div>
+        </div>
+        <div className="bn-stb-seg-ctl" data-mode={mode} role="tablist">
+          <span className="bn-stb-thumb" aria-hidden />
+          {MODES.map(m => (
+            <button
+              key={m.id}
+              type="button"
+              role="tab"
+              aria-selected={mode === m.id}
+              data-on={mode === m.id || undefined}
+              className="bn-stb-tab"
+              onClick={() => {
+                setMode(m.id);
+              }}
+            >
+              {m.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="bn-stb-figure">
+        <span className="bn-stb-num" aria-label={fmt(total)}>
+          {fmt(total)
+            .split("")
+            .map((ch, i) => (
+              <span
+                // biome-ignore lint/suspicious/noArrayIndexKey: the key is the generation plus the position, on purpose
+                key={`${gen}-${i}`}
+                className="bn-stb-digit"
+                data-pop={gen > 0 || undefined}
+                style={{ ["--i" as string]: i } as CSSProperties}
+                aria-hidden
+              >
+                {ch}
+              </span>
+            ))}
+        </span>
+        <span className="bn-stb-unit">visitas</span>
+      </div>
+
+      <div
+        ref={plot}
+        className="bn-stb-plot"
+        style={{ height: CH + 1 + BH }}
+        onPointerDown={e => {
+          try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+          } catch {
+            /* scripted */
+          }
+          pick(e);
+        }}
+        onPointerMove={pick}
+        onPointerUp={e => {
+          try {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+          } catch {
+            /* scripted */
+          }
+          if (e.pointerType !== "mouse") setAt(null);
+        }}
+        onPointerCancel={() => setAt(null)}
+        onPointerLeave={() => setAt(null)}
+      >
+        <span className="bn-stb-base" style={{ top: CH }} />
+        {data.map((_, i) => (
+          <div
+            // biome-ignore lint/suspicious/noArrayIndexKey: columns are positional, a mode switch retargets them
+            key={i}
+            className="bn-stb-col"
+            data-on={at === i || undefined}
+            style={{ left: i * (bw + g), width: bw, ["--i" as string]: i } as CSSProperties}
+          >
+            {layout[i].segs.map((s, k) => (
+              <span
+                // biome-ignore lint/suspicious/noArrayIndexKey: one segment per source, in order
+                key={k}
+                className="bn-stb-bar"
+                style={
+                  {
+                    ["--c" as string]: `var(--stb-c${k + 1})`,
+                    bottom: BH + 1 + LIFT + (seen ? s.bottom : 0),
+                    height: seen ? s.h : 0,
+                  } as CSSProperties
+                }
+              />
+            ))}
+            <span className="bn-stb-esc" style={{ top: CH + 1 + LIFT, height: seen ? layout[i].esc : 0 }} />
+          </div>
+        ))}
+
+        <motion.span className="bn-stb-ring" aria-hidden style={{ x: ringX, y: ringY, height: ringH, width: bw + 6 }} />
+
+        <motion.div className="bn-stb-tip" style={{ x: tipX, width: TIP_W }} aria-hidden={!cur}>
+          {cur && (
+            <>
+              <div className="bn-stb-tip-head">
+                <span>{cur.label}</span>
+                <b>{fmt(totals[at as number])}</b>
+              </div>
+              {top2.map(({ v, k }) => (
+                <div className="bn-stb-tip-row" key={CATS[k]}>
+                  <i style={{ ["--c" as string]: `var(--stb-c${k + 1})` } as CSSProperties} />
+                  <span>{CATS[k]}</span>
+                  <b>{fmt(v)}</b>
+                </div>
+              ))}
+              <div className="bn-stb-tip-row" data-esc="">
+                <i />
+                <span>Rejeitados</span>
+                <b>{cur.esc}</b>
+              </div>
+            </>
+          )}
+        </motion.div>
+      </div>
+
+      <div className="bn-stb-axis">
+        <span>{data[0].short}</span>
+        <span>{data[n - 1].short}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,263 @@
+/* Three toasts at most, always: the newest in front, the two before it tucked behind with a sliver showing above, a
+   step smaller each. Point at the stack and it fans out into a list; move away and it gathers back up.
+   Ported from bencho.dev (MIT).
+
+   One spring, three places: a toast's place comes from how far back it is and whether the stack is open, and Motion
+   springs it there. Opening, closing, a toast leaving and the next arriving are the same move, on a spring a touch
+   under critical so it settles with a hint of give.
+   Hover is the whole frame: the stack opens about its middle, so hovering the toasts themselves would let the list
+   slide out from under the pointer and close again. Over/out with a containment test (not enter/leave) so a
+   synthetic pointer event with no relatedTarget opens and closes it too.
+
+   Two ways to run it. With no `toasts` it is the gallery demo: it never runs out, dismiss one and it slides away
+   while a new one rises in at the front from the pool. With `toasts` (lib/toast.ts, through components/Toaster.tsx)
+   it only draws what it is given: the owner of the list removes a toast on `onDismiss`, and the exit animation comes
+   from AnimatePresence, so a toast that times out leaves the same way as one that is dismissed. */
+
+import { type CSSProperties, type ComponentType, useCallback, useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { CheckCircle, Info, Warning, X, XCircle } from "../icons";
+
+export type ToastKind = "success" | "info" | "error" | "warning";
+export type ToastView = {
+  id: string;
+  kind: ToastKind;
+  title: string;
+  body?: string;
+  action?: { label: string; onClick: () => void };
+};
+
+const ICON: Record<ToastKind, ComponentType<{ size?: number; weight?: "bold"; "aria-hidden"?: boolean }>> = {
+  success: CheckCircle,
+  info: Info,
+  error: XCircle,
+  warning: Warning,
+};
+
+const POOL: Omit<ToastView, "id" | "action">[] = [
+  { kind: "error", title: "Cartão recusado", body: "Use outro cartão." },
+  { kind: "info", title: "Kai entrou no seu projeto", body: "Pode comentar e copiar." },
+  { kind: "success", title: "brand-kit.zip enviado", body: "Salvo em Semana de lançamento." },
+  { kind: "warning", title: "Armazenamento em 92%", body: "As exportações param no limite." },
+  { kind: "success", title: "Vídeo salvo", body: "Está em Favoritos." },
+];
+
+const W = 300;
+const H = 64;
+const SHOWN = 3;
+const SPRING = { type: "spring", stiffness: 380, damping: 34, mass: 1 } as const;
+const LEAVE_MS = 220;
+
+type Props = {
+  /* what to draw, front first; leave it out for the gallery demo */
+  toasts?: ToastView[];
+  onDismiss?: (id: string) => void;
+  /* the stack opened or closed (hover or focus): the owner of the list holds the timers while it is open */
+  onOpenChange?: (open: boolean) => void;
+  /* "center": the closed stack sits in the middle of its frame, as in the gallery; "end": it hangs from the bottom
+     edge, so the front toast never moves when the stack opens (a corner of the screen) */
+  align?: "center" | "end";
+  /* a soft shadow and a hairline, for a stack that floats over a page instead of sitting on a card */
+  floating?: boolean;
+  peek?: number;
+  gap?: number;
+  corner?: number;
+  className?: string;
+};
+
+export function ToastStack({
+  toasts,
+  onDismiss,
+  onOpenChange,
+  align = "center",
+  floating,
+  peek = 14,
+  gap = 10,
+  corner = 20,
+  className,
+}: Props) {
+  const demo = useDemoToasts(!toasts);
+  const list = (toasts ?? demo.toasts).slice(0, SHOWN);
+  const dismiss = toasts ? onDismiss : demo.dismiss;
+  const reduce = useReducedMotion();
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement | null>(null);
+
+  const change = useCallback(
+    (v: boolean) => {
+      setOpen(v);
+      onOpenChange?.(v);
+    },
+    [onOpenChange],
+  );
+
+  /* the toast under the pointer can go away (dismissed, timed out) and take the pointer-out with it: while open,
+     any move outside the stack closes it, and an empty stack is closed */
+  const empty = list.length === 0;
+  useEffect(() => {
+    if (!open) return;
+    if (empty) {
+      change(false);
+      return;
+    }
+    const away = (e: PointerEvent) => {
+      if (!root.current?.contains(e.target as Node | null)) change(false);
+    };
+    document.addEventListener("pointermove", away);
+    return () => document.removeEventListener("pointermove", away);
+  }, [open, empty, change]);
+
+  /* the frame is the open list's size; the toasts hang from its bottom edge, so a toast arriving or leaving never
+     shifts the others, it only grows the frame upward */
+  const n = Math.max(list.length, 1);
+  const listH = n * H + (n - 1) * gap;
+  const stackH = H + (n - 1) * peek;
+  const FH = listH;
+
+  /* y is measured up from the bottom edge, where every toast rests */
+  const place = (k: number) => {
+    if (open) return { y: -k * (H + gap), scale: 1 };
+    /* the stack: front at the bottom, each one behind a peek higher and a step smaller, hanging from its top edge */
+    const d = Math.min(k, SHOWN - 1);
+    const slack = align === "center" ? (FH - stackH) / 2 : 0;
+    return { y: -d * peek - slack, scale: 1 - d * 0.05 };
+  };
+
+  return (
+    <div
+      ref={root}
+      className={`bn-tst${className ? ` ${className}` : ""}`}
+      role="region"
+      aria-label="Notificações"
+      data-open={open || undefined}
+      data-floating={floating || undefined}
+      style={
+        {
+          width: `min(${W}px, calc(100vw - 32px))`,
+          height: FH,
+          "--tst-r": `${corner}px`,
+          "--tst-gap": `${gap}px`,
+        } as CSSProperties
+      }
+      onPointerOver={() => !open && !empty && change(true)}
+      onPointerOut={e => {
+        const to = e.relatedTarget as Node | null;
+        if (!to || !root.current?.contains(to)) change(false);
+      }}
+      onFocus={() => !open && !empty && change(true)}
+      onBlur={e => {
+        if (!root.current?.contains(e.relatedTarget as Node | null)) change(false);
+      }}
+    >
+      <AnimatePresence>
+        {list.map((t, k) => {
+          const Icon = ICON[t.kind];
+          const p = place(k);
+          const front = k === 0;
+          return (
+            <motion.div
+              key={t.id}
+              className="bn-tst-toast"
+              data-kind={t.kind}
+              data-front={front || undefined}
+              style={{ height: H, zIndex: SHOWN - k }}
+              /* a new one rises in from below the front; one coming up from the queue behind just fades in */
+              initial={{ y: front && !reduce ? p.y + 24 : p.y, scale: p.scale, opacity: 0, x: 0 }}
+              animate={{ y: p.y, scale: p.scale, opacity: 1, x: 0 }}
+              exit={
+                reduce
+                  ? { opacity: 0, transition: { duration: 0.12 } }
+                  : { opacity: 0, x: 60, transition: { duration: LEAVE_MS / 1000, ease: [0.4, 0, 1, 1] } }
+              }
+              transition={reduce ? { duration: 0 } : SPRING}
+              /* an error interrupts the reader; the rest wait their turn */
+              role={t.kind === "error" ? "alert" : "status"}
+              aria-hidden={!open && !front ? true : undefined}
+            >
+              <span className="bn-tst-icon">
+                <Icon size={18} weight="bold" aria-hidden />
+              </span>
+              <span className="bn-tst-text" title={t.body && t.body.length > 60 ? `${t.title}: ${t.body}` : undefined}>
+                <b>{t.title}</b>
+                {t.body && <span>{t.body}</span>}
+              </span>
+              {t.action && (
+                <button
+                  type="button"
+                  className="bn-tst-act"
+                  tabIndex={open || front ? 0 : -1}
+                  onClick={t.action.onClick}
+                >
+                  {t.action.label}
+                </button>
+              )}
+              <button
+                type="button"
+                className="bn-tst-x"
+                aria-label={`Dispensar ${t.title}`}
+                tabIndex={open || front ? 0 : -1}
+                onClick={() => dismiss?.(t.id)}
+              >
+                <X size={16} weight="bold" aria-hidden />
+              </button>
+            </motion.div>
+          );
+        })}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+/* The gallery's pool of toasts: three at a time, a dismissed one replaced from the pool once it has left. Idle (and
+   empty) when the stack is driven by a real list. */
+function useDemoToasts(active: boolean) {
+  /* ids count up so a returning toast is a new element */
+  const next = useRef(SHOWN);
+  const [toasts, setToasts] = useState<ToastView[]>([]);
+  const timers = useRef(new Set<number>());
+
+  /* Retry on the failed payment turns that toast into the payment going through, in place */
+  const retry = useCallback((id: string) => {
+    setToasts(s =>
+      s.map(t =>
+        t.id === id
+          ? { ...t, kind: "success", title: "Pagamento concluído", body: "Seu cartão foi cobrado.", action: undefined }
+          : t,
+      ),
+    );
+  }, []);
+
+  const make = useCallback(
+    (n: number): ToastView => {
+      const t = POOL[n % POOL.length];
+      const id = `demo-${n}`;
+      return { ...t, id, action: t.kind === "error" ? { label: "Repetir", onClick: () => retry(id) } : undefined };
+    },
+    [retry],
+  );
+
+  useEffect(() => {
+    if (!active) return;
+    setToasts(Array.from({ length: SHOWN }, (_, i) => make(i)));
+    const pending = timers.current;
+    return () => {
+      for (const t of pending) window.clearTimeout(t);
+      pending.clear();
+    };
+  }, [active, make]);
+
+  const dismiss = useCallback(
+    (id: string) => {
+      setToasts(s => s.filter(t => t.id !== id));
+      /* the replacement waits for the old one to be gone, then rises in at the front */
+      const t = window.setTimeout(() => {
+        timers.current.delete(t);
+        setToasts(s => [make(next.current++), ...s]);
+      }, LEAVE_MS);
+      timers.current.add(t);
+    },
+    [make],
+  );
+
+  return { toasts, dismiss };
+}