@mrintel/villain-ui 0.7.9 → 0.8.0

package/dist/components/buttons/Button.svelte.d.ts

@@ -1,5 +1,5 @@
 export interface Props {
-    variant?: 'primary' | 'secondary' | 'ghost';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';

package/dist/components/buttons/IconButton.svelte.d.ts

@@ -1,5 +1,5 @@
 export interface Props {
-    variant?: 'primary' | 'secondary' | 'ghost';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     shape?: 'circle' | 'square';
     disabled?: boolean;

package/dist/components/buttons/LinkButton.svelte.d.ts

@@ -1,6 +1,6 @@
 export interface Props {
     href: string;
-    variant?: 'primary' | 'secondary' | 'ghost';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
     target?: '_self' | '_blank' | '_parent' | '_top';

package/dist/components/buttons/buttonClasses.d.ts

@@ -2,7 +2,9 @@ export declare const variantClasses: {
     primary: string;
     secondary: string;
     ghost: string;
+    danger: string;
 };
+export type ButtonVariant = keyof typeof variantClasses;
 export declare const sizeClasses: {
     sm: string;
     md: string;

package/dist/components/buttons/buttonClasses.js

@@ -1,7 +1,8 @@
 export const variantClasses = {
     primary: 'bg-[var(--color-accent)] text-[var(--color-text)] accent-glow hover-lift',
     secondary: 'bg-transparent text-[var(--color-text)] border border-[var(--color-border-strong)] hover:border-[var(--color-accent)] hover-lift',
-    ghost: 'bg-transparent text-[var(--color-text)] hover:bg-[var(--color-base-2)] hover-lift'
+    ghost: 'bg-transparent text-[var(--color-text)] hover:bg-[var(--color-base-2)] hover-lift',
+    danger: 'bg-[var(--color-error)] text-[var(--color-text)] shadow-[0_0_20px_var(--color-error-overlay-30)] hover-lift'
 };
 export const sizeClasses = {
     sm: 'px-3 py-1.5 text-sm font-medium',

package/dist/components/data/Data.types.d.ts

@@ -25,3 +25,13 @@ export interface SelectionState {
     allSelected: boolean;
     someSelected: boolean;
 }
+export interface WeekHeatmapCell {
+    /** Matrix row index (0 = Sunday, matching the SDK PeakTimesHeatmap contract) */
+    day: number;
+    /** Hour of day, 0–23 */
+    hour: number;
+    /** Raw matrix value */
+    value: number;
+    /** 0–100, after normalization */
+    intensity: number;
+}

package/dist/components/data/EmptyState.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">"use strict";
+let { title, message, icon, action, size = 'md', class: className = '' } = $props();
+const sizeClasses = {
+    sm: 'py-6 gap-2',
+    md: 'py-12 gap-3',
+    lg: 'py-20 gap-4'
+};
+const iconSizeClasses = {
+    sm: 'text-3xl',
+    md: 'text-5xl',
+    lg: 'text-6xl'
+};
+</script>
+
+<div class="flex flex-col items-center justify-center text-center {sizeClasses[size]} {className}">
+	{#if icon}
+		<div class="{iconSizeClasses[size]} text-[var(--color-text-muted)]" aria-hidden="true">
+			{@render icon()}
+		</div>
+	{/if}
+
+	{#if title}
+		<p
+			class="font-semibold"
+			style="color: var(--color-text); font-family: var(--font-heading); font-size: var(--text-h5-size);"
+		>
+			{title}
+		</p>
+	{/if}
+
+	{#if message}
+		<p class="max-w-sm text-sm" style="color: var(--color-text-muted); font-family: var(--font-body);">
+			{message}
+		</p>
+	{/if}
+
+	{#if action}
+		<div class="mt-2">
+			{@render action()}
+		</div>
+	{/if}
+</div>

package/dist/components/data/EmptyState.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    title?: string;
+    message?: string;
+    /** Icon or illustration shown above the title. */
+    icon?: import('svelte').Snippet;
+    /** Call-to-action area (typically a Button or LinkButton). */
+    action?: import('svelte').Snippet;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/data/Stat.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">"use strict";
-let { label, value, change, trend, icon, description } = $props();
+let { label, value, change, trend, icon, description, countUp = false, countUpDuration = 800, format } = $props();
 const trendColors = {
     up: 'var(--color-success)',
     down: 'var(--color-error)',
@@ -7,6 +7,34 @@ const trendColors = {
 };
 const trendColor = $derived(trend ? trendColors[trend] : 'var(--color-text-muted)');
 const showGlow = $derived(trend === 'up');
+// Count-up: animate toward the current numeric value; re-runs when value changes.
+let animatedValue = $state(0);
+$effect(() => {
+    if (!countUp || typeof value !== 'number')
+        return;
+    const target = value;
+    const reduced = typeof window !== 'undefined' &&
+        window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    if (reduced) {
+        animatedValue = target;
+        return;
+    }
+    const from = animatedValue;
+    const start = performance.now();
+    let raf = 0;
+    const tick = (t) => {
+        const p = Math.min(1, (t - start) / countUpDuration);
+        const eased = 1 - Math.pow(1 - p, 3);
+        animatedValue = Math.round(from + (target - from) * eased);
+        if (p < 1)
+            raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+});
+const displayValue = $derived(countUp && typeof value === 'number'
+    ? (format ? format(animatedValue) : animatedValue)
+    : value);
 </script>
 
 <div class="panel-spectral rounded-[var(--radius-xl)] p-6">
@@ -34,7 +62,7 @@ const showGlow = $derived(trend === 'up');
 		class:text-glow={showGlow}
 		style="color: var(--color-text); font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; line-height: 1.2;"
 	>
-		{value}
+		{displayValue}
 	</div>
 
 	<!-- Change Indicator & Description -->

package/dist/components/data/Stat.svelte.d.ts

@@ -5,6 +5,15 @@ interface Props {
     trend?: 'up' | 'down' | 'neutral';
     icon?: import('svelte').Snippet;
     description?: string;
+    /**
+     * Animate numeric values counting up from 0 on mount (easeOutCubic).
+     * Ignored for string values; disabled under prefers-reduced-motion.
+     */
+    countUp?: boolean;
+    /** Count-up duration in ms. @default 800 */
+    countUpDuration?: number;
+    /** Formatter for the displayed number while counting (e.g. toLocaleString). */
+    format?: (value: number) => string;
 }
 declare const Stat: import("svelte").Component<Props, {}, "">;
 type Stat = ReturnType<typeof Stat>;

package/dist/components/data/WeekHeatmap.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">let { matrix, rowOrder, dayLabels, hourLabel = (h) => String(h), hourLabelEvery = 1, normalize = true, highlight, markNow = false, cellLabel, onCellSelect, selected = null, ariaLabel = 'Weekly traffic heatmap', class: className = '' } = $props();
+const BASE_DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const hours = Array.from({ length: 24 }, (_, h) => h);
+// Captured once at init — a long-lived page drifts; accepted (matches hand-rolled versions).
+const now = new Date();
+const nowDay = now.getDay();
+const nowHour = now.getHours();
+const order = $derived(rowOrder ?? [0, 1, 2, 3, 4, 5, 6]);
+const labels = $derived(dayLabels ?? order.map((d) => BASE_DAY_NAMES[d] ?? String(d)));
+const rows = $derived(order.map((day, i) => ({ day, label: labels[i] ?? String(day) })));
+const maxValue = $derived(normalize ? Math.max(1, ...matrix.flat()) : 100);
+function getCell(day, hour) {
+    const value = matrix[day]?.[hour] ?? 0;
+    const intensity = Math.min(100, Math.max(0, Math.round((value / maxValue) * 100)));
+    return { day, hour, value, intensity };
+}
+function labelFor(cell, dayLabel, isNow) {
+    const text = cellLabel ? cellLabel(cell) : `${dayLabel} ${hourLabel(cell.hour)} — ${cell.value}`;
+    return isNow ? `${text} (now)` : text;
+}
+const fill = (intensity) => `color-mix(in srgb, var(--color-accent) ${intensity}%, var(--color-base-2))`;
+export {};
+</script>
+
+{#if matrix.length > 0}
+	<div class="heatmap-scroll {className}">
+		<div
+			class="heatmap-grid"
+			role={onCellSelect ? undefined : 'img'}
+			aria-label={onCellSelect ? undefined : ariaLabel}
+		>
+			<!-- Corner + hour axis -->
+			<div class="heatmap-corner" aria-hidden="true"></div>
+			{#each hours as hour (hour)}
+				<div class="heatmap-axis heatmap-hour" aria-hidden="true">
+					{hour % hourLabelEvery === 0 ? hourLabel(hour) : ''}
+				</div>
+			{/each}
+
+			<!-- Day rows -->
+			{#each rows as row (row.day)}
+				<div class="heatmap-axis heatmap-day" aria-hidden="true">{row.label}</div>
+				{#each hours as hour (hour)}
+					{@const cell = getCell(row.day, hour)}
+					{@const hl = highlight?.(row.day, hour) ?? false}
+					{@const isNow = markNow && row.day === nowDay && hour === nowHour}
+					{@const isSel = !!selected && selected.day === row.day && selected.hour === hour}
+					{@const label = labelFor(cell, row.label, isNow)}
+					{#if onCellSelect}
+						<button
+							type="button"
+							class="heatmap-cell"
+							class:is-highlight={hl}
+							class:is-ring={isNow || isSel}
+							style="background-color: {fill(cell.intensity)}"
+							aria-label={label}
+							aria-pressed={isSel}
+							onclick={() => onCellSelect(cell)}
+						></button>
+					{:else}
+						<div
+							class="heatmap-cell"
+							class:is-highlight={hl}
+							class:is-ring={isNow || isSel}
+							style="background-color: {fill(cell.intensity)}"
+							title={label}
+							aria-hidden="true"
+						></div>
+					{/if}
+				{/each}
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.heatmap-scroll {
+		overflow-x: auto;
+	}
+
+	.heatmap-grid {
+		display: grid;
+		grid-template-columns: 3rem repeat(24, 1fr);
+		gap: 2px;
+		min-width: 640px;
+	}
+
+	.heatmap-axis {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.6rem;
+		color: var(--color-text-muted);
+		text-align: center;
+	}
+
+	.heatmap-corner {
+		min-width: 3rem;
+	}
+
+	.heatmap-cell {
+		height: var(--heatmap-cell-size, 1.5rem);
+		min-width: var(--heatmap-cell-size, 1.5rem);
+		border-radius: 2px;
+		border: 0;
+		padding: 0;
+	}
+
+	button.heatmap-cell {
+		cursor: pointer;
+	}
+
+	button.heatmap-cell:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.heatmap-cell.is-highlight {
+		outline: 1.5px solid color-mix(in srgb, var(--color-text) 85%, transparent);
+		outline-offset: -1.5px;
+	}
+
+	/* Ring (now / selected) wins over the highlight outline. */
+	.heatmap-cell.is-ring {
+		box-shadow: 0 0 0 2px var(--color-accent);
+		position: relative;
+		z-index: 1;
+	}
+
+	@media (hover: hover) {
+		.heatmap-cell {
+			transition: transform 150ms var(--ease-sharp);
+		}
+
+		.heatmap-cell:hover {
+			transform: scale(1.2);
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.heatmap-cell {
+			transition: none;
+		}
+
+		.heatmap-cell:hover {
+			transform: none;
+		}
+	}</style>

package/dist/components/data/WeekHeatmap.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { WeekHeatmapCell } from './Data.types';
+interface Props {
+    /** 7 rows × 24 cols. Row index 0 = Sunday. */
+    matrix: number[][];
+    /**
+     * Display order of matrix row indices. Default Sunday-first [0..6].
+     * Monday-first = [1, 2, 3, 4, 5, 6, 0].
+     */
+    rowOrder?: number[];
+    /** Labels aligned to rowOrder. Default ['Sun','Mon',...] reordered by rowOrder. */
+    dayLabels?: string[];
+    /** Hour column label formatter. Default String(hour). E.g. h => '12a'/'6a'/'12p'/'6p'. */
+    hourLabel?: (hour: number) => string;
+    /**
+     * Show a label only every N hour columns (others render empty) to reduce axis noise.
+     * Default 1 (label every hour).
+     */
+    hourLabelEvery?: number;
+    /**
+     * true (default): scale intensity to max(matrix) — raw-count matrices.
+     * false: values are already 0–100 — percentage matrices.
+     */
+    normalize?: boolean;
+    /** Outline overlay predicate (e.g. member's frequent cells). */
+    highlight?: (day: number, hour: number) => boolean;
+    /** Ring the current weekday+hour cell. Default false. */
+    markNow?: boolean;
+    /** Tooltip/aria text per cell. Default: `${dayLabel} ${hourLabel} — ${value}`. */
+    cellLabel?: (cell: WeekHeatmapCell) => string;
+    /**
+     * When provided, cells render as <button> and clicking/tapping calls this —
+     * the consumer renders its own readout. When absent, cells are inert divs
+     * and the grid gets role="img".
+     */
+    onCellSelect?: (cell: WeekHeatmapCell) => void;
+    /** Currently selected cell, ring-highlighted. Consumer-managed (pairs with onCellSelect). */
+    selected?: {
+        day: number;
+        hour: number;
+    } | null;
+    /** Accessible name for the grid. Default "Weekly traffic heatmap". */
+    ariaLabel?: string;
+    class?: string;
+}
+declare const WeekHeatmap: import("svelte").Component<Props, {}, "">;
+type WeekHeatmap = ReturnType<typeof WeekHeatmap>;
+export default WeekHeatmap;

package/dist/components/data/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Table } from './Table.svelte';
-export type { Column as TableColumn, SortDirection, RowKey, SelectionState, CalendarEvent, ListItem } from './Data.types';
+export type { Column as TableColumn, SortDirection, RowKey, SelectionState, CalendarEvent, ListItem, WeekHeatmapCell } from './Data.types';
 export { default as Pagination } from './Pagination.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Tag } from './Tag.svelte';
@@ -9,3 +9,5 @@ export { default as CodeBlock } from './CodeBlock.svelte';
 export { default as Stat } from './Stat.svelte';
 export { default as CalendarGrid } from './CalendarGrid.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as WeekHeatmap } from './WeekHeatmap.svelte';

package/dist/components/data/index.js

@@ -8,3 +8,5 @@ export { default as CodeBlock } from './CodeBlock.svelte';
 export { default as Stat } from './Stat.svelte';
 export { default as CalendarGrid } from './CalendarGrid.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as WeekHeatmap } from './WeekHeatmap.svelte';

package/dist/components/forms/Input.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">import { createId } from '../../lib/internal/id';
 import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
-let { type = 'text', name, value = $bindable(), placeholder, disabled = false, error = false, label, id = createId('input'), autocomplete, oninput, iconBefore, iconAfter, validate, validationMessage, showValidation = true, class: className = '', } = $props();
+let { type = 'text', name, value = $bindable(), placeholder, disabled = false, error = false, label, id = createId('input'), autocomplete, oninput, iconBefore, iconAfter, validate, validationMessage, showValidation = true, revealable = false, min, max, step = 1, class: className = '', } = $props();
+// Password reveal toggle (revealable only applies to type="password")
+let revealed = $state(false);
+const showReveal = $derived(revealable && type === 'password');
+const effectiveType = $derived(showReveal && revealed ? 'text' : type);
 // Built-in validation patterns
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
@@ -65,15 +69,22 @@ $effect(() => {
 });
 const hasError = $derived(error || (validationError !== null));
 const errorClasses = $derived(hasError ? 'error-state' : '');
+function clamp(n) {
+    if (min !== undefined && n < min)
+        return min;
+    if (max !== undefined && n > max)
+        return max;
+    return n;
+}
 function increment() {
     if (disabled || type !== 'number')
         return;
-    value = Number(value || 0) + 1;
+    value = clamp(Number(value || 0) + step);
 }
 function decrement() {
     if (disabled || type !== 'number')
         return;
-    value = Number(value || 0) - 1;
+    value = clamp(Number(value || 0) - step);
 }
 </script>
 
@@ -94,23 +105,60 @@ function decrement() {
 
 			<!-- INPUT FIELD -->
 			<input
-				{type}
+				type={effectiveType}
 				{name}
 				{id}
 				{placeholder}
 				{disabled}
 				{autocomplete}
+				min={type === 'number' ? min : undefined}
+				max={type === 'number' ? max : undefined}
+				step={type === 'number' ? step : undefined}
 				bind:value
 				{oninput}
 				class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
 					? disabledClasses
 					: ''} {className}"
 				class:pl-12={iconBefore}
-				class:pr-12={iconAfter || type === 'number'}
+				class:pr-12={iconAfter || showReveal || type === 'number'}
 			/>
 
 			<!-- AFTER ICON (non-number) -->
-			{#if iconAfter && type !== 'number'}
+			{#if showReveal}
+				<button
+					type="button"
+					onclick={() => (revealed = !revealed)}
+					class="absolute right-4 z-10 inline-flex cursor-pointer items-center justify-center text-text-soft transition-colors hover:text-[var(--color-text)]"
+					aria-label={revealed ? 'Hide password' : 'Show password'}
+					aria-pressed={revealed}
+				>
+					{#if revealed}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						</svg>
+					{:else}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						</svg>
+					{/if}
+				</button>
+			{:else if iconAfter && type !== 'number'}
 				<span
 					class="absolute right-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
 				>
@@ -158,22 +206,59 @@ function decrement() {
 			{/if}
 
 			<input
-				{type}
+				type={effectiveType}
 				{name}
 				{id}
 				{placeholder}
 				{disabled}
 				{autocomplete}
+				min={type === 'number' ? min : undefined}
+				max={type === 'number' ? max : undefined}
+				step={type === 'number' ? step : undefined}
 				bind:value
 				{oninput}
 				class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
 					? disabledClasses
 					: ''} {className}"
 				class:pl-12={iconBefore}
-				class:pr-12={iconAfter || type === 'number'}
+				class:pr-12={iconAfter || showReveal || type === 'number'}
 			/>
 
-			{#if iconAfter && type !== 'number'}
+			{#if showReveal}
+				<button
+					type="button"
+					onclick={() => (revealed = !revealed)}
+					class="absolute right-4 z-10 inline-flex cursor-pointer items-center justify-center text-text-soft transition-colors hover:text-[var(--color-text)]"
+					aria-label={revealed ? 'Hide password' : 'Show password'}
+					aria-pressed={revealed}
+				>
+					{#if revealed}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						</svg>
+					{:else}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						</svg>
+					{/if}
+				</button>
+			{:else if iconAfter && type !== 'number'}
 				<span
 					class="absolute right-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
 				>

package/dist/components/forms/Input.svelte.d.ts

@@ -14,6 +14,14 @@ export interface Props {
     validate?: (value: string | number) => boolean | string;
     validationMessage?: string;
     showValidation?: boolean;
+    /** Password inputs only: show an eye toggle to reveal the value. Replaces iconAfter. */
+    revealable?: boolean;
+    /** Number inputs only: lower bound enforced by the stepper arrows. */
+    min?: number;
+    /** Number inputs only: upper bound enforced by the stepper arrows. */
+    max?: number;
+    /** Number inputs only: stepper arrow increment. @default 1 */
+    step?: number;
     class?: string;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;

package/dist/components/overlays/ToastHost.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import Toast from './Toast.svelte';
+import { toasts, dismissToast } from './toast.store';
+let { position = 'bottom-right', maxVisible = 4 } = $props();
+let items = $state(toasts.get());
+$effect(() => toasts.subscribe((value) => (items = value)));
+const visible = $derived(items.slice(0, maxVisible));
+</script>
+
+{#each visible as item, index (item.id)}
+	<Toast
+		message={item.message}
+		variant={item.variant}
+		duration={item.duration}
+		dismissible={item.dismissible}
+		{position}
+		{index}
+		onClose={() => dismissToast(item.id)}
+	/>
+{/each}

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

@@ -0,0 +1,8 @@
+interface Props {
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    /** Newest toasts beyond this count are queued until older ones dismiss. */
+    maxVisible?: number;
+}
+declare const ToastHost: import("svelte").Component<Props, {}, "">;
+type ToastHost = ReturnType<typeof ToastHost>;
+export default ToastHost;

package/dist/components/overlays/index.d.ts

@@ -5,6 +5,9 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as ProgressBar } from './ProgressBar.svelte';
 export { default as SkeletonLoader } from './SkeletonLoader.svelte';
 export { default as Toast } from './Toast.svelte';
+export { default as ToastHost } from './ToastHost.svelte';
+export { toast, toasts, dismissToast } from './toast.store';
+export type { ToastItem, ToastOptions, ToastVariant } from './toast.store';
 export { default as Drawer } from './Drawer.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Dropdown } from './Dropdown.svelte';

package/dist/components/overlays/index.js

@@ -5,6 +5,8 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as ProgressBar } from './ProgressBar.svelte';
 export { default as SkeletonLoader } from './SkeletonLoader.svelte';
 export { default as Toast } from './Toast.svelte';
+export { default as ToastHost } from './ToastHost.svelte';
+export { toast, toasts, dismissToast } from './toast.store';
 export { default as Drawer } from './Drawer.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Dropdown } from './Dropdown.svelte';

package/dist/components/overlays/toast.store.d.ts

@@ -0,0 +1,32 @@
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+export interface ToastOptions {
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in ms. 0 disables auto-dismiss. Default 3000. */
+    duration?: number;
+    dismissible?: boolean;
+}
+export interface ToastItem extends Required<Pick<ToastOptions, 'variant' | 'duration' | 'dismissible'>> {
+    id: string;
+    message: string;
+}
+/** Active toasts, oldest first. Rendered by `<ToastHost />`. */
+export declare const toasts: import("nanostores").PreinitializedWritableAtom<ToastItem[]> & object;
+export declare function dismissToast(id: string): void;
+declare function push(message: string, options?: ToastOptions): string;
+/**
+ * Show a toast. Requires a single `<ToastHost />` mounted in the app's root
+ * layout. Returns the toast id (usable with `dismissToast`).
+ *
+ * ```ts
+ * toast('Saved');
+ * toast.success('Added to cart');
+ * toast.error('Could not save', { duration: 0 });
+ * ```
+ */
+export declare const toast: typeof push & {
+    info: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    success: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    warning: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    error: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+};
+export {};