@genesislcap/foundation-layout 14.400.0 → 14.401.0-TPD-4881.2

package/dist/custom-elements.json

@@ -187,47 +187,88 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/main/index.ts",
-      "declarations": [],
+      "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": "FoundationLayoutItem",
+          "name": "glVisualConfig",
           "declaration": {
-            "name": "FoundationLayoutItem",
-            "module": "./layout-item"
+            "name": "glVisualConfig",
+            "module": "src/styles/constants.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FoundationLayoutRegion",
+          "name": "LAYOUT_ICONS",
           "declaration": {
-            "name": "FoundationLayoutRegion",
-            "module": "./layout-region"
+            "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": "FoundationLayout",
+          "name": "globalDraggingStyles",
           "declaration": {
-            "name": "FoundationLayout",
-            "module": "./layout-main"
+            "name": "globalDraggingStyles",
+            "module": "src/styles/dragging.styles.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/index.ts",
+      "declarations": [],
+      "exports": [
         {
           "kind": "js",
-          "name": "layoutStyles",
+          "name": "*",
           "declaration": {
-            "name": "layoutStyles",
-            "module": "./layout-main"
+            "name": "*",
+            "package": "./constants"
           }
         },
         {
           "kind": "js",
-          "name": "layoutTemplate",
+          "name": "*",
           "declaration": {
-            "name": "layoutTemplate",
-            "module": "./layout-main"
+            "name": "*",
+            "package": "./dragging.styles"
           }
         },
         {
@@ -235,1070 +276,600 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./layout-components"
+            "package": "./layout.styles"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/main/layout-components.ts",
+      "path": "src/styles/layout.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "foundationLayoutComponents",
+          "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  }\n\n  .lm_stack.lm_item {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n  }\n\n  .lm_maximised .lm_header {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\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);\n    border: 1px solid;\n    border-color: 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_stack > .lm_items {\n    box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);\n  }\n\n  .lm_header .lm_tab.lm_active.lm_focused {\n    background-color: var(--neutral-layer-card-container);\n  }\n\n  .lm_header .lm_tab.lm_active {\n    background-color: var(--neutral-layer-card-container);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-bottom: 0;\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_tab {\n    align-items: center;\n    background-color: var(--neutral-layer-4);\n    border: 0;\n    border-bottom-color: transparent;\n    border-bottom: 0 solid;\n    border-color: var(--neutral-stroke-rest);\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: 13px;\n    font-weight: 400;\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    margin-right: 2px;\n    margin-top: 3px;\n    padding: 2px 16px;\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\n  .lm_header .lm_controls > * {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    margin-right: 4px;\n    top: 3px;\n    opacity: 100%;\n  }\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\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\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    margin-left: 12px;\n    position: relative;\n    top: 0;\n    right: 0;\n  }\n\n  .lm_header .lm_tab.lm_active {\n    padding: 4px 25px 3px 10px;\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\n  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\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: 0 5px 15px rgb(0 0 0 / 35%);\n  }\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: normal;\n  }\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\n  .lm_row > .lm_item {\n    float: left;\n  }\n\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n\n  .lm_maximised {\n    left: 0;\n    padding: 1px;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n\n  .lm_maximise_placeholder {\n    display: none;\n  }\n\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\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\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\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\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\n  .lm_header {\n    overflow: visible;\n    position: relative;\n  }\n\n  .lm_header [class^='lm_'] {\n    box-sizing: content-box !important;\n  }\n\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\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\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n\n  .lm_header .lm_tab {\n    cursor: pointer;\n    float: left;\n    margin-top: 1px;\n    padding: 3px 25px 3px 10px;\n    position: relative;\n  }\n\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\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\n  .lm_header .lm_tab .lm_title:only-child {\n    padding-left: 10px;\n  }\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    top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n    position: absolute;\n    right: 0;\n    text-align: center;\n  }\n\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\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\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\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\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\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\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\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\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\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\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\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\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\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\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\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\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\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\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\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\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": "object"
+            "text": "number"
           },
-          "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.",
+          "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"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "foundationLayoutComponents",
+          "name": "DEFAULT_RELOAD_BUFFER",
           "declaration": {
-            "name": "foundationLayoutComponents",
-            "module": "src/main/layout-components.ts"
+            "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": "javascript-module",
-      "path": "src/main/layout-item.ts",
+      "path": "src/utils/error.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "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"
-            }
-          ],
+          "name": "LayoutUsageError",
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "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}"
           },
-          "tagName": "%%prefix%%-layout-item",
-          "customElement": true
+          "default": "{\n  firstLoaded: 'first-loaded',\n  itemAdded: 'item-added',\n  itemRemoved: 'item-removed',\n  itemResized: 'item-resized',\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",
+          "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": "FoundationLayoutItem",
+          "name": "LayoutEmitEvents",
           "declaration": {
-            "name": "FoundationLayoutItem",
-            "module": "src/main/layout-item.ts"
+            "name": "LayoutEmitEvents",
+            "module": "src/utils/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LayoutReceiveEvents",
+          "declaration": {
+            "name": "LayoutReceiveEvents",
+            "module": "src/utils/events.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/main/layout-main.ts",
+      "path": "src/utils/factory-registry.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "FoundationLayout",
-          "members": [
+          "kind": "function",
+          "name": "registerFactory",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "layout",
+              "name": "key",
               "type": {
-                "text": "GoldenLayout"
+                "text": "string"
               },
-              "privacy": "private"
+              "description": "Unique identifier for the factory. Should be descriptive and unique across the application."
             },
             {
-              "kind": "field",
-              "name": "layoutConfig",
+              "name": "factory",
               "type": {
-                "text": "LayoutConfig"
+                "text": "ComponentFactory"
               },
-              "privacy": "private",
-              "default": "{ root: undefined }"
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "defaultLayoutConfig",
+              "name": "key",
               "type": {
-                "text": "LayoutConfig"
+                "text": "string"
               },
-              "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",
-              "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 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"
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "popoutConfig",
+              "name": "key",
               "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": ""
-                }
+                "text": "string"
               },
-              "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": "method",
-              "name": "registerItem",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "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": "method",
-              "name": "updateLifecycleToken",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "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",
-              "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"
-              }
-            }
-          ],
-          "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"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "reload-buffer",
-              "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/"
-              },
-              "fieldName": "reloadBuffer"
-            },
-            {
-              "name": "auto-save-key",
-              "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`.",
-              "fieldName": "autoSaveKey"
+              "description": "The unique identifier for the factory to remove."
             }
           ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
-          },
-          "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.",
+          "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": "layoutStyles",
+          "name": "registerFactory",
           "declaration": {
-            "name": "layoutStyles",
-            "module": "../styles"
+            "name": "registerFactory",
+            "module": "src/utils/factory-registry.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FoundationLayout",
+          "name": "getFactory",
           "declaration": {
-            "name": "FoundationLayout",
-            "module": "src/main/layout-main.ts"
+            "name": "getFactory",
+            "module": "src/utils/factory-registry.ts"
           }
         },
         {
           "kind": "js",
-          "name": "layoutTemplate",
+          "name": "unregisterFactory",
           "declaration": {
-            "name": "layoutTemplate",
-            "module": "src/main/layout-main.ts"
+            "name": "unregisterFactory",
+            "module": "src/utils/factory-registry.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/main/layout-popout-controller.ts",
-      "declarations": [
+      "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": "FoundationLayoutPopoutController",
+          "name": "FoundationLayoutItem",
           "members": [
             {
               "kind": "field",
-              "name": "channelName",
+              "name": "title",
               "type": {
                 "text": "string"
-              }
+              },
+              "description": "Sets the title of the item which is displayed on the tab.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "layoutKey",
+              "name": "closable",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "channel",
+              "name": "size",
               "type": {
-                "text": "TypedBroadcastChannel<LayoutPopoutEvents>"
+                "text": "string"
               },
-              "privacy": "private"
+              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "privacy": "public"
             },
             {
               "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": "method",
-              "name": "restorePopouts",
-              "privacy": "public",
-              "parameters": [
-                {
-                  "name": "registry",
-                  "type": {
-                    "text": "{ [layoutKey: string]: PopoutState }"
-                  }
-                },
-                {
-                  "name": "uuid",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "description": "Restores popouts from a registry"
-            },
-            {
-              "kind": "method",
-              "name": "closeAllPopouts",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "channel-name",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "channelName"
-            }
-          ],
-          "superclass": {
-            "name": "FASTElement",
-            "package": "@microsoft/fast-element"
-          },
-          "tagName": "foundation-layout-popout-controller",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FoundationLayoutPopoutController",
-          "declaration": {
-            "name": "FoundationLayoutPopoutController",
-            "module": "src/main/layout-popout-controller.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "foundation-layout-popout-controller",
-          "declaration": {
-            "name": "FoundationLayoutPopoutController",
-            "module": "src/main/layout-popout-controller.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/main/layout-region.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FoundationLayoutRegion",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
+              "name": "registration",
               "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`.",
+              "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"
             },
             {
@@ -1415,604 +986,1033 @@
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "title",
               "type": {
                 "text": "string"
               },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
-              "fieldName": "size"
+              "description": "Sets the title of the item which is displayed on the tab.",
+              "fieldName": "title"
             },
             {
-              "name": "type",
               "type": {
-                "text": "LayoutRegionType"
+                "text": "boolean"
               },
-              "default": "defaultLayoutType",
-              "description": "Defines the LayoutRegionType| type of the region.\nDefaults to `horizontal`.",
-              "resolveInitializer": {
-                "module": "src/main/layout-region.ts"
+              "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"
               },
-              "fieldName": "type"
+              "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"
           },
-          "tagName": "%%prefix%%-layout-region",
+          "tagName": "%%prefix%%-layout-item",
           "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  }\n\n  .lm_stack.lm_item {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n  }\n\n  .lm_maximised .lm_header {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\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);\n    border: 1px solid;\n    border-color: 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_stack > .lm_items {\n    box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);\n  }\n\n  .lm_header .lm_tab.lm_active.lm_focused {\n    background-color: var(--neutral-layer-card-container);\n  }\n\n  .lm_header .lm_tab.lm_active {\n    background-color: var(--neutral-layer-card-container);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-bottom: 0;\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_tab {\n    align-items: center;\n    background-color: var(--neutral-layer-4);\n    border: 0;\n    border-bottom-color: transparent;\n    border-bottom: 0 solid;\n    border-color: var(--neutral-stroke-rest);\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: 13px;\n    font-weight: 400;\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    margin-right: 2px;\n    margin-top: 3px;\n    padding: 2px 16px;\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\n  .lm_header .lm_controls > * {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    margin-right: 4px;\n    top: 3px;\n    opacity: 100%;\n  }\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\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\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    margin-left: 12px;\n    position: relative;\n    top: 0;\n    right: 0;\n  }\n\n  .lm_header .lm_tab.lm_active {\n    padding: 4px 25px 3px 10px;\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\n  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\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: 0 5px 15px rgb(0 0 0 / 35%);\n  }\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: normal;\n  }\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\n  .lm_row > .lm_item {\n    float: left;\n  }\n\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n\n  .lm_maximised {\n    left: 0;\n    padding: 1px;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n\n  .lm_maximise_placeholder {\n    display: none;\n  }\n\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\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\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\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\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\n  .lm_header {\n    overflow: visible;\n    position: relative;\n  }\n\n  .lm_header [class^='lm_'] {\n    box-sizing: content-box !important;\n  }\n\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\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\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n\n  .lm_header .lm_tab {\n    cursor: pointer;\n    float: left;\n    margin-top: 1px;\n    padding: 3px 25px 3px 10px;\n    position: relative;\n  }\n\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\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\n  .lm_header .lm_tab .lm_title:only-child {\n    padding-left: 10px;\n  }\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    top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n    position: absolute;\n    right: 0;\n    text-align: center;\n  }\n\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\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\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\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\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\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\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\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\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\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\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\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\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\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\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\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\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\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\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\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\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"
-        }
-      ],
-      "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",
+          "name": "FoundationLayoutItem",
           "declaration": {
-            "name": "getLayoutHeaderHeight",
-            "module": "src/utils/constants.ts"
+            "name": "FoundationLayoutItem",
+            "module": "src/main/layout-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/error.ts",
+      "path": "src/main/layout-main.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}"
-          },
-          "default": "{\n  firstLoaded: 'first-loaded',\n  itemAdded: 'item-added',\n  itemRemoved: 'item-removed',\n  itemResized: 'item-resized',\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",
-          "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": [
+          "name": "FoundationLayout",
+          "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",
+              "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 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": "method",
+              "name": "registerItem",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "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": "method",
+              "name": "updateLifecycleToken",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "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"
+            },
             {
-              "name": "key",
+              "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": "_presentation",
               "type": {
-                "text": "string"
+                "text": "ComponentPresentation | null | undefined"
               },
-              "description": "Unique identifier for the factory. Should be descriptive and unique across the application."
+              "privacy": "private",
+              "default": "void 0",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
             },
             {
-              "name": "factory",
+              "kind": "field",
+              "name": "$presentation",
               "type": {
-                "text": "ComponentFactory"
+                "text": "ComponentPresentation | null"
               },
-              "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": [
+              "privacy": "public",
+              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
             {
-              "name": "key",
+              "kind": "field",
+              "name": "template",
               "type": {
-                "text": "string"
+                "text": "ElementViewTemplate | void | null"
               },
-              "description": "The unique identifier for the factory."
+              "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"
+              }
             }
           ],
-          "description": "Retrieves a factory function by its key.",
-          "privacy": "public"
-        },
-        {
-          "kind": "function",
-          "name": "unregisterFactory",
-          "return": {
-            "type": {
-              "text": ""
+          "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"
             }
-          },
-          "parameters": [
+          ],
+          "attributes": [
             {
-              "name": "key",
+              "name": "reload-buffer",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "The unique identifier for the factory to remove."
+              "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": "auto-save-key",
+              "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`.",
+              "fieldName": "autoSaveKey"
             }
           ],
-          "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"
-          }
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-layout",
+          "customElement": true
         },
         {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./factory-registry"
-          }
-        },
+          "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": "*",
+          "name": "layoutStyles",
           "declaration": {
-            "name": "*",
-            "package": "./misc"
+            "name": "layoutStyles",
+            "module": "../styles"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "FoundationLayout",
           "declaration": {
-            "name": "*",
-            "package": "./templates"
+            "name": "FoundationLayout",
+            "module": "src/main/layout-main.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "layoutTemplate",
           "declaration": {
-            "name": "*",
-            "package": "./popout-events"
+            "name": "layoutTemplate",
+            "module": "src/main/layout-main.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": "method",
+              "name": "restorePopouts",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "registry",
+                  "type": {
+                    "text": "{ [layoutKey: string]: PopoutState }"
+                  }
+                },
+                {
+                  "name": "uuid",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Restores popouts from a registry"
+            },
+            {
+              "kind": "method",
+              "name": "closeAllPopouts",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "channel-name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "channelName"
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "foundation-layout-popout-controller",
+          "customElement": true
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "FoundationLayoutPopoutController",
           "declaration": {
-            "name": "*",
-            "package": "./types"
+            "name": "FoundationLayoutPopoutController",
+            "module": "src/main/layout-popout-controller.ts"
           }
         },
         {
-          "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",
+          "kind": "custom-element-definition",
+          "name": "foundation-layout-popout-controller",
           "declaration": {
-            "name": "logger",
-            "module": "src/utils/logger.ts"
+            "name": "FoundationLayoutPopoutController",
+            "module": "src/main/layout-popout-controller.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/misc.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/popout-events.ts",
+      "path": "src/main/layout-region.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "LAYOUT_POPOUT_CHANNEL_NAME",
-          "type": {
-            "text": "string"
+          "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"
           },
-          "default": "'f-layout-popout-channel'",
-          "description": "Name of the default broadcast channel used for layout popouts",
-          "privacy": "public"
+          "tagName": "%%prefix%%-layout-region",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LAYOUT_POPOUT_CHANNEL_NAME",
-          "declaration": {
-            "name": "LAYOUT_POPOUT_CHANNEL_NAME",
-            "module": "src/utils/popout-events.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PopoutGeometry",
+          "name": "FoundationLayoutRegion",
           "declaration": {
-            "name": "PopoutGeometry",
-            "module": "src/utils/popout-events.ts"
+            "name": "FoundationLayoutRegion",
+            "module": "src/main/layout-region.ts"
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/templates.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/types.ts",
-      "declarations": [],
-      "exports": []
     }
   ]
 }