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

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedMessagesCount.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts"],"sourcesContent":["import type { Channel, LocalMessage, PaginatorState } from 'stream-chat';\n\nimport { useStateStore } from '../../../../store';\n\nconst selector = (state: PaginatorState<LocalMessage>) => ({\n  count: state.items?.length ?? 0,\n});\n\n/**\n * Reactive count of the channel's loaded pinned messages, sourced from\n * `channel.pinnedMessagesPaginator`. The paginator is kept current by the SDK's channel event\n * handlers (pin/unpin/delete/truncate); `useStateStore` re-renders on every change.\n */\nexport const usePinnedMessagesCount = (channel: Channel) => {\n  const { count } = useStateStore(channel.pinnedMessagesPaginator.state, selector);\n  return count;\n};\n"],"mappings":";;AAIA,IAAM,YAAY,WAAyC,EACzD,OAAO,MAAM,OAAO,UAAU,EAChC;;;;;;AAOA,IAAa,0BAA0B,YAAqB;CAC1D,MAAM,EAAE,UAAU,cAAc,QAAQ,wBAAwB,OAAO,QAAQ;CAC/E,OAAO;AACT"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.mjs

@@ -0,0 +1,68 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { usePinnedMessagesCount } from "./usePinnedMessagesCount.mjs";
+import { useCallback, useEffect, useMemo } from "react";
+import { MessageSearchSource } from "stream-chat";
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.ts
+var PINNED_MESSAGES_SEARCH_PAGE_SIZE = 30;
+var PINNED_MESSAGES_SEARCH_DEBOUNCE_MS = 300;
+var pinnedMessagesSearchSourceItemsStateSelector = (state) => ({ messages: state.items });
+var usePinnedMessagesSearch = ({ searchSource } = {}) => {
+	const { client } = useChatContext();
+	const { channel } = useChannelDetailContext();
+	const pinnedMessagesSearchSource = useMemo(() => {
+		const source = searchSource ?? new MessageSearchSource(client, {
+			allowEmptySearchString: true,
+			debounceMs: PINNED_MESSAGES_SEARCH_DEBOUNCE_MS,
+			pageSize: PINNED_MESSAGES_SEARCH_PAGE_SIZE,
+			resetOnNewSearchQuery: false
+		}, { messageSearch: { initialFilterConfig: { text: {
+			enabled: true,
+			generate: ({ searchQuery }) => searchQuery ? { text: { $autocomplete: searchQuery } } : null
+		} } } });
+		if (!searchSource) {
+			source.messageSearchChannelFilters = { cid: channel.cid };
+			source.messageSearchFilters = { pinned: true };
+		}
+		return source;
+	}, [
+		channel.cid,
+		client,
+		searchSource
+	]);
+	const { messages } = useStateStore(pinnedMessagesSearchSource.state, pinnedMessagesSearchSourceItemsStateSelector);
+	useEffect(() => {
+		pinnedMessagesSearchSource.activate();
+		return () => {
+			pinnedMessagesSearchSource.cancelScheduledQuery();
+		};
+	}, [pinnedMessagesSearchSource]);
+	const hasPinnedMessages = usePinnedMessagesCount(channel) > 0;
+	useEffect(() => {
+		if (!hasPinnedMessages) return;
+		pinnedMessagesSearchSource.search("");
+	}, [hasPinnedMessages, pinnedMessagesSearchSource]);
+	const handleSearchChange = useCallback((query) => {
+		const trimmedQuery = query.trim();
+		if (!trimmedQuery) {
+			pinnedMessagesSearchSource.cancelScheduledQuery();
+			pinnedMessagesSearchSource.resetState();
+			pinnedMessagesSearchSource.activate();
+			pinnedMessagesSearchSource.search("");
+			return;
+		}
+		pinnedMessagesSearchSource.search(trimmedQuery);
+	}, [pinnedMessagesSearchSource]);
+	return {
+		displayedMessages: messages ?? [],
+		handleSearchChange,
+		hasPinnedMessages,
+		hasSearchResultsLoaded: Array.isArray(messages),
+		pinnedMessagesSearchSource
+	};
+};
+//#endregion
+export { usePinnedMessagesSearch };
+
+//# sourceMappingURL=usePinnedMessagesSearch.mjs.map

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedMessagesSearch.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.ts"],"sourcesContent":["import {\n  type LocalMessage,\n  type MessageResponse,\n  MessageSearchSource,\n  type SearchSourceState,\n} from 'stream-chat';\nimport { useCallback, useEffect, useMemo } from 'react';\n\nimport { useChatContext } from '../../../../context';\nimport { useStateStore } from '../../../../store';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { usePinnedMessagesCount } from './usePinnedMessagesCount';\n\nconst PINNED_MESSAGES_SEARCH_PAGE_SIZE = 30;\nconst PINNED_MESSAGES_SEARCH_DEBOUNCE_MS = 300;\n\nconst pinnedMessagesSearchSourceItemsStateSelector = (\n  state: SearchSourceState<MessageResponse>,\n) => ({\n  messages: state.items,\n});\n\nexport type UsePinnedMessagesSearchParams = {\n  /**\n   * Custom message search source for pinned messages. When provided it is used\n   * as-is — its filters and sort are respected, never overridden.\n   */\n  searchSource?: MessageSearchSource;\n};\n\nexport const usePinnedMessagesSearch = ({\n  searchSource,\n}: UsePinnedMessagesSearchParams = {}) => {\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n  const pinnedMessagesSearchSource = useMemo(() => {\n    const source =\n      searchSource ??\n      new MessageSearchSource(\n        client,\n        {\n          allowEmptySearchString: true,\n          debounceMs: PINNED_MESSAGES_SEARCH_DEBOUNCE_MS,\n          pageSize: PINNED_MESSAGES_SEARCH_PAGE_SIZE,\n          resetOnNewSearchQuery: false,\n        },\n        {\n          messageSearch: {\n            initialFilterConfig: {\n              text: {\n                enabled: true,\n                generate: ({ searchQuery }) =>\n                  searchQuery\n                    ? {\n                        text: { $autocomplete: searchQuery },\n                      }\n                    : null,\n              },\n            },\n          },\n        },\n      );\n\n    // Only configure a source we own; a provided source keeps its own filters\n    // and sort.\n    if (!searchSource) {\n      source.messageSearchChannelFilters = { cid: channel.cid };\n      source.messageSearchFilters = { pinned: true };\n    }\n\n    return source;\n  }, [channel.cid, client, searchSource]);\n\n  const { messages } = useStateStore(\n    pinnedMessagesSearchSource.state,\n    pinnedMessagesSearchSourceItemsStateSelector,\n  );\n\n  useEffect(() => {\n    pinnedMessagesSearchSource.activate();\n\n    return () => {\n      pinnedMessagesSearchSource.cancelScheduledQuery();\n    };\n  }, [pinnedMessagesSearchSource]);\n\n  // Query-independent flag, reactive to pin/unpin. The search source is the sole\n  // source of the displayed list, but it does not know whether the channel has\n  // pinned messages until a query resolves; this gates the search input, the\n  // initial load and the empty-state choice (the channel can have pinned messages\n  // that the current query matches none of).\n  const hasPinnedMessages = usePinnedMessagesCount(channel) > 0;\n\n  // The list is loaded and paginated entirely by the search source. Load the\n  // first page once the channel is known to have pinned messages — gating on\n  // hasPinnedMessages also loads page one when the channel gains its first pin\n  // during the session.\n  useEffect(() => {\n    if (!hasPinnedMessages) return;\n    void pinnedMessagesSearchSource.search('');\n  }, [hasPinnedMessages, pinnedMessagesSearchSource]);\n\n  const handleSearchChange = useCallback(\n    (query: string) => {\n      const trimmedQuery = query.trim();\n\n      if (!trimmedQuery) {\n        // Clearing the query reloads the full pinned list from its first page.\n        pinnedMessagesSearchSource.cancelScheduledQuery();\n        pinnedMessagesSearchSource.resetState();\n        pinnedMessagesSearchSource.activate();\n        void pinnedMessagesSearchSource.search('');\n        return;\n      }\n\n      pinnedMessagesSearchSource.search(trimmedQuery);\n    },\n    [pinnedMessagesSearchSource],\n  );\n\n  return {\n    displayedMessages: (messages ?? []) as Array<MessageResponse | LocalMessage>,\n    handleSearchChange,\n    hasPinnedMessages,\n    hasSearchResultsLoaded: Array.isArray(messages),\n    pinnedMessagesSearchSource,\n  };\n};\n"],"mappings":";;;;;;;AAaA,IAAM,mCAAmC;AACzC,IAAM,qCAAqC;AAE3C,IAAM,gDACJ,WACI,EACJ,UAAU,MAAM,MAClB;AAUA,IAAa,2BAA2B,EACtC,iBACiC,CAAC,MAAM;CACxC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,6BAA6B,cAAc;EAC/C,MAAM,SACJ,gBACA,IAAI,oBACF,QACA;GACE,wBAAwB;GACxB,YAAY;GACZ,UAAU;GACV,uBAAuB;EACzB,GACA,EACE,eAAe,EACb,qBAAqB,EACnB,MAAM;GACJ,SAAS;GACT,WAAW,EAAE,kBACX,cACI,EACE,MAAM,EAAE,eAAe,YAAY,EACrC,IACA;EACR,EACF,EACF,EACF,CACF;EAIF,IAAI,CAAC,cAAc;GACjB,OAAO,8BAA8B,EAAE,KAAK,QAAQ,IAAI;GACxD,OAAO,uBAAuB,EAAE,QAAQ,KAAK;EAC/C;EAEA,OAAO;CACT,GAAG;EAAC,QAAQ;EAAK;EAAQ;CAAY,CAAC;CAEtC,MAAM,EAAE,aAAa,cACnB,2BAA2B,OAC3B,4CACF;CAEA,gBAAgB;EACd,2BAA2B,SAAS;EAEpC,aAAa;GACX,2BAA2B,qBAAqB;EAClD;CACF,GAAG,CAAC,0BAA0B,CAAC;CAO/B,MAAM,oBAAoB,uBAAuB,OAAO,IAAI;CAM5D,gBAAgB;EACd,IAAI,CAAC,mBAAmB;EACxB,2BAAgC,OAAO,EAAE;CAC3C,GAAG,CAAC,mBAAmB,0BAA0B,CAAC;CAElD,MAAM,qBAAqB,aACxB,UAAkB;EACjB,MAAM,eAAe,MAAM,KAAK;EAEhC,IAAI,CAAC,cAAc;GAEjB,2BAA2B,qBAAqB;GAChD,2BAA2B,WAAW;GACtC,2BAA2B,SAAS;GACpC,2BAAgC,OAAO,EAAE;GACzC;EACF;EAEA,2BAA2B,OAAO,YAAY;CAChD,GACA,CAAC,0BAA0B,CAC7B;CAEA,OAAO;EACL,mBAAoB,YAAY,CAAC;EACjC;EACA;EACA,wBAAwB,MAAM,QAAQ,QAAQ;EAC9C;CACF;AACF"}

package/dist/es/plugins/ChannelDetail/VirtualizedList/VirtualizedList.mjs

@@ -0,0 +1,42 @@
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Virtuoso } from "react-virtuoso";
+//#region src/plugins/ChannelDetail/VirtualizedList/VirtualizedList.tsx
+var VirtualizedListContent = forwardRef(function VirtualizedListContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__virtualized-list__content", className),
+		ref
+	});
+});
+/**
+* Thin wrapper around `react-virtuoso`'s `Virtuoso` for the simple,
+* append-only, flat lists used across the ChannelDetail views. It keeps the
+* call sites declarative (data + itemContent + empty/footer slots) and hides
+* the infinite-scroll wiring.
+*/
+var VirtualizedList = ({ className, computeItemKey, data, EmptyPlaceholder, Footer, itemContent, loadNext, virtuosoProps, ...rest }) => {
+	const atBottomStateChange = useCallback((atBottom) => {
+		if (atBottom) loadNext?.();
+	}, [loadNext]);
+	const components = useMemo(() => ({
+		EmptyPlaceholder,
+		Footer,
+		List: VirtualizedListContent
+	}), [EmptyPlaceholder, Footer]);
+	return /* @__PURE__ */ jsx(Virtuoso, {
+		atBottomStateChange,
+		className: clsx("str-chat__virtualized-list", className),
+		components,
+		computeItemKey,
+		data,
+		itemContent,
+		...rest,
+		...virtuosoProps
+	});
+};
+//#endregion
+export { VirtualizedList };
+
+//# sourceMappingURL=VirtualizedList.mjs.map

package/dist/es/plugins/ChannelDetail/VirtualizedList/VirtualizedList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedList.mjs","names":[],"sources":["../../../../../src/plugins/ChannelDetail/VirtualizedList/VirtualizedList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, ComponentType, ReactNode } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport type { ComputeItemKey, VirtuosoProps } from 'react-virtuoso';\nimport { Virtuoso } from 'react-virtuoso';\n\n// Wraps the virtualized item list so views can attach padding/spacing to a\n// stable class instead of reaching into Virtuoso's internal markup.\nconst VirtualizedListContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  function VirtualizedListContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        className={clsx('str-chat__virtualized-list__content', className)}\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type VirtualizedListProps<T> = {\n  /** Items to render. An empty array renders the `EmptyPlaceholder`. */\n  data: T[];\n  /** Renders a single item; do not add a React key, Virtuoso manages keys. */\n  itemContent: (index: number, item: T) => ReactNode;\n  'aria-label'?: string;\n  className?: string;\n  computeItemKey?: ComputeItemKey<T, unknown>;\n  /** Rendered in place of the list when `data` is empty. */\n  EmptyPlaceholder?: ComponentType;\n  /** Rendered below the items, e.g. a loading indicator for the next page. */\n  Footer?: ComponentType;\n  /** Called when the list is scrolled to the bottom to load the next page. */\n  loadNext?: () => void;\n  role?: string;\n  /** Escape hatch for passing additional props straight to Virtuoso. */\n  virtuosoProps?: VirtuosoProps<T, unknown>;\n};\n\n/**\n * Thin wrapper around `react-virtuoso`'s `Virtuoso` for the simple,\n * append-only, flat lists used across the ChannelDetail views. It keeps the\n * call sites declarative (data + itemContent + empty/footer slots) and hides\n * the infinite-scroll wiring.\n */\nexport const VirtualizedList = <T,>({\n  className,\n  computeItemKey,\n  data,\n  EmptyPlaceholder,\n  Footer,\n  itemContent,\n  loadNext,\n  virtuosoProps,\n  ...rest\n}: VirtualizedListProps<T>) => {\n  const atBottomStateChange = useCallback(\n    (atBottom: boolean) => {\n      if (atBottom) loadNext?.();\n    },\n    [loadNext],\n  );\n\n  const components = useMemo(\n    () => ({\n      EmptyPlaceholder,\n      Footer,\n      List: VirtualizedListContent,\n    }),\n    [EmptyPlaceholder, Footer],\n  );\n\n  return (\n    <Virtuoso\n      atBottomStateChange={atBottomStateChange}\n      className={clsx('str-chat__virtualized-list', className)}\n      components={components}\n      computeItemKey={computeItemKey}\n      data={data}\n      itemContent={itemContent}\n      {...rest}\n      {...virtuosoProps}\n    />\n  );\n};\n"],"mappings":";;;;;AAQA,IAAM,yBAAyB,WAC7B,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,uCAAuC,SAAS;EAC3D;CACN,CAAA;AAEL,CACF;;;;;;;AA2BA,IAAa,mBAAuB,EAClC,WACA,gBACA,MACA,kBACA,QACA,aACA,UACA,eACA,GAAG,WAC0B;CAC7B,MAAM,sBAAsB,aACzB,aAAsB;EACrB,IAAI,UAAU,WAAW;CAC3B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,eACV;EACL;EACA;EACA,MAAM;CACR,IACA,CAAC,kBAAkB,MAAM,CAC3B;CAEA,OACE,oBAAC,UAAD;EACuB;EACrB,WAAW,KAAK,8BAA8B,SAAS;EAC3C;EACI;EACV;EACO;EACb,GAAI;EACJ,GAAI;CACL,CAAA;AAEL"}

package/dist/es/plugins/Emojis/EmojiPicker.mjs

@@ -0,0 +1,96 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../../components/Button/Button.mjs";
+import { usePopoverPosition } from "../../components/Dialog/hooks/usePopoverPosition.mjs";
+import { useMessageComposerController } from "../../components/MessageComposer/hooks/useMessageComposerController.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useIsCooldownActive } from "../../components/MessageComposer/hooks/useIsCooldownActive.mjs";
+import { Picker } from "./Picker.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/Emojis/EmojiPicker.tsx
+var isShadowRoot = (node) => !!node.host;
+var defaultButtonClassName = "str-chat__emoji-picker-button";
+var classNames = {
+	pickerContainerClassName: "str-chat__message-textarea-emoji-picker-container",
+	wrapperClassName: "str-chat__message-textarea-emoji-picker"
+};
+var EmojiPicker = (props) => {
+	const { t } = useTranslationContext();
+	const { textareaRef } = useMessageComposerContext();
+	const { textComposer } = useMessageComposerController();
+	const isCooldownActive = useIsCooldownActive();
+	const [displayPicker, setDisplayPicker] = useState(false);
+	const [referenceElement, setReferenceElement] = useState(null);
+	const [popperElement, setPopperElement] = useState(null);
+	const { refs, strategy, x, y } = usePopoverPosition({
+		offset: 8,
+		placement: props.placement ?? "top-end"
+	});
+	useEffect(() => {
+		refs.setReference(referenceElement);
+	}, [referenceElement, refs]);
+	useEffect(() => {
+		refs.setFloating(popperElement);
+	}, [popperElement, refs]);
+	const { pickerContainerClassName, wrapperClassName } = classNames;
+	const { ButtonIconComponent } = props;
+	const { IconEmoji } = useComponentContextIcons();
+	const ResolvedButtonIcon = ButtonIconComponent ?? IconEmoji;
+	const pickerStyle = props.pickerProps?.style;
+	useEffect(() => {
+		if (!popperElement || !referenceElement) return;
+		const handlePointerDown = (e) => {
+			const target = e.target;
+			const rootNode = target.getRootNode();
+			if (popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) || referenceElement.contains(target)) return;
+			setDisplayPicker(false);
+		};
+		window.addEventListener("pointerdown", handlePointerDown);
+		return () => window.removeEventListener("pointerdown", handlePointerDown);
+	}, [referenceElement, popperElement]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: props.wrapperClassName ?? wrapperClassName,
+		children: [displayPicker && /* @__PURE__ */ jsx("div", {
+			className: props.pickerContainerClassName ?? pickerContainerClassName,
+			ref: setPopperElement,
+			style: {
+				left: x ?? 0,
+				position: strategy,
+				top: y ?? 0
+			},
+			children: /* @__PURE__ */ jsx(Picker, {
+				data: async () => (await import("@emoji-mart/data")).default,
+				onEmojiSelect: (e) => {
+					const textarea = textareaRef.current;
+					if (!textarea) return;
+					textComposer.insertText({ text: e.native });
+					textarea.focus();
+					if (props.closeOnEmojiSelect) setDisplayPicker(false);
+				},
+				...props.pickerProps,
+				style: {
+					...pickerStyle,
+					"--shadow": "none"
+				}
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			"aria-expanded": displayPicker,
+			"aria-label": t("emojiPicker.emojiPicker.ariaLabel", "Emoji picker"),
+			circular: true,
+			className: props.buttonClassName ?? defaultButtonClassName,
+			disabled: isCooldownActive,
+			onClick: () => setDisplayPicker((cv) => !cv),
+			ref: setReferenceElement,
+			size: "sm",
+			type: "button",
+			variant: "secondary",
+			children: ResolvedButtonIcon && /* @__PURE__ */ jsx(ResolvedButtonIcon, {})
+		})]
+	});
+};
+//#endregion
+export { EmojiPicker };
+
+//# sourceMappingURL=EmojiPicker.mjs.map

package/dist/es/plugins/Emojis/EmojiPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.mjs","names":[],"sources":["../../../../src/plugins/Emojis/EmojiPicker.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Picker, type PickerProps } from './Picker';\n\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../context';\nimport {\n  Button,\n  type PopperLikePlacement,\n  useMessageComposerController,\n} from '../../components';\nimport { usePopoverPosition } from '../../components/Dialog/hooks/usePopoverPosition';\nimport { useIsCooldownActive } from '../../components/MessageComposer/hooks/useIsCooldownActive';\n\nconst isShadowRoot = (node: Node): node is ShadowRoot => !!(node as ShadowRoot).host;\n\nexport type EmojiPickerProps = {\n  ButtonIconComponent?: React.ComponentType;\n  buttonClassName?: string;\n  pickerContainerClassName?: string;\n  wrapperClassName?: string;\n  closeOnEmojiSelect?: boolean;\n  /**\n   * Untyped [properties](https://github.com/missive/emoji-mart/tree/v5.5.2#options--props) to be\n   * passed down to the [emoji-mart `Picker`](https://github.com/missive/emoji-mart/tree/v5.5.2#-picker) component\n   */\n  pickerProps?: Partial<{ theme: 'auto' | 'light' | 'dark' } & PickerProps>;\n  /**\n   * Floating UI placement (default: 'top-end') for the picker popover\n   */\n  placement?: PopperLikePlacement;\n};\n\nconst defaultButtonClassName = 'str-chat__emoji-picker-button';\n\nconst classNames: Pick<\n  EmojiPickerProps,\n  'pickerContainerClassName' | 'wrapperClassName'\n> = {\n  pickerContainerClassName: 'str-chat__message-textarea-emoji-picker-container',\n  wrapperClassName: 'str-chat__message-textarea-emoji-picker',\n};\n\nexport const EmojiPicker = (props: EmojiPickerProps) => {\n  const { t } = useTranslationContext();\n  const { textareaRef } = useMessageComposerContext();\n  const { textComposer } = useMessageComposerController();\n  const isCooldownActive = useIsCooldownActive();\n  const [displayPicker, setDisplayPicker] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(\n    null,\n  );\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n  const { refs, strategy, x, y } = usePopoverPosition({\n    offset: 8,\n    placement: props.placement ?? 'top-end',\n  });\n\n  useEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n  useEffect(() => {\n    refs.setFloating(popperElement);\n  }, [popperElement, refs]);\n\n  const { pickerContainerClassName, wrapperClassName } = classNames;\n\n  const { ButtonIconComponent } = props;\n  const { IconEmoji } = useComponentContextIcons();\n  // The prop still wins: it targets this picker, the slot rebrands every emoji icon.\n  const ResolvedButtonIcon = ButtonIconComponent ?? IconEmoji;\n  const pickerStyle = props.pickerProps?.style as React.CSSProperties | undefined;\n\n  useEffect(() => {\n    if (!popperElement || !referenceElement) return;\n\n    const handlePointerDown = (e: PointerEvent) => {\n      const target = e.target as HTMLElement;\n\n      const rootNode = target.getRootNode();\n\n      if (\n        popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) ||\n        referenceElement.contains(target)\n      ) {\n        return;\n      }\n\n      setDisplayPicker(false);\n    };\n\n    window.addEventListener('pointerdown', handlePointerDown);\n    return () => window.removeEventListener('pointerdown', handlePointerDown);\n  }, [referenceElement, popperElement]);\n\n  return (\n    <div className={props.wrapperClassName ?? wrapperClassName}>\n      {displayPicker && (\n        <div\n          className={props.pickerContainerClassName ?? pickerContainerClassName}\n          ref={setPopperElement}\n          style={{ left: x ?? 0, position: strategy, top: y ?? 0 }}\n        >\n          <Picker\n            data={async () => (await import('@emoji-mart/data')).default}\n            onEmojiSelect={(e: { native: string }) => {\n              const textarea = textareaRef.current;\n              if (!textarea) return;\n              textComposer.insertText({ text: e.native });\n              textarea.focus();\n              if (props.closeOnEmojiSelect) {\n                setDisplayPicker(false);\n              }\n            }}\n            {...props.pickerProps}\n            style={{ ...pickerStyle, '--shadow': 'none' }}\n          />\n        </div>\n      )}\n      <Button\n        appearance='ghost'\n        aria-expanded={displayPicker}\n        aria-label={t('emojiPicker.emojiPicker.ariaLabel', 'Emoji picker')}\n        circular\n        className={props.buttonClassName ?? defaultButtonClassName}\n        disabled={isCooldownActive}\n        onClick={() => setDisplayPicker((cv) => !cv)}\n        ref={setReferenceElement}\n        size='sm'\n        type='button'\n        variant='secondary'\n      >\n        {ResolvedButtonIcon && <ResolvedButtonIcon />}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,gBAAgB,SAAmC,CAAC,CAAE,KAAoB;AAmBhF,IAAM,yBAAyB;AAE/B,IAAM,aAGF;CACF,0BAA0B;CAC1B,kBAAkB;AACpB;AAEA,IAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,gBAAgB,0BAA0B;CAClD,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,kBAAkB,uBAAuB,SAC9C,IACF;CACA,MAAM,CAAC,eAAe,oBAAoB,SAAgC,IAAI;CAC9E,MAAM,EAAE,MAAM,UAAU,GAAG,MAAM,mBAAmB;EAClD,QAAQ;EACR,WAAW,MAAM,aAAa;CAChC,CAAC;CAED,gBAAgB;EACd,KAAK,aAAa,gBAAgB;CACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;CAC3B,gBAAgB;EACd,KAAK,YAAY,aAAa;CAChC,GAAG,CAAC,eAAe,IAAI,CAAC;CAExB,MAAM,EAAE,0BAA0B,qBAAqB;CAEvD,MAAM,EAAE,wBAAwB;CAChC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,qBAAqB,uBAAuB;CAClD,MAAM,cAAc,MAAM,aAAa;CAEvC,gBAAgB;EACd,IAAI,CAAC,iBAAiB,CAAC,kBAAkB;EAEzC,MAAM,qBAAqB,MAAoB;GAC7C,MAAM,SAAS,EAAE;GAEjB,MAAM,WAAW,OAAO,YAAY;GAEpC,IACE,cAAc,SAAS,aAAa,QAAQ,IAAI,SAAS,OAAO,MAAM,KACtE,iBAAiB,SAAS,MAAM,GAEhC;GAGF,iBAAiB,KAAK;EACxB;EAEA,OAAO,iBAAiB,eAAe,iBAAiB;EACxD,aAAa,OAAO,oBAAoB,eAAe,iBAAiB;CAC1E,GAAG,CAAC,kBAAkB,aAAa,CAAC;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAW,MAAM,oBAAoB;YAA1C,CACG,iBACC,oBAAC,OAAD;GACE,WAAW,MAAM,4BAA4B;GAC7C,KAAK;GACL,OAAO;IAAE,MAAM,KAAK;IAAG,UAAU;IAAU,KAAK,KAAK;GAAE;aAEvD,oBAAC,QAAD;IACE,MAAM,aAAa,MAAM,OAAO,oBAAA,CAAqB;IACrD,gBAAgB,MAA0B;KACxC,MAAM,WAAW,YAAY;KAC7B,IAAI,CAAC,UAAU;KACf,aAAa,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC;KAC1C,SAAS,MAAM;KACf,IAAI,MAAM,oBACR,iBAAiB,KAAK;IAE1B;IACA,GAAI,MAAM;IACV,OAAO;KAAE,GAAG;KAAa,YAAY;IAAO;GAC7C,CAAA;EACE,CAAA,GAEP,oBAAC,QAAD;GACE,YAAW;GACX,iBAAe;GACf,cAAY,EAAE,qCAAqC,cAAc;GACjE,UAAA;GACA,WAAW,MAAM,mBAAmB;GACpC,UAAU;GACV,eAAe,kBAAkB,OAAO,CAAC,EAAE;GAC3C,KAAK;GACL,MAAK;GACL,MAAK;GACL,SAAQ;aAEP,sBAAsB,oBAAC,oBAAD,CAAqB,CAAA;EACtC,CAAA,CACL;;AAET"}

package/dist/es/plugins/Emojis/Picker.mjs

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Picker } from "emoji-mart";
+//#region src/plugins/Emojis/Picker.tsx
+var Picker$1 = (props) => {
+	const ref = useRef(null);
+	const instance = useRef(null);
+	if (instance.current) instance.current.update(props);
+	useEffect(() => {
+		instance.current = new Picker({
+			...props,
+			ref
+		});
+		return () => {
+			instance.current = null;
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", { ref });
+};
+//#endregion
+export { Picker$1 as Picker };
+
+//# sourceMappingURL=Picker.mjs.map

package/dist/es/plugins/Emojis/Picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.mjs","names":[],"sources":["../../../../src/plugins/Emojis/Picker.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Picker as EmojiMartPicker } from 'emoji-mart';\n\n/**\n * Untyped [properties](https://github.com/missive/emoji-mart/tree/v5.5.2#options--props) forwarded\n * to the emoji-mart `Picker` custom element.\n */\nexport type PickerProps = Record<string, unknown>;\n\n// React wrapper around the emoji-mart `Picker` custom element. Taken and adjusted from\n// @emoji-mart/react (MIT, Copyright (c) Missive):\n// https://github.com/missive/emoji-mart/blob/16978d04a766eec6455e2e8bb21cd8dc0b3c7436/packages/emoji-mart-react/react.tsx\n//\n// Vendored rather than depended upon because @emoji-mart/react does not declare React 19 in its\n// peer dependencies, which forces consumers into `package.json` overrides.\nexport const Picker = (props: PickerProps) => {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const instance = useRef<EmojiMartPicker | null>(null);\n  if (instance.current) {\n    instance.current.update(props);\n  }\n\n  useEffect(() => {\n    instance.current = new EmojiMartPicker({ ...props, ref });\n    return () => {\n      instance.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div ref={ref} />;\n};\n"],"mappings":";;;;AAeA,IAAa,YAAU,UAAuB;CAC5C,MAAM,MAAM,OAA8B,IAAI;CAC9C,MAAM,WAAW,OAA+B,IAAI;CACpD,IAAI,SAAS,SACX,SAAS,QAAQ,OAAO,KAAK;CAG/B,gBAAgB;EACd,SAAS,UAAU,IAAI,OAAgB;GAAE,GAAG;GAAO;EAAI,CAAC;EACxD,aAAa;GACX,SAAS,UAAU;EACrB;CAEF,GAAG,CAAC,CAAC;CAEL,OAAO,oBAAC,OAAD,EAAU,IAAM,CAAA;AACzB"}

package/dist/es/plugins/Emojis/middleware/textComposerEmojiMiddleware.mjs

@@ -0,0 +1,127 @@
+import { BaseSearchSource, getTokenizedSuggestionDisplayName, getTriggerCharWithToken, insertItemWithTrigger, replaceWordWithEntity } from "stream-chat";
+import mergeWith from "lodash.mergewith";
+//#region src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
+var EmojiSearchSource = class extends BaseSearchSource {
+	type = "emoji";
+	emojiSearchIndex;
+	constructor(emojiSearchIndex, options) {
+		super(options);
+		this.emojiSearchIndex = emojiSearchIndex;
+	}
+	async query(searchQuery) {
+		if (searchQuery.length === 0) return {
+			items: [],
+			next: null
+		};
+		return {
+			items: (await this.emojiSearchIndex.search(searchQuery) ?? []).filter(Boolean).slice(0, 7).map(({ emoticons = [], id, name, native, skins = [] }) => {
+				const [firstSkin] = skins;
+				return {
+					emoticons,
+					id,
+					name,
+					native: native ?? firstSkin.native
+				};
+			}),
+			next: null
+		};
+	}
+	filterQueryResults(items) {
+		return items.map((item) => ({
+			...item,
+			...getTokenizedSuggestionDisplayName({
+				displayName: item.id,
+				searchToken: this.searchQuery
+			})
+		}));
+	}
+};
+var DEFAULT_OPTIONS = {
+	minChars: 1,
+	trigger: ":"
+};
+/**
+* TextComposer middleware for mentions
+* Usage:
+*
+*  const textComposer = new TextComposer(options);
+*
+*  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {
+*   minChars: 2
+*  }));
+*
+* @param emojiSearchIndex
+* @param {{
+*     minChars: number;
+*     trigger: string;
+*   }} options
+* @returns
+*/
+var createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
+	const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
+	const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
+	emojiSearchSource.activate();
+	return {
+		id: "stream-io/emoji-middleware",
+		handlers: {
+			onChange: async ({ complete, forward, next, state }) => {
+				if (!state.selection) return forward();
+				const triggerWithToken = getTriggerCharWithToken({
+					acceptTrailingSpaces: false,
+					text: state.text.slice(0, state.selection.end),
+					trigger: finalOptions.trigger
+				});
+				if (!triggerWithToken || triggerWithToken.length < finalOptions.minChars) {
+					const hasSuggestionsForTrigger = state.suggestions?.trigger === finalOptions.trigger;
+					const newState = { ...state };
+					if (hasSuggestionsForTrigger && newState.suggestions) delete newState.suggestions;
+					return next(newState);
+				}
+				if (triggerWithToken && triggerWithToken === finalOptions.trigger) emojiSearchSource.resetStateAndActivate();
+				const textWithReplacedWord = await replaceWordWithEntity({
+					caretPosition: state.selection.end,
+					getEntityString: async (word) => {
+						const { items } = await emojiSearchSource.query(word);
+						const emoji = items.filter(Boolean).slice(0, 10).find(({ emoticons }) => !!emoticons?.includes(word));
+						if (!emoji) return null;
+						const [firstSkin] = emoji.skins ?? [];
+						return emoji.native ?? firstSkin.native;
+					},
+					text: state.text
+				});
+				if (textWithReplacedWord !== state.text) return complete({
+					...state,
+					suggestions: void 0,
+					text: textWithReplacedWord
+				});
+				return complete({
+					...state,
+					suggestions: {
+						query: triggerWithToken.slice(1),
+						searchSource: emojiSearchSource,
+						trigger: finalOptions.trigger
+					}
+				});
+			},
+			onSuggestionItemSelect: ({ complete, forward, state }) => {
+				const { selectedSuggestion } = state.change ?? {};
+				if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger) return forward();
+				emojiSearchSource.resetStateAndActivate();
+				return complete({
+					...state,
+					...insertItemWithTrigger({
+						insertText: `${"native" in selectedSuggestion ? selectedSuggestion.native : ""} `,
+						selection: state.selection,
+						text: state.text,
+						trigger: finalOptions.trigger
+					}),
+					suggestions: void 0
+				});
+			}
+		}
+	};
+};
+//#endregion
+export { createTextComposerEmojiMiddleware };
+
+//# sourceMappingURL=textComposerEmojiMiddleware.mjs.map

package/dist/es/plugins/Emojis/middleware/textComposerEmojiMiddleware.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textComposerEmojiMiddleware.mjs","names":[],"sources":["../../../../../src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts"],"sourcesContent":["import mergeWith from 'lodash.mergewith';\nimport type {\n  Middleware,\n  SearchSourceOptions,\n  SearchSourceType,\n  TextComposerMiddlewareExecutorState,\n  TextComposerMiddlewareOptions,\n  TextComposerSuggestion,\n} from 'stream-chat';\nimport {\n  BaseSearchSource,\n  getTokenizedSuggestionDisplayName,\n  getTriggerCharWithToken,\n  insertItemWithTrigger,\n  replaceWordWithEntity,\n} from 'stream-chat';\nimport type {\n  EmojiSearchIndex,\n  EmojiSearchIndexResult,\n} from '../../../components/MessageComposer';\n\nexport type EmojiSuggestion<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =\n  TextComposerSuggestion<T>;\n\nclass EmojiSearchSource<\n  T extends TextComposerSuggestion<EmojiSearchIndexResult>,\n> extends BaseSearchSource<T> {\n  readonly type: SearchSourceType = 'emoji';\n  private emojiSearchIndex: EmojiSearchIndex;\n\n  constructor(emojiSearchIndex: EmojiSearchIndex, options?: SearchSourceOptions) {\n    super(options);\n    this.emojiSearchIndex = emojiSearchIndex;\n  }\n\n  async query(searchQuery: string) {\n    if (searchQuery.length === 0) {\n      return { items: [] as T[], next: null };\n    }\n    const emojis = (await this.emojiSearchIndex.search(searchQuery)) ?? [];\n\n    // emojiIndex.search sometimes returns undefined values, so filter those out first\n    return {\n      items: emojis\n        .filter(Boolean)\n        .slice(0, 7)\n        .map(({ emoticons = [], id, name, native, skins = [] }) => {\n          const [firstSkin] = skins;\n\n          return {\n            emoticons,\n            id,\n            name,\n            native: native ?? firstSkin.native,\n          };\n        }) as T[],\n      next: null, // todo: generate cursor\n    };\n  }\n\n  protected filterQueryResults(items: T[]): T[] | Promise<T[]> {\n    return items.map((item) => ({\n      ...item,\n      ...getTokenizedSuggestionDisplayName({\n        displayName: item.id,\n        searchToken: this.searchQuery,\n      }),\n    }));\n  }\n}\n\nconst DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: ':' };\n\nexport type EmojiMiddleware<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =\n  Middleware<\n    TextComposerMiddlewareExecutorState<EmojiSuggestion<T>>,\n    'onChange' | 'onSuggestionItemSelect'\n  >;\n\n/**\n * TextComposer middleware for mentions\n * Usage:\n *\n *  const textComposer = new TextComposer(options);\n *\n *  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {\n *   minChars: 2\n *  }));\n *\n * @param emojiSearchIndex\n * @param {{\n *     minChars: number;\n *     trigger: string;\n *   }} options\n * @returns\n */\nexport const createTextComposerEmojiMiddleware = (\n  emojiSearchIndex: EmojiSearchIndex,\n  options?: Partial<TextComposerMiddlewareOptions>,\n): EmojiMiddleware => {\n  const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});\n  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);\n  emojiSearchSource.activate();\n\n  return {\n    id: 'stream-io/emoji-middleware',\n    // eslint-disable-next-line sort-keys\n    handlers: {\n      onChange: async ({ complete, forward, next, state }) => {\n        if (!state.selection) return forward();\n\n        const triggerWithToken = getTriggerCharWithToken({\n          acceptTrailingSpaces: false,\n          text: state.text.slice(0, state.selection.end),\n          trigger: finalOptions.trigger,\n        });\n\n        const triggerWasRemoved =\n          !triggerWithToken || triggerWithToken.length < finalOptions.minChars;\n\n        if (triggerWasRemoved) {\n          const hasSuggestionsForTrigger =\n            state.suggestions?.trigger === finalOptions.trigger;\n          const newState = { ...state };\n          if (hasSuggestionsForTrigger && newState.suggestions) {\n            delete newState.suggestions;\n          }\n          return next(newState);\n        }\n\n        const newSearchTriggerred =\n          triggerWithToken && triggerWithToken === finalOptions.trigger;\n\n        if (newSearchTriggerred) {\n          emojiSearchSource.resetStateAndActivate();\n        }\n\n        const textWithReplacedWord = await replaceWordWithEntity({\n          caretPosition: state.selection.end,\n          getEntityString: async (word: string) => {\n            const { items } = await emojiSearchSource.query(word);\n\n            const emoji = items\n              .filter(Boolean)\n              .slice(0, 10)\n              .find(({ emoticons }) => !!emoticons?.includes(word));\n\n            if (!emoji) return null;\n\n            const [firstSkin] = emoji.skins ?? [];\n\n            return emoji.native ?? firstSkin.native;\n          },\n          text: state.text,\n        });\n\n        if (textWithReplacedWord !== state.text) {\n          return complete({\n            ...state,\n            suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query\n            text: textWithReplacedWord,\n          });\n        }\n\n        return complete({\n          ...state,\n          suggestions: {\n            query: triggerWithToken.slice(1),\n            searchSource: emojiSearchSource,\n            trigger: finalOptions.trigger,\n          },\n        });\n      },\n      onSuggestionItemSelect: ({ complete, forward, state }) => {\n        const { selectedSuggestion } = state.change ?? {};\n        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)\n          return forward();\n\n        emojiSearchSource.resetStateAndActivate();\n        return complete({\n          ...state,\n          ...insertItemWithTrigger({\n            insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,\n            selection: state.selection,\n            text: state.text,\n            trigger: finalOptions.trigger,\n          }),\n          suggestions: undefined, // Clear suggestions after selection\n        });\n      },\n    },\n  };\n};\n"],"mappings":"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"}

package/dist/es/plugins/SlotGeometry/SlotGeometry.mjs

@@ -0,0 +1,141 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/SlotGeometry/SlotGeometry.tsx
+/**
+* How much of a slot another slot must overlap before it counts as "covered", as a fraction of the
+* covered slot's own area. Range `0`–`1`: `0` = any overlap at all counts, `1` = the slot must be
+* completely covered. `0.6` means another slot has to sit over **≥ 60%** of this slot's area (a
+* side-by-side neighbour that only touches an edge overlaps ~0% and does not count).
+*/
+var COVER_THRESHOLD = .6;
+/**
+* Smallest rendered area, in CSS pixels² (`width × height`), at which a slot still counts as
+* visible. At or above `1` px² it can be covered/uncovered normally; **below** `1` px² — i.e. a
+* slot collapsed to (almost) nothing, `width`/`height` of 0, or `display: none` — it is treated as
+* obscured outright, with no overlap needed. (1 px² is effectively "zero"; it's a small epsilon to
+* avoid floating-point noise, not a meaningful size.)
+*/
+var MIN_VISIBLE_AREA = 1;
+/**
+* Decide what to do about a pending reveal intent. This is the core of coverage-driven reveal: it
+* waits until the target slot has actually been measured, then tells the consumer to reveal it only
+* if it's obscured, and otherwise to settle. Pure and synchronous so it can be unit-tested and
+* called from an effect keyed on the reactive `coverage`.
+*/
+var resolveRevealAction = (revealSlot, coverage) => {
+	if (revealSlot === void 0) return "clear";
+	if (!(revealSlot in coverage.obscured)) return "wait";
+	return coverage.obscured[revealSlot] ? "act" : "clear";
+};
+var SlotGeometryContext = createContext({
+	clearReveal: () => void 0,
+	coverage: { obscured: {} },
+	isObscured: () => false,
+	register: () => void 0,
+	requestReveal: () => void 0,
+	revealSlot: void 0
+});
+var intersectionArea = (a, b) => {
+	return Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left)) * Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
+};
+/**
+* @internal Exported for unit tests. A target is obscured when its own rendered box is ~0 area
+* (collapsed/hidden) or another element covers at least `COVER_THRESHOLD` of it.
+*/
+var measureObscured = (target, others) => {
+	const rect = target.getBoundingClientRect();
+	const area = rect.width * rect.height;
+	if (area < MIN_VISIBLE_AREA) return true;
+	let maxCoveredFraction = 0;
+	for (const other of others) {
+		const fraction = intersectionArea(rect, other.getBoundingClientRect()) / area;
+		if (fraction > maxCoveredFraction) maxCoveredFraction = fraction;
+	}
+	return maxCoveredFraction >= COVER_THRESHOLD;
+};
+var coverageChanged = (previous, next) => {
+	const keys = /* @__PURE__ */ new Set([...Object.keys(previous.obscured), ...Object.keys(next)]);
+	for (const key of keys) if (previous.obscured[key] !== next[key]) return true;
+	return false;
+};
+var SlotGeometryProvider = ({ children }) => {
+	const elementsRef = useRef(/* @__PURE__ */ new Map());
+	const observerRef = useRef(null);
+	const rafRef = useRef(null);
+	const [coverage, setCoverage] = useState({ obscured: {} });
+	const [revealSlot, setRevealSlot] = useState(void 0);
+	const requestReveal = useCallback((slot) => setRevealSlot(slot), []);
+	const clearReveal = useCallback(() => setRevealSlot(void 0), []);
+	const othersOf = (slot) => [...elementsRef.current.entries()].filter(([id]) => id !== slot).map(([, element]) => element);
+	const isObscured = useCallback((slot) => {
+		const element = elementsRef.current.get(slot);
+		if (!element) return false;
+		return measureObscured(element, othersOf(slot));
+	}, []);
+	const recompute = useCallback(() => {
+		const next = {};
+		for (const [slot, element] of elementsRef.current.entries()) next[slot] = measureObscured(element, othersOf(slot));
+		setCoverage((previous) => coverageChanged(previous, next) ? { obscured: next } : previous);
+	}, []);
+	const scheduleRecompute = useCallback(() => {
+		if (typeof requestAnimationFrame === "undefined") {
+			recompute();
+			return;
+		}
+		if (rafRef.current !== null) return;
+		rafRef.current = requestAnimationFrame(() => {
+			rafRef.current = null;
+			recompute();
+		});
+	}, [recompute]);
+	const register = useCallback((slot, element) => {
+		const elements = elementsRef.current;
+		const previous = elements.get(slot);
+		if (previous && previous !== element) observerRef.current?.unobserve(previous);
+		if (element) {
+			elements.set(slot, element);
+			observerRef.current?.observe(element);
+		} else elements.delete(slot);
+		scheduleRecompute();
+	}, [scheduleRecompute]);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => scheduleRecompute());
+		observerRef.current = observer;
+		for (const element of elementsRef.current.values()) observer.observe(element);
+		const onResize = () => scheduleRecompute();
+		window.addEventListener("resize", onResize);
+		scheduleRecompute();
+		return () => {
+			observer.disconnect();
+			observerRef.current = null;
+			window.removeEventListener("resize", onResize);
+			if (rafRef.current !== null && typeof cancelAnimationFrame !== "undefined") {
+				cancelAnimationFrame(rafRef.current);
+				rafRef.current = null;
+			}
+		};
+	}, [scheduleRecompute]);
+	const value = {
+		clearReveal,
+		coverage,
+		isObscured,
+		register,
+		requestReveal,
+		revealSlot
+	};
+	return /* @__PURE__ */ jsx(SlotGeometryContext.Provider, {
+		value,
+		children
+	});
+};
+var useSlotGeometry = () => useContext(SlotGeometryContext);
+/** Returns a stable callback ref that registers/unregisters the element backing `slot`. */
+var useRegisterSlotGeometry = (slot) => {
+	const { register } = useSlotGeometry();
+	return useCallback((element) => register(slot, element), [register, slot]);
+};
+//#endregion
+export { SlotGeometryProvider, measureObscured, resolveRevealAction, useRegisterSlotGeometry, useSlotGeometry };
+
+//# sourceMappingURL=SlotGeometry.mjs.map

package/dist/es/plugins/SlotGeometry/SlotGeometry.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlotGeometry.mjs","names":[],"sources":["../../../../src/plugins/SlotGeometry/SlotGeometry.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport type { PropsWithChildren } from 'react';\n\n/**\n * Slot geometry — an opt-in module that reports which registered \"slots\" are visually **obscured**.\n *\n * The ChatView `LayoutController` is purely logical: slots, bindings, a `hidden` flag, history — it\n * has no idea where slots land on screen. Whether one panel visually *covers* another is a physical\n * concern owned by the app's CSS (e.g. at narrow widths a secondary panel might be laid out at full\n * width, collapsing the primary one). This module is the missing physical half:\n *\n *  - App code registers the DOM element backing each slot (`useRegisterSlotGeometry`).\n *  - It observes those elements (`ResizeObserver` + window resize) and measures real rects.\n *  - It reports which slots are currently obscured — collapsed to ~0 area, or covered by another\n *    registered slot past a threshold — with no knowledge of breakpoints or class names.\n *\n * It is opt-in (wrap a subtree in `SlotGeometryProvider`) and **detection only**: it never mutates\n * the layout. Consumers read `isObscured(slot)` and decide what to do (e.g. release a covering\n * slot). A declarative rules/auto-close layer could sit on top of this.\n *\n * Dependency direction is one-way: this observes the DOM the layout produces; it does not depend on\n * the `LayoutController`, and slot ids are plain strings, so it works with any slotted layout.\n */\n\n/** A slot identifier. Plain string so the module is layout-agnostic (e.g. any `SlotName`). */\nexport type SlotId = string;\n\n/**\n * How much of a slot another slot must overlap before it counts as \"covered\", as a fraction of the\n * covered slot's own area. Range `0`–`1`: `0` = any overlap at all counts, `1` = the slot must be\n * completely covered. `0.6` means another slot has to sit over **≥ 60%** of this slot's area (a\n * side-by-side neighbour that only touches an edge overlaps ~0% and does not count).\n */\nconst COVER_THRESHOLD = 0.6;\n/**\n * Smallest rendered area, in CSS pixels² (`width × height`), at which a slot still counts as\n * visible. At or above `1` px² it can be covered/uncovered normally; **below** `1` px² — i.e. a\n * slot collapsed to (almost) nothing, `width`/`height` of 0, or `display: none` — it is treated as\n * obscured outright, with no overlap needed. (1 px² is effectively \"zero\"; it's a small epsilon to\n * avoid floating-point noise, not a meaningful size.)\n */\nconst MIN_VISIBLE_AREA = 1;\n\nexport type SlotCoverage = {\n  /** slot id -> whether it is currently obscured (collapsed, or covered by another slot). */\n  obscured: Record<SlotId, boolean>;\n};\n\n/** What a consumer should do with a pending \"reveal this slot\" intent, given current coverage. */\nexport type RevealAction =\n  /** The target hasn't been measured yet (e.g. its view just became active) — do nothing, wait for\n   *  the next coverage update. */\n  | 'wait'\n  /** The target is measured and obscured — reveal it (the consumer releases whatever covers it). */\n  | 'act'\n  /** Nothing to do (no intent, or the target is measured and already visible) — clear the intent. */\n  | 'clear';\n\n/**\n * Decide what to do about a pending reveal intent. This is the core of coverage-driven reveal: it\n * waits until the target slot has actually been measured, then tells the consumer to reveal it only\n * if it's obscured, and otherwise to settle. Pure and synchronous so it can be unit-tested and\n * called from an effect keyed on the reactive `coverage`.\n */\nexport const resolveRevealAction = (\n  revealSlot: SlotId | undefined,\n  coverage: SlotCoverage,\n): RevealAction => {\n  if (revealSlot === undefined) return 'clear';\n  if (!(revealSlot in coverage.obscured)) return 'wait';\n  return coverage.obscured[revealSlot] ? 'act' : 'clear';\n};\n\nexport type SlotGeometryContextValue = {\n  /** Clears a pending reveal intent (see {@link SlotGeometryContextValue.requestReveal}). */\n  clearReveal: () => void;\n  coverage: SlotCoverage;\n  /**\n   * Live, synchronous obscured check — measures the DOM at call time, so it is safe to call from\n   * event handlers where the reactive `coverage` snapshot might lag a layout change.\n   */\n  isObscured: (slot: SlotId) => boolean;\n  register: (slot: SlotId, element: HTMLElement | null) => void;\n  /**\n   * Record a one-shot intent to reveal `slot` after navigation. A consumer pairs this with\n   * `resolveRevealAction(revealSlot, coverage)` in an effect to release whatever covers the slot\n   * once it has been measured — the deferred, coverage-conditional reveal used across a view switch.\n   */\n  requestReveal: (slot: SlotId) => void;\n  /** The slot a consumer asked to reveal, or `undefined`. Reactive; resolve with `resolveRevealAction`. */\n  revealSlot: SlotId | undefined;\n};\n\nconst noopContextValue: SlotGeometryContextValue = {\n  clearReveal: () => undefined,\n  coverage: { obscured: {} },\n  isObscured: () => false,\n  register: () => undefined,\n  requestReveal: () => undefined,\n  revealSlot: undefined,\n};\n\nconst SlotGeometryContext = createContext<SlotGeometryContextValue>(noopContextValue);\n\nconst intersectionArea = (a: DOMRect, b: DOMRect) => {\n  const width = Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left));\n  const height = Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));\n  return width * height;\n};\n\n/**\n * @internal Exported for unit tests. A target is obscured when its own rendered box is ~0 area\n * (collapsed/hidden) or another element covers at least `COVER_THRESHOLD` of it.\n */\nexport const measureObscured = (target: HTMLElement, others: HTMLElement[]) => {\n  const rect = target.getBoundingClientRect();\n  const area = rect.width * rect.height;\n  if (area < MIN_VISIBLE_AREA) return true;\n  let maxCoveredFraction = 0;\n  for (const other of others) {\n    const fraction = intersectionArea(rect, other.getBoundingClientRect()) / area;\n    if (fraction > maxCoveredFraction) maxCoveredFraction = fraction;\n  }\n  return maxCoveredFraction >= COVER_THRESHOLD;\n};\n\nconst coverageChanged = (previous: SlotCoverage, next: Record<SlotId, boolean>) => {\n  const keys = new Set([...Object.keys(previous.obscured), ...Object.keys(next)]);\n  for (const key of keys) {\n    if (previous.obscured[key] !== next[key]) return true;\n  }\n  return false;\n};\n\nexport const SlotGeometryProvider = ({ children }: PropsWithChildren) => {\n  const elementsRef = useRef<Map<SlotId, HTMLElement>>(new Map());\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const rafRef = useRef<number | null>(null);\n  const [coverage, setCoverage] = useState<SlotCoverage>({ obscured: {} });\n  // A one-shot \"reveal this slot after navigation\" intent, scoped to this provider instance (no\n  // module-global state). A consumer resolves it against `coverage` via `resolveRevealAction`.\n  const [revealSlot, setRevealSlot] = useState<SlotId | undefined>(undefined);\n\n  const requestReveal = useCallback((slot: SlotId) => setRevealSlot(slot), []);\n  const clearReveal = useCallback(() => setRevealSlot(undefined), []);\n\n  const othersOf = (slot: SlotId) =>\n    [...elementsRef.current.entries()]\n      .filter(([id]) => id !== slot)\n      .map(([, element]) => element);\n\n  const isObscured = useCallback((slot: SlotId) => {\n    const element = elementsRef.current.get(slot);\n    if (!element) return false;\n    return measureObscured(element, othersOf(slot));\n  }, []);\n\n  const recompute = useCallback(() => {\n    const next: Record<SlotId, boolean> = {};\n    for (const [slot, element] of elementsRef.current.entries()) {\n      next[slot] = measureObscured(element, othersOf(slot));\n    }\n    setCoverage((previous) =>\n      coverageChanged(previous, next) ? { obscured: next } : previous,\n    );\n  }, []);\n\n  // Coalesce bursts of ResizeObserver/resize callbacks into one measurement per frame. This also\n  // keeps us clear of the \"ResizeObserver loop\" warning and avoids feedback churn: recompute only\n  // pushes new state when an obscured flag actually flips, which is a fixed point.\n  const scheduleRecompute = useCallback(() => {\n    if (typeof requestAnimationFrame === 'undefined') {\n      recompute();\n      return;\n    }\n    if (rafRef.current !== null) return;\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      recompute();\n    });\n  }, [recompute]);\n\n  const register = useCallback(\n    (slot: SlotId, element: HTMLElement | null) => {\n      const elements = elementsRef.current;\n      const previous = elements.get(slot);\n      if (previous && previous !== element) observerRef.current?.unobserve(previous);\n\n      if (element) {\n        elements.set(slot, element);\n        observerRef.current?.observe(element);\n      } else {\n        elements.delete(slot);\n      }\n      scheduleRecompute();\n    },\n    [scheduleRecompute],\n  );\n\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(() => scheduleRecompute());\n    observerRef.current = observer;\n    // Ref callbacks fire during commit (before this passive effect), so pick up anything that\n    // registered before the observer existed.\n    for (const element of elementsRef.current.values()) observer.observe(element);\n\n    const onResize = () => scheduleRecompute();\n    window.addEventListener('resize', onResize);\n    scheduleRecompute();\n\n    return () => {\n      observer.disconnect();\n      observerRef.current = null;\n      window.removeEventListener('resize', onResize);\n      if (rafRef.current !== null && typeof cancelAnimationFrame !== 'undefined') {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n    };\n  }, [scheduleRecompute]);\n\n  const value: SlotGeometryContextValue = {\n    clearReveal,\n    coverage,\n    isObscured,\n    register,\n    requestReveal,\n    revealSlot,\n  };\n\n  return (\n    <SlotGeometryContext.Provider value={value}>{children}</SlotGeometryContext.Provider>\n  );\n};\n\nexport const useSlotGeometry = () => useContext(SlotGeometryContext);\n\n/** Returns a stable callback ref that registers/unregisters the element backing `slot`. */\nexport const useRegisterSlotGeometry = (slot: SlotId) => {\n  const { register } = useSlotGeometry();\n  return useCallback(\n    (element: HTMLElement | null) => register(slot, element),\n    [register, slot],\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/SlotLayout/ChannelSlot.mjs

@@ -0,0 +1,30 @@
+import { WorkspacePanelProvider } from "../../context/WorkspaceNavigationContext.mjs";
+import { Channel } from "../../components/Channel/Channel.mjs";
+import { useSlotChannel } from "./hooks/useSlotEntity.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/plugins/SlotLayout/ChannelSlot.tsx
+/**
+* ChatView-aware channel adapter: renders the channel bound to `slot`.
+*
+* It only *displays* — it never adopts/moves a channel from another slot. Which
+* channel goes into which slot is decided by navigation (`open`). If your app
+* resolves channel instances directly from layout bindings (e.g. via custom
+* `slotRenderers`), render `<Channel channel={...} />` directly and skip this.
+*/
+var ChannelSlot = ({ children, fallback = null, slot, ...channelProps }) => {
+	const channel = useSlotChannel({ slot });
+	if (!channel) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+	return /* @__PURE__ */ jsx(WorkspacePanelProvider, {
+		panel: slot,
+		children: /* @__PURE__ */ jsx(Channel, {
+			...channelProps,
+			channel,
+			children
+		})
+	});
+};
+//#endregion
+export { ChannelSlot };
+
+//# sourceMappingURL=ChannelSlot.mjs.map

package/dist/es/plugins/SlotLayout/ChannelSlot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSlot.mjs","names":[],"sources":["../../../../src/plugins/SlotLayout/ChannelSlot.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useSlotChannel } from './hooks';\nimport { Channel as ChannelComponent, type ChannelProps } from '../../components/Channel';\nimport { WorkspacePanelProvider } from '../../context/WorkspaceNavigationContext';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\nimport type { SlotName } from './layoutController/layoutControllerTypes';\n\nexport type ChannelSlotProps = PropsWithChildren<\n  Omit<ChannelProps, 'channel'> & {\n    /** Rendered when no channel is bound to `slot`. */\n    fallback?: ReactNode;\n    /**\n     * The layout slot this adapter renders. Always pass an explicit `slot` — a\n     * generic list/workspace must be precise about which slot it displays (multiple\n     * channels can be open side by side). Omitting it falls back to the first\n     * channel slot and is only meaningful for a single-channel workspace.\n     */\n    slot?: SlotName;\n  }\n>;\n\n/**\n * ChatView-aware channel adapter: renders the channel bound to `slot`.\n *\n * It only *displays* — it never adopts/moves a channel from another slot. Which\n * channel goes into which slot is decided by navigation (`open`). If your app\n * resolves channel instances directly from layout bindings (e.g. via custom\n * `slotRenderers`), render `<Channel channel={...} />` directly and skip this.\n */\nexport const ChannelSlot = ({\n  children,\n  fallback = null,\n  slot,\n  ...channelProps\n}: ChannelSlotProps) => {\n  const channel = useSlotChannel({ slot });\n\n  if (!channel) return <>{fallback}</>;\n\n  return (\n    <WorkspacePanelProvider panel={slot}>\n      <ChannelComponent {...channelProps} channel={channel}>\n        {children}\n      </ChannelComponent>\n    </WorkspacePanelProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AA+BA,IAAa,eAAe,EAC1B,UACA,WAAW,MACX,MACA,GAAG,mBACmB;CACtB,MAAM,UAAU,eAAe,EAAE,KAAK,CAAC;CAEvC,IAAI,CAAC,SAAS,OAAO,oBAAA,YAAA,EAAA,UAAG,SAAW,CAAA;CAEnC,OACE,oBAAC,wBAAD;EAAwB,OAAO;YAC7B,oBAAC,SAAD;GAAkB,GAAI;GAAuB;GAC1C;EACe,CAAA;CACI,CAAA;AAE5B"}