@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/toast/ToastItem.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+	import { dismissToast, type Toast } from '../../stores/toast.svelte.js';
+
+	type Props = {
+		toast: Toast;
+		index: number;
+		total: number;
+	};
+
+	let { toast, index, total }: Props = $props();
+
+	// Stack compression: older toasts (lower index) scale down and fade behind newer ones
+	// index 0 = oldest (back), index total-1 = newest (front)
+	const stackDepth = $derived(total - 1 - index);
+	const stackScale = $derived(Math.max(0.88, 1 - stackDepth * 0.04));
+	const stackOpacity = $derived(stackDepth >= 3 ? 0 : 1 - stackDepth * 0.1);
+
+	// Drag-to-dismiss state
+	let dragX = $state(0);
+	let isDragging = $state(false);
+	let startX = 0;
+	let startVelocityX = 0;
+	let lastX = 0;
+	let lastTime = 0;
+
+	// Entrance animation
+	let mounted = $state(false);
+	let exiting = $state(false);
+
+	$effect(() => {
+		requestAnimationFrame(() => {
+			mounted = true;
+		});
+	});
+
+	// Undo countdown
+	let undoProgress = $state(1);
+	let undoTimer: ReturnType<typeof setInterval> | null = null;
+	let undoDone = $state(false);
+	let hovered = $state(false);
+	let focused = $state(false);
+
+	const paused = $derived(hovered || focused);
+
+	$effect(() => {
+		if (!toast.onUndo) return;
+		const totalMs = toast.durationMs;
+		const steps = 60;
+		const stepMs = totalMs / steps;
+		let elapsed = 0;
+
+		const tick = () => {
+			if (paused) return;
+			elapsed += stepMs;
+			undoProgress = Math.max(0, 1 - elapsed / totalMs);
+			if (undoProgress <= 0) {
+				clearInterval(undoTimer!);
+				undoTimer = null;
+				undoDone = true;
+				triggerDismiss();
+			}
+		};
+
+		undoTimer = setInterval(tick, stepMs);
+		return () => {
+			if (undoTimer) clearInterval(undoTimer);
+		};
+	});
+
+	// Auto-dismiss for non-undo toasts
+	let dismissTimer: ReturnType<typeof setTimeout> | null = null;
+
+	$effect(() => {
+		if (toast.onUndo) return;
+		const schedule = () => {
+			dismissTimer = setTimeout(() => {
+				if (!hovered && !focused) triggerDismiss();
+				else {
+					// Re-check on unhover
+					const resume = () => {
+						if (!hovered && !focused) triggerDismiss();
+					};
+					document.addEventListener('pointerleave', resume, { once: true });
+				}
+			}, toast.durationMs);
+		};
+		schedule();
+		return () => {
+			if (dismissTimer) clearTimeout(dismissTimer);
+		};
+	});
+
+	// Re-start timer when un-paused
+	$effect(() => {
+		if (paused && dismissTimer) {
+			clearTimeout(dismissTimer);
+			dismissTimer = null;
+		} else if (!paused && !dismissTimer && !toast.onUndo) {
+			dismissTimer = setTimeout(triggerDismiss, toast.durationMs);
+		}
+	});
+
+	function triggerDismiss() {
+		exiting = true;
+		setTimeout(() => dismissToast(toast.id), 220);
+	}
+
+	function handleUndo() {
+		if (undoTimer) clearInterval(undoTimer);
+		toast.onUndo?.();
+		triggerDismiss();
+	}
+
+	// Drag handlers
+	function onPointerDown(e: PointerEvent) {
+		if ((e.target as HTMLElement).closest('button')) return;
+		isDragging = true;
+		startX = e.clientX;
+		lastX = e.clientX;
+		lastTime = e.timeStamp;
+		dragX = 0;
+		startVelocityX = 0;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!isDragging) return;
+		const now = e.timeStamp;
+		const dt = now - lastTime;
+		if (dt > 0) {
+			startVelocityX = (e.clientX - lastX) / dt;
+		}
+		lastX = e.clientX;
+		lastTime = now;
+		dragX = e.clientX - startX;
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+		const THRESHOLD = 100;
+		// Velocity-based fling: >0.5px/ms or past threshold
+		if (Math.abs(dragX) > THRESHOLD || Math.abs(startVelocityX) > 0.5) {
+			const dir = dragX > 0 ? 1 : -1;
+			dragX = dir * window.innerWidth;
+			exiting = true;
+			setTimeout(() => dismissToast(toast.id), 300);
+		} else {
+			// Snap back with spring
+			dragX = 0;
+		}
+	}
+
+	// DaisyUI alert class per type
+	const alertClass: Record<string, string> = {
+		info: 'alert-info',
+		success: 'alert-success',
+		warning: 'alert-warning',
+		error: 'alert-error'
+	};
+
+	// ARIA role per type
+	const ariaRole = $derived(toast.type === 'error' ? 'alert' : 'status');
+	const ariaLive = $derived(toast.type === 'error' ? 'assertive' : 'polite');
+
+	// Entrance/exit transform
+	const itemTransform = $derived(
+		isDragging
+			? `translateX(${dragX}px) rotate(${dragX * 0.02}deg)`
+			: exiting
+				? `translateY(20px) scale(0.9)`
+				: mounted
+					? `translateX(0) rotate(0deg)`
+					: `translateY(40px) scale(0.92)`
+	);
+
+	const itemOpacity = $derived(
+		isDragging
+			? Math.max(0, 1 - Math.abs(dragX) / 200)
+			: exiting
+				? 0
+				: mounted
+					? 1
+					: 0
+	);
+
+	const dragTransition = $derived(
+		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)'
+	);
+</script>
+
+<li
+	class="toast-item pointer-events-auto w-full"
+	style:transform={itemTransform}
+	style:opacity={itemOpacity}
+	style:transition={dragTransition}
+	role={ariaRole}
+	aria-live={ariaLive}
+	onmouseenter={() => (hovered = true)}
+	onmouseleave={() => (hovered = false)}
+	onfocusin={() => (focused = true)}
+	onfocusout={() => (focused = false)}
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+>
+	<div
+		class="alert {alertClass[toast.type]} shadow-sm relative overflow-hidden gap-3 pr-3"
+		style:transform="scale({stackScale})"
+		style:opacity={stackOpacity}
+		style:transition="transform var(--motion-move) var(--motion-glide), opacity var(--motion-move) var(--motion-glide)"
+	>
+		<!-- Undo countdown bar -->
+		{#if toast.onUndo && !undoDone}
+			<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'}
+			></span>
+		{/if}
+
+		<span class="flex-1 text-sm">{toast.message}</span>
+
+		{#if toast.onUndo}
+			<button
+				type="button"
+				class="btn btn-ghost btn-xs font-semibold"
+				onclick={handleUndo}
+			>
+				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>
+		{/if}
+
+		<button
+			type="button"
+			class="btn btn-ghost btn-xs btn-square"
+			aria-label="Dismiss notification"
+			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>
+
+<style>
+	.toast-item {
+		list-style: none;
+		touch-action: pan-y;
+		user-select: none;
+	}
+
+	.toast-progress {
+		animation-name: drain;
+		animation-timing-function: linear;
+		animation-fill-mode: forwards;
+	}
+
+	@keyframes drain {
+		from { transform: scaleX(1); }
+		to   { transform: scaleX(0); }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.toast-progress {
+			animation: none;
+		}
+
+		.toast-item,
+		.toast-item > div {
+			transition: none !important;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import { type Toast } from '../../stores/toast.svelte.js';
+type Props = {
+    toast: Toast;
+    index: number;
+    total: number;
+};
+declare const ToastItem: import("svelte").Component<Props, {}, "">;
+type ToastItem = ReturnType<typeof ToastItem>;
+export default ToastItem;

package/dist/data/emojis.js

@@ -3,7 +3,7 @@
  * Each emoji has a character and searchable name.
  * Based on Unicode CLDR emoji ordering, minus most flags.
  */
-export const EMOJI_DATA = [
+export var EMOJI_DATA = [
     {
         label: 'Smileys & Emotion',
         emojis: [
@@ -1186,11 +1186,11 @@ export const EMOJI_DATA = [
     },
 ];
 /** Flat array of all emojis for search */
-export const ALL_EMOJIS = EMOJI_DATA.flatMap((g) => g.emojis);
+export var ALL_EMOJIS = EMOJI_DATA.flatMap(function (g) { return g.emojis; });
 /** Search emojis by name, returns matching entries */
 export function searchEmojis(query) {
     if (!query.trim())
         return [];
-    const terms = query.toLowerCase().split(/\s+/);
-    return ALL_EMOJIS.filter((e) => terms.every((t) => e.name.includes(t)));
+    var terms = query.toLowerCase().split(/\s+/);
+    return ALL_EMOJIS.filter(function (e) { return terms.every(function (t) { return e.name.includes(t); }); });
 }

package/dist/dnd/autoScroll.js

@@ -1,25 +1,27 @@
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-export const autoScroll = (node, params) => {
-    let current = params ?? {};
+export var autoScroll = function (node, params) {
+    var current = params !== null && params !== void 0 ? params : {};
     function register() {
         return autoScrollForElements({
             element: node,
-            canScroll: ({ source }) => {
-                if (!current.types?.length)
+            canScroll: function (_a) {
+                var _b;
+                var source = _a.source;
+                if (!((_b = current.types) === null || _b === void 0 ? void 0 : _b.length))
                     return true;
                 return current.types.includes(source.data.type);
             },
-            getAllowedAxis: () => current.axis ?? 'all',
-            getConfiguration: () => ({ maxScrollSpeed: current.speed ?? 'standard' }),
+            getAllowedAxis: function () { var _a; return (_a = current.axis) !== null && _a !== void 0 ? _a : 'all'; },
+            getConfiguration: function () { var _a; return ({ maxScrollSpeed: (_a = current.speed) !== null && _a !== void 0 ? _a : 'standard' }); },
         });
     }
-    let cleanup = register();
+    var cleanup = register();
     return {
-        update(next) {
-            current = next ?? {};
+        update: function (next) {
+            current = next !== null && next !== void 0 ? next : {};
             cleanup();
             cleanup = register();
         },
-        destroy: () => cleanup(),
+        destroy: function () { return cleanup(); },
     };
 };

package/dist/dnd/createDndBoard.svelte.js

@@ -1,28 +1,40 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge, attachClosestEdge, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { SvelteMap } from 'svelte/reactivity';
 import { announce } from './announce';
 import { makeItemData, isItemData, } from './types';
-const SHADOW_KEY = '__dnd-shadow__';
+var SHADOW_KEY = '__dnd-shadow__';
 export function createDndBoard(opts) {
-    const edges = opts.edges ?? ['top', 'bottom'];
-    const hover = opts.hover ?? 'indicator';
-    const mirror = new SvelteMap();
-    let dragging = $state(null);
-    let proposal = $state(null);
-    const seq = new Map();
-    let inFlight = 0;
-    let seedQueued = false;
+    var _a, _b;
+    var edges = (_a = opts.edges) !== null && _a !== void 0 ? _a : ['top', 'bottom'];
+    var hover = (_b = opts.hover) !== null && _b !== void 0 ? _b : 'indicator';
+    var mirror = new SvelteMap();
+    var dragging = $state(null);
+    var proposal = $state(null);
+    var seq = new Map();
+    var inFlight = 0;
+    var seedQueued = false;
     function seed() {
         mirror.clear();
-        const src = opts.items();
-        const entries = src instanceof Map
+        var src = opts.items();
+        var entries = src instanceof Map
             ? src
             : new Map(Object.entries(src));
-        for (const [id, list] of entries)
-            mirror.set(id, [...list]);
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var _a = entries_1[_i], id = _a[0], list = _a[1];
+            mirror.set(id, __spreadArray([], list, true));
+        }
     }
-    $effect(() => {
+    $effect(function () {
         opts.items();
         if (dragging || inFlight > 0) {
             seedQueued = true;
@@ -31,52 +43,57 @@ export function createDndBoard(opts) {
         seed();
     });
     function placementFrom(dropTargets) {
-        const inner = dropTargets[0];
+        var _a;
+        var inner = dropTargets[0];
         if (!inner)
             return null;
-        const d = inner.data;
+        var d = inner.data;
         if (typeof d.container !== 'string')
             return null;
-        const list = mirror.get(d.container) ?? [];
+        var list = (_a = mirror.get(d.container)) !== null && _a !== void 0 ? _a : [];
         if (typeof d.index !== 'number')
             return { container: d.container, index: list.length };
-        const edge = extractClosestEdge(d);
-        const after = edge === 'bottom' || edge === 'right';
+        var edge = extractClosestEdge(d);
+        var after = edge === 'bottom' || edge === 'right';
         return { container: d.container, index: d.index + (after ? 1 : 0) };
     }
     function syncShadow(next) {
-        for (const [cid, list] of mirror) {
-            const idx = list.findIndex((item) => item[SHADOW_KEY]);
+        var _a;
+        var _b;
+        for (var _i = 0, mirror_1 = mirror; _i < mirror_1.length; _i++) {
+            var _c = mirror_1[_i], cid = _c[0], list_1 = _c[1];
+            var idx = list_1.findIndex(function (item) { return item[SHADOW_KEY]; });
             if (idx !== -1) {
-                list.splice(idx, 1);
-                mirror.set(cid, list);
+                list_1.splice(idx, 1);
+                mirror.set(cid, list_1);
                 break;
             }
         }
         if (!next || !dragging)
             return;
-        const list = [...(mirror.get(next.container) ?? [])];
-        const shadowItem = { [SHADOW_KEY]: true, key: `${SHADOW_KEY}-${dragging.key}` };
+        var list = __spreadArray([], ((_b = mirror.get(next.container)) !== null && _b !== void 0 ? _b : []), true);
+        var shadowItem = (_a = {}, _a[SHADOW_KEY] = true, _a.key = "".concat(SHADOW_KEY, "-").concat(dragging.key), _a);
         list.splice(Math.min(next.index, list.length), 0, shadowItem);
         mirror.set(next.container, list);
     }
     function consider(next) {
-        if (next?.container === proposal?.container && next?.index === proposal?.index)
+        if ((next === null || next === void 0 ? void 0 : next.container) === (proposal === null || proposal === void 0 ? void 0 : proposal.container) && (next === null || next === void 0 ? void 0 : next.index) === (proposal === null || proposal === void 0 ? void 0 : proposal.index))
             return;
         proposal = next;
         if (hover === 'shadow')
             syncShadow(next);
     }
     function applyToMirror(move) {
-        const fromList = [...(mirror.get(move.from.container) ?? [])];
-        const toList = move.from.container === move.to.container
+        var _a, _b;
+        var fromList = __spreadArray([], ((_a = mirror.get(move.from.container)) !== null && _a !== void 0 ? _a : []), true);
+        var toList = move.from.container === move.to.container
             ? fromList
-            : [...(mirror.get(move.to.container) ?? [])];
-        const srcIdx = fromList.findIndex((it) => opts.key(it) === opts.key(move.item));
+            : __spreadArray([], ((_b = mirror.get(move.to.container)) !== null && _b !== void 0 ? _b : []), true);
+        var srcIdx = fromList.findIndex(function (it) { return opts.key(it) === opts.key(move.item); });
         if (srcIdx === -1)
             return;
         fromList.splice(srcIdx, 1);
-        let destIdx = move.to.index;
+        var destIdx = move.to.index;
         if (move.from.container === move.to.container && move.to.index > move.from.index) {
             destIdx = Math.max(0, destIdx - 1);
         }
@@ -87,21 +104,24 @@ export function createDndBoard(opts) {
         }
     }
     function rollback(move) {
-        for (const [cid, list] of mirror) {
-            const idx = list.findIndex((it) => opts.key(it) === opts.key(move.item));
+        var _a;
+        for (var _i = 0, mirror_2 = mirror; _i < mirror_2.length; _i++) {
+            var _b = mirror_2[_i], cid = _b[0], list = _b[1];
+            var idx = list.findIndex(function (it) { return opts.key(it) === opts.key(move.item); });
             if (idx !== -1) {
                 list.splice(idx, 1);
                 mirror.set(cid, list);
                 break;
             }
         }
-        const fromList = [...(mirror.get(move.from.container) ?? [])];
+        var fromList = __spreadArray([], ((_a = mirror.get(move.from.container)) !== null && _a !== void 0 ? _a : []), true);
         fromList.splice(Math.min(move.from.index, fromList.length), 0, move.item);
         mirror.set(move.from.container, fromList);
     }
     function finalize(dropped) {
-        const drag = dragging;
-        const to = dropped ? proposal : null;
+        var _a;
+        var drag = dragging;
+        var to = dropped ? proposal : null;
         dragging = null;
         consider(null);
         if (!drag)
@@ -114,21 +134,22 @@ export function createDndBoard(opts) {
             }
             return;
         }
-        const move = { item: drag.item, from: drag.from, to };
+        var move = { item: drag.item, from: drag.from, to: to };
         applyToMirror(move);
         if (opts.announce)
             announce(opts.announce(move));
-        const token = (seq.get(drag.key) ?? 0) + 1;
+        var token = ((_a = seq.get(drag.key)) !== null && _a !== void 0 ? _a : 0) + 1;
         seq.set(drag.key, token);
         inFlight++;
         opts
             .commit(move)
-            .catch((error) => {
+            .catch(function (error) {
+            var _a;
             if (seq.get(drag.key) === token)
                 rollback(move);
-            opts.onError?.(error, move);
+            (_a = opts.onError) === null || _a === void 0 ? void 0 : _a.call(opts, error, move);
         })
-            .finally(() => {
+            .finally(function () {
             inFlight--;
             if (inFlight === 0 && seedQueued && !dragging) {
                 seedQueued = false;
@@ -136,48 +157,61 @@ export function createDndBoard(opts) {
             }
         });
     }
-    $effect(() => monitorForElements({
-        canMonitor: ({ source }) => isItemData(source.data, opts.type),
-        onDragStart({ source }) {
-            const d = source.data;
-            dragging = {
-                key: d.key,
-                item: d.item,
-                from: { container: d.container, index: d.index },
-            };
-        },
-        onDropTargetChange({ location }) {
-            consider(placementFrom(location.current.dropTargets));
-        },
-        onDrag({ location }) {
-            consider(placementFrom(location.current.dropTargets));
-        },
-        onDrop({ location }) {
-            finalize(location.current.dropTargets.length > 0);
-        },
-    }));
+    $effect(function () {
+        return monitorForElements({
+            canMonitor: function (_a) {
+                var source = _a.source;
+                return isItemData(source.data, opts.type);
+            },
+            onDragStart: function (_a) {
+                var source = _a.source;
+                var d = source.data;
+                dragging = {
+                    key: d.key,
+                    item: d.item,
+                    from: { container: d.container, index: d.index },
+                };
+            },
+            onDropTargetChange: function (_a) {
+                var location = _a.location;
+                consider(placementFrom(location.current.dropTargets));
+            },
+            onDrag: function (_a) {
+                var location = _a.location;
+                consider(placementFrom(location.current.dropTargets));
+            },
+            onDrop: function (_a) {
+                var location = _a.location;
+                finalize(location.current.dropTargets.length > 0);
+            },
+        });
+    });
     return {
-        get: (container) => mirror.get(container) ?? [],
-        containers: () => [...mirror.keys()],
+        get: function (container) { var _a; return (_a = mirror.get(container)) !== null && _a !== void 0 ? _a : []; },
+        containers: function () { return __spreadArray([], mirror.keys(), true); },
         get dragging() {
             return dragging;
         },
         get proposal() {
             return proposal;
         },
-        isSource: (item) => dragging?.key === opts.key(item),
-        isShadow: (item) => !!item[SHADOW_KEY],
-        item: (item, container, index) => ({
-            data: () => makeItemData({ type: opts.type, key: opts.key(item), item, container, index }),
-        }),
-        itemTarget: (container, index) => ({
-            data: (feedback) => attachClosestEdge({ type: `${opts.type}-target`, container, index }, { input: feedback.input, element: feedback.element, allowedEdges: edges }),
-            accepts: (d) => isItemData(d, opts.type),
+        isSource: function (item) { return (dragging === null || dragging === void 0 ? void 0 : dragging.key) === opts.key(item); },
+        isShadow: function (item) {
+            return !!item[SHADOW_KEY];
+        },
+        item: function (item, container, index) { return ({
+            data: function () { return makeItemData({ type: opts.type, key: opts.key(item), item: item, container: container, index: index }); },
+        }); },
+        itemTarget: function (container, index) { return ({
+            data: function (feedback) {
+                return attachClosestEdge({ type: "".concat(opts.type, "-target"), container: container, index: index }, { input: feedback.input, element: feedback.element, allowedEdges: edges });
+            },
+            accepts: function (d) { return isItemData(d, opts.type); },
             sticky: true,
-        }),
-        containerTarget: (container) => ({
-            data: () => ({ type: `${opts.type}-target`, container }),
-            accepts: (d) => isItemData(d, opts.type),
-        }),
+        }); },
+        containerTarget: function (container) { return ({
+            data: function () { return ({ type: "".concat(opts.type, "-target"), container: container }); },
+            accepts: function (d) { return isItemData(d, opts.type); },
+        }); },
     };
 }