@happyvertical/smrt-chat 0.30.0

package/dist/svelte/components/shared/__tests__/ReactionPicker.test.js

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for ReactionPicker via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, userEvent, within, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import ReactionPicker from '../ReactionPicker.svelte';
+// S12 a11y remediation (#1417): the picker is now a labelled `role="group"` of
+// buttons (was an invalid `role="grid"` with button children, which tripped axe's
+// `aria-required-children`), so axe is asserted on the open state.
+describe('ReactionPicker', () => {
+    it('renders a labelled group of emoji buttons when open', () => {
+        render(ReactionPicker, { props: { onreact: vi.fn(), isOpen: true } });
+        const group = screen.getByRole('group', { name: 'Emoji reactions' });
+        expect(within(group).getAllByRole('button').length).toBeGreaterThan(0);
+    });
+    it('reports the chosen emoji through onreact', async () => {
+        const onreact = vi.fn();
+        render(ReactionPicker, { props: { onreact, isOpen: true } });
+        const [first] = within(screen.getByRole('group', { name: 'Emoji reactions' })).getAllByRole('button');
+        await userEvent.click(first);
+        expect(onreact).toHaveBeenCalledTimes(1);
+        expect(onreact.mock.calls[0][0]).toBeTruthy();
+    });
+    it('renders nothing when closed', () => {
+        render(ReactionPicker, { props: { onreact: vi.fn(), isOpen: false } });
+        expect(screen.queryByRole('group')).toBeNull();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(ReactionPicker, {
+            props: { onreact: vi.fn(), isOpen: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/shared/__tests__/ReadReceipts.test.js

@@ -0,0 +1,28 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for ReadReceipts via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import ReadReceipts from '../ReadReceipts.svelte';
+describe('ReadReceipts', () => {
+    it('summarises how many participants have read', () => {
+        render(ReadReceipts, {
+            props: {
+                readBy: [{ name: 'Ada' }, { name: 'Bob' }],
+                totalParticipants: 3,
+            },
+        });
+        expect(screen.getByLabelText('2 of 3 read')).toBeInTheDocument();
+    });
+    it('renders the sent (unread) state with no readers', () => {
+        render(ReadReceipts, { props: { readBy: [], totalParticipants: 3 } });
+        expect(screen.getByLabelText('0 of 3 read')).toBeInTheDocument();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(ReadReceipts, {
+            props: { readBy: [{ name: 'Ada' }], totalParticipants: 2 },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/shared/__tests__/TypingIndicator.test.js

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for TypingIndicator via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import TypingIndicator from '../TypingIndicator.svelte';
+describe('TypingIndicator', () => {
+    it('names a single typist', () => {
+        render(TypingIndicator, { props: { names: ['Ada'] } });
+        expect(screen.getByText('Ada is typing')).toBeInTheDocument();
+    });
+    it('names two typists', () => {
+        render(TypingIndicator, { props: { names: ['Ada', 'Bob'] } });
+        expect(screen.getByText('Ada and Bob are typing')).toBeInTheDocument();
+    });
+    it('renders nothing when nobody is typing', () => {
+        const { container } = render(TypingIndicator, { props: { names: [] } });
+        expect(container.querySelector('.typing')).toBeNull();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(TypingIndicator, {
+            props: { names: ['Ada'] },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/shared/__tests__/UserPresence.test.js

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for UserPresence via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import UserPresence from '../UserPresence.svelte';
+describe('UserPresence', () => {
+    it('exposes the status as an accessible label', () => {
+        render(UserPresence, { props: { status: 'online' } });
+        expect(screen.getByLabelText('Online')).toBeInTheDocument();
+    });
+    it('shows a visible label when requested', () => {
+        render(UserPresence, { props: { status: 'dnd', showLabel: true } });
+        expect(screen.getByText('Do not disturb')).toBeInTheDocument();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(UserPresence, {
+            props: { status: 'away', showLabel: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/tabs/ChatTab.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+/**
+ * ChatTab - Individual collapsible chat window
+ * Compact header with title, collapse/close buttons. Contains message list and input.
+ * Expands upward from the bottom tab bar.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.messages.js';
+import type { ChatMessageData, ChatTabState } from '../../types.js';
+import Avatar from '../shared/Avatar.svelte';
+import MiniChat from './MiniChat.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Tab state */
+  tab: ChatTabState;
+  /** Messages in this chat */
+  messages: ChatMessageData[];
+  /** Current user's profile ID */
+  currentProfileId: string;
+  /** Send a message */
+  onsend: (content: string) => void;
+  /** Collapse this tab */
+  oncollapse: () => void;
+  /** Close this tab */
+  onclose: () => void;
+  /** Expand this tab */
+  onexpand: () => void;
+}
+
+const {
+  tab,
+  messages,
+  currentProfileId,
+  onsend,
+  oncollapse,
+  onclose,
+  onexpand,
+}: Props = $props();
+</script>
+
+{#if tab.isExpanded}
+  <div class="chat-tab chat-tab--expanded" aria-label={t(M['chat.chat_tab.chat_with'], { name: tab.room.name })}>
+    <div class="chat-tab__header">
+      <button
+        class="chat-tab__header-btn"
+        type="button"
+        onclick={oncollapse}
+        aria-label={t(M['chat.chat_tab.collapse'])}
+      >
+        <Avatar
+          name={tab.room.name}
+          avatarUrl={tab.room.avatarUrl}
+          size="sm"
+        />
+        <span class="chat-tab__name">{tab.room.name}</span>
+      </button>
+
+      <div class="chat-tab__actions">
+        <button
+          class="chat-tab__icon-btn"
+          type="button"
+          onclick={oncollapse}
+          aria-label={t(M['chat.chat_tab.minimize'])}
+          title={t(M['chat.chat_tab.minimize'])}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <rect x="3" y="12" width="10" height="2" rx="1" />
+          </svg>
+        </button>
+        <button
+          class="chat-tab__icon-btn"
+          type="button"
+          onclick={onclose}
+          aria-label={t(M['chat.chat_tab.close'])}
+          title={t(M['chat.chat_tab.close'])}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="chat-tab__body">
+      <MiniChat
+        {messages}
+        {currentProfileId}
+        {onsend}
+        maxHeight={320}
+      />
+    </div>
+  </div>
+{:else}
+  <button
+    class="chat-tab chat-tab--collapsed"
+    type="button"
+    onclick={onexpand}
+    aria-label={t(M['chat.chat_tab.open_chat_with'], { name: tab.room.name })}
+  >
+    <Avatar
+      name={tab.room.name}
+      avatarUrl={tab.room.avatarUrl}
+      size="sm"
+    />
+    <span class="chat-tab__name">{tab.room.name}</span>
+    {#if tab.unreadCount > 0}
+      <span class="chat-tab__badge" aria-label={t(M['chat.chat_tab.unread'], { count: tab.unreadCount })}>{tab.unreadCount}</span>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .chat-tab--expanded {
+    display: flex;
+    flex-direction: column;
+    width: 328px;
+    background: var(--smrt-color-surface, #fefbff);
+    border-radius: var(--smrt-radius-large, 12px) var(--smrt-radius-large, 12px) 0 0;
+    box-shadow: var(--smrt-elevation-3, 0 4px 8px rgba(0, 0, 0, 0.15));
+    overflow: hidden;
+  }
+
+  .chat-tab__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #ffffff);
+    min-height: 44px;
+  }
+
+  .chat-tab__header-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    min-width: 0;
+  }
+
+  .chat-tab__header-btn:focus-visible {
+    outline: 2px solid var(--smrt-color-on-primary, #ffffff);
+    outline-offset: 2px;
+    border-radius: var(--smrt-radius-small, 4px);
+  }
+
+  .chat-tab__name {
+    font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .chat-tab__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 4px);
+    flex-shrink: 0;
+  }
+
+  .chat-tab__icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    border-radius: var(--smrt-radius-full, 9999px);
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .chat-tab__icon-btn:hover {
+    background: color-mix(in srgb, var(--smrt-color-on-primary) 15%, transparent);
+  }
+
+  .chat-tab__icon-btn:focus-visible {
+    outline: 2px solid var(--smrt-color-on-primary, #ffffff);
+    outline-offset: -2px;
+  }
+
+  .chat-tab__body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .chat-tab--collapsed {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    background: var(--smrt-color-surface-container, #f0f0f4);
+    border: none;
+    border-radius: var(--smrt-radius-large, 12px) var(--smrt-radius-large, 12px) 0 0;
+    cursor: pointer;
+    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.1));
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    transition: background var(--smrt-duration-short2, 150ms);
+    white-space: nowrap;
+  }
+
+  .chat-tab--collapsed:hover {
+    background: var(--smrt-color-surface-container-high, #e6e6ea);
+  }
+
+  .chat-tab--collapsed:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+
+  .chat-tab__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-on-error, #ffffff);
+    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    line-height: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-tab--collapsed,
+    .chat-tab__icon-btn {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/tabs/ChatTab.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ChatMessageData, ChatTabState } from '../../types.js';
+export interface Props {
+    /** Tab state */
+    tab: ChatTabState;
+    /** Messages in this chat */
+    messages: ChatMessageData[];
+    /** Current user's profile ID */
+    currentProfileId: string;
+    /** Send a message */
+    onsend: (content: string) => void;
+    /** Collapse this tab */
+    oncollapse: () => void;
+    /** Close this tab */
+    onclose: () => void;
+    /** Expand this tab */
+    onexpand: () => void;
+}
+declare const ChatTab: import("svelte").Component<Props, {}, "">;
+type ChatTab = ReturnType<typeof ChatTab>;
+export default ChatTab;
+//# sourceMappingURL=ChatTab.svelte.d.ts.map

package/dist/svelte/components/tabs/ChatTab.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/ChatTab.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKpE,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,GAAG,EAAE,YAAY,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AA+DD,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/svelte/components/tabs/ChatTabList.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+/**
+ * ChatTabList - Minimized tab overview bar
+ * Horizontal bar of small avatars/names at bottom. Shows unread badges.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.messages.js';
+import type { ChatTabState } from '../../types.js';
+import Avatar from '../shared/Avatar.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Collapsed/minimized tabs */
+  tabs: ChatTabState[];
+  /** Select (expand) a tab */
+  onselect: (roomId: string) => void;
+  /** Close a tab */
+  onclose: (roomId: string) => void;
+}
+
+const { tabs, onselect, onclose }: Props = $props();
+</script>
+
+{#if tabs.length > 0}
+  <nav class="tab-list" aria-label={t(M['chat.chat_tab_list.minimized_chats'])}>
+    {#each tabs as tab (tab.roomId)}
+      <div class="tab-list__item">
+        <button
+          class="tab-list__btn"
+          type="button"
+          onclick={() => onselect(tab.roomId)}
+          aria-label={t(M['chat.chat_tab_list.open_chat_with'], { name: tab.room.name })}
+          title={tab.room.name}
+        >
+          <Avatar
+            name={tab.room.name}
+            avatarUrl={tab.room.avatarUrl}
+            size="sm"
+          />
+          {#if tab.unreadCount > 0}
+            <span class="tab-list__badge" aria-label={t(M['chat.chat_tab_list.unread'], { count: tab.unreadCount })}>
+              {tab.unreadCount > 99 ? '99+' : tab.unreadCount}
+            </span>
+          {/if}
+        </button>
+        <button
+          class="tab-list__close"
+          type="button"
+          onclick={(e) => { e.stopPropagation(); onclose(tab.roomId); }}
+          aria-label={t(M['chat.chat_tab_list.close_chat_with'], { name: tab.room.name })}
+          title={t(M['chat.chat_tab_list.close'])}
+        >
+          <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+          </svg>
+        </button>
+      </div>
+    {/each}
+  </nav>
+{/if}
+
+<style>
+  .tab-list {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--smrt-spacing-1, 4px);
+    pointer-events: auto;
+  }
+
+  .tab-list__item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .tab-list__btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--smrt-spacing-2, 8px);
+    border: none;
+    background: var(--smrt-color-surface-container, #f0f0f4);
+    border-radius: var(--smrt-radius-full, 9999px);
+    cursor: pointer;
+    transition: background var(--smrt-duration-short2, 150ms),
+      box-shadow var(--smrt-duration-short2, 150ms);
+    box-shadow: var(--smrt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .tab-list__btn:hover {
+    background: var(--smrt-color-surface-container-high, #e6e6ea);
+    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
+  }
+
+  .tab-list__btn:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 2px;
+  }
+
+  .tab-list__badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-on-error, #ffffff);
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    line-height: 1;
+    border: 2px solid var(--smrt-color-surface, #fefbff);
+  }
+
+  .tab-list__close {
+    display: none;
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 18px;
+    height: 18px;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    border-radius: var(--smrt-radius-full, 9999px);
+    cursor: pointer;
+    padding: 0;
+    font-size: 0;
+  }
+
+  .tab-list__item:hover .tab-list__close {
+    display: inline-flex;
+  }
+
+  .tab-list__item:hover .tab-list__badge {
+    display: none;
+  }
+
+  .tab-list__close:hover {
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tab-list__btn {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/tabs/ChatTabList.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ChatTabState } from '../../types.js';
+export interface Props {
+    /** Collapsed/minimized tabs */
+    tabs: ChatTabState[];
+    /** Select (expand) a tab */
+    onselect: (roomId: string) => void;
+    /** Close a tab */
+    onclose: (roomId: string) => void;
+}
+declare const ChatTabList: import("svelte").Component<Props, {}, "">;
+type ChatTabList = ReturnType<typeof ChatTabList>;
+export default ChatTabList;
+//# sourceMappingURL=ChatTabList.svelte.d.ts.map

package/dist/svelte/components/tabs/ChatTabList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTabList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/ChatTabList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB;IAClB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAwCD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/tabs/ChatTabs.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+/**
+ * ChatTabs - Bottom bar with expandable chat tabs (Facebook Messenger style)
+ * Fixed to viewport bottom. Shows collapsed tab headers that expand upward on click.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.messages.js';
+import type { ChatMessageData, ChatTabState } from '../../types.js';
+import ChatTab from './ChatTab.svelte';
+import ChatTabList from './ChatTabList.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Active chat tabs */
+  tabs: ChatTabState[];
+  /** Messages keyed by roomId */
+  messagesByRoom?: Record<string, ChatMessageData[]>;
+  /** Current user's profile ID */
+  currentProfileId?: string;
+  /** Expand a tab */
+  onexpand: (roomId: string) => void;
+  /** Collapse a tab */
+  oncollapse: (roomId: string) => void;
+  /** Close a tab */
+  onclose: (roomId: string) => void;
+  /** Send a message in a tab */
+  onsend?: (roomId: string, content: string) => void;
+}
+
+const {
+  tabs,
+  messagesByRoom = {},
+  currentProfileId = '',
+  onexpand,
+  oncollapse,
+  onclose,
+  onsend,
+}: Props = $props();
+
+const expandedTabs = $derived(tabs.filter((t) => t.isExpanded));
+const collapsedTabs = $derived(tabs.filter((t) => !t.isExpanded));
+</script>
+
+<div class="chat-tabs" aria-label={t(M['chat.chat_tabs.tabs_label'])}>
+  <div class="chat-tabs__expanded">
+    {#each expandedTabs as tab (tab.roomId)}
+      <ChatTab
+        {tab}
+        messages={messagesByRoom[tab.roomId] ?? []}
+        {currentProfileId}
+        onsend={(content) => onsend?.(tab.roomId, content)}
+        oncollapse={() => oncollapse(tab.roomId)}
+        onclose={() => onclose(tab.roomId)}
+        onexpand={() => onexpand(tab.roomId)}
+      />
+    {/each}
+  </div>
+
+  {#if collapsedTabs.length > 0}
+    <ChatTabList
+      tabs={collapsedTabs}
+      onselect={(roomId) => onexpand(roomId)}
+      onclose={(roomId) => onclose(roomId)}
+    />
+  {/if}
+</div>
+
+<style>
+  .chat-tabs {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: flex-end;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: 0 var(--smrt-spacing-4, 16px);
+    z-index: var(--smrt-z-index-sticky, 1100);
+    pointer-events: none;
+  }
+
+  .chat-tabs__expanded {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--smrt-spacing-2, 8px);
+    pointer-events: auto;
+  }
+</style>

package/dist/svelte/components/tabs/ChatTabs.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ChatMessageData, ChatTabState } from '../../types.js';
+export interface Props {
+    /** Active chat tabs */
+    tabs: ChatTabState[];
+    /** Messages keyed by roomId */
+    messagesByRoom?: Record<string, ChatMessageData[]>;
+    /** Current user's profile ID */
+    currentProfileId?: string;
+    /** Expand a tab */
+    onexpand: (roomId: string) => void;
+    /** Collapse a tab */
+    oncollapse: (roomId: string) => void;
+    /** Close a tab */
+    onclose: (roomId: string) => void;
+    /** Send a message in a tab */
+    onsend?: (roomId: string, content: string) => void;
+}
+declare const ChatTabs: import("svelte").Component<Props, {}, "">;
+type ChatTabs = ReturnType<typeof ChatTabs>;
+export default ChatTabs;
+//# sourceMappingURL=ChatTabs.svelte.d.ts.map

package/dist/svelte/components/tabs/ChatTabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTabs.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/ChatTabs.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKpE,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;IACnD,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qBAAqB;IACrB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kBAAkB;IAClB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8BAA8B;IAC9B,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AA0CD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}