@fusedashlabs/widgets 0.2.0 → 0.3.1

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

@@ -0,0 +1,230 @@
+import { nothing, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+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 { formatLegendValue } 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) => {
+  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;
+};
+const LEGEND_BUBBLE_RATIO = 1.2;
+let Ui9000NetworkGraph = class extends Ui9000ChartElement {
+  constructor() {
+    super(...arguments);
+    this.showLegend = true;
+    this.showTooltip = true;
+    this._empty = false;
+    this._ranges = [];
+    this._range = { ...FULL_RANGE };
+    this._activeNodeId = null;
+    this._model = null;
+    this._raf = 0;
+    this._resizeRaf = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    cancelAnimationFrame(this._raf);
+    cancelAnimationFrame(this._resizeRaf);
+    const root = this.chartRoot();
+    if (root) stopNetworkGraph(root);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("dataJson")) {
+      this._range = { ...FULL_RANGE };
+      this._activeNodeId = null;
+      this._model = null;
+    }
+    if (changed.has("showTooltip") && !this.showTooltip) {
+      this._labelTooltip = null;
+    }
+    if (this.shouldRedraw(changed)) this.scheduleDraw();
+  }
+  /**
+   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force
+   * layout (same class of rule as filter/resize staying in place).
+   */
+  shouldRedraw(changed) {
+    if (!chartPropsChanged(changed)) return false;
+    for (const key of changed.keys()) {
+      if (typeof key !== "string" || key.startsWith("_")) continue;
+      if (key === "showLegend" || key === "showTooltip") continue;
+      return true;
+    }
+    return false;
+  }
+  scheduleDraw() {
+    cancelAnimationFrame(this._raf);
+    this._raf = requestAnimationFrame(() => this.draw());
+  }
+  /**
+   * A resize only re-frames the settled layout — re-running the force ticks
+   * would reshuffle the graph every time the chat pane changes width.
+   */
+  scheduleResize() {
+    cancelAnimationFrame(this._resizeRaf);
+    this._resizeRaf = requestAnimationFrame(() => {
+      const root = this.chartRoot();
+      if (!root) return;
+      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();
+    });
+  }
+  chartRoot() {
+    var _a;
+    return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root")) ?? null;
+  }
+  model() {
+    if (!this._model) {
+      this._model = normalizeNetworkGraphData(
+        parseJsonAttr(this.dataJson, null)
+      );
+    }
+    return this._model;
+  }
+  draw() {
+    const root = this.chartRoot();
+    if (!root) return;
+    const model = this.model();
+    this._empty = model.nodes.length === 0;
+    this._ranges = legendRanges(model.breakpoints);
+    if (this._empty) {
+      stopNetworkGraph(root);
+      root.replaceChildren();
+      return;
+    }
+    renderNetworkGraph(root, {
+      model,
+      visibleIds: visibleNodeIds(model, this._range),
+      width: root.clientWidth,
+      height: root.clientHeight,
+      theme: readThemeFromElement(this),
+      activeNodeId: this._activeNodeId,
+      onSelect: (id) => {
+        this._activeNodeId = id;
+      }
+    });
+  }
+  setRange(edge, raw) {
+    const next = { ...this._range, [edge]: raw };
+    if (next.leftSlider >= next.rightSlider) return;
+    this._range = next;
+    const root = this.chartRoot();
+    if (!root) return;
+    const visible = visibleNodeIds(this.model(), next);
+    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();
+  }
+  renderLegend() {
+    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;
+    const { leftSlider, rightSlider } = this._range;
+    const last = this._ranges.length;
+    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();
+    return html`
+      <div class="graph-legend" part="legend">
+        <div class="legend-scale">
+          ${this._ranges.map((range, index) => {
+      const muted = !(leftSlider <= index && index < rightSlider);
+      return html`<span
+              class="legend-bucket"
+              ?data-muted=${muted}
+              style="--bubble-size:${range.radius * LEGEND_BUBBLE_RATIO}px"
+            ></span>`;
+    })}
+          <div class="legend-range">
+            <input
+              type="range"
+              aria-label="Smallest node size shown"
+              min="0"
+              max=${last}
+              step="1"
+              .value=${String(leftSlider)}
+              @input=${(e) => this.setRange("leftSlider", Number(e.target.value))}
+            />
+            <input
+              type="range"
+              aria-label="Largest node size shown"
+              min="0"
+              max=${last}
+              step="1"
+              .value=${String(rightSlider)}
+              @input=${(e) => this.setRange("rightSlider", Number(e.target.value))}
+            />
+          </div>
+        </div>
+        <div class="legend-values">
+          ${this._ranges.map(
+      (range) => html`<span
+              class="legend-value"
+              @mouseenter=${this.showTooltip ? (e) => onAxisLabelHover == null ? void 0 : onAxisLabelHover(String(range.start), e) : void 0}
+              @mouseleave=${this.showTooltip ? onAxisLabelLeave : void 0}
+              >${formatLegendValue(range.start, 2)}</span
+            >`
+    )}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return html`
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(this.headerTitle())}
+        <div class="widget-body">
+          ${this.renderLegend()}
+          <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
+          ${this._empty ? html`<div class="empty" part="empty">
+                Network graph requires a nodes and links payload.
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
+    `;
+  }
+};
+Ui9000NetworkGraph.styles = [networkGraphStyles, chartShellStyles];
+__decorateClass([
+  property({ type: Boolean, attribute: "show-legend" })
+], Ui9000NetworkGraph.prototype, "showLegend", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-tooltip" })
+], Ui9000NetworkGraph.prototype, "showTooltip", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_empty", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_ranges", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_range", 2);
+Ui9000NetworkGraph = __decorateClass([
+  customElement("ui9000-network-graph")
+], Ui9000NetworkGraph);
+function registerNetworkGraph() {
+  if (!customElements.get("ui9000-network-graph")) {
+    customElements.define("ui9000-network-graph", Ui9000NetworkGraph);
+  }
+}
+registerNetworkGraph();
+export {
+  Ui9000NetworkGraph,
+  registerNetworkGraph
+};
+//# sourceMappingURL=ui9000-network-graph.js.map

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

@@ -0,0 +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  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/** Legend bubbles are drawn at 1.2x the node radius they stand for (client). */\nconst LEGEND_BUBBLE_RATIO = 1.2;\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  /** 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 _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    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 = { ...this._range, [edge]: raw };\n    if (next.leftSlider >= next.rightSlider) return;\n    // `_range` is internal state, so `updated()` re-renders the legend without\n    // scheduling a redraw — the filter is pushed into the live graph instead.\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 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-scale\">\n          ${this._ranges.map((range, index) => {\n            const muted = !(leftSlider <= index && index < rightSlider);\n            return html`<span\n              class=\"legend-bucket\"\n              ?data-muted=${muted}\n              style=\"--bubble-size:${range.radius * LEGEND_BUBBLE_RATIO}px\"\n            ></span>`;\n          })}\n          <div class=\"legend-range\">\n            <input\n              type=\"range\"\n              aria-label=\"Smallest node size shown\"\n              min=\"0\"\n              max=${last}\n              step=\"1\"\n              .value=${String(leftSlider)}\n              @input=${(e: Event) =>\n                this.setRange('leftSlider', Number((e.target as HTMLInputElement).value))}\n            />\n            <input\n              type=\"range\"\n              aria-label=\"Largest node size shown\"\n              min=\"0\"\n              max=${last}\n              step=\"1\"\n              .value=${String(rightSlider)}\n              @input=${(e: Event) =>\n                this.setRange('rightSlider', Number((e.target as HTMLInputElement).value))}\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    `;\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          ${this.renderLegend()}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\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.d.ts

@@ -0,0 +1,5 @@
+export { Ui9000NetworkGraph, registerNetworkGraph, } from './element/ui9000-network-graph.js';
+export { renderNetworkGraph, resizeNetworkGraph, stopNetworkGraph, updateNetworkGraphVisibility, type NetworkGraphController, type RenderNetworkGraphOptions, } from './render/index.js';
+export { FULL_RANGE, LINK_COLORS, MAX_NETWORK_LINKS, MAX_NETWORK_NODES, NODE_SIZES, NODE_TYPE_COLORS, SIZE_KEYS, formatLegendValue, formatLinkValue, formatNodeValue, isFullRange, legendRanges, networkForces, nodeColor, nodeRadius, nodeSizeKey, normalizeNetworkGraphData, rangeIndexOf, scaleLinkWidthByMax, visibleNodeIds, type NetworkGraphInput, type NetworkGraphModel, type NetworkLegendRange, type NetworkLink, type NetworkLinkKind, type NetworkNode, type NetworkRange, type NetworkSizeKey, } from './lib/index.js';
+export { default as networkGraphMetadata } from './metadata.json';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/network-graph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/network-graph/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,4BAA4B,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,GAC/B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,WAAW,EACX,YAAY,EACZ,aAAa,EACb,SAAS,EACT,UAAU,EACV,WAAW,EACX,yBAAyB,EACzB,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,37 @@
+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 { MAX_NETWORK_LINKS, MAX_NETWORK_NODES, normalizeNetworkGraphData } from "./lib/normalize.js";
+import { formatLegendValue, formatLinkValue, formatNodeValue } from "./lib/format.js";
+import { renderNetworkGraph, resizeNetworkGraph, stopNetworkGraph, updateNetworkGraphVisibility } from "./render/draw.js";
+export {
+  FULL_RANGE,
+  LINK_COLORS,
+  MAX_NETWORK_LINKS,
+  MAX_NETWORK_NODES,
+  NODE_SIZES,
+  NODE_TYPE_COLORS,
+  SIZE_KEYS,
+  Ui9000NetworkGraph,
+  formatLegendValue,
+  formatLinkValue,
+  formatNodeValue,
+  isFullRange,
+  legendRanges,
+  networkForces,
+  default2 as networkGraphMetadata,
+  nodeColor,
+  nodeRadius,
+  nodeSizeKey,
+  normalizeNetworkGraphData,
+  rangeIndexOf,
+  registerNetworkGraph,
+  renderNetworkGraph,
+  resizeNetworkGraph,
+  scaleLinkWidthByMax,
+  stopNetworkGraph,
+  updateNetworkGraphVisibility,
+  visibleNodeIds
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/network-graph/lib/domain.d.ts

@@ -0,0 +1,96 @@
+import { NetworkGraphModel, NetworkLegendRange, NetworkNode, NetworkRange, NetworkSizeKey } from './types.js';
+/** Client `NODE_SIZES` — bucket → circle radius in px. */
+export declare const NODE_SIZES: Record<NetworkSizeKey, number>;
+/** Client `SIZE_KEYS` — one per break point, smallest first. */
+export declare const SIZE_KEYS: NetworkSizeKey[];
+/** Buckets above `md` keep their label on screen at rest (client rule). */
+export declare const LABEL_ALWAYS_ABOVE: number;
+export declare const NODE_BORDER_WIDTH = 1;
+export declare const SHADOW_RADIUS_RATIO = 1.5;
+export declare const MIN_LINK_WIDTH = 0.8;
+export declare const MAX_LINK_WIDTH = 20;
+/** Resting stroke width for every link (client). */
+export declare const LINK_WIDTH = 2;
+export declare const MIN_LINK_DISTANCE = 20;
+export declare const MAX_LINK_DISTANCE = 100;
+/** Client `LINK_COLORS`. */
+export declare const LINK_COLORS: {
+    readonly neutral: "rgba(207, 210, 214, 1)";
+    readonly primary: "rgba(71, 176, 255, 0.5)";
+    readonly secondary: "rgba(255, 140, 71, 0.5)";
+};
+/** Client `DEFAULT_NODE_COLOR`. */
+export declare const DEFAULT_NODE_COLOR = "#64748B";
+/** Client `NODE_TYPE_COLORS` — category key → fill for a node without an image. */
+export declare const NODE_TYPE_COLORS: Record<string, string>;
+/** Full bucket window — no filtering (client `DEFAULT_SLIDER_RANGE`). */
+export declare const FULL_RANGE: NetworkRange;
+/** Client `getNodeSizeFromBreakpoints`. */
+export declare function nodeSizeKey(value: number | undefined, breakpoints: number[]): NetworkSizeKey;
+export declare function nodeRadius(node: NetworkNode, breakpoints: number[]): number;
+export declare function shadowRadius(node: NetworkNode, breakpoints: number[]): number;
+/** Client `getNodeColor` — explicit colour, then category, then the slate default. */
+export declare function nodeColor(node: NetworkNode): string;
+/** Client `scaleLinkWidthByMax` — resting links stay at `LINK_WIDTH`. */
+export declare function scaleLinkWidthByMax(value: number, maxValue: number): number;
+/** Client `getNodeRangeIndex` — which bucket a value falls into. */
+export declare function rangeIndexOf(value: number, breakpoints: number[]): number;
+export declare function isFullRange(range: NetworkRange): boolean;
+/**
+ * Client `filterGraphDataBySliderRange`, reduced to the id set the draw layer
+ * needs: hidden nodes stay in the simulation so the layout does not jump.
+ * `null` means "everything is visible".
+ */
+export declare function visibleNodeIds(model: NetworkGraphModel, range: NetworkRange): Set<string> | null;
+/**
+ * Client `Legends` ranges — one bubble per break point, the last stretched to
+ * 3x so the largest node still lands in a bucket.
+ */
+export declare function legendRanges(breakpoints: number[]): NetworkLegendRange[];
+/**
+ * The client lays the simulation out on a fixed 2000x1375 canvas and zooms into
+ * it. Chat gives the chart its container instead, so the spatial forces are
+ * scaled against that canvas — same spacing relative to the room available.
+ */
+export declare const FORCE_CANVAS_REFERENCE = 1375;
+/**
+ * Slack between the largest node and its collision ring. The client gets this
+ * for free from a flat 60px radius on a canvas where nodes cap at 32px; keeping
+ * the same cushion is what stops the labels from stacking on top of each other.
+ */
+export declare const NODE_COLLIDE_PAD = 36;
+export interface NetworkForces {
+    charge: number;
+    collide: number;
+    linkDistance: number;
+}
+export declare function networkForces(width: number, height: number, maxNodeRadius: number): NetworkForces;
+/** Client `INITIAL_NODE_RADIUS_RATIO` — seed spread as a share of the canvas. */
+export declare const INITIAL_NODE_RADIUS_RATIO = 0.2;
+/** Node chrome (client `createNodeElements`). */
+export declare const NODE_COLORS: {
+    /** Blue bloom under every node. */
+    readonly glow: "#473DD9";
+    /** Hairline ring drawn on the circle edge. */
+    readonly innerBorder: "#FFFFFF";
+    /** Accent ring one pixel outside it. */
+    readonly outerBorder: "#473DD9";
+    /** Fill of a selected node that carries no image. */
+    readonly activeFill: "#000000";
+    readonly shadowInner: "#141C2C";
+    readonly shadowOuter: "#5F6877";
+};
+/** Node label chrome (client `createNodeLabel`). */
+export declare const NODE_LABEL_COLORS: {
+    readonly text: "rgba(33, 38, 46, 0.9)";
+    readonly textActive: "#FFFFFF";
+    readonly background: "#FFFFFF00";
+    readonly backgroundHover: "#FFFFFF";
+    readonly backgroundActive: "#000000";
+};
+/** Link value pill (client `link-label`). */
+export declare const LINK_LABEL_COLORS: {
+    readonly background: "rgba(19, 22, 29, 1)";
+    readonly text: "rgba(239, 240, 241, 1)";
+};
+//# sourceMappingURL=domain.d.ts.map

package/dist/components/network-graph/lib/domain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"domain.d.ts","sourceRoot":"","sources":["../../../../src/components/network-graph/lib/domain.ts"],"names":[],"mappings":"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"}

package/dist/components/network-graph/lib/domain.js

@@ -0,0 +1,211 @@
+const NODE_SIZES = {
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  "2xl": 24,
+  "3xl": 32
+};
+const SIZE_KEYS = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+];
+const LABEL_ALWAYS_ABOVE = NODE_SIZES.md;
+const NODE_BORDER_WIDTH = 1;
+const SHADOW_RADIUS_RATIO = 1.5;
+const MIN_LINK_WIDTH = 0.8;
+const MAX_LINK_WIDTH = 20;
+const LINK_WIDTH = 2;
+const MIN_LINK_DISTANCE = 20;
+const MAX_LINK_DISTANCE = 100;
+const LINK_COLORS = {
+  neutral: "rgba(207, 210, 214, 1)",
+  primary: "rgba(71, 176, 255, 0.5)",
+  secondary: "rgba(255, 140, 71, 0.5)"
+};
+const DEFAULT_NODE_COLOR = "#64748B";
+const NODE_TYPE_COLORS = {
+  bank: "#2563EB",
+  invest: "#10B981",
+  regional: "#F59E0B",
+  vc: "#8B5CF6",
+  crypto: "#F97316",
+  exchange: "#06B6D4",
+  blockchain: "#6366F1",
+  defi: "#EC4899",
+  company: "#3B82F6",
+  startup: "#14B8A6",
+  platform: "#A855F7",
+  service: "#0EA5E9",
+  person: "#EF4444",
+  organization: "#64748B",
+  community: "#84CC16",
+  university: "#1E40AF",
+  institute: "#7C3AED",
+  program: "#059669",
+  studio: "#DC2626",
+  streaming: "#BE185D",
+  producer: "#B91C1C",
+  network: "#1F2937",
+  tech: "#3B82F6",
+  gaming: "#8B5CF6",
+  lifestyle: "#EC4899",
+  accelerator: "#10B981",
+  manufacturer: "#6366F1",
+  distributor: "#F59E0B",
+  retailer: "#06B6D4",
+  supplier: "#14B8A6",
+  cloud: "#0EA5E9",
+  saas: "#3B82F6",
+  integration: "#8B5CF6",
+  framework: "#10B981",
+  foundation: "#64748B",
+  sponsor: "#F59E0B",
+  ai: "#6366F1",
+  physics: "#8B5CF6",
+  biology: "#10B981",
+  corporate: "#3B82F6",
+  global: "#1E40AF",
+  financial: "#059669",
+  ivy: "#7C3AED",
+  domain: "#EC4899",
+  research: "#14B8A6",
+  developer: "#F97316",
+  mission: "#4338CA",
+  goal: "#A78BFA",
+  insight: "#34D399",
+  event: "#93C5FD",
+  blocker: "#F43F5E",
+  entity: "#4B5563",
+  source: "#CBD5E1"
+};
+const FULL_RANGE = { leftSlider: 0, rightSlider: 7 };
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function nodeSizeKey(value, breakpoints) {
+  if (!value || !breakpoints.length) return "sm";
+  for (let i = 0; i < breakpoints.length; i++) {
+    if (value <= breakpoints[i]) return SIZE_KEYS[i] ?? "sm";
+  }
+  return SIZE_KEYS[SIZE_KEYS.length - 1];
+}
+function nodeRadius(node, breakpoints) {
+  return NODE_SIZES[nodeSizeKey(node.value, breakpoints)];
+}
+function shadowRadius(node, breakpoints) {
+  return nodeRadius(node, breakpoints) * SHADOW_RADIUS_RATIO;
+}
+function nodeColor(node) {
+  return node.color || NODE_TYPE_COLORS[node.type] || DEFAULT_NODE_COLOR;
+}
+function scaleLinkWidthByMax(value, maxValue) {
+  if (maxValue <= 0) return MIN_LINK_WIDTH;
+  const ratio = clamp(value / maxValue, 0, 1);
+  return MIN_LINK_WIDTH + ratio * (MAX_LINK_WIDTH - MIN_LINK_WIDTH);
+}
+function rangeIndexOf(value, breakpoints) {
+  for (let i = 0; i < breakpoints.length; i++) {
+    if (value <= breakpoints[i]) return i;
+  }
+  return breakpoints.length - 1;
+}
+function isFullRange(range) {
+  return range.leftSlider === FULL_RANGE.leftSlider && range.rightSlider === FULL_RANGE.rightSlider;
+}
+function visibleNodeIds(model, range) {
+  if (isFullRange(range) || !model.breakpoints.length) return null;
+  const ids = /* @__PURE__ */ new Set();
+  for (const node of model.nodes) {
+    if (typeof node.value !== "number") continue;
+    const index = rangeIndexOf(node.value, model.breakpoints);
+    if (range.leftSlider <= index && index < range.rightSlider) ids.add(node.id);
+  }
+  return ids;
+}
+function legendRanges(breakpoints) {
+  return breakpoints.map((start, index) => ({
+    start,
+    end: index === breakpoints.length - 1 ? start * 3 : breakpoints[index + 1],
+    radius: NODE_SIZES[SIZE_KEYS[index] ?? "sm"]
+  }));
+}
+const FORCE_CANVAS_REFERENCE = 1375;
+const NODE_COLLIDE_PAD = 36;
+function networkForces(width, height, maxNodeRadius) {
+  const scale = clamp(Math.min(width, height) / FORCE_CANVAS_REFERENCE, 0.2, 1);
+  return {
+    charge: -1200 * scale,
+    collide: Math.max(60 * scale, maxNodeRadius + NODE_COLLIDE_PAD),
+    // The client re-rolls one random distance in [20, 100] per mount; a chat
+    // chart has to be reproducible, so the midpoint is used and then scaled.
+    linkDistance: clamp(
+      (MIN_LINK_DISTANCE + MAX_LINK_DISTANCE) / 2 * scale,
+      MIN_LINK_DISTANCE,
+      MAX_LINK_DISTANCE
+    )
+  };
+}
+const INITIAL_NODE_RADIUS_RATIO = 0.2;
+const NODE_COLORS = {
+  /** Blue bloom under every node. */
+  glow: "#473DD9",
+  /** Hairline ring drawn on the circle edge. */
+  innerBorder: "#FFFFFF",
+  /** Accent ring one pixel outside it. */
+  outerBorder: "#473DD9",
+  /** Fill of a selected node that carries no image. */
+  activeFill: "#000000",
+  shadowInner: "#141C2C",
+  shadowOuter: "#5F6877"
+};
+const NODE_LABEL_COLORS = {
+  text: "rgba(33, 38, 46, 0.9)",
+  textActive: "#FFFFFF",
+  background: "#FFFFFF00",
+  backgroundHover: "#FFFFFF",
+  backgroundActive: "#000000"
+};
+const LINK_LABEL_COLORS = {
+  background: "rgba(19, 22, 29, 1)",
+  text: "rgba(239, 240, 241, 1)"
+};
+export {
+  DEFAULT_NODE_COLOR,
+  FORCE_CANVAS_REFERENCE,
+  FULL_RANGE,
+  INITIAL_NODE_RADIUS_RATIO,
+  LABEL_ALWAYS_ABOVE,
+  LINK_COLORS,
+  LINK_LABEL_COLORS,
+  LINK_WIDTH,
+  MAX_LINK_DISTANCE,
+  MAX_LINK_WIDTH,
+  MIN_LINK_DISTANCE,
+  MIN_LINK_WIDTH,
+  NODE_BORDER_WIDTH,
+  NODE_COLLIDE_PAD,
+  NODE_COLORS,
+  NODE_LABEL_COLORS,
+  NODE_SIZES,
+  NODE_TYPE_COLORS,
+  SHADOW_RADIUS_RATIO,
+  SIZE_KEYS,
+  isFullRange,
+  legendRanges,
+  networkForces,
+  nodeColor,
+  nodeRadius,
+  nodeSizeKey,
+  rangeIndexOf,
+  scaleLinkWidthByMax,
+  shadowRadius,
+  visibleNodeIds
+};
+//# sourceMappingURL=domain.js.map

package/dist/components/network-graph/lib/domain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domain.js","sources":["../../../../src/components/network-graph/lib/domain.ts"],"sourcesContent":["import type {\n  NetworkGraphModel,\n  NetworkLegendRange,\n  NetworkNode,\n  NetworkRange,\n  NetworkSizeKey,\n} from './types.js';\n\n/** Client `NODE_SIZES` — bucket → circle radius in px. */\nexport const NODE_SIZES: Record<NetworkSizeKey, number> = {\n  xs: 4,\n  sm: 6,\n  md: 8,\n  lg: 12,\n  xl: 16,\n  '2xl': 24,\n  '3xl': 32,\n};\n\n/** Client `SIZE_KEYS` — one per break point, smallest first. */\nexport const SIZE_KEYS: NetworkSizeKey[] = [\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  '2xl',\n  '3xl',\n];\n\n/** Buckets above `md` keep their label on screen at rest (client rule). */\nexport const LABEL_ALWAYS_ABOVE = NODE_SIZES.md;\n\nexport const NODE_BORDER_WIDTH = 1;\nexport const SHADOW_RADIUS_RATIO = 1.5;\nexport const MIN_LINK_WIDTH = 0.8;\nexport const MAX_LINK_WIDTH = 20;\n/** Resting stroke width for every link (client). */\nexport const LINK_WIDTH = 2;\nexport const MIN_LINK_DISTANCE = 20;\nexport const MAX_LINK_DISTANCE = 100;\n\n/** Client `LINK_COLORS`. */\nexport const LINK_COLORS = {\n  neutral: 'rgba(207, 210, 214, 1)',\n  primary: 'rgba(71, 176, 255, 0.5)',\n  secondary: 'rgba(255, 140, 71, 0.5)',\n} as const;\n\n/** Client `DEFAULT_NODE_COLOR`. */\nexport const DEFAULT_NODE_COLOR = '#64748B';\n\n/** Client `NODE_TYPE_COLORS` — category key → fill for a node without an image. */\nexport const NODE_TYPE_COLORS: Record<string, string> = {\n  bank: '#2563EB',\n  invest: '#10B981',\n  regional: '#F59E0B',\n  vc: '#8B5CF6',\n  crypto: '#F97316',\n  exchange: '#06B6D4',\n  blockchain: '#6366F1',\n  defi: '#EC4899',\n  company: '#3B82F6',\n  startup: '#14B8A6',\n  platform: '#A855F7',\n  service: '#0EA5E9',\n  person: '#EF4444',\n  organization: '#64748B',\n  community: '#84CC16',\n  university: '#1E40AF',\n  institute: '#7C3AED',\n  program: '#059669',\n  studio: '#DC2626',\n  streaming: '#BE185D',\n  producer: '#B91C1C',\n  network: '#1F2937',\n  tech: '#3B82F6',\n  gaming: '#8B5CF6',\n  lifestyle: '#EC4899',\n  accelerator: '#10B981',\n  manufacturer: '#6366F1',\n  distributor: '#F59E0B',\n  retailer: '#06B6D4',\n  supplier: '#14B8A6',\n  cloud: '#0EA5E9',\n  saas: '#3B82F6',\n  integration: '#8B5CF6',\n  framework: '#10B981',\n  foundation: '#64748B',\n  sponsor: '#F59E0B',\n  ai: '#6366F1',\n  physics: '#8B5CF6',\n  biology: '#10B981',\n  corporate: '#3B82F6',\n  global: '#1E40AF',\n  financial: '#059669',\n  ivy: '#7C3AED',\n  domain: '#EC4899',\n  research: '#14B8A6',\n  developer: '#F97316',\n  mission: '#4338CA',\n  goal: '#A78BFA',\n  insight: '#34D399',\n  event: '#93C5FD',\n  blocker: '#F43F5E',\n  entity: '#4B5563',\n  source: '#CBD5E1',\n};\n\n/** Full bucket window — no filtering (client `DEFAULT_SLIDER_RANGE`). */\nexport const FULL_RANGE: NetworkRange = { leftSlider: 0, rightSlider: 7 };\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, value));\n}\n\n/** Client `getNodeSizeFromBreakpoints`. */\nexport function nodeSizeKey(\n  value: number | undefined,\n  breakpoints: number[],\n): NetworkSizeKey {\n  if (!value || !breakpoints.length) return 'sm';\n  for (let i = 0; i < breakpoints.length; i++) {\n    if (value <= breakpoints[i]) return SIZE_KEYS[i] ?? 'sm';\n  }\n  return SIZE_KEYS[SIZE_KEYS.length - 1];\n}\n\nexport function nodeRadius(node: NetworkNode, breakpoints: number[]): number {\n  return NODE_SIZES[nodeSizeKey(node.value, breakpoints)];\n}\n\nexport function shadowRadius(node: NetworkNode, breakpoints: number[]): number {\n  return nodeRadius(node, breakpoints) * SHADOW_RADIUS_RATIO;\n}\n\n/** Client `getNodeColor` — explicit colour, then category, then the slate default. */\nexport function nodeColor(node: NetworkNode): string {\n  return node.color || NODE_TYPE_COLORS[node.type] || DEFAULT_NODE_COLOR;\n}\n\n/** Client `scaleLinkWidthByMax` — resting links stay at `LINK_WIDTH`. */\nexport function scaleLinkWidthByMax(value: number, maxValue: number): number {\n  if (maxValue <= 0) return MIN_LINK_WIDTH;\n  const ratio = clamp(value / maxValue, 0, 1);\n  return MIN_LINK_WIDTH + ratio * (MAX_LINK_WIDTH - MIN_LINK_WIDTH);\n}\n\n/** Client `getNodeRangeIndex` — which bucket a value falls into. */\nexport function rangeIndexOf(value: number, breakpoints: number[]): number {\n  for (let i = 0; i < breakpoints.length; i++) {\n    if (value <= breakpoints[i]) return i;\n  }\n  return breakpoints.length - 1;\n}\n\nexport function isFullRange(range: NetworkRange): boolean {\n  return (\n    range.leftSlider === FULL_RANGE.leftSlider &&\n    range.rightSlider === FULL_RANGE.rightSlider\n  );\n}\n\n/**\n * Client `filterGraphDataBySliderRange`, reduced to the id set the draw layer\n * needs: hidden nodes stay in the simulation so the layout does not jump.\n * `null` means \"everything is visible\".\n */\nexport function visibleNodeIds(\n  model: NetworkGraphModel,\n  range: NetworkRange,\n): Set<string> | null {\n  if (isFullRange(range) || !model.breakpoints.length) return null;\n\n  const ids = new Set<string>();\n  for (const node of model.nodes) {\n    if (typeof node.value !== 'number') continue;\n    const index = rangeIndexOf(node.value, model.breakpoints);\n    if (range.leftSlider <= index && index < range.rightSlider) ids.add(node.id);\n  }\n  return ids;\n}\n\n/**\n * Client `Legends` ranges — one bubble per break point, the last stretched to\n * 3x so the largest node still lands in a bucket.\n */\nexport function legendRanges(breakpoints: number[]): NetworkLegendRange[] {\n  return breakpoints.map((start, index) => ({\n    start,\n    end: index === breakpoints.length - 1 ? start * 3 : breakpoints[index + 1],\n    radius: NODE_SIZES[SIZE_KEYS[index] ?? 'sm'],\n  }));\n}\n\n/**\n * The client lays the simulation out on a fixed 2000x1375 canvas and zooms into\n * it. Chat gives the chart its container instead, so the spatial forces are\n * scaled against that canvas — same spacing relative to the room available.\n */\nexport const FORCE_CANVAS_REFERENCE = 1375;\n/**\n * Slack between the largest node and its collision ring. The client gets this\n * for free from a flat 60px radius on a canvas where nodes cap at 32px; keeping\n * the same cushion is what stops the labels from stacking on top of each other.\n */\nexport const NODE_COLLIDE_PAD = 36;\n\nexport interface NetworkForces {\n  charge: number;\n  collide: number;\n  linkDistance: number;\n}\n\nexport function networkForces(\n  width: number,\n  height: number,\n  maxNodeRadius: number,\n): NetworkForces {\n  const scale = clamp(Math.min(width, height) / FORCE_CANVAS_REFERENCE, 0.2, 1);\n  return {\n    charge: -1200 * scale,\n    collide: Math.max(60 * scale, maxNodeRadius + NODE_COLLIDE_PAD),\n    // The client re-rolls one random distance in [20, 100] per mount; a chat\n    // chart has to be reproducible, so the midpoint is used and then scaled.\n    linkDistance: clamp(\n      ((MIN_LINK_DISTANCE + MAX_LINK_DISTANCE) / 2) * scale,\n      MIN_LINK_DISTANCE,\n      MAX_LINK_DISTANCE,\n    ),\n  };\n}\n\n/** Client `INITIAL_NODE_RADIUS_RATIO` — seed spread as a share of the canvas. */\nexport const INITIAL_NODE_RADIUS_RATIO = 0.2;\n\n/** Node chrome (client `createNodeElements`). */\nexport const NODE_COLORS = {\n  /** Blue bloom under every node. */\n  glow: '#473DD9',\n  /** Hairline ring drawn on the circle edge. */\n  innerBorder: '#FFFFFF',\n  /** Accent ring one pixel outside it. */\n  outerBorder: '#473DD9',\n  /** Fill of a selected node that carries no image. */\n  activeFill: '#000000',\n  shadowInner: '#141C2C',\n  shadowOuter: '#5F6877',\n} as const;\n\n/** Node label chrome (client `createNodeLabel`). */\nexport const NODE_LABEL_COLORS = {\n  text: 'rgba(33, 38, 46, 0.9)',\n  textActive: '#FFFFFF',\n  background: '#FFFFFF00',\n  backgroundHover: '#FFFFFF',\n  backgroundActive: '#000000',\n} as const;\n\n/** Link value pill (client `link-label`). */\nexport const LINK_LABEL_COLORS = {\n  background: 'rgba(19, 22, 29, 1)',\n  text: 'rgba(239, 240, 241, 1)',\n} as const;\n"],"names":[],"mappings":"AASO,MAAM,aAA6C;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AACT;AAGO,MAAM,YAA8B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,qBAAqB,WAAW;AAEtC,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAEvB,MAAM,aAAa;AACnB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAG1B,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AACb;AAGO,MAAM,qBAAqB;AAG3B,MAAM,mBAA2C;AAAA,EACtD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAGO,MAAM,aAA2B,EAAE,YAAY,GAAG,aAAa,EAAA;AAEtE,SAAS,MAAM,OAAe,KAAa,KAAqB;AAC9D,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAGO,SAAS,YACd,OACA,aACgB;AAChB,MAAI,CAAC,SAAS,CAAC,YAAY,OAAQ,QAAO;AAC1C,WAAS,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;AAC3C,QAAI,SAAS,YAAY,CAAC,EAAG,QAAO,UAAU,CAAC,KAAK;AAAA,EACtD;AACA,SAAO,UAAU,UAAU,SAAS,CAAC;AACvC;AAEO,SAAS,WAAW,MAAmB,aAA+B;AAC3E,SAAO,WAAW,YAAY,KAAK,OAAO,WAAW,CAAC;AACxD;AAEO,SAAS,aAAa,MAAmB,aAA+B;AAC7E,SAAO,WAAW,MAAM,WAAW,IAAI;AACzC;AAGO,SAAS,UAAU,MAA2B;AACnD,SAAO,KAAK,SAAS,iBAAiB,KAAK,IAAI,KAAK;AACtD;AAGO,SAAS,oBAAoB,OAAe,UAA0B;AAC3E,MAAI,YAAY,EAAG,QAAO;AAC1B,QAAM,QAAQ,MAAM,QAAQ,UAAU,GAAG,CAAC;AAC1C,SAAO,iBAAiB,SAAS,iBAAiB;AACpD;AAGO,SAAS,aAAa,OAAe,aAA+B;AACzE,WAAS,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;AAC3C,QAAI,SAAS,YAAY,CAAC,EAAG,QAAO;AAAA,EACtC;AACA,SAAO,YAAY,SAAS;AAC9B;AAEO,SAAS,YAAY,OAA8B;AACxD,SACE,MAAM,eAAe,WAAW,cAChC,MAAM,gBAAgB,WAAW;AAErC;AAOO,SAAS,eACd,OACA,OACoB;AACpB,MAAI,YAAY,KAAK,KAAK,CAAC,MAAM,YAAY,OAAQ,QAAO;AAE5D,QAAM,0BAAU,IAAA;AAChB,aAAW,QAAQ,MAAM,OAAO;AAC9B,QAAI,OAAO,KAAK,UAAU,SAAU;AACpC,UAAM,QAAQ,aAAa,KAAK,OAAO,MAAM,WAAW;AACxD,QAAI,MAAM,cAAc,SAAS,QAAQ,MAAM,YAAa,KAAI,IAAI,KAAK,EAAE;AAAA,EAC7E;AACA,SAAO;AACT;AAMO,SAAS,aAAa,aAA6C;AACxE,SAAO,YAAY,IAAI,CAAC,OAAO,WAAW;AAAA,IACxC;AAAA,IACA,KAAK,UAAU,YAAY,SAAS,IAAI,QAAQ,IAAI,YAAY,QAAQ,CAAC;AAAA,IACzE,QAAQ,WAAW,UAAU,KAAK,KAAK,IAAI;AAAA,EAAA,EAC3C;AACJ;AAOO,MAAM,yBAAyB;AAM/B,MAAM,mBAAmB;AAQzB,SAAS,cACd,OACA,QACA,eACe;AACf,QAAM,QAAQ,MAAM,KAAK,IAAI,OAAO,MAAM,IAAI,wBAAwB,KAAK,CAAC;AAC5E,SAAO;AAAA,IACL,QAAQ,QAAQ;AAAA,IAChB,SAAS,KAAK,IAAI,KAAK,OAAO,gBAAgB,gBAAgB;AAAA;AAAA;AAAA,IAG9D,cAAc;AAAA,OACV,oBAAoB,qBAAqB,IAAK;AAAA,MAChD;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAGO,MAAM,4BAA4B;AAGlC,MAAM,cAAc;AAAA;AAAA,EAEzB,MAAM;AAAA;AAAA,EAEN,aAAa;AAAA;AAAA,EAEb,aAAa;AAAA;AAAA,EAEb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AACf;AAGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,kBAAkB;AACpB;AAGO,MAAM,oBAAoB;AAAA,EAC/B,YAAY;AAAA,EACZ,MAAM;AACR;"}

package/dist/components/network-graph/lib/format.d.ts

@@ -0,0 +1,7 @@
+/** Client `toK` — link label text. */
+export declare function formatLinkValue(value: number | undefined): string;
+/** Client node label value row. */
+export declare function formatNodeValue(value: number | undefined): string;
+/** Client `Legends.formatValue` — abbreviated bucket boundary. */
+export declare function formatLegendValue(value: number, toFixed?: number): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/components/network-graph/lib/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../../src/components/network-graph/lib/format.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAOjE;AAED,mCAAmC;AACnC,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAEjE;AAED,kEAAkE;AAClE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,SAAI,GAAG,MAAM,CAYpE"}