@jinntec/fore 2.9.0 → 3.1.0

package/src/fx-fore.js

@@ -2,7 +2,11 @@ import { Fore } from './fore.js';
 import './fx-instance.js';
 import { FxModel } from './fx-model.js';
 import '@jinntec/jinn-toast';
-import { evaluateXPathToNodes, evaluateXPathToString, createNamespaceResolver } from './xpath-evaluation.js';
+import {
+  evaluateXPathToNodes,
+  evaluateXPathToString,
+  createNamespaceResolver,
+} from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 import { XPathUtil } from './xpath-util.js';
 import { FxRepeatAttributes } from './ui/fx-repeat-attributes.js';
@@ -22,9 +26,7 @@ const dirtyStates = {
 };
 async function waitForFunctionLibs(rootEl) {
   const libs = Array.from(rootEl.querySelectorAll('fx-functionlib'));
-  await Promise.all(
-      libs.map(l => (l.readyPromise ? l.readyPromise : Promise.resolve()))
-  );
+  await Promise.all(libs.map(l => (l.readyPromise ? l.readyPromise : Promise.resolve())));
 }
 
 /**
@@ -222,8 +224,6 @@ export class FxFore extends HTMLElement {
               right:0;
               left:0;
               height:40px;
-             border-radius: 5px;
-
             }
             .popup .close {
                 position: absolute;
@@ -248,6 +248,53 @@ export class FxFore extends HTMLElement {
             .warning{
                 background:orange;
             }
+            #authoringErrors {
+              z-index: 20;
+            }
+            #authoringErrors .popup {
+              width: 70%;
+              max-height: 80vh;
+              overflow:hidden;
+            }
+            #authoringErrors h2 {
+              background: #c62828;
+              color: white;
+              padding-left: 12px;
+              line-height: 40px;
+              font-size: 1rem;
+            }
+            #authoringErrors table {
+              width: 100%;
+              border-collapse: collapse;
+              font-size: 0.85rem;
+            }
+            #authoringErrors th {
+              text-align: left;
+              border-bottom: 2px solid #c62828;
+              padding: 4px 8px;
+            }
+            #authoringErrors td {
+              padding: 4px 8px;
+              border-bottom: 1px solid #ddd;
+              vertical-align: top;
+            }
+            #authoringErrors td:first-child {
+              color: #555;
+              font-family: monospace;
+              white-space: nowrap;
+            }
+            #authoringErrors .ae-actions {
+              text-align: center;
+              margin-top: 12px;
+            }
+            #authoringErrors .ae-actions button {
+              padding: 6px 20px;
+              background: #c62828;
+              color: white;
+              border: none;
+              border-radius: 3px;
+              cursor: pointer;
+            }
         `;
 
     const html = `
@@ -265,6 +312,14 @@ export class FxFore extends HTMLElement {
                     <div id="messageContent"></div>
                 </div>
            </div>
+           <div id="authoringErrors" class="overlay">
+                <div class="popup">
+                    <h2>Authoring Errors</h2>
+                    <a class="close" href="#" onclick="event.preventDefault();event.target.closest('.overlay').classList.remove('show')">&times;</a>
+                    <div id="authoringErrorsContent" style="margin-top:48px;"></div>
+                    <div class="ae-actions"><button onclick="this.closest('.overlay').classList.remove('show')">Dismiss</button></div>
+                </div>
+           </div>
            <slot name="event"></slot>
         `;
 
@@ -281,13 +336,14 @@ export class FxFore extends HTMLElement {
     this._scanForNewTemplateExpressionsNextRefresh = false;
     this.repeatsFromAttributesCreated = false;
     this.validateOn = this.hasAttribute('validate-on')
-        ? this.getAttribute('validate-on')
-        : 'update';
+      ? this.getAttribute('validate-on')
+      : 'update';
     // this.mergePartial = this.hasAttribute('merge-partial')? true:false;
     this.mergePartial = false;
     this.createNodes = this.hasAttribute('create-nodes') ? true : false;
     this._localNamesWithChanges = new Set();
     this.setAttribute('role', 'form'); // set aria role
+    this._pendingRefresh = false;
   }
 
   /**
@@ -304,9 +360,9 @@ export class FxFore extends HTMLElement {
   _parseTargetList(raw) {
     if (!raw) return [];
     return raw
-        .split(/[\s,]+/)
-        .map(s => s.trim())
-        .filter(Boolean);
+      .split(/[\s,]+/)
+      .map(s => s.trim())
+      .filter(Boolean);
   }
 
   _findBySelector(sel) {
@@ -322,10 +378,10 @@ export class FxFore extends HTMLElement {
 
   _isReadyTarget(el) {
     return !!(
-        el &&
-        (el.ready === true ||
-            (el.classList && el.classList.contains('fx-ready')) ||
-            (typeof el.hasAttribute === 'function' && el.hasAttribute('ready')))
+      el &&
+      (el.ready === true ||
+        (el.classList && el.classList.contains('fx-ready')) ||
+        (typeof el.hasAttribute === 'function' && el.hasAttribute('ready')))
     );
   }
 
@@ -342,7 +398,7 @@ export class FxFore extends HTMLElement {
     if (waitForRaw) {
       if (!this._warnedWaitForDeprecation) {
         console.warn(
-            '[fx-fore] The "wait-for" attribute is deprecated. Use init-on="ready" init-on-target="..." instead.',
+          '[fx-fore] The "wait-for" attribute is deprecated. Use init-on="ready" init-on-target="..." instead.',
         );
         this._warnedWaitForDeprecation = true;
       }
@@ -441,7 +497,7 @@ export class FxFore extends HTMLElement {
     // Special: closest fx-fore
     if (targetSpec === 'closest') {
       const recheckFn =
-          event === 'ready' ? () => this._isReadyTarget(this.closest('fx-fore')) : null;
+        event === 'ready' ? () => this._isReadyTarget(this.closest('fx-fore')) : null;
 
       const matchesFn = ev => {
         const t = ev.target;
@@ -455,7 +511,7 @@ export class FxFore extends HTMLElement {
     const selector = targetSpec;
 
     const recheckFn =
-        event === 'ready' ? () => this._isReadyTarget(this._findBySelector(selector)) : null;
+      event === 'ready' ? () => this._isReadyTarget(this._findBySelector(selector)) : null;
 
     if (typeof recheckFn === 'function' && recheckFn()) {
       return Promise.resolve();
@@ -488,7 +544,7 @@ export class FxFore extends HTMLElement {
     }
 
     this._initGatesPromise = Promise.all(gates.map(g => this._waitForInitGate(g))).then(
-        () => undefined,
+      () => undefined,
     );
     return this._initGatesPromise;
   }
@@ -523,7 +579,7 @@ export class FxFore extends HTMLElement {
       }
       // Fallback for odd engines/polyfills
       return (slotEl.assignedNodes({ flatten: true }) || []).filter(
-          n => n.nodeType === Node.ELEMENT_NODE,
+        n => n.nodeType === Node.ELEMENT_NODE,
       );
     };
 
@@ -541,8 +597,8 @@ export class FxFore extends HTMLElement {
     }
     if (!modelElement.inited) {
       console.info(
-          `%cFore running ... ${this.id ? '#' + this.id : ''}`,
-          'background:#64b5f6; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+        `%cFore running ... ${this.id ? '#' + this.id : ''}`,
+        'background:#64b5f6; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
       );
 
       const variables = new Map();
@@ -561,6 +617,7 @@ export class FxFore extends HTMLElement {
       await Promise.all(libs.map(l => l.readyPromise || Promise.resolve()));
 
       await modelElement.modelConstruct();
+      console.log('varbindings ', this._instanceVarBindings);
       this._handleModelConstructDone();
     }
 
@@ -568,7 +625,6 @@ export class FxFore extends HTMLElement {
     this.inited = true;
   };
 
-
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
 
@@ -609,7 +665,7 @@ export class FxFore extends HTMLElement {
 
   connectedCallback() {
     const modelElement = Array.from(this.children).find(
-        modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL',
+      modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL',
     );
 
     this.model = modelElement;
@@ -636,8 +692,8 @@ export class FxFore extends HTMLElement {
             },true);
         */
     this.ignoreExpressions = this.hasAttribute('ignore-expressions')
-        ? this.getAttribute('ignore-expressions')
-        : null;
+      ? this.getAttribute('ignore-expressions')
+      : null;
 
     this.lazyRefresh = this.hasAttribute('refresh-on-view');
     if (this.lazyRefresh) {
@@ -674,6 +730,79 @@ export class FxFore extends HTMLElement {
     }
   }
 
+  /**
+   * Ensure there is an fx-var for each fx-instance in this fx-fore's fx-model scope.
+   *
+   * - For instances with an @id, create `$id` with value `instance('id')`.
+   * - For the first instance WITHOUT an @id, create `$default` with value `instance()`.
+   * - IMPORTANT: if an instance has id="default", we STILL bind `$default` to `instance()`
+   *   (avoids recursion / stack overflow during fx-var refresh in some cycles).
+   *
+   * Vars are inserted as direct children of `<fx-fore>` immediately before `<fx-model>`.
+   * The method is idempotent.
+   */
+  _ensureInstanceVars() {
+    if (this.__instanceVarsEnsured) return;
+    this.__instanceVarsEnsured = true;
+
+    // Resolve this fx-fore's own fx-model (not nested ones)
+    const model = this.querySelector(':scope > fx-model');
+    if (!model) return;
+
+    // Collect instances that are direct children of this model (doc order)
+    const instances = Array.from(model.querySelectorAll(':scope > fx-instance'));
+
+    // Collect existing fx-var names at fx-fore scope (author-defined and previously generated)
+    const existingVars = new Set(
+      Array.from(this.querySelectorAll(':scope > fx-var'))
+        .map(v => (v.getAttribute('name') || '').trim())
+        .filter(Boolean),
+    );
+
+    let defaultAssigned = false;
+
+    for (const inst of instances) {
+      const rawId = (inst.getAttribute('id') || '').trim();
+
+      // First id-less instance => $default = instance()
+      if (!rawId) {
+        if (defaultAssigned) continue;
+        defaultAssigned = true;
+
+        const name = 'default';
+        if (existingVars.has(name)) continue;
+
+        const fxVar = document.createElement('fx-var');
+        fxVar.setAttribute('name', name);
+        fxVar.setAttribute('value', 'instance()');
+        fxVar.setAttribute('data-generated', 'instance-var');
+
+        this.insertBefore(fxVar, model);
+        existingVars.add(name);
+        continue;
+      }
+
+      // Normal id-based instance var
+      const name = rawId;
+      if (existingVars.has(name)) continue;
+
+      const fxVar = document.createElement('fx-var');
+      fxVar.setAttribute('name', name);
+
+      // IMPORTANT: avoid `instance('default')` recursion in fx-var refresh
+      if (name === 'default') {
+        fxVar.setAttribute('value', 'instance()');
+      } else {
+        fxVar.setAttribute('value', `instance('${name}')`);
+      }
+
+      fxVar.setAttribute('data-generated', 'instance-var');
+
+      this.insertBefore(fxVar, model);
+      existingVars.add(name);
+    }
+  }
+
   _injectDevtools() {
     if (this.ownerDocument.querySelector('fx-devtools')) {
       // There's already a devtools, so we can ignore this one.
@@ -713,16 +842,19 @@ export class FxFore extends HTMLElement {
   }
 
   markAsClean() {
+    console.log('marking as clean', this);
     this.addEventListener(
-        'value-changed',
-        () => {
-          this.dirtyState = dirtyStates.DIRTY;
-          this.classList.toggle('fx-modified')
-        },
-        { once: true },
+      'value-changed',
+      () => {
+        console.log('MARK as modified', this);
+        this.dirtyState = dirtyStates.DIRTY;
+        this.classList.toggle('fx-modified');
+      },
+      { once: true },
     );
     this.dirtyState = dirtyStates.CLEAN;
     this.classList.remove('fx-modified');
+    this.querySelectorAll('.visited').forEach(el => el.classList.remove('visited'));
   }
 
   /**
@@ -793,89 +925,76 @@ export class FxFore extends HTMLElement {
   /**
    * @param {(boolean|{reason:'index-function'})} [force]fx-fore
    */
+  /**
+   * @param {(boolean|{reason:'index-function'})} [force]
+   */
+  /**
+   * @param {(boolean|{reason:'index-function'})} [force]
+   */
   async refresh(force) {
+    // If we're already refreshing, do NOT drop the request.
+    // Queue a hard refresh and return a promise that resolves when the next refresh finishes.
     if (this.isRefreshing) {
-      return;
-    }
+      // keep "strongest" request: any true means hard refresh
+      this._pendingRefresh = this._pendingRefresh || force === true;
 
-    /*
-    if (force !== true && this._localNamesWithChanges.size > 0) {
-      force = {
-        ...(force || { reason: undefined }),
-        elementLocalnamesWithChanges: Array.from(this._localNamesWithChanges),
-      };
-      this._localNamesWithChanges.clear();
+      return new Promise(resolve => {
+        this.addEventListener('refresh-done', () => resolve(), { once: true });
+      });
     }
-*/
 
     this.isRefreshing = true;
     this.isRefreshPhase = true;
 
-    // refresh () {
-    // ### refresh Fore UI elements
-    // if (!this.initialRun && this.toRefresh.length !== 0) {
-    // if (!this.initialRun && this.toRefresh.length !== 0) {
-    // if (!force && !this.initialRun && this.toRefresh.length !== 0) {
-    if (force === true || this.initialRun) {
-      console.log('🔄 🔴🔴🔴 ### full refresh() on ', this);
-      Fore.refreshChildren(this, force);
-    } else {
-      // Process all batched no tifications at the end of the refresh phase
-      console.log('🔄 🎯  ### processing batched notifications');
-      await this._processBatchedNotifications();
-    }
+    try {
+      if (force === true || this.initialRun) {
+        performance.mark('force-refresh-start');
+        console.log('🔄 🔴🔴🔴 ### full refresh() on ', this);
+        await Fore.refreshChildren(this, force);
+        performance.mark('force-refresh-end');
+        performance.measure('force-refresh', 'force-refresh-start', 'force-refresh-end');
+      } else {
+        await this._processBatchedNotifications();
+      }
 
-    // ### refresh template expressions
-    if (force === true || this.initialRun || this._scanForNewTemplateExpressionsNextRefresh) {
-      this._updateTemplateExpressions();
-      this._scanForNewTemplateExpressionsNextRefresh = false; // reset
-    }
+      if (force === true || this.initialRun || this._scanForNewTemplateExpressionsNextRefresh) {
+        this._updateTemplateExpressions();
+        this._scanForNewTemplateExpressionsNextRefresh = false;
+      }
 
-    this._processTemplateExpressions();
+      this._processTemplateExpressions();
 
-    this.isRefreshPhase = false;
+      this.isRefreshPhase = false;
+      this.initialRun = false;
+      this.style.visibility = 'visible';
 
-    // console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
-    // this.dispatchEvent(new CustomEvent('refresh-done'));
-    this.initialRun = false;
-    this.style.visibility = 'visible';
-    console.info(
+      console.info(
         `%c ✅ refresh-done on #${this.id}`,
         'background:darkorange; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
         this.getModel().modelItems,
-    );
-
-    Fore.dispatch(this, 'refresh-done', {});
-
-    const subFores = Array.from(this.querySelectorAll('fx-fore'));
-    /*
-        calling the parent to refresh causes errors and inconsistent state. Also it is questionable
-        if a child should actually interact with its parent in this way.
-
-        This only affects the refreshing NOT the data mutation itself which is happening as expected.
-
-        Current solution is that a child that wants the parent to refresh must do so by adding an additional
-        event handler that dispatches an event upwards and having a handler in the parent to refresh itself.
+      );
 
-        So refreshed propagate downwards but not upwards which is at least an option to consider.
+      Fore.dispatch(this, 'refresh-done', {});
 
-        if(this.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE){
-            // await this.parentNode.closest('fx-fore')?.refresh(false);
+      const subFores = Array.from(this.querySelectorAll('fx-fore'));
+      for (const subFore of subFores) {
+        if (subFore.ready) {
+          await subFore.refresh(true);
         }
-    */
-    for (const subFore of subFores) {
-      // subFore.refresh(false, changedPaths);
-      if (subFore.ready) {
-        // Do an unconditional hard refresh: there might be changes that are relevant
-        // todo: investigate impact of observer architecture - do we really want to refresh all subfore elements with a hard refresh?
-        await subFore.refresh(true);
+      }
+    } finally {
+      this.isRefreshing = false;
+
+      // If anything requested a refresh while we were refreshing, run exactly one more.
+      // This prevents "dropped" refresh requests (your timeout).
+      if (this._pendingRefresh) {
+        const pendingHard = this._pendingRefresh === true;
+        this._pendingRefresh = false;
+        // Important: do NOT await in finally without clearing flags first.
+        await this.refresh(pendingHard);
       }
     }
-    this.isRefreshing = false;
-    // Clear the batch
-    // this.batchedNotifications.clear();
   }
-
   /**
    * Add a ModelItem to the batch of notifications to be processed at the end of the refresh phase
    * @param {ModelItem | import('./ui/UIElement.js').UIElement} item - The ModelItem or UI Element to add to the batch
@@ -892,6 +1011,9 @@ export class FxFore extends HTMLElement {
    */
   _processBatchedNotifications() {
     if (this.batchedNotifications.size > 0) {
+      console.log(`🔄 🎯  ### processing ${this.batchedNotifications.size} batched notifications`);
+      console.log('🔄 🎯  ### processing ', Array.from(this.batchedNotifications));
+
       // console.log(`🔍 Processing ${this.batchedNotifications.size} batched notifications`);
 
       // Process all batched notifications
@@ -932,6 +1054,10 @@ export class FxFore extends HTMLElement {
         }
       });
 
+      // Update template expressions after processing batched notifications
+      // This ensures template expressions are re-evaluated when data changes
+      this._processTemplateExpressions();
+
       // Clear the batch
       this.batchedNotifications.clear();
     }
@@ -947,7 +1073,7 @@ export class FxFore extends HTMLElement {
    */
   _updateTemplateExpressions() {
     const search =
-        "(descendant-or-self::*!(text(), @*))[contains(., '{')][substring-after(., '{') => contains('}')][not(ancestor-or-self::*[self::fx-model or self::fx-function])]";
+      "(descendant-or-self::*!(text(), @*))[contains(., '{')][substring-after(., '{') => contains('}')][not(ancestor-or-self::*[self::fx-model or self::fx-function])]";
 
     const tmplExpressions = evaluateXPathToNodes(search, this, this);
     // console.log('template expressions found ', tmplExpressions);
@@ -958,6 +1084,7 @@ export class FxFore extends HTMLElement {
 
     // console.log('######### storedTemplateExpressions', this.storedTemplateExpressions.length);
 
+    if (!tmplExpressions) return;
     /*
     storing expressions and their nodes for re-evaluation
     */
@@ -1021,45 +1148,64 @@ export class FxFore extends HTMLElement {
    * @param {Node} node the node which will get updated with evaluation result
    */
   evaluateTemplateExpression(expr, node) {
-    // ### do not evaluate template expressions with nonrelevant sections
+    // ### do not evaluate template expressions within nonrelevant sections
     if (node.nodeType === Node.ATTRIBUTE_NODE && node.ownerElement.closest('[nonrelevant]')) return;
     if (node.nodeType === Node.TEXT_NODE && node.parentNode.closest('[nonrelevant]')) return;
     if (node.nodeType === Node.ELEMENT_NODE && node.closest('[nonrelevant]')) return;
 
-    // if(node.closest('[nonrelevant]')) return;
-    const replaced = expr.replace(/{[^}]*}/g, match => {
+    // ---- IMPORTANT GUARD ----
+    // Prevent JSON object/array literals in fx-insert@origin from being treated as
+    // template expressions (they contain {...} but are not XPath templates).
+    if (node.nodeType === Node.ATTRIBUTE_NODE) {
+      const el = node.ownerElement;
+      if (el && el.localName === 'fx-insert' && node.name === 'origin') {
+        const v = String(node.value ?? '').trim();
+        const isJsonLiteral =
+          (v.startsWith('{') && v.endsWith('}')) || (v.startsWith('[') && v.endsWith(']'));
+        if (isJsonLiteral) return;
+      }
+    }
+    // -------------------------
+
+    // The element that "defines" the template expression is the correct basis for:
+    // - namespace resolution (xmlns lookup)
+    // - fx-var scoping (in-scope variables)
+    // - context() in repeats (repeat item detection)
+    const definitionElement =
+      node.nodeType === Node.ATTRIBUTE_NODE
+        ? node.ownerElement
+        : node.nodeType === Node.TEXT_NODE
+          ? node.parentElement || node.parentNode
+          : node;
+
+    const formElement =
+      definitionElement && definitionElement.nodeType === Node.ELEMENT_NODE
+        ? definitionElement
+        : this;
+
+    const replaced = String(expr ?? '').replace(/{[^}]*}/g, match => {
       if (match === '{}') return match;
+
       const naked = match.substring(1, match.length - 1);
       const inscope = getInScopeContext(node, naked);
+
       if (!inscope) {
-        console.warn('no inscope context for expr', naked);
-        const errNode =
-            node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ATTRIBUTE_NODE
-                ? node.parentNode
-                : node;
         return match;
       }
-      // Templates are special: they use the namespace configuration from the place where they are
-      // being defined
-      const instanceId = XPathUtil.getInstanceId(naked,node);
-
-      // If there is an instance referred
-      const inst = instanceId
-          ? this.getModel().getInstance(instanceId)
-          : this.getModel().getDefaultInstance();
 
       try {
-        const result = evaluateXPathToString(naked, inscope, node, null, inst);
-        // console.log(`template expression result for ${naked}=${result}`);
-        return result;
+        // IMPORTANT:
+        // Do NOT pass `null` as the 4th argument here.
+        // Passing `null` suppresses variable collection, which hides implicit vars
+        // like `$default`.
+        return evaluateXPathToString(naked, inscope, formElement);
       } catch (error) {
         console.warn('ignoring unparseable expr', error);
         return match;
       }
     });
 
-    // Update to the new value. Don't do it though if nothing changed to prevent iframes or
-    // images from reloading for example
+    // Update to the new value only if it changed (avoid iframe/image reload etc.)
     if (node.nodeType === Node.ATTRIBUTE_NODE) {
       const parent = node.ownerElement;
       if (parent.getAttribute(node.nodeName) !== replaced) {
@@ -1070,9 +1216,7 @@ export class FxFore extends HTMLElement {
         node.textContent = replaced;
       }
     }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
+  } // eslint-disable-next-line class-methods-use-this
   _getTemplateExpression(node) {
     if (this.ignoredNodes) {
       if (node.nodeType === Node.ATTRIBUTE_NODE) {
@@ -1121,17 +1265,17 @@ export class FxFore extends HTMLElement {
 
     // ##### lazy creation should NOT take place if there's a parent Fore using shared instances
     const parentFore =
-        this.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
-            ? this.parentNode.closest('fx-fore')
-            : null;
+      this.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
+        ? this.parentNode.closest('fx-fore')
+        : null;
     if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
       console.log('fragment', this.parentNode);
     }
 
     if (parentFore) {
       const shared = parentFore
-          .getModel()
-          .instances.filter(shared => shared.hasAttribute('shared'));
+        .getModel()
+        .instances.filter(shared => shared.hasAttribute('shared'));
       if (shared.length !== 0) return;
     }
 
@@ -1152,8 +1296,8 @@ export class FxFore extends HTMLElement {
       }
     } catch (e) {
       console.warn(
-          'lazyCreateInstance created an error attempting to create a document',
-          e.message,
+        'lazyCreateInstance created an error attempting to create a document',
+        e.message,
       );
     }
   }
@@ -1210,8 +1354,8 @@ export class FxFore extends HTMLElement {
    */
   async _initUI() {
     console.info(
-        `%cinitUI #${this.id}`,
-        'background:lightblue; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+      `%cinitUI #${this.id}`,
+      'background:lightblue; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
     );
 
     const parentFore = this.closest('fx-fore');
@@ -1233,7 +1377,12 @@ export class FxFore extends HTMLElement {
 
     // First refresh should be forced
     if (this.createNodes) {
+      performance.mark('initData-start');
       this.initData();
+      performance.mark('initData-end');
+
+      performance.measure('initData', 'initData-start', 'initData-end');
+
       const binds = this.getModel().querySelector('fx-bind');
       if (binds) {
         this.getModel().updateModel();
@@ -1251,13 +1400,12 @@ export class FxFore extends HTMLElement {
     this.initialRun = false;
     // console.log('### >>>>> dispatching ready >>>>>', this);
     console.info(
-        `%c ✅ ${this.id ? '#' + this.id : 'Fore'} is ready`,
-        'background:lightgreen; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+      `%c ✅ ${this.id ? '#' + this.id : 'Fore'} is ready`,
+      'background:lightgreen; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
     );
 
     // console.log(`### <<<<< ${this.id} ready >>>>>`);
 
-    // console.log('### modelItems: ', this.getModel().modelItems);
     Fore.dispatch(this, 'ready', {});
     // console.log('dataChanged', FxModel.dataChanged);
     this.markAsClean();
@@ -1271,6 +1419,50 @@ export class FxFore extends HTMLElement {
       e.stopPropagation();
       e.dataTransfer.dropEffect = 'move';
     });
+
+    // Run authoring checks after ready — they're diagnostic only and must not delay
+    // the ready event or drag-listener registration (both of which tests depend on).
+    try {
+      await this._runAuthoringChecks();
+    } catch (e) {
+      console.warn('[fore] authoring check failed:', e.message);
+    }
+  }
+
+  async _runAuthoringChecks() {
+    if (this.hasAttribute('no-check')) return;
+    if (new URLSearchParams(window.location.search).has('no-check')) return;
+
+    const { checkAuthoring } = await import('./authoring-check.js');
+    const errors = checkAuthoring(this);
+    if (errors.length) {
+      this._showAuthoringErrors(errors);
+    }
+  }
+
+  _showAuthoringErrors(errors) {
+    const overlay = this.shadowRoot.getElementById('authoringErrors');
+    const content = this.shadowRoot.getElementById('authoringErrorsContent');
+    if (!overlay || !content) return;
+
+    const rows = errors
+      .map(({ element, message }) => {
+        const path = element
+          ? element.tagName.toLowerCase() + (element.id ? `#${element.id}` : '')
+          : '?';
+        const safeMsg = message.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        const safePath = path.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return `<tr><td>${safePath}</td><td>${safeMsg}</td></tr>`;
+      })
+      .join('');
+
+    content.innerHTML = `
+      <table>
+        <thead><tr><th>Element</th><th>Problem</th></tr></thead>
+        <tbody>${rows}</tbody>
+      </table>`;
+
+    overlay.classList.add('show');
   }
 
   /**
@@ -1376,28 +1568,189 @@ export class FxFore extends HTMLElement {
     // Insert after the previous control
     return referenceNode;
   }
-
   /**
    * @param  {HTMLElement}  root The root of the data initialization. fx-repeat overrides this when it makes new repeat items
-   *
    */
   initData(root = this) {
-    // const created = new Promise(resolve => {
-    // console.log('INIT');
-    // const boundControls = Array.from(root.querySelectorAll('[ref]:not(fx-model *),fx-repeatitem'));
+    /**
+     * @param {*} value
+     * @returns {boolean}
+     */
+    const isObjectLike = value =>
+      value !== null && (typeof value === 'object' || typeof value === 'function');
+
+    /**
+     * @param {*} nodeset
+     * @returns {boolean}
+     */
+    const hasResolvedNodeset = nodeset => {
+      if (nodeset == null) return false;
+
+      // Atomic values like strings/numbers/booleans are valid resolved XPath results
+      if (!isObjectLike(nodeset)) return true;
+
+      if (Array.isArray(nodeset)) return nodeset.length > 0;
+
+      if (typeof nodeset.length === 'number' && !('nodeType' in nodeset)) {
+        return nodeset.length > 0;
+      }
+
+      if (typeof nodeset[Symbol.iterator] === 'function' && !('nodeType' in nodeset)) {
+        for (const item of nodeset) {
+          return item !== undefined;
+        }
+        return false;
+      }
+
+      return !!nodeset.nodeType;
+    };
+
+    /**
+     * Only try create-nodes for path-like refs, not general expressions like sequences.
+     * @param {string} ref
+     * @returns {boolean}
+     */
+    const isCreateNodesCandidate = ref => {
+      const expr = String(ref || '').trim();
+      if (!expr || expr === '.') return false;
+      if (expr.startsWith('"') || expr.startsWith("'")) return false;
+
+      // Ignore only simple literal sequences like ('a', 'b', 'c') or (1, 2, 3).
+      // Keep fx-repeat refs that are real path expressions or more complex XPath.
+      const simpleSequencePattern =
+        /^\(\s*(?:(?:'[^']*'|"[^"]*"|\d+(?:\.\d+)?|\.)(?:\s*,\s*(?:'[^']*'|"[^"]*"|\d+(?:\.\d+)?|\.))*)?\s*\)$/;
+      if (simpleSequencePattern.test(expr)) return false;
+
+      return true;
+    };
+
+    /**
+     * Detect whether a ref ends in an attribute step.
+     * @param {string} ref
+     * @returns {boolean}
+     */
+    const isAttributeRef = ref => /(^|\/)\s*@/.test(String(ref || '').trim());
+
+    /**
+     * Normalize a possibly sequence-like nodeset/context to a single DOM node.
+     * @param {*} candidate
+     * @returns {*}
+     */
+    const firstNode = candidate => {
+      if (!candidate) return null;
+      if (!isObjectLike(candidate)) return null;
+      if (candidate.nodeType) return candidate;
+
+      if (Array.isArray(candidate)) {
+        return candidate.find(item => item && isObjectLike(item) && item.nodeType) || null;
+      }
+
+      if (typeof candidate.length === 'number' && typeof candidate.item === 'function') {
+        for (let i = 0; i < candidate.length; i += 1) {
+          const item = candidate.item(i);
+          if (item && isObjectLike(item) && item.nodeType) return item;
+        }
+      }
+
+      return null;
+    };
+
+    /**
+     * Detect XPath results that are sequences of atomic values rather than DOM nodes.
+     * These are valid resolved results for repeats, but they must never trigger create-nodes.
+     * @param {*} candidate
+     * @returns {boolean}
+     */
+    const isAtomicSequence = candidate => {
+      if (!candidate) return false;
+
+      // A single primitive value is also atomic from our perspective
+      if (!isObjectLike(candidate)) return true;
+
+      if (candidate.nodeType) return false;
+
+      if (Array.isArray(candidate)) {
+        return (
+          candidate.length > 0 &&
+          !candidate.some(item => item && isObjectLike(item) && item.nodeType)
+        );
+      }
+
+      if (typeof candidate.length === 'number' && typeof candidate.item === 'function') {
+        return false;
+      }
+
+      if (typeof candidate[Symbol.iterator] === 'function') {
+        for (const item of candidate) {
+          return !(item && isObjectLike(item) && item.nodeType);
+        }
+      }
+
+      return false;
+    };
+
+    /**
+     * Check whether a bound element is resolved after evalInContext.
+     * Attribute refs often expose an empty string as nodeset, so use the model item node in that case.
+     * @param {import('./ForeElementMixin.js').default} bound
+     * @returns {boolean}
+     */
+    const isResolvedBound = bound => {
+      if (hasResolvedNodeset(bound.nodeset)) return true;
+      if (bound.nodeName === 'FX-REPEAT' && isAtomicSequence(bound.nodeset)) return true;
+      if (isAttributeRef(bound.ref)) {
+        const modelItem = typeof bound.getModelItem === 'function' ? bound.getModelItem() : null;
+        return !!modelItem?.node;
+      }
+      return false;
+    };
+
+    /**
+     * Determine the best context node for lazy node creation.
+     * Prefer the bound element's in-scope context, but fall back to a structural parent.
+     * @param {import('./ForeElementMixin.js').default} bound
+     * @param {*} fallback
+     * @returns {*}
+     */
+    const getCreationContext = (bound, fallback) => {
+      const direct =
+        typeof bound.getInScopeContext === 'function' ? firstNode(bound.getInScopeContext()) : null;
+      if (direct) return direct;
+
+      const dotCtx = firstNode(getInScopeContext(bound, '.'));
+      if (dotCtx) return dotCtx;
+
+      const refCtx = firstNode(getInScopeContext(bound, bound.ref));
+      if (refCtx) return refCtx;
+
+      return firstNode(fallback);
+    };
 
     /**
      * @type {import('./ForeElementMixin.js').default[]}
      */
     const boundControls = Array.from(
-        root.querySelectorAll(
-            'fx-control[ref],fx-upload[ref],fx-group[ref],fx-repeat[ref], fx-switch[ref]',
-        ),
-    );
-    if (root.matches && root.matches('fx-repeatitem')) {
+      root.querySelectorAll(
+        'fx-control[ref],fx-upload[ref],fx-group[ref],fx-repeat[ref], fx-switch[ref]',
+      ),
+    ).filter(boundEl => {
+      if (boundEl.nodeName !== 'FX-REPEAT') return true;
+
+      const repeatRef = String(boundEl.getAttribute('ref') || '').trim();
+
+      // Any repeat whose ref is a pure parenthesized expression is not a create-nodes candidate.
+      // Example: ('a', 'b', 'c')
+      if (repeatRef.startsWith('(')) return false;
+
+      return isCreateNodesCandidate(repeatRef);
+    });
+
+    if (root.matches && root.matches('fx-repeatitem') && firstNode(root.nodeset)) {
       boundControls.unshift(root);
     }
+
     console.log('_initData', boundControls);
+
     for (let i = 0; i < boundControls.length; i++) {
       const bound = boundControls[i];
 
@@ -1408,11 +1761,21 @@ export class FxFore extends HTMLElement {
         // Repeat items are dumb. They do not respond to evalInContext
         bound.evalInContext();
       }
-      if (bound.nodeset !== null && !(Array.isArray(bound.nodeset) && bound.nodeset.length === 0)) {
-        // console.log('Node exists', bound.nodeset);
+
+      if (bound.nodeName === 'FX-REPEAT' && isAtomicSequence(bound.nodeset)) {
+        continue;
+      }
+      if (isResolvedBound(bound)) {
+        continue;
+      }
+      if (!isCreateNodesCandidate(bound.ref)) {
+        continue;
+      }
+
+      // Ignore bound elements in a different form. They will be taken care of in the other form.
+      if (bound.closest('fx-fore') !== this) {
         continue;
       }
-      // console.log('Node does not exists', bound.ref);
 
       // We need to create that node!
       const previousControl = boundControls[i - 1];
@@ -1420,26 +1783,16 @@ export class FxFore extends HTMLElement {
       // Previous control can either be an ancestor of us, or a previous node, which can be a sibling, or a child of a sibling.
       // First: parent
       if (previousControl && previousControl.contains(bound)) {
-        // Parent is here.
-        // console.log('insert into', bound, previousControl);
-        // console.log('insert into nodeset', bound.nodeset);
         /**
          * @type {ParentNode}
          */
-        const parentNodeset = previousControl.nodeset;
-        // console.log('parentNodeset', parentNodeset);
-
-        // const parentModelItemNode = parentModelItem.node;
+        const parentNodeset =
+          firstNode(previousControl.nodeset) || firstNode(root.getModel().getDefaultContext());
+        const creationContext = getCreationContext(bound, parentNodeset);
         const ref = bound.ref;
-        // const newElement = parentModelItemNode.ownerDocument.createElement(ref);
-        // if (parentNodeset.querySelector(`[ref="${ref}"]`)) {
-        //   console.log(`Node with ref "${ref}" already exists.`);
-        //   continue;
-        // }
 
-        const newNode = this._createNodes(ref, parentNodeset);
-        if (!newNode) {
-          // We could not make the node for some reason. Maybe it's something like `instance('XXX')`?
+        const newNode = this._createNodes(ref, creationContext || parentNodeset);
+        if (!newNode || !parentNodeset) {
           continue;
         }
         if (newNode.nodeType === Node.ATTRIBUTE_NODE) {
@@ -1457,17 +1810,11 @@ export class FxFore extends HTMLElement {
           // Do not try to get a bind for a nodeSET of a repeat. there are multiple.
           bound.getModelItem().bind?.evalInContext();
         }
-
-        // console.log('CREATED child', newElement);
-        // console.log('new control evaluated to ', control.nodeset);
-        // Done!
         continue;
       }
-      // console.log('previousControl', previousControl);
-      // console.log('control', control);
+
       // Is previousControl a sibling or a descendant of a logical sibling? Keep looking backwards until we share parents!
-      let ourParent = XPathUtil.getParentBindingElement(bound);
-      // console.log('ourParent', ourParent);
+      const ourParent = XPathUtil.getParentBindingElement(bound);
       let siblingControl = null;
 
       for (let j = i - 1; j > 0; --j) {
@@ -1480,11 +1827,7 @@ export class FxFore extends HTMLElement {
           break;
         }
       }
-      if (!siblingControl) {
-        // console.log('No sibling found for', bound);
-      }
-      // console.log('sibling', siblingControl);
-      // todo: review: should this not just be inscopeContext?
+
       let parentNodeset;
       if (!ourParent || !ourParent.nodeset) {
         /*
@@ -1493,13 +1836,13 @@ export class FxFore extends HTMLElement {
            */
         parentNodeset = root.getModel().getDefaultContext();
       } else {
-        parentNodeset = ourParent.nodeset;
+        parentNodeset = firstNode(ourParent.nodeset) || root.getModel().getDefaultContext();
       }
       const ref = bound.ref;
+      const creationContext = getCreationContext(bound, parentNodeset);
 
-      const newNode = this._createNodes(ref, parentNodeset);
+      const newNode = this._createNodes(ref, creationContext || parentNodeset);
       if (!newNode) {
-        // We could not make the node for some reason. Maybe it's something like `instance('XXX')`?
         continue;
       }
 
@@ -1507,13 +1850,12 @@ export class FxFore extends HTMLElement {
         parentNodeset.setAttributeNode(newNode);
       } else {
         let referenceNode = this._findReferenceNodeForNewElement(
-            newNode,
-            parentNodeset,
-            siblingControl,
+          newNode,
+          parentNodeset,
+          siblingControl,
         );
 
         if (referenceNode) {
-          // console.log('insert after', referenceNode,newNode);
           if (referenceNode.nodeType === Node.DOCUMENT_NODE) {
             referenceNode.firstElementChild.append(newNode);
           } else {
@@ -1524,50 +1866,135 @@ export class FxFore extends HTMLElement {
         }
       }
 
-      /*
-            console.log('control inscope', control.getInScopeContext());
-            console.log('control ref', control.ref);
-            console.log('control new element parent', newElement.parentNode.nodeName);
-      */
-
       bound.evalInContext();
       bound.getModelItem().bind?.evalInContext();
 
-      if (!bound.nodeset) {
-        throw new Error('Creating annode failed');
+      if (!isResolvedBound(bound)) {
+        console.warn('create-nodes: could not resolve bound after node creation, skipping', bound);
+        continue;
       }
-      // console.log('new control evaluated to ', control.nodeset);
-      // console.log('CREATED sibling', newElement);
     }
-    // console.log('DATA', this.getModel().getDefaultContext());
   }
-
   _createNodes(ref, referenceNode) {
-    // console.log('creating', ref)
-    // console.log('ownerDoc', referenceNode.ownerDocument);
-    /*
-        const existingNode = evaluateXPathToFirstNode(ref, referenceNode, this);
-        if(existingNode){
-            console.log(`Node already exists for ref: ${ref}`);
-            return existingNode;
-        }
-    console.log(`creating new node for ref: ${ref}`);
-    */
-    if (/instance\([^\)]*\)/.test(ref)) {
-      // This is an absolute path for some instance. Not supporteed for now
+    if (!ref || !referenceNode) return null;
+
+    const xpath = String(ref).trim();
+    if (!xpath || xpath === '.') return null;
+
+    if (/^instance\([^\)]*\)/.test(xpath)) {
+      // This is an absolute path for some instance. Not supported for create-nodes here.
       return null;
     }
-    let newElement;
-    if (ref.includes('/')) {
-      // multi-step ref expressions
-      const namespaceResolver = createNamespaceResolver(ref, this);
-      newElement = XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this, namespaceResolver);
-      // console.log('new subtree', newElement);
-      return newElement;
-    } else {
-      const namespaceResolver = createNamespaceResolver(ref, this);
-      return XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this, namespaceResolver);
+
+    const ownerDoc =
+      referenceNode.nodeType === Node.DOCUMENT_NODE ? referenceNode : referenceNode.ownerDocument;
+
+    const baseElement =
+      referenceNode.nodeType === Node.DOCUMENT_NODE
+        ? referenceNode.documentElement
+        : referenceNode.nodeType === Node.ATTRIBUTE_NODE
+          ? referenceNode.ownerElement
+          : referenceNode;
+
+    if (!ownerDoc) return null;
+
+    const baseNamespace = baseElement?.namespaceURI || null;
+    const namespaceResolver = createNamespaceResolver(xpath, this);
+
+    const parseName = token => {
+      const raw = token.trim();
+
+      if (raw.startsWith('@')) {
+        const attrToken = raw.slice(1);
+        if (attrToken.startsWith('*:')) {
+          return { isAttribute: true, namespaceURI: null, localName: attrToken.substring(2) };
+        }
+        if (attrToken.includes(':')) {
+          const [prefix, localName] = attrToken.split(':');
+          return {
+            isAttribute: true,
+            namespaceURI: prefix === '*' ? null : namespaceResolver(prefix) || null,
+            localName,
+          };
+        }
+        return { isAttribute: true, namespaceURI: null, localName: attrToken };
+      }
+
+      if (raw.startsWith('*:')) {
+        return { isAttribute: false, namespaceURI: baseNamespace, localName: raw.substring(2) };
+      }
+      if (raw.includes(':')) {
+        const [prefix, localName] = raw.split(':');
+        return {
+          isAttribute: false,
+          namespaceURI: prefix === '*' ? baseNamespace : namespaceResolver(prefix) || baseNamespace,
+          localName,
+        };
+      }
+      return { isAttribute: false, namespaceURI: baseNamespace, localName: raw };
+    };
+
+    const parseStep = step => {
+      const trimmed = step.trim();
+      const nameMatch = trimmed.match(/^([^\[]+)/);
+      const token = nameMatch ? nameMatch[1].trim() : trimmed;
+      const predicates = [];
+
+      const predicateRegex = /\[\s*@([^\]\s=]+)\s*=\s*(['"])(.*?)\2\s*\]/g;
+      let match;
+      while ((match = predicateRegex.exec(trimmed)) !== null) {
+        predicates.push({ name: match[1], value: match[3] });
+      }
+      return { token, predicates };
+    };
+
+    const steps = xpath
+      .split('/')
+      .map(step => step.trim())
+      .filter(step => step && step !== '.');
+
+    if (!steps.length) return null;
+
+    let subtreeRoot = null;
+    let current = null;
+
+    for (const rawStep of steps) {
+      const { token, predicates } = parseStep(rawStep);
+      if (!token || token === '.') {
+        continue;
+      }
+
+      const parsed = parseName(token);
+
+      if (parsed.isAttribute) {
+        if (!current) {
+          const attr = ownerDoc.createAttribute(parsed.localName);
+          return attr;
+        }
+        current.setAttribute(parsed.localName, '');
+        continue;
+      }
+
+      const element = parsed.namespaceURI
+        ? ownerDoc.createElementNS(parsed.namespaceURI, parsed.localName)
+        : ownerDoc.createElement(parsed.localName);
+
+      for (const predicate of predicates) {
+        const attrName = predicate.name.includes(':')
+          ? predicate.name.split(':')[1]
+          : predicate.name;
+        element.setAttribute(attrName, predicate.value);
+      }
+
+      if (!subtreeRoot) {
+        subtreeRoot = element;
+      } else {
+        current.appendChild(element);
+      }
+      current = element;
     }
+
+    return subtreeRoot;
   }
 
   _handleDragStart(event) {
@@ -1649,16 +2076,23 @@ export class FxFore extends HTMLElement {
   }
 
   _logError(e) {
+    // Prevent the error event from bubbling up and potentially triggering
+    // parent error handlers that might call refresh() again
     e.stopPropagation();
+    e.stopImmediatePropagation(); // Added to stop other listeners on this element
     e.preventDefault();
 
     console.error('ERROR', e.detail.message);
-    console.error(e.detail.origin);
-    if (e.detail.expr) {
-      console.error('Failing expression', e.detail.expr);
-    }
-    if (this.strict) {
-      this._displayError(e);
+
+    // Guard the display logic: if showing the error causes another error,
+    // we must break the cycle.
+    if (this.strict && !this._isLogging) {
+      this._isLogging = true;
+      try {
+        this._displayError(e);
+      } finally {
+        this._isLogging = false;
+      }
     }
   }