@dorsk/tsumikit 0.1.0

package/dist/components/molecules/RadioGroup.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" module>
+	export interface RadioOption {
+		value: string;
+		label: string;
+		hint?: string;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	// Radio group built on native <input type="radio"> sharing one `name`, so the
+	// browser handles single-selection, arrow-key navigation and form
+	// participation. Wrapped in a labelled `radiogroup` with token-styled dots.
+	// `value` is bindable.
+	let {
+		options,
+		value = $bindable(),
+		name = `radio-${Math.random().toString(36).slice(2, 8)}`,
+		label,
+		class: klass = ''
+	}: {
+		options: RadioOption[];
+		value?: string;
+		name?: string;
+		label: string;
+		class?: string;
+	} = $props();
+</script>
+
+<div role="radiogroup" aria-label={label} class="radio-group {klass}">
+	{#each options as o (o.value)}
+		<label class="radio" class:disabled={o.disabled}>
+			<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />
+			<span class="dot-ctl" aria-hidden="true"></span>
+			<span class="texts">
+				<span class="label-text">{o.label}</span>
+				{#if o.hint}<span class="hint">{o.hint}</span>{/if}
+			</span>
+		</label>
+	{/each}
+</div>
+
+<style>
+	.radio-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+	}
+	.radio {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sp-2);
+		cursor: pointer;
+		font-size: var(--fs-sm);
+		color: var(--text);
+	}
+	.radio.disabled {
+		cursor: not-allowed;
+		opacity: 0.45;
+	}
+	input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+		margin: 0;
+	}
+	.dot-ctl {
+		position: relative;
+		flex: none;
+		width: 1.15rem;
+		height: 1.15rem;
+		margin-top: 0.1rem;
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-pill);
+		background: var(--bg);
+		transition: border-color 0.12s var(--ease);
+	}
+	.dot-ctl::after {
+		content: '';
+		position: absolute;
+		inset: 50%;
+		width: 0.55rem;
+		height: 0.55rem;
+		margin: -0.275rem 0 0 -0.275rem;
+		border-radius: var(--r-pill);
+		background: var(--accent);
+		transform: scale(0);
+		transition: transform 0.1s var(--ease);
+	}
+	input:checked + .dot-ctl {
+		border-color: var(--accent);
+	}
+	input:checked + .dot-ctl::after {
+		transform: scale(1);
+	}
+	input:focus-visible + .dot-ctl {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.texts {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+	.hint {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+</style>

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

@@ -0,0 +1,16 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+}
+type $$ComponentProps = {
+    options: RadioOption[];
+    value?: string;
+    name?: string;
+    label: string;
+    class?: string;
+};
+declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/molecules/SelectButton.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	// An icon/glyph button with a native <select> overlaid transparently on top:
+	// it gets the platform dropdown UI while keeping the compact icon-button
+	// affordance. Used by the header font-size + theme pickers and the drawer
+	// font-size picker (CCT-250 #5 / CCT-297 #11). Composes the Button primitive
+	// for the base look.
+	import Button from '../atoms/Button.svelte';
+	import Select from '../atoms/Select.svelte';
+
+	let {
+		glyph,
+		label,
+		title,
+		value,
+		options,
+		onchange,
+		class: klass = ''
+	}: {
+		// Visible content of the button (a letter like "A" or an emoji icon).
+		glyph: string;
+		label: string;
+		title?: string;
+		value: string;
+		options: { value: string; label: string }[];
+		onchange: (value: string) => void;
+		class?: string;
+	} = $props();
+</script>
+
+<Button variant="ghost" class="select-button btn-icon {klass}" {title} aria-label={label}>
+	<span aria-hidden="true">{glyph}</span>
+	<Select
+		variant="ghost"
+		aria-label={label}
+		{value}
+		onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
+	>
+		{#each options as o (o.value)}
+			<option value={o.value}>{o.label}</option>
+		{/each}
+	</Select>
+</Button>
+
+<style>
+	/* The button must clip + position the overlaid select. It's rendered by
+	   Button (child component), so target it via :global. */
+	:global(.select-button) {
+		position: relative;
+		overflow: hidden;
+		font-weight: var(--fw-bold);
+	}
+</style>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    glyph: string;
+    label: string;
+    title?: string;
+    value: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onchange: (value: string) => void;
+    class?: string;
+};
+declare const SelectButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectButton = ReturnType<typeof SelectButton>;
+export default SelectButton;

package/dist/components/molecules/Tabs.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" module>
+	export interface TabItem {
+		id: string;
+		label: string;
+		icon?: import('../atoms/Icon.svelte').IconName;
+	}
+</script>
+
+<script lang="ts">
+	// WAI-ARIA tabs. A `tablist` of `tab`s controlling a single `tabpanel`.
+	// Follows the automatic-activation pattern: ←/→ (and Home/End) move selection
+	// and reveal the panel in one step; roving tabindex keeps exactly one tab in
+	// the Tab order. `value` is bindable; `panel` is a snippet that receives the
+	// active id so the caller renders the matching content.
+	import type { Snippet } from 'svelte';
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		tabs,
+		value = $bindable(),
+		label = 'Tabs',
+		panel
+	}: {
+		tabs: TabItem[];
+		value?: string;
+		label?: string;
+		panel: Snippet<[string]>;
+	} = $props();
+
+	// Default to the first tab when no value is supplied.
+	$effect(() => {
+		if (value === undefined && tabs.length) value = tabs[0].id;
+	});
+
+	let listEl = $state<HTMLDivElement | null>(null);
+	const baseId = `tabs-${Math.random().toString(36).slice(2, 8)}`;
+
+	function select(id: string, focus = false) {
+		value = id;
+		if (focus) {
+			queueMicrotask(() => listEl?.querySelector<HTMLButtonElement>(`#${baseId}-tab-${id}`)?.focus());
+		}
+	}
+	function onkeydown(e: KeyboardEvent) {
+		const i = tabs.findIndex((t) => t.id === value);
+		if (i < 0) return;
+		let next = i;
+		if (e.key === 'ArrowRight') next = (i + 1) % tabs.length;
+		else if (e.key === 'ArrowLeft') next = (i - 1 + tabs.length) % tabs.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = tabs.length - 1;
+		else return;
+		e.preventDefault();
+		select(tabs[next].id, true);
+	}
+</script>
+
+<div class="tabs">
+	<div bind:this={listEl} role="tablist" aria-label={label} tabindex="-1" class="tablist" {onkeydown}>
+		{#each tabs as t (t.id)}
+			<button
+				type="button"
+				role="tab"
+				id="{baseId}-tab-{t.id}"
+				aria-selected={value === t.id}
+				aria-controls="{baseId}-panel"
+				tabindex={value === t.id ? 0 : -1}
+				class="tab"
+				class:selected={value === t.id}
+				onclick={() => select(t.id)}
+			>
+				{#if t.icon}<Icon name={t.icon} />{/if}
+				<span>{t.label}</span>
+			</button>
+		{/each}
+	</div>
+	<div role="tabpanel" id="{baseId}-panel" tabindex="0" class="tabpanel">
+		{#if value !== undefined}{@render panel(value)}{/if}
+	</div>
+</div>
+
+<style>
+	.tablist {
+		display: flex;
+		gap: var(--sp-1);
+		border-bottom: 1px solid var(--border);
+	}
+	.tab {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-2) var(--sp-3);
+		border: none;
+		background: none;
+		color: var(--text-muted);
+		font-size: var(--fs-sm);
+		font-weight: var(--fw-medium);
+		border-bottom: 2px solid transparent;
+		margin-bottom: -1px;
+		transition:
+			color 0.12s var(--ease),
+			border-color 0.12s var(--ease);
+	}
+	.tab:hover {
+		color: var(--text);
+	}
+	.tab.selected {
+		color: var(--accent);
+		border-bottom-color: var(--accent);
+	}
+	.tabpanel {
+		padding-top: var(--sp-4);
+	}
+	.tabpanel:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+		border-radius: var(--r-sm);
+	}
+</style>

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

@@ -0,0 +1,15 @@
+export interface TabItem {
+    id: string;
+    label: string;
+    icon?: import('../atoms/Icon.svelte').IconName;
+}
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    tabs: TabItem[];
+    value?: string;
+    label?: string;
+    panel: Snippet<[string]>;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/molecules/ThemePicker.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	// Theme switcher: a compact icon-button hosting a native <select> over the
+	// full theme registry, wired to the global theme store. The native control
+	// gives correct mobile/keyboard behaviour and outside-click handling for free.
+	// The button glyph reflects the active theme's icon.
+	import SelectButton from './SelectButton.svelte';
+	import { theme, THEMES } from '../../stores/theme.svelte';
+
+	let { class: klass = '' }: { class?: string } = $props();
+
+	const options = THEMES.map((t) => ({ value: t.id, label: `${t.icon}  ${t.label}` }));
+</script>
+
+<SelectButton
+	class={klass}
+	glyph={theme.icon}
+	label="Theme"
+	title={`Theme: ${theme.label}`}
+	value={theme.current}
+	{options}
+	onchange={(v) => theme.set(v as (typeof THEMES)[number]['id'])}
+/>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const ThemePicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemePicker = ReturnType<typeof ThemePicker>;
+export default ThemePicker;

package/dist/components/molecules/Toaster.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	// Renders the toast queue in a bottom-centered, polite live region. Mount once
+	// near the app root. Each toast is tap/click-dismissible; screen readers
+	// announce additions via aria-live. Sits in its own stacking context above
+	// page content but below modals' top layer.
+	import { toasts } from '../../stores/toast.svelte';
+	import Icon from '../atoms/Icon.svelte';
+</script>
+
+<div class="toaster" role="status" aria-live="polite" aria-relevant="additions">
+	{#each toasts.items as t (t.id)}
+		<button
+			type="button"
+			class="toast"
+			class:ok={t.tone === 'ok'}
+			class:err={t.tone === 'error'}
+			onclick={() => toasts.dismiss(t.id)}
+		>
+			{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{/if}
+			<span class="msg">{t.message}</span>
+			<Icon name="x" />
+		</button>
+	{/each}
+</div>
+
+<style>
+	.toaster {
+		position: fixed;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: calc(var(--safe-bottom) + var(--sp-4));
+		z-index: var(--z-toast);
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		width: calc(100% - var(--sp-8));
+		max-width: 30rem;
+		pointer-events: none;
+	}
+	.toast {
+		pointer-events: auto;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		width: 100%;
+		text-align: left;
+		color: var(--text);
+		background: var(--bg-elevated-2);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		padding: var(--sp-3) var(--sp-4);
+		box-shadow: var(--shadow-md);
+		font-size: var(--fs-sm);
+		animation: toast-in 0.18s var(--ease);
+	}
+	.toast .msg {
+		flex: 1;
+	}
+	.toast.ok {
+		border-color: var(--ok);
+		color: var(--ok);
+	}
+	.toast.err {
+		border-color: var(--danger);
+		color: var(--danger);
+	}
+	@keyframes toast-in {
+		from {
+			transform: translateY(8px);
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toaster = InstanceType<typeof Toaster>;
+export default Toaster;

package/dist/components/molecules/Toggle.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	// Toggle chip — a muted pill/chip that lights up (tinted) when `pressed`.
+	// The "on" tint is driven by the `--toggle-accent` CSS var (default accent),
+	// so callers recolor it per-use (e.g. warm for behavior, role color for
+	// message-type filters) without restyling the base. Used across the
+	// conversation toolbar (filters / formatting / behavior / mobile tabs).
+	//
+	// Specializes the Button atom (ghost variant) for shared disabled/focus/
+	// transition behaviour; the chip surface + "on" tint are overrides.
+	// `.btn.toggle` outranks the atom's :where()-scoped variant classes.
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../atoms/Button.svelte';
+
+	let {
+		pressed = false,
+		pill = false,
+		struck = false,
+		class: klass = '',
+		children,
+		...rest
+	}: HTMLButtonAttributes & {
+		pressed?: boolean;
+		pill?: boolean;
+		struck?: boolean;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<Button
+	{...rest}
+	variant="ghost"
+	class="toggle {pill ? 'pill' : ''} {struck ? 'struck' : ''} {pressed ? 'on' : ''} {klass}"
+	aria-pressed={pressed}
+>
+	{@render children?.()}
+</Button>
+
+<style>
+	:global(.btn.toggle) {
+		gap: 4px;
+		min-height: 0;
+		padding: 0.15rem var(--sp-2);
+		border-radius: var(--r-sm);
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-medium);
+		line-height: 1.4;
+		background: var(--bg-elevated-2);
+		color: var(--text-muted);
+		border: 1px solid var(--border);
+	}
+	:global(.btn.toggle.pill) {
+		border-radius: var(--r-pill);
+	}
+	:global(.btn.toggle:hover:not(:disabled)) {
+		border-color: var(--border-strong);
+		background: var(--bg-elevated-2);
+	}
+	:global(.btn.toggle.on) {
+		--tc: var(--toggle-accent, var(--accent));
+		color: var(--tc);
+		border-color: color-mix(in srgb, var(--tc) 55%, transparent);
+		background: color-mix(in srgb, var(--tc) 16%, transparent);
+	}
+	:global(.btn.toggle.struck) {
+		text-decoration: line-through;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLButtonAttributes & {
+    pressed?: boolean;
+    pill?: boolean;
+    struck?: boolean;
+    children?: Snippet;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/molecules/Tooltip.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	// Lightweight tooltip. Shows on hover (after a short delay) and on keyboard
+	// focus of the trigger; hides on blur / mouseleave / Escape. The trigger is
+	// any snippet; an action wires `aria-describedby` onto its first focusable
+	// element so screen readers announce the text. CSS-positioned above the
+	// trigger (centered). Dependency-free.
+	import type { Snippet } from 'svelte';
+
+	let {
+		text,
+		placement = 'top',
+		delay = 200,
+		trigger
+	}: {
+		text: string;
+		placement?: 'top' | 'bottom';
+		delay?: number;
+		trigger: Snippet;
+	} = $props();
+
+	const id = `tip-${Math.random().toString(36).slice(2, 8)}`;
+	let open = $state(false);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	function show() {
+		clearTimeout(timer);
+		timer = setTimeout(() => (open = true), delay);
+	}
+	function hide() {
+		clearTimeout(timer);
+		open = false;
+	}
+
+	const FOCUSABLE = 'a[href],button,input,select,textarea,[tabindex]';
+	// Action: wire aria-describedby onto the trigger's focusable element AND the
+	// hover/focus listeners (attached via the DOM, so the wrapper stays a plain,
+	// role-less container — the interactive element is the trigger inside).
+	function tooltip(node: HTMLElement) {
+		const target = (node.matches(FOCUSABLE) ? node : node.querySelector(FOCUSABLE)) as
+			| HTMLElement
+			| null;
+		target?.setAttribute('aria-describedby', id);
+		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hide();
+		node.addEventListener('mouseenter', show);
+		node.addEventListener('mouseleave', hide);
+		node.addEventListener('focusin', show);
+		node.addEventListener('focusout', hide);
+		node.addEventListener('keydown', onkey);
+		return {
+			destroy() {
+				target?.removeAttribute('aria-describedby');
+				node.removeEventListener('mouseenter', show);
+				node.removeEventListener('mouseleave', hide);
+				node.removeEventListener('focusin', show);
+				node.removeEventListener('focusout', hide);
+				node.removeEventListener('keydown', onkey);
+			}
+		};
+	}
+</script>
+
+<span class="tip-wrap" use:tooltip>
+	{@render trigger()}
+	<span {id} role="tooltip" class="tip tip-{placement}" class:open aria-hidden={!open}>
+		{text}
+	</span>
+</span>
+
+<style>
+	.tip-wrap {
+		position: relative;
+		display: inline-flex;
+	}
+	.tip {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%) scale(0.96);
+		z-index: var(--z-toast);
+		max-width: 16rem;
+		width: max-content;
+		padding: var(--sp-1) var(--sp-2);
+		background: var(--bg-elevated-2);
+		color: var(--text);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-sm);
+		box-shadow: var(--shadow-md);
+		font-size: var(--fs-xs);
+		line-height: 1.4;
+		white-space: normal;
+		pointer-events: none;
+		opacity: 0;
+		transition:
+			opacity 0.12s var(--ease),
+			transform 0.12s var(--ease);
+	}
+	.tip-top {
+		bottom: calc(100% + 6px);
+	}
+	.tip-bottom {
+		top: calc(100% + 6px);
+	}
+	.tip.open {
+		opacity: 1;
+		transform: translateX(-50%) scale(1);
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    text: string;
+    placement?: 'top' | 'bottom';
+    delay?: number;
+    trigger: Snippet;
+};
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;