stream-chat-react 14.6.1 → 14.8.0

package/dist/cjs/{useMessageComposerController.f1a3d182.js → useMessageComposerController.f8f20e3d.js}

@@ -1,4 +1,4 @@
-const require_useNotificationApi = require("./useNotificationApi.87ba0b39.js");
+const require_useNotificationApi = require("./useNotificationApi.bf76a16b.js");
 let react = require("react");
 react = require_useNotificationApi.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -96,4 +96,4 @@ Object.defineProperty(exports, "useMessageComposerController", {
 	}
 });
 
-//# sourceMappingURL=useMessageComposerController.f1a3d182.js.map
+//# sourceMappingURL=useMessageComposerController.f8f20e3d.js.map

package/dist/cjs/{useMessageComposerController.f1a3d182.js.map → useMessageComposerController.f8f20e3d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useMessageComposerController.f1a3d182.js","names":[],"sources":["../../src/context/MessageComposerContext.tsx","../../src/components/MessageComposer/hooks/useIsCooldownActive.ts","../../src/components/MessageComposer/hooks/useMessageComposerController.ts"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport type { MessageComposerProps } from '../components/MessageComposer';\nimport type { UseMessageComposerBindingsParams } from '../components/MessageComposer/hooks/useMessageComposerBindings';\n\nexport type MessageComposerContextValue = UseMessageComposerBindingsParams &\n  Omit<MessageComposerProps, 'Input'>;\n\nexport const MessageComposerContext = createContext<\n  UseMessageComposerBindingsParams | undefined\n>(undefined);\n\nexport const MessageComposerContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: MessageComposerContextValue;\n}>) => (\n  <MessageComposerContext.Provider\n    value={value as unknown as MessageComposerContextValue}\n  >\n    {children}\n  </MessageComposerContext.Provider>\n);\n\nexport const useMessageComposerContext = (\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  componentName?: string,\n) => {\n  const contextValue = useContext(MessageComposerContext);\n\n  if (!contextValue) {\n    return {} as MessageComposerContextValue;\n  }\n\n  return contextValue as unknown as MessageComposerContextValue;\n};\n","import { useChannelStateContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { CooldownTimerState } from 'stream-chat';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  isCooldownActive: !!state.cooldownRemaining,\n});\n\nexport const useIsCooldownActive = () => {\n  const { channel } = useChannelStateContext();\n  return useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n    .isCooldownActive;\n};\n","import { useEffect, useMemo } from 'react';\nimport { MessageComposer as MessageComposerController } from 'stream-chat';\nimport { useThreadContext } from '../../Threads';\nimport { useChannelStateContext, useChatContext } from '../../../context';\nimport { useLegacyThreadContext } from '../../Thread';\n\nexport const useMessageComposerController = () => {\n  const { client } = useChatContext();\n  const { messageComposerCache: queueCache } = client;\n  const { channel } = useChannelStateContext();\n  const { legacyThread: parentMessage } = useLegacyThreadContext();\n  const threadInstance = useThreadContext();\n\n  const cachedParentMessage = useMemo(() => {\n    if (!parentMessage) return undefined;\n\n    return parentMessage;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentMessage?.id]);\n\n  // composer hierarchy\n  // edited message (always new) -> thread instance (own) -> thread message (always new) -> channel (own)\n  // editedMessage ?? thread ?? parentMessage ?? channel;\n  const messageComposer = useMemo(() => {\n    if (threadInstance) {\n      return threadInstance.messageComposer;\n    } else if (cachedParentMessage) {\n      const compositionContext = {\n        ...cachedParentMessage,\n        legacyThreadId: cachedParentMessage.id,\n      };\n\n      const tag = MessageComposerController.constructTag(compositionContext);\n\n      const cachedComposer = queueCache.get(tag);\n      if (cachedComposer) return cachedComposer;\n\n      return new MessageComposerController({\n        client,\n        compositionContext,\n      });\n    } else {\n      return channel.messageComposer;\n    }\n  }, [cachedParentMessage, channel, client, queueCache, threadInstance]);\n\n  if (\n    (['legacy_thread', 'message'] as MessageComposerController['contextType'][]).includes(\n      messageComposer.contextType,\n    ) &&\n    !queueCache.peek(messageComposer.tag)\n  ) {\n    queueCache.add(messageComposer.tag, messageComposer);\n  }\n\n  useEffect(() => {\n    const unsubscribe = messageComposer.registerSubscriptions();\n    return () => {\n      unsubscribe();\n    };\n  }, [messageComposer]);\n\n  return messageComposer;\n};\n"],"mappings":";;;;;;AASA,IAAa,0BAAA,GAAA,MAAA,cAAA,CAEX,KAAA,CAAS;AAEX,IAAa,kCAAkC,EAC7C,UACA,YAIA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAuB,UAAxB;CACS;CAEN;AAC8B,CAAA;AAGnC,IAAa,6BAEX,kBACG;CACH,MAAM,gBAAA,GAAA,MAAA,WAAA,CAA0B,sBAAsB;CAEtD,IAAI,CAAC,cACH,OAAO,CAAC;CAGV,OAAO;AACT;;;ACjCA,IAAM,8BAA8B,WAA+B,EACjE,kBAAkB,CAAC,CAAC,MAAM,kBAC5B;AAEA,IAAa,4BAA4B;CACvC,MAAM,EAAE,YAAY,2BAAA,uBAAuB;CAC3C,OAAO,2BAAA,cAAc,QAAQ,cAAc,OAAO,0BAA0B,CAAC,CAC1E;AACL;;;ACNA,IAAa,qCAAqC;CAChD,MAAM,EAAE,WAAW,2BAAA,eAAe;CAClC,MAAM,EAAE,sBAAsB,eAAe;CAC7C,MAAM,EAAE,YAAY,2BAAA,uBAAuB;CAC3C,MAAM,EAAE,cAAc,kBAAkB,2BAAA,uBAAuB;CAC/D,MAAM,iBAAiB,2BAAA,iBAAiB;CAExC,MAAM,uBAAA,GAAA,MAAA,QAAA,OAAoC;EACxC,IAAI,CAAC,eAAe,OAAO,KAAA;EAE3B,OAAO;CAET,GAAG,CAAC,eAAe,EAAE,CAAC;CAKtB,MAAM,mBAAA,GAAA,MAAA,QAAA,OAAgC;EACpC,IAAI,gBACF,OAAO,eAAe;OACjB,IAAI,qBAAqB;GAC9B,MAAM,qBAAqB;IACzB,GAAG;IACH,gBAAgB,oBAAoB;GACtC;GAEA,MAAM,MAAM,YAAA,gBAA0B,aAAa,kBAAkB;GAErE,MAAM,iBAAiB,WAAW,IAAI,GAAG;GACzC,IAAI,gBAAgB,OAAO;GAE3B,OAAO,IAAI,YAAA,gBAA0B;IACnC;IACA;GACF,CAAC;EACH,OACE,OAAO,QAAQ;CAEnB,GAAG;EAAC;EAAqB;EAAS;EAAQ;EAAY;CAAc,CAAC;CAErE,IACG,CAAC,iBAAiB,SAAS,CAAC,CAAgD,SAC3E,gBAAgB,WAClB,KACA,CAAC,WAAW,KAAK,gBAAgB,GAAG,GAEpC,WAAW,IAAI,gBAAgB,KAAK,eAAe;CAGrD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,cAAc,gBAAgB,sBAAsB;EAC1D,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,OAAO;AACT"}
+{"version":3,"file":"useMessageComposerController.f8f20e3d.js","names":[],"sources":["../../src/context/MessageComposerContext.tsx","../../src/components/MessageComposer/hooks/useIsCooldownActive.ts","../../src/components/MessageComposer/hooks/useMessageComposerController.ts"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport type { MessageComposerProps } from '../components/MessageComposer';\nimport type { UseMessageComposerBindingsParams } from '../components/MessageComposer/hooks/useMessageComposerBindings';\n\nexport type MessageComposerContextValue = UseMessageComposerBindingsParams &\n  Omit<MessageComposerProps, 'Input'>;\n\nexport const MessageComposerContext = createContext<\n  UseMessageComposerBindingsParams | undefined\n>(undefined);\n\nexport const MessageComposerContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: MessageComposerContextValue;\n}>) => (\n  <MessageComposerContext.Provider\n    value={value as unknown as MessageComposerContextValue}\n  >\n    {children}\n  </MessageComposerContext.Provider>\n);\n\nexport const useMessageComposerContext = (\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  componentName?: string,\n) => {\n  const contextValue = useContext(MessageComposerContext);\n\n  if (!contextValue) {\n    return {} as MessageComposerContextValue;\n  }\n\n  return contextValue as unknown as MessageComposerContextValue;\n};\n","import { useChannelStateContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { CooldownTimerState } from 'stream-chat';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  isCooldownActive: !!state.cooldownRemaining,\n});\n\nexport const useIsCooldownActive = () => {\n  const { channel } = useChannelStateContext();\n  return useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n    .isCooldownActive;\n};\n","import { useEffect, useMemo } from 'react';\nimport { MessageComposer as MessageComposerController } from 'stream-chat';\nimport { useThreadContext } from '../../Threads';\nimport { useChannelStateContext, useChatContext } from '../../../context';\nimport { useLegacyThreadContext } from '../../Thread';\n\nexport const useMessageComposerController = () => {\n  const { client } = useChatContext();\n  const { messageComposerCache: queueCache } = client;\n  const { channel } = useChannelStateContext();\n  const { legacyThread: parentMessage } = useLegacyThreadContext();\n  const threadInstance = useThreadContext();\n\n  const cachedParentMessage = useMemo(() => {\n    if (!parentMessage) return undefined;\n\n    return parentMessage;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentMessage?.id]);\n\n  // composer hierarchy\n  // edited message (always new) -> thread instance (own) -> thread message (always new) -> channel (own)\n  // editedMessage ?? thread ?? parentMessage ?? channel;\n  const messageComposer = useMemo(() => {\n    if (threadInstance) {\n      return threadInstance.messageComposer;\n    } else if (cachedParentMessage) {\n      const compositionContext = {\n        ...cachedParentMessage,\n        legacyThreadId: cachedParentMessage.id,\n      };\n\n      const tag = MessageComposerController.constructTag(compositionContext);\n\n      const cachedComposer = queueCache.get(tag);\n      if (cachedComposer) return cachedComposer;\n\n      return new MessageComposerController({\n        client,\n        compositionContext,\n      });\n    } else {\n      return channel.messageComposer;\n    }\n  }, [cachedParentMessage, channel, client, queueCache, threadInstance]);\n\n  if (\n    (['legacy_thread', 'message'] as MessageComposerController['contextType'][]).includes(\n      messageComposer.contextType,\n    ) &&\n    !queueCache.peek(messageComposer.tag)\n  ) {\n    queueCache.add(messageComposer.tag, messageComposer);\n  }\n\n  useEffect(() => {\n    const unsubscribe = messageComposer.registerSubscriptions();\n    return () => {\n      unsubscribe();\n    };\n  }, [messageComposer]);\n\n  return messageComposer;\n};\n"],"mappings":";;;;;;AASA,IAAa,0BAAA,GAAA,MAAA,cAAA,CAEX,KAAA,CAAS;AAEX,IAAa,kCAAkC,EAC7C,UACA,YAIA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAuB,UAAxB;CACS;CAEN;AAC8B,CAAA;AAGnC,IAAa,6BAEX,kBACG;CACH,MAAM,gBAAA,GAAA,MAAA,WAAA,CAA0B,sBAAsB;CAEtD,IAAI,CAAC,cACH,OAAO,CAAC;CAGV,OAAO;AACT;;;ACjCA,IAAM,8BAA8B,WAA+B,EACjE,kBAAkB,CAAC,CAAC,MAAM,kBAC5B;AAEA,IAAa,4BAA4B;CACvC,MAAM,EAAE,YAAY,2BAAA,uBAAuB;CAC3C,OAAO,2BAAA,cAAc,QAAQ,cAAc,OAAO,0BAA0B,CAAC,CAC1E;AACL;;;ACNA,IAAa,qCAAqC;CAChD,MAAM,EAAE,WAAW,2BAAA,eAAe;CAClC,MAAM,EAAE,sBAAsB,eAAe;CAC7C,MAAM,EAAE,YAAY,2BAAA,uBAAuB;CAC3C,MAAM,EAAE,cAAc,kBAAkB,2BAAA,uBAAuB;CAC/D,MAAM,iBAAiB,2BAAA,iBAAiB;CAExC,MAAM,uBAAA,GAAA,MAAA,QAAA,OAAoC;EACxC,IAAI,CAAC,eAAe,OAAO,KAAA;EAE3B,OAAO;CAET,GAAG,CAAC,eAAe,EAAE,CAAC;CAKtB,MAAM,mBAAA,GAAA,MAAA,QAAA,OAAgC;EACpC,IAAI,gBACF,OAAO,eAAe;OACjB,IAAI,qBAAqB;GAC9B,MAAM,qBAAqB;IACzB,GAAG;IACH,gBAAgB,oBAAoB;GACtC;GAEA,MAAM,MAAM,YAAA,gBAA0B,aAAa,kBAAkB;GAErE,MAAM,iBAAiB,WAAW,IAAI,GAAG;GACzC,IAAI,gBAAgB,OAAO;GAE3B,OAAO,IAAI,YAAA,gBAA0B;IACnC;IACA;GACF,CAAC;EACH,OACE,OAAO,QAAQ;CAEnB,GAAG;EAAC;EAAqB;EAAS;EAAQ;EAAY;CAAc,CAAC;CAErE,IACG,CAAC,iBAAiB,SAAS,CAAC,CAAgD,SAC3E,gBAAgB,WAClB,KACA,CAAC,WAAW,KAAK,gBAAgB,GAAG,GAEpC,WAAW,IAAI,gBAAgB,KAAK,eAAe;CAGrD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,cAAc,gBAAgB,sBAAsB;EAC1D,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,OAAO;AACT"}

package/dist/cjs/{useNotificationApi.87ba0b39.js → useNotificationApi.bf76a16b.js}

@@ -697,6 +697,92 @@ var useTypingContext = (componentName) => {
 	return contextValue;
 };
 //#endregion
+//#region src/components/Accessibility/useAriaLiveAnnouncer.ts
+var noopAnnounce = () => () => void 0;
+var AriaLiveAnnouncerContext = (0, react.createContext)(void 0);
+var useAriaLiveAnnouncer = () => {
+	const contextValue = (0, react.useContext)(AriaLiveAnnouncerContext);
+	if (!contextValue) {
+		console.warn("The useAriaLiveAnnouncer hook was called outside of an AriaLiveAnnouncerProvider.");
+		return noopAnnounce;
+	}
+	return contextValue.announce;
+};
+//#endregion
+//#region src/components/Accessibility/scheduling/useDebouncedAnnounce.ts
+/**
+* L2 scheduling policy: a per-key debounce over the provided `announce` (from
+* `useAriaLiveAnnouncer`). Keeps an independent timer per `key` and takes the delay per call, so
+* distinct rapidly-updating streams can coexist with different debounce windows without clobbering
+* one another (e.g. the autocomplete count, which is a consequence of typing and wants a longer
+* window to clear the screen reader's typing echo, vs. some other future debounced stream). For a
+* single stream, use a constant key.
+*
+* React 17/18/19 compatible — `useCallback`/`useRef`/`useEffect` only. All pending timers are
+* cleared on unmount.
+*
+* ## When to use this vs. {@link useSettledAnnouncement}
+*
+* Both wait out screen-reader noise (the typing echo / field re-read) before speaking, but they
+* model different problems:
+*
+* - **`useDebouncedAnnounce` — an imperative throttle for a value you announce REPEATEDLY.** You
+*   call `announce(key, message, ...)` yourself whenever you have a fresh value (from an event
+*   handler or effect); rapid calls on a key collapse to the last one. The message typically
+*   *changes* each time, it can fire *again and again* (once per pause), and you drive it. Canonical
+*   case: the autocomplete result count re-announced as the user keeps typing. It has no notion of
+*   "active", "once", or re-arming — it just throttles whatever you push through it.
+*
+* - **{@link useSettledAnnouncement} — a declarative ONE-SHOT cue for a state change.** You pass
+*   `{ active, message, settleKey }`; it announces *once* when `active`, deferred until `settleKey`
+*   stops changing, then stays silent until `active` flips back and forth. The message is fixed and
+*   the point is "say this single fact once the UI settles", not "announce the latest value".
+*
+* | | `useDebouncedAnnounce` | `useSettledAnnouncement` |
+* | --- | --- | --- |
+* | Style | Imperative — you call `announce(key, …)` | Declarative — reacts to `{ active, message, settleKey }` |
+* | Repetition | Fires repeatedly, once per pause | Once per `active` epoch (re-arms on reset) |
+* | Message | Typically changes each time | Fixed fact |
+* | Timer reset | Each explicit call | Each `settleKey` change |
+* | Streams | Many, independent per `key` | One logical cue |
+* | Canonical case | Autocomplete count while typing | "Controls just became available" |
+*
+* Rule of thumb: announcing the **latest value of a changing thing** → this hook. Announcing a
+* **fixed fact once, after things settle** → `useSettledAnnouncement`.
+*/
+var useDebouncedAnnounce = (announce) => {
+	const timersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const announceRef = (0, react.useRef)(announce);
+	announceRef.current = announce;
+	const cancel = (0, react.useCallback)((key) => {
+		const timers = timersRef.current;
+		if (key === void 0) {
+			timers.forEach((timerId) => clearTimeout(timerId));
+			timers.clear();
+			return;
+		}
+		const timerId = timers.get(key);
+		if (timerId !== void 0) {
+			clearTimeout(timerId);
+			timers.delete(key);
+		}
+	}, []);
+	(0, react.useEffect)(() => () => cancel(), [cancel]);
+	return {
+		announce: (0, react.useCallback)((key, message, delayMs, priority) => {
+			const timers = timersRef.current;
+			const existing = timers.get(key);
+			if (existing !== void 0) clearTimeout(existing);
+			const timerId = setTimeout(() => {
+				timers.delete(key);
+				announceRef.current(message, { priority });
+			}, delayMs);
+			timers.set(key, timerId);
+		}, []),
+		cancel
+	};
+};
+//#endregion
 //#region src/components/Notifications/notificationTarget.ts
 var NOTIFICATION_TARGET_PANELS = [
 	"channel",
@@ -2722,6 +2808,168 @@ var audioPlayerNotificationsPluginFactory = ({ addNotification, panel = "channel
 	};
 };
 //#endregion
+//#region src/components/Accessibility/hooks/useInteractionAnnouncements.ts
+/**
+* One entry per interaction — the single place an interaction is registered. Each
+* resolver contains a LITERAL `t('aria/…')` call so that `i18next-cli extract`
+* (run via `yarn build-translations`) discovers and generates the key across all
+* locales. Keys must never be built dynamically (e.g. `t(someVariable)`) or
+* extraction silently misses them. Adding an interaction = one line here + one
+* line in {@link InteractionAnnouncementParams} (+ an override in
+* {@link INTERACTION_PRIORITIES} only if it is not `polite`).
+*/
+var INTERACTION_MESSAGES = {
+	"audioPlayer.playbackRateChanged": (t, params) => t("Playback speed {{ rate }}x", { rate: params.rate }),
+	"channel.opened": (t, params) => t("aria/Opened channel: {{ name }}", { name: params.name }),
+	"command.selected": (t, params) => t("aria/Command activated: {{ command }}", { command: params.command }),
+	"giphy.canceled": (t) => t("aria/Giphy canceled"),
+	"giphy.sent": (t) => t("aria/Giphy sent"),
+	"giphy.shuffled": (t, params) => params.title ? t("aria/Giphy image changed: {{ title }}", { title: params.title }) : t("aria/Giphy image changed"),
+	"poll.dialogOpened": (t) => `${t("aria/Poll dialog opened")}. ${t("Create a question, add options, and configure poll settings")}. ${t("aria/Press Enter to start typing")}.`,
+	"poll.optionDropped": (t, params) => t("aria/Dropped \"{{ option }}\" at position {{ position }}.", {
+		option: params.option,
+		position: params.position
+	}),
+	"poll.optionPickedUp": (t, params) => t("aria/Picked up \"{{ option }}\". Use arrow keys to reorder. Press Space or Tab to drop.", { option: params.option }),
+	"poll.optionRemoved": (t, params) => t("aria/Removed option {{ option }}", { option: params.option }),
+	"poll.sent": (t) => t("aria/Poll sent"),
+	"search.cleared": (t) => t("aria/Search cleared"),
+	"search.resultCount": (t, params) => {
+		if (params.count <= 0) return t("aria/No search results found");
+		const count = t("aria/{{ count }} search results", { count: params.count });
+		return params.allResultsLoaded ? `${count}. ${t("All results loaded")}` : count;
+	},
+	"suggestions.count": (t, params) => params.suggestionsLabel ? t("aria/{{ count }} {{ suggestionsLabel }}", {
+		count: params.count,
+		suggestionsLabel: params.suggestionsLabel
+	}) : t("aria/{{ count }} suggestions", { count: params.count }),
+	"thread.opened": (t, params) => t("aria/Opened thread in {{ name }}", { name: params.name }),
+	"user.selected": (t, params) => t("aria/User selected: {{ user }}", { user: params.user }),
+	"voiceRecording.attached": (t) => t("aria/Voice recording attached"),
+	"voiceRecording.paused": (t) => t("aria/Recording paused"),
+	"voiceRecording.resumed": (t) => t("aria/Recording resumed"),
+	"voiceRecording.sent": (t) => t("aria/Voice message sent"),
+	"voiceRecording.started": (t) => t("aria/Recording started")
+};
+/**
+* Per-interaction aria-live priority. Interactions default to `polite`; list one
+* here only to override it (e.g. with `assertive`).
+*/
+var INTERACTION_PRIORITIES = {
+	"poll.dialogOpened": "assertive",
+	"poll.optionDropped": "assertive",
+	"poll.optionPickedUp": "assertive"
+};
+/**
+* Per-interaction dedupe window (ms): an identical message for this interaction is announced at
+* most once per window (see {@link AriaLiveAnnounceOptions.dedupeMs}). List an interaction here
+* only when the SAME open/mount can fire it more than once in quick succession — e.g. a mount
+* effect double-invoked by React StrictMode (dev) — so the user does not hear a duplicate.
+*/
+var INTERACTION_DEDUPE_MS = {
+	"audioPlayer.playbackRateChanged": 300,
+	"poll.dialogOpened": 1e3
+};
+/**
+* Default per-interaction debounce delay (ms). Only list rapidly-updating streams where just the
+* settled value should be read (e.g. the autocomplete count as the query filters). Discrete
+* confirmations (Giphy/Poll sent, user selected) are NOT listed and announce immediately. A call
+* site can override (or opt into) a delay for a single call via `params.debounceMs` — see
+* {@link InteractionDeliveryOptions}.
+*
+* `suggestions.count` is a CONSEQUENCE OF TYPING, so the delay does double duty: it coalesces
+* rapid filters into the settled value AND lets the screen reader's per-keystroke typing echo
+* (the spoken character + field re-read) finish first. A polite update that lands mid-echo gets
+* queued behind a long re-read and is perceived as buried; waiting past the echo makes the count
+* the next thing spoken once the user pauses. This is a heuristic — echo length varies with the
+* SR's "speak typed words/characters" setting and field content — so tune if it still collides.
+*/
+var INTERACTION_DEBOUNCE_MS = {
+	"search.resultCount": 1e3,
+	"suggestions.count": 500
+};
+/**
+* Default per-interaction delay (ms) for the immediate (non-debounced) path — a single deferred
+* emit scheduled in the announcer PROVIDER (see {@link AriaLiveAnnounceOptions.delayMs}), so it
+* SURVIVES the calling component unmounting (unlike a debounce, whose timer is cleared on unmount).
+*
+* Opening a channel/thread moves focus to the (auto-focusing) message composer; the screen reader
+* announces that newly-focused element first, and a live-region message emitted alongside it is
+* superseded and dropped. The delay defers the confirmation past that focus read-out so it is spoken
+* next, in a calm moment. It is a provider delay rather than a debounce specifically because
+* selecting the item can unmount its list row (and the whole list, on mobile) — a per-row debounce
+* would be cancelled mid-flight, swallowing the confirmation.
+*/
+var INTERACTION_DELAY_MS = {
+	"channel.opened": 1500,
+	"command.selected": 1500,
+	"thread.opened": 1500
+};
+/**
+* Thin, typed wrapper over the aria-live announcer exposing intention-revealing
+* helpers for transient, user-initiated UI interactions (e.g. a Giphy being
+* sent, a poll being created, a mention being picked). They map to i18n keys with
+* baked-in priorities and reuse the existing live region via
+* {@link useAriaLiveAnnouncer}. New interactions are registered as a single entry
+* in {@link INTERACTION_MESSAGES}.
+*/
+var useInteractionAnnouncements = () => {
+	const announce = useAriaLiveAnnouncer();
+	const { t } = useTranslationContext();
+	const { announce: announceDebounced, cancel: cancelDebounced } = useDebouncedAnnounce(announce);
+	const pendingImmediateCancelsRef = (0, react.useRef)({});
+	return (0, react.useMemo)(() => ({
+		announceInteraction: (interaction, params) => {
+			const resolveMessage = INTERACTION_MESSAGES[interaction];
+			if (!resolveMessage) return;
+			const message = resolveMessage(t, params);
+			const priority = INTERACTION_PRIORITIES[interaction] ?? "polite";
+			const debounceMs = params?.debounceMs ?? INTERACTION_DEBOUNCE_MS[interaction];
+			if (debounceMs === void 0) {
+				const delayMs = params?.delayMs ?? INTERACTION_DELAY_MS[interaction];
+				pendingImmediateCancelsRef.current[interaction]?.();
+				pendingImmediateCancelsRef.current[interaction] = announce(message, {
+					dedupeMs: INTERACTION_DEDUPE_MS[interaction],
+					delayMs,
+					priority
+				});
+				return;
+			}
+			announceDebounced(interaction, message, debounceMs, priority);
+		},
+		cancelInteraction: (interaction) => {
+			cancelDebounced(interaction);
+			const pending = pendingImmediateCancelsRef.current;
+			if (interaction) {
+				pending[interaction]?.();
+				delete pending[interaction];
+			} else {
+				Object.values(pending).forEach((cancel) => cancel?.());
+				pendingImmediateCancelsRef.current = {};
+			}
+		}
+	}), [
+		announce,
+		announceDebounced,
+		cancelDebounced,
+		t
+	]);
+};
+//#endregion
+//#region src/components/Accessibility/hooks/useAudioPlaybackChangeAnnouncements.ts
+var playbackRateSelector = (state) => ({ currentPlaybackRate: state.currentPlaybackRate });
+var useAudioPlaybackChangeAnnouncements = (audioPlayer) => {
+	const { announceInteraction } = useInteractionAnnouncements();
+	const { currentPlaybackRate } = useStateStore(audioPlayer?.state, playbackRateSelector) ?? {};
+	const previousPlaybackRateRef = (0, react.useRef)(currentPlaybackRate);
+	(0, react.useEffect)(() => {
+		const previous = previousPlaybackRateRef.current;
+		previousPlaybackRateRef.current = currentPlaybackRate;
+		if (currentPlaybackRate === void 0 || previous === void 0 || previous === currentPlaybackRate) return;
+		announceInteraction("audioPlayer.playbackRateChanged", { rate: currentPlaybackRate });
+	}, [announceInteraction, currentPlaybackRate]);
+};
+//#endregion
 //#region src/components/AudioPlayback/WithAudioPlayback.tsx
 var AudioPlayerContext = react.default.createContext({ audioPlayers: null });
 var WithAudioPlayback = ({ allowConcurrentPlayback, children }) => {
@@ -2754,6 +3002,7 @@ var useAudioPlayer = ({ durationSeconds, fileSize, mimeType, playbackRates, plug
 		title,
 		waveformData
 	}) : void 0;
+	useAudioPlaybackChangeAnnouncements(audioPlayer);
 	(0, react.useEffect)(() => {
 		if (!audioPlayer) return;
 		/**
@@ -3848,32 +4097,21 @@ var ThreadProvider = ({ children, thread }) => /* @__PURE__ */ (0, react_jsx_run
 var UnreadCountBadge = ({ children, count, position }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "str-chat__unread-count-badge-container",
 	children: [children, count > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
 		className: (0, clsx.default)("str-chat__unread-count-badge", position && `str-chat__unread-count-badge--${position}`),
 		children: count
 	})]
 });
 //#endregion
 //#region src/components/ChatView/ChatView.a11y.utility.ts
-var DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE = {
-	chatViewPanelIds: {
-		channels: "str-chat__chat-view-panel-channels",
-		threads: "str-chat__chat-view-panel-threads"
-	},
-	chatViewTabIds: {
-		channels: "str-chat__chat-view-tab-channels",
-		threads: "str-chat__chat-view-tab-threads"
-	}
-};
-var createChatViewA11yContextValue = (chatViewId) => ({
-	chatViewPanelIds: {
-		channels: `str-chat__chat-view-${chatViewId}-panel-channels`,
-		threads: `str-chat__chat-view-${chatViewId}-panel-threads`
-	},
-	chatViewTabIds: {
-		channels: `str-chat__chat-view-${chatViewId}-tab-channels`,
-		threads: `str-chat__chat-view-${chatViewId}-tab-threads`
-	}
-});
+var DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE = { chatViewPanelIds: {
+	channels: "str-chat__chat-view-panel-channels",
+	threads: "str-chat__chat-view-panel-threads"
+} };
+var createChatViewA11yContextValue = (chatViewId) => ({ chatViewPanelIds: {
+	channels: `str-chat__chat-view-${chatViewId}-panel-channels`,
+	threads: `str-chat__chat-view-${chatViewId}-panel-threads`
+} });
 //#endregion
 //#region src/components/ChatView/ChatView.tsx
 var ChatViewContext = (0, react.createContext)(void 0);
@@ -3909,13 +4147,11 @@ var ChatView = ({ children }) => {
 };
 var ChannelsView = ({ children }) => {
 	const { activeChatView } = useChatViewContext();
-	const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
+	const { chatViewPanelIds } = useChatViewA11yContext();
 	if (!(activeChatView === "channels")) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"aria-labelledby": chatViewTabIds.channels,
 		className: "str-chat__chat-view__channels",
 		id: chatViewPanelIds.channels,
-		role: "tabpanel",
 		children
 	});
 };
@@ -3926,7 +4162,7 @@ var ThreadsViewContext = (0, react.createContext)({
 var useThreadsViewContext = () => (0, react.useContext)(ThreadsViewContext);
 var ThreadsView = ({ children }) => {
 	const { activeChatView } = useChatViewContext();
-	const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
+	const { chatViewPanelIds } = useChatViewA11yContext();
 	const [activeThread, setActiveThread] = (0, react.useState)(void 0);
 	const value = (0, react.useMemo)(() => ({
 		activeThread,
@@ -3936,10 +4172,8 @@ var ThreadsView = ({ children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadsViewContext.Provider, {
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"aria-labelledby": chatViewTabIds.threads,
 			className: "str-chat__chat-view__threads",
 			id: chatViewPanelIds.threads,
-			role: "tabpanel",
 			children
 		})
 	});
@@ -4005,9 +4239,9 @@ var ChatViewSelectorButton = ({ ActiveIcon, children, className, Icon, iconOnly
 		className: "str-chat__chat-view__selector-button-container",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 			appearance: "ghost",
+			"aria-current": isActive || void 0,
 			"aria-label": props["aria-label"] ?? (shouldShowTooltip ? text : void 0),
 			className: (0, clsx.default)("str-chat__chat-view__selector-button", className),
-			role: "tab",
 			variant: "secondary",
 			...props,
 			children: [children ?? (SelectorIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectorIcon, {})), !iconOnly && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4028,20 +4262,16 @@ var threadAdapterSelector = ({ pagination, ready }) => ({
 var unreadThreadCountSelector = ({ unreadThreadCount }) => ({ unreadThreadCount });
 var ChatViewChannelsSelectorButton = ({ iconOnly = true }) => {
 	const { activeChatView, setActiveChatView } = useChatViewContext();
-	const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
 	const { t } = useTranslationContext();
 	const isActive = activeChatView === "channels";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewSelectorButton, {
 		ActiveIcon: IconMessageBubbleFill,
-		"aria-controls": chatViewPanelIds.channels,
-		"aria-selected": isActive,
+		"aria-label": t("aria/Open channels view"),
 		Icon: IconMessageBubble,
 		iconOnly,
-		id: chatViewTabIds.channels,
 		isActive,
 		onClick: () => setActiveChatView("channels"),
 		onPointerDown: () => setActiveChatView("channels"),
-		tabIndex: 0,
 		text: t("Channels")
 	});
 };
@@ -4049,20 +4279,16 @@ var ChatViewThreadsSelectorButton = ({ iconOnly = true }) => {
 	const { client } = useChatContext();
 	const { unreadThreadCount } = useStateStore(client.threads.state, unreadThreadCountSelector) ?? { unreadThreadCount: 0 };
 	const { activeChatView, setActiveChatView } = useChatViewContext();
-	const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
 	const { t } = useTranslationContext();
 	const isActive = activeChatView === "threads";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewSelectorButton, {
 		ActiveIcon: IconThreadFill,
-		"aria-controls": chatViewPanelIds.threads,
-		"aria-selected": isActive,
+		"aria-label": unreadThreadCount > 0 ? t("aria/Open threads view with unread threads", { count: unreadThreadCount }) : t("aria/Open threads view"),
 		Icon: IconThread,
 		iconOnly,
-		id: chatViewTabIds.threads,
 		isActive,
 		onClick: () => setActiveChatView("threads"),
 		onPointerDown: () => setActiveChatView("threads"),
-		tabIndex: 0,
 		text: t("Threads"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnreadCountBadge, {
 			count: unreadThreadCount,
@@ -4081,9 +4307,9 @@ var defaultChatViewSelectorItemSet = [{
 var ChatViewSelector = ({ iconOnly = true, itemSet = defaultChatViewSelectorItemSet }) => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"aria-label": t("aria/Chat view tabs"),
+		"aria-label": t("aria/Chat view controls"),
 		className: "str-chat__chat-view__selector",
-		role: "tablist",
+		role: "navigation",
 		children: itemSet.map(({ Component, type }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { iconOnly }, type))
 	});
 };
@@ -4141,7 +4367,7 @@ var useNotificationApi = () => {
 	const inferredPanel = useNotificationTarget();
 	const modalManagerHasOpenDialog = useStateStore(useModalDialogManager()?.state, modalDialogManagerStateSelector)?.hasOpenDialog ?? false;
 	return {
-		addNotification: (0, react.useCallback)(({ actions, context, duration, emitter, error, incident, message, severity, tags, targetPanels, type }) => {
+		addNotification: (0, react.useCallback)(({ actions, ariaLive, context, duration, emitter, error, incident, message, severity, tags, targetPanels, type }) => {
 			const notificationTags = getTargetTags(targetPanels, inferredPanel, tags, modalManagerHasOpenDialog);
 			const resolvedType = getTypeFromIncident({
 				incident,
@@ -4156,6 +4382,7 @@ var useNotificationApi = () => {
 				...actions ? { actions } : {},
 				...typeof duration === "number" ? { duration } : {},
 				...error ? { originalError: error } : {},
+				...ariaLive ? { metadata: { ariaLive } } : {},
 				...notificationTags.length > 0 ? { tags: notificationTags } : {},
 				...severity ? { severity } : {},
 				...resolvedType ? { type: resolvedType } : {}
@@ -4170,7 +4397,7 @@ var useNotificationApi = () => {
 			inferredPanel,
 			modalManagerHasOpenDialog
 		]),
-		addSystemNotification: (0, react.useCallback)(({ actions, context, duration, emitter, error, incident, message, severity, tags, type }) => {
+		addSystemNotification: (0, react.useCallback)(({ actions, ariaLive, context, duration, emitter, error, incident, message, severity, tags, type }) => {
 			const notificationTags = Array.from(/* @__PURE__ */ new Set([SYSTEM_NOTIFICATION_TAG, ...tags ?? []]));
 			const resolvedType = getTypeFromIncident({
 				incident,
@@ -4185,6 +4412,7 @@ var useNotificationApi = () => {
 				...actions ? { actions } : {},
 				...typeof duration === "number" ? { duration } : {},
 				...error ? { originalError: error } : {},
+				...ariaLive ? { metadata: { ariaLive } } : {},
 				...notificationTags.length > 0 ? { tags: notificationTags } : {},
 				...severity ? { severity } : {},
 				...resolvedType ? { type: resolvedType } : {}
@@ -4210,6 +4438,12 @@ Object.defineProperty(exports, "ACTIONS_NOT_WORKING_IN_THREAD", {
 		return ACTIONS_NOT_WORKING_IN_THREAD;
 	}
 });
+Object.defineProperty(exports, "AriaLiveAnnouncerContext", {
+	enumerable: true,
+	get: function() {
+		return AriaLiveAnnouncerContext;
+	}
+});
 Object.defineProperty(exports, "AudioPlayer", {
 	enumerable: true,
 	get: function() {
@@ -5314,6 +5548,12 @@ Object.defineProperty(exports, "useActiveThread", {
 		return useActiveThread;
 	}
 });
+Object.defineProperty(exports, "useAriaLiveAnnouncer", {
+	enumerable: true,
+	get: function() {
+		return useAriaLiveAnnouncer;
+	}
+});
 Object.defineProperty(exports, "useAudioPlayer", {
 	enumerable: true,
 	get: function() {
@@ -5356,6 +5596,12 @@ Object.defineProperty(exports, "useComponentContext", {
 		return useComponentContext;
 	}
 });
+Object.defineProperty(exports, "useDebouncedAnnounce", {
+	enumerable: true,
+	get: function() {
+		return useDebouncedAnnounce;
+	}
+});
 Object.defineProperty(exports, "useDialog", {
 	enumerable: true,
 	get: function() {
@@ -5392,6 +5638,12 @@ Object.defineProperty(exports, "useEditMessageHandler", {
 		return useEditMessageHandler;
 	}
 });
+Object.defineProperty(exports, "useInteractionAnnouncements", {
+	enumerable: true,
+	get: function() {
+		return useInteractionAnnouncements;
+	}
+});
 Object.defineProperty(exports, "useLegacyThreadContext", {
 	enumerable: true,
 	get: function() {
@@ -5501,4 +5753,4 @@ Object.defineProperty(exports, "validateAndGetMessage", {
 	}
 });
 
-//# sourceMappingURL=useNotificationApi.87ba0b39.js.map
+//# sourceMappingURL=useNotificationApi.bf76a16b.js.map