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

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

@@ -0,0 +1,42 @@
+import { useLayoutViewState } from "./hooks/useLayoutViewState.mjs";
+import { createChatViewSlotBinding, getChatViewEntityBinding } from "./slotBinding.mjs";
+import { Slot } from "./layout/Slot.mjs";
+import { useChatViewContext } from "./ChatView.mjs";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/plugins/SlotLayout/ThreadListSlot.tsx
+var LIST_BINDING_KEY = "thread-list";
+var LIST_ENTITY_KIND = "threadList";
+var ThreadListSlot = ({ children, fallback = null, slot }) => {
+	const { layoutController } = useChatViewContext();
+	const { availableSlots, slotBindings } = useLayoutViewState();
+	const requestedSlot = slot && availableSlots.includes(slot) ? slot : void 0;
+	const existingListSlot = availableSlots.find((candidate) => getChatViewEntityBinding(slotBindings[candidate])?.kind === LIST_ENTITY_KIND);
+	const firstFreeSlot = availableSlots.find((candidate) => !slotBindings[candidate]);
+	const listSlot = requestedSlot ?? existingListSlot ?? firstFreeSlot ?? availableSlots[0];
+	useEffect(() => {
+		if (!listSlot) return;
+		if (requestedSlot && existingListSlot && existingListSlot !== requestedSlot) layoutController.release(existingListSlot);
+		if (getChatViewEntityBinding(slotBindings[listSlot])?.kind === LIST_ENTITY_KIND) return;
+		layoutController.bind(listSlot, createChatViewSlotBinding({
+			key: LIST_BINDING_KEY,
+			kind: LIST_ENTITY_KIND,
+			source: {}
+		}));
+	}, [
+		existingListSlot,
+		layoutController,
+		listSlot,
+		requestedSlot,
+		slotBindings
+	]);
+	if (!listSlot) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+	return /* @__PURE__ */ jsx(Slot, {
+		slot: listSlot,
+		children: children ?? fallback
+	});
+};
+//#endregion
+export { ThreadListSlot };
+
+//# sourceMappingURL=ThreadListSlot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListSlot.mjs","names":[],"sources":["../../../../src/plugins/SlotLayout/ThreadListSlot.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { createChatViewSlotBinding, getChatViewEntityBinding } from './slotBinding';\nimport { useChatViewContext } from './ChatView';\nimport { useLayoutViewState } from './hooks/useLayoutViewState';\nimport { Slot } from './layout/Slot';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\nimport type { SlotName } from './layoutController/layoutControllerTypes';\n\nexport type ThreadListSlotProps = PropsWithChildren<{\n  fallback?: ReactNode;\n  slot?: SlotName;\n}>;\n\nconst LIST_BINDING_KEY = 'thread-list';\nconst LIST_ENTITY_KIND = 'threadList';\n\nexport const ThreadListSlot = ({\n  children,\n  fallback = null,\n  slot,\n}: ThreadListSlotProps) => {\n  const { layoutController } = useChatViewContext();\n  const { availableSlots, slotBindings } = useLayoutViewState();\n\n  const requestedSlot = slot && availableSlots.includes(slot) ? slot : undefined;\n  const existingListSlot = availableSlots.find(\n    (candidate) =>\n      getChatViewEntityBinding(slotBindings[candidate])?.kind === LIST_ENTITY_KIND,\n  );\n  const firstFreeSlot = availableSlots.find((candidate) => !slotBindings[candidate]);\n  const listSlot =\n    requestedSlot ?? existingListSlot ?? firstFreeSlot ?? availableSlots[0];\n\n  useEffect(() => {\n    if (!listSlot) return;\n\n    if (requestedSlot && existingListSlot && existingListSlot !== requestedSlot) {\n      layoutController.release(existingListSlot);\n    }\n\n    const existingEntity = getChatViewEntityBinding(slotBindings[listSlot]);\n    if (existingEntity?.kind === LIST_ENTITY_KIND) {\n      return;\n    }\n\n    layoutController.bind(\n      listSlot,\n      createChatViewSlotBinding({\n        key: LIST_BINDING_KEY,\n        kind: LIST_ENTITY_KIND,\n        source: {},\n      }),\n    );\n  }, [existingListSlot, layoutController, listSlot, requestedSlot, slotBindings]);\n\n  if (!listSlot) return <>{fallback}</>;\n\n  return <Slot slot={listSlot}>{children ?? fallback}</Slot>;\n};\n"],"mappings":";;;;;;;AAeA,IAAM,mBAAmB;AACzB,IAAM,mBAAmB;AAEzB,IAAa,kBAAkB,EAC7B,UACA,WAAW,MACX,WACyB;CACzB,MAAM,EAAE,qBAAqB,mBAAmB;CAChD,MAAM,EAAE,gBAAgB,iBAAiB,mBAAmB;CAE5D,MAAM,gBAAgB,QAAQ,eAAe,SAAS,IAAI,IAAI,OAAO,KAAA;CACrE,MAAM,mBAAmB,eAAe,MACrC,cACC,yBAAyB,aAAa,UAAU,CAAC,EAAE,SAAS,gBAChE;CACA,MAAM,gBAAgB,eAAe,MAAM,cAAc,CAAC,aAAa,UAAU;CACjF,MAAM,WACJ,iBAAiB,oBAAoB,iBAAiB,eAAe;CAEvE,gBAAgB;EACd,IAAI,CAAC,UAAU;EAEf,IAAI,iBAAiB,oBAAoB,qBAAqB,eAC5D,iBAAiB,QAAQ,gBAAgB;EAI3C,IADuB,yBAAyB,aAAa,SACzD,CAAA,EAAgB,SAAS,kBAC3B;EAGF,iBAAiB,KACf,UACA,0BAA0B;GACxB,KAAK;GACL,MAAM;GACN,QAAQ,CAAC;EACX,CAAC,CACH;CACF,GAAG;EAAC;EAAkB;EAAkB;EAAU;EAAe;CAAY,CAAC;CAE9E,IAAI,CAAC,UAAU,OAAO,oBAAA,YAAA,EAAA,UAAG,SAAW,CAAA;CAEpC,OAAO,oBAAC,MAAD;EAAM,MAAM;YAAW,YAAY;CAAe,CAAA;AAC3D"}

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

@@ -0,0 +1,34 @@
+import { WorkspacePanelProvider } from "../../context/WorkspaceNavigationContext.mjs";
+import { Thread } from "../../components/Thread/Thread.mjs";
+import { useSlotThread } from "./hooks/useSlotEntity.mjs";
+import { useChatViewContext } from "./ChatView.mjs";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/plugins/SlotLayout/ThreadSlot.tsx
+var ThreadSlot = ({ children, fallback = null, hideIfEmpty = true, slot, ...threadProps }) => {
+	const { layoutController } = useChatViewContext();
+	const thread = useSlotThread({ slot });
+	useEffect(() => {
+		if (!slot || !hideIfEmpty) return;
+		if (thread) layoutController.unhide(slot);
+		else layoutController.hide(slot);
+	}, [
+		hideIfEmpty,
+		layoutController,
+		slot,
+		thread
+	]);
+	if (!thread) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+	return /* @__PURE__ */ jsx(WorkspacePanelProvider, {
+		panel: slot,
+		children: /* @__PURE__ */ jsx(Thread, {
+			...threadProps,
+			thread,
+			children
+		})
+	});
+};
+//#endregion
+export { ThreadSlot };
+
+//# sourceMappingURL=ThreadSlot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadSlot.mjs","names":[],"sources":["../../../../src/plugins/SlotLayout/ThreadSlot.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { useChatViewContext } from './ChatView';\nimport { useSlotThread } from './hooks';\nimport { Thread, type ThreadProps } from '../../components/Thread';\nimport { WorkspacePanelProvider } from '../../context/WorkspaceNavigationContext';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\nimport type { SlotName } from './layoutController/layoutControllerTypes';\n\nexport type ThreadSlotProps = PropsWithChildren<\n  Omit<ThreadProps, 'thread'> & {\n    fallback?: ReactNode;\n    hideIfEmpty?: boolean;\n    slot?: SlotName;\n  }\n>;\n\nexport const ThreadSlot = ({\n  children,\n  fallback = null,\n  hideIfEmpty = true,\n  slot,\n  ...threadProps\n}: ThreadSlotProps) => {\n  const { layoutController } = useChatViewContext();\n  const thread = useSlotThread({ slot });\n\n  useEffect(() => {\n    if (!slot || !hideIfEmpty) return;\n    if (thread) layoutController.unhide(slot);\n    else layoutController.hide(slot);\n  }, [hideIfEmpty, layoutController, slot, thread]);\n\n  if (!thread) return <>{fallback}</>;\n\n  return (\n    <WorkspacePanelProvider panel={slot}>\n      <Thread {...threadProps} thread={thread}>\n        {children}\n      </Thread>\n    </WorkspacePanelProvider>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,IAAa,cAAc,EACzB,UACA,WAAW,MACX,cAAc,MACd,MACA,GAAG,kBACkB;CACrB,MAAM,EAAE,qBAAqB,mBAAmB;CAChD,MAAM,SAAS,cAAc,EAAE,KAAK,CAAC;CAErC,gBAAgB;EACd,IAAI,CAAC,QAAQ,CAAC,aAAa;EAC3B,IAAI,QAAQ,iBAAiB,OAAO,IAAI;OACnC,iBAAiB,KAAK,IAAI;CACjC,GAAG;EAAC;EAAa;EAAkB;EAAM;CAAM,CAAC;CAEhD,IAAI,CAAC,QAAQ,OAAO,oBAAA,YAAA,EAAA,UAAG,SAAW,CAAA;CAElC,OACE,oBAAC,wBAAD;EAAwB,OAAO;YAC7B,oBAAC,QAAD;GAAQ,GAAI;GAAqB;GAC9B;EACK,CAAA;CACc,CAAA;AAE5B"}

package/dist/es/plugins/SlotLayout/hooks/useLayoutViewState.mjs

@@ -0,0 +1,26 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatViewContext } from "../ChatView.mjs";
+import { useMemo } from "react";
+//#region src/plugins/SlotLayout/hooks/useLayoutViewState.ts
+var getLayoutViewState = (state, view = state.activeView) => {
+	const layout = state.layouts?.[view];
+	return {
+		availableSlots: [...layout?.availableSlots ?? []],
+		hiddenSlots: { ...layout?.hiddenSlots ?? {} },
+		slotBindings: { ...layout?.slotBindings ?? {} },
+		slotForwardHistory: { ...layout?.slotForwardHistory ?? {} },
+		slotHistory: { ...layout?.slotHistory ?? {} },
+		slotLayers: { ...layout?.slotLayers ?? {} },
+		slotMeta: { ...layout?.slotMeta ?? {} },
+		slotNames: layout?.slotNames ? [...layout.slotNames] : void 0
+	};
+};
+var useLayoutViewState = (view) => {
+	const { layoutController } = useChatViewContext();
+	const selector = useMemo(() => (state) => getLayoutViewState(state, view ?? state.activeView), [view]);
+	return useStateStore(layoutController.state, selector) ?? selector(layoutController.state.getLatestValue());
+};
+//#endregion
+export { getLayoutViewState, useLayoutViewState };
+
+//# sourceMappingURL=useLayoutViewState.mjs.map

package/dist/es/plugins/SlotLayout/hooks/useLayoutViewState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutViewState.mjs","names":[],"sources":["../../../../../src/plugins/SlotLayout/hooks/useLayoutViewState.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useStateStore } from '../../../store';\nimport type { ChatView } from '../ChatView';\nimport { useChatViewContext } from '../ChatView';\nimport type {\n  ChatViewLayoutState,\n  ChatViewLayoutViewState,\n} from '../layoutController/layoutControllerTypes';\n\nexport const getLayoutViewState = (\n  state: ChatViewLayoutState,\n  view = state.activeView,\n): ChatViewLayoutViewState => {\n  const layout = state.layouts?.[view];\n  return {\n    availableSlots: [...(layout?.availableSlots ?? [])],\n    hiddenSlots: { ...(layout?.hiddenSlots ?? {}) },\n    slotBindings: { ...(layout?.slotBindings ?? {}) },\n    slotForwardHistory: { ...(layout?.slotForwardHistory ?? {}) },\n    slotHistory: { ...(layout?.slotHistory ?? {}) },\n    slotLayers: { ...(layout?.slotLayers ?? {}) },\n    slotMeta: { ...(layout?.slotMeta ?? {}) },\n    slotNames: layout?.slotNames ? [...layout.slotNames] : undefined,\n  };\n};\nexport const useLayoutViewState = (view?: ChatView) => {\n  const { layoutController } = useChatViewContext();\n  const selector = useMemo(\n    () => (state: Parameters<typeof getLayoutViewState>[0]) =>\n      getLayoutViewState(state, view ?? state.activeView),\n    [view],\n  );\n\n  return (\n    useStateStore(layoutController.state, selector) ??\n    selector(layoutController.state.getLatestValue())\n  );\n};\n"],"mappings":";;;;AAUA,IAAa,sBACX,OACA,OAAO,MAAM,eACe;CAC5B,MAAM,SAAS,MAAM,UAAU;CAC/B,OAAO;EACL,gBAAgB,CAAC,GAAI,QAAQ,kBAAkB,CAAC,CAAE;EAClD,aAAa,EAAE,GAAI,QAAQ,eAAe,CAAC,EAAG;EAC9C,cAAc,EAAE,GAAI,QAAQ,gBAAgB,CAAC,EAAG;EAChD,oBAAoB,EAAE,GAAI,QAAQ,sBAAsB,CAAC,EAAG;EAC5D,aAAa,EAAE,GAAI,QAAQ,eAAe,CAAC,EAAG;EAC9C,YAAY,EAAE,GAAI,QAAQ,cAAc,CAAC,EAAG;EAC5C,UAAU,EAAE,GAAI,QAAQ,YAAY,CAAC,EAAG;EACxC,WAAW,QAAQ,YAAY,CAAC,GAAG,OAAO,SAAS,IAAI,KAAA;CACzD;AACF;AACA,IAAa,sBAAsB,SAAoB;CACrD,MAAM,EAAE,qBAAqB,mBAAmB;CAChD,MAAM,WAAW,eACR,UACL,mBAAmB,OAAO,QAAQ,MAAM,UAAU,GACpD,CAAC,IAAI,CACP;CAEA,OACE,cAAc,iBAAiB,OAAO,QAAQ,KAC9C,SAAS,iBAAiB,MAAM,eAAe,CAAC;AAEpD"}

package/dist/es/plugins/SlotLayout/hooks/useSlotEntity.mjs

@@ -0,0 +1,167 @@
+import { useLayoutViewState } from "./useLayoutViewState.mjs";
+import { getChatViewEntityBinding } from "../slotBinding.mjs";
+//#region src/plugins/SlotLayout/hooks/useSlotEntity.ts
+var resolveCandidateSlots = (slot, availableSlots) => {
+	if (slot) return [slot];
+	return availableSlots;
+};
+var isEntityOfKind = (entity, kind) => entity?.kind === kind;
+/**
+* Resolves the `source` of the first matching ChatView entity binding.
+*
+* Behavior:
+* 1. Read active-view slot topology/bindings via `useLayoutViewState()`.
+* 2. Build candidate slots:
+*    - `[slot]` when explicit `slot` is provided
+*    - `availableSlots` order when `slot` is omitted
+* 3. Return `entity.source` for the first binding whose `kind` matches.
+* 4. Return `undefined` when no match exists.
+*
+* Why this exists:
+* - Keeps slot-to-entity lookup consistent and centralized for ChatView-aware
+*   components (e.g. `ChannelSlot`, `ThreadSlot`).
+* - Preserves type safety by narrowing returned `source` based on `kind`.
+*
+* @example
+* ```tsx
+* const channel = useSlotEntity({ kind: 'channel' });
+* // channel is Stream Channel | undefined
+* ```
+*
+* @example
+* ```tsx
+* const thread = useSlotEntity({ kind: 'thread', slot: 'main-thread' });
+* // thread is Thread | undefined from that slot only
+* ```
+*
+* @example
+* ```tsx
+* const list = useSlotEntity({ kind: 'channelList', slot: 'list' });
+* // list is { view?: ChatView } | undefined
+* ```
+*/
+var useSlotEntity = ({ kind, slot, view }) => {
+	const { availableSlots, slotBindings } = useLayoutViewState(view);
+	const candidateSlots = resolveCandidateSlots(slot, availableSlots);
+	for (const candidateSlot of candidateSlots) {
+		const entity = getChatViewEntityBinding(slotBindings[candidateSlot]);
+		if (isEntityOfKind(entity, kind)) return entity.source;
+	}
+};
+/**
+* Like {@link useSlotEntity}, but resolves the source of the **topmost layer** on a slot (the last
+* entry of `slotLayers[slot]`) rather than its base binding — when that layer's `kind` matches.
+*
+* Layers stack above the base binding and cover it while it stays mounted (see
+* `ChatViewNavigation.pushLayer`). Read the base with `useSlotEntity`/`useSlotChannel`/… and the
+* overlay on top with this hook, then render the overlay covering the base.
+*
+* @example
+* ```tsx
+* const profile = useSlotTopLayerEntity({ kind: 'userProfile', slot: 'main-thread' });
+* // profile is { userId } | undefined — present while a userProfile layer covers the slot
+* ```
+*/
+var useSlotTopLayerEntity = ({ kind, slot, view }) => {
+	const { availableSlots, slotLayers } = useLayoutViewState(view);
+	for (const candidateSlot of resolveCandidateSlots(slot, availableSlots)) {
+		const layers = slotLayers?.[candidateSlot];
+		const topBinding = layers?.[layers.length - 1];
+		const entity = getChatViewEntityBinding(topBinding);
+		if (isEntityOfKind(entity, kind)) return entity.source;
+	}
+};
+/**
+* Resolves **every** matching ChatView entity binding as `{ slot, source }` pairs
+* (in active-view `availableSlots` order, or only `slot` when provided).
+*
+* Prefer this over `useSlotEntity` when several slots can hold the same kind (e.g.
+* two channels side by side) — it never collapses the set to "the first match".
+*
+* @example
+* ```tsx
+* const channels = useSlotEntities({ kind: 'channel' });
+* // channels is Array<{ slot: SlotName; source: Channel }>
+* ```
+*/
+var useSlotEntities = ({ kind, slot, view }) => {
+	const { availableSlots, slotBindings } = useLayoutViewState(view);
+	return resolveCandidateSlots(slot, availableSlots).reduce((matches, candidateSlot) => {
+		const entity = getChatViewEntityBinding(slotBindings[candidateSlot]);
+		if (isEntityOfKind(entity, kind)) matches.push({
+			slot: candidateSlot,
+			source: entity.source
+		});
+		return matches;
+	}, []);
+};
+/**
+* Convenience wrapper for `useSlotEntity({ kind: 'channel' })` — the channel in a
+* single slot. Pass `slot` to be precise; omitting it returns the first channel slot
+* (only meaningful for a single-channel workspace). For multiple channels, use
+* `useSlotChannels`.
+*
+* @example
+* ```tsx
+* const channel = useSlotChannel({ slot: 'main' });
+* ```
+*/
+var useSlotChannel = (options) => useSlotEntity({
+	kind: "channel",
+	slot: options?.slot,
+	view: options?.view
+});
+/**
+* Every slot currently holding a channel, as `{ channel, slot }` pairs. Robust for
+* side-by-side channels — the caller renders one panel per entry (and, for a
+* single-channel workspace, gets an array of length ≤ 1).
+*
+* @example
+* ```tsx
+* useSlotChannels().map(({ channel, slot }) => <ChannelPanel key={slot} channel={channel} />)
+* ```
+*/
+var useSlotChannels = (options) => useSlotEntities({
+	kind: "channel",
+	slot: options?.slot,
+	view: options?.view
+}).map(({ slot, source }) => ({
+	channel: source,
+	slot
+}));
+/**
+* Convenience wrapper for `useSlotEntity({ kind: 'thread' })`.
+*
+* @example
+* ```tsx
+* const thread = useSlotThread();
+* ```
+*/
+var useSlotThread = (options) => useSlotEntity({
+	kind: "thread",
+	slot: options?.slot,
+	view: options?.view
+});
+/**
+* Every slot currently holding a thread, as `{ thread, slot }` pairs — the thread
+* analog of `useSlotChannels`. The caller renders one thread panel per entry.
+*
+* @example
+* ```tsx
+* useSlotThreads().map(({ thread, slot }) => (
+*   <Thread key={slot} thread={thread}><ThreadHeader /><MessageList /></Thread>
+* ))
+* ```
+*/
+var useSlotThreads = (options) => useSlotEntities({
+	kind: "thread",
+	slot: options?.slot,
+	view: options?.view
+}).map(({ slot, source }) => ({
+	slot,
+	thread: source
+}));
+//#endregion
+export { useSlotChannel, useSlotChannels, useSlotEntities, useSlotEntity, useSlotThread, useSlotThreads, useSlotTopLayerEntity };
+
+//# sourceMappingURL=useSlotEntity.mjs.map

package/dist/es/plugins/SlotLayout/hooks/useSlotEntity.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlotEntity.mjs","names":[],"sources":["../../../../../src/plugins/SlotLayout/hooks/useSlotEntity.ts"],"sourcesContent":["import { getChatViewEntityBinding } from '../ChatView';\nimport { useLayoutViewState } from './useLayoutViewState';\n\nimport type { ChatView, ChatViewEntityBinding } from '../ChatView';\nimport type { SlotName } from '../layoutController/layoutControllerTypes';\n\ntype SlotEntityKind = ChatViewEntityBinding['kind'];\n\ntype SlotEntitySourceMap = {\n  [TKind in SlotEntityKind]: Extract<ChatViewEntityBinding, { kind: TKind }>['source'];\n};\n\ntype SlotEntitySourceByKind<TKind extends SlotEntityKind> = SlotEntitySourceMap[TKind];\n\ntype UseSlotEntityOptions<TKind extends SlotEntityKind> = {\n  /**\n   * Entity kind to resolve from ChatView slot bindings.\n   */\n  kind: TKind;\n  /**\n   * Optional explicit slot to inspect.\n   *\n   * - when provided: only that slot is checked\n   * - when omitted: slots are checked in active view order (`availableSlots`)\n   */\n  slot?: SlotName;\n  /**\n   * Optional explicit view to read slots from.\n   *\n   * - when omitted: the **active** view's slots are read\n   * - when provided: that view's slots are read regardless of which view is active\n   *   (its layout state is retained across view switches). Useful for cross-view\n   *   concerns like URL sync that must not clear when another view is focused.\n   */\n  view?: ChatView;\n};\n\nconst resolveCandidateSlots = (\n  slot: SlotName | undefined,\n  availableSlots: SlotName[],\n) => {\n  if (slot) return [slot];\n  return availableSlots;\n};\n\nconst isEntityOfKind = <TKind extends SlotEntityKind>(\n  entity: ChatViewEntityBinding | undefined,\n  kind: TKind,\n): entity is Extract<ChatViewEntityBinding, { kind: TKind }> => entity?.kind === kind;\n\n/**\n * Resolves the `source` of the first matching ChatView entity binding.\n *\n * Behavior:\n * 1. Read active-view slot topology/bindings via `useLayoutViewState()`.\n * 2. Build candidate slots:\n *    - `[slot]` when explicit `slot` is provided\n *    - `availableSlots` order when `slot` is omitted\n * 3. Return `entity.source` for the first binding whose `kind` matches.\n * 4. Return `undefined` when no match exists.\n *\n * Why this exists:\n * - Keeps slot-to-entity lookup consistent and centralized for ChatView-aware\n *   components (e.g. `ChannelSlot`, `ThreadSlot`).\n * - Preserves type safety by narrowing returned `source` based on `kind`.\n *\n * @example\n * ```tsx\n * const channel = useSlotEntity({ kind: 'channel' });\n * // channel is Stream Channel | undefined\n * ```\n *\n * @example\n * ```tsx\n * const thread = useSlotEntity({ kind: 'thread', slot: 'main-thread' });\n * // thread is Thread | undefined from that slot only\n * ```\n *\n * @example\n * ```tsx\n * const list = useSlotEntity({ kind: 'channelList', slot: 'list' });\n * // list is { view?: ChatView } | undefined\n * ```\n */\nexport const useSlotEntity = <TKind extends SlotEntityKind>({\n  kind,\n  slot,\n  view,\n}: UseSlotEntityOptions<TKind>): SlotEntitySourceByKind<TKind> | undefined => {\n  const { availableSlots, slotBindings } = useLayoutViewState(view);\n\n  const candidateSlots = resolveCandidateSlots(slot, availableSlots);\n  for (const candidateSlot of candidateSlots) {\n    const entity = getChatViewEntityBinding(slotBindings[candidateSlot]);\n    if (isEntityOfKind(entity, kind)) {\n      // Safe due to discriminant check on `kind` above.\n      return entity.source as SlotEntitySourceByKind<TKind>;\n    }\n  }\n\n  return undefined;\n};\n\n/**\n * Like {@link useSlotEntity}, but resolves the source of the **topmost layer** on a slot (the last\n * entry of `slotLayers[slot]`) rather than its base binding — when that layer's `kind` matches.\n *\n * Layers stack above the base binding and cover it while it stays mounted (see\n * `ChatViewNavigation.pushLayer`). Read the base with `useSlotEntity`/`useSlotChannel`/… and the\n * overlay on top with this hook, then render the overlay covering the base.\n *\n * @example\n * ```tsx\n * const profile = useSlotTopLayerEntity({ kind: 'userProfile', slot: 'main-thread' });\n * // profile is { userId } | undefined — present while a userProfile layer covers the slot\n * ```\n */\nexport const useSlotTopLayerEntity = <TKind extends SlotEntityKind>({\n  kind,\n  slot,\n  view,\n}: UseSlotEntityOptions<TKind>): SlotEntitySourceByKind<TKind> | undefined => {\n  const { availableSlots, slotLayers } = useLayoutViewState(view);\n\n  for (const candidateSlot of resolveCandidateSlots(slot, availableSlots)) {\n    const layers = slotLayers?.[candidateSlot];\n    const topBinding = layers?.[layers.length - 1];\n    const entity = getChatViewEntityBinding(topBinding);\n    if (isEntityOfKind(entity, kind)) {\n      // Safe due to discriminant check on `kind` above.\n      return entity.source as SlotEntitySourceByKind<TKind>;\n    }\n  }\n\n  return undefined;\n};\n\n/**\n * Resolves **every** matching ChatView entity binding as `{ slot, source }` pairs\n * (in active-view `availableSlots` order, or only `slot` when provided).\n *\n * Prefer this over `useSlotEntity` when several slots can hold the same kind (e.g.\n * two channels side by side) — it never collapses the set to \"the first match\".\n *\n * @example\n * ```tsx\n * const channels = useSlotEntities({ kind: 'channel' });\n * // channels is Array<{ slot: SlotName; source: Channel }>\n * ```\n */\nexport const useSlotEntities = <TKind extends SlotEntityKind>({\n  kind,\n  slot,\n  view,\n}: UseSlotEntityOptions<TKind>): Array<{\n  slot: SlotName;\n  source: SlotEntitySourceByKind<TKind>;\n}> => {\n  const { availableSlots, slotBindings } = useLayoutViewState(view);\n\n  return resolveCandidateSlots(slot, availableSlots).reduce<\n    Array<{ slot: SlotName; source: SlotEntitySourceByKind<TKind> }>\n  >((matches, candidateSlot) => {\n    const entity = getChatViewEntityBinding(slotBindings[candidateSlot]);\n    if (isEntityOfKind(entity, kind)) {\n      // Safe due to discriminant check on `kind` above.\n      matches.push({\n        slot: candidateSlot,\n        source: entity.source as SlotEntitySourceByKind<TKind>,\n      });\n    }\n    return matches;\n  }, []);\n};\n\n/**\n * Convenience wrapper for `useSlotEntity({ kind: 'channel' })` — the channel in a\n * single slot. Pass `slot` to be precise; omitting it returns the first channel slot\n * (only meaningful for a single-channel workspace). For multiple channels, use\n * `useSlotChannels`.\n *\n * @example\n * ```tsx\n * const channel = useSlotChannel({ slot: 'main' });\n * ```\n */\nexport const useSlotChannel = (options?: { slot?: SlotName; view?: ChatView }) =>\n  useSlotEntity({ kind: 'channel', slot: options?.slot, view: options?.view });\n\n/**\n * Every slot currently holding a channel, as `{ channel, slot }` pairs. Robust for\n * side-by-side channels — the caller renders one panel per entry (and, for a\n * single-channel workspace, gets an array of length ≤ 1).\n *\n * @example\n * ```tsx\n * useSlotChannels().map(({ channel, slot }) => <ChannelPanel key={slot} channel={channel} />)\n * ```\n */\nexport const useSlotChannels = (options?: { slot?: SlotName; view?: ChatView }) =>\n  useSlotEntities({ kind: 'channel', slot: options?.slot, view: options?.view }).map(\n    ({ slot, source }) => ({\n      channel: source,\n      slot,\n    }),\n  );\n\n/**\n * Convenience wrapper for `useSlotEntity({ kind: 'thread' })`.\n *\n * @example\n * ```tsx\n * const thread = useSlotThread();\n * ```\n */\nexport const useSlotThread = (options?: { slot?: SlotName; view?: ChatView }) =>\n  useSlotEntity({ kind: 'thread', slot: options?.slot, view: options?.view });\n\n/**\n * Every slot currently holding a thread, as `{ thread, slot }` pairs — the thread\n * analog of `useSlotChannels`. The caller renders one thread panel per entry.\n *\n * @example\n * ```tsx\n * useSlotThreads().map(({ thread, slot }) => (\n *   <Thread key={slot} thread={thread}><ThreadHeader /><MessageList /></Thread>\n * ))\n * ```\n */\nexport const useSlotThreads = (options?: { slot?: SlotName; view?: ChatView }) =>\n  useSlotEntities({ kind: 'thread', slot: options?.slot, view: options?.view }).map(\n    ({ slot, source }) => ({\n      slot,\n      thread: source,\n    }),\n  );\n"],"mappings":";;;AAqCA,IAAM,yBACJ,MACA,mBACG;CACH,IAAI,MAAM,OAAO,CAAC,IAAI;CACtB,OAAO;AACT;AAEA,IAAM,kBACJ,QACA,SAC8D,QAAQ,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCjF,IAAa,iBAA+C,EAC1D,MACA,MACA,WAC4E;CAC5E,MAAM,EAAE,gBAAgB,iBAAiB,mBAAmB,IAAI;CAEhE,MAAM,iBAAiB,sBAAsB,MAAM,cAAc;CACjE,KAAK,MAAM,iBAAiB,gBAAgB;EAC1C,MAAM,SAAS,yBAAyB,aAAa,cAAc;EACnE,IAAI,eAAe,QAAQ,IAAI,GAE7B,OAAO,OAAO;CAElB;AAGF;;;;;;;;;;;;;;;AAgBA,IAAa,yBAAuD,EAClE,MACA,MACA,WAC4E;CAC5E,MAAM,EAAE,gBAAgB,eAAe,mBAAmB,IAAI;CAE9D,KAAK,MAAM,iBAAiB,sBAAsB,MAAM,cAAc,GAAG;EACvE,MAAM,SAAS,aAAa;EAC5B,MAAM,aAAa,SAAS,OAAO,SAAS;EAC5C,MAAM,SAAS,yBAAyB,UAAU;EAClD,IAAI,eAAe,QAAQ,IAAI,GAE7B,OAAO,OAAO;CAElB;AAGF;;;;;;;;;;;;;;AAeA,IAAa,mBAAiD,EAC5D,MACA,MACA,WAII;CACJ,MAAM,EAAE,gBAAgB,iBAAiB,mBAAmB,IAAI;CAEhE,OAAO,sBAAsB,MAAM,cAAc,CAAC,CAAC,QAEhD,SAAS,kBAAkB;EAC5B,MAAM,SAAS,yBAAyB,aAAa,cAAc;EACnE,IAAI,eAAe,QAAQ,IAAI,GAE7B,QAAQ,KAAK;GACX,MAAM;GACN,QAAQ,OAAO;EACjB,CAAC;EAEH,OAAO;CACT,GAAG,CAAC,CAAC;AACP;;;;;;;;;;;;AAaA,IAAa,kBAAkB,YAC7B,cAAc;CAAE,MAAM;CAAW,MAAM,SAAS;CAAM,MAAM,SAAS;AAAK,CAAC;;;;;;;;;;;AAY7E,IAAa,mBAAmB,YAC9B,gBAAgB;CAAE,MAAM;CAAW,MAAM,SAAS;CAAM,MAAM,SAAS;AAAK,CAAC,CAAC,CAAC,KAC5E,EAAE,MAAM,cAAc;CACrB,SAAS;CACT;AACF,EACF;;;;;;;;;AAUF,IAAa,iBAAiB,YAC5B,cAAc;CAAE,MAAM;CAAU,MAAM,SAAS;CAAM,MAAM,SAAS;AAAK,CAAC;;;;;;;;;;;;AAa5E,IAAa,kBAAkB,YAC7B,gBAAgB;CAAE,MAAM;CAAU,MAAM,SAAS;CAAM,MAAM,SAAS;AAAK,CAAC,CAAC,CAAC,KAC3E,EAAE,MAAM,cAAc;CACrB;CACA,QAAQ;AACV,EACF"}

package/dist/es/plugins/SlotLayout/layout/Slot.mjs

@@ -0,0 +1,46 @@
+import { WorkspacePanelProvider } from "../../../context/WorkspaceNavigationContext.mjs";
+import { renderSlotFromRegistry, useSlotRegistry } from "../slotRegistry.mjs";
+import { useLayoutViewState } from "../hooks/useLayoutViewState.mjs";
+import { getChatViewEntityBinding } from "../slotBinding.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/plugins/SlotLayout/layout/Slot.tsx
+var Slot = ({ children, className, slot }) => {
+	const { hiddenSlots, slotBindings, slotLayers } = useLayoutViewState();
+	const registry = useSlotRegistry();
+	const hidden = !!hiddenSlots?.[slot];
+	const layers = slotLayers?.[slot] ?? [];
+	const baseContent = children ?? renderSlotFromRegistry(getChatViewEntityBinding(slotBindings[slot]), slot, registry);
+	return /* @__PURE__ */ jsx("section", {
+		"aria-hidden": hidden || void 0,
+		className: clsx("str-chat__chat-view__slot", { "str-chat__chat-view__slot--hidden": hidden }, className),
+		"data-slot": slot,
+		children: /* @__PURE__ */ jsx(WorkspacePanelProvider, {
+			panel: slot,
+			children: layers.length === 0 ? baseContent : /* @__PURE__ */ jsx(Fragment$1, { children: [{
+				key: "base",
+				node: baseContent
+			}, ...layers.map((layer) => {
+				const entity = getChatViewEntityBinding(layer);
+				return {
+					key: layer.key ?? `layer:${entity?.kind ?? "unknown"}`,
+					node: renderSlotFromRegistry(entity, slot, registry)
+				};
+			})].map(({ key, node }, index, all) => {
+				const isTop = index === all.length - 1;
+				return /* @__PURE__ */ jsx("div", {
+					"aria-hidden": !isTop || void 0,
+					className: "str-chat__chat-view__slot-layer",
+					hidden: !isTop,
+					style: isTop ? { display: "contents" } : void 0,
+					children: node
+				}, key);
+			}) })
+		})
+	});
+};
+//#endregion
+export { Slot };
+
+//# sourceMappingURL=Slot.mjs.map

package/dist/es/plugins/SlotLayout/layout/Slot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slot.mjs","names":[],"sources":["../../../../../src/plugins/SlotLayout/layout/Slot.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nimport { WorkspacePanelProvider } from '../../../context/WorkspaceNavigationContext';\nimport { useLayoutViewState } from '../hooks/useLayoutViewState';\nimport { getChatViewEntityBinding } from '../slotBinding';\nimport { renderSlotFromRegistry, useSlotRegistry } from '../slotRegistry';\n\nimport type { ReactNode } from 'react';\n\nexport type SlotProps = {\n  children?: ReactNode;\n  className?: string;\n  slot: string;\n};\n\nexport const Slot = ({ children, className, slot }: SlotProps) => {\n  const { hiddenSlots, slotBindings, slotLayers } = useLayoutViewState();\n  const registry = useSlotRegistry();\n  const hidden = !!hiddenSlots?.[slot];\n  const layers = slotLayers?.[slot] ?? [];\n\n  // Explicit children win (legacy claim-and-render wrappers); otherwise dispatch\n  // on the slot's current binding via the registry.\n  const baseContent =\n    children ??\n    renderSlotFromRegistry(getChatViewEntityBinding(slotBindings[slot]), slot, registry);\n\n  return (\n    <section\n      aria-hidden={hidden || undefined}\n      className={clsx(\n        'str-chat__chat-view__slot',\n        {\n          'str-chat__chat-view__slot--hidden': hidden,\n        },\n        className,\n      )}\n      data-slot={slot}\n    >\n      {/* Whatever the slot shows is in this panel, so its controls act on this slot. */}\n      <WorkspacePanelProvider panel={slot}>\n        {layers.length === 0 ? (\n          // Fast path: no layers — render the base content directly (unchanged structure).\n          baseContent\n        ) : (\n          // Layered: base + each layer kept mounted; only the topmost is shown. Non-top layers get\n          // the `hidden` attribute (display:none) so their subtree state is preserved; the visible\n          // layer uses `display: contents` so it lays out exactly as a direct child would. Each entry\n          // is keyed by its binding identity (`LayoutSlotBinding.key`, the same key the controller\n          // dedupes on) — not the array index — so a layer keeps its subtree as the stack changes.\n          <>\n            {[\n              { key: 'base', node: baseContent },\n              ...layers.map((layer) => {\n                const entity = getChatViewEntityBinding(layer);\n                return {\n                  key: layer.key ?? `layer:${entity?.kind ?? 'unknown'}`,\n                  node: renderSlotFromRegistry(entity, slot, registry),\n                };\n              }),\n            ].map(({ key, node }, index, all) => {\n              const isTop = index === all.length - 1;\n              return (\n                <div\n                  aria-hidden={!isTop || undefined}\n                  className='str-chat__chat-view__slot-layer'\n                  hidden={!isTop}\n                  key={key}\n                  style={isTop ? { display: 'contents' } : undefined}\n                >\n                  {node}\n                </div>\n              );\n            })}\n          </>\n        )}\n      </WorkspacePanelProvider>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAa,QAAQ,EAAE,UAAU,WAAW,WAAsB;CAChE,MAAM,EAAE,aAAa,cAAc,eAAe,mBAAmB;CACrE,MAAM,WAAW,gBAAgB;CACjC,MAAM,SAAS,CAAC,CAAC,cAAc;CAC/B,MAAM,SAAS,aAAa,SAAS,CAAC;CAItC,MAAM,cACJ,YACA,uBAAuB,yBAAyB,aAAa,KAAK,GAAG,MAAM,QAAQ;CAErF,OACE,oBAAC,WAAD;EACE,eAAa,UAAU,KAAA;EACvB,WAAW,KACT,6BACA,EACE,qCAAqC,OACvC,GACA,SACF;EACA,aAAW;YAGX,oBAAC,wBAAD;GAAwB,OAAO;aAC5B,OAAO,WAAW,IAEjB,cAOA,oBAAA,YAAA,EAAA,UACG,CACC;IAAE,KAAK;IAAQ,MAAM;GAAY,GACjC,GAAG,OAAO,KAAK,UAAU;IACvB,MAAM,SAAS,yBAAyB,KAAK;IAC7C,OAAO;KACL,KAAK,MAAM,OAAO,SAAS,QAAQ,QAAQ;KAC3C,MAAM,uBAAuB,QAAQ,MAAM,QAAQ;IACrD;GACF,CAAC,CACH,CAAC,CAAC,KAAK,EAAE,KAAK,QAAQ,OAAO,QAAQ;IACnC,MAAM,QAAQ,UAAU,IAAI,SAAS;IACrC,OACE,oBAAC,OAAD;KACE,eAAa,CAAC,SAAS,KAAA;KACvB,WAAU;KACV,QAAQ,CAAC;KAET,OAAO,QAAQ,EAAE,SAAS,WAAW,IAAI,KAAA;eAExC;IACE,GAJE,GAIF;GAET,CAAC,EACD,CAAA;EAEkB,CAAA;CACjB,CAAA;AAEb"}

package/dist/es/plugins/SlotLayout/layout/WorkspaceLayout.mjs

@@ -0,0 +1,23 @@
+import { Slot } from "./Slot.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/plugins/SlotLayout/layout/WorkspaceLayout.tsx
+var WorkspaceLayout = ({ navRail, slots }) => /* @__PURE__ */ jsxs("div", {
+	className: "str-chat__chat-view__workspace-layout",
+	children: [navRail ? /* @__PURE__ */ jsx("div", {
+		className: "str-chat__chat-view__workspace-layout-nav-rail",
+		children: navRail
+	}) : null, /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__chat-view__workspace-layout-slots", { "str-chat__chat-view__workspace-layout-slots--empty": slots.length === 0 }),
+		children: slots.map(({ content, slot }) => /* @__PURE__ */ jsx(Slot, {
+			className: "str-chat__chat-view__workspace-layout-slot",
+			slot,
+			children: content
+		}, slot))
+	})]
+});
+//#endregion
+export { WorkspaceLayout };
+
+//# sourceMappingURL=WorkspaceLayout.mjs.map

package/dist/es/plugins/SlotLayout/layout/WorkspaceLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceLayout.mjs","names":[],"sources":["../../../../../src/plugins/SlotLayout/layout/WorkspaceLayout.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { Slot } from './Slot';\n\nimport type { ReactNode } from 'react';\n\nexport type WorkspaceLayoutSlot = {\n  content?: ReactNode;\n  slot: string;\n};\n\nexport type WorkspaceLayoutProps = {\n  navRail?: ReactNode;\n  slots: WorkspaceLayoutSlot[];\n};\n\nexport const WorkspaceLayout = ({ navRail, slots }: WorkspaceLayoutProps) => (\n  <div className='str-chat__chat-view__workspace-layout'>\n    {navRail ? (\n      <div className='str-chat__chat-view__workspace-layout-nav-rail'>{navRail}</div>\n    ) : null}\n    <div\n      className={clsx('str-chat__chat-view__workspace-layout-slots', {\n        'str-chat__chat-view__workspace-layout-slots--empty': slots.length === 0,\n      })}\n    >\n      {slots.map(({ content, slot }) => (\n        <Slot\n          className='str-chat__chat-view__workspace-layout-slot'\n          key={slot}\n          slot={slot}\n        >\n          {content}\n        </Slot>\n      ))}\n    </div>\n  </div>\n);\n"],"mappings":";;;;;AAgBA,IAAa,mBAAmB,EAAE,SAAS,YACzC,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,UACC,oBAAC,OAAD;EAAK,WAAU;YAAkD;CAAa,CAAA,IAC5E,MACJ,oBAAC,OAAD;EACE,WAAW,KAAK,+CAA+C,EAC7D,sDAAsD,MAAM,WAAW,EACzE,CAAC;YAEA,MAAM,KAAK,EAAE,SAAS,WACrB,oBAAC,MAAD;GACE,WAAU;GAEJ;aAEL;EACG,GAJC,IAID,CACP;CACE,CAAA,CACF"}