@dorsk/tsumikit 0.20.0 → 0.21.0

package/README.md

@@ -69,8 +69,12 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 ## Components
 
 **Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
-Slider, Progress, Card (`tone` tints the surface for inline banners), Badge, Dot, Link, Icon (open registry — pass a
-`children` snippet for any custom SVG).
+Slider, Progress, Card (`tone` tints the surface for inline banners), Badge
+(`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
+`icon`, `numeric`, `truncate`, `variant="text"`; all tints derive from
+`--badge-tone`), Dot (`ring` dark halo over artwork), Link (`tone`, `underline`
+always/hover/none, `align`), Icon (open registry — pass a `children` snippet for
+any custom SVG).
 
 **Molecules:** Field, IconButton, SelectButton, Toggle, OptionButton, Modal,
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
@@ -135,6 +139,13 @@ Use the `.cq-*` utilities (`.cq-hide`, `.cq-stack`, `.cq-truncate`,
 you drag the sidebar down to that icon rail (width persisted).
 
 **Stores:** `theme`, `toasts`, `fontScale` (opt-in). **Actions:** `autoresize`.
+
+`toasts.show(message, { tone, duration, action })` plus the `ok`/`error`/`info`
+shorthands (tones `neutral|ok|error|info`; `danger` aliases `error`). An `action`
+(`{ label, run }`) renders a button; the toast shows a loading state while `run`
+settles, then dismisses, and action toasts stay 7s instead of 4s (`duration: 0` is
+sticky). `Toaster` renders in the browser top layer (`popover="manual"`), so toasts
+paint above an open `Modal`; `--toast-max-width` (28rem) caps the stack.
 **Helpers:** `copyToClipboard(text)` — async Clipboard API with an
 insecure-context fallback; returns whether it succeeded.
 

package/dist/components/atoms/Badge.svelte

@@ -1,23 +1,43 @@
 <script lang="ts">
 	// Inline label primitive — the project's single pill. Covers three jobs via
 	// props rather than separate components:
-	//   • state  → `tone` (neutral/ok/warn/danger/info) semantic palette
+	//   • state  → `tone` semantic palette, or `color` for any CSS colour
 	//   • info   → `mono` for paths/ids/code-ish metadata
 	//   • tag    → `removable` renders a dismiss button + fires `onremove`
 	// Polymorphic via `as` so it can be a static <span> or an interactive
-	// <button>. `size="sm"` is the compact form for counts/dense rows.
+	// <button>. Every tinted style derives from the `--badge-tone` custom
+	// property, which is the public hook for consumers who theme by CSS.
 	import type { Snippet } from 'svelte';
+	import Dot from './Dot.svelte';
+	import Icon, { type IconName } from './Icon.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
+
+	const TONE_COLOR: Record<Exclude<Tone, 'neutral'>, string> = {
+		ok: 'var(--ok)',
+		warn: 'var(--warn)',
+		danger: 'var(--danger)',
+		info: 'var(--info)',
+		accent: 'var(--accent)',
+		muted: 'var(--text-muted)',
+		violet: 'var(--c-violet)',
+	};
 
 	let {
 		tone = 'neutral',
+		color,
 		as = 'span',
 		size = 'md',
+		variant = 'chip',
 		mono = false,
 		uppercase = false,
+		numeric = false,
+		truncate = false,
+		maxWidth,
 		border = true,
 		active = false,
+		dot = false,
+		icon,
 		removable = false,
 		onremove,
 		class: klass = '',
@@ -25,23 +45,39 @@
 		...rest
 	}: {
 		tone?: Tone;
+		// Any CSS colour (or var()) for a one-off tint; overrides `tone`.
+		color?: string;
 		as?: 'span' | 'button';
-		size?: 'sm' | 'md';
+		// `xs` is the densest form for counters in tight rows.
+		size?: 'xs' | 'sm' | 'md';
+		// `text` drops the chip (no fill, ring or padding) but keeps badge
+		// typography and tint — for mono metadata that must not read as a pill.
+		variant?: 'chip' | 'text';
 		mono?: boolean;
 		// Uppercase, letter-spaced label — for status tags/eyebrows.
 		uppercase?: boolean;
+		// Tabular digits with a minimum width so counters don't jitter.
+		numeric?: boolean;
+		// Clip long content with an ellipsis instead of overflowing.
+		truncate?: boolean;
+		maxWidth?: string;
 		// Borderless "soft" variant: tone-tinted fill pill with no ring. The
 		// default (`true`) keeps the outlined look for backwards compatibility.
 		border?: boolean;
 		// Interactive "on" state for a toggle/count badge (`as="button"`): fills the
 		// pill with its tone instead of just tinting the border.
 		active?: boolean;
+		// Leading status dot in the badge colour.
+		dot?: boolean;
+		icon?: IconName;
 		removable?: boolean;
 		onremove?: (e: MouseEvent) => void;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const toneColor = $derived(color ?? (tone === 'neutral' ? undefined : TONE_COLOR[tone]));
 </script>
 
 <svelte:element
@@ -52,15 +88,32 @@
 	class:badge-warn={tone === 'warn'}
 	class:badge-danger={tone === 'danger'}
 	class:badge-info={tone === 'info'}
+	class:toned={toneColor !== undefined}
 	class:badge-sm={size === 'sm'}
+	class:badge-xs={size === 'xs'}
+	class:text={variant === 'text'}
 	class:mono
 	class:uppercase
+	class:numeric
+	class:truncate
 	class:borderless={!border}
 	class:active
 	class:interactive={as === 'button'}
+	style:--badge-tone={toneColor}
+	style:--badge-max-width={maxWidth}
 	{...rest}
 >
-	{@render children?.()}
+	{#if dot}
+		<Dot color="var(--badge-tone, currentColor)" />
+	{/if}
+	{#if icon}
+		<Icon name={icon} />
+	{/if}
+	{#if truncate}
+		<span class="clip">{@render children?.()}</span>
+	{:else}
+		{@render children?.()}
+	{/if}
 	{#if removable}
 		<button
 			type="button"
@@ -87,32 +140,29 @@
 		color: var(--text-muted);
 		border: 1px solid var(--border);
 		white-space: nowrap;
-		max-width: 100%;
+		max-width: var(--badge-max-width, 100%);
 	}
-	.badge-sm {
-		padding: 0 0.4rem;
-		font-size: 0.6875rem;
+	.badge-sm,
+	.badge-xs {
+		font-size: calc(var(--fs-xs) * 0.92);
 		gap: 0.15rem;
 	}
-	.badge-ok {
-		color: var(--ok);
-		border-color: color-mix(in srgb, var(--ok) 40%, transparent);
-		background: color-mix(in srgb, var(--ok) 12%, transparent);
+	.badge-sm {
+		padding: 0 0.4rem;
 	}
-	.badge-warn {
-		color: var(--warn);
-		border-color: color-mix(in srgb, var(--warn) 40%, transparent);
-		background: color-mix(in srgb, var(--warn) 12%, transparent);
+	.badge-xs {
+		padding: 0.05rem var(--sp-2);
 	}
-	.badge-danger {
-		color: var(--danger);
-		border-color: color-mix(in srgb, var(--danger) 40%, transparent);
-		background: color-mix(in srgb, var(--danger) 12%, transparent);
+	.toned {
+		color: var(--badge-tone);
+		border-color: color-mix(in srgb, var(--badge-tone) 40%, transparent);
+		background: color-mix(in srgb, var(--badge-tone) 12%, transparent);
 	}
-	.badge-info {
-		color: var(--info);
-		border-color: color-mix(in srgb, var(--info) 40%, transparent);
-		background: color-mix(in srgb, var(--info) 12%, transparent);
+	.text {
+		padding: 0;
+		border-color: transparent;
+		background: none;
+		border-radius: 0;
 	}
 	/* Soft variant: drop the ring, keep the tinted fill. Transparent (not
 	   `border: 0`) so layout/baseline matches the outlined default exactly. */
@@ -128,24 +178,26 @@
 		letter-spacing: 0.04em;
 		font-weight: var(--fw-semibold);
 	}
-	/* Interactive "on" state: fill the pill with its tone. Falls back to the
-	   neutral accent when no semantic tone is set. */
-	.active {
-		color: var(--text-on-accent);
-		background: var(--badge-fill, var(--accent));
-		border-color: var(--badge-fill, var(--accent));
-	}
-	.badge-ok.active {
-		--badge-fill: var(--ok);
+	.numeric {
+		font-variant-numeric: tabular-nums;
+		min-width: 1.5em;
+		justify-content: center;
 	}
-	.badge-warn.active {
-		--badge-fill: var(--warn);
+	.truncate {
+		min-width: 0;
 	}
-	.badge-danger.active {
-		--badge-fill: var(--danger);
+	.clip {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
-	.badge-info.active {
-		--badge-fill: var(--info);
+	/* Interactive "on" state: fill the pill with its tone. Falls back to the
+	   neutral accent when no tone or colour is set. */
+	.active {
+		color: var(--text-on-accent);
+		background: var(--badge-tone, var(--accent));
+		border-color: var(--badge-tone, var(--accent));
 	}
 	.interactive {
 		cursor: pointer;
@@ -159,9 +211,13 @@
 	}
 	.interactive.active:hover {
 		color: var(--text-on-accent);
-		border-color: var(--badge-fill, var(--accent));
+		border-color: var(--badge-tone, var(--accent));
 		filter: brightness(1.08);
 	}
+	.interactive:focus-visible {
+		outline: 2px solid var(--badge-tone, var(--accent));
+		outline-offset: 2px;
+	}
 	.remove {
 		display: inline-flex;
 		align-items: center;

package/dist/components/atoms/Badge.svelte.d.ts

@@ -1,13 +1,21 @@
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+import { type IconName } from './Icon.svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
 type $$ComponentProps = {
     tone?: Tone;
+    color?: string;
     as?: 'span' | 'button';
-    size?: 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md';
+    variant?: 'chip' | 'text';
     mono?: boolean;
     uppercase?: boolean;
+    numeric?: boolean;
+    truncate?: boolean;
+    maxWidth?: string;
     border?: boolean;
     active?: boolean;
+    dot?: boolean;
+    icon?: IconName;
     removable?: boolean;
     onremove?: (e: MouseEvent) => void;
     class?: string;

package/dist/components/atoms/Dot.svelte

@@ -5,7 +5,8 @@
 	//   • status → one of the semantic presets (active/stale/dead/hibernated),
 	//     each mapped to a token.
 	//   • color  → any CSS colour (or var()) for a one-off; overrides `status`.
-	// `glow` adds a soft halo in the dot's own colour. With a `label` the whole
+	// `glow` adds a soft halo in the dot's own colour; `ring` adds a dark halo so
+	// the dot stays legible over artwork. With a `label` the whole
 	// thing renders as an inline-flex row (dot + caption); without one it's a bare
 	// inline dot, so it can sit inline next to other text.
 	import Text from './Text.svelte';
@@ -24,6 +25,7 @@
 		color,
 		label,
 		glow = false,
+		ring = false,
 		class: klass = '',
 		...rest
 	}: {
@@ -31,6 +33,7 @@
 		color?: string;
 		label?: string;
 		glow?: boolean;
+		ring?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -40,11 +43,11 @@
 
 {#if label}
 	<span class="dot-row {klass}" data-tsu="Dot" {...rest}>
-		<span class="dot" class:glow style="--dot-color:{resolved}"></span>
+		<span class="dot" class:glow class:ring style="--dot-color:{resolved}"></span>
 		<Text variant="caption">{label}</Text>
 	</span>
 {:else}
-	<span class="dot {klass}" class:glow style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
+	<span class="dot {klass}" class:glow class:ring style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
 {/if}
 
 <style>
@@ -64,4 +67,12 @@
 	.glow {
 		box-shadow: 0 0 6px var(--dot-color);
 	}
+	.ring {
+		box-shadow: 0 0 0 3px rgb(0 0 0 / 0.35);
+	}
+	.ring.glow {
+		box-shadow:
+			0 0 0 3px rgb(0 0 0 / 0.35),
+			0 0 6px var(--dot-color);
+	}
 </style>

package/dist/components/atoms/Dot.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     color?: string;
     label?: string;
     glow?: boolean;
+    ring?: boolean;
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/atoms/Link.svelte

@@ -6,16 +6,38 @@
 
 	let {
 		href,
+		tone = 'accent',
+		underline = 'always',
+		align = 'start',
 		class: klass = '',
 		children,
 		...rest
-	}: { href?: string; class?: string; children?: Snippet; [key: string]: unknown } = $props();
+	}: {
+		href?: string;
+		tone?: 'accent' | 'info' | 'muted' | 'inherit';
+		underline?: 'always' | 'hover' | 'none';
+		// Text alignment of the <button> form; multi-line titles want `start`.
+		align?: 'start' | 'center';
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
 </script>
 
 {#if href}
-	<a {href} class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</a>
+	<a
+		{href}
+		class="link tone-{tone} underline-{underline} align-{align} {klass}"
+		data-tsu="Link"
+		{...rest}>{@render children?.()}</a
+	>
 {:else}
-	<button type="button" class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</button>
+	<button
+		type="button"
+		class="link tone-{tone} underline-{underline} align-{align} {klass}"
+		data-tsu="Link"
+		{...rest}>{@render children?.()}</button
+	>
 {/if}
 
 <style>
@@ -27,5 +49,25 @@
 		cursor: pointer;
 		text-decoration: underline;
 		font: inherit;
+		text-align: start;
+	}
+	.tone-info {
+		color: var(--info);
+	}
+	.tone-muted {
+		color: var(--text-muted);
+	}
+	.tone-inherit {
+		color: inherit;
+	}
+	.underline-hover,
+	.underline-none {
+		text-decoration: none;
+	}
+	.underline-hover:hover {
+		text-decoration: underline;
+	}
+	.align-center {
+		text-align: center;
 	}
 </style>

package/dist/components/atoms/Link.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     href?: string;
+    tone?: 'accent' | 'info' | 'muted' | 'inherit';
+    underline?: 'always' | 'hover' | 'none';
+    align?: 'start' | 'center';
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/Toaster.svelte

@@ -1,31 +1,70 @@
 <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.
+	// near the app root. The stack lives in a manual popover so it paints in the
+	// top layer above an open Modal <dialog>; without the Popover API the
+	// attribute is ignored and the fixed/z-index positioning applies instead.
 	import { toasts } from '../../stores/toast.svelte';
+	import Button from '../atoms/Button.svelte';
+	import Card from '../atoms/Card.svelte';
 	import Icon from '../atoms/Icon.svelte';
+
+	let el: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (!el || typeof el.showPopover !== 'function') return;
+		try {
+			if (toasts.items.length) el.showPopover();
+			else el.hidePopover();
+		} catch {}
+	});
 </script>
 
-<div class="toaster" role="status" aria-live="polite" aria-relevant="additions" data-tsu="Toaster">
+<div
+	class="toaster"
+	bind:this={el}
+	popover="manual"
+	role="status"
+	aria-live="polite"
+	aria-relevant="additions"
+	data-tsu="Toaster"
+>
 	{#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>
+		{#if t.action}
+			<Card
+				as="div"
+				surface="raised"
+				class="toast"
+				tone={t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
+			>
+				<button type="button" class="toast-text" onclick={() => toasts.dismiss(t.id)}>
+					{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
+					<span class="msg">{t.message}</span>
+				</button>
+				<Button size="sm" variant="ghost" loading={t.pending} onclick={() => toasts.act(t.id)}>
+					{t.action.label}
+				</Button>
+			</Card>
+		{:else}
+			<Card
+				as="button"
+				surface="raised"
+				class="toast"
+				tone={t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
+				type="button"
+				onclick={() => toasts.dismiss(t.id)}
+			>
+				{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
+				<span class="msg">{t.message}</span>
+				<Icon name="x" />
+			</Card>
+		{/if}
 	{/each}
 </div>
 
 <style>
 	.toaster {
 		position: fixed;
+		inset: auto;
 		left: 50%;
 		transform: translateX(-50%);
 		bottom: calc(var(--safe-bottom) + var(--sp-4));
@@ -34,36 +73,53 @@
 		flex-direction: column;
 		gap: var(--sp-2);
 		width: calc(100% - var(--sp-8));
-		max-width: 30rem;
+		max-width: var(--toast-max-width, 28rem);
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		overflow: visible;
 		pointer-events: none;
 	}
-	.toast {
+	.toaster:not(:popover-open) {
+		display: none;
+	}
+	.toaster :global(.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);
+	.toaster :global(.toast.card-ok) {
 		color: var(--ok);
 	}
-	.toast.err {
-		border-color: var(--danger);
+	.toaster :global(.toast.card-danger) {
 		color: var(--danger);
 	}
+	.toaster :global(.toast.card-info) {
+		color: var(--info);
+	}
+	.toast-text {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+	}
+	.msg {
+		flex: 1;
+	}
 	@keyframes toast-in {
 		from {
 			transform: translateY(8px);

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

@@ -1,18 +1,3 @@
-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>;
+declare const Toaster: import("svelte").Component<Record<string, never>, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
 export default Toaster;

package/dist/index.d.ts

@@ -58,6 +58,6 @@ export { default as FilterSearchBar } from './components/organisms/FilterSearchB
 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, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
-export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';
+export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { type TruncateMode, type TruncateOptions, truncate } from './truncate';

package/dist/index.js

@@ -71,6 +71,6 @@ export { activeToken, compilePredicate, defaultOperator, filters, findField, fre
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';
-export { toasts } from './stores/toast.svelte';
+export { toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { truncate } from './truncate';

package/dist/stores/toast.svelte.d.ts

@@ -1,19 +1,37 @@
-export type ToastTone = 'neutral' | 'ok' | 'error';
+export type ToastTone = 'neutral' | 'ok' | 'error' | 'info';
+/** Accepted by show(); 'danger' is normalised to 'error'. */
+export type ToastToneInput = ToastTone | 'danger';
+export interface ToastAction {
+    label: string;
+    run: () => void | Promise<void>;
+}
 export interface Toast {
     id: number;
     message: string;
     tone: ToastTone;
     duration: number;
+    action?: ToastAction;
+    /** True while `action.run` is in flight; the Toaster shows the button loading. */
+    pending: boolean;
+}
+export interface ToastOptions {
+    tone?: ToastToneInput;
+    duration?: number;
+    action?: ToastAction;
 }
+export declare const TOAST_MS = 4000;
+/** Toasts with an action linger longer: the action is only reachable while visible. */
+export declare const ACTION_TOAST_MS = 7000;
 declare class Toasts {
+    #private;
     items: Toast[];
-    show(message: string, opts?: {
-        tone?: ToastTone;
-        duration?: number;
-    }): number;
-    ok(message: string, duration?: number): number;
-    error(message: string, duration?: number): number;
+    show(message: string, opts?: ToastOptions): number;
+    ok(message: string, duration?: number, action?: ToastAction): number;
+    error(message: string, duration?: number, action?: ToastAction): number;
+    info(message: string, duration?: number, action?: ToastAction): number;
     dismiss(id: number): void;
+    /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
+    act(id: number): Promise<void>;
 }
 export declare const toasts: Toasts;
 export {};

package/dist/stores/toast.svelte.js

@@ -1,26 +1,60 @@
 // Toast manager. A tiny reactive queue; mount one <Toaster /> at the app root
-// and call toasts.show()/ok()/error() from anywhere. Auto-dismisses after
+// and call toasts.show()/ok()/error()/info() from anywhere. Auto-dismisses after
 // `duration` ms (0 = sticky). The Toaster renders an aria-live region so screen
 // readers announce messages.
+export const TOAST_MS = 4000;
+/** Toasts with an action linger longer: the action is only reachable while visible. */
+export const ACTION_TOAST_MS = 7000;
 let seq = 0;
 class Toasts {
     items = $state([]);
+    #timers = new Map();
     show(message, opts = {}) {
         const id = ++seq;
-        const duration = opts.duration ?? 4000;
-        this.items = [...this.items, { id, message, tone: opts.tone ?? 'neutral', duration }];
+        const duration = opts.duration ?? (opts.action ? ACTION_TOAST_MS : TOAST_MS);
+        const tone = opts.tone === 'danger' ? 'error' : (opts.tone ?? 'neutral');
+        this.items = [
+            ...this.items,
+            { id, message, tone, duration, action: opts.action, pending: false },
+        ];
         if (duration > 0)
-            setTimeout(() => this.dismiss(id), duration);
+            this.#timers.set(id, setTimeout(() => this.dismiss(id), duration));
         return id;
     }
-    ok(message, duration) {
-        return this.show(message, { tone: 'ok', duration });
+    ok(message, duration, action) {
+        return this.show(message, { tone: 'ok', duration, action });
     }
-    error(message, duration) {
-        return this.show(message, { tone: 'error', duration });
+    error(message, duration, action) {
+        return this.show(message, { tone: 'error', duration, action });
+    }
+    info(message, duration, action) {
+        return this.show(message, { tone: 'info', duration, action });
     }
     dismiss(id) {
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.#timers.delete(id);
         this.items = this.items.filter((t) => t.id !== id);
     }
+    /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
+    async act(id) {
+        const t = this.items.find((x) => x.id === id);
+        if (!t?.action || t.pending)
+            return;
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.items = this.items.map((x) => (x.id === id ? { ...x, pending: true } : x));
+        try {
+            await t.action.run();
+        }
+        catch (e) {
+            this.error(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            this.dismiss(id);
+        }
+    }
 }
 export const toasts = new Toasts();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.20.0",
+  "version": "0.21.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",