@crievo/omni 0.1.3 → 0.1.4

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

@@ -0,0 +1,456 @@
+/* A card for one step of an automation, with its controls folded into the corner until the pointer asks for them.
+   Ported from bencho.dev (MIT).
+
+   The controls are the component; the card is what they fold into. They come out of the card's own top-right corner
+   rather than fading in above it: each starts AT the corner, hidden behind the card, and travels out along a path
+   that is the card's outline pushed out by a constant distance (straight along the top, round the corner on an arc
+   concentric with it, straight down the right edge). Every point on it is the same distance from the card at every
+   corner radius, which a circle struck from one point is not.
+   One spring each, and the stagger is a delay on the target, not an ease: four springs always exist (hooks cannot be
+   conditional; `count` only decides how many are drawn), each told to open a beat after the one before it. Closing
+   runs the other way, last out first back, so the fan folds into the corner. */
+
+import {
+  type CSSProperties,
+  type ComponentType,
+  type ReactElement,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Copy, Gear2, GitCommit, LinkSimple, Plus } from "../icons";
+import { VoiceAvatar } from "../VoiceAvatar";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+/* 0..100 into the two numbers a spring has: stiffness and per-frame decay. Chosen by damping ratio
+   (zeta = -ln(d) / (2 * sqrt(k))): 0 is ~0.85 (heavy, arrives without a ring), 50 is ~0.41, 100 is ~0.20 (two
+   visible rebounds). Both ends shippable. */
+const springOf = (tune: number) => ({
+  k: 0.08 + (tune / 100) * 0.16,
+  d: 0.62 + (tune / 100) * 0.2,
+});
+
+/* A hand-rolled spring, in frames not milliseconds: `dt` is in sixtieths of a second and the decay is raised to it
+   (not multiplied), so a dropped frame sheds the same energy as the two it replaced. The snap threshold is absolute,
+   so callers work in 0..100. The loop parks itself once settled, and a restart picks up from the refs. */
+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;
+    };
+  }, [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 button and half of it; everything else with a size is measured off this one */
+const DOT = 36;
+const R = DOT / 2;
+
+/* centre to centre along the path: a real distance, so twelve pixels of air stay twelve whatever the corner does */
+const SPACING = DOT + 12;
+
+/* A point `s` along the offset path, measured from where the corner arc meets the top edge (the corner occupies
+   0..len; outside that it has run onto a straight), and the direction out of the card there. The arc is concentric
+   with the card's, so its radius is the card's plus the offset, floored just above zero for a square card. */
+function ride(s: number, corner: number, off: number) {
+  const arc = Math.max(0.001, corner + off);
+  const len = (arc * Math.PI) / 2;
+  if (s <= 0) {
+    /* along the top edge, going left */
+    return { x: -corner + s, y: -off, nx: 0, ny: -1 };
+  }
+  if (s >= len) {
+    /* down the right edge */
+    return { x: off, y: corner + (s - len), nx: 1, ny: 0 };
+  }
+  const th = Math.PI / 2 - s / arc;
+  return {
+    x: -corner + arc * Math.cos(th),
+    y: corner - arc * Math.sin(th),
+    nx: Math.cos(th),
+    ny: -Math.sin(th),
+  };
+}
+
+/* Where they hide, provably inside: a point on the card's diagonal far enough in that a whole button fits behind the
+   card. From corner >= R + 2 the corner's own centre works (at least R inside everything, with 2px to spare; at
+   exactly R the button is tangent and draws a hairline). Below that the arc has eaten the room near the corner, so go
+   past the corner's disc until both edges are clear. One number along the diagonal. */
+const hideAt = (corner: number) =>
+  corner >= R + 2 ? corner * Math.SQRT2 : Math.max(R * Math.SQRT2 + 2, corner * Math.SQRT2 + corner + 2);
+
+/* Reach is the air between the card and the fan, on the original 0..100 scale and allowed a narrow window of it
+   (20 to 40: 11px of gap to 16). Tighter fouls the corner, wider stops reading as attached. Not a pixel count: the
+   scale a value was judged on is part of the value. */
+const gapPx = (reach: number) => 6 + (clamp(reach, 20, 40) / 100) * 24;
+
+/* The air the block keeps above and below the card for the fan, measured at the top of the Reach window so the box
+   does not resize while the knob moves. Never beside: the width stays the card's. */
+const AIR = Math.ceil(gapPx(100) + DOT);
+
+/* the beat between one button and the next, at the top of the stagger range */
+const BEAT = 90;
+
+/* One corner button. `onClick` is optional because the gallery's demo buttons do nothing. */
+export type NodeAction = {
+  id: string;
+  label: string;
+  icon: ComponentType<{ size?: number; weight?: "bold" }>;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+export type NodePerson = { id: string; name: string };
+
+/* What a custom card element receives (`render`): spread it on a link or a button and the card stays one element */
+export type NodeCardProps = {
+  className: string;
+  children: ReactNode;
+  title?: string;
+  "data-on"?: true;
+  "data-selected"?: true;
+};
+
+/* connect, add a step, duplicate, settings: the four things you do to a node without opening it. Deliberately not
+   delete: the one action that cannot be undone does not belong in a row that appears under your cursor. */
+const ACTS: NodeAction[] = [
+  { id: "link", label: "Conectar", icon: LinkSimple },
+  { id: "add", label: "Adicionar etapa", icon: Plus },
+  { id: "copy", label: "Duplicar", icon: Copy },
+  { id: "settings", label: "Configurações", icon: Gear2 },
+];
+
+/* who is on the step: three pictured (the voice avatars stand in for the faces), the rest counted. The chip is the
+   difference, not a typed number, so the two halves of one fact cannot drift */
+const CREW: NodePerson[] = [
+  { id: "mara", name: "Mara Quinn" },
+  { id: "ines", name: "Tomás Oliveira" },
+  { id: "kai", name: "Lars Andersen" },
+];
+const ON_STEP = 6;
+
+/* a node is identified by its place in the flow, not by the service it calls */
+const NODE = "Nó 07";
+const SAY = "Lê a conversa, escreve um resumo e posta de volta no canal de onde veio.";
+
+export function ActionNode({
+  /* the air between the card and the buttons, 20..40 */
+  reach = 25,
+  /* the spring, 0..100 */
+  bounce = 20,
+  /* how far apart the buttons open, 0..100 */
+  stagger = 55,
+  /* how many of the demo buttons are drawn, 2..4 (a controlled `actions` list sets its own count) */
+  count = 4,
+  /* the card's own corner, in px; the buttons keep theirs */
+  corner = 20,
+  /* The controlled side. Each is the demo's content when left out; pass an empty list to show none.
+     title / description: the two lines of the card. actions: the corner buttons, at most four, none = no fan.
+     people / more: the face stack and the "+N" chip. */
+  title = NODE,
+  description = SAY,
+  actions,
+  people = CREW,
+  more = people === CREW ? ON_STEP - CREW.length : 0,
+  /* the glyph box before the title, as the caller's own marker (a status, a number); the box is dropped */
+  mark,
+  /* the card is a button that calls this; with `render` the caller supplies the element instead (a router link) */
+  onOpen,
+  render,
+  /* native tooltip and the "this one is picked" ring */
+  hint,
+  selected = false,
+  /* the card's width: a number is px, a string any CSS length ("100%" fills its cell). The original is 272 */
+  width,
+  /* tighter padding and type, for cards that sit in a row of cells instead of on their own */
+  dense = false,
+  /* the room kept above and below the card for the fan; 0 lets it overlay what is next to the card instead */
+  air = AIR,
+  /* "down": the fan comes out of the bottom-right corner (the same geometry, mirrored), for a card whose top
+     edge has no room */
+  fan = "up",
+  className,
+}: {
+  reach?: number;
+  bounce?: number;
+  stagger?: number;
+  count?: number;
+  corner?: number;
+  title?: string;
+  description?: ReactNode;
+  actions?: NodeAction[];
+  people?: NodePerson[];
+  more?: number;
+  mark?: ReactNode;
+  onOpen?: () => void;
+  render?: (props: NodeCardProps) => ReactElement;
+  hint?: string;
+  selected?: boolean;
+  width?: number | string;
+  dense?: boolean;
+  air?: number;
+  fan?: "up" | "down";
+  className?: string;
+} = {}) {
+  const acts = (actions ?? ACTS.slice(0, clamp(Math.round(count), 2, 4))).slice(0, 4);
+  const n = acts.length;
+  const still = stillness();
+
+  /* `on` is the pointer; `lit` is what each spring aims at, which is the same thing a moment later (the stagger).
+     Four flags rather than a count, so the reverse fold is the same mechanism read backwards. */
+  const [on, setOn] = useState(false);
+  const [lit, setLit] = useState([false, false, false, false]);
+  const timers = useRef<number[]>([]);
+
+  useEffect(() => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+    const gap = still ? 0 : (clamp(stagger, 0, 100) / 100) * BEAT;
+    for (let i = 0; i < 4; i += 1) {
+      /* opening runs first to last; closing runs last to first */
+      const place = on ? i : n - 1 - i;
+      const at = gap * place;
+      const set = () =>
+        setLit(prev => {
+          if (prev[i] === on) return prev;
+          const next = [...prev];
+          next[i] = on;
+          return next;
+        });
+      if (at <= 0) set();
+      else timers.current.push(window.setTimeout(set, at));
+    }
+    return () => {
+      timers.current.forEach(clearTimeout);
+      timers.current = [];
+    };
+  }, [on, n, stagger, still]);
+
+  /* four, always, whatever `count` says: a hook cannot be drawn conditionally */
+  const p0 = useSpring(lit[0] ? 100 : 0, bounce, still);
+  const p1 = useSpring(lit[1] ? 100 : 0, bounce, still);
+  const p2 = useSpring(lit[2] ? 100 : 0, bounce, still);
+  const p3 = useSpring(lit[3] ? 100 : 0, bounce, still);
+  const at = [p0, p1, p2, p3];
+
+  /* Where each button ends up. The path is offset from the card by the gap plus a button's own half, so the gap is
+     measured to the button's edge. Centred on the corner's midpoint and spread by arc length, so the fan is
+     symmetrical about the diagonal however many are on it and however square the card is. */
+  const c = clamp(corner, 0, 32);
+  const off = gapPx(reach) + R;
+  const mid = ((c + off) * Math.PI) / 4;
+  const spots = Array.from({ length: n }, (_, i) => ride(mid + (i - (n - 1) / 2) * SPACING, c, off));
+
+  /* the one place they all fold back to */
+  const deep = hideAt(c) / Math.SQRT2;
+  const hid = { x: -deep, y: deep };
+
+  /* The air between the card and the fan is a hole: the wrapper's box is the card, so moving from the card toward a
+     button would leave .bn-nod on the way across and fold the fan from under the cursor. The fan carries a hit area:
+     the box its buttons occupy, bled a little, hung off the same corner anchor, measured off `spots` so there is no
+     second copy of the geometry. Live only while the fan is open, so empty space beside the card never opens it. */
+  const BLEED = 6;
+  const box = spots.reduce(
+    (b, s) => ({
+      l: Math.min(b.l, s.x - R - BLEED),
+      r: Math.max(b.r, s.x + R + BLEED),
+      t: Math.min(b.t, s.y - R - BLEED),
+      d: Math.max(b.d, s.y + R + BLEED),
+    }),
+    /* seeded on the anchor, so the pad reaches back to the corner however far out the fan has been sent */
+    { l: 0, r: 0, t: 0, d: 0 },
+  );
+  const pw = box.r - box.l;
+  const ph = box.d - box.t;
+  /* the corner itself, in the pad's own coordinates */
+  const px = -box.l;
+  const py = -box.t;
+
+  /* The bite taken out of the pad is inside the card: the quadrant x < 0, y > 0 is too greedy (just outside a
+     rounded corner the material has pulled back but the quadrant has not, right where the middle button's path
+     crosses). x < -c with y > c is card at every radius, so that rectangle is the one to lose. */
+  const bx = Math.max(0, px - c);
+  const by = Math.min(ph, py + c);
+
+  const cardProps: NodeCardProps = {
+    className: "bn-nod-card",
+    title: hint,
+    "data-on": on || undefined,
+    "data-selected": selected || undefined,
+    children: (
+      <>
+        <span className="bn-nod-top">
+          {mark ? (
+            <span className="bn-nod-mark" data-bare="">
+              {mark}
+            </span>
+          ) : (
+            <span className="bn-nod-mark" aria-hidden="true">
+              {/* a ring with a wire out of either side: one step with a flow arriving and a flow leaving. The glyph
+                  spans its full width, so 18 gives the ring its weight back without the wires reaching the edge */}
+              <GitCommit size={18} weight="bold" />
+            </span>
+          )}
+          <span className="bn-nod-name">{title}</span>
+        </span>
+
+        <span className="bn-nod-say">{description}</span>
+
+        {/* the faces come after the sentence: the least urgent of the three and the heaviest to look at */}
+        {(people.length > 0 || more > 0) && (
+          <span className="bn-nod-chain" aria-hidden="true">
+            {people.map(p => (
+              <span key={p.id} className="bn-nod-link">
+                <VoiceAvatar seed={p.name} size={24} />
+              </span>
+            ))}
+            {more > 0 && <span className="bn-nod-more">+{more}</span>}
+          </span>
+        )}
+      </>
+    ),
+  };
+
+  /* The card is a span-built block so it can be a button or a link without invalid nesting: `render` hands the
+     caller its props, `onOpen` makes it a button, and with neither it is a plain box. */
+  const card = render ? (
+    render(cardProps)
+  ) : onOpen ? (
+    <button type="button" onClick={onOpen} {...cardProps} />
+  ) : (
+    <div {...cardProps} />
+  );
+
+  /* the fan hangs off one corner; "down" is the same arrangement flipped about the card's horizontal axis */
+  const down = fan === "down";
+
+  return (
+    <div
+      className={className ? `bn-nod ${className}` : "bn-nod"}
+      data-dense={dense || undefined}
+      data-fan={down ? "down" : undefined}
+      /* the corner rides on the wrapper as a variable so the Stroke rule can cut its ring to the same radius; the
+         mark is cut with the card (a share of its radius, capped at the 15 that makes the old disc), and the
+         vertical padding is the fan's own reach */
+      style={
+        {
+          "--nod-r": `${c}px`,
+          "--nod-mark-r": `${Math.min(15, c * 0.47).toFixed(2)}px`,
+          ...(width != null ? { "--nod-w": typeof width === "number" ? `${width}px` : width } : null),
+          paddingBlock: air,
+        } as CSSProperties
+      }
+      onPointerEnter={() => setOn(true)}
+      /* `out` with a containment test, not `leave`: a scripted pointer walked off the card carries
+         `relatedTarget: null`, which React never turns into a leave */
+      onPointerOut={e => {
+        const to = e.relatedTarget as Node | null;
+        if (!to || !e.currentTarget.contains(to)) setOn(false);
+      }}
+      onPointerCancel={() => setOn(false)}
+      /* the keyboard opens the fan the way the pointer does: focus on the card, then tab runs along the buttons */
+      onFocus={() => setOn(true)}
+      onBlur={e => {
+        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) setOn(false);
+      }}
+    >
+      {card}
+
+      {/* The fan, anchored ON the card's own top-right corner so every spot is measured from one origin. It hangs
+          outside the box on purpose (the box is the card and nothing else). `top: AIR`, not 0: an absolute child is
+          laid against the padding box, so the air above would leave the anchor behind at the top of the block. */}
+      {n > 0 && (
+        <div className="bn-nod-fan" style={down ? { bottom: air, right: 0 } : { top: air, right: 0 }}>
+          <i
+            className="bn-nod-reach"
+            aria-hidden="true"
+            data-on={on || undefined}
+            style={{
+              left: box.l,
+              top: box.t,
+              width: pw,
+              height: ph,
+              clipPath: `polygon(0 0, ${pw}px 0, ${pw}px ${ph}px, ${bx}px ${ph}px, ${bx}px ${by}px, 0 ${by}px)`,
+            }}
+          />
+          {acts.map((a, i) => {
+            const u = clamp(at[i] / 100, 0, 1.4);
+            const spot = spots[i];
+            /* out of the corner in a straight line, from the hidden point to its place on the path. `u` is not
+             clamped, so the spring's overshoot carries each button a little past its place and back */
+            const put = (a: number, b: number) => a + (b - a) * u;
+            return (
+              <button
+                key={a.id}
+                className="bn-nod-act"
+                type="button"
+                aria-label={a.label}
+                title={a.label}
+                /* a control you cannot see should not be the next thing tab lands on */
+                tabIndex={on ? 0 : -1}
+                disabled={a.disabled}
+                onClick={() => a.onClick?.()}
+                style={
+                  {
+                    width: DOT,
+                    height: DOT,
+                    /* its own centre on the anchor before anything moves it: exactly half a button */
+                    marginTop: -R,
+                    marginLeft: -R,
+                    translate: `${put(hid.x, spot.x)}px ${put(hid.y, spot.y)}px`,
+                    /* barely any scale and no fade: a button hidden under the card does not need to be transparent,
+                     and the 0.18 left is weight, not concealment. A variable rather than `scale`, because the
+                     hover grows the button too and an inline `scale` would beat any rule; the stylesheet
+                     multiplies the two. */
+                    "--pop": 0.82 + 0.18 * Math.min(u, 1),
+                  } as CSSProperties
+                }
+              >
+                {/* 16 in a 36 disc, in proportion to the button */}
+                <a.icon size={16} weight="bold" />
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}