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

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,25 +19,100 @@ 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 disabledNodes = new Map()
+  const blockedTelemetry = new Map()
   const cleanup = []
   let disposed = false
   cleanup.push(() => { disposed = true })
   let editing = new URL(window.location.href).searchParams.get('cp-edit') === config.panelId
+
+  function deviceAvailable (id) {
+    return editing || component.__deviceAvailable?.(id) !== false
+  }
+  function sourceVersion (frame, binding) {
+    const stream = binding.readMeta?.meter || binding.readMeta?.xySeries
+    const source = frame?.sources?.find(item => item.device === binding.device && item.streamId === stream?.streamId)
+    return source ? `${source.epoch}:${source.seq}` : frame ? `legacy:${frame.seq}` : null
+  }
+  function setAvailable (node, available) {
+    available = editing || available
+    if (!available) {
+      if (!disabledNodes.has(node)) disabledNodes.set(node, {
+        inert: node.hasAttribute('inert'), aria: node.getAttribute('aria-disabled')
+      })
+      if (node.getAttribute('data-cpv-unavailable') !== 'true') node.setAttribute('data-cpv-unavailable', 'true')
+      if (!node.hasAttribute('inert')) node.setAttribute('inert', '')
+      if (node.getAttribute('aria-disabled') !== 'true') node.setAttribute('aria-disabled', 'true')
+    } else {
+      const original = disabledNodes.get(node)
+      if (!original) return
+      node.removeAttribute('data-cpv-unavailable')
+      if (!original.inert) node.removeAttribute('inert')
+      if (original.aria === null) node.removeAttribute('aria-disabled')
+      else node.setAttribute('aria-disabled', original.aria)
+      disabledNodes.delete(node)
+    }
+  }
+  function refreshAvailability () {
+    for (const [id, binding] of saved) {
+      const node = nodeForBinding(binding)
+      if (!node) continue
+      if (!deviceAvailable(id) && (binding.readMeta?.meter || binding.readMeta?.xySeries)) {
+        const latest = binding.readMeta.meter ? lastMeterFrame : lastXYSeriesFrame
+        if (!blockedTelemetry.has(id)) blockedTelemetry.set(id, sourceVersion(latest?.frame, binding))
+        node.setAttribute(binding.readMeta.meter ? 'data-cpv-meter-valid' : 'data-cpv-xy-series-valid', 'false')
+      }
+      const telemetryValid = !binding.readMeta?.meter && !binding.readMeta?.xySeries ||
+        node.getAttribute(binding.readMeta?.meter ? 'data-cpv-meter-valid' : 'data-cpv-xy-series-valid') === 'true'
+      setAvailable(node, deviceAvailable(id) && telemetryValid)
+    }
+    for (const [node] of disabledNodes) if (!root.contains(node)) setAvailable(node, true)
+    for (const button of buttonPresses.values()) button.controller.check()
+    for (const button of momentaryButtons.values()) button.controller.check()
+  }
   let editSession = null
   let snapshot = null
   let draft = []
   let devices = []
   let selecting = false
   let observer
+  let nodeIndex = null
   let toolbar
   let overlay
+  let overlayCleanup
   let status
   let loginScreen
+  const resumeKey = `cpv-editor-resume:${config.panelId}`
+  const resumeDataKey = `cpv-editor-resume-data:${config.panelId}`
+
+  function resumePending () {
+    try { return window.sessionStorage?.getItem(resumeKey) === '1' } catch (_) { return false }
+  }
+  function markResumePending (pending) {
+    try {
+      if (pending) window.sessionStorage?.setItem(resumeKey, '1')
+      else window.sessionStorage?.removeItem(resumeKey)
+    } catch (_) {}
+  }
+  function readResumeData () {
+    if (!resumePending()) return null
+    try {
+      const value = JSON.parse(window.sessionStorage?.getItem(resumeDataKey) || 'null')
+      return value?.editorConfig && Array.isArray(value.devices) ? value : null
+    } catch (_) { return null }
+  }
+  function clearResumeData () {
+    try { window.sessionStorage?.removeItem(resumeDataKey) } catch (_) {}
+  }
+  function wait (milliseconds) {
+    return new Promise(resolve => setTimeout(resolve, milliseconds))
+  }
 
   function element (tag, text, className) {
     const node = document.createElement(tag)
@@ -52,6 +133,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,10 +152,14 @@ function initializeVisualBinding () {
       body: method === 'POST' ? JSON.stringify(body || {}) : undefined
     }, path === '/apply' ? 120000 : (timeoutMs ?? 12000),
     async response => ({ response, result: await response.json() }))
-    if (!response.ok) throw new Error(result.error || `Request failed (${response.status})`)
+    if (!response.ok) {
+      const error = new Error(result.error || `Request failed (${response.status})`)
+      error.status = response.status
+      throw error
+    }
     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 +219,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)
@@ -195,6 +307,7 @@ function initializeVisualBinding () {
   }
   function showFeedback () {
     for (const [id, binding] of saved) {
+      if (!deviceAvailable(id)) continue
       if (binding.mode === 'write' || binding.readMeta?.meter || binding.readMeta?.xySeries) continue
       const node = nodeForBinding(binding)
       if (!node) continue
@@ -238,6 +351,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,16 +380,18 @@ 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 }) })
+          canPress: () => !disposed && !editing && component.boundAuthenticated && component.boundFeedbackConnected && deviceAvailable(id) }) })
       }
       if (binding.buttonBehavior === 'momentary' && node.tagName === 'BUTTON') {
         if (!momentaryStates.has(id)) momentaryStates.set(id, { seq: 0 })
@@ -273,7 +399,7 @@ function initializeVisualBinding () {
           state: momentaryStates.get(id),
           endpoint: component.__boundPanelConfig().endpoint,
           getSession: () => component.__boundPanelSession,
-          canStart: () => !disposed && !editing && component.boundAuthenticated && component.boundFeedbackConnected,
+          canStart: () => !disposed && !editing && component.boundAuthenticated && component.boundFeedbackConnected && deviceAvailable(id),
           request: (...args) => component.__panelFetch(...args),
           onError: error => console.error('ControlPanel momentary command failed', error) })
         momentaryButtons.set(node, { id, controller })
@@ -282,7 +408,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 || !deviceAvailable(id) ||
+              nodeForBinding(binding) !== node) return
             const value = pendingText.get(id)
             pendingText.delete(id)
             try { component.sendBoundControl({ id, value, final: true }) } catch (error) {
@@ -293,61 +420,71 @@ 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 || !deviceAvailable(id) || 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()
     }
     showFeedback()
+    refreshAvailability()
   }
   function applyMeterFrame (frame, ids) {
     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]))
-      if (!frame.valid[index]) continue
+      const id = ids[index], version = sourceVersion(frame, binding)
+      if (!deviceAvailable(id)) blockedTelemetry.set(id, version)
+      const valid = frame.valid[index] && deviceAvailable(id) &&
+        (!blockedTelemetry.has(id) || blockedTelemetry.get(id) !== version)
+      node.setAttribute('data-cpv-meter-valid', String(valid))
+      node.setAttribute('aria-invalid', String(!valid))
+      setAvailable(node, valid)
+      if (!valid) continue
+      blockedTelemetry.delete(id)
       const value = mappedValue(frame.values[index], binding.readMeta, numericRange(binding, node))
       if (binding.model) {
         if (binding.repeat) setRepeatModel(binding, value)
@@ -360,17 +497,30 @@ function initializeVisualBinding () {
     for (const { node } of meterTargets.values()) {
       node.setAttribute('data-cpv-meter-valid', 'false')
       node.setAttribute('aria-invalid', 'true')
+      setAvailable(node, false)
     }
   }
   function applyXYSeriesFrame (frame, ids) {
     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
+      const id = ids[index], version = sourceVersion(frame, binding)
+      if (!deviceAvailable(id)) blockedTelemetry.set(id, version)
+      if (!deviceAvailable(id) || (blockedTelemetry.has(id) && blockedTelemetry.get(id) === version)) {
+        node.setAttribute('data-cpv-xy-series-valid', 'false')
+        setAvailable(node, false)
+        continue
+      }
+      if (frame.valid[index]) blockedTelemetry.delete(id)
       node.setAttribute('data-cpv-xy-series-valid', String(frame.valid[index]))
+      node.setAttribute('aria-invalid', String(!frame.valid[index]))
+      setAvailable(node, 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,9 +529,15 @@ function initializeVisualBinding () {
   }
   function invalidateXYSeries () {
     lastXYSeriesFrame = null
-    for (const { node, binding } of xySeriesTargets.values()) {
+    for (const [id, target] of xySeriesTargets) {
+      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')
+      setAvailable(node, false)
+      if (!deviceAvailable(id)) continue
       if (binding.model) {
         if (binding.repeat) setRepeatModel(binding, [])
         else if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = []
@@ -393,7 +549,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 || !deviceAvailable(id)) return
         try {
           let commandValue
           if (binding.adapter === 'range') {
@@ -432,7 +588,7 @@ function initializeVisualBinding () {
           feedbackModels.delete(id)
           if (Object.is(value, feedbackValue)) return
         }
-        if (editing || !component.boundAuthenticated) return
+        if (disposed || editing || !component.boundAuthenticated || !deviceAvailable(id)) return
         if (binding.adapter === 'text-input') {
           if (typeof value === 'string' || value == null) pendingText.set(id, value ?? '')
           return
@@ -446,7 +602,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 +645,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()
@@ -553,9 +713,9 @@ function initializeVisualBinding () {
       submit.setAttribute('aria-busy', 'true')
       message.textContent = ''
       try {
-        await login(user.value, password.value)
+        const loaded = await login(user.value, password.value)
         if (disposed) return
-        closeLoginScreen()
+        if (loaded !== false) closeLoginScreen()
       } catch (error) {
         message.textContent = error.message
         submit.textContent = 'Log in'
@@ -576,17 +736,20 @@ function initializeVisualBinding () {
       if (!response.ok) throw new Error(result.error || 'Login failed')
       if (disposed) return
       editSession = result
-      await loadEditor()
+      markResumePending(false)
+      return startEditor()
     }, true)
   }
   function normalLoginView () {
     showLoginForm('Sign in', (username, password) => component.loginBoundPanel(username, password))
   }
   async function loadEditor () {
-    snapshot = await request('/config')
-    if (disposed) return
-    const response = await request('/devices')
+    const resumed = readResumeData()
+    const [config, response] = resumed
+      ? [resumed.editorConfig, { devices: resumed.devices }]
+      : await Promise.all([request('/config'), request('/devices')])
     if (disposed) return
+    snapshot = config
     devices = response.devices
     draft = snapshot.bindings.map(entry => ({ ...entry, onebased: numberingMode(entry) }))
     closeOverlay()
@@ -595,6 +758,58 @@ 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' })
+    closeLoginScreen()
+    clearResumeData()
+  }
+  function loadingError (error, editor, retry) {
+    if (disposed) return
+    const content = coverPage('Unable to load panel', editor ? 'editor' : 'panel', 'error')
+    const message = element('p', error.message, 'cpv-message')
+    message.setAttribute('role', 'alert')
+    content.append(message, button('Retry', () => {
+      coverPage('Loading...', editor ? 'editor' : 'panel')
+      retry()
+    }))
+  }
+  async function startEditor () {
+    try { await loadEditor(); return true } catch (error) {
+      if (disposed) return false
+      if (error.status === 401) { editSession = null; loginView() }
+      else loadingError(error, true, startEditor)
+      return false
+    }
+  }
+  async function restoreEditor () {
+    const resumingAfterApply = resumePending()
+    const attempts = resumingAfterApply ? 25 : 1
+    let lastError
+    for (let attempt = 0; attempt < attempts; attempt += 1) {
+      try {
+        const session = await request('/session')
+        if (disposed) return
+        editSession = session
+        const loaded = await startEditor()
+        if (loaded) markResumePending(false)
+        return
+      } catch (error) {
+        lastError = error
+        if (disposed) return
+        if (!resumingAfterApply || attempt + 1 >= attempts) break
+        await wait(Math.min(250 + attempt * 250, 1000))
+      }
+    }
+    if (disposed) return
+    if (lastError?.status === 401) loginView()
+    else loadingError(lastError || new Error('Editor session unavailable'), true, restoreEditor)
+  }
+  async function restorePanel () {
+    try {
+      const session = await component.restoreBoundPanelSession(12000)
+      if (disposed) return
+      if (session || component.boundAuthenticated) closeLoginScreen()
+      else normalLoginView()
+    } catch (error) { loadingError(error, false, restorePanel) }
   }
   function choose (label, options, selected) {
     const select = element('select')
@@ -627,8 +842,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 / 点击切换' },
@@ -645,6 +859,22 @@ function initializeVisualBinding () {
       .map(item => ({ value: item.id, text: item.id })), existing?.device))
     const write = field(form, 'Write point', choose('Write point', [], existing?.writePath))
     const read = field(form, 'Feedback point', choose('Feedback point', [], existing?.readPath || existing?.writePath))
+    const reverse = candidate.adapter === 'switch' ? field(form, 'State reverse', element('input')) : null
+    if (reverse) {
+      reverse.type = 'checkbox'
+      reverse.setAttribute('aria-label', 'State reverse')
+      reverse.checked = matcher.reverse(existing)
+      reverse.closest('label').classList.add('cpv-state-reverse')
+    }
+    function updateReverse () {
+      if (!reverse) return
+      const active = [mode.value !== 'read' && write.value, mode.value !== 'write' && read.value].filter(Boolean)
+      reverse.disabled = !active.length || active.some(path => {
+        const point = targets.find(target => target.path === path)
+        return !point || !matcher.states(point)
+      })
+      reverse.closest('label').dataset.disabled = String(reverse.disabled)
+    }
     const numbering = field(form, 'Numbering', choose('Numbering', [
       { value: 'false', text: 'Zero-based' }, { value: 'true', text: 'One-based' }
     ], String(numberingMode(existing))))
@@ -682,6 +912,7 @@ function initializeVisualBinding () {
         : mode.value === 'write' ? writeCount : Math.min(writeCount, readCount)
       message.textContent = targets.length && !available ? 'No compatible points for this control'
         : targets.length ? '' : 'No points available'
+      updateReverse()
     }
     device.addEventListener('change', async () => {
       const generation = ++targetGeneration
@@ -703,7 +934,9 @@ function initializeVisualBinding () {
     })
     write.addEventListener('change', () => {
       if (mode.value === 'both') read.value = write.value
+      updateReverse()
     })
+    read.addEventListener('change', updateReverse)
     mode.addEventListener('change', updateTargets)
     behavior?.addEventListener('change', () => { updateButtonMode(); updateTargets() })
     updateTargets()
@@ -737,6 +970,7 @@ function initializeVisualBinding () {
         label: name.value.trim(), mode: mode.value, device: device.value,
         writePath: mode.value === 'read' ? '' : write.value,
         readPath: mode.value === 'write' ? '' : read.value,
+        ...(reverse ? { stateReverse: reverse.checked } : {}),
         onebased: numbering.value === 'true'
       }
       draft = draft.filter(item => !sameBindingTarget(item, candidate))
@@ -767,7 +1001,12 @@ function initializeVisualBinding () {
       try {
         await request('/apply', 'POST', {
           rev: snapshot.rev, templateHash: snapshot.templateHash, entries: draft
+        }).then(result => {
+          try {
+            window.sessionStorage?.setItem(resumeDataKey, JSON.stringify(result))
+          } catch (_) {}
         })
+        markResumePending(true)
         window.location.reload()
       } catch (error) {
         inform(error.message, true)
@@ -869,7 +1108,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 +1116,34 @@ 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 => {
+  for (const name of ['click', 'pointerdown', 'keydown', 'input', 'change']) {
+    listen(root, name, event => {
+      if (!editing && event.target?.closest?.('[data-cpv-unavailable="true"]')) {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+      }
+    }, true)
+  }
+  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 +1189,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()
@@ -955,14 +1209,18 @@ function initializeVisualBinding () {
       for (const button of buttonPresses.values()) button.controller.release()
       for (const button of momentaryButtons.values()) button.controller.release()
     }
+    refreshAvailability()
   }))
+  cleanup.push(this.$watch('boundAvailability', () => { refreshAvailability(); showFeedback() }))
   const unwatch = this.$watch('boundState', showFeedback)
   cleanup.push(() => unwatch(), () => observer.disconnect(), () => toolbar?.remove(),
     () => closeOverlay(), () => closeLoginScreen())
+  cleanup.push(() => { for (const [node] of disabledNodes) setAvailable(node, true) })
   this.__visualBindingCleanup = cleanup
 
   const style = element('style')
   style.textContent = `
+    [data-cpv-unavailable="true"]{filter:grayscale(1) !important;opacity:.45 !important;pointer-events:none !important}
     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)}
@@ -1013,7 +1271,9 @@ function initializeVisualBinding () {
     .cpv-scrim{position:fixed;inset:0;z-index:2147483001;background:#0008;display:flex;align-items:center;justify-content:center;padding:16px}
     .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[hidden]{display:none}
     .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-state-reverse{display:flex;align-items:center;gap:10px}.cpv-state-reverse span{margin:0}.cpv-field input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:#008d35;flex:none}
     .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}
@@ -1033,25 +1293,14 @@ function initializeVisualBinding () {
     document.body.classList.add('cpv-editing')
     cleanup.push(() => document.body.classList.remove('cpv-editing'))
     coverPage('Loading...', 'editor')
-    request('/session', 'GET', undefined, 2500).then(session => {
-      if (disposed) return
-      editSession = session
-      return loadEditor()
-    })
-      .then(closeLoginScreen).catch(() => loginView())
+    restoreEditor()
   } else {
     coverPage('Loading...', 'panel')
     cleanup.push(this.$watch('boundAuthenticated', authenticated => {
       if (authenticated) closeLoginScreen()
       else if (!loginScreen) normalLoginView()
     }))
-    component.restoreBoundPanelSession(2500).then(session => {
-      if (disposed) return
-      if (session || component.boundAuthenticated) closeLoginScreen()
-      else normalLoginView()
-    }).catch(() => {
-      normalLoginView()
-    })
+    restorePanel()
   }
 }