@cratis/components 0.1.9

package/dist/cjs/PivotViewer/components/AxisLabels.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var constants = require('../constants.js');
+
+function AxisLabels({ groups, bucketWidths, dimensionFilter, hoveredGroup, zoomLevel, onHover, onClick, containerRef, }) {
+    return (jsxRuntime.jsx("div", { className: "pv-axis-labels", ref: containerRef, style: {
+            pointerEvents: 'none',
+            gap: `${constants.GROUP_SPACING * zoomLevel}px`,
+            paddingLeft: 0,
+            paddingRight: 0,
+            overflowX: 'hidden',
+            whiteSpace: 'nowrap',
+        }, children: groups.map((group, index) => {
+            const isSelected = dimensionFilter === group.key;
+            const baseBucketWidth = bucketWidths[index] || 0;
+            const bucketWidth = baseBucketWidth * zoomLevel;
+            const width = bucketWidth;
+            return (jsxRuntime.jsxs("button", { type: "button", className: `pv-axis-label ${hoveredGroup === group.key ? 'highlighted' : ''} ${isSelected ? 'selected' : ''}`, style: {
+                    width,
+                    pointerEvents: 'auto'
+                }, onMouseEnter: () => onHover(group.key), onMouseLeave: () => onHover(null), onClick: () => onClick(group.key), children: [jsxRuntime.jsx("span", { className: "pv-axis-label-text", children: group.label }), jsxRuntime.jsx("span", { className: "pv-axis-label-count", children: group.count ?? group.items.length })] }, group.key));
+        }) }));
+}
+
+exports.AxisLabels = AxisLabels;
+//# sourceMappingURL=AxisLabels.js.map

package/dist/cjs/PivotViewer/components/AxisLabels.js.map

@@ -0,0 +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","GROUP_SPACING","_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,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;AACL,YAAA,aAAa,EAAE,MAAM;AACrB,YAAA,GAAG,EAAE,CAAA,EAAGC,uBAAa,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,eAAA,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,CAEjCF,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,EACzDA,cAAA,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;;;;"}

package/dist/cjs/PivotViewer/components/DetailPanel.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var framerMotion = require('framer-motion');
+
+function DetailPanel({ selectedItem, onClose, }) {
+    const selectedRecord = selectedItem;
+    const selectedContent = selectedRecord
+        ? (selectedRecord['content'] ?? {})
+        : {};
+    const metadataEntries = selectedRecord
+        ? [
+            ['Type', selectedRecord['type']],
+            [
+                'Occurred',
+                selectedRecord['occurred'] instanceof Date
+                    ? selectedRecord['occurred'].toLocaleString()
+                    : selectedRecord['occurred']
+                        ? new Date(String(selectedRecord['occurred'])).toLocaleString()
+                        : undefined,
+            ],
+            ['Service', selectedRecord['service']],
+            ['Environment', selectedRecord['environment']],
+            ['Tenant', selectedRecord['tenant']],
+            ['Correlation Id', selectedRecord['correlationId']],
+        ].filter(([, value]) => value !== undefined && value !== null)
+        : [];
+    const causation = Array.isArray(selectedRecord?.['causation'])
+        ? selectedRecord?.['causation']
+        : [];
+    return (jsxRuntime.jsx(framerMotion.AnimatePresence, { children: selectedRecord && (jsxRuntime.jsxs(framerMotion.motion.aside, { className: "pv-detail-panel", initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' }, transition: { type: 'spring', stiffness: 400, damping: 35 }, children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { children: String(selectedRecord['name'] ?? selectedRecord['type'] ?? 'Event') }), selectedRecord['type'] ? jsxRuntime.jsx("p", { children: String(selectedRecord['type']) }) : null] }), jsxRuntime.jsx("button", { type: "button", onClick: onClose, title: "Close", children: "\u00D7" })] }), jsxRuntime.jsxs("div", { className: "pv-detail-panel-content", children: [metadataEntries.length > 0 && (jsxRuntime.jsxs("section", { className: "pv-detail-meta", children: [jsxRuntime.jsx("h3", { children: "Metadata" }), jsxRuntime.jsx("dl", { children: metadataEntries.map(([key, value]) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("dt", { children: key }), jsxRuntime.jsx("dd", { children: String(value) })] }, key))) })] })), causation.length > 0 && (jsxRuntime.jsxs("section", { className: "pv-detail-causation", children: [jsxRuntime.jsx("h3", { children: "Causation" }), jsxRuntime.jsx("div", { className: "pv-pill-row", children: causation.map((value, index) => (jsxRuntime.jsx("span", { className: "pv-pill", children: String(value) }, `${value}-${index}`))) })] })), jsxRuntime.jsxs("section", { className: "pv-detail-content", children: [jsxRuntime.jsx("h3", { children: "Content" }), jsxRuntime.jsx("dl", { children: Object.entries(selectedContent).map(([key, value]) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("dt", { children: key }), jsxRuntime.jsx("dd", { children: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value) })] }, key))) })] })] })] })) }));
+}
+
+exports.DetailPanel = DetailPanel;
+//# sourceMappingURL=DetailPanel.js.map

package/dist/cjs/PivotViewer/components/DetailPanel.js.map

@@ -0,0 +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","AnimatePresence","_jsxs","motion"],"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,cAAA,CAACC,4BAAe,EAAA,EAAA,QAAA,EACb,cAAc,KACbC,eAAA,CAACC,mBAAM,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,CAE3DD,eAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,CACEA,eAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEF,iCAAK,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,EAAA,CAAM,EAC7E,cAAc,CAAC,MAAM,CAAC,GAAGA,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,EAAA,CAAK,GAAG,IAAI,IACpE,EACNA,cAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,OAAO,EAAA,QAAA,EAAA,QAAA,EAAA,CAE5C,CAAA,EAAA,CACF,EACTE,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACrC,eAAe,CAAC,MAAM,GAAG,CAAC,KACzBA,eAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAA,CACjCF,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAiB,EACjBA,iCACG,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAChCE,eAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEF,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAK,GAAG,EAAA,CAAM,EACdA,cAAA,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,KACnBE,eAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAC,qBAAqB,aACtCF,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,WAAA,EAAA,CAAkB,EAClBA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EACzB,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC1BA,cAAA,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,EACDE,eAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAC,mBAAmB,aACpCF,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,EAChBA,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAChDE,oCACEF,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAK,GAAG,EAAA,CAAM,EACdA,iCAAK,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;;;;"}

package/dist/cjs/PivotViewer/components/FilterPanel.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var framerMotion = require('framer-motion');
+var utils = require('../utils/utils.js');
+var RangeHistogramFilter = require('./RangeHistogramFilter.js');
+
+function FilterPanel({ isOpen, search, filterState, rangeFilterState, expandedFilterKey, filterOptions, anchorRef, onClose, onSearchChange, onFilterToggle, onFilterClear, onRangeChange, onExpandedFilterChange, }) {
+    const panelRef = React.useRef(null);
+    const [position, setPosition] = React.useState({ top: 0, left: 0 });
+    React.useEffect(() => {
+        if (isOpen && anchorRef.current) {
+            const rect = anchorRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + 8,
+                left: rect.left,
+            });
+        }
+    }, [isOpen, anchorRef]);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            const panel = panelRef.current;
+            const anchor = anchorRef.current;
+            if (panel && !panel.contains(target) && anchor && !anchor.contains(target)) {
+                onClose();
+            }
+        };
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside, true);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside, true);
+        };
+    }, [isOpen, anchorRef, onClose]);
+    return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isOpen && (jsxRuntime.jsx(framerMotion.motion.aside, { ref: panelRef, className: "pv-filter-dropdown", style: {
+                position: 'fixed',
+                left: position.left,
+                top: position.top,
+            }, initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: { duration: 0.15 }, children: jsxRuntime.jsxs("div", { className: "pv-filter-dropdown-content", children: [jsxRuntime.jsx("div", { className: "pv-search", children: jsxRuntime.jsx("input", { type: "search", placeholder: "Search events", value: search, onChange: (event) => onSearchChange(event.target.value) }) }), jsxRuntime.jsx("div", { className: "pv-filter-groups", children: filterOptions.map(({ filter, options, numericRange }) => {
+                            const selections = filterState[filter.key] ?? new Set();
+                            const rangeSelection = rangeFilterState[filter.key];
+                            const isExpanded = expandedFilterKey === filter.key;
+                            const isNumeric = filter.type === 'number';
+                            return (jsxRuntime.jsxs("div", { className: `pv-filter ${isExpanded ? 'expanded' : ''}`, children: [jsxRuntime.jsxs("button", { type: "button", className: "pv-filter-trigger", onClick: () => onExpandedFilterChange(isExpanded ? null : filter.key), children: [jsxRuntime.jsx("span", { className: "pv-filter-label", children: filter.label }), jsxRuntime.jsxs("span", { className: "pv-filter-trigger-meta", children: [!isNumeric && selections.size > 0 && jsxRuntime.jsx("span", { className: "pv-filter-count", children: selections.size }), isNumeric && rangeSelection && jsxRuntime.jsx("span", { className: "pv-filter-count", children: "Range" }), jsxRuntime.jsx("span", { className: "pv-filter-chevron" })] })] }), jsxRuntime.jsx("div", { className: `pv-filter-content ${isExpanded ? 'expanded' : ''}`, children: isNumeric && numericRange ? (jsxRuntime.jsx(RangeHistogramFilter.RangeHistogramFilter, { values: numericRange.values, min: numericRange.min, max: numericRange.max, buckets: filter.buckets ?? 20, selectedRange: rangeSelection ?? null, onChange: (range) => onRangeChange(filter.key, range) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("ul", { children: options.map((option) => {
+                                                        const optionKey = option.key;
+                                                        const checked = selections.has(optionKey);
+                                                        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: filter.multi ? 'checkbox' : 'radio', name: `filter-${filter.key}`, checked: checked, onChange: () => onFilterToggle(filter.key, optionKey, filter.multi ?? false) }), jsxRuntime.jsx("span", { children: option.label }), jsxRuntime.jsx("span", { className: "pv-option-count", children: utils.renderOptionCount(option.count) })] }) }, option.key));
+                                                    }) }), selections.size > 0 && (jsxRuntime.jsx("button", { type: "button", className: "pv-filter-clear", onClick: () => onFilterClear(filter.key), children: "Clear" }))] })) })] }, filter.key));
+                        }) })] }) })) }), document.body);
+}
+
+exports.FilterPanel = FilterPanel;
+//# sourceMappingURL=FilterPanel.js.map

package/dist/cjs/PivotViewer/components/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","sources":["../../../../PivotViewer/components/FilterPanel.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 { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport type { PivotFilter, PivotFilterOption, PivotPrimitive } from '../types';\nimport type { FilterState, RangeFilterState } from '../utils/utils';\nimport { renderOptionCount } from '../utils/utils';\nimport { RangeHistogramFilter } from './RangeHistogramFilter';\n\nexport interface FilterPanelProps<TItem extends object> {\n  isOpen: boolean;\n  search: string;\n  filterState: FilterState;\n  rangeFilterState: RangeFilterState;\n  expandedFilterKey: string | null;\n  filterOptions: {\n    filter: PivotFilter<TItem>;\n    options: PivotFilterOption[];\n    numericRange?: { min: number; max: number; values: PivotPrimitive[] };\n  }[];\n  anchorRef: React.RefObject<HTMLButtonElement | null>;\n  onClose: () => void;\n  onSearchChange: (value: string) => void;\n  onFilterToggle: (filterKey: string, optionKey: string, multi: boolean | undefined) => void;\n  onFilterClear: (filterKey: string) => void;\n  onRangeChange: (filterKey: string, range: [number, number] | null) => void;\n  onExpandedFilterChange: (key: string | null) => void;\n}\n\nexport function FilterPanel<TItem extends object>({\n  isOpen,\n  search,\n  filterState,\n  rangeFilterState,\n  expandedFilterKey,\n  filterOptions,\n  anchorRef,\n  onClose,\n  onSearchChange,\n  onFilterToggle,\n  onFilterClear,\n  onRangeChange,\n  onExpandedFilterChange,\n}: FilterPanelProps<TItem>) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  // Calculate position when opening\n  useEffect(() => {\n    if (isOpen && anchorRef.current) {\n      const rect = anchorRef.current.getBoundingClientRect();\n      setPosition({\n        top: rect.bottom + 8,\n        left: rect.left,\n      });\n    }\n  }, [isOpen, anchorRef]);\n\n  // Handle click outside to close\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const target = event.target as Node;\n      const panel = panelRef.current;\n      const anchor = anchorRef.current;\n\n      if (panel && !panel.contains(target) && anchor && !anchor.contains(target)) {\n        onClose();\n      }\n    };\n\n    // Use capture phase to ensure we catch the event before any other handlers\n    // Use timeout to avoid closing immediately when clicking the button to open\n    const timeoutId = setTimeout(() => {\n      document.addEventListener('mousedown', handleClickOutside, true);\n    }, 0);\n\n    return () => {\n      clearTimeout(timeoutId);\n      document.removeEventListener('mousedown', handleClickOutside, true);\n    };\n  }, [isOpen, anchorRef, onClose]);\n\n  return createPortal(\n    <AnimatePresence initial={false}>\n      {isOpen && (\n        <motion.aside\n          ref={panelRef}\n          className=\"pv-filter-dropdown\"\n          style={{\n            position: 'fixed',\n            left: position.left,\n            top: position.top,\n          }}\n          initial={{ opacity: 0, y: -8 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -8 }}\n          transition={{ duration: 0.15 }}\n        >\n          <div className=\"pv-filter-dropdown-content\">\n            <div className=\"pv-search\">\n              <input\n                type=\"search\"\n                placeholder=\"Search events\"\n                value={search}\n                onChange={(event) => onSearchChange(event.target.value)}\n              />\n            </div>\n            <div className=\"pv-filter-groups\">\n              {filterOptions.map(({ filter, options, numericRange }) => {\n                const selections = filterState[filter.key] ?? new Set<string>();\n                const rangeSelection = rangeFilterState[filter.key];\n                const isExpanded = expandedFilterKey === filter.key;\n                const isNumeric = filter.type === 'number';\n\n                return (\n                  <div key={filter.key} className={`pv-filter ${isExpanded ? 'expanded' : ''}`}>\n                    <button\n                      type=\"button\"\n                      className=\"pv-filter-trigger\"\n                      onClick={() => onExpandedFilterChange(isExpanded ? null : filter.key)}\n                    >\n                      <span className=\"pv-filter-label\">{filter.label}</span>\n                      <span className=\"pv-filter-trigger-meta\">\n                        {!isNumeric && selections.size > 0 && <span className=\"pv-filter-count\">{selections.size}</span>}\n                        {isNumeric && rangeSelection && <span className=\"pv-filter-count\">Range</span>}\n                        <span className=\"pv-filter-chevron\" />\n                      </span>\n                    </button>\n                    <div className={`pv-filter-content ${isExpanded ? 'expanded' : ''}`}>\n                      {isNumeric && numericRange ? (\n                        <RangeHistogramFilter\n                          values={numericRange.values}\n                          min={numericRange.min}\n                          max={numericRange.max}\n                          buckets={filter.buckets ?? 20}\n                          selectedRange={rangeSelection ?? null}\n                          onChange={(range) => onRangeChange(filter.key, range)}\n                        />\n                      ) : (\n                        <>\n                          <ul>\n                            {options.map((option) => {\n                              const optionKey = option.key;\n                              const checked = selections.has(optionKey);\n                              return (\n                                <li key={option.key}>\n                                  <label>\n                                    <input\n                                      type={filter.multi ? 'checkbox' : 'radio'}\n                                      name={`filter-${filter.key}`}\n                                      checked={checked}\n                                      onChange={() =>\n                                        onFilterToggle(filter.key, optionKey, filter.multi ?? false)\n                                      }\n                                    />\n                                    <span>{option.label}</span>\n                                    <span className=\"pv-option-count\">{renderOptionCount(option.count)}</span>\n                                  </label>\n                                </li>\n                              );\n                            })}\n                          </ul>\n                          {selections.size > 0 && (\n                            <button\n                              type=\"button\"\n                              className=\"pv-filter-clear\"\n                              onClick={() => onFilterClear(filter.key)}\n                            >\n                              Clear\n                            </button>\n                          )}\n                        </>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </motion.aside>\n      )}\n    </AnimatePresence>,\n    document.body\n  );\n}\n"],"names":["useRef","useState","useEffect","createPortal","_jsx","AnimatePresence","motion","_jsxs","RangeHistogramFilter","_Fragment","renderOptionCount"],"mappings":"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"}

package/dist/cjs/PivotViewer/components/FilterPanelContainer.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var FilterPanel = require('./FilterPanel.js');
+
+function FilterPanelContainer(props) {
+    return jsxRuntime.jsx(FilterPanel.FilterPanel, { ...props });
+}
+
+exports.FilterPanelContainer = FilterPanelContainer;
+//# sourceMappingURL=FilterPanelContainer.js.map

package/dist/cjs/PivotViewer/components/FilterPanelContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanelContainer.js","sources":["../../../../PivotViewer/components/FilterPanelContainer.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 { FilterPanel, type FilterPanelProps } from './FilterPanel';\n\nexport type FilterPanelContainerProps<TItem extends object> = FilterPanelProps<TItem>;\n\nexport function FilterPanelContainer<TItem extends object>(props: FilterPanelContainerProps<TItem>) {\n  return <FilterPanel {...props} />;\n}\n"],"names":["_jsx","FilterPanel"],"mappings":";;;;;AAOM,SAAU,oBAAoB,CAAuB,KAAuC,EAAA;AAChG,IAAA,OAAOA,cAAA,CAACC,uBAAW,EAAA,EAAA,GAAK,KAAK,GAAI;AACnC;;;;"}

package/dist/cjs/PivotViewer/components/PivotCanvas.js

@@ -0,0 +1,394 @@
+'use strict';
+
+var React = require('react');
+var PIXI = require('pixi.js');
+var colorResolver = require('./pivot/colorResolver.js');
+var sprites = require('./pivot/sprites.js');
+var visibility = require('./pivot/visibility.js');
+var buckets = require('./pivot/buckets.js');
+var animation = require('./pivot/animation.js');
+var constants = require('./pivot/constants.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var PIXI__namespace = /*#__PURE__*/_interopNamespaceDefault(PIXI);
+
+function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeight, zoomLevel, panX, panY, viewportWidth, viewportHeight, selectedId, hoveredGroupIndex, isZooming: _isZooming = false, resolveId: _resolveId, onCardClick, onPanStart, onPanMove, onPanEnd, viewMode, cardRenderer, containerRef, }) {
+    console.log('[PivotCanvas] Render', { viewMode });
+    const parentContainerRef = containerRef;
+    const canvasRef = React.useRef(null);
+    const spacerRef = React.useRef(null);
+    const appRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const bucketsContainerRef = React.useRef(null);
+    const spritesRef = React.useRef(new Map());
+    const animationFrameRef = React.useRef(0);
+    const mountedRef = React.useRef(true);
+    const [pixiReady, setPixiReady] = React.useState(false);
+    const isAnimatingRef = React.useRef(false);
+    const needsRenderRef = React.useRef(false);
+    const initializingRef = React.useRef(false);
+    const isViewTransitionRef = React.useRef(false);
+    const lastViewChangeTimeRef = React.useRef(0);
+    const previousViewModeRef = React.useRef(viewMode);
+    const prevLayoutRef = React.useRef(null);
+    const prevGroupingRef = React.useRef(null);
+    const cardColorsRef = React.useRef(constants.DEFAULT_COLORS);
+    const cssColorResolver = React.useMemo(() => colorResolver.createCssColorResolver(), []);
+    const onPanStartRef = React.useRef(onPanStart);
+    const onPanMoveRef = React.useRef(onPanMove);
+    const onPanEndRef = React.useRef(onPanEnd);
+    const onCardClickRef = React.useRef(onCardClick);
+    const prevPanRef = React.useRef({ x: panX, y: panY });
+    React.useEffect(() => {
+        onPanMoveRef.current = onPanMove;
+        onPanEndRef.current = onPanEnd;
+        onCardClickRef.current = onCardClick;
+    }, [onPanStart, onPanMove, onPanEnd, onCardClick]);
+    React.useEffect(() => {
+        cardColorsRef.current = colorResolver.resolveCardColors(cssColorResolver);
+    }, [cssColorResolver]);
+    React.useEffect(() => {
+        mountedRef.current = true;
+        if (!parentContainerRef || !parentContainerRef.current) {
+            return;
+        }
+        if (initializingRef.current || appRef.current) {
+            return;
+        }
+        initializingRef.current = true;
+        let app = null;
+        (async () => {
+            try {
+                const options = {
+                    backgroundAlpha: 0,
+                    antialias: false,
+                    autoStart: false,
+                    autoDensity: true,
+                    resolution: window.devicePixelRatio || 1,
+                    width: viewportWidth > 0 ? viewportWidth : 800,
+                    height: viewportHeight > 0 ? viewportHeight : 600,
+                };
+                app = new PIXI__namespace.Application();
+                if (app.init && typeof app.init === 'function') {
+                    await app.init(options);
+                }
+                else {
+                    app.destroy?.();
+                    app = new PIXI__namespace.Application(options);
+                }
+                if (!mountedRef.current || !parentContainerRef.current) {
+                    if (app && typeof app.destroy === 'function')
+                        app.destroy(true, { children: true });
+                    initializingRef.current = false;
+                    return;
+                }
+                appRef.current = app;
+                const bucketsContainer = new PIXI__namespace.Container();
+                bucketsContainerRef.current = bucketsContainer;
+                app.stage.addChild(bucketsContainer);
+                const root = new PIXI__namespace.Container();
+                rootRef.current = root;
+                app.stage.addChild(root);
+                const canvasEl = (app.view ?? app.canvas ?? app.renderer?.view);
+                const overlayParent = parentContainerRef.current.parentElement ?? parentContainerRef.current;
+                if (canvasEl) {
+                    if (canvasEl.parentElement) {
+                        canvasEl.parentElement.removeChild(canvasEl);
+                    }
+                    overlayParent.appendChild(canvasEl);
+                    canvasRef.current = canvasEl;
+                }
+                else if (app.canvas) {
+                    const c = app.canvas;
+                    if (c.parentElement) {
+                        c.parentElement.removeChild(c);
+                    }
+                    overlayParent.appendChild(c);
+                    canvasRef.current = c;
+                }
+                if (canvasRef.current && parentContainerRef.current) {
+                    const parentBounds = parentContainerRef.current.getBoundingClientRect();
+                    void parentBounds;
+                    canvasRef.current.style.position = 'absolute';
+                    const offsetLeft = parentContainerRef.current.offsetLeft;
+                    const offsetTop = parentContainerRef.current.offsetTop;
+                    canvasRef.current.style.left = `${offsetLeft}px`;
+                    canvasRef.current.style.top = `${offsetTop}px`;
+                    canvasRef.current.style.width = `${parentContainerRef.current.clientWidth}px`;
+                    canvasRef.current.style.height = `${parentContainerRef.current.clientHeight}px`;
+                    canvasRef.current.style.zIndex = '0';
+                    canvasRef.current.style.pointerEvents = 'none';
+                }
+                if (canvasRef.current) {
+                    canvasRef.current.style.display = 'block';
+                    canvasRef.current.style.pointerEvents = 'none';
+                }
+                app.stage.eventMode = 'static';
+                app.stage.hitArea = new PIXI__namespace.Rectangle(0, 0, viewportWidth, viewportHeight);
+                app.stage.on('pointerdown', (e) => {
+                    onPanStartRef.current(e.nativeEvent);
+                });
+                app.stage.on('globalpointermove', (e) => {
+                    onPanMoveRef.current(e.nativeEvent);
+                });
+                app.stage.on('globalpointerup', () => {
+                    onPanEndRef.current();
+                });
+                const parentEl = parentContainerRef.current;
+                if (parentEl) {
+                }
+                if (viewportWidth > 0 && viewportHeight > 0) {
+                    app.renderer?.resize(viewportWidth, viewportHeight);
+                }
+                setPixiReady(true);
+                initializingRef.current = false;
+                needsRenderRef.current = true;
+                app.renderer?.render(app.stage);
+            }
+            catch (error) {
+                console.error('Failed to initialize Pixi.js:', error);
+                initializingRef.current = false;
+            }
+        })();
+        return () => {
+            mountedRef.current = false;
+            setPixiReady(false);
+            cancelAnimationFrame(animationFrameRef.current);
+            if (appRef.current && typeof appRef.current.destroy === 'function') {
+                appRef.current.destroy(true, { children: true });
+                appRef.current = null;
+                rootRef.current = null;
+            }
+            sprites.clearSpritePool();
+            try {
+                const parentEl = parentContainerRef.current;
+                if (parentEl) {
+                }
+            }
+            catch (e) {
+            }
+            try {
+                if (canvasRef.current && canvasRef.current.parentElement) {
+                    canvasRef.current.parentElement.removeChild(canvasRef.current);
+                }
+            }
+            catch (e) {
+            }
+        };
+    }, [viewportWidth, viewportHeight]);
+    React.useEffect(() => {
+        if (!parentContainerRef || !parentContainerRef.current || !appRef.current || !pixiReady)
+            return;
+        const container = parentContainerRef.current;
+        const app = appRef.current;
+        let resizeTimeout;
+        const handleResize = () => {
+            if (viewportWidth > 0 && viewportHeight > 0) {
+                app.renderer?.resize(viewportWidth, viewportHeight);
+                app.stage.hitArea = new PIXI__namespace.Rectangle(0, 0, viewportWidth, viewportHeight);
+                if (canvasRef.current && parentContainerRef.current) {
+                    canvasRef.current.style.width = `${parentContainerRef.current.clientWidth}px`;
+                    canvasRef.current.style.height = `${parentContainerRef.current.clientHeight}px`;
+                    canvasRef.current.style.left = `${parentContainerRef.current.offsetLeft}px`;
+                    canvasRef.current.style.top = `${parentContainerRef.current.offsetTop}px`;
+                }
+            }
+        };
+        const debouncedResize = () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(handleResize, 150);
+        };
+        handleResize();
+        const resizeObserver = new ResizeObserver(debouncedResize);
+        resizeObserver.observe(container);
+        return () => {
+            clearTimeout(resizeTimeout);
+            resizeObserver.disconnect();
+        };
+    }, [pixiReady, viewportWidth, viewportHeight]);
+    React.useEffect(() => {
+        if (!bucketsContainerRef.current || !pixiReady)
+            return;
+        buckets.updateBucketBackgrounds(bucketsContainerRef.current, parentContainerRef.current, grouping, layout, zoomLevel, cardColorsRef.current, viewMode);
+        needsRenderRef.current = true;
+        appRef.current?.renderer?.render(appRef.current.stage);
+    }, [grouping, layout, zoomLevel, viewMode, pixiReady]);
+    React.useEffect(() => {
+        if (!rootRef.current || !pixiReady) {
+            return;
+        }
+        const viewModeChanged = previousViewModeRef.current !== viewMode;
+        const groupingChanged = prevGroupingRef.current !== grouping;
+        if (viewModeChanged || groupingChanged) {
+            isViewTransitionRef.current = true;
+            lastViewChangeTimeRef.current = Date.now();
+            previousViewModeRef.current = viewMode;
+            prevGroupingRef.current = grouping;
+        }
+        if (spacerRef.current) {
+            const spacer = spacerRef.current;
+            const worldWidth = (layout.totalWidth || viewportWidth) * zoomLevel;
+            const worldHeight = (layout.totalHeight || viewportHeight) * zoomLevel;
+            spacer.style.width = `${Math.max(worldWidth, viewportWidth)}px`;
+            spacer.style.height = `${Math.max(worldHeight, viewportHeight)}px`;
+        }
+        if (parentContainerRef.current) {
+            spacerRef.current;
+        }
+        const panDeltaX = panX - prevPanRef.current.x;
+        const panDeltaY = panY - prevPanRef.current.y;
+        prevPanRef.current = { x: panX, y: panY };
+        visibility.syncSpritesToViewport({
+            root: rootRef.current,
+            container: parentContainerRef.current,
+            sprites: spritesRef.current,
+            layout,
+            visibleIds,
+            items,
+            cardWidth,
+            cardHeight,
+            panX,
+            panY,
+            panDeltaX,
+            panDeltaY,
+            zoomLevel,
+            viewportWidth,
+            viewportHeight,
+            createCardSprite: (id, x, y) => sprites.createCardSprite(id, x, y, items, (item, e, id) => onCardClickRef.current(item, e, id), onPanStart, cardWidth, cardHeight, cardColorsRef.current),
+            updateCardContent: (sprite, item) => sprites.updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current),
+            isViewTransition: isViewTransitionRef.current || (Date.now() - lastViewChangeTimeRef.current < 1000),
+            prevLayout: prevLayoutRef.current,
+        });
+        needsRenderRef.current = true;
+        animation.startAnimationLoop({
+            mountedRef,
+            appRef,
+            animationFrameRef,
+            isAnimatingRef,
+            needsRenderRef,
+            spritesRef,
+            isViewTransitionRef,
+        });
+    }, [layout, visibleIds, items, cardWidth, cardHeight, pixiReady, zoomLevel, panX, panY, grouping, viewMode]);
+    React.useEffect(() => {
+        prevLayoutRef.current = layout;
+    }, [layout]);
+    React.useEffect(() => {
+        if (!rootRef.current || !bucketsContainerRef.current)
+            return;
+        const effectivePanX = parentContainerRef.current ? parentContainerRef.current.scrollLeft : panX;
+        const effectivePanY = parentContainerRef.current ? parentContainerRef.current.scrollTop : panY;
+        rootRef.current.scale.set(zoomLevel);
+        bucketsContainerRef.current.scale.set(zoomLevel);
+        rootRef.current.position.set(-effectivePanX, -effectivePanY);
+        bucketsContainerRef.current.position.set(-effectivePanX, -effectivePanY);
+        appRef.current?.renderer?.render(appRef.current.stage);
+    }, [zoomLevel, panX, panY]);
+    React.useEffect(() => {
+        if (!rootRef.current)
+            return;
+        updateSelection();
+        needsRenderRef.current = true;
+        appRef.current?.renderer.render(appRef.current.stage);
+    }, [selectedId, items]);
+    React.useEffect(() => {
+        if (!rootRef.current)
+            return;
+        updateHighlight();
+        needsRenderRef.current = true;
+        appRef.current?.renderer.render(appRef.current.stage);
+    }, [hoveredGroupIndex, layout, grouping]);
+    React.useEffect(() => {
+        if (!pixiReady || !parentContainerRef || !parentContainerRef.current || !appRef.current || !rootRef.current)
+            return;
+        const container = parentContainerRef.current;
+        const app = appRef.current;
+        const lastScroll = { x: container.scrollLeft, y: container.scrollTop };
+        const pendingRef = { scheduled: false };
+        const processScroll = () => {
+            pendingRef.scheduled = false;
+            try {
+                const effectivePanX = container.scrollLeft;
+                const effectivePanY = container.scrollTop;
+                lastScroll.x = effectivePanX;
+                lastScroll.y = effectivePanY;
+                if (rootRef.current && bucketsContainerRef.current) {
+                    rootRef.current.scale.set(zoomLevel);
+                    bucketsContainerRef.current.scale.set(zoomLevel);
+                    const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;
+                    void invScale;
+                    rootRef.current.position.set(-effectivePanX, -effectivePanY);
+                    bucketsContainerRef.current.position.set(-effectivePanX, -effectivePanY);
+                }
+                visibility.syncSpritesToViewport({
+                    root: rootRef.current,
+                    container: parentContainerRef.current,
+                    sprites: spritesRef.current,
+                    layout,
+                    visibleIds,
+                    items,
+                    cardWidth,
+                    cardHeight,
+                    panX,
+                    panY,
+                    zoomLevel,
+                    viewportWidth,
+                    viewportHeight,
+                    createCardSprite: (id, x, y) => sprites.createCardSprite(id, x, y, items, (item, e, id) => onCardClickRef.current(item, e, id), (e) => onPanStartRef.current(e, true), cardWidth, cardHeight, cardColorsRef.current),
+                    updateCardContent: (sprite, item) => sprites.updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current),
+                    isViewTransition: isViewTransitionRef.current || (Date.now() - lastViewChangeTimeRef.current < 1000),
+                });
+                needsRenderRef.current = true;
+                app.renderer?.render(app.stage);
+            }
+            catch (e) {
+                console.error('[PivotCanvas] processScroll error', e);
+            }
+        };
+        const onScroll = () => {
+            lastScroll.x = container.scrollLeft;
+            lastScroll.y = container.scrollTop;
+            if (!pendingRef.scheduled) {
+                pendingRef.scheduled = true;
+                requestAnimationFrame(processScroll);
+            }
+        };
+        container.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            container.removeEventListener('scroll', onScroll);
+        };
+    }, [pixiReady, layout, visibleIds, items, cardWidth, cardHeight, zoomLevel, viewportWidth, viewportHeight, panX, panY, grouping, viewMode, selectedId, onCardClick, onPanStart]);
+    function updateCardContent(sprite, item) {
+        return sprites.updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current);
+    }
+    function updateSelection() {
+        const sprites = spritesRef.current;
+        for (const sprite of sprites.values()) {
+            const val = items[String(sprite.itemId)];
+            updateCardContent(sprite, val);
+        }
+    }
+    function updateHighlight() {
+        buckets.updateHighlight(bucketsContainerRef.current, parentContainerRef.current, grouping, layout, hoveredGroupIndex, cardWidth);
+    }
+    return null;
+}
+
+exports.PivotCanvas = PivotCanvas;
+//# sourceMappingURL=PivotCanvas.js.map