@sesamehr/react-design-system 3.10.2 → 3.12.0

package/dist/Display/AvatarGroup/AvatarGroup.d.ts

@@ -34,8 +34,22 @@ export interface AvatarGroupProps extends Omit<React.ButtonHTMLAttributes<HTMLBu
     interactive?: boolean;
     /** The size every avatar in the stack is drawn at. */
     size?: AvatarSize;
-    /** Click handler (only fired when interactive) */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Click handler (only fired when interactive). `avatar` is the avatar the
+     * click landed on and `index` its index into `avatars`.
+     *
+     * Avatars only report themselves while the stack is **complete**. The
+     * moment there is an overflow counter the stack is one affordance for the
+     * whole group, so every click fires with no payload at all, a click straight
+     * on a face included: what is on show is a subset, and pointing at one cannot
+     * stand for a person. So an absent avatar means "the group", and a caller
+     * written before this ignores the arguments and is unaffected.
+     *
+     * The faces are still not individually focusable, since the stack is one
+     * `<button>`, so this is a pointer-grade affordance. A caller that needs
+     * per-person keyboard access has to paint the avatars itself.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, avatar?: AvatarItem, index?: number) => void;
     dataTestid: string;
 }
 export declare const AvatarGroup: import('react').ForwardRefExoticComponent<AvatarGroupProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Display/AvatarGroup/AvatarGroup.js

@@ -1,90 +1,102 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import * as d from "@radix-ui/react-tooltip";
-import { forwardRef as b, useMemo as f } from "react";
-import { cn as y } from "../../lib/utils.js";
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import * as c from "@radix-ui/react-tooltip";
+import { forwardRef as I, useMemo as v } from "react";
+import { cn as $ } from "../../lib/utils.js";
 import o from "./AvatarGroup.module.css.js";
-import { AvatarRounded as g } from "../Avatar/AvatarRounded/AvatarRounded.js";
-import { TooltipContent as I } from "../../Feedback/Tooltip/TooltipContent.js";
-const N = 300, $ = b(
+import { AvatarRounded as G } from "../Avatar/AvatarRounded/AvatarRounded.js";
+import { TooltipContent as R } from "../../Feedback/Tooltip/TooltipContent.js";
+const T = 300, w = I(
   ({
-    className: v,
-    avatars: e,
-    max: c = 3,
-    total: p,
-    interactive: u = !0,
-    size: a = "xs",
-    onClick: s,
-    dataTestid: n,
-    ...x
-  }, G) => {
-    const i = f(() => e.slice(0, c), [e, c]), h = f(() => {
-      const r = p ?? e.length;
-      return Math.max(0, Math.trunc(r) - i.length) || 0;
-    }, [p, e.length, i.length]);
-    return /* @__PURE__ */ t(
+    className: b,
+    avatars: d,
+    max: h = 3,
+    total: x,
+    interactive: A = !0,
+    size: l = "xs",
+    onClick: r,
+    dataTestid: i,
+    ...N
+  }, y) => {
+    const s = v(() => d.slice(0, h), [d, h]), m = v(() => {
+      const t = x ?? d.length;
+      return Math.max(0, Math.trunc(t) - s.length) || 0;
+    }, [x, d.length, s.length]);
+    return /* @__PURE__ */ a(
       "button",
       {
-        ref: G,
+        ref: y,
         type: "button",
         "data-slot": "avatar-group",
-        "data-testid": n,
-        className: y(
+        "data-testid": i,
+        className: $(
           o.oxAvatarGroup,
-          o[`oxAvatarGroup--${a}`],
-          u && o.oxAvatarGroupInteractive,
-          v
+          o[`oxAvatarGroup--${l}`],
+          A && o.oxAvatarGroupInteractive,
+          m > 0 && o.oxAvatarGroupOverflowing,
+          b
         ),
-        onClick: (r) => {
-          u && (s == null || s(r));
+        onClick: (t) => {
+          var u, g;
+          if (!A) return;
+          if (m > 0) {
+            r == null || r(t);
+            return;
+          }
+          const e = (g = (u = t.target) == null ? void 0 : u.closest) == null ? void 0 : g.call(
+            u,
+            "[data-avatar-index]"
+          ), n = e ? Number(e.getAttribute("data-avatar-index")) : -1, f = s[n];
+          f ? r == null || r(t, f, n) : r == null || r(t);
         },
-        ...x,
-        children: /* @__PURE__ */ t(d.Provider, { delayDuration: N, children: /* @__PURE__ */ m("div", { className: o.oxAvatarGroupStack, children: [
-          i.map((r, l) => {
-            const A = /* @__PURE__ */ t(
-              g,
+        ...N,
+        children: /* @__PURE__ */ a(c.Provider, { delayDuration: T, children: /* @__PURE__ */ p("div", { className: o.oxAvatarGroupStack, children: [
+          s.map((t, e) => {
+            const n = /* @__PURE__ */ a(
+              G,
               {
-                role: r.name ? "img" : void 0,
-                "aria-label": r.name,
-                dataTestid: `${n}-avatar-${l}`,
-                src: r.src,
-                size: a,
-                disabled: r.disabled,
-                children: r.initials
+                role: t.name ? "img" : void 0,
+                "aria-label": t.name,
+                dataTestid: `${i}-avatar-${e}`,
+                src: t.src,
+                size: l,
+                disabled: t.disabled,
+                children: t.initials
               }
             );
-            return /* @__PURE__ */ t(
+            return /* @__PURE__ */ a(
               "div",
               {
                 className: o.oxAvatarGroupItem,
-                style: { zIndex: l },
-                children: r.name ? /* @__PURE__ */ m(d.Root, { children: [
-                  /* @__PURE__ */ t(d.Trigger, { asChild: !0, children: A }),
-                  /* @__PURE__ */ t(
-                    I,
+                "data-avatar-index": e,
+                style: { zIndex: e },
+                children: t.name ? /* @__PURE__ */ p(c.Root, { children: [
+                  /* @__PURE__ */ a(c.Trigger, { asChild: !0, children: n }),
+                  /* @__PURE__ */ a(
+                    R,
                     {
-                      dataTestid: `${n}-tooltip-${l}`,
-                      children: r.name
+                      dataTestid: `${i}-tooltip-${e}`,
+                      children: t.name
                     }
                   )
-                ] }) : A
+                ] }) : n
               },
-              l
+              e
             );
           }),
-          h > 0 && /* @__PURE__ */ t(
+          m > 0 && /* @__PURE__ */ a(
             "div",
             {
               className: o.oxAvatarGroupItem,
-              style: { zIndex: i.length },
-              children: /* @__PURE__ */ m(
-                g,
+              style: { zIndex: s.length },
+              children: /* @__PURE__ */ p(
+                G,
                 {
-                  dataTestid: `${n}-count`,
-                  size: a,
+                  dataTestid: `${i}-count`,
+                  size: l,
                   tone: "neutral",
                   children: [
                     "+",
-                    h
+                    m
                   ]
                 }
               )
@@ -95,7 +107,7 @@ const N = 300, $ = b(
     );
   }
 );
-$.displayName = "OxAvatarGroup";
+w.displayName = "OxAvatarGroup";
 export {
-  $ as AvatarGroup
+  w as AvatarGroup
 };

package/dist/Display/AvatarGroup/AvatarGroup.module.css.js

@@ -1,18 +1,20 @@
-const a = "_oxAvatarGroup_11xgt_2", t = "_oxAvatarGroupInteractive_11xgt_2", o = "_oxAvatarGroupStack_11xgt_2", r = "_oxAvatarGroupItem_11xgt_2", x = {
-  oxAvatarGroup: a,
-  "oxAvatarGroup--xs": "_oxAvatarGroup--xs_11xgt_2",
-  "oxAvatarGroup--sm": "_oxAvatarGroup--sm_11xgt_2",
-  "oxAvatarGroup--md": "_oxAvatarGroup--md_11xgt_2",
-  "oxAvatarGroup--lg": "_oxAvatarGroup--lg_11xgt_2",
-  "oxAvatarGroup--xl": "_oxAvatarGroup--xl_11xgt_2",
-  oxAvatarGroupInteractive: t,
-  oxAvatarGroupStack: o,
-  oxAvatarGroupItem: r
+const o = "_oxAvatarGroup_1tcwh_2", a = "_oxAvatarGroupInteractive_1tcwh_2", r = "_oxAvatarGroupOverflowing_1tcwh_2", t = "_oxAvatarGroupStack_1tcwh_2", v = "_oxAvatarGroupItem_1tcwh_2", x = {
+  oxAvatarGroup: o,
+  "oxAvatarGroup--xs": "_oxAvatarGroup--xs_1tcwh_2",
+  "oxAvatarGroup--sm": "_oxAvatarGroup--sm_1tcwh_2",
+  "oxAvatarGroup--md": "_oxAvatarGroup--md_1tcwh_2",
+  "oxAvatarGroup--lg": "_oxAvatarGroup--lg_1tcwh_2",
+  "oxAvatarGroup--xl": "_oxAvatarGroup--xl_1tcwh_2",
+  oxAvatarGroupInteractive: a,
+  oxAvatarGroupOverflowing: r,
+  oxAvatarGroupStack: t,
+  oxAvatarGroupItem: v
 };
 export {
   x as default,
-  a as oxAvatarGroup,
-  t as oxAvatarGroupInteractive,
-  r as oxAvatarGroupItem,
-  o as oxAvatarGroupStack
+  o as oxAvatarGroup,
+  a as oxAvatarGroupInteractive,
+  v as oxAvatarGroupItem,
+  r as oxAvatarGroupOverflowing,
+  t as oxAvatarGroupStack
 };

package/dist/Feedback/Alert/Alert.d.ts

@@ -4,6 +4,11 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     dismissible?: boolean;
     collapsible?: boolean;
     isOpen?: boolean;
+    /**
+     * Drops the "Generated with AI" marker from an `ai` alert. Read on `ai` and
+     * ignored everywhere else.
+     */
+    hideAiTag?: boolean;
     /** Called once the alert has been dismissed. */
     onDismissed?: () => void;
     /** Called with the next open state — the controlled half of `isOpen`. */

package/dist/Feedback/Alert/Alert.js

@@ -1,60 +1,71 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as p, useState as I } from "react";
-import { TransitionFade as y } from "../../Transitions/TransitionFade/TransitionFade.js";
-import { cn as M } from "../../lib/utils.js";
-import o from "./Alert.module.css.js";
-import { AlertContext as N } from "./alert-context.js";
-const j = 200, w = p(
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { IconSesameIa as j } from "@sesame/orxata-icons/IconSesameIa";
+import { Icon as y } from "@sesame/orxata-icons/react";
+import { forwardRef as M, useState as N } from "react";
+import { AiTag as T } from "../../Display/AiTag/AiTag.js";
+import { TransitionFade as w } from "../../Transitions/TransitionFade/TransitionFade.js";
+import { cn as D } from "../../lib/utils.js";
+import m from "./Alert.module.css.js";
+import { AlertContext as F } from "./alert-context.js";
+import { useTranslate as P } from "../../Locale/useTranslate.js";
+const R = 200, _ = M(
   ({
-    className: m,
+    className: c,
     variant: r = "info",
     dismissible: f = !1,
-    collapsible: c = !1,
+    collapsible: x = !1,
     isOpen: t = !0,
-    onDismissed: e,
-    onOpenChange: l,
-    onToggled: i,
+    hideAiTag: d = !1,
+    onDismissed: a,
+    onOpenChange: e,
+    onToggled: o,
     children: u,
-    ...x
+    ...p
   }, A) => {
-    const [a, S] = I(!1), v = () => {
-      S(!0), e == null || e();
-    }, d = () => {
-      l == null || l(!t), i == null || i(!t);
+    const [l, I] = N(!1), S = P(), v = () => {
+      I(!0), a == null || a();
+    }, h = () => {
+      e == null || e(!t), o == null || o(!t);
     };
-    return /* @__PURE__ */ s(
-      N.Provider,
+    return /* @__PURE__ */ i(
+      F.Provider,
       {
         value: {
           variant: r,
-          isDismissed: a,
+          isDismissed: l,
           isOpen: t,
           dismissible: f,
-          collapsible: c,
+          collapsible: x,
           handleDismiss: v,
-          handleToggle: d
+          handleToggle: h
         },
-        children: /* @__PURE__ */ s(y, { in: !a, leaveDuration: j, children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ i(w, { in: !l, leaveDuration: R, children: /* @__PURE__ */ s(
           "div",
           {
             ref: A,
-            className: M(
-              o.oxAlert,
-              o[`oxAlert-${r}`],
-              m
+            className: D(
+              m.oxAlert,
+              m[`oxAlert-${r}`],
+              c
             ),
             role: "alert",
             "aria-live": r === "error" ? "assertive" : "polite",
             "aria-atomic": "true",
-            ...x,
-            children: u
+            ...p,
+            children: [
+              r === "ai" && !d && /* @__PURE__ */ s(T, { dataTestid: "ox-alert-ai-tag", children: [
+                /* @__PURE__ */ i(y, { icon: j, "data-slot": "icon" }),
+                S("orxata.alert.aiTag")
+              ] }),
+              u
+            ]
           }
         ) })
       }
     );
   }
 );
-w.displayName = "OxAlert";
+_.displayName = "OxAlert";
 export {
-  w as Alert
+  _ as Alert
 };

package/dist/Feedback/Alert/Alert.module.css.js

@@ -1,10 +1,11 @@
-const e = "_oxAlert_gm4hh_2", r = {
+const e = "_oxAlert_1nisp_2", r = {
   oxAlert: e,
-  "oxAlert-warning": "_oxAlert-warning_gm4hh_2",
-  "oxAlert-error": "_oxAlert-error_gm4hh_2",
-  "oxAlert-info": "_oxAlert-info_gm4hh_2",
-  "oxAlert-success": "_oxAlert-success_gm4hh_2",
-  "oxAlert-muted": "_oxAlert-muted_gm4hh_2"
+  "oxAlert-warning": "_oxAlert-warning_1nisp_2",
+  "oxAlert-error": "_oxAlert-error_1nisp_2",
+  "oxAlert-info": "_oxAlert-info_1nisp_2",
+  "oxAlert-success": "_oxAlert-success_1nisp_2",
+  "oxAlert-muted": "_oxAlert-muted_1nisp_2",
+  "oxAlert-ai": "_oxAlert-ai_1nisp_2"
 };
 export {
   r as default,

package/dist/Feedback/Alert/AlertDescription.module.css.js

@@ -1,4 +1,4 @@
-const t = "_oxAlertDescription_tbt8n_2", e = {
+const t = "_oxAlertDescription_1swes_2", e = {
   oxAlertDescription: t
 };
 export {

package/dist/Feedback/Alert/AlertIcon.js

@@ -1,37 +1,39 @@
 import { jsx as r } from "react/jsx-runtime";
-import { IconAlertCircle as f } from "@sesame/orxata-icons/IconAlertCircle";
-import { IconAlertTriangle as l } from "@sesame/orxata-icons/IconAlertTriangle";
-import { IconCircleCheck as a } from "@sesame/orxata-icons/IconCircleCheck";
+import { IconAlertCircle as a } from "@sesame/orxata-icons/IconAlertCircle";
+import { IconAlertTriangle as f } from "@sesame/orxata-icons/IconAlertTriangle";
+import { IconCircleCheck as l } from "@sesame/orxata-icons/IconCircleCheck";
 import { IconInfoCircle as s } from "@sesame/orxata-icons/IconInfoCircle";
-import { IconStar as p } from "@sesame/orxata-icons/IconStar";
-import { Icon as I } from "@sesame/orxata-icons/react";
-import { forwardRef as d } from "react";
-import { cn as u } from "../../lib/utils.js";
-import A from "./AlertIcon.module.css.js";
-import { useAlertContext as x } from "./alert-context.js";
-const C = {
+import { IconSesameIa as p } from "@sesame/orxata-icons/IconSesameIa";
+import { IconStar as I } from "@sesame/orxata-icons/IconStar";
+import { Icon as d } from "@sesame/orxata-icons/react";
+import { forwardRef as u } from "react";
+import { cn as A } from "../../lib/utils.js";
+import x from "./AlertIcon.module.css.js";
+import { useAlertContext as C } from "./alert-context.js";
+const g = {
   info: s,
-  warning: l,
-  error: f,
-  success: a,
-  muted: p
-}, g = d(
-  ({ className: t, children: e, dataTestid: o, ...n }, c) => {
-    const { variant: m } = x(), i = C[m];
+  warning: f,
+  error: a,
+  success: l,
+  muted: I,
+  ai: p
+}, h = u(
+  ({ className: t, children: e, dataTestid: o, ...m }, n) => {
+    const { variant: c } = C(), i = g[c];
     return /* @__PURE__ */ r(
       "div",
       {
-        ref: c,
-        className: u(A.oxAlertIcon, t),
+        ref: n,
+        className: A(x.oxAlertIcon, t),
         "data-slot": "icon",
         "data-testid": o,
-        ...n,
-        children: e ?? /* @__PURE__ */ r(I, { icon: i, "data-testid": `${o}-default` })
+        ...m,
+        children: e ?? /* @__PURE__ */ r(d, { icon: i, "data-testid": `${o}-default` })
       }
     );
   }
 );
-g.displayName = "OxAlertIcon";
+h.displayName = "OxAlertIcon";
 export {
-  g as AlertIcon
+  h as AlertIcon
 };

package/dist/Feedback/Alert/AlertLink.d.ts

@@ -1,7 +1,8 @@
 export type AlertLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 /**
- * AlertLink — the action link the board sits to the right of the text, before
- * the close. A `link` prop on `Alert` would carry the text and the destination
- * as configuration; `href` and the rest arrive here as native attributes.
+ * AlertLink — the action link, which the board puts in a row of its own under
+ * the description rather than beside it. A `link` prop on `Alert` would carry
+ * the text and the destination as configuration; `href` and the rest arrive
+ * here as native attributes.
  */
 export declare const AlertLink: import('react').ForwardRefExoticComponent<AlertLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/Feedback/Alert/AlertLink.module.css.js

@@ -1,4 +1,4 @@
-const t = "_oxAlertLink_1kej5_2", e = {
+const t = "_oxAlertLink_manc3_2", e = {
   oxAlertLink: t
 };
 export {

package/dist/Feedback/Alert/alert-context.d.ts

@@ -1,4 +1,4 @@
-export type AlertVariant = 'warning' | 'error' | 'info' | 'success' | 'muted';
+export type AlertVariant = 'warning' | 'error' | 'info' | 'success' | 'muted' | 'ai';
 export interface AlertContextValue {
     variant: AlertVariant;
     isDismissed: boolean;

package/dist/Forms/Inputs/Combobox/ComboboxContent.d.ts

@@ -3,5 +3,7 @@ export interface ComboboxContentProps extends Omit<React.ComponentPropsWithoutRe
     side?: 'top' | 'right' | 'bottom' | 'left';
     sideOffset?: number;
     align?: 'start' | 'center' | 'end';
+    /** Called when the end of the list comes into view. */
+    onReachEnd?: () => void;
 }
 export declare const ComboboxContent: import('react').ForwardRefExoticComponent<ComboboxContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/Combobox/ComboboxContent.js

@@ -1,78 +1,90 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
 import * as c from "@radix-ui/react-popover";
-import { Command as h, CommandInput as v, CommandList as N } from "cmdk";
-import { forwardRef as P, useRef as L } from "react";
+import { Command as P, CommandInput as S, CommandList as L } from "cmdk";
+import { forwardRef as F, useRef as j, useState as A } from "react";
 /* empty css                    */
-import { useComboboxContext as F } from "./context.js";
-import { Surface as S } from "../../../internal/Surface/Surface.js";
-import { ListboxViewport as j } from "../../../internal/Listbox/ListboxViewport.js";
-import { Scrollbar as A } from "../../../Layout/Scrollbar/Scrollbar.js";
-const D = 16, I = P(
+import { useComboboxContext as D } from "./context.js";
+import { useReachEnd as I } from "./useReachEnd.js";
+import { Surface as O } from "../../../internal/Surface/Surface.js";
+import { ListboxViewport as R } from "../../../internal/Listbox/ListboxViewport.js";
+import { Scrollbar as k } from "../../../Layout/Scrollbar/Scrollbar.js";
+const w = 16, G = F(
   ({
-    children: n,
+    children: d,
     side: b = "bottom",
-    sideOffset: d = 4,
-    align: p = "start",
-    onInteractOutside: m,
-    onEscapeKeyDown: i,
-    ...x
-  }, f) => {
-    const { search: e, cancelOpenEdit: u, skipFilter: C } = F(), l = L(null);
-    return /* @__PURE__ */ r(c.Portal, { children: /* @__PURE__ */ r(
+    sideOffset: p = 4,
+    align: x = "start",
+    onInteractOutside: e,
+    onEscapeKeyDown: m,
+    onReachEnd: a,
+    ...f
+  }, u) => {
+    const { search: s, cancelOpenEdit: h, skipFilter: C } = D(), i = j(null), [v, N] = A(null);
+    return I(i, v, a), /* @__PURE__ */ r(c.Portal, { children: /* @__PURE__ */ r(
       c.Content,
       {
-        ref: f,
+        ref: u,
         asChild: !0,
         "data-slot": "combobox-content",
         side: b,
-        sideOffset: d,
-        collisionPadding: D,
-        align: p,
+        sideOffset: p,
+        collisionPadding: w,
+        align: x,
         onOpenAutoFocus: (o) => o.preventDefault(),
         onInteractOutside: (o) => {
-          var a;
+          var n;
           const t = o.target;
-          (a = t == null ? void 0 : t.closest) != null && a.call(t, '[data-slot="combobox"]') && o.preventDefault(), m == null || m(o);
+          (n = t == null ? void 0 : t.closest) != null && n.call(t, '[data-slot="combobox"]') && o.preventDefault(), e == null || e(o);
         },
         onEscapeKeyDown: (o) => {
-          u() && o.preventDefault(), i == null || i(o);
+          h() && o.preventDefault(), m == null || m(o);
         },
-        ...x,
-        children: /* @__PURE__ */ s(S, { children: [
-          /* @__PURE__ */ s(
-            h,
+        ...f,
+        children: /* @__PURE__ */ l(O, { children: [
+          /* @__PURE__ */ l(
+            P,
             {
               shouldFilter: !C,
-              value: e,
+              value: s,
               className: "ox-combobox-command",
               children: [
                 /* @__PURE__ */ r(
-                  v,
+                  S,
                   {
-                    value: e,
+                    value: s,
                     "aria-hidden": !0,
                     tabIndex: -1,
                     className: "ox-combobox-hidden-input"
                   }
                 ),
-                /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ r(
-                  j,
+                /* @__PURE__ */ r(L, { asChild: !0, children: /* @__PURE__ */ l(
+                  R,
                   {
-                    ref: l,
+                    ref: i,
                     className: "ox-combobox-viewport",
-                    children: n
+                    children: [
+                      d,
+                      a && /* @__PURE__ */ r(
+                        "div",
+                        {
+                          ref: N,
+                          className: "ox-combobox-reach-end",
+                          "aria-hidden": !0
+                        }
+                      )
+                    ]
                   }
                 ) })
               ]
             }
           ),
-          /* @__PURE__ */ r(A, { port: l, dataTestid: "combobox-scrollbar" })
+          /* @__PURE__ */ r(k, { port: i, dataTestid: "combobox-scrollbar" })
         ] })
       }
     ) });
   }
 );
-I.displayName = "OxComboboxContent";
+G.displayName = "OxComboboxContent";
 export {
-  I as ComboboxContent
+  G as ComboboxContent
 };

package/dist/Forms/Inputs/Combobox/useReachEnd.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+/**
+ * Reports that the end of a scrolling list has come into view, once per
+ * arrival.
+ *
+ * An `IntersectionObserver` and not a scroll listener because of the re-arm: a
+ * listener has to be disarmed after firing or it fires on every frame the user
+ * sits at the bottom, and then something has to decide when to arm it again.
+ * The observer re-fires on the transition for free.
+ *
+ * The sentinel arrives as an element and the port as a ref, which is the one
+ * place this diverges from the Vue composable. It has to: the list mounts when
+ * it opens, long after this hook first runs, and a ref filling in is not a
+ * render — so a hook waiting on `sentinel.current` waits for ever. A callback
+ * ref behind state is what turns the element arriving into something the effect
+ * can hang off. By the time it has, `port.current` is set too: both land in the
+ * same commit.
+ *
+ * @param port The scrolling element, which is also the observer's root.
+ * @param sentinel An empty element at the end of the list, inside `port`.
+ */
+export declare function useReachEnd(port: RefObject<HTMLElement | null>, sentinel: HTMLElement | null, reached: (() => void) | undefined): void;