@citolab/qti-components 7.17.0 → 7.18.0

package/dist/{chunk-C2HQFI2C.js → chunk-5D7GD3JS.js}

@@ -1,6 +1,6 @@
 import {
   o as o2
-} from "./chunk-DWIRLYDS.js";
+} from "./chunk-FOWDOLXY.js";
 import {
   M,
   e as e2,
@@ -11,7 +11,7 @@ import {
   s,
   t as t2,
   v
-} from "./chunk-F44CI35W.js";
+} from "./chunk-L4TXKTUA.js";
 import {
   liveQuery,
   watch
@@ -34,7 +34,7 @@ import {
   t,
   w,
   x
-} from "./chunk-JEUY3MYB.js";
+} from "./chunk-VUSGFL4B.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -1355,26 +1355,132 @@ QtiChoiceInteraction = __decorateClass([
 ], QtiChoiceInteraction);
 
 // ../qti-interactions/src/components/qti-custom-interaction/qti-custom-interaction.ts
+var registerCES = `
+const postToParentWindows = (type, data) => {
+    window.top.postMessage(data ? { type, data } : { type }, '*');
+    let w = window.parent;
+    while (w) {
+      if (w !== window.top) {
+          w.postMessage({ type, data }, '*');
+      }
+      if (w !== w.parent) {
+        w = w.parent;
+      } else {
+        w = null;
+      }
+    }
+};
+
+window.CES = {
+    media: null,
+    response: null,
+    load: () => {
+      let resolveCount = 0;
+
+      const handleMessage = (event) => {
+        if (event.data.type === "mediaData") {
+          const media = event.data.data;
+          CES.media = media;
+          resolveCount++;
+        } else if (event.data.type === "responseData") {
+          const response = event.data.data;
+          if (response && Array.isArray(response) && response.length > 0) {
+            // state is stored in the first element of the array
+            CES.response = response[0];
+            // Wait a short moment to ensure CES.response is set
+            setTimeout(() => {
+              // Re-create the Controller instance if it exists
+              if (typeof Controller === 'function') {
+                console.log("Re-creating Controller instance");
+                ctrl = new Controller();
+              }
+            }, 50);
+          } else {  
+            CES.response = response;
+          }
+          resolveCount++;
+        }
+        if (resolveCount === 2) {
+          //window.removeEventListener("message", handleMessage);
+        }
+      };
+      window.addEventListener("message", handleMessage);
+      postToParentWindows("getMedia");
+      postToParentWindows("getResponse");
+    },
+    setResponse: (data) => {
+      postToParentWindows("setResponse", data);
+    },
+    getResponse: () => {
+      return CES.response;
+    },
+    getMedia: () => {
+      return CES.media;
+    },
+    setStageHeight: () => {
+      postToParentWindows("setStageHeight");
+    },
+};
+CES.load();
+`;
+var ciBootstrap = `
+  window.onload = function () {
+    const handleMessage = (event) => {
+      if (event.data.type === 'blobUrl') {
+        const blobUrl = event.data.data;
+        var n = document.createElement('iframe');
+        n.frameBorder = '0';
+        n.scrolling = 'no';
+        n.src = blobUrl;
+        n.style.width = '100%';
+        n.style.height = '100%';
+        document.body.appendChild(n);
+        window.removeEventListener('message', handleMessage);
+      }
+    };
+    window.addEventListener('message', handleMessage);
+    // Request the blob URL from parent
+    let w = window.parent;
+    while (w) {
+      w.postMessage({ type: 'getBlobUrl' }, '*');
+      if (w !== w.parent) {
+        w = w.parent;
+      } else {
+        w = null;
+      }
+    }
+  };
+`;
 var QtiCustomInteraction = class extends Interaction {
   constructor() {
     super();
-    // This custom-interaction support the CES API which is use in FACET
-    //
-    // It works like this:
-    // 1. The CI manifest is fetched
-    // 2. An iframe is created and the first style and first script from the manifest are loaded
-    // 3. The first script is bootstrap.js which also creates an iframe and loads the first media from the manifest
-    // 4. Communication is done via the CES API but because the iframe is not allowed to access the global CES object we need to use window.postMessage
-    // To achieve this we change the package by replacing the bootstrap.js with our own and inject a proxy CES API that communicates via postMessage
-    // Because we also want to run this in storybook, we cannot use window.top because to send messages there, because in case of storybook that is not the top window.
-    // So we send messages to all parent windows
     this.rawResponse = "";
+    this._manifestUrl = null;
+    this._resourceBaseUrl = null;
     this._errorMessage = null;
+    // Pre-created blob URL for the index.html with injected CES proxy
+    this._contentBlobUrl = null;
     this.handlePostMessage = this.handlePostMessage.bind(this);
   }
   connectedCallback() {
     super.connectedCallback();
-    const uriToManifest = this.data.startsWith("http") || this.data.startsWith("blob") ? this.data : removeDoubleSlashes(this.baseItemUrl + "/" + this.data);
+    let manifestPath = this.data;
+    if (!manifestPath) {
+      const objectEl = this.querySelector("object[data]");
+      if (objectEl) {
+        manifestPath = objectEl.getAttribute("data");
+        const width = objectEl.getAttribute("width");
+        const height = objectEl.getAttribute("height");
+        if (width) this.setAttribute("width", width);
+        if (height) this.setAttribute("height", height);
+      }
+    }
+    if (!manifestPath) {
+      this._errorMessage = "No manifest path found (neither data attribute nor object child)";
+      return;
+    }
+    const uriToManifest = manifestPath.startsWith("http") || manifestPath.startsWith("blob") ? manifestPath : removeDoubleSlashes((this.baseItemUrl || "") + "/" + manifestPath);
+    this._manifestUrl = new URL(uriToManifest, window.location.href).toString();
     fetch(uriToManifest).then((response) => {
       return response.json();
     }).then((data) => {
@@ -1384,11 +1490,18 @@ var QtiCustomInteraction = class extends Interaction {
       this._errorMessage = err;
     });
   }
-  // MH: Changed the default bootstrap.js to use the new CES API
-  // Because the old one uses the global CES object that is not allowed to be accessed when the CI
-  // is embedded in an iframe and coming from another domain
-  // Therefor we need to use the new CES API to communicates via the broadcast API
-  setupCES() {
+  /**
+   * Sets up the CES custom interaction by creating the iframe structure and
+   * handling the CES API communication via postMessage.
+   *
+   * For interactions that use CES, this method:
+   * 1. Fetches the original bootstrap.js and checks if it uses CES
+   * 2. If CES is used, fetches index.html and injects the registerCES proxy
+   * 3. Creates a blob URL for the modified HTML (stored in _contentBlobUrl)
+   * 4. Replaces bootstrap.js with ciBootstrap that loads the blob URL
+   * 5. Sets up postMessage listeners for CES API calls
+   */
+  async setupCES() {
     const iframe = this.shadowRoot.querySelector("#pciContainer");
     const iframeDoc = iframe.contentDocument;
     if (!this.manifest.script || this.manifest.script.length === 0) {
@@ -1400,16 +1513,106 @@ var QtiCustomInteraction = class extends Interaction {
       return;
     }
     const cssRef = this.manifest.style[0];
-    const cssUrl = cssRef.startsWith("http") || cssRef.startsWith("blob") ? cssRef : removeDoubleSlashes(`${this.baseRefUrl}/${cssRef}`);
-    const scriptRef = this.manifest.script[0];
-    const scriptUrl = scriptRef.startsWith("http") || scriptRef.startsWith("blob") ? scriptRef : removeDoubleSlashes(`${this.baseRefUrl}/${scriptRef}`);
+    const baseCandidates = this.getBaseCandidates();
+    console.debug("[qti-custom-interaction] manifest url", this._manifestUrl);
+    console.debug("[qti-custom-interaction] base candidates", baseCandidates);
+    console.debug("[qti-custom-interaction] refs", { cssRef, media: this.manifest.media });
+    const cssResolved = await this.resolveResourceWithFallback(cssRef, baseCandidates);
+    const cssUrl = cssResolved.url;
+    if (cssResolved.baseUrl && !this._resourceBaseUrl) {
+      this._resourceBaseUrl = cssResolved.baseUrl;
+    }
+    console.debug("[qti-custom-interaction] css resolved", cssResolved);
+    const usesCES = true;
+    console.debug("[qti-custom-interaction] using built-in ciBootstrap (skipping server bootstrap.js)");
+    if (usesCES) {
+      let indexUrl = "";
+      if (this.manifest.media && this.manifest.media.length > 0) {
+        const mediaRef = this.manifest.media[0];
+        const indexResolved = await this.resolveResourceWithFallback(mediaRef, baseCandidates, {
+          returnText: true
+        });
+        indexUrl = indexResolved.url;
+        if (indexResolved.baseUrl && !this._resourceBaseUrl) {
+          this._resourceBaseUrl = indexResolved.baseUrl;
+        }
+        console.debug("[qti-custom-interaction] index resolved (media)", {
+          url: indexResolved.url,
+          baseUrl: indexResolved.baseUrl,
+          hasText: Boolean(indexResolved.text)
+        });
+        if (indexResolved.text) {
+          let html = indexResolved.text;
+          const cesScript = "<script>" + registerCES + "</script>";
+          const headIndex = html.indexOf("<head>");
+          if (headIndex !== -1) {
+            html = html.slice(0, headIndex + 6) + cesScript + html.slice(headIndex + 6);
+          } else {
+            html = cesScript + html;
+          }
+          const blob = new Blob([html], { type: "text/html" });
+          this._contentBlobUrl = URL.createObjectURL(blob);
+        }
+      } else {
+        const manifestPath = this.data || "manifest.json";
+        const basePath = manifestPath.includes("/") ? manifestPath.substring(0, manifestPath.lastIndexOf("/")) : "";
+        const indexPath = basePath ? `${basePath}/index.html` : "index.html";
+        const indexResolved = await this.resolveResourceWithFallback(indexPath, baseCandidates, {
+          returnText: true
+        });
+        indexUrl = indexResolved.url;
+        if (indexResolved.baseUrl && !this._resourceBaseUrl) {
+          this._resourceBaseUrl = indexResolved.baseUrl;
+        }
+        console.debug("[qti-custom-interaction] index resolved (fallback)", {
+          url: indexResolved.url,
+          baseUrl: indexResolved.baseUrl,
+          hasText: Boolean(indexResolved.text)
+        });
+        if (indexResolved.text) {
+          let html = indexResolved.text;
+          const cesScript = "<script>" + registerCES + "</script>";
+          const headIndex = html.indexOf("<head>");
+          if (headIndex !== -1) {
+            html = html.slice(0, headIndex + 6) + cesScript + html.slice(headIndex + 6);
+          } else {
+            html = cesScript + html;
+          }
+          const blob = new Blob([html], { type: "text/html" });
+          this._contentBlobUrl = URL.createObjectURL(blob);
+        }
+      }
+      if (indexUrl && !this._contentBlobUrl) {
+        try {
+          const indexResponse = await fetch(indexUrl);
+          if (indexResponse.ok) {
+            let html = await indexResponse.text();
+            const cesScript = "<script>" + registerCES + "</script>";
+            const headIndex = html.indexOf("<head>");
+            if (headIndex !== -1) {
+              html = html.slice(0, headIndex + 6) + cesScript + html.slice(headIndex + 6);
+            } else {
+              html = cesScript + html;
+            }
+            const blob = new Blob([html], { type: "text/html" });
+            this._contentBlobUrl = URL.createObjectURL(blob);
+          } else {
+            console.error(`Failed to fetch index.html: ${indexResponse.status}`);
+          }
+        } catch (e5) {
+          console.error(`Error fetching index.html: ${e5}`);
+        }
+      }
+    }
+    const inlineScript = `<script>${ciBootstrap}</script>`;
+    console.debug("[qti-custom-interaction] using ciBootstrap inline script");
     window.addEventListener("message", this.handlePostMessage);
     iframeDoc.open();
     iframeDoc.write(`
       <html>
         <head>
-          <link href='${cssUrl}' rel="stylesheet" />
-          <script src='${scriptUrl}'></script>
+          ${cssUrl ? `<link href='${cssUrl}' rel="stylesheet" />` : ""}
+          ${inlineScript}
         </head>
         <body></body>
       </html>
@@ -1471,6 +1674,9 @@ var QtiCustomInteraction = class extends Interaction {
   }
   handlePostMessage(event) {
     const { type, data } = event.data;
+    if (type && type !== "setResponse") {
+      console.debug("[qti-custom-interaction] postMessage", { type, data });
+    }
     switch (type) {
       case "setResponse":
         if (data === null || !(Array.isArray(data) && data.length === 1 && data[0] === "")) {
@@ -1482,11 +1688,25 @@ var QtiCustomInteraction = class extends Interaction {
         this.postToWindowAndIframes("responseData", this.rawResponse);
         break;
       }
+      case "getBlobUrl": {
+        if (this._contentBlobUrl) {
+          this.postToWindowAndIframes("blobUrl", this._contentBlobUrl);
+        }
+        break;
+      }
       case "getMedia": {
+        const baseCandidates = this.getBaseCandidates();
         const mediaData = this.manifest.media.map((media) => {
-          const url = media.startsWith("http") || media.startsWith("blob") ? media : removeDoubleSlashes(this.baseRefUrl + "/" + media);
-          return url;
+          if (media.startsWith("http") || media.startsWith("blob")) {
+            return media;
+          }
+          const baseUrl = this._resourceBaseUrl || baseCandidates[0];
+          if (!baseUrl) {
+            return media;
+          }
+          return new URL(media, baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`).toString();
         });
+        console.debug("[qti-custom-interaction] mediaData", mediaData);
         this.postToWindowAndIframes("mediaData", mediaData);
         break;
       }
@@ -1543,6 +1763,51 @@ var QtiCustomInteraction = class extends Interaction {
         ${this._errorMessage}
       </div>`}`;
   }
+  getBaseCandidates() {
+    const candidates = [this._resourceBaseUrl, this.baseRefUrl, this.baseItemUrl, this.getManifestBaseUrl()];
+    const resolved = candidates.filter(Boolean).map((base) => new URL(base, window.location.href).toString());
+    const manifestParent = this.getManifestParentBaseUrl();
+    if (manifestParent) {
+      resolved.push(manifestParent);
+    }
+    return [...new Set(resolved)];
+  }
+  getManifestBaseUrl() {
+    if (!this._manifestUrl) {
+      return null;
+    }
+    return new URL(".", this._manifestUrl).toString();
+  }
+  getManifestParentBaseUrl() {
+    if (!this._manifestUrl) {
+      return null;
+    }
+    return new URL("..", this._manifestUrl).toString();
+  }
+  async resolveResourceWithFallback(ref, baseCandidates, options = {}) {
+    if (!ref) {
+      return { url: "", baseUrl: null };
+    }
+    if (ref.startsWith("http") || ref.startsWith("blob")) {
+      return { url: ref, baseUrl: null };
+    }
+    for (const base of baseCandidates) {
+      const baseUrl = new URL(base, window.location.href).toString();
+      const url = new URL(ref, baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`).toString();
+      try {
+        const response = await fetch(url);
+        if (response.ok) {
+          if (options.returnText) {
+            const text = await response.text();
+            return { url, baseUrl, text };
+          }
+          return { url, baseUrl };
+        }
+      } catch (e5) {
+      }
+    }
+    return { url: "", baseUrl: null };
+  }
 };
 __decorateClass([
   n({ type: String, attribute: "data" })
@@ -3195,19 +3460,17 @@ var qti_portable_custom_interaction_styles_default = i`
 var QtiPortableCustomInteraction = class extends Interaction {
   constructor() {
     super(...arguments);
-    // Only used in iframe mode
     this._iframeLoaded = false;
     this._pendingMessages = [];
-    this._responseCheckInterval = null;
+    this._iframeMessageOrigin = null;
     this.requirePathsJson = "";
     this.requireShimJson = "";
     this.requireJsUrl = "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js";
     this.baseUrl = "";
-    this.useIframe = false;
     this.useDefaultShims = false;
     this.useDefaultPaths = false;
     this._errorMessage = null;
-    this.response = [];
+    this.response = null;
     this._parsedRequirePaths = null;
     this._parsedRequireShim = null;
     /**
@@ -3218,6 +3481,17 @@ var QtiPortableCustomInteraction = class extends Interaction {
       if (!data || data.source !== "qti-pci-iframe") {
         return;
       }
+      if (!this.iframe?.contentWindow || event.source !== this.iframe.contentWindow) {
+        return;
+      }
+      if (data.responseIdentifier && data.responseIdentifier !== this.responseIdentifier) {
+        return;
+      }
+      if (this._iframeMessageOrigin === null) {
+        this._iframeMessageOrigin = event.origin;
+      } else if (event.origin !== this._iframeMessageOrigin) {
+        return;
+      }
       switch (data.method) {
         case "iframeReady":
           this.initializeInteraction();
@@ -3235,10 +3509,19 @@ var QtiPortableCustomInteraction = class extends Interaction {
           }
           break;
         case "interactionChanged": {
-          const value = this.convertQtiVariableJSON(data.params.value);
-          this.response = value;
+          const raw = data?.params?.value;
+          const converted = raw && typeof raw === "object" ? this.convertQtiVariableJSON(raw) : null;
+          const state = typeof data?.params?.state === "string" ? data.params.state : null;
+          if (converted === null) {
+            const emptyResponse = this.responseVariable?.cardinality === "single" ? "" : [];
+            this.response = emptyResponse;
+            this.validate();
+            this.saveResponse(emptyResponse, state);
+            break;
+          }
+          this.response = converted;
           this.validate();
-          this.saveResponse(this.response);
+          this.saveResponse(converted, state);
           break;
         }
         case "error":
@@ -3247,46 +3530,6 @@ var QtiPortableCustomInteraction = class extends Interaction {
           break;
       }
     };
-    this._onInteractionChanged = (event) => {
-      event.stopPropagation();
-      const value = this.convertQtiVariableJSON(event.detail.value);
-      this.response = value;
-      this.saveResponse(value);
-    };
-    /**
-     * DIRECT MODE: Load config from URL
-     */
-    this.loadConfig = async (url, baseUrl) => {
-      url = this.removeDoubleSlashes(url);
-      try {
-        const requireConfig = await fetch(url);
-        if (requireConfig.ok) {
-          const config = await requireConfig.json();
-          const moduleCong = config;
-          for (const moduleId in moduleCong.paths) {
-            if (baseUrl) {
-              moduleCong.paths[moduleId] = this.getResolvablePath(moduleCong.paths[moduleId], baseUrl);
-            }
-          }
-          return moduleCong;
-        }
-      } catch (e5) {
-      }
-      return null;
-    };
-    /**
-     * DIRECT MODE: Helper method to get resolvable path string
-     */
-    this.getResolvablePathString = (path, basePath) => {
-      path = path.replace(/\.js$/, "");
-      return path?.toLocaleLowerCase().startsWith("http") || !basePath ? path : this.removeDoubleSlashes(`${basePath}/${path}`);
-    };
-    /**
-     * DIRECT MODE: Helper method to get resolvable path
-     */
-    this.getResolvablePath = (path, basePath) => {
-      return Array.isArray(path) ? path.map((p2) => this.getResolvablePathString(p2, basePath)) : this.getResolvablePathString(path, basePath);
-    };
     // Add this property to store the previous state
     this._previousState = null;
   }
@@ -3454,7 +3697,12 @@ var QtiPortableCustomInteraction = class extends Interaction {
     }
   }
   validate() {
-    return true;
+    if (this.response === null || this.response === void 0) return false;
+    if (Array.isArray(this.response)) {
+      if (this.response.length === 0) return false;
+      return this.response.some((v2) => v2 !== "" && v2 !== null && v2 !== void 0);
+    }
+    return this.response !== "";
   }
   set value(v2) {
     if (v2 === null) {
@@ -3464,16 +3712,8 @@ var QtiPortableCustomInteraction = class extends Interaction {
     }
   }
   get value() {
-    if (this.useIframe) {
-      return this._value?.toString() || null;
-    } else {
-      const pciValue = this.pci?.getResponse();
-      if (pciValue) {
-        const convertedValue = this.convertQtiVariableJSON(pciValue);
-        return Array.isArray(convertedValue) ? convertedValue.join(",") : convertedValue;
-      }
-    }
-    return Array.isArray(this._value) ? this._value.join(",") : this._value?.toString() || null;
+    if (this._value === null || this._value === void 0) return null;
+    return Array.isArray(this._value) ? this._value.join(",") : String(this._value);
   }
   set boundTo(newValue) {
     if (!newValue || !newValue[this.responseIdentifier]) {
@@ -3516,129 +3756,23 @@ var QtiPortableCustomInteraction = class extends Interaction {
     }
     return unescaped;
   }
-  /**
-   * DIRECT MODE: Register PCI instance
-   */
-  register(pci) {
-    this.pci = pci;
-    this.dom = this.querySelector("qti-interaction-markup");
-    if (!this.dom) {
-      this.dom = document.createElement("div");
-      this.appendChild(this.dom);
-    }
-    this.dom.classList.add("qti-customInteraction");
-    this.dom.style.width = "100%";
-    this.dom.style.minHeight = "50px";
-    this.dom.style.display = "block";
-    this.dom.addEventListener("qti-interaction-changed", this._onInteractionChanged);
-    if (this.querySelector("properties")) {
-      this.querySelector("properties").style.display = "none";
-    }
-    const config = {
-      properties: this.addHyphenatedKeys(this.unescapeDataAttributes({ ...this.dataset })),
-      contextVariables: {},
-      templateVariables: {},
-      onready: (pciInstance) => {
-        this.pci = pciInstance;
-        try {
-          const resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-              if (entry.contentRect) {
-                if (entry.contentRect.height > 0) {
-                  this.style.height = `${entry.contentRect.height + 20}px`;
-                }
-              }
-            }
-          });
-          resizeObserver.observe(this.dom);
-          this._resizeObserver = resizeObserver;
-        } catch (e5) {
-          console.warn("ResizeObserver not supported, falling back to static sizing");
-        }
-      },
-      ondone: (_pciInstance, response, _state, _status) => {
-        this.response = this.convertQtiVariableJSON(response);
-        this.saveResponse(this.response);
-      },
-      responseIdentifier: this.responseIdentifier,
-      boundTo: this.boundTo
-    };
-    if (pci.getInstance) {
-      pci.getInstance(this.dom, config, void 0);
-    } else {
-      const restoreTAOConfig = (element) => {
-        const config2 = {};
-        const parseDataAttributes = (element2) => {
-          const result = {};
-          Object.entries(element2.dataset).forEach(([key, value]) => {
-            if (!key.includes("__")) {
-              result[key] = value;
-            }
-          });
-          const nestedData = {};
-          Object.entries(element2.dataset).forEach(([key, value]) => {
-            const parts = key.split("__");
-            if (parts.length > 1) {
-              const [group, index, prop] = parts;
-              nestedData[group] = nestedData[group] || {};
-              nestedData[group][index] = nestedData[group][index] || {};
-              nestedData[group][index][prop] = value;
-            }
-          });
-          Object.entries(nestedData).forEach(([key, group]) => {
-            result[key] = Object.values(group);
-          });
-          return result;
-        };
-        const data = parseDataAttributes(element);
-        for (const key in data) {
-          if (Object.prototype.hasOwnProperty.call(data, key)) {
-            const value = data[key];
-            if (key === "config") {
-              config2[key] = JSON.parse(value);
-            } else {
-              config2[key] = value;
-            }
-          }
-        }
-        return config2;
-      };
-      const taoConfig = restoreTAOConfig(this);
-      pci.initialize(
-        this.customInteractionTypeIdentifier,
-        this.dom.firstElementChild || this.dom,
-        Object.keys(taoConfig).length ? taoConfig : null
-      );
-    }
-  }
-  /* ... rest of the code remains the same ... */
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.useIframe) {
-      window.removeEventListener("message", this.handleIframeMessage);
-    } else {
-      this.stopResponseCheck();
-      if (this._resizeObserver) {
-        this._resizeObserver.disconnect();
-        this._resizeObserver = null;
-      }
-      requirejs.undef(this.customInteractionTypeIdentifier);
-      const context = requirejs.s.contexts;
-      delete context[this.customInteractionTypeIdentifier];
-      this.removeEventListener("qti-interaction-changed", this._onInteractionChanged);
-    }
+    window.removeEventListener("message", this.handleIframeMessage);
   }
   /**
    * IFRAME MODE: Send message to iframe
    */
   sendMessageToIframe(method, params) {
-    if (!this._iframeLoaded) {
+    const targetWindow = this.iframe?.contentWindow;
+    if (!this._iframeLoaded || !targetWindow) {
       this._pendingMessages.push({ method, params });
       return;
     }
-    this.iframe.contentWindow.postMessage(
+    targetWindow.postMessage(
       {
         source: "qti-portable-custom-interaction",
+        responseIdentifier: this.responseIdentifier,
         method,
         params
       },
@@ -3685,14 +3819,19 @@ var QtiPortableCustomInteraction = class extends Interaction {
    * IFRAME MODE: Send initialization data to iframe
    */
   sendIframeInitData() {
+    const properties = this.addHyphenatedKeys(this.unescapeDataAttributes({ ...this.dataset }));
+    const storedStateRaw = this.context?.state?.[this.responseIdentifier];
+    const storedState = typeof storedStateRaw === "string" && storedStateRaw.length > 0 ? storedStateRaw : null;
     const initData = {
       module: this.module,
       customInteractionTypeIdentifier: this.customInteractionTypeIdentifier,
       baseUrl: !this.baseUrl ? window.location.origin : this.baseUrl.startsWith("http") || this.baseUrl.startsWith("blob") || this.baseUrl.startsWith("base64") ? this.baseUrl : removeDoubleSlashes(`${window.location.origin}${this.baseUrl}`),
       responseIdentifier: this.responseIdentifier,
+      properties,
       dataAttributes: { ...this.dataset },
       interactionModules: this.getInteractionModules(),
-      boundTo: this.boundTo
+      boundTo: storedState ? null : this.boundTo,
+      state: storedState
     };
     this.sendMessageToIframe("initialize", initData);
   }
@@ -3734,99 +3873,9 @@ var QtiPortableCustomInteraction = class extends Interaction {
   }
   connectedCallback() {
     super.connectedCallback();
-    if (this.useIframe) {
-      window.addEventListener("message", this.handleIframeMessage);
-      this.createIframe();
-    } else {
-      define("qtiCustomInteractionContext", () => {
-        return {
-          register: (ctxA) => {
-            this.register(ctxA);
-          },
-          notifyReady: () => {
-          }
-        };
-      });
-      const config = this.buildRequireConfig();
-      if (config) {
-        const requirePCI = requirejs.config(config);
-        requirejs.onError = function(err) {
-          console.error("RequireJS error:", err);
-          if (err.requireType === "timeout") {
-            console.error("Modules that timed out:", err.requireModules);
-          }
-          throw err;
-        };
-        requirePCI(["require"], (require2) => {
-          try {
-            require2([this.module], () => {
-            }, (err) => {
-              console.error("Error loading module:", err);
-            });
-          } catch (error) {
-            console.error("Error in require call:", error);
-          }
-        });
-      }
-    }
-  }
-  /**
-   * Stop checking for response changes
-   */
-  stopResponseCheck() {
-    if (this._responseCheckInterval !== null) {
-      window.clearInterval(this._responseCheckInterval);
-      this._responseCheckInterval = null;
-    }
-  }
-  /**
-   * DIRECT MODE: Build RequireJS configuration
-   */
-  buildRequireConfig() {
-    const config = {
-      context: this.customInteractionTypeIdentifier,
-      catchError: true,
-      paths: { ...this.getFinalRequirePaths(), ...window["requirePaths"] || {} },
-      shim: { ...this.getFinalRequireShim(), ...window["requireShim"] || {} }
-    };
-    if (!globalThis.require) {
-      this._errorMessage = `RequireJS not found. Please load it via CDN: https://cdnjs.com/libraries/require.js`;
-      return null;
-    }
-    const baseUrl = this.getAttribute("data-base-url");
-    const interactionModules = this.querySelector("qti-interaction-modules");
-    if (interactionModules) {
-      const modules = interactionModules.querySelectorAll("qti-interaction-module");
-      for (const module of modules) {
-        const moduleId = module.getAttribute("id");
-        const primaryPath = module.getAttribute("primary-path");
-        const fallbackPath = module.getAttribute("fallback-path");
-        if (moduleId && primaryPath) {
-          const paths = fallbackPath ? this.combineRequireResolvePaths(
-            this.getResolvablePath(primaryPath, baseUrl),
-            this.getResolvablePath(fallbackPath, baseUrl)
-          ) : this.getResolvablePath(primaryPath, baseUrl);
-          const existingPath = config.paths[moduleId] || [];
-          config.paths[moduleId] = this.combineRequireResolvePaths(existingPath, paths);
-        }
-      }
-    }
-    return config;
-  }
-  /**
-   * DIRECT MODE: Helper method to combine require paths
-   */
-  combineRequireResolvePaths(path1, path2) {
-    const path1Array = Array.isArray(path1) ? path1 : [path1];
-    const path2Array = Array.isArray(path2) ? path2 : [path2];
-    return path1Array.concat(path2Array).filter((value, index, self) => self.indexOf(value) === index);
-  }
-  /**
-   * DIRECT MODE: Helper method to remove double slashes
-   */
-  removeDoubleSlashes(str) {
-    const singleForwardSlashes = str.replace(/([^:]\/)\/+/g, "$1").replace(/\/\//g, "/").replace("http:/", "http://").replace("https:/", "https://");
-    return singleForwardSlashes;
+    this.response = this.responseVariable?.value ?? null;
+    window.addEventListener("message", this.handleIframeMessage);
+    this.createIframe();
   }
   /**
    * IFRAME MODE: Generate iframe HTML content
@@ -3864,6 +3913,12 @@ var QtiPortableCustomInteraction = class extends Interaction {
     }
     #pci-container {
       width: 100%;
+    }
+    qti-interaction-markup {
+      display: block;
+      width: 100%;
+      min-height: 50px;
+    }
   </style>
   <script src="${this.requireJsUrl}"></script>
   <script>
@@ -3898,14 +3953,15 @@ var QtiPortableCustomInteraction = class extends Interaction {
           console.error('Script error usually indicates a network or CORS issue with:', err.requireModules);
         }
 
-        // Notify parent window about the error
-        window.parent.postMessage({
-          source: 'qti-pci-iframe',
-          method: 'error',
-          params: {
-            message: 'RequireJS ' + err.requireType + ' error for modules: ' + err.requireModules,
-            details: {
-              type: err.requireType,
+	        // Notify parent window about the error
+	        window.parent.postMessage({
+	          source: 'qti-pci-iframe',
+	          responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
+	          method: 'error',
+	          params: {
+	            message: 'RequireJS ' + err.requireType + ' error for modules: ' + err.requireModules,
+	            details: {
+	              type: err.requireType,
               modules: err.requireModules,
               error: err.toString()
             }
@@ -3918,13 +3974,96 @@ var QtiPortableCustomInteraction = class extends Interaction {
     window.PCIManager = {
       pciInstance: null,
       container: null,
+      markupEl: null,
+      propertiesEl: null,
       customInteractionTypeIdentifier: null,
+      responseIdentifier: null,
+      pendingBoundTo: null,
+      pendingMarkup: null,
+      pendingProperties: null,
+      pendingState: null,
+      interactionChangedViaEvent: false,
+      eventBridgeAttached: false,
+      lastResponseStr: null,
+      hadResponse: false,
 
       initialize: function(config) {
         this.customInteractionTypeIdentifier = config.customInteractionTypeIdentifier;
+        this.responseIdentifier = config.responseIdentifier;
         this.container = document.getElementById('pci-container');
         this.container.classList.add('qti-customInteraction');
 
+        function qtiVariableHasValue(qtiVar) {
+          if (!qtiVar) return false;
+          if (qtiVar.base) {
+            for (const k in qtiVar.base) {
+              if (!Object.prototype.hasOwnProperty.call(qtiVar.base, k)) continue;
+              const v = qtiVar.base[k];
+              if (v !== null && v !== undefined && v !== '') return true;
+            }
+          }
+          if (qtiVar.list) {
+            for (const k in qtiVar.list) {
+              if (!Object.prototype.hasOwnProperty.call(qtiVar.list, k)) continue;
+              const v = qtiVar.list[k];
+              if (Array.isArray(v) && v.some(x => x !== null && x !== undefined && x !== '')) return true;
+            }
+          }
+          if (Array.isArray(qtiVar.record) && qtiVar.record.length > 0) return true;
+          return false;
+        }
+
+        const initialBoundTo = config.boundTo && config.boundTo[this.responseIdentifier];
+        this.hadResponse = qtiVariableHasValue(initialBoundTo);
+        this.lastResponseStr = this.hadResponse ? JSON.stringify(initialBoundTo) : null;
+        // Ensure expected DOM structure exists (markup + properties)
+        this.markupEl = this.container.querySelector('qti-interaction-markup');
+        if (!this.markupEl) {
+          this.markupEl = document.createElement('qti-interaction-markup');
+          this.container.appendChild(this.markupEl);
+        }
+        this.markupEl.classList.add('qti-customInteraction');
+        this.propertiesEl = this.container.querySelector('properties');
+        if (!this.propertiesEl) {
+          this.propertiesEl = document.createElement('properties');
+          this.propertiesEl.style.display = 'none';
+          this.container.appendChild(this.propertiesEl);
+        } else {
+          this.propertiesEl.style.display = 'none';
+        }
+
+        // Apply any markup/properties that arrived before initialization
+        if (this.pendingMarkup !== null) {
+          this.setMarkup(this.pendingMarkup);
+          this.pendingMarkup = null;
+        }
+        if (this.pendingProperties !== null) {
+          this.setProperties(this.pendingProperties);
+          this.pendingProperties = null;
+        }
+
+        // Bridge qti-interaction-changed events (preferred over polling)
+        if (!this.eventBridgeAttached) {
+          this.eventBridgeAttached = true;
+          const self = this;
+	          this.container.addEventListener(
+	            'qti-interaction-changed',
+	            function(evt) {
+	              try {
+	                self.interactionChangedViaEvent = true;
+	                const value = evt && evt.detail ? evt.detail.value : undefined;
+	                if (value !== undefined) {
+	                  const state = self.pciInstance && typeof self.pciInstance.getState === 'function' ? self.pciInstance.getState() : null;
+	                  self.notifyInteractionChanged(value, state);
+	                }
+	              } catch (e) {
+	                // ignore bridge errors, polling fallback may still work
+	              }
+	            },
+            true
+          );
+        }
+
         function getResolvablePath(path, basePath) {
           if (Array.isArray(path)) {
             return path.map(p => getResolvablePathString(p, basePath));
@@ -3987,23 +4126,33 @@ var QtiPortableCustomInteraction = class extends Interaction {
               this.pciInstance = pciInstance;
               // Configure PCI instance
               const pciConfig = {
-                properties: this.addHyphenatedKeys(this.unescapeDataAttributes({ ...config.dataAttributes })),
+                properties: config.properties || {},
                 contextVariables: config.contextVariables || {},
                 templateVariables: config.templateVariables || {},
                 onready: pciInstance => {
                   this.pciInstance = pciInstance;
+                  // Apply any pending updates that arrived before onready
+                  if (this.pendingBoundTo) {
+                    this.applyBoundTo(this.pendingBoundTo);
+                    this.pendingBoundTo = null;
+                  }
+                  if (this.pendingState && typeof this.pciInstance.setState === 'function') {
+                    this.pciInstance.setState(this.pendingState);
+                    this.pendingState = null;
+                  }
                   this.notifyReady();
                 },
-                ondone: (pciInstance, response, state, status) => {
-                  this.notifyInteractionChanged(response);
-                },
-                responseIdentifier: config.responseIdentifier,
-                boundTo: config.boundTo,
-              };
-
-              if (pciInstance.getInstance) {
-                pciInstance.getInstance(this.container, pciConfig, undefined);
-              } else {
+	                ondone: (pciInstance, response, state, status) => {
+	                  this.notifyInteractionChanged(response, typeof state === 'string' ? state : null);
+	                },
+	                responseIdentifier: config.responseIdentifier,
+	                boundTo: config.boundTo,
+	              };
+
+	              if (pciInstance.getInstance) {
+	                const dom = this.markupEl || this.container;
+	                pciInstance.getInstance(dom, pciConfig, config.state || undefined);
+	              } else {
                 // TAO custom interaction initialization
                 const restoreTAOConfig = (dataset) => {
                     const config = {};
@@ -4011,7 +4160,7 @@ var QtiPortableCustomInteraction = class extends Interaction {
                       const result = {};
 
                       // Separate direct attributes from nested ones
-                      Object.entries(dataset || []).forEach(([key, value]) => {
+                      Object.entries(dataset || {}).forEach(([key, value]) => {
                         if (!key.includes('__')) {
                           // Direct attributes (like version)
                           result[key] = value;
@@ -4021,7 +4170,7 @@ var QtiPortableCustomInteraction = class extends Interaction {
                       // Parse nested attributes
                       const nestedData = {};
 
-                      Object.entries(dataset || []).forEach(([key, value]) => {
+                      Object.entries(dataset || {}).forEach(([key, value]) => {
                         const parts = key.split('__');
                         if (parts.length > 1) {
                           const [group, index, prop] = parts;
@@ -4054,17 +4203,13 @@ var QtiPortableCustomInteraction = class extends Interaction {
 
               this.pciInstance.initialize(
                 this.customInteractionTypeIdentifier,
-                this.container.firstElementChild || this.container,
+                (this.markupEl || this.container).firstElementChild || (this.markupEl || this.container),
                 Object.keys(taoConfig).length ? taoConfig : null
               );
               }
             },
             notifyReady: () => {
-              // Notify parent that the PCI is ready
-              window.parent.postMessage({
-                source: 'qti-pci-iframe',
-                method: 'pciReady'
-              }, '*');
+              PCIManager.notifyReady();
             }
           };
         });
@@ -4094,73 +4239,121 @@ var QtiPortableCustomInteraction = class extends Interaction {
         }
       },
 
-      notifyReady: function() {
-        window.parent.postMessage({
-          source: 'qti-pci-iframe',
-          method: 'iframeReady'
-        }, '*');
-      },
+	      notifyReady: function() {
+	        window.parent.postMessage({
+	          source: 'qti-pci-iframe',
+	          responseIdentifier: this.responseIdentifier,
+	          method: 'iframeReady'
+	        }, '*');
+	      },
+
+	      notifyInteractionChanged: function(response, state) {
+	        window.parent.postMessage({
+	          source: 'qti-pci-iframe',
+	          responseIdentifier: this.responseIdentifier,
+	          method: 'interactionChanged',
+	          params: { value: response, state: state }
+	        }, '*');
+	      },
+
+	      notifyError: function(message) {
+	        console.error('PCI Error:', message);
+	        window.parent.postMessage({
+	          source: 'qti-pci-iframe',
+	          responseIdentifier: this.responseIdentifier,
+	          method: 'error',
+	          params: { message: message }
+	        }, '*');
+	      },
 
-      notifyInteractionChanged: function(response) {
-        window.parent.postMessage({
-          source: 'qti-pci-iframe',
-          method: 'interactionChanged',
-          params: { value: response }
-        }, '*');
+      setMarkup: function(markupHtml) {
+        if (!this.container) {
+          this.container = document.getElementById('pci-container');
+        }
+        if (!this.container) {
+          this.pendingMarkup = markupHtml;
+          return;
+        }
+        this.markupEl = this.container.querySelector('qti-interaction-markup');
+        if (!this.markupEl) {
+          this.markupEl = document.createElement('qti-interaction-markup');
+          this.container.appendChild(this.markupEl);
+        }
+        this.markupEl.classList.add('qti-customInteraction');
+        this.markupEl.innerHTML = markupHtml || '';
       },
 
-      notifyError: function(message) {
-        console.error('PCI Error:', message);
-        window.parent.postMessage({
-          source: 'qti-pci-iframe',
-          method: 'error',
-          params: { message: message }
-        }, '*');
+      setProperties: function(propertiesHtml) {
+        if (!this.container) {
+          this.container = document.getElementById('pci-container');
+        }
+        if (!this.container) {
+          this.pendingProperties = propertiesHtml;
+          return;
+        }
+        this.propertiesEl = this.container.querySelector('properties');
+        if (!this.propertiesEl) {
+          this.propertiesEl = document.createElement('properties');
+          this.container.appendChild(this.propertiesEl);
+        }
+        this.propertiesEl.style.display = 'none';
+        this.propertiesEl.innerHTML = propertiesHtml || '';
       },
 
-      setMarkup: function(markupHtml) {
-        this.container = document.getElementById('pci-container');
-        this.container.innerHTML = markupHtml;
+      applyBoundTo: function(boundTo) {
+        if (!this.pciInstance || typeof this.pciInstance.setResponse !== 'function') return;
+        const value = boundTo && (boundTo[this.responseIdentifier] || boundTo[Object.keys(boundTo)[0]]);
+        if (value) this.pciInstance.setResponse(value);
       },
+    };
 
-      addHyphenatedKeys: function(properties) {
-        const updatedProperties = { ...properties };
-        for (const key in properties) {
-          if (Object.prototype.hasOwnProperty.call(properties, key)) {
-            const hyphenatedKey = key.replace(/[A-Z]/g, char => \`-\${char.toLowerCase()}\`);
-            updatedProperties[hyphenatedKey] = properties[key];
-          }
+	    // Set up message listener for communication with parent
+	    let expectedParentOrigin = null;
+	    window.addEventListener('message', function(event) {
+	      const { data } = event;
+
+	      // Ensure the message is from our parent
+	      if (event.source !== window.parent || !data || data.source !== 'qti-portable-custom-interaction') {
+	        return;
+	      }
+	      if (expectedParentOrigin === null) {
+	        expectedParentOrigin = event.origin;
+	      } else if (event.origin !== expectedParentOrigin) {
+	        return;
+	      }
+
+      function deepQuerySelector(root, selector) {
+        if (!root) return null;
+        try {
+          const direct = root.querySelector ? root.querySelector(selector) : null;
+          if (direct) return direct;
+        } catch (e) {
+          // ignore invalid selector for this root
         }
-        return updatedProperties;
-      },
-      unescapeDataAttributes: function(obj) {
-        const unescaped = {};
-        for (const [key, value] of Object.entries(obj)) {
-          if (typeof value === 'string') {
-            unescaped[key] = value
-              .replace(/&amp;/g, '&')
-              .replace(/&lt;/g, '<')
-              .replace(/&gt;/g, '>')
-              .replace(/&quot;/g, '"')
-              .replace(/&#x27;/g, "'")
-              .replace(/&#x2F;/g, '/')
-              .replace(/&#x60;/g, '\`')
-              .replace(/&#x3D;/g, '=');
-          } else {
-            unescaped[key] = value;
+        if (!root.querySelectorAll) return null;
+        const nodes = root.querySelectorAll('*');
+        for (const node of nodes) {
+          if (node && node.shadowRoot) {
+            const found = deepQuerySelector(node.shadowRoot, selector);
+            if (found) return found;
           }
         }
-        return unescaped;
-      },
-    };
-
-    // Set up message listener for communication with parent
-    window.addEventListener('message', function(event) {
-      const { data } = event;
+        return null;
+      }
 
-      // Ensure the message is from our parent
-      if (!data || data.source !== 'qti-portable-custom-interaction') {
-        return;
+      function deepFindElementByExactText(root, text) {
+        if (!root || !text) return null;
+        if (root.querySelectorAll) {
+          const nodes = root.querySelectorAll('*');
+          for (const node of nodes) {
+            if ((node.textContent || '').trim() === text) return node;
+            if (node.shadowRoot) {
+              const found = deepFindElementByExactText(node.shadowRoot, text);
+              if (found) return found;
+            }
+          }
+        }
+        return null;
       }
 
       switch(data.method) {
@@ -4173,22 +4366,140 @@ var QtiPortableCustomInteraction = class extends Interaction {
           break;
 
         case 'setBoundTo':
-          // Handle setting boundTo
+          if (PCIManager.pciInstance) {
+            PCIManager.applyBoundTo(data.params);
+          } else {
+            PCIManager.pendingBoundTo = data.params;
+          }
           break;
 
         case 'setProperties':
-          // Handle setting properties
+          PCIManager.setProperties(data.params);
           break;
+
+        case 'setState':
+          if (PCIManager.pciInstance && typeof PCIManager.pciInstance.setState === 'function') {
+            PCIManager.pciInstance.setState((data.params && data.params.state) || data.params);
+          } else {
+            PCIManager.pendingState = (data.params && data.params.state) || data.params;
+          }
+          break;
+
+        case 'getContent': {
+          const messageId = data.params && data.params.messageId;
+          const collectShadowHtml = root => {
+            const parts = [];
+            if (!root || !root.querySelectorAll) return parts;
+            const nodes = root.querySelectorAll('*');
+            for (const node of nodes) {
+              if (node && node.shadowRoot) {
+                parts.push(node.shadowRoot.innerHTML || '');
+                parts.push(...collectShadowHtml(node.shadowRoot));
+              }
+            }
+            return parts;
+          };
+          const shadowHtml = collectShadowHtml(document).join('\\n');
+	          window.parent.postMessage(
+	            {
+	              source: 'qti-pci-iframe',
+	              responseIdentifier: PCIManager.responseIdentifier,
+	              method: 'getContentResponse',
+	              messageId: messageId,
+	              content: (document.documentElement ? document.documentElement.outerHTML : '') + '\\n' + shadowHtml
+	            },
+	            '*'
+	          );
+          break;
+        }
+
+        case 'simulateClick': {
+          const messageId = data.params && data.params.messageId;
+          const x = data.params && data.params.x;
+          const y = data.params && data.params.y;
+          const el = typeof x === 'number' && typeof y === 'number' ? document.elementFromPoint(x, y) : null;
+	          if (el && typeof el.click === 'function') el.click();
+	          window.parent.postMessage(
+	            {
+	              source: 'qti-pci-iframe',
+	              responseIdentifier: PCIManager.responseIdentifier,
+	              method: 'clickResponse',
+	              messageId: messageId
+	            },
+	            '*'
+	          );
+	          break;
+	        }
+
+        case 'clickOnSelector': {
+          const messageId = data.params && data.params.messageId;
+          const selector = data.params && data.params.selector;
+          const el = selector ? deepQuerySelector(document, selector) : null;
+	          const success = !!el;
+	          if (el && typeof el.click === 'function') el.click();
+	          window.parent.postMessage(
+	            {
+	              source: 'qti-pci-iframe',
+	              responseIdentifier: PCIManager.responseIdentifier,
+	              method: 'clickSelectorResponse',
+	              messageId: messageId,
+	              success: success
+	            },
+	            '*'
+	          );
+	          break;
+	        }
+
+        case 'clickOnElementByText': {
+          const messageId = data.params && data.params.messageId;
+          const text = data.params && data.params.text;
+          const target = text ? deepFindElementByExactText(document, text) : null;
+	          const success = !!target;
+	          if (target && typeof target.click === 'function') target.click();
+	          window.parent.postMessage(
+	            {
+	              source: 'qti-pci-iframe',
+	              responseIdentifier: PCIManager.responseIdentifier,
+	              method: 'clickTextResponse',
+	              messageId: messageId,
+	              success: success
+	            },
+	            '*'
+	          );
+	          break;
+	        }
+
+        case 'setValueElement': {
+          const messageId = data.params && data.params.messageId;
+          const selector = data.params && data.params.selector;
+          const value = data.params && data.params.value;
+          const el = selector ? deepQuerySelector(document, selector) : null;
+          let success = false;
+          if (el && 'value' in el) {
+            try {
+              el.value = value;
+              el.dispatchEvent(new Event('input', { bubbles: true }));
+              el.dispatchEvent(new Event('change', { bubbles: true }));
+              success = true;
+            } catch (e) {
+              success = false;
+            }
+	          }
+	          window.parent.postMessage(
+	            {
+	              source: 'qti-pci-iframe',
+	              responseIdentifier: PCIManager.responseIdentifier,
+	              method: 'setValueResponse',
+	              messageId: messageId,
+	              success: success
+	            },
+	            '*'
+	          );
+	          break;
+	        }
       }
     });
 
-    // Notify parent that iframe has loaded
-    window.addEventListener('load', function() {
-      window.parent.postMessage({
-        source: 'qti-pci-iframe',
-        method: 'iframeLoaded'
-      }, '*');
-    });
     let resizeTimeout;
     let previousHeight = 0;
     const notifyResize = () => {
@@ -4197,14 +4508,15 @@ var QtiPortableCustomInteraction = class extends Interaction {
       if (newHeight !== previousHeight) {
         previousHeight = newHeight;
         clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(() => {
-          window.parent.postMessage({
-            source: 'qti-pci-iframe',
-            method: 'resize',
-            height: newHeight,
-            width: container.scrollWidth
-          }, '*');
-        }, 100); // Adjust debounce time as needed
+	        resizeTimeout = setTimeout(() => {
+	          window.parent.postMessage({
+	            source: 'qti-pci-iframe',
+	            responseIdentifier: PCIManager.responseIdentifier,
+	            method: 'resize',
+	            height: newHeight,
+	            width: container.scrollWidth
+	          }, '*');
+	        }, 100); // Adjust debounce time as needed
       }
     };
 
@@ -4238,18 +4550,43 @@ var QtiPortableCustomInteraction = class extends Interaction {
       });
       let lastResponseStr = '';
       setInterval(() => {
+        if (PCIManager.interactionChangedViaEvent) return;
         if (PCIManager.pciInstance && PCIManager.pciInstance.getResponse) {
           const response = PCIManager.pciInstance.getResponse();
+	          if (response === undefined) {
+	            // Don't emit an initial empty on load; only emit a clear if we previously had a value
+	            if (!PCIManager.hadResponse) return;
+	            PCIManager.hadResponse = false;
+	            PCIManager.lastResponseStr = null;
+	            const state = PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function' ? PCIManager.pciInstance.getState() : null;
+	            window.parent.postMessage(
+	              {
+	                source: 'qti-pci-iframe',
+	                responseIdentifier: PCIManager.responseIdentifier,
+	                method: 'interactionChanged',
+	                params: { value: null, state: state }
+	              },
+	              '*'
+	            );
+	            return;
+	          }
+
           const responseStr = JSON.stringify(response);
 
-          if (responseStr !== lastResponseStr) {
-            lastResponseStr = responseStr;
-              window.parent.postMessage({
-                source: 'qti-pci-iframe',
-                method: 'interactionChanged',
-                params: { value: response }
-              }, '*');
-          }
+	          if (responseStr !== PCIManager.lastResponseStr) {
+	            PCIManager.lastResponseStr = responseStr;
+	            PCIManager.hadResponse = true;
+	            const state = PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function' ? PCIManager.pciInstance.getState() : null;
+	            window.parent.postMessage(
+	              {
+	                source: 'qti-pci-iframe',
+	                responseIdentifier: PCIManager.responseIdentifier,
+	                method: 'interactionChanged',
+	                params: { value: response, state: state }
+	              },
+	              '*'
+	            );
+	          }
         }
       }, 500); // Check every 500ms
   </script>
@@ -4313,73 +4650,33 @@ var QtiPortableCustomInteraction = class extends Interaction {
       correctResponseViewer.appendChild(clonedChild);
     });
     const correctResponseValue = responseVariable.correctResponse;
-    if (this.useIframe) {
-      const originalConnectedCallback = correctResponseViewer.connectedCallback;
-      correctResponseViewer.connectedCallback = function() {
-        originalConnectedCallback.call(this);
-        const checkIframeLoaded = () => {
-          if (this._iframeLoaded) {
-            setTimeout(() => {
-              const qtiVariableJSON = this.responseVariablesToQtiVariableJSON(
-                correctResponseValue,
-                responseVariable.cardinality,
-                responseVariable.baseType
-              );
-              this.sendMessageToIframe("setBoundTo", {
-                [originalResponseId]: qtiVariableJSON
-              });
-              this.sendMessageToIframe("setState", { state: "review" });
-            }, 1e3);
-            return true;
-          }
-          return false;
-        };
-        if (!checkIframeLoaded()) {
-          const intervalId = setInterval(() => {
-            if (checkIframeLoaded()) {
-              clearInterval(intervalId);
-            }
-          }, 100);
-          setTimeout(() => {
-            clearInterval(intervalId);
-          }, 1e4);
-        }
-      };
-    } else {
-      const originalRegister = correctResponseViewer.register;
-      correctResponseViewer.register = function(pci) {
-        originalRegister.call(this, pci);
-        const setCorrectResponse = () => {
-          if (this.pci) {
-            if (typeof this.pci.setResponse === "function") {
-              const pciResponse = this.responseVariablesToQtiVariableJSON(
-                correctResponseValue,
-                responseVariable.cardinality,
-                responseVariable.baseType
-              );
-              this.pci.setResponse(pciResponse);
-              if (typeof this.pci.setState === "function") {
-                this.pci.setState("review");
-              }
-              return true;
-            }
-          }
-          return false;
-        };
+    const originalConnectedCallback = correctResponseViewer.connectedCallback;
+    correctResponseViewer.connectedCallback = function() {
+      originalConnectedCallback.call(this);
+      const checkIframeLoaded = () => {
+        if (!this._iframeLoaded) return false;
         setTimeout(() => {
-          if (!setCorrectResponse()) {
-            const intervalId = setInterval(() => {
-              if (setCorrectResponse()) {
-                clearInterval(intervalId);
-              }
-            }, 200);
-            setTimeout(() => {
-              clearInterval(intervalId);
-            }, 5e3);
-          }
-        }, 500);
+          const qtiVariableJSON = this.responseVariablesToQtiVariableJSON(
+            correctResponseValue,
+            responseVariable.cardinality,
+            responseVariable.baseType
+          );
+          this.sendMessageToIframe("setBoundTo", {
+            [originalResponseId]: qtiVariableJSON
+          });
+          this.sendMessageToIframe("setState", { state: "review" });
+        }, 1e3);
+        return true;
       };
-    }
+      if (!checkIframeLoaded()) {
+        const intervalId = setInterval(() => {
+          if (checkIframeLoaded()) clearInterval(intervalId);
+        }, 100);
+        setTimeout(() => {
+          clearInterval(intervalId);
+        }, 1e4);
+      }
+    };
     correctResponseViewer.style.pointerEvents = "none";
     correctResponseContainer.appendChild(correctResponseViewer);
     this.after(correctResponseContainer);
@@ -4393,10 +4690,7 @@ var QtiPortableCustomInteraction = class extends Interaction {
       pointerEvents: this.style.pointerEvents,
       position: this.style.position
     };
-    if (this.useIframe) {
-      this.sendMessageToIframe("setState", { state: "disabled" });
-    } else {
-    }
+    this.sendMessageToIframe("setState", { state: "disabled" });
     const existingOverlay = this.querySelector(".pci-interaction-overlay");
     if (!existingOverlay) {
       const overlay = document.createElement("div");
@@ -4433,10 +4727,7 @@ var QtiPortableCustomInteraction = class extends Interaction {
       }
       this._previousState = null;
     }
-    if (this.useIframe) {
-      this.sendMessageToIframe("setState", { state: "interacting" });
-    } else {
-    }
+    this.sendMessageToIframe("setState", { state: "interacting" });
   }
   render() {
     return x`
@@ -4448,21 +4739,15 @@ var QtiPortableCustomInteraction = class extends Interaction {
     `;
   }
 };
-// Define a static style that applies to both direct and iframe modes
+// This implementation always renders inside an iframe.
 QtiPortableCustomInteraction.styles = [
   qti_portable_custom_interaction_styles_default,
-  // Add default width/height for direct mode
   i`
       :host {
         display: block;
         width: 100%;
         min-height: 50px;
       }
-      .qti-customInteraction {
-        display: block;
-        width: 100%;
-        min-height: 50px;
-      }
     `
 ];
 __decorateClass([
@@ -4483,9 +4768,6 @@ __decorateClass([
 __decorateClass([
   n({ type: String, attribute: "data-base-url" })
 ], QtiPortableCustomInteraction.prototype, "baseUrl", 2);
-__decorateClass([
-  n({ type: Boolean, attribute: "data-use-iframe" })
-], QtiPortableCustomInteraction.prototype, "useIframe", 2);
 __decorateClass([
   n({ type: Boolean, attribute: "data-use-default-shims" })
 ], QtiPortableCustomInteraction.prototype, "useDefaultShims", 2);
@@ -5924,4 +6206,4 @@ lit-html/node/directives/ref.js:
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-C2HQFI2C.js.map
+//# sourceMappingURL=chunk-5D7GD3JS.js.map