snice 4.8.0 → 4.9.0

package/dist/components/sankey/snice-sankey.js

@@ -0,0 +1,612 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, dispatch, ready, watch, render, styles, dispose, html, css } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%}.sankey{position:relative;width:100%;min-height:12.5rem}.sankey__svg{display:block;width:100%;height:100%}.sankey__node{cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms) ease}.sankey__node rect{stroke:var(--snice-color-background,rgb(255 255 255));stroke-width:1px}.sankey__node:hover rect{filter:brightness(1.1)}.sankey__link{cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms) ease}.sankey__link path{fill:none;stroke-opacity:0.35;transition:stroke-opacity var(--snice-transition-fast, 150ms) ease}.sankey__link:hover path{stroke-opacity:0.6}.sankey--dimmed .sankey__node:not(.sankey__node--highlighted){opacity:.2}.sankey--dimmed .sankey__link:not(.sankey__link--highlighted) path{stroke-opacity:0.08}.sankey__label{font-size:var(--snice-font-size-sm, .75rem);fill:var(--snice-color-text,rgb(23 23 23));pointer-events:none;dominant-baseline:central}.sankey__value{font-size:var(--snice-font-size-xs, .625rem);fill:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none;dominant-baseline:central}.sankey__tooltip{position:absolute;pointer-events:none;background:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:4px;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-sm, .75rem);color:var(--snice-color-text,rgb(23 23 23));box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));white-space:nowrap;z-index:10;opacity:0;transition:opacity var(--snice-transition-fast, 150ms) ease}.sankey__tooltip--visible{opacity:1}.sankey__tooltip-label{font-weight:var(--snice-font-weight-semibold,600)}.sankey__tooltip-value{color:var(--snice-color-text-secondary,rgb(82 82 82));margin-top:var(--snice-spacing-3xs,.125rem)}@keyframes sankey-fade-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}:host([animation]) .sankey__node{animation:sankey-fade-in var(--snice-transition-medium,250ms) ease both}:host([animation]) .sankey__link path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:.8s forwards sankey-link-draw}@keyframes sankey-link-draw{to{stroke-dashoffset:0}}";
+
+const DEFAULT_COLORS = [
+    '#2196f3', '#4caf50', '#ff9800', '#f44336', '#9c27b0',
+    '#00bcd4', '#8bc34a', '#ffc107', '#e91e63', '#673ab7'
+];
+function escapeHTML(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+let SniceSankey = (() => {
+    let _classDecorators = [element('snice-sankey')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _nodeWidth_decorators;
+    let _nodeWidth_initializers = [];
+    let _nodeWidth_extraInitializers = [];
+    let _nodePadding_decorators;
+    let _nodePadding_initializers = [];
+    let _nodePadding_extraInitializers = [];
+    let _alignment_decorators;
+    let _alignment_initializers = [];
+    let _alignment_extraInitializers = [];
+    let _showLabels_decorators;
+    let _showLabels_initializers = [];
+    let _showLabels_extraInitializers = [];
+    let _showValues_decorators;
+    let _showValues_initializers = [];
+    let _showValues_extraInitializers = [];
+    let _animation_decorators;
+    let _animation_initializers = [];
+    let _animation_extraInitializers = [];
+    let _chartEl_decorators;
+    let _chartEl_initializers = [];
+    let _chartEl_extraInitializers = [];
+    let _tooltipEl_decorators;
+    let _tooltipEl_initializers = [];
+    let _tooltipEl_extraInitializers = [];
+    let _emitNodeClick_decorators;
+    let _emitLinkClick_decorators;
+    let _emitHover_decorators;
+    let _init_decorators;
+    let _onDataChange_decorators;
+    let _onDisplayChange_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    let _cleanup_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.data = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _data_initializers, { nodes: [], links: [] }));
+            this.nodeWidth = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _nodeWidth_initializers, 20));
+            this.nodePadding = (__runInitializers(this, _nodeWidth_extraInitializers), __runInitializers(this, _nodePadding_initializers, 10));
+            this.alignment = (__runInitializers(this, _nodePadding_extraInitializers), __runInitializers(this, _alignment_initializers, 'justify'));
+            this.showLabels = (__runInitializers(this, _alignment_extraInitializers), __runInitializers(this, _showLabels_initializers, true));
+            this.showValues = (__runInitializers(this, _showLabels_extraInitializers), __runInitializers(this, _showValues_initializers, true));
+            this.animation = (__runInitializers(this, _showValues_extraInitializers), __runInitializers(this, _animation_initializers, false));
+            this.chartEl = (__runInitializers(this, _animation_extraInitializers), __runInitializers(this, _chartEl_initializers, void 0));
+            this.tooltipEl = (__runInitializers(this, _chartEl_extraInitializers), __runInitializers(this, _tooltipEl_initializers, void 0));
+            this.cachedData = (__runInitializers(this, _tooltipEl_extraInitializers), { nodes: [], links: [] });
+            this.layoutNodes = [];
+            this.layoutLinks = [];
+            this.hoveredNodeId = null;
+            this.hoveredLinkIndex = null;
+            this.chartWidth = 600;
+            this.chartHeight = 400;
+            this.resizeObserver = null;
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Object, attribute: false })];
+            _nodeWidth_decorators = [property({ type: Number, attribute: 'node-width' })];
+            _nodePadding_decorators = [property({ type: Number, attribute: 'node-padding' })];
+            _alignment_decorators = [property()];
+            _showLabels_decorators = [property({ type: Boolean, attribute: 'show-labels' })];
+            _showValues_decorators = [property({ type: Boolean, attribute: 'show-values' })];
+            _animation_decorators = [property({ type: Boolean })];
+            _chartEl_decorators = [query('.sankey__chart')];
+            _tooltipEl_decorators = [query('.sankey__tooltip')];
+            _emitNodeClick_decorators = [dispatch('sankey-node-click', { bubbles: true, composed: true })];
+            _emitLinkClick_decorators = [dispatch('sankey-link-click', { bubbles: true, composed: true })];
+            _emitHover_decorators = [dispatch('sankey-hover', { bubbles: true, composed: true })];
+            _init_decorators = [ready()];
+            _onDataChange_decorators = [watch('data')];
+            _onDisplayChange_decorators = [watch('showLabels', 'showValues', 'animation', 'alignment')];
+            _renderContent_decorators = [render({ once: true })];
+            _componentStyles_decorators = [styles()];
+            _cleanup_decorators = [dispose()];
+            __esDecorate(this, null, _emitNodeClick_decorators, { kind: "method", name: "emitNodeClick", static: false, private: false, access: { has: obj => "emitNodeClick" in obj, get: obj => obj.emitNodeClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitLinkClick_decorators, { kind: "method", name: "emitLinkClick", static: false, private: false, access: { has: obj => "emitLinkClick" in obj, get: obj => obj.emitLinkClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitHover_decorators, { kind: "method", name: "emitHover", static: false, private: false, access: { has: obj => "emitHover" in obj, get: obj => obj.emitHover }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDataChange_decorators, { kind: "method", name: "onDataChange", static: false, private: false, access: { has: obj => "onDataChange" in obj, get: obj => obj.onDataChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDisplayChange_decorators, { kind: "method", name: "onDisplayChange", static: false, private: false, access: { has: obj => "onDisplayChange" in obj, get: obj => obj.onDisplayChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(null, null, _nodeWidth_decorators, { kind: "field", name: "nodeWidth", static: false, private: false, access: { has: obj => "nodeWidth" in obj, get: obj => obj.nodeWidth, set: (obj, value) => { obj.nodeWidth = value; } }, metadata: _metadata }, _nodeWidth_initializers, _nodeWidth_extraInitializers);
+            __esDecorate(null, null, _nodePadding_decorators, { kind: "field", name: "nodePadding", static: false, private: false, access: { has: obj => "nodePadding" in obj, get: obj => obj.nodePadding, set: (obj, value) => { obj.nodePadding = value; } }, metadata: _metadata }, _nodePadding_initializers, _nodePadding_extraInitializers);
+            __esDecorate(null, null, _alignment_decorators, { kind: "field", name: "alignment", static: false, private: false, access: { has: obj => "alignment" in obj, get: obj => obj.alignment, set: (obj, value) => { obj.alignment = value; } }, metadata: _metadata }, _alignment_initializers, _alignment_extraInitializers);
+            __esDecorate(null, null, _showLabels_decorators, { kind: "field", name: "showLabels", static: false, private: false, access: { has: obj => "showLabels" in obj, get: obj => obj.showLabels, set: (obj, value) => { obj.showLabels = value; } }, metadata: _metadata }, _showLabels_initializers, _showLabels_extraInitializers);
+            __esDecorate(null, null, _showValues_decorators, { kind: "field", name: "showValues", static: false, private: false, access: { has: obj => "showValues" in obj, get: obj => obj.showValues, set: (obj, value) => { obj.showValues = value; } }, metadata: _metadata }, _showValues_initializers, _showValues_extraInitializers);
+            __esDecorate(null, null, _animation_decorators, { kind: "field", name: "animation", static: false, private: false, access: { has: obj => "animation" in obj, get: obj => obj.animation, set: (obj, value) => { obj.animation = value; } }, metadata: _metadata }, _animation_initializers, _animation_extraInitializers);
+            __esDecorate(null, null, _chartEl_decorators, { kind: "field", name: "chartEl", static: false, private: false, access: { has: obj => "chartEl" in obj, get: obj => obj.chartEl, set: (obj, value) => { obj.chartEl = value; } }, metadata: _metadata }, _chartEl_initializers, _chartEl_extraInitializers);
+            __esDecorate(null, null, _tooltipEl_decorators, { kind: "field", name: "tooltipEl", static: false, private: false, access: { has: obj => "tooltipEl" in obj, get: obj => obj.tooltipEl, set: (obj, value) => { obj.tooltipEl = value; } }, metadata: _metadata }, _tooltipEl_initializers, _tooltipEl_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        emitNodeClick(node) {
+            return { node };
+        }
+        emitLinkClick(link) {
+            return { link };
+        }
+        emitHover(detail) {
+            return detail;
+        }
+        init() {
+            const rect = this.getBoundingClientRect();
+            if (rect.width > 0)
+                this.chartWidth = rect.width;
+            if (rect.height > 0)
+                this.chartHeight = rect.height;
+            if (this.cachedData.nodes.length === 0 && this.data.nodes.length > 0) {
+                this.cachedData = this.data;
+            }
+            this.computeLayout();
+            this.rebuildChart();
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    const entry = entries[0];
+                    if (entry) {
+                        const { width, height } = entry.contentRect;
+                        if (width > 0 && height > 0) {
+                            this.chartWidth = width;
+                            this.chartHeight = height;
+                            this.computeLayout();
+                            this.rebuildChart();
+                        }
+                    }
+                });
+                this.resizeObserver.observe(this);
+            }
+        }
+        onDataChange() {
+            this.cachedData = this.data;
+            this.computeLayout();
+            this.rebuildChart();
+        }
+        onDisplayChange() {
+            this.computeLayout();
+            this.rebuildChart();
+        }
+        computeLayout() {
+            const data = this.cachedData;
+            if (!data || !data.nodes.length || !data.links.length) {
+                this.layoutNodes = [];
+                this.layoutLinks = [];
+                return;
+            }
+            const padding = 40;
+            const labelSpace = this.showLabels ? 80 : 0;
+            const width = this.chartWidth - labelSpace * 2;
+            const height = this.chartHeight - padding * 2;
+            if (width <= 0 || height <= 0)
+                return;
+            // Build node map
+            const nodeMap = new Map();
+            data.nodes.forEach((n, i) => {
+                nodeMap.set(n.id, {
+                    id: n.id,
+                    label: n.label || n.id,
+                    color: n.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+                    x: 0, y: 0,
+                    width: this.nodeWidth,
+                    height: 0,
+                    value: 0,
+                    depth: 0,
+                    sourceLinks: [],
+                    targetLinks: []
+                });
+            });
+            // Build links
+            const links = data.links.map(l => ({
+                source: nodeMap.get(l.source),
+                target: nodeMap.get(l.target),
+                value: l.value,
+                color: l.color || nodeMap.get(l.source)?.color || DEFAULT_COLORS[0],
+                width: 0,
+                sy: 0,
+                ty: 0
+            })).filter(l => l.source && l.target);
+            // Assign links to nodes
+            links.forEach(link => {
+                link.source.sourceLinks.push(link);
+                link.target.targetLinks.push(link);
+            });
+            // Calculate node values
+            nodeMap.forEach(node => {
+                const sourceTotal = node.sourceLinks.reduce((s, l) => s + l.value, 0);
+                const targetTotal = node.targetLinks.reduce((s, l) => s + l.value, 0);
+                node.value = Math.max(sourceTotal, targetTotal);
+            });
+            // Compute depths using BFS
+            this.computeDepths(nodeMap);
+            const nodes = Array.from(nodeMap.values());
+            const maxDepth = Math.max(...nodes.map(n => n.depth));
+            // X positions
+            const xScale = maxDepth > 0 ? (width - this.nodeWidth) / maxDepth : 0;
+            nodes.forEach(node => {
+                node.x = labelSpace + node.depth * xScale;
+            });
+            // Apply alignment
+            this.applyAlignment(nodes, maxDepth, width, labelSpace);
+            // Y positions - compute node heights and stack within each column
+            const columns = this.getColumns(nodes);
+            columns.forEach(column => {
+                const colTotalValue = column.reduce((s, n) => s + n.value, 0);
+                const availableHeight = height - (column.length - 1) * this.nodePadding;
+                const scale = colTotalValue > 0 ? availableHeight / colTotalValue : 0;
+                let y = padding;
+                column.forEach(node => {
+                    node.y = y;
+                    node.height = Math.max(node.value * scale, 2);
+                    y += node.height + this.nodePadding;
+                });
+            });
+            // Iterative relaxation for better node positioning
+            for (let i = 0; i < 32; i++) {
+                this.relaxColumns(columns, height, padding);
+            }
+            // Compute link positions
+            links.forEach(link => {
+                link.width = Math.max(1, (link.value / link.source.value) * link.source.height);
+            });
+            // Sort and position source links
+            nodes.forEach(node => {
+                node.sourceLinks.sort((a, b) => a.target.y - b.target.y);
+                let sy = 0;
+                node.sourceLinks.forEach(link => {
+                    link.sy = node.y + sy;
+                    sy += link.width;
+                });
+                node.targetLinks.sort((a, b) => a.source.y - b.source.y);
+                let ty = 0;
+                node.targetLinks.forEach(link => {
+                    link.width = Math.max(1, (link.value / link.target.value) * link.target.height);
+                    link.ty = node.y + ty;
+                    ty += link.width;
+                });
+            });
+            this.layoutNodes = nodes;
+            this.layoutLinks = links;
+        }
+        computeDepths(nodeMap) {
+            const remaining = new Set(nodeMap.values());
+            let depth = 0;
+            while (remaining.size > 0) {
+                const nextLevel = [];
+                remaining.forEach(node => {
+                    if (node.targetLinks.every(l => !remaining.has(l.source))) {
+                        node.depth = depth;
+                        nextLevel.push(node);
+                    }
+                });
+                if (nextLevel.length === 0) {
+                    // Break cycles - assign remaining to current depth
+                    remaining.forEach(node => {
+                        node.depth = depth;
+                    });
+                    break;
+                }
+                nextLevel.forEach(n => remaining.delete(n));
+                depth++;
+            }
+        }
+        getColumns(nodes) {
+            const maxDepth = Math.max(...nodes.map(n => n.depth), 0);
+            const columns = [];
+            for (let i = 0; i <= maxDepth; i++) {
+                columns.push(nodes.filter(n => n.depth === i));
+            }
+            return columns;
+        }
+        applyAlignment(nodes, maxDepth, width, labelSpace) {
+            if (this.alignment === 'right') {
+                nodes.forEach(node => {
+                    if (node.sourceLinks.length === 0) {
+                        node.depth = maxDepth;
+                        node.x = labelSpace + maxDepth * ((width - this.nodeWidth) / Math.max(maxDepth, 1));
+                    }
+                });
+            }
+            else if (this.alignment === 'center') {
+                nodes.forEach(node => {
+                    if (node.targetLinks.length === 0 && node.sourceLinks.length === 0) {
+                        node.depth = Math.floor(maxDepth / 2);
+                        node.x = labelSpace + node.depth * ((width - this.nodeWidth) / Math.max(maxDepth, 1));
+                    }
+                });
+            }
+            else if (this.alignment === 'justify') {
+                nodes.forEach(node => {
+                    if (node.sourceLinks.length === 0 && maxDepth > 0) {
+                        node.depth = maxDepth;
+                        node.x = labelSpace + maxDepth * ((width - this.nodeWidth) / maxDepth);
+                    }
+                });
+            }
+        }
+        relaxColumns(columns, height, padding) {
+            // Forward pass - push nodes based on sources
+            columns.forEach(column => {
+                column.forEach(node => {
+                    if (node.targetLinks.length > 0) {
+                        const avg = node.targetLinks.reduce((s, l) => s + l.source.y, 0) / node.targetLinks.length;
+                        const delta = (avg - node.y) * 0.5;
+                        node.y += delta;
+                    }
+                });
+                this.resolveOverlaps(column, height, padding);
+            });
+            // Backward pass - push nodes based on targets
+            for (let i = columns.length - 1; i >= 0; i--) {
+                columns[i].forEach(node => {
+                    if (node.sourceLinks.length > 0) {
+                        const avg = node.sourceLinks.reduce((s, l) => s + l.target.y, 0) / node.sourceLinks.length;
+                        const delta = (avg - node.y) * 0.5;
+                        node.y += delta;
+                    }
+                });
+                this.resolveOverlaps(columns[i], height, padding);
+            }
+        }
+        resolveOverlaps(column, height, padding) {
+            column.sort((a, b) => a.y - b.y);
+            let y0 = padding;
+            column.forEach(node => {
+                if (node.y < y0) {
+                    node.y = y0;
+                }
+                y0 = node.y + node.height + this.nodePadding;
+            });
+            // Push up if exceeding bottom
+            const lastNode = column[column.length - 1];
+            if (lastNode) {
+                const overflow = lastNode.y + lastNode.height - (height + padding);
+                if (overflow > 0) {
+                    lastNode.y -= overflow;
+                    for (let i = column.length - 2; i >= 0; i--) {
+                        const maxY = column[i + 1].y - column[i].height - this.nodePadding;
+                        if (column[i].y > maxY) {
+                            column[i].y = maxY;
+                        }
+                    }
+                }
+            }
+        }
+        getLinkPath(link) {
+            const x0 = link.source.x + link.source.width;
+            const x1 = link.target.x;
+            const xi = (x0 + x1) / 2;
+            const y0 = link.sy + link.width / 2;
+            const y1 = link.ty + link.width / 2;
+            return `M${x0},${y0} C${xi},${y0} ${xi},${y1} ${x1},${y1}`;
+        }
+        handleSvgClick(e) {
+            const target = e.target;
+            const el = target.closest('[data-node-id]');
+            const linkEl = target.closest('[data-link-index]');
+            if (el) {
+                const nodeId = el.dataset.nodeId;
+                const originalNode = this.cachedData.nodes.find(n => n.id === nodeId);
+                if (originalNode)
+                    this.emitNodeClick(originalNode);
+            }
+            else if (linkEl) {
+                const index = parseInt(linkEl.dataset.linkIndex, 10);
+                const originalLink = this.cachedData.links[index];
+                if (originalLink)
+                    this.emitLinkClick(originalLink);
+            }
+        }
+        handleSvgMouseMove(e) {
+            const target = e.target;
+            const nodeEl = target.closest('[data-node-id]');
+            const linkEl = target.closest('[data-link-index]');
+            const tooltip = this.tooltipEl;
+            this.chartEl;
+            if (nodeEl) {
+                const nodeId = nodeEl.dataset.nodeId;
+                const node = this.layoutNodes.find(n => n.id === nodeId);
+                if (!node)
+                    return;
+                // Update hover highlight
+                if (this.hoveredNodeId !== nodeId || this.hoveredLinkIndex !== null) {
+                    this.hoveredNodeId = nodeId;
+                    this.hoveredLinkIndex = null;
+                    this.applyHoverClasses();
+                }
+                // Update tooltip
+                if (tooltip) {
+                    tooltip.querySelector('.sankey__tooltip-label').textContent = node.label;
+                    tooltip.querySelector('.sankey__tooltip-value').textContent = `Value: ${node.value.toLocaleString()}`;
+                    this.positionTooltip(e);
+                    tooltip.classList.add('sankey__tooltip--visible');
+                }
+                const originalNode = this.cachedData.nodes.find(n => n.id === nodeId);
+                if (originalNode)
+                    this.emitHover({ type: 'node', item: originalNode });
+            }
+            else if (linkEl) {
+                const index = parseInt(linkEl.dataset.linkIndex, 10);
+                const link = this.layoutLinks[index];
+                if (!link)
+                    return;
+                // Update hover highlight
+                if (this.hoveredLinkIndex !== index || this.hoveredNodeId !== null) {
+                    this.hoveredLinkIndex = index;
+                    this.hoveredNodeId = null;
+                    this.applyHoverClasses();
+                }
+                // Update tooltip
+                if (tooltip) {
+                    tooltip.querySelector('.sankey__tooltip-label').textContent = `${link.source.label} \u2192 ${link.target.label}`;
+                    tooltip.querySelector('.sankey__tooltip-value').textContent = `Value: ${link.value.toLocaleString()}`;
+                    this.positionTooltip(e);
+                    tooltip.classList.add('sankey__tooltip--visible');
+                }
+                const originalLink = this.cachedData.links[index];
+                if (originalLink)
+                    this.emitHover({ type: 'link', item: originalLink });
+            }
+            else {
+                this.clearHover();
+            }
+        }
+        handleSvgMouseLeave() {
+            this.clearHover();
+        }
+        clearHover() {
+            if (this.hoveredNodeId !== null || this.hoveredLinkIndex !== null) {
+                this.hoveredNodeId = null;
+                this.hoveredLinkIndex = null;
+                this.applyHoverClasses();
+                this.emitHover(null);
+            }
+            const tooltip = this.tooltipEl;
+            if (tooltip)
+                tooltip.classList.remove('sankey__tooltip--visible');
+        }
+        positionTooltip(e) {
+            const tooltip = this.tooltipEl;
+            if (!tooltip)
+                return;
+            const rect = this.getBoundingClientRect();
+            tooltip.style.left = `${e.clientX - rect.left + 10}px`;
+            tooltip.style.top = `${e.clientY - rect.top - 10}px`;
+        }
+        applyHoverClasses() {
+            const chart = this.chartEl;
+            if (!chart)
+                return;
+            const svg = chart.querySelector('svg');
+            if (!svg)
+                return;
+            const isDimmed = this.hoveredNodeId !== null || this.hoveredLinkIndex !== null;
+            const container = svg.closest('.sankey');
+            if (container) {
+                container.classList.toggle('sankey--dimmed', isDimmed);
+            }
+            // Update node highlights
+            const nodeGroups = svg.querySelectorAll('[data-node-id]');
+            nodeGroups.forEach(g => {
+                const nodeId = g.dataset.nodeId;
+                const highlighted = this.isNodeHighlighted(nodeId);
+                g.classList.toggle('sankey__node--highlighted', highlighted);
+            });
+            // Update link highlights
+            const linkGroups = svg.querySelectorAll('[data-link-index]');
+            linkGroups.forEach(g => {
+                const index = parseInt(g.dataset.linkIndex, 10);
+                const highlighted = this.isLinkHighlighted(index);
+                g.classList.toggle('sankey__link--highlighted', highlighted);
+            });
+        }
+        isNodeHighlighted(nodeId) {
+            if (this.hoveredNodeId === null && this.hoveredLinkIndex === null)
+                return false;
+            if (this.hoveredNodeId === nodeId)
+                return true;
+            if (this.hoveredLinkIndex !== null) {
+                const link = this.layoutLinks[this.hoveredLinkIndex];
+                return link?.source.id === nodeId || link?.target.id === nodeId;
+            }
+            if (this.hoveredNodeId) {
+                return this.layoutLinks.some(l => (l.source.id === this.hoveredNodeId && l.target.id === nodeId) ||
+                    (l.target.id === this.hoveredNodeId && l.source.id === nodeId));
+            }
+            return false;
+        }
+        isLinkHighlighted(index) {
+            if (this.hoveredNodeId === null && this.hoveredLinkIndex === null)
+                return false;
+            if (this.hoveredLinkIndex === index)
+                return true;
+            if (this.hoveredNodeId) {
+                const link = this.layoutLinks[index];
+                return link?.source.id === this.hoveredNodeId || link?.target.id === this.hoveredNodeId;
+            }
+            return false;
+        }
+        rebuildChart() {
+            const chart = this.chartEl;
+            if (!chart) {
+                requestAnimationFrame(() => this.rebuildChart());
+                return;
+            }
+            const hasData = this.layoutNodes.length > 0;
+            if (!hasData) {
+                chart.innerHTML = '';
+                return;
+            }
+            chart.innerHTML = this.buildSVG();
+        }
+        buildSVG() {
+            const nodes = this.layoutNodes;
+            const links = this.layoutLinks;
+            let svg = `<svg class="sankey__svg" viewBox="0 0 ${this.chartWidth} ${this.chartHeight}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Sankey diagram">`;
+            // Links
+            svg += `<g class="sankey__links">`;
+            for (let i = 0; i < links.length; i++) {
+                const link = links[i];
+                const path = escapeHTML(this.getLinkPath(link));
+                const color = escapeHTML(link.color);
+                svg += `<g class="sankey__link" data-link-index="${i}">`;
+                svg += `<path d="${path}" stroke="${color}" stroke-width="${Math.max(1, link.width)}"/>`;
+                svg += `</g>`;
+            }
+            svg += `</g>`;
+            // Nodes
+            svg += `<g class="sankey__nodes">`;
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                const color = escapeHTML(node.color);
+                const nodeId = escapeHTML(node.id);
+                svg += `<g class="sankey__node" data-node-id="${nodeId}">`;
+                svg += `<rect x="${node.x}" y="${node.y}" width="${node.width}" height="${Math.max(node.height, 2)}" fill="${color}"/>`;
+                if (this.showLabels) {
+                    const label = escapeHTML(node.label);
+                    if (node.depth === 0) {
+                        svg += `<text class="sankey__label" x="${node.x - 6}" y="${node.y + node.height / 2}" text-anchor="end">${label}</text>`;
+                    }
+                    else {
+                        svg += `<text class="sankey__label" x="${node.x + node.width + 6}" y="${node.y + node.height / 2}" text-anchor="start">${label}</text>`;
+                    }
+                }
+                if (this.showValues && node.height > 12) {
+                    const value = escapeHTML(node.value.toLocaleString());
+                    if (node.depth === 0) {
+                        svg += `<text class="sankey__value" x="${node.x - 6}" y="${node.y + node.height / 2 + 12}" text-anchor="end">${value}</text>`;
+                    }
+                    else {
+                        svg += `<text class="sankey__value" x="${node.x + node.width + 6}" y="${node.y + node.height / 2 + 12}" text-anchor="start">${value}</text>`;
+                    }
+                }
+                svg += `</g>`;
+            }
+            svg += `</g>`;
+            svg += `</svg>`;
+            return svg;
+        }
+        renderContent() {
+            return html /*html*/ `
+      <div class="sankey"
+           role="img"
+           aria-label="Sankey diagram"
+           @click=${(e) => this.handleSvgClick(e)}
+           @mousemove=${(e) => this.handleSvgMouseMove(e)}
+           @mouseleave=${() => this.handleSvgMouseLeave()}>
+        <div class="sankey__chart"></div>
+        <div class="sankey__tooltip">
+          <div class="sankey__tooltip-label"></div>
+          <div class="sankey__tooltip-value"></div>
+        </div>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        cleanup() {
+            this.resizeObserver?.disconnect();
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceSankey };
+//# sourceMappingURL=snice-sankey.js.map