@salesforce/experimental-mfe-lwc-shell 2.2.1-rc.1 → 2.2.1-rc.7

package/dist/InternalHostLwcShell.d.ts

@@ -40,7 +40,6 @@ export declare class InternalHostLwcShell extends HTMLElement {
     private _title;
     private _view;
     private _debugEnabled;
-    private _graphqlHandler;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;

package/dist/index.esm.js

@@ -1,6 +1,4 @@
-/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.1 (2026-04-09) */
-import { gql, unstable_graphql_imperative } from 'lightning/graphql';
-
+/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.7 (2026-06-16) */
 /**
  * EmbeddingResizer - Handles dynamic iframe/container resizing
  * Uses ResizeObserver to monitor element size changes and notify the host
@@ -18,119 +16,6 @@ function getUUID() {
     return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36);
 }
 
-async function executeGraphQL(query, variables) {
-    if (typeof query !== "string" || query.trim() === "") {
-        throw new Error("Invalid GraphQL query: query must be a non-empty string.");
-    }
-    const documentNode = gql `
-        ${query}
-    `;
-    const result = await unstable_graphql_imperative({ query: documentNode, variables });
-    return { data: result?.data, errors: result?.errors };
-}
-class GraphQLBridgeHandler {
-    #sendResponse;
-    #pendingCount = 0;
-    #queue = [];
-    #maxConcurrent;
-    #maxQueueSize;
-    #generation = 0;
-    constructor(sendResponse, maxConcurrent = 10, maxQueueSize = 50) {
-        this.#sendResponse = sendResponse;
-        this.#maxConcurrent = maxConcurrent;
-        this.#maxQueueSize = maxQueueSize;
-    }
-    static isValidRequest(data) {
-        const req = data;
-        return (typeof req?.requestId === "string" &&
-            typeof req?.query === "string" &&
-            (req.variables == null || (typeof req.variables === "object" && !Array.isArray(req.variables))));
-    }
-    rejectInvalidRequest(data) {
-        const req = data;
-        if (typeof req?.requestId !== "string") {
-            this.#sendResponse({
-                requestId: req?.requestId,
-                ok: false,
-                error: { message: "Invalid GraphQL request data" },
-            });
-            return;
-        }
-        const { requestId, query, variables } = req;
-        if (typeof query !== "string") {
-            this.#sendResponse({
-                requestId: requestId,
-                ok: false,
-                error: { message: "Invalid GraphQL query: query must be a string" },
-            });
-            return;
-        }
-        if (variables != null && (typeof variables !== "object" || Array.isArray(variables))) {
-            this.#sendResponse({
-                requestId: requestId,
-                ok: false,
-                error: { message: "Invalid GraphQL variables: must be a plain object" },
-            });
-        }
-    }
-    handleRequest({ requestId, query, variables }) {
-        if (this.#pendingCount >= this.#maxConcurrent) {
-            return this.#enqueueRequest(requestId, query, variables);
-        }
-        return this.#execute(requestId, query, variables);
-    }
-    reset() {
-        this.#generation++;
-        this.#queue = [];
-        this.#pendingCount = 0;
-    }
-    #execute = async (requestId, query, variables) => {
-        const gen = this.#generation;
-        this.#pendingCount++;
-        try {
-            const result = await executeGraphQL(query, variables);
-            if (gen === this.#generation) {
-                this.#sendResponse({ requestId, ok: true, result });
-            }
-        }
-        catch (err) {
-            if (gen === this.#generation) {
-                this.#sendResponse({
-                    requestId,
-                    ok: false,
-                    error: { message: err?.message || "GraphQL request failed" },
-                });
-            }
-        }
-        finally {
-            if (gen === this.#generation) {
-                this.#pendingCount--;
-                this.#processRequestQueue();
-            }
-        }
-    };
-    #enqueueRequest = (requestId, query, variables) => {
-        if (this.#queue.length >= this.#maxQueueSize) {
-            this.#sendResponse({
-                requestId,
-                ok: false,
-                error: { message: "Too many queued GraphQL requests" },
-            });
-            return Promise.resolve();
-        }
-        return new Promise((resolve) => {
-            this.#queue.push({ requestId, query, variables, done: resolve });
-        });
-    };
-    #processRequestQueue = () => {
-        if (this.#queue.length === 0 || this.#pendingCount >= this.#maxConcurrent) {
-            return;
-        }
-        const next = this.#queue.shift();
-        this.#execute(next.requestId, next.query, next.variables).then(next.done);
-    };
-}
-
 /**
  * InternalHostLwcShell
  *
@@ -153,11 +38,9 @@ class GraphQLBridgeHandler {
  *
  * See the README and the `productRegistration` demo for a full recipe.
  */
-const MAX_CONCURRENT_GRAPHQL_REQUESTS = 10;
-const MAX_GRAPHQL_QUEUE_SIZE = 50;
-const BASE_TOKENS = ["allow-scripts", "allow-pointer-lock"];
+const BASE_TOKENS = ["allow-scripts", "allow-pointer-lock", "allow-same-origin"];
 const OPTIONAL_TOKENS = ["allow-downloads", "allow-forms", "allow-modals"];
-const BLOCKED_TOKENS = ["allow-same-origin", "allow-top-navigation", "allow-popups"];
+const BLOCKED_TOKENS = ["allow-top-navigation", "allow-popups"];
 const STATES = {
     LOADING: "state-loading",
     LOADED: "state-loaded",
@@ -251,16 +134,12 @@ class InternalHostLwcShell extends HTMLElement {
     _title = "Embedded widget";
     _view = "compact";
     _debugEnabled = true;
-    _graphqlHandler;
     static get observedAttributes() {
         return ["src", "srcdoc", "sandbox", "title", "view", "debug"];
     }
     constructor() {
         super();
         this._shadow = this.attachShadow({ mode: "closed" });
-        this._graphqlHandler = new GraphQLBridgeHandler((data) => {
-            this._postToIframe("bridge-graphql-response", data);
-        }, MAX_CONCURRENT_GRAPHQL_REQUESTS, MAX_GRAPHQL_QUEUE_SIZE);
     }
     connectedCallback() {
         this._renderInitial();
@@ -269,7 +148,6 @@ class InternalHostLwcShell extends HTMLElement {
     }
     disconnectedCallback() {
         window.removeEventListener("message", this._handleMessage);
-        this._graphqlHandler.reset();
         if (this._readinessTimeout) {
             clearTimeout(this._readinessTimeout);
             this._readinessTimeout = null;
@@ -427,13 +305,8 @@ class InternalHostLwcShell extends HTMLElement {
         const shadow = this._shadow;
         shadow.innerHTML = `
             <style>${STYLES}</style>
-            <div class="container" data-state="${this._currentState}"
-                 tabindex="0" role="region" aria-label="${this._title}">
-                <iframe
-                    class="${this._frameClass}"
-                    title="${this._title}"
-                    aria-label="Interactive widget content"
-                ></iframe>
+            <div class="container" data-state="${this._currentState}">
+                <iframe class="${this._frameClass}" title="${this._title}"></iframe>
             </div>
         `;
         this._container = shadow.querySelector(".container");
@@ -453,9 +326,6 @@ class InternalHostLwcShell extends HTMLElement {
         if (this._iframe) {
             this._iframe.setAttribute("title", this._title);
         }
-        if (this._container) {
-            this._container.setAttribute("aria-label", this._title);
-        }
         this._log("title", this._title);
     }
     _updateViewDOM() {
@@ -534,14 +404,6 @@ class InternalHostLwcShell extends HTMLElement {
                 this.dispatchEvent(new CustomEvent(eventType, { detail, bubbles: true, cancelable: true, composed: true }));
             }
         }
-        else if (type === "bridge-graphql-request") {
-            if (GraphQLBridgeHandler.isValidRequest(data)) {
-                this._graphqlHandler.handleRequest(data);
-            }
-            else {
-                this._graphqlHandler.rejectInvalidRequest(data);
-            }
-        }
         else if (type === "bridge-ready") {
             this._handleBridgeReady();
         }
@@ -647,7 +509,6 @@ class InternalHostLwcShell extends HTMLElement {
             return;
         // reset tracking
         this._bridgeReady = false;
-        this._graphqlHandler.reset();
         this._currentState = STATES.LOADING;
         this._updateContainerState();
         // clear existing

package/dist/index.iife.js

@@ -1,5 +1,5 @@
-/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.1 (2026-04-09) */
-var LwcShell = (function (exports, graphql) {
+/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.7 (2026-06-16) */
+var LwcShell = (function (exports) {
     'use strict';
 
     /**
@@ -19,119 +19,6 @@ var LwcShell = (function (exports, graphql) {
         return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36);
     }
 
-    async function executeGraphQL(query, variables) {
-        if (typeof query !== "string" || query.trim() === "") {
-            throw new Error("Invalid GraphQL query: query must be a non-empty string.");
-        }
-        const documentNode = graphql.gql `
-        ${query}
-    `;
-        const result = await graphql.unstable_graphql_imperative({ query: documentNode, variables });
-        return { data: result?.data, errors: result?.errors };
-    }
-    class GraphQLBridgeHandler {
-        #sendResponse;
-        #pendingCount = 0;
-        #queue = [];
-        #maxConcurrent;
-        #maxQueueSize;
-        #generation = 0;
-        constructor(sendResponse, maxConcurrent = 10, maxQueueSize = 50) {
-            this.#sendResponse = sendResponse;
-            this.#maxConcurrent = maxConcurrent;
-            this.#maxQueueSize = maxQueueSize;
-        }
-        static isValidRequest(data) {
-            const req = data;
-            return (typeof req?.requestId === "string" &&
-                typeof req?.query === "string" &&
-                (req.variables == null || (typeof req.variables === "object" && !Array.isArray(req.variables))));
-        }
-        rejectInvalidRequest(data) {
-            const req = data;
-            if (typeof req?.requestId !== "string") {
-                this.#sendResponse({
-                    requestId: req?.requestId,
-                    ok: false,
-                    error: { message: "Invalid GraphQL request data" },
-                });
-                return;
-            }
-            const { requestId, query, variables } = req;
-            if (typeof query !== "string") {
-                this.#sendResponse({
-                    requestId: requestId,
-                    ok: false,
-                    error: { message: "Invalid GraphQL query: query must be a string" },
-                });
-                return;
-            }
-            if (variables != null && (typeof variables !== "object" || Array.isArray(variables))) {
-                this.#sendResponse({
-                    requestId: requestId,
-                    ok: false,
-                    error: { message: "Invalid GraphQL variables: must be a plain object" },
-                });
-            }
-        }
-        handleRequest({ requestId, query, variables }) {
-            if (this.#pendingCount >= this.#maxConcurrent) {
-                return this.#enqueueRequest(requestId, query, variables);
-            }
-            return this.#execute(requestId, query, variables);
-        }
-        reset() {
-            this.#generation++;
-            this.#queue = [];
-            this.#pendingCount = 0;
-        }
-        #execute = async (requestId, query, variables) => {
-            const gen = this.#generation;
-            this.#pendingCount++;
-            try {
-                const result = await executeGraphQL(query, variables);
-                if (gen === this.#generation) {
-                    this.#sendResponse({ requestId, ok: true, result });
-                }
-            }
-            catch (err) {
-                if (gen === this.#generation) {
-                    this.#sendResponse({
-                        requestId,
-                        ok: false,
-                        error: { message: err?.message || "GraphQL request failed" },
-                    });
-                }
-            }
-            finally {
-                if (gen === this.#generation) {
-                    this.#pendingCount--;
-                    this.#processRequestQueue();
-                }
-            }
-        };
-        #enqueueRequest = (requestId, query, variables) => {
-            if (this.#queue.length >= this.#maxQueueSize) {
-                this.#sendResponse({
-                    requestId,
-                    ok: false,
-                    error: { message: "Too many queued GraphQL requests" },
-                });
-                return Promise.resolve();
-            }
-            return new Promise((resolve) => {
-                this.#queue.push({ requestId, query, variables, done: resolve });
-            });
-        };
-        #processRequestQueue = () => {
-            if (this.#queue.length === 0 || this.#pendingCount >= this.#maxConcurrent) {
-                return;
-            }
-            const next = this.#queue.shift();
-            this.#execute(next.requestId, next.query, next.variables).then(next.done);
-        };
-    }
-
     /**
      * InternalHostLwcShell
      *
@@ -154,11 +41,9 @@ var LwcShell = (function (exports, graphql) {
      *
      * See the README and the `productRegistration` demo for a full recipe.
      */
-    const MAX_CONCURRENT_GRAPHQL_REQUESTS = 10;
-    const MAX_GRAPHQL_QUEUE_SIZE = 50;
-    const BASE_TOKENS = ["allow-scripts", "allow-pointer-lock"];
+    const BASE_TOKENS = ["allow-scripts", "allow-pointer-lock", "allow-same-origin"];
     const OPTIONAL_TOKENS = ["allow-downloads", "allow-forms", "allow-modals"];
-    const BLOCKED_TOKENS = ["allow-same-origin", "allow-top-navigation", "allow-popups"];
+    const BLOCKED_TOKENS = ["allow-top-navigation", "allow-popups"];
     const STATES = {
         LOADING: "state-loading",
         LOADED: "state-loaded",
@@ -252,16 +137,12 @@ var LwcShell = (function (exports, graphql) {
         _title = "Embedded widget";
         _view = "compact";
         _debugEnabled = true;
-        _graphqlHandler;
         static get observedAttributes() {
             return ["src", "srcdoc", "sandbox", "title", "view", "debug"];
         }
         constructor() {
             super();
             this._shadow = this.attachShadow({ mode: "closed" });
-            this._graphqlHandler = new GraphQLBridgeHandler((data) => {
-                this._postToIframe("bridge-graphql-response", data);
-            }, MAX_CONCURRENT_GRAPHQL_REQUESTS, MAX_GRAPHQL_QUEUE_SIZE);
         }
         connectedCallback() {
             this._renderInitial();
@@ -270,7 +151,6 @@ var LwcShell = (function (exports, graphql) {
         }
         disconnectedCallback() {
             window.removeEventListener("message", this._handleMessage);
-            this._graphqlHandler.reset();
             if (this._readinessTimeout) {
                 clearTimeout(this._readinessTimeout);
                 this._readinessTimeout = null;
@@ -428,13 +308,8 @@ var LwcShell = (function (exports, graphql) {
             const shadow = this._shadow;
             shadow.innerHTML = `
             <style>${STYLES}</style>
-            <div class="container" data-state="${this._currentState}"
-                 tabindex="0" role="region" aria-label="${this._title}">
-                <iframe
-                    class="${this._frameClass}"
-                    title="${this._title}"
-                    aria-label="Interactive widget content"
-                ></iframe>
+            <div class="container" data-state="${this._currentState}">
+                <iframe class="${this._frameClass}" title="${this._title}"></iframe>
             </div>
         `;
             this._container = shadow.querySelector(".container");
@@ -454,9 +329,6 @@ var LwcShell = (function (exports, graphql) {
             if (this._iframe) {
                 this._iframe.setAttribute("title", this._title);
             }
-            if (this._container) {
-                this._container.setAttribute("aria-label", this._title);
-            }
             this._log("title", this._title);
         }
         _updateViewDOM() {
@@ -535,14 +407,6 @@ var LwcShell = (function (exports, graphql) {
                     this.dispatchEvent(new CustomEvent(eventType, { detail, bubbles: true, cancelable: true, composed: true }));
                 }
             }
-            else if (type === "bridge-graphql-request") {
-                if (GraphQLBridgeHandler.isValidRequest(data)) {
-                    this._graphqlHandler.handleRequest(data);
-                }
-                else {
-                    this._graphqlHandler.rejectInvalidRequest(data);
-                }
-            }
             else if (type === "bridge-ready") {
                 this._handleBridgeReady();
             }
@@ -648,7 +512,6 @@ var LwcShell = (function (exports, graphql) {
                 return;
             // reset tracking
             this._bridgeReady = false;
-            this._graphqlHandler.reset();
             this._currentState = STATES.LOADING;
             this._updateContainerState();
             // clear existing
@@ -768,5 +631,5 @@ var LwcShell = (function (exports, graphql) {
 
     return exports;
 
-})({}, typeof lightningGraphql !== 'undefined' ? lightningGraphql : {});
+})({});
 //# sourceMappingURL=index.iife.js.map

package/dist/index.iife.prod.js

@@ -1,5 +1,3 @@
-/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.1 (2026-04-09) */
-var LwcShell=function(e,t){"use strict";class s{#e;#t=0;#s=[];#i;#n;#a=0;constructor(e,t=10,s=50){this.#e=e,this.#i=t,this.#n=s}static isValidRequest(e){const t=e;return"string"==typeof t?.requestId&&"string"==typeof t?.query&&(null==t.variables||"object"==typeof t.variables&&!Array.isArray(t.variables))}rejectInvalidRequest(e){const t=e;if("string"!=typeof t?.requestId)return void this.#e({requestId:t?.requestId,ok:!1,error:{message:"Invalid GraphQL request data"}});const{requestId:s,query:i,variables:n}=t;"string"==typeof i?null==n||"object"==typeof n&&!Array.isArray(n)||this.#e({requestId:s,ok:!1,error:{message:"Invalid GraphQL variables: must be a plain object"}}):this.#e({requestId:s,ok:!1,error:{message:"Invalid GraphQL query: query must be a string"}})}handleRequest({requestId:e,query:t,variables:s}){return this.#t>=this.#i?this.#r(e,t,s):this.#l(e,t,s)}reset(){this.#a++,this.#s=[],this.#t=0}#l=async(e,s,i)=>{const n=this.#a;this.#t++;try{const a=await async function(e,s){if("string"!=typeof e||""===e.trim())throw new Error("Invalid GraphQL query: query must be a non-empty string.");const i=t.gql`
-        ${e}
-    `,n=await t.unstable_graphql_imperative({query:i,variables:s});return{data:n?.data,errors:n?.errors}}(s,i);n===this.#a&&this.#e({requestId:e,ok:!0,result:a})}catch(t){n===this.#a&&this.#e({requestId:e,ok:!1,error:{message:t?.message||"GraphQL request failed"}})}finally{n===this.#a&&(this.#t--,this.#o())}};#r=(e,t,s)=>this.#s.length>=this.#n?(this.#e({requestId:e,ok:!1,error:{message:"Too many queued GraphQL requests"}}),Promise.resolve()):new Promise(i=>{this.#s.push({requestId:e,query:t,variables:s,done:i})});#o=()=>{if(0===this.#s.length||this.#t>=this.#i)return;const e=this.#s.shift();this.#l(e.requestId,e.query,e.variables).then(e.done)}}const i=["allow-scripts","allow-pointer-lock"],n=["allow-downloads","allow-forms","allow-modals"],a=["allow-same-origin","allow-top-navigation","allow-popups"],r="state-loading",l="state-loaded";class o extends HTMLElement{_shadow;_iframe=null;_container=null;_currentState=r;_readinessTimeout=null;_isFullscreen=!1;_preFullscreenHeight="";_lastThemeData={};_lastPayloadData={};_bridgeReady=!1;_shellInstanceId=function(){return Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(36)}();_hasSentTheme=!1;_hasSentData=!1;_src=null;_srcdoc=null;_sandbox=null;_title="Embedded widget";_view="compact";_debugEnabled=!0;_graphqlHandler;static get observedAttributes(){return["src","srcdoc","sandbox","title","view","debug"]}constructor(){super(),this._shadow=this.attachShadow({mode:"closed"}),this._graphqlHandler=new s(e=>{this._postToIframe("bridge-graphql-response",e)},10,50)}connectedCallback(){this._renderInitial(),this._setupMessageListener(),this._log("connectedCallback")}disconnectedCallback(){window.removeEventListener("message",this._handleMessage),this._graphqlHandler.reset(),this._readinessTimeout&&(clearTimeout(this._readinessTimeout),this._readinessTimeout=null),this._log("disconnectedCallback")}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"src":this.src=s;break;case"srcdoc":this.srcdoc=s;break;case"sandbox":this.sandbox=s;break;case"title":this.title=s;break;case"view":this.view=s;break;case"debug":this.debug=null!==s}}get src(){return this._src}set src(e){const t=e||null;this._src!==t&&(this._src=t,null!==t?this.setAttribute("src",t):this.removeAttribute("src"),this._updateIframeSrc())}get srcdoc(){return this._srcdoc}set srcdoc(e){const t=e||null;this._srcdoc!==t&&(this._srcdoc=t,null!==t?this.setAttribute("srcdoc",t):this.removeAttribute("srcdoc"),this._updateIframeSrc())}get sandbox(){return this._sandbox}set sandbox(e){const t=e||null;this._sandbox!==t&&(this._sandbox=t,null!==t?this.setAttribute("sandbox",t):this.removeAttribute("sandbox"),this._applySandbox())}get title(){return this._title}set title(e){const t=e||"Embedded widget";this._title!==t&&(this._title=t,this.setAttribute("title",t),this._updateTitle())}get view(){return this._view}set view(e){const t="full"===e?"full":"compact";this._view!==t&&(this._view=t,this.setAttribute("view",t),this._updateViewDOM())}get debug(){return this._debugEnabled}set debug(e){const t=!!e;this._debugEnabled!==t&&(this._debugEnabled=t,t?this.setAttribute("debug",""):this.removeAttribute("debug"))}updateData(e){if(!e||"object"!=typeof e)return;Object.entries(e).forEach(([e,t])=>{const s=`data-${String(e).replace(/[A-Z]/g,"-$&").toLowerCase()}`;this.setAttribute(s,String(t))});const t=this._collectDataAttributes();this._lastPayloadData=t,this._bridgeReady?(this._postToIframe("data",t),this._hasSentData=!0,this._log("send data",t)):this._log("queue data until bridge ready",t)}refreshTheme(){this._sendInitialTheme()}get _isFullView(){return"full"===this._view}get _frameClass(){return this._isFullView?"frame frameFull":"frame"}_log(...e){this._debugEnabled&&console.log("[InternalHostLwcShell]",JSON.stringify(e,null,2))}_renderInitial(){const e=this._shadow;e.innerHTML=`\n            <style>\n:host {\n    display: block;\n    position: relative;\n    height: 100%;\n    overflow: auto;\n    box-sizing: border-box;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.frame {\n    visibility: hidden;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border: none;\n}\n\n.container[data-state='state-loaded'] .frame {\n    visibility: visible;\n}\n\n/* Fullscreen overlay */\n.overlayBackdrop {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100vh;\n    z-index: 9998;\n    background: rgba(0, 0, 0, 0.8);\n    backdrop-filter: blur(4px);\n}\n\n.overlayClose {\n    position: fixed;\n    top: 24px;\n    right: 24px;\n    z-index: 9999;\n    width: 32px;\n    height: 32px;\n    background: rgba(0, 0, 0, 0.7);\n    color: #fff;\n    border-radius: 50%;\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n}\n\n.frameFull {\n    position: fixed;\n    inset: 0;\n    width: 90vw;\n    height: 90vh !important;\n    margin: 5vh 5vw;\n    z-index: 10000;\n    background: #fff;\n    border-radius: 8px;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n}\n</style>\n            <div class="container" data-state="${this._currentState}"\n                 tabindex="0" role="region" aria-label="${this._title}">\n                <iframe\n                    class="${this._frameClass}"\n                    title="${this._title}"\n                    aria-label="Interactive widget content"\n                ></iframe>\n            </div>\n        `,this._container=e.querySelector(".container"),this._iframe=e.querySelector("iframe"),this._container.addEventListener("click",()=>this._handleContainerClick()),this._applySandbox(),this._updateIframeSrc(),this._sendInitialTheme(),this._log("renderInitial: iframe ready")}_updateContainerState(){this._container&&this._container.setAttribute("data-state",this._currentState)}_updateTitle(){this._iframe&&this._iframe.setAttribute("title",this._title),this._container&&this._container.setAttribute("aria-label",this._title),this._log("title",this._title)}_updateViewDOM(){if(this._iframe&&(this._iframe.className=this._frameClass),!this._container)return;const e=this._container.querySelector(".overlayBackdrop"),t=this._container.querySelector(".overlayClose");if(e&&e.remove(),t&&t.remove(),this._isFullView){const e=document.createElement("div");e.className="overlayBackdrop",e.setAttribute("aria-hidden","true");const t=document.createElement("button");t.className="overlayClose",t.type="button",t.setAttribute("aria-label","Close fullscreen"),t.textContent="✕",t.addEventListener("click",this._exitFullscreen),this._container.appendChild(e),this._container.appendChild(t)}}_setState(e){this._currentState=e,this._updateContainerState(),e===l&&this._sendInitialData()}_setupMessageListener(){window.addEventListener("message",this._handleMessage)}_handleMessage=e=>{const t=this._iframe?.contentWindow;if(e.source!==t)return;const i=e.data||{},{type:n,data:a,id:r}=i;if(r?r===this._shellInstanceId:"bridge-ready"===n)if(this._log("receive",n,a),"bridge-event"===n){const{eventType:e,detail:t}=a||{};if(this._log("bridge-event",e,t),"resize"===e)this._handleResize(t);else{if("widget-ready"!==e)throw new RangeError(`Invalid bridge event ${e}`);this._handleWidgetReady()}}else if("custom-event"===n){const{eventType:e,detail:t}=a||{};if(this._log("custom-event",e,t),"fullscreen-request"===e){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0}))&&this._handleFullscreenRequest()}else this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0,composed:!0}))}else"bridge-graphql-request"===n?s.isValidRequest(a)?this._graphqlHandler.handleRequest(a):this._graphqlHandler.rejectInvalidRequest(a):"bridge-ready"===n?this._handleBridgeReady():"bridge-error"===n&&this._handleBridgeError(a)};_handleResize({height:e}){const t=new CustomEvent("resize",{detail:{height:e},cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||this._isFullscreen||"number"!=typeof e||!Number.isFinite(e)||(this._iframe&&(this._iframe.style.height=e+"px"),this._log("applied resize",e))}_handleWidgetReady(){this._readinessTimeout&&(clearTimeout(this._readinessTimeout),this._readinessTimeout=null),this.dispatchEvent(new CustomEvent("widget-ready",{bubbles:!0})),this._log("widget-ready")}_handleFullscreenRequest(){this._isFullscreen||this._enterFullscreen()}_enterFullscreen(){this._isFullscreen=!0,this._preFullscreenHeight=this._iframe?.style.height??"",this._view="full",this._updateViewDOM(),this._iframe&&(this._iframe.style.height="100%"),this.updateData({view:"full"}),this.dispatchEvent(new CustomEvent("fullscreen-entered",{detail:{element:this},bubbles:!0})),this._log("enter fullscreen")}_exitFullscreen=()=>{this._isFullscreen=!1,this._view="compact",this._updateViewDOM(),this._iframe&&(this._iframe.style.height=this._preFullscreenHeight),this.updateData({view:"compact"}),this.dispatchEvent(new CustomEvent("fullscreen-exited",{detail:{element:this},bubbles:!0})),this._log("exit fullscreen")};_handleBridgeReady(){this._bridgeReady=!0,this._postToIframe("shell-ready"),this._setState(l)}_handleBridgeError(e){this.dispatchEvent(new CustomEvent("widget-bridge-error",{detail:e})),this._log("bridge-error",e)}_handleContainerClick(){}_applySandbox(){const e=this._iframe;if(!e)return;const t=this._computeSandboxTokens();e.setAttribute("sandbox",t),this._log("sandbox",t)}_computeSandboxTokens(){const e=[...i];if(this._sandbox){String(this._sandbox).split(/\s+/).filter(Boolean).forEach(t=>{n.includes(t)&&!e.includes(t)&&e.push(t),a.includes(t)&&this.dispatchEvent(new CustomEvent("security-violation",{detail:{type:"blocked-sandbox-token",token:t,element:this}}))})}return e.join(" ")}_updateIframeSrc(){const e=this._iframe;if(e){if(this._bridgeReady=!1,this._graphqlHandler.reset(),this._currentState=r,this._updateContainerState(),e.removeAttribute("src"),e.removeAttribute("srcdoc"),this._src)e.setAttribute("src",this._src);else if(this._srcdoc)try{e.setAttribute("srcdoc",this._srcdoc)}catch{e.setAttribute("src","about:blank")}e.onload=this._handleIframeLoad,e.onerror=this._handleIframeError,this._log("updateIframeSrc",this._src?"src":this._srcdoc?"srcdoc":"blank")}}_handleIframeLoad=()=>{this.dispatchEvent(new CustomEvent("iframe-loaded",{detail:{element:this},bubbles:!0})),this._log("iframe-loaded"),this._readinessTimeout=setTimeout(()=>{this._currentState!==l&&(this.dispatchEvent(new CustomEvent("widget-readiness-warning",{detail:{element:this,message:"Widget may not be using Bridge for readiness signaling"},bubbles:!0})),this._log("widget-readiness-warning"))},3e3)};_handleIframeError=e=>{this.dispatchEvent(new CustomEvent("widget-error",{detail:{error:e,element:this}}))};_postToIframe(e,t){const s=this._iframe?.contentWindow;if(s)try{const i=`salesforce-${e}`;s.postMessage({type:i,data:t,id:this._shellInstanceId},"*"),this._log("postMessage",i,t)}catch(e){this._log("postMessage error",e instanceof Error?e.message:String(e))}}_collectDataAttributes(){const e={};for(let t=0;t<this.attributes.length;t++){const s=this.attributes[t];if(s.name.startsWith("data-")){e[s.name.replace(/^data-/,"").replace(/-([a-z])/g,(e,t)=>t.toUpperCase())]=s.value}}return e}_sendInitialTheme(){const e=getComputedStyle(this),t={};for(let s=0;s<e.length;s++){const i=e[s];if(i.startsWith("--")){const s=e.getPropertyValue(i).trim();s&&(t[i]=s)}}this._lastThemeData=t,this._bridgeReady?(this._postToIframe("theme",t),this._hasSentTheme=!0,this._log("send theme",t)):this._log("queue theme until bridge ready",t)}_sendInitialData(){this._lastThemeData&&Object.keys(this._lastThemeData).length&&(this._postToIframe("theme",this._lastThemeData),this._hasSentTheme=!0,this._log("send theme (initial)",this._lastThemeData));const e=this._collectDataAttributes();this._lastPayloadData={...e},this._postToIframe("data",this._lastPayloadData),this._hasSentData=!0,this._log("send data (initial)",this._lastPayloadData)}}return window.customElements.get("lwc-shell")||window.customElements.define("lwc-shell",o),e.InternalHostLwcShell=o,e.default=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},"undefined"!=typeof lightningGraphql?lightningGraphql:{});
+/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.7 (2026-06-16) */
+var LwcShell=function(e){"use strict";const t=["allow-scripts","allow-pointer-lock","allow-same-origin"],s=["allow-downloads","allow-forms","allow-modals"],i=["allow-top-navigation","allow-popups"],n="state-loading",a="state-loaded";class r extends HTMLElement{_shadow;_iframe=null;_container=null;_currentState=n;_readinessTimeout=null;_isFullscreen=!1;_preFullscreenHeight="";_lastThemeData={};_lastPayloadData={};_bridgeReady=!1;_shellInstanceId=function(){return Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(36)}();_hasSentTheme=!1;_hasSentData=!1;_src=null;_srcdoc=null;_sandbox=null;_title="Embedded widget";_view="compact";_debugEnabled=!0;static get observedAttributes(){return["src","srcdoc","sandbox","title","view","debug"]}constructor(){super(),this._shadow=this.attachShadow({mode:"closed"})}connectedCallback(){this._renderInitial(),this._setupMessageListener(),this._log("connectedCallback")}disconnectedCallback(){window.removeEventListener("message",this._handleMessage),this._readinessTimeout&&(clearTimeout(this._readinessTimeout),this._readinessTimeout=null),this._log("disconnectedCallback")}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"src":this.src=s;break;case"srcdoc":this.srcdoc=s;break;case"sandbox":this.sandbox=s;break;case"title":this.title=s;break;case"view":this.view=s;break;case"debug":this.debug=null!==s}}get src(){return this._src}set src(e){const t=e||null;this._src!==t&&(this._src=t,null!==t?this.setAttribute("src",t):this.removeAttribute("src"),this._updateIframeSrc())}get srcdoc(){return this._srcdoc}set srcdoc(e){const t=e||null;this._srcdoc!==t&&(this._srcdoc=t,null!==t?this.setAttribute("srcdoc",t):this.removeAttribute("srcdoc"),this._updateIframeSrc())}get sandbox(){return this._sandbox}set sandbox(e){const t=e||null;this._sandbox!==t&&(this._sandbox=t,null!==t?this.setAttribute("sandbox",t):this.removeAttribute("sandbox"),this._applySandbox())}get title(){return this._title}set title(e){const t=e||"Embedded widget";this._title!==t&&(this._title=t,this.setAttribute("title",t),this._updateTitle())}get view(){return this._view}set view(e){const t="full"===e?"full":"compact";this._view!==t&&(this._view=t,this.setAttribute("view",t),this._updateViewDOM())}get debug(){return this._debugEnabled}set debug(e){const t=!!e;this._debugEnabled!==t&&(this._debugEnabled=t,t?this.setAttribute("debug",""):this.removeAttribute("debug"))}updateData(e){if(!e||"object"!=typeof e)return;Object.entries(e).forEach(([e,t])=>{const s=`data-${String(e).replace(/[A-Z]/g,"-$&").toLowerCase()}`;this.setAttribute(s,String(t))});const t=this._collectDataAttributes();this._lastPayloadData=t,this._bridgeReady?(this._postToIframe("data",t),this._hasSentData=!0,this._log("send data",t)):this._log("queue data until bridge ready",t)}refreshTheme(){this._sendInitialTheme()}get _isFullView(){return"full"===this._view}get _frameClass(){return this._isFullView?"frame frameFull":"frame"}_log(...e){this._debugEnabled&&console.log("[InternalHostLwcShell]",JSON.stringify(e,null,2))}_renderInitial(){const e=this._shadow;e.innerHTML=`\n            <style>\n:host {\n    display: block;\n    position: relative;\n    height: 100%;\n    overflow: auto;\n    box-sizing: border-box;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.frame {\n    visibility: hidden;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border: none;\n}\n\n.container[data-state='state-loaded'] .frame {\n    visibility: visible;\n}\n\n/* Fullscreen overlay */\n.overlayBackdrop {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100vh;\n    z-index: 9998;\n    background: rgba(0, 0, 0, 0.8);\n    backdrop-filter: blur(4px);\n}\n\n.overlayClose {\n    position: fixed;\n    top: 24px;\n    right: 24px;\n    z-index: 9999;\n    width: 32px;\n    height: 32px;\n    background: rgba(0, 0, 0, 0.7);\n    color: #fff;\n    border-radius: 50%;\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n}\n\n.frameFull {\n    position: fixed;\n    inset: 0;\n    width: 90vw;\n    height: 90vh !important;\n    margin: 5vh 5vw;\n    z-index: 10000;\n    background: #fff;\n    border-radius: 8px;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n}\n</style>\n            <div class="container" data-state="${this._currentState}">\n                <iframe class="${this._frameClass}" title="${this._title}"></iframe>\n            </div>\n        `,this._container=e.querySelector(".container"),this._iframe=e.querySelector("iframe"),this._container.addEventListener("click",()=>this._handleContainerClick()),this._applySandbox(),this._updateIframeSrc(),this._sendInitialTheme(),this._log("renderInitial: iframe ready")}_updateContainerState(){this._container&&this._container.setAttribute("data-state",this._currentState)}_updateTitle(){this._iframe&&this._iframe.setAttribute("title",this._title),this._log("title",this._title)}_updateViewDOM(){if(this._iframe&&(this._iframe.className=this._frameClass),!this._container)return;const e=this._container.querySelector(".overlayBackdrop"),t=this._container.querySelector(".overlayClose");if(e&&e.remove(),t&&t.remove(),this._isFullView){const e=document.createElement("div");e.className="overlayBackdrop",e.setAttribute("aria-hidden","true");const t=document.createElement("button");t.className="overlayClose",t.type="button",t.setAttribute("aria-label","Close fullscreen"),t.textContent="✕",t.addEventListener("click",this._exitFullscreen),this._container.appendChild(e),this._container.appendChild(t)}}_setState(e){this._currentState=e,this._updateContainerState(),e===a&&this._sendInitialData()}_setupMessageListener(){window.addEventListener("message",this._handleMessage)}_handleMessage=e=>{const t=this._iframe?.contentWindow;if(e.source!==t)return;const s=e.data||{},{type:i,data:n,id:a}=s;if(a?a===this._shellInstanceId:"bridge-ready"===i)if(this._log("receive",i,n),"bridge-event"===i){const{eventType:e,detail:t}=n||{};if(this._log("bridge-event",e,t),"resize"===e)this._handleResize(t);else{if("widget-ready"!==e)throw new RangeError(`Invalid bridge event ${e}`);this._handleWidgetReady()}}else if("custom-event"===i){const{eventType:e,detail:t}=n||{};if(this._log("custom-event",e,t),"fullscreen-request"===e){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0}))&&this._handleFullscreenRequest()}else this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0,composed:!0}))}else"bridge-ready"===i?this._handleBridgeReady():"bridge-error"===i&&this._handleBridgeError(n)};_handleResize({height:e}){const t=new CustomEvent("resize",{detail:{height:e},cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||this._isFullscreen||"number"!=typeof e||!Number.isFinite(e)||(this._iframe&&(this._iframe.style.height=e+"px"),this._log("applied resize",e))}_handleWidgetReady(){this._readinessTimeout&&(clearTimeout(this._readinessTimeout),this._readinessTimeout=null),this.dispatchEvent(new CustomEvent("widget-ready",{bubbles:!0})),this._log("widget-ready")}_handleFullscreenRequest(){this._isFullscreen||this._enterFullscreen()}_enterFullscreen(){this._isFullscreen=!0,this._preFullscreenHeight=this._iframe?.style.height??"",this._view="full",this._updateViewDOM(),this._iframe&&(this._iframe.style.height="100%"),this.updateData({view:"full"}),this.dispatchEvent(new CustomEvent("fullscreen-entered",{detail:{element:this},bubbles:!0})),this._log("enter fullscreen")}_exitFullscreen=()=>{this._isFullscreen=!1,this._view="compact",this._updateViewDOM(),this._iframe&&(this._iframe.style.height=this._preFullscreenHeight),this.updateData({view:"compact"}),this.dispatchEvent(new CustomEvent("fullscreen-exited",{detail:{element:this},bubbles:!0})),this._log("exit fullscreen")};_handleBridgeReady(){this._bridgeReady=!0,this._postToIframe("shell-ready"),this._setState(a)}_handleBridgeError(e){this.dispatchEvent(new CustomEvent("widget-bridge-error",{detail:e})),this._log("bridge-error",e)}_handleContainerClick(){}_applySandbox(){const e=this._iframe;if(!e)return;const t=this._computeSandboxTokens();e.setAttribute("sandbox",t),this._log("sandbox",t)}_computeSandboxTokens(){const e=[...t];if(this._sandbox){String(this._sandbox).split(/\s+/).filter(Boolean).forEach(t=>{s.includes(t)&&!e.includes(t)&&e.push(t),i.includes(t)&&this.dispatchEvent(new CustomEvent("security-violation",{detail:{type:"blocked-sandbox-token",token:t,element:this}}))})}return e.join(" ")}_updateIframeSrc(){const e=this._iframe;if(e){if(this._bridgeReady=!1,this._currentState=n,this._updateContainerState(),e.removeAttribute("src"),e.removeAttribute("srcdoc"),this._src)e.setAttribute("src",this._src);else if(this._srcdoc)try{e.setAttribute("srcdoc",this._srcdoc)}catch{e.setAttribute("src","about:blank")}e.onload=this._handleIframeLoad,e.onerror=this._handleIframeError,this._log("updateIframeSrc",this._src?"src":this._srcdoc?"srcdoc":"blank")}}_handleIframeLoad=()=>{this.dispatchEvent(new CustomEvent("iframe-loaded",{detail:{element:this},bubbles:!0})),this._log("iframe-loaded"),this._readinessTimeout=setTimeout(()=>{this._currentState!==a&&(this.dispatchEvent(new CustomEvent("widget-readiness-warning",{detail:{element:this,message:"Widget may not be using Bridge for readiness signaling"},bubbles:!0})),this._log("widget-readiness-warning"))},3e3)};_handleIframeError=e=>{this.dispatchEvent(new CustomEvent("widget-error",{detail:{error:e,element:this}}))};_postToIframe(e,t){const s=this._iframe?.contentWindow;if(s)try{const i=`salesforce-${e}`;s.postMessage({type:i,data:t,id:this._shellInstanceId},"*"),this._log("postMessage",i,t)}catch(e){this._log("postMessage error",e instanceof Error?e.message:String(e))}}_collectDataAttributes(){const e={};for(let t=0;t<this.attributes.length;t++){const s=this.attributes[t];if(s.name.startsWith("data-")){e[s.name.replace(/^data-/,"").replace(/-([a-z])/g,(e,t)=>t.toUpperCase())]=s.value}}return e}_sendInitialTheme(){const e=getComputedStyle(this),t={};for(let s=0;s<e.length;s++){const i=e[s];if(i.startsWith("--")){const s=e.getPropertyValue(i).trim();s&&(t[i]=s)}}this._lastThemeData=t,this._bridgeReady?(this._postToIframe("theme",t),this._hasSentTheme=!0,this._log("send theme",t)):this._log("queue theme until bridge ready",t)}_sendInitialData(){this._lastThemeData&&Object.keys(this._lastThemeData).length&&(this._postToIframe("theme",this._lastThemeData),this._hasSentTheme=!0,this._log("send theme (initial)",this._lastThemeData));const e=this._collectDataAttributes();this._lastPayloadData={...e},this._postToIframe("data",this._lastPayloadData),this._hasSentData=!0,this._log("send data (initial)",this._lastPayloadData)}}return window.customElements.get("lwc-shell")||window.customElements.define("lwc-shell",r),e.InternalHostLwcShell=r,e.default=r,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
 //# sourceMappingURL=index.iife.prod.js.map

package/index.d.ts

@@ -40,7 +40,6 @@ declare class InternalHostLwcShell extends HTMLElement {
     private _title;
     private _view;
     private _debugEnabled;
-    private _graphqlHandler;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforce/experimental-mfe-lwc-shell",
-    "version": "2.2.1-rc.1",
+    "version": "2.2.1-rc.7",
     "private": false,
     "description": "A standard Web Component shell for UI Embedding",
     "license": "SEE LICENSE IN LICENSE.txt",
@@ -25,9 +25,13 @@
         "test": "jest",
         "clean": "rimraf dist"
     },
-    "devDependencies": {},
+    "devDependencies": {
+        "utils": "2.2.1-rc.7"
+    },
     "files": [
         "dist/",
+        "!dist/__tests__/",
+        "!dist/__mocks__/",
         "!dist/*.test.js",
         "!dist/*.map",
         "scripts/",

package/dist/graphqlBridgeHandler.d.ts

@@ -1,29 +0,0 @@
-export interface GraphQLBridgeRequest {
-    requestId: string;
-    query: string;
-    variables?: Record<string, unknown>;
-}
-export interface GraphQLBridgeResponse {
-    requestId: string;
-    ok: boolean;
-    result?: {
-        data: unknown;
-        errors?: unknown[];
-    };
-    error?: {
-        message: string;
-    };
-}
-export declare function executeGraphQL(query: string, variables?: Record<string, unknown>): Promise<{
-    data: unknown;
-    errors?: unknown[];
-}>;
-export declare class GraphQLBridgeHandler {
-    #private;
-    constructor(sendResponse: (data: GraphQLBridgeResponse) => void, maxConcurrent?: number, maxQueueSize?: number);
-    static isValidRequest(data: unknown): data is GraphQLBridgeRequest;
-    rejectInvalidRequest(data: unknown): void;
-    handleRequest({ requestId, query, variables }: GraphQLBridgeRequest): Promise<void>;
-    reset(): void;
-}
-//# sourceMappingURL=graphqlBridgeHandler.d.ts.map