@citolab/qti-components 7.12.0 → 7.14.0

package/dist/chunks/{chunk-GGTWY53P.js → chunk-XD7DR5YG.js}

@@ -10,7 +10,7 @@ import {
 import {
   qtiTransformItem,
   qtiTransformTest
-} from "./chunk-WFUXZ4UT.js";
+} from "./chunk-LJ4KAG72.js";
 import {
   qtiContext
 } from "./chunk-H6KHXSIO.js";
@@ -38,14 +38,6 @@ import { customElement } from "lit/decorators.js";
 
 // src/lib/qti-test/core/mixins/test-navigation.mixin.ts
 import { property } from "lit/decorators.js";
-var NavigationErrorType = /* @__PURE__ */ ((NavigationErrorType2) => {
-  NavigationErrorType2["ITEM_NOT_FOUND"] = "item-not-found";
-  NavigationErrorType2["SECTION_NOT_FOUND"] = "section-not-found";
-  NavigationErrorType2["LOAD_ERROR"] = "load-error";
-  NavigationErrorType2["NETWORK_ERROR"] = "network-error";
-  NavigationErrorType2["TIMEOUT_ERROR"] = "timeout-error";
-  return NavigationErrorType2;
-})(NavigationErrorType || {});
 var TestNavigationMixin = (superClass) => {
   class TestNavigationClass extends superClass {
     constructor(...args) {
@@ -53,378 +45,423 @@ var TestNavigationMixin = (superClass) => {
       this.navigate = null;
       this.cacheTransform = false;
       this.requestTimeout = 3e4;
-      this.showLoadingIndicators = true;
       this.postLoadTransformCallback = null;
       this.postLoadTestTransformCallback = null;
-      this._navigationInProgress = false;
-      this._activeRequests = [];
-      this._lastError = null;
-      this._lastNavigationRequestId = null;
-      this._targetNavigation = null;
-      this.addEventListener(
-        "qti-request-navigation",
-        async ({ detail }) => {
-          if (!detail?.id) return;
-          const navigationRequestId = `nav_${Date.now()}_${Math.random()}`;
-          this._lastNavigationRequestId = navigationRequestId;
-          try {
-            this._navigationInProgress = true;
-            this._lastError = null;
-            this._dispatchStatusEvent({ loading: true, type: detail.type, id: detail.id });
-            this._cancelActiveRequests();
-            this._targetNavigation = { type: detail.type, id: detail.id };
-            if (detail.type === "item") {
-              await this._navigateToItem(detail.id);
-            } else if (detail.type === "section") {
-              await this._navigateToSection(detail.id);
-            }
-            if (this._lastNavigationRequestId !== navigationRequestId) {
-              console.log("Navigation was superseded by a newer request");
-              return;
-            }
-          } catch (error) {
-            if (this._lastNavigationRequestId === navigationRequestId) {
-              const navError = this._normalizeError(error, detail.type, detail.id);
-              this._lastError = navError;
-              this._dispatchErrorEvent(navError);
-              console.error(`Navigation error (${navError.type}):`, navError.message, navError.details);
-            }
-          } finally {
-            if (this._lastNavigationRequestId === navigationRequestId) {
-              this._navigationInProgress = false;
-              this._dispatchStatusEvent({ loading: false, type: detail.type, id: detail.id });
-            }
-          }
-        }
-      );
-      this.addEventListener("qti-assessment-test-connected", (e) => {
-        this._testElement = e.detail;
-        this._initializeNavigation();
-      });
+      // Navigation state tracking
+      this._activeController = null;
+      this._loadResults = [];
+      // Simple loading progress tracking
+      this._loadingState = {
+        expectedItems: 0,
+        connectedItems: 0,
+        expectedStimulus: 0,
+        loadedStimulus: 0,
+        isComplete: false
+      };
+      // Track loaded/loading stimulus hrefs to prevent duplicates
+      this._loadedStimulusHrefs = /* @__PURE__ */ new Set();
+      this._loadingStimulusHrefs = /* @__PURE__ */ new Set();
+      this._bindEventHandlers();
     }
+    // ===========================================
+    // PUBLIC API
+    // ===========================================
     /**
-     * Initialize navigation when test is first connected
+     * Navigate to a specific item or section
+     * @param type - Navigation type ('item' or 'section')
+     * @param id - Target identifier (optional, falls back to first available)
      */
-    _initializeNavigation() {
-      let id;
-      if (this.navigate === "section") {
-        id = this._testElement.querySelector("qti-assessment-section")?.identifier;
-      }
-      if (this.navigate === "item") {
-        id = this.sessionContext.navItemRefId ?? this._testElement.querySelector("qti-assessment-item-ref")?.identifier;
-      }
-      if (id) {
+    navigateTo(type, id) {
+      const targetId = id || this._getDefaultNavigationId(type);
+      if (targetId) {
         this.dispatchEvent(
           new CustomEvent("qti-request-navigation", {
-            detail: { type: this.navigate === "section" ? "section" : "item", id },
+            detail: { type, id: targetId },
             bubbles: true,
             composed: true
           })
         );
       }
     }
-    navigateTo(type, id) {
-      if (!id) {
-        if (type === "section") {
-          id = this._testElement?.querySelector("qti-assessment-section")?.identifier;
-        }
-        if (type === "item") {
-          id = this._testElement?.querySelector("qti-assessment-item-ref")?.identifier;
+    // ===========================================
+    // EVENT HANDLER SETUP
+    // ===========================================
+    _bindEventHandlers() {
+      this.addEventListener("qti-request-navigation", this._handleNavigationRequest.bind(this));
+      this.addEventListener("qti-assessment-test-connected", this._handleTestConnected.bind(this));
+      this.addEventListener("qti-assessment-item-connected", this._handleItemConnected.bind(this));
+      this.addEventListener("qti-assessment-stimulus-ref-connected", this._handleStimulusRefConnected.bind(this));
+    }
+    _handleTestConnected(e) {
+      this._testElement = e.detail;
+      this._initializeNavigation();
+    }
+    /**
+     * Handle item connection events - track connected items and discover stimulus references
+     */
+    _handleItemConnected(e) {
+      const itemRef = e.detail;
+      this._loadingState.connectedItems++;
+      const stimulusRefs = itemRef.querySelectorAll("qti-assessment-stimulus-ref");
+      this._loadingState.expectedStimulus += stimulusRefs.length;
+      this._checkLoadingComplete();
+    }
+    /**
+     * Handle stimulus reference connection events with duplicate prevention
+     */
+    async _handleStimulusRefConnected(e) {
+      e.preventDefault();
+      const { element, item } = e;
+      console.info("Stimulus ref connected:", {
+        identifier: element.identifier,
+        href: element.href,
+        item: item.identifier
+      });
+      if (this._loadedStimulusHrefs.has(element.href)) {
+        console.info("Stimulus already loaded, skipping:", element.href);
+        this._loadingState.loadedStimulus++;
+        this._checkLoadingComplete();
+        return;
+      }
+      if (this._loadingStimulusHrefs.has(element.href)) {
+        console.info("Stimulus already loading, skipping duplicate:", element.href);
+        this._loadingState.loadedStimulus++;
+        this._checkLoadingComplete();
+        return;
+      }
+      this._loadingStimulusHrefs.add(element.href);
+      console.info("Starting stimulus load:", element.href);
+      try {
+        await this._loadStimulusRef(element, item);
+        this._loadedStimulusHrefs.add(element.href);
+        this._loadingState.loadedStimulus++;
+        console.info("Stimulus loaded successfully:", element.href);
+        this._checkLoadingComplete();
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          console.warn(`Failed to load stimulus ${element.identifier}:`, error);
         }
+        this._loadingState.loadedStimulus++;
+        this._checkLoadingComplete();
+      } finally {
+        this._loadingStimulusHrefs.delete(element.href);
+      }
+    }
+    // ===========================================
+    // NAVIGATION FLOW
+    // ===========================================
+    _getDefaultNavigationId(type) {
+      if (type === "section") {
+        return this._testElement?.querySelector("qti-assessment-section")?.identifier;
+      }
+      return this.sessionContext?.navItemRefId ?? this._testElement?.querySelector("qti-assessment-item-ref")?.identifier;
+    }
+    _initializeNavigation() {
+      if (!this.navigate) return;
+      const id = this._getDefaultNavigationId(this.navigate);
+      if (id) {
+        this.navigateTo(this.navigate, id);
       }
-      this.dispatchEvent(
-        new CustomEvent("qti-request-navigation", {
-          detail: { type, id },
-          bubbles: true,
-          composed: true
-        })
-      );
     }
     /**
-     * Navigates to a specific item
+     * Main navigation request handler with proper lifecycle management
      */
-    async _navigateToItem(itemId) {
-      const itemRefEl = this._testElement?.querySelector(
-        `qti-assessment-item-ref[identifier="${itemId}"]`
-      );
-      if (!itemRefEl) {
-        throw {
-          type: "item-not-found" /* ITEM_NOT_FOUND */,
-          message: `Item with identifier "${itemId}" not found.`,
-          itemId
-        };
-      }
-      const navPartId = itemRefEl.closest("qti-test-part")?.identifier;
-      const navSectionId = itemRefEl.closest("qti-assessment-section")?.identifier;
-      this.sessionContext = {
-        ...this.sessionContext,
-        navPartId,
-        navSectionId,
-        navItemRefId: itemId,
-        navItemLoading: true
-      };
+    async _handleNavigationRequest({ detail }) {
+      if (!detail?.id) return;
+      this._cancelPreviousNavigation();
       try {
-        await this._loadItems([itemId]);
+        this._dispatchLoadingStarted(detail.type, detail.id);
+        this._activeController = new AbortController();
+        await this._executeNavigation(detail.type, detail.id);
+      } catch (error) {
+        this._handleNavigationError(error, detail.type, detail.id);
       } finally {
-        this.sessionContext = {
-          ...this.sessionContext,
-          navItemLoading: false
-        };
+        this._activeController = null;
+        this._dispatchLoadingEnded(detail.type, detail.id);
       }
     }
+    _handleNavigationError(error, type, id) {
+      if (error.name !== "AbortError") {
+        this._dispatchError(this._createNavigationError(error, type, id));
+      }
+    }
+    async _executeNavigation(type, id) {
+      if (type === "item") {
+        await this._navigateToItem(id);
+      } else {
+        await this._navigateToSection(id);
+      }
+    }
+    /**
+     * Navigate to specific item with simple state tracking
+     */
+    async _navigateToItem(itemId) {
+      const itemRef = this._findItemRef(itemId);
+      this._updateSessionContext(itemRef, itemId);
+      this._resetLoadingState();
+      this._loadingState.expectedItems = 1;
+      await this._loadItems([itemId]);
+      await this._waitForLoadingComplete();
+      this._dispatchTestLoaded(this._loadResults);
+    }
     /**
-     * Navigates to a specific section
+     * Navigate to section with simple state tracking
      */
     async _navigateToSection(sectionId) {
-      const sectionRefEl = this._testElement?.querySelector(
-        `qti-assessment-section[identifier="${sectionId}"]`
-      );
-      if (!sectionRefEl) {
-        throw {
-          type: "section-not-found" /* SECTION_NOT_FOUND */,
-          message: `Section with identifier "${sectionId}" not found.`,
-          sectionId
-        };
-      }
-      const navPartId = sectionRefEl.closest("qti-test-part")?.identifier;
+      const sectionEl = this._findSection(sectionId);
+      const navPartId = sectionEl?.closest("qti-test-part")?.identifier;
       this.sessionContext = {
         ...this.sessionContext,
         navPartId,
         navSectionId: sectionId,
-        navItemRefId: null,
-        navItemLoading: true
+        navItemRefId: null
       };
-      try {
-        const itemIds = this._getSectionItemIds(sectionId);
-        await this._loadItems(itemIds);
-      } finally {
-        this.sessionContext = {
-          ...this.sessionContext,
-          navItemLoading: false
-        };
-      }
+      const itemIds = this._getSectionItemIds(sectionId);
+      this._resetLoadingState();
+      this._loadingState.expectedItems = itemIds.length;
+      await this._loadItems(itemIds);
+      await this._waitForLoadingComplete();
+      this._dispatchTestLoaded(this._loadResults);
     }
+    // ===========================================
+    // LOADING STATE MANAGEMENT
+    // ===========================================
     /**
-     * Normalize different error types into a consistent NavigationError format
+     * Reset loading state for new navigation
      */
-    _normalizeError(error, navigationType, id) {
-      if (error && error.type && Object.values(NavigationErrorType).includes(error.type)) {
-        return error;
-      }
-      if (error instanceof DOMException && error.name === "AbortError") {
-        return {
-          type: "network-error" /* NETWORK_ERROR */,
-          message: "Navigation was cancelled because a new navigation was requested.",
-          details: error
-        };
-      }
-      if (error.name === "TimeoutError" || error.message && error.message.includes("timeout")) {
-        return {
-          type: "timeout-error" /* TIMEOUT_ERROR */,
-          message: "Request timed out. Please check your network connection.",
-          details: error
-        };
+    _resetLoadingState() {
+      this._loadingState = {
+        expectedItems: 0,
+        connectedItems: 0,
+        expectedStimulus: 0,
+        loadedStimulus: 0,
+        isComplete: false
+      };
+      this._loadedStimulusHrefs.clear();
+      this._loadingStimulusHrefs.clear();
+    }
+    /**
+     * Check if loading is complete and dispatch events accordingly
+     */
+    _checkLoadingComplete() {
+      const allItemsConnected = this._loadingState.connectedItems >= this._loadingState.expectedItems;
+      const allStimulusLoaded = this._loadingState.loadedStimulus >= this._loadingState.expectedStimulus;
+      if (allItemsConnected && allStimulusLoaded && !this._loadingState.isComplete) {
+        this._loadingState.isComplete = true;
+        console.info("Loading complete:", this._loadingState);
       }
-      if (error instanceof TypeError && error.message.includes("network")) {
-        return {
-          type: "network-error" /* NETWORK_ERROR */,
-          message: "A network error occurred. Please check your connection.",
-          details: error
-        };
+    }
+    /**
+     * Wait for loading to complete with simple polling
+     */
+    async _waitForLoadingComplete() {
+      while (!this._loadingState.isComplete) {
+        await new Promise((resolve) => setTimeout(resolve, 10));
       }
-      return {
-        type: "load-error" /* LOAD_ERROR */,
-        message: `Failed to load ${navigationType}: ${id}`,
-        details: error,
-        itemId: navigationType === "item" ? id : void 0,
-        sectionId: navigationType === "section" ? id : void 0
-      };
     }
     /**
-     * Dispatch error event to notify the UI
+     * Get current loading progress for external consumption
      */
-    _dispatchErrorEvent(error) {
-      this.dispatchEvent(
-        new CustomEvent("qti-navigation-error", {
-          detail: error,
-          bubbles: true,
-          composed: true
-        })
-      );
+    getLoadingProgress() {
+      return { ...this._loadingState };
     }
     /**
-     * Dispatch status event to indicate loading state
+     * Load stimulus reference with simple tracking
      */
-    _dispatchStatusEvent(status) {
-      if (this.showLoadingIndicators) {
-        this.dispatchEvent(
-          new CustomEvent("qti-navigation-status", {
-            detail: status,
-            bubbles: true,
-            composed: true
-          })
-        );
+    async _loadStimulusRef(element, item) {
+      console.info("Loading stimulus:", element.href);
+      const stimulus = await this._loadStimulus(element.href);
+      console.info("Stimulus loaded, applying content:", stimulus ? "has content" : "no content");
+      this._applyStimulusContent(stimulus, element, item);
+    }
+    _applyStimulusContent(stimulus, element, item) {
+      if (!stimulus) {
+        console.warn("No stimulus content to apply");
+        return;
+      }
+      const elements = stimulus.querySelectorAll("qti-stimulus-body, qti-stylesheet");
+      console.info(`Found ${elements.length} stimulus elements to apply for ${element.identifier}`);
+      if (elements.length === 0) {
+        console.warn("No qti-stimulus-body or qti-stylesheet elements found in stimulus");
+        return;
       }
+      let targets = [];
+      const specificTarget = document.querySelector(
+        `qti-assessment-item[identifier="${item.identifier}"] [data-stimulus-idref="${element.identifier}"]`
+      );
+      if (specificTarget) {
+        targets.push(specificTarget);
+        console.info("Found specific target:", specificTarget);
+      } else {
+        const allTargetsWithId = Array.from(this.querySelectorAll(`[data-stimulus-idref="${element.identifier}"]`));
+        if (allTargetsWithId.length > 0) {
+          targets = allTargetsWithId;
+          console.info("Found targets by identifier:", allTargetsWithId.length);
+        } else {
+          const allStimulusTargets = Array.from(this.querySelectorAll("[data-stimulus-idref]"));
+          targets = allStimulusTargets;
+          console.info("Using fallback targets:", allStimulusTargets.length);
+        }
+      }
+      if (targets.length === 0) {
+        console.warn("No targets found for stimulus content");
+        return;
+      }
+      targets.forEach((target, index) => {
+        target.innerHTML = "";
+        const clonedElements = Array.from(elements).map((el) => el.cloneNode(true));
+        target.append(...clonedElements);
+        console.info(`Applied stimulus content to target ${index + 1}/${targets.length}`);
+      });
     }
+    // ===========================================
+    // LOADING INFRASTRUCTURE
+    // ===========================================
     /**
-     * Cancels all active HTTP requests
+     * Cancel previous navigation and clean up all state
      */
-    _cancelActiveRequests() {
-      if (this._activeRequests.length > 0) {
-        console.info(`Cancelling ${this._activeRequests.length} pending requests`);
-        this._activeRequests.forEach((request) => {
-          if (request && request.readyState !== 4) {
-            request.abort();
-          }
-        });
-        this._activeRequests = [];
+    _cancelPreviousNavigation() {
+      if (this._activeController) {
+        this._activeController.abort();
+        console.info("Previous navigation request cancelled");
       }
+      this._clearNavigationState();
+    }
+    _clearNavigationState() {
+      this._clearLoadedItems();
+      this._resetLoadingState();
+      this._loadResults = [];
     }
     /**
-     * Load items with improved error handling and timeout
+     * Load items with simple tracking
      */
     async _loadItems(itemIds) {
       if (!this._testElement || itemIds.length === 0) return;
-      const itemRefEls = itemIds.map(
-        (id) => this._testElement.querySelector(`qti-assessment-item-ref[identifier="${id}"]`)
-      );
-      const missingItems = itemRefEls.reduce((missing, el, index) => {
-        if (!el) missing.push(itemIds[index]);
-        return missing;
-      }, []);
-      if (missingItems.length > 0) {
-        const error = {
-          type: "item-not-found" /* ITEM_NOT_FOUND */,
-          message: `One or more items not found: ${missingItems.join(", ")}`,
-          details: { missingItems }
-        };
-        throw error;
-      }
+      const itemRefs = itemIds.map((id) => this._findItemRef(id));
       this._clearLoadedItems();
-      const itemLoadPromises = itemRefEls.map(async (itemRef) => {
-        if (!itemRef) return null;
-        const timeoutPromise = new Promise((_, reject) => {
-          setTimeout(() => {
-            reject({
-              name: "TimeoutError",
-              message: `Request for item ${itemRef.identifier} timed out after ${this.requestTimeout}ms`
-            });
-          }, this.requestTimeout);
-        });
-        try {
-          const { promise, request } = qtiTransformItem(this.cacheTransform).load(itemRef.href);
-          if (request instanceof XMLHttpRequest) {
-            this._activeRequests.push(request);
-          }
-          const loadedTransformer = await Promise.race([promise, timeoutPromise]);
-          let finalTransformer = loadedTransformer;
-          if (this.postLoadTransformCallback) {
-            finalTransformer = await this.postLoadTransformCallback(loadedTransformer, itemRef);
-          }
-          return {
-            itemRef,
-            doc: finalTransformer.htmlDoc(),
-            request
-          };
-        } catch (error) {
-          if (error instanceof DOMException && error.name === "AbortError" || error && error.name === "TimeoutError") {
-            console.log(
-              `Request for item ${itemRef.identifier} was ${error.name === "TimeoutError" ? "timed out" : "aborted"}`
-            );
-            return null;
-          }
-          error.itemId = itemRef.identifier;
-          throw error;
-        }
+      this._clearStimulusRef();
+      const results = await Promise.all(itemRefs.map((ref) => this._loadSingleItem(ref)));
+      const validResults = results.filter(Boolean);
+      validResults.forEach(({ itemRef, doc }) => {
+        if (itemRef && doc) itemRef.xmlDoc = doc;
       });
+      this._loadResults = validResults;
+    }
+    async _loadSingleItem(itemRef) {
       try {
-        const results = await Promise.all(itemLoadPromises);
-        const validResults = results.filter((result) => result !== null);
-        validResults.forEach(({ itemRef, doc }) => {
-          if (itemRef && doc) itemRef.xmlDoc = doc;
-        });
-        this._activeRequests = [];
-        requestAnimationFrame(() => {
-          this.dispatchEvent(
-            new CustomEvent("qti-test-loaded", {
-              detail: validResults.map(({ itemRef }) => ({
-                identifier: itemRef?.identifier,
-                element: itemRef
-              })),
-              bubbles: true,
-              composed: true
-            })
-          );
-        });
-        if (validResults.length === 0 && itemIds.length > 0) {
-          throw {
-            type: "load-error" /* LOAD_ERROR */,
-            message: "All item requests failed to load",
-            details: { itemIds }
-          };
+        let transformer = await qtiTransformItem(this.cacheTransform).load(
+          itemRef.href,
+          this._activeController?.signal
+        );
+        if (this.postLoadTransformCallback) {
+          transformer = await this.postLoadTransformCallback(transformer, itemRef);
         }
-        return validResults;
+        return { itemRef, doc: transformer.htmlDoc() };
       } catch (error) {
-        console.error("Error loading items:", error);
-        throw error;
+        if (error.name === "AbortError") {
+          console.info(`Item load for ${itemRef.identifier} was aborted`);
+          throw error;
+        }
+        console.warn(`Failed to load item ${itemRef.identifier}:`, error);
+        return null;
       }
     }
-    /**
-     * Gets all item IDs in a section
-     */
-    _getSectionItemIds(navSectionId) {
-      const sectionRefEl = this._testElement?.querySelector(
-        `qti-assessment-section[identifier="${navSectionId}"]`
+    async _loadStimulus(href) {
+      const transformer = await qtiTransformItem().load(href, this._activeController?.signal);
+      return transformer.htmlDoc();
+    }
+    // ===========================================
+    // UTILITIES
+    // ===========================================
+    _findItemRef(itemId) {
+      const itemRef = this._testElement?.querySelector(
+        `qti-assessment-item-ref[identifier="${itemId}"]`
       );
-      if (!sectionRefEl) {
-        throw {
-          type: "section-not-found" /* SECTION_NOT_FOUND */,
-          message: `Section with identifier "${navSectionId}" not found.`,
-          sectionId: navSectionId
-        };
+      if (!itemRef) {
+        throw new Error(`Item with identifier "${itemId}" not found`);
       }
+      return itemRef;
+    }
+    _findSection(sectionId) {
+      return this._testElement?.querySelector(`qti-assessment-section[identifier="${sectionId}"]`) || null;
+    }
+    _updateSessionContext(itemRef, itemId) {
+      const navPartId = itemRef.closest("qti-test-part")?.identifier;
+      const navSectionId = itemRef.closest("qti-assessment-section")?.identifier;
+      this.sessionContext = {
+        ...this.sessionContext,
+        navPartId,
+        navSectionId,
+        navItemRefId: itemId
+      };
+    }
+    _getSectionItemIds(sectionId) {
       return Array.from(
         this._testElement.querySelectorAll(
-          `qti-assessment-section[identifier="${navSectionId}"] > qti-assessment-item-ref`
+          `qti-assessment-section[identifier="${sectionId}"] > qti-assessment-item-ref`
         )
-      ).map((itemRef) => itemRef.identifier);
+      ).map((ref) => ref.identifier).filter(Boolean);
     }
-    /**
-     * Clears all loaded items
-     */
     _clearLoadedItems() {
-      const itemRefEls = this._testElement?.querySelectorAll(
-        `qti-assessment-test qti-assessment-item-ref`
-      );
-      Array.from(itemRefEls || []).forEach((itemElement) => {
-        itemElement.xmlDoc = null;
+      const itemRefs = this._testElement?.querySelectorAll("qti-assessment-item-ref");
+      Array.from(itemRefs || []).forEach((element) => {
+        element.xmlDoc = null;
       });
     }
-    /**
-     * Retry the last failed navigation
-     */
-    retryNavigation() {
-      if (this._lastError) {
-        const type = this._lastError.itemId ? "item" : "section";
-        const id = this._lastError.itemId || this._lastError.sectionId;
-        if (id) {
-          this.dispatchEvent(
-            new CustomEvent("qti-request-navigation", {
-              detail: { type, id },
-              bubbles: true,
-              composed: true
-            })
-          );
-        }
-      } else if (this._targetNavigation) {
+    _clearStimulusRef() {
+      this.querySelectorAll("[data-stimulus-idref]").forEach((el) => el.innerHTML = "");
+    }
+    _createNavigationError(error, type, id) {
+      return {
+        message: error.message || `Failed to load ${type}: ${id}`,
+        details: error,
+        itemId: type === "item" ? id : void 0,
+        sectionId: type === "section" ? id : void 0
+      };
+    }
+    // ===========================================
+    // EVENT DISPATCHING
+    // ===========================================
+    _dispatchLoadingStarted(type, id) {
+      this.dispatchEvent(
+        new CustomEvent("qti-navigation-loading-started", {
+          detail: { type, id },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+    _dispatchLoadingEnded(type, id) {
+      this.dispatchEvent(
+        new CustomEvent("qti-navigation-loading-ended", {
+          detail: { type, id },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+    _dispatchError(error) {
+      this.dispatchEvent(
+        new CustomEvent("qti-navigation-error", {
+          detail: error,
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+    _dispatchTestLoaded(results) {
+      requestAnimationFrame(() => {
         this.dispatchEvent(
-          new CustomEvent("qti-request-navigation", {
-            detail: this._targetNavigation,
+          new CustomEvent("qti-test-loaded", {
+            detail: results.map(({ itemRef }) => ({
+              identifier: itemRef?.identifier,
+              element: itemRef
+            })),
             bubbles: true,
             composed: true
           })
         );
-      }
+      });
     }
   }
   __decorateClass([
@@ -437,18 +474,10 @@ var TestNavigationMixin = (superClass) => {
     property({ type: Number })
   ], TestNavigationClass.prototype, "requestTimeout", 2);
   __decorateClass([
-    property({ type: Boolean })
-  ], TestNavigationClass.prototype, "showLoadingIndicators", 2);
-  __decorateClass([
-    property({ type: Function })
+    property({ attribute: false })
   ], TestNavigationClass.prototype, "postLoadTransformCallback", 2);
   __decorateClass([
-    property({
-      type: Function,
-      hasChanged: (newVal, oldVal) => {
-        return newVal !== oldVal;
-      }
-    })
+    property({ attribute: false })
   ], TestNavigationClass.prototype, "postLoadTestTransformCallback", 2);
   return TestNavigationClass;
 };
@@ -704,7 +733,6 @@ QtiTest = __decorateClass([
 // src/lib/qti-test/core/qti-assessment-test/qti-assessment-item-ref.ts
 import { LitElement as LitElement2 } from "lit";
 import { property as property3 } from "lit/decorators.js";
-import { prepareTemplate } from "@heximal/templates";
 var stringToBooleanConverter = {
   fromAttribute(value) {
     return value === "true";
@@ -729,8 +757,6 @@ var QtiAssessmentItemRef = class extends LitElement2 {
   }
   async connectedCallback() {
     super.connectedCallback();
-    const templateElement = this.getRootNode().host.closest("qti-test").querySelector("template[item-ref]");
-    if (templateElement) this.myTemplate = prepareTemplate(templateElement);
     await this.updateComplete;
     this.dispatchEvent(
       new CustomEvent("qti-assessment-item-ref-connected", {
@@ -1667,7 +1693,7 @@ TestShowCorrectResponse = __decorateClass([
 // src/lib/qti-test/components/test-paging-buttons-stamp.ts
 import { html as html13, LitElement as LitElement13 } from "lit";
 import { customElement as customElement12 } from "lit/decorators.js";
-import { prepareTemplate as prepareTemplate2 } from "@heximal/templates";
+import { prepareTemplate } from "@heximal/templates";
 import { consume as consume8 } from "@lit/context";
 var TestPagingButtonsStamp = class extends LitElement13 {
   createRenderRoot() {
@@ -1681,7 +1707,7 @@ var TestPagingButtonsStamp = class extends LitElement13 {
   connectedCallback() {
     super.connectedCallback();
     const templateElement = this.querySelector("template");
-    this.myTemplate = prepareTemplate2(templateElement);
+    this.myTemplate = prepareTemplate(templateElement);
   }
   render() {
     if (!this.computedContext) return html13``;
@@ -1710,17 +1736,17 @@ var TestContainer = class extends LitElement14 {
     this.testXML = null;
     /** Template content if provided */
     this.templateContent = null;
-    this.postLoadTestTransformCallback = null;
   }
   async handleTestURLChange() {
     if (!this.testURL) return;
     try {
       let api = await qtiTransformTest().load(this.testURL);
-      if (this.postLoadTestTransformCallback) {
+      const qtiTest = this.closest("qti-test");
+      if (qtiTest?.postLoadTestTransformCallback) {
         const tempDoc = api.htmlDoc();
         const testElement = tempDoc.querySelector("qti-assessment-test");
         if (testElement) {
-          api = await this.postLoadTestTransformCallback(api, testElement);
+          api = await qtiTest.postLoadTestTransformCallback(api, testElement);
         }
       }
       this.testDoc = api.htmlDoc();
@@ -1773,9 +1799,6 @@ __decorateClass([
 __decorateClass([
   state3()
 ], TestContainer.prototype, "testXML", 2);
-__decorateClass([
-  property13({ type: Function })
-], TestContainer.prototype, "postLoadTestTransformCallback", 2);
 __decorateClass([
   watch("testURL", { waitUntilFirstUpdate: true })
 ], TestContainer.prototype, "handleTestURLChange", 1);
@@ -1863,7 +1886,7 @@ TestPrintVariables = __decorateClass([
 // src/lib/qti-test/components/test-section-buttons-stamp.ts
 import { html as html16, LitElement as LitElement16 } from "lit";
 import { customElement as customElement15 } from "lit/decorators.js";
-import { prepareTemplate as prepareTemplate3 } from "@heximal/templates";
+import { prepareTemplate as prepareTemplate2 } from "@heximal/templates";
 import { consume as consume10 } from "@lit/context";
 var TestSectionButtonsStamp = class extends LitElement16 {
   createRenderRoot() {
@@ -1877,7 +1900,7 @@ var TestSectionButtonsStamp = class extends LitElement16 {
   connectedCallback() {
     super.connectedCallback();
     const templateElement = this.querySelector("template");
-    this.myTemplate = prepareTemplate3(templateElement);
+    this.myTemplate = prepareTemplate2(templateElement);
   }
   render() {
     if (!this.computedContext) return html16``;
@@ -1952,7 +1975,7 @@ TestPrintContext = __decorateClass([
 // src/lib/qti-test/components/test-stamp.ts
 import { html as html19, LitElement as LitElement19, nothing } from "lit";
 import { customElement as customElement18, property as property15, state as state5 } from "lit/decorators.js";
-import { prepareTemplate as prepareTemplate4 } from "@heximal/templates";
+import { prepareTemplate as prepareTemplate3 } from "@heximal/templates";
 import { consume as consume12 } from "@lit/context";
 var TestStamp = class extends LitElement19 {
   constructor() {
@@ -1981,7 +2004,7 @@ var TestStamp = class extends LitElement19 {
       this.myTemplate = null;
       return;
     }
-    this.myTemplate = prepareTemplate4(templateElement);
+    this.myTemplate = prepareTemplate3(templateElement);
   }
   willUpdate(_changedProperties) {
     if (!this.computedContext) {
@@ -2041,7 +2064,7 @@ TestStamp = __decorateClass([
 import { html as html20, LitElement as LitElement20, nothing as nothing2 } from "lit";
 import { consume as consume13 } from "@lit/context";
 import { customElement as customElement19, property as property16 } from "lit/decorators.js";
-import { prepareTemplate as prepareTemplate5 } from "@heximal/templates";
+import { prepareTemplate as prepareTemplate4 } from "@heximal/templates";
 var TestScoringButtons = class extends LitElement20 {
   constructor() {
     super();
@@ -2066,7 +2089,7 @@ var TestScoringButtons = class extends LitElement20 {
       this.myTemplate = null;
       return;
     }
-    this.myTemplate = prepareTemplate5(templateElement);
+    this.myTemplate = prepareTemplate4(templateElement);
   }
   _changeOutcomeScore(value) {
     const testPart = this.computedContext?.testParts.find((testPart2) => testPart2.active);
@@ -2112,7 +2135,7 @@ TestScoringButtons = __decorateClass([
 import { consume as consume14 } from "@lit/context";
 import { html as html21, LitElement as LitElement21, nothing as nothing3 } from "lit";
 import { customElement as customElement20 } from "lit/decorators.js";
-import { prepareTemplate as prepareTemplate6 } from "@heximal/templates";
+import { prepareTemplate as prepareTemplate5 } from "@heximal/templates";
 var TestViewToggle = class extends LitElement21 {
   createRenderRoot() {
     return this;
@@ -2124,7 +2147,7 @@ var TestViewToggle = class extends LitElement21 {
       this.myTemplate = null;
       return;
     }
-    this.myTemplate = prepareTemplate6(templateElement);
+    this.myTemplate = prepareTemplate5(templateElement);
   }
   _switchView(view) {
     this.dispatchEvent(
@@ -2266,4 +2289,4 @@ export {
   TestScoringFeedback,
   TestCheckItem
 };
-//# sourceMappingURL=chunk-GGTWY53P.js.map
+//# sourceMappingURL=chunk-XD7DR5YG.js.map