@dorsk/tsumikit 0.23.0 → 0.25.0

package/dist/components/layouts/resizable-panel-frame.js

@@ -61,3 +61,164 @@ export function createFrameBatcher(requestFrame, cancelFrame, apply) {
 		},
 	};
 }
+
+/**
+ * Resolve a width prop that is either a pixel number or a CSS length.
+ * Plain `px` strings parse directly; anything else is handed to `measure`,
+ * which lays the length out and returns its pixel size (or `undefined` when
+ * there is no DOM to measure in).
+ *
+ * @param {number | string} value
+ * @param {(css: string) => number | undefined} measure
+ * @returns {number | undefined}
+ */
+export function resolveLength(value, measure) {
+	if (typeof value === 'number') return Number.isFinite(value) ? value : undefined;
+	const px = /^\s*(-?\d*\.?\d+)px\s*$/.exec(value);
+	if (px) return Number(px[1]);
+	const measured = measure(value);
+	return measured !== undefined && Number.isFinite(measured) ? measured : undefined;
+}
+
+/**
+ * @typedef {object} ResizeHandleParams
+ * @property {'left' | 'right'} side Edge the resized box sits on; dragging away from it grows the box.
+ * @property {(width: number) => void} onwidth Called once per animation frame while dragging and on every keyboard step.
+ * @property {(width: number) => void} [oncommit] Called with the settled width on pointer release and after each keyboard step.
+ * @property {() => void} [onreset] Double-click on the handle.
+ * @property {(active: boolean) => void} [onactive] Drag start/end, for a `resizing` class.
+ * @property {() => number} [measure] Current width in px; defaults to the handle's parent box.
+ * @property {number} [min]
+ * @property {number} [max]
+ * @property {number} [step] Pixels per arrow key press (default 16).
+ */
+
+/**
+ * Svelte action turning any element into a pointer + keyboard width grip.
+ * One pointer-capture / rAF-coalesced implementation shared by
+ * ResizablePanel and consumer-built grips.
+ *
+ * Usage: <div role="separator" tabindex="0" use:resizeHandle={{ side, min, max, onwidth }}></div>
+ *
+ * @param {HTMLElement} node
+ * @param {ResizeHandleParams} params
+ */
+export function resizeHandle(node, params) {
+	let current = params;
+	let active = false;
+	let startX = 0;
+	let startWidth = 0;
+
+	const frames = createFrameBatcher(
+		(callback) => requestAnimationFrame(callback),
+		(handle) => cancelAnimationFrame(handle),
+		/** @param {number} width */
+		(width) => current.onwidth(width),
+	);
+
+	/** @param {number} width */
+	function clamp(width) {
+		const min = current.min ?? 1;
+		const max = current.max ?? Number.POSITIVE_INFINITY;
+		return Math.round(Math.max(min, Math.min(width, Math.max(min, max))));
+	}
+
+	function direction() {
+		return current.side === 'right' ? -1 : 1;
+	}
+
+	function measure() {
+		if (current.measure) return current.measure();
+		return node.parentElement?.getBoundingClientRect().width ?? 0;
+	}
+
+	/** @param {number} clientX */
+	function widthAt(clientX) {
+		return clamp(startWidth + (clientX - startX) * direction());
+	}
+
+	/** @param {PointerEvent} event */
+	function down(event) {
+		if (event.button !== 0) return;
+		active = true;
+		startX = event.clientX;
+		startWidth = measure();
+		node.setPointerCapture(event.pointerId);
+		event.preventDefault();
+		current.onactive?.(true);
+	}
+
+	/** @param {PointerEvent} event */
+	function move(event) {
+		if (!active) return;
+		frames.schedule(widthAt(event.clientX));
+	}
+
+	/** @param {PointerEvent} event */
+	function up(event) {
+		if (!active) return;
+		active = false;
+		const width = widthAt(event.clientX);
+		frames.flush(width);
+		try {
+			node.releasePointerCapture(event.pointerId);
+		} catch {
+			// Pointer capture may already have been released by the browser.
+		}
+		current.onactive?.(false);
+		current.oncommit?.(width);
+	}
+
+	/** @param {KeyboardEvent} event */
+	function keydown(event) {
+		const step = current.step ?? 16;
+		/** @type {number | undefined} */
+		let next;
+		switch (event.key) {
+			case 'ArrowLeft':
+				next = measure() - step * direction();
+				break;
+			case 'ArrowRight':
+				next = measure() + step * direction();
+				break;
+			case 'Home':
+				next = current.min;
+				break;
+			case 'End':
+				next = current.max;
+				break;
+		}
+		if (next === undefined) return;
+		event.preventDefault();
+		const width = clamp(next);
+		current.onwidth(width);
+		current.oncommit?.(width);
+	}
+
+	function reset() {
+		current.onreset?.();
+	}
+
+	node.addEventListener('pointerdown', down);
+	node.addEventListener('pointermove', move);
+	node.addEventListener('pointerup', up);
+	node.addEventListener('pointercancel', up);
+	node.addEventListener('keydown', keydown);
+	node.addEventListener('dblclick', reset);
+
+	return {
+		/** @param {ResizeHandleParams} next */
+		update(next) {
+			current = next;
+		},
+		destroy() {
+			node.removeEventListener('pointerdown', down);
+			node.removeEventListener('pointermove', move);
+			node.removeEventListener('pointerup', up);
+			node.removeEventListener('pointercancel', up);
+			node.removeEventListener('keydown', keydown);
+			node.removeEventListener('dblclick', reset);
+			frames.discard();
+		},
+	};
+}

package/dist/components/molecules/ConfirmModal.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	// 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.
+	import type { Snippet } from 'svelte';
+	import Button from '../atoms/Button.svelte';
+	import Text from '../atoms/Text.svelte';
+	import Modal from './Modal.svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		message,
+		children,
+		confirmLabel = 'Confirm',
+		cancelLabel = 'Cancel',
+		tone = 'primary',
+		busy = false,
+		onconfirm,
+		oncancel
+	}: {
+		open?: boolean;
+		title: string;
+		message?: string;
+		children?: Snippet;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		tone?: 'primary' | 'danger' | 'warn';
+		busy?: boolean;
+		onconfirm: () => void | Promise<void>;
+		oncancel?: () => void;
+	} = $props();
+
+	let pending = $state(false);
+	let error = $state<string | null>(null);
+	const working = $derived(busy || pending);
+
+	$effect(() => {
+		if (!open) error = null;
+	});
+
+	async function confirm() {
+		if (working) return;
+		error = null;
+		try {
+			const result = onconfirm();
+			if (result instanceof Promise) {
+				pending = true;
+				await result;
+			}
+			open = false;
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+		} finally {
+			pending = false;
+		}
+	}
+
+	function cancel() {
+		if (working) return;
+		open = false;
+		oncancel?.();
+	}
+</script>
+
+<Modal
+	bind:open
+	{title}
+	tone={tone === 'primary' ? 'neutral' : tone}
+	busy={working}
+	onclose={oncancel}
+	size="sm"
+>
+	{#snippet body()}
+		<div class="confirm-body" data-tsu="ConfirmModal">
+			{#if message}<Text variant="body">{message}</Text>{/if}
+			{@render children?.()}
+			{#if error}
+				<Text variant="caption" tone="danger" role="alert" class="confirm-error">{error}</Text>
+			{/if}
+		</div>
+	{/snippet}
+	{#snippet footer()}
+		<Button onclick={cancel} disabled={working}>{cancelLabel}</Button>
+		<Button
+			variant={tone === 'danger' ? 'danger' : 'primary'}
+			tone={tone === 'warn' ? 'warn' : 'none'}
+			loading={working}
+			onclick={confirm}
+		>
+			{confirmLabel}
+		</Button>
+	{/snippet}
+</Modal>
+
+<style>
+	.confirm-body {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-3);
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    message?: string;
+    children?: Snippet;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    tone?: 'primary' | 'danger' | 'warn';
+    busy?: boolean;
+    onconfirm: () => void | Promise<void>;
+    oncancel?: () => void;
+};
+declare const ConfirmModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ConfirmModal = ReturnType<typeof ConfirmModal>;
+export default ConfirmModal;

package/dist/components/molecules/KeyValue.svelte

@@ -0,0 +1,117 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export type KeyValueTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
+	export interface KeyValueRow {
+		label: string;
+		value: string | number | Snippet;
+		mono?: boolean;
+		tone?: KeyValueTone;
+		hint?: string;
+	}
+</script>
+
+<script lang="ts">
+	// Label/value grid as a semantic <dl>: one or two label+value column pairs,
+	// values optionally mono / toned, with a faint hint line under the value.
+	import Text from '../atoms/Text.svelte';
+
+	const TEXT_TONE = {
+		neutral: 'default',
+		ok: 'success',
+		warn: 'warn',
+		danger: 'danger',
+		info: 'accent',
+	} as const;
+
+	let {
+		rows,
+		columns = 1,
+		dense = false,
+		align = 'start',
+		class: klass = '',
+		...rest
+	}: {
+		rows: KeyValueRow[];
+		columns?: 1 | 2;
+		dense?: boolean;
+		align?: 'start' | 'end';
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<dl
+	data-tsu="KeyValue"
+	class="kv {klass}"
+	class:kv-cols-2={columns === 2}
+	class:kv-dense={dense}
+	class:kv-align-end={align === 'end'}
+	{...rest}
+>
+	{#each rows as row, i (i)}
+		<div class="kv-row">
+			<dt class="kv-label">{row.label}</dt>
+			<dd class="kv-value">
+				{#if typeof row.value === 'function'}
+					{@render row.value()}
+				{:else}
+					<Text
+						tone={TEXT_TONE[row.tone ?? 'neutral']}
+						variant={row.mono ? 'code' : undefined}
+						numeric={typeof row.value === 'number'}
+					>
+						{row.value}
+					</Text>
+				{/if}
+				{#if row.hint}
+					<Text as="div" variant="caption" class="kv-hint">{row.hint}</Text>
+				{/if}
+			</dd>
+		</div>
+	{/each}
+</dl>
+
+<style>
+	.kv {
+		display: grid;
+		grid-template-columns: max-content minmax(0, 1fr);
+		column-gap: var(--sp-4);
+		row-gap: var(--sp-2);
+		margin: 0;
+		font-size: var(--fs-sm);
+	}
+	.kv-cols-2 {
+		grid-template-columns: repeat(2, max-content minmax(0, 1fr));
+	}
+	.kv-dense {
+		row-gap: var(--sp-1);
+		column-gap: var(--sp-3);
+		font-size: var(--fs-xs);
+	}
+	.kv-row {
+		display: contents;
+	}
+	.kv-label {
+		color: var(--text-muted);
+		font-weight: var(--fw-medium);
+	}
+	.kv-value {
+		margin: 0;
+		min-width: 0;
+		color: var(--text);
+		overflow-wrap: anywhere;
+	}
+	.kv-align-end .kv-value {
+		text-align: end;
+	}
+	.kv-value :global(.kv-hint) {
+		margin-top: var(--sp-1);
+	}
+	@container (max-width: 30rem) {
+		.kv-cols-2 {
+			grid-template-columns: max-content minmax(0, 1fr);
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+export type KeyValueTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+export interface KeyValueRow {
+    label: string;
+    value: string | number | Snippet;
+    mono?: boolean;
+    tone?: KeyValueTone;
+    hint?: string;
+}
+type $$ComponentProps = {
+    rows: KeyValueRow[];
+    columns?: 1 | 2;
+    dense?: boolean;
+    align?: 'start' | 'end';
+    class?: string;
+    [key: string]: unknown;
+};
+declare const KeyValue: import("svelte").Component<$$ComponentProps, {}, "">;
+type KeyValue = ReturnType<typeof KeyValue>;
+export default KeyValue;

package/dist/components/molecules/LoadMore.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	// Tri-state "load more" footer for paginated lists: idle button, loading
+	// button (spinner, blocks re-entry), error line with retry, or a faint
+	// "done" note. `pill` renders the compact centered chip used to load older
+	// items above a feed.
+	import Button from '../atoms/Button.svelte';
+	import Text from '../atoms/Text.svelte';
+
+	let {
+		state = 'idle',
+		onload,
+		label = 'Load more',
+		loadingLabel = 'Loading…',
+		errorLabel = 'Failed to load',
+		retryLabel = 'Retry',
+		doneLabel = 'No more items',
+		pill = false,
+		class: klass = '',
+		...rest
+	}: {
+		state?: 'idle' | 'loading' | 'error' | 'done';
+		onload?: () => void;
+		label?: string;
+		loadingLabel?: string;
+		errorLabel?: string;
+		retryLabel?: string;
+		doneLabel?: string;
+		pill?: boolean;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<div
+	data-tsu="LoadMore"
+	data-state={state}
+	class="load-more {klass}"
+	class:load-more-pill={pill}
+	role="status"
+	aria-busy={state === 'loading' || undefined}
+	{...rest}
+>
+	{#if state === 'done'}
+		<Text variant="caption" class="load-more-done">{doneLabel}</Text>
+	{:else if state === 'error'}
+		<Text tone="danger" size="sm" class="load-more-error">{errorLabel}</Text>
+		<Button size="sm" onclick={() => onload?.()}>{retryLabel}</Button>
+	{:else}
+		<Button
+			size="sm"
+			variant={pill ? 'default' : 'ghost'}
+			loading={state === 'loading'}
+			class={pill ? 'load-more-chip' : ''}
+			onclick={() => onload?.()}
+		>
+			{state === 'loading' ? loadingLabel : label}
+		</Button>
+	{/if}
+</div>
+
+<style>
+	.load-more {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-2);
+		min-height: var(--sp-8);
+	}
+	.load-more-pill {
+		padding: var(--sp-1);
+	}
+	.load-more :global(.load-more-chip) {
+		border-radius: var(--r-pill);
+		font-size: var(--fs-xs);
+	}
+</style>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    state?: 'idle' | 'loading' | 'error' | 'done';
+    onload?: () => void;
+    label?: string;
+    loadingLabel?: string;
+    errorLabel?: string;
+    retryLabel?: string;
+    doneLabel?: string;
+    pill?: boolean;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const LoadMore: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoadMore = ReturnType<typeof LoadMore>;
+export default LoadMore;

package/dist/components/molecules/Modal.svelte

@@ -3,24 +3,46 @@
 	// the platform gives us the hard parts for free: top-layer rendering above
 	// everything (no z-index races), a real focus trap, inert background, initial
 	// focus, focus restoration to the trigger, Escape-to-close and a styleable
-	// ::backdrop. We only add: open-on-mount, click-outside, and optional
-	// desktop resize (width persisted under `resizeKey`).
+	// ::backdrop. We only add: open-on-mount (or `open`-driven), click-outside,
+	// tone/busy chrome, and optional desktop resize (width persisted under
+	// `resizeKey`).
 	import type { Snippet } from 'svelte';
 	import { browser } from '../../env';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
 	import IconButton from './IconButton.svelte';
 
+	type Tone = 'neutral' | 'danger' | 'warn' | 'info';
+	const TONE_ICON: Record<Exclude<Tone, 'neutral'>, IconName> = {
+		danger: 'warning',
+		warn: 'warning',
+		info: 'info'
+	};
+
 	let {
 		title,
+		open = $bindable(),
 		onclose,
 		body,
 		footer,
 		size = 'md',
+		tone = 'neutral',
+		busy = false,
 		resizeKey
 	}: {
 		title: string;
-		onclose: () => void;
+		/** Controlled visibility. When provided the `<dialog>` stays mounted and
+		 *  `showModal()`/`close()` follow the value; closing sets it back to false.
+		 *  Omit to open on mount (mount/unmount the component to show/hide). */
+		open?: boolean;
+		onclose?: () => void;
 		body: Snippet;
 		footer?: Snippet;
+		/** Title glyph + 3px top border in the semantic colour. */
+		tone?: Tone;
+		/** Work in flight: body is inert, a spinner sits by the title and Escape,
+		 *  backdrop and the close button stop closing until it clears. */
+		busy?: boolean;
 		/** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
 		 *  `resizeKey` drag still overrides it. */
 		size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -42,16 +64,30 @@
 	let width = $state<number | null>(loadWidth());
 	let dialogEl = $state<HTMLDialogElement | null>(null);
 
+	const controlled = $derived(open !== undefined);
+
+	// Open as a modal (top layer + trap + inert background + focus mgmt). The
+	// native element restores focus to the trigger automatically on close.
 	$effect(() => {
-		// Open as a modal (top layer + trap + inert background + focus mgmt). The
-		// native element restores focus to the trigger automatically on close.
-		dialogEl?.showModal();
+		if (!dialogEl) return;
+		if (!controlled) {
+			dialogEl.showModal();
+			return;
+		}
+		if (open && !dialogEl.open) dialogEl.showModal();
+		else if (!open && dialogEl.open) dialogEl.close();
 	});
 
+	function requestClose() {
+		if (busy) return;
+		if (controlled) open = false;
+		onclose?.();
+	}
+
 	// Click outside: <dialog fills the viewport; clicks on its padding-free self
 	// (not the inner .sheet) are backdrop clicks.
 	function onDialogClick(e: MouseEvent) {
-		if (e.target === dialogEl) onclose();
+		if (e.target === dialogEl) requestClose();
 	}
 
 	// --- resize ---
@@ -102,10 +138,15 @@
 	class="modal"
 	class:resizing
 	aria-labelledby={titleId}
+	aria-busy={busy || undefined}
+	data-tone={tone === 'neutral' ? undefined : tone}
 	style={width != null ? `--sheet-w: ${width}px` : undefined}
 	oncancel={(e) => {
 		e.preventDefault(); /* keep parent the source of truth for open state */
-		onclose();
+		requestClose();
+	}}
+	onclose={() => {
+		if (controlled) open = false;
 	}}
 	onclick={onDialogClick}
 >
@@ -114,13 +155,19 @@
 		class:sheet-sm={size === 'sm'}
 		class:sheet-lg={size === 'lg'}
 		class:sheet-xl={size === 'xl'}
+		class:sheet-toned={tone !== 'neutral'}
+		style:--modal-tone={tone === 'neutral' ? undefined : `var(--${tone})`}
 	>
 		<div class="sheet-head">
+			{#if tone !== 'neutral'}
+				<span class="sheet-tone-icon"><Icon name={TONE_ICON[tone]} size={18} /></span>
+			{/if}
 			<span id={titleId} class="sheet-title truncate">{title}</span>
+			{#if busy}<Spinner label="Working" />{/if}
 			<div class="spacer"></div>
-			<IconButton icon="x" label="Close dialog" onclick={onclose} />
+			<IconButton icon="x" label="Close dialog" disabled={busy} onclick={requestClose} />
 		</div>
-		<div class="sheet-body">
+		<div class="sheet-body" inert={busy}>
 			{@render body()}
 		</div>
 		{#if footer}
@@ -231,6 +278,14 @@
 		padding: var(--sp-4);
 		border-bottom: 1px solid var(--border);
 	}
+	.sheet-toned {
+		border-top: 3px solid var(--modal-tone);
+	}
+	.sheet-tone-icon {
+		display: inline-flex;
+		flex: none;
+		color: var(--modal-tone);
+	}
 	.sheet-title {
 		font-size: var(--fs-lg);
 		font-weight: var(--fw-semibold);
@@ -242,6 +297,7 @@
 	}
 	.sheet-foot {
 		display: flex;
+		justify-content: flex-end;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
 		border-top: 1px solid var(--border);

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

@@ -1,9 +1,19 @@
 import type { Snippet } from 'svelte';
+type Tone = 'neutral' | 'danger' | 'warn' | 'info';
 type $$ComponentProps = {
     title: string;
-    onclose: () => void;
+    /** Controlled visibility. When provided the `<dialog>` stays mounted and
+     *  `showModal()`/`close()` follow the value; closing sets it back to false.
+     *  Omit to open on mount (mount/unmount the component to show/hide). */
+    open?: boolean;
+    onclose?: () => void;
     body: Snippet;
     footer?: Snippet;
+    /** Title glyph + 3px top border in the semantic colour. */
+    tone?: Tone;
+    /** Work in flight: body is inert, a spinner sits by the title and Escape,
+     *  backdrop and the close button stop closing until it clears. */
+    busy?: boolean;
     /** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
      *  `resizeKey` drag still overrides it. */
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -11,6 +21,6 @@ type $$ComponentProps = {
      *  width persists under this localStorage key. */
     resizeKey?: string;
 };
-declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;