@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/ConfirmDialog.svelte

@@ -1,348 +0,0 @@
-<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,142 +0,0 @@
-<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",
-    cancelText = "Cancel",
-    confirmButtonClass = "btn-primary",
-    isLoading = false,
-    iconClass = "text-warning",
-    onconfirm,
-    oncancel,
-  } = $props<{
-    open?: boolean
-    title?: string
-    message?: string
-    confirmText?: string
-    cancelText?: string
-    confirmButtonClass?: string
-    isLoading?: boolean
-    iconClass?: string
-    onconfirm?: () => void
-    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>
-
-<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-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>
-    </div>
-
-    <div class="py-4">
-      <div class="flex justify-center mb-4">
-        <div class="p-4 rounded-full bg-base-200">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={iconClass}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
-        </div>
-      </div>
-
-      <p class="text-center mb-6">{message}</p>
-
-      <div class="flex gap-2">
-        <button type="button" class="btn btn-outline flex-1" onclick={cancel} disabled={isLoading}>
-          {cancelText}
-        </button>
-        <button type="button" class={`btn ${confirmButtonClass} flex-1`} onclick={confirm} disabled={isLoading}>
-          {#if isLoading}
-            <span class="loading loading-spinner loading-xs"></span>
-            Processing...
-          {:else}
-            {confirmText}
-          {/if}
-        </button>
-      </div>
-    </div>
-  </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

@@ -1,188 +0,0 @@
-<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}