@joewinke/jatui 0.1.25 → 0.1.27

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

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

package/dist/components/EmojiPicker.svelte

@@ -0,0 +1,159 @@
+<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/dist/components/EmojiPicker.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    selected: string | null;
+    onSelect: (emoji: string | null) => void;
+    size?: 'sm' | 'md';
+};
+declare const EmojiPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmojiPicker = ReturnType<typeof EmojiPicker>;
+export default EmojiPicker;

package/dist/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>

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

@@ -0,0 +1,9 @@
+import type { EntityPreviewData } from "../types/entityPreview";
+type $$ComponentProps = {
+    data: EntityPreviewData | null;
+    loading?: boolean;
+    error?: boolean;
+};
+declare const EntityPreviewCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type EntityPreviewCard = ReturnType<typeof EntityPreviewCard>;
+export default EntityPreviewCard;