@jinntec/fore 3.2.0 → 3.2.1

package/dist/fore-dev.js

@@ -1,4 +1,4 @@
-/* Version: 3.2.0 - June 9, 2026 10:50:39 */
+/* Version: 3.2.1 - June 12, 2026 14:10:39 */
 function t$2(t, s, r, i) {
   const n = {
     op: s,
@@ -25479,7 +25479,7 @@ class FxFore extends HTMLElement {
       this._createRepeatsFromAttributes();
       this.inited = true;
     };
-    this.version = 'Version: 3.2.0 - built on June 9, 2026 10:50:39';
+    this.version = 'Version: 3.2.1 - built on June 12, 2026 14:10:39';
 
     /**
      * @type {import('./fx-model.js').FxModel}
@@ -25708,10 +25708,21 @@ class FxFore extends HTMLElement {
     }
     return null;
   }
-  _isReadyTarget(el) {
+  static _isReadyTarget(el) {
     return !!(el && (el.ready === true || el.classList && el.classList.contains('fx-ready') || typeof el.hasAttribute === 'function' && el.hasAttribute('ready')));
   }
 
+  /**
+   * Resolves once `fore` has dispatched its initial `ready` event (or
+   * immediately, if it's already ready).
+   */
+  static waitUntilReady(fore) {
+    if (FxFore._isReadyTarget(fore)) {
+      return Promise.resolve();
+    }
+    return FxFore._waitForEvent(fore, 'ready', FxFore._isReadyTarget);
+  }
+
   /**
    * Collect all init gates derived from attributes.
    *
@@ -25748,7 +25759,7 @@ class FxFore extends HTMLElement {
     }
     return gates;
   }
-  _waitForEvent(target, eventName, isSatisfiedFn = null) {
+  static _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);
@@ -25812,19 +25823,19 @@ class FxFore extends HTMLElement {
   }) {
     // Direct targets
     if (targetSpec === 'self') {
-      const satisfied = event === 'ready' ? t => this._isReadyTarget(t) : null;
-      return this._waitForEvent(this, event, satisfied);
+      const satisfied = event === 'ready' ? t => FxFore._isReadyTarget(t) : null;
+      return FxFore._waitForEvent(this, event, satisfied);
     }
     if (targetSpec === 'document') {
-      return this._waitForEvent(document, event);
+      return FxFore._waitForEvent(document, event);
     }
     if (targetSpec === 'window') {
-      return this._waitForEvent(window, event);
+      return FxFore._waitForEvent(window, event);
     }
 
     // Special: closest fx-fore
     if (targetSpec === 'closest') {
-      const recheckFn = event === 'ready' ? () => this._isReadyTarget(this.closest('fx-fore')) : null;
+      const recheckFn = event === 'ready' ? () => FxFore._isReadyTarget(this.closest('fx-fore')) : null;
       const matchesFn = ev => {
         const t = ev.target;
         return t?.tagName === 'FX-FORE' && t.contains(this);
@@ -25834,7 +25845,7 @@ class FxFore extends HTMLElement {
 
     // Selector targets
     const selector = targetSpec;
-    const recheckFn = event === 'ready' ? () => this._isReadyTarget(this._findBySelector(selector)) : null;
+    const recheckFn = event === 'ready' ? () => FxFore._isReadyTarget(this._findBySelector(selector)) : null;
     if (typeof recheckFn === 'function' && recheckFn()) {
       return Promise.resolve();
     }
@@ -29681,11 +29692,26 @@ class FxInclude extends HTMLElement {
     this.immediate = this.hasAttribute('immediate');
     this.reload = this.hasAttribute('reload');
     if (this.immediate) {
-      queueMicrotask(() => this.include());
+      this._includeWhenReady();
       return;
     }
     this._bindListener();
   }
+
+  /**
+   * Includes content immediately, but waits until the closest `fx-fore` has
+   * finished its initial Rebuild/Recalculate/Revalidate/Refresh cycle (i.e. is
+   * "ready"), so the included content can resolve binding context against an
+   * already-initialized ancestor chain.
+   */
+  _includeWhenReady() {
+    const fore = this.closest('fx-fore');
+    if (!fore) {
+      queueMicrotask(() => this.include());
+      return;
+    }
+    FxFore.waitUntilReady(fore).then(() => this.include());
+  }
   disconnectedCallback() {
     this._unbindListener();
   }
@@ -29778,10 +29804,16 @@ class FxInclude extends HTMLElement {
       fragment.appendChild(document.importNode(selected, true));
       return fragment;
     }
-    const template = parsed.querySelector('template');
+    const template = parsed.body.querySelector(':scope > template');
     if (template) {
       return document.importNode(template.content, true);
     }
+    const rootElements = Array.from(parsed.body.children);
+    if (rootElements.length === 1) {
+      const fragment = document.createDocumentFragment();
+      fragment.appendChild(document.importNode(rootElements[0], true));
+      return fragment;
+    }
     const fragment = document.createDocumentFragment();
     Array.from(parsed.body.childNodes).forEach(node => {
       fragment.appendChild(document.importNode(node, true));
@@ -29816,6 +29848,10 @@ class FxInclude extends HTMLElement {
   }
   async _initializeInsertedContent(startElement) {
     this._initForeUiDescendants(startElement);
+    const fore = startElement.closest('fx-fore');
+    if (fore?.createNodes && typeof fore.initData === 'function') {
+      fore.initData(startElement);
+    }
     await Fore.refreshChildren(startElement, true);
   }
   _initForeUiDescendants(startElement) {

package/dist/fore.js

@@ -1,4 +1,4 @@
-/* Version: 3.2.0 - June 9, 2026 10:50:37 */
+/* Version: 3.2.1 - June 12, 2026 14:10:38 */
 function t$2(t, s, r, i) {
   const n = {
     op: s,
@@ -25425,7 +25425,7 @@ class FxFore extends HTMLElement {
       this._createRepeatsFromAttributes();
       this.inited = true;
     };
-    this.version = 'Version: 3.2.0 - built on June 9, 2026 10:50:37';
+    this.version = 'Version: 3.2.1 - built on June 12, 2026 14:10:38';
 
     /**
      * @type {import('./fx-model.js').FxModel}
@@ -25653,10 +25653,21 @@ class FxFore extends HTMLElement {
     }
     return null;
   }
-  _isReadyTarget(el) {
+  static _isReadyTarget(el) {
     return !!(el && (el.ready === true || el.classList && el.classList.contains('fx-ready') || typeof el.hasAttribute === 'function' && el.hasAttribute('ready')));
   }
 
+  /**
+   * Resolves once `fore` has dispatched its initial `ready` event (or
+   * immediately, if it's already ready).
+   */
+  static waitUntilReady(fore) {
+    if (FxFore._isReadyTarget(fore)) {
+      return Promise.resolve();
+    }
+    return FxFore._waitForEvent(fore, 'ready', FxFore._isReadyTarget);
+  }
+
   /**
    * Collect all init gates derived from attributes.
    *
@@ -25692,7 +25703,7 @@ class FxFore extends HTMLElement {
     }
     return gates;
   }
-  _waitForEvent(target, eventName, isSatisfiedFn = null) {
+  static _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);
@@ -25756,19 +25767,19 @@ class FxFore extends HTMLElement {
   }) {
     // Direct targets
     if (targetSpec === 'self') {
-      const satisfied = event === 'ready' ? t => this._isReadyTarget(t) : null;
-      return this._waitForEvent(this, event, satisfied);
+      const satisfied = event === 'ready' ? t => FxFore._isReadyTarget(t) : null;
+      return FxFore._waitForEvent(this, event, satisfied);
     }
     if (targetSpec === 'document') {
-      return this._waitForEvent(document, event);
+      return FxFore._waitForEvent(document, event);
     }
     if (targetSpec === 'window') {
-      return this._waitForEvent(window, event);
+      return FxFore._waitForEvent(window, event);
     }
 
     // Special: closest fx-fore
     if (targetSpec === 'closest') {
-      const recheckFn = event === 'ready' ? () => this._isReadyTarget(this.closest('fx-fore')) : null;
+      const recheckFn = event === 'ready' ? () => FxFore._isReadyTarget(this.closest('fx-fore')) : null;
       const matchesFn = ev => {
         const t = ev.target;
         return t?.tagName === 'FX-FORE' && t.contains(this);
@@ -25778,7 +25789,7 @@ class FxFore extends HTMLElement {
 
     // Selector targets
     const selector = targetSpec;
-    const recheckFn = event === 'ready' ? () => this._isReadyTarget(this._findBySelector(selector)) : null;
+    const recheckFn = event === 'ready' ? () => FxFore._isReadyTarget(this._findBySelector(selector)) : null;
     if (typeof recheckFn === 'function' && recheckFn()) {
       return Promise.resolve();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {

package/src/fx-fore.js

@@ -387,7 +387,7 @@ export class FxFore extends HTMLElement {
     return null;
   }
 
-  _isReadyTarget(el) {
+  static _isReadyTarget(el) {
     return !!(
       el &&
       (el.ready === true ||
@@ -396,6 +396,17 @@ export class FxFore extends HTMLElement {
     );
   }
 
+  /**
+   * Resolves once `fore` has dispatched its initial `ready` event (or
+   * immediately, if it's already ready).
+   */
+  static waitUntilReady(fore) {
+    if (FxFore._isReadyTarget(fore)) {
+      return Promise.resolve();
+    }
+    return FxFore._waitForEvent(fore, 'ready', FxFore._isReadyTarget);
+  }
+
   /**
    * Collect all init gates derived from attributes.
    *
@@ -433,7 +444,7 @@ export class FxFore extends HTMLElement {
     return gates;
   }
 
-  _waitForEvent(target, eventName, isSatisfiedFn = null) {
+  static _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);
@@ -495,20 +506,20 @@ export class FxFore extends HTMLElement {
   _waitForInitGate({ event, targetSpec }) {
     // Direct targets
     if (targetSpec === 'self') {
-      const satisfied = event === 'ready' ? t => this._isReadyTarget(t) : null;
-      return this._waitForEvent(this, event, satisfied);
+      const satisfied = event === 'ready' ? t => FxFore._isReadyTarget(t) : null;
+      return FxFore._waitForEvent(this, event, satisfied);
     }
     if (targetSpec === 'document') {
-      return this._waitForEvent(document, event);
+      return FxFore._waitForEvent(document, event);
     }
     if (targetSpec === 'window') {
-      return this._waitForEvent(window, event);
+      return FxFore._waitForEvent(window, event);
     }
 
     // Special: closest fx-fore
     if (targetSpec === 'closest') {
       const recheckFn =
-        event === 'ready' ? () => this._isReadyTarget(this.closest('fx-fore')) : null;
+        event === 'ready' ? () => FxFore._isReadyTarget(this.closest('fx-fore')) : null;
 
       const matchesFn = ev => {
         const t = ev.target;
@@ -522,7 +533,7 @@ export class FxFore extends HTMLElement {
     const selector = targetSpec;
 
     const recheckFn =
-      event === 'ready' ? () => this._isReadyTarget(this._findBySelector(selector)) : null;
+      event === 'ready' ? () => FxFore._isReadyTarget(this._findBySelector(selector)) : null;
 
     if (typeof recheckFn === 'function' && recheckFn()) {
       return Promise.resolve();

package/src/ui/fx-include.js

@@ -1,4 +1,5 @@
 import { Fore } from '../fore.js';
+import { FxFore } from '../fx-fore.js';
 
 /**
  * <fx-include>
@@ -50,13 +51,30 @@ export class FxInclude extends HTMLElement {
     this.reload = this.hasAttribute('reload');
 
     if (this.immediate) {
-      queueMicrotask(() => this.include());
+      this._includeWhenReady();
       return;
     }
 
     this._bindListener();
   }
 
+  /**
+   * Includes content immediately, but waits until the closest `fx-fore` has
+   * finished its initial Rebuild/Recalculate/Revalidate/Refresh cycle (i.e. is
+   * "ready"), so the included content can resolve binding context against an
+   * already-initialized ancestor chain.
+   */
+  _includeWhenReady() {
+    const fore = this.closest('fx-fore');
+
+    if (!fore) {
+      queueMicrotask(() => this.include());
+      return;
+    }
+
+    FxFore.waitUntilReady(fore).then(() => this.include());
+  }
+
   disconnectedCallback() {
     this._unbindListener();
   }
@@ -182,12 +200,20 @@ export class FxInclude extends HTMLElement {
       return fragment;
     }
 
-    const template = parsed.querySelector('template');
+    const template = parsed.body.querySelector(':scope > template');
 
     if (template) {
       return document.importNode(template.content, true);
     }
 
+    const rootElements = Array.from(parsed.body.children);
+
+    if (rootElements.length === 1) {
+      const fragment = document.createDocumentFragment();
+      fragment.appendChild(document.importNode(rootElements[0], true));
+      return fragment;
+    }
+
     const fragment = document.createDocumentFragment();
 
     Array.from(parsed.body.childNodes).forEach(node => {
@@ -234,6 +260,12 @@ export class FxInclude extends HTMLElement {
 
   async _initializeInsertedContent(startElement) {
     this._initForeUiDescendants(startElement);
+
+    const fore = startElement.closest('fx-fore');
+    if (fore?.createNodes && typeof fore.initData === 'function') {
+      fore.initData(startElement);
+    }
+
     await Fore.refreshChildren(startElement, true);
   }