@joewinke/jatui 0.1.10 → 0.1.19

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

@@ -0,0 +1,188 @@
+<script lang="ts">
+	/**
+	 * ContextMenu Component
+	 *
+	 * Floating right-click (or programmatic) menu positioned at a cursor point.
+	 * 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 })
+	 *
+	 *   <button oncontextmenu={(e) => {
+	 *     e.preventDefault()
+	 *     cm = { open: true, x: e.clientX, y: e.clientY, target: row }
+	 *   }}>Row</button>
+	 *
+	 *   <ContextMenu
+	 *     bind:open={cm.open}
+	 *     x={cm.x}
+	 *     y={cm.y}
+	 *     header={cm.target?.name}
+	 *     items={[
+	 *       { label: "Preview",    onSelect: () => preview(cm.target) },
+	 *       { label: "Copy URL",   onSelect: () => copy(cm.target) },
+	 *       { divider: true },
+	 *       { label: "Delete", variant: "danger", onSelect: () => del(cm.target) },
+	 *     ]}
+	 *   />
+	 */
+
+	import { scale, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+
+	type ActionItem = {
+		label: string;
+		onSelect: () => void;
+		variant?: 'default' | 'danger';
+		disabled?: boolean;
+	};
+	type DividerItem = { divider: true };
+	export type ContextMenuItem = ActionItem | DividerItem;
+
+	interface Props {
+		/** Whether the menu is currently shown. Bindable. */
+		open: boolean;
+		/** Viewport x coordinate to anchor the top-left corner to (e.g. event.clientX). */
+		x: number;
+		/** Viewport y coordinate to anchor the top-left corner to (e.g. event.clientY). */
+		y: number;
+		/** Ordered list of items and dividers to render. */
+		items: ContextMenuItem[];
+		/** Optional small italic label rendered above the items (e.g. a filename). */
+		header?: string;
+		/** Stacking context z-index. Default 70 (above DaisyUI modals at 50). */
+		zIndex?: number;
+		/** Additional CSS class for the menu element. */
+		class?: string;
+		/** Called after the menu closes, regardless of cause. */
+		onClose?: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		x,
+		y,
+		items,
+		header,
+		zIndex = 70,
+		class: className = '',
+		onClose
+	}: Props = $props();
+
+	function close() {
+		if (!open) return;
+		open = false;
+		onClose?.();
+	}
+
+	function handleSelect(item: ActionItem) {
+		if (item.disabled) return;
+		item.onSelect();
+		close();
+	}
+
+	// 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);
+	}
+
+	// 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}
+	<!-- Invisible full-viewport overlay — captures click/right-click to dismiss -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0"
+		style="z-index: {zIndex - 1};"
+		onclick={close}
+		oncontextmenu={(e) => {
+			e.preventDefault();
+			close();
+		}}
+	></div>
+
+	<div
+		bind:this={menuEl}
+		role="menu"
+		tabindex="-1"
+		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-300"
+			>
+				{header}
+			</p>
+		{/if}
+
+		{#each items as item}
+			{#if 'divider' in item}
+				<div class="border-t border-base-300 my-1"></div>
+			{:else}
+				<button
+					type="button"
+					role="menuitem"
+					class="w-full text-left px-3 py-1.5 text-sm transition-colors
+						{item.variant === 'danger' ? 'text-error hover:bg-error/10' : 'hover:bg-base-200'}
+						{item.disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+					disabled={item.disabled}
+					onclick={() => handleSelect(item)}
+				>
+					{item.label}
+				</button>
+			{/if}
+		{/each}
+	</div>
+{/if}

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)