@fusedashlabs/widgets 0.4.5 → 0.6.0

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

@@ -5,10 +5,10 @@ import { readCssVar, CSS_VARS, readThemeFromElement } from "../../../context/wid
 import { formatValueWithUnit, axisFieldLabel } from "../../../utils/axis-units.js";
 import { parseJsonAttr, getMatrixDimensions } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { matrixLayout, renderMatrixChart, matrixColorRanges } from "../render/draw.js";
-import { matrixStyles } from "./styles.js";
 import { normalizeMatrixData } from "../lib/normalize.js";
 import { formatCategoryLabel, formatMatrixValue } from "../lib/format.js";
+import { matrixLayout, renderMatrixChart, matrixColorRanges } from "../render/draw.js";
+import { matrixStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,7 +25,6 @@ let Ui9000MatrixChart = class extends Ui9000ChartElement {
     super(...arguments);
     this.showLegend = true;
     this.showTooltip = true;
-    this._tooltip = null;
     this._empty = false;
     this._pinnedTopAxis = false;
     this._raf = 0;
@@ -117,23 +116,16 @@ let Ui9000MatrixChart = class extends Ui9000ChartElement {
       topAxisContainer: topAxis,
       ...this.axisLabelHandlers(),
       onCellHover: this.showTooltip ? ({ cell, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          ...this.tooltipRows(model, cell)
-        };
+        this.openTooltip(event, this.tooltipContent(model, cell));
       } : void 0,
-      onCellLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onCellLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   /**
    * Client tooltip: the row field and its value, then the measure — each
    * carrying the unit declared for that field in `axisDetails`.
    */
-  tooltipRows(model, cell) {
+  tooltipContent(model, cell) {
     var _a, _b;
     const rowValue = formatValueWithUnit(
       formatCategoryLabel(cell.y),
@@ -143,9 +135,18 @@ let Ui9000MatrixChart = class extends Ui9000ChartElement {
       formatMatrixValue(cell.value),
       (_b = model.axisDetails) == null ? void 0 : _b[model.valueKey]
     );
+    if (model.categoryKey) {
+      return {
+        title: axisFieldLabel(model.categoryKey, model.axisDetails),
+        rows: [
+          { label: "", value: rowValue },
+          { label: "Value", value }
+        ]
+      };
+    }
     return {
-      category: model.categoryKey ? `${axisFieldLabel(model.categoryKey, model.axisDetails)}: ${rowValue}` : rowValue,
-      value
+      title: rowValue,
+      rows: [{ label: "Value", value }]
     };
   }
   /** FuseDash `ChartLegend legendType="palette"` — Low → High swatch ramp. */
@@ -192,14 +193,6 @@ let Ui9000MatrixChart = class extends Ui9000ChartElement {
             </div>
           </div>
           ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
-          ${this._tooltip ? html`<div
-                class="tooltip"
-                part="tooltip"
-                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-              >
-                <div class="name">${this._tooltip.category}</div>
-                <div>Value: ${this._tooltip.value}</div>
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -213,9 +206,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-tooltip" })
 ], Ui9000MatrixChart.prototype, "showTooltip", 2);
-__decorateClass([
-  state()
-], Ui9000MatrixChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000MatrixChart.prototype, "_empty", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-matrix-chart.js","sources":["../../../../src/components/matrix-chart/element/ui9000-matrix-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { CSS_VARS, readCssVar, readThemeFromElement } from '../../../context/widget-context.js';\nimport { axisFieldLabel, formatValueWithUnit } from '../../../utils/axis-units.js';\nimport { getMatrixDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCategoryLabel,\n  formatMatrixValue,\n  normalizeMatrixData,\n  type MatrixCell,\n  type MatrixInput,\n  type MatrixModel,\n} from '../lib/index.js';\nimport {\n  matrixColorRanges,\n  matrixLayout,\n  renderMatrixChart,\n} from '../render/draw.js';\nimport { matrixStyles } from './styles.js';\n\n@customElement('ui9000-matrix-chart')\nexport class Ui9000MatrixChart extends Ui9000ChartElement {\n  static override styles = [matrixStyles, 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  @state()\n  private _tooltip: {\n    x: number;\n    y: number;\n    /** Client rows: \"<row field>: <row value>\" then \"Value: <measure>\" */\n    category: string;\n    value: string;\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _pinnedTopAxis = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _drawnSignature: string | null = null;\n  private _drawnModel: MatrixModel | null = null;\n  private _modelJson: string | null = null;\n  private _model: MatrixModel = {\n    cells: [],\n    xDomain: [],\n    yDomain: [],\n    rawValues: [],\n    categoryKey: '',\n    valueKey: '',\n  };\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 firstUpdated(): void {\n    for (const selector of ['.widget-body', '.chart-body', '.chart-scroll']) {\n      const el = this.shadowRoot?.querySelector(selector);\n      if (el instanceof HTMLElement) this._resizeObserver?.observe(el);\n    }\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  /** Normalizing a dense grid is not free — only redo it when `data` changes. */\n  private parseData(): MatrixModel {\n    if (this._modelJson !== this.dataJson) {\n      this._modelJson = this.dataJson;\n      this._model = normalizeMatrixData(parseJsonAttr<MatrixInput>(this.dataJson, []));\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const chartBody = this.shadowRoot?.querySelector('.chart-body') as HTMLElement | null;\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as HTMLElement | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    const topAxis = this.shadowRoot?.querySelector('.chart-top-axis') as HTMLElement | null;\n    if (!chartBody || !scroll || !root) return;\n\n    const model = this.parseData();\n    this._empty = model.cells.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      topAxis?.replaceChildren();\n      this._pinnedTopAxis = false;\n      this._drawnSignature = null;\n      this._drawnModel = null;\n      return;\n    }\n\n    const { width, margin } = getMatrixDimensions(chartBody);\n    const bodyHeight = chartBody.clientHeight || 300;\n    const viewportHeight = scroll.clientHeight || 300;\n    const themeMode =\n      readCssVar(this, CSS_VARS.mode, 'light') === 'dark' ? 'dark' : 'light';\n\n    // Drawing the header changes the scroll viewport, which fires the resize\n    // observer again — skip redraws whose inputs are unchanged so that\n    // settling costs one extra pass instead of running forever.\n    const signature = [\n      width,\n      bodyHeight,\n      viewportHeight,\n      themeMode,\n      this.showTooltip,\n    ].join('|');\n    if (this._drawnSignature === signature && this._drawnModel === model) return;\n    this._drawnSignature = signature;\n    this._drawnModel = model;\n\n    this._pinnedTopAxis = matrixLayout(model, viewportHeight, margin).separateTopAxis;\n\n    renderMatrixChart(root, {\n      model,\n      width,\n      height: viewportHeight,\n      bodyHeight,\n      margin,\n      theme: readThemeFromElement(this),\n      themeMode,\n      topAxisContainer: topAxis,\n      ...this.axisLabelHandlers(),\n      onCellHover: this.showTooltip\n        ? ({ cell, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              ...this.tooltipRows(model, cell),\n            };\n          }\n        : undefined,\n      onCellLeave: this.showTooltip\n        ? () => {\n            this._tooltip = null;\n          }\n        : undefined,\n    });\n  }\n\n  /**\n   * Client tooltip: the row field and its value, then the measure — each\n   * carrying the unit declared for that field in `axisDetails`.\n   */\n  private tooltipRows(\n    model: MatrixModel,\n    cell: MatrixCell,\n  ): { category: string; value: string } {\n    const rowValue = formatValueWithUnit(\n      formatCategoryLabel(cell.y),\n      model.axisDetails?.[model.categoryKey],\n    );\n    const value = formatValueWithUnit(\n      formatMatrixValue(cell.value),\n      model.axisDetails?.[model.valueKey],\n    );\n    return {\n      category: model.categoryKey\n        ? `${axisFieldLabel(model.categoryKey, model.axisDetails)}: ${rowValue}`\n        : rowValue,\n      value,\n    };\n  }\n\n  /** FuseDash `ChartLegend legendType=\"palette\"` — Low → High swatch ramp. */\n  private renderPaletteLegend(model: MatrixModel) {\n    if (!this.showLegend) return nothing;\n    const ranges = matrixColorRanges(model);\n    if (!ranges.length) return nothing;\n    return html`\n      <div class=\"palette-legend\" part=\"legend\">\n        <span>Low</span>\n        <span class=\"palette-swatches\">\n          ${ranges.map(\n            (range) =>\n              html`<span\n                class=\"palette-swatch\"\n                style=\"background:${range.color}\"\n                title=${`${formatMatrixValue(range.start)} – ${formatMatrixValue(range.end)}`}\n              ></span>`,\n          )}\n        </span>\n        <span>High</span>\n      </div>\n    `;\n  }\n\n  override render() {\n    const model = this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            ${this._empty ? nothing : this.renderPaletteLegend(model)}\n            <div\n              class=\"chart-top-axis\"\n              part=\"top-axis\"\n              ?hidden=${!this._pinnedTopAxis}\n            ></div>\n            <div class=\"chart-scroll\" part=\"scroll\">\n              <div\n                class=\"chart-root\"\n                part=\"chart\"\n                ?data-hoverable=${this.showTooltip}\n                ?hidden=${this._empty}\n              ></div>\n            </div>\n          </div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\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                <div class=\"name\">${this._tooltip.category}</div>\n                <div>Value: ${this._tooltip.value}</div>\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-matrix-chart': Ui9000MatrixChart;\n  }\n}\n\nexport function registerMatrixChart(): void {\n  if (!customElements.get('ui9000-matrix-chart')) {\n    customElements.define('ui9000-matrix-chart', Ui9000MatrixChart);\n  }\n}\n\nregisterMatrixChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-matrix-chart.js","sources":["../../../../src/components/matrix-chart/element/ui9000-matrix-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { CSS_VARS, readCssVar, readThemeFromElement } from '../../../context/widget-context.js';\nimport { axisFieldLabel, formatValueWithUnit } from '../../../utils/axis-units.js';\nimport { getMatrixDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCategoryLabel,\n  formatMatrixValue,\n  normalizeMatrixData,\n  type MatrixCell,\n  type MatrixInput,\n  type MatrixModel,\n} from '../lib/index.js';\nimport {\n  matrixColorRanges,\n  matrixLayout,\n  renderMatrixChart,\n} from '../render/draw.js';\nimport { matrixStyles } from './styles.js';\n\n@customElement('ui9000-matrix-chart')\nexport class Ui9000MatrixChart extends Ui9000ChartElement {\n  static override styles = [matrixStyles, 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  @state()\n  private _empty = false;\n\n  @state()\n  private _pinnedTopAxis = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _drawnSignature: string | null = null;\n  private _drawnModel: MatrixModel | null = null;\n  private _modelJson: string | null = null;\n  private _model: MatrixModel = {\n    cells: [],\n    xDomain: [],\n    yDomain: [],\n    rawValues: [],\n    categoryKey: '',\n    valueKey: '',\n  };\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 firstUpdated(): void {\n    for (const selector of ['.widget-body', '.chart-body', '.chart-scroll']) {\n      const el = this.shadowRoot?.querySelector(selector);\n      if (el instanceof HTMLElement) this._resizeObserver?.observe(el);\n    }\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  /** Normalizing a dense grid is not free — only redo it when `data` changes. */\n  private parseData(): MatrixModel {\n    if (this._modelJson !== this.dataJson) {\n      this._modelJson = this.dataJson;\n      this._model = normalizeMatrixData(parseJsonAttr<MatrixInput>(this.dataJson, []));\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const chartBody = this.shadowRoot?.querySelector('.chart-body') as HTMLElement | null;\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as HTMLElement | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    const topAxis = this.shadowRoot?.querySelector('.chart-top-axis') as HTMLElement | null;\n    if (!chartBody || !scroll || !root) return;\n\n    const model = this.parseData();\n    this._empty = model.cells.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      topAxis?.replaceChildren();\n      this._pinnedTopAxis = false;\n      this._drawnSignature = null;\n      this._drawnModel = null;\n      return;\n    }\n\n    const { width, margin } = getMatrixDimensions(chartBody);\n    const bodyHeight = chartBody.clientHeight || 300;\n    const viewportHeight = scroll.clientHeight || 300;\n    const themeMode =\n      readCssVar(this, CSS_VARS.mode, 'light') === 'dark' ? 'dark' : 'light';\n\n    // Drawing the header changes the scroll viewport, which fires the resize\n    // observer again — skip redraws whose inputs are unchanged so that\n    // settling costs one extra pass instead of running forever.\n    const signature = [\n      width,\n      bodyHeight,\n      viewportHeight,\n      themeMode,\n      this.showTooltip,\n    ].join('|');\n    if (this._drawnSignature === signature && this._drawnModel === model) return;\n    this._drawnSignature = signature;\n    this._drawnModel = model;\n\n    this._pinnedTopAxis = matrixLayout(model, viewportHeight, margin).separateTopAxis;\n\n    renderMatrixChart(root, {\n      model,\n      width,\n      height: viewportHeight,\n      bodyHeight,\n      margin,\n      theme: readThemeFromElement(this),\n      themeMode,\n      topAxisContainer: topAxis,\n      ...this.axisLabelHandlers(),\n      onCellHover: this.showTooltip\n        ? ({ cell, event }) => {\n            this.openTooltip(event, this.tooltipContent(model, cell));\n          }\n        : undefined,\n      onCellLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  /**\n   * Client tooltip: the row field and its value, then the measure — each\n   * carrying the unit declared for that field in `axisDetails`.\n   */\n  private tooltipContent(\n    model: MatrixModel,\n    cell: MatrixCell,\n  ): { title?: string; rows: { label: string; value: string }[] } {\n    const rowValue = formatValueWithUnit(\n      formatCategoryLabel(cell.y),\n      model.axisDetails?.[model.categoryKey],\n    );\n    const value = formatValueWithUnit(\n      formatMatrixValue(cell.value),\n      model.axisDetails?.[model.valueKey],\n    );\n    if (model.categoryKey) {\n      return {\n        title: axisFieldLabel(model.categoryKey, model.axisDetails),\n        rows: [\n          { label: '', value: rowValue },\n          { label: 'Value', value },\n        ],\n      };\n    }\n    return {\n      title: rowValue,\n      rows: [{ label: 'Value', value }],\n    };\n  }\n\n  /** FuseDash `ChartLegend legendType=\"palette\"` — Low → High swatch ramp. */\n  private renderPaletteLegend(model: MatrixModel) {\n    if (!this.showLegend) return nothing;\n    const ranges = matrixColorRanges(model);\n    if (!ranges.length) return nothing;\n    return html`\n      <div class=\"palette-legend\" part=\"legend\">\n        <span>Low</span>\n        <span class=\"palette-swatches\">\n          ${ranges.map(\n            (range) =>\n              html`<span\n                class=\"palette-swatch\"\n                style=\"background:${range.color}\"\n                title=${`${formatMatrixValue(range.start)} – ${formatMatrixValue(range.end)}`}\n              ></span>`,\n          )}\n        </span>\n        <span>High</span>\n      </div>\n    `;\n  }\n\n  override render() {\n    const model = this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            ${this._empty ? nothing : this.renderPaletteLegend(model)}\n            <div\n              class=\"chart-top-axis\"\n              part=\"top-axis\"\n              ?hidden=${!this._pinnedTopAxis}\n            ></div>\n            <div class=\"chart-scroll\" part=\"scroll\">\n              <div\n                class=\"chart-root\"\n                part=\"chart\"\n                ?data-hoverable=${this.showTooltip}\n                ?hidden=${this._empty}\n              ></div>\n            </div>\n          </div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-matrix-chart': Ui9000MatrixChart;\n  }\n}\n\nexport function registerMatrixChart(): void {\n  if (!customElements.get('ui9000-matrix-chart')) {\n    customElements.define('ui9000-matrix-chart', Ui9000MatrixChart);\n  }\n}\n\nregisterMatrixChart();\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { registerMatrixChart } from "./element/ui9000-matrix-chart.js";
 import { Ui9000MatrixChart } from "./element/ui9000-matrix-chart.js";
-import { default as default2 } from "./metadata.json.js";
-import { formatCategoryLabel, formatMatrixValue } from "./lib/format.js";
 import { matrixColorRanges, matrixLayout, renderMatrixChart } from "./render/draw.js";
 import { normalizeMatrixData } from "./lib/normalize.js";
 import { sortAxisDomain } from "./lib/domain.js";
+import { formatCategoryLabel, formatMatrixValue } from "./lib/format.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000MatrixChart,
   formatCategoryLabel,

package/dist/components/multi-select/element/ui9000-multi-select.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class Ui9000MultiSelect extends LitElement {
+    static styles: import('lit').CSSResult;
+    dataJson: string;
+    label: string;
+    name: string;
+    value?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export declare function registerMultiSelect(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui9000-multi-select': Ui9000MultiSelect;
+    }
+}
+//# sourceMappingURL=ui9000-multi-select.d.ts.map

package/dist/components/multi-select/element/ui9000-multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-select/element/ui9000-multi-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAiB;IAEQ,QAAQ,SAAQ;IACnC,KAAK,SAAM;IACX,IAAI,SAAM;IACQ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEpD,MAAM;CA6BhB;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/multi-select/element/ui9000-multi-select.js

@@ -0,0 +1,77 @@
+import { LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { surfaceStyles } from "../../../element/surface-styles.js";
+import { parseLabelledField } from "../../../lib/labelled-control.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let Ui9000MultiSelect = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dataJson = "{}";
+    this.label = "";
+    this.name = "";
+  }
+  render() {
+    const field = parseLabelledField(this.dataJson, {
+      label: this.label,
+      name: this.name,
+      value: this.value
+    });
+    if (!field) return html`<p class="blocked" role="alert">Label required</p>`;
+    const selected = new Set(field.value.split(",").map((s) => s.trim()).filter(Boolean));
+    const options = field.options.length ? field.options : [...selected];
+    return html`
+      <div class="root">
+        <label for=${field.name}>${field.label}</label>
+        <select
+          class="field"
+          id=${field.name}
+          name=${field.name}
+          multiple
+          @change=${(e) => {
+      const el = e.target;
+      this.value = [...el.selectedOptions].map((o) => o.value).join(",");
+    }}
+        >
+          ${options.map(
+      (opt) => html`<option value=${opt} ?selected=${selected.has(opt)}>${opt}</option>`
+    )}
+        </select>
+      </div>
+    `;
+  }
+};
+Ui9000MultiSelect.styles = surfaceStyles;
+__decorateClass([
+  property({ type: String, attribute: "data" })
+], Ui9000MultiSelect.prototype, "dataJson", 2);
+__decorateClass([
+  property({ type: String })
+], Ui9000MultiSelect.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], Ui9000MultiSelect.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, attribute: false })
+], Ui9000MultiSelect.prototype, "value", 2);
+Ui9000MultiSelect = __decorateClass([
+  customElement("ui9000-multi-select")
+], Ui9000MultiSelect);
+function registerMultiSelect() {
+  if (!customElements.get("ui9000-multi-select")) {
+    customElements.define("ui9000-multi-select", Ui9000MultiSelect);
+  }
+}
+export {
+  Ui9000MultiSelect,
+  registerMultiSelect
+};
+//# sourceMappingURL=ui9000-multi-select.js.map

package/dist/components/multi-select/element/ui9000-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-multi-select.js","sources":["../../../../src/components/multi-select/element/ui9000-multi-select.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { surfaceStyles } from '../../../element/surface-styles.js';\nimport { parseLabelledField } from '../../../lib/labelled-control.js';\n\n@customElement('ui9000-multi-select')\nexport class Ui9000MultiSelect extends LitElement {\n  static override styles = surfaceStyles;\n\n  @property({ type: String, attribute: 'data' }) dataJson = '{}';\n  @property({ type: String }) label = '';\n  @property({ type: String }) name = '';\n  @property({ type: String, attribute: false }) value?: string;\n\n  override render() {\n    const field = parseLabelledField(this.dataJson, {\n      label: this.label,\n      name: this.name,\n      value: this.value,\n    });\n    if (!field) return html`<p class=\"blocked\" role=\"alert\">Label required</p>`;\n    const selected = new Set(field.value.split(',').map((s) => s.trim()).filter(Boolean));\n    const options = field.options.length ? field.options : [...selected];\n    return html`\n      <div class=\"root\">\n        <label for=${field.name}>${field.label}</label>\n        <select\n          class=\"field\"\n          id=${field.name}\n          name=${field.name}\n          multiple\n          @change=${(e: Event) => {\n            const el = e.target as HTMLSelectElement;\n            this.value = [...el.selectedOptions].map((o) => o.value).join(',');\n          }}\n        >\n          ${options.map(\n            (opt) => html`<option value=${opt} ?selected=${selected.has(opt)}>${opt}</option>`,\n          )}\n        </select>\n      </div>\n    `;\n  }\n}\n\nexport function registerMultiSelect(): void {\n  if (!customElements.get('ui9000-multi-select')) {\n    customElements.define('ui9000-multi-select', Ui9000MultiSelect);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-multi-select': Ui9000MultiSelect;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAOO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAG0C,SAAA,WAAW;AAC9B,SAAA,QAAQ;AACR,SAAA,OAAO;AAAA,EAAA;AAAA,EAG1B,SAAS;AAChB,UAAM,QAAQ,mBAAmB,KAAK,UAAU;AAAA,MAC9C,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,IAAA,CACb;AACD,QAAI,CAAC,MAAO,QAAO;AACnB,UAAM,WAAW,IAAI,IAAI,MAAM,MAAM,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAA,CAAM,EAAE,OAAO,OAAO,CAAC;AACpF,UAAM,UAAU,MAAM,QAAQ,SAAS,MAAM,UAAU,CAAC,GAAG,QAAQ;AACnE,WAAO;AAAA;AAAA,qBAEU,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA;AAAA;AAAA,eAG/B,MAAM,IAAI;AAAA,iBACR,MAAM,IAAI;AAAA;AAAA,oBAEP,CAAC,MAAa;AACtB,YAAM,KAAK,EAAE;AACb,WAAK,QAAQ,CAAC,GAAG,GAAG,eAAe,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG;AAAA,IACnE,CAAC;AAAA;AAAA,YAEC,QAAQ;AAAA,MACR,CAAC,QAAQ,qBAAqB,GAAG,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,GAAG;AAAA,IAAA,CACxE;AAAA;AAAA;AAAA;AAAA,EAIT;AACF;AArCa,kBACK,SAAS;AAEsB,gBAAA;AAAA,EAA9C,SAAS,EAAE,MAAM,QAAQ,WAAW,QAAQ;AAAA,GAHlC,kBAGoC,WAAA,YAAA,CAAA;AACnB,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJf,kBAIiB,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALf,kBAKiB,WAAA,QAAA,CAAA;AACkB,gBAAA;AAAA,EAA7C,SAAS,EAAE,MAAM,QAAQ,WAAW,OAAO;AAAA,GANjC,kBAMmC,WAAA,SAAA,CAAA;AANnC,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;AAuCN,SAAS,sBAA4B;AAC1C,MAAI,CAAC,eAAe,IAAI,qBAAqB,GAAG;AAC9C,mBAAe,OAAO,uBAAuB,iBAAiB;AAAA,EAChE;AACF;"}

package/dist/components/multi-select/index.d.ts

@@ -0,0 +1,3 @@
+export { Ui9000MultiSelect, registerMultiSelect } from './element/ui9000-multi-select.js';
+export { default as multiSelectMetadata } from './metadata.json';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/multi-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/multi-select/index.js

@@ -0,0 +1,9 @@
+import { registerMultiSelect } from "./element/ui9000-multi-select.js";
+import { Ui9000MultiSelect } from "./element/ui9000-multi-select.js";
+import { default as default2 } from "./metadata.json.js";
+export {
+  Ui9000MultiSelect,
+  default2 as multiSelectMetadata,
+  registerMultiSelect
+};
+//# sourceMappingURL=index.js.map

package/dist/components/multi-select/index.js.map

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

package/dist/components/multi-select/metadata.json.d.ts

@@ -0,0 +1,99 @@
+declare const _default: {
+  "id": "multi-select",
+  "tag": "ui9000-multi-select",
+  "title": "Multi-select",
+  "description": "Multi-select control. Fail-closed without a label.",
+  "chartTypeKeys": [],
+  "source": "ui9000-widgets Stage 2 close-out",
+  "stack": "lit",
+  "lazyImport": "@ui9000/widgets/lazy/multi-select",
+  "entry": "@ui9000/widgets/multi-select",
+  "usageConditions": {
+    "host": "mcp-chat",
+    "notFor": "fusedash-editor",
+    "mapsExcluded": true
+  },
+  "allowedActions": [
+    "resize"
+  ],
+  "tier": "engine",
+  "intents": [
+    "form"
+  ],
+  "dataRoles": [
+    {
+      "id": "value",
+      "required": false,
+      "description": "Control value."
+    }
+  ],
+  "eligibility": [
+    {
+      "when": "profile.allControlsLabelled && profile.controlCount >= 1",
+      "reason": "Form controls are eligible when every control has a label."
+    }
+  ],
+  "disqualify": [
+    {
+      "when": "!profile.allControlsLabelled",
+      "reason": "Unlabelled control is refused."
+    },
+    {
+      "when": "profile.controlCount === 0",
+      "reason": "No controls to render."
+    }
+  ],
+  "accessibility": {
+    "nameFrom": "label",
+    "keyboard": [
+      "Tab into the labelled control"
+    ],
+    "shadowBoundary": "Do not use aria-labelledby across the host; set aria-label on the host element."
+  },
+  "evalCases": [
+    {
+      "id": "multi-select-picks-labelled",
+      "intent": "form",
+      "profile": {
+        "allControlsLabelled": true,
+        "controlCount": 1
+      },
+      "expect": "eligible",
+      "reasonIncludes": "label"
+    },
+    {
+      "id": "multi-select-rejects-unlabelled",
+      "intent": "form",
+      "profile": {
+        "allControlsLabelled": false,
+        "controlCount": 1
+      },
+      "expect": "disqualified",
+      "reasonIncludes": "Unlabelled"
+    }
+  ],
+  "propsSchema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "type": "object",
+    "properties": {
+      "data": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string"
+          },
+          "name": {
+            "type": "string"
+          },
+          "value": {}
+        }
+      }
+    },
+    "required": [
+      "data"
+    ]
+  }
+}
+;
+
+export default _default;

package/dist/components/multi-select/metadata.json.js

@@ -0,0 +1,63 @@
+const id = "multi-select";
+const tag = "ui9000-multi-select";
+const title = "Multi-select";
+const description = "Multi-select control. Fail-closed without a label.";
+const chartTypeKeys = [];
+const source = "ui9000-widgets Stage 2 close-out";
+const stack = "lit";
+const lazyImport = "@ui9000/widgets/lazy/multi-select";
+const entry = "@ui9000/widgets/multi-select";
+const usageConditions = { "host": "mcp-chat", "notFor": "fusedash-editor", "mapsExcluded": true };
+const allowedActions = ["resize"];
+const tier = "engine";
+const intents = ["form"];
+const dataRoles = [{ "id": "value", "required": false, "description": "Control value." }];
+const eligibility = [{ "when": "profile.allControlsLabelled && profile.controlCount >= 1", "reason": "Form controls are eligible when every control has a label." }];
+const disqualify = [{ "when": "!profile.allControlsLabelled", "reason": "Unlabelled control is refused." }, { "when": "profile.controlCount === 0", "reason": "No controls to render." }];
+const accessibility = { "nameFrom": "label", "keyboard": ["Tab into the labelled control"], "shadowBoundary": "Do not use aria-labelledby across the host; set aria-label on the host element." };
+const evalCases = [{ "id": "multi-select-picks-labelled", "intent": "form", "profile": { "allControlsLabelled": true, "controlCount": 1 }, "expect": "eligible", "reasonIncludes": "label" }, { "id": "multi-select-rejects-unlabelled", "intent": "form", "profile": { "allControlsLabelled": false, "controlCount": 1 }, "expect": "disqualified", "reasonIncludes": "Unlabelled" }];
+const propsSchema = { "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "data": { "type": "object", "properties": { "label": { "type": "string" }, "name": { "type": "string" }, "value": {} } } }, "required": ["data"] };
+const metadata = {
+  id,
+  tag,
+  title,
+  description,
+  chartTypeKeys,
+  source,
+  stack,
+  lazyImport,
+  entry,
+  usageConditions,
+  allowedActions,
+  tier,
+  intents,
+  dataRoles,
+  eligibility,
+  disqualify,
+  accessibility,
+  evalCases,
+  propsSchema
+};
+export {
+  accessibility,
+  allowedActions,
+  chartTypeKeys,
+  dataRoles,
+  metadata as default,
+  description,
+  disqualify,
+  eligibility,
+  entry,
+  evalCases,
+  id,
+  intents,
+  lazyImport,
+  propsSchema,
+  source,
+  stack,
+  tag,
+  tier,
+  title,
+  usageConditions
+};
+//# sourceMappingURL=metadata.json.js.map

package/dist/components/multi-select/metadata.json.js.map

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

package/dist/components/network-graph/element/ui9000-network-graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-network-graph.d.ts","sourceRoot":"","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AA8B7F,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAA0C;IAGhE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,OAAO,CAA4B;IAG3C,OAAO,CAAC,MAAM,CAAmC;IAGjD,OAAO,CAAC,WAAW,CAAQ;IAE3B,oFAAoF;IACpF,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,WAAW,CAAC,CAIlB;IACF,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,UAAU,CAAK;IAEd,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAa/C;;;OAGG;IACH,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAKpB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,IAAI;IA2BZ,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IAyFX,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}
+{"version":3,"file":"ui9000-network-graph.d.ts","sourceRoot":"","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AA8B7F,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAA0C;IAGhE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,OAAO,CAA4B;IAG3C,OAAO,CAAC,MAAM,CAAmC;IAGjD,OAAO,CAAC,WAAW,CAAQ;IAE3B,oFAAoF;IACpF,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,WAAW,CAAC,CAIlB;IACF,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,UAAU,CAAK;IAEd,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAc/C;;;OAGG;IACH,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAKpB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,IAAI;IA2BZ,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IAyFX,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}

package/dist/components/network-graph/element/ui9000-network-graph.js

@@ -4,12 +4,12 @@ import { readThemeFromElement } from "../../../context/widget-context.js";
 import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { parseJsonAttr } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { stopNetworkGraph, resizeNetworkGraph, renderNetworkGraph, updateNetworkGraphVisibility } from "../render/draw.js";
-import { networkGraphStyles } from "./styles.js";
-import { FULL_RANGE, legendRanges, visibleNodeIds } from "../lib/domain.js";
 import { normalizeNetworkGraphData } from "../lib/normalize.js";
-import { slideThumb, rangeTrackOffset, thumbTrackPercent, sliderIndexFromPointer } from "../lib/legend.js";
+import { FULL_RANGE, legendRanges, visibleNodeIds } from "../lib/domain.js";
 import { formatLegendValue } from "../lib/format.js";
+import { slideThumb, rangeTrackOffset, thumbTrackPercent, sliderIndexFromPointer } from "../lib/legend.js";
+import { stopNetworkGraph, resizeNetworkGraph, renderNetworkGraph, updateNetworkGraphVisibility } from "../render/draw.js";
+import { networkGraphStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -60,6 +60,7 @@ let Ui9000NetworkGraph = class extends Ui9000ChartElement {
     }
     if (changed.has("showTooltip") && !this.showTooltip) {
       this._labelTooltip = null;
+      this.closeAllTooltips();
     }
     if (this.shouldRedraw(changed)) this.scheduleDraw();
   }

package/dist/components/network-graph/element/ui9000-network-graph.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-network-graph.js","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.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 { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  FULL_RANGE,\n  formatLegendValue,\n  legendRanges,\n  normalizeNetworkGraphData,\n  rangeTrackOffset,\n  slideThumb,\n  sliderIndexFromPointer,\n  thumbTrackPercent,\n  visibleNodeIds,\n  type NetworkGraphInput,\n  type NetworkGraphModel,\n  type NetworkLegendRange,\n  type NetworkRange,\n} from '../lib/index.js';\nimport {\n  renderNetworkGraph,\n  resizeNetworkGraph,\n  stopNetworkGraph,\n  updateNetworkGraphVisibility,\n} from '../render/draw.js';\nimport { networkGraphStyles } from './styles.js';\n\n/** Same diameters as map `DEFAULT_BUBBLES_RADIUS` (7 size steps). */\nconst LEGEND_BUBBLE_SIZES = [10, 15, 20, 25, 30, 35, 40];\nconst MUTED_LEGEND_FILL = '#6C758429';\n\n@customElement('ui9000-network-graph')\nexport class Ui9000NetworkGraph extends Ui9000ChartElement {\n  static override styles = [networkGraphStyles, 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  @state()\n  private _empty = false;\n\n  @state()\n  private _ranges: NetworkLegendRange[] = [];\n\n  @state()\n  private _range: NetworkRange = { ...FULL_RANGE };\n\n  @state()\n  private _legendOpen = true;\n\n  /** Non-reactive: selection is owned by the draw layer, redrawing would reset it. */\n  private _activeNodeId: string | null = null;\n\n  private _model: NetworkGraphModel | null = null;\n  private _legendDrag?: {\n    thumb: HTMLElement;\n    move: (e: PointerEvent) => void;\n    up: (e: PointerEvent) => void;\n  };\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _resizeRaf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    cancelAnimationFrame(this._resizeRaf);\n    this.stopLegendDrag();\n    const root = this.chartRoot();\n    if (root) stopNetworkGraph(root);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (changed.has('dataJson')) {\n      // New buckets: the old slider window and selection no longer mean anything.\n      this._range = { ...FULL_RANGE };\n      this._activeNodeId = null;\n      this._model = null;\n    }\n    if (changed.has('showTooltip') && !this.showTooltip) {\n      this._labelTooltip = null;\n    }\n    if (this.shouldRedraw(changed)) this.scheduleDraw();\n  }\n\n  /**\n   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force\n   * layout (same class of rule as filter/resize staying in place).\n   */\n  private shouldRedraw(changed: PropertyValues): boolean {\n    if (!chartPropsChanged(changed)) return false;\n    for (const key of changed.keys()) {\n      if (typeof key !== 'string' || key.startsWith('_')) continue;\n      if (key === 'showLegend' || key === 'showTooltip') continue;\n      return true;\n    }\n    return false;\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  /**\n   * A resize only re-frames the settled layout — re-running the force ticks\n   * would reshuffle the graph every time the chat pane changes width.\n   */\n  private scheduleResize(): void {\n    cancelAnimationFrame(this._resizeRaf);\n    this._resizeRaf = requestAnimationFrame(() => {\n      const root = this.chartRoot();\n      if (!root) return;\n      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();\n    });\n  }\n\n  private chartRoot(): HTMLElement | null {\n    return (this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null) ?? null;\n  }\n\n  private model(): NetworkGraphModel {\n    if (!this._model) {\n      this._model = normalizeNetworkGraphData(\n        parseJsonAttr<NetworkGraphInput | null>(this.dataJson, null),\n      );\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const root = this.chartRoot();\n    if (!root) return;\n\n    const model = this.model();\n    this._empty = model.nodes.length === 0;\n    this._ranges = legendRanges(model.breakpoints);\n\n    if (this._empty) {\n      stopNetworkGraph(root);\n      root.replaceChildren();\n      return;\n    }\n\n    renderNetworkGraph(root, {\n      model,\n      visibleIds: visibleNodeIds(model, this._range),\n      width: root.clientWidth,\n      height: root.clientHeight,\n      theme: readThemeFromElement(this),\n      activeNodeId: this._activeNodeId,\n      onSelect: (id) => {\n        this._activeNodeId = id;\n      },\n    });\n  }\n\n  private setRange(edge: 'leftSlider' | 'rightSlider', raw: number): void {\n    const next = slideThumb(this._range, edge, raw, this._ranges.length);\n    if (next.leftSlider === this._range.leftSlider && next.rightSlider === this._range.rightSlider) {\n      return;\n    }\n    this._range = next;\n    const root = this.chartRoot();\n    if (!root) return;\n    const visible = visibleNodeIds(this.model(), next);\n    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();\n  }\n\n  private startThumbDrag(edge: 'leftSlider' | 'rightSlider', e: PointerEvent): void {\n    const thumb = e.currentTarget;\n    if (!(thumb instanceof HTMLElement)) return;\n    const track = thumb.parentElement;\n    if (!track) return;\n    e.preventDefault();\n    e.stopPropagation();\n    thumb.setPointerCapture(e.pointerId);\n    this.stopLegendDrag();\n\n    const move = (ev: PointerEvent) => {\n      const index = sliderIndexFromPointer(\n        ev.clientX,\n        track.getBoundingClientRect(),\n        this._ranges.length,\n      );\n      this.setRange(edge, index);\n    };\n    const up = (ev: PointerEvent) => {\n      if (thumb.hasPointerCapture(ev.pointerId)) thumb.releasePointerCapture(ev.pointerId);\n      this.stopLegendDrag();\n    };\n    thumb.addEventListener('pointermove', move);\n    thumb.addEventListener('pointerup', up);\n    thumb.addEventListener('pointercancel', up);\n    this._legendDrag = { thumb, move, up };\n    move(e);\n  }\n\n  private stopLegendDrag(): void {\n    const drag = this._legendDrag;\n    if (!drag) return;\n    drag.thumb.removeEventListener('pointermove', drag.move);\n    drag.thumb.removeEventListener('pointerup', drag.up);\n    drag.thumb.removeEventListener('pointercancel', drag.up);\n    this._legendDrag = undefined;\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;\n    const { leftSlider, rightSlider } = this._range;\n    const last = this._ranges.length;\n    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();\n\n    return html`\n      <div class=\"graph-legend\" part=\"legend\">\n        <div class=\"legend-panel-header\">\n          <p class=\"legend-kicker\">Legend</p>\n          <button\n            type=\"button\"\n            class=\"legend-chevron\"\n            aria-expanded=${this._legendOpen}\n            aria-label=${this._legendOpen ? 'Collapse legend' : 'Expand legend'}\n            @click=${() => {\n              this._legendOpen = !this._legendOpen;\n            }}\n          ></button>\n        </div>\n        ${this._legendOpen\n          ? html`<div class=\"legend-layers\">\n              <div class=\"legend-layer\">\n                <div class=\"legend-details\">\n                  <div class=\"legend-scale\" data-kind=\"bubbles\">\n                    <div class=\"legend-colors\" data-qualitative>\n                      <div class=\"legend-range\">\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"left:${rangeTrackOffset('left', leftSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Smallest node size shown\"\n                            style=\"left:${thumbTrackPercent(leftSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('leftSlider', e)}\n                          ></button>\n                        </div>\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"right:${rangeTrackOffset('right', rightSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Largest node size shown\"\n                            style=\"left:${thumbTrackPercent(rightSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('rightSlider', e)}\n                          ></button>\n                        </div>\n                      </div>\n                      <div class=\"legend-buckets\">\n                        ${this._ranges.map((_range, index) => {\n                          const muted = !(leftSlider <= index && index < rightSlider);\n                          const bubble = LEGEND_BUBBLE_SIZES[index] ?? 12;\n                          const inner = bubble - 15 > 0 ? bubble - 15 : 0;\n                          return html`<span\n                            class=\"legend-bucket\"\n                            ?data-bubble=${true}\n                            ?data-inner=${inner > 0}\n                            ?data-qualitative=${true}\n                            ?data-muted=${muted}\n                            style=\"background:${MUTED_LEGEND_FILL};--bubble-size:${bubble}px;--inner-size:${inner}px\"\n                          ></span>`;\n                        })}\n                      </div>\n                    </div>\n                    <div class=\"legend-values\">\n                      ${this._ranges.map(\n                        (range) => html`<span\n                          class=\"legend-value\"\n                          @mouseenter=${this.showTooltip\n                            ? (e: MouseEvent) => onAxisLabelHover?.(String(range.start), e)\n                            : undefined}\n                          @mouseleave=${this.showTooltip ? onAxisLabelLeave : undefined}\n                          >${formatLegendValue(range.start, 2)}</span\n                        >`,\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this.renderLegend()}\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Network graph requires a nodes and links payload.\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-network-graph': Ui9000NetworkGraph;\n  }\n}\n\nexport function registerNetworkGraph(): void {\n  if (!customElements.get('ui9000-network-graph')) {\n    customElements.define('ui9000-network-graph', Ui9000NetworkGraph);\n  }\n}\n\nregisterNetworkGraph();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-network-graph.js","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.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 { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  FULL_RANGE,\n  formatLegendValue,\n  legendRanges,\n  normalizeNetworkGraphData,\n  rangeTrackOffset,\n  slideThumb,\n  sliderIndexFromPointer,\n  thumbTrackPercent,\n  visibleNodeIds,\n  type NetworkGraphInput,\n  type NetworkGraphModel,\n  type NetworkLegendRange,\n  type NetworkRange,\n} from '../lib/index.js';\nimport {\n  renderNetworkGraph,\n  resizeNetworkGraph,\n  stopNetworkGraph,\n  updateNetworkGraphVisibility,\n} from '../render/draw.js';\nimport { networkGraphStyles } from './styles.js';\n\n/** Same diameters as map `DEFAULT_BUBBLES_RADIUS` (7 size steps). */\nconst LEGEND_BUBBLE_SIZES = [10, 15, 20, 25, 30, 35, 40];\nconst MUTED_LEGEND_FILL = '#6C758429';\n\n@customElement('ui9000-network-graph')\nexport class Ui9000NetworkGraph extends Ui9000ChartElement {\n  static override styles = [networkGraphStyles, 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  @state()\n  private _empty = false;\n\n  @state()\n  private _ranges: NetworkLegendRange[] = [];\n\n  @state()\n  private _range: NetworkRange = { ...FULL_RANGE };\n\n  @state()\n  private _legendOpen = true;\n\n  /** Non-reactive: selection is owned by the draw layer, redrawing would reset it. */\n  private _activeNodeId: string | null = null;\n\n  private _model: NetworkGraphModel | null = null;\n  private _legendDrag?: {\n    thumb: HTMLElement;\n    move: (e: PointerEvent) => void;\n    up: (e: PointerEvent) => void;\n  };\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _resizeRaf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    cancelAnimationFrame(this._resizeRaf);\n    this.stopLegendDrag();\n    const root = this.chartRoot();\n    if (root) stopNetworkGraph(root);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (changed.has('dataJson')) {\n      // New buckets: the old slider window and selection no longer mean anything.\n      this._range = { ...FULL_RANGE };\n      this._activeNodeId = null;\n      this._model = null;\n    }\n    if (changed.has('showTooltip') && !this.showTooltip) {\n      this._labelTooltip = null;\n      this.closeAllTooltips();\n    }\n    if (this.shouldRedraw(changed)) this.scheduleDraw();\n  }\n\n  /**\n   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force\n   * layout (same class of rule as filter/resize staying in place).\n   */\n  private shouldRedraw(changed: PropertyValues): boolean {\n    if (!chartPropsChanged(changed)) return false;\n    for (const key of changed.keys()) {\n      if (typeof key !== 'string' || key.startsWith('_')) continue;\n      if (key === 'showLegend' || key === 'showTooltip') continue;\n      return true;\n    }\n    return false;\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  /**\n   * A resize only re-frames the settled layout — re-running the force ticks\n   * would reshuffle the graph every time the chat pane changes width.\n   */\n  private scheduleResize(): void {\n    cancelAnimationFrame(this._resizeRaf);\n    this._resizeRaf = requestAnimationFrame(() => {\n      const root = this.chartRoot();\n      if (!root) return;\n      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();\n    });\n  }\n\n  private chartRoot(): HTMLElement | null {\n    return (this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null) ?? null;\n  }\n\n  private model(): NetworkGraphModel {\n    if (!this._model) {\n      this._model = normalizeNetworkGraphData(\n        parseJsonAttr<NetworkGraphInput | null>(this.dataJson, null),\n      );\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const root = this.chartRoot();\n    if (!root) return;\n\n    const model = this.model();\n    this._empty = model.nodes.length === 0;\n    this._ranges = legendRanges(model.breakpoints);\n\n    if (this._empty) {\n      stopNetworkGraph(root);\n      root.replaceChildren();\n      return;\n    }\n\n    renderNetworkGraph(root, {\n      model,\n      visibleIds: visibleNodeIds(model, this._range),\n      width: root.clientWidth,\n      height: root.clientHeight,\n      theme: readThemeFromElement(this),\n      activeNodeId: this._activeNodeId,\n      onSelect: (id) => {\n        this._activeNodeId = id;\n      },\n    });\n  }\n\n  private setRange(edge: 'leftSlider' | 'rightSlider', raw: number): void {\n    const next = slideThumb(this._range, edge, raw, this._ranges.length);\n    if (next.leftSlider === this._range.leftSlider && next.rightSlider === this._range.rightSlider) {\n      return;\n    }\n    this._range = next;\n    const root = this.chartRoot();\n    if (!root) return;\n    const visible = visibleNodeIds(this.model(), next);\n    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();\n  }\n\n  private startThumbDrag(edge: 'leftSlider' | 'rightSlider', e: PointerEvent): void {\n    const thumb = e.currentTarget;\n    if (!(thumb instanceof HTMLElement)) return;\n    const track = thumb.parentElement;\n    if (!track) return;\n    e.preventDefault();\n    e.stopPropagation();\n    thumb.setPointerCapture(e.pointerId);\n    this.stopLegendDrag();\n\n    const move = (ev: PointerEvent) => {\n      const index = sliderIndexFromPointer(\n        ev.clientX,\n        track.getBoundingClientRect(),\n        this._ranges.length,\n      );\n      this.setRange(edge, index);\n    };\n    const up = (ev: PointerEvent) => {\n      if (thumb.hasPointerCapture(ev.pointerId)) thumb.releasePointerCapture(ev.pointerId);\n      this.stopLegendDrag();\n    };\n    thumb.addEventListener('pointermove', move);\n    thumb.addEventListener('pointerup', up);\n    thumb.addEventListener('pointercancel', up);\n    this._legendDrag = { thumb, move, up };\n    move(e);\n  }\n\n  private stopLegendDrag(): void {\n    const drag = this._legendDrag;\n    if (!drag) return;\n    drag.thumb.removeEventListener('pointermove', drag.move);\n    drag.thumb.removeEventListener('pointerup', drag.up);\n    drag.thumb.removeEventListener('pointercancel', drag.up);\n    this._legendDrag = undefined;\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;\n    const { leftSlider, rightSlider } = this._range;\n    const last = this._ranges.length;\n    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();\n\n    return html`\n      <div class=\"graph-legend\" part=\"legend\">\n        <div class=\"legend-panel-header\">\n          <p class=\"legend-kicker\">Legend</p>\n          <button\n            type=\"button\"\n            class=\"legend-chevron\"\n            aria-expanded=${this._legendOpen}\n            aria-label=${this._legendOpen ? 'Collapse legend' : 'Expand legend'}\n            @click=${() => {\n              this._legendOpen = !this._legendOpen;\n            }}\n          ></button>\n        </div>\n        ${this._legendOpen\n          ? html`<div class=\"legend-layers\">\n              <div class=\"legend-layer\">\n                <div class=\"legend-details\">\n                  <div class=\"legend-scale\" data-kind=\"bubbles\">\n                    <div class=\"legend-colors\" data-qualitative>\n                      <div class=\"legend-range\">\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"left:${rangeTrackOffset('left', leftSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Smallest node size shown\"\n                            style=\"left:${thumbTrackPercent(leftSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('leftSlider', e)}\n                          ></button>\n                        </div>\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"right:${rangeTrackOffset('right', rightSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Largest node size shown\"\n                            style=\"left:${thumbTrackPercent(rightSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('rightSlider', e)}\n                          ></button>\n                        </div>\n                      </div>\n                      <div class=\"legend-buckets\">\n                        ${this._ranges.map((_range, index) => {\n                          const muted = !(leftSlider <= index && index < rightSlider);\n                          const bubble = LEGEND_BUBBLE_SIZES[index] ?? 12;\n                          const inner = bubble - 15 > 0 ? bubble - 15 : 0;\n                          return html`<span\n                            class=\"legend-bucket\"\n                            ?data-bubble=${true}\n                            ?data-inner=${inner > 0}\n                            ?data-qualitative=${true}\n                            ?data-muted=${muted}\n                            style=\"background:${MUTED_LEGEND_FILL};--bubble-size:${bubble}px;--inner-size:${inner}px\"\n                          ></span>`;\n                        })}\n                      </div>\n                    </div>\n                    <div class=\"legend-values\">\n                      ${this._ranges.map(\n                        (range) => html`<span\n                          class=\"legend-value\"\n                          @mouseenter=${this.showTooltip\n                            ? (e: MouseEvent) => onAxisLabelHover?.(String(range.start), e)\n                            : undefined}\n                          @mouseleave=${this.showTooltip ? onAxisLabelLeave : undefined}\n                          >${formatLegendValue(range.start, 2)}</span\n                        >`,\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this.renderLegend()}\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Network graph requires a nodes and links payload.\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-network-graph': Ui9000NetworkGraph;\n  }\n}\n\nexport function registerNetworkGraph(): void {\n  if (!customElements.get('ui9000-network-graph')) {\n    customElements.define('ui9000-network-graph', Ui9000NetworkGraph);\n  }\n}\n\nregisterNetworkGraph();\n"],"names":[],"mappings":"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"}

package/dist/components/network-graph/index.js

@@ -1,10 +1,10 @@
 import { registerNetworkGraph } from "./element/ui9000-network-graph.js";
 import { Ui9000NetworkGraph } from "./element/ui9000-network-graph.js";
-import { default as default2 } from "./metadata.json.js";
-import { FULL_RANGE, LINK_COLORS, NODE_SIZES, NODE_TYPE_COLORS, SIZE_KEYS, isFullRange, legendRanges, networkForces, nodeColor, nodeRadius, nodeSizeKey, rangeIndexOf, scaleLinkWidthByMax, visibleNodeIds } from "./lib/domain.js";
+import { renderNetworkGraph, resizeNetworkGraph, stopNetworkGraph, updateNetworkGraphVisibility } from "./render/draw.js";
 import { MAX_NETWORK_LINKS, MAX_NETWORK_NODES, normalizeNetworkGraphData } from "./lib/normalize.js";
+import { FULL_RANGE, LINK_COLORS, NODE_SIZES, NODE_TYPE_COLORS, SIZE_KEYS, isFullRange, legendRanges, networkForces, nodeColor, nodeRadius, nodeSizeKey, rangeIndexOf, scaleLinkWidthByMax, visibleNodeIds } from "./lib/domain.js";
 import { formatLegendValue, formatLinkValue, formatNodeValue } from "./lib/format.js";
-import { renderNetworkGraph, resizeNetworkGraph, stopNetworkGraph, updateNetworkGraphVisibility } from "./render/draw.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   FULL_RANGE,
   LINK_COLORS,