Requires: ${cleaned}

` } // Find description cell (prefer .description-col) let descTd = null for (let td of tds) { if (td.classList && td.classList.contains('description-col')) { descTd = td break } } if (!descTd) descTd = tds[2] || tds[1] if (descTd && requiresHtml) { const wrap = document.createElement('div') wrap.innerHTML = requiresHtml const metaDiv = wrap.firstElementChild const oldMeta = descTd.querySelector('.ps-metadata') if (oldMeta) oldMeta.remove() descTd.insertBefore(metaDiv, descTd.firstChild) descTd.insertBefore(document.createElement('br'), metaDiv.nextSibling) } } }) if (reqIdx !== -1) ths[reqIdx].style.display = 'none' table.querySelectorAll('tbody tr').forEach(tr => { const tds = tr.children if (reqIdx !== -1 && tds[reqIdx]) tds[reqIdx].style.display = 'none' }) // =============== Hide "Value" column if present =============== let optionIdx = -1 let valueIdx = -1 ths.forEach((th, i) => { if (th.textContent.trim().startsWith('Option')) optionIdx = i if (th.textContent.trim().startsWith('Value')) valueIdx = i }) if (valueIdx !== -1) ths[valueIdx].style.display = 'none' table.querySelectorAll('tbody tr').forEach(tr => { const tds = tr.children if (valueIdx !== -1 && tds[valueIdx]) tds[valueIdx].style.display = 'none' }) // =============== Helpers =============== function parsePre (row, cls) { const pre = row.querySelector('pre.' + cls) if (!pre) return null try { return JSON.parse(pre.textContent) } catch { return null } } // Symbol to indicate an external/unresolvable attribute reference const UNRESOLVABLE = Symbol('UNRESOLVABLE') function getAttrValue (attr, stateObj) { // Handle dot-notation like "policySet.region" if (attr && attr.includes('.')) { const parts = attr.split('.') let current = stateObj for (const part of parts) { if (current === undefined || current === null) { // Path doesn't exist - unresolvable return UNRESOLVABLE } if (typeof current !== 'object') { // Parent exists but is not an object (e.g., policySet is a string ID) // This is an external reference that can't be resolved from table data return UNRESOLVABLE } current = current[part] } return current } return stateObj[attr] } function evalVisible (visible, stateObj) { if (!visible) return true const v = visible.if if (!v) return true // Global-scope conditions reference external data (e.g. modulesOnContract) // not available in the table; assume fulfilled if (v.scope === 'global') return true // Supported ops: eq, neq, in, not, and, or, contains, type // "type" checks the runtime data-type of a value (e.g. ipv4_address); // we can't determine this from table data, so assume fulfilled. if (v.op === 'type') return true if (v.op === 'not') { const inner = v.expression || (v.params && v.params[0]) if (!inner) return true return !evalVisible({ if: inner }, stateObj) } if (v.op === 'eq') { const val = getAttrValue(v.attribute, stateObj) // If attribute is unresolvable (external reference), assume condition is fulfilled if (val === UNRESOLVABLE) return true return val == v.value } if (v.op === 'neq') { const val = getAttrValue(v.attribute, stateObj) if (val === UNRESOLVABLE) return true return val != v.value } if (v.op === 'in') { const val = getAttrValue(v.attribute, stateObj) if (val === UNRESOLVABLE) return true const arr = v.value || [] return arr.includes(val) } if (v.op === 'contains') { const val = getAttrValue(v.attribute, stateObj) // Contains typically checks if array contains value; if unresolvable, assume fulfilled if (val === UNRESOLVABLE) return true if (Array.isArray(val)) return val.includes(v.value) return false } if (v.op === 'or') return (v.params || []).some(p => evalVisible({ if: p }, stateObj)) if (v.op === 'and') return (v.params || []).every(p => evalVisible({ if: p }, stateObj)) return true // Fallback for unhandled ops } function parseValueByType (type, value) { if (type === 'integer' || type === 'number') { if (value === '' || value === undefined) return undefined const n = Number(value) return isNaN(n) ? value : n } if (type === 'boolean') return value === 'true' || value === true return value } function readTextArray (container) { const arr = [] container.querySelectorAll('input[type="text"]').forEach(inp => { const v = inp.value.trim() if (v !== '') arr.push(v) }) return arr.length ? arr : undefined } // =============== Collect rows =============== const optionRows = Array.from(table.querySelectorAll('tr.row_option, tr.preview_option')) const schemaRows = Array.from(table.querySelectorAll('tr.row_schema, tr.preview_schema')) const options = {} const objectSchemas = {} // single-object schemas const objectArrayPropDefs = {} // { parentArrayName: [{propName, inputDef, type, displayType}] } const optionsByName = {} const optionsById = {} const readOnlySchemaRows = [] // Track read-only schema rows for conditional hiding // Build map for options optionRows.forEach(row => { const id = row.id const inputDef = parsePre(row, 'input') const visibleDef = parsePre(row, 'visible') const code = row.querySelector('code') const rawName = code ? code.textContent.replace(/\u200b/g, '') : id // strip ZW chars const name = rawName const o = { row, inputDef, visibleDef, name, value: undefined, input: null } // Detect object-array property rows like: failoverOriginMap[].fromOriginId const arrMatch = name.match(/^([^.]+)\[\]\.(.+)$/) if (arrMatch) { o.isArrayProp = true o.parentArrayName = arrMatch[1] o.propName = arrMatch[2] if (!objectArrayPropDefs[o.parentArrayName]) objectArrayPropDefs[o.parentArrayName] = [] // Inspect type from the row's "Type" column - get FULL type text (e.g., "string array") const tds = row.querySelectorAll('td') let type = '' let displayType = '' if (tds[1]) { const fullTypeText = normalizeStr(tds[1].textContent) type = fullTypeText.split(' ')[0].toLowerCase() // first word for internal use displayType = fullTypeText // full text for display (e.g., "string array") } objectArrayPropDefs[o.parentArrayName].push({ propName: o.propName, inputDef, visibleDef, // Store visibility definition for filtering type, displayType // NEW: store full type for display }) // Hide this template row; we'll render inputs in entry blocks row.classList.add('hidden-row') } options[id] = o optionsById[id] = o optionsByName[name] = o // Detect parent object/object-array options if ( inputDef && (inputDef.displayType === 'object' || inputDef.displayType === 'object array') ) { if (inputDef.displayType === 'object') { objectSchemas[name] = [] o.isObject = true } else if (inputDef.displayType === 'object array') { o.isObject = true o.isObjectArray = true if (!objectArrayPropDefs[name]) objectArrayPropDefs[name] = [] // ensure bucket exists } } }) // Schema rows (for single object properties like cloudletPolicy.id) schemaRows.forEach(row => { const code = row.querySelector('code') if (!code) return const dotName = code.textContent.replace(/\u200b/g, '') const [objectName, propName] = dotName.split('.', 2) // Ignore if this is an object-array schema variant (we handle via row_option form) if (objectName.endsWith('[]')) return const tds = row.querySelectorAll('td') let type = '' if (tds[2]) type = (tds[1].textContent || '').trim().split(' ')[0].toLowerCase() const descTd = tds[2] || null const firstPara = descTd?.querySelector('p') const firstParaText = firstPara?.innerText.trim() || '' if (firstParaText.startsWith('Read-only')) { // Track read-only rows for conditional hiding (visible when empty, hidden when values exist) row._objectName = objectName row._propName = propName row._isReadOnly = true readOnlySchemaRows.push(row) return } const input = document.createElement('input') input.type = 'text' input.className = 'Input Input_sm' input.style.minWidth = '120px' input.style.display = 'block' input.style.marginTop = '4px' input.addEventListener('input', updateState) const optionTd = optionIdx !== -1 ? tds[optionIdx] : tds[0] optionTd.appendChild(input) row._objectName = objectName row._propName = propName row._input = input row._type = type if (!objectSchemas[objectName]) objectSchemas[objectName] = [] objectSchemas[objectName].push(row) }) // =============== Handle row_option sub-properties of objects (dot-notation, no inputDef) =============== // Some tables use row_option (not row_schema) for object sub-properties like firewallConfiguration.configId. // These rows have no

, so we detect them by dot-notation name and build inputs manually.
    Object.values(options).forEach(opt => {
      if (opt.inputDef) return // already has an input definition, handled later
      if (opt.isArrayProp) return // array props handled separately
      const dotIdx = opt.name.indexOf('.')
      if (dotIdx === -1) return // not a sub-property
      const objectName = opt.name.substring(0, dotIdx)
      const propName = opt.name.substring(dotIdx + 1)
      // Only process if parent is a known object
      const parentOpt = optionsByName[objectName]
      if (!parentOpt || !parentOpt.isObject) return
      // Skip if parent is an object array (those use [] notation)
      if (parentOpt.isObjectArray) return

      const tds = opt.row.querySelectorAll('td')
      let type = ''
      if (tds[1]) type = (tds[1].textContent || '').trim().split(' ')[0].toLowerCase()
      const descTd = tds[2] || null
      const firstPara = descTd?.querySelector('p')
      const firstParaText = firstPara?.innerText.trim() || ''
      if (firstParaText.startsWith('Read-only')) {
        opt.row._objectName = objectName
        opt.row._propName = propName
        opt.row._isReadOnly = true
        readOnlySchemaRows.push(opt.row)
        return
      }

      const input = document.createElement('input')
      input.type = 'text'
      input.className = 'Input Input_sm'
      input.style.minWidth = '120px'
      input.style.display = 'block'
      input.style.marginTop = '4px'
      input.addEventListener('input', updateState)
      const optionTd = optionIdx !== -1 ? tds[optionIdx] : tds[0]
      optionTd.appendChild(input)

      opt.row._objectName = objectName
      opt.row._propName = propName
      opt.row._input = input
      opt.row._type = type
      // Mark the option so the main input-building loop skips it
      opt._handledAsSchema = true

      if (!objectSchemas[objectName]) objectSchemas[objectName] = []
      objectSchemas[objectName].push(opt.row)
      // Also add to schemaRows so reset/listeners work
      schemaRows.push(opt.row)
    })

    // =============== Build inputs for option rows ===============
    Object.values(options).forEach(opt => {
      if (!opt.inputDef) return
      if (opt._handledAsSchema) return
      if (opt.isArrayProp) {
        opt.row.classList.add('hidden-row')
        return
      }

      const tds = opt.row.querySelectorAll('td')
      const optionTd = optionIdx !== -1 ? tds[optionIdx] : tds[0]
      let input

      if (opt.inputDef.displayType === 'string array') {
        const wrapper = document.createElement('div')
        wrapper.className = 'array-input-wrapper'
        wrapper.style.marginTop = '4px'
        function addField (val) {
          const div = document.createElement('div')
          div.style.display = 'flex'
          div.style.marginBottom = '2px'
          const inp = document.createElement('input')
          inp.type = 'text'
          inp.className = 'Input Input_sm'
          inp.style.minWidth = '120px'
          inp.value = val || ''
          inp.addEventListener('input', updateState)
          const btn = document.createElement('button')
          btn.type = 'button'
          btn.textContent = '−'
          btn.className = 'Button Button_xs'
          btn.style.marginLeft = '4px'
          btn.onclick = function () {
            const hadValue = inp.value.trim() !== ''
            wrapper.removeChild(div)
            if (hadValue) updateState()
          }
          div.appendChild(inp)
          div.appendChild(btn)
          const plusBtn = wrapper.querySelector('button.Button_xs:last-of-type')
          if (plusBtn && plusBtn.textContent === '+') {
            wrapper.insertBefore(div, plusBtn)
          } else {
            wrapper.appendChild(div)
          }
        }
        const addBtn = document.createElement('button')
        addBtn.type = 'button'
        addBtn.textContent = '+'
        addBtn.className = 'Button Button_xs'
        addBtn.style.marginTop = '2px'
        addBtn.onclick = function () {
          addField()
          // Don't call updateState() here - adding empty field doesn't change state
          // The input's own event listener will trigger updateState when user types
        }
        wrapper.appendChild(addBtn)
        addField()
        optionTd.appendChild(wrapper)
        opt.input = wrapper
        opt.isArray = true
      } else if (opt.inputDef.displayType === 'object array') {
        // Build object-array wrapper with + Add button; properties are hidden until clicked
        const wrapper = document.createElement('div')
        wrapper.className = 'object-array-wrapper'
        wrapper.style.marginTop = '4px'

        const addBtn = document.createElement('button')
        addBtn.type = 'button'
        addBtn.textContent = '+ Add ' + opt.name
        addBtn.className = 'Button Button_xs'
        addBtn.onclick = function () {
          addObjectArrayEntry(wrapper, opt.name)
          // IMPORTANT: do not call updateState() here; we DON'T want filtering yet
          // We only update state when a property inside the new entry is filled.
        }
        wrapper.appendChild(addBtn)

        optionTd.appendChild(wrapper)
        opt.input = wrapper
        opt.isObjectArray = true
        opt.isObject = true
      } else if (opt.inputDef.displayType === 'object') {
        opt.isObject = true // handled in schemaRows
      } else if (
        opt.inputDef.tag === 'input' &&
        opt.inputDef.type === 'checkbox'
      ) {
        // boolean -> select true/false (no default)
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '4px'
        const placeholder = document.createElement('option')
        placeholder.value = ''
        placeholder.textContent = 'Choose true/false'
        placeholder.disabled = true
        placeholder.hidden = true
        placeholder.selected = true
        sel.appendChild(placeholder)
        ;['false', 'true'].forEach(val => {
          const o = document.createElement('option')
          o.value = val
          o.textContent = val
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        optionTd.appendChild(sel)
        opt.input = sel
        opt.isBooleanSelect = true
      } else if (opt.inputDef.tag === 'select') {
        // enum -> select with placeholder
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '4px'
        const placeholder = document.createElement('option')
        placeholder.value = ''
        placeholder.textContent = 'Choose an option'
        placeholder.disabled = true
        placeholder.hidden = true
        placeholder.selected = true
        sel.appendChild(placeholder)
        ;(opt.inputDef.options || []).forEach(val => {
          const clean = normalizeStr(val)
          const o = document.createElement('option')
          o.value = clean
          o.textContent = clean
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        optionTd.appendChild(sel)
        opt.input = sel
      } else if (
        opt.inputDef.displayType === 'number' ||
        opt.inputDef.displayType === 'integer'
      ) {
        input = document.createElement('input')
        input.type = 'text'
        input.className = 'Input Input_sm'
        input.style.minWidth = '120px'
        input.style.display = 'block'
        input.style.marginTop = '4px'
        input.addEventListener('input', updateState)
        optionTd.appendChild(input)
        opt.input = input
      } else if (
        opt.inputDef.type === 'text' ||
        opt.inputDef.type === 'datetime-local'
      ) {
        input = document.createElement('input')
        input.type = 'text'
        input.className = 'Input Input_sm'
        input.style.minWidth = '120px'
        input.style.display = 'block'
        input.style.marginTop = '4px'
        input.addEventListener('input', updateState)
        optionTd.appendChild(input)
        opt.input = input
      }
    })

    // =============== Build one object-array entry (UI block with all props) ===============
    function buildArrayPropInput (def) {
      // Returns an element for one property inside object-array entry
      const wrap = document.createElement('div')
      wrap.className = 'object-array-prop'
      wrap.style.margin = '4px 0'
      wrap.dataset.prop = def.propName
      wrap.dataset.type = (def.type || '').toLowerCase()

      // NEW: Build label with type in parentheses
      const label = document.createElement('div')
      const typeDisplay = def.displayType || def.type || ''
      const typeStr = typeDisplay ? ` (${typeDisplay})` : ''
      label.textContent = def.propName + typeStr
      label.style.fontSize = '12px'
      label.style.opacity = '0.8'
      wrap.appendChild(label)

      const idf = def.inputDef || {}

      if (idf.displayType === 'string array') {
        // Nested array input (like toOriginIds)
        const arrWrap = document.createElement('div')
        arrWrap.className = 'array-input-wrapper'
        arrWrap.style.marginTop = '2px'

        function addField (val) {
          const row = document.createElement('div')
          row.style.display = 'flex'
          row.style.marginBottom = '2px'
          const inp = document.createElement('input')
          inp.type = 'text'
          inp.className = 'Input Input_sm'
          inp.style.minWidth = '120px'
          inp.value = val || ''
          inp.addEventListener('input', updateState)
          const btn = document.createElement('button')
          btn.type = 'button'
          btn.textContent = '−'
          btn.className = 'Button Button_xs'
          btn.style.marginLeft = '4px'
          btn.onclick = function () {
            const hadValue = inp.value.trim() !== ''
            arrWrap.removeChild(row)
            if (hadValue) updateState()
          }
          row.appendChild(inp)
          row.appendChild(btn)
          const plusBtn = arrWrap.querySelector('button.Button_xs:last-of-type')
          if (plusBtn && plusBtn.textContent === '+') {
            arrWrap.insertBefore(row, plusBtn)
          } else {
            arrWrap.appendChild(row)
          }
        }

        const addBtn = document.createElement('button')
        addBtn.type = 'button'
        addBtn.textContent = '+'
        addBtn.className = 'Button Button_xs'
        addBtn.style.marginTop = '2px'
        addBtn.onclick = function () {
          addField()
          // Don't call updateState() here - adding empty field doesn't change state
        }
        arrWrap.appendChild(addBtn)
        addField()

        wrap.appendChild(arrWrap)
        return wrap
      }

      if (idf.tag === 'select') {
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '2px'
        const placeholder = document.createElement('option')
        placeholder.value = ''
        placeholder.textContent = 'Choose an option'
        placeholder.disabled = true
        placeholder.hidden = true
        placeholder.selected = true
        sel.appendChild(placeholder)
        ;(idf.options || []).forEach(val => {
          const o = document.createElement('option')
          o.value = val
          o.textContent = val
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        wrap.appendChild(sel)
        return wrap
      }

      if (idf.tag === 'input' && idf.type === 'checkbox') {
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '2px'
        const ph = document.createElement('option')
        ph.value = ''
        ph.textContent = 'Choose true/false'
        ph.disabled = true
        ph.hidden = true
        ph.selected = true
        sel.appendChild(ph)
        ;['false', 'true'].forEach(v => {
          const o = document.createElement('option')
          o.value = v
          o.textContent = v
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        wrap.appendChild(sel)
        wrap.dataset.booleanSelect = '1'
        return wrap
      }

      // Numbers/integers default text with validation
      const inp = document.createElement('input')
      inp.type = 'text'
      inp.className = 'Input Input_sm'
      inp.style.minWidth = '120px'
      inp.style.display = 'block'
      inp.style.marginTop = '2px'
      inp.addEventListener('input', updateState)
      wrap.appendChild(inp)
      return wrap
    }

    // =============== Entry-level visibility for object array properties ===============
    function getEntryLocalState (entry, props) {
      // Build a local state object from values within this entry
      const localState = {}
      props.forEach(def => {
        const propWrap = entry.querySelector(`.object-array-prop[data-prop="${def.propName}"]`)
        if (!propWrap) return
        const type = (propWrap.dataset.type || '').toLowerCase()
        
        // Check for nested array
        const nestedArrWrap = propWrap.querySelector('.array-input-wrapper')
        if (nestedArrWrap) {
          const arrVal = readTextArray(nestedArrWrap)
          if (arrVal !== undefined) localState[def.propName] = arrVal
          return
        }
        
        // Check for select
        const sel = propWrap.querySelector('select')
        if (sel && sel.value !== '') {
          if (propWrap.dataset.booleanSelect === '1') {
            localState[def.propName] = sel.value === 'true'
          } else {
            localState[def.propName] = sel.value
          }
          return
        }
        
        // Check for text input
        const inp = propWrap.querySelector('input[type="text"]')
        if (inp && inp.value.trim() !== '') {
          const parsed = parseValueByType(type, inp.value.trim())
          if (parsed !== undefined && parsed !== '') {
            localState[def.propName] = parsed
          }
        }
      })
      return localState
    }
    
    function updateEntryPropVisibility (entry, props, initial) {
      // Get the current values within this entry to evaluate visibility conditions
      const localState = getEntryLocalState(entry, props)
      
      props.forEach(def => {
        const propWrap = entry.querySelector(`.object-array-prop[data-prop="${def.propName}"]`)
        if (!propWrap) return
        
        // Evaluate visibility based on local state within the entry
        let show = true
        if (!initial && def.visibleDef && def.visibleDef.if) {
          show = evalVisible(def.visibleDef, localState)
        }
        
        propWrap.style.display = show ? '' : 'none'
      })
    }

    function addObjectArrayEntry (wrapper, parentName) {
      const defs = objectArrayPropDefs[parentName] || []
      const container = document.createElement('div')
      container.className = 'object-array-entry'
      container.style.border = '1px solid #ccc'
      container.style.padding = '6px'
      container.style.margin = '6px 0'

      // Build inputs for each prop
      defs.forEach(def => {
        const el = buildArrayPropInput(def)
        container.appendChild(el)
      })

      const removeBtn = document.createElement('button')
      removeBtn.type = 'button'
      removeBtn.textContent = '− Remove'
      removeBtn.className = 'Button Button_xs'
      removeBtn.style.marginTop = '6px'
      removeBtn.onclick = function () {
        wrapper.removeChild(container)
        updateState() // removing can change state -> filtering allowed
      }
      container.appendChild(removeBtn)

      // Insert before the + Add button (which is the last child)
      wrapper.insertBefore(container, wrapper.lastChild)

      // Apply initial visibility for the new entry (show all properties initially)
      updateEntryPropVisibility(container, defs, true)
    }

    // =============== State + back-propagation (original) ===============
    let state = {}
    function findOption (attr) {
      return optionsByName[attr] || optionsById[attr] || null
    }
    function firstAllowedEnumValue (opt, forbidden) {
      const opts = (opt?.inputDef?.options || []).filter(v => v !== forbidden)
      return opts.length ? opts[0] : undefined
    }
    function getDeterministicAssignments (visibleDef) {
      // Returns array of { attribute, value|notValue, type: 'eq'|'in'|'neq' }
      const res = []
      if (!visibleDef || !visibleDef.if) return res
      const v = visibleDef.if
      function handleClause (clause) {
        if (!clause) return
        if (clause.op === 'eq')
          res.push({
            attribute: clause.attribute,
            value: clause.value,
            type: 'eq'
          })
        else if (clause.op === 'in')
          res.push({
            attribute: clause.attribute,
            value: Array.isArray(clause.value)
              ? clause.value.slice()
              : clause.value,
            type: 'in'
          })
        else if (clause.op === 'neq')
          res.push({
            attribute: clause.attribute,
            notValue: clause.value,
            type: 'neq'
          })
        else if (clause.op === 'and')
          (clause.params || []).forEach(handleClause)
        else if (clause.op === 'or') {
          const params = clause.params || []
          const alreadySatisfied = params.some(p =>
            evalVisible({ if: p }, state)
          )
          if (alreadySatisfied) return
          if (params.length > 0) handleClause(params[0])
        }
      }
      handleClause(v)
      return res
    }
    function setInputForAttribute (attr, value) {
      const opt = findOption(attr)
      if (!opt || !opt.input) {
        state[attr] = value
        return
      }
      if (opt.isBooleanSelect) opt.input.value = String(value)
      else if (opt.input.tagName === 'SELECT') opt.input.value = String(value)
      else if (opt.input.type === 'checkbox') opt.input.checked = !!value
      else opt.input.value = value == null ? '' : String(value)
      // Mirror into cached value/state immediately
      if (opt.isBooleanSelect) opt.value = opt.input.value === 'true'
      else if (opt.input.tagName === 'SELECT') opt.value = opt.input.value
      else if (opt.input.type === 'checkbox') opt.value = opt.input.checked
      else opt.value = opt.input.value
      state[opt.name] = opt.value
    }
    function chooseValueForIn (attribute, allowed) {
      const current = state[attribute]
      if (Array.isArray(allowed) && allowed.includes(current)) return current
      return Array.isArray(allowed) && allowed.length ? allowed[0] : undefined
    }
    function backPropagateFromElement (target) {
      if (!target) return
      const schemaRow = target.closest && target.closest('tr.row_schema')
      let startOpt = null
      if (schemaRow && schemaRow._objectName)
        startOpt = findOption(schemaRow._objectName)
      else {
        const optionRow = target.closest && target.closest('tr.row_option')
        if (optionRow) startOpt = options[optionRow.id]
      }
      const visited = new Set()
      let stack = startOpt ? [startOpt] : []
      while (stack.length) {
        const currentOpt = stack.pop()
        if (!currentOpt || visited.has(currentOpt.name)) continue
        visited.add(currentOpt.name)

        const assigns = getDeterministicAssignments(currentOpt.visibleDef)
        for (const a of assigns) {
          if (a.type === 'eq') {
            setInputForAttribute(a.attribute, a.value)
          } else if (a.type === 'in') {
            const picked = chooseValueForIn(a.attribute, a.value)
            if (picked !== undefined) setInputForAttribute(a.attribute, picked)
          } else if (a.type === 'neq') {
            const parentOpt = findOption(a.attribute)
            if (
              parentOpt &&
              parentOpt.input &&
              parentOpt.input.tagName === 'SELECT'
            ) {
              // Set a value if current equals forbidden OR is undefined (not set)
              const currentVal = state[a.attribute]
              if (currentVal === a.notValue || currentVal === undefined) {
                const fallback = firstAllowedEnumValue(parentOpt, a.notValue)
                if (fallback !== undefined)
                  setInputForAttribute(a.attribute, fallback)
              }
            }
          }
          const parentOpt = findOption(a.attribute)
          if (parentOpt) stack.push(parentOpt)
        }
      }
    }

    // =============== UI update ===============
    
    // FIXED: Transitive visibility check - a field is only visible if all its dependencies are also visible
    function isFullyVisible (opt, visited = new Set()) {
      if (!opt) return true
      
      // Prevent infinite recursion
      if (visited.has(opt.name)) return true
      visited.add(opt.name)
      
      // If no visibility condition, it's always visible
      if (!opt.visibleDef || !opt.visibleDef.if) return true
      
      // First check if this option's direct visibility condition is met
      if (!evalVisible(opt.visibleDef, state)) return false
      
      // Then check if all parent dependencies are also visible (transitive check)
      const v = opt.visibleDef.if
      
      function checkDependencyVisible (clause) {
        if (!clause) return true
        
        // If this clause references an attribute, check if that attribute's option is visible
        if (clause.attribute) {
          const parentOpt = findOption(clause.attribute)
          if (parentOpt && !isFullyVisible(parentOpt, visited)) {
            return false // Parent is hidden, so this should be hidden too
          }
        }
        
        // For compound conditions, check all referenced attributes
        if (clause.op === 'and') {
          return (clause.params || []).every(p => checkDependencyVisible(p))
        }
        if (clause.op === 'or') {
          // For OR, we need at least one branch's dependencies to be visible
          // But if all branches have hidden dependencies, hide this option
          const params = clause.params || []
          if (params.length === 0) return true
          
          // Check if any branch has visible dependencies AND passes its condition
          return params.some(p => {
            const depVisible = checkDependencyVisible(p)
            const condPasses = evalVisible({ if: p }, state)
            return depVisible && condPasses
          })
        }
        
        return true
      }
      
      return checkDependencyVisible(v)
    }
    
    function updateState (ev) {
      // Back-prop first based on changed element
      backPropagateFromElement(ev && ev.target)
      updateUI()
    }
    function updateUI (initial = false) {
      // 1) read values from option inputs (primitives, enums, standalone string arrays)
      Object.values(options).forEach(opt => {
        if (!opt.input || opt.isObjectArray) return // arrays handled later
        if (opt.isArray) {
          const arrVal = readTextArray(opt.input)
          opt.value = arrVal
          if (arrVal !== undefined) state[opt.name] = arrVal
          else delete state[opt.name]
        } else if (opt.isBooleanSelect) {
          opt.value =
            opt.input.value === '' ? undefined : opt.input.value === 'true'
          if (opt.value === undefined) delete state[opt.name]
          else state[opt.name] = opt.value
        } else if (opt.input.type === 'checkbox') {
          opt.value = opt.input.checked
          state[opt.name] = opt.value
        } else if (
          opt.inputDef &&
          (opt.inputDef.displayType === 'number' ||
            opt.inputDef.displayType === 'integer')
        ) {
          // original behavior: keep raw invalid + highlight
          if (opt.input.value !== '' && isNaN(Number(opt.input.value))) {
            opt.input.classList.add('invalid-input')
            opt.value = opt.input.value // keep raw
          } else {
            opt.input.classList.remove('invalid-input')
            opt.value =
              opt.input.value === '' ? undefined : Number(opt.input.value)
          }
          if (opt.value === undefined) delete state[opt.name]
          else state[opt.name] = opt.value
        } else {
          opt.value = normalizeStr(opt.input.value)
          if (opt.value === '') delete state[opt.name]
          else state[opt.name] = opt.value
        }
      })

      // 2) validate schema numeric inputs + attach into single objects
      schemaRows.forEach(row => {
        if (!row._input) return
        if (row._type === 'number' || row._type === 'integer') {
          if (row._input.value !== '' && isNaN(Number(row._input.value))) {
            row._input.classList.add('invalid-input')
          } else {
            row._input.classList.remove('invalid-input')
          }
        }
      })
      Object.keys(objectSchemas).forEach(objectName => {
        const parentOpt = optionsByName[objectName]
        if (parentOpt && parentOpt.isObjectArray) return // skip, handled below
        let anyFilled = false
        const obj = {}
        ;(objectSchemas[objectName] || []).forEach(row => {
          if (!row._input) return
          const val = row._input.value
          const parsed = parseValueByType(row._type, val)
          if (parsed !== undefined && parsed !== '') {
            obj[row._propName] = parsed
            anyFilled = true
          }
        })
        if (anyFilled) state[objectName] = obj
        else delete state[objectName]
      })

      // 3) Object arrays: only include filled entries. (+ Add does NOT filter)
      Object.values(options).forEach(opt => {
        if (!opt.isObjectArray || !opt.input) return
        const arr = []
        const entries = opt.input.querySelectorAll('.object-array-entry')
        entries.forEach(entry => {
          const obj = {}
          let any = false
          const props = objectArrayPropDefs[opt.name] || []
          props.forEach(def => {
            const propWrap = entry.querySelector(
              `.object-array-prop[data-prop="${def.propName}"]`
            )
            if (!propWrap) return
            const type = (propWrap.dataset.type || '').toLowerCase()
            // nested array?
            const nestedArrWrap = propWrap.querySelector('.array-input-wrapper')
            if (nestedArrWrap) {
              const arrVal = readTextArray(nestedArrWrap)
              if (arrVal !== undefined) {
                obj[def.propName] = arrVal
                any = true
              }
              return
            }
            const sel = propWrap.querySelector('select')
            if (sel) {
              if (sel.value !== '') {
                obj[def.propName] =
                  sel.dataset.booleanSelect === '1'
                    ? sel.value === 'true'
                    : sel.value
                any = true
              }
              return
            }
            const inp = propWrap.querySelector('input[type="text"]')
            if (inp) {
              if (
                (type === 'number' || type === 'integer') &&
                inp.value !== '' &&
                isNaN(Number(inp.value))
              ) {
                inp.classList.add('invalid-input')
                obj[def.propName] = inp.value // keep raw invalid
                any = true
              } else {
                inp.classList.remove('invalid-input')
                const parsed = parseValueByType(type, inp.value)
                if (parsed !== undefined && parsed !== '') {
                  obj[def.propName] = parsed
                  any = true
                }
              }
            }
          })
          if (any) arr.push(obj)
        })
        if (arr.length) {
          state[opt.name] = arr
          opt.value = arr
        } else {
          delete state[opt.name]
          opt.value = undefined
        }
      })

      // 4) show/hide option rows according to visibility (with transitive check)
      Object.values(options).forEach(opt => {
        // Sub-property rows handled as schema are controlled by their parent object
        if (opt._handledAsSchema) return

        const show = initial ? true : isFullyVisible(opt)
        // Array-prop template rows remain hidden regardless
        if (opt.isArrayProp) {
          opt.row.classList.add('hidden-row')
        } else {
          opt.row.classList.toggle('hidden-row', !show)
        }

        // For single-object schemas, follow parent visibility
        if (opt.isObject && objectSchemas[opt.name]) {
          objectSchemas[opt.name].forEach(row => {
            row.classList.toggle('hidden-row', !show)
          })
        }

        // For object arrays, show/hide the wrapper UI with parent visibility
        if (opt.isObjectArray && opt.input) {
          opt.input.style.display = show ? '' : 'none'
          // Also update property visibility within each entry
          const props = objectArrayPropDefs[opt.name] || []
          const entries = opt.input.querySelectorAll('.object-array-entry')
          entries.forEach(entry => {
            updateEntryPropVisibility(entry, props, initial)
          })
        }
      })

      // 5) show/hide enum/list rows based on their owning option
      Array.from(table.querySelectorAll('tr.row_enum, tr.row_list, tr.preview_enum, tr.preview_list')).forEach(
        row => {
          let prev = row.previousElementSibling
          while (prev && !prev.classList.contains('row_option'))
            prev = prev.previousElementSibling
          if (!prev) return
          row.classList.toggle(
            'hidden-row',
            prev.classList.contains('hidden-row')
          )
        }
      )

      // 6) show/hide read-only schema rows: visible when empty, hidden when values exist
      const formHasValues = Object.keys(state).length > 0
      readOnlySchemaRows.forEach(row => {
        // Check if parent object option is visible too
        const parentOpt = optionsByName[row._objectName]
        const parentVisible = parentOpt ? !parentOpt.row.classList.contains('hidden-row') : true
        // Hide read-only rows if form has values OR parent is hidden
        row.classList.toggle('hidden-row', formHasValues || !parentVisible)
      })

      // 7) update JSON snippet
      updateJsonSnippet()
    }

    // =============== JSON snippet UI (copy/reset) ===============
    function updateJsonSnippet () {
      let name = ''
      const header = document.querySelector('#content-head h1')
      if (header) name = header.textContent.trim()
      const optionsObj = {}
      Object.values(options).forEach(opt => {
        // Include object arrays even if parent row hidden (so entries reflect)
        const parentVisible = !opt.row.classList.contains('hidden-row')
        const include = parentVisible || opt.isObjectArray
        if (!include) return

        if (opt.isObject || opt.isObjectArray) {
          if (state[opt.name] !== undefined)
            optionsObj[opt.name] = state[opt.name]
        } else if (typeof opt.value === 'boolean') {
          optionsObj[opt.name] = opt.value
        } else if (opt.value !== undefined && opt.value !== '') {
          optionsObj[opt.name] = opt.value
        }
      })
      const snippet = { name, options: optionsObj }
      const jsonPre = document.getElementById('json-snippet-pre')
      const jsonBox = document.getElementById('json-snippet-box')
      if (jsonPre) {
        jsonPre.textContent = JSON.stringify(snippet, null, 2)
      } else if (jsonBox) {
        jsonBox.textContent = JSON.stringify(snippet, null, 2)
      }
    }

    // Build snippet container (with Copy + Reset) once — ORIGINAL BUTTONS + TOOLTIPS preserved
    let jsonDiv = document.getElementById('json-snippet-box')
    if (!jsonDiv) {
      jsonDiv = document.createElement('div')
      jsonDiv.id = 'json-snippet-box'
      jsonDiv.style.position = 'relative'
      jsonDiv.style.paddingTop = '2.5em'
      const jsonPre = document.createElement('pre')
      jsonPre.id = 'json-snippet-pre'
      jsonPre.style.margin = '0'
      jsonPre.style.fontFamily = 'monospace'
      jsonDiv.appendChild(jsonPre)

      // Copy button (original SVG + classes) + tooltip
      const copyBtn = document.createElement('button')
      copyBtn.className = 'Button Button_sm'
      copyBtn.type = 'button'
      copyBtn.style.position = 'absolute'
      copyBtn.style.top = '8px'
      copyBtn.style.background = 'none'
      copyBtn.style.right = '72px'
      copyBtn.style.zIndex = '10'
      copyBtn.title = 'Copy'
      copyBtn.innerHTML = ``
      copyBtn.onclick = function () {
        const pre = document.getElementById('json-snippet-pre')
        const text = pre ? pre.textContent : ''
        navigator.clipboard.writeText(text || '')
        copyBtn.classList.add('copied')
        setTimeout(() => copyBtn.classList.remove('copied'), 1200)
      }
      jsonDiv.appendChild(copyBtn)

      // Reset button (original SVG + classes) + tooltip
      const resetBtn = document.createElement('button')
      resetBtn.className = 'Button Button_sm'
      resetBtn.type = 'button'
      resetBtn.style.position = 'absolute'
      resetBtn.style.top = '8px'
      resetBtn.style.right = '40px'
      resetBtn.style.background = 'none'
      resetBtn.style.zIndex = '10'
      resetBtn.title = 'Reset options'
      resetBtn.innerHTML = ``
      resetBtn.onclick = function () {
        // Clear all inputs to pristine
        Object.values(options).forEach(opt => {
          if (!opt.input) return
          if (opt.isArray) {
            // wipe and rebuild + button + one empty field
            while (opt.input.firstChild)
              opt.input.removeChild(opt.input.firstChild)
            const addBtn = document.createElement('button')
            addBtn.type = 'button'
            addBtn.textContent = '+'
            addBtn.className = 'Button Button_xs'
            addBtn.style.marginTop = '2px'
            function addField (val) {
              const div = document.createElement('div')
              div.style.display = 'flex'
              div.style.marginBottom = '2px'
              const inp = document.createElement('input')
              inp.type = 'text'
              inp.className = 'Input Input_sm'
              inp.style.minWidth = '120px'
              inp.value = val || ''
              inp.addEventListener('input', updateState)
              const btn = document.createElement('button')
              btn.type = 'button'
              btn.textContent = '−'
              btn.className = 'Button Button_xs'
              btn.style.marginLeft = '4px'
              btn.onclick = function () {
                const hadValue = inp.value.trim() !== ''
                opt.input.removeChild(div)
                if (hadValue) updateState()
              }
              div.appendChild(inp)
              div.appendChild(btn)
              opt.input.insertBefore(div, addBtn)
            }
            addBtn.onclick = function () {
              addField()
              // Don't call updateState() here - adding empty field doesn't change state
            }
            opt.input.appendChild(addBtn)
            addField()
          } else if (opt.isObjectArray) {
            // remove all entries, leave + Add button (no filtering on add)
            while (opt.input.firstChild)
              opt.input.removeChild(opt.input.firstChild)
            const addBtn = document.createElement('button')
            addBtn.type = 'button'
            addBtn.textContent = '+ Add ' + opt.name
            addBtn.className = 'Button Button_xs'
            addBtn.onclick = function () {
              addObjectArrayEntry(opt.input, opt.name) /* no updateState here */
            }
            opt.input.appendChild(addBtn)
          } else if (opt.isBooleanSelect || opt.input.tagName === 'SELECT') {
            opt.input.selectedIndex = 0 // back to placeholder
          } else if (opt.input.type === 'checkbox') {
            opt.input.checked = false
          } else if (opt.input.type === 'text') {
            opt.input.value = ''
            opt.input.classList.remove('invalid-input')
          }
          opt.value = undefined
        })
        schemaRows.forEach(row => {
          if (row._input) {
            row._input.value = ''
            row._input.classList.remove('invalid-input')
          }
        })
        state = {}
        // Fresh render with all visible
        updateUI(true)
      }
      jsonDiv.appendChild(resetBtn)

      // Help link button — href resolved at click time so back-navigation works
      // (breadcrumbs may not be rendered yet when initPapiBuilder runs after popstate)
      const _breadcrumbPatterns = ['latest-criteria', 'deprecated-criteria', 'latest-behaviors', 'ga-behaviors', 'deprecated-behaviors']

      const helpLink = document.createElement('a')
      helpLink.addEventListener('click', function (e) {
        e.preventDefault()
        const links = Array.from(document.querySelectorAll('.rm-Breadcrumb-list li a'))
        const anchor = links.reverse().find(a =>
          _breadcrumbPatterns.some(p => (a.getAttribute('href') || '').includes(p))
        )
        if (anchor) {
          window.location.href = anchor.getAttribute('href') + '#interactive-json-code-builder'
        }
      })
      helpLink.target = '_self'
      helpLink.rel = 'noopener noreferrer'
      helpLink.className = 'Button Button_sm'
      helpLink.style.position = 'absolute'
      helpLink.style.top = '8px'
      helpLink.style.right = '8px'
      helpLink.style.background = 'none'
      helpLink.style.zIndex = '10'
      helpLink.style.color = 'inherit'
      helpLink.title = 'Learn more'
      helpLink.innerHTML = ``
      jsonDiv.appendChild(helpLink)

      // Insert JSON box after table
      const tableContainer = table.closest('.rdmd-table-inner')
      if (tableContainer && tableContainer.parentNode) {
        tableContainer.parentNode.insertBefore(
          jsonDiv,
          tableContainer.nextSibling
        )
      }
    }

    // Initial render: force everything visible on first paint
    updateUI(true)

    // Wire listeners
    Object.values(options).forEach(opt => {
      if (!opt.input) return
      opt.input.addEventListener('input', updateState)
      opt.input.addEventListener('change', updateState)
    })
    schemaRows.forEach(row => {
      if (row._input) {
        row._input.addEventListener('input', updateState)
        row._input.addEventListener('change', updateState)
      }
    })

    // Layout wrapper for side-by-side table + snippet
    const tableEl = document.querySelector('.rdmd-table')
    const snippetEl = document.getElementById('json-snippet-box')
    if (tableEl && snippetEl) {
      const wrapper = document.createElement('div')
      wrapper.className = 'rdmd-table-flex-wrap'
      tableEl.parentNode.insertBefore(wrapper, tableEl)
      wrapper.appendChild(tableEl)
      wrapper.appendChild(snippetEl)
    }
}

$(window).on('pageLoad', function () {
  if (window._papiBuilderObserver) {
    window._papiBuilderObserver.disconnect()
  }
  // Reset table reference on each SPA navigation so new page always re-inits
  window._papiBuilderTable = null

  const observer = new MutationObserver(function () {
    const table = document.querySelector('.rdmd-table-inner table')

    // Table removed — reset so next appearance triggers re-init
    if (!table) {
      window._papiBuilderTable = null
      return
    }

    // Already initialized against this exact table instance — nothing to do
    if (table === window._papiBuilderTable) return

    // Debounce with double rAF: waits for React to fully commit all DOM updates
    // before running. A single rAF can still catch React mid-render.
    if (window._papiBuilderRaf) cancelAnimationFrame(window._papiBuilderRaf)
    window._papiBuilderRaf = requestAnimationFrame(function () {
      window._papiBuilderRaf = requestAnimationFrame(function () {
        const settled = document.querySelector('.rdmd-table-inner table')
        if (!settled) return
        window._papiBuilderTable = settled
        initPapiBuilder()
      })
    })
  })

  window._papiBuilderObserver = observer
  observer.observe(document.body, { childList: true, subtree: true })
})