@joewinke/jatui 0.1.33 → 0.2.1

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/index.d.ts

@@ -142,3 +142,54 @@ export { default as LocationMap } from './components/LocationMap.svelte';
 export { default as GPSTracker } from './components/GPSTracker.svelte';
 export type { MapJob, MapAgent } from './types/maps';
 export { loadGoogleMapsAPI, isGoogleMapsLoaded, isPlacesLoaded, isGeometryLoaded, } from './utils/googleMapsLoader';
+export { tooltip } from './actions/tooltip';
+export type { TooltipOptions } from './actions/tooltip';
+export { staggerEntrance } from './actions/staggerEntrance';
+export type { StaggerEntranceOptions } from './actions/staggerEntrance';
+export { attention } from './actions/attention';
+export type { AttentionEffect, AttentionOptions } from './actions/attention';
+export { floating, makeVirtualAnchor } from './actions/floating';
+export type { FloatingOptions, Placement } from './actions/floating';
+export { glide } from './transitions/glide';
+export type { GlideOrigin, GlideParams } from './transitions/glide';
+export { themeWipe } from './utils/themeWipe';
+export { viewTransition } from './utils/viewTransition';
+export { play as playSound, registerSound, isSoundEnabled, setSoundEnabled } from './utils/sound';
+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.svelte';
+export type { Toast, ToastType, ToastOptions, DismissHandle } from './stores/toast.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';
+export { default as Steps } from './components/progress/Steps.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export { commandPalette } from './stores/commandPalette.svelte';
+export type { CommandItem } from './stores/commandPalette.svelte';
+export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
+export { default as CopyButton } from './components/CopyButton.svelte';
+export { default as HoldToConfirm } from './components/HoldToConfirm.svelte';
+export { default as PinInput } from './components/PinInput.svelte';
+export { default as PasswordMeter } from './components/PasswordMeter.svelte';
+export { default as QuantityStepper } from './components/QuantityStepper.svelte';
+export { default as TypingIndicator } from './components/messaging/TypingIndicator.svelte';
+export { default as Sidebar } from './components/shell/Sidebar.svelte';
+export { default as SidebarGroup } from './components/shell/SidebarGroup.svelte';
+export { default as SidebarItem } from './components/shell/SidebarItem.svelte';
+export { default as NavigationMenu } from './components/shell/NavigationMenu.svelte';
+export { createSidebarState } from './components/shell/shell';
+export type { SidebarMode, SidebarState } from './components/shell/shell';
+export { default as Kbd } from './components/basic/Kbd.svelte';
+export { default as Empty } from './components/basic/Empty.svelte';
+export { default as Breadcrumb } from './components/basic/Breadcrumb.svelte';
+export { default as Alert } from './components/basic/Alert.svelte';
+export { default as ButtonGroup } from './components/basic/ButtonGroup.svelte';
+export { default as Switch } from './components/basic/Switch.svelte';
+export { default as Checkbox } from './components/basic/Checkbox.svelte';
+export { default as RadioGroup } from './components/basic/RadioGroup.svelte';
+export { default as Toggle } from './components/basic/Toggle.svelte';
+export { default as Separator } from './components/basic/Separator.svelte';
+export { default as Slider } from './components/basic/Slider.svelte';
+export { default as Pagination } from './components/basic/Pagination.svelte';

package/dist/index.js

@@ -146,3 +146,67 @@ export { loadGoogleMapsAPI, isGoogleMapsLoaded, isPlacesLoaded, isGeometryLoaded
 // consumer to install the optional @atlaskit/pragmatic-drag-and-drop* peer deps
 // (and broke bundlers that stub the unresolved optional peer). Import DnD via:
 //   import { draggable, DropIndicator } from '@joewinke/jatui/dnd';
+// ============================================================
+// Wave 1+2 (jatui-pk6jz / jatui-x2hyv) — kinetics motion port,
+// research-verified gap fills, generative-pipeline era exports.
+// ============================================================
+// Motion primitives
+export { tooltip } from './actions/tooltip';
+export { staggerEntrance } from './actions/staggerEntrance';
+export { attention } from './actions/attention';
+export { floating, makeVirtualAnchor } from './actions/floating';
+export { glide } from './transitions/glide';
+// View Transitions kit
+export { themeWipe } from './utils/themeWipe';
+export { viewTransition } from './utils/viewTransition';
+// Sound kit (functional feedback, opt-in)
+export { play as playSound, registerSound, isSoundEnabled, setSoundEnabled } from './utils/sound';
+// Text utilities
+export { splitText } from './utils/splitText';
+// Toast system
+export { default as ToastHost } from './components/toast/ToastHost.svelte';
+export { showToast, dismissToast, getToasts } from './stores/toast.svelte';
+// Loading & progress family
+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';
+export { default as Steps } from './components/progress/Steps.svelte';
+// Navigation & overlays
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export { commandPalette } from './stores/commandPalette.svelte';
+// Micro primitives
+export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
+export { default as CopyButton } from './components/CopyButton.svelte';
+export { default as HoldToConfirm } from './components/HoldToConfirm.svelte';
+// Form gaps
+export { default as PinInput } from './components/PinInput.svelte';
+export { default as PasswordMeter } from './components/PasswordMeter.svelte';
+export { default as QuantityStepper } from './components/QuantityStepper.svelte';
+// Messaging
+export { default as TypingIndicator } from './components/messaging/TypingIndicator.svelte';
+// App shell
+export { default as Sidebar } from './components/shell/Sidebar.svelte';
+export { default as SidebarGroup } from './components/shell/SidebarGroup.svelte';
+export { default as SidebarItem } from './components/shell/SidebarItem.svelte';
+export { default as NavigationMenu } from './components/shell/NavigationMenu.svelte';
+export { createSidebarState } from './components/shell/shell';
+// Dep-heavy components live behind subpath exports, NOT this barrel —
+// re-exporting them here would force every barrel consumer to install their
+// optional peer deps (the dnd lesson, 6c9b104; broke all consumers in 0.2.0).
+//   import { DataTable, flexRender } from '@joewinke/jatui/table';    (@tanstack/table-core)
+//   import { GraphCanvas } from '@joewinke/jatui/graph';              (@xyflow/svelte)
+//   import { Carousel } from '@joewinke/jatui/carousel';              (embla-carousel-svelte)
+// Basic primitives (thin DaisyUI wraps — layering policy)
+export { default as Kbd } from './components/basic/Kbd.svelte';
+export { default as Empty } from './components/basic/Empty.svelte';
+export { default as Breadcrumb } from './components/basic/Breadcrumb.svelte';
+export { default as Alert } from './components/basic/Alert.svelte';
+export { default as ButtonGroup } from './components/basic/ButtonGroup.svelte';
+export { default as Switch } from './components/basic/Switch.svelte';
+export { default as Checkbox } from './components/basic/Checkbox.svelte';
+export { default as RadioGroup } from './components/basic/RadioGroup.svelte';
+export { default as Toggle } from './components/basic/Toggle.svelte';
+export { default as Separator } from './components/basic/Separator.svelte';
+export { default as Slider } from './components/basic/Slider.svelte';
+export { default as Pagination } from './components/basic/Pagination.svelte';

package/dist/showcase/AnimatedBeam.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		/** ID of the start element */
+		fromId: string;
+		/** ID of the end element */
+		toId: string;
+		/** Containing element for coordinate calculations (defaults to document.body) */
+		containerId?: string;
+		/** Gradient start color */
+		colorFrom?: string;
+		/** Gradient end color */
+		colorTo?: string;
+		/** Stroke width */
+		strokeWidth?: number;
+		/** Beam sweep duration in seconds */
+		duration?: number;
+		/** Dash length as fraction of path (0–1) */
+		dashLength?: number;
+		/** Curvature 0–1 (0 = straight, 1 = very curved) */
+		curvature?: number;
+		/** Reverse beam direction */
+		reverse?: boolean;
+		class?: string;
+	}
+
+	let {
+		fromId,
+		toId,
+		containerId,
+		colorFrom = 'oklch(var(--p))',
+		colorTo = 'oklch(var(--a))',
+		strokeWidth = 2,
+		duration = 3,
+		dashLength = 0.25,
+		curvature = 0.5,
+		reverse = false,
+		class: className = ''
+	}: Props = $props();
+
+	let svgEl: SVGSVGElement | undefined = $state();
+	let pathD = $state('');
+	let pathLength = $state(0);
+	let reducedMotion = $state(false);
+
+	const uid = Math.random().toString(36).slice(2, 8);
+	const gradId = `beam-grad-${uid}`;
+	const pathId = `beam-path-${uid}`;
+
+	function getCenter(el: Element, container: Element): { x: number; y: number } {
+		const elR = el.getBoundingClientRect();
+		const cR = container.getBoundingClientRect();
+		return {
+			x: elR.left + elR.width / 2 - cR.left,
+			y: elR.top + elR.height / 2 - cR.top
+		};
+	}
+
+	function updatePath() {
+		const root = containerId ? document.getElementById(containerId) : svgEl?.parentElement;
+		if (!root || !svgEl) return;
+
+		const fromEl = document.getElementById(fromId);
+		const toEl = document.getElementById(toId);
+		if (!fromEl || !toEl) return;
+
+		const from = getCenter(fromEl, root);
+		const to = getCenter(toEl, root);
+
+		// Resize SVG to container
+		const rr = root.getBoundingClientRect();
+		svgEl.style.width = rr.width + 'px';
+		svgEl.style.height = rr.height + 'px';
+
+		// Cubic bezier: control points offset vertically by curvature
+		const dy = Math.abs(to.y - from.y) * curvature;
+		const cx1 = from.x;
+		const cy1 = from.y - dy;
+		const cx2 = to.x;
+		const cy2 = to.y + dy;
+
+		const d = `M ${from.x},${from.y} C ${cx1},${cy1} ${cx2},${cy2} ${to.x},${to.y}`;
+		pathD = d;
+
+		// Measure path length after DOM update
+		requestAnimationFrame(() => {
+			const pathEl = svgEl?.querySelector(`#${pathId}`) as SVGPathElement | null;
+			if (pathEl) pathLength = pathEl.getTotalLength();
+		});
+	}
+
+	let resizeObs: ResizeObserver | undefined;
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		updatePath();
+
+		const root = containerId ? document.getElementById(containerId) : svgEl?.parentElement;
+		if (root) {
+			resizeObs = new ResizeObserver(updatePath);
+			resizeObs.observe(root);
+		}
+	});
+
+	onDestroy(() => {
+		resizeObs?.disconnect();
+	});
+
+	const dashArr = $derived(
+		pathLength > 0 ? `${pathLength * dashLength} ${pathLength * (1 - dashLength)}` : '0 1'
+	);
+	const dashOffset = $derived(pathLength > 0 ? (reverse ? -pathLength : pathLength) : 0);
+</script>
+
+<!-- svelte-ignore a11y_aria_hidden_on_focusable -->
+<svg
+	bind:this={svgEl}
+	class="animated-beam {className}"
+	xmlns="http://www.w3.org/2000/svg"
+	style="pointer-events:none; position:absolute; inset:0; overflow:visible;"
+	aria-hidden="true"
+>
+	<defs>
+		<linearGradient id={gradId} gradientUnits="userSpaceOnUse">
+			<stop offset="0%" stop-color={colorFrom} stop-opacity="0" />
+			<stop offset="20%" stop-color={colorFrom} />
+			<stop offset="80%" stop-color={colorTo} />
+			<stop offset="100%" stop-color={colorTo} stop-opacity="0" />
+		</linearGradient>
+	</defs>
+
+	<!-- Static base line -->
+	{#if pathD}
+		<path d={pathD} stroke="oklch(var(--bc) / 0.08)" stroke-width={strokeWidth} fill="none" />
+
+		<!-- Animated beam -->
+		{#if !reducedMotion}
+			<path
+				id={pathId}
+				d={pathD}
+				stroke="url(#{gradId})"
+				stroke-width={strokeWidth}
+				fill="none"
+				stroke-linecap="round"
+				stroke-dasharray={dashArr}
+				stroke-dashoffset="0"
+				style="animation: beam-sweep-{uid} {duration}s linear infinite var(--motion-glide);"
+			/>
+		{:else}
+			<!-- Reduced motion: static gradient line -->
+			<path
+				id={pathId}
+				d={pathD}
+				stroke="url(#{gradId})"
+				stroke-width={strokeWidth}
+				fill="none"
+				stroke-linecap="round"
+				opacity="0.6"
+			/>
+		{/if}
+	{/if}
+</svg>
+
+<style>
+	.animated-beam {
+		position: absolute;
+		inset: 0;
+		overflow: visible;
+		pointer-events: none;
+	}
+</style>
+
+<!-- Keyframes injected per-instance via a style tag to use the dynamic dashOffset -->
+{#if pathLength > 0 && !reducedMotion}
+	{@html `<style>
+		@keyframes beam-sweep-${uid} {
+			0%   { stroke-dashoffset: ${dashOffset}; }
+			100% { stroke-dashoffset: ${-dashOffset}; }
+		}
+	</style>`}
+{/if}

package/dist/showcase/AnimatedBeam.svelte.d.ts

@@ -0,0 +1,26 @@
+interface Props {
+    /** ID of the start element */
+    fromId: string;
+    /** ID of the end element */
+    toId: string;
+    /** Containing element for coordinate calculations (defaults to document.body) */
+    containerId?: string;
+    /** Gradient start color */
+    colorFrom?: string;
+    /** Gradient end color */
+    colorTo?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Beam sweep duration in seconds */
+    duration?: number;
+    /** Dash length as fraction of path (0–1) */
+    dashLength?: number;
+    /** Curvature 0–1 (0 = straight, 1 = very curved) */
+    curvature?: number;
+    /** Reverse beam direction */
+    reverse?: boolean;
+    class?: string;
+}
+declare const AnimatedBeam: import("svelte").Component<Props, {}, "">;
+type AnimatedBeam = ReturnType<typeof AnimatedBeam>;
+export default AnimatedBeam;