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

package/dist/cjs/SlotLayout.de45be2d.js

@@ -0,0 +1,1672 @@
+const require_useComponentContextIcons = require("./useComponentContextIcons.d16834d9.js");
+const require_Thread = require("./Thread.373af587.js");
+let react = require("react");
+react = require_useComponentContextIcons.__toESM(react);
+let stream_chat = require("stream-chat");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stream_io_state_store = require("@stream-io/state-store");
+let clsx = require("clsx");
+clsx = require_useComponentContextIcons.__toESM(clsx);
+//#region src/components/Threads/UnreadCountBadge.tsx
+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/plugins/SlotLayout/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"
+} };
+var createChatViewA11yContextValue = (chatViewId) => ({ chatViewPanelIds: {
+	channels: `str-chat__chat-view-${chatViewId}-panel-channels`,
+	threads: `str-chat__chat-view-${chatViewId}-panel-threads`
+} });
+//#endregion
+//#region src/plugins/SlotLayout/slotRegistry.tsx
+/** Minimal built-in renderer for the `userProfile` demo kind — proves the
+* registry can render arbitrary UI in a slot, not just channel/thread/list. */
+var SlotUserProfile = ({ userId }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "str-chat__chat-view__slot-user-profile",
+	"data-user-id": userId,
+	children: userId
+});
+var defaultSlotKindRegistry = {
+	channel: { view: "channels" },
+	channelList: {
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.ChannelNavigation, {}),
+		persistent: true
+	},
+	threadList: {
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.ThreadList, {}),
+		persistent: true
+	},
+	userProfile: { Component: ({ source }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotUserProfile, { userId: source.userId }) }
+};
+/** Fold the app's `slotRenderers` prop into a registry, overriding only each
+* kind's `Component` while preserving the built-in policy (`persistent`/`view`). */
+var resolveSlotKindRegistry = (slotRenderers, base = defaultSlotKindRegistry) => {
+	if (!slotRenderers) return base;
+	const merged = { ...base };
+	Object.keys(slotRenderers).forEach((kind) => {
+		const Component = slotRenderers[kind];
+		if (!Component) return;
+		merged[kind] = {
+			...base[kind],
+			Component
+		};
+	});
+	return merged;
+};
+/**
+* State-aware dispatch for a slot's current binding. Looks up the bound kind in
+* the registry and renders its pure `Component`; unknown/unregistered kinds and
+* empty slots render nothing (the caller supplies a fallback).
+*/
+var renderSlotFromRegistry = (entity, slot, registry) => {
+	if (!entity) return null;
+	const definition = registry[entity.kind];
+	if (!definition?.Component) return null;
+	const Component = definition.Component;
+	return Component({
+		entity,
+		slot,
+		source: entity.source
+	});
+};
+/** Per-kind policy readers used by the navigation layer (D6). */
+var isPersistentSlotKind = (registry, kind) => !!kind && !!registry[kind]?.persistent;
+var resolveSlotKindView = (registry, kind) => registry[kind]?.view;
+var SlotRegistryContext = (0, react.createContext)(defaultSlotKindRegistry);
+var useSlotRegistry = () => (0, react.useContext)(SlotRegistryContext);
+//#endregion
+//#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 = (0, react.useMemo)(() => (state) => getLayoutViewState(state, view ?? state.activeView), [view]);
+	return require_useComponentContextIcons.useStateStore(layoutController.state, selector) ?? selector(layoutController.state.getLatestValue());
+};
+//#endregion
+//#region src/plugins/SlotLayout/ChatViewNavigationContext.tsx
+var resolveDefaultTargetSlot = ({ additive, isPersistentSlot, kind, requestedSlot, runtime }) => {
+	if (requestedSlot && runtime.availableSlots.includes(requestedSlot)) return requestedSlot;
+	const readSlotKind = (slot) => getChatViewEntityBinding(runtime.slotBindings[slot])?.kind;
+	const isFree = (slot) => !runtime.slotBindings[slot] && !runtime.slotLayers[slot]?.length;
+	const sameKind = runtime.availableSlots.find((slot) => readSlotKind(slot) === kind);
+	const firstFreeNonPersistent = runtime.availableSlots.find((slot) => isFree(slot) && !isPersistentSlot(slot));
+	const firstFree = runtime.availableSlots.find((slot) => isFree(slot));
+	const lastNonPersistent = [...runtime.availableSlots].reverse().find((slot) => !isPersistentSlot(slot));
+	if (additive) return firstFreeNonPersistent ?? firstFree ?? lastNonPersistent;
+	return sameKind ?? firstFreeNonPersistent ?? firstFree ?? lastNonPersistent;
+};
+/**
+* Binding builder for the `thread` kind (D6). The `{ channel, message }` ->
+* `Thread` construction (with dedupe against `client.threads`) lives here so
+* callers can drive the generic `open` with a ready binding instead of a
+* thread-specific navigation method.
+*/
+var createThreadEntityBinding = (client, target) => {
+	const thread = client.threads.threadsById[target.message.id] ?? new stream_chat.Thread({
+		channel: target.channel,
+		client,
+		parentMessage: target.message
+	});
+	return {
+		key: thread.id ?? void 0,
+		kind: "thread",
+		source: thread
+	};
+};
+var chatViewNavigationStateSelector = (state) => ({ activeView: state.activeView });
+var ChatViewNavigationContext = (0, react.createContext)({
+	close: () => void 0,
+	hide: () => void 0,
+	open: () => ({
+		reason: "no-available-slot",
+		status: "rejected"
+	}),
+	openView: () => void 0,
+	popLayer: () => void 0,
+	pushLayer: () => void 0,
+	release: () => void 0,
+	unhide: () => void 0
+});
+var useChatViewNavigation = () => (0, react.useContext)(ChatViewNavigationContext);
+/** The slot (in the active view) currently holding a binding of `kind`, if any. */
+var useSlotForKind = (kind) => {
+	const { availableSlots, slotBindings } = useLayoutViewState();
+	return (0, react.useMemo)(() => availableSlots.find((slot) => getChatViewEntityBinding(slotBindings[slot])?.kind === kind), [
+		availableSlots,
+		kind,
+		slotBindings
+	]);
+};
+/** The slot (in the active view) whose binding carries entity `key`, if any. */
+var useSlotForKey = (key) => {
+	const { availableSlots, slotBindings } = useLayoutViewState();
+	return (0, react.useMemo)(() => key === void 0 ? void 0 : availableSlots.find((slot) => getChatViewEntityBinding(slotBindings[slot])?.key === key), [
+		availableSlots,
+		key,
+		slotBindings
+	]);
+};
+var ChatViewNavigationProvider = ({ children }) => {
+	const { layoutController, resolveActionTargetSlot } = useChatViewContext();
+	const registry = useSlotRegistry();
+	const { availableSlots, slotBindings, slotLayers } = useLayoutViewState();
+	const { activeView } = require_useComponentContextIcons.useStateStore(layoutController.state, chatViewNavigationStateSelector) ?? chatViewNavigationStateSelector(layoutController.state.getLatestValue());
+	const value = (0, react.useMemo)(() => {
+		const slotKind = (slot) => getChatViewEntityBinding(slotBindings[slot])?.kind;
+		const buildRuntimeForView = (view) => {
+			const viewState = getLayoutViewState(layoutController.state.getLatestValue(), view);
+			return {
+				activeViewState: viewState,
+				availableSlots: viewState.availableSlots,
+				orderedSlots: viewState.slotNames?.length ? viewState.slotNames : viewState.availableSlots,
+				slotBindings: viewState.slotBindings,
+				slotLayers: viewState.slotLayers ?? {}
+			};
+		};
+		const makeIsPersistentSlot = (runtime) => (slot) => isPersistentSlotKind(registry, getChatViewEntityBinding(runtime.slotBindings[slot])?.kind);
+		const materializeTargetSlot = (runtime, slot) => {
+			if (!slot) return void 0;
+			if (runtime.availableSlots.includes(slot)) return slot;
+			if (!runtime.orderedSlots.includes(slot)) return void 0;
+			const nextAvailableSlots = runtime.orderedSlots.filter((candidate) => runtime.availableSlots.includes(candidate) || candidate === slot);
+			layoutController.setAvailableSlots(nextAvailableSlots);
+			return slot;
+		};
+		const resolveTargetSlot = ({ additive, kind, requestedSlot, runtime, view }) => {
+			const action = !additive && kind === "channel" ? "openChannel" : !additive && kind === "thread" ? "openThread" : void 0;
+			if (action) {
+				const customTargetSlot = resolveActionTargetSlot(view, {
+					action,
+					activeView: view,
+					availableSlots: runtime.availableSlots,
+					requestedSlot,
+					slotBindings: runtime.slotBindings,
+					slotNames: runtime.orderedSlots
+				});
+				if (customTargetSlot) {
+					const materialized = materializeTargetSlot(runtime, customTargetSlot);
+					if (materialized) return materialized;
+				}
+			}
+			return materializeTargetSlot(runtime, resolveDefaultTargetSlot({
+				additive,
+				isPersistentSlot: makeIsPersistentSlot(runtime),
+				kind,
+				requestedSlot,
+				runtime
+			}));
+		};
+		const openView = (view, options) => {
+			layoutController.openView(view, { slot: options?.slot });
+		};
+		const closeReplyThreads = (replacedChannel) => {
+			availableSlots.forEach((slot) => {
+				const layers = slotLayers?.[slot] ?? [];
+				const top = layers[layers.length - 1];
+				const topEntity = getChatViewEntityBinding(top);
+				if (replacedChannel && topEntity?.kind === "thread" && topEntity.source.channel?.cid === replacedChannel.cid) {
+					layoutController.popLayer(slot);
+					return;
+				}
+				if (slotKind(slot) !== "thread") return;
+				if (!top) {
+					layoutController.release(slot);
+					return;
+				}
+				layoutController.bind(slot, top);
+				layoutController.popLayer(slot);
+			});
+		};
+		const open = (binding, options) => {
+			const kindView = resolveSlotKindView(registry, binding.kind);
+			const targetView = kindView ?? activeView;
+			const runtime = buildRuntimeForView(targetView);
+			const targetSlot = resolveTargetSlot({
+				additive: options?.additive,
+				kind: binding.kind,
+				requestedSlot: options?.slot,
+				runtime,
+				view: targetView
+			});
+			if (!targetSlot) return {
+				reason: "no-available-slot",
+				status: "rejected"
+			};
+			if (kindView) openView(targetView, options);
+			const isPersistentSlot = makeIsPersistentSlot(runtime);
+			const anchorSlot = runtime.availableSlots.find((slot) => !isPersistentSlot(slot));
+			const targetBase = runtime.slotBindings[targetSlot];
+			const targetBaseKind = getChatViewEntityBinding(targetBase)?.kind;
+			const targetOccupied = !!targetBase || !!runtime.slotLayers[targetSlot]?.length;
+			const isSecondaryTarget = targetSlot !== anchorSlot;
+			const shownInTarget = getChatViewEntityBinding(runtime.slotLayers[targetSlot]?.at(-1) ?? targetBase);
+			if (options?.additive && isSecondaryTarget && binding.key !== void 0 && shownInTarget?.key === binding.key) return {
+				slot: targetSlot,
+				status: "opened"
+			};
+			const stacksBesideSameKind = !!options?.additive && binding.kind === "channel";
+			const sameKindBaseReplace = !!targetBase && targetBaseKind === binding.kind && !stacksBesideSameKind;
+			if (options?.layer || isSecondaryTarget && targetOccupied && !sameKindBaseReplace) {
+				layoutController.pushLayer(targetSlot, createChatViewSlotBinding(binding));
+				return {
+					slot: targetSlot,
+					status: "layered"
+				};
+			}
+			if (binding.kind === "channel") {
+				const replaced = getChatViewEntityBinding(targetBase);
+				closeReplyThreads(replaced?.kind === "channel" ? replaced.source : void 0);
+			}
+			return layoutController.openInLayout(createChatViewSlotBinding(binding), { targetSlot });
+		};
+		const close = (slot) => {
+			if (!availableSlots.includes(slot)) return;
+			if (slotLayers?.[slot]?.length) {
+				layoutController.popLayer(slot);
+				return;
+			}
+			if (isPersistentSlotKind(registry, slotKind(slot))) return;
+			layoutController.release(slot);
+		};
+		const release = (slot) => {
+			if (!availableSlots.includes(slot)) return;
+			if (isPersistentSlotKind(registry, slotKind(slot))) return;
+			layoutController.release(slot);
+		};
+		const hide = (slot) => {
+			if (availableSlots.includes(slot)) layoutController.hide(slot);
+		};
+		const pushLayer = (slot, binding) => {
+			if (!availableSlots.includes(slot)) return;
+			layoutController.pushLayer(slot, createChatViewSlotBinding(binding));
+		};
+		const popLayer = (slot) => {
+			if (availableSlots.includes(slot)) layoutController.popLayer(slot);
+		};
+		const unhide = (slot) => {
+			if (availableSlots.includes(slot)) layoutController.unhide(slot);
+		};
+		return {
+			close,
+			hide,
+			open,
+			openView,
+			popLayer,
+			pushLayer,
+			release,
+			unhide
+		};
+	}, [
+		activeView,
+		availableSlots,
+		layoutController,
+		registry,
+		resolveActionTargetSlot,
+		slotBindings,
+		slotLayers
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewNavigationContext.Provider, {
+		value,
+		children
+	});
+};
+//#endregion
+//#region src/plugins/SlotLayout/workspaceNavigationAdapter.tsx
+/**
+* Implements the core-owned {@link WorkspaceNavigation} abstraction (D1) over the ChatView slot
+* system and provides it to the subtree. Rendered inside `ChatViewNavigationProvider` (so it can
+* drive `open`/`close`) and the ChatView context (so it can read the active view's slot state).
+*
+* Every read/operation is derived from the same slot primitives the ChatView hooks use, so core
+* consumers routed through the adapter behave exactly as they did calling the slot API directly.
+* An app may pass `deriveWorkspaceNavigation` to override individual operations (e.g. additive
+* open on ⌘/ctrl-click); whatever it leaves out stays as derived here.
+*/
+var WorkspaceNavigationAdapter = ({ children, deriveWorkspaceNavigation }) => {
+	const { close, open, release } = useChatViewNavigation();
+	const registry = useSlotRegistry();
+	const { activeView } = useChatViewContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
+	const { availableSlots, slotBindings, slotLayers } = useLayoutViewState();
+	const value = (0, react.useMemo)(() => {
+		const bindingOf = (slot) => getChatViewEntityBinding(slotBindings[slot]);
+		const slotOfKey = (key) => key === void 0 ? void 0 : availableSlots.find((slot) => bindingOf(slot)?.key === key);
+		const activeThreadSlot = availableSlots.find((slot) => bindingOf(slot)?.kind === "thread");
+		const visibleBindingOf = (slot) => {
+			const layers = slotLayers?.[slot];
+			return layers?.length ? getChatViewEntityBinding(layers[layers.length - 1]) : bindingOf(slot);
+		};
+		const slotShowingKey = (key) => availableSlots.find((slot) => visibleBindingOf(slot)?.key === key);
+		const slotShowingThread = availableSlots.find((slot) => visibleBindingOf(slot)?.kind === "thread");
+		const slotsShowingChannel = availableSlots.filter((slot) => visibleBindingOf(slot)?.kind === "channel");
+		const primarySlot = availableSlots.find((slot) => !isPersistentSlotKind(registry, bindingOf(slot)?.kind));
+		const dismissSlot = (slot) => slot === primarySlot ? close(slot) : release(slot);
+		const hasContentBeneath = (slot) => !!slot && !!slotLayers?.[slot]?.length;
+		const slotShowing = (key, panel) => {
+			if (key === void 0) return void 0;
+			if (panel && availableSlots.includes(panel) && visibleBindingOf(panel)?.key === key) return panel;
+			return slotShowingKey(key);
+		};
+		const openChannels = availableSlots.reduce((acc, slot) => {
+			const binding = bindingOf(slot);
+			if (binding?.kind === "channel") acc.push(binding.source);
+			return acc;
+		}, []);
+		const openThreads = availableSlots.reduce((acc, slot) => {
+			const binding = bindingOf(slot);
+			if (binding?.kind === "thread") acc.push(binding.source);
+			return acc;
+		}, []);
+		const isThreadsView = activeView === "threads";
+		return {
+			canGoBack: (key, panel) => hasContentBeneath(slotShowing(key, panel)),
+			closeChannel: (cid, options) => {
+				const slot = slotShowing(cid, options?.panel);
+				if (slot) dismissSlot(slot);
+			},
+			closeThread: (threadId, options) => {
+				const slot = (threadId === void 0 ? void 0 : options?.panel ? slotShowing(threadId, options.panel) : slotOfKey(threadId) ?? slotShowingKey(threadId)) ?? activeThreadSlot ?? slotShowingThread;
+				if (slot) dismissSlot(slot);
+			},
+			goBack: (key, options) => {
+				const slot = slotShowing(key, options?.panel);
+				if (hasContentBeneath(slot)) close(slot);
+			},
+			isChannelActive: (cid) => cid !== void 0 && !!slotShowingKey(cid),
+			isChannelDismissable: (cid, panel) => {
+				const slot = slotShowing(cid, panel);
+				return !!slot && slotsShowingChannel.indexOf(slot) > 0;
+			},
+			isThreadActive: (threadId) => threadId !== void 0 && availableSlots.some((slot) => {
+				const binding = visibleBindingOf(slot);
+				return binding?.kind === "thread" && binding.source.id === threadId;
+			}),
+			isThreadDismissable: (threadId, panel) => {
+				if (!isThreadsView) return true;
+				const slot = panel ? slotShowing(threadId, panel) : threadId === void 0 ? void 0 : slotOfKey(threadId);
+				return !!slot && !!activeThreadSlot && slot !== activeThreadSlot;
+			},
+			isThreadsView,
+			openChannel: (channel, options) => {
+				open({
+					key: channel.cid ?? void 0,
+					kind: "channel",
+					source: channel
+				}, options);
+			},
+			openChannels,
+			openThread: (target, options) => {
+				open(target instanceof stream_chat.Thread ? {
+					key: target.id ?? void 0,
+					kind: "thread",
+					source: target
+				} : createThreadEntityBinding(client, target), options);
+			},
+			openThreads
+		};
+	}, [
+		activeView,
+		availableSlots,
+		client,
+		close,
+		open,
+		registry,
+		release,
+		slotBindings,
+		slotLayers
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.WorkspaceNavigationProvider, {
+		value: (0, react.useMemo)(() => {
+			if (!deriveWorkspaceNavigation) return value;
+			const overrides = Object.fromEntries(Object.entries(deriveWorkspaceNavigation(value)).filter(([, member]) => member !== void 0));
+			return {
+				...value,
+				...overrides
+			};
+		}, [deriveWorkspaceNavigation, value]),
+		children
+	});
+};
+//#endregion
+//#region src/plugins/SlotLayout/slotBinding.ts
+var isChatViewEntityBinding = (value) => {
+	if (!value || typeof value !== "object") return false;
+	const candidate = value;
+	return typeof candidate.kind === "string" && "source" in candidate;
+};
+var getChatViewEntityBinding = (binding) => isChatViewEntityBinding(binding?.payload) ? binding.payload : void 0;
+var createChatViewSlotBinding = (entity) => ({
+	key: entity.key ? `${entity.kind}:${entity.key}` : void 0,
+	payload: entity
+});
+//#endregion
+//#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__ */ (0, react_jsx_runtime.jsx)("section", {
+		"aria-hidden": hidden || void 0,
+		className: (0, clsx.default)("str-chat__chat-view__slot", { "str-chat__chat-view__slot--hidden": hidden }, className),
+		"data-slot": slot,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.WorkspacePanelProvider, {
+			panel: slot,
+			children: layers.length === 0 ? baseContent : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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__ */ (0, react_jsx_runtime.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
+//#region src/plugins/SlotLayout/layout/WorkspaceLayout.tsx
+var WorkspaceLayout = ({ navRail, slots }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: "str-chat__chat-view__workspace-layout",
+	children: [navRail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__chat-view__workspace-layout-nav-rail",
+		children: navRail
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("str-chat__chat-view__workspace-layout-slots", { "str-chat__chat-view__workspace-layout-slots--empty": slots.length === 0 }),
+		children: slots.map(({ content, slot }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+			className: "str-chat__chat-view__workspace-layout-slot",
+			slot,
+			children: content
+		}, slot))
+	})]
+});
+//#endregion
+//#region src/plugins/SlotLayout/layoutController/LayoutController.ts
+var DEFAULT_LAYOUT_STATE = {
+	activeView: "channels",
+	layouts: {}
+};
+/** Build a full per-layout runtime state, defaulting any field left unset.
+* Handy for `initialState` callers that only want to seed a couple of fields. */
+var createLayoutRuntimeState = (partial = {}) => ({
+	availableSlots: partial.availableSlots ? [...partial.availableSlots] : [],
+	hiddenSlots: { ...partial.hiddenSlots ?? {} },
+	slotBindings: { ...partial.slotBindings ?? {} },
+	slotForwardHistory: { ...partial.slotForwardHistory ?? {} },
+	slotHistory: { ...partial.slotHistory ?? {} },
+	slotLayers: { ...partial.slotLayers ?? {} },
+	slotMeta: { ...partial.slotMeta ?? {} },
+	slotNames: partial.slotNames ? [...partial.slotNames] : void 0
+});
+var DEFAULT_DUPLICATE_ENTITY_POLICY = "allow";
+/**
+* Slot binding means:
+*
+* - `slot name` -> `what should be shown in that slot`.
+*
+* Example:
+* - `main` -> `{ kind: 'channel', source: channelA }`
+* - `main-thread` -> `{ kind: 'thread', source: threadX }`
+*
+* In LayoutController:
+* - `payload` is the thing to render in the slot.
+* - `key` (optional) is used to identify duplicates.
+* - changing a binding means \"show different data in this slot now\".
+*/
+var resolveBindingKey = (binding) => binding.key;
+var toViewState = (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 mergeViewState = (state, nextViewState, view = state.activeView) => ({
+	...state,
+	layouts: {
+		...state.layouts ?? {},
+		[view]: {
+			availableSlots: [...nextViewState.availableSlots],
+			hiddenSlots: { ...nextViewState.hiddenSlots },
+			slotBindings: { ...nextViewState.slotBindings },
+			slotForwardHistory: { ...nextViewState.slotForwardHistory },
+			slotHistory: { ...nextViewState.slotHistory },
+			slotLayers: { ...nextViewState.slotLayers ?? {} },
+			slotMeta: { ...nextViewState.slotMeta },
+			slotNames: nextViewState.slotNames ? [...nextViewState.slotNames] : void 0
+		}
+	}
+});
+var buildInitialState = (partialState) => {
+	const activeView = partialState?.activeView ?? DEFAULT_LAYOUT_STATE.activeView;
+	const { availableSlots, hiddenSlots, slotBindings, slotForwardHistory, slotHistory, slotMeta, slotNames } = partialState ?? {};
+	const hasFlatViewFields = Boolean(availableSlots || hiddenSlots || slotBindings || slotForwardHistory || slotHistory || slotMeta || slotNames);
+	const normalized = {
+		...DEFAULT_LAYOUT_STATE,
+		...partialState,
+		activeView,
+		layouts: {
+			...DEFAULT_LAYOUT_STATE.layouts ?? {},
+			...hasFlatViewFields ? { [activeView]: createLayoutRuntimeState({
+				availableSlots,
+				hiddenSlots,
+				slotBindings,
+				slotForwardHistory,
+				slotHistory,
+				slotMeta,
+				slotNames
+			}) } : {},
+			...partialState?.layouts ?? {}
+		}
+	};
+	const initialViewState = toViewState(normalized, activeView);
+	const next = mergeViewState(normalized, initialViewState, activeView);
+	if (!next.layouts?.[activeView]?.availableSlots?.length && initialViewState.slotNames?.length) return mergeViewState(next, {
+		...initialViewState,
+		availableSlots: [...initialViewState.slotNames]
+	}, activeView);
+	return next;
+};
+var isSameSlotBinding = (first, second) => {
+	const firstKey = resolveBindingKey(first);
+	const secondKey = resolveBindingKey(second);
+	if (firstKey && secondKey) return firstKey === secondKey;
+	return first === second;
+};
+var findBindingSlot = (viewState, binding) => {
+	const identityKey = resolveBindingKey(binding);
+	if (!identityKey) return;
+	return viewState.availableSlots.find((slot) => {
+		const boundBinding = viewState.slotBindings[slot];
+		if (!boundBinding) return false;
+		return resolveBindingKey(boundBinding) === identityKey;
+	});
+};
+var pushSlotHistory = (viewState, slot, binding) => {
+	const slotHistory = viewState.slotHistory?.[slot] ?? [];
+	const previousBinding = slotHistory[slotHistory.length - 1];
+	if (previousBinding && isSameSlotBinding(previousBinding, binding)) return viewState;
+	return {
+		...viewState,
+		slotHistory: {
+			...viewState.slotHistory ?? {},
+			[slot]: [...slotHistory, binding]
+		}
+	};
+};
+var popSlotHistory = (viewState, slot) => {
+	const slotHistory = viewState.slotHistory?.[slot];
+	if (!slotHistory?.length) return { state: viewState };
+	const popped = slotHistory[slotHistory.length - 1];
+	const nextSlotHistory = { ...viewState.slotHistory ?? {} };
+	const remainingHistory = slotHistory.slice(0, -1);
+	if (remainingHistory.length) nextSlotHistory[slot] = remainingHistory;
+	else delete nextSlotHistory[slot];
+	return {
+		popped,
+		state: {
+			...viewState,
+			slotHistory: nextSlotHistory
+		}
+	};
+};
+var pushSlotForwardHistory = (viewState, slot, binding) => {
+	const slotForwardHistory = viewState.slotForwardHistory?.[slot] ?? [];
+	const previousBinding = slotForwardHistory[slotForwardHistory.length - 1];
+	if (previousBinding && isSameSlotBinding(previousBinding, binding)) return viewState;
+	return {
+		...viewState,
+		slotForwardHistory: {
+			...viewState.slotForwardHistory ?? {},
+			[slot]: [...slotForwardHistory, binding]
+		}
+	};
+};
+var popSlotForwardHistory = (viewState, slot) => {
+	const slotForwardHistory = viewState.slotForwardHistory?.[slot];
+	if (!slotForwardHistory?.length) return { state: viewState };
+	const popped = slotForwardHistory[slotForwardHistory.length - 1];
+	const nextSlotForwardHistory = { ...viewState.slotForwardHistory ?? {} };
+	const remainingHistory = slotForwardHistory.slice(0, -1);
+	if (remainingHistory.length) nextSlotForwardHistory[slot] = remainingHistory;
+	else delete nextSlotForwardHistory[slot];
+	return {
+		popped,
+		state: {
+			...viewState,
+			slotForwardHistory: nextSlotForwardHistory
+		}
+	};
+};
+var clearSlotForwardHistory = (viewState, slot) => {
+	if (!viewState.slotForwardHistory?.[slot]) return viewState;
+	const nextSlotForwardHistory = { ...viewState.slotForwardHistory ?? {} };
+	delete nextSlotForwardHistory[slot];
+	return {
+		...viewState,
+		slotForwardHistory: nextSlotForwardHistory
+	};
+};
+var upsertSlotBinding = (viewState, slot, binding) => {
+	const nextSlotBindings = {
+		...viewState.slotBindings,
+		[slot]: binding
+	};
+	const wasOccupied = !!viewState.slotBindings[slot];
+	const hasOccupiedAt = typeof viewState.slotMeta[slot]?.occupiedAt === "number";
+	const nextSlotMeta = !wasOccupied || !hasOccupiedAt ? {
+		...viewState.slotMeta,
+		[slot]: { occupiedAt: Date.now() }
+	} : viewState.slotMeta;
+	return {
+		...viewState,
+		slotBindings: nextSlotBindings,
+		slotMeta: nextSlotMeta
+	};
+};
+var clearSlotBinding = (viewState, slot) => {
+	if (!viewState.slotBindings[slot] && !viewState.slotMeta[slot] && !viewState.slotHistory?.[slot] && !viewState.slotForwardHistory?.[slot] && !viewState.slotLayers?.[slot]) return viewState;
+	const nextSlotBindings = { ...viewState.slotBindings };
+	delete nextSlotBindings[slot];
+	const nextSlotMeta = { ...viewState.slotMeta };
+	delete nextSlotMeta[slot];
+	const nextSlotHistory = { ...viewState.slotHistory ?? {} };
+	delete nextSlotHistory[slot];
+	const nextSlotForwardHistory = { ...viewState.slotForwardHistory ?? {} };
+	delete nextSlotForwardHistory[slot];
+	const nextSlotLayers = { ...viewState.slotLayers ?? {} };
+	delete nextSlotLayers[slot];
+	return {
+		...viewState,
+		slotBindings: nextSlotBindings,
+		slotForwardHistory: nextSlotForwardHistory,
+		slotHistory: nextSlotHistory,
+		slotLayers: nextSlotLayers,
+		slotMeta: nextSlotMeta
+	};
+};
+var resolveOpenTargetSlot = (activeViewState, options) => {
+	const requestedSlot = options?.targetSlot;
+	if (!requestedSlot) return void 0;
+	return activeViewState.availableSlots.includes(requestedSlot) ? requestedSlot : void 0;
+};
+var LayoutController = class {
+	duplicateEntityPolicy;
+	resolveDuplicateEntity;
+	state;
+	constructor(options = {}) {
+		const { duplicateEntityPolicy = DEFAULT_DUPLICATE_ENTITY_POLICY, initialState, resolveDuplicateEntity, state = new _stream_io_state_store.StateStore(buildInitialState(initialState)) } = options;
+		this.duplicateEntityPolicy = duplicateEntityPolicy;
+		this.resolveDuplicateEntity = resolveDuplicateEntity;
+		this.state = state;
+	}
+	setActiveView = (next) => {
+		this.state.next((current) => ({
+			...current,
+			activeView: next
+		}));
+	};
+	openView = (view, options) => {
+		this.state.next((current) => ({
+			...current,
+			activeView: view
+		}));
+	};
+	setAvailableSlots = (slots) => {
+		this.state.next((current) => {
+			return mergeViewState(current, {
+				...toViewState(current),
+				availableSlots: [...slots]
+			});
+		});
+	};
+	setSlotNames = (slots) => {
+		this.state.next((current) => {
+			return mergeViewState(current, {
+				...toViewState(current),
+				slotNames: slots?.length ? [...slots] : void 0
+			});
+		});
+	};
+	hide = (slot) => {
+		this.state.next((current) => {
+			const activeViewState = toViewState(current);
+			return mergeViewState(current, {
+				...activeViewState,
+				hiddenSlots: {
+					...activeViewState.hiddenSlots,
+					[slot]: true
+				}
+			});
+		});
+	};
+	unhide = (slot) => {
+		this.state.next((current) => {
+			const activeViewState = toViewState(current);
+			return mergeViewState(current, {
+				...activeViewState,
+				hiddenSlots: {
+					...activeViewState.hiddenSlots,
+					[slot]: false
+				}
+			});
+		});
+	};
+	bind = (slot, binding) => {
+		this.state.next((current) => {
+			return mergeViewState(current, clearSlotForwardHistory(upsertSlotBinding(toViewState(current), slot, binding), slot));
+		});
+	};
+	release = (slot) => {
+		this.state.next((current) => {
+			return mergeViewState(current, clearSlotBinding(toViewState(current), slot));
+		});
+	};
+	pushLayer = (slot, binding) => {
+		this.state.next((current) => {
+			const activeViewState = toViewState(current);
+			const slotLayers = activeViewState.slotLayers?.[slot] ?? [];
+			return mergeViewState(current, {
+				...activeViewState,
+				slotLayers: {
+					...activeViewState.slotLayers ?? {},
+					[slot]: [...slotLayers, binding]
+				}
+			});
+		});
+	};
+	popLayer = (slot) => {
+		this.state.next((current) => {
+			const activeViewState = toViewState(current);
+			const slotLayers = activeViewState.slotLayers?.[slot];
+			if (!slotLayers?.length) return current;
+			const nextSlotLayers = { ...activeViewState.slotLayers ?? {} };
+			const remaining = slotLayers.slice(0, -1);
+			if (remaining.length) nextSlotLayers[slot] = remaining;
+			else delete nextSlotLayers[slot];
+			return mergeViewState(current, {
+				...activeViewState,
+				slotLayers: nextSlotLayers
+			});
+		});
+	};
+	goBack = (slot) => {
+		this.state.next((current) => {
+			const { popped, state: nextState } = popSlotHistory(toViewState(current), slot);
+			if (!popped) return mergeViewState(current, nextState);
+			const currentBinding = nextState.slotBindings[slot];
+			return mergeViewState(current, upsertSlotBinding(currentBinding ? pushSlotForwardHistory(nextState, slot, currentBinding) : nextState, slot, popped));
+		});
+	};
+	goForward = (slot) => {
+		this.state.next((current) => {
+			const { popped, state: nextState } = popSlotForwardHistory(toViewState(current), slot);
+			if (!popped) return mergeViewState(current, nextState);
+			const currentBinding = nextState.slotBindings[slot];
+			return mergeViewState(current, upsertSlotBinding(currentBinding ? pushSlotHistory(nextState, slot, currentBinding) : nextState, slot, popped));
+		});
+	};
+	openInLayout = (binding, openOptions) => {
+		const current = this.state.getLatestValue();
+		const activeViewState = toViewState(current);
+		const targetSlot = resolveOpenTargetSlot(activeViewState, openOptions);
+		if (!targetSlot) return {
+			reason: "no-available-slot",
+			status: "rejected"
+		};
+		const existingBindingSlot = findBindingSlot(activeViewState, binding);
+		if (existingBindingSlot) {
+			const duplicatePolicy = this.resolveDuplicateEntity?.({
+				activeViewState,
+				binding,
+				existingSlot: existingBindingSlot,
+				requestedSlot: openOptions?.targetSlot,
+				state: current
+			}) ?? this.duplicateEntityPolicy;
+			if (duplicatePolicy === "reject") return {
+				reason: "duplicate-binding",
+				status: "rejected"
+			};
+			if (duplicatePolicy === "move" && existingBindingSlot !== targetSlot) this.state.next((nextState) => mergeViewState(nextState, clearSlotBinding(toViewState(nextState), existingBindingSlot)));
+		}
+		const replacedBinding = toViewState(this.state.getLatestValue()).slotBindings[targetSlot];
+		this.state.next((nextState) => {
+			const currentViewState = toViewState(nextState);
+			const currentSlotBinding = currentViewState.slotBindings[targetSlot];
+			return mergeViewState(nextState, clearSlotForwardHistory(upsertSlotBinding(currentSlotBinding && !isSameSlotBinding(currentSlotBinding, binding) ? pushSlotHistory(currentViewState, targetSlot, currentSlotBinding) : currentViewState, targetSlot, binding), targetSlot));
+		});
+		if (replacedBinding && replacedBinding !== binding) return {
+			replaced: replacedBinding,
+			slot: targetSlot,
+			status: "replaced"
+		};
+		return {
+			slot: targetSlot,
+			status: "opened"
+		};
+	};
+};
+//#endregion
+//#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
+//#region src/plugins/SlotLayout/ChatView.tsx
+var ChatViewContext = (0, react.createContext)(void 0);
+var ChatViewA11yContext = (0, react.createContext)(DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE);
+var useChatViewContext = () => require_useComponentContextIcons.requireContext((0, react.useContext)(ChatViewContext), "useChatViewContext", "ChatView");
+var activeViewSelector = ({ activeView }) => ({ activeView });
+var workspaceLayoutStateSelector = (state) => ({
+	activeView: state.activeView,
+	viewState: getLayoutViewState(state)
+});
+var DefaultSlotFallback = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "str-chat__chat-view__workspace-layout-slot-fallback",
+	children: "Select a channel to start messaging"
+});
+var resolveSlotFallbackComponent = ({ slot, SlotFallback, slotFallbackComponents }) => slotFallbackComponents?.[slot] ?? SlotFallback ?? DefaultSlotFallback;
+var BUILTIN_WORKSPACE_LAYOUT = "nav-rail-entity-list-workspace";
+var DEFAULT_LIST_BINDING_KEY = "list";
+var LIST_KIND_BY_LAYOUT = {
+	channels: "channelList",
+	threads: "threadList"
+};
+var buildDefaultLayoutDescriptors = (slots) => {
+	const seedSlot = slots[0];
+	return ["channels", "threads"].map((id) => ({
+		id,
+		initialBindings: seedSlot ? { [seedSlot]: {
+			key: DEFAULT_LIST_BINDING_KEY,
+			kind: LIST_KIND_BY_LAYOUT[id],
+			source: {}
+		} } : void 0,
+		slots
+	}));
+};
+var DEFAULT_SLOT_NAMES = ["slot1"];
+var DEFAULT_LAYOUT_DESCRIPTORS = buildDefaultLayoutDescriptors(DEFAULT_SLOT_NAMES);
+var seedLayoutsFromDescriptors = (descriptors) => descriptors.reduce((acc, descriptor) => {
+	const slotBindings = {};
+	Object.entries(descriptor.initialBindings ?? {}).forEach(([slot, entity]) => {
+		if (entity) slotBindings[slot] = createChatViewSlotBinding(entity);
+	});
+	acc[descriptor.id] = createLayoutRuntimeState({
+		availableSlots: descriptor.slots,
+		slotBindings,
+		slotNames: descriptor.slots
+	});
+	return acc;
+}, {});
+var ChatView = ({ children, deriveWorkspaceNavigation, dialogManagerId, duplicateEntityPolicy, entityInferrers = [], layout, layoutController, layouts: layoutsProp, resolveDuplicateEntity, SlotFallback, slotFallbackComponents, slotRenderers, viewActionSlotResolvers: viewActionSlotResolversProp, views }) => {
+	const { theme } = require_useComponentContextIcons.useChatContext();
+	const chatViewId = require_Thread.useStableId();
+	const a11yValue = (0, react.useMemo)(() => createChatViewA11yContextValue(chatViewId), [chatViewId]);
+	const [viewActionSlotResolvers, setViewActionSlotResolvers] = (0, react.useState)({});
+	const layoutDescriptors = layoutsProp ?? DEFAULT_LAYOUT_DESCRIPTORS;
+	const seedFromDescriptors = !!layoutsProp || layout === BUILTIN_WORKSPACE_LAYOUT || !!views;
+	const internalLayoutController = (0, react.useMemo)(() => new LayoutController({
+		duplicateEntityPolicy,
+		initialState: {
+			activeView: "channels",
+			layouts: seedFromDescriptors ? seedLayoutsFromDescriptors(layoutDescriptors) : { channels: createLayoutRuntimeState({
+				availableSlots: DEFAULT_SLOT_NAMES,
+				slotNames: DEFAULT_SLOT_NAMES
+			}) }
+		},
+		resolveDuplicateEntity
+	}), [
+		duplicateEntityPolicy,
+		layoutDescriptors,
+		resolveDuplicateEntity,
+		seedFromDescriptors
+	]);
+	const effectiveLayoutController = layoutController ?? internalLayoutController;
+	const { activeView } = require_useComponentContextIcons.useStateStore(effectiveLayoutController.state, activeViewSelector) ?? activeViewSelector(effectiveLayoutController.state.getLatestValue());
+	const setActiveView = (0, react.useCallback)((cv) => {
+		effectiveLayoutController.setActiveView(cv);
+	}, [effectiveLayoutController]);
+	const registerViewActionSlotResolvers = (0, react.useCallback)((view, resolvers) => {
+		setViewActionSlotResolvers((current) => {
+			if (current[view] === resolvers) return current;
+			const next = { ...current };
+			if (!resolvers) delete next[view];
+			else next[view] = resolvers;
+			return next;
+		});
+	}, []);
+	const resolveActionTargetSlot = (0, react.useCallback)((view, args) => viewActionSlotResolvers[view]?.[args.action]?.(args), [viewActionSlotResolvers]);
+	const value = (0, react.useMemo)(() => ({
+		activeView,
+		entityInferers: entityInferrers,
+		layoutController: effectiveLayoutController,
+		registerViewActionSlotResolvers,
+		resolveActionTargetSlot,
+		setActiveView
+	}), [
+		activeView,
+		effectiveLayoutController,
+		entityInferrers,
+		registerViewActionSlotResolvers,
+		resolveActionTargetSlot,
+		setActiveView
+	]);
+	(0, react.useEffect)(() => {
+		if (!viewActionSlotResolversProp) return;
+		const entries = Object.entries(viewActionSlotResolversProp);
+		entries.forEach(([view, resolvers]) => registerViewActionSlotResolvers(view, resolvers));
+		return () => {
+			entries.forEach(([view]) => registerViewActionSlotResolvers(view, void 0));
+		};
+	}, [registerViewActionSlotResolvers, viewActionSlotResolversProp]);
+	const { viewState } = require_useComponentContextIcons.useStateStore(effectiveLayoutController.state, workspaceLayoutStateSelector) ?? workspaceLayoutStateSelector(effectiveLayoutController.state.getLatestValue());
+	const slotKindRegistry = (0, react.useMemo)(() => resolveSlotKindRegistry(slotRenderers), [slotRenderers]);
+	const activeViewContent = views?.[activeView];
+	const content = views ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, activeViewContent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `str-chat__chat-view__${activeView}`,
+		id: a11yValue.chatViewPanelIds[activeView],
+		children: activeViewContent
+	})] }) : layout === BUILTIN_WORKSPACE_LAYOUT ? (() => {
+		const slots = viewState.availableSlots.map((slot) => {
+			const content = renderSlotFromRegistry(getChatViewEntityBinding(viewState.slotBindings[slot]), slot, slotKindRegistry);
+			const Fallback = resolveSlotFallbackComponent({
+				slot,
+				SlotFallback,
+				slotFallbackComponents
+			});
+			return {
+				content: content ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, { slot }),
+				slot
+			};
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceLayout, {
+			navRail: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewSelector, {}),
+			slots
+		});
+	})() : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewA11yContext.Provider, {
+		value: a11yValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewContext.Provider, {
+			value,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotRegistryContext.Provider, {
+				value: slotKindRegistry,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewNavigationProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceNavigationAdapter, {
+					deriveWorkspaceNavigation,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, clsx.default)("str-chat", theme, "str-chat__chat-view"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.DialogManagerProvider, {
+							id: dialogManagerId,
+							children: content
+						})
+					})
+				}) })
+			})
+		})
+	});
+};
+var useActiveThread = ({ activeThread }) => {
+	(0, react.useEffect)(() => {
+		if (!activeThread) return;
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "visible" && document.hasFocus()) activeThread.activate();
+			if (document.visibilityState === "hidden" || !document.hasFocus()) activeThread.deactivate();
+		};
+		handleVisibilityChange();
+		window.addEventListener("focus", handleVisibilityChange);
+		window.addEventListener("blur", handleVisibilityChange);
+		return () => {
+			activeThread.deactivate();
+			window.removeEventListener("blur", handleVisibilityChange);
+			window.removeEventListener("focus", handleVisibilityChange);
+		};
+	}, [activeThread]);
+};
+var ChatViewSelectorButton = ({ ActiveIcon, children, className, Icon, iconOnly = true, isActive, text, ...props }) => {
+	const SelectorIcon = isActive && ActiveIcon ? ActiveIcon : Icon;
+	const shouldShowTooltip = !!text && iconOnly;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__chat-view__selector-button-container",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useComponentContextIcons.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),
+			variant: "secondary",
+			...props,
+			children: [children ?? (SelectorIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectorIcon, {})), !iconOnly && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "str-chat__chat-view__selector-button-text",
+				children: text
+			})]
+		}), shouldShowTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-hidden": "true",
+			className: "str-chat__chat-view__selector-button-tooltip str-chat__tooltip",
+			children: text
+		})]
+	});
+};
+var unreadThreadCountSelector = ({ unreadThreadCount }) => ({ unreadThreadCount });
+var ChatViewChannelsSelectorButton = ({ iconOnly = true }) => {
+	const { IconMessageBubble, IconMessageBubbleFill } = require_useComponentContextIcons.useComponentContextIcons();
+	const { activeView, setActiveView } = useChatViewContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const isActive = activeView === "channels";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewSelectorButton, {
+		ActiveIcon: IconMessageBubbleFill,
+		"aria-label": t("slotLayout.chatView.openChannelsView.ariaLabel", "Open channels view"),
+		Icon: IconMessageBubble,
+		iconOnly,
+		isActive,
+		onClick: () => setActiveView("channels"),
+		onPointerDown: () => setActiveView("channels"),
+		text: t("slotLayout.chatView.channels.text", "Channels")
+	});
+};
+var ChatViewThreadsSelectorButton = ({ iconOnly = true }) => {
+	const { IconThread, IconThreadFill } = require_useComponentContextIcons.useComponentContextIcons();
+	const { client } = require_useComponentContextIcons.useChatContext();
+	const { unreadThreadCount } = require_useComponentContextIcons.useStateStore(client.threads.state, unreadThreadCountSelector) ?? { unreadThreadCount: 0 };
+	const { activeView, setActiveView } = useChatViewContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const isActive = activeView === "threads";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatViewSelectorButton, {
+		ActiveIcon: IconThreadFill,
+		"aria-label": unreadThreadCount > 0 ? t("slotLayout.chatView.openThreadsViewUnread.ariaLabel", {
+			count: unreadThreadCount,
+			defaultValue_one: "Open threads view, {{ count }} unread thread",
+			defaultValue_other: "Open threads view, {{ count }} unread threads"
+		}) : t("slotLayout.chatView.openThreadsView.ariaLabel", "Open threads view"),
+		Icon: IconThread,
+		iconOnly,
+		isActive,
+		onClick: () => setActiveView("threads"),
+		onPointerDown: () => setActiveView("threads"),
+		text: t("common.threads.text", "Threads"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnreadCountBadge, {
+			count: unreadThreadCount,
+			position: "top-right",
+			children: isActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconThreadFill, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconThread, {})
+		})
+	});
+};
+var defaultChatViewSelectorItemSet = [{
+	Component: ChatViewChannelsSelectorButton,
+	type: "channels"
+}, {
+	Component: ChatViewThreadsSelectorButton,
+	type: "threads"
+}];
+var ChatViewSelector = ({ iconOnly = true, itemSet = defaultChatViewSelectorItemSet }) => {
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": t("slotLayout.chatView.chatViewControls.ariaLabel", "Chat view controls"),
+		className: "str-chat__chat-view__selector",
+		role: "navigation",
+		children: itemSet.map(({ Component, type }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { iconOnly }, type))
+	});
+};
+ChatView.Selector = ChatViewSelector;
+//#endregion
+//#region src/plugins/SlotLayout/layoutController/serialization.ts
+var defaultSerializeEntityBinding = (binding) => ({
+	key: binding.key,
+	payload: binding.payload
+});
+var defaultDeserializeEntityBinding = (binding) => binding;
+var serializeBindings = (bindings, serializeEntityBinding) => Object.entries(bindings ?? {}).reduce((acc, [slot, binding]) => {
+	acc[slot] = binding ? serializeEntityBinding(binding) : void 0;
+	return acc;
+}, {});
+var serializeHistory = (history, serializeEntityBinding) => Object.entries(history ?? {}).reduce((acc, [slot, entities]) => {
+	if (!entities?.length) {
+		acc[slot] = void 0;
+		return acc;
+	}
+	const serialized = entities.map(serializeEntityBinding).filter((binding) => !!binding);
+	acc[slot] = serialized.length ? serialized : void 0;
+	return acc;
+}, {});
+var serializeRuntimeState = (runtime, serializeEntityBinding) => ({
+	availableSlots: [...runtime.availableSlots],
+	hiddenSlots: { ...runtime.hiddenSlots },
+	slotBindings: serializeBindings(runtime.slotBindings, serializeEntityBinding),
+	slotForwardHistory: serializeHistory(runtime.slotForwardHistory, serializeEntityBinding),
+	slotHistory: serializeHistory(runtime.slotHistory, serializeEntityBinding),
+	slotMeta: { ...runtime.slotMeta },
+	slotNames: runtime.slotNames ? [...runtime.slotNames] : void 0
+});
+var deserializeBindings = (bindings, deserializeEntityBinding) => Object.entries(bindings ?? {}).reduce((acc, [slot, binding]) => {
+	acc[slot] = binding ? deserializeEntityBinding(binding) : void 0;
+	return acc;
+}, {});
+var deserializeHistory = (history, deserializeEntityBinding) => Object.entries(history ?? {}).reduce((acc, [slot, entities]) => {
+	if (!entities?.length) {
+		acc[slot] = void 0;
+		return acc;
+	}
+	const deserialized = entities.map(deserializeEntityBinding).filter((binding) => !!binding);
+	acc[slot] = deserialized.length ? deserialized : void 0;
+	return acc;
+}, {});
+var deserializeRuntimeState = (runtime, deserializeEntityBinding) => ({
+	availableSlots: [...runtime.availableSlots],
+	hiddenSlots: { ...runtime.hiddenSlots },
+	slotBindings: deserializeBindings(runtime.slotBindings, deserializeEntityBinding),
+	slotForwardHistory: deserializeHistory(runtime.slotForwardHistory, deserializeEntityBinding),
+	slotHistory: deserializeHistory(runtime.slotHistory, deserializeEntityBinding),
+	slotMeta: { ...runtime.slotMeta },
+	slotNames: runtime.slotNames ? [...runtime.slotNames] : void 0
+});
+var serializeLayoutState = (state, options = {}) => {
+	const serializeEntityBinding = options.serializeEntityBinding ?? defaultSerializeEntityBinding;
+	const layouts = Object.entries(state.layouts ?? {}).reduce((acc, [view, runtime]) => {
+		if (runtime) acc[view] = serializeRuntimeState(runtime, serializeEntityBinding);
+		return acc;
+	}, {});
+	return {
+		activeView: state.activeView,
+		layouts
+	};
+};
+var restoreLayoutState = (snapshot, options = {}) => {
+	const deserializeEntityBinding = options.deserializeEntityBinding ?? defaultDeserializeEntityBinding;
+	const layouts = Object.entries(snapshot.layouts ?? {}).reduce((acc, [view, runtime]) => {
+		if (runtime) acc[view] = deserializeRuntimeState(runtime, deserializeEntityBinding);
+		return acc;
+	}, {});
+	return {
+		activeView: snapshot.activeView,
+		layouts
+	};
+};
+var serializeLayoutControllerState = (controller, options) => serializeLayoutState(controller.state.getLatestValue(), options);
+var restoreLayoutControllerState = (controller, snapshot, options) => {
+	controller.state.next(() => restoreLayoutState(snapshot, options));
+};
+//#endregion
+//#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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.WorkspacePanelProvider, {
+		panel: slot,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.Channel, {
+			...channelProps,
+			channel,
+			children
+		})
+	});
+};
+//#endregion
+//#region src/plugins/SlotLayout/ThreadSlot.tsx
+var ThreadSlot = ({ children, fallback = null, hideIfEmpty = true, slot, ...threadProps }) => {
+	const { layoutController } = useChatViewContext();
+	const thread = useSlotThread({ slot });
+	(0, react.useEffect)(() => {
+		if (!slot || !hideIfEmpty) return;
+		if (thread) layoutController.unhide(slot);
+		else layoutController.hide(slot);
+	}, [
+		hideIfEmpty,
+		layoutController,
+		slot,
+		thread
+	]);
+	if (!thread) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.WorkspacePanelProvider, {
+		panel: slot,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.Thread, {
+			...threadProps,
+			thread,
+			children
+		})
+	});
+};
+//#endregion
+//#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];
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+		slot: listSlot,
+		children: children ?? fallback
+	});
+};
+//#endregion
+Object.defineProperty(exports, "ChannelSlot", {
+	enumerable: true,
+	get: function() {
+		return ChannelSlot;
+	}
+});
+Object.defineProperty(exports, "ChatView", {
+	enumerable: true,
+	get: function() {
+		return ChatView;
+	}
+});
+Object.defineProperty(exports, "ChatViewChannelsSelectorButton", {
+	enumerable: true,
+	get: function() {
+		return ChatViewChannelsSelectorButton;
+	}
+});
+Object.defineProperty(exports, "ChatViewContext", {
+	enumerable: true,
+	get: function() {
+		return ChatViewContext;
+	}
+});
+Object.defineProperty(exports, "ChatViewNavigationProvider", {
+	enumerable: true,
+	get: function() {
+		return ChatViewNavigationProvider;
+	}
+});
+Object.defineProperty(exports, "ChatViewSelectorButton", {
+	enumerable: true,
+	get: function() {
+		return ChatViewSelectorButton;
+	}
+});
+Object.defineProperty(exports, "ChatViewThreadsSelectorButton", {
+	enumerable: true,
+	get: function() {
+		return ChatViewThreadsSelectorButton;
+	}
+});
+Object.defineProperty(exports, "Slot", {
+	enumerable: true,
+	get: function() {
+		return Slot;
+	}
+});
+Object.defineProperty(exports, "ThreadListSlot", {
+	enumerable: true,
+	get: function() {
+		return ThreadListSlot;
+	}
+});
+Object.defineProperty(exports, "ThreadSlot", {
+	enumerable: true,
+	get: function() {
+		return ThreadSlot;
+	}
+});
+Object.defineProperty(exports, "WorkspaceLayout", {
+	enumerable: true,
+	get: function() {
+		return WorkspaceLayout;
+	}
+});
+Object.defineProperty(exports, "WorkspaceNavigationAdapter", {
+	enumerable: true,
+	get: function() {
+		return WorkspaceNavigationAdapter;
+	}
+});
+Object.defineProperty(exports, "createChatViewSlotBinding", {
+	enumerable: true,
+	get: function() {
+		return createChatViewSlotBinding;
+	}
+});
+Object.defineProperty(exports, "createThreadEntityBinding", {
+	enumerable: true,
+	get: function() {
+		return createThreadEntityBinding;
+	}
+});
+Object.defineProperty(exports, "defaultChatViewSelectorItemSet", {
+	enumerable: true,
+	get: function() {
+		return defaultChatViewSelectorItemSet;
+	}
+});
+Object.defineProperty(exports, "defaultSlotKindRegistry", {
+	enumerable: true,
+	get: function() {
+		return defaultSlotKindRegistry;
+	}
+});
+Object.defineProperty(exports, "getChatViewEntityBinding", {
+	enumerable: true,
+	get: function() {
+		return getChatViewEntityBinding;
+	}
+});
+Object.defineProperty(exports, "getLayoutViewState", {
+	enumerable: true,
+	get: function() {
+		return getLayoutViewState;
+	}
+});
+Object.defineProperty(exports, "restoreLayoutControllerState", {
+	enumerable: true,
+	get: function() {
+		return restoreLayoutControllerState;
+	}
+});
+Object.defineProperty(exports, "restoreLayoutState", {
+	enumerable: true,
+	get: function() {
+		return restoreLayoutState;
+	}
+});
+Object.defineProperty(exports, "serializeLayoutControllerState", {
+	enumerable: true,
+	get: function() {
+		return serializeLayoutControllerState;
+	}
+});
+Object.defineProperty(exports, "serializeLayoutState", {
+	enumerable: true,
+	get: function() {
+		return serializeLayoutState;
+	}
+});
+Object.defineProperty(exports, "useActiveThread", {
+	enumerable: true,
+	get: function() {
+		return useActiveThread;
+	}
+});
+Object.defineProperty(exports, "useChatViewContext", {
+	enumerable: true,
+	get: function() {
+		return useChatViewContext;
+	}
+});
+Object.defineProperty(exports, "useChatViewNavigation", {
+	enumerable: true,
+	get: function() {
+		return useChatViewNavigation;
+	}
+});
+Object.defineProperty(exports, "useLayoutViewState", {
+	enumerable: true,
+	get: function() {
+		return useLayoutViewState;
+	}
+});
+Object.defineProperty(exports, "useSlotChannel", {
+	enumerable: true,
+	get: function() {
+		return useSlotChannel;
+	}
+});
+Object.defineProperty(exports, "useSlotChannels", {
+	enumerable: true,
+	get: function() {
+		return useSlotChannels;
+	}
+});
+Object.defineProperty(exports, "useSlotEntities", {
+	enumerable: true,
+	get: function() {
+		return useSlotEntities;
+	}
+});
+Object.defineProperty(exports, "useSlotEntity", {
+	enumerable: true,
+	get: function() {
+		return useSlotEntity;
+	}
+});
+Object.defineProperty(exports, "useSlotForKey", {
+	enumerable: true,
+	get: function() {
+		return useSlotForKey;
+	}
+});
+Object.defineProperty(exports, "useSlotForKind", {
+	enumerable: true,
+	get: function() {
+		return useSlotForKind;
+	}
+});
+Object.defineProperty(exports, "useSlotThread", {
+	enumerable: true,
+	get: function() {
+		return useSlotThread;
+	}
+});
+Object.defineProperty(exports, "useSlotThreads", {
+	enumerable: true,
+	get: function() {
+		return useSlotThreads;
+	}
+});
+Object.defineProperty(exports, "useSlotTopLayerEntity", {
+	enumerable: true,
+	get: function() {
+		return useSlotTopLayerEntity;
+	}
+});
+
+//# sourceMappingURL=SlotLayout.de45be2d.js.map