@jinntec/fore 2.7.2 → 2.8.0

package/dist/fore-dev.js

@@ -1,4 +1,4 @@
-/* Version: 2.7.2 - December 9, 2025 15:22:48 */
+/* Version: 2.8.0 - December 19, 2025 12:59:03 */
 function t$2(t, s, r, i) {
   const n = {
     op: s,
@@ -16822,1978 +16822,1979 @@ class DependencyNotifyingDomFacade {
   }
 }
 
-function prettifyXml(source) {
-  const xmlDoc = new DOMParser().parseFromString(source, 'application/xml');
-  const xsltDoc = new DOMParser().parseFromString([
-  // describes how we want to modify the XML - indent everything
-  '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">', '  <xsl:output method="xml" indent="yes" omit-xml-declaration="yes"/>', '  <xsl:strip-space elements="*"/>', '  <xsl:template match="text()">',
-  // change to just text() to strip space in text nodes
-  '    <xsl:value-of select="normalize-space(.)"/>', '  </xsl:template>', '  <xsl:template match="node()|@*">', '    <xsl:copy>', '        <xsl:apply-templates select="node()|@*"/>', '    </xsl:copy>', '  </xsl:template>', '</xsl:stylesheet>'].join('\n'), 'application/xml');
-  const xsltProcessor = new XSLTProcessor();
-  xsltProcessor.importStylesheet(xsltDoc);
-  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
-  const resultXml = new XMLSerializer().serializeToString(resultDoc);
-  return resultXml;
-}
-
-const XFORMS_NAMESPACE_URI = 'http://www.w3.org/2002/xforms';
-const createdNamespaceResolversByXPathQueryAndNode = new Map();
-
-// A global registry of function names that are declared in Fore by a developer using the
-// `fx-function` element. These should be available without providing a prefix as well
-const globallyDeclaredFunctionLocalNames = [];
-function getCachedNamespaceResolver(xpath, node) {
-  if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) {
-    return null;
-  }
-  return createdNamespaceResolversByXPathQueryAndNode.get(xpath).get(node) || null;
-}
-function setCachedNamespaceResolver(xpath, node, resolver) {
-  if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) {
-    return createdNamespaceResolversByXPathQueryAndNode.set(xpath, new Map());
-  }
-  return createdNamespaceResolversByXPathQueryAndNode.get(xpath).set(node, resolver);
-}
-const xhtmlNamespaceResolver = prefix => {
-  if (!prefix) {
-    return 'http://www.w3.org/1999/xhtml';
-  }
-  return undefined;
-};
+class XPathUtil {
+  /**
+   * Recursively check AST for any dynamic expression components.
+   */
+  static containsDynamicContent(astNode) {
+    if (!astNode) return false;
 
-/**
- * Resolve an id in scope. Behaves like the algorithm defined on https://www.w3.org/community/xformsusers/wiki/XForms_2.0#idref-resolve
- *
- * @param {string} id
- * @param {Node} sourceObject
- * @param {string} nodeName
- *
- * @returns {HTMLElement} The element with that ID, resolved with respect to repeats
- */
-function resolveId(id, sourceObject, nodeName = null) {
-  const query = 'outermost(ancestor-or-self::fx-fore[1]/(descendant::fx-fore|descendant::*[@id = $id]))[not(self::fx-fore)]';
-  /*
-        if (nodeName === 'fx-instance') {
-            // Instance elements can only be in the `model` element
-            // query = 'ancestor-or-self::fx-fore[1]/fx-model/fx-instance[@id = $id]';
-             const fore = Fore.getFore(sourceObject);
-            const instances = fore.getModel().instances;
-            const targetInstance = instances.find(i => i.id === id);
-            return targetInstance;
-        return document.getElementById(id);
-  }
-    */
-  if (sourceObject.nodeType === Node.TEXT_NODE) {
-    sourceObject = sourceObject.parentNode;
-  }
-  if (sourceObject.nodeType === Node.ATTRIBUTE_NODE) {
-    sourceObject = sourceObject.ownerElement;
-  }
-  if (sourceObject.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-    sourceObject = sourceObject.parentNode.host;
-  }
-  const ownerForm = sourceObject.localName === 'fx-fore' ? sourceObject : sourceObject.closest('fx-fore');
-  const elementsWithId = ownerForm.querySelectorAll(`[id='${id}']`);
-  if (elementsWithId.length === 1) {
-    // A single one is found. Assume no ID reuse.
-    const targetObject = elementsWithId[0];
-    if (nodeName && targetObject.localName !== nodeName) {
-      return null;
+    // Location paths, function calls, or variable refs are dynamic
+    if (astNode.type === 'pathExpression' || astNode.type === 'functionCall' || astNode.type === 'variableReference') {
+      return true;
     }
-    return targetObject;
-  }
-  const allMatchingTargetObjects = evaluateXPathToNodes$1(query, sourceObject, null, {
-    id
-  }, {
-    namespaceResolver: xhtmlNamespaceResolver
-  });
-  if (allMatchingTargetObjects.length === 0) {
-    return null;
-  }
-  if (allMatchingTargetObjects.length === 1 && evaluateXPathToBoolean$1('(ancestor::fx-fore | ancestor::fx-repeat)[last()]/self::fx-fore', allMatchingTargetObjects[0], null, null, {
-    namespaceResolver: xhtmlNamespaceResolver
-  })) {
-    // If the target element is not repeated, then the search for the target object is trivial since
-    // there is only one associated with the target element that bears the matching ID. This is true
-    // regardless of whether or not the source object is repeated. However, if the target element is
-    // repeated, then additional information must be used to help select a target object from among
-    // those associated with the identified target element.
-    const targetObject = allMatchingTargetObjects[0];
-    if (nodeName && targetObject.localName !== nodeName) {
-      return null;
+
+    // Recursively check any child expressions
+    for (const key in astNode) {
+      if (astNode[key] && typeof astNode[key] === 'object') {
+        if (Array.isArray(astNode[key])) {
+          for (const item of astNode[key]) {
+            if (XPathUtil.containsDynamicContent(item)) return true;
+          }
+        } else {
+          if (XPathUtil.containsDynamicContent(astNode[key])) return true;
+        }
+      }
     }
-    return targetObject;
+    return false;
   }
 
-  // SPEC:
+  /**
+   * creates DOM Nodes from an XPath locationpath expression. Support namespaced and un-namespaced
+   * nodes.
+   * E.g. 'foo/bar' creates an element 'foo' with an child element 'bar'
+   * 'foo/@bar' creates a 'foo' element with an 'bar' attribute
+   *
+   * supports multiple steps
+   *
+   * @param xpath
+   * @param doc {XMLDocument}
+   * @param fore
+   * @param namespaceResolver {function} optional namespace resolver function
+   * @return {Node|Attr}
+   */
+  static createNodesFromXPath(xpath, doc, fore, namespaceResolver = null) {
+    const resolveNamespace = namespaceResolver || (() => undefined);
+    if (!doc) {
+      doc = document.implementation.createDocument(null, null, null); // Create a new XML document if not provided
+    }
 
-  // 12.2.1 References to Elements within a repeat Element
+    const parts = [];
+    let scratch = '';
+    let isInPredicate = false;
+    for (const char of xpath.split('')) {
+      if (!isInPredicate) {
+        // We are not in a predicate, the slash will terminate our step.
+        if (char === '/') {
+          parts.push(scratch);
+          scratch = '';
+          continue;
+        }
+        scratch += char;
+        if (char === '[') {
+          isInPredicate = true;
+        }
+        continue;
+      }
+      // We are in a predicate! So the only interesting token is ']', which means we're out of one.
+      scratch += char;
+      if (char === ']') {
+        isInPredicate = false;
+      }
+    }
+    // Flush the last step
+    parts.push(scratch);
+    let rootNode = null;
+    let currentNode = null;
+    for (const part of parts) {
+      if (!part) continue; // Skip empty parts (e.g., leading slashes)
+      if (part === '.') {
+        // A '.' does not introduce new elements
+        continue;
+      }
 
-  // When the target element that is identified by the IDREF of a source object has one or more
-  // repeat elements as ancestors, then the set of ancestor repeats are partitioned into two
-  // subsets, those in common with the source element and those that are not in common. Any ancestor
-  // repeat elements of the target element not in common with the source element are descendants of
-  // the repeat elements that the source and target element have in common, if any.
+      // Handle attributes
+      if (part.startsWith('@')) {
+        const attrName = part.slice(1); // Strip '@'
+        if (!currentNode) {
+          return doc.createAttribute(attrName, '');
+        }
+        currentNode.setAttribute(attrName, '');
+      } else {
+        // We are a predicate selector! Handle it
+        // This regex matches strings like:
+        // - listBibl
+        // - tei:listBibl
+        // - listBibl[@type="foo"]
+        // - listBibl[@type="foo"][@class="bar"]
+        // It will also match strings like
+        // - listBibl[ancestor-or-self::foo]
+        // which will be filtered out later.
 
-  // For the repeat elements that are in common, the desired target object exists in the same set of
-  // run-time objects that contains the source object. Then, for each ancestor repeat of the target
-  // element that is not in common with the source element, the current index of the repeat
-  // determines the set of run-time objects that contains the desired target object.
-  for (const ancestorRepeatItem of evaluateXPathToNodes$1('ancestor::fx-repeatitem => reverse()', sourceObject, null, null, {
-    namespaceResolver: xhtmlNamespaceResolver
-  })) {
-    const foundTargetObjects = allMatchingTargetObjects.filter(to => XPathUtil.contains(ancestorRepeatItem, to));
-    switch (foundTargetObjects.length) {
-      case 0:
-        // Nothing found: ignore
-        break;
-      case 1:
-        {
-          // A single one is found: the target object is directly in a common repeat
-          const targetObject = foundTargetObjects[0];
-          if (nodeName && targetObject.localName !== nodeName) {
-            return null;
-          }
-          return targetObject;
+        const result = part.match(/^(?<name>[\w:-]+)(?<predicates>(\[[^]*\])*)$/);
+        if (!result) {
+          throw new Error(`No element could be made from the XPath step ${part}. It must be of these forms: 'localName', 'prefix:name', 'name[@attr="value"]' et cetera.`);
         }
-      default:
-        {
-          // Multiple target objects are found: they are in a repeat that is not common with the
-          // source object We found a target object in a common repeat! We now need to find the one
-          // that is in the repeatitem identified at the current index
-          const targetObject = foundTargetObjects.find(to => evaluateXPathToNodes$1('every $ancestor of ancestor::fx-repeatitem satisfies $ancestor is $ancestor/../child::fx-repeatitem[../@repeat-index]', to, null, {}));
-          if (!targetObject) {
-            // Nothing valid found for whatever reason. This might be something dynamic?
-            return null;
-          }
-          if (nodeName && targetObject.localName !== nodeName) {
-            return null;
+        const {
+          name,
+          predicates
+        } = result.groups;
+        // Handle namespaces if present
+        const [prefix, localName] = name.includes(':') ? name.split(':') : [null, name];
+        const namespace = resolveNamespace(prefix);
+        const newElement = namespace ? doc.createElementNS(namespace, localName) : doc.createElement(localName);
+        if (predicates) {
+          const predicateExtractionRegex = /(\[@(?<name>[\w:-]*)\s?=\s?["'](?<value>[^"']*)['"]\])+/g;
+          const parsedPredicates = predicates.matchAll(predicateExtractionRegex).map(match => ({
+            attrName: match.groups.name,
+            value: match.groups.value
+          }));
+          for (const {
+            attrName,
+            value
+          } of parsedPredicates) {
+            newElement.setAttribute(attrName, value);
           }
-          return targetObject;
         }
+        if (!rootNode) {
+          rootNode = newElement; // Set as the root node
+        } else {
+          currentNode.appendChild(newElement);
+        }
+        currentNode = newElement;
+      }
     }
+    if (!rootNode) {
+      throw new Error('Invalid XPath; no root element could be created.');
+    }
+    return rootNode;
   }
-  // We found no target objects in common repeats. The id is unresolvable
-  return null;
-}
-
-// Make namespace resolving use the `instance` element that is related to here
-const xmlDocument = new DOMParser().parseFromString('<xml />', 'text/xml');
-const instanceReferencesByQuery = new Map();
-function findInstanceReferences(xpathQuery) {
-  if (!xpathQuery.includes('instance')) {
-    // No call to the instance function anyway: short-circuit and prevent AST processing
-    return [];
-  }
-  if (instanceReferencesByQuery.has(xpathQuery)) {
-    return instanceReferencesByQuery.get(xpathQuery);
-  }
-  const xpathAST = parseScript(xpathQuery, {}, xmlDocument);
-  const instanceReferences = evaluateXPathToStrings$1(`descendant::xqx:functionCallExpr
-				[xqx:functionName = "instance"]
-				/xqx:arguments
-				/xqx:stringConstantExpr
-				/xqx:value`, xpathAST, null, {}, {
-    namespaceResolver: prefix => prefix === 'xqx' ? 'http://www.w3.org/2005/XQueryX' : undefined
-  });
-  instanceReferencesByQuery.set(xpathQuery, instanceReferences);
-  return instanceReferences;
-}
-/**
- * @typedef {function(string):string} NamespaceResolver
- */
 
-/**
- * @function
- * Resolve a namespace. Needs a namespace prefix and the element that is most closely related to the
- * XPath in which the namespace is being resolved. The prefix will be resolved by using the
- * ancestry of said element.
- *
- * It has two ways of doing so:
- *
- * - If the prefix is defined in an `xmlns:XXX="YYY"` namespace declaration, it will return 'YYY'.
- * - If the prefix is the empty prefix and there is an `xpath-default-namespace="YYY"` attribute in
- * - the * ancestry, that attribute will be used and 'YYY' will be returned
- *
- * @param  {string} xpathQuery
- * @param  {HTMLElement} formElement
- * @returns {NamespaceResolver} The namespace resolver for this context
- */
-function createNamespaceResolver(xpathQuery, formElement) {
-  const cachedResolver = getCachedNamespaceResolver(xpathQuery, formElement);
-  if (cachedResolver) {
-    return cachedResolver;
+  /**
+   * looks up namespace on ownerForm. Though not strictly in the sense of resolving namespaces in XML, the
+   * fx-fore element is a convenient place to put namespace declarations for 2 reasons:
+   * - this way namespaces are scoped to a Fore element
+   * - as fx-fore is a web component we can add our xmlns attributes as we got no restrictions to attributes
+   *   though strictly speaking they are no xmlns declarations and just serve the purpose of namespace lookup.
+   *
+   * @param boundElement
+   * @param prefix
+   * @return {string}
+   */
+  static lookupNamespace(ownerForm, prefix) {
+    return ownerForm.getAttribute(`xmlns:${prefix}`);
   }
-  let instanceReferences = findInstanceReferences(xpathQuery);
-  if (instanceReferences.length === 0) {
-    // No instance functions. Look up further in the hierarchy to see if we can deduce the intended context from there
-    const ancestorComponent = formElement.parentNode && formElement.parentNode.nodeType === formElement.ELEMENT_NODE && formElement.parentNode.closest('[ref]');
-    if (ancestorComponent) {
-      const resolver = createNamespaceResolver(ancestorComponent.getAttribute('ref'), ancestorComponent);
-      setCachedNamespaceResolver(xpathQuery, formElement, resolver);
-      return resolver;
+  static querySelectorAll(querySelector, start) {
+    const queue = [start];
+    const found = [];
+    while (queue.length) {
+      const item = queue.shift();
+      for (const child of Array.from(item.children).reverse()) {
+        queue.unshift(child);
+      }
+      if (item.matches && item.matches('template')) {
+        queue.unshift(item.content);
+      }
+      if (item.matches && item.matches(querySelector)) {
+        found.push(item);
+      }
     }
-    // Nothing found: let's just assume we're supposed to use the `default` instance
-    instanceReferences = ['default'];
+    return found;
   }
-  if (instanceReferences.length === 1) {
-    // console.log(`resolving ${xpathQuery} with ${instanceReferences[0]}`);
-    let instance;
-    if (instanceReferences[0] === 'default') {
-      /**
-       * @type {HTMLElement}
-       */
-      const actualForeElement = evaluateXPathToFirstNode$1('ancestor-or-self::fx-fore[1]', formElement, null, null, {
-        namespaceResolver: xhtmlNamespaceResolver
-      });
-      instance = actualForeElement && actualForeElement.querySelector('fx-instance');
-    } else {
-      instance = resolveId(instanceReferences[0], formElement, 'fx-instance');
-    }
-    if (instance && instance.hasAttribute('xpath-default-namespace')) {
-      const xpathDefaultNamespace = instance.getAttribute('xpath-default-namespace');
-      /*
-            console.log(
-              `Resolving the xpath ${xpathQuery} with the default namespace set to ${xpathDefaultNamespace}`,
-            );
-      */
-      /**
-       * @type {NamespaceResolver}
-       */
-      const resolveNamespacePrefix = prefix => {
-        if (!prefix) {
-          return xpathDefaultNamespace;
-        }
-        return undefined;
-      };
-      setCachedNamespaceResolver(xpathQuery, formElement, resolveNamespacePrefix);
-      return resolveNamespacePrefix;
+
+  /**
+   * Alternative to `contains` that respects shadowroots
+   * @param {Node} ancestor
+   * @param {Node} descendant
+   * @returns {boolean}
+   */
+  static contains(ancestor, descendant) {
+    while (descendant) {
+      if (descendant === ancestor) {
+        return true;
+      }
+      if (descendant.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        // We are passing a shadow root boundary
+        descendant = descendant.host;
+      } else {
+        descendant = descendant.parentNode;
+      }
     }
+    return false;
   }
-  /*
-  if (instanceReferences.length > 1) {
-    console.warn(
-      `More than one instance is used in the query "${xpathQuery}". The default namespace resolving will be used`,
-    );
-  }
-  */
 
-  const xpathDefaultNamespace = evaluateXPathToString$1('ancestor-or-self::*/@xpath-default-namespace[last()]', formElement) || '';
+  /**
+   * Alternative to `closest` that respects subcontrol boundaries
+   *
+   * @param {string} querySelector
+   * @param {Node} start
+   * @returns {HTMLElement}
+   */
+  static getClosest(querySelector, start) {
+    while (start && !start.matches || !start.matches(querySelector)) {
+      if (start.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        // We are passing a shadow root boundary
+        start = start.host;
+        continue;
+      }
+      if (start.nodeType === Node.ATTRIBUTE_NODE) {
+        // We are passing an attribute
+        start = start.ownerElement;
+        continue;
+      }
+      if (start.nodeType === Node.TEXT_NODE) {
+        start = start.parentNode;
+      }
+      if (start.matches('fx-fore')) {
+        // Subform reached. Bail out
+        return null;
+      }
+      start = start.parentNode;
+      if (!start) {
+        return null;
+      }
+    }
+    return start;
+  }
 
   /**
-   * @type {NamespaceResolver}
+   * returns next bound element upwards in tree
+   * @param {Node} start where to start the search
+   * @returns {*|null}
    */
-  const resolveNamespacePrefix = function resolveNamespacePrefix(prefix) {
-    if (prefix === '') {
-      return xpathDefaultNamespace;
+  static getParentBindingElement(start) {
+    /*    if (start.parentNode.host) {
+          const { host } = start.parentNode;
+          if (host.hasAttribute('ref')) {
+            return host;
+          }
+        } else */
+    if (start.parentNode && (start.parentNode.nodeType !== Node.DOCUMENT_NODE || start.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE)) {
+      return this.getClosest('fx-control[ref],fx-upload[ref],fx-group[ref],fx-repeat[ref], fx-switch[ref],fx-repeatitem', start.parentNode);
     }
+    return null;
+  }
 
-    // Note: ideally we should use Node#lookupNamespaceURI. However, the nodes we are passed are
-    // XML. The best we can do is emulate the `xmlns:xxx` namespace declarations by regarding them as
-    // attributes. Which they technically ARE NOT!
+  /**
+   * Checks whether the specified path expression is an absolute path.
+   *
+   * @param {string} path the path expression.
+   * @returns {boolean} <code>true</code> if specified path expression is an absolute
+   * path, otherwise <code>false</code>.
+   */
+  static isAbsolutePath(path) {
+    return path != null && (path.startsWith('/') || path.startsWith('instance(') || path.startsWith('$'));
+  }
 
-    return evaluateXPathToString$1('ancestor-or-self::*/@*[name() = "xmlns:" || $prefix][last()]', formElement, null, {
-      prefix
-    });
-  };
-  setCachedNamespaceResolver(xpathQuery, formElement, resolveNamespacePrefix);
-  return resolveNamespacePrefix;
-}
-function createNamespaceResolverForNode(query, contextNode, formElement) {
-  if ((contextNode && contextNode.ownerDocument || contextNode) === window.document) {
-    // Running a query on the HTML DOM. Don't bother resolving namespaces in any other way
-    return xhtmlNamespaceResolver;
+  /**
+   * @param {string} ref
+   */
+  static isSelfReference(ref) {
+    return ref === '.' || ref === './text()' || ref === 'text()' || ref === '' || ref === null;
   }
-  return createNamespaceResolver(query, formElement);
-}
 
-/**
- * Implementation of the functionNameResolver passed to FontoXPath to
- * redirect function resolving for unprefixed functions to either the fn or the xf namespace
- */
-// eslint-disable-next-line no-unused-vars
-function functionNameResolver({
-  prefix,
-  localName
-}, _arity) {
-  switch (localName) {
-    // TODO: put the full XForms library functions set here
-    case 'context':
-    case 'base64encode':
-    case 'boolean-from-string':
-    case 'current':
-    case 'depends':
-    case 'event':
-    case 'fore-attr':
-    case 'index':
-    case 'instance':
-    case 'json2xml':
-    case 'xml2Json':
-    case 'log':
-    case 'parse':
-    case 'local-date':
-    case 'local-dateTime':
-    case 'logtree':
-    case 'uri':
-    case 'uri-fragment':
-    case 'uri-host':
-    case 'uri-param':
-    case 'uri-path':
-    case 'uri-relpath':
-    case 'uri-port':
-    case 'uri-query':
-    case 'uri-scheme':
-    case 'uri-scheme-specific-part':
-      return {
-        namespaceURI: XFORMS_NAMESPACE_URI,
-        localName
-      };
-    default:
-      if (prefix === '' && globallyDeclaredFunctionLocalNames.includes(localName)) {
-        // The function has been declared without a prefix and is called here without a prefix.
-        // Just make this work. It is the developer-friendly way
-        return {
-          namespaceURI: 'http://www.w3.org/2005/xquery-local-functions',
-          localName
-        };
-      }
-      if (prefix === 'fn' || prefix === '') {
-        return {
-          namespaceURI: 'http://www.w3.org/2005/xpath-functions',
-          localName
-        };
+  /**
+   * returns the instance id from a complete XPath using `instance()` function.
+   *
+   * Will return 'default' in case no ref is given at all or the `instance()` function is called without arg.
+   *
+   * Otherwise instance id is extracted from function and returned. If all fails null is returned.
+   * @param {string} ref
+   * @param {HTMLElement}  boundElement  The element related to this ref. Used to resolve variables
+   * @returns {string}
+   */
+  static getInstanceId(ref, boundElement) {
+    if (!ref) {
+      return 'default';
+    }
+    if (ref.startsWith('instance()')) {
+      return 'default';
+    }
+    if (ref.startsWith('instance(')) {
+      const result = ref.substring(ref.indexOf('(') + 1);
+      return result.substring(1, result.indexOf(')') - 1);
+    }
+    if (ref.startsWith('$')) {
+      // this variable might actually point to an instance
+      const variableName = ref.match(/\$(?<variableName>[a-zA-Z0-9\-\_]+).*/)?.groups?.variableName;
+      let closestActualFormElement = boundElement;
+      while (closestActualFormElement && !('inScopeVariables' in closestActualFormElement)) {
+        closestActualFormElement = closestActualFormElement.nodeType === Node.ATTRIBUTE_NODE ? closestActualFormElement.ownerElement : closestActualFormElement.parentNode;
       }
-      if (prefix === 'local') {
-        return {
-          namespaceURI: 'http://www.w3.org/2005/xquery-local-functions',
-          localName
-        };
+      const correspondingVariable = closestActualFormElement?.inScopeVariables?.get(variableName);
+      if (!correspondingVariable) {
+        return null;
       }
-      return null;
+      return this.getInstanceId(correspondingVariable.valueQuery, correspondingVariable);
+    }
+    return null;
   }
-}
 
-/**
- * Get the variables in scope of the form element. These are the values of the variables that
- * logically precede the formElement that declares the XPath
- *
- * @param  {Node}  formElement  The element that declares the XPath
- *
- * @returns  {Object}  A key-value mapping of the variables
- */
-function getVariablesInScope(formElement) {
-  let closestActualFormElement = formElement;
-  while (closestActualFormElement && !('inScopeVariables' in closestActualFormElement)) {
-    closestActualFormElement = closestActualFormElement.nodeType === Node.ATTRIBUTE_NODE ? closestActualFormElement.ownerElement : closestActualFormElement.parentNode;
+  /**
+   * @param {HTMLElement} boundElement
+   * @param {string} path
+   * @returns {string}
+   */
+  static resolveInstance(boundElement, path) {
+    let instanceId = XPathUtil.getInstanceId(path, boundElement);
+    if (!instanceId) {
+      instanceId = XPathUtil.getInstanceId(boundElement.getAttribute('ref'), boundElement);
+    }
+    if (instanceId !== null) {
+      return instanceId;
+    }
+    const parentBinding = XPathUtil.getParentBindingElement(boundElement);
+    if (parentBinding) {
+      return this.resolveInstance(parentBinding, path);
+    }
+    return 'default';
   }
-  if (!closestActualFormElement) {
-    return {};
+
+  /**
+   * @param {Node} node
+   * @returns string
+   */
+  /*
+  static getDocPath(node) {
+    const path = fx.evaluateXPathToString('path()', node);
+    // Path is like `$default/x[1]/y[1]`
+    const shortened = XPathUtil.shortenPath(path);
+    return shortened.startsWith('/') ? `${shortened}` : `/${shortened}`;
   }
-  const variables = {};
-  if (closestActualFormElement.inScopeVariables) {
-    for (const key of closestActualFormElement.inScopeVariables.keys()) {
-      const varElementOrValue = closestActualFormElement.inScopeVariables.get(key);
-      if (!varElementOrValue) {
-        continue;
-      }
-      if (varElementOrValue.nodeType) {
-        // We are a var element, set the value to the value computed there
-        variables[key] = varElementOrValue.value;
-        // variables[key] = varElementOrValue.inScopeVariables.get(key);
-      } else {
-        // We are a direct value. This is used to leak in event variables
-        variables[key] = varElementOrValue;
-      }
-    }
+  */
+
+  /**
+   * @param {Node} node
+   * @param {string} instanceId
+   * @returns string
+   */
+  static getPath(node, instanceId) {
+    const path = evaluateXPathToString$1('path()', node);
+    // Path is like `$default/x[1]/y[1]`
+    const shortened = XPathUtil.shortenPath(path);
+    return shortened.startsWith('/') ? `$${instanceId}${shortened}` : `$${instanceId}/${shortened}`;
+  }
+
+  /**
+   * @param {string} path
+   * @returns string
+   */
+  static shortenPath(path) {
+    const tmp = path.replaceAll(/(Q{(.*?)\})/g, '');
+    if (tmp === 'root()') return tmp;
+    // cut off leading slash
+    const tmp1 = tmp.substring(1, tmp.length);
+    // ### cut-off root node ref
+    return tmp1.substring(tmp1.indexOf('/'), tmp.length);
+  }
+
+  /**
+   * @param {string} dep
+   * @returns {string}
+   */
+  static getBasePath(dep) {
+    const split = dep.split(':');
+    return split[0];
   }
-  return variables;
 }
 
 /**
- * Evaluate an XPath to _any_ type. When possible, prefer to use any other function to ensure the
- * type of the output is more predictable.
+ * A simple dependency graph
  *
- * @param  {string} xpath  The XPath to run
- * @param  {Node} contextNode The start of the XPath
- * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
- * @param  {Object} variables  Any variables to pass to the XPath
- * @param  {Object} options  Any options to pass to the XPath
+ * based on the work of https://github.com/jriecken/dependency-graph but working on ES6.
  *
- * @returns {any[]}
+ * Furthermore instead of the DepGraphCycleError a compute-exception event is dispatched.
+ *
+ *
+ */
+
+/**
+ * Cycle error, including the path of the cycle.
  */
+// const DepGraphCycleError = (exports.DepGraphCycleError = function (cyclePath) {
+
 /*
-export function evaluateXPath(xpath, contextNode, formElement, variables = {}, options={}, domFacade = null) {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    const variablesInScope = getVariablesInScope(formElement);
+export function DepGraphCycleError(cyclePath) {
+  const message = "Dependency Cycle Found: " + cyclePath.join(" -> ");
+  const instance = new Error(message);
+  instance.cyclePath = cyclePath;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if (Error.captureStackTrace) {
+    Error.captureStackTrace(instance, DepGraphCycleError);
+  }
+  return instance;
+};
 
-    return fxEvaluateXPath(
-        xpath,
-        contextNode,
-        domFacade,
-        {...variablesInScope, ...variables},
-        fxEvaluateXPath.ALL_RESULTS_TYPE,
-        {
-			debug: true,
-            currentContext: {formElement, variables},
-            moduleImports: {
-                xf: XFORMS_NAMESPACE_URI,
-            },
-            functionNameResolver,
-            namespaceResolver,
-			language: options.language || evaluateXPath.XPATH_3_1
-        },
-    );
-}
+DepGraphCycleError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+Object.setPrototypeOf(DepGraphCycleError, Error);
 */
-function evaluateXPath(xpath, contextNode, formElement, variables = {}, options = {}) {
-  try {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    const variablesInScope = getVariablesInScope(formElement);
-    const result = evaluateXPath$1(xpath, contextNode, null, {
-      ...variablesInScope,
-      ...variables
-    }, evaluateXPath$1.ALL_RESULTS_TYPE, {
-      xmlSerializer: new XMLSerializer(),
-      debug: true,
-      currentContext: {
-        formElement,
-        variables
-      },
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI
-      },
-      functionNameResolver,
-      namespaceResolver,
-      language: options.language || evaluateXPath$1.XPATH_3_1_LANGUAGE
-    });
-    // console.log('evaluateXPath',xpath, result);
-    return result;
-  } catch (e) {
-    formElement.dispatchEvent(new CustomEvent('error', {
-      composed: false,
-      bubbles: true,
-      detail: {
-        origin: formElement,
-        message: `Expression '${xpath}' failed: ${e}`,
-        expr: xpath,
-        level: 'Error'
-      }
-    }));
 
-    /*
-        formElement.dispatchEvent(
-            new CustomEvent('error', {
-                composed: false,
-                bubbles: true,
-                cancelable:true,
-                detail: {
-                    origin: formElement,
-                    message: `Expression '${xpath}' failed`,
-                    expr:xpath,
-                    level:'Error'},
-            }),
-        );
-    */
-    // Return 'nothing' in hope the rest of the page can forgive this
-    return [];
-  }
-}
 /**
- * Evaluate an XPath to the first Node
+ * Helper for creating a Topological Sort using Depth-First-Search on a set of edges.
  *
- * @param  {string} xpath  The XPath to run
- * @param  {Node} contextNode The start of the XPath
- * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
- * @returns {Node} The first node found in the XPath
- */
-function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
-  try {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    const variablesInScope = getVariablesInScope(formElement);
-    const result = evaluateXPathToFirstNode$1(xpath, contextNode, null, variablesInScope, {
-      defaultFunctionNamespaceURI: XFORMS_NAMESPACE_URI,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI
-      },
-      currentContext: {
-        formElement
-      },
-      functionNameResolver,
-      namespaceResolver,
-      xmlSerializer: new XMLSerializer()
-    });
-    // console.log('evaluateXPathToFirstNode',xpath, result);
-    return result;
-  } catch (e) {
-    formElement.dispatchEvent(new CustomEvent('error', {
-      composed: false,
-      bubbles: true,
-      detail: {
-        origin: formElement,
-        message: `Expression '${xpath}' failed: ${e}`,
-        expr: xpath,
-        level: 'Error'
-      }
-    }));
-  }
-  return null;
-}
-
-/**
- * Evaluate an XPath to all nodes
+ * Detects cycles and throws an Error if one is detected (unless the "circular"
+ * parameter is "true" in which case it ignores them).
  *
- * @param  {string} xpath  The XPath to run
- * @param  {Node} contextNode The start of the XPath
- * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
- * @return {Node[]}  All nodes
+ * @param edges The set of edges to DFS through
+ * @param leavesOnly Whether to only return "leaf" nodes (ones who have no edges)
+ * @param result An array in which the results will be populated
+ * @param circular A boolean to allow circular dependencies
  */
-function evaluateXPathToNodes(xpath, contextNode, formElement) {
-  try {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    const variablesInScope = getVariablesInScope(formElement);
-    const result = evaluateXPathToNodes$1(xpath, contextNode, null, variablesInScope, {
-      currentContext: {
-        formElement
-      },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI
-      },
-      namespaceResolver,
-      xmlSerializer: new XMLSerializer()
+function createDFS(edges, leavesOnly, result, circular) {
+  const visited = {};
+  // eslint-disable-next-line func-names
+  return function (start) {
+    // console.log('start ', start);
+    if (visited[start]) {
+      return;
+    }
+    const inCurrentPath = {};
+    const currentPath = [];
+    const todo = []; // used as a stack
+    todo.push({
+      node: start,
+      processed: false
     });
-    // console.log('evaluateXPathToNodes',xpath, result);
-    return result;
-  } catch (e) {
-    formElement.dispatchEvent(new CustomEvent('error', {
-      composed: false,
-      bubbles: true,
-      detail: {
-        origin: formElement,
-        message: `Expression '${xpath}' failed: ${e}`,
-        expr: xpath,
-        level: 'Error'
-      }
-    }));
-  }
-}
+    while (todo.length > 0) {
+      const current = todo[todo.length - 1]; // peek at the todo stack
+      const {
+        processed
+      } = current;
+      const {
+        node
+      } = current;
+      if (!processed) {
+        // Haven't visited edges yet (visiting phase)
+        if (visited[node]) {
+          todo.pop();
+          // eslint-disable-next-line no-continue
+          continue;
+        } else if (inCurrentPath[node]) {
+          // It's not a DAG
+          if (circular) {
+            todo.pop();
+            // If we're tolerating cycles, don't revisit the node
+            // eslint-disable-next-line no-continue
+            continue;
+          }
+          currentPath.push(node);
+          window.dispatchEvent(new CustomEvent('compute-exception', {
+            composed: false,
+            bubbles: true,
+            detail: {
+              path: currentPath,
+              message: 'cyclic graph'
+            }
+          }));
+          // return;
+          // console.log('‘circular path: ' + currentPath);
+          // throw new DepGraphCycleError(currentPath);
 
-/**
- * Evaluate an XPath to a boolean
- *
- * @param  {string} xpath  The XPath to run
- * @param  {Node} contextNode The start of the XPath
- * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
- * @return {boolean}
- */
-function evaluateXPathToBoolean(xpath, contextNode, formElement) {
-  try {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    const variablesInScope = getVariablesInScope(formElement);
-    return evaluateXPathToBoolean$1(xpath, contextNode, null, variablesInScope, {
-      currentContext: {
-        formElement
-      },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI
-      },
-      namespaceResolver,
-      xmlSerializer: new XMLSerializer()
-    });
-  } catch (e) {
-    formElement.dispatchEvent(new CustomEvent('error', {
-      composed: false,
-      bubbles: true,
-      detail: {
-        origin: formElement,
-        message: `Expression '${xpath}' failed: ${e}`,
-        expr: xpath,
-        level: 'Error'
+          // Stop all processing. This form is broken and we should not break the browser
+          throw new Error(`Cyclic at ${currentPath}`);
+        }
+        inCurrentPath[node] = true;
+        currentPath.push(node);
+        const nodeEdges = edges[node];
+        // (push edges onto the todo stack in reverse order to be order-compatible with the old DFS implementation)
+        for (let i = nodeEdges.length - 1; i >= 0; i -= 1) {
+          todo.push({
+            node: nodeEdges[i],
+            processed: false
+          });
+        }
+        current.processed = true;
+      } else {
+        // Have visited edges (stack unrolling phase)
+        todo.pop();
+        currentPath.pop();
+        inCurrentPath[node] = false;
+        visited[node] = true;
+        if (!leavesOnly || edges[node].length === 0) {
+          result.push(node);
+        }
       }
-    }));
-  }
+    }
+  };
 }
 
 /**
- * Evaluate an XPath to a string
- *
- * @param  {string}     xpath             The XPath to run
- * @param  {Node}       contextNode       The start of the XPath
- * @param  {Node}       formElement       The form element associated to the XPath
- * @param  {Node}       formElement       The element where the XPath is defined: used for namespace resolving
- * @param  {import('fontoxpath').IDomFacade}  [domFacade=null]  A DomFacade is used in bindings to intercept DOM
- * access. This is used to determine dependencies between bind elements.
- * @return {string}
+ * Simple Dependency Graph
  */
-function evaluateXPathToString(xpath, contextNode, formElement, domFacade = null) {
-  try {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    const variablesInScope = getVariablesInScope(formElement);
-    return evaluateXPathToString$1(xpath, contextNode, domFacade, variablesInScope, {
-      currentContext: {
-        formElement
-      },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI
-      },
-      namespaceResolver,
-      xmlSerializer: new XMLSerializer()
-    });
-  } catch (e) {
-    formElement.dispatchEvent(new CustomEvent('error', {
-      composed: false,
-      bubbles: true,
-      detail: {
-        origin: formElement,
-        message: `Expression '${xpath}' failed: ${e}`,
-        expr: xpath,
-        level: 'Error'
-      }
-    }));
-  }
-}
 
-/**
- * Evaluate an XPath to a set of strings
- *
- * @param  {string}     xpath             The XPath to run
- * @param  {Node}       contextNode       The start of the XPath
- * @param  {Node}       formElement       The form element associated to the XPath
- * @param  {Node}       formElement       The element where the XPath is defined: used for namespace resolving
- * @param  {import('fontoxpath').IDomFacade}  [domFacade=null]  A DomFacade is used in bindings to intercept DOM
- * access. This is used to determine dependencies between bind elements.
- * @return {string[]}
- */
-function evaluateXPathToStrings(xpath, contextNode, formElement, domFacade = null) {
-  try {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    return evaluateXPathToStrings$1(xpath, contextNode, domFacade, {}, {
-      currentContext: {
-        formElement
-      },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI
-      },
-      namespaceResolver,
-      xmlSerializer: new XMLSerializer()
-    });
-  } catch (e) {
-    formElement.dispatchEvent(new CustomEvent('error', {
-      composed: false,
-      bubbles: true,
-      detail: {
-        origin: formElement,
-        message: `Expression '${xpath}' failed: ${e}`,
-        expr: xpath,
-        level: 'Error'
-      }
-    }));
-  }
-}
-
-/**
- * Evaluate an XPath to a number
- *
- * @param  {string}     xpath             The XPath to run
- * @param  {Node}       contextNode       The start of the XPath
- * @param  {Node}       formElement       The form element associated to the XPath
- * @param  {Node}       formElement       The element where the XPath is defined: used for namespace resolving
- * @param  {import('fontoxpath').IDomFacade}  [domFacade=null]  A DomFacade is used in bindings to intercept DOM
- * access. This is used to determine dependencies between bind elements.
- * @return {number}
- */
-function evaluateXPathToNumber(xpath, contextNode, formElement, domFacade = null) {
-  try {
-    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-    const variablesInScope = getVariablesInScope(formElement);
-    return evaluateXPathToNumber$1(xpath, contextNode, domFacade, variablesInScope, {
-      currentContext: {
-        formElement
-      },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI
-      },
-      namespaceResolver,
-      xmlSerializer: new XMLSerializer()
-    });
-  } catch (e) {
-    formElement.dispatchEvent(new CustomEvent('error', {
-      composed: false,
-      bubbles: true,
-      detail: {
-        origin: formElement,
-        message: `Expression '${xpath}' failed: ${e}`,
-        expr: xpath,
-        level: 'Error'
-      }
-    }));
-  }
-}
-const contextFunction = (dynamicContext, string) => {
-  const caller = dynamicContext.currentContext.formElement;
-  let instance = null;
-  if (string) {
-    instance = resolveId(string, caller);
-  } else {
-    instance = XPathUtil.getParentBindingElement(caller);
-  }
-  if (instance) {
-    if (instance.nodeName === 'FX-REPEAT') {
-      const {
-        nodeset
-      } = instance;
-      for (let parent = caller; parent; parent = parent.parentNode) {
-        if (parent.parentNode === instance) {
-          const offset = Array.from(parent.parentNode.children).indexOf(parent);
-          return nodeset[offset];
-        }
-      }
-    }
-    return instance.nodeset;
-  }
-  return caller.getInScopeContext();
-};
-
-// todo: implement
-const currentFunction = (dynamicContext, string) => {
-  dynamicContext.currentContext.formElement;
-  return null;
-};
-const elementFunction = (dynamicContext, string) => {
-  dynamicContext.currentContext.formElement;
-  const newElement = document.createElement(string);
-  return newElement;
-};
-
-/**
- * @param id as string
- * @return instance data for given id serialized to string.
- */
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'context'
-}, [], 'item()?', contextFunction);
-
-/**
- * @param id as string
- * @return instance data for given id serialized to string.
- */
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'context'
-}, ['xs:string'], 'item()?', contextFunction);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'current'
-}, ['xs:string'], 'item()?', currentFunction);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'element'
-}, ['xs:string'], 'item()?', elementFunction);
-
-/**
- * @param id as string
- * @return instance data for given id serialized to string.
- */
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'log'
-}, ['xs:string?'], 'xs:string?', (dynamicContext, string) => {
-  const {
-    formElement
-  } = dynamicContext.currentContext;
-  const instance = resolveId(string, formElement, 'fx-instance');
-  if (instance) {
-    if (instance.getAttribute('type') === 'json') {
-      console.warn('log() does not work for JSON yet');
-      // return JSON.stringify(instance.getDefaultContext());
-    } else {
-      const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
-      return prettifyXml(def);
-    }
-  }
-  return null;
-});
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'fore-attr'
-}, ['xs:string?'], 'xs:string?', (dynamicContext, string) => {
-  const {
-    formElement
-  } = dynamicContext.currentContext;
-  let parent = formElement;
-  if (formElement.nodeType === Node.TEXT_NODE) {
-    parent = formElement.parentNode;
-  }
-  const foreElement = parent.closest('fx-fore');
-  if (foreElement.hasAttribute(string)) {
-    return foreElement.getAttribute(string);
-  }
-  return null;
-});
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'parse'
-}, ['xs:string?'], 'element()?', (_dynamicContext, string) => {
-  const parser = new DOMParser();
-  const out = parser.parseFromString(string, 'application/xml');
-  console.log('parse', out);
-
-  /*
-              const {formElement} = dynamicContext.currentContext;
-              const instance = resolveId(string, formElement, 'fx-instance');
-              if (instance) {
-                  if (instance.getAttribute('type') === 'json') {
-                      console.warn('log() does not work for JSON yet');
-                      // return JSON.stringify(instance.getDefaultContext());
-                  } else {
-                      const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
-                      return Fore.prettifyXml(def);
-                  }
-              }
-      */
-  return out.firstElementChild;
+/*
+var DepGraph = (exports.DepGraph = function DepGraph(opts) {
+  this.nodes = {}; // Node -> Node/Data (treated like a Set)
+  this.outgoingEdges = {}; // Node -> [Dependency Node]
+  this.incomingEdges = {}; // Node -> [Dependant Node]
+  this.circular = opts && !!opts.circular; // Allows circular deps
 });
-function buildTree(tree, data) {
-  if (!data) return;
-  if (data.nodeType === Node.ELEMENT_NODE) {
-    if (data.children) {
-      const details = document.createElement('details');
-      details.setAttribute('data-path', data.nodeName);
-      const summary = document.createElement('summary');
-      let display = ` <${data.nodeName}`;
-      Array.from(data.attributes).forEach(attr => {
-        display += ` ${attr.nodeName}="${attr.nodeValue}"`;
-      });
-      let contents;
-      if (data.firstChild && data.firstChild.nodeType === Node.TEXT_NODE && data.firstChild.data.trim() !== '') {
-        // console.log('whoooooooooopp');
-        contents = data.firstChild.nodeValue;
-        display += `>${contents}</${data.nodeName}>`;
-      } else {
-        display += '>';
-      }
-      summary.textContent = display;
-      details.appendChild(summary);
-      if (data.childElementCount !== 0) {
-        details.setAttribute('open', 'open');
-      } else {
-        summary.setAttribute('style', 'list-style:none;');
-      }
-      tree.appendChild(details);
-      Array.from(data.children).forEach(child => {
-        // if(child.nodeType === Node.ELEMENT_NODE){
-        // child.parentNode.appendChild(buildTree(child));
-        buildTree(details, child);
-        // }
-      });
-    }
-  } /* else if(data.nodeType === Node.ATTRIBUTE_NODE){
-        //create span for now
-        // const span = document.createElement('span');
-        // span.style.background = 'grey';
-        // span.textContent = data.value;
-        // tree.appendChild(span);
-        tree.setAttribute(data.nodeName,data.value);
-    }else {
-        tree.textContent = data;
-    } */
+*/
 
-  // return tree;
+function DepGraph(opts) {
+  this.nodes = {}; // Node -> Node/Data (treated like a Set)
+  this.outgoingEdges = {}; // Node -> [Dependency Node]
+  this.incomingEdges = {}; // Node -> [Dependant Node]
+  this.circular = opts && !!opts.circular; // Allows circular deps
 }
 
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'logtree'
-}, ['xs:string?'], 'element()?', (dynamicContext, string) => {
-  const {
-    formElement
-  } = dynamicContext.currentContext;
-  const instance = resolveId(string, formElement, 'fx-instance');
-  if (instance) {
-    // const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
-    // const def = JSON.stringify(instance.getDefaultContext());
-
-    const treeDiv = document.createElement('div');
-    treeDiv.setAttribute('class', 'logtree');
-    // const datatree = buildTree(tree,instance.getDefaultContext());
-    // return tree.appendChild(datatree);
-    // return  buildTree(root,instance.getDefaultContext());;
-    const form = dynamicContext.currentContext.formElement;
-    const logtree = form.querySelector('.logtree');
-    if (logtree) {
-      logtree.parentNode.removeChild(logtree);
-    }
-    const tree = buildTree(treeDiv, instance.getDefaultContext());
-    if (tree) {
-      form.appendChild(tree);
-    }
-  }
-  return null;
-});
-const instance = (dynamicContext, string) => {
-  // Spec: https://www.w3.org/TR/xforms-xpath/#The_XForms_Function_Library#The_instance.28.29_Function
-  // TODO: handle no string passed (null will be passed instead)
-
+DepGraph.prototype = {
   /**
-   * @type {import('./fx-fore.js').FxFore}
+   * The number of nodes in the graph.
    */
-  const formElement = evaluateXPathToFirstNode$1('ancestor-or-self::fx-fore[1]', dynamicContext.currentContext.formElement, null, null, {
-    namespaceResolver: xhtmlNamespaceResolver
-  });
-  let lookup = null;
-  if (string === null || string === 'default') {
-    lookup = formElement.getModel().getDefaultInstance();
-  } else {
-    lookup = formElement.getModel().getInstance(string);
-    if (!lookup) {
-      document.querySelector('fx-fore').dispatchEvent(new CustomEvent('error', {
-        composed: true,
-        bubbles: true,
-        detail: {
-          origin: 'functions',
-          message: `Instance not found '${string}'`,
-          level: 'Error'
-        }
-      }));
-    }
-  }
-  const context = lookup.getDefaultContext();
-  if (!context) {
-    return null;
-  }
-  return context;
-};
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'index'
-}, ['xs:string?'], 'xs:integer?', (dynamicContext, string) => {
-  const {
-    formElement
-  } = dynamicContext.currentContext;
-  if (string === null) {
-    return 1;
-  }
-  const repeat = resolveId(string, formElement, 'fx-repeat');
-
-  // const def = instance.getInstanceData();
-  if (repeat) {
-    return repeat.getAttribute('index');
-  }
-  return Number(1);
-});
-
-// Note that this is not to spec. The spec enforces elements to be returned from the
-// instance. However, we allow instances to actually be JSON!
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'instance'
-}, [], 'item()?', domFacade => instance(domFacade, null));
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'instance'
-}, ['xs:string?'], 'item()?', instance);
-const jsonToXml = (_dynamicContext, json) => {
-  const escapeXml = str => str.replace(/[^\u0009\u000A\u000D\u0020-\uD7FF\uE000-\uFFFD]/g, char => `\\u${char.charCodeAt(0).toString(16).padStart(4, '0')}`);
-  const convert = (obj, parent) => {
-    const type = typeof obj;
-    if (type === 'number') {
-      parent.setAttribute('type', 'number');
-      parent.textContent = obj.toString();
-    } else if (type === 'boolean') {
-      parent.setAttribute('type', 'boolean');
-      parent.textContent = obj.toString();
-    } else if (obj === null) {
-      const node = document.createElement('_');
-      node.setAttribute('type', 'null');
-      parent.appendChild(node);
-    } else if (type === 'string') {
-      parent.textContent = escapeXml(obj);
-    } else if (Array.isArray(obj)) {
-      parent.setAttribute('type', 'array');
-      obj.forEach(item => {
-        const node = document.createElement('_');
-        convert(item, node);
-        node.textContent = item;
-        parent.appendChild(node);
-      });
-    } else if (type === 'object') {
-      parent.setAttribute('type', 'object');
-      Object.entries(obj).forEach(([key, value]) => {
-        if (value) {
-          const childNode = document.createElement(key.replace(/[^a-zA-Z0-9_]/g, '_'));
-          convert(value, childNode);
-          parent.appendChild(childNode);
-        }
-      });
-    }
-  };
-  const root = document.createElement('json');
-  if (Array.isArray(json)) {
-    root.setAttribute('type', 'array');
-  } else {
-    root.setAttribute('type', 'object');
-  }
-  convert(json, root);
-  // return root.outerHTML;
-  console.log('xml', root);
-  return root;
-};
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'json2xml'
-}, ['item()?'], 'item()?', jsonToXml);
-const xmlToJson = (_dynamicContext, xml) => {
-  const isElementNode = node => node.nodeType === Node.ELEMENT_NODE;
-  const isTextNode = node => node.nodeType === Node.TEXT_NODE;
-  const parseNode = node => {
-    if (isElementNode(node)) {
-      const obj = {};
-      if (node.hasAttributes()) {
-        obj.type = node.getAttribute('type');
-      }
-      if (node.childNodes.length === 1 && isTextNode(node.firstChild)) {
-        return node.textContent;
-      }
-      for (const child of node.childNodes) {
-        const childName = child.nodeName;
-        const childValue = parseNode(child);
-        if (obj[childName]) {
-          if (!Array.isArray(obj[childName])) {
-            obj[childName] = [obj[childName]];
-          }
-          obj[childName].push(childValue);
-        } else {
-          obj[childName] = childValue;
-        }
+  size() {
+    return Object.keys(this.nodes).length;
+  },
+  /**
+   * Add a node to the dependency graph. If a node already exists, this method will do nothing.
+   */
+  addNode(node, data) {
+    if (!this.hasNode(node)) {
+      // Checking the arguments length allows the user to add a node with undefined data
+      if (arguments.length === 2) {
+        this.nodes[node] = data;
+      } else {
+        this.nodes[node] = node;
       }
-      return obj;
+      this.outgoingEdges[node] = [];
+      this.incomingEdges[node] = [];
     }
-    if (isTextNode(node)) {
-      return node.textContent;
+  },
+  /**
+   * Remove a node from the dependency graph. If a node does not exist, this method will do nothing.
+   */
+  removeNode(node) {
+    if (this.hasNode(node)) {
+      delete this.nodes[node];
+      delete this.outgoingEdges[node];
+      delete this.incomingEdges[node];
+      // [this.incomingEdges, this.outgoingEdges].forEach(function (edgeList) {
+      [this.incomingEdges, this.outgoingEdges].forEach(edgeList => {
+        Object.keys(edgeList).forEach(key => {
+          const idx = edgeList[key].indexOf(node);
+          if (idx >= 0) {
+            edgeList[key].splice(idx, 1);
+          }
+        }, this);
+      });
     }
-    return undefined;
-  };
-  const parser = new DOMParser();
-  const xmlDoc = parser.parseFromString(xml, 'application/xml');
-  const root = xmlDoc.documentElement;
-  return parseNode(root);
-};
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'xmltoJson'
-}, ['item()?'], 'item()?', xmlToJson);
-
-/*
-// Example usage:
-const xml = '<json type="object"><given>Mark</given><family>Smith</family></json>';
-console.log(xmlToJson(xml));
-*/
+  },
+  /**
+   * Check if a node exists in the graph
+   */
+  hasNode(node) {
+    // return this.nodes.hasOwnProperty(node);
 
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'depends'
-}, ['node()*'], 'item()?', (_dynamicContext, nodes) =>
-// console.log('depends on : ', nodes[0]);
-nodes[0]);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'event'
-}, ['xs:string?'], 'item()?', (dynamicContext, arg) => {
-  if (!arg) return null;
-  for (let ancestor = dynamicContext.currentContext.formElement; ancestor; ancestor = ancestor.parentNode) {
-    if (!ancestor.currentEvent) {
-      continue;
+    return Object.prototype.hasOwnProperty.call(this.nodes, node);
+  },
+  /**
+   * Get the data associated with a node name
+   */
+  getNodeData(node) {
+    if (this.hasNode(node)) {
+      return this.nodes[node];
     }
-
-    // We have a current event. read the property either from detail, or from the event
-    // itself.
-    // Check detail for custom events! This is how that is passed along
-    if (ancestor.currentEvent.detail && typeof ancestor.currentEvent.detail === 'object' && arg in ancestor.currentEvent.detail) {
-      return ancestor.currentEvent.detail[arg];
+    throw new Error(`Node does not exist: ${node}`);
+  },
+  /**
+   * Set the associated data for a given node name. If the node does not exist, this method will throw an error
+   */
+  setNodeData(node, data) {
+    if (this.hasNode(node)) {
+      this.nodes[node] = data;
+    } else {
+      throw new Error(`Node does not exist: ${node}`);
     }
-
-    // arg might be `code`, so currentEvent.code should work
-    if (arg.includes('.')) {
-      return _propertyLookup(ancestor.currentEvent, arg);
+  },
+  /**
+   * Add a dependency between two nodes. If either of the nodes does not exist,
+   * an Error will be thrown.
+   */
+  addDependency(from, to) {
+    if (!this.hasNode(from)) {
+      throw new Error(`Node does not exist: ${from}`);
     }
-    return ancestor.currentEvent[arg] || null;
-  }
-  return null;
-});
-function _propertyLookup(obj, path) {
-  const parts = path.split('.');
-  if (parts.length == 1) {
-    return obj[parts[0]];
-  }
-  return _propertyLookup(obj[parts[0]], parts.slice(1).join('.'));
-}
-
-// Implement the XForms standard functions here.
-registerXQueryModule(`
-    module namespace xf="${XFORMS_NAMESPACE_URI}";
-
-    declare %public function xf:boolean-from-string($str as xs:string) as xs:boolean {
-        lower-case($str) = "true" or $str = "1"
-    };
-`);
-
-// How to run XQUERY:
-/**
- registerXQueryModule(`
- module namespace my-custom-namespace = "my-custom-uri";
- (:~
- Insert attribute somewhere
- ~:)
- declare %public %updating function my-custom-namespace:do-something ($ele as element()) as xs:boolean {
-	if ($ele/@done) then false() else
-	(insert node
-	attribute done {"true"}
-	into $ele, true())
-};
- `)
- // At some point:
- const contextNode = null;
- const pendingUpdatesAndXdmValue = evaluateUpdatingExpressionSync('ns:do-something(.)', contextNode, null, null, {moduleImports: {'ns': 'my-custom-uri'}})
-
- console.log(pendingUpdatesAndXdmValue.xdmValue); // this is true or false, see function
-
- executePendingUpdateList(pendingUpdatesAndXdmValue.pendingUpdateList, null, null, null);
- */
-
-/**
- * @param input as string
- * @return {string}
- */
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'base64encode'
-}, ['xs:string?'], 'xs:string?', (_dynamicContext, string) => btoa(string));
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'local-date'
-}, [], 'xs:string?', (_dynamicContext, _string) => new Date().toLocaleDateString());
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'local-dateTime'
-}, [], 'xs:string?', (_dynamicContext, _string) => new Date().toLocaleString());
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri'
-}, [], 'xs:string?', (_dynamicContext, _string) => window.location.href);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-fragment'
-}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.hash);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-host'
-}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.host);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-query'
-}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.search);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-relpath'
-}, [], 'xs:string?', (_dynamicContext, _arg) => {
-  const path = new URL(window.location.href).pathname;
-  return path.substring(0, path.lastIndexOf('/') + 1);
-});
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-path'
-}, [], 'xs:string?', (_dynamicContext, _arg) => new URL(window.location.href).pathname);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-port'
-}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.port);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-param'
-}, ['xs:string?'], 'xs:string?', (_dynamicContext, arg) => {
-  if (!arg) return null;
-  const {
-    search
-  } = window.location;
-  const urlparams = new URLSearchParams(search);
-  const param = urlparams.get(arg);
-  return param || '';
-});
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-scheme'
-}, [], 'xs:string?', (_dynamicContext, _arg) => new URL(window.location.href).protocol);
-registerCustomXPathFunction({
-  namespaceURI: XFORMS_NAMESPACE_URI,
-  localName: 'uri-scheme-specific-part'
-}, [], 'xs:string?', (_dynamicContext, _arg) => {
-  const uri = window.location.href;
-  return uri.substring(uri.indexOf(':') + 1, uri.length);
-});
-
-/**
- * @param {Node} node
- * @returns string
- */
-/*
-export static getDocPath(node) {
-  const path = fx.evaluateXPathToString('path()', node);
-  // Path is like `$default/x[1]/y[1]`
-  const shortened = XPathUtil.shortenPath(path);
-  return shortened.startsWith('/') ? `${shortened}` : `/${shortened}`;
-}
-*/
-
-class XPathUtil {
+    if (!this.hasNode(to)) {
+      throw new Error(`Node does not exist: ${to}`);
+    }
+    if (this.outgoingEdges[from].indexOf(to) === -1) {
+      this.outgoingEdges[from].push(to);
+    }
+    if (this.incomingEdges[to].indexOf(from) === -1) {
+      this.incomingEdges[to].push(from);
+    }
+    return true;
+  },
+  /**
+   * Remove a dependency between two nodes.
+   */
+  removeDependency(from, to) {
+    let idx;
+    if (this.hasNode(from)) {
+      idx = this.outgoingEdges[from].indexOf(to);
+      if (idx >= 0) {
+        this.outgoingEdges[from].splice(idx, 1);
+      }
+    }
+    if (this.hasNode(to)) {
+      idx = this.incomingEdges[to].indexOf(from);
+      if (idx >= 0) {
+        this.incomingEdges[to].splice(idx, 1);
+      }
+    }
+  },
+  /**
+   * Return a clone of the dependency graph. If any custom data is attached
+   * to the nodes, it will only be shallow copied.
+   */
+  clone() {
+    const source = this;
+    const result = new DepGraph();
+    const keys = Object.keys(source.nodes);
+    keys.forEach(n => {
+      result.nodes[n] = source.nodes[n];
+      result.outgoingEdges[n] = source.outgoingEdges[n].slice(0);
+      result.incomingEdges[n] = source.incomingEdges[n].slice(0);
+    });
+    return result;
+  },
   /**
-   * Recursively check AST for any dynamic expression components.
+   * Get an array containing the direct dependencies of the specified node.
+   *
+   * Throws an Error if the specified node does not exist.
    */
-  static containsDynamicContent(astNode) {
-    if (!astNode) return false;
-
-    // Location paths, function calls, or variable refs are dynamic
-    if (astNode.type === 'pathExpression' || astNode.type === 'functionCall' || astNode.type === 'variableReference') {
-      return true;
+  directDependenciesOf(node) {
+    if (this.hasNode(node)) {
+      return this.outgoingEdges[node].slice(0);
     }
-
-    // Recursively check any child expressions
-    for (const key in astNode) {
-      if (astNode[key] && typeof astNode[key] === 'object') {
-        if (Array.isArray(astNode[key])) {
-          for (const item of astNode[key]) {
-            if (XPathUtil.containsDynamicContent(item)) return true;
-          }
-        } else {
-          if (XPathUtil.containsDynamicContent(astNode[key])) return true;
-        }
+    throw new Error(`Node does not exist: ${node}`);
+  },
+  /**
+   * Get an array containing the nodes that directly depend on the specified node.
+   *
+   * Throws an Error if the specified node does not exist.
+   */
+  directDependantsOf(node) {
+    if (this.hasNode(node)) {
+      return this.incomingEdges[node].slice(0);
+    }
+    throw new Error(`Node does not exist: ${node}`);
+  },
+  /**
+   * Get an array containing the nodes that the specified node depends on (transitively).
+   *
+   * Throws an Error if the graph has a cycle, or the specified node does not exist.
+   *
+   * If `leavesOnly` is true, only nodes that do not depend on any other nodes will be returned
+   * in the array.
+   */
+  dependenciesOf(node, leavesOnly) {
+    if (this.hasNode(node)) {
+      const result = [];
+      const DFS = createDFS(this.outgoingEdges, leavesOnly, result, this.circular);
+      DFS(node);
+      const idx = result.indexOf(node);
+      if (idx >= 0) {
+        result.splice(idx, 1);
       }
+      return result;
     }
-    return false;
-  }
-
+    throw new Error(`Node does not exist: ${node}`);
+  },
   /**
-   * creates DOM Nodes from an XPath locationpath expression. Support namespaced and un-namespaced
-   * nodes.
-   * E.g. 'foo/bar' creates an element 'foo' with an child element 'bar'
-   * 'foo/@bar' creates a 'foo' element with an 'bar' attribute
+   * get an array containing the nodes that depend on the specified node (transitively).
    *
-   * supports multiple steps
+   * Throws an Error if the graph has a cycle, or the specified node does not exist.
    *
-   * @param xpath
-   * @param doc {XMLDocument}
-   * @param fore
-   * @return {Node|Attr}
+   * If `leavesOnly` is true, only nodes that do not have any dependants will be returned in the array.
    */
-  static createNodesFromXPath(xpath, doc, fore) {
-    const resolveNamespace = createNamespaceResolver(xpath, fore);
-    if (!doc) {
-      doc = document.implementation.createDocument(null, null, null); // Create a new XML document if not provided
+  dependantsOf(node, leavesOnly) {
+    if (this.hasNode(node)) {
+      const result = [];
+      const DFS = createDFS(this.incomingEdges, leavesOnly, result, this.circular);
+      DFS(node);
+      const idx = result.indexOf(node);
+      if (idx >= 0) {
+        result.splice(idx, 1);
+      }
+      return result;
+    }
+    throw new Error(`Node does not exist: ${node}`);
+  },
+  /**
+   * Get an array of nodes that have no dependants (i.e. nothing depends on them).
+   */
+  entryNodes() {
+    const self = this;
+    return Object.keys(this.nodes).filter(node => self.incomingEdges[node].length === 0);
+  },
+  /**
+   * Construct the overall processing order for the dependency graph.
+   *
+   * Throws an Error if the graph has a cycle.
+   *
+   * If `leavesOnly` is true, only nodes that do not depend on any other nodes will be returned.
+   */
+  overallOrder(leavesOnly) {
+    const self = this;
+    const result = [];
+    const keys = Object.keys(this.nodes);
+    if (keys.length === 0) {
+      return result; // Empty graph
     }
 
-    const parts = [];
-    let scratch = '';
-    let isInPredicate = false;
-    for (const char of xpath.split('')) {
-      if (!isInPredicate) {
-        // We are not in a predicate, the slash will terminate our step.
-        if (char === '/') {
-          parts.push(scratch);
-          scratch = '';
-          continue;
-        }
-        scratch += char;
-        if (char === '[') {
-          isInPredicate = true;
-        }
-        continue;
-      }
-      // We are in a predicate! So the only interesting token is ']', which means we're out of one.
-      scratch += char;
-      if (char === ']') {
-        isInPredicate = false;
-      }
+    if (!this.circular) {
+      // Look for cycles - we run the DFS starting at all the nodes in case there
+      // are several disconnected subgraphs inside this dependency graph.
+      const CycleDFS = createDFS(this.outgoingEdges, false, [], this.circular);
+      keys.forEach(n => {
+        CycleDFS(n);
+      });
+    }
+    const DFS = createDFS(this.outgoingEdges, leavesOnly, result, this.circular);
+    // Find all potential starting points (nodes with nothing depending on them) an
+    // run a DFS starting at these points to get the order
+    keys.filter(node => self.incomingEdges[node].length === 0).forEach(n => {
+      DFS(n);
+    });
+
+    // If we're allowing cycles - we need to run the DFS against any remaining
+    // nodes that did not end up in the initial result (as they are part of a
+    // subgraph that does not have a clear starting point)
+    if (this.circular) {
+      keys.filter(node => result.indexOf(node) === -1).forEach(n => DFS(n));
+    }
+    return result;
+  }
+};
+
+// Create some aliases
+DepGraph.prototype.directDependentsOf = DepGraph.prototype.directDependantsOf;
+DepGraph.prototype.dependentsOf = DepGraph.prototype.dependantsOf;
+
+function prettifyXml(source) {
+  const xmlDoc = new DOMParser().parseFromString(source, 'application/xml');
+  const xsltDoc = new DOMParser().parseFromString([
+  // describes how we want to modify the XML - indent everything
+  '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">', '  <xsl:output method="xml" indent="yes" omit-xml-declaration="yes"/>', '  <xsl:strip-space elements="*"/>', '  <xsl:template match="text()">',
+  // change to just text() to strip space in text nodes
+  '    <xsl:value-of select="normalize-space(.)"/>', '  </xsl:template>', '  <xsl:template match="node()|@*">', '    <xsl:copy>', '        <xsl:apply-templates select="node()|@*"/>', '    </xsl:copy>', '  </xsl:template>', '</xsl:stylesheet>'].join('\n'), 'application/xml');
+  const xsltProcessor = new XSLTProcessor();
+  xsltProcessor.importStylesheet(xsltDoc);
+  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
+  const resultXml = new XMLSerializer().serializeToString(resultDoc);
+  return resultXml;
+}
+
+const XFORMS_NAMESPACE_URI = 'http://www.w3.org/2002/xforms';
+const createdNamespaceResolversByXPathQueryAndNode = new Map();
+
+// A global registry of function names that are declared in Fore by a developer using the
+// `fx-function` element. These should be available without providing a prefix as well
+const globallyDeclaredFunctionLocalNames = [];
+function getCachedNamespaceResolver(xpath, node) {
+  if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) {
+    return null;
+  }
+  return createdNamespaceResolversByXPathQueryAndNode.get(xpath).get(node) || null;
+}
+function setCachedNamespaceResolver(xpath, node, resolver) {
+  if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) {
+    return createdNamespaceResolversByXPathQueryAndNode.set(xpath, new Map());
+  }
+  return createdNamespaceResolversByXPathQueryAndNode.get(xpath).set(node, resolver);
+}
+const xhtmlNamespaceResolver = prefix => {
+  if (!prefix) {
+    return 'http://www.w3.org/1999/xhtml';
+  }
+  return undefined;
+};
+
+/**
+ * Resolve an id in scope. Behaves like the algorithm defined on https://www.w3.org/community/xformsusers/wiki/XForms_2.0#idref-resolve
+ *
+ * @param {string} id
+ * @param {Node} sourceObject
+ * @param {string} nodeName
+ *
+ * @returns {HTMLElement} The element with that ID, resolved with respect to repeats
+ */
+function resolveId(id, sourceObject, nodeName = null) {
+  const query = 'outermost(ancestor-or-self::fx-fore[1]/(descendant::fx-fore|descendant::*[@id = $id]))[not(self::fx-fore)]';
+  /*
+        if (nodeName === 'fx-instance') {
+            // Instance elements can only be in the `model` element
+            // query = 'ancestor-or-self::fx-fore[1]/fx-model/fx-instance[@id = $id]';
+             const fore = Fore.getFore(sourceObject);
+            const instances = fore.getModel().instances;
+            const targetInstance = instances.find(i => i.id === id);
+            return targetInstance;
+        return document.getElementById(id);
+  }
+    */
+  if (sourceObject.nodeType === Node.TEXT_NODE) {
+    sourceObject = sourceObject.parentNode;
+  }
+  if (sourceObject.nodeType === Node.ATTRIBUTE_NODE) {
+    sourceObject = sourceObject.ownerElement;
+  }
+  if (sourceObject.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+    sourceObject = sourceObject.parentNode.host;
+  }
+  const ownerForm = sourceObject.localName === 'fx-fore' ? sourceObject : sourceObject.closest('fx-fore');
+  const elementsWithId = ownerForm.querySelectorAll(`[id='${id}']`);
+  if (elementsWithId.length === 1) {
+    // A single one is found. Assume no ID reuse.
+    const targetObject = elementsWithId[0];
+    if (nodeName && targetObject.localName !== nodeName) {
+      return null;
+    }
+    return targetObject;
+  }
+  const allMatchingTargetObjects = evaluateXPathToNodes$1(query, sourceObject, null, {
+    id
+  }, {
+    namespaceResolver: xhtmlNamespaceResolver
+  });
+  if (allMatchingTargetObjects.length === 0) {
+    return null;
+  }
+  if (allMatchingTargetObjects.length === 1 && evaluateXPathToBoolean$1('(ancestor::fx-fore | ancestor::fx-repeat)[last()]/self::fx-fore', allMatchingTargetObjects[0], null, null, {
+    namespaceResolver: xhtmlNamespaceResolver
+  })) {
+    // If the target element is not repeated, then the search for the target object is trivial since
+    // there is only one associated with the target element that bears the matching ID. This is true
+    // regardless of whether or not the source object is repeated. However, if the target element is
+    // repeated, then additional information must be used to help select a target object from among
+    // those associated with the identified target element.
+    const targetObject = allMatchingTargetObjects[0];
+    if (nodeName && targetObject.localName !== nodeName) {
+      return null;
     }
-    // Flush the last step
-    parts.push(scratch);
-    let rootNode = null;
-    let currentNode = null;
-    for (const part of parts) {
-      if (!part) continue; // Skip empty parts (e.g., leading slashes)
-      if (part === '.') {
-        // A '.' does not introduce new elements
-        continue;
-      }
+    return targetObject;
+  }
 
-      // Handle attributes
-      if (part.startsWith('@')) {
-        const attrName = part.slice(1); // Strip '@'
-        if (!currentNode) {
-          return doc.createAttribute(attrName, '');
-        }
-        currentNode.setAttribute(attrName, '');
-      } else {
-        // We are a predicate selector! Handle it
-        // This regex matches strings like:
-        // - listBibl
-        // - tei:listBibl
-        // - listBibl[@type="foo"]
-        // - listBibl[@type="foo"][@class="bar"]
-        // It will also match strings like
-        // - listBibl[ancestor-or-self::foo]
-        // which will be filtered out later.
+  // SPEC:
 
-        const result = part.match(/^(?<name>[\w:-]+)(?<predicates>(\[[^]*\])*)$/);
-        if (!result) {
-          throw new Error(`No element could be made from the XPath step ${part}. It must be of these forms: 'localName', 'prefix:name', 'name[@attr="value"]' et cetera.`);
-        }
-        const {
-          name,
-          predicates
-        } = result.groups;
-        // Handle namespaces if present
-        const [prefix, localName] = name.includes(':') ? name.split(':') : [null, name];
-        const namespace = resolveNamespace(prefix);
-        const newElement = namespace ? doc.createElementNS(namespace, localName) : doc.createElement(localName);
-        if (predicates) {
-          const predicateExtractionRegex = /(\[@(?<name>[\w:-]*)\s?=\s?["'](?<value>[^"']*)['"]\])+/g;
-          const parsedPredicates = predicates.matchAll(predicateExtractionRegex).map(match => ({
-            attrName: match.groups.name,
-            value: match.groups.value
-          }));
-          for (const {
-            attrName,
-            value
-          } of parsedPredicates) {
-            newElement.setAttribute(attrName, value);
+  // 12.2.1 References to Elements within a repeat Element
+
+  // When the target element that is identified by the IDREF of a source object has one or more
+  // repeat elements as ancestors, then the set of ancestor repeats are partitioned into two
+  // subsets, those in common with the source element and those that are not in common. Any ancestor
+  // repeat elements of the target element not in common with the source element are descendants of
+  // the repeat elements that the source and target element have in common, if any.
+
+  // For the repeat elements that are in common, the desired target object exists in the same set of
+  // run-time objects that contains the source object. Then, for each ancestor repeat of the target
+  // element that is not in common with the source element, the current index of the repeat
+  // determines the set of run-time objects that contains the desired target object.
+  for (const ancestorRepeatItem of evaluateXPathToNodes$1('ancestor::fx-repeatitem => reverse()', sourceObject, null, null, {
+    namespaceResolver: xhtmlNamespaceResolver
+  })) {
+    const foundTargetObjects = allMatchingTargetObjects.filter(to => XPathUtil.contains(ancestorRepeatItem, to));
+    switch (foundTargetObjects.length) {
+      case 0:
+        // Nothing found: ignore
+        break;
+      case 1:
+        {
+          // A single one is found: the target object is directly in a common repeat
+          const targetObject = foundTargetObjects[0];
+          if (nodeName && targetObject.localName !== nodeName) {
+            return null;
           }
+          return targetObject;
         }
-        if (!rootNode) {
-          rootNode = newElement; // Set as the root node
-        } else {
-          currentNode.appendChild(newElement);
+      default:
+        {
+          // Multiple target objects are found: they are in a repeat that is not common with the
+          // source object We found a target object in a common repeat! We now need to find the one
+          // that is in the repeatitem identified at the current index
+          const targetObject = foundTargetObjects.find(to => evaluateXPathToNodes$1('every $ancestor of ancestor::fx-repeatitem satisfies $ancestor is $ancestor/../child::fx-repeatitem[../@repeat-index]', to, null, {}));
+          if (!targetObject) {
+            // Nothing valid found for whatever reason. This might be something dynamic?
+            return null;
+          }
+          if (nodeName && targetObject.localName !== nodeName) {
+            return null;
+          }
+          return targetObject;
         }
-        currentNode = newElement;
-      }
-    }
-    if (!rootNode) {
-      throw new Error('Invalid XPath; no root element could be created.');
     }
-    return rootNode;
   }
+  // We found no target objects in common repeats. The id is unresolvable
+  return null;
+}
 
-  /**
-   * looks up namespace on ownerForm. Though not strictly in the sense of resolving namespaces in XML, the
-   * fx-fore element is a convenient place to put namespace declarations for 2 reasons:
-   * - this way namespaces are scoped to a Fore element
-   * - as fx-fore is a web component we can add our xmlns attributes as we got no restrictions to attributes
-   *   though strictly speaking they are no xmlns declarations and just serve the purpose of namespace lookup.
-   *
-   * @param boundElement
-   * @param prefix
-   * @return {string}
-   */
-  static lookupNamespace(ownerForm, prefix) {
-    return ownerForm.getAttribute(`xmlns:${prefix}`);
+// Make namespace resolving use the `instance` element that is related to here
+const xmlDocument = new DOMParser().parseFromString('<xml />', 'text/xml');
+const instanceReferencesByQuery = new Map();
+function findInstanceReferences(xpathQuery) {
+  if (!xpathQuery.includes('instance')) {
+    // No call to the instance function anyway: short-circuit and prevent AST processing
+    return [];
   }
-  static querySelectorAll(querySelector, start) {
-    const queue = [start];
-    const found = [];
-    while (queue.length) {
-      const item = queue.shift();
-      for (const child of Array.from(item.children).reverse()) {
-        queue.unshift(child);
-      }
-      if (item.matches && item.matches('template')) {
-        queue.unshift(item.content);
-      }
-      if (item.matches && item.matches(querySelector)) {
-        found.push(item);
-      }
-    }
-    return found;
+  if (instanceReferencesByQuery.has(xpathQuery)) {
+    return instanceReferencesByQuery.get(xpathQuery);
   }
+  const xpathAST = parseScript(xpathQuery, {}, xmlDocument);
+  const instanceReferences = evaluateXPathToStrings$1(`descendant::xqx:functionCallExpr
+				[xqx:functionName = "instance"]
+				/xqx:arguments
+				/xqx:stringConstantExpr
+				/xqx:value`, xpathAST, null, {}, {
+    namespaceResolver: prefix => prefix === 'xqx' ? 'http://www.w3.org/2005/XQueryX' : undefined
+  });
+  instanceReferencesByQuery.set(xpathQuery, instanceReferences);
+  return instanceReferences;
+}
+/**
+ * @typedef {function(string):string} NamespaceResolver
+ */
 
-  /**
-   * Alternative to `contains` that respects shadowroots
-   * @param {Node} ancestor
-   * @param {Node} descendant
-   * @returns {boolean}
-   */
-  static contains(ancestor, descendant) {
-    while (descendant) {
-      if (descendant === ancestor) {
-        return true;
-      }
-      if (descendant.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-        // We are passing a shadow root boundary
-        descendant = descendant.host;
-      } else {
-        descendant = descendant.parentNode;
-      }
+/**
+ * @function
+ * Resolve a namespace. Needs a namespace prefix and the element that is most closely related to the
+ * XPath in which the namespace is being resolved. The prefix will be resolved by using the
+ * ancestry of said element.
+ *
+ * It has two ways of doing so:
+ *
+ * - If the prefix is defined in an `xmlns:XXX="YYY"` namespace declaration, it will return 'YYY'.
+ * - If the prefix is the empty prefix and there is an `xpath-default-namespace="YYY"` attribute in
+ * - the * ancestry, that attribute will be used and 'YYY' will be returned
+ *
+ * @param  {string} xpathQuery
+ * @param  {HTMLElement} formElement
+ * @returns {NamespaceResolver} The namespace resolver for this context
+ */
+function createNamespaceResolver(xpathQuery, formElement) {
+  const cachedResolver = getCachedNamespaceResolver(xpathQuery, formElement);
+  if (cachedResolver) {
+    return cachedResolver;
+  }
+  let instanceReferences = findInstanceReferences(xpathQuery);
+  if (instanceReferences.length === 0) {
+    // No instance functions. Look up further in the hierarchy to see if we can deduce the intended context from there
+    const ancestorComponent = formElement.parentNode && formElement.parentNode.nodeType === formElement.ELEMENT_NODE && formElement.parentNode.closest('[ref]');
+    if (ancestorComponent) {
+      const resolver = createNamespaceResolver(ancestorComponent.getAttribute('ref'), ancestorComponent);
+      setCachedNamespaceResolver(xpathQuery, formElement, resolver);
+      return resolver;
     }
-    return false;
+    // Nothing found: let's just assume we're supposed to use the `default` instance
+    instanceReferences = ['default'];
+  }
+  if (instanceReferences.length === 1) {
+    // console.log(`resolving ${xpathQuery} with ${instanceReferences[0]}`);
+    let instance;
+    if (instanceReferences[0] === 'default') {
+      /**
+       * @type {HTMLElement}
+       */
+      const actualForeElement = evaluateXPathToFirstNode$1('ancestor-or-self::fx-fore[1]', formElement, null, null, {
+        namespaceResolver: xhtmlNamespaceResolver
+      });
+      instance = actualForeElement && actualForeElement.querySelector('fx-instance');
+    } else {
+      instance = resolveId(instanceReferences[0], formElement, 'fx-instance');
+    }
+    if (instance && instance.hasAttribute('xpath-default-namespace')) {
+      const xpathDefaultNamespace = instance.getAttribute('xpath-default-namespace');
+      /*
+            console.log(
+              `Resolving the xpath ${xpathQuery} with the default namespace set to ${xpathDefaultNamespace}`,
+            );
+      */
+      /**
+       * @type {NamespaceResolver}
+       */
+      const resolveNamespacePrefix = prefix => {
+        if (!prefix) {
+          return xpathDefaultNamespace;
+        }
+        return undefined;
+      };
+      setCachedNamespaceResolver(xpathQuery, formElement, resolveNamespacePrefix);
+      return resolveNamespacePrefix;
+    }
+  }
+  /*
+  if (instanceReferences.length > 1) {
+    console.warn(
+      `More than one instance is used in the query "${xpathQuery}". The default namespace resolving will be used`,
+    );
   }
+  */
+
+  const xpathDefaultNamespace = evaluateXPathToString$1('ancestor-or-self::*/@xpath-default-namespace[last()]', formElement) || '';
 
   /**
-   * Alternative to `closest` that respects subcontrol boundaries
-   *
-   * @param {string} querySelector
-   * @param {Node} start
-   * @returns {HTMLElement}
+   * @type {NamespaceResolver}
    */
-  static getClosest(querySelector, start) {
-    while (start && !start.matches || !start.matches(querySelector)) {
-      if (start.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-        // We are passing a shadow root boundary
-        start = start.host;
-        continue;
-      }
-      if (start.nodeType === Node.ATTRIBUTE_NODE) {
-        // We are passing an attribute
-        start = start.ownerElement;
-        continue;
-      }
-      if (start.nodeType === Node.TEXT_NODE) {
-        start = start.parentNode;
+  const resolveNamespacePrefix = function resolveNamespacePrefix(prefix) {
+    if (prefix === '') {
+      return xpathDefaultNamespace;
+    }
+
+    // Note: ideally we should use Node#lookupNamespaceURI. However, the nodes we are passed are
+    // XML. The best we can do is emulate the `xmlns:xxx` namespace declarations by regarding them as
+    // attributes. Which they technically ARE NOT!
+
+    return evaluateXPathToString$1('ancestor-or-self::*/@*[name() = "xmlns:" || $prefix][last()]', formElement, null, {
+      prefix
+    });
+  };
+  setCachedNamespaceResolver(xpathQuery, formElement, resolveNamespacePrefix);
+  return resolveNamespacePrefix;
+}
+function createNamespaceResolverForNode(query, contextNode, formElement) {
+  if ((contextNode && contextNode.ownerDocument || contextNode) === window.document) {
+    // Running a query on the HTML DOM. Don't bother resolving namespaces in any other way
+    return xhtmlNamespaceResolver;
+  }
+  return createNamespaceResolver(query, formElement);
+}
+
+/**
+ * Implementation of the functionNameResolver passed to FontoXPath to
+ * redirect function resolving for unprefixed functions to either the fn or the xf namespace
+ */
+// eslint-disable-next-line no-unused-vars
+function functionNameResolver({
+  prefix,
+  localName
+}, _arity) {
+  switch (localName) {
+    // TODO: put the full XForms library functions set here
+    case 'context':
+    case 'base64encode':
+    case 'boolean-from-string':
+    case 'current':
+    case 'depends':
+    case 'event':
+    case 'fore-attr':
+    case 'index':
+    case 'instance':
+    case 'json2xml':
+    case 'xml2Json':
+    case 'log':
+    case 'parse':
+    case 'local-date':
+    case 'local-dateTime':
+    case 'logtree':
+    case 'uri':
+    case 'uri-fragment':
+    case 'uri-host':
+    case 'uri-param':
+    case 'uri-path':
+    case 'uri-relpath':
+    case 'uri-port':
+    case 'uri-query':
+    case 'uri-scheme':
+    case 'uri-scheme-specific-part':
+      return {
+        namespaceURI: XFORMS_NAMESPACE_URI,
+        localName
+      };
+    default:
+      if (prefix === '' && globallyDeclaredFunctionLocalNames.includes(localName)) {
+        // The function has been declared without a prefix and is called here without a prefix.
+        // Just make this work. It is the developer-friendly way
+        return {
+          namespaceURI: 'http://www.w3.org/2005/xquery-local-functions',
+          localName
+        };
       }
-      if (start.matches('fx-fore')) {
-        // Subform reached. Bail out
-        return null;
+      if (prefix === 'fn' || prefix === '') {
+        return {
+          namespaceURI: 'http://www.w3.org/2005/xpath-functions',
+          localName
+        };
       }
-      start = start.parentNode;
-      if (!start) {
-        return null;
+      if (prefix === 'local') {
+        return {
+          namespaceURI: 'http://www.w3.org/2005/xquery-local-functions',
+          localName
+        };
       }
-    }
-    return start;
+      return null;
   }
+}
 
-  /**
-   * returns next bound element upwards in tree
-   * @param {Node} start where to start the search
-   * @returns {*|null}
-   */
-  static getParentBindingElement(start) {
-    /*    if (start.parentNode.host) {
-          const { host } = start.parentNode;
-          if (host.hasAttribute('ref')) {
-            return host;
-          }
-        } else */
-    if (start.parentNode && (start.parentNode.nodeType !== Node.DOCUMENT_NODE || start.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE)) {
-      return this.getClosest('fx-control[ref],fx-upload[ref],fx-group[ref],fx-repeat[ref], fx-switch[ref],fx-repeatitem', start.parentNode);
-    }
-    return null;
+/**
+ * Get the variables in scope of the form element. These are the values of the variables that
+ * logically precede the formElement that declares the XPath
+ *
+ * @param  {Node}  formElement  The element that declares the XPath
+ *
+ * @returns  {Object}  A key-value mapping of the variables
+ */
+function getVariablesInScope(formElement) {
+  let closestActualFormElement = formElement;
+  while (closestActualFormElement && !('inScopeVariables' in closestActualFormElement)) {
+    closestActualFormElement = closestActualFormElement.nodeType === Node.ATTRIBUTE_NODE ? closestActualFormElement.ownerElement : closestActualFormElement.parentNode;
   }
-
-  /**
-   * Checks whether the specified path expression is an absolute path.
-   *
-   * @param {string} path the path expression.
-   * @returns {boolean} <code>true</code> if specified path expression is an absolute
-   * path, otherwise <code>false</code>.
-   */
-  static isAbsolutePath(path) {
-    return path != null && (path.startsWith('/') || path.startsWith('instance(') || path.startsWith('$'));
+  if (!closestActualFormElement) {
+    return {};
   }
-
-  /**
-   * @param {string} ref
-   */
-  static isSelfReference(ref) {
-    return ref === '.' || ref === './text()' || ref === 'text()' || ref === '' || ref === null;
+  const variables = {};
+  if (closestActualFormElement.inScopeVariables) {
+    for (const key of closestActualFormElement.inScopeVariables.keys()) {
+      const varElementOrValue = closestActualFormElement.inScopeVariables.get(key);
+      if (!varElementOrValue) {
+        continue;
+      }
+      if (varElementOrValue.nodeType) {
+        // We are a var element, set the value to the value computed there
+        variables[key] = varElementOrValue.value;
+        // variables[key] = varElementOrValue.inScopeVariables.get(key);
+      } else {
+        // We are a direct value. This is used to leak in event variables
+        variables[key] = varElementOrValue;
+      }
+    }
   }
+  return variables;
+}
 
-  /**
-   * returns the instance id from a complete XPath using `instance()` function.
-   *
-   * Will return 'default' in case no ref is given at all or the `instance()` function is called without arg.
-   *
-   * Otherwise instance id is extracted from function and returned. If all fails null is returned.
-   * @param {string} ref
-   * @param {HTMLElement}  boundElement  The element related to this ref. Used to resolve variables
-   * @returns {string}
-   */
-  static getInstanceId(ref, boundElement) {
-    if (!ref) {
-      return 'default';
-    }
-    if (ref.startsWith('instance()')) {
-      return 'default';
-    }
-    if (ref.startsWith('instance(')) {
-      const result = ref.substring(ref.indexOf('(') + 1);
-      return result.substring(1, result.indexOf(')') - 1);
-    }
-    if (ref.startsWith('$')) {
-      // this variable might actually point to an instance
-      const variableName = ref.match(/\$(?<variableName>[a-zA-Z0-9\-\_]+).*/)?.groups?.variableName;
-      let closestActualFormElement = boundElement;
-      while (closestActualFormElement && !('inScopeVariables' in closestActualFormElement)) {
-        closestActualFormElement = closestActualFormElement.nodeType === Node.ATTRIBUTE_NODE ? closestActualFormElement.ownerElement : closestActualFormElement.parentNode;
-      }
-      const correspondingVariable = closestActualFormElement?.inScopeVariables?.get(variableName);
-      if (!correspondingVariable) {
-        return null;
+/**
+ * Evaluate an XPath to _any_ type. When possible, prefer to use any other function to ensure the
+ * type of the output is more predictable.
+ *
+ * @param  {string} xpath  The XPath to run
+ * @param  {Node} contextNode The start of the XPath
+ * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
+ * @param  {Object} variables  Any variables to pass to the XPath
+ * @param  {Object} options  Any options to pass to the XPath
+ *
+ * @returns {any[]}
+ */
+/*
+export function evaluateXPath(xpath, contextNode, formElement, variables = {}, options={}, domFacade = null) {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    const variablesInScope = getVariablesInScope(formElement);
+
+    return fxEvaluateXPath(
+        xpath,
+        contextNode,
+        domFacade,
+        {...variablesInScope, ...variables},
+        fxEvaluateXPath.ALL_RESULTS_TYPE,
+        {
+			debug: true,
+            currentContext: {formElement, variables},
+            moduleImports: {
+                xf: XFORMS_NAMESPACE_URI,
+            },
+            functionNameResolver,
+            namespaceResolver,
+			language: options.language || evaluateXPath.XPATH_3_1
+        },
+    );
+}
+*/
+function evaluateXPath(xpath, contextNode, formElement, variables = {}, options = {}) {
+  try {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    const variablesInScope = getVariablesInScope(formElement);
+    const result = evaluateXPath$1(xpath, contextNode, null, {
+      ...variablesInScope,
+      ...variables
+    }, evaluateXPath$1.ALL_RESULTS_TYPE, {
+      xmlSerializer: new XMLSerializer(),
+      debug: true,
+      currentContext: {
+        formElement,
+        variables
+      },
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI
+      },
+      functionNameResolver,
+      namespaceResolver,
+      language: options.language || evaluateXPath$1.XPATH_3_1_LANGUAGE
+    });
+    // console.log('evaluateXPath',xpath, result);
+    return result;
+  } catch (e) {
+    formElement.dispatchEvent(new CustomEvent('error', {
+      composed: false,
+      bubbles: true,
+      detail: {
+        origin: formElement,
+        message: `Expression '${xpath}' failed: ${e}`,
+        expr: xpath,
+        level: 'Error'
       }
-      return this.getInstanceId(correspondingVariable.valueQuery, correspondingVariable);
-    }
-    return null;
-  }
+    }));
 
-  /**
-   * @param {HTMLElement} boundElement
-   * @param {string} path
-   * @returns {string}
-   */
-  static resolveInstance(boundElement, path) {
-    let instanceId = XPathUtil.getInstanceId(path, boundElement);
-    if (!instanceId) {
-      instanceId = XPathUtil.getInstanceId(boundElement.getAttribute('ref'), boundElement);
-    }
-    if (instanceId !== null) {
-      return instanceId;
-    }
-    const parentBinding = XPathUtil.getParentBindingElement(boundElement);
-    if (parentBinding) {
-      return this.resolveInstance(parentBinding, path);
-    }
-    return 'default';
+    /*
+        formElement.dispatchEvent(
+            new CustomEvent('error', {
+                composed: false,
+                bubbles: true,
+                cancelable:true,
+                detail: {
+                    origin: formElement,
+                    message: `Expression '${xpath}' failed`,
+                    expr:xpath,
+                    level:'Error'},
+            }),
+        );
+    */
+    // Return 'nothing' in hope the rest of the page can forgive this
+    return [];
   }
-
-  /**
-   * @param {Node} node
-   * @returns string
-   */
-  /*
-  static getDocPath(node) {
-    const path = fx.evaluateXPathToString('path()', node);
-    // Path is like `$default/x[1]/y[1]`
-    const shortened = XPathUtil.shortenPath(path);
-    return shortened.startsWith('/') ? `${shortened}` : `/${shortened}`;
+}
+/**
+ * Evaluate an XPath to the first Node
+ *
+ * @param  {string} xpath  The XPath to run
+ * @param  {Node} contextNode The start of the XPath
+ * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
+ * @returns {Node} The first node found in the XPath
+ */
+function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
+  try {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    const variablesInScope = getVariablesInScope(formElement);
+    const result = evaluateXPathToFirstNode$1(xpath, contextNode, null, variablesInScope, {
+      defaultFunctionNamespaceURI: XFORMS_NAMESPACE_URI,
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI
+      },
+      currentContext: {
+        formElement
+      },
+      functionNameResolver,
+      namespaceResolver,
+      xmlSerializer: new XMLSerializer()
+    });
+    // console.log('evaluateXPathToFirstNode',xpath, result);
+    return result;
+  } catch (e) {
+    formElement.dispatchEvent(new CustomEvent('error', {
+      composed: false,
+      bubbles: true,
+      detail: {
+        origin: formElement,
+        message: `Expression '${xpath}' failed: ${e}`,
+        expr: xpath,
+        level: 'Error'
+      }
+    }));
   }
-  */
+  return null;
+}
 
-  /**
-   * @param {Node} node
-   * @param {string} instanceId
-   * @returns string
-   */
-  static getPath(node, instanceId) {
-    const path = evaluateXPathToString$1('path()', node);
-    // Path is like `$default/x[1]/y[1]`
-    const shortened = XPathUtil.shortenPath(path);
-    return shortened.startsWith('/') ? `$${instanceId}${shortened}` : `$${instanceId}/${shortened}`;
+/**
+ * Evaluate an XPath to all nodes
+ *
+ * @param  {string} xpath  The XPath to run
+ * @param  {Node} contextNode The start of the XPath
+ * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
+ * @return {Node[]}  All nodes
+ */
+function evaluateXPathToNodes(xpath, contextNode, formElement) {
+  try {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    const variablesInScope = getVariablesInScope(formElement);
+    const result = evaluateXPathToNodes$1(xpath, contextNode, null, variablesInScope, {
+      currentContext: {
+        formElement
+      },
+      functionNameResolver,
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI
+      },
+      namespaceResolver,
+      xmlSerializer: new XMLSerializer()
+    });
+    // console.log('evaluateXPathToNodes',xpath, result);
+    return result;
+  } catch (e) {
+    formElement.dispatchEvent(new CustomEvent('error', {
+      composed: false,
+      bubbles: true,
+      detail: {
+        origin: formElement,
+        message: `Expression '${xpath}' failed: ${e}`,
+        expr: xpath,
+        level: 'Error'
+      }
+    }));
   }
+}
 
-  /**
-   * @param {string} path
-   * @returns string
-   */
-  static shortenPath(path) {
-    const tmp = path.replaceAll(/(Q{(.*?)\})/g, '');
-    if (tmp === 'root()') return tmp;
-    // cut off leading slash
-    const tmp1 = tmp.substring(1, tmp.length);
-    // ### cut-off root node ref
-    return tmp1.substring(tmp1.indexOf('/'), tmp.length);
+/**
+ * Evaluate an XPath to a boolean
+ *
+ * @param  {string} xpath  The XPath to run
+ * @param  {Node} contextNode The start of the XPath
+ * @param  {import('./ForeElementMixin.js').default} formElement  The form element associated to the XPath
+ * @return {boolean}
+ */
+function evaluateXPathToBoolean(xpath, contextNode, formElement) {
+  try {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    const variablesInScope = getVariablesInScope(formElement);
+    return evaluateXPathToBoolean$1(xpath, contextNode, null, variablesInScope, {
+      currentContext: {
+        formElement
+      },
+      functionNameResolver,
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI
+      },
+      namespaceResolver,
+      xmlSerializer: new XMLSerializer()
+    });
+  } catch (e) {
+    formElement.dispatchEvent(new CustomEvent('error', {
+      composed: false,
+      bubbles: true,
+      detail: {
+        origin: formElement,
+        message: `Expression '${xpath}' failed: ${e}`,
+        expr: xpath,
+        level: 'Error'
+      }
+    }));
   }
+}
 
-  /**
-   * @param {string} dep
-   * @returns {string}
-   */
-  static getBasePath(dep) {
-    const split = dep.split(':');
-    return split[0];
+/**
+ * Evaluate an XPath to a string
+ *
+ * @param  {string}     xpath             The XPath to run
+ * @param  {Node}       contextNode       The start of the XPath
+ * @param  {Node}       formElement       The form element associated to the XPath
+ * @param  {Node}       formElement       The element where the XPath is defined: used for namespace resolving
+ * @param  {import('fontoxpath').IDomFacade}  [domFacade=null]  A DomFacade is used in bindings to intercept DOM
+ * access. This is used to determine dependencies between bind elements.
+ * @return {string}
+ */
+function evaluateXPathToString(xpath, contextNode, formElement, domFacade = null) {
+  try {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    const variablesInScope = getVariablesInScope(formElement);
+    return evaluateXPathToString$1(xpath, contextNode, domFacade, variablesInScope, {
+      currentContext: {
+        formElement
+      },
+      functionNameResolver,
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI
+      },
+      namespaceResolver,
+      xmlSerializer: new XMLSerializer()
+    });
+  } catch (e) {
+    formElement.dispatchEvent(new CustomEvent('error', {
+      composed: false,
+      bubbles: true,
+      detail: {
+        origin: formElement,
+        message: `Expression '${xpath}' failed: ${e}`,
+        expr: xpath,
+        level: 'Error'
+      }
+    }));
   }
 }
 
 /**
- * A simple dependency graph
- *
- * based on the work of https://github.com/jriecken/dependency-graph but working on ES6.
- *
- * Furthermore instead of the DepGraphCycleError a compute-exception event is dispatched.
- *
+ * Evaluate an XPath to a set of strings
  *
+ * @param  {string}     xpath             The XPath to run
+ * @param  {Node}       contextNode       The start of the XPath
+ * @param  {Node}       formElement       The form element associated to the XPath
+ * @param  {Node}       formElement       The element where the XPath is defined: used for namespace resolving
+ * @param  {import('fontoxpath').IDomFacade}  [domFacade=null]  A DomFacade is used in bindings to intercept DOM
+ * access. This is used to determine dependencies between bind elements.
+ * @return {string[]}
  */
-
-/**
- * Cycle error, including the path of the cycle.
- */
-// const DepGraphCycleError = (exports.DepGraphCycleError = function (cyclePath) {
-
-/*
-export function DepGraphCycleError(cyclePath) {
-  const message = "Dependency Cycle Found: " + cyclePath.join(" -> ");
-  const instance = new Error(message);
-  instance.cyclePath = cyclePath;
-  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
-  if (Error.captureStackTrace) {
-    Error.captureStackTrace(instance, DepGraphCycleError);
-  }
-  return instance;
-};
-
-DepGraphCycleError.prototype = Object.create(Error.prototype, {
-  constructor: {
-    value: Error,
-    enumerable: false,
-    writable: true,
-    configurable: true
+function evaluateXPathToStrings(xpath, contextNode, formElement, domFacade = null) {
+  try {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    return evaluateXPathToStrings$1(xpath, contextNode, domFacade, {}, {
+      currentContext: {
+        formElement
+      },
+      functionNameResolver,
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI
+      },
+      namespaceResolver,
+      xmlSerializer: new XMLSerializer()
+    });
+  } catch (e) {
+    formElement.dispatchEvent(new CustomEvent('error', {
+      composed: false,
+      bubbles: true,
+      detail: {
+        origin: formElement,
+        message: `Expression '${xpath}' failed: ${e}`,
+        expr: xpath,
+        level: 'Error'
+      }
+    }));
   }
-});
-Object.setPrototypeOf(DepGraphCycleError, Error);
-*/
+}
 
 /**
- * Helper for creating a Topological Sort using Depth-First-Search on a set of edges.
- *
- * Detects cycles and throws an Error if one is detected (unless the "circular"
- * parameter is "true" in which case it ignores them).
+ * Evaluate an XPath to a number
  *
- * @param edges The set of edges to DFS through
- * @param leavesOnly Whether to only return "leaf" nodes (ones who have no edges)
- * @param result An array in which the results will be populated
- * @param circular A boolean to allow circular dependencies
+ * @param  {string}     xpath             The XPath to run
+ * @param  {Node}       contextNode       The start of the XPath
+ * @param  {Node}       formElement       The form element associated to the XPath
+ * @param  {Node}       formElement       The element where the XPath is defined: used for namespace resolving
+ * @param  {import('fontoxpath').IDomFacade}  [domFacade=null]  A DomFacade is used in bindings to intercept DOM
+ * access. This is used to determine dependencies between bind elements.
+ * @return {number}
  */
-function createDFS(edges, leavesOnly, result, circular) {
-  const visited = {};
-  // eslint-disable-next-line func-names
-  return function (start) {
-    // console.log('start ', start);
-    if (visited[start]) {
-      return;
-    }
-    const inCurrentPath = {};
-    const currentPath = [];
-    const todo = []; // used as a stack
-    todo.push({
-      node: start,
-      processed: false
+function evaluateXPathToNumber(xpath, contextNode, formElement, domFacade = null) {
+  try {
+    const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+    const variablesInScope = getVariablesInScope(formElement);
+    return evaluateXPathToNumber$1(xpath, contextNode, domFacade, variablesInScope, {
+      currentContext: {
+        formElement
+      },
+      functionNameResolver,
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI
+      },
+      namespaceResolver,
+      xmlSerializer: new XMLSerializer()
     });
-    while (todo.length > 0) {
-      const current = todo[todo.length - 1]; // peek at the todo stack
-      const {
-        processed
-      } = current;
+  } catch (e) {
+    formElement.dispatchEvent(new CustomEvent('error', {
+      composed: false,
+      bubbles: true,
+      detail: {
+        origin: formElement,
+        message: `Expression '${xpath}' failed: ${e}`,
+        expr: xpath,
+        level: 'Error'
+      }
+    }));
+  }
+}
+const contextFunction = (dynamicContext, string) => {
+  const caller = dynamicContext.currentContext.formElement;
+  let instance = null;
+  if (string) {
+    instance = resolveId(string, caller);
+  } else {
+    instance = XPathUtil.getParentBindingElement(caller);
+  }
+  if (instance) {
+    if (instance.nodeName === 'FX-REPEAT') {
       const {
-        node
-      } = current;
-      if (!processed) {
-        // Haven't visited edges yet (visiting phase)
-        if (visited[node]) {
-          todo.pop();
-          // eslint-disable-next-line no-continue
-          continue;
-        } else if (inCurrentPath[node]) {
-          // It's not a DAG
-          if (circular) {
-            todo.pop();
-            // If we're tolerating cycles, don't revisit the node
-            // eslint-disable-next-line no-continue
-            continue;
-          }
-          currentPath.push(node);
-          window.dispatchEvent(new CustomEvent('compute-exception', {
-            composed: false,
-            bubbles: true,
-            detail: {
-              path: currentPath,
-              message: 'cyclic graph'
-            }
-          }));
-          // return;
-          // console.log('‘circular path: ' + currentPath);
-          // throw new DepGraphCycleError(currentPath);
-
-          // Stop all processing. This form is broken and we should not break the browser
-          throw new Error(`Cyclic at ${currentPath}`);
-        }
-        inCurrentPath[node] = true;
-        currentPath.push(node);
-        const nodeEdges = edges[node];
-        // (push edges onto the todo stack in reverse order to be order-compatible with the old DFS implementation)
-        for (let i = nodeEdges.length - 1; i >= 0; i -= 1) {
-          todo.push({
-            node: nodeEdges[i],
-            processed: false
-          });
-        }
-        current.processed = true;
-      } else {
-        // Have visited edges (stack unrolling phase)
-        todo.pop();
-        currentPath.pop();
-        inCurrentPath[node] = false;
-        visited[node] = true;
-        if (!leavesOnly || edges[node].length === 0) {
-          result.push(node);
+        nodeset
+      } = instance;
+      for (let parent = caller; parent; parent = parent.parentNode) {
+        if (parent.parentNode === instance) {
+          const offset = Array.from(parent.parentNode.children).indexOf(parent);
+          return nodeset[offset];
         }
       }
     }
-  };
-}
+    return instance.nodeset;
+  }
+  return caller.getInScopeContext();
+};
+
+// todo: implement
+const currentFunction = (dynamicContext, string) => {
+  dynamicContext.currentContext.formElement;
+  return null;
+};
+const elementFunction = (dynamicContext, string) => {
+  dynamicContext.currentContext.formElement;
+  const newElement = document.createElement(string);
+  return newElement;
+};
 
 /**
- * Simple Dependency Graph
+ * @param id as string
+ * @return instance data for given id serialized to string.
  */
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'context'
+}, [], 'item()?', contextFunction);
 
-/*
-var DepGraph = (exports.DepGraph = function DepGraph(opts) {
-  this.nodes = {}; // Node -> Node/Data (treated like a Set)
-  this.outgoingEdges = {}; // Node -> [Dependency Node]
-  this.incomingEdges = {}; // Node -> [Dependant Node]
-  this.circular = opts && !!opts.circular; // Allows circular deps
+/**
+ * @param id as string
+ * @return instance data for given id serialized to string.
+ */
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'context'
+}, ['xs:string'], 'item()?', contextFunction);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'current'
+}, ['xs:string'], 'item()?', currentFunction);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'element'
+}, ['xs:string'], 'item()?', elementFunction);
+
+/**
+ * @param id as string
+ * @return instance data for given id serialized to string.
+ */
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'log'
+}, ['xs:string?'], 'xs:string?', (dynamicContext, string) => {
+  const {
+    formElement
+  } = dynamicContext.currentContext;
+  const instance = resolveId(string, formElement, 'fx-instance');
+  if (instance) {
+    if (instance.getAttribute('type') === 'json') {
+      console.warn('log() does not work for JSON yet');
+      // return JSON.stringify(instance.getDefaultContext());
+    } else {
+      const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
+      return prettifyXml(def);
+    }
+  }
+  return null;
 });
-*/
-
-function DepGraph(opts) {
-  this.nodes = {}; // Node -> Node/Data (treated like a Set)
-  this.outgoingEdges = {}; // Node -> [Dependency Node]
-  this.incomingEdges = {}; // Node -> [Dependant Node]
-  this.circular = opts && !!opts.circular; // Allows circular deps
-}
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'fore-attr'
+}, ['xs:string?'], 'xs:string?', (dynamicContext, string) => {
+  const {
+    formElement
+  } = dynamicContext.currentContext;
+  let parent = formElement;
+  if (formElement.nodeType === Node.TEXT_NODE) {
+    parent = formElement.parentNode;
+  }
+  const foreElement = parent.closest('fx-fore');
+  if (foreElement.hasAttribute(string)) {
+    return foreElement.getAttribute(string);
+  }
+  return null;
+});
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'parse'
+}, ['xs:string?'], 'element()?', (_dynamicContext, string) => {
+  const parser = new DOMParser();
+  const out = parser.parseFromString(string, 'application/xml');
+  console.log('parse', out);
 
-DepGraph.prototype = {
-  /**
-   * The number of nodes in the graph.
-   */
-  size() {
-    return Object.keys(this.nodes).length;
-  },
-  /**
-   * Add a node to the dependency graph. If a node already exists, this method will do nothing.
-   */
-  addNode(node, data) {
-    if (!this.hasNode(node)) {
-      // Checking the arguments length allows the user to add a node with undefined data
-      if (arguments.length === 2) {
-        this.nodes[node] = data;
+  /*
+              const {formElement} = dynamicContext.currentContext;
+              const instance = resolveId(string, formElement, 'fx-instance');
+              if (instance) {
+                  if (instance.getAttribute('type') === 'json') {
+                      console.warn('log() does not work for JSON yet');
+                      // return JSON.stringify(instance.getDefaultContext());
+                  } else {
+                      const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
+                      return Fore.prettifyXml(def);
+                  }
+              }
+      */
+  return out.firstElementChild;
+});
+function buildTree(tree, data) {
+  if (!data) return;
+  if (data.nodeType === Node.ELEMENT_NODE) {
+    if (data.children) {
+      const details = document.createElement('details');
+      details.setAttribute('data-path', data.nodeName);
+      const summary = document.createElement('summary');
+      let display = ` <${data.nodeName}`;
+      Array.from(data.attributes).forEach(attr => {
+        display += ` ${attr.nodeName}="${attr.nodeValue}"`;
+      });
+      let contents;
+      if (data.firstChild && data.firstChild.nodeType === Node.TEXT_NODE && data.firstChild.data.trim() !== '') {
+        // console.log('whoooooooooopp');
+        contents = data.firstChild.nodeValue;
+        display += `>${contents}</${data.nodeName}>`;
       } else {
-        this.nodes[node] = node;
+        display += '>';
       }
-      this.outgoingEdges[node] = [];
-      this.incomingEdges[node] = [];
-    }
-  },
-  /**
-   * Remove a node from the dependency graph. If a node does not exist, this method will do nothing.
-   */
-  removeNode(node) {
-    if (this.hasNode(node)) {
-      delete this.nodes[node];
-      delete this.outgoingEdges[node];
-      delete this.incomingEdges[node];
-      // [this.incomingEdges, this.outgoingEdges].forEach(function (edgeList) {
-      [this.incomingEdges, this.outgoingEdges].forEach(edgeList => {
-        Object.keys(edgeList).forEach(key => {
-          const idx = edgeList[key].indexOf(node);
-          if (idx >= 0) {
-            edgeList[key].splice(idx, 1);
-          }
-        }, this);
+      summary.textContent = display;
+      details.appendChild(summary);
+      if (data.childElementCount !== 0) {
+        details.setAttribute('open', 'open');
+      } else {
+        summary.setAttribute('style', 'list-style:none;');
+      }
+      tree.appendChild(details);
+      Array.from(data.children).forEach(child => {
+        // if(child.nodeType === Node.ELEMENT_NODE){
+        // child.parentNode.appendChild(buildTree(child));
+        buildTree(details, child);
+        // }
       });
     }
-  },
-  /**
-   * Check if a node exists in the graph
-   */
-  hasNode(node) {
-    // return this.nodes.hasOwnProperty(node);
+  } /* else if(data.nodeType === Node.ATTRIBUTE_NODE){
+        //create span for now
+        // const span = document.createElement('span');
+        // span.style.background = 'grey';
+        // span.textContent = data.value;
+        // tree.appendChild(span);
+        tree.setAttribute(data.nodeName,data.value);
+    }else {
+        tree.textContent = data;
+    } */
 
-    return Object.prototype.hasOwnProperty.call(this.nodes, node);
-  },
-  /**
-   * Get the data associated with a node name
-   */
-  getNodeData(node) {
-    if (this.hasNode(node)) {
-      return this.nodes[node];
-    }
-    throw new Error(`Node does not exist: ${node}`);
-  },
-  /**
-   * Set the associated data for a given node name. If the node does not exist, this method will throw an error
-   */
-  setNodeData(node, data) {
-    if (this.hasNode(node)) {
-      this.nodes[node] = data;
-    } else {
-      throw new Error(`Node does not exist: ${node}`);
-    }
-  },
-  /**
-   * Add a dependency between two nodes. If either of the nodes does not exist,
-   * an Error will be thrown.
-   */
-  addDependency(from, to) {
-    if (!this.hasNode(from)) {
-      throw new Error(`Node does not exist: ${from}`);
-    }
-    if (!this.hasNode(to)) {
-      throw new Error(`Node does not exist: ${to}`);
-    }
-    if (this.outgoingEdges[from].indexOf(to) === -1) {
-      this.outgoingEdges[from].push(to);
-    }
-    if (this.incomingEdges[to].indexOf(from) === -1) {
-      this.incomingEdges[to].push(from);
-    }
-    return true;
-  },
-  /**
-   * Remove a dependency between two nodes.
-   */
-  removeDependency(from, to) {
-    let idx;
-    if (this.hasNode(from)) {
-      idx = this.outgoingEdges[from].indexOf(to);
-      if (idx >= 0) {
-        this.outgoingEdges[from].splice(idx, 1);
-      }
-    }
-    if (this.hasNode(to)) {
-      idx = this.incomingEdges[to].indexOf(from);
-      if (idx >= 0) {
-        this.incomingEdges[to].splice(idx, 1);
-      }
-    }
-  },
-  /**
-   * Return a clone of the dependency graph. If any custom data is attached
-   * to the nodes, it will only be shallow copied.
-   */
-  clone() {
-    const source = this;
-    const result = new DepGraph();
-    const keys = Object.keys(source.nodes);
-    keys.forEach(n => {
-      result.nodes[n] = source.nodes[n];
-      result.outgoingEdges[n] = source.outgoingEdges[n].slice(0);
-      result.incomingEdges[n] = source.incomingEdges[n].slice(0);
-    });
-    return result;
-  },
-  /**
-   * Get an array containing the direct dependencies of the specified node.
-   *
-   * Throws an Error if the specified node does not exist.
-   */
-  directDependenciesOf(node) {
-    if (this.hasNode(node)) {
-      return this.outgoingEdges[node].slice(0);
+  // return tree;
+}
+
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'logtree'
+}, ['xs:string?'], 'element()?', (dynamicContext, string) => {
+  const {
+    formElement
+  } = dynamicContext.currentContext;
+  const instance = resolveId(string, formElement, 'fx-instance');
+  if (instance) {
+    // const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
+    // const def = JSON.stringify(instance.getDefaultContext());
+
+    const treeDiv = document.createElement('div');
+    treeDiv.setAttribute('class', 'logtree');
+    // const datatree = buildTree(tree,instance.getDefaultContext());
+    // return tree.appendChild(datatree);
+    // return  buildTree(root,instance.getDefaultContext());;
+    const form = dynamicContext.currentContext.formElement;
+    const logtree = form.querySelector('.logtree');
+    if (logtree) {
+      logtree.parentNode.removeChild(logtree);
     }
-    throw new Error(`Node does not exist: ${node}`);
-  },
-  /**
-   * Get an array containing the nodes that directly depend on the specified node.
-   *
-   * Throws an Error if the specified node does not exist.
-   */
-  directDependantsOf(node) {
-    if (this.hasNode(node)) {
-      return this.incomingEdges[node].slice(0);
+    const tree = buildTree(treeDiv, instance.getDefaultContext());
+    if (tree) {
+      form.appendChild(tree);
     }
-    throw new Error(`Node does not exist: ${node}`);
-  },
+  }
+  return null;
+});
+const instance = (dynamicContext, string) => {
+  // Spec: https://www.w3.org/TR/xforms-xpath/#The_XForms_Function_Library#The_instance.28.29_Function
+  // TODO: handle no string passed (null will be passed instead)
+
   /**
-   * Get an array containing the nodes that the specified node depends on (transitively).
-   *
-   * Throws an Error if the graph has a cycle, or the specified node does not exist.
-   *
-   * If `leavesOnly` is true, only nodes that do not depend on any other nodes will be returned
-   * in the array.
+   * @type {import('./fx-fore.js').FxFore}
    */
-  dependenciesOf(node, leavesOnly) {
-    if (this.hasNode(node)) {
-      const result = [];
-      const DFS = createDFS(this.outgoingEdges, leavesOnly, result, this.circular);
-      DFS(node);
-      const idx = result.indexOf(node);
-      if (idx >= 0) {
-        result.splice(idx, 1);
-      }
-      return result;
+  const formElement = evaluateXPathToFirstNode$1('ancestor-or-self::fx-fore[1]', dynamicContext.currentContext.formElement, null, null, {
+    namespaceResolver: xhtmlNamespaceResolver
+  });
+  let lookup = null;
+  if (string === null || string === 'default') {
+    lookup = formElement.getModel().getDefaultInstance();
+  } else {
+    lookup = formElement.getModel().getInstance(string);
+    if (!lookup) {
+      document.querySelector('fx-fore').dispatchEvent(new CustomEvent('error', {
+        composed: true,
+        bubbles: true,
+        detail: {
+          origin: 'functions',
+          message: `Instance not found '${string}'`,
+          level: 'Error'
+        }
+      }));
     }
-    throw new Error(`Node does not exist: ${node}`);
-  },
-  /**
-   * get an array containing the nodes that depend on the specified node (transitively).
-   *
-   * Throws an Error if the graph has a cycle, or the specified node does not exist.
-   *
-   * If `leavesOnly` is true, only nodes that do not have any dependants will be returned in the array.
-   */
-  dependantsOf(node, leavesOnly) {
-    if (this.hasNode(node)) {
-      const result = [];
-      const DFS = createDFS(this.incomingEdges, leavesOnly, result, this.circular);
-      DFS(node);
-      const idx = result.indexOf(node);
-      if (idx >= 0) {
-        result.splice(idx, 1);
+  }
+  const context = lookup.getDefaultContext();
+  if (!context) {
+    return null;
+  }
+  return context;
+};
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'index'
+}, ['xs:string?'], 'xs:integer?', (dynamicContext, string) => {
+  const {
+    formElement
+  } = dynamicContext.currentContext;
+  if (string === null) {
+    return 1;
+  }
+  const repeat = resolveId(string, formElement, 'fx-repeat');
+
+  // const def = instance.getInstanceData();
+  if (repeat) {
+    return repeat.getAttribute('index');
+  }
+  return Number(1);
+});
+
+// Note that this is not to spec. The spec enforces elements to be returned from the
+// instance. However, we allow instances to actually be JSON!
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'instance'
+}, [], 'item()?', domFacade => instance(domFacade, null));
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'instance'
+}, ['xs:string?'], 'item()?', instance);
+const jsonToXml = (_dynamicContext, json) => {
+  const escapeXml = str => str.replace(/[^\u0009\u000A\u000D\u0020-\uD7FF\uE000-\uFFFD]/g, char => `\\u${char.charCodeAt(0).toString(16).padStart(4, '0')}`);
+  const convert = (obj, parent) => {
+    const type = typeof obj;
+    if (type === 'number') {
+      parent.setAttribute('type', 'number');
+      parent.textContent = obj.toString();
+    } else if (type === 'boolean') {
+      parent.setAttribute('type', 'boolean');
+      parent.textContent = obj.toString();
+    } else if (obj === null) {
+      const node = document.createElement('_');
+      node.setAttribute('type', 'null');
+      parent.appendChild(node);
+    } else if (type === 'string') {
+      parent.textContent = escapeXml(obj);
+    } else if (Array.isArray(obj)) {
+      parent.setAttribute('type', 'array');
+      obj.forEach(item => {
+        const node = document.createElement('_');
+        convert(item, node);
+        node.textContent = item;
+        parent.appendChild(node);
+      });
+    } else if (type === 'object') {
+      parent.setAttribute('type', 'object');
+      Object.entries(obj).forEach(([key, value]) => {
+        if (value) {
+          const childNode = document.createElement(key.replace(/[^a-zA-Z0-9_]/g, '_'));
+          convert(value, childNode);
+          parent.appendChild(childNode);
+        }
+      });
+    }
+  };
+  const root = document.createElement('json');
+  if (Array.isArray(json)) {
+    root.setAttribute('type', 'array');
+  } else {
+    root.setAttribute('type', 'object');
+  }
+  convert(json, root);
+  // return root.outerHTML;
+  console.log('xml', root);
+  return root;
+};
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'json2xml'
+}, ['item()?'], 'item()?', jsonToXml);
+const xmlToJson = (_dynamicContext, xml) => {
+  const isElementNode = node => node.nodeType === Node.ELEMENT_NODE;
+  const isTextNode = node => node.nodeType === Node.TEXT_NODE;
+  const parseNode = node => {
+    if (isElementNode(node)) {
+      const obj = {};
+      if (node.hasAttributes()) {
+        obj.type = node.getAttribute('type');
       }
-      return result;
+      if (node.childNodes.length === 1 && isTextNode(node.firstChild)) {
+        return node.textContent;
+      }
+      for (const child of node.childNodes) {
+        const childName = child.nodeName;
+        const childValue = parseNode(child);
+        if (obj[childName]) {
+          if (!Array.isArray(obj[childName])) {
+            obj[childName] = [obj[childName]];
+          }
+          obj[childName].push(childValue);
+        } else {
+          obj[childName] = childValue;
+        }
+      }
+      return obj;
     }
-    throw new Error(`Node does not exist: ${node}`);
-  },
-  /**
-   * Get an array of nodes that have no dependants (i.e. nothing depends on them).
-   */
-  entryNodes() {
-    const self = this;
-    return Object.keys(this.nodes).filter(node => self.incomingEdges[node].length === 0);
-  },
-  /**
-   * Construct the overall processing order for the dependency graph.
-   *
-   * Throws an Error if the graph has a cycle.
-   *
-   * If `leavesOnly` is true, only nodes that do not depend on any other nodes will be returned.
-   */
-  overallOrder(leavesOnly) {
-    const self = this;
-    const result = [];
-    const keys = Object.keys(this.nodes);
-    if (keys.length === 0) {
-      return result; // Empty graph
+    if (isTextNode(node)) {
+      return node.textContent;
     }
+    return undefined;
+  };
+  const parser = new DOMParser();
+  const xmlDoc = parser.parseFromString(xml, 'application/xml');
+  const root = xmlDoc.documentElement;
+  return parseNode(root);
+};
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'xmltoJson'
+}, ['item()?'], 'item()?', xmlToJson);
 
-    if (!this.circular) {
-      // Look for cycles - we run the DFS starting at all the nodes in case there
-      // are several disconnected subgraphs inside this dependency graph.
-      const CycleDFS = createDFS(this.outgoingEdges, false, [], this.circular);
-      keys.forEach(n => {
-        CycleDFS(n);
-      });
+/*
+// Example usage:
+const xml = '<json type="object"><given>Mark</given><family>Smith</family></json>';
+console.log(xmlToJson(xml));
+*/
+
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'depends'
+}, ['node()*'], 'item()?', (_dynamicContext, nodes) =>
+// console.log('depends on : ', nodes[0]);
+nodes[0]);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'event'
+}, ['xs:string?'], 'item()?', (dynamicContext, arg) => {
+  if (!arg) return null;
+  for (let ancestor = dynamicContext.currentContext.formElement; ancestor; ancestor = ancestor.parentNode) {
+    if (!ancestor.currentEvent) {
+      continue;
     }
-    const DFS = createDFS(this.outgoingEdges, leavesOnly, result, this.circular);
-    // Find all potential starting points (nodes with nothing depending on them) an
-    // run a DFS starting at these points to get the order
-    keys.filter(node => self.incomingEdges[node].length === 0).forEach(n => {
-      DFS(n);
-    });
 
-    // If we're allowing cycles - we need to run the DFS against any remaining
-    // nodes that did not end up in the initial result (as they are part of a
-    // subgraph that does not have a clear starting point)
-    if (this.circular) {
-      keys.filter(node => result.indexOf(node) === -1).forEach(n => DFS(n));
+    // We have a current event. read the property either from detail, or from the event
+    // itself.
+    // Check detail for custom events! This is how that is passed along
+    if (ancestor.currentEvent.detail && typeof ancestor.currentEvent.detail === 'object' && arg in ancestor.currentEvent.detail) {
+      return ancestor.currentEvent.detail[arg];
     }
-    return result;
+
+    // arg might be `code`, so currentEvent.code should work
+    if (arg.includes('.')) {
+      return _propertyLookup(ancestor.currentEvent, arg);
+    }
+    return ancestor.currentEvent[arg] || null;
+  }
+  return null;
+});
+function _propertyLookup(obj, path) {
+  const parts = path.split('.');
+  if (parts.length == 1) {
+    return obj[parts[0]];
   }
+  return _propertyLookup(obj[parts[0]], parts.slice(1).join('.'));
+}
+
+// Implement the XForms standard functions here.
+registerXQueryModule(`
+    module namespace xf="${XFORMS_NAMESPACE_URI}";
+
+    declare %public function xf:boolean-from-string($str as xs:string) as xs:boolean {
+        lower-case($str) = "true" or $str = "1"
+    };
+`);
+
+// How to run XQUERY:
+/**
+ registerXQueryModule(`
+ module namespace my-custom-namespace = "my-custom-uri";
+ (:~
+ Insert attribute somewhere
+ ~:)
+ declare %public %updating function my-custom-namespace:do-something ($ele as element()) as xs:boolean {
+	if ($ele/@done) then false() else
+	(insert node
+	attribute done {"true"}
+	into $ele, true())
 };
+ `)
+ // At some point:
+ const contextNode = null;
+ const pendingUpdatesAndXdmValue = evaluateUpdatingExpressionSync('ns:do-something(.)', contextNode, null, null, {moduleImports: {'ns': 'my-custom-uri'}})
 
-// Create some aliases
-DepGraph.prototype.directDependentsOf = DepGraph.prototype.directDependantsOf;
-DepGraph.prototype.dependentsOf = DepGraph.prototype.dependantsOf;
+ console.log(pendingUpdatesAndXdmValue.xdmValue); // this is true or false, see function
+
+ executePendingUpdateList(pendingUpdatesAndXdmValue.pendingUpdateList, null, null, null);
+ */
+
+/**
+ * @param input as string
+ * @return {string}
+ */
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'base64encode'
+}, ['xs:string?'], 'xs:string?', (_dynamicContext, string) => btoa(string));
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'local-date'
+}, [], 'xs:string?', (_dynamicContext, _string) => new Date().toLocaleDateString());
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'local-dateTime'
+}, [], 'xs:string?', (_dynamicContext, _string) => new Date().toLocaleString());
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri'
+}, [], 'xs:string?', (_dynamicContext, _string) => window.location.href);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-fragment'
+}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.hash);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-host'
+}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.host);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-query'
+}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.search);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-relpath'
+}, [], 'xs:string?', (_dynamicContext, _arg) => {
+  const path = new URL(window.location.href).pathname;
+  return path.substring(0, path.lastIndexOf('/') + 1);
+});
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-path'
+}, [], 'xs:string?', (_dynamicContext, _arg) => new URL(window.location.href).pathname);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-port'
+}, [], 'xs:string?', (_dynamicContext, _arg) => window.location.port);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-param'
+}, ['xs:string?'], 'xs:string?', (_dynamicContext, arg) => {
+  if (!arg) return null;
+  const {
+    search
+  } = window.location;
+  const urlparams = new URLSearchParams(search);
+  const param = urlparams.get(arg);
+  return param || '';
+});
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-scheme'
+}, [], 'xs:string?', (_dynamicContext, _arg) => new URL(window.location.href).protocol);
+registerCustomXPathFunction({
+  namespaceURI: XFORMS_NAMESPACE_URI,
+  localName: 'uri-scheme-specific-part'
+}, [], 'xs:string?', (_dynamicContext, _arg) => {
+  const uri = window.location.href;
+  return uri.substring(uri.indexOf(':') + 1, uri.length);
+});
+
+/**
+ * @param {Node} node
+ * @returns string
+ */
+/*
+export static getDocPath(node) {
+  const path = fx.evaluateXPathToString('path()', node);
+  // Path is like `$default/x[1]/y[1]`
+  const shortened = XPathUtil.shortenPath(path);
+  return shortened.startsWith('/') ? `${shortened}` : `/${shortened}`;
+}
+*/
 
 /**
  * @param {Node} node
@@ -19669,10 +19670,10 @@ class FxInstance extends HTMLElement {
     // Note: use the getter here: it might provide us with stubbed data if anything async is racing,
     // such as an @src attribute
     const instanceData = this.getInstanceData();
-    if (this.type === 'xml') {
+    if (this.type === 'xml' || this.type === 'html') {
       return instanceData.firstElementChild;
     }
-    return instanceData;
+    return this.instanceData;
   }
 
   /**
@@ -19902,13 +19903,13 @@ class ModelItem {
   set value(newVal) {
     if (!this.node) return;
     const oldVal = this.value;
-    if (newVal?.nodeType === Node.DOCUMENT_NODE) {
+    if (newVal?.nodeType && newVal.nodeType === Node.DOCUMENT_NODE) {
       this.node.replaceWith(newVal.firstElementChild);
-      this.node = newVal.firstElementChild;
-    } else if (newVal?.nodeType === Node.ELEMENT_NODE) {
+      // this.node.appendChild(newVal.firstElementChild);
+    } else if (newVal?.nodeType && newVal.nodeType === Node.ELEMENT_NODE) {
       this.node.replaceWith(newVal);
-      this.node = newVal;
-    } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+      // this.node.appendChild(newVal);
+    } else if (newVal?.nodeType && this.node.nodeType === Node.ATTRIBUTE_NODE) {
       this.node.nodeValue = newVal;
     } else {
       this.node.textContent = newVal;
@@ -21210,7 +21211,7 @@ class FxBind extends ForeElementMixin {
     }
 
     // ✅ only the repeat item gets the _<opNum> suffix; children do not.
-    const basePath = XPathUtil.getPath(node, instanceId);
+    const basePath = getPath(node, instanceId);
     const path = opNum ? `${basePath}_${opNum}` : basePath;
 
     // const path = XPathUtil.getPath(node, instanceId);
@@ -23722,6 +23723,24 @@ const dirtyStates = {
  * @ts-check
  */
 class FxFore extends HTMLElement {
+  // Records init gate events that have already happened for a given target (document/window/element).
+  // This prevents “missed gate” situations when an fx-fore is replaced (e.g. via src loading)
+  // after the init event already fired.
+  static _hasSeenInitEvent(target, eventName) {
+    const set = FxFore._initEventState.get(target);
+    return !!(set && set.has(eventName));
+  }
+  static _markInitEventSeen(target, eventName) {
+    let set = FxFore._initEventState.get(target);
+    if (!set) {
+      set = new Set();
+      FxFore._initEventState.set(target, set);
+    }
+    set.add(eventName);
+  }
+  static get observedAttributes() {
+    return ['src', 'selector'];
+  }
   static get properties() {
     return {
       /**
@@ -23791,14 +23810,12 @@ class FxFore extends HTMLElement {
       // avoid double init
       if (this.inited) return;
 
-      // 2) Wait for dependencies if needed
-      if (this.hasAttribute('wait-for')) {
-        try {
-          await this._whenDependenciesReady();
-        } catch (e) {
-          console.warn('wait-for failed', e);
-          return;
-        }
+      // 2) Wait for init gates (init-on / init-on-target / wait-for)
+      try {
+        await this._waitForInitGates();
+      } catch (e) {
+        console.warn('init gating failed', e);
+        return;
       }
 
       // 3) Bail if we got disconnected/replaced while waiting
@@ -23807,10 +23824,21 @@ class FxFore extends HTMLElement {
         this.ignoredNodes = Array.from(this.querySelectorAll(this.ignoreExpressions));
       }
 
+      // 4) Safely read assigned content
+      const getAssignedElements = () => {
+        if (typeof slotEl.assignedElements === 'function') {
+          return slotEl.assignedElements({
+            flatten: true
+          });
+        }
+        // Fallback for odd engines/polyfills
+        return (slotEl.assignedNodes({
+          flatten: true
+        }) || []).filter(n => n.nodeType === Node.ELEMENT_NODE);
+      };
+
       // SAFE: slotEl is the actual event source, not a fresh query
-      const children = slotEl.assignedElements({
-        flatten: true
-      });
+      const children = getAssignedElements();
       let modelElement = children.find(modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL');
       if (!modelElement) {
         const generatedModel = document.createElement('fx-model');
@@ -23837,13 +23865,16 @@ class FxFore extends HTMLElement {
       this._createRepeatsFromAttributes();
       this.inited = true;
     };
-    this.version = 'Version: 2.7.2 - built on December 9, 2025 15:22:48';
+    this.version = 'Version: 2.8.0 - built on December 19, 2025 12:59:03';
 
     /**
      * @type {import('./fx-model.js').FxModel}
      */
     this.model = null;
     this.inited = false;
+    this._initGatesPromise = null;
+    this._warnedWaitForDeprecation = false;
+    this._srcLoadPromise = null;
     // this.addEventListener('model-construct-done', this._handleModelConstructDone);
     // todo: refactoring - these should rather go into connectedcallback
     this.addEventListener('message', this._displayMessage);
@@ -23985,94 +24016,217 @@ class FxFore extends HTMLElement {
   }
 
   /**
-   * Resolve elements from the `wait-for` attribute.
-   * Supports comma-separated CSS selectors and the special value "closest".
+   * Parse a list of target specs.
+   *
+   * We accept both comma- and whitespace-separated lists (for backward compatibility with `wait-for`).
+   * Each token can be:
+   * - "self" (default)
+   * - "closest" (closest fx-fore)
+   * - "document"
+   * - "window"
+   * - a CSS selector (no whitespace)
    */
-  _resolveDependencies() {
-    const raw = this.getAttribute('wait-for');
+  _parseTargetList(raw) {
     if (!raw) return [];
-    const sels = raw.split(',').map(s => s.trim()).filter(Boolean);
+    return raw.split(/[\s,]+/).map(s => s.trim()).filter(Boolean);
+  }
+  _findBySelector(sel) {
     const roots = [this.getRootNode?.() ?? document, document];
-    const out = [];
-    for (const sel of sels) {
-      let el = null;
-      if (sel === 'closest') {
-        el = this.closest('fx-fore');
-      } else {
-        for (const r of roots) {
-          if (r && 'querySelector' in r) {
-            el = r.querySelector(sel);
-            if (el) break;
-          }
-        }
+    for (const r of roots) {
+      if (r && 'querySelector' in r) {
+        const el = r.querySelector(sel);
+        if (el) return el;
       }
-      if (el) out.push(el);
     }
-    return out;
+    return null;
+  }
+  _isReadyTarget(el) {
+    return !!(el && (el.ready === true || el.classList && el.classList.contains('fx-ready') || typeof el.hasAttribute === 'function' && el.hasAttribute('ready')));
   }
 
   /**
-   * Wait until all dependencies are ready (i.e., they set `ready = true`
-   * and dispatch the `ready` event).
+   * Collect all init gates derived from attributes.
+   *
+   * - `wait-for` (DEPRECATED) becomes: init-on="ready" + init-on-target=<list>
+   * - `init-on` / `init-on-target` define a generic event gate
    */
-  _whenDependenciesReady() {
-    const raw = this.getAttribute('wait-for');
-    if (!raw) return Promise.resolve();
-    const sels = raw.split(',').map(s => s.trim()).filter(Boolean);
-    const roots = [this.getRootNode?.() ?? document, document];
-    const query = sel => {
-      for (const r of roots) {
-        if (r && 'querySelector' in r) {
-          const el = r.querySelector(sel);
-          if (el) return el;
-        }
+  _collectInitGates() {
+    const gates = [];
+    const waitForRaw = this.getAttribute('wait-for');
+    if (waitForRaw) {
+      if (!this._warnedWaitForDeprecation) {
+        console.warn('[fx-fore] The "wait-for" attribute is deprecated. Use init-on="ready" init-on-target="..." instead.');
+        this._warnedWaitForDeprecation = true;
+      }
+      const deps = this._parseTargetList(waitForRaw);
+      for (const dep of deps) {
+        gates.push({
+          event: 'ready',
+          targetSpec: dep
+        });
       }
-      return null;
-    };
-    const isReadyNow = sel => {
-      if (sel === 'closest') {
-        const outer = this.closest('fx-fore');
-        return !!(outer && outer.ready === true);
+    }
+    const initOn = this.getAttribute('init-on');
+    const initOnTargetRaw = this.getAttribute('init-on-target');
+    if (initOn || initOnTargetRaw) {
+      const eventName = initOn || 'ready';
+      const targets = initOnTargetRaw ? this._parseTargetList(initOnTargetRaw) : ['self'];
+      for (const t of targets) {
+        gates.push({
+          event: eventName,
+          targetSpec: t
+        });
       }
-      const el = query(sel);
-      return !!(el && el.ready === true);
-    };
-    const waitOne = sel => new Promise(resolve => {
-      // fast path
-      if (isReadyNow(sel)) return resolve();
+    }
+    return gates;
+  }
+  _waitForEvent(target, eventName, isSatisfiedFn = null) {
+    // If a caller provides an explicit satisfaction check, honor it first.
+    if (typeof isSatisfiedFn === 'function' && isSatisfiedFn(target)) {
+      FxFore._markInitEventSeen(target, eventName);
+      return Promise.resolve();
+    }
 
-      // robust path: listen at the document/root so replacement doesn't matter
-      const onReady = ev => {
-        const t = ev.target;
-        if (sel === 'closest') {
-          // outer fore becoming ready anywhere above us
-          if (t?.tagName === 'FX-FORE' && t.contains(this)) {
-            cleanup();
-            resolve();
-          }
-        } else if (t?.matches?.(sel)) {
-          cleanup();
-          resolve();
-        }
+    // Sticky gate: if this event already happened on this target, don't wait again.
+    if (FxFore._hasSeenInitEvent(target, eventName)) {
+      return Promise.resolve();
+    }
+    return new Promise(resolve => {
+      const ac = new AbortController();
+      const on = () => {
+        FxFore._markInitEventSeen(target, eventName);
+        ac.abort();
+        resolve();
+      };
+      target.addEventListener(eventName, on, {
+        once: true,
+        signal: ac.signal
+      });
+    });
+  }
+  _waitForMatchingEvent(eventName, matchesEventFn, recheckFn = null) {
+    if (typeof recheckFn === 'function' && recheckFn()) {
+      return Promise.resolve();
+    }
+    return new Promise(resolve => {
+      const root = document;
+      const cleanupAll = () => {
+        root.removeEventListener(eventName, onEvent, true);
+        if (mo) mo.disconnect();
       };
-      const root = document; // capture at doc to catch composed events
-      const cleanup = () => root.removeEventListener('ready', onReady, true);
-      root.addEventListener('ready', onReady, true);
-
-      // also re-check on DOM changes in case a ready fore is inserted without firing (paranoia)
-      const mo = new MutationObserver(() => {
-        if (isReadyNow(sel)) {
-          mo.disconnect();
-          cleanup();
+      const onEvent = ev => {
+        if (matchesEventFn(ev)) {
+          cleanupAll();
           resolve();
         }
-      });
-      mo.observe(document.documentElement, {
-        childList: true,
-        subtree: true
-      });
+      };
+      root.addEventListener(eventName, onEvent, true);
+
+      // Only used for `ready` (or any other gate that provides a recheck function)
+      let mo = null;
+      if (typeof recheckFn === 'function') {
+        mo = new MutationObserver(() => {
+          if (recheckFn()) {
+            cleanupAll();
+            resolve();
+          }
+        });
+        mo.observe(document.documentElement, {
+          childList: true,
+          subtree: true
+        });
+      }
     });
-    return Promise.all(sels.map(waitOne));
+  }
+  _waitForInitGate({
+    event,
+    targetSpec
+  }) {
+    // Direct targets
+    if (targetSpec === 'self') {
+      const satisfied = event === 'ready' ? t => this._isReadyTarget(t) : null;
+      return this._waitForEvent(this, event, satisfied);
+    }
+    if (targetSpec === 'document') {
+      return this._waitForEvent(document, event);
+    }
+    if (targetSpec === 'window') {
+      return this._waitForEvent(window, event);
+    }
+
+    // Special: closest fx-fore
+    if (targetSpec === 'closest') {
+      const recheckFn = event === 'ready' ? () => this._isReadyTarget(this.closest('fx-fore')) : null;
+      const matchesFn = ev => {
+        const t = ev.target;
+        return t?.tagName === 'FX-FORE' && t.contains(this);
+      };
+      return this._waitForMatchingEvent(event, matchesFn, recheckFn);
+    }
+
+    // Selector targets
+    const selector = targetSpec;
+    const recheckFn = event === 'ready' ? () => this._isReadyTarget(this._findBySelector(selector)) : null;
+    if (typeof recheckFn === 'function' && recheckFn()) {
+      return Promise.resolve();
+    }
+    const matchesFn = ev => {
+      // Prefer composedPath() so events coming from inside shadow DOM still match
+      const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+      for (const n of path) {
+        if (n && n.matches && n.matches(selector)) return true;
+      }
+      const t = ev.target;
+      return !!(t && t.closest && t.closest(selector));
+    };
+    return this._waitForMatchingEvent(event, matchesFn, recheckFn);
+  }
+
+  /**
+   * Wait until all configured init gates are satisfied.
+   * This is the single consolidation point for init gating.
+   */
+  _waitForInitGates() {
+    if (this._initGatesPromise) return this._initGatesPromise;
+    const gates = this._collectInitGates();
+    if (!gates.length) {
+      this._initGatesPromise = Promise.resolve();
+      return this._initGatesPromise;
+    }
+    this._initGatesPromise = Promise.all(gates.map(g => this._waitForInitGate(g))).then(() => undefined);
+    return this._initGatesPromise;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === 'src') {
+      this.src = newValue;
+      if (!newValue) {
+        // Reset so a later src assignment can load again
+        this._srcLoadPromise = null;
+        return;
+      }
+      if (this.isConnected) {
+        this._maybeLoadFromSrc();
+      }
+      return;
+    }
+    if (name === 'selector') {
+      // Selector changes should affect a pending src-load
+      if (this.isConnected && this.src && !this._srcLoadPromise) {
+        this._maybeLoadFromSrc();
+      }
+    }
+  }
+  _maybeLoadFromSrc() {
+    if (!this.src) return null;
+    if (this._srcLoadPromise) return this._srcLoadPromise;
+    this._srcLoadPromise = (async () => {
+      await this._waitForInitGates();
+      if (!this.isConnected) return;
+      const selector = this.getAttribute('selector') || 'fx-fore';
+      await Fore.loadForeFromSrc(this, this.src, selector);
+    })();
+    return this._srcLoadPromise;
   }
   connectedCallback() {
     const modelElement = Array.from(this.children).find(modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL');
@@ -24110,7 +24264,7 @@ class FxFore extends HTMLElement {
     }
     this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
     if (this.src) {
-      this._loadFromSrc();
+      this._maybeLoadFromSrc();
       return;
     }
     this._injectDevtools();
@@ -24186,15 +24340,7 @@ class FxFore extends HTMLElement {
    * @private
    */
   async _loadFromSrc() {
-    // console.log('########## loading Fore from ', this.src, '##########');
-    if (this.hasAttribute('wait-for')) {
-      await this._whenDependenciesReady();
-    }
-    if (this.hasAttribute('selector')) {
-      await Fore.loadForeFromSrc(this, this.src, this.getAttribute('selector'));
-    } else {
-      await Fore.loadForeFromSrc(this, this.src, 'fx-fore');
-    }
+    return this._maybeLoadFromSrc();
   }
 
   /**
@@ -24489,7 +24635,7 @@ class FxFore extends HTMLElement {
       }
       // Templates are special: they use the namespace configuration from the place where they are
       // being defined
-      const instanceId = XPathUtil.getInstanceId(naked);
+      const instanceId = XPathUtil.getInstanceId(naked, node);
 
       // If there is an instance referred
       const inst = instanceId ? this.getModel().getInstance(instanceId) : this.getModel().getDefaultInstance();
@@ -24969,11 +25115,13 @@ class FxFore extends HTMLElement {
     let newElement;
     if (ref.includes('/')) {
       // multi-step ref expressions
-      newElement = XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this);
+      const namespaceResolver = createNamespaceResolver(ref, this);
+      newElement = XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this, namespaceResolver);
       // console.log('new subtree', newElement);
       return newElement;
     } else {
-      return XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this);
+      const namespaceResolver = createNamespaceResolver(ref, this);
+      return XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this, namespaceResolver);
     }
   }
   _handleDragStart(event) {
@@ -25132,6 +25280,7 @@ class FxFore extends HTMLElement {
 }
 FxFore.outermostHandler = null;
 FxFore.draggedItem = null;
+FxFore._initEventState = new WeakMap();
 if (!customElements.get('fx-fore')) {
   customElements.define('fx-fore', FxFore);
 }
@@ -25582,8 +25731,27 @@ class FxSubmission extends ForeElementMixin {
   _handleResponse(data, resolvedUrl, contentType) {
     // console.log('_handleResponse ', data);
 
-    const targetInstance = this._getTargetInstance();
+    this._getTargetInstance();
     if (this.replace === 'instance') {
+      const targetInstance = this._getTargetInstance();
+
+      // ### contentType handling
+
+      if (contentType.includes('html')) {
+        let effectiveData;
+        if (data.nodeType) {
+          effectiveData = data;
+        }
+        // ## try parsing
+        try {
+          effectiveData = new DOMParser().parseFromString(data, 'text/html');
+        } catch {
+          Fore.dispatch(this, 'error', {
+            message: 'could not parse data as HTML'
+          });
+        }
+        targetInstance.instanceData = effectiveData;
+      }
       if (targetInstance) {
         if (this.targetref) {
           const [theTarget] = evaluateXPath(this.targetref, targetInstance.instanceData.firstElementChild, this);
@@ -26070,6 +26238,9 @@ class AbstractControl extends UIElement {
     }
   }
   _toggleValid(valid) {
+    // Used by required handling (and potentially other callers).
+    // It must also fire validity events and sync aria-invalid.
+    const wasInvalid = this.hasAttribute('invalid');
     if (valid) {
       this.removeAttribute('invalid');
       this.setAttribute('valid', '');
@@ -26077,6 +26248,23 @@ class AbstractControl extends UIElement {
       this.removeAttribute('valid');
       this.setAttribute('invalid', '');
     }
+    this._syncAriaInvalid();
+    const isInvalid = this.hasAttribute('invalid');
+    // Only dispatch when the state actually changed
+    if (wasInvalid !== isInvalid) {
+      this._dispatchEvent(isInvalid ? 'invalid' : 'valid');
+    }
+  }
+  _syncAriaInvalid() {
+    // Keep widget aria-invalid in sync with the *control* state, regardless of
+    // whether invalidity comes from constraint, required emptiness, etc.
+    try {
+      const w = this.getWidget?.() || this.widget;
+      if (!w) return;
+      w.setAttribute('aria-invalid', this.hasAttribute('invalid') ? 'true' : 'false');
+    } catch (e) {
+      // ignore: widget might not exist yet
+    }
   }
   handleReadonly() {
     // console.log('mip readonly', this.modelItem.isReadonly);
@@ -26104,8 +26292,8 @@ class AbstractControl extends UIElement {
         // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
         this.setAttribute('valid', '');
-        this.getWidget().setAttribute('aria-invalid', 'false');
         this.removeAttribute('invalid');
+        this.getWidget().setAttribute('aria-invalid', 'false');
       } else {
         this.setAttribute('invalid', '');
         this.getWidget().setAttribute('aria-invalid', 'true');
@@ -26137,33 +26325,40 @@ class AbstractControl extends UIElement {
         this._dispatchEvent('invalid');
       }
     }
+
+    // Ensure aria-invalid matches the current control state even if
+    // we didn't enter the state-change branch above.
+    this._syncAriaInvalid();
   }
   handleRelevant() {
-    // console.log('mip valid', this.modelItem.enabled);
+    // IMPORTANT: don't clear relevant/nonrelevant BEFORE comparing states.
+    // Otherwise isEnabled() (based on attributes) always reads as "enabled"
+    // and we can never detect a transition back to relevant.
     const item = this.modelItem.node;
-    this.removeAttribute('relevant');
-    this.removeAttribute('nonrelevant');
+    const wasEnabled = this.isEnabled();
+
+    // Determine new enabled state
+    let newEnabled = !!this.modelItem.relevant;
+
+    // If a nodeset resolves to an empty array, treat the control as nonrelevant
     if (Array.isArray(item) && item.length === 0) {
-      this._dispatchEvent('nonrelevant');
+      newEnabled = false;
+    }
+
+    // Apply attributes
+    if (newEnabled) {
+      this.setAttribute('relevant', '');
+      this.removeAttribute('nonrelevant');
+    } else {
       this.setAttribute('nonrelevant', '');
-      // this.style.display = 'none';
-      return;
+      this.removeAttribute('relevant');
     }
-    if (this.isEnabled() !== this.modelItem.relevant) {
-      if (this.modelItem.relevant) {
-        this._dispatchEvent('relevant');
-        // this._fadeIn(this, this.display);
-        this.setAttribute('relevant', '');
-        // this.style.display = this.display;
-      } else {
-        this._dispatchEvent('nonrelevant');
-        // this._fadeOut(this);
-        this.setAttribute('nonrelevant', '');
-        // this.style.display = 'none';
-      }
+
+    // Dispatch only on actual change
+    if (wasEnabled !== newEnabled) {
+      this._dispatchEvent(newEnabled ? 'relevant' : 'nonrelevant');
     }
   }
-
   isRequired() {
     return this.hasAttribute('required');
   }
@@ -30212,7 +30407,7 @@ class FxActionLog extends HTMLElement {
    */
   _logDetails(e) {
     const eventType = e.type;
-    const path = XPathUtil.getPath(e.target, '');
+    const path = getPath(e.target, '');
     // console.log('>>>> _logDetails', path);
     const cut = path.substring(path.indexOf('/fx-fore'), path.length);
     const xpath = `/${cut}`;