@cratis/components 0.1.13 → 0.1.14

package/dist/cjs/PivotViewer/utils/cardPosition.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var layout = require('../engine/layout.js');
+var constants = require('../constants.js');
+
+function getCardPositionAtZoom(zoom, itemId, grouping, viewMode, containerWidth, containerHeight) {
+    const scaledContainerWidth = containerWidth / zoom;
+    const scaledContainerHeight = viewMode === 'collection'
+        ? containerHeight / zoom
+        : containerHeight;
+    const layout$1 = layout.computeLayout(grouping, {
+        viewMode,
+        cardWidth: constants.BASE_CARD_WIDTH,
+        cardHeight: constants.BASE_CARD_HEIGHT,
+        cardsPerColumn: constants.CARDS_PER_COLUMN,
+        groupSpacing: constants.GROUP_SPACING,
+        containerWidth: scaledContainerWidth,
+        containerHeight: scaledContainerHeight,
+    });
+    const position = layout$1.positions.get(itemId);
+    if (!position) {
+        return null;
+    }
+    return {
+        x: position.x,
+        y: position.y,
+        width: constants.BASE_CARD_WIDTH,
+        height: constants.BASE_CARD_HEIGHT,
+    };
+}
+function getLayoutSizeAtZoom(zoom, grouping, viewMode, containerWidth, containerHeight) {
+    if (viewMode === 'collection') {
+        const layout$1 = layout.computeLayout(grouping, {
+            viewMode,
+            cardWidth: constants.BASE_CARD_WIDTH,
+            cardHeight: constants.BASE_CARD_HEIGHT,
+            cardsPerColumn: constants.CARDS_PER_COLUMN,
+            groupSpacing: constants.GROUP_SPACING,
+            containerWidth,
+            containerHeight,
+        });
+        return { width: layout$1.totalWidth, height: layout$1.totalHeight };
+    }
+    const scaledContainerWidth = containerWidth / zoom;
+    const scaledContainerHeight = containerHeight;
+    const layout$1 = layout.computeLayout(grouping, {
+        viewMode,
+        cardWidth: constants.BASE_CARD_WIDTH,
+        cardHeight: constants.BASE_CARD_HEIGHT,
+        cardsPerColumn: constants.CARDS_PER_COLUMN,
+        groupSpacing: constants.GROUP_SPACING,
+        containerWidth: scaledContainerWidth,
+        containerHeight: scaledContainerHeight,
+    });
+    return { width: layout$1.totalWidth, height: layout$1.totalHeight };
+}
+function createCardPositionCallbacks(itemId, grouping, viewMode, containerWidth, containerHeight) {
+    return {
+        getCardPositionAtZoom: (zoom) => getCardPositionAtZoom(zoom, itemId, grouping, viewMode, containerWidth, containerHeight),
+        getLayoutSizeAtZoom: (zoom) => getLayoutSizeAtZoom(zoom, grouping, viewMode, containerWidth, containerHeight),
+    };
+}
+
+exports.createCardPositionCallbacks = createCardPositionCallbacks;
+exports.getCardPositionAtZoom = getCardPositionAtZoom;
+exports.getLayoutSizeAtZoom = getLayoutSizeAtZoom;
+//# sourceMappingURL=cardPosition.js.map

package/dist/cjs/PivotViewer/utils/cardPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardPosition.js","sources":["../../../../PivotViewer/utils/cardPosition.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 { GroupingResult } from '../engine/types';\nimport { computeLayout } from '../engine/layout';\nimport {\n    BASE_CARD_WIDTH,\n    BASE_CARD_HEIGHT,\n    CARDS_PER_COLUMN,\n    GROUP_SPACING,\n} from '../constants';\nimport type { ViewMode } from '../components/Toolbar';\nimport type { LayoutResult } from '../engine/types';\nimport type { CardPosition } from './idResolution';\n\nexport type Layout = LayoutResult;\n\n/**\n * Computes the card position at a specific zoom level\n */\nexport function getCardPositionAtZoom(\n    zoom: number,\n    itemId: string | number,\n    grouping: GroupingResult,\n    viewMode: ViewMode,\n    containerWidth: number,\n    containerHeight: number,\n): CardPosition | null {\n    const scaledContainerWidth = containerWidth / zoom;\n    const scaledContainerHeight = viewMode === 'collection'\n        ? containerHeight / zoom\n        : containerHeight;\n\n    const layout = computeLayout(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        grouping as unknown as any, {\n        viewMode,\n        cardWidth: BASE_CARD_WIDTH,\n        cardHeight: BASE_CARD_HEIGHT,\n        cardsPerColumn: CARDS_PER_COLUMN,\n        groupSpacing: GROUP_SPACING,\n        containerWidth: scaledContainerWidth,\n        containerHeight: scaledContainerHeight,\n    });\n\n    const position = layout.positions.get(itemId);\n    if (!position) {\n        return null;\n    }\n\n    return {\n        x: position.x,\n        y: position.y,\n        width: BASE_CARD_WIDTH,\n        height: BASE_CARD_HEIGHT,\n    };\n}\n\n/**\n * Computes layout size at a specific zoom level\n */\nexport function getLayoutSizeAtZoom(\n    zoom: number,\n    grouping: GroupingResult,\n    viewMode: ViewMode,\n    containerWidth: number,\n    containerHeight: number,\n): { width: number; height: number } {\n    if (viewMode === 'collection') {\n        const layout = computeLayout(\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            grouping as unknown as any, {\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        return { width: layout.totalWidth, height: layout.totalHeight };\n    }\n\n    const scaledContainerWidth = containerWidth / zoom;\n    const scaledContainerHeight = containerHeight;\n\n    const layout = computeLayout(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        grouping as unknown as any, {\n        viewMode,\n        cardWidth: BASE_CARD_WIDTH,\n        cardHeight: BASE_CARD_HEIGHT,\n        cardsPerColumn: CARDS_PER_COLUMN,\n        groupSpacing: GROUP_SPACING,\n        containerWidth: scaledContainerWidth,\n        containerHeight: scaledContainerHeight,\n    });\n\n    return { width: layout.totalWidth, height: layout.totalHeight };\n}\n\n/**\n * Creates callback functions for card position calculations at various zoom levels\n * Used for smooth animations during zoom and pan operations\n */\nexport function createCardPositionCallbacks(\n    itemId: string | number,\n    grouping: GroupingResult,\n    viewMode: ViewMode,\n    containerWidth: number,\n    containerHeight: number,\n) {\n    return {\n        getCardPositionAtZoom: (zoom: number) =>\n            getCardPositionAtZoom(zoom, itemId, grouping, viewMode, containerWidth, containerHeight),\n        \n        getLayoutSizeAtZoom: (zoom: number) =>\n            getLayoutSizeAtZoom(zoom, grouping, viewMode, containerWidth, containerHeight),\n    };\n}\n"],"names":["layout","computeLayout","BASE_CARD_WIDTH","BASE_CARD_HEIGHT","CARDS_PER_COLUMN","GROUP_SPACING"],"mappings":";;;;;AAoBM,SAAU,qBAAqB,CACjC,IAAY,EACZ,MAAuB,EACvB,QAAwB,EACxB,QAAkB,EAClB,cAAsB,EACtB,eAAuB,EAAA;AAEvB,IAAA,MAAM,oBAAoB,GAAG,cAAc,GAAG,IAAI;AAClD,IAAA,MAAM,qBAAqB,GAAG,QAAQ,KAAK;UACrC,eAAe,GAAG;UAClB,eAAe;AAErB,IAAA,MAAMA,QAAM,GAAGC,oBAAa,CAExB,QAA0B,EAAE;QAC5B,QAAQ;AACR,QAAA,SAAS,EAAEC,yBAAe;AAC1B,QAAA,UAAU,EAAEC,0BAAgB;AAC5B,QAAA,cAAc,EAAEC,0BAAgB;AAChC,QAAA,YAAY,EAAEC,uBAAa;AAC3B,QAAA,cAAc,EAAE,oBAAoB;AACpC,QAAA,eAAe,EAAE,qBAAqB;AACzC,KAAA,CAAC;IAEF,MAAM,QAAQ,GAAGL,QAAM,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC;IAC7C,IAAI,CAAC,QAAQ,EAAE;AACX,QAAA,OAAO,IAAI;IACf;IAEA,OAAO;QACH,CAAC,EAAE,QAAQ,CAAC,CAAC;QACb,CAAC,EAAE,QAAQ,CAAC,CAAC;AACb,QAAA,KAAK,EAAEE,yBAAe;AACtB,QAAA,MAAM,EAAEC,0BAAgB;KAC3B;AACL;AAKM,SAAU,mBAAmB,CAC/B,IAAY,EACZ,QAAwB,EACxB,QAAkB,EAClB,cAAsB,EACtB,eAAuB,EAAA;AAEvB,IAAA,IAAI,QAAQ,KAAK,YAAY,EAAE;AAC3B,QAAA,MAAMH,QAAM,GAAGC,oBAAa,CAExB,QAA0B,EAAE;YAC5B,QAAQ;AACR,YAAA,SAAS,EAAEC,yBAAe;AAC1B,YAAA,UAAU,EAAEC,0BAAgB;AAC5B,YAAA,cAAc,EAAEC,0BAAgB;AAChC,YAAA,YAAY,EAAEC,uBAAa;YAC3B,cAAc;YACd,eAAe;AAClB,SAAA,CAAC;AACF,QAAA,OAAO,EAAE,KAAK,EAAEL,QAAM,CAAC,UAAU,EAAE,MAAM,EAAEA,QAAM,CAAC,WAAW,EAAE;IACnE;AAEA,IAAA,MAAM,oBAAoB,GAAG,cAAc,GAAG,IAAI;IAClD,MAAM,qBAAqB,GAAG,eAAe;AAE7C,IAAA,MAAMA,QAAM,GAAGC,oBAAa,CAExB,QAA0B,EAAE;QAC5B,QAAQ;AACR,QAAA,SAAS,EAAEC,yBAAe;AAC1B,QAAA,UAAU,EAAEC,0BAAgB;AAC5B,QAAA,cAAc,EAAEC,0BAAgB;AAChC,QAAA,YAAY,EAAEC,uBAAa;AAC3B,QAAA,cAAc,EAAE,oBAAoB;AACpC,QAAA,eAAe,EAAE,qBAAqB;AACzC,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,KAAK,EAAEL,QAAM,CAAC,UAAU,EAAE,MAAM,EAAEA,QAAM,CAAC,WAAW,EAAE;AACnE;AAMM,SAAU,2BAA2B,CACvC,MAAuB,EACvB,QAAwB,EACxB,QAAkB,EAClB,cAAsB,EACtB,eAAuB,EAAA;IAEvB,OAAO;AACH,QAAA,qBAAqB,EAAE,CAAC,IAAY,KAChC,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,CAAC;AAE5F,QAAA,mBAAmB,EAAE,CAAC,IAAY,KAC9B,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,CAAC;KACrF;AACL;;;;;;"}

package/dist/cjs/PivotViewer/utils/constants.js

@@ -1,10 +1,14 @@
 'use strict';
 
 const ZOOM_MAX = 3;
+const BASE_CARD_WIDTH = 180;
+const BASE_CARD_HEIGHT = 140;
 const DETAIL_PANEL_WIDTH = 380;
 const ZOOM_MULTIPLIER = 1.15;
 const MIN_ZOOM_ON_SELECT = 1.2;
 
+exports.BASE_CARD_HEIGHT = BASE_CARD_HEIGHT;
+exports.BASE_CARD_WIDTH = BASE_CARD_WIDTH;
 exports.DETAIL_PANEL_WIDTH = DETAIL_PANEL_WIDTH;
 exports.MIN_ZOOM_ON_SELECT = MIN_ZOOM_ON_SELECT;
 exports.ZOOM_MAX = ZOOM_MAX;

package/dist/cjs/PivotViewer/utils/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../PivotViewer/utils/constants.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\n// Zoom constants\nexport const ZOOM_MIN = 0.1;\nexport const ZOOM_MAX = 3;\nexport const ZOOM_STEP = 0.05;\n\n// Layout constants\nexport const GROUP_SPACING = 40;\nexport const CARD_GAP = 8;\nexport const CARDS_PER_COLUMN = 5;\nexport const BASE_CARD_WIDTH = 180;\nexport const BASE_CARD_HEIGHT = 140;\nexport const DETAIL_PANEL_WIDTH = 380;\n\n// Animation constants\nexport const ZOOM_ANIMATION_DURATION = 300;\nexport const ZOOM_MULTIPLIER = 1.15;\nexport const MIN_ZOOM_ON_SELECT = 1.2;\n"],"names":[],"mappings":";;AAKO,MAAM,QAAQ,GAAG;AASjB,MAAM,kBAAkB,GAAG;AAI3B,MAAM,eAAe,GAAG;AACxB,MAAM,kBAAkB,GAAG;;;;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../PivotViewer/utils/constants.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\n// Zoom constants\nexport const ZOOM_MIN = 0.1;\nexport const ZOOM_MAX = 3;\nexport const ZOOM_STEP = 0.05;\n\n// Layout constants\nexport const GROUP_SPACING = 40;\nexport const CARD_GAP = 8;\nexport const CARDS_PER_COLUMN = 5;\nexport const BASE_CARD_WIDTH = 180;\nexport const BASE_CARD_HEIGHT = 140;\nexport const DETAIL_PANEL_WIDTH = 380;\n\n// Animation constants\nexport const ZOOM_ANIMATION_DURATION = 300;\nexport const ZOOM_MULTIPLIER = 1.15;\nexport const MIN_ZOOM_ON_SELECT = 1.2;\n"],"names":[],"mappings":";;AAKO,MAAM,QAAQ,GAAG;AAOjB,MAAM,eAAe,GAAG;AACxB,MAAM,gBAAgB,GAAG;AACzB,MAAM,kBAAkB,GAAG;AAI3B,MAAM,eAAe,GAAG;AACxB,MAAM,kBAAkB,GAAG;;;;;;;;;"}

package/dist/cjs/PivotViewer/utils/idResolution.js

@@ -0,0 +1,34 @@
+'use strict';
+
+function normalizeIdToLayoutKey(itemId, layout) {
+    if (layout.positions.has(itemId)) {
+        return itemId;
+    }
+    if (typeof itemId === 'number' && layout.positions.has(String(itemId))) {
+        return String(itemId);
+    }
+    if (typeof itemId === 'string') {
+        const numId = Number(itemId);
+        if (!isNaN(numId) && layout.positions.has(numId)) {
+            return numId;
+        }
+    }
+    return itemId;
+}
+function getCardPositionFromLayout(itemId, layout, cardWidth, cardHeight) {
+    const normalizedId = normalizeIdToLayoutKey(itemId, layout);
+    const position = layout.positions.get(normalizedId);
+    if (!position) {
+        return null;
+    }
+    return {
+        x: position.x,
+        y: position.y,
+        width: cardWidth,
+        height: cardHeight,
+    };
+}
+
+exports.getCardPositionFromLayout = getCardPositionFromLayout;
+exports.normalizeIdToLayoutKey = normalizeIdToLayoutKey;
+//# sourceMappingURL=idResolution.js.map

package/dist/cjs/PivotViewer/utils/idResolution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"idResolution.js","sources":["../../../../PivotViewer/utils/idResolution.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 { LayoutResult } from '../engine/types';\n\ntype Layout = LayoutResult;\n\nexport interface CardPosition {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\n/**\n * Resolves the ID for an item, handling type conversions and consistency with layout keys\n */\nexport function resolveItemId<TItem extends object>(\n    item: TItem,\n    index: number,\n    getItemId?: (item: TItem, index: number) => string | number,\n): string | number {\n    if (getItemId) {\n        const id = getItemId(item, index);\n        return typeof id === 'number' ? id : id;\n    }\n    const id = (item as Record<string, unknown>)['id'];\n    return typeof id === 'number' ? id : index;\n}\n\n/**\n * Ensures the item ID matches the layout's key type (number vs string)\n * by attempting type conversion if needed\n */\nexport function normalizeIdToLayoutKey(\n    itemId: string | number,\n    layout: Layout,\n): string | number {\n    // If already in layout, return as-is\n    if (layout.positions.has(itemId)) {\n        return itemId;\n    }\n\n    // Try converting number to string\n    if (typeof itemId === 'number' && layout.positions.has(String(itemId))) {\n        return String(itemId);\n    }\n\n    // Try converting string to number\n    if (typeof itemId === 'string') {\n        const numId = Number(itemId);\n        if (!isNaN(numId) && layout.positions.has(numId)) {\n            return numId;\n        }\n    }\n\n    // Return original if no match found (will likely result in null position)\n    return itemId;\n}\n\n/**\n * Gets the card position from the layout, handling ID type mismatches\n */\nexport function getCardPositionFromLayout(\n    itemId: string | number,\n    layout: Layout,\n    cardWidth: number,\n    cardHeight: number,\n): CardPosition | null {\n    const normalizedId = normalizeIdToLayoutKey(itemId, layout);\n    const position = layout.positions.get(normalizedId);\n\n    if (!position) {\n        return null;\n    }\n\n    return {\n        x: position.x,\n        y: position.y,\n        width: cardWidth,\n        height: cardHeight,\n    };\n}\n"],"names":[],"mappings":";;AAkCM,SAAU,sBAAsB,CAClC,MAAuB,EACvB,MAAc,EAAA;IAGd,IAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;AAC9B,QAAA,OAAO,MAAM;IACjB;AAGA,IAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE;AACpE,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC;IACzB;AAGA,IAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AAC5B,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC;AAC5B,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AAC9C,YAAA,OAAO,KAAK;QAChB;IACJ;AAGA,IAAA,OAAO,MAAM;AACjB;AAKM,SAAU,yBAAyB,CACrC,MAAuB,EACvB,MAAc,EACd,SAAiB,EACjB,UAAkB,EAAA;IAElB,MAAM,YAAY,GAAG,sBAAsB,CAAC,MAAM,EAAE,MAAM,CAAC;IAC3D,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;IAEnD,IAAI,CAAC,QAAQ,EAAE;AACX,QAAA,OAAO,IAAI;IACf;IAEA,OAAO;QACH,CAAC,EAAE,QAAQ,CAAC,CAAC;QACb,CAAC,EAAE,QAAQ,CAAC,CAAC;AACb,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,UAAU;KACrB;AACL;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"PivotViewer.d.ts","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiBhD,OAAO,mBAAmB,CAAC;AAQ3B,wBAAgB,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAiB,GACpB,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAgwBzB"}
+{"version":3,"file":"PivotViewer.d.ts","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,OAAO,mBAAmB,CAAC;AAe3B,wBAAgB,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAiB,GACpB,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CA6VzB"}

package/dist/esm/PivotViewer/PivotViewer.js

@@ -5,10 +5,7 @@ import { computeLayout } from './engine/layout.js';
 import { useFilterState } from './hooks/useFilterState.js';
 import { useDimensionState } from './hooks/useDimensionState.js';
 import { useZoomState } from './hooks/useZoomState.js';
-import { handleCardSelection } from './utils/selection.js';
-import { calculateCenterScrollPosition, smoothScrollTo, animateZoomAndScroll } from './utils/animations.js';
 import { BASE_CARD_HEIGHT, BASE_CARD_WIDTH, GROUP_SPACING, CARDS_PER_COLUMN } from './constants.js';
-import { DETAIL_PANEL_WIDTH, ZOOM_MAX, MIN_ZOOM_ON_SELECT, ZOOM_MULTIPLIER } from './utils/constants.js';
 import './PivotViewer.css';
 import { PivotViewerMain } from './components/PivotViewerMain.js';
 import { FilterPanelContainer } from './components/FilterPanelContainer.js';
@@ -17,6 +14,13 @@ import { useFilterOptions } from './hooks/useFilterOptions.js';
 import { usePanning } from './hooks/usePanning.js';
 import { useWheelZoom } from './hooks/useWheelZoom.js';
 import 'react-dom';
+import { useFieldExtractors } from './hooks/useFieldExtractors.js';
+import { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters.js';
+import { useCardSelection } from './hooks/useCardSelection.js';
+import { useDetailPanelClose } from './hooks/useDetailPanelClose.js';
+import { useScrollSync } from './hooks/useScrollSync.js';
+import { useAnimationModeTracking } from './hooks/useAnimationModeTracking.js';
+import { useViewModeScrollHandling } from './hooks/useViewModeScrollHandling.js';
 import { useContainerDimensions } from './hooks/useContainerDimensions.js';
 
 function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRenderer, getItemId, searchFields, className, emptyContent, isLoading = false, }) {
@@ -37,12 +41,6 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });
     const { filterState, rangeFilterState, expandedFilterKey, setExpandedFilterKey, handleToggleFilter, handleClearFilter, handleRangeChange, } = useFilterState(filters);
     const { activeDimensionKey, setActiveDimensionKey, activeDimension, dimensionFilter, handleAxisLabelClick, } = useDimensionState(dimensions, defaultDimensionKey);
-    const prevFilterStateRef = useRef(filterState);
-    const prevRangeFilterStateRef = useRef(rangeFilterState);
-    const prevSearchRef = useRef(search);
-    const prevDimensionRef = useRef(activeDimensionKey);
-    const prevViewModeRef = useRef(viewMode);
-    const isFirstRenderRef = useRef(true);
     const { zoomLevel, setZoomLevel, handleZoomIn, handleZoomOut, handleZoomSlider, } = useZoomState(1);
     const { isPanning, handlePanStart, handlePanMove, handlePanEnd, } = usePanning(containerRef, undefined, setScrollPosition);
     useWheelZoom(containerRef, zoomLevel, setZoomLevel);
@@ -60,125 +58,14 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         container.addEventListener('scroll', handleScroll);
         return () => container.removeEventListener('scroll', handleScroll);
     }, []);
-    useEffect(() => {
-        if (isFirstRenderRef.current) {
-            isFirstRenderRef.current = false;
-            return;
-        }
-        const filterChanged = prevFilterStateRef.current !== filterState;
-        const rangeChanged = prevRangeFilterStateRef.current !== rangeFilterState;
-        const searchChanged = prevSearchRef.current !== search;
-        const dimensionChanged = prevDimensionRef.current !== activeDimensionKey;
-        const viewModeChanged = prevViewModeRef.current !== viewMode;
-        if (filterChanged || rangeChanged || searchChanged) {
-            setAnimationMode('filter');
-        }
-        else if (dimensionChanged || viewModeChanged) {
-            setAnimationMode('layout');
-        }
-        prevFilterStateRef.current = filterState;
-        prevRangeFilterStateRef.current = rangeFilterState;
-        prevSearchRef.current = search;
-        prevDimensionRef.current = activeDimensionKey;
-        prevViewModeRef.current = viewMode;
-    }, [filterState, rangeFilterState, search, activeDimensionKey, viewMode]);
-    useEffect(() => {
-        const container = containerRef.current;
-        const axisLabels = axisLabelsRef.current;
-        if (!container || !axisLabels || viewMode !== 'grouped')
-            return;
-        const handleScroll = () => {
-            axisLabels.scrollLeft = container.scrollLeft;
-        };
-        handleScroll();
-        container.addEventListener('scroll', handleScroll);
-        return () => container.removeEventListener('scroll', handleScroll);
-    }, [viewMode]);
-    const fieldExtractors = useMemo(() => {
-        const extractors = new Map();
-        for (const dim of dimensions) {
-            extractors.set(dim.key, (item) => {
-                const val = dim.getValue(item);
-                if (val instanceof Date)
-                    return val.getTime();
-                if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean' || val === null) {
-                    return val;
-                }
-                return String(val);
-            });
-        }
-        if (filters) {
-            for (const filter of filters) {
-                extractors.set(filter.key, (item) => {
-                    const val = filter.getValue(item);
-                    if (val instanceof Date)
-                        return val.getTime();
-                    if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean' || val === null) {
-                        return val;
-                    }
-                    return String(val);
-                });
-            }
-        }
-        return extractors;
-    }, [dimensions, filters]);
-    const indexFields = useMemo(() => {
-        const fields = new Set();
-        for (const dim of dimensions) {
-            fields.add(dim.key);
-        }
-        if (filters) {
-            for (const filter of filters) {
-                fields.add(filter.key);
-            }
-        }
-        return Array.from(fields);
-    }, [dimensions, filters]);
+    const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);
     const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine({
         data,
         fieldExtractors,
         indexFields,
     });
-    const currentFilters = useMemo(() => {
-        const specs = [];
-        const searchTerm = search.trim().toLowerCase();
-        if (searchTerm && searchFields && searchFields.length > 0) ;
-        for (const [key, values] of Object.entries(filterState)) {
-            const valueSet = values;
-            if (valueSet.size > 0) {
-                specs.push({
-                    field: key,
-                    type: 'categorical',
-                    values: valueSet,
-                });
-            }
-        }
-        for (const [key, range] of Object.entries(rangeFilterState)) {
-            if (range && (range[0] !== null || range[1] !== null)) {
-                const min = range[0] ?? -Infinity;
-                const max = range[1] ?? Infinity;
-                specs.push({
-                    field: key,
-                    type: 'numeric',
-                    range: { min, max },
-                });
-            }
-        }
-        if (dimensionFilter && activeDimension) {
-            specs.push({
-                field: activeDimension.key,
-                type: 'categorical',
-                values: new Set([dimensionFilter]),
-            });
-        }
-        return specs;
-    }, [filterState, rangeFilterState, search, searchFields, dimensionFilter, activeDimension]);
-    const currentGroupBy = useMemo(() => {
-        return {
-            field: activeDimensionKey || dimensions[0]?.key || '',
-            buckets: 10,
-        };
-    }, [activeDimensionKey, dimensions]);
+    const currentFilters = useCurrentFilters(filters, filterState, rangeFilterState, search, searchFields, dimensionFilter, activeDimension);
+    const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);
     useEffect(() => {
         if (!ready)
             return;
@@ -224,7 +111,7 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         const lastRequest = lastGroupingRequest.current;
         if (lastRequest &&
             lastRequest.viewMode === viewMode &&
-            lastRequest.groupBy.field === currentGroupBy.field &&
+            lastRequest.groupBy?.field === currentGroupBy.field &&
             lastRequest.visibleIds === visibleIds) {
             console.log('[PivotViewer] Skipping duplicate grouping request');
             return;
@@ -262,260 +149,52 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         const id = item['id'];
         return typeof id === 'number' ? id : index;
     }, [getItemId]);
-    const lastProcessedViewMode = useRef(viewMode);
-    const lastProcessedGrouping = useRef(grouping);
-    useEffect(() => {
-        const viewModeChanged = lastProcessedViewMode.current !== viewMode;
-        const groupingChanged = lastProcessedGrouping.current !== grouping;
-        if (!viewModeChanged && !groupingChanged)
-            return;
-        lastProcessedViewMode.current = viewMode;
-        lastProcessedGrouping.current = grouping;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        if (selectedItem) {
-            let itemId = resolveId(selectedItem, 0);
-            if (typeof itemId === 'string' && !layout.positions.has(itemId)) {
-                const numId = Number(itemId);
-                if (!isNaN(numId) && layout.positions.has(numId))
-                    itemId = numId;
-            }
-            else if (typeof itemId === 'number' && !layout.positions.has(itemId)) {
-                const strId = String(itemId);
-                if (layout.positions.has(strId))
-                    itemId = strId;
-            }
-            const position = layout.positions.get(itemId);
-            if (position) {
-                const cardPosition = {
-                    x: position.x,
-                    y: position.y,
-                    width: BASE_CARD_WIDTH,
-                    height: BASE_CARD_HEIGHT
-                };
-                const detailWidth = viewMode === 'collection' ? 0 : DETAIL_PANEL_WIDTH;
-                const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, layout.totalHeight);
-                container.scrollTo({ left: scrollLeft, top: scrollTop });
-                setPreSelectionState(null);
-            }
-        }
-        else if (viewMode === 'grouped') {
-            setTimeout(() => {
-                container.scrollTop = container.scrollHeight;
-                setScrollPosition({ x: container.scrollLeft, y: container.scrollTop });
-            }, 0);
-        }
-    }, [viewMode, grouping, layout, selectedItem, resolveId, zoomLevel]);
-    const handleCardClick = useCallback((item, e, id) => {
-        if (isPanning)
-            return;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        let itemId = (id !== undefined && id !== null) ? id : resolveId(item, 0);
-        if (typeof itemId === 'string' && !layout.positions.has(itemId)) {
-            const numId = Number(itemId);
-            if (!isNaN(numId) && layout.positions.has(numId)) {
-                itemId = numId;
-            }
-        }
-        else if (typeof itemId === 'number' && !layout.positions.has(itemId)) {
-            const strId = String(itemId);
-            if (layout.positions.has(strId)) {
-                itemId = strId;
-            }
-        }
-        const selectedId = selectedItem ? (data.indexOf(selectedItem) !== -1 ? data.indexOf(selectedItem) : resolveId(selectedItem, 0)) : null;
-        const position = layout.positions.get(itemId);
-        const cardPosition = position ? {
-            x: position.x,
-            y: position.y,
-            width: BASE_CARD_WIDTH,
-            height: BASE_CARD_HEIGHT
-        } : null;
-        let targetCardPosition = null;
-        let getCardPositionAtZoom = undefined;
-        let targetTotalHeight = layout.totalHeight;
-        if (viewMode === 'grouped' && cardPosition) {
-            const targetZoom = Math.min(ZOOM_MAX, Math.max(MIN_ZOOM_ON_SELECT, zoomLevel * ZOOM_MULTIPLIER));
-            const targetContainerWidth = containerDimensions.width / targetZoom;
-            const targetContainerHeight = containerDimensions.height;
-            const targetLayout = computeLayout(grouping, {
-                viewMode,
-                cardWidth: BASE_CARD_WIDTH,
-                cardHeight: BASE_CARD_HEIGHT,
-                cardsPerColumn: CARDS_PER_COLUMN,
-                groupSpacing: GROUP_SPACING,
-                containerWidth: targetContainerWidth,
-                containerHeight: targetContainerHeight,
-            });
-            targetTotalHeight = targetLayout.totalHeight;
-            const targetPos = targetLayout.positions.get(itemId);
-            if (targetPos) {
-                targetCardPosition = {
-                    x: targetPos.x,
-                    y: targetPos.y,
-                    width: BASE_CARD_WIDTH,
-                    height: BASE_CARD_HEIGHT
-                };
-            }
-            getCardPositionAtZoom = (zoom) => {
-                const currentContainerWidth = containerDimensions.width / zoom;
-                const currentContainerHeight = containerDimensions.height;
-                const currentLayout = computeLayout(grouping, {
-                    viewMode,
-                    cardWidth: BASE_CARD_WIDTH,
-                    cardHeight: BASE_CARD_HEIGHT,
-                    cardsPerColumn: CARDS_PER_COLUMN,
-                    groupSpacing: GROUP_SPACING,
-                    containerWidth: currentContainerWidth,
-                    containerHeight: currentContainerHeight,
-                });
-                const pos = currentLayout.positions.get(itemId);
-                return pos ? { x: pos.x, y: pos.y, width: BASE_CARD_WIDTH, height: BASE_CARD_HEIGHT } : null;
-            };
-        }
-        const getLayoutSizeAtZoom = (zoom) => {
-            if (viewMode === 'collection') {
-                return { width: layout.totalWidth, height: layout.totalHeight };
-            }
-            const currentContainerWidth = containerDimensions.width / zoom;
-            const currentContainerHeight = containerDimensions.height;
-            const currentLayout = computeLayout(grouping, {
-                viewMode,
-                cardWidth: BASE_CARD_WIDTH,
-                cardHeight: BASE_CARD_HEIGHT,
-                cardsPerColumn: CARDS_PER_COLUMN,
-                groupSpacing: GROUP_SPACING,
-                containerWidth: currentContainerWidth,
-                containerHeight: currentContainerHeight,
-            });
-            return { width: currentLayout.totalWidth, height: currentLayout.totalHeight };
-        };
-        handleCardSelection({
-            item,
-            itemId,
-            selectedItemId: selectedId,
-            container,
-            cardPosition,
-            targetCardPosition,
-            getCardPositionAtZoom,
-            getLayoutSizeAtZoom,
-            spacer: spacerRef.current,
-            preSelectionState,
-            startScrollPosition: { x: scrollPosition.x, y: scrollPosition.y },
-            setZoomLevel,
-            setIsZooming,
-            setSelectedItem,
-            setPreSelectionState,
-            viewMode,
-            zoomLevel,
-            totalHeight: targetTotalHeight,
-        });
-    }, [isPanning, selectedItem, zoomLevel, preSelectionState, viewMode, resolveId, setZoomLevel, layout, grouping, containerDimensions, scrollPosition]);
-    const closeDetail = useCallback(() => {
-        const container = containerRef.current;
-        if (!container || !selectedItem) {
-            setSelectedItem(null);
-            return;
-        }
-        const index = data.indexOf(selectedItem);
-        let itemId = index !== -1 ? index : resolveId(selectedItem, 0);
-        if (typeof itemId === 'string' && !layout.positions.has(itemId)) {
-            const numId = Number(itemId);
-            if (!isNaN(numId) && layout.positions.has(numId)) {
-                itemId = numId;
-            }
-        }
-        else if (typeof itemId === 'number' && !layout.positions.has(itemId)) {
-            const strId = String(itemId);
-            if (layout.positions.has(strId)) {
-                itemId = strId;
-            }
-        }
-        const position = layout.positions.get(itemId);
-        const cardPosition = position ? {
-            x: position.x,
-            y: position.y,
-            width: BASE_CARD_WIDTH,
-            height: BASE_CARD_HEIGHT
-        } : null;
-        if (!preSelectionState) {
-            setSelectedItem(null);
-            return;
-        }
-        if (viewMode === 'collection') {
-            setSelectedItem(null);
-            smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
-            setPreSelectionState(null);
-            return;
-        }
-        const zoomChanged = Math.abs(preSelectionState.zoom - zoomLevel) > 0.001;
-        if (!zoomChanged || !cardPosition) {
-            setSelectedItem(null);
-            smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
-            setPreSelectionState(null);
-            return;
-        }
-        let targetCardPosition = null;
-        let getCardPositionAtZoom = undefined;
-        if (viewMode === 'grouped') {
-            const targetZoom = preSelectionState.zoom;
-            const targetContainerWidth = containerDimensions.width / targetZoom;
-            const targetContainerHeight = containerDimensions.height;
-            const targetLayout = computeLayout(grouping, {
-                viewMode,
-                cardWidth: BASE_CARD_WIDTH,
-                cardHeight: BASE_CARD_HEIGHT,
-                cardsPerColumn: CARDS_PER_COLUMN,
-                groupSpacing: GROUP_SPACING,
-                containerWidth: targetContainerWidth,
-                containerHeight: targetContainerHeight,
-            });
-            const targetPos = targetLayout.positions.get(itemId);
-            if (targetPos) {
-                targetCardPosition = {
-                    x: targetPos.x,
-                    y: targetPos.y,
-                    width: BASE_CARD_WIDTH,
-                    height: BASE_CARD_HEIGHT
-                };
-            }
-            getCardPositionAtZoom = (zoom) => {
-                const currentContainerWidth = containerDimensions.width / zoom;
-                const currentContainerHeight = containerDimensions.height;
-                const currentLayout = computeLayout(grouping, {
-                    viewMode,
-                    cardWidth: BASE_CARD_WIDTH,
-                    cardHeight: BASE_CARD_HEIGHT,
-                    cardsPerColumn: CARDS_PER_COLUMN,
-                    groupSpacing: GROUP_SPACING,
-                    containerWidth: currentContainerWidth,
-                    containerHeight: currentContainerHeight,
-                });
-                const pos = currentLayout.positions.get(itemId);
-                return pos ? { x: pos.x, y: pos.y, width: BASE_CARD_WIDTH, height: BASE_CARD_HEIGHT } : null;
-            };
-        }
-        setIsZooming(true);
-        animateZoomAndScroll({
-            container,
-            cardPosition,
-            targetCardPosition,
-            getCardPositionAtZoom,
-            startZoom: zoomLevel,
-            targetZoom: preSelectionState.zoom,
-            targetScrollLeft: preSelectionState.scrollLeft,
-            targetScrollTop: preSelectionState.scrollTop,
-            onUpdate: setZoomLevel,
-            onComplete: () => {
-                setIsZooming(false);
-                setSelectedItem(null);
-                setPreSelectionState(null);
-            },
-        });
-    }, [preSelectionState, selectedItem, zoomLevel, viewMode, resolveId, setZoomLevel, layout, grouping, containerDimensions]);
+    useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);
+    useScrollSync(containerRef, axisLabelsRef, viewMode);
+    useViewModeScrollHandling({
+        containerRef,
+        viewMode,
+        grouping,
+        layout,
+        selectedItem,
+        zoomLevel,
+        resolveId,
+        data,
+        setPreSelectionState,
+    });
+    const handleCardClick = useCardSelection({
+        data,
+        isPanning,
+        selectedItem,
+        zoomLevel,
+        viewMode,
+        layout,
+        containerDimensions,
+        scrollPosition,
+        preSelectionState,
+        grouping,
+        getItemId,
+        resolveId,
+        setZoomLevel,
+        setIsZooming,
+        setSelectedItem,
+        setPreSelectionState,
+    });
+    const closeDetail = useDetailPanelClose({
+        selectedItem,
+        preSelectionState,
+        zoomLevel,
+        viewMode,
+        layout,
+        containerDimensions,
+        grouping,
+        data,
+        resolveId,
+        setZoomLevel,
+        setIsZooming,
+        setSelectedItem,
+        setPreSelectionState,
+    });
     const cardWidth = BASE_CARD_WIDTH;
     const cardHeight = BASE_CARD_HEIGHT;
     const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);