snice 4.8.0 → 4.9.0

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

@@ -0,0 +1,679 @@
+/*!
+ * snice v4.8.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-sankey.min.js");}
+var SniceSankey = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  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 = [snice.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 = [snice.property({ type: Object, attribute: false })];
+              _nodeWidth_decorators = [snice.property({ type: Number, attribute: 'node-width' })];
+              _nodePadding_decorators = [snice.property({ type: Number, attribute: 'node-padding' })];
+              _alignment_decorators = [snice.property()];
+              _showLabels_decorators = [snice.property({ type: Boolean, attribute: 'show-labels' })];
+              _showValues_decorators = [snice.property({ type: Boolean, attribute: 'show-values' })];
+              _animation_decorators = [snice.property({ type: Boolean })];
+              _chartEl_decorators = [snice.query('.sankey__chart')];
+              _tooltipEl_decorators = [snice.query('.sankey__tooltip')];
+              _emitNodeClick_decorators = [snice.dispatch('sankey-node-click', { bubbles: true, composed: true })];
+              _emitLinkClick_decorators = [snice.dispatch('sankey-link-click', { bubbles: true, composed: true })];
+              _emitHover_decorators = [snice.dispatch('sankey-hover', { bubbles: true, composed: true })];
+              _init_decorators = [snice.ready()];
+              _onDataChange_decorators = [snice.watch('data')];
+              _onDisplayChange_decorators = [snice.watch('showLabels', 'showValues', 'animation', 'alignment')];
+              _renderContent_decorators = [snice.render({ once: true })];
+              _componentStyles_decorators = [snice.styles()];
+              _cleanup_decorators = [snice.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 snice.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 snice.css /*css*/ `${cssContent}`;
+          }
+          cleanup() {
+              this.resizeObserver?.disconnect();
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceSankey = SniceSankey;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-sankey.js.map