@dorsk/tsumikit 0.38.0 → 0.39.0

package/dist/components/molecules/ChatBubble.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	// One conversation line: role-tinted bubble with a meta row, optional
+	// actions, delivery state, clamp-and-expand body and a copy affordance.
+	import type { Snippet } from 'svelte';
+	import Badge from '../atoms/Badge.svelte';
+	import Button from '../atoms/Button.svelte';
+	import CopyButton from './CopyButton.svelte';
+
+	let {
+		role = 'assistant',
+		roleLabel,
+		align,
+		meta,
+		actions,
+		state: delivery,
+		onretry,
+		retryLabel = 'Retry',
+		clamp,
+		expandLabel = 'Show more',
+		collapseLabel = 'Show less',
+		selected = false,
+		copyText,
+		children,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		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';
+		meta?: Snippet;
+		actions?: Snippet;
+		state?: 'sending' | 'failed';
+		onretry?: () => void;
+		retryLabel?: string;
+		/** Max visible lines before an expand toggle appears. */
+		clamp?: number;
+		expandLabel?: string;
+		collapseLabel?: string;
+		selected?: boolean;
+		/** Renders a CopyButton in the actions row. */
+		copyText?: string;
+		children: Snippet;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const side = $derived(align ?? (role === 'user' ? 'end' : 'start'));
+	let expanded = $state(false);
+</script>
+
+<article
+	data-tsu="ChatBubble"
+	data-role={role}
+	data-state={delivery}
+	data-selected={selected || undefined}
+	class="bubble role-{role} align-{side} {klass}"
+	class:selected
+	class:clamped={!!clamp && !expanded}
+	style="--clamp: {clamp ?? 'none'}; {styleProp}"
+>
+	<header class="meta">
+		<Badge size="xs" class="role-pill">{roleLabel ?? role}</Badge>
+		{#if meta}{@render meta()}{/if}
+		{#if delivery === 'sending'}<span class="state">sending…</span>{/if}
+		{#if delivery === 'failed'}
+			<span class="state failed">not delivered</span>
+			{#if onretry}<Button size="sm" variant="link" onclick={onretry}>{retryLabel}</Button>{/if}
+		{/if}
+		{#if actions || copyText}
+			<span class="actions">
+				{#if actions}{@render actions()}{/if}
+				{#if copyText}<CopyButton text={copyText} showLabel={false} box="xs" />{/if}
+			</span>
+		{/if}
+	</header>
+	<div class="body">{@render children()}</div>
+	{#if clamp}
+		<Button size="sm" variant="link" onclick={() => (expanded = !expanded)}>
+			{expanded ? collapseLabel : expandLabel}
+		</Button>
+	{/if}
+</article>
+
+<style>
+	.bubble {
+		--role: var(--role-assistant);
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-1);
+		max-width: min(100%, 72ch);
+		padding: var(--sp-2) var(--sp-3);
+		border: 1px solid color-mix(in srgb, var(--role) 30%, var(--border));
+		border-inline-start: 3px solid var(--role);
+		border-radius: var(--r-lg);
+		background: color-mix(in srgb, var(--role) 6%, var(--surface));
+		font-size: var(--fs-sm);
+	}
+	.role-user {
+		--role: var(--role-user);
+	}
+	.role-system {
+		--role: var(--role-system);
+	}
+	.role-tool {
+		--role: var(--role-tool);
+	}
+	.role-mcp {
+		--role: var(--role-mcp);
+	}
+	.align-end {
+		align-self: flex-end;
+	}
+	.align-start {
+		align-self: flex-start;
+	}
+	.selected {
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
+	.bubble[data-state='sending'] {
+		opacity: 0.7;
+	}
+	.meta {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--sp-2);
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
+	.meta :global(.role-pill) {
+		color: var(--role);
+		border-color: color-mix(in srgb, var(--role) 40%, transparent);
+		text-transform: capitalize;
+	}
+	.state.failed {
+		color: var(--danger);
+	}
+	.actions {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		margin-inline-start: auto;
+	}
+	.body {
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.clamped .body {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: var(--clamp);
+		line-clamp: var(--clamp);
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+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';
+    meta?: Snippet;
+    actions?: Snippet;
+    state?: 'sending' | 'failed';
+    onretry?: () => void;
+    retryLabel?: string;
+    /** Max visible lines before an expand toggle appears. */
+    clamp?: number;
+    expandLabel?: string;
+    collapseLabel?: string;
+    selected?: boolean;
+    /** Renders a CopyButton in the actions row. */
+    copyText?: string;
+    children: Snippet;
+    class?: string;
+    style?: string;
+};
+declare const ChatBubble: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;

package/dist/components/molecules/CodeBlock.svelte

@@ -20,6 +20,11 @@
 		showLineNumbers = false,
 		wrap = false,
 		copy = true,
+		maxHeight,
+		collapsible = false,
+		expandLabel = 'Show more',
+		collapseLabel = 'Show less',
+		breakAll = false,
 		class: klass = ''
 	}: {
 		code: string;
@@ -33,12 +38,23 @@
 		showLineNumbers?: boolean;
 		wrap?: boolean;
 		copy?: boolean;
+		/** Cap the body height; scrolls past it (or expands when `collapsible`). */
+		maxHeight?: string;
+		/** With `maxHeight`, a toggle in the header expands the body instead of scrolling. */
+		collapsible?: boolean;
+		expandLabel?: string;
+		collapseLabel?: string;
+		/** Break long unbroken strings (secrets, hashes) anywhere. */
+		breakAll?: boolean;
 		class?: string;
 	} = $props();
 
+	let expanded = $state(false);
+
 	const rendered = $derived(html ?? (highlight ? highlight(code, lang) : null));
 	const lines = $derived(showLineNumbers ? code.replace(/\n$/, '').split('\n').length : 0);
-	const hasHeader = $derived(!!(filename || lang || copy));
+	const hasHeader = $derived(!!(filename || lang || copy || (collapsible && maxHeight)));
+	const capped = $derived(!!maxHeight && !(collapsible && expanded));
 </script>
 
 <figure class="codeblock {klass}" data-tsu="CodeBlock">
@@ -46,10 +62,15 @@
 		<figcaption class="cb-head">
 			<span class="cb-name">{filename ?? lang ?? ''}</span>
 			<div class="spacer"></div>
+			{#if collapsible && maxHeight}
+				<button type="button" class="cb-toggle" aria-expanded={expanded} onclick={() => (expanded = !expanded)}>
+					{expanded ? collapseLabel : expandLabel}
+				</button>
+			{/if}
 			{#if copy}<CopyButton text={code} showLabel={false} />{/if}
 		</figcaption>
 	{/if}
-	<div class="cb-body" class:wrap class:numbered={showLineNumbers}>
+	<div class="cb-body" class:wrap class:numbered={showLineNumbers} class:break-all={breakAll} style:max-height={capped ? maxHeight : undefined}>
 		{#if showLineNumbers}
 			<span class="cb-gutter" aria-hidden="true">
 				{#each { length: lines } as _, i (i)}<span>{i + 1}</span>{/each}
@@ -82,7 +103,7 @@
 	}
 	.cb-body {
 		display: flex;
-		overflow-x: auto;
+		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 	}
 	.cb-gutter {
@@ -113,6 +134,18 @@
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
+	.cb-body.break-all .cb-pre {
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+	.cb-toggle {
+		border: 0;
+		background: none;
+		padding: 0 var(--sp-1);
+		font: inherit;
+		color: var(--accent);
+		cursor: pointer;
+	}
 	.cb-body.numbered .cb-pre {
 		white-space: pre; /* keep lines aligned with the gutter */
 	}

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

@@ -10,6 +10,14 @@ type $$ComponentProps = {
     showLineNumbers?: boolean;
     wrap?: boolean;
     copy?: boolean;
+    /** Cap the body height; scrolls past it (or expands when `collapsible`). */
+    maxHeight?: string;
+    /** With `maxHeight`, a toggle in the header expands the body instead of scrolling. */
+    collapsible?: boolean;
+    expandLabel?: string;
+    collapseLabel?: string;
+    /** Break long unbroken strings (secrets, hashes) anywhere. */
+    breakAll?: boolean;
     class?: string;
 };
 declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/Composer.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	// Chat composer: autoresizing Textarea with attach + send controls, submit
+	// shortcuts, prompt history on ↑/↓ at the text edges, paste-to-attach and
+	// drag-over state. Attachments render as removable chips above the field.
+	import type { Snippet } from 'svelte';
+	import Button from '../atoms/Button.svelte';
+	import Textarea from '../atoms/Textarea.svelte';
+	import AttachmentList from './AttachmentList.svelte';
+	import FileButton from './FileButton.svelte';
+
+	let {
+		value = $bindable(''),
+		onsubmit,
+		submitOn = 'auto',
+		placeholder = 'Message…',
+		history = [],
+		attachments = $bindable([]),
+		onfiles,
+		onremove,
+		accept,
+		busy = false,
+		disabled = false,
+		maxHeight = '40vh',
+		rows = 1,
+		sendLabel = 'Send',
+		attachLabel = 'Attach',
+		leading,
+		trailing,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		value?: string;
+		onsubmit: (value: string, files: File[]) => void;
+		/** `auto`: Enter on fine pointers, mod+Enter on coarse ones. */
+		submitOn?: 'enter' | 'mod-enter' | 'auto';
+		placeholder?: string;
+		/** Previous prompts, newest last; ↑/↓ browse them at the text edges. */
+		history?: string[];
+		attachments?: File[];
+		onfiles?: (files: File[]) => void;
+		onremove?: (index: number) => void;
+		accept?: string;
+		busy?: boolean;
+		disabled?: boolean;
+		maxHeight?: string;
+		rows?: number;
+		sendLabel?: string;
+		attachLabel?: string;
+		leading?: Snippet;
+		trailing?: Snippet;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	let el = $state<HTMLTextAreaElement | null>(null);
+	let dragging = $state(false);
+	let cursor = $state(-1);
+	let draft = '';
+
+	const fine = () => typeof matchMedia === 'function' && matchMedia('(pointer: fine)').matches;
+	const mode = $derived(submitOn === 'auto' ? (fine() ? 'enter' : 'mod-enter') : submitOn);
+	const canSend = $derived(!busy && !disabled && (value.trim().length > 0 || attachments.length > 0));
+
+	function submit() {
+		if (!canSend) return;
+		onsubmit(value, attachments);
+		cursor = -1;
+	}
+
+	function addFiles(files: File[]) {
+		if (!files.length) return;
+		attachments = [...attachments, ...files];
+		onfiles?.(files);
+	}
+	function removeAt(i: number) {
+		attachments = attachments.filter((_, j) => j !== i);
+		onremove?.(i);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.isComposing) {
+			const mod = e.ctrlKey || e.metaKey;
+			const submits = mode === 'enter' ? !e.shiftKey && !mod && !e.altKey : mod && !e.shiftKey;
+			if (submits) {
+				e.preventDefault();
+				submit();
+			}
+			return;
+		}
+		if (!history.length || !el) return;
+		const atStart = el.selectionStart === 0 && el.selectionEnd === 0;
+		const atEnd = el.selectionStart === value.length && el.selectionEnd === value.length;
+		if (e.key === 'ArrowUp' && atStart) {
+			if (cursor === -1) draft = value;
+			const next = cursor === -1 ? history.length - 1 : Math.max(0, cursor - 1);
+			cursor = next;
+			value = history[next];
+			e.preventDefault();
+		} else if (e.key === 'ArrowDown' && atEnd && cursor !== -1) {
+			const next = cursor + 1;
+			if (next >= history.length) {
+				cursor = -1;
+				value = draft;
+			} else {
+				cursor = next;
+				value = history[next];
+			}
+			e.preventDefault();
+		}
+	}
+
+	function onpaste(e: ClipboardEvent) {
+		const files = Array.from(e.clipboardData?.files ?? []);
+		if (files.length) {
+			e.preventDefault();
+			addFiles(files);
+		}
+	}
+	function ondrop(e: DragEvent) {
+		e.preventDefault();
+		dragging = false;
+		addFiles(Array.from(e.dataTransfer?.files ?? []));
+	}
+</script>
+
+<div
+	data-tsu="Composer"
+	class="composer {klass}"
+	class:dragging
+	class:busy
+	style={styleProp}
+	role="group"
+	ondragover={(e) => {
+		e.preventDefault();
+		dragging = true;
+	}}
+	ondragleave={() => (dragging = false)}
+	{ondrop}
+>
+	<AttachmentList files={attachments} onremove={removeAt} />
+	<div class="row">
+		{#if leading}{@render leading()}{/if}
+		{#if onfiles || accept !== undefined}
+			<FileButton onfiles={addFiles} {accept} multiple iconOnly label={attachLabel} variant="ghost" box="md" {disabled} />
+		{/if}
+		<Textarea
+			bind:value
+			bind:el
+			autoresize
+			{rows}
+			{maxHeight}
+			{placeholder}
+			resize="none"
+			grow
+			aria-label={placeholder}
+			disabled={disabled || busy}
+			{onkeydown}
+			{onpaste}
+		/>
+		{#if trailing}{@render trailing()}{/if}
+		<Button variant="primary" square loading={busy} disabled={!canSend} aria-label={sendLabel} title={sendLabel} onclick={submit}>
+			<span aria-hidden="true">➤</span>
+		</Button>
+	</div>
+	<span class="hint">{mode === 'enter' ? 'Enter to send · Shift+Enter for a new line' : 'Ctrl/⌘+Enter to send'}</span>
+</div>
+
+<style>
+	.composer {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		padding: var(--sp-2);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-lg);
+		background: var(--surface);
+		transition: border-color 0.12s var(--ease);
+	}
+	.composer:focus-within {
+		border-color: var(--accent);
+	}
+	.composer.dragging {
+		border-style: dashed;
+		border-color: var(--accent);
+	}
+	.row {
+		display: flex;
+		align-items: flex-end;
+		gap: var(--sp-2);
+	}
+	.hint {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value?: string;
+    onsubmit: (value: string, files: File[]) => void;
+    /** `auto`: Enter on fine pointers, mod+Enter on coarse ones. */
+    submitOn?: 'enter' | 'mod-enter' | 'auto';
+    placeholder?: string;
+    /** Previous prompts, newest last; ↑/↓ browse them at the text edges. */
+    history?: string[];
+    attachments?: File[];
+    onfiles?: (files: File[]) => void;
+    onremove?: (index: number) => void;
+    accept?: string;
+    busy?: boolean;
+    disabled?: boolean;
+    maxHeight?: string;
+    rows?: number;
+    sendLabel?: string;
+    attachLabel?: string;
+    leading?: Snippet;
+    trailing?: Snippet;
+    class?: string;
+    style?: string;
+};
+declare const Composer: import("svelte").Component<$$ComponentProps, {}, "value" | "attachments">;
+type Composer = ReturnType<typeof Composer>;
+export default Composer;

package/dist/components/molecules/ConfirmModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { canonicalTone, type Tone } from '../../tone';
 	// Yes/no dialog on top of Modal. An async `onconfirm` keeps the dialog open
 	// and busy until it settles; a rejection surfaces its message and leaves the
 	// dialog open so the user can retry or cancel.
@@ -17,7 +18,9 @@
 		tone = 'primary',
 		busy = false,
 		onconfirm,
-		oncancel
+		oncancel,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		open?: boolean;
 		title: string;
@@ -25,11 +28,16 @@
 		children?: Snippet;
 		confirmLabel?: string;
 		cancelLabel?: string;
-		tone?: 'primary' | 'danger' | 'warn';
+		/** `primary` is a legacy alias of `accent`. */
+		tone?: Tone | 'primary';
 		busy?: boolean;
 		onconfirm: () => void | Promise<void>;
 		oncancel?: () => void;
+		class?: string;
+		style?: string;
 	} = $props();
+	const t = $derived(canonicalTone(tone));
+	const modalTone = $derived(t === 'danger' || t === 'warn' || t === 'info' ? t : 'neutral');
 
 	let pending = $state(false);
 	let error = $state<string | null>(null);
@@ -66,10 +74,12 @@
 <Modal
 	bind:open
 	{title}
-	tone={tone === 'primary' ? 'neutral' : tone}
+	tone={modalTone}
 	busy={working}
 	onclose={oncancel}
 	size="sm"
+	class={klass}
+	style={styleProp}
 >
 	{#snippet body()}
 		<div class="confirm-body" data-tsu="ConfirmModal">
@@ -83,8 +93,8 @@
 	{#snippet footer()}
 		<Button onclick={cancel} disabled={working}>{cancelLabel}</Button>
 		<Button
-			variant={tone === 'danger' ? 'danger' : 'primary'}
-			tone={tone === 'warn' ? 'warn' : 'none'}
+			variant={t === 'danger' ? 'danger' : 'primary'}
+			tone={t === 'warn' || t === 'ok' || t === 'info' ? t : 'none'}
 			loading={working}
 			onclick={confirm}
 		>

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

@@ -1,3 +1,4 @@
+import { type Tone } from '../../tone';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     open?: boolean;
@@ -6,10 +7,13 @@ type $$ComponentProps = {
     children?: Snippet;
     confirmLabel?: string;
     cancelLabel?: string;
-    tone?: 'primary' | 'danger' | 'warn';
+    /** `primary` is a legacy alias of `accent`. */
+    tone?: Tone | 'primary';
     busy?: boolean;
     onconfirm: () => void | Promise<void>;
     oncancel?: () => void;
+    class?: string;
+    style?: string;
 };
 declare const ConfirmModal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type ConfirmModal = ReturnType<typeof ConfirmModal>;

package/dist/components/molecules/Dropzone.svelte

@@ -25,7 +25,9 @@
 		overlay = false,
 		label = 'Drop files here',
 		hint = 'or click to browse',
-		children
+		children,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		onfiles: (files: File[]) => void;
 		/** Fired when the drag-over (active) state changes — host can dim/highlight. */
@@ -38,6 +40,8 @@
 		label?: string;
 		hint?: string;
 		children?: Snippet;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	let over = $state(false);
@@ -103,7 +107,8 @@
 
 {#if overlay}
 	<div
-		class="dz-host"
+		class="dz-host {klass}"
+		style={styleProp}
 		data-tsu="Dropzone"
 		class:over
 		class:disabled
@@ -123,7 +128,8 @@
 	</div>
 {:else}
 	<div
-		class="dz"
+		class="dz {klass}"
+		style={styleProp}
 		data-tsu="Dropzone"
 		class:over
 		class:disabled

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

@@ -11,6 +11,8 @@ type $$ComponentProps = {
     label?: string;
     hint?: string;
     children?: Snippet;
+    class?: string;
+    style?: string;
 };
 declare const Dropzone: import("svelte").Component<$$ComponentProps, {}, "">;
 type Dropzone = ReturnType<typeof Dropzone>;

package/dist/components/molecules/EmptyState.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { canonicalTone, type Tone } from '../../tone';
 	// Empty / placeholder state — the "nothing here yet" panel every unworked
 	// settings section, empty list, and zero-result table reaches for. Centered
 	// stack of:
@@ -25,9 +26,8 @@
 		// richer (multiple buttons, links) use the `action` snippet instead.
 		actionLabel,
 		onAction,
-		// Legacy alias for size="compact".
 		compact = false,
-		size = 'default',
+		size,
 		loading = false,
 		class: klass = '',
 		// Raw SVG markup for a custom glyph — passed straight to `Icon`.
@@ -39,9 +39,10 @@
 		title?: string;
 		description?: string | Snippet;
 		icon?: IconName;
-		tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+		tone?: Tone;
 		actionLabel?: string;
 		onAction?: () => void;
+		/** @deprecated use `size="compact"`; `size` wins when both are set. */
 		compact?: boolean;
 		size?: 'inline' | 'compact' | 'default';
 		loading?: boolean;
@@ -51,11 +52,11 @@
 		[key: string]: unknown;
 	} = $props();
 
-	const sz = $derived(compact ? 'compact' : size);
+	const sz = $derived(size ?? (compact ? 'compact' : 'default'));
 </script>
 
 <div
-	class="empty empty-{tone} {klass}"
+	class="empty empty-{canonicalTone(tone)} {klass}"
 	class:empty-compact={sz === 'compact'}
 	class:empty-inline={sz === 'inline'}
 	class:empty-loading={loading}
@@ -115,6 +116,9 @@
 	:global(.empty-info) {
 		--empty-tone: var(--info);
 	}
+	:global(.empty-accent) {
+		--empty-tone: var(--accent);
+	}
 	.empty-compact {
 		gap: var(--sp-2);
 		padding: var(--sp-4) var(--sp-3);