@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/CountdownTimer.svelte

@@ -1,94 +0,0 @@
-<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/src/lib/components/DateRangePicker.svelte

@@ -1,194 +0,0 @@
-<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/src/lib/components/Drawer.svelte

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

package/src/lib/components/EmojiPicker.svelte

@@ -1,159 +0,0 @@
-<script lang="ts">
-	/**
-	 * EmojiPicker — Full Unicode emoji selector with search-by-name.
-	 * Shows a small trigger button with the current emoji, opens a categorized grid dropdown.
-	 * For assigning emoji icons to items (bases, channels, categories, etc.).
-	 */
-	import { EMOJI_DATA, searchEmojis } from '../data/emojis';
-
-	let {
-		selected = null,
-		onSelect,
-		size = 'sm',
-	}: {
-		selected: string | null;
-		onSelect: (emoji: string | null) => void;
-		size?: 'sm' | 'md';
-	} = $props();
-
-	let open = $state(false);
-	let searchQuery = $state('');
-	let triggerEl: HTMLButtonElement | undefined = $state(undefined);
-	let searchInputEl: HTMLInputElement | undefined = $state(undefined);
-
-	const searchResults = $derived.by(() => {
-		if (!searchQuery.trim()) return null;
-		return searchEmojis(searchQuery);
-	});
-
-	function handleSelect(emoji: string) {
-		onSelect(emoji);
-		open = false;
-		searchQuery = '';
-	}
-
-	function handleClear(e: MouseEvent) {
-		e.stopPropagation();
-		onSelect(null);
-		open = false;
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		if (triggerEl && !triggerEl.contains(e.target as Node)) {
-			const dropdown = document.querySelector('.emoji-picker-dropdown');
-			if (dropdown && !dropdown.contains(e.target as Node)) {
-				open = false;
-				searchQuery = '';
-			}
-		}
-	}
-
-	function handleToggle(e: MouseEvent) {
-		e.stopPropagation();
-		open = !open;
-		if (!open) {
-			searchQuery = '';
-		} else {
-			requestAnimationFrame(() => searchInputEl?.focus());
-		}
-	}
-
-	const btnSize = $derived(size === 'sm' ? 'w-6 h-6 text-sm' : 'w-8 h-8 text-base');
-</script>
-
-<svelte:window onclick={handleClickOutside} />
-
-<div class="relative inline-flex">
-	<button
-		bind:this={triggerEl}
-		class="emoji-trigger {btnSize} flex items-center justify-center rounded transition-all duration-100 cursor-pointer"
-		style="background: {selected ? 'oklch(0.25 0.02 250)' : 'oklch(0.20 0.01 250)'}; border: 1px solid {open ? 'oklch(0.45 0.10 240)' : 'oklch(0.28 0.02 250)'};"
-		onclick={handleToggle}
-		title={selected ? `Icon: ${selected} (click to change)` : 'Set icon'}
-	>
-		{#if selected}
-			<span>{selected}</span>
-		{:else}
-			<span style="color: oklch(0.40 0.02 250); font-size: 0.65em;">+</span>
-		{/if}
-	</button>
-
-	{#if open}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="emoji-picker-dropdown absolute left-0 top-full mt-1 z-50 rounded-lg overflow-hidden"
-			style="background: oklch(0.18 0.02 250); border: 1px solid oklch(0.30 0.02 250); box-shadow: 0 8px 32px oklch(0 0 0 / 0.5); width: 280px;"
-			onclick={(e) => e.stopPropagation()}
-		>
-			<!-- Search -->
-			<div class="px-2 py-1.5" style="border-bottom: 1px solid oklch(0.24 0.01 250);">
-				<input
-					bind:this={searchInputEl}
-					type="text"
-					placeholder="Search emojis..."
-					bind:value={searchQuery}
-					class="w-full px-2 py-1 rounded text-xs border-0 outline-none"
-					style="background: oklch(0.22 0.01 250); color: oklch(0.85 0.01 250);"
-				/>
-			</div>
-
-			<!-- Emoji grid -->
-			<div class="max-h-64 overflow-y-auto px-1.5 py-1.5">
-				{#if searchResults}
-					{#if searchResults.length === 0}
-						<div class="text-center py-4 text-xs" style="color: oklch(0.45 0.02 250);">
-							No emojis found
-						</div>
-					{:else}
-						<div class="grid grid-cols-8 gap-0.5">
-							{#each searchResults as entry}
-								<button
-									class="w-7 h-7 flex items-center justify-center rounded text-sm cursor-pointer transition-all duration-75 hover:scale-110"
-									style="background: {selected === entry.char ? 'oklch(0.45 0.12 240 / 0.3)' : 'transparent'};"
-									onclick={() => handleSelect(entry.char)}
-									title={entry.name}
-								>
-									{entry.char}
-								</button>
-							{/each}
-						</div>
-					{/if}
-				{:else}
-					{#each EMOJI_DATA as group}
-						<div class="mb-1.5">
-							<div class="text-[9px] font-mono uppercase tracking-wider px-1 py-0.5 sticky top-0" style="color: oklch(0.45 0.02 250); background: oklch(0.18 0.02 250);">
-								{group.label}
-							</div>
-							<div class="grid grid-cols-8 gap-0.5">
-								{#each group.emojis as entry}
-									<button
-										class="w-7 h-7 flex items-center justify-center rounded text-sm cursor-pointer transition-all duration-75 hover:scale-110"
-										style="background: {selected === entry.char ? 'oklch(0.45 0.12 240 / 0.3)' : 'transparent'};"
-										onclick={() => handleSelect(entry.char)}
-										title={entry.name}
-									>
-										{entry.char}
-									</button>
-								{/each}
-							</div>
-						</div>
-					{/each}
-				{/if}
-			</div>
-
-			<!-- Clear button -->
-			{#if selected}
-				<div class="px-2 py-1.5" style="border-top: 1px solid oklch(0.24 0.01 250);">
-					<button
-						class="w-full text-center text-[10px] py-1 rounded cursor-pointer transition-colors duration-100"
-						style="color: oklch(0.55 0.02 250); background: transparent;"
-						onclick={handleClear}
-					>
-						Clear icon
-					</button>
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>

package/src/lib/components/EntityPreviewCard.svelte

@@ -1,104 +0,0 @@
-<script lang="ts">
-  import type { EntityPreviewData, EntityPreviewBadge } from "../types/entityPreview"
-
-  let {
-    data,
-    loading = false,
-    error = false,
-  }: {
-    data: EntityPreviewData | null
-    loading?: boolean
-    error?: boolean
-  } = $props()
-
-  // First letter monogram fallback when there's no image.
-  const monogram = $derived((data?.title ?? "?").trim().charAt(0).toUpperCase() || "?")
-
-  function toneClass(tone: EntityPreviewBadge["tone"]): string {
-    switch (tone) {
-      case "primary":
-        return "badge-primary"
-      case "info":
-        return "badge-info"
-      case "success":
-        return "badge-success"
-      case "warning":
-        return "badge-warning"
-      case "error":
-        return "badge-error"
-      default:
-        return "badge-ghost"
-    }
-  }
-</script>
-
-<div
-  class="bg-base-100 border-base-content/10 rounded-box w-72 overflow-hidden border text-left"
->
-  {#if loading}
-    <div class="space-y-2 p-4">
-      <div class="bg-base-300 h-3 w-20 animate-pulse rounded"></div>
-      <div class="bg-base-300 h-4 w-40 animate-pulse rounded"></div>
-      <div class="bg-base-300 h-3 w-full animate-pulse rounded"></div>
-    </div>
-  {:else if error || !data}
-    <div class="text-base-content/50 p-4 text-sm">Preview unavailable.</div>
-  {:else}
-    {#if data.imageUrl}
-      <div class="bg-base-200 aspect-[16/9] w-full overflow-hidden">
-        <img src={data.imageUrl} alt={data.title} class="size-full object-cover" />
-      </div>
-    {/if}
-
-    <div class="space-y-2 p-4">
-      <div class="flex items-start gap-3">
-        {#if !data.imageUrl}
-          <div
-            class="bg-primary/10 text-primary rounded-box flex size-9 shrink-0 items-center justify-center text-sm font-bold"
-            aria-hidden="true"
-          >
-            {monogram}
-          </div>
-        {/if}
-        <div class="min-w-0 flex-1">
-          <div class="text-base-content/45 text-[10px] font-medium uppercase tracking-wide">
-            {data.typeLabel}
-          </div>
-          <div class="truncate text-sm font-semibold leading-tight">
-            {#if data.href}
-              <a href={data.href} class="hover:underline">{data.title}</a>
-            {:else}
-              {data.title}
-            {/if}
-          </div>
-          {#if data.subtitle}
-            <div class="text-base-content/55 truncate text-xs">{data.subtitle}</div>
-          {/if}
-        </div>
-      </div>
-
-      {#if data.summary}
-        <p class="text-base-content/70 line-clamp-2 text-xs">{data.summary}</p>
-      {/if}
-
-      {#if data.badges && data.badges.length > 0}
-        <div class="flex flex-wrap gap-1">
-          {#each data.badges as badge}
-            <span class="badge {toneClass(badge.tone)} badge-sm capitalize">{badge.label}</span>
-          {/each}
-        </div>
-      {/if}
-
-      {#if data.stats && data.stats.length > 0}
-        <div class="border-base-content/10 grid grid-cols-2 gap-x-4 gap-y-1 border-t pt-2">
-          {#each data.stats.slice(0, 4) as stat}
-            <div>
-              <div class="text-base-content/45 text-[10px] uppercase tracking-wide">{stat.label}</div>
-              <div class="text-xs font-semibold tabular-nums">{stat.value}</div>
-            </div>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>