@cratis/components 0.1.16 → 0.1.18

package/dist/esm/PivotViewer/components/Toolbar.d.ts

@@ -14,8 +14,10 @@ export interface ToolbarProps<TItem extends object> {
     onZoomIn: () => void;
     onZoomOut: () => void;
     onZoomSlider: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onZoomReset: () => void;
+    onZoomChange: (zoom: number) => void;
     onDimensionChange: (key: string) => void;
     filterButtonRef: React.RefObject<HTMLButtonElement | null>;
 }
-export declare function Toolbar<TItem extends object>({ hasFilters, filtersOpen, filteredCount, viewMode, zoomLevel, activeDimensionKey, dimensions, activeFilterCount, onFiltersToggle, onViewModeChange, onZoomIn, onZoomOut, onZoomSlider, onDimensionChange, filterButtonRef, }: ToolbarProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar<TItem extends object>({ hasFilters, filtersOpen, filteredCount, viewMode, zoomLevel, activeDimensionKey, dimensions, activeFilterCount, onFiltersToggle, onViewModeChange, onZoomIn, onZoomOut, onZoomSlider, onZoomReset, onZoomChange, onDimensionChange, filterButtonRef, }: ToolbarProps<TItem>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map

package/dist/esm/PivotViewer/components/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/components/Toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,YAAY,CAAC,KAAK,SAAS,MAAM;IAChD,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAC5D;AAED,wBAAgB,OAAO,CAAC,KAAK,SAAS,MAAM,EAAE,EAC5C,UAAU,EACV,WAAW,EACX,aAAa,EACb,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,eAAe,GAChB,EAAE,YAAY,CAAC,KAAK,CAAC,2CAuFrB"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/components/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,YAAY,CAAC,KAAK,SAAS,MAAM;IAChD,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAC5D;AAED,wBAAgB,OAAO,CAAC,KAAK,SAAS,MAAM,EAAE,EAC5C,UAAU,EACV,WAAW,EACX,aAAa,EACb,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,eAAe,GAChB,EAAE,YAAY,CAAC,KAAK,CAAC,2CAqJrB"}

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

@@ -1,9 +1,41 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { ZOOM_MIN, ZOOM_STEP, ZOOM_MAX } from '../utils/utils.js';
 
-function Toolbar({ hasFilters, filtersOpen, filteredCount, viewMode, zoomLevel, activeDimensionKey, dimensions, activeFilterCount, onFiltersToggle, onViewModeChange, onZoomIn, onZoomOut, onZoomSlider, onDimensionChange, filterButtonRef, }) {
+function Toolbar({ hasFilters, filtersOpen, filteredCount, viewMode, zoomLevel, activeDimensionKey, dimensions, activeFilterCount, onFiltersToggle, onViewModeChange, onZoomIn, onZoomOut, onZoomSlider, onZoomReset, onZoomChange, onDimensionChange, filterButtonRef, }) {
     const labelText = 'Sort by';
-    return (jsxs("header", { className: "pv-toolbar", children: [jsxs("div", { className: "pv-toolbar-left", children: [hasFilters && (jsxs("button", { ref: filterButtonRef, type: "button", className: `pv-filter-icon-button ${filtersOpen ? 'active' : ''}`, onClick: onFiltersToggle, title: "Filters", children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) }), activeFilterCount > 0 && (jsx("span", { className: "pv-filter-badge", children: activeFilterCount }))] })), jsx("h1", { children: "Pivot Viewer" }), jsxs("span", { className: "pv-count", children: [filteredCount, " events"] })] }), jsxs("div", { className: "pv-toolbar-right", children: [jsxs("div", { className: "pv-zoom-controls", children: [jsx("button", { type: "button", onClick: onZoomOut, disabled: zoomLevel <= ZOOM_MIN, title: "Zoom out", children: "\u2212" }), jsx("input", { type: "range", className: "pv-zoom-slider", min: ZOOM_MIN, max: ZOOM_MAX, step: ZOOM_STEP, value: zoomLevel, onChange: onZoomSlider, title: `Zoom: ${Math.round(zoomLevel * 100)}%` }), jsxs("span", { className: "pv-zoom-level", children: [Math.round(zoomLevel * 100), "%"] }), jsx("button", { type: "button", onClick: onZoomIn, disabled: zoomLevel >= ZOOM_MAX, title: "Zoom in", children: "+" })] }), jsxs("div", { className: "pv-view-toggle", children: [jsx("button", { type: "button", className: viewMode === 'collection' ? 'active' : '', onClick: () => onViewModeChange('collection'), children: "Collection" }), jsx("button", { type: "button", className: viewMode === 'grouped' ? 'active' : '', onClick: () => onViewModeChange('grouped'), children: "Buckets" })] }), jsxs("label", { className: "pv-dimension-select", children: [jsx("span", { children: labelText }), jsx("select", { value: activeDimensionKey, onChange: (event) => onDimensionChange(event.target.value), children: dimensions.map((dimension) => (jsx("option", { value: dimension.key, children: dimension.label }, dimension.key))) })] })] })] }));
+    const [isEditingZoom, setIsEditingZoom] = useState(false);
+    const [zoomInputValue, setZoomInputValue] = useState('');
+    const handleZoomClick = () => {
+        setIsEditingZoom(true);
+        setZoomInputValue(String(Math.round(zoomLevel * 100)));
+    };
+    const handleZoomInputChange = (e) => {
+        const value = e.target.value;
+        if (value === '' || /^\d+$/.test(value)) {
+            setZoomInputValue(value);
+        }
+    };
+    const handleZoomInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            applyZoomInput();
+        }
+        else if (e.key === 'Escape') {
+            setIsEditingZoom(false);
+        }
+    };
+    const handleZoomInputBlur = () => {
+        applyZoomInput();
+    };
+    const applyZoomInput = () => {
+        const numValue = parseInt(zoomInputValue, 10);
+        if (!isNaN(numValue)) {
+            const clampedValue = Math.max(10, Math.min(300, numValue));
+            onZoomChange(clampedValue / 100);
+        }
+        setIsEditingZoom(false);
+    };
+    return (jsxs("header", { className: "pv-toolbar", children: [jsxs("div", { className: "pv-toolbar-left", children: [hasFilters && (jsxs("button", { ref: filterButtonRef, type: "button", className: `pv-filter-icon-button ${filtersOpen ? 'active' : ''}`, onClick: onFiltersToggle, title: "Filters", children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) }), activeFilterCount > 0 && (jsx("span", { className: "pv-filter-badge", children: activeFilterCount }))] })), jsx("h1", { children: "Pivot Viewer" }), jsxs("span", { className: "pv-count", children: [filteredCount, " events"] })] }), jsxs("div", { className: "pv-toolbar-right", children: [jsxs("div", { className: "pv-zoom-controls", children: [jsx("button", { type: "button", onClick: onZoomOut, disabled: zoomLevel <= ZOOM_MIN, title: "Zoom out", children: "\u2212" }), jsx("input", { type: "range", className: "pv-zoom-slider", min: ZOOM_MIN, max: ZOOM_MAX, step: ZOOM_STEP, value: zoomLevel, onChange: onZoomSlider, title: `Zoom: ${Math.round(zoomLevel * 100)}%` }), isEditingZoom ? (jsx("input", { type: "text", className: "pv-zoom-level-input", value: zoomInputValue, onChange: handleZoomInputChange, onKeyDown: handleZoomInputKeyDown, onBlur: handleZoomInputBlur, autoFocus: true })) : (jsxs("span", { className: "pv-zoom-level", onClick: handleZoomClick, title: "Click to edit zoom level", children: [Math.round(zoomLevel * 100), "%"] })), jsx("button", { type: "button", onClick: onZoomReset, title: "Reset zoom", className: "pv-zoom-reset", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }), jsx("path", { d: "M21 3v5h-5" }), jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }), jsx("path", { d: "M3 21v-5h5" })] }) }), jsx("button", { type: "button", onClick: onZoomIn, disabled: zoomLevel >= ZOOM_MAX, title: "Zoom in", children: "+" })] }), jsxs("div", { className: "pv-view-toggle", children: [jsx("button", { type: "button", className: viewMode === 'collection' ? 'active' : '', onClick: () => onViewModeChange('collection'), children: "Collection" }), jsx("button", { type: "button", className: viewMode === 'grouped' ? 'active' : '', onClick: () => onViewModeChange('grouped'), children: "Grouped" })] }), jsxs("label", { className: "pv-dimension-select", children: [jsx("span", { children: labelText }), jsx("select", { value: activeDimensionKey, onChange: (event) => onDimensionChange(event.target.value), children: dimensions.map((dimension) => (jsx("option", { value: dimension.key, children: dimension.label }, dimension.key))) })] })] })] }));
 }
 
 export { Toolbar };

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../PivotViewer/components/Toolbar.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 { PivotDimension } from '../types';\nimport { ZOOM_MIN, ZOOM_MAX, ZOOM_STEP } from '../utils/utils';\n\nexport type ViewMode = 'collection' | 'grouped';\n\nexport interface ToolbarProps<TItem extends object> {\n  hasFilters: boolean;\n  filtersOpen: boolean;\n  filteredCount: number;\n  viewMode: ViewMode;\n  zoomLevel: number;\n  activeDimensionKey: string;\n  dimensions: PivotDimension<TItem>[];\n  activeFilterCount: number;\n  onFiltersToggle: () => void;\n  onViewModeChange: (mode: ViewMode) => void;\n  onZoomIn: () => void;\n  onZoomOut: () => void;\n  onZoomSlider: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onDimensionChange: (key: string) => void;\n  filterButtonRef: React.RefObject<HTMLButtonElement | null>;\n}\n\nexport function Toolbar<TItem extends object>({\n  hasFilters,\n  filtersOpen,\n  filteredCount,\n  viewMode,\n  zoomLevel,\n  activeDimensionKey,\n  dimensions,\n  activeFilterCount,\n  onFiltersToggle,\n  onViewModeChange,\n  onZoomIn,\n  onZoomOut,\n  onZoomSlider,\n  onDimensionChange,\n  filterButtonRef,\n}: ToolbarProps<TItem>) {\n  const labelText = 'Sort by';\n\n  return (\n    <header className=\"pv-toolbar\">\n      <div className=\"pv-toolbar-left\">\n        {hasFilters && (\n          <button\n            ref={filterButtonRef}\n            type=\"button\"\n            className={`pv-filter-icon-button ${filtersOpen ? 'active' : ''}`}\n            onClick={onFiltersToggle}\n            title=\"Filters\"\n          >\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\" />\n            </svg>\n            {activeFilterCount > 0 && (\n              <span className=\"pv-filter-badge\">{activeFilterCount}</span>\n            )}\n          </button>\n        )}\n        <h1>Pivot Viewer</h1>\n        <span className=\"pv-count\">{filteredCount} events</span>\n      </div>\n      <div className=\"pv-toolbar-right\">\n        <div className=\"pv-zoom-controls\">\n          <button\n            type=\"button\"\n            onClick={onZoomOut}\n            disabled={zoomLevel <= ZOOM_MIN}\n            title=\"Zoom out\"\n          >\n            −\n          </button>\n          <input\n            type=\"range\"\n            className=\"pv-zoom-slider\"\n            min={ZOOM_MIN}\n            max={ZOOM_MAX}\n            step={ZOOM_STEP}\n            value={zoomLevel}\n            onChange={onZoomSlider}\n            title={`Zoom: ${Math.round(zoomLevel * 100)}%`}\n          />\n          <span className=\"pv-zoom-level\">{Math.round(zoomLevel * 100)}%</span>\n          <button\n            type=\"button\"\n            onClick={onZoomIn}\n            disabled={zoomLevel >= ZOOM_MAX}\n            title=\"Zoom in\"\n          >\n            +\n          </button>\n        </div>\n        <div className=\"pv-view-toggle\">\n          <button\n            type=\"button\"\n            className={viewMode === 'collection' ? 'active' : ''}\n            onClick={() => onViewModeChange('collection')}\n          >\n            Collection\n          </button>\n          <button\n            type=\"button\"\n            className={viewMode === 'grouped' ? 'active' : ''}\n            onClick={() => onViewModeChange('grouped')}\n          >\n            Buckets\n          </button>\n        </div>\n        <label className=\"pv-dimension-select\">\n          <span>{labelText}</span>\n          <select\n            value={activeDimensionKey}\n            onChange={(event) => onDimensionChange(event.target.value)}\n          >\n            {dimensions.map((dimension) => (\n              <option key={dimension.key} value={dimension.key}>\n                {dimension.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </div>\n    </header>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Toolbar.js","sources":["../../../../PivotViewer/components/Toolbar.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 { useState } from 'react';\nimport type { PivotDimension } from '../types';\nimport { ZOOM_MIN, ZOOM_MAX, ZOOM_STEP } from '../utils/utils';\n\nexport type ViewMode = 'collection' | 'grouped';\n\nexport interface ToolbarProps<TItem extends object> {\n  hasFilters: boolean;\n  filtersOpen: boolean;\n  filteredCount: number;\n  viewMode: ViewMode;\n  zoomLevel: number;\n  activeDimensionKey: string;\n  dimensions: PivotDimension<TItem>[];\n  activeFilterCount: number;\n  onFiltersToggle: () => void;\n  onViewModeChange: (mode: ViewMode) => void;\n  onZoomIn: () => void;\n  onZoomOut: () => void;\n  onZoomSlider: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onZoomReset: () => void;\n  onZoomChange: (zoom: number) => void;\n  onDimensionChange: (key: string) => void;\n  filterButtonRef: React.RefObject<HTMLButtonElement | null>;\n}\n\nexport function Toolbar<TItem extends object>({\n  hasFilters,\n  filtersOpen,\n  filteredCount,\n  viewMode,\n  zoomLevel,\n  activeDimensionKey,\n  dimensions,\n  activeFilterCount,\n  onFiltersToggle,\n  onViewModeChange,\n  onZoomIn,\n  onZoomOut,\n  onZoomSlider,\n  onZoomReset,\n  onZoomChange,\n  onDimensionChange,\n  filterButtonRef,\n}: ToolbarProps<TItem>) {\n  const labelText = 'Sort by';\n  const [isEditingZoom, setIsEditingZoom] = useState(false);\n  const [zoomInputValue, setZoomInputValue] = useState('');\n\n  const handleZoomClick = () => {\n    setIsEditingZoom(true);\n    setZoomInputValue(String(Math.round(zoomLevel * 100)));\n  };\n\n  const handleZoomInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    if (value === '' || /^\\d+$/.test(value)) {\n      setZoomInputValue(value);\n    }\n  };\n\n  const handleZoomInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      applyZoomInput();\n    } else if (e.key === 'Escape') {\n      setIsEditingZoom(false);\n    }\n  };\n\n  const handleZoomInputBlur = () => {\n    applyZoomInput();\n  };\n\n  const applyZoomInput = () => {\n    const numValue = parseInt(zoomInputValue, 10);\n    if (!isNaN(numValue)) {\n      const clampedValue = Math.max(10, Math.min(300, numValue));\n      onZoomChange(clampedValue / 100);\n    }\n    setIsEditingZoom(false);\n  };\n\n  return (\n    <header className=\"pv-toolbar\">\n      <div className=\"pv-toolbar-left\">\n        {hasFilters && (\n          <button\n            ref={filterButtonRef}\n            type=\"button\"\n            className={`pv-filter-icon-button ${filtersOpen ? 'active' : ''}`}\n            onClick={onFiltersToggle}\n            title=\"Filters\"\n          >\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\" />\n            </svg>\n            {activeFilterCount > 0 && (\n              <span className=\"pv-filter-badge\">{activeFilterCount}</span>\n            )}\n          </button>\n        )}\n        <h1>Pivot Viewer</h1>\n        <span className=\"pv-count\">{filteredCount} events</span>\n      </div>\n      <div className=\"pv-toolbar-right\">\n        <div className=\"pv-zoom-controls\">\n          <button\n            type=\"button\"\n            onClick={onZoomOut}\n            disabled={zoomLevel <= ZOOM_MIN}\n            title=\"Zoom out\"\n          >\n            −\n          </button>\n          <input\n            type=\"range\"\n            className=\"pv-zoom-slider\"\n            min={ZOOM_MIN}\n            max={ZOOM_MAX}\n            step={ZOOM_STEP}\n            value={zoomLevel}\n            onChange={onZoomSlider}\n            title={`Zoom: ${Math.round(zoomLevel * 100)}%`}\n          />\n          {isEditingZoom ? (\n            <input\n              type=\"text\"\n              className=\"pv-zoom-level-input\"\n              value={zoomInputValue}\n              onChange={handleZoomInputChange}\n              onKeyDown={handleZoomInputKeyDown}\n              onBlur={handleZoomInputBlur}\n              autoFocus\n            />\n          ) : (\n            <span className=\"pv-zoom-level\" onClick={handleZoomClick} title=\"Click to edit zoom level\">\n              {Math.round(zoomLevel * 100)}%\n            </span>\n          )}\n          <button\n            type=\"button\"\n            onClick={onZoomReset}\n            title=\"Reset zoom\"\n            className=\"pv-zoom-reset\"\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" />\n              <path d=\"M21 3v5h-5\" />\n              <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" />\n              <path d=\"M3 21v-5h5\" />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            onClick={onZoomIn}\n            disabled={zoomLevel >= ZOOM_MAX}\n            title=\"Zoom in\"\n          >\n            +\n          </button>\n        </div>\n        <div className=\"pv-view-toggle\">\n          <button\n            type=\"button\"\n            className={viewMode === 'collection' ? 'active' : ''}\n            onClick={() => onViewModeChange('collection')}\n          >\n            Collection\n          </button>\n          <button\n            type=\"button\"\n            className={viewMode === 'grouped' ? 'active' : ''}\n            onClick={() => onViewModeChange('grouped')}\n          >\n            Grouped\n          </button>\n        </div>\n        <label className=\"pv-dimension-select\">\n          <span>{labelText}</span>\n          <select\n            value={activeDimensionKey}\n            onChange={(event) => onDimensionChange(event.target.value)}\n          >\n            {dimensions.map((dimension) => (\n              <option key={dimension.key} value={dimension.key}>\n                {dimension.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </div>\n    </header>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/animation.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,KAAK,IAAI,MAAM,SAAS,CAAC;AAErC,wBAAgB,eAAe,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,mBAAmB,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,EAAE,cAAc,SAAO,WAgElI;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE;IACJ,UAAU,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACjC,MAAM,EAAE;QAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;IAC7C,iBAAiB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,cAAc,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACrC,cAAc,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACrC,UAAU,EAAE;QAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;KAAE,CAAC;IAClD,mBAAmB,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAC3C,EACD,cAAc,SAAO,QAyBtB"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/animation.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,KAAK,IAAI,MAAM,SAAS,CAAC;AAErC,wBAAgB,eAAe,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,mBAAmB,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,EAAE,cAAc,SAAO,WAgElI;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE;IACJ,UAAU,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACjC,MAAM,EAAE;QAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;IAC7C,iBAAiB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,cAAc,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACrC,cAAc,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACrC,UAAU,EAAE;QAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;KAAE,CAAC;IAClD,mBAAmB,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAC3C,EACD,cAAc,SAAO,QA4BtB"}

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

@@ -69,10 +69,11 @@ function startAnimationLoop(refs, animationSpeed = 0.15) {
             isAnimatingRef.current = false;
         }
     };
-    if (!isAnimatingRef.current) {
-        isAnimatingRef.current = true;
-        animate();
+    if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
     }
+    isAnimatingRef.current = true;
+    animate();
 }
 
 export { startAnimationLoop, updatePositions };

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

@@ -1 +1 @@
-{"version":3,"file":"animation.js","sources":["../../../../../PivotViewer/components/pivot/animation.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CardSprite } from './constants';\nimport type * as PIXI from 'pixi.js';\n\nexport function updatePositions(sprites: Map<unknown, CardSprite>, isViewTransitionRef: { current: boolean }, animationSpeed = 0.15) {\n  let isAnimating = false;\n  const threshold = 0.5;\n  const shouldAnimate = isViewTransitionRef.current;\n  const now = Date.now();\n  const DURATION = 600; // ms\n\n  for (const sprite of sprites.values()) {\n    // Handle explicit time-based animation (view transitions)\n    if (sprite.animationStartTime !== undefined) {\n      const elapsed = now - sprite.animationStartTime;\n      const delay = sprite.animationDelay || 0;\n\n      if (elapsed < delay) {\n        isAnimating = true;\n        continue;\n      }\n\n      const progress = Math.min(1, (elapsed - delay) / DURATION);\n      // Ease out cubic: 1 - (1-t)^3\n      const t = 1 - Math.pow(1 - progress, 3);\n\n      if (sprite.startX !== undefined && sprite.startY !== undefined) {\n        sprite.currentX = sprite.startX + (sprite.targetX - sprite.startX) * t;\n        sprite.currentY = sprite.startY + (sprite.targetY - sprite.startY) * t;\n      }\n\n      sprite.container.position.set(sprite.currentX, sprite.currentY);\n\n      if (progress < 1) {\n        isAnimating = true;\n      } else {\n        // Animation finished, clean up\n        sprite.currentX = sprite.targetX;\n        sprite.currentY = sprite.targetY;\n        delete sprite.animationStartTime;\n        delete sprite.animationDelay;\n        delete sprite.startX;\n        delete sprite.startY;\n      }\n      continue;\n    }\n\n    const dx = sprite.targetX - sprite.currentX;\n    const dy = sprite.targetY - sprite.currentY;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n\n    if (shouldAnimate && distance > threshold) {\n      sprite.currentX += dx * animationSpeed;\n      sprite.currentY += dy * animationSpeed;\n      sprite.container.position.set(sprite.currentX, sprite.currentY);\n      isAnimating = true;\n    } else if (distance > 0) {\n      sprite.currentX = sprite.targetX;\n      sprite.currentY = sprite.targetY;\n      sprite.container.position.set(sprite.currentX, sprite.currentY);\n    }\n  }\n\n  if (!isAnimating && isViewTransitionRef.current) {\n    isViewTransitionRef.current = false;\n  }\n\n  return isAnimating;\n}\n\nexport function startAnimationLoop(\n  refs: {\n    mountedRef: { current: boolean };\n    appRef: { current: PIXI.Application | null };\n    animationFrameRef: { current: number };\n    isAnimatingRef: { current: boolean };\n    needsRenderRef: { current: boolean };\n    spritesRef: { current: Map<unknown, CardSprite> };\n    isViewTransitionRef: { current: boolean };\n  },\n  animationSpeed = 0.15,\n) {\n  const { mountedRef, appRef, animationFrameRef, isAnimatingRef, needsRenderRef, spritesRef, isViewTransitionRef } = refs;\n\n  const animate = () => {\n    if (!mountedRef.current) return;\n\n    const stillAnimating = updatePositions(spritesRef.current, isViewTransitionRef, animationSpeed);\n\n    if (stillAnimating || needsRenderRef.current) {\n      appRef.current?.renderer.render(appRef.current.stage);\n      needsRenderRef.current = false;\n    }\n\n    if (stillAnimating) {\n      animationFrameRef.current = requestAnimationFrame(animate);\n    } else {\n      isAnimatingRef.current = false;\n    }\n  };\n\n  if (!isAnimatingRef.current) {\n    isAnimatingRef.current = true;\n    animate();\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"animation.js","sources":["../../../../../PivotViewer/components/pivot/animation.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CardSprite } from './constants';\nimport type * as PIXI from 'pixi.js';\n\nexport function updatePositions(sprites: Map<unknown, CardSprite>, isViewTransitionRef: { current: boolean }, animationSpeed = 0.15) {\n  let isAnimating = false;\n  const threshold = 0.5;\n  const shouldAnimate = isViewTransitionRef.current;\n  const now = Date.now();\n  const DURATION = 600; // ms\n\n  for (const sprite of sprites.values()) {\n    // Handle explicit time-based animation (view transitions)\n    if (sprite.animationStartTime !== undefined) {\n      const elapsed = now - sprite.animationStartTime;\n      const delay = sprite.animationDelay || 0;\n\n      if (elapsed < delay) {\n        isAnimating = true;\n        continue;\n      }\n\n      const progress = Math.min(1, (elapsed - delay) / DURATION);\n      // Ease out cubic: 1 - (1-t)^3\n      const t = 1 - Math.pow(1 - progress, 3);\n\n      if (sprite.startX !== undefined && sprite.startY !== undefined) {\n        sprite.currentX = sprite.startX + (sprite.targetX - sprite.startX) * t;\n        sprite.currentY = sprite.startY + (sprite.targetY - sprite.startY) * t;\n      }\n\n      sprite.container.position.set(sprite.currentX, sprite.currentY);\n\n      if (progress < 1) {\n        isAnimating = true;\n      } else {\n        // Animation finished, clean up\n        sprite.currentX = sprite.targetX;\n        sprite.currentY = sprite.targetY;\n        delete sprite.animationStartTime;\n        delete sprite.animationDelay;\n        delete sprite.startX;\n        delete sprite.startY;\n      }\n      continue;\n    }\n\n    const dx = sprite.targetX - sprite.currentX;\n    const dy = sprite.targetY - sprite.currentY;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n\n    if (shouldAnimate && distance > threshold) {\n      sprite.currentX += dx * animationSpeed;\n      sprite.currentY += dy * animationSpeed;\n      sprite.container.position.set(sprite.currentX, sprite.currentY);\n      isAnimating = true;\n    } else if (distance > 0) {\n      sprite.currentX = sprite.targetX;\n      sprite.currentY = sprite.targetY;\n      sprite.container.position.set(sprite.currentX, sprite.currentY);\n    }\n  }\n\n  if (!isAnimating && isViewTransitionRef.current) {\n    isViewTransitionRef.current = false;\n  }\n\n  return isAnimating;\n}\n\nexport function startAnimationLoop(\n  refs: {\n    mountedRef: { current: boolean };\n    appRef: { current: PIXI.Application | null };\n    animationFrameRef: { current: number };\n    isAnimatingRef: { current: boolean };\n    needsRenderRef: { current: boolean };\n    spritesRef: { current: Map<unknown, CardSprite> };\n    isViewTransitionRef: { current: boolean };\n  },\n  animationSpeed = 0.15,\n) {\n  const { mountedRef, appRef, animationFrameRef, isAnimatingRef, needsRenderRef, spritesRef, isViewTransitionRef } = refs;\n\n  const animate = () => {\n    if (!mountedRef.current) return;\n\n    const stillAnimating = updatePositions(spritesRef.current, isViewTransitionRef, animationSpeed);\n\n    if (stillAnimating || needsRenderRef.current) {\n      appRef.current?.renderer.render(appRef.current.stage);\n      needsRenderRef.current = false;\n    }\n\n    if (stillAnimating) {\n      animationFrameRef.current = requestAnimationFrame(animate);\n    } else {\n      isAnimatingRef.current = false;\n    }\n  };\n\n  // Always restart animation when called to ensure animations continue\n  // Cancel any existing animation frame and start fresh\n  if (animationFrameRef.current) {\n    cancelAnimationFrame(animationFrameRef.current);\n  }\n  isAnimatingRef.current = true;\n  animate();\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/constants.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,IAAI,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,eAAe,OAAO,CAAC;AACpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC;IACrB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACtB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;AAED,wBAAkB"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/constants.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,IAAI,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,eAAe,OAAO,CAAC;AACpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAG1B,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC;IACrB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACtB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;AAED,wBAAkB"}

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

@@ -2,12 +2,12 @@ const CARD_PADDING = 10;
 const CARD_RADIUS = 12;
 const CARD_GAP = 8;
 const DEFAULT_COLORS = {
-    base: 0x1b2b2f,
-    mid: 0x234445,
-    gradient: 0x2f5b56,
-    border: 0x5ad1a0,
+    base: 0x0f2745,
+    mid: 0x163359,
+    gradient: 0x0b1e36,
+    border: 0x2e66ba,
     text: 0xffffff,
-    textSecondary: 0x8899aa,
+    textSecondary: 0xa8b2c2,
 };
 
 export { CARD_GAP, CARD_PADDING, CARD_RADIUS, DEFAULT_COLORS };

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../PivotViewer/components/pivot/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\nimport type * as PIXI from 'pixi.js';\n\nexport const ANIMATION_SPEED = 0.15;\nexport const CARD_PADDING = 10;\nexport const CARD_RADIUS = 12;\nexport const CARD_GAP = 8; // Gap between cards (must match layout gap)\n\nexport const DEFAULT_COLORS = {\n  base: 0x1b2b2f,\n  mid: 0x234445,\n  gradient: 0x2f5b56,\n  border: 0x5ad1a0,\n  text: 0xffffff,\n  textSecondary: 0x8899aa,\n};\n\nexport type CardColors = typeof DEFAULT_COLORS;\n\nexport interface CardSprite {\n  container: PIXI.Container;\n  graphics: PIXI.Graphics;\n  titleText: PIXI.Text;\n  labelsText: PIXI.Text;\n  valuesText: PIXI.Text;\n  itemId: number | string;\n  targetX: number;\n  targetY: number;\n  currentX: number;\n  currentY: number;\n  // Animation state\n  animationStartTime?: number;\n  animationDelay?: number;\n  startX?: number;\n  startY?: number;\n  // Cache state to avoid unnecessary redraws\n  lastSelectedId?: string | number | null;\n  lastCardColors?: CardColors;\n  lastTitle?: string;\n  lastLabels?: string;\n  lastValues?: string;\n}\n\nexport default {};\n"],"names":[],"mappings":"AAMO,MAAM,YAAY,GAAG;AACrB,MAAM,WAAW,GAAG;AACpB,MAAM,QAAQ,GAAG;AAEjB,MAAM,cAAc,GAAG;AAC5B,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,aAAa,EAAE,QAAQ;;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../PivotViewer/components/pivot/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\nimport type * as PIXI from 'pixi.js';\n\nexport const ANIMATION_SPEED = 0.15;\nexport const CARD_PADDING = 10;\nexport const CARD_RADIUS = 12;\nexport const CARD_GAP = 8; // Gap between cards (must match layout gap)\n\n// Fallbacks tuned to PrimeReact lara-dark-blue aesthetic; actual values resolved from CSS variables\nexport const DEFAULT_COLORS = {\n  base: 0x0f2745,        // surface-b-ish deep blue\n  mid: 0x163359,         // surface-a-ish\n  gradient: 0x0b1e36,    // ground backdrop\n  border: 0x2e66ba,      // primary-500 for accents\n  text: 0xffffff,\n  textSecondary: 0xa8b2c2,\n};\n\nexport type CardColors = typeof DEFAULT_COLORS;\n\nexport interface CardSprite {\n  container: PIXI.Container;\n  graphics: PIXI.Graphics;\n  titleText: PIXI.Text;\n  labelsText: PIXI.Text;\n  valuesText: PIXI.Text;\n  itemId: number | string;\n  targetX: number;\n  targetY: number;\n  currentX: number;\n  currentY: number;\n  // Animation state\n  animationStartTime?: number;\n  animationDelay?: number;\n  startX?: number;\n  startY?: number;\n  // Cache state to avoid unnecessary redraws\n  lastSelectedId?: string | number | null;\n  lastCardColors?: CardColors;\n  lastTitle?: string;\n  lastLabels?: string;\n  lastValues?: string;\n}\n\nexport default {};\n"],"names":[],"mappings":"AAMO,MAAM,YAAY,GAAG;AACrB,MAAM,WAAW,GAAG;AACpB,MAAM,QAAQ,GAAG;AAGjB,MAAM,cAAc,GAAG;AAC5B,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,aAAa,EAAE,QAAQ;;;;;"}

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

@@ -0,0 +1,6 @@
+import * as PIXI from 'pixi.js';
+import type { CardColors } from './constants';
+import type { GroupingResult, LayoutResult } from '../../engine/types';
+export declare function updateGroupBackgrounds(groupsContainer: PIXI.Container | null, container: HTMLDivElement | null, grouping: GroupingResult, layout: LayoutResult, zoomLevel: number, cardColors: CardColors, viewMode: string): void;
+export declare function updateHighlight(groupsContainer: PIXI.Container | null, container: HTMLDivElement | null, grouping: GroupingResult, layout: LayoutResult, hoveredGroupIndex: number | null, cardWidth: number, zoomLevel: number): void;
+//# sourceMappingURL=groups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"groups.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/groups.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,IAAI,MAAM,SAAS,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvE,wBAAgB,sBAAsB,CACpC,eAAe,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,EACtC,SAAS,EAAE,cAAc,GAAG,IAAI,EAChC,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,MAAM,QA2FjB;AAED,wBAAgB,eAAe,CAC7B,eAAe,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,EACtC,SAAS,EAAE,cAAc,GAAG,IAAI,EAChC,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,YAAY,EACpB,iBAAiB,EAAE,MAAM,GAAG,IAAI,EAChC,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,QA0ElB"}

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

@@ -0,0 +1,129 @@
+import * as PIXI from 'pixi.js';
+
+function updateGroupBackgrounds(groupsContainer, container, grouping, layout, zoomLevel, cardColors, viewMode) {
+    if (!groupsContainer)
+        return;
+    if (!container || grouping.groups.length === 0 || viewMode === 'collection') {
+        for (const child of groupsContainer.children) {
+            if (child.name !== 'highlight') {
+                child.visible = false;
+            }
+        }
+        return;
+    }
+    const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;
+    const containerWorldHeight = Math.max((container.scrollHeight || container.clientHeight) * invScale, container.clientHeight * invScale);
+    const baseWorldHeight = Math.max(layout.totalHeight || 0, containerWorldHeight);
+    const bufferWorld = Math.max(500, baseWorldHeight * 0.5, containerWorldHeight);
+    const worldHeight = baseWorldHeight + bufferWorld * 3;
+    const startY = -bufferWorld * 2;
+    const backgroundGraphics = groupsContainer.children.filter(c => c.name !== 'highlight');
+    let bgIndex = 0;
+    for (let index = 0; index < grouping.groups.length; index++) {
+        const group = grouping.groups[index];
+        let minX = Infinity;
+        let maxX = -Infinity;
+        for (let j = 0; j < group.ids.length; j++) {
+            const id = group.ids[j];
+            const pos = layout.positions.get(id);
+            if (pos) {
+                minX = Math.min(minX, pos.x);
+                maxX = Math.max(maxX, pos.x);
+            }
+        }
+        if (minX === Infinity && (!layout.groupXs || layout.groupXs[index] === undefined))
+            continue;
+        const bucketWidths = layout.bucketWidths || [];
+        const groupXs = layout.groupXs || [];
+        const widthFromLayout = bucketWidths[index];
+        const xFromLayout = groupXs[index];
+        const width = widthFromLayout && widthFromLayout > 0 ? widthFromLayout : ((maxX - minX) || 0);
+        const x = xFromLayout !== undefined ? xFromLayout : minX;
+        if (index % 2 === 0 && width > 0) {
+            let bg;
+            if (bgIndex < backgroundGraphics.length) {
+                bg = backgroundGraphics[bgIndex];
+                bg.clear();
+            }
+            else {
+                bg = new PIXI.Graphics();
+                const highlightIndex = groupsContainer.children.findIndex(c => c.name === 'highlight');
+                if (highlightIndex >= 0) {
+                    groupsContainer.addChildAt(bg, highlightIndex);
+                }
+                else {
+                    groupsContainer.addChild(bg);
+                }
+            }
+            bg.rect(x, startY, width, worldHeight);
+            bg.fill(cardColors.base);
+            bg.alpha = 0.15;
+            bg.visible = true;
+            bgIndex++;
+        }
+    }
+    for (let i = bgIndex; i < backgroundGraphics.length; i++) {
+        backgroundGraphics[i].visible = false;
+    }
+}
+function updateHighlight(groupsContainer, container, grouping, layout, hoveredGroupIndex, cardWidth, zoomLevel) {
+    if (!groupsContainer || !container || grouping.groups.length === 0)
+        return;
+    const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;
+    let highlight = groupsContainer.children.find(child => child.name === 'highlight');
+    if (!highlight) {
+        highlight = new PIXI.Graphics();
+        highlight.name = 'highlight';
+        groupsContainer.addChild(highlight);
+    }
+    highlight.clear();
+    if (hoveredGroupIndex === null || hoveredGroupIndex < 0) {
+        highlight.visible = false;
+        return;
+    }
+    const group = grouping.groups[hoveredGroupIndex];
+    if (!group || group.ids.length === 0) {
+        highlight.visible = false;
+        return;
+    }
+    const bucketWidths = layout.bucketWidths || [];
+    const groupXs = layout.groupXs || [];
+    const widthFromLayout = bucketWidths[hoveredGroupIndex];
+    const xFromLayout = groupXs[hoveredGroupIndex];
+    let rectX = 0;
+    let rectWidth = 0;
+    if (widthFromLayout !== undefined && xFromLayout !== undefined) {
+        rectX = xFromLayout;
+        rectWidth = widthFromLayout;
+    }
+    else {
+        let minX = Infinity;
+        let maxX = -Infinity;
+        for (let j = 0; j < group.ids.length; j++) {
+            const id = group.ids[j];
+            const pos = layout.positions.get(id);
+            if (pos) {
+                minX = Math.min(minX, pos.x);
+                maxX = Math.max(maxX, pos.x + cardWidth);
+            }
+        }
+        if (minX === Infinity) {
+            highlight.visible = false;
+            return;
+        }
+        rectX = minX;
+        rectWidth = maxX - minX;
+    }
+    const containerWorldHeight = Math.max((container.scrollHeight || container.clientHeight) * invScale, container.clientHeight * invScale);
+    const baseWorldHeight = Math.max(layout.totalHeight || 0, containerWorldHeight);
+    const bufferWorld = Math.max(200, baseWorldHeight * 0.25);
+    const worldHeight = baseWorldHeight + bufferWorld * 2;
+    const startY = -bufferWorld;
+    highlight.rect(rectX, startY, rectWidth, worldHeight);
+    highlight.fill(0xffffff);
+    highlight.alpha = 0.05;
+    highlight.visible = true;
+}
+
+export { updateGroupBackgrounds, updateHighlight };
+//# sourceMappingURL=groups.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"groups.js","sources":["../../../../../PivotViewer/components/pivot/groups.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 * as PIXI from 'pixi.js';\nimport type { CardColors } from './constants';\nimport type { GroupingResult, LayoutResult } from '../../engine/types';\n\nexport function updateGroupBackgrounds(\n  groupsContainer: PIXI.Container | null,\n  container: HTMLDivElement | null,\n  grouping: GroupingResult,\n  layout: LayoutResult,\n  zoomLevel: number,\n  cardColors: CardColors,\n  viewMode: string,\n) {\n  if (!groupsContainer) return;\n\n  // keep parameter referenced to avoid unused param lint when callers pass zoomLevel\n  void zoomLevel;\n\n  if (!container || grouping.groups.length === 0 || viewMode === 'collection') {\n    // If we shouldn't show anything, hide all existing backgrounds\n    // We keep the highlight if it exists\n    for (const child of groupsContainer.children) {\n      if ((child as unknown as { name?: string }).name !== 'highlight') {\n        child.visible = false;\n      }\n    }\n    return;\n  }\n\n  // Derive a world-space height that always covers the visible viewport even when zoomed out.\n  const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;\n  const containerWorldHeight = Math.max(\n    (container.scrollHeight || container.clientHeight) * invScale,\n    container.clientHeight * invScale,\n  );\n  const baseWorldHeight = Math.max(layout.totalHeight || 0, containerWorldHeight);\n  // Use larger buffer and extend further above the viewport to ensure full coverage\n  // when zoomed out and cards are positioned at the bottom\n  const bufferWorld = Math.max(500, baseWorldHeight * 0.5, containerWorldHeight);\n  const worldHeight = baseWorldHeight + bufferWorld * 3;\n  const startY = -bufferWorld * 2;\n\n  // Get existing background graphics (excluding highlight)\n  const backgroundGraphics = groupsContainer.children.filter(c => (c as unknown as { name?: string }).name !== 'highlight') as PIXI.Graphics[];\n  let bgIndex = 0;\n\n  // Instead of re-deriving bucket geometry from constants, compute bucket bounds\n  // directly from the positions stored in the layout so backgrounds align exactly.\n  for (let index = 0; index < grouping.groups.length; index++) {\n    const group = grouping.groups[index];\n    let minX = Infinity;\n    let maxX = -Infinity;\n\n    for (let j = 0; j < group.ids.length; j++) {\n      const id = group.ids[j];\n      const pos = layout.positions.get(id);\n      if (pos) {\n        minX = Math.min(minX, pos.x);\n        maxX = Math.max(maxX, pos.x);\n      }\n    }\n\n    if (minX === Infinity && (!layout.groupXs || layout.groupXs[index] === undefined)) continue;\n\n    // Prefer explicit bucket width and position from layout when available\n    const bucketWidths = layout.bucketWidths || [];\n    const groupXs = layout.groupXs || [];\n    const widthFromLayout = bucketWidths[index];\n    const xFromLayout = groupXs[index];\n\n    const width = widthFromLayout && widthFromLayout > 0 ? widthFromLayout : ((maxX - minX) || 0);\n    const x = xFromLayout !== undefined ? xFromLayout : minX;\n\n    if (index % 2 === 0 && width > 0) {\n      let bg: PIXI.Graphics;\n\n      if (bgIndex < backgroundGraphics.length) {\n        bg = backgroundGraphics[bgIndex];\n        bg.clear();\n      } else {\n        bg = new PIXI.Graphics();\n        // Insert before highlight if it exists, otherwise at end\n        const highlightIndex = groupsContainer.children.findIndex(c => (c as unknown as { name?: string }).name === 'highlight');\n        if (highlightIndex >= 0) {\n          groupsContainer.addChildAt(bg, highlightIndex);\n        } else {\n          groupsContainer.addChild(bg);\n        }\n      }\n\n      bg.rect(x, startY, width, worldHeight);\n      bg.fill(cardColors.base);\n      bg.alpha = 0.15;\n      bg.visible = true;\n      bgIndex++;\n    }\n  }\n\n  // Hide unused background graphics\n  for (let i = bgIndex; i < backgroundGraphics.length; i++) {\n    backgroundGraphics[i].visible = false;\n  }\n}\n\nexport function updateHighlight(\n  groupsContainer: PIXI.Container | null,\n  container: HTMLDivElement | null,\n  grouping: GroupingResult,\n  layout: LayoutResult,\n  hoveredGroupIndex: number | null,\n  cardWidth: number,\n  zoomLevel: number,\n) {\n  if (!groupsContainer || !container || grouping.groups.length === 0) return;\n\n  const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;\n\n  let highlight = groupsContainer.children.find(child => (child as unknown as { name?: string }).name === 'highlight') as PIXI.Graphics;\n\n  if (!highlight) {\n    highlight = new PIXI.Graphics();\n    (highlight as unknown as { name: string }).name = 'highlight';\n    groupsContainer.addChild(highlight);\n  }\n\n  highlight.clear();\n\n  if (hoveredGroupIndex === null || hoveredGroupIndex < 0) {\n    highlight.visible = false;\n    return;\n  }\n\n  const group = grouping.groups[hoveredGroupIndex];\n  if (!group || group.ids.length === 0) {\n    highlight.visible = false;\n    return;\n  }\n\n  // Use layout info if available\n  const bucketWidths = layout.bucketWidths || [];\n  const groupXs = layout.groupXs || [];\n  const widthFromLayout = bucketWidths[hoveredGroupIndex];\n  const xFromLayout = groupXs[hoveredGroupIndex];\n\n  let rectX = 0;\n  let rectWidth = 0;\n\n  if (widthFromLayout !== undefined && xFromLayout !== undefined) {\n    rectX = xFromLayout;\n    rectWidth = widthFromLayout;\n  } else {\n    // Fallback: derive from items bounding box\n    let minX = Infinity;\n    let maxX = -Infinity;\n\n    for (let j = 0; j < group.ids.length; j++) {\n      const id = group.ids[j];\n      const pos = layout.positions.get(id);\n      if (pos) {\n        minX = Math.min(minX, pos.x);\n        maxX = Math.max(maxX, pos.x + cardWidth);\n      }\n    }\n\n    if (minX === Infinity) {\n      highlight.visible = false;\n      return;\n    }\n    rectX = minX;\n    rectWidth = maxX - minX;\n  }\n\n  const containerWorldHeight = Math.max(\n    (container.scrollHeight || container.clientHeight) * invScale,\n    container.clientHeight * invScale,\n  );\n  const baseWorldHeight = Math.max(layout.totalHeight || 0, containerWorldHeight);\n  const bufferWorld = Math.max(200, baseWorldHeight * 0.25);\n  const worldHeight = baseWorldHeight + bufferWorld * 2;\n  const startY = -bufferWorld;\n\n  highlight.rect(rectX, startY, rectWidth, worldHeight);\n  highlight.fill(0xffffff);\n  highlight.alpha = 0.05;\n  highlight.visible = true;\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,14 @@
 import type { CardSprite, CardColors } from './constants';
-export declare function createCardSprite<TItem extends object>(id: number | string, x: number, y: number, items: TItem[], onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void, onPanStart: (e: MouseEvent) => void, cardWidth: number, cardHeight: number, cardColors: CardColors): CardSprite;
+export declare function createCardSprite<TItem extends object>(id: number | string, x: number, y: number, items: TItem[], onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void, onPanStart: (e: MouseEvent) => void, cardWidth: number, cardHeight: number, cardColors: CardColors, cardRenderer: (item: TItem) => {
+    title: string;
+    labels: string[];
+    values: string[];
+}, resolveId: (item: TItem, index: number) => string | number): CardSprite;
 export declare function destroySprite(sprite: CardSprite): void;
 export declare function clearSpritePool(): void;
-export declare function updateCardContent<TItem extends object>(sprite: CardSprite, item: TItem, selectedId: string | number | null, cardWidth: number, cardHeight: number, cardColors: CardColors): void;
+export declare function updateCardContent<TItem extends object>(sprite: CardSprite, item: TItem, selectedId: string | number | null, cardWidth: number, cardHeight: number, cardColors: CardColors, cardRenderer: (item: TItem) => {
+    title: string;
+    labels: string[];
+    values: string[];
+}): void;
 //# sourceMappingURL=sprites.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sprites.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/sprites.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI1D,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,MAAM,EACnD,EAAE,EAAE,MAAM,GAAG,MAAM,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,KAAK,EAAE,EACd,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,EACtE,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,EACnC,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,GACrB,UAAU,CAwKZ;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,UAAU,QAS/C;AAED,wBAAgB,eAAe,SAa9B;AAGD,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EACpD,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,KAAK,EACX,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAClC,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,QAoHvB"}
+{"version":3,"file":"sprites.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/sprites.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI1D,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,MAAM,EACnD,EAAE,EAAE,MAAM,GAAG,MAAM,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,KAAK,EAAE,EACd,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,EACtE,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,EACnC,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,EACpF,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,GACzD,UAAU,CAoLZ;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,UAAU,QAS/C;AAED,wBAAgB,eAAe,SAa9B;AAGD,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EACpD,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,KAAK,EACX,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAClC,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,QA+FrF"}

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

@@ -2,7 +2,7 @@ import * as PIXI from 'pixi.js';
 import { CARD_RADIUS, CARD_PADDING, CARD_GAP } from './constants.js';
 
 const spritePool = [];
-function createCardSprite(id, x, y, items, onCardClick, onPanStart, cardWidth, cardHeight, cardColors) {
+function createCardSprite(id, x, y, items, onCardClick, onPanStart, cardWidth, cardHeight, cardColors, cardRenderer, resolveId) {
     if (spritePool.length > 0) {
         const sprite = spritePool.pop();
         if (sprite.container) {
@@ -71,7 +71,7 @@ function createCardSprite(id, x, y, items, onCardClick, onPanStart, cardWidth, c
             }
         }
         if (sprite.container) {
-            sprite.container._eventContext = { items, onCardClick, id };
+            sprite.container._eventContext = { items, onCardClick, id, cardRenderer, resolveId };
         }
         return sprite;
     }
@@ -79,7 +79,8 @@ function createCardSprite(id, x, y, items, onCardClick, onPanStart, cardWidth, c
     container.eventMode = 'static';
     container.cursor = 'pointer';
     container.position.set(x, y);
-    container._eventContext = { items, onCardClick, id };
+    container.hitArea = new PIXI.Rectangle(CARD_GAP / 2, CARD_GAP / 2, cardWidth - CARD_GAP, cardHeight - CARD_GAP);
+    container._eventContext = { items, onCardClick, id, cardRenderer, resolveId };
     const graphics = new PIXI.Graphics();
     const actualWidth = cardWidth - CARD_GAP;
     const actualHeight = cardHeight - CARD_GAP;
@@ -121,7 +122,8 @@ function createCardSprite(id, x, y, items, onCardClick, onPanStart, cardWidth, c
         e.stopPropagation();
         const ctx = container._eventContext;
         const itemsArray = ctx.items;
-        const item = itemsArray[Number(ctx.id)];
+        const numericId = typeof ctx.id === 'number' ? ctx.id : Number(ctx.id);
+        const item = itemsArray[numericId];
         if (item) {
             ctx.onCardClick(item, e.nativeEvent, ctx.id);
         }
@@ -151,46 +153,14 @@ function destroySprite(sprite) {
     }
     spritePool.push(sprite);
 }
-function clearSpritePool() {
-    for (const sprite of spritePool) {
-        try {
-            sprite.graphics?.destroy();
-            sprite.titleText?.destroy();
-            sprite.labelsText?.destroy();
-            sprite.valuesText?.destroy();
-            sprite.container?.destroy();
-        }
-        catch (e) {
-        }
-    }
-    spritePool.length = 0;
-}
-function updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColors) {
+function updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColors, cardRenderer) {
     if (!item)
         return;
-    const event = item;
-    const eventType = String(event.type || event.name || event.title || 'Event');
-    const timeStr = event.occurred ? new Date(event.occurred).toLocaleString('en-US', {
-        month: '2-digit',
-        day: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false
-    }).replace(',', '') : '';
-    const correlation = event.correlationId || event.correlation || '';
-    const correlationShort = correlation ? String(correlation).substring(0, 12) + '...' : '';
-    const maxTitleLength = 20;
-    const titleDisplay = eventType.length > maxTitleLength
-        ? eventType.substring(0, maxTitleLength) + '...'
-        : eventType;
-    const maxTypeLength = 16;
-    const typeDisplay = eventType.length > maxTypeLength
-        ? eventType.substring(0, maxTypeLength) + '...'
-        : eventType;
     const colors = cardColors;
-    const labelsText = 'Type\nOccurred\nCorrelation';
-    const valuesText = `${typeDisplay}\n${timeStr}\n${correlationShort}`;
+    const cardData = cardRenderer(item);
+    const titleDisplay = cardData.title;
+    const labelsText = cardData.labels.join('\n');
+    const valuesText = cardData.values.join('\n');
     const colorsChanged = sprite.lastCardColors !== colors;
     if (!sprite.titleText || sprite.titleText.destroyed)
         return;
@@ -263,5 +233,5 @@ function updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, card
     }
 }
 
-export { clearSpritePool, createCardSprite, destroySprite, updateCardContent };
+export { createCardSprite, destroySprite, updateCardContent };
 //# sourceMappingURL=sprites.js.map