@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/ResizablePanel.svelte

@@ -1,305 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte"
-  import { onMount } from "svelte"
-
-  let {
-    width = 320,
-    minWidth = 280,
-    maxWidth = 800,
-    position = "right",
-    enableResize = true,
-    enableDragToSwap = true,
-    color = "neutral",
-    animateWidth = false,
-    onResize,
-    onResizeEnd,
-    onSwap,
-    children,
-  } = $props<{
-    width?: number
-    minWidth?: number
-    maxWidth?: number
-    position?: "left" | "right"
-    enableResize?: boolean
-    enableDragToSwap?: boolean
-    color?: string
-    animateWidth?: boolean
-    onResize?: (width: number) => void
-    onResizeEnd?: (width: number) => void
-    onSwap?: (newPosition: "left" | "right") => void
-    children?: Snippet
-  }>()
-
-  let panel = $state<HTMLElement | null>(null)
-  let resizeSide = $state<"left" | "right" | null>(null)
-  let startWidth = $state(0)
-  let startX = $state(0)
-  let isResizing = $state(false)
-  let isDragging = $state(false)
-  let dragIndicatorPosition = $state<{ x: number; y: number } | null>(null)
-
-  onMount(() => {
-    if (panel) {
-      width = panel.offsetWidth
-    }
-  })
-
-  function handleResizeStart(e: MouseEvent | TouchEvent, side: "left" | "right") {
-    if (!enableResize) return
-
-    isResizing = true
-    startWidth = width
-    resizeSide = side
-
-    if ("touches" in e) {
-      startX = e.touches[0].clientX
-    } else {
-      startX = e.clientX
-    }
-
-    window.addEventListener("mousemove", handleResize)
-    window.addEventListener("touchmove", handleResize, { passive: false })
-    window.addEventListener("mouseup", handleResizeEnd)
-    window.addEventListener("touchend", handleResizeEnd)
-
-    document.body.style.userSelect = "none"
-    e.stopPropagation()
-  }
-
-  function handleResize(e: MouseEvent | TouchEvent) {
-    if (!isResizing || !resizeSide) return
-
-    if ("touches" in e) {
-      e.preventDefault()
-      const currentX = e.touches[0].clientX
-      const diff = resizeSide === "right" ? startX - currentX : currentX - startX
-      width = Math.max(minWidth, Math.min(maxWidth, startWidth + diff))
-    } else {
-      const currentX = e.clientX
-      const diff = resizeSide === "right" ? startX - currentX : currentX - startX
-      width = Math.max(minWidth, Math.min(maxWidth, startWidth + diff))
-    }
-
-    onResize?.(width)
-  }
-
-  function handleResizeEnd() {
-    if (!isResizing) return
-
-    isResizing = false
-    resizeSide = null
-
-    window.removeEventListener("mousemove", handleResize)
-    window.removeEventListener("touchmove", handleResize)
-    window.removeEventListener("mouseup", handleResizeEnd)
-    window.removeEventListener("touchend", handleResizeEnd)
-
-    document.body.style.userSelect = ""
-    onResizeEnd?.(width)
-  }
-
-  function handleDragStart(e: MouseEvent | TouchEvent) {
-    if (!enableDragToSwap) return
-
-    isDragging = true
-
-    if ("touches" in e) {
-      dragIndicatorPosition = { x: e.touches[0].clientX, y: e.touches[0].clientY }
-    } else {
-      dragIndicatorPosition = { x: e.clientX, y: e.clientY }
-    }
-
-    window.addEventListener("mousemove", handleDrag)
-    window.addEventListener("touchmove", handleDrag, { passive: false })
-    window.addEventListener("mouseup", handleDragEnd)
-    window.addEventListener("touchend", handleDragEnd)
-
-    e.stopPropagation()
-  }
-
-  function handleDrag(e: MouseEvent | TouchEvent) {
-    if (!isDragging) return
-
-    if ("touches" in e) {
-      e.preventDefault()
-      dragIndicatorPosition = { x: e.touches[0].clientX, y: e.touches[0].clientY }
-    } else {
-      dragIndicatorPosition = { x: e.clientX, y: e.clientY }
-    }
-  }
-
-  function handleDragEnd(e: MouseEvent | TouchEvent) {
-    if (!isDragging) return
-
-    isDragging = false
-    dragIndicatorPosition = null
-
-    window.removeEventListener("mousemove", handleDrag)
-    window.removeEventListener("touchmove", handleDrag)
-    window.removeEventListener("mouseup", handleDragEnd)
-    window.removeEventListener("touchend", handleDragEnd)
-
-    let clientX: number
-    if ("changedTouches" in e) {
-      clientX = e.changedTouches[0].clientX
-    } else {
-      clientX = e.clientX
-    }
-
-    const viewportWidth = window.innerWidth
-    const threshold = viewportWidth * 0.4
-
-    const shouldSwap =
-      (position === "right" && clientX < threshold) ||
-      (position === "left" && clientX > viewportWidth - threshold)
-
-    if (shouldSwap) {
-      onSwap?.(position === "right" ? "left" : "right")
-    }
-  }
-</script>
-
-<div
-  bind:this={panel}
-  class={`resizable-panel border-l border-r border-${color}/30 ${isResizing ? " resizing" : ""}${isDragging ? " dragging" : ""}${animateWidth && !isResizing ? " animate-width" : ""}`}
-  style="width: {width}px;"
->
-  {#if enableResize}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="resize-handle left"
-      style="right: 0;"
-      onmousedown={(e) => handleResizeStart(e, "left")}
-      ontouchstart={(e) => handleResizeStart(e, "left")}
-    >
-      <div class="handle-indicator"></div>
-    </div>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="resize-handle right"
-      style="left: 0;"
-      onmousedown={(e) => handleResizeStart(e, "right")}
-      ontouchstart={(e) => handleResizeStart(e, "right")}
-    >
-      <div class="handle-indicator"></div>
-    </div>
-  {/if}
-
-  {#if enableDragToSwap}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="drag-handle"
-      onmousedown={handleDragStart}
-      ontouchstart={handleDragStart}
-    >
-      <div class="drag-indicator"></div>
-    </div>
-  {/if}
-
-  <div class="panel-content min-w-0">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</div>
-
-{#if isDragging && dragIndicatorPosition}
-  <div
-    class="drag-preview"
-    style="left: {dragIndicatorPosition.x}px; top: {dragIndicatorPosition.y}px;"
-  >
-    <div class="drag-preview-inner"></div>
-  </div>
-{/if}
-
-<style>
-  .resizable-panel {
-    position: relative;
-    height: 100%;
-    overflow: hidden;
-    transition: box-shadow 0.2s ease;
-  }
-
-  .resizable-panel.animate-width {
-    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .resizable-panel.resizing { user-select: none; }
-
-  .resize-handle {
-    position: absolute;
-    width: 10px;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 100;
-  }
-
-  .resize-handle.right { left: 0; width: 15px; }
-  .resize-handle.left { right: 0; width: 15px; }
-
-  .handle-indicator {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    bottom: 0;
-    width: 6px;
-    border-radius: 2px;
-    transform: translateX(-50%);
-    background-color: transparent;
-    transition: background-color 0.2s ease;
-  }
-
-  .resize-handle:hover .handle-indicator,
-  .resizing .handle-indicator {
-    background-color: var(--color-accent);
-  }
-
-  .drag-handle {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 10px;
-    cursor: move;
-    z-index: 10;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .drag-indicator {
-    width: 30px;
-    height: 4px;
-    border-radius: 2px;
-    background-color: var(--color-base-300, oklch(0.82 0.03 255));
-    transition: background-color 0.2s ease;
-  }
-
-  .drag-handle:hover .drag-indicator,
-  .dragging .drag-indicator {
-    background-color: var(--color-primary, oklch(0.64 0.18 259));
-  }
-
-  .panel-content {
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .drag-preview {
-    position: fixed;
-    pointer-events: none;
-    z-index: 9999;
-    transform: translate(-50%, -50%);
-  }
-
-  .drag-preview-inner {
-    width: 100px;
-    height: 60px;
-    background-color: var(--color-primary, oklch(0.64 0.18 259));
-    opacity: 0.3;
-    border-radius: 4px;
-    border: 2px solid var(--color-primary, oklch(0.64 0.18 259));
-  }
-</style>

package/src/lib/components/SearchDropdown.svelte

@@ -1,421 +0,0 @@
-<script module lang="ts">
-	export type SearchDropdownOption = {
-		value: string;
-		label: string;
-		icon?: string;
-		image?: string;  // URL for avatar/thumbnail image
-	};
-
-	export type SearchDropdownGroup = {
-		label: string;
-		options: SearchDropdownOption[];
-	};
-</script>
-
-<script lang="ts">
-	import { tick } from 'svelte';
-	import { slide } from 'svelte/transition';
-
-	import type { Snippet } from 'svelte';
-
-	let {
-		value = '',
-		groups = [],
-		placeholder = 'Filter...',
-		disabled = false,
-		displayValue,
-		colorFn,
-		footer,
-		onChange,
-	}: {
-		value: string;
-		groups: SearchDropdownGroup[];
-		placeholder?: string;
-		disabled?: boolean;
-		displayValue?: string;
-		colorFn?: (value: string) => string | undefined;
-		footer?: Snippet;
-		onChange: (value: string) => void;
-	} = $props();
-
-	let open = $state(false);
-	let searchQuery = $state('');
-	let searchInput = $state<HTMLInputElement | undefined>(undefined);
-	let containerRef: HTMLDivElement | undefined;
-
-	// Find the currently selected option across all groups
-	const selectedOption = $derived.by(() => {
-		for (const group of groups) {
-			const found = group.options.find(o => o.value === value);
-			if (found) return found;
-		}
-		return null;
-	});
-
-	const triggerLabel = $derived(displayValue || selectedOption?.label || value || placeholder);
-	const triggerIcon = $derived(selectedOption?.icon || '');
-	const triggerImage = $derived(selectedOption?.image || '');
-	const activeColor = $derived(colorFn ? colorFn(value) : undefined);
-
-	const filteredGroups = $derived.by(() => {
-		if (!searchQuery.trim()) return groups;
-		const q = searchQuery.toLowerCase();
-		const result: SearchDropdownGroup[] = [];
-		for (const group of groups) {
-			const filtered = group.options.filter(o =>
-				o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q) || (o.icon && o.icon.toLowerCase().includes(q))
-			);
-			if (filtered.length > 0) result.push({ label: group.label, options: filtered });
-		}
-		return result;
-	});
-
-	// Generate a deterministic hue from a string for initials avatars
-	function nameHue(s: string): number {
-		let h = 0;
-		for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) & 0xffff;
-		return h % 360;
-	}
-
-	function select(optionValue: string) {
-		open = false;
-		searchQuery = '';
-		onChange(optionValue);
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		if (containerRef && !containerRef.contains(e.target as Node)) {
-			open = false;
-			searchQuery = '';
-		}
-	}
-
-	$effect(() => {
-		if (open) {
-			document.addEventListener('mousedown', handleClickOutside);
-			tick().then(() => searchInput?.focus());
-			return () => document.removeEventListener('mousedown', handleClickOutside);
-		}
-	});
-</script>
-
-<div class="search-dropdown" bind:this={containerRef}>
-	<button
-		type="button"
-		class="sd-trigger"
-		class:sd-disabled={disabled}
-		style={activeColor ? `color: ${activeColor};` : ''}
-		onclick={() => { if (!disabled) open = !open; }}
-		{disabled}
-	>
-		<span class="sd-trigger-label">
-			{#if triggerImage}
-				<img src={triggerImage} alt="" class="sd-avatar" />
-			{:else if triggerIcon}
-				<span class="sd-trigger-icon">{triggerIcon}</span>
-			{:else if selectedOption && selectedOption.value}
-				<span class="sd-avatar sd-avatar-initials" style="background:oklch(0.55 0.15 {nameHue(selectedOption.label)})">
-					{selectedOption.label.charAt(0).toUpperCase()}
-				</span>
-			{/if}
-			<span class="truncate">{triggerLabel}</span>
-		</span>
-		<svg class="sd-chevron" class:sd-chevron-open={open} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-			<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-		</svg>
-	</button>
-
-	{#if open}
-		<div
-			class="sd-panel"
-			transition:slide={{ duration: 120 }}
-		>
-			<!-- Search input -->
-			<div class="sd-search">
-				<div class="sd-search-inner">
-					<svg class="sd-search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
-					</svg>
-					<input
-						bind:this={searchInput}
-						bind:value={searchQuery}
-						onkeydown={(e) => {
-							if (e.key === 'Escape') { e.stopPropagation(); open = false; searchQuery = ''; }
-						}}
-						type="text"
-						{placeholder}
-						class="sd-search-input"
-						autocomplete="off"
-					/>
-					{#if searchQuery}
-						<button type="button" onclick={() => { searchQuery = ''; searchInput?.focus(); }} class="sd-search-clear" aria-label="Clear search">
-							<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
-						</button>
-					{/if}
-				</div>
-			</div>
-
-			<!-- Options list -->
-			<ul class="sd-list">
-				{#if filteredGroups.length > 0}
-					{#each filteredGroups as group}
-						<li class="sd-group-label">
-							<span>{group.label}</span>
-						</li>
-						{#each group.options as option}
-							<li>
-								<button
-									type="button"
-									onclick={() => select(option.value)}
-									class="sd-option"
-									class:sd-option-selected={value === option.value}
-									style={colorFn && colorFn(option.value) ? `color: ${colorFn(option.value)};` : ''}
-								>
-									{#if option.image}
-										<img src={option.image} alt="" class="sd-avatar" />
-									{:else if option.icon}
-										<span class="sd-option-icon">{option.icon}</span>
-									{:else if option.value}
-										<span class="sd-avatar sd-avatar-initials" style="background:oklch(0.55 0.15 {nameHue(option.label)})">
-											{option.label.charAt(0).toUpperCase()}
-										</span>
-									{/if}
-									<span class="truncate">{option.label}</span>
-									{#if value === option.value}
-										<svg class="sd-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
-									{/if}
-								</button>
-							</li>
-						{/each}
-					{/each}
-				{:else}
-					<li class="sd-empty">
-							<svg class="sd-empty-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0015.803 15.803z" />
-							</svg>
-							No matches for "{searchQuery}"
-						</li>
-				{/if}
-			</ul>
-			{#if footer}
-				<div class="sd-footer">
-					{@render footer()}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.search-dropdown {
-		position: relative;
-		--sd-bg: var(--sd-color-bg, var(--color-base-100, Canvas));
-		--sd-bg-hover: var(--sd-color-bg-hover, var(--color-base-200, color-mix(in oklch, Canvas 90%, CanvasText)));
-		--sd-bg-selected: var(--sd-color-bg-selected, var(--color-base-300, color-mix(in oklch, Canvas 80%, CanvasText)));
-		--sd-border: var(--sd-color-border, color-mix(in oklch, var(--color-base-content, CanvasText) 20%, transparent));
-		--sd-text: var(--sd-color-text, var(--color-base-content, CanvasText));
-		--sd-text-muted: var(--sd-color-text-muted, color-mix(in oklch, var(--color-base-content, CanvasText) 50%, transparent));
-		--sd-text-label: var(--sd-color-text-label, color-mix(in oklch, var(--color-base-content, CanvasText) 45%, transparent));
-		--sd-accent: var(--sd-color-accent, var(--color-primary, LinkText));
-		--sd-success: var(--sd-color-success, var(--color-success, green));
-	}
-
-	/* Trigger button */
-	.sd-trigger {
-		width: 100%;
-		padding: 0.25rem 0.5rem;
-		border-radius: var(--rounded-btn, 0.5rem);
-		font-family: inherit;
-		font-size: inherit;
-		text-align: left;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.375rem;
-		transition: background 0.15s, border-color 0.15s;
-		min-height: 2rem;
-		cursor: pointer;
-		background: var(--sd-bg);
-		border: 1px solid var(--sd-border);
-		color: var(--sd-text);
-	}
-	.sd-trigger:hover:not(:disabled) {
-		background: var(--sd-bg-hover);
-	}
-	.sd-trigger:disabled, .sd-disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.sd-trigger-label {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		min-width: 0;
-	}
-	.sd-trigger-icon {
-		flex-shrink: 0;
-		font-size: 0.75rem;
-	}
-	.sd-avatar {
-		width: 1.25rem;
-		height: 1.25rem;
-		border-radius: 50%;
-		object-fit: cover;
-		flex-shrink: 0;
-	}
-	.sd-avatar-initials {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 0.6rem;
-		font-weight: 700;
-		color: oklch(1 0 0);
-		line-height: 1;
-	}
-
-	.sd-chevron {
-		width: 0.75rem;
-		height: 0.75rem;
-		flex-shrink: 0;
-		transition: transform 0.15s;
-		color: var(--sd-text-muted);
-	}
-	.sd-chevron-open {
-		transform: rotate(180deg);
-	}
-
-	/* Dropdown panel */
-	.sd-panel {
-		position: absolute;
-		z-index: 50;
-		margin-top: 0.25rem;
-		width: 100%;
-		min-width: 12rem;
-		border-radius: var(--rounded-box, 0.5rem);
-		overflow: hidden;
-		box-shadow: 0 4px 24px oklch(0 0 0 / 0.15);
-		background: var(--sd-bg);
-		border: 1px solid var(--sd-border);
-	}
-
-	/* Search section */
-	.sd-search {
-		padding: 0.375rem 0.625rem;
-		border-bottom: 1px solid var(--sd-border);
-	}
-	.sd-search-inner {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-	}
-	.sd-search-icon {
-		width: 0.75rem;
-		height: 0.75rem;
-		flex-shrink: 0;
-		color: var(--sd-text-muted);
-	}
-	.sd-search-input {
-		width: 100%;
-		background: transparent;
-		font-size: inherit;
-		font-family: inherit;
-		color: var(--sd-text);
-		border: none;
-		outline: none;
-	}
-	.sd-search-input::placeholder {
-		color: var(--sd-text-muted);
-	}
-	.sd-search-clear {
-		color: var(--sd-text-muted);
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: 0;
-		display: flex;
-	}
-	.sd-search-clear:hover {
-		opacity: 0.8;
-	}
-
-	/* Options list */
-	.sd-list {
-		padding: 0.125rem 0;
-		max-height: 280px;
-		overflow-y: auto;
-		list-style: none;
-		margin: 0;
-	}
-
-	.sd-group-label {
-		padding: 0.375rem 0.75rem 0.125rem;
-	}
-	.sd-group-label span {
-		font-size: 0.8125rem;
-		font-family: inherit;
-		font-weight: 400;
-		letter-spacing: 0.005em;
-		color: var(--sd-text-label);
-	}
-
-	.sd-option {
-		width: 100%;
-		padding: 0.375rem 0.75rem;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		text-align: left;
-		font-size: inherit;
-		font-family: inherit;
-		transition: background 0.1s;
-		cursor: pointer;
-		background: transparent;
-		border: none;
-		color: var(--sd-text);
-	}
-	.sd-option:hover {
-		background: var(--sd-bg-hover);
-	}
-	.sd-option-selected {
-		background: var(--sd-bg-selected);
-		font-weight: 600;
-	}
-
-	.sd-option-icon {
-		flex-shrink: 0;
-		width: 1.25rem;
-		text-align: center;
-		font-size: 0.75rem;
-	}
-
-	.sd-check {
-		width: 0.75rem;
-		height: 0.75rem;
-		flex-shrink: 0;
-		margin-left: auto;
-		color: var(--sd-success);
-	}
-
-	.sd-footer {
-		border-top: 1px solid var(--sd-border);
-	}
-
-	.sd-empty {
-		padding: 1rem 0.75rem;
-		text-align: center;
-		font-size: inherit;
-		font-family: inherit;
-		color: var(--sd-text-muted);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.375rem;
-	}
-
-	.sd-empty-icon {
-		width: 1.25rem;
-		height: 1.25rem;
-		opacity: 0.35;
-	}
-</style>