@joewinke/jatui 0.1.0

package/src/lib/components/ResizablePanel.svelte

@@ -0,0 +1,302 @@
+<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}
+    <div
+      class="resize-handle left"
+      style="right: 0;"
+      onmousedown={(e) => handleResizeStart(e, "left")}
+      ontouchstart={(e) => handleResizeStart(e, "left")}
+    >
+      <div class="handle-indicator"></div>
+    </div>
+    <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}
+    <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, #cbd5e1);
+    transition: background-color 0.2s ease;
+  }
+
+  .drag-handle:hover .drag-indicator,
+  .dragging .drag-indicator {
+    background-color: var(--color-primary, #3b82f6);
+  }
+
+  .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, #3b82f6);
+    opacity: 0.3;
+    border-radius: 4px;
+    border: 2px solid var(--color-primary, #3b82f6);
+  }
+</style>

package/src/lib/components/SearchDropdown.svelte

@@ -0,0 +1,341 @@
+<script module lang="ts">
+	export type SearchDropdownOption = {
+		value: string;
+		label: string;
+		icon?: string;
+	};
+
+	export type SearchDropdownGroup = {
+		label: string;
+		options: SearchDropdownOption[];
+	};
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	let {
+		value = '',
+		groups = [],
+		placeholder = 'Filter...',
+		disabled = false,
+		displayValue,
+		onChange,
+	}: {
+		value: string;
+		groups: SearchDropdownGroup[];
+		placeholder?: string;
+		disabled?: boolean;
+		displayValue?: string;
+		onChange: (value: string) => void;
+	} = $props();
+
+	let open = $state(false);
+	let searchQuery = $state('');
+	let searchInput: HTMLInputElement | 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 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;
+	});
+
+	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}
+		onclick={() => { if (!disabled) open = !open; }}
+		{disabled}
+	>
+		<span class="sd-trigger-label">
+			{#if triggerIcon}<span class="sd-trigger-icon">{triggerIcon}</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">
+							<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}
+								>
+									{#if option.icon}<span class="sd-option-icon">{option.icon}</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">No matches for "{searchQuery}"</li>
+				{/if}
+			</ul>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.search-dropdown {
+		position: relative;
+	}
+
+	/* Trigger button */
+	.sd-trigger {
+		width: 100%;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.5rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		font-size: 0.8125rem;
+		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: oklch(0.16 0.01 250);
+		border: 1px solid oklch(0.25 0.02 250);
+		color: oklch(0.85 0.02 250);
+	}
+	.sd-trigger:hover:not(:disabled) {
+		background: oklch(0.18 0.01 250);
+		border-color: oklch(0.30 0.02 250);
+	}
+	.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-chevron {
+		width: 0.75rem;
+		height: 0.75rem;
+		flex-shrink: 0;
+		transition: transform 0.15s;
+		color: oklch(0.50 0.02 250);
+	}
+	.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: 0.5rem;
+		overflow: hidden;
+		box-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
+		background: oklch(0.16 0.01 250);
+		border: 1px solid oklch(0.25 0.02 250);
+	}
+
+	/* Search section */
+	.sd-search {
+		padding: 0.375rem 0.625rem;
+		border-bottom: 1px solid oklch(0.22 0.02 250);
+	}
+	.sd-search-inner {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+	.sd-search-icon {
+		width: 0.75rem;
+		height: 0.75rem;
+		flex-shrink: 0;
+		color: oklch(0.45 0.02 250);
+	}
+	.sd-search-input {
+		width: 100%;
+		background: transparent;
+		font-size: 0.625rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		color: oklch(0.75 0.02 250);
+		border: none;
+		outline: none;
+	}
+	.sd-search-input::placeholder {
+		color: oklch(0.40 0.02 250);
+	}
+	.sd-search-clear {
+		color: oklch(0.40 0.02 250);
+		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.5625rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: oklch(0.50 0.10 250);
+	}
+
+	.sd-option {
+		width: 100%;
+		padding: 0.375rem 0.75rem;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		text-align: left;
+		font-size: 0.6875rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		transition: background 0.1s;
+		cursor: pointer;
+		background: transparent;
+		border: none;
+		border-left: 2px solid transparent;
+		color: oklch(0.80 0.02 250);
+	}
+	.sd-option:hover {
+		background: oklch(0.19 0.01 250);
+	}
+	.sd-option-selected {
+		background: oklch(0.20 0.02 250);
+		border-left-color: oklch(0.65 0.15 250);
+	}
+
+	.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: oklch(0.70 0.15 145);
+	}
+
+	.sd-empty {
+		padding: 0.75rem;
+		text-align: center;
+		font-size: 0.625rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		color: oklch(0.45 0.02 250);
+	}
+</style>