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

package/control-type-model.js

@@ -6,10 +6,11 @@ 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'],
+    range: ['number'], switch: ['boolean'], meter: ['number'], 'xy-series': ['xy-series'],
     'text-display': ['text', 'number', 'enum', 'boolean'], 'text-input': ['text'], select: ['enum']
   }
   function family (target) {
+    if (target.xySeries) return 'xy-series'
     if (target.controlSchemaVersion !== typeContract.schemaVersion) return null
     const definition = typeContract.types[String(target.controlType || '').toLowerCase()]
     if (!definition) return null
@@ -24,9 +25,11 @@ function createTargetMatcher (typeContract) {
   }
   function compatible (adapter, target, direction, candidate = {}) {
     if (adapter === 'meter' && !target.meter) return false
+    if (adapter === 'xy-series' && !target.xySeries) return false
     if (target.meter && (adapter !== 'meter' || direction !== 'read' || target.access !== 'ro')) return false
+    if (target.xySeries && (adapter !== 'xy-series' || direction !== 'read' || target.access !== 'ro')) return false
     if (target.kind !== 'param' || !families[adapter]?.includes(family(target))) return false
-    if (direction === 'write' && ['meter', 'text-display'].includes(adapter)) return false
+    if (direction === 'write' && ['meter', 'xy-series', 'text-display'].includes(adapter)) return false
     if (!['read', 'write'].includes(direction)) return false
     if (!(direction === 'write' ? ['wo', 'rw'] : ['ro', 'rw']).includes(target.access)) return false
     if (candidate.unit && candidate.unit !== target.unit) return false
@@ -42,6 +45,7 @@ function controlTypeForAdapter (adapter, target) {
     throw new Error('Target is incompatible with this control')
   }
   if (adapter === 'meter' && target.meter) return 'meter'
+  if (adapter === 'xy-series' && target.xySeries) return 'xy-series'
   const family = targetFamily(target)
   if (family === 'number') return 'level'
   if (family === 'boolean') return 'mute'
@@ -60,7 +64,8 @@ function targetMeta (target, onebased) {
     min: target.min, max: target.max, enums: target.enums,
     ...(target.booleanEncoding ? { booleanEncoding: target.booleanEncoding } : {}),
     controlType: target.controlType, controlSchemaVersion: target.controlSchemaVersion,
-    ...(target.meter ? { meter: meterRoute(target.meter), unit: target.unit || '' } : {})
+    ...(target.meter ? { meter: meterRoute(target.meter), unit: target.unit || '' } : {}),
+    ...(target.xySeries ? { xySeries: require('./xy-series-route').xySeriesRoute(target.xySeries) } : {})
   }
 }
 

package/gateway.cjs

@@ -10,6 +10,8 @@ function createGateway ({
   onBoundCommand,
   onBoundLogin,
   onAuthenticatedRequest,
+  onSessionClosed,
+  holdEpoch,
   secureCookie = false,
   prefix,
   sessionTtlMs = 8 * 3600000,
@@ -62,6 +64,7 @@ function createGateway ({
         const session = sessions.get(subscriber.token)
         if (!session || session.expiry < now) {
           sessions.delete(subscriber.token)
+          onSessionClosed?.(subscriber.token)
           closeSubscriber(subscriber)
           continue
         }
@@ -128,6 +131,7 @@ function createGateway ({
       for (const [id, session] of sessions) {
         if (session.expiry < now) {
           sessions.delete(id)
+          onSessionClosed?.(id)
           closeSubscribersForToken(id)
         }
       }
@@ -172,7 +176,7 @@ function createGateway ({
         const token = crypto.randomBytes(32).toString('hex')
         const csrf = crypto.randomBytes(24).toString('hex')
         sessions.set(token, { csrf, expiry: now + sessionTtlMs })
-        reply(res, 200, { room, username, csrf }, {
+        reply(res, 200, { room, username, csrf, ...(holdEpoch ? { holdEpoch } : {}) }, {
           'Set-Cookie': cookie(token, Math.ceil(sessionTtlMs / 1000), req)
         })
         if (typeof onBoundLogin === 'function') {
@@ -197,7 +201,7 @@ function createGateway ({
       if (onAuthenticatedRequest && await onAuthenticatedRequest(req, res,
         { token, expiry: session.expiry, room, user: username })) return true
       if (path === routePrefix + '/session' && req.method === 'GET') {
-        reply(res, 200, { room, username, csrf: session.csrf })
+        reply(res, 200, { room, username, csrf: session.csrf, ...(holdEpoch ? { holdEpoch } : {}) })
         return true
       }
       if (path === routePrefix + '/events' && req.method === 'GET') {
@@ -226,6 +230,7 @@ function createGateway ({
       }
       if (path === routePrefix + '/logout' && req.method === 'POST') {
         sessions.delete(token)
+        onSessionClosed?.(token)
         closeSubscribersForToken(token)
         reply(res, 200, { ok: true }, { 'Set-Cookie': cookie('', 0, req) })
         return true
@@ -240,11 +245,12 @@ function createGateway ({
           reply(res, 403, { error: 'Region denied' })
           return true
         }
-        if (await onBoundCommand(data, { room, user: username }) === false) {
+        const result = await onBoundCommand(data, { room, user: username, token, expiry: session.expiry })
+        if (result === false) {
           reply(res, 409, { error: 'Managed bridge is out of sync' })
           return true
         }
-        reply(res, 200, { ok: true })
+        reply(res, 200, { ok: true, ...(typeof result?.held === 'boolean' ? { held: result.held } : {}) })
         return true
       }
 

package/managed-native-bridge.js

@@ -25,7 +25,8 @@ function panelTargets (panel) {
         device: binding.device, path, kind: meta.kind, type: meta.type,
         access: meta.access, onebased: meta.onebased,
         ...(meta.booleanEncoding ? { booleanEncoding: meta.booleanEncoding } : {}),
-        ...(meta.meter ? { meter: meta.meter } : {})
+        ...(meta.meter ? { meter: meta.meter } : {}),
+        ...(meta.xySeries ? { xySeries: meta.xySeries } : {})
       }
       const key = JSON.stringify([target.device, target.path])
       const previous = targets.get(key)

package/native-binding-plan.js

@@ -1,5 +1,6 @@
 const { configuredRoutes } = require('./control-bound-protocol')
 const { meterRoute } = require('./meter-route')
+const { xySeriesRoute } = require('./xy-series-route')
 
 const supportedTypes = {
   boolean: { eventType: 'Boolean', eventOptions: { boolParamFilter: 'Any' } },
@@ -30,6 +31,7 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
   const readTargets = new Map()
   const writeTargets = new Map()
   const meterStreams = new Map()
+  const xySeriesStreams = new Map()
   const commandRules = []
   const commandWires = []
 
@@ -37,7 +39,7 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     const target = targetIndex.get(JSON.stringify([device, path]))
     if (!target) throw new Error(`Missing target descriptor: ${device} ${path}`)
     if (target.kind !== 'param') throw new Error(`Only parameter targets are supported: ${path}`)
-    if (!Object.hasOwn(supportedTypes, target.type)) {
+    if (!target.xySeries && !Object.hasOwn(supportedTypes, target.type)) {
       throw new Error(`Unsupported native parameter type: ${path} (${target.type})`)
     }
     if (['mute', 'power'].includes(type) && target.type !== 'boolean' &&
@@ -56,7 +58,10 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     if (type === 'meter' && (!target.meter || !['integer', 'float'].includes(target.type) || target.access !== 'ro')) {
       throw new Error(`Meter control must bind to a readonly Meter target: ${path}`)
     }
-    if (!['mute', 'power', 'level', 'dimmer', 'position', 'meter', 'text', 'source', 'preset'].includes(type)) {
+    if (type === 'xy-series' && (!target.xySeries || target.access !== 'ro')) {
+      throw new Error(`XY-series control must bind to a readonly XY-series target: ${path}`)
+    }
+    if (!['mute', 'power', 'level', 'dimmer', 'position', 'meter', 'xy-series', 'text', 'source', 'preset'].includes(type)) {
       throw new Error(`Control type requires a separate command adapter: ${type}`)
     }
     if (!['ro', 'wo', 'rw'].includes(target.access) || !target.access.includes(access)) {
@@ -134,6 +139,49 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
         }
         continue
       }
+      if (target.xySeries) {
+        const series = xySeriesRoute(target.xySeries)
+        if (control.mode !== 'read' || control.adapter !== 'xy-series') {
+          throw Error(`XY-series is read-only: ${id}`)
+        }
+        const key = JSON.stringify([target.device, series.streamId])
+        const previous = xySeriesStreams.get(key)
+        if (previous) {
+          if (JSON.stringify(previous.series) !== JSON.stringify(series) || previous.onebased !== target.onebased) {
+            throw Error(`Conflicting xy-series stream: ${series.streamId}`)
+          }
+          continue
+        }
+        const index = xySeriesStreams.size + 1
+        const statusId = `${scopeId}-xy-series-read-${index}`
+        const tagIds = []
+        xySeriesStreams.set(key, { series, onebased: target.onebased, statusId, tagIds })
+        for (const [role, path] of [['manifest', series.manifestPath], ['frame', series.eventPath]]) {
+          const eventId = `${scopeId}-xy-series-${role}-${index}`
+          const tagId = `${eventId}-tag`
+          tagIds.push(tagId)
+          const y = 540 + (index - 1) * 280 + (role === 'frame' ? 140 : 0)
+          if (role === 'manifest') nodes.push({
+            id: statusId, type: 'Status', z: subflowId, name: `Read xy-series manifest ${target.device}`,
+            x: 440, y: y - 60, mojo: { version: '1.0', device: [target.device],
+              parameter: path, onebased: target.onebased }, wires: [[tagId]]
+          })
+          nodes.push({ id: eventId, type: 'Event', z: subflowId,
+            name: `Watch xy-series ${role} ${target.device} ${series.streamId}`, x: 440, y,
+            mojo: { version: '1.0', device: [target.device], event: path,
+              eventKind: role === 'frame' ? 'Event' : 'Parameter', paramType: 'String',
+              onebased: target.onebased }, wires: [[tagId]] })
+          nodes.push({ id: tagId, type: 'change', z: subflowId,
+            name: `Identify xy-series ${role} ${target.device}`, x: 1000, y,
+            rules: [
+              { t: 'set', p: 'kind', pt: 'msg', to: 'device-xy-series-' + role, tot: 'str' },
+              { t: 'set', p: 'device', pt: 'msg', to: target.device, tot: 'str' },
+              { t: 'set', p: 'path', pt: 'msg', to: path, tot: 'str' },
+              { t: 'set', p: 'streamId', pt: 'msg', to: series.streamId, tot: 'str' }
+            ], wires: [[]] })
+        }
+        continue
+      }
       const key = JSON.stringify([target.device, target.path])
       if (readTargets.has(key)) continue
       const index = readTargets.size + 1
@@ -175,7 +223,11 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
 
   const commandSwitchId = `${scopeId}-commands`
   // Meter lanes follow ordinary feedback lanes without overlapping their labels.
-  for (const node of nodes) if (node.id.startsWith(`${scopeId}-meter-`)) node.y += readTargets.size * 170
+  for (const node of nodes) {
+    if (node.id.startsWith(`${scopeId}-meter-`) || node.id.startsWith(`${scopeId}-xy-series-`)) {
+      node.y += readTargets.size * 170
+    }
+  }
   const routerId = `${scopeId}-router`
   if (commandRules.length) {
     nodes.push({
@@ -196,17 +248,18 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     ],
     checkall: 'false', repair: false, outputs: 2,
     wires: [commandRules.length ? [commandSwitchId] : [],
-      [...readTargets.values(), ...meterStreams.values()].map(target => target.statusId)]
+      [...readTargets.values(), ...meterStreams.values(), ...xySeriesStreams.values()].map(target => target.statusId)]
   })
   const subflow = {
     id: subflowId, type: 'subflow', name: `Binding bridge ${scopeId}`,
     info: 'Generated panel binding bridge. Requires a Controller node and authenticated command source.',
     category: 'panel binding',
     in: [{ x: 170, y: 150, wires: [{ id: routerId }] }],
-    out: readTargets.size || meterStreams.size
+    out: readTargets.size || meterStreams.size || xySeriesStreams.size
       ? [{ x: meterStreams.size ? 1600 : 1290, y: Math.round((390 + (readTargets.size + meterStreams.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([...meterStreams.values()].flatMap(target => target.tagIds.map(id => ({ id, port: 0 }))))
+          .concat([...xySeriesStreams.values()].flatMap(target => target.tagIds.map(id => ({ id, port: 0 })))) }]
       : [],
     env: [], meta: {}, color: '#96bca7'
   }
@@ -215,8 +268,9 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     manifest: {
       subflowId,
       controls: routes.size,
-      nativeReads: readTargets.size + meterStreams.size,
+      nativeReads: readTargets.size + meterStreams.size + xySeriesStreams.size,
       nativeMeterStreams: meterStreams.size,
+      nativeXYSeriesStreams: xySeriesStreams.size,
       nativeWrites: writeTargets.size,
       requiresController: true,
       initialReadMessage: { kind: 'read-all' }

package/npm-shrinkwrap.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.9.0",
+  "version": "1.9.3",
   "description": "Authenticated visual control panel binding for Node-RED and MUSE Automator",
   "license": "UNLICENSED",
   "engines": {
@@ -27,6 +27,10 @@
     "meter-frame.js",
     "panel-meter.js",
     "panel-meter-client.js",
+    "xy-series-route.js",
+    "xy-series-frame.js",
+    "panel-xy-series.js",
+    "panel-xy-series-client.js",
     "panel-template-instrumentation.js",
     "panel-visual-bindings.js",
     "panel-visual-apply.js",
@@ -34,6 +38,9 @@
     "panel-http.js",
     "panel-flow-editor-sync.js",
     "panel-binding-editor.js",
+    "panel-momentary.js",
+    "panel-momentary-client.js",
+    "panel-button-press.js",
     "native-binding-plan.js",
     "managed-native-bridge.js",
     "managed-bridge-revision.js",

package/panel-binding-editor.js

@@ -7,9 +7,15 @@ function initializeVisualBinding () {
   const base = config.editorEndpoint
   const saved = new Map(Object.entries(config.bindings || {}))
   const meterEntries = [...saved].filter(([, entry]) => entry.readMeta?.meter)
+  const xySeriesEntries = [...saved].filter(([, entry]) => entry.readMeta?.xySeries)
   const meterTargets = new Map()
+  const xySeriesTargets = new Map()
   let meterClient = null, lastMeterFrame = null
+  let xySeriesClient = null, lastXYSeriesFrame = null
   const attached = new WeakSet()
+  const buttonPresses = new Map()
+  const momentaryButtons = new Map()
+  const momentaryStates = new Map()
   const feedbackModels = new Map()
   const pendingText = new Map()
   const cleanup = []
@@ -189,11 +195,13 @@ function initializeVisualBinding () {
   }
   function showFeedback () {
     for (const [id, binding] of saved) {
-      if (binding.mode === 'write' || binding.readMeta?.meter) continue
+      if (binding.mode === 'write' || binding.readMeta?.meter || binding.readMeta?.xySeries) continue
       const node = nodeForBinding(binding)
       if (!node) continue
       if (!Object.prototype.hasOwnProperty.call(component.boundState, id)) continue
-      const value = component.boundDisplayValue(id, component.boundState[id])
+      const value = node.tagName === 'BUTTON' && binding.adapter === 'switch'
+        ? component.controlValue(id, component.boundState[id])
+        : component.boundDisplayValue(id, component.boundState[id])
       const displayValue = ['range', 'meter'].includes(binding.adapter)
         ? mappedValue(Number(value), binding.readMeta || binding.writeMeta,
           numericRange(binding, node)) : value
@@ -230,6 +238,22 @@ function initializeVisualBinding () {
     }
   }
   function attachControls () {
+    for (const [node, button] of buttonPresses) {
+      const binding = saved.get(button.id)
+      if (!binding || nodeForBinding(binding) !== node) {
+        button.controller.dispose()
+        buttonPresses.delete(node)
+        attached.delete(node)
+      } else button.controller.check()
+    }
+    for (const [node, button] of momentaryButtons) {
+      const binding = saved.get(button.id)
+      if (!binding || nodeForBinding(binding) !== node) {
+        button.controller.dispose()
+        momentaryButtons.delete(node)
+        attached.delete(node)
+      } else button.controller.check()
+    }
     for (const node of root.querySelectorAll('[data-cp-auto]')) {
       if (attached.has(node)) continue
       const locator = node.getAttribute('data-cp-auto')
@@ -239,6 +263,22 @@ function initializeVisualBinding () {
       if (nodeForBinding(binding) !== node) continue
       attached.add(node)
       if (binding.mode === 'read') continue
+      if (node.tagName === 'BUTTON' && binding.adapter === 'switch') {
+        buttonPresses.set(node, { id, controller: component.__attachButtonPress({ node,
+          canPress: () => !disposed && !editing && component.boundAuthenticated && component.boundFeedbackConnected }) })
+      }
+      if (binding.buttonBehavior === 'momentary' && node.tagName === 'BUTTON') {
+        if (!momentaryStates.has(id)) momentaryStates.set(id, { seq: 0 })
+        const controller = component.__attachMomentaryButton({ node, id,
+          state: momentaryStates.get(id),
+          endpoint: component.__boundPanelConfig().endpoint,
+          getSession: () => component.__boundPanelSession,
+          canStart: () => !disposed && !editing && component.boundAuthenticated && component.boundFeedbackConnected,
+          request: (...args) => component.__panelFetch(...args),
+          onError: error => console.error('ControlPanel momentary command failed', error) })
+        momentaryButtons.set(node, { id, controller })
+        continue
+      }
       if (binding.component) {
         if (binding.adapter === 'text-input') {
           const commit = () => {
@@ -288,6 +328,15 @@ function initializeVisualBinding () {
       if (lastMeterFrame) applyMeterFrame(lastMeterFrame.frame, lastMeterFrame.ids)
       else invalidateMeters()
     }
+    if (xySeriesEntries.length) {
+      xySeriesTargets.clear()
+      for (const [id, binding] of xySeriesEntries) {
+        const node = nodeForBinding(binding)
+        if (node) xySeriesTargets.set(id, { node, binding })
+      }
+      if (lastXYSeriesFrame) applyXYSeriesFrame(lastXYSeriesFrame.frame, lastXYSeriesFrame.ids)
+      else invalidateXYSeries()
+    }
     showFeedback()
   }
   function applyMeterFrame (frame, ids) {
@@ -313,6 +362,32 @@ function initializeVisualBinding () {
       node.setAttribute('aria-invalid', 'true')
     }
   }
+  function applyXYSeriesFrame (frame, ids) {
+    lastXYSeriesFrame = { frame, ids }
+    for (let index = 0; index < ids.length; index++) {
+      const target = xySeriesTargets.get(ids[index])
+      if (!target) continue
+      const { node, binding } = target
+      node.setAttribute('data-cpv-xy-series-valid', 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()) : []
+      if (binding.model) {
+        if (binding.repeat) setRepeatModel(binding, points)
+        else if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = points
+      }
+    }
+  }
+  function invalidateXYSeries () {
+    lastXYSeriesFrame = null
+    for (const { node, binding } of xySeriesTargets.values()) {
+      node.setAttribute('data-cpv-xy-series-valid', 'false')
+      node.setAttribute('aria-invalid', 'true')
+      if (binding.model) {
+        if (binding.repeat) setRepeatModel(binding, [])
+        else if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = []
+      }
+    }
+  }
   function attachModelControls () {
     for (const [id, binding] of saved) {
       if (!binding.component || !binding.model || binding.mode === 'read') continue
@@ -555,6 +630,17 @@ function initializeVisualBinding () {
     const modeOptions = ['meter', 'text-display'].includes(candidate.adapter)
       ? ['read'] : ['both', 'write', 'read']
     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 / 点击切换' },
+      { value: 'momentary', text: 'Hold to activate / 按住生效' }
+    ], existing?.buttonBehavior || 'toggle')) : null
+    function updateButtonMode () {
+      if (!behavior) return
+      mode.disabled = behavior.value === 'momentary'
+      if (mode.disabled) mode.value = 'both'
+      mode.closest('label').dataset.disabled = String(mode.disabled)
+    }
+    updateButtonMode()
     const device = field(form, 'Device', choose('Device', devices.filter(item => item.online)
       .map(item => ({ value: item.id, text: item.id })), existing?.device))
     const write = field(form, 'Write point', choose('Write point', [], existing?.writePath))
@@ -588,8 +674,10 @@ function initializeVisualBinding () {
       }
       write.value = oldWrite || ''
       read.value = oldRead || ''
-      write.closest('label').hidden = mode.value === 'read'
-      read.closest('label').hidden = mode.value === 'write'
+      write.disabled = mode.value === 'read'
+      read.disabled = mode.value === 'write'
+      write.closest('label').dataset.disabled = String(write.disabled)
+      read.closest('label').dataset.disabled = String(read.disabled)
       const available = mode.value === 'read' ? readCount
         : mode.value === 'write' ? writeCount : Math.min(writeCount, readCount)
       message.textContent = targets.length && !available ? 'No compatible points for this control'
@@ -613,8 +701,12 @@ function initializeVisualBinding () {
         targets = []; updateTargets(); message.textContent = error.message
       }
     })
-    write.addEventListener('change', () => { read.value = write.value })
+    write.addEventListener('change', () => {
+      if (mode.value === 'both') read.value = write.value
+    })
     mode.addEventListener('change', updateTargets)
+    behavior?.addEventListener('change', () => { updateButtonMode(); updateTargets() })
+    updateTargets()
     if (device.value) device.dispatchEvent(new Event('change'))
     const actions = element('div', null, 'cpv-actions')
     actions.append(button('Cancel', () => finishBindingEdit(returnToBindings)))
@@ -634,11 +726,12 @@ function initializeVisualBinding () {
         message.textContent = 'Control ID must be unique and valid'; return
       }
       if (!name.value.trim() || !device.value || (mode.value !== 'read' && !write.value) ||
-        (mode.value !== 'write' && !read.value) || !numbering.value) {
+        (mode.value !== 'write' && !read.value) || !numbering.value || (behavior && !behavior.value)) {
         message.textContent = 'Complete the binding fields'; return
       }
       const entry = {
         id: id.value, locator: candidate.locator, adapter: candidate.adapter,
+        ...(behavior ? { buttonBehavior: behavior.value } : {}),
         ...(candidate.model ? { model: candidate.model } : {}),
         ...(candidate.repeat ? { repeat: candidate.repeat, instanceKey: String(candidate.instanceKey) } : {}),
         label: name.value.trim(), mode: mode.value, device: device.value,
@@ -719,8 +812,9 @@ function initializeVisualBinding () {
         const baseCandidate = snapshot.candidates.find(item => item.locator === entry.locator && item.supported)
         const candidate = baseCandidate?.repeat ? { ...baseCandidate, instanceKey: entry.instanceKey } : baseCandidate
         const edit = button('Edit', () => bindingDialog(candidate, { returnToBindings: true }))
-        edit.disabled = !candidate || !nodeForBinding(entry)
-        if (edit.disabled) edit.title = 'This control is no longer available on the page'
+        // Existing mappings belong to the template, not the currently rendered tab.
+        edit.disabled = !candidate
+        if (edit.disabled) edit.title = 'This control is no longer supported or present in the template'
         actions.append(edit)
         actions.append(button('Remove', () => {
           draft = draft.filter(item => item.id !== entry.id)
@@ -762,6 +856,9 @@ function initializeVisualBinding () {
     if (candidate.adapter === 'meter' && (typeof value !== 'number' || !Number.isFinite(value))) {
       return { ...candidate, supported: false, reason: 'This Vuetify progress needs a numeric model field' }
     }
+    if (candidate.adapter === 'xy-series' && !Array.isArray(value)) {
+      return { ...candidate, supported: false, reason: 'This realtime array control needs an array model field' }
+    }
     if (candidate.adapter === 'select' && typeof value !== 'string' &&
       !(typeof value === 'number' && Number.isFinite(value))) {
       return { ...candidate, supported: false, reason: 'This Vuetify selection needs one scalar model field' }
@@ -822,11 +919,43 @@ function initializeVisualBinding () {
       }))
     } catch (error) { console.error('ControlPanel meter initialization failed', error) }
   }
+  if (this.__boundPanelConfig().xySeries && xySeriesEntries.length) {
+    try {
+      const ids = xySeriesEntries.map(([id]) => id).sort((a, b) => a.localeCompare(b))
+      xySeriesClient = this.__createPanelXYSeriesClient({ socket: this.$socket,
+        panelId: config.panelId, room: this.__boundPanelConfig().room, ids,
+        request: (...args) => component.__panelFetch(...args),
+        createReceiver: this.__createXYSeriesReceiver, createRenderer: this.__createXYSeriesRenderer,
+        apply: applyXYSeriesFrame, invalidate: invalidateXYSeries,
+        onUnauthorized: () => {
+          if (editing) { editSession = null; loginView() }
+          else component.clearBoundPanelSession()
+        } })
+      cleanup.push(() => xySeriesClient.close())
+      if (!editing) cleanup.push(this.$watch('boundAuthenticated', authenticated => {
+        xySeriesClient.setAuth(authenticated ? { endpoint: component.__boundPanelConfig().endpoint,
+          csrf: component.__boundPanelSession.csrf, header: 'X-Room-CSRF' } : null)
+      }))
+    } catch (error) { console.error('ControlPanel xy-series initialization failed', error) }
+  }
   observer = new MutationObserver(() => {
     attachControls()
     updateBindingMarkers()
   })
-  observer.observe(root, { childList: true, subtree: true })
+  observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['disabled'] })
+  cleanup.push(() => {
+    for (const button of buttonPresses.values()) button.controller.dispose()
+    buttonPresses.clear()
+    for (const button of momentaryButtons.values()) button.controller.dispose()
+    momentaryButtons.clear()
+    momentaryStates.clear()
+  })
+  cleanup.push(this.$watch(() => component.boundAuthenticated && component.boundFeedbackConnected, connected => {
+    if (!connected) {
+      for (const button of buttonPresses.values()) button.controller.release()
+      for (const button of momentaryButtons.values()) button.controller.release()
+    }
+  }))
   const unwatch = this.$watch('boundState', showFeedback)
   cleanup.push(() => unwatch(), () => observer.disconnect(), () => toolbar?.remove(),
     () => closeOverlay(), () => closeLoginScreen())
@@ -834,6 +963,7 @@ function initializeVisualBinding () {
 
   const style = element('style')
   style.textContent = `
+    button[data-cpv-press="true"]{translate:0 2px !important;box-shadow:inset 0 2px 4px #0003 !important}
     .cpv-toolbar,.cpv-dialog,.cpv-menu{font:14px/1.4 system-ui,sans-serif;color:#182224;background:#fff}
     .cpv-toolbar{position:fixed;z-index:2147483000;top:12px;right:12px;display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #9baaad;box-shadow:0 8px 24px #0003;max-width:calc(100vw - 24px)}
     .cpv-toolbar button,.cpv-dialog button{padding:7px 11px;border:1px solid #809296;background:#fff;color:#182224;border-radius:4px;cursor:pointer;font:inherit}
@@ -884,6 +1014,7 @@ function initializeVisualBinding () {
     .cpv-dialog{width:min(460px,100%);max-height:min(90vh,720px);overflow:auto;padding:28px 18px 18px;border-radius:6px;box-shadow:0 12px 36px #0005}
     .cpv-dialog h2{font-size:18px;margin:0 0 20px}.cpv-field{display:block;margin:10px 0}.cpv-field span{display:block;font-size:12px;margin-bottom:4px}
     .cpv-field input,.cpv-field select{box-sizing:border-box;width:100%;padding:8px;border:1px solid #86999c;border-radius:4px;background:white;color:#182224;font:inherit}
+    .cpv-field[data-disabled=true] span{color:#66787c}.cpv-field select:disabled{background:#edf1f2;color:#66787c;border-color:#c5cfd1;cursor:not-allowed;opacity:1}
     .cpv-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.cpv-dialog>button:last-child{margin-top:20px}.cpv-message{min-height:18px;font-size:12px}
     .cpv-menu{position:fixed;z-index:2147483002;width:170px;padding:4px;border:1px solid #9baaad;box-shadow:0 8px 24px #0003}
     .cpv-menu button{display:block;width:100%;padding:8px;text-align:left;border:0;background:white;color:#182224;font:inherit;cursor:pointer}

package/panel-button-press.js

@@ -0,0 +1,46 @@
+// Serialized into the Dashboard component; press appearance never changes device state.
+function attachButtonPress ({ node, canPress }) {
+  let pointer = null
+  const keys = new Set(), listeners = []
+  function listen (target, name, callback) {
+    target.addEventListener(name, callback)
+    listeners.push(() => target.removeEventListener(name, callback))
+  }
+  function render () {
+    if (pointer !== null || keys.size) node.setAttribute('data-cpv-press', 'true')
+    else node.removeAttribute('data-cpv-press')
+  }
+  function release () { pointer = null; keys.clear(); render() }
+  function allowed () { return node.isConnected && !node.disabled && !document.hidden && canPress() }
+  listen(node, 'pointerdown', event => {
+    if (event.button !== 0 || pointer !== null || !allowed()) return
+    pointer = event.pointerId
+    render()
+  })
+  const pointerEnd = event => {
+    if (pointer !== event.pointerId) return
+    pointer = null
+    render()
+  }
+  listen(window, 'pointerup', pointerEnd)
+  listen(window, 'pointercancel', pointerEnd)
+  listen(node, 'lostpointercapture', pointerEnd)
+  listen(node, 'keydown', event => {
+    if (![' ', 'Enter'].includes(event.key) || !allowed()) return
+    keys.add(event.key)
+    render()
+  })
+  listen(window, 'keyup', event => { if (keys.delete(event.key)) render() })
+  listen(node, 'blur', release)
+  listen(window, 'blur', release)
+  listen(window, 'offline', release)
+  listen(window, 'pagehide', release)
+  listen(document, 'visibilitychange', () => { if (document.hidden) release() })
+  return {
+    release,
+    check () { if (!allowed()) release() },
+    dispose () { release(); for (const remove of listeners) remove() }
+  }
+}
+
+module.exports = { attachButtonPress }