snice 4.8.0 → 4.9.0

package/dist/cdn/treemap/README.md

@@ -0,0 +1,27 @@
+# Snice Treemap - CDN Build
+
+CDN build of the Snice treemap component. Requires the Snice runtime (`snice-runtime.min.js`) to be loaded first.
+
+## Usage
+
+```html
+<script src="snice-runtime.min.js"></script>
+<script src="snice-treemap.min.js"></script>
+<snice-treemap></snice-treemap>
+```
+
+## Size
+- Minified: 15.6 KB
+- Gzipped: 5.2 KB
+
+## Theme
+For proper styling, link the Snice theme CSS:
+```html
+<link rel="stylesheet" href="https://unpkg.com/snice/dist/components/theme/theme.css">
+```
+
+## Documentation
+https://snice.dev
+
+## License
+MIT

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

@@ -0,0 +1,522 @@
+/*!
+ * 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-treemap.min.js");}
+var SniceTreemap = (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%}.treemap{position:relative;width:100%;overflow:hidden}.treemap__svg{display:block;width:100%;height:100%}.treemap__rect{cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms) ease}.treemap__rect:hover{opacity:.85}.treemap__rect-stroke{fill:none;stroke:var(--snice-color-background,rgb(255 255 255));stroke-width:2px;pointer-events:none}.treemap__label{fill:rgb(255 255 255);font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-weight:var(--snice-font-weight-medium,500);pointer-events:none;text-anchor:middle;dominant-baseline:central}.treemap__value{fill:rgb(255 255 255 / 0.85);font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-weight:var(--snice-font-weight-medium,500);pointer-events:none;text-anchor:middle;dominant-baseline:central;font-size:.75rem}.treemap__breadcrumbs{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);padding:var(--snice-spacing-xs,.5rem) 0;font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));min-height:2rem}.treemap__breadcrumb{background:0 0;border:none;padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-2xs,.25rem);font-family:inherit;font-size:inherit;color:var(--snice-color-primary,rgb(37 99 235));cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);transition:background var(--snice-transition-fast, 150ms) ease}.treemap__breadcrumb:hover{background:var(--snice-color-background-element,rgb(252 251 249))}.treemap__breadcrumb--current{color:var(--snice-color-text,rgb(23 23 23));cursor:default;font-weight:var(--snice-font-weight-semibold,600)}.treemap__breadcrumb--current:hover{background:0 0}.treemap__separator{color:var(--snice-color-text-tertiary,rgb(115 115 115));user-select:none}.treemap__tooltip{position:absolute;pointer-events:none;background:var(--snice-color-text,rgb(23 23 23));color:var(--snice-color-text-inverse,rgb(250 250 250));padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,.25rem);font-size:.75rem;white-space:nowrap;z-index:10;opacity:0;transition:opacity var(--snice-transition-fast, 150ms) ease;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));transform:translate(-50%,-100%);margin-top:-.5rem}.treemap__tooltip--visible{opacity:1}:host([animation]) .treemap__rect{transition:x var(--snice-transition-medium, 250ms) ease,y var(--snice-transition-medium, 250ms) ease,width var(--snice-transition-medium, 250ms) ease,height var(--snice-transition-medium, 250ms) ease,opacity var(--snice-transition-fast, 150ms) ease}";
+
+  const COLOR_SCHEMES = {
+      default: ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac'],
+      blue: ['#08519c', '#3182bd', '#6baed6', '#9ecae1', '#2171b5', '#4292c6', '#6baed6', '#c6dbef'],
+      green: ['#006d2c', '#31a354', '#74c476', '#a1d99b', '#238b45', '#41ab5d', '#74c476', '#c7e9c0'],
+      purple: ['#54278f', '#756bb1', '#9e9ac8', '#bcbddc', '#6a51a3', '#807dba', '#9e9ac8', '#dadaeb'],
+      orange: ['#d94701', '#fd8d3c', '#fdae6b', '#fdd0a2', '#e6550d', '#f16913', '#fd8d3c', '#fee6ce'],
+      warm: ['#b30000', '#e34a33', '#fc8d59', '#fdcc8a', '#d7301f', '#ef6548', '#fc8d59', '#fef0d9'],
+      cool: ['#016c59', '#1c9099', '#67a9cf', '#a6bddb', '#02818a', '#3690c0', '#67a9cf', '#d0d1e6'],
+      rainbow: ['#e41a1c', '#ff7f00', '#ffff33', '#4daf4a', '#377eb8', '#984ea3', '#a65628', '#f781bf'],
+  };
+  function sumValues(node) {
+      if (node.children && node.children.length > 0) {
+          return node.children.reduce((sum, child) => sum + sumValues(child), 0);
+      }
+      return Math.max(0, node.value);
+  }
+  function squarify(children, x, y, w, h, depth, colorOffset, padding) {
+      const totalValue = children.reduce((sum, c) => sum + sumValues(c), 0);
+      if (totalValue <= 0 || w <= 0 || h <= 0)
+          return [];
+      const sorted = [...children].sort((a, b) => sumValues(b) - sumValues(a));
+      const rects = [];
+      let remaining = sorted.slice();
+      let cx = x;
+      let cy = y;
+      let cw = w;
+      let ch = h;
+      while (remaining.length > 0) {
+          const isWide = cw >= ch;
+          const side = isWide ? ch : cw;
+          const totalRemaining = remaining.reduce((s, c) => s + sumValues(c), 0);
+          const row = [];
+          let rowSum = 0;
+          let worstRatio = Infinity;
+          for (const child of remaining) {
+              const childVal = sumValues(child);
+              const testSum = rowSum + childVal;
+              const testRow = [...row, child];
+              const rowArea = (testSum / totalRemaining) * (cw * ch);
+              const rowSide = rowArea / side;
+              let testWorst = 0;
+              for (const r of testRow) {
+                  const rArea = (sumValues(r) / testSum) * rowArea;
+                  const rSide = rArea / rowSide;
+                  const ratio = Math.max(rSide / rowSide, rowSide / rSide);
+                  testWorst = Math.max(testWorst, ratio);
+              }
+              if (testWorst <= worstRatio || row.length === 0) {
+                  row.push(child);
+                  rowSum = testSum;
+                  worstRatio = testWorst;
+              }
+              else {
+                  break;
+              }
+          }
+          const rowArea = (rowSum / totalRemaining) * (cw * ch);
+          const rowSide = side > 0 ? rowArea / side : 0;
+          let offset = 0;
+          for (let i = 0; i < row.length; i++) {
+              const node = row[i];
+              const nodeVal = sumValues(node);
+              const nodeSize = rowSum > 0 ? (nodeVal / rowSum) * side : 0;
+              let rx, ry, rw, rh;
+              if (isWide) {
+                  rx = cx;
+                  ry = cy + offset;
+                  rw = rowSide;
+                  rh = nodeSize;
+              }
+              else {
+                  rx = cx + offset;
+                  ry = cy;
+                  rw = nodeSize;
+                  rh = rowSide;
+              }
+              const colorIndex = colorOffset + rects.length + i;
+              const px = Math.min(padding, rw / 4);
+              const py = Math.min(padding, rh / 4);
+              rects.push({
+                  x: rx + px,
+                  y: ry + py,
+                  width: Math.max(0, rw - px * 2),
+                  height: Math.max(0, rh - py * 2),
+                  node,
+                  depth,
+                  colorIndex,
+              });
+              offset += nodeSize;
+          }
+          if (isWide) {
+              cx += rowSide;
+              cw -= rowSide;
+          }
+          else {
+              cy += rowSide;
+              ch -= rowSide;
+          }
+          remaining = remaining.slice(row.length);
+      }
+      return rects;
+  }
+  let SniceTreemap = (() => {
+      let _classDecorators = [snice.element('snice-treemap')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _data_decorators;
+      let _data_initializers = [];
+      let _data_extraInitializers = [];
+      let _showLabels_decorators;
+      let _showLabels_initializers = [];
+      let _showLabels_extraInitializers = [];
+      let _showValues_decorators;
+      let _showValues_initializers = [];
+      let _showValues_extraInitializers = [];
+      let _colorScheme_decorators;
+      let _colorScheme_initializers = [];
+      let _colorScheme_extraInitializers = [];
+      let _padding_decorators;
+      let _padding_initializers = [];
+      let _padding_extraInitializers = [];
+      let _animation_decorators;
+      let _animation_initializers = [];
+      let _animation_extraInitializers = [];
+      let _containerEl_decorators;
+      let _containerEl_initializers = [];
+      let _containerEl_extraInitializers = [];
+      let _chartEl_decorators;
+      let _chartEl_initializers = [];
+      let _chartEl_extraInitializers = [];
+      let _tooltipEl_decorators;
+      let _tooltipEl_initializers = [];
+      let _tooltipEl_extraInitializers = [];
+      let _breadcrumbsEl_decorators;
+      let _breadcrumbsEl_initializers = [];
+      let _breadcrumbsEl_extraInitializers = [];
+      let _emitClick_decorators;
+      let _emitHover_decorators;
+      let _emitDrill_decorators;
+      let _init_decorators;
+      let _onDataChange_decorators;
+      let _onDisplayChange_decorators;
+      let _cleanup_decorators;
+      let _renderContent_decorators;
+      let _componentStyles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              this.data = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _data_initializers, { label: '', value: 0 }));
+              this.showLabels = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _showLabels_initializers, true));
+              this.showValues = (__runInitializers(this, _showLabels_extraInitializers), __runInitializers(this, _showValues_initializers, false));
+              this.colorScheme = (__runInitializers(this, _showValues_extraInitializers), __runInitializers(this, _colorScheme_initializers, 'default'));
+              this.padding = (__runInitializers(this, _colorScheme_extraInitializers), __runInitializers(this, _padding_initializers, 2));
+              this.animation = (__runInitializers(this, _padding_extraInitializers), __runInitializers(this, _animation_initializers, true));
+              this.containerEl = (__runInitializers(this, _animation_extraInitializers), __runInitializers(this, _containerEl_initializers, void 0));
+              this.chartEl = (__runInitializers(this, _containerEl_extraInitializers), __runInitializers(this, _chartEl_initializers, void 0));
+              this.tooltipEl = (__runInitializers(this, _chartEl_extraInitializers), __runInitializers(this, _tooltipEl_initializers, void 0));
+              this.breadcrumbsEl = (__runInitializers(this, _tooltipEl_extraInitializers), __runInitializers(this, _breadcrumbsEl_initializers, void 0));
+              // Plain private fields — no @property, no re-renders
+              this._drillPathState = (__runInitializers(this, _breadcrumbsEl_extraInitializers), []);
+              this._tooltipText = '';
+              this._tooltipX = 0;
+              this._tooltipY = 0;
+              this._tooltipVisible = false;
+              this._width = 600;
+              this._height = 400;
+              this._resizeObserver = null;
+              this._rects = [];
+              this._cachedData = { label: '', value: 0 };
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _data_decorators = [snice.property({ type: Object, attribute: false })];
+              _showLabels_decorators = [snice.property({ type: Boolean, attribute: 'show-labels' })];
+              _showValues_decorators = [snice.property({ type: Boolean, attribute: 'show-values' })];
+              _colorScheme_decorators = [snice.property({ attribute: 'color-scheme' })];
+              _padding_decorators = [snice.property({ type: Number })];
+              _animation_decorators = [snice.property({ type: Boolean })];
+              _containerEl_decorators = [snice.query('.treemap')];
+              _chartEl_decorators = [snice.query('.treemap__chart')];
+              _tooltipEl_decorators = [snice.query('.treemap__tooltip')];
+              _breadcrumbsEl_decorators = [snice.query('.treemap__breadcrumbs')];
+              _emitClick_decorators = [snice.dispatch('treemap-click', { bubbles: true, composed: true })];
+              _emitHover_decorators = [snice.dispatch('treemap-hover', { bubbles: true, composed: true })];
+              _emitDrill_decorators = [snice.dispatch('treemap-drill', { bubbles: true, composed: true })];
+              _init_decorators = [snice.ready()];
+              _onDataChange_decorators = [snice.watch('data')];
+              _onDisplayChange_decorators = [snice.watch('showLabels', 'showValues', 'colorScheme', 'padding', 'animation')];
+              _cleanup_decorators = [snice.dispose()];
+              _renderContent_decorators = [snice.render({ once: true })];
+              _componentStyles_decorators = [snice.styles()];
+              __esDecorate(this, null, _emitClick_decorators, { kind: "method", name: "emitClick", static: false, private: false, access: { has: obj => "emitClick" in obj, get: obj => obj.emitClick }, 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, _emitDrill_decorators, { kind: "method", name: "emitDrill", static: false, private: false, access: { has: obj => "emitDrill" in obj, get: obj => obj.emitDrill }, 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, _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(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(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, _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, _colorScheme_decorators, { kind: "field", name: "colorScheme", static: false, private: false, access: { has: obj => "colorScheme" in obj, get: obj => obj.colorScheme, set: (obj, value) => { obj.colorScheme = value; } }, metadata: _metadata }, _colorScheme_initializers, _colorScheme_extraInitializers);
+              __esDecorate(null, null, _padding_decorators, { kind: "field", name: "padding", static: false, private: false, access: { has: obj => "padding" in obj, get: obj => obj.padding, set: (obj, value) => { obj.padding = value; } }, metadata: _metadata }, _padding_initializers, _padding_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, _containerEl_decorators, { kind: "field", name: "containerEl", static: false, private: false, access: { has: obj => "containerEl" in obj, get: obj => obj.containerEl, set: (obj, value) => { obj.containerEl = value; } }, metadata: _metadata }, _containerEl_initializers, _containerEl_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, null, _breadcrumbsEl_decorators, { kind: "field", name: "breadcrumbsEl", static: false, private: false, access: { has: obj => "breadcrumbsEl" in obj, get: obj => obj.breadcrumbsEl, set: (obj, value) => { obj.breadcrumbsEl = value; } }, metadata: _metadata }, _breadcrumbsEl_initializers, _breadcrumbsEl_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);
+          }
+          get drillPath() {
+              return this._drillPathState;
+          }
+          emitClick(node, depth) {
+              return { node, depth };
+          }
+          emitHover(detail) {
+              return detail;
+          }
+          emitDrill(node, path) {
+              return { node, path };
+          }
+          init() {
+              this._cachedData = this.data;
+              this._resizeObserver = new ResizeObserver((entries) => {
+                  for (const entry of entries) {
+                      const cr = entry.contentRect;
+                      if (cr.width > 0 && cr.height > 0) {
+                          this._width = cr.width;
+                          this._height = cr.height;
+                      }
+                      else if (cr.width > 0) {
+                          this._width = cr.width;
+                          this._height = cr.width * 0.667;
+                      }
+                  }
+                  this.rebuildChart();
+              });
+              this._resizeObserver.observe(this);
+              this.rebuildChart();
+          }
+          onDataChange() {
+              this._cachedData = this.data;
+              this._drillPathState = [];
+              this.rebuildChart();
+          }
+          onDisplayChange() {
+              this.rebuildChart();
+          }
+          cleanup() {
+              this._resizeObserver?.disconnect();
+              this._resizeObserver = null;
+          }
+          drillDown(node) {
+              if (node.children && node.children.length > 0) {
+                  this._drillPathState = [...this._drillPathState, node];
+                  this.emitDrill(node, this._drillPathState);
+                  this.rebuildChart();
+              }
+          }
+          drillUp() {
+              if (this._drillPathState.length > 0) {
+                  this._drillPathState = this._drillPathState.slice(0, -1);
+                  const current = this._drillPathState.length > 0
+                      ? this._drillPathState[this._drillPathState.length - 1]
+                      : this._cachedData;
+                  this.emitDrill(current, this._drillPathState);
+                  this.rebuildChart();
+              }
+          }
+          drillToRoot() {
+              this._drillPathState = [];
+              this.emitDrill(this._cachedData, []);
+              this.rebuildChart();
+          }
+          getCurrentNode() {
+              if (this._drillPathState.length > 0) {
+                  return this._drillPathState[this._drillPathState.length - 1];
+              }
+              return this._cachedData;
+          }
+          getColor(index) {
+              const colors = COLOR_SCHEMES[this.colorScheme] || COLOR_SCHEMES.default;
+              return colors[index % colors.length];
+          }
+          computeRects() {
+              const current = this.getCurrentNode();
+              const children = current.children;
+              if (!children || children.length === 0)
+                  return [];
+              return squarify(children, 0, 0, this._width, this._height, 0, 0, this.padding);
+          }
+          canFitLabel(rect) {
+              return rect.width > 30 && rect.height > 16;
+          }
+          canFitValue(rect) {
+              return rect.width > 30 && rect.height > 30;
+          }
+          getLabelFontSize(rect) {
+              const maxByWidth = rect.width / 8;
+              const maxByHeight = rect.height / 3;
+              return Math.min(Math.max(Math.min(maxByWidth, maxByHeight), 8), 16);
+          }
+          /** Rebuild the entire SVG chart via innerHTML on the chart container */
+          rebuildChart() {
+              if (!this.chartEl) {
+                  requestAnimationFrame(() => this.rebuildChart());
+                  return;
+              }
+              this._rects = this.computeRects();
+              let svg = '';
+              svg += `<svg class="treemap__svg" viewBox="0 0 ${this._width} ${this._height}" preserveAspectRatio="none">`;
+              for (let i = 0; i < this._rects.length; i++) {
+                  svg += this.buildRectGroup(this._rects[i], i);
+              }
+              svg += '</svg>';
+              this.chartEl.innerHTML = svg;
+              // Attach event listeners to rects
+              const rectEls = this.chartEl.querySelectorAll('.treemap__rect');
+              rectEls.forEach((el) => {
+                  const index = Number(el.dataset.index);
+                  const rect = this._rects[index];
+                  if (!rect)
+                      return;
+                  el.addEventListener('click', (e) => {
+                      e.stopPropagation();
+                      this.emitClick(rect.node, rect.depth);
+                      if (rect.node.children && rect.node.children.length > 0) {
+                          this.drillDown(rect.node);
+                      }
+                  });
+                  el.addEventListener('mouseenter', () => {
+                      this._tooltipText = `${rect.node.label}: ${sumValues(rect.node).toLocaleString()}`;
+                      this._tooltipX = rect.x + rect.width / 2;
+                      this._tooltipY = rect.y;
+                      this._tooltipVisible = true;
+                      this.updateTooltipDOM();
+                      this.emitHover({ node: rect.node, depth: rect.depth });
+                  });
+                  el.addEventListener('mouseleave', () => {
+                      this._tooltipVisible = false;
+                      this.updateTooltipDOM();
+                      this.emitHover(null);
+                  });
+              });
+              this.rebuildBreadcrumbs();
+          }
+          buildRectGroup(rect, index) {
+              const color = rect.node.color || this.getColor(rect.colorIndex);
+              const showLabel = this.showLabels && this.canFitLabel(rect);
+              const showValue = this.showValues && this.canFitValue(rect);
+              const fontSize = this.getLabelFontSize(rect);
+              const cx = rect.x + rect.width / 2;
+              const labelY = showValue ? rect.y + rect.height / 2 - fontSize * 0.4 : rect.y + rect.height / 2;
+              const valueY = showLabel ? rect.y + rect.height / 2 + fontSize * 0.8 : rect.y + rect.height / 2;
+              let parts = '';
+              parts += `<rect class="treemap__rect" data-index="${index}" x="${rect.x}" y="${rect.y}" width="${rect.width}" height="${rect.height}" fill="${color}" />`;
+              parts += `<rect class="treemap__rect-stroke" x="${rect.x}" y="${rect.y}" width="${rect.width}" height="${rect.height}" />`;
+              if (showLabel) {
+                  parts += `<text class="treemap__label" x="${cx}" y="${labelY}" style="font-size: ${fontSize}px">${rect.node.label}</text>`;
+              }
+              if (showValue) {
+                  parts += `<text class="treemap__value" x="${cx}" y="${valueY}">${sumValues(rect.node).toLocaleString()}</text>`;
+              }
+              return parts;
+          }
+          /** Update tooltip element directly */
+          updateTooltipDOM() {
+              const tooltip = this.tooltipEl;
+              if (!tooltip)
+                  return;
+              if (!this._tooltipVisible) {
+                  tooltip.classList.remove('treemap__tooltip--visible');
+                  return;
+              }
+              const tooltipLeft = `${(this._tooltipX / this._width) * 100}%`;
+              const tooltipTop = `${(this._tooltipY / this._height) * 100}%`;
+              tooltip.style.left = tooltipLeft;
+              tooltip.style.top = tooltipTop;
+              tooltip.textContent = this._tooltipText;
+              tooltip.classList.add('treemap__tooltip--visible');
+          }
+          /** Rebuild breadcrumbs via innerHTML */
+          rebuildBreadcrumbs() {
+              const el = this.breadcrumbsEl;
+              if (!el)
+                  return;
+              if (this._drillPathState.length === 0) {
+                  el.innerHTML = '';
+                  el.style.display = 'none';
+                  return;
+              }
+              el.style.display = '';
+              let html = '';
+              html += `<button class="treemap__breadcrumb" data-drill-root>${this._cachedData.label || 'Root'}</button>`;
+              for (let i = 0; i < this._drillPathState.length; i++) {
+                  const node = this._drillPathState[i];
+                  const isLast = i === this._drillPathState.length - 1;
+                  html += '<span class="treemap__separator">/</span>';
+                  if (isLast) {
+                      html += `<span class="treemap__breadcrumb treemap__breadcrumb--current">${node.label}</span>`;
+                  }
+                  else {
+                      html += `<button class="treemap__breadcrumb" data-drill-index="${i}">${node.label}</button>`;
+                  }
+              }
+              el.innerHTML = html;
+              // Attach breadcrumb event listeners
+              const rootBtn = el.querySelector('[data-drill-root]');
+              if (rootBtn) {
+                  rootBtn.addEventListener('click', () => this.drillToRoot());
+              }
+              el.querySelectorAll('[data-drill-index]').forEach((btn) => {
+                  const idx = Number(btn.dataset.drillIndex);
+                  btn.addEventListener('click', () => {
+                      const node = this._drillPathState[idx];
+                      this._drillPathState = this._drillPathState.slice(0, idx + 1);
+                      this.emitDrill(node, this._drillPathState);
+                      this.rebuildChart();
+                  });
+              });
+          }
+          renderContent() {
+              const dataLabel = this._cachedData?.label || 'Treemap';
+              return snice.html /*html*/ `
+      <div class="treemap__breadcrumbs" style="display: none"></div>
+      <div class="treemap" role="img" aria-label="${dataLabel}">
+        <div class="treemap__chart"></div>
+        <div class="treemap__tooltip"></div>
+      </div>
+    `;
+          }
+          componentStyles() {
+              return snice.css /*css*/ `${cssContent}`;
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceTreemap = SniceTreemap;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-treemap.js.map