@joewinke/jatui 0.1.10 → 0.1.19

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"

package/src/lib/components/Drawer.svelte

@@ -14,6 +14,18 @@
 		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;
@@ -27,6 +39,7 @@
 		size = 'md',
 		showCloseButton = true,
 		contentClass = '',
+		trapKeys = true,
 		onclose,
 		class: className = '',
 		headerActions,
@@ -54,14 +67,33 @@
 			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 bg-black/50 transition-opacity duration-300 {open
+	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>
@@ -69,16 +101,17 @@
 <div
 	class="fixed top-0 {position === 'right'
 		? 'right-0'
-		: 'left-0'} h-full bg-base-100 shadow-xl {sizeClasses[size]} flex flex-col transition-all duration-300 {open
+		: '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-200 flex-shrink-0">
+		<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}

package/src/lib/components/EntityPreviewCard.svelte

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