@joewinke/jatui 0.41.1 → 0.43.0

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

@@ -138,6 +138,23 @@ export { default as TimeSlotPicker } from './components/TimeSlotPicker.svelte';
 export { default as CalendarPicker } from './components/CalendarPicker.svelte';
 export { default as AvailabilityModal } from './components/AvailabilityModal.svelte';
 export { default as BookingForm } from './components/BookingForm.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as BookingScheduler } from './components/BookingScheduler.svelte';
+export { default as EventCalendar } from './components/EventCalendar.svelte';
+export { default as CalendarMonthGrid } from './components/calendar/MonthGrid.svelte';
+export type { MonthGridDay, MonthGridProps } from './components/calendar/MonthGrid.svelte';
+export { createCalendarGrid } from './components/calendar/createCalendarGrid';
+export type { CalendarGrid, CalendarGridOptions } from './components/calendar/createCalendarGrid';
+export { buildMonthMatrix, nextFocusDate, weekStartForLocale, resolveWeekStart, weekdayLabels, toIsoDate, parseIsoDate, makeIsDisabled, defaultRangePresets, defaultRangePresetsWithAll, resolvePreset, matchPreset, rangeDayCount, formatRangeLabel, datePlaceholder, formatTypedDate, parseTypedDate } from './components/calendar/calendarGrid';
+export type { Weekday, DateRange, IsoDateRange, RangePreset, MonthCell } from './components/calendar/calendarGrid';
+export { formatSlotTime, groupSlotsByDayPart, nextSlotIndex, localeHourCycle, localTimeZone, commonTimeZones, timeZoneOffsetLabel } from './components/calendar/timeSlots';
+export type { HourCycle, DayPart, SlotGroup } from './components/calendar/timeSlots';
+export { packWeek, computeVisibility, eventDayRange } from './components/calendar/monthPacking';
+export type { PackableEvent, MonthDay, WeekSegment, PackedWeek, WeekVisibility } from './components/calendar/monthPacking';
+export { layoutDay, eventInterval } from './components/calendar/dayOverlap';
+export type { DayPlacement, DayOverlapOptions } from './components/calendar/dayOverlap';
+export { eventColorStyle, visibleRange, viewTitle, stepDate, agendaDays } from './components/calendar/eventCalendar';
+export type { CalendarEventItem, EventColor, EventCalendarView } from './components/calendar/eventCalendar';
 export type { ShortenedLink } from './components/LinkShortener.svelte';
 export type { SearchDropdownOption, SearchDropdownGroup } from './components/SearchDropdown.svelte';
 export type { ChipSuggestion, SuggestionGroup, ChipInfo } from './components/ChipInput.svelte';
@@ -235,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';
@@ -285,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';

package/dist/index.js

@@ -176,6 +176,17 @@ export { default as TimeSlotPicker } from './components/TimeSlotPicker.svelte';
 export { default as CalendarPicker } from './components/CalendarPicker.svelte';
 export { default as AvailabilityModal } from './components/AvailabilityModal.svelte';
 export { default as BookingForm } from './components/BookingForm.svelte';
+// Dates + calendar (BoardUI wave 4, jatui-lfxyy). Every helper is also on 'jatui/calendar'.
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as BookingScheduler } from './components/BookingScheduler.svelte';
+export { default as EventCalendar } from './components/EventCalendar.svelte';
+export { default as CalendarMonthGrid } from './components/calendar/MonthGrid.svelte';
+export { createCalendarGrid } from './components/calendar/createCalendarGrid';
+export { buildMonthMatrix, nextFocusDate, weekStartForLocale, resolveWeekStart, weekdayLabels, toIsoDate, parseIsoDate, makeIsDisabled, defaultRangePresets, defaultRangePresetsWithAll, resolvePreset, matchPreset, rangeDayCount, formatRangeLabel, datePlaceholder, formatTypedDate, parseTypedDate } from './components/calendar/calendarGrid';
+export { formatSlotTime, groupSlotsByDayPart, nextSlotIndex, localeHourCycle, localTimeZone, commonTimeZones, timeZoneOffsetLabel } from './components/calendar/timeSlots';
+export { packWeek, computeVisibility, eventDayRange } from './components/calendar/monthPacking';
+export { layoutDay, eventInterval } from './components/calendar/dayOverlap';
+export { eventColorStyle, visibleRange, viewTitle, stepDate, agendaDays } from './components/calendar/eventCalendar';
 export { DAYS_OF_WEEK, DAYS_SHORT, LOCATION_LABELS, LOCATION_ICONS } from './types/booking';
 // Utilities — date formatting
 export { normalizeTimestamp, parseTimestamp, formatRelativeTime, formatFullDate, formatShortDate, formatLastActivity, formatDate, getTimeSinceMs, getTimeSinceMinutes, isWithinMinutes, formatDateTime, taskAge, pacingColor, formatPacingDuration, } from './utils/dateFormatters';
@@ -283,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';
@@ -340,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';

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);

package/dist/styles/motion.css

@@ -223,3 +223,75 @@
 		opacity: 1;
 	}
 }
+
+/*
+ * One-shot utility animations (BoardUI wave 5, jatui-bns3w). All on the
+ * tokens above, so they scale with data-motion and collapse under reduced
+ * motion. Ideas after BoardUI's globals.css (MIT © 2026 Mertcan Dundar
+ * Esmergul).
+ *
+ *   .jatui-check-draw   — an SVG stroke with pathLength="1" draws itself on
+ *                         (the CheckGlyph tick carries its own copy).
+ *   .jatui-row-exit     — a list row slides aside and collapses its height;
+ *                         remove it on `animationend` (bulk-delete flows).
+ *   .jatui-label-out / .jatui-label-in — a button label swap: old text
+ *                         lifts out, new text rises in.
+ */
+.jatui-check-draw {
+	stroke-dasharray: 1;
+	stroke-dashoffset: 1;
+	animation: jatui-check-draw var(--motion-fast) var(--motion-glide) forwards;
+}
+
+@keyframes jatui-check-draw {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+
+.jatui-row-exit {
+	overflow: hidden;
+	animation: jatui-row-exit var(--motion-move) var(--motion-standard) forwards;
+}
+
+@keyframes jatui-row-exit {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+		max-height: var(--jatui-row-h, 4rem);
+	}
+	50% {
+		opacity: 0;
+		transform: translateX(calc(var(--motion-travel) * 1.5));
+		max-height: var(--jatui-row-h, 4rem);
+	}
+	100% {
+		opacity: 0;
+		transform: translateX(calc(var(--motion-travel) * 1.5));
+		max-height: 0;
+		padding-block: 0;
+		margin-block: 0;
+	}
+}
+
+.jatui-label-out {
+	animation: jatui-label-out var(--motion-fast) var(--motion-glide) forwards;
+}
+
+.jatui-label-in {
+	animation: jatui-label-in var(--motion-enter) var(--motion-glide) both;
+}
+
+@keyframes jatui-label-out {
+	to {
+		opacity: 0;
+		transform: translateY(calc(var(--motion-travel) * -0.5));
+	}
+}
+
+@keyframes jatui-label-in {
+	from {
+		opacity: 0;
+		transform: translateY(calc(var(--motion-travel) * 0.5));
+	}
+}