@matter-server/dashboard 0.3.2 → 0.3.4

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

@@ -0,0 +1,411 @@
+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._nodesDataSet) {
+        const fontColor = this._getFontColor();
+        this._network.setOptions({
+          nodes: {
+            font: {
+              color: fontColor
+            }
+          }
+        });
+        this._updateGraph();
+        const allNodes = this._nodesDataSet.get();
+        const nodeUpdates = allNodes.map((node) => ({
+          id: node.id,
+          font: { color: fontColor }
+        }));
+        this._nodesDataSet.update(nodeUpdates);
+        this._network.redraw();
+      }
+    });
+  }
+  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": "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",
+  "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"}

package/dist/esm/pages/network/device-icons.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {
+  mdiAccessPoint,
+  mdiCeilingLight,
+  mdiDoorOpen,
+  mdiFan,
+  mdiGauge,
+  mdiHelp,
+  mdiHome,
+  mdiLightbulb,
+  mdiLock,
+  mdiMotionSensor,
+  mdiPowerPlug,
+  mdiRouter,
+  mdiSpeaker,
+  mdiTelevision,
+  mdiThermometer,
+  mdiToggleSwitch,
+  mdiWater,
+  mdiWifi
+} from "@mdi/js";
+import { ThemeService } from "../../util/theme-service.js";
+function getDefaultIconColor() {
+  return ThemeService.effectiveTheme === "dark" ? "#b0b0b0" : "#666666";
+}
+const DeviceTypes = {
+  // Lighting
+  ON_OFF_LIGHT: 256,
+  DIMMABLE_LIGHT: 257,
+  COLOR_TEMPERATURE_LIGHT: 268,
+  EXTENDED_COLOR_LIGHT: 269,
+  // Plugs/Outlets
+  ON_OFF_PLUG: 266,
+  DIMMABLE_PLUG: 267,
+  // Switches
+  ON_OFF_SWITCH: 259,
+  DIMMER_SWITCH: 260,
+  COLOR_DIMMER_SWITCH: 261,
+  GENERIC_SWITCH: 15,
+  // Sensors
+  CONTACT_SENSOR: 21,
+  OCCUPANCY_SENSOR: 263,
+  TEMPERATURE_SENSOR: 770,
+  HUMIDITY_SENSOR: 775,
+  LIGHT_SENSOR: 262,
+  PRESSURE_SENSOR: 773,
+  FLOW_SENSOR: 774,
+  // HVAC
+  THERMOSTAT: 769,
+  FAN: 43,
+  // Closures
+  DOOR_LOCK: 10,
+  WINDOW_COVERING: 514,
+  // Media
+  SPEAKER: 34,
+  BASIC_VIDEO_PLAYER: 40,
+  TELEVISION: 35,
+  // Infrastructure
+  ROOT_NODE: 22,
+  BRIDGE: 14,
+  AGGREGATOR: 14,
+  // Same as bridge
+  // Water
+  WATER_LEAK_DETECTOR: 67,
+  WATER_VALVE: 66
+};
+const deviceTypeToIcon = {
+  // Lighting
+  [DeviceTypes.ON_OFF_LIGHT]: mdiLightbulb,
+  [DeviceTypes.DIMMABLE_LIGHT]: mdiLightbulb,
+  [DeviceTypes.COLOR_TEMPERATURE_LIGHT]: mdiCeilingLight,
+  [DeviceTypes.EXTENDED_COLOR_LIGHT]: mdiCeilingLight,
+  // Plugs/Outlets
+  [DeviceTypes.ON_OFF_PLUG]: mdiPowerPlug,
+  [DeviceTypes.DIMMABLE_PLUG]: mdiPowerPlug,
+  // Switches
+  [DeviceTypes.ON_OFF_SWITCH]: mdiToggleSwitch,
+  [DeviceTypes.DIMMER_SWITCH]: mdiToggleSwitch,
+  [DeviceTypes.COLOR_DIMMER_SWITCH]: mdiToggleSwitch,
+  [DeviceTypes.GENERIC_SWITCH]: mdiToggleSwitch,
+  // Sensors
+  [DeviceTypes.CONTACT_SENSOR]: mdiDoorOpen,
+  [DeviceTypes.OCCUPANCY_SENSOR]: mdiMotionSensor,
+  [DeviceTypes.TEMPERATURE_SENSOR]: mdiThermometer,
+  [DeviceTypes.HUMIDITY_SENSOR]: mdiGauge,
+  [DeviceTypes.LIGHT_SENSOR]: mdiGauge,
+  [DeviceTypes.PRESSURE_SENSOR]: mdiGauge,
+  [DeviceTypes.FLOW_SENSOR]: mdiGauge,
+  // HVAC
+  [DeviceTypes.THERMOSTAT]: mdiThermometer,
+  [DeviceTypes.FAN]: mdiFan,
+  // Closures
+  [DeviceTypes.DOOR_LOCK]: mdiLock,
+  [DeviceTypes.WINDOW_COVERING]: mdiHome,
+  // Media
+  [DeviceTypes.SPEAKER]: mdiSpeaker,
+  [DeviceTypes.BASIC_VIDEO_PLAYER]: mdiTelevision,
+  [DeviceTypes.TELEVISION]: mdiTelevision,
+  // Infrastructure
+  [DeviceTypes.ROOT_NODE]: mdiHome,
+  [DeviceTypes.BRIDGE]: mdiRouter,
+  [DeviceTypes.AGGREGATOR]: mdiRouter,
+  // Water
+  [DeviceTypes.WATER_LEAK_DETECTOR]: mdiWater,
+  [DeviceTypes.WATER_VALVE]: mdiWater
+};
+const threadRoleToIcon = {
+  5: mdiRouter,
+  // Router
+  6: mdiAccessPoint
+  // Leader
+};
+function getPrimaryDeviceType(node) {
+  const deviceTypeList1 = node.attributes["1/29/0"];
+  if (deviceTypeList1?.length) {
+    const entry = deviceTypeList1[0];
+    return entry?.["0"] ?? entry?.deviceType;
+  }
+  const deviceTypeList0 = node.attributes["0/29/0"];
+  if (deviceTypeList0?.length) {
+    const entry = deviceTypeList0[0];
+    return entry?.["0"] ?? entry?.deviceType;
+  }
+  return void 0;
+}
+function getDeviceIcon(node, threadRole) {
+  if (threadRole !== void 0 && threadRoleToIcon[threadRole]) {
+    const deviceType2 = getPrimaryDeviceType(node);
+    if (deviceType2 === DeviceTypes.ROOT_NODE || deviceType2 === DeviceTypes.BRIDGE || node.is_bridge) {
+      return threadRoleToIcon[threadRole];
+    }
+  }
+  if (node.is_bridge) {
+    return mdiRouter;
+  }
+  const deviceType = getPrimaryDeviceType(node);
+  if (deviceType !== void 0 && deviceTypeToIcon[deviceType]) {
+    return deviceTypeToIcon[deviceType];
+  }
+  return mdiHome;
+}
+function getNetworkTypeIcon(networkType) {
+  switch (networkType) {
+    case "thread":
+      return mdiAccessPoint;
+    case "wifi":
+      return mdiWifi;
+    case "ethernet":
+      return mdiRouter;
+    default:
+      return mdiHome;
+  }
+}
+function createIconDataUrl(iconPath, color, size = 48) {
+  const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}" height="${size}">
+            <circle cx="12" cy="12" r="11" fill="white" stroke="${color}" stroke-width="1"/>
+            <path d="${iconPath}" fill="${color}" transform="scale(0.6) translate(8,8)"/>
+        </svg>
+    `.trim();
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function createNodeIconDataUrl(node, threadRole, isSelected = false, isOffline = false) {
+  const iconPath = getDeviceIcon(node, threadRole);
+  let color;
+  if (isSelected) {
+    color = isOffline ? "#b71c1c" : "#1976d2";
+  } else if (isOffline) {
+    color = "#d32f2f";
+  } else {
+    color = getDefaultIconColor();
+  }
+  return createIconDataUrl(iconPath, color);
+}
+function createUnknownDeviceIconDataUrl(isRouter = false, isSelected = false) {
+  const iconPath = isRouter ? mdiAccessPoint : mdiHelp;
+  const color = isSelected ? "#1976d2" : "#ff9800";
+  return createIconDataUrl(iconPath, color);
+}
+function createWiFiRouterIconDataUrl(isSelected = false) {
+  const color = isSelected ? "#1976d2" : "#ff9800";
+  return createIconDataUrl(mdiWifi, color);
+}
+export {
+  createIconDataUrl,
+  createNodeIconDataUrl,
+  createUnknownDeviceIconDataUrl,
+  createWiFiRouterIconDataUrl,
+  getDeviceIcon,
+  getNetworkTypeIcon,
+  getPrimaryDeviceType
+};
+//# sourceMappingURL=device-icons.js.map

package/dist/esm/pages/network/device-icons.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/pages/network/device-icons.ts"],
+  "mappings": "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",
+  "names": ["deviceType"]
+}