@dorsk/tsumikit 0.11.0 → 0.11.2

package/dist/components/organisms/FilterSearchBar.svelte

@@ -20,6 +20,11 @@
 	import Badge from '../atoms/Badge.svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import { filters, freeText, type Query } from '../../query/ast';
+	import {
+		autoQuoteEdit,
+		backspaceEmptyQuotes,
+		closingQuoteExit
+	} from '../../query/edit';
 	import { findField, operatorById, type Schema } from '../../query/schema';
 	import { parse } from '../../query/parser';
 	import { suggest, type SuggestState } from '../../query/suggest';
@@ -29,6 +34,7 @@
 		value = $bindable(''),
 		placeholder = 'artist:"Daft Punk" AND year>=2000',
 		showChips = true,
+		autoQuote = true,
 		onchange,
 		onsubmit
 	}: {
@@ -38,6 +44,12 @@
 		placeholder?: string;
 		/** Render the parsed, removable filter chips under the bar. */
 		showChips?: boolean;
+		/**
+		 * When a string field's value step opens (`title:`), auto-insert a `""`
+		 * pair with the caret inside so multi-word values stay together; Tab exits
+		 * the quotes. Set false for bare typing where spaces split the value.
+		 */
+		autoQuote?: boolean;
 		/** Fires the parsed AST on every change — feed this to your backend. */
 		onchange?: (query: Query, raw: string) => void;
 		/** Fires on Enter / clear / chip-remove with the raw query string. */
@@ -45,9 +57,11 @@
 	} = $props();
 
 	let el = $state<HTMLInputElement | null>(null);
+	let menuEl = $state<HTMLDivElement | null>(null);
 	let menu = $state<SuggestState | null>(null);
 	let active = $state(0);
 	let open = $state(false);
+	let keyboardNavigation = $state(false);
 	let reqId = 0;
 
 	// Parsed view (drives the removable chips + the onchange AST).
@@ -60,10 +74,42 @@
 		onchange?.(ast, value);
 	});
 
+	// Keep keyboard navigation visible without moving the menu under the pointer
+	// when the active option changes because of hover.
+	$effect(() => {
+		active;
+		if (!keyboardNavigation || !open || !menuEl) return;
+		menuEl
+			.querySelector<HTMLElement>('.fsb__opt.is-active')
+			?.scrollIntoView({ block: 'nearest' });
+	});
+
 	function labelFor(fieldName: string): string {
 		return findField(schema, fieldName)?.label ?? fieldName;
 	}
 
+	function setCaret(pos: number) {
+		queueMicrotask(() => {
+			if (!el) return;
+			el.focus();
+			el.setSelectionRange(pos, pos);
+		});
+	}
+
+	function oninput(e: Event) {
+		if (autoQuote && el && (e as InputEvent).inputType?.startsWith('insert')) {
+			const pos = el.selectionStart ?? value.length;
+			const edit = autoQuoteEdit(schema, value, pos);
+			if (edit) {
+				value = edit.value;
+				setCaret(edit.pos);
+				queueMicrotask(refresh);
+				return;
+			}
+		}
+		refresh();
+	}
+
 	async function refresh() {
 		if (!el) return;
 		const pos = el.selectionStart ?? value.length;
@@ -72,6 +118,7 @@
 		if (id !== reqId) return; // a newer keystroke won
 		menu = next;
 		active = 0;
+		keyboardNavigation = false;
 		open = !!next && next.items.length > 0;
 	}
 
@@ -81,18 +128,51 @@
 		if (!s) return;
 		const [a, b] = menu.span;
 		value = value.slice(0, a) + s.insert + value.slice(b);
+		let caret = s.caret;
+		// A field/operator pick that opens a string field's value step gets the
+		// same auto-quotes as manual typing.
+		if (autoQuote && s.advance) {
+			const edit = autoQuoteEdit(schema, value, caret);
+			if (edit) {
+				value = edit.value;
+				caret = edit.pos;
+			}
+		}
 		// Restore caret after the inserted text, then re-run suggestions if the
 		// step advanced (field → operator → value) so the flow keeps going.
 		queueMicrotask(() => {
 			if (!el) return;
 			el.focus();
-			el.setSelectionRange(s.caret, s.caret);
+			el.setSelectionRange(caret, caret);
 			if (s.advance) refresh();
 			else open = false;
 		});
 	}
 
 	function onkeydown(e: KeyboardEvent) {
+		if (autoQuote && el) {
+			const pos = el.selectionStart ?? value.length;
+			if (e.key === 'Tab') {
+				// Inside auto-quotes Tab exits them (takes priority over accepting a
+				// dropdown item); elsewhere it falls through to accept.
+				const exit = closingQuoteExit(value, pos);
+				if (exit !== null) {
+					e.preventDefault();
+					open = false;
+					setCaret(exit);
+					return;
+				}
+			} else if (e.key === 'Backspace') {
+				const edit = backspaceEmptyQuotes(value, pos);
+				if (edit) {
+					e.preventDefault();
+					value = edit.value;
+					setCaret(edit.pos);
+					queueMicrotask(refresh);
+					return;
+				}
+			}
+		}
 		if (!open || !menu) {
 			if (e.key === 'Enter') submit();
 			return;
@@ -100,10 +180,12 @@
 		switch (e.key) {
 			case 'ArrowDown':
 				e.preventDefault();
+				keyboardNavigation = true;
 				active = (active + 1) % menu.items.length;
 				break;
 			case 'ArrowUp':
 				e.preventDefault();
+				keyboardNavigation = true;
 				active = (active - 1 + menu.items.length) % menu.items.length;
 				break;
 			case 'Enter':
@@ -150,7 +232,7 @@
 			spellcheck="false"
 			autocomplete="off"
 			{placeholder}
-			oninput={refresh}
+			{oninput}
 			onclick={refresh}
 			onkeyup={(e) => {
 				if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') refresh();
@@ -176,7 +258,7 @@
 	</div>
 
 	{#if open && menu}
-		<div class="fsb__menu" role="listbox" aria-label={kindLabel[menu.kind]}>
+		<div bind:this={menuEl} class="fsb__menu" role="listbox" aria-label={kindLabel[menu.kind]}>
 			<div class="fsb__menu-head">{kindLabel[menu.kind]}</div>
 			{#each menu.items as item, i (item.insert + i)}
 				<button
@@ -186,7 +268,10 @@
 					role="option"
 					aria-selected={i === active}
 					onmousedown={(e) => e.preventDefault()}
-					onmouseenter={() => (active = i)}
+					onmouseenter={() => {
+						keyboardNavigation = false;
+						active = i;
+					}}
 					onclick={() => accept(i)}
 				>
 					<span class="fsb__opt-label">{item.label}</span>

package/dist/components/organisms/FilterSearchBar.svelte.d.ts

@@ -7,6 +7,12 @@ type $$ComponentProps = {
     placeholder?: string;
     /** Render the parsed, removable filter chips under the bar. */
     showChips?: boolean;
+    /**
+     * When a string field's value step opens (`title:`), auto-insert a `""`
+     * pair with the caret inside so multi-word values stay together; Tab exits
+     * the quotes. Set false for bare typing where spaces split the value.
+     */
+    autoQuote?: boolean;
     /** Fires the parsed AST on every change — feed this to your backend. */
     onchange?: (query: Query, raw: string) => void;
     /** Fires on Enter / clear / chip-remove with the raw query string. */

package/dist/query/edit.d.ts

@@ -0,0 +1,27 @@
+import { type Schema } from './schema';
+/**
+ * When the text just before `pos` completes a string field's operator
+ * (`title:` / `title!:`) and no quote already follows, return the value with an
+ * empty `""` pair spliced in at `pos` and the caret parked between them. Returns
+ * `null` when it does not apply.
+ */
+export declare function autoQuoteEdit(schema: Schema, value: string, pos: number): {
+    value: string;
+    pos: number;
+} | null;
+/** True when the caret sits inside an open quote. */
+export declare function insideQuoteAtCaret(value: string, pos: number): boolean;
+/**
+ * If the caret is inside a quote and its closing quote follows, return the index
+ * just past that quote (where Tab should move the caret to); otherwise `null`.
+ */
+export declare function closingQuoteExit(value: string, pos: number): number | null;
+/**
+ * If the caret sits between an empty matching quote pair (`"|"`), return the
+ * value with both quotes removed so a Backspace clears an unwanted auto-quote
+ * instead of leaving an orphan.
+ */
+export declare function backspaceEmptyQuotes(value: string, pos: number): {
+    value: string;
+    pos: number;
+} | null;

package/dist/query/edit.js

@@ -0,0 +1,79 @@
+// ─────────────────────────────────────────────────────────────────────────
+// Editor affordances — pure text edits an input host applies as the user types.
+//
+// The parser treats an unquoted value as ending at the first space, so
+// `title:star wars` means `title:star` + free-text `wars`. To type a multi-word
+// value the user otherwise has to add the quotes by hand. These helpers let the
+// FilterSearchBar auto-insert the `""` pair the moment a string field's value
+// step opens, so spaces land inside the quotes — the already-supported phrase
+// form — without any grammar change. UI-free and framework-agnostic.
+// ─────────────────────────────────────────────────────────────────────────
+import { findField } from './schema';
+// A field name immediately followed by a string operator (`:` contains / `!:`
+// not-contains), anchored at the caret.
+const STRING_CLAUSE = /([A-Za-z_][\w-]*)(!?:)$/;
+function isQuote(c) {
+    return c === '"' || c === "'";
+}
+/**
+ * When the text just before `pos` completes a string field's operator
+ * (`title:` / `title!:`) and no quote already follows, return the value with an
+ * empty `""` pair spliced in at `pos` and the caret parked between them. Returns
+ * `null` when it does not apply.
+ */
+export function autoQuoteEdit(schema, value, pos) {
+    if (isQuote(value[pos]))
+        return null;
+    const m = STRING_CLAUSE.exec(value.slice(0, pos));
+    if (!m)
+        return null;
+    const field = findField(schema, m[1]);
+    if (field?.type !== 'string')
+        return null;
+    return { value: `${value.slice(0, pos)}""${value.slice(pos)}`, pos: pos + 1 };
+}
+// Scan from the start tracking quote state (spaces inside quotes are NOT
+// boundaries), so the caret's quote context is correct even for `"star wars"`.
+function openQuoteAt(value, pos) {
+    let quote = null;
+    for (let i = 0; i < pos; i++) {
+        const c = value[i];
+        if (quote) {
+            if (c === quote)
+                quote = null;
+        }
+        else if (isQuote(c)) {
+            quote = c;
+        }
+    }
+    return quote;
+}
+/** True when the caret sits inside an open quote. */
+export function insideQuoteAtCaret(value, pos) {
+    return openQuoteAt(value, pos) !== null;
+}
+/**
+ * If the caret is inside a quote and its closing quote follows, return the index
+ * just past that quote (where Tab should move the caret to); otherwise `null`.
+ */
+export function closingQuoteExit(value, pos) {
+    const quote = openQuoteAt(value, pos);
+    if (!quote)
+        return null;
+    for (let i = pos; i < value.length; i++) {
+        if (value[i] === quote)
+            return i + 1;
+    }
+    return null;
+}
+/**
+ * If the caret sits between an empty matching quote pair (`"|"`), return the
+ * value with both quotes removed so a Backspace clears an unwanted auto-quote
+ * instead of leaving an orphan.
+ */
+export function backspaceEmptyQuotes(value, pos) {
+    const open = value[pos - 1];
+    if (!isQuote(open) || value[pos] !== open)
+        return null;
+    return { value: value.slice(0, pos - 1) + value.slice(pos + 1), pos: pos - 1 };
+}

package/dist/query/index.d.ts

@@ -1,5 +1,6 @@
 export type { AndNode, ExprNode, FilterNode, LeafNode, NotNode, OrNode, Query, QueryNode, TextNode, } from './ast';
 export { filters, freeText, walk } from './ast';
+export { autoQuoteEdit, backspaceEmptyQuotes, closingQuoteExit, insideQuoteAtCaret, } from './edit';
 export { parse } from './parser';
 export { compilePredicate, serialize, serializeFilter, toSql } from './query';
 export type { FieldDef, FieldType, Operator, OperatorId, Schema, ValueOption, ValueProvider, } from './schema';

package/dist/query/index.js

@@ -3,6 +3,7 @@
 // no Svelte, no DOM. A host app supplies a `Schema` (optionally with async
 // `ValueProvider`s) and consumes the `Query` AST against its own backend.
 export { filters, freeText, walk } from './ast';
+export { autoQuoteEdit, backspaceEmptyQuotes, closingQuoteExit, insideQuoteAtCaret, } from './edit';
 export { parse } from './parser';
 export { compilePredicate, serialize, serializeFilter, toSql } from './query';
 export { defaultOperator, findField, OPERATORS, operatorByCode, operatorById, operatorsFor, resolveValues, } from './schema';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",