@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/{message-tray-DwrBLJlf.js → message-tray-C0a6CL1_.js}

@@ -1,20 +1,21 @@
-import { jsx as s, jsxs as c, Fragment as q } from "react/jsx-runtime";
-import { forwardRef as re, useState as ne, useCallback as ie, useEffect as B, useRef as m, useMemo as de, useImperativeHandle as oe } from "react";
-import * as x from "@radix-ui/react-popover";
-import { c as S } from "./index-D2ZczOXr.js";
-import { useTranslation as L } from "react-i18next";
+import { jsx as s, jsxs as c, Fragment as _ } from "react/jsx-runtime";
+import { forwardRef as re, useState as ie, useCallback as ne, useEffect as E, useRef as p, useMemo as de, useImperativeHandle as oe } from "react";
+import * as T from "@radix-ui/react-popover";
+import { c as j } from "./index-D2ZczOXr.js";
+import { useTranslation as H } from "react-i18next";
 import { u as ce } from "./use-controllable-state-BiY4xTzM.js";
 import { u as le } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
 import { I as me } from "./icon-button-LqoiKcUN.js";
-import { B as A } from "./button-DD_0Xdmr.js";
-import { S as E } from "./separator-CYU_bGFn.js";
-import { S as f } from "./skeleton-CZbwyJAA.js";
-import { M as pe } from "./message-card-Bx4GmLvf.js";
-import { u as ge } from "./registry-DvAUVLHh.js";
-import { M as F } from "./mail-C8irm52s.js";
-const ue = {
+import { B as L } from "./button-DD_0Xdmr.js";
+import { S as F } from "./separator-CYU_bGFn.js";
+import { S as h } from "./skeleton-CZbwyJAA.js";
+import { S as pe } from "./scroll-area-BZOvUhwQ.js";
+import { M as ge } from "./message-card-DsHFFiL1.js";
+import { u as ue } from "./registry-DvAUVLHh.js";
+import { M as V } from "./mail-C8irm52s.js";
+const fe = {
   id: "message-tray",
-  capabilities: ["open", "close", "select_single", "dismiss"],
+  capabilities: ["open", "close", "select_single", "dismiss", "navigate"],
   state: {
     items: {
       type: "Array<{ id: string; read: boolean }>",
@@ -120,6 +121,26 @@ const ue = {
       invoke: (a, t) => {
         a.dismiss(t.id);
       }
+    },
+    mark_all_read: {
+      // Persists read-intent across every message, reversible per-message — write.
+      safety: "write",
+      idempotent: !0,
+      descriptionKey: "ui.agent.messageTray.actions.markAllRead",
+      description: "Request the host to mark every message as read.",
+      invoke: (a) => {
+        a.markAllRead();
+      }
+    },
+    view_all: {
+      // Navigates to the full inbox surface — ephemeral view change, read.
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.messageTray.actions.viewAll",
+      description: "Navigate to the full inbox / message list.",
+      invoke: (a) => {
+        a.viewAll();
+      }
     }
   },
   domHooks: {
@@ -138,7 +159,7 @@ const ue = {
       description: "Stable message id emitted on each rendered MessageCard inside the tray."
     }
   }
-}, fe = S("ds:relative ds:inline-flex ds:items-center", {
+}, ve = j("ds:relative ds:inline-flex ds:items-center", {
   variants: {
     size: {
       sm: "",
@@ -148,7 +169,7 @@ const ue = {
   defaultVariants: {
     size: "md"
   }
-}), ve = S(
+}), he = j(
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
@@ -184,7 +205,7 @@ const ue = {
       size: "md"
     }
   }
-), he = S(
+), ye = j(
   [
     "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
     "ds:inline-flex ds:items-center ds:justify-center",
@@ -196,29 +217,29 @@ const ue = {
     "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
   ].join(" ")
 );
-function ye(a, t) {
+function xe(a, t) {
   return a > 99 ? t : String(a);
 }
-function z() {
+function C() {
   return /* @__PURE__ */ c(
     "div",
     {
       "aria-hidden": "true",
       className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
       children: [
-        /* @__PURE__ */ s(f, { variant: "circular", size: "sm" }),
+        /* @__PURE__ */ s(h, { variant: "circular", size: "sm" }),
         /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ s(f, { variant: "text", size: "md", width: "60%" }),
-          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "80%" }),
-          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "95%" }),
-          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "30%" })
+          /* @__PURE__ */ s(h, { variant: "text", size: "md", width: "60%" }),
+          /* @__PURE__ */ s(h, { variant: "text", size: "sm", width: "80%" }),
+          /* @__PURE__ */ s(h, { variant: "text", size: "sm", width: "95%" }),
+          /* @__PURE__ */ s(h, { variant: "text", size: "sm", width: "30%" })
         ] })
       ]
     }
   );
 }
-function xe() {
-  const { t: a } = L();
+function be() {
+  const { t: a } = H();
   return /* @__PURE__ */ c(
     "div",
     {
@@ -231,7 +252,7 @@ function xe() {
           {
             "aria-hidden": "true",
             className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
-            children: /* @__PURE__ */ s(F, {})
+            children: /* @__PURE__ */ s(V, {})
           }
         ),
         /* @__PURE__ */ s("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: a("messageTray.noMessages", "No messages") }),
@@ -240,147 +261,156 @@ function xe() {
     }
   );
 }
-const be = re(
+const Te = re(
   ({
     id: a,
     items: t,
-    unreadCount: b,
-    open: H,
-    onOpenChange: _,
-    onItemClick: p,
-    onDismiss: g,
-    onMarkRead: v,
-    onMarkAllRead: C,
-    loading: U = !1,
-    maxVisible: W,
-    viewAllLabel: M,
-    onViewAll: Y,
+    unreadCount: w,
+    open: U,
+    onOpenChange: W,
+    onItemClick: g,
+    onDismiss: u,
+    onMarkRead: y,
+    onMarkAllRead: l,
+    loading: Y = !1,
+    maxVisible: A,
+    viewAllLabel: k,
+    onViewAll: f,
     align: G = "end",
     side: J = "bottom",
-    size: T = "md",
+    size: N = "md",
     className: Q,
     ...X
   }, Z) => {
-    var K;
-    const { t: d } = L(), [$, h] = ce({
-      value: H,
+    var P;
+    const { t: d } = H(), [$, x] = ce({
+      value: U,
       defaultValue: !1,
-      onChange: _
-    }), w = $ ?? !1, [u, R] = ne(
+      onChange: W
+    }), S = $ ?? !1, [v, O] = ie(
       () => t.map((e) => ({ item: e, leaving: !1 }))
-    ), j = ie(() => {
+    ), R = ne(() => {
       if (typeof window > "u") return 200;
       const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
       if (!e) return 200;
-      const r = e.trim(), n = parseFloat(r);
-      return Number.isFinite(n) ? r.endsWith("ms") ? n : n * 1e3 : 200;
+      const r = e.trim(), i = parseFloat(r);
+      return Number.isFinite(i) ? r.endsWith("ms") ? i : i * 1e3 : 200;
     }, []);
     le(() => {
-      R((e) => {
-        const r = new Set(t.map((i) => i.id)), n = new Set(e.map((i) => i.item.id)), o = e.map((i) => {
-          if (r.has(i.item.id)) {
-            const P = t.find((te) => te.id === i.item.id);
-            return P ? { item: P, leaving: !1 } : { ...i, leaving: !0 };
+      O((e) => {
+        const r = new Set(t.map((n) => n.id)), i = new Set(e.map((n) => n.item.id)), o = e.map((n) => {
+          if (r.has(n.item.id)) {
+            const B = t.find((te) => te.id === n.item.id);
+            return B ? { item: B, leaving: !1 } : { ...n, leaving: !0 };
           }
-          return { ...i, leaving: !0 };
+          return { ...n, leaving: !0 };
         });
-        for (const i of t)
-          n.has(i.id) || o.push({ item: i, leaving: !1 });
+        for (const n of t)
+          i.has(n.id) || o.push({ item: n, leaving: !1 });
         return o;
       });
-    }, [t]), B(() => {
-      if (!u.some((n) => n.leaving)) return;
-      const e = j(), r = setTimeout(() => {
-        R((n) => n.filter((o) => !o.leaving));
+    }, [t]), E(() => {
+      if (!v.some((i) => i.leaving)) return;
+      const e = R(), r = setTimeout(() => {
+        O((i) => i.filter((o) => !o.leaving));
       }, e);
       return () => clearTimeout(r);
-    }, [u, j]);
-    const N = m(null), O = m((K = t[0]) == null ? void 0 : K.id);
-    B(() => {
-      var n;
-      const e = (n = t[0]) == null ? void 0 : n.id, r = O.current;
-      if (r && e && r !== e && N.current) {
+    }, [v, R]);
+    const z = p(null), I = p((P = t[0]) == null ? void 0 : P.id);
+    E(() => {
+      var i;
+      const e = (i = t[0]) == null ? void 0 : i.id, r = I.current;
+      if (r && e && r !== e && z.current) {
         const o = t[0];
-        o && !o.read && (N.current.textContent = d("messageTray.newMessage", {
+        o && !o.read && (z.current.textContent = d("messageTray.newMessage", {
           sender: o.sender.name,
           defaultValue: "New message from {{sender}}"
         }));
       }
-      O.current = e;
+      I.current = e;
     }, [t, d]);
-    const y = b ?? 0, D = y > 0 ? d("messageTray.triggerLabel", {
-      count: y,
+    const b = w ?? 0, D = b > 0 ? d("messageTray.triggerLabel", {
+      count: b,
       defaultValue: "Messages, {{count}} unread"
-    }) : d("messageTray.triggerLabelNone", "Messages, none unread"), ee = ye(
-      y,
+    }) : d("messageTray.triggerLabelNone", "Messages, none unread"), ee = xe(
+      b,
       d("messageTray.badgeCountOverflow", "99+")
-    ), se = ve({ size: T }), l = m(t);
-    l.current = t;
-    const k = m(b);
-    k.current = b;
-    const I = m(w);
-    I.current = w;
+    ), se = he({ size: N }), m = p(t);
+    m.current = t;
+    const K = p(w);
+    K.current = w;
+    const M = p(S);
+    M.current = S;
     const ae = de(
       () => ({
-        open: () => h(!0),
-        close: () => h(!1),
-        isOpen: () => I.current,
-        getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
-        getUnreadCount: () => k.current ?? l.current.filter((e) => !e.read).length,
+        open: () => x(!0),
+        close: () => x(!1),
+        isOpen: () => M.current,
+        getItems: () => m.current.map((e) => ({ id: e.id, read: !!e.read })),
+        getUnreadCount: () => K.current ?? m.current.filter((e) => !e.read).length,
         selectItem: (e) => {
-          const r = l.current.find((n) => n.id === e);
-          r && (p == null || p(r));
+          const r = m.current.find((i) => i.id === e);
+          r && (g == null || g(r));
         },
         markRead: (e) => {
-          const r = l.current.find((n) => n.id === e);
-          r && (v == null || v(r));
+          const r = m.current.find((i) => i.id === e);
+          r && (y == null || y(r));
         },
         dismiss: (e) => {
-          const r = l.current.find((n) => n.id === e);
-          r && (g == null || g(r));
-        }
+          const r = m.current.find((i) => i.id === e);
+          r && (u == null || u(r));
+        },
+        markAllRead: () => l == null ? void 0 : l(),
+        viewAll: () => f == null ? void 0 : f()
       }),
-      [h, p, v, g]
-    ), V = m(null);
-    return oe(Z, () => V.current, []), ge(ue, ae, a), /* @__PURE__ */ s(
+      [
+        x,
+        g,
+        y,
+        u,
+        l,
+        f
+      ]
+    ), q = p(null);
+    return oe(Z, () => q.current, []), ue(fe, ae, a), /* @__PURE__ */ s(
       "div",
       {
-        ref: V,
+        ref: q,
         "data-component": "message-tray",
         "data-component-id": a,
-        className: [fe({ size: T }), Q].filter(Boolean).join(" "),
+        className: [ve({ size: N }), Q].filter(Boolean).join(" "),
         ...X,
-        children: /* @__PURE__ */ c(x.Root, { open: w, onOpenChange: h, children: [
-          /* @__PURE__ */ s(x.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ c(T.Root, { open: S, onOpenChange: x, children: [
+          /* @__PURE__ */ s(T.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
             me,
             {
-              icon: /* @__PURE__ */ s(F, {}),
+              icon: /* @__PURE__ */ s(V, {}),
               intent: "outline",
-              size: T === "sm" ? "sm" : "md",
+              size: N === "sm" ? "sm" : "md",
               "aria-label": D,
               "aria-haspopup": "dialog"
             }
           ) }),
-          y > 0 ? /* @__PURE__ */ s(
+          b > 0 ? /* @__PURE__ */ s(
             "span",
             {
               "aria-hidden": "true",
               "data-testid": "message-tray-badge",
-              className: he(),
+              className: ye(),
               children: ee
             }
           ) : null,
           /* @__PURE__ */ s(
             "div",
             {
-              ref: N,
+              ref: z,
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "ds:sr-only"
             }
           ),
-          /* @__PURE__ */ s(x.Portal, { children: /* @__PURE__ */ c(
-            x.Content,
+          /* @__PURE__ */ s(T.Portal, { children: /* @__PURE__ */ c(
+            T.Content,
             {
               role: "dialog",
               "aria-label": d("messageTray.panelTitle", "Messages"),
@@ -392,52 +422,59 @@ const be = re(
               children: [
                 /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: [
                   /* @__PURE__ */ s("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: d("messageTray.panelTitle", "Messages") }),
-                  C && t.some((e) => !e.read) ? /* @__PURE__ */ s(
-                    A,
+                  l && t.some((e) => !e.read) ? /* @__PURE__ */ s(
+                    L,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: C,
+                      onClick: l,
                       className: "ds:text-[length:var(--font-size-xs)]",
                       children: d("messageTray.markAllRead", "Mark all as read")
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ s(E, {}),
+                /* @__PURE__ */ s(F, {}),
                 /* @__PURE__ */ s(
-                  "div",
+                  pe,
                   {
-                    role: u.length > 0 ? "list" : void 0,
-                    "data-max-visible": W,
-                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]",
-                    children: U ? /* @__PURE__ */ c(q, { children: [
-                      /* @__PURE__ */ s(z, {}),
-                      /* @__PURE__ */ s(z, {}),
-                      /* @__PURE__ */ s(z, {})
-                    ] }) : u.length === 0 ? /* @__PURE__ */ s(xe, {}) : u.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
-                      pe,
+                    orientation: "vertical",
+                    className: "ds:flex-1 ds:min-h-0 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]",
+                    children: /* @__PURE__ */ s(
+                      "div",
                       {
-                        item: e,
-                        variant: "compact",
-                        leaving: r,
-                        onActivate: p,
-                        onDismiss: g,
-                        "data-message-id": e.id
-                      },
-                      e.id
-                    ))
+                        role: v.length > 0 ? "list" : void 0,
+                        "data-max-visible": A,
+                        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:pt-[var(--spacing-xs)]",
+                        children: Y ? /* @__PURE__ */ c(_, { children: [
+                          /* @__PURE__ */ s(C, {}),
+                          /* @__PURE__ */ s(C, {}),
+                          /* @__PURE__ */ s(C, {})
+                        ] }) : v.length === 0 ? /* @__PURE__ */ s(be, {}) : v.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
+                          ge,
+                          {
+                            item: e,
+                            variant: "compact",
+                            leaving: r,
+                            onActivate: g,
+                            onDismiss: u,
+                            "data-message-id": e.id
+                          },
+                          e.id
+                        ))
+                      }
+                    )
                   }
                 ),
-                M ? /* @__PURE__ */ c(q, { children: [
-                  /* @__PURE__ */ s(E, {}),
+                k ? /* @__PURE__ */ c(_, { children: [
+                  /* @__PURE__ */ s(F, {}),
                   /* @__PURE__ */ s("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ s(
-                    A,
+                    L,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: Y,
+                      onClick: f,
                       className: "ds:w-full ds:justify-center",
-                      children: M
+                      children: k
                     }
                   ) })
                 ] }) : null
@@ -449,9 +486,9 @@ const be = re(
     );
   }
 );
-be.displayName = "MessageTray";
+Te.displayName = "MessageTray";
 export {
-  be as M,
-  ue as m
+  Te as M,
+  fe as m
 };
-//# sourceMappingURL=message-tray-DwrBLJlf.js.map
+//# sourceMappingURL=message-tray-C0a6CL1_.js.map