@joewinke/jatui 0.1.0

package/src/lib/components/FilterDropdown.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	/**
+	 * FilterDropdown Component
+	 * Reusable multi-select filter component for filter bars
+	 *
+	 * Supports two modes:
+	 * - dropdown: Click button to show options in dropdown menu (default)
+	 * - inline: Options displayed inline without dropdown wrapper
+	 *
+	 * Supports two styles:
+	 * - badge: Clickable badge buttons (default, good for compact filters)
+	 * - checkbox: Checkbox list in menu format (good for longer lists)
+	 */
+
+	interface FilterOption {
+		value: string;
+		label: string;
+		count: number;
+	}
+
+	interface Props {
+		/** Label shown on dropdown trigger button */
+		label: string;
+		/** Available options to select from */
+		options: FilterOption[];
+		/** Currently selected values */
+		selected: Set<string>;
+		/** Callback when option is toggled */
+		onToggle: (value: string) => void;
+		/** Function to get badge color class for a value */
+		colorFn?: (value: string, isSelected: boolean) => string;
+		/** Text to show when all options are selected */
+		allSelectedText?: string;
+		/** If true, empty selection means "all" (vs "none") */
+		emptyMeansAll?: boolean;
+		/** Display mode: 'dropdown' (default) or 'inline' */
+		mode?: 'dropdown' | 'inline';
+		/** Selection style: 'badge' (default) or 'checkbox' */
+		style?: 'badge' | 'checkbox';
+		/** Additional CSS class for the container */
+		class?: string;
+		/** Dropdown menu width class (e.g., 'w-44', 'w-52') */
+		menuWidth?: string;
+		/** Max height for scrollable content (e.g., 'max-h-60') */
+		maxHeight?: string;
+		/** Show hover effect on dropdown trigger */
+		hoverTrigger?: boolean;
+	}
+
+	let {
+		label,
+		options,
+		selected,
+		onToggle,
+		colorFn = () => 'badge-primary',
+		allSelectedText = 'all',
+		emptyMeansAll = false,
+		mode = 'dropdown',
+		style = 'badge',
+		class: className = '',
+		menuWidth = 'min-w-48',
+		maxHeight = '',
+		hoverTrigger = true
+	}: Props = $props();
+
+	// Compute display text for the trigger button
+	const displayText = $derived.by(() => {
+		if (emptyMeansAll && selected.size === 0) {
+			return allSelectedText;
+		}
+		if (selected.size === options.length && options.length > 0) {
+			return allSelectedText;
+		}
+		return String(selected.size);
+	});
+
+	// Compute badge class for trigger (show primary when filters active)
+	const triggerBadgeClass = $derived.by(() => {
+		if (emptyMeansAll) {
+			return selected.size > 0 ? 'badge-primary' : 'badge-ghost';
+		}
+		return 'badge-primary';
+	});
+
+	// Handle option toggle
+	function handleToggle(value: string) {
+		onToggle(value);
+	}
+
+	// Handle keyboard navigation
+	function handleKeydown(e: KeyboardEvent, value: string) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			handleToggle(value);
+		}
+	}
+</script>
+
+{#if mode === 'inline'}
+	<!-- Inline Mode: No dropdown wrapper, just badge/checkbox grid -->
+	<div class="flex flex-wrap gap-1.5 {className}">
+		{#each options as opt, index}
+			{#if style === 'checkbox'}
+				<label class="label cursor-pointer justify-start gap-2">
+					<input
+						type="checkbox"
+						class="checkbox checkbox-sm"
+						checked={selected.has(opt.value)}
+						onchange={() => handleToggle(opt.value)}
+					/>
+					<span>{opt.label}</span>
+					<span class="text-xs opacity-60">({opt.count})</span>
+				</label>
+			{:else}
+				<button
+					class="badge badge-sm transition-all duration-200 cursor-pointer {selected.has(opt.value)
+						? colorFn(opt.value, true) + ' shadow-md'
+						: 'badge-ghost hover:badge-primary/20 hover:shadow-sm hover:scale-105'}"
+					onclick={() => handleToggle(opt.value)}
+					onkeydown={(e) => handleKeydown(e, opt.value)}
+				>
+					{opt.label}
+					<span class="ml-1 opacity-70">({opt.count})</span>
+				</button>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<!-- Dropdown Mode: Click to show options -->
+	<div class="dropdown {hoverTrigger ? 'dropdown-hover' : ''} {className}">
+		<!-- Trigger Button -->
+		<div
+			tabindex="0"
+			role="button"
+			class="px-2.5 py-1 rounded cursor-pointer transition-all flex items-center gap-1.5 font-mono text-xs tracking-wider bg-base-200 border border-base-300 text-base-content/60"
+		>
+			<span class="uppercase">{label}</span>
+			<span
+				class="px-1.5 py-0.5 rounded text-xs font-mono {selected.size > 0 && !(emptyMeansAll && selected.size === 0) ? 'bg-primary/20 text-primary' : 'bg-base-300 text-base-content opacity-60'}"
+			>
+				{displayText}
+			</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.5 h-3.5 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 -->
+		{#if style === 'checkbox'}
+			<!-- Checkbox style: Menu with checkboxes -->
+			<ul
+				tabindex="0"
+				class="dropdown-content z-40 menu p-2 shadow rounded-box {menuWidth} {maxHeight ? maxHeight + ' overflow-y-auto' : ''} bg-base-200 border border-base-300"
+			>
+				{#each options as opt, index}
+					<li>
+						<label
+							class="label cursor-pointer justify-start gap-2 rounded text-base-content/70"
+						>
+							<input
+								type="checkbox"
+								class="checkbox checkbox-sm border-base-content/40"
+								checked={selected.has(opt.value)}
+								onchange={() => handleToggle(opt.value)}
+							/>
+							<span class="truncate font-mono text-xs">{opt.label}</span>
+							<span class="text-xs font-mono text-base-content/50">({opt.count})</span>
+						</label>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<!-- Badge style: Grid of clickable badges -->
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<div
+				tabindex="0"
+				role="menu"
+				class="dropdown-content rounded-box shadow-lg p-2 z-40 {menuWidth} mt-1 {maxHeight ? maxHeight + ' overflow-y-auto' : ''} bg-base-200 border border-base-300"
+			>
+				<div class="flex flex-wrap gap-1.5">
+					{#each options as opt, index}
+						<button
+							class="px-2 py-0.5 rounded font-mono text-xs transition-all cursor-pointer border {selected.has(opt.value) ? 'bg-primary/20 border-primary/40 text-primary' : 'bg-base-300 border-base-content/20 text-base-content opacity-70 hover:opacity-100'}"
+							onclick={() => handleToggle(opt.value)}
+							onkeydown={(e) => handleKeydown(e, opt.value)}
+						>
+							{opt.label}
+							<span class="ml-1 text-base-content/50">({opt.count})</span>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/ImageUpload.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  let {
+    imageUrl = "",
+    disabled = false,
+    label = "Upload Image",
+    maxSize = 10 * 1024 * 1024,
+    onUpload = undefined,
+  } = $props<{
+    imageUrl?: string
+    disabled?: boolean
+    label?: string
+    maxSize?: number
+    onUpload?: (url: string) => void
+  }>()
+
+  let error = $state("")
+
+  async function handleFileInput(event: Event) {
+    error = ""
+    const input = event.target as HTMLInputElement
+    if (!input.files?.length) return
+
+    const file = input.files[0]
+
+    if (file.size > maxSize) {
+      error = `File too large! Maximum size is ${formatFileSize(maxSize)}.`
+      return
+    }
+
+    const url = URL.createObjectURL(file)
+    imageUrl = url
+
+    if (onUpload) {
+      onUpload(url)
+    }
+  }
+
+  function clearImage() {
+    if (imageUrl.startsWith("blob:")) {
+      URL.revokeObjectURL(imageUrl)
+    }
+    imageUrl = ""
+    error = ""
+  }
+
+  function formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} bytes`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+
+  $effect(() => {
+    return () => {
+      if (imageUrl.startsWith("blob:")) {
+        URL.revokeObjectURL(imageUrl)
+      }
+    }
+  })
+</script>
+
+{#if imageUrl}
+  <div class="relative w-full h-40 bg-base-200 rounded-md overflow-hidden">
+    <img src={imageUrl} alt="Uploaded" class="w-full h-full object-contain" />
+    <button
+      class="btn btn-sm btn-circle absolute top-2 right-2 bg-base-100/80"
+      onclick={clearImage}
+      {disabled}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
+{:else}
+  <label
+    class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-md cursor-pointer bg-base-200 hover:bg-base-300"
+  >
+    <div class="flex flex-col items-center justify-center pt-5 pb-6">
+      <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="mb-2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+      <p class="mb-2 text-sm">
+        <span class="font-semibold">Click to upload</span> or drag and drop
+      </p>
+      <p class="text-xs opacity-70">
+        PNG, JPG or JPEG (max {formatFileSize(maxSize)})
+      </p>
+    </div>
+    <input
+      type="file"
+      class="hidden"
+      accept="image/*"
+      {disabled}
+      onchange={handleFileInput}
+    />
+  </label>
+{/if}
+
+{#if error}
+  <p class="text-error text-sm mt-1">{error}</p>
+{/if}

package/src/lib/components/InlineEdit.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+	/**
+	 * InlineEdit Component
+	 *
+	 * A reusable inline editing component for text and textarea inputs.
+	 * Shows display value when not editing, converts to input on click.
+	 *
+	 * Features:
+	 * - Auto-saves on blur or Enter (Enter only for text type)
+	 * - Cancels on Escape, reverting to original value
+	 * - Hover state to indicate editability
+	 * - Auto-focus when editing starts
+	 * - Disabled state during saves
+	 * - Optional formula-aware display: segments with type/display/tooltip
+	 */
+
+	/** A display segment for formula-aware rendering */
+	export interface DisplaySegment {
+		type: 'text' | 'formula';
+		display: string;
+		tooltip?: string;
+	}
+
+	interface Props {
+		/** Current value */
+		value: string;
+		/** Callback when value is saved */
+		onSave: (newValue: string) => Promise<void> | void;
+		/** Input type: 'text' or 'textarea' */
+		type?: 'text' | 'textarea';
+		/** Placeholder text when empty */
+		placeholder?: string;
+		/** Disable editing */
+		disabled?: boolean;
+		/** Additional CSS classes for the container */
+		class?: string;
+		/** Number of rows for textarea (default: 3) */
+		rows?: number;
+		/** Show save/cancel buttons instead of auto-save on blur */
+		showButtons?: boolean;
+		/** Truncate long text with ellipsis (shows full text on hover) */
+		truncate?: boolean;
+		/** Optional display segments for formula-aware rendering */
+		displaySegments?: DisplaySegment[];
+	}
+
+	let {
+		value,
+		onSave,
+		type = 'text',
+		placeholder = 'Click to edit...',
+		disabled = false,
+		class: className = '',
+		rows = 3,
+		showButtons = false,
+		truncate = false,
+		displaySegments = []
+	}: Props = $props();
+
+	// --- Formula rendering ---
+	let hasFormulas = $derived(displaySegments.length > 0);
+
+	// Internal state
+	let isEditing = $state(false);
+	let editValue = $state(value);
+	let isSaving = $state(false);
+	let inputElement = $state<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
+	// Sync editValue when value prop changes (only when not editing)
+	$effect(() => {
+		if (!isEditing) {
+			editValue = value;
+		}
+	});
+
+	// Start editing
+	function startEditing() {
+		if (disabled || isSaving) return;
+		editValue = value;
+		isEditing = true;
+	}
+
+	// Cancel editing
+	function cancelEditing() {
+		editValue = value;
+		isEditing = false;
+	}
+
+	// Save the edited value
+	async function saveValue() {
+		// Don't save if value hasn't changed
+		if (editValue === value) {
+			isEditing = false;
+			return;
+		}
+
+		isSaving = true;
+		try {
+			await onSave(editValue);
+			isEditing = false;
+		} catch (err) {
+			console.error('Failed to save:', err);
+			// Keep editing mode open on error
+		} finally {
+			isSaving = false;
+		}
+	}
+
+	// Handle keydown events
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelEditing();
+		} else if (event.key === 'Enter') {
+			if (type === 'text' || event.metaKey || event.ctrlKey) {
+				event.preventDefault();
+				saveValue();
+			}
+		}
+	}
+
+	// Handle blur (auto-save when not using buttons)
+	function handleBlur() {
+		if (!showButtons) {
+			saveValue();
+		}
+	}
+
+	// Auto-focus action
+	function autofocus(node: HTMLElement) {
+		requestAnimationFrame(() => {
+			node.focus();
+			if (node instanceof HTMLInputElement) {
+				node.select();
+			}
+		});
+	}
+
+	// Auto-resize textarea to fit content
+	function autoresize(node: HTMLTextAreaElement) {
+		function resize() {
+			node.style.height = 'auto';
+			node.style.height = node.scrollHeight + 'px';
+		}
+
+		requestAnimationFrame(resize);
+
+		node.addEventListener('input', resize);
+
+		return {
+			destroy() {
+				node.removeEventListener('input', resize);
+			}
+		};
+	}
+</script>
+
+{#if isEditing}
+	<!-- Edit mode -->
+	<div class="inline-edit-container w-full {className}">
+		{#if type === 'textarea'}
+			<textarea
+				bind:this={inputElement}
+				bind:value={editValue}
+				{placeholder}
+				{rows}
+				class="textarea textarea-bordered w-full text-sm resize-none overflow-hidden"
+				style="min-height: {rows * 1.5}rem;"
+				disabled={isSaving}
+				onkeydown={handleKeyDown}
+				onblur={handleBlur}
+				use:autofocus
+				use:autoresize
+			></textarea>
+		{:else}
+			<input
+				bind:this={inputElement}
+				bind:value={editValue}
+				type="text"
+				{placeholder}
+				class="input input-bordered input-sm w-full"
+				disabled={isSaving}
+				onkeydown={handleKeyDown}
+				onblur={handleBlur}
+				use:autofocus
+			/>
+		{/if}
+
+		{#if showButtons}
+			<div class="flex gap-1 mt-1">
+				<button
+					class="btn btn-xs btn-success"
+					onclick={saveValue}
+					disabled={isSaving}
+				>
+					{#if isSaving}
+						<span class="loading loading-spinner loading-xs"></span>
+					{:else}
+						Save
+					{/if}
+				</button>
+				<button
+					class="btn btn-xs btn-ghost"
+					onclick={cancelEditing}
+					disabled={isSaving}
+				>
+					Cancel
+				</button>
+			</div>
+		{:else if isSaving}
+			<div class="absolute right-2 top-1/2 -translate-y-1/2">
+				<span class="loading loading-spinner loading-xs"></span>
+			</div>
+		{/if}
+	</div>
+{:else}
+	<!-- Display mode -->
+	<button
+		class="inline-edit-display text-left w-full rounded px-2 py-1 transition-colors {disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-base-200'} {truncate ? 'inline-edit-truncate' : ''} {className}"
+		onclick={startEditing}
+		disabled={disabled}
+		type="button"
+		title={truncate && value ? value : undefined}
+	>
+		{#if value}
+			{#if hasFormulas}
+				<span class={type === 'textarea' ? 'whitespace-pre-wrap' : (truncate ? 'truncate-text' : '')}>
+					{#each displaySegments as seg}
+						{#if seg.type === 'formula'}
+							<span class="inline-fx-result" title={seg.tooltip}>{seg.display}</span>
+						{:else}
+							{seg.display}
+						{/if}
+					{/each}
+				</span>
+			{:else if type === 'textarea'}
+				<span class="whitespace-pre-wrap">{value}</span>
+			{:else}
+				<span class={truncate ? 'truncate-text' : ''}>{value}</span>
+			{/if}
+		{:else}
+			<span class="text-base-content/50 italic">{placeholder}</span>
+		{/if}
+	</button>
+{/if}
+
+<style>
+	.inline-edit-container {
+		position: relative;
+	}
+
+	.inline-edit-display {
+		min-height: 2rem;
+		display: flex;
+		align-items: center;
+	}
+
+	/* Truncation styles */
+	.inline-edit-truncate {
+		max-width: 100%;
+		overflow: hidden;
+	}
+
+	.truncate-text {
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 100%;
+	}
+
+	.inline-fx-result {
+		display: inline;
+		padding: 0 4px;
+		border-radius: 3px;
+		background: oklch(0.25 0.06 80 / 0.4);
+		border: 1px solid oklch(0.35 0.08 80 / 0.3);
+		color: oklch(0.82 0.10 80);
+		font-family: 'JetBrains Mono', ui-monospace, monospace;
+		font-size: 0.85em;
+		cursor: help;
+	}
+</style>

package/src/lib/components/LazyImage.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte"
+
+  let {
+    src = "",
+    alt = "",
+    className = "",
+    aspectRatio = null,
+    fit = "cover",
+    preload = false,
+    priority = false,
+    width = null,
+    height = null,
+  } = $props<{
+    src: string
+    alt: string
+    className?: string
+    aspectRatio?: string | null
+    fit?: "cover" | "contain" | "fill"
+    preload?: boolean
+    priority?: boolean
+    width?: number | null
+    height?: number | null
+  }>()
+
+  let loaded = $state(false)
+  let error = $state(false)
+  let shouldLoad = $state(preload || priority)
+  let containerRef: HTMLDivElement
+
+  function startLoadingImage() {
+    if (loaded || !src) return
+    shouldLoad = true
+  }
+
+  onMount(() => {
+    if (priority || preload) {
+      startLoadingImage()
+      return
+    }
+
+    if (containerRef) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              startLoadingImage()
+              observer.unobserve(entry.target)
+            }
+          }
+        },
+        { root: null, rootMargin: "200px", threshold: 0.01 }
+      )
+      observer.observe(containerRef)
+      return () => observer.disconnect()
+    }
+  })
+
+  $effect(() => {
+    if (src) {
+      loaded = false
+      error = false
+    }
+  })
+</script>
+
+<div
+  bind:this={containerRef}
+  class="relative overflow-hidden {className}"
+  style={aspectRatio ? `aspect-ratio: ${aspectRatio};` : ""}
+  data-src={src}
+>
+  {#if !loaded && shouldLoad}
+    <div class="skeleton absolute inset-0 w-full h-full"></div>
+  {/if}
+
+  {#if shouldLoad}
+    <img
+      {src}
+      {alt}
+      {width}
+      {height}
+      class="w-full h-full object-{fit} transition-opacity duration-300 {loaded ? 'opacity-100' : 'opacity-0'}"
+      onload={(e) => {
+        loaded = true
+        if (!width || !height) {
+          const img = e.target as HTMLImageElement
+          width = img.naturalWidth
+          height = img.naturalHeight
+        }
+      }}
+      onerror={() => (error = true)}
+      loading={priority ? "eager" : "lazy"}
+      decoding="async"
+    />
+  {/if}
+
+  {#if !shouldLoad}
+    <div
+      class="w-full h-full bg-base-200"
+      style={width && height ? `aspect-ratio: ${width / height};` : ""}
+    ></div>
+  {/if}
+
+  {#if error && shouldLoad}
+    <div class="absolute inset-0 flex items-center justify-center bg-base-200">
+      <div class="flex flex-col items-center text-base-content/70">
+        <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="mb-2">
+          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
+          <circle cx="9" cy="9" r="2"></circle>
+          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
+        </svg>
+        <span class="text-xs">Failed to load image</span>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  img { will-change: opacity; }
+  .skeleton { transform: translateZ(0); will-change: opacity; }
+</style>