IntegrationsNew

"use client";import * as React from "react";import { ArrowUpRight, Search, Unplug } from "lucide-react";import { ConfirmAction } from "./confirm-action";import { NumberRoll } from "./number-roll";import { StatusButton, type ActionStatus } from "./status-button";import { TextMorph } from "./text-morph";import { useRowMotion } from "./use-row-motion";/* ───────────────────────────────────────────────────────── * INTEGRATIONS: Settings → Integrations, done properly * *   connect   Connect says Connecting while the provider's own *             window is open; when it comes back, the button *             folds away and the account it connected opens in *             its place, a check drawing beside the name *   scopes    what the connection may do opens under the row *   refused   a closed window or a refusal shakes the button, *             says Try again, and the reason lifts in under the *             description *   filter    category tabs (the highlight slides) and search; *             rows that stay glide into place, the rest fold *   disconnect the plug stretches into a confirm; the account *             folds back into Connect * * Your server does OAuth; openOAuthWindow (oauth-window.ts) * opens the provider's page in a small window and resolves * when your callback says it's done. Fits Nango, Pipedream * Connect or your own OAuth routes. * ───────────────────────────────────────────────────────── */export { openOAuthWindow, type OAuthWindowOptions } from "./oauth-window";export interface IntegrationAccount {  /** "Northwind workspace", "maya@fernhill.co". */  name: string;  /** A second line: "#ops, #alerts" or "Connected 2 days ago". */  detail?: string;  image?: string;}export interface Integration {  id: string;  name: string;  description?: string;  /** The provider's mark, about 18px. */  icon?: React.ReactNode;  category?: string;  /** Set when it's connected. */  account?: IntegrationAccount | null;  /** What the connection may do, shown once connected. */  scopes?: string[];}export interface IntegrationsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {  value?: Integration[];  defaultValue?: Integration[];  onValueChange?: (integrations: Integration[]) => void;  /** Runs the provider's sign-in and returns the account it connected. Throw to say why not. */  onConnect: (integration: Integration) => Promise<IntegrationAccount>;  onDisconnect?: (integration: Integration) => Promise<unknown>;  /** A link to the integration's own settings once connected. */  settingsHref?: (integration: Integration) => string | undefined;  title?: string;  description?: string;}const EASE = "cubic-bezier(0.16,1,0.3,1)";const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";const NONE: Integration[] = [];const ALL = "All";const reducedQuery = "(prefers-reduced-motion: reduce)";const subscribeReduced = (onChange: () => void) => {  const query = window.matchMedia(reducedQuery);  query.addEventListener("change", onChange);  return () => query.removeEventListener("change", onChange);};const useReducedMotion = () =>  React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);const message = (e: unknown, fallback: string) => (e instanceof Error && e.message ? e.message : fallback);/** A piece that opens sideways (0fr ↔ 1fr), staying on the baseline. */function Side({ open, reduced, children, className = "" }: { open: boolean; reduced: boolean; children: React.ReactNode; className?: string }) {  return (    <span      className={`inline-grid ${className}`}      inert={!open}      aria-hidden={!open || undefined}      style={{        gridTemplateColumns: open ? "1fr" : "0fr",        opacity: open ? 1 : 0,        filter: open || reduced ? "none" : "blur(3px)",        transition: reduced ? "none" : `grid-template-columns 460ms ${EASE}, opacity ${open ? 320 : 160}ms ${EASE} ${open ? 120 : 0}ms, filter 320ms ${EASE}`,      }}    >      <span className="flex min-w-0 items-center justify-end [clip-path:inset(-6px_-2px)]">{children}</span>    </span>  );}function Fold({ open, reduced, children }: { open: boolean; reduced: boolean; children: React.ReactNode }) {  const kept = React.useRef(children);  if (open) kept.current = children;  return (    <div className="grid" inert={!open} aria-hidden={!open || undefined} style={{ gridTemplateRows: open ? "1fr" : "0fr", opacity: open ? 1 : 0, transition: reduced ? "none" : `grid-template-rows 420ms ${EASE}, opacity ${open ? 300 : 160}ms ${EASE}` }}>      <div className="min-h-0 min-w-0 overflow-clip">{open ? children : kept.current}</div>    </div>  );}function Avatar({ account }: { account: IntegrationAccount }) {  if (account.image)    // eslint-disable-next-line @next/next/no-img-element    return <img src={account.image} alt="" className="size-5 shrink-0 rounded-full object-cover shadow-[0_0_0_1px_var(--border)]" />;  return (    <span aria-hidden="true" className="grid size-5 shrink-0 place-items-center rounded-full bg-muted text-[9.5px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_var(--border)]">      {account.name.slice(0, 1).toUpperCase()}    </span>  );}interface RowProps {  item: Integration;  status: ActionStatus;  error?: string;  href?: string;  canDisconnect: boolean;  reduced: boolean;  act: React.RefObject<{ connect: (i: Integration) => void; disconnect: (i: Integration) => Promise<void> }>;}const Row = React.memo(function Row({ item, status, error, href, canDisconnect, reduced, act }: RowProps) {  const connected = Boolean(item.account);  // The account stays on screen while it folds back into Connect.  const kept = React.useRef(item.account ?? null);  if (item.account) kept.current = item.account;  const account = item.account ?? kept.current;  return (    <li data-row-id={item.id} className="border-t border-border first:border-t-0">      <div className="flex items-center gap-3 px-4 py-3 @md:px-5">        <span aria-hidden="true" className="grid size-9 shrink-0 place-items-center rounded-[10px] bg-background text-foreground shadow-[inset_0_0_0_1px_var(--border)] [&_svg]:size-[18px]">          {item.icon}        </span>        <div className="min-w-0 flex-1">          <p className="flex items-center gap-2 text-[13.5px] font-medium tracking-[-0.01em]">            <span className="truncate">{item.name}</span>            {href && connected && (              <a href={href} aria-label={`${item.name} settings`} className={`inline-flex shrink-0 items-center gap-0.5 rounded-sm text-[11.5px] font-normal text-muted-foreground underline-offset-2 hover:text-foreground hover:underline ${FOCUS}`}>                <span className="hidden @md:inline">Settings</span>                <ArrowUpRight className="size-3" strokeWidth={2} aria-hidden="true" />              </a>            )}          </p>          <div className="relative mt-0.5 text-[12px] leading-[1.45] text-muted-foreground">            <p className="truncate transition-[opacity,filter] duration-200" style={{ opacity: error ? 0 : 1, filter: error && !reduced ? "blur(3px)" : "none" }}>              {item.description}            </p>            <p              aria-hidden={!error || undefined}              className="pointer-events-none absolute inset-x-0 top-0 truncate text-red-600 dark:text-red-400"              style={{ opacity: error ? 1 : 0, transform: error || reduced ? "none" : "translateY(4px)", transition: reduced ? "none" : `opacity 260ms ${EASE} ${error ? 80 : 0}ms, transform 360ms ${EASE}` }}            >              {error}            </p>          </div>        </div>        {/* Connect and the connected account share the corner: one folds as the other opens. */}        <div className="flex shrink-0 items-center">          <Side open={!connected} reduced={reduced}>            <StatusButton              size="sm"              variant="outline"              status={status}              labels={{ idle: "Connect", pending: "Connecting", success: "Connected", error: "Try again" }}              onClick={() => act.current.connect(item)}              aria-label={`Connect ${item.name}`}            />          </Side>          <Side open={connected} reduced={reduced}>            {account && (              <span className="flex items-center gap-1.5">                <span className="flex max-w-[7.5rem] items-center gap-1.5 rounded-full py-1 pr-2.5 pl-1 text-[12px] shadow-[inset_0_0_0_1px_var(--border)] @sm:max-w-[11rem] @md:max-w-[14rem]">                  <Avatar account={account} />                  <span className="truncate font-medium">{account.name}</span>                  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className="size-3.5 shrink-0 text-emerald-600 dark:text-emerald-400">                    <path                      d="M3.5 8.5 6.5 11.5 12.5 4.5"                      stroke="currentColor"                      strokeWidth="1.9"                      strokeLinecap="round"                      strokeLinejoin="round"                      pathLength={1}                      strokeDasharray={1}                      style={{ strokeDashoffset: connected ? 0 : 1, transition: connected && !reduced ? `stroke-dashoffset 420ms ${EASE} 380ms` : "none" }}                    />                  </svg>                  <span className="sr-only">connected</span>                </span>                {canDisconnect && (                  <ConfirmAction                    icon={<Unplug strokeWidth={1.75} />}                    label={`Disconnect ${item.name}`}                    labels={{ idle: "Disconnect", pending: "Disconnecting", success: "Disconnected", error: "Try again" }}                    onConfirm={() => act.current.disconnect(item)}                  />                )}              </span>            )}          </Side>        </div>      </div>      <Fold open={connected && Boolean(item.scopes?.length || account?.detail)} reduced={reduced}>        <div className="flex flex-wrap items-center gap-1.5 px-4 pb-3 pl-16 text-[11.5px] text-muted-foreground @md:px-5 @md:pl-[4.25rem]">          {account?.detail && <span className="mr-1">{account.detail}</span>}          {item.scopes?.map((s) => (            <span key={s} className="rounded-full px-2 py-0.5 shadow-[inset_0_0_0_1px_var(--border)]">              {s}            </span>          ))}        </div>      </Fold>    </li>  );});export function Integrations({  value,  defaultValue = NONE,  onValueChange,  onConnect,  onDisconnect,  settingsHref,  title = "Integrations",  description = "Connect the tools your team already uses.",  className = "",  ...props}: IntegrationsProps) {  const reduced = useReducedMotion();  const [inner, setInner] = React.useState(defaultValue);  const items = value ?? inner;  const [status, setStatus] = React.useState<Record<string, ActionStatus>>({});  const [errors, setErrors] = React.useState<Record<string, string>>({});  const [category, setCategory] = React.useState(ALL);  const [query, setQuery] = React.useState("");  const [announce, setAnnounce] = React.useState("");  const listRef = React.useRef<HTMLUListElement>(null);  const ghostRef = React.useRef<HTMLDivElement>(null);  const tabRefs = React.useRef<Record<string, HTMLButtonElement | null>>({});  const [bar, setBar] = React.useState({ left: 0, width: 0, ready: false });  const latest = React.useRef(items);  latest.current = items;  const commit = (next: Integration[]) => {    if (value === undefined) setInner(next);    onValueChange?.(next);  };  const drop = <T,>(o: Record<string, T>, key: string) => Object.fromEntries(Object.entries(o).filter(([k]) => k !== key)) as Record<string, T>;  const categories = React.useMemo(() => {    const seen = [...new Set(items.map((i) => i.category).filter(Boolean) as string[])];    return seen.length > 1 ? [ALL, ...seen] : [];  }, [items]);  const q = query.trim().toLowerCase();  const shown = items.filter((i) => (category === ALL || i.category === category) && (!q || i.name.toLowerCase().includes(q) || i.description?.toLowerCase().includes(q)));  const ranks = React.useMemo(() => new Map(items.map((i, n) => [i.id, n])), [items]);  useRowMotion(listRef, { reduced, ranks, ghosts: ghostRef });  const connectedCount = items.filter((i) => i.account).length;  React.useLayoutEffect(() => {    const b = tabRefs.current[category];    if (!b) return;    setBar((p) => (p.left === b.offsetLeft && p.width === b.offsetWidth ? p : { left: b.offsetLeft, width: b.offsetWidth, ready: p.width > 0 }));  }, [category, categories.length]);  const act = React.useRef<RowProps["act"]["current"]>(null!);  act.current = {    // Called straight from the click, so a window opened inside onConnect isn't blocked.    connect: (item) => {      if (status[item.id] === "pending") return;      setStatus((s) => ({ ...s, [item.id]: "pending" }));      setErrors((e) => drop(e, item.id));      onConnect(item).then(        (account) => {          commit(latest.current.map((i) => (i.id === item.id ? { ...i, account } : i)));          setStatus((s) => drop(s, item.id));          setAnnounce(`${item.name} connected as ${account.name}.`);        },        (e) => {          const why = message(e, `${item.name} couldn't be connected.`);          setStatus((s) => ({ ...s, [item.id]: "error" }));          setErrors((x) => ({ ...x, [item.id]: why }));          setAnnounce(why);          window.setTimeout(() => {            setStatus((s) => (s[item.id] === "error" ? drop(s, item.id) : s));            setErrors((x) => (x[item.id] === why ? drop(x, item.id) : x));          }, 4200);        },      );    },    disconnect: async (item) => {      await onDisconnect?.(item);      setAnnounce(`${item.name} disconnected.`);      window.setTimeout(() => commit(latest.current.map((i) => (i.id === item.id ? { ...i, account: null } : i))), 600);    },  };  return (    <div className={`@container w-full rounded-[22px] border border-border bg-background text-foreground ${className}`} {...props}>      <div className="px-4 pt-4 pb-3 @md:px-5 @md:pt-5">        <p className="flex items-baseline gap-2 text-[14px] font-medium tracking-[-0.01em]">          {title}          <span className="inline-flex items-baseline text-[12px] font-normal text-muted-foreground tabular-nums">            <NumberRoll value={connectedCount} />            &nbsp;connected          </span>        </p>        <p className="mt-0.5 text-[12px] text-muted-foreground">{description}</p>      </div>      {(categories.length > 0 || items.length > 6) && (        <div className="flex flex-wrap items-center gap-2 px-4 pb-3 @md:px-5">          {categories.length > 0 && (            <div role="tablist" aria-label="Categories" className="relative -mx-1 flex max-w-full items-center gap-0.5 overflow-x-auto px-1 [scrollbar-width:none]">              <span                aria-hidden="true"                className="absolute top-0 left-0 h-7 rounded-full bg-accent shadow-[inset_0_0_0_1px_var(--border)]"                style={{ width: bar.width, transform: `translateX(${bar.left}px)`, transition: bar.ready && !reduced ? `transform 380ms ${EASE}, width 380ms ${EASE}` : "none" }}              />              {categories.map((c) => (                <button                  key={c}                  ref={(el) => {                    tabRefs.current[c] = el;                  }}                  role="tab"                  aria-selected={category === c}                  tabIndex={category === c ? 0 : -1}                  onClick={() => setCategory(c)}                  onKeyDown={(e) => {                    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;                    if (!step) return;                    e.preventDefault();                    const next = categories[(categories.indexOf(c) + step + categories.length) % categories.length];                    setCategory(next);                    tabRefs.current[next]?.focus();                  }}                  className={`relative h-7 shrink-0 cursor-pointer rounded-full px-3 text-[12px] font-medium whitespace-nowrap transition-colors ${FOCUS} ${category === c ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`}                >                  {c}                </button>              ))}            </div>          )}          <label className="ml-auto flex h-7 min-w-[9rem] flex-1 items-center gap-1.5 rounded-full px-2.5 shadow-[inset_0_0_0_1px_var(--border)] transition-shadow focus-within:shadow-[inset_0_0_0_1px_var(--ring)] @lg:max-w-[14rem]">            <Search className="size-3.5 shrink-0 text-muted-foreground" strokeWidth={1.75} aria-hidden="true" />            <span className="sr-only">Search integrations</span>            <input              type="search"              value={query}              onChange={(e) => setQuery(e.target.value)}              placeholder="Search"              className="h-full min-w-0 flex-1 bg-transparent text-[16px] text-foreground outline-none placeholder:text-muted-foreground/70 [@media(pointer:fine)]:text-[12.5px] [&::-webkit-search-cancel-button]:hidden"            />          </label>        </div>      )}      <div className="relative border-t border-border">        <ul ref={listRef} aria-label={title} className="relative">          {shown.map((i) => (            <Row              key={i.id}              item={i}              status={status[i.id] ?? "idle"}              error={errors[i.id]}              href={i.account ? settingsHref?.(i) : undefined}              canDisconnect={Boolean(onDisconnect)}              reduced={reduced}              act={act}            />          ))}        </ul>        <div ref={ghostRef} aria-hidden="true" className="pointer-events-none absolute inset-0" />        <Fold open={!shown.length} reduced={reduced}>          <p className="px-4 py-6 text-center text-[12.5px] text-muted-foreground">Nothing matches “{query}”.</p>        </Fold>      </div>      <span className="sr-only" role="status">        {announce}      </span>    </div>  );}

/* ───────────────────────────────────────────────────────── * OAUTH WINDOW: open a provider's sign-in in a small window * and wait for your callback page to say how it went * *   open      a centred popup on the provider's authorise URL. *             Call it straight from the click (before any await) *             or the browser will block it *   done      your callback page (same origin as the app) posts *             { type: "oauth:done", ...whatever you need } to *             window.opener, and on a BroadcastChannel as well, *             then closes itself *   closed    if the window closes without a message, the *             promise rejects so the row can say so * * The callback page, for example /integrations/callback: * *   const data = { type: "oauth:done", account: { name: "Northwind" } }; *   window.opener?.postMessage(data, location.origin); *   new BroadcastChannel("oauth").postMessage(data); *   window.close(); * ───────────────────────────────────────────────────────── */export interface OAuthWindowOptions {  /** Window name; one per provider keeps a second click on the same window. */  name?: string;  width?: number;  height?: number;  /** The message type your callback page posts. */  type?: string;  /** Give up after this long (ms). */  timeout?: number;}export function openOAuthWindow<T extends Record<string, unknown> = Record<string, unknown>>(url: string, options: OAuthWindowOptions = {}): Promise<T> {  const { name = "oauth", width = 520, height = 680, type = "oauth:done", timeout = 10 * 60_000 } = options;  const left = Math.round(window.screenX + (window.outerWidth - width) / 2);  const top = Math.round(window.screenY + (window.outerHeight - height) / 2.5);  const popup = window.open(url, name, `popup=yes,width=${width},height=${height},left=${left},top=${top}`);  if (!popup) return Promise.reject(new Error("The sign-in window was blocked. Allow pop-ups for this site and try again."));  popup.focus();  return new Promise<T>((resolve, reject) => {    const channel = "BroadcastChannel" in window ? new BroadcastChannel("oauth") : null;    let settled = false;    let closedAt = 0;    const finish = (data: unknown) => {      if (settled) return;      const msg = data as { type?: string; error?: string } | null;      if (!msg || msg.type !== type) return;      settled = true;      cleanup();      if (msg.error) reject(new Error(String(msg.error)));      else resolve(msg as T);    };    const onMessage = (e: MessageEvent) => {      if (e.origin === window.location.origin) finish(e.data);    };    const onChannel = (e: MessageEvent) => finish(e.data);    const poll = window.setInterval(() => {      if (!popup.closed) return;      // The callback posts right before it closes; give that message a moment to land.      if (!closedAt) closedAt = Date.now();      else if (Date.now() - closedAt > 1200 && !settled) {        settled = true;        cleanup();        reject(new Error("The window was closed before it finished."));      }    }, 300);    const limit = window.setTimeout(() => {      if (settled) return;      settled = true;      cleanup();      reject(new Error("That took too long. Try again."));    }, timeout);    function cleanup() {      window.removeEventListener("message", onMessage);      channel?.removeEventListener("message", onChannel);      channel?.close();      window.clearInterval(poll);      window.clearTimeout(limit);      try {        if (!popup!.closed) popup!.close();      } catch {        /* Already gone. */      }    }    window.addEventListener("message", onMessage);    channel?.addEventListener("message", onChannel);  });}

"use client";import * as React from "react";import { StatusButton, type ActionStatus } from "./status-button";/* ───────────────────────────────────────────────────────── * CONFIRM ACTION: an icon that asks before it acts * *   ask       a click and the icon's own circle stretches into *             a pill: the confirm button opens out to its left *             and the icon turns into a cross that takes it back *   act       the confirm button is a status button, so it says *             Revoking, Revoked or Try again in place *   leave     Escape, the cross, or a click or focus anywhere *             else folds it back into the icon * * Nothing opens over the row it belongs to; the question sits * where the icon was. * ───────────────────────────────────────────────────────── */export interface ConfirmActionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {  icon: React.ReactNode;  /** The icon button's accessible name, e.g. "Revoke Production key". */  label: string;  /** The confirm button's words per state, e.g. { idle: "Revoke", pending: "Revoking", success: "Revoked" }. */  labels?: Partial<Record<ActionStatus, string>>;  /** "danger" makes the confirm red. */  tone?: "danger" | "default";  /** Runs once on confirm. Throw (or reject) to show Try again. */  onConfirm: () => Promise<unknown> | unknown;  /** Back to the icon this long after success (ms); 0 keeps "done" until the row goes. */  resetAfter?: number;  disabled?: boolean;}const EASE = "cubic-bezier(0.16,1,0.3,1)";const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";const reducedQuery = "(prefers-reduced-motion: reduce)";const subscribeReduced = (onChange: () => void) => {  const query = window.matchMedia(reducedQuery);  query.addEventListener("change", onChange);  return () => query.removeEventListener("change", onChange);};const useReducedMotion = () =>  React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);function Cross() {  return (    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className="size-3.5">      <path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />    </svg>  );}export function ConfirmAction({  icon,  label,  labels,  tone = "danger",  onConfirm,  resetAfter = 0,  disabled = false,  className = "",  ...props}: ConfirmActionProps) {  const reduced = useReducedMotion();  const [asking, setAsking] = React.useState(false);  const [status, setStatus] = React.useState<ActionStatus>("idle");  const wrapRef = React.useRef<HTMLDivElement>(null);  const iconRef = React.useRef<HTMLButtonElement>(null);  const run = React.useRef(0);  const busy = status === "pending" || status === "success";  const cancel = React.useCallback(    (refocus: boolean) => {      if (status === "pending") return;      run.current++;      setAsking(false);      setStatus("idle");      if (refocus) iconRef.current?.focus({ preventScroll: true });    },    [status],  );  // The question is open: its button takes focus once it's there to take it.  React.useEffect(() => {    if (asking && status === "idle") wrapRef.current?.querySelector<HTMLButtonElement>("[data-confirm]")?.focus({ preventScroll: true });  }, [asking, status]);  React.useEffect(() => {    if (!asking) return;    const onDown = (e: PointerEvent) => {      if (!wrapRef.current?.contains(e.target as Node)) cancel(false);    };    document.addEventListener("pointerdown", onDown);    return () => document.removeEventListener("pointerdown", onDown);  }, [asking, cancel]);  const confirm = async () => {    if (busy) return;    const mine = ++run.current;    setStatus("pending");    try {      await onConfirm();      if (run.current === mine) setStatus("success");    } catch {      if (run.current === mine) setStatus("error");    }  };  const t = `${reduced ? 0 : 420}ms ${EASE}`;  const red = tone === "danger" ? "text-red-600! hover:bg-red-500/10! dark:text-red-400!" : "";  return (    <div      ref={wrapRef}      className={`relative inline-flex h-7 shrink-0 items-center rounded-full ${className}`}      onKeyDown={(e) => {        if (e.key === "Escape" && asking) {          e.preventDefault();          e.stopPropagation();          cancel(true);        }      }}      onBlur={(e) => {        if (asking && !busy && document.hasFocus() && !wrapRef.current?.contains(e.relatedTarget as Node)) cancel(false);      }}      {...props}    >      {/* The icon's circle, stretched into the pill round the question. */}      <span        aria-hidden="true"        className="pointer-events-none absolute inset-0 rounded-full"        style={{ boxShadow: `inset 0 0 0 1px ${asking ? "var(--border)" : "transparent"}`, transition: `box-shadow ${t}` }}      />      <span        className="grid"        inert={!asking}        style={{          gridTemplateColumns: asking ? "1fr" : "0fr",          opacity: asking ? 1 : 0,          filter: asking || reduced ? "none" : "blur(3px)",          transition: `grid-template-columns ${t}, opacity ${reduced ? 0 : asking ? 320 : 160}ms ${EASE}, filter ${t}`,        }}      >        <span className="min-w-0 [clip-path:inset(-2px_0_-2px_0)]">          <span className="flex w-max items-center pl-0.5">            <StatusButton              data-confirm=""              size="sm"              variant="ghost"              status={status}              labels={{ idle: "Confirm", pending: "Working", success: "Done", error: "Try again", ...labels }}              onClick={confirm}              onReset={resetAfter ? () => cancel(false) : undefined}              resetAfter={resetAfter || undefined}              className={`h-[26px]! ${status === "error" ? "" : red}`}            />          </span>        </span>      </span>      <button        ref={iconRef}        type="button"        aria-label={asking ? "Cancel" : label}        aria-expanded={asking}        disabled={disabled}        onClick={() => (asking ? cancel(true) : setAsking(true))}        className={`relative grid size-7 shrink-0 cursor-pointer place-items-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-40 aria-disabled:cursor-default ${FOCUS}`}        aria-disabled={busy || undefined}      >        {[icon, <Cross key="x" />].map((glyph, i) => {          const on = (i === 1) === asking;          return (            <span              key={i}              aria-hidden="true"              className="absolute inset-0 grid place-items-center [&_svg]:size-3.5"              style={{                opacity: on ? 1 : 0,                transform: on ? "none" : "scale(0.6)",                filter: on || reduced ? "none" : "blur(3px)",                transition: reduced ? "none" : `opacity 260ms ${EASE}, transform 380ms ${EASE}, filter 260ms ${EASE}`,              }}            >              {glyph}            </span>          );        })}      </button>    </div>  );}

"use client";import * as React from "react";/* ───────────────────────────────────────────────────────── * ROW MOTION: rows that keep their place on screen * *   glide     after any render (a sort, a filter, new data from *             the server) every row that moved glides from its *             old place to its new one. Glides are additive, so *             a change that lands mid-glide adds its own offset *             instead of restarting anything *   travel    a row that sorts onto the page slides in from the *             side where it ranked before; one that sorts off *             slides out toward its new rank *   enter     a row that's new to the list fades in where it *             lands while the rows below glide clear of it *   leave     a row that's gone folds away where it stood. Its *             copy is the row's own element, detached by React *             and moved into a layer React never renders into, *             so a leaving row costs no render at all *   stagger   a sort can ask for the rows to set off one after *             another, top first * * Positions are layout offsets (transforms ignored), kept after * every render and whenever the list changes size (a row * opening its detail), so they're never stale. Rows are found * by data-row-id; ranks are their places in the whole sorted * list, not just the page. * ───────────────────────────────────────────────────────── */type Seen = { top: number; height: number; el: HTMLElement };const EASE = "cubic-bezier(0.16,1,0.3,1)";const GLIDE = 480;export function useRowMotion(  container: React.RefObject<HTMLElement | null>,  { reduced, resetKey, ranks, ghosts }: { reduced: boolean; resetKey?: string | number; ranks: ReadonlyMap<string, number>; ghosts: React.RefObject<HTMLElement | null> },) {  const seen = React.useRef(new Map<string, Seen>());  const lastRanks = React.useRef(ranks);  const lastKey = React.useRef(resetKey);  const staggerNext = React.useRef(false);  const read = React.useCallback(() => {    const out = new Map<string, Seen>();    container.current?.querySelectorAll<HTMLElement>("[data-row-id]").forEach((el) => out.set(el.dataset.rowId!, { top: el.offsetTop, height: el.offsetHeight, el }));    return out;  }, [container]);  /** The row React just removed, back on screen where it stood, leaving: sliding toward where it went, or folding. */  const leave = (was: Seen, dy: number) => {    const layer = ghosts.current;    const el = was.el;    if (!layer || el.isConnected) return;    // No getAnimations() here (it flushes style for the whole page): the exit below is added last and replaces any    // glide still on the element.    el.removeAttribute("data-row-id");    el.removeAttribute("tabindex");    el.setAttribute("aria-hidden", "true");    el.inert = true;    Object.assign(el.style, { position: "absolute", left: "0", right: "0", top: `${was.top}px`, height: `${was.height}px`, margin: "0", overflow: "hidden" });    layer.appendChild(el);    const a = el.animate(      dy        ? [            { transform: "translateY(0px)", opacity: 1, filter: "blur(0px)" },            { transform: `translateY(${dy}px)`, opacity: 0, filter: "blur(3px)" },          ]        : [            { opacity: 1, transform: "none", filter: "blur(0px)" },            { opacity: 0, transform: "scale(0.985)", filter: "blur(4px)" },          ],      { duration: dy ? 360 : 280, easing: EASE, fill: "forwards" },    );    a.onfinish = a.oncancel = () => el.remove();  };  React.useLayoutEffect(() => {    const el = container.current;    if (!el) return;    const before = seen.current;    const after = read();    const prevRanks = lastRanks.current;    seen.current = after;    lastRanks.current = ranks;    const stagger = staggerNext.current;    staggerNext.current = false;    if (lastKey.current !== resetKey) {      // A different page: the caller slides the whole body; nothing glides and nothing folds.      lastKey.current = resetKey;      return;    }    if (reduced || !before.size) return;    // A typical row's height. Rows that come onto or leave the page only hint at the way they went (a row and a    // quarter at most), so the list never shows holes while they travel.    const heights = [...after.values()].map((b) => b.height).sort((a, b) => a - b);    const rowH = heights[Math.floor(heights.length / 2)] ?? 48;    const clamp = (dy: number) => Math.max(-rowH * 1.25, Math.min(rowH * 1.25, dy));    let order = 0;    after.forEach((now, id) => {      const row = now.el;      const was = before.get(id);      const delay = stagger ? Math.min(order++ * 16, 200) : 0;      if (was) {        const dy = was.top - now.top;        if (Math.abs(dy) < 0.5) return;        row.animate([{ transform: `translateY(${dy}px)`, zIndex: 1 }, { transform: "translateY(0px)", zIndex: 1 }], { duration: GLIDE, delay, easing: EASE, composite: "add", fill: "backwards" });        return;      }      const from = prevRanks.get(id);      const to = ranks.get(id);      if (from !== undefined && to !== undefined) {        // It ranked somewhere off the page: it comes in from that side.        row.animate(          [            { transform: `translateY(${clamp((from - to) * rowH)}px)`, opacity: 0, filter: "blur(3px)" },            { transform: "translateY(0px)", opacity: 1, filter: "blur(0px)" },          ],          { duration: GLIDE, delay: delay / 2, easing: EASE, fill: "backwards" },        );        return;      }      row.animate(        [          { opacity: 0, filter: "blur(4px)" },          { opacity: 1, filter: "blur(0px)" },        ],        { duration: 420, delay: 90, easing: EASE, fill: "backwards" },      );    });    // Still in the list, just not on this page: its copy slides toward where it went. Gone for good: it folds.    before.forEach((was, id) => {      if (after.has(id)) return;      const from = prevRanks.get(id);      const to = ranks.get(id);      leave(was, from !== undefined && to !== undefined ? clamp((to - from) * rowH) || rowH : 0);    });  });  // The list changed size without a render of ours (a detail opening by transition): keep the positions true.  React.useEffect(() => {    const el = container.current;    if (!el) return;    const observer = new ResizeObserver(() => {      seen.current = read();    });    observer.observe(el);    return () => observer.disconnect();  }, [container, read]);  return {    /** The next change (a sort) sets the rows off one after another. */    stagger: () => {      staggerNext.current = true;    },  };}