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

package/panel-meter.js

@@ -0,0 +1,213 @@
+const crypto = require('node:crypto')
+const { createMeterReceiver } = require('./meter-frame')
+const { readJsonBody, replyJson } = require('./panel-http')
+const { meterRoute } = require('./meter-route')
+
+function createMeterRoom ({ room, now = Date.now, staleMs = 1000 }) {
+  const sources = new Map(), panels = new Map()
+  const ticks = new Set()
+  let timer = null
+  let generation = 0
+
+  function attach (panelId, bindings) {
+    if (panels.has(panelId)) throw Error('Meter panel already registered')
+    const points = Object.entries(bindings).filter(([, entry]) => entry.readMeta?.meter)
+      .sort(([a], [b]) => a.localeCompare(b))
+    if (!points.length || points.length > 256) throw Error('Invalid meter panel size')
+    const proposed = new Map()
+    for (const [, binding] of points) {
+      const meter = meterRoute(binding.readMeta.meter)
+      const key = JSON.stringify([binding.device, meter.streamId])
+      const previous = sources.get(key)?.route || proposed.get(key)
+      if (previous && JSON.stringify(previous) !== JSON.stringify(meter)) throw Error('Conflicting meter stream')
+      proposed.set(key, meter)
+    }
+    const projections = points.map(([id, binding]) => {
+      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() }
+        sources.set(key, source)
+      }
+      source.refs.add(panelId)
+      return { id, binding, source, key, pointPath: binding.readPath.replace(/^\/\//, '/') }
+    })
+    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 }
+    panels.set(panelId, panel)
+    return layout
+  }
+
+  function accept (message) {
+    if (!['device-meter-frame', 'device-meter-manifest'].includes(message?.kind)) return false
+    const source = sources.get(JSON.stringify([message.device, message.streamId]))
+    if (!source || message.path !== (message.kind === 'device-meter-frame'
+      ? source.route.eventPath : source.route.manifestPath)) return false
+    let data = message.payload
+    // AMX Event emits its arguments object; Status emits the string directly.
+    if (data && typeof data === 'object' && Object.hasOwn(data, 'data')) data = data.data
+    if (typeof data === 'string') {
+      if (Buffer.byteLength(data) > 131072) return false
+      try { data = JSON.parse(data) } catch (_) { return false }
+    }
+    if (message.kind === 'device-meter-manifest') {
+      let receiver
+      try { receiver = createMeterReceiver(data) } catch (_) { return false }
+      if (receiver.manifest.streamId !== source.route.streamId) return false
+      const previous = source.receiver?.manifest
+      if (previous && JSON.stringify(previous) === JSON.stringify(receiver.manifest)) return true
+      if (previous?.epoch === receiver.manifest.epoch &&
+        receiver.manifest.layoutVersion <= previous.layoutVersion) return false
+      source.receiver?.close()
+      source.receiver = receiver
+      source.indices = new Map(receiver.manifest.points.map((point, index) => [point.path, index]))
+      source.receivedAt = null
+    } else {
+      if (!source.receiver?.accept(data)) return false
+      source.receivedAt = now()
+    }
+    source.revision = ++generation
+    return true
+  }
+
+  function snapshot (panelId) {
+    const panel = panels.get(panelId)
+    if (!panel) return null
+    const time = now(), values = [], valid = [], versions = new Map()
+    for (const { binding, source, key, pointPath } of panel.projections) {
+      const manifest = source.receiver?.manifest
+      const frame = source.receiver?.snapshot()
+      const index = source.indices.get(pointPath)
+      const point = manifest?.points[index]
+      const age = source.receivedAt === null ? null : Math.max(0, time - source.receivedAt)
+      const matches = point && point.type === binding.readMeta.type && point.min === binding.readMeta.min &&
+        point.max === binding.readMeta.max && point.unit === (binding.readMeta.unit || '')
+      const flag = Boolean(matches && frame?.valid[index] && age !== null && age <= staleMs)
+      values.push(flag ? frame.values[index] : null)
+      valid.push(flag)
+      versions.set(key, { device: source.device, streamId: source.route.streamId,
+        epoch: manifest?.epoch || '', seq: frame?.seq || 0, sampleTime: frame?.sampleTime ?? null, ageMs: age })
+    }
+    return { kind: 'room-meter-frame', panelId, room, epoch: panel.layout.epoch,
+      seq: ++panel.sequence, values, valid, sources: [...versions.values()] }
+  }
+
+  function revision (panelId) {
+    const panel = panels.get(panelId)
+    if (!panel) return ''
+    const time = now()
+    return panel.projections.map(({ source }) => `${source.revision}:${source.receivedAt !== null &&
+      time - source.receivedAt <= staleMs}`).join(',')
+  }
+
+  function detach (panelId) {
+    const panel = panels.get(panelId)
+    if (!panel) return
+    panels.delete(panelId)
+    for (const { source, key } of panel.projections) {
+      source.refs.delete(panelId)
+      if (!source.refs.size) { source.receiver?.close(); sources.delete(key) }
+    }
+  }
+
+  return { attach, accept, snapshot, revision, detach,
+    onTick (callback) {
+      ticks.add(callback)
+      if (!timer) { timer = setInterval(() => { for (const tick of ticks) tick() }, 1000 / 30); timer.unref?.() }
+      return () => {
+        ticks.delete(callback)
+        if (!ticks.size) { clearInterval(timer); timer = null }
+      }
+    },
+    stats: () => ({ panels: panels.size, sources: sources.size }) }
+}
+
+function createPanelMeter ({ panelId, room, bindings, hub, onSubscribe = () => {} }) {
+  const layout = hub.attach(panelId, bindings)
+  const tickets = new Map(), subscribers = new Map()
+  let closed = false, lastRevision = ''
+  const remove = socketId => {
+    const entry = subscribers.get(socketId)
+    if (entry) entry.socket.off('disconnect', entry.disconnect)
+    subscribers.delete(socketId)
+  }
+  const live = entry => entry.active() && entry.socket.connected
+  const emitFrame = (socket, frame) => socket.volatile.emit('control-panel:meter-frame', frame)
+  const prune = () => {
+    for (const [key, entry] of tickets) if (entry.expiry <= Date.now() || !entry.active()) tickets.delete(key)
+    for (const [key, entry] of subscribers) if (!live(entry)) {
+      entry.socket.emit('control-panel:meter-ended', { panelId })
+      remove(key)
+    }
+  }
+  const stopTick = hub.onTick(() => {
+    prune()
+    if (closed || !subscribers.size) return
+    const revision = hub.revision(panelId)
+    if (revision === lastRevision) return
+    lastRevision = revision
+    const frame = hub.snapshot(panelId)
+    for (const { socket } of subscribers.values()) emitFrame(socket, frame)
+  })
+
+  return {
+    async ticket (req, res, identity, active) {
+      if (!new URL(req.url, 'http://localhost').pathname.endsWith('/meter-ticket') || req.method !== 'POST') return false
+      if (closed) { replyJson(res, 503, { error: 'Meter channel unavailable' }); return true }
+      prune()
+      const body = await readJsonBody(req, 4096)
+      if (body.room !== room || typeof body.socketId !== 'string' || !body.socketId || body.socketId.length > 128) {
+        replyJson(res, 403, { error: 'Meter subscription rejected' }); return true
+      }
+      if (!req.headers.origin) { replyJson(res, 403, { error: 'Meter subscription needs Origin' }); return true }
+      // One outstanding ticket per session and socket keeps retrying clients bounded.
+      for (const [key, entry] of tickets) if (entry.token === identity.token && entry.socketId === body.socketId) tickets.delete(key)
+      if (tickets.size >= 100) { replyJson(res, 429, { error: 'Meter ticket limit reached' }); return true }
+      const ticket = crypto.randomBytes(32).toString('hex')
+      tickets.set(ticket, { token: identity.token, socketId: body.socketId,
+        expiry: Math.min(identity.expiry, Date.now() + 10000), active })
+      replyJson(res, 200, { ticket })
+      return true
+    },
+    hooks: {
+      'control-panel:meter-subscribe': (socket, id, ticket) => {
+        if (id !== panelId || closed) return
+        prune()
+        const entry = tickets.get(ticket)
+        tickets.delete(ticket)
+        if (!entry || !entry.active() || entry.expiry <= Date.now() || entry.socketId !== socket.id || !socket.connected ||
+          (!subscribers.has(socket.id) && subscribers.size >= 100)) {
+          socket.emit('control-panel:meter-ended', { panelId }); return
+        }
+        remove(socket.id)
+        const disconnect = () => remove(socket.id)
+        subscribers.set(socket.id, { socket, active: entry.active, disconnect })
+        socket.on('disconnect', disconnect)
+        socket.emit('control-panel:meter-ready', layout)
+        const initial = hub.snapshot(panelId)
+        emitFrame(socket, initial)
+        onSubscribe()
+      },
+      'control-panel:meter-unsubscribe': (socket, id) => { if (id === panelId) remove(socket.id) }
+    },
+    accept: message => !closed && hub.accept(message),
+    stats: () => ({ tickets: tickets.size, subscribers: subscribers.size, ...hub.stats() }),
+    close () {
+      closed = true
+      stopTick()
+      tickets.clear()
+      for (const entry of subscribers.values()) {
+        entry.socket.emit('control-panel:meter-ended', { panelId })
+        entry.socket.off('disconnect', entry.disconnect)
+      }
+      subscribers.clear()
+      hub.detach(panelId)
+    }
+  }
+}
+
+module.exports = { createMeterRoom, createPanelMeter }

package/panel-template-instrumentation.js

@@ -1,5 +1,5 @@
 const crypto = require('node:crypto')
-const { parse } = require('@vue/compiler-sfc')
+const { parse, compileTemplate } = require('@vue/compiler-sfc')
 
 const hash = value => crypto.createHash('sha256').update(value).digest('hex').slice(0, 20)
 const COMPONENT_ADAPTERS = Object.freeze({
@@ -8,6 +8,14 @@ const COMPONENT_ADAPTERS = Object.freeze({
   'v-text-field': 'text-input', 'v-textarea': 'text-input',
   'v-progress-linear': 'meter', 'v-progress-circular': 'meter'
 })
+const SIMPLE_IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/
+const SIMPLE_PROPERTY_PATH = /^[A-Za-z_$][A-Za-z0-9_$]*(?:\.[A-Za-z_$][A-Za-z0-9_$]*)*$/
+const UNSAFE_PROPERTY_NAMES = new Set(['__proto__', 'prototype', 'constructor'])
+
+function safePropertyPath (value) {
+  return SIMPLE_PROPERTY_PATH.test(value) &&
+    value.split('.').every(part => !UNSAFE_PROPERTY_NAMES.has(part))
+}
 
 function attribute (node, name) {
   const prop = (node.props || []).find(item => item.type === 6 && item.name === name)
@@ -78,38 +86,139 @@ function staticNumericProp (node, name) {
   return { value: numeric, dynamic: !Number.isFinite(numeric) }
 }
 
-function displayModel (node) {
+function repeatModelInfo (expression, repeat) {
+  const model = String(expression || '').trim()
+  if (SIMPLE_IDENTIFIER.test(model)) return { valid: true, repeatModel: null }
+  if (!repeat?.valid) return { valid: false, repeatModel: null }
+  const indexedPrefix = repeat.index ? `${repeat.source}[${repeat.index}].` : ''
+  if (indexedPrefix && model.startsWith(indexedPrefix)) {
+    const field = model.slice(indexedPrefix.length)
+    if (safePropertyPath(field)) {
+      return { valid: true, repeatModel: { kind: 'source-index-property', field } }
+    }
+  }
+  if (repeat.kind === 'item') {
+    const escaped = repeat.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const match = model.match(new RegExp('^' + escaped + '\\.' +
+      '(' + SIMPLE_PROPERTY_PATH.source.slice(1, -1) + ')$'))
+    return match && safePropertyPath(match[1])
+      ? { valid: true, repeatModel: { kind: 'item-property', field: match[1] } }
+      : { valid: false, repeatModel: null }
+  }
+  return model === `${repeat.source}[${repeat.index}]`
+    ? { valid: true, repeatModel: { kind: 'array-index' } }
+    : { valid: false, repeatModel: null }
+}
+
+function displayModel (node, repeat) {
   const dynamic = (node.children || []).filter(child => child.type === 5)
   if (!dynamic.length) return { model: '', valid: true }
   const expression = dynamic.length === 1 ? dynamic[0].content?.content?.trim() : ''
-  return { model: expression, valid: /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(expression) }
+  return { model: expression, ...repeatModelInfo(expression, repeat) }
 }
 
-function inputModel (node, allowNumber = false) {
+function inputModel (node, allowNumber = false, repeat) {
   const directive = (node.props || []).find(prop => prop.type === 7 && prop.name === 'model')
   if (!directive) return { model: '', valid: true }
   const model = directive.exp?.content?.trim() || ''
   const modifiers = (directive.modifiers || []).map(item => typeof item === 'string' ? item : item.content)
-  return { model, valid: !directive.arg && modifiers.every(item => allowNumber && item === 'number') &&
-    /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(model) }
+  const info = repeatModelInfo(model, repeat)
+  return { model, repeatModel: info.repeatModel,
+    valid: !directive.arg && modifiers.every(item => allowNumber && item === 'number') && info.valid }
 }
 
-function progressModel (node) {
+function progressModel (node, repeat) {
   const bound = (node.props || []).find(prop => prop.type === 7 && prop.name === 'bind' &&
     ['model-value', 'modelValue'].includes(prop.arg?.content))
-  if (!bound) return inputModel(node)
+  if (!bound) return inputModel(node, false, repeat)
   const model = bound.exp?.content?.trim() || ''
-  return { model, valid: !hasDirective(node, ['model']) && !bound.modifiers?.length &&
-    /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(model) }
+  const info = repeatModelInfo(model, repeat)
+  return { model, repeatModel: info.repeatModel,
+    valid: !hasDirective(node, ['model']) && !bound.modifiers?.length && info.valid }
 }
 
-function pressedModel (node) {
+function nativeMeterModel (node, repeat) {
+  const modelDirective = (node.props || []).find(prop => prop.type === 7 && prop.name === 'model')
+  if (modelDirective) {
+    const model = modelDirective.exp?.content?.trim() || ''
+    const info = repeatModelInfo(model, repeat)
+    return { model, repeatModel: info.repeatModel,
+      valid: !modelDirective.arg && !modelDirective.modifiers?.length && info.valid }
+  }
+  const bound = (node.props || []).find(prop => prop.type === 7 && prop.name === 'bind' &&
+    prop.arg?.content === 'value')
+  if (!bound) return { model: '', valid: true }
+  const model = bound.exp?.content?.trim() || ''
+  const info = repeatModelInfo(model, repeat)
+  return { model, repeatModel: info.repeatModel,
+    valid: !bound.modifiers?.length && info.valid }
+}
+
+function repeatDescriptor (node) {
+  const directive = (node.props || []).find(prop => prop.type === 7 && prop.name === 'for')
+  if (!directive) return null
+  const parsed = directive.forParseResult
+  const source = parsed?.source?.content?.trim() || ''
+  const value = parsed?.value?.content?.trim() || ''
+  const index = parsed?.key?.content?.trim() || ''
+  const keyProp = (node.props || []).find(prop => prop.type === 7 && prop.name === 'bind' &&
+    prop.arg?.content === 'key' && !prop.modifiers?.length)
+  const key = keyProp?.exp?.content?.trim() || ''
+  const locator = `repeat:${hash(`${node.tag}:${node.loc.start.offset}:${directive.exp?.content || ''}`)}`
+  let kind = ''
+  let reason = ''
+  if (!SIMPLE_IDENTIFIER.test(source)) reason = 'v-for source must be one top-level array field'
+  else if (!SIMPLE_IDENTIFIER.test(value)) reason = 'v-for item alias must be a simple identifier'
+  else if (index && !SIMPLE_IDENTIFIER.test(index)) reason = 'v-for index alias must be a simple identifier'
+  else if (!key) reason = 'Repeated controls need a stable :key'
+  else if (key === `${value}.id`) kind = 'item'
+  else if (index && key === index) kind = 'array'
+  else reason = index
+    ? 'Object lists need :key="item.id" or array lists need :key="index"'
+    : 'Item v-for bindings require :key="item.id"'
+  return { locator, source, value, ...(index ? { index } : {}), key, kind,
+    markerOnControl: node.tag.toLowerCase() === 'template',
+    valid: !reason, ...(reason ? { reason } : {}) }
+}
+
+function normalizeMeterVModels (format) {
+  const parsed = parse(format, { filename: 'ControlPanel.vue' })
+  if (parsed.errors.length || !parsed.descriptor.template?.ast) return format
+  const replacements = []
+  function visit (node) {
+    if (node.type === 1 && ['meter', 'progress'].includes(node.tag.toLowerCase())) {
+      const model = (node.props || []).find(prop => prop.type === 7 && prop.name === 'model')
+      if (model) {
+        const expression = model.exp?.content?.trim() || ''
+        if (model.arg || model.modifiers?.length || !/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(expression)) {
+          throw new Error('Native meter/progress v-model must be a simple top-level field without modifiers')
+        }
+        if ((node.props || []).some(prop => prop.type === 7 && prop.name === 'bind' &&
+          prop.arg?.content === 'value')) {
+          throw new Error('Native meter/progress v-model cannot be combined with :value')
+        }
+        replacements.push({ start: model.loc.start.offset, end: model.loc.end.offset,
+          value: `:value="${expression}"` })
+      }
+    }
+    for (const child of node.children || []) visit(child)
+  }
+  visit(parsed.descriptor.template.ast)
+  let normalized = format
+  for (const replacement of replacements.reverse()) {
+    normalized = normalized.slice(0, replacement.start) + replacement.value + normalized.slice(replacement.end)
+  }
+  return normalized
+}
+
+function pressedModel (node, repeat) {
   const directive = (node.props || []).find(prop => prop.type === 7 && prop.name === 'bind' &&
     ['aria-pressed', 'aria-checked'].includes(prop.arg?.content))
   if (!directive) return { model: '', valid: true }
   const model = directive.exp?.content?.trim() || ''
+  const info = repeatModelInfo(model, repeat)
   return { model, valid: !directive.modifiers?.length &&
-    /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(model) }
+    info.valid, repeatModel: info.repeatModel }
 }
 
 function openingTagEnd (source, start) {
@@ -130,15 +239,37 @@ function inspectTemplate (format) {
   }
   const { descriptor, errors } = parse(format, { filename: 'ControlPanel.vue' })
   if (errors.length) throw new Error('Invalid ControlPanel template: ' + errors[0].message)
+  // Parsing alone accepts directives that Vue cannot render (for example meter v-model).
+  if (descriptor.template) {
+    const normalized = normalizeMeterVModels(format)
+    const normalizedDescriptor = parse(normalized, { filename: 'ControlPanel.vue' }).descriptor
+    const compiled = compileTemplate({ source: normalizedDescriptor.template.content,
+      filename: 'ControlPanel.vue', id: 'control-panel' })
+    if (compiled.errors.length) {
+      const error = compiled.errors[0]
+      const line = error.loc?.start?.line
+      const location = line ? ` at line ${line + descriptor.template.loc.start.line - 1}` : ''
+      throw new Error(`Invalid ControlPanel template${location}: ${error.message || error}`)
+    }
+  }
   const candidates = []
   const counts = new Map()
+  const repeatMarkers = []
 
-  function visit (node, repeated = false) {
+  function visit (node, repeatContext = null) {
     if (node.type === 1) {
       if (node.tag.toLowerCase().startsWith('v-') && node.isSelfClosing) {
         throw new Error(`Vuetify component <${node.tag}> needs an explicit closing tag in Dashboard templates`)
       }
-      const insideRepeat = repeated || hasDirective(node, ['for'])
+      const ownRepeat = repeatDescriptor(node)
+      const activeRepeat = ownRepeat
+        ? repeatContext ? { ...ownRepeat, valid: false, reason: 'Nested v-for bindings are not supported' } : ownRepeat
+        : repeatContext
+      const insideRepeat = Boolean(activeRepeat)
+      if (ownRepeat?.valid && !repeatContext && !ownRepeat.markerOnControl) {
+        repeatMarkers.push({ offset: openingTagEnd(format, node.loc.start.offset),
+          locator: ownRepeat.locator, key: ownRepeat.key })
+      }
       const adapter = candidateAdapter(node)
       const customAttribute = (node.props || []).some(prop =>
         (prop.type === 6 && prop.name.startsWith('data-cp-')) ||
@@ -147,11 +278,12 @@ function inspectTemplate (format) {
       if (adapter) {
         const component = COMPONENT_ADAPTERS[node.tag.toLowerCase()] ? node.tag.toLowerCase() : ''
         const display = adapter === 'text-display'
-          ? displayModel(node)
-          : ['v-progress-linear', 'v-progress-circular'].includes(component) ? progressModel(node)
+          ? displayModel(node, activeRepeat)
+          : ['v-progress-linear', 'v-progress-circular'].includes(component) ? progressModel(node, activeRepeat)
+          : adapter === 'meter' && !component ? nativeMeterModel(node, activeRepeat)
           : adapter === 'switch' && node.tag.toLowerCase() === 'button'
-            ? pressedModel(node)
-            : inputModel(node, adapter === 'range' || adapter === 'select')
+            ? pressedModel(node, activeRepeat)
+            : inputModel(node, adapter === 'range' || adapter === 'select', activeRepeat)
         const source = format.slice(node.loc.start.offset, openingTagEnd(format, node.loc.start.offset) + 1)
         const stableName = attribute(node, 'id') || attribute(node, 'name')
         const locator = stableName
@@ -161,6 +293,7 @@ function inspectTemplate (format) {
         const explicitLogic = hasDirective(node, ['on']) ||
           (node.props || []).some(prop => prop.type === 7 && prop.name === 'bind' &&
             ['value', 'checked', 'model-value', 'modelValue'].includes(prop.arg?.content) &&
+            !(adapter === 'meter' && !component && prop.arg?.content === 'value') &&
             !(['v-progress-linear', 'v-progress-circular'].includes(component) &&
               ['model-value', 'modelValue'].includes(prop.arg?.content)))
         const nestedLogic = component === 'v-radio-group' && hasNestedHandlers(node)
@@ -170,7 +303,7 @@ function inspectTemplate (format) {
         const max = staticNumericProp(node, 'max')
         const step = staticNumericProp(node, 'step')
         const dynamicBounds = (adapter === 'range' && (min.dynamic || max.dynamic || step.dynamic)) ||
-          (component === 'v-progress-linear' && max.dynamic)
+          (adapter === 'meter' && (min.dynamic || max.dynamic))
         const invalidSliderBounds = component === 'v-slider' &&
           ((min.value ?? 0) >= (max.value ?? 100) ||
             (step.value !== undefined && step.value <= 0) || attribute(node, 'step') === 'any')
@@ -194,6 +327,7 @@ function inspectTemplate (format) {
         const candidate = {
           locator, adapter,
           ...(component ? { component } : {}),
+          ...(activeRepeat ? { repeat: activeRepeat } : {}),
           label: attribute(node, 'aria-label') || attribute(node, 'label') || attribute(node, 'title') ||
             stableName || display.model || (adapter === 'text-display' ? node.children[0]?.content?.trim() : '') || node.tag,
           ...(display.model ? { model: display.model } : {}),
@@ -209,12 +343,12 @@ function inspectTemplate (format) {
           } : {}),
           ...(attribute(node, 'data-unit') ? { unit: attribute(node, 'data-unit') } : {}),
           line: node.loc.start.line,
-          supported: !insideRepeat && !explicitLogic && display.valid && !dynamicBounds &&
+          supported: (!insideRepeat || Boolean(activeRepeat.valid && display.valid)) && !explicitLogic && display.valid && !dynamicBounds &&
             !invalidSliderBounds &&
             !customSwitchValues && !unsupportedSelect && !unsupportedRadio &&
             !unsupportedTextType && !unsupportedProgress && !unsupportedCircular &&
             (!component || Boolean(display.model)),
-          reason: insideRepeat ? 'Repeated controls need a stable item identity' :
+          reason: insideRepeat && !activeRepeat.valid ? activeRepeat.reason :
             explicitLogic ? 'Controls with existing handlers or reactive value bindings need a dedicated adapter' :
               !display.valid ? (adapter === 'text-display' ? 'Dynamic text needs one writable data field' :
                 'Only a simple Vue v-model field is supported') :
@@ -231,11 +365,11 @@ function inspectTemplate (format) {
         candidates.push({ ...candidate, offset: openingTagEnd(format, node.loc.start.offset) })
         counts.set(locator, (counts.get(locator) || 0) + 1)
       }
-      for (const child of node.children || []) visit(child, insideRepeat)
+      for (const child of node.children || []) visit(child, activeRepeat)
       return
     }
-    for (const child of node.children || []) visit(child, repeated)
-    for (const branch of node.branches || []) visit(branch, repeated)
+    for (const child of node.children || []) visit(child, repeatContext)
+    for (const branch of node.branches || []) visit(branch, repeatContext)
   }
 
   if (descriptor.template?.ast) visit(descriptor.template.ast)
@@ -245,23 +379,39 @@ function inspectTemplate (format) {
       candidate.reason = 'This element is ambiguous; give it a unique HTML id or name'
     }
   }
-  return { candidates, templateHash: hash(format) }
+  return { candidates, repeatMarkers, templateHash: hash(format) }
 }
 
 function instrumentTemplate (format) {
   const inspected = inspectTemplate(format)
   let rendered = format
-  for (const candidate of [...inspected.candidates].reverse()) {
-    const before = rendered.slice(0, candidate.offset)
+  const insertions = new Map()
+  const addInsertion = (offset, value) => {
+    const list = insertions.get(offset) || []
+    list.push(value)
+    insertions.set(offset, list)
+  }
+  for (const candidate of inspected.candidates) {
+    addInsertion(candidate.offset, `data-cp-auto="${candidate.locator}"`)
+    if (candidate.repeat?.markerOnControl) {
+      addInsertion(candidate.offset,
+        `data-cp-repeat="${candidate.repeat.locator}" :data-cp-repeat-key="String(${candidate.repeat.key})"`)
+    }
+  }
+  for (const marker of inspected.repeatMarkers) {
+    addInsertion(marker.offset, `data-cp-repeat="${marker.locator}" :data-cp-repeat-key="String(${marker.key})"`)
+  }
+  for (const [offset, attributes] of [...insertions.entries()].sort((a, b) => b[0] - a[0])) {
+    const before = rendered.slice(0, offset)
     const selfClosing = /\/\s*$/.test(before)
-    const insertAt = selfClosing ? before.lastIndexOf('/') : candidate.offset
-    rendered = rendered.slice(0, insertAt) + ` data-cp-auto="${candidate.locator}"` + rendered.slice(insertAt)
+    const insertAt = selfClosing ? before.lastIndexOf('/') : offset
+    rendered = rendered.slice(0, insertAt) + ' ' + attributes.join(' ') + rendered.slice(insertAt)
   }
   return {
-    format: rendered,
+    format: normalizeMeterVModels(rendered),
     candidates: inspected.candidates.map(({ offset, ...candidate }) => candidate),
     templateHash: inspected.templateHash
   }
 }
 
-module.exports = { inspectTemplate, instrumentTemplate }
+module.exports = { inspectTemplate, instrumentTemplate, normalizeMeterVModels }

package/panel-visual-apply.js

@@ -82,7 +82,7 @@ async function applyVisualBindings ({
   }
 
   const devices = await listCatalogDevices(catalogBase, fetcher)
-  if (!Array.isArray(entries) || entries.length > 100) throw conflict('Invalid binding draft')
+  if (!Array.isArray(entries) || entries.length > 256) throw conflict('Invalid binding draft')
   const deviceIds = [...new Set(entries.map(entry => entry?.device))]
   for (const id of deviceIds) {
     if (!devices.some(device => device.id === id && device.online)) {

package/panel-visual-bindings.js

@@ -1,9 +1,22 @@
 const { inspectTemplate } = require('./panel-template-instrumentation')
 const { compatibleTarget, controlTypeForAdapter, targetMeta } = require('./control-type-model')
+const { meterRoute } = require('./meter-route')
 
 const ID = /^[A-Za-z][A-Za-z0-9._/-]{0,127}$/
+const INSTANCE_KEY = /^[A-Za-z0-9._:/-]{1,160}$/
 const MODES = new Set(['read', 'write', 'both'])
 
+function targetKey (candidate, entry) {
+  if (!candidate.repeat) return candidate.locator
+  if (typeof entry.instanceKey !== 'string' || !INSTANCE_KEY.test(entry.instanceKey)) {
+    throw new Error('Repeated visual controls need a stable instance key')
+  }
+  if (candidate.repeat.kind === 'array' && !/^(0|[1-9][0-9]*)$/.test(entry.instanceKey)) {
+    throw new Error('Array repeated controls need a non-negative integer instance key')
+  }
+  return `${candidate.locator}#${entry.instanceKey}`
+}
+
 function parseVisualBindings (config) {
   let raw = config.visualBindings || '{}'
   if (typeof raw === 'string') raw = JSON.parse(raw)
@@ -25,15 +38,24 @@ function visualRoutes (config) {
     if (!candidate || candidate.adapter !== entry.adapter) {
       throw new Error(`Visual control moved or became ambiguous: ${id}`)
     }
-    if (usedLocators.has(entry.locator)) throw new Error(`Duplicate visual control locator: ${id}`)
-    usedLocators.add(entry.locator)
+    const bindingKey = targetKey(candidate, entry)
+    if (usedLocators.has(bindingKey)) throw new Error(`Duplicate visual control locator: ${id}`)
+    usedLocators.add(bindingKey)
     if (!MODES.has(entry.mode) || !entry.type || !entry.label ||
       (['meter', 'text-display'].includes(entry.adapter) && entry.mode !== 'read')) {
       throw new Error(`Invalid visual binding settings: ${id}`)
     }
+    if (entry.readMeta?.meter) {
+      meterRoute(entry.readMeta.meter)
+      if (entry.adapter !== 'meter' || entry.mode !== 'read' || entry.readMeta.access !== 'ro' ||
+        !['integer', 'float'].includes(entry.readMeta.type) ||
+        !Number.isFinite(entry.readMeta.min) || !Number.isFinite(entry.readMeta.max) ||
+        entry.readMeta.min >= entry.readMeta.max) throw Error(`Invalid meter binding: ${id}`)
+    }
     routes.set(id, {
       control: { id, type: entry.type, mode: entry.mode, label: entry.label,
-        adapter: entry.adapter, locator: entry.locator },
+        adapter: entry.adapter, locator: entry.locator,
+        ...(candidate.repeat ? { instanceKey: entry.instanceKey } : {}) },
       binding: entry
     })
   }
@@ -41,20 +63,22 @@ function visualRoutes (config) {
 }
 
 function validatedVisualBindings ({ format, entries, devices, targetsByDevice }) {
-  if (!Array.isArray(entries) || entries.length > 100) throw new Error('At most 100 visual bindings are supported')
+  if (!Array.isArray(entries) || entries.length > 256) throw new Error('At most 256 visual bindings are supported')
   const candidates = new Map(inspectTemplate(format).candidates
     .filter(item => item.supported).map(item => [item.locator, item]))
   const knownDevices = new Map(devices.map(device => [device.id, device]))
   const result = Object.create(null)
   const used = new Set()
   const usedLocators = new Set()
+  const models = new Map()
   for (const raw of entries) {
     if (!raw || !ID.test(raw.id) || used.has(raw.id)) throw new Error('Control IDs must be unique and valid')
     used.add(raw.id)
     const candidate = candidates.get(raw.locator)
     if (!candidate || candidate.adapter !== raw.adapter) throw new Error(`Control changed: ${raw.id}`)
-    if (usedLocators.has(raw.locator)) throw new Error(`One element cannot have two bindings: ${raw.id}`)
-    usedLocators.add(raw.locator)
+    const bindingKey = targetKey(candidate, raw)
+    if (usedLocators.has(bindingKey)) throw new Error(`One element cannot have two bindings: ${raw.id}`)
+    usedLocators.add(bindingKey)
     if (!MODES.has(raw.mode) || (['meter', 'text-display'].includes(raw.adapter) && raw.mode !== 'read')) {
       throw new Error(`Invalid binding mode: ${raw.id}`)
     }
@@ -77,9 +101,22 @@ function validatedVisualBindings ({ format, entries, devices, targetsByDevice })
     }
     const target = write || read
     const type = controlTypeForAdapter(raw.adapter, target)
+    if (read?.meter && (!Number.isFinite(read.min) || !Number.isFinite(read.max) || read.min >= read.max)) {
+      throw Error(`Meter needs a finite device range: ${raw.id}`)
+    }
+    if (candidate.model) {
+      const identity = JSON.stringify([raw.device, read?.path, write?.path])
+      const modelKey = candidate.repeat ? `${candidate.model}#${raw.instanceKey}` : candidate.model
+      const previous = models.get(modelKey)
+      if (previous && (read?.meter || previous.meter) && previous.identity !== identity) {
+        throw Error(`Meter model "${candidate.model}" is already used by another binding; use a separate Vue model for the meter. Meter and volume controls must not share a model`)
+      }
+      models.set(modelKey, { identity, meter: Boolean(read?.meter) })
+    }
     result[raw.id] = {
       locator: raw.locator, adapter: raw.adapter, type, label: raw.label.trim(), mode: raw.mode,
       ...(candidate.model ? { model: candidate.model } : {}),
+      ...(candidate.repeat ? { repeat: candidate.repeat, instanceKey: raw.instanceKey } : {}),
       ...(candidate.component ? { component: candidate.component } : {}),
       ...(['range', 'meter'].includes(raw.adapter)
         ? { uiRange: { min: candidate.min, max: candidate.max, step: candidate.step } } : {}),