@warkypublic/svelix 0.1.43 → 0.1.46

package/dist/components/CardGrid/CardGrid.svelte

@@ -0,0 +1,1312 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { createVirtualizer, type SvelteVirtualizer } from '@tanstack/svelte-virtual';
+	import BetterMenu from '../BetterMenu/BetterMenu.svelte';
+	import type { BetterMenuInstanceItem } from '../BetterMenu/types.js';
+	import { GridlerResolveSpecAdapter } from '../Gridler/adapters/GridlerResolveSpecAdapter.js';
+	import { GridlerRestHeaderSpecAdapter } from '../Gridler/adapters/GridlerRestHeaderSpecAdapter.js';
+	import {
+		gridColumnFiltersToFilterOptions,
+		buildSearchFilters,
+		applyLocalFilter,
+	} from '../Gridler/utils/filters.js';
+	import { applyLocalSort, sortOrderToSortOptions } from '../Gridler/utils/sort.js';
+	import type { GridlerAdapterConfig, GridlerColumn } from '../Gridler/types.js';
+	import type { FilterOption } from '@warkypublic/resolvespec-js';
+	import CardGridFilterPanel from './CardGridFilterPanel.svelte';
+	import DefaultCard from './DefaultCard.svelte';
+	import {
+		toggleItemInSelection,
+		rangeSelect,
+		isItemSelected,
+		computeColumnsInRow,
+	} from './cardGrid.js';
+	import type {
+		CardGridColumn,
+		CardSortOption,
+		CardGridContextMenuItem,
+	} from './cardGrid.js';
+	import type { GridColumnSortOrder, GridColumnFilters } from '../Types/generic_grid.js';
+
+	interface Props {
+		// Column / display
+		columns: CardGridColumn[];
+		displayColumns?: string[];
+		cardMinWidth?: number;
+		cardGap?: number;
+		/**
+		 * Maximum number of columns shown on the front face.
+		 * When `resolvedColumns.length` exceeds this, a flip button appears and the
+		 * remaining columns are shown on the card's back face.
+		 */
+		cardMaxFrontColumns?: number;
+
+		// Custom rendering
+		/** Front-face snippet: (record, index, selected, focused) */
+		card?: Snippet<[Record<string, unknown>, number, boolean, boolean]>;
+		/** Back-face snippet for flip mode: (record, index, selected, focused) */
+		cardBack?: Snippet<[Record<string, unknown>, number, boolean, boolean]>;
+		empty?: Snippet;
+		skeleton?: Snippet;
+
+		// Data source
+		dataSource?: 'resolvespec' | 'headerspec' | 'local';
+		dataSourceOptions?: {
+			url?: string;
+			authToken?: string;
+			schema?: string;
+			entity?: string;
+			uniqueID?: string;
+			hotfields?: string[];
+			extraOptions?: Record<string, unknown>;
+		};
+		data?: Record<string, unknown>[] | (() => Promise<Record<string, unknown>[]>);
+		pageSize?: number;
+		uniqueID?: string;
+
+		// Search
+		searchValue?: string;
+		onSearchValueChange?: (v: string) => void;
+		serverSideSearch?: boolean;
+		searchColumns?: string[];
+		searchPlaceholder?: string;
+
+		// Sort
+		sortOrder?: GridColumnSortOrder;
+		onSortOrderChange?: (order: GridColumnSortOrder) => void;
+		sortOptions?: CardSortOption[];
+
+		// Filters
+		filters?: GridColumnFilters;
+		onFilterChange?: (filters: GridColumnFilters) => void;
+
+		// Selection
+		selectedItems?: Record<string, unknown>[];
+		onSelectedItemsChange?: (items: Record<string, unknown>[]) => void;
+		multiSelect?: boolean;
+
+		// Card events
+		onCardClick?: (record: Record<string, unknown>, index: number) => void;
+		onCardDblClick?: (record: Record<string, unknown>, index: number) => void;
+		onCardContextMenu?: (
+			record: Record<string, unknown>,
+			index: number,
+			x: number,
+			y: number,
+		) => void;
+
+		// Context menu
+		menuItems?: CardGridContextMenuItem[];
+
+		// Status (bindable)
+		total?: number;
+		loading?: boolean;
+		onLoadError?: (error: string) => void;
+
+		// Layout
+		class?: string;
+		toolbarEnd?: Snippet;
+	}
+
+	let {
+		columns,
+		displayColumns,
+		cardMinWidth = 280,
+		cardGap = 16,
+		cardMaxFrontColumns,
+		card,
+		cardBack,
+		empty,
+		skeleton,
+		dataSource = 'local',
+		dataSourceOptions,
+		data,
+		pageSize = 20,
+		uniqueID: uniqueIDProp,
+		searchValue,
+		onSearchValueChange,
+		serverSideSearch = true,
+		searchColumns,
+		searchPlaceholder = 'Search…',
+		sortOrder,
+		onSortOrderChange,
+		sortOptions,
+		filters,
+		onFilterChange,
+		selectedItems: selectedItemsProp,
+		onSelectedItemsChange,
+		multiSelect = true,
+		onCardClick,
+		onCardDblClick,
+		onCardContextMenu,
+		menuItems,
+		total = $bindable(0),
+		loading = $bindable(false),
+		onLoadError,
+		class: cls,
+		toolbarEnd,
+	}: Props = $props();
+
+	// ── Derived config ─────────────────────────────────────────────────────────
+
+	const resolvedUniqueID = $derived(uniqueIDProp ?? dataSourceOptions?.uniqueID ?? 'id');
+
+	const resolvedColumns = $derived(
+		displayColumns?.length ? columns.filter((c) => displayColumns!.includes(c.id)) : columns,
+	);
+
+	// Flip mode split
+	const frontColumns = $derived(
+		cardMaxFrontColumns != null ? resolvedColumns.slice(0, cardMaxFrontColumns) : resolvedColumns,
+	);
+	const backColumns = $derived(
+		cardMaxFrontColumns != null ? resolvedColumns.slice(cardMaxFrontColumns) : [],
+	);
+	const flipModeEnabled = $derived(backColumns.length > 0);
+
+	// How many detail rows the skeleton should mimic
+	const skeletonDetailRows = $derived(Math.max(0, frontColumns.length - 2));
+
+	// ── Controlled/uncontrolled search ─────────────────────────────────────────
+
+	let internalSearchValue = $state('');
+	const resolvedSearchValue = $derived(searchValue ?? internalSearchValue);
+
+	function emitSearchValue(v: string) {
+		if (searchValue === undefined) internalSearchValue = v;
+		onSearchValueChange?.(v);
+	}
+
+	// ── Controlled/uncontrolled filters ───────────────────────────────────────
+
+	let internalFilters = $state<GridColumnFilters>({});
+	const resolvedFilters = $derived(filters ?? internalFilters);
+
+	function handleFilterChange(next: GridColumnFilters) {
+		if (filters === undefined) internalFilters = next;
+		onFilterChange?.(next);
+	}
+
+	// ── Controlled/uncontrolled sort ──────────────────────────────────────────
+
+	let internalSortOrder = $state<GridColumnSortOrder>({});
+	const resolvedSortOrder = $derived(sortOrder ?? internalSortOrder);
+
+	function handleSortOrderChange(order: GridColumnSortOrder) {
+		if (sortOrder === undefined) internalSortOrder = order;
+		onSortOrderChange?.(order);
+	}
+
+	const resolvedSort = $derived(
+		Object.values(resolvedSortOrder).some((d) => d !== 'none')
+			? sortOrderToSortOptions(resolvedSortOrder)
+			: [],
+	);
+
+	// ── Controlled/uncontrolled selection ─────────────────────────────────────
+
+	let internalSelectedItems = $state<Record<string, unknown>[]>([]);
+	const resolvedSelectedItems = $derived(selectedItemsProp ?? internalSelectedItems);
+
+	function setSelectedItems(items: Record<string, unknown>[]) {
+		if (selectedItemsProp === undefined) internalSelectedItems = items;
+		onSelectedItemsChange?.(items);
+	}
+
+	// ── Local data path ────────────────────────────────────────────────────────
+
+	let localData = $state<Record<string, unknown>[]>([]);
+	let localLoading = $state(false);
+
+	$effect(() => {
+		if (dataSource !== 'local') return;
+		if (typeof data === 'function') {
+			localLoading = true;
+			(data as () => Promise<Record<string, unknown>[]>)()
+				.then((d) => { localData = d; })
+				.catch((e) => { onLoadError?.(e instanceof Error ? e.message : 'Failed to load data'); })
+				.finally(() => { localLoading = false; });
+		} else if (Array.isArray(data)) {
+			localData = data as Record<string, unknown>[];
+		} else {
+			localData = [];
+		}
+	});
+
+	type _GC = GridlerColumn;
+	const asCols = (cols: CardGridColumn[]) => cols as unknown as _GC[];
+
+	const localSorted   = $derived(applyLocalSort(localData, resolvedSort, asCols(columns)));
+	const localFiltered = $derived(applyLocalFilter(localSorted, resolvedFilters, asCols(columns)));
+
+	const localSearched = $derived.by(() => {
+		if (!resolvedSearchValue.trim() || (serverSideSearch && isServerMode)) return localFiltered;
+		const q = resolvedSearchValue.trim().toLowerCase();
+		const searchCols = searchColumns?.length
+			? searchColumns
+			: columns.filter((c) => !c.disableSearch).map((c) => c.id);
+		return localFiltered.filter((row) =>
+			searchCols.some((colId) => {
+				const col = columns.find((c) => c.id === colId);
+				const key = col?.dataKey ?? colId;
+				const val = getNestedVal(key, row);
+				return val != null && String(val).toLowerCase().includes(q);
+			}),
+		);
+	});
+
+	function getNestedVal(key: string, row: Record<string, unknown>): unknown {
+		const parts = key.split('.');
+		let val: unknown = row;
+		for (const part of parts) {
+			if (val == null || typeof val !== 'object') return undefined;
+			val = (val as Record<string, unknown>)[part];
+		}
+		return val;
+	}
+
+	// ── Server state ───────────────────────────────────────────────────────────
+
+	let serverData       = $state<Record<string, unknown>[]>([]);
+	let serverTotal      = $state(0);
+	let serverCursor     = $state<string | undefined>(undefined);
+	let serverFetchVersion = 0;
+	let serverLoading    = $state(false);
+	let serverAllLoaded  = $state(false);
+	let refreshTrigger   = $state(0);
+
+	$effect(() => { total   = serverTotal; });
+	$effect(() => { loading = serverLoading || localLoading; });
+
+	const isServerMode = $derived(dataSource !== 'local');
+
+	const serverAdapter = $derived.by(() => {
+		if (!isServerMode) return null;
+		const url    = dataSourceOptions?.url;
+		const schema = dataSourceOptions?.schema;
+		const entity = dataSourceOptions?.entity;
+		if (!url || !schema || !entity) return null;
+		const config: GridlerAdapterConfig = {
+			url, token: dataSourceOptions?.authToken, schema, entity,
+			uniqueID: resolvedUniqueID,
+			extraOptions: dataSourceOptions?.extraOptions as GridlerAdapterConfig['extraOptions'],
+		};
+		return dataSource === 'headerspec'
+			? new GridlerRestHeaderSpecAdapter(config)
+			: new GridlerResolveSpecAdapter(config);
+	});
+
+	const resolvedFields = $derived.by(() => {
+		const colFields = columns.map((c) => c.dataKey ?? c.id);
+		const hotfields = dataSourceOptions?.hotfields ?? [];
+		const seen = new Set(colFields);
+		return [...colFields, ...hotfields.filter((f) => !seen.has(f))];
+	});
+
+	function buildAllFilters(search: string | null): FilterOption[] {
+		const base = Object.keys(resolvedFilters).length
+			? gridColumnFiltersToFilterOptions(resolvedFilters) : [];
+		if (!search?.trim()) return base;
+		const searchCols = searchColumns?.length
+			? searchColumns
+			: columns.filter((c) => !c.disableSearch).map((c) => c.id);
+		return [...base, ...buildSearchFilters(search, asCols([]), searchCols)];
+	}
+
+	$effect(() => {
+		const _adapter  = serverAdapter;
+		const _sort     = resolvedSort;
+		const _search   = serverSideSearch ? resolvedSearchValue : null;
+		const _pageSize = pageSize;
+		const _filters  = resolvedFilters;
+		const _refresh  = refreshTrigger;
+		void _refresh;
+
+		if (!_adapter) return;
+
+		let cancelled = false;
+		serverFetchVersion++;
+		serverLoading   = true;
+		serverData      = [];
+		serverTotal     = 0;
+		serverCursor    = undefined;
+		serverAllLoaded = false;
+
+		_adapter
+			.readPage(_pageSize, undefined, _sort, buildAllFilters(_search), untrack(() => resolvedFields))
+			.then((result) => {
+				if (cancelled) return;
+				serverData      = result.data;
+				serverTotal     = result.total;
+				serverCursor    = result.nextCursor;
+				serverAllLoaded = result.data.length < _pageSize || !result.nextCursor;
+			})
+			.catch((e) => { if (!cancelled) onLoadError?.(e instanceof Error ? e.message : 'Failed to load data'); })
+			.finally(() => { if (!cancelled) serverLoading = false; });
+
+		return () => { cancelled = true; };
+	});
+
+	async function loadNextPage() {
+		const _adapter = serverAdapter;
+		if (!_adapter || serverLoading || serverAllLoaded || !serverCursor) return;
+		const cursorSnapshot  = serverCursor;
+		const versionSnapshot = serverFetchVersion;
+		serverLoading = true;
+		try {
+			const result = await _adapter.readPage(
+				pageSize, cursorSnapshot, resolvedSort,
+				buildAllFilters(serverSideSearch ? resolvedSearchValue : null), resolvedFields,
+			);
+			if (serverFetchVersion !== versionSnapshot) return;
+			serverData      = [...serverData, ...result.data];
+			serverCursor    = result.nextCursor;
+			serverAllLoaded = result.data.length < pageSize || !result.nextCursor || result.nextCursor === cursorSnapshot;
+		} catch (e) {
+			onLoadError?.(e instanceof Error ? e.message : 'Failed to load page');
+		} finally {
+			serverLoading = false;
+		}
+	}
+
+	// ── Display data ───────────────────────────────────────────────────────────
+
+	const displayData = $derived(isServerMode ? serverData : localSearched);
+
+	// ── UI state ───────────────────────────────────────────────────────────────
+
+	let focusedIndex   = $state(-1);
+	let anchorIndex    = $state(-1);
+	let columnsInRow   = $state(1);
+	let containerEl    = $state<HTMLElement | null>(null);
+	let sentinelEl     = $state<HTMLElement | null>(null);
+	let searchInputEl  = $state<HTMLInputElement | null>(null);
+	let filterBtnEl    = $state<HTMLButtonElement | null>(null);
+	let menu           = $state<BetterMenu | null>(null);
+
+	// Per-card flip state
+	let flippedCards = $state(new Set<unknown>());
+
+	function toggleFlip(e: MouseEvent, item: Record<string, unknown>) {
+		e.stopPropagation();
+		const id   = item[resolvedUniqueID];
+		const next = new Set(flippedCards);
+		next.has(id) ? next.delete(id) : next.add(id);
+		flippedCards = next;
+	}
+
+	$effect(() => {
+		if (!containerEl) return;
+		const obs = new ResizeObserver((entries) => {
+			columnsInRow = computeColumnsInRow(entries[0]?.contentRect.width ?? 0, cardMinWidth, cardGap);
+		});
+		obs.observe(containerEl);
+		return () => obs.disconnect();
+	});
+
+	$effect(() => {
+		if (!sentinelEl || !isServerMode) return;
+		const obs = new IntersectionObserver(
+			(entries) => { if (entries[0]?.isIntersecting) loadNextPage(); },
+			{ rootMargin: '200px' },
+		);
+		obs.observe(sentinelEl);
+		return () => obs.disconnect();
+	});
+
+	// ── Selection ──────────────────────────────────────────────────────────────
+
+	function handleCardClick(e: MouseEvent, item: Record<string, unknown>, index: number) {
+		focusedIndex = index;
+		if (!multiSelect) {
+			setSelectedItems([item]);
+			anchorIndex = index;
+			onCardClick?.(item, index);
+			return;
+		}
+		if (e.shiftKey && anchorIndex >= 0) {
+			setSelectedItems(rangeSelect(displayData, anchorIndex, index));
+		} else if (e.ctrlKey || e.metaKey) {
+			setSelectedItems(toggleItemInSelection(resolvedSelectedItems, item, resolvedUniqueID));
+			anchorIndex = index;
+		} else {
+			setSelectedItems([item]);
+			anchorIndex = index;
+		}
+		onCardClick?.(item, index);
+	}
+
+	function handleCardContextMenu(e: MouseEvent, item: Record<string, unknown>, index: number) {
+		e.preventDefault();
+		onCardContextMenu?.(item, index, e.clientX, e.clientY);
+		menu?.show('cg-context-menu', {
+			x: e.clientX, y: e.clientY,
+			items: buildContextMenuItems(item),
+		});
+	}
+
+	function handleContainerClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			setSelectedItems([]);
+			focusedIndex = -1;
+		}
+	}
+
+	// ── Context menu ───────────────────────────────────────────────────────────
+
+	function buildContextMenuItems(item: Record<string, unknown>): BetterMenuInstanceItem[] {
+		const items: BetterMenuInstanceItem[] = [];
+		if (menuItems?.length) {
+			for (const mi of menuItems) {
+				if (mi.kind === 'separator') {
+					items.push({ isDivider: true });
+				} else {
+					items.push({ label: mi.label, onClick: mi.disabled ? undefined : () => mi.onselect?.(item) });
+				}
+			}
+			items.push({ isDivider: true });
+		}
+		items.push({ label: 'Refresh', onClick: () => refresh() });
+		if (resolvedSearchValue)
+			items.push({ label: 'Clear search', onClick: () => emitSearchValue('') });
+		if (Object.keys(resolvedFilters).length > 0)
+			items.push({ label: 'Clear filters', onClick: () => handleFilterChange({}) });
+		if (Object.values(resolvedSortOrder).some((d) => d !== 'none'))
+			items.push({ label: 'Clear sort', onClick: () => handleSortOrderChange({}) });
+		return items;
+	}
+
+	// ── Filter panel ───────────────────────────────────────────────────────────
+
+	const activeFilterCount = $derived(Object.keys(resolvedFilters).length);
+
+	function openFilterPanel() {
+		if (!filterBtnEl) return;
+		const rect = filterBtnEl.getBoundingClientRect();
+		menu?.show('cg-filter-panel', {
+			x: rect.left, y: rect.bottom + 4,
+			renderer: filterPanelSnippet as unknown as (props: Record<string, unknown>) => unknown,
+		});
+	}
+
+	// ── Sort pills ─────────────────────────────────────────────────────────────
+
+	function toggleSortOption(columnId: string) {
+		const current = resolvedSortOrder[columnId] ?? 'none';
+		const next    = current === 'none' ? 'asc' : current === 'asc' ? 'desc' : ('none' as const);
+		const newOrder = { ...resolvedSortOrder };
+		if (next === 'none') delete newOrder[columnId]; else newOrder[columnId] = next;
+		handleSortOrderChange(newOrder);
+	}
+
+	// ── Keyboard navigation ────────────────────────────────────────────────────
+
+	function moveFocus(next: number) {
+		focusedIndex = next;
+		scrollToCard(next);
+		if (!multiSelect) {
+			const item = displayData[next];
+			if (item) setSelectedItems([item]);
+		}
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		const count = displayData.length;
+		if (count === 0) return;
+		switch (e.key) {
+			case 'ArrowLeft':  e.preventDefault(); moveFocus(Math.max(0, focusedIndex - 1)); break;
+			case 'ArrowRight': e.preventDefault(); moveFocus(Math.min(count - 1, focusedIndex + 1)); break;
+			case 'ArrowUp':    e.preventDefault(); moveFocus(Math.max(0, focusedIndex - columnsInRow)); break;
+			case 'ArrowDown':  e.preventDefault(); moveFocus(Math.min(count - 1, focusedIndex + columnsInRow)); break;
+			case 'Tab':
+				e.preventDefault();
+				moveFocus(e.shiftKey ? Math.max(0, focusedIndex - 1) : Math.min(count - 1, focusedIndex + 1));
+				break;
+			case 'Enter': {
+				if (focusedIndex >= 0) { const item = displayData[focusedIndex]; if (item) onCardClick?.(item, focusedIndex); }
+				break;
+			}
+			case ' ': {
+				e.preventDefault();
+				if (focusedIndex >= 0) {
+					const item = displayData[focusedIndex];
+					if (item) setSelectedItems(multiSelect
+						? toggleItemInSelection(resolvedSelectedItems, item, resolvedUniqueID)
+						: [item]);
+				}
+				break;
+			}
+			case 'Escape': setSelectedItems([]); focusedIndex = -1; break;
+			case 'a': case 'A':
+				if ((e.ctrlKey || e.metaKey) && multiSelect) { e.preventDefault(); setSelectedItems([...displayData]); }
+				break;
+			case 'f': case 'F':
+				if (e.ctrlKey || e.metaKey) { e.preventDefault(); searchInputEl?.focus(); }
+				break;
+		}
+	}
+
+	function scrollToCard(index: number) {
+		if (virtualizerInstance) {
+			const rowIndex = Math.floor(index / Math.max(1, columnsInRow));
+			virtualizerInstance.scrollToIndex(rowIndex, { align: 'auto', behavior: 'smooth' });
+		} else {
+			containerEl?.querySelector(`[data-card-index="${index}"]`)
+				?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+		}
+	}
+
+	// ── Public API ─────────────────────────────────────────────────────────────
+
+	export function refresh() {
+		if (isServerMode) {
+			refreshTrigger++;
+		} else if (typeof data === 'function') {
+			localLoading = true;
+			(data as () => Promise<Record<string, unknown>[]>)()
+				.then((d) => { localData = d; })
+				.catch((e) => { onLoadError?.(e instanceof Error ? e.message : 'Failed to load data'); })
+				.finally(() => { localLoading = false; });
+		}
+	}
+
+	// ── Loading states ─────────────────────────────────────────────────────────
+
+	const isFirstLoad   = $derived((isServerMode && serverLoading && serverData.length === 0) || (!isServerMode && localLoading && localData.length === 0));
+	const isLoadingMore = $derived(isServerMode && serverLoading && serverData.length > 0);
+	const isEmpty       = $derived(!isFirstLoad && displayData.length === 0);
+	// Cap skeleton count so we don't render 200 ghost cards
+	const skeletonCount = $derived(Math.min(pageSize, 8));
+
+	// ── Virtualizer ────────────────────────────────────────────────────────────
+
+	// Group flat displayData into rows of columnsInRow items each
+	const virtualRows = $derived.by(() => {
+		const cols = Math.max(1, columnsInRow);
+		const rows: Record<string, unknown>[][] = [];
+		for (let i = 0; i < displayData.length; i += cols) {
+			rows.push(displayData.slice(i, i + cols));
+		}
+		return rows;
+	});
+
+	// createVirtualizer returns a Svelte 4 store that calls subscribe with the
+	// same object reference on every scroll update. Svelte 5 $state uses Object.is
+	// equality, so assigning the same reference never triggers reactivity.
+	// Fix: extract the values we need inside the subscribe callback directly into
+	// $state variables — getVirtualItems() returns a new array each call, and
+	// getTotalSize() is a primitive, so both reliably trigger Svelte updates.
+	let virtualizerInstance = $state<SvelteVirtualizer<HTMLElement, HTMLElement> | null>(null);
+	let virtualItems        = $state<ReturnType<SvelteVirtualizer<HTMLElement, HTMLElement>['getVirtualItems']>>([]);
+	let totalSize           = $state(0);
+
+	$effect(() => {
+		const el = containerEl;
+		if (!el) {
+			virtualizerInstance = null;
+			virtualItems        = [];
+			totalSize           = 0;
+			return;
+		}
+		const rowCount = untrack(() => virtualRows.length);
+		const gap      = untrack(() => cardGap);
+		const virt = createVirtualizer<HTMLElement, HTMLElement>({
+			count:            rowCount,
+			estimateSize:     () => 220 + gap,
+			overscan:         2,
+			getScrollElement: () => el,
+		});
+		return virt.subscribe((v) => {
+			virtualizerInstance = v;
+			virtualItems        = v.getVirtualItems();
+			totalSize           = v.getTotalSize();
+		});
+	});
+
+	// Update virtualizer when row count or gap changes.
+	// Untracked read of virtualizerInstance so scroll events don't re-trigger this.
+	$effect(() => {
+		const count = virtualRows.length;
+		const gap   = cardGap;
+		untrack(() => {
+			if (!virtualizerInstance || !containerEl) return;
+			virtualizerInstance.setOptions({
+				...virtualizerInstance.options,
+				count,
+				estimateSize:     () => 220 + gap,
+				getScrollElement: () => containerEl,
+			});
+		});
+	});
+</script>
+
+{#snippet filterPanelSnippet()}
+	<CardGridFilterPanel
+		columns={columns.filter((c) => !c.disableFilter)}
+		filters={resolvedFilters}
+		onApply={(next) => { handleFilterChange(next); menu?.hide('cg-filter-panel'); }}
+		onCancel={() => menu?.hide('cg-filter-panel')}
+	/>
+{/snippet}
+
+<BetterMenu bind:this={menu}>
+	<div class="cg-root {cls ?? ''}">
+
+		<!-- ── Toolbar ──────────────────────────────────────────────────────── -->
+		<div class="cg-toolbar">
+			<div class="cg-search-wrap">
+				<span class="cg-search-icon" aria-hidden="true">
+					<svg width="14" height="14" viewBox="0 0 20 20" fill="none">
+						<circle cx="9" cy="9" r="6.5" stroke="currentColor" stroke-width="1.8"/>
+						<path d="M14 14l3.5 3.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+					</svg>
+				</span>
+				<input
+					bind:this={searchInputEl}
+					class="cg-search"
+					type="search"
+					placeholder={searchPlaceholder}
+					value={resolvedSearchValue}
+					oninput={(e) => emitSearchValue((e.target as HTMLInputElement).value)}
+					onkeydown={(e) => e.stopPropagation()}
+					aria-label="Search"
+				/>
+			</div>
+
+			{#if sortOptions?.length}
+				<div class="cg-sort-pills" role="group" aria-label="Sort options">
+					{#each sortOptions as opt (opt.columnId)}
+						{@const dir = resolvedSortOrder[opt.columnId] ?? 'none'}
+						<button
+							class="cg-sort-pill"
+							class:cg-sort-pill-active={dir !== 'none'}
+							onclick={() => toggleSortOption(opt.columnId)}
+							type="button"
+							aria-pressed={dir !== 'none'}
+						>
+							{opt.label}
+							{#if dir === 'asc'}
+								<svg class="cg-sort-arrow" width="10" height="10" viewBox="0 0 10 10"><path d="M5 8V2M2 5l3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
+							{:else if dir === 'desc'}
+								<svg class="cg-sort-arrow" width="10" height="10" viewBox="0 0 10 10"><path d="M5 2v6M2 5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			{#if columns.some((c) => !c.disableFilter)}
+				<button
+					bind:this={filterBtnEl}
+					class="cg-btn"
+					class:cg-btn-active={activeFilterCount > 0}
+					onclick={openFilterPanel}
+					type="button"
+					aria-label="Open filters"
+				>
+					<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<path d="M2 4h12M4 8h8M6 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+					</svg>
+					Filters
+					{#if activeFilterCount > 0}
+						<span class="cg-badge">{activeFilterCount}</span>
+					{/if}
+				</button>
+			{/if}
+
+			<button class="cg-btn cg-btn-icon" onclick={() => refresh()} type="button" aria-label="Refresh" title="Refresh">
+				<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+					<path d="M17 10a7 7 0 1 1-1.5-4.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+					<path d="M15 3v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</button>
+
+			{#if isServerMode && serverTotal > 0}
+				<span class="cg-count">{serverTotal.toLocaleString()} items</span>
+			{:else if !isServerMode && displayData.length > 0}
+				<span class="cg-count">{displayData.length.toLocaleString()} items</span>
+			{/if}
+
+			{#if toolbarEnd}
+				<div class="cg-toolbar-end">{@render toolbarEnd()}</div>
+			{/if}
+		</div>
+
+		<!-- ── Card grid ────────────────────────────────────────────────────── -->
+		<!-- svelte-ignore a11y_interactive_supports_focus -->
+		<div
+			bind:this={containerEl}
+			class="cg-grid"
+			role="listbox"
+			aria-multiselectable={multiSelect}
+			tabindex="0"
+			onkeydown={handleKeyDown}
+			onclick={handleContainerClick}
+			style="--cg-min-width:{cardMinWidth}px;--cg-gap:{cardGap}px;--cg-cols:{columnsInRow};"
+		>
+			{#if isFirstLoad}
+				<!-- ── Skeleton cards ─────────────────────────────────── -->
+				{#if skeleton}
+					{@render skeleton()}
+				{:else}
+					<div class="cg-card-grid">
+						{#each { length: skeletonCount } as _, si (si)}
+							<div class="cg-card cg-card-skeleton" aria-hidden="true" style="--sk-delay:{si * 80}ms">
+								<div class="cg-sk-header">
+									<div class="cg-sk-line cg-sk-title"></div>
+									<div class="cg-sk-line cg-sk-subtitle"></div>
+								</div>
+								<div class="cg-sk-divider"></div>
+								<div class="cg-sk-body">
+									{#each { length: Math.max(2, skeletonDetailRows) } as _, ri (ri)}
+										<div class="cg-sk-row" style="--row-i:{ri}">
+											<div class="cg-sk-line cg-sk-label"></div>
+											<div class="cg-sk-line cg-sk-value"></div>
+										</div>
+									{/each}
+									{#if flipModeEnabled}
+										<div class="cg-sk-flip-badge"></div>
+									{/if}
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
+			{:else if isEmpty}
+				<!-- ── Empty state ────────────────────────────────────── -->
+				{#if empty}
+					<div class="cg-empty-wrap">{@render empty()}</div>
+				{:else}
+					<div class="cg-empty-wrap">
+						<div class="cg-empty-icon" aria-hidden="true">
+							<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+								<rect x="6" y="10" width="28" height="22" rx="3" stroke="currentColor" stroke-width="1.6"/>
+								<path d="M13 18h14M13 23h9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+								<circle cx="30" cy="10" r="5" fill="currentColor" opacity=".15"/>
+								<path d="M28 10h4M30 8v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+							</svg>
+						</div>
+						<p class="cg-empty-title">No records found</p>
+						{#if resolvedSearchValue || activeFilterCount > 0}
+							<p class="cg-empty-hint">
+								Try
+								{#if resolvedSearchValue}clearing the search{/if}
+								{#if resolvedSearchValue && activeFilterCount > 0} or {/if}
+								{#if activeFilterCount > 0}removing filters{/if}.
+							</p>
+						{/if}
+					</div>
+				{/if}
+
+			{:else}
+				<!-- ── Virtualised rows ───────────────────────────────── -->
+				<div style="position:relative; width:100%; height:{totalSize}px;">
+					<div style="position:absolute; top:0; left:0; width:100%; transform:translateY({virtualItems[0]?.start ?? 0}px);">
+						{#each virtualItems as vRow (vRow.key)}
+							<div class="cg-virtual-row" data-index={vRow.index}>
+								{#each virtualRows[vRow.index] ?? [] as item, colIdx (item[resolvedUniqueID] ?? (vRow.index * columnsInRow + colIdx))}
+									{@const i        = vRow.index * columnsInRow + colIdx}
+									{@const selected = isItemSelected(resolvedSelectedItems, item, resolvedUniqueID)}
+									{@const focused  = focusedIndex === i}
+									{@const cardId   = item[resolvedUniqueID] ?? i}
+									{@const flipped  = flippedCards.has(cardId)}
+
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<div
+										class="cg-card"
+										class:cg-card-selected={selected}
+										class:cg-card-focused={focused}
+										role="option"
+										aria-selected={selected}
+										tabindex="-1"
+										data-card-index={i}
+										onclick={(e) => handleCardClick(e, item, i)}
+										ondblclick={() => onCardDblClick?.(item, i)}
+										oncontextmenu={(e) => handleCardContextMenu(e, item, i)}
+									>
+										{#if flipModeEnabled}
+											<div class="cg-flip-scene">
+												<div class="cg-flip-inner" class:cg-flipped={flipped}>
+													<!-- Front -->
+													<div class="cg-flip-face cg-flip-front">
+														{#if card}
+															{@render card(item, i, selected, focused)}
+														{:else}
+															<DefaultCard record={item} columns={frontColumns} {selected} {focused} />
+														{/if}
+														<button
+															class="cg-flip-trigger"
+															onclick={(e) => toggleFlip(e, item)}
+															type="button"
+															aria-label="Show {backColumns.length} more field{backColumns.length === 1 ? '' : 's'}"
+														>+{backColumns.length}</button>
+													</div>
+													<!-- Back -->
+													<div class="cg-flip-face cg-flip-back">
+														<button
+															class="cg-flip-back-btn"
+															onclick={(e) => toggleFlip(e, item)}
+															type="button"
+															aria-label="Flip back"
+														>
+															<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+																<path d="M8 2L4 6l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+															</svg>
+															Back
+														</button>
+														{#if cardBack}
+															{@render cardBack(item, i, selected, focused)}
+														{:else}
+															<DefaultCard record={item} columns={backColumns} {selected} {focused} />
+														{/if}
+													</div>
+												</div>
+											</div>
+										{:else}
+											{#if card}
+												{@render card(item, i, selected, focused)}
+											{:else}
+												<DefaultCard record={item} columns={resolvedColumns} {selected} {focused} />
+											{/if}
+										{/if}
+									</div>
+								{/each}
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if isServerMode}
+				<div bind:this={sentinelEl} class="cg-sentinel" aria-hidden="true"></div>
+			{/if}
+		</div>
+
+		<!-- ── Loading more ─────────────────────────────────────────────────── -->
+		{#if isLoadingMore}
+			<div class="cg-loading-more" aria-live="polite" aria-busy="true">
+				<span class="cg-spinner" aria-hidden="true"></span>
+				Loading more…
+			</div>
+		{/if}
+	</div>
+</BetterMenu>
+
+<style>
+	/* ── Token layer — light defaults, dark overrides ────────────────────── */
+
+	.cg-root {
+		--cg-bg:               var(--color-surface-100, #f1f5f9);
+		--cg-surface:          var(--color-surface-0, white);
+		--cg-surface-raised:   var(--color-surface-0, white);
+		--cg-border:           var(--color-surface-200, #e2e8f0);
+		--cg-border-subtle:    var(--color-surface-100, #f1f5f9);
+		--cg-text:             var(--color-surface-900, #0f172a);
+		--cg-text-muted:       var(--color-surface-500, #64748b);
+		--cg-accent:           var(--color-primary-500, #6366f1);
+		--cg-accent-subtle:    var(--color-primary-50,  #eef2ff);
+		--cg-accent-ring:      color-mix(in oklab, var(--color-primary-500, #6366f1) 25%, transparent);
+		--cg-focus-ring:       var(--color-primary-400, #818cf8);
+		--cg-shadow-sm:        0 1px 2px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.06);
+		--cg-shadow-md:        0 4px 8px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
+		--cg-shadow-selected:  0 0 0 3px var(--cg-accent-ring);
+		--cg-sk-base:          var(--color-surface-100, #f1f5f9);
+		--cg-sk-shine:         var(--color-surface-200, #e2e8f0);
+
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		height: 100%;
+		min-height: 0;
+		color: var(--cg-text);
+	}
+
+	/* Dark mode — requires explicit .dark class on a parent element */
+	:global(.dark) .cg-root {
+		--cg-bg:             var(--color-surface-950, #020617);
+		--cg-surface:        var(--color-surface-900, #0f172a);
+		--cg-surface-raised: var(--color-surface-800, #1e293b);
+		--cg-border:         var(--color-surface-700, #334155);
+		--cg-border-subtle:  var(--color-surface-800, #1e293b);
+		--cg-text:           var(--color-surface-50,  #f8fafc);
+		--cg-text-muted:     var(--color-surface-400, #94a3b8);
+		--cg-accent:         var(--color-primary-400, #818cf8);
+		--cg-accent-subtle:  color-mix(in oklab, var(--color-primary-500, #6366f1) 15%, transparent);
+		--cg-shadow-sm:      0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.25);
+		--cg-shadow-md:      0 4px 6px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
+		--cg-sk-base:        var(--color-surface-800, #1e293b);
+		--cg-sk-shine:       var(--color-surface-700, #334155);
+	}
+
+	/* ── Toolbar ──────────────────────────────────────────────────────────── */
+
+	.cg-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex-wrap: wrap;
+		padding: 2px 0;
+	}
+
+	/* Search */
+	.cg-search-wrap {
+		position: relative;
+		flex: 1;
+		min-width: 160px;
+		max-width: 300px;
+	}
+
+	.cg-search-icon {
+		position: absolute;
+		left: 10px;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--cg-text-muted);
+		pointer-events: none;
+		display: flex;
+	}
+
+	.cg-search {
+		width: 100%;
+		padding: 6px 10px 6px 32px;
+		border: 1px solid var(--cg-border);
+		border-radius: 7px;
+		font-size: 0.8125rem;
+		background: var(--cg-surface-raised);
+		color: var(--cg-text);
+		transition: border-color 120ms, box-shadow 120ms;
+	}
+
+	.cg-search::placeholder { color: var(--cg-text-muted); }
+	.cg-search:focus {
+		outline: none;
+		border-color: var(--cg-accent);
+		box-shadow: 0 0 0 3px var(--cg-accent-ring);
+	}
+
+	/* Sort pills */
+	.cg-sort-pills { display: flex; gap: 4px; flex-wrap: wrap; }
+
+	.cg-sort-pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 5px 10px;
+		border: 1px solid var(--cg-border);
+		border-radius: 999px;
+		font-size: 0.78rem;
+		font-weight: 500;
+		cursor: pointer;
+		background: var(--cg-surface-raised);
+		color: var(--cg-text-muted);
+		transition: all 120ms;
+		white-space: nowrap;
+	}
+	.cg-sort-pill:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
+	.cg-sort-pill-active {
+		background: var(--cg-accent-subtle);
+		border-color: var(--cg-accent);
+		color: var(--cg-accent);
+	}
+	.cg-sort-arrow { flex-shrink: 0; }
+
+	/* Generic toolbar button */
+	.cg-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		padding: 5px 10px;
+		border: 1px solid var(--cg-border);
+		border-radius: 7px;
+		font-size: 0.78rem;
+		font-weight: 500;
+		cursor: pointer;
+		background: var(--cg-surface-raised);
+		color: var(--cg-text-muted);
+		white-space: nowrap;
+		transition: all 120ms;
+	}
+	.cg-btn:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
+	.cg-btn-active {
+		background: var(--cg-accent-subtle);
+		border-color: var(--cg-accent);
+		color: var(--cg-accent);
+	}
+	.cg-btn-icon { padding: 5px 8px; }
+
+	.cg-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 16px;
+		height: 16px;
+		padding: 0 4px;
+		border-radius: 999px;
+		font-size: 0.65rem;
+		font-weight: 700;
+		background: var(--cg-accent);
+		color: #fff;
+		line-height: 1;
+	}
+
+	.cg-count {
+		font-size: 0.78rem;
+		color: var(--cg-text-muted);
+		white-space: nowrap;
+		margin-left: 2px;
+	}
+
+	.cg-toolbar-end {
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	/* ── Card grid ────────────────────────────────────────────────────────── */
+
+	.cg-grid {
+		overflow-y: auto;
+		flex: 1;
+		min-height: 0;
+		outline: none;
+		padding: 4px 4px 16px;
+	}
+
+	/* Shared grid column layout (skeleton + virtual rows) */
+	.cg-card-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(var(--cg-min-width, 280px), 1fr));
+		gap: var(--cg-gap, 16px);
+	}
+
+	.cg-virtual-row {
+		display: grid;
+		grid-template-columns: repeat(var(--cg-cols, 1), 1fr);
+		column-gap: var(--cg-gap, 16px);
+		padding-bottom: var(--cg-gap, 16px);
+	}
+
+	.cg-card {
+		border: 1.5px solid var(--cg-border);
+		border-radius: 10px;
+		background: var(--cg-surface-raised);
+		box-shadow: var(--cg-shadow-sm);
+		cursor: pointer;
+		transition:
+			transform      150ms ease,
+			box-shadow     150ms ease,
+			border-color   150ms ease,
+			background     150ms ease;
+	}
+
+	.cg-card:hover {
+		box-shadow: var(--cg-shadow-md);
+		border-color: color-mix(in oklab, var(--cg-border) 60%, var(--cg-accent) 40%);
+	}
+
+	.cg-card-selected {
+		border-color: var(--cg-accent);
+		box-shadow: var(--cg-shadow-selected), var(--cg-shadow-sm);
+		transform: translateY(-1px) scale(1.015);
+	}
+
+	.cg-card-focused {
+		outline: 2px solid var(--cg-focus-ring);
+		outline-offset: 2px;
+	}
+
+	/* ── Skeleton cards ───────────────────────────────────────────────────── */
+
+	@keyframes cg-shimmer {
+		0%   { background-position: 200% center; }
+		100% { background-position: -200% center; }
+	}
+
+	.cg-card-skeleton {
+		cursor: default;
+		pointer-events: none;
+		border-color: var(--cg-border-subtle);
+		box-shadow: none;
+		animation: none;
+	}
+
+	.cg-sk-header {
+		padding: 14px 16px 10px;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.cg-sk-divider {
+		height: 1px;
+		background: var(--cg-border-subtle);
+		margin: 0 16px;
+	}
+
+	.cg-sk-body {
+		padding: 10px 16px 14px;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.cg-sk-row {
+		display: grid;
+		grid-template-columns: 38% 1fr;
+		gap: 8px;
+	}
+
+	/* All shimmer lines share the gradient animation */
+	.cg-sk-line {
+		border-radius: 4px;
+		background: linear-gradient(
+			90deg,
+			var(--cg-sk-base) 25%,
+			var(--cg-sk-shine) 50%,
+			var(--cg-sk-base) 75%
+		);
+		background-size: 200% 100%;
+		animation: cg-shimmer 1.6s ease-in-out infinite;
+		animation-delay: var(--sk-delay, 0ms);
+	}
+
+	.cg-sk-title    { height: 14px; width: 65%; }
+	.cg-sk-subtitle { height: 11px; width: 45%; animation-delay: calc(var(--sk-delay, 0ms) + 60ms); }
+	.cg-sk-label    { height: 10px; width: 70%; animation-delay: calc(var(--sk-delay, 0ms) + calc(var(--row-i, 0) * 40ms + 80ms)); }
+	.cg-sk-value    { height: 10px; width: 80%; animation-delay: calc(var(--sk-delay, 0ms) + calc(var(--row-i, 0) * 40ms + 100ms)); }
+
+	.cg-sk-flip-badge {
+		align-self: flex-end;
+		height: 18px;
+		width: 36px;
+		border-radius: 999px;
+		background: linear-gradient(90deg, var(--cg-sk-base) 25%, var(--cg-sk-shine) 50%, var(--cg-sk-base) 75%);
+		background-size: 200% 100%;
+		animation: cg-shimmer 1.6s ease-in-out infinite;
+		animation-delay: calc(var(--sk-delay, 0ms) + 200ms);
+		margin-top: 2px;
+	}
+
+	/* ── Flip ─────────────────────────────────────────────────────────────── */
+
+	.cg-flip-scene {
+		border-radius: 8px;
+		perspective: 1000px;
+		overflow: hidden;
+	}
+
+	.cg-flip-inner {
+		display: grid;
+		transform-style: preserve-3d;
+		transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.cg-flip-inner.cg-flipped { transform: rotateY(180deg); }
+
+	.cg-flip-face {
+		grid-area: 1 / 1;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		padding-bottom: 36px;
+	}
+
+	.cg-flip-back {
+		transform: rotateY(180deg);
+		background: var(--cg-surface-raised);
+	}
+
+	.cg-flip-trigger,
+	.cg-flip-back-btn {
+		position: absolute;
+		bottom: 10px;
+		right: 12px;
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+		padding: 2px 9px;
+		border-radius: 999px;
+		font-size: 0.7rem;
+		font-weight: 700;
+		cursor: pointer;
+		line-height: 1.5;
+		transition: background 120ms, color 120ms;
+		z-index: 1;
+	}
+
+	.cg-flip-trigger {
+		border: 1.5px solid var(--cg-accent);
+		background: var(--cg-accent-subtle);
+		color: var(--cg-accent);
+	}
+	.cg-flip-trigger:hover {
+		background: color-mix(in oklab, var(--cg-accent) 20%, transparent);
+	}
+
+	.cg-flip-back-btn {
+		border: 1px solid var(--cg-border);
+		background: none;
+		color: var(--cg-text-muted);
+	}
+	.cg-flip-back-btn:hover { background: var(--cg-border-subtle); color: var(--cg-text); }
+
+	/* ── Empty state ─────────────────────────────────────────────────────── */
+
+	.cg-empty-wrap {
+		grid-column: 1 / -1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 56px 16px;
+		gap: 8px;
+	}
+
+	.cg-empty-icon { color: var(--cg-border); }
+	.cg-empty-title {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--cg-text-muted);
+		margin: 0;
+	}
+	.cg-empty-hint {
+		font-size: 0.8125rem;
+		color: var(--cg-text-muted);
+		margin: 0;
+		opacity: 0.8;
+	}
+
+	/* ── Sentinel / loading more ─────────────────────────────────────────── */
+
+	.cg-sentinel {
+		grid-column: 1 / -1;
+		height: 1px;
+	}
+
+	.cg-loading-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		padding: 10px;
+		font-size: 0.8125rem;
+		color: var(--cg-text-muted);
+	}
+
+	@keyframes cg-spin { to { transform: rotate(360deg); } }
+
+	.cg-spinner {
+		width: 14px;
+		height: 14px;
+		border: 2px solid var(--cg-border);
+		border-top-color: var(--cg-accent);
+		border-radius: 50%;
+		animation: cg-spin 0.7s linear infinite;
+		flex-shrink: 0;
+	}
+</style>