@cratis/components 4.26.3 → 4.27.0

package/dist/esm/PivotViewer/PivotViewer.js

@@ -1,11 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { usePivotEngine } from './hooks/usePivotEngine.js';
-import { computeLayout } from './engine/layout.js';
+import { useRef, useState, useEffect } from 'react';
 import { useFilterState } from './hooks/useFilterState.js';
 import { useDimensionState } from './hooks/useDimensionState.js';
 import { useZoomState } from './hooks/useZoomState.js';
-import { BASE_CARD_HEIGHT, BASE_CARD_WIDTH, CARDS_PER_COLUMN } from './constants.js';
+import { BASE_CARD_HEIGHT, BASE_CARD_WIDTH } from './constants.js';
 import { PivotViewerMain } from './components/PivotViewerMain.js';
 import { FilterPanelContainer } from './components/FilterPanelContainer.js';
 import { ToolbarContainer } from './components/ToolbarContainer.js';
@@ -14,18 +12,32 @@ import { usePanning } from './hooks/usePanning.js';
 import { useWheelZoom } from './hooks/useWheelZoom.js';
 import { useZoomScrollAnchor } from './hooks/useZoomScrollAnchor.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';
-import { presentGrouping } from './utils/presentGrouping.js';
-import { filterVisibleIdsBySearch } from './utils/search.js';
-import { resolveInternalItemIndex } from './utils/idResolution.js';
+import { useColorCssVariables } from './hooks/useColorCssVariables.js';
+import { useViewerLayout } from './hooks/useViewerLayout.js';
+import { useScrollPositionTracking } from './hooks/useScrollPositionTracking.js';
+import { usePivotViewerGrouping } from './hooks/usePivotViewerGrouping.js';
+import { usePivotViewerInteractions } from './hooks/usePivotViewerInteractions.js';
 
+function countActiveFilters(filterState, rangeFilterState) {
+    const selectionCount = Object.values(filterState).reduce((sum, vals) => sum + vals.size, 0);
+    return selectionCount + Object.values(rangeFilterState).filter((r) => r !== null).length;
+}
+function filtersClassName(hasFilters, filtersOpen) {
+    if (!hasFilters)
+        return 'no-filters';
+    return filtersOpen ? 'filters-open' : 'filters-closed';
+}
+function buildViewerClassName(className, hasFilters, filtersOpen, viewMode) {
+    return [
+        'pivot-viewer',
+        className,
+        filtersClassName(hasFilters, filtersOpen),
+        viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
 function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRenderer, detailRenderer, getItemId, searchFields, title, className, emptyContent, isLoading = false, loadingLabel, labels, colors, }) {
     const containerRef = useRef(null);
     const filterButtonRef = useRef(null);
@@ -36,8 +48,6 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     const [filtersOpen, setFiltersOpen] = useState(false);
     const [selectedItem, setSelectedItem] = useState(null);
     const [isZooming, setIsZooming] = useState(false);
-    const [visibleIds, setVisibleIds] = useState(new Uint32Array(0));
-    const [rawGrouping, setRawGrouping] = useState({ groups: [] });
     const [hoveredGroupIndex, setHoveredGroupIndex] = useState(null);
     const [preSelectionState, setPreSelectionState] = useState(null);
     const [, setAnimationMode] = useState('layout');
@@ -49,143 +59,22 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     useWheelZoom(containerRef, zoomLevel, setZoomLevel);
     useZoomScrollAnchor(containerRef, spacerRef, viewMode);
     const containerDimensions = useContainerDimensions(containerRef, isLoading);
-    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);
-    }, []);
-    const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);
-    const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds, } = usePivotEngine({
+    useScrollPositionTracking(containerRef, setScrollPosition);
+    const { ready, visibleIds, grouping } = usePivotViewerGrouping({
         data,
-        fieldExtractors,
-        indexFields,
-    });
-    const currentFilters = useCurrentFilters(filters, filterState, rangeFilterState, dimensionFilter, activeDimension);
-    const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);
-    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) {
-                const fallbackIds = new Uint32Array(data.length);
-                for (let i = 0; i < data.length; i++) {
-                    fallbackIds[i] = i;
-                }
-                ids = fallbackIds;
-            }
-            setVisibleIds(filterVisibleIdsBySearch(data, ids, search, searchFields));
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [ready, currentFilters, engineApplyFilters, data, search, searchFields]);
-    useEffect(() => {
-        if (!ready || visibleIds.length === 0) {
-            setRawGrouping({ groups: [] });
-            return;
-        }
-        let cancelled = false;
-        if (viewMode === 'collection') {
-            if (activeDimensionKey) {
-                void sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {
-                    if (cancelled)
-                        return;
-                    setRawGrouping({
-                        groups: [
-                            {
-                                key: 'all',
-                                label: 'All Items',
-                                value: 'all',
-                                ids: sortedIds,
-                                count: sortedIds.length,
-                            },
-                        ],
-                    });
-                });
-            }
-            else {
-                setRawGrouping({
-                    groups: [
-                        {
-                            key: 'all',
-                            label: 'All Items',
-                            value: 'all',
-                            ids: visibleIds,
-                            count: visibleIds.length,
-                        },
-                    ],
-                });
-            }
-        }
-        else {
-            void computeGrouping(visibleIds, currentGroupBy).then((result) => {
-                if (!cancelled)
-                    setRawGrouping(result);
-            });
-        }
-        return () => {
-            cancelled = true;
-        };
-    }, [
-        ready,
-        visibleIds,
-        currentGroupBy,
-        viewMode,
-        computeGrouping,
-        sortIds,
+        dimensions,
+        filters,
+        filterState,
+        rangeFilterState,
+        dimensionFilter,
+        activeDimension,
         activeDimensionKey,
-    ]);
-    const grouping = useMemo(() => viewMode === 'grouped' ? presentGrouping(rawGrouping, activeDimension, data) : rawGrouping, [viewMode, rawGrouping, activeDimension, data]);
-    const layout = useMemo(() => {
-        const cardWidth = BASE_CARD_WIDTH;
-        const cardHeight = BASE_CARD_HEIGHT;
-        const containerWidth = containerDimensions.width / zoomLevel;
-        const containerHeight = viewMode === 'collection'
-            ? containerDimensions.height / zoomLevel
-            : containerDimensions.height;
-        const result = computeLayout(grouping, {
-            viewMode,
-            cardWidth,
-            cardHeight,
-            cardsPerColumn: CARDS_PER_COLUMN,
-            containerWidth,
-            containerHeight,
-        });
-        return result;
-    }, [
-        grouping,
-        viewMode,
-        zoomLevel,
-        containerDimensions.width,
-        containerDimensions.height,
-    ]);
-    const resolveId = useCallback((item) => resolveInternalItemIndex(data, item, getItemId), [data, getItemId]);
-    useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);
-    useScrollSync(containerRef, axisLabelsRef, viewMode);
-    useViewModeScrollHandling({
-        containerRef,
+        searchFields,
+        search,
         viewMode,
-        grouping,
-        layout,
-        selectedItem,
-        zoomLevel,
-        resolveId,
-        data,
-        setPreSelectionState,
     });
-    const handleCardClick = useCardSelection({
+    const layout = useViewerLayout(grouping, viewMode, zoomLevel, containerDimensions);
+    const { resolveId, handleCardClick, closeDetail } = usePivotViewerInteractions({
         data,
         isPanning,
         selectedItem,
@@ -193,29 +82,18 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         viewMode,
         layout,
         containerRef,
+        axisLabelsRef,
         spacerRef,
         containerDimensions,
         scrollPosition,
         preSelectionState,
         grouping,
         getItemId,
-        resolveId,
-        setZoomLevel,
-        setIsZooming,
-        setSelectedItem,
-        setPreSelectionState,
-    });
-    const closeDetail = useDetailPanelClose({
-        selectedItem,
-        preSelectionState,
-        zoomLevel,
-        viewMode,
-        layout,
-        containerRef,
-        containerDimensions,
-        grouping,
-        data,
-        resolveId,
+        filterState,
+        rangeFilterState,
+        search,
+        activeDimensionKey,
+        setAnimationMode,
         setZoomLevel,
         setIsZooming,
         setSelectedItem,
@@ -225,50 +103,12 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     const cardHeight = BASE_CARD_HEIGHT;
     const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);
     const hasFilters = Boolean(filters && filters.length > 0);
-    const activeFilterCount = Object.values(filterState).reduce((sum, vals) => sum + vals.size, 0) + Object.values(rangeFilterState).filter((r) => r !== null).length;
-    const viewerClassName = [
-        'pivot-viewer',
-        className,
-        hasFilters ? (filtersOpen ? 'filters-open' : 'filters-closed') : 'no-filters',
-        viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',
-    ]
-        .filter(Boolean)
-        .join(' ');
+    const activeFilterCount = countActiveFilters(filterState, rangeFilterState);
+    const viewerClassName = buildViewerClassName(className, hasFilters, filtersOpen, viewMode);
     useEffect(() => {
         setSelectedItem(null);
     }, [viewMode]);
-    const cssVariables = useMemo(() => {
-        const vars = {};
-        if (!colors)
-            return vars;
-        if (colors.primaryColor)
-            vars['--cratis-primary-color'] = colors.primaryColor;
-        if (colors.primaryColorText)
-            vars['--cratis-primary-color-text'] = colors.primaryColorText;
-        if (colors.primary500)
-            vars['--cratis-primary-500'] = colors.primary500;
-        if (colors.surfaceGround)
-            vars['--cratis-surface-ground'] = colors.surfaceGround;
-        if (colors.surfaceCard)
-            vars['--cratis-surface-card'] = colors.surfaceCard;
-        if (colors.surfaceSection)
-            vars['--cratis-surface-section'] = colors.surfaceSection;
-        if (colors.surfaceOverlay)
-            vars['--cratis-surface-overlay'] = colors.surfaceOverlay;
-        if (colors.surfaceBorder)
-            vars['--cratis-surface-border'] = colors.surfaceBorder;
-        if (colors.textColor)
-            vars['--cratis-text-color'] = colors.textColor;
-        if (colors.textColorSecondary)
-            vars['--cratis-text-color-secondary'] = colors.textColorSecondary;
-        if (colors.highlightBg)
-            vars['--cratis-highlight-bg'] = colors.highlightBg;
-        if (colors.maskbg)
-            vars['--cratis-maskbg'] = colors.maskbg;
-        if (colors.focusRing)
-            vars['--cratis-focus-ring'] = colors.focusRing;
-        return vars;
-    }, [colors]);
+    const cssVariables = useColorCssVariables(colors);
     return (jsxs("div", { className: viewerClassName, style: cssVariables, children: [jsx(FilterPanelContainer, { isOpen: filtersOpen && hasFilters, filterLabel: labels?.filters, searchPlaceholder: labels?.search, searchGroup: labels?.searchGroup, search: search, filterState: filterState, rangeFilterState: rangeFilterState, expandedFilterKey: expandedFilterKey, filterOptions: filterOptions, anchorRef: filterButtonRef, onClose: () => setFiltersOpen(false), onSearchChange: setSearch, onFilterToggle: handleToggleFilter, onFilterClear: handleClearFilter, onRangeChange: handleRangeChange, onExpandedFilterChange: setExpandedFilterKey }), jsxs("main", { className: 'pv-main', children: [jsx(ToolbarContainer, { hasFilters: hasFilters, filtersOpen: filtersOpen, filteredCount: visibleIds.length, viewMode: viewMode, zoomLevel: zoomLevel, activeDimensionKey: activeDimensionKey, dimensions: dimensions, activeFilterCount: activeFilterCount, title: title, labels: labels, onFiltersToggle: () => setFiltersOpen((prev) => !prev), onViewModeChange: setViewMode, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onZoomSlider: handleZoomSlider, onZoomReset: handleZoomReset, onZoomChange: handleZoomChange, onDimensionChange: setActiveDimensionKey, filterButtonRef: filterButtonRef }), jsx(PivotViewerMain, { data: data, ready: ready, isLoading: isLoading, loadingLabel: loadingLabel ?? labels?.loading ?? 'Loading…', viewportLabel: labels?.viewport ?? 'Card area', visibleIds: visibleIds, grouping: grouping, layout: layout, cardWidth: cardWidth, cardHeight: cardHeight, zoomLevel: zoomLevel, scrollPosition: scrollPosition, containerDimensions: containerDimensions, selectedItem: selectedItem, hoveredGroupIndex: hoveredGroupIndex, isZooming: isZooming, viewMode: viewMode, cardRenderer: cardRenderer, colorOverrides: colors, detailRenderer: detailRenderer, resolveId: resolveId, emptyContent: emptyContent, dimensionFilter: dimensionFilter, onCardClick: handleCardClick, onPanStart: handlePanStart, onPanMove: handlePanMove, onPanEnd: handlePanEnd, onGroupHover: setHoveredGroupIndex, onAxisLabelClick: handleAxisLabelClick, onCloseDetail: closeDetail, containerRef: containerRef, axisLabelsRef: axisLabelsRef, spacerRef: spacerRef })] })] }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"PivotViewer.js","sources":["../../../PivotViewer/PivotViewer.tsx"],"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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { PivotViewerProps } from './types';\nimport type { GroupingResult } from './engine/types';\nimport { usePivotEngine } from './hooks/usePivotEngine';\nimport { computeLayout } from './engine/layout';\nimport { useFilterState } from './hooks/useFilterState';\nimport { useDimensionState } from './hooks/useDimensionState';\nimport { useZoomState } from './hooks/useZoomState';\nimport {\n    BASE_CARD_WIDTH,\n    BASE_CARD_HEIGHT,\n    CARDS_PER_COLUMN,\n    GROUP_SPACING,\n} from './constants';\nimport { PivotViewerMain } from './components/PivotViewerMain';\nimport { FilterPanelContainer } from './components/FilterPanelContainer';\nimport { ToolbarContainer } from './components/ToolbarContainer';\nimport { usePanning, useWheelZoom, useZoomScrollAnchor, useFilterOptions } from './hooks';\nimport { useContainerDimensions } from './hooks/useContainerDimensions';\nimport type { ViewMode } from './components/Toolbar';\nimport { useFieldExtractors } from './hooks/useFieldExtractors';\nimport { presentGrouping } from './utils/presentGrouping';\nimport { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters';\nimport { filterVisibleIdsBySearch } from './utils/search';\nimport { resolveInternalItemIndex } from './utils/idResolution';\nimport { useCardSelection } from './hooks/useCardSelection';\nimport { useDetailPanelClose } from './hooks/useDetailPanelClose';\nimport { useScrollSync } from './hooks/useScrollSync';\nimport { useAnimationModeTracking } from './hooks/useAnimationModeTracking';\nimport { useViewModeScrollHandling } from './hooks/useViewModeScrollHandling';\n\n/**\n * A faceted, zoomable card-grid visualization inspired by Microsoft's PivotViewer.\n * Renders a large set of items as cards that can be grouped by any of a set of\n * declared dimensions, filtered through faceted panels, searched by text, and\n * zoomed/panned around freely. A detail pane shows the selected card's full\n * information.\n *\n * Backed by PIXI.js for high-performance rendering, so it gracefully handles\n * thousands of items. Consumers supply their own `cardRenderer` and\n * `detailRenderer` to control card and detail content; the component handles\n * grouping, filtering, panning, zooming, and selection internally.\n *\n * Use this for exploratory data analysis UIs over large collections (catalogs,\n * inventories, telemetry samples). For tabular display, use {@link DataPage}\n * or {@link DataTableForQuery}.\n *\n * @typeParam TItem - The item type contained in {@link PivotViewerProps.data}.\n * @param props - {@link PivotViewerProps}.\n */\nexport function PivotViewer<TItem extends object>({\n    data,\n    dimensions,\n    filters,\n    defaultDimensionKey,\n    cardRenderer,\n    detailRenderer,\n    getItemId,\n    searchFields,\n    title,\n    className,\n    emptyContent,\n    isLoading = false,\n    loadingLabel,\n    labels,\n    colors,\n}: PivotViewerProps<TItem>) {\n    // Refs\n    const containerRef = useRef<HTMLDivElement>(null!);\n    const filterButtonRef = useRef<HTMLButtonElement>(null!);\n    const axisLabelsRef = useRef<HTMLDivElement>(null!);\n    const spacerRef = useRef<HTMLDivElement>(null!);\n\n    // State\n    const [search, setSearch] = useState('');\n    const [viewMode, setViewMode] = useState<ViewMode>('collection');\n    const [filtersOpen, setFiltersOpen] = useState(false);\n    const [selectedItem, setSelectedItem] = useState<TItem | null>(null);\n    const [isZooming, setIsZooming] = useState(false);\n    const [visibleIds, setVisibleIds] = useState<Uint32Array>(new Uint32Array(0));\n    const [rawGrouping, setRawGrouping] = useState<GroupingResult>({ groups: [] });\n    const [hoveredGroupIndex, setHoveredGroupIndex] = useState<number | null>(null);\n    const [preSelectionState, setPreSelectionState] = useState<{\n        zoom: number;\n        scrollLeft: number;\n        scrollTop: number;\n    } | null>(null);\n    const [, setAnimationMode] = useState<'layout' | 'filter'>('layout');\n    const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });\n\n    // Filter hooks\n    const {\n        filterState,\n        rangeFilterState,\n        expandedFilterKey,\n        setExpandedFilterKey,\n        handleToggleFilter,\n        handleClearFilter,\n        handleRangeChange,\n    } = useFilterState(filters);\n\n    // Dimension hooks\n    const {\n        activeDimensionKey,\n        setActiveDimensionKey,\n        activeDimension,\n        dimensionFilter,\n        handleAxisLabelClick,\n    } = useDimensionState(dimensions, defaultDimensionKey);\n\n    // Zoom and pan hooks\n    const {\n        zoomLevel,\n        setZoomLevel,\n        handleZoomIn,\n        handleZoomOut,\n        handleZoomSlider,\n        handleZoomReset,\n        handleZoomChange,\n    } = useZoomState(1);\n\n    const { isPanning, handlePanStart, handlePanMove, handlePanEnd } = usePanning(\n        containerRef,\n        undefined,\n        setScrollPosition,\n    );\n\n    useWheelZoom(containerRef, zoomLevel, setZoomLevel);\n    useZoomScrollAnchor(containerRef, spacerRef, viewMode);\n\n    // Track container dimensions for responsive layout\n    const containerDimensions = useContainerDimensions(containerRef, isLoading);\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    }, []);\n\n    // Build field extractors for the columnar store\n    const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);\n\n    // Initialize the Web Worker engine\n    const {\n        ready,\n        applyFilters: engineApplyFilters,\n        computeGrouping,\n        sortIds,\n    } = usePivotEngine({\n        data,\n        fieldExtractors,\n        indexFields,\n    });\n\n    // Build filter specs from UI state\n    const currentFilters = useCurrentFilters(\n        filters,\n        filterState,\n        rangeFilterState,\n        dimensionFilter,\n        activeDimension,\n    );\n\n    const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);\n\n    // Apply filters, then narrow 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    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                const fallbackIds = new Uint32Array(data.length);\n                for (let i = 0; i < data.length; i++) {\n                    fallbackIds[i] = i;\n                }\n                ids = fallbackIds;\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    // Compute grouping. Every async branch ignores a result after its dependencies change, so an\n    // older worker response can never overwrite a newer filter/search/view selection.\n    useEffect(() => {\n        if (!ready || visibleIds.length === 0) {\n            setRawGrouping({ groups: [] });\n            return;\n        }\n\n        let cancelled = false;\n        if (viewMode === 'collection') {\n            // In collection mode, create a single group with all items.\n            if (activeDimensionKey) {\n                void sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {\n                    if (cancelled) return;\n                    setRawGrouping({\n                        groups: [\n                            {\n                                key: 'all',\n                                label: 'All Items',\n                                value: 'all',\n                                ids: sortedIds,\n                                count: sortedIds.length,\n                            },\n                        ],\n                    });\n                });\n            } else {\n                setRawGrouping({\n                    groups: [\n                        {\n                            key: 'all',\n                            label: 'All Items',\n                            value: 'all',\n                            ids: visibleIds,\n                            count: visibleIds.length,\n                        },\n                    ],\n                });\n            }\n        } else {\n            void computeGrouping(visibleIds, currentGroupBy).then((result) => {\n                if (!cancelled) setRawGrouping(result);\n            });\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    const grouping = useMemo(\n        () => viewMode === 'grouped' ? presentGrouping(rawGrouping, activeDimension, data) : rawGrouping,\n        [viewMode, rawGrouping, activeDimension, data],\n    );\n\n    // Compute layout\n    const layout = useMemo(() => {\n        // Calculate layout at base dimensions (zoom is applied as transform)\n        const cardWidth = BASE_CARD_WIDTH;\n        const cardHeight = BASE_CARD_HEIGHT;\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        const result = computeLayout(grouping, {\n            viewMode,\n            cardWidth,\n            cardHeight,\n            cardsPerColumn: CARDS_PER_COLUMN,\n            groupSpacing: GROUP_SPACING,\n            containerWidth,\n            containerHeight,\n        });\n\n        return result;\n    }, [\n        grouping,\n        viewMode,\n        zoomLevel,\n        containerDimensions.width,\n        containerDimensions.height,\n    ]);\n\n    const resolveId = useCallback(\n        (item: TItem) => resolveInternalItemIndex(data, item, getItemId),\n        [data, getItemId],\n    );\n\n    // Track animation mode changes\n    useAnimationModeTracking(\n        filterState,\n        rangeFilterState,\n        search,\n        activeDimensionKey,\n        viewMode,\n        setAnimationMode,\n    );\n\n    // Sync axis labels scroll with container scroll\n    useScrollSync(containerRef, axisLabelsRef, viewMode);\n\n    // Handle scroll positioning when switching view modes or grouping changes\n    useViewModeScrollHandling({\n        containerRef,\n        viewMode,\n        grouping,\n        layout,\n        selectedItem,\n        zoomLevel,\n        resolveId,\n        data,\n        setPreSelectionState,\n    });\n\n    // Handle card selection (click)\n    const handleCardClick = useCardSelection({\n        data,\n        isPanning,\n        selectedItem,\n        zoomLevel,\n        viewMode,\n        layout,\n        containerRef,\n        spacerRef,\n        containerDimensions,\n        scrollPosition,\n        preSelectionState,\n        grouping,\n        getItemId,\n        resolveId,\n        setZoomLevel,\n        setIsZooming,\n        setSelectedItem,\n        setPreSelectionState,\n    });\n\n    // Handle detail panel close\n    const closeDetail = useDetailPanelClose({\n        selectedItem,\n        preSelectionState,\n        zoomLevel,\n        viewMode,\n        layout,\n        containerRef,\n        containerDimensions,\n        grouping,\n        data,\n        resolveId,\n        setZoomLevel,\n        setIsZooming,\n        setSelectedItem,\n        setPreSelectionState,\n    });\n\n    // Use base card dimensions - zoom is applied as transform in canvas\n    const cardWidth = BASE_CARD_WIDTH;\n    const cardHeight = BASE_CARD_HEIGHT;\n\n    // Calculate filter options\n    const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);\n\n    const hasFilters = Boolean(filters && filters.length > 0);\n    const activeFilterCount =\n        Object.values(filterState).reduce(\n            (sum: number, vals) => sum + (vals as Set<string>).size,\n            0,\n        ) + Object.values(rangeFilterState).filter((r) => r !== null).length;\n\n    const viewerClassName = [\n        'pivot-viewer',\n        className,\n        hasFilters ? (filtersOpen ? 'filters-open' : 'filters-closed') : 'no-filters',\n        viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    // Deselect any selected card when switching between view modes\n    useEffect(() => {\n        setSelectedItem(null);\n    }, [viewMode]);\n\n    // Map provided color overrides to CSS variables understood by the component.\n    const cssVariables = useMemo(() => {\n        const vars: Record<string, string> = {};\n        if (!colors) return vars;\n        if (colors.primaryColor) vars['--cratis-primary-color'] = colors.primaryColor;\n        if (colors.primaryColorText)\n            vars['--cratis-primary-color-text'] = colors.primaryColorText;\n        if (colors.primary500) vars['--cratis-primary-500'] = colors.primary500;\n        if (colors.surfaceGround) vars['--cratis-surface-ground'] = colors.surfaceGround;\n        if (colors.surfaceCard) vars['--cratis-surface-card'] = colors.surfaceCard;\n        if (colors.surfaceSection)\n            vars['--cratis-surface-section'] = colors.surfaceSection;\n        if (colors.surfaceOverlay)\n            vars['--cratis-surface-overlay'] = colors.surfaceOverlay;\n        if (colors.surfaceBorder) vars['--cratis-surface-border'] = colors.surfaceBorder;\n        if (colors.textColor) vars['--cratis-text-color'] = colors.textColor;\n        if (colors.textColorSecondary)\n            vars['--cratis-text-color-secondary'] = colors.textColorSecondary;\n        if (colors.highlightBg) vars['--cratis-highlight-bg'] = colors.highlightBg;\n        if (colors.maskbg) vars['--cratis-maskbg'] = colors.maskbg;\n        if (colors.focusRing) vars['--cratis-focus-ring'] = colors.focusRing;\n        return vars;\n    }, [colors]);\n\n    return (\n        <div className={viewerClassName} style={cssVariables as React.CSSProperties}>\n            <FilterPanelContainer\n                isOpen={filtersOpen && hasFilters}\n                filterLabel={labels?.filters}\n                searchPlaceholder={labels?.search}\n                searchGroup={labels?.searchGroup}\n                search={search}\n                filterState={filterState}\n                rangeFilterState={rangeFilterState}\n                expandedFilterKey={expandedFilterKey}\n                filterOptions={filterOptions}\n                anchorRef={filterButtonRef}\n                onClose={() => setFiltersOpen(false)}\n                onSearchChange={setSearch}\n                onFilterToggle={handleToggleFilter}\n                onFilterClear={handleClearFilter}\n                onRangeChange={handleRangeChange}\n                onExpandedFilterChange={setExpandedFilterKey}\n            />\n\n            <main className='pv-main'>\n                <ToolbarContainer\n                    hasFilters={hasFilters}\n                    filtersOpen={filtersOpen}\n                    filteredCount={visibleIds.length}\n                    viewMode={viewMode}\n                    zoomLevel={zoomLevel}\n                    activeDimensionKey={activeDimensionKey}\n                    dimensions={dimensions}\n                    activeFilterCount={activeFilterCount}\n                    title={title}\n                    labels={labels}\n                    onFiltersToggle={() => setFiltersOpen((prev) => !prev)}\n                    onViewModeChange={setViewMode}\n                    onZoomIn={handleZoomIn}\n                    onZoomOut={handleZoomOut}\n                    onZoomSlider={handleZoomSlider}\n                    onZoomReset={handleZoomReset}\n                    onZoomChange={handleZoomChange}\n                    onDimensionChange={setActiveDimensionKey}\n                    filterButtonRef={filterButtonRef}\n                />\n\n                <PivotViewerMain\n                    data={data}\n                    ready={ready}\n                    isLoading={isLoading}\n                    loadingLabel={loadingLabel ?? labels?.loading ?? 'Loading…'}\n                    viewportLabel={labels?.viewport ?? 'Card area'}\n                    visibleIds={visibleIds}\n                    grouping={grouping}\n                    layout={layout}\n                    cardWidth={cardWidth}\n                    cardHeight={cardHeight}\n                    zoomLevel={zoomLevel}\n                    scrollPosition={scrollPosition}\n                    containerDimensions={containerDimensions}\n                    selectedItem={selectedItem}\n                    hoveredGroupIndex={hoveredGroupIndex}\n                    isZooming={isZooming}\n                    viewMode={viewMode}\n                    cardRenderer={cardRenderer}\n                    colorOverrides={colors}\n                    detailRenderer={detailRenderer}\n                    resolveId={resolveId}\n                    emptyContent={emptyContent}\n                    dimensionFilter={dimensionFilter}\n                    onCardClick={handleCardClick}\n                    onPanStart={handlePanStart as (e: React.MouseEvent) => void}\n                    onPanMove={handlePanMove as (e: React.MouseEvent) => void}\n                    onPanEnd={handlePanEnd}\n                    onGroupHover={setHoveredGroupIndex}\n                    onAxisLabelClick={handleAxisLabelClick}\n                    onCloseDetail={closeDetail}\n                    containerRef={containerRef}\n                    axisLabelsRef={axisLabelsRef}\n                    spacerRef={spacerRef}\n                />\n            </main>\n        </div>\n    );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PivotViewer.js","sources":["../../../PivotViewer/PivotViewer.tsx"],"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, useRef, useState } from 'react';\nimport type { PivotViewerProps } from './types';\nimport { useFilterState } from './hooks/useFilterState';\nimport { useDimensionState } from './hooks/useDimensionState';\nimport { useZoomState } from './hooks/useZoomState';\nimport { BASE_CARD_WIDTH, BASE_CARD_HEIGHT } from './constants';\nimport { PivotViewerMain } from './components/PivotViewerMain';\nimport { FilterPanelContainer } from './components/FilterPanelContainer';\nimport { ToolbarContainer } from './components/ToolbarContainer';\nimport { usePanning, useWheelZoom, useZoomScrollAnchor, useFilterOptions } from './hooks';\nimport { useContainerDimensions } from './hooks/useContainerDimensions';\nimport type { ViewMode } from './components/Toolbar';\nimport { useColorCssVariables } from './hooks/useColorCssVariables';\nimport { useViewerLayout } from './hooks/useViewerLayout';\nimport { useScrollPositionTracking } from './hooks/useScrollPositionTracking';\nimport { usePivotViewerGrouping } from './hooks/usePivotViewerGrouping';\nimport { usePivotViewerInteractions } from './hooks/usePivotViewerInteractions';\n\nfunction countActiveFilters(\n    filterState: Record<string, unknown>,\n    rangeFilterState: Record<string, unknown>,\n): number {\n    const selectionCount = Object.values(filterState).reduce(\n        (sum: number, vals) => sum + (vals as Set<string>).size,\n        0,\n    );\n    return selectionCount + Object.values(rangeFilterState).filter((r) => r !== null).length;\n}\n\nfunction filtersClassName(hasFilters: boolean, filtersOpen: boolean): string {\n    if (!hasFilters) return 'no-filters';\n    return filtersOpen ? 'filters-open' : 'filters-closed';\n}\n\nfunction buildViewerClassName(\n    className: string | undefined,\n    hasFilters: boolean,\n    filtersOpen: boolean,\n    viewMode: ViewMode,\n): string {\n    return [\n        'pivot-viewer',\n        className,\n        filtersClassName(hasFilters, filtersOpen),\n        viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',\n    ]\n        .filter(Boolean)\n        .join(' ');\n}\n\n/**\n * A faceted, zoomable card-grid visualization inspired by Microsoft's PivotViewer.\n * Renders a large set of items as cards that can be grouped by any of a set of\n * declared dimensions, filtered through faceted panels, searched by text, and\n * zoomed/panned around freely. A detail pane shows the selected card's full\n * information.\n *\n * Backed by PIXI.js for high-performance rendering, so it gracefully handles\n * thousands of items. Consumers supply their own `cardRenderer` and\n * `detailRenderer` to control card and detail content; the component handles\n * grouping, filtering, panning, zooming, and selection internally.\n *\n * Use this for exploratory data analysis UIs over large collections (catalogs,\n * inventories, telemetry samples). For tabular display, use {@link DataPage}\n * or {@link DataTableForQuery}.\n *\n * @typeParam TItem - The item type contained in {@link PivotViewerProps.data}.\n * @param props - {@link PivotViewerProps}.\n */\nexport function PivotViewer<TItem extends object>({\n    data,\n    dimensions,\n    filters,\n    defaultDimensionKey,\n    cardRenderer,\n    detailRenderer,\n    getItemId,\n    searchFields,\n    title,\n    className,\n    emptyContent,\n    isLoading = false,\n    loadingLabel,\n    labels,\n    colors,\n}: PivotViewerProps<TItem>) {\n    // Refs\n    const containerRef = useRef<HTMLDivElement>(null!);\n    const filterButtonRef = useRef<HTMLButtonElement>(null!);\n    const axisLabelsRef = useRef<HTMLDivElement>(null!);\n    const spacerRef = useRef<HTMLDivElement>(null!);\n\n    // State\n    const [search, setSearch] = useState('');\n    const [viewMode, setViewMode] = useState<ViewMode>('collection');\n    const [filtersOpen, setFiltersOpen] = useState(false);\n    const [selectedItem, setSelectedItem] = useState<TItem | null>(null);\n    const [isZooming, setIsZooming] = useState(false);\n    const [hoveredGroupIndex, setHoveredGroupIndex] = useState<number | null>(null);\n    const [preSelectionState, setPreSelectionState] = useState<{\n        zoom: number;\n        scrollLeft: number;\n        scrollTop: number;\n    } | null>(null);\n    const [, setAnimationMode] = useState<'layout' | 'filter'>('layout');\n    const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });\n\n    // Filter hooks\n    const {\n        filterState,\n        rangeFilterState,\n        expandedFilterKey,\n        setExpandedFilterKey,\n        handleToggleFilter,\n        handleClearFilter,\n        handleRangeChange,\n    } = useFilterState(filters);\n\n    // Dimension hooks\n    const {\n        activeDimensionKey,\n        setActiveDimensionKey,\n        activeDimension,\n        dimensionFilter,\n        handleAxisLabelClick,\n    } = useDimensionState(dimensions, defaultDimensionKey);\n\n    // Zoom and pan hooks\n    const {\n        zoomLevel,\n        setZoomLevel,\n        handleZoomIn,\n        handleZoomOut,\n        handleZoomSlider,\n        handleZoomReset,\n        handleZoomChange,\n    } = useZoomState(1);\n\n    const { isPanning, handlePanStart, handlePanMove, handlePanEnd } = usePanning(\n        containerRef,\n        undefined,\n        setScrollPosition,\n    );\n\n    useWheelZoom(containerRef, zoomLevel, setZoomLevel);\n    useZoomScrollAnchor(containerRef, spacerRef, viewMode);\n\n    // Track container dimensions for responsive layout\n    const containerDimensions = useContainerDimensions(containerRef, isLoading);\n\n    useScrollPositionTracking(containerRef, setScrollPosition);\n\n    const { ready, visibleIds, grouping } = usePivotViewerGrouping({\n        data,\n        dimensions,\n        filters,\n        filterState,\n        rangeFilterState,\n        dimensionFilter,\n        activeDimension,\n        activeDimensionKey,\n        searchFields,\n        search,\n        viewMode,\n    });\n\n    const layout = useViewerLayout(grouping, viewMode, zoomLevel, containerDimensions);\n\n    const { resolveId, handleCardClick, closeDetail } = usePivotViewerInteractions({\n        data,\n        isPanning,\n        selectedItem,\n        zoomLevel,\n        viewMode,\n        layout,\n        containerRef,\n        axisLabelsRef,\n        spacerRef,\n        containerDimensions,\n        scrollPosition,\n        preSelectionState,\n        grouping,\n        getItemId,\n        filterState,\n        rangeFilterState,\n        search,\n        activeDimensionKey,\n        setAnimationMode,\n        setZoomLevel,\n        setIsZooming,\n        setSelectedItem,\n        setPreSelectionState,\n    });\n\n    // Use base card dimensions - zoom is applied as transform in canvas\n    const cardWidth = BASE_CARD_WIDTH;\n    const cardHeight = BASE_CARD_HEIGHT;\n\n    // Calculate filter options\n    const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);\n\n    const hasFilters = Boolean(filters && filters.length > 0);\n    const activeFilterCount = countActiveFilters(filterState, rangeFilterState);\n    const viewerClassName = buildViewerClassName(className, hasFilters, filtersOpen, viewMode);\n\n    // Deselect any selected card when switching between view modes\n    useEffect(() => {\n        setSelectedItem(null);\n    }, [viewMode]);\n\n    const cssVariables = useColorCssVariables(colors);\n\n    return (\n        <div className={viewerClassName} style={cssVariables as React.CSSProperties}>\n            <FilterPanelContainer\n                isOpen={filtersOpen && hasFilters}\n                filterLabel={labels?.filters}\n                searchPlaceholder={labels?.search}\n                searchGroup={labels?.searchGroup}\n                search={search}\n                filterState={filterState}\n                rangeFilterState={rangeFilterState}\n                expandedFilterKey={expandedFilterKey}\n                filterOptions={filterOptions}\n                anchorRef={filterButtonRef}\n                onClose={() => setFiltersOpen(false)}\n                onSearchChange={setSearch}\n                onFilterToggle={handleToggleFilter}\n                onFilterClear={handleClearFilter}\n                onRangeChange={handleRangeChange}\n                onExpandedFilterChange={setExpandedFilterKey}\n            />\n\n            <main className='pv-main'>\n                <ToolbarContainer\n                    hasFilters={hasFilters}\n                    filtersOpen={filtersOpen}\n                    filteredCount={visibleIds.length}\n                    viewMode={viewMode}\n                    zoomLevel={zoomLevel}\n                    activeDimensionKey={activeDimensionKey}\n                    dimensions={dimensions}\n                    activeFilterCount={activeFilterCount}\n                    title={title}\n                    labels={labels}\n                    onFiltersToggle={() => setFiltersOpen((prev) => !prev)}\n                    onViewModeChange={setViewMode}\n                    onZoomIn={handleZoomIn}\n                    onZoomOut={handleZoomOut}\n                    onZoomSlider={handleZoomSlider}\n                    onZoomReset={handleZoomReset}\n                    onZoomChange={handleZoomChange}\n                    onDimensionChange={setActiveDimensionKey}\n                    filterButtonRef={filterButtonRef}\n                />\n\n                <PivotViewerMain\n                    data={data}\n                    ready={ready}\n                    isLoading={isLoading}\n                    loadingLabel={loadingLabel ?? labels?.loading ?? 'Loading…'}\n                    viewportLabel={labels?.viewport ?? 'Card area'}\n                    visibleIds={visibleIds}\n                    grouping={grouping}\n                    layout={layout}\n                    cardWidth={cardWidth}\n                    cardHeight={cardHeight}\n                    zoomLevel={zoomLevel}\n                    scrollPosition={scrollPosition}\n                    containerDimensions={containerDimensions}\n                    selectedItem={selectedItem}\n                    hoveredGroupIndex={hoveredGroupIndex}\n                    isZooming={isZooming}\n                    viewMode={viewMode}\n                    cardRenderer={cardRenderer}\n                    colorOverrides={colors}\n                    detailRenderer={detailRenderer}\n                    resolveId={resolveId}\n                    emptyContent={emptyContent}\n                    dimensionFilter={dimensionFilter}\n                    onCardClick={handleCardClick}\n                    onPanStart={handlePanStart as (e: React.MouseEvent) => void}\n                    onPanMove={handlePanMove as (e: React.MouseEvent) => void}\n                    onPanEnd={handlePanEnd}\n                    onGroupHover={setHoveredGroupIndex}\n                    onAxisLabelClick={handleAxisLabelClick}\n                    onCloseDetail={closeDetail}\n                    containerRef={containerRef}\n                    axisLabelsRef={axisLabelsRef}\n                    spacerRef={spacerRef}\n                />\n            </main>\n        </div>\n    );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/PivotViewer/components/pivot/sprites.js

@@ -1,5 +1,5 @@
 import * as PIXI from 'pixi.js';
-import { CARD_RADIUS, CARD_GAP, CARD_PADDING } from './constants.js';
+import { CARD_RADIUS, CARD_PADDING, CARD_GAP } from './constants.js';
 import { ellipsizeLine, ellipsizeBlock } from './ellipsize.js';
 
 const VALUES_INSET = 65;

package/dist/esm/PivotViewer/components/pivot/syncScrollSprites.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutResult } from '../../engine/types.js';
-import { type SyncParams } from './visibility.js';
+import { type SyncParams, type SyncResult } from './visibility.js';
 /** Keep the scroll path's transition layout in sync with the normal render path. */
-export declare function syncScrollSprites<TItem>(params: Omit<SyncParams<TItem>, 'prevLayout'>, previousLayout: LayoutResult | null): void;
+export declare function syncScrollSprites<TItem>(params: Omit<SyncParams<TItem>, 'prevLayout'>, previousLayout: LayoutResult | null): SyncResult;
 //# sourceMappingURL=syncScrollSprites.d.ts.map

package/dist/esm/PivotViewer/components/pivot/syncScrollSprites.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"syncScrollSprites.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/syncScrollSprites.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAoB,CAAC;AACvD,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,iBAAc,CAAC;AAEtE,oFAAoF;AACpF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,EAAE,cAAc,EAAE,YAAY,GAAG,IAAI,QAE1H"}
+{"version":3,"file":"syncScrollSprites.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/syncScrollSprites.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAoB,CAAC;AACvD,OAAO,EAAyB,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAc,CAAC;AAEvF,oFAAoF;AACpF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,EAAE,cAAc,EAAE,YAAY,GAAG,IAAI,GAAG,UAAU,CAEvI"}

package/dist/esm/PivotViewer/components/pivot/syncScrollSprites.js

@@ -1,7 +1,7 @@
 import { syncSpritesToViewport } from './visibility.js';
 
 function syncScrollSprites(params, previousLayout) {
-    syncSpritesToViewport({ ...params, prevLayout: previousLayout });
+    return syncSpritesToViewport({ ...params, prevLayout: previousLayout });
 }
 
 export { syncScrollSprites };

package/dist/esm/PivotViewer/components/pivot/syncScrollSprites.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncScrollSprites.js","sources":["../../../../../PivotViewer/components/pivot/syncScrollSprites.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';\nimport { syncSpritesToViewport, type SyncParams } from './visibility';\n\n/** Keep the scroll path's transition layout in sync with the normal render path. */\nexport function syncScrollSprites<TItem>(params: Omit<SyncParams<TItem>, 'prevLayout'>, previousLayout: LayoutResult | null) {\n    syncSpritesToViewport({ ...params, prevLayout: previousLayout });\n}\n"],"names":[],"mappings":";;AAOM,SAAU,iBAAiB,CAAQ,MAA6C,EAAE,cAAmC,EAAA;IACvH,qBAAqB,CAAC,EAAE,GAAG,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC;AACpE;;"}
+{"version":3,"file":"syncScrollSprites.js","sources":["../../../../../PivotViewer/components/pivot/syncScrollSprites.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';\nimport { syncSpritesToViewport, type SyncParams, type SyncResult } from './visibility';\n\n/** Keep the scroll path's transition layout in sync with the normal render path. */\nexport function syncScrollSprites<TItem>(params: Omit<SyncParams<TItem>, 'prevLayout'>, previousLayout: LayoutResult | null): SyncResult {\n    return syncSpritesToViewport({ ...params, prevLayout: previousLayout });\n}\n"],"names":[],"mappings":";;AAOM,SAAU,iBAAiB,CAAQ,MAA6C,EAAE,cAAmC,EAAA;IACvH,OAAO,qBAAqB,CAAC,EAAE,GAAG,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC;AAC3E;;"}

package/dist/esm/PivotViewer/components/pivot/usePivotScrollSync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePivotScrollSync.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotScrollSync.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,+EAOpD,kBAAkB,CAAC,KAAK,CAAC,SAoK3B,CAAC"}
+{"version":3,"file":"usePivotScrollSync.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotScrollSync.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,+EAOpD,kBAAkB,CAAC,KAAK,CAAC,SA6K3B,CAAC"}

package/dist/esm/PivotViewer/components/pivot/usePivotScrollSync.js

@@ -17,10 +17,11 @@ const usePivotScrollSync = ({ props, stage, transition, cardColorsRef, onCardCli
         const container = parentContainerRef.current;
         const app = appRef.current;
         const pendingRef = { scheduled: false };
+        let frameHandle = 0;
         const processScroll = () => {
             pendingRef.scheduled = false;
             try {
-                syncScrollSprites({
+                const { pending } = syncScrollSprites({
                     root: rootRef.current,
                     groupsContainer: groupsContainerRef.current,
                     container: parentContainerRef.current,
@@ -47,6 +48,10 @@ const usePivotScrollSync = ({ props, stage, transition, cardColorsRef, onCardCli
                 prevScrollLeftRef.current = container.scrollLeft || 0;
                 needsRenderRef.current = true;
                 app.renderer?.render(app.stage);
+                if (pending) {
+                    pendingRef.scheduled = true;
+                    frameHandle = requestAnimationFrame(processScroll);
+                }
             }
             catch (e) {
                 console.error('[PivotCanvas] processScroll error', e);
@@ -55,12 +60,13 @@ const usePivotScrollSync = ({ props, stage, transition, cardColorsRef, onCardCli
         const onScroll = () => {
             if (!pendingRef.scheduled) {
                 pendingRef.scheduled = true;
-                requestAnimationFrame(processScroll);
+                frameHandle = requestAnimationFrame(processScroll);
             }
         };
         container.addEventListener('scroll', onScroll, { passive: true });
         return () => {
             container.removeEventListener('scroll', onScroll);
+            cancelAnimationFrame(frameHandle);
         };
     }, [
         pixiReady,

package/dist/esm/PivotViewer/components/pivot/usePivotScrollSync.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePivotScrollSync.js","sources":["../../../../../PivotViewer/components/pivot/usePivotScrollSync.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 { asReactMouseEvent } from './asReactMouseEvent';\nimport type { CardSprite } from './constants';\nimport {\n    createCardSprite as createCardSpriteExternal,\n    updateCardContent as updateCardContentExternal,\n} from './sprites';\nimport { syncScrollSprites } from './syncScrollSprites';\nimport type { PivotRenderContext } from './PivotRenderContext';\n\n/**\n * Syncs the card sprites once per animation frame while the viewport scrolls, natively or\n * programmatically.\n * @param context The props, stage, transition state and colors.\n */\nexport const usePivotScrollSync = <TItem extends object>({\n    props,\n    stage,\n    transition,\n    cardColorsRef,\n    onCardClickRef,\n    onPanStartRef,\n}: PivotRenderContext<TItem>) => {\n    const {\n        items,\n        layout,\n        grouping,\n        visibleIds,\n        cardWidth,\n        cardHeight,\n        zoomLevel,\n        panX,\n        panY,\n        viewportWidth,\n        viewportHeight,\n        selectedId,\n        viewMode,\n        cardRenderer,\n        resolveId,\n        onPanStart,\n        onCardClick,\n        containerRef: parentContainerRef,\n    } = props;\n    const { rootRef, groupsContainerRef, spritesRef, appRef, needsRenderRef, pixiReady } =\n        stage;\n    const {\n        isViewTransitionRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n        prevScrollTopRef,\n        prevScrollLeftRef,\n    } = transition;\n\n    // Listen to native scroll events on the parent container so we update the\n    // Pixi world immediately when the user scrolls (native scrollbar or\n    // programmatic). This ensures `syncSpritesToViewport` runs on scroll and\n    // creates/destroys sprites as the viewport moves.\n    useEffect(() => {\n        if (\n            !pixiReady ||\n            !parentContainerRef ||\n            !parentContainerRef.current ||\n            !appRef.current ||\n            !rootRef.current\n        )\n            return;\n\n        const container = parentContainerRef.current;\n        const app = appRef.current;\n\n        // rAF-batched scroll handling: process scroll once per animation frame to avoid heavy synchronous work inside\n        // the scroll event which causes jank and de-synchronisation between the\n        // compositor and Pixi render updates.\n        const pendingRef = { scheduled: false } as { scheduled: boolean };\n\n        const processScroll = () => {\n            pendingRef.scheduled = false;\n            try {\n                // Note: We delegate root/groups container positioning to syncSpritesToViewport\n                // because it encapsulates the logic for conditional vertical alignment (offsetY)\n                // in different view modes. Manually setting position here would overwrite that logic.\n\n                syncScrollSprites(\n                    {\n                        root: rootRef.current,\n                        groupsContainer: groupsContainerRef.current,\n                        container: parentContainerRef.current,\n                        sprites: spritesRef.current,\n                        layout,\n                        visibleIds,\n                        items,\n                        cardWidth,\n                        cardHeight,\n                        panX,\n                        panY,\n                        zoomLevel,\n                        viewportWidth,\n                        viewportHeight,\n                        createCardSprite: (id: string | number, x: number, y: number) =>\n                            createCardSpriteExternal(\n                                id,\n                                x,\n                                y,\n                                items as TItem[],\n                                (item, e, id) => onCardClickRef.current(item, e, id),\n                                (e) => onPanStartRef.current(asReactMouseEvent(e)),\n                                cardWidth,\n                                cardHeight,\n                                cardColorsRef.current,\n                                cardRenderer,\n                                resolveId,\n                            ),\n                        updateCardContent: (sprite: CardSprite, item: TItem) =>\n                            updateCardContentExternal(\n                                sprite,\n                                item,\n                                selectedId,\n                                cardWidth,\n                                cardHeight,\n                                cardColorsRef.current,\n                                cardRenderer,\n                            ),\n                        isViewTransition: isViewTransitionRef.current,\n                        viewMode,\n                        transitionSeenIds: transitionSeenIdsRef.current,\n                        prevScrollTop: prevScrollTopRef.current,\n                        prevScrollLeft: prevScrollLeftRef.current,\n                    },\n                    transitionLayoutRef.current,\n                );\n\n                // Update previous scroll position for next frame\n                prevScrollTopRef.current = container.scrollTop || 0;\n                prevScrollLeftRef.current = container.scrollLeft || 0;\n                needsRenderRef.current = true;\n                app.renderer?.render(app.stage);\n            } catch (e) {\n                console.error('[PivotCanvas] processScroll error', e);\n            }\n        };\n\n        const onScroll = () => {\n            // schedule the work for the next animation frame\n            if (!pendingRef.scheduled) {\n                pendingRef.scheduled = true;\n                requestAnimationFrame(processScroll);\n            }\n        };\n\n        container.addEventListener('scroll', onScroll, { passive: true });\n\n        return () => {\n            container.removeEventListener('scroll', onScroll);\n        };\n    }, [\n        pixiReady,\n        layout,\n        visibleIds,\n        items,\n        cardWidth,\n        cardHeight,\n        zoomLevel,\n        viewportWidth,\n        viewportHeight,\n        panX,\n        panY,\n        grouping,\n        viewMode,\n        selectedId,\n        onCardClick,\n        onPanStart,\n        appRef,\n        cardColorsRef,\n        groupsContainerRef,\n        isViewTransitionRef,\n        needsRenderRef,\n        onCardClickRef,\n        onPanStartRef,\n        parentContainerRef,\n        prevScrollLeftRef,\n        prevScrollTopRef,\n        rootRef,\n        spritesRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n    ]);\n};\n"],"names":["createCardSpriteExternal","updateCardContentExternal"],"mappings":"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"}
+{"version":3,"file":"usePivotScrollSync.js","sources":["../../../../../PivotViewer/components/pivot/usePivotScrollSync.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 { asReactMouseEvent } from './asReactMouseEvent';\nimport type { CardSprite } from './constants';\nimport {\n    createCardSprite as createCardSpriteExternal,\n    updateCardContent as updateCardContentExternal,\n} from './sprites';\nimport { syncScrollSprites } from './syncScrollSprites';\nimport type { PivotRenderContext } from './PivotRenderContext';\n\n/**\n * Syncs the card sprites once per animation frame while the viewport scrolls, natively or\n * programmatically.\n * @param context The props, stage, transition state and colors.\n */\nexport const usePivotScrollSync = <TItem extends object>({\n    props,\n    stage,\n    transition,\n    cardColorsRef,\n    onCardClickRef,\n    onPanStartRef,\n}: PivotRenderContext<TItem>) => {\n    const {\n        items,\n        layout,\n        grouping,\n        visibleIds,\n        cardWidth,\n        cardHeight,\n        zoomLevel,\n        panX,\n        panY,\n        viewportWidth,\n        viewportHeight,\n        selectedId,\n        viewMode,\n        cardRenderer,\n        resolveId,\n        onPanStart,\n        onCardClick,\n        containerRef: parentContainerRef,\n    } = props;\n    const { rootRef, groupsContainerRef, spritesRef, appRef, needsRenderRef, pixiReady } =\n        stage;\n    const {\n        isViewTransitionRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n        prevScrollTopRef,\n        prevScrollLeftRef,\n    } = transition;\n\n    // Listen to native scroll events on the parent container so we update the\n    // Pixi world immediately when the user scrolls (native scrollbar or\n    // programmatic). This ensures `syncSpritesToViewport` runs on scroll and\n    // creates/destroys sprites as the viewport moves.\n    useEffect(() => {\n        if (\n            !pixiReady ||\n            !parentContainerRef ||\n            !parentContainerRef.current ||\n            !appRef.current ||\n            !rootRef.current\n        )\n            return;\n\n        const container = parentContainerRef.current;\n        const app = appRef.current;\n\n        // rAF-batched scroll handling: process scroll once per animation frame to avoid heavy synchronous work inside\n        // the scroll event which causes jank and de-synchronisation between the\n        // compositor and Pixi render updates.\n        const pendingRef = { scheduled: false } as { scheduled: boolean };\n        let frameHandle = 0;\n\n        const processScroll = () => {\n            pendingRef.scheduled = false;\n            try {\n                // Note: We delegate root/groups container positioning to syncSpritesToViewport\n                // because it encapsulates the logic for conditional vertical alignment (offsetY)\n                // in different view modes. Manually setting position here would overwrite that logic.\n\n                const { pending } = syncScrollSprites(\n                    {\n                        root: rootRef.current,\n                        groupsContainer: groupsContainerRef.current,\n                        container: parentContainerRef.current,\n                        sprites: spritesRef.current,\n                        layout,\n                        visibleIds,\n                        items,\n                        cardWidth,\n                        cardHeight,\n                        panX,\n                        panY,\n                        zoomLevel,\n                        viewportWidth,\n                        viewportHeight,\n                        createCardSprite: (id: string | number, x: number, y: number) =>\n                            createCardSpriteExternal(\n                                id,\n                                x,\n                                y,\n                                items as TItem[],\n                                (item, e, id) => onCardClickRef.current(item, e, id),\n                                (e) => onPanStartRef.current(asReactMouseEvent(e)),\n                                cardWidth,\n                                cardHeight,\n                                cardColorsRef.current,\n                                cardRenderer,\n                                resolveId,\n                            ),\n                        updateCardContent: (sprite: CardSprite, item: TItem) =>\n                            updateCardContentExternal(\n                                sprite,\n                                item,\n                                selectedId,\n                                cardWidth,\n                                cardHeight,\n                                cardColorsRef.current,\n                                cardRenderer,\n                            ),\n                        isViewTransition: isViewTransitionRef.current,\n                        viewMode,\n                        transitionSeenIds: transitionSeenIdsRef.current,\n                        prevScrollTop: prevScrollTopRef.current,\n                        prevScrollLeft: prevScrollLeftRef.current,\n                    },\n                    transitionLayoutRef.current,\n                );\n\n                // Update previous scroll position for next frame\n                prevScrollTopRef.current = container.scrollTop || 0;\n                prevScrollLeftRef.current = container.scrollLeft || 0;\n                needsRenderRef.current = true;\n                app.renderer?.render(app.stage);\n\n                // Creation was deferred by the per-frame budget: continue on the next frame\n                // until the buffer is filled.\n                if (pending) {\n                    pendingRef.scheduled = true;\n                    frameHandle = requestAnimationFrame(processScroll);\n                }\n            } catch (e) {\n                console.error('[PivotCanvas] processScroll error', e);\n            }\n        };\n\n        const onScroll = () => {\n            // schedule the work for the next animation frame\n            if (!pendingRef.scheduled) {\n                pendingRef.scheduled = true;\n                frameHandle = requestAnimationFrame(processScroll);\n            }\n        };\n\n        container.addEventListener('scroll', onScroll, { passive: true });\n\n        return () => {\n            container.removeEventListener('scroll', onScroll);\n            cancelAnimationFrame(frameHandle);\n        };\n    }, [\n        pixiReady,\n        layout,\n        visibleIds,\n        items,\n        cardWidth,\n        cardHeight,\n        zoomLevel,\n        viewportWidth,\n        viewportHeight,\n        panX,\n        panY,\n        grouping,\n        viewMode,\n        selectedId,\n        onCardClick,\n        onPanStart,\n        appRef,\n        cardColorsRef,\n        groupsContainerRef,\n        isViewTransitionRef,\n        needsRenderRef,\n        onCardClickRef,\n        onPanStartRef,\n        parentContainerRef,\n        prevScrollLeftRef,\n        prevScrollTopRef,\n        rootRef,\n        spritesRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n    ]);\n};\n"],"names":["createCardSpriteExternal","updateCardContentExternal"],"mappings":"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"}

package/dist/esm/PivotViewer/components/pivot/usePivotSpriteSync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePivotSpriteSync.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotSpriteSync.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,+EAOpD,kBAAkB,CAAC,KAAK,CAAC,SAuM3B,CAAC"}
+{"version":3,"file":"usePivotSpriteSync.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotSpriteSync.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,+EAOpD,kBAAkB,CAAC,KAAK,CAAC,SAkO3B,CAAC"}