node-red-contrib-room-tools 1.9.3 → 1.9.4

package/CONTROL_PANEL_AI_GUIDE.md

@@ -109,6 +109,8 @@ XY-series 使用数组字段初始化，例如 `spectrum: []`。推荐使用标
 
 数组以整体替换方式更新，绘图通常使用浅层 `watch` 即可，无需 `deep: true` 遍历每个点。只观察数组来绘制，不改写接收数组；多图表需要时可在页面自己的 `requestAnimationFrame` 中合并绘制，并在卸载时清理绘图资源。这是纯显示逻辑，不是第二套设备通信。
 
+无关 DOM 变化不会反复向同一个目标模型写入上一帧数组；容器重新出现时由节点恢复最新快照，不要手动补绑。大量频谱点建议在 Canvas 中批量绘制，避免为每个采样点创建 DOM 元素。多个显示终端会增加实际网络和绘制负载，不能把单帧点数上限理解为所有图表都能同时维持 30 Hz。
+
 ### 3.1 普通控件写法
 
 ```html
@@ -390,8 +392,8 @@ export default {
 
 1. 将 Template 保存到 `ui-control-panel`，配置 Dashboard 页面、Room ID、普通登录账号和独立编辑账号，然后保存并 Deploy。
 2. 重新打开节点，点击 `Open binding editor`。编辑页登录使用编辑账号；进入后 Select 默认激活。`Open page` 打开普通控制页面，普通页面必须使用普通账号登录。
-3. 在 Select 模式选择控件，选择设备、模式、Write point、Feedback point 和编号方式。Meter、XY-series 和文本展示只能用 `read`；当前 XY-series 弹窗仍可能默认显示 `both`，须手动选择 `read`。已绑定控件在编辑模式显示亮紫色边框；这只是编辑提示。
-4. 点 Apply。节点验证当前模板、设备目录和映射，备份当前 Flow，并通过运行时 Flow API 更新当前面板的映射和受管理桥接。它不会导入、清除或追加其他面板的 Flow。
+3. 在 Select 模式选择控件，选择设备、模式、Write point、Feedback point 和编号方式。Meter、XY-series 和文本展示的模式选项只有 `read`；无需手动从 `both` 改为 `read`。已绑定控件在编辑模式显示亮紫色边框；这只是编辑提示。
+4. 点 Apply。节点验证当前模板、设备目录和映射，备份当前 Flow，并通过运行时 Flow API 以 `nodes` 部署方式更新当前面板的映射和受管理桥接。更新会使受影响节点重启；浏览器同步脚本不点击 Deploy，也不会向画布导入、清除或追加节点。
 5. Apply 成功后会重新加载当前编辑页，使用仍有效的编辑会话继续进入；会话过期或配置改变时可能要求重新登录。Bindings 列表可以 Edit 或 Remove，从列表进入编辑时取消/保存后回到列表。点 Exit 退出编辑并回到普通页面登录页。
 
 Automator 的同步脚本监听 `notification/runtime-deploy` 的新版本通知，并在当前页面最多触发一次浏览器刷新；它不读取、导入、合并、清除或再次提交 Flow，也不额外点击 Deploy。监听不限于本面板 Apply，其他运行时版本变化也可能触发刷新。当前实现不判断画布是否有未 Deploy 改动，也不会合并画布草稿；在 Apply 前应先处理好 Automator 中未保存的画布改动。没有打开 Automator 编辑页或不支持该通知接口时，不能承诺自动刷新。

package/README.md

@@ -10,7 +10,7 @@ Both logins work over HTTP on a trusted local network. HTTPS is recommended for
 
 Bindings are stored in `visualBindings` on the node. The runtime reads that mapping to authenticate commands, route feedback, and generate a native bridge. The page author does not put device paths, `data-cp-*` attributes, or device-send code in the Template. Author-provided `data-cp-*` attributes are rejected.
 
-Supported controls include native range, checkbox, semantic pressed button, select, text input, meter, progress, and simple text display. Give repeated controls distinct standard IDs. Simple top-level Vue `v-model` works, including object-list models such as `item.volume`, `item.audio.volume`, or `items[index].volume`, primitive array models such as `values[index]`, and an inner `<template v-for>` for multiple controls per row. During Vue re-rendering, a temporary duplicate list key is ignored until the key becomes unique again, so bindings do not attach twice. Controls with existing send handlers or ambiguous dynamic behavior are rejected until a suitable adapter exists. See `CONTROL_PANEL_AI_GUIDE.md` for examples and limits.
+Supported controls include native range, checkbox, semantic pressed button, select, text input, meter, progress, and simple text display. Give each template control a stable standard ID or name; repeated instances also need stable unique keys. Simple top-level Vue `v-model` works, including object-list models such as `item.volume`, `item.audio.volume`, or `items[index].volume`, primitive array models such as `values[index]`, and an inner `<template v-for>` for multiple controls per row. During Vue re-rendering, a temporary duplicate list key is ignored until the key becomes unique again, so bindings do not attach twice. Detached or disposed controls release their event listeners and cannot send commands. Controls with existing send handlers or ambiguous dynamic behavior are rejected until a suitable adapter exists. See `CONTROL_PANEL_AI_GUIDE.md` for examples and limits.
 
 Native semantic buttons support a binding-editor **Button behavior** setting: **Click to toggle** (the default for existing bindings) or **Hold to activate**. Momentary buttons require `both` mode, send boolean true on press and false on release, and always display real device feedback rather than a predicted local state. Pointer cancellation, keyboard release, focus/visibility loss, DOM removal, and disconnect release the hold. A 3-second server lease attempts release if the browser disappears; lease renewal does not repeat device writes. Concurrent holders of the same Write point within one panel are combined until the last release. Other panels and external controllers are not coordinated. Device or bridge outages can prevent physical release, so feedback remains the authority. Drivers keep the existing boolean Toggle contract; page authors do not implement hold events or lease traffic.
 
@@ -18,7 +18,7 @@ Writable native semantic buttons in either behavior automatically show a separat
 
 Realtime meter delivery does not change the page-authoring contract. Authors use ordinary `meter`, `progress`, `v-progress-linear`, or `v-progress-circular` controls with stable IDs and simple top-level fields. They do not declare devices, point paths, stream IDs, sockets, subscriptions, or frame formats. A `volume` binding is a writable gain setting with ordinary feedback; a `meter` binding is read-only realtime signal telemetry and requires a target that advertises Meter metadata. A normal numeric `level` target is not automatically a Meter. When the selected feedback point advertises realtime meter delivery, ControlPanel automatically shares the device stream, projects complete frames to the bound controls, applies webpage-side range conversion, and handles stale/reconnected data.
 
-Readonly XY-series telemetry follows the same page boundary. Use a standard canvas with one simple Vue array binding, for example `<canvas id="spectrum" :data-points="spectrum"></canvas>`, or a map container with `<div id="room-map" :data-coordinates="locations"></div>`. Map coordinates use the standard `[longitude, latitude]` order. The page receives complete `[[x, y], ...]` snapshots; ControlPanel owns subscription, latest-frame replacement, stale handling, and reconnection. The page does not declare a device, stream, socket, or frame protocol. XY-series is independent from Meter and Volume: it never sends commands and does not represent a single scalar value.
+Readonly XY-series telemetry follows the same page boundary. Use a standard canvas with one simple Vue array binding, for example `<canvas id="spectrum" :data-points="spectrum"></canvas>`, or a map container with `<div id="room-map" :data-coordinates="locations"></div>`. Use `[longitude, latitude]` for geographic coordinates or `[x, y]` for local planar coordinates; the page owns the projection. The page receives complete `[[x, y], ...]` snapshots; ControlPanel owns subscription, latest-frame replacement, stale handling, and reconnection. The page does not declare a device, stream, socket, or frame protocol. XY-series is independent from Meter and Volume: it never sends commands and does not represent a single scalar value.
 
 Different XY-series streams arrive independently. Room delivery aggregates their latest snapshots, not synchronized samples from a shared acquisition frame. The public framework defaults to 2048 points per stream and allows a configured maximum of 8192; the receiver enforces the manifest's `maxPoints`. A panel supports at most 256 XY-series bindings. These limits do not guarantee throughput at every frame rate or concurrency level; validate performance in the target environment.
 
@@ -26,7 +26,7 @@ Vuetify adapters cover `v-slider`, `v-switch`, `v-checkbox`, `v-select`, `v-radi
 
 Use paired Vuetify tags in Dashboard templates, such as `<v-slider></v-slider>`; self-closing component tags can absorb the following controls during Dashboard rendering and are rejected before deployment.
 
-After clicking Apply in the page binding editor, the package validates the mapping, backs up the active Flow, and generates the native bridge for that panel using the original 1.8.9 flow. Apply does not click Deploy for the user. When Automator reports the external Flow change, the editor refreshes its Flow view once; review the refreshed Flow and deploy it yourself. The bridge revision must match the saved mapping before a command can reach a device. A Node-RED simulation verifies software behavior, while live device operation requires a separate check.
+After clicking Apply in the page binding editor, the package validates the mapping, backs up the active Flow, and updates the panel and generated native bridge through the runtime Flow API with deployment type `nodes`. Affected runtime nodes restart. Separately, when Automator reports the external Flow change, its editor listener reloads the browser page once: that listener does not import, merge, clear or deploy Flow data. It does not preserve undeployed canvas drafts, so handle those before Apply. The bridge revision must match the saved mapping before a command can reach a device. A Node-RED simulation verifies software behavior, while live device operation requires a separate check.
 
 The current runtime has one panel-scoped control path. The retired topic-based region gateway, fixed demo scenes, hand-written control tags, and `sendControl` authoring API are not supported. The page editor and server use the same target compatibility rules.
 
@@ -40,4 +40,10 @@ Node.js 18.16.0 or newer is required. Dashboard 2 and the AMX Command/Status/Eve
 
 The release includes `npm-shrinkwrap.json` to install the tested dependency versions. Deploy/Push must reference the intended registry version or a controller-accessible tarball; a `file:` dependency pointing at a Mac path is not portable to MUSE. Restart the controller runtime after replacing module code.
 
-For development, run `node --test test-*.cjs`. The isolated integration test uses the executing Node version; `CP_TEST_NODE` and `CP_TEST_PANEL_PACKAGE` can select an alternate runtime and unpacked release package.
+For development, run `npm ci --ignore-scripts` and `npm test` in this source directory with Node.js >=18.16. Tests need the local pinned dependencies; do not depend on another machine's installed Automator modules. The parent project's `local-validation/test-source.sh` also covers the Python framework, drivers, and offline Flow helpers. Its optional isolated runtime test uses a temporary user directory and random loopback port; it never deploys to the live Automator or MUSE.
+
+Ordinary feedback uses authenticated SSE, while Meter and XY-series use Dashboard Socket.IO. SSE feedback is serialized once per broadcast; a temporary backpressured write may drain, while a persistently blocked client is disconnected and reconnects to the latest snapshot rather than buffering history. Each panel allows at most 100 simultaneous SSE clients.
+
+Realtime fan-out uses one volatile namespace broadcast to explicit authenticated socket IDs when the Dashboard socket exposes that API; other hosts keep the per-socket fallback. This avoids repeated server encoding without changing frame formats, authoring syntax, authorization or each viewer's network traffic. Shared streams are checked once when deciding whether a panel needs a new frame. Browser control lookup uses a DOM index invalidated on structure or binding-key changes; unrelated DOM mutations do not replay an XY array into the same model. Target recreation still restores the latest snapshot.
+
+The parent project's `local-validation/stress-panel.cjs` adds opt-in multi-room, maximum-point, multi-viewer and SSE pressure scenarios. These use real HTTP/Socket.IO with simulated DOM/animation frames, not live Automator, MUSE or actual browser paint; target-device capacity must be verified separately.

package/control-bound-protocol.js

@@ -66,7 +66,8 @@ function resolveBoundFeedback (routes, message) {
   const matches = []
   for (const [id, route] of routes) {
     if (route.control.mode === 'write' || route.binding?.device !== message.device ||
-      route.binding.readPath !== message.path || route.binding.readMeta?.meter) continue
+      route.binding.readPath !== message.path || route.binding.readMeta?.meter ||
+      route.binding.readMeta?.xySeries) continue
     const type = route.control.type
     const metadata = route.binding.readMeta
     let value = message.payload

package/control-panel.html

@@ -4,7 +4,6 @@
         function c_ (x) {
             return RED._('@flowfuse/node-red-dashboard/ui-template:ui-template.' + x)
         }
-        // TODO: move this to util.js for reuse & unit testing
         function hasProperty (obj, prop) {
             return Object.prototype.hasOwnProperty.call(obj, prop)
         }
@@ -346,20 +345,12 @@
     })()
 </script>
 
-<style>
-    .control-binding-hint { margin: 4px 0; color: var(--red-ui-secondary-text-color, #666); overflow-wrap: anywhere; }
-    .control-binding-bridge-option { display: flex; align-items: flex-start; gap: 8px; }
-    .control-binding-bridge-option > label { flex: 0 0 105px; }
-    .control-binding-bridge-option > div { flex: 1; min-width: 0; }
-    .control-binding-bridge-option small { display: block; margin-top: 3px; }
-</style>
-
 <script type="text/html" data-help-name="ui-control-panel">
     <p>This node renders a custom Vue Template and automatically injects control traffic and reported-device-state APIs.</p>
     <p>普通 HTML/Vue 控件由页面绑定编辑器自动识别，并通过面板的 authenticated session 发送控制。开发者不需要添加标签、调用自定义节点 API，或在 Template 中实现 throttling、latest-wins、队列和设备协议。</p>
     <p>页面只需按普通 H5/Vue 方式编写控件；编辑模式下在控件上打开绑定菜单，选择设备参数即可。登录、发送、反馈和状态同步由节点负责，Template 不应主动查询设备或把反馈回发成命令。</p>
     <p>See <code>CONTROL_PANEL_AI_GUIDE.md</code> in the node package for the complete AI authoring contract and examples.</p>
-    <p>Save and Deploy the panel, then use Open binding editor. Apply in that page validates and saves bindings, backs up the Flow, and regenerates the native bridge. When Node-RED reports a newer external Flow revision, the Automator editor page reloads once; the panel never imports or deploys Flow data. Ordinary Deploy alone does not apply bindings. Check targets and numbering before using real hardware.</p>
+    <p>Save and Deploy the panel, then use Open binding editor. Apply validates bindings, backs up the Flow, and updates the panel and native bridge through the runtime Flow API. When Node-RED reports a newer revision, the Automator editor page reloads once; that editor listener never imports nodes or clicks Deploy. Ordinary Deploy alone does not apply a binding draft. Check targets and numbering before using real hardware.</p>
 </script>
 
 <script type="text/html" data-template-name="ui-control-panel">
@@ -377,48 +368,40 @@
             <option value="widget:ui" data-i18n="ui-template.label.widget-ui"></option>
             <option value="site:style" data-i18n="ui-template.label.site-style"></option>
             <option value="page:style" data-i18n="ui-template.label.page-style"></option>
-            <!-- FUTURE? <option value="site:script" data-i18n="ui-template.label.site-script"></option>
-            <option value="page:script" data-i18n="ui-template.label.page-script"></option> -->
         </select>
     </div>
     <div id="template-row-ui" class="form-row">
-        <label for="node-input-ui"><i class="fa fa-bookmark"></i> <span data-i18n="ui-template.label.ui"></label>
+        <label for="node-input-ui"><i class="fa fa-bookmark"></i> <span data-i18n="ui-template.label.ui"></span></label>
         <input type="text" id="node-input-ui">
     </div>
     <div id="template-row-page" class="form-row">
-        <label for="node-input-page"><i class="fa fa-bookmark"></i> <span data-i18n="ui-template.label.page"></label>
+        <label for="node-input-page"><i class="fa fa-bookmark"></i> <span data-i18n="ui-template.label.page"></span></label>
         <input type="text" id="node-input-page">
     </div>
     <div id="template-row-group" class="form-row">
-        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-template.label.group"></label>
+        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-template.label.group"></span></label>
         <input type="text" id="node-input-group">
     </div>
     <div class="form-row nr-db-ui-element-hide-in-subflow">
-        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-base.label.size">Size</label>
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-base.label.size">Size</span></label>
         <button class="editor-button" id="node-input-size"></button>
     </div>
     <div class="form-row nr-db-ui-element-show-in-subflow">
-        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-base.label.width">Width</label>
+        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-base.label.width">Width</span></label>
         <input type="hidden" id="node-input-width">
     </div>
     <div class="form-row nr-db-ui-element-show-in-subflow">
-        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-base.label.height">Height</label>
+        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-base.label.height">Height</span></label>
         <input type="hidden" id="node-input-height">
     </div>
     <div class="form-row nr-db-ui-element-show-in-subflow">
-        <label><i class="fa fa-arrows"></i> <span data-i18n="ui-base.label.order">Order</label>
+        <label><i class="fa fa-arrows"></i> <span data-i18n="ui-base.label.order">Order</span></label>
         <input type="text" id="node-input-order">
     </div>
-    <!--<div class="form-row" id="template-row-size">
-        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-template.label.size"></span></label>
-        <input type="hidden" id="node-input-width">
-        <input type="hidden" id="node-input-height">
-        <button class="editor-button" id="node-input-size"></button>
-    </div>-->
     <div class="form-row">
-        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-template.label.className"></label>
+        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-template.label.className"></span></label>
         <div style="display: inline;">
-            <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-template.label.classNamePlaceholder" style="flex-grow: 1;">
+            <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-template.label.classNamePlaceholder">
             <a
                 data-html="true"
                 title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
@@ -480,13 +463,4 @@
             <label for="node-input-passthru" style="width:70%;"> <span data-i18n="ui-template.label.pass-through"></span></label>
         </div>
     </div>
-    <!--<div class="form-row" style="margin-bottom:0px;">
-            <input type="checkbox" id="node-input-storeOutMessages" style="display:inline-block; margin-left:8px; width:auto; vertical-align:top;">
-            <label for="node-input-storeOutMessages" style="width:70%;"> <span data-i18n="ui-template.label.store-state"></span></label>
-        </div>
-        <div class="form-row" style="margin-bottom:0px;">
-            <input type="checkbox" id="node-input-resendOnRefresh" style="display:inline-block; margin-left:8px; width:auto; vertical-align:top;">
-            <label for="node-input-resendOnRefresh" style="width:70%;"> <span data-i18n="ui-template.label.resend"></span></label>
-        </div>
-    </div> -->
 </script>

package/control-panel.js

@@ -174,6 +174,10 @@ module.exports = function (RED) {
 
     let gateway
     let gatewayAuthKey
+    async function telemetryTicket (req, res, identity, active) {
+      if (await meter?.ticket(req, res, identity, active)) return true
+      return await xySeries?.ticket(req, res, identity, active) || false
+    }
     const momentary = createMomentaryControls({ routes,
       send: (command, identity) => node.send({ ...command, room: identity.room, user: identity.user }),
       onError: error => node.error(error) })
@@ -189,9 +193,8 @@ module.exports = function (RED) {
           holdEpoch: momentary.epoch,
           secureCookie: config.secureCookie === true,
           restoredSessions: takeSessions(gatewayHandoffs, node.id, gatewayAuthKey),
-          onAuthenticatedRequest: (req, res, identity) => meter?.ticket(req, res, identity,
-            () => gateway?.sessionActive(identity.token)) || xySeries?.ticket(req, res, identity,
-              () => gateway?.sessionActive(identity.token)) || false,
+          onAuthenticatedRequest: (req, res, identity) => telemetryTicket(req, res, identity,
+            () => gateway?.sessionActive(identity.token)),
           onBoundCommand: (message, identity) => {
             if (!bridgeReady) return false
             if (message?._controlPanel?.hold) return momentary.handle(message, identity)
@@ -226,9 +229,8 @@ module.exports = function (RED) {
         password: node.credentials?.editorPassword,
         secureCookie: config.secureCookie === true,
         restoredSessions: takeSessions(editorHandoffs, node.id, editorAuthKey),
-        onAuthenticatedRequest: (req, res, identity) => meter?.ticket(req, res, identity,
-          () => editor?.sessionActive(identity.token)) || xySeries?.ticket(req, res, identity,
-            () => editor?.sessionActive(identity.token)) || false,
+        onAuthenticatedRequest: (req, res, identity) => telemetryTicket(req, res, identity,
+          () => editor?.sessionActive(identity.token)),
         getConfig: async req => editorConfig(await getSnapshot(req.socket.localPort, fetch,
           RED.settings.httpAdminRoot ?? '/'), node.id),
         getDevices: async () => {

package/control-type-model.js

@@ -1,14 +1,16 @@
 const contract = require('./control-type-contract.json')
 const { meterRoute } = require('./meter-route')
-
-
-
 // Used by both server validation and the injected editor; keep it self-contained.
 function createTargetMatcher (typeContract) {
   const families = {
     range: ['number'], switch: ['boolean'], meter: ['number'], 'xy-series': ['xy-series'],
     'text-display': ['text', 'number', 'enum', 'boolean'], 'text-input': ['text'], select: ['enum']
   }
+  function modes (adapter) {
+    if (!families[adapter]) return []
+    return ['meter', 'xy-series', 'text-display'].includes(adapter)
+      ? ['read'] : ['both', 'write', 'read']
+  }
   function family (target) {
     if (target.xySeries) return 'xy-series'
     if (target.controlSchemaVersion !== typeContract.schemaVersion) return null
@@ -35,10 +37,10 @@ function createTargetMatcher (typeContract) {
     if (candidate.unit && candidate.unit !== target.unit) return false
     return true
   }
-  return { family, compatible }
+  return { family, compatible, modes }
 }
 
-const { family: targetFamily, compatible: compatibleTarget } = createTargetMatcher(contract)
+const { family: targetFamily, compatible: compatibleTarget, modes: bindingModes } = createTargetMatcher(contract)
 
 function controlTypeForAdapter (adapter, target) {
   if (!compatibleTarget(adapter, target, 'read') && !compatibleTarget(adapter, target, 'write')) {
@@ -69,4 +71,4 @@ function targetMeta (target, onebased) {
   }
 }
 
-module.exports = { contract, createTargetMatcher, compatibleTarget, controlTypeForAdapter, targetFamily, targetMeta }
+module.exports = { contract, createTargetMatcher, compatibleTarget, controlTypeForAdapter, targetFamily, targetMeta, bindingModes }

package/gateway.cjs

@@ -47,15 +47,24 @@ function createGateway ({
   let closed = false
   let heartbeatTimer = null
 
-  function closeSubscriber (subscriber) {
-    subscribers.delete(subscriber)
-    try { subscriber.res.end() } catch (_) {}
+  function closeSubscriber (subscriber, destroy = false) {
+    if (!subscribers.delete(subscriber)) return
+    try { if (destroy) subscriber.res.destroy(); else subscriber.res.end() } catch (_) {}
     if (!subscribers.size && heartbeatTimer) {
       clearInterval(heartbeatTimer)
       heartbeatTimer = null
     }
   }
 
+  function writeSubscriber (subscriber, data) {
+    try {
+      // Allow one queued write to drain, including a large initial snapshot.
+      // A persistently blocked client reconnects to the latest snapshot.
+      if (subscriber.blocked) return closeSubscriber(subscriber, true)
+      if (subscriber.res.write(data) === false) subscriber.blocked = true
+    } catch (_) { closeSubscriber(subscriber, true) }
+  }
+
   function ensureHeartbeat () {
     if (heartbeatTimer || !subscribers.size) return
     heartbeatTimer = setInterval(() => {
@@ -68,23 +77,21 @@ function createGateway ({
           closeSubscriber(subscriber)
           continue
         }
-        try { subscriber.res.write(': heartbeat\n\n') } catch (_) { closeSubscriber(subscriber) }
+        writeSubscriber(subscriber, ': heartbeat\n\n')
       }
     }, FEEDBACK_HEARTBEAT_MS)
     heartbeatTimer.unref?.()
   }
 
   function sendFeedbackEvent (subscriber, message) {
-    try {
-      subscriber.res.write('data: ' + JSON.stringify(message) + '\n\n')
-    } catch (_) {
-      closeSubscriber(subscriber)
-    }
+    writeSubscriber(subscriber, 'data: ' + JSON.stringify(message) + '\n\n')
   }
 
 
   function broadcastFeedback (message) {
-    for (const subscriber of [...subscribers]) sendFeedbackEvent(subscriber, message)
+    if (!subscribers.size) return
+    const data = 'data: ' + JSON.stringify(message) + '\n\n'
+    for (const subscriber of [...subscribers]) writeSubscriber(subscriber, data)
   }
 
   function closeSubscribersForToken (token) {
@@ -205,6 +212,10 @@ function createGateway ({
         return true
       }
       if (path === routePrefix + '/events' && req.method === 'GET') {
+        if (subscribers.size >= 100) {
+          reply(res, 503, { error: 'Feedback connection limit reached' })
+          return true
+        }
         res.writeHead(200, {
           'Content-Type': 'text/event-stream; charset=utf-8',
           'Cache-Control': 'no-cache, no-transform',
@@ -213,8 +224,9 @@ function createGateway ({
           'X-Content-Type-Options': 'nosniff'
         })
         res.flushHeaders?.()
-        const subscriber = { res, token }
+        const subscriber = { res, token, blocked: false }
         subscribers.add(subscriber)
+        res.on('drain', () => { subscriber.blocked = false })
         res.on('close', () => closeSubscriber(subscriber))
         sendFeedbackEvent(subscriber, boundSnapshot())
         ensureHeartbeat()

package/native-binding-plan.js

@@ -222,10 +222,11 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
   }
 
   const commandSwitchId = `${scopeId}-commands`
-  // Meter lanes follow ordinary feedback lanes without overlapping their labels.
+  // Ordinary feedback, Meter, and XY-series each get a separate vertical band.
   for (const node of nodes) {
     if (node.id.startsWith(`${scopeId}-meter-`) || node.id.startsWith(`${scopeId}-xy-series-`)) {
       node.y += readTargets.size * 170
+      if (node.id.startsWith(`${scopeId}-xy-series-`)) node.y += meterStreams.size * 280
     }
   }
   const routerId = `${scopeId}-router`
@@ -256,7 +257,8 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     category: 'panel binding',
     in: [{ x: 170, y: 150, wires: [{ id: routerId }] }],
     out: readTargets.size || meterStreams.size || xySeriesStreams.size
-      ? [{ x: meterStreams.size ? 1600 : 1290, y: Math.round((390 + (readTargets.size + meterStreams.size + 1) * 85) / 10) * 10,
+      ? [{ x: meterStreams.size || xySeriesStreams.size ? 1600 : 1290,
+        y: Math.round((390 + (readTargets.size + meterStreams.size + xySeriesStreams.size + 1) * 85) / 10) * 10,
         wires: [...readTargets.values()].map(target => ({ id: target.tagId, port: 0 }))
           .concat([...meterStreams.values()].flatMap(target => target.tagIds.map(id => ({ id, port: 0 }))))
           .concat([...xySeriesStreams.values()].flatMap(target => target.tagIds.map(id => ({ id, port: 0 })))) }]

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "node-red-contrib-room-tools",
-      "version": "1.9.3",
+      "version": "1.9.4",
       "license": "UNLICENSED",
       "dependencies": {
         "@vue/compiler-sfc": "3.5.42",

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "Authenticated visual control panel binding for Node-RED and MUSE Automator",
   "license": "UNLICENSED",
+  "scripts": {
+    "test": "node --test test-*.cjs"
+  },
   "engines": {
     "node": ">=18.16.0"
   },
@@ -26,6 +29,7 @@
     "meter-route.js",
     "meter-frame.js",
     "panel-meter.js",
+    "panel-telemetry-send.js",
     "panel-meter-client.js",
     "xy-series-route.js",
     "xy-series-frame.js",

package/panel-binding-editor.js

@@ -6,6 +6,12 @@ function initializeVisualBinding () {
   const root = this.$el
   const base = config.editorEndpoint
   const saved = new Map(Object.entries(config.bindings || {}))
+  const bindingsByLocator = new Map()
+  for (const entry of saved) {
+    const locator = entry[1].locator
+    if (!bindingsByLocator.has(locator)) bindingsByLocator.set(locator, [])
+    bindingsByLocator.get(locator).push(entry)
+  }
   const meterEntries = [...saved].filter(([, entry]) => entry.readMeta?.meter)
   const xySeriesEntries = [...saved].filter(([, entry]) => entry.readMeta?.xySeries)
   const meterTargets = new Map()
@@ -13,6 +19,7 @@ function initializeVisualBinding () {
   let meterClient = null, lastMeterFrame = null
   let xySeriesClient = null, lastXYSeriesFrame = null
   const attached = new WeakSet()
+  const controlListeners = new Map()
   const buttonPresses = new Map()
   const momentaryButtons = new Map()
   const momentaryStates = new Map()
@@ -28,8 +35,10 @@ function initializeVisualBinding () {
   let devices = []
   let selecting = false
   let observer
+  let nodeIndex = null
   let toolbar
   let overlay
+  let overlayCleanup
   let status
   let loginScreen
 
@@ -52,6 +61,10 @@ function initializeVisualBinding () {
     node.addEventListener('click', action)
     return node
   }
+  function listen (node, name, action, capture = false, stops = cleanup) {
+    node.addEventListener(name, action, capture)
+    stops.push(() => node.removeEventListener(name, action, capture))
+  }
   function inform (message, error = false) {
     if (status) {
       status.textContent = message || ''
@@ -70,7 +83,7 @@ function initializeVisualBinding () {
     if (!response.ok) throw new Error(result.error || `Request failed (${response.status})`)
     return result
   }
-      function numericRange (binding, node) {
+  function numericRange (binding, node) {
     if (binding.uiRange) return binding.uiRange
     const tag = node.tagName?.toLowerCase()
     const type = node.type?.toLowerCase()
@@ -130,7 +143,30 @@ function initializeVisualBinding () {
     return repeatMarkerFor(node, binding.repeat) === String(binding.instanceKey)
   }
   function nodesForBinding (binding) {
-    return [...root.querySelectorAll('[data-cp-auto]')].filter(node => bindingMatchesNode(node, binding))
+    if (!nodeIndex) {
+      nodeIndex = new Map()
+      for (const node of root.querySelectorAll('[data-cp-auto]')) {
+        const locator = node.getAttribute('data-cp-auto')
+        if (!nodeIndex.has(locator)) nodeIndex.set(locator, { nodes: [], repeats: new Map() })
+        nodeIndex.get(locator).nodes.push(node)
+      }
+    }
+    const group = nodeIndex.get(binding.locator)
+    if (!group) return []
+    let nodes = group.nodes
+    if (binding.repeat) {
+      if (!group.repeats.has(binding.repeat.locator)) {
+        const keys = new Map()
+        for (const node of nodes) {
+          const key = repeatMarkerFor(node, binding.repeat)
+          if (!keys.has(key)) keys.set(key, [])
+          keys.get(key).push(node)
+        }
+        group.repeats.set(binding.repeat.locator, keys)
+      }
+      nodes = group.repeats.get(binding.repeat.locator).get(String(binding.instanceKey)) || []
+    }
+    return nodes.filter(node => root.contains(node))
   }
   function nodeForBinding (binding) {
     const matches = nodesForBinding(binding)
@@ -238,6 +274,17 @@ function initializeVisualBinding () {
     }
   }
   function attachControls () {
+    if (disposed) return
+    nodeIndex = null
+    for (const [node, listeners] of controlListeners) {
+      const binding = saved.get(listeners.id)
+      if (!binding || nodeForBinding(binding) !== node) {
+        for (const stop of listeners.stops) stop()
+        controlListeners.delete(node)
+        pendingText.delete(listeners.id)
+        attached.delete(node)
+      }
+    }
     for (const [node, button] of buttonPresses) {
       const binding = saved.get(button.id)
       if (!binding || nodeForBinding(binding) !== node) {
@@ -256,13 +303,15 @@ function initializeVisualBinding () {
     }
     for (const node of root.querySelectorAll('[data-cp-auto]')) {
       if (attached.has(node)) continue
-      const locator = node.getAttribute('data-cp-auto')
-      const matched = [...saved].find(([, entry]) => bindingMatchesNode(node, entry))
+      const matched = bindingsByLocator.get(node.getAttribute('data-cp-auto'))
+        ?.find(([, entry]) => bindingMatchesNode(node, entry))
       if (!matched) continue
       const [id, binding] = matched
       if (nodeForBinding(binding) !== node) continue
       attached.add(node)
       if (binding.mode === 'read') continue
+      const stops = []
+      controlListeners.set(node, { id, stops })
       if (node.tagName === 'BUTTON' && binding.adapter === 'switch') {
         buttonPresses.set(node, { id, controller: component.__attachButtonPress({ node,
           canPress: () => !disposed && !editing && component.boundAuthenticated && component.boundFeedbackConnected }) })
@@ -282,7 +331,8 @@ function initializeVisualBinding () {
       if (binding.component) {
         if (binding.adapter === 'text-input') {
           const commit = () => {
-            if (!pendingText.has(id) || editing || !component.boundAuthenticated) return
+            if (disposed || !pendingText.has(id) || editing || !component.boundAuthenticated ||
+              nodeForBinding(binding) !== node) return
             const value = pendingText.get(id)
             pendingText.delete(id)
             try { component.sendBoundControl({ id, value, final: true }) } catch (error) {
@@ -293,46 +343,48 @@ function initializeVisualBinding () {
             if (component.$nextTick) void component.$nextTick(commit)
             else commit()
           }
-          node.addEventListener('change', afterModelUpdate)
-          node.addEventListener('focusout', afterModelUpdate)
+          listen(node, 'change', afterModelUpdate, false, stops)
+          listen(node, 'focusout', afterModelUpdate, false, stops)
           if (binding.component === 'v-text-field') {
-            node.addEventListener('keydown', event => {
+            listen(node, 'keydown', event => {
               if (event.key === 'Enter') afterModelUpdate()
-            })
+            }, false, stops)
           }
         }
         continue
       }
       const send = final => {
-        if (editing || !component.boundAuthenticated) return
+        if (disposed || editing || !component.boundAuthenticated || nodeForBinding(binding) !== node) return
         try { component.sendBoundControl({ id, value: valueFor(binding, node), final }) } catch (error) {
           console.error('ControlPanel binding command failed', error)
         }
       }
       if (binding.adapter === 'range') {
-        node.addEventListener('input', () => send(false), true)
-        node.addEventListener('change', () => send(true), true)
+        listen(node, 'input', () => send(false), true, stops)
+        listen(node, 'change', () => send(true), true, stops)
       } else if (binding.adapter === 'switch' && node.tagName === 'BUTTON') {
-        node.addEventListener('click', event => {
+        listen(node, 'click', event => {
           event.preventDefault()
           send(true)
-        })
-      } else node.addEventListener('change', () => send(true))
+        }, false, stops)
+      } else listen(node, 'change', () => send(true), false, stops)
     }
     if (meterEntries.length) {
+      const previous = new Map(meterTargets)
       meterTargets.clear()
       for (const [id, binding] of meterEntries) {
         const node = nodeForBinding(binding)
-        if (node) meterTargets.set(id, { node, binding })
+        if (node) meterTargets.set(id, previous.get(id)?.node === node ? previous.get(id) : { node, binding })
       }
       if (lastMeterFrame) applyMeterFrame(lastMeterFrame.frame, lastMeterFrame.ids)
       else invalidateMeters()
     }
     if (xySeriesEntries.length) {
+      const previous = new Map(xySeriesTargets)
       xySeriesTargets.clear()
       for (const [id, binding] of xySeriesEntries) {
         const node = nodeForBinding(binding)
-        if (node) xySeriesTargets.set(id, { node, binding })
+        if (node) xySeriesTargets.set(id, previous.get(id)?.node === node ? previous.get(id) : { node, binding })
       }
       if (lastXYSeriesFrame) applyXYSeriesFrame(lastXYSeriesFrame.frame, lastXYSeriesFrame.ids)
       else invalidateXYSeries()
@@ -343,7 +395,8 @@ function initializeVisualBinding () {
     lastMeterFrame = { frame, ids }
     for (let index = 0; index < ids.length; index++) {
       const target = meterTargets.get(ids[index])
-      if (!target) continue
+      if (!target || target.frame === frame) continue
+      target.frame = frame
       const { node, binding } = target
       node.setAttribute('data-cpv-meter-valid', String(frame.valid[index]))
       node.setAttribute('aria-invalid', String(!frame.valid[index]))
@@ -366,11 +419,14 @@ function initializeVisualBinding () {
     lastXYSeriesFrame = { frame, ids }
     for (let index = 0; index < ids.length; index++) {
       const target = xySeriesTargets.get(ids[index])
-      if (!target) continue
+      if (!target || target.frame === frame) continue
+      target.frame = frame
+      target.invalidated = false
       const { node, binding } = target
       node.setAttribute('data-cpv-xy-series-valid', String(frame.valid[index]))
+      node.setAttribute('aria-invalid', String(!frame.valid[index]))
       node.setAttribute('data-cpv-xy-series-seq', String(frame.seq))
-      const points = frame.valid[index] ? frame.values[index].map(point => point.slice()) : []
+      const points = frame.valid[index] ? frame.values[index].map(point => [point[0], point[1]]) : []
       if (binding.model) {
         if (binding.repeat) setRepeatModel(binding, points)
         else if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = points
@@ -379,7 +435,11 @@ function initializeVisualBinding () {
   }
   function invalidateXYSeries () {
     lastXYSeriesFrame = null
-    for (const { node, binding } of xySeriesTargets.values()) {
+    for (const target of xySeriesTargets.values()) {
+      if (target.invalidated) continue
+      target.invalidated = true
+      target.frame = null
+      const { node, binding } = target
       node.setAttribute('data-cpv-xy-series-valid', 'false')
       node.setAttribute('aria-invalid', 'true')
       if (binding.model) {
@@ -393,7 +453,7 @@ function initializeVisualBinding () {
       if (!binding.component || !binding.model || binding.mode === 'read') continue
       let finishTimer
       const send = (value, final) => {
-        if (editing || !component.boundAuthenticated) return
+        if (disposed || editing || !component.boundAuthenticated) return
         try {
           let commandValue
           if (binding.adapter === 'range') {
@@ -432,7 +492,7 @@ function initializeVisualBinding () {
           feedbackModels.delete(id)
           if (Object.is(value, feedbackValue)) return
         }
-        if (editing || !component.boundAuthenticated) return
+        if (disposed || editing || !component.boundAuthenticated) return
         if (binding.adapter === 'text-input') {
           if (typeof value === 'string' || value == null) pendingText.set(id, value ?? '')
           return
@@ -446,7 +506,12 @@ function initializeVisualBinding () {
       cleanup.push(() => { clearTimeout(finishTimer); unwatch() })
     }
   }
-  function closeOverlay () { overlay?.remove(); overlay = null }
+  function closeOverlay () {
+    overlayCleanup?.()
+    overlayCleanup = null
+    overlay?.remove()
+    overlay = null
+  }
   function sameBindingTarget (entry, candidate) {
     return entry.locator === candidate.locator &&
       (!candidate.repeat || String(entry.instanceKey) === String(candidate.instanceKey))
@@ -484,14 +549,13 @@ function initializeVisualBinding () {
     const outside = event => {
       if (!overlay?.contains(event.target)) {
         closeOverlay()
-        document.removeEventListener('pointerdown', outside, true)
       }
     }
     const timer = setTimeout(() => document.addEventListener('pointerdown', outside, true), 0)
-    cleanup.push(() => {
+    overlayCleanup = () => {
       clearTimeout(timer)
       document.removeEventListener('pointerdown', outside, true)
-    })
+    }
   }
   function showDialog (title) {
     closeOverlay()
@@ -595,6 +659,7 @@ function initializeVisualBinding () {
     inform('Choose a control on the page')
     updateBindingMarkers()
     meterClient?.setAuth({ endpoint: base, csrf: editSession.csrf, header: 'X-Panel-CSRF' })
+    xySeriesClient?.setAuth({ endpoint: base, csrf: editSession.csrf, header: 'X-Panel-CSRF' })
   }
   function choose (label, options, selected) {
     const select = element('select')
@@ -627,8 +692,7 @@ function initializeVisualBinding () {
       ? '.' + String(candidate.instanceKey).replace(/[^A-Za-z0-9._/-]/g, '-').slice(0, 48)
       : ''
     id.value = existing?.id || 'control.' + candidate.locator.slice(-12) + instanceSuffix
-    const modeOptions = ['meter', 'text-display'].includes(candidate.adapter)
-      ? ['read'] : ['both', 'write', 'read']
+    const modeOptions = matcher.modes(candidate.adapter)
     const mode = field(form, 'Mode', choose('Mode', modeOptions.map(value => ({ value, text: value })), existing?.mode || modeOptions[0]))
     const behavior = candidate.button ? field(form, 'Button behavior', choose('Button behavior', [
       { value: 'toggle', text: 'Click to toggle / 点击切换' },
@@ -869,7 +933,7 @@ function initializeVisualBinding () {
     return candidate
   }
   function chooseCandidate (event) {
-    if (!editing || !editSession) return
+    if (disposed || !editing || !editSession) return
     const candidate = candidateFromEvent(event)
     if (!candidate) return
     event.preventDefault()
@@ -877,26 +941,26 @@ function initializeVisualBinding () {
     if (!candidate.supported) { inform(candidate.reason, true); return }
     contextMenu(candidate, event.clientX || 12, event.clientY || 12)
   }
-  root.addEventListener('contextmenu', chooseCandidate, true)
+  listen(root, 'contextmenu', chooseCandidate, true)
   for (const name of ['input', 'change']) {
-    root.addEventListener(name, event => {
+    listen(root, name, event => {
       if (!editing || !event.target?.closest?.('[data-cp-auto]')) return
       event.preventDefault()
       event.stopImmediatePropagation()
     }, true)
   }
-  root.addEventListener('click', event => { if (selecting) chooseCandidate(event) }, true)
-  root.addEventListener('keydown', event => {
+  listen(root, 'click', event => { if (selecting) chooseCandidate(event) }, true)
+  listen(root, 'keydown', event => {
     if (event.key === 'Enter' && selecting) chooseCandidate(event)
   }, true)
   let longPress
-  root.addEventListener('pointerdown', event => {
+  listen(root, 'pointerdown', event => {
     if (!editing || event.pointerType === 'mouse') return
     const candidate = candidateFromEvent(event)
     if (candidate) longPress = setTimeout(() => chooseCandidate(event), 550)
   }, true)
   for (const name of ['pointerup', 'pointercancel', 'pointermove']) {
-    root.addEventListener(name, () => clearTimeout(longPress), true)
+    listen(root, name, () => clearTimeout(longPress), true)
   }
   attachControls()
   attachModelControls()
@@ -942,8 +1006,15 @@ function initializeVisualBinding () {
     attachControls()
     updateBindingMarkers()
   })
-  observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['disabled'] })
+  observer.observe(root, { childList: true, subtree: true, attributes: true,
+    attributeFilter: ['disabled', 'data-cp-auto', 'data-cp-repeat', 'data-cp-repeat-key'] })
   cleanup.push(() => {
+    clearTimeout(longPress)
+    for (const listeners of controlListeners.values()) {
+      for (const stop of listeners.stops) stop()
+    }
+    controlListeners.clear()
+    pendingText.clear()
     for (const button of buttonPresses.values()) button.controller.dispose()
     buttonPresses.clear()
     for (const button of momentaryButtons.values()) button.controller.dispose()

package/panel-meter.js

@@ -2,6 +2,7 @@ const crypto = require('node:crypto')
 const { createMeterReceiver } = require('./meter-frame')
 const { readJsonBody, replyJson } = require('./panel-http')
 const { meterRoute } = require('./meter-route')
+const { emitTelemetryFrame } = require('./panel-telemetry-send')
 
 function createMeterRoom ({ room, now = Date.now, staleMs = 1000 }) {
   const sources = new Map(), panels = new Map()
@@ -26,7 +27,6 @@ function createMeterRoom ({ room, now = Date.now, staleMs = 1000 }) {
       const meter = meterRoute(binding.readMeta.meter)
       const key = JSON.stringify([binding.device, meter.streamId])
       let source = sources.get(key)
-      if (source && JSON.stringify(source.route) !== JSON.stringify(meter)) throw Error('Conflicting meter stream')
       if (!source) {
         source = { device: binding.device, route: meter, receiver: null, receivedAt: null,
           revision: 0, refs: new Set(), indices: new Map() }
@@ -37,7 +37,7 @@ function createMeterRoom ({ room, now = Date.now, staleMs = 1000 }) {
     })
     const layout = { kind: 'room-meter-layout', panelId, room, epoch: crypto.randomBytes(16).toString('hex'),
       ids: points.map(([id]) => id) }
-    const panel = { projections, layout, sequence: 0 }
+    const panel = { projections, streams: [...new Set(projections.map(point => point.source))], layout, sequence: 0 }
     panels.set(panelId, panel)
     return layout
   }
@@ -100,7 +100,7 @@ function createMeterRoom ({ room, now = Date.now, staleMs = 1000 }) {
     const panel = panels.get(panelId)
     if (!panel) return ''
     const time = now()
-    return panel.projections.map(({ source }) => `${source.revision}:${source.receivedAt !== null &&
+    return panel.streams.map(source => `${source.revision}:${source.receivedAt !== null &&
       time - source.receivedAt <= staleMs}`).join(',')
   }
 
@@ -151,7 +151,7 @@ function createPanelMeter ({ panelId, room, bindings, hub, onSubscribe = () => {
     if (revision === lastRevision) return
     lastRevision = revision
     const frame = hub.snapshot(panelId)
-    for (const { socket } of subscribers.values()) emitFrame(socket, frame)
+    emitTelemetryFrame('control-panel:meter-frame', frame, subscribers)
   })
 
   return {

package/panel-telemetry-send.js

@@ -0,0 +1,13 @@
+function emitTelemetryFrame (event, frame, subscribers) {
+  const sockets = [...subscribers.values()].map(entry => entry.socket)
+  if (!sockets.length) return
+  const namespace = sockets[0].nsp
+  // A namespace broadcast encodes once, but targets only authenticated socket IDs.
+  if (typeof namespace?.to === 'function' && sockets.every(socket => socket.nsp === namespace)) {
+    namespace.to(sockets.map(socket => socket.id)).volatile.emit(event, frame)
+  } else {
+    for (const socket of sockets) socket.volatile.emit(event, frame)
+  }
+}
+
+module.exports = { emitTelemetryFrame }

package/panel-visual-bindings.js

@@ -1,11 +1,10 @@
 const { inspectTemplate } = require('./panel-template-instrumentation')
-const { compatibleTarget, controlTypeForAdapter, targetMeta } = require('./control-type-model')
+const { compatibleTarget, controlTypeForAdapter, targetMeta, bindingModes } = require('./control-type-model')
 const { meterRoute } = require('./meter-route')
 const { xySeriesRoute } = require('./xy-series-route')
 
 const ID = /^[A-Za-z][A-Za-z0-9._/-]{0,127}$/
 const INSTANCE_KEY = /^[A-Za-z0-9._:/-]{1,160}$/
-const MODES = new Set(['read', 'write', 'both'])
 
 function buttonBehavior (entry, candidate) {
   const behavior = entry.buttonBehavior ?? 'toggle'
@@ -56,8 +55,7 @@ function visualRoutes (config) {
     }
     if (usedLocators.has(bindingKey)) throw new Error(`Duplicate visual control locator: ${id}`)
     usedLocators.add(bindingKey)
-    if (!MODES.has(entry.mode) || !entry.type || !entry.label ||
-      (['meter', 'xy-series', 'text-display'].includes(entry.adapter) && entry.mode !== 'read')) {
+    if (!bindingModes(entry.adapter).includes(entry.mode) || !entry.type || !entry.label) {
       throw new Error(`Invalid visual binding settings: ${id}`)
     }
     if (entry.readMeta?.meter) {
@@ -93,6 +91,7 @@ function validatedVisualBindings ({ format, entries, devices, targetsByDevice })
   const used = new Set()
   const usedLocators = new Set()
   const models = new Map()
+  const targetIndexes = new Map()
   for (const raw of entries) {
     if (!raw || !ID.test(raw.id) || used.has(raw.id)) throw new Error('Control IDs must be unique and valid')
     used.add(raw.id)
@@ -102,7 +101,7 @@ function validatedVisualBindings ({ format, entries, devices, targetsByDevice })
     const behavior = buttonBehavior(raw, candidate)
     if (usedLocators.has(bindingKey)) throw new Error(`One element cannot have two bindings: ${raw.id}`)
     usedLocators.add(bindingKey)
-    if (!MODES.has(raw.mode) || (['meter', 'xy-series', 'text-display'].includes(raw.adapter) && raw.mode !== 'read')) {
+    if (!bindingModes(raw.adapter).includes(raw.mode)) {
       throw new Error(`Invalid binding mode: ${raw.id}`)
     }
     if (typeof raw.label !== 'string' || !raw.label.trim() || raw.label.length > 80) {
@@ -111,7 +110,8 @@ function validatedVisualBindings ({ format, entries, devices, targetsByDevice })
     if (!knownDevices.has(raw.device)) throw new Error(`Unknown device: ${raw.id}`)
     const targets = targetsByDevice.get(raw.device)
     if (!targets) throw new Error(`Device catalog unavailable: ${raw.device}`)
-    const byPath = new Map(targets.map(target => [target.path, target]))
+    if (!targetIndexes.has(raw.device)) targetIndexes.set(raw.device, new Map(targets.map(target => [target.path, target])))
+    const byPath = targetIndexes.get(raw.device)
     const write = raw.mode === 'read' ? null : byPath.get(raw.writePath)
     const read = raw.mode === 'write' ? null : byPath.get(raw.readPath)
     if ((raw.mode !== 'read' && !write) || (raw.mode !== 'write' && !read)) {
@@ -131,10 +131,11 @@ function validatedVisualBindings ({ format, entries, devices, targetsByDevice })
       const identity = JSON.stringify([raw.device, read?.path, write?.path])
       const modelKey = candidate.repeat ? `${candidate.model}#${raw.instanceKey}` : candidate.model
       const previous = models.get(modelKey)
-      if (previous && (read?.meter || previous.meter) && previous.identity !== identity) {
-        throw Error(`Meter model "${candidate.model}" is already used by another binding; use a separate Vue model for the meter. Meter and volume controls must not share a model`)
+      const realtime = Boolean(read?.meter || read?.xySeries)
+      if (previous && (realtime || previous.realtime) && previous.identity !== identity) {
+        throw Error(`Realtime model "${candidate.model}" is already used by another binding; use a separate Vue model for each independent telemetry target`)
       }
-      models.set(modelKey, { identity, meter: Boolean(read?.meter) })
+      models.set(modelKey, { identity, realtime })
     }
     result[raw.id] = {
       locator: raw.locator, adapter: raw.adapter, type, label: raw.label.trim(), mode: raw.mode,

package/panel-xy-series.js

@@ -2,6 +2,7 @@ const crypto = require('node:crypto')
 const { createXYSeriesReceiver } = require('./xy-series-frame')
 const { readJsonBody, replyJson } = require('./panel-http')
 const { xySeriesRoute } = require('./xy-series-route')
+const { emitTelemetryFrame } = require('./panel-telemetry-send')
 
 function createXYSeriesRoom ({ room, now = Date.now, staleMs = 1000 }) {
   const sources = new Map(), panels = new Map(), ticks = new Set()
@@ -12,13 +13,21 @@ function createXYSeriesRoom ({ room, now = Date.now, staleMs = 1000 }) {
     const entries = Object.entries(bindings).filter(([, entry]) => entry.readMeta?.xySeries)
       .sort(([a], [b]) => a.localeCompare(b))
     if (!entries.length || entries.length > 256) throw Error('Invalid xy-series panel size')
-    const projections = entries.map(([id, binding]) => {
+    // Validate the whole registration before changing shared sources or references.
+    const proposed = new Map()
+    for (const [, binding] of entries) {
       const series = xySeriesRoute(binding.readMeta.xySeries)
       const key = JSON.stringify([binding.device, series.streamId])
-      let source = sources.get(key)
-      if (source && JSON.stringify(source.route) !== JSON.stringify(series)) {
+      const previous = sources.get(key)?.route || proposed.get(key)
+      if (previous && JSON.stringify(previous) !== JSON.stringify(series)) {
         throw Error(`Conflicting xy-series stream: ${series.streamId}`)
       }
+      proposed.set(key, series)
+    }
+    const projections = entries.map(([id, binding]) => {
+      const series = xySeriesRoute(binding.readMeta.xySeries)
+      const key = JSON.stringify([binding.device, series.streamId])
+      let source = sources.get(key)
       if (!source) {
         source = { device: binding.device, route: series, receiver: null,
           receivedAt: null, revision: 0, refs: new Set() }
@@ -29,7 +38,7 @@ function createXYSeriesRoom ({ room, now = Date.now, staleMs = 1000 }) {
     })
     const layout = { kind: 'room-xy-series-layout', panelId, room,
       epoch: crypto.randomBytes(16).toString('hex'), ids: entries.map(([id]) => id) }
-    panels.set(panelId, { projections, layout, sequence: 0 })
+    panels.set(panelId, { projections, streams: [...new Set(projections.map(point => point.source))], layout, sequence: 0 })
     return layout
   }
 
@@ -69,7 +78,7 @@ function createXYSeriesRoom ({ room, now = Date.now, staleMs = 1000 }) {
       const frame = source.receiver?.snapshot()
       const age = source.receivedAt === null ? null : Math.max(0, time - source.receivedAt)
       const ok = Boolean(frame && age !== null && age <= staleMs)
-      values.push(ok ? frame.points.map(point => point.slice()) : [])
+      values.push(ok ? frame.points.map(point => [point[0], point[1]]) : [])
       valid.push(ok)
       sourcesByStream.set(key, { device: source.device, streamId: source.route.streamId,
         epoch: source.receiver?.manifest.epoch || '', seq: frame?.seq || 0,
@@ -83,7 +92,7 @@ function createXYSeriesRoom ({ room, now = Date.now, staleMs = 1000 }) {
     const panel = panels.get(panelId)
     if (!panel) return ''
     const time = now()
-    return panel.projections.map(({ source }) => `${source.revision}:${source.receivedAt !== null &&
+    return panel.streams.map(source => `${source.revision}:${source.receivedAt !== null &&
       time - source.receivedAt <= staleMs}`).join(',')
   }
 
@@ -133,7 +142,7 @@ function createPanelXYSeries ({ panelId, room, bindings, hub, onSubscribe = () =
     if (revision === lastRevision) return
     lastRevision = revision
     const frame = hub.snapshot(panelId)
-    for (const { socket } of subscribers.values()) emitFrame(socket, frame)
+    emitTelemetryFrame('control-panel:xy-series-frame', frame, subscribers)
   })
   return {
     async ticket (req, res, identity, active) {

package/xy-series-frame.js

@@ -85,7 +85,7 @@ function createRoomXYSeriesReceiver (layout) {
           (valid && points.some(point => !Array.isArray(point) || point.length !== 2 ||
             !finite(point[0]) || !finite(point[1])))) return false
       }
-      latest = { values: frame.values.map(points => points.map(point => point.slice())),
+      latest = { values: frame.values.map(points => points.map(point => [point[0], point[1]])),
         valid: frame.valid.slice(), seq: frame.seq }
       pending = true
       return true