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

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,10 @@ 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()
   const feedbackModels = new Map()
   const pendingText = new Map()
   const cleanup = []
@@ -25,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
 
@@ -49,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 || ''
@@ -67,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()
@@ -127,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)
@@ -196,7 +235,9 @@ function initializeVisualBinding () {
       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
@@ -233,19 +274,65 @@ 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) {
+        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')
-      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 }) })
+      }
+      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 = () => {
-            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) {
@@ -256,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()
@@ -306,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]))
@@ -329,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
@@ -342,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) {
@@ -356,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') {
@@ -395,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
@@ -409,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))
@@ -447,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()
@@ -558,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')
@@ -590,9 +692,19 @@ 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 / 点击切换' },
+      { 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))
@@ -626,8 +738,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'
@@ -651,8 +765,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)))
@@ -672,11 +790,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,
@@ -757,8 +876,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)
@@ -813,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()
@@ -821,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()
@@ -886,7 +1006,27 @@ function initializeVisualBinding () {
     attachControls()
     updateBindingMarkers()
   })
-  observer.observe(root, { childList: true, subtree: true })
+  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()
+    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())
@@ -894,6 +1034,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}
@@ -944,6 +1085,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 }

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-momentary-client.js

@@ -0,0 +1,91 @@
+// Serialized into the Dashboard component; only standard browser APIs belong here.
+function attachMomentaryButton ({ node, id, endpoint, getSession, canStart, request, onError, state = { seq: 0 } }) {
+  if (!state.client) state.client = Array.from(crypto.getRandomValues(new Uint8Array(16)), byte => byte.toString(16).padStart(2, '0')).join('')
+  let generation = 0, active = null, timer = null
+  const listeners = []
+  function listen (target, name, callback) {
+    target.addEventListener(name, callback)
+    listeners.push(() => target.removeEventListener(name, callback))
+  }
+  function transmit (action, session) {
+    return request(endpoint + '/bound-command', {
+      method: 'POST', credentials: 'same-origin', keepalive: action === 'release',
+      headers: { 'Content-Type': 'application/json', 'X-Room-CSRF': session.csrf },
+      body: JSON.stringify({ room: session.room, _controlPanel: { kind: 'command', id,
+        value: action !== 'release', final: true,
+        hold: { client: state.client, seq: ++state.seq, action, epoch: session.holdEpoch } } })
+    }, 1800, async response => {
+      if (!response.ok) throw Error('Momentary command failed (' + response.status + ')')
+      if (typeof response.json === 'function') {
+        const result = await response.json()
+        if (action !== 'release' && result.held !== true) throw Error('Momentary hold expired; press again')
+      }
+    })
+  }
+  function release () {
+    if (!active) return
+    const previous = active
+    active = null
+    generation++
+    clearTimeout(timer)
+    timer = null
+    void transmit('release', previous.session).catch(onError)
+    if (previous.pointer !== undefined && node.hasPointerCapture?.(previous.pointer)) {
+      try { node.releasePointerCapture(previous.pointer) } catch (_) {}
+    }
+  }
+  function renew (version) {
+    if (!active || version !== generation) return
+    if (!node.isConnected || !canStart()) { release(); return }
+    void transmit('renew', active.session).then(() => {
+      if (active && version === generation) timer = setTimeout(() => renew(version), 750)
+    }).catch(error => {
+      if (active && version === generation) release()
+      onError(error)
+    })
+  }
+  function start (source) {
+    if (active || node.disabled || !canStart()) return
+    const session = getSession()
+    if (!session?.csrf) return
+    active = { ...source, session: { ...session } }
+    const version = ++generation
+    void transmit('start', active.session).then(() => {
+      if (active && version === generation) timer = setTimeout(() => renew(version), 750)
+    }).catch(error => {
+      if (active && version === generation) release()
+      onError(error)
+    })
+  }
+  listen(node, 'pointerdown', event => {
+    if (event.button !== 0 || active) return
+    event.preventDefault()
+    node.focus()
+    start({ pointer: event.pointerId })
+    if (active) { try { node.setPointerCapture(event.pointerId) } catch (_) {} }
+  })
+  const pointerEnd = event => { if (active?.pointer === event.pointerId) release() }
+  listen(window, 'pointerup', pointerEnd)
+  listen(window, 'pointercancel', pointerEnd)
+  listen(node, 'lostpointercapture', pointerEnd)
+  listen(node, 'keydown', event => {
+    if (![' ', 'Enter'].includes(event.key)) return
+    event.preventDefault()
+    if (!event.repeat) start({ key: event.key })
+  })
+  listen(window, 'keyup', event => {
+    if (active?.key === event.key) { event.preventDefault(); release() }
+  })
+  listen(node, 'click', event => event.preventDefault())
+  listen(node, 'blur', release)
+  listen(window, 'blur', release)
+  listen(window, 'pagehide', release)
+  listen(document, 'visibilitychange', () => { if (document.hidden) release() })
+  return {
+    release,
+    check () { if (!node.isConnected || node.disabled || !canStart()) release() },
+    dispose () { release(); for (const remove of listeners) remove() }
+  }
+}
+
+module.exports = { attachMomentaryButton }