@dorsk/tsumikit 0.61.1 → 0.62.0

package/README.md

@@ -295,6 +295,10 @@ shows a `N%` bubble while it is moved; `oninput` live, `onchange` on commit;
 `clearAtMax`/`uncappedLabel` express "no cap", `layout`/`stackBelow` put the
 readout above a full-width track, `capLabel`/`capValueText` localise the ARIA
 strings),
+StatusBar (thin `role="status"` row: `tone` idle/busy/ok/warn/error dot or spinner, `label` or
+`children`, `trailing`), ChatBubble (`timestamp`, `footer` snippet, `markdown` body rendered
+through `renderMarkdown` into `Prose` when there are no `children`),
+Composer (`toolbarStart`/`toolbarEnd` snippets move attach + send into a row under the field),
 Drawer (side-panel `<dialog>`: `side`, `width` clamped to the viewport, full-screen
 under 48rem; `nav` page column that turns into a horizontal strip on narrow
 screens, or `navMobile`; sticky `footer`; Escape / scrim / close button all close),
@@ -312,7 +316,8 @@ ArrowUp/Down, Enter/Tab (`selectOn`), Escape and blur; `open`/`index` are
 bindable, `onselect`/`onclose(reason)` report picks; `findTrigger`/`applyTrigger`
 are exported for trigger-char detection and token replacement).
 
-**Organisms:** DataTable (generic `<T>`, typed columns + cell snippets;
+**Organisms:** ConversationPanel / ConversationFeed (chat column + sticky
+feed, see below), DataTable (generic `<T>`, typed columns + cell snippets;
 `layout="fixed"` makes column widths authoritative, `Column.truncate` /
 `nowrap` / `hideBelow="sm|md|lg"` (container-query on the table's own box),
 `hideHeader` clips the header but keeps it for assistive tech, `rowTone(row)`
@@ -562,6 +567,49 @@ it is neither focusable nor announced. `Composer` inherits the behaviour.
 <AttachmentList tiles files={[{ name: 'cover.png', size: 1024, type: 'image/png', url }]} />
 ```
 
+### ConversationPanel, ConversationFeed, StatusBar
+
+`ConversationPanel` is the chat column: `header`, the feed as `children`
+(flexes), `status`, `composer`, filling its parent with token borders between
+the rows. `ConversationFeed` (generic `<T>`) takes `items`, `key(item)` and an
+`item(item, index)` snippet; `empty` renders when there is nothing. It sticks
+to the bottom while the user is within 80px of it (`follow`, default true),
+holds the viewport still when older items are prepended, and shows a
+`jumpLabel` pill ("Jump to latest") when new items land while scrolled up.
+`loadMore` idle | loading | error | done renders a `LoadMore` pill at the top
+that calls `onloadmore`; `scrollToBottom(behavior?)` is exported on the
+instance. `StatusBar` is the thin live row under the feed: `tone` idle |
+busy (Spinner) | ok | warn | error, `label` or `children`, `trailing`.
+
+`renderMarkdown(src, { tables?, autolink?, highlight? })` turns chat markdown
+into HTML for `Prose`: everything is escaped first, then headings, emphasis,
+inline/fenced code, lists, blockquotes, rules, GFM tables and links with safe
+schemes only (`javascript:`/`data:` stay text). `highlight(code, lang)` is an
+optional hook returning safe HTML for fenced blocks; `stripAnsi` and
+`escapeHtml` are exported too. `ChatBubble` takes `markdown` directly, plus
+`timestamp` (after the role pill) and a `footer` snippet. `Composer` gains
+`toolbarStart` / `toolbarEnd`: either one moves attach and send into a row
+under the field, start slot left, end slot then send right.
+
+```svelte
+<ConversationPanel>
+  {#snippet header()}<Text weight="medium">Session</Text>{/snippet}
+  <ConversationFeed bind:this={feed} items={msgs} key={(m) => m.id} loadMore={more} onloadmore={loadOlder}>
+    {#snippet item(m)}
+      <ChatBubble role={m.role} timestamp={m.at} markdown={m.text}>
+        {#snippet footer()}<span>{m.ms}ms</span>{/snippet}
+      </ChatBubble>
+    {/snippet}
+  </ConversationFeed>
+  {#snippet status()}<StatusBar tone={busy ? 'busy' : 'ok'} label={busy ? 'Working…' : 'Listening'} />{/snippet}
+  {#snippet composer()}
+    <Composer onsubmit={send}>
+      {#snippet toolbarStart()}<Toggle pressed={pick} onclick={togglePick}>⌖ Pick</Toggle>{/snippet}
+    </Composer>
+  {/snippet}
+</ConversationPanel>
+```
+
 ### Artwork
 
 `Artwork` is the one cover/thumbnail tile: `src` + `alt` (required) render a

package/dist/components/molecules/ChatBubble.svelte

@@ -5,12 +5,19 @@
 	import Badge from '../atoms/Badge.svelte';
 	import Button from '../atoms/Button.svelte';
 	import CopyButton from './CopyButton.svelte';
+	import Prose from './Prose.svelte';
+	import Timestamp from './Timestamp.svelte';
+	import { renderMarkdown } from '../../markdown';
+	import type { TimeInput } from '../../timestamp';
 
 	let {
 		role = 'assistant',
 		roleLabel,
 		align,
+		timestamp,
 		meta,
+		footer,
+		markdown,
 		actions,
 		state: delivery,
 		onretry,
@@ -29,7 +36,13 @@
 		roleLabel?: string;
 		/** Defaults to `end` for the user, `start` otherwise. */
 		align?: 'start' | 'end';
+		/** Rendered as a `Timestamp` after the role pill. */
+		timestamp?: TimeInput;
 		meta?: Snippet;
+		/** Muted row under the body: durations, token usage, file info. */
+		footer?: Snippet;
+		/** Rendered through `renderMarkdown` into `Prose` when `children` is absent. */
+		markdown?: string;
 		actions?: Snippet;
 		state?: 'sending' | 'failed';
 		onretry?: () => void;
@@ -41,13 +54,14 @@
 		selected?: boolean;
 		/** Renders a CopyButton in the actions row. */
 		copyText?: string;
-		children: Snippet;
+		children?: Snippet;
 		class?: string;
 		style?: string;
 	} = $props();
 
 	const side = $derived(align ?? (role === 'user' ? 'end' : 'start'));
 	let expanded = $state(false);
+	const html = $derived(children || markdown === undefined ? undefined : renderMarkdown(markdown));
 </script>
 
 <article
@@ -62,6 +76,7 @@
 >
 	<header class="meta">
 		<Badge size="xs" class="role-pill">{roleLabel ?? role}</Badge>
+		{#if timestamp !== undefined}<Timestamp value={timestamp} mode="time" size="xs" />{/if}
 		{#if meta}{@render meta()}{/if}
 		{#if delivery === 'sending'}<span class="state">sending…</span>{/if}
 		{#if delivery === 'failed'}
@@ -75,12 +90,15 @@
 			</span>
 		{/if}
 	</header>
-	<div class="body">{@render children()}</div>
+	<div class="body">
+		{#if children}{@render children()}{:else if html !== undefined}<Prose compact {html} />{/if}
+	</div>
 	{#if clamp}
 		<Button size="sm" variant="link" onclick={() => (expanded = !expanded)}>
 			{expanded ? collapseLabel : expandLabel}
 		</Button>
 	{/if}
+	{#if footer}<footer class="footer">{@render footer()}</footer>{/if}
 </article>
 
 <style>
@@ -148,6 +166,14 @@
 		min-width: 0;
 		overflow-wrap: anywhere;
 	}
+	.footer {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--sp-2);
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
 	.clamped .body {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;

package/dist/components/molecules/ChatBubble.svelte.d.ts

@@ -1,11 +1,18 @@
 import type { Snippet } from 'svelte';
+import type { TimeInput } from '../../timestamp';
 type $$ComponentProps = {
     role?: 'user' | 'assistant' | 'system' | 'tool' | 'mcp';
     /** Text of the role pill; defaults to the role name. */
     roleLabel?: string;
     /** Defaults to `end` for the user, `start` otherwise. */
     align?: 'start' | 'end';
+    /** Rendered as a `Timestamp` after the role pill. */
+    timestamp?: TimeInput;
     meta?: Snippet;
+    /** Muted row under the body: durations, token usage, file info. */
+    footer?: Snippet;
+    /** Rendered through `renderMarkdown` into `Prose` when `children` is absent. */
+    markdown?: string;
     actions?: Snippet;
     state?: 'sending' | 'failed';
     onretry?: () => void;
@@ -17,7 +24,7 @@ type $$ComponentProps = {
     selected?: boolean;
     /** Renders a CopyButton in the actions row. */
     copyText?: string;
-    children: Snippet;
+    children?: Snippet;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/Composer.svelte

@@ -2,7 +2,8 @@
 	// Chat composer: autoresizing Textarea with attach + send controls fused into
 	// one InputGroup, submit shortcuts, prompt history on ↑/↓ at the text edges,
 	// paste-to-attach and drag-over state. Attachments render above the field as
-	// removable chips, or as tiles once the composer is narrow.
+	// removable chips, or as tiles once the composer is narrow. `toolbarStart` /
+	// `toolbarEnd` move attach + send into a row under the field.
 	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
 	import Textarea from '../atoms/Textarea.svelte';
@@ -29,6 +30,8 @@
 		attachLabel = 'Attach',
 		leading,
 		trailing,
+		toolbarStart,
+		toolbarEnd,
 		class: klass = '',
 		style: styleProp = ''
 	}: {
@@ -53,6 +56,9 @@
 		attachLabel?: string;
 		leading?: Snippet;
 		trailing?: Snippet;
+		/** Either one renders a row under the field: start slot left, end slot then send right. */
+		toolbarStart?: Snippet;
+		toolbarEnd?: Snippet;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -66,6 +72,7 @@
 	const mode = $derived(submitOn === 'auto' ? (fine() ? 'enter' : 'mod-enter') : submitOn);
 	const canSend = $derived(!busy && !disabled && (value.trim().length > 0 || attachments.length > 0));
 	const hasAttach = $derived(!!onfiles || accept !== undefined);
+	const toolbar = $derived(!!toolbarStart || !!toolbarEnd);
 
 	function submit() {
 		if (!canSend) return;
@@ -129,13 +136,13 @@
 	}
 </script>
 
-{#snippet groupLeading()}
+{#snippet startControls()}
 	{#if leading}{@render leading()}{/if}
 	{#if hasAttach}
 		<FileButton onfiles={addFiles} {accept} multiple iconOnly label={attachLabel} variant="ghost" box="sm" {disabled} />
 	{/if}
 {/snippet}
-{#snippet groupTrailing()}
+{#snippet endControls()}
 	{#if trailing}{@render trailing()}{/if}
 	<Button variant="primary" box="sm" loading={busy} disabled={!canSend} aria-label={sendLabel} title={sendLabel} onclick={submit}>
 		<span aria-hidden="true">➤</span>
@@ -160,8 +167,8 @@
 	<InputGroup
 		align="end"
 		{disabled}
-		leading={leading || hasAttach ? groupLeading : undefined}
-		trailing={groupTrailing}
+		leading={!toolbar && (leading || hasAttach) ? startControls : undefined}
+		trailing={toolbar ? undefined : endControls}
 	>
 		<Textarea
 			bind:value
@@ -177,6 +184,18 @@
 			{onpaste}
 		/>
 	</InputGroup>
+	{#if toolbar}
+		<div class="toolbar">
+			<div class="toolbar-start">
+				{@render startControls()}
+				{#if toolbarStart}{@render toolbarStart()}{/if}
+			</div>
+			<div class="toolbar-end">
+				{#if toolbarEnd}{@render toolbarEnd()}{/if}
+				{@render endControls()}
+			</div>
+		</div>
+	{/if}
 	<span class="hint">{mode === 'enter' ? 'Enter to send · Shift+Enter for a new line' : 'Ctrl/⌘+Enter to send'}</span>
 </div>
 
@@ -191,6 +210,25 @@
 		outline: 2px dashed var(--accent);
 		outline-offset: var(--sp-1);
 	}
+	.toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--sp-2);
+		min-width: 0;
+	}
+	.toolbar-start,
+	.toolbar-end {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--sp-1);
+		min-width: 0;
+	}
+	.toolbar-end {
+		margin-inline-start: auto;
+		justify-content: flex-end;
+	}
 	.hint {
 		font-size: var(--fs-xs);
 		color: var(--text-faint);

package/dist/components/molecules/Composer.svelte.d.ts

@@ -21,6 +21,9 @@ type $$ComponentProps = {
     attachLabel?: string;
     leading?: Snippet;
     trailing?: Snippet;
+    /** Either one renders a row under the field: start slot left, end slot then send right. */
+    toolbarStart?: Snippet;
+    toolbarEnd?: Snippet;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/StatusBar.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	// Thin live-status row for a panel: a tone dot (spinner while busy), a label
+	// or custom children, and a trailing slot for elapsed time / counters.
+	import type { Snippet } from 'svelte';
+	import Dot from '../atoms/Dot.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
+
+	type Tone = 'idle' | 'busy' | 'ok' | 'warn' | 'error';
+
+	const TONE_COLOR: Record<Exclude<Tone, 'busy'>, string> = {
+		idle: 'var(--text-faint)',
+		ok: 'var(--ok)',
+		warn: 'var(--warn)',
+		error: 'var(--danger)'
+	};
+
+	let {
+		tone = 'idle',
+		label,
+		children,
+		trailing,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		tone?: Tone;
+		label?: string;
+		/** Replaces `label`. */
+		children?: Snippet;
+		trailing?: Snippet;
+		class?: string;
+		style?: string;
+	} = $props();
+</script>
+
+<div
+	data-tsu="StatusBar"
+	data-tone={tone}
+	class="status-bar {klass}"
+	class:idle={tone === 'idle'}
+	style={styleProp}
+	role="status"
+	aria-live="polite"
+	aria-busy={tone === 'busy' || undefined}
+>
+	{#if tone === 'busy'}
+		<Spinner size={10} label={undefined} class="status-glyph" />
+	{:else}
+		<Dot color={TONE_COLOR[tone]} class="status-glyph" aria-hidden="true" />
+	{/if}
+	<span class="status-label">
+		{#if children}{@render children()}{:else}{label}{/if}
+	</span>
+	{#if trailing}<span class="status-trailing">{@render trailing()}</span>{/if}
+</div>
+
+<style>
+	.status-bar {
+		flex: none;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		padding: var(--sp-1) var(--sp-3);
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
+	.status-bar.idle {
+		color: var(--text-faint);
+	}
+	.status-bar :global(.status-glyph) {
+		flex: none;
+		color: var(--accent);
+	}
+	.status-label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.status-trailing {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		color: var(--text-faint);
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+</style>

package/dist/components/molecules/StatusBar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Tone = 'idle' | 'busy' | 'ok' | 'warn' | 'error';
+type $$ComponentProps = {
+    tone?: Tone;
+    label?: string;
+    /** Replaces `label`. */
+    children?: Snippet;
+    trailing?: Snippet;
+    class?: string;
+    style?: string;
+};
+declare const StatusBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatusBar = ReturnType<typeof StatusBar>;
+export default StatusBar;

package/dist/components/organisms/ConversationFeed.svelte

@@ -0,0 +1,148 @@
+<script lang="ts" generics="T">
+	// Scrolling message feed: sticks to the bottom while the user is there,
+	// keeps the viewport still when older items are prepended, and offers a
+	// "jump to latest" pill once new items land while scrolled up.
+	import { type Snippet, tick, untrack } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import Button from '../atoms/Button.svelte';
+	import LoadMore from '../molecules/LoadMore.svelte';
+
+	let {
+		items,
+		key,
+		item,
+		empty,
+		loadMore,
+		onloadmore,
+		loadMoreLabel = 'Load older',
+		follow = true,
+		jumpLabel = 'Jump to latest',
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		items: T[];
+		key: (item: T) => string | number;
+		item: Snippet<[T, number]>;
+		empty?: Snippet;
+		/** State of the LoadMore pill at the top; omit to hide it. */
+		loadMore?: 'idle' | 'loading' | 'error' | 'done';
+		/** Prepend older items; the scroll position is preserved. */
+		onloadmore?: () => void;
+		loadMoreLabel?: string;
+		/** Stick to the bottom while the user is at the bottom. */
+		follow?: boolean;
+		jumpLabel?: string;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const THRESHOLD = 80;
+
+	let scroller = $state<HTMLElement | null>(null);
+	let stuck = $state(true);
+	let pending = $state(false);
+	let prevFirst: string | number | undefined;
+	let prevLast: string | number | undefined;
+	let prevLength = 0;
+
+	const atBottom = (el: HTMLElement) => el.scrollHeight - el.scrollTop - el.clientHeight <= THRESHOLD;
+
+	export function scrollToBottom(behavior: ScrollBehavior = 'auto') {
+		const el = scroller;
+		if (el) el.scrollTo({ top: el.scrollHeight, behavior });
+		stuck = true;
+		pending = false;
+	}
+
+	function onscroll() {
+		if (!scroller) return;
+		stuck = atBottom(scroller);
+		if (stuck) pending = false;
+	}
+
+	$effect.pre(() => {
+		const el = scroller;
+		const first = items.length ? key(items[0]) : undefined;
+		const last = items.length ? key(items[items.length - 1]) : undefined;
+		const length = items.length;
+		if (!el) return;
+		const prepended = prevFirst !== undefined && first !== prevFirst && length > prevLength;
+		const appended = last !== undefined && last !== prevLast;
+		prevFirst = first;
+		prevLast = last;
+		prevLength = length;
+		const fromBottom = el.scrollHeight - el.scrollTop;
+		tick().then(() => {
+			if (prepended) {
+				el.scrollTop = el.scrollHeight - fromBottom;
+			} else if (appended) {
+				if (untrack(() => follow && stuck)) scrollToBottom();
+				else pending = true;
+			}
+		});
+	});
+
+	const pin: Attachment = (node) => {
+		if (typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver(() => {
+			if (follow && stuck && scroller) scroller.scrollTop = scroller.scrollHeight;
+		});
+		ro.observe(node);
+		return () => ro.disconnect();
+	};
+</script>
+
+<div data-tsu="ConversationFeed" class="feed-wrap {klass}" style={styleProp}>
+	<div class="feed" bind:this={scroller} {onscroll}>
+		{#if loadMore}
+			<LoadMore pill state={loadMore} onload={onloadmore} label={loadMoreLabel} />
+		{/if}
+		{#if items.length === 0 && empty}
+			{@render empty()}
+		{/if}
+		<div class="feed-items" {@attach pin}>
+			{#each items as entry, i (key(entry))}
+				{@render item(entry, i)}
+			{/each}
+		</div>
+	</div>
+	{#if pending}
+		<div class="jump">
+			<Button pill size="sm" onclick={() => scrollToBottom('smooth')}>{jumpLabel} ↓</Button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.feed-wrap {
+		position: relative;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+	.feed {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+		overscroll-behavior: contain;
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-3);
+		padding: var(--sp-3);
+	}
+	.feed-items {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-3);
+	}
+	.jump {
+		position: absolute;
+		inset-inline-start: 50%;
+		bottom: var(--sp-3);
+		transform: translateX(-50%);
+		z-index: 1;
+		border-radius: var(--r-pill);
+		box-shadow: var(--shadow-md);
+	}
+</style>

package/dist/components/organisms/ConversationFeed.svelte.d.ts

@@ -0,0 +1,44 @@
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        key: (item: T) => string | number;
+        item: Snippet<[T, number]>;
+        empty?: Snippet;
+        /** State of the LoadMore pill at the top; omit to hide it. */
+        loadMore?: "idle" | "loading" | "error" | "done";
+        /** Prepend older items; the scroll position is preserved. */
+        onloadmore?: () => void;
+        loadMoreLabel?: string;
+        /** Stick to the bottom while the user is at the bottom. */
+        follow?: boolean;
+        jumpLabel?: string;
+        class?: string;
+        style?: string;
+    };
+    exports: {
+        scrollToBottom: (behavior?: ScrollBehavior) => void;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {
+        scrollToBottom: (behavior?: ScrollBehavior) => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ConversationFeed: $$IsomorphicComponent;
+type ConversationFeed<T> = InstanceType<typeof ConversationFeed<T>>;
+export default ConversationFeed;

package/dist/components/organisms/ConversationPanel.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	// Column layout for a chat panel: header, the feed (flexes), status row,
+	// composer. Layout only.
+	import type { Snippet } from 'svelte';
+
+	let {
+		header,
+		children,
+		status,
+		composer,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		header?: Snippet;
+		/** The feed; fills the space between header and status. */
+		children: Snippet;
+		status?: Snippet;
+		composer?: Snippet;
+		class?: string;
+		style?: string;
+	} = $props();
+</script>
+
+<section data-tsu="ConversationPanel" class="panel {klass}" style={styleProp}>
+	{#if header}<header class="panel-header">{@render header()}</header>{/if}
+	<div class="panel-body">{@render children()}</div>
+	{#if status}<div class="panel-status">{@render status()}</div>{/if}
+	{#if composer}<div class="panel-composer">{@render composer()}</div>{/if}
+</section>
+
+<style>
+	.panel {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		height: 100%;
+		background: var(--surface);
+	}
+	.panel-header {
+		flex: none;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		padding: var(--sp-2) var(--sp-3);
+		border-bottom: 1px solid var(--border);
+	}
+	.panel-body {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+	.panel-status {
+		flex: none;
+		border-top: 1px solid var(--border);
+	}
+	.panel-composer {
+		flex: none;
+		padding: var(--sp-2) var(--sp-3) var(--sp-3);
+		border-top: 1px solid var(--border);
+	}
+	.panel-status + .panel-composer {
+		border-top: 0;
+	}
+</style>

package/dist/components/organisms/ConversationPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    header?: Snippet;
+    /** The feed; fills the space between header and status. */
+    children: Snippet;
+    status?: Snippet;
+    composer?: Snippet;
+    class?: string;
+    style?: string;
+};
+declare const ConversationPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConversationPanel = ReturnType<typeof ConversationPanel>;
+export default ConversationPanel;

package/dist/index.d.ts

@@ -84,6 +84,7 @@ export { default as SectionHeader } from './components/molecules/SectionHeader.s
 export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
+export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';
@@ -92,11 +93,14 @@ export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
+export { default as ConversationFeed } from './components/organisms/ConversationFeed.svelte';
+export { default as ConversationPanel } from './components/organisms/ConversationPanel.svelte';
 export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './emoji';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
+export { escapeHtml, type Highlight, type RenderMarkdownOptions, renderMarkdown, stripAnsi, } from './markdown';
 export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, singleQuery, suggest, suggestSingle, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { type OptionSection, sectionOptions } from './select-options';

package/dist/index.js

@@ -92,6 +92,7 @@ export { default as SectionHeader } from './components/molecules/SectionHeader.s
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
+export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';
@@ -101,11 +102,14 @@ export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 // ---- organisms ----
+export { default as ConversationFeed } from './components/organisms/ConversationFeed.svelte';
+export { default as ConversationPanel } from './components/organisms/ConversationPanel.svelte';
 export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
+export { escapeHtml, renderMarkdown, stripAnsi, } from './markdown';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, singleQuery, suggest, suggestSingle, toSql, walk, } from './query';

package/dist/markdown.d.ts

@@ -0,0 +1,12 @@
+export type Highlight = (code: string, lang: string) => string;
+export type RenderMarkdownOptions = {
+    /** Render GFM pipe tables as `<table>`; default true. */
+    tables?: boolean;
+    /** Must return HTML-safe markup for the (unescaped) code body. */
+    highlight?: Highlight;
+    /** Turn bare http(s) URLs into links; default true. */
+    autolink?: boolean;
+};
+export declare function escapeHtml(s: string): string;
+export declare function stripAnsi(s: string): string;
+export declare function renderMarkdown(src: string, opts?: RenderMarkdownOptions): string;

package/dist/markdown.js

@@ -0,0 +1,222 @@
+// Markdown → HTML for chat text, meant for `Prose`. Everything is escaped
+// first, then a fixed tag set is re-introduced, so no raw HTML survives.
+// Highlighting is an optional hook returning safe HTML; no runtime deps.
+export function escapeHtml(s) {
+    return s
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+// Placeholder sentinels: control chars that never survive the C0 strip below.
+const BLOCK_L = '\x0E';
+const BLOCK_R = '\x0F';
+const BLOCK_RE = new RegExp(`${BLOCK_L}(\\d+)${BLOCK_R}`, 'g');
+const SPAN_L = '\x10';
+const SPAN_R = '\x11';
+const SPAN_RE = new RegExp(`${SPAN_L}(\\d+)${SPAN_R}`, 'g');
+// Terminal escape sequences (the ansi-regex pattern), then the remaining C0
+// controls except tab and newline, plus DEL.
+const ANSI_RE = 
+// biome-ignore lint/suspicious/noControlCharactersInRegex: sanitising control bytes is the point
+/[\x1B\x9B][[\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\d/#&.:=?%@~_]+)*|[a-zA-Z\d]+(?:;[-a-zA-Z\d/#&.:=?%@~_]*)*)?\x07)|(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-ntqry=><~]))/g;
+// biome-ignore lint/suspicious/noControlCharactersInRegex: sanitising control bytes is the point
+const C0_RE = /[\x00-\x08\x0B-\x1F\x7F]/g;
+export function stripAnsi(s) {
+    return s.replace(ANSI_RE, '').replace(C0_RE, '');
+}
+const SAFE_HREF = /^(?:https?:|mailto:)/i;
+function safeHref(url) {
+    const trimmed = url.trim();
+    if (SAFE_HREF.test(trimmed))
+        return trimmed;
+    if (/^(?:\/(?!\/)|#)/.test(trimmed))
+        return trimmed;
+    return null;
+}
+function stash(blocks, html) {
+    return `${BLOCK_L}${blocks.push(html) - 1}${BLOCK_R}`;
+}
+function restore(s, blocks) {
+    return s.replace(BLOCK_RE, (_m, i) => blocks[Number(i)]);
+}
+function autolinkUrls(s) {
+    const saved = [];
+    s = s.replace(/<a\b[^>]*>[\s\S]*?<\/a>|<code\b[^>]*>[\s\S]*?<\/code>/g, (m) => `${SPAN_L}${saved.push(m) - 1}${SPAN_R}`);
+    s = s.replace(/\bhttps?:\/\/(?:&amp;|[^\s&<>"])+/g, (raw) => {
+        let url = raw;
+        let trail = '';
+        const punct = url.match(/[.,;:!?]+$/);
+        if (punct) {
+            trail = punct[0];
+            url = url.slice(0, -trail.length);
+        }
+        const close = url.slice(-1);
+        if ((close === ')' || close === ']') && !url.includes(close === ')' ? '(' : '[')) {
+            trail = close + trail;
+            url = url.slice(0, -1);
+        }
+        if (!url)
+            return raw;
+        return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>${trail}`;
+    });
+    return s.replace(SPAN_RE, (_m, i) => saved[Number(i)]);
+}
+// Inline passes on already-escaped text.
+function inline(s, autolink) {
+    s = s.replace(/`([^`]+)`/g, '<code>$1</code>');
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/(^|[^*\w])\*([^*\n]+)\*/g, '$1<em>$2</em>');
+    s = s.replace(/(^|[^\w])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
+    s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    s = s.replace(/\[([^\]]+)\]\(([^\s)]+)\)/g, (m, text, url) => {
+        const href = safeHref(url);
+        if (!href)
+            return m;
+        const external = /^https?:/i.test(href) ? ' target="_blank" rel="noopener noreferrer"' : '';
+        return `<a href="${href}"${external}>${text}</a>`;
+    });
+    return autolink ? autolinkUrls(s) : s;
+}
+function splitRow(row) {
+    const cells = [];
+    let cur = '';
+    const t = row.trim().replace(/^\|/, '').replace(/\|$/, '');
+    for (let i = 0; i < t.length; i++) {
+        if (t[i] === '\\' && t[i + 1] === '|') {
+            cur += '|';
+            i++;
+        }
+        else if (t[i] === '|') {
+            cells.push(cur);
+            cur = '';
+        }
+        else
+            cur += t[i];
+    }
+    cells.push(cur);
+    return cells;
+}
+const TABLE_RE = /(?:^|\n)([ \t]*\|.+\|[ \t]*)\n([ \t]*\|(?:[ \t]*:?-+:?[ \t]*\|)+[ \t]*)\n((?:[ \t]*\|.*\|[ \t]*(?:\n|$))+)/g;
+function table(header, delim, body, autolink) {
+    const aligns = splitRow(delim).map((c) => {
+        const l = c.trim().startsWith(':');
+        const r = c.trim().endsWith(':');
+        return r && l ? 'center' : r ? 'right' : l ? 'left' : '';
+    });
+    const cell = (txt, i, tag) => {
+        const a = aligns[i] ? ` style="text-align:${aligns[i]}"` : '';
+        return `<${tag}${a}>${inline(txt.trim(), autolink)}</${tag}>`;
+    };
+    const head = `<tr>${splitRow(header)
+        .map((c, i) => cell(c, i, 'th'))
+        .join('')}</tr>`;
+    const rows = body
+        .split('\n')
+        .filter((r) => r.trim())
+        .map((r) => `<tr>${splitRow(r)
+        .map((c, i) => cell(c, i, 'td'))
+        .join('')}</tr>`)
+        .join('');
+    return `<table><thead>${head}</thead><tbody>${rows}</tbody></table>`;
+}
+// Block pass over the escaped, inline-rendered lines. Produces paragraphs,
+// headings, lists, blockquotes and rules; stashed blocks stay opaque.
+function blocks(lines) {
+    const out = [];
+    let para = [];
+    let list = null;
+    let quote = [];
+    const flushPara = () => {
+        if (para.length)
+            out.push(`<p>${para.join('<br />')}</p>`);
+        para = [];
+    };
+    const flushList = () => {
+        if (list)
+            out.push(`<${list.kind}>${list.items.map((i) => `<li>${i}</li>`).join('')}</${list.kind}>`);
+        list = null;
+    };
+    const flushQuote = () => {
+        if (quote.length)
+            out.push(`<blockquote>${blocks(quote)}</blockquote>`);
+        quote = [];
+    };
+    const flushAll = () => {
+        flushPara();
+        flushList();
+        flushQuote();
+    };
+    for (const line of lines) {
+        const heading = line.match(/^(#{1,6})\s+(.+?)\s*#*$/);
+        const item = line.match(/^\s{0,3}(?:([-*+])|(\d{1,9})[.)])\s+(.*)$/);
+        const quoted = line.match(/^\s{0,3}&gt;\s?(.*)$/);
+        const opaque = line.match(new RegExp(`^\\s*${BLOCK_L}\\d+${BLOCK_R}\\s*$`));
+        if (quoted) {
+            flushPara();
+            flushList();
+            quote.push(quoted[1]);
+            continue;
+        }
+        flushQuote();
+        if (!line.trim()) {
+            flushPara();
+            flushList();
+            continue;
+        }
+        if (opaque) {
+            flushAll();
+            out.push(line.trim());
+            continue;
+        }
+        if (/^\s{0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+            flushAll();
+            out.push('<hr />');
+            continue;
+        }
+        if (heading) {
+            flushAll();
+            const level = heading[1].length;
+            out.push(`<h${level}>${heading[2]}</h${level}>`);
+            continue;
+        }
+        if (item) {
+            flushPara();
+            const kind = item[2] ? 'ol' : 'ul';
+            if (list && list.kind !== kind)
+                flushList();
+            if (!list)
+                list = { kind, items: [] };
+            list.items.push(item[3]);
+            continue;
+        }
+        if (list && /^\s{2,}\S/.test(line)) {
+            list.items[list.items.length - 1] += `<br />${line.trim()}`;
+            continue;
+        }
+        flushList();
+        para.push(line);
+    }
+    flushAll();
+    return out.join('');
+}
+export function renderMarkdown(src, opts = {}) {
+    const tables = opts.tables !== false;
+    const autolink = opts.autolink !== false;
+    const saved = [];
+    let s = stripAnsi(src.replace(/\r\n?/g, '\n'));
+    s = s.replace(/```([^\n`]*)\n?([\s\S]*?)```/g, (_m, info, code) => {
+        const lang = (info || '').trim().split(/\s+/)[0] ?? '';
+        const raw = code.replace(/\n$/, '');
+        const body = opts.highlight && lang ? opts.highlight(raw, lang) : escapeHtml(raw);
+        const attr = lang ? ` data-lang="${escapeHtml(lang)}"` : '';
+        return stash(saved, `<pre${attr}><code>${body}</code></pre>`);
+    });
+    s = escapeHtml(s);
+    if (tables) {
+        s = s.replace(TABLE_RE, (_m, header, delim, body) => `\n${stash(saved, table(header, delim, body, autolink))}\n`);
+    }
+    s = inline(s, autolink);
+    s = blocks(s.split('\n'));
+    return restore(s, saved);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.61.1",
+  "version": "0.62.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",