stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/ChannelListItem/ChannelListItemUI.mjs

@@ -1,6 +1,5 @@
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Badge } from "../Badge/Badge.mjs";
 import { ChannelAvatar } from "../Avatar/ChannelAvatar.mjs";
@@ -9,16 +8,19 @@ import { ChannelListItemActionButtons } from "./ChannelListItemActionButtons.mjs
 import { ChannelListItemTimestamp } from "./ChannelListItemTimestamp.mjs";
 import { composeChannelListItemAccessibleLabel } from "./utils.a11y.mjs";
 import { SummarizedMessagePreview } from "../SummarizedMessagePreview/SummarizedMessagePreview.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useWorkspaceNavigation } from "../../context/WorkspaceNavigationContext.mjs";
 import React, { useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/ChannelListItem/ChannelListItemUI.tsx
 var UnMemoizedChannelListItemUI = (props) => {
-	const { accessibleLabelConfig, active, channel, className: customClassName = "", displayImage, displayTitle, groupChannelDisplayInfo, lastMessage, messageDeliveryStatus, muted, onSelect: customOnSelectChannel, pinned, setActiveChannel, unread, watchers } = props;
-	const { Avatar = ChannelAvatar, ChannelListItemActionButtons: ChannelListItemActionButtons$1 = ChannelListItemActionButtons } = useComponentContext();
 	const { IconMute, IconPin } = useComponentContextIcons();
-	const { client, isMessageAIGenerated } = useChatContext("ChannelListItemUI");
-	const { t, tDateTimeParser, userLanguage } = useTranslationContext("ChannelListItemUI");
+	const { accessibleLabelConfig, active, channel, className: customClassName = "", displayImage, displayTitle, groupChannelDisplayInfo, messageDeliveryStatus, muted, onSelect: customOnSelectChannel, pinned, previewedMessage, unread } = props;
+	const { Avatar = ChannelAvatar, ChannelListItemActionButtons: ChannelListItemActionButtons$1 = ChannelListItemActionButtons, SummarizedMessagePreview: SummarizedMessagePreview$1 = SummarizedMessagePreview } = useComponentContext();
+	const { client, isMessageAIGenerated } = useChatContext();
+	const { t, tDateTimeParser, userLanguage } = useTranslationContext();
+	const { openChannel } = useWorkspaceNavigation();
 	const { announceInteraction } = useInteractionAnnouncements();
 	const channelPreviewButton = useRef(null);
 	const accessibleLabel = useMemo(() => composeChannelListItemAccessibleLabel({
@@ -27,7 +29,7 @@ var UnMemoizedChannelListItemUI = (props) => {
 		client,
 		displayTitle,
 		isMessageAIGenerated,
-		latestMessage: lastMessage,
+		latestMessage: previewedMessage,
 		messageDeliveryStatus,
 		t,
 		tDateTimeParser,
@@ -40,20 +42,20 @@ var UnMemoizedChannelListItemUI = (props) => {
 		client,
 		displayTitle,
 		isMessageAIGenerated,
-		lastMessage,
 		messageDeliveryStatus,
 		muted,
 		pinned,
+		previewedMessage,
 		t,
 		tDateTimeParser,
 		unread,
 		userLanguage
 	]);
-	const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
+	const avatarName = displayTitle || channel.messagePaginator.headmostItem?.user?.id;
 	const onSelectChannel = (e) => {
 		if (customOnSelectChannel) customOnSelectChannel(e);
-		else if (setActiveChannel) {
-			setActiveChannel(channel, watchers);
+		else {
+			openChannel(channel, { event: e });
 			if (!active && displayTitle) announceInteraction("channel.opened", { name: displayTitle });
 		}
 		if (channelPreviewButton?.current) channelPreviewButton.current.blur();
@@ -91,15 +93,15 @@ var UnMemoizedChannelListItemUI = (props) => {
 						]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "str-chat__channel-list-item-data__timestamp-and-badge",
-						children: [/* @__PURE__ */ jsx(ChannelListItemTimestamp, { lastMessage }), typeof unread === "number" && unread > 0 && /* @__PURE__ */ jsx(Badge, {
+						children: [/* @__PURE__ */ jsx(ChannelListItemTimestamp, { previewedMessage }), typeof unread === "number" && unread > 0 && /* @__PURE__ */ jsx(Badge, {
 							"data-testid": "unread-badge",
 							size: "md",
 							variant: "primary",
 							children: unread
 						})]
 					})]
-				}), /* @__PURE__ */ jsx(SummarizedMessagePreview, {
-					latestMessage: lastMessage,
+				}), /* @__PURE__ */ jsx(SummarizedMessagePreview$1, {
+					latestMessage: previewedMessage,
 					messageDeliveryStatus,
 					participantCount: channel.data?.member_count
 				})]

package/dist/es/components/ChannelListItem/ChannelListItemUI.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelListItemUI.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemUI.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChannelListItemActionButtons as DefaultChannelListItemActionButtons } from './ChannelListItemActionButtons';\nimport { ChannelListItemTimestamp } from './ChannelListItemTimestamp';\n\nimport { ChannelAvatar as DefaultChannelAvatar } from '../Avatar';\nimport { Badge } from '../Badge';\nimport { useInteractionAnnouncements } from '../Accessibility';\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport type { ChannelListItemUIProps } from './ChannelListItem';\nimport { composeChannelListItemAccessibleLabel } from './utils.a11y';\nimport { SummarizedMessagePreview } from '../SummarizedMessagePreview';\n\nconst UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {\n  const {\n    accessibleLabelConfig,\n    active,\n    channel,\n    className: customClassName = '',\n    displayImage,\n    displayTitle,\n    groupChannelDisplayInfo,\n    lastMessage,\n    messageDeliveryStatus,\n    muted,\n    onSelect: customOnSelectChannel,\n    pinned,\n    setActiveChannel,\n    unread,\n    watchers,\n  } = props;\n\n  const {\n    Avatar = DefaultChannelAvatar,\n    ChannelListItemActionButtons = DefaultChannelListItemActionButtons,\n  } = useComponentContext();\n  const { IconMute, IconPin } = useComponentContextIcons();\n  const { client, isMessageAIGenerated } = useChatContext('ChannelListItemUI');\n  const { t, tDateTimeParser, userLanguage } = useTranslationContext('ChannelListItemUI');\n  const { announceInteraction } = useInteractionAnnouncements();\n\n  const channelPreviewButton = useRef<HTMLButtonElement | null>(null);\n\n  // Composed accessible name for the row. Built here (the overridable presentation component) so a\n  // `ComponentContext`-supplied `ChannelListItemUI` can configure it via `accessibleLabelConfig`.\n  const accessibleLabel = useMemo(\n    () =>\n      composeChannelListItemAccessibleLabel(\n        {\n          active,\n          channel,\n          client,\n          displayTitle,\n          isMessageAIGenerated,\n          latestMessage: lastMessage,\n          messageDeliveryStatus,\n          t,\n          tDateTimeParser,\n          unreadCount: unread,\n          userLanguage,\n        },\n        accessibleLabelConfig,\n      ),\n    // `muted`/`pinned` are intentional recompute triggers: the parts read\n    // `channel.state` / channel mute & membership state (which ESLint can't see and which do not\n    // themselves trigger a re-render), so we key on the state ChannelListItem already tracks.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      accessibleLabelConfig,\n      active,\n      channel,\n      client,\n      displayTitle,\n      isMessageAIGenerated,\n      lastMessage,\n      messageDeliveryStatus,\n      muted,\n      pinned,\n      t,\n      tDateTimeParser,\n      unread,\n      userLanguage,\n    ],\n  );\n\n  const avatarName =\n    displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;\n\n  const onSelectChannel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (customOnSelectChannel) {\n      customOnSelectChannel(e);\n    } else if (setActiveChannel) {\n      setActiveChannel(channel, watchers);\n      // Confirm the opened channel to assistive tech. Only when actually switching (not re-selecting\n      // the open one) and only via the default selection path — a custom `onSelect` owns its own\n      // feedback. Debounced in the registry so it lands after the composer's focus announcement.\n      if (!active && displayTitle) {\n        announceInteraction('channel.opened', { name: displayTitle });\n      }\n    }\n    if (channelPreviewButton?.current) {\n      channelPreviewButton.current.blur();\n    }\n  };\n\n  return (\n    <div className='str-chat__channel-list-item-container'>\n      <button\n        aria-label={accessibleLabel}\n        // Single-select list: set aria-selected only on the active row. Setting it (false) on every\n        // other row makes screen readers announce \"not selected\" on each one — noise.\n        aria-selected={active || undefined}\n        className={clsx(\n          'str-chat__channel-list-item',\n          {\n            'str-chat__channel-list-item--muted': muted,\n            'str-chat__channel-list-item--pinned': pinned,\n            'str-chat__channel-list-item--unread':\n              typeof unread === 'number' && unread > 0,\n          },\n          customClassName,\n        )}\n        data-testid='channel-list-item-button'\n        onClick={onSelectChannel}\n        ref={channelPreviewButton}\n        role='option'\n      >\n        <Avatar\n          aria-hidden='true'\n          displayMembers={groupChannelDisplayInfo?.members}\n          imageUrl={displayImage}\n          size='xl'\n          userName={avatarName}\n        />\n        <div className='str-chat__channel-list-item-data'>\n          <div className='str-chat__channel-list-item-data__first-row'>\n            <div className='str-chat__channel-list-item-data__title'>\n              <span>{displayTitle || 'N/A'}</span>\n              {pinned && <IconPin />}\n              {muted && <IconMute />}\n            </div>\n            <div className='str-chat__channel-list-item-data__timestamp-and-badge'>\n              <ChannelListItemTimestamp lastMessage={lastMessage} />\n              {typeof unread === 'number' && unread > 0 && (\n                <Badge data-testid='unread-badge' size='md' variant='primary'>\n                  {unread}\n                </Badge>\n              )}\n            </div>\n          </div>\n          <SummarizedMessagePreview\n            latestMessage={lastMessage}\n            messageDeliveryStatus={messageDeliveryStatus}\n            participantCount={channel.data?.member_count}\n          />\n        </div>\n      </button>\n      <ChannelListItemActionButtons />\n    </div>\n  );\n};\n\n/**\n * Used as preview component for channel item in [ChannelList](#channellist) component.\n * Its best suited for messenger type chat.\n */\nexport const ChannelListItemUI = React.memo(\n  UnMemoizedChannelListItemUI,\n) as typeof UnMemoizedChannelListItemUI;\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,IAAM,+BAA+B,UAAkC;CACrE,MAAM,EACJ,uBACA,QACA,SACA,WAAW,kBAAkB,IAC7B,cACA,cACA,yBACA,aACA,uBACA,OACA,UAAU,uBACV,QACA,kBACA,QACA,aACE;CAEJ,MAAM,EACJ,SAAS,eACT,8BAAA,iCAA+B,iCAC7B,oBAAoB;CACxB,MAAM,EAAE,UAAU,YAAY,yBAAyB;CACvD,MAAM,EAAE,QAAQ,yBAAyB,eAAe,mBAAmB;CAC3E,MAAM,EAAE,GAAG,iBAAiB,iBAAiB,sBAAsB,mBAAmB;CACtF,MAAM,EAAE,wBAAwB,4BAA4B;CAE5D,MAAM,uBAAuB,OAAiC,IAAI;CAIlE,MAAM,kBAAkB,cAEpB,sCACE;EACE;EACA;EACA;EACA;EACA;EACA,eAAe;EACf;EACA;EACA;EACA,aAAa;EACb;CACF,GACA,qBACF,GAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,aACJ,gBAAgB,QAAQ,MAAM,SAAS,QAAQ,MAAM,SAAS,SAAS,EAAE,EAAE,MAAM;CAEnF,MAAM,mBAAmB,MAA2C;EAClE,IAAI,uBACF,sBAAsB,CAAC;OAClB,IAAI,kBAAkB;GAC3B,iBAAiB,SAAS,QAAQ;GAIlC,IAAI,CAAC,UAAU,cACb,oBAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;EAEhE;EACA,IAAI,sBAAsB,SACxB,qBAAqB,QAAQ,KAAK;CAEtC;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,UAAD;GACE,cAAY;GAGZ,iBAAe,UAAU,KAAA;GACzB,WAAW,KACT,+BACA;IACE,sCAAsC;IACtC,uCAAuC;IACvC,uCACE,OAAO,WAAW,YAAY,SAAS;GAC3C,GACA,eACF;GACA,eAAY;GACZ,SAAS;GACT,KAAK;GACL,MAAK;aAlBP,CAoBE,oBAAC,QAAD;IACE,eAAY;IACZ,gBAAgB,yBAAyB;IACzC,UAAU;IACV,MAAK;IACL,UAAU;GACX,CAAA,GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,oBAAC,QAAD,EAAA,UAAO,gBAAgB,MAAY,CAAA;OAClC,UAAU,oBAAC,SAAD,CAAU,CAAA;OACpB,SAAS,oBAAC,UAAD,CAAW,CAAA;MAClB;SACL,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,0BAAD,EAAuC,YAAc,CAAA,GACpD,OAAO,WAAW,YAAY,SAAS,KACtC,oBAAC,OAAD;OAAO,eAAY;OAAe,MAAK;OAAK,SAAQ;iBACjD;MACI,CAAA,CAEN;OACF;QACL,oBAAC,0BAAD;KACE,eAAe;KACQ;KACvB,kBAAkB,QAAQ,MAAM;IACjC,CAAA,CACE;KACC;MACR,oBAAC,gCAAD,CAA+B,CAAA,CAC5B;;AAET;;;;;AAMA,IAAa,oBAAoB,MAAM,KACrC,2BACF"}
+{"version":3,"file":"ChannelListItemUI.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemUI.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChannelListItemActionButtons as DefaultChannelListItemActionButtons } from './ChannelListItemActionButtons';\nimport { ChannelListItemTimestamp } from './ChannelListItemTimestamp';\n\nimport { ChannelAvatar as DefaultChannelAvatar } from '../Avatar';\nimport { Badge } from '../Badge';\nimport { useInteractionAnnouncements } from '../Accessibility';\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n  useWorkspaceNavigation,\n} from '../../context';\nimport type { ChannelListItemUIProps } from './ChannelListItem';\nimport { composeChannelListItemAccessibleLabel } from './utils.a11y';\nimport { SummarizedMessagePreview as DefaultSummarizedMessagePreview } from '../SummarizedMessagePreview';\n\nconst UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {\n  const { IconMute, IconPin } = useComponentContextIcons();\n  const {\n    accessibleLabelConfig,\n    active,\n    channel,\n    className: customClassName = '',\n    displayImage,\n    displayTitle,\n    groupChannelDisplayInfo,\n    messageDeliveryStatus,\n    muted,\n    onSelect: customOnSelectChannel,\n    pinned,\n    previewedMessage,\n    unread,\n  } = props;\n\n  const {\n    Avatar = DefaultChannelAvatar,\n    ChannelListItemActionButtons = DefaultChannelListItemActionButtons,\n    SummarizedMessagePreview = DefaultSummarizedMessagePreview,\n  } = useComponentContext();\n  const { client, isMessageAIGenerated } = useChatContext();\n  const { t, tDateTimeParser, userLanguage } = useTranslationContext();\n  const { openChannel } = useWorkspaceNavigation();\n  const { announceInteraction } = useInteractionAnnouncements();\n\n  const channelPreviewButton = useRef<HTMLButtonElement | null>(null);\n\n  // Composed accessible name for the row. Built here (the overridable presentation component) so a\n  // `ComponentContext`-supplied `ChannelListItemUI` can configure it via `accessibleLabelConfig`.\n  const accessibleLabel = useMemo(\n    () =>\n      composeChannelListItemAccessibleLabel(\n        {\n          active,\n          channel,\n          client,\n          displayTitle,\n          isMessageAIGenerated,\n          latestMessage: previewedMessage,\n          messageDeliveryStatus,\n          t,\n          tDateTimeParser,\n          unreadCount: unread,\n          userLanguage,\n        },\n        accessibleLabelConfig,\n      ),\n    // `muted`/`pinned` are intentional recompute triggers: the parts read\n    // `channel.state` / channel mute & membership state (which ESLint can't see and which do not\n    // themselves trigger a re-render), so we key on the state ChannelListItem already tracks.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      accessibleLabelConfig,\n      active,\n      channel,\n      client,\n      displayTitle,\n      isMessageAIGenerated,\n      messageDeliveryStatus,\n      muted,\n      pinned,\n      previewedMessage,\n      t,\n      tDateTimeParser,\n      unread,\n      userLanguage,\n    ],\n  );\n\n  const avatarName = displayTitle || channel.messagePaginator.headmostItem?.user?.id;\n\n  const onSelectChannel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (customOnSelectChannel) {\n      customOnSelectChannel(e);\n    } else {\n      // Selection is one navigation model: open the channel in the workspace. Forward the event so a\n      // consumer overriding `openChannel` (e.g. via ChatView's `deriveWorkspaceNavigation`) can honor\n      // ⌘/ctrl-click.\n      openChannel(channel, { event: e });\n      // Confirm the opened channel to assistive tech. Only when actually switching (not re-selecting\n      // the open one) and only via the default selection path — a custom `onSelect` owns its own\n      // feedback. Debounced in the registry so it lands after the composer's focus announcement.\n      if (!active && displayTitle) {\n        announceInteraction('channel.opened', { name: displayTitle });\n      }\n    }\n    if (channelPreviewButton?.current) {\n      channelPreviewButton.current.blur();\n    }\n  };\n\n  return (\n    <div className='str-chat__channel-list-item-container'>\n      <button\n        aria-label={accessibleLabel}\n        // Single-select list: set aria-selected only on the active row. Setting it (false) on every\n        // other row makes screen readers announce \"not selected\" on each one — noise.\n        aria-selected={active || undefined}\n        className={clsx(\n          'str-chat__channel-list-item',\n          {\n            'str-chat__channel-list-item--muted': muted,\n            'str-chat__channel-list-item--pinned': pinned,\n            'str-chat__channel-list-item--unread':\n              typeof unread === 'number' && unread > 0,\n          },\n          customClassName,\n        )}\n        data-testid='channel-list-item-button'\n        onClick={onSelectChannel}\n        ref={channelPreviewButton}\n        role='option'\n      >\n        <Avatar\n          aria-hidden='true'\n          displayMembers={groupChannelDisplayInfo?.members}\n          imageUrl={displayImage}\n          size='xl'\n          userName={avatarName}\n        />\n        <div className='str-chat__channel-list-item-data'>\n          <div className='str-chat__channel-list-item-data__first-row'>\n            <div className='str-chat__channel-list-item-data__title'>\n              <span>{displayTitle || 'N/A'}</span>\n              {pinned && <IconPin />}\n              {muted && <IconMute />}\n            </div>\n            <div className='str-chat__channel-list-item-data__timestamp-and-badge'>\n              <ChannelListItemTimestamp previewedMessage={previewedMessage} />\n              {typeof unread === 'number' && unread > 0 && (\n                <Badge data-testid='unread-badge' size='md' variant='primary'>\n                  {unread}\n                </Badge>\n              )}\n            </div>\n          </div>\n          <SummarizedMessagePreview\n            latestMessage={previewedMessage}\n            messageDeliveryStatus={messageDeliveryStatus}\n            participantCount={channel.data?.member_count}\n          />\n        </div>\n      </button>\n      <ChannelListItemActionButtons />\n    </div>\n  );\n};\n\n/**\n * Used as preview component for channel item in [ChannelList](#channellist) component.\n * Its best suited for messenger type chat.\n */\nexport const ChannelListItemUI = React.memo(\n  UnMemoizedChannelListItemUI,\n) as typeof UnMemoizedChannelListItemUI;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,IAAM,+BAA+B,UAAkC;CACrE,MAAM,EAAE,UAAU,YAAY,yBAAyB;CACvD,MAAM,EACJ,uBACA,QACA,SACA,WAAW,kBAAkB,IAC7B,cACA,cACA,yBACA,uBACA,OACA,UAAU,uBACV,QACA,kBACA,WACE;CAEJ,MAAM,EACJ,SAAS,eACT,8BAAA,iCAA+B,8BAC/B,0BAAA,6BAA2B,6BACzB,oBAAoB;CACxB,MAAM,EAAE,QAAQ,yBAAyB,eAAe;CACxD,MAAM,EAAE,GAAG,iBAAiB,iBAAiB,sBAAsB;CACnE,MAAM,EAAE,gBAAgB,uBAAuB;CAC/C,MAAM,EAAE,wBAAwB,4BAA4B;CAE5D,MAAM,uBAAuB,OAAiC,IAAI;CAIlE,MAAM,kBAAkB,cAEpB,sCACE;EACE;EACA;EACA;EACA;EACA;EACA,eAAe;EACf;EACA;EACA;EACA,aAAa;EACb;CACF,GACA,qBACF,GAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,aAAa,gBAAgB,QAAQ,iBAAiB,cAAc,MAAM;CAEhF,MAAM,mBAAmB,MAA2C;EAClE,IAAI,uBACF,sBAAsB,CAAC;OAClB;GAIL,YAAY,SAAS,EAAE,OAAO,EAAE,CAAC;GAIjC,IAAI,CAAC,UAAU,cACb,oBAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;EAEhE;EACA,IAAI,sBAAsB,SACxB,qBAAqB,QAAQ,KAAK;CAEtC;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,UAAD;GACE,cAAY;GAGZ,iBAAe,UAAU,KAAA;GACzB,WAAW,KACT,+BACA;IACE,sCAAsC;IACtC,uCAAuC;IACvC,uCACE,OAAO,WAAW,YAAY,SAAS;GAC3C,GACA,eACF;GACA,eAAY;GACZ,SAAS;GACT,KAAK;GACL,MAAK;aAlBP,CAoBE,oBAAC,QAAD;IACE,eAAY;IACZ,gBAAgB,yBAAyB;IACzC,UAAU;IACV,MAAK;IACL,UAAU;GACX,CAAA,GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,oBAAC,QAAD,EAAA,UAAO,gBAAgB,MAAY,CAAA;OAClC,UAAU,oBAAC,SAAD,CAAU,CAAA;OACpB,SAAS,oBAAC,UAAD,CAAW,CAAA;MAClB;SACL,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,0BAAD,EAA4C,iBAAmB,CAAA,GAC9D,OAAO,WAAW,YAAY,SAAS,KACtC,oBAAC,OAAD;OAAO,eAAY;OAAe,MAAK;OAAK,SAAQ;iBACjD;MACI,CAAA,CAEN;OACF;QACL,oBAAC,4BAAD;KACE,eAAe;KACQ;KACvB,kBAAkB,QAAQ,MAAM;IACjC,CAAA,CACE;KACC;MACR,oBAAC,gCAAD,CAA+B,CAAA,CAC5B;;AAET;;;;;AAMA,IAAa,oBAAoB,MAAM,KACrC,2BACF"}

package/dist/es/components/ChannelListItem/hooks/useChannelDisplayName.mjs

@@ -3,14 +3,14 @@ import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { useEffect, useState } from "react";
 //#region src/components/ChannelListItem/hooks/useChannelDisplayName.ts
 /**
-* 1. channel.data.name
+* 1. channel.data.custom.name
 * 2. DM (exactly 2 members): other member's name, then directMessageLabel
 * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
 * 4. undefined otherwise
 */
 function computeChannelDisplayName(channel, directMessageLabel, currentUserId) {
-	const data = channel.data;
-	if (data?.name && typeof data.name === "string") return data.name;
+	const name = channel.data?.custom?.name;
+	if (name && typeof name === "string") return name;
 	const memberList = Object.values(channel.state.members);
 	const otherMembers = memberList.filter((m) => m.user?.id !== currentUserId);
 	if (memberList.length === 2 && otherMembers.length === 1) return otherMembers[0].user?.name || directMessageLabel;
@@ -21,15 +21,15 @@ function computeChannelDisplayName(channel, directMessageLabel, currentUserId) {
 }
 /**
 * Channel display name with translation context.
-* 1. channel.data.name
+* 1. channel.data.custom.name
 * 2. DM (exactly 2 members): other member's name, then translated "Direct message"
 * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
 * 4. undefined otherwise
 */
 var useChannelDisplayName = (channel) => {
-	const { client } = useChatContext("useChannelDisplayName");
-	const { t } = useTranslationContext("useChannelDisplayName");
-	const directMessageLabel = t("Direct message");
+	const { client } = useChatContext();
+	const { t } = useTranslationContext();
+	const directMessageLabel = t("channelListItem.channelDisplayName.directMessage.label", "Direct message");
 	const [displayName, setDisplayName] = useState(() => channel ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0) : void 0);
 	useEffect(() => {
 		if (!channel) {

package/dist/es/components/ChannelListItem/hooks/useChannelDisplayName.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelDisplayName.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useChannelDisplayName.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\nimport { useTranslationContext } from '../../../context/TranslationContext';\n\n/**\n * 1. channel.data.name\n * 2. DM (exactly 2 members): other member's name, then directMessageLabel\n * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)\n * 4. undefined otherwise\n */\nfunction computeChannelDisplayName(\n  channel: Channel,\n  directMessageLabel: string,\n  currentUserId: string | undefined,\n): string | undefined {\n  const data = channel.data as { name?: string } | undefined;\n  if (data?.name && typeof data.name === 'string') return data.name;\n\n  const memberList = Object.values(channel.state.members);\n  const otherMembers = memberList.filter((m) => m.user?.id !== currentUserId);\n\n  if (memberList.length === 2 && otherMembers.length === 1) {\n    const name = otherMembers[0].user?.name;\n    return name || directMessageLabel;\n  }\n  if (otherMembers.length >= 2) {\n    const names = otherMembers\n      .map((m) => m.user?.name)\n      .filter(Boolean)\n      .slice(0, 2) as string[];\n    if (names.length > 0) return names.join(', ');\n  }\n  return undefined;\n}\n\n/**\n * Channel display name with translation context.\n * 1. channel.data.name\n * 2. DM (exactly 2 members): other member's name, then translated \"Direct message\"\n * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)\n * 4. undefined otherwise\n */\nexport const useChannelDisplayName = (\n  channel: Channel | undefined,\n): string | undefined => {\n  const { client } = useChatContext('useChannelDisplayName');\n  const { t } = useTranslationContext('useChannelDisplayName');\n  const directMessageLabel = t('Direct message');\n\n  const [displayName, setDisplayName] = useState<string | undefined>(() =>\n    channel\n      ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? undefined)\n      : undefined,\n  );\n\n  useEffect(() => {\n    if (!channel) {\n      setDisplayName(undefined);\n      return;\n    }\n    const updateDisplayName = () =>\n      setDisplayName(\n        computeChannelDisplayName(\n          channel,\n          directMessageLabel,\n          client.userID ?? undefined,\n        ),\n      );\n    updateDisplayName();\n    client.on('user.updated', updateDisplayName);\n    return () => {\n      client.off('user.updated', updateDisplayName);\n    };\n  }, [channel, channel?.data, client, directMessageLabel]);\n\n  return displayName;\n};\n"],"mappings":";;;;;;;;;;AAYA,SAAS,0BACP,SACA,oBACA,eACoB;CACpB,MAAM,OAAO,QAAQ;CACrB,IAAI,MAAM,QAAQ,OAAO,KAAK,SAAS,UAAU,OAAO,KAAK;CAE7D,MAAM,aAAa,OAAO,OAAO,QAAQ,MAAM,OAAO;CACtD,MAAM,eAAe,WAAW,QAAQ,MAAM,EAAE,MAAM,OAAO,aAAa;CAE1E,IAAI,WAAW,WAAW,KAAK,aAAa,WAAW,GAErD,OADa,aAAa,EAAE,CAAC,MAAM,QACpB;CAEjB,IAAI,aAAa,UAAU,GAAG;EAC5B,MAAM,QAAQ,aACX,KAAK,MAAM,EAAE,MAAM,IAAI,CAAC,CACxB,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC;EACb,IAAI,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,IAAI;CAC9C;AAEF;;;;;;;;AASA,IAAa,yBACX,YACuB;CACvB,MAAM,EAAE,WAAW,eAAe,uBAAuB;CACzD,MAAM,EAAE,MAAM,sBAAsB,uBAAuB;CAC3D,MAAM,qBAAqB,EAAE,gBAAgB;CAE7C,MAAM,CAAC,aAAa,kBAAkB,eACpC,UACI,0BAA0B,SAAS,oBAAoB,OAAO,UAAU,KAAA,CAAS,IACjF,KAAA,CACN;CAEA,gBAAgB;EACd,IAAI,CAAC,SAAS;GACZ,eAAe,KAAA,CAAS;GACxB;EACF;EACA,MAAM,0BACJ,eACE,0BACE,SACA,oBACA,OAAO,UAAU,KAAA,CACnB,CACF;EACF,kBAAkB;EAClB,OAAO,GAAG,gBAAgB,iBAAiB;EAC3C,aAAa;GACX,OAAO,IAAI,gBAAgB,iBAAiB;EAC9C;CACF,GAAG;EAAC;EAAS,SAAS;EAAM;EAAQ;CAAkB,CAAC;CAEvD,OAAO;AACT"}
+{"version":3,"file":"useChannelDisplayName.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useChannelDisplayName.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\nimport { useTranslationContext } from '../../../context/TranslationContext';\n\n/**\n * 1. channel.data.custom.name\n * 2. DM (exactly 2 members): other member's name, then directMessageLabel\n * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)\n * 4. undefined otherwise\n */\nfunction computeChannelDisplayName(\n  channel: Channel,\n  directMessageLabel: string,\n  currentUserId: string | undefined,\n): string | undefined {\n  const name = channel.data?.custom?.name;\n  if (name && typeof name === 'string') return name;\n\n  const memberList = Object.values(channel.state.members);\n  const otherMembers = memberList.filter((m) => m.user?.id !== currentUserId);\n\n  if (memberList.length === 2 && otherMembers.length === 1) {\n    const name = otherMembers[0].user?.name;\n    return name || directMessageLabel;\n  }\n  if (otherMembers.length >= 2) {\n    const names = otherMembers\n      .map((m) => m.user?.name)\n      .filter(Boolean)\n      .slice(0, 2) as string[];\n    if (names.length > 0) return names.join(', ');\n  }\n  return undefined;\n}\n\n/**\n * Channel display name with translation context.\n * 1. channel.data.custom.name\n * 2. DM (exactly 2 members): other member's name, then translated \"Direct message\"\n * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)\n * 4. undefined otherwise\n */\nexport const useChannelDisplayName = (\n  channel: Channel | undefined,\n): string | undefined => {\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\n  const directMessageLabel = t(\n    'channelListItem.channelDisplayName.directMessage.label',\n    'Direct message',\n  );\n\n  const [displayName, setDisplayName] = useState<string | undefined>(() =>\n    channel\n      ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? undefined)\n      : undefined,\n  );\n\n  useEffect(() => {\n    if (!channel) {\n      setDisplayName(undefined);\n      return;\n    }\n    const updateDisplayName = () =>\n      setDisplayName(\n        computeChannelDisplayName(\n          channel,\n          directMessageLabel,\n          client.userID ?? undefined,\n        ),\n      );\n    updateDisplayName();\n    client.on('user.updated', updateDisplayName);\n    return () => {\n      client.off('user.updated', updateDisplayName);\n    };\n  }, [channel, channel?.data, client, directMessageLabel]);\n\n  return displayName;\n};\n"],"mappings":";;;;;;;;;;AAYA,SAAS,0BACP,SACA,oBACA,eACoB;CACpB,MAAM,OAAO,QAAQ,MAAM,QAAQ;CACnC,IAAI,QAAQ,OAAO,SAAS,UAAU,OAAO;CAE7C,MAAM,aAAa,OAAO,OAAO,QAAQ,MAAM,OAAO;CACtD,MAAM,eAAe,WAAW,QAAQ,MAAM,EAAE,MAAM,OAAO,aAAa;CAE1E,IAAI,WAAW,WAAW,KAAK,aAAa,WAAW,GAErD,OADa,aAAa,EAAE,CAAC,MAAM,QACpB;CAEjB,IAAI,aAAa,UAAU,GAAG;EAC5B,MAAM,QAAQ,aACX,KAAK,MAAM,EAAE,MAAM,IAAI,CAAC,CACxB,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC;EACb,IAAI,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,IAAI;CAC9C;AAEF;;;;;;;;AASA,IAAa,yBACX,YACuB;CACvB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,qBAAqB,EACzB,0DACA,gBACF;CAEA,MAAM,CAAC,aAAa,kBAAkB,eACpC,UACI,0BAA0B,SAAS,oBAAoB,OAAO,UAAU,KAAA,CAAS,IACjF,KAAA,CACN;CAEA,gBAAgB;EACd,IAAI,CAAC,SAAS;GACZ,eAAe,KAAA,CAAS;GACxB;EACF;EACA,MAAM,0BACJ,eACE,0BACE,SACA,oBACA,OAAO,UAAU,KAAA,CACnB,CACF;EACF,kBAAkB;EAClB,OAAO,GAAG,gBAAgB,iBAAiB;EAC3C,aAAa;GACX,OAAO,IAAI,gBAAgB,iBAAiB;EAC9C;CACF,GAAG;EAAC;EAAS,SAAS;EAAM;EAAQ;CAAkB,CAAC;CAEvD,OAAO;AACT"}

package/dist/es/components/ChannelListItem/hooks/useIsChannelMuted.mjs

@@ -1,32 +1,14 @@
-import { useChatContext } from "../../../context/ChatContext.mjs";
-import { useEffect, useState } from "react";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 //#region src/components/ChannelListItem/hooks/useIsChannelMuted.ts
+var muteStatusSelector = (nextValue) => ({ muteStatus: nextValue.muteStatus });
 /**
-* `channel.muteStatus()` throws in two cases:
-* - the channel has not been initialized yet (i.e. `.watch()`/`.query()` has not
-*   resolved) - the ChannelList can briefly hold such channels, e.g. a
-*   `message.new` for a channel that has not been watched yet (#2474);
-* - the channel is disconnected (e.g. after `client.disconnectUser()`), in which
-*   case `channel.getClient()` throws even though the channel stays initialized
-*   (#2393 failure class).
-* Guard against both to avoid crashing the whole app.
+* Reactively reports whether the channel is muted for the current user.
+*
+* Reads the channel's `muteStatus` state slice, which the client keeps in sync with its own
+* `mutedChannels` (on `notification.channel_mutes_updated` and `health.check`) and republishes only
+* when the status actually changes.
 */
-var getMuteStatus = (channel) => channel.initialized && !channel.disconnected ? channel.muteStatus() : {
-	createdAt: null,
-	expiresAt: null,
-	muted: false
-};
-var useIsChannelMuted = (channel) => {
-	const { client } = useChatContext("useIsChannelMuted");
-	const [muted, setMuted] = useState(() => getMuteStatus(channel));
-	useEffect(() => {
-		const handleEvent = () => {
-			setMuted(getMuteStatus(channel));
-		};
-		return client.on("notification.channel_mutes_updated", handleEvent).unsubscribe;
-	}, [channel, client]);
-	return muted;
-};
+var useIsChannelMuted = (channel) => useStateStore(channel.state, muteStatusSelector).muteStatus;
 //#endregion
 export { useIsChannelMuted };
 

package/dist/es/components/ChannelListItem/hooks/useIsChannelMuted.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsChannelMuted.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useIsChannelMuted.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useChatContext } from '../../../context/ChatContext';\n\nimport type { Channel } from 'stream-chat';\n\n/**\n * `channel.muteStatus()` throws in two cases:\n * - the channel has not been initialized yet (i.e. `.watch()`/`.query()` has not\n *   resolved) - the ChannelList can briefly hold such channels, e.g. a\n *   `message.new` for a channel that has not been watched yet (#2474);\n * - the channel is disconnected (e.g. after `client.disconnectUser()`), in which\n *   case `channel.getClient()` throws even though the channel stays initialized\n *   (#2393 failure class).\n * Guard against both to avoid crashing the whole app.\n */\nconst getMuteStatus = (channel: Channel) =>\n  channel.initialized && !channel.disconnected\n    ? channel.muteStatus()\n    : { createdAt: null, expiresAt: null, muted: false };\n\nexport const useIsChannelMuted = (channel: Channel) => {\n  const { client } = useChatContext('useIsChannelMuted');\n\n  const [muted, setMuted] = useState(() => getMuteStatus(channel));\n\n  useEffect(() => {\n    const handleEvent = () => {\n      setMuted(getMuteStatus(channel));\n    };\n\n    return client.on('notification.channel_mutes_updated', handleEvent).unsubscribe;\n  }, [channel, client]);\n\n  return muted;\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,iBAAiB,YACrB,QAAQ,eAAe,CAAC,QAAQ,eAC5B,QAAQ,WAAW,IACnB;CAAE,WAAW;CAAM,WAAW;CAAM,OAAO;AAAM;AAEvD,IAAa,qBAAqB,YAAqB;CACrD,MAAM,EAAE,WAAW,eAAe,mBAAmB;CAErD,MAAM,CAAC,OAAO,YAAY,eAAe,cAAc,OAAO,CAAC;CAE/D,gBAAgB;EACd,MAAM,oBAAoB;GACxB,SAAS,cAAc,OAAO,CAAC;EACjC;EAEA,OAAO,OAAO,GAAG,sCAAsC,WAAW,CAAC,CAAC;CACtE,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OAAO;AACT"}
+{"version":3,"file":"useIsChannelMuted.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useIsChannelMuted.ts"],"sourcesContent":["import type { Channel, MuteStatusState } from 'stream-chat';\n\nimport { useStateStore } from '../../../store';\n\nconst muteStatusSelector = (nextValue: MuteStatusState) => ({\n  muteStatus: nextValue.muteStatus,\n});\n\n/**\n * Reactively reports whether the channel is muted for the current user.\n *\n * Reads the channel's `muteStatus` state slice, which the client keeps in sync with its own\n * `mutedChannels` (on `notification.channel_mutes_updated` and `health.check`) and republishes only\n * when the status actually changes.\n */\nexport const useIsChannelMuted = (channel: Channel) =>\n  useStateStore(channel.state, muteStatusSelector).muteStatus;\n"],"mappings":";;AAIA,IAAM,sBAAsB,eAAgC,EAC1D,YAAY,UAAU,WACxB;;;;;;;;AASA,IAAa,qBAAqB,YAChC,cAAc,QAAQ,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/es/components/ChannelListItem/hooks/useIsUserMuted.mjs

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 //#region src/components/ChannelListItem/hooks/useIsUserMuted.ts
 var useIsUserMuted = (targetUserId) => {
 	const { mutes } = useChatContext();
-	return useMemo(() => !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId), [mutes, targetUserId]);
+	return useMemo(() => !!targetUserId && mutes.some((mute) => mute.target?.id === targetUserId), [mutes, targetUserId]);
 };
 //#endregion
 export { useIsUserMuted };

package/dist/es/components/ChannelListItem/hooks/useIsUserMuted.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsUserMuted.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useIsUserMuted.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useChatContext } from '../../../context/ChatContext';\n\nexport const useIsUserMuted = (targetUserId?: string) => {\n  const { mutes } = useChatContext();\n\n  return useMemo(\n    () => !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId),\n    [mutes, targetUserId],\n  );\n};\n"],"mappings":";;;AAIA,IAAa,kBAAkB,iBAA0B;CACvD,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACC,CAAC,CAAC,gBAAgB,MAAM,MAAM,SAAS,KAAK,OAAO,OAAO,YAAY,GAC5E,CAAC,OAAO,YAAY,CACtB;AACF"}
+{"version":3,"file":"useIsUserMuted.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useIsUserMuted.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useChatContext } from '../../../context/ChatContext';\n\nexport const useIsUserMuted = (targetUserId?: string) => {\n  const { mutes } = useChatContext();\n\n  return useMemo(\n    () => !!targetUserId && mutes.some((mute) => mute.target?.id === targetUserId),\n    [mutes, targetUserId],\n  );\n};\n"],"mappings":";;;AAIA,IAAa,kBAAkB,iBAA0B;CACvD,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACC,CAAC,CAAC,gBAAgB,MAAM,MAAM,SAAS,KAAK,QAAQ,OAAO,YAAY,GAC7E,CAAC,OAAO,YAAY,CACtB;AACF"}

package/dist/es/components/ChannelListItem/hooks/useMessageDeliveryStatus.mjs

@@ -1,5 +1,6 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../../context/ChatContext.mjs";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useMemo } from "react";
 //#region src/components/ChannelListItem/hooks/useMessageDeliveryStatus.ts
 var MessageDeliveryStatus = /* @__PURE__ */ function(MessageDeliveryStatus) {
 	MessageDeliveryStatus["SENT"] = "sent";
@@ -7,60 +8,27 @@ var MessageDeliveryStatus = /* @__PURE__ */ function(MessageDeliveryStatus) {
 	MessageDeliveryStatus["READ"] = "read";
 	return MessageDeliveryStatus;
 }({});
+/** Whether a cursor has reached this message. */
+var hasCursorReached = (message, cursor) => !!cursor && message.created_at <= cursor.timestamp;
+var trackerSnapshotSelector = (next) => ({
+	lastDeliveredRefByOthers: next.lastDeliveredRefByOthers,
+	lastReadRefByOthers: next.lastReadRefByOthers
+});
 var useMessageDeliveryStatus = ({ channel, lastMessage }) => {
 	const { client } = useChatContext();
-	const [messageDeliveryStatus, setMessageDeliveryStatus] = useState();
+	const trackerSnapshot = useStateStore(channel.messageReceiptsTracker.snapshotStore, trackerSnapshotSelector);
 	const isOwnMessage = useCallback((message) => client.user && message && message.user?.id === client.user.id, [client]);
-	useEffect(() => {
-		if (!lastMessage) setMessageDeliveryStatus(void 0);
-		const lastMessageIsOwn = isOwnMessage(lastMessage);
-		if (!lastMessage?.created_at || !lastMessageIsOwn) return;
-		const msgRef = {
-			msgId: lastMessage.id,
-			timestampMs: lastMessage.created_at.getTime()
-		};
-		const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
-		const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
-		setMessageDeliveryStatus(readersForMessage.length > 1 || readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id ? "read" : deliveredForMessage.length > 1 || deliveredForMessage.length === 1 && deliveredForMessage[0].id !== client.user?.id ? "delivered" : "sent");
+	return { messageDeliveryStatus: useMemo(() => {
+		if (!lastMessage) return void 0;
+		if (!isOwnMessage(lastMessage)) return void 0;
+		if (hasCursorReached(lastMessage, trackerSnapshot?.lastReadRefByOthers ?? null)) return "read";
+		if (hasCursorReached(lastMessage, trackerSnapshot?.lastDeliveredRefByOthers ?? null)) return "delivered";
+		return "sent";
 	}, [
-		channel,
-		client,
 		isOwnMessage,
-		lastMessage
-	]);
-	useEffect(() => {
-		const handleMessageNew = (event) => {
-			if (!isOwnMessage(event.message)) return setMessageDeliveryStatus(void 0);
-			return setMessageDeliveryStatus("sent");
-		};
-		channel.on("message.new", handleMessageNew);
-		return () => {
-			channel.off("message.new", handleMessageNew);
-		};
-	}, [channel, isOwnMessage]);
-	useEffect(() => {
-		if (!isOwnMessage(lastMessage)) return;
-		const handleMessageDelivered = (event) => {
-			if (event.user?.id !== client.user?.id && lastMessage && lastMessage.id === event.last_delivered_message_id) setMessageDeliveryStatus("delivered");
-		};
-		const handleMarkRead = (event) => {
-			if (event.user?.id !== client.user?.id) setMessageDeliveryStatus("read");
-		};
-		channel.on("message.delivered", handleMessageDelivered);
-		channel.on("message.read", handleMarkRead);
-		channel.on("message.read_locally", handleMarkRead);
-		return () => {
-			channel.off("message.delivered", handleMessageDelivered);
-			channel.off("message.read", handleMarkRead);
-			channel.off("message.read_locally", handleMarkRead);
-		};
-	}, [
-		channel,
-		client,
-		isOwnMessage,
-		lastMessage
-	]);
-	return { messageDeliveryStatus };
+		lastMessage,
+		trackerSnapshot
+	]) };
 };
 //#endregion
 export { MessageDeliveryStatus, useMessageDeliveryStatus };

package/dist/es/components/ChannelListItem/hooks/useMessageDeliveryStatus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageDeliveryStatus.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useMessageDeliveryStatus.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { Channel, Event, LocalMessage, UserResponse } from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\n\nexport enum MessageDeliveryStatus {\n  SENT = 'sent',\n  DELIVERED = 'delivered',\n  READ = 'read',\n}\n\ntype UseMessageStatusParamsChannelPreviewProps = {\n  channel: Channel;\n  /** The last message received in a channel */\n  lastMessage?: LocalMessage;\n};\n\nexport const useMessageDeliveryStatus = ({\n  channel,\n  lastMessage,\n}: UseMessageStatusParamsChannelPreviewProps) => {\n  const { client } = useChatContext();\n  const [messageDeliveryStatus, setMessageDeliveryStatus] = useState<\n    MessageDeliveryStatus | undefined\n  >();\n\n  const isOwnMessage = useCallback(\n    (message?: { user?: UserResponse | null }) =>\n      client.user && message && message.user?.id === client.user.id,\n    [client],\n  );\n\n  useEffect(() => {\n    // empty channel\n    if (!lastMessage) {\n      setMessageDeliveryStatus(undefined);\n    }\n\n    const lastMessageIsOwn = isOwnMessage(lastMessage);\n    if (!lastMessage?.created_at || !lastMessageIsOwn) return;\n\n    const msgRef = {\n      msgId: lastMessage.id,\n      timestampMs: lastMessage.created_at.getTime(),\n    };\n    const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);\n    const deliveredForMessage =\n      channel.messageReceiptsTracker.deliveredForMessage(msgRef);\n    setMessageDeliveryStatus(\n      readersForMessage.length > 1 ||\n        (readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id)\n        ? MessageDeliveryStatus.READ\n        : deliveredForMessage.length > 1 ||\n            (deliveredForMessage.length === 1 &&\n              deliveredForMessage[0].id !== client.user?.id)\n          ? MessageDeliveryStatus.DELIVERED\n          : MessageDeliveryStatus.SENT,\n    );\n  }, [channel, client, isOwnMessage, lastMessage]);\n\n  useEffect(() => {\n    const handleMessageNew = (event: Event) => {\n      // the last message is not mine, so do not show the delivery status\n      if (!isOwnMessage(event.message)) {\n        return setMessageDeliveryStatus(undefined);\n      }\n      return setMessageDeliveryStatus(MessageDeliveryStatus.SENT);\n    };\n\n    channel.on('message.new', handleMessageNew);\n\n    return () => {\n      channel.off('message.new', handleMessageNew);\n    };\n  }, [channel, isOwnMessage]);\n\n  useEffect(() => {\n    if (!isOwnMessage(lastMessage)) return;\n    const handleMessageDelivered = (event: Event) => {\n      if (\n        event.user?.id !== client.user?.id &&\n        lastMessage &&\n        lastMessage.id === event.last_delivered_message_id\n      )\n        setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);\n    };\n\n    const handleMarkRead = (event: Event) => {\n      if (event.user?.id !== client.user?.id)\n        setMessageDeliveryStatus(MessageDeliveryStatus.READ);\n    };\n\n    channel.on('message.delivered', handleMessageDelivered);\n    channel.on('message.read', handleMarkRead);\n    channel.on('message.read_locally', handleMarkRead);\n\n    return () => {\n      channel.off('message.delivered', handleMessageDelivered);\n      channel.off('message.read', handleMarkRead);\n      channel.off('message.read_locally', handleMarkRead);\n    };\n  }, [channel, client, isOwnMessage, lastMessage]);\n\n  return {\n    messageDeliveryStatus,\n  };\n};\n"],"mappings":";;;AAKA,IAAY,wBAAL,yBAAA,uBAAA;CACL,sBAAA,UAAA;CACA,sBAAA,eAAA;CACA,sBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;AAQA,IAAa,4BAA4B,EACvC,SACA,kBAC+C;CAC/C,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,CAAC,uBAAuB,4BAA4B,SAExD;CAEF,MAAM,eAAe,aAClB,YACC,OAAO,QAAQ,WAAW,QAAQ,MAAM,OAAO,OAAO,KAAK,IAC7D,CAAC,MAAM,CACT;CAEA,gBAAgB;EAEd,IAAI,CAAC,aACH,yBAAyB,KAAA,CAAS;EAGpC,MAAM,mBAAmB,aAAa,WAAW;EACjD,IAAI,CAAC,aAAa,cAAc,CAAC,kBAAkB;EAEnD,MAAM,SAAS;GACb,OAAO,YAAY;GACnB,aAAa,YAAY,WAAW,QAAQ;EAC9C;EACA,MAAM,oBAAoB,QAAQ,uBAAuB,kBAAkB,MAAM;EACjF,MAAM,sBACJ,QAAQ,uBAAuB,oBAAoB,MAAM;EAC3D,yBACE,kBAAkB,SAAS,KACxB,kBAAkB,WAAW,KAAK,kBAAkB,EAAE,CAAC,OAAO,OAAO,MAAM,KAAA,SAE1E,oBAAoB,SAAS,KAC1B,oBAAoB,WAAW,KAC9B,oBAAoB,EAAE,CAAC,OAAO,OAAO,MAAM,KAAA,cAAA,MAGrD;CACF,GAAG;EAAC;EAAS;EAAQ;EAAc;CAAW,CAAC;CAE/C,gBAAgB;EACd,MAAM,oBAAoB,UAAiB;GAEzC,IAAI,CAAC,aAAa,MAAM,OAAO,GAC7B,OAAO,yBAAyB,KAAA,CAAS;GAE3C,OAAO,yBAAA,MAAmD;EAC5D;EAEA,QAAQ,GAAG,eAAe,gBAAgB;EAE1C,aAAa;GACX,QAAQ,IAAI,eAAe,gBAAgB;EAC7C;CACF,GAAG,CAAC,SAAS,YAAY,CAAC;CAE1B,gBAAgB;EACd,IAAI,CAAC,aAAa,WAAW,GAAG;EAChC,MAAM,0BAA0B,UAAiB;GAC/C,IACE,MAAM,MAAM,OAAO,OAAO,MAAM,MAChC,eACA,YAAY,OAAO,MAAM,2BAEzB,yBAAA,WAAwD;EAC5D;EAEA,MAAM,kBAAkB,UAAiB;GACvC,IAAI,MAAM,MAAM,OAAO,OAAO,MAAM,IAClC,yBAAA,MAAmD;EACvD;EAEA,QAAQ,GAAG,qBAAqB,sBAAsB;EACtD,QAAQ,GAAG,gBAAgB,cAAc;EACzC,QAAQ,GAAG,wBAAwB,cAAc;EAEjD,aAAa;GACX,QAAQ,IAAI,qBAAqB,sBAAsB;GACvD,QAAQ,IAAI,gBAAgB,cAAc;GAC1C,QAAQ,IAAI,wBAAwB,cAAc;EACpD;CACF,GAAG;EAAC;EAAS;EAAQ;EAAc;CAAW,CAAC;CAE/C,OAAO,EACL,sBACF;AACF"}
+{"version":3,"file":"useMessageDeliveryStatus.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useMessageDeliveryStatus.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport type {\n  Channel,\n  LocalMessage,\n  MessageReceiptsSnapshot,\n  MsgRef,\n  UserResponse,\n} from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\nimport { useStateStore } from '../../../store/hooks/useStateStore';\n\nexport enum MessageDeliveryStatus {\n  SENT = 'sent',\n  DELIVERED = 'delivered',\n  READ = 'read',\n}\n\ntype UseMessageStatusParamsChannelPreviewProps = {\n  channel: Channel;\n  /** The last message received in a channel */\n  lastMessage?: LocalMessage;\n};\n\n/** Whether a cursor has reached this message. */\nconst hasCursorReached = (message: LocalMessage, cursor: MsgRef | null) =>\n  !!cursor && message.created_at <= cursor.timestamp;\n\nconst trackerSnapshotSelector = (next: MessageReceiptsSnapshot) => ({\n  lastDeliveredRefByOthers: next.lastDeliveredRefByOthers,\n  lastReadRefByOthers: next.lastReadRefByOthers,\n});\n\nexport const useMessageDeliveryStatus = ({\n  channel,\n  lastMessage,\n}: UseMessageStatusParamsChannelPreviewProps) => {\n  const { client } = useChatContext();\n  const trackerSnapshot = useStateStore(\n    channel.messageReceiptsTracker.snapshotStore,\n    trackerSnapshotSelector,\n  );\n\n  const isOwnMessage = useCallback(\n    (message?: { user?: UserResponse | null }) =>\n      client.user && message && message.user?.id === client.user.id,\n    [client],\n  );\n\n  const messageDeliveryStatus = useMemo(() => {\n    // empty channel\n    if (!lastMessage) return undefined;\n\n    const lastMessageIsOwn = isOwnMessage(lastMessage);\n    if (!lastMessageIsOwn) return undefined;\n\n    // Read against the cursors rather than asking who sits on this message: a member whose cursor\n    // is behind the latest message has still received everything up to it, and the old lookup\n    // reported that as `SENT`.\n    if (hasCursorReached(lastMessage, trackerSnapshot?.lastReadRefByOthers ?? null)) {\n      return MessageDeliveryStatus.READ;\n    }\n    if (\n      hasCursorReached(lastMessage, trackerSnapshot?.lastDeliveredRefByOthers ?? null)\n    ) {\n      return MessageDeliveryStatus.DELIVERED;\n    }\n    return MessageDeliveryStatus.SENT;\n  }, [isOwnMessage, lastMessage, trackerSnapshot]);\n\n  return {\n    messageDeliveryStatus,\n  };\n};\n"],"mappings":";;;;AAYA,IAAY,wBAAL,yBAAA,uBAAA;CACL,sBAAA,UAAA;CACA,sBAAA,eAAA;CACA,sBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;AASA,IAAM,oBAAoB,SAAuB,WAC/C,CAAC,CAAC,UAAU,QAAQ,cAAc,OAAO;AAE3C,IAAM,2BAA2B,UAAmC;CAClE,0BAA0B,KAAK;CAC/B,qBAAqB,KAAK;AAC5B;AAEA,IAAa,4BAA4B,EACvC,SACA,kBAC+C;CAC/C,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,kBAAkB,cACtB,QAAQ,uBAAuB,eAC/B,uBACF;CAEA,MAAM,eAAe,aAClB,YACC,OAAO,QAAQ,WAAW,QAAQ,MAAM,OAAO,OAAO,KAAK,IAC7D,CAAC,MAAM,CACT;CAuBA,OAAO,EACL,uBAtB4B,cAAc;EAE1C,IAAI,CAAC,aAAa,OAAO,KAAA;EAGzB,IAAI,CADqB,aAAa,WACjC,GAAkB,OAAO,KAAA;EAK9B,IAAI,iBAAiB,aAAa,iBAAiB,uBAAuB,IAAI,GAC5E,OAAA;EAEF,IACE,iBAAiB,aAAa,iBAAiB,4BAA4B,IAAI,GAE/E,OAAA;EAEF,OAAA;CACF,GAAG;EAAC;EAAc;EAAa;CAAe,CAG5C,EACF;AACF"}

package/dist/es/components/ChannelListItem/utils.a11y.mjs

@@ -1,7 +1,8 @@
-import { getDateString, isDate } from "../../i18n/utils.mjs";
-import { getLatestMessagePreviewText } from "./utils.mjs";
+import { getDateString } from "../../i18n/utils.mjs";
 import { activeLabelPart, composeAccessibleLabel, unreadCountLabelPart } from "../../a11y/accessibleLabel.mjs";
 import { MessageDeliveryStatus } from "./hooks/useMessageDeliveryStatus.mjs";
+import { getLatestMessagePreviewText } from "./utils.mjs";
+import { convertTimestampToDate } from "stream-chat";
 //#region src/components/ChannelListItem/utils.a11y.ts
 /**
 * The default, named label parts. Each is independently overridable via
@@ -14,41 +15,45 @@ var defaultChannelListItemLabelParts = {
 	attachments: ({ latestMessage, t }) => {
 		const count = latestMessage?.attachments?.filter((attachment) => !attachment.og_scrape_url).length ?? 0;
 		if (count === 0 || count === 1 && !latestMessage?.text) return void 0;
-		return t("aria/{{ count }} attachment", { count });
+		return t("channelListItem.attachmentCount.ariaLabel", {
+			count,
+			defaultValue_one: "{{ count }} attachment",
+			defaultValue_other: "{{ count }} attachments"
+		});
 	},
 	deliveryStatus: ({ messageDeliveryStatus, t }) => {
 		if (!messageDeliveryStatus) return void 0;
-		return t("aria/Delivery status: {{ deliveryStatus }}", { deliveryStatus: {
-			[MessageDeliveryStatus.SENT]: t("aria/Sent"),
-			[MessageDeliveryStatus.DELIVERED]: t("aria/Delivered"),
-			[MessageDeliveryStatus.READ]: t("aria/Read")
+		return t("channelListItem.deliveryStatus.ariaLabel", "Delivery status: {{ deliveryStatus }}", { deliveryStatus: {
+			[MessageDeliveryStatus.SENT]: t("channelListItem.sent.ariaLabel", "Sent"),
+			[MessageDeliveryStatus.DELIVERED]: t("channelListItem.delivered.ariaLabel", "Delivered"),
+			[MessageDeliveryStatus.READ]: t("channelListItem.read.ariaLabel", "Read")
 		}[messageDeliveryStatus] });
 	},
 	lastMessage: ({ channel, client, isMessageAIGenerated, latestMessage, t, userLanguage }) => {
 		const preview = getLatestMessagePreviewText(channel, t, userLanguage, isMessageAIGenerated, latestMessage);
 		if (!latestMessage) return preview;
-		const sender = !!client.userID && latestMessage.user?.id === client.userID ? t("You") : latestMessage.user?.name;
-		return sender ? t("aria/Last message from {{ sender }}: {{ messagePreview }}", {
+		const sender = !!client.userID && latestMessage.user?.id === client.userID ? t("common.you.label", "You") : latestMessage.user?.name;
+		return sender ? t("channelListItem.lastMessage.withSenderAndMessagePreview.ariaLabel", "Last message from {{ sender }}: {{ messagePreview }}", {
 			messagePreview: preview,
 			sender
-		}) : t("aria/Last message: {{ messagePreview }}", { messagePreview: preview });
+		}) : t("channelListItem.lastMessage.withMessagePreview.ariaLabel", "Last message: {{ messagePreview }}", { messagePreview: preview });
 	},
 	linkPreview: ({ latestMessage, t }) => {
 		const link = latestMessage?.attachments?.find((attachment) => attachment.og_scrape_url);
 		if (!link) return void 0;
-		return link.title ? t("aria/Shared a link with title: {{ linkTitle }}", { linkTitle: link.title }) : t("aria/Shared a link");
+		return link.title ? t("channelListItem.sharedLinkTitle.ariaLabel", "Shared a link with title: {{ linkTitle }}", { linkTitle: link.title }) : t("channelListItem.sharedLink.ariaLabel", "Shared a link");
 	},
 	name: ({ displayTitle }) => displayTitle || void 0,
 	time: ({ latestMessage, t, tDateTimeParser }) => {
 		const createdAt = latestMessage?.created_at;
-		if (!createdAt || !isDate(createdAt)) return void 0;
+		if (createdAt == null) return void 0;
 		const when = getDateString({
-			messageCreatedAt: createdAt.toISOString(),
+			messageCreatedAt: convertTimestampToDate(createdAt)?.toISOString(),
 			t,
 			tDateTimeParser,
-			timestampTranslationKey: "timestamp/ChannelPreviewTimestamp"
+			timestampTranslationKey: "timestamp.ChannelPreviewTimestamp"
 		});
-		return when ? t("aria/Last activity: {{ time }}", { time: String(when) }) : void 0;
+		return when ? t("common.lastActivity.ariaLabel", "Last activity: {{ time }}", { time: String(when) }) : void 0;
 	},
 	unreadCount: unreadCountLabelPart
 };
@@ -92,15 +97,24 @@ var DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER = [
 * - Each part receives {@link ChannelListItemLabelData}. `active`/`unreadCount`/
 *   `messageDeliveryStatus` are passed directly and `latestMessage` is pre-resolved by the composer
 *   (see its doc); everything else (mute/pin state, `frozen`, member count, custom `channel.data`) is
-*   read off `channel`. Parts call `t`, so provide your own i18n keys (or return plain strings) —
-*   the SDK does not ship `Pinned`/`Muted`/`Frozen` strings.
+*   read off `channel`. The SDK does not ship `Pinned`/`Muted`/`Frozen` strings, so return plain
+*   strings or your own keys. `t` only accepts keys in {@link TranslationKey}; wrap your own in
+*   {@link asDynamicKey} (exported from `stream-chat-react`) and pass the English copy as the
+*   second argument, exactly as SDK call sites do.
 *
 * ```tsx
 * const accessibleLabelConfig: ChannelListItemLabelConfig = {
 *   parts: {
-*     pinned: ({ channel, t }) => (channel.state.membership?.pinned_at ? t('Pinned') : undefined),
-*     muted: ({ channel, t }) => (channel.muteStatus().muted ? t('Muted') : undefined),
-*     frozen: ({ channel, t }) => (channel.data?.frozen ? t('Frozen') : undefined),
+*     pinned: ({ channel, t }) =>
+*       channel.state.membership?.pinned_at
+*         ? t(asDynamicKey('myApp.channelList.pinned'), 'Pinned')
+*         : undefined,
+*     muted: ({ channel, t }) =>
+*       channel.muteStatus().muted
+*         ? t(asDynamicKey('myApp.channelList.muted'), 'Muted')
+*         : undefined,
+*     frozen: ({ channel, t }) =>
+*       channel.data?.frozen ? t(asDynamicKey('myApp.channelList.frozen'), 'Frozen') : undefined,
 *   },
 *   order: ['name', 'pinned', 'muted', 'frozen', ...DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER.slice(1)],
 * };
@@ -113,7 +127,7 @@ var DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER = [
 */
 var composeChannelListItemAccessibleLabel = (data, config = {}) => composeAccessibleLabel({
 	...data,
-	latestMessage: data.latestMessage ?? data.channel.state.latestMessages[data.channel.state.latestMessages.length - 1]
+	latestMessage: data.latestMessage ?? data.channel.messagePaginator.aggregateState.getLatestValue().lastMessage ?? void 0
 }, defaultChannelListItemLabelParts, DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER, config);
 //#endregion
 export { DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER, composeChannelListItemAccessibleLabel, defaultChannelListItemLabelParts };

package/dist/es/components/ChannelListItem/utils.a11y.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.a11y.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/utils.a11y.ts"],"sourcesContent":["import type { Channel, LocalMessage, StreamChat } from 'stream-chat';\n\nimport type { ChatContextValue } from '../../context';\nimport type { TranslationContextValue } from '../../context/TranslationContext';\nimport {\n  type AccessibleLabelConfig,\n  type AccessibleLabelPart,\n  activeLabelPart,\n  composeAccessibleLabel,\n  unreadCountLabelPart,\n} from '../../a11y/accessibleLabel';\nimport { getDateString, isDate } from '../../i18n/utils';\nimport { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';\nimport { getLatestMessagePreviewText } from './utils';\n\n/**\n * Everything a label part needs. Gathered by `ChannelListItemUI` from its props + contexts and\n * handed to each {@link ChannelListItemLabelPart}.\n */\nexport type ChannelListItemLabelData = {\n  /** Whether the row is the active (currently open) channel. */\n  active?: boolean;\n  /** The channel whose latest message is summarized. */\n  channel: Channel;\n  /** Client, used to detect whether the latest message is the current user's own. */\n  client: StreamChat;\n  /** Channel display name. */\n  displayTitle?: string;\n  isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'];\n  /**\n   * The channel's latest message. {@link composeChannelListItemAccessibleLabel} resolves this once\n   * (to the last entry of `channel.state.latestMessages` when omitted) and passes the SAME message\n   * to every part, so all segments (sender, preview, attachments, time) describe one message.\n   */\n  latestMessage?: LocalMessage;\n  /** Delivery/read status of the latest message when it is the current user's own. */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n  t: TranslationContextValue['t'];\n  tDateTimeParser: TranslationContextValue['tDateTimeParser'];\n  /** Unread count for the channel. */\n  unreadCount?: number;\n  userLanguage?: TranslationContextValue['userLanguage'];\n};\n\n/** Produces one segment of the accessible name; return `undefined`/empty to omit it. */\nexport type ChannelListItemLabelPart = AccessibleLabelPart<ChannelListItemLabelData>;\n\n/**\n * The default, named label parts. Each is independently overridable via\n * {@link ChannelListItemLabelConfig.parts}. The active (currently open) state is announced here (not\n * left to the row's `aria-selected` alone, which is not reliably spoken across screen readers for an\n * option with a custom name); `aria-selected` is kept on the active row for listbox semantics.\n */\nexport const defaultChannelListItemLabelParts = {\n  active: activeLabelPart,\n  // Announced alongside the last message text: the number of attachments. Link previews are\n  // excluded (the linkPreview part announces those). A single attachment with no text is skipped\n  // here because the lastMessage part already conveys it as \"Attachment <type>\".\n  attachments: ({ latestMessage, t }) => {\n    const count =\n      latestMessage?.attachments?.filter((attachment) => !attachment.og_scrape_url)\n        .length ?? 0;\n    if (count === 0 || (count === 1 && !latestMessage?.text)) return undefined;\n    return t('aria/{{ count }} attachment', { count });\n  },\n  deliveryStatus: ({ messageDeliveryStatus, t }) => {\n    if (!messageDeliveryStatus) return undefined;\n    const statusLabelByStatus: Record<MessageDeliveryStatus, string> = {\n      [MessageDeliveryStatus.SENT]: t('aria/Sent'),\n      [MessageDeliveryStatus.DELIVERED]: t('aria/Delivered'),\n      [MessageDeliveryStatus.READ]: t('aria/Read'),\n    };\n    return t('aria/Delivery status: {{ deliveryStatus }}', {\n      deliveryStatus: statusLabelByStatus[messageDeliveryStatus],\n    });\n  },\n  lastMessage: ({\n    channel,\n    client,\n    isMessageAIGenerated,\n    latestMessage,\n    t,\n    userLanguage,\n  }) => {\n    const preview = getLatestMessagePreviewText(\n      channel,\n      t,\n      userLanguage,\n      isMessageAIGenerated,\n      // `latestMessage` is pre-resolved by the composer, so the announced preview describes the same\n      // message as the sender/status/time segments.\n      latestMessage,\n    );\n    // Empty channel: announce there are no messages (\"Nothing yet...\").\n    if (!latestMessage) return preview;\n    const isOwn = !!client.userID && latestMessage.user?.id === client.userID;\n    // Use the sender's name (or \"You\" for the current user). When the name is unknown we omit the\n    // sender rather than reading out a raw user id.\n    const sender = isOwn ? t('You') : latestMessage.user?.name;\n    return sender\n      ? t('aria/Last message from {{ sender }}: {{ messagePreview }}', {\n          messagePreview: preview,\n          sender,\n        })\n      : t('aria/Last message: {{ messagePreview }}', { messagePreview: preview });\n  },\n  linkPreview: ({ latestMessage, t }) => {\n    const link = latestMessage?.attachments?.find(\n      (attachment) => attachment.og_scrape_url,\n    );\n    if (!link) return undefined;\n    return link.title\n      ? t('aria/Shared a link with title: {{ linkTitle }}', { linkTitle: link.title })\n      : t('aria/Shared a link');\n  },\n  name: ({ displayTitle }) => displayTitle || undefined,\n  time: ({ latestMessage, t, tDateTimeParser }) => {\n    const createdAt = latestMessage?.created_at;\n    if (!createdAt || !isDate(createdAt)) return undefined;\n    const when = getDateString({\n      messageCreatedAt: createdAt.toISOString(),\n      t,\n      tDateTimeParser,\n      timestampTranslationKey: 'timestamp/ChannelPreviewTimestamp',\n    });\n    // Prefix the time so it is clearly its own segment (not read as part of the preceding\n    // delivery-status segment).\n    return when ? t('aria/Last activity: {{ time }}', { time: String(when) }) : undefined;\n  },\n  unreadCount: unreadCountLabelPart,\n} satisfies Record<string, ChannelListItemLabelPart>;\n\n/** Default order the parts are assembled in (reading order). */\nexport const DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER = [\n  'name',\n  'active',\n  'unreadCount',\n  'lastMessage',\n  'attachments',\n  'linkPreview',\n  'deliveryStatus',\n  'time',\n] as const;\n\nexport type ChannelListItemLabelConfig = AccessibleLabelConfig<ChannelListItemLabelData>;\n\n/**\n * Composes a single, coherent accessible name for a channel list row from named parts. The default\n * reading order is name → unread → last message (sender + preview) → delivery status → time.\n *\n * ## Customizing the label\n *\n * The label is generated by `ChannelListItemUI`, which accepts an `accessibleLabelConfig` prop. To\n * customize it, supply your own `ChannelListItemUI` through `ComponentContext` (the same way the\n * component is overridden) and forward the config — no new plumbing:\n *\n * ```tsx\n * const MyChannelPreview = (props) => (\n *   <DefaultChannelListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />\n * );\n * // <ComponentProvider value={{ ChannelListItemUI: MyChannelPreview }}> … </ComponentProvider>\n * ```\n *\n * ### Adding custom parts (e.g. Pinned, Muted, Frozen)\n *\n * - {@link ChannelListItemLabelConfig.parts} is merged over {@link defaultChannelListItemLabelParts},\n *   so a new key is *added* and a same-named key *overrides* the default.\n * - A part returns its segment string, or `undefined`/`''` to be omitted (so e.g. \"Pinned\" is only\n *   spoken when actually pinned).\n * - {@link ChannelListItemLabelConfig.order} decides which parts are included AND their sequence —\n *   **a part not listed in `order` is never rendered**, even if defined. Spread\n *   {@link DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.\n * - Each part receives {@link ChannelListItemLabelData}. `active`/`unreadCount`/\n *   `messageDeliveryStatus` are passed directly and `latestMessage` is pre-resolved by the composer\n *   (see its doc); everything else (mute/pin state, `frozen`, member count, custom `channel.data`) is\n *   read off `channel`. Parts call `t`, so provide your own i18n keys (or return plain strings) —\n *   the SDK does not ship `Pinned`/`Muted`/`Frozen` strings.\n *\n * ```tsx\n * const accessibleLabelConfig: ChannelListItemLabelConfig = {\n *   parts: {\n *     pinned: ({ channel, t }) => (channel.state.membership?.pinned_at ? t('Pinned') : undefined),\n *     muted: ({ channel, t }) => (channel.muteStatus().muted ? t('Muted') : undefined),\n *     frozen: ({ channel, t }) => (channel.data?.frozen ? t('Frozen') : undefined),\n *   },\n *   order: ['name', 'pinned', 'muted', 'frozen', ...DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER.slice(1)],\n * };\n * // → \"General. Pinned. Muted. 3 unread messages. Last message from Alice: hi. 2 days ago\"\n * ```\n *\n * For full control, set {@link ChannelListItemLabelConfig.build} (return the entire string), or\n * write a custom `ChannelListItemUI` that calls this function directly — importing\n * {@link defaultChannelListItemLabelParts} to reuse the built-ins.\n */\nexport const composeChannelListItemAccessibleLabel = (\n  data: ChannelListItemLabelData,\n  config: ChannelListItemLabelConfig = {},\n): string =>\n  composeAccessibleLabel(\n    // Resolve the latest message ONCE here so every part is handed the same message (sender,\n    // preview, attachments, link, time all stay in sync) instead of each re-deriving the channel's\n    // latest — which only stayed consistent as long as the duplicated fallbacks matched.\n    {\n      ...data,\n      latestMessage:\n        data.latestMessage ??\n        data.channel.state.latestMessages[data.channel.state.latestMessages.length - 1],\n    },\n    defaultChannelListItemLabelParts,\n    DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER,\n    config,\n  );\n"],"mappings":";;;;;;;;;;;AAqDA,IAAa,mCAAmC;CAC9C,QAAQ;CAIR,cAAc,EAAE,eAAe,QAAQ;EACrC,MAAM,QACJ,eAAe,aAAa,QAAQ,eAAe,CAAC,WAAW,aAAa,CAAC,CAC1E,UAAU;EACf,IAAI,UAAU,KAAM,UAAU,KAAK,CAAC,eAAe,MAAO,OAAO,KAAA;EACjE,OAAO,EAAE,+BAA+B,EAAE,MAAM,CAAC;CACnD;CACA,iBAAiB,EAAE,uBAAuB,QAAQ;EAChD,IAAI,CAAC,uBAAuB,OAAO,KAAA;EAMnC,OAAO,EAAE,8CAA8C,EACrD,gBAAgB;IALf,sBAAsB,OAAO,EAAE,WAAW;IAC1C,sBAAsB,YAAY,EAAE,gBAAgB;IACpD,sBAAsB,OAAO,EAAE,WAAW;EAG3B,EAAoB,uBACtC,CAAC;CACH;CACA,cAAc,EACZ,SACA,QACA,sBACA,eACA,GACA,mBACI;EACJ,MAAM,UAAU,4BACd,SACA,GACA,cACA,sBAGA,aACF;EAEA,IAAI,CAAC,eAAe,OAAO;EAI3B,MAAM,SAHQ,CAAC,CAAC,OAAO,UAAU,cAAc,MAAM,OAAO,OAAO,SAG5C,EAAE,KAAK,IAAI,cAAc,MAAM;EACtD,OAAO,SACH,EAAE,6DAA6D;GAC7D,gBAAgB;GAChB;EACF,CAAC,IACD,EAAE,2CAA2C,EAAE,gBAAgB,QAAQ,CAAC;CAC9E;CACA,cAAc,EAAE,eAAe,QAAQ;EACrC,MAAM,OAAO,eAAe,aAAa,MACtC,eAAe,WAAW,aAC7B;EACA,IAAI,CAAC,MAAM,OAAO,KAAA;EAClB,OAAO,KAAK,QACR,EAAE,kDAAkD,EAAE,WAAW,KAAK,MAAM,CAAC,IAC7E,EAAE,oBAAoB;CAC5B;CACA,OAAO,EAAE,mBAAmB,gBAAgB,KAAA;CAC5C,OAAO,EAAE,eAAe,GAAG,sBAAsB;EAC/C,MAAM,YAAY,eAAe;EACjC,IAAI,CAAC,aAAa,CAAC,OAAO,SAAS,GAAG,OAAO,KAAA;EAC7C,MAAM,OAAO,cAAc;GACzB,kBAAkB,UAAU,YAAY;GACxC;GACA;GACA,yBAAyB;EAC3B,CAAC;EAGD,OAAO,OAAO,EAAE,kCAAkC,EAAE,MAAM,OAAO,IAAI,EAAE,CAAC,IAAI,KAAA;CAC9E;CACA,aAAa;AACf;;AAGA,IAAa,wCAAwC;CACnD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,IAAa,yCACX,MACA,SAAqC,CAAC,MAEtC,uBAIE;CACE,GAAG;CACH,eACE,KAAK,iBACL,KAAK,QAAQ,MAAM,eAAe,KAAK,QAAQ,MAAM,eAAe,SAAS;AACjF,GACA,kCACA,uCACA,MACF"}
+{"version":3,"file":"utils.a11y.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/utils.a11y.ts"],"sourcesContent":["import type { Channel, LocalMessage, StreamChat } from 'stream-chat';\n\nimport type { ChatContextValue } from '../../context';\nimport type { TranslationContextValue } from '../../context/TranslationContext';\nimport {\n  type AccessibleLabelConfig,\n  type AccessibleLabelPart,\n  activeLabelPart,\n  composeAccessibleLabel,\n  unreadCountLabelPart,\n} from '../../a11y/accessibleLabel';\nimport { getDateString } from '../../i18n/utils';\nimport { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';\nimport { getLatestMessagePreviewText } from './utils';\nimport { convertTimestampToDate } from 'stream-chat';\n\n/**\n * Everything a label part needs. Gathered by `ChannelListItemUI` from its props + contexts and\n * handed to each {@link ChannelListItemLabelPart}.\n */\nexport type ChannelListItemLabelData = {\n  /** Whether the row is the active (currently open) channel. */\n  active?: boolean;\n  /** The channel whose latest message is summarized. */\n  channel: Channel;\n  /** Client, used to detect whether the latest message is the current user's own. */\n  client: StreamChat;\n  /** Channel display name. */\n  displayTitle?: string;\n  isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'];\n  /**\n   * The channel's latest message. {@link composeChannelListItemAccessibleLabel} resolves this once\n   * (to the last entry of `channel.state.latestMessages` when omitted) and passes the SAME message\n   * to every part, so all segments (sender, preview, attachments, time) describe one message.\n   */\n  latestMessage?: LocalMessage;\n  /** Delivery/read status of the latest message when it is the current user's own. */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n  t: TranslationContextValue['t'];\n  tDateTimeParser: TranslationContextValue['tDateTimeParser'];\n  /** Unread count for the channel. */\n  unreadCount?: number;\n  userLanguage?: TranslationContextValue['userLanguage'];\n};\n\n/** Produces one segment of the accessible name; return `undefined`/empty to omit it. */\nexport type ChannelListItemLabelPart = AccessibleLabelPart<ChannelListItemLabelData>;\n\n/**\n * The default, named label parts. Each is independently overridable via\n * {@link ChannelListItemLabelConfig.parts}. The active (currently open) state is announced here (not\n * left to the row's `aria-selected` alone, which is not reliably spoken across screen readers for an\n * option with a custom name); `aria-selected` is kept on the active row for listbox semantics.\n */\nexport const defaultChannelListItemLabelParts = {\n  active: activeLabelPart,\n  // Announced alongside the last message text: the number of attachments. Link previews are\n  // excluded (the linkPreview part announces those). A single attachment with no text is skipped\n  // here because the lastMessage part already conveys it as \"Attachment <type>\".\n  attachments: ({ latestMessage, t }) => {\n    const count =\n      latestMessage?.attachments?.filter((attachment) => !attachment.og_scrape_url)\n        .length ?? 0;\n    if (count === 0 || (count === 1 && !latestMessage?.text)) return undefined;\n    return t('channelListItem.attachmentCount.ariaLabel', {\n      count,\n      defaultValue_one: '{{ count }} attachment',\n      defaultValue_other: '{{ count }} attachments',\n    });\n  },\n  deliveryStatus: ({ messageDeliveryStatus, t }) => {\n    if (!messageDeliveryStatus) return undefined;\n    const statusLabelByStatus: Record<MessageDeliveryStatus, string> = {\n      [MessageDeliveryStatus.SENT]: t('channelListItem.sent.ariaLabel', 'Sent'),\n      [MessageDeliveryStatus.DELIVERED]: t(\n        'channelListItem.delivered.ariaLabel',\n        'Delivered',\n      ),\n      [MessageDeliveryStatus.READ]: t('channelListItem.read.ariaLabel', 'Read'),\n    };\n    return t(\n      'channelListItem.deliveryStatus.ariaLabel',\n      'Delivery status: {{ deliveryStatus }}',\n      {\n        deliveryStatus: statusLabelByStatus[messageDeliveryStatus],\n      },\n    );\n  },\n  lastMessage: ({\n    channel,\n    client,\n    isMessageAIGenerated,\n    latestMessage,\n    t,\n    userLanguage,\n  }) => {\n    const preview = getLatestMessagePreviewText(\n      channel,\n      t,\n      userLanguage,\n      isMessageAIGenerated,\n      // `latestMessage` is pre-resolved by the composer, so the announced preview describes the same\n      // message as the sender/status/time segments.\n      latestMessage,\n    );\n    // Empty channel: announce there are no messages (\"Nothing yet...\").\n    if (!latestMessage) return preview;\n    const isOwn = !!client.userID && latestMessage.user?.id === client.userID;\n    // Use the sender's name (or \"You\" for the current user). When the name is unknown we omit the\n    // sender rather than reading out a raw user id.\n    const sender = isOwn ? t('common.you.label', 'You') : latestMessage.user?.name;\n    return sender\n      ? t(\n          'channelListItem.lastMessage.withSenderAndMessagePreview.ariaLabel',\n          'Last message from {{ sender }}: {{ messagePreview }}',\n          {\n            messagePreview: preview,\n            sender,\n          },\n        )\n      : t(\n          'channelListItem.lastMessage.withMessagePreview.ariaLabel',\n          'Last message: {{ messagePreview }}',\n          { messagePreview: preview },\n        );\n  },\n  linkPreview: ({ latestMessage, t }) => {\n    const link = latestMessage?.attachments?.find(\n      (attachment) => attachment.og_scrape_url,\n    );\n    if (!link) return undefined;\n    return link.title\n      ? t(\n          'channelListItem.sharedLinkTitle.ariaLabel',\n          'Shared a link with title: {{ linkTitle }}',\n          { linkTitle: link.title },\n        )\n      : t('channelListItem.sharedLink.ariaLabel', 'Shared a link');\n  },\n  name: ({ displayTitle }) => displayTitle || undefined,\n  time: ({ latestMessage, t, tDateTimeParser }) => {\n    const createdAt = latestMessage?.created_at;\n    if (createdAt == null) return undefined;\n    const when = getDateString({\n      messageCreatedAt: convertTimestampToDate(createdAt)?.toISOString(),\n      t,\n      tDateTimeParser,\n      timestampTranslationKey: 'timestamp.ChannelPreviewTimestamp',\n    });\n    // Prefix the time so it is clearly its own segment (not read as part of the preceding\n    // delivery-status segment).\n    return when\n      ? t('common.lastActivity.ariaLabel', 'Last activity: {{ time }}', {\n          time: String(when),\n        })\n      : undefined;\n  },\n  unreadCount: unreadCountLabelPart,\n} satisfies Record<string, ChannelListItemLabelPart>;\n\n/** Default order the parts are assembled in (reading order). */\nexport const DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER = [\n  'name',\n  'active',\n  'unreadCount',\n  'lastMessage',\n  'attachments',\n  'linkPreview',\n  'deliveryStatus',\n  'time',\n] as const;\n\nexport type ChannelListItemLabelConfig = AccessibleLabelConfig<ChannelListItemLabelData>;\n\n/**\n * Composes a single, coherent accessible name for a channel list row from named parts. The default\n * reading order is name → unread → last message (sender + preview) → delivery status → time.\n *\n * ## Customizing the label\n *\n * The label is generated by `ChannelListItemUI`, which accepts an `accessibleLabelConfig` prop. To\n * customize it, supply your own `ChannelListItemUI` through `ComponentContext` (the same way the\n * component is overridden) and forward the config — no new plumbing:\n *\n * ```tsx\n * const MyChannelPreview = (props) => (\n *   <DefaultChannelListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />\n * );\n * // <ComponentProvider value={{ ChannelListItemUI: MyChannelPreview }}> … </ComponentProvider>\n * ```\n *\n * ### Adding custom parts (e.g. Pinned, Muted, Frozen)\n *\n * - {@link ChannelListItemLabelConfig.parts} is merged over {@link defaultChannelListItemLabelParts},\n *   so a new key is *added* and a same-named key *overrides* the default.\n * - A part returns its segment string, or `undefined`/`''` to be omitted (so e.g. \"Pinned\" is only\n *   spoken when actually pinned).\n * - {@link ChannelListItemLabelConfig.order} decides which parts are included AND their sequence —\n *   **a part not listed in `order` is never rendered**, even if defined. Spread\n *   {@link DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.\n * - Each part receives {@link ChannelListItemLabelData}. `active`/`unreadCount`/\n *   `messageDeliveryStatus` are passed directly and `latestMessage` is pre-resolved by the composer\n *   (see its doc); everything else (mute/pin state, `frozen`, member count, custom `channel.data`) is\n *   read off `channel`. The SDK does not ship `Pinned`/`Muted`/`Frozen` strings, so return plain\n *   strings or your own keys. `t` only accepts keys in {@link TranslationKey}; wrap your own in\n *   {@link asDynamicKey} (exported from `stream-chat-react`) and pass the English copy as the\n *   second argument, exactly as SDK call sites do.\n *\n * ```tsx\n * const accessibleLabelConfig: ChannelListItemLabelConfig = {\n *   parts: {\n *     pinned: ({ channel, t }) =>\n *       channel.state.membership?.pinned_at\n *         ? t(asDynamicKey('myApp.channelList.pinned'), 'Pinned')\n *         : undefined,\n *     muted: ({ channel, t }) =>\n *       channel.muteStatus().muted\n *         ? t(asDynamicKey('myApp.channelList.muted'), 'Muted')\n *         : undefined,\n *     frozen: ({ channel, t }) =>\n *       channel.data?.frozen ? t(asDynamicKey('myApp.channelList.frozen'), 'Frozen') : undefined,\n *   },\n *   order: ['name', 'pinned', 'muted', 'frozen', ...DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER.slice(1)],\n * };\n * // → \"General. Pinned. Muted. 3 unread messages. Last message from Alice: hi. 2 days ago\"\n * ```\n *\n * For full control, set {@link ChannelListItemLabelConfig.build} (return the entire string), or\n * write a custom `ChannelListItemUI` that calls this function directly — importing\n * {@link defaultChannelListItemLabelParts} to reuse the built-ins.\n */\nexport const composeChannelListItemAccessibleLabel = (\n  data: ChannelListItemLabelData,\n  config: ChannelListItemLabelConfig = {},\n): string =>\n  composeAccessibleLabel(\n    // Resolve the latest message ONCE here so every part is handed the same message (sender,\n    // preview, attachments, link, time all stay in sync) instead of each re-deriving the channel's\n    // latest — which only stayed consistent as long as the duplicated fallbacks matched.\n    {\n      ...data,\n      latestMessage:\n        data.latestMessage ??\n        data.channel.messagePaginator.aggregateState.getLatestValue().lastMessage ??\n        undefined,\n    },\n    defaultChannelListItemLabelParts,\n    DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER,\n    config,\n  );\n"],"mappings":";;;;;;;;;;;;AAsDA,IAAa,mCAAmC;CAC9C,QAAQ;CAIR,cAAc,EAAE,eAAe,QAAQ;EACrC,MAAM,QACJ,eAAe,aAAa,QAAQ,eAAe,CAAC,WAAW,aAAa,CAAC,CAC1E,UAAU;EACf,IAAI,UAAU,KAAM,UAAU,KAAK,CAAC,eAAe,MAAO,OAAO,KAAA;EACjE,OAAO,EAAE,6CAA6C;GACpD;GACA,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;CACH;CACA,iBAAiB,EAAE,uBAAuB,QAAQ;EAChD,IAAI,CAAC,uBAAuB,OAAO,KAAA;EASnC,OAAO,EACL,4CACA,yCACA,EACE,gBAAgB;IAXjB,sBAAsB,OAAO,EAAE,kCAAkC,MAAM;IACvE,sBAAsB,YAAY,EACjC,uCACA,WACF;IACC,sBAAsB,OAAO,EAAE,kCAAkC,MAAM;EAMtD,EAAoB,uBACtC,CACF;CACF;CACA,cAAc,EACZ,SACA,QACA,sBACA,eACA,GACA,mBACI;EACJ,MAAM,UAAU,4BACd,SACA,GACA,cACA,sBAGA,aACF;EAEA,IAAI,CAAC,eAAe,OAAO;EAI3B,MAAM,SAHQ,CAAC,CAAC,OAAO,UAAU,cAAc,MAAM,OAAO,OAAO,SAG5C,EAAE,oBAAoB,KAAK,IAAI,cAAc,MAAM;EAC1E,OAAO,SACH,EACE,qEACA,wDACA;GACE,gBAAgB;GAChB;EACF,CACF,IACA,EACE,4DACA,sCACA,EAAE,gBAAgB,QAAQ,CAC5B;CACN;CACA,cAAc,EAAE,eAAe,QAAQ;EACrC,MAAM,OAAO,eAAe,aAAa,MACtC,eAAe,WAAW,aAC7B;EACA,IAAI,CAAC,MAAM,OAAO,KAAA;EAClB,OAAO,KAAK,QACR,EACE,6CACA,6CACA,EAAE,WAAW,KAAK,MAAM,CAC1B,IACA,EAAE,wCAAwC,eAAe;CAC/D;CACA,OAAO,EAAE,mBAAmB,gBAAgB,KAAA;CAC5C,OAAO,EAAE,eAAe,GAAG,sBAAsB;EAC/C,MAAM,YAAY,eAAe;EACjC,IAAI,aAAa,MAAM,OAAO,KAAA;EAC9B,MAAM,OAAO,cAAc;GACzB,kBAAkB,uBAAuB,SAAS,CAAC,EAAE,YAAY;GACjE;GACA;GACA,yBAAyB;EAC3B,CAAC;EAGD,OAAO,OACH,EAAE,iCAAiC,6BAA6B,EAC9D,MAAM,OAAO,IAAI,EACnB,CAAC,IACD,KAAA;CACN;CACA,aAAa;AACf;;AAGA,IAAa,wCAAwC;CACnD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,IAAa,yCACX,MACA,SAAqC,CAAC,MAEtC,uBAIE;CACE,GAAG;CACH,eACE,KAAK,iBACL,KAAK,QAAQ,iBAAiB,eAAe,eAAe,CAAC,CAAC,eAC9D,KAAA;AACJ,GACA,kCACA,uCACA,MACF"}