@joewinke/jatui 0.56.0 → 0.58.0

package/CLAUDE.md

@@ -83,7 +83,7 @@ Then import:
 | `StatGroup` | Lays out StatCards: `cards` (responsive auto-fit grid) or `joined` (one bordered panel with hairline dividers) — the replacement for raw DaisyUI `stats` markup. | `columns?`, `minWidth?` ('12rem'), `variant?`, `ariaLabel?`, `children` |
 | `ChartCard` | "Headline + period switch + chart" shell that draws NO chart (bring layerchart / d3 / SVG). The `chart` snippet gets `{ period, hover, hovered }`; call `hover({value, label, delta?})` as the pointer moves and the headline tweens to that point and the caption shows its label; `hover(null)` (or pointer leave) restores the total. Periods use SegmentedControl. | `label`, `value`, `format?`, `delta?`, `invertDelta?`, `caption?`, `periods?`, `period` (bindable), `onPeriodChange?`, `chartHeight?`, `loading?`, `chart` (snippet), `actions?`/`footer?` (snippets) |
 | `BarList` | Ranked horizontal bars ("top pages / top callers"): label + value as text, a decorative token-tinted bar sized against the max, optional `href` or `onSelect` per row, `hint`, per-row `tone`, `limit` + "Show N more". Pure HTML/CSS, no chart lib. | `items: BarListItem[]`, `sort?` (`desc`), `limit?`, `format?`, `formatValue?(item, total)`, `labelHeader?`/`valueHeader?`, `tone?`, `size?`, `onSelect?`, `label?` (snippet) |
-| `ActivityHeatmap` | GitHub-style activity-per-day calendar (calls/day, tasks closed/day): 7 weekday rows × week columns, default range = last 12 months, `weekStart`, 4-step `color-mix` ramp from one theme `tone` (no hex), one floating tooltip, legend + summary ("1,204 calls in the last year"). `role="grid"` with ONE tab stop: arrows move by day (↑↓) / week (←→), PgUp/PgDn 4 weeks, Home/End row ends, mod+Home/End range ends, Enter/Space select. Pure layout helpers exported (`buildHeatmap`, `moveHeatFocus`). | `data` (`{date, count}[]` or `getDate`/`getCount`), `start?`/`end?`, `weekStart?`, `unit?` ('call' or ['call','calls']), `formatLabel?`, `tone?`, `levels?`, `levelOf?`, `compact?`, `showLegend?`/`showWeekdays?`/`showMonths?`, `summary?`, `selected` (bindable), `onSelectDay?(date, count)`, `locale?` |
+| `ActivityHeatmap` | GitHub-style activity-per-day calendar (calls/day, tasks closed/day): 7 weekday rows × week columns, default range = last 12 months, `weekStart`, 4-step `color-mix` ramp from one theme `tone` (no hex), one floating tooltip, legend + summary ("1,204 calls in the last year"). `role="grid"` with ONE tab stop: arrows move by day (↑↓) / week (←→), PgUp/PgDn 4 weeks, Home/End row ends, mod+Home/End range ends, Enter/Space select. `fill` (default `true`) sizes the cells to the container — pure CSS (`container-type: inline-size` + cqi), clamped 8–20px (`--hm-cell-min`/`--hm-cell-max`), scrolling only below the floor and the legend parked under the grid's right edge; `fill={false}` is the legacy fixed 12px grid (and the one to pass in a shrink-to-fit host, where an inline-size container collapses). Pure layout helpers exported (`buildHeatmap`, `moveHeatFocus`). | `data` (`{date, count}[]` or `getDate`/`getCount`), `start?`/`end?`, `weekStart?`, `unit?` ('call' or ['call','calls']), `formatLabel?`, `tone?`, `levels?`, `levelOf?`, `compact?`, `fill?` (true), `showLegend?`/`showWeekdays?`/`showMonths?`, `summary?`, `selected` (bindable), `onSelectDay?(date, count)`, `locale?` |
 | `StatusBadge` | Status indicator with dot | `status: StatusValue`, `label` |
 | `Card` | Content card container | `title`, `children` (snippet) |
 | `Modal` | Dialog overlay. `zIndex` accepts `number` OR any CSS `z-index` string, including `"var(--z-lightbox)"`. **On open, focus goes to the first fillable field** (WAI-ARIA APG): a `[data-autofocus]`/`autofocus` element, else the first enabled **rendered** text-entry control (readOnly/disabled textareas excluded, unrendered candidates skipped), else the dialog itself — `initialFocus` overrides the order (`'dialog'` restores the old container focus); the focus landing is verified, else the container is focused. When the dialog is the fallback focus, **Escape is owned by the dialog element itself** (not the window handler), so `trapKeys`' stopPropagation can't swallow Esc; a Modal opened inside a host Drawer closes before the drawer. The component ships its own open-state `.modal-box` opacity rule, so it renders under DaisyUI 5 with no host global override. | `open` (bindable), `title`, `children` (snippet), `zIndex?: string \| number`, `trapKeys?`, `closeOnEscape?`, `initialFocus?` |
@@ -110,7 +110,7 @@ Then import:
 
 ### Agent surfaces (BoardUI wave 2)
 
-"Agent is working" UI. Free BoardUI items (agent-thinking, agent-log, composer-loader, notification-center) were ported under MIT — see `THIRD_PARTY_NOTICES.md`; AgentTaskList, Questionnaire and ContextMeter are clean-room. Demos: `/components/agent-thinking`, `agent-log`, `agent-task-list`, `questionnaire`, `context-meter`, `notification-center`, `composer-glow`, `streamed-text`.
+"Agent is working" UI. Free BoardUI items (agent-thinking, agent-log, composer-loader, notification-center) were ported under MIT — see `THIRD_PARTY_NOTICES.md`; AgentTaskList, Questionnaire and ContextMeter are clean-room. Demos: `/components/agent-thinking`, `agent-log`, `agent-task-list`, `questionnaire`, `context-meter`, `notification-center`, `composer-glow`, `streamed-text`, `chat-transcript`.
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
@@ -124,6 +124,7 @@ Then import:
 | `NotificationCenter` | Inbox panel: title + "N unread" + "Mark all read"; a tab list with count chips (default All / Mentions / System by `category`; `bind:tab` or uncontrolled `defaultTab`; arrows / Home / End switch tabs). Items are newest first under Today / Yesterday / This week / Earlier headers (`groupNotificationsByDate`, `now` injectable). Roving focus via `createListNav`, scoped to the list: j/k/arrows move, Enter opens → `onOpen(item)` or follows `href`. Opening an item or clicking one of its actions marks it read. The host owns read state (`read`); the component also tracks read ids locally, so it works uncontrolled. The unread dot is announced (sr-only "Unread"). Status glyph or `Avatar`; `<time>` via `formatRelativeTime`, refreshed each minute. Empty state via `Empty` ("You're all caught up"). | `items: NotificationItem[]`, `tabs?: {id, label, filter?}[]`, `tab` (bindable), `defaultTab?`, `onTabChange?`, `onOpen?`, `onMarkRead?(ids)`, `onMarkAllRead?` (omitted → `onMarkRead` gets every unread id), `groupByDate?` (true), `now?`, `maxHeight?` ('32rem'), `title?`, `emptyTitle?`, `emptyDescription?` |
 | `ComposerGlow` | Opt-in ambient rim light around a composer while the agent works: an SVG `<rect rx>` stroke with a pathLength=100 dash laps the box in three layers (crisp line, glow, bloom clipped inside; SVG `feGaussianBlur`, so iOS stays soft); a ResizeObserver keeps the viewBox equal to the px box. Token colours only (info → primary → `color-mix` midpoint → secondary → accent). Fades in/out on `active`; the lap runs only while visible. Under `data-motion="calm"` / reduced motion there is no frozen arc: it shows a static primary focus-ring tint. Paints a `--color-base-100` surface, so the wrapped composer must be transparent. | `active`, `speed?` (4.5 s/lap), `intensity?` ('subtle'\|'normal'\|'vivid'), `radius?` (px or CSS; default box radius), `class?`, `children` |
 | `StreamedText` | Streamed assistant text revealed per paragraph/line, never per token: an append-only splitter (`splitStreamedText`, index keys, code fences kept whole) mounts each block once with a short fade + un-blur on motion tokens, after which it only grows. History doesn't animate; reduced motion is static; a subtle caret shows while `streaming`. `renderBlock` lets the host render markdown per block. Recipe: show `AgentThinking` until the first *text* part exists, not while the request status is "submitted". | `text`, `streaming?`, `split?` ('paragraph'\|'line'), `as?`, `class?`, `renderBlock?: Snippet<[string, number]>` |
+| `ChatTranscript` | 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/reactions/edit/delete, no HTML in the words; for a channel use `MessageThread`). Speakers sit on opposite sides (first listed `start`, second `end`, or `side`); consecutive turns group into a run (name + avatar once, tail on the last bubble; a grouped bubble carries the name sr-only). Label speakers by real names ("Dana Testwell", "Ruby"), never role words. `streaming` reveals the LAST turn per line through `StreamedText` with a caret. New turns slide in from their own side on motion tokens (history doesn't animate; calm/reduced motion honoured). Follows the live edge via `createStickToBottom`, `JumpToLatest` when scrolled away. Polite `role="log"`, keyboard-scrollable, `<time>` stamps (offset ms → "1:05", ISO → clock). Bubble tints are `color-mix` of a token family (`tone`: neutral/primary/secondary/accent/info). `meta` snippet (latency, flags — in words), `actions` snippet (hover/focus toolbar, none by default), `onTurnClick` (bubble becomes a button, e.g. seek) + `activeId`. Pure helpers: `buildTranscriptRows`, `resolveSpeakerSides`, `formatTurnTime`. | `turns: TranscriptTurn[]` (`{id, speaker, text \| null, at?, placeholder?}`), `speakers: TranscriptSpeaker[]` (`{id, name, side?, avatarUrl?, tone?}`), `streaming?`, `group?` (true), `avatars?` (true), `live?` (true), `follow?` (true), `ariaLabel?`, `formatTime?`, `emptyText?`, `meta?`/`actions?` (snippets), `onTurnClick?`, `activeId?`, `maxHeight?`, `class?` |
 
 **Upgrades in this wave (all additive):**
 - **`Steps`** (`progress/Steps.svelte`) — `collapsible?`, `collapsed?` (bindable), `summary?: string | Snippet` (default "3 steps left" / "All steps done", live while folded; the header is a real `aria-expanded` / `aria-controls` button), `orientation?` ('horizontal'\|'vertical'; vertical also shows descriptions), `activeProgress?` (0–1, a mini ProgressRing on the active node and in the folded header), `completionDelay?` + `onFinished?` (fires once after `current` passes the last step; re-arms if `current` drops back). Unset, the markup is unchanged. Helpers: `stepsSummary`, `stepsRemaining`, `isStepsFinished`, `clampStepProgress`.

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/components/stats/ActivityHeatmap.svelte

@@ -6,6 +6,13 @@
   (color-mix from one theme colour into base-100, no hex), a single tooltip,
   a legend and a summary line. One tab stop: arrows move by day/week inside
   the grid (role="grid"), Enter/Space selects.
+
+  Fill mode (jatui-pldt4, default): the component is an inline-size container
+  and --hm-cell is derived from the container width in pure CSS (cqi + calc,
+  no ResizeObserver, no first-paint jump), so a wide card is spanned end to
+  end and the footer — summary left, legend right — stays as wide as the
+  grid instead of floating at the card edges. fill={false} keeps the exact
+  legacy fixed-cell markup and scroll behaviour.
 -->
 <script lang="ts" generics="T = { date: string | Date; count: number }">
 	import { untrack } from 'svelte';
@@ -34,6 +41,21 @@
 		levelOf?: (count: number, max: number, levels: number) => number;
 		/** Smaller cells and labels. */
 		compact?: boolean;
+		/**
+		 * Size cells to the host's width (default `true`): `--hm-cell` becomes
+		 * `(containerWidth - focus padding - weekday gutter) / weeks - gap`,
+		 * clamped to `--hm-cell-min` (8px) … `--hm-cell-max` (20px) — both
+		 * overridable in CSS. Below the floor the grid overflows and scrolls
+		 * horizontally inside the component; above the ceiling the grid keeps its
+		 * maximum size at the inline start and the footer (summary + legend) is
+		 * sized to the grid's width, so the legend sits under the grid's right
+		 * edge rather than the card's. Needs a host that gives the component a
+		 * definite width (a card body): in a shrink-to-fit host the inline-size
+		 * container collapses — pass `fill={false}` there. `false` keeps the
+		 * fixed `--hm-cell` grid (the exact legacy markup) with the same
+		 * horizontal scroll whenever the weeks don't fit.
+		 */
+		fill?: boolean;
 		showLegend?: boolean;
 		showWeekdays?: boolean;
 		showMonths?: boolean;
@@ -60,6 +82,7 @@
 		levels = 4,
 		levelOf,
 		compact = false,
+		fill = true,
 		showLegend = true,
 		showWeekdays = true,
 		showMonths = true,
@@ -165,6 +188,7 @@
 <div
 	class="jatui-heatmap tone-{tone} {className}"
 	class:is-compact={compact}
+	class:is-fill={fill}
 	bind:this={wrapEl}
 	style:--weeks={layout.weeks}
 >
@@ -255,6 +279,13 @@
 	.jatui-heatmap {
 		--hm-cell: 0.75rem;
 		--hm-gap: 3px;
+		/* Root font size and the focus-ring padding as vars so the fill math can
+		 * reference them without em (em inside an inherited custom property
+		 * resolves against each USING element's font size — the weekday labels
+		 * are 0.9em and would disagree with the cells). rem is absolute, so
+		 * every element resolves the same px. */
+		--hm-fs: 0.75rem;
+		--hm-pad: 2px;
 		--hm-tone: var(--color-primary);
 		--hm-empty: color-mix(in oklch, var(--color-base-content) 8%, var(--color-base-100));
 		position: relative;
@@ -263,13 +294,56 @@
 		gap: var(--jatui-space-base, 8px);
 		min-width: 0;
 		max-width: 100%;
-		font-size: 0.75rem;
+		font-size: var(--hm-fs);
 		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 	}
 	.jatui-heatmap.is-compact {
 		--hm-cell: 0.625rem;
+		--hm-fs: 0.6875rem;
 		--hm-gap: 2px;
-		font-size: 0.6875rem;
+		font-size: var(--hm-fs);
+	}
+
+	/* Fill mode (jatui-pldt4): the component is the size container; cells size
+	 * to the width the host gives it — (container - focus padding - weekday
+	 * gutter) / weeks - gap — clamped to a readable band (--hm-cell-min …
+	 * --hm-cell-max). Below the floor the grid overflows and .hm-scroll scrolls
+	 * (the floor is the only thing that triggers scrolling); above the ceiling
+	 * the grid keeps its maximum size at the inline start and the footer is
+	 * sized to the grid's width, so the legend lands under the grid's right
+	 * edge, never the card's. Month labels and the weekday column keep reading
+	 * the same --hm-cell, so everything stays on one grid. */
+	.jatui-heatmap.is-fill {
+		container-type: inline-size;
+	}
+	.jatui-heatmap.is-fill:has(.hm-weekdays) {
+		--hm-label-w: calc(2.25 * var(--hm-fs) + var(--hm-gap));
+	}
+	.jatui-heatmap.is-fill .hm-months {
+		/* A month starting in the final week column hangs its label past the
+		 * grid's right edge; legacy let the body grow to fit it, but the fill
+		 * grid is pinned to the container — clip the decorative label at the
+		 * grid's edge instead of handing the scroller a phantom scrollbar. */
+		overflow: hidden;
+	}
+	.jatui-heatmap.is-fill :is(.hm-scroll, .hm-foot) {
+		--hm-cell: clamp(
+			var(--hm-cell-min, 8px),
+			calc(
+				(100cqi - 2 * var(--hm-pad) - var(--hm-label-w, 0px)) / var(--weeks) -
+					var(--hm-gap)
+			),
+			var(--hm-cell-max, 20px)
+		);
+	}
+	.jatui-heatmap.is-fill .hm-foot {
+		width: min(
+			calc(
+				var(--hm-pad) + var(--hm-label-w, 0px) +
+					var(--weeks) * (var(--hm-cell) + var(--hm-gap)) - var(--hm-gap)
+			),
+			100%
+		);
 	}
 	.tone-secondary { --hm-tone: var(--color-secondary); }
 	.tone-accent { --hm-tone: var(--color-accent); }
@@ -282,7 +356,7 @@
 		overflow-x: auto;
 		overscroll-behavior-x: contain;
 		/* room for the focus ring */
-		padding: 2px;
+		padding: var(--hm-pad);
 	}
 	.hm-body {
 		display: inline-flex;

package/dist/components/stats/ActivityHeatmap.svelte.d.ts

@@ -24,6 +24,21 @@ declare function $$render<T = {
         levelOf?: (count: number, max: number, levels: number) => number;
         /** Smaller cells and labels. */
         compact?: boolean;
+        /**
+         * Size cells to the host's width (default `true`): `--hm-cell` becomes
+         * `(containerWidth - focus padding - weekday gutter) / weeks - gap`,
+         * clamped to `--hm-cell-min` (8px) … `--hm-cell-max` (20px) — both
+         * overridable in CSS. Below the floor the grid overflows and scrolls
+         * horizontally inside the component; above the ceiling the grid keeps its
+         * maximum size at the inline start and the footer (summary + legend) is
+         * sized to the grid's width, so the legend sits under the grid's right
+         * edge rather than the card's. Needs a host that gives the component a
+         * definite width (a card body): in a shrink-to-fit host the inline-size
+         * container collapses — pass `fill={false}` there. `false` keeps the
+         * fixed `--hm-cell` grid (the exact legacy markup) with the same
+         * horizontal scroll whenever the weeks don't fit.
+         */
+        fill?: boolean;
         showLegend?: boolean;
         showWeekdays?: boolean;
         showMonths?: boolean;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.56.0",
+  "version": "0.58.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",