@cratis/components 4.21.0 → 4.22.0

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

@@ -0,0 +1,123 @@
+import { useEffect } from 'react';
+import { startAnimationLoop } from './animation.js';
+import { asReactMouseEvent } from './asReactMouseEvent.js';
+import { updateCardContent, createCardSprite } from './sprites.js';
+import { syncSpritesToViewport } from './visibility.js';
+
+const usePivotSpriteSync = ({ props, stage, transition, cardColorsRef, colorRevision, onCardClickRef, }) => {
+    const { items, layout, grouping, visibleIds, cardWidth, cardHeight, zoomLevel, panX, panY, viewportWidth, viewportHeight, selectedId, viewMode, cardRenderer, colorOverrides, resolveId, onPanStart, containerRef: parentContainerRef, } = props;
+    const { rootRef, groupsContainerRef, spritesRef, appRef, animationFrameRef, mountedRef, needsRenderRef, pixiReady, } = stage;
+    const { isAnimatingRef, isViewTransitionRef, lastViewChangeTimeRef, previousViewModeRef, prevLayoutRef, transitionLayoutRef, transitionSeenIdsRef, prevGroupingRef, prevScrollTopRef, prevScrollLeftRef, prevPanRef, } = transition;
+    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;
+        }
+        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,
+        animationFrameRef,
+        appRef,
+        cardColorsRef,
+        groupsContainerRef,
+        isAnimatingRef,
+        isViewTransitionRef,
+        lastViewChangeTimeRef,
+        mountedRef,
+        needsRenderRef,
+        onCardClickRef,
+        parentContainerRef,
+        prevGroupingRef,
+        prevLayoutRef,
+        prevPanRef,
+        prevScrollLeftRef,
+        prevScrollTopRef,
+        previousViewModeRef,
+        rootRef,
+        spritesRef,
+        transitionLayoutRef,
+        transitionSeenIdsRef,
+    ]);
+    useEffect(() => {
+        prevLayoutRef.current = layout;
+    }, [layout, prevLayoutRef]);
+};
+
+export { usePivotSpriteSync };
+//# sourceMappingURL=usePivotSpriteSync.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotSpriteSync.js","sources":["../../../../../PivotViewer/components/pivot/usePivotSpriteSync.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 { startAnimationLoop as startAnimationLoopExternal } from './animation';\nimport { asReactMouseEvent } from './asReactMouseEvent';\nimport type { CardSprite } from './constants';\nimport {\n    createCardSprite as createCardSpriteExternal,\n    updateCardContent as updateCardContentExternal,\n} from './sprites';\nimport { syncSpritesToViewport } from './visibility';\nimport type { PivotRenderContext } from './PivotRenderContext';\n\n/**\n * Keeps the card sprites in step with the layout, filter, zoom and pan, starting transitions when the\n * view, grouping or layout changes and running the animation loop.\n * @param context The props, stage, transition state and colors.\n */\nexport const usePivotSpriteSync = <TItem extends object>({\n    props,\n    stage,\n    transition,\n    cardColorsRef,\n    colorRevision,\n    onCardClickRef,\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        colorOverrides,\n        resolveId,\n        onPanStart,\n        containerRef: parentContainerRef,\n    } = props;\n    const {\n        rootRef,\n        groupsContainerRef,\n        spritesRef,\n        appRef,\n        animationFrameRef,\n        mountedRef,\n        needsRenderRef,\n        pixiReady,\n    } = stage;\n    const {\n        isAnimatingRef,\n        isViewTransitionRef,\n        lastViewChangeTimeRef,\n        previousViewModeRef,\n        prevLayoutRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n        prevGroupingRef,\n        prevScrollTopRef,\n        prevScrollLeftRef,\n        prevPanRef,\n    } = transition;\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        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: () =>\n                syncSpritesToViewport({\n                    ...syncParams,\n                    isViewTransition: false,\n                    sweepImmediately: true,\n                }),\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        animationFrameRef,\n        appRef,\n        cardColorsRef,\n        groupsContainerRef,\n        isAnimatingRef,\n        isViewTransitionRef,\n        lastViewChangeTimeRef,\n        mountedRef,\n        needsRenderRef,\n        onCardClickRef,\n        parentContainerRef,\n        prevGroupingRef,\n        prevLayoutRef,\n        prevPanRef,\n        prevScrollLeftRef,\n        prevScrollTopRef,\n        previousViewModeRef,\n        rootRef,\n        spritesRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n    ]);\n\n    // Update prevLayoutRef after processing layout changes\n    useEffect(() => {\n        prevLayoutRef.current = layout;\n    }, [layout, prevLayoutRef]);\n};\n"],"names":["createCardSpriteExternal","updateCardContentExternal","startAnimationLoopExternal"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import type { PivotStage } from './PivotStage.js';
+/** What {@link usePivotStage} renders into and reports pointer input to. */
+export interface PivotStageOptions {
+    /** The scrollable viewport the Pixi canvas overlays. */
+    parentContainerRef: RefObject<HTMLDivElement | null>;
+    viewportWidth: number;
+    viewportHeight: number;
+    needsRenderRef: RefObject<boolean>;
+    onPanStartRef: RefObject<(e: React.MouseEvent) => void>;
+    onPanMoveRef: RefObject<(e: React.MouseEvent) => void>;
+    onPanEndRef: RefObject<() => void>;
+}
+/**
+ * Creates the Pixi application once, overlays its canvas on the scrollable viewport, forwards
+ * background pointer input as panning, and keeps the canvas sized to the viewport.
+ * @param options The viewport, its size and the pan callbacks.
+ * @returns The stage.
+ */
+export declare const usePivotStage: ({ parentContainerRef, viewportWidth, viewportHeight, needsRenderRef, onPanStartRef, onPanMoveRef, onPanEndRef, }: PivotStageOptions) => PivotStage;
+//# sourceMappingURL=usePivotStage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotStage.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotStage.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAc,CAAC;AAG/C,4EAA4E;AAC5E,MAAM,WAAW,iBAAiB;IAC9B,wDAAwD;IACxD,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC;IACxD,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,MAAM,IAAI,CAAC,CAAC;CACtC;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,qHAQvB,iBAAiB,KAAG,UAuPtB,CAAC"}

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

@@ -0,0 +1,171 @@
+import { useRef, useState, useEffect } from 'react';
+import * as PIXI from 'pixi.js';
+import { asReactMouseEvent } from './asReactMouseEvent.js';
+import { clearSpritePool } from './sprites.js';
+
+const usePivotStage = ({ parentContainerRef, viewportWidth, viewportHeight, needsRenderRef, onPanStartRef, onPanMoveRef, onPanEndRef, }) => {
+    const canvasRef = 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 initializingRef = useRef(false);
+    const [pixiReady, setPixiReady] = useState(false);
+    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) {
+                    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();
+                });
+                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 {
+                if (canvasRef.current && canvasRef.current.parentElement) {
+                    canvasRef.current.parentElement.removeChild(canvasRef.current);
+                }
+            }
+            catch (e) {
+            }
+        };
+    }, [needsRenderRef, onPanEndRef, onPanMoveRef, onPanStartRef, parentContainerRef]);
+    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, parentContainerRef]);
+    return {
+        appRef,
+        rootRef,
+        groupsContainerRef,
+        canvasRef,
+        spritesRef,
+        animationFrameRef,
+        mountedRef,
+        needsRenderRef,
+        pixiReady,
+    };
+};
+
+export { usePivotStage };
+//# sourceMappingURL=usePivotStage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotStage.js","sources":["../../../../../PivotViewer/components/pivot/usePivotStage.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, useRef, useState, type RefObject } from 'react';\nimport * as PIXI from 'pixi.js';\nimport type { ItemId } from '../../engine/types';\nimport { asReactMouseEvent } from './asReactMouseEvent';\nimport type { CardSprite } from './constants';\nimport type { PivotStage } from './PivotStage';\nimport { clearSpritePool } from './sprites';\n\n/** What {@link usePivotStage} renders into and reports pointer input to. */\nexport interface PivotStageOptions {\n    /** The scrollable viewport the Pixi canvas overlays. */\n    parentContainerRef: RefObject<HTMLDivElement | null>;\n    viewportWidth: number;\n    viewportHeight: number;\n    needsRenderRef: RefObject<boolean>;\n    onPanStartRef: RefObject<(e: React.MouseEvent) => void>;\n    onPanMoveRef: RefObject<(e: React.MouseEvent) => void>;\n    onPanEndRef: RefObject<() => void>;\n}\n\n/**\n * Creates the Pixi application once, overlays its canvas on the scrollable viewport, forwards\n * background pointer input as panning, and keeps the canvas sized to the viewport.\n * @param options The viewport, its size and the pan callbacks.\n * @returns The stage.\n */\nexport const usePivotStage = ({\n    parentContainerRef,\n    viewportWidth,\n    viewportHeight,\n    needsRenderRef,\n    onPanStartRef,\n    onPanMoveRef,\n    onPanEndRef,\n}: PivotStageOptions): PivotStage => {\n    const canvasRef = useRef<HTMLCanvasElement | 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 initializingRef = useRef(false);\n    const [pixiReady, setPixiReady] = useState(false);\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\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                    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                // 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 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    }, [needsRenderRef, onPanEndRef, onPanMoveRef, onPanStartRef, parentContainerRef]); // 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, parentContainerRef]);\n\n    return {\n        appRef,\n        rootRef,\n        groupsContainerRef,\n        canvasRef,\n        spritesRef,\n        animationFrameRef,\n        mountedRef,\n        needsRenderRef,\n        pixiReady,\n    };\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import type { ViewMode } from '../Toolbar.js';
+import type { PivotTransitionState } from './PivotTransitionState.js';
+/**
+ * The refs a PivotCanvas keeps between renders to animate view, grouping and layout changes.
+ * @param viewMode The initial view mode.
+ * @param pan The initial pan.
+ * @returns The transition state.
+ */
+export declare const usePivotTransitionState: (viewMode: ViewMode, pan: {
+    x: number;
+    y: number;
+}) => PivotTransitionState;
+//# sourceMappingURL=usePivotTransitionState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotTransitionState.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotTransitionState.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAAwB,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,aACtB,QAAQ,OACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,KAC9B,oBAyBF,CAAC"}

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

@@ -0,0 +1,31 @@
+import { useRef } from 'react';
+
+const usePivotTransitionState = (viewMode, pan) => {
+    const isAnimatingRef = 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 prevPanRef = useRef(pan);
+    return {
+        isAnimatingRef,
+        isViewTransitionRef,
+        lastViewChangeTimeRef,
+        previousViewModeRef,
+        prevLayoutRef,
+        transitionLayoutRef,
+        transitionSeenIdsRef,
+        prevGroupingRef,
+        prevScrollTopRef,
+        prevScrollLeftRef,
+        prevPanRef,
+    };
+};
+
+export { usePivotTransitionState };
+//# sourceMappingURL=usePivotTransitionState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotTransitionState.js","sources":["../../../../../PivotViewer/components/pivot/usePivotTransitionState.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 { useRef } from 'react';\nimport type { GroupingResult, ItemId, LayoutResult } from '../../engine/types';\nimport type { ViewMode } from '../Toolbar';\nimport type { PivotTransitionState } from './PivotTransitionState';\n\n/**\n * The refs a PivotCanvas keeps between renders to animate view, grouping and layout changes.\n * @param viewMode The initial view mode.\n * @param pan The initial pan.\n * @returns The transition state.\n */\nexport const usePivotTransitionState = (\n    viewMode: ViewMode,\n    pan: { x: number; y: number },\n): PivotTransitionState => {\n    const isAnimatingRef = 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 prevPanRef = useRef(pan);\n    return {\n        isAnimatingRef,\n        isViewTransitionRef,\n        lastViewChangeTimeRef,\n        previousViewModeRef,\n        prevLayoutRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n        prevGroupingRef,\n        prevScrollTopRef,\n        prevScrollLeftRef,\n        prevPanRef,\n    };\n};\n"],"names":[],"mappings":";;MAca,uBAAuB,GAAG,CACnC,QAAkB,EAClB,GAA6B,KACP;AACtB,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC;AACpC,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC;AACzC,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,CAAC,CAAC;AACvC,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAW,QAAQ,CAAC;AACtD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAsB,IAAI,CAAC;AACvD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAsB,IAAI,CAAC;IAC7D,MAAM,oBAAoB,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE,CAAC;AAC3D,IAAA,MAAM,eAAe,GAAG,MAAM,CAAwB,IAAI,CAAC;AAC3D,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAS,CAAC,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAS,CAAC,CAAC;AAC3C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC;IAC9B,OAAO;QACH,cAAc;QACd,mBAAmB;QACnB,qBAAqB;QACrB,mBAAmB;QACnB,aAAa;QACb,mBAAmB;QACnB,oBAAoB;QACpB,eAAe;QACf,gBAAgB;QAChB,iBAAiB;QACjB,UAAU;KACb;AACL;;"}

package/dist/esm/TimeMachine/EventsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventsView.d.ts","sourceRoot":"","sources":["../../../TimeMachine/EventsView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAMH,KAAK,cAAc,EACtB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AACrC,OAAO,EAAE,KAAK,iBAAiB,EAA4B,MAAM,wBAAqB,CAAC;AAKvF,qDAAqD;AACrD,MAAM,WAAW,eAAe;IAC5B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACpC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,6DAA6D;IAC7D,MAAM,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,0EAA0E;IAC1E,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC5C;AAKD,0DAA0D;AAC1D,MAAM,WAAW,eAAe;IAC5B,wEAAwE;IACxE,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAKD,eAAO,MAAM,mCAAmC,0DACa,CAAC;AAE9D,6EAA6E;AAC7E,eAAO,MAAM,UAAU,uCAKpB,eAAe,gCAwKjB,CAAC"}
+{"version":3,"file":"EventsView.d.ts","sourceRoot":"","sources":["../../../TimeMachine/EventsView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAMH,KAAK,cAAc,EACtB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AACrC,OAAO,EAAE,KAAK,iBAAiB,EAA4B,MAAM,wBAAqB,CAAC;AAMvF,qDAAqD;AACrD,MAAM,WAAW,eAAe;IAC5B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACpC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,6DAA6D;IAC7D,MAAM,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,0EAA0E;IAC1E,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC5C;AAKD,0DAA0D;AAC1D,MAAM,WAAW,eAAe;IAC5B,wEAAwE;IACxE,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,mCAAmC,0DACa,CAAC;AAE9D,6EAA6E;AAC7E,eAAO,MAAM,UAAU,uCAKpB,eAAe,gCAwKjB,CAAC"}

package/dist/esm/TimeMachine/EventsView.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { createContext, useRef, useContext, useState, useEffect } from 'react';
 import { defaultTimeMachineLabels } from './TimeMachineLabels.js';
 import { Properties } from './Properties.js';
+import { classNames } from '../ClassNames/classNames.js';
 
-const classNames = (...values) => values.filter(Boolean).join(' ');
 const SelectedEventSequenceNumbersContext = createContext(undefined);
 const EventsView = ({ events, className, pt, labels = defaultTimeMachineLabels, }) => {
     const containerRef = useRef(null);

package/dist/esm/TimeMachine/EventsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventsView.js","sources":["../../../TimeMachine/EventsView.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 {\n    createContext,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n    type HTMLAttributes,\n} from 'react';\nimport type { Event } from './types';\nimport { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';\nimport { Properties } from './Properties';\nimport type { ExactPartKeys } from '../types/ExactPartKeys';\nimport type { PartsOf } from '../types/parts';\n\n/** Stable part attributes for {@link EventsView}. */\nexport interface EventsViewParts {\n    /** Scrollable container wrapping the entire vertical timeline. */\n    timeline?: HTMLAttributes<HTMLDivElement>;\n    /** One timeline event article element with `data-position` (left/right). */\n    event?: HTMLAttributes<HTMLElement>;\n    /** Separator column containing the marker and optional connector line. */\n    separator?: HTMLAttributes<HTMLDivElement>;\n    /** Event marker (the circular dot on the timeline spine). */\n    marker?: HTMLAttributes<HTMLDivElement>;\n    /** Vertical line connecting consecutive event markers. */\n    connector?: HTMLAttributes<HTMLDivElement>;\n    /** Content panel showing the event card (type, timestamp, properties). */\n    content?: HTMLAttributes<HTMLDivElement>;\n}\n\nconst eventsViewPartsMatchManifest: ExactPartKeys<EventsViewParts, PartsOf<'EventsView'>> = true;\nvoid eventsViewPartsMatchManifest;\n\n/** Props for the standalone, localized event timeline. */\nexport interface EventsViewProps {\n    /** Ordered list of domain events to render in the vertical timeline. */\n    events: Event[];\n    /** CSS class name applied to the timeline root. */\n    className?: string;\n    /** Cratis-owned per-part attributes for timeline, event, separator, marker, connector, content. */\n    pt?: EventsViewParts;\n    /**\n     * @deprecated Cratis parts always merge. Remove this renderer-era option.\n     */\n    ptOptions?: object;\n    /**\n     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.\n     */\n    unstyled?: boolean;\n    /** Override any user-facing string (for localization). See {@link TimeMachineLabels}. */\n    labels?: TimeMachineLabels;\n}\n\nconst classNames = (...values: Array<string | undefined>) =>\n    values.filter(Boolean).join(' ');\n\nexport const SelectedEventSequenceNumbersContext =\n    createContext<ReadonlySet<number> | undefined>(undefined);\n\n/** Vertical, alternating timeline visualization of an ordered event list. */\nexport const EventsView = ({\n    events,\n    className,\n    pt,\n    labels = defaultTimeMachineLabels,\n}: EventsViewProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const selectedEventSequenceNumbers = useContext(\n        SelectedEventSequenceNumbersContext,\n    );\n    const [canScrollUp, setCanScrollUp] = useState(false);\n    const [canScrollDown, setCanScrollDown] = useState(false);\n\n    const updateScrollState = () => {\n        const container = containerRef.current;\n        if (!container) {\n            setCanScrollUp(false);\n            setCanScrollDown(false);\n            return;\n        }\n        const { scrollTop, scrollHeight, clientHeight } = container;\n        setCanScrollUp(scrollTop > 1);\n        setCanScrollDown(scrollTop + clientHeight < scrollHeight - 1);\n    };\n\n    useEffect(() => {\n        updateScrollState();\n        const container = containerRef.current;\n        if (!container) return;\n        container.addEventListener('scroll', updateScrollState);\n        return () => container.removeEventListener('scroll', updateScrollState);\n    }, [events.length]);\n\n    const scrollBehavior = (): ScrollBehavior =>\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n    const scrollToTop = () =>\n        containerRef.current?.scrollTo({ top: 0, behavior: scrollBehavior() });\n    const scrollToBottom = () => {\n        const container = containerRef.current;\n        if (container)\n            container.scrollTo({\n                top: container.scrollHeight,\n                behavior: scrollBehavior(),\n            });\n    };\n\n    return (\n        <div\n            className='events-view-container'\n            ref={containerRef}\n            role='group'\n            aria-label={labels.eventTimelineRegion}\n            tabIndex={0}\n        >\n            {canScrollUp && (\n                <div className='events-view-scroll-button-wrapper events-view-scroll-button-wrapper--top'>\n                    <button\n                        type='button'\n                        className='events-view-scroll-button events-view-scroll-button--top'\n                        onClick={scrollToTop}\n                        aria-label={labels.scrollToTop}\n                    >\n                        ↑\n                    </button>\n                </div>\n            )}\n            <div\n                {...pt?.timeline}\n                className={classNames(\n                    'events-view-timeline',\n                    pt?.timeline?.className,\n                    className,\n                )}\n                data-cratis-part='timeline'\n            >\n                {events.map((event, index) => {\n                    const position = index % 2 === 0 ? 'right' : 'left';\n                    const isSelected = selectedEventSequenceNumbers?.has(\n                        event.sequenceNumber,\n                    );\n                    return (\n                        <article\n                            key={`${event.type}-${event.occurred.toISOString()}-${index}`}\n                            {...pt?.event}\n                            className={classNames(\n                                'events-view-timeline-event',\n                                pt?.event?.className,\n                            )}\n                            data-cratis-part='event'\n                            data-position={position}\n                            data-selected={isSelected || undefined}\n                        >\n                            <div\n                                {...pt?.separator}\n                                className={classNames(\n                                    'events-view-timeline-separator',\n                                    pt?.separator?.className,\n                                )}\n                                data-cratis-part='separator'\n                            >\n                                <div\n                                    {...pt?.marker}\n                                    className={classNames(\n                                        'events-view-marker',\n                                        pt?.marker?.className,\n                                    )}\n                                    data-cratis-part='marker'\n                                    data-selected={isSelected || undefined}\n                                >\n                                    <div className='events-view-marker-dot' />\n                                </div>\n                                {index < events.length - 1 && (\n                                    <div\n                                        {...pt?.connector}\n                                        className={classNames(\n                                            'events-view-timeline-connector',\n                                            pt?.connector?.className,\n                                        )}\n                                        data-cratis-part='connector'\n                                    />\n                                )}\n                            </div>\n                            <div\n                                {...pt?.content}\n                                className={classNames(\n                                    'events-view-timeline-content',\n                                    pt?.content?.className,\n                                )}\n                                data-cratis-part='content'\n                            >\n                                <div\n                                    className={`events-view-event-card events-view-event-card--${position}`}\n                                >\n                                    <div\n                                        className={`events-view-event-header ${position === 'left' ? 'events-view-event-header--right' : ''}`}\n                                    >\n                                        <h3\n                                            className={`events-view-event-name ${position === 'left' ? 'events-view-event-name--right' : ''}`}\n                                        >\n                                            {event.type}\n                                        </h3>\n                                        <div\n                                            className={`events-view-event-timestamp ${position === 'left' ? 'events-view-event-timestamp--right' : ''}`}\n                                        >\n                                            {event.occurred.toLocaleString()}\n                                        </div>\n                                    </div>\n                                    <div className='events-view-event-properties'>\n                                        <Properties\n                                            data={event.content || {}}\n                                            align='left'\n                                        />\n                                    </div>\n                                </div>\n                            </div>\n                        </article>\n                    );\n                })}\n            </div>\n            {canScrollDown && (\n                <div className='events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom'>\n                    <button\n                        type='button'\n                        className='events-view-scroll-button events-view-scroll-button--bottom'\n                        onClick={scrollToBottom}\n                        aria-label={labels.scrollToBottom}\n                    >\n                        ↓\n                    </button>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"EventsView.js","sources":["../../../TimeMachine/EventsView.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 {\n    createContext,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n    type HTMLAttributes,\n} from 'react';\nimport type { Event } from './types';\nimport { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';\nimport { Properties } from './Properties';\nimport type { ExactPartKeys } from '../types/ExactPartKeys';\nimport type { PartsOf } from '../types/parts';\nimport { classNames } from '../ClassNames/classNames';\n\n/** Stable part attributes for {@link EventsView}. */\nexport interface EventsViewParts {\n    /** Scrollable container wrapping the entire vertical timeline. */\n    timeline?: HTMLAttributes<HTMLDivElement>;\n    /** One timeline event article element with `data-position` (left/right). */\n    event?: HTMLAttributes<HTMLElement>;\n    /** Separator column containing the marker and optional connector line. */\n    separator?: HTMLAttributes<HTMLDivElement>;\n    /** Event marker (the circular dot on the timeline spine). */\n    marker?: HTMLAttributes<HTMLDivElement>;\n    /** Vertical line connecting consecutive event markers. */\n    connector?: HTMLAttributes<HTMLDivElement>;\n    /** Content panel showing the event card (type, timestamp, properties). */\n    content?: HTMLAttributes<HTMLDivElement>;\n}\n\nconst eventsViewPartsMatchManifest: ExactPartKeys<EventsViewParts, PartsOf<'EventsView'>> = true;\nvoid eventsViewPartsMatchManifest;\n\n/** Props for the standalone, localized event timeline. */\nexport interface EventsViewProps {\n    /** Ordered list of domain events to render in the vertical timeline. */\n    events: Event[];\n    /** CSS class name applied to the timeline root. */\n    className?: string;\n    /** Cratis-owned per-part attributes for timeline, event, separator, marker, connector, content. */\n    pt?: EventsViewParts;\n    /**\n     * @deprecated Cratis parts always merge. Remove this renderer-era option.\n     */\n    ptOptions?: object;\n    /**\n     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.\n     */\n    unstyled?: boolean;\n    /** Override any user-facing string (for localization). See {@link TimeMachineLabels}. */\n    labels?: TimeMachineLabels;\n}\n\nexport const SelectedEventSequenceNumbersContext =\n    createContext<ReadonlySet<number> | undefined>(undefined);\n\n/** Vertical, alternating timeline visualization of an ordered event list. */\nexport const EventsView = ({\n    events,\n    className,\n    pt,\n    labels = defaultTimeMachineLabels,\n}: EventsViewProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const selectedEventSequenceNumbers = useContext(\n        SelectedEventSequenceNumbersContext,\n    );\n    const [canScrollUp, setCanScrollUp] = useState(false);\n    const [canScrollDown, setCanScrollDown] = useState(false);\n\n    const updateScrollState = () => {\n        const container = containerRef.current;\n        if (!container) {\n            setCanScrollUp(false);\n            setCanScrollDown(false);\n            return;\n        }\n        const { scrollTop, scrollHeight, clientHeight } = container;\n        setCanScrollUp(scrollTop > 1);\n        setCanScrollDown(scrollTop + clientHeight < scrollHeight - 1);\n    };\n\n    useEffect(() => {\n        updateScrollState();\n        const container = containerRef.current;\n        if (!container) return;\n        container.addEventListener('scroll', updateScrollState);\n        return () => container.removeEventListener('scroll', updateScrollState);\n    }, [events.length]);\n\n    const scrollBehavior = (): ScrollBehavior =>\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n    const scrollToTop = () =>\n        containerRef.current?.scrollTo({ top: 0, behavior: scrollBehavior() });\n    const scrollToBottom = () => {\n        const container = containerRef.current;\n        if (container)\n            container.scrollTo({\n                top: container.scrollHeight,\n                behavior: scrollBehavior(),\n            });\n    };\n\n    return (\n        <div\n            className='events-view-container'\n            ref={containerRef}\n            role='group'\n            aria-label={labels.eventTimelineRegion}\n            tabIndex={0}\n        >\n            {canScrollUp && (\n                <div className='events-view-scroll-button-wrapper events-view-scroll-button-wrapper--top'>\n                    <button\n                        type='button'\n                        className='events-view-scroll-button events-view-scroll-button--top'\n                        onClick={scrollToTop}\n                        aria-label={labels.scrollToTop}\n                    >\n                        ↑\n                    </button>\n                </div>\n            )}\n            <div\n                {...pt?.timeline}\n                className={classNames(\n                    'events-view-timeline',\n                    pt?.timeline?.className,\n                    className,\n                )}\n                data-cratis-part='timeline'\n            >\n                {events.map((event, index) => {\n                    const position = index % 2 === 0 ? 'right' : 'left';\n                    const isSelected = selectedEventSequenceNumbers?.has(\n                        event.sequenceNumber,\n                    );\n                    return (\n                        <article\n                            key={`${event.type}-${event.occurred.toISOString()}-${index}`}\n                            {...pt?.event}\n                            className={classNames(\n                                'events-view-timeline-event',\n                                pt?.event?.className,\n                            )}\n                            data-cratis-part='event'\n                            data-position={position}\n                            data-selected={isSelected || undefined}\n                        >\n                            <div\n                                {...pt?.separator}\n                                className={classNames(\n                                    'events-view-timeline-separator',\n                                    pt?.separator?.className,\n                                )}\n                                data-cratis-part='separator'\n                            >\n                                <div\n                                    {...pt?.marker}\n                                    className={classNames(\n                                        'events-view-marker',\n                                        pt?.marker?.className,\n                                    )}\n                                    data-cratis-part='marker'\n                                    data-selected={isSelected || undefined}\n                                >\n                                    <div className='events-view-marker-dot' />\n                                </div>\n                                {index < events.length - 1 && (\n                                    <div\n                                        {...pt?.connector}\n                                        className={classNames(\n                                            'events-view-timeline-connector',\n                                            pt?.connector?.className,\n                                        )}\n                                        data-cratis-part='connector'\n                                    />\n                                )}\n                            </div>\n                            <div\n                                {...pt?.content}\n                                className={classNames(\n                                    'events-view-timeline-content',\n                                    pt?.content?.className,\n                                )}\n                                data-cratis-part='content'\n                            >\n                                <div\n                                    className={`events-view-event-card events-view-event-card--${position}`}\n                                >\n                                    <div\n                                        className={`events-view-event-header ${position === 'left' ? 'events-view-event-header--right' : ''}`}\n                                    >\n                                        <h3\n                                            className={`events-view-event-name ${position === 'left' ? 'events-view-event-name--right' : ''}`}\n                                        >\n                                            {event.type}\n                                        </h3>\n                                        <div\n                                            className={`events-view-event-timestamp ${position === 'left' ? 'events-view-event-timestamp--right' : ''}`}\n                                        >\n                                            {event.occurred.toLocaleString()}\n                                        </div>\n                                    </div>\n                                    <div className='events-view-event-properties'>\n                                        <Properties\n                                            data={event.content || {}}\n                                            align='left'\n                                        />\n                                    </div>\n                                </div>\n                            </div>\n                        </article>\n                    );\n                })}\n            </div>\n            {canScrollDown && (\n                <div className='events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom'>\n                    <button\n                        type='button'\n                        className='events-view-scroll-button events-view-scroll-button--bottom'\n                        onClick={scrollToBottom}\n                        aria-label={labels.scrollToBottom}\n                    >\n                        ↓\n                    </button>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components",
-    "version": "4.21.0",
+    "version": "4.22.0",
     "description": "React components for CQRS and event-sourced apps — command dialogs, typed forms, and query-backed data tables for Cratis Arc",
     "keywords": [
         "react",