@cratis/components 4.26.4 → 4.27.0

package/dist/esm/PivotViewer/hooks/useRawGrouping.js

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+
+function singleGroup(ids) {
+    return {
+        groups: [
+            {
+                key: 'all',
+                label: 'All Items',
+                value: 'all',
+                ids,
+                count: ids.length,
+            },
+        ],
+    };
+}
+function useRawGrouping({ ready, visibleIds, currentGroupBy, viewMode, activeDimensionKey, computeGrouping, sortIds, }) {
+    const [rawGrouping, setRawGrouping] = useState({ groups: [] });
+    useEffect(() => {
+        if (!ready || visibleIds.length === 0) {
+            setRawGrouping({ groups: [] });
+            return;
+        }
+        let cancelled = false;
+        if (viewMode !== 'collection') {
+            void computeGrouping(visibleIds, currentGroupBy).then((result) => {
+                if (!cancelled)
+                    setRawGrouping(result);
+            });
+        }
+        else if (activeDimensionKey) {
+            void sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {
+                if (cancelled)
+                    return;
+                setRawGrouping(singleGroup(sortedIds));
+            });
+        }
+        else {
+            setRawGrouping(singleGroup(visibleIds));
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        ready,
+        visibleIds,
+        currentGroupBy,
+        viewMode,
+        computeGrouping,
+        sortIds,
+        activeDimensionKey,
+    ]);
+    return rawGrouping;
+}
+
+export { useRawGrouping };
+//# sourceMappingURL=useRawGrouping.js.map

package/dist/esm/PivotViewer/hooks/useRawGrouping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRawGrouping.js","sources":["../../../../PivotViewer/hooks/useRawGrouping.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useState } from 'react';\nimport type { GroupSpec, GroupingResult } from '../engine/types';\nimport type { ViewMode } from '../components/Toolbar';\n\n/** Inputs for {@link useRawGrouping}. */\nexport interface UseRawGroupingOptions {\n    ready: boolean;\n    visibleIds: Uint32Array;\n    currentGroupBy: GroupSpec;\n    viewMode: ViewMode;\n    activeDimensionKey: string | null;\n    computeGrouping: (visibleIds: Uint32Array, groupBy: GroupSpec) => Promise<GroupingResult>;\n    sortIds: (visibleIds: Uint32Array, sortBy: string) => Promise<Uint32Array>;\n}\n\n/** The single \"all items\" group shown in collection mode. */\nfunction singleGroup(ids: Uint32Array): GroupingResult {\n    return {\n        groups: [\n            {\n                key: 'all',\n                label: 'All Items',\n                value: 'all',\n                ids,\n                count: ids.length,\n            },\n        ],\n    };\n}\n\n/**\n * Computes the (unpresented) grouping of the visible ids. Every async branch ignores a result\n * after its dependencies change, so an older worker response can never overwrite a newer\n * filter/search/view selection.\n *\n * @param options - Engine, view mode and visible ids.\n * @returns The raw grouping result.\n */\nexport function useRawGrouping({\n    ready,\n    visibleIds,\n    currentGroupBy,\n    viewMode,\n    activeDimensionKey,\n    computeGrouping,\n    sortIds,\n}: UseRawGroupingOptions): GroupingResult {\n    const [rawGrouping, setRawGrouping] = useState<GroupingResult>({ groups: [] });\n\n    useEffect(() => {\n        if (!ready || visibleIds.length === 0) {\n            setRawGrouping({ groups: [] });\n            return;\n        }\n\n        let cancelled = false;\n        if (viewMode !== 'collection') {\n            void computeGrouping(visibleIds, currentGroupBy).then((result) => {\n                if (!cancelled) setRawGrouping(result);\n            });\n        } else if (activeDimensionKey) {\n            // In collection mode, create a single group with all items.\n            void sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {\n                if (cancelled) return;\n                setRawGrouping(singleGroup(sortedIds));\n            });\n        } else {\n            setRawGrouping(singleGroup(visibleIds));\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, [\n        ready,\n        visibleIds,\n        currentGroupBy,\n        viewMode,\n        computeGrouping,\n        sortIds,\n        activeDimensionKey,\n    ]);\n\n    return rawGrouping;\n}\n"],"names":[],"mappings":";;AAmBA,SAAS,WAAW,CAAC,GAAgB,EAAA;IACjC,OAAO;AACH,QAAA,MAAM,EAAE;AACJ,YAAA;AACI,gBAAA,GAAG,EAAE,KAAK;AACV,gBAAA,KAAK,EAAE,WAAW;AAClB,gBAAA,KAAK,EAAE,KAAK;gBACZ,GAAG;gBACH,KAAK,EAAE,GAAG,CAAC,MAAM;AACpB,aAAA;AACJ,SAAA;KACJ;AACL;SAUgB,cAAc,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,cAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,OAAO,GACa,EAAA;AACpB,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAiB,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;IAE9E,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;AACnC,YAAA,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;YAC9B;QACJ;QAEA,IAAI,SAAS,GAAG,KAAK;AACrB,QAAA,IAAI,QAAQ,KAAK,YAAY,EAAE;AAC3B,YAAA,KAAK,eAAe,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;AAC7D,gBAAA,IAAI,CAAC,SAAS;oBAAE,cAAc,CAAC,MAAM,CAAC;AAC1C,YAAA,CAAC,CAAC;QACN;aAAO,IAAI,kBAAkB,EAAE;AAE3B,YAAA,KAAK,OAAO,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,KAAI;AAC5D,gBAAA,IAAI,SAAS;oBAAE;AACf,gBAAA,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AAC1C,YAAA,CAAC,CAAC;QACN;aAAO;AACH,YAAA,cAAc,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC3C;AAEA,QAAA,OAAO,MAAK;YACR,SAAS,GAAG,IAAI;AACpB,QAAA,CAAC;AACL,IAAA,CAAC,EAAE;QACC,KAAK;QACL,UAAU;QACV,cAAc;QACd,QAAQ;QACR,eAAe;QACf,OAAO;QACP,kBAAkB;AACrB,KAAA,CAAC;AAEF,IAAA,OAAO,WAAW;AACtB;;"}

package/dist/esm/PivotViewer/hooks/useScrollPositionTracking.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+/**
+ * Reports the container's scroll offset whenever it scrolls.
+ *
+ * @param containerRef - The scrollable container.
+ * @param setScrollPosition - Receives the new scroll offset.
+ */
+export declare function useScrollPositionTracking(containerRef: RefObject<HTMLDivElement>, setScrollPosition: (position: {
+    x: number;
+    y: number;
+}) => void): void;
+//# sourceMappingURL=useScrollPositionTracking.d.ts.map

package/dist/esm/PivotViewer/hooks/useScrollPositionTracking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollPositionTracking.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/hooks/useScrollPositionTracking.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACrC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,EACvC,iBAAiB,EAAE,CAAC,QAAQ,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,QAgBlE"}

package/dist/esm/PivotViewer/hooks/useScrollPositionTracking.js

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+function useScrollPositionTracking(containerRef, setScrollPosition) {
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => {
+            setScrollPosition({
+                x: container.scrollLeft,
+                y: container.scrollTop,
+            });
+        };
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [containerRef, setScrollPosition]);
+}
+
+export { useScrollPositionTracking };
+//# sourceMappingURL=useScrollPositionTracking.js.map

package/dist/esm/PivotViewer/hooks/useScrollPositionTracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollPositionTracking.js","sources":["../../../../PivotViewer/hooks/useScrollPositionTracking.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * Reports the container's scroll offset whenever it scrolls.\n *\n * @param containerRef - The scrollable container.\n * @param setScrollPosition - Receives the new scroll offset.\n */\nexport function useScrollPositionTracking(\n    containerRef: RefObject<HTMLDivElement>,\n    setScrollPosition: (position: { x: number; y: number }) => void,\n) {\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!container) return;\n\n        const handleScroll = () => {\n            setScrollPosition({\n                x: container.scrollLeft,\n                y: container.scrollTop,\n            });\n        };\n\n        container.addEventListener('scroll', handleScroll);\n        return () => container.removeEventListener('scroll', handleScroll);\n    }, [containerRef, setScrollPosition]);\n}\n"],"names":[],"mappings":";;AAYM,SAAU,yBAAyB,CACrC,YAAuC,EACvC,iBAA+D,EAAA;IAE/D,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,MAAM,YAAY,GAAG,MAAK;AACtB,YAAA,iBAAiB,CAAC;gBACd,CAAC,EAAE,SAAS,CAAC,UAAU;gBACvB,CAAC,EAAE,SAAS,CAAC,SAAS;AACzB,aAAA,CAAC;AACN,QAAA,CAAC;AAED,QAAA,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAClD,OAAO,MAAM,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACtE,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;AACzC;;"}

package/dist/esm/PivotViewer/hooks/useViewerLayout.d.ts

@@ -0,0 +1,16 @@
+import type { GroupingResult } from '../engine/types.js';
+import type { ViewMode } from '../components/Toolbar.js';
+/**
+ * Computes the card layout at base dimensions (zoom is applied as a transform).
+ *
+ * @param grouping - The presented grouping to lay out.
+ * @param viewMode - The current view mode.
+ * @param zoomLevel - The current zoom level.
+ * @param containerDimensions - The measured container size.
+ * @returns The computed layout.
+ */
+export declare function useViewerLayout(grouping: GroupingResult, viewMode: ViewMode, zoomLevel: number, containerDimensions: {
+    width: number;
+    height: number;
+}): import("../engine/types.js").LayoutResult;
+//# sourceMappingURL=useViewerLayout.d.ts.map

package/dist/esm/PivotViewer/hooks/useViewerLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewerLayout.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/hooks/useViewerLayout.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAiB,CAAC;AAGtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAAuB,CAAC;AAEtD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC3B,QAAQ,EAAE,cAAc,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,EACjB,mBAAmB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,6CA0BzD"}

package/dist/esm/PivotViewer/hooks/useViewerLayout.js

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { computeLayout } from '../engine/layout.js';
+import { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, CARDS_PER_COLUMN } from '../constants.js';
+
+function useViewerLayout(grouping, viewMode, zoomLevel, containerDimensions) {
+    return useMemo(() => {
+        const containerWidth = containerDimensions.width / zoomLevel;
+        const containerHeight = viewMode === 'collection'
+            ? containerDimensions.height / zoomLevel
+            : containerDimensions.height;
+        return computeLayout(grouping, {
+            viewMode,
+            cardWidth: BASE_CARD_WIDTH,
+            cardHeight: BASE_CARD_HEIGHT,
+            cardsPerColumn: CARDS_PER_COLUMN,
+            containerWidth,
+            containerHeight,
+        });
+    }, [
+        grouping,
+        viewMode,
+        zoomLevel,
+        containerDimensions.width,
+        containerDimensions.height,
+    ]);
+}
+
+export { useViewerLayout };
+//# sourceMappingURL=useViewerLayout.js.map

package/dist/esm/PivotViewer/hooks/useViewerLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewerLayout.js","sources":["../../../../PivotViewer/hooks/useViewerLayout.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport type { GroupingResult } from '../engine/types';\nimport { computeLayout } from '../engine/layout';\nimport { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, CARDS_PER_COLUMN, GROUP_SPACING } from '../constants';\nimport type { ViewMode } from '../components/Toolbar';\n\n/**\n * Computes the card layout at base dimensions (zoom is applied as a transform).\n *\n * @param grouping - The presented grouping to lay out.\n * @param viewMode - The current view mode.\n * @param zoomLevel - The current zoom level.\n * @param containerDimensions - The measured container size.\n * @returns The computed layout.\n */\nexport function useViewerLayout(\n    grouping: GroupingResult,\n    viewMode: ViewMode,\n    zoomLevel: number,\n    containerDimensions: { width: number; height: number },\n) {\n    return useMemo(() => {\n        const containerWidth = containerDimensions.width / zoomLevel;\n        // For grouped mode, use fixed container height to ensure stable layout during zoom\n        const containerHeight =\n            viewMode === 'collection'\n                ? containerDimensions.height / zoomLevel\n                : containerDimensions.height;\n\n        return computeLayout(grouping, {\n            viewMode,\n            cardWidth: BASE_CARD_WIDTH,\n            cardHeight: BASE_CARD_HEIGHT,\n            cardsPerColumn: CARDS_PER_COLUMN,\n            groupSpacing: GROUP_SPACING,\n            containerWidth,\n            containerHeight,\n        });\n    }, [\n        grouping,\n        viewMode,\n        zoomLevel,\n        containerDimensions.width,\n        containerDimensions.height,\n    ]);\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,eAAe,CAC3B,QAAwB,EACxB,QAAkB,EAClB,SAAiB,EACjB,mBAAsD,EAAA;IAEtD,OAAO,OAAO,CAAC,MAAK;AAChB,QAAA,MAAM,cAAc,GAAG,mBAAmB,CAAC,KAAK,GAAG,SAAS;AAE5D,QAAA,MAAM,eAAe,GACjB,QAAQ,KAAK;AACT,cAAE,mBAAmB,CAAC,MAAM,GAAG;AAC/B,cAAE,mBAAmB,CAAC,MAAM;QAEpC,OAAO,aAAa,CAAC,QAAQ,EAAE;YAC3B,QAAQ;AACR,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,cAAc,EAAE,gBAAgB;AAChC,YACA,cAAc;YACd,eAAe;AAClB,SAAA,CAAC;AACN,IAAA,CAAC,EAAE;QACC,QAAQ;QACR,QAAQ;QACR,SAAS;AACT,QAAA,mBAAmB,CAAC,KAAK;AACzB,QAAA,mBAAmB,CAAC,MAAM;AAC7B,KAAA,CAAC;AACN;;"}

package/dist/esm/PivotViewer/hooks/useVisibleIds.d.ts

@@ -0,0 +1,21 @@
+import type { FilterSpec, FilterResult } from '../engine/types.js';
+import type { PivotViewerProps } from '../types.js';
+/** Inputs for {@link useVisibleIds}. */
+export interface UseVisibleIdsOptions<TItem extends object> {
+    ready: boolean;
+    data: TItem[];
+    currentFilters: FilterSpec[];
+    search: string;
+    searchFields: PivotViewerProps<TItem>['searchFields'];
+    engineApplyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;
+}
+/**
+ * Applies filters, then narrows the result by search - a post-filter step over the visible
+ * Uint32 ids so it applies identically whether the engine result came from the worker or
+ * its synchronous fallback.
+ *
+ * @param options - Engine, data, filters and search inputs.
+ * @returns The ids currently visible.
+ */
+export declare function useVisibleIds<TItem extends object>({ ready, data, currentFilters, search, searchFields, engineApplyFilters, }: UseVisibleIdsOptions<TItem>): Uint32Array;
+//# sourceMappingURL=useVisibleIds.d.ts.map

package/dist/esm/PivotViewer/hooks/useVisibleIds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleIds.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/hooks/useVisibleIds.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAiB,CAAC;AAEhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAU,CAAC;AAEjD,wCAAwC;AACxC,MAAM,WAAW,oBAAoB,CAAC,KAAK,SAAS,MAAM;IACtD,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,cAAc,EAAE,UAAU,EAAE,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC;IACtD,kBAAkB,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;CACxE;AAWD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,IAAI,EACJ,cAAc,EACd,MAAM,EACN,YAAY,EACZ,kBAAkB,GACrB,EAAE,oBAAoB,CAAC,KAAK,CAAC,GAAG,WAAW,CAyB3C"}

package/dist/esm/PivotViewer/hooks/useVisibleIds.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import { filterVisibleIdsBySearch } from '../utils/search.js';
+
+function allIds(count) {
+    const ids = new Uint32Array(count);
+    for (let i = 0; i < count; i++) {
+        ids[i] = i;
+    }
+    return ids;
+}
+function useVisibleIds({ ready, data, currentFilters, search, searchFields, engineApplyFilters, }) {
+    const [visibleIds, setVisibleIds] = useState(new Uint32Array(0));
+    useEffect(() => {
+        if (!ready)
+            return;
+        let cancelled = false;
+        void engineApplyFilters(currentFilters).then((result) => {
+            if (cancelled)
+                return;
+            let ids = result.visibleIds;
+            if (ids.length === 0 && currentFilters.length === 0 && data.length > 0) {
+                ids = allIds(data.length);
+            }
+            setVisibleIds(filterVisibleIdsBySearch(data, ids, search, searchFields));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [ready, currentFilters, engineApplyFilters, data, search, searchFields]);
+    return visibleIds;
+}
+
+export { useVisibleIds };
+//# sourceMappingURL=useVisibleIds.js.map

package/dist/esm/PivotViewer/hooks/useVisibleIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleIds.js","sources":["../../../../PivotViewer/hooks/useVisibleIds.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useState } from 'react';\nimport type { FilterSpec, FilterResult } from '../engine/types';\nimport { filterVisibleIdsBySearch } from '../utils/search';\nimport type { PivotViewerProps } from '../types';\n\n/** Inputs for {@link useVisibleIds}. */\nexport interface UseVisibleIdsOptions<TItem extends object> {\n    ready: boolean;\n    data: TItem[];\n    currentFilters: FilterSpec[];\n    search: string;\n    searchFields: PivotViewerProps<TItem>['searchFields'];\n    engineApplyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;\n}\n\n/** The full dataset's ids, used when the engine returns nothing while no filters are active. */\nfunction allIds(count: number): Uint32Array {\n    const ids = new Uint32Array(count);\n    for (let i = 0; i < count; i++) {\n        ids[i] = i;\n    }\n    return ids;\n}\n\n/**\n * Applies filters, then narrows the result by search - a post-filter step over the visible\n * Uint32 ids so it applies identically whether the engine result came from the worker or\n * its synchronous fallback.\n *\n * @param options - Engine, data, filters and search inputs.\n * @returns The ids currently visible.\n */\nexport function useVisibleIds<TItem extends object>({\n    ready,\n    data,\n    currentFilters,\n    search,\n    searchFields,\n    engineApplyFilters,\n}: UseVisibleIdsOptions<TItem>): Uint32Array {\n    const [visibleIds, setVisibleIds] = useState<Uint32Array>(new Uint32Array(0));\n\n    useEffect(() => {\n        if (!ready) return;\n\n        let cancelled = false;\n        void engineApplyFilters(currentFilters).then((result) => {\n            if (cancelled) return;\n            let ids = result.visibleIds;\n\n            // If the engine failed to return any IDs while no filters are active,\n            // fall back to showing the full dataset so the canvas never renders empty.\n            if (ids.length === 0 && currentFilters.length === 0 && data.length > 0) {\n                ids = allIds(data.length);\n            }\n\n            setVisibleIds(filterVisibleIdsBySearch(data, ids, search, searchFields));\n        });\n        return () => {\n            cancelled = true;\n        };\n    }, [ready, currentFilters, engineApplyFilters, data, search, searchFields]);\n\n    return visibleIds;\n}\n"],"names":[],"mappings":";;;AAmBA,SAAS,MAAM,CAAC,KAAa,EAAA;AACzB,IAAA,MAAM,GAAG,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC;AAClC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;AAC5B,QAAA,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACd;AACA,IAAA,OAAO,GAAG;AACd;AAUM,SAAU,aAAa,CAAuB,EAChD,KAAK,EACL,IAAI,EACJ,cAAc,EACd,MAAM,EACN,YAAY,EACZ,kBAAkB,GACQ,EAAA;AAC1B,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAc,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;IAE7E,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,KAAK;YAAE;QAEZ,IAAI,SAAS,GAAG,KAAK;QACrB,KAAK,kBAAkB,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;AACpD,YAAA,IAAI,SAAS;gBAAE;AACf,YAAA,IAAI,GAAG,GAAG,MAAM,CAAC,UAAU;AAI3B,YAAA,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;AACpE,gBAAA,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;YAC7B;AAEA,YAAA,aAAa,CAAC,wBAAwB,CAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAC5E,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,MAAK;YACR,SAAS,GAAG,IAAI;AACpB,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAE3E,IAAA,OAAO,UAAU;AACrB;;"}

package/dist/esm/configuration/CratisComponentsDefaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CratisComponentsDefaults.d.ts","sourceRoot":"","sources":["../../../configuration/CratisComponentsDefaults.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uCAAoC,CAAC;AAEjF,sDAAsD;AACtD,eAAO,MAAM,cAAc,EAAE,sBA+D5B,CAAC"}
+{"version":3,"file":"CratisComponentsDefaults.d.ts","sourceRoot":"","sources":["../../../configuration/CratisComponentsDefaults.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uCAAoC,CAAC;AAEjF,sDAAsD;AACtD,eAAO,MAAM,cAAc,EAAE,sBAiE5B,CAAC"}

package/dist/esm/configuration/CratisComponentsDefaults.js

@@ -7,6 +7,8 @@ const cratisDefaults = {
             previous: 'Previous page',
             next: 'Next page',
             last: 'Last page',
+            page: (page) => `Page ${page}`,
+            pages: 'Pages',
         },
         datePicker: {
             today: 'Today',

package/dist/esm/configuration/CratisComponentsDefaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"CratisComponentsDefaults.js","sources":["../../../configuration/CratisComponentsDefaults.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CratisComponentsConfig } from '../Common/CratisComponentsProvider';\n\n/** Default locale and English Components messages. */\nexport const cratisDefaults: CratisComponentsConfig = {\n    locale: 'en-US',\n    messages: {\n        paginator: {\n            navigation: 'Pagination',\n            first: 'First page',\n            previous: 'Previous page',\n            next: 'Next page',\n            last: 'Last page',\n        },\n        datePicker: {\n            today: 'Today',\n            clear: 'Clear',\n            openCalendar: 'Open calendar',\n            previousMonth: 'Previous month',\n            nextMonth: 'Next month',\n            label: 'Date',\n        },\n        dropdown: {\n            showOptions: 'Show options',\n            clearSelection: 'Clear selection',\n        },\n        dialog: {\n            ok: 'Ok',\n            cancel: 'Cancel',\n            yes: 'Yes',\n            no: 'No',\n            close: 'Close',\n        },\n        stepper: {\n            next: 'Next',\n            previous: 'Previous',\n            submit: 'Submit',\n        },\n        notifications: {\n            dismiss: 'Dismiss',\n            region: 'Notifications',\n        },\n        dataTable: {\n            selectRow: 'Select row',\n            selectAllRows: 'Select all rows',\n            search: 'Search…',\n            searchAriaLabel: 'Search table',\n            loading: 'Loading…',\n            failed: 'Could not load data.',\n            unauthorized: 'You are not authorized to view this data.',\n        },\n        filter: {\n            label: 'Filters',\n            // Leave searchAriaLabel unset: existing placeholders remain search names by default.\n        },\n        columnFilter: {\n            matchModeAriaLabel: 'Match mode',\n            clear: 'Clear',\n            apply: 'Apply',\n            true: 'True',\n            false: 'False',\n        },\n        toolbar: {\n            label: 'Tools',\n            closeDrawer: 'Close',\n        },\n    },\n};\n"],"names":[],"mappings":"AAMO,MAAM,cAAc,GAA2B;AAClD,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,QAAQ,EAAE;AACN,QAAA,SAAS,EAAE;AACP,YAAA,UAAU,EAAE,YAAY;AACxB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,QAAQ,EAAE,eAAe;AACzB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,IAAI,EAAE,WAAW;AACpB,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,YAAY,EAAE,eAAe;AAC7B,YAAA,aAAa,EAAE,gBAAgB;AAC/B,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,KAAK,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,cAAc,EAAE,iBAAiB;AACpC,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,QAAQ;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,eAAe;AAC1B,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,aAAa,EAAE,iBAAiB;AAChC,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,eAAe,EAAE,cAAc;AAC/B,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,MAAM,EAAE,sBAAsB;AAC9B,YAAA,YAAY,EAAE,2CAA2C;AAC5D,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,KAAK,EAAE,SAAS;AAEnB,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,kBAAkB,EAAE,YAAY;AAChC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,WAAW,EAAE,OAAO;AACvB,SAAA;AACJ,KAAA;;;"}
+{"version":3,"file":"CratisComponentsDefaults.js","sources":["../../../configuration/CratisComponentsDefaults.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CratisComponentsConfig } from '../Common/CratisComponentsProvider';\n\n/** Default locale and English Components messages. */\nexport const cratisDefaults: CratisComponentsConfig = {\n    locale: 'en-US',\n    messages: {\n        paginator: {\n            navigation: 'Pagination',\n            first: 'First page',\n            previous: 'Previous page',\n            next: 'Next page',\n            last: 'Last page',\n            page: (page) => `Page ${page}`,\n            pages: 'Pages',\n        },\n        datePicker: {\n            today: 'Today',\n            clear: 'Clear',\n            openCalendar: 'Open calendar',\n            previousMonth: 'Previous month',\n            nextMonth: 'Next month',\n            label: 'Date',\n        },\n        dropdown: {\n            showOptions: 'Show options',\n            clearSelection: 'Clear selection',\n        },\n        dialog: {\n            ok: 'Ok',\n            cancel: 'Cancel',\n            yes: 'Yes',\n            no: 'No',\n            close: 'Close',\n        },\n        stepper: {\n            next: 'Next',\n            previous: 'Previous',\n            submit: 'Submit',\n        },\n        notifications: {\n            dismiss: 'Dismiss',\n            region: 'Notifications',\n        },\n        dataTable: {\n            selectRow: 'Select row',\n            selectAllRows: 'Select all rows',\n            search: 'Search…',\n            searchAriaLabel: 'Search table',\n            loading: 'Loading…',\n            failed: 'Could not load data.',\n            unauthorized: 'You are not authorized to view this data.',\n        },\n        filter: {\n            label: 'Filters',\n            // Leave searchAriaLabel unset: existing placeholders remain search names by default.\n        },\n        columnFilter: {\n            matchModeAriaLabel: 'Match mode',\n            clear: 'Clear',\n            apply: 'Apply',\n            true: 'True',\n            false: 'False',\n        },\n        toolbar: {\n            label: 'Tools',\n            closeDrawer: 'Close',\n        },\n    },\n};\n"],"names":[],"mappings":"AAMO,MAAM,cAAc,GAA2B;AAClD,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,QAAQ,EAAE;AACN,QAAA,SAAS,EAAE;AACP,YAAA,UAAU,EAAE,YAAY;AACxB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,QAAQ,EAAE,eAAe;AACzB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,CAAC,IAAI,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE;AAC9B,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,YAAY,EAAE,eAAe;AAC7B,YAAA,aAAa,EAAE,gBAAgB;AAC/B,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,KAAK,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,cAAc,EAAE,iBAAiB;AACpC,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,QAAQ;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,eAAe;AAC1B,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,aAAa,EAAE,iBAAiB;AAChC,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,eAAe,EAAE,cAAc;AAC/B,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,MAAM,EAAE,sBAAsB;AAC9B,YAAA,YAAY,EAAE,2CAA2C;AAC5D,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,KAAK,EAAE,SAAS;AAEnB,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,kBAAkB,EAAE,YAAY;AAChC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,WAAW,EAAE,OAAO;AACvB,SAAA;AACJ,KAAA;;;"}

package/dist/esm/styles.DataPage.css

@@ -1501,25 +1501,70 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-.cratis-table-paginator {
+.cratis-table-paginator,
+.cratis-table-paginator-pages {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.25rem;
+}
+
+.cratis-table-paginator {
+    justify-content: center;
     padding: 0.25rem;
 }
 
-.cratis-table-paginator-info {
-    font-size: 0.875rem;
+.cratis-table-paginator-info,
+.cratis-table-paginator-ellipsis,
+.cratis-table-paginator-range {
     color: var(--cratis-text-color-secondary);
     padding: 0 0.5rem;
 }
 
+.cratis-table-paginator-info {
+    font-size: 0.875rem;
+}
+
+.cratis-table-paginator-page {
+    min-width: var(--cratis-control-height);
+    min-height: var(--cratis-control-height);
+    padding: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius);
+    background: transparent;
+    color: var(--cratis-text-color);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.cratis-table-paginator-page:hover:not(:disabled, [data-selected]) {
+    background: color-mix(in srgb, currentColor 4%, transparent);
+}
+
+.cratis-table-paginator-page[data-selected] {
+    border-color: var(--cratis-action-background);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
+}
+
+.cratis-table-paginator-page:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+@media (forced-colors: active) {
+    .cratis-table-paginator-page:focus-visible {
+        outline: 2px solid Highlight;
+    }
+
+    .cratis-table-paginator-page[data-selected] {
+        border-color: Highlight;
+    }
+}
+
 .cratis-table-paginator-range {
     font-size: 0.8125rem;
-    color: var(--cratis-text-color-secondary);
     margin-right: auto;
-    padding: 0 0.5rem;
 }
 
 /* ── ./Dropdown/Dropdown.css ─────────────────────────────────────── */

package/dist/esm/styles.DataTables.css

@@ -1300,25 +1300,70 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-.cratis-table-paginator {
+.cratis-table-paginator,
+.cratis-table-paginator-pages {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.25rem;
+}
+
+.cratis-table-paginator {
+    justify-content: center;
     padding: 0.25rem;
 }
 
-.cratis-table-paginator-info {
-    font-size: 0.875rem;
+.cratis-table-paginator-info,
+.cratis-table-paginator-ellipsis,
+.cratis-table-paginator-range {
     color: var(--cratis-text-color-secondary);
     padding: 0 0.5rem;
 }
 
+.cratis-table-paginator-info {
+    font-size: 0.875rem;
+}
+
+.cratis-table-paginator-page {
+    min-width: var(--cratis-control-height);
+    min-height: var(--cratis-control-height);
+    padding: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius);
+    background: transparent;
+    color: var(--cratis-text-color);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.cratis-table-paginator-page:hover:not(:disabled, [data-selected]) {
+    background: color-mix(in srgb, currentColor 4%, transparent);
+}
+
+.cratis-table-paginator-page[data-selected] {
+    border-color: var(--cratis-action-background);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
+}
+
+.cratis-table-paginator-page:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+@media (forced-colors: active) {
+    .cratis-table-paginator-page:focus-visible {
+        outline: 2px solid Highlight;
+    }
+
+    .cratis-table-paginator-page[data-selected] {
+        border-color: Highlight;
+    }
+}
+
 .cratis-table-paginator-range {
     font-size: 0.8125rem;
-    color: var(--cratis-text-color-secondary);
     margin-right: auto;
-    padding: 0 0.5rem;
 }
 
 /* ── ./Dropdown/Dropdown.css ─────────────────────────────────────── */

package/dist/esm/styles.SchemaEditor.css

@@ -1300,25 +1300,70 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-.cratis-table-paginator {
+.cratis-table-paginator,
+.cratis-table-paginator-pages {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.25rem;
+}
+
+.cratis-table-paginator {
+    justify-content: center;
     padding: 0.25rem;
 }
 
-.cratis-table-paginator-info {
-    font-size: 0.875rem;
+.cratis-table-paginator-info,
+.cratis-table-paginator-ellipsis,
+.cratis-table-paginator-range {
     color: var(--cratis-text-color-secondary);
     padding: 0 0.5rem;
 }
 
+.cratis-table-paginator-info {
+    font-size: 0.875rem;
+}
+
+.cratis-table-paginator-page {
+    min-width: var(--cratis-control-height);
+    min-height: var(--cratis-control-height);
+    padding: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius);
+    background: transparent;
+    color: var(--cratis-text-color);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.cratis-table-paginator-page:hover:not(:disabled, [data-selected]) {
+    background: color-mix(in srgb, currentColor 4%, transparent);
+}
+
+.cratis-table-paginator-page[data-selected] {
+    border-color: var(--cratis-action-background);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
+}
+
+.cratis-table-paginator-page:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+@media (forced-colors: active) {
+    .cratis-table-paginator-page:focus-visible {
+        outline: 2px solid Highlight;
+    }
+
+    .cratis-table-paginator-page[data-selected] {
+        border-color: Highlight;
+    }
+}
+
 .cratis-table-paginator-range {
     font-size: 0.8125rem;
-    color: var(--cratis-text-color-secondary);
     margin-right: auto;
-    padding: 0 0.5rem;
 }
 
 /* ── ./Display/Display.css ─────────────────────────────────────── */

package/dist/esm/styles.css

@@ -4311,25 +4311,70 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-.cratis-table-paginator {
+.cratis-table-paginator,
+.cratis-table-paginator-pages {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.25rem;
+}
+
+.cratis-table-paginator {
+    justify-content: center;
     padding: 0.25rem;
 }
 
-.cratis-table-paginator-info {
-    font-size: 0.875rem;
+.cratis-table-paginator-info,
+.cratis-table-paginator-ellipsis,
+.cratis-table-paginator-range {
     color: var(--cratis-text-color-secondary);
     padding: 0 0.5rem;
 }
 
+.cratis-table-paginator-info {
+    font-size: 0.875rem;
+}
+
+.cratis-table-paginator-page {
+    min-width: var(--cratis-control-height);
+    min-height: var(--cratis-control-height);
+    padding: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius);
+    background: transparent;
+    color: var(--cratis-text-color);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.cratis-table-paginator-page:hover:not(:disabled, [data-selected]) {
+    background: color-mix(in srgb, currentColor 4%, transparent);
+}
+
+.cratis-table-paginator-page[data-selected] {
+    border-color: var(--cratis-action-background);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
+}
+
+.cratis-table-paginator-page:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+@media (forced-colors: active) {
+    .cratis-table-paginator-page:focus-visible {
+        outline: 2px solid Highlight;
+    }
+
+    .cratis-table-paginator-page[data-selected] {
+        border-color: Highlight;
+    }
+}
+
 .cratis-table-paginator-range {
     font-size: 0.8125rem;
-    color: var(--cratis-text-color-secondary);
     margin-right: auto;
-    padding: 0 0.5rem;
 }
 
 /* ── ./Dialogs/Dialog.css ─────────────────────────────────────── */