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

package/dist/custom-elements.json

@@ -621,15 +621,6 @@
               "default": "undefined",
               "description": "Controls whether popout functionality is enabled on the layout. Defaults to disabled.\nPass an empty object `{}` to use default configurations, or a LayoutPopoutConfig object to further customise."
             },
-            {
-              "kind": "field",
-              "name": "popupMode",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "method",
               "name": "layoutRequiredRegistrations",
@@ -1004,7 +995,7 @@
         {
           "kind": "variable",
           "name": "layoutTemplate",
-          "default": "html<FoundationLayout>`\n  <template>\n    ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}\n    <div class=\"layout-container\" ${ref('layoutElement')}></div>\n  </template>\n`",
+          "default": "html<FoundationLayout>`\n  <template>\n    ${when(\n      (x) => Boolean(x.popoutConfig),\n      html<FoundationLayout>`\n        <foundation-layout-popout-controller\n          ${ref('popoutController')}\n          channel-name=\"${(x) => x.popoutConfig?.channelName}\"\n        ></foundation-layout-popout-controller>\n      `,\n    )}\n    ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}\n    <div class=\"layout-container\" ${ref('layoutElement')}></div>\n  </template>\n`",
           "description": "`ViewTemplate` which defines the html for FoundationLayout.",
           "privacy": "public"
         }
@@ -1036,6 +1027,227 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/main/layout-popout-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FoundationLayoutPopoutController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "channelName",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "layoutKey",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "channel",
+              "type": {
+                "text": "TypedBroadcastChannel<LayoutPopoutEvents>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "pollInterval",
+              "type": {
+                "text": "any"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "unloadHandler",
+              "type": {
+                "text": "() => void"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lastGeometry",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "popoutRegistry",
+              "type": {
+                "text": "Map<string, { geometry: PopoutState['geometry']; window?: Window }>"
+              },
+              "privacy": "private",
+              "default": "new Map()"
+            },
+            {
+              "kind": "method",
+              "name": "setupChannel",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupUnloadListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "teardownUnloadListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "emitAutosave",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "startPolling",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stopPolling",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getGeometry",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "broadcastGeometry",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "geometry",
+                  "type": {
+                    "text": "Awaited<ReturnType<typeof this.getGeometry>>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "openPopout",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "registration",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The registration ID of the component to pop out."
+                },
+                {
+                  "name": "geometry",
+                  "optional": true,
+                  "type": {
+                    "text": "any"
+                  },
+                  "description": "Optional geometry to use for the new window."
+                },
+                {
+                  "name": "uuid",
+                  "optional": true,
+                  "type": {
+                    "text": "any"
+                  },
+                  "description": "UUID generator from parent layout"
+                }
+              ],
+              "description": "Opens a component in a popout window."
+            },
+            {
+              "kind": "method",
+              "name": "getRegistry",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "{ [layoutKey: string]: PopoutState }"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "restorePopouts",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "registry",
+                  "type": {
+                    "text": "{ [layoutKey: string]: PopoutState }"
+                  }
+                },
+                {
+                  "name": "uuid",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Restores popouts from a registry"
+            },
+            {
+              "kind": "method",
+              "name": "closeAllPopouts",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "channel-name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "channelName"
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "foundation-layout-popout-controller",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FoundationLayoutPopoutController",
+          "declaration": {
+            "name": "FoundationLayoutPopoutController",
+            "module": "src/main/layout-popout-controller.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "foundation-layout-popout-controller",
+          "declaration": {
+            "name": "FoundationLayoutPopoutController",
+            "module": "src/main/layout-popout-controller.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/main/layout-region.ts",
@@ -1359,6 +1571,15 @@
           "default": "'f-layout-key'",
           "description": "Key to be used for controlling popout behaviour"
         },
+        {
+          "kind": "variable",
+          "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
+          "type": {
+            "text": "number"
+          },
+          "default": "1000",
+          "description": "How often a popout window should check to broadcast its\ngeometry"
+        },
         {
           "kind": "variable",
           "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
@@ -1398,6 +1619,14 @@
             "module": "src/utils/constants.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
+          "declaration": {
+            "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
+            "module": "src/utils/constants.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
@@ -1662,6 +1891,14 @@
             "package": "./templates"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./popout-events"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -1706,6 +1943,32 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/popout-events.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LAYOUT_POPOUT_CHANNEL_NAME",
+          "type": {
+            "text": "string"
+          },
+          "default": "'f-layout-popout-channel'",
+          "description": "Name of the default broadcast channel used for layout popouts",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LAYOUT_POPOUT_CHANNEL_NAME",
+          "declaration": {
+            "name": "LAYOUT_POPOUT_CHANNEL_NAME",
+            "module": "src/utils/popout-events.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/templates.ts",

package/dist/dts/main/layout-main.d.ts

@@ -1,6 +1,7 @@
 import { LayoutConfig, RootItemConfig } from '@genesis-community/golden-layout';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { ComponentFactory, componentType, CustomButton, LayoutComponent, LayoutPopoutConfig, Placement, RegisteredElementConfig, RegistrationConfig, SerialisedLayout } from '../utils/';
+import { FoundationLayoutPopoutController } from './layout-popout-controller';
 export { layoutStyles } from '../styles';
 /**
  * @public
@@ -95,13 +96,16 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * has changed and know you potentially need to gate some of your lifecycle functionality.
      */
     lifecycleUpdateToken: string | undefined;
+    /** @internal */
+    popupMode: boolean;
+    /** @internal */
+    popoutController: FoundationLayoutPopoutController;
     /**
      * 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.
      * @beta
      */
     popoutConfig: LayoutPopoutConfig | undefined;
-    private popupMode;
     /** @internal */
     constructor();
     /** @internal */

package/dist/dts/main/layout-main.d.ts.map

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

package/dist/dts/main/layout-popout-controller.d.ts

@@ -0,0 +1,40 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { PopoutState } from '../utils';
+export declare class FoundationLayoutPopoutController extends FASTElement {
+    channelName: string;
+    private layoutKey;
+    private channel;
+    private pollInterval;
+    private unloadHandler;
+    private lastGeometry;
+    private popoutRegistry;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupChannel;
+    private setupListener;
+    private setupUnloadListener;
+    private teardownUnloadListener;
+    private emitAutosave;
+    private startPolling;
+    private stopPolling;
+    private getGeometry;
+    private broadcastGeometry;
+    /**
+     * 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: string, geometry?: any, uuid?: any): Promise<Window>;
+    getRegistry(): {
+        [layoutKey: string]: PopoutState;
+    };
+    /**
+     * Restores popouts from a registry
+     */
+    restorePopouts(registry: {
+        [layoutKey: string]: PopoutState;
+    }, uuid: any): Promise<void>;
+    closeAllPopouts(): void;
+}
+//# sourceMappingURL=layout-popout-controller.d.ts.map

package/dist/dts/main/layout-popout-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-popout-controller.d.ts","sourceRoot":"","sources":["../../../src/main/layout-popout-controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAuB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAIL,WAAW,EACZ,MAAM,UAAU,CAAC;AAGlB,qBAKa,gCAAiC,SAAQ,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IAEzD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,OAAO,CAA4C;IAC3D,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,cAAc,CACV;IAEZ,iBAAiB;IAYjB,oBAAoB;IAapB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,WAAW;YAML,WAAW;IAwBzB,OAAO,CAAC,iBAAiB;IAWzB;;;;;OAKG;IACU,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG;IA+DjE,WAAW,IAAI;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE;IAU1D;;OAEG;IACU,cAAc,CAAC,QAAQ,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,EAAE,IAAI,EAAE,GAAG;IAqB9E,eAAe;CAQvB"}

package/dist/dts/utils/constants.d.ts

@@ -26,6 +26,12 @@ export declare const AUTOSAVE_KEY = "foundation-layout-autosave";
  * @beta
  */
 export declare const LAYOUT_POPOUT_CONTROL_KEY = "f-layout-key";
+/**
+ * How often a popout window should check to broadcast its
+ * geometry
+ * @interal
+ */
+export declare 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/dts/utils/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,eAA+B,CAAC;AAE9D;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,YAAY,+BAA+B,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,iBAAiB,CAAC;AAExD;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,oBAAoB,CAAC;AAE/D,eAAO,MAAM,kBAAkB,SAAS,CAAC;AAGzC,eAAO,MAAM,qBAAqB,cAKjC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,eAA+B,CAAC;AAE9D;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,YAAY,+BAA+B,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,iBAAiB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,kCAAkC,OAAO,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,oBAAoB,CAAC;AAE/D,eAAO,MAAM,kBAAkB,SAAS,CAAC;AAGzC,eAAO,MAAM,qBAAqB,cAKjC,CAAC"}

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

@@ -4,6 +4,7 @@ export * from './events';
 export * from './factory-registry';
 export * from './misc';
 export * from './templates';
+export * from './popout-events';
 export * from './types';
 export * from './error';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/dts/utils/popout-events.d.ts

@@ -0,0 +1,37 @@
+import { EventDetailMap } from '@genesislcap/foundation-events';
+/**
+ * Geometry details for a popout window
+ * @public
+ */
+export type PopoutGeometry = {
+    screenX: number;
+    screenY: number;
+    outerWidth: number;
+    outerHeight: number;
+    screenId?: string;
+};
+/**
+ * Events for layout popout communication
+ * @public
+ */
+export interface LayoutPopoutEvents extends EventDetailMap {
+    /**
+     * Emitted by a popout window when its geometry changes
+     */
+    'popout-geometry-change': {
+        layoutKey: string;
+        geometry: PopoutGeometry;
+    };
+    /**
+     * Emitted by a popout window when it is closed
+     */
+    'popout-closed': {
+        layoutKey: string;
+    };
+}
+/**
+ * Name of the default broadcast channel used for layout popouts
+ * @public
+ */
+export declare const LAYOUT_POPOUT_CHANNEL_NAME = "f-layout-popout-channel";
+//# sourceMappingURL=popout-events.d.ts.map

package/dist/dts/utils/popout-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popout-events.d.ts","sourceRoot":"","sources":["../../../src/utils/popout-events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD;;OAEG;IACH,wBAAwB,EAAE;QACxB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,cAAc,CAAC;KAC1B,CAAC;IACF;;OAEG;IACH,eAAe,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,0BAA0B,4BAA4B,CAAC"}

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

@@ -1,5 +1,6 @@
 import { ComponentContainer, ResolvedLayoutConfig } from '@genesis-community/golden-layout';
 import { componentType, instanceContainer } from './constants';
+import { PopoutGeometry } from './popout-events';
 /**
  * Definition of a custom button which will be added to all layout items.
  * @remarks
@@ -25,6 +26,20 @@ export type CustomButton = {
 export type SerialisedLayout = {
     v: '1';
     c: ResolvedLayoutConfig;
+    /**
+     * Optional registry of popped out components and their window geometry.
+     * @beta
+     */
+    popouts?: {
+        [layoutKey: string]: PopoutState;
+    };
+};
+/**
+ * @beta
+ * State of a popped out window
+ */
+export type PopoutState = {
+    geometry: PopoutGeometry;
 };
 /**
  * Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.
@@ -202,6 +217,11 @@ export type AutosavedLayouts = {
 };
 /** @beta */
 export type LayoutPopoutConfig = {
+    /**
+     * The name of the broadcast channel to use for communication between the main window and popout windows.
+     * Defaults to 'f-layout-popout-channel'.
+     */
+    channelName?: string;
     loadAutomatically?: boolean;
     popoutDimension?: {
         width: number;

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":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC;KAClC,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDK;AACL,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC;;OAEG;IACH,eAAe,IAAI,CAAC,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,gBAAgB,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,OAAO,GAC1C,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrC,CAAC,iBAAiB,CAAC,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAE/E,gBAAgB;AAChB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,GAAG,CACA;IACE,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,GACD;IACE,OAAO,EAAE,gBAAgB,CAAC;CAC3B,CACJ,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC;AAEF,YAAY;AACZ,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC"}

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.
          * 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.
@@ -403,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);
@@ -414,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);
         }
@@ -983,12 +995,18 @@ export class FoundationLayout extends FoundationElement {
         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,width=${configWithDefaults.popoutDimension.width},height=${configWithDefaults.popoutDimension.height}`);
+                // 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);
@@ -1019,6 +1037,9 @@ __decorate([
 __decorate([
     observable
 ], FoundationLayout.prototype, "dragging", void 0);
+__decorate([
+    observable
+], FoundationLayout.prototype, "popupMode", void 0);
 __decorate([
     observable
 ], FoundationLayout.prototype, "popoutConfig", void 0);
@@ -1036,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

@@ -28,6 +28,12 @@ export const AUTOSAVE_KEY = 'foundation-layout-autosave';
  * @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

@@ -1908,7 +1908,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    loadAutomatically?: boolean;\n    popoutDimension?: {\n        width: number;\n        height: number;\n    };\n}"
+              "text": "{\n    channelName?: string;\n    loadAutomatically?: boolean;\n    popoutDimension?: {\n        width: number;\n        height: number;\n    };\n}"
             },
             {
               "kind": "Content",
@@ -2474,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",
@@ -2486,7 +2495,7 @@
           "name": "SerialisedLayout",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 4
+            "endIndex": 6
           }
         },
         {

package/dist/foundation-layout.d.ts

@@ -1,5 +1,6 @@
 import type { Container } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { LayoutConfig } from '@genesis-community/golden-layout';
@@ -170,13 +171,16 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * has changed and know you potentially need to gate some of your lifecycle functionality.
      */
     lifecycleUpdateToken: string | undefined;
+    /** @internal */
+    popupMode: boolean;
+    /** @internal */
+    popoutController: FoundationLayoutPopoutController;
     /**
      * 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.
      * @beta
      */
     popoutConfig: LayoutPopoutConfig | undefined;
-    private popupMode;
     /** @internal */
     constructor();
     /** @internal */
@@ -586,6 +590,44 @@ export declare class FoundationLayout extends FoundationElement implements Layou
                cacheElementsAndRegister(config: RegistrationConfig): string;
            }
 
+           declare class FoundationLayoutPopoutController extends FASTElement {
+               channelName: string;
+               private layoutKey;
+               private channel;
+               private pollInterval;
+               private unloadHandler;
+               private lastGeometry;
+               private popoutRegistry;
+               connectedCallback(): void;
+               disconnectedCallback(): void;
+               private setupChannel;
+               private setupListener;
+               private setupUnloadListener;
+               private teardownUnloadListener;
+               private emitAutosave;
+               private startPolling;
+               private stopPolling;
+               private getGeometry;
+               private broadcastGeometry;
+               /**
+                * 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: string, geometry?: any, uuid?: any): Promise<Window>;
+               getRegistry(): {
+                   [layoutKey: string]: PopoutState;
+               };
+               /**
+                * Restores popouts from a registry
+                */
+               restorePopouts(registry: {
+                   [layoutKey: string]: PopoutState;
+               }, uuid: any): Promise<void>;
+               closeAllPopouts(): void;
+           }
+
            /**
             * @public
             * `FoundationLayoutRegion` is a custom element that represents a region in the layout.
@@ -776,6 +818,11 @@ export declare class FoundationLayout extends FoundationElement implements Layou
 
            /** @beta */
            export declare type LayoutPopoutConfig = {
+               /**
+                * The name of the broadcast channel to use for communication between the main window and popout windows.
+                * Defaults to 'f-layout-popout-channel'.
+                */
+               channelName?: string;
                loadAutomatically?: boolean;
                popoutDimension?: {
                    width: number;
@@ -868,6 +915,26 @@ export declare class FoundationLayout extends FoundationElement implements Layou
                };
            };
 
+           /**
+            * Geometry details for a popout window
+            * @public
+            */
+           declare type PopoutGeometry = {
+               screenX: number;
+               screenY: number;
+               outerWidth: number;
+               outerHeight: number;
+               screenId?: string;
+           };
+
+           /**
+            * @beta
+            * State of a popped out window
+            */
+           declare type PopoutState = {
+               geometry: PopoutGeometry;
+           };
+
            /**
             * @public
             * The parameters that can be set on a new item when being added by the {@link FoundationLayout.addItem} API
@@ -941,6 +1008,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
            export declare type SerialisedLayout = {
                v: '1';
                c: ResolvedLayoutConfig;
+               /**
+                * Optional registry of popped out components and their window geometry.
+                * @beta
+                */
+               popouts?: {
+                   [layoutKey: string]: PopoutState;
+               };
            };
 
            /**

package/docs/api/foundation-layout.layoutpopoutconfig.md

@@ -12,6 +12,7 @@
 
 ```typescript
 export type LayoutPopoutConfig = {
+    channelName?: string;
     loadAutomatically?: boolean;
     popoutDimension?: {
         width: number;

package/docs/api/foundation-layout.serialisedlayout.md

@@ -12,6 +12,9 @@ Versioned layout config objects. `v` is the version and `c` contains the layout
 export type SerialisedLayout = {
     v: '1';
     c: ResolvedLayoutConfig;
+    popouts?: {
+        [layoutKey: string]: PopoutState;
+    };
 };
 ```
 

package/docs/api-report.md.api.md

@@ -6,6 +6,7 @@
 
 import type { Container } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { LayoutConfig } from '@genesis-community/golden-layout';
@@ -61,6 +62,12 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     missingItemPlaceholder: (missingItem: string) => string;
     // @beta
     popoutConfig: LayoutPopoutConfig | undefined;
+    // Warning: (ae-forgotten-export) The symbol "FoundationLayoutPopoutController" needs to be exported by the entry point index.d.ts
+    //
+    // @internal (undocumented)
+    popoutController: FoundationLayoutPopoutController;
+    // @internal (undocumented)
+    popupMode: boolean;
     registeredItems(): string[];
     registerItem(registration: string, elementsOrFactory: Element[] | ComponentFactory): string;
     reloadBuffer: number;
@@ -169,6 +176,7 @@ export const LayoutEmitEvents: {
 
 // @beta (undocumented)
 export type LayoutPopoutConfig = {
+    channelName?: string;
     loadAutomatically?: boolean;
     popoutDimension?: {
         width: number;
@@ -253,11 +261,18 @@ export type RegistrationConfig = {
 export type SerialisedLayout = {
     v: '1';
     c: ResolvedLayoutConfig;
+    popouts?: {
+        [layoutKey: string]: PopoutState;
+    };
 };
 
 // @public
 export function unregisterFactory(key: string): boolean;
 
+// Warnings were encountered during analysis:
+//
+// src/utils/types.ts:36:5 - (ae-forgotten-export) The symbol "PopoutState" needs to be exported by the entry point index.d.ts
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.393.3-FUI-2471.1",
+  "version": "14.393.3-FUI-2471.2",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -38,20 +38,22 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.393.3-FUI-2471.1",
-    "@genesislcap/genx": "14.393.3-FUI-2471.1",
-    "@genesislcap/rollup-builder": "14.393.3-FUI-2471.1",
-    "@genesislcap/ts-builder": "14.393.3-FUI-2471.1",
-    "@genesislcap/uvu-playwright-builder": "14.393.3-FUI-2471.1",
-    "@genesislcap/vite-builder": "14.393.3-FUI-2471.1",
-    "@genesislcap/webpack-builder": "14.393.3-FUI-2471.1"
+    "@genesislcap/foundation-testing": "14.393.3-FUI-2471.2",
+    "@genesislcap/genx": "14.393.3-FUI-2471.2",
+    "@genesislcap/rollup-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/ts-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/uvu-playwright-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/vite-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/webpack-builder": "14.393.3-FUI-2471.2"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.11.0",
-    "@genesislcap/foundation-comms": "14.393.3-FUI-2471.1",
-    "@genesislcap/foundation-logger": "14.393.3-FUI-2471.1",
-    "@genesislcap/foundation-ui": "14.393.3-FUI-2471.1",
-    "@genesislcap/foundation-utils": "14.393.3-FUI-2471.1",
+    "@genesislcap/foundation-broadcast-channel": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-comms": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-events": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-logger": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-ui": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-utils": "14.393.3-FUI-2471.2",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
     "@microsoft/fast-foundation": "2.50.0"
@@ -65,5 +67,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "1234c6eb62ef380e2552f20adf320494eae1c996"
+  "gitHead": "8d5276ff6ff9d909b67f0095a7cc2df458d1e8eb"
 }