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

package/POPOUT_TODO.md

@@ -0,0 +1,46 @@
+# Foundation Layout TODOs
+
+## Multi-Instance Popouts
+Currently, the popout system keys windows and state by their `registration` ID. This limits the layout to having only one instance of a specific component type (e.g., `rapid-grid-pro`) popped out at a time.
+
+### Proposed Improvement
+Support multiple popouts of the same registration by introducing a unique `instanceId` (UUID).
+
+- **URL Parameters**: Add a unique instance ID to the popout URL (e.g., `?layout-popout-control-key=my-grid&layout-popout-instance-id=uuid-123`).
+- **Registry**: Update `FoundationLayoutPopoutController` to key the `popoutRegistry` by the unique `instanceId` rather than the `registration` name.
+- **State Persistence**: Ensure the serialized layout stores the `registration` name alongside the state for each `instanceId` so they can be recreated correctly on restoration.
+- **Communication**: Update the broadcast channel messages (`popout-update`, `popout-sync`, etc.) to use the `instanceId` for targeting and identification.
+
+## Configurable Popout Headers
+A client has requested the ability to see the component header (title and custom buttons) inside the popout window, while still hiding the standard Golden Layout controls (Close, Maximise, and Popout-in-Popout).
+
+### Proposed Improvement
+1. **Update Configuration**: Add `showHeaders?: boolean` to the `LayoutPopoutConfig` interface (defaulting to `false`).
+2. **Update Activation Logic**:
+   - In `tryActivatePopoutMode`, pass the `showHeaders` value to the Golden Layout `settings.hasHeaders` property.
+   - Configure the root component item to disable standard buttons while allowing the header to render:
+     ```typescript
+     header: {
+       maximise: false,
+       close: false,
+       popout: false,
+     }
+     ```
+3. **Custom Buttons**: Ensure that the `setupCustomButtons` logic continues to run in the popout window so that the user's custom tools are injected into the newly visible header.
+
+## Restore on Manual Close
+Currently, when a user manually closes a popout window, the component is removed from the layout entirely. We want to restore it to the main layout automatically.
+
+### Proposed Solution
+1. **Detect Manual Close**:
+   - In `FoundationLayoutPopoutController`, add a flag `isClosingAll` (boolean).
+   - Set `isClosingAll = true` at the start of `closeAllPopouts()` and `false` at the end.
+   - In the `popout-closed` event handler, check if `!isClosingAll`. If true, this is a manual user action.
+
+2. **Trigger Restoration**:
+   - If manual close is detected, call a restoration method on the parent `FoundationLayout` (e.g., `restoreItem`).
+   - Pass the `registration` ID and the final `state` (captured from the registry before deletion).
+
+3. **Implement `restoreItem`**:
+   - Update `FoundationLayout` to support restoring an item with its state preserved.
+   - This likely requires updating `addItem` or creating a new method that accepts `initialState` (or `componentState`) in the configuration, so the component re-initializes with its previous data (filters, scroll position, etc.).

package/dist/custom-elements.json

@@ -670,16 +670,6 @@
                   "text": "boolean"
                 }
               },
-              "parameters": [
-                {
-                  "name": "autoloading",
-                  "default": "false",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "If true, this respects the {@link LayoutPopoutConfig.loadAutomatically}property.\n   * 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   * "
-                }
-              ],
               "description": "If in a popout window from the dynamic layout, this function will run the flow to put the component in popout mode.\nThis 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."
             },
             {
@@ -995,7 +985,7 @@
         {
           "kind": "variable",
           "name": "layoutTemplate",
-          "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`",
+          "default": "html<FoundationLayout>`\n  <template>\n    ${when(\n      (x) => Boolean(x.popoutConfig),\n      html<FoundationLayout>`\n        <foundation-layout-popout-controller\n          ${ref('popoutController')}\n          :parentLayout=\"${(x) => x}\"\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"
         }
@@ -1077,7 +1067,7 @@
             },
             {
               "kind": "field",
-              "name": "lastGeometry",
+              "name": "lastUpdate",
               "type": {
                 "text": "string"
               },
@@ -1087,7 +1077,7 @@
               "kind": "field",
               "name": "popoutRegistry",
               "type": {
-                "text": "Map<string, { geometry: PopoutState['geometry']; window?: Window }>"
+                "text": "Map<\n    string,\n    { geometry: PopoutGeometry; state?: unknown; window?: Window }\n  >"
               },
               "privacy": "private",
               "default": "new Map()"
@@ -1102,6 +1092,19 @@
               "name": "setupListener",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "applyStateToParent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "setupUnloadListener",
@@ -1130,17 +1133,39 @@
             {
               "kind": "method",
               "name": "getGeometry",
-              "privacy": "private"
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<PopoutGeometry>"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "broadcastGeometry",
+              "name": "getComponentState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "broadcastUpdate",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "geometry",
                   "type": {
-                    "text": "Awaited<ReturnType<typeof this.getGeometry>>"
+                    "text": "PopoutGeometry"
+                  }
+                },
+                {
+                  "name": "state",
+                  "optional": true,
+                  "type": {
+                    "text": "unknown"
                   }
                 }
               ]
@@ -1158,12 +1183,12 @@
                   "description": "The registration ID of the component to pop out."
                 },
                 {
-                  "name": "geometry",
+                  "name": "popoutState",
                   "optional": true,
                   "type": {
-                    "text": "any"
+                    "text": "PopoutState"
                   },
-                  "description": "Optional geometry to use for the new window."
+                  "description": "Optional state (geometry and component state) to use for the new window."
                 },
                 {
                   "name": "uuid",
@@ -1966,6 +1991,14 @@
             "name": "LAYOUT_POPOUT_CHANNEL_NAME",
             "module": "src/utils/popout-events.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "PopoutGeometry",
+          "declaration": {
+            "name": "PopoutGeometry",
+            "module": "src/utils/popout-events.ts"
+          }
         }
       ]
     },

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

@@ -177,11 +177,9 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * 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(autoloading?: boolean): boolean;
+    tryActivatePopoutMode(): boolean;
     /**
      * Try to load a layout from local storage, or return false. Only required if manually calling {@link FoundationLayout.registerItem}
      * @remarks

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

@@ -1,31 +1,40 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { PopoutState } from '../utils';
+import { LayoutComponent, PopoutState } from '../utils';
 export declare class FoundationLayoutPopoutController extends FASTElement {
     channelName: string;
+    /**
+     * Reference to the parent layout to retrieve component state
+     * @internal
+     */
+    parentLayout: LayoutComponent & {
+        getLayoutComponents(): any[][];
+    };
     private layoutKey;
     private channel;
     private pollInterval;
     private unloadHandler;
-    private lastGeometry;
+    private lastUpdate;
     private popoutRegistry;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private setupChannel;
     private setupListener;
+    private applyStateToParent;
     private setupUnloadListener;
     private teardownUnloadListener;
     private emitAutosave;
     private startPolling;
     private stopPolling;
     private getGeometry;
-    private broadcastGeometry;
+    private getComponentState;
+    private broadcastUpdate;
     /**
      * 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 popoutState - Optional state (geometry and component state) to use for the new window.
      * @param uuid - UUID generator from parent layout
      */
-    openPopout(registration: string, geometry?: any, uuid?: any): Promise<Window>;
+    openPopout(registration: string, popoutState?: PopoutState, uuid?: any): Promise<Window>;
     getRegistry(): {
         [layoutKey: string]: PopoutState;
     };

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

@@ -1 +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"}
+{"version":3,"file":"layout-popout-controller.d.ts","sourceRoot":"","sources":["../../../src/main/layout-popout-controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAuB,WAAW,EAAc,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAEL,eAAe,EAIf,WAAW,EACZ,MAAM,UAAU,CAAC;AAGlB,qBAKa,gCAAiC,SAAQ,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IAEzD;;;OAGG;IACS,YAAY,EAAE,eAAe,GAAG;QAAE,mBAAmB,IAAI,GAAG,EAAE,EAAE,CAAA;KAAE,CAAC;IAE/E,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,OAAO,CAA4C;IAC3D,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,cAAc,CAGR;IAEd,iBAAiB;IAajB,oBAAoB;IAapB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;YAML,WAAW;IAsBzB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,eAAe;IAUvB;;;;;OAKG;IACU,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,GAAG;IA8D5E,WAAW,IAAI;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE;IAQ1D;;OAEG;IACU,cAAc,CAAC,QAAQ,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,EAAE,IAAI,EAAE,GAAG;IAkB9E,eAAe;CAQvB"}

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

@@ -1,26 +1,17 @@
 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;
-};
+import { PopoutGeometry } from './types';
 /**
  * Events for layout popout communication
  * @public
  */
 export interface LayoutPopoutEvents extends EventDetailMap {
     /**
-     * Emitted by a popout window when its geometry changes
+     * Emitted by a popout window when its geometry or component state changes
      */
-    'popout-geometry-change': {
+    'popout-update': {
         layoutKey: string;
         geometry: PopoutGeometry;
+        state?: unknown;
     };
     /**
      * Emitted by a popout window when it is closed
@@ -28,10 +19,25 @@ export interface LayoutPopoutEvents extends EventDetailMap {
     'popout-closed': {
         layoutKey: string;
     };
+    /**
+     * Emitted by a popout window when it opens to request state
+     */
+    'popout-handshake': {
+        layoutKey: string;
+    };
+    /**
+     * Emitted by the host to sync state to a popout window
+     */
+    'popout-sync': {
+        layoutKey: string;
+        geometry?: PopoutGeometry;
+        state?: unknown;
+    };
 }
 /**
  * Name of the default broadcast channel used for layout popouts
  * @public
  */
 export declare const LAYOUT_POPOUT_CHANNEL_NAME = "f-layout-popout-channel";
+export { PopoutGeometry };
 //# sourceMappingURL=popout-events.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"popout-events.d.ts","sourceRoot":"","sources":["../../../src/utils/popout-events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD;;OAEG;IACH,eAAe,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,cAAc,CAAC;QACzB,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,eAAe,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,kBAAkB,EAAE;QAClB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,aAAa,EAAE;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;QAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,0BAA0B,4BAA4B,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,6 +1,24 @@
 import { ComponentContainer, ResolvedLayoutConfig } from '@genesis-community/golden-layout';
 import { componentType, instanceContainer } from './constants';
-import { PopoutGeometry } from './popout-events';
+/**
+ * Geometry details for a popout window
+ * @public
+ */
+export type PopoutGeometry = {
+    screenX: number;
+    screenY: number;
+    outerWidth: number;
+    outerHeight: number;
+    screenId?: string;
+};
+/**
+ * @beta
+ * State of a popped out window
+ */
+export type PopoutState = {
+    geometry: PopoutGeometry;
+    state?: unknown;
+};
 /**
  * Definition of a custom button which will be added to all layout items.
  * @remarks
@@ -34,13 +52,6 @@ export type SerialisedLayout = {
         [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.
  * @typeParam T - the type of the state object you wish to serialise with the component.

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/main/layout-main.js

@@ -296,16 +296,11 @@ export class FoundationLayout extends FoundationElement {
      * 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(autoloading = false) {
-        var _b;
+    tryActivatePopoutMode() {
         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 glPopoutConfig = {
             root: {
@@ -657,12 +652,14 @@ export class FoundationLayout extends FoundationElement {
             return;
         this.reloadPending = true;
         setTimeout(() => {
+            var _b;
             this.reloadPending = false;
             if (!this.hasFirstLoaded) {
                 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(true);
+                const res = this.tryLoadLayoutFromLocalStorage() ||
+                    (((_b = this.popoutConfig) === null || _b === void 0 ? void 0 : _b.loadAutomatically) !== false && this.tryActivatePopoutMode());
                 if (!res) {
                     this.loadGLConfigAndSetup(this.layoutConfig);
                 }
@@ -995,8 +992,11 @@ export class FoundationLayout extends FoundationElement {
         this.customButtons.push({
             svg: LAYOUT_ICONS.popoutSVG,
             onClick: (_, elem) => {
-                var _b;
-                const registration = elem.firstChild[instanceContainer].registration;
+                var _b, _c;
+                const instance = elem.firstChild[instanceContainer];
+                const registration = instance.registration;
+                const component = elem.firstChild;
+                const state = (_b = component === null || component === void 0 ? void 0 : component.getCurrentState) === null || _b === void 0 ? void 0 : _b.call(component);
                 // Use default dimensions from config
                 const defaultGeometry = {
                     screenX: undefined,
@@ -1005,7 +1005,7 @@ export class FoundationLayout extends FoundationElement {
                     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);
+                (_c = this.popoutController) === null || _c === void 0 ? void 0 : _c.openPopout(registration, { geometry: defaultGeometry, state }, this.uuid);
                 this.cacheAndSaveLayout();
             },
         });
@@ -1060,6 +1060,7 @@ export const layoutTemplate = html `
     ${when((x) => Boolean(x.popoutConfig), html `
         <foundation-layout-popout-controller
           ${ref('popoutController')}
+          :parentLayout="${(x) => x}"
           channel-name="${(x) => { var _b; return (_b = x.popoutConfig) === null || _b === void 0 ? void 0 : _b.channelName; }}"
         ></foundation-layout-popout-controller>
       `)}

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

@@ -1,6 +1,6 @@
 import { __awaiter, __decorate } from "tslib";
 import { createTypedBroadcastChannel, } from '@genesislcap/foundation-broadcast-channel';
-import { attr, customElement, FASTElement } from '@microsoft/fast-element';
+import { attr, customElement, FASTElement, observable } 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 {
@@ -16,6 +16,7 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
         this.setupUnloadListener();
         if (this.layoutKey) {
             this.startPolling();
+            this.channel.postMessage('popout-handshake', { layoutKey: this.layoutKey });
         }
         else {
             this.setupListener();
@@ -35,16 +36,26 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
     setupChannel() {
         const name = this.channelName || LAYOUT_POPOUT_CHANNEL_NAME;
         this.channel = createTypedBroadcastChannel(name);
+        if (this.layoutKey) {
+            this.channel.onmessage = (ev) => {
+                if (this.channel.isMessageType('popout-sync', ev)) {
+                    const { layoutKey, state } = ev.data.detail;
+                    if (layoutKey === this.layoutKey && state !== undefined) {
+                        this.applyStateToParent(state);
+                    }
+                }
+            };
+        }
     }
     setupListener() {
         if (!this.channel)
             return;
         this.channel.onmessage = (ev) => {
-            if (this.channel.isMessageType('popout-geometry-change', ev)) {
-                const { layoutKey, geometry } = ev.data
+            if (this.channel.isMessageType('popout-update', ev)) {
+                const { layoutKey, geometry, state } = ev.data
                     .detail;
                 const current = this.popoutRegistry.get(layoutKey);
-                this.popoutRegistry.set(layoutKey, Object.assign(Object.assign({}, current), { geometry }));
+                this.popoutRegistry.set(layoutKey, Object.assign(Object.assign({}, current), { geometry, state }));
                 this.emitAutosave();
             }
             else if (this.channel.isMessageType('popout-closed', ev)) {
@@ -52,8 +63,31 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
                 this.popoutRegistry.delete(layoutKey);
                 this.emitAutosave();
             }
+            else if (this.channel.isMessageType('popout-handshake', ev)) {
+                const { layoutKey } = ev.data.detail;
+                const current = this.popoutRegistry.get(layoutKey);
+                if (current) {
+                    this.channel.postMessage('popout-sync', {
+                        layoutKey,
+                        geometry: current.geometry,
+                        state: current.state,
+                    });
+                }
+            }
         };
     }
+    applyStateToParent(state) {
+        if (!this.parentLayout)
+            return;
+        const components = this.parentLayout.getLayoutComponents();
+        for (const group of components) {
+            for (const item of group) {
+                if (item && typeof item.applyState === 'function') {
+                    item.applyState(state);
+                }
+            }
+        }
+    }
     setupUnloadListener() {
         this.unloadHandler = () => {
             if (this.layoutKey) {
@@ -81,11 +115,13 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
     }
     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;
+            const geometry = yield this.getGeometry();
+            const state = this.getComponentState();
+            const update = { geometry, state };
+            const updateString = JSON.stringify(update);
+            if (updateString !== this.lastUpdate) {
+                this.broadcastUpdate(geometry, state);
+                this.lastUpdate = updateString;
             }
         }), POPOUT_GEOMETRY_BROADCAST_INTERVAL);
     }
@@ -100,12 +136,10 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
                 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;
                     }
                 }
@@ -120,31 +154,45 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
             };
         });
     }
-    broadcastGeometry(geometry) {
+    getComponentState() {
+        if (!this.parentLayout)
+            return undefined;
+        const components = this.parentLayout.getLayoutComponents();
+        // In a popout window, we expect exactly one component
+        for (const group of components) {
+            for (const item of group) {
+                if (item && typeof item.getCurrentState === 'function') {
+                    return item.getCurrentState();
+                }
+            }
+        }
+        return undefined;
+    }
+    broadcastUpdate(geometry, state) {
         if (!this.channel || !this.layoutKey)
             return;
-        this.channel.postMessage('popout-geometry-change', {
+        this.channel.postMessage('popout-update', {
             layoutKey: this.layoutKey,
             geometry,
+            state,
         });
-        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 popoutState - Optional state (geometry and component state) to use for the new window.
      * @param uuid - UUID generator from parent layout
      */
-    openPopout(registration, geometry, uuid) {
+    openPopout(registration, popoutState, 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';
+            const geometry = popoutState === null || popoutState === void 0 ? void 0 : popoutState.geometry;
             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();
@@ -176,17 +224,16 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
                     features += `,top=${targetTop}`;
             }
             else {
-                features += ',width=800,height=600'; // Default fallback
+                features += ',width=800,height=600';
             }
             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),
+                geometry: geometry || {},
+                state: popoutState === null || popoutState === void 0 ? void 0 : popoutState.state,
                 window: win,
             });
             return win;
@@ -195,9 +242,7 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
     getRegistry() {
         const output = {};
         for (const [key, val] of this.popoutRegistry.entries()) {
-            if (val.geometry) {
-                output[key] = { geometry: val.geometry };
-            }
+            output[key] = { geometry: val.geometry, state: val.state };
         }
         return output;
     }
@@ -207,17 +252,15 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
     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 });
+                this.popoutRegistry.set(key, { geometry: val.geometry, state: val.state });
             }
             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);
+                return this.openPopout(key, state, uuid);
             }));
         });
     }
@@ -233,6 +276,9 @@ let FoundationLayoutPopoutController = class FoundationLayoutPopoutController ex
 __decorate([
     attr({ attribute: 'channel-name' })
 ], FoundationLayoutPopoutController.prototype, "channelName", void 0);
+__decorate([
+    observable
+], FoundationLayoutPopoutController.prototype, "parentLayout", void 0);
 FoundationLayoutPopoutController = __decorate([
     customElement({
         name: 'foundation-layout-popout-controller',

package/dist/foundation-layout.api.json

@@ -1079,19 +1079,11 @@
             {
               "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 * @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",
+              "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",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "tryActivatePopoutMode(autoloading?: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "boolean"
-                },
-                {
-                  "kind": "Content",
-                  "text": "): "
+                  "text": "tryActivatePopoutMode(): "
                 },
                 {
                   "kind": "Content",
@@ -1104,22 +1096,13 @@
               ],
               "isStatic": false,
               "returnTypeTokenRange": {
-                "startIndex": 3,
-                "endIndex": 4
+                "startIndex": 1,
+                "endIndex": 2
               },
               "releaseTag": "Beta",
               "isProtected": false,
               "overloadIndex": 1,
-              "parameters": [
-                {
-                  "parameterName": "autoloading",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 1,
-                    "endIndex": 2
-                  },
-                  "isOptional": true
-                }
-              ],
+              "parameters": [],
               "isOptional": false,
               "isAbstract": false,
               "name": "tryActivatePopoutMode"

package/dist/foundation-layout.d.ts

@@ -252,11 +252,9 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * 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(autoloading?: boolean): boolean;
+    tryActivatePopoutMode(): boolean;
     /**
      * Try to load a layout from local storage, or return false. Only required if manually calling {@link FoundationLayout.registerItem}
      * @remarks
@@ -592,30 +590,39 @@ export declare class FoundationLayout extends FoundationElement implements Layou
 
            declare class FoundationLayoutPopoutController extends FASTElement {
                channelName: string;
+               /**
+                * Reference to the parent layout to retrieve component state
+                * @internal
+                */
+               parentLayout: LayoutComponent & {
+                   getLayoutComponents(): any[][];
+               };
                private layoutKey;
                private channel;
                private pollInterval;
                private unloadHandler;
-               private lastGeometry;
+               private lastUpdate;
                private popoutRegistry;
                connectedCallback(): void;
                disconnectedCallback(): void;
                private setupChannel;
                private setupListener;
+               private applyStateToParent;
                private setupUnloadListener;
                private teardownUnloadListener;
                private emitAutosave;
                private startPolling;
                private stopPolling;
                private getGeometry;
-               private broadcastGeometry;
+               private getComponentState;
+               private broadcastUpdate;
                /**
                 * 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 popoutState - Optional state (geometry and component state) to use for the new window.
                 * @param uuid - UUID generator from parent layout
                 */
-               openPopout(registration: string, geometry?: any, uuid?: any): Promise<Window>;
+               openPopout(registration: string, popoutState?: PopoutState, uuid?: any): Promise<Window>;
                getRegistry(): {
                    [layoutKey: string]: PopoutState;
                };
@@ -933,6 +940,7 @@ export declare class FoundationLayout extends FoundationElement implements Layou
             */
            declare type PopoutState = {
                geometry: PopoutGeometry;
+               state?: unknown;
            };
 
            /**

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

@@ -370,7 +370,7 @@ Removes all instances of a specified registered item from the layout.
 </td></tr>
 <tr><td>
 
-[tryActivatePopoutMode(autoloading)](./foundation-layout.foundationlayout.tryactivatepopoutmode.md)
+[tryActivatePopoutMode()](./foundation-layout.foundationlayout.tryactivatepopoutmode.md)
 
 
 </td><td>

package/docs/api/foundation-layout.foundationlayout.tryactivatepopoutmode.md

@@ -12,45 +12,8 @@ If in a popout window from the dynamic layout, this function will run the flow t
 **Signature:**
 
 ```typescript
-tryActivatePopoutMode(autoloading?: boolean): boolean;
+tryActivatePopoutMode(): boolean;
 ```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-autoloading
-
-
-</td><td>
-
-boolean
-
-
-</td><td>
-
-_(Optional)_ If true, this respects the  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.
-
-
-</td></tr>
-</tbody></table>
-
 **Returns:**
 
 boolean

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

@@ -75,7 +75,7 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     // @internal
     requestLayoutReload(): void;
     // @beta
-    tryActivatePopoutMode(autoloading?: boolean): boolean;
+    tryActivatePopoutMode(): boolean;
     tryLoadLayoutFromLocalStorage(): boolean;
     // @internal (undocumented)
     usingDeclerativeAPI: boolean;
@@ -271,7 +271,7 @@ 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
+// src/utils/types.ts:56: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.2",
+  "version": "14.393.3-FUI-2471.4",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -38,22 +38,22 @@
     }
   },
   "devDependencies": {
-    "@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"
+    "@genesislcap/foundation-testing": "14.393.3-FUI-2471.4",
+    "@genesislcap/genx": "14.393.3-FUI-2471.4",
+    "@genesislcap/rollup-builder": "14.393.3-FUI-2471.4",
+    "@genesislcap/ts-builder": "14.393.3-FUI-2471.4",
+    "@genesislcap/uvu-playwright-builder": "14.393.3-FUI-2471.4",
+    "@genesislcap/vite-builder": "14.393.3-FUI-2471.4",
+    "@genesislcap/webpack-builder": "14.393.3-FUI-2471.4"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.11.0",
-    "@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",
+    "@genesislcap/foundation-broadcast-channel": "14.393.3-FUI-2471.4",
+    "@genesislcap/foundation-comms": "14.393.3-FUI-2471.4",
+    "@genesislcap/foundation-events": "14.393.3-FUI-2471.4",
+    "@genesislcap/foundation-logger": "14.393.3-FUI-2471.4",
+    "@genesislcap/foundation-ui": "14.393.3-FUI-2471.4",
+    "@genesislcap/foundation-utils": "14.393.3-FUI-2471.4",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
     "@microsoft/fast-foundation": "2.50.0"
@@ -67,5 +67,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "8d5276ff6ff9d909b67f0095a7cc2df458d1e8eb"
+  "gitHead": "774e9a5e7f1787920487b93a1f3ab6683fd08453"
 }