compote-ui 0.55.4 → 0.56.0

package/dist/components/data-table-v9/features.js

@@ -0,0 +1,14 @@
+import { tableFeatures, rowSortingFeature, rowSelectionFeature, columnFilteringFeature, columnFacetingFeature, globalFilteringFeature, columnVisibilityFeature, columnPinningFeature, columnSizingFeature, columnResizingFeature } from '@tanstack/svelte-table';
+// Fixed feature registry for the data table. Declared once at module scope so the
+// reference is stable across instances (v9 requires a stable `features` object).
+export const dataTableFeatures = tableFeatures({
+    rowSortingFeature,
+    rowSelectionFeature,
+    columnFilteringFeature,
+    columnFacetingFeature,
+    globalFilteringFeature,
+    columnVisibilityFeature,
+    columnPinningFeature,
+    columnSizingFeature,
+    columnResizingFeature
+});

package/dist/components/data-table-v9/index.d.ts

@@ -0,0 +1,11 @@
+export { createDataTableColumnHelper } from './column-helper';
+export { createTable } from './create-table.svelte';
+export { renderComponent, renderSnippet, FlexRender } from '@tanstack/svelte-table';
+export { default as Root } from './data-table.svelte';
+export { default as Title } from './data-table-title.svelte';
+export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
+export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
+export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
+export { default as Search } from './toolbar/data-table-search.svelte';
+export type { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
+export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

package/dist/components/data-table-v9/index.js

@@ -0,0 +1,9 @@
+export { createDataTableColumnHelper } from './column-helper';
+export { createTable } from './create-table.svelte';
+export { renderComponent, renderSnippet, FlexRender } from '@tanstack/svelte-table';
+export { default as Root } from './data-table.svelte';
+export { default as Title } from './data-table-title.svelte';
+export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
+export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
+export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
+export { default as Search } from './toolbar/data-table-search.svelte';

package/dist/components/data-table-v9/table-view-state.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { Header, HeaderGroup, RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from './data-table-utils';
+import type { DataTableFeatures } from './features';
+export type DataTableViewState<T extends RowData> = ReturnType<typeof createTableViewState<T>>;
+export type DataTableHeaderSection = 'left' | 'center' | 'right';
+/**
+ * Shared derived state for the standard and virtualized table roots.
+ *
+ * Writable slice atoms are rune-backed, so reading them inside a $derived
+ * registers the dependency. Derived table APIs (getRowModel, header groups,
+ * getVisibleLeafColumns, …) are not reliably tracked by the beta adapter, so
+ * each derived below first reads the slices its result depends on.
+ */
+export declare function createTableViewState<T extends RowData>(getTable: () => DataTableInstance<T>): {
+    readonly table: DataTableInstance<T>;
+    readonly columnPinning: import("@tanstack/svelte-table").ColumnPinningState;
+    readonly columnResizing: import("@tanstack/svelte-table").columnResizingState;
+    readonly columnSizing: import("@tanstack/svelte-table").ColumnSizingState;
+    readonly columnVisibility: import("@tanstack/svelte-table").ColumnVisibilityState;
+    readonly rowSelection: import("@tanstack/svelte-table").RowSelectionState;
+    readonly sorting: import("@tanstack/svelte-table").SortingState;
+    readonly rowModel: import("@tanstack/svelte-table").RowModel<{
+        rowSortingFeature: import("@tanstack/svelte-table").TableFeature;
+        rowSelectionFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFacetingFeature: import("@tanstack/svelte-table").TableFeature;
+        globalFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnVisibilityFeature: import("@tanstack/svelte-table").TableFeature;
+        columnPinningFeature: import("@tanstack/svelte-table").TableFeature;
+        columnSizingFeature: import("@tanstack/svelte-table").TableFeature;
+        columnResizingFeature: import("@tanstack/svelte-table").TableFeature;
+    }, T>;
+    readonly headerGroups: HeaderGroup<{
+        rowSortingFeature: import("@tanstack/svelte-table").TableFeature;
+        rowSelectionFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFacetingFeature: import("@tanstack/svelte-table").TableFeature;
+        globalFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnVisibilityFeature: import("@tanstack/svelte-table").TableFeature;
+        columnPinningFeature: import("@tanstack/svelte-table").TableFeature;
+        columnSizingFeature: import("@tanstack/svelte-table").TableFeature;
+        columnResizingFeature: import("@tanstack/svelte-table").TableFeature;
+    }, T>[];
+    getHeaderSection(header: Header<DataTableFeatures, T, unknown>): DataTableHeaderSection | undefined;
+    readonly visibleLeafColumns: import("@tanstack/svelte-table").Column<{
+        rowSortingFeature: import("@tanstack/svelte-table").TableFeature;
+        rowSelectionFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFacetingFeature: import("@tanstack/svelte-table").TableFeature;
+        globalFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnVisibilityFeature: import("@tanstack/svelte-table").TableFeature;
+        columnPinningFeature: import("@tanstack/svelte-table").TableFeature;
+        columnSizingFeature: import("@tanstack/svelte-table").TableFeature;
+        columnResizingFeature: import("@tanstack/svelte-table").TableFeature;
+    }, T, unknown>[];
+    readonly growColumn: import("@tanstack/svelte-table").Column<{
+        rowSortingFeature: import("@tanstack/svelte-table").TableFeature;
+        rowSelectionFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnFacetingFeature: import("@tanstack/svelte-table").TableFeature;
+        globalFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+        columnVisibilityFeature: import("@tanstack/svelte-table").TableFeature;
+        columnPinningFeature: import("@tanstack/svelte-table").TableFeature;
+        columnSizingFeature: import("@tanstack/svelte-table").TableFeature;
+        columnResizingFeature: import("@tanstack/svelte-table").TableFeature;
+    }, T, unknown> | undefined;
+    readonly hasGrowColumn: boolean;
+    readonly isRowSelectionEnabled: boolean;
+    readonly isMultiRowSelectionEnabled: boolean;
+    readonly allRowsSelectionState: boolean | "indeterminate";
+    readonly selectedRowCount: number;
+    readonly isColumnResizing: boolean;
+    readonly hasFooter: boolean;
+};

package/dist/components/data-table-v9/table-view-state.svelte.js

@@ -0,0 +1,182 @@
+import { getColumnMeta } from './data-table-utils';
+/**
+ * Shared derived state for the standard and virtualized table roots.
+ *
+ * Writable slice atoms are rune-backed, so reading them inside a $derived
+ * registers the dependency. Derived table APIs (getRowModel, header groups,
+ * getVisibleLeafColumns, …) are not reliably tracked by the beta adapter, so
+ * each derived below first reads the slices its result depends on.
+ */
+export function createTableViewState(getTable) {
+    const table = $derived.by(getTable);
+    const columnPinning = $derived.by(() => table.atoms.columnPinning.get());
+    const columnResizing = $derived.by(() => table.atoms.columnResizing.get());
+    const columnSizing = $derived.by(() => table.atoms.columnSizing.get());
+    const columnVisibility = $derived.by(() => table.atoms.columnVisibility.get());
+    const rowSelection = $derived.by(() => table.atoms.rowSelection.get());
+    const sorting = $derived.by(() => table.atoms.sorting.get());
+    const columnFilters = $derived.by(() => table.atoms.columnFilters.get());
+    const globalFilter = $derived.by(() => table.atoms.globalFilter.get());
+    const rowModel = $derived.by(() => {
+        void columnFilters;
+        void globalFilter;
+        void sorting;
+        return table.getRowModel();
+    });
+    const headerGroupsData = $derived.by(() => {
+        void columnPinning;
+        void columnSizing;
+        void columnVisibility;
+        return buildHeaderGroups(table);
+    });
+    const visibleLeafColumns = $derived.by(() => {
+        void columnSizing;
+        void columnVisibility;
+        return table.getVisibleLeafColumns();
+    });
+    const growColumn = $derived(visibleLeafColumns.find((col) => getColumnMeta(col.columnDef)?.grow));
+    const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
+    const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
+    const allRowsSelectionState = $derived.by(() => {
+        void rowSelection;
+        void rowModel;
+        return table.getIsAllRowsSelected()
+            ? true
+            : table.getIsSomeRowsSelected()
+                ? 'indeterminate'
+                : false;
+    });
+    const selectedRowCount = $derived.by(() => {
+        void rowSelection;
+        void rowModel;
+        return table.getSelectedRowModel().rows.length;
+    });
+    const isColumnResizing = $derived(columnResizing.isResizingColumn !== false);
+    const hasFooter = $derived(visibleLeafColumns.some((col) => {
+        const meta = getColumnMeta(col.columnDef);
+        return !!(meta?.sum || meta?.footer);
+    }));
+    return {
+        get table() {
+            return table;
+        },
+        get columnPinning() {
+            return columnPinning;
+        },
+        get columnResizing() {
+            return columnResizing;
+        },
+        get columnSizing() {
+            return columnSizing;
+        },
+        get columnVisibility() {
+            return columnVisibility;
+        },
+        get rowSelection() {
+            return rowSelection;
+        },
+        get sorting() {
+            return sorting;
+        },
+        get rowModel() {
+            return rowModel;
+        },
+        get headerGroups() {
+            return headerGroupsData.groups;
+        },
+        getHeaderSection(header) {
+            return headerGroupsData.sections.get(header);
+        },
+        get visibleLeafColumns() {
+            return visibleLeafColumns;
+        },
+        get growColumn() {
+            return growColumn;
+        },
+        get hasGrowColumn() {
+            return growColumn !== undefined;
+        },
+        get isRowSelectionEnabled() {
+            return isRowSelectionEnabled;
+        },
+        get isMultiRowSelectionEnabled() {
+            return isMultiRowSelectionEnabled;
+        },
+        get allRowsSelectionState() {
+            return allRowsSelectionState;
+        },
+        get selectedRowCount() {
+            return selectedRowCount;
+        },
+        get isColumnResizing() {
+            return isColumnResizing;
+        },
+        get hasFooter() {
+            return hasFooter;
+        }
+    };
+}
+/**
+ * Concatenate the left/center/right header-group sections into single rows.
+ *
+ * When a column group spans pinned and unpinned columns, TanStack splits it
+ * into separate header objects (one per section). The fragments are kept
+ * separate — the pinned fragment gets sticky positioning so the group label
+ * stays visible during horizontal scroll — but the label renders only once:
+ * on the pinned fragment, with the other fragments cloned as placeholders.
+ * The clone preserves the header's prototype so its methods (getContext,
+ * getSize, …) keep working.
+ *
+ * The returned WeakMap records which section each header came from; the head
+ * component needs it because a fragment's `column` spans all sections and
+ * can't identify the fragment's own section.
+ */
+function buildHeaderGroups(table) {
+    const sections = new WeakMap();
+    const leftHeaderGroups = table.getLeftHeaderGroups();
+    const centerHeaderGroups = table.getCenterHeaderGroups();
+    const rightHeaderGroups = table.getRightHeaderGroups();
+    const groups = centerHeaderGroups.map((headerGroup, index) => {
+        const parts = [
+            ...(leftHeaderGroups[index]?.headers ?? []).map((header) => ({
+                header,
+                section: 'left'
+            })),
+            ...headerGroup.headers.map((header) => ({ header, section: 'center' })),
+            ...(rightHeaderGroups[index]?.headers ?? []).map((header) => ({
+                header,
+                section: 'right'
+            }))
+        ];
+        const headers = [];
+        let i = 0;
+        while (i < parts.length) {
+            let j = i;
+            while (j + 1 < parts.length &&
+                parts[j + 1].header.column.id === parts[i].header.column.id) {
+                j++;
+            }
+            const run = parts.slice(i, j + 1);
+            // The label lives on the pinned fragment so it stays visible; left wins
+            // over right when a group somehow spans both pinned sections.
+            const labelIndex = Math.max(0, run.findIndex((part) => part.section !== 'center'));
+            run.forEach((part, k) => {
+                let header = part.header;
+                if (run.length > 1 && k !== labelIndex && !header.isPlaceholder) {
+                    const clone = Object.assign(Object.create(Object.getPrototypeOf(header)), header);
+                    clone.isPlaceholder = true;
+                    header = clone;
+                }
+                sections.set(header, part.section);
+                headers.push(header);
+            });
+            i = j + 1;
+        }
+        return {
+            ...headerGroup,
+            id: `${leftHeaderGroups[index]?.id ?? ''}|${headerGroup.id}|${rightHeaderGroups[index]?.id ?? ''}`,
+            headers
+        };
+    });
+    return { groups, sections };
+}

package/dist/components/data-table-v9/toolbar/data-table-column-filter.svelte

@@ -0,0 +1,380 @@
+<script lang="ts" generics="T extends RowData">
+	import { onDestroy } from 'svelte';
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import * as Popover from '../../popover';
+	import * as ScrollArea from '../../scroll-area';
+	import Checkbox from '../../checkbox/checkbox.svelte';
+	import { cn } from 'tailwind-variants';
+	import type { DataTableInstance } from '../data-table-utils';
+	import type { DataTableFeatures } from '../features';
+	import NumberInput from '../../number-input/number-input.svelte';
+	import * as Field from '../../field';
+	import { PhX, PhMagnifyingGlass } from '../../../icons';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		triggerLabel?: string;
+	};
+
+	let { table, triggerLabel = 'Filters' }: Props = $props();
+
+	let localText: Record<string, string> = $state({});
+	let localNumMin: Record<string, number> = $state({});
+	let localNumMax: Record<string, number> = $state({});
+	let localSelectSearch: Record<string, string> = $state({});
+	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
+
+	const columnFilters = $derived.by(() => table.atoms.columnFilters.get());
+	const columnVisibility = $derived.by(() => table.atoms.columnVisibility.get());
+	const activeCount = $derived(columnFilters.length);
+
+	let activeFilterIds: string[] = $derived(columnFilters.map((f) => f.id));
+	let showColumnPicker = $state(false);
+	let columnSearchText = $state('');
+
+	const activeColumns = $derived.by(() => {
+		return activeFilterIds
+			.map((id) => table.getColumn(id))
+			.filter((col): col is Column<DataTableFeatures, T, unknown> => col != null);
+	});
+
+	const availableColumns = $derived.by(() => {
+		void columnVisibility;
+		return table
+			.getAllLeafColumns()
+			.filter((col) => col.getCanFilter() && !activeFilterIds.includes(col.id))
+			.filter(
+				(col) =>
+					!columnSearchText ||
+					getColumnLabel(col).toLowerCase().includes(columnSearchText.toLowerCase())
+			);
+	});
+
+	onDestroy(() => {
+		Object.values(timers).forEach(clearTimeout);
+	});
+
+	function getColumnType(column: Column<DataTableFeatures, T, unknown>): string | undefined {
+		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
+			| string
+			| undefined;
+	}
+
+	function getColumnLabel(column: Column<DataTableFeatures, T, unknown>): string {
+		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+	}
+
+	function addFilter(column: Column<DataTableFeatures, T, unknown>) {
+		activeFilterIds = [...activeFilterIds, column.id];
+		showColumnPicker = false;
+		columnSearchText = '';
+	}
+
+	function removeFilter(column: Column<DataTableFeatures, T, unknown>) {
+		activeFilterIds = activeFilterIds.filter((id) => id !== column.id);
+		column.setFilterValue(undefined);
+		delete localText[column.id];
+		delete localNumMin[column.id];
+		delete localNumMax[column.id];
+		delete localSelectSearch[column.id];
+		clearTimeout(timers[column.id]);
+		clearTimeout(timers[`${column.id}_min`]);
+		clearTimeout(timers[`${column.id}_max`]);
+	}
+
+	function clearFilters() {
+		Object.values(timers).forEach(clearTimeout);
+		for (const key of Object.keys(timers)) delete timers[key];
+		localText = {};
+		localNumMin = {};
+		localNumMax = {};
+		localSelectSearch = {};
+		showColumnPicker = false;
+		columnSearchText = '';
+		table.resetColumnFilters();
+	}
+
+	function handleTextInput(column: Column<DataTableFeatures, T, unknown>, value: string) {
+		localText[column.id] = value;
+		clearTimeout(timers[column.id]);
+		timers[column.id] = setTimeout(() => {
+			column.setFilterValue(value || undefined);
+		}, 300);
+	}
+
+	function handleNumericInput(
+		column: Column<DataTableFeatures, T, unknown>,
+		which: 'min' | 'max',
+		value: number | null
+	) {
+		if (value === null) {
+			if (which === 'min') delete localNumMin[column.id];
+			else delete localNumMax[column.id];
+		} else {
+			if (which === 'min') localNumMin[column.id] = value;
+			else localNumMax[column.id] = value;
+		}
+		clearTimeout(timers[`${column.id}_${which}`]);
+		timers[`${column.id}_${which}`] = setTimeout(() => {
+			const min = localNumMin[column.id];
+			const max = localNumMax[column.id];
+			column.setFilterValue(min === undefined && max === undefined ? undefined : [min, max]);
+		}, 300);
+	}
+
+	function getSelectValues(column: Column<DataTableFeatures, T, unknown>): string[] {
+		return (column.getFilterValue() as string[] | undefined) ?? [];
+	}
+
+	function handleSelectChange(
+		column: Column<DataTableFeatures, T, unknown>,
+		value: string,
+		checked: boolean
+	) {
+		const current = getSelectValues(column);
+		const next = checked ? [...current, value] : current.filter((v) => v !== value);
+		column.setFilterValue(next.length ? next : undefined);
+	}
+
+	function getFacetedValues(column: Column<DataTableFeatures, T, unknown>): string[] {
+		return Array.from(column.getFacetedUniqueValues().keys()).map(String).sort();
+	}
+
+	function getFacetedMinMax(
+		column: Column<DataTableFeatures, T, unknown>
+	): [number | undefined, number | undefined] {
+		const vals = column.getFacetedMinMaxValues();
+		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
+	}
+
+	function getColumnFormatOptions(
+		column: Column<DataTableFeatures, T, unknown>
+	): Intl.NumberFormatOptions | undefined {
+		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
+			| Intl.NumberFormatOptions
+			| undefined;
+	}
+</script>
+
+<Popover.Root positioning={{ placement: 'bottom-end' }}>
+	<Popover.Trigger
+		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+	>
+		{triggerLabel}
+		{#if activeCount > 0}
+			({activeCount})
+		{/if}
+	</Popover.Trigger>
+
+	<Popover.Content class="w-70 p-3 flex flex-col gap-3" showArrow={false}>
+		<div class="flex items-center justify-between py-2.5 mr-1">
+			<span class="text-sm font-medium text-ink">Filters</span>
+			{#if activeCount > 0}
+				<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">
+					Clear all
+				</button>
+			{/if}
+		</div>
+
+		{#if activeColumns.length > 0}
+			<div class="overflow-hidden border-t border-surface-2">
+				<ScrollArea.Root class="h-96">
+					<ScrollArea.Viewport>
+						<ScrollArea.Content class="flex flex-col gap-3">
+							{#each activeColumns as column (column.id)}
+								<div class="border border-surface-3 p-3">
+									<div class="mb-2 flex items-center justify-between">
+										<span class="text-sm font-medium text-ink">{getColumnLabel(column)}</span>
+										<button
+											type="button"
+											onclick={() => removeFilter(column)}
+											class="text-ink-dim transition-colors hover:text-ink"
+										>
+											<PhX class="size-3.5" />
+										</button>
+									</div>
+
+									{#if getColumnType(column) === 'number' || getColumnType(column) === 'currency' || getColumnType(column) === 'percent'}
+										{@const [facetMin, facetMax] = getFacetedMinMax(column)}
+										{@const colFormatOptions = getColumnFormatOptions(column)}
+										<div class="flex flex-col gap-1.5">
+											<div class="min-w-0 flex-1">
+												<NumberInput
+													layout="horizontal"
+													label="From"
+													value={localNumMin[column.id] ?? null}
+													min={facetMin}
+													max={facetMax}
+													formatOptions={colFormatOptions}
+													onValueChange={({ valueAsNumber }) =>
+														handleNumericInput(
+															column,
+															'min',
+															isNaN(valueAsNumber) ? null : valueAsNumber
+														)}
+												/>
+											</div>
+											<div class="min-w-0 flex-1">
+												<NumberInput
+													layout="horizontal"
+													label="To"
+													value={localNumMax[column.id] ?? null}
+													min={facetMin}
+													max={facetMax}
+													formatOptions={colFormatOptions}
+													onValueChange={({ valueAsNumber }) =>
+														handleNumericInput(
+															column,
+															'max',
+															isNaN(valueAsNumber) ? null : valueAsNumber
+														)}
+												/>
+											</div>
+										</div>
+									{:else if getColumnType(column) === 'boolean'}
+										{@const boolFilter = column.getFilterValue() as boolean | undefined}
+										<div class="flex overflow-hidden rounded border border-border text-xs">
+											<button
+												type="button"
+												onclick={() => column.setFilterValue(undefined)}
+												class={cn(
+													'flex-1 px-2 py-1',
+													boolFilter === undefined
+														? 'bg-surface-3 font-medium text-ink'
+														: 'text-ink-dim hover:bg-surface-2'
+												)}
+											>
+												All
+											</button>
+											<button
+												type="button"
+												onclick={() =>
+													column.setFilterValue(boolFilter === true ? undefined : true)}
+												class={cn(
+													'flex-1 border-x border-border px-2 py-1',
+													boolFilter === true
+														? 'bg-surface-3 font-medium text-ink'
+														: 'text-ink-dim hover:bg-surface-2'
+												)}
+											>
+												Yes
+											</button>
+											<button
+												type="button"
+												onclick={() =>
+													column.setFilterValue(boolFilter === false ? undefined : false)}
+												class={cn(
+													'flex-1 px-2 py-1',
+													boolFilter === false
+														? 'bg-surface-3 font-medium text-ink'
+														: 'text-ink-dim hover:bg-surface-2'
+												)}
+											>
+												No
+											</button>
+										</div>
+									{:else if getColumnType(column) === 'select'}
+										{@const allOptions = getFacetedValues(column)}
+										{@const search = localSelectSearch[column.id] ?? ''}
+										{@const options = search
+											? allOptions.filter((o) => o.toLowerCase().includes(search.toLowerCase()))
+											: allOptions}
+										{@const selected = getSelectValues(column)}
+										<div class="flex flex-col gap-1">
+											<Field.Root>
+												<Field.Input
+													placeholder="Search..."
+													value={search}
+													oninput={(e: Event) => {
+														localSelectSearch[column.id] = (
+															e.currentTarget as HTMLInputElement
+														).value;
+													}}
+												/>
+											</Field.Root>
+											<ScrollArea.Root>
+												<ScrollArea.Viewport class="max-h-40">
+													<ScrollArea.Content>
+														<div class="flex flex-col gap-0.5">
+															{#each options as option (option)}
+																<Checkbox
+																	size="sm"
+																	label={option}
+																	class="min-h-7 rounded-sm px-2 hover:bg-surface-2"
+																	checked={selected.includes(option)}
+																	onCheckedChange={({ checked }) =>
+																		handleSelectChange(column, option, checked === true)}
+																/>
+															{/each}
+														</div>
+													</ScrollArea.Content>
+												</ScrollArea.Viewport>
+												<ScrollArea.Scrollbar orientation="vertical">
+													<ScrollArea.Thumb />
+												</ScrollArea.Scrollbar>
+												<ScrollArea.Corner />
+											</ScrollArea.Root>
+										</div>
+									{:else}
+										<Field.Root>
+											<Field.Input
+												placeholder="Search..."
+												value={localText[column.id] ?? ''}
+												oninput={(e: Event) =>
+													handleTextInput(column, (e.currentTarget as HTMLInputElement).value)}
+											/>
+										</Field.Root>
+									{/if}
+								</div>
+							{/each}
+						</ScrollArea.Content>
+					</ScrollArea.Viewport>
+					<ScrollArea.Scrollbar orientation="vertical">
+						<ScrollArea.Thumb />
+					</ScrollArea.Scrollbar>
+					<ScrollArea.Corner />
+				</ScrollArea.Root>
+			</div>
+		{/if}
+
+		{#if showColumnPicker}
+			<div class="border-t border-surface-3 p-3">
+				<div class="relative mb-1">
+					<PhMagnifyingGlass
+						class="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-ink-dim"
+					/>
+					<input
+						type="text"
+						placeholder="Search columns..."
+						bind:value={columnSearchText}
+						class="h-8 w-full rounded border border-border bg-surface-1 pr-3 pl-7 text-sm text-ink outline-none placeholder:text-ink-dim focus:ring-1 focus:ring-ring"
+					/>
+				</div>
+				<div class="max-h-48 overflow-y-auto">
+					{#each availableColumns as column (column.id)}
+						<button
+							type="button"
+							onclick={() => addFilter(column)}
+							class="w-full rounded px-2 py-1.5 text-left text-sm text-ink hover:bg-surface-2"
+						>
+							{getColumnLabel(column)}
+						</button>
+					{:else}
+						<p class="px-2 py-3 text-center text-sm text-ink-dim">No more columns</p>
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<div class="border-t border-surface-3">
+				<button
+					type="button"
+					onclick={() => (showColumnPicker = true)}
+					class="flex w-full items-center gap-2 px-3 py-2.5 text-sm text-ink-dim hover:bg-surface-2 hover:text-ink"
+				>
+					<span class="text-base leading-none">+</span>
+					Add Filter
+				</button>
+			</div>
+		{/if}
+	</Popover.Content>
+</Popover.Root>