@salesforce/experimental-mfe-lwc-shell 2.2.0

package/dist/index.iife.prod.js

@@ -0,0 +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`
+        ${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:{});
+//# sourceMappingURL=index.iife.prod.js.map

package/dist/lwc/dirtyStateModal/dirtyStateModal.html

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

@@ -0,0 +1,82 @@
+/**
+ * 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

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * 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

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

@@ -0,0 +1,18 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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"}

package/index.d.ts

@@ -0,0 +1,97 @@
+/**
+ * InternalHostLwcShell
+ *
+ * A standard Web Component (custom element) that embeds an iframe-based widget
+ * with bridge communication, sandbox management, and fullscreen support.
+ *
+ * Registered as `<lwc-shell>`.
+ *
+ * Dirty-state tracking is handled via a simple `trackdirtystate`
+ * custom-event flow: the embedded widget dispatches `trackdirtystate`
+ * with `{ isDirty, instanceId, label }`, and this shell re-dispatches
+ * the event for the host LWC to observe.
+ *
+ * **How customers use this:**
+ * 1. The build produces `dist/index.esm.js` which bundles this class.
+ * 2. Customers copy that file into their SFDX project as an LWC entity
+ *    (e.g. `c/lwcShell`) and deploy it to their Salesforce org.
+ * 3. A wrapper LWC imports `'c/lwcShell'` and creates `<lwc-shell>`
+ *    imperatively via `document.createElement('lwc-shell')`.
+ *
+ * See the README and the `productRegistration` demo for a full recipe.
+ */
+declare class InternalHostLwcShell extends HTMLElement {
+    private _shadow;
+    private _iframe;
+    private _container;
+    private _currentState;
+    private _readinessTimeout;
+    private _isFullscreen;
+    private _preFullscreenHeight;
+    private _lastThemeData;
+    private _lastPayloadData;
+    private _bridgeReady;
+    private _shellInstanceId;
+    private _hasSentTheme;
+    private _hasSentData;
+    private _src;
+    private _srcdoc;
+    private _sandbox;
+    private _title;
+    private _view;
+    private _debugEnabled;
+    private _graphqlHandler;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get src(): string | null;
+    set src(v: string | null);
+    get srcdoc(): string | null;
+    set srcdoc(v: string | null);
+    get sandbox(): string | null;
+    set sandbox(v: string | null);
+    get title(): string;
+    set title(v: string | null);
+    get view(): string | null;
+    set view(v: string | null);
+    /**
+     * Controls debug logging. Toggle via:
+     * - HTML attribute: `<lwc-shell debug>`
+     * - Programmatically: `shell.debug = true`
+     */
+    get debug(): boolean;
+    set debug(v: boolean);
+    updateData(newData: Record<string, unknown>): void;
+    refreshTheme(): void;
+    private get _isFullView();
+    private get _frameClass();
+    private _log;
+    private _renderInitial;
+    private _updateContainerState;
+    private _updateTitle;
+    private _updateViewDOM;
+    private _setState;
+    private _setupMessageListener;
+    private _handleMessage;
+    private _handleResize;
+    private _handleWidgetReady;
+    private _handleFullscreenRequest;
+    private _enterFullscreen;
+    private _exitFullscreen;
+    private _handleBridgeReady;
+    private _handleBridgeError;
+    private _handleContainerClick;
+    private _applySandbox;
+    private _computeSandboxTokens;
+    private _updateIframeSrc;
+    private _handleIframeLoad;
+    private _handleIframeError;
+    private _postToIframe;
+    private _collectDataAttributes;
+    private _sendInitialTheme;
+    private _sendInitialData;
+}
+
+export { InternalHostLwcShell, InternalHostLwcShell as default };

package/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@salesforce/experimental-mfe-lwc-shell",
+    "version": "2.2.0",
+    "private": false,
+    "description": "A standard Web Component shell for UI Embedding",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "author": "Salesforce MFE Team",
+    "main": "dist/index.esm.js",
+    "module": "dist/index.esm.js",
+    "types": "index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./index.d.ts",
+            "import": "./dist/index.esm.js",
+            "require": "./dist/index.esm.js",
+            "default": "./dist/index.esm.js"
+        }
+    },
+    "bin": {
+        "lwc-shell-vendor-build": "./scripts/vendor-build.mjs"
+    },
+    "scripts": {
+        "build": "rollup -c",
+        "build:types": "tsc --emitDeclarationOnly",
+        "test": "jest",
+        "clean": "rimraf dist"
+    },
+    "devDependencies": {},
+    "files": [
+        "dist/",
+        "!dist/*.test.js",
+        "!dist/*.map",
+        "scripts/",
+        "index.d.ts",
+        "README.md",
+        "LICENSE.txt"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "sideEffects": true
+}

package/scripts/templates/vendor-banner.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+// Vendored from @salesforce/experimental-mfe-lwc-shell npm package

package/scripts/templates/vendor-meta.xml

@@ -0,0 +1,5 @@
+<?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/scripts/vendor-build.mjs

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+/**
+ * vendor-build.mjs
+ *
+ * Copies the pre-built @salesforce/experimental-mfe-lwc-shell ESM bundle into force-app
+ * as a vendor-prefixed LWC component ready for deployment:
+ *
+ *   dist/index.esm.js  → vendorLwcShell/vendorLwcShell.js
+ */
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { mkdir, readFile, writeFile } from 'fs/promises';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+const lwcShellDistDir = dirname(require.resolve('@salesforce/experimental-mfe-lwc-shell'));
+const lwcDest = 'force-app/main/default/lwc';
+
+const VENDOR_BANNER = await readFile(join(__dirname, 'templates', 'vendor-banner.js'), 'utf-8');
+const META_XML = await readFile(join(__dirname, 'templates', 'vendor-meta.xml'), 'utf-8');
+
+const vendorShellName = 'vendorLwcShell';
+const vendorShellDir = join(lwcDest, vendorShellName);
+await mkdir(vendorShellDir, { recursive: true });
+
+const esmSource = await readFile(join(lwcShellDistDir, 'index.esm.js'), 'utf-8');
+await writeFile(join(vendorShellDir, `${vendorShellName}.js`), VENDOR_BANNER + esmSource);
+await writeFile(join(vendorShellDir, `${vendorShellName}.js-meta.xml`), META_XML);
+
+console.log(
+    `\n` +
+    `Below LWC component is generated from @salesforce/experimental-mfe-lwc-shell.\n` +
+    `Please ensure to deploy it to your Salesforce org:\n` +
+    `  1. ${lwcDest}/${vendorShellName}\n`
+);