@alfadocs/ui-kit-debug 0.69.0 → 0.71.0

package/dist/_chunks/message-card-DsHFFiL1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card-DsHFFiL1.js","sources":["../../src/components/message-card/message-card.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Avatar } from '../avatar/avatar';\nimport { Timestamp } from '../timestamp';\nimport { isSafeEntityUrl } from '../_shared/is-safe-url';\n\n// Back-compat alias — the URL guard now lives in the shared entity-card\n// helper. Existing consumers (and this dir's tests) import isSafeMessageUrl.\nexport { isSafeEntityUrl as isSafeMessageUrl } from '../_shared/is-safe-url';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface MessageSender {\n  /** Display name — drives the avatar's deterministic colour + initials. */\n  name: string;\n  /** Optional avatar image URL. */\n  avatarUrl?: string;\n}\n\nexport interface MessageItem {\n  /** Unique identifier for the message (or thread). */\n  id: string;\n  /** Sender identity — avatar + bold display name. */\n  sender: MessageSender;\n  /** Optional subject / conversation title. Rendered bold when unread. */\n  subject?: string;\n  /** Last-message preview — rendered as plain text, clamped to two lines. */\n  preview: string;\n  /** ISO-8601 timestamp of when the message was sent. */\n  sentAt: string;\n  /** Whether the message has been seen. Unread items get accent styling. */\n  read?: boolean;\n  /** Optional deep link — when present the card row is an anchor. */\n  url?: string;\n  /**\n   * Count of unread messages inside a thread. Rendered as an end-aligned\n   * badge when greater than 1.\n   */\n  unreadCount?: number;\n}\n\nexport interface MessageCardProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof cardVariants> {\n  /** The message to render. */\n  item: MessageItem;\n  /**\n   * Layout shape.\n   * - `compact` — single-line row with the whole card clickable (used by\n   *   MessageTray).\n   * - `dashboard` — bordered block with explicit CTA and mark-as-read\n   *   controls (used by dashboards / sidebars).\n   */\n  variant?: 'compact' | 'dashboard';\n  /**\n   * Fires when the read/unread status ball (the corner badge on the avatar) is\n   * activated. Supply to make the ball an interactive toggle; omit and it\n   * renders as a static read-state indicator.\n   */\n  onToggleRead?: (item: MessageItem) => void;\n  /**\n   * Row chrome for the `compact` variant (ignored for `dashboard`). `'flat'`\n   * (default) — chrome-less row inside a bordered tray. `'elevated'` — own\n   * card chrome (border + `--shadow-sm`), matching `AppointmentCard` /\n   * `ClinicalNoteCard` for rail feeds (e.g. the Inbox).\n   */\n  surface?: 'flat' | 'elevated';\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the row / title is activated. */\n  onActivate?: (item: MessageItem) => void;\n  /** Fires when the dismiss control is activated. */\n  onDismiss?: (item: MessageItem) => void;\n  /**\n   * Label for the dashboard-variant CTA. Only rendered when `variant` is\n   * `'dashboard'` and the item has a `url`.\n   */\n  ctaLabel?: string;\n  /**\n   * Label for the dashboard-variant mark-as-read link. Only rendered when\n   * `variant` is `'dashboard'` and `onDismiss` is supplied.\n   */\n  dismissLabel?: string;\n  /**\n   * External exit-animation control. When supplied the card plays its\n   * fade-out when this turns `true` and the consumer owns the subsequent\n   * unmount (see MessageTray). If omitted, the card self-manages the\n   * exit on internal dismiss.\n   */\n  leaving?: boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n  [\n    'ds:relative ds:flex ds:gap-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:transition-colors',\n    'ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2 ds:motion-safe:duration-[var(--animation-duration)]',\n    'ds:data-[leaving=true]:motion-safe:animate-out ds:data-[leaving=true]:motion-safe:fade-out-0 ds:data-[leaving=true]:motion-safe:slide-out-to-top-2',\n    'ds:data-[leaving=true]:motion-safe:fill-mode-forwards',\n    'ds:data-[leaving=true]:pointer-events-none',\n    'ds:motion-reduce:transition-none',\n    'ds:text-start',\n    // Compact rows are borderless (flat list — the rail / tray panel is the\n    // frame), matching NotificationCard so a mixed inbox feed reads as one\n    // flat list; the dashboard variant adds its own card border below.\n    // Forced-colors keeps a border on both so rows stay separated in HCM.\n    'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Flat rows by default; the accessible (AAA) theme restores a hairline\n        // row divider so consecutive rows keep a visible boundary.\n        compact:\n          'ds:items-start ds:group ds:[.theme-accessible_&]:border-b ds:[.theme-accessible_&]:border-[color:var(--card-border)]',\n        dashboard:\n          'ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2 ds:bg-[color:var(--card)]',\n      },\n      size: {\n        sm: 'ds:p-[var(--spacing-sm)]',\n        md: 'ds:p-[var(--spacing-md)]',\n      },\n      state: {\n        unread: '',\n        read: 'ds:bg-transparent',\n      },\n      // Compact-row chrome: flat (tray) vs elevated (own card on a rail).\n      // Mirrors AppointmentCard / NotificationCard so a rail feed of mixed\n      // cards reads consistently.\n      surface: {\n        flat: '',\n        elevated:\n          'ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]',\n      },\n    },\n    compoundVariants: [\n      // Compact rows no longer tint the background for unread — the read state\n      // is carried by the avatar's corner status ball instead.\n      {\n        variant: 'compact',\n        state: 'unread',\n        class: 'ds:hover:bg-[color:var(--muted)]/40',\n      },\n      {\n        variant: 'compact',\n        state: 'read',\n        class: 'ds:hover:bg-[color:var(--muted)]/40',\n      },\n      {\n        variant: 'dashboard',\n        state: 'unread',\n        class: 'ds:bg-[color:var(--accent)]/5',\n      },\n    ],\n    defaultVariants: {\n      variant: 'compact',\n      size: 'sm',\n      state: 'read',\n      surface: 'flat',\n    },\n  },\n);\n\nconst stretchedLinkClass = [\n  'ds:focus-visible:outline-none',\n  \"ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]\",\n  'ds:after:pointer-events-auto',\n  'ds:focus-visible:after:outline-[length:var(--focus-ring-width)]',\n  'ds:focus-visible:after:outline-solid',\n  'ds:focus-visible:after:outline-[color:var(--ring)]',\n  'ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const MessageCard = forwardRef<HTMLDivElement, MessageCardProps>(\n  (\n    {\n      item,\n      variant = 'compact',\n      surface = 'flat',\n      size = 'sm',\n      onActivate,\n      onToggleRead,\n      onDismiss,\n      ctaLabel,\n      dismissLabel,\n      leaving,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n\n    const accessibleTime = useMemo(() => {\n      const date = new Date(item.sentAt);\n      if (Number.isNaN(date.getTime())) return '';\n      return new Intl.DateTimeFormat(i18n.language, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      }).format(date);\n    }, [item.sentAt, i18n.language]);\n\n    const isControlledLeaving = leaving !== undefined;\n    const [isLeaving, setIsLeaving] = useState(false);\n    const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const effectiveLeaving = isControlledLeaving ? leaving : isLeaving;\n\n    const prefersReducedMotion =\n      typeof window !== 'undefined' &&\n      typeof window.matchMedia === 'function' &&\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const handleDismiss = useCallback(\n      (event?: React.MouseEvent) => {\n        // The card carries a stretched-link `::after` overlay for the\n        // whole-row click target. The dismiss button is rendered above it\n        // (z-index), but click events still bubble — stop propagation so the\n        // wrapper's navigation does not fire alongside the dismiss action.\n        event?.preventDefault();\n        event?.stopPropagation();\n        if (!onDismiss) return;\n        if (isControlledLeaving || prefersReducedMotion) {\n          onDismiss(item);\n          return;\n        }\n        setIsLeaving(true);\n        if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);\n        const raw =\n          (typeof window !== 'undefined' &&\n            window\n              .getComputedStyle(document.documentElement)\n              .getPropertyValue('--animation-duration')) ||\n          '200ms';\n        const ms = raw.trim().endsWith('ms')\n          ? parseFloat(raw)\n          : parseFloat(raw) * 1000;\n        dismissTimerRef.current = setTimeout(\n          () => onDismiss(item),\n          Number.isFinite(ms) ? ms : 200,\n        );\n      },\n      [onDismiss, item, isControlledLeaving, prefersReducedMotion],\n    );\n\n    const state = item.read ? 'read' : 'unread';\n\n    const unreadSuffix = item.read\n      ? ''\n      : t('messageCard.unreadSuffix', ', unread');\n    const subjectFragment = item.subject\n      ? t('messageCard.subjectFragment', {\n          subject: item.subject,\n          defaultValue: ' — {{subject}}',\n        })\n      : '';\n    const ariaLabel = t('messageCard.itemLabel', {\n      sender: item.sender.name,\n      subjectFragment,\n      time: accessibleTime,\n      unreadSuffix,\n      defaultValue:\n        'Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}',\n    });\n\n    const hasSafeUrl = !!item.url && isSafeEntityUrl(item.url);\n\n    /* ------- Sender-name rendering (stretched link in compact mode) ------ */\n\n    const senderText = (\n      <span\n        className={[\n          'ds:flex-1 ds:min-w-0 ds:truncate',\n          item.read ? 'ds:font-normal' : 'ds:font-semibold',\n        ].join(' ')}\n      >\n        {item.sender.name}\n      </span>\n    );\n\n    let senderNode: ReactNode;\n    if (variant === 'compact' && hasSafeUrl && onActivate) {\n      senderNode = (\n        <a\n          href={item.url}\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' ds:contents'}\n          onClick={(event) => {\n            // Let the browser handle modifier-click (open in new tab,\n            // download, etc.) and respect upstream preventDefault.\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            // When the consumer wires `onActivate`, they own routing — stop\n            // the browser's default navigation so we don't full-page reload\n            // out of an SPA shell or a test iframe.\n            event.preventDefault();\n            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else if (variant === 'compact' && onActivate) {\n      senderNode = (\n        <button\n          type=\"button\"\n          aria-label={ariaLabel}\n          className={\n            stretchedLinkClass +\n            ' ds:contents ds:bg-transparent ds:border-0 ds:p-0'\n          }\n          onClick={() => onActivate(item)}\n        >\n          {senderText}\n        </button>\n      );\n    } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n      senderNode = (\n        <a\n          href={item.url}\n          className=\"ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]\"\n          onClick={(event) => {\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else {\n      senderNode = senderText;\n    }\n\n    const showThreadCount =\n      typeof item.unreadCount === 'number' && item.unreadCount > 1;\n\n    const threadCountLabel = t('messageCard.threadCount', {\n      count: item.unreadCount,\n      defaultValue_one: '{{count}} new message in thread',\n      defaultValue_other: '{{count}} new messages in thread',\n    });\n\n    // Dashboard variant keeps its inline title-row count badge.\n    const threadCountBadge = showThreadCount ? (\n      <span\n        role=\"img\"\n        aria-label={threadCountLabel}\n        className=\"ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)] ds:rounded-[var(--radius-full)] ds:border ds:border-[color:color-mix(in_srgb,var(--foreground)_15%,transparent)] ds:bg-[color:var(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]\"\n      >\n        {item.unreadCount}\n      </span>\n    ) : null;\n\n    // Compact \"status ball\" — a corner badge on the avatar carrying read/unread\n    // (and the thread count). It replaces the old inline Mail toggle so a\n    // variable-width indicator no longer ragged-edges the sender titles.\n    const ballPos =\n      'ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1]';\n    const ballDot =\n      'ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]';\n    const ballRing =\n      'ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border-2 ds:border-[color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)] ds:forced-colors:border-[CanvasText]';\n    const ballNum =\n      'ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-2xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-2xs))] ds:px-[var(--spacing-2xs)] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:text-[color:var(--primary-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight] ds:forced-colors:text-[CanvasText]';\n\n    // Interactive ball gets the kit focus ring + pointer cursor (a bare\n    // <button> falls back to the browser default outline). The transparent\n    // ::before grows the touch target to --min-target-size on coarse pointers\n    // (matches IconButton) while the visual ball stays small; dropped at sm+.\n    const ballBtn =\n      'ds:cursor-pointer ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText] ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden';\n    const ballNumbered = !item.read && showThreadCount;\n    const ballVisual = item.read ? ballRing : ballNumbered ? ballNum : ballDot;\n    const statusBall =\n      variant !== 'compact' ? null : onToggleRead ? (\n        <button\n          type=\"button\"\n          onClick={() => onToggleRead(item)}\n          aria-label={\n            item.read\n              ? t('messageCard.markAsUnread', 'Mark as unread')\n              : ballNumbered\n                ? `${threadCountLabel}, ${t('messageCard.markAsRead', 'Mark as read')}`\n                : t('messageCard.markAsRead', 'Mark as read')\n          }\n          className={`${ballPos} ${ballVisual} ${ballBtn}`}\n        >\n          {ballNumbered ? (\n            <span aria-hidden=\"true\">{item.unreadCount}</span>\n          ) : null}\n        </button>\n      ) : ballNumbered ? (\n        <span\n          role=\"img\"\n          aria-label={threadCountLabel}\n          className={`${ballPos} ${ballNum}`}\n        >\n          <span aria-hidden=\"true\">{item.unreadCount}</span>\n        </span>\n      ) : (\n        <span aria-hidden=\"true\" className={`${ballPos} ${ballVisual}`} />\n      );\n\n    // Close insets track the card padding so it aligns with the title's first\n    // line at either size.\n    const closeInset =\n      size === 'md'\n        ? 'ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]'\n        : 'ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]';\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-component=\"message-card\"\n        data-component-id={item.id}\n        data-read={item.read ? 'true' : 'false'}\n        data-leaving={effectiveLeaving ? 'true' : undefined}\n        aria-hidden={effectiveLeaving || undefined}\n        className={cardVariants({\n          variant,\n          size,\n          state,\n          surface: variant === 'compact' ? surface : 'flat',\n          className,\n        })}\n        {...rest}\n      >\n        {/* Avatar is decorative here — the row's assembled `aria-label`\n            already names the sender, so letting Avatar contribute its own\n            `role=\"img\"` + `aria-label={name}` would announce the name twice\n            per row. `aria-hidden` + `role=\"presentation\"` (spread last, so\n            they win over Avatar's internal values) pulls the element out of\n            the a11y tree entirely. */}\n        {/* Avatar is decorative (the row's aria-label names the sender). The\n            status ball overlays its corner; `relative` anchors it. */}\n        <span className=\"ds:relative ds:shrink-0\">\n          <Avatar\n            name={item.sender.name}\n            src={item.sender.avatarUrl}\n            size={size === 'md' ? 'md' : 'sm'}\n            aria-hidden=\"true\"\n            role=\"presentation\"\n            aria-label={undefined}\n          />\n          {statusBall}\n        </span>\n\n        <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n          <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-sm)]\">\n            {variant === 'dashboard' ? (\n              <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n                {senderNode}\n              </h3>\n            ) : (\n              <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n                {senderNode}\n              </span>\n            )}\n            {variant === 'dashboard' ? threadCountBadge : null}\n          </div>\n\n          {item.subject ? (\n            <p\n              className={[\n                'ds:m-0 type-body-sm ds:text-[color:var(--foreground)] ds:truncate',\n                item.read ? 'ds:font-normal' : 'ds:font-semibold',\n              ].join(' ')}\n            >\n              {item.subject}\n            </p>\n          ) : null}\n\n          <p className=\"ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words\">\n            {item.preview}\n          </p>\n\n          <Timestamp\n            value={item.sentAt}\n            shape=\"chip\"\n            size=\"sm\"\n            relativeWindow={12 * 60 * 60 * 1000}\n          />\n\n          {variant === 'dashboard' && (ctaLabel || dismissLabel) ? (\n            <div className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]\">\n              {ctaLabel && hasSafeUrl ? (\n                <Button\n                  intent=\"outline\"\n                  size=\"sm\"\n                  asChild\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  <a\n                    href={item.url}\n                    onClick={(event) => {\n                      if (\n                        event.defaultPrevented ||\n                        event.metaKey ||\n                        event.ctrlKey ||\n                        event.shiftKey\n                      )\n                        return;\n                      onActivate?.(item);\n                    }}\n                  >\n                    {ctaLabel}\n                  </a>\n                </Button>\n              ) : null}\n              {dismissLabel && onDismiss ? (\n                <Button\n                  intent=\"link\"\n                  size=\"sm\"\n                  onClick={handleDismiss}\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  {dismissLabel}\n                </Button>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n\n        {/* Close — inline-end, hover/focus-revealed. Absolutely positioned so it\n            claims no width at rest: the sender row fills the width and there's\n            no empty gap when the row isn't hovered. */}\n        {variant === 'compact' && onDismiss ? (\n          <span\n            className={\n              'ds:absolute ds:z-[2] ds:opacity-0 ds:pointer-events-none ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-hover:pointer-events-auto ds:group-focus-within:opacity-100 ds:group-focus-within:pointer-events-auto ' +\n              closeInset\n            }\n          >\n            <IconButton\n              icon={<X />}\n              intent=\"ghost\"\n              size=\"sm\"\n              aria-label={t('messageCard.dismiss', 'Dismiss message')}\n              onClick={handleDismiss}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nMessageCard.displayName = 'MessageCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","MessageCard","forwardRef","item","variant","surface","size","onActivate","onToggleRead","onDismiss","ctaLabel","dismissLabel","leaving","className","rest","ref","t","i18n","useTranslation","accessibleTime","useMemo","date","isControlledLeaving","isLeaving","setIsLeaving","useState","dismissTimerRef","useRef","effectiveLeaving","prefersReducedMotion","handleDismiss","useCallback","event","raw","ms","state","unreadSuffix","subjectFragment","ariaLabel","hasSafeUrl","isSafeEntityUrl","senderText","jsx","senderNode","showThreadCount","threadCountLabel","threadCountBadge","ballPos","ballDot","ballRing","ballNum","ballBtn","ballNumbered","ballVisual","statusBall","closeInset","jsxs","Avatar","Timestamp","Button","IconButton","X"],"mappings":"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"}

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