@matter-server/dashboard 0.3.2 → 0.3.3

package/dist/esm/pages/matter-server-view.d.ts

@@ -12,6 +12,7 @@ import { LitElement } from "lit";
 import "../components/ha-svg-icon";
 import "./components/footer";
 import "./components/header";
+import type { ActiveView } from "./components/header.js";
 import "./components/server-details";
 declare global {
     interface HTMLElementTagNameMap {
@@ -21,6 +22,9 @@ declare global {
 declare class MatterServerView extends LitElement {
     client: MatterClient;
     nodes: MatterClient["nodes"];
+    activeView?: ActiveView;
+    hasThreadDevices?: boolean;
+    hasWifiDevices?: boolean;
     private _cachedNodes?;
     private _cachedNodeEntries?;
     private getNodeEntries;

package/dist/esm/pages/matter-server-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"matter-server-view.d.ts","sourceRoot":"","sources":["../../../src/pages/matter-server-view.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAgB,YAAY,EAAc,MAAM,0BAA0B,CAAC;AAElF,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAErD,OAAO,2BAA2B,CAAC;AAEnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,6BAA6B,CAAC;AAErC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,gBAAgB,CAAC;KAC1C;CACJ;AAED,cACM,gBAAiB,SAAQ,UAAU;IAC9B,MAAM,EAAG,YAAY,CAAC;IAGtB,KAAK,EAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAErC,OAAO,CAAC,YAAY,CAAC,CAAwB;IAC7C,OAAO,CAAC,kBAAkB,CAAC,CAAyB;IAEpD,OAAO,CAAC,cAAc;IAQb,MAAM;IAiDf,OAAgB,MAAM,0BA8CpB;CACL"}
+{"version":3,"file":"matter-server-view.d.ts","sourceRoot":"","sources":["../../../src/pages/matter-server-view.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAgB,YAAY,EAAc,MAAM,0BAA0B,CAAC;AAElF,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAErD,OAAO,2BAA2B,CAAC;AAEnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,6BAA6B,CAAC;AAErC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,gBAAgB,CAAC;KAC1C;CACJ;AAED,cACM,gBAAiB,SAAQ,UAAU;IAC9B,MAAM,EAAG,YAAY,CAAC;IAGtB,KAAK,EAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAG9B,UAAU,CAAC,EAAE,UAAU,CAAC;IAGxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAG3B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEhC,OAAO,CAAC,YAAY,CAAC,CAAwB;IAC7C,OAAO,CAAC,kBAAkB,CAAC,CAAyB;IAEpD,OAAO,CAAC,cAAc;IAQb,MAAM;IAuDf,OAAgB,MAAM,0BA8CpB;CACL"}

package/dist/esm/pages/matter-server-view.js

@@ -37,7 +37,13 @@ let MatterServerView = class extends LitElement {
   render() {
     const nodes = this.getNodeEntries(this.nodes);
     return html`
-            <dashboard-header title="Open Home Foundation Matter Server" .client=${this.client}></dashboard-header>
+            <dashboard-header
+                title="Open Home Foundation Matter Server"
+                .client=${this.client}
+                .activeView=${this.activeView}
+                .hasThreadDevices=${this.hasThreadDevices}
+                .hasWifiDevices=${this.hasWifiDevices}
+            ></dashboard-header>
 
             <!-- server details section -->
             <div class="container">
@@ -129,6 +135,15 @@ MatterServerView.styles = css`
 __decorateClass([
   property()
 ], MatterServerView.prototype, "nodes", 2);
+__decorateClass([
+  property()
+], MatterServerView.prototype, "activeView", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MatterServerView.prototype, "hasThreadDevices", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MatterServerView.prototype, "hasWifiDevices", 2);
 MatterServerView = __decorateClass([
   customElement("matter-server-view")
 ], MatterServerView);

package/dist/esm/pages/matter-server-view.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/pages/matter-server-view.ts"],
-  "mappings": ";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,oBAA8C;AACvD,SAAS,uBAAuB;AAChC,SAAS,KAAK,MAAM,YAAY,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AACxC,OAAO;AACP,SAAS,yBAAyB;AAClC,OAAO;AACP,OAAO;AACP,OAAO;AASP,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAS9B,eAAe,OAAsD;AACzE,QAAI,UAAU,KAAK,cAAc;AAC7B,WAAK,eAAe;AACpB,WAAK,qBAAqB,OAAO,QAAQ,KAAK;AAAA,IAClD;AACA,WAAO,KAAK;AAAA,EAChB;AAAA,EAES,SAAS;AACd,UAAM,QAAQ,KAAK,eAAe,KAAK,KAAK;AAE5C,WAAO;AAAA,mFACoE,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,0CAIpD,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAW/B,MAAM,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM;AACzB,aAAO;AAAA,6DAC8B,SAAS,KAAK,OAAO,EAAE;AAAA;AAAA,2CAEzC,KAAK,OAAO;AAAA;AAAA,4CAEX;AAAA,QACA,aAAa,KAAK,OAAO,KACrB,KAAK,OAAO,WAAW,iBAAiB,SACtC,SACA,KAAK,OAAO,WAAW;AAAA,QAC7B,KAAK;AAAA,MACT,CAAC;AAAA;AAAA,sCAEH,KAAK,YAAY,KAAK,yCAAyC;AAAA;AAAA;AAAA,sCAG/D,KAAK,YAAY,GAAG,KAAK,SAAS,QAAQ,OAAO,IAAI,KAAK,UAAU;AAAA,sCACpE,KAAK,WAAW;AAAA;AAAA,gEAEU,eAAe;AAAA;AAAA;AAAA,IAG3D,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlB;AAiDJ;AAjHM,iBAkEc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9DlB;AAAA,EADN,SAAS;AAAA,GAHR,iBAIK;AAJL,mBAAN;AAAA,EADC,cAAc,oBAAoB;AAAA,GAC7B;",
+  "mappings": ";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,oBAA8C;AACvD,SAAS,uBAAuB;AAChC,SAAS,KAAK,MAAM,YAAY,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AACxC,OAAO;AACP,SAAS,yBAAyB;AAClC,OAAO;AACP,OAAO;AAEP,OAAO;AASP,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAkB9B,eAAe,OAAsD;AACzE,QAAI,UAAU,KAAK,cAAc;AAC7B,WAAK,eAAe;AACpB,WAAK,qBAAqB,OAAO,QAAQ,KAAK;AAAA,IAClD;AACA,WAAO,KAAK;AAAA,EAChB;AAAA,EAES,SAAS;AACd,UAAM,QAAQ,KAAK,eAAe,KAAK,KAAK;AAE5C,WAAO;AAAA;AAAA;AAAA,0BAGW,KAAK,MAAM;AAAA,8BACP,KAAK,UAAU;AAAA,oCACT,KAAK,gBAAgB;AAAA,kCACvB,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,0CAKX,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAW/B,MAAM,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM;AACzB,aAAO;AAAA,6DAC8B,SAAS,KAAK,OAAO,EAAE;AAAA;AAAA,2CAEzC,KAAK,OAAO;AAAA;AAAA,4CAEX;AAAA,QACA,aAAa,KAAK,OAAO,KACrB,KAAK,OAAO,WAAW,iBAAiB,SACtC,SACA,KAAK,OAAO,WAAW;AAAA,QAC7B,KAAK;AAAA,MACT,CAAC;AAAA;AAAA,sCAEH,KAAK,YAAY,KAAK,yCAAyC;AAAA;AAAA;AAAA,sCAG/D,KAAK,YAAY,GAAG,KAAK,SAAS,QAAQ,OAAO,IAAI,KAAK,UAAU;AAAA,sCACpE,KAAK,WAAW;AAAA;AAAA,gEAEU,eAAe;AAAA;AAAA;AAAA,IAG3D,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlB;AAiDJ;AAhIM,iBAiFc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7ElB;AAAA,EADN,SAAS;AAAA,GAHR,iBAIK;AAGA;AAAA,EADN,SAAS;AAAA,GANR,iBAOK;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GATzB,iBAUK;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAZzB,iBAaK;AAbL,mBAAN;AAAA,EADC,cAAc,oBAAoB;AAAA,GAC7B;",
   "names": []
 }

package/dist/esm/pages/network/base-network-graph.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { MatterNode } from "@matter-server/ws-client";
+import { LitElement } from "lit";
+import { DataSet, Network } from "vis-network/standalone";
+import type { NetworkGraphEdge, NetworkGraphNode } from "./network-types.js";
+/**
+ * Base class for network graph components (Thread and WiFi).
+ * Provides shared vis.js network initialization, highlighting, and theme support.
+ */
+export declare abstract class BaseNetworkGraph extends LitElement {
+    nodes: Record<string, MatterNode>;
+    protected _selectedNodeId: number | string | null;
+    protected _network?: Network;
+    protected _nodesDataSet?: DataSet<NetworkGraphNode>;
+    protected _edgesDataSet?: DataSet<NetworkGraphEdge>;
+    protected _container?: HTMLDivElement;
+    protected _resizeObserver?: ResizeObserver;
+    protected _themeUnsubscribe?: () => void;
+    protected _updateDebounceTimer?: ReturnType<typeof setTimeout>;
+    /** Store original edge colors for restoration after highlighting */
+    private _originalEdgeColors;
+    protected _getFontColor(): string;
+    protected _getDimmedEdgeColor(): string;
+    /**
+     * Returns physics options for the network. Override in subclasses for different behavior.
+     */
+    protected _getPhysicsOptions(): any;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Try to find and attach the graph container if it wasn't available before.
+     * This handles the case where empty state was rendered initially.
+     */
+    private _tryAttachContainer;
+    /** Debounced graph update to avoid excessive redraws */
+    protected _debouncedUpdateGraph(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    protected _initializeNetwork(): void;
+    /**
+     * Returns true if the graph is initialized and ready for interaction.
+     */
+    isReady(): boolean;
+    /**
+     * Fits all nodes into view.
+     */
+    fit(): void;
+    /**
+     * Selects a node by ID and focuses on it.
+     */
+    selectNode(nodeId: number | string): void;
+    protected _dispatchNodeSelected(nodeId: number | string | null): void;
+    /**
+     * Highlights edges connected to the selected node and makes neighbor nodes more prominent.
+     */
+    protected _highlightConnections(nodeId: number | string): void;
+    /**
+     * Clears all highlights and restores default styling.
+     */
+    protected _clearHighlights(): void;
+    /**
+     * Clear stored edge colors when graph is updated (edges are recreated).
+     */
+    protected _clearOriginalEdgeColors(): void;
+    /**
+     * Abstract method to be implemented by subclasses for graph-specific updates.
+     */
+    protected abstract _updateGraph(): void;
+    static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=base-network-graph.d.ts.map

package/dist/esm/pages/network/base-network-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-network-graph.d.ts","sourceRoot":"","sources":["../../../../src/pages/network/base-network-graph.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE7E;;;GAGG;AACH,8BAAsB,gBAAiB,SAAQ,UAAU;IAE9C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAM;IAG9C,SAAS,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAEzD,SAAS,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpD,SAAS,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpD,SAAS,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;IACtC,SAAS,CAAC,eAAe,CAAC,EAAE,cAAc,CAAC;IAC3C,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IACzC,SAAS,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE/D,oEAAoE;IACpE,OAAO,CAAC,mBAAmB,CAAgE;IAE3F,SAAS,CAAC,aAAa,IAAI,MAAM;IAIjC,SAAS,CAAC,mBAAmB,IAAI,MAAM;IAIvC;;OAEG;IACH,SAAS,CAAC,kBAAkB,IAAI,GAAG;IAoB1B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAc/D;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAmB3B,wDAAwD;IACxD,SAAS,CAAC,qBAAqB,IAAI,IAAI;IAS9B,YAAY,IAAI,IAAI;IAoCpB,oBAAoB,IAAI,IAAI;IAgBrC,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAyFpC;;OAEG;IACI,OAAO,IAAI,OAAO;IAIzB;;OAEG;IACI,GAAG,IAAI,IAAI;IASlB;;OAEG;IACI,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAkBhD,SAAS,CAAC,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI;IAUrE;;OAEG;IACH,SAAS,CAAC,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAqE9D;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IA8BlC;;OAEG;IACH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,YAAY,IAAI,IAAI;IAEvC,OAAgB,MAAM,0BAuCpB;CACL"}

package/dist/esm/pages/network/base-network-graph.js

@@ -0,0 +1,403 @@
+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;
+};
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, css } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DataSet, Network } from "vis-network/standalone";
+import { ThemeService } from "../../util/theme-service.js";
+class BaseNetworkGraph extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.nodes = {};
+    this._selectedNodeId = null;
+    /** Store original edge colors for restoration after highlighting */
+    this._originalEdgeColors = /* @__PURE__ */ new Map();
+  }
+  _getFontColor() {
+    return ThemeService.effectiveTheme === "dark" ? "#e0e0e0" : "#333333";
+  }
+  _getDimmedEdgeColor() {
+    return ThemeService.effectiveTheme === "dark" ? "#555555" : "#cccccc";
+  }
+  /**
+   * Returns physics options for the network. Override in subclasses for different behavior.
+   */
+  _getPhysicsOptions() {
+    return {
+      enabled: true,
+      solver: "forceAtlas2Based",
+      forceAtlas2Based: {
+        gravitationalConstant: -70,
+        centralGravity: 5e-3,
+        springLength: 130,
+        springConstant: 0.08,
+        damping: 0.4,
+        avoidOverlap: 0.6
+      },
+      stabilization: {
+        enabled: true,
+        iterations: 250,
+        updateInterval: 25
+      }
+    };
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (!this._container && !this._resizeObserver) {
+      this._tryAttachContainer();
+    }
+    if (changedProperties.has("nodes")) {
+      this._debouncedUpdateGraph();
+    }
+  }
+  /**
+   * Try to find and attach the graph container if it wasn't available before.
+   * This handles the case where empty state was rendered initially.
+   */
+  _tryAttachContainer() {
+    const container = this.shadowRoot?.querySelector(".graph-container");
+    if (container) {
+      this._container = container;
+      this._resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry && entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+          if (!this._network) {
+            this._initializeNetwork();
+          } else {
+            this._network.setSize(`${entry.contentRect.width}px`, `${entry.contentRect.height}px`);
+            this._network.redraw();
+          }
+        }
+      });
+      this._resizeObserver.observe(this._container);
+    }
+  }
+  /** Debounced graph update to avoid excessive redraws */
+  _debouncedUpdateGraph() {
+    if (this._updateDebounceTimer) {
+      clearTimeout(this._updateDebounceTimer);
+    }
+    this._updateDebounceTimer = setTimeout(() => {
+      this._updateGraph();
+    }, 100);
+  }
+  firstUpdated() {
+    this._container = this.shadowRoot?.querySelector(".graph-container");
+    if (this._container) {
+      this._resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry && entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+          if (!this._network) {
+            this._initializeNetwork();
+          } else {
+            this._network.setSize(`${entry.contentRect.width}px`, `${entry.contentRect.height}px`);
+            this._network.redraw();
+          }
+        }
+      });
+      this._resizeObserver.observe(this._container);
+    }
+    this._themeUnsubscribe = ThemeService.subscribe(() => {
+      if (this._network) {
+        this._network.setOptions({
+          nodes: {
+            font: {
+              color: this._getFontColor()
+            }
+          }
+        });
+        this._updateGraph();
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    this._themeUnsubscribe?.();
+    if (this._updateDebounceTimer) {
+      clearTimeout(this._updateDebounceTimer);
+    }
+    this._nodesDataSet?.clear();
+    this._edgesDataSet?.clear();
+    this._network?.destroy();
+    this._network = void 0;
+    this._nodesDataSet = void 0;
+    this._edgesDataSet = void 0;
+    this._originalEdgeColors.clear();
+  }
+  _initializeNetwork() {
+    if (!this._container) return;
+    const rect = this._container.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      return;
+    }
+    this._nodesDataSet = new DataSet();
+    this._edgesDataSet = new DataSet();
+    const options = {
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      autoResize: false,
+      // We handle resize manually
+      nodes: {
+        shape: "image",
+        size: 30,
+        font: {
+          size: 12,
+          color: this._getFontColor()
+        },
+        borderWidth: 2,
+        borderWidthSelected: 3
+      },
+      edges: {
+        width: 2,
+        smooth: {
+          type: "continuous",
+          roundness: 0.5
+        }
+      },
+      physics: this._getPhysicsOptions(),
+      interaction: {
+        hover: true,
+        tooltipDelay: 200,
+        hideEdgesOnDrag: true
+      }
+    };
+    this._network = new Network(
+      this._container,
+      {
+        nodes: this._nodesDataSet,
+        edges: this._edgesDataSet
+      },
+      options
+    );
+    this._network.on("selectNode", (params) => {
+      if (params.nodes.length > 0) {
+        this._selectedNodeId = params.nodes[0];
+        this._highlightConnections(this._selectedNodeId);
+        this._dispatchNodeSelected(this._selectedNodeId);
+      }
+    });
+    this._network.on("deselectNode", () => {
+      this._selectedNodeId = null;
+      this._clearHighlights();
+      this._dispatchNodeSelected(null);
+    });
+    this._network.on("stabilizationIterationsDone", () => {
+      this._network?.fit({
+        animation: {
+          duration: 500,
+          easingFunction: "easeInOutQuad"
+        }
+      });
+    });
+    this._network.on("stabilized", () => {
+      this._network?.fit({
+        animation: {
+          duration: 300,
+          easingFunction: "easeInOutQuad"
+        }
+      });
+    });
+    this._updateGraph();
+  }
+  /**
+   * Returns true if the graph is initialized and ready for interaction.
+   */
+  isReady() {
+    return this._network !== void 0 && this._nodesDataSet !== void 0;
+  }
+  /**
+   * Fits all nodes into view.
+   */
+  fit() {
+    this._network?.fit({
+      animation: {
+        duration: 300,
+        easingFunction: "easeInOutQuad"
+      }
+    });
+  }
+  /**
+   * Selects a node by ID and focuses on it.
+   */
+  selectNode(nodeId) {
+    if (!this._network) return;
+    this._selectedNodeId = nodeId;
+    this._network.selectNodes([nodeId]);
+    this._highlightConnections(nodeId);
+    this._dispatchNodeSelected(nodeId);
+    this._network.focus(nodeId, {
+      scale: 1.2,
+      animation: {
+        duration: 500,
+        easingFunction: "easeInOutQuad"
+      }
+    });
+  }
+  _dispatchNodeSelected(nodeId) {
+    this.dispatchEvent(
+      new CustomEvent("node-selected", {
+        detail: { nodeId },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Highlights edges connected to the selected node and makes neighbor nodes more prominent.
+   */
+  _highlightConnections(nodeId) {
+    if (!this._edgesDataSet || !this._nodesDataSet) return;
+    const allEdges = this._edgesDataSet.get();
+    for (const edge of allEdges) {
+      const edgeId = String(edge.id);
+      if (!this._originalEdgeColors.has(edgeId)) {
+        const colorObj = edge.color;
+        this._originalEdgeColors.set(edgeId, {
+          color: colorObj?.color ?? "#999999",
+          highlight: colorObj?.highlight ?? "#999999"
+        });
+      }
+    }
+    const connectedEdges = this._edgesDataSet.get({
+      filter: (edge) => edge.from === nodeId || edge.to === nodeId
+    });
+    const neighborIds = /* @__PURE__ */ new Set();
+    for (const edge of connectedEdges) {
+      if (edge.from === nodeId) {
+        neighborIds.add(edge.to);
+      } else {
+        neighborIds.add(edge.from);
+      }
+    }
+    const dimmedColor = this._getDimmedEdgeColor();
+    const edgeUpdates = allEdges.map((edge) => {
+      const isConnected = edge.from === nodeId || edge.to === nodeId;
+      const originalColor = this._originalEdgeColors.get(String(edge.id));
+      return {
+        id: edge.id,
+        width: isConnected ? 3 : 1,
+        // Dim non-connected edges
+        color: isConnected ? { color: originalColor?.color, highlight: originalColor?.highlight } : {
+          color: dimmedColor,
+          highlight: dimmedColor
+        }
+      };
+    });
+    this._edgesDataSet.update(edgeUpdates);
+    const allNodes = this._nodesDataSet.get();
+    const nodeUpdates = allNodes.map((node) => {
+      const isNeighbor = neighborIds.has(node.id);
+      const isSelected = node.id === nodeId;
+      return {
+        id: node.id,
+        size: isSelected ? 40 : isNeighbor ? 35 : 25,
+        font: {
+          size: isSelected ? 14 : isNeighbor ? 13 : 11,
+          color: this._getFontColor(),
+          bold: isSelected || isNeighbor ? { color: this._getFontColor() } : void 0
+        },
+        opacity: isSelected || isNeighbor ? 1 : 0.5
+      };
+    });
+    this._nodesDataSet.update(nodeUpdates);
+  }
+  /**
+   * Clears all highlights and restores default styling.
+   */
+  _clearHighlights() {
+    if (!this._edgesDataSet || !this._nodesDataSet) return;
+    const allEdges = this._edgesDataSet.get();
+    const edgeUpdates = allEdges.map((edge) => {
+      const originalColor = this._originalEdgeColors.get(String(edge.id));
+      return {
+        id: edge.id,
+        width: 2,
+        color: originalColor ?? { color: "#999999", highlight: "#999999" }
+      };
+    });
+    this._edgesDataSet.update(edgeUpdates);
+    const allNodes = this._nodesDataSet.get();
+    const nodeUpdates = allNodes.map((node) => ({
+      id: node.id,
+      size: 30,
+      font: {
+        size: 12,
+        color: this._getFontColor(),
+        bold: void 0
+      },
+      opacity: 1
+    }));
+    this._nodesDataSet.update(nodeUpdates);
+  }
+  /**
+   * Clear stored edge colors when graph is updated (edges are recreated).
+   */
+  _clearOriginalEdgeColors() {
+    this._originalEdgeColors.clear();
+  }
+  static {
+    this.styles = css`
+        :host {
+            display: block;
+            width: 100%;
+            height: 100%;
+            min-height: 0;
+        }
+
+        .graph-container {
+            width: 100%;
+            height: 100%;
+            background-color: var(--md-sys-color-surface, #fff);
+            border-radius: 8px;
+            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+        }
+
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            text-align: center;
+            padding: 24px;
+            box-sizing: border-box;
+            background-color: var(--md-sys-color-surface, #fff);
+            border-radius: 8px;
+            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+        }
+
+        .empty-state p {
+            margin: 8px 0;
+        }
+
+        .empty-state .hint {
+            font-size: 0.875rem;
+            opacity: 0.7;
+        }
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Object })
+], BaseNetworkGraph.prototype, "nodes", 2);
+__decorateClass([
+  state()
+], BaseNetworkGraph.prototype, "_selectedNodeId", 2);
+export {
+  BaseNetworkGraph
+};
+//# sourceMappingURL=base-network-graph.js.map

package/dist/esm/pages/network/base-network-graph.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/pages/network/base-network-graph.ts"],
+  "mappings": ";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,SAAS,YAAY,WAAW;AAChC,SAAS,UAAU,aAAa;AAEhC,SAAS,SAAS,eAAe;AACjC,SAAS,oBAAoB;AAOtB,MAAe,yBAAyB,WAAW;AAAA,EAAnD;AAAA;AAEH,SAAO,QAAoC,CAAC;AAG5C,SAAU,kBAA0C;AAWpD;AAAA,SAAQ,sBAAyE,oBAAI,IAAI;AAAA;AAAA,EAE/E,gBAAwB;AAC9B,WAAO,aAAa,mBAAmB,SAAS,YAAY;AAAA,EAChE;AAAA,EAEU,sBAA8B;AACpC,WAAO,aAAa,mBAAmB,SAAS,YAAY;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA,EAKU,qBAA0B;AAChC,WAAO;AAAA,MACH,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB;AAAA,QACd,uBAAuB;AAAA,QACvB,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,cAAc;AAAA,MAClB;AAAA,MACA,eAAe;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AAAA,EAES,QAAQ,mBAA+C;AAC5D,UAAM,QAAQ,iBAAiB;AAI/B,QAAI,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB;AAC3C,WAAK,oBAAoB;AAAA,IAC7B;AAEA,QAAI,kBAAkB,IAAI,OAAO,GAAG;AAChC,WAAK,sBAAsB;AAAA,IAC/B;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,sBAA4B;AAChC,UAAM,YAAY,KAAK,YAAY,cAAc,kBAAkB;AACnE,QAAI,WAAW;AACX,WAAK,aAAa;AAClB,WAAK,kBAAkB,IAAI,eAAe,aAAW;AACjD,cAAM,QAAQ,QAAQ,CAAC;AACvB,YAAI,SAAS,MAAM,YAAY,QAAQ,KAAK,MAAM,YAAY,SAAS,GAAG;AACtE,cAAI,CAAC,KAAK,UAAU;AAChB,iBAAK,mBAAmB;AAAA,UAC5B,OAAO;AACH,iBAAK,SAAS,QAAQ,GAAG,MAAM,YAAY,KAAK,MAAM,GAAG,MAAM,YAAY,MAAM,IAAI;AACrF,iBAAK,SAAS,OAAO;AAAA,UACzB;AAAA,QACJ;AAAA,MACJ,CAAC;AACD,WAAK,gBAAgB,QAAQ,KAAK,UAAU;AAAA,IAChD;AAAA,EACJ;AAAA;AAAA,EAGU,wBAA8B;AACpC,QAAI,KAAK,sBAAsB;AAC3B,mBAAa,KAAK,oBAAoB;AAAA,IAC1C;AACA,SAAK,uBAAuB,WAAW,MAAM;AACzC,WAAK,aAAa;AAAA,IACtB,GAAG,GAAG;AAAA,EACV;AAAA,EAES,eAAqB;AAC1B,SAAK,aAAa,KAAK,YAAY,cAAc,kBAAkB;AACnE,QAAI,KAAK,YAAY;AAEjB,WAAK,kBAAkB,IAAI,eAAe,aAAW;AACjD,cAAM,QAAQ,QAAQ,CAAC;AACvB,YAAI,SAAS,MAAM,YAAY,QAAQ,KAAK,MAAM,YAAY,SAAS,GAAG;AACtE,cAAI,CAAC,KAAK,UAAU;AAChB,iBAAK,mBAAmB;AAAA,UAC5B,OAAO;AAEH,iBAAK,SAAS,QAAQ,GAAG,MAAM,YAAY,KAAK,MAAM,GAAG,MAAM,YAAY,MAAM,IAAI;AACrF,iBAAK,SAAS,OAAO;AAAA,UACzB;AAAA,QACJ;AAAA,MACJ,CAAC;AACD,WAAK,gBAAgB,QAAQ,KAAK,UAAU;AAAA,IAChD;AAGA,SAAK,oBAAoB,aAAa,UAAU,MAAM;AAClD,UAAI,KAAK,UAAU;AAEf,aAAK,SAAS,WAAW;AAAA,UACrB,OAAO;AAAA,YACH,MAAM;AAAA,cACF,OAAO,KAAK,cAAc;AAAA,YAC9B;AAAA,UACJ;AAAA,QACJ,CAAC;AAED,aAAK,aAAa;AAAA,MACtB;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAES,uBAA6B;AAClC,UAAM,qBAAqB;AAC3B,SAAK,iBAAiB,WAAW;AACjC,SAAK,oBAAoB;AACzB,QAAI,KAAK,sBAAsB;AAC3B,mBAAa,KAAK,oBAAoB;AAAA,IAC1C;AACA,SAAK,eAAe,MAAM;AAC1B,SAAK,eAAe,MAAM;AAC1B,SAAK,UAAU,QAAQ;AACvB,SAAK,WAAW;AAChB,SAAK,gBAAgB;AACrB,SAAK,gBAAgB;AACrB,SAAK,oBAAoB,MAAM;AAAA,EACnC;AAAA,EAEU,qBAA2B;AACjC,QAAI,CAAC,KAAK,WAAY;AAGtB,UAAM,OAAO,KAAK,WAAW,sBAAsB;AACnD,QAAI,KAAK,UAAU,KAAK,KAAK,WAAW,GAAG;AACvC;AAAA,IACJ;AAEA,SAAK,gBAAgB,IAAI,QAA0B;AACnD,SAAK,gBAAgB,IAAI,QAA0B;AAEnD,UAAM,UAAU;AAAA,MACZ,OAAO,GAAG,KAAK,KAAK;AAAA,MACpB,QAAQ,GAAG,KAAK,MAAM;AAAA,MACtB,YAAY;AAAA;AAAA,MACZ,OAAO;AAAA,QACH,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,UACF,MAAM;AAAA,UACN,OAAO,KAAK,cAAc;AAAA,QAC9B;AAAA,QACA,aAAa;AAAA,QACb,qBAAqB;AAAA,MACzB;AAAA,MACA,OAAO;AAAA,QACH,OAAO;AAAA,QACP,QAAQ;AAAA,UACJ,MAAM;AAAA,UACN,WAAW;AAAA,QACf;AAAA,MACJ;AAAA,MACA,SAAS,KAAK,mBAAmB;AAAA,MACjC,aAAa;AAAA,QACT,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,MACrB;AAAA,IACJ;AAEA,SAAK,WAAW,IAAI;AAAA,MAChB,KAAK;AAAA,MACL;AAAA,QACI,OAAO,KAAK;AAAA,QACZ,OAAO,KAAK;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AAGA,SAAK,SAAS,GAAG,cAAc,CAAC,WAA2C;AACvE,UAAI,OAAO,MAAM,SAAS,GAAG;AACzB,aAAK,kBAAkB,OAAO,MAAM,CAAC;AACrC,aAAK,sBAAsB,KAAK,eAAe;AAC/C,aAAK,sBAAsB,KAAK,eAAe;AAAA,MACnD;AAAA,IACJ,CAAC;AAED,SAAK,SAAS,GAAG,gBAAgB,MAAM;AACnC,WAAK,kBAAkB;AACvB,WAAK,iBAAiB;AACtB,WAAK,sBAAsB,IAAI;AAAA,IACnC,CAAC;AAGD,SAAK,SAAS,GAAG,+BAA+B,MAAM;AAElD,WAAK,UAAU,IAAI;AAAA,QACf,WAAW;AAAA,UACP,UAAU;AAAA,UACV,gBAAgB;AAAA,QACpB;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAGD,SAAK,SAAS,GAAG,cAAc,MAAM;AACjC,WAAK,UAAU,IAAI;AAAA,QACf,WAAW;AAAA,UACP,UAAU;AAAA,UACV,gBAAgB;AAAA,QACpB;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAED,SAAK,aAAa;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKO,UAAmB;AACtB,WAAO,KAAK,aAAa,UAAa,KAAK,kBAAkB;AAAA,EACjE;AAAA;AAAA;AAAA;AAAA,EAKO,MAAY;AACf,SAAK,UAAU,IAAI;AAAA,MACf,WAAW;AAAA,QACP,UAAU;AAAA,QACV,gBAAgB;AAAA,MACpB;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKO,WAAW,QAA+B;AAC7C,QAAI,CAAC,KAAK,SAAU;AAEpB,SAAK,kBAAkB;AACvB,SAAK,SAAS,YAAY,CAAC,MAAM,CAAC;AAClC,SAAK,sBAAsB,MAAM;AACjC,SAAK,sBAAsB,MAAM;AAGjC,SAAK,SAAS,MAAM,QAAQ;AAAA,MACxB,OAAO;AAAA,MACP,WAAW;AAAA,QACP,UAAU;AAAA,QACV,gBAAgB;AAAA,MACpB;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEU,sBAAsB,QAAsC;AAClE,SAAK;AAAA,MACD,IAAI,YAAY,iBAAiB;AAAA,QAC7B,QAAQ,EAAE,OAAO;AAAA,QACjB,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKU,sBAAsB,QAA+B;AAC3D,QAAI,CAAC,KAAK,iBAAiB,CAAC,KAAK,cAAe;AAGhD,UAAM,WAAW,KAAK,cAAc,IAAI;AACxC,eAAW,QAAQ,UAAU;AACzB,YAAM,SAAS,OAAO,KAAK,EAAE;AAC7B,UAAI,CAAC,KAAK,oBAAoB,IAAI,MAAM,GAAG;AACvC,cAAM,WAAW,KAAK;AACtB,aAAK,oBAAoB,IAAI,QAAQ;AAAA,UACjC,OAAO,UAAU,SAAS;AAAA,UAC1B,WAAW,UAAU,aAAa;AAAA,QACtC,CAAC;AAAA,MACL;AAAA,IACJ;AAGA,UAAM,iBAAiB,KAAK,cAAc,IAAI;AAAA,MAC1C,QAAQ,CAAC,SAA2B,KAAK,SAAS,UAAU,KAAK,OAAO;AAAA,IAC5E,CAAC;AAGD,UAAM,cAAc,oBAAI,IAAqB;AAC7C,eAAW,QAAQ,gBAAgB;AAC/B,UAAI,KAAK,SAAS,QAAQ;AACtB,oBAAY,IAAI,KAAK,EAAE;AAAA,MAC3B,OAAO;AACH,oBAAY,IAAI,KAAK,IAAI;AAAA,MAC7B;AAAA,IACJ;AAGA,UAAM,cAAc,KAAK,oBAAoB;AAC7C,UAAM,cAAc,SAAS,IAAI,CAAC,SAA2B;AACzD,YAAM,cAAc,KAAK,SAAS,UAAU,KAAK,OAAO;AACxD,YAAM,gBAAgB,KAAK,oBAAoB,IAAI,OAAO,KAAK,EAAE,CAAC;AAClE,aAAO;AAAA,QACH,IAAI,KAAK;AAAA,QACT,OAAO,cAAc,IAAI;AAAA;AAAA,QAEzB,OAAO,cACD,EAAE,OAAO,eAAe,OAAO,WAAW,eAAe,UAAU,IACnE;AAAA,UACI,OAAO;AAAA,UACP,WAAW;AAAA,QACf;AAAA,MACV;AAAA,IACJ,CAAC;AACD,SAAK,cAAc,OAAO,WAAW;AAGrC,UAAM,WAAW,KAAK,cAAc,IAAI;AACxC,UAAM,cAAc,SAAS,IAAI,CAAC,SAA2B;AACzD,YAAM,aAAa,YAAY,IAAI,KAAK,EAAE;AAC1C,YAAM,aAAa,KAAK,OAAO;AAC/B,aAAO;AAAA,QACH,IAAI,KAAK;AAAA,QACT,MAAM,aAAa,KAAK,aAAa,KAAK;AAAA,QAC1C,MAAM;AAAA,UACF,MAAM,aAAa,KAAK,aAAa,KAAK;AAAA,UAC1C,OAAO,KAAK,cAAc;AAAA,UAC1B,MAAM,cAAc,aAAa,EAAE,OAAO,KAAK,cAAc,EAAE,IAAI;AAAA,QACvE;AAAA,QACA,SAAS,cAAc,aAAa,IAAI;AAAA,MAC5C;AAAA,IACJ,CAAC;AACD,SAAK,cAAc,OAAO,WAAW;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA,EAKU,mBAAyB;AAC/B,QAAI,CAAC,KAAK,iBAAiB,CAAC,KAAK,cAAe;AAGhD,UAAM,WAAW,KAAK,cAAc,IAAI;AACxC,UAAM,cAAc,SAAS,IAAI,CAAC,SAA2B;AACzD,YAAM,gBAAgB,KAAK,oBAAoB,IAAI,OAAO,KAAK,EAAE,CAAC;AAClE,aAAO;AAAA,QACH,IAAI,KAAK;AAAA,QACT,OAAO;AAAA,QACP,OAAO,iBAAiB,EAAE,OAAO,WAAW,WAAW,UAAU;AAAA,MACrE;AAAA,IACJ,CAAC;AACD,SAAK,cAAc,OAAO,WAAW;AAGrC,UAAM,WAAW,KAAK,cAAc,IAAI;AACxC,UAAM,cAAc,SAAS,IAAI,CAAC,UAA4B;AAAA,MAC1D,IAAI,KAAK;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,QACF,MAAM;AAAA,QACN,OAAO,KAAK,cAAc;AAAA,QAC1B,MAAM;AAAA,MACV;AAAA,MACA,SAAS;AAAA,IACb,EAAE;AACF,SAAK,cAAc,OAAO,WAAW;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA,EAKU,2BAAiC;AACvC,SAAK,oBAAoB,MAAM;AAAA,EACnC;AAAA,EAOA;AAAA,SAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwC7B;AA1bW;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADR,iBAEX;AAGG;AAAA,EADT,MAAM;AAAA,GAJW,iBAKR;",
+  "names": []
+}

package/dist/esm/pages/network/device-icons.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { MatterNode } from "@matter-server/ws-client";
+/**
+ * Gets the primary device type ID for a node.
+ * Reads from DeviceTypeList attribute (0/29/0) on endpoint 1 or 0.
+ * The data comes as { 0: deviceTypeId, 1: revision } with numeric keys.
+ */
+export declare function getPrimaryDeviceType(node: MatterNode): number | undefined;
+/**
+ * Gets the appropriate MDI icon path for a node.
+ * Considers device type and Thread role.
+ */
+export declare function getDeviceIcon(node: MatterNode, threadRole?: number): string;
+/**
+ * Gets the appropriate MDI icon path for a network type.
+ */
+export declare function getNetworkTypeIcon(networkType: string): string;
+/**
+ * Creates an SVG data URL from an MDI icon path for use in vis.js.
+ * @param iconPath - The MDI icon path
+ * @param color - The icon color (CSS color string)
+ * @param size - The icon size in pixels
+ * @returns A data URL containing the SVG
+ */
+export declare function createIconDataUrl(iconPath: string, color: string, size?: number): string;
+/**
+ * Creates an SVG data URL for a network graph node.
+ * @param node - The Matter node
+ * @param threadRole - Optional Thread routing role
+ * @param isSelected - Whether the node is selected
+ * @param isOffline - Whether the node is offline
+ * @returns A data URL containing the SVG
+ */
+export declare function createNodeIconDataUrl(node: MatterNode, threadRole?: number, isSelected?: boolean, isOffline?: boolean): string;
+/**
+ * Creates an SVG data URL for an unknown Thread device (question mark).
+ * @param isRouter - Whether the device appears to be a router
+ * @param isSelected - Whether the node is selected
+ * @returns A data URL containing the SVG
+ */
+export declare function createUnknownDeviceIconDataUrl(isRouter?: boolean, isSelected?: boolean): string;
+/**
+ * Creates an SVG data URL for a WiFi access point/router.
+ * @param isSelected - Whether the node is selected
+ * @returns A data URL containing the SVG
+ */
+export declare function createWiFiRouterIconDataUrl(isSelected?: boolean): string;
+//# sourceMappingURL=device-icons.d.ts.map

package/dist/esm/pages/network/device-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-icons.d.ts","sourceRoot":"","sources":["../../../../src/pages/network/device-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AA8I3D;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAiBzE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAuB3E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAW9D;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,GAAG,MAAM,CAU5F;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACjC,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,MAAM,EACnB,UAAU,GAAE,OAAe,EAC3B,SAAS,GAAE,OAAe,GAC3B,MAAM,CAWR;AAED;;;;;GAKG;AACH,wBAAgB,8BAA8B,CAAC,QAAQ,GAAE,OAAe,EAAE,UAAU,GAAE,OAAe,GAAG,MAAM,CAI7G;AAED;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,GAAE,OAAe,GAAG,MAAM,CAG/E"}