@dorsk/tsumikit 0.10.0 → 0.11.1

package/dist/components/molecules/Tooltip.svelte

@@ -8,33 +8,50 @@
 	// only opens/closes under our control) and is positioned by the shared
 	// `place()` helper — so, like Popover, it escapes ancestor overflow/transform
 	// clipping and flips/clamps to stay in the viewport. Dependency-free.
+	//
+	// Rich mode: pass a `content` snippet instead of (or as well as — `content`
+	// wins) `text` and the panel renders arbitrary markup: key/value rows, code
+	// ids, CopyButton, small buttons. Closing is then hovercard-style: debounced
+	// by `closeDelay` and cancelled when the pointer (or focus) enters the panel,
+	// so users can move in to select/copy text or click a button. Note the
+	// role="tooltip" caveat: `aria-describedby` flattens the panel to its text.
 	import type { Snippet } from 'svelte';
 	import { place } from '../../floating';
 
 	let {
 		text,
+		content,
 		placement = 'top',
 		delay = 200,
+		closeDelay = 250,
 		trigger
 	}: {
-		text: string;
+		/** Plain-text bubble. Ignored when `content` is provided. */
+		text?: string;
+		/** Rich panel content — makes the panel hover-persistent and selectable. */
+		content?: Snippet;
 		placement?: 'top' | 'bottom' | 'left' | 'right';
+		/** Open delay (ms) on hover. */
 		delay?: number;
+		/** Grace period (ms) before closing — lets the pointer travel into the panel. */
+		closeDelay?: number;
 		trigger: Snippet;
 	} = $props();
 
 	const id = `tip-${Math.random().toString(36).slice(2, 8)}`;
 	let wrapEl = $state<HTMLElement | null>(null);
 	let tipEl = $state<HTMLElement | null>(null);
-	let timer: ReturnType<typeof setTimeout> | undefined;
+	let showTimer: ReturnType<typeof setTimeout> | undefined;
+	let hideTimer: ReturnType<typeof setTimeout> | undefined;
 
 	function reposition() {
 		if (wrapEl && tipEl) place(wrapEl, tipEl, `${placement}-center`, 6);
 	}
 
 	function show() {
-		clearTimeout(timer);
-		timer = setTimeout(() => {
+		clearTimeout(hideTimer); // pointer came back within the grace period
+		clearTimeout(showTimer);
+		showTimer = setTimeout(() => {
 			if (!tipEl || tipEl.matches(':popover-open')) return; // re-entry guard
 			tipEl.showPopover(); // top layer — displayed before we measure it
 			reposition();
@@ -42,12 +59,23 @@
 			addEventListener('resize', reposition);
 		}, delay);
 	}
-	function hide() {
-		clearTimeout(timer);
+	function hideNow() {
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
 		if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
 		removeEventListener('scroll', reposition, true);
 		removeEventListener('resize', reposition);
 	}
+	// Debounced close: cancelled if the pointer/focus enters the panel (rich
+	// mode) or returns to the trigger before `closeDelay` elapses.
+	function scheduleHide() {
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
+		hideTimer = setTimeout(hideNow, closeDelay);
+	}
+	function cancelHide() {
+		clearTimeout(hideTimer);
+	}
 
 	const FOCUSABLE = 'a[href],button,input,select,textarea,[tabindex]';
 	// Action: wire aria-describedby onto the trigger's focusable element AND the
@@ -58,19 +86,39 @@
 			| HTMLElement
 			| null;
 		target?.setAttribute('aria-describedby', id);
-		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hide();
+		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
 		node.addEventListener('mouseenter', show);
-		node.addEventListener('mouseleave', hide);
+		node.addEventListener('mouseleave', scheduleHide);
 		node.addEventListener('focusin', show);
-		node.addEventListener('focusout', hide);
+		node.addEventListener('focusout', scheduleHide);
 		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
 				target?.removeAttribute('aria-describedby');
 				node.removeEventListener('mouseenter', show);
-				node.removeEventListener('mouseleave', hide);
+				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', show);
-				node.removeEventListener('focusout', hide);
+				node.removeEventListener('focusout', scheduleHide);
+				node.removeEventListener('keydown', onkey);
+			}
+		};
+	}
+
+	// Action for the panel: in rich mode it accepts the pointer/focus, which
+	// cancels the pending close (hovercard persistence).
+	function panel(node: HTMLElement) {
+		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
+		node.addEventListener('mouseenter', cancelHide);
+		node.addEventListener('mouseleave', scheduleHide);
+		node.addEventListener('focusin', cancelHide);
+		node.addEventListener('focusout', scheduleHide);
+		node.addEventListener('keydown', onkey);
+		return {
+			destroy() {
+				node.removeEventListener('mouseenter', cancelHide);
+				node.removeEventListener('mouseleave', scheduleHide);
+				node.removeEventListener('focusin', cancelHide);
+				node.removeEventListener('focusout', scheduleHide);
 				node.removeEventListener('keydown', onkey);
 			}
 		};
@@ -81,9 +129,17 @@
 	{@render trigger()}
 </span>
 
-<span bind:this={tipEl} {id} role="tooltip" popover="manual" class="tip">
-	{text}
-</span>
+<div
+	bind:this={tipEl}
+	{id}
+	role="tooltip"
+	popover="manual"
+	class="tip"
+	class:rich={!!content}
+	use:panel
+>
+	{#if content}{@render content()}{:else}{text}{/if}
+</div>
 
 <style>
 	.tip-wrap {
@@ -106,6 +162,15 @@
 		white-space: normal;
 		pointer-events: none; /* non-interactive: never steals hover/clicks */
 	}
+	/* Rich panel: interactive + selectable so the user can move the pointer in
+	   to copy an id or click a button (the close grace period allows the trip). */
+	.tip.rich {
+		pointer-events: auto;
+		user-select: text;
+		max-width: min(22rem, calc(100vw - 2 * var(--sp-3)));
+		padding: var(--sp-2);
+		border-radius: var(--r-md);
+	}
 	/* Fade/scale in when shown (skipped under reduced-motion via the global rule). */
 	.tip:popover-open {
 		animation: tip-in 0.12s var(--ease);

package/dist/components/molecules/Tooltip.svelte.d.ts

@@ -1,8 +1,14 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
-    text: string;
+    /** Plain-text bubble. Ignored when `content` is provided. */
+    text?: string;
+    /** Rich panel content — makes the panel hover-persistent and selectable. */
+    content?: Snippet;
     placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Open delay (ms) on hover. */
     delay?: number;
+    /** Grace period (ms) before closing — lets the pointer travel into the panel. */
+    closeDelay?: number;
     trigger: Snippet;
 };
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;

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. */
@@ -64,6 +76,28 @@
 		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;
@@ -81,18 +115,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;
@@ -150,7 +217,7 @@
 			spellcheck="false"
 			autocomplete="off"
 			{placeholder}
-			oninput={refresh}
+			{oninput}
 			onclick={refresh}
 			onkeyup={(e) => {
 				if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') refresh();

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.10.0",
+  "version": "0.11.1",
   "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",