From 3f12de975ac777b687b41b03bc898d70d4a2ed1b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 4 Jan 2026 16:08:54 -0800
Subject: [PATCH] add showClear and size props to ElementPicker

---
 src/lib/components/sidebar/SearchContent.svelte           | 1 +
 src/lib/components/ui/element-picker/ElementPicker.svelte | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/lib/components/sidebar/SearchContent.svelte b/src/lib/components/sidebar/SearchContent.svelte
index fa88ec55..4467fa5f 100644
--- a/src/lib/components/sidebar/SearchContent.svelte
+++ b/src/lib/components/sidebar/SearchContent.svelte
@@ -363,6 +363,7 @@
 				multiple={true}
 				includeAny={true}
 				contained={true}
+				showClear={true}
 			/>
 		</div>
 
diff --git a/src/lib/components/ui/element-picker/ElementPicker.svelte b/src/lib/components/ui/element-picker/ElementPicker.svelte
index 1a5be14e..53bb2ca0 100644
--- a/src/lib/components/ui/element-picker/ElementPicker.svelte
+++ b/src/lib/components/ui/element-picker/ElementPicker.svelte
@@ -17,6 +17,7 @@
 		mode?: 'auto' | 'segmented' | 'dropdown'
 		contained?: boolean
 		size?: 'small' | 'medium' | 'large'
+		showClear?: boolean
 		disabled?: boolean
 		class?: string
 	}
@@ -29,10 +30,14 @@
 		mode = 'auto',
 		contained = false,
 		size = 'medium',
+		showClear = false,
 		disabled = false,
 		class: className = ''
 	}: Props = $props()
 
+	// Map size to segmented control size (small stays small, medium/large become regular)
+	const segmentedSize = $derived(size === 'small' ? 'small' : 'regular')
+
 	// Responsive detection for auto mode
 	let isMobile = $state(false)
 
@@ -115,6 +120,8 @@
 		{multiple}
 		{includeAny}
 		{contained}
+		{showClear}
+		size={segmentedSize}
 		disabled={disabled}
 		class={className}
 	/>