@joewinke/jatui 0.6.2 → 0.6.3

package/dist/components/SearchDropdown.svelte

@@ -35,6 +35,8 @@
 		triggerAttrs,
 		embedded = false,
 		onChange,
+		onCreate,
+		createLabel = (q: string) => `Create "${q}"`,
 	}: {
 		value: string;
 		groups: SearchDropdownGroup[];
@@ -60,6 +62,16 @@
 		/** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
 		embedded?: boolean;
 		onChange: (value: string) => void;
+		/**
+		 * When set, an always-present "create" row is rendered as the last option
+		 * whenever the search box is non-empty — it survives a zero-match filter (so
+		 * a brand-new value the list doesn't contain is still actionable) and is
+		 * called with the trimmed query. Enables the "add something not in the list"
+		 * pattern (e.g. create a reviewer by typed name).
+		 */
+		onCreate?: (query: string) => void;
+		/** Label for the create row; receives the trimmed query. */
+		createLabel?: (query: string) => string;
 	} = $props();
 
 	let open = $state(false);
@@ -114,6 +126,14 @@
 		return opts;
 	});
 
+	// The always-present "create" row shows whenever onCreate is wired and the
+	// search box has content — independent of whether anything matched, so a
+	// value the list doesn't contain is still actionable. It sits at keyboard
+	// index === flatOptions.length (one past the last real option).
+	const trimmedQuery = $derived(searchQuery.trim());
+	const canCreate = $derived(!!onCreate && trimmedQuery.length > 0);
+	const maxIndex = $derived(flatOptions.length - 1 + (canCreate ? 1 : 0));
+
 	// When search changes, reset highlight to first option (or to current value's position)
 	$effect(() => {
 		void filteredGroups;
@@ -128,6 +148,14 @@
 		onChange(optionValue);
 	}
 
+	function doCreate() {
+		const q = trimmedQuery;
+		if (!onCreate || !q) return;
+		open = false;
+		searchQuery = '';
+		onCreate(q);
+	}
+
 	function scrollHighlightedIntoView() {
 		tick().then(() => {
 			const el = optionListRef?.querySelector<HTMLElement>('[data-highlighted="true"]');
@@ -142,7 +170,7 @@
 			searchQuery = '';
 		} else if (e.key === 'ArrowDown') {
 			e.preventDefault();
-			highlightedIndex = Math.min(highlightedIndex + 1, flatOptions.length - 1);
+			highlightedIndex = Math.min(highlightedIndex + 1, maxIndex);
 			scrollHighlightedIntoView();
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault();
@@ -153,6 +181,8 @@
 			e.stopPropagation();
 			if (highlightedIndex >= 0 && highlightedIndex < flatOptions.length) {
 				select(flatOptions[highlightedIndex].value);
+			} else if (canCreate && highlightedIndex === flatOptions.length) {
+				doCreate();
 			}
 		}
 	}
@@ -281,9 +311,24 @@
 					</li>
 				{/each}
 			{/each}
-		{:else}
+		{:else if !canCreate}
 			<li class="sd-empty">No matches for "{searchQuery}"</li>
 		{/if}
+		{#if canCreate}
+			{@const createIdx = flatOptions.length}
+			<li>
+				<button
+					type="button"
+					onclick={doCreate}
+					class="sd-option sd-option-create"
+					class:sd-option-highlighted={highlightedIndex === createIdx}
+					data-highlighted={highlightedIndex === createIdx ? 'true' : undefined}
+				>
+					<span class="sd-option-icon">＋</span>
+					<span class="truncate">{createLabel(trimmedQuery)}</span>
+				</button>
+			</li>
+		{/if}
 	</ul>
 	{#if footer}
 		<div class="sd-footer">
@@ -691,6 +736,16 @@
 		color: var(--color-success, oklch(0.70 0.15 145));
 	}
 
+	/* Create row — the always-present "add something not in the list" action */
+	.sd-option-create {
+		border-top: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 20%, transparent);
+		color: color-mix(in oklch, var(--color-primary, oklch(0.65 0.15 250)) 90%, var(--color-base-content, oklch(0.80 0 0)));
+		font-weight: 600;
+	}
+	.sd-option-create .sd-option-icon {
+		color: var(--color-primary, oklch(0.65 0.15 250));
+	}
+
 	.sd-footer {
 		border-top: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 25%, transparent);
 	}

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

@@ -34,6 +34,16 @@ type $$ComponentProps = {
     /** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
     embedded?: boolean;
     onChange: (value: string) => void;
+    /**
+     * When set, an always-present "create" row is rendered as the last option
+     * whenever the search box is non-empty — it survives a zero-match filter (so
+     * a brand-new value the list doesn't contain is still actionable) and is
+     * called with the trimmed query. Enables the "add something not in the list"
+     * pattern (e.g. create a reviewer by typed name).
+     */
+    onCreate?: (query: string) => void;
+    /** Label for the create row; receives the trimmed query. */
+    createLabel?: (query: string) => string;
 };
 declare const SearchDropdown: import("svelte").Component<$$ComponentProps, {
     openDropdown: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",