@r2digisolutions/components 0.1.7 → 0.3.0

package/dist/components/molecules/ContextMenu/ContextMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import SearchInput from '../SearchInput/SearchInput.svelte';
 
 	export interface ContextMenuItem {
 		id: string;
@@ -7,7 +8,12 @@
 		disabled?: boolean;
 		destructive?: boolean;
 		separator?: boolean;
+		/** Non-interactive section header (category title). */
+		header?: boolean;
 		shortcut?: string;
+		/** Group label — items sharing a category are shown under one header. */
+		category?: string;
+		description?: string;
 	}
 
 	export interface ContextMenuAnchor {
@@ -20,60 +26,157 @@
 		open?: boolean;
 		/** Screen coordinates for the menu (clientX / clientY). */
 		anchor?: ContextMenuAnchor | null;
+		/** Show a search field and filter items by label / description / category. */
+		searchable?: boolean;
+		searchPlaceholder?: string;
 		class?: string;
 		children?: Snippet;
 		onselect?: (id: string, item: ContextMenuItem) => void;
+		onclose?: () => void;
 	}
 
 	let {
 		items = [],
 		open = $bindable(false),
 		anchor = $bindable<ContextMenuAnchor | null>(null),
+		searchable = false,
+		searchPlaceholder = 'Search…',
 		class: className = '',
 		children,
-		onselect
+		onselect,
+		onclose
 	}: ContextMenuProps = $props();
 
 	let menuX = $state(0);
 	let menuY = $state(0);
 	let menuEl = $state<HTMLDivElement | null>(null);
 	let highlighted = $state(-1);
-	/** Ignore the click/pointer that browsers fire right after `contextmenu`. */
-	let suppressOutsideUntil = $state(0);
+	let query = $state('');
+	const menuId = `ctx-menu-${Math.random().toString(36).slice(2, 9)}`;
+
+	const filteredItems = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return items;
+		return items.filter((item) => {
+			if (item.separator || item.header) return false;
+			return (
+				item.label.toLowerCase().includes(q) ||
+				item.description?.toLowerCase().includes(q) ||
+				item.category?.toLowerCase().includes(q) ||
+				item.id.toLowerCase().includes(q)
+			);
+		});
+	});
+
+	/** Flat list with auto category headers when items carry `category`. */
+	const displayItems = $derived.by(() => {
+		const src = filteredItems;
+		const hasCategories = src.some((i) => i.category && !i.header && !i.separator);
+		if (!hasCategories) return src;
+
+		const actionable = src
+			.filter((i) => !i.separator && !i.header)
+			.slice()
+			.sort((a, b) => {
+				const ca = a.category ?? 'Other';
+				const cb = b.category ?? 'Other';
+				if (ca !== cb) return ca.localeCompare(cb);
+				return a.label.localeCompare(b.label);
+			});
+
+		const out: ContextMenuItem[] = [];
+		let lastCat = '';
+		let seq = 0;
+		for (const item of actionable) {
+			const cat = item.category ?? 'Other';
+			if (cat !== lastCat) {
+				if (out.length) out.push({ id: `sep:${seq++}`, label: '', separator: true });
+				out.push({ id: `hdr:${seq++}`, label: cat, header: true });
+				lastCat = cat;
+			}
+			out.push(item);
+		}
+		return out;
+	});
 
 	const enabledIndexes = $derived(
-		items.map((item, i) => (item.separator || item.disabled ? -1 : i)).filter((i) => i !== -1)
+		displayItems
+			.map((item, i) => (item.separator || item.header || item.disabled ? -1 : i))
+			.filter((i) => i !== -1)
 	);
 
+	function clampMenuPosition(x: number, y: number) {
+		if (!menuEl) return;
+		const pad = 8;
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const mw = menuEl.offsetWidth;
+		const mh = menuEl.offsetHeight;
+		if (mw <= 0 || mh <= 0) {
+			menuX = x;
+			menuY = y;
+			return;
+		}
+		let nextX = x;
+		let nextY = y;
+		// Flip if overflowing right / bottom
+		if (nextX + mw > vw - pad) nextX = x - mw;
+		if (nextY + mh > vh - pad) nextY = y - mh;
+		// Always keep fully inside the viewport
+		menuX = Math.min(Math.max(pad, nextX), Math.max(pad, vw - mw - pad));
+		menuY = Math.min(Math.max(pad, nextY), Math.max(pad, vh - mh - pad));
+	}
+
 	function placeMenu(x: number, y: number) {
 		menuX = x;
 		menuY = y;
 		requestAnimationFrame(() => {
-			if (!menuEl) return;
-			const vw = window.innerWidth;
-			const vh = window.innerHeight;
-			const { offsetWidth: mw, offsetHeight: mh } = menuEl;
-			menuX = x + mw > vw - 8 ? Math.max(8, x - mw) : x;
-			menuY = y + mh > vh - 8 ? Math.max(8, y - mh) : y;
+			clampMenuPosition(x, y);
 		});
 	}
 
+	function showMenu() {
+		if (!menuEl) return;
+		if (!menuEl.matches(':popover-open')) menuEl.showPopover();
+	}
+
+	function hideMenu() {
+		if (menuEl?.matches(':popover-open')) menuEl.hidePopover();
+	}
+
 	function openAt(x: number, y: number) {
 		anchor = { x, y };
 		open = true;
 		highlighted = -1;
-		suppressOutsideUntil = performance.now() + 500;
-		placeMenu(x, y);
+		query = '';
+		menuX = x;
+		menuY = y;
+		// Defer past the contextmenu/mouseup that would light-dismiss a popover=auto.
+		// Measure after showPopover — closed popovers have display:none (0×0).
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				if (!open) return;
+				showMenu();
+				requestAnimationFrame(() => clampMenuPosition(x, y));
+			});
+		});
 	}
 
 	function close() {
+		if (menuEl?.matches(':popover-open')) {
+			menuEl.hidePopover();
+			return;
+		}
+		if (!open && !anchor) return;
 		open = false;
 		anchor = null;
 		highlighted = -1;
+		query = '';
+		onclose?.();
 	}
 
 	function selectItem(item: ContextMenuItem) {
-		if (item.disabled || item.separator) return;
+		if (item.disabled || item.separator || item.header) return;
 		onselect?.(item.id, item);
 		close();
 	}
@@ -84,28 +187,44 @@
 		openAt(event.clientX, event.clientY);
 	}
 
-	function isOutsideEvent(event: Event) {
-		if (!open) return false;
-		if (performance.now() < suppressOutsideUntil) return false;
-		const target = event.target as Node | null;
-		if (menuEl && target && menuEl.contains(target)) return false;
-		return true;
-	}
-
-	function handleOutsidePointer(event: PointerEvent) {
-		if (event.button === 2) return;
-		if (!isOutsideEvent(event)) return;
-		close();
+	function onToggle(event: ToggleEvent) {
+		if (event.newState === 'open') {
+			open = true;
+			return;
+		}
+		open = false;
+		anchor = null;
+		highlighted = -1;
+		query = '';
+		onclose?.();
 	}
 
-	function handleOutsideClick(event: MouseEvent) {
+	/** Manual popover: close on outside pointer. Keep open on scroll —
+	 * the menu is position:fixed, and closing on scroll also kills scrolling
+	 * inside a long/searchable menu.
+	 * Right-click (button 2) is ignored so retargeting another item keeps the menu open. */
+	function onDocPointerDown(event: PointerEvent) {
+		if (!open) return;
 		if (event.button === 2) return;
-		if (!isOutsideEvent(event)) return;
+		const t = event.target;
+		if (t instanceof Node && menuEl?.contains(t)) return;
 		close();
 	}
 
 	function handleKeydown(event: KeyboardEvent) {
-		if (!open) return;
+		if (!open && !menuEl?.matches(':popover-open')) return;
+		const tag = (event.target as HTMLElement)?.tagName;
+		if (tag === 'INPUT' || tag === 'TEXTAREA') {
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				close();
+			}
+			if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
+				/* allow nav from search */
+			} else {
+				return;
+			}
+		}
 		switch (event.key) {
 			case 'Escape':
 				event.preventDefault();
@@ -121,8 +240,9 @@
 				break;
 			case 'Enter':
 			case ' ': {
+				if (tag === 'INPUT' && event.key === ' ') return;
 				event.preventDefault();
-				const item = highlighted >= 0 ? items[highlighted] : undefined;
+				const item = highlighted >= 0 ? displayItems[highlighted] : undefined;
 				if (item) selectItem(item);
 				break;
 			}
@@ -139,49 +259,78 @@
 		}
 	}
 
-	/** Render menu in document.body so overflow/transform ancestors cannot clip it. */
-	function portal(node: HTMLElement) {
-		document.body.appendChild(node);
-		return {
-			destroy() {
-				node.remove();
-			}
-		};
-	}
+	$effect(() => {
+		if (!open || !anchor) {
+			if (!open) hideMenu();
+			return;
+		}
+		const x = anchor.x;
+		const y = anchor.y;
+		highlighted = -1;
+		menuX = x;
+		menuY = y;
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				if (!open) return;
+				showMenu();
+				requestAnimationFrame(() => clampMenuPosition(x, y));
+			});
+		});
+	});
 
 	$effect(() => {
-		if (!open || !anchor) return;
-		suppressOutsideUntil = performance.now() + 500;
-		placeMenu(anchor.x, anchor.y);
+		if (!open) return;
+		// Bind after current pointer gesture ends so the opening right-click doesn't close us.
+		const timer = window.setTimeout(() => {
+			document.addEventListener('pointerdown', onDocPointerDown, true);
+		}, 0);
+		return () => {
+			window.clearTimeout(timer);
+			document.removeEventListener('pointerdown', onDocPointerDown, true);
+		};
 	});
 </script>
 
-<svelte:window
-	onpointerdown={handleOutsidePointer}
-	onclick={handleOutsideClick}
-	onkeydown={handleKeydown}
-/>
+<svelte:window onkeydown={handleKeydown} />
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class={['h-full min-h-0 w-full', className]} oncontextmenu={handleContextMenu}>
-	{#if children}
+{#if children}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class={['h-full min-h-0 w-full', className]} oncontextmenu={handleContextMenu}>
 		{@render children()}
-	{/if}
-</div>
+	</div>
+{/if}
 
-{#if open}
-	<div
-		use:portal
-		bind:this={menuEl}
-		role="menu"
-		tabindex={-1}
-		aria-label="Context menu"
-		style="position:fixed;top:{menuY}px;left:{menuX}px;z-index:9999;"
-		class="min-w-44 rounded-xl border border-border bg-surface-elevated p-1.5 shadow-xl outline-none"
-	>
-		{#each items as item, index (item.id)}
+<!-- Manual popover — context menus must not light-dismiss on the opening mouseup -->
+<div
+	bind:this={menuEl}
+	id={menuId}
+	popover="manual"
+	role="menu"
+	tabindex={-1}
+	aria-label="Context menu"
+	ontoggle={onToggle}
+	style={`top:${menuY}px;left:${menuX}px;margin:0;`}
+	class={[
+		'context-menu-popover flex max-h-[min(28rem,70vh)] min-w-52 max-w-72 flex-col overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-xl outline-none',
+		!children && className
+	]}
+>
+	{#if searchable}
+		<div class="border-b border-border p-2">
+			<SearchInput bind:value={query} placeholder={searchPlaceholder} size="sm" />
+		</div>
+	{/if}
+	<div class="min-h-0 flex-1 overflow-auto p-1.5">
+		{#each displayItems as item, index (item.id)}
 			{#if item.separator}
 				<div class="my-1 h-px bg-border" role="separator"></div>
+			{:else if item.header}
+				<p
+					class="px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted"
+					role="presentation"
+				>
+					{item.label}
+				</p>
 			{:else}
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -197,22 +346,44 @@
 						highlighted = -1;
 					}}
 					class={[
-						'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors',
+						'flex cursor-pointer items-start justify-between gap-3 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors',
 						item.disabled && 'cursor-not-allowed opacity-40',
 						highlighted === index && !item.disabled && 'bg-surface-overlay',
 						item.destructive ? 'text-red-600 dark:text-red-400' : 'text-primary'
 					]}
 				>
-					<span class="truncate">{item.label}</span>
+					<span class="min-w-0">
+						<span class="block truncate">{item.label}</span>
+						{#if item.description}
+							<span class="block truncate text-[11px] font-normal text-muted">{item.description}</span>
+						{/if}
+					</span>
 					{#if item.shortcut}
 						<kbd
-							class="shrink-0 rounded border border-border bg-surface-overlay px-1.5 py-0.5 font-mono text-[10px] text-secondary"
+							class="mt-0.5 shrink-0 rounded border border-border bg-surface-overlay px-1.5 py-0.5 font-mono text-[10px] text-secondary"
 						>
 							{item.shortcut}
 						</kbd>
 					{/if}
 				</div>
 			{/if}
+		{:else}
+			<p class="px-3 py-6 text-center text-xs text-muted">No matches</p>
 		{/each}
 	</div>
-{/if}
+</div>
+
+<style>
+	/* UA popover defaults to inset:0 — position via top/left only.
+	   Tailwind `flex` overrides UA display:none — hide until open. */
+	.context-menu-popover {
+		position: fixed;
+	}
+	.context-menu-popover:not(:popover-open) {
+		display: none !important;
+	}
+	.context-menu-popover:popover-open {
+		inset: unset;
+		display: flex;
+	}
+</style>

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

@@ -5,7 +5,12 @@ export interface ContextMenuItem {
     disabled?: boolean;
     destructive?: boolean;
     separator?: boolean;
+    /** Non-interactive section header (category title). */
+    header?: boolean;
     shortcut?: string;
+    /** Group label — items sharing a category are shown under one header. */
+    category?: string;
+    description?: string;
 }
 export interface ContextMenuAnchor {
     x: number;
@@ -16,9 +21,13 @@ interface ContextMenuProps {
     open?: boolean;
     /** Screen coordinates for the menu (clientX / clientY). */
     anchor?: ContextMenuAnchor | null;
+    /** Show a search field and filter items by label / description / category. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
     class?: string;
     children?: Snippet;
     onselect?: (id: string, item: ContextMenuItem) => void;
+    onclose?: () => void;
 }
 declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open" | "anchor">;
 type ContextMenu = ReturnType<typeof ContextMenu>;

package/dist/components/molecules/ExpressionEditor/ExpressionEditor.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/ExpressionEditor/ExpressionEditor.stories.js

@@ -0,0 +1,8 @@
+import ExpressionEditorStory from './ExpressionEditorStory.svelte';
+const meta = {
+    title: 'Molecules/ExpressionEditor',
+    component: ExpressionEditorStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/ExpressionEditor/ExpressionEditor.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import CodeEditor from '../CodeEditor/CodeEditor.svelte';
+	import Chip from '../../atoms/Chip/Chip.svelte';
+
+	interface ExpressionEditorProps {
+		value?: string;
+		fields?: string[];
+		placeholder?: string;
+		error?: string;
+		validate?: (value: string) => string | null;
+		class?: string;
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		fields = [],
+		placeholder = 'e.g. price * quantity',
+		error = '',
+		validate,
+		class: className = '',
+		onchange
+	}: ExpressionEditorProps = $props();
+
+	const validationError = $derived(validate?.(value) ?? error ?? '');
+
+	function insertField(field: string) {
+		const needsSpace = value.length > 0 && !/\s$/.test(value);
+		value = `${value}${needsSpace ? ' ' : ''}${field}`;
+		onchange?.(value);
+	}
+</script>
+
+<div class={['flex flex-col gap-2', className]} data-expression-editor>
+	{#if fields.length}
+		<div class="flex flex-wrap gap-1">
+			{#each fields as field (field)}
+				<button type="button" onclick={() => insertField(field)}>
+					<Chip size="sm" variant="default">{field}</Chip>
+				</button>
+			{/each}
+		</div>
+	{/if}
+	<CodeEditor
+		bind:value
+		language="js"
+		{placeholder}
+		showLineNumbers={false}
+		minHeight={72}
+		onchange={onchange}
+		class="rounded-xl"
+	/>
+	{#if validationError}
+		<p class="text-xs text-red-600">{validationError}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,12 @@
+interface ExpressionEditorProps {
+    value?: string;
+    fields?: string[];
+    placeholder?: string;
+    error?: string;
+    validate?: (value: string) => string | null;
+    class?: string;
+    onchange?: (value: string) => void;
+}
+declare const ExpressionEditor: import("svelte").Component<ExpressionEditorProps, {}, "value">;
+type ExpressionEditor = ReturnType<typeof ExpressionEditor>;
+export default ExpressionEditor;

package/dist/components/molecules/ExpressionEditor/ExpressionEditorStory.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import ExpressionEditor from './ExpressionEditor.svelte';
+	let value = $state('price * quantity');
+</script>
+
+<div class="mx-auto max-w-lg p-4">
+	<ExpressionEditor
+		bind:value
+		fields={['price', 'quantity', 'discount', 'tax']}
+		validate={(v) => (!v.trim() ? 'Expression required' : null)}
+	/>
+</div>

package/dist/components/molecules/ExpressionEditor/ExpressionEditorStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ExpressionEditorStory: import("svelte").Component<Record<string, never>, {}, "">;
+type ExpressionEditorStory = ReturnType<typeof ExpressionEditorStory>;
+export default ExpressionEditorStory;

package/dist/components/molecules/FilterList/FilterList.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/FilterList/FilterList.stories.js

@@ -0,0 +1,8 @@
+import FilterListStory from './FilterListStory.svelte';
+const meta = {
+    title: 'Molecules/FilterList',
+    component: FilterListStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/FilterList/FilterList.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import Chip from '../../atoms/Chip/Chip.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import {
+		emptyFilterGroup,
+		type AdvancedFilterGroup,
+		type FilterFieldDef
+	} from '../../../utils/advancedFilters.js';
+	import {
+		groupToFilterItems,
+		groupToQueryString,
+		removeRuleFromGroup
+	} from '../../../utils/queryBridge.js';
+
+	interface FilterListProps {
+		fields?: FilterFieldDef[];
+		query?: AdvancedFilterGroup;
+		/** Optional QueryBar string mirror */
+		queryString?: string;
+		emptyLabel?: string;
+		clearAllLabel?: string;
+		showQueryString?: boolean;
+		class?: string;
+		onchange?: (query: AdvancedFilterGroup) => void;
+		onclear?: (ruleId: string) => void;
+		onclearAll?: () => void;
+		onquerystring?: (value: string) => void;
+	}
+
+	let {
+		fields = [],
+		query = $bindable(emptyFilterGroup()),
+		queryString = $bindable(''),
+		emptyLabel = 'No active filters',
+		clearAllLabel = 'Clear all',
+		showQueryString = false,
+		class: className = '',
+		onchange,
+		onclear,
+		onclearAll,
+		onquerystring
+	}: FilterListProps = $props();
+
+	const items = $derived(groupToFilterItems(query, fields));
+
+	function syncString(next: AdvancedFilterGroup) {
+		const s = groupToQueryString(next, fields);
+		queryString = s;
+		onquerystring?.(s);
+	}
+
+	function remove(id: string) {
+		query = removeRuleFromGroup(query, id);
+		syncString(query);
+		onchange?.(query);
+		onclear?.(id);
+	}
+
+	function clearAll() {
+		query = emptyFilterGroup(query.combinator);
+		syncString(query);
+		onchange?.(query);
+		onclearAll?.();
+	}
+
+</script>
+
+<div
+	class={['flex flex-col gap-2', className]}
+	role="group"
+	aria-label="Active filters"
+	data-filter-list
+>
+	{#if items.length === 0}
+		<p class="text-xs text-muted">{emptyLabel}</p>
+	{:else}
+		<div class="flex flex-wrap items-center gap-1.5">
+			{#each items as item (item.id)}
+				<span class="inline-flex items-center gap-1">
+					<Chip
+						size="sm"
+						variant="primary"
+						dismissible
+						ondismiss={() => remove(item.id)}
+					>
+						{item.label}
+					</Chip>
+				</span>
+			{/each}
+			{#if items.length > 0}
+				<Button variant="ghost" size="sm" onclick={clearAll}>{clearAllLabel}</Button>
+			{/if}
+		</div>
+	{/if}
+
+	{#if showQueryString && queryString}
+		<code class="block truncate rounded-lg bg-surface-overlay px-2 py-1 font-mono text-[11px] text-muted">
+			{queryString}
+		</code>
+	{/if}
+</div>