npm - @cratis/components - Versions diffs - 0.1.17 → 0.1.19 - Mend

@cratis/components 0.1.17 → 0.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (180) hide show

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

	@@ -1 +1 @@
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 const cardBottomY = (cardPosition.y + cardPosition.height) * zoomLevel;\n\n const availableWidth = container.clientWidth - detailPanelWidth;\n const targetX = availableWidth / 2;\n \n // For vertical centering, prefer putting the card center at viewport center.\n // But ensure the card bottom stays visible (at least 20% from viewport bottom).\n const viewportHeight = container.clientHeight;\n const targetYCenter = viewportHeight / 2;\n const targetYForBottom = viewportHeight * 0.7; // Card center should be at most 70% down\n\n const scrollLeft = Math.max(0, cardCenterX - targetX);\n \n // Calculate scroll needed to center the card\n let scrollTopForCenter = cardCenterY - targetYCenter;\n \n // Calculate scroll that ensures card bottom is visible with some margin\n const scrollTopForBottomVisible = cardBottomY - viewportHeight + 50; // 50px margin from bottom\n \n // If centering would push the card bottom out of view, use the bottom-visible scroll\n let scrollTop = scrollTopForCenter;\n if (scrollTopForCenter > scrollTopForBottomVisible + (cardPosition.height * zoomLevel / 2)) {\n // Card is near bottom of content, adjust to keep it visible\n scrollTop = Math.max(0, cardCenterY - targetYForBottom);\n }\n \n scrollTop = Math.max(0, scrollTop);\n\n // If totalHeight is provided, clamp to valid scroll range\n if (totalHeight) {\n const contentHeight = totalHeight * zoomLevel;\n const maxScrollTop = Math.max(0, contentHeight - viewportHeight);\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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"}
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 const cardBottomY = (cardPosition.y + cardPosition.height) * zoomLevel;\n\n const availableWidth = container.clientWidth - detailPanelWidth;\n const targetX = availableWidth / 2;\n \n // For vertical centering, prefer putting the card center at viewport center.\n // But ensure the card bottom stays visible (at least 20% from viewport bottom).\n const viewportHeight = container.clientHeight;\n const targetYCenter = viewportHeight / 2;\n const targetYForBottom = viewportHeight * 0.7; // Card center should be at most 70% down\n\n const scrollLeft = Math.max(0, cardCenterX - targetX);\n \n // Calculate scroll needed to center the card\n const scrollTopForCenter = cardCenterY - targetYCenter;\n \n // Calculate scroll that ensures card bottom is visible with some margin\n const scrollTopForBottomVisible = cardBottomY - viewportHeight + 50; // 50px margin from bottom\n \n // If centering would push the card bottom out of view, use the bottom-visible scroll\n let scrollTop = scrollTopForCenter;\n if (scrollTopForCenter > scrollTopForBottomVisible + (cardPosition.height * zoomLevel / 2)) {\n // Card is near bottom of content, adjust to keep it visible\n scrollTop = Math.max(0, cardCenterY - targetYForBottom);\n }\n \n scrollTop = Math.max(0, scrollTop);\n\n // If totalHeight is provided, clamp to valid scroll range\n if (totalHeight) {\n const contentHeight = totalHeight * zoomLevel;\n const maxScrollTop = Math.max(0, contentHeight - viewportHeight);\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 CHANGED Viewed

@@ -4,7 +4,7 @@ const ZOOM_MAX = 3;
 const BASE_CARD_WIDTH = 200;
 const BASE_CARD_HEIGHT = 176;
 const DETAIL_PANEL_WIDTH = 380;
-const ZOOM_MULTIPLIER = 1.15;
+const ZOOM_MULTIPLIER = 1.2;
 const MIN_ZOOM_ON_SELECT = 1.2;
 exports.BASE_CARD_HEIGHT = BASE_CARD_HEIGHT;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sources":["../../../../PivotViewer/utils/constants.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n// Zoom constants\nexport const ZOOM_MIN = 0.1;\nexport const ZOOM_MAX = 3;\nexport const ZOOM_STEP = 0.05;\n\n// Layout constants - matched to main constants\nexport const GROUP_SPACING = 20;\nexport const CARD_GAP = 10;\nexport const CARDS_PER_COLUMN = 5;\nexport const BASE_CARD_WIDTH = 200;\nexport const BASE_CARD_HEIGHT = 176;\nexport const DETAIL_PANEL_WIDTH = 380;\n\n// Animation constants\nexport const ZOOM_ANIMATION_DURATION = 300;\nexport const ZOOM_MULTIPLIER = 1.15;\nexport const MIN_ZOOM_ON_SELECT = 1.2;\n"],"names":[],"mappings":";;AAKO,MAAM,QAAQ,GAAG;AAOjB,MAAM,eAAe,GAAG;AACxB,MAAM,gBAAgB,GAAG;AACzB,MAAM,kBAAkB,GAAG;AAI3B,MAAM,eAAe,GAAG;AACxB,MAAM,kBAAkB,GAAG;;;;;;;;;"}
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 - matched to main constants\nexport const GROUP_SPACING = 20;\nexport const CARD_GAP = 10;\nexport const CARDS_PER_COLUMN = 5;\nexport const BASE_CARD_WIDTH = 200;\nexport const BASE_CARD_HEIGHT = 176;\nexport const DETAIL_PANEL_WIDTH = 380;\n\n// Animation constants\nexport const ZOOM_ANIMATION_DURATION = 300;\nexport const ZOOM_MULTIPLIER = 1.2;\nexport const MIN_ZOOM_ON_SELECT = 1.2;\n"],"names":[],"mappings":";;AAKO,MAAM,QAAQ,GAAG;AAOjB,MAAM,eAAe,GAAG;AACxB,MAAM,gBAAgB,GAAG;AACzB,MAAM,kBAAkB,GAAG;AAI3B,MAAM,eAAe,GAAG;AACxB,MAAM,kBAAkB,GAAG;;;;;;;;;"}

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

@@ -3,8 +3,15 @@
 var animations = require('./animations.js');
 var constants = require('./constants.js');
+function isSameItemId(id1, id2) {
+    if (id1 === null || id2 === null)
+        return false;
+    if (id1 === id2)
+        return true;
+    return String(id1) === String(id2);
+}
 function handleCardSelection({ itemId, selectedItemId, container, cardPosition, targetCardPosition, getCardPositionAtZoom, getLayoutSizeAtZoom, spacer, viewMode, zoomLevel, totalHeight, preSelectionState, startScrollPosition, setZoomLevel, setIsZooming, setSelectedItem, setPreSelectionState, item, }) {
-    if (selectedItemId === itemId) {
+    if (isSameItemId(selectedItemId, itemId)) {
         deselectCard({
             container,
             cardPosition,

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

	@@ -1 +1 @@
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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"}
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 Compare two item IDs handling type coercion (string vs number)\n /\nfunction isSameItemId(id1: string \| number \| null, id2: string \| number \| null): boolean {\n if (id1 === null \|\| id2 === null) return false;\n // Strict equality\n if (id1 === id2) return true;\n // Compare as strings to handle number/string mismatches\n return String(id1) === String(id2);\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 (using type-coerced comparison)\n if (isSameItemId(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/TimeMachine/TimeMachine.js CHANGED Viewed

@@ -1,7 +1,5 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReadModelView = require('./ReadModelView.js');
@@ -99,5 +97,4 @@ const Timeline = ({ versions, selectedIndex, hoveredIndex, onSelect, onHover, })
 };
 exports.TimeMachine = TimeMachine;
-exports.default = TimeMachine;
 //# sourceMappingURL=TimeMachine.js.map

package/dist/cjs/TimeMachine/TimeMachine.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.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, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\nenum ViewModes {\n ReadModel = 'ReadModel',\n Events = 'Events',\n}\n\ninterface TimeMachineProps {\n versions: Version[];\n currentVersionIndex?: number;\n onVersionChange?: (index: number) => void;\n /** Scroll sensitivity - higher values require more scrolling to change versions /\n scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n versions,\n currentVersionIndex = 0,\n onVersionChange,\n scrollSensitivity = 50,\n}) => {\n const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null);\n const [isHoveringCard, setIsHoveringCard] = useState(false);\n const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollAccumulatorRef = useRef(0);\n\n const handleVersionSelect = useCallback((index: number) => {\n setSelectedIndex(index);\n onVersionChange?.(index);\n }, [onVersionChange]);\n\n const handleTimelineHover = useCallback((index: number \| null) => {\n setHoveredIndex(index);\n }, []);\n\n // Handle trackpad two-finger scroll gesture\n useEffect(() => {\n if (viewMode !== ViewModes.ReadModel) {\n return;\n }\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleWheel = (e: WheelEvent) => {\n // Only handle navigation when not hovering over a card\n if (isHoveringCard) {\n return; // Allow normal scrolling within cards\n }\n\n // Prevent default scrolling behavior\n e.preventDefault();\n\n // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n // Most trackpads send horizontal delta for two-finger swipe\n const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n // Accumulate scroll delta\n scrollAccumulatorRef.current += delta;\n\n // Check if we've accumulated enough scroll to change version\n if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n if (newIndex !== selectedIndex) {\n setSelectedIndex(newIndex);\n onVersionChange?.(newIndex);\n }\n\n // Reset accumulator after version change\n scrollAccumulatorRef.current = 0;\n }\n };\n\n container.addEventListener('wheel', handleWheel, { passive: false });\n\n return () => {\n container.removeEventListener('wheel', handleWheel);\n };\n }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n // Calculate the display index - either hovered or selected\n // (not used in this component; ReadModelView computes its own display index)\n void hoveredIndex;\n void selectedIndex;\n\n // Get all events from all versions\n const allEvents = versions.flatMap(version => version.events \|\| []);\n\n return (\n <div className=\"time-machine\" ref={containerRef}>\n {/ View Switcher /}\n <div className=\"view-switcher\">\n <button\n className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}\n onClick={() => setViewMode(ViewModes.ReadModel)}\n aria-label=\"Read Model View\"\n title=\"Read Model View\"\n >\n <i className=\"pi pi-box\" />\n </button>\n <button\n className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}\n onClick={() => setViewMode(ViewModes.Events)}\n aria-label=\"Events View\"\n title=\"Events View\"\n >\n <i className=\"pi pi-list\" />\n </button>\n </div>\n\n {/ Render the appropriate view /}\n {viewMode === ViewModes.ReadModel ? (\n <ReadModelView\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onVersionSelect={handleVersionSelect}\n onHoveringCardChange={setIsHoveringCard}\n />\n ) : (\n <EventsView events={allEvents} />\n )}\n\n {/ Timeline - only show in ReadModel view /}\n {viewMode === ViewModes.ReadModel && (\n <Timeline\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onSelect={handleVersionSelect}\n onHover={handleTimelineHover}\n />\n )}\n\n {/ Navigation arrows - only show in ReadModel view */}\n {viewMode === ViewModes.ReadModel && (\n <div className=\"navigation-controls\">\n <button\n className=\"nav-button prev\"\n disabled={selectedIndex === 0}\n onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n aria-label=\"Previous version\"\n >\n ‹\n </button>\n <button\n className=\"nav-button next\"\n disabled={selectedIndex === versions.length - 1}\n onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n aria-label=\"Next version\"\n >\n ›\n </button>\n </div>\n )}\n </div>\n );\n};\n\ninterface TimelineProps {\n versions: Version[];\n selectedIndex: number;\n hoveredIndex: number \| null;\n onSelect: (index: number) => void;\n onHover: (index: number \| null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n versions,\n selectedIndex,\n hoveredIndex,\n onSelect,\n onHover,\n}) => {\n const getMagnification = (index: number, hoverIdx: number \| null): number => {\n if (hoverIdx === null) return 1;\n const distance = Math.abs(index - hoverIdx);\n // Fish-eye effect: items close to hover get magnified\n if (distance === 0) return 2.0;\n if (distance === 1) return 1.6;\n if (distance === 2) return 1.3;\n if (distance === 3) return 1.1;\n return 1;\n };\n\n const formatDate = (date: Date): string => {\n return date.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n });\n };\n\n const formatTime = (date: Date): string => {\n return date.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: '2-digit',\n hour12: true,\n });\n };\n\n return (\n <div\n className=\"timeline\"\n onMouseLeave={() => onHover(null)}\n >\n <div className=\"timeline-track\">\n {versions.map((version, index) => {\n const magnification = getMagnification(index, hoveredIndex);\n const isSelected = index === selectedIndex;\n const isHovered = index === hoveredIndex;\n\n return (\n <div\n key={version.id}\n className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n style={{\n '--magnification': magnification,\n } as React.CSSProperties}\n onMouseEnter={() => onHover(index)}\n onClick={() => onSelect(index)}\n >\n <div className=\"timeline-tick\"></div>\n <div className=\"timeline-label\">\n <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default TimeMachine;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}
1	+ {"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.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, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\nenum ViewModes {\n ReadModel = 'ReadModel',\n Events = 'Events',\n}\n\ninterface TimeMachineProps {\n versions: Version[];\n currentVersionIndex?: number;\n onVersionChange?: (index: number) => void;\n /** Scroll sensitivity - higher values require more scrolling to change versions /\n scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n versions,\n currentVersionIndex = 0,\n onVersionChange,\n scrollSensitivity = 50,\n}) => {\n const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null);\n const [isHoveringCard, setIsHoveringCard] = useState(false);\n const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollAccumulatorRef = useRef(0);\n\n const handleVersionSelect = useCallback((index: number) => {\n setSelectedIndex(index);\n onVersionChange?.(index);\n }, [onVersionChange]);\n\n const handleTimelineHover = useCallback((index: number \| null) => {\n setHoveredIndex(index);\n }, []);\n\n // Handle trackpad two-finger scroll gesture\n useEffect(() => {\n if (viewMode !== ViewModes.ReadModel) {\n return;\n }\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleWheel = (e: WheelEvent) => {\n // Only handle navigation when not hovering over a card\n if (isHoveringCard) {\n return; // Allow normal scrolling within cards\n }\n\n // Prevent default scrolling behavior\n e.preventDefault();\n\n // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n // Most trackpads send horizontal delta for two-finger swipe\n const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n // Accumulate scroll delta\n scrollAccumulatorRef.current += delta;\n\n // Check if we've accumulated enough scroll to change version\n if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n if (newIndex !== selectedIndex) {\n setSelectedIndex(newIndex);\n onVersionChange?.(newIndex);\n }\n\n // Reset accumulator after version change\n scrollAccumulatorRef.current = 0;\n }\n };\n\n container.addEventListener('wheel', handleWheel, { passive: false });\n\n return () => {\n container.removeEventListener('wheel', handleWheel);\n };\n }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n // Calculate the display index - either hovered or selected\n // (not used in this component; ReadModelView computes its own display index)\n void hoveredIndex;\n void selectedIndex;\n\n // Get all events from all versions\n const allEvents = versions.flatMap(version => version.events \|\| []);\n\n return (\n <div className=\"time-machine\" ref={containerRef}>\n {/ View Switcher /}\n <div className=\"view-switcher\">\n <button\n className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}\n onClick={() => setViewMode(ViewModes.ReadModel)}\n aria-label=\"Read Model View\"\n title=\"Read Model View\"\n >\n <i className=\"pi pi-box\" />\n </button>\n <button\n className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}\n onClick={() => setViewMode(ViewModes.Events)}\n aria-label=\"Events View\"\n title=\"Events View\"\n >\n <i className=\"pi pi-list\" />\n </button>\n </div>\n\n {/ Render the appropriate view /}\n {viewMode === ViewModes.ReadModel ? (\n <ReadModelView\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onVersionSelect={handleVersionSelect}\n onHoveringCardChange={setIsHoveringCard}\n />\n ) : (\n <EventsView events={allEvents} />\n )}\n\n {/ Timeline - only show in ReadModel view /}\n {viewMode === ViewModes.ReadModel && (\n <Timeline\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onSelect={handleVersionSelect}\n onHover={handleTimelineHover}\n />\n )}\n\n {/ Navigation arrows - only show in ReadModel view */}\n {viewMode === ViewModes.ReadModel && (\n <div className=\"navigation-controls\">\n <button\n className=\"nav-button prev\"\n disabled={selectedIndex === 0}\n onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n aria-label=\"Previous version\"\n >\n ‹\n </button>\n <button\n className=\"nav-button next\"\n disabled={selectedIndex === versions.length - 1}\n onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n aria-label=\"Next version\"\n >\n ›\n </button>\n </div>\n )}\n </div>\n );\n};\n\ninterface TimelineProps {\n versions: Version[];\n selectedIndex: number;\n hoveredIndex: number \| null;\n onSelect: (index: number) => void;\n onHover: (index: number \| null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n versions,\n selectedIndex,\n hoveredIndex,\n onSelect,\n onHover,\n}) => {\n const getMagnification = (index: number, hoverIdx: number \| null): number => {\n if (hoverIdx === null) return 1;\n const distance = Math.abs(index - hoverIdx);\n // Fish-eye effect: items close to hover get magnified\n if (distance === 0) return 2.0;\n if (distance === 1) return 1.6;\n if (distance === 2) return 1.3;\n if (distance === 3) return 1.1;\n return 1;\n };\n\n const formatDate = (date: Date): string => {\n return date.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n });\n };\n\n const formatTime = (date: Date): string => {\n return date.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: '2-digit',\n hour12: true,\n });\n };\n\n return (\n <div\n className=\"timeline\"\n onMouseLeave={() => onHover(null)}\n >\n <div className=\"timeline-track\">\n {versions.map((version, index) => {\n const magnification = getMagnification(index, hoveredIndex);\n const isSelected = index === selectedIndex;\n const isHovered = index === hoveredIndex;\n\n return (\n <div\n key={version.id}\n className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n style={{\n '--magnification': magnification,\n } as React.CSSProperties}\n onMouseEnter={() => onHover(index)}\n onClick={() => onSelect(index)}\n >\n <div className=\"timeline-tick\"></div>\n <div className=\"timeline-label\">\n <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default TimeMachine;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}

package/dist/cjs/index.js CHANGED Viewed

@@ -2,21 +2,25 @@
 var index = require('./CommandDialog/index.js');
 var index$1 = require('./CommandForm/index.js');
-var index$2 = require('./DataPage/index.js');
-var index$3 = require('./DataTables/index.js');
-var index$4 = require('./Dialogs/index.js');
-var index$5 = require('./Dropdown/index.js');
-var index$6 = require('./PivotViewer/index.js');
-var index$7 = require('./TimeMachine/index.js');
+var index$2 = require('./Common/index.js');
+var index$3 = require('./DataPage/index.js');
+var index$4 = require('./DataTables/index.js');
+var index$5 = require('./Dialogs/index.js');
+var index$6 = require('./Dropdown/index.js');
+var index$7 = require('./EventModeling/index.js');
+var index$8 = require('./PivotViewer/index.js');
+var index$9 = require('./TimeMachine/index.js');
 exports.CommandDialog = index;
 exports.CommandForm = index$1;
-exports.DataPage = index$2;
-exports.dataTables = index$3;
-exports.dialogs = index$4;
-exports.Dropdown = index$5;
-exports.PivotViewer = index$6;
-exports.TimeMachine = index$7;
+exports.Common = index$2;
+exports.DataPage = index$3;
+exports.DataTables = index$4;
+exports.Dialogs = index$5;
+exports.Dropdown = index$6;
+exports.EventModeling = index$7;
+exports.PivotViewer = index$8;
+exports.TimeMachine = index$9;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/package.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/esm/Common/ErrorBoundary.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
-export class ErrorBoundary extends Component {
+class ErrorBoundary extends Component {
     state = {
         hasError: false,
         error: new Error(),
@@ -13,9 +14,11 @@ export class ErrorBoundary extends Component {
     }
     render() {
         if (this.state.hasError) {
-            return (_jsxs("div", { className: 'p-4', children: [_jsx("h1", { className: 'text-3xl m-3', children: "Error" }), _jsx("p", { children: this.state.error.message }), _jsx("p", { children: this.state.error.stack })] }));
+            return (jsxs("div", { className: 'p-4', children: [jsx("h1", { className: 'text-3xl m-3', children: "Error" }), jsx("p", { children: this.state.error.message }), jsx("p", { children: this.state.error.stack })] }));
         }
         return this.props.children;
     }
 }
-//# sourceMappingURL=ErrorBoundary.js.map
+export { ErrorBoundary };
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/esm/Common/ErrorBoundary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorBoundary.js","~~sourceRoot":"","~~sources":["../../../Common/ErrorBoundary.tsx"],"~~names~~":[],~~"mappings"~~:~~";AAGA~~,~~OAAO~~,~~EAAE~~,~~SAAS~~,~~EAAwB~~,~~MAAM~~,~~OAAO~~,~~CAAC;AAUxD~~,~~MAAM~~,~~OAAO~~,aAAc,SAAQ,SAAuB;~~IAC~~/C,KAAK,GAAU;~~QAClB~~,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB~~,CAAC~~;~~IAEK~~,~~MAAM~~,~~CAAC,~~wBAAwB,CAAC,KAAY;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE~~,CAAC~~;~~IAC5C,CAAC~~;~~IAEM~~,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC~~,CAAC~~;~~IACvD,CAAC~~;~~IAEM~~,MAAM;~~QACT~~,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE~~,CAAC~~;~~YACtB~~,~~OAAO~~,~~CACH~~,~~eAAK~~,SAAS,EAAC,KAAK,~~aAChB~~,~~aAAI~~,SAAS,EAAC,cAAc,~~sBAAW~~,~~EACvC~~,~~sBAAI~~,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,~~GAAK~~,~~EACjC~~,~~sBAAI~~,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,~~GAAK~~,~~IAC7B~~,~~CACT~~,~~CAAC;QACN~~,~~CAAC~~;~~QAED~~,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ~~,CAAC~~;~~IAC/B,CAAC~~;~~CACJ~~"}
1	+ {"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.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 { Component, ErrorInfo, ReactNode } from 'react';\n\ninterface Props {\n children: ReactNode;\n}\ninterface State {\n hasError: boolean;\n error: Error;\n}\n\nexport class ErrorBoundary extends Component<Props, State> {\n public state: State = {\n hasError: false,\n error: new Error(),\n };\n\n public static getDerivedStateFromError(error: Error): State {\n return { hasError: true, error: error };\n }\n\n public componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n console.error('Uncaught error:', error, errorInfo);\n }\n\n public render() {\n if (this.state.hasError) {\n return (\n <div className='p-4'>\n <h1 className='text-3xl m-3'>Error</h1>\n <p>{this.state.error.message}</p>\n <p>{this.state.error.stack}</p>\n </div>\n );\n }\n\n return this.props.children;\n }\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAaM,MAAO,aAAc,SAAQ,SAAuB,CAAA;AAC/C,IAAA,KAAK,GAAU;AAClB,QAAA,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB;IAEM,OAAO,wBAAwB,CAAC,KAAY,EAAA;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C;IAEO,iBAAiB,CAAC,KAAY,EAAE,SAAoB,EAAA;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC;IACtD;IAEO,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrB,YAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CAChBC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,OAAA,EAAA,CAAW,EACvCA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAA,CAAK,EACjCA,qBAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAK,CAAA,EAAA,CAC7B;QAEd;AAEA,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACH;;;;"}

package/dist/esm/Common/FormElement.js CHANGED Viewed

@@ -1,5 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const FormElement = (props) => {
-    return (_jsx("div", { className: "card flex flex-column md:flex-row gap-3", children: _jsxs("div", { className: "p-inputgroup flex-1", children: [_jsx("span", { className: "p-inputgroup-addon", children: props.icon }), props.children] }) }));
+import { jsx, jsxs } from 'react/jsx-runtime';
+const FormElement = (props) => {
+    return (jsx("div", { className: "card flex flex-column md:flex-row gap-3", children: jsxs("div", { className: "p-inputgroup flex-1", children: [jsx("span", { className: "p-inputgroup-addon", children: props.icon }), props.children] }) }));
 };
-//# sourceMappingURL=FormElement.js.map
+export { FormElement };
+//# sourceMappingURL=FormElement.js.map

package/dist/esm/Common/FormElement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElement.js","~~sourceRoot~~":"","~~sources~~":["~~../../../Common/~~FormElement.~~tsx~~"],"names":[],"mappings":"~~;AAQA~~,MAAM,~~CAAC,MAAM,~~WAAW,GAAG,CAAC,KAAuB,~~EAAE,EAAE~~;IACnD,~~OAAO~~,~~CACH~~,~~cAAK~~,SAAS,EAAC,yCAAyC,~~YACpD~~,~~eAAK~~,SAAS,EAAC,qBAAqB,~~aAChC~~,~~eAAM~~,SAAS,EAAC,oBAAoB,~~YAC~~/B,KAAK,CAAC,IAAI,~~GACR~~,EACN,KAAK,CAAC,QAAQ,~~IACb~~,~~GACJ~~,~~CACT~~,~~CAAC~~;~~AACN,CAAC,CAAC~~"}
1	+ {"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.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\nexport interface FormElementProps {\n children: React.ReactNode;\n icon: React.ReactNode;\n}\n\nexport const FormElement = (props: FormElementProps) => {\n return (\n <div className=\"card flex flex-column md:flex-row gap-3\">\n <div className=\"p-inputgroup flex-1\">\n <span className=\"p-inputgroup-addon\">\n {props.icon}\n </span>\n {props.children}\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;AAQO,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;IACnD,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACpDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAChCD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAC/B,KAAK,CAAC,IAAI,EAAA,CACR,EACN,KAAK,CAAC,QAAQ,CAAA,EAAA,CACb,EAAA,CACJ;AAEd;;;;"}

package/dist/esm/Common/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export * from './ErrorBoundary';
-export * from './Page';
-export * from './FormElement';
-//# sourceMappingURL=index.js.map
+export { ErrorBoundary } from './ErrorBoundary.js';
+export { Page } from './Page.js';
+export { FormElement } from './FormElement.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/Common/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","~~sourceRoot~~":"","~~sources~~":[~~"../../../Common/index.ts"~~],"names":[],"mappings":"~~AAGA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/esm/EventModeling/EventModeling.css ADDED Viewed

@@ -0,0 +1,146 @@
+/* Copyright (c) Cratis. All rights reserved.
+   Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+.event-modeling {
+    position: relative;
+    overflow: hidden;
+    background: var(--surface-ground, #f8f9fa);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+.event-modeling-canvas-container {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+.event-modeling-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+}
+.event-modeling-toolbox {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: var(--surface-card, #ffffff);
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--surface-border, #dee2e6);
+    padding: 8px;
+    z-index: 1000;
+    display: flex;
+    gap: 6px;
+}
+.event-modeling-tool-button {
+    width: 64px;
+    height: 64px;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    background: var(--surface-0, #ffffff);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    transition: all 0.15s ease;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-color, #495057);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+.event-modeling-tool-button:hover {
+    background: var(--surface-100, #f8f9fa);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+.event-modeling-tool-button.selected {
+    border-color: var(--primary-color, #3B82F6);
+    background: var(--primary-50, #EFF6FF);
+    box-shadow: 0 0 0 1px var(--primary-color, #3B82F6);
+}
+.event-modeling-tool-icon {
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.event-modeling-tool-button.command .event-modeling-tool-icon {
+    width: 40px;
+    height: 24px;
+    background: var(--blue-500, #3b82f6);
+    border-radius: 4px;
+}
+.event-modeling-tool-button.event .event-modeling-tool-icon {
+    width: 40px;
+    height: 24px;
+    background: var(--orange-500, #f59e0b);
+    border-radius: 4px;
+}
+.event-modeling-tool-button.readmodel .event-modeling-tool-icon {
+    width: 40px;
+    height: 24px;
+    background: var(--green-500, #10b981);
+    border-radius: 4px;
+}
+.event-modeling-tool-button.process .event-modeling-tool-icon {
+    width: 28px;
+    height: 28px;
+}
+.event-modeling-controls {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    background: var(--surface-card, #ffffff);
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--surface-border, #dee2e6);
+    padding: 6px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.event-modeling-control-button {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    background: var(--surface-0, #ffffff);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-color, #495057);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+.event-modeling-control-button:hover {
+    background: var(--surface-100, #f8f9fa);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+.event-modeling-control-button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background: var(--surface-100, #f8f9fa);
+}

package/dist/esm/EventModeling/EventModeling.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import { EventModelingState } from './types';
+import './EventModeling.css';
+export interface EventModelingProps {
+    initialState?: EventModelingState;
+    onStateChange?: (state: EventModelingState) => void;
+    width?: string;
+    height?: string;
+}
+export declare const EventModeling: React.FC<EventModelingProps>;
+//# sourceMappingURL=EventModeling.d.ts.map

package/dist/esm/EventModeling/EventModeling.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EventModeling.d.ts","sourceRoot":"","sources":["../../../EventModeling/EventModeling.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAoF,MAAM,SAAS,CAAC;AAI/H,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAkB;IAC/B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyRtD,CAAC"}