@joewinke/jatui 0.55.0 → 0.57.0

package/dist/components/messaging/ChatTranscript.svelte

@@ -0,0 +1,414 @@
+<!--
+  ChatTranscript — a read-only, two-sided transcript of NAMED speakers: a live
+  phone call (caller vs. the assistant's persona), a Scribe dictation, a
+  meeting recording. Not a chat client: no composer, no reactions, no edit or
+  delete, no HTML in the words. For a Slack-style channel use MessageThread /
+  MessageItem; for an agent's tool log use AgentLog.
+
+  - Speakers sit on opposite sides (the first listed at `start`, the second at
+    `end`; set `side` to choose). Consecutive turns by one speaker group into a
+    run: the name and avatar show once, the tail on the last bubble.
+  - Each speaker's name is the label. Pass real names ("Dana Testwell",
+    "Ruby"), never role words ("Patient", "AI assistant").
+  - `streaming`: the LAST turn is still being spoken; its words reveal per line
+    through StreamedText, with a caret.
+  - New turns slide in from their own side on the motion tokens; turns present
+    on first render don't animate; reduced motion / data-motion="calm" is
+    honoured by resolveMotionTiming.
+  - Follows the live edge with createStickToBottom only while the reader is at
+    it; scrolled away, a JumpToLatest pill counts what arrived.
+  - A11y: the scroller is a polite role="log" (set `live={false}` for a
+    finished recording), keyboard-scrollable (tabindex 0); every bubble's
+    speaker is in its text (a grouped bubble carries it sr-only); timestamps
+    are <time> elements; a slow or flagged turn belongs in `meta` as words, not
+    only colour.
+  - Optional per-turn `meta` (e.g. "1.2 s" reply latency) and `actions` (a
+    hover / focus toolbar the host fills — none by default) snippets.
+    `onTurnClick` makes each bubble a button (e.g. seek a recording);
+    `activeId` marks the turn playing now.
+
+  Token-only colour (bubble tints are color-mix of a token family over
+  base-100), logical properties so RTL mirrors.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Avatar from './Avatar.svelte';
+	import StreamedText from '../agent/StreamedText.svelte';
+	import JumpToLatest from '../basic/JumpToLatest.svelte';
+	import { createStickToBottom, type StickState } from '../../actions/stickToBottom';
+	import { resolveMotionTiming } from '../../motion/transitions';
+	import {
+		buildTranscriptRows,
+		formatTurnTime,
+		turnDatetime,
+		type TranscriptSide,
+		type TranscriptSpeaker,
+		type TranscriptTurn
+	} from './chatTranscript';
+
+	interface Props {
+		turns: TranscriptTurn[];
+		speakers: TranscriptSpeaker[];
+		/** The last turn is still arriving: reveal it per line with a caret. */
+		streaming?: boolean;
+		/** Group consecutive turns by one speaker (name once per run). Default true. */
+		group?: boolean;
+		/** Show speaker avatars beside the first bubble of a run. Default true. */
+		avatars?: boolean;
+		/** Polite live region (new turns are announced). Default true. */
+		live?: boolean;
+		/** Follow the live edge + JumpToLatest. Default true. */
+		follow?: boolean;
+		/** Accessible name of the log. */
+		ariaLabel?: string;
+		/** Turn timestamp text; default formatTurnTime (offset "1:05" / clock "10:42 AM"). */
+		formatTime?: (at: TranscriptTurn['at']) => string | null;
+		/** Shown when there are no turns. */
+		emptyText?: string;
+		/** Extra line under a bubble (latency, a flag). Words, not colour alone. */
+		meta?: Snippet<[TranscriptTurn]>;
+		/** Hover / focus toolbar for a bubble. None by default. */
+		actions?: Snippet<[TranscriptTurn]>;
+		/** Makes every bubble a button (e.g. seek a recording to `turn.at`). */
+		onTurnClick?: (turn: TranscriptTurn) => void;
+		/** The turn playing now (recordings): marked with aria-current. */
+		activeId?: string | number | null;
+		/** Height bound of the scroller (CSS). Default: fill the parent. */
+		maxHeight?: string;
+		class?: string;
+	}
+
+	let {
+		turns,
+		speakers,
+		streaming = false,
+		group = true,
+		avatars = true,
+		live = true,
+		follow = true,
+		ariaLabel = 'Transcript',
+		formatTime = (at) => formatTurnTime(at),
+		emptyText = 'Waiting for the first words.',
+		meta,
+		actions,
+		onTurnClick,
+		activeId = null,
+		maxHeight,
+		class: className = ''
+	}: Props = $props();
+
+	const rows = $derived(buildTranscriptRows(turns, speakers, group));
+
+	let stick = $state<StickState>({ atBottom: true, pinnedUp: false, unread: 0 });
+	const scroller = createStickToBottom({ onState: (s) => (stick = s) });
+
+	// Follow new turns and a growing live line (gated: never against the reader).
+	$effect(() => {
+		const last = turns[turns.length - 1];
+		void turns.length;
+		void last?.text?.length;
+		if (follow) scroller.requestStick();
+	});
+
+	/** A new bubble slides in from its own side: opacity + 8px, on the motion tokens. */
+	function bubbleIn(node: Element, { side }: { side: TranscriptSide }) {
+		// Svelte runs `css` transitions through Element.animate; plain jsdom
+		// (consumers' component tests) has none, so skip the motion there.
+		if (typeof node.animate !== 'function') return { duration: 0 };
+		const { delay, duration, easing } = resolveMotionTiming(node, {}, {
+			duration: 'enter',
+			easing: 'glide'
+		});
+		const rtl = typeof getComputedStyle === 'function' && getComputedStyle(node).direction === 'rtl';
+		const sign = (side === 'end' ? 1 : -1) * (rtl ? -1 : 1);
+		return {
+			delay,
+			duration,
+			easing,
+			css: (t: number, u: number) =>
+				`opacity: ${t}; transform: translate(${(u * 8 * sign).toFixed(2)}px, ${(u * 4).toFixed(2)}px);`
+		};
+	}
+
+	function placeholderFor(turn: TranscriptTurn, name: string): string {
+		return turn.placeholder ?? `${name} spoke`;
+	}
+</script>
+
+{#snippet bubbleBody(row: (typeof rows)[number], isLast: boolean)}
+	{@const name = row.speaker.name}
+	{@const empty = !row.turn.text || !row.turn.text.trim()}
+	{#if !row.first}<span class="sr-only">{name}:</span>{/if}
+	<!-- Phrasing content only (a bubble may be a <button>): spans, and
+	     StreamedText's block markup only on a non-button bubble. -->
+	{#if streaming && isLast && !empty && !onTurnClick}
+		<StreamedText text={row.turn.text ?? ''} streaming split="line" class="ct-words" />
+	{:else if empty}
+		<span class="ct-words ct-placeholder">{placeholderFor(row.turn, name)}</span>
+	{:else}
+		<span class="ct-words">{row.turn.text}</span>
+	{/if}
+{/snippet}
+
+<div class="ct relative flex min-h-0 flex-col {className}" style:max-height={maxHeight}>
+	<!-- A scrollable region must be reachable by keyboard to scroll it. -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		use:scroller.action
+		class="ct-scroll min-h-0 flex-1 overflow-y-auto"
+		role="log"
+		aria-live={live ? 'polite' : 'off'}
+		aria-label={ariaLabel}
+		tabindex="0"
+	>
+		{#if rows.length === 0}
+			<p class="ct-empty">{emptyText}</p>
+		{:else}
+			<ol class="ct-list">
+				{#each rows as row, i (row.turn.id)}
+					{@const isLast = i === rows.length - 1}
+					{@const time = formatTime(row.turn.at)}
+					<li
+						class="ct-row"
+						class:ct-end={row.side === 'end'}
+						class:ct-first={row.first}
+						data-tone={row.tone}
+						aria-current={activeId != null && row.turn.id === activeId ? 'true' : undefined}
+						in:bubbleIn={{ side: row.side }}
+					>
+						{#if avatars}
+							<div class="ct-avatar" aria-hidden="true">
+								{#if row.first}
+									<Avatar name={row.speaker.name} avatarUrl={row.speaker.avatarUrl} size="small" />
+								{/if}
+							</div>
+						{/if}
+						<div class="ct-stack">
+							{#if row.first}
+								<div class="ct-head">
+									<span class="ct-name">{row.speaker.name}</span>
+									{#if time}
+										<time class="ct-time" datetime={turnDatetime(row.turn.at)}>{time}</time>
+									{/if}
+								</div>
+							{/if}
+							<div class="ct-bubble-wrap">
+								{#if onTurnClick}
+									<button
+										type="button"
+										class="ct-bubble ct-bubble-btn"
+										class:ct-tail={row.last}
+										onclick={() => onTurnClick(row.turn)}
+									>
+										{@render bubbleBody(row, isLast)}
+									</button>
+								{:else}
+									<div class="ct-bubble" class:ct-tail={row.last}>
+										{@render bubbleBody(row, isLast)}
+									</div>
+								{/if}
+								{#if !row.first && time}
+									<time class="ct-time ct-time-hover" datetime={turnDatetime(row.turn.at)}>{time}</time>
+								{/if}
+								{#if actions}
+									<div class="ct-actions">{@render actions(row.turn)}</div>
+								{/if}
+							</div>
+							{#if meta}
+								<div class="ct-meta">{@render meta(row.turn)}</div>
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</ol>
+		{/if}
+	</div>
+	{#if follow}
+		<JumpToLatest
+			visible={!stick.atBottom}
+			unreadCount={stick.unread}
+			label="Jump to the latest turn"
+			onclick={scroller.jumpToLatest}
+		/>
+	{/if}
+</div>
+
+<style>
+	.ct-scroll {
+		padding: 0.5rem;
+	}
+
+	.ct-empty {
+		margin: 0;
+		padding: 0.5rem;
+		font-size: 0.875rem;
+		color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
+	}
+
+	.ct-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.ct-row {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		max-width: 100%;
+	}
+	.ct-row.ct-first {
+		margin-block-start: 0.5rem;
+	}
+	.ct-row.ct-first:first-child {
+		margin-block-start: 0;
+	}
+	.ct-row.ct-end {
+		flex-direction: row-reverse;
+	}
+
+	.ct-avatar {
+		flex: none;
+		width: 2rem;
+	}
+
+	.ct-stack {
+		display: flex;
+		min-width: 0;
+		max-width: min(80%, 36rem);
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.125rem;
+	}
+	.ct-end .ct-stack {
+		align-items: flex-end;
+	}
+
+	.ct-head {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		padding-inline: 0.25rem;
+		font-size: 0.75rem;
+	}
+	.ct-end .ct-head {
+		flex-direction: row-reverse;
+	}
+	.ct-name {
+		font-weight: 600;
+		color: var(--color-base-content);
+	}
+	.ct-time {
+		font-variant-numeric: tabular-nums;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
+	}
+
+	.ct-bubble-wrap {
+		position: relative;
+		display: flex;
+		max-width: 100%;
+		align-items: center;
+		gap: 0.375rem;
+	}
+	.ct-end .ct-bubble-wrap {
+		flex-direction: row-reverse;
+	}
+
+	.ct-bubble {
+		--ct-tint: var(--color-base-200);
+		min-width: 0;
+		border-radius: var(--radius-box, 0.75rem);
+		background: var(--ct-tint);
+		color: var(--color-base-content);
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		line-height: 1.4;
+		text-align: start;
+		overflow-wrap: anywhere;
+	}
+	[data-tone='primary'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-primary) 16%, var(--color-base-100));
+	}
+	[data-tone='secondary'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-secondary) 16%, var(--color-base-100));
+	}
+	[data-tone='accent'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-accent) 16%, var(--color-base-100));
+	}
+	[data-tone='info'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-info) 16%, var(--color-base-100));
+	}
+	/* The run's last bubble points at its speaker: a tighter corner on their side. */
+	.ct-bubble.ct-tail {
+		border-end-start-radius: 0.25rem;
+	}
+	.ct-end .ct-bubble.ct-tail {
+		border-end-start-radius: var(--radius-box, 0.75rem);
+		border-end-end-radius: 0.25rem;
+	}
+
+	.ct-bubble-btn {
+		cursor: pointer;
+		border: 0;
+		font: inherit;
+		transition: background-color var(--motion-fast, 120ms) ease;
+	}
+	.ct-bubble-btn:hover {
+		--ct-tint: color-mix(in oklch, var(--color-base-content) 10%, var(--color-base-100));
+	}
+	.ct-bubble-btn:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	.ct-row[aria-current='true'] .ct-bubble {
+		box-shadow: inset 0 0 0 2px var(--color-primary);
+	}
+
+	.ct-bubble :global(.ct-words) {
+		display: block;
+		margin: 0;
+		white-space: pre-wrap;
+	}
+	.ct-placeholder {
+		font-style: italic;
+		color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
+	}
+
+	/* Grouped bubbles: the time and the host's actions appear on hover / focus. */
+	.ct-time-hover,
+	.ct-actions {
+		flex: none;
+		opacity: 0;
+		transition: opacity var(--motion-fast, 120ms) ease;
+	}
+	.ct-row:hover .ct-time-hover,
+	.ct-row:focus-within .ct-time-hover,
+	.ct-row:hover .ct-actions,
+	.ct-row:focus-within .ct-actions {
+		opacity: 1;
+	}
+
+	.ct-meta {
+		padding-inline: 0.25rem;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
+	}
+
+	@media (hover: none) {
+		.ct-time-hover,
+		.ct-actions {
+			opacity: 1;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ct-time-hover,
+		.ct-actions,
+		.ct-bubble-btn {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/messaging/ChatTranscript.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import { type TranscriptSpeaker, type TranscriptTurn } from './chatTranscript';
+interface Props {
+    turns: TranscriptTurn[];
+    speakers: TranscriptSpeaker[];
+    /** The last turn is still arriving: reveal it per line with a caret. */
+    streaming?: boolean;
+    /** Group consecutive turns by one speaker (name once per run). Default true. */
+    group?: boolean;
+    /** Show speaker avatars beside the first bubble of a run. Default true. */
+    avatars?: boolean;
+    /** Polite live region (new turns are announced). Default true. */
+    live?: boolean;
+    /** Follow the live edge + JumpToLatest. Default true. */
+    follow?: boolean;
+    /** Accessible name of the log. */
+    ariaLabel?: string;
+    /** Turn timestamp text; default formatTurnTime (offset "1:05" / clock "10:42 AM"). */
+    formatTime?: (at: TranscriptTurn['at']) => string | null;
+    /** Shown when there are no turns. */
+    emptyText?: string;
+    /** Extra line under a bubble (latency, a flag). Words, not colour alone. */
+    meta?: Snippet<[TranscriptTurn]>;
+    /** Hover / focus toolbar for a bubble. None by default. */
+    actions?: Snippet<[TranscriptTurn]>;
+    /** Makes every bubble a button (e.g. seek a recording to `turn.at`). */
+    onTurnClick?: (turn: TranscriptTurn) => void;
+    /** The turn playing now (recordings): marked with aria-current. */
+    activeId?: string | number | null;
+    /** Height bound of the scroller (CSS). Default: fill the parent. */
+    maxHeight?: string;
+    class?: string;
+}
+declare const ChatTranscript: import("svelte").Component<Props, {}, "">;
+type ChatTranscript = ReturnType<typeof ChatTranscript>;
+export default ChatTranscript;

package/dist/components/messaging/chatTranscript.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Pure logic for `ChatTranscript` (a read-only, two-sided transcript of named
+ * speakers: a live phone call, a Scribe dictation, a meeting recording).
+ * Kept out of the component so it runs under `npm run test:unit` with no DOM.
+ */
+/** Which side of the thread a speaker's bubbles sit on (logical: RTL mirrors). */
+export type TranscriptSide = 'start' | 'end';
+export interface TranscriptSpeaker {
+    /** Matches `TranscriptTurn.speaker`. */
+    id: string;
+    /** Shown above the speaker's first bubble in a run: "Dana Testwell", "Ruby". */
+    name: string;
+    /** Default: the first speaker listed sits at `start`, the second at `end`, the rest at `start`. */
+    side?: TranscriptSide;
+    /** Portrait URL; initials from `name` otherwise. */
+    avatarUrl?: string | null;
+    /**
+     * Bubble colour, as a token family. Default: `neutral` (base-200) on the
+     * start side, `primary` (a primary tint) on the end side.
+     */
+    tone?: TranscriptTone;
+}
+export type TranscriptTone = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info';
+export interface TranscriptTurn {
+    /** Stable key: never reused for a different turn. */
+    id: string | number;
+    /** A `TranscriptSpeaker.id`. An unknown id renders at `start` under its own id. */
+    speaker: string;
+    /**
+     * The words. `null` or blank renders `placeholder` in italics (a line that
+     * keeps no words: "Ruby spoke").
+     */
+    text: string | null;
+    /**
+     * When it was said: a number is ms into the recording ("1:05"); a string
+     * is an ISO instant (local clock time). Omit for none.
+     */
+    at?: number | string | null;
+    /** Shown when `text` is empty. Default: "<name> spoke". */
+    placeholder?: string;
+}
+export interface TranscriptRow {
+    turn: TranscriptTurn;
+    speaker: TranscriptSpeaker;
+    side: TranscriptSide;
+    tone: TranscriptTone;
+    /** First bubble of a run by one speaker: carries the name (and avatar). */
+    first: boolean;
+    /** Last bubble of a run: carries the bubble tail. */
+    last: boolean;
+}
+/** Speaker id → side, by the rule documented on `TranscriptSpeaker.side`. */
+export declare function resolveSpeakerSides(speakers: readonly TranscriptSpeaker[]): Map<string, TranscriptSide>;
+/**
+ * The rows the component draws: each turn with its speaker, side and tone,
+ * and whether it opens or closes a run. `group: false` makes every turn its
+ * own run (a name on every bubble).
+ */
+export declare function buildTranscriptRows(turns: readonly TranscriptTurn[], speakers: readonly TranscriptSpeaker[], group?: boolean): TranscriptRow[];
+/** "m:ss" (or "h:mm:ss") for an offset in ms; negative or non-finite → null. */
+export declare function formatOffset(ms: number): string | null;
+/**
+ * The default timestamp: an offset as "1:05", an ISO instant as the local
+ * clock ("10:42 AM"), anything unreadable as null (nothing is shown).
+ */
+export declare function formatTurnTime(at: number | string | null | undefined, locale?: string): string | null;
+/** The machine-readable `datetime` for a `<time>`: ISO stays ISO, an offset becomes a duration. */
+export declare function turnDatetime(at: number | string | null | undefined): string | undefined;

package/dist/components/messaging/chatTranscript.js

@@ -0,0 +1,72 @@
+/**
+ * Pure logic for `ChatTranscript` (a read-only, two-sided transcript of named
+ * speakers: a live phone call, a Scribe dictation, a meeting recording).
+ * Kept out of the component so it runs under `npm run test:unit` with no DOM.
+ */
+/** Speaker id → side, by the rule documented on `TranscriptSpeaker.side`. */
+export function resolveSpeakerSides(speakers) {
+    const sides = new Map();
+    speakers.forEach((s, i) => {
+        sides.set(s.id, s.side ?? (i === 1 ? 'end' : 'start'));
+    });
+    return sides;
+}
+/**
+ * The rows the component draws: each turn with its speaker, side and tone,
+ * and whether it opens or closes a run. `group: false` makes every turn its
+ * own run (a name on every bubble).
+ */
+export function buildTranscriptRows(turns, speakers, group = true) {
+    const byId = new Map(speakers.map((s) => [s.id, s]));
+    const sides = resolveSpeakerSides(speakers);
+    const rows = turns.map((turn) => {
+        const speaker = byId.get(turn.speaker) ?? { id: turn.speaker, name: turn.speaker };
+        const side = sides.get(turn.speaker) ?? 'start';
+        const tone = speaker.tone ?? (side === 'end' ? 'primary' : 'neutral');
+        return { turn, speaker, side, tone, first: true, last: true };
+    });
+    if (!group)
+        return rows;
+    for (let i = 1; i < rows.length; i++) {
+        if (rows[i].turn.speaker === rows[i - 1].turn.speaker) {
+            rows[i].first = false;
+            rows[i - 1].last = false;
+        }
+    }
+    return rows;
+}
+/** "m:ss" (or "h:mm:ss") for an offset in ms; negative or non-finite → null. */
+export function formatOffset(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return null;
+    const total = Math.floor(ms / 1000);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = String(total % 60).padStart(2, '0');
+    return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${s}` : `${m}:${s}`;
+}
+/**
+ * The default timestamp: an offset as "1:05", an ISO instant as the local
+ * clock ("10:42 AM"), anything unreadable as null (nothing is shown).
+ */
+export function formatTurnTime(at, locale) {
+    if (at == null || at === '')
+        return null;
+    if (typeof at === 'number')
+        return formatOffset(at);
+    const d = new Date(at);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return d.toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit' });
+}
+/** The machine-readable `datetime` for a `<time>`: ISO stays ISO, an offset becomes a duration. */
+export function turnDatetime(at) {
+    if (at == null || at === '')
+        return undefined;
+    if (typeof at === 'number') {
+        if (!Number.isFinite(at) || at < 0)
+            return undefined;
+        return `PT${(at / 1000).toFixed(3).replace(/\.?0+$/, '')}S`;
+    }
+    return Number.isNaN(new Date(at).getTime()) ? undefined : at;
+}

package/dist/index.d.ts

@@ -191,6 +191,9 @@ export { default as MessageItem } from './components/messaging/MessageItem.svelt
 export { default as MessageThread } from './components/messaging/MessageThread.svelte';
 export { default as QuotedMessageDisplay } from './components/messaging/QuotedMessageDisplay.svelte';
 export { default as ThreadPanel } from './components/messaging/ThreadPanel.svelte';
+export { default as ChatTranscript } from './components/messaging/ChatTranscript.svelte';
+export { buildTranscriptRows, resolveSpeakerSides, formatTurnTime, formatOffset, turnDatetime } from './components/messaging/chatTranscript';
+export type { TranscriptSpeaker, TranscriptTurn, TranscriptRow, TranscriptSide, TranscriptTone } from './components/messaging/chatTranscript';
 export { default as CreateChannelModal } from './components/messaging/CreateChannelModal.svelte';
 export { default as StartDMModal } from './components/messaging/StartDMModal.svelte';
 export { default as ChannelInfoModal } from './components/messaging/ChannelInfoModal.svelte';

package/dist/index.js

@@ -229,6 +229,9 @@ export { default as MessageItem } from './components/messaging/MessageItem.svelt
 export { default as MessageThread } from './components/messaging/MessageThread.svelte';
 export { default as QuotedMessageDisplay } from './components/messaging/QuotedMessageDisplay.svelte';
 export { default as ThreadPanel } from './components/messaging/ThreadPanel.svelte';
+// Read-only, two-sided transcript of named speakers (calls, dictation, meetings).
+export { default as ChatTranscript } from './components/messaging/ChatTranscript.svelte';
+export { buildTranscriptRows, resolveSpeakerSides, formatTurnTime, formatOffset, turnDatetime } from './components/messaging/chatTranscript';
 export { default as CreateChannelModal } from './components/messaging/CreateChannelModal.svelte';
 export { default as StartDMModal } from './components/messaging/StartDMModal.svelte';
 export { default as ChannelInfoModal } from './components/messaging/ChannelInfoModal.svelte';

package/dist/utils/dialogFocus.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Dialog focus resolution (jatui-fo6o8)
+ *
+ * Shared rule for every surface that opens an overlay dialog/panel
+ * (Modal, Drawer, BottomSheet, Confirm*, InputDialog): on open, focus in
+ * this order —
+ *
+ *   1. an element with [data-autofocus] or the `autofocus` attribute inside
+ *      the container (a consumer's explicit opt-in);
+ *   2. else the first ENABLED, RENDERED text-entry control in the body
+ *      (not the header close button — buttons never qualify anyway): a
+ *      text-like <input>, an enabled <textarea>, or a contenteditable
+ *      element;
+ *   3. else the container element itself (today's behaviour — keeps Escape
+ *      working for read-only / confirm dialogs, see Modal's Escape note).
+ *
+ * "Rendered" matters: a focus() on an element that is not actually visible
+ * (display:none, inside a collapsed <details>, a [hidden]/[inert] ancestor,
+ * or visibility:hidden) is a silent no-op that leaves focus on <body>, which
+ * breaks the dialog's own Escape handling (Modal owns Escape on the dialog
+ * element). Unrendered candidates are skipped, and after focusing the target
+ * is verified to actually hold focus — else the fallback/container is
+ * focused instead.
+ *
+ * WAI-ARIA APG dialog pattern: focus the first field the user is expected
+ * to fill. `initialFocus` overrides the whole order —
+ *
+ *   - `HTMLElement` / `string` (a CSS selector, resolved inside the
+ *     container): focus exactly that; falls through to the default order
+ *     when the selector matches nothing.
+ *   - `'dialog'`: always focus the container (old behaviour — right for
+ *     read-only / confirm dialogs).
+ *   - `'first-input'` (default): the 1→2→3 order above.
+ */
+export type InitialFocus = HTMLElement | string | 'dialog' | 'first-input';
+export interface FocusOptions {
+    /** Explicit target. Default `'first-input'`. */
+    initialFocus?: InitialFocus | null;
+    /** Element to focus when nothing matches. Default the container itself. */
+    fallback?: HTMLElement | null;
+}
+/** True for an element a user can type into: text-like input, enabled textarea, contenteditable. */
+export declare function isTextEntryControl(el: Element): boolean;
+/**
+ * Resolve the element a dialog should focus when it opens, per the order
+ * above. Returns null when nothing matches and there is no fallback.
+ */
+export declare function resolveDialogFocusTarget(container: HTMLElement | null, opts?: FocusOptions): HTMLElement | null;
+/**
+ * Focus a resolved target on the next frame (after the open transition has
+ * mounted the content). Mirrors the previous `requestAnimationFrame` timing
+ * so focus lands on real DOM, not a mounting tree.
+ */
+export declare function focusDialogTarget(container: HTMLElement | null, opts?: FocusOptions, rq?: typeof requestAnimationFrame): void;