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/esm/EventModeling/types.js ADDED Viewed

@@ -0,0 +1,56 @@
+const ELEMENT_COLORS = {
+    command: {
+        background: 0x3b82f6,
+        text: 0xffffff,
+    },
+    event: {
+        background: 0xf59e0b,
+        text: 0xffffff,
+    },
+    readmodel: {
+        background: 0x10b981,
+        text: 0xffffff,
+    },
+    process: {
+        fill: 0x6b7280,
+        stroke: 0x374151,
+    },
+};
+const DEFAULT_ELEMENT_SIZE = {
+    command: { width: 200, height: 100 },
+    event: { width: 200, height: 100 },
+    readmodel: { width: 200, height: 100 },
+    process: { width: 80, height: 80 },
+};
+function calculateOptimalEdges(fromElement, toElement) {
+    const fromCenter = {
+        x: fromElement.position.x + fromElement.size.width / 2,
+        y: fromElement.position.y + fromElement.size.height / 2,
+    };
+    const toCenter = {
+        x: toElement.position.x + toElement.size.width / 2,
+        y: toElement.position.y + toElement.size.height / 2,
+    };
+    const dx = toCenter.x - fromCenter.x;
+    const dy = toCenter.y - fromCenter.y;
+    const isHorizontal = Math.abs(dx) > Math.abs(dy);
+    if (isHorizontal) {
+        if (dx > 0) {
+            return { fromSide: 'right', toSide: 'left' };
+        }
+        else {
+            return { fromSide: 'left', toSide: 'right' };
+        }
+    }
+    else {
+        if (dy > 0) {
+            return { fromSide: 'bottom', toSide: 'top' };
+        }
+        else {
+            return { fromSide: 'top', toSide: 'bottom' };
+        }
+    }
+}
+export { DEFAULT_ELEMENT_SIZE, ELEMENT_COLORS, calculateOptimalEdges };
+//# sourceMappingURL=types.js.map

package/dist/esm/EventModeling/types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"types.js","sources":["../../../EventModeling/types.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 ElementType = 'command' | 'event' | 'readmodel' | 'process';\n\nexport interface Position {\n x: number;\n y: number;\n}\n\nexport interface Size {\n width: number;\n height: number;\n}\n\nexport interface ElementData {\n id: string;\n type: ElementType;\n position: Position;\n size: Size;\n label: string;\n description?: string;\n}\n\nexport type EdgeSide = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface EdgePoint {\n elementId: string;\n side: EdgeSide;\n}\n\nexport interface Connector {\n id: string;\n from: EdgePoint;\n to: EdgePoint;\n}\n\nexport interface EventModelingState {\n elements: ElementData[];\n connectors: Connector[];\n selectedElementId?: string;\n selectedConnectorId?: string;\n}\n\nexport interface CanvasTransform {\n x: number;\n y: number;\n scale: number;\n}\n\nexport const ELEMENT_COLORS = {\n command: {\n background: 0x3b82f6,\n text: 0xffffff,\n },\n event: {\n background: 0xf59e0b,\n text: 0xffffff,\n },\n readmodel: {\n background: 0x10b981,\n text: 0xffffff,\n },\n process: {\n fill: 0x6b7280,\n stroke: 0x374151,\n },\n} as const;\n\nexport const DEFAULT_ELEMENT_SIZE = {\n command: { width: 200, height: 100 },\n event: { width: 200, height: 100 },\n readmodel: { width: 200, height: 100 },\n process: { width: 80, height: 80 },\n} as const;\n\n/**\n * Calculate the optimal edge pair for a connector based on element positions.\n * Returns the best matching edges for visual clarity.\n */\nexport function calculateOptimalEdges(\n fromElement: ElementData,\n toElement: ElementData\n): { fromSide: EdgeSide; toSide: EdgeSide } {\n // Calculate center points\n const fromCenter = {\n x: fromElement.position.x + fromElement.size.width / 2,\n y: fromElement.position.y + fromElement.size.height / 2,\n };\n const toCenter = {\n x: toElement.position.x + toElement.size.width / 2,\n y: toElement.position.y + toElement.size.height / 2,\n };\n\n // Calculate differences\n const dx = toCenter.x - fromCenter.x;\n const dy = toCenter.y - fromCenter.y;\n\n // Determine primary direction based on which delta is larger\n const isHorizontal = Math.abs(dx) > Math.abs(dy);\n\n if (isHorizontal) {\n // Horizontal connection is primary\n if (dx > 0) {\n // Target is to the right\n return { fromSide: 'right', toSide: 'left' };\n } else {\n // Target is to the left\n return { fromSide: 'left', toSide: 'right' };\n }\n } else {\n // Vertical connection is primary\n if (dy > 0) {\n // Target is below\n return { fromSide: 'bottom', toSide: 'top' };\n } else {\n // Target is above\n return { fromSide: 'top', toSide: 'bottom' };\n }\n }\n}\n"],"names":[],"mappings":"AAkDO,MAAM,cAAc,GAAG;AAC1B,IAAA,OAAO,EAAE;AACL,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,IAAI,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,IAAI,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;AACP,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,IAAI,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,OAAO,EAAE;AACL,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,MAAM,EAAE,QAAQ;AACnB,KAAA;;AAGE,MAAM,oBAAoB,GAAG;IAChC,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IACpC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IAClC,SAAS,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IACtC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;;AAOhC,SAAU,qBAAqB,CACjC,WAAwB,EACxB,SAAsB,EAAA;AAGtB,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC;AACtD,QAAA,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;KAC1D;AACD,IAAA,MAAM,QAAQ,GAAG;AACb,QAAA,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC;AAClD,QAAA,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;KACtD;IAGD,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;IACpC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;AAGpC,IAAA,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IAEhD,IAAI,YAAY,EAAE;AAEd,QAAA,IAAI,EAAE,GAAG,CAAC,EAAE;YAER,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE;QAChD;aAAO;YAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;QAChD;IACJ;SAAO;AAEH,QAAA,IAAI,EAAE,GAAG,CAAC,EAAE;YAER,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE;QAChD;aAAO;YAEH,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE;QAChD;IACJ;AACJ;;;;"}

package/dist/esm/PivotViewer/PivotViewer.css CHANGED Viewed

@@ -530,6 +530,33 @@
   min-width: 3rem;
   text-align: center;
   font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.4rem;
+  transition: background 120ms ease;
+}
+.pv-zoom-controls span:hover {
+  background: var(--surface-hover);
+}
+.pv-zoom-level-input {
+  width: 3rem;
+  font-size: 0.75rem;
+  text-align: center;
+  background: var(--surface-ground);
+  border: 1px solid var(--primary-color);
+  border-radius: 0.4rem;
+  color: var(--text-color);
+  padding: 0.25rem 0.5rem;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+}
+.pv-zoom-reset {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .pv-dimension-select {
@@ -688,7 +715,7 @@
 }
 .pv-cards-grouped .pv-card {
-  /* Cards maintain their direction */
+  transform: none;
 }
 /* Empty placeholder cells in grouped grid */
@@ -704,9 +731,8 @@
   align-items: stretch;
   background: var(--surface-section);
   border-top: 1px solid var(--surface-border);
-  padding: 0.5rem 1.5rem;
-  padding-left: calc(1.5rem); /* Match groups container padding */
-  gap: 0.25rem; /* Match gap between groups */
+  padding: 0.5rem 0; /* padding-left set dynamically from JS; no right padding to prevent skew */
+  gap: 0; /* No extra gap to avoid skew */
   overflow-x: hidden; /* Disable independent scroll - synced via JS */
   flex-shrink: 0;
 }
@@ -719,6 +745,7 @@
   padding: 0.5rem 0;
   text-align: center;
   cursor: pointer;
+  /* Note: opacity transition added later in the file for filter effects */
   transition: background 180ms ease, border-color 180ms ease;
   flex: 0 0 auto;
   border-radius: 0.5rem;
@@ -772,6 +799,28 @@
   font-variant-numeric: tabular-nums;
 }
+/* Fade axis labels when switching views - matched to sprite animation duration (600ms) */
+.pivot-viewer .pv-axis-labels {
+  transition: opacity 600ms ease;
+}
+.pivot-viewer .pv-axis-labels.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.pivot-viewer .pv-axis-labels.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* Fade individual axis labels when filtering groups */
+.pv-axis-label {
+  transition: opacity 600ms ease, background 180ms ease, border-color 180ms ease;
+}
+.pv-axis-label.filtered-out {
+  opacity: 0.3;
+}
 .pv-groups.pv-groups-collection {
   display: flex;
   flex-wrap: wrap;
@@ -784,7 +833,7 @@
 /* Pause flex reflow during zoom animation for smoother effect */
 .pv-groups.pv-zooming {
-  /* Disable transitions during zoom */
+  pointer-events: none;
 }
 /* CRITICAL: Freeze collection layout during zoom - prevent any reflow */

package/dist/esm/PivotViewer/PivotViewer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PivotViewer.d.ts","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,OAAO,mBAAmB,CAAC;AAe3B,wBAAgB,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,YAAY,EACZ,cAAc,EACd,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAiB,EACjB,MAAM,GACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,~~2CA0XzB~~"}
1	+ {"version":3,"file":"PivotViewer.d.ts","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,OAAO,mBAAmB,CAAC;AAe3B,wBAAgB,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,YAAY,EACZ,cAAc,EACd,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAiB,EACjB,MAAM,GACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAmYzB"}

package/dist/esm/PivotViewer/PivotViewer.js CHANGED Viewed

@@ -41,7 +41,7 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });
     const { filterState, rangeFilterState, expandedFilterKey, setExpandedFilterKey, handleToggleFilter, handleClearFilter, handleRangeChange, } = useFilterState(filters);
     const { activeDimensionKey, setActiveDimensionKey, activeDimension, dimensionFilter, handleAxisLabelClick, } = useDimensionState(dimensions, defaultDimensionKey);
-    const { zoomLevel, setZoomLevel, handleZoomIn, handleZoomOut, handleZoomSlider, } = useZoomState(1);
+    const { zoomLevel, setZoomLevel, handleZoomIn, handleZoomOut, handleZoomSlider, handleZoomReset, handleZoomChange, } = useZoomState(1);
     const { isPanning, handlePanStart, handlePanMove, handlePanEnd, } = usePanning(containerRef, undefined, setScrollPosition);
     useWheelZoom(containerRef, zoomLevel, setZoomLevel);
     const containerDimensions = useContainerDimensions(containerRef, isLoading);
@@ -213,6 +213,9 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     ]
         .filter(Boolean)
         .join(' ');
+    useEffect(() => {
+        setSelectedItem(null);
+    }, [viewMode]);
     const cssVariables = useMemo(() => {
         const vars = {};
         if (!colors)
@@ -245,7 +248,7 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
             vars['--focus-ring'] = colors.focusRing;
         return vars;
     }, [colors]);
-    return (jsxs("div", { className: viewerClassName, style: cssVariables, children: [jsx(FilterPanelContainer, { isOpen: filtersOpen && hasFilters, search: search, filterState: filterState, rangeFilterState: rangeFilterState, expandedFilterKey: expandedFilterKey, filterOptions: filterOptions, anchorRef: filterButtonRef, onClose: () => setFiltersOpen(false), onSearchChange: setSearch, onFilterToggle: handleToggleFilter, onFilterClear: handleClearFilter, onRangeChange: handleRangeChange, onExpandedFilterChange: setExpandedFilterKey }), jsxs("main", { className: "pv-main", children: [jsx(ToolbarContainer, { hasFilters: hasFilters, filtersOpen: filtersOpen, filteredCount: visibleIds.length, viewMode: viewMode, zoomLevel: zoomLevel, activeDimensionKey: activeDimensionKey, dimensions: dimensions, activeFilterCount: activeFilterCount, onFiltersToggle: () => setFiltersOpen((prev) => !prev), onViewModeChange: setViewMode, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onZoomSlider: handleZoomSlider, onDimensionChange: setActiveDimensionKey, filterButtonRef: filterButtonRef }), jsx(PivotViewerMain, { data: data, ready: ready, isLoading: isLoading, visibleIds: visibleIds, grouping: grouping, layout: layout, cardWidth: cardWidth, cardHeight: cardHeight, zoomLevel: zoomLevel, scrollPosition: scrollPosition, containerDimensions: containerDimensions, selectedItem: selectedItem, hoveredGroupIndex: hoveredGroupIndex, isZooming: isZooming, viewMode: viewMode, cardRenderer: cardRenderer, detailRenderer: detailRenderer, resolveId: resolveId, emptyContent: emptyContent, dimensionFilter: dimensionFilter, onCardClick: handleCardClick, onPanStart: handlePanStart, onPanMove: handlePanMove, onPanEnd: handlePanEnd, onGroupHover: setHoveredGroupIndex, onAxisLabelClick: handleAxisLabelClick, onCloseDetail: closeDetail, containerRef: containerRef, axisLabelsRef: axisLabelsRef, spacerRef: spacerRef })] })] }));
+    return (jsxs("div", { className: viewerClassName, style: cssVariables, children: [jsx(FilterPanelContainer, { isOpen: filtersOpen && hasFilters, search: search, filterState: filterState, rangeFilterState: rangeFilterState, expandedFilterKey: expandedFilterKey, filterOptions: filterOptions, anchorRef: filterButtonRef, onClose: () => setFiltersOpen(false), onSearchChange: setSearch, onFilterToggle: handleToggleFilter, onFilterClear: handleClearFilter, onRangeChange: handleRangeChange, onExpandedFilterChange: setExpandedFilterKey }), jsxs("main", { className: "pv-main", children: [jsx(ToolbarContainer, { hasFilters: hasFilters, filtersOpen: filtersOpen, filteredCount: visibleIds.length, viewMode: viewMode, zoomLevel: zoomLevel, activeDimensionKey: activeDimensionKey, dimensions: dimensions, activeFilterCount: activeFilterCount, onFiltersToggle: () => setFiltersOpen((prev) => !prev), onViewModeChange: setViewMode, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onZoomSlider: handleZoomSlider, onZoomReset: handleZoomReset, onZoomChange: handleZoomChange, onDimensionChange: setActiveDimensionKey, filterButtonRef: filterButtonRef }), jsx(PivotViewerMain, { data: data, ready: ready, isLoading: isLoading, visibleIds: visibleIds, grouping: grouping, layout: layout, cardWidth: cardWidth, cardHeight: cardHeight, zoomLevel: zoomLevel, scrollPosition: scrollPosition, containerDimensions: containerDimensions, selectedItem: selectedItem, hoveredGroupIndex: hoveredGroupIndex, isZooming: isZooming, viewMode: viewMode, cardRenderer: cardRenderer, detailRenderer: detailRenderer, resolveId: resolveId, emptyContent: emptyContent, dimensionFilter: dimensionFilter, onCardClick: handleCardClick, onPanStart: handlePanStart, onPanMove: handlePanMove, onPanEnd: handlePanEnd, onGroupHover: setHoveredGroupIndex, onAxisLabelClick: handleAxisLabelClick, onCloseDetail: closeDetail, containerRef: containerRef, axisLabelsRef: axisLabelsRef, spacerRef: spacerRef })] })] }));
 }
 export { PivotViewer };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PivotViewer.js","sources":["../../../PivotViewer/PivotViewer.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { PivotViewerProps } from './types';\nimport type { GroupingResult } from './engine/types';\nimport { usePivotEngine } from './hooks/usePivotEngine';\nimport { computeLayout } from './engine/layout';\nimport { useFilterState } from './hooks/useFilterState';\nimport { useDimensionState } from './hooks/useDimensionState';\nimport { useZoomState } from './hooks/useZoomState';\nimport { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, CARDS_PER_COLUMN, GROUP_SPACING } from './constants';\nimport './PivotViewer.css';\nimport { PivotViewerMain } from './components/PivotViewerMain';\nimport { FilterPanelContainer } from './components/FilterPanelContainer';\nimport { ToolbarContainer } from './components/ToolbarContainer';\nimport { usePanning, useWheelZoom, useFilterOptions } from './hooks';\nimport { useContainerDimensions } from './hooks/useContainerDimensions';\nimport type { ViewMode } from './components/Toolbar';\nimport { useFieldExtractors } from './hooks/useFieldExtractors';\nimport { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters';\nimport { useCardSelection } from './hooks/useCardSelection';\nimport { useDetailPanelClose } from './hooks/useDetailPanelClose';\nimport { useScrollSync } from './hooks/useScrollSync';\nimport { useAnimationModeTracking } from './hooks/useAnimationModeTracking';\nimport { useViewModeScrollHandling } from './hooks/useViewModeScrollHandling';\n\nexport function PivotViewer<TItem extends object>({\n data,\n dimensions,\n filters,\n defaultDimensionKey,\n cardRenderer,\n detailRenderer,\n getItemId,\n searchFields,\n className,\n emptyContent,\n isLoading = false,\n colors,\n}: PivotViewerProps<TItem>) {\n // Refs\n const containerRef = useRef<HTMLDivElement>(null!);\n const filterButtonRef = useRef<HTMLButtonElement>(null!);\n const axisLabelsRef = useRef<HTMLDivElement>(null!);\n const spacerRef = useRef<HTMLDivElement>(null!);\n\n // State\n const [search, setSearch] = useState('');\n const [viewMode, setViewMode] = useState<ViewMode>('collection');\n const [filtersOpen, setFiltersOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState<TItem \| null>(null);\n const [isZooming, setIsZooming] = useState(false);\n const [visibleIds, setVisibleIds] = useState<Uint32Array>(new Uint32Array(0));\n const [grouping, setGrouping] = useState<GroupingResult>({ groups: [] });\n const [hoveredGroupIndex, setHoveredGroupIndex] = useState<number \| null>(null);\n const [preSelectionState, setPreSelectionState] = useState<{ zoom: number; scrollLeft: number; scrollTop: number } \| null>(null);\n const [, setAnimationMode] = useState<'layout' \| 'filter'>('layout');\n const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });\n\n // Filter hooks\n const {\n filterState,\n rangeFilterState,\n expandedFilterKey,\n setExpandedFilterKey,\n handleToggleFilter,\n handleClearFilter,\n handleRangeChange,\n } = useFilterState(filters);\n\n // Dimension hooks\n const {\n activeDimensionKey,\n setActiveDimensionKey,\n activeDimension,\n dimensionFilter,\n handleAxisLabelClick,\n } = useDimensionState(dimensions, defaultDimensionKey);\n\n // Zoom and pan hooks\n const {\n zoomLevel,\n setZoomLevel,\n handleZoomIn,\n handleZoomOut,\n handleZoomSlider,\n } = useZoomState(1);\n\n const {\n isPanning,\n handlePanStart,\n handlePanMove,\n handlePanEnd,\n } = usePanning(containerRef, undefined, setScrollPosition);\n\n useWheelZoom(containerRef, zoomLevel, setZoomLevel);\n\n // Track container dimensions for responsive layout\n const containerDimensions = useContainerDimensions(containerRef, isLoading);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const handleScroll = () => {\n setScrollPosition({\n x: container.scrollLeft,\n y: container.scrollTop,\n });\n };\n\n container.addEventListener('scroll', handleScroll);\n return () => container.removeEventListener('scroll', handleScroll);\n }, []);\n\n // Build field extractors for the columnar store\n const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);\n\n // Initialize the Web Worker engine\n const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine({\n data,\n fieldExtractors,\n indexFields,\n });\n\n // Build filter specs from UI state\n const currentFilters = useCurrentFilters(\n filters,\n filterState,\n rangeFilterState,\n search,\n searchFields,\n dimensionFilter,\n activeDimension,\n );\n\n const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);\n\n // Apply filters\n useEffect(() => {\n if (!ready) return;\n\n engineApplyFilters(currentFilters).then((result) => {\n // If the engine failed to return any IDs while no filters are active,\n // fall back to showing the full dataset so the canvas never renders empty.\n if (result.visibleIds.length === 0 && currentFilters.length === 0 && data.length > 0) {\n const fallbackIds = new Uint32Array(data.length);\n for (let i = 0; i < data.length; i++) {\n fallbackIds[i] = i;\n }\n setVisibleIds(fallbackIds);\n return;\n }\n\n setVisibleIds(result.visibleIds);\n });\n }, [ready, currentFilters, engineApplyFilters, data.length]);\n\n // Compute grouping\n const lastGroupingRequest = useRef<{ viewMode: ViewMode; groupBy: unknown; visibleIds: Uint32Array } \| null>(null);\n \n useEffect(() => {\n if (!ready \|\| visibleIds.length === 0) {\n setGrouping({ groups: [] });\n lastGroupingRequest.current = null;\n return;\n }\n\n if (viewMode === 'collection') {\n // In collection mode, create a single group with all items\n // Sort items if activeDimensionKey is set\n if (activeDimensionKey) {\n sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: sortedIds,\n count: sortedIds.length\n }]\n });\n });\n } else {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: visibleIds,\n count: visibleIds.length\n }]\n });\n }\n lastGroupingRequest.current = null;\n return;\n }\n\n // Check if this is the same request as last time to prevent duplicate computations\n const lastRequest = lastGroupingRequest.current;\n if (\n lastRequest &&\n lastRequest.viewMode === viewMode &&\n (lastRequest.groupBy as unknown as typeof currentGroupBy)?.field === currentGroupBy.field &&\n lastRequest.visibleIds === visibleIds\n ) {\n return;\n }\n\n lastGroupingRequest.current = { viewMode, groupBy: currentGroupBy, visibleIds };\n \n computeGrouping(visibleIds, currentGroupBy).then((result) => {\n setGrouping(result);\n });\n }, [ready, visibleIds, currentGroupBy, viewMode, computeGrouping, sortIds, activeDimensionKey]);\n\n // Compute layout\n const layout = useMemo(() => {\n // Calculate layout at base dimensions (zoom is applied as transform)\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n const containerWidth = containerDimensions.width / zoomLevel;\n // For grouped mode, use fixed container height to ensure stable layout during zoom\n const containerHeight = viewMode === 'collection'\n ? containerDimensions.height / zoomLevel\n : containerDimensions.height;\n\n const result = computeLayout(grouping, {\n viewMode,\n cardWidth,\n cardHeight,\n cardsPerColumn: CARDS_PER_COLUMN,\n groupSpacing: GROUP_SPACING,\n containerWidth,\n containerHeight,\n });\n\n return result;\n }, [grouping, viewMode, zoomLevel, containerDimensions.width, containerDimensions.height]);\n\n const resolveId = useCallback((item: TItem, index: number) => {\n if (getItemId) {\n const id = getItemId(item, index);\n return typeof id === 'number' ? id : index;\n }\n const id = (item as Record<string, unknown>)['id'];\n return typeof id === 'number' ? id : index;\n }, [getItemId]);\n\n // Track animation mode changes\n useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);\n\n // Sync axis labels scroll with container scroll\n useScrollSync(containerRef, axisLabelsRef, viewMode);\n\n // Handle scroll positioning when switching view modes or grouping changes\n useViewModeScrollHandling({\n containerRef,\n viewMode,\n grouping,\n layout,\n selectedItem,\n zoomLevel,\n resolveId,\n data,\n setPreSelectionState,\n });\n\n // Handle card selection (click)\n const handleCardClick = useCardSelection({\n data,\n isPanning,\n selectedItem,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n scrollPosition,\n preSelectionState,\n grouping,\n getItemId,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Handle detail panel close\n const closeDetail = useDetailPanelClose({\n selectedItem,\n preSelectionState,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n grouping,\n data,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Use base card dimensions - zoom is applied as transform in canvas\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n\n // Calculate filter options\n const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);\n\n const hasFilters = Boolean(filters && filters.length > 0);\n const activeFilterCount = Object.values(filterState).reduce((sum: number, vals) => sum + (vals as Set<string>).size, 0) +\n Object.values(rangeFilterState).filter(r => r !== null).length;\n\n const viewerClassName = [\n 'pivot-viewer',\n className,\n hasFilters ? (filtersOpen ? 'filters-open' : 'filters-closed') : 'no-filters',\n viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',\n ]\n .filter(Boolean)\n .join(' ');\n\n // Map provided color overrides to CSS variables understood by the component.\n const cssVariables = useMemo(() => {\n const vars: Record<string, string> = {};\n if (!colors) return vars;\n if (colors.primaryColor) vars['--primary-color'] = colors.primaryColor;\n if (colors.primaryColorText) vars['--primary-color-text'] = colors.primaryColorText;\n if (colors.primary500) vars['--primary-500'] = colors.primary500;\n if (colors.surfaceGround) vars['--surface-ground'] = colors.surfaceGround;\n if (colors.surfaceCard) vars['--surface-card'] = colors.surfaceCard;\n if (colors.surfaceSection) vars['--surface-section'] = colors.surfaceSection;\n if (colors.surfaceOverlay) vars['--surface-overlay'] = colors.surfaceOverlay;\n if (colors.surfaceBorder) vars['--surface-border'] = colors.surfaceBorder;\n if (colors.textColor) vars['--text-color'] = colors.textColor;\n if (colors.textColorSecondary) vars['--text-color-secondary'] = colors.textColorSecondary;\n if (colors.highlightBg) vars['--highlight-bg'] = colors.highlightBg;\n if (colors.maskbg) vars['--maskbg'] = colors.maskbg;\n if (colors.focusRing) vars['--focus-ring'] = colors.focusRing;\n return vars;\n }, [colors]);\n\n return (\n <div className={viewerClassName} style={cssVariables as React.CSSProperties}>\n <FilterPanelContainer\n isOpen={filtersOpen && hasFilters}\n search={search}\n filterState={filterState}\n rangeFilterState={rangeFilterState}\n expandedFilterKey={expandedFilterKey}\n filterOptions={filterOptions}\n anchorRef={filterButtonRef}\n onClose={() => setFiltersOpen(false)}\n onSearchChange={setSearch}\n onFilterToggle={handleToggleFilter}\n onFilterClear={handleClearFilter}\n onRangeChange={handleRangeChange}\n onExpandedFilterChange={setExpandedFilterKey}\n />\n\n <main className=\"pv-main\">\n <ToolbarContainer\n hasFilters={hasFilters}\n filtersOpen={filtersOpen}\n filteredCount={visibleIds.length}\n viewMode={viewMode}\n zoomLevel={zoomLevel}\n activeDimensionKey={activeDimensionKey}\n dimensions={dimensions}\n activeFilterCount={activeFilterCount}\n onFiltersToggle={() => setFiltersOpen((prev) => !prev)}\n onViewModeChange={setViewMode}\n onZoomIn={handleZoomIn}\n onZoomOut={handleZoomOut}\n onZoomSlider={handleZoomSlider}\n onDimensionChange={setActiveDimensionKey}\n filterButtonRef={filterButtonRef}\n />\n\n <PivotViewerMain\n data={data}\n ready={ready}\n isLoading={isLoading}\n visibleIds={visibleIds}\n grouping={grouping}\n layout={layout}\n cardWidth={cardWidth}\n cardHeight={cardHeight}\n zoomLevel={zoomLevel}\n scrollPosition={scrollPosition}\n containerDimensions={containerDimensions}\n selectedItem={selectedItem}\n hoveredGroupIndex={hoveredGroupIndex}\n isZooming={isZooming}\n viewMode={viewMode}\n cardRenderer={cardRenderer}\n detailRenderer={detailRenderer}\n resolveId={resolveId}\n emptyContent={emptyContent}\n dimensionFilter={dimensionFilter}\n onCardClick={handleCardClick}\n onPanStart={handlePanStart as (e: React.MouseEvent) => void}\n onPanMove={handlePanMove as (e: React.MouseEvent) => void}\n onPanEnd={handlePanEnd}\n onGroupHover={setHoveredGroupIndex}\n onAxisLabelClick={handleAxisLabelClick}\n onCloseDetail={closeDetail}\n containerRef={containerRef}\n axisLabelsRef={axisLabelsRef}\n spacerRef={spacerRef}\n />\n </main>\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"PivotViewer.js","sources":["../../../PivotViewer/PivotViewer.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { PivotViewerProps } from './types';\nimport type { GroupingResult } from './engine/types';\nimport { usePivotEngine } from './hooks/usePivotEngine';\nimport { computeLayout } from './engine/layout';\nimport { useFilterState } from './hooks/useFilterState';\nimport { useDimensionState } from './hooks/useDimensionState';\nimport { useZoomState } from './hooks/useZoomState';\nimport { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, CARDS_PER_COLUMN, GROUP_SPACING } from './constants';\nimport './PivotViewer.css';\nimport { PivotViewerMain } from './components/PivotViewerMain';\nimport { FilterPanelContainer } from './components/FilterPanelContainer';\nimport { ToolbarContainer } from './components/ToolbarContainer';\nimport { usePanning, useWheelZoom, useFilterOptions } from './hooks';\nimport { useContainerDimensions } from './hooks/useContainerDimensions';\nimport type { ViewMode } from './components/Toolbar';\nimport { useFieldExtractors } from './hooks/useFieldExtractors';\nimport { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters';\nimport { useCardSelection } from './hooks/useCardSelection';\nimport { useDetailPanelClose } from './hooks/useDetailPanelClose';\nimport { useScrollSync } from './hooks/useScrollSync';\nimport { useAnimationModeTracking } from './hooks/useAnimationModeTracking';\nimport { useViewModeScrollHandling } from './hooks/useViewModeScrollHandling';\n\nexport function PivotViewer<TItem extends object>({\n data,\n dimensions,\n filters,\n defaultDimensionKey,\n cardRenderer,\n detailRenderer,\n getItemId,\n searchFields,\n className,\n emptyContent,\n isLoading = false,\n colors,\n}: PivotViewerProps<TItem>) {\n // Refs\n const containerRef = useRef<HTMLDivElement>(null!);\n const filterButtonRef = useRef<HTMLButtonElement>(null!);\n const axisLabelsRef = useRef<HTMLDivElement>(null!);\n const spacerRef = useRef<HTMLDivElement>(null!);\n\n // State\n const [search, setSearch] = useState('');\n const [viewMode, setViewMode] = useState<ViewMode>('collection');\n const [filtersOpen, setFiltersOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState<TItem \| null>(null);\n const [isZooming, setIsZooming] = useState(false);\n const [visibleIds, setVisibleIds] = useState<Uint32Array>(new Uint32Array(0));\n const [grouping, setGrouping] = useState<GroupingResult>({ groups: [] });\n const [hoveredGroupIndex, setHoveredGroupIndex] = useState<number \| null>(null);\n const [preSelectionState, setPreSelectionState] = useState<{ zoom: number; scrollLeft: number; scrollTop: number } \| null>(null);\n const [, setAnimationMode] = useState<'layout' \| 'filter'>('layout');\n const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });\n\n // Filter hooks\n const {\n filterState,\n rangeFilterState,\n expandedFilterKey,\n setExpandedFilterKey,\n handleToggleFilter,\n handleClearFilter,\n handleRangeChange,\n } = useFilterState(filters);\n\n // Dimension hooks\n const {\n activeDimensionKey,\n setActiveDimensionKey,\n activeDimension,\n dimensionFilter,\n handleAxisLabelClick,\n } = useDimensionState(dimensions, defaultDimensionKey);\n\n // Zoom and pan hooks\n const {\n zoomLevel,\n setZoomLevel,\n handleZoomIn,\n handleZoomOut,\n handleZoomSlider,\n handleZoomReset,\n handleZoomChange,\n } = useZoomState(1);\n\n const {\n isPanning,\n handlePanStart,\n handlePanMove,\n handlePanEnd,\n } = usePanning(containerRef, undefined, setScrollPosition);\n\n useWheelZoom(containerRef, zoomLevel, setZoomLevel);\n\n // Track container dimensions for responsive layout\n const containerDimensions = useContainerDimensions(containerRef, isLoading);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const handleScroll = () => {\n setScrollPosition({\n x: container.scrollLeft,\n y: container.scrollTop,\n });\n };\n\n container.addEventListener('scroll', handleScroll);\n return () => container.removeEventListener('scroll', handleScroll);\n }, []);\n\n // Build field extractors for the columnar store\n const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);\n\n // Initialize the Web Worker engine\n const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine({\n data,\n fieldExtractors,\n indexFields,\n });\n\n // Build filter specs from UI state\n const currentFilters = useCurrentFilters(\n filters,\n filterState,\n rangeFilterState,\n search,\n searchFields,\n dimensionFilter,\n activeDimension,\n );\n\n const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);\n\n // Apply filters\n useEffect(() => {\n if (!ready) return;\n\n engineApplyFilters(currentFilters).then((result) => {\n // If the engine failed to return any IDs while no filters are active,\n // fall back to showing the full dataset so the canvas never renders empty.\n if (result.visibleIds.length === 0 && currentFilters.length === 0 && data.length > 0) {\n const fallbackIds = new Uint32Array(data.length);\n for (let i = 0; i < data.length; i++) {\n fallbackIds[i] = i;\n }\n setVisibleIds(fallbackIds);\n return;\n }\n\n setVisibleIds(result.visibleIds);\n });\n }, [ready, currentFilters, engineApplyFilters, data.length]);\n\n // Compute grouping\n const lastGroupingRequest = useRef<{ viewMode: ViewMode; groupBy: unknown; visibleIds: Uint32Array } \| null>(null);\n \n useEffect(() => {\n if (!ready \|\| visibleIds.length === 0) {\n setGrouping({ groups: [] });\n lastGroupingRequest.current = null;\n return;\n }\n\n if (viewMode === 'collection') {\n // In collection mode, create a single group with all items\n // Sort items if activeDimensionKey is set\n if (activeDimensionKey) {\n sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: sortedIds,\n count: sortedIds.length\n }]\n });\n });\n } else {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: visibleIds,\n count: visibleIds.length\n }]\n });\n }\n lastGroupingRequest.current = null;\n return;\n }\n\n // Check if this is the same request as last time to prevent duplicate computations\n const lastRequest = lastGroupingRequest.current;\n if (\n lastRequest &&\n lastRequest.viewMode === viewMode &&\n (lastRequest.groupBy as unknown as typeof currentGroupBy)?.field === currentGroupBy.field &&\n lastRequest.visibleIds === visibleIds\n ) {\n return;\n }\n\n lastGroupingRequest.current = { viewMode, groupBy: currentGroupBy, visibleIds };\n \n computeGrouping(visibleIds, currentGroupBy).then((result) => {\n setGrouping(result);\n });\n }, [ready, visibleIds, currentGroupBy, viewMode, computeGrouping, sortIds, activeDimensionKey]);\n\n // Compute layout\n const layout = useMemo(() => {\n // Calculate layout at base dimensions (zoom is applied as transform)\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n const containerWidth = containerDimensions.width / zoomLevel;\n // For grouped mode, use fixed container height to ensure stable layout during zoom\n const containerHeight = viewMode === 'collection'\n ? containerDimensions.height / zoomLevel\n : containerDimensions.height;\n\n const result = computeLayout(grouping, {\n viewMode,\n cardWidth,\n cardHeight,\n cardsPerColumn: CARDS_PER_COLUMN,\n groupSpacing: GROUP_SPACING,\n containerWidth,\n containerHeight,\n });\n\n return result;\n }, [grouping, viewMode, zoomLevel, containerDimensions.width, containerDimensions.height]);\n\n const resolveId = useCallback((item: TItem, index: number) => {\n if (getItemId) {\n const id = getItemId(item, index);\n return typeof id === 'number' ? id : index;\n }\n const id = (item as Record<string, unknown>)['id'];\n return typeof id === 'number' ? id : index;\n }, [getItemId]);\n\n // Track animation mode changes\n useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);\n\n // Sync axis labels scroll with container scroll\n useScrollSync(containerRef, axisLabelsRef, viewMode);\n\n // Handle scroll positioning when switching view modes or grouping changes\n useViewModeScrollHandling({\n containerRef,\n viewMode,\n grouping,\n layout,\n selectedItem,\n zoomLevel,\n resolveId,\n data,\n setPreSelectionState,\n });\n\n // Handle card selection (click)\n const handleCardClick = useCardSelection({\n data,\n isPanning,\n selectedItem,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n scrollPosition,\n preSelectionState,\n grouping,\n getItemId,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Handle detail panel close\n const closeDetail = useDetailPanelClose({\n selectedItem,\n preSelectionState,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n grouping,\n data,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Use base card dimensions - zoom is applied as transform in canvas\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n\n // Calculate filter options\n const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);\n\n const hasFilters = Boolean(filters && filters.length > 0);\n const activeFilterCount = Object.values(filterState).reduce((sum: number, vals) => sum + (vals as Set<string>).size, 0) +\n Object.values(rangeFilterState).filter(r => r !== null).length;\n\n const viewerClassName = [\n 'pivot-viewer',\n className,\n hasFilters ? (filtersOpen ? 'filters-open' : 'filters-closed') : 'no-filters',\n viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',\n ]\n .filter(Boolean)\n .join(' ');\n\n // Deselect any selected card when switching between view modes\n useEffect(() => {\n setSelectedItem(null);\n }, [viewMode]);\n\n // Map provided color overrides to CSS variables understood by the component.\n const cssVariables = useMemo(() => {\n const vars: Record<string, string> = {};\n if (!colors) return vars;\n if (colors.primaryColor) vars['--primary-color'] = colors.primaryColor;\n if (colors.primaryColorText) vars['--primary-color-text'] = colors.primaryColorText;\n if (colors.primary500) vars['--primary-500'] = colors.primary500;\n if (colors.surfaceGround) vars['--surface-ground'] = colors.surfaceGround;\n if (colors.surfaceCard) vars['--surface-card'] = colors.surfaceCard;\n if (colors.surfaceSection) vars['--surface-section'] = colors.surfaceSection;\n if (colors.surfaceOverlay) vars['--surface-overlay'] = colors.surfaceOverlay;\n if (colors.surfaceBorder) vars['--surface-border'] = colors.surfaceBorder;\n if (colors.textColor) vars['--text-color'] = colors.textColor;\n if (colors.textColorSecondary) vars['--text-color-secondary'] = colors.textColorSecondary;\n if (colors.highlightBg) vars['--highlight-bg'] = colors.highlightBg;\n if (colors.maskbg) vars['--maskbg'] = colors.maskbg;\n if (colors.focusRing) vars['--focus-ring'] = colors.focusRing;\n return vars;\n }, [colors]);\n\n return (\n <div className={viewerClassName} style={cssVariables as React.CSSProperties}>\n <FilterPanelContainer\n isOpen={filtersOpen && hasFilters}\n search={search}\n filterState={filterState}\n rangeFilterState={rangeFilterState}\n expandedFilterKey={expandedFilterKey}\n filterOptions={filterOptions}\n anchorRef={filterButtonRef}\n onClose={() => setFiltersOpen(false)}\n onSearchChange={setSearch}\n onFilterToggle={handleToggleFilter}\n onFilterClear={handleClearFilter}\n onRangeChange={handleRangeChange}\n onExpandedFilterChange={setExpandedFilterKey}\n />\n\n <main className=\"pv-main\">\n <ToolbarContainer\n hasFilters={hasFilters}\n filtersOpen={filtersOpen}\n filteredCount={visibleIds.length}\n viewMode={viewMode}\n zoomLevel={zoomLevel}\n activeDimensionKey={activeDimensionKey}\n dimensions={dimensions}\n activeFilterCount={activeFilterCount}\n onFiltersToggle={() => setFiltersOpen((prev) => !prev)}\n onViewModeChange={setViewMode}\n onZoomIn={handleZoomIn}\n onZoomOut={handleZoomOut}\n onZoomSlider={handleZoomSlider}\n onZoomReset={handleZoomReset}\n onZoomChange={handleZoomChange}\n onDimensionChange={setActiveDimensionKey}\n filterButtonRef={filterButtonRef}\n />\n\n <PivotViewerMain\n data={data}\n ready={ready}\n isLoading={isLoading}\n visibleIds={visibleIds}\n grouping={grouping}\n layout={layout}\n cardWidth={cardWidth}\n cardHeight={cardHeight}\n zoomLevel={zoomLevel}\n scrollPosition={scrollPosition}\n containerDimensions={containerDimensions}\n selectedItem={selectedItem}\n hoveredGroupIndex={hoveredGroupIndex}\n isZooming={isZooming}\n viewMode={viewMode}\n cardRenderer={cardRenderer}\n detailRenderer={detailRenderer}\n resolveId={resolveId}\n emptyContent={emptyContent}\n dimensionFilter={dimensionFilter}\n onCardClick={handleCardClick}\n onPanStart={handlePanStart as (e: React.MouseEvent) => void}\n onPanMove={handlePanMove as (e: React.MouseEvent) => void}\n onPanEnd={handlePanEnd}\n onGroupHover={setHoveredGroupIndex}\n onAxisLabelClick={handleAxisLabelClick}\n onCloseDetail={closeDetail}\n containerRef={containerRef}\n axisLabelsRef={axisLabelsRef}\n spacerRef={spacerRef}\n />\n </main>\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/PivotViewer/PivotViewer.stories.d.ts CHANGED Viewed

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof PivotViewer>;
 export default meta;
 type Story = StoryObj<typeof PivotViewer>;
 export declare const Default: Story;
-export declare const WithTypeSafeSearch: Story;
 //# sourceMappingURL=PivotViewer.stories.d.ts.map

package/dist/esm/PivotViewer/PivotViewer.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PivotViewer.stories.d.ts","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.stories.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;~~AAClD~~,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;~~AAyB1C~~,eAAO,MAAM,OAAO,EAAE,~~KAUrB~~,CAAC~~;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsFhC,CAAC~~"}
1	+ {"version":3,"file":"PivotViewer.stories.d.ts","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6B1C,eAAO,MAAM,OAAO,EAAE,KAgFrB,CAAC"}

package/dist/esm/PivotViewer/PivotViewer.stories.js CHANGED Viewed

@@ -11,15 +11,12 @@ const sampleData = [
     { id: 3, name: 'Charlie Brown', age: 42, department: 'Engineering', address: { street: '789 Pine Rd', city: 'Seattle', zipCode: '98102' } },
     { id: 4, name: 'Diana Prince', age: 31, department: 'Sales', address: { street: '321 Elm St', city: 'San Francisco', zipCode: '94102' } },
     { id: 5, name: 'Edward Norton', age: 29, department: 'Engineering', address: { street: '654 Maple Dr', city: 'Portland', zipCode: '97202' } },
+    { id: 6, name: 'Fiona Lee', age: 33, department: 'Human Resources', address: { street: '852 Cedar St', city: 'Seattle', zipCode: '98103' } },
+    { id: 7, name: 'George Miller', age: 27, department: 'Support', address: { street: '147 Birch Ln', city: 'Portland', zipCode: '97204' } },
+    { id: 8, name: 'Hannah Davis', age: 45, department: 'Finance', address: { street: '963 Walnut Ave', city: 'San Francisco', zipCode: '94103' } },
+    { id: 9, name: 'Isaac Newton', age: 38, department: 'Research', address: { street: '753 Spruce Rd', city: 'Austin', zipCode: '73301' } },
 ];
 export const Default = {
-    args: {
-        data: [],
-        dimensions: [],
-    },
-    render: (args) => (_jsx("div", { className: "storybook-wrapper", children: _jsx(PivotViewer, { ...args, data: [], dimensions: [] }) }))
-};
-export const WithTypeSafeSearch = {
     render: () => {
         const dimensions = [
             {
@@ -46,10 +43,14 @@ export const WithTypeSafeSearch = {
                     (item) => item.department,
                     (item) => item.address.city,
                     (item) => item.address.street,
-                ], cardRenderer: (item) => (_jsxs("div", { style: { padding: '8px' }, children: [_jsx("h3", { children: item.name }), _jsxs("p", { children: ["Age: ", item.age] }), _jsxs("p", { children: ["Department: ", item.department] }), _jsx("p", { children: item.address.city })] })), colors: {
+                ], cardRenderer: (item) => ({
+                    title: item.name,
+                    labels: ['Id', 'Age', 'Department', 'City'],
+                    values: [String(item.id), String(item.age), item.department, item.address.city],
+                }), colors: {
                     primaryColor: '#91BDF8',
                     primary500: '#2E66BA',
-                }, detailRenderer: (item, onClose) => (_jsxs("aside", { className: "pv-detail-panel", children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("h2", { children: item.name }), _jsxs("p", { children: ["Department \u2022 ", item.department] })] }), _jsx("button", { type: "button", onClick: onClose, title: "Close", children: "\u00D7" })] }), _jsx("div", { className: "pv-detail-panel-content", children: _jsxs("section", { children: [_jsx("h3", { children: "Profile" }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: "Age" }), _jsx("dd", { children: item.age })] }), _jsxs("div", { children: [_jsx("dt", { children: "City" }), _jsx("dd", { children: item.address.city })] }), _jsxs("div", { children: [_jsx("dt", { children: "Street" }), _jsx("dd", { children: item.address.street })] })] })] }) })] })), getItemId: (item) => item.id }) }));
+                }, detailRenderer: (item, onClose) => (_jsxs("section", { children: [_jsxs("header", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { margin: 0 }, children: item.name }), _jsxs("p", { style: { margin: 0, opacity: 0.8 }, children: ["Department \u2022 ", item.department] })] }), _jsx("button", { type: "button", onClick: onClose, title: "Close", className: "p-button p-button-text", children: "Close" })] }), _jsxs("dl", { style: { marginTop: '1rem', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.35rem 0.75rem' }, children: [_jsxs("div", { children: [_jsx("dt", { children: "Age" }), _jsx("dd", { children: item.age })] }), _jsxs("div", { children: [_jsx("dt", { children: "City" }), _jsx("dd", { children: item.address.city })] }), _jsxs("div", { children: [_jsx("dt", { children: "Street" }), _jsx("dd", { children: item.address.street })] })] })] })), getItemId: (item) => item.id }) }));
     },
 };
 //# sourceMappingURL=PivotViewer.stories.js.map

package/dist/esm/PivotViewer/PivotViewer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PivotViewer.stories.js","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,IAAI,GAA6B;IACnC,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,WAAW;CACzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAkBpB,MAAM,UAAU,GAAa;IACzB,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAC3I,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IACtI,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAC3I,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IACzI,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;~~CAChJ~~,~~CAAC;AAEF~~,~~MAAM~~,CAAC,~~MAAM~~,OAAO,~~GAAU;IAC1B~~,IAAI,EAAE;~~QACF~~,IAAI,EAAE,EAAE~~;QACR~~,UAAU,EAAE,EAAE~~;KACjB;IACD~~,MAAM,EAAE,~~CAAC~~,IAAI,EAAE,EAAE,CAAC,~~CACd~~,~~cAAK~~,SAAS,~~EAAC~~,~~mBAAmB~~,~~YAC9B~~,~~KAAC~~,~~WAAW~~,~~OAAK~~,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,~~GAAI~~,~~GACjD~~,~~CACT~~;~~CACJ~~,CAAC;AAEF,MAAM,CAAC,MAAM,~~kBAAkB~~,GAAU;~~IACrC~~,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,UAAU,GAAG;YACf;gBACI,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,YAAY;gBACnB,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU;aAC9C;YACD;gBACI,GAAG,EAAE,MAAM;gBACX,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;aAChD;SACJ,CAAC;QAEF,MAAM,OAAO,GAAG;YACZ;gBACI,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG;gBACpC,IAAI,EAAE,QAAiB;aAC1B;SACJ,CAAC;QAEF,OAAO,CACH,cAAK,SAAS,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,YACvM,KAAC,WAAW,IACR,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAEhB,YAAY,EAAE;oBACV,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI;oBACnB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU;oBACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;oBAC3B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;iBAChC,EACD,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,~~CACpB~~,~~eAAK,~~KAAK,EAAE,EAAE,~~OAAO~~,EAAE,KAAK,EAAE,~~aAC1B~~,~~uBAAK~~,~~IAAI~~,CAAC,IAAI,~~GAAM~~,~~EACpB~~,~~iCAAS~~,IAAI,CAAC,GAAG,~~IAAK~~,~~EACtB~~,~~wCAAgB,~~IAAI,CAAC,UAAU,~~IAAK~~,~~EACpC,sBAAI,~~IAAI,CAAC,OAAO,CAAC,IAAI,~~GAAK~~,~~IACxB~~,~~CACT~~,~~EAED,~~MAAM,EAAE;oBACJ,YAAY,EAAE,SAAS;oBACvB,UAAU,EAAE,SAAS;iBACxB,EAED,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAC/B,~~iBAAO~~,~~SAAS~~,~~EAAC~~,~~iBAAiB~~,~~aAC9B~~,~~6BACI~~,0BACI,~~uBAAK~~,IAAI,CAAC,IAAI,GAAM,~~EACpB~~,~~8CAAiB~~,IAAI,CAAC,UAAU,IAAK,~~IACnC~~,EACN,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,OAAO,~~uBAAW~~,~~IAC3D~~,EACT,~~cAAK~~,SAAS,~~EAAC~~,~~yBAAyB~~,~~YACpC~~,~~8BACI~~,~~mCAAgB~~,~~EAChB~~,~~yBACI~~,0BACI,+BAAY,EACZ,uBAAK,IAAI,CAAC,GAAG,GAAM,IACjB,EACN,0BACI,gCAAa,EACb,uBAAK,IAAI,CAAC,OAAO,CAAC,IAAI,GAAM,IAC1B,EACN,0BACI,kCAAe,EACf,uBAAK,IAAI,CAAC,OAAO,CAAC,MAAM,GAAM,IAC5B,IACL,IACC,~~GACR~~,~~IACF,CACX,~~EACD,SAAS,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,GAC9B,GACA,CACT,CAAC;IACN,CAAC;CACJ,CAAC"}
1	+ {"version":3,"file":"PivotViewer.stories.js","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/PivotViewer/components/AxisLabels.d.ts CHANGED Viewed

@@ -5,9 +5,10 @@ export interface AxisLabelsProps<TItem extends object> {
     dimensionFilter: string | null;
     hoveredGroup: string | null;
     zoomLevel: number;
+    visible: boolean;
     onHover: (key: string | null) => void;
     onClick: (key: string) => void;
     containerRef: React.RefObject<HTMLDivElement | null>;
 }
-export declare function AxisLabels<TItem extends object>({ groups, bucketWidths, dimensionFilter, hoveredGroup, zoomLevel, onHover, onClick, containerRef, }: AxisLabelsProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function AxisLabels<TItem extends object>({ groups, bucketWidths, dimensionFilter, hoveredGroup, zoomLevel, visible, onHover, onClick, containerRef, }: AxisLabelsProps<TItem>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AxisLabels.d.ts.map

package/dist/esm/PivotViewer/components/AxisLabels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AxisLabels.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/components/AxisLabels.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,WAAW,eAAe,CAAC,KAAK,SAAS,MAAM;IACnD,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,wBAAgB,UAAU,CAAC,KAAK,SAAS,MAAM,EAAE,EAC/C,MAAM,EACN,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,EACP,YAAY,GACb,EAAE,eAAe,CAAC,KAAK,CAAC,2CA0CxB"}
1	+ {"version":3,"file":"AxisLabels.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/components/AxisLabels.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,WAAW,eAAe,CAAC,KAAK,SAAS,MAAM;IACnD,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,wBAAgB,UAAU,CAAC,KAAK,SAAS,MAAM,EAAE,EAC/C,MAAM,EACN,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,EACP,OAAO,EACP,YAAY,GACb,EAAE,eAAe,CAAC,KAAK,CAAC,2CA0CxB"}

package/dist/esm/PivotViewer/components/AxisLabels.js CHANGED Viewed

@@ -1,12 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { GROUP_SPACING } from '../constants.js';
+import { CANVAS_PADDING } from '../constants.js';
-function AxisLabels({ groups, bucketWidths, dimensionFilter, hoveredGroup, zoomLevel, onHover, onClick, containerRef, }) {
-    return (jsx("div", { className: "pv-axis-labels", ref: containerRef, style: {
-            pointerEvents: 'none',
-            gap: `${GROUP_SPACING * zoomLevel}px`,
-            paddingLeft: 0,
-            paddingRight: 0,
+function AxisLabels({ groups, bucketWidths, dimensionFilter, hoveredGroup, zoomLevel, visible, onHover, onClick, containerRef, }) {
+    return (jsx("div", { className: `pv-axis-labels ${visible ? 'visible' : 'hidden'}`, ref: containerRef, style: {
+            paddingLeft: `${(CANVAS_PADDING * zoomLevel) - (20 * zoomLevel)}px`,
             overflowX: 'hidden',
             whiteSpace: 'nowrap',
         }, children: groups.map((group, index) => {
@@ -14,9 +11,9 @@ function AxisLabels({ groups, bucketWidths, dimensionFilter, hoveredGroup, zoomL
             const baseBucketWidth = bucketWidths[index] || 0;
             const bucketWidth = baseBucketWidth * zoomLevel;
             const width = bucketWidth;
-            return (jsxs("button", { type: "button", className: `pv-axis-label ${hoveredGroup === group.key ? 'highlighted' : ''} ${isSelected ? 'selected' : ''}`, style: {
+            const isFilteredOut = dimensionFilter !== null && !isSelected;
+            return (jsxs("button", { type: "button", className: `pv-axis-label ${hoveredGroup === group.key ? 'highlighted' : ''} ${isSelected ? 'selected' : ''} ${isFilteredOut ? 'filtered-out' : ''}`, style: {
                     width,
-                    pointerEvents: 'auto'
                 }, onMouseEnter: () => onHover(group.key), onMouseLeave: () => onHover(null), onClick: () => onClick(group.key), children: [jsx("span", { className: "pv-axis-label-text", children: group.label }), jsx("span", { className: "pv-axis-label-count", children: group.count ?? group.items.length })] }, group.key));
         }) }));
 }

package/dist/esm/PivotViewer/components/AxisLabels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AxisLabels.js","sources":["../../../../PivotViewer/components/AxisLabels.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 type { PivotGroup } from '../types';\nimport { ~~GROUP_SPACING~~ } from '../constants';\n\nexport interface AxisLabelsProps<TItem extends object> {\n groups: PivotGroup<TItem>[];\n bucketWidths: number[];\n dimensionFilter: string \| null;\n hoveredGroup: string \| null;\n zoomLevel: number;\n onHover: (key: string \| null) => void;\n onClick: (key: string) => void;\n containerRef: React.RefObject<HTMLDivElement \| null>;\n}\n\nexport function AxisLabels<TItem extends object>({\n groups,\n bucketWidths,\n dimensionFilter,\n hoveredGroup,\n zoomLevel,\n onHover,\n onClick,\n containerRef,\n}: AxisLabelsProps<TItem>) {\n return (\n <div\n className~~=\"~~pv-axis-labels\"\n ref={containerRef}\n style={{\n ~~pointerEvents:~~ ~~'none',\~~n ~~gap~~: `${~~GROUP_SPACING~~ * zoomLevel}px`,\n ~~paddingLeft: 0,\n paddingRight: 0,\n~~ overflowX: 'hidden',\n whiteSpace: 'nowrap',\n }}\n >\n {groups.map((group, index) => {\n const isSelected = dimensionFilter === group.key;\n const baseBucketWidth = bucketWidths[index] \|\| 0;\n // Apply zoom to bucket width\n const bucketWidth = baseBucketWidth * zoomLevel;\n // Width is just the bucket width - spacing is handled by CSS gap\n const width = bucketWidth;\n\n return (\n <button\n key={group.key}\n type=\"button\"\n className={`pv-axis-label ${hoveredGroup === group.key ? 'highlighted' : ''} ${isSelected ? 'selected' : ''}`}\n style={{\n width,\n ~~pointerEvents: 'auto'\n~~ }}\n onMouseEnter={() => onHover(group.key)}\n onMouseLeave={() => onHover(null)}\n onClick={() => onClick(group.key)}\n >\n <span className=\"pv-axis-label-text\">{group.label}</span>\n <span className=\"pv-axis-label-count\">{group.count ?? group.items.length}</span>\n </button>\n );\n })}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;~~SAiBgB~~,UAAU,CAAuB,EAC/C,MAAM,EACN,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,EACP,YAAY,GACW,EAAA;IACvB,QACEA,~~GAAA~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EACE~~,SAAS,~~EAAC~~,~~gBAAgB~~,~~EAC1B~~,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;~~AACL~~,YAAA,~~aAAa~~,EAAE,~~MAAM;AACrB,YAAA,GAAG,EAAE,~~CAAA,EAAG,~~aAAa~~,GAAG,SAAS,~~CAAA~~,~~EAAA~~,~~CAAI;AACrC~~,~~YAAA~~,~~WAAW,EAAE,~~CAAC~~;AACd~~,~~YAAA~~,~~YAAY~~,~~EAAE,CAAC~~;~~AACf~~,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,UAAU,EAAE,QAAQ;SACrB,EAAA,QAAA,EAEA,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AAC3B,YAAA,MAAM,UAAU,GAAG,eAAe,KAAK,KAAK,CAAC,GAAG;YAChD,MAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAEhD,YAAA,MAAM,WAAW,GAAG,eAAe,GAAG,SAAS;YAE/C,MAAM,KAAK,GAAG,WAAW;~~AAEzB~~,~~YAAA~~,~~QACEC~~,~~IAAA~~,~~CAAA~~,~~QAAA~~,~~EAAA~~,~~EAEE~~,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAA,cAAA,EAAiB,YAAY,KAAK,KAAK,CAAC,GAAG,GAAG,aAAa,GAAG,EAAE,CAAA,CAAA,EAAI,~~UAAU~~,GAAG,~~UAAU~~,GAAG,EAAE,CAAA,CAAE,~~EAC7G~~,KAAK,EAAE;oBACL,KAAK;~~AACL~~,~~oBAAA,aAAa,EAAE;AAChB,~~iBAAA,EACD,YAAY,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EACtC,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAEjCD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,EACzDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,EAAA,CAAQ,CAAA,EAAA,~~EAZ3E~~,KAAK,CAAC,GAAG,~~CAaP~~;QAEb,CAAC,CAAC,EAAA,CACE;AAEV;;;;"}
1	+ {"version":3,"file":"AxisLabels.js","sources":["../../../../PivotViewer/components/AxisLabels.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 type { PivotGroup } from '../types';\nimport { CANVAS_PADDING } from '../constants';\n\nexport interface AxisLabelsProps<TItem extends object> {\n groups: PivotGroup<TItem>[];\n bucketWidths: number[];\n dimensionFilter: string \| null;\n hoveredGroup: string \| null;\n zoomLevel: number;\n visible: boolean;\n onHover: (key: string \| null) => void;\n onClick: (key: string) => void;\n containerRef: React.RefObject<HTMLDivElement \| null>;\n}\n\nexport function AxisLabels<TItem extends object>({\n groups,\n bucketWidths,\n dimensionFilter,\n hoveredGroup,\n zoomLevel,\n visible,\n onHover,\n onClick,\n containerRef,\n}: AxisLabelsProps<TItem>) {\n return (\n <div\n className={`pv-axis-labels ${visible ? 'visible' : 'hidden'}`}\n ref={containerRef}\n style={{\n // Align labels start with grouped buckets using canvas padding scaled by zoom\n paddingLeft: `${(CANVAS_PADDING * zoomLevel)-(20zoomLevel)}px`,\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n }}\n >\n {groups.map((group, index) => {\n const isSelected = dimensionFilter === group.key;\n const baseBucketWidth = bucketWidths[index] \|\| 0;\n // Apply zoom to bucket width\n const bucketWidth = baseBucketWidth zoomLevel;\n // Width is just the bucket width - spacing is handled by CSS gap\n const width = bucketWidth;\n\n // When a dimension filter is active, mark non-selected groups as filtered-out\n const isFilteredOut = dimensionFilter !== null && !isSelected;\n\n return (\n <button\n key={group.key}\n type=\"button\"\n className={`pv-axis-label ${hoveredGroup === group.key ? 'highlighted' : ''} ${isSelected ? 'selected' : ''} ${isFilteredOut ? 'filtered-out' : ''}`}\n style={{\n width,\n }}\n onMouseEnter={() => onHover(group.key)}\n onMouseLeave={() => onHover(null)}\n onClick={() => onClick(group.key)}\n >\n <span className=\"pv-axis-label-text\">{group.label}</span>\n <span className=\"pv-axis-label-count\">{group.count ?? group.items.length}</span>\n </button>\n );\n })}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAkBM,SAAU,UAAU,CAAuB,EAC/C,MAAM,EACN,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,EACP,OAAO,EACP,YAAY,GACW,EAAA;IACvB,QACEA,aACE,SAAS,EAAE,kBAAkB,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAA,CAAE,EAC7D,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;AAEL,YAAA,WAAW,EAAE,CAAA,EAAG,CAAC,cAAc,GAAG,SAAS,KAAG,EAAE,GAAC,SAAS,CAAC,CAAA,EAAA,CAAI;AAC/D,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,UAAU,EAAE,QAAQ;SACrB,EAAA,QAAA,EAEA,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AAC3B,YAAA,MAAM,UAAU,GAAG,eAAe,KAAK,KAAK,CAAC,GAAG;YAChD,MAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAEhD,YAAA,MAAM,WAAW,GAAG,eAAe,GAAG,SAAS;YAE/C,MAAM,KAAK,GAAG,WAAW;YAGzB,MAAM,aAAa,GAAG,eAAe,KAAK,IAAI,IAAI,CAAC,UAAU;YAE7D,QACEC,iBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAA,cAAA,EAAiB,YAAY,KAAK,KAAK,CAAC,GAAG,GAAG,aAAa,GAAG,EAAE,IAAI,UAAU,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA,EAAI,aAAa,GAAG,cAAc,GAAG,EAAE,CAAA,CAAE,EACpJ,KAAK,EAAE;oBACL,KAAK;AACN,iBAAA,EACD,YAAY,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EACtC,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAEjCD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,EACzDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,EAAA,CAAQ,CAAA,EAAA,EAX3E,KAAK,CAAC,GAAG,CAYP;QAEb,CAAC,CAAC,EAAA,CACE;AAEV;;;;"}

package/dist/esm/PivotViewer/components/DetailPanel.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
+import type { ReactNode } from 'react';
 export interface DetailPanelProps<TItem extends object> {
     selectedItem: TItem | null;
     onClose: () => void;
+    contentRenderer?: (item: TItem, onClose: () => void) => ReactNode;
 }
-export declare function DetailPanel<TItem extends object>({ selectedItem, onClose, }: DetailPanelProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function DetailPanel<TItem extends object>({ selectedItem, onClose, contentRenderer, }: DetailPanelProps<TItem>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DetailPanel.d.ts.map

package/dist/esm/PivotViewer/components/DetailPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DetailPanel.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/components/DetailPanel.tsx"],"names":[],"mappings":"~~AAOA~~,MAAM,WAAW,gBAAgB,CAAC,KAAK,SAAS,MAAM;IACpD,YAAY,EAAE,KAAK,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;~~CACrB~~;AAED,wBAAgB,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,EAChD,YAAY,EACZ,OAAO,~~GACR~~,EAAE,gBAAgB,CAAC,KAAK,CAAC,~~2CA4FzB~~"}
1	+ {"version":3,"file":"DetailPanel.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/components/DetailPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,gBAAgB,CAAC,KAAK,SAAS,MAAM;IACpD,YAAY,EAAE,KAAK,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;CACnE;AAED,wBAAgB,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,EAChD,YAAY,EACZ,OAAO,EACP,eAAe,GAChB,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAyGzB"}

package/dist/esm/PivotViewer/components/DetailPanel.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
-function DetailPanel({ selectedItem, onClose, }) {
+function DetailPanel({ selectedItem, onClose, contentRenderer, }) {
     const selectedRecord = selectedItem;
     const selectedContent = selectedRecord
         ? (selectedRecord['content'] ?? {})
@@ -26,7 +26,14 @@ function DetailPanel({ selectedItem, onClose, }) {
     const causation = Array.isArray(selectedRecord?.['causation'])
         ? selectedRecord?.['causation']
         : [];
-    return (jsx(AnimatePresence, { children: selectedRecord && (jsxs(motion.aside, { className: "pv-detail-panel", initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' }, transition: { type: 'spring', stiffness: 400, damping: 35 }, children: [jsxs("header", { children: [jsxs("div", { children: [jsx("h2", { children: String(selectedRecord['name'] ?? selectedRecord['type'] ?? 'Event') }), selectedRecord['type'] ? jsx("p", { children: String(selectedRecord['type']) }) : null] }), jsx("button", { type: "button", onClick: onClose, title: "Close", children: "\u00D7" })] }), jsxs("div", { className: "pv-detail-panel-content", children: [metadataEntries.length > 0 && (jsxs("section", { className: "pv-detail-meta", children: [jsx("h3", { children: "Metadata" }), jsx("dl", { children: metadataEntries.map(([key, value]) => (jsxs("div", { children: [jsx("dt", { children: key }), jsx("dd", { children: String(value) })] }, key))) })] })), causation.length > 0 && (jsxs("section", { className: "pv-detail-causation", children: [jsx("h3", { children: "Causation" }), jsx("div", { className: "pv-pill-row", children: causation.map((value, index) => (jsx("span", { className: "pv-pill", children: String(value) }, `${value}-${index}`))) })] })), jsxs("section", { className: "pv-detail-content", children: [jsx("h3", { children: "Content" }), jsx("dl", { children: Object.entries(selectedContent).map(([key, value]) => (jsxs("div", { children: [jsx("dt", { children: key }), jsx("dd", { children: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value) })] }, key))) })] })] })] })) }));
+    const defaultContent = (jsxs(Fragment, { children: [metadataEntries.length > 0 && (jsxs("section", { className: "pv-detail-meta", children: [jsx("h3", { children: "Metadata" }), jsx("dl", { children: metadataEntries.map(([key, value]) => (jsxs("div", { children: [jsx("dt", { children: key }), jsx("dd", { children: String(value) })] }, key))) })] })), causation.length > 0 && (jsxs("section", { className: "pv-detail-causation", children: [jsx("h3", { children: "Causation" }), jsx("div", { className: "pv-pill-row", children: causation.map((value, index) => (jsx("span", { className: "pv-pill", children: String(value) }, `${value}-${index}`))) })] })), jsxs("section", { className: "pv-detail-content", children: [jsx("h3", { children: "Content" }), jsx("dl", { children: Object.entries(selectedContent).map(([key, value]) => (jsxs("div", { children: [jsx("dt", { children: key }), jsx("dd", { children: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value) })] }, key))) })] })] }));
+    const customContent = contentRenderer && selectedRecord ? contentRenderer(selectedRecord, onClose) : null;
+    return (jsx(AnimatePresence, { mode: "wait", children: selectedRecord && (jsxs(motion.aside, { className: "pv-detail-panel", initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' }, transition: {
+                type: 'spring',
+                stiffness: 120,
+                damping: 20,
+                mass: 1,
+            }, children: [jsxs("header", { children: [jsxs("div", { children: [jsx("h2", { children: String(selectedRecord['name'] ?? selectedRecord['type'] ?? 'Event') }), selectedRecord['type'] ? jsx("p", { children: String(selectedRecord['type']) }) : null] }), jsx("button", { type: "button", onClick: onClose, title: "Close", children: "\u00D7" })] }), jsx("div", { className: "pv-detail-panel-content", children: customContent ?? defaultContent })] })) }));
 }
 export { DetailPanel };

package/dist/esm/PivotViewer/components/DetailPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DetailPanel.js","sources":["../../../../PivotViewer/components/DetailPanel.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 { AnimatePresence, motion } from 'framer-motion';\n\ntype WithRecord<TItem> = TItem extends Record<string, unknown> ? TItem : never;\n\nexport interface DetailPanelProps<TItem extends object> {\n selectedItem: TItem \| null;\n onClose: () => void;\n}\n\nexport function DetailPanel<TItem extends object>({\n selectedItem,\n onClose,\n}: DetailPanelProps<TItem>) {\n const selectedRecord = selectedItem as WithRecord<TItem> \| null;\n\n const selectedContent = selectedRecord\n ? ((selectedRecord['content'] as Record<string, unknown> \| undefined) ?? {})\n : {};\n\n const metadataEntries = selectedRecord\n ? (\n [\n ['Type', selectedRecord['type']],\n [\n 'Occurred',\n selectedRecord['occurred'] instanceof Date\n ? (selectedRecord['occurred'] as Date).toLocaleString()\n : selectedRecord['occurred']\n ? new Date(String(selectedRecord['occurred'])).toLocaleString()\n : undefined,\n ],\n ['Service', selectedRecord['service']],\n ['Environment', selectedRecord['environment']],\n ['Tenant', selectedRecord['tenant']],\n ['Correlation Id', selectedRecord['correlationId']],\n ] as Array<[string, unknown]>\n ).filter(([, value]) => value !== undefined && value !== null)\n : [];\n\n const causation = Array.isArray(selectedRecord?.['causation'])\n ? (selectedRecord?.['causation'] as unknown[])\n : [];\n\n ~~return~~ ~~(\n <AnimatePresence>\n {selectedRecord~~ ~~&& (\n <motion.aside\n className=\"pv-detail-panel\"\n initial~~={{ x: '100%' }}\n animate={{ x: 0 }}\n exit={{ x: '100%' }}\n transition={{ type: 'spring', stiffness: 400, damping: 35 }}\n >\n <header>\n <div>\n <h2>{String(~~selectedRecord['name'] ?? selectedRecord['type'] ?? 'Event')}</h2>\n {selectedRecord['type'] ? <p>{String(selectedRecord['type'])}</p> : null}~~\n ~~</div>\~~n ~~<button type=\"button\" onClick=~~{~~onClose} title=\"Close\">\n ×\n </button>\n </header>\n <div className=\"pv-detail-panel-content\">\n {~~metadataEntries.length > 0 && (\n <section className=\"pv-detail-meta\">\n <h3>Metadata</h3>\n <dl>\n {metadataEntries.map(([key, value]) => (\n <div key={key}>\n <dt>{key}</dt>\n <dd>{String(value)}</dd>\n </div>\n ))}\n </dl>\n </section>\n )}\n {causation.length > 0 && (\n <section className=\"pv-detail-causation\">\n <h3>Causation</h3>\n <div className=\"pv-pill-row\">\n {causation.map((value, index) => (\n <span key={`${value}-${index}`} className=\"pv-pill\">\n {String(value)}\n </span>\n ))}\n </div>\n </section>\n )}\n <section className=\"pv-detail-content\">\n <h3>Content</h3>\n <dl>\n {Object.entries(selectedContent).map(([key, value]) => (\n <div key={key}>\n <dt>{key}</dt>\n <dd>{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}</dd>\n </div>\n ))}\n </dl>\n </section>\n </div>\n </motion.aside>\n )}\n </AnimatePresence>\n );\n}\n"],"names":["~~_jsx~~","~~_jsxs~~"],"mappings":";;;~~SAYgB~~,WAAW,CAAuB,EAChD,YAAY,EACZ,OAAO,~~GACiB~~,EAAA;IACxB,MAAM,cAAc,GAAG,YAAwC;IAE/D,MAAM,eAAe,GAAG;WAClB,cAAc,CAAC,SAAS,CAAyC,IAAI,EAAE;UACzE,EAAE;IAEN,MAAM,eAAe,GAAG;AACtB,UACI;AACE,YAAA,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;AAChC,YAAA;gBACE,UAAU;AACV,gBAAA,cAAc,CAAC,UAAU,CAAC,YAAY;AACpC,sBAAG,cAAc,CAAC,UAAU,CAAU,CAAC,cAAc;AACrD,sBAAE,cAAc,CAAC,UAAU;AAC3B,0BAAE,IAAI,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,cAAc;AAC7D,0BAAE,SAAS;AACd,aAAA;AACD,YAAA,CAAC,SAAS,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;AACtC,YAAA,CAAC,aAAa,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;AAC9C,YAAA,CAAC,QAAQ,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;AACpC,YAAA,CAAC,gBAAgB,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;AAEtD,SAAA,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;UAC7D,EAAE;IAEN,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,GAAG,WAAW,CAAC;AAC3D,UAAG,cAAc,GAAG,WAAW;UAC7B,EAAE;AAEN,IAAA,~~QACEA~~,~~GAAA~~,~~CAAC~~,eAAe,~~EAAA,EAAA,QAAA,EACb,cAAc,KACbC,IAAA,~~CAAC,MAAM,CAAC,~~KAAK~~,~~EAAA~~,~~EACX,~~SAAS,EAAC,~~iBAAiB~~,~~EAC3B~~,~~OAAO~~,~~EAAE~~,~~EAAE~~,~~CAAC~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~EACtB~~,~~OAAO~~,~~EAAE~~,~~EAAE~~,~~CAAC~~,~~EAAE~~,~~CAAC~~,~~EAAE~~,~~EACjB~~,~~IAAI~~,~~EAAE~~,~~EAAE~~,~~CAAC~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~EACnB~~,~~UAAU~~,~~EAAE~~,~~EAAE~~,~~IAAI~~,EAAE,~~QAAQ~~,~~EAAE~~,~~SAAS~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~EAAE,EAAE,~~EAAA,QAAA,~~EAAA~~,~~CAE3DA~~,~~IAAA~~,CAAA,~~QAAA~~,EAAA,EAAA,QAAA,~~EAAA~~,~~CACEA~~,~~IAAA~~,~~CAAA~~,~~KAAA~~,EAAA,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~CACED~~,~~sBAAK~~,~~MAAM,~~CAAC,~~cAAc~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~IAAI~~,~~cAAc~~,CAAC,MAAM,CAAC,~~IAAI~~,~~OAAO~~,~~CAAC~~,EAAA,~~CAAM~~,~~EAC7E~~,~~cAAc~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~GAAGA~~,GAAA,CAAA,~~GAAA~~,EAAA,EAAA,QAAA,~~EAAI~~,~~MAAM~~,~~CAAC~~,~~cAAc~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~CAAC~~,EAAA,~~CAAK~~,~~GAAG~~,~~IAAI~~,~~IACpE~~,~~EACNA~~,~~GAAA,CAAA,~~QAAA,~~EAAA~~,~~EAAQ~~,~~IAAI~~,~~EAAC~~,~~QAAQ~~,~~EAAC~~,~~OAAO~~,EAAE,~~OAAO~~,~~EAAE~~,~~KAAK~~,~~EAAC~~,~~OAAO~~,EAAA,~~QAAA~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~CAE5C~~,~~CAAA~~,EAAA,~~CACF~~,~~EACTC~~,~~IAAA~~,CAAA,~~KAAA~~,~~EAAA~~,~~EAAK~~,~~SAAS~~,~~EAAC~~,~~yBAAyB~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~CACrC~~,~~eAAe~~,~~CAAC~~,~~MAAM~~,~~GAAG~~,~~CAAC,KACzBA,~~IAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAC,~~gBAAgB~~,~~EAAA~~,~~QAAA,EAAA,CACjCD,~~GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,~~UAAA~~,EAAA,~~CAAiB~~,~~EACjBA~~,sBACG,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,~~MAChCC~~,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,~~CACED~~,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAK,GAAG,EAAA,CAAM,EACdA,~~GAAA~~,~~CAAA~~,~~IAAA~~,~~EAAA~~,~~EAAA~~,~~QAAA~~,~~EAAK~~,MAAM,CAAC,KAAK,CAAC,~~EAAA~~,~~CAAM,~~CAAA,EAAA,~~EAFhB~~,GAAG,CAGP,CACP,CAAC,~~EAAA~~,~~CACC,~~CAAA,EAAA,CACG,~~CACX~~,~~EACA~~,~~SAAS~~,~~CAAC~~,MAAM,GAAG,~~CAAC~~,~~KACnBC~~,~~IAAA~~,~~CAAA~~,~~SAAA~~,~~EAAA~~,~~EAAS~~,~~SAAS~~,~~EAAC~~,~~qBAAqB~~,~~aACtCD~~,~~GAAA~~,~~CAAA~~,~~IAAA~~,~~EAAA~~,EAAA,~~QAAA~~,~~EAAA~~,~~WAAA~~,~~EAAA~~,~~CAAkB~~,~~EAClBA~~,~~GAAA~~,~~CAAA~~,~~KAAA~~,EAAA,~~EAAK~~,SAAS,EAAC,~~aAAa~~,~~EAAA~~,~~QAAA~~,~~EACzB~~,~~SAAS~~,CAAC,~~GAAG~~,~~CAAC~~,~~CAAC~~,~~KAAK~~,EAAE,~~KAAK~~,~~MAC1BA~~,~~GAAA~~,~~CAAA~~,~~MAAA~~,~~EAAA~~,~~EAAgC~~,~~SAAS~~,~~EAAC~~,~~SAAS~~,~~EAAA~~,~~QAAA~~,~~EAChD~~,~~MAAM~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~EAAA~~,~~EADL~~,~~CAAA~~,~~EAAG~~,~~KAAK~~,~~IAAI~~,~~KAAK~~,~~CAAA~~,~~CAAE~~,~~CAEvB~~,~~CACR~~,~~CAAC~~,~~EAAA~~,~~CACE~~,~~CAAA~~,EAAA,~~CACE~~,~~CACX~~,~~EACDC~~,IAAA,CAAA,~~SAAA~~,EAAA,~~EAAS~~,~~SAAS~~,~~EAAC~~,~~mBAAmB~~,~~aACpCD~~,~~GAAA,~~CAAA,~~IAAA~~,EAAA,EAAA,QAAA,EAAA,~~SAAA~~,~~EAAA,CAAgB,EAChBA,~~GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,~~EACG~~,MAAM,CAAC,~~OAAO~~,CAAC,~~eAAe~~,CAAC,~~CAAC~~,~~GAAG~~,CAAC,CAAC,CAAC,~~GAAG~~,~~EAAE~~,~~KAAK~~,CAAC,~~MAChDC~~,~~yBACED~~,GAAA,CAAA,~~IAAA~~,EAAA,EAAA,QAAA,~~EAAK~~,~~GAAG~~,~~EAAA~~,~~CAAM~~,~~EACdA~~,~~sBAAK~~,~~OAAO~~,~~KAAK~~,~~KAAK~~,~~QAAQ~~,GAAG,IAAI,~~CAAC~~,~~SAAS~~,~~CAAC~~,~~KAAK~~,~~EAAE~~,IAAI,~~EAAE~~,~~CAAC~~,~~CAAC~~,~~GAAG~~,~~MAAM~~,~~CAAC~~,KAAK,~~CAAC~~,EAAA,~~CAAM~~,CAAA,EAAA,~~EAF7E~~,~~GAAG~~,~~CAGP~~,~~CACP~~,~~CAAC~~,EAAA,~~CACC~~,~~IACG~~,~~CAAA~~,EAAA,~~CACN~~,CAAA,EAAA,CACO,CAChB,EAAA,CACe;AAEtB;;;;"}
1	+ {"version":3,"file":"DetailPanel.js","sources":["../../../../PivotViewer/components/DetailPanel.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 { AnimatePresence, motion } from 'framer-motion';\nimport type { ReactNode } from 'react';\n\ntype WithRecord<TItem> = TItem extends Record<string, unknown> ? TItem : never;\n\nexport interface DetailPanelProps<TItem extends object> {\n selectedItem: TItem \| null;\n onClose: () => void;\n /** Custom renderer for the detail content area. The drawer shell (header, close button, layout) remains owned by the component. */\n contentRenderer?: (item: TItem, onClose: () => void) => ReactNode;\n}\n\nexport function DetailPanel<TItem extends object>({\n selectedItem,\n onClose,\n contentRenderer,\n}: DetailPanelProps<TItem>) {\n const selectedRecord = selectedItem as WithRecord<TItem> \| null;\n\n const selectedContent = selectedRecord\n ? ((selectedRecord['content'] as Record<string, unknown> \| undefined) ?? {})\n : {};\n\n const metadataEntries = selectedRecord\n ? (\n [\n ['Type', selectedRecord['type']],\n [\n 'Occurred',\n selectedRecord['occurred'] instanceof Date\n ? (selectedRecord['occurred'] as Date).toLocaleString()\n : selectedRecord['occurred']\n ? new Date(String(selectedRecord['occurred'])).toLocaleString()\n : undefined,\n ],\n ['Service', selectedRecord['service']],\n ['Environment', selectedRecord['environment']],\n ['Tenant', selectedRecord['tenant']],\n ['Correlation Id', selectedRecord['correlationId']],\n ] as Array<[string, unknown]>\n ).filter(([, value]) => value !== undefined && value !== null)\n : [];\n\n const causation = Array.isArray(selectedRecord?.['causation'])\n ? (selectedRecord?.['causation'] as unknown[])\n : [];\n\n const defaultContent = (\n <>\n {metadataEntries.length > 0 && (\n <section className=\"pv-detail-meta\">\n <h3>Metadata</h3>\n <dl>\n {metadataEntries.map(([key, value]) => (\n <div key={key}>\n <dt>{key}</dt>\n <dd>{String(value)}</dd>\n </div>\n ))}\n </dl>\n </section>\n )}\n {causation.length > 0 && (\n <section className=\"pv-detail-causation\">\n <h3>Causation</h3>\n <div className=\"pv-pill-row\">\n {causation.map((value, index) => (\n <span key={`${value}-${index}`} className=\"pv-pill\">\n {String(value)}\n </span>\n ))}\n </div>\n </section>\n )}\n <section className=\"pv-detail-content\">\n <h3>Content</h3>\n <dl>\n {Object.entries(selectedContent).map(([key, value]) => (\n <div key={key}>\n <dt>{key}</dt>\n <dd>{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}</dd>\n </div>\n ))}\n </dl>\n </section>\n </>\n );\n\n const customContent = contentRenderer && selectedRecord ? contentRenderer(selectedRecord, onClose) : null;\n\n return (\n <AnimatePresence mode=\"wait\">\n {selectedRecord && (\n <motion.aside\n className=\"pv-detail-panel\"\n initial={{ x: '100%' }}\n animate={{ x: 0 }}\n exit={{ x: '100%' }}\n transition={{\n type: 'spring',\n stiffness: 120,\n damping: 20,\n mass: 1,\n }}\n >\n <header>\n <div>\n <h2>{String(selectedRecord['name'] ?? selectedRecord['type'] ?? 'Event')}</h2>\n {selectedRecord['type'] ? <p>{String(selectedRecord['type'])}</p> : null}\n </div>\n <button type=\"button\" onClick={onClose} title=\"Close\">\n ×\n </button>\n </header>\n <div className=\"pv-detail-panel-content\">\n {customContent ?? defaultContent}\n </div>\n </motion.aside>\n )}\n </AnimatePresence>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}