@happyvertical/smrt-ui 0.53.1 → 0.53.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.53.1",
+  "version": "0.53.3",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -134,7 +134,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.53.1",
+    "@happyvertical/smrt-types": "0.53.3",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {
@@ -160,7 +160,7 @@
     "vitest": "4.1.10"
   },
   "scripts": {
-    "build": "svelte-package -i src --tsconfig tsconfig.svelte.json",
+    "build": "svelte-package -i src --tsconfig tsconfig.svelte.json && node ../../scripts/prune-svelte-package-artifacts.js dist",
     "dev": "svelte-package -i src --watch",
     "check": "pnpm exec svelte-check --tsconfig ./tsconfig.svelte.json",
     "bench:data-table": "vitest bench src/components/data/__benchmarks__/DataTable.bench.ts",

package/dist/actions/__tests__/ripple.test.js

@@ -1,82 +0,0 @@
-/**
- * Unit test for the ripple action (coverage uplift, S6 gate).
- */
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { ripple } from '../ripple';
-afterEach(() => {
-    vi.restoreAllMocks();
-    // Drop any matchMedia stub a test installed.
-    Reflect.deleteProperty(window, 'matchMedia');
-});
-describe('ripple action', () => {
-    it('appends a ripple element on pointer down', () => {
-        const node = document.createElement('button');
-        document.body.appendChild(node);
-        const action = ripple(node);
-        const before = node.querySelectorAll('span').length;
-        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
-        expect(node.querySelectorAll('span').length).toBeGreaterThan(before);
-        // destroy detaches listeners without throwing
-        action?.destroy?.();
-        node.remove();
-    });
-    it('supports touch start', () => {
-        const node = document.createElement('button');
-        document.body.appendChild(node);
-        const action = ripple(node);
-        const touch = { clientX: 3, clientY: 3 };
-        node.dispatchEvent(new TouchEvent('touchstart', { touches: [touch], bubbles: true }));
-        expect(node.querySelectorAll('span').length).toBeGreaterThan(0);
-        action?.destroy?.();
-        node.remove();
-    });
-    it('fills the ripple with the canonical --smrt-color-primary token (#1586)', () => {
-        // Regression: the canonical theme system only emits `--smrt-color-*`; the
-        // old `--md-sys-color-primary` namespace always fell back to currentColor.
-        const node = document.createElement('button');
-        document.body.appendChild(node);
-        const action = ripple(node);
-        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
-        const span = node.querySelector('span');
-        expect(span.style.backgroundColor).toContain('--smrt-color-primary');
-        expect(span.style.backgroundColor).not.toContain('--md-sys');
-        action?.destroy?.();
-        node.remove();
-    });
-    it('destroy() removes pending ripple spans and clears window listeners (#1586)', () => {
-        const node = document.createElement('button');
-        document.body.appendChild(node);
-        const action = ripple(node);
-        // Press without releasing: the ripple span stays appended, and a one-shot
-        // window mouseup listener is still registered.
-        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
-        expect(node.querySelectorAll('span.smrt-ripple').length).toBe(1);
-        const removeSpy = vi.spyOn(window, 'removeEventListener');
-        action?.destroy?.();
-        // The leaked span is gone immediately (no waiting for a later global mouseup).
-        expect(node.querySelectorAll('span.smrt-ripple').length).toBe(0);
-        // And the pending window pointer-up listeners were detached.
-        expect(removeSpy).toHaveBeenCalledWith('mouseup', expect.any(Function));
-        expect(removeSpy).toHaveBeenCalledWith('touchend', expect.any(Function));
-        node.remove();
-    });
-    it('skips the ripple when prefers-reduced-motion is set (#1586)', () => {
-        window.matchMedia = vi.fn().mockImplementation((query) => ({
-            matches: query.includes('prefers-reduced-motion'),
-            media: query,
-            onchange: null,
-            addEventListener: vi.fn(),
-            removeEventListener: vi.fn(),
-            addListener: vi.fn(),
-            removeListener: vi.fn(),
-            dispatchEvent: vi.fn(),
-        }));
-        const node = document.createElement('button');
-        document.body.appendChild(node);
-        const action = ripple(node);
-        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
-        expect(node.querySelectorAll('span.smrt-ripple').length).toBe(0);
-        action?.destroy?.();
-        node.remove();
-    });
-});

package/dist/actions/__tests__/swipe-dismiss.test.js

@@ -1,69 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { swipeDismiss, swipeDismisses } from '../swipe-dismiss.js';
-describe('swipeDismisses', () => {
-    it('dismisses a drawer on a clear swipe left only', () => {
-        expect(swipeDismisses(-80, 10, 'left')).toBe(true);
-        expect(swipeDismisses(-40, 0, 'left')).toBe(false);
-        expect(swipeDismisses(-80, 70, 'left')).toBe(false);
-        expect(swipeDismisses(80, 0, 'left')).toBe(false);
-    });
-    it('dismisses a right-hand drawer on a clear swipe right only', () => {
-        expect(swipeDismisses(80, 5, 'right')).toBe(true);
-        expect(swipeDismisses(-80, 5, 'right')).toBe(false);
-    });
-    it('dismisses a sheet on a clear swipe down only', () => {
-        expect(swipeDismisses(5, 90, 'down')).toBe(true);
-        expect(swipeDismisses(0, -90, 'down')).toBe(false);
-        expect(swipeDismisses(80, 90, 'down')).toBe(false);
-    });
-    it('honours a custom threshold', () => {
-        expect(swipeDismisses(0, 40, 'down', 32)).toBe(true);
-        expect(swipeDismisses(0, 40, 'down')).toBe(false);
-    });
-});
-function touch(type, x, y) {
-    const point = { clientX: x, clientY: y };
-    const event = new Event(type);
-    Object.defineProperty(event, 'touches', {
-        value: type === 'touchend' ? [] : [point],
-    });
-    Object.defineProperty(event, 'changedTouches', { value: [point] });
-    return event;
-}
-describe('swipeDismiss action', () => {
-    it('calls onDismiss after a swipe in its direction', () => {
-        const node = document.createElement('div');
-        const onDismiss = vi.fn();
-        const action = swipeDismiss(node, { direction: 'down', onDismiss });
-        node.dispatchEvent(touch('touchstart', 10, 10));
-        node.dispatchEvent(touch('touchend', 12, 100));
-        expect(onDismiss).toHaveBeenCalledTimes(1);
-        action.destroy();
-    });
-    it('ignores swipes while disabled and after update re-enables them', () => {
-        const node = document.createElement('div');
-        const onDismiss = vi.fn();
-        const action = swipeDismiss(node, {
-            direction: 'left',
-            onDismiss,
-            enabled: false,
-        });
-        node.dispatchEvent(touch('touchstart', 100, 10));
-        node.dispatchEvent(touch('touchend', 10, 10));
-        expect(onDismiss).not.toHaveBeenCalled();
-        action.update({ direction: 'left', onDismiss, enabled: true });
-        node.dispatchEvent(touch('touchstart', 100, 10));
-        node.dispatchEvent(touch('touchend', 10, 10));
-        expect(onDismiss).toHaveBeenCalledTimes(1);
-        action.destroy();
-    });
-    it('forgets a cancelled touch', () => {
-        const node = document.createElement('div');
-        const onDismiss = vi.fn();
-        swipeDismiss(node, { direction: 'down', onDismiss });
-        node.dispatchEvent(touch('touchstart', 10, 10));
-        node.dispatchEvent(new Event('touchcancel'));
-        node.dispatchEvent(touch('touchend', 10, 200));
-        expect(onDismiss).not.toHaveBeenCalled();
-    });
-});

package/dist/components/calendar/__tests__/CalendarView.test.js

@@ -1,226 +0,0 @@
-import { act, render, screen, within } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import CalendarView from '../CalendarView.svelte';
-const tz = 'America/Edmonton';
-const now = new Date('2026-09-29T18:00:00Z');
-const items = [
-    { id: 'fair', title: 'Fall Fair', start: '2026-09-05', end: '2026-09-07' },
-    {
-        id: 'council',
-        title: 'Council meeting',
-        start: new Date('2026-09-15T01:00:00Z'),
-        label: 'Council',
-        href: '/meetings/sept',
-    },
-    { id: 'a', title: 'Game A', start: new Date('2026-09-20T18:00:00Z') },
-    { id: 'b', title: 'Game B', start: new Date('2026-09-20T19:00:00Z') },
-    { id: 'c', title: 'Game C', start: new Date('2026-09-20T20:00:00Z') },
-    { id: 'd', title: 'Game D', start: new Date('2026-09-20T21:00:00Z') },
-];
-function renderMonth(props = {}) {
-    return render(CalendarView, {
-        props: {
-            items,
-            timeZone: tz,
-            locale: 'en-US',
-            weekStartsOn: 0,
-            mode: 'month',
-            now,
-            year: 2026,
-            month: 9,
-            ...props,
-        },
-    });
-}
-describe('CalendarView (month)', () => {
-    it('renders a localized grid in the given zone', () => {
-        renderMonth();
-        expect(screen.getByRole('heading', { name: 'September 2026' })).toBeTruthy();
-        expect(screen.getByRole('grid')).toBeTruthy();
-        expect(screen.getAllByRole('columnheader')).toHaveLength(7);
-        // 19:00 MDT on the 14th, not the 15th (UTC)
-        expect(screen.getByRole('button', {
-            name: 'Monday, September 14, 2026, 1 item',
-        })).toBeTruthy();
-        expect(screen
-            .getByRole('button', { name: 'Tuesday, September 29, 2026' })
-            .getAttribute('aria-current')).toBe('date');
-    });
-    it('renders month names in the requested locale', () => {
-        renderMonth({ locale: 'fr-FR' });
-        expect(screen.getByRole('heading').textContent?.trim()).toBe('septembre 2026');
-    });
-    it('renders all-day spans as bands and overflow as +N more', async () => {
-        const onSelectDate = vi.fn();
-        const { container } = renderMonth({ onSelectDate });
-        // Sat Sep 5 - Mon Sep 7 wraps: one segment per week row.
-        const bands = [...container.querySelectorAll('.cv-band')];
-        expect(bands.map((b) => b.textContent?.trim())).toEqual([
-            'Fall Fair',
-            'Fall Fair',
-        ]);
-        expect(bands[0].style.gridColumn).toBe('7 / span 1');
-        expect(bands[0].classList.contains('cv-band--after')).toBe(true);
-        expect(bands[1].style.gridColumn).toBe('1 / span 2');
-        expect(bands[1].classList.contains('cv-band--before')).toBe(true);
-        const more = screen.getByText('+2 more');
-        await userEvent.click(more);
-        expect(onSelectDate).toHaveBeenCalledWith('2026-09-20');
-        const panel = screen.getByRole('region', {
-            name: 'Sunday, September 20, 2026',
-        });
-        expect(within(panel).getAllByRole('button', { name: /Game/ })).toHaveLength(4);
-        await userEvent.click(within(panel).getByRole('button', {
-            name: 'Close Sunday, September 20, 2026',
-        }));
-        expect(screen.queryByRole('region')).toBeNull();
-    });
-    it('navigates with prev/next/today and reports the month', async () => {
-        const onNavigate = vi.fn();
-        render(CalendarView, {
-            props: {
-                items,
-                timeZone: tz,
-                locale: 'en-US',
-                mode: 'month',
-                now,
-                onNavigate,
-            },
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Next month' }));
-        expect(onNavigate).toHaveBeenLastCalledWith({ year: 2026, month: 10 });
-        expect(screen.getByRole('heading').textContent?.trim()).toBe('October 2026');
-        await userEvent.click(screen.getByRole('button', { name: 'Today' }));
-        expect(onNavigate).toHaveBeenLastCalledWith({ year: 2026, month: 9 });
-    });
-    it('moves focus with arrow keys and crosses months', async () => {
-        const onNavigate = vi.fn();
-        renderMonth({ onNavigate, year: undefined, month: undefined });
-        const today = screen.getByRole('button', {
-            name: 'Tuesday, September 29, 2026',
-        });
-        expect(today.tabIndex).toBe(0);
-        today.focus();
-        await userEvent.keyboard('{ArrowRight}');
-        expect(document.activeElement.dataset.cvDay).toBe('2026-09-30');
-        await userEvent.keyboard('{ArrowRight}');
-        expect(onNavigate).toHaveBeenLastCalledWith({ year: 2026, month: 10 });
-        expect(document.activeElement.dataset.cvDay).toBe('2026-10-01');
-        await userEvent.keyboard('{ArrowUp}');
-        expect(document.activeElement.dataset.cvDay).toBe('2026-09-24');
-        await userEvent.keyboard('{Home}');
-        expect(document.activeElement.dataset.cvDay).toBe('2026-09-20');
-    });
-    it('turns days into links with dayHref', () => {
-        renderMonth({ dayHref: (d) => `/events/${d}` });
-        const link = screen.getByRole('link', {
-            name: 'Monday, September 14, 2026, 1 item',
-        });
-        expect(link.getAttribute('href')).toBe('/events/2026-09-14');
-    });
-});
-describe('CalendarView accessibility', () => {
-    it('is axe-clean in month mode with an open day', async () => {
-        const { container } = renderMonth({ selectedDate: '2026-09-20' });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean in agenda mode', async () => {
-        const { container } = renderMonth({ mode: 'agenda' });
-        await expectNoA11yViolations(container);
-    });
-});
-describe('CalendarView (agenda)', () => {
-    it('lists days with items and a day strip', async () => {
-        const onItemSelect = vi.fn();
-        render(CalendarView, {
-            props: {
-                items,
-                timeZone: tz,
-                locale: 'en-US',
-                mode: 'agenda',
-                now,
-                year: 2026,
-                month: 9,
-                onItemSelect,
-            },
-        });
-        const strip = screen.getByRole('toolbar', {
-            name: 'Days in September 2026',
-        });
-        expect(within(strip).getAllByRole('button')).toHaveLength(30);
-        const headings = screen
-            .getAllByRole('heading', { level: 3 })
-            .map((h) => h.textContent?.trim());
-        expect(headings).toEqual([
-            'Saturday, September 5, 2026',
-            'Sunday, September 6, 2026',
-            'Monday, September 7, 2026',
-            'Monday, September 14, 2026',
-            'Sunday, September 20, 2026',
-        ]);
-        const link = screen.getByRole('link', { name: /Council meeting/ });
-        expect(link.getAttribute('href')).toBe('/meetings/sept');
-        expect(link.textContent).toContain('7:00 PM');
-        expect(link.textContent).toContain('Council');
-        expect(screen.getAllByText('Until Sep 7').length).toBeGreaterThan(0);
-        await userEvent.click(within(strip).getByRole('button', {
-            name: 'Thursday, September 10, 2026',
-        }));
-        expect(screen.getByRole('heading', { name: 'Thursday, September 10, 2026' })).toBeTruthy();
-        expect(screen.getAllByText('Nothing scheduled').length).toBe(1);
-    });
-    it('switches to the agenda on phones in auto mode', async () => {
-        const matchMedia = vi.fn().mockImplementation((query) => ({
-            matches: query === '(max-width: 48rem)',
-            media: query,
-            addEventListener: vi.fn(),
-            removeEventListener: vi.fn(),
-        }));
-        vi.stubGlobal('matchMedia', matchMedia);
-        try {
-            const { container } = render(CalendarView, {
-                props: { items, timeZone: tz, locale: 'en-US', now },
-            });
-            await Promise.resolve();
-            expect(container.querySelector('[data-view]')?.getAttribute('data-view')).toBe('agenda');
-            expect(screen.queryByRole('grid')).toBeNull();
-        }
-        finally {
-            vi.unstubAllGlobals();
-        }
-    });
-});
-describe('CalendarView robustness', () => {
-    it('falls back instead of throwing on an invalid time zone', () => {
-        const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
-        try {
-            expect(() => renderMonth({ timeZone: 'Mars/Olympus_Mons' })).not.toThrow();
-            expect(screen.getByRole('heading', { name: 'September 2026' })).toBeTruthy();
-            expect(warn).toHaveBeenCalledWith(expect.stringContaining('Mars/Olympus_Mons'));
-        }
-        finally {
-            warn.mockRestore();
-        }
-    });
-    it('moves the today highlight after midnight without a now prop', async () => {
-        vi.useFakeTimers({ toFake: ['Date', 'setInterval', 'clearInterval'] });
-        try {
-            // 23:59 on Sep 29 in Edmonton (05:59Z on the 30th).
-            vi.setSystemTime(new Date('2026-09-30T05:59:00Z'));
-            renderMonth({ now: undefined });
-            const day = (name) => screen.getByRole('button', { name });
-            await act(() => { });
-            expect(day('Tuesday, September 29, 2026').getAttribute('aria-current')).toBe('date');
-            await act(() => {
-                vi.advanceTimersByTime(2 * 60_000);
-            });
-            expect(day('Wednesday, September 30, 2026').getAttribute('aria-current')).toBe('date');
-            expect(day('Tuesday, September 29, 2026').getAttribute('aria-current')).toBeNull();
-        }
-        finally {
-            vi.useRealTimers();
-        }
-    });
-});

package/dist/components/calendar/__tests__/calendar-model.test.js

@@ -1,138 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { addMonthsToKey, dateKeyInZone, defaultWeekStart, layoutMonth, monthWeeks, shiftMonth, toEntries, toneFor, } from '../calendar-model.js';
-describe('calendar model', () => {
-    it('computes days in the given zone, not the host zone', () => {
-        const instant = new Date('2026-09-29T03:30:00Z');
-        expect(dateKeyInZone(instant, 'America/Edmonton')).toBe('2026-09-28');
-        expect(dateKeyInZone(instant, 'Pacific/Auckland')).toBe('2026-09-29');
-    });
-    it('builds full weeks for any first weekday', () => {
-        const sunday = monthWeeks({ year: 2026, month: 9 }, 0);
-        expect(sunday[0][0]).toBe('2026-08-30');
-        expect(sunday.at(-1)?.[6]).toBe('2026-10-03');
-        const monday = monthWeeks({ year: 2026, month: 9 }, 1);
-        expect(monday[0][0]).toBe('2026-08-31');
-        expect(monday).toHaveLength(5);
-    });
-    it('shifts months and clamps days', () => {
-        expect(shiftMonth({ year: 2026, month: 12 }, 1)).toEqual({
-            year: 2027,
-            month: 1,
-        });
-        expect(shiftMonth({ year: 2026, month: 1 }, -1)).toEqual({
-            year: 2025,
-            month: 12,
-        });
-        expect(addMonthsToKey('2026-01-31', 1)).toBe('2026-02-28');
-    });
-    it('reads the locale week start when the runtime knows it', () => {
-        const start = defaultWeekStart('en-GB');
-        expect([0, 1]).toContain(start);
-        expect(defaultWeekStart('not a locale!')).toBe(0);
-    });
-    it('normalizes all-day dates, exclusive midnights, and timed spans', () => {
-        const tz = 'America/Edmonton';
-        const entries = toEntries([
-            { id: 'a', title: 'Fair', start: '2026-09-05', end: '2026-09-07' },
-            {
-                id: 'b',
-                title: 'Exclusive',
-                allDay: true,
-                start: new Date('2026-09-10T06:00:00Z'),
-                end: new Date('2026-09-12T06:00:00Z'),
-            },
-            {
-                id: 'c',
-                title: 'Late meeting',
-                start: new Date('2026-09-15T01:00:00Z'),
-                end: new Date('2026-09-15T03:00:00Z'),
-            },
-            {
-                id: 'd',
-                title: 'Overnight',
-                start: new Date('2026-09-20T04:00:00Z'),
-                end: new Date('2026-09-20T16:00:00Z'),
-            },
-            { id: 'bad', title: 'Bad', start: 'not a date' },
-        ], tz);
-        const byId = Object.fromEntries(entries.map((e) => [e.item.id, e]));
-        expect(byId.a).toMatchObject({
-            startKey: '2026-09-05',
-            endKey: '2026-09-07',
-            allDay: true,
-            band: true,
-        });
-        expect(byId.b).toMatchObject({
-            startKey: '2026-09-10',
-            endKey: '2026-09-11',
-        });
-        // 19:00-21:00 MDT on the 14th
-        expect(byId.c).toMatchObject({
-            startKey: '2026-09-14',
-            endKey: '2026-09-14',
-            band: false,
-        });
-        // 22:00 on the 19th to 10:00 on the 20th spans two days
-        expect(byId.d).toMatchObject({
-            startKey: '2026-09-19',
-            endKey: '2026-09-20',
-            band: true,
-        });
-        expect(byId.bad).toBeUndefined();
-    });
-    it('lays out bands in lanes and counts overflow as "+N more"', () => {
-        const entries = toEntries([
-            { id: 'span', title: 'Span', start: '2026-09-01', end: '2026-09-09' },
-            { id: 'one', title: 'One', start: '2026-09-02' },
-            {
-                id: 't1',
-                title: 'T1',
-                start: new Date('2026-09-02T15:00:00Z'),
-            },
-            {
-                id: 't2',
-                title: 'T2',
-                start: new Date('2026-09-02T16:00:00Z'),
-            },
-        ], 'UTC');
-        const weeks = layoutMonth({ year: 2026, month: 9 }, entries, {
-            weekStartsOn: 0,
-            maxPerDay: 3,
-        });
-        const first = weeks[0];
-        // Span continues into the next week; "One" takes a second lane.
-        const span = first.bands.find((b) => b.entry.item.id === 'span');
-        expect(span).toMatchObject({ column: 2, span: 5, lane: 0 });
-        expect(span?.continuesAfter).toBe(true);
-        expect(first.lanes).toBe(2);
-        const sep2 = first.days.find((d) => d.key === '2026-09-02');
-        // One row left for timed items; two don't fit, so show none + "+2 more".
-        expect(sep2?.visible).toHaveLength(0);
-        expect(sep2?.hiddenCount).toBe(2);
-        expect(sep2?.all.map((e) => e.item.id)).toEqual([
-            'span',
-            'one',
-            't1',
-            't2',
-        ]);
-        const second = weeks[1];
-        const cont = second.bands.find((b) => b.entry.item.id === 'span');
-        expect(cont).toMatchObject({ column: 0, span: 4, continuesBefore: true });
-    });
-    it('derives a stable tone from the group', () => {
-        const a = toneFor({
-            id: '1',
-            title: 'x',
-            start: '2026-01-01',
-            group: 'council',
-        });
-        const b = toneFor({
-            id: '2',
-            title: 'y',
-            start: '2026-01-01',
-            group: 'council',
-        });
-        expect(a).toBe(b);
-        expect(toneFor({ id: '3', title: 'z', start: '2026-01-01', tone: 'error' })).toBe('error');
-    });
-});

package/dist/components/chat/__tests__/chat-primitives.test.js

@@ -1,118 +0,0 @@
-/**
- * Golden tests for the L3 chat primitives (`./chat` subpath, #1422):
- * MessageBubble, ReactionPicker, TypingIndicator.
- */
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import MessageBubble from '../MessageBubble.svelte';
-import ReactionPicker from '../ReactionPicker.svelte';
-import TypingIndicator from '../TypingIndicator.svelte';
-const body = (text) => createRawSnippet(() => ({ render: () => `<p>${text}</p>` }));
-describe('MessageBubble', () => {
-    it('labels the group by author + role and renders the body', () => {
-        render(MessageBubble, {
-            props: { role: 'agent', author: 'Ada', children: body('Hello there') },
-        });
-        const group = screen.getByRole('group', { name: 'Ada (agent)' });
-        expect(group).toHaveTextContent('Hello there');
-    });
-    it('renders a machine-readable timestamp', () => {
-        const { container } = render(MessageBubble, {
-            props: {
-                author: 'Ada',
-                timestamp: new Date('2026-01-01T10:00:00.000Z'),
-                children: body('hi'),
-            },
-        });
-        expect(container.querySelector('time')).toHaveAttribute('datetime', '2026-01-01T10:00:00.000Z');
-    });
-    it('renders a bare bubble (no header/group) from plain content', () => {
-        render(MessageBubble, {
-            props: { content: 'Hello there', variant: 'default', own: false },
-        });
-        expect(screen.getByText('Hello there')).toBeInTheDocument();
-        // A bare bubble adds no labelled landmark — its host row owns the label.
-        expect(screen.queryByRole('group')).toBeNull();
-    });
-    it('renders a legacy card header even without an author', () => {
-        // The legacy card form (role, no styling axes) keeps its header + labelled
-        // group, falling back to the role label.
-        render(MessageBubble, { props: { role: 'agent', children: body('hi') } });
-        expect(screen.getByRole('group', { name: 'Assistant (agent)' })).toBeInTheDocument();
-    });
-    it('is axe-clean as a labelled card', async () => {
-        const { container } = render(MessageBubble, {
-            props: { role: 'user', author: 'You', children: body('hi') },
-        });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean as an own bare bubble', async () => {
-        const { container } = render(MessageBubble, {
-            props: { content: 'Hi', variant: 'default', own: true },
-        });
-        await expectNoA11yViolations(container);
-    });
-});
-describe('ReactionPicker', () => {
-    it('is a labelled group of named emoji buttons', () => {
-        render(ReactionPicker);
-        expect(screen.getByRole('group', { name: 'Add reaction' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Thumbs up' })).toBeInTheDocument();
-    });
-    it('reports the picked emoji', async () => {
-        const onpick = vi.fn();
-        render(ReactionPicker, { props: { onpick } });
-        await userEvent.click(screen.getByRole('button', { name: 'Heart' }));
-        expect(onpick).toHaveBeenCalledWith('❤️');
-    });
-    it('renders nothing when closed', () => {
-        render(ReactionPicker, { props: { isOpen: false } });
-        expect(screen.queryByRole('group')).toBeNull();
-    });
-    it('honors caller-supplied group + per-emoji labels', () => {
-        render(ReactionPicker, {
-            props: {
-                emojis: ['🚀'],
-                label: 'Emoji reactions',
-                emojiLabel: (emoji) => `React with ${emoji}`,
-            },
-        });
-        expect(screen.getByRole('group', { name: 'Emoji reactions' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'React with 🚀' })).toBeInTheDocument();
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(ReactionPicker);
-        await expectNoA11yViolations(container);
-    });
-});
-describe('TypingIndicator', () => {
-    it('announces who is typing via a status region', () => {
-        render(TypingIndicator, { props: { name: 'Assistant' } });
-        expect(screen.getByRole('status')).toHaveTextContent('Assistant is typing');
-    });
-    it('names a single typist from a list', () => {
-        render(TypingIndicator, { props: { names: ['Ada'] } });
-        expect(screen.getByText('Ada is typing')).toBeInTheDocument();
-    });
-    it('names two typists from a list', () => {
-        render(TypingIndicator, { props: { names: ['Ada', 'Bob'] } });
-        expect(screen.getByText('Ada and Bob are typing')).toBeInTheDocument();
-    });
-    it('aggregates three or more typists', () => {
-        render(TypingIndicator, { props: { names: ['Ada', 'Bob', 'Cy'] } });
-        expect(screen.getByText('Ada and 2 others 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: { name: 'Assistant' },
-        });
-        await expectNoA11yViolations(container);
-    });
-});