@wildo-ai/saas-frontend-lib 1.0.1 → 1.1.0

package/dist/esm/components/resources/ResourceLayout_List.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useEffect, useState, useRef } from 'react';
+import React, { useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { useI18n } from '../../core/i18n/useI18n.js';
+import { useEventBus } from '../../core/events/useEventBus.js';
+import { FrontendEvents } from '../../core/events/events.frontend.schemas.js';
+import { resolveComponentLabel } from '../../core/i18n/component-label-resolution.utils.js';
 import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
 import { useResourceRegistry } from '../../core/resources/useResourceRegistry.js';
 import { frontendResourceUtils, FrontendResourceUtils } from '../../core/resources/frontend-resource.utils.js';
@@ -8,36 +11,46 @@ import { useResourceOperationSurface } from '../../core/resources/useResourceOpe
 import { Button } from '../../components/actions/button.js';
 import { LoggerFrontendService } from '../../core/monitoring/logger.frontend.service.js';
 import { CoreResourceOperation, ResourcesConfig_OperationPathUtils, ResourceOperationDisplayMode, ErrorCustomMessageReference, DataMode, } from '@wildo-ai/saas-models';
+import { CollectionDisplayMode, CardLayoutStyle, ActionVisibility, isOperationHeadless, isCollectionScopedOperation, } from '../../core/resources/resources.frontend.schemas.js';
+import { isGeneratedCollectionExportOperation } from '../../core/resources/operation-semantics.frontend.utils.js';
 import { StandardIconReference, IconSize } from '../../core/icons/icon-registry.frontend.schemas.js';
 import { ResourceLayout_Header } from '../../components/resources/ResourceLayout_Header.js';
 import { ResourceListItemRenderer } from '../../components/resources/ResourceListItemRenderer.js';
+import { ResourceInPlaceOperationRow } from '../../components/resources/ResourceInPlaceOperationRow.js';
+import { InPlaceOperationProvider, useInPlaceOperation } from '../../core/resources/in-place/InPlaceOperationContext.js';
 import { ResourceLayoutUtils } from '../../components/resources/resourceLayout.utils.js';
 import { ResourceLayout_Pagination } from '../../components/resources/ResourceLayout_Pagination.js';
 import { useSearchParams } from 'react-router-dom';
 import { extractErrorInfo } from '../../core/errors/errors.frontend.schemas.js';
 import { useUI } from '../../core/ui/useUI.js';
 import { UIBehavior, InteractiveVariant } from '@wildo-ai/presets-components-models';
-import { ResourceLayout_SortControl } from '../../components/resources/ResourceLayout_SortControl.js';
-import { ResourceLayout_FiltersControl } from '../../components/resources/ResourceLayout_FiltersControl.js';
 import { ResourceEmptyState } from '../../components/feedback/resource-empty-state.js';
 import { useInlineSearch } from '../../components/resources/useInlineSearch.js';
-import { InlineSearchInput } from '../../components/resources/InlineSearchInput.js';
+import { ResourceCollectionToolbar } from '../../components/resources/ResourceCollectionToolbar.js';
+import { ResourceCollectionBody_Table } from '../../components/resources/ResourceCollectionBody_Table.js';
+import { ResourceLayout_OperationBulk } from '../../components/resources/ResourceLayout_OperationBulk.js';
+import { ResourceLayout_CollectionActions } from '../../components/resources/ResourceLayout_CollectionActions.js';
+import { useResourceSelection } from '../../core/resources/useResourceSelection.js';
+import { useViewMode } from '../../components/resources/collection-view-mode.frontend.js';
+import { resolveCardsContainerClass, resolveCardsGridStyle, CARDS_GRID_CELL_CLASS } from '../../components/resources/collection-card-layout.utils.js';
+import { cn } from '../../core/ui/cn.js';
 import { ResourceLayout_InsertedViews, } from '../../components/resources/ResourceLayout_InsertedViews.js';
 import { createComponentResolver } from '../../core/components-registry/component-resolver.frontend.helper.js';
 import { FrontendComponentType, CorePreset_ResourceLayout_List, ButtonSize } from '@wildo-ai/presets-components-models';
 import { resolveResourceOperationPresetKey, resolveResourceOperationCustomView, } from '../../core/resources/resource-operation-view.frontend.utils.js';
 import { ResourceLayout_OperationsItems } from '../../components/resources/ResourceLayout_OperationsItems.js';
 import { LoadingGate } from '../../core/loading/LoadingGate.js';
+import { pickPreferredOperationForCoreSemanticAddressability } from '../../core/resources/resource-addressability.frontend.utils.js';
 const logger = LoggerFrontendService.getLogger();
 const logDebug = logger.debugByType('ResourceLayoutPreset_List_Default');
 logger.setDebugTypeLogging('ResourceLayoutPreset_List_Default', false);
-export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZone, navigationInitiator, dataMode: propDataMode, sourceRelationship, showCharts = true, }) => {
+export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZone, navigationInitiator, dataMode: propDataMode, sourceRelationship, showCharts = true, defaultViewMode = CollectionDisplayMode.CARDS, }) => {
     const { resourceType, operation, operationId, resourceConfig, operationInitiator, contextualParameters, resolvePreferredOperation, navigateToResourceOperation, } = useResourceOperationSurface({
         resourceContext,
         navigationZone,
         navigationInitiator,
     });
-    const { tResourceHeader, tResourceFieldDisplay, tResourceFieldEnumValue, tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST, resource: resourceType });
+    const { tResourceHeader, tResourceFieldDisplay, tResourceFieldEnumValue, tResourceOperation, tComponent, formatDate, isReady } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST, resource: resourceType });
     const { renderIcon } = useIconRegistry();
     const { registry, doOperation } = useResourceRegistry();
     const [searchParams] = useSearchParams();
@@ -47,8 +60,69 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
         ...operationInitiator,
         sourceRelationship: sourceRelationship ?? navigationInitiator?.sourceRelationship,
     }), [operationInitiator, sourceRelationship, navigationInitiator?.sourceRelationship]);
+    // Cards vs table is a FRONTEND presentation aspect — authored on the operation's
+    // `operationFrontendConfig.collectionDisplayConfig` (resource UI behavior), NOT on
+    // the shared resources-config (the backend has no notion of cards-vs-table).
+    // Resolution order: authored `displayMode` → registered-preset seed (the
+    // `defaultViewMode` prop, e.g. the legacy List_Table preset) → CARDS. The runtime
+    // toggle is shown ONLY when the operation opts in via `userSwitchableDisplayMode`;
+    // otherwise the view is pinned to the configured default and the persisted user
+    // choice is ignored. Switching never refetches — both bodies share the fetched
+    // `items`.
+    const collectionDisplayConfig = operation.operationFrontendConfig?.collectionDisplayConfig;
+    const seedViewMode = collectionDisplayConfig?.displayMode ?? defaultViewMode ?? CollectionDisplayMode.CARDS;
+    const userSwitchableViewMode = collectionDisplayConfig?.userSwitchableDisplayMode ?? false;
+    // Promoted enum quick-filter + temporal day-grouping — both authored on the
+    // same `collectionDisplayConfig` (pure frontend presentation; the tabs write
+    // into the standard filter state, the grouping is applied to the fetched page).
+    const quickFilterFieldName = collectionDisplayConfig?.quickFilterField;
+    const temporalGroupField = collectionDisplayConfig?.temporalGroupField;
+    // CARDS arrangement (list vs N-column grid) + per-card action placement +
+    // whether items are selectable — all authored on the same config.
+    const cardLayout = collectionDisplayConfig?.cardLayout;
+    const cardActionPlacement = collectionDisplayConfig?.cardActionPlacement;
+    const selectionEnabled = collectionDisplayConfig?.selectable ?? false;
+    const isCardGrid = cardLayout?.style === CardLayoutStyle.GRID;
+    // Narrow the union ONCE (a separate boolean does not narrow `cardLayout`), then
+    // feed both the container class and the intrinsic grid-template-columns style.
+    const cardGridColumns = cardLayout?.style === CardLayoutStyle.GRID ? cardLayout.columns : undefined;
+    const { viewMode: persistedViewMode, setViewMode } = useViewMode(resourceType, seedViewMode);
+    const viewMode = userSwitchableViewMode ? persistedViewMode : seedViewMode;
+    // Unified item-based selection (id→item), the single source of truth shared by
+    // the CARDS checkboxes and the TABLE select column, and fed to the bulk-action
+    // bar. Deliberately NOT cleared on cards↔table switch — a user's selection
+    // survives toggling the view. (Current-page select-all derivations live below
+    // the `items` state declaration.) Typed as a plain record so both `ListItem`
+    // (cards) and the table body's `TableItem` callbacks feed the SAME model.
+    //
+    // Identity MUST key on the resource's addressable identifier — the SAME field
+    // navigation + the bulk payload resolve records by (`getResourceObjectId`).
+    // Threading it to BOTH the selection model AND the bulk bar keeps selection
+    // highlight, cross-page dedup, and the bulk op's target ids on one identity;
+    // relying on the hook/bulk defaults (`id` vs `_id`) diverges for any resource
+    // whose identifier is a custom field or that exposes only one of id/_id.
+    const selectionIdField = resourceConfig?.resourceFieldIdentifier;
+    // Which row, if any, is currently transformed by an INLINE action. Provided by the wrapper below
+    // (see `ResourceLayout_List`), so this body may read it.
+    const inPlaceHost = useInPlaceOperation();
+    const selection = useResourceSelection({ idField: selectionIdField });
     // State
     const [items, setItems] = useState([]);
+    // Current-page select-all: additive (never a replace) so cross-page selections
+    // are preserved. Drives the table header checkbox + its toggle.
+    const currentPageAllSelected = items.length > 0 && items.every((it) => selection.isSelected(it));
+    // Depend on the STABLE selection methods (each is a useCallback from the hook),
+    // NOT the whole `selection` object (a fresh literal every render) — otherwise
+    // this callback churns each render and defeats the table `columns` memo.
+    const { isSelected: selectionIsSelected, selectItem: selectionSelectItem, deselectItem: selectionDeselectItem, toggleSelection: selectionToggle } = selection;
+    const handleToggleAllCurrentPage = useCallback(() => {
+        if (items.length > 0 && items.every((it) => selectionIsSelected(it))) {
+            items.forEach((it) => selectionDeselectItem(it));
+        }
+        else {
+            items.forEach((it) => selectionSelectItem(it));
+        }
+    }, [items, selectionIsSelected, selectionSelectItem, selectionDeselectItem]);
     const [error, setError] = useState(null);
     const [pagination, setPagination] = useState(() => {
         const listOp = operation;
@@ -58,7 +132,8 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
         return { page: 1, limit: pageSize, total: 0, totalPages: 0 };
     });
     const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
-    const [sortState, setSortState] = useState(null);
+    // Multi-field sort, highest priority first. Empty = no sorting.
+    const [sortStates, setSortStates] = useState([]);
     const [filterValues, setFilterValues] = useState({});
     const i18nKeys = useMemo(() => [
         `resources.${resourceType}`,
@@ -71,11 +146,11 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     }, []);
     // Refs for stable function references (avoid infinite loops)
     const doOperationRef = useRef(doOperation);
-    const sortStateRef = useRef(sortState);
+    const sortStatesRef = useRef(sortStates);
     const filterValuesRef = useRef(filterValues);
     // Keep refs updated
     doOperationRef.current = doOperation;
-    sortStateRef.current = sortState;
+    sortStatesRef.current = sortStates;
     filterValuesRef.current = filterValues;
     // Build stable key for context identifiers
     const contextResourceIdentifiersKey = useMemo(() => {
@@ -92,16 +167,63 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     const availableOperations = useMemo(() => {
         if (!resourceConfig)
             return { create: null, read: null, search: null };
+        // CREATE action visibility is governed by the op's `surface` (a view) and by
+        // `actionVisibility` — NOT by URL-addressability. The `surface` decides
+        // ADDRESSABLE (routable page) vs EMBEDDED (in-host view) vs API_ONLY (headless):
+        // a non-addressable CREATE still has a form view and opens in a host via
+        // `navigateToResourceOperation`. Post-build EVERY op has a resolved surface
+        // (preset → `defaultFrontendPosture` → API_ONLY); a CREATE shows iff it is NOT
+        // headless (`!isOperationHeadless`) and `actionVisibility` isn't HIDDEN.
+        // (Row-click READ follows the same posture in
+        // `resolveReadOperationForIdentifiers`: addressable preferred, EMBEDDED
+        // fallback, headless never.)
+        const createOp = resolvePreferredOperation(CoreResourceOperation.CREATE);
+        const createConfig = createOp?.operationFrontendConfig;
+        // Surface the Create button only when CREATE has an actual view (ADDRESSABLE or
+        // EMBEDDED) — never for a headless (API_ONLY) create — and isn't app-hidden.
+        const create = createOp && createConfig && !isOperationHeadless(createConfig)
+            && createConfig.actionVisibility !== ActionVisibility.HIDDEN
+            ? createOp
+            : null;
         return {
-            create: resolvePreferredOperation(CoreResourceOperation.CREATE, {
-                requireAddressable: true,
-            }) || null,
+            create,
             read: resolvePreferredOperation(CoreResourceOperation.READ, {
                 requireAddressable: true,
             }) || null,
             search: resolvePreferredOperation(CoreResourceOperation.SEARCH) || null,
         };
     }, [resourceConfig, resolvePreferredOperation]);
+    const resolveReadOperationForIdentifiers = useCallback((contextResourceIdentifiers) => {
+        if (!resourceConfig) {
+            return null;
+        }
+        const pickRead = (requireFrontendAddressable) => pickPreferredOperationForCoreSemanticAddressability({
+            resourceConfig,
+            operations: resourceConfig.operations ?? [],
+            coreOperation: CoreResourceOperation.READ,
+            registry,
+            hasResourceId: frontendResourceUtils.getResourceId(contextResourceIdentifiers[resourceType]).length > 0,
+            requireFrontendAddressable,
+            contextResourceIdentifiers,
+            contextualParameters: FrontendResourceUtils.buildContextualParameters(contextResourceIdentifiers, registry),
+        }) ?? null;
+        // Prefer the URL-addressable READ (deep-linkable page). When the app
+        // authored READ as EMBEDDED (`surface: EMBEDDED`, e.g. log-like rows whose
+        // detail is an overlay drill-in, not a routable page), fall back to it: an
+        // EMBEDDED READ has a real view and opens in a host via
+        // `navigateToResourceOperation` — the exact posture the CREATE button above
+        // already follows. Without this fallback a row click silently no-oped for
+        // every embedded-READ resource (found on the webhook delivery log). A
+        // headless (API_ONLY) READ never qualifies — there is no view to open.
+        const addressableRead = pickRead(true);
+        if (addressableRead) {
+            return addressableRead;
+        }
+        const anyRead = pickRead(false);
+        return anyRead && anyRead.operationFrontendConfig && !isOperationHeadless(anyRead.operationFrontendConfig)
+            ? anyRead
+            : null;
+    }, [registry, resourceConfig, resourceType]);
     const loadingScopes = useMemo(() => {
         const scopes = [{ resourceType, operation: operationId }];
         if (availableOperations.search) {
@@ -116,7 +238,10 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     const emptyStateConfig = useMemo(() => {
         return resourceConfig?.frontendConfiguration?.emptyState;
     }, [resourceConfig]);
-    // Get sortFields and filterFields from LIST operation (fallback to SEARCH if LIST has none)
+    // Get sortFields and filterFields from LIST operation (fallback to SEARCH if LIST has none).
+    // The transport context lets the parser exclude fields the transport already
+    // pins (primary-scope FK + selected-route URL parameters) and classify FK
+    // fields as reference selectors. See FilterFieldTransportContext.
     const { sortFields, filterFields, searchEnabled, filtersEnabled } = useMemo(() => {
         const listOp = operation;
         const searchOp = availableOperations.search;
@@ -124,14 +249,67 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
         const rawFilterFields = (listOp?.filterFields && Object.keys(listOp.filterFields).length > 0)
             ? listOp.filterFields
             : searchOp?.filterFields;
-        const filterFields = ResourceLayoutUtils.parseFilterFieldDefinitions(rawFilterFields);
+        const filterFields = ResourceLayoutUtils.parseFilterFieldDefinitions(rawFilterFields, resourceConfig
+            ? {
+                registry,
+                resourceConfig,
+                operation,
+                contextualParameters,
+                parentResourcesRequirements: resourceContext.parentResourcesRequirements,
+            }
+            : undefined);
         const searchEnabled = listOp?.searchEnabled ?? true;
         const filtersEnabled = listOp?.filtersEnabled ?? true;
         return { sortFields, filterFields, searchEnabled, filtersEnabled };
-    }, [availableOperations.search, operation]);
+    }, [availableOperations.search, operation, registry, resourceConfig, contextualParameters, resourceContext.parentResourcesRequirements]);
+    // Split the promoted quick-filter field OUT of the panel fields: exactly one
+    // control owns each filter field (tabs OR panel, never both). A misauthored
+    // promotion (unknown field / non-enum / no values) degrades gracefully — no
+    // tab strip, the field stays in the panel.
+    const { quickFilterDef, panelFilterFields } = useMemo(() => {
+        if (!quickFilterFieldName)
+            return { quickFilterDef: undefined, panelFilterFields: filterFields };
+        const def = filterFields.find((f) => f.fieldName === quickFilterFieldName && f.fieldType === 'enum' && (f.enumValues?.length ?? 0) > 0);
+        if (!def)
+            return { quickFilterDef: undefined, panelFilterFields: filterFields };
+        return { quickFilterDef: def, panelFilterFields: filterFields.filter((f) => f !== def) };
+    }, [filterFields, quickFilterFieldName]);
     const summaryFields = useMemo(() => {
         return ResourceLayoutUtils.detectSummaryFields(resourceConfig);
     }, [resourceConfig]);
+    const errorLoadingLabel = useMemo(() => resolveComponentLabel({
+        tComponent,
+        componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+        key: 'errorLoading',
+    }), [tComponent]);
+    const createLabel = useMemo(() => {
+        // Prefer the resource's OWN generated CREATE operation title (kind BUTTON — e.g.
+        // "Invite member" for ORGANIZATION_MEMBERS, "New todo" for todos): the same
+        // per-resource operation label the overlay title, header, and launcher already
+        // resolve via `tResourceOperation(res, op, 'title')`. The list create button was the
+        // only surface still hard-wired to the generic framework "create" component label
+        // ("Create new item"), so a resource could never brand its create affordance.
+        // Falls back to that generic label when the resource has no generated operation
+        // title yet, so no button is ever unlabelled.
+        const operationTitle = tResourceOperation(resourceType, CoreResourceOperation.CREATE, 'title');
+        if (operationTitle)
+            return operationTitle;
+        return resolveComponentLabel({
+            tComponent,
+            componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+            key: 'create',
+        });
+    }, [tComponent, tResourceOperation, resourceType]);
+    const noSearchResultsLabel = useMemo(() => resolveComponentLabel({
+        tComponent,
+        componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+        key: 'noSearchResults',
+    }), [tComponent]);
+    const listLabel = useMemo(() => resolveComponentLabel({
+        tComponent,
+        componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+        key: 'listLabel',
+    }), [tComponent]);
     // Resolve i18n field labels for summary fields
     // (fallback is handled internally by I18nContext — always returns a usable string)
     const fieldLabelsMap = useMemo(() => {
@@ -162,37 +340,65 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
         onDebouncedChange: resetPaginationPage,
     });
     const debouncedInlineSearch = inlineSearch.debouncedQuery;
+    // Clear selection whenever the VISIBLE result set is redefined by a filter,
+    // quick-filter, or inline-search change. Selection intentionally survives
+    // PAGINATION (you page through picking items), but a filter/search change can
+    // remove selected rows from view — leaving them selected would let a bulk op
+    // act on records the user can no longer see. Pagination is deliberately NOT a
+    // dependency here.
+    useEffect(() => {
+        selection.clearSelection();
+        // clearSelection is stable (useCallback []). Fires on filter/quick-filter/
+        // search identity change; harmless no-op on the initial mount.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterValues, debouncedInlineSearch]);
     // Ref for resourceContext (needed inside fetch effect for SEARCH call)
     const resourceContextRef = useRef(resourceContext);
     resourceContextRef.current = resourceContext;
-    // Track fetches to prevent duplicates (StrictMode protection)
-    // Use a Set to track which fetch keys have been initiated
-    const initiatedFetchesRef = useRef(new Set());
-    const sortKey = sortState ? `${sortState.field}:${sortState.direction}` : '';
+    const sortKey = sortStates.map(s => `${s.field}:${s.direction}`).join(',');
     const filterKey = useMemo(() => JSON.stringify(filterValues), [filterValues]);
-    // Whether the current fetch delegates to SEARCH (inline search active)
-    const isUsingInlineSearch = debouncedInlineSearch.length > 0 && !!searchOperationPathKey;
-    const fetchKey = `${resourceType}|${isUsingInlineSearch ? searchOperationPathKey : operationPathKey}|${contextualParametersKey}|${pagination.page}|${pagination.limit}|${sortKey}|${filterKey}|${debouncedInlineSearch}`;
-    // Fetch data - use refs to avoid dependency on unstable functions
+    // Announce this collection surface's ACTIVE FILTER SET. The surface states a
+    // fact about itself and owns no scope semantics — `AppScopeContext` decides
+    // whether a filter lands on a declared app-scope field (so the app-shell
+    // scope control mirrors a listing filtered to one record).
+    //
+    // Emitted from ONE effect keyed on the serialized filter set rather than from
+    // each setter: the panel, the quick-filter tabs and any future filter writer
+    // all flow through this single announcement by construction, so a new setter
+    // cannot silently stop announcing.
+    const { emit: emitFrontendEvent, resourceCollectionRefreshEvent } = useEventBus();
+    // Realtime/list invalidation — the CONSUMER half of the RESOURCE_REFRESH chain
+    // (WebSocketEventBridge on resource:deleted/updated/notification, plus the
+    // WS-down fallback emits). Subset-scoped: this listing refetches whenever an
+    // affected row's context COVERS this surface's scope — an org-wide listing
+    // refreshes on a nested delete too. Folding `lastRefreshAt` into `fetchKey`
+    // reuses the one fetch effect rather than adding a second fetch path. Until
+    // 2026-08-19 NOTHING consumed these events for collections, so a row deleted
+    // from its READ page stayed on the revealed listing until a hard reload
+    // (wildo-ai/wildo-ai#33).
+    const { lastRefreshAt: collectionRefreshAt } = resourceCollectionRefreshEvent({ ctx: resourceContext });
     useEffect(() => {
-        logDebug('useEffect triggered', {
-            fetchKey,
-            alreadyInitiated: initiatedFetchesRef.current.has(fetchKey),
-            initiatedFetchesSize: initiatedFetchesRef.current.size,
+        emitFrontendEvent(FrontendEvents.RESOURCE_COLLECTION_FILTERS_CHANGED, {
             resourceType,
+            filterValues: filterValuesRef.current,
         });
-        // Skip if we've already initiated a fetch for this exact key (React StrictMode protection)
-        // This prevents the double-mount in StrictMode from triggering duplicate fetches
-        if (initiatedFetchesRef.current.has(fetchKey)) {
-            logDebug('Skipping fetch - already initiated', { fetchKey });
-            return;
-        }
-        // Mark this fetch as initiated
-        initiatedFetchesRef.current.add(fetchKey);
-        logDebug('Marked fetch as initiated', {
-            fetchKey,
-            initiatedFetchesSize: initiatedFetchesRef.current.size
-        });
+        // `filterKey` is the serialized filter set — the value identity that must
+        // drive the announcement (the object identity changes on every render).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterKey, resourceType, emitFrontendEvent]);
+    // Whether the current fetch delegates to SEARCH (inline search active)
+    const isUsingInlineSearch = debouncedInlineSearch.length > 0 && !!searchOperationPathKey;
+    const fetchKey = `${resourceType}|${isUsingInlineSearch ? searchOperationPathKey : operationPathKey}|${contextualParametersKey}|${pagination.page}|${pagination.limit}|${sortKey}|${filterKey}|${debouncedInlineSearch}|${collectionRefreshAt ?? 0}`;
+    // Fetch data - use refs to avoid dependency on unstable functions.
+    // StrictMode double-mounts run this effect twice; the `cancelled` flag plus
+    // cleanup disposes of the first mount's in-flight fetch so the second
+    // mount's result is the one that lands in state. Do NOT add a per-fetchKey
+    // dedup Set here — entries that survive cleanup turn the second mount into
+    // a no-op while the first mount's result is silently dropped by the
+    // `if (cancelled) return` guard, leaving `hasLoadedOnce` false and the
+    // LoadingGate stuck in skeleton state forever.
+    useEffect(() => {
+        logDebug('useEffect triggered', { fetchKey, resourceType });
         let cancelled = false;
         const fetchData = async () => {
             logDebug('fetchData started', {
@@ -214,7 +420,7 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                         searchQuery: debouncedInlineSearch,
                         filters: activeFilters,
                         pagination: { page: pagination.page, limit: pagination.limit },
-                        sort: sortStateRef.current ? [sortStateRef.current] : undefined,
+                        sort: sortStatesRef.current.length ? [...sortStatesRef.current] : undefined,
                         parentResourcesRequirements: resourceContextRef.current.parentResourcesRequirements,
                         dataMode,
                     };
@@ -229,8 +435,10 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                         page: pagination.page,
                         limit: pagination.limit,
                     };
-                    if (sortStateRef.current) {
-                        queryParameters.sort = `${sortStateRef.current.field}:${sortStateRef.current.direction}`;
+                    if (sortStatesRef.current.length) {
+                        // Comma-joined `field:direction` list, priority-ordered. The backend
+                        // LIST controller parses this via `parseCollectionQuerySort`.
+                        queryParameters.sort = sortStatesRef.current.map(s => `${s.field}:${s.direction}`).join(',');
                     }
                     // Serialize active filters into query parameters
                     if (Object.keys(filterValuesRef.current).length > 0) {
@@ -257,12 +465,30 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                 if (result && typeof result === 'object' && 'data' in result && 'pagination' in result) {
                     const paginatedResult = result;
                     setItems(paginatedResult.data);
-                    setPagination(paginatedResult.pagination);
+                    // Guard the write-back (audit I1): the response's pagination feeds
+                    // back into `fetchKey` (page/limit), so unconditionally adopting a
+                    // fresh object every fetch creates a self-refetch feedback loop
+                    // whenever the server normalizes page/limit (clamped limit, page
+                    // beyond range) — and a redundant re-render even when it doesn't.
+                    // Only commit when a pagination value actually changed; returning
+                    // `prev` keeps the state identity, so the fetchKey stays stable.
+                    setPagination(prev => {
+                        const next = paginatedResult.pagination;
+                        return prev.page === next.page
+                            && prev.limit === next.limit
+                            && prev.total === next.total
+                            && prev.totalPages === next.totalPages
+                            ? prev
+                            : next;
+                    });
                 }
                 else if (Array.isArray(result)) {
                     // Legacy: raw array response (internal calls)
                     setItems(result);
-                    setPagination(prev => ({ ...prev, total: result.length, totalPages: 1 }));
+                    // Same shallow-compare guard as the paginated branch above.
+                    setPagination(prev => (prev.total === result.length && prev.totalPages === 1
+                        ? prev
+                        : { ...prev, total: result.length, totalPages: 1 }));
                 }
                 setHasLoadedOnce(true);
             }
@@ -286,9 +512,9 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps -- using refs for unstable functions + fetchKey handles all deps
     }, [fetchKey]);
-    // Handle sort change — stable callback for SortControl
-    const handleSortChange = useCallback((newSort) => {
-        setSortState(newSort);
+    // Handle sort change — stable callback for the sort control + table headers.
+    const handleSortChange = useCallback((newSorts) => {
+        setSortStates(newSorts);
         setPagination(prev => ({ ...prev, page: 1 }));
     }, []);
     // Handle filter change — stable callback for FiltersControl
@@ -296,6 +522,46 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
         setFilterValues(newFilters);
         setPagination(prev => ({ ...prev, page: 1 }));
     }, []);
+    // Quick-filter tab change — writes the promoted field into the SAME filter
+    // state the panel uses (server-side filtering), clearing it on the "All" tab.
+    const handleQuickFilterChange = useCallback((value) => {
+        if (!quickFilterFieldName)
+            return;
+        setFilterValues(prev => {
+            const next = { ...prev };
+            if (value === undefined)
+                delete next[quickFilterFieldName];
+            else
+                next[quickFilterFieldName] = value;
+            return next;
+        });
+        setPagination(prev => ({ ...prev, page: 1 }));
+    }, [quickFilterFieldName]);
+    // Temporal day-grouping of the fetched page (CARDS mode only). Buckets are
+    // keyed by the framework's regional `formatDate` output, so the heading and
+    // the bucket can never disagree. Adjacent-merge only: rows are bucketed in
+    // server order (pair the config with a default sort on the same field), and
+    // rows with a missing/unparsable date fall into label-less buckets instead
+    // of being dropped.
+    const groupedItems = useMemo(() => {
+        if (!temporalGroupField || viewMode !== CollectionDisplayMode.CARDS)
+            return null;
+        const groups = [];
+        for (const item of items) {
+            const raw = item[temporalGroupField];
+            const date = raw instanceof Date
+                ? raw
+                : (typeof raw === 'string' || typeof raw === 'number') ? new Date(raw) : null;
+            const label = date && !Number.isNaN(date.getTime()) ? formatDate(date) : null;
+            const key = label ?? '__wildo-ungrouped__';
+            const current = groups[groups.length - 1];
+            if (current && current.key === key)
+                current.items.push(item);
+            else
+                groups.push({ key, label, items: [item] });
+        }
+        return groups;
+    }, [items, temporalGroupField, viewMode, formatDate]);
     // Handle navigation to CREATE
     const handleCreate = useCallback(() => {
         if (!resourceConfig) {
@@ -315,60 +581,199 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     }, [resourceConfig, availableOperations.create, navigateToResourceOperation, resourceContext.contextResourceIdentifiers, resourceContext.parentResourcesRequirements, listNavigationInitiator]);
     // Handle navigation to READ (item click)
     const handleItemClick = useCallback((item) => {
-        if (!resourceConfig || !availableOperations.read)
+        if (!resourceConfig)
             return;
+        const itemId = FrontendResourceUtils.getResourceObjectId(item, resourceConfig.resourceFieldIdentifier);
+        // Fail closed: a row whose id cannot be resolved must NOT navigate to
+        // `/<resource>/undefined` — that detail surface is unrenderable and
+        // re-renders in a CPU-pegging loop. No-op the click instead of wedging.
+        if (!itemId) {
+            logger.error('[ResourceLayoutPreset_List] Item click ignored: could not resolve resource id from list item.', {
+                resourceType,
+                fieldIdentifier: resourceConfig.resourceFieldIdentifier,
+                itemKeys: Object.keys(item ?? {}),
+            });
+            return;
+        }
         const contextResourceIdentifiers = {
             ...resourceContext.contextResourceIdentifiers,
-            [resourceType]: String(item.id || item[resourceConfig.resourceFieldIdentifier]),
+            [resourceType]: itemId,
         };
+        const readOperation = resolveReadOperationForIdentifiers(contextResourceIdentifiers);
+        if (!readOperation)
+            return;
         navigateToResourceOperation({
-            operation: availableOperations.read,
+            operation: readOperation,
             contextResourceIdentifiers,
             parentResourcesRequirements: resourceContext.parentResourcesRequirements,
             initiatorOverride: listNavigationInitiator,
         });
-    }, [resourceConfig, availableOperations.read, navigateToResourceOperation, resourceConfig?.resourceFieldIdentifier, resourceContext.contextResourceIdentifiers, resourceContext.parentResourcesRequirements, resourceType, listNavigationInitiator]);
+    }, [resourceConfig, navigateToResourceOperation, resourceConfig?.resourceFieldIdentifier, resourceContext.contextResourceIdentifiers, resourceContext.parentResourcesRequirements, resourceType, listNavigationInitiator, resolveReadOperationForIdentifiers]);
     // Inline search handlers come from the shared hook (inlineSearch.handleChange / handleClear)
+    // Per-item operations bar (edit / delete / custom ops) for ONE row. Shared by
+    // the CARDS `operationsSlot` and the TABLE trailing actions column so both
+    // surfaces expose identical per-item actions. `orientation` lets a card stack
+    // them per `cardActionPlacement`; the table passes none (default row).
+    // useCallback-stable so the table `columns` memo (which depends on
+    // `renderRowActions`) doesn't rebuild every render.
+    const renderItemOperations = useCallback((item, orientation) => {
+        const fieldIdentifier = resourceConfig?.resourceFieldIdentifier;
+        if (!fieldIdentifier)
+            return null;
+        const itemId = FrontendResourceUtils.getResourceObjectId(item, fieldIdentifier);
+        // Build item-level resource context for operations. When the id cannot be
+        // resolved, omit the per-item scope rather than injecting the literal
+        // "undefined" — a `/<resource>/undefined` route is unrenderable and loops.
+        const itemContextIdentifiers = itemId
+            ? { ...resourceContext.contextResourceIdentifiers, [resourceType]: itemId }
+            : resourceContext.contextResourceIdentifiers;
+        const itemReadOperation = resolveReadOperationForIdentifiers(itemContextIdentifiers);
+        const itemResourceContext = frontendResourceUtils.createFrontendResourceOperationContextFromOperation({
+            resourceType,
+            operation: itemReadOperation ?? resourceContext.operation,
+            contextResourceIdentifiers: itemContextIdentifiers,
+        });
+        return (_jsx(ResourceLayout_OperationsItems, { resourceContext: itemResourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator, currentObject: item, displayMode: ResourceOperationDisplayMode.SUMMARY, size: ButtonSize.ICON_SM, orientation: orientation, 
+            // The row itself navigates to READ on click, so suppress the redundant
+            // "View Details" eye. The SUMMARY overflow cap (default 3) comes from the
+            // resource disclosure policy, not a hardcoded prop.
+            hostRowOpensRead: true }));
+    }, [resourceConfig, resourceType, resourceContext.contextResourceIdentifiers, resourceContext.operation, resolveReadOperationForIdentifiers, navigationZone, listNavigationInitiator]);
+    // One cards-mode row. Shared by the flat list and the temporal day-grouped
+    // rendering so the two paths can never drift.
+    const renderCardsItem = (item, index) => {
+        const fieldIdentifier = resourceConfig?.resourceFieldIdentifier;
+        if (!fieldIdentifier) {
+            throw FrontendResourceUtils.buildConfigurationError(ErrorCustomMessageReference.FRONTEND_RESOURCE_FIELD_IDENTIFIER_NOT_FOUND, { resourceType, component: 'ResourceLayoutPreset_List' });
+        }
+        const itemId = FrontendResourceUtils.getResourceObjectId(item, fieldIdentifier);
+        // A row being TRANSFORMED renders the operation body in its place — neighbours stay exactly where
+        // they are, which is the entire contract of an in-place presentation. The `<li>` and its key are
+        // unchanged so React keeps the element rather than remounting the list around it.
+        if (inPlaceHost.isElementActive(itemId)) {
+            return (_jsx("li", { className: cn('list-none', isCardGrid && CARDS_GRID_CELL_CLASS), children: _jsx(ResourceInPlaceOperationRow, { navigationZone: navigationZone }) }, itemId || index));
+        }
+        return (
+        // In GRID mode `divide-y` is gone, so each cell carries its own border to
+        // read as a separated card; in LIST mode the shared `<ul>` owns the border.
+        _jsx("li", { className: cn('list-none', isCardGrid && CARDS_GRID_CELL_CLASS), children: _jsx(ResourceListItemRenderer, { item: item, resourceType: resourceType, resourceConfig: resourceConfig, registry: registry, summaryFields: summaryFields, fieldLabelsMap: fieldLabelsMap, tResourceFieldEnumValue: tResourceFieldEnumValue, onItemClick: handleItemClick, cardActionPlacement: cardActionPlacement, selectable: selectionEnabled, isSelected: selection.isSelected(item), selectionActive: selection.selectionCount > 0, onToggleSelect: selection.toggleSelection, selectAriaLabel: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'selectRow', { row: index + 1 }), operationsSlot: renderItemOperations(item, cardActionPlacement?.orientation), interactiveClasses: {
+                    hover: ghostRecipe.states.hover,
+                    transition: ghostRecipe.motion.transition,
+                } }) }, itemId || index));
+    };
     // Render icons
     const addIcon = renderIcon(StandardIconReference.PLUS, { size: IconSize.SM });
+    // The Create action: the toolbar's default trailing action AND the bulk bar's
+    // `fallback` (so a selectable view with no available bulk ops keeps Create
+    // instead of an empty trailing zone when the contextual swap kicks in).
+    const createButton = availableOperations.create ? (
+    // `data-slot="collection-create"` is the i18n-independent automation hook
+    // (the label is the runtime-translated per-resource CREATE title) — attribute only.
+    _jsxs(Button, { onClick: handleCreate, size: ButtonSize.SM, "data-slot": "collection-create", className: "inline-flex items-center gap-element", children: [addIcon, _jsx("span", { children: createLabel })] })) : undefined;
+    // Whole-scope maintenance actions (collection-scoped operations, e.g. "retry
+    // all" / "purge all"). Built ONLY when the resource declares at least one, so
+    // the toolbar's trailing cluster stays absent for the many read-only
+    // collections that have none; the component itself also renders null when the
+    // role-gated collection-op set is empty.
+    //
+    // ⚠️ SECOND SITE of the collection-scope question. `useResourceOperationActions` answers it too,
+    // and its comment there says the split "holds at a single site rather than N call sites" — which
+    // is true of the ACTION FILTER and not of the decision to MOUNT the surface at all. Both must
+    // agree, or the actions are computed and rendered into a container that was never created: that is
+    // exactly what happened to the collection-export action on 2026-08-25, where fixing three gates in
+    // the hook changed nothing visible because this one still said "no collection-scoped operations
+    // here". Any future exemption has to be applied in both places.
+    const hasCollectionScopedOps = useMemo(() => (resourceConfig?.operations ?? [])
+        .some((op) => isCollectionScopedOperation(op.operationFrontendConfig)
+        || isGeneratedCollectionExportOperation(op)), [resourceConfig]);
+    /**
+     * The query THIS listing is currently showing, in the exact shape its own LIST call builds — so a
+     * collection export carries the same narrowing as the screen it was clicked on.
+     *
+     * Composed here rather than in the action hook because this component owns the state: the filter
+     * values, the sort states and the page. An export built without it answers a different question
+     * from the one on screen, and a `VISIBLE_PAGE` export in particular becomes meaningless — page 1
+     * of an unfiltered set.
+     *
+     * `isSearchActive` rides along as a REFUSAL flag rather than a parameter. Inline search routes the
+     * listing through the SEARCH operation, and a LIST export cannot represent those results; the
+     * action refuses instead of returning the unsearched set as a successful download.
+     */
+    const collectionExportQuery = useMemo(() => {
+        const params = {
+            page: pagination.page,
+            limit: pagination.limit,
+        };
+        if (sortStates.length) {
+            // Same `field:direction` comma-joined encoding the LIST call uses, so the backend's
+            // `parseCollectionQuerySort` reads it identically. Two encodings would drift.
+            params.sort = sortStates.map((state) => `${state.field}:${state.direction}`).join(',');
+        }
+        for (const [key, value] of Object.entries(filterValues)) {
+            if (value === undefined || value === null || value === '')
+                continue;
+            params[key] = value;
+        }
+        return { params, isSearchActive: Boolean(debouncedInlineSearch) };
+    }, [pagination.page, pagination.limit, sortStates, filterValues, debouncedInlineSearch]);
+    const collectionActionsNode = hasCollectionScopedOps ? (_jsx(ResourceLayout_CollectionActions, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator, collectionExportQuery: collectionExportQuery })) : undefined;
     // searchIcon and clearIcon are now rendered inside InlineSearchInput
+    if (!isReady)
+        return null;
     // Error state (early return before gate — includes header for navigation context)
     if (error) {
-        return (_jsxs("div", { className: "space-y-section", children: [_jsx(ResourceLayout_Header, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator }), _jsxs("div", { className: "p-card bg-destructive/10 border border-destructive rounded-lg", role: "alert", children: [_jsx("p", { className: "text-destructive font-medium", children: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'errorLoading') }), _jsx("p", { className: "text-sm text-destructive/80 mt-item-xs", children: error.message }), error.code && (_jsx("p", { className: "text-xs text-destructive/60 mt-item-xs", children: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'errorCode', { code: error.code }) }))] })] }));
+        return (_jsxs("div", { className: "space-y-section", children: [_jsx(ResourceLayout_Header, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator }), _jsxs("div", { className: "p-card bg-destructive/10 border border-destructive rounded-lg", role: "alert", children: [_jsx("p", { className: "text-destructive font-medium", children: errorLoadingLabel }), _jsx("p", { className: "text-sm text-destructive/80 mt-item-xs", children: error.message }), error.code && (_jsx("p", { className: "text-xs text-destructive/60 mt-item-xs", children: resolveComponentLabel({
+                                tComponent,
+                                componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+                                key: 'errorCode',
+                                params: { code: error.code },
+                            }) }))] })] }));
     }
-    return (_jsx(LoadingGate, { i18nKeys: i18nKeys, loadingScopes: loadingScopes, readiness: readiness, children: _jsxs("div", { className: "space-y-section", children: [_jsxs("div", { className: "flex items-start justify-between gap-field", children: [_jsx(ResourceLayout_Header, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator }), availableOperations.create && (_jsxs(Button, { onClick: handleCreate, size: ButtonSize.SM, className: "inline-flex items-center gap-element", children: [addIcon, _jsx("span", { children: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'create') })] }))] }), inlineSearch.isVisible && (_jsx(InlineSearchInput, { query: inlineSearch.query, onChange: inlineSearch.handleChange, onClear: inlineSearch.handleClear, resourceType: resourceType })), ((filtersEnabled && filterFields.length > 0) || (sortFields.length > 0 && items.length > 0)) && (_jsxs("div", { className: "flex flex-col gap-element-sm", children: [filtersEnabled && filterFields.length > 0 && (_jsx(ResourceLayout_FiltersControl, { resourceType: resourceType, filterFields: filterFields, currentFilters: filterValues, onFiltersChange: handleFiltersChange })), sortFields.length > 0 && items.length > 0 && (_jsx(ResourceLayout_SortControl, { resourceType: resourceType, sortFields: sortFields, currentSort: sortState, onSortChange: handleSortChange }))] })), _jsx(ResourceLayout_InsertedViews, { resourceContext: resourceContext, navigationZone: navigationZone, showCharts: showCharts }), items.length === 0 ? (isUsingInlineSearch ? (_jsx("div", { className: "text-center py-section text-muted-foreground text-sm", role: "status", children: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'noSearchResults') })) : (_jsx(ResourceEmptyState, { resourceType: resourceType, config: emptyStateConfig, hasCreateOperation: !!availableOperations.create, onCreateAction: handleCreate }))) : (_jsx("ul", { role: "list", "aria-label": tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'listLabel'), className: "border border-border rounded-lg divide-y divide-border list-none m-0 p-0", children: items.map((item, index) => {
-                        const fieldIdentifier = resourceConfig?.resourceFieldIdentifier;
-                        if (!fieldIdentifier) {
-                            throw FrontendResourceUtils.buildConfigurationError(ErrorCustomMessageReference.FRONTEND_RESOURCE_FIELD_IDENTIFIER_NOT_FOUND, { resourceType, component: 'ResourceLayoutPreset_List' });
-                        }
-                        const itemId = item[fieldIdentifier];
-                        // Build item-level resource context for operations
-                        const itemContextIdentifiers = {
-                            ...resourceContext.contextResourceIdentifiers,
-                            [resourceType]: String(itemId),
-                        };
-                        const itemResourceContext = frontendResourceUtils.createFrontendResourceOperationContextFromOperation({
-                            resourceType,
-                            operation: availableOperations.read ?? resourceContext.operation,
-                            contextResourceIdentifiers: itemContextIdentifiers,
-                        });
-                        return (_jsx("li", { className: "list-none", children: _jsx(ResourceListItemRenderer, { item: item, resourceType: resourceType, resourceConfig: resourceConfig, registry: registry, summaryFields: summaryFields, fieldLabelsMap: fieldLabelsMap, tResourceFieldEnumValue: tResourceFieldEnumValue, onItemClick: handleItemClick, operationsSlot: _jsx(ResourceLayout_OperationsItems, { resourceContext: itemResourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator, currentObject: item, displayMode: ResourceOperationDisplayMode.SUMMARY, size: ButtonSize.ICON_SM, maxDisplayed: 3 }), trailingIcon: _jsx("div", { className: "text-muted-foreground", "aria-hidden": "true", children: renderIcon(StandardIconReference.CHEVRON_RIGHT, { size: IconSize.SM }) }), interactiveClasses: {
-                                    hover: ghostRecipe.states.hover,
-                                    transition: ghostRecipe.motion.transition,
-                                } }) }, itemId || index));
-                    }) })), _jsx(ResourceLayout_Pagination, { pagination: pagination, onPaginationChange: setPagination })] }) }));
+    return (_jsxs("div", { className: "space-y-section", children: [_jsx(ResourceLayout_Header, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator }), _jsx(ResourceCollectionToolbar, { resourceType: resourceType, quickFilter: quickFilterDef ? {
+                    field: quickFilterDef,
+                    value: filterValues[quickFilterDef.fieldName],
+                    onChange: handleQuickFilterChange,
+                } : undefined, search: inlineSearch.isVisible ? {
+                    query: inlineSearch.query,
+                    onChange: inlineSearch.handleChange,
+                    onClear: inlineSearch.handleClear,
+                } : undefined, filterFields: filtersEnabled ? panelFilterFields : [], filterValues: filterValues, onFiltersChange: handleFiltersChange, sort: viewMode === CollectionDisplayMode.CARDS && sortFields.length > 0 ? {
+                    sortFields,
+                    sortStates,
+                    onSortChange: handleSortChange,
+                } : undefined, viewMode: userSwitchableViewMode ? { viewMode, onViewModeChange: setViewMode } : undefined, primaryAction: createButton, collectionActions: collectionActionsNode, selection: selectionEnabled ? {
+                    count: selection.selectionCount,
+                    allSelected: currentPageAllSelected,
+                    onToggleAll: handleToggleAllCurrentPage,
+                    onClear: selection.clearSelection,
+                } : undefined, bulkActions: selectionEnabled ? (_jsx(ResourceLayout_OperationBulk, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator, selectedItems: selection.selectedItems, idField: selectionIdField, onSelectionClear: selection.clearSelection, fallback: createButton })) : undefined }), _jsx(LoadingGate, { i18nKeys: i18nKeys, loadingScopes: loadingScopes, readiness: readiness, children: _jsxs("div", { className: "space-y-section", children: [_jsx(ResourceLayout_InsertedViews, { resourceContext: resourceContext, navigationZone: navigationZone, showCharts: showCharts }), inPlaceHost.isCreateActive && (_jsx(ResourceInPlaceOperationRow, { navigationZone: navigationZone, className: "border border-border rounded-lg" })), items.length === 0 ? (isUsingInlineSearch ? (_jsx("div", { className: "text-center py-section text-muted-foreground text-sm", role: "status", children: noSearchResultsLabel })) : (_jsx(ResourceEmptyState, { resourceType: resourceType, config: emptyStateConfig, hasCreateOperation: !!availableOperations.create, onCreateAction: handleCreate }))) : viewMode === CollectionDisplayMode.TABLE ? (_jsx(ResourceCollectionBody_Table, { items: items, resourceType: resourceType, resourceConfig: resourceConfig, navigationZone: navigationZone, summaryFields: summaryFields, fieldLabelsMap: fieldLabelsMap, sortFields: sortFields, sortStates: sortStates, onSortChange: handleSortChange, selectable: selectionEnabled, isRowSelected: selectionIsSelected, onToggleRow: selectionToggle, allSelected: currentPageAllSelected, onToggleAll: handleToggleAllCurrentPage, renderRowActions: renderItemOperations, onRowClick: handleItemClick })) : groupedItems ? (
+                        /* Temporal day-grouped cards — a date heading per bucket (activity-feed
+                           idiom for log-like collections). Group keys are suffixed with the
+                           bucket index: non-adjacent buckets can legitimately share a formatted
+                           date when the page isn't sorted by the grouping field. Grid layout
+                           applies within each day bucket. */
+                        _jsx("div", { className: "space-y-element", "data-slot": "collection-day-groups", children: groupedItems.map((group, groupIndex) => {
+                                // Page-GLOBAL row index (offset by all prior buckets' item counts) so
+                                // "Select row N" aria labels don't restart at 1 in every day group.
+                                const rowOffset = groupedItems.slice(0, groupIndex).reduce((n, g) => n + g.items.length, 0);
+                                return (_jsxs("section", { className: "space-y-item-xs", children: [group.label && (_jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: group.label })), _jsx("ul", { role: "list", "aria-label": group.label ?? listLabel, className: resolveCardsContainerClass(cardGridColumns), style: resolveCardsGridStyle(cardGridColumns), children: group.items.map((item, i) => renderCardsItem(item, rowOffset + i)) })] }, `${group.key}:${groupIndex}`));
+                            }) })) : (_jsx("ul", { role: "list", "aria-label": listLabel, className: resolveCardsContainerClass(cardGridColumns), style: resolveCardsGridStyle(cardGridColumns), children: items.map(renderCardsItem) })), _jsx(ResourceLayout_Pagination, { pagination: pagination, onPaginationChange: setPagination })] }) })] }));
 };
 export function ResourceLayout_List({ preset, ...props }) {
     const ComponentOverride = resolveResourceOperationCustomView(props.resourceContext.operation);
-    if (ComponentOverride) {
-        return _jsx(ComponentOverride, { ...props });
-    }
-    const resolvedPreset = useMemo(() => {
-        if (preset)
-            return preset;
-        return resolveResourceOperationPresetKey(props.resourceContext.operation) ?? CorePreset_ResourceLayout_List.DEFAULT;
-    }, [preset, props.resourceContext.operation]);
-    const Component = createComponentResolver(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'ResourceLayout_List')(resolvedPreset);
-    return _jsx(Component, { ...props });
+    const resolvedPreset = preset
+        ?? resolveResourceOperationPresetKey(props.resourceContext.operation)
+        ?? CorePreset_ResourceLayout_List.DEFAULT;
+    const body = ComponentOverride
+        ? _jsx(ComponentOverride, { ...props })
+        : React.createElement(createComponentResolver(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'ResourceLayout_List')(resolvedPreset), props);
+    // The element-level host is provided HERE, at the wrapper, rather than inside the preset body.
+    //
+    // Two reasons, and the first is mechanical: a component cannot consume a context it provides in
+    // the same render, and the body needs to READ which row is transformed in order to draw it. The
+    // second is that a CUSTOM VIEW override gets the host too — an app that replaces the list body
+    // still renders action bars, and an INLINE action inside one should transform its row rather than
+    // silently degrade to an overlay because the app supplied its own body.
+    return (_jsx(InPlaceOperationProvider, { resourceType: props.resourceContext.resourceType, children: body }));
 }
-//# sourceMappingURL=ResourceLayout_List.js.map
+//# sourceMappingURL=ResourceLayout_List.js.map