@joewinke/jatui 0.1.25 → 0.1.26

package/dist/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/dist/components/ContextMenu.svelte.d.ts

@@ -0,0 +1,31 @@
+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;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/CountdownTimer.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { fade } from "svelte/transition"
+
+  type TimerProps = {
+    targetDate?: string | null
+    minutesToAdd?: number
+    onComplete?: () => void
+    size?: "sm" | "md" | "lg"
+    completionMessage?: string
+  }
+
+  let {
+    targetDate = null,
+    minutesToAdd = 1,
+    onComplete = () => {},
+    size = "sm",
+    completionMessage = "Complete",
+  }: TimerProps = $props()
+
+  let minutes = $state(0)
+  let seconds = $state(0)
+  let countdownInterval: number | null = null
+  let startTime: Date | null = null
+  let isComplete = $state(false)
+
+  const sizeClasses: Record<"sm" | "md" | "lg", string> = {
+    sm: "text-lg",
+    md: "text-2xl",
+    lg: "text-4xl",
+  }
+  let sizeClass = $derived(sizeClasses[size])
+
+  function updateCountdown() {
+    const now = new Date()
+    let targetTime: Date
+
+    if (targetDate) {
+      const finishTime = new Date(targetDate)
+      targetTime = new Date(finishTime.getTime() + minutesToAdd * 60 * 1000)
+    } else {
+      if (!startTime) {
+        startTime = now
+      }
+      targetTime = new Date(startTime.getTime() + minutesToAdd * 60 * 1000)
+    }
+
+    const diff = targetTime.getTime() - now.getTime()
+
+    if (diff <= 0) {
+      if (countdownInterval) {
+        clearInterval(countdownInterval)
+        countdownInterval = null
+      }
+      minutes = 0
+      seconds = 0
+      isComplete = true
+      onComplete()
+      return
+    }
+
+    minutes = Math.floor(diff / (1000 * 60))
+    seconds = Math.floor((diff % (1000 * 60)) / 1000)
+  }
+
+  $effect(() => {
+    if (targetDate || minutesToAdd > 0) {
+      updateCountdown()
+      countdownInterval = setInterval(updateCountdown, 1000) as unknown as number
+    }
+
+    return () => {
+      if (countdownInterval) {
+        clearInterval(countdownInterval)
+        countdownInterval = null
+      }
+    }
+  })
+</script>
+
+<div class="text-info">
+  {#if !isComplete}
+    EST.&nbsp;
+    <span class="countdown font-mono {sizeClass}" transition:fade>
+      <span style="--value:{minutes};"></span>:
+      <span style="--value:{seconds};"></span>
+      &nbsp;REMAINING
+    </span>
+  {:else}
+    <span class="countdown {sizeClass}" transition:fade>
+      <span class="loading loading-dots loading-md mr-3"></span>
+      {completionMessage}
+    </span>
+  {/if}
+</div>

package/dist/components/CountdownTimer.svelte.d.ts

@@ -0,0 +1,10 @@
+type TimerProps = {
+    targetDate?: string | null;
+    minutesToAdd?: number;
+    onComplete?: () => void;
+    size?: "sm" | "md" | "lg";
+    completionMessage?: string;
+};
+declare const CountdownTimer: import("svelte").Component<TimerProps, {}, "">;
+type CountdownTimer = ReturnType<typeof CountdownTimer>;
+export default CountdownTimer;

package/dist/components/DateRangePicker.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	/**
+	 * DateRangePicker Component
+	 * DaisyUI dropdown for filtering by date range with quick presets
+	 */
+
+	import { formatShortDate } from '../utils/dateFormatters';
+
+	interface Props {
+		selectedRange: string; // 'today' | 'yesterday' | 'week' | 'month' | 'all' | 'custom'
+		customFrom?: string | null; // ISO date for custom range
+		customTo?: string | null; // ISO date for custom range
+		onRangeChange: (range: string, from?: string, to?: string) => void;
+		compact?: boolean;
+	}
+
+	let {
+		selectedRange = 'all',
+		customFrom = null,
+		customTo = null,
+		onRangeChange,
+		compact = false
+	}: 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);
+
+	// Preset options
+	const presets = [
+		{ value: 'today', label: 'Today', icon: '1' },
+		{ value: 'yesterday', label: 'Yesterday', icon: '-1' },
+		{ value: 'week', label: 'Last 7 days', icon: '7' },
+		{ value: 'month', label: 'Last 30 days', icon: '30' },
+		{ value: 'all', label: 'All time', icon: '*' }
+	];
+
+	// Get display label for current selection
+	const displayLabel = $derived.by(() => {
+		if (selectedRange === 'custom' && customFrom && customTo) {
+			return `${formatShortDate(customFrom)} - ${formatShortDate(customTo)}`;
+		}
+		if (selectedRange === 'custom' && customFrom) {
+			return `From ${formatShortDate(customFrom)}`;
+		}
+		if (selectedRange === 'custom' && customTo) {
+			return `Until ${formatShortDate(customTo)}`;
+		}
+		return presets.find(p => p.value === selectedRange)?.label || 'All time';
+	});
+
+	function handlePresetSelect(preset: string) {
+		showCustom = false;
+		localFrom = '';
+		localTo = '';
+		onRangeChange(preset);
+
+		// Close dropdown
+		if (document.activeElement instanceof HTMLElement) {
+			document.activeElement.blur();
+		}
+	}
+
+	function handleCustomApply() {
+		if (localFrom || localTo) {
+			onRangeChange('custom', localFrom || undefined, localTo || undefined);
+
+			// Close dropdown
+			if (document.activeElement instanceof HTMLElement) {
+				document.activeElement.blur();
+			}
+		}
+	}
+
+	function toggleCustom() {
+		showCustom = !showCustom;
+	}
+</script>
+
+<!-- Date Range Picker -->
+<div class="dropdown dropdown-end">
+	<!-- Trigger Button -->
+	<div
+		tabindex="0"
+		role="button"
+		class="{compact ? 'px-2 py-1 text-[10px]' : 'px-2.5 py-1.5 text-xs'} rounded cursor-pointer transition-all flex items-center gap-1.5 font-mono tracking-wider whitespace-nowrap bg-base-200 border border-base-300 text-base-content/60"
+	>
+		<!-- Calendar icon -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="w-4 h-4 text-primary"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+		</svg>
+		<span class="hidden sm:inline">{displayLabel}</span>
+		<span class="sm:hidden">
+			{#if selectedRange === 'today'}
+				1d
+			{:else if selectedRange === 'yesterday'}
+				-1d
+			{:else if selectedRange === 'week'}
+				7d
+			{:else if selectedRange === 'month'}
+				30d
+			{:else if selectedRange === 'all'}
+				All
+			{:else}
+				Custom
+			{/if}
+		</span>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="w-3 h-3 text-base-content/50"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+		</svg>
+	</div>
+
+	<!-- Dropdown Content -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		tabindex="0"
+		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">
+			{#each presets as preset}
+				<button
+					type="button"
+					class="px-2 py-1 rounded cursor-pointer transition-all duration-200 font-mono text-xs border {selectedRange === preset.value ? 'bg-primary/20 border-primary text-primary' : 'bg-base-300 border-base-content/20 text-base-content opacity-60 hover:opacity-100'}"
+					onclick={() => handlePresetSelect(preset.value)}
+				>
+					{preset.label}
+				</button>
+			{/each}
+		</div>
+
+		<!-- Divider -->
+		<div class="my-2 flex items-center gap-2">
+			<div class="flex-1 h-px bg-base-300"></div>
+			<span class="text-[0.75rem] text-base-content/45">or custom</span>
+			<div class="flex-1 h-px bg-base-300"></div>
+		</div>
+
+		<!-- Custom Range Section -->
+		<div class="space-y-2">
+			<div class="flex gap-2">
+				<div class="form-control flex-1">
+					<label class="label py-0.5" for="date-range-from">
+						<span class="text-[0.8125rem] text-base-content/45">From</span>
+					</label>
+					<input
+						id="date-range-from"
+						type="date"
+						class="input input-sm w-full font-mono bg-base-300 border border-base-300 text-base-content"
+						bind:value={localFrom}
+						max={localTo || undefined}
+					/>
+				</div>
+				<div class="form-control flex-1">
+					<label class="label py-0.5" for="date-range-to">
+						<span class="text-[0.8125rem] text-base-content/45">To</span>
+					</label>
+					<input
+						id="date-range-to"
+						type="date"
+						class="input input-sm w-full font-mono bg-base-300 border border-base-300 text-base-content"
+						bind:value={localTo}
+						min={localFrom || undefined}
+					/>
+				</div>
+			</div>
+			<button
+				type="button"
+				class="btn btn-sm btn-primary w-full font-mono"
+				onclick={handleCustomApply}
+				disabled={!localFrom && !localTo}
+			>
+				Apply Custom Range
+			</button>
+		</div>
+	</div>
+</div>

package/dist/components/DateRangePicker.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    selectedRange: string;
+    customFrom?: string | null;
+    customTo?: string | null;
+    onRangeChange: (range: string, from?: string, to?: string) => void;
+    compact?: boolean;
+}
+declare const DateRangePicker: import("svelte").Component<Props, {}, "">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/components/Drawer.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	/**
+	 * Drawer Component
+	 *
+	 * Sliding panel overlay with backdrop, escape key, and header actions.
+	 */
+
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		position?: 'left' | 'right';
+		size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+		showCloseButton?: boolean;
+		contentClass?: string;
+		/**
+		 * When true (default), keydown events fired inside the drawer panel are
+		 * stopped from propagating to window — preventing page-level list/keyboard
+		 * navigation handlers (listNav-style) from receiving arrow keys, j/k, vim
+		 * chords, digit counts, etc. while the drawer is open.
+		 *
+		 * Free-text fields (INPUT, TEXTAREA, contentEditable) are intentionally
+		 * excluded so normal typing still works. Set to false only when the
+		 * consumer needs custom window-level key handling even while the drawer
+		 * is open.
+		 */
+		trapKeys?: boolean;
+		onclose?: () => void;
+		class?: string;
+		headerActions?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title = '',
+		position = 'right',
+		size = 'md',
+		showCloseButton = true,
+		contentClass = '',
+		trapKeys = true,
+		onclose,
+		class: className = '',
+		headerActions,
+		children
+	}: Props = $props();
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'w-80',
+		md: 'w-96',
+		lg: 'w-[640px]',
+		xl: 'w-[800px]',
+		'2xl': 'w-[960px]',
+		'3xl': 'w-[1024px] max-w-[calc(100vw-2rem)]',
+		full: 'w-full'
+	};
+
+	function handleClose() {
+		open = false;
+		onclose?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && open) {
+			e.stopImmediatePropagation();
+			handleClose();
+		}
+	}
+
+	/**
+	 * Stop keydown events from bubbling to window while the drawer is open.
+	 * This prevents page-level keyboard navigation (listNav-style handlers on
+	 * window) from reacting to arrow keys, j/k, vim chords, digit counts, etc.
+	 * typed inside the drawer.
+	 *
+	 * Free-text fields are excluded: page-level handlers already ignore them,
+	 * and we must not interfere with normal typing or textarea shortcuts.
+	 */
+	function handlePanelKeydown(e: KeyboardEvent) {
+		if (!trapKeys) return;
+		const el = document.activeElement as HTMLElement | null;
+		const tag = el?.tagName;
+		const isTextField =
+			!!el && (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable === true);
+		if (!isTextField) e.stopPropagation();
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+	class="fixed inset-0 transition-opacity duration-300 {open
+		? 'z-[100] opacity-100'
+		: 'opacity-0 pointer-events-none -z-10'}"
+	style="background: color-mix(in oklch, var(--color-primary) 55%, transparent)"
+	onclick={open ? handleClose : undefined}
+	role={open ? 'presentation' : undefined}
+></div>
+
+<div
+	class="fixed top-0 {position === 'right'
+		? 'right-0'
+		: 'left-0'} h-full bg-base-200 {position === 'right' ? 'border-l' : 'border-r'} border-base-300 {sizeClasses[size]} flex flex-col transition-all duration-300 {open
+		? 'z-[101] translate-x-0'
+		: '-z-10 ' + (position === 'right' ? 'translate-x-full' : '-translate-x-full')} {className}"
+	role="dialog"
+	aria-modal={open}
+	aria-label={title}
+	aria-hidden={!open}
+	onkeydown={handlePanelKeydown}
+>
+	{#if title || showCloseButton || headerActions}
+		<div class="flex items-center justify-between p-6 border-b border-base-content/10 flex-shrink-0">
+			{#if title}
+				<h2 class="text-xl font-semibold">{title}</h2>
+			{/if}
+			<div class="flex items-center gap-2 ml-auto">
+				{#if headerActions}
+					{@render headerActions()}
+				{/if}
+				{#if showCloseButton}
+					<button
+						type="button"
+						class="btn btn-sm btn-circle btn-ghost"
+						onclick={handleClose}
+						aria-label="Close drawer"
+					>
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+						</svg>
+					</button>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="flex-1 overflow-y-auto {contentClass}">
+		{#if open && children}
+			{@render children()}
+		{/if}
+	</div>
+</div>