@joewinke/jatui 0.42.0 → 0.44.0

package/dist/components/imageReveal.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Pure helpers behind ImageReveal: which phase the frame is in, the initials
+ * fallback, and the size / shape / tone lookups. No DOM, so
+ * tests/unit/imageReveal.test.ts runs them in node.
+ *
+ * Clean-room (jatui-vui9q): BoardUI's "AI Image Generation" item is in the
+ * Pro tier, so no BoardUI source was read or copied.
+ */
+/**
+ * generating — no src yet (`null`/`undefined`): the ripple runs.
+ * loading    — a src arrived but the bytes haven't decoded: the ripple keeps
+ *              running, the image waits underneath at blur + opacity 0.
+ * revealed   — the image loaded: blur-to-sharp, the ripple fades out.
+ * fallback   — `src === ''` or the image failed: calm initials / empty glyph.
+ */
+export type ImageRevealPhase = 'generating' | 'loading' | 'revealed' | 'fallback';
+export type ImageRevealShape = 'square' | 'rounded' | 'circle';
+export type ImageRevealSizeName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fill';
+/** DaisyUI semantic colour names accepted as a `tone`. */
+export type ImageRevealToneName = 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export interface ImageRevealState {
+    src: string | null | undefined;
+    /** The src whose load event fired (null if none has). */
+    loadedSrc: string | null;
+    /** The src whose error event fired (null if none has). */
+    failedSrc: string | null;
+}
+/**
+ * Phase from the current src plus what the browser reported for it. Load and
+ * error are keyed by src, so a new src starts over at `loading` without the
+ * component having to reset flags.
+ */
+export declare function imageRevealPhase({ src, loadedSrc, failedSrc }: ImageRevealState): ImageRevealPhase;
+/** True while the frame is still waiting for something to show. */
+export declare function imageRevealBusy(phase: ImageRevealPhase): boolean;
+/**
+ * Up to two letters from the alt text: "Acme Corp" → "AC", "acme" → "A",
+ * "the-north-face" → "TN". Symbols and digits-only words are skipped, so a
+ * logo alt like "Acme logo" gives "AL" — callers who want "A" pass
+ * `initials` explicitly.
+ */
+export declare function imageRevealInitials(alt: string | null | undefined): string;
+export declare const IMAGE_REVEAL_SIZES: Record<Exclude<ImageRevealSizeName, 'fill'>, number>;
+/**
+ * A CSS length for the frame's width. Named sizes and numbers are px; any
+ * other string (`'10rem'`, `'50%'`) passes through; `'fill'` is 100%.
+ */
+export declare function imageRevealSize(size: ImageRevealSizeName | number | (string & {})): string;
+export declare const IMAGE_REVEAL_RADIUS: Record<ImageRevealShape, string>;
+/** A semantic name → its DaisyUI variable; any other string is a CSS colour. */
+export declare function imageRevealTone(tone: ImageRevealToneName | (string & {})): string;

package/dist/components/imageReveal.js

@@ -0,0 +1,83 @@
+/**
+ * Pure helpers behind ImageReveal: which phase the frame is in, the initials
+ * fallback, and the size / shape / tone lookups. No DOM, so
+ * tests/unit/imageReveal.test.ts runs them in node.
+ *
+ * Clean-room (jatui-vui9q): BoardUI's "AI Image Generation" item is in the
+ * Pro tier, so no BoardUI source was read or copied.
+ */
+/**
+ * Phase from the current src plus what the browser reported for it. Load and
+ * error are keyed by src, so a new src starts over at `loading` without the
+ * component having to reset flags.
+ */
+export function imageRevealPhase({ src, loadedSrc, failedSrc }) {
+    if (src == null)
+        return 'generating';
+    if (src.trim() === '' || failedSrc === src)
+        return 'fallback';
+    if (loadedSrc === src)
+        return 'revealed';
+    return 'loading';
+}
+/** True while the frame is still waiting for something to show. */
+export function imageRevealBusy(phase) {
+    return phase === 'generating' || phase === 'loading';
+}
+/**
+ * Up to two letters from the alt text: "Acme Corp" → "AC", "acme" → "A",
+ * "the-north-face" → "TN". Symbols and digits-only words are skipped, so a
+ * logo alt like "Acme logo" gives "AL" — callers who want "A" pass
+ * `initials` explicitly.
+ */
+export function imageRevealInitials(alt) {
+    if (!alt)
+        return '';
+    const words = alt
+        .split(/[\s\-_./]+/)
+        .map((w) => w.match(/\p{L}/u)?.[0] ?? '')
+        .filter(Boolean);
+    return words
+        .slice(0, 2)
+        .join('')
+        .toLocaleUpperCase();
+}
+export const IMAGE_REVEAL_SIZES = {
+    xs: 32,
+    sm: 48,
+    md: 64,
+    lg: 96,
+    xl: 128
+};
+/**
+ * A CSS length for the frame's width. Named sizes and numbers are px; any
+ * other string (`'10rem'`, `'50%'`) passes through; `'fill'` is 100%.
+ */
+export function imageRevealSize(size) {
+    if (typeof size === 'number')
+        return `${size}px`;
+    if (size === 'fill')
+        return '100%';
+    if (size in IMAGE_REVEAL_SIZES)
+        return `${IMAGE_REVEAL_SIZES[size]}px`;
+    return size;
+}
+export const IMAGE_REVEAL_RADIUS = {
+    square: '0',
+    rounded: 'var(--jatui-radius-box, var(--radius-box, 0.5rem))',
+    circle: '9999px'
+};
+const TONE_NAMES = new Set([
+    'primary',
+    'secondary',
+    'accent',
+    'neutral',
+    'info',
+    'success',
+    'warning',
+    'error'
+]);
+/** A semantic name → its DaisyUI variable; any other string is a CSS colour. */
+export function imageRevealTone(tone) {
+    return TONE_NAMES.has(tone) ? `var(--color-${tone})` : tone;
+}

package/dist/components/toast/ToastHost.svelte

@@ -1,21 +1,74 @@
+<script module lang="ts">
+	export type ToastPosition =
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'bottom-center'
+		| 'top-end'
+		| 'top-start'
+		| 'top-center';
+</script>
+
 <script lang="ts">
 	import { getToasts } from '../../stores/toast.js';
 	import ToastItem from './ToastItem.svelte';
 
+	interface Props {
+		/**
+		 * Viewport corner/edge. Logical: `end` is the right edge in LTR and the
+		 * left edge in RTL. Default 'bottom-end' (the original bottom-right).
+		 */
+		position?: ToastPosition;
+	}
+
+	let { position = 'bottom-end' }: Props = $props();
+
 	const toasts = $derived(getToasts());
+	const edge = $derived<'top' | 'bottom'>(position.startsWith('top') ? 'top' : 'bottom');
 </script>
 
 <!--
 	Mount once in your app root (e.g. +layout.svelte).
-	Fixed bottom-right, pointer-events only on the toast list.
+	Fixed to a viewport corner, pointer-events only on the toast list.
+	Newest toast sits on top of the stack; at top positions that puts it
+	nearest the edge, so the stack reads newest-first downward.
 -->
 <div
 	aria-label="Notifications"
-	class="toast-host pointer-events-none fixed right-4 bottom-4 z-[9999] flex flex-col-reverse items-end gap-2 w-80 max-w-[calc(100vw-2rem)]"
+	class="toast-host toast-host--{position} pointer-events-none fixed z-[9999] flex flex-col-reverse gap-2 w-80 max-w-[calc(100vw-2rem)]"
+	data-position={position}
 >
 	<ul class="contents">
 		{#each toasts as toast, i (toast.id)}
-			<ToastItem {toast} index={i} total={toasts.length} />
+			<ToastItem {toast} index={i} total={toasts.length} {edge} />
 		{/each}
 	</ul>
 </div>
+
+<style>
+	.toast-host--bottom-end,
+	.toast-host--bottom-start,
+	.toast-host--bottom-center {
+		bottom: 1rem;
+	}
+	.toast-host--top-end,
+	.toast-host--top-start,
+	.toast-host--top-center {
+		top: 1rem;
+	}
+	.toast-host--bottom-end,
+	.toast-host--top-end {
+		inset-inline-end: 1rem;
+		align-items: flex-end;
+	}
+	.toast-host--bottom-start,
+	.toast-host--top-start {
+		inset-inline-start: 1rem;
+		align-items: flex-start;
+	}
+	.toast-host--bottom-center,
+	.toast-host--top-center {
+		inset-inline: 0;
+		margin-inline: auto;
+		align-items: center;
+	}
+</style>

package/dist/components/toast/ToastHost.svelte.d.ts

@@ -1,3 +1,11 @@
-declare const ToastHost: import("svelte").Component<Record<string, never>, {}, "">;
+export type ToastPosition = 'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center';
+interface Props {
+    /**
+     * Viewport corner/edge. Logical: `end` is the right edge in LTR and the
+     * left edge in RTL. Default 'bottom-end' (the original bottom-right).
+     */
+    position?: ToastPosition;
+}
+declare const ToastHost: import("svelte").Component<Props, {}, "">;
 type ToastHost = ReturnType<typeof ToastHost>;
 export default ToastHost;

package/dist/components/toast/ToastItem.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
 	import { dismissToast, type Toast } from '../../stores/toast.js';
+	import CloseButton from '../CloseButton.svelte';
 
 	type Props = {
 		toast: Toast;
 		index: number;
 		total: number;
+		/** Which viewport edge the host is pinned to — sets the entrance direction. */
+		edge?: 'top' | 'bottom';
 	};
 
-	let { toast, index, total }: Props = $props();
+	let { toast, index, total, edge = 'bottom' }: Props = $props();
+	const enterSign = $derived(edge === 'top' ? -1 : 1);
 
 	// Stack compression: older toasts (lower index) scale down and fade behind newer ones
 	// index 0 = oldest (back), index total-1 = newest (front)
@@ -172,10 +176,10 @@ const detailsId = $derived(`toast-details-${toast.id}`);
 		isDragging
 			? `translateX(${dragX}px) rotate(${dragX * 0.02}deg)`
 			: exiting
-				? `translateY(20px) scale(0.9)`
+				? `translateY(${20 * enterSign}px) scale(0.9)`
 				: mounted
 					? `translateX(0) rotate(0deg)`
-					: `translateY(40px) scale(0.92)`
+					: `translateY(${40 * enterSign}px) scale(0.92)`
 	);
 
 	const itemOpacity = $derived(
@@ -192,13 +196,25 @@ const detailsId = $derived(`toast-details-${toast.id}`);
 		isDragging
 			? 'none'
 			: exiting
-				? 'transform var(--motion-enter) var(--motion-glide), opacity var(--motion-enter) var(--motion-glide)'
-				: 'transform var(--motion-enter) var(--motion-spring), opacity var(--motion-fast) var(--motion-glide)'
+				? 'transform var(--motion-enter) var(--motion-glide), opacity var(--motion-enter) var(--motion-glide), filter var(--motion-enter) var(--motion-glide)'
+				: 'transform var(--motion-enter) var(--motion-spring), opacity var(--motion-fast) var(--motion-glide), filter var(--motion-enter) var(--motion-glide)'
+	);
+
+	// Blur on enter/exit (BoardUI notification idea). The class only marks the
+	// hidden state; CSS drops the blur under data-motion="calm" and reduced motion.
+	const veiled = $derived(!isDragging && (exiting || !mounted));
+
+	const titleId = $derived(`toast-title-${toast.id}`);
+	// Legacy toasts from an older store shape may lack the normalised list.
+	const actionList = $derived(
+		toast.actions ?? (toast.action ? [{ ...toast.action, variant: 'ghost' as const }] : [])
 	);
 </script>
 
 <li
 	class="toast-item pointer-events-auto w-full"
+	class:toast-veiled={veiled}
+	aria-labelledby={toast.title ? titleId : undefined}
 	style:transform={itemTransform}
 	style:opacity={itemOpacity}
 	style:transition={dragTransition}
@@ -219,6 +235,27 @@ const detailsId = $derived(`toast-details-${toast.id}`);
 		style:transition="transform var(--motion-move) var(--motion-glide), opacity var(--motion-move) var(--motion-glide)"
 	>
 		<!-- Undo countdown bar -->
+		{#if toast.showProgress && !toast.onUndo}
+			<span
+				class="toast-progress absolute bottom-0 left-0 h-0.5 w-full origin-left bg-current opacity-40"
+				style:animation-duration="{toast.durationMs}ms"
+				style:animation-play-state={paused ? 'paused' : 'running'}
+				aria-hidden="true"
+			></span>
+		{/if}
+
+		{#if toast.avatar}
+			<img
+				src={toast.avatar.src}
+				alt={toast.avatar.alt}
+				class="toast-avatar size-8 shrink-0 self-start rounded-full object-cover"
+			/>
+		{:else if toast.icon}
+			<span class="toast-icon flex size-5 shrink-0 items-center justify-center self-start" aria-hidden="true">
+				{#if typeof toast.icon === 'string'}{toast.icon}{:else}{@render toast.icon()}{/if}
+			</span>
+		{/if}
+
 		{#if toast.onUndo && !undoDone}
 			<span
 				class="toast-progress absolute bottom-0 left-0 h-0.5 w-full origin-left bg-current opacity-40"
@@ -228,7 +265,10 @@ const detailsId = $derived(`toast-details-${toast.id}`);
 		{/if}
 
 		<div class="flex-1 min-w-0">
-			<span class="text-sm">{toast.message}</span>
+			{#if toast.title}
+				<p id={titleId} class="toast-title text-sm font-semibold">{toast.title}</p>
+			{/if}
+			<span class="text-sm" class:opacity-80={!!toast.title}>{toast.message}</span>
 
 			{#if toast.details}
 				<button
@@ -270,26 +310,26 @@ const detailsId = $derived(`toast-details-${toast.id}`);
 			>
 				Undo
 			</button>
-		{:else if toast.action}
-			<button
-				type="button"
-				class="btn btn-ghost btn-xs font-semibold"
-				onclick={() => { toast.action!.onClick(); triggerDismiss(); }}
-			>
-				{toast.action.label}
-			</button>
+		{:else if actionList.length > 0}
+			<div class="toast-actions flex shrink-0 flex-wrap items-center gap-1">
+				{#each actionList as act, ai (ai)}
+					<button
+						type="button"
+						class="btn btn-xs font-semibold {act.variant === 'primary' ? 'btn-primary' : 'btn-ghost'}"
+						onclick={() => { act.onClick(); triggerDismiss(); }}
+					>
+						{act.label}
+					</button>
+				{/each}
+			</div>
 		{/if}
 
-		<button
-			type="button"
-			class="btn btn-ghost btn-xs btn-square"
-			aria-label="Dismiss notification"
+		<CloseButton
+			label="Dismiss notification"
+			size="xs"
+			shape="square"
 			onclick={triggerDismiss}
-		>
-			<svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-				<path d="M18 6L6 18M6 6l12 12"/>
-			</svg>
-		</button>
+		/>
 	</div>
 </li>
 
@@ -300,6 +340,14 @@ const detailsId = $derived(`toast-details-${toast.id}`);
 		user-select: none;
 	}
 
+	.toast-item.toast-veiled {
+		filter: blur(4px);
+	}
+
+	:global([data-motion='calm']) .toast-item.toast-veiled {
+		filter: none;
+	}
+
 	.toast-progress {
 		animation-name: drain;
 		animation-timing-function: linear;
@@ -328,5 +376,9 @@ const detailsId = $derived(`toast-details-${toast.id}`);
 		.toast-item > div {
 			transition: none !important;
 		}
+
+		.toast-item.toast-veiled {
+			filter: none;
+		}
 	}
 </style>

package/dist/components/toast/ToastItem.svelte.d.ts

@@ -3,6 +3,8 @@ type Props = {
     toast: Toast;
     index: number;
     total: number;
+    /** Which viewport edge the host is pinned to — sets the entrance direction. */
+    edge?: 'top' | 'bottom';
 };
 declare const ToastItem: import("svelte").Component<Props, {}, "">;
 type ToastItem = ReturnType<typeof ToastItem>;

package/dist/components/uploadProgress.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Pure math behind the upload-progress strokes on FileDropzone (perimeter
+ * border) and ThumbnailGrid (per-tile ring). DOM-free so it is unit-testable
+ * under node:test (tests/unit/uploadProgress.test.ts).
+ */
+/** Clamp a 0–100 progress value; `null`/`undefined`/NaN mean "no progress shown". */
+export declare function clampProgress(value: number | null | undefined): number | null;
+/** True while an upload is in flight (a progress value below 100). */
+export declare function isInFlight(value: number | null | undefined): boolean;
+/** Whole-number percent for the badge / aria-valuenow. Floors so 99.6 never reads "100". */
+export declare function progressPercent(value: number | null | undefined): number;
+/**
+ * stroke-dashoffset for a path drawn with `pathLength={length}` and
+ * `stroke-dasharray={length}`: 0 = fully drawn, `length` = empty.
+ */
+export declare function dashOffset(value: number | null | undefined, length?: number): number;
+export interface PerimeterRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx: number;
+}
+/**
+ * Geometry for an SVG `<rect>` whose stroke sits exactly on a CSS border of
+ * width `stroke` around a `width`×`height` border-box with `radius` corners.
+ * The stroke is centred on the path, so the rect is inset by half a stroke and
+ * the corner radius shrinks by the same amount (never below 0).
+ */
+export declare function perimeterRect(width: number, height: number, stroke?: number, radius?: number): PerimeterRect;

package/dist/components/uploadProgress.js

@@ -0,0 +1,47 @@
+/**
+ * Pure math behind the upload-progress strokes on FileDropzone (perimeter
+ * border) and ThumbnailGrid (per-tile ring). DOM-free so it is unit-testable
+ * under node:test (tests/unit/uploadProgress.test.ts).
+ */
+/** Clamp a 0–100 progress value; `null`/`undefined`/NaN mean "no progress shown". */
+export function clampProgress(value) {
+    if (value == null || Number.isNaN(value))
+        return null;
+    return Math.min(100, Math.max(0, value));
+}
+/** True while an upload is in flight (a progress value below 100). */
+export function isInFlight(value) {
+    const p = clampProgress(value);
+    return p !== null && p < 100;
+}
+/** Whole-number percent for the badge / aria-valuenow. Floors so 99.6 never reads "100". */
+export function progressPercent(value) {
+    const p = clampProgress(value);
+    if (p === null)
+        return 0;
+    return p >= 100 ? 100 : Math.floor(p);
+}
+/**
+ * stroke-dashoffset for a path drawn with `pathLength={length}` and
+ * `stroke-dasharray={length}`: 0 = fully drawn, `length` = empty.
+ */
+export function dashOffset(value, length = 100) {
+    const p = clampProgress(value) ?? 0;
+    return length - (p / 100) * length;
+}
+/**
+ * Geometry for an SVG `<rect>` whose stroke sits exactly on a CSS border of
+ * width `stroke` around a `width`×`height` border-box with `radius` corners.
+ * The stroke is centred on the path, so the rect is inset by half a stroke and
+ * the corner radius shrinks by the same amount (never below 0).
+ */
+export function perimeterRect(width, height, stroke = 2, radius = 8) {
+    const inset = stroke / 2;
+    return {
+        x: inset,
+        y: inset,
+        width: Math.max(0, width - stroke),
+        height: Math.max(0, height - stroke),
+        rx: Math.max(0, radius - inset)
+    };
+}

package/dist/index.d.ts

@@ -252,8 +252,9 @@ export { copyText, readClipboardText } from './utils/clipboard';
 export { splitText } from './utils/splitText';
 export type { SplitBy, SplitTextOptions, SplitTextResult } from './utils/splitText';
 export { default as ToastHost } from './components/toast/ToastHost.svelte';
-export { showToast, dismissToast, getToasts } from './stores/toast';
-export type { Toast, ToastType, ToastOptions, DismissHandle } from './stores/toast';
+export { showToast, dismissToast, getToasts, normalizeToastActions } from './stores/toast';
+export type { Toast, ToastType, ToastOptions, DismissHandle, ToastAction, ToastAvatar } from './stores/toast';
+export type { ToastPosition } from './components/toast/ToastHost.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as ProgressBar } from './components/progress/ProgressBar.svelte';
 export { default as ProgressRing } from './components/progress/ProgressRing.svelte';
@@ -302,6 +303,15 @@ export { default as SectionNav } from './components/basic/SectionNav.svelte';
 export { computeActiveSection, DEFAULT_ACTIVATION_RATIO } from './components/basic/sectionNavSpy';
 export type { SectionRect, SpyViewport, SpyScrollState } from './components/basic/sectionNavSpy';
 export { default as Slider } from './components/basic/Slider.svelte';
+export { snapToStep, moveThumb, normalizePair, percentOf, bubbleLeft } from './components/basic/sliderMath';
+export { default as CheckGlyph } from './components/form-cards/CheckGlyph.svelte';
+export { default as ChoiceCard } from './components/form-cards/ChoiceCard.svelte';
+export { default as CheckboxCard } from './components/form-cards/CheckboxCard.svelte';
+export { default as SwitchCard } from './components/form-cards/SwitchCard.svelte';
+export { default as FieldLabel } from './components/field/FieldLabel.svelte';
+export { default as FieldHint } from './components/field/FieldHint.svelte';
+export { dismissOutside, createDismissOutside, isInsidePath } from './actions/dismissOutside';
+export type { DismissOutsideOptions, DismissOutsideController, DismissReason } from './actions/dismissOutside';
 export { default as Pagination } from './components/basic/Pagination.svelte';
 export { MAX_UNDO_DEPTH, createHistory, pushState, beginChange, endChange, untracked, undo, redo, clearHistory } from './history';
 export type { History } from './history';
@@ -390,3 +400,6 @@ export { default as SettingsSection } from './components/settings/SettingsSectio
 export { default as SettingsRow } from './components/settings/SettingsRow.svelte';
 export type { SettingsRowContext } from './components/settings/SettingsRow.svelte';
 export * from './data/grid/index';
+export { default as ImageReveal } from './components/ImageReveal.svelte';
+export { imageRevealPhase, imageRevealBusy, imageRevealInitials, imageRevealSize, imageRevealTone, IMAGE_REVEAL_SIZES, IMAGE_REVEAL_RADIUS } from './components/imageReveal';
+export type { ImageRevealPhase, ImageRevealShape, ImageRevealSizeName, ImageRevealToneName, ImageRevealState } from './components/imageReveal';

package/dist/index.js

@@ -294,7 +294,7 @@ export { copyText, readClipboardText } from './utils/clipboard';
 export { splitText } from './utils/splitText';
 // Toast system
 export { default as ToastHost } from './components/toast/ToastHost.svelte';
-export { showToast, dismissToast, getToasts } from './stores/toast';
+export { showToast, dismissToast, getToasts, normalizeToastActions } from './stores/toast';
 // Loading & progress family
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as ProgressBar } from './components/progress/ProgressBar.svelte';
@@ -351,6 +351,16 @@ export { default as Separator } from './components/basic/Separator.svelte';
 export { default as SectionNav } from './components/basic/SectionNav.svelte';
 export { computeActiveSection, DEFAULT_ACTIVATION_RATIO } from './components/basic/sectionNavSpy';
 export { default as Slider } from './components/basic/Slider.svelte';
+export { snapToStep, moveThumb, normalizePair, percentOf, bubbleLeft } from './components/basic/sliderMath';
+// BoardUI wave 5 — form polish (jatui-bns3w): choice cards + animated tick,
+// shared field label/hint parts, dismissOutside.
+export { default as CheckGlyph } from './components/form-cards/CheckGlyph.svelte';
+export { default as ChoiceCard } from './components/form-cards/ChoiceCard.svelte';
+export { default as CheckboxCard } from './components/form-cards/CheckboxCard.svelte';
+export { default as SwitchCard } from './components/form-cards/SwitchCard.svelte';
+export { default as FieldLabel } from './components/field/FieldLabel.svelte';
+export { default as FieldHint } from './components/field/FieldHint.svelte';
+export { dismissOutside, createDismissOutside, isInsidePath } from './actions/dismissOutside';
 export { default as Pagination } from './components/basic/Pagination.svelte';
 // Snapshot undo/redo history (wayflow-core) — also importable as 'jatui/history' (jatui-00jfh).
 export { MAX_UNDO_DEPTH, createHistory, pushState, beginChange, endChange, untracked, undo, redo, clearHistory } from './history';
@@ -425,3 +435,5 @@ export { default as SegmentedControl } from './components/SegmentedControl.svelt
 export { default as SettingsSection } from './components/settings/SettingsSection.svelte';
 export { default as SettingsRow } from './components/settings/SettingsRow.svelte';
 export * from './data/grid/index';
+export { default as ImageReveal } from './components/ImageReveal.svelte';
+export { imageRevealPhase, imageRevealBusy, imageRevealInitials, imageRevealSize, imageRevealTone, IMAGE_REVEAL_SIZES, IMAGE_REVEAL_RADIUS } from './components/imageReveal';

package/dist/stores/toast.d.ts

@@ -1,36 +1,71 @@
+import type { Snippet } from 'svelte';
 export type ToastType = 'info' | 'success' | 'warning' | 'error';
+/** One button on a toast. `variant` 'primary' renders a filled button; the
+ *  default 'ghost' matches the legacy single-action button. */
+export type ToastAction = {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'ghost';
+};
+/** Image shown in place of the status icon (e.g. the sender of a message). */
+export type ToastAvatar = {
+    src: string;
+    alt: string;
+};
 export type ToastOptions = {
     type?: ToastType;
     message: string;
+    /** Bold heading above `message`. Optional — without it the toast renders
+     *  exactly as before. */
+    title?: string;
+    /** Leading icon. A string renders as a glyph/emoji; a Snippet renders as-is.
+     *  Ignored when `avatar` is set. */
+    icon?: Snippet | string;
+    /** Leading avatar image (takes precedence over `icon`). */
+    avatar?: ToastAvatar;
     /** Extended detail text (e.g. a stack trace or error chain) — rendered by
      *  ToastHost behind a collapsible "Details" toggle. Multiline-safe. */
     details?: string;
     /** Arbitrary structured context carried on the Toast for programmatic
      *  access (getToasts()); not rendered by ToastHost. */
     meta?: Record<string, unknown>;
+    /** Legacy single action. Still supported; folded into `actions`. */
     action?: {
         label: string;
         onClick: () => void;
     };
+    /** Several action buttons, rendered in order after the message. */
+    actions?: ToastAction[];
     durationMs?: number;
     onUndo?: () => void;
+    /** Show a draining countdown bar on a timed (non-undo) toast. It pauses on
+     *  hover/focus together with the timer. Default false. */
+    showProgress?: boolean;
 };
 export type Toast = {
     id: number;
     type: ToastType;
     message: string;
+    title?: string;
+    icon?: Snippet | string;
+    avatar?: ToastAvatar;
     details?: string;
     meta?: Record<string, unknown>;
     action?: {
         label: string;
         onClick: () => void;
     };
+    /** Normalised list: `actions` followed by the legacy `action` (if any). */
+    actions: ToastAction[];
     durationMs: number;
     onUndo?: () => void;
+    showProgress: boolean;
 };
 export type DismissHandle = {
     dismiss: () => void;
 };
 export declare function getToasts(): Toast[];
+/** Merge the legacy single `action` with `actions[]` (pure; exported for tests). */
+export declare function normalizeToastActions(options: Pick<ToastOptions, 'action' | 'actions'>): ToastAction[];
 export declare function showToast(options: ToastOptions): DismissHandle;
 export declare function dismissToast(id: number): void;

package/dist/stores/toast.js

@@ -8,6 +8,15 @@ export function getToasts() {
 	return $.get(toasts);
 }
 
+/** Merge the legacy single `action` with `actions[]` (pure; exported for tests). */
+export function normalizeToastActions(options) {
+	const list = [...options.actions ?? []];
+
+	if (options.action) list.push({ ...options.action, variant: 'ghost' });
+
+	return list;
+}
+
 export function showToast(options) {
 	const id = ++nextId;
 
@@ -15,11 +24,16 @@ export function showToast(options) {
 		id,
 		type: options.type ?? 'info',
 		message: options.message,
+		title: options.title,
+		icon: options.icon,
+		avatar: options.avatar,
 		details: options.details,
 		meta: options.meta,
 		action: options.action,
+		actions: normalizeToastActions(options),
 		durationMs: options.durationMs ?? 5000,
-		onUndo: options.onUndo
+		onUndo: options.onUndo,
+		showProgress: options.showProgress ?? false
 	};
 
 	$.set(toasts, [...$.get(toasts), toast], true);