@cratis/components 4.21.0 → 4.22.0

package/dist/esm/PivotViewer/components/PivotCanvas.js

@@ -1,449 +1,50 @@
-import { useRef, useState, useMemo, useEffect } from 'react';
-import * as PIXI from 'pixi.js';
-import { createCssColorResolver, observeColorEnvironment, resolveCardColors } from './pivot/colorResolver.js';
-import { clearSpritePool, updateCardContent, createCardSprite } from './pivot/sprites.js';
-import { syncSpritesToViewport } from './pivot/visibility.js';
-import { syncScrollSprites } from './pivot/syncScrollSprites.js';
-import { updateGroupBackgrounds, updateHighlight } from './pivot/groups.js';
-import { startAnimationLoop } from './pivot/animation.js';
-import { DEFAULT_COLORS } from './pivot/constants.js';
+import { useRef, useEffect } from 'react';
+import { usePivotCardColors } from './pivot/usePivotCardColors.js';
+import { usePivotGroupBackgrounds } from './pivot/usePivotGroupBackgrounds.js';
+import { usePivotScrollSync } from './pivot/usePivotScrollSync.js';
+import { usePivotSelectionHighlight } from './pivot/usePivotSelectionHighlight.js';
+import { usePivotSpriteSync } from './pivot/usePivotSpriteSync.js';
+import { usePivotStage } from './pivot/usePivotStage.js';
+import { usePivotTransitionState } from './pivot/usePivotTransitionState.js';
 
-const asReactMouseEvent = (event) => {
-    return event;
-};
-function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeight, zoomLevel, panX, panY, viewportWidth, viewportHeight, selectedId, hoveredGroupIndex, isZooming: _isZooming = false, resolveId: _resolveId, onCardClick, onPanStart, onPanMove, onPanEnd, viewMode, cardRenderer, colorOverrides, containerRef, }) {
-    const parentContainerRef = containerRef;
-    const resolveId = _resolveId;
-    const canvasRef = useRef(null);
-    const spacerRef = useRef(null);
-    const appRef = useRef(null);
-    const rootRef = useRef(null);
-    const groupsContainerRef = useRef(null);
-    const spritesRef = useRef(new Map());
-    const animationFrameRef = useRef(0);
-    const mountedRef = useRef(true);
-    const [pixiReady, setPixiReady] = useState(false);
-    const [colorRevision, setColorRevision] = useState(0);
-    const isAnimatingRef = useRef(false);
+function PivotCanvas(props) {
+    const { panX, panY, viewportWidth, viewportHeight, viewMode, colorOverrides, onPanStart, onPanMove, onPanEnd, onCardClick, } = props;
+    const parentContainerRef = props.containerRef;
     const needsRenderRef = useRef(false);
-    const initializingRef = useRef(false);
-    const isViewTransitionRef = useRef(false);
-    const lastViewChangeTimeRef = useRef(0);
-    const previousViewModeRef = useRef(viewMode);
-    const prevLayoutRef = useRef(null);
-    const transitionLayoutRef = useRef(null);
-    const transitionSeenIdsRef = useRef(new Set());
-    const prevGroupingRef = useRef(null);
-    const prevScrollTopRef = useRef(0);
-    const prevScrollLeftRef = useRef(0);
-    const cardColorsRef = useRef(DEFAULT_COLORS);
-    const cssColorResolver = useMemo(() => createCssColorResolver(), []);
+    const transition = usePivotTransitionState(viewMode, { x: panX, y: panY });
     const onPanStartRef = useRef(onPanStart);
     const onPanMoveRef = useRef(onPanMove);
     const onPanEndRef = useRef(onPanEnd);
     const onCardClickRef = useRef(onCardClick);
-    const prevPanRef = useRef({ x: panX, y: panY });
     useEffect(() => {
+        onPanStartRef.current = onPanStart;
         onPanMoveRef.current = onPanMove;
         onPanEndRef.current = onPanEnd;
         onCardClickRef.current = onCardClick;
     }, [onPanStart, onPanMove, onPanEnd, onCardClick]);
-    useEffect(() => {
-        const element = parentContainerRef.current;
-        if (!element)
-            return;
-        const refreshColors = () => {
-            cardColorsRef.current = resolveCardColors(cssColorResolver, element);
-            needsRenderRef.current = true;
-            setColorRevision((revision) => revision + 1);
-        };
-        refreshColors();
-        return observeColorEnvironment(element, refreshColors);
-    }, [cssColorResolver, parentContainerRef, colorOverrides]);
-    useEffect(() => {
-        mountedRef.current = true;
-        if (!parentContainerRef || !parentContainerRef.current) {
-            return;
-        }
-        if (initializingRef.current || appRef.current) {
-            return;
-        }
-        initializingRef.current = true;
-        let app = null;
-        (async () => {
-            try {
-                const options = {
-                    backgroundAlpha: 0,
-                    antialias: false,
-                    autoStart: false,
-                    autoDensity: true,
-                    resolution: window.devicePixelRatio || 1,
-                    width: viewportWidth > 0 ? viewportWidth : 800,
-                    height: viewportHeight > 0 ? viewportHeight : 600,
-                };
-                app = new PIXI.Application();
-                await app.init(options);
-                if (!mountedRef.current || !parentContainerRef.current) {
-                    if (app && typeof app.destroy === 'function')
-                        app.destroy(true, { children: true });
-                    initializingRef.current = false;
-                    return;
-                }
-                appRef.current = app;
-                const groupsContainer = new PIXI.Container();
-                groupsContainerRef.current = groupsContainer;
-                app.stage.addChild(groupsContainer);
-                const root = new PIXI.Container();
-                rootRef.current = root;
-                app.stage.addChild(root);
-                const canvasEl = app.canvas;
-                const overlayParent = parentContainerRef.current.parentElement ??
-                    parentContainerRef.current;
-                if (canvasEl) {
-                    if (canvasEl.parentElement) {
-                        canvasEl.parentElement.removeChild(canvasEl);
-                    }
-                    overlayParent.appendChild(canvasEl);
-                    canvasRef.current = canvasEl;
-                }
-                else {
-                    console.error('PivotCanvas: Could not find canvas element from Pixi application');
-                }
-                if (canvasRef.current && parentContainerRef.current) {
-                    const parentBounds = parentContainerRef.current.getBoundingClientRect();
-                    void parentBounds;
-                    canvasRef.current.style.position = 'absolute';
-                    const offsetLeft = parentContainerRef.current.offsetLeft;
-                    const offsetTop = parentContainerRef.current.offsetTop;
-                    canvasRef.current.style.left = `${offsetLeft}px`;
-                    canvasRef.current.style.top = `${offsetTop}px`;
-                    canvasRef.current.style.width = `${parentContainerRef.current.clientWidth}px`;
-                    canvasRef.current.style.height = `${parentContainerRef.current.clientHeight}px`;
-                    canvasRef.current.style.zIndex = '0';
-                    canvasRef.current.style.pointerEvents = 'none';
-                }
-                if (canvasRef.current) {
-                    canvasRef.current.style.display = 'block';
-                    canvasRef.current.style.pointerEvents = 'none';
-                }
-                app.stage.eventMode = 'static';
-                app.stage.hitArea = new PIXI.Rectangle(0, 0, viewportWidth, viewportHeight);
-                app.stage.on('pointerdown', (e) => {
-                    onPanStartRef.current(asReactMouseEvent(e.nativeEvent));
-                });
-                app.stage.on('globalpointermove', (e) => {
-                    onPanMoveRef.current(asReactMouseEvent(e.nativeEvent));
-                });
-                app.stage.on('globalpointerup', () => {
-                    onPanEndRef.current();
-                });
-                const parentEl = parentContainerRef.current;
-                if (parentEl) {
-                }
-                if (viewportWidth > 0 && viewportHeight > 0) {
-                    app.renderer?.resize(viewportWidth, viewportHeight);
-                }
-                setPixiReady(true);
-                initializingRef.current = false;
-                needsRenderRef.current = true;
-                app.renderer?.render(app.stage);
-            }
-            catch (error) {
-                console.error('Failed to initialize Pixi.js:', error);
-                initializingRef.current = false;
-            }
-        })();
-        return () => {
-            mountedRef.current = false;
-            setPixiReady(false);
-            cancelAnimationFrame(animationFrameRef.current);
-            if (appRef.current && typeof appRef.current.destroy === 'function') {
-                appRef.current.destroy(true, { children: true });
-                appRef.current = null;
-                rootRef.current = null;
-            }
-            clearSpritePool();
-            spritesRef.current.clear();
-            try {
-                const parentEl = parentContainerRef.current;
-                if (parentEl) {
-                }
-            }
-            catch (e) {
-            }
-            try {
-                if (canvasRef.current && canvasRef.current.parentElement) {
-                    canvasRef.current.parentElement.removeChild(canvasRef.current);
-                }
-            }
-            catch (e) {
-            }
-        };
-    }, []);
-    useEffect(() => {
-        if (!parentContainerRef ||
-            !parentContainerRef.current ||
-            !appRef.current ||
-            !pixiReady)
-            return;
-        const container = parentContainerRef.current;
-        const app = appRef.current;
-        let resizeTimeout;
-        const handleResize = () => {
-            if (viewportWidth > 0 && viewportHeight > 0) {
-                app.renderer?.resize(viewportWidth, viewportHeight);
-                app.stage.hitArea = new PIXI.Rectangle(0, 0, viewportWidth, viewportHeight);
-                if (canvasRef.current && parentContainerRef.current) {
-                    canvasRef.current.style.width = `${parentContainerRef.current.clientWidth}px`;
-                    canvasRef.current.style.height = `${parentContainerRef.current.clientHeight}px`;
-                    canvasRef.current.style.left = `${parentContainerRef.current.offsetLeft}px`;
-                    canvasRef.current.style.top = `${parentContainerRef.current.offsetTop}px`;
-                }
-            }
-        };
-        const debouncedResize = () => {
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(handleResize, 150);
-        };
-        handleResize();
-        const resizeObserver = new ResizeObserver(debouncedResize);
-        resizeObserver.observe(container);
-        return () => {
-            clearTimeout(resizeTimeout);
-            resizeObserver.disconnect();
-        };
-    }, [pixiReady, viewportWidth, viewportHeight]);
-    useEffect(() => {
-        if (!groupsContainerRef.current || !parentContainerRef.current || !pixiReady)
-            return;
-        updateGroupBackgrounds(groupsContainerRef.current, parentContainerRef.current, grouping, layout, zoomLevel, cardColorsRef.current, viewMode);
-        needsRenderRef.current = true;
-        appRef.current?.renderer?.render(appRef.current.stage);
-    }, [grouping, layout, zoomLevel, viewMode, pixiReady, colorOverrides, colorRevision]);
-    useEffect(() => {
-        const gc = groupsContainerRef.current;
-        const app = appRef.current;
-        if (!gc || !app)
-            return;
-        const target = viewMode === 'grouped' ? 1 : 0;
-        const start = typeof gc.alpha === 'number' ? gc.alpha : 1;
-        const duration = 200;
-        if (Math.abs(start - target) < 0.01) {
-            gc.alpha = target;
-            return;
-        }
-        const t0 = performance.now();
-        const step = () => {
-            const u = Math.min(1, (performance.now() - t0) / duration);
-            const eased = u * (2 - u);
-            gc.alpha = start + (target - start) * eased;
-            app.renderer?.render(app.stage);
-            if (u < 1)
-                requestAnimationFrame(step);
-        };
-        requestAnimationFrame(step);
-    }, [viewMode]);
-    useEffect(() => {
-        if (!rootRef.current || !parentContainerRef.current || !pixiReady) {
-            return;
-        }
-        const viewModeChanged = previousViewModeRef.current !== viewMode;
-        const groupingChanged = prevGroupingRef.current !== grouping;
-        const layoutChanged = prevLayoutRef.current !== layout;
-        if (viewModeChanged || groupingChanged || layoutChanged) {
-            transitionSeenIdsRef.current.clear();
-            if (layoutChanged)
-                transitionLayoutRef.current = prevLayoutRef.current;
-            isViewTransitionRef.current = true;
-            lastViewChangeTimeRef.current = Date.now();
-            previousViewModeRef.current = viewMode;
-            prevGroupingRef.current = grouping;
-        }
-        if (spacerRef.current) {
-            const spacer = spacerRef.current;
-            const worldWidth = (layout.totalWidth || viewportWidth) * zoomLevel;
-            const worldHeight = (layout.totalHeight || viewportHeight) * zoomLevel;
-            spacer.style.width = `${Math.max(worldWidth, viewportWidth)}px`;
-            spacer.style.height = `${Math.max(worldHeight, viewportHeight)}px`;
-        }
-        if (parentContainerRef.current) {
-            spacerRef.current;
-        }
-        const panDeltaX = panX - prevPanRef.current.x;
-        const panDeltaY = panY - prevPanRef.current.y;
-        prevPanRef.current = { x: panX, y: panY };
-        const currentScrollTop = parentContainerRef.current?.scrollTop || 0;
-        const currentScrollLeft = parentContainerRef.current?.scrollLeft || 0;
-        const syncParams = {
-            root: rootRef.current,
-            groupsContainer: groupsContainerRef.current,
-            container: parentContainerRef.current,
-            sprites: spritesRef.current,
-            layout,
-            visibleIds,
-            items,
-            cardWidth,
-            cardHeight,
-            panX,
-            panY,
-            panDeltaX,
-            panDeltaY,
-            zoomLevel,
-            viewportWidth,
-            viewportHeight,
-            viewMode,
-            createCardSprite: (id, x, y) => createCardSprite(id, x, y, items, (item, e, id) => onCardClickRef.current(item, e, id), (e) => onPanStart(asReactMouseEvent(e)), cardWidth, cardHeight, cardColorsRef.current, cardRenderer, resolveId),
-            updateCardContent: (sprite, item) => updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current, cardRenderer),
-            isViewTransition: isViewTransitionRef.current,
-            prevLayout: prevLayoutRef.current,
-            transitionSeenIds: transitionSeenIdsRef.current,
-            prevScrollTop: prevScrollTopRef.current,
-            prevScrollLeft: prevScrollLeftRef.current,
-        };
-        syncSpritesToViewport(syncParams);
-        prevScrollTopRef.current = currentScrollTop;
-        prevScrollLeftRef.current = currentScrollLeft;
-        needsRenderRef.current = true;
-        if (appRef.current?.renderer && rootRef.current) {
-            appRef.current.renderer.render(appRef.current.stage);
-            needsRenderRef.current = false;
-        }
-        startAnimationLoop({
-            mountedRef,
-            appRef,
-            animationFrameRef,
-            isAnimatingRef,
-            needsRenderRef,
-            spritesRef,
-            isViewTransitionRef,
-            syncVisibility: () => syncSpritesToViewport({ ...syncParams, isViewTransition: false, sweepImmediately: true }),
-            onTransitionComplete: () => transitionSeenIdsRef.current.clear(),
-        });
-    }, [
-        layout,
-        visibleIds,
-        items,
-        cardWidth,
-        cardHeight,
-        pixiReady,
-        zoomLevel,
-        panX,
-        panY,
-        grouping,
-        viewMode,
-        colorOverrides,
-        colorRevision,
-    ]);
-    useEffect(() => {
-        prevLayoutRef.current = layout;
-    }, [layout]);
-    useEffect(() => {
-        if (!rootRef.current)
-            return;
-        updateSelection();
-        needsRenderRef.current = true;
-        appRef.current?.renderer.render(appRef.current.stage);
-    }, [selectedId, items]);
-    useEffect(() => {
-        if (!rootRef.current)
-            return;
-        updateHighlight$1();
-        needsRenderRef.current = true;
-        appRef.current?.renderer.render(appRef.current.stage);
-    }, [hoveredGroupIndex, layout, grouping]);
-    useEffect(() => {
-        if (!pixiReady ||
-            !parentContainerRef ||
-            !parentContainerRef.current ||
-            !appRef.current ||
-            !rootRef.current)
-            return;
-        const container = parentContainerRef.current;
-        const app = appRef.current;
-        const lastScroll = { x: container.scrollLeft, y: container.scrollTop };
-        const pendingRef = { scheduled: false };
-        const processScroll = () => {
-            pendingRef.scheduled = false;
-            try {
-                const effectivePanX = container.scrollLeft;
-                const effectivePanY = container.scrollTop;
-                lastScroll.x = effectivePanX;
-                lastScroll.y = effectivePanY;
-                syncScrollSprites({
-                    root: rootRef.current,
-                    groupsContainer: groupsContainerRef.current,
-                    container: parentContainerRef.current,
-                    sprites: spritesRef.current,
-                    layout,
-                    visibleIds,
-                    items,
-                    cardWidth,
-                    cardHeight,
-                    panX,
-                    panY,
-                    zoomLevel,
-                    viewportWidth,
-                    viewportHeight,
-                    createCardSprite: (id, x, y) => createCardSprite(id, x, y, items, (item, e, id) => onCardClickRef.current(item, e, id), (e) => onPanStartRef.current(asReactMouseEvent(e)), cardWidth, cardHeight, cardColorsRef.current, cardRenderer, resolveId),
-                    updateCardContent: (sprite, item) => updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current, cardRenderer),
-                    isViewTransition: isViewTransitionRef.current,
-                    viewMode,
-                    transitionSeenIds: transitionSeenIdsRef.current,
-                    prevScrollTop: prevScrollTopRef.current,
-                    prevScrollLeft: prevScrollLeftRef.current,
-                }, transitionLayoutRef.current);
-                prevScrollTopRef.current = container.scrollTop || 0;
-                prevScrollLeftRef.current = container.scrollLeft || 0;
-                needsRenderRef.current = true;
-                app.renderer?.render(app.stage);
-            }
-            catch (e) {
-                console.error('[PivotCanvas] processScroll error', e);
-            }
-        };
-        const onScroll = () => {
-            lastScroll.x = container.scrollLeft;
-            lastScroll.y = container.scrollTop;
-            if (!pendingRef.scheduled) {
-                pendingRef.scheduled = true;
-                requestAnimationFrame(processScroll);
-            }
-        };
-        container.addEventListener('scroll', onScroll, { passive: true });
-        return () => {
-            container.removeEventListener('scroll', onScroll);
-        };
-    }, [
-        pixiReady,
-        layout,
-        visibleIds,
-        items,
-        cardWidth,
-        cardHeight,
-        zoomLevel,
+    const { cardColorsRef, colorRevision } = usePivotCardColors(parentContainerRef, colorOverrides, needsRenderRef);
+    const stage = usePivotStage({
+        parentContainerRef,
         viewportWidth,
         viewportHeight,
-        panX,
-        panY,
-        grouping,
-        viewMode,
-        selectedId,
-        onCardClick,
-        onPanStart,
-    ]);
-    function updateCardContent$1(sprite, item) {
-        return updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current, cardRenderer);
-    }
-    function updateSelection() {
-        const sprites = spritesRef.current;
-        for (const sprite of sprites.values()) {
-            const val = items[Number(sprite.itemId)];
-            updateCardContent$1(sprite, val);
-        }
-    }
-    function updateHighlight$1() {
-        updateHighlight(groupsContainerRef.current, parentContainerRef.current, grouping, layout, hoveredGroupIndex, cardWidth, zoomLevel);
-    }
+        needsRenderRef,
+        onPanStartRef,
+        onPanMoveRef,
+        onPanEndRef,
+    });
+    const context = {
+        props,
+        stage,
+        transition,
+        cardColorsRef,
+        colorRevision,
+        onCardClickRef,
+        onPanStartRef,
+    };
+    usePivotGroupBackgrounds(context);
+    usePivotSpriteSync(context);
+    usePivotSelectionHighlight(context);
+    usePivotScrollSync(context);
     return null;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"PivotCanvas.js","sources":["../../../../PivotViewer/components/PivotCanvas.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, useMemo, useRef, useState } from 'react';\nimport * as PIXI from 'pixi.js';\nimport type { ItemId, LayoutResult, GroupingResult } from '../engine/types';\nimport type { ViewMode } from './Toolbar';\nimport type { PivotViewerColors } from '../types';\nimport {\n    createCssColorResolver,\n    observeColorEnvironment,\n    resolveCardColors,\n} from './pivot/colorResolver';\nimport {\n    createCardSprite as createCardSpriteExternal,\n    updateCardContent as updateCardContentExternal,\n    clearSpritePool,\n} from './pivot/sprites';\nimport { syncSpritesToViewport } from './pivot/visibility';\nimport { syncScrollSprites } from './pivot/syncScrollSprites';\nimport {\n    updateGroupBackgrounds as updateGroupBackgroundsExternal,\n    updateHighlight as updateHighlightExternal,\n} from './pivot/groups';\nimport {\n    startAnimationLoop as startAnimationLoopExternal,\n    updatePositions as updatePositionsExternal,\n} from './pivot/animation';\nimport {\n    ANIMATION_SPEED,\n    DEFAULT_COLORS,\n    type CardSprite,\n    type CardColors,\n} from './pivot/constants';\n\nexport interface PivotCanvasProps<TItem extends object> {\n    /** Original items array */\n    items: TItem[];\n\n    /** Layout positions */\n    layout: LayoutResult;\n\n    /** Grouping information */\n    grouping: GroupingResult;\n\n    /** Visible item IDs */\n    visibleIds: Uint32Array;\n\n    /** Card dimensions */\n    cardWidth: number;\n    cardHeight: number;\n\n    /** Zoom level */\n    zoomLevel: number;\n\n    /** Pan offset */\n    panX: number;\n    panY: number;\n\n    /** Viewport dimensions (visible area) */\n    viewportWidth: number;\n    viewportHeight: number;\n\n    /** Selected item ID */\n    selectedId: ItemId | null;\n\n    /** Hovered group index */\n    hoveredGroupIndex: number | null;\n\n    /** Current view mode */\n    viewMode: ViewMode;\n\n    /** Is zooming animation in progress */\n    isZooming?: boolean;\n\n    /** Card renderer function - returns structured data for display */\n    cardRenderer: (item: TItem) => {\n        title: string;\n        labels?: string[];\n        values?: string[];\n    };\n\n    /** Public color overrides; changes trigger a Pixi color refresh. */\n    colorOverrides?: Partial<PivotViewerColors>;\n\n    /** ID resolver */\n    resolveId: (item: TItem, index: number) => string | number;\n\n    /** Click handler */\n    onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void;\n\n    /** Pan handlers */\n    onPanStart: (e: React.MouseEvent) => void;\n    onPanMove: (e: React.MouseEvent) => void;\n    onPanEnd: () => void;\n    containerRef: React.RefObject<HTMLDivElement | null>;\n}\n\n// `CardSprite` type moved to ./pivot/constants and imported above\n\n// constants and CardColors type moved to ./pivot/constants\n\nconst asReactMouseEvent = (event: unknown): React.MouseEvent => {\n    // SAFETY: Pixi exposes the originating browser pointer event. PivotViewer's pan\n    // callbacks consume only coordinates/modifiers shared with React.MouseEvent.\n    return event as React.MouseEvent;\n};\n\nexport function PivotCanvas<TItem extends object>({\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    hoveredGroupIndex,\n    isZooming: _isZooming = false,\n    resolveId: _resolveId,\n    onCardClick,\n    onPanStart,\n    onPanMove,\n    onPanEnd,\n    viewMode,\n    cardRenderer,\n    colorOverrides,\n    containerRef,\n}: PivotCanvasProps<TItem>) {\n    // Use the containerRef passed from the parent viewport so we append the Pixi\n    // canvas and spacer into the actual scrollable element.\n    const parentContainerRef = containerRef;\n    // Mark intentionally-unused destructured props as used to satisfy lint\n    void _isZooming;\n    const resolveId = _resolveId;\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const spacerRef = useRef<HTMLDivElement | null>(null);\n    const appRef = useRef<PIXI.Application | null>(null);\n    const rootRef = useRef<PIXI.Container | null>(null);\n    const groupsContainerRef = useRef<PIXI.Container | null>(null);\n    const spritesRef = useRef<Map<ItemId, CardSprite>>(new Map());\n    const animationFrameRef = useRef<number>(0);\n    const mountedRef = useRef(true);\n    const [pixiReady, setPixiReady] = useState(false);\n    const [colorRevision, setColorRevision] = useState(0);\n    const isAnimatingRef = useRef(false);\n    const needsRenderRef = useRef(false);\n    const initializingRef = useRef(false);\n    const isViewTransitionRef = useRef(false);\n    const lastViewChangeTimeRef = useRef(0);\n    const previousViewModeRef = useRef<ViewMode>(viewMode);\n    const prevLayoutRef = useRef<LayoutResult | null>(null);\n    const transitionLayoutRef = useRef<LayoutResult | null>(null);\n    const transitionSeenIdsRef = useRef<Set<ItemId>>(new Set());\n    const prevGroupingRef = useRef<GroupingResult | null>(null);\n    const prevScrollTopRef = useRef<number>(0);\n    const prevScrollLeftRef = useRef<number>(0);\n    const cardColorsRef = useRef<CardColors>(DEFAULT_COLORS);\n\n    const cssColorResolver = useMemo(() => createCssColorResolver(), []);\n\n    const onPanStartRef = useRef(onPanStart);\n    const onPanMoveRef = useRef(onPanMove);\n    const onPanEndRef = useRef(onPanEnd);\n    const onCardClickRef = useRef(onCardClick);\n    const prevPanRef = useRef({ x: panX, y: panY });\n\n    // Initialize Pixi Application\n    useEffect(() => {\n        // ... existing code ...\n        onPanMoveRef.current = onPanMove;\n        onPanEndRef.current = onPanEnd;\n        onCardClickRef.current = onCardClick;\n    }, [onPanStart, onPanMove, onPanEnd, onCardClick]);\n\n    useEffect(() => {\n        const element = parentContainerRef.current;\n        if (!element) return;\n\n        const refreshColors = () => {\n            cardColorsRef.current = resolveCardColors(cssColorResolver, element);\n            needsRenderRef.current = true;\n            setColorRevision((revision) => revision + 1);\n        };\n\n        refreshColors();\n        return observeColorEnvironment(element, refreshColors);\n    }, [cssColorResolver, parentContainerRef, colorOverrides]);\n\n    useEffect(() => {\n        // Reset mounted flag\n        mountedRef.current = true;\n\n        if (!parentContainerRef || !parentContainerRef.current) {\n            return;\n        }\n\n        // Prevent multiple simultaneous initializations\n        if (initializingRef.current || appRef.current) {\n            return;\n        }\n\n        initializingRef.current = true;\n        let app: PIXI.Application | null = null;\n        // Handler references declared here so cleanup can remove them later.\n\n        (async () => {\n            try {\n                const options = {\n                    backgroundAlpha: 0,\n                    antialias: false,\n                    autoStart: false,\n                    autoDensity: true,\n                    resolution: window.devicePixelRatio || 1,\n                    width: viewportWidth > 0 ? viewportWidth : 800,\n                    height: viewportHeight > 0 ? viewportHeight : 600,\n                } as PIXI.ApplicationOptions;\n\n                app = new PIXI.Application();\n                await app.init(options);\n\n                if (!mountedRef.current || !parentContainerRef.current) {\n                    // Component unmounted during initialization\n                    if (app && typeof app.destroy === 'function')\n                        app.destroy(true, { children: true });\n                    initializingRef.current = false;\n                    return;\n                }\n\n                appRef.current = app;\n\n                const groupsContainer = new PIXI.Container();\n                groupsContainerRef.current = groupsContainer;\n                app.stage.addChild(groupsContainer);\n\n                const root = new PIXI.Container();\n                rootRef.current = root;\n                app.stage.addChild(root);\n\n                const canvasEl = app.canvas;\n\n                // Place canvas outside the scrollable content so native scrolling\n                // doesn't move the canvas DOM element itself. We overlay the canvas\n                // on top of the scroll area by inserting it into the parent element\n                // (or the container itself if parent is not available). This ensures\n                // the Pixi canvas remains stable while we move the Pixi world inside\n                // it to represent camera pan.\n                const overlayParent =\n                    parentContainerRef.current.parentElement ??\n                    parentContainerRef.current;\n\n                if (canvasEl) {\n                    if (canvasEl.parentElement) {\n                        canvasEl.parentElement.removeChild(canvasEl);\n                    }\n                    overlayParent.appendChild(canvasEl);\n                    canvasRef.current = canvasEl;\n                } else {\n                    console.error(\n                        'PivotCanvas: Could not find canvas element from Pixi application',\n                    );\n                }\n\n                // Position the canvas to overlay the scrollable container area.\n                if (canvasRef.current && parentContainerRef.current) {\n                    const parentBounds =\n                        parentContainerRef.current.getBoundingClientRect();\n                    void parentBounds;\n                    canvasRef.current.style.position = 'absolute';\n                    // Place canvas relative to the overlayParent's coordinate space.\n                    // If overlayParent is the immediate parent, top/left 0 aligns it.\n                    const offsetLeft = parentContainerRef.current.offsetLeft;\n                    const offsetTop = parentContainerRef.current.offsetTop;\n                    canvasRef.current.style.left = `${offsetLeft}px`;\n                    canvasRef.current.style.top = `${offsetTop}px`;\n                    canvasRef.current.style.width = `${parentContainerRef.current.clientWidth}px`;\n                    canvasRef.current.style.height = `${parentContainerRef.current.clientHeight}px`;\n                    // Place canvas behind the scrollable container (which has z-index 1)\n                    // so scrollbars appear on top.\n                    canvasRef.current.style.zIndex = '0';\n                    // Disable pointer events on canvas so they pass through to the viewport if needed,\n                    // though viewport is on top anyway.\n                    canvasRef.current.style.pointerEvents = 'none';\n                }\n\n                // We handle clicks and interactions manually in PivotViewerMain now,\n                // so we don't need to configure Pixi events on the container.\n                // This avoids z-index conflicts and event propagation issues.\n\n                // Make canvas fill container with absolute positioning\n                if (canvasRef.current) {\n                    canvasRef.current.style.display = 'block';\n                    // Ensure canvas does not capture events so they pass through to the viewport\n                    canvasRef.current.style.pointerEvents = 'none';\n                }\n\n                // Setup stage events for background panning\n                app.stage.eventMode = 'static';\n                app.stage.hitArea = new PIXI.Rectangle(\n                    0,\n                    0,\n                    viewportWidth,\n                    viewportHeight,\n                );\n\n                app.stage.on('pointerdown', (e) => {\n                    // Only handle if it reached the stage (background)\n                    // Sprites stop propagation, so this is safe.\n                    onPanStartRef.current(asReactMouseEvent(e.nativeEvent));\n                });\n\n                app.stage.on('globalpointermove', (e) => {\n                    onPanMoveRef.current(asReactMouseEvent(e.nativeEvent));\n                });\n\n                app.stage.on('globalpointerup', () => {\n                    onPanEndRef.current();\n                });\n\n                // We no longer need manual event listeners on parentEl because Pixi\n                // is now listening to events on parentEl directly via setTargetElement.\n                // This allows Pixi to handle hit testing through the transparent container.\n                const parentEl = parentContainerRef.current;\n                if (parentEl) {\n                    // handleMouseDown = (e: Event) => onPanStartRef.current(e as unknown);\n                    // handleMouseMove = (e: Event) => onPanMoveRef.current(e as unknown);\n                    // handleMouseUp = () => onPanEndRef.current();\n                    // parentEl.addEventListener('mousedown', handleMouseDown);\n                    // parentEl.addEventListener('mousemove', handleMouseMove);\n                    // parentEl.addEventListener('mouseup', handleMouseUp);\n                    // parentEl.addEventListener('mouseleave', handleMouseUp);\n                    // window.addEventListener('mouseup', handleMouseUp);\n                    // window.addEventListener('pointerup', handleMouseUp);\n                }\n\n                // Immediately size to container to avoid delay\n                if (viewportWidth > 0 && viewportHeight > 0) {\n                    app.renderer?.resize(viewportWidth, viewportHeight);\n                }\n\n                setPixiReady(true);\n                initializingRef.current = false;\n\n                // Trigger initial render\n                needsRenderRef.current = true;\n                app.renderer?.render(app.stage);\n            } catch (error) {\n                console.error('Failed to initialize Pixi.js:', error);\n                initializingRef.current = false;\n            }\n        })();\n\n        return () => {\n            mountedRef.current = false;\n            setPixiReady(false);\n            cancelAnimationFrame(animationFrameRef.current);\n\n            if (appRef.current && typeof appRef.current.destroy === 'function') {\n                appRef.current.destroy(true, { children: true });\n                appRef.current = null;\n                rootRef.current = null;\n            }\n\n            // Pixi destroys the application's children. Discard detached, pooled\n            // sprites too so a later application cannot reuse their stale textures.\n            clearSpritePool();\n            spritesRef.current.clear();\n\n            // Remove any event listeners we attached to the parent container\n            try {\n                const parentEl = parentContainerRef.current;\n                if (parentEl) {\n                    // if (handleMouseDown) parentEl.removeEventListener('mousedown', handleMouseDown);\n                    // if (handleMouseMove) parentEl.removeEventListener('mousemove', handleMouseMove);\n                    // if (handleMouseUp) parentEl.removeEventListener('mouseup', handleMouseUp);\n                    // if (handleMouseUp) parentEl.removeEventListener('mouseleave', handleMouseUp);\n                    // if (handleMouseUp) {\n                    //   window.removeEventListener('mouseup', handleMouseUp);\n                    //   window.removeEventListener('pointerup', handleMouseUp);\n                    // }\n                }\n            } catch (e) {\n                void e;\n            }\n            // Remove DOM nodes we appended\n            try {\n                if (canvasRef.current && canvasRef.current.parentElement) {\n                    canvasRef.current.parentElement.removeChild(canvasRef.current);\n                }\n            } catch (e) {\n                void e;\n            }\n        };\n    }, []); // Only initialize once - resizing handled by separate useEffect\n\n    // Handle canvas resize\n    useEffect(() => {\n        if (\n            !parentContainerRef ||\n            !parentContainerRef.current ||\n            !appRef.current ||\n            !pixiReady\n        )\n            return;\n\n        const container = parentContainerRef.current;\n        const app = appRef.current;\n\n        let resizeTimeout: ReturnType<typeof setTimeout>;\n\n        const handleResize = () => {\n            // Size canvas to viewport dimensions from props\n            if (viewportWidth > 0 && viewportHeight > 0) {\n                app.renderer?.resize(viewportWidth, viewportHeight);\n                app.stage.hitArea = new PIXI.Rectangle(\n                    0,\n                    0,\n                    viewportWidth,\n                    viewportHeight,\n                );\n\n                // Keep canvas DOM size in sync with container\n                if (canvasRef.current && parentContainerRef.current) {\n                    canvasRef.current.style.width = `${parentContainerRef.current.clientWidth}px`;\n                    canvasRef.current.style.height = `${parentContainerRef.current.clientHeight}px`;\n                    // Also update left/top in case the container moved\n                    canvasRef.current.style.left = `${parentContainerRef.current.offsetLeft}px`;\n                    canvasRef.current.style.top = `${parentContainerRef.current.offsetTop}px`;\n                }\n            }\n        };\n\n        const debouncedResize = () => {\n            clearTimeout(resizeTimeout);\n            resizeTimeout = setTimeout(handleResize, 150);\n        };\n\n        // Initial resize (immediate)\n        handleResize();\n\n        // Watch for size changes (debounced)\n        const resizeObserver = new ResizeObserver(debouncedResize);\n        resizeObserver.observe(container);\n\n        return () => {\n            clearTimeout(resizeTimeout);\n            resizeObserver.disconnect();\n        };\n    }, [pixiReady, viewportWidth, viewportHeight]);\n\n    // Update group backgrounds only when layout/grouping changes\n    useEffect(() => {\n        if (!groupsContainerRef.current || !parentContainerRef.current || !pixiReady)\n            return;\n        updateGroupBackgroundsExternal(\n            groupsContainerRef.current,\n            parentContainerRef.current,\n            grouping,\n            layout,\n            zoomLevel,\n            cardColorsRef.current,\n            viewMode,\n        );\n        needsRenderRef.current = true;\n        appRef.current?.renderer?.render(appRef.current.stage);\n    }, [grouping, layout, zoomLevel, viewMode, pixiReady, colorOverrides, colorRevision]);\n\n    // Fade buckets background when switching view modes\n    useEffect(() => {\n        const gc = groupsContainerRef.current;\n        const app = appRef.current;\n        if (!gc || !app) return;\n        const target = viewMode === 'grouped' ? 1 : 0;\n        const start = typeof gc.alpha === 'number' ? gc.alpha : 1;\n        const duration = 200; // ms\n        if (Math.abs(start - target) < 0.01) {\n            gc.alpha = target;\n            return;\n        }\n        const t0 = performance.now();\n        const step = () => {\n            const u = Math.min(1, (performance.now() - t0) / duration);\n            const eased = u * (2 - u);\n            gc.alpha = start + (target - start) * eased;\n            app.renderer?.render(app.stage);\n            if (u < 1) requestAnimationFrame(step);\n        };\n        requestAnimationFrame(step);\n    }, [viewMode]);\n\n    useEffect(() => {\n        if (!rootRef.current || !parentContainerRef.current || !pixiReady) {\n            return;\n        }\n\n        // Check if this is a view mode change (not just pan/scroll)\n        const viewModeChanged = previousViewModeRef.current !== viewMode;\n        const groupingChanged = prevGroupingRef.current !== grouping;\n        const layoutChanged = prevLayoutRef.current !== layout;\n\n        if (viewModeChanged || groupingChanged || layoutChanged) {\n            transitionSeenIdsRef.current.clear();\n            if (layoutChanged) transitionLayoutRef.current = prevLayoutRef.current;\n            isViewTransitionRef.current = true;\n            lastViewChangeTimeRef.current = Date.now();\n            previousViewModeRef.current = viewMode;\n            prevGroupingRef.current = grouping;\n\n            // Don't hide sprites here - let visibility.ts handle the transition\n            // The syncSpritesToViewport function will properly animate sprites to new positions\n            // during view transitions (isViewTransitionRef.current = true), and visibility.ts\n            // will handle cleanup of sprites that no longer have positions in the layout.\n            // Previously, hiding sprites here caused sorting/transitions to not work because\n            // sprites were destroyed before they could animate.\n        }\n\n        // Update spacer dimensions to match scaled world size\n        if (spacerRef.current) {\n            const spacer = spacerRef.current;\n            const worldWidth = (layout.totalWidth || viewportWidth) * zoomLevel;\n            const worldHeight = (layout.totalHeight || viewportHeight) * zoomLevel;\n            spacer.style.width = `${Math.max(worldWidth, viewportWidth)}px`;\n            spacer.style.height = `${Math.max(worldHeight, viewportHeight)}px`;\n        }\n\n        // Ensure scroll spacer matches layout so the container becomes scrollable and\n        // native scrollLeft/scrollTop reflect the camera position.\n        if (parentContainerRef.current) {\n            const spacer = spacerRef.current;\n            if (spacer) {\n                // Debug: log spacer and layout values to detect mismatches\n            }\n        }\n\n        const panDeltaX = panX - prevPanRef.current.x;\n        const panDeltaY = panY - prevPanRef.current.y;\n        prevPanRef.current = { x: panX, y: panY };\n\n        // Sync sprites into viewport and create/remove as needed\n        // Provide wrappers for sprite creation and content update so helpers have required context\n        const currentScrollTop = parentContainerRef.current?.scrollTop || 0;\n        const currentScrollLeft = parentContainerRef.current?.scrollLeft || 0;\n\n        const syncParams = {\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            panDeltaX,\n            panDeltaY,\n            zoomLevel,\n            viewportWidth,\n            viewportHeight,\n            viewMode,\n            createCardSprite: (id: string | number, x: number, y: number) =>\n                createCardSpriteExternal(\n                    id,\n                    x,\n                    y,\n                    items as TItem[],\n                    (item: TItem, e: MouseEvent, id: string | number) =>\n                        onCardClickRef.current(item, e, id),\n                    (e: MouseEvent) => onPanStart(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            prevLayout: prevLayoutRef.current,\n            transitionSeenIds: transitionSeenIdsRef.current,\n            prevScrollTop: prevScrollTopRef.current,\n            prevScrollLeft: prevScrollLeftRef.current,\n        };\n        syncSpritesToViewport(syncParams);\n\n        // Update previous scroll position for next frame\n        prevScrollTopRef.current = currentScrollTop;\n        prevScrollLeftRef.current = currentScrollLeft;\n        needsRenderRef.current = true;\n\n        // Force an immediate render after syncing sprites to ensure cards appear\n        if (appRef.current?.renderer && rootRef.current) {\n            appRef.current.renderer.render(appRef.current.stage);\n            needsRenderRef.current = false;\n        }\n\n        startAnimationLoopExternal({\n            mountedRef,\n            appRef,\n            animationFrameRef,\n            isAnimatingRef,\n            needsRenderRef,\n            spritesRef,\n            isViewTransitionRef,\n            syncVisibility: () => syncSpritesToViewport({ ...syncParams, isViewTransition: false, sweepImmediately: true }),\n            onTransitionComplete: () => transitionSeenIdsRef.current.clear(),\n        });\n    }, [\n        layout,\n        visibleIds,\n        items,\n        cardWidth,\n        cardHeight,\n        pixiReady,\n        zoomLevel,\n        panX,\n        panY,\n        grouping,\n        viewMode,\n        colorOverrides,\n        colorRevision,\n    ]);\n\n    // Update prevLayoutRef after processing layout changes\n    useEffect(() => {\n        prevLayoutRef.current = layout;\n    }, [layout]);\n\n    // Duplicate camera position effect removed -- syncSpritesToViewport handles this with correct offsetY logic logic\n    /*\n  useEffect(() => {\n    if (!rootRef.current || !groupsContainerRef.current) return;\n\n    // Camera transform: move world opposite to camera position. Prefer the\n    // native container scroll positions where available (they are authoritative\n    // during user scrolls) and fall back to the passed pan props.\n    const effectivePanX = parentContainerRef.current ? parentContainerRef.current.scrollLeft : panX;\n    const effectivePanY = parentContainerRef.current ? parentContainerRef.current.scrollTop : panY;\n\n    // Apply zoom and position to root and groups.\n    if (rootRef.current.scale && groupsContainerRef.current.scale) {\n      rootRef.current.scale.set(zoomLevel);\n      groupsContainerRef.current.scale.set(zoomLevel);\n    }\n    if (rootRef.current.position && groupsContainerRef.current.position) {\n      rootRef.current.position.set(-effectivePanX, -effectivePanY);\n      groupsContainerRef.current.position.set(-effectivePanX, -effectivePanY);\n    }\n    appRef.current?.renderer?.render(appRef.current.stage);\n  }, [zoomLevel, panX, panY]);\n  */\n\n    useEffect(() => {\n        if (!rootRef.current) return;\n        updateSelection();\n        needsRenderRef.current = true;\n        appRef.current?.renderer.render(appRef.current.stage);\n    }, [selectedId, items]);\n\n    useEffect(() => {\n        if (!rootRef.current) return;\n        updateHighlight();\n        needsRenderRef.current = true;\n        appRef.current?.renderer.render(appRef.current.stage);\n    }, [hoveredGroupIndex, layout, grouping]);\n\n    // Note: animation loop and group background updates are delegated to\n    // external helpers (`startAnimationLoopExternal` and\n    // `updateGroupBackgroundsExternal`) and invoked where needed. We don't\n    // expose local wrappers to avoid unused-function lint warnings.\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: store the latest scroll values and process\n        // them 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 lastScroll = { x: container.scrollLeft, y: container.scrollTop };\n        const pendingRef = { scheduled: false } as { scheduled: boolean };\n\n        const processScroll = () => {\n            pendingRef.scheduled = false;\n            try {\n                // Read directly from container to ensure consistency with visibility logic\n                // and to handle cases where scroll changes without event (e.g. resize clamping)\n                const effectivePanX = container.scrollLeft;\n                const effectivePanY = container.scrollTop;\n\n                // Update lastScroll to keep it in sync\n                lastScroll.x = effectivePanX;\n                lastScroll.y = effectivePanY;\n\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                    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                }, transitionLayoutRef.current);\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            // capture latest scroll positions quickly and schedule work\n            lastScroll.x = container.scrollLeft;\n            lastScroll.y = container.scrollTop;\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    ]);\n\n    function createCardSprite(id: ItemId, x: number, y: number): CardSprite {\n        return 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    }\n    // Mark these helpers as used (they may be referenced externally or via callbacks)\n    void createCardSprite;\n\n    function updateCardContent(sprite: CardSprite, item: TItem) {\n        return updateCardContentExternal(\n            sprite,\n            item,\n            selectedId,\n            cardWidth,\n            cardHeight,\n            cardColorsRef.current,\n            cardRenderer,\n        );\n    }\n\n    function updatePositions(): boolean {\n        return updatePositionsExternal(\n            spritesRef.current,\n            isViewTransitionRef,\n            ANIMATION_SPEED,\n        );\n    }\n\n    void updatePositions;\n\n    function updateSelection() {\n        const sprites = spritesRef.current;\n\n        for (const sprite of sprites.values()) {\n            const val = (items as TItem[])[Number(sprite.itemId)];\n            updateCardContent(sprite, val);\n        }\n    }\n\n    function updateHighlight() {\n        updateHighlightExternal(\n            groupsContainerRef.current,\n            parentContainerRef.current,\n            grouping,\n            layout,\n            hoveredGroupIndex,\n            cardWidth,\n            zoomLevel,\n        );\n    }\n\n    void updateHighlight;\n\n    // This component renders into the parent `containerRef` (we append Pixi canvas\n    // and spacer directly into that DOM node). Return null so we don't replace or\n    // reassign the parent's ref which must remain the scrollable viewport element.\n    return null;\n}\n"],"names":["updateGroupBackgroundsExternal","createCardSpriteExternal","updateCardContentExternal","startAnimationLoopExternal","updateHighlight","updateCardContent","updateHighlightExternal"],"mappings":"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"}
+{"version":3,"file":"PivotCanvas.js","sources":["../../../../PivotViewer/components/PivotCanvas.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 } from 'react';\nimport type { PivotCanvasProps } from './PivotCanvasProps';\nimport { usePivotCardColors } from './pivot/usePivotCardColors';\nimport { usePivotGroupBackgrounds } from './pivot/usePivotGroupBackgrounds';\nimport { usePivotScrollSync } from './pivot/usePivotScrollSync';\nimport { usePivotSelectionHighlight } from './pivot/usePivotSelectionHighlight';\nimport { usePivotSpriteSync } from './pivot/usePivotSpriteSync';\nimport { usePivotStage } from './pivot/usePivotStage';\nimport { usePivotTransitionState } from './pivot/usePivotTransitionState';\n\nexport type { PivotCanvasProps } from './PivotCanvasProps';\n\n/**\n * Renders PivotViewer's cards and group backgrounds with Pixi into the parent viewport. The canvas\n * overlays the scrollable viewport, which keeps native scrolling; this component renders no DOM.\n */\nexport function PivotCanvas<TItem extends object>(props: PivotCanvasProps<TItem>) {\n    const {\n        panX,\n        panY,\n        viewportWidth,\n        viewportHeight,\n        viewMode,\n        colorOverrides,\n        onPanStart,\n        onPanMove,\n        onPanEnd,\n        onCardClick,\n    } = props;\n    // The Pixi canvas and the scroll spacer go into the parent's scrollable viewport element.\n    const parentContainerRef = props.containerRef;\n    const needsRenderRef = useRef(false);\n    const transition = usePivotTransitionState(viewMode, { x: panX, y: panY });\n\n    const onPanStartRef = useRef(onPanStart);\n    const onPanMoveRef = useRef(onPanMove);\n    const onPanEndRef = useRef(onPanEnd);\n    const onCardClickRef = useRef(onCardClick);\n    useEffect(() => {\n        onPanStartRef.current = onPanStart;\n        onPanMoveRef.current = onPanMove;\n        onPanEndRef.current = onPanEnd;\n        onCardClickRef.current = onCardClick;\n    }, [onPanStart, onPanMove, onPanEnd, onCardClick]);\n\n    const { cardColorsRef, colorRevision } = usePivotCardColors(\n        parentContainerRef,\n        colorOverrides,\n        needsRenderRef,\n    );\n    const stage = usePivotStage({\n        parentContainerRef,\n        viewportWidth,\n        viewportHeight,\n        needsRenderRef,\n        onPanStartRef,\n        onPanMoveRef,\n        onPanEndRef,\n    });\n\n    const context = {\n        props,\n        stage,\n        transition,\n        cardColorsRef,\n        colorRevision,\n        onCardClickRef,\n        onPanStartRef,\n    };\n    usePivotGroupBackgrounds(context);\n    usePivotSpriteSync(context);\n    usePivotSelectionHighlight(context);\n    usePivotScrollSync(context);\n\n    // This component renders into the parent `containerRef` (we append Pixi canvas\n    // and spacer directly into that DOM node). Return null so we don't replace or\n    // reassign the parent's ref which must remain the scrollable viewport element.\n    return null;\n}\n"],"names":[],"mappings":";;;;;;;;;AAmBM,SAAU,WAAW,CAAuB,KAA8B,EAAA;IAC5E,MAAM,EACF,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,cAAc,EACd,UAAU,EACV,SAAS,EACT,QAAQ,EACR,WAAW,GACd,GAAG,KAAK;AAET,IAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY;AAC7C,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,uBAAuB,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;AAE1E,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;AACxC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC;AACtC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;IAC1C,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,UAAU;AAClC,QAAA,YAAY,CAAC,OAAO,GAAG,SAAS;AAChC,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAC9B,QAAA,cAAc,CAAC,OAAO,GAAG,WAAW;IACxC,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAElD,IAAA,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,kBAAkB,CACvD,kBAAkB,EAClB,cAAc,EACd,cAAc,CACjB;IACD,MAAM,KAAK,GAAG,aAAa,CAAC;QACxB,kBAAkB;QAClB,aAAa;QACb,cAAc;QACd,cAAc;QACd,aAAa;QACb,YAAY;QACZ,WAAW;AACd,KAAA,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG;QACZ,KAAK;QACL,KAAK;QACL,UAAU;QACV,aAAa;QACb,aAAa;QACb,cAAc;QACd,aAAa;KAChB;IACD,wBAAwB,CAAC,OAAO,CAAC;IACjC,kBAAkB,CAAC,OAAO,CAAC;IAC3B,0BAA0B,CAAC,OAAO,CAAC;IACnC,kBAAkB,CAAC,OAAO,CAAC;AAK3B,IAAA,OAAO,IAAI;AACf;;"}