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

package/dist/InternalHostLwcShell.d.ts

@@ -40,8 +40,7 @@ export declare class InternalHostLwcShell extends HTMLElement {
     private _title;
     private _view;
     private _debugEnabled;
-    private _pendingGraphQLCount;
-    private static readonly MAX_CONCURRENT_GRAPHQL;
+    private _graphqlHandler;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -83,7 +82,6 @@ export declare class InternalHostLwcShell extends HTMLElement {
     private _exitFullscreen;
     private _handleBridgeReady;
     private _handleBridgeError;
-    private _handleGraphQLRequest;
     private _handleContainerClick;
     private _applySandbox;
     private _computeSandboxTokens;

package/dist/graphqlBridgeHandler.d.ts

@@ -0,0 +1,29 @@
+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

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-/*! @salesforce/experimental-mfe-lwc-shell v2.2.0-rc.2 (2026-03-20) */
+/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.1 (2026-04-09) */
 import { gql, unstable_graphql_imperative } from 'lightning/graphql';
 
 /**
@@ -28,6 +28,108 @@ async function executeGraphQL(query, variables) {
     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
@@ -51,6 +153,8 @@ async function executeGraphQL(query, variables) {
  *
  * 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 OPTIONAL_TOKENS = ["allow-downloads", "allow-forms", "allow-modals"];
 const BLOCKED_TOKENS = ["allow-same-origin", "allow-top-navigation", "allow-popups"];
@@ -147,14 +251,16 @@ class InternalHostLwcShell extends HTMLElement {
     _title = "Embedded widget";
     _view = "compact";
     _debugEnabled = true;
-    _pendingGraphQLCount = 0;
-    static MAX_CONCURRENT_GRAPHQL = 10;
+    _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();
@@ -163,6 +269,7 @@ class InternalHostLwcShell extends HTMLElement {
     }
     disconnectedCallback() {
         window.removeEventListener("message", this._handleMessage);
+        this._graphqlHandler.reset();
         if (this._readinessTimeout) {
             clearTimeout(this._readinessTimeout);
             this._readinessTimeout = null;
@@ -423,12 +530,17 @@ class InternalHostLwcShell extends HTMLElement {
                     this._handleFullscreenRequest();
                 }
             }
-            else if (eventType === "trackdirtystate") {
+            else {
                 this.dispatchEvent(new CustomEvent(eventType, { detail, bubbles: true, cancelable: true, composed: true }));
             }
         }
         else if (type === "bridge-graphql-request") {
-            this._handleGraphQLRequest(data);
+            if (GraphQLBridgeHandler.isValidRequest(data)) {
+                this._graphqlHandler.handleRequest(data);
+            }
+            else {
+                this._graphqlHandler.rejectInvalidRequest(data);
+            }
         }
         else if (type === "bridge-ready") {
             this._handleBridgeReady();
@@ -498,57 +610,6 @@ class InternalHostLwcShell extends HTMLElement {
         this.dispatchEvent(new CustomEvent("widget-bridge-error", { detail: errorData }));
         this._log("bridge-error", errorData);
     }
-    async _handleGraphQLRequest(data) {
-        if (typeof data?.requestId !== "string") {
-            this._log("_handleGraphQLRequest: invalid request data", data);
-            this._postToIframe("bridge-graphql-response", {
-                requestId: data?.requestId,
-                ok: false,
-                error: { message: "Invalid GraphQL request data" },
-            });
-            return;
-        }
-        const { requestId, query, variables } = data;
-        if (typeof query !== "string") {
-            this._postToIframe("bridge-graphql-response", {
-                requestId,
-                ok: false,
-                error: { message: "Invalid GraphQL query: query must be a string" },
-            });
-            return;
-        }
-        if (variables != null && (typeof variables !== "object" || Array.isArray(variables))) {
-            this._postToIframe("bridge-graphql-response", {
-                requestId,
-                ok: false,
-                error: { message: "Invalid GraphQL variables: must be a plain object" },
-            });
-            return;
-        }
-        if (this._pendingGraphQLCount >= InternalHostLwcShell.MAX_CONCURRENT_GRAPHQL) {
-            this._postToIframe("bridge-graphql-response", {
-                requestId,
-                ok: false,
-                error: { message: "Too many concurrent GraphQL requests" },
-            });
-            return;
-        }
-        this._pendingGraphQLCount++;
-        try {
-            const result = await executeGraphQL(query, variables);
-            this._postToIframe("bridge-graphql-response", { requestId, ok: true, result });
-        }
-        catch (err) {
-            this._postToIframe("bridge-graphql-response", {
-                requestId,
-                ok: false,
-                error: { message: err?.message || "GraphQL request failed" },
-            });
-        }
-        finally {
-            this._pendingGraphQLCount--;
-        }
-    }
     _handleContainerClick() {
         // placeholder
     }
@@ -586,6 +647,7 @@ 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,4 +1,4 @@
-/*! @salesforce/experimental-mfe-lwc-shell v2.2.0-rc.2 (2026-03-20) */
+/*! @salesforce/experimental-mfe-lwc-shell v2.2.1-rc.1 (2026-04-09) */
 var LwcShell = (function (exports, graphql) {
     'use strict';
 
@@ -29,6 +29,108 @@ var LwcShell = (function (exports, graphql) {
         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
@@ -52,6 +154,8 @@ 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 OPTIONAL_TOKENS = ["allow-downloads", "allow-forms", "allow-modals"];
     const BLOCKED_TOKENS = ["allow-same-origin", "allow-top-navigation", "allow-popups"];
@@ -148,14 +252,16 @@ var LwcShell = (function (exports, graphql) {
         _title = "Embedded widget";
         _view = "compact";
         _debugEnabled = true;
-        _pendingGraphQLCount = 0;
-        static MAX_CONCURRENT_GRAPHQL = 10;
+        _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();
@@ -164,6 +270,7 @@ var LwcShell = (function (exports, graphql) {
         }
         disconnectedCallback() {
             window.removeEventListener("message", this._handleMessage);
+            this._graphqlHandler.reset();
             if (this._readinessTimeout) {
                 clearTimeout(this._readinessTimeout);
                 this._readinessTimeout = null;
@@ -424,12 +531,17 @@ var LwcShell = (function (exports, graphql) {
                         this._handleFullscreenRequest();
                     }
                 }
-                else if (eventType === "trackdirtystate") {
+                else {
                     this.dispatchEvent(new CustomEvent(eventType, { detail, bubbles: true, cancelable: true, composed: true }));
                 }
             }
             else if (type === "bridge-graphql-request") {
-                this._handleGraphQLRequest(data);
+                if (GraphQLBridgeHandler.isValidRequest(data)) {
+                    this._graphqlHandler.handleRequest(data);
+                }
+                else {
+                    this._graphqlHandler.rejectInvalidRequest(data);
+                }
             }
             else if (type === "bridge-ready") {
                 this._handleBridgeReady();
@@ -499,57 +611,6 @@ var LwcShell = (function (exports, graphql) {
             this.dispatchEvent(new CustomEvent("widget-bridge-error", { detail: errorData }));
             this._log("bridge-error", errorData);
         }
-        async _handleGraphQLRequest(data) {
-            if (typeof data?.requestId !== "string") {
-                this._log("_handleGraphQLRequest: invalid request data", data);
-                this._postToIframe("bridge-graphql-response", {
-                    requestId: data?.requestId,
-                    ok: false,
-                    error: { message: "Invalid GraphQL request data" },
-                });
-                return;
-            }
-            const { requestId, query, variables } = data;
-            if (typeof query !== "string") {
-                this._postToIframe("bridge-graphql-response", {
-                    requestId,
-                    ok: false,
-                    error: { message: "Invalid GraphQL query: query must be a string" },
-                });
-                return;
-            }
-            if (variables != null && (typeof variables !== "object" || Array.isArray(variables))) {
-                this._postToIframe("bridge-graphql-response", {
-                    requestId,
-                    ok: false,
-                    error: { message: "Invalid GraphQL variables: must be a plain object" },
-                });
-                return;
-            }
-            if (this._pendingGraphQLCount >= InternalHostLwcShell.MAX_CONCURRENT_GRAPHQL) {
-                this._postToIframe("bridge-graphql-response", {
-                    requestId,
-                    ok: false,
-                    error: { message: "Too many concurrent GraphQL requests" },
-                });
-                return;
-            }
-            this._pendingGraphQLCount++;
-            try {
-                const result = await executeGraphQL(query, variables);
-                this._postToIframe("bridge-graphql-response", { requestId, ok: true, result });
-            }
-            catch (err) {
-                this._postToIframe("bridge-graphql-response", {
-                    requestId,
-                    ok: false,
-                    error: { message: err?.message || "GraphQL request failed" },
-                });
-            }
-            finally {
-                this._pendingGraphQLCount--;
-            }
-        }
         _handleContainerClick() {
             // placeholder
         }
@@ -587,6 +648,7 @@ var LwcShell = (function (exports, graphql) {
                 return;
             // reset tracking
             this._bridgeReady = false;
+            this._graphqlHandler.reset();
             this._currentState = STATES.LOADING;
             this._updateContainerState();
             // clear existing

package/dist/index.iife.prod.js

@@ -1,5 +1,5 @@
-/*! @salesforce/experimental-mfe-lwc-shell v2.2.0-rc.2 (2026-03-20) */
-var LwcShell=function(e,t){"use strict";const s=["allow-scripts","allow-pointer-lock"],i=["allow-downloads","allow-forms","allow-modals"],a=["allow-same-origin","allow-top-navigation","allow-popups"],n="state-loading",r="state-loaded";class l 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;_pendingGraphQLCount=0;static MAX_CONCURRENT_GRAPHQL=10;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                 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===r&&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:a,id:n}=s;if(n?n===this._shellInstanceId:"bridge-ready"===i)if(this._log("receive",i,a),"bridge-event"===i){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"===i){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"trackdirtystate"===e&&this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0,composed:!0}))}else"bridge-graphql-request"===i?this._handleGraphQLRequest(a):"bridge-ready"===i?this._handleBridgeReady():"bridge-error"===i&&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(r)}_handleBridgeError(e){this.dispatchEvent(new CustomEvent("widget-bridge-error",{detail:e})),this._log("bridge-error",e)}async _handleGraphQLRequest(e){if("string"!=typeof e?.requestId)return this._log("_handleGraphQLRequest: invalid request data",e),void this._postToIframe("bridge-graphql-response",{requestId:e?.requestId,ok:!1,error:{message:"Invalid GraphQL request data"}});const{requestId:s,query:i,variables:a}=e;if("string"==typeof i)if(null==a||"object"==typeof a&&!Array.isArray(a))if(this._pendingGraphQLCount>=l.MAX_CONCURRENT_GRAPHQL)this._postToIframe("bridge-graphql-response",{requestId:s,ok:!1,error:{message:"Too many concurrent GraphQL requests"}});else{this._pendingGraphQLCount++;try{const e=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`
+/*! @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}
-    `,a=await t.unstable_graphql_imperative({query:i,variables:s});return{data:a?.data,errors:a?.errors}}(i,a);this._postToIframe("bridge-graphql-response",{requestId:s,ok:!0,result:e})}catch(e){this._postToIframe("bridge-graphql-response",{requestId:s,ok:!1,error:{message:e?.message||"GraphQL request failed"}})}finally{this._pendingGraphQLCount--}}else this._postToIframe("bridge-graphql-response",{requestId:s,ok:!1,error:{message:"Invalid GraphQL variables: must be a plain object"}});else this._postToIframe("bridge-graphql-response",{requestId:s,ok:!1,error:{message:"Invalid GraphQL query: query must be a string"}})}_handleContainerClick(){}_applySandbox(){const e=this._iframe;if(!e)return;const t=this._computeSandboxTokens();e.setAttribute("sandbox",t),this._log("sandbox",t)}_computeSandboxTokens(){const e=[...s];if(this._sandbox){String(this._sandbox).split(/\s+/).filter(Boolean).forEach(t=>{i.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._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!==r&&(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",l),e.InternalHostLwcShell=l,e.default=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({},"undefined"!=typeof lightningGraphql?lightningGraphql:{});
+    `,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:{});
 //# sourceMappingURL=index.iife.prod.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforce/experimental-mfe-lwc-shell",
-    "version": "2.2.0",
+    "version": "2.2.1-rc.1",
     "private": false,
     "description": "A standard Web Component shell for UI Embedding",
     "license": "SEE LICENSE IN LICENSE.txt",

package/dist/graphqlHandler.d.ts

@@ -1,5 +0,0 @@
-export declare function executeGraphQL(query: string, variables?: Record<string, any>): Promise<{
-    data: unknown;
-    errors?: unknown[];
-}>;
-//# sourceMappingURL=graphqlHandler.d.ts.map

package/dist/lwc/dirtyStateModal/dirtyStateModal.html

@@ -1,33 +0,0 @@
-<!--
-    dirtyStateModal template — shipped with @lightning-out/lwc-shell.
-
-    This template is entirely generic / config-driven:
-    - Header label, body description, and footer buttons are all bound to
-      the `modalFields` @api property — nothing is hard-coded here.
-    - The concrete values (e.g. "Unsaved Changes", "Discard Changes" button)
-      are defined in InternalHostLwcShell.ts inside the
-      `[DoCloseConfirmation]()` method and passed at open-time.
-    - To change what the modal displays, update the config object in
-      InternalHostLwcShell.ts, NOT this template.
-
-    Customers: copy this file (along with .js and .js-meta.xml) into your
-    SFDX project's lwc/dirtyStateModal/ folder and deploy to your org.
--->
-<template>
-    <lightning-modal-header label={modalFields.label}></lightning-modal-header>
-    <lightning-modal-body>
-        <p>{modalFields.description}</p>
-    </lightning-modal-body>
-    <lightning-modal-footer>
-        <template for:each={modalFields.buttons} for:item="button">
-            <lightning-button
-                key={button.buttonKey}
-                label={button.buttonLabel}
-                variant={button.buttonVariant}
-                data-key={button.buttonKey}
-                onclick={handleButtonClick}
-                class="slds-m-right_x-small"
-            ></lightning-button>
-        </template>
-    </lightning-modal-footer>
-</template>

package/dist/lwc/dirtyStateModal/dirtyStateModal.js

@@ -1,82 +0,0 @@
-/**
- * dirtyStateModal — Generic, config-driven LWC modal shipped with
- * @lightning-out/lwc-shell.
- *
- * IMPORTANT: This modal is intentionally **generic**. It does NOT hard-code
- * any specific labels, descriptions, or button definitions. Instead, it
- * receives all of its display configuration through the `modalFields` @api
- * property at open-time. This makes it reusable for any confirmation
- * scenario — the caller decides what the modal says and which buttons it
- * shows.
- *
- * The **concrete configuration** for the current lwc-shell dirty-state
- * flow lives in `InternalHostLwcShell.ts` inside the
- * `[DoCloseConfirmation]()` method, where the `dirtStateModalConfig` object
- * is built and passed to `DirtyStateModal.open(dirtStateModalConfig)`.
- * That config currently specifies:
- *   - label: "Unsaved Changes"
- *   - description: "You have unsaved changes. If you leave, your changes
- *     will be lost."
- *   - buttons: "Cancel" and "Discard Changes" (brand variant)
- *   - size: "small"
- *
- * If you need to change the wording, add/remove buttons, or adjust the
- * modal size, update the config object in `InternalHostLwcShell.ts` —
- * **not** in this component.
- *
- * ---
- * Deployment: customers must copy this component from the lwc-shell
- * package's `dist/lwc/dirtyStateModal/` folder into their own SFDX
- * project and deploy it to their Salesforce org.
- *
- * Usage in wrapper LWC:
- *   import DirtyStateModal from 'c/dirtyStateModal';
- *   shell.dirtyStateModal = DirtyStateModal;
- */
-import LightningModal from "lightning/modal";
-import { api } from "lwc";
-
-export default class DirtyStateModal extends LightningModal {
-    /**
-     * Generic configuration object — NOT owned by this component.
-     *
-     * The actual values are supplied by the caller (InternalHostLwcShell)
-     * at open-time via `DirtyStateModal.open({ modalFields: { ... } })`.
-     * The defaults below are minimal fallbacks; the real config (label,
-     * description, full button set) is defined in InternalHostLwcShell's
-     * `[DoCloseConfirmation]()` method.
-     *
-     * Shape:
-     *   {
-     *     label:       string,          // Modal header text
-     *     description: string,          // Modal body text
-     *     buttons: [                    // Footer buttons (rendered dynamically)
-     *       {
-     *         buttonKey:     string,    // Unique key returned on click
-     *         buttonLabel:   string,    // Visible label
-     *         buttonVariant: string     // Optional SLDS variant (e.g. 'brand')
-     *       }
-     *     ]
-     *   }
-     */
-    @api modalFields = {
-        label: "Unsaved Changes",
-        description: "You have unsaved changes.",
-        buttons: [
-            {
-                buttonKey: "cancel",
-                buttonLabel: "Cancel",
-            },
-        ],
-    };
-
-    /**
-     * Generic button handler — closes the modal and returns the clicked
-     * button's `buttonKey` to the caller's `.open()` promise so the caller
-     * (InternalHostLwcShell) can decide what action to take.
-     */
-    handleButtonClick(event) {
-        const key = event.target.dataset.key;
-        this.close(key);
-    }
-}

package/dist/lwc/dirtyStateModal/dirtyStateModal.js-meta.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>64.0</apiVersion>
-    <isExposed>false</isExposed>
-</LightningComponentBundle>

package/dist/utils/dirtyStateModal.d.ts

@@ -1,23 +0,0 @@
-import { DoCloseConfirmation, Guid } from "./symbols";
-/**
- * Symbol-keyed contract for components that self-manage their dirty state.
- *
- * - `DoCloseConfirmation` — The component **must** define this as a function
- *   that returns a `Promise` resolving to one of:
- *     - `'SUCCESS'` – dirty state resolved, tab closure should continue.
- *     - `'CANCEL'`  – the user cancelled the operation.
- *     - `'ERROR'`   – a problem occurred resolving the dirty state.
- *
- *   If the promise resolves to `'SUCCESS'`, the component **must** have
- *   already dispatched a `'privatelightningselfmanageddirtystatechanged'`
- *   event with `isUnsaved: false` to clear its dirty state.
- *
- * - `Guid` — Optionally, the component can define this as a property
- *   containing a globally unique string. If undefined, a GUID will be
- *   generated automatically.
- */
-export declare const SelfManagedDirtyComponent: Readonly<{
-    DoCloseConfirmation: typeof DoCloseConfirmation;
-    Guid: typeof Guid;
-}>;
-//# sourceMappingURL=dirtyStateModal.d.ts.map

package/dist/utils/dirtyStateModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dirtyStateModal.d.ts","sourceRoot":"","sources":["../../src/utils/dirtyStateModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAC;IAC7C,mBAAmB,EAAE,OAAO,mBAAmB,CAAC;IAChD,IAAI,EAAE,OAAO,IAAI,CAAC;CACrB,CAGS,CAAC"}

package/dist/utils/index.d.ts

@@ -1,13 +0,0 @@
-/**
- * Utils barrel — re-exports all utility modules used by lwc-shell.
- *
- * This folder is designed to grow as new features are added (e.g. additional
- * state managers, analytics hooks). Each feature should get its own module
- * and be re-exported from this index.
- *
- * Currently provides:
- * - Dirty-state management symbols and helpers (`dirtyStateModal`, `symbols`).
- */
-export { SelfManagedDirtyComponent } from "./dirtyStateModal";
-export { DoCloseConfirmation, Guid } from "./symbols";
-//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}

package/dist/utils/symbols.d.ts

@@ -1,18 +0,0 @@
-/**
- * Symbols used as property / method keys for the dirty-state contract.
- *
- * These symbols are attached to the host LWC component by `<lwc-shell>`
- * (via the `hostComponent` setter) so that Salesforce's tab-close flow can
- * invoke `DoCloseConfirmation` and identify the component by `Guid`.
- *
- * See `InternalHostLwcShell.hostComponent` setter for wiring details,
- * and the `SelfManagedDirtyComponent` object in `dirtyStateModal.ts` for
- * the full contract description.
- */
-export declare const Guid: unique symbol;
-export declare const DoCloseConfirmation: unique symbol;
-/**
- * Generic constructor type used by the mixin.
- */
-export type Constructor<T = HTMLElement> = new (...args: any[]) => T;
-//# sourceMappingURL=symbols.d.ts.map

package/dist/utils/symbols.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../src/utils/symbols.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,IAAI,EAAE,OAAO,MAAuB,CAAC;AAClD,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAAsC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,WAAW,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC"}