@genesislcap/foundation-layout 14.375.1 → 14.375.2

package/dist/custom-elements.json

@@ -171,47 +171,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"
           }
         },
         {
@@ -219,340 +260,783 @@
           "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((( (var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px);\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  .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: 0px -1px 15px rgba(0, 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  .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: 0px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px) 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  .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: 1;\n  }\n  .lm_header .lm_controls > *:hover {\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n    cursor: pointer;\n  }\n\n  .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n  }\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n    background-repeat: no-repeat;\n    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  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\n  .lm_header .lm_tabdropdown_list {\n    top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    right: 108px;\n    background-color: var(--neutral-layer-3);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab {\n    box-shadow: none;\n    padding: 0 16px;\n    white-space: nowrap;\n    background-color: transparent;\n    color: var(--neutral-foreground-rest);\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    border-radius: 0;\n    overflow: visible;\n    text-overflow: normal;\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n    border-bottom: 0;\n  }\n\n  /* gl base styles start */\n  .lm_root {\n    position: relative;\n  }\n  .lm_row > .lm_item {\n    float: left;\n  }\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n  .lm_maximised {\n    left: 0;\n    padding: 1px;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n  .lm_maximise_placeholder {\n    display: none;\n  }\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\n  .lm_splitter:hover,\n  .lm_splitter.lm_dragging {\n    background: var(--accent-fill-rest);\n    border-radius: calc(var(--control-corner-radius) * 4px);\n  }\n  .lm_splitter.lm_vertical .lm_drag_handle {\n    width: 100%;\n    height: 15px;\n    position: absolute;\n    top: -5px;\n    cursor: ns-resize !important;\n  }\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\n  .lm_splitter.lm_horizontal .lm_drag_handle {\n    width: 15px;\n    height: 100%;\n    position: absolute;\n    left: -5px;\n    cursor: ew-resize !important;\n  }\n  .lm_header {\n    overflow: visible;\n    position: relative;\n  }\n  .lm_header [class^='lm_'] {\n    box-sizing: content-box !important;\n  }\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\n  .lm_header .lm_controls > li {\n    cursor: pointer;\n    float: left;\n    width: 18px;\n    height: 18px;\n    text-align: center;\n  }\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n  .lm_header .lm_tab {\n    cursor: pointer;\n    float: left;\n    margin-top: 1px;\n    padding: 3px 25px 3px 10px;\n    position: relative;\n  }\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\n  .lm_header .lm_tab .lm_title {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    user-select: none;\n  }\n  .lm_header .lm_tab .lm_title:only-child {\n    padding-left: 10px;\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  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header,\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_left .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items,\n  .lm_stack.lm_left .lm_items,\n  .lm_stack.lm_right .lm_items {.lm_header .lm_tab.lm_active\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n  .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n  .lm_stack.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\n  .lm_header .lm_tabdropdown_list {\n    position: absolute;\n    top: 20px;\n    right: 0;\n    z-index: 5;\n    overflow: hidden;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\n  .lm_popin > .lm_icon {\n    z-index: 20;\n  } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
+          "description": "`ElementStyles` which defines the css for FoundationLayout.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "layoutStyles",
+          "declaration": {
+            "name": "layoutStyles",
+            "module": "src/styles/layout.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/constants.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_RELOAD_BUFFER",
           "type": {
-            "text": "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_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_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"
-              }
+          "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"
             }
-          ],
-          "attributes": [
+          },
+          "parameters": [
             {
-              "name": "title",
+              "name": "key",
               "type": {
                 "text": "string"
               },
-              "description": "Sets the title of the item which is displayed on the tab.",
-              "fieldName": "title"
+              "description": "Unique identifier for the factory. Should be descriptive and unique across the application."
             },
             {
+              "name": "factory",
               "type": {
-                "text": "boolean"
+                "text": "ComponentFactory"
               },
-              "default": "false",
-              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
-              "fieldName": "closable"
-            },
+              "description": "The factory function that creates the component."
+            }
+          ],
+          "description": "Registers a factory function with a unique key.\nThis allows framework components to be used in the declarative layout API\nwithout needing to pass function references through HTML attributes.",
+          "privacy": "public"
+        },
+        {
+          "kind": "function",
+          "name": "getFactory",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
             {
-              "name": "size",
+              "name": "key",
               "type": {
                 "text": "string"
               },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
-              "fieldName": "size"
-            },
+              "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": [
             {
-              "name": "registration",
+              "name": "key",
               "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"
+              "description": "The unique identifier for the factory to remove."
             }
           ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-layout-item",
-          "customElement": true
+          "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": "FoundationLayoutItem",
+          "name": "registerFactory",
           "declaration": {
-            "name": "FoundationLayoutItem",
-            "module": "src/main/layout-item.ts"
+            "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/main/layout-main.ts",
-      "declarations": [
+      "path": "src/utils/index.ts",
+      "declarations": [],
+      "exports": [
         {
-          "kind": "class",
-          "description": "",
-          "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": "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": "./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/templates.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/types.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/main/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FoundationLayoutItem",
+          "declaration": {
+            "name": "FoundationLayoutItem",
+            "module": "./layout-item"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FoundationLayoutRegion",
+          "declaration": {
+            "name": "FoundationLayoutRegion",
+            "module": "./layout-region"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FoundationLayout",
+          "declaration": {
+            "name": "FoundationLayout",
+            "module": "./layout-main"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "layoutStyles",
+          "declaration": {
+            "name": "layoutStyles",
+            "module": "./layout-main"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "layoutTemplate",
+          "declaration": {
+            "name": "layoutTemplate",
+            "module": "./layout-main"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./layout-components"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/main/layout-components.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "foundationLayoutComponents",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  foundationLayout,\n  foundationLayoutRegion,\n  foundationLayoutItem,\n  register(container?: Container, ...rest: any[]) {\n    if (!container) {\n      // preserve backward compatibility with code that loops through\n      // the values of this object and calls them as funcs with no args\n      return;\n    }\n    for (const key in this) {\n      if (key === 'register') {\n        continue;\n      }\n      this[key]().register(container, ...rest);\n    }\n  },\n}",
+          "description": "Registration object to register the layout with your design system.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationLayoutComponents",
+          "declaration": {
+            "name": "foundationLayoutComponents",
+            "module": "src/main/layout-components.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/main/layout-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FoundationLayoutItem",
+          "members": [
             {
               "kind": "field",
-              "name": "reloadBuffer",
+              "name": "title",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "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).",
+              "description": "Sets the title of the item which is displayed on the tab.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "reloadPending",
+              "name": "closable",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "registeredComponents",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "0"
+              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "autoSaveKey",
+              "name": "registration",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "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.",
+              "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": "dimensionsConfig",
+              "name": "_presentation",
               "type": {
-                "text": "LayoutConfig.Dimensions | undefined"
+                "text": "ComponentPresentation | null | undefined"
               },
-              "description": "Apply dimensions config to the layout, such as setting the size of the drag handles.",
-              "privacy": "public"
+              "privacy": "private",
+              "default": "void 0",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "hasFirstLoaded",
+              "name": "$presentation",
               "type": {
-                "text": "boolean"
+                "text": "ComponentPresentation | null"
+              },
+              "privacy": "public",
+              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "template",
+              "type": {
+                "text": "ElementViewTemplate | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "templateChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "ElementStyles | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stylesChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compose",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "this",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "elementDefinition",
+                  "type": {
+                    "text": "T"
+                  },
+                  "description": "The definition of the element to create the registry\nfunction for."
+                }
+              ],
+              "description": "Defines an element registry function with a set of element definition defaults.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the title of the item which is displayed on the tab.",
+              "fieldName": "title"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute controls whether the window can be closed in the GUI.\nDefaults to `false`.",
+              "fieldName": "closable"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "description": "optional string describing the size of the new item (see the written documentation for more info)",
+              "fieldName": "size"
+            },
+            {
+              "name": "registration",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the registration name for the item, which can be used later to add the item via the JavaScript API using FoundationLayout.addItem.",
+              "fieldName": "registration"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-layout-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FoundationLayoutItem",
+          "declaration": {
+            "name": "FoundationLayoutItem",
+            "module": "src/main/layout-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/main/layout-main.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "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.",
@@ -954,738 +1438,254 @@
               },
               "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"
-            },
-            {
-              "name": "popout-config",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "Controls whether popout functionality is enabled on the layout. Defaults to disabled.\nSet this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.",
-              "resolveInitializer": {
-                "module": "src/main/layout-main.ts"
-              },
-              "fieldName": "popoutConfig"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-layout",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "layoutTemplate",
-          "default": "html<FoundationLayout>`\n  <template>\n    ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}\n    <div class=\"layout-container\" ${ref('layoutElement')}></div>\n  </template>\n`",
-          "description": "`ViewTemplate` which defines the html for FoundationLayout.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "layoutStyles",
-          "declaration": {
-            "name": "layoutStyles",
-            "module": "../styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FoundationLayout",
-          "declaration": {
-            "name": "FoundationLayout",
-            "module": "src/main/layout-main.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "layoutTemplate",
-          "declaration": {
-            "name": "layoutTemplate",
-            "module": "src/main/layout-main.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/main/layout-region.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FoundationLayoutRegion",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "LayoutRegionType"
-              },
-              "default": "layoutRegionValue[0]",
-              "description": "Defines the LayoutRegionType| type of the region.\nDefaults to `horizontal`.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "_presentation",
-              "type": {
-                "text": "ComponentPresentation | null | undefined"
-              },
-              "privacy": "private",
-              "default": "void 0",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "$presentation",
-              "type": {
-                "text": "ComponentPresentation | null"
-              },
-              "privacy": "public",
-              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "template",
-              "type": {
-                "text": "ElementViewTemplate | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "templateChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "styles",
-              "type": {
-                "text": "ElementStyles | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "stylesChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "compose",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "this",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "elementDefinition",
-                  "type": {
-                    "text": "T"
-                  },
-                  "description": "The definition of the element to create the registry\nfunction for."
-                }
-              ],
-              "description": "Defines an element registry function with a set of element definition defaults.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "description": "optional string describing the size of the new item (see the written documentation for more info)",
-              "fieldName": "size"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "LayoutRegionType"
-              },
-              "default": "defaultLayoutType",
-              "description": "Defines the LayoutRegionType| type of the region.\nDefaults to `horizontal`.",
-              "resolveInitializer": {
-                "module": "src/main/layout-region.ts"
-              },
-              "fieldName": "type"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-layout-region",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FoundationLayoutRegion",
-          "declaration": {
-            "name": "FoundationLayoutRegion",
-            "module": "src/main/layout-region.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/constants.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "glVisualConfig",
-          "return": {
-            "type": {
-              "text": "Omit<LayoutConfig, 'root'>"
-            }
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "LAYOUT_ICONS",
-          "type": {
-            "text": "{\n  renameSVG,\n  maximiseSVG,\n  minimiseSVG,\n  closeSVG,\n  tabDropdownSVG,\n  popoutSVG,\n}"
-          },
-          "default": "{\n  renameSVG,\n  maximiseSVG,\n  minimiseSVG,\n  closeSVG,\n  tabDropdownSVG,\n  popoutSVG,\n}",
-          "description": "A collection of SVG icons in base64 format.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "glVisualConfig",
-          "declaration": {
-            "name": "glVisualConfig",
-            "module": "src/styles/constants.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LAYOUT_ICONS",
-          "declaration": {
-            "name": "LAYOUT_ICONS",
-            "module": "src/styles/constants.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/dragging.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "globalDraggingStyles",
-          "default": "`\n  .lm_dragProxy .lm_content {\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n  }\n  .lm_dropTargetIndicator {\n    outline: 1px dashed #cccccc;\n    transition: all 200ms ease;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    background: var(${neutralFillStealthRest.cssCustomProperty});\n    opacity: 0.2;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items {\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_dragProxy {\n    cursor: move;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_title {\n    color: white;\n    padding-left: 10px;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n`",
-          "description": "This is defined as a string rather than a css template\nbecause it is applied to a CSSStyleSheet object rather than\nused as a FAST template"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "globalDraggingStyles",
-          "declaration": {
-            "name": "globalDraggingStyles",
-            "module": "src/styles/dragging.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./constants"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./dragging.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./layout.styles"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/layout.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "layoutStyles",
-          "default": "css`\n  ${containerStyles}\n  ${loadingSpinnerStyles}\n\n  :host {\n    --foundation-tab-height: calc((( (var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px);\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  .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: 0px -1px 15px rgba(0, 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  .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: 0px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px) 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  .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: 1;\n  }\n  .lm_header .lm_controls > *:hover {\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n    cursor: pointer;\n  }\n\n  .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n  }\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n    background-repeat: no-repeat;\n    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  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\n  .lm_header .lm_tabdropdown_list {\n    top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    right: 108px;\n    background-color: var(--neutral-layer-3);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab {\n    box-shadow: none;\n    padding: 0 16px;\n    white-space: nowrap;\n    background-color: transparent;\n    color: var(--neutral-foreground-rest);\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    border-radius: 0;\n    overflow: visible;\n    text-overflow: normal;\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n    border-bottom: 0;\n  }\n\n  /* gl base styles start */\n  .lm_root {\n    position: relative;\n  }\n  .lm_row > .lm_item {\n    float: left;\n  }\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n  .lm_maximised {\n    left: 0;\n    padding: 1px;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n  .lm_maximise_placeholder {\n    display: none;\n  }\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\n  .lm_splitter:hover,\n  .lm_splitter.lm_dragging {\n    background: var(--accent-fill-rest);\n    border-radius: calc(var(--control-corner-radius) * 4px);\n  }\n  .lm_splitter.lm_vertical .lm_drag_handle {\n    width: 100%;\n    height: 15px;\n    position: absolute;\n    top: -5px;\n    cursor: ns-resize !important;\n  }\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\n  .lm_splitter.lm_horizontal .lm_drag_handle {\n    width: 15px;\n    height: 100%;\n    position: absolute;\n    left: -5px;\n    cursor: ew-resize !important;\n  }\n  .lm_header {\n    overflow: visible;\n    position: relative;\n  }\n  .lm_header [class^='lm_'] {\n    box-sizing: content-box !important;\n  }\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\n  .lm_header .lm_controls > li {\n    cursor: pointer;\n    float: left;\n    width: 18px;\n    height: 18px;\n    text-align: center;\n  }\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n  .lm_header .lm_tab {\n    cursor: pointer;\n    float: left;\n    margin-top: 1px;\n    padding: 3px 25px 3px 10px;\n    position: relative;\n  }\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\n  .lm_header .lm_tab .lm_title {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    user-select: none;\n  }\n  .lm_header .lm_tab .lm_title:only-child {\n    padding-left: 10px;\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  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header,\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_left .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items,\n  .lm_stack.lm_left .lm_items,\n  .lm_stack.lm_right .lm_items {.lm_header .lm_tab.lm_active\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n  .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n  .lm_stack.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\n  .lm_header .lm_tabdropdown_list {\n    position: absolute;\n    top: 20px;\n    right: 0;\n    z-index: 5;\n    overflow: hidden;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\n  .lm_popin > .lm_icon {\n    z-index: 20;\n  } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
-          "description": "`ElementStyles` which defines the css for FoundationLayout.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "layoutStyles",
-          "declaration": {
-            "name": "layoutStyles",
-            "module": "src/styles/layout.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/constants.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "DEFAULT_RELOAD_BUFFER",
-          "type": {
-            "text": "number"
-          },
-          "default": "500",
-          "description": "Default time in milliseconds for the layout to buffer calls to reloading\nthe layout while the declarative API is loading.\n\nDuring the first load of the layout, a loading spinner will be shown.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "LAYOUT_POPOUT_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_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/utils/error.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LayoutUsageError",
-          "superclass": {
-            "name": "Error",
-            "module": "src/utils/error.ts"
-          }
-        },
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LayoutRegistrationError",
-          "superclass": {
-            "name": "Error",
-            "module": "src/utils/error.ts"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LayoutUsageError",
-          "declaration": {
-            "name": "LayoutUsageError",
-            "module": "src/utils/error.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LayoutRegistrationError",
-          "declaration": {
-            "name": "LayoutRegistrationError",
-            "module": "src/utils/error.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/events.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "LayoutEmitEvents",
-          "type": {
-            "text": "{\n  firstLoaded: 'first-loaded',\n  itemAdded: 'item-added',\n  itemRemoved: 'item-removed',\n  itemResized: 'item-resized',\n}"
-          },
-          "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": "key",
-              "type": {
-                "text": "string"
-              },
-              "description": "Unique identifier for the factory. Should be descriptive and unique across the application."
-            },
-            {
-              "name": "factory",
-              "type": {
-                "text": "ComponentFactory"
-              },
-              "description": "The factory function that creates the component."
-            }
-          ],
-          "description": "Registers a factory function with a unique key.\nThis allows framework components to be used in the declarative layout API\nwithout needing to pass function references through HTML attributes.",
-          "privacy": "public"
-        },
-        {
-          "kind": "function",
-          "name": "getFactory",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
-            {
-              "name": "key",
-              "type": {
-                "text": "string"
-              },
-              "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": [
-            {
-              "name": "key",
-              "type": {
-                "text": "string"
-              },
-              "description": "The unique identifier for the factory to remove."
-            }
-          ],
-          "description": "Removes a factory from the registry.\nThis is useful for cleanup when a component is unmounted or no longer needed.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerFactory",
-          "declaration": {
-            "name": "registerFactory",
-            "module": "src/utils/factory-registry.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getFactory",
-          "declaration": {
-            "name": "getFactory",
-            "module": "src/utils/factory-registry.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "unregisterFactory",
-          "declaration": {
-            "name": "unregisterFactory",
-            "module": "src/utils/factory-registry.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./constants"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./error"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./events"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./factory-registry"
-          }
+              "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"
+            },
+            {
+              "name": "popout-config",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Controls whether popout functionality is enabled on the layout. Defaults to disabled.\nSet this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.",
+              "resolveInitializer": {
+                "module": "src/main/layout-main.ts"
+              },
+              "fieldName": "popoutConfig"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-layout",
+          "customElement": true
         },
         {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./misc"
-          }
-        },
+          "kind": "variable",
+          "name": "layoutTemplate",
+          "default": "html<FoundationLayout>`\n  <template>\n    ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}\n    <div class=\"layout-container\" ${ref('layoutElement')}></div>\n  </template>\n`",
+          "description": "`ViewTemplate` which defines the html for FoundationLayout.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "layoutStyles",
           "declaration": {
-            "name": "*",
-            "package": "./templates"
+            "name": "layoutStyles",
+            "module": "../styles"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "FoundationLayout",
           "declaration": {
-            "name": "*",
-            "package": "./types"
+            "name": "FoundationLayout",
+            "module": "src/main/layout-main.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "layoutTemplate",
           "declaration": {
-            "name": "*",
-            "package": "./error"
+            "name": "layoutTemplate",
+            "module": "src/main/layout-main.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/logger.ts",
+      "path": "src/main/layout-region.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "logger"
+          "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"
+          },
+          "tagName": "%%prefix%%-layout-region",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "logger",
+          "name": "FoundationLayoutRegion",
           "declaration": {
-            "name": "logger",
-            "module": "src/utils/logger.ts"
+            "name": "FoundationLayoutRegion",
+            "module": "src/main/layout-region.ts"
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/misc.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/templates.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/types.ts",
-      "declarations": [],
-      "exports": []
     }
   ]
 }