@cratis/components 0.1.9

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

@@ -0,0 +1,144 @@
+'use strict';
+
+const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+function animateZoomAndScroll({ container, cardPosition, targetCardPosition, getCardPositionAtZoom, getLayoutSizeAtZoom, spacer, startZoom, targetZoom, targetScrollLeft, targetScrollTop, duration = 300, easing = easeOutCubic, onUpdate, onComplete, startScrollLeft, startScrollTop, }) {
+    container.style.scrollBehavior = 'auto';
+    let startTime = null;
+    let rafId = null;
+    const initialScrollLeft = startScrollLeft ?? container.scrollLeft;
+    const initialScrollTop = startScrollTop ?? container.scrollTop;
+    const startCardCenterX = cardPosition ? (cardPosition.x * startZoom + (cardPosition.width * startZoom) / 2) : 0;
+    const startCardCenterY = cardPosition ? (cardPosition.y * startZoom + (cardPosition.height * startZoom) / 2) : 0;
+    const startCardScreenX = startCardCenterX - initialScrollLeft;
+    const startCardScreenY = startCardCenterY - initialScrollTop;
+    const animate = (timestamp) => {
+        if (startTime === null) {
+            startTime = timestamp;
+        }
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(1, elapsed / duration);
+        const easedProgress = easing(progress);
+        const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
+        if (spacer && getLayoutSizeAtZoom) {
+            const size = getLayoutSizeAtZoom(currentZoom);
+            if (size) {
+                spacer.style.width = `${size.width * currentZoom}px`;
+                spacer.style.height = `${size.height * currentZoom}px`;
+            }
+        }
+        onUpdate(currentZoom);
+        if (cardPosition) {
+            let currentCardX;
+            let currentCardY;
+            if (getCardPositionAtZoom) {
+                const pos = getCardPositionAtZoom(currentZoom);
+                if (pos) {
+                    currentCardX = pos.x;
+                    currentCardY = pos.y;
+                }
+                else {
+                    currentCardX = cardPosition.x;
+                    currentCardY = cardPosition.y;
+                }
+            }
+            else {
+                currentCardX = targetCardPosition
+                    ? cardPosition.x + (targetCardPosition.x - cardPosition.x) * easedProgress
+                    : cardPosition.x;
+                currentCardY = targetCardPosition
+                    ? cardPosition.y + (targetCardPosition.y - cardPosition.y) * easedProgress
+                    : cardPosition.y;
+            }
+            const currentCardCenterX = currentCardX * currentZoom + (cardPosition.width * currentZoom) / 2;
+            const currentCardCenterY = currentCardY * currentZoom + (cardPosition.height * currentZoom) / 2;
+            const endCardX = targetCardPosition ? targetCardPosition.x : cardPosition.x;
+            const endCardY = targetCardPosition ? targetCardPosition.y : cardPosition.y;
+            const endCardCenterX = endCardX * targetZoom + (cardPosition.width * targetZoom) / 2;
+            const endCardCenterY = endCardY * targetZoom + (cardPosition.height * targetZoom) / 2;
+            const endCardScreenX = endCardCenterX - targetScrollLeft;
+            const endCardScreenY = endCardCenterY - targetScrollTop;
+            const desiredScreenX = startCardScreenX + (endCardScreenX - startCardScreenX) * easedProgress;
+            const desiredScreenY = startCardScreenY + (endCardScreenY - startCardScreenY) * easedProgress;
+            const neededScrollLeft = currentCardCenterX - desiredScreenX;
+            const neededScrollTop = currentCardCenterY - desiredScreenY;
+            let maxScrollLeft = container.scrollWidth - container.clientWidth;
+            let maxScrollTop = container.scrollHeight - container.clientHeight;
+            if (getLayoutSizeAtZoom) {
+                const size = getLayoutSizeAtZoom(currentZoom);
+                if (size) {
+                    maxScrollLeft = Math.max(0, size.width * currentZoom - container.clientWidth);
+                    maxScrollTop = Math.max(0, size.height * currentZoom - container.clientHeight);
+                }
+            }
+            container.scrollLeft = Math.min(Math.max(0, neededScrollLeft), maxScrollLeft);
+            container.scrollTop = Math.min(Math.max(0, neededScrollTop), maxScrollTop);
+        }
+        else {
+            const currentScrollLeft = initialScrollLeft + (targetScrollLeft - initialScrollLeft) * easedProgress;
+            const currentScrollTop = initialScrollTop + (targetScrollTop - initialScrollTop) * easedProgress;
+            container.scrollLeft = currentScrollLeft;
+            container.scrollTop = currentScrollTop;
+        }
+        if (progress < 1) {
+            rafId = requestAnimationFrame(animate);
+        }
+        else {
+            container.style.scrollBehavior = '';
+            container.scrollLeft = targetScrollLeft;
+            container.scrollTop = targetScrollTop;
+            onComplete?.();
+        }
+    };
+    rafId = requestAnimationFrame(animate);
+    return () => {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            container.style.scrollBehavior = '';
+        }
+    };
+}
+function calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailPanelWidth = 0, totalHeight) {
+    const cardCenterX = cardPosition.x * zoomLevel + (cardPosition.width * zoomLevel) / 2;
+    const cardCenterY = cardPosition.y * zoomLevel + (cardPosition.height * zoomLevel) / 2;
+    const availableWidth = container.clientWidth - detailPanelWidth;
+    const targetX = availableWidth / 2;
+    const targetY = container.clientHeight / 2;
+    const scrollLeft = Math.max(0, cardCenterX - targetX);
+    let scrollTop = Math.max(0, cardCenterY - targetY);
+    console.log('[Animation] calculateCenterScrollPosition', {
+        cardY: cardPosition.y,
+        zoomLevel,
+        cardCenterY,
+        targetY,
+        initialScrollTop: scrollTop,
+        totalHeight,
+        containerHeight: container.clientHeight
+    });
+    if (totalHeight) {
+        const contentHeight = totalHeight * zoomLevel;
+        const viewportHeight = container.clientHeight;
+        const maxScrollTop = Math.max(0, contentHeight - viewportHeight);
+        console.log('[Animation] Clamping', {
+            contentHeight,
+            viewportHeight,
+            maxScrollTop,
+            currentScrollTop: scrollTop,
+            clamped: Math.min(scrollTop, maxScrollTop)
+        });
+        scrollTop = Math.min(scrollTop, maxScrollTop);
+    }
+    return { scrollLeft, scrollTop };
+}
+function smoothScrollTo(container, scrollLeft, scrollTop, smooth = true) {
+    container.scrollTo({
+        left: scrollLeft,
+        top: scrollTop,
+        behavior: smooth ? 'smooth' : 'auto',
+    });
+}
+
+exports.animateZoomAndScroll = animateZoomAndScroll;
+exports.calculateCenterScrollPosition = calculateCenterScrollPosition;
+exports.easeOutCubic = easeOutCubic;
+exports.smoothScrollTo = smoothScrollTo;
+//# sourceMappingURL=animations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sources":["../../../../PivotViewer/utils/animations.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\nexport type EasingFunction = (t: number) => number;\n\nexport const easeOutCubic: EasingFunction = (t: number) => 1 - Math.pow(1 - t, 3);\n\nexport interface ZoomAnimationParams {\n  startZoom: number;\n  targetZoom: number;\n  duration?: number;\n  easing?: EasingFunction;\n}\n\nexport interface ScrollAnimationParams {\n  targetScrollLeft: number;\n  targetScrollTop: number;\n}\n\nexport interface ZoomScrollAnimationParams extends ZoomAnimationParams, ScrollAnimationParams {\n  container: HTMLElement;\n  cardPosition?: { x: number; y: number; width: number; height: number } | null;\n  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;\n  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;\n  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };\n  spacer?: HTMLElement | null;\n  onUpdate: (zoom: number) => void;\n  onComplete?: () => void;\n  startScrollLeft?: number; // Optional explicit start scroll\n  startScrollTop?: number; // Optional explicit start scroll\n}\n\n/**\n * Animate zoom and scroll together, keeping a specific element centered\n */\nexport function animateZoomAndScroll({\n  container,\n  cardPosition,\n  targetCardPosition,\n  getCardPositionAtZoom,\n  getLayoutSizeAtZoom,\n  spacer,\n  startZoom,\n  targetZoom,\n  targetScrollLeft,\n  targetScrollTop,\n  duration = 300,\n  easing = easeOutCubic,\n  onUpdate,\n  onComplete,\n  startScrollLeft,\n  startScrollTop,\n}: ZoomScrollAnimationParams): () => void {\n  container.style.scrollBehavior = 'auto';\n\n  let startTime: number | null = null;\n  let rafId: number | null = null;\n\n  // Capture start scroll if not provided\n  const initialScrollLeft = startScrollLeft ?? container.scrollLeft;\n  const initialScrollTop = startScrollTop ?? container.scrollTop;\n\n  // Calculate initial center point relative to viewport\n  const startCardCenterX = cardPosition ? (cardPosition.x * startZoom + (cardPosition.width * startZoom) / 2) : 0;\n  const startCardCenterY = cardPosition ? (cardPosition.y * startZoom + (cardPosition.height * startZoom) / 2) : 0;\n\n  const startCardScreenX = startCardCenterX - initialScrollLeft;\n  const startCardScreenY = startCardCenterY - initialScrollTop;\n\n  const animate = (timestamp: number) => {\n    if (startTime === null) {\n      startTime = timestamp;\n    }\n\n    const elapsed = timestamp - startTime;\n    const progress = Math.min(1, elapsed / duration);\n    const easedProgress = easing(progress);\n\n    const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;\n\n    // Update spacer size synchronously if possible\n    if (spacer && getLayoutSizeAtZoom) {\n        const size = getLayoutSizeAtZoom(currentZoom);\n        if (size) {\n            spacer.style.width = `${size.width * currentZoom}px`;\n            spacer.style.height = `${size.height * currentZoom}px`;\n        }\n    }\n\n    onUpdate(currentZoom);\n\n    if (cardPosition) {\n      let currentCardX: number;\n      let currentCardY: number;\n\n      if (getCardPositionAtZoom) {\n        const pos = getCardPositionAtZoom(currentZoom);\n        if (pos) {\n          currentCardX = pos.x;\n          currentCardY = pos.y;\n        } else {\n          currentCardX = cardPosition.x;\n          currentCardY = cardPosition.y;\n        }\n      } else {\n        // Interpolate card position if target is provided (for layouts that change with zoom)\n        currentCardX = targetCardPosition\n          ? cardPosition.x + (targetCardPosition.x - cardPosition.x) * easedProgress\n          : cardPosition.x;\n        currentCardY = targetCardPosition\n          ? cardPosition.y + (targetCardPosition.y - cardPosition.y) * easedProgress\n          : cardPosition.y;\n      }\n\n      // Calculate where the card center is at current zoom\n      const currentCardCenterX = currentCardX * currentZoom + (cardPosition.width * currentZoom) / 2;\n      const currentCardCenterY = currentCardY * currentZoom + (cardPosition.height * currentZoom) / 2;\n\n      // Calculate where the card center will be at the end of animation (relative to viewport)\n      // Target scroll position is where we want to end up\n      const endCardX = targetCardPosition ? targetCardPosition.x : cardPosition.x;\n      const endCardY = targetCardPosition ? targetCardPosition.y : cardPosition.y;\n\n      const endCardCenterX = endCardX * targetZoom + (cardPosition.width * targetZoom) / 2;\n      const endCardCenterY = endCardY * targetZoom + (cardPosition.height * targetZoom) / 2;\n\n      const endCardScreenX = endCardCenterX - targetScrollLeft;\n      const endCardScreenY = endCardCenterY - targetScrollTop;\n\n      // Interpolate the desired screen position\n      const desiredScreenX = startCardScreenX + (endCardScreenX - startCardScreenX) * easedProgress;\n      const desiredScreenY = startCardScreenY + (endCardScreenY - startCardScreenY) * easedProgress;\n\n      // Calculate needed scroll position to put card at desired screen position\n      const neededScrollLeft = currentCardCenterX - desiredScreenX;\n      const neededScrollTop = currentCardCenterY - desiredScreenY;\n\n      let maxScrollLeft = container.scrollWidth - container.clientWidth;\n      let maxScrollTop = container.scrollHeight - container.clientHeight;\n\n      // If we have explicit layout size, use it for clamping to avoid DOM sync issues\n      if (getLayoutSizeAtZoom) {\n        const size = getLayoutSizeAtZoom(currentZoom);\n        if (size) {\n           maxScrollLeft = Math.max(0, size.width * currentZoom - container.clientWidth);\n           maxScrollTop = Math.max(0, size.height * currentZoom - container.clientHeight);\n        }\n      }\n\n      // We can't clamp strictly during animation because the scrollWidth/Height might not have updated yet\n      // if the spacer hasn't resized. But usually spacer resizes immediately on zoom update.\n      // For safety, we just set it.\n      container.scrollLeft = Math.min(Math.max(0, neededScrollLeft), maxScrollLeft);\n      container.scrollTop = Math.min(Math.max(0, neededScrollTop), maxScrollTop);\n    } else {\n      // If no card position, just interpolate scroll position\n      // Use captured initial scroll positions for linear interpolation\n      const currentScrollLeft = initialScrollLeft + (targetScrollLeft - initialScrollLeft) * easedProgress;\n      const currentScrollTop = initialScrollTop + (targetScrollTop - initialScrollTop) * easedProgress;\n\n      container.scrollLeft = currentScrollLeft;\n      container.scrollTop = currentScrollTop;\n    }\n\n    if (progress < 1) {\n      rafId = requestAnimationFrame(animate);\n    } else {\n      container.style.scrollBehavior = '';\n      container.scrollLeft = targetScrollLeft;\n      container.scrollTop = targetScrollTop;\n      onComplete?.();\n    }\n  };\n\n  rafId = requestAnimationFrame(animate);\n\n  return () => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      container.style.scrollBehavior = '';\n    }\n  };\n}\n\n/**\n * Calculate scroll position to center a card in viewport, accounting for detail panel\n */\nexport function calculateCenterScrollPosition(\n  container: HTMLElement,\n  cardPosition: { x: number; y: number; width: number; height: number },\n  zoomLevel: number,\n  detailPanelWidth: number = 0,\n  totalHeight?: number\n): { scrollLeft: number; scrollTop: number } {\n  const cardCenterX = cardPosition.x * zoomLevel + (cardPosition.width * zoomLevel) / 2;\n  const cardCenterY = cardPosition.y * zoomLevel + (cardPosition.height * zoomLevel) / 2;\n\n  const availableWidth = container.clientWidth - detailPanelWidth;\n  const targetX = availableWidth / 2;\n  const targetY = container.clientHeight / 2;\n\n  const scrollLeft = Math.max(0, cardCenterX - targetX);\n  let scrollTop = Math.max(0, cardCenterY - targetY);\n\n  console.log('[Animation] calculateCenterScrollPosition', {\n    cardY: cardPosition.y,\n    zoomLevel,\n    cardCenterY,\n    targetY,\n    initialScrollTop: scrollTop,\n    totalHeight,\n    containerHeight: container.clientHeight\n  });\n\n  // If totalHeight is provided, clamp to valid scroll range\n  if (totalHeight) {\n    const contentHeight = totalHeight * zoomLevel;\n    const viewportHeight = container.clientHeight;\n    const maxScrollTop = Math.max(0, contentHeight - viewportHeight);\n\n    console.log('[Animation] Clamping', {\n      contentHeight,\n      viewportHeight,\n      maxScrollTop,\n      currentScrollTop: scrollTop,\n      clamped: Math.min(scrollTop, maxScrollTop)\n    });\n\n    scrollTop = Math.min(scrollTop, maxScrollTop);\n  }\n\n  return { scrollLeft, scrollTop };\n}\n\n/**\n * Smooth scroll to position\n */\nexport function smoothScrollTo(\n  container: HTMLElement,\n  scrollLeft: number,\n  scrollTop: number,\n  smooth: boolean = true\n): void {\n  container.scrollTo({\n    left: scrollLeft,\n    top: scrollTop,\n    behavior: smooth ? 'smooth' : 'auto',\n  });\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+'use strict';
+
+const ZOOM_MAX = 3;
+const DETAIL_PANEL_WIDTH = 380;
+const ZOOM_MULTIPLIER = 1.15;
+const MIN_ZOOM_ON_SELECT = 1.2;
+
+exports.DETAIL_PANEL_WIDTH = DETAIL_PANEL_WIDTH;
+exports.MIN_ZOOM_ON_SELECT = MIN_ZOOM_ON_SELECT;
+exports.ZOOM_MAX = ZOOM_MAX;
+exports.ZOOM_MULTIPLIER = ZOOM_MULTIPLIER;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../PivotViewer/utils/constants.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n// Zoom constants\nexport const ZOOM_MIN = 0.1;\nexport const ZOOM_MAX = 3;\nexport const ZOOM_STEP = 0.05;\n\n// Layout constants\nexport const GROUP_SPACING = 40;\nexport const CARD_GAP = 8;\nexport const CARDS_PER_COLUMN = 5;\nexport const BASE_CARD_WIDTH = 180;\nexport const BASE_CARD_HEIGHT = 140;\nexport const DETAIL_PANEL_WIDTH = 380;\n\n// Animation constants\nexport const ZOOM_ANIMATION_DURATION = 300;\nexport const ZOOM_MULTIPLIER = 1.15;\nexport const MIN_ZOOM_ON_SELECT = 1.2;\n"],"names":[],"mappings":";;AAKO,MAAM,QAAQ,GAAG;AASjB,MAAM,kBAAkB,GAAG;AAI3B,MAAM,eAAe,GAAG;AACxB,MAAM,kBAAkB,GAAG;;;;;;;"}

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

@@ -0,0 +1,136 @@
+'use strict';
+
+var animations = require('./animations.js');
+var constants = require('./constants.js');
+
+function handleCardSelection({ itemId, selectedItemId, container, cardPosition, targetCardPosition, getCardPositionAtZoom, getLayoutSizeAtZoom, spacer, viewMode, zoomLevel, totalHeight, preSelectionState, startScrollPosition, setZoomLevel, setIsZooming, setSelectedItem, setPreSelectionState, item, }) {
+    if (selectedItemId === itemId) {
+        deselectCard({
+            container,
+            cardPosition,
+            targetCardPosition,
+            getCardPositionAtZoom,
+            getLayoutSizeAtZoom,
+            spacer,
+            viewMode,
+            zoomLevel,
+            preSelectionState,
+            setZoomLevel,
+            setIsZooming,
+            setSelectedItem,
+            setPreSelectionState,
+        });
+        return;
+    }
+    const isFirstSelection = selectedItemId === null;
+    if (isFirstSelection) {
+        setPreSelectionState({
+            zoom: zoomLevel,
+            scrollLeft: container.scrollLeft,
+            scrollTop: container.scrollTop,
+        });
+    }
+    setSelectedItem(item);
+    if (isFirstSelection) {
+        if (viewMode === 'collection') {
+            if (cardPosition) {
+                const { scrollLeft, scrollTop } = animations.calculateCenterScrollPosition(container, cardPosition, zoomLevel, 0, totalHeight);
+                animations.smoothScrollTo(container, scrollLeft, scrollTop, true);
+            }
+        }
+        else {
+            zoomAndCenterCard({
+                container,
+                cardPosition,
+                targetCardPosition,
+                getCardPositionAtZoom,
+                getLayoutSizeAtZoom,
+                spacer,
+                zoomLevel,
+                totalHeight,
+                startScrollPosition,
+                setZoomLevel,
+                setIsZooming,
+            });
+        }
+    }
+    else {
+        if (cardPosition) {
+            const detailWidth = viewMode === 'collection' ? 0 : constants.DETAIL_PANEL_WIDTH;
+            const { scrollLeft, scrollTop } = animations.calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, totalHeight);
+            animations.smoothScrollTo(container, scrollLeft, scrollTop, true);
+        }
+    }
+}
+function deselectCard({ container, cardPosition, targetCardPosition, getCardPositionAtZoom, getLayoutSizeAtZoom, spacer, viewMode, zoomLevel, preSelectionState, setZoomLevel, setIsZooming, setSelectedItem, setPreSelectionState, }) {
+    if (!preSelectionState) {
+        setSelectedItem(null);
+        return;
+    }
+    if (viewMode === 'collection') {
+        setSelectedItem(null);
+        animations.smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
+        setPreSelectionState(null);
+        return;
+    }
+    const zoomChanged = Math.abs(preSelectionState.zoom - zoomLevel) > 0.001;
+    if (!zoomChanged || !cardPosition) {
+        setSelectedItem(null);
+        animations.smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
+        setPreSelectionState(null);
+        return;
+    }
+    setIsZooming(true);
+    animations.animateZoomAndScroll({
+        container,
+        cardPosition,
+        targetCardPosition,
+        getCardPositionAtZoom,
+        getLayoutSizeAtZoom,
+        spacer,
+        startZoom: zoomLevel,
+        targetZoom: preSelectionState.zoom,
+        targetScrollLeft: preSelectionState.scrollLeft,
+        targetScrollTop: preSelectionState.scrollTop,
+        onUpdate: setZoomLevel,
+        onComplete: () => {
+            setIsZooming(false);
+            setSelectedItem(null);
+            setPreSelectionState(null);
+        },
+    });
+}
+function zoomAndCenterCard({ container, cardPosition, targetCardPosition, getCardPositionAtZoom, getLayoutSizeAtZoom, spacer, zoomLevel, totalHeight, startScrollPosition, setZoomLevel, setIsZooming, }) {
+    const targetZoom = Math.min(constants.ZOOM_MAX, Math.max(constants.MIN_ZOOM_ON_SELECT, zoomLevel * constants.ZOOM_MULTIPLIER));
+    const shouldZoom = Math.abs(targetZoom - zoomLevel) > 0.001;
+    if (!shouldZoom || !cardPosition) {
+        if (cardPosition) {
+            const { scrollLeft, scrollTop } = animations.calculateCenterScrollPosition(container, cardPosition, zoomLevel, constants.DETAIL_PANEL_WIDTH, totalHeight);
+            animations.smoothScrollTo(container, scrollLeft, scrollTop, true);
+        }
+        return;
+    }
+    setIsZooming(true);
+    const { scrollLeft: targetScrollLeft, scrollTop: targetScrollTop } = animations.calculateCenterScrollPosition(container, targetCardPosition || cardPosition, targetZoom, constants.DETAIL_PANEL_WIDTH, totalHeight);
+    animations.animateZoomAndScroll({
+        container,
+        cardPosition,
+        targetCardPosition,
+        getCardPositionAtZoom,
+        getLayoutSizeAtZoom,
+        spacer,
+        startZoom: zoomLevel,
+        targetZoom,
+        targetScrollLeft,
+        targetScrollTop,
+        startScrollLeft: startScrollPosition?.x,
+        startScrollTop: startScrollPosition?.y,
+        onUpdate: setZoomLevel,
+        onComplete: () => {
+            setIsZooming(false);
+        },
+    });
+}
+
+exports.handleCardSelection = handleCardSelection;
+//# sourceMappingURL=selection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","sources":["../../../../PivotViewer/utils/selection.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 { animateZoomAndScroll, calculateCenterScrollPosition, smoothScrollTo } from './animations';\nimport { ZOOM_MAX, MIN_ZOOM_ON_SELECT, ZOOM_MULTIPLIER, DETAIL_PANEL_WIDTH } from './constants';\nimport type { ViewMode } from '../components/Toolbar';\n\nexport interface SelectionState {\n  zoom: number;\n  scrollLeft: number;\n  scrollTop: number;\n}\n\nexport interface CardClickHandlerParams<TItem> {\n  item: TItem;\n  itemId: string | number;\n  selectedItemId: string | number | null;\n  container: HTMLElement;\n  cardPosition: { x: number; y: number; width: number; height: number } | null;\n  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;\n  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;\n  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };\n  spacer?: HTMLElement | null;\n  viewMode: ViewMode;\n  zoomLevel: number;\n  totalHeight?: number;\n  preSelectionState: SelectionState | null;\n  startScrollPosition?: { x: number; y: number };\n  setZoomLevel: (zoom: number) => void;\n  setIsZooming: (isZooming: boolean) => void;\n  setSelectedItem: (item: TItem | null) => void;\n  setPreSelectionState: (state: SelectionState | null) => void;\n}\n\n/**\n * Handle card click for selection with zoom and scroll animation\n */\nexport function handleCardSelection<TItem>({\n  itemId,\n  selectedItemId,\n  container,\n  cardPosition,\n  targetCardPosition,\n  getCardPositionAtZoom,\n  getLayoutSizeAtZoom,\n  spacer,\n  viewMode,\n  zoomLevel,\n  totalHeight,\n  preSelectionState,\n  startScrollPosition,\n  setZoomLevel,\n  setIsZooming,\n  setSelectedItem,\n  setPreSelectionState,\n  item,\n}: CardClickHandlerParams<TItem>): void {\n  // Clicking the same card - deselect\n  if (selectedItemId === itemId) {\n    deselectCard({\n      container,\n      cardPosition,\n      targetCardPosition,\n      getCardPositionAtZoom,\n      getLayoutSizeAtZoom,\n      spacer,\n      viewMode,\n      zoomLevel,\n      preSelectionState,\n      setZoomLevel,\n      setIsZooming,\n      setSelectedItem,\n      setPreSelectionState,\n    });\n    return;\n  }\n\n  // First selection - save state and zoom in\n  const isFirstSelection = selectedItemId === null;\n\n  if (isFirstSelection) {\n    setPreSelectionState({\n      zoom: zoomLevel,\n      scrollLeft: container.scrollLeft,\n      scrollTop: container.scrollTop,\n    });\n  }\n\n  setSelectedItem(item);\n\n  if (isFirstSelection) {\n    if (viewMode === 'collection') {\n      // Collection mode: just smooth scroll to center, no zoom\n      if (cardPosition) {\n        // In collection mode, we don't have a detail panel width offset because the panel is an overlay or separate\n        // But if we want to center it, we should consider if the detail panel pushes content\n        // For now, assume 0 offset as per original code\n        const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, 0, totalHeight);\n        smoothScrollTo(container, scrollLeft, scrollTop, true);\n      }\n    } else {\n      // Grouped mode: animate zoom and scroll\n      zoomAndCenterCard({\n        container,\n        cardPosition,\n        targetCardPosition,\n        getCardPositionAtZoom,\n        getLayoutSizeAtZoom,\n        spacer,\n        itemId,\n        zoomLevel,\n        totalHeight,\n        startScrollPosition,\n        setZoomLevel,\n        setIsZooming,\n      });\n    }\n  } else {\n    // Subsequent selections: just center the new card\n    if (cardPosition) {\n      // In collection mode, we don't zoom, so we just center.\n      // In grouped mode, we might be zoomed in, so we center with offset.\n      const detailWidth = viewMode === 'collection' ? 0 : DETAIL_PANEL_WIDTH;\n      const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, totalHeight);\n      smoothScrollTo(container, scrollLeft, scrollTop, true);\n    }\n  }\n}\n\ninterface DeselectParams {\n  container: HTMLElement;\n  cardPosition: { x: number; y: number; width: number; height: number } | null;\n  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;\n  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;\n  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };\n  spacer?: HTMLElement | null;\n  viewMode: ViewMode;\n  zoomLevel: number;\n  preSelectionState: SelectionState | null;\n  setZoomLevel: (zoom: number) => void;\n  setIsZooming: (isZooming: boolean) => void;\n  setSelectedItem: (item: null) => void;\n  setPreSelectionState: (state: SelectionState | null) => void;\n}\n\n/**\n * Deselect card with zoom-out animation if needed\n */\nfunction deselectCard({\n  container,\n  cardPosition,\n  targetCardPosition,\n  getCardPositionAtZoom,\n  getLayoutSizeAtZoom,\n  spacer,\n  viewMode,\n  zoomLevel,\n  preSelectionState,\n  setZoomLevel,\n  setIsZooming,\n  setSelectedItem,\n  setPreSelectionState,\n}: DeselectParams): void {\n  if (!preSelectionState) {\n    setSelectedItem(null);\n    return;\n  }\n\n  // Collection mode: just scroll back\n  if (viewMode === 'collection') {\n    setSelectedItem(null);\n    smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);\n    setPreSelectionState(null);\n    return;\n  }\n\n  // Grouped mode: check if zoom changed\n  const zoomChanged = Math.abs(preSelectionState.zoom - zoomLevel) > 0.001;\n\n  if (!zoomChanged || !cardPosition) {\n    setSelectedItem(null);\n    smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);\n    setPreSelectionState(null);\n    return;\n  }\n\n  // Animate zoom out\n  setIsZooming(true);\n\n  animateZoomAndScroll({\n    container,\n    cardPosition,\n    targetCardPosition,\n    getCardPositionAtZoom,\n    getLayoutSizeAtZoom,\n    spacer,\n    startZoom: zoomLevel,\n    targetZoom: preSelectionState.zoom,\n    targetScrollLeft: preSelectionState.scrollLeft,\n    targetScrollTop: preSelectionState.scrollTop,\n    onUpdate: setZoomLevel,\n    onComplete: () => {\n      setIsZooming(false);\n      setSelectedItem(null);\n      setPreSelectionState(null);\n    },\n  });\n}\n\ninterface ZoomAndCenterParams {\n  container: HTMLElement;\n  cardPosition: { x: number; y: number; width: number; height: number } | null;\n  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;\n  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;\n  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };\n  spacer?: HTMLElement | null;\n  itemId: string | number;\n  zoomLevel: number;\n  totalHeight?: number;\n  startScrollPosition?: { x: number; y: number };\n  setZoomLevel: (zoom: number) => void;\n  setIsZooming: (isZooming: boolean) => void;\n}\n\n/**\n * Zoom in and center a card\n */\nfunction zoomAndCenterCard({\n  container,\n  cardPosition,\n  targetCardPosition,\n  getCardPositionAtZoom,\n  getLayoutSizeAtZoom,\n  spacer,\n  zoomLevel,\n  totalHeight,\n  startScrollPosition,\n  setZoomLevel,\n  setIsZooming,\n}: ZoomAndCenterParams): void {\n  const targetZoom = Math.min(ZOOM_MAX, Math.max(MIN_ZOOM_ON_SELECT, zoomLevel * ZOOM_MULTIPLIER));\n  const shouldZoom = Math.abs(targetZoom - zoomLevel) > 0.001;\n\n  if (!shouldZoom || !cardPosition) {\n    if (cardPosition) {\n      const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, DETAIL_PANEL_WIDTH, totalHeight);\n      smoothScrollTo(container, scrollLeft, scrollTop, true);\n    }\n    return;\n  }\n\n  setIsZooming(true);\n\n  // Use targetCardPosition if available, otherwise fallback to cardPosition\n  const { scrollLeft: targetScrollLeft, scrollTop: targetScrollTop } = calculateCenterScrollPosition(\n    container,\n    targetCardPosition || cardPosition,\n    targetZoom,\n    DETAIL_PANEL_WIDTH,\n    totalHeight\n  );\n\n  animateZoomAndScroll({\n    container,\n    cardPosition,\n    targetCardPosition,\n    getCardPositionAtZoom,\n    getLayoutSizeAtZoom,\n    spacer,\n    startZoom: zoomLevel,\n    targetZoom,\n    targetScrollLeft,\n    targetScrollTop,\n    startScrollLeft: startScrollPosition?.x,\n    startScrollTop: startScrollPosition?.y,\n    onUpdate: setZoomLevel,\n    onComplete: () => {\n      setIsZooming(false);\n    },\n  });\n}\n\n/**\n * Get card element by ID from container\n */\nexport function getCardElementById(_container: HTMLElement, _itemId: string | number): HTMLElement | null {\n  // Deprecated: Pixi renderer doesn't use DOM elements for cards\n  // Keep parameter names prefixed to indicate intentional non-use.\n  void _container;\n  void _itemId;\n  return null;\n}\n"],"names":["calculateCenterScrollPosition","smoothScrollTo","DETAIL_PANEL_WIDTH","animateZoomAndScroll","ZOOM_MAX","MIN_ZOOM_ON_SELECT","ZOOM_MULTIPLIER"],"mappings":"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"}

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

@@ -0,0 +1,150 @@
+'use strict';
+
+const ZOOM_MIN = 0.1;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.05;
+const toKey = (value) => {
+    if (value === undefined)
+        return 'undefined';
+    if (value === null)
+        return 'null';
+    if (value instanceof Date)
+        return value.toISOString();
+    if (typeof value === 'number' && Number.isNaN(value))
+        return 'nan';
+    return String(value);
+};
+const defaultFormat = (value) => {
+    if (value === undefined)
+        return 'Unknown';
+    if (value === null)
+        return 'None';
+    if (value instanceof Date)
+        return value.toLocaleString();
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    return String(value);
+};
+const buildFilterState = (filters) => {
+    const state = {};
+    filters?.forEach((filter) => {
+        state[filter.key] = new Set();
+    });
+    return state;
+};
+const buildRangeFilterState = (filters) => {
+    const state = {};
+    filters?.forEach((filter) => {
+        if (filter.type === 'number') {
+            state[filter.key] = null;
+        }
+    });
+    return state;
+};
+const applyFilters = (data, filters, state, rangeState, skipKey) => {
+    if (!filters?.length) {
+        return data;
+    }
+    const activeFilters = [];
+    for (const filter of filters) {
+        if (filter.key === skipKey) {
+            continue;
+        }
+        if (filter.type === 'number') {
+            const range = rangeState[filter.key];
+            if (range) {
+                activeFilters.push({ filter, range });
+            }
+        }
+        else {
+            const selections = state[filter.key];
+            if (selections && selections.size > 0) {
+                activeFilters.push({ filter, selections });
+            }
+        }
+    }
+    if (activeFilters.length === 0) {
+        return data;
+    }
+    return data.filter((item) => {
+        for (const { filter, selections, range } of activeFilters) {
+            if (range) {
+                const value = filter.getValue(item);
+                const numValue = typeof value === 'number' ? value : Number(value);
+                if (!Number.isNaN(numValue) && (numValue < range[0] || numValue > range[1])) {
+                    return false;
+                }
+            }
+            else if (selections) {
+                const valueKey = toKey(filter.getValue(item));
+                if (!selections.has(valueKey)) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    });
+};
+const computeFilterOptions = (data, filter) => {
+    if (filter.options?.length) {
+        return filter.options;
+    }
+    const counts = new Map();
+    data.forEach((item) => {
+        const value = filter.getValue(item);
+        const key = toKey(value);
+        const existing = counts.get(key);
+        if (existing) {
+            existing.count += 1;
+        }
+        else {
+            counts.set(key, {
+                option: {
+                    key,
+                    label: defaultFormat(value),
+                    value,
+                    count: 1,
+                },
+                count: 1,
+            });
+        }
+    });
+    const options = Array.from(counts.values()).map(({ option, count }) => ({
+        ...option,
+        count,
+    }));
+    return filter.sort ? options.sort(filter.sort) : options.sort((a, b) => b.count - a.count);
+};
+const renderOptionCount = (count) => typeof count === 'number' ? count : '';
+const computeNumericRange = (data, filter) => {
+    const values = [];
+    let min = Infinity;
+    let max = -Infinity;
+    data.forEach((item) => {
+        const value = filter.getValue(item);
+        values.push(value);
+        const numValue = typeof value === 'number' ? value : Number(value);
+        if (!Number.isNaN(numValue)) {
+            min = Math.min(min, numValue);
+            max = Math.max(max, numValue);
+        }
+    });
+    return {
+        min: min === Infinity ? 0 : min,
+        max: max === -Infinity ? 100 : max,
+        values,
+    };
+};
+
+exports.ZOOM_MAX = ZOOM_MAX;
+exports.ZOOM_MIN = ZOOM_MIN;
+exports.ZOOM_STEP = ZOOM_STEP;
+exports.applyFilters = applyFilters;
+exports.buildFilterState = buildFilterState;
+exports.buildRangeFilterState = buildRangeFilterState;
+exports.computeFilterOptions = computeFilterOptions;
+exports.computeNumericRange = computeNumericRange;
+exports.defaultFormat = defaultFormat;
+exports.renderOptionCount = renderOptionCount;
+exports.toKey = toKey;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../PivotViewer/utils/utils.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type {\n  PivotDimension,\n  PivotFilter,\n  PivotFilterOption,\n  PivotGroup,\n  PivotPrimitive,\n} from '../types';\n\nexport type FilterState = Record<string, Set<string>>;\nexport type RangeFilterState = Record<string, [number, number] | null>;\n\n// Zoom configuration\nexport const ZOOM_MIN = 0.1;\nexport const ZOOM_MAX = 3;\nexport const ZOOM_STEP = 0.05;\nexport const CARDS_PER_COLUMN = 5;\nexport const BASE_CARD_WIDTH = 180;\nexport const BASE_CARD_HEIGHT = 140;\n\nexport const toKey = (value: PivotPrimitive): string => {\n  if (value === undefined) return 'undefined';\n  if (value === null) return 'null';\n  if (value instanceof Date) return value.toISOString();\n  if (typeof value === 'number' && Number.isNaN(value)) return 'nan';\n  return String(value);\n};\n\nexport const defaultFormat = (value: PivotPrimitive): string => {\n  if (value === undefined) return 'Unknown';\n  if (value === null) return 'None';\n  if (value instanceof Date) return value.toLocaleString();\n  if (typeof value === 'boolean') return value ? 'Yes' : 'No';\n  return String(value);\n};\n\nexport const buildFilterState = <TItem extends object>(\n  filters: PivotFilter<TItem>[] | undefined,\n): FilterState => {\n  const state: FilterState = {};\n  filters?.forEach((filter) => {\n    state[filter.key] = new Set<string>();\n  });\n  return state;\n};\n\nexport const buildRangeFilterState = <TItem extends object>(\n  filters: PivotFilter<TItem>[] | undefined,\n): RangeFilterState => {\n  const state: RangeFilterState = {};\n  filters?.forEach((filter) => {\n    if (filter.type === 'number') {\n      state[filter.key] = null;\n    }\n  });\n  return state;\n};\n\nexport const applyFilters = <TItem extends object>(\n  data: TItem[],\n  filters: PivotFilter<TItem>[] | undefined,\n  state: FilterState,\n  rangeState: RangeFilterState,\n  skipKey?: string,\n): TItem[] => {\n  if (!filters?.length) {\n    return data;\n  }\n\n  // Pre-compute active filters to avoid checking empty Sets repeatedly\n  const activeFilters: Array<{\n    filter: PivotFilter<TItem>;\n    selections?: Set<string>;\n    range?: [number, number];\n  }> = [];\n\n  for (const filter of filters) {\n    if (filter.key === skipKey) {\n      continue;\n    }\n\n    if (filter.type === 'number') {\n      const range = rangeState[filter.key];\n      if (range) {\n        activeFilters.push({ filter, range });\n      }\n    } else {\n      const selections = state[filter.key];\n      if (selections && selections.size > 0) {\n        activeFilters.push({ filter, selections });\n      }\n    }\n  }\n\n  // Early exit if no active filters\n  if (activeFilters.length === 0) {\n    return data;\n  }\n\n  return data.filter((item) => {\n    for (const { filter, selections, range } of activeFilters) {\n      if (range) {\n        const value = filter.getValue(item);\n        const numValue = typeof value === 'number' ? value : Number(value);\n        if (!Number.isNaN(numValue) && (numValue < range[0] || numValue > range[1])) {\n          return false;\n        }\n      } else if (selections) {\n        const valueKey = toKey(filter.getValue(item));\n        if (!selections.has(valueKey)) {\n          return false;\n        }\n      }\n    }\n    return true;\n  });\n};\n\nexport const computeFilterOptions = <TItem extends object>(\n  data: TItem[],\n  filter: PivotFilter<TItem>,\n): PivotFilterOption[] => {\n  if (filter.options?.length) {\n    return filter.options;\n  }\n\n  const counts = new Map<string, { option: PivotFilterOption; count: number }>();\n\n  data.forEach((item) => {\n    const value = filter.getValue(item);\n    const key = toKey(value);\n    const existing = counts.get(key);\n    if (existing) {\n      existing.count += 1;\n    } else {\n      counts.set(key, {\n        option: {\n          key,\n          label: defaultFormat(value),\n          value,\n          count: 1,\n        },\n        count: 1,\n      });\n    }\n  });\n\n  const options = Array.from(counts.values()).map(({ option, count }) => ({\n    ...option,\n    count,\n  }));\n\n  return filter.sort ? options.sort(filter.sort) : options.sort((a, b) => b.count - a.count);\n};\n\nexport const renderOptionCount = (count: number | undefined): string | number =>\n  typeof count === 'number' ? count : '';\n\nexport const computeNumericRange = <TItem extends object>(\n  data: TItem[],\n  filter: PivotFilter<TItem>,\n): { min: number; max: number; values: PivotPrimitive[] } => {\n  const values: PivotPrimitive[] = [];\n  let min = Infinity;\n  let max = -Infinity;\n\n  data.forEach((item) => {\n    const value = filter.getValue(item);\n    values.push(value);\n    const numValue = typeof value === 'number' ? value : Number(value);\n    if (!Number.isNaN(numValue)) {\n      min = Math.min(min, numValue);\n      max = Math.max(max, numValue);\n    }\n  });\n\n  return {\n    min: min === Infinity ? 0 : min,\n    max: max === -Infinity ? 100 : max,\n    values,\n  };\n};\n\nexport const groupData = <TItem extends object>(\n  data: TItem[],\n  dimension: PivotDimension<TItem>,\n): PivotGroup<TItem>[] => {\n  const groups = new Map<string, PivotGroup<TItem>>();\n\n  // Cache the formatValue function if it exists\n  const formatValue = dimension.formatValue;\n\n  data.forEach((item) => {\n    const rawValue = dimension.getValue(item);\n    const key = toKey(rawValue) || 'default';\n    const group = groups.get(key);\n\n    if (group) {\n      group.items.push(item);\n    } else {\n      const label = formatValue ? formatValue(rawValue) : defaultFormat(rawValue);\n      groups.set(key, {\n        key,\n        label,\n        value: rawValue,\n        items: [item],\n      });\n    }\n  });\n\n  const result = Array.from(groups.values());\n  return dimension.sort ? result.sort(dimension.sort) : result.sort((a, b) => a.label.localeCompare(b.label));\n};\n\n/**\n * Reorder items for a CSS Grid that displays bottom-up, left-to-right.\n * CSS Grid fills top-to-bottom, left-to-right by default.\n *\n * Visual goal (items fill bottom row first, then row above, etc.):\n *   Grid Row 0 (top):    [4] [5] [6] [ ] [ ]   <- partial top row, empties on RIGHT\n *   Grid Row 1 (bottom): [0] [1] [2] [3] [4]   <- full bottom row\n *\n * Returns array with nulls for empty cells that need placeholder rendering.\n */\nexport const reorderForBottomUpGrid = <TItem,>(items: TItem[], columns: number): (TItem | null)[] => {\n  if (items.length === 0) return [];\n\n  const totalRows = Math.ceil(items.length / columns);\n  const itemsInTopRow = items.length % columns || columns;\n\n  const result: (TItem | null)[] = [];\n\n  // Top row: items from the \"overflow\" portion, plus empty cells on the right\n  const topRowStartIndex = items.length - itemsInTopRow;\n  for (let col = 0; col < columns; col++) {\n    if (col < itemsInTopRow) {\n      result.push(items[topRowStartIndex + col]);\n    } else {\n      result.push(null); // Empty cell on right side of top row\n    }\n  }\n\n  // Remaining rows (from second-to-top down to bottom)\n  // These are full rows, containing items 0 to (items.length - itemsInTopRow - 1)\n  for (let row = 1; row < totalRows; row++) {\n    // This grid row corresponds to visual row (totalRows - 1 - row) from bottom\n    // Visual row 0 = bottom, visual row (totalRows-1) = top\n    const visualRowFromBottom = totalRows - 1 - row;\n    const rowStartIndex = visualRowFromBottom * columns;\n\n    for (let col = 0; col < columns; col++) {\n      result.push(items[rowStartIndex + col]);\n    }\n  }\n\n  return result;\n};\n"],"names":[],"mappings":"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"}

package/dist/cjs/TimeMachine/EventsView.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var timeline = require('primereact/timeline');
+var Properties = require('./Properties.js');
+require('./EventsView.css');
+
+const EventsView = ({ events }) => {
+    const displayEvents = events.length > 0 ? events : [];
+    const containerRef = React.useRef(null);
+    const [canScrollUp, setCanScrollUp] = React.useState(false);
+    const [canScrollDown, setCanScrollDown] = React.useState(false);
+    const updateScrollState = () => {
+        const container = containerRef.current;
+        if (!container) {
+            setCanScrollUp(false);
+            setCanScrollDown(false);
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const epsilon = 1;
+        setCanScrollUp(scrollTop > epsilon);
+        setCanScrollDown(scrollTop + clientHeight < scrollHeight - epsilon);
+    };
+    React.useEffect(() => {
+        updateScrollState();
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => updateScrollState();
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [displayEvents.length]);
+    const renderEventCard = (event, position) => {
+        const isLeft = position === 'left';
+        return (jsxRuntime.jsxs("div", { className: `events-view-event-card events-view-event-card--${position}`, children: [jsxRuntime.jsxs("div", { className: `events-view-event-header ${isLeft ? 'events-view-event-header--right' : ''}`, children: [jsxRuntime.jsx("h3", { className: `events-view-event-name ${isLeft ? 'events-view-event-name--right' : ''}`, children: event.type }), jsxRuntime.jsx("div", { className: `events-view-event-timestamp ${isLeft ? 'events-view-event-timestamp--right' : ''}`, children: event.occurred.toLocaleString() })] }), jsxRuntime.jsx("div", { className: "events-view-event-properties", children: jsxRuntime.jsx(Properties.Properties, { data: event.content || {}, align: "left" }) })] }));
+    };
+    const customContent = (event, index) => {
+        const position = index % 2 === 0 ? 'right' : 'left';
+        return renderEventCard(event, position);
+    };
+    const customMarker = () => {
+        return (jsxRuntime.jsx("div", { className: "events-view-marker", children: jsxRuntime.jsx("div", { className: "events-view-marker-dot" }) }));
+    };
+    const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    const scrollToBottom = () => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+    };
+    return (jsxRuntime.jsxs("div", { className: "events-view-container", ref: containerRef, children: [canScrollUp && (jsxRuntime.jsx("div", { className: "events-view-scroll-button-wrapper events-view-scroll-button-wrapper--top", children: jsxRuntime.jsx("button", { type: "button", className: "events-view-scroll-button events-view-scroll-button--top", onClick: scrollToTop, "aria-label": "Scroll to top", children: jsxRuntime.jsx("i", { className: "pi pi-arrow-up" }) }) })), jsxRuntime.jsx(timeline.Timeline, { value: displayEvents, align: "alternate", content: customContent, marker: customMarker, className: "events-view-timeline" }), canScrollDown && (jsxRuntime.jsx("div", { className: "events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom", children: jsxRuntime.jsx("button", { type: "button", className: "events-view-scroll-button events-view-scroll-button--bottom", onClick: scrollToBottom, "aria-label": "Scroll to bottom", children: jsxRuntime.jsx("i", { className: "pi pi-arrow-down" }) }) }))] }));
+};
+
+exports.EventsView = EventsView;
+//# sourceMappingURL=EventsView.js.map

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

@@ -0,0 +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 React, { useEffect, useRef, useState } from 'react';\nimport { Timeline } from 'primereact/timeline';\nimport type { Event } from './types';\nimport { Properties } from './Properties';\nimport './EventsView.css';\n\ninterface EventsViewProps {\n    events: Event[];\n}\n\nexport const EventsView: React.FC<EventsViewProps> = ({ events }) => {\n    // Use test data if no events provided\n    const displayEvents = events.length > 0 ? events : [];\n    const containerRef = useRef<HTMLDivElement>(null);\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\n        const { scrollTop, scrollHeight, clientHeight } = container;\n        const epsilon = 1;\n        setCanScrollUp(scrollTop > epsilon);\n        setCanScrollDown(scrollTop + clientHeight < scrollHeight - epsilon);\n    };\n\n    useEffect(() => {\n        updateScrollState();\n        const container = containerRef.current;\n        if (!container) return;\n\n        const handleScroll = () => updateScrollState();\n        container.addEventListener('scroll', handleScroll);\n        return () => container.removeEventListener('scroll', handleScroll);\n    }, [displayEvents.length]);\n\n    const renderEventCard = (event: Event, position: 'left' | 'right') => {\n        const isLeft = position === 'left';\n\n        return (\n            <div className={`events-view-event-card events-view-event-card--${position}`}>\n                <div className={`events-view-event-header ${isLeft ? 'events-view-event-header--right' : ''}`}>\n                    <h3 className={`events-view-event-name ${isLeft ? 'events-view-event-name--right' : ''}`}>{event.type}</h3>\n                    <div className={`events-view-event-timestamp ${isLeft ? 'events-view-event-timestamp--right' : ''}`}>\n                        {event.occurred.toLocaleString()}\n                    </div>\n                </div>\n                <div className=\"events-view-event-properties\">\n                    <Properties data={event.content || {}} align=\"left\" />\n                </div>\n            </div>\n        );\n    };\n\n    const customContent = (event: Event, index: number) => {\n        // PrimeReact places even indices (0,2,4,...) on the right, odd on the left\n        const position = index % 2 === 0 ? 'right' : 'left';\n        return renderEventCard(event, position);\n    };\n\n    const customMarker = () => {\n        return (\n            <div className=\"events-view-marker\">\n                <div className=\"events-view-marker-dot\"></div>\n            </div>\n        );\n    };\n\n    const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });\n    const scrollToBottom = () => {\n        const container = containerRef.current;\n        if (!container) return;\n        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });\n    };\n\n    return (\n        <div className=\"events-view-container\" ref={containerRef}>\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=\"Scroll to top\"\n                    >\n                        <i className=\"pi pi-arrow-up\" />\n                    </button>\n                </div>\n            )}\n            <Timeline\n                value={displayEvents}\n                align=\"alternate\"\n                content={customContent}\n                marker={customMarker}\n                className=\"events-view-timeline\"\n            />\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=\"Scroll to bottom\"\n                    >\n                        <i className=\"pi pi-arrow-down\" />\n                    </button>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["useRef","useState","useEffect","_jsxs","_jsx","Properties","Timeline"],"mappings":";;;;;;;;MAaa,UAAU,GAA8B,CAAC,EAAE,MAAM,EAAE,KAAI;AAEhE,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,EAAE;AACrD,IAAA,MAAM,YAAY,GAAGA,YAAM,CAAiB,IAAI,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAEzD,MAAM,iBAAiB,GAAG,MAAK;AAC3B,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;QACtC,IAAI,CAAC,SAAS,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC;YACrB,gBAAgB,CAAC,KAAK,CAAC;YACvB;QACJ;QAEA,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,SAAS;QAC3D,MAAM,OAAO,GAAG,CAAC;AACjB,QAAA,cAAc,CAAC,SAAS,GAAG,OAAO,CAAC;QACnC,gBAAgB,CAAC,SAAS,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC;AACvE,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;AACX,QAAA,iBAAiB,EAAE;AACnB,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,SAAS;YAAE;AAEhB,QAAA,MAAM,YAAY,GAAG,MAAM,iBAAiB,EAAE;AAC9C,QAAA,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAClD,OAAO,MAAM,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACtE,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;AAE1B,IAAA,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,QAA0B,KAAI;AACjE,QAAA,MAAM,MAAM,GAAG,QAAQ,KAAK,MAAM;AAElC,QAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,+CAAA,EAAkD,QAAQ,EAAE,EAAA,QAAA,EAAA,CACxEA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,yBAAA,EAA4B,MAAM,GAAG,iCAAiC,GAAG,EAAE,EAAE,EAAA,QAAA,EAAA,CACzFC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,CAAA,uBAAA,EAA0B,MAAM,GAAG,+BAA+B,GAAG,EAAE,EAAE,EAAA,QAAA,EAAG,KAAK,CAAC,IAAI,EAAA,CAAM,EAC3GA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,4BAAA,EAA+B,MAAM,GAAG,oCAAoC,GAAG,EAAE,EAAE,EAAA,QAAA,EAC9F,KAAK,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAA,CAC9B,IACJ,EACNA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,YACzCA,cAAA,CAACC,qBAAU,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,EAAA,CACpD,CAAA,EAAA,CACJ;AAEd,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,KAAa,KAAI;AAElD,QAAA,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM;AACnD,QAAA,OAAO,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC3C,IAAA,CAAC;IAED,MAAM,YAAY,GAAG,MAAK;AACtB,QAAA,QACID,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAC/BA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,CAAO,EAAA,CAC5C;AAEd,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAM,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACxF,MAAM,cAAc,GAAG,MAAK;AACxB,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,SAAS;YAAE;AAChB,QAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC3E,IAAA,CAAC;IAED,QACID,yBAAK,SAAS,EAAC,uBAAuB,EAAC,GAAG,EAAE,YAAY,EAAA,QAAA,EAAA,CACnD,WAAW,KACRC,wBAAK,SAAS,EAAC,0EAA0E,EAAA,QAAA,EACrFA,cAAA,CAAA,QAAA,EAAA,EACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0DAA0D,EACpE,OAAO,EAAE,WAAW,EAAA,YAAA,EACT,eAAe,EAAA,QAAA,EAE1BA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gBAAgB,EAAA,CAAG,EAAA,CAC3B,GACP,CACT,EACDA,eAACE,iBAAQ,EAAA,EACL,KAAK,EAAE,aAAa,EACpB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,EACpB,SAAS,EAAC,sBAAsB,EAAA,CAClC,EACD,aAAa,KACVF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6EAA6E,EAAA,QAAA,EACxFA,cAAA,CAAA,QAAA,EAAA,EACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6DAA6D,EACvE,OAAO,EAAE,cAAc,EAAA,YAAA,EACZ,kBAAkB,YAE7BA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kBAAkB,EAAA,CAAG,GAC7B,EAAA,CACP,CACT,CAAA,EAAA,CACC;AAEd;;;;"}