@joewinke/jatui 0.1.11 → 0.1.20

package/src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+	import { fly, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import { tick } from 'svelte';
+	import { getPending, confirmDialog, cancelDialog } from '../stores/confirmDialog.svelte';
+
+	const pending = $derived(getPending());
+	const opts = $derived(pending?.options ?? null);
+	const visible = $derived(pending !== null);
+
+	// Countdown state
+	let remaining = $state(0);
+	let total = $state(0);
+	let intervalId: ReturnType<typeof setInterval> | null = null;
+	let cancelRef = $state<HTMLButtonElement | null>(null);
+
+	$effect(() => {
+		if (!visible || !opts) {
+			if (intervalId) { clearInterval(intervalId); intervalId = null; }
+			remaining = 0;
+			total = 0;
+			return;
+		}
+
+		const ms = opts.timeoutMs ?? 8000;
+		if (ms > 0) {
+			total = ms;
+			remaining = ms;
+			intervalId = setInterval(() => {
+				remaining -= 60;
+				if (remaining <= 0) {
+					remaining = 0;
+					clearInterval(intervalId!);
+					intervalId = null;
+					cancelDialog();
+				}
+			}, 60);
+		} else {
+			total = 0;
+			remaining = 0;
+		}
+
+		// Focus the cancel button (safe default for destructive actions)
+		tick().then(() => cancelRef?.focus());
+
+		return () => {
+			if (intervalId) { clearInterval(intervalId); intervalId = null; }
+		};
+	});
+
+	const pct = $derived(total > 0 ? (remaining / total) * 100 : 0);
+	const secs = $derived(total > 0 ? Math.ceil(remaining / 1000) : 0);
+	const isDanger = $derived(opts?.danger !== false); // default true
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!visible) return;
+		if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); cancelDialog(); }
+		if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); confirmDialog(); }
+	}
+
+	$effect(() => {
+		window.addEventListener('keydown', handleKeydown, true);
+		return () => window.removeEventListener('keydown', handleKeydown, true);
+	});
+</script>
+
+{#if visible && opts}
+	<!-- Scrim -->
+	<div
+		class="cd-scrim"
+		transition:fade={{ duration: 120 }}
+		role="presentation"
+		onclick={cancelDialog}
+	></div>
+
+	<!-- Dialog -->
+	<div
+		class="cd-wrap"
+		role="alertdialog"
+		aria-modal="true"
+		aria-label="{opts.title}. {isDanger ? 'Destructive action.' : ''} Press Enter to confirm or Escape to cancel."
+		in:fly={{ y: -20, duration: 200, easing: cubicOut }}
+		out:fade={{ duration: 120 }}
+	>
+		<div class="cd-box" class:cd-danger={isDanger}>
+			<!-- Icon + title -->
+			<div class="cd-header">
+				<div class="cd-icon" class:cd-icon-danger={isDanger}>
+					{#if isDanger}
+						<!-- Terminal/skull icon for destructive actions -->
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+							<rect x="2" y="3" width="20" height="14" rx="2"/>
+							<path d="M8 21h8M12 17v4"/>
+							<path d="M9 8l2 2-2 2M13 12h2"/>
+						</svg>
+					{:else}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+							<circle cx="12" cy="12" r="10"/>
+							<line x1="12" y1="8" x2="12" y2="12"/>
+							<line x1="12" y1="16" x2="12.01" y2="16"/>
+						</svg>
+					{/if}
+				</div>
+				<div class="cd-title-group">
+					<h3 class="cd-title">{opts.title}</h3>
+					{#if opts.body}
+						<p class="cd-body">{opts.body}</p>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Actions -->
+			<div class="cd-actions">
+				<button
+					bind:this={cancelRef}
+					type="button"
+					class="cd-btn cd-btn-cancel"
+					onclick={cancelDialog}
+				>
+					<kbd class="cd-kbd">Esc</kbd>
+					<span>{opts.cancelLabel ?? 'Cancel'}</span>
+				</button>
+
+				<button
+					type="button"
+					class="cd-btn cd-btn-confirm"
+					class:cd-btn-danger={isDanger}
+					onclick={confirmDialog}
+				>
+					<kbd class="cd-kbd">{isDanger ? '⏎' : 'Enter'}</kbd>
+					<span>{opts.confirmLabel ?? (isDanger ? 'Confirm' : 'OK')}</span>
+				</button>
+
+				{#if total > 0}
+					<span class="cd-timer" aria-live="off">{secs}s</span>
+				{/if}
+			</div>
+
+			<!-- Progress bar (drains to 0; auto-cancels at 0) -->
+			{#if total > 0}
+				<div class="cd-progress" aria-hidden="true">
+					<div class="cd-progress-fill" class:cd-progress-danger={isDanger} style="width: {pct}%"></div>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.cd-scrim {
+		position: fixed;
+		inset: 0;
+		background: oklch(0 0 0 / 0.45);
+		z-index: 9990;
+		backdrop-filter: blur(2px);
+	}
+
+	.cd-wrap {
+		position: fixed;
+		top: 5rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9991;
+		pointer-events: auto;
+		width: max-content;
+		max-width: min(92vw, 460px);
+	}
+
+	.cd-box {
+		display: flex;
+		flex-direction: column;
+		gap: 0.625rem;
+		padding: 1rem 1.125rem 0.625rem;
+		background: color-mix(in oklch, var(--color-base-100) 98%, transparent);
+		border: 1px solid var(--color-base-300);
+		border-radius: 0.875rem;
+		box-shadow:
+			0 20px 60px oklch(0 0 0 / 0.55),
+			0 0 0 1px color-mix(in oklch, var(--color-base-300) 50%, transparent);
+		backdrop-filter: blur(16px);
+	}
+
+	.cd-box.cd-danger {
+		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
+		box-shadow:
+			0 20px 60px oklch(0 0 0 / 0.6),
+			0 0 0 1px color-mix(in oklch, var(--color-error) 25%, transparent),
+			0 0 30px color-mix(in oklch, var(--color-error) 12%, transparent);
+	}
+
+	.cd-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.875rem;
+	}
+
+	.cd-icon {
+		flex-shrink: 0;
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: color-mix(in oklch, var(--color-info) 35%, transparent);
+		border: 1px solid color-mix(in oklch, var(--color-info) 40%, transparent);
+		color: var(--color-info);
+	}
+
+	.cd-icon svg {
+		width: 1.125rem;
+		height: 1.125rem;
+	}
+
+	.cd-icon.cd-icon-danger {
+		background: color-mix(in oklch, var(--color-error) 35%, transparent);
+		border-color: color-mix(in oklch, var(--color-error) 40%, transparent);
+		color: var(--color-error-content);
+	}
+
+	.cd-title-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.cd-title {
+		margin: 0;
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--color-base-content);
+		line-height: 1.3;
+	}
+
+	.cd-body {
+		margin: 0;
+		font-size: 0.8rem;
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+		line-height: 1.5;
+	}
+
+	.cd-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding-top: 0.125rem;
+	}
+
+	.cd-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.3125rem 0.75rem;
+		font-size: 0.8rem;
+		font-weight: 500;
+		border-radius: 0.5rem;
+		border: 1px solid transparent;
+		background: transparent;
+		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
+		cursor: pointer;
+		transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
+		white-space: nowrap;
+	}
+
+	.cd-btn:hover {
+		background: var(--color-base-200);
+		border-color: var(--color-base-300);
+	}
+
+	.cd-btn-cancel:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.cd-btn-confirm {
+		background: color-mix(in oklch, var(--color-base-300) 60%, transparent);
+		border-color: var(--color-base-300);
+	}
+
+	.cd-btn-confirm:hover {
+		background: var(--color-base-200);
+		border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
+	}
+
+	.cd-btn-danger {
+		background: color-mix(in oklch, var(--color-error) 45%, transparent);
+		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
+		color: var(--color-error-content);
+	}
+
+	.cd-btn-danger:hover {
+		background: color-mix(in oklch, var(--color-error) 65%, transparent);
+		border-color: color-mix(in oklch, var(--color-error) 70%, transparent);
+		color: var(--color-error-content);
+	}
+
+	.cd-btn-confirm:focus-visible,
+	.cd-btn-danger:focus-visible {
+		outline: 2px solid var(--color-error);
+		outline-offset: 2px;
+	}
+
+	.cd-kbd {
+		font-family: ui-monospace, monospace;
+		font-size: 0.65rem;
+		padding: 0.0625rem 0.3125rem;
+		background: var(--color-base-200);
+		border: 1px solid var(--color-base-300);
+		border-bottom-width: 2px;
+		border-radius: 0.25rem;
+		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+		line-height: 1.6;
+	}
+
+	.cd-timer {
+		margin-left: auto;
+		font-family: ui-monospace, monospace;
+		font-size: 0.7rem;
+		color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+		font-variant-numeric: tabular-nums;
+		min-width: 2ch;
+		text-align: right;
+	}
+
+	.cd-progress {
+		height: 2px;
+		background: var(--color-base-200);
+		border-radius: 999px;
+		overflow: hidden;
+	}
+
+	.cd-progress-fill {
+		height: 100%;
+		background: linear-gradient(90deg, var(--color-info), var(--color-info));
+		border-radius: 999px;
+		transition: width 60ms linear;
+	}
+
+	.cd-progress-fill.cd-progress-danger {
+		background: linear-gradient(90deg, var(--color-error), var(--color-error));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cd-progress-fill { transition: none; }
+	}
+</style>

package/src/lib/components/ConfirmModal.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
+  import { fly, fade } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+
   let {
+    open = $bindable(true),
     title = "Confirm Action",
     message = "Are you sure you want to proceed?",
     confirmText = "Confirm",
@@ -10,6 +14,7 @@
     onconfirm,
     oncancel,
   } = $props<{
+    open?: boolean
     title?: string
     message?: string
     confirmText?: string
@@ -21,19 +26,85 @@
     oncancel?: () => void
   }>()
 
+  // Respect prefers-reduced-motion: skip the entrance/exit transitions.
+  const reducedMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+  // Focus management: move focus into the dialog on open, trap Tab within it,
+  // and restore focus to the trigger on close. Escape is handled window-level
+  // so it works regardless of which control inside the box currently has focus.
+  let modalBox = $state<HTMLElement | null>(null)
+  let previousFocus: HTMLElement | null = null
+
+  const FOCUSABLE =
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+  $effect(() => {
+    if (typeof document === 'undefined') return
+    if (open) {
+      previousFocus = document.activeElement as HTMLElement
+      requestAnimationFrame(() => {
+        if (modalBox?.contains(document.activeElement)) return
+        const first = modalBox?.querySelector<HTMLElement>(FOCUSABLE)
+        ;(first ?? modalBox)?.focus()
+      })
+    } else if (previousFocus) {
+      previousFocus.focus?.()
+      previousFocus = null
+    }
+  })
+
   function confirm() {
     onconfirm?.()
   }
 
   function cancel() {
+    open = false
     oncancel?.()
   }
+
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (open && e.key === 'Escape') {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      cancel()
+    }
+  }
+
+  function trapTab(e: KeyboardEvent) {
+    if (e.key !== 'Tab' || !modalBox) return
+    const f = Array.from(modalBox.querySelectorAll<HTMLElement>(FOCUSABLE))
+    if (f.length === 0) return
+    const first = f[0]
+    const last = f[f.length - 1]
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
 </script>
 
-<div class="modal modal-open">
-  <div class="modal-box max-w-md">
+<svelte:window onkeydown={onWindowKeydown} />
+
+{#if open}
+<div class="modal modal-open" transition:fade={{ duration: reducedMotion ? 0 : 200 }}>
+  <div
+    bind:this={modalBox}
+    class="modal-box max-w-md"
+    role="dialog"
+    aria-modal="true"
+    aria-label={title}
+    tabindex="-1"
+    onkeydown={trapTab}
+    in:fly={{ y: reducedMotion ? 0 : 10, duration: reducedMotion ? 0 : 220, easing: cubicOut }}
+    out:fade={{ duration: reducedMotion ? 0 : 150 }}
+  >
     <div class="flex justify-between items-center mb-4">
-      <h3 class="font-bold text-lg">{title}</h3>
+      <h3 class="font-semibold">{title}</h3>
       <button class="btn btn-ghost btn-sm" onclick={cancel} aria-label="Close">
         <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
       </button>
@@ -64,12 +135,8 @@
     </div>
   </div>
 
-  <div
-    class="modal-backdrop"
-    onclick={cancel}
-    onkeydown={(e) => { if (e.key === 'Escape') cancel() }}
-    role="button"
-    tabindex="0"
-    aria-label="Close modal"
-  ></div>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="modal-backdrop" onclick={cancel}></div>
 </div>
+{/if}

package/src/lib/components/ContextMenu.svelte

@@ -6,6 +6,13 @@
 	 * Headless primitive that handles positioning, viewport clamping, and
 	 * dismiss behavior (click-outside, Escape, right-click elsewhere).
 	 *
+	 * Viewport clamping is measured from the rendered DOM (offsetWidth /
+	 * offsetHeight) — no estimatedWidth/estimatedHeight props needed. The menu
+	 * stays inside the viewport regardless of how many items are passed in.
+	 * `transform-origin: top left` is set on the menu element so a caller's
+	 * scale-based entrance animation (via `class`) cannot shift the visual
+	 * rect away from the layout-box position used for clamping.
+	 *
 	 * Usage:
 	 *   let cm = $state({ open: false, x: 0, y: 0, target: null })
 	 *
@@ -28,6 +35,9 @@
 	 *   />
 	 */
 
+	import { scale, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+
 	type ActionItem = {
 		label: string;
 		onSelect: () => void;
@@ -48,10 +58,6 @@
 		items: ContextMenuItem[];
 		/** Optional small italic label rendered above the items (e.g. a filename). */
 		header?: string;
-		/** Estimated menu width in px, used for viewport clamping. Default 200. */
-		estimatedWidth?: number;
-		/** Estimated menu height in px, used for viewport clamping. Default 200. */
-		estimatedHeight?: number;
 		/** Stacking context z-index. Default 70 (above DaisyUI modals at 50). */
 		zIndex?: number;
 		/** Additional CSS class for the menu element. */
@@ -66,8 +72,6 @@
 		y,
 		items,
 		header,
-		estimatedWidth = 200,
-		estimatedHeight = 200,
 		zIndex = 70,
 		class: className = '',
 		onClose
@@ -85,17 +89,50 @@
 		close();
 	}
 
-	function clamp(value: number, max: number, pad = 8) {
-		if (value + pad > max) return Math.max(pad, max - pad);
-		return Math.max(pad, value);
+	// Position is measured from the rendered menu so it stays correct as items
+	// are added/removed. Initial values match the cursor; the post-render
+	// effect below corrects them once the layout box is known.
+	let menuEl = $state<HTMLDivElement | null>(null);
+	// svelte-ignore state_referenced_locally
+	let clampedX = $state(x);
+	// svelte-ignore state_referenced_locally
+	let clampedY = $state(y);
+
+	function measureAndClamp() {
+		if (typeof window === 'undefined' || !menuEl) return;
+		// offset* gives the layout box, ignoring any transform: scale() the
+		// caller might apply via a className. getBoundingClientRect would
+		// return the post-transform rect and underestimate during entrance
+		// animations.
+		const w = menuEl.offsetWidth;
+		const h = menuEl.offsetHeight;
+		const margin = 8;
+		clampedX =
+			x + w > window.innerWidth - margin
+				? Math.max(margin, window.innerWidth - w - margin)
+				: Math.max(margin, x);
+		clampedY =
+			y + h > window.innerHeight - margin
+				? Math.max(margin, window.innerHeight - h - margin)
+				: Math.max(margin, y);
 	}
 
-	let clampedX = $derived(
-		typeof window === 'undefined' ? x : clamp(x, window.innerWidth - estimatedWidth)
-	);
-	let clampedY = $derived(
-		typeof window === 'undefined' ? y : clamp(y, window.innerHeight - estimatedHeight)
-	);
+	// Re-measure whenever the menu opens, the anchor moves, or the item list
+	// changes (which can change the menu height).
+	$effect(() => {
+		if (!open) return;
+		// Touch reactive deps so the effect re-runs.
+		void x; void y; void items.length;
+		// Wait for the menu element to mount before measuring.
+		if (menuEl) {
+			measureAndClamp();
+		} else {
+			// Element not mounted yet — fall back to cursor position; the next
+			// effect tick will fire once `bind:this` resolves.
+			clampedX = x;
+			clampedY = y;
+		}
+	});
 </script>
 
 {#if open}
@@ -113,15 +150,18 @@
 	></div>
 
 	<div
+		bind:this={menuEl}
 		role="menu"
 		tabindex="-1"
-		class="fixed min-w-[200px] bg-base-100 border border-base-300 rounded-md shadow-lg py-1 {className}"
-		style="left: {clampedX}px; top: {clampedY}px; z-index: {zIndex};"
+		class="fixed min-w-[200px] bg-base-200 border border-base-300 rounded-md py-1 {className}"
+		style="left: {clampedX}px; top: {clampedY}px; z-index: {zIndex}; transform-origin: top left;"
+		in:scale={{ start: 0.92, duration: 140, easing: cubicOut }}
+		out:fade={{ duration: 100 }}
 		onkeydown={(e) => e.key === 'Escape' && close()}
 	>
 		{#if header}
 			<p
-				class="px-3 py-1.5 text-[11px] italic text-base-content/60 truncate border-b border-base-200"
+				class="px-3 py-1.5 text-[11px] italic text-base-content/60 truncate border-b border-base-300"
 			>
 				{header}
 			</p>
@@ -129,7 +169,7 @@
 
 		{#each items as item}
 			{#if 'divider' in item}
-				<div class="border-t border-base-200 my-1"></div>
+				<div class="border-t border-base-300 my-1"></div>
 			{:else}
 				<button
 					type="button"

package/src/lib/components/CountdownTimer.svelte

@@ -15,7 +15,7 @@
     onComplete = () => {},
     size = "sm",
     completionMessage = "Complete",
-  } = $props<TimerProps>()
+  }: TimerProps = $props()
 
   let minutes = $state(0)
   let seconds = $state(0)

package/src/lib/components/DateRangePicker.svelte

@@ -23,7 +23,9 @@
 	}: Props = $props();
 
 	// Local state for custom date inputs
+	// svelte-ignore state_referenced_locally
 	let localFrom = $state(customFrom || '');
+	// svelte-ignore state_referenced_locally
 	let localTo = $state(customTo || '');
 	let showCustom = $state(false);
 
@@ -129,7 +131,7 @@
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
 		tabindex="0"
-		class="dropdown-content rounded-box z-40 w-72 p-3 shadow-lg mt-1 bg-base-200 border border-base-300"
+		class="dropdown-content rounded-box z-40 w-72 p-3 mt-1 bg-base-200 border border-base-300"
 	>
 		<!-- Quick Presets -->
 		<div class="flex flex-wrap gap-1.5 mb-3">
@@ -147,7 +149,7 @@
 		<!-- Divider -->
 		<div class="my-2 flex items-center gap-2">
 			<div class="flex-1 h-px bg-base-300"></div>
-			<span class="text-xs font-mono uppercase tracking-wider text-base-content/40">or custom</span>
+			<span class="text-[0.75rem] text-base-content/45">or custom</span>
 			<div class="flex-1 h-px bg-base-300"></div>
 		</div>
 
@@ -156,7 +158,7 @@
 			<div class="flex gap-2">
 				<div class="form-control flex-1">
 					<label class="label py-0.5" for="date-range-from">
-						<span class="label-text text-xs font-mono uppercase tracking-wider text-base-content/50">From</span>
+						<span class="text-[0.8125rem] text-base-content/45">From</span>
 					</label>
 					<input
 						id="date-range-from"
@@ -168,7 +170,7 @@
 				</div>
 				<div class="form-control flex-1">
 					<label class="label py-0.5" for="date-range-to">
-						<span class="label-text text-xs font-mono uppercase tracking-wider text-base-content/50">To</span>
+						<span class="text-[0.8125rem] text-base-content/45">To</span>
 					</label>
 					<input
 						id="date-range-to"