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

package/dist/es/components/Channel/Channel.mjs

@@ -0,0 +1,66 @@
+import { ChannelInstanceProvider } from "../../context/ChannelInstanceContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { WithAudioPlayback } from "../AudioPlayback/WithAudioPlayback.mjs";
+import { CHANNEL_CONTAINER_ID } from "./constants.mjs";
+import { useChannelContainerClasses, useImageFlagEmojisOnWindowsClass } from "./hooks/useChannelContainerClasses.mjs";
+import { useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Channel/Channel.tsx
+/**
+* The channel's content column (`.str-chat__channel`) with no channel bound, for filling the same
+* layout slot while none is selected.
+*/
+var ChannelPlaceholder = ({ children, className: additionalClassName, ...props }) => {
+	const { customClasses, theme } = useChatContext();
+	const { channelClass, chatClass } = useChannelContainerClasses({ customClasses });
+	const className = clsx(chatClass, theme, channelClass, additionalClassName);
+	return /* @__PURE__ */ jsx("div", {
+		id: CHANNEL_CONTAINER_ID,
+		...props,
+		className,
+		children
+	});
+};
+var Channel = (props) => {
+	const { channel, children } = props;
+	const { client } = useChatContext();
+	const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
+	useEffect(() => {
+		channel.activate();
+		return () => {
+			channel.deactivate();
+		};
+	}, [channel]);
+	const channelInstanceContextValue = useMemo(() => ({ channel }), [channel]);
+	useEffect(() => {
+		if (!channel.messagePaginator.unreadStateSnapshot.getLatestValue().firstUnreadMessageId) channel.messagePaginator.seedUnreadSnapshot();
+		const subscriptions = [client.on("user.deleted", async () => {
+			const oldestID = channel.messagePaginator.items?.[0]?.id;
+			await channel.query({
+				messages: {
+					id_lt: oldestID,
+					limit: 25
+				},
+				watchers: { limit: 25 }
+			});
+		})];
+		return () => {
+			subscriptions.forEach((subscription) => subscription.unsubscribe());
+		};
+	}, [channel, client]);
+	return /* @__PURE__ */ jsx(ChannelPlaceholder, {
+		className: windowsEmojiClass,
+		children: /* @__PURE__ */ jsx(ChannelInstanceProvider, {
+			value: channelInstanceContextValue,
+			children: /* @__PURE__ */ jsx(WithAudioPlayback, {
+				playbackScope: channel,
+				children
+			})
+		})
+	});
+};
+//#endregion
+export { Channel, ChannelPlaceholder };
+
+//# sourceMappingURL=Channel.mjs.map

package/dist/es/components/Channel/Channel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Channel.mjs","names":[],"sources":["../../../../src/components/Channel/Channel.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport React, { useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport type { Channel as StreamChannel } from 'stream-chat';\n\nimport { ChannelInstanceProvider, useChatContext } from '../../context';\n\nimport { CHANNEL_CONTAINER_ID } from './constants';\nimport { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';\n\nimport {\n  useChannelContainerClasses,\n  useImageFlagEmojisOnWindowsClass,\n} from './hooks/useChannelContainerClasses';\nimport { WithAudioPlayback } from '../AudioPlayback';\n\nexport type ChannelProps = {\n  /**\n   * The channel to bind this subtree to. Required -- render `<ChannelPlaceholder />` (or nothing)\n   * while none is selected. Initialize it before passing it in; `Channel` does not query.\n   */\n  channel: StreamChannel;\n};\n\n/**\n * The channel's content column (`.str-chat__channel`) with no channel bound, for filling the same\n * layout slot while none is selected.\n */\nexport const ChannelPlaceholder = ({\n  children,\n  className: additionalClassName,\n  ...props\n}: PropsWithChildren<ComponentProps<'div'>>) => {\n  const { customClasses, theme } = useChatContext();\n  const { channelClass, chatClass } = useChannelContainerClasses({\n    customClasses,\n  });\n  const className = clsx(chatClass, theme, channelClass, additionalClassName);\n  return (\n    <div id={CHANNEL_CONTAINER_ID} {...props} className={className}>\n      {children}\n    </div>\n  );\n};\n\n// One component: `channel` is required and nothing is keyed, so there is no early return needing a\n// wrapper to sit in front of the hooks.\nexport const Channel = (props: PropsWithChildren<ChannelProps>) => {\n  const { channel, children } = props;\n\n  const { client } = useChatContext();\n  const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();\n\n  // Claim the channel while mounted (refcounted, so several consumers are fine). The client skips\n  // re-seeding an active channel's message list on hydration, leaving the larger loaded window to\n  // `channel.reload()`.\n  useEffect(() => {\n    channel.activate();\n    return () => {\n      channel.deactivate();\n    };\n  }, [channel]);\n\n  // Keyed on the instance, not the cid: children subscribe to *this* channel's stores.\n  const channelInstanceContextValue = useMemo(() => ({ channel }), [channel]);\n\n  useEffect(() => {\n    // Re-seed the unread boundary the separator and \"N new\" banner render from: a cached channel\n    // is not re-queried on reopen, so the LLC's auto-seed never runs and the boundary would be\n    // stale. Skipped when the channel is deliberately flagged unread, since seeding clears that\n    // flag. Marking read is `useMarkRead`'s job, not this one's.\n    if (\n      !channel.messagePaginator.unreadStateSnapshot.getLatestValue().firstUnreadMessageId\n    ) {\n      channel.messagePaginator.seedUnreadSnapshot();\n    }\n\n    // One subscription per event, each released by its own handle, so subscribing and\n    // unsubscribing cannot drift apart and nothing has to filter events it never asked for.\n    const subscriptions = [\n      // Channel state is not normalized, so rather than hunting this user's references through it\n      // we re-query. Note what that does and does not do: it refreshes members, read state and\n      // watchers, but not the loaded messages -- the page it asks for is older than the window.\n      // todo: remove with REACT-1175 (single source of truth for user references)\n      client.on('user.deleted', async () => {\n        const oldestID = channel.messagePaginator.items?.[0]?.id;\n\n        await channel.query({\n          messages: { id_lt: oldestID, limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },\n          watchers: { limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },\n        });\n      }),\n    ];\n\n    return () => {\n      subscriptions.forEach((subscription) => subscription.unsubscribe());\n    };\n  }, [channel, client]);\n\n  return (\n    <ChannelPlaceholder className={windowsEmojiClass}>\n      <ChannelInstanceProvider value={channelInstanceContextValue}>\n        <WithAudioPlayback playbackScope={channel}>{children}</WithAudioPlayback>\n      </ChannelInstanceProvider>\n    </ChannelPlaceholder>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,IAAa,sBAAsB,EACjC,UACA,WAAW,qBACX,GAAG,YAC2C;CAC9C,MAAM,EAAE,eAAe,UAAU,eAAe;CAChD,MAAM,EAAE,cAAc,cAAc,2BAA2B,EAC7D,cACF,CAAC;CACD,MAAM,YAAY,KAAK,WAAW,OAAO,cAAc,mBAAmB;CAC1E,OACE,oBAAC,OAAD;EAAK,IAAI;EAAsB,GAAI;EAAkB;EAClD;CACE,CAAA;AAET;AAIA,IAAa,WAAW,UAA2C;CACjE,MAAM,EAAE,SAAS,aAAa;CAE9B,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,oBAAoB,iCAAiC;CAK3D,gBAAgB;EACd,QAAQ,SAAS;EACjB,aAAa;GACX,QAAQ,WAAW;EACrB;CACF,GAAG,CAAC,OAAO,CAAC;CAGZ,MAAM,8BAA8B,eAAe,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;CAE1E,gBAAgB;EAKd,IACE,CAAC,QAAQ,iBAAiB,oBAAoB,eAAe,CAAC,CAAC,sBAE/D,QAAQ,iBAAiB,mBAAmB;EAK9C,MAAM,gBAAgB,CAKpB,OAAO,GAAG,gBAAgB,YAAY;GACpC,MAAM,WAAW,QAAQ,iBAAiB,QAAQ,EAAE,EAAE;GAEtD,MAAM,QAAQ,MAAM;IAClB,UAAU;KAAE,OAAO;KAAU,OAAA;IAAsC;IACnE,UAAU,EAAE,OAAA,GAAsC;GACpD,CAAC;EACH,CAAC,CACH;EAEA,aAAa;GACX,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;EACpE;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OACE,oBAAC,oBAAD;EAAoB,WAAW;YAC7B,oBAAC,yBAAD;GAAyB,OAAO;aAC9B,oBAAC,mBAAD;IAAmB,eAAe;IAAU;GAA4B,CAAA;EACjD,CAAA;CACP,CAAA;AAExB"}

package/dist/es/components/Channel/constants.mjs

@@ -0,0 +1,6 @@
+//#region src/components/Channel/constants.ts
+var CHANNEL_CONTAINER_ID = "str-chat__channel";
+//#endregion
+export { CHANNEL_CONTAINER_ID };
+
+//# sourceMappingURL=constants.mjs.map

package/dist/es/components/Channel/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../src/components/Channel/constants.ts"],"sourcesContent":["export const CHANNEL_CONTAINER_ID = 'str-chat__channel';\n"],"mappings":";AAAA,IAAa,uBAAuB"}

package/dist/es/components/Channel/hooks/useChannelCapabilities.mjs

@@ -0,0 +1,21 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import { useMemo } from "react";
+//#region src/components/Channel/hooks/useChannelCapabilities.ts
+var ownCapabilitiesSelector = ({ ownCapabilities }) => ({ ownCapabilities });
+var useChannelCapabilities = ({ cid }) => {
+	const channel = useChannel();
+	const { ownCapabilities } = useStateStore(channel.state, ownCapabilitiesSelector) ?? {};
+	return useMemo(() => {
+		if (!cid || channel.cid !== cid) return /* @__PURE__ */ new Set();
+		return new Set(ownCapabilities ?? []);
+	}, [
+		channel.cid,
+		cid,
+		ownCapabilities
+	]);
+};
+//#endregion
+export { useChannelCapabilities };
+
+//# sourceMappingURL=useChannelCapabilities.mjs.map

package/dist/es/components/Channel/hooks/useChannelCapabilities.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelCapabilities.mjs","names":[],"sources":["../../../../../src/components/Channel/hooks/useChannelCapabilities.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { OwnCapabilitiesState } from 'stream-chat';\nimport { useChannel } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst ownCapabilitiesSelector = ({ ownCapabilities }: OwnCapabilitiesState) => ({\n  ownCapabilities,\n});\n\nexport const useChannelCapabilities = ({ cid }: { cid: string | undefined }) => {\n  const channel = useChannel();\n  const { ownCapabilities } = useStateStore(channel.state, ownCapabilitiesSelector) ?? {};\n\n  return useMemo(() => {\n    if (!cid || channel.cid !== cid) return new Set<string>();\n    return new Set(ownCapabilities ?? []);\n  }, [channel.cid, cid, ownCapabilities]);\n};\n"],"mappings":";;;;AAKA,IAAM,2BAA2B,EAAE,uBAA6C,EAC9E,gBACF;AAEA,IAAa,0BAA0B,EAAE,UAAuC;CAC9E,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,oBAAoB,cAAc,QAAQ,OAAO,uBAAuB,KAAK,CAAC;CAEtF,OAAO,cAAc;EACnB,IAAI,CAAC,OAAO,QAAQ,QAAQ,KAAK,uBAAO,IAAI,IAAY;EACxD,OAAO,IAAI,IAAI,mBAAmB,CAAC,CAAC;CACtC,GAAG;EAAC,QAAQ;EAAK;EAAK;CAAe,CAAC;AACxC"}

package/dist/es/components/Channel/hooks/useChannelContainerClasses.mjs

@@ -0,0 +1,20 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+//#region src/components/Channel/hooks/useChannelContainerClasses.ts
+var useImageFlagEmojisOnWindowsClass = () => {
+	const { useImageFlagEmojisOnWindows } = useChatContext();
+	return useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/) ? "str-chat--windows-flags" : "";
+};
+var getChatContainerClass = (customClass) => customClass ?? "str-chat__container";
+var useChannelContainerClasses = ({ customClasses }) => {
+	const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
+	return {
+		channelClass: customClasses?.channel ?? "str-chat__channel",
+		chatClass: customClasses?.chat ?? "str-chat",
+		chatContainerClass: getChatContainerClass(customClasses?.chatContainer),
+		windowsEmojiClass
+	};
+};
+//#endregion
+export { getChatContainerClass, useChannelContainerClasses, useImageFlagEmojisOnWindowsClass };
+
+//# sourceMappingURL=useChannelContainerClasses.mjs.map

package/dist/es/components/Channel/hooks/useChannelContainerClasses.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelContainerClasses.mjs","names":[],"sources":["../../../../../src/components/Channel/hooks/useChannelContainerClasses.ts"],"sourcesContent":["import { useChatContext } from '../../../context/ChatContext';\nimport type { ChatContextValue } from '../../../context/ChatContext';\n\nexport const useImageFlagEmojisOnWindowsClass = () => {\n  const { useImageFlagEmojisOnWindows } = useChatContext();\n  return useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)\n    ? 'str-chat--windows-flags'\n    : '';\n};\n\nexport const getChatContainerClass = (customClass?: string) =>\n  customClass ?? 'str-chat__container';\n\nexport const useChannelContainerClasses = ({\n  customClasses,\n}: Pick<ChatContextValue, 'customClasses'>) => {\n  const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();\n  return {\n    channelClass: customClasses?.channel ?? 'str-chat__channel',\n    chatClass: customClasses?.chat ?? 'str-chat',\n    chatContainerClass: getChatContainerClass(customClasses?.chatContainer),\n    windowsEmojiClass,\n  };\n};\n"],"mappings":";;AAGA,IAAa,yCAAyC;CACpD,MAAM,EAAE,gCAAgC,eAAe;CACvD,OAAO,+BAA+B,UAAU,UAAU,MAAM,KAAK,IACjE,4BACA;AACN;AAEA,IAAa,yBAAyB,gBACpC,eAAe;AAEjB,IAAa,8BAA8B,EACzC,oBAC6C;CAC7C,MAAM,oBAAoB,iCAAiC;CAC3D,OAAO;EACL,cAAc,eAAe,WAAW;EACxC,WAAW,eAAe,QAAQ;EAClC,oBAAoB,sBAAsB,eAAe,aAAa;EACtE;CACF;AACF"}

package/dist/es/components/ChannelHeader/ChannelHeader.mjs

@@ -0,0 +1,71 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { ChannelAvatar } from "../Avatar/ChannelAvatar.mjs";
+import { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton } from "../Button/WorkspaceNavigationButtons.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { TypingIndicatorHeader } from "../TypingIndicator/TypingIndicatorHeader.mjs";
+import { useChannelPreviewInfo } from "../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useChannelHeaderOnlineStatus } from "./hooks/useChannelHeaderOnlineStatus.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChannelHeader/ChannelHeader.tsx
+var typingEventsStateSelector = ({ typingEvents }) => ({ typingEventsEnabled: typingEvents.enabled });
+var textComposerTypingSelector = ({ typing }) => ({ typing });
+var ChannelHeaderSubtitle = () => {
+	const { typingEventsEnabled } = useStateStore(useChannel().configState, typingEventsStateSelector);
+	const { client } = useChatContext();
+	const { typing = {} } = useStateStore(useMessageComposerController().textComposer?.state, textComposerTypingSelector) ?? {};
+	const onlineStatusText = useChannelHeaderOnlineStatus();
+	const typingInChannel = Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id);
+	const hasTyping = typingEventsEnabled !== false && typingInChannel.length > 0;
+	if (!hasTyping && !onlineStatusText) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__channel-header__data__subtitle",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "str-chat__subtitle-content-transition",
+			children: hasTyping ? /* @__PURE__ */ jsx(TypingIndicatorHeader, {}) : onlineStatusText
+		}, hasTyping ? "typing" : "default")
+	});
+};
+/**
+* The ChannelHeader component renders some basic information about a Channel.
+*/
+var ChannelHeader = (props) => {
+	const { Avatar = ChannelAvatar, EndContent = WorkspaceNavigationCloseButton, image: overrideImage, StartContent = WorkspaceNavigationBackButton, title: overrideTitle } = props;
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
+		channel: useChannel(),
+		overrideImage,
+		overrideTitle
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-header",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__channel-header__start",
+				children: /* @__PURE__ */ jsx(StartContent, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-header__data",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__channel-header__data__title",
+					children: displayTitle
+				}), /* @__PURE__ */ jsx(ChannelHeaderSubtitle, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-header__end",
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					className: "str-chat__avatar--channel-header",
+					displayMembers: groupChannelDisplayInfo?.members,
+					imageUrl: displayImage,
+					size: "lg",
+					userName: displayTitle
+				}), /* @__PURE__ */ jsx(EndContent, {})]
+			})
+		]
+	});
+};
+//#endregion
+export { ChannelHeader };
+
+//# sourceMappingURL=ChannelHeader.mjs.map

package/dist/es/components/ChannelHeader/ChannelHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelHeader.mjs","names":[],"sources":["../../../../src/components/ChannelHeader/ChannelHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type ChannelAvatarProps, ChannelAvatar as DefaultAvatar } from '../Avatar';\nimport { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';\nimport { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';\nimport { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';\nimport { useChannel, useChatContext } from '../../context';\nimport { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton } from '../Button';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../store';\n\nimport type { ChannelConfig, EventPayload, TextComposerState } from 'stream-chat';\n\nconst typingEventsStateSelector = ({ typingEvents }: ChannelConfig) => ({\n  typingEventsEnabled: typingEvents.enabled,\n});\n\nconst textComposerTypingSelector = ({ typing }: TextComposerState) => ({ typing });\n\nconst ChannelHeaderSubtitle = () => {\n  const channel = useChannel();\n  const { typingEventsEnabled } = useStateStore(\n    channel.configState,\n    typingEventsStateSelector,\n  );\n  const { client } = useChatContext();\n  const messageComposer = useMessageComposerController();\n  const { typing = {} } =\n    useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};\n  const onlineStatusText = useChannelHeaderOnlineStatus();\n  const typingInChannel = (\n    Object.values(typing) as EventPayload<'typing.start' | 'typing.stop'>[]\n  ).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id);\n  const hasTyping = typingEventsEnabled !== false && typingInChannel.length > 0;\n\n  if (!hasTyping && !onlineStatusText) return null;\n\n  return (\n    <div className='str-chat__channel-header__data__subtitle'>\n      <span\n        className='str-chat__subtitle-content-transition'\n        key={hasTyping ? 'typing' : 'default'}\n      >\n        {hasTyping ? <TypingIndicatorHeader /> : onlineStatusText}\n      </span>\n    </div>\n  );\n};\n\nexport type ChannelHeaderProps = {\n  /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */\n  Avatar?: React.ComponentType<ChannelAvatarProps>;\n  /**\n   * Rendered at the end of the header, after the avatar. Defaults to\n   * `WorkspaceNavigationCloseButton`, the close button of a panel that can be dismissed; a component\n   * passed here replaces it, and can render the button itself to keep it.\n   */\n  EndContent?: React.ComponentType;\n  /**\n   * Rendered at the start of the header. Defaults to `WorkspaceNavigationBackButton`, the back\n   * button of a panel stacked over other content; a component passed here replaces it, and can\n   * render the button itself to keep it.\n   */\n  StartContent?: React.ComponentType;\n  /** Manually set the image to render, defaults to the Channel image */\n  image?: string;\n  /** Set title manually */\n  title?: string;\n};\n\n/**\n * The ChannelHeader component renders some basic information about a Channel.\n */\nexport const ChannelHeader = (props: ChannelHeaderProps) => {\n  const {\n    Avatar = DefaultAvatar,\n    EndContent = WorkspaceNavigationCloseButton,\n    image: overrideImage,\n    StartContent = WorkspaceNavigationBackButton,\n    title: overrideTitle,\n  } = props;\n\n  const channel = useChannel();\n  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({\n    channel,\n    overrideImage,\n    overrideTitle,\n  });\n\n  return (\n    <div className='str-chat__channel-header'>\n      <div className='str-chat__channel-header__start'>\n        <StartContent />\n      </div>\n      <div className='str-chat__channel-header__data'>\n        <div className='str-chat__channel-header__data__title'>{displayTitle}</div>\n        <ChannelHeaderSubtitle />\n      </div>\n      <div className='str-chat__channel-header__end'>\n        <Avatar\n          className='str-chat__avatar--channel-header'\n          displayMembers={groupChannelDisplayInfo?.members}\n          imageUrl={displayImage}\n          size='lg'\n          userName={displayTitle}\n        />\n        <EndContent />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,6BAA6B,EAAE,oBAAmC,EACtE,qBAAqB,aAAa,QACpC;AAEA,IAAM,8BAA8B,EAAE,cAAiC,EAAE,OAAO;AAEhF,IAAM,8BAA8B;CAElC,MAAM,EAAE,wBAAwB,cADhB,WAEd,CAAA,CAAQ,aACR,yBACF;CACA,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,EAAE,SAAS,CAAC,MAChB,cAFsB,6BAER,CAAA,CAAgB,cAAc,OAAO,0BAA0B,KAAK,CAAC;CACrF,MAAM,mBAAmB,6BAA6B;CACtD,MAAM,kBACJ,OAAO,OAAO,MAAM,CAAC,CACrB,QAAQ,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAAS;CAC5E,MAAM,YAAY,wBAAwB,SAAS,gBAAgB,SAAS;CAE5E,IAAI,CAAC,aAAa,CAAC,kBAAkB,OAAO;CAE5C,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD;GACE,WAAU;aAGT,YAAY,oBAAC,uBAAD,CAAwB,CAAA,IAAI;EACrC,GAHC,YAAY,WAAW,SAGxB;CACH,CAAA;AAET;;;;AA0BA,IAAa,iBAAiB,UAA8B;CAC1D,MAAM,EACJ,SAAS,eACT,aAAa,gCACb,OAAO,eACP,eAAe,+BACf,OAAO,kBACL;CAGJ,MAAM,EAAE,cAAc,cAAc,4BAA4B,sBAAsB;EACpF,SAFc,WAEd;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,cAAD,CAAe,CAAA;GACZ,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAAyC;IAAkB,CAAA,GAC1E,oBAAC,uBAAD,CAAwB,CAAA,CACrB;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAU;KACV,gBAAgB,yBAAyB;KACzC,UAAU;KACV,MAAK;KACL,UAAU;IACX,CAAA,GACD,oBAAC,YAAD,CAAa,CAAA,CACV;;EACF;;AAET"}

package/dist/es/components/ChannelHeader/hooks/useChannelHasMembersOnline.mjs

@@ -0,0 +1,26 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+//#region src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts
+var watchersSelector = (nextValue) => ({ watchers: nextValue.watchers });
+/**
+* Reactively reports whether OTHER members are currently online (watching the channel).
+*
+* Subscribes to the channel's watcher state instead of manually tracking
+* `user.watching.start/stop` events. Watchers include the current user, but "are other
+* members online" must reflect only other users — otherwise (e.g. in a DM) the other
+* participant looks online as soon as the local user starts watching.
+*/
+var useChannelHasMembersOnline = ({ channel: channelOverride, enabled = true } = {}) => {
+	const contextChannel = useChannel();
+	const channel = channelOverride ?? contextChannel;
+	const { client } = useChatContext();
+	const { watchers } = useStateStore(channel.state, watchersSelector);
+	if (!enabled) return false;
+	const ownUserId = client.user?.id;
+	return Object.keys(watchers).some((id) => id !== ownUserId);
+};
+//#endregion
+export { useChannelHasMembersOnline };
+
+//# sourceMappingURL=useChannelHasMembersOnline.mjs.map

package/dist/es/components/ChannelHeader/hooks/useChannelHasMembersOnline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelHasMembersOnline.mjs","names":[],"sources":["../../../../../src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts"],"sourcesContent":["import type { Channel, ChannelWatchState } from 'stream-chat';\n\nimport { useChannel } from '../../../context';\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useStateStore } from '../../../store';\n\nexport type UseChannelHasMembersOnlineParams = {\n  channel?: Channel;\n  enabled?: boolean;\n};\n\nconst watchersSelector = (nextValue: ChannelWatchState) => ({\n  watchers: nextValue.watchers,\n});\n\n/**\n * Reactively reports whether OTHER members are currently online (watching the channel).\n *\n * Subscribes to the channel's watcher state instead of manually tracking\n * `user.watching.start/stop` events. Watchers include the current user, but \"are other\n * members online\" must reflect only other users — otherwise (e.g. in a DM) the other\n * participant looks online as soon as the local user starts watching.\n */\nexport const useChannelHasMembersOnline = ({\n  channel: channelOverride,\n  enabled = true,\n}: UseChannelHasMembersOnlineParams = {}) => {\n  const contextChannel = useChannel();\n  const channel = channelOverride ?? contextChannel;\n  const { client } = useChatContext();\n  const { watchers } = useStateStore(channel.state, watchersSelector);\n\n  if (!enabled) return false;\n\n  const ownUserId = client.user?.id;\n  return Object.keys(watchers).some((id) => id !== ownUserId);\n};\n"],"mappings":";;;;AAWA,IAAM,oBAAoB,eAAkC,EAC1D,UAAU,UAAU,SACtB;;;;;;;;;AAUA,IAAa,8BAA8B,EACzC,SAAS,iBACT,UAAU,SAC0B,CAAC,MAAM;CAC3C,MAAM,iBAAiB,WAAW;CAClC,MAAM,UAAU,mBAAmB;CACnC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,aAAa,cAAc,QAAQ,OAAO,gBAAgB;CAElE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,YAAY,OAAO,MAAM;CAC/B,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,MAAM,OAAO,OAAO,SAAS;AAC5D"}

package/dist/es/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.mjs

@@ -0,0 +1,31 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useIsDmChannel } from "../../../hooks/useIsDmChannel.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import { useChannelHasMembersOnline } from "./useChannelHasMembersOnline.mjs";
+//#region src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts
+var memberCountSelector = (nextValue) => ({ memberCount: nextValue.memberCount });
+var watcherCountSelector = (nextValue) => ({ watcherCount: nextValue.watcherCount });
+/**
+* Returns the channel header online status text (e.g. "Online", "Offline", or
+* "X members · Y online"). Returns null when the channel has no members (nothing to show).
+*
+* Reactive counts come from the channel's unified reactive state; DM detection and
+* "others online" are delegated to `useIsDmChannel` / `useChannelHasMembersOnline`, which
+* subscribe to the state they each need.
+*/
+function useChannelHeaderOnlineStatus() {
+	const { t } = useTranslationContext();
+	const channel = useChannel();
+	const { memberCount } = useStateStore(channel.state, memberCountSelector);
+	const { watcherCount } = useStateStore(channel.state, watcherCountSelector);
+	const isDirectMessagingChannel = useIsDmChannel();
+	const hasMembersOnline = useChannelHasMembersOnline({ enabled: isDirectMessagingChannel });
+	if (!memberCount) return null;
+	if (isDirectMessagingChannel) return hasMembersOnline ? t("common.online.label", "Online") : t("common.offline.label", "Offline");
+	return `${t("channelHeader.online.members.label", "{{ memberCount }} members", { memberCount })} · ${t("channelHeader.online.online.label", "{{ watcherCount }} online", { watcherCount })}`;
+}
+//#endregion
+export { useChannelHeaderOnlineStatus };
+
+//# sourceMappingURL=useChannelHeaderOnlineStatus.mjs.map

package/dist/es/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelHeaderOnlineStatus.mjs","names":[],"sources":["../../../../../src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts"],"sourcesContent":["import type { ChannelWatchState, MembersState } from 'stream-chat';\n\nimport { useChannel, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { useIsDmChannel } from '../../../hooks';\nimport { useChannelHasMembersOnline } from './useChannelHasMembersOnline';\n\nconst memberCountSelector = (nextValue: MembersState) => ({\n  memberCount: nextValue.memberCount,\n});\n\nconst watcherCountSelector = (nextValue: ChannelWatchState) => ({\n  watcherCount: nextValue.watcherCount,\n});\n\n/**\n * Returns the channel header online status text (e.g. \"Online\", \"Offline\", or\n * \"X members · Y online\"). Returns null when the channel has no members (nothing to show).\n *\n * Reactive counts come from the channel's unified reactive state; DM detection and\n * \"others online\" are delegated to `useIsDmChannel` / `useChannelHasMembersOnline`, which\n * subscribe to the state they each need.\n */\nexport function useChannelHeaderOnlineStatus(): string | null {\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { memberCount } = useStateStore(channel.state, memberCountSelector);\n  const { watcherCount } = useStateStore(channel.state, watcherCountSelector);\n  const isDirectMessagingChannel = useIsDmChannel();\n  const hasMembersOnline = useChannelHasMembersOnline({\n    enabled: isDirectMessagingChannel,\n  });\n\n  if (!memberCount) return null;\n\n  if (isDirectMessagingChannel) {\n    return hasMembersOnline\n      ? t('common.online.label', 'Online')\n      : t('common.offline.label', 'Offline');\n  }\n\n  return `${t('channelHeader.online.members.label', '{{ memberCount }} members', { memberCount })} · ${t('channelHeader.online.online.label', '{{ watcherCount }} online', { watcherCount })}`;\n}\n"],"mappings":";;;;;;AAOA,IAAM,uBAAuB,eAA6B,EACxD,aAAa,UAAU,YACzB;AAEA,IAAM,wBAAwB,eAAkC,EAC9D,cAAc,UAAU,aAC1B;;;;;;;;;AAUA,SAAgB,+BAA8C;CAC5D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,gBAAgB,cAAc,QAAQ,OAAO,mBAAmB;CACxE,MAAM,EAAE,iBAAiB,cAAc,QAAQ,OAAO,oBAAoB;CAC1E,MAAM,2BAA2B,eAAe;CAChD,MAAM,mBAAmB,2BAA2B,EAClD,SAAS,yBACX,CAAC;CAED,IAAI,CAAC,aAAa,OAAO;CAEzB,IAAI,0BACF,OAAO,mBACH,EAAE,uBAAuB,QAAQ,IACjC,EAAE,wBAAwB,SAAS;CAGzC,OAAO,GAAG,EAAE,sCAAsC,6BAA6B,EAAE,YAAY,CAAC,EAAE,KAAK,EAAE,qCAAqC,6BAA6B,EAAE,aAAa,CAAC;AAC3L"}

package/dist/es/components/ChannelList/ChannelList.mjs

@@ -0,0 +1,72 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
+import { InfiniteScrollWithComponents } from "../InfiniteScrollPaginator/InfiniteScrollWithComponents.mjs";
+import { LoadingChannels } from "../Loading/LoadingChannels.mjs";
+import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
+import { useChannelListKeyboardNavigation } from "./hooks/useChannelListKeyboardNavigation.mjs";
+import { ChannelListItem } from "../ChannelListItem/ChannelListItem.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelList.tsx
+var channelPaginatorStateSelector = (state) => ({
+	isUnloaded: state.items === void 0,
+	lastQueryError: state.lastQueryError
+});
+/**
+* Channel list driven by a single `ChannelPaginator`. The paginator is created +
+* coordinated by the `ChannelManager` on `ChatContext`; this component
+* only renders its reactive `state` and drives pagination. Selection is not this
+* component's concern — the `ChannelListItem` default `ListItem` opens the channel via
+* ChatView navigation.
+*/
+var ChannelList = ({ loadMoreDebounceMs, loadMoreThresholdPx, paginator }) => {
+	const { channelManager, client } = useChatContext();
+	const { t } = useTranslationContext();
+	const { isUnloaded, lastQueryError } = useStateStore(paginator.state, channelPaginatorStateSelector);
+	const { EmptyListIndicator = DefaultEmptyChannelList, EndReachedIndicator = DefaultEndReachedIndicator, FirstPageLoadingIndicator = LoadingChannels, ListItem = DefaultListItem, LoadingNextPageIndicator = DefaultLoadingNextPageIndicator } = useComponentContext();
+	const listboxRef = useRef(null);
+	const { onClickCapture, onKeyDown } = useChannelListKeyboardNavigation(listboxRef);
+	useEffect(() => channelManager.registerSubscriptions(), [channelManager]);
+	useEffect(() => {
+		if (!isUnloaded) return;
+		paginator.toTailDebounced();
+	}, [isUnloaded, paginator]);
+	useEffect(() => {
+		if (!lastQueryError) return;
+		client.notifications.addError({
+			message: lastQueryError.message,
+			origin: {
+				context: { reason: "channel query error" },
+				emitter: "ChannelList"
+			}
+		});
+	}, [client, lastQueryError]);
+	return /* @__PURE__ */ jsx(InfiniteScrollWithComponents, {
+		"aria-label": t("channelList.channelList.ariaLabel", "Channel list"),
+		contentProps: { role: "presentation" },
+		EmptyListIndicator,
+		EndReachedIndicator,
+		FirstPageLoadingIndicator,
+		ListItem,
+		LoadingNextPageIndicator,
+		loadNextDebounceMs: loadMoreDebounceMs,
+		loadNextOnScrollToBottom: paginator.next,
+		onClickCapture,
+		onKeyDown,
+		paginator,
+		ref: listboxRef,
+		role: "listbox",
+		threshold: loadMoreThresholdPx
+	});
+};
+var DefaultEmptyChannelList = () => /* @__PURE__ */ jsx(EmptyStateIndicator, { listType: "channel" });
+var DefaultEndReachedIndicator = () => null;
+var DefaultListItem = ({ item }) => /* @__PURE__ */ jsx(ChannelListItem, { channel: item });
+var DefaultLoadingNextPageIndicator = ({ isLoading }) => isLoading ? /* @__PURE__ */ jsx(LoadingIndicator, {}) : null;
+//#endregion
+export { ChannelList };
+
+//# sourceMappingURL=ChannelList.mjs.map

package/dist/es/components/ChannelList/ChannelList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelList.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelList.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport type { Channel, ChannelPaginator, ChannelPaginatorState } from 'stream-chat';\n\nimport { ChannelListItem } from '../ChannelListItem';\nimport { EmptyStateIndicator } from '../EmptyStateIndicator';\nimport { InfiniteScrollWithComponents } from '../InfiniteScrollPaginator/InfiniteScrollWithComponents';\nimport { LoadingChannels, LoadingIndicator } from '../Loading';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useChannelListKeyboardNavigation } from './hooks/useChannelListKeyboardNavigation';\nimport { useStateStore } from '../../store';\n\nexport type ChannelListProps = {\n  /** The `ChannelPaginator` that supplies this list's channels (its data source). */\n  paginator: ChannelPaginator;\n  loadMoreDebounceMs?: number;\n  loadMoreThresholdPx?: number;\n};\n\nconst channelPaginatorStateSelector = (state: ChannelPaginatorState) => ({\n  // `items === undefined` means \"never queried\" — the state a paginator starts in and returns to\n  // when its data is discarded (e.g. `client.disconnectUser` resets every registered list). An\n  // empty array is a loaded empty page and must not trigger a query.\n  isUnloaded: state.items === undefined,\n  lastQueryError: state.lastQueryError,\n});\n\n/**\n * Channel list driven by a single `ChannelPaginator`. The paginator is created +\n * coordinated by the `ChannelManager` on `ChatContext`; this component\n * only renders its reactive `state` and drives pagination. Selection is not this\n * component's concern — the `ChannelListItem` default `ListItem` opens the channel via\n * ChatView navigation.\n */\nexport const ChannelList = ({\n  loadMoreDebounceMs,\n  loadMoreThresholdPx,\n  paginator,\n}: ChannelListProps) => {\n  const { channelManager, client } = useChatContext();\n  const { t } = useTranslationContext();\n  const { isUnloaded, lastQueryError } = useStateStore(\n    paginator.state,\n    channelPaginatorStateSelector,\n  );\n  const {\n    EmptyListIndicator = DefaultEmptyChannelList,\n    EndReachedIndicator = DefaultEndReachedIndicator,\n    FirstPageLoadingIndicator = LoadingChannels,\n    ListItem = DefaultListItem,\n    LoadingNextPageIndicator = DefaultLoadingNextPageIndicator,\n  } = useComponentContext();\n\n  // Keyboard roving + row-action navigation for this list. The scroll container (the\n  // `InfiniteScrollPaginator` root, reached via `listboxRef`) IS the `role=\"listbox\"` that owns this\n  // list's `role=\"option\"` rows — so no extra wrapper element is needed. The hook reads/focuses the\n  // option rows under `listboxRef`.\n  // NOTE: the hook's \"focus the first item of the next page after Load more\" branch is a no-op here —\n  // the list paginates on scroll-to-bottom (no rendered `load-more-button` for its `LOAD_MORE_SELECTOR`\n  // to match). Accepted; keyboard roving is unaffected.\n  const listboxRef = useRef<HTMLDivElement>(null);\n  const { onClickCapture, onKeyDown } = useChannelListKeyboardNavigation(listboxRef);\n\n  // Ref-counted: safe whether called here, from <ChannelLists/>, or from <Chat>.\n  useEffect(() => channelManager.registerSubscriptions(), [channelManager]);\n\n  // Loads the first page, and reloads it whenever the list is emptied back to \"never queried\" —\n  // the paginator outlives this component (it is registered on `client.channelManager`), so\n  // querying only on mount would leave a list reset after a disconnect/reconnect permanently empty.\n  useEffect(() => {\n    if (!isUnloaded) return;\n    paginator.toTailDebounced();\n  }, [isUnloaded, paginator]);\n\n  useEffect(() => {\n    if (!lastQueryError) return;\n    client.notifications.addError({\n      message: lastQueryError.message,\n      origin: { context: { reason: 'channel query error' }, emitter: 'ChannelList' },\n    });\n  }, [client, lastQueryError]);\n\n  return (\n    <InfiniteScrollWithComponents<Channel>\n      aria-label={t('channelList.channelList.ariaLabel', 'Channel list')}\n      contentProps={{ role: 'presentation' }}\n      EmptyListIndicator={EmptyListIndicator}\n      EndReachedIndicator={EndReachedIndicator}\n      FirstPageLoadingIndicator={FirstPageLoadingIndicator}\n      ListItem={ListItem as ComponentType<{ item: Channel }>}\n      LoadingNextPageIndicator={LoadingNextPageIndicator}\n      loadNextDebounceMs={loadMoreDebounceMs}\n      loadNextOnScrollToBottom={paginator.next}\n      onClickCapture={onClickCapture}\n      onKeyDown={onKeyDown}\n      paginator={paginator}\n      ref={listboxRef}\n      role='listbox'\n      threshold={loadMoreThresholdPx}\n    />\n  );\n};\n\nconst DefaultEmptyChannelList = () => <EmptyStateIndicator listType='channel' />;\n\nconst DefaultEndReachedIndicator = () => null;\n\nconst DefaultListItem = ({ item }: { item: unknown }) => (\n  <ChannelListItem channel={item as Channel} />\n);\n\nconst DefaultLoadingNextPageIndicator = ({ isLoading }: { isLoading?: boolean }) =>\n  isLoading ? <LoadingIndicator /> : null;\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAM,iCAAiC,WAAkC;CAIvE,YAAY,MAAM,UAAU,KAAA;CAC5B,gBAAgB,MAAM;AACxB;;;;;;;;AASA,IAAa,eAAe,EAC1B,oBACA,qBACA,gBACsB;CACtB,MAAM,EAAE,gBAAgB,WAAW,eAAe;CAClD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,mBAAmB,cACrC,UAAU,OACV,6BACF;CACA,MAAM,EACJ,qBAAqB,yBACrB,sBAAsB,4BACtB,4BAA4B,iBAC5B,WAAW,iBACX,2BAA2B,oCACzB,oBAAoB;CASxB,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,gBAAgB,cAAc,iCAAiC,UAAU;CAGjF,gBAAgB,eAAe,sBAAsB,GAAG,CAAC,cAAc,CAAC;CAKxE,gBAAgB;EACd,IAAI,CAAC,YAAY;EACjB,UAAU,gBAAgB;CAC5B,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,gBAAgB;EACd,IAAI,CAAC,gBAAgB;EACrB,OAAO,cAAc,SAAS;GAC5B,SAAS,eAAe;GACxB,QAAQ;IAAE,SAAS,EAAE,QAAQ,sBAAsB;IAAG,SAAS;GAAc;EAC/E,CAAC;CACH,GAAG,CAAC,QAAQ,cAAc,CAAC;CAE3B,OACE,oBAAC,8BAAD;EACE,cAAY,EAAE,qCAAqC,cAAc;EACjE,cAAc,EAAE,MAAM,eAAe;EACjB;EACC;EACM;EACjB;EACgB;EAC1B,oBAAoB;EACpB,0BAA0B,UAAU;EACpB;EACL;EACA;EACX,KAAK;EACL,MAAK;EACL,WAAW;CACZ,CAAA;AAEL;AAEA,IAAM,gCAAgC,oBAAC,qBAAD,EAAqB,UAAS,UAAW,CAAA;AAE/E,IAAM,mCAAmC;AAEzC,IAAM,mBAAmB,EAAE,WACzB,oBAAC,iBAAD,EAAiB,SAAS,KAAkB,CAAA;AAG9C,IAAM,mCAAmC,EAAE,gBACzC,YAAY,oBAAC,kBAAD,CAAmB,CAAA,IAAI"}

package/dist/es/components/ChannelList/ChannelListHeader.mjs

@@ -0,0 +1,22 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useWorkspaceNavigation } from "../../context/WorkspaceNavigationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelListHeader.tsx
+var ChannelListHeader = () => {
+	const { t } = useTranslationContext();
+	const { HeaderEndContent } = useComponentContext();
+	const hasActiveChannel = useWorkspaceNavigation().openChannels.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-list__header",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__channel-list__header__title",
+			children: t("channelList.header.chats.text", "Chats")
+		}), hasActiveChannel && HeaderEndContent && /* @__PURE__ */ jsx(HeaderEndContent, {})]
+	});
+};
+//#endregion
+export { ChannelListHeader };
+
+//# sourceMappingURL=ChannelListHeader.mjs.map

package/dist/es/components/ChannelList/ChannelListHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListHeader.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useComponentContext,\n  useTranslationContext,\n  useWorkspaceNavigation,\n} from '../../context';\n\nexport const ChannelListHeader = () => {\n  const { t } = useTranslationContext();\n  const { HeaderEndContent } = useComponentContext();\n  // A channel is \"active\" when one is open in the workspace (mirrors ThreadListHeader).\n  const hasActiveChannel = useWorkspaceNavigation().openChannels.length > 0;\n  return (\n    <div className='str-chat__channel-list__header'>\n      <div className='str-chat__channel-list__header__title'>\n        {t('channelList.header.chats.text', 'Chats')}\n      </div>\n      {hasActiveChannel && HeaderEndContent && <HeaderEndContent />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,0BAA0B;CACrC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,qBAAqB,oBAAoB;CAEjD,MAAM,mBAAmB,uBAAuB,CAAC,CAAC,aAAa,SAAS;CACxE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,iCAAiC,OAAO;EACxC,CAAA,GACJ,oBAAoB,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,CACzD;;AAET"}

package/dist/es/components/ChannelList/ChannelLists.mjs

@@ -0,0 +1,31 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { ChannelListContextProvider } from "../../context/ChannelListContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { ChannelList } from "./ChannelList.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelLists.tsx
+var paginatorsSelector = (state) => ({ paginators: state.paginators });
+/**
+* Renders one `<ChannelList/>` per paginator held by the `ChannelManager` on
+* `ChatContext` — i.e. its data source is the `ChannelManager` (the whole set of lists). Each child
+* `ChannelList` registers the (ref-counted) WS subscriptions. The primary (`paginators[0]`)
+* paginator is exposed through `ChannelListContext` so descendants (search results, member
+* actions, notification targeting) can read/mutate the loaded list without knowing about the
+* channel manager.
+*/
+var ChannelLists = () => {
+	const { channelManager } = useChatContext();
+	const { paginators } = useStateStore(channelManager.state, paginatorsSelector);
+	const lists = paginators.map((paginator) => /* @__PURE__ */ jsx(ChannelList, { paginator }, paginator.id));
+	const primaryPaginator = paginators[0];
+	if (!primaryPaginator) return /* @__PURE__ */ jsx(Fragment$1, { children: lists });
+	return /* @__PURE__ */ jsx(ChannelListContextProvider, {
+		value: { paginator: primaryPaginator },
+		children: lists
+	});
+};
+//#endregion
+export { ChannelLists };
+
+//# sourceMappingURL=ChannelLists.mjs.map

package/dist/es/components/ChannelList/ChannelLists.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelLists.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelLists.tsx"],"sourcesContent":["import React from 'react';\nimport type { ChannelManagerState } from 'stream-chat';\n\nimport { ChannelListContextProvider } from '../../context/ChannelListContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useStateStore } from '../../store';\nimport { ChannelList } from './ChannelList';\n\nconst paginatorsSelector = (state: ChannelManagerState) => ({\n  paginators: state.paginators,\n});\n\n/**\n * Renders one `<ChannelList/>` per paginator held by the `ChannelManager` on\n * `ChatContext` — i.e. its data source is the `ChannelManager` (the whole set of lists). Each child\n * `ChannelList` registers the (ref-counted) WS subscriptions. The primary (`paginators[0]`)\n * paginator is exposed through `ChannelListContext` so descendants (search results, member\n * actions, notification targeting) can read/mutate the loaded list without knowing about the\n * channel manager.\n */\nexport const ChannelLists = () => {\n  const { channelManager } = useChatContext();\n  const { paginators } = useStateStore(channelManager.state, paginatorsSelector);\n\n  const lists = paginators.map((paginator) => (\n    <ChannelList key={paginator.id} paginator={paginator} />\n  ));\n\n  const primaryPaginator = paginators[0];\n  if (!primaryPaginator) return <>{lists}</>;\n\n  return (\n    <ChannelListContextProvider value={{ paginator: primaryPaginator }}>\n      {lists}\n    </ChannelListContextProvider>\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAM,sBAAsB,WAAgC,EAC1D,YAAY,MAAM,WACpB;;;;;;;;;AAUA,IAAa,qBAAqB;CAChC,MAAM,EAAE,mBAAmB,eAAe;CAC1C,MAAM,EAAE,eAAe,cAAc,eAAe,OAAO,kBAAkB;CAE7E,MAAM,QAAQ,WAAW,KAAK,cAC5B,oBAAC,aAAD,EAA2C,UAAY,GAArC,UAAU,EAA2B,CACxD;CAED,MAAM,mBAAmB,WAAW;CACpC,IAAI,CAAC,kBAAkB,OAAO,oBAAA,YAAA,EAAA,UAAG,MAAQ,CAAA;CAEzC,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,iBAAiB;YAC9D;CACyB,CAAA;AAEhC"}

package/dist/es/components/ChannelList/ChannelNavigation.mjs

@@ -0,0 +1,36 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import { ChannelLists } from "./ChannelLists.mjs";
+import { ChannelListHeader } from "./ChannelListHeader.mjs";
+import { Search } from "../Search/Search.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelNavigation.tsx
+var searchControllerStateSelector = (state) => ({ isActive: state.isActive });
+/**
+* Channel navigation region: owns the search-results ↔ channel-list swap so the
+* list components stay pure. Renders the `ChannelListHeader`, then `Search` (bar
+* always; results while active), then the paginator-driven `ChannelLists` only while
+* search is inactive. Mapped to the channel-navigation slot; `Search` is customizable
+* via the `ComponentContext` `Search` slot.
+*/
+var ChannelNavigation = () => {
+	const { ChannelListHeader: ChannelListHeader$1 = ChannelListHeader, NotificationList: NotificationList$1 = NotificationList, Search: Search$1 = Search } = useComponentContext();
+	const { searchController } = useChatContext();
+	const { isActive } = useStateStore(searchController.state, searchControllerStateSelector);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-list",
+		children: [
+			/* @__PURE__ */ jsx(ChannelListHeader$1, {}),
+			/* @__PURE__ */ jsx(Search$1, {}),
+			!isActive && /* @__PURE__ */ jsx(ChannelLists, {}),
+			/* @__PURE__ */ jsx(NotificationList$1, { panel: "channel-list" })
+		]
+	});
+};
+//#endregion
+export { ChannelNavigation };
+
+//# sourceMappingURL=ChannelNavigation.mjs.map

package/dist/es/components/ChannelList/ChannelNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelNavigation.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport type { SearchControllerState } from 'stream-chat';\n\nimport { ChannelListHeader as DefaultChannelListHeader } from './ChannelListHeader';\nimport { ChannelLists } from './ChannelLists';\nimport { NotificationList as DefaultNotificationList } from '../Notifications';\nimport { Search as DefaultSearch } from '../Search';\nimport { useChatContext, useComponentContext } from '../../context';\nimport { useStateStore } from '../../store';\n\nconst searchControllerStateSelector = (state: SearchControllerState) => ({\n  isActive: state.isActive,\n});\n\n/**\n * Channel navigation region: owns the search-results ↔ channel-list swap so the\n * list components stay pure. Renders the `ChannelListHeader`, then `Search` (bar\n * always; results while active), then the paginator-driven `ChannelLists` only while\n * search is inactive. Mapped to the channel-navigation slot; `Search` is customizable\n * via the `ComponentContext` `Search` slot.\n */\nexport const ChannelNavigation = () => {\n  const {\n    ChannelListHeader = DefaultChannelListHeader,\n    NotificationList = DefaultNotificationList,\n    Search = DefaultSearch,\n  } = useComponentContext();\n  const { searchController } = useChatContext();\n  const { isActive } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n\n  return (\n    <div className='str-chat__channel-list'>\n      <ChannelListHeader />\n      <Search />\n      {!isActive && <ChannelLists />}\n      <NotificationList panel='channel-list' />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAM,iCAAiC,WAAkC,EACvE,UAAU,MAAM,SAClB;;;;;;;;AASA,IAAa,0BAA0B;CACrC,MAAM,EACJ,mBAAA,sBAAoB,mBACpB,kBAAA,qBAAmB,kBACnB,QAAA,WAAS,WACP,oBAAoB;CACxB,MAAM,EAAE,qBAAqB,eAAe;CAC5C,MAAM,EAAE,aAAa,cACnB,iBAAiB,OACjB,6BACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,qBAAD,CAAoB,CAAA;GACpB,oBAAC,UAAD,CAAS,CAAA;GACR,CAAC,YAAY,oBAAC,cAAD,CAAe,CAAA;GAC7B,oBAAC,oBAAD,EAAkB,OAAM,eAAgB,CAAA;EACrC;;AAET"}

package/dist/es/components/ChannelList/hooks/useChannelListKeyboardNavigation.mjs

@@ -0,0 +1,82 @@
+import { createRowActionKeyHandlers, useListboxKeyboardNavigation } from "../../../a11y/hooks/useListboxKeyboardNavigation.mjs";
+import { useEffect, useRef } from "react";
+//#region src/components/ChannelList/hooks/useChannelListKeyboardNavigation.ts
+var OPTION_SELECTOR = "[role=\"option\"]";
+var ROW_SELECTOR = ".str-chat__channel-list-item-container";
+var ACTION_BUTTON_SELECTOR = ".str-chat__channel-list-item__action-buttons button";
+var LOAD_MORE_SELECTOR = "[data-testid=\"load-more-button\"]";
+var NAVIGABLE_SELECTOR = `${OPTION_SELECTOR}, ${LOAD_MORE_SELECTOR}`;
+var LOAD_MORE_FOCUS_TIMEOUT_MS = 4e3;
+/**
+* Keyboard navigation for the channel list (`role="listbox"`). Returns handlers to spread onto the
+* listbox element:
+* - **ArrowUp/ArrowDown/Home/End** move focus between the channel rows (`role="option"`) and the
+*   **Load more** button (the last roving target when present).
+* - **ArrowRight** moves focus from a row to its actions button (the menu is then navigable with
+*   Up/Down via the ContextMenu's own roving focus).
+* - **ArrowLeft** moves focus from a row's actions back to the row.
+* - When **Load more** is activated, focus moves to the **first item of the newly loaded page** once
+*   it renders.
+*/
+var useChannelListKeyboardNavigation = (listboxRef) => {
+	const { onKeyDown } = useListboxKeyboardNavigation(listboxRef, {
+		enterScope: "container",
+		keyHandlers: createRowActionKeyHandlers({
+			actionSelector: ACTION_BUTTON_SELECTOR,
+			rowSelector: ROW_SELECTOR
+		}),
+		optionSelector: NAVIGABLE_SELECTOR,
+		resolveActiveOption: (active) => active.closest(ROW_SELECTOR)?.querySelector(OPTION_SELECTOR) ?? null
+	});
+	const getChannelOptions = () => Array.from(listboxRef.current?.querySelectorAll(OPTION_SELECTOR) ?? []);
+	const pendingFocusRef = useRef(null);
+	const pendingTimeoutRef = useRef(null);
+	const clearPendingFocus = () => {
+		pendingFocusRef.current = null;
+		if (pendingTimeoutRef.current) {
+			clearTimeout(pendingTimeoutRef.current);
+			pendingTimeoutRef.current = null;
+		}
+	};
+	const onClickCapture = (event) => {
+		const target = event.target;
+		if (!(target instanceof Element) || !target.closest(LOAD_MORE_SELECTOR)) return;
+		const options = getChannelOptions();
+		pendingFocusRef.current = {
+			boundary: options[options.length - 1] ?? null,
+			preLoad: new Set(options)
+		};
+		if (pendingTimeoutRef.current) clearTimeout(pendingTimeoutRef.current);
+		pendingTimeoutRef.current = setTimeout(clearPendingFocus, LOAD_MORE_FOCUS_TIMEOUT_MS);
+	};
+	useEffect(() => {
+		const pending = pendingFocusRef.current;
+		if (!pending) return;
+		const options = getChannelOptions();
+		if (!pending.boundary) {
+			if (options.length > 0) {
+				options[0].focus();
+				clearPendingFocus();
+			}
+			return;
+		}
+		const boundaryIndex = options.indexOf(pending.boundary);
+		if (boundaryIndex === -1) {
+			clearPendingFocus();
+			return;
+		}
+		const firstNewOption = options.slice(boundaryIndex + 1).find((option) => !pending.preLoad.has(option));
+		if (!firstNewOption) return;
+		firstNewOption.focus();
+		clearPendingFocus();
+	});
+	useEffect(() => () => clearPendingFocus(), []);
+	return {
+		onClickCapture,
+		onKeyDown
+	};
+};
+//#endregion
+export { useChannelListKeyboardNavigation };
+
+//# sourceMappingURL=useChannelListKeyboardNavigation.mjs.map

package/dist/es/components/ChannelList/hooks/useChannelListKeyboardNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelListKeyboardNavigation.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelListKeyboardNavigation.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MouseEvent as ReactMouseEvent, RefObject } from 'react';\n\nimport {\n  createRowActionKeyHandlers,\n  useListboxKeyboardNavigation,\n} from '../../../a11y/hooks/useListboxKeyboardNavigation';\n\nconst OPTION_SELECTOR = '[role=\"option\"]';\nconst ROW_SELECTOR = '.str-chat__channel-list-item-container';\nconst ACTION_BUTTON_SELECTOR = '.str-chat__channel-list-item__action-buttons button';\nconst LOAD_MORE_SELECTOR = '[data-testid=\"load-more-button\"]';\n// Roving covers the channel rows AND the Load more button, so Down from the last channel lands on\n// it (and Up/End/Home behave). The load-more \"focus the first new item\" logic below still counts\n// channel rows only, so the button being a roving target does not skew the page-boundary index.\nconst NAVIGABLE_SELECTOR = `${OPTION_SELECTOR}, ${LOAD_MORE_SELECTOR}`;\n\n// Upper bound for how long a pending \"focus the first item of the next page\" request stays armed\n// after the Load more button is pressed. If the new page hasn't rendered within this window we drop\n// the request, so an unrelated later list change (e.g. a channel arriving over the WebSocket) can't\n// trigger a stray focus move.\nconst LOAD_MORE_FOCUS_TIMEOUT_MS = 4000;\n\n/**\n * Keyboard navigation for the channel list (`role=\"listbox\"`). Returns handlers to spread onto the\n * listbox element:\n * - **ArrowUp/ArrowDown/Home/End** move focus between the channel rows (`role=\"option\"`) and the\n *   **Load more** button (the last roving target when present).\n * - **ArrowRight** moves focus from a row to its actions button (the menu is then navigable with\n *   Up/Down via the ContextMenu's own roving focus).\n * - **ArrowLeft** moves focus from a row's actions back to the row.\n * - When **Load more** is activated, focus moves to the **first item of the newly loaded page** once\n *   it renders.\n */\nexport const useChannelListKeyboardNavigation = (\n  listboxRef: RefObject<HTMLElement | null>,\n) => {\n  // Shared roving (channels + Load more) + ArrowRight→actions / ArrowLeft→row. `enterScope:\n  // 'container'` + `resolveActiveOption` make Up/Down/Home/End work even while focus is on a row's\n  // action button — moving to the next/previous channel relative to that row.\n  const { onKeyDown } = useListboxKeyboardNavigation(listboxRef, {\n    enterScope: 'container',\n    keyHandlers: createRowActionKeyHandlers({\n      actionSelector: ACTION_BUTTON_SELECTOR,\n      rowSelector: ROW_SELECTOR,\n    }),\n    optionSelector: NAVIGABLE_SELECTOR,\n    resolveActiveOption: (active) =>\n      active.closest(ROW_SELECTOR)?.querySelector<HTMLElement>(OPTION_SELECTOR) ?? null,\n  });\n\n  // Channel rows only (excludes the Load more button) — used to find the first item of the next page.\n  const getChannelOptions = () =>\n    Array.from(listboxRef.current?.querySelectorAll<HTMLElement>(OPTION_SELECTOR) ?? []);\n\n  // A pending \"focus the first item of the next page\" request. Rather than keying off the raw row\n  // COUNT (which a WebSocket-driven insert/reorder during the load window could satisfy with an\n  // unrelated row), we snapshot the pre-load rows: `boundary` is the last pre-load option (the new\n  // page is appended after it) and `preLoad` is the set of all pre-load option nodes (so a genuinely\n  // new row can be told apart from a reordered existing one). Rows are keyed by cid, so React keeps\n  // their DOM nodes stable across re-renders, making these references reliable identities.\n  const pendingFocusRef = useRef<{\n    boundary: HTMLElement | null;\n    preLoad: Set<HTMLElement>;\n  } | null>(null);\n  const pendingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearPendingFocus = () => {\n    pendingFocusRef.current = null;\n    if (pendingTimeoutRef.current) {\n      clearTimeout(pendingTimeoutRef.current);\n      pendingTimeoutRef.current = null;\n    }\n  };\n\n  // Activating Load more (by mouse or keyboard, which both dispatch a click) arms the focus move.\n  const onClickCapture = (event: ReactMouseEvent<HTMLElement>) => {\n    const target = event.target;\n    if (!(target instanceof Element) || !target.closest(LOAD_MORE_SELECTOR)) return;\n    const options = getChannelOptions();\n    pendingFocusRef.current = {\n      boundary: options[options.length - 1] ?? null,\n      preLoad: new Set(options),\n    };\n    if (pendingTimeoutRef.current) clearTimeout(pendingTimeoutRef.current);\n    pendingTimeoutRef.current = setTimeout(clearPendingFocus, LOAD_MORE_FOCUS_TIMEOUT_MS);\n  };\n\n  // After the newly loaded page renders, focus its first item. Runs after every commit; cheap no-op\n  // unless a focus move is pending. We look for the first option that is BOTH after the pre-load\n  // boundary AND was not present before load — so an unrelated row arriving over the WebSocket (which\n  // sorts above the boundary, and/or is not \"after\" it) does not trigger a stray focus move.\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) return;\n    const options = getChannelOptions();\n    // Empty list when Load more was pressed: the whole list is the new page — focus its first row.\n    if (!pending.boundary) {\n      if (options.length > 0) {\n        options[0].focus();\n        clearPendingFocus();\n      }\n      return;\n    }\n    const boundaryIndex = options.indexOf(pending.boundary);\n    // Boundary row was removed (e.g. the user left that channel) — drop the request rather than\n    // guessing where the page starts.\n    if (boundaryIndex === -1) {\n      clearPendingFocus();\n      return;\n    }\n    const firstNewOption = options\n      .slice(boundaryIndex + 1)\n      .find((option) => !pending.preLoad.has(option));\n    // Nothing new after the boundary yet: keep waiting (within the timeout) for the page to render.\n    if (!firstNewOption) return;\n    firstNewOption.focus();\n    clearPendingFocus();\n  });\n\n  useEffect(() => () => clearPendingFocus(), []);\n\n  return { onClickCapture, onKeyDown };\n};\n"],"mappings":";;;AAQA,IAAM,kBAAkB;AACxB,IAAM,eAAe;AACrB,IAAM,yBAAyB;AAC/B,IAAM,qBAAqB;AAI3B,IAAM,qBAAqB,GAAG,gBAAgB,IAAI;AAMlD,IAAM,6BAA6B;;;;;;;;;;;;AAanC,IAAa,oCACX,eACG;CAIH,MAAM,EAAE,cAAc,6BAA6B,YAAY;EAC7D,YAAY;EACZ,aAAa,2BAA2B;GACtC,gBAAgB;GAChB,aAAa;EACf,CAAC;EACD,gBAAgB;EAChB,sBAAsB,WACpB,OAAO,QAAQ,YAAY,CAAC,EAAE,cAA2B,eAAe,KAAK;CACjF,CAAC;CAGD,MAAM,0BACJ,MAAM,KAAK,WAAW,SAAS,iBAA8B,eAAe,KAAK,CAAC,CAAC;CAQrF,MAAM,kBAAkB,OAGd,IAAI;CACd,MAAM,oBAAoB,OAA6C,IAAI;CAE3E,MAAM,0BAA0B;EAC9B,gBAAgB,UAAU;EAC1B,IAAI,kBAAkB,SAAS;GAC7B,aAAa,kBAAkB,OAAO;GACtC,kBAAkB,UAAU;EAC9B;CACF;CAGA,MAAM,kBAAkB,UAAwC;EAC9D,MAAM,SAAS,MAAM;EACrB,IAAI,EAAE,kBAAkB,YAAY,CAAC,OAAO,QAAQ,kBAAkB,GAAG;EACzE,MAAM,UAAU,kBAAkB;EAClC,gBAAgB,UAAU;GACxB,UAAU,QAAQ,QAAQ,SAAS,MAAM;GACzC,SAAS,IAAI,IAAI,OAAO;EAC1B;EACA,IAAI,kBAAkB,SAAS,aAAa,kBAAkB,OAAO;EACrE,kBAAkB,UAAU,WAAW,mBAAmB,0BAA0B;CACtF;CAMA,gBAAgB;EACd,MAAM,UAAU,gBAAgB;EAChC,IAAI,CAAC,SAAS;EACd,MAAM,UAAU,kBAAkB;EAElC,IAAI,CAAC,QAAQ,UAAU;GACrB,IAAI,QAAQ,SAAS,GAAG;IACtB,QAAQ,EAAE,CAAC,MAAM;IACjB,kBAAkB;GACpB;GACA;EACF;EACA,MAAM,gBAAgB,QAAQ,QAAQ,QAAQ,QAAQ;EAGtD,IAAI,kBAAkB,IAAI;GACxB,kBAAkB;GAClB;EACF;EACA,MAAM,iBAAiB,QACpB,MAAM,gBAAgB,CAAC,CAAC,CACxB,MAAM,WAAW,CAAC,QAAQ,QAAQ,IAAI,MAAM,CAAC;EAEhD,IAAI,CAAC,gBAAgB;EACrB,eAAe,MAAM;EACrB,kBAAkB;CACpB,CAAC;CAED,sBAAsB,kBAAkB,GAAG,CAAC,CAAC;CAE7C,OAAO;EAAE;EAAgB;CAAU;AACrC"}