@matter-server/dashboard 0.6.1 → 0.6.2-alpha.0-20260421-bc2093e

package/dist/web/index.html

@@ -47,6 +47,10 @@
     --md-sys-color-outline: #79747e;
     --md-sys-color-outline-variant: #cac4d0;
 
+    /* Developer-mode accent (deep violet — distinct from primary-cyan and error-red) */
+    --dev-color: #5e35b1;
+    --dev-on-color: #ffffff;
+
     /* Graph / network semantic colors */
     --signal-color-strong: #4caf50;
     --signal-color-medium: #ff9800;
@@ -104,6 +108,8 @@
     --md-sys-color-on-primary-container: #d0e4ff;
     --md-sys-color-outline: #938f99;
     --md-sys-color-outline-variant: #49454f;
+    --dev-color: #b39ddb;
+    --dev-on-color: #311b92;
     --signal-color-strong: #66bb6a;
     --signal-color-medium: #ffa726;
     --signal-color-weak: #ef5350;

package/dist/web/js/attribute-write-dialog-B1tIg_0G.js

@@ -0,0 +1,166 @@
+import { q as i, n, u as r, d as e, i as i$1, A, O as formatHex, j as b, K as handleAsync, t } from './matter-dashboard-app-F5wNhZIe.js';
+import { t as toBigIntAwareJson } from './main.js';
+import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
+import { p as parseJsonPayload } from './parse-json-payload-DU9TWKdu.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let AttributeWriteDialog = class extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.currentValue = null;
+    this._busy = false;
+    this._error = null;
+  }
+  firstUpdated() {
+    if (this._textarea && this._textarea.value === "") {
+      this._textarea.value = toBigIntAwareJson(this.currentValue ?? null, 2);
+    }
+  }
+  get _attributePath() {
+    return `${this.endpointId}/${this.clusterId}/${this.attributeId}`;
+  }
+  _close() {
+    this.shadowRoot.querySelector("md-dialog").close();
+  }
+  _handleClosed() {
+    this.parentNode.removeChild(this);
+  }
+  async _write() {
+    this._error = null;
+    const parsed = parseJsonPayload(this._textarea.value);
+    if (!parsed.ok) {
+      this._error = `Invalid JSON: ${parsed.error}`;
+      return;
+    }
+    this._busy = true;
+    try {
+      await this.client.writeAttribute(this.nodeId, this._attributePath, parsed.value);
+      this._close();
+    } catch (err) {
+      this._error = err instanceof Error ? err.message : String(err);
+    } finally {
+      this._busy = false;
+    }
+  }
+  render() {
+    return b`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Write ${this.label}</div>
+                <div slot="content">
+                    <p class="path" id="write-path">
+                        Path <code>${this._attributePath}</code>
+                        (${formatHex(this.endpointId)}/${formatHex(this.clusterId)}/${formatHex(this.attributeId)})
+                    </p>
+                    <label class="textarea-label" for="write-payload">Value (JSON)</label>
+                    <textarea
+                        id="write-payload"
+                        class="payload"
+                        spellcheck="false"
+                        autocomplete="off"
+                        autocapitalize="off"
+                        aria-describedby="write-path${this._error ? " write-error" : ""}"
+                        rows="10"
+                    ></textarea>
+                    ${this._error ? b`<div id="write-error" class="error" role="alert">${this._error}</div>` : A}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close} ?disabled=${this._busy}>Cancel</md-text-button>
+                    <md-text-button @click=${handleAsync(() => this._write())} ?disabled=${this._busy}>
+                        ${this._busy ? "Writing..." : "Write"}
+                    </md-text-button>
+                </div>
+            </md-dialog>
+        `;
+  }
+};
+AttributeWriteDialog.styles = i`
+        md-dialog {
+            min-width: 520px;
+            max-width: 720px;
+        }
+
+        .path {
+            margin: 0 0 12px 0;
+            font-size: 0.85rem;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .path code {
+            font-family: var(--monospace-font);
+            background: var(--md-sys-color-surface-container-high);
+            padding: 0 4px;
+            border-radius: 3px;
+        }
+
+        .textarea-label {
+            display: block;
+            margin: 0 0 6px 0;
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-surface);
+        }
+
+        .payload {
+            width: 100%;
+            box-sizing: border-box;
+            font-family: var(--monospace-font);
+            font-size: 0.9rem;
+            padding: 8px;
+            background: var(--md-sys-color-surface-container-low);
+            color: var(--md-sys-color-on-surface);
+            border: 1px solid var(--md-sys-color-outline);
+            border-radius: 6px;
+            resize: vertical;
+            min-height: 140px;
+        }
+
+        .payload:focus {
+            outline: 2px solid var(--dev-color);
+            outline-offset: -1px;
+        }
+
+        .error {
+            margin-top: 10px;
+            padding: 10px 12px;
+            background: var(--md-sys-color-error-container);
+            color: var(--md-sys-color-on-error-container);
+            border-radius: 6px;
+            font-size: 0.875rem;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+    `;
+__decorateClass([n({
+  attribute: false
+})], AttributeWriteDialog.prototype, "client", 2);
+__decorateClass([n({
+  type: Number
+})], AttributeWriteDialog.prototype, "nodeId", 2);
+__decorateClass([n({
+  type: Number
+})], AttributeWriteDialog.prototype, "endpointId", 2);
+__decorateClass([n({
+  type: Number
+})], AttributeWriteDialog.prototype, "clusterId", 2);
+__decorateClass([n({
+  type: Number
+})], AttributeWriteDialog.prototype, "attributeId", 2);
+__decorateClass([n({
+  type: String
+})], AttributeWriteDialog.prototype, "label", 2);
+__decorateClass([n({
+  attribute: false
+})], AttributeWriteDialog.prototype, "currentValue", 2);
+__decorateClass([r()], AttributeWriteDialog.prototype, "_busy", 2);
+__decorateClass([r()], AttributeWriteDialog.prototype, "_error", 2);
+__decorateClass([e("textarea")], AttributeWriteDialog.prototype, "_textarea", 2);
+AttributeWriteDialog = __decorateClass([t("attribute-write-dialog")], AttributeWriteDialog);
+
+export { AttributeWriteDialog };

package/dist/web/js/command-invoke-dialog-T_pcKaIB.js

@@ -0,0 +1,192 @@
+import { q as i, n, u as r, d as e, i as i$1, A, O as formatHex, j as b, K as handleAsync, t } from './matter-dashboard-app-F5wNhZIe.js';
+import { t as toBigIntAwareJson } from './main.js';
+import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
+import { p as parseJsonPayload, i as isPlainObject } from './parse-json-payload-DU9TWKdu.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let CommandInvokeDialog = class extends i$1 {
+  constructor() {
+    super(...arguments);
+    this._busy = false;
+    this._error = null;
+    this._response = null;
+  }
+  firstUpdated() {
+    if (this._textarea && this._textarea.value === "") {
+      this._textarea.value = "{}";
+    }
+  }
+  _close() {
+    this.shadowRoot.querySelector("md-dialog").close();
+  }
+  _handleClosed() {
+    this.parentNode.removeChild(this);
+  }
+  async _invoke() {
+    this._error = null;
+    const parsed = parseJsonPayload(this._textarea.value);
+    if (!parsed.ok) {
+      this._error = `Invalid JSON: ${parsed.error}`;
+      this._response = null;
+      return;
+    }
+    const payload = parsed.value;
+    if (!isPlainObject(payload)) {
+      this._error = "Payload must be a JSON object (use {} for commands with no arguments).";
+      this._response = null;
+      return;
+    }
+    this._busy = true;
+    try {
+      const result = await this.client.deviceCommand(this.nodeId, this.endpointId, this.clusterId, this.commandName, payload);
+      this._response = toBigIntAwareJson(result ?? null, 2);
+      this._error = null;
+    } catch (err) {
+      this._error = err instanceof Error ? err.message : String(err);
+      this._response = null;
+    } finally {
+      this._busy = false;
+    }
+  }
+  render() {
+    return b`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Invoke ${this.commandLabel}</div>
+                <div slot="content">
+                    <p class="path" id="invoke-path">
+                        Cluster <code>${this.clusterId}</code> (${formatHex(this.clusterId)}) · Endpoint
+                        <code>${this.endpointId}</code> · Command <code>${this.commandName}</code>
+                    </p>
+                    <label class="textarea-label" for="payload">Payload (JSON)</label>
+                    <textarea
+                        id="payload"
+                        class="payload"
+                        spellcheck="false"
+                        autocomplete="off"
+                        autocapitalize="off"
+                        aria-describedby="invoke-path${this._error ? " invoke-error" : ""}"
+                        rows="8"
+                    ></textarea>
+                    ${this._error ? b`<div id="invoke-error" class="error" role="alert">${this._error}</div>` : A}
+                    ${this._response !== null ? b`
+                              <label class="textarea-label">Response</label>
+                              <pre class="response"><code>${this._response}</code></pre>
+                          ` : A}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close} ?disabled=${this._busy}>Close</md-text-button>
+                    <md-text-button @click=${handleAsync(() => this._invoke())} ?disabled=${this._busy}>
+                        ${this._busy ? "Invoking..." : "Invoke"}
+                    </md-text-button>
+                </div>
+            </md-dialog>
+        `;
+  }
+};
+CommandInvokeDialog.styles = i`
+        md-dialog {
+            min-width: 520px;
+            max-width: 720px;
+        }
+
+        .path {
+            margin: 0 0 12px 0;
+            font-size: 0.85rem;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+
+        .path code {
+            font-family: var(--monospace-font);
+            background: var(--md-sys-color-surface-container-high);
+            padding: 0 4px;
+            border-radius: 3px;
+        }
+
+        .textarea-label {
+            display: block;
+            margin: 6px 0 6px 0;
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-surface);
+        }
+
+        .payload {
+            width: 100%;
+            box-sizing: border-box;
+            font-family: var(--monospace-font);
+            font-size: 0.9rem;
+            padding: 8px;
+            background: var(--md-sys-color-surface-container-low);
+            color: var(--md-sys-color-on-surface);
+            border: 1px solid var(--md-sys-color-outline);
+            border-radius: 6px;
+            resize: vertical;
+            min-height: 120px;
+        }
+
+        .payload:focus {
+            outline: 2px solid var(--dev-color);
+            outline-offset: -1px;
+        }
+
+        .error {
+            margin-top: 10px;
+            padding: 10px 12px;
+            background: var(--md-sys-color-error-container);
+            color: var(--md-sys-color-on-error-container);
+            border-radius: 6px;
+            font-size: 0.875rem;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+
+        .response {
+            margin: 6px 0 0 0;
+            padding: 10px 12px;
+            background: var(--md-sys-color-surface-container-low);
+            color: var(--md-sys-color-on-surface);
+            border: 1px solid var(--md-sys-color-outline);
+            border-radius: 6px;
+            max-height: 260px;
+            overflow: auto;
+            font-size: 0.85rem;
+        }
+
+        .response code {
+            font-family: var(--monospace-font);
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+    `;
+__decorateClass([n({
+  attribute: false
+})], CommandInvokeDialog.prototype, "client", 2);
+__decorateClass([n({
+  type: Number
+})], CommandInvokeDialog.prototype, "nodeId", 2);
+__decorateClass([n({
+  type: Number
+})], CommandInvokeDialog.prototype, "endpointId", 2);
+__decorateClass([n({
+  type: Number
+})], CommandInvokeDialog.prototype, "clusterId", 2);
+__decorateClass([n({
+  type: String
+})], CommandInvokeDialog.prototype, "commandName", 2);
+__decorateClass([n({
+  type: String
+})], CommandInvokeDialog.prototype, "commandLabel", 2);
+__decorateClass([r()], CommandInvokeDialog.prototype, "_busy", 2);
+__decorateClass([r()], CommandInvokeDialog.prototype, "_error", 2);
+__decorateClass([r()], CommandInvokeDialog.prototype, "_response", 2);
+__decorateClass([e("textarea")], CommandInvokeDialog.prototype, "_textarea", 2);
+CommandInvokeDialog = __decorateClass([t("command-invoke-dialog")], CommandInvokeDialog);
+
+export { CommandInvokeDialog };

package/dist/web/js/{commission-node-dialog-DfwKU9qk.js → commission-node-dialog-WS5qDOnU.js}

@@ -1,4 +1,4 @@
-import { r, n, t, i, j as b } from './matter-dashboard-app-BtHTmAPq.js';
+import { u as r, n, t, i, j as b } from './matter-dashboard-app-F5wNhZIe.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 
@@ -44,18 +44,18 @@ let ComissionNodeDialog = class extends i {
     if (!this.client.serverInfo.bluetooth_enabled) {
       return;
     }
-    import('./commission-node-wifi-DwUkXlWz.js');
+    import('./commission-node-wifi-Bjdqn47D.js');
     this._mode = "wifi";
   }
   _commissionThread() {
     if (!this.client.serverInfo.bluetooth_enabled) {
       return;
     }
-    import('./commission-node-thread-D-icSzto.js');
+    import('./commission-node-thread-B0wMe4Wq.js');
     this._mode = "thread";
   }
   _commissionExisting() {
-    import('./commission-node-existing-C7ITvNfj.js');
+    import('./commission-node-existing-Bb10H55l.js');
     this._mode = "existing";
   }
   _nodeCommissioned(ev) {

package/dist/web/js/{commission-node-existing-C7ITvNfj.js → commission-node-existing-Bb10H55l.js}

@@ -1,5 +1,5 @@
-import { r, H as c, I as clientContext, n, a as e, t, i, A, G as handleAsync, j as b, F as showAlertDialog } from './matter-dashboard-app-BtHTmAPq.js';
-import { f as fireEvent } from './fire_event-2ZxL-AHZ.js';
+import { u as r, P as c, Q as clientContext, n, d as e, t, i, A, K as handleAsync, j as b, J as showAlertDialog } from './matter-dashboard-app-F5wNhZIe.js';
+import { f as fireEvent } from './fire_event-BL87hqSP.js';
 import './main.js';
 
 var __defProp = Object.defineProperty;

package/dist/web/js/{commission-node-thread-D-icSzto.js → commission-node-thread-B0wMe4Wq.js}

@@ -1,5 +1,5 @@
-import { r, H as c, I as clientContext, n, a as e, t, i, A, G as handleAsync, j as b, F as showAlertDialog } from './matter-dashboard-app-BtHTmAPq.js';
-import { f as fireEvent } from './fire_event-2ZxL-AHZ.js';
+import { u as r, P as c, Q as clientContext, n, d as e, t, i, A, K as handleAsync, j as b, J as showAlertDialog } from './matter-dashboard-app-F5wNhZIe.js';
+import { f as fireEvent } from './fire_event-BL87hqSP.js';
 import './main.js';
 
 var __defProp = Object.defineProperty;

package/dist/web/js/{commission-node-wifi-DwUkXlWz.js → commission-node-wifi-Bjdqn47D.js}

@@ -1,5 +1,5 @@
-import { r, H as c, I as clientContext, n, a as e, t, i, A, G as handleAsync, j as b, F as showAlertDialog } from './matter-dashboard-app-BtHTmAPq.js';
-import { f as fireEvent } from './fire_event-2ZxL-AHZ.js';
+import { u as r, P as c, Q as clientContext, n, d as e, t, i, A, K as handleAsync, j as b, J as showAlertDialog } from './matter-dashboard-app-F5wNhZIe.js';
+import { f as fireEvent } from './fire_event-BL87hqSP.js';
 import './main.js';
 
 var __defProp = Object.defineProperty;

package/dist/web/js/{dialog-box-BmpaTrvT.js → dialog-box-DtMt9N0h.js}

@@ -1,4 +1,4 @@
-import { k as i, n, i as i$1, j as b, t } from './matter-dashboard-app-BtHTmAPq.js';
+import { q as i, n, i as i$1, j as b, t } from './matter-dashboard-app-F5wNhZIe.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/dist/web/js/{fire_event-2ZxL-AHZ.js → fire_event-BL87hqSP.js}

@@ -1,4 +1,4 @@
-import { m as mixinDelegatesAria, i, _ as __decorate, n, A, f as e, j as b, k as i$1, t } from './matter-dashboard-app-BtHTmAPq.js';
+import { m as mixinDelegatesAria, i, _ as __decorate, n, A, h as e, j as b, q as i$1, t } from './matter-dashboard-app-F5wNhZIe.js';
 
 /**
  * @license

package/dist/web/js/main.js

@@ -757,7 +757,7 @@ const ThemeService = new ThemeServiceImpl();
  * SPDX-License-Identifier: Apache-2.0
  */
 async function main() {
-  import('./matter-dashboard-app-BtHTmAPq.js').then(function (n) { return n.K; });
+  import('./matter-dashboard-app-F5wNhZIe.js').then(function (n) { return n.S; });
   let url = "";
   const isProductionServer = window.__MATTERJS_PRODUCTION_MODE__ === true || location.origin.includes(":5580") || location.href.includes("hassio_ingress") || location.href.includes("/api/ingress/");
   if (!isProductionServer) {
@@ -792,4 +792,4 @@ async function main() {
 }
 main();
 
-export { ThemeService as T, toBigIntAwareJson as t };
+export { ThemeService as T, parseBigIntAwareJson as p, toBigIntAwareJson as t };