@genesislcap/foundation-layout 14.393.2 → 14.393.3-FUI-2471.2

package/dist/dts/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 export * from './main';
 export { LAYOUT_ICONS } from './styles';
-export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutRegistrationError, LayoutUsageError, LAYOUT_POPOUT_CONTAINER_CLASS, } from './utils';
+export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutRegistrationError, LayoutUsageError, LAYOUT_POPOUT_CONTAINER_CLASS, LAYOUT_POPOUT_CONTROL_KEY, } from './utils';
 export { registerFactory, getFactory, unregisterFactory } from './utils/factory-registry';

package/dist/esm/main/layout-main.js

@@ -11,7 +11,9 @@ import { AUTOSAVE_KEY, componentType, DEFAULT_RELOAD_BUFFER, getMissingArrayItem
 import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
 import { getFactory } from '../utils/factory-registry';
 import { logger } from '../utils/logger';
+import { FoundationLayoutPopoutController } from './layout-popout-controller';
 export { layoutStyles } from '../styles';
+FoundationLayoutPopoutController;
 /*
  * We only want to apply the global stylesheet required for golden layout
  * to work once, and only apply it if we actually use an instance of the
@@ -101,13 +103,14 @@ export class FoundationLayout extends FoundationElement {
          * has changed and know you potentially need to gate some of your lifecycle functionality.
          */
         this.lifecycleUpdateToken = undefined;
+        /** @internal */
+        this.popupMode = false;
         /**
          * Controls whether popout functionality is enabled on the layout. Defaults to disabled.
-         * Set this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.
+         * Pass an empty object `{}` to use default configurations, or a {@link LayoutPopoutConfig} object to further customise.
          * @beta
          */
         this.popoutConfig = undefined;
-        this.popupMode = false;
         /** @internal */
         _FoundationLayout__boundDragListener.set(this, undefined);
         /** @internal */
@@ -256,6 +259,7 @@ export class FoundationLayout extends FoundationElement {
      * @returns - latest version of {@link SerialisedLayout} describing the layout
      */
     getLayout() {
+        var _b, _c;
         const componentCollection = this.getLayoutComponents();
         componentCollection.forEach((items) => {
             if (!items.length)
@@ -276,7 +280,11 @@ export class FoundationLayout extends FoundationElement {
                 orderedStates,
             });
         });
-        return { v: '1', c: ResolvedLayoutConfig.minifyConfig(this.layout.saveLayout()) };
+        return {
+            v: '1',
+            c: ResolvedLayoutConfig.minifyConfig(this.layout.saveLayout()),
+            popouts: (_c = (_b = this.popoutController) === null || _b === void 0 ? void 0 : _b.getRegistry()) !== null && _c !== void 0 ? _c : {},
+        };
     }
     /**
      * If in a popout window from the dynamic layout, this function will run the flow to put the component in popout mode.
@@ -287,13 +295,19 @@ export class FoundationLayout extends FoundationElement {
      * If you set the `LAYOUT_POPOUT_CONTAINER_CLASS` on an element which is a DOM parent of the layout,
      * then if the layout goes into popout mode then it will place itself as the only child for the popout container you set.
      * It is likely you'll want to attach this class to your design system provider.
+     *
+     * @param autoloading - If true, this respects the {@link LayoutPopoutConfig.loadAutomatically} property.
+     * You might want to set this to false and call it manually if you're manually registering components to the layout in order to avoid race conditions.
      * @beta
      */
-    tryActivatePopoutMode() {
+    tryActivatePopoutMode(autoloading = false) {
+        var _b;
         if (!this.popupMode)
             return false;
+        if (autoloading && ((_b = this.popoutConfig) === null || _b === void 0 ? void 0 : _b.loadAutomatically) === false)
+            return;
         const popoutComponentRegistration = new URLSearchParams(window.location.search).get(LAYOUT_POPOUT_CONTROL_KEY);
-        const popoutConfig = {
+        const glPopoutConfig = {
             root: {
                 type: 'component',
                 componentType: popoutComponentRegistration,
@@ -303,7 +317,7 @@ export class FoundationLayout extends FoundationElement {
                 hasHeaders: false,
             },
         };
-        this.loadGLConfigAndSetup(popoutConfig);
+        this.loadGLConfigAndSetup(glPopoutConfig);
         const tryFindNewLayoutDOMLocation = (e) => {
             if (e.classList.contains(LAYOUT_POPOUT_CONTAINER_CLASS))
                 return e;
@@ -397,6 +411,7 @@ export class FoundationLayout extends FoundationElement {
      * @throws various errors if the layout string is malformed and cannot be parsed
      */
     loadLayout(layout, handleMissingItem = 'error', disableCache = false) {
+        var _b;
         const alreadyRegistered = this.registeredItems();
         const wantedRegistered = FoundationLayout.layoutRequiredRegistrations(layout);
         const missingRegisteredItems = getMissingArrayItems(wantedRegistered, alreadyRegistered);
@@ -408,6 +423,9 @@ export class FoundationLayout extends FoundationElement {
         const layoutConfig = LayoutConfig.fromResolved(ResolvedLayoutConfig.unminifyConfig(layout.c));
         if (disableCache)
             this.removeConfigCacheInformation(layoutConfig);
+        if (!this.popupMode && this.popoutController) {
+            this.popoutController.restorePopouts((_b = layout.popouts) !== null && _b !== void 0 ? _b : {}, this.uuid);
+        }
         if (missingRegisteredItems.length !== 0 && handleMissingItem === 'placeholder') {
             this.registerPlaceholdersAndSetClosable(layoutConfig, missingRegisteredItems);
         }
@@ -644,7 +662,7 @@ export class FoundationLayout extends FoundationElement {
                 this.hasFirstLoaded = true;
                 // Store the default layout config before attempting to load from storage
                 this.defaultLayoutConfig = JSON.parse(JSON.stringify(this.layoutConfig));
-                const res = this.tryLoadLayoutFromLocalStorage() || this.tryActivatePopoutMode();
+                const res = this.tryLoadLayoutFromLocalStorage() || this.tryActivatePopoutMode(true);
                 if (!res) {
                     this.loadGLConfigAndSetup(this.layoutConfig);
                 }
@@ -973,23 +991,22 @@ export class FoundationLayout extends FoundationElement {
         if (!this.popoutConfig)
             return;
         logger.warn('Layout pop-out mode is enabled, this is an experimental feature and may change in future versions');
-        const popoutWindowPixelConfig = (popoutConfig) => {
-            const matcher = /(\d+);(\d+)/;
-            const mMatches = popoutConfig.match(matcher);
-            if (!mMatches)
-                return '';
-            const [, width, height] = mMatches;
-            return `,width=${width},height=${height}`;
-        };
+        const configWithDefaults = Object.assign(Object.assign({}, this.popoutConfig), { loadAutomatically: true, popoutDimension: Object.assign(Object.assign({}, this.popoutConfig.popoutDimension), { width: 960, height: 720 }) });
         this.customButtons.push({
             svg: LAYOUT_ICONS.popoutSVG,
             onClick: (_, elem) => {
+                var _b;
                 const registration = elem.firstChild[instanceContainer].registration;
-                const url = new URL(window.location.toString());
-                const itemParams = new URLSearchParams();
-                itemParams.append(LAYOUT_POPOUT_CONTROL_KEY, registration);
-                url.search = itemParams.toString();
-                window.open(url, undefined, 'popup' + popoutWindowPixelConfig(this.popoutConfig));
+                // Use default dimensions from config
+                const defaultGeometry = {
+                    screenX: undefined,
+                    screenY: undefined,
+                    outerWidth: configWithDefaults.popoutDimension.width,
+                    outerHeight: configWithDefaults.popoutDimension.height,
+                };
+                // Add to controller registry immediately so it tracks it
+                (_b = this.popoutController) === null || _b === void 0 ? void 0 : _b.openPopout(registration, defaultGeometry, this.uuid);
+                this.cacheAndSaveLayout();
             },
         });
         this.popupMode = window.location.search.includes(LAYOUT_POPOUT_CONTROL_KEY);
@@ -1021,7 +1038,10 @@ __decorate([
     observable
 ], FoundationLayout.prototype, "dragging", void 0);
 __decorate([
-    attr({ attribute: 'popout-config' })
+    observable
+], FoundationLayout.prototype, "popupMode", void 0);
+__decorate([
+    observable
 ], FoundationLayout.prototype, "popoutConfig", void 0);
 __decorate([
     observable
@@ -1037,6 +1057,12 @@ const loadingTemplate = html `
  */
 export const layoutTemplate = html `
   <template>
+    ${when((x) => Boolean(x.popoutConfig), html `
+        <foundation-layout-popout-controller
+          ${ref('popoutController')}
+          channel-name="${(x) => { var _b; return (_b = x.popoutConfig) === null || _b === void 0 ? void 0 : _b.channelName; }}"
+        ></foundation-layout-popout-controller>
+      `)}
     ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}
     <div class="layout-container" ${ref('layoutElement')}></div>
   </template>

package/dist/esm/main/layout-popout-controller.js

@@ -0,0 +1,243 @@
+import { __awaiter, __decorate } from "tslib";
+import { createTypedBroadcastChannel, } from '@genesislcap/foundation-broadcast-channel';
+import { attr, customElement, FASTElement } from '@microsoft/fast-element';
+import { LAYOUT_POPOUT_CONTROL_KEY, LayoutReceiveEvents, POPOUT_GEOMETRY_BROADCAST_INTERVAL, } from '../utils';
+import { LAYOUT_POPOUT_CHANNEL_NAME } from '../utils/popout-events';
+let FoundationLayoutPopoutController = class FoundationLayoutPopoutController extends FASTElement {
+    constructor() {
+        super(...arguments);
+        // Internal registry to track both geometry and active window references
+        this.popoutRegistry = new Map();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.layoutKey = new URLSearchParams(window.location.search).get(LAYOUT_POPOUT_CONTROL_KEY);
+        this.setupChannel();
+        this.setupUnloadListener();
+        if (this.layoutKey) {
+            this.startPolling();
+        }
+        else {
+            this.setupListener();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.channel) {
+            this.channel.close();
+        }
+        this.stopPolling();
+        this.teardownUnloadListener();
+        if (!this.layoutKey) {
+            this.closeAllPopouts();
+        }
+    }
+    setupChannel() {
+        const name = this.channelName || LAYOUT_POPOUT_CHANNEL_NAME;
+        this.channel = createTypedBroadcastChannel(name);
+    }
+    setupListener() {
+        if (!this.channel)
+            return;
+        this.channel.onmessage = (ev) => {
+            if (this.channel.isMessageType('popout-geometry-change', ev)) {
+                const { layoutKey, geometry } = ev.data
+                    .detail;
+                const current = this.popoutRegistry.get(layoutKey);
+                this.popoutRegistry.set(layoutKey, Object.assign(Object.assign({}, current), { geometry }));
+                this.emitAutosave();
+            }
+            else if (this.channel.isMessageType('popout-closed', ev)) {
+                const { layoutKey } = ev.data.detail;
+                this.popoutRegistry.delete(layoutKey);
+                this.emitAutosave();
+            }
+        };
+    }
+    setupUnloadListener() {
+        this.unloadHandler = () => {
+            if (this.layoutKey) {
+                if (this.channel) {
+                    this.channel.postMessage('popout-closed', { layoutKey: this.layoutKey });
+                }
+            }
+            else {
+                this.closeAllPopouts();
+            }
+        };
+        window.addEventListener('beforeunload', this.unloadHandler);
+    }
+    teardownUnloadListener() {
+        if (this.unloadHandler) {
+            window.removeEventListener('beforeunload', this.unloadHandler);
+            this.unloadHandler = null;
+        }
+    }
+    emitAutosave() {
+        this.$emit(LayoutReceiveEvents.autosave, undefined, {
+            bubbles: true,
+            composed: true,
+        });
+    }
+    startPolling() {
+        this.pollInterval = setInterval(() => __awaiter(this, void 0, void 0, function* () {
+            const currentGeo = yield this.getGeometry();
+            const geoString = JSON.stringify(currentGeo);
+            if (geoString !== this.lastGeometry) {
+                this.broadcastGeometry(currentGeo);
+                this.lastGeometry = geoString;
+            }
+        }), POPOUT_GEOMETRY_BROADCAST_INTERVAL);
+    }
+    stopPolling() {
+        if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+        }
+    }
+    getGeometry() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const screenId = yield (() => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                if ('getScreenDetails' in window) {
+                    try {
+                        // This may prompt the user for permission if not already granted
+                        const details = yield window.getScreenDetails();
+                        return (_a = details.currentScreen) === null || _a === void 0 ? void 0 : _a.label;
+                    }
+                    catch (e) {
+                        // Silent fail - permission denied or API error
+                        return undefined;
+                    }
+                }
+                return undefined;
+            }))();
+            return {
+                screenX: window.screenX,
+                screenY: window.screenY,
+                outerWidth: window.outerWidth,
+                outerHeight: window.outerHeight,
+                screenId,
+            };
+        });
+    }
+    broadcastGeometry(geometry) {
+        if (!this.channel || !this.layoutKey)
+            return;
+        this.channel.postMessage('popout-geometry-change', {
+            layoutKey: this.layoutKey,
+            geometry,
+        });
+        console.log('[PopoutController] Broadcasting geometry:', geometry);
+    }
+    /**
+     * Opens a component in a popout window.
+     * @param registration - The registration ID of the component to pop out.
+     * @param geometry - Optional geometry to use for the new window.
+     * @param uuid - UUID generator from parent layout
+     */
+    openPopout(registration, geometry, uuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const url = new URL(window.location.toString());
+            const itemParams = new URLSearchParams();
+            itemParams.append(LAYOUT_POPOUT_CONTROL_KEY, registration);
+            url.search = itemParams.toString();
+            let features = 'popup';
+            let targetLeft = geometry === null || geometry === void 0 ? void 0 : geometry.screenX;
+            let targetTop = geometry === null || geometry === void 0 ? void 0 : geometry.screenY;
+            // If we have a screenId, try to find the screen and ensure coordinates are valid
+            if ((geometry === null || geometry === void 0 ? void 0 : geometry.screenId) && 'getScreenDetails' in window) {
+                try {
+                    const details = yield window.getScreenDetails();
+                    const targetScreen = details.screens.find((s) => s.label === geometry.screenId);
+                    if (targetScreen) {
+                        const isWithin = targetLeft >= targetScreen.availLeft &&
+                            targetLeft < targetScreen.availLeft + targetScreen.availWidth &&
+                            targetTop >= targetScreen.availTop &&
+                            targetTop < targetScreen.availTop + targetScreen.availHeight;
+                        if (!isWithin) {
+                            targetLeft = targetScreen.availLeft;
+                            targetTop = targetScreen.availTop;
+                        }
+                    }
+                    else {
+                        targetLeft = undefined;
+                        targetTop = undefined;
+                    }
+                }
+                catch (e) {
+                    // Fallback
+                }
+            }
+            if (geometry) {
+                features += `,width=${geometry.outerWidth},height=${geometry.outerHeight}`;
+                if (targetLeft !== undefined)
+                    features += `,left=${targetLeft}`;
+                if (targetTop !== undefined)
+                    features += `,top=${targetTop}`;
+            }
+            else {
+                features += ',width=800,height=600'; // Default fallback
+            }
+            const win = window.open(url, `popout-${registration}-${(uuid === null || uuid === void 0 ? void 0 : uuid.createId()) || Date.now()}`, features);
+            if (!win) {
+                console.warn(`Popout window for ${registration} was blocked.`);
+                return null;
+            }
+            // Update registry with the window reference and geometry (if provided)
+            const current = this.popoutRegistry.get(registration);
+            this.popoutRegistry.set(registration, {
+                geometry: geometry || (current === null || current === void 0 ? void 0 : current.geometry),
+                window: win,
+            });
+            return win;
+        });
+    }
+    getRegistry() {
+        const output = {};
+        for (const [key, val] of this.popoutRegistry.entries()) {
+            if (val.geometry) {
+                output[key] = { geometry: val.geometry };
+            }
+        }
+        return output;
+    }
+    /**
+     * Restores popouts from a registry
+     */
+    restorePopouts(registry, uuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.closeAllPopouts();
+            // Populate the registry with serialized data
+            for (const [key, val] of Object.entries(registry)) {
+                this.popoutRegistry.set(key, { geometry: val.geometry });
+            }
+            const keys = Array.from(this.popoutRegistry.keys());
+            if (keys.length === 0)
+                return;
+            console.debug(`Restoring ${keys.length} popout windows`);
+            yield Promise.all(keys.map((key) => {
+                const state = this.popoutRegistry.get(key);
+                return this.openPopout(key, state.geometry, uuid);
+            }));
+        });
+    }
+    closeAllPopouts() {
+        for (const val of this.popoutRegistry.values()) {
+            if (val.window && !val.window.closed) {
+                val.window.close();
+            }
+        }
+        this.popoutRegistry.clear();
+    }
+};
+__decorate([
+    attr({ attribute: 'channel-name' })
+], FoundationLayoutPopoutController.prototype, "channelName", void 0);
+FoundationLayoutPopoutController = __decorate([
+    customElement({
+        name: 'foundation-layout-popout-controller',
+        template: null,
+        styles: null,
+    })
+], FoundationLayoutPopoutController);
+export { FoundationLayoutPopoutController };

package/dist/esm/utils/constants.js

@@ -25,9 +25,15 @@ export const DEFAULT_RELOAD_BUFFER = 500;
 export const AUTOSAVE_KEY = 'foundation-layout-autosave';
 /**
  * Key to be used for controlling popout behaviour
- * @internal
+ * @beta
  */
 export const LAYOUT_POPOUT_CONTROL_KEY = 'f-layout-key';
+/**
+ * How often a popout window should check to broadcast its
+ * geometry
+ * @interal
+ */
+export const POPOUT_GEOMETRY_BROADCAST_INTERVAL = 1000;
 /**
  * Put this classname on an element which is a DOM parent of the layout, and
  * if the layout goes into popout mode then it will place itself as the only child

package/dist/esm/utils/index.js

@@ -4,5 +4,6 @@ export * from './events';
 export * from './factory-registry';
 export * from './misc';
 export * from './templates';
+export * from './popout-events';
 export * from './types';
 export * from './error';

package/dist/esm/utils/popout-events.js

@@ -0,0 +1,5 @@
+/**
+ * Name of the default broadcast channel used for layout popouts
+ * @public
+ */
+export const LAYOUT_POPOUT_CHANNEL_NAME = 'f-layout-popout-channel';

package/dist/foundation-layout.api.json

@@ -845,15 +845,20 @@
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#popoutConfig:member",
-              "docComment": "/**\n * Controls whether popout functionality is enabled on the layout. Defaults to disabled. Set this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.\n *\n * @beta\n */\n",
+              "docComment": "/**\n * Controls whether popout functionality is enabled on the layout. Defaults to disabled. Pass an empty object `{}` to use default configurations, or a {@link LayoutPopoutConfig} object to further customise.\n *\n * @beta\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
                   "text": "popoutConfig: "
                 },
+                {
+                  "kind": "Reference",
+                  "text": "LayoutPopoutConfig",
+                  "canonicalReference": "@genesislcap/foundation-layout!LayoutPopoutConfig:type"
+                },
                 {
                   "kind": "Content",
-                  "text": "string | undefined"
+                  "text": " | undefined"
                 },
                 {
                   "kind": "Content",
@@ -866,7 +871,7 @@
               "name": "popoutConfig",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 2
+                "endIndex": 3
               },
               "isStatic": false,
               "isProtected": false,
@@ -1074,11 +1079,19 @@
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#tryActivatePopoutMode:member(1)",
-              "docComment": "/**\n * If in a popout window from the dynamic layout, this function will run the flow to put the component in popout mode. This function is automatically called if using the declarative HTML API, but if only using the JavaScript API then you will need to call this function manually.\n *\n * @remarks\n *\n * If you need to call this manually then you should do it as soon as you register all of the required components with {@link FoundationLayout.registerItem}.\n *\n * If you set the `LAYOUT_POPOUT_CONTAINER_CLASS` on an element which is a DOM parent of the layout, then if the layout goes into popout mode then it will place itself as the only child for the popout container you set. It is likely you'll want to attach this class to your design system provider.\n *\n * @beta\n */\n",
+              "docComment": "/**\n * If in a popout window from the dynamic layout, this function will run the flow to put the component in popout mode. This function is automatically called if using the declarative HTML API, but if only using the JavaScript API then you will need to call this function manually.\n *\n * @remarks\n *\n * If you need to call this manually then you should do it as soon as you register all of the required components with {@link FoundationLayout.registerItem}.\n *\n * If you set the `LAYOUT_POPOUT_CONTAINER_CLASS` on an element which is a DOM parent of the layout, then if the layout goes into popout mode then it will place itself as the only child for the popout container you set. It is likely you'll want to attach this class to your design system provider.\n *\n * @param autoloading - If true, this respects the {@link LayoutPopoutConfig.loadAutomatically} property. You might want to set this to false and call it manually if you're manually registering components to the layout in order to avoid race conditions.\n *\n * @beta\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "tryActivatePopoutMode(): "
+                  "text": "tryActivatePopoutMode(autoloading?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
                 },
                 {
                   "kind": "Content",
@@ -1091,13 +1104,22 @@
               ],
               "isStatic": false,
               "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
+                "startIndex": 3,
+                "endIndex": 4
               },
               "releaseTag": "Beta",
               "isProtected": false,
               "overloadIndex": 1,
-              "parameters": [],
+              "parameters": [
+                {
+                  "parameterName": "autoloading",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": true
+                }
+              ],
               "isOptional": false,
               "isAbstract": false,
               "name": "tryActivatePopoutMode"
@@ -1721,6 +1743,33 @@
             "endIndex": 0
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@genesislcap/foundation-layout!LAYOUT_POPOUT_CONTROL_KEY:var",
+          "docComment": "/**\n * Key to be used for controlling popout behaviour\n *\n * @beta\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "LAYOUT_POPOUT_CONTROL_KEY = "
+            },
+            {
+              "kind": "Content",
+              "text": "\"f-layout-key\""
+            }
+          ],
+          "fileUrlPath": "src/utils/constants.ts",
+          "initializerTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "isReadonly": true,
+          "releaseTag": "Beta",
+          "name": "LAYOUT_POPOUT_CONTROL_KEY",
+          "variableTypeTokenRange": {
+            "startIndex": 0,
+            "endIndex": 0
+          }
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@genesislcap/foundation-layout!LayoutComponentWithState:interface",
@@ -1848,6 +1897,32 @@
             "endIndex": 2
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@genesislcap/foundation-layout!LayoutPopoutConfig:type",
+          "docComment": "/**\n * @beta\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type LayoutPopoutConfig = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    channelName?: string;\n    loadAutomatically?: boolean;\n    popoutDimension?: {\n        width: number;\n        height: number;\n    };\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/utils/types.ts",
+          "releaseTag": "Beta",
+          "name": "LayoutPopoutConfig",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@genesislcap/foundation-layout!LayoutReceiveEvents:var",
@@ -2399,7 +2474,16 @@
             },
             {
               "kind": "Content",
-              "text": ";\n}"
+              "text": ";\n    popouts?: {\n        [layoutKey: string]: "
+            },
+            {
+              "kind": "Reference",
+              "text": "PopoutState",
+              "canonicalReference": "@genesislcap/foundation-layout!~PopoutState:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n    };\n}"
             },
             {
               "kind": "Content",
@@ -2411,7 +2495,7 @@
           "name": "SerialisedLayout",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 4
+            "endIndex": 6
           }
         },
         {