node-red-contrib-room-tools 1.8.2 → 1.8.3

package/panel-binding-editor.js

@@ -0,0 +1,771 @@
+function initializeVisualBinding () {
+  const component = this
+  const config = this.__boundPanelConfig()?.visual
+  if (!config || !this.$el || typeof document === 'undefined') return
+  const root = this.$el
+  const base = config.editorEndpoint
+  const saved = new Map(Object.entries(config.bindings || {}))
+  const attached = new WeakSet()
+  const feedbackModels = new Map()
+  const pendingText = new Map()
+  const cleanup = []
+  let editing = new URL(window.location.href).searchParams.get('cp-edit') === config.panelId
+  let editSession = null
+  let snapshot = null
+  let draft = []
+  let devices = []
+  let selecting = false
+  let observer
+  let toolbar
+  let overlay
+  let status
+  let loginScreen
+
+  function element (tag, text, className) {
+    const node = document.createElement(tag)
+    if (text !== undefined && text !== null) node.textContent = String(text)
+    if (className) node.className = className
+    return node
+  }
+  function clear (node) { while (node.firstChild) node.removeChild(node.firstChild) }
+  function field (form, label, input) {
+    const row = element('label', null, 'cpv-field')
+    row.append(element('span', label), input)
+    form.append(row)
+    return input
+  }
+  function button (label, action, className) {
+    const node = element('button', label, className)
+    node.type = 'button'
+    node.addEventListener('click', action)
+    return node
+  }
+  function inform (message, error = false) {
+    if (status) {
+      status.textContent = message || ''
+      status.dataset.error = error ? 'true' : 'false'
+    }
+  }
+  async function request (path, method = 'GET', body) {
+    const response = await fetch(base + path, {
+      method, credentials: 'same-origin',
+      headers: method === 'POST'
+        ? { 'Content-Type': 'application/json', 'X-Panel-CSRF': editSession?.csrf || '' }
+        : undefined,
+      body: method === 'POST' ? JSON.stringify(body || {}) : undefined,
+      signal: AbortSignal.timeout(12000)
+    })
+    const result = await response.json().catch(() => ({}))
+    if (!response.ok) throw new Error(result.error || `Request failed (${response.status})`)
+    return result
+  }
+  function family (target) {
+    if (target.controlSchemaVersion !== config.contract.schemaVersion) return null
+    const known = config.contract.types[String(target.controlType || '').toLowerCase()]
+    if (!known) return null
+    const type = target.type
+    if (known.family === 'number' && ['integer', 'float'].includes(type)) return 'number'
+    if (known.family === 'boolean' && (type === 'boolean' ||
+      (type === 'integer' && target.booleanEncoding === 'integer01' &&
+        target.min === 0 && target.max === 1))) return 'boolean'
+    if (known.family === 'text' && ['string', 'dstring'].includes(type)) return 'text'
+    if (known.family === 'enum' && ['enum', 'integer', 'string'].includes(type)) return 'enum'
+    return null
+  }
+  function compatible (adapter, target, direction, candidate) {
+    const families = {
+      range: ['number'], switch: ['boolean'], meter: ['number'],
+      'text-display': ['number', 'boolean', 'text', 'enum'],
+      'text-input': ['text'], select: ['enum']
+    }
+    if (target.kind !== 'param' || !families[adapter]?.includes(family(target))) return false
+    if (direction === 'write' && ['meter', 'text-display'].includes(adapter)) return false
+    if (candidate?.unit && candidate.unit !== target.unit) return false
+    return direction === 'write' ? ['wo', 'rw'].includes(target.access) : ['ro', 'rw'].includes(target.access)
+  }
+  function numericRange (binding, node) {
+    if (binding.uiRange) return binding.uiRange
+    const tag = node.tagName?.toLowerCase()
+    const type = node.type?.toLowerCase()
+    const defaultMax = tag === 'meter' || tag === 'progress' ? 1 : 100
+    const min = node.min === '' || node.min == null ? (type === 'number' ? undefined : 0) : Number(node.min)
+    const max = node.max === '' || node.max == null ? (type === 'number' ? undefined : defaultMax) : Number(node.max)
+    return { min, max, step: node.step || (tag === 'meter' || tag === 'progress' ? 'any' : '1') }
+  }
+  function mappedValue (value, source, target, integer = false) {
+    if (!Number.isFinite(value)) return value
+    if (!Number.isFinite(source?.min) || !Number.isFinite(source?.max) || source.max <= source.min ||
+      !Number.isFinite(target?.min) || !Number.isFinite(target?.max) || target.max <= target.min) return value
+    const clamped = Math.min(source.max, Math.max(source.min, value))
+    let result = target.min + (clamped - source.min) * (target.max - target.min) / (source.max - source.min)
+    if (integer) result = Math.round(result)
+    else if (target.step && target.step !== 'any') {
+      const step = Number(target.step)
+      if (Number.isFinite(step) && step > 0) {
+        const precision = String(target.step).split('.')[1]?.length || 0
+        result = Number((target.min + Math.round((result - target.min) / step) * step).toFixed(Math.min(precision, 12)))
+      }
+    }
+    return Math.min(target.max, Math.max(target.min, result))
+  }
+  function buttonStateAttribute (node) {
+    return node.getAttribute('role') === 'switch' && !node.hasAttribute('aria-pressed')
+      ? 'aria-checked' : 'aria-pressed'
+  }
+  function valueFor (binding, node) {
+    if (binding.adapter === 'switch') {
+      if (node.tagName === 'BUTTON') return node.getAttribute(buttonStateAttribute(node)) !== 'true'
+      return Boolean(node.checked)
+    }
+    if (binding.adapter === 'range') {
+      return mappedValue(Number(node.value), numericRange(binding, node), binding.writeMeta,
+        binding.writeMeta?.type === 'integer')
+    }
+    if (binding.adapter === 'select' && ['integer', 'float'].includes(binding.writeMeta?.type)) {
+      return Number(node.value)
+    }
+    return String(node.value)
+  }
+  function showFeedback () {
+    for (const [id, binding] of saved) {
+      if (binding.mode === 'write') continue
+      const matches = root.querySelectorAll('[data-cp-auto="' + binding.locator + '"]')
+      if (matches.length !== 1) continue
+      if (!Object.prototype.hasOwnProperty.call(component.boundState, id)) continue
+      const value = component.boundDisplayValue(id, component.boundState[id])
+      const node = matches[0]
+      const displayValue = ['range', 'meter'].includes(binding.adapter)
+        ? mappedValue(Number(value), binding.readMeta || binding.writeMeta,
+          numericRange(binding, node)) : value
+      if (binding.model) {
+        if (binding.component && binding.adapter === 'text-input' &&
+          (pendingText.has(id) || node.contains?.(document.activeElement))) continue
+        if (binding.model in component && !component.$options?.computed?.[binding.model]) {
+          if (!Object.is(component[binding.model], displayValue)) {
+            pendingText.delete(id)
+            if (binding.component) feedbackModels.set(id, displayValue)
+            component[binding.model] = displayValue
+            if (binding.component && component.$nextTick) {
+              void component.$nextTick(() => {
+                if (Object.is(feedbackModels.get(id), displayValue)) feedbackModels.delete(id)
+              })
+            }
+          }
+        } else console.error('ControlPanel display field is unavailable: ' + binding.model)
+      }
+      else if (binding.adapter === 'switch') {
+        if (node.tagName === 'BUTTON') {
+          const state = value === true ? 'true' : 'false'
+          node.setAttribute(buttonStateAttribute(node), state)
+          if (node.getAttribute('role') === 'switch' && node.hasAttribute('aria-pressed')) node.setAttribute('aria-checked', state)
+        } else node.checked = value === true
+      }
+      else if (binding.adapter === 'text-display') {
+        if (node.textContent !== String(value)) node.textContent = String(value)
+      }
+      else if (binding.adapter === 'meter') node.value = Number(displayValue)
+      else if (document.activeElement !== node || binding.adapter === 'range') node.value = String(displayValue)
+    }
+  }
+  function attachControls () {
+    for (const node of root.querySelectorAll('[data-cp-auto]')) {
+      if (attached.has(node)) continue
+      attached.add(node)
+      const locator = node.getAttribute('data-cp-auto')
+      const matched = [...saved].find(([, entry]) => entry.locator === locator)
+      if (!matched) continue
+      const [id, binding] = matched
+      if (binding.mode === 'read') continue
+      if (binding.component) {
+        if (binding.adapter === 'text-input') {
+          const commit = () => {
+            if (!pendingText.has(id) || editing || !component.boundAuthenticated) return
+            const value = pendingText.get(id)
+            pendingText.delete(id)
+            try { component.sendBoundControl({ id, value, final: true }) } catch (error) {
+              console.error('ControlPanel binding command failed', error)
+            }
+          }
+          const afterModelUpdate = () => {
+            if (component.$nextTick) void component.$nextTick(commit)
+            else commit()
+          }
+          node.addEventListener('change', afterModelUpdate)
+          node.addEventListener('focusout', afterModelUpdate)
+          if (binding.component === 'v-text-field') {
+            node.addEventListener('keydown', event => {
+              if (event.key === 'Enter') afterModelUpdate()
+            })
+          }
+        }
+        continue
+      }
+      const send = final => {
+        if (editing || !component.boundAuthenticated) 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)
+      } else if (binding.adapter === 'switch' && node.tagName === 'BUTTON') {
+        node.addEventListener('click', event => {
+          event.preventDefault()
+          send(true)
+        })
+      } else node.addEventListener('change', () => send(true))
+    }
+    showFeedback()
+  }
+  function attachModelControls () {
+    for (const [id, binding] of saved) {
+      if (!binding.component || !binding.model || binding.mode === 'read') continue
+      let finishTimer
+      const send = (value, final) => {
+        if (editing || !component.boundAuthenticated) return
+        try {
+          let commandValue
+          if (binding.adapter === 'range') {
+            const numeric = Number(value)
+            if (!Number.isFinite(numeric)) return
+            commandValue = mappedValue(numeric, binding.uiRange, binding.writeMeta,
+              binding.writeMeta?.type === 'integer')
+          } else if (binding.adapter === 'switch') {
+            if (typeof value !== 'boolean') return
+            commandValue = value
+          } else if (binding.adapter === 'select') {
+            if (typeof value !== 'string' &&
+              !(typeof value === 'number' && Number.isFinite(value))) return
+            if (['integer', 'float'].includes(binding.writeMeta?.type)) {
+              commandValue = Number(value)
+              if (!Number.isFinite(commandValue)) return
+            } else commandValue = value
+            const options = binding.writeMeta?.enums
+            if (Array.isArray(options) && options.length &&
+              !options.some(option => Object.is(option, commandValue) ||
+                Object.is(option?.value, commandValue))) {
+              console.error('ControlPanel selection is not a device option: ' + id)
+              return
+            }
+          } else return
+          component.sendBoundControl({ id, value: commandValue, final })
+        } catch (error) {
+          console.error('ControlPanel binding command failed', error)
+        }
+      }
+      const unwatch = component.$watch(binding.model, value => {
+        if (feedbackModels.has(id)) {
+          const feedbackValue = feedbackModels.get(id)
+          feedbackModels.delete(id)
+          if (Object.is(value, feedbackValue)) return
+        }
+        if (editing || !component.boundAuthenticated) return
+        if (binding.adapter === 'text-input') {
+          if (typeof value === 'string' || value == null) pendingText.set(id, value ?? '')
+          return
+        }
+        if (binding.adapter === 'range') {
+          send(value, false)
+          clearTimeout(finishTimer)
+          finishTimer = setTimeout(() => send(value, true), 160)
+        } else send(value, true)
+      })
+      cleanup.push(() => { clearTimeout(finishTimer); unwatch() })
+    }
+  }
+  function closeOverlay () { overlay?.remove(); overlay = null }
+  function updateBindingMarkers () {
+    for (const node of root.querySelectorAll('[data-cpv-bound="true"]')) {
+      node.removeAttribute('data-cpv-bound')
+      node.removeAttribute('data-cpv-binding-id')
+    }
+    if (!editing || !editSession) return
+    const bindings = new Map(draft.map(entry => [entry.locator, entry]))
+    for (const node of root.querySelectorAll('[data-cp-auto]')) {
+      const entry = bindings.get(node.getAttribute('data-cp-auto'))
+      if (!entry) continue
+      node.setAttribute('data-cpv-bound', 'true')
+      node.setAttribute('data-cpv-binding-id', entry.id)
+    }
+  }
+  function contextMenu (candidate, x, y) {
+    closeOverlay()
+    overlay = element('div', null, 'cpv-menu')
+    overlay.setAttribute('role', 'menu')
+    const existing = draft.find(entry => entry.locator === candidate.locator)
+    overlay.append(button(existing ? 'Edit binding' : 'Bind control', () => bindingDialog(candidate)))
+    if (existing) overlay.append(button('Remove binding', () => {
+      draft = draft.filter(entry => entry.locator !== candidate.locator)
+      updateBindingMarkers()
+      closeOverlay()
+      inform('Binding removed from draft')
+    }))
+    overlay.style.left = Math.min(x, window.innerWidth - 180) + 'px'
+    overlay.style.top = Math.min(y, window.innerHeight - 90) + 'px'
+    document.body.append(overlay)
+    overlay.querySelector('button')?.focus()
+    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(() => {
+      clearTimeout(timer)
+      document.removeEventListener('pointerdown', outside, true)
+    })
+  }
+  function showDialog (title) {
+    closeOverlay()
+    overlay = element('div', null, 'cpv-scrim')
+    const dialog = element('section', null, 'cpv-dialog')
+    dialog.setAttribute('role', 'dialog')
+    dialog.setAttribute('aria-modal', 'true')
+    dialog.setAttribute('aria-label', title)
+    dialog.append(element('h2', title))
+    overlay.append(dialog)
+    document.body.append(overlay)
+    return dialog
+  }
+  function coverPage (title, mode, state = 'loading') {
+    loginScreen?.remove()
+    loginScreen = element('div', null, 'cpv-login-screen')
+    loginScreen.setAttribute('role', 'dialog')
+    loginScreen.setAttribute('aria-modal', 'true')
+    loginScreen.setAttribute('aria-label', title)
+    loginScreen.dataset.mode = mode
+    loginScreen.dataset.state = state
+    const marks = element('div', null, 'cpv-brand-row')
+    marks.append(element('strong', 'BSS'), element('strong', 'OMNI'))
+    if (mode === 'panel') {
+      const brand = element('div', null, 'cpv-login-brand')
+      brand.append(marks)
+      brand.append(element('span', 'The Unified Audio, Video & Control Platform', 'cpv-brand-tagline'))
+      loginScreen.append(brand)
+    }
+    const content = element('section', null, 'cpv-login-content')
+    if (mode === 'editor') content.append(marks)
+    content.append(element('h1', title))
+    loginScreen.append(content)
+    document.body.append(loginScreen)
+    return content
+  }
+  function closeLoginScreen () { loginScreen?.remove(); loginScreen = null }
+  function showLoginForm (title, login, editor = false) {
+    const content = coverPage(title, editor ? 'editor' : 'panel', 'login')
+    const form = element('form')
+    const user = field(form, editor ? 'Editor username' : 'Username', element('input'))
+    user.name = editor ? 'cp-editor-username' : 'cp-panel-username'
+    user.autocomplete = editor ? 'section-cp-editor username' : 'section-cp-panel username'
+    const password = field(form, editor ? 'Editor password' : 'Password', element('input'))
+    password.type = 'password'
+    password.name = editor ? 'cp-editor-password' : 'cp-panel-password'
+    password.autocomplete = editor ? 'section-cp-editor current-password' : 'section-cp-panel current-password'
+    const message = element('p', '', 'cpv-message')
+    message.setAttribute('role', 'status')
+    form.append(message)
+    const submit = element('button', 'Log in')
+    submit.type = 'submit'
+    form.append(submit)
+    form.addEventListener('submit', async event => {
+      event.preventDefault()
+      submit.disabled = true
+      submit.textContent = editor ? 'Loading...' : 'Signing in...'
+      submit.setAttribute('aria-busy', 'true')
+      message.textContent = ''
+      try {
+        await login(user.value, password.value)
+        closeLoginScreen()
+      } catch (error) {
+        message.textContent = error.message
+        submit.textContent = 'Log in'
+        submit.removeAttribute('aria-busy')
+        submit.disabled = false
+      }
+    })
+    content.append(form)
+    user.focus()
+  }
+  function loginView () {
+    showLoginForm('ControlPanel editor', async (username, password) => {
+      const response = await fetch(base + '/login', {
+        method: 'POST', credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+      })
+      const result = await response.json()
+      if (!response.ok) throw new Error(result.error || 'Login failed')
+      editSession = result
+      await loadEditor()
+    }, true)
+  }
+  function normalLoginView () {
+    showLoginForm('Sign in', (username, password) => component.loginBoundPanel(username, password))
+  }
+  async function loadEditor () {
+    snapshot = await request('/config')
+    const response = await request('/devices')
+    devices = response.devices
+    draft = snapshot.bindings.map(entry => ({ ...entry, onebased: numberingMode(entry) }))
+    closeOverlay()
+    selecting = true
+    renderToolbar()
+    inform('Choose a control on the page')
+    updateBindingMarkers()
+  }
+  function choose (label, options, selected) {
+    const select = element('select')
+    select.setAttribute('aria-label', label)
+    select.append(new Option('Choose...', ''))
+    for (const item of options) select.append(new Option(item.text, item.value))
+    select.value = selected || ''
+    return select
+  }
+  function numberingMode (binding) {
+    for (const value of [binding?.onebased, binding?.writeMeta?.onebased, binding?.readMeta?.onebased]) {
+      if (typeof value === 'boolean') return value
+    }
+    return false
+  }
+  function finishBindingEdit (returnToBindings) {
+    if (returnToBindings) showBindingsDialog()
+    else closeOverlay()
+  }
+  async function bindingDialog (candidate, options = {}) {
+    const returnToBindings = options.returnToBindings === true
+    const existing = draft.find(entry => entry.locator === candidate.locator)
+    const dialog = showDialog(existing ? 'Edit binding' : 'Bind control')
+    const form = element('form')
+    const name = field(form, 'Name', element('input'))
+    name.value = existing?.label || candidate.label
+    name.maxLength = 80
+    const id = field(form, 'Control ID', element('input'))
+    id.value = existing?.id || 'control.' + candidate.locator.slice(-12)
+    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 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))
+    const read = field(form, 'Feedback point', choose('Feedback point', [], existing?.readPath || existing?.writePath))
+    const numbering = field(form, 'Numbering', choose('Numbering', [
+      { value: 'false', text: 'Zero-based' }, { value: 'true', text: 'One-based' }
+    ], String(numberingMode(existing))))
+    const message = element('p', '', 'cpv-message')
+    form.append(message)
+    let targets = []
+    function updateTargets () {
+      const oldWrite = write.value || existing?.writePath
+      const oldRead = read.value || existing?.readPath || existing?.writePath
+      clear(write); clear(read)
+      write.append(new Option('Choose...', ''))
+      read.append(new Option('Choose...', ''))
+      let writeCount = 0
+      let readCount = 0
+      for (const target of targets) {
+        const label = `${target.path} (${target.type})`
+        if (compatible(candidate.adapter, target, 'write', candidate)) {
+          write.append(new Option(label, target.path))
+          writeCount++
+        }
+        if (compatible(candidate.adapter, target, 'read', candidate)) {
+          read.append(new Option(label, target.path))
+          readCount++
+        }
+      }
+      write.value = oldWrite || ''
+      read.value = oldRead || ''
+      write.closest('label').hidden = mode.value === 'read'
+      read.closest('label').hidden = mode.value === 'write'
+      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'
+        : targets.length ? '' : 'No points available'
+    }
+    device.addEventListener('change', async () => {
+      message.textContent = 'Loading points...'
+      try {
+        targets = device.value ? (await request('/targets?device=' + encodeURIComponent(device.value))).targets : []
+        updateTargets()
+      } catch (error) { targets = []; updateTargets(); message.textContent = error.message }
+    })
+    write.addEventListener('change', () => { read.value = write.value })
+    mode.addEventListener('change', updateTargets)
+    if (device.value) device.dispatchEvent(new Event('change'))
+    const actions = element('div', null, 'cpv-actions')
+    actions.append(button('Cancel', () => finishBindingEdit(returnToBindings)))
+    if (existing) actions.append(button('Remove', () => {
+      draft = draft.filter(entry => entry.locator !== candidate.locator)
+      finishBindingEdit(returnToBindings)
+      inform('Binding removed from draft')
+    }))
+    const save = element('button', 'Save draft')
+    save.type = 'submit'
+    actions.append(save)
+    form.append(actions)
+    form.addEventListener('submit', event => {
+      event.preventDefault()
+      if (!/^[A-Za-z][A-Za-z0-9._/-]{0,127}$/.test(id.value) ||
+        draft.some(entry => entry.id === id.value && entry.locator !== candidate.locator)) {
+        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) {
+        message.textContent = 'Complete the binding fields'; return
+      }
+      const entry = {
+        id: id.value, locator: candidate.locator, adapter: candidate.adapter,
+        ...(candidate.model ? { model: candidate.model } : {}),
+        label: name.value.trim(), mode: mode.value, device: device.value,
+        writePath: mode.value === 'read' ? '' : write.value,
+        readPath: mode.value === 'write' ? '' : read.value,
+        onebased: numbering.value === 'true'
+      }
+      draft = draft.filter(item => item.locator !== candidate.locator)
+      draft.push(entry)
+      updateBindingMarkers()
+      finishBindingEdit(returnToBindings)
+      inform('Binding saved in draft')
+    })
+    dialog.append(form)
+    name.focus()
+  }
+  function renderToolbar () {
+    toolbar?.remove()
+    toolbar = element('div', null, 'cpv-toolbar')
+    const select = button('Select', () => {
+      selecting = !selecting
+      select.setAttribute('aria-pressed', String(selecting))
+      inform(selecting ? 'Choose a control on the page' : '')
+    })
+    select.setAttribute('aria-pressed', String(selecting))
+    toolbar.append(select)
+    toolbar.append(button('Bindings', showBindingsDialog))
+    const apply = button('Apply', async () => {
+      if (apply.disabled) return
+      apply.disabled = true
+      apply.setAttribute('aria-busy', 'true')
+      inform('Applying bindings...')
+      try {
+        await request('/apply', 'POST', {
+          rev: snapshot.rev, templateHash: snapshot.templateHash, entries: draft
+        })
+        window.location.reload()
+      } catch (error) {
+        inform(error.message, true)
+      } finally {
+        apply.disabled = false
+        apply.removeAttribute('aria-busy')
+      }
+    })
+    toolbar.append(apply)
+    toolbar.append(button('Exit', async () => {
+      try { await request('/logout', 'POST') } catch (_) {}
+      try { await component.logoutBoundPanel() } catch (_) {}
+      returnToPanel()
+    }))
+    status = element('span', '', 'cpv-status')
+    status.setAttribute('role', 'status')
+    toolbar.append(status)
+    document.body.append(toolbar)
+  }
+  function sortedDraftEntries () {
+    const order = new Map((snapshot?.candidates || []).map((candidate, index) => [candidate.locator, index]))
+    return [...draft].sort((a, b) => {
+      const position = (order.get(a.locator) ?? Number.MAX_SAFE_INTEGER) -
+        (order.get(b.locator) ?? Number.MAX_SAFE_INTEGER)
+      if (position) return position
+      return String(a.id).localeCompare(String(b.id))
+    })
+  }
+  function showBindingsDialog () {
+      const dialog = showDialog('Bindings')
+      if (!draft.length) dialog.append(element('p', 'No bindings'))
+      for (const entry of sortedDraftEntries()) {
+        const row = element('div', null, 'cpv-binding-row')
+        const path = entry.writePath || entry.readPath || '(no target)'
+        const details = element('div', null, 'cpv-binding-details')
+        details.append(element('span', entry.label, 'cpv-binding-label'))
+        details.append(element('span', path, 'cpv-binding-path'))
+        row.append(details)
+        const actions = element('div', null, 'cpv-binding-actions')
+        const candidate = snapshot.candidates.find(item => item.locator === entry.locator && item.supported)
+        const edit = button('Edit', () => bindingDialog(candidate, { returnToBindings: true }))
+        edit.disabled = !candidate
+        if (!candidate) edit.title = 'This control is no longer available on the page'
+        actions.append(edit)
+        actions.append(button('Remove', () => {
+          draft = draft.filter(item => item.id !== entry.id)
+          updateBindingMarkers()
+          row.remove()
+          inform('Binding removed from draft')
+        }))
+        row.append(actions)
+        dialog.append(row)
+      }
+      dialog.append(button('Close', closeOverlay))
+  }
+  function returnToPanel () {
+    const url = new URL(window.location.href)
+    url.searchParams.delete('cp-edit')
+    window.location.replace(url.href)
+  }
+  function candidateFromEvent (event) {
+    const node = event.target?.closest?.('[data-cp-auto]')
+    if (!node || !root.contains(node) || !snapshot) return null
+    const candidate = snapshot.candidates.find(item => item.locator === node.getAttribute('data-cp-auto'))
+    if (!candidate?.component || !candidate.model) return candidate
+    const value = component[candidate.model]
+    if (value == null) return candidate
+    if (candidate.adapter === 'switch' && typeof value !== 'boolean') {
+      return { ...candidate, supported: false, reason: 'This Vuetify switch needs a boolean v-model field' }
+    }
+    if (candidate.adapter === 'range' && (typeof value !== 'number' || !Number.isFinite(value))) {
+      return { ...candidate, supported: false, reason: 'This Vuetify slider needs a numeric v-model field' }
+    }
+    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 === 'select' && typeof value !== 'string' &&
+      !(typeof value === 'number' && Number.isFinite(value))) {
+      return { ...candidate, supported: false, reason: 'This Vuetify selection needs one scalar model field' }
+    }
+    if (candidate.adapter === 'text-input' && typeof value !== 'string') {
+      return { ...candidate, supported: false, reason: 'This Vuetify text field needs a string model field' }
+    }
+    return candidate
+  }
+  function chooseCandidate (event) {
+    if (!editing || !editSession) return
+    const candidate = candidateFromEvent(event)
+    if (!candidate) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    if (!candidate.supported) { inform(candidate.reason, true); return }
+    contextMenu(candidate, event.clientX || 12, event.clientY || 12)
+  }
+  root.addEventListener('contextmenu', chooseCandidate, true)
+  for (const name of ['input', 'change']) {
+    root.addEventListener(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 => {
+    if (event.key === 'Enter' && selecting) chooseCandidate(event)
+  }, true)
+  let longPress
+  root.addEventListener('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)
+  }
+  attachControls()
+  attachModelControls()
+  observer = new MutationObserver(() => {
+    attachControls()
+    updateBindingMarkers()
+  })
+  observer.observe(root, { childList: true, subtree: true })
+  const unwatch = this.$watch('boundState', showFeedback)
+  cleanup.push(() => unwatch(), () => observer.disconnect(), () => toolbar?.remove(),
+    () => closeOverlay(), () => closeLoginScreen())
+  this.__visualBindingCleanup = cleanup
+
+  const style = element('style')
+  style.textContent = `
+    .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}
+    .cpv-toolbar button[aria-pressed=true],.cpv-dialog button[type=submit]{background:#8b1ec4;color:white;border-color:#8b1ec4}
+    .cpv-toolbar button[aria-busy=true]{cursor:wait}
+    .cpv-toolbar button[aria-busy=true]::before{content:'';display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cpv-spin .8s linear infinite}
+    .cpv-status{max-width:260px;font-size:12px}.cpv-status[data-error=true],.cpv-message{color:#a52a35}
+    .cpv-login-screen{position:fixed;inset:0;z-index:2147483003;display:grid;box-sizing:border-box;min-height:100dvh;overflow:auto;font:16px/1.45 system-ui,sans-serif}
+    .cpv-login-content{position:relative;z-index:1;box-sizing:border-box;width:min(440px,100%)}
+    .cpv-login-content h1{font-size:30px;line-height:1.15;margin:0 0 28px;font-weight:650}
+    .cpv-login-content .cpv-field{margin:0 0 18px}.cpv-login-content .cpv-field span{font-size:13px;margin-bottom:7px}
+    .cpv-login-content input{box-sizing:border-box;width:100%;min-height:48px;padding:11px 14px;border-radius:4px;font:inherit}
+    .cpv-login-content button{width:100%;min-height:50px;padding:10px 16px;border:1px solid #008d35;border-radius:4px;background:#008d35;color:#fff;font:inherit;font-weight:650;cursor:pointer}
+    .cpv-login-content button:hover:not(:disabled){background:#067a32;border-color:#067a32}
+    .cpv-login-content button:disabled{opacity:.8;cursor:wait}
+    .cpv-login-content button[aria-busy=true]::before{content:'';display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cpv-spin .8s linear infinite}
+    .cpv-login-content .cpv-message{min-height:20px;margin:0 0 8px;font-size:13px}
+    .cpv-login-screen[data-state=loading] .cpv-login-content::before{content:'';display:block;width:30px;height:30px;margin-bottom:22px;border:3px solid #a9dcc0;border-top-color:#008d35;border-radius:50%;animation:cpv-spin .8s linear infinite}
+    @keyframes cpv-spin{to{transform:rotate(360deg)}}
+    .cpv-login-screen[data-mode=panel]{grid-template-columns:minmax(0,1fr) minmax(360px,42%);align-items:stretch;gap:clamp(24px,5vw,96px);padding:clamp(24px,4vw,64px);background:linear-gradient(90deg,#03170bc9 0%,#03170b70 42%,#03170be8 100%),url('/control-panel-assets/panel-login-bg.png') center/cover,#071a11;color:#f6fff7}
+    .cpv-login-brand{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-width:0;padding-bottom:3vh}
+    .cpv-brand-row{display:flex;align-items:baseline;gap:clamp(12px,2vw,24px);white-space:nowrap;font-size:clamp(44px,5.2vw,82px);line-height:1;font-weight:800}
+    .cpv-brand-row strong{font:inherit}
+    .cpv-brand-tagline{max-width:610px;padding-top:14px;border-top:1px solid #b6d6bb;font-size:22px}
+    .cpv-login-screen[data-mode=panel] .cpv-login-content{grid-column:2;grid-row:1;align-self:center;justify-self:center;border-left:1px solid #71c88780;padding-left:clamp(24px,4vw,64px)}
+    .cpv-login-screen[data-mode=panel] .cpv-field span{color:#d1e5d5}
+    .cpv-login-screen[data-mode=panel] input{border:1px solid #73a780;background:#092516d9;color:#fff}
+    .cpv-login-screen[data-mode=panel] input:focus-visible{outline:2px solid #35c964;outline-offset:2px}
+    .cpv-login-screen[data-mode=panel] .cpv-message{color:#ffb9b1}
+    .cpv-login-screen[data-mode=editor]{grid-template-columns:minmax(320px,45%) minmax(0,1fr);align-items:stretch;background:#f7f8f6;color:#111a13}
+    .cpv-login-screen[data-mode=editor]::after{content:'';grid-column:2;grid-row:1;min-height:100dvh;background:linear-gradient(90deg,#f7f8f640 0%,#03211015 20%),url('/control-panel-assets/panel-login-bg.png') center/cover,#082313}
+    .cpv-login-screen[data-mode=editor] .cpv-login-content{grid-column:1;grid-row:1;align-self:center;justify-self:center;padding:48px;width:min(520px,100%)}
+    .cpv-login-screen[data-mode=editor] .cpv-brand-row{margin-bottom:40px;color:#0b110d}
+    .cpv-login-screen[data-mode=editor] .cpv-brand-row strong:first-child{color:#008d35}
+    .cpv-login-screen[data-mode=editor] .cpv-login-content h1{font-size:26px}
+    .cpv-login-screen[data-mode=editor] input{border:1px solid #a8b5aa;background:#fff;color:#111a13}
+    .cpv-login-screen[data-mode=editor] input:focus-visible{outline:2px solid #008d35;outline-offset:2px}
+    .cpv-login-screen[data-mode=editor] .cpv-message{color:#a52635}
+    @media(max-width:800px){
+      .cpv-login-screen[data-mode=panel]{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:32px;min-height:100dvh;padding:28px;background-image:linear-gradient(180deg,#03170bab 0%,#03170bf0 68%),url('/control-panel-assets/panel-login-bg.png');background-position:25% center}
+      .cpv-login-brand{grid-column:1;grid-row:1;gap:8px;padding:0}.cpv-brand-row{font-size:clamp(40px,8vw,56px)}.cpv-brand-tagline{font-size:16px}
+      .cpv-login-screen[data-mode=panel] .cpv-login-content{grid-column:1;grid-row:2;justify-self:start;width:min(390px,100%);border-left:0;padding-left:0}
+      .cpv-login-screen[data-mode=editor]{grid-template-columns:1fr}
+      .cpv-login-screen[data-mode=editor]::after{display:none}
+      .cpv-login-screen[data-mode=editor] .cpv-login-content{grid-column:1;grid-row:1;width:min(480px,100%);padding:32px 24px}
+    }
+    .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 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-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}
+    .cpv-menu button:hover,.cpv-menu button:focus{background:#f1e2ff}
+    .cpv-binding-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #d3dedd}
+    .cpv-binding-details{display:flex;flex-direction:column;gap:2px;min-width:0}
+    .cpv-binding-details span{min-width:0;overflow-wrap:anywhere}.cpv-binding-path{color:#526467}
+    .cpv-binding-actions{display:flex;gap:6px;flex-shrink:0}
+    body.cpv-editing [data-cpv-bound="true"]{outline:2px solid #b526f2 !important;outline-offset:3px;box-shadow:0 0 0 4px #b526f255 !important}
+    body.cpv-editing [data-cp-auto]:hover{outline:2px solid #b526f2;outline-offset:2px}
+  `
+  document.head.append(style)
+  cleanup.push(() => style.remove())
+  if (editing) {
+    document.body.classList.add('cpv-editing')
+    cleanup.push(() => document.body.classList.remove('cpv-editing'))
+    coverPage('Loading...', 'editor')
+    request('/session').then(session => { editSession = session; return loadEditor() })
+      .then(closeLoginScreen).catch(() => loginView())
+  } else {
+    coverPage('Loading...', 'panel')
+    cleanup.push(this.$watch('boundAuthenticated', authenticated => {
+      if (authenticated) closeLoginScreen()
+      else if (!loginScreen) normalLoginView()
+    }))
+    component.restoreBoundPanelSession().then(session => {
+      if (session || component.boundAuthenticated) closeLoginScreen()
+      else normalLoginView()
+    }).catch(() => normalLoginView())
+  }
+}
+
+function disposeVisualBinding () {
+  for (const stop of this.__visualBindingCleanup || []) stop()
+  this.__visualBindingCleanup = null
+}
+
+module.exports = { initializeVisualBinding, disposeVisualBinding }