@genesislcap/foundation-layout 15.75.0 → 15.76.1-alpha-aff9783af4.0

package/dist/custom-elements.json

@@ -187,88 +187,47 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/styles/constants.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "glVisualConfig",
-          "return": {
-            "type": {
-              "text": "Omit<LayoutConfig, 'root'>"
-            }
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "LAYOUT_ICONS",
-          "type": {
-            "text": "{\n  renameSVG,\n  maximiseSVG,\n  minimiseSVG,\n  closeSVG,\n  tabDropdownSVG,\n  popoutSVG,\n}"
-          },
-          "default": "{\n  renameSVG,\n  maximiseSVG,\n  minimiseSVG,\n  closeSVG,\n  tabDropdownSVG,\n  popoutSVG,\n}",
-          "description": "A collection of SVG icons in base64 format.",
-          "privacy": "public"
-        }
-      ],
+      "path": "src/main/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "glVisualConfig",
+          "name": "FoundationLayoutItem",
           "declaration": {
-            "name": "glVisualConfig",
-            "module": "src/styles/constants.ts"
+            "name": "FoundationLayoutItem",
+            "module": "./layout-item"
           }
         },
         {
           "kind": "js",
-          "name": "LAYOUT_ICONS",
+          "name": "FoundationLayoutRegion",
           "declaration": {
-            "name": "LAYOUT_ICONS",
-            "module": "src/styles/constants.ts"
+            "name": "FoundationLayoutRegion",
+            "module": "./layout-region"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/dragging.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "globalDraggingStyles",
-          "default": "`\n  .lm_dragProxy .lm_content {\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n  }\n  .lm_dropTargetIndicator {\n    outline: 1px dashed #cccccc;\n    transition: all 200ms ease;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    background: var(${neutralFillStealthRest.cssCustomProperty});\n    opacity: 0.2;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items {\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_dragProxy {\n    cursor: move;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_title {\n    color: white;\n    padding-left: 10px;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n`",
-          "description": "This is defined as a string rather than a css template\nbecause it is applied to a CSSStyleSheet object rather than\nused as a FAST template"
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "globalDraggingStyles",
+          "name": "FoundationLayout",
           "declaration": {
-            "name": "globalDraggingStyles",
-            "module": "src/styles/dragging.styles.ts"
+            "name": "FoundationLayout",
+            "module": "./layout-main"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/index.ts",
-      "declarations": [],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "*",
+          "name": "layoutStyles",
           "declaration": {
-            "name": "*",
-            "package": "./constants"
+            "name": "layoutStyles",
+            "module": "./layout-main"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "layoutTemplate",
           "declaration": {
-            "name": "*",
-            "package": "./dragging.styles"
+            "name": "layoutTemplate",
+            "module": "./layout-main"
           }
         },
         {
@@ -276,629 +235,593 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./layout.styles"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/layout.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "layoutStyles",
-          "default": "css`\n  ${containerStyles}\n  ${loadingSpinnerStyles}\n\n  :host {\n    --foundation-tab-height: calc(\n      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px\n    );\n  }\n\n  .lm_goldenlayout {\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    font-family: var(--body-font);\n    box-sizing: border-box;\n  }\n\n  .lm_goldenlayout * {\n    box-sizing: border-box;\n  }\n\n  .lm_stack.lm_item {\n    background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n    border-style: solid;\n    border-width: var(--rapid-layout-item-border-width, 0);\n    border-color: var(--rapid-layout-item-border-color, var(--neutral-stroke-rest));\n    border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n    box-sizing: border-box;\n  }\n\n  .lm_maximised .lm_header {\n    border-bottom: var(--card-border, 0);\n    position: unset;\n  }\n\n  .lm_maximised .lm_header .lm_tabs {\n    z-index: 3;\n  }\n\n  .lm_content {\n    background-color: var(--neutral-layer-card-container);\n    border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px)\n      var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n      var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n    border: var(--rapid-layout-item-inner-border, 1px solid var(--neutral-stroke-rest));\n    box-sizing: border-box;\n    color: var(--neutral-foreground-rest);\n  }\n\n  .lm_header .lm_tabs {\n    padding: 0 16px;\n  }\n\n  .lm_header .lm_tab.lm_active {\n    background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n    color: var(--accent-foreground-rest);\n    border-style: solid;\n    border-width: var(--tab-active-border-width, 1px 1px 0 1px);\n    border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n  }\n\n  .lm_header .lm_tab {\n    align-items: center;\n    background: var(--tab-rest-background-color, var(--neutral-layer-4));\n    border-style: solid;\n    border-width: var(--tab-rest-border-width, 1px);\n    border-color: var(--tab-rest-border-color, transparent);\n    border-radius: calc(var(--control-corner-radius) * 1.5px)\n      calc(var(--control-corner-radius) * 1.5px) 0 0;\n    color: var(--accent-foreground-rest);\n    display: flex;\n    font-family: inherit;\n    font-size: var(--type-ramp-minus-1-font-size);\n    font-weight: 400;\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    margin-right: 2px;\n    padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n    float: left;\n    cursor: pointer;\n    position: relative;\n  }\n\n  .lm_header .lm_tab:not(.lm_active):hover {\n    background-color: var(--neutral-layer-card-container);\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_controls {\n    top: 4px;\n    display: flex;\n  }\n  .lm_header .lm_controls > * {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.45);\n    background-color: var(\n      --icon-button-background,\n      color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%)\n    );\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    margin-right: 4px;\n    top: 3px;\n    opacity: 1;\n  }\n  .lm_header .lm_controls > *:hover {\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n    cursor: pointer;\n  }\n\n  .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n  }\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n    background-repeat: no-repeat;\n    background-position: center;\n    margin-left: calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n    position: relative;\n  }\n\n  .lm_header .lm_tab:not(.lm_active) .lm_title {\n    color: var(--neutral-foreground-hint);\n  }\n\n  .lm_header .lm_controls .lm_tabdropdown::before {\n    content: none;\n  }\n  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\n  .lm_header .lm_tabdropdown_list {\n    top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    right: 108px;\n    background-color: var(--neutral-layer-3);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab {\n    box-shadow: none;\n    padding: 0 16px;\n    white-space: nowrap;\n    background-color: transparent;\n    color: var(--neutral-foreground-rest);\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    border-radius: 0;\n    overflow: visible;\n    text-overflow: unset;\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n    border-bottom: 0;\n  }\n\n  /* gl base styles start */\n  .lm_root {\n    position: relative;\n  }\n  .lm_row > .lm_item {\n    float: left;\n  }\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n  .lm_maximised {\n    left: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n  .lm_maximise_placeholder {\n    display: none;\n  }\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\n  .lm_splitter:hover,\n  .lm_splitter.lm_dragging {\n    background: var(--accent-fill-rest);\n    border-radius: calc(var(--control-corner-radius) * 4px);\n  }\n  .lm_splitter.lm_vertical .lm_drag_handle {\n    width: 100%;\n    height: 15px;\n    position: absolute;\n    top: -5px;\n    cursor: ns-resize !important;\n  }\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\n  .lm_splitter.lm_horizontal .lm_drag_handle {\n    width: 15px;\n    height: 100%;\n    position: absolute;\n    left: -5px;\n    cursor: ew-resize !important;\n  }\n  .lm_header {\n    overflow: visible;\n    position: relative;\n    border-bottom: var(--card-border, 0);\n  }\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\n  .lm_header .lm_controls > li {\n    cursor: pointer;\n    float: left;\n    width: 18px;\n    height: 18px;\n    text-align: center;\n  }\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\n  .lm_header .lm_tab .lm_title {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    user-select: none;\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    text-align: center;\n  }\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header,\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_left .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items,\n  .lm_stack.lm_left .lm_items,\n  .lm_stack.lm_right .lm_items {\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n  .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n  .lm_stack.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\n  .lm_header .lm_tabdropdown_list {\n    position: absolute;\n    top: 20px;\n    right: 0;\n    z-index: 5;\n    overflow: hidden;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\n  .lm_popin > .lm_icon {\n    z-index: 20;\n  } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
-          "description": "`ElementStyles` which defines the css for FoundationLayout.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "layoutStyles",
-          "declaration": {
-            "name": "layoutStyles",
-            "module": "src/styles/layout.styles.ts"
+            "package": "./layout-components"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/constants.ts",
+      "path": "src/main/layout-components.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "DEFAULT_RELOAD_BUFFER",
+          "name": "foundationLayoutComponents",
           "type": {
-            "text": "number"
+            "text": "object"
           },
-          "default": "500",
-          "description": "Default time in milliseconds for the layout to buffer calls to reloading\nthe layout while the declarative API is loading.\n\nDuring the first load of the layout, a loading spinner will be shown.",
+          "default": "{\n  foundationLayout,\n  foundationLayoutRegion,\n  foundationLayoutItem,\n  register(container?: Container, ...rest: any[]) {\n    if (!container) {\n      // preserve backward compatibility with code that loops through\n      // the values of this object and calls them as funcs with no args\n      return;\n    }\n    for (const key in this) {\n      if (key === 'register') {\n        continue;\n      }\n      this[key]().register(container, ...rest);\n    }\n  },\n}",
+          "description": "Registration object to register the layout with your design system.",
           "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "LAYOUT_POPOUT_CONTROL_KEY",
-          "type": {
-            "text": "string"
-          },
-          "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",
-          "type": {
-            "text": "string"
-          },
-          "default": "'f-layout-popout'",
-          "description": "Put this classname on an element which is a DOM parent of the layout, and\nif the layout goes into popout mode then it will place itself as the only child\nfor the popout container you set."
-        },
-        {
-          "kind": "variable",
-          "name": "DEFAULT_TAB_HEIGHT",
-          "type": {
-            "text": "string"
-          },
-          "default": "'36px'"
-        },
-        {
-          "kind": "function",
-          "name": "getLayoutHeaderHeight"
-        },
-        {
-          "kind": "variable",
-          "name": "DEFAULT_BORDER_WIDTH",
-          "type": {
-            "text": "number"
-          },
-          "default": "0"
-        },
-        {
-          "kind": "function",
-          "name": "getItemBorderWidth"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DEFAULT_RELOAD_BUFFER",
-          "declaration": {
-            "name": "DEFAULT_RELOAD_BUFFER",
-            "module": "src/utils/constants.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LAYOUT_POPOUT_CONTROL_KEY",
-          "declaration": {
-            "name": "LAYOUT_POPOUT_CONTROL_KEY",
-            "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",
-          "declaration": {
-            "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
-            "module": "src/utils/constants.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DEFAULT_TAB_HEIGHT",
-          "declaration": {
-            "name": "DEFAULT_TAB_HEIGHT",
-            "module": "src/utils/constants.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getLayoutHeaderHeight",
-          "declaration": {
-            "name": "getLayoutHeaderHeight",
-            "module": "src/utils/constants.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DEFAULT_BORDER_WIDTH",
-          "declaration": {
-            "name": "DEFAULT_BORDER_WIDTH",
-            "module": "src/utils/constants.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getItemBorderWidth",
+          "name": "foundationLayoutComponents",
           "declaration": {
-            "name": "getItemBorderWidth",
-            "module": "src/utils/constants.ts"
+            "name": "foundationLayoutComponents",
+            "module": "src/main/layout-components.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/error.ts",
+      "path": "src/main/layout-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LayoutUsageError",
-          "superclass": {
-            "name": "Error",
-            "module": "src/utils/error.ts"
-          }
-        },
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LayoutRegistrationError",
-          "superclass": {
-            "name": "Error",
-            "module": "src/utils/error.ts"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LayoutUsageError",
-          "declaration": {
-            "name": "LayoutUsageError",
-            "module": "src/utils/error.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LayoutRegistrationError",
-          "declaration": {
-            "name": "LayoutRegistrationError",
-            "module": "src/utils/error.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/events.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "LayoutEmitEvents",
-          "type": {
-            "text": "{\n  firstLoaded: 'first-loaded',\n  itemAdded: 'item-added',\n  itemRemoved: 'item-removed',\n  itemResized: 'item-resized',\n  stateChanged: 'state-changed',\n}"
-          },
-          "default": "{\n  firstLoaded: 'first-loaded',\n  itemAdded: 'item-added',\n  itemRemoved: 'item-removed',\n  itemResized: 'item-resized',\n  stateChanged: 'state-changed',\n}",
-          "description": "Defines events that the layout system emits\n\n'firstLoaded' - emitted when the layout has finished loading the first time\nusing the declarative API after DEFAULT_RELOAD_BUFFER ms.\n<br/>\n'itemAdded' - emitted when an item is added to the layout'\n<br/>\n'itemRemoved' - emitted when an item is removed from the layout'\n<br/>\n'itemResized' - emitted when the user drags the divider to resize elements\n<br/>\n'stateChanged' - emitted on every persisted layout change. This is the broadest\nevent: it fires wherever the layout caches/saves its state, which includes item\nadd/remove/resize but ALSO the changes the granular events miss — dragging a pane\nto a new position, loading a whole layout via FoundationLayout.loadLayout,\nreverting to the default, and contained-item autosave requests. Prefer this when\nyou need to mirror the layout to your own store and must not miss any change.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "LayoutReceiveEvents",
-          "type": {
-            "text": "{\n  changeTitle: 'change-title',\n  autosave: 'autosave',\n}"
+          "name": "FoundationLayoutItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the title of the item which is displayed on the tab.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "registration",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the registration name for the item, which can be used later to add the item via the JavaScript API using FoundationLayout.addItem.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "_presentation",
+              "type": {
+                "text": "ComponentPresentation | null | undefined"
+              },
+              "privacy": "private",
+              "default": "void 0",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "$presentation",
+              "type": {
+                "text": "ComponentPresentation | null"
+              },
+              "privacy": "public",
+              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "template",
+              "type": {
+                "text": "ElementViewTemplate | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "templateChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "ElementStyles | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stylesChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compose",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "this",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "elementDefinition",
+                  "type": {
+                    "text": "T"
+                  },
+                  "description": "The definition of the element to create the registry\nfunction for."
+                }
+              ],
+              "description": "Defines an element registry function with a set of element definition defaults.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the title of the item which is displayed on the tab.",
+              "fieldName": "title"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
+              "fieldName": "closable"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "fieldName": "size"
+            },
+            {
+              "name": "registration",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the registration name for the item, which can be used later to add the item via the JavaScript API using FoundationLayout.addItem.",
+              "fieldName": "registration"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
           },
-          "default": "{\n  changeTitle: 'change-title',\n  autosave: 'autosave',\n}",
-          "description": "Defines events that the layout system listens for\n\n'changeTitle' - emit this from a contained item to update the title of the window that contains it.\n'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See LayoutComponentWithState.",
-          "privacy": "public"
+          "tagName": "%%prefix%%-layout-item",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LayoutEmitEvents",
-          "declaration": {
-            "name": "LayoutEmitEvents",
-            "module": "src/utils/events.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LayoutReceiveEvents",
+          "name": "FoundationLayoutItem",
           "declaration": {
-            "name": "LayoutReceiveEvents",
-            "module": "src/utils/events.ts"
+            "name": "FoundationLayoutItem",
+            "module": "src/main/layout-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/factory-registry.ts",
+      "path": "src/main/layout-main.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "registerFactory",
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "FoundationLayout",
+          "members": [
             {
-              "name": "key",
+              "kind": "field",
+              "name": "layout",
               "type": {
-                "text": "string"
+                "text": "GoldenLayout"
               },
-              "description": "Unique identifier for the factory. Should be descriptive and unique across the application."
+              "privacy": "private"
             },
             {
-              "name": "factory",
-              "type": {
-                "text": "ComponentFactory"
-              },
-              "description": "The factory function that creates the component."
-            }
-          ],
-          "description": "Registers a factory function with a unique key.\nThis allows framework components to be used in the declarative layout API\nwithout needing to pass function references through HTML attributes.",
-          "privacy": "public"
-        },
-        {
-          "kind": "function",
-          "name": "getFactory",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
-            {
-              "name": "key",
+              "kind": "field",
+              "name": "layoutConfig",
               "type": {
-                "text": "string"
+                "text": "LayoutConfig"
               },
-              "description": "The unique identifier for the factory."
-            }
-          ],
-          "description": "Retrieves a factory function by its key.",
-          "privacy": "public"
-        },
-        {
-          "kind": "function",
-          "name": "unregisterFactory",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+              "privacy": "private",
+              "default": "{ root: undefined }"
+            },
             {
-              "name": "key",
+              "kind": "field",
+              "name": "defaultLayoutConfig",
               "type": {
-                "text": "string"
-              },
-              "description": "The unique identifier for the factory to remove."
-            }
-          ],
-          "description": "Removes a factory from the registry.\nThis is useful for cleanup when a component is unmounted or no longer needed.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerFactory",
-          "declaration": {
-            "name": "registerFactory",
-            "module": "src/utils/factory-registry.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getFactory",
-          "declaration": {
-            "name": "getFactory",
-            "module": "src/utils/factory-registry.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "unregisterFactory",
-          "declaration": {
-            "name": "unregisterFactory",
-            "module": "src/utils/factory-registry.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./constants"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./error"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./events"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./factory-registry"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./misc"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./templates"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./popout-events"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./types"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./error"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/logger.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "logger"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "logger",
-          "declaration": {
-            "name": "logger",
-            "module": "src/utils/logger.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/misc.ts",
-      "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": "js",
-          "name": "PopoutGeometry",
-          "declaration": {
-            "name": "PopoutGeometry",
-            "module": "src/utils/popout-events.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/templates.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/types.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/main/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FoundationLayoutItem",
-          "declaration": {
-            "name": "FoundationLayoutItem",
-            "module": "./layout-item"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FoundationLayoutRegion",
-          "declaration": {
-            "name": "FoundationLayoutRegion",
-            "module": "./layout-region"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FoundationLayout",
-          "declaration": {
-            "name": "FoundationLayout",
-            "module": "./layout-main"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "layoutStyles",
-          "declaration": {
-            "name": "layoutStyles",
-            "module": "./layout-main"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "layoutTemplate",
-          "declaration": {
-            "name": "layoutTemplate",
-            "module": "./layout-main"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./layout-components"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/main/layout-components.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "foundationLayoutComponents",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  foundationLayout,\n  foundationLayoutRegion,\n  foundationLayoutItem,\n  register(container?: Container, ...rest: any[]) {\n    if (!container) {\n      // preserve backward compatibility with code that loops through\n      // the values of this object and calls them as funcs with no args\n      return;\n    }\n    for (const key in this) {\n      if (key === 'register') {\n        continue;\n      }\n      this[key]().register(container, ...rest);\n    }\n  },\n}",
-          "description": "Registration object to register the layout with your design system.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationLayoutComponents",
-          "declaration": {
-            "name": "foundationLayoutComponents",
-            "module": "src/main/layout-components.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/main/layout-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FoundationLayoutItem",
-          "members": [
+                "text": "LayoutConfig"
+              },
+              "privacy": "private",
+              "default": "{ root: undefined }"
+            },
             {
               "kind": "field",
-              "name": "title",
+              "name": "reloadBuffer",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "Sets the title of the item which is displayed on the tab.",
+              "default": "DEFAULT_RELOAD_BUFFER",
+              "description": "Number describing how long to wait in ms before reloading the config when adding items\ndeclaratively by the html API. Default 500 (ms).",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "closable",
+              "name": "reloadPending",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "registeredComponents",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "autoSaveKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Attribute which if set will auto save and load the layout as the user changes it.\nOmit this attribute to disable this feature.\nSet attribute using `auto-save-key`.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "missingItemPlaceholder",
+              "description": "Function which is used to generate the placeholder text when a layout is loaded\nwith a missing item.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "dimensionsConfig",
+              "type": {
+                "text": "LayoutConfig.Dimensions | undefined"
+              },
+              "description": "Apply dimensions config to the layout, such as setting the size of the drag handles.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "hasFirstLoaded",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
+              "description": "Boolean signifies whether the layout has loaded for the first time or not.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "customButtons",
+              "type": {
+                "text": "CustomButton[]"
+              },
+              "default": "[]",
+              "description": "Set custom button definition on this property to add them to the layout header controls",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "dragging",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "class",
+              "privacy": "public",
+              "default": "'FoundationLayoutMain'",
+              "type": {
+                "text": "'FoundationLayoutMain'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lifecycleUpdateToken",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "default": "undefined",
+              "description": "Used to calculate whether a layout item should run its lifecycle methods or not"
+            },
+            {
+              "kind": "field",
+              "name": "popoutConfig",
+              "type": {
+                "text": "LayoutPopoutConfig | undefined"
+              },
+              "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": "method",
+              "name": "layoutRequiredRegistrations",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "layout",
+                  "type": {
+                    "text": "SerialisedLayout"
+                  },
+                  "description": "any version of {@link SerialisedLayout}object describing the layout\n   * "
+                }
+              ],
+              "description": "JS API, public",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "registeredItems",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "getLayout",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "tryActivatePopoutMode",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "tryLoadLayoutFromLocalStorage",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Try to load a layout from local storage, or return false. Only required if manually calling FoundationLayout.registerItem",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "clearAutosaveAndRevertToDefault",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "loadLayout",
+              "parameters": [
+                {
+                  "name": "layout",
+                  "type": {
+                    "text": "SerialisedLayout"
+                  },
+                  "description": "any version of {@link SerialisedLayout}object describing the layout\n   * "
+                },
+                {
+                  "name": "handleMissingItem",
+                  "default": "'error'",
+                  "type": {
+                    "text": "'placeholder' | 'error'"
+                  },
+                  "description": "what to do if the layout contains items that are not currently registered with the layout system. Defaults to 'error' which will throw an error. If set to 'placeholder' then any missing items will be replaced with a placeholder element. You can control the text of the placeholder element with {@link FoundationLayout.missingItemPlaceholder}.\n   * "
+                },
+                {
+                  "name": "disableCache",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "if set to true then the layout will give you a new instance of every item, even if it has a currently cached item to use. Using this will not stop you from saving and loading state via the {@link LayoutComponentWithState}interface. Defaults to false.\n   * "
+                }
+              ],
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "addItem",
+              "parameters": [
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "RegisteredElementConfig | RegisteredElementConfig[]"
+                  },
+                  "description": "{@link RegisteredElementConfig}configuration items for the new items(s). Pass an array of {@link RegisteredElementConfig}to add multiple items at once.\n   * "
+                },
+                {
+                  "name": "placement",
+                  "default": "defaultAddItemPlacement",
+                  "type": {
+                    "text": "Placement"
+                  },
+                  "description": "where and how to add the new items to the layout. For more info and defaults see {@link Placement}.\n   * "
+                }
+              ],
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "removeItems",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "registration",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "string of the registration ID"
+                },
+                {
+                  "name": "force",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "if set to true then the item will be removed even if it is not closable. Defaults to false, which is the same behaviour as the close button on the header."
+                }
+              ],
               "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "registerItem",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "parameters": [
+                {
+                  "name": "registration",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "string of the registration ID"
+                },
+                {
+                  "name": "elementsOrFactory",
+                  "type": {
+                    "text": "Element[] | ComponentFactory"
+                  },
+                  "description": "Either Elements[] containing the reference to the elements to register, or a ComponentFactory function"
+                }
+              ],
               "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "registration",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "updateLifecycleToken",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Sets the registration name for the item, which can be used later to add the item via the JavaScript API using FoundationLayout.addItem.",
-              "privacy": "public"
+              "description": "The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate\nlifecycle methods from running when other items have been added or deleted.\nThis key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.\nThis method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout"
+            },
+            {
+              "kind": "method",
+              "name": "handleGLRunErrors",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Error"
+                  }
+                }
+              ],
+              "description": "For specific golden layout errors we can provide better information to the caller. Else re-throw the original error"
             },
             {
               "kind": "field",
@@ -1012,404 +935,375 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "description": "Sets the title of the item which is displayed on the tab.",
-              "fieldName": "title"
+              "description": "emitted when the layout has finished loading the first time",
+              "name": "first-loaded"
             },
             {
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
-              "fieldName": "closable"
+              "description": "emitted when an item is added to the layout",
+              "name": "item-added"
             },
             {
-              "name": "size",
+              "description": "emitted when an item is removed from the layout",
+              "name": "item-removed"
+            },
+            {
+              "description": "emitted when the user drags the divider to resize elements",
+              "name": "item-resized"
+            },
+            {
+              "description": "emitted on every persisted layout change (add/remove/resize, drag-move, loadLayout, revert-to-default, autosave request); use this to mirror the layout without missing any change",
+              "name": "state-changed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "reload-buffer",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
-              "fieldName": "size"
+              "default": "DEFAULT_RELOAD_BUFFER",
+              "description": "Number describing how long to wait in ms before reloading the config when adding items\ndeclaratively by the html API. Default 500 (ms).",
+              "resolveInitializer": {
+                "module": "/src/utils"
+              },
+              "fieldName": "reloadBuffer"
             },
             {
-              "name": "registration",
+              "name": "auto-save-key",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "description": "Sets the registration name for the item, which can be used later to add the item via the JavaScript API using FoundationLayout.addItem.",
-              "fieldName": "registration"
+              "description": "Attribute which if set will auto save and load the layout as the user changes it.\nOmit this attribute to disable this feature.\nSet attribute using `auto-save-key`.",
+              "fieldName": "autoSaveKey"
             }
           ],
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
           },
-          "tagName": "%%prefix%%-layout-item",
+          "tagName": "%%prefix%%-layout",
           "customElement": true
+        },
+        {
+          "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          :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"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FoundationLayoutItem",
+          "name": "layoutStyles",
           "declaration": {
-            "name": "FoundationLayoutItem",
-            "module": "src/main/layout-item.ts"
+            "name": "layoutStyles",
+            "module": "../styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FoundationLayout",
+          "declaration": {
+            "name": "FoundationLayout",
+            "module": "src/main/layout-main.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "layoutTemplate",
+          "declaration": {
+            "name": "layoutTemplate",
+            "module": "src/main/layout-main.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/main/layout-main.ts",
+      "path": "src/main/layout-popout-controller.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FoundationLayout",
+          "name": "FoundationLayoutPopoutController",
           "members": [
             {
               "kind": "field",
-              "name": "layout",
-              "type": {
-                "text": "GoldenLayout"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "layoutConfig",
-              "type": {
-                "text": "LayoutConfig"
-              },
-              "privacy": "private",
-              "default": "{ root: undefined }"
-            },
-            {
-              "kind": "field",
-              "name": "defaultLayoutConfig",
-              "type": {
-                "text": "LayoutConfig"
-              },
-              "privacy": "private",
-              "default": "{ root: undefined }"
-            },
-            {
-              "kind": "field",
-              "name": "reloadBuffer",
-              "type": {
-                "text": "number"
-              },
-              "default": "DEFAULT_RELOAD_BUFFER",
-              "description": "Number describing how long to wait in ms before reloading the config when adding items\ndeclaratively by the html API. Default 500 (ms).",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "reloadPending",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "registeredComponents",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "autoSaveKey",
+              "name": "channelName",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "Attribute which if set will auto save and load the layout as the user changes it.\nOmit this attribute to disable this feature.\nSet attribute using `auto-save-key`.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "missingItemPlaceholder",
-              "description": "Function which is used to generate the placeholder text when a layout is loaded\nwith a missing item.",
-              "privacy": "public"
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "dimensionsConfig",
+              "name": "layoutKey",
               "type": {
-                "text": "LayoutConfig.Dimensions | undefined"
+                "text": "string"
               },
-              "description": "Apply dimensions config to the layout, such as setting the size of the drag handles.",
-              "privacy": "public"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasFirstLoaded",
+              "name": "channel",
               "type": {
-                "text": "boolean"
+                "text": "TypedBroadcastChannel<LayoutPopoutEvents>"
               },
-              "default": "false",
-              "description": "Boolean signifies whether the layout has loaded for the first time or not.",
-              "privacy": "public"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "customButtons",
+              "name": "pollInterval",
               "type": {
-                "text": "CustomButton[]"
+                "text": "any"
               },
-              "default": "[]",
-              "description": "Set custom button definition on this property to add them to the layout header controls",
-              "privacy": "public"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "dragging",
+              "name": "unloadHandler",
               "type": {
-                "text": "boolean"
+                "text": "() => void"
               },
-              "default": "false",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "class",
-              "privacy": "public",
-              "default": "'FoundationLayoutMain'",
-              "type": {
-                "text": "'FoundationLayoutMain'"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "lifecycleUpdateToken",
+              "name": "lastUpdate",
               "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "public",
-              "default": "undefined",
-              "description": "Used to calculate whether a layout item should run its lifecycle methods or not"
+                "text": "string"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "popoutConfig",
+              "name": "popoutRegistry",
               "type": {
-                "text": "LayoutPopoutConfig | undefined"
+                "text": "Map<\n    string,\n    { geometry: PopoutGeometry; state?: unknown; window?: Window }\n  >"
               },
-              "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."
+              "privacy": "private",
+              "default": "new Map()"
             },
             {
               "kind": "method",
-              "name": "layoutRequiredRegistrations",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "name": "setupChannel",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "applyStateToParent",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "layout",
+                  "name": "state",
                   "type": {
-                    "text": "SerialisedLayout"
-                  },
-                  "description": "any version of {@link SerialisedLayout}object describing the layout\n   * "
+                    "text": "unknown"
+                  }
                 }
-              ],
-              "description": "JS API, public",
-              "privacy": "public"
+              ]
             },
             {
               "kind": "method",
-              "name": "registeredItems",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "privacy": "public"
+              "name": "setupUnloadListener",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getLayout",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "privacy": "public"
+              "name": "teardownUnloadListener",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "tryActivatePopoutMode",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "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."
+              "name": "emitAutosave",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "tryLoadLayoutFromLocalStorage",
+              "name": "startPolling",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stopPolling",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getGeometry",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "Promise<PopoutGeometry>"
                 }
-              },
-              "description": "Try to load a layout from local storage, or return false. Only required if manually calling FoundationLayout.registerItem",
-              "privacy": "public"
+              }
             },
             {
               "kind": "method",
-              "name": "clearAutosaveAndRevertToDefault",
+              "name": "getComponentState",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "unknown"
                 }
-              },
-              "privacy": "public"
+              }
             },
             {
               "kind": "method",
-              "name": "loadLayout",
+              "name": "broadcastUpdate",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "layout",
-                  "type": {
-                    "text": "SerialisedLayout"
-                  },
-                  "description": "any version of {@link SerialisedLayout}object describing the layout\n   * "
-                },
-                {
-                  "name": "handleMissingItem",
-                  "default": "'error'",
+                  "name": "geometry",
                   "type": {
-                    "text": "'placeholder' | 'error'"
-                  },
-                  "description": "what to do if the layout contains items that are not currently registered with the layout system. Defaults to 'error' which will throw an error. If set to 'placeholder' then any missing items will be replaced with a placeholder element. You can control the text of the placeholder element with {@link FoundationLayout.missingItemPlaceholder}.\n   * "
+                    "text": "PopoutGeometry"
+                  }
                 },
                 {
-                  "name": "disableCache",
-                  "default": "false",
+                  "name": "state",
+                  "optional": true,
                   "type": {
-                    "text": "boolean"
-                  },
-                  "description": "if set to true then the layout will give you a new instance of every item, even if it has a currently cached item to use. Using this will not stop you from saving and loading state via the {@link LayoutComponentWithState}interface. Defaults to false.\n   * "
+                    "text": "unknown"
+                  }
                 }
-              ],
-              "privacy": "public"
+              ]
             },
             {
               "kind": "method",
-              "name": "addItem",
+              "name": "openPopout",
+              "privacy": "public",
               "parameters": [
                 {
-                  "name": "config",
+                  "name": "registration",
                   "type": {
-                    "text": "RegisteredElementConfig | RegisteredElementConfig[]"
+                    "text": "string"
                   },
-                  "description": "{@link RegisteredElementConfig}configuration items for the new items(s). Pass an array of {@link RegisteredElementConfig}to add multiple items at once.\n   * "
+                  "description": "The registration ID of the component to pop out."
                 },
                 {
-                  "name": "placement",
-                  "default": "defaultAddItemPlacement",
-                  "type": {
-                    "text": "Placement"
-                  },
-                  "description": "where and how to add the new items to the layout. For more info and defaults see {@link Placement}.\n   * "
-                }
-              ],
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "removeItems",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "registration",
+                  "name": "popoutState",
+                  "optional": true,
                   "type": {
-                    "text": "string"
+                    "text": "PopoutState"
                   },
-                  "description": "string of the registration ID"
+                  "description": "Optional state (geometry and component state) to use for the new window."
                 },
                 {
-                  "name": "force",
-                  "default": "false",
+                  "name": "uuid",
+                  "optional": true,
                   "type": {
-                    "text": "boolean"
+                    "text": "any"
                   },
-                  "description": "if set to true then the item will be removed even if it is not closable. Defaults to false, which is the same behaviour as the close button on the header."
+                  "description": "UUID generator from parent layout"
                 }
               ],
-              "privacy": "public"
+              "description": "Opens a component in a popout window."
             },
             {
               "kind": "method",
-              "name": "registerItem",
+              "name": "getRegistry",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "{ [layoutKey: string]: PopoutState }"
                 }
-              },
+              }
+            },
+            {
+              "kind": "method",
+              "name": "restorePopouts",
+              "privacy": "public",
               "parameters": [
                 {
-                  "name": "registration",
+                  "name": "registry",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "string of the registration ID"
+                    "text": "{ [layoutKey: string]: PopoutState }"
+                  }
                 },
                 {
-                  "name": "elementsOrFactory",
+                  "name": "uuid",
                   "type": {
-                    "text": "Element[] | ComponentFactory"
-                  },
-                  "description": "Either Elements[] containing the reference to the elements to register, or a ComponentFactory function"
+                    "text": "any"
+                  }
                 }
               ],
-              "privacy": "public"
+              "description": "Restores popouts from a registry"
             },
             {
               "kind": "method",
-              "name": "updateLifecycleToken",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "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",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FoundationLayoutRegion",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
               },
-              "description": "The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate\nlifecycle methods from running when other items have been added or deleted.\nThis key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.\nThis method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout"
+              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "privacy": "public"
             },
             {
-              "kind": "method",
-              "name": "handleGLRunErrors",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Error"
-                  }
-                }
-              ],
-              "description": "For specific golden layout errors we can provide better information to the caller. Else re-throw the original error"
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "LayoutRegionType"
+              },
+              "default": "layoutRegionValue[0]",
+              "description": "Defines the LayoutRegionType| type of the region.\nDefaults to `horizontal`.",
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -1523,528 +1417,634 @@
               }
             }
           ],
-          "events": [
-            {
-              "description": "emitted when the layout has finished loading the first time",
-              "name": "first-loaded"
-            },
-            {
-              "description": "emitted when an item is added to the layout",
-              "name": "item-added"
-            },
-            {
-              "description": "emitted when an item is removed from the layout",
-              "name": "item-removed"
-            },
-            {
-              "description": "emitted when the user drags the divider to resize elements",
-              "name": "item-resized"
-            },
-            {
-              "description": "emitted on every persisted layout change (add/remove/resize, drag-move, loadLayout, revert-to-default, autosave request); use this to mirror the layout without missing any change",
-              "name": "state-changed"
-            }
-          ],
           "attributes": [
             {
-              "name": "reload-buffer",
+              "name": "size",
               "type": {
-                "text": "number"
-              },
-              "default": "DEFAULT_RELOAD_BUFFER",
-              "description": "Number describing how long to wait in ms before reloading the config when adding items\ndeclaratively by the html API. Default 500 (ms).",
-              "resolveInitializer": {
-                "module": "/src/utils"
+                "text": "string"
               },
-              "fieldName": "reloadBuffer"
+              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "fieldName": "size"
             },
             {
-              "name": "auto-save-key",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "LayoutRegionType"
               },
-              "description": "Attribute which if set will auto save and load the layout as the user changes it.\nOmit this attribute to disable this feature.\nSet attribute using `auto-save-key`.",
-              "fieldName": "autoSaveKey"
+              "default": "defaultLayoutType",
+              "description": "Defines the LayoutRegionType| type of the region.\nDefaults to `horizontal`.",
+              "resolveInitializer": {
+                "module": "src/main/layout-region.ts"
+              },
+              "fieldName": "type"
             }
           ],
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
           },
-          "tagName": "%%prefix%%-layout",
+          "tagName": "%%prefix%%-layout-region",
           "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FoundationLayoutRegion",
+          "declaration": {
+            "name": "FoundationLayoutRegion",
+            "module": "src/main/layout-region.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/constants.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "glVisualConfig",
+          "return": {
+            "type": {
+              "text": "Omit<LayoutConfig, 'root'>"
+            }
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "LAYOUT_ICONS",
+          "type": {
+            "text": "{\n  renameSVG,\n  maximiseSVG,\n  minimiseSVG,\n  closeSVG,\n  tabDropdownSVG,\n  popoutSVG,\n}"
+          },
+          "default": "{\n  renameSVG,\n  maximiseSVG,\n  minimiseSVG,\n  closeSVG,\n  tabDropdownSVG,\n  popoutSVG,\n}",
+          "description": "A collection of SVG icons in base64 format.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "glVisualConfig",
+          "declaration": {
+            "name": "glVisualConfig",
+            "module": "src/styles/constants.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LAYOUT_ICONS",
+          "declaration": {
+            "name": "LAYOUT_ICONS",
+            "module": "src/styles/constants.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/dragging.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "globalDraggingStyles",
+          "default": "`\n  .lm_dragProxy .lm_content {\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n  }\n  .lm_dropTargetIndicator {\n    outline: 1px dashed #cccccc;\n    transition: all 200ms ease;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    background: var(${neutralFillStealthRest.cssCustomProperty});\n    opacity: 0.2;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items {\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_dragProxy {\n    cursor: move;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_title {\n    color: white;\n    padding-left: 10px;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n`",
+          "description": "This is defined as a string rather than a css template\nbecause it is applied to a CSSStyleSheet object rather than\nused as a FAST template"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "globalDraggingStyles",
+          "declaration": {
+            "name": "globalDraggingStyles",
+            "module": "src/styles/dragging.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./constants"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./dragging.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./layout.styles"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/layout.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "layoutStyles",
+          "default": "css`\n  ${containerStyles}\n  ${loadingSpinnerStyles}\n\n  :host {\n    --foundation-tab-height: calc(\n      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px\n    );\n  }\n\n  .lm_goldenlayout {\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    font-family: var(--body-font);\n    box-sizing: border-box;\n  }\n\n  .lm_goldenlayout * {\n    box-sizing: border-box;\n  }\n\n  .lm_stack.lm_item {\n    background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n    border-style: solid;\n    border-width: var(--rapid-layout-item-border-width, 0);\n    border-color: var(--rapid-layout-item-border-color, var(--neutral-stroke-rest));\n    border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n    box-sizing: border-box;\n  }\n\n  .lm_maximised .lm_header {\n    border-bottom: var(--card-border, 0);\n    position: unset;\n  }\n\n  .lm_maximised .lm_header .lm_tabs {\n    z-index: 3;\n  }\n\n  .lm_content {\n    background-color: var(--neutral-layer-card-container);\n    border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px)\n      var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n      var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n    border: var(--rapid-layout-item-inner-border, 1px solid var(--neutral-stroke-rest));\n    box-sizing: border-box;\n    color: var(--neutral-foreground-rest);\n  }\n\n  .lm_header .lm_tabs {\n    padding: 0 16px;\n  }\n\n  .lm_header .lm_tab.lm_active {\n    background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n    color: var(--accent-foreground-rest);\n    border-style: solid;\n    border-width: var(--tab-active-border-width, 1px 1px 0 1px);\n    border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n  }\n\n  .lm_header .lm_tab {\n    align-items: center;\n    background: var(--tab-rest-background-color, var(--neutral-layer-4));\n    border-style: solid;\n    border-width: var(--tab-rest-border-width, 1px);\n    border-color: var(--tab-rest-border-color, transparent);\n    border-radius: calc(var(--control-corner-radius) * 1.5px)\n      calc(var(--control-corner-radius) * 1.5px) 0 0;\n    color: var(--accent-foreground-rest);\n    display: flex;\n    font-family: inherit;\n    font-size: var(--type-ramp-minus-1-font-size);\n    font-weight: 400;\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    margin-right: 2px;\n    padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n    float: left;\n    cursor: pointer;\n    position: relative;\n  }\n\n  .lm_header .lm_tab:not(.lm_active):hover {\n    background-color: var(--neutral-layer-card-container);\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_controls {\n    top: 4px;\n    display: flex;\n  }\n  .lm_header .lm_controls > * {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.45);\n    background-color: var(\n      --icon-button-background,\n      color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%)\n    );\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    margin-right: 4px;\n    top: 3px;\n    opacity: 1;\n  }\n  .lm_header .lm_controls > *:hover {\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n    cursor: pointer;\n  }\n\n  .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n  }\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n    background-repeat: no-repeat;\n    background-position: center;\n    margin-left: calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n    position: relative;\n  }\n\n  .lm_header .lm_tab:not(.lm_active) .lm_title {\n    color: var(--neutral-foreground-hint);\n  }\n\n  .lm_header .lm_controls .lm_tabdropdown::before {\n    content: none;\n  }\n  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\n  .lm_header .lm_tabdropdown_list {\n    top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    right: 108px;\n    background-color: var(--neutral-layer-3);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab {\n    box-shadow: none;\n    padding: 0 16px;\n    white-space: nowrap;\n    background-color: transparent;\n    color: var(--neutral-foreground-rest);\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    border-radius: 0;\n    overflow: visible;\n    text-overflow: unset;\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n    border-bottom: 0;\n  }\n\n  /* gl base styles start */\n  .lm_root {\n    position: relative;\n  }\n  .lm_row > .lm_item {\n    float: left;\n  }\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n  .lm_maximised {\n    left: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n  .lm_maximise_placeholder {\n    display: none;\n  }\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\n  .lm_splitter:hover,\n  .lm_splitter.lm_dragging {\n    background: var(--accent-fill-rest);\n    border-radius: calc(var(--control-corner-radius) * 4px);\n  }\n  .lm_splitter.lm_vertical .lm_drag_handle {\n    width: 100%;\n    height: 15px;\n    position: absolute;\n    top: -5px;\n    cursor: ns-resize !important;\n  }\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\n  .lm_splitter.lm_horizontal .lm_drag_handle {\n    width: 15px;\n    height: 100%;\n    position: absolute;\n    left: -5px;\n    cursor: ew-resize !important;\n  }\n  .lm_header {\n    overflow: visible;\n    position: relative;\n    border-bottom: var(--card-border, 0);\n  }\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\n  .lm_header .lm_controls > li {\n    cursor: pointer;\n    float: left;\n    width: 18px;\n    height: 18px;\n    text-align: center;\n  }\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\n  .lm_header .lm_tab .lm_title {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    user-select: none;\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    text-align: center;\n  }\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header,\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_left .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items,\n  .lm_stack.lm_left .lm_items,\n  .lm_stack.lm_right .lm_items {\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n  .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n  .lm_stack.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\n  .lm_header .lm_tabdropdown_list {\n    position: absolute;\n    top: 20px;\n    right: 0;\n    z-index: 5;\n    overflow: hidden;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\n  .lm_popin > .lm_icon {\n    z-index: 20;\n  } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
+          "description": "`ElementStyles` which defines the css for FoundationLayout.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "layoutStyles",
+          "declaration": {
+            "name": "layoutStyles",
+            "module": "src/styles/layout.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/constants.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_RELOAD_BUFFER",
+          "type": {
+            "text": "number"
+          },
+          "default": "500",
+          "description": "Default time in milliseconds for the layout to buffer calls to reloading\nthe layout while the declarative API is loading.\n\nDuring the first load of the layout, a loading spinner will be shown.",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "LAYOUT_POPOUT_CONTROL_KEY",
+          "type": {
+            "text": "string"
+          },
+          "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",
+          "type": {
+            "text": "string"
+          },
+          "default": "'f-layout-popout'",
+          "description": "Put this classname on an element which is a DOM parent of the layout, and\nif the layout goes into popout mode then it will place itself as the only child\nfor the popout container you set."
+        },
+        {
+          "kind": "variable",
+          "name": "DEFAULT_TAB_HEIGHT",
+          "type": {
+            "text": "string"
+          },
+          "default": "'36px'"
+        },
+        {
+          "kind": "function",
+          "name": "getLayoutHeaderHeight"
         },
         {
           "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          :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"
+          "name": "DEFAULT_BORDER_WIDTH",
+          "type": {
+            "text": "number"
+          },
+          "default": "0"
+        },
+        {
+          "kind": "function",
+          "name": "getItemBorderWidth"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "layoutStyles",
+          "name": "DEFAULT_RELOAD_BUFFER",
           "declaration": {
-            "name": "layoutStyles",
-            "module": "../styles"
+            "name": "DEFAULT_RELOAD_BUFFER",
+            "module": "src/utils/constants.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FoundationLayout",
+          "name": "LAYOUT_POPOUT_CONTROL_KEY",
           "declaration": {
-            "name": "FoundationLayout",
-            "module": "src/main/layout-main.ts"
+            "name": "LAYOUT_POPOUT_CONTROL_KEY",
+            "module": "src/utils/constants.ts"
           }
         },
         {
           "kind": "js",
-          "name": "layoutTemplate",
+          "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
           "declaration": {
-            "name": "layoutTemplate",
-            "module": "src/main/layout-main.ts"
+            "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
+            "module": "src/utils/constants.ts"
           }
-        }
-      ]
-    },
-    {
-      "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": "lastUpdate",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "popoutRegistry",
-              "type": {
-                "text": "Map<\n    string,\n    { geometry: PopoutGeometry; state?: unknown; window?: Window }\n  >"
-              },
-              "privacy": "private",
-              "default": "new Map()"
-            },
-            {
-              "kind": "method",
-              "name": "setupChannel",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setupListener",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "applyStateToParent",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "state",
-                  "type": {
-                    "text": "unknown"
-                  }
-                }
-              ]
-            },
-            {
-              "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",
-              "return": {
-                "type": {
-                  "text": "Promise<PopoutGeometry>"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getComponentState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "unknown"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "broadcastUpdate",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "geometry",
-                  "type": {
-                    "text": "PopoutGeometry"
-                  }
-                },
-                {
-                  "name": "state",
-                  "optional": true,
-                  "type": {
-                    "text": "unknown"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "openPopout",
-              "privacy": "public",
-              "parameters": [
-                {
-                  "name": "registration",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The registration ID of the component to pop out."
-                },
-                {
-                  "name": "popoutState",
-                  "optional": true,
-                  "type": {
-                    "text": "PopoutState"
-                  },
-                  "description": "Optional state (geometry and component state) 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": "js",
+          "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
+          "declaration": {
+            "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
+            "module": "src/utils/constants.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFAULT_TAB_HEIGHT",
+          "declaration": {
+            "name": "DEFAULT_TAB_HEIGHT",
+            "module": "src/utils/constants.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getLayoutHeaderHeight",
+          "declaration": {
+            "name": "getLayoutHeaderHeight",
+            "module": "src/utils/constants.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFAULT_BORDER_WIDTH",
+          "declaration": {
+            "name": "DEFAULT_BORDER_WIDTH",
+            "module": "src/utils/constants.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getItemBorderWidth",
+          "declaration": {
+            "name": "getItemBorderWidth",
+            "module": "src/utils/constants.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/error.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LayoutUsageError",
+          "superclass": {
+            "name": "Error",
+            "module": "src/utils/error.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LayoutRegistrationError",
+          "superclass": {
+            "name": "Error",
+            "module": "src/utils/error.ts"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LayoutUsageError",
+          "declaration": {
+            "name": "LayoutUsageError",
+            "module": "src/utils/error.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LayoutRegistrationError",
+          "declaration": {
+            "name": "LayoutRegistrationError",
+            "module": "src/utils/error.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/events.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LayoutEmitEvents",
+          "type": {
+            "text": "{\n  firstLoaded: 'first-loaded',\n  itemAdded: 'item-added',\n  itemRemoved: 'item-removed',\n  itemResized: 'item-resized',\n  stateChanged: 'state-changed',\n}"
+          },
+          "default": "{\n  firstLoaded: 'first-loaded',\n  itemAdded: 'item-added',\n  itemRemoved: 'item-removed',\n  itemResized: 'item-resized',\n  stateChanged: 'state-changed',\n}",
+          "description": "Defines events that the layout system emits\n\n'firstLoaded' - emitted when the layout has finished loading the first time\nusing the declarative API after DEFAULT_RELOAD_BUFFER ms.\n<br/>\n'itemAdded' - emitted when an item is added to the layout'\n<br/>\n'itemRemoved' - emitted when an item is removed from the layout'\n<br/>\n'itemResized' - emitted when the user drags the divider to resize elements\n<br/>\n'stateChanged' - emitted on every persisted layout change. This is the broadest\nevent: it fires wherever the layout caches/saves its state, which includes item\nadd/remove/resize but ALSO the changes the granular events miss — dragging a pane\nto a new position, loading a whole layout via FoundationLayout.loadLayout,\nreverting to the default, and contained-item autosave requests. Prefer this when\nyou need to mirror the layout to your own store and must not miss any change.",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "LayoutReceiveEvents",
+          "type": {
+            "text": "{\n  changeTitle: 'change-title',\n  autosave: 'autosave',\n}"
+          },
+          "default": "{\n  changeTitle: 'change-title',\n  autosave: 'autosave',\n}",
+          "description": "Defines events that the layout system listens for\n\n'changeTitle' - emit this from a contained item to update the title of the window that contains it.\n'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See LayoutComponentWithState.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LayoutEmitEvents",
+          "declaration": {
+            "name": "LayoutEmitEvents",
+            "module": "src/utils/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LayoutReceiveEvents",
+          "declaration": {
+            "name": "LayoutReceiveEvents",
+            "module": "src/utils/events.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/factory-registry.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "registerFactory",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
             {
-              "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"
+              "name": "key",
+              "type": {
+                "text": "string"
+              },
+              "description": "Unique identifier for the factory. Should be descriptive and unique across the application."
             },
             {
-              "kind": "method",
-              "name": "closeAllPopouts",
-              "privacy": "public"
+              "name": "factory",
+              "type": {
+                "text": "ComponentFactory"
+              },
+              "description": "The factory function that creates the component."
             }
           ],
-          "attributes": [
+          "description": "Registers a factory function with a unique key.\nThis allows framework components to be used in the declarative layout API\nwithout needing to pass function references through HTML attributes.",
+          "privacy": "public"
+        },
+        {
+          "kind": "function",
+          "name": "getFactory",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
             {
-              "name": "channel-name",
+              "name": "key",
               "type": {
                 "text": "string"
               },
-              "fieldName": "channelName"
+              "description": "The unique identifier for the factory."
             }
           ],
-          "superclass": {
-            "name": "FASTElement",
-            "package": "@microsoft/fast-element"
+          "description": "Retrieves a factory function by its key.",
+          "privacy": "public"
+        },
+        {
+          "kind": "function",
+          "name": "unregisterFactory",
+          "return": {
+            "type": {
+              "text": ""
+            }
           },
-          "tagName": "foundation-layout-popout-controller",
-          "customElement": true
+          "parameters": [
+            {
+              "name": "key",
+              "type": {
+                "text": "string"
+              },
+              "description": "The unique identifier for the factory to remove."
+            }
+          ],
+          "description": "Removes a factory from the registry.\nThis is useful for cleanup when a component is unmounted or no longer needed.",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FoundationLayoutPopoutController",
+          "name": "registerFactory",
+          "declaration": {
+            "name": "registerFactory",
+            "module": "src/utils/factory-registry.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getFactory",
+          "declaration": {
+            "name": "getFactory",
+            "module": "src/utils/factory-registry.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "unregisterFactory",
+          "declaration": {
+            "name": "unregisterFactory",
+            "module": "src/utils/factory-registry.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./constants"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./error"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./events"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./factory-registry"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./misc"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
           "declaration": {
-            "name": "FoundationLayoutPopoutController",
-            "module": "src/main/layout-popout-controller.ts"
+            "name": "*",
+            "package": "./templates"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "foundation-layout-popout-controller",
+          "kind": "js",
+          "name": "*",
           "declaration": {
-            "name": "FoundationLayoutPopoutController",
-            "module": "src/main/layout-popout-controller.ts"
+            "name": "*",
+            "package": "./popout-events"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./error"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/main/layout-region.ts",
+      "path": "src/utils/logger.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "FoundationLayoutRegion",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "LayoutRegionType"
-              },
-              "default": "layoutRegionValue[0]",
-              "description": "Defines the LayoutRegionType| type of the region.\nDefaults to `horizontal`.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "_presentation",
-              "type": {
-                "text": "ComponentPresentation | null | undefined"
-              },
-              "privacy": "private",
-              "default": "void 0",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "$presentation",
-              "type": {
-                "text": "ComponentPresentation | null"
-              },
-              "privacy": "public",
-              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "template",
-              "type": {
-                "text": "ElementViewTemplate | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "templateChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "styles",
-              "type": {
-                "text": "ElementStyles | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "stylesChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "compose",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "this",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "elementDefinition",
-                  "type": {
-                    "text": "T"
-                  },
-                  "description": "The definition of the element to create the registry\nfunction for."
-                }
-              ],
-              "description": "Defines an element registry function with a set of element definition defaults.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
-              "fieldName": "size"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "LayoutRegionType"
-              },
-              "default": "defaultLayoutType",
-              "description": "Defines the LayoutRegionType| type of the region.\nDefaults to `horizontal`.",
-              "resolveInitializer": {
-                "module": "src/main/layout-region.ts"
-              },
-              "fieldName": "type"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+          "kind": "variable",
+          "name": "logger"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "logger",
+          "declaration": {
+            "name": "logger",
+            "module": "src/utils/logger.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/misc.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/popout-events.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LAYOUT_POPOUT_CHANNEL_NAME",
+          "type": {
+            "text": "string"
           },
-          "tagName": "%%prefix%%-layout-region",
-          "customElement": true
+          "default": "'f-layout-popout-channel'",
+          "description": "Name of the default broadcast channel used for layout popouts",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FoundationLayoutRegion",
+          "name": "LAYOUT_POPOUT_CHANNEL_NAME",
           "declaration": {
-            "name": "FoundationLayoutRegion",
-            "module": "src/main/layout-region.ts"
+            "name": "LAYOUT_POPOUT_CHANNEL_NAME",
+            "module": "src/utils/popout-events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PopoutGeometry",
+          "declaration": {
+            "name": "PopoutGeometry",
+            "module": "src/utils/popout-events.ts"
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/templates.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/types.ts",
+      "declarations": [],
+      "exports": []
     }
   ]
 }