@fusedashlabs/widgets 0.2.0 → 0.4.0

package/dist/components/sankey-chart/element/ui9000-sankey-chart.js

@@ -1,13 +1,17 @@
-import { LitElement, nothing, html } from "lit";
+import { nothing, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { readThemeFromElement } from "../../../context/widget-context.js";
+import { renderPaletteLegend } from "../../../element/chart-legend-render.js";
+import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { parseJsonAttr, getSankeyDimensions } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
 import { renderSankeyChart } from "../render/draw.js";
 import { sankeyStyles } from "./styles.js";
 import { normalizeSankeyData } from "../lib/normalize.js";
 import { buildColorRanges } from "../lib/domain.js";
-import { formatCapitalizedWords, formatSankeyValue } from "../lib/format.js";
+import { formatCapitalizedWords } from "../../../utils/format-text.js";
+import { formatSankeyValue } from "../lib/format.js";
+import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -25,10 +29,9 @@ const EMPTY_VIEW = {
   targetLabel: "",
   colorRanges: []
 };
-let Ui9000SankeyChart = class extends LitElement {
+let Ui9000SankeyChart = class extends Ui9000ChartElement {
   constructor() {
     super(...arguments);
-    this.dataJson = "[]";
     this.showLegend = true;
     this.showTooltip = true;
     this.sourceLabel = "";
@@ -58,6 +61,12 @@ let Ui9000SankeyChart = class extends LitElement {
   parseData() {
     return normalizeSankeyData(parseJsonAttr(this.dataJson, []));
   }
+  renderLegend() {
+    if (!this.showLegend || this._view.empty || !this._view.colorRanges.length) {
+      return nothing;
+    }
+    return renderPaletteLegend(this._view.colorRanges.map((range) => range.color));
+  }
   draw() {
     var _a;
     const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
@@ -110,48 +119,42 @@ let Ui9000SankeyChart = class extends LitElement {
     this._tooltip = null;
   }
   render() {
-    const { empty, circular, sourceLabel, targetLabel, colorRanges } = this._view;
+    const { empty, circular, sourceLabel, targetLabel } = this._view;
     const showHeaders = !empty && Boolean(sourceLabel || targetLabel);
     return html`
-      ${showHeaders ? html`<div class="axis-labels" part="axis-labels">
-            <div>${sourceLabel}</div>
-            <div>${targetLabel}</div>
-          </div>` : nothing}
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(this.headerTitle())}
+        <div class="widget-body">
+          ${this.renderLegend()}
+          ${showHeaders ? html`<div class="axis-labels" part="axis-labels">
+                <div>${sourceLabel}</div>
+                <div>${targetLabel}</div>
+              </div>` : nothing}
 
-      <div class="chart-root" part="chart" ?hidden=${empty}></div>
+          <div class="chart-root" part="chart" ?hidden=${empty}></div>
 
-      ${empty ? html`<div class="empty" part="empty">
-            ${circular ? "Circular dependency detected in the data — this cannot be drawn as a Sankey." : "No data"}
-          </div>` : nothing}
+          ${empty ? html`<div class="empty" part="empty">
+                ${circular ? "Circular dependency detected in the data — this cannot be drawn as a Sankey." : "No data"}
+              </div>` : nothing}
 
-      ${!empty && this.showLegend && colorRanges.length ? html`<div class="legend" part="legend">
-            <span>Low</span>
-            <div class="swatches">
-              ${colorRanges.map(
-      (range) => html`<div class="swatch" style="background-color:${range.color}"></div>`
-    )}
-            </div>
-            <span>High</span>
-          </div>` : nothing}
-
-      ${this._tooltip ? html`<div
-            class="tooltip"
-            part="tooltip"
-            style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-          >
-            ${this._tooltip.rows.map(
+          ${this._tooltip ? html`<div
+                class="tooltip"
+                part="tooltip"
+                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
+              >
+                ${this._tooltip.rows.map(
       (row) => html`<div>
-                  ${row.key ? html`<span class="key">${row.key}:</span> ` : nothing}${row.value}
-                </div>`
+                      ${row.key ? html`<span class="key">${row.key}:</span> ` : nothing}${row.value}
+                    </div>`
     )}
-          </div>` : nothing}
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
     `;
   }
 };
-Ui9000SankeyChart.styles = sankeyStyles;
-__decorateClass([
-  property({ type: String, attribute: "data" })
-], Ui9000SankeyChart.prototype, "dataJson", 2);
+Ui9000SankeyChart.styles = [sankeyStyles, chartShellStyles];
 __decorateClass([
   property({ type: Boolean, attribute: "show-legend" })
 ], Ui9000SankeyChart.prototype, "showLegend", 2);

package/dist/components/sankey-chart/element/ui9000-sankey-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-sankey-chart.js","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"sourcesContent":["import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { getSankeyDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  buildColorRanges,\n  formatCapitalizedWords,\n  formatSankeyValue,\n  normalizeSankeyData,\n  type SankeyColorRange,\n  type SankeyInput,\n  type SankeyModel,\n} from '../lib/index.js';\nimport { renderSankeyChart } from '../render/draw.js';\nimport { sankeyStyles } from './styles.js';\n\ninterface TooltipRow {\n  key: string;\n  value: string;\n}\n\ninterface SankeyView {\n  empty: boolean;\n  circular: boolean;\n  sourceLabel: string;\n  targetLabel: string;\n  colorRanges: SankeyColorRange[];\n}\n\nconst EMPTY_VIEW: SankeyView = {\n  empty: true,\n  circular: false,\n  sourceLabel: '',\n  targetLabel: '',\n  colorRanges: [],\n};\n\n@customElement('ui9000-sankey-chart')\nexport class Ui9000SankeyChart extends LitElement {\n  static override styles = sankeyStyles;\n\n  /** JSON: FuseDash widget payload | { nodes?, links } | SankeyLink[] */\n  @property({ type: String, attribute: 'data' })\n  dataJson = '[]';\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Overrides the header above the left column. */\n  @property({ type: String, attribute: 'source-label' })\n  sourceLabel = '';\n\n  /** Overrides the header above the right column. */\n  @property({ type: String, attribute: 'target-label' })\n  targetLabel = '';\n\n  @state()\n  private _tooltip: { x: number; y: number; rows: TooltipRow[] } | null = null;\n\n  @state()\n  private _view: SankeyView = EMPTY_VIEW;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SankeyModel {\n    return normalizeSankeyData(parseJsonAttr<SankeyInput>(this.dataJson, []));\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    const colorRanges = buildColorRanges(\n      model.links.map((l) => l.value),\n      model.colors,\n    );\n\n    this._view = {\n      empty: model.links.length === 0,\n      circular: model.circular,\n      sourceLabel: this.sourceLabel || model.sourceLabel,\n      targetLabel: this.targetLabel || model.targetLabel,\n      colorRanges,\n    };\n\n    if (!model.links.length) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getSankeyDimensions(root);\n\n    renderSankeyChart(root, {\n      model,\n      colorRanges,\n      width,\n      height,\n      theme,\n      onLinkHover: this.showTooltip\n        ? ({ sourceLabel, targetLabel, value, event }) => {\n            this.setTooltip(event, [\n              { key: this._view.sourceLabel, value: formatCapitalizedWords(sourceLabel) },\n              { key: model.valueLabel, value: formatSankeyValue(value) },\n              { key: this._view.targetLabel, value: formatCapitalizedWords(targetLabel) },\n            ]);\n          }\n        : undefined,\n      onLinkLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n      onLabelHover: this.showTooltip\n        ? ({ label, event }) => this.setTooltip(event, [{ key: '', value: label }])\n        : undefined,\n      onLabelLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n    });\n  }\n\n  private setTooltip(event: MouseEvent, rows: TooltipRow[]): void {\n    const rect = this.getBoundingClientRect();\n    this._tooltip = {\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n      rows,\n    };\n  }\n\n  private clearTooltip(): void {\n    this._tooltip = null;\n  }\n\n  override render() {\n    const { empty, circular, sourceLabel, targetLabel, colorRanges } = this._view;\n    const showHeaders = !empty && Boolean(sourceLabel || targetLabel);\n\n    return html`\n      ${showHeaders\n        ? html`<div class=\"axis-labels\" part=\"axis-labels\">\n            <div>${sourceLabel}</div>\n            <div>${targetLabel}</div>\n          </div>`\n        : nothing}\n\n      <div class=\"chart-root\" part=\"chart\" ?hidden=${empty}></div>\n\n      ${empty\n        ? html`<div class=\"empty\" part=\"empty\">\n            ${circular\n              ? 'Circular dependency detected in the data — this cannot be drawn as a Sankey.'\n              : 'No data'}\n          </div>`\n        : nothing}\n\n      ${!empty && this.showLegend && colorRanges.length\n        ? html`<div class=\"legend\" part=\"legend\">\n            <span>Low</span>\n            <div class=\"swatches\">\n              ${colorRanges.map(\n                (range) =>\n                  html`<div class=\"swatch\" style=\"background-color:${range.color}\"></div>`,\n              )}\n            </div>\n            <span>High</span>\n          </div>`\n        : nothing}\n\n      ${this._tooltip\n        ? html`<div\n            class=\"tooltip\"\n            part=\"tooltip\"\n            style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n          >\n            ${this._tooltip.rows.map(\n              (row) =>\n                html`<div>\n                  ${row.key ? html`<span class=\"key\">${row.key}:</span> ` : nothing}${row.value}\n                </div>`,\n            )}\n          </div>`\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-sankey-chart': Ui9000SankeyChart;\n  }\n}\n\nexport function registerSankeyChart(): void {\n  if (!customElements.get('ui9000-sankey-chart')) {\n    customElements.define('ui9000-sankey-chart', Ui9000SankeyChart);\n  }\n}\n\nregisterSankeyChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-sankey-chart.js","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { renderPaletteLegend } from '../../../element/chart-legend-render.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { getSankeyDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  buildColorRanges,\n  formatCapitalizedWords,\n  formatSankeyValue,\n  normalizeSankeyData,\n  type SankeyColorRange,\n  type SankeyInput,\n  type SankeyModel,\n} from '../lib/index.js';\nimport { renderSankeyChart } from '../render/draw.js';\nimport { sankeyStyles } from './styles.js';\n\ninterface TooltipRow {\n  key: string;\n  value: string;\n}\n\ninterface SankeyView {\n  empty: boolean;\n  circular: boolean;\n  sourceLabel: string;\n  targetLabel: string;\n  colorRanges: SankeyColorRange[];\n}\n\nconst EMPTY_VIEW: SankeyView = {\n  empty: true,\n  circular: false,\n  sourceLabel: '',\n  targetLabel: '',\n  colorRanges: [],\n};\n\n@customElement('ui9000-sankey-chart')\nexport class Ui9000SankeyChart extends Ui9000ChartElement {\n  static override styles = [sankeyStyles, chartShellStyles];\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Overrides the header above the left column. */\n  @property({ type: String, attribute: 'source-label' })\n  sourceLabel = '';\n\n  /** Overrides the header above the right column. */\n  @property({ type: String, attribute: 'target-label' })\n  targetLabel = '';\n\n  @state()\n  private _tooltip: { x: number; y: number; rows: TooltipRow[] } | null = null;\n\n  @state()\n  private _view: SankeyView = EMPTY_VIEW;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SankeyModel {\n    return normalizeSankeyData(parseJsonAttr<SankeyInput>(this.dataJson, []));\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._view.empty || !this._view.colorRanges.length) {\n      return nothing;\n    }\n    return renderPaletteLegend(this._view.colorRanges.map((range) => range.color));\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    const colorRanges = buildColorRanges(\n      model.links.map((l) => l.value),\n      model.colors,\n    );\n\n    this._view = {\n      empty: model.links.length === 0,\n      circular: model.circular,\n      sourceLabel: this.sourceLabel || model.sourceLabel,\n      targetLabel: this.targetLabel || model.targetLabel,\n      colorRanges,\n    };\n\n    if (!model.links.length) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getSankeyDimensions(root);\n\n    renderSankeyChart(root, {\n      model,\n      colorRanges,\n      width,\n      height,\n      theme,\n      onLinkHover: this.showTooltip\n        ? ({ sourceLabel, targetLabel, value, event }) => {\n            this.setTooltip(event, [\n              { key: this._view.sourceLabel, value: formatCapitalizedWords(sourceLabel) },\n              { key: model.valueLabel, value: formatSankeyValue(value) },\n              { key: this._view.targetLabel, value: formatCapitalizedWords(targetLabel) },\n            ]);\n          }\n        : undefined,\n      onLinkLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n      onLabelHover: this.showTooltip\n        ? ({ label, event }) => this.setTooltip(event, [{ key: '', value: label }])\n        : undefined,\n      onLabelLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n    });\n  }\n\n  private setTooltip(event: MouseEvent, rows: TooltipRow[]): void {\n    const rect = this.getBoundingClientRect();\n    this._tooltip = {\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n      rows,\n    };\n  }\n\n  private clearTooltip(): void {\n    this._tooltip = null;\n  }\n\n  override render() {\n    const { empty, circular, sourceLabel, targetLabel } = this._view;\n    const showHeaders = !empty && Boolean(sourceLabel || targetLabel);\n\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          ${this.renderLegend()}\n          ${showHeaders\n            ? html`<div class=\"axis-labels\" part=\"axis-labels\">\n                <div>${sourceLabel}</div>\n                <div>${targetLabel}</div>\n              </div>`\n            : nothing}\n\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${empty}></div>\n\n          ${empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                ${circular\n                  ? 'Circular dependency detected in the data — this cannot be drawn as a Sankey.'\n                  : 'No data'}\n              </div>`\n            : nothing}\n\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                ${this._tooltip.rows.map(\n                  (row) =>\n                    html`<div>\n                      ${row.key ? html`<span class=\"key\">${row.key}:</span> ` : nothing}${row.value}\n                    </div>`,\n                )}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-sankey-chart': Ui9000SankeyChart;\n  }\n}\n\nexport function registerSankeyChart(): void {\n  if (!customElements.get('ui9000-sankey-chart')) {\n    customElements.define('ui9000-sankey-chart', Ui9000SankeyChart);\n  }\n}\n\nregisterSankeyChart();\n"],"names":[],"mappings":"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"}

package/dist/components/sankey-chart/index.js

@@ -2,8 +2,10 @@ import { registerSankeyChart } from "./element/ui9000-sankey-chart.js";
 import { Ui9000SankeyChart } from "./element/ui9000-sankey-chart.js";
 import { default as default2 } from "./metadata.json.js";
 import { MAX_SANKEY_LINKS, normalizeSankeyData } from "./lib/normalize.js";
-import { NODE_LABEL_MAX, formatCapitalizedWords, formatSankeyValue, truncateNodeLabel } from "./lib/format.js";
-import { buildColorRanges, generateBreakPoints, pickRangeColor } from "./lib/domain.js";
+import { NODE_LABEL_MAX, formatSankeyValue, truncateNodeLabel } from "./lib/format.js";
+import { buildColorRanges, pickRangeColor } from "./lib/domain.js";
+import { formatCapitalizedWords } from "../../utils/format-text.js";
+import { generateBreakPoints } from "../../utils/breakpoints.js";
 import { renderSankeyChart } from "./render/draw.js";
 export {
   MAX_SANKEY_LINKS,

package/dist/components/sankey-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/sankey-chart/lib/domain.d.ts

@@ -1,10 +1,10 @@
+import { generateBreakPoints } from '../../../utils/breakpoints.js';
+export { generateBreakPoints };
 export interface SankeyColorRange {
     color: string;
     start: number;
     end: number;
 }
-/** Mirrors client `generateBreakPoints` — quantile break points over the values. */
-export declare function generateBreakPoints(values: number[], numBreaks?: number): number[];
 /**
  * Mirrors the client `generateColorRanges` effect: one range per palette step,
  * the last one stretched to 3x so the largest link still finds a bucket.

package/dist/components/sankey-chart/lib/domain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"domain.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/lib/domain.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oFAAoF;AACpF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,SAAI,GAAG,MAAM,EAAE,CAgB7E;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EAAE,EAChB,MAAM,EAAE,MAAM,EAAE,GACf,gBAAgB,EAAE,CAUpB;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,gBAAgB,EAAE,EAC1B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,GACf,MAAM,CAIR"}
+{"version":3,"file":"domain.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/lib/domain.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EAAE,EAChB,MAAM,EAAE,MAAM,EAAE,GACf,gBAAgB,EAAE,CAUpB;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,gBAAgB,EAAE,EAC1B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,GACf,MAAM,CAIR"}

package/dist/components/sankey-chart/lib/domain.js

@@ -1,16 +1,4 @@
-function generateBreakPoints(values, numBreaks = 7) {
-  const sorted = values.filter((v) => Number.isFinite(v)).slice().sort((a, b) => a - b);
-  if (!sorted.length || numBreaks < 2) return [];
-  const breaks = [];
-  for (let i = 0; i < numBreaks; i++) {
-    const position = i / (numBreaks - 1) * (sorted.length - 1);
-    const lower = Math.max(0, Math.floor(position));
-    const upper = Math.min(sorted.length - 1, Math.ceil(position));
-    const weight = position - lower;
-    breaks.push(sorted[lower] * (1 - weight) + sorted[upper] * weight);
-  }
-  return breaks;
-}
+import { generateBreakPoints } from "../../../utils/breakpoints.js";
 function buildColorRanges(values, colors) {
   if (!colors.length) return [];
   const unique = [...new Set(values.filter((v) => Number.isFinite(v)))];

package/dist/components/sankey-chart/lib/domain.js.map

@@ -1 +1 @@
-{"version":3,"file":"domain.js","sources":["../../../../src/components/sankey-chart/lib/domain.ts"],"sourcesContent":["export interface SankeyColorRange {\n  color: string;\n  start: number;\n  end: number;\n}\n\n/** Mirrors client `generateBreakPoints` — quantile break points over the values. */\nexport function generateBreakPoints(values: number[], numBreaks = 7): number[] {\n  const sorted = values\n    .filter((v) => Number.isFinite(v))\n    .slice()\n    .sort((a, b) => a - b);\n  if (!sorted.length || numBreaks < 2) return [];\n\n  const breaks: number[] = [];\n  for (let i = 0; i < numBreaks; i++) {\n    const position = (i / (numBreaks - 1)) * (sorted.length - 1);\n    const lower = Math.max(0, Math.floor(position));\n    const upper = Math.min(sorted.length - 1, Math.ceil(position));\n    const weight = position - lower;\n    breaks.push(sorted[lower] * (1 - weight) + sorted[upper] * weight);\n  }\n  return breaks;\n}\n\n/**\n * Mirrors the client `generateColorRanges` effect: one range per palette step,\n * the last one stretched to 3x so the largest link still finds a bucket.\n */\nexport function buildColorRanges(\n  values: number[],\n  colors: string[],\n): SankeyColorRange[] {\n  if (!colors.length) return [];\n  const unique = [...new Set(values.filter((v) => Number.isFinite(v)))];\n  const steps = generateBreakPoints(unique, colors.length);\n\n  return steps.map((step, i) => ({\n    color: colors[i],\n    start: Math.trunc(step),\n    end: Math.trunc(i === steps.length - 1 ? step * 3 : steps[i + 1]),\n  }));\n}\n\nexport function pickRangeColor(\n  ranges: SankeyColorRange[],\n  value: number,\n  fallback: string,\n): string {\n  if (!ranges.length) return fallback;\n  const hit = ranges.find((r) => r.start <= value && r.end >= value);\n  return (hit ?? ranges[ranges.length - 1]).color;\n}\n"],"names":[],"mappings":"AAOO,SAAS,oBAAoB,QAAkB,YAAY,GAAa;AAC7E,QAAM,SAAS,OACZ,OAAO,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC,EAChC,QACA,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACvB,MAAI,CAAC,OAAO,UAAU,YAAY,UAAU,CAAA;AAE5C,QAAM,SAAmB,CAAA;AACzB,WAAS,IAAI,GAAG,IAAI,WAAW,KAAK;AAClC,UAAM,WAAY,KAAK,YAAY,MAAO,OAAO,SAAS;AAC1D,UAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC;AAC9C,UAAM,QAAQ,KAAK,IAAI,OAAO,SAAS,GAAG,KAAK,KAAK,QAAQ,CAAC;AAC7D,UAAM,SAAS,WAAW;AAC1B,WAAO,KAAK,OAAO,KAAK,KAAK,IAAI,UAAU,OAAO,KAAK,IAAI,MAAM;AAAA,EACnE;AACA,SAAO;AACT;AAMO,SAAS,iBACd,QACA,QACoB;AACpB,MAAI,CAAC,OAAO,OAAQ,QAAO,CAAA;AAC3B,QAAM,SAAS,CAAC,GAAG,IAAI,IAAI,OAAO,OAAO,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC;AACpE,QAAM,QAAQ,oBAAoB,QAAQ,OAAO,MAAM;AAEvD,SAAO,MAAM,IAAI,CAAC,MAAM,OAAO;AAAA,IAC7B,OAAO,OAAO,CAAC;AAAA,IACf,OAAO,KAAK,MAAM,IAAI;AAAA,IACtB,KAAK,KAAK,MAAM,MAAM,MAAM,SAAS,IAAI,OAAO,IAAI,MAAM,IAAI,CAAC,CAAC;AAAA,EAAA,EAChE;AACJ;AAEO,SAAS,eACd,QACA,OACA,UACQ;AACR,MAAI,CAAC,OAAO,OAAQ,QAAO;AAC3B,QAAM,MAAM,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,OAAO,KAAK;AACjE,UAAQ,OAAO,OAAO,OAAO,SAAS,CAAC,GAAG;AAC5C;"}
+{"version":3,"file":"domain.js","sources":["../../../../src/components/sankey-chart/lib/domain.ts"],"sourcesContent":["import { generateBreakPoints } from '../../../utils/breakpoints.js';\n\nexport { generateBreakPoints };\n\nexport interface SankeyColorRange {\n  color: string;\n  start: number;\n  end: number;\n}\n\n/**\n * Mirrors the client `generateColorRanges` effect: one range per palette step,\n * the last one stretched to 3x so the largest link still finds a bucket.\n */\nexport function buildColorRanges(\n  values: number[],\n  colors: string[],\n): SankeyColorRange[] {\n  if (!colors.length) return [];\n  const unique = [...new Set(values.filter((v) => Number.isFinite(v)))];\n  const steps = generateBreakPoints(unique, colors.length);\n\n  return steps.map((step, i) => ({\n    color: colors[i],\n    start: Math.trunc(step),\n    end: Math.trunc(i === steps.length - 1 ? step * 3 : steps[i + 1]),\n  }));\n}\n\nexport function pickRangeColor(\n  ranges: SankeyColorRange[],\n  value: number,\n  fallback: string,\n): string {\n  if (!ranges.length) return fallback;\n  const hit = ranges.find((r) => r.start <= value && r.end >= value);\n  return (hit ?? ranges[ranges.length - 1]).color;\n}\n"],"names":[],"mappings":";AAcO,SAAS,iBACd,QACA,QACoB;AACpB,MAAI,CAAC,OAAO,OAAQ,QAAO,CAAA;AAC3B,QAAM,SAAS,CAAC,GAAG,IAAI,IAAI,OAAO,OAAO,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC;AACpE,QAAM,QAAQ,oBAAoB,QAAQ,OAAO,MAAM;AAEvD,SAAO,MAAM,IAAI,CAAC,MAAM,OAAO;AAAA,IAC7B,OAAO,OAAO,CAAC;AAAA,IACf,OAAO,KAAK,MAAM,IAAI;AAAA,IACtB,KAAK,KAAK,MAAM,MAAM,MAAM,SAAS,IAAI,OAAO,IAAI,MAAM,IAAI,CAAC,CAAC;AAAA,EAAA,EAChE;AACJ;AAEO,SAAS,eACd,QACA,OACA,UACQ;AACR,MAAI,CAAC,OAAO,OAAQ,QAAO;AAC3B,QAAM,MAAM,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,OAAO,KAAK;AACjE,UAAQ,OAAO,OAAO,OAAO,SAAS,CAAC,GAAG;AAC5C;"}

package/dist/components/sankey-chart/lib/format.d.ts

@@ -1,7 +1,6 @@
+export { formatCapitalizedWords } from '../../../utils/format-text.js';
 /** Mirrors client `formatNumber` (Intl, up to 3 decimals). */
 export declare function formatSankeyValue(value: number): string;
-/** Mirrors client `formatCapitalizedWordsText`. */
-export declare function formatCapitalizedWords(text: string): string;
 /** FuseDash cuts node labels at 7 characters (and only then offers a tooltip). */
 export declare const NODE_LABEL_MAX = 7;
 export declare function truncateNodeLabel(text: string, max?: number): string;

package/dist/components/sankey-chart/lib/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/lib/format.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGvD;AAED,mDAAmD;AACnD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ3D;AAED,kFAAkF;AAClF,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAiB,GAAG,MAAM,CAE5E"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/lib/format.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAGvE,8DAA8D;AAC9D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,kFAAkF;AAClF,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAiB,GAAG,MAAM,CAE5E"}

package/dist/components/sankey-chart/lib/format.js

@@ -1,11 +1,7 @@
+import { formatFuseNumber } from "../../../utils/format-text.js";
+import { formatCapitalizedWords } from "../../../utils/format-text.js";
 function formatSankeyValue(value) {
-  if (!Number.isFinite(value)) return "";
-  return Intl.NumberFormat("en-US", { maximumFractionDigits: 3 }).format(value);
-}
-function formatCapitalizedWords(text) {
-  if (!text) return "";
-  if (!Number.isNaN(Number(text))) return text;
-  return text.replace(/[_-]/g, " ").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+  return formatFuseNumber(value);
 }
 const NODE_LABEL_MAX = 7;
 function truncateNodeLabel(text, max = NODE_LABEL_MAX) {

package/dist/components/sankey-chart/lib/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","sources":["../../../../src/components/sankey-chart/lib/format.ts"],"sourcesContent":["/** Mirrors client `formatNumber` (Intl, up to 3 decimals). */\nexport function formatSankeyValue(value: number): string {\n  if (!Number.isFinite(value)) return '';\n  return Intl.NumberFormat('en-US', { maximumFractionDigits: 3 }).format(value);\n}\n\n/** Mirrors client `formatCapitalizedWordsText`. */\nexport function formatCapitalizedWords(text: string): string {\n  if (!text) return '';\n  if (!Number.isNaN(Number(text))) return text;\n  return text\n    .replace(/[_-]/g, ' ')\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(' ');\n}\n\n/** FuseDash cuts node labels at 7 characters (and only then offers a tooltip). */\nexport const NODE_LABEL_MAX = 7;\n\nexport function truncateNodeLabel(text: string, max = NODE_LABEL_MAX): string {\n  return text.length <= max ? text : `${text.slice(0, max)}...`;\n}\n"],"names":[],"mappings":"AACO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AACpC,SAAO,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAA,CAAG,EAAE,OAAO,KAAK;AAC9E;AAGO,SAAS,uBAAuB,MAAsB;AAC3D,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,CAAC,OAAO,MAAM,OAAO,IAAI,CAAC,EAAG,QAAO;AACxC,SAAO,KACJ,QAAQ,SAAS,GAAG,EACpB,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,gBAAgB,KAAK,MAAM,CAAC,EAAE,YAAA,CAAa,EACxE,KAAK,GAAG;AACb;AAGO,MAAM,iBAAiB;AAEvB,SAAS,kBAAkB,MAAc,MAAM,gBAAwB;AAC5E,SAAO,KAAK,UAAU,MAAM,OAAO,GAAG,KAAK,MAAM,GAAG,GAAG,CAAC;AAC1D;"}
+{"version":3,"file":"format.js","sources":["../../../../src/components/sankey-chart/lib/format.ts"],"sourcesContent":["export { formatCapitalizedWords } from '../../../utils/format-text.js';\nimport { formatFuseNumber } from '../../../utils/format-text.js';\n\n/** Mirrors client `formatNumber` (Intl, up to 3 decimals). */\nexport function formatSankeyValue(value: number): string {\n  return formatFuseNumber(value);\n}\n\n/** FuseDash cuts node labels at 7 characters (and only then offers a tooltip). */\nexport const NODE_LABEL_MAX = 7;\n\nexport function truncateNodeLabel(text: string, max = NODE_LABEL_MAX): string {\n  return text.length <= max ? text : `${text.slice(0, max)}...`;\n}\n"],"names":[],"mappings":";;AAIO,SAAS,kBAAkB,OAAuB;AACvD,SAAO,iBAAiB,KAAK;AAC/B;AAGO,MAAM,iBAAiB;AAEvB,SAAS,kBAAkB,MAAc,MAAM,gBAAwB;AAC5E,SAAO,KAAK,UAAU,MAAM,OAAO,GAAG,KAAK,MAAM,GAAG,GAAG,CAAC;AAC1D;"}

package/dist/components/scatter-plot-chart/element/ui9000-scatter-plot.d.ts

@@ -19,7 +19,7 @@ export declare class Ui9000ScatterPlot extends Ui9000ChartElement {
     private parseData;
     private renderLegend;
     private draw;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/scatter-sparkline-chart/element/ui9000-scatter-sparkline-chart.d.ts

@@ -20,7 +20,7 @@ export declare class Ui9000ScatterSparklineChart extends Ui9000ChartElement {
     private renderLegend;
     private formatPointTooltip;
     private draw;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/spark-area-chart/element/ui9000-spark-area-chart.d.ts

@@ -21,7 +21,7 @@ export declare class Ui9000SparkAreaChart extends Ui9000ChartElement {
     private xDomainHint;
     private renderLegend;
     private draw;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/spark-line-chart/element/ui9000-spark-line-chart.d.ts

@@ -21,7 +21,7 @@ export declare class Ui9000SparkLineChart extends Ui9000ChartElement {
     private xDomainHint;
     private renderLegend;
     private draw;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/step-line-chart/element/ui9000-step-line-chart.d.ts

@@ -23,7 +23,7 @@ export declare class Ui9000StepLineChart extends Ui9000ChartElement {
     private xDomainHint;
     private renderLegend;
     private draw;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/treemap-chart/element/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const treemapChartStyles: import('lit').CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/treemap-chart/element/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/element/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAuI9B,CAAC"}

package/dist/components/treemap-chart/element/styles.js

@@ -0,0 +1,141 @@
+import { css } from "lit";
+const treemapChartStyles = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 220px;
+    color: var(--ui9000-color-text, #111827);
+    font-family: var(--ui9000-font-family, system-ui, sans-serif);
+    box-sizing: border-box;
+  }
+
+  .chart-root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .chart-root[hidden] {
+    display: none;
+  }
+
+  /* Grouped mode — client TreemapGroupsContainer */
+  .treemap-groups {
+    display: grid;
+    gap: 8px;
+    margin-top: 10px;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    overflow: auto;
+  }
+
+  .treemap-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    padding: 8px;
+    border-radius: 8px;
+    background: var(--ui9000-color-surface-muted, #f7f8fa);
+  }
+
+  .treemap-card-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    padding-bottom: 8px;
+    flex-shrink: 0;
+  }
+
+  .treemap-card-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The group name owns the header — the field caption gives up space first. */
+  .treemap-card-subtitle {
+    flex: 0 100 auto;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .treemap-card-plot {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+  }
+
+  /* Tile label — client TextBox / TextName / TextValue */
+  .tile-label {
+    padding: 4px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .tile-name {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tile-value {
+    display: block;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 1.35;
+    background: var(--ui9000-color-text, #111827);
+    color: #fff;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+    transform: translate(-50%, calc(-100% - 10px));
+    white-space: nowrap;
+  }
+
+  .tooltip-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+  }
+
+  .empty {
+    display: grid;
+    place-items: center;
+    height: 100%;
+    min-height: inherit;
+    color: var(--ui9000-color-text-muted, #6b7280);
+    font-size: 0.875rem;
+  }
+`;
+export {
+  treemapChartStyles
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/treemap-chart/element/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/treemap-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const treemapChartStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n\n  .chart-root {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .chart-root[hidden] {\n    display: none;\n  }\n\n  /* Grouped mode — client TreemapGroupsContainer */\n  .treemap-groups {\n    display: grid;\n    gap: 8px;\n    margin-top: 10px;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    overflow: auto;\n  }\n\n  .treemap-card {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n    padding: 8px;\n    border-radius: 8px;\n    background: var(--ui9000-color-surface-muted, #f7f8fa);\n  }\n\n  .treemap-card-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n    padding-bottom: 8px;\n    flex-shrink: 0;\n  }\n\n  .treemap-card-title {\n    flex: 1 1 auto;\n    min-width: 0;\n    font-size: 14px;\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* The group name owns the header — the field caption gives up space first. */\n  .treemap-card-subtitle {\n    flex: 0 100 auto;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 16px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .treemap-card-plot {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n  }\n\n  /* Tile label — client TextBox / TextName / TextValue */\n  .tile-label {\n    padding: 4px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  .tile-name {\n    display: block;\n    font-size: 14px;\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tile-value {\n    display: block;\n    font-size: 12px;\n    line-height: 16px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 10px));\n    white-space: nowrap;\n  }\n\n  .tooltip-title {\n    font-weight: 600;\n    margin-bottom: 2px;\n  }\n\n  .empty {\n    display: grid;\n    place-items: center;\n    height: 100%;\n    min-height: inherit;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/treemap-chart/element/ui9000-treemap-chart.d.ts

@@ -0,0 +1,35 @@
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+export declare class Ui9000TreemapChart extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
+    showLegend: boolean;
+    showTooltip: boolean;
+    private _tooltip;
+    private _empty;
+    private _rangeColors;
+    private _resizeObserver?;
+    private _raf;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The palette legend only appears once the data is known, which shortens the
+     * plot — observing the plot box (not just the host) redraws it at the size it
+     * actually got.
+     */
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    private scheduleDraw;
+    private parseData;
+    /** Client tooltip: `Value` plus the dimension the tile encodes. */
+    private tooltipFor;
+    private draw;
+    private renderLegend;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui9000-treemap-chart': Ui9000TreemapChart;
+    }
+}
+export declare function registerTreemapChart(): void;
+//# sourceMappingURL=ui9000-treemap-chart.d.ts.map

package/dist/components/treemap-chart/element/ui9000-treemap-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-treemap-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/element/ui9000-treemap-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAa7F,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAA0C;IAGhE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAA6E;IAG7F,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,YAAY,CAAgB;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC;;;;OAIG;IACM,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,mEAAmE;IACnE,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,IAAI;IAyCZ,OAAO,CAAC,YAAY;IAKX,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}