@joewinke/jatui 0.26.0 → 0.27.0

package/dist/components/table/ManageColumnsDropdown.svelte

@@ -0,0 +1,466 @@
+<script module lang="ts">
+	export type ManageColumnsProps = {
+		/** Current column order (full ids, including hidden ones) */
+		columnOrder: string[];
+		/** Ids currently hidden */
+		hiddenColumns: Set<string>;
+		/** Resolve a column id to its display label */
+		getLabel: (id: string) => string;
+		/** Column order changed (drag-to-reorder) */
+		onReorder: (newOrder: string[]) => void;
+		/** A column's visibility was toggled */
+		onToggleVisibility: (id: string) => void;
+		/** When set, a "Reset to default" footer button is rendered */
+		onReset?: () => void;
+		/** Trigger button text */
+		label?: string;
+		/**
+		 * Render the panel with position:fixed viewport coordinates — escapes
+		 * overflow-x:auto / overflow:hidden parents that would otherwise clip it
+		 * (jat-hwt1h: the IDE's original was clipped by its table's scroll
+		 * container). Default on; turn off for an inline absolute panel.
+		 */
+		appendToBody?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+
+	let {
+		columnOrder,
+		hiddenColumns,
+		getLabel,
+		onReorder,
+		onToggleVisibility,
+		onReset,
+		label = 'Columns',
+		appendToBody = true,
+	}: ManageColumnsProps = $props();
+
+	// Number of currently visible columns. When exactly one is visible, its
+	// toggle must be disabled so the user can't hide the last column.
+	const visibleCount = $derived(columnOrder.length - hiddenColumns.size);
+
+	// Internal open/search state
+	let open = $state(false);
+	let search = $state('');
+	let searchInput: HTMLInputElement | undefined = $state();
+	let triggerRef: HTMLButtonElement | undefined = $state();
+	let containerRef: HTMLDivElement | undefined = $state();
+	let panelStyle = $state('');
+
+	// Auto-focus the search input when opened
+	$effect(() => {
+		if (!open) return;
+		if (appendToBody) {
+			positionPanel();
+			// A position:fixed panel is anchored to the VIEWPORT, so re-anchor on
+			// every scroll (capture: any scroll container) and resize; close once
+			// the trigger leaves the view. Same contract as SearchDropdown's
+			// appendToBody mode.
+			const reanchor = (e?: Event) => {
+				if (e && e.target instanceof Node && containerRef?.contains(e.target)) return;
+				const r = triggerRef?.getBoundingClientRect();
+				if (!r || r.bottom < 0 || r.top > window.innerHeight) {
+					open = false;
+					search = '';
+					return;
+				}
+				positionPanel();
+			};
+			window.addEventListener('scroll', reanchor, { capture: true, passive: true });
+			window.addEventListener('resize', reanchor, { passive: true });
+			document.addEventListener('mousedown', handleClickOutside);
+			tick().then(() => searchInput?.focus());
+			return () => {
+				window.removeEventListener('scroll', reanchor, { capture: true });
+				window.removeEventListener('resize', reanchor);
+				document.removeEventListener('mousedown', handleClickOutside);
+			};
+		}
+		tick().then(() => searchInput?.focus());
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => document.removeEventListener('mousedown', handleClickOutside);
+	});
+
+	function positionPanel() {
+		if (!triggerRef) return;
+		const rect = triggerRef.getBoundingClientRect();
+		const width = Math.max(rect.width, 200);
+		// Viewport-aware flip: grow upward when there isn't room below but there
+		// is above (rows near the bottom of a scroll area).
+		const estPanelHeight = 300;
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+		const flipUp = spaceBelow < estPanelHeight && spaceAbove > spaceBelow;
+		// Clamp so a right-edge trigger doesn't push the panel off-screen.
+		const left = Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8));
+		// Each branch must explicitly reset the property it isn't using — the
+		// inline panel's class rule sets top: calc(100% + 4px).
+		const vertical = flipUp
+			? `bottom: ${window.innerHeight - rect.top + 4}px; top: auto;`
+			: `top: ${rect.bottom + 4}px; bottom: auto;`;
+		panelStyle = `position: fixed; z-index: 9999; ${vertical} left: ${left}px; width: ${width}px; min-width: ${width}px; margin-top: 0;`;
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (containerRef && !containerRef.contains(e.target as Node)) {
+			open = false;
+			search = '';
+		}
+	}
+
+	// Drag-to-reorder state (disabled while searching)
+	let draggedIndex = $state<number | null>(null);
+	let dragOverIndex = $state<number | null>(null);
+
+	function handleDragStart(index: number, e: DragEvent) {
+		draggedIndex = index;
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text/plain', String(index));
+		}
+	}
+
+	function handleDragOver(index: number, e: DragEvent) {
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+		dragOverIndex = index;
+	}
+
+	function handleDragEnd() {
+		draggedIndex = null;
+		dragOverIndex = null;
+	}
+
+	function handleDrop(index: number, e: DragEvent) {
+		e.preventDefault();
+		if (draggedIndex === null || draggedIndex === index) {
+			handleDragEnd();
+			return;
+		}
+		const newOrder = [...columnOrder];
+		const [moved] = newOrder.splice(draggedIndex, 1);
+		newOrder.splice(index, 0, moved);
+		onReorder(newOrder);
+		handleDragEnd();
+	}
+
+	function closeDropdown() {
+		open = false;
+		search = '';
+	}
+
+	const filteredOrder = $derived.by(() => {
+		if (!search) return columnOrder;
+		const q = search.toLowerCase();
+		return columnOrder.filter((id) => getLabel(id).toLowerCase().includes(q));
+	});
+
+	const hasNoMatches = $derived(search.length > 0 && filteredOrder.length === 0);
+</script>
+
+<div class="mc-wrapper" bind:this={containerRef}>
+	<button
+		type="button"
+		class="mc-trigger"
+		bind:this={triggerRef}
+		aria-expanded={open}
+		onclick={() => {
+			open = !open;
+			if (!open) search = '';
+		}}
+	>
+		<span>{label}</span>
+		<svg class="mc-chevron" class:mc-chevron-open={open} viewBox="0 0 20 20" fill="currentColor">
+			<path
+				fill-rule="evenodd"
+				d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</button>
+
+	{#if open}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="fixed inset-0 z-40" onclick={closeDropdown} onkeydown={() => {}}></div>
+		<div
+			class="mc-dropdown"
+			class:mc-dropdown-fixed={appendToBody}
+			style={appendToBody ? panelStyle : undefined}
+		>
+			<div class="mc-search">
+				<svg
+					class="mc-search-icon"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+					/>
+				</svg>
+				<input
+					bind:this={searchInput}
+					bind:value={search}
+					type="text"
+					placeholder="Filter columns..."
+					class="mc-search-input"
+					onkeydown={(e) => {
+						if (e.key === 'Escape') {
+							e.stopPropagation();
+							closeDropdown();
+						}
+					}}
+					autocomplete="off"
+				/>
+				{#if search}
+					<button
+						type="button"
+						aria-label="Clear search"
+						class="mc-search-clear"
+						onclick={() => {
+							search = '';
+							searchInput?.focus();
+						}}
+					>
+						<svg
+							class="w-3 h-3"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+						</svg>
+					</button>
+				{/if}
+			</div>
+
+			{#each filteredOrder as colId (colId)}
+				{@const originalIndex = columnOrder.indexOf(colId)}
+				{@const isVisible = !hiddenColumns.has(colId)}
+				{@const isLastVisible = isVisible && visibleCount === 1}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="mc-row"
+					class:mc-drag-over={dragOverIndex === originalIndex && draggedIndex !== null && draggedIndex !== originalIndex}
+					draggable={!search}
+					ondragstart={(e) => !search && handleDragStart(originalIndex, e)}
+					ondragover={(e) => !search && handleDragOver(originalIndex, e)}
+					ondragend={() => !search && handleDragEnd()}
+					ondrop={(e) => !search && handleDrop(originalIndex, e)}
+				>
+					<span class="mc-grip" class:mc-grip-disabled={!!search}>⠿</span>
+					<label class="mc-label" class:mc-label-disabled={isLastVisible}>
+						<input
+							type="checkbox"
+							checked={isVisible}
+							disabled={isLastVisible}
+							title={isLastVisible ? 'At least one must stay visible' : undefined}
+							aria-label={
+								isLastVisible
+									? `${getLabel(colId)} (at least one column must stay visible)`
+									: undefined
+							}
+							onchange={() => onToggleVisibility(colId)}
+						/>
+						{getLabel(colId)}
+					</label>
+				</div>
+			{/each}
+
+			{#if hasNoMatches}
+				<div class="mc-empty">No columns match "{search}"</div>
+			{/if}
+
+			{#if onReset}
+				<div class="mc-footer">
+					<button type="button" class="mc-reset" onclick={() => onReset?.()}>
+						Reset to default
+					</button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.mc-wrapper {
+		position: relative;
+	}
+	.mc-trigger {
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.5rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		font-size: 0.8125rem;
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		min-height: 2rem;
+		cursor: pointer;
+		background: var(--color-base-300, oklch(0.13 0.01 250));
+		border: 1px solid var(--color-base-100, oklch(0.2 0.01 250));
+		color: var(--color-base-content, currentColor);
+		transition:
+			background 0.15s,
+			border-color 0.15s;
+		white-space: nowrap;
+	}
+	.mc-trigger:hover {
+		background: var(--color-base-200, oklch(0.16 0.01 250));
+		border-color: var(--color-base-100, oklch(0.2 0.01 250));
+	}
+	.mc-chevron {
+		width: 14px;
+		height: 14px;
+		opacity: 0.5;
+		transition: transform 0.15s;
+	}
+	.mc-chevron-open {
+		transform: rotate(180deg);
+	}
+	.mc-dropdown {
+		position: absolute;
+		top: calc(100% + 4px);
+		right: 0;
+		z-index: 50;
+		background: var(--color-base-300, oklch(0.13 0.01 250));
+		border: 1px solid var(--color-base-100, oklch(0.2 0.01 250));
+		border-radius: 0.375rem;
+		box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
+		padding: 0;
+		min-width: 180px;
+		max-height: 320px;
+		overflow-y: auto;
+	}
+	/* Fixed-mode overrides — positionPanel() sets the inline geometry, the class
+	   only kills the inline panel's absolute defaults it would otherwise inherit. */
+	.mc-dropdown-fixed {
+		top: auto;
+		right: auto;
+		bottom: auto;
+		max-height: 320px;
+	}
+	.mc-search {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.625rem;
+		border-bottom: 1px solid var(--color-base-100, oklch(0.2 0.01 250));
+		position: sticky;
+		top: 0;
+		background: var(--color-base-300, oklch(0.13 0.01 250));
+	}
+	.mc-search-icon {
+		width: 0.75rem;
+		height: 0.75rem;
+		flex-shrink: 0;
+		color: oklch(from var(--color-base-content, currentColor) l c h / 50%);
+	}
+	.mc-search-input {
+		flex: 1;
+		background: transparent;
+		border: none;
+		outline: none;
+		font-size: 0.625rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		color: oklch(from var(--color-base-content, currentColor) l c h / 95%);
+	}
+	.mc-search-input::placeholder {
+		color: oklch(from var(--color-base-content, currentColor) l c h / 40%);
+	}
+	.mc-search-clear {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		display: flex;
+		color: oklch(from var(--color-base-content, currentColor) l c h / 40%);
+	}
+	.mc-search-clear:hover {
+		opacity: 0.8;
+	}
+	.mc-empty {
+		padding: 0.5rem 0.75rem;
+		font-size: 0.625rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		color: oklch(from var(--color-base-content, currentColor) l c h / 50%);
+		text-align: center;
+	}
+	.mc-grip-disabled {
+		opacity: 0.2;
+		cursor: default;
+	}
+	.mc-row {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.25rem 0.625rem;
+		cursor: grab;
+		transition: background 0.1s;
+	}
+	.mc-row:hover {
+		background: var(--color-base-100, oklch(0.2 0.01 250));
+	}
+	.mc-row.mc-drag-over {
+		border-top: 2px solid var(--color-info, oklch(0.72 0.1 240));
+	}
+	.mc-grip {
+		color: oklch(from var(--color-base-content, currentColor) l c h / 40%);
+		font-size: 0.75rem;
+		cursor: grab;
+		user-select: none;
+	}
+	.mc-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-size: 0.75rem;
+		color: oklch(from var(--color-base-content, currentColor) l c h / 95%);
+		cursor: pointer;
+		user-select: none;
+		flex: 1;
+	}
+	.mc-label input[type='checkbox'] {
+		accent-color: var(--color-info, oklch(0.72 0.1 240));
+	}
+	.mc-label-disabled {
+		opacity: 0.55;
+		cursor: default;
+	}
+	.mc-label-disabled input[type='checkbox'] {
+		cursor: not-allowed;
+	}
+	.mc-footer {
+		position: sticky;
+		bottom: 0;
+		padding: 0.375rem 0.625rem;
+		border-top: 1px solid var(--color-base-100, oklch(0.2 0.01 250));
+		background: var(--color-base-300, oklch(0.13 0.01 250));
+	}
+	.mc-reset {
+		width: 100%;
+		background: transparent;
+		border: 1px solid var(--color-base-100, oklch(0.2 0.01 250));
+		border-radius: 0.375rem;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.625rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		color: oklch(from var(--color-base-content, currentColor) l c h / 60%);
+		cursor: pointer;
+		transition:
+			background 0.15s,
+			border-color 0.15s,
+			color 0.15s;
+	}
+	.mc-reset:hover {
+		background: var(--color-base-200, oklch(0.16 0.01 250));
+		border-color: var(--color-base-100, oklch(0.2 0.01 250));
+		color: oklch(from var(--color-base-content, currentColor) l c h / 95%);
+	}
+</style>

package/dist/components/table/ManageColumnsDropdown.svelte.d.ts

@@ -0,0 +1,26 @@
+export type ManageColumnsProps = {
+    /** Current column order (full ids, including hidden ones) */
+    columnOrder: string[];
+    /** Ids currently hidden */
+    hiddenColumns: Set<string>;
+    /** Resolve a column id to its display label */
+    getLabel: (id: string) => string;
+    /** Column order changed (drag-to-reorder) */
+    onReorder: (newOrder: string[]) => void;
+    /** A column's visibility was toggled */
+    onToggleVisibility: (id: string) => void;
+    /** When set, a "Reset to default" footer button is rendered */
+    onReset?: () => void;
+    /** Trigger button text */
+    label?: string;
+    /**
+     * Render the panel with position:fixed viewport coordinates — escapes
+     * overflow-x:auto / overflow:hidden parents that would otherwise clip it
+     * (jat-hwt1h: the IDE's original was clipped by its table's scroll
+     * container). Default on; turn off for an inline absolute panel.
+     */
+    appendToBody?: boolean;
+};
+declare const ManageColumnsDropdown: import("svelte").Component<ManageColumnsProps, {}, "">;
+type ManageColumnsDropdown = ReturnType<typeof ManageColumnsDropdown>;
+export default ManageColumnsDropdown;

package/dist/components/table/columnStorage.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Column settings persistence for DataTable-based views (upstreamed from the
+ * jat IDE's `ide/src/lib/utils/columnStorage.ts` — audit jat-1alfp wave #4,
+ * U9). Pure module: no DOM beyond the guarded `localStorage` reads, no svelte
+ * imports — safe to call from any client-side component.
+ *
+ * Usage:
+ *   const saved = loadColumnSettings('my-table', allColumnIds);
+ *   saveColumnSettings('my-table', { order, widths, hidden, sortField, sortDir });
+ */
+export interface ColumnSettings {
+    order: string[];
+    widths: Record<string, number>;
+    hidden: string[];
+    sortField?: string;
+    sortDir?: 'asc' | 'desc';
+}
+/**
+ * Save column settings (order, widths, hidden) to localStorage as a single JSON blob.
+ */
+export declare function saveColumnSettings(key: string, settings: ColumnSettings): void;
+/**
+ * Load column settings from localStorage.
+ * Merges any new column IDs (from allColumnIds) not present in the saved order,
+ * appending them at the end — so adding a column to a view whose settings were
+ * saved earlier does not hide or lose the new column.
+ * Returns null if nothing is saved or the data cannot be parsed.
+ */
+export declare function loadColumnSettings(key: string, allColumnIds: string[]): ColumnSettings | null;

package/dist/components/table/columnStorage.js

@@ -0,0 +1,61 @@
+/**
+ * Column settings persistence for DataTable-based views (upstreamed from the
+ * jat IDE's `ide/src/lib/utils/columnStorage.ts` — audit jat-1alfp wave #4,
+ * U9). Pure module: no DOM beyond the guarded `localStorage` reads, no svelte
+ * imports — safe to call from any client-side component.
+ *
+ * Usage:
+ *   const saved = loadColumnSettings('my-table', allColumnIds);
+ *   saveColumnSettings('my-table', { order, widths, hidden, sortField, sortDir });
+ */
+/**
+ * Save column settings (order, widths, hidden) to localStorage as a single JSON blob.
+ */
+export function saveColumnSettings(key, settings) {
+    if (typeof localStorage === 'undefined')
+        return;
+    try {
+        localStorage.setItem(key, JSON.stringify(settings));
+    }
+    catch {
+        // Ignore storage errors (e.g. private browsing quota) — a failed save must
+        // never break the table itself; the next save overwrites whatever partial
+        // state exists. Deliberate degradation: persistence is best-effort by design.
+    }
+}
+/**
+ * Load column settings from localStorage.
+ * Merges any new column IDs (from allColumnIds) not present in the saved order,
+ * appending them at the end — so adding a column to a view whose settings were
+ * saved earlier does not hide or lose the new column.
+ * Returns null if nothing is saved or the data cannot be parsed.
+ */
+export function loadColumnSettings(key, allColumnIds) {
+    if (typeof localStorage === 'undefined')
+        return null;
+    try {
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const saved = JSON.parse(raw);
+        const order = (() => {
+            if (!saved.order || !Array.isArray(saved.order))
+                return allColumnIds;
+            const known = new Set(allColumnIds);
+            const validOrder = saved.order.filter((id) => known.has(id));
+            const missing = allColumnIds.filter((id) => !validOrder.includes(id));
+            return [...validOrder, ...missing];
+        })();
+        const widths = saved.widths && typeof saved.widths === 'object' ? saved.widths : {};
+        const hidden = saved.hidden && Array.isArray(saved.hidden) ? saved.hidden : [];
+        const sortField = typeof saved.sortField === 'string' ? saved.sortField : undefined;
+        const sortDir = saved.sortDir === 'asc' || saved.sortDir === 'desc' ? saved.sortDir : undefined;
+        return { order, widths, hidden, sortField, sortDir };
+    }
+    catch {
+        // Corrupt or non-JSON payload: discard and let the caller fall back to its
+        // built-in column order. Returning null (rather than throwing) is the whole
+        // contract — a broken saved blob must never take the page down with it.
+        return null;
+    }
+}

package/dist/components/table/groupRows.d.ts

@@ -0,0 +1,72 @@
+/**
+ * groupRows — grouped render-list flattening (jatui-u6d4e.2).
+ *
+ * Spec: jat `docs/design/datatable-virtualisation-group-rows.md` §3.2.
+ *
+ * Turns an already filtered + sorted row array into the flat list a table (or a
+ * row window) renders: group header items interleaved with row items, nested to
+ * any number of levels. Pure, DOM-free and framework-free so it runs under
+ * node:test and can feed a virtualiser directly (one item = one rendered line).
+ *
+ *   - Rows inside a group keep the order the caller passed in — the page's sort
+ *     comparator and tiebreakers survive untouched. Only GROUPS are reordered,
+ *     by `level.compare` (default: first-seen order).
+ *   - A collapsed group still emits its header (with `collapsed: true` and the
+ *     full `rows`/`count`) but nothing beneath it.
+ *   - `showHeader` returning false hides that header: its rows (and subgroups)
+ *     still render, one visual level shallower. A hidden header cannot be
+ *     toggled, so `collapsed` is ignored for it.
+ *   - `depth` is the VISUAL nesting level — the number of visible headers above
+ *     the item — so hidden headers never leave an indentation gap. `path` /
+ *     `groupPath` always carry the full key path.
+ *   - `position` (first/middle/last/only) is computed over each contiguous run of
+ *     rows under the same visible parent, which is what ├ / └ tree glyphs need.
+ */
+export interface GroupLevel<T> {
+    /** Group key for a row at this level (e.g. task => projectOf(task)). */
+    key: (row: T) => string;
+    /** Group order. The page owns it (P0-P4, "Unassigned first", milestone
+     *  sort_order, epics-first…). Default: first-seen order. */
+    compare?: (a: string, b: string) => number;
+    /** Hide the header when it would add nothing (e.g. < 2 rows and no
+     *  children). The rows still render, ungrouped. Default: always shown. */
+    showHeader?: (key: string, rows: T[]) => boolean;
+}
+export type GroupedRowPosition = 'first' | 'middle' | 'last' | 'only';
+export interface GroupedGroupItem<T> {
+    kind: 'group';
+    key: string;
+    /** Key path from the top level down to (and including) this group. */
+    path: string[];
+    /** Visual nesting level: number of visible group headers above this one. */
+    depth: number;
+    label: string;
+    /** Every row under this group, collapsed or not, in input order. */
+    rows: T[];
+    count: number;
+    collapsed: boolean;
+}
+export interface GroupedRowItem<T> {
+    kind: 'row';
+    row: T;
+    id: string;
+    /** Visual nesting level: number of visible group headers above this row. */
+    depth: number;
+    /** Key path of the innermost group containing this row ([] when flat). */
+    groupPath: string[];
+    /** Place within its contiguous run of sibling rows — drives ├ / └ glyphs. */
+    position: GroupedRowPosition;
+}
+export type GroupedItem<T = any> = GroupedGroupItem<T> | GroupedRowItem<T>;
+export interface GroupRowsOptions<T> {
+    getRowId: (row: T) => string;
+    /** Collapsed groups, by path key (see `groupPathKey`), e.g. "jat" or "jat::jat-vte6e". */
+    collapsed: ReadonlySet<string>;
+    /** Header label for a group path. Default: the group's own key. */
+    label?: (path: string[]) => string;
+}
+/** Separator joining a group path into the key used by `collapsed`. */
+export declare const GROUP_PATH_SEPARATOR = "::";
+/** The `collapsed`-set key for a group path: ["jat", "jat-vte6e"] → "jat::jat-vte6e". */
+export declare function groupPathKey(path: readonly string[]): string;
+export declare function groupRows<T>(rows: readonly T[], levels: readonly GroupLevel<T>[], opts: GroupRowsOptions<T>): GroupedItem<T>[];