children: React.ReactNode;

collectionId: string;

collectionLayerId: string;

filters: ConditionalVisibility;

sortBy?: string;

sortOrder?: 'asc' | 'desc';

sortByInputLayerId?: string;

sortOrderInputLayerId?: string;

limit?: number;

/** Hard cap on the total — clamps the displayed count and `hasMore` so a

maxTotal?: number;

/** Leading records skipped by the collection's `offset` before pagination.

baseOffset?: number;

paginationMode?: 'pages' | 'load_more';

layerTemplate: Layer[];

collectionLayerClasses?: string[];

collectionLayerTag?: string;

isPublished?: boolean;

/** Preview mode forces server-rendered links to use the `/ycode/preview` prefix. */

isPreview?: boolean;

/** Item ID of the dynamic-page collection being rendered (for `current-page` link keywords). */

pageCollectionItemId?: string;

/** Ordered ids of the dynamic page's collection — powers `next-item` / `previous-item` link keywords. */

pageCollectionSortedItemIds?: string[];

/** Full collection layer (sans children) — lets the server rebuild proper item wrappers (link/action/attributes). */

collectionLayer?: Omit<Layer, 'children'>;

if (typeof document === 'undefined') return;

if (document.getElementById(FC_SKELETON_STYLE_ID)) return;

const style = document.createElement('style');

style.id = FC_SKELETON_STYLE_ID;

style.textContent = getSkeletonStyles();

document.head.appendChild(style);

return (

`@keyframes fc-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.45}}` +

`[${FC_SKELETON_ATTR}]{` +

`min-height:7rem;border-radius:.5rem;` +

`background:currentColor;color:rgba(120,120,120,.18);` +

`animation:fc-skeleton-pulse 1.2s ease-in-out infinite;}`

);

collectionLayerId: string;

layerTemplate: Layer[];

itemIds: string[];

append: boolean;

/** Full collection layer (sans children) — when present, initializers

collectionLayer?: Omit<Layer, 'children'>;

children,

collectionId,

collectionLayerId,

filters,

sortBy,

sortOrder,

sortByInputLayerId,

sortOrderInputLayerId,

limit,

maxTotal,

baseOffset,

paginationMode,

layerTemplate,

collectionLayerClasses,

collectionLayerTag,

isPublished = true,

isPreview = false,

pageCollectionItemId,

pageCollectionSortedItemIds,

collectionLayer,

}: FilterableCollectionProps) {

const markerRef = useRef<HTMLSpanElement>(null);

const ssrChildrenRef = useRef<Element[]>([]);

const [isFiltering, setIsFiltering] = useState(false);

const [hasActiveFilters, setHasActiveFilters] = useState(false);

const prevFilterKeyRef = useRef<string>('');

const abortRef = useRef<AbortController | null>(null);

const inFlightRequestKeyRef = useRef<string | null>(null);

const hasInputLinkedFilters = filters.groups.some(g =>

g.conditions.some(c => c.inputLayerId || c.inputLayerId2)

);

// Relative date presets (e.g. `$today`) are resolved at render time and baked

// into the indefinitely-cached SSR HTML, so they go stale as the calendar

// advances. Treat their presence like a runtime control: reconcile against the

// live server on mount so the list always reflects the real "today" (and stays

// consistent with the server-side search/filter, which re-resolves it fresh).

const hasDynamicDateFilter = hasDynamicDateRule(filters);

const [renderInitialSkeleton, setRenderInitialSkeleton] = useState(hasDynamicDateFilter);

// Input-linked filters (e.g. a URL-driven search) hide the SSR list up front so

// we don't flash the full list before narrowing it. A date-only reconcile keeps

// the SSR list visible and relies on the loading dim (`isFiltering` opacity)

// instead — showing the current list while it updates avoids a blank flash

// before the reconciled list arrives.

const pendingFirstEvalRef = useRef(hasInputLinkedFilters);

const [filteredPage, setFilteredPage] = useState(1);

const [filteredTotalPages, setFilteredTotalPages] = useState(1);

const [filteredHasMore, setFilteredHasMore] = useState(false);

const [filteredTotal, setFilteredTotal] = useState(0);

const [filteredLoaded, setFilteredLoaded] = useState(0);

const loadMoreOffsetRef = useRef(0);

const ssrPaginationTextRef = useRef<string | null>(null);

const ssrPrevClassRef = useRef<string | null>(null);

const ssrNextClassRef = useRef<string | null>(null);

const ssrCountTextRef = useRef<string | null>(null);

const ssrLoadMoreBtnDisplayRef = useRef<string | null>(null);

const ssrWrapperHadHiddenRef = useRef<boolean | null>(null);

const strippedPaginationParamRef = useRef(false);

const strippedId = collectionLayerId.startsWith('lyr-')

? collectionLayerId.slice(4)

: collectionLayerId;

const pKey = `p_${strippedId}`;

const fpKey = `fp_${strippedId}`;

// --- DOM helpers: find parent collection layer, hide/show SSR children ---

const getParent = useCallback(() => {

return markerRef.current?.parentElement as HTMLElement | null;

}, []);

const setSsrItemsDisplay = useCallback((display: '' | 'none') => {

ssrChildrenRef.current.forEach(el => {

(el as HTMLElement).style.display = display;

});

// Items previously appended by LoadMoreCollection live alongside the SSR

// children but aren't captured by `ssrChildrenRef` (they're added after

// mount). Toggle them in tandem so a runtime filter doesn't leave stale

// load-more rows visible underneath the filtered results.

const parent = getParent();

if (!parent) return;

parent.querySelectorAll(`[${LOAD_MORE_APPENDED_ATTR}]`).forEach(el => {

(el as HTMLElement).style.display = display;

});

}, [getParent]);

const hideSSR = useCallback(() => setSsrItemsDisplay('none'), [setSsrItemsDisplay]);

const showSSR = useCallback(() => setSsrItemsDisplay(''), [setSsrItemsDisplay]);

const clearFilteredDOM = useCallback(() => {

const parent = getParent();

if (!parent) return;

parent.querySelectorAll(`[${FC_FILTERED_ATTR}]`).forEach(el => el.remove());

}, [getParent]);

const removeLoadingSkeleton = useCallback(() => {

setRenderInitialSkeleton(false);

const parent = getParent();

if (!parent) return;

parent.querySelectorAll(`[${FC_RUNTIME_SKELETON_ATTR}]`).forEach(el => el.remove());

}, [getParent]);

// Show placeholder cards while a fresh list is fetched, but only when there's

// nothing already on screen to dim. This targets the relative-date reconcile

// (and any filter that starts from an empty list), where the SSR HTML can be

// empty — without it the list looks broken/empty for the 1-3s round-trip.

const showLoadingSkeleton = useCallback(() => {

const parent = getParent();

if (!parent) return;

if (parent.querySelector(`[${FC_SKELETON_ATTR}]`)) return;

const hasVisibleSsr = ssrChildrenRef.current.some(

el => (el as HTMLElement).style.display !== 'none'

);

const hasVisibleFiltered = parent.querySelector(`[${FC_FILTERED_ATTR}]`) !== null;

if (hasVisibleSsr || hasVisibleFiltered) return;

ensureSkeletonStyles();

const count = Math.min(Math.max(limit && limit > 0 ? limit : 6, 1), 8);

// Clone a real item when one exists (best layout fidelity); otherwise fall

// back to a generic block that flows in whatever grid/flex the parent uses.

const template = ssrChildrenRef.current[0] as HTMLElement | undefined;

for (let i = 0; i < count; i++) {

let node: HTMLElement;

if (template) {

node = template.cloneNode(true) as HTMLElement;

node.style.color = 'rgba(120,120,120,.18)';

node.style.background = 'currentColor';

node.style.borderRadius = '0.5rem';

node.style.animation = 'fc-skeleton-pulse 1.2s ease-in-out infinite';

node.querySelectorAll('*').forEach(child => {

(child as HTMLElement).style.visibility = 'hidden';

});

} else {

node = document.createElement('div');

}

node.style.display = '';

node.setAttribute(FC_SKELETON_ATTR, '');

node.setAttribute(FC_RUNTIME_SKELETON_ATTR, '');

parent.appendChild(node);

}

}, [getParent, limit]);

const injectFilteredHTML = useCallback((html: string, append: boolean, itemIds: string[]) => {

const parent = getParent();

if (!parent) return;

if (!append) {

removeLoadingSkeleton();

hideSSR();

clearFilteredDOM();

}

const temp = document.createElement('div');

temp.innerHTML = html;

while (temp.firstChild) {

const child = temp.firstChild;

if (child instanceof Element) child.setAttribute(FC_FILTERED_ATTR, '');

parent.appendChild(child);

}

const detail: ItemsInjectedDetail = { collectionLayerId, layerTemplate, itemIds, append, collectionLayer };

window.dispatchEvent(new CustomEvent<ItemsInjectedDetail>(ITEMS_INJECTED_EVENT, { detail }));

}, [getParent, hideSSR, clearFilteredDOM, removeLoadingSkeleton, collectionLayerId, layerTemplate, collectionLayer]);

// Capture SSR children on mount (before paint) and hide stale SSR output when

// the initial runtime reconcile will replace it. Without this, cached rows can

// flash briefly before the skeleton/fresh fetch starts.

useLayoutEffect(() => {

if (!markerRef.current) return;

const parent = markerRef.current.parentElement;

if (!parent) return;

ssrChildrenRef.current = Array.from(parent.children).filter(

el =>

el !== markerRef.current &&

el.tagName.toLowerCase() !== 'style' &&

!(el as HTMLElement).hasAttribute('data-collection-marker') &&

!(el as HTMLElement).hasAttribute(FC_SKELETON_ATTR)

);

if (pendingFirstEvalRef.current) {

hideSSR();

} else if (hasDynamicDateFilter) {

hideSSR();

showLoadingSkeleton();

}

markerRef.current.removeAttribute(FC_PRERENDER_HIDE_ATTR);

}, []); // eslint-disable-line react-hooks/exhaustive-deps

const filterValues = useFilterStore((state) => state.values);

const findLinkedInputValue = useCallback((inputLayerId?: string): string => {

if (!inputLayerId) return '';

for (const layerValues of Object.values(filterValues)) {

if (inputLayerId in layerValues) {

return layerValues[inputLayerId] || '';

}

}

return '';

}, [filterValues]);

const linkedSortByValue = findLinkedInputValue(sortByInputLayerId).trim();

const linkedSortOrderValue = findLinkedInputValue(sortOrderInputLayerId).trim().toLowerCase();

const isLinkedSortByValid = linkedSortByValue.length > 0 && linkedSortByValue !== 'none';

const isLinkedSortOrderValid = linkedSortOrderValue === 'asc' || linkedSortOrderValue === 'desc';

const effectiveSortBy = isLinkedSortByValid ? linkedSortByValue : sortBy;

const effectiveSortOrder = (isLinkedSortOrderValid ? linkedSortOrderValue : sortOrder) as 'asc' | 'desc' | undefined;

const hasRuntimeSortOverride = Boolean(

(sortByInputLayerId && isLinkedSortByValid) ||

(sortOrderInputLayerId && isLinkedSortOrderValid)

);

const buildApiFilters = useCallback(() => {

type FilterItem = {

fieldId: string;

operator: string;

value: string;

value2?: string;

fieldType?: string;

source?: 'collection_field' | 'self';

includesCurrentPageItem?: boolean;

valueMode?: 'static' | 'current_page';

currentPageFieldId?: string;

};

const operatorsWithoutValue = new Set([

'is_present',

'is_empty',

'is_not_empty',

'has_items',

'has_no_items',

'exists',

'does_not_exist',

]);

const activeByGroup: FilterItem[][] = [];

for (const group of filters.groups) {

const activeInGroup: FilterItem[] = [];

for (const condition of group.conditions) {

// Self conditions compare against the item's own ID — no fieldId needed,

// and they're forwarded verbatim so the server resolves the current page item.

if (condition.source === 'self') {

const hasStaticIds = !!condition.value && condition.value !== '[]';

if (!hasStaticIds && !condition.includesCurrentPageItem) continue;

activeInGroup.push({

fieldId: '',

operator: condition.operator,

value: condition.value || '[]',

source: 'self',

includesCurrentPageItem: condition.includesCurrentPageItem,

});

continue;

}

if (!condition.fieldId) continue;

// Current-page conditions are forwarded verbatim; the server resolves the

// compare value from the current dynamic page item (its own ID for

// reference fields, or `currentPageFieldId`'s value for scalar fields).

if (condition.valueMode === 'current_page') {

activeInGroup.push({

fieldId: condition.fieldId,

operator: condition.operator,

value: condition.value || '',

fieldType: condition.fieldType,

valueMode: 'current_page',

currentPageFieldId: condition.currentPageFieldId,

});

continue;

}

let value = condition.inputLayerId ? '' : (condition.value || '');

let value2 = condition.inputLayerId2 ? '' : condition.value2;

if (condition.inputLayerId) {

let inputValue = '';

for (const layerValues of Object.values(filterValues)) {

if (condition.inputLayerId in layerValues) {

inputValue = layerValues[condition.inputLayerId];

break;

}

}

if (!inputValue && condition.operator !== 'is_between') continue;

if (condition.fieldType === 'boolean' && inputValue === 'false') continue;

if (inputValue && inputValue.includes(',')) {

const checkedValues = inputValue.split(',').filter(Boolean);

if (checkedValues.length > 0) {

const arrayOperators = ['is_one_of', 'is_not_one_of', 'contains_all_of', 'contains_exactly'];

activeInGroup.push({

fieldId: condition.fieldId,

operator: arrayOperators.includes(condition.operator) ? condition.operator : 'is_one_of',

value: JSON.stringify(checkedValues),

fieldType: condition.fieldType,

});

}

continue;

}

if (inputValue) value = inputValue;

}

if (condition.inputLayerId2) {

let inputValue2 = '';

for (const layerValues of Object.values(filterValues)) {

if (condition.inputLayerId2 in layerValues) {

inputValue2 = layerValues[condition.inputLayerId2];

break;

}

}

if (!inputValue2 && condition.operator !== 'is_between') continue;

if (inputValue2) value2 = inputValue2;

}

const requiresValue = !operatorsWithoutValue.has(condition.operator);

if (condition.operator === 'is_between') {

if (!value && !value2) continue;

} else if (requiresValue && !value) {

continue;

}

if (

(condition.fieldType === 'reference' || condition.fieldType === 'multi_reference') &&

['is_one_of', 'is_not_one_of', 'contains_all_of', 'contains_exactly'].includes(condition.operator) &&

condition.inputLayerId

) {

value = JSON.stringify([value]);

}

// Date presets (e.g. `$today`) are forwarded verbatim — the filter API

// resolves them against the project timezone, so "today" matches the

// site's configured timezone rather than the visitor's browser.

activeInGroup.push({

fieldId: condition.fieldId,

operator: condition.operator,

value,

value2,

fieldType: condition.fieldType,

});

}

if (activeInGroup.length > 0) {

activeByGroup.push(activeInGroup);

}

}

if (activeByGroup.length === 0) return [];

const MAX_FILTER_GROUPS = 50;

let result: FilterItem[][] = [[]];

for (const groupConditions of activeByGroup) {

const expanded: FilterItem[][] = [];

for (const existing of result) {

for (const cond of groupConditions) {

expanded.push([...existing, cond]);

if (expanded.length >= MAX_FILTER_GROUPS) break;

}

if (expanded.length >= MAX_FILTER_GROUPS) break;

}

result = expanded;

if (result.length >= MAX_FILTER_GROUPS) break;

}

return result;

}, [filters, filterValues]);

const updateEmptyStateElements = useCallback((filteredCount: number) => {

const emptyEls = document.querySelectorAll(

`[data-collection-empty-state="${collectionLayerId}"]`

);

const hasItemsEls = document.querySelectorAll(

`[data-collection-has-items="${collectionLayerId}"]`

);

const itemCountEls = document.querySelectorAll(

`[data-collection-item-count="${collectionLayerId}"]`

);

const evaluateItemCount = (count: number, op: string, value: number): boolean => {

if (op === 'lt') return count < value;

if (op === 'lte') return count <= value;

if (op === 'gt') return count > value;

if (op === 'gte') return count >= value;

return count === value;

};

if (filteredCount < 0) {

emptyEls.forEach(el => { (el as HTMLElement).style.display = 'none'; });

hasItemsEls.forEach(el => { (el as HTMLElement).style.display = 'none'; });

itemCountEls.forEach(el => { (el as HTMLElement).style.display = 'none'; });

} else {

emptyEls.forEach(el => {

(el as HTMLElement).style.display = filteredCount === 0 ? '' : 'none';

});

hasItemsEls.forEach(el => {

(el as HTMLElement).style.display = filteredCount > 0 ? '' : 'none';

});

itemCountEls.forEach(el => {

const node = el as HTMLElement;

const op = node.getAttribute('data-collection-item-count-op') || 'eq';

const rawValue = node.getAttribute('data-collection-item-count-value') || '0';

const value = Number.parseInt(rawValue, 10);

const shouldShow = evaluateItemCount(filteredCount, op, Number.isNaN(value) ? 0 : value);

node.style.display = shouldShow ? '' : 'none';

});

}

}, [collectionLayerId]);

// --- SSR pagination DOM helpers ---

const getSsrPaginationWrapper = useCallback(() => {

return document.querySelector(

`[data-pagination-for="${collectionLayerId}"]`

) as HTMLElement | null;

}, [collectionLayerId]);

const toggleSsrWrapperHidden = useCallback((wrapper: HTMLElement, hide: boolean) => {

if (ssrWrapperHadHiddenRef.current === null) {

ssrWrapperHadHiddenRef.current = wrapper.classList.contains('hidden');

}

wrapper.classList.toggle('hidden', hide);

}, []);

const updateSsrPaginationDisplay = useCallback((page: number, totalPages: number) => {

const wrapper = getSsrPaginationWrapper();

if (!wrapper) return;

toggleSsrWrapperHidden(wrapper, totalPages <= 0);

const infoEl = wrapper.querySelector(`[data-layer-id$="-pagination-info"]`) as HTMLElement | null;

if (infoEl) {

if (ssrPaginationTextRef.current === null) {

ssrPaginationTextRef.current = infoEl.textContent || '';

}

const template = infoEl.getAttribute('data-pagination-template');

infoEl.textContent = template

? resolvePaginationString(template, { shown: 0, total: 0, current: page, pages: totalPages })

: `Page ${page} of ${totalPages}`;

}

const prevBtn = wrapper.querySelector(`[data-pagination-action="prev"]`) as HTMLElement | null;

if (prevBtn) {

if (ssrPrevClassRef.current === null) {

ssrPrevClassRef.current = prevBtn.className;

}

const isFirst = page <= 1;

if (isFirst) {

prevBtn.classList.add('opacity-50', 'cursor-not-allowed');

prevBtn.classList.remove('cursor-pointer');

} else {

prevBtn.classList.remove('opacity-50', 'cursor-not-allowed');

prevBtn.classList.add('cursor-pointer');

}

}

const nextBtn = wrapper.querySelector(`[data-pagination-action="next"]`) as HTMLElement | null;

if (nextBtn) {

if (ssrNextClassRef.current === null) {

ssrNextClassRef.current = nextBtn.className;

}

const isLast = page >= totalPages;

if (isLast) {

nextBtn.classList.add('opacity-50', 'cursor-not-allowed');

nextBtn.classList.remove('cursor-pointer');

} else {

nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');

nextBtn.classList.add('cursor-pointer');

}

}

}, [getSsrPaginationWrapper, toggleSsrWrapperHidden]);

const updateSsrLoadMoreDisplay = useCallback((loaded: number, total: number, hasMore: boolean) => {

const wrapper = getSsrPaginationWrapper();

if (!wrapper) return;

toggleSsrWrapperHidden(wrapper, total <= 0);

const countEl = wrapper.querySelector(`[data-layer-id$="-pagination-count"]`) as HTMLElement | null;

if (countEl) {

if (ssrCountTextRef.current === null) {

ssrCountTextRef.current = countEl.textContent || '';

}

const template = countEl.getAttribute('data-pagination-template');

const shown = Math.min(loaded, total);

countEl.textContent = template

? resolvePaginationString(template, { shown, total, current: 1, pages: 1 })

: `Showing ${shown} of ${total}`;

}

const loadMoreBtn = wrapper.querySelector(`[data-pagination-action="load_more"]`) as HTMLElement | null;

if (loadMoreBtn) {

if (ssrLoadMoreBtnDisplayRef.current === null) {

ssrLoadMoreBtnDisplayRef.current = loadMoreBtn.style.display;

}

loadMoreBtn.style.display = hasMore ? '' : 'none';

}

}, [getSsrPaginationWrapper]);

const restoreSsrPagination = useCallback(() => {

const wrapper = getSsrPaginationWrapper();

if (!wrapper) return;

if (ssrPaginationTextRef.current !== null) {

const infoEl = wrapper.querySelector(`[data-layer-id$="-pagination-info"]`) as HTMLElement | null;

if (infoEl) {

infoEl.textContent = ssrPaginationTextRef.current;

}

ssrPaginationTextRef.current = null;

}

if (ssrPrevClassRef.current !== null) {

const prevBtn = wrapper.querySelector(`[data-pagination-action="prev"]`) as HTMLElement | null;

if (prevBtn) prevBtn.className = ssrPrevClassRef.current;

ssrPrevClassRef.current = null;

}

if (ssrNextClassRef.current !== null) {

const nextBtn = wrapper.querySelector(`[data-pagination-action="next"]`) as HTMLElement | null;

if (nextBtn) nextBtn.className = ssrNextClassRef.current;

ssrNextClassRef.current = null;

}

if (ssrCountTextRef.current !== null) {

const countEl = wrapper.querySelector(`[data-layer-id$="-pagination-count"]`) as HTMLElement | null;

if (countEl) countEl.textContent = ssrCountTextRef.current;

ssrCountTextRef.current = null;

}

if (ssrLoadMoreBtnDisplayRef.current !== null) {

const loadMoreBtn = wrapper.querySelector(`[data-pagination-action="load_more"]`) as HTMLElement | null;

if (loadMoreBtn) loadMoreBtn.style.display = ssrLoadMoreBtnDisplayRef.current;

ssrLoadMoreBtnDisplayRef.current = null;

}

if (ssrWrapperHadHiddenRef.current !== null) {

wrapper.classList.toggle('hidden', ssrWrapperHadHiddenRef.current);

ssrWrapperHadHiddenRef.current = null;

}

}, [getSsrPaginationWrapper]);

// --- Click intercepts ---

const paginationInterceptRef = useRef<((e: Event) => void) | null>(null);

const goToFilteredPageRef = useRef<(page: number) => void>(() => {});

const handleLoadMoreRef = useRef<() => void>(() => {});

const syncFilteredPageToUrl = useCallback((page: number) => {

const url = new URL(window.location.href);

if (page <= 1) {

url.searchParams.delete(fpKey);

} else {

url.searchParams.set(fpKey, String(page));

}

window.history.replaceState({}, '', url.toString());

}, [fpKey]);

const goToFilteredPage = useCallback((page: number) => {

if (page < 1 || page > filteredTotalPages || isFiltering) return;

const groups = buildApiFilters();

const offset = (page - 1) * (limit || 10);

setFilteredPage(page);

syncFilteredPageToUrl(page);

fetchFilteredRef.current(groups, offset, false);

}, [filteredTotalPages, isFiltering, buildApiFilters, limit, syncFilteredPageToUrl]);

useEffect(() => {

goToFilteredPageRef.current = goToFilteredPage;

}, [goToFilteredPage]);

const handleLoadMore = useCallback(() => {

if (isFiltering || !filteredHasMore) return;

const groups = buildApiFilters();

fetchFilteredRef.current(groups, loadMoreOffsetRef.current, true);

}, [isFiltering, filteredHasMore, buildApiFilters]);

useEffect(() => {

handleLoadMoreRef.current = handleLoadMore;

}, [handleLoadMore]);

const attachPaginationIntercept = useCallback(() => {

const wrapper = getSsrPaginationWrapper();

if (!wrapper || paginationInterceptRef.current) return;

const handler = (e: Event) => {

const target = e.target as HTMLElement;

const button = target.closest('[data-pagination-action]') as HTMLElement | null;

if (!button) return;

e.stopPropagation();

e.preventDefault();

const action = button.getAttribute('data-pagination-action');

if (action === 'prev') {

goToFilteredPageRef.current(filteredPageRef.current - 1);

} else if (action === 'next') {

goToFilteredPageRef.current(filteredPageRef.current + 1);

} else if (action === 'load_more') {

handleLoadMoreRef.current();

}

};

wrapper.addEventListener('click', handler, true);

paginationInterceptRef.current = handler;

}, [getSsrPaginationWrapper]);

const detachPaginationIntercept = useCallback(() => {

const wrapper = getSsrPaginationWrapper();

if (!wrapper || !paginationInterceptRef.current) return;

wrapper.removeEventListener('click', paginationInterceptRef.current, true);

paginationInterceptRef.current = null;

}, [getSsrPaginationWrapper]);

const filteredPageRef = useRef(filteredPage);

useEffect(() => { filteredPageRef.current = filteredPage; }, [filteredPage]);

// --- Fetch logic ---

const fetchFiltered = useCallback((

filterGroups: Array<Array<{

fieldId: string;

operator: string;

value: string;

value2?: string;

fieldType?: string;

source?: 'collection_field' | 'self';

includesCurrentPageItem?: boolean;

valueMode?: 'static' | 'current_page';

currentPageFieldId?: string;

}>>,

offset: number,

append: boolean,

) => {

const requestKey = JSON.stringify({

filterGroups,

offset,

append,

sortBy: effectiveSortBy,

sortOrder: effectiveSortOrder,

limit,

});

if (inFlightRequestKeyRef.current === requestKey) return;

setIsFiltering(true);

if (!append) showLoadingSkeleton();

abortRef.current?.abort();

const controller = new AbortController();

abortRef.current = controller;

inFlightRequestKeyRef.current = requestKey;

fetch(`/ycode/api/collections/${collectionId}/items/filter`, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

layerTemplate,

collectionLayerId,

filterGroups,

sortBy: effectiveSortBy,

sortOrder: effectiveSortOrder,

limit,

offset,

maxTotal,

baseOffset,

published: isPublished,