diff --git a/vuu-ui/cypress.config.mjs b/vuu-ui/cypress.config.mjs
index 7f747ed6a..7f185946c 100644
--- a/vuu-ui/cypress.config.mjs
+++ b/vuu-ui/cypress.config.mjs
@@ -2,7 +2,41 @@ import { defineConfig } from "cypress";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { version as reactVersion } from "react";
-import { cssInline } from "vite-plugin-inline-css";
+import { createFilter } from "vite";
+import MagicString from "magic-string";
+
+export function cssInline() {
+  const exclude = ["**/**.stories.tsx"];
+  const include = [
+    "**/packages/grid-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-datatable/**/*.{tsx,jsx}",
+    "**/packages/vuu-data-react/**/*.{tsx,jsx}",
+    "**/packages/vuu-filters/**/*.{tsx,jsx}",
+    "**/packages/vuu-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-popups/**/*.{tsx,jsx}",
+    "**/packages/vuu-shell/**/*.{tsx,jsx}",
+    "**/packages/vuu-table/**/*.{tsx,jsx}",
+    "**/packages/vuu-table-extras/**/*.{tsx,jsx}",
+    "**/packages/vuu-ui-controls/**/*.{tsx,jsx}",
+  ];
+
+  const filter = createFilter(include, exclude);
+
+  return {
+    name: "vite-plugin-inline-css",
+    enforce: "pre",
+    transform(src, id) {
+      if (filter(id)) {
+        const s = new MagicString(src);
+        s.replaceAll('.css";', '.css?inline";');
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true, source: id }),
+        };
+      }
+    },
+  };
+}
 
 const viteConfig = {
   plugins: [react(), tsconfigPaths(), /*, IstanbulPlugin()*/ cssInline()],
diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json
index f6dfcc720..24e277218 100644
--- a/vuu-ui/package-lock.json
+++ b/vuu-ui/package-lock.json
@@ -47,7 +47,7 @@
         "@typescript-eslint/eslint-plugin": "^5.41.0",
         "@vitejs/plugin-react": "4.3.3",
         "chalk": "^5.2.0",
-        "cypress": "^13.15.1",
+        "cypress": "13.17.0",
         "cypress-axe": "1.5.0",
         "cypress-real-events": "1.13.0",
         "esbuild": "0.23.0",
@@ -504,7 +504,9 @@
       }
     },
     "node_modules/@cypress/request": {
-      "version": "3.0.5",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.8.tgz",
+      "integrity": "sha512-h0NFgh1mJmm1nr4jCwkGHwKneVYKghUyWe6TMNrk0B9zsjAJxpg8C4/+BAcmLgCPa1vj1V8rNUaILl+zYRUWBQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -521,9 +523,9 @@
         "json-stringify-safe": "~5.0.1",
         "mime-types": "~2.1.19",
         "performance-now": "^2.1.0",
-        "qs": "6.13.0",
+        "qs": "6.14.0",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "^4.1.3",
+        "tough-cookie": "^5.0.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^8.3.2"
       },
@@ -1124,7 +1126,9 @@
       }
     },
     "node_modules/@floating-ui/react": {
-      "version": "0.26.25",
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.2",
@@ -1155,6 +1159,10 @@
       "version": "4.5.14",
       "license": "MIT"
     },
+    "node_modules/@heswell/grid-layout": {
+      "resolved": "packages/grid-layout",
+      "link": true
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "license": "Apache-2.0",
@@ -1182,6 +1190,15 @@
       "version": "2.0.3",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.5.6",
       "license": "Apache-2.0",
@@ -1810,6 +1827,35 @@
         }
       }
     },
+    "node_modules/@salt-ds/date-adapters": {
+      "version": "0.1.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@salt-ds/date-adapters/-/date-adapters-0.1.0-alpha.3.tgz",
+      "integrity": "sha512-xTqdjqb/T1lNv1ZOZ6u7mEbHFCnOnGTAw1IVsoXVXDHT8m7HYtszVMkoy9Z7dFLBWe2/tlTRpq3/o8qJmZzs6w==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@types/luxon": "^3.4.2",
+        "@types/react": ">=16.14.0",
+        "date-fns": "^3.6.0",
+        "dayjs": "^1.11.13",
+        "luxon": "^3.5.0",
+        "moment": "^2.30.1",
+        "moment-timezone": "^0.5.46"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@salt-ds/icons": {
       "version": "1.12.1",
       "license": "Apache-2.0",
@@ -1829,6 +1875,88 @@
         }
       }
     },
+    "node_modules/@salt-ds/lab": {
+      "version": "1.0.0-alpha.62",
+      "resolved": "https://registry.npmjs.org/@salt-ds/lab/-/lab-1.0.0-alpha.62.tgz",
+      "integrity": "sha512-Fyu1K9NbWHqzYsrNs7Sh3MmEmZqWMwVKFmxpCuRbF/RFNkbpNls/1YcI78y8o0dxvsmQbtTbxb7wNI5etuvNJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.28",
+        "@salt-ds/core": "^1.42.0",
+        "@salt-ds/date-adapters": "0.1.0-alpha.3",
+        "@salt-ds/icons": "^1.13.2",
+        "@salt-ds/styles": "0.2.1",
+        "@salt-ds/window": "0.1.1",
+        "@types/react-window": "^1.8.2",
+        "aria-hidden": "^1.1.1",
+        "attr-accept": "^2.0.0",
+        "clipboard-copy": "^4.0.1",
+        "clsx": "^2.0.0",
+        "compute-scroll-into-view": "^3.0.0",
+        "deepmerge": "^4.2.2",
+        "no-scroll": "^2.1.1",
+        "react-color": "^2.19.3",
+        "react-resizable-panels": "^2.1.7",
+        "react-window": "^1.8.6",
+        "rifm": "^0.12.0",
+        "tabbable": "^6.0.0",
+        "tinycolor2": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.0",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@salt-ds/lab/node_modules/@salt-ds/core": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/@salt-ds/core/-/core-1.43.0.tgz",
+      "integrity": "sha512-tUEOCWBAxdH+4vITpeqS05U70bUeKMTL1UyQTCJEeG1YKy9hbwCITFTnOXNTfcKHHJ3ROZlq9FSL2ww8yIoFjw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.28",
+        "@salt-ds/icons": "^1.13.2",
+        "@salt-ds/styles": "0.2.1",
+        "@salt-ds/window": "0.1.1",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.0",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@salt-ds/lab/node_modules/@salt-ds/icons": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@salt-ds/icons/-/icons-1.13.2.tgz",
+      "integrity": "sha512-daDa9mp0l9MTIiVYNsLcN613u5gaLw0pagZ2kNsO/DdyDfrQAnkmSm1tk5MnNmfZxBzRj+tE+47vNLsPLmSctA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@salt-ds/styles": "0.2.1",
+        "@salt-ds/window": "0.1.1",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.0",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@salt-ds/styles": {
       "version": "0.2.1",
       "license": "Apache-2.0",
@@ -2116,6 +2244,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/luxon": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.6.2.tgz",
+      "integrity": "sha512-R/BdP7OxEMc44l2Ex5lSXHoIXTB2JLNa3y2QISIbr58U/YcsffyQrYW//hZSdrfxrjRZj3GcUoxMPGdO8gSYuw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "dev": true,
@@ -2161,6 +2296,15 @@
         "@types/react": "^17"
       }
     },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "dev": true,
@@ -2792,6 +2936,18 @@
       "version": "2.0.1",
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "dev": true,
@@ -2913,6 +3069,8 @@
     },
     "node_modules/asn1": {
       "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2921,6 +3079,8 @@
     },
     "node_modules/assert-plus": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2959,6 +3119,8 @@
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true,
       "license": "MIT"
     },
@@ -2970,6 +3132,15 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "dev": true,
@@ -2986,6 +3157,8 @@
     },
     "node_modules/aws-sign2": {
       "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2994,6 +3167,8 @@
     },
     "node_modules/aws4": {
       "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
       "dev": true,
       "license": "MIT"
     },
@@ -3040,6 +3215,8 @@
     },
     "node_modules/bcrypt-pbkdf": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -3298,6 +3475,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "license": "MIT",
@@ -3337,6 +3545,8 @@
     },
     "node_modules/caseless": {
       "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true,
       "license": "Apache-2.0"
     },
@@ -3555,6 +3765,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clipboard-copy": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-4.0.1.tgz",
+      "integrity": "sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/clipboardy": {
       "version": "3.0.0",
       "dev": true,
@@ -3692,6 +3922,8 @@
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3777,6 +4009,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "license": "MIT"
@@ -3806,6 +4044,8 @@
     },
     "node_modules/core-util-is": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -3882,13 +4122,14 @@
       "license": "MIT"
     },
     "node_modules/cypress": {
-      "version": "13.15.1",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.15.1.tgz",
-      "integrity": "sha512-DwUFiKXo4lef9kA0M4iEhixFqoqp2hw8igr0lTqafRb9qtU3X0XGxKbkSYsUFdkrAkphc7MPDxoNPhk5pj9PVg==",
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.17.0.tgz",
+      "integrity": "sha512-5xWkaPurwkIljojFidhw8lFScyxhtiFHl/i/3zov+1Z5CmY4t9tjIdvSXfu82Y3w7wt0uR9KkucbhkVvJZLQSA==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
-        "@cypress/request": "^3.0.4",
+        "@cypress/request": "^3.0.6",
         "@cypress/xvfb": "^1.2.4",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
@@ -3899,6 +4140,7 @@
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
+        "ci-info": "^4.0.0",
         "cli-cursor": "^3.1.0",
         "cli-table3": "~0.6.1",
         "commander": "^6.2.1",
@@ -3913,7 +4155,6 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.1",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
@@ -4000,8 +4241,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/cypress/node_modules/ci-info": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.2.0.tgz",
+      "integrity": "sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dashdash": {
       "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4061,7 +4320,7 @@
     },
     "node_modules/dayjs": {
       "version": "1.11.13",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -4145,7 +4404,6 @@
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4222,6 +4480,8 @@
     },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4280,6 +4540,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "dev": true,
@@ -4287,6 +4562,8 @@
     },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4411,12 +4688,11 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
       "engines": {
         "node": ">= 0.4"
       }
@@ -4454,7 +4730,9 @@
       "license": "MIT"
     },
     "node_modules/es-object-atoms": {
-      "version": "1.0.0",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4465,13 +4743,16 @@
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.3",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.2.4",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
         "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5521,6 +5802,8 @@
     },
     "node_modules/extsprintf": {
       "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
       "dev": true,
       "engines": [
         "node >=0.6.0"
@@ -5690,6 +5973,8 @@
     },
     "node_modules/forever-agent": {
       "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -5697,12 +5982,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.1",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -5788,15 +6076,22 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5805,6 +6100,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "5.2.0",
       "dev": true,
@@ -5856,6 +6165,8 @@
     },
     "node_modules/getpass": {
       "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6015,11 +6326,13 @@
       "license": "MIT"
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6091,7 +6404,9 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6221,6 +6536,8 @@
     },
     "node_modules/http-signature": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
+      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6427,17 +6744,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-ci": {
-      "version": "3.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ci-info": "^3.2.0"
-      },
-      "bin": {
-        "is-ci": "bin.js"
-      }
-    },
     "node_modules/is-core-module": {
       "version": "2.15.1",
       "dev": true,
@@ -6746,6 +7052,8 @@
     },
     "node_modules/is-typedarray": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
       "dev": true,
       "license": "MIT"
     },
@@ -6822,6 +7130,8 @@
     },
     "node_modules/isstream": {
       "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
       "dev": true,
       "license": "MIT"
     },
@@ -7121,6 +7431,8 @@
     },
     "node_modules/jsbn": {
       "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
       "dev": true,
       "license": "MIT"
     },
@@ -7146,6 +7458,8 @@
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
       "dev": true,
       "license": "(AFL-2.1 OR BSD-3-Clause)"
     },
@@ -7159,6 +7473,8 @@
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true,
       "license": "ISC"
     },
@@ -7186,6 +7502,8 @@
     },
     "node_modules/jsprim": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
       "dev": true,
       "engines": [
         "node >=0.6.0"
@@ -7297,7 +7615,12 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
     "node_modules/lodash.merge": {
@@ -7489,6 +7812,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
+      "license": "ISC"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "dev": true,
@@ -7663,6 +8002,12 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/meow": {
       "version": "13.2.0",
       "dev": true,
@@ -8322,6 +8667,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.5.48",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.48.tgz",
+      "integrity": "sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "license": "MIT"
@@ -8360,6 +8728,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/no-scroll": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz",
+      "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ==",
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.18",
       "dev": true,
@@ -8392,7 +8766,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.2",
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8737,6 +9113,8 @@
     },
     "node_modules/performance-now": {
       "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
       "dev": true,
       "license": "MIT"
     },
@@ -8939,7 +9317,6 @@
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -8949,7 +9326,6 @@
     },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/property-information": {
@@ -8966,11 +9342,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/psl": {
-      "version": "1.9.0",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/pump": {
       "version": "3.0.2",
       "dev": true,
@@ -8988,11 +9359,13 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.13.0",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
-        "side-channel": "^1.0.6"
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">=0.6"
@@ -9001,11 +9374,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "funding": [
@@ -9070,6 +9438,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-color": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "license": "MIT",
@@ -9109,6 +9495,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.7.tgz",
+      "integrity": "sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.27.0",
       "license": "MIT",
@@ -9137,6 +9533,32 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
+      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.0.1"
+      }
+    },
     "node_modules/recma-build-jsx": {
       "version": "1.0.0",
       "dev": true,
@@ -9320,11 +9742,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "dev": true,
@@ -9381,6 +9798,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "license": "ISC",
@@ -9584,6 +10010,8 @@
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
       "license": "MIT"
     },
@@ -9741,14 +10169,73 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.6",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9828,6 +10315,8 @@
     },
     "node_modules/sshpk": {
       "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10297,7 +10786,6 @@
     },
     "node_modules/tinycolor2": {
       "version": "1.4.2",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -10333,6 +10821,26 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.85",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.85.tgz",
+      "integrity": "sha512-gBdZ1RjCSevRPFix/hpaUWeak2/RNUZB4/8frF1r5uYMHjFptkiT0JXIebWvgI/0ZHXvxaUDDJshiA0j6GdL3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.85"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.85",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.85.tgz",
+      "integrity": "sha512-DTjUVvxckL1fIoPSb3KE7ISNtkWSawZdpfxGxwiIrZoO6EbHVDXXUIlIuWympPaeS+BLGyggozX/HTMsRAdsoA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tmp": {
       "version": "0.2.3",
       "dev": true,
@@ -10352,25 +10860,16 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.4",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
+        "tldts": "^6.1.32"
       },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tough-cookie/node_modules/universalify": {
-      "version": "0.2.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/tree-kill": {
@@ -10476,6 +10975,8 @@
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -10487,6 +10988,8 @@
     },
     "node_modules/tweetnacl": {
       "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
       "dev": true,
       "license": "Unlicense"
     },
@@ -10775,15 +11278,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "dev": true,
@@ -10791,6 +11285,8 @@
     },
     "node_modules/uuid": {
       "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -10807,6 +11303,8 @@
     },
     "node_modules/verror": {
       "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
       "dev": true,
       "engines": [
         "node >=0.6.0"
@@ -11366,6 +11864,23 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "packages/grid-layout": {
+      "name": "@heswell/grid-layout",
+      "version": "0.0.26",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@finos/vuu-utils": "0.0.26",
+        "@salt-ds/core": "1.37.1",
+        "@salt-ds/lab": "1.0.0-alpha.62",
+        "@salt-ds/styles": "0.2.1",
+        "@salt-ds/window": "0.1.1"
+      },
+      "peerDependencies": {
+        "clsx": "^2.0.0",
+        "react": ">=17.0.2",
+        "react-dom": ">=17.0.2"
+      }
+    },
     "packages/vuu-codemirror": {
       "name": "@finos/vuu-codemirror",
       "version": "0.0.26",
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
index abba75e6b..c4f46ed99 100644
--- a/vuu-ui/package.json
+++ b/vuu-ui/package.json
@@ -77,7 +77,7 @@
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@vitejs/plugin-react": "4.3.3",
     "chalk": "^5.2.0",
-    "cypress": "^13.15.1",
+    "cypress": "13.17.0",
     "cypress-axe": "1.5.0",
     "cypress-real-events": "1.13.0",
     "esbuild": "0.23.0",
diff --git a/vuu-ui/packages/grid-layout/GridLayout.mdx b/vuu-ui/packages/grid-layout/GridLayout.mdx
new file mode 100644
index 000000000..08d4ee8bc
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/GridLayout.mdx
@@ -0,0 +1,3 @@
+### GridLayout
+
+`GridLayout` is a container component that manages the layout of nested child components. The `GridLayout` component used CSS Grid to manage the positioning of child components.
diff --git a/vuu-ui/packages/grid-layout/package.json b/vuu-ui/packages/grid-layout/package.json
new file mode 100644
index 000000000..88a277419
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@heswell/grid-layout",
+  "version": "0.0.26",
+  "description": "VUU Layout Components",
+  "main": "src/index.ts",
+  "author": "heswell",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build:dev": "node ../../scripts/run-build.mjs",
+    "build": "node ../../scripts/run-build-rollup.mjs",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
+  "types": "src/index.ts",
+  "dependencies": {
+    "@finos/vuu-utils": "0.0.26",
+    "@salt-ds/core": "1.37.1",
+    "@salt-ds/lab": "1.0.0-alpha.62",
+    "@salt-ds/styles": "0.2.1",
+    "@salt-ds/window": "0.1.1"
+  },
+  "peerDependencies": {
+    "clsx": "^2.0.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
+  "sideEffects": false
+}
diff --git a/vuu-ui/packages/grid-layout/src/GridLayout.css b/vuu-ui/packages/grid-layout/src/GridLayout.css
new file mode 100644
index 000000000..bd2b05c4a
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridLayout.css
@@ -0,0 +1,181 @@
+.vuuGridLayout {
+  --vuu-layout-tabs-height: 32px;
+
+  --vuu-grid-gap: 6px;
+  --vuu-grid-header-height: 25px;
+  display: grid;
+  padding: var(--vuu-grid-gap);
+
+  &.vuuDragging {
+    /* 
+      While we are dragging, do not let drag events fire on anything 
+      more granular than GridLayoutItem. Exception for vuuDraggableItem
+      is for Tabs 
+    */
+    [data-drop-target] > :not(.vuuDraggableItem) {
+      pointer-events: none;
+    }
+  }
+
+  &.vuuResizing {
+    transition: .3s;
+  }
+}
+
+.vuuGridLayoutItem {
+  --vuu-header-height: var(--header-height, 25px);
+  border: solid 1px white;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &.vuuGridLayoutItem-dragging {
+    display: none;
+    grid-column: 0/0 !important;
+    grid-row: 0/0;
+  }
+}
+
+.vuuGridLayoutItem-active {
+  border: dashed 1px blue;
+  position: relative;
+}
+
+/* .vuuGridLayoutItem > * {
+  position: absolute;
+  inset: calc(var(--vuu-header-height) + var(--vuu-grid-gap))
+    var(--vuu-grid-gap) var(--vuu-grid-gap) var(--vuu-grid-gap);
+} */
+
+.vuuGridLayoutItemHeader {
+  align-items: center;
+  background-color: #ccc;
+  cursor: grab;
+  display: flex;
+  flex: 0 0 var(--vuu-grid-header-height);
+  /* inset: var(--vuu-grid-gap) var(--vuu-grid-gap) auto var(--vuu-grid-gap); */
+  height: var(--vuu-grid-header-height);
+  padding: 0 var(--salt-spacing-100) 0 0;
+  position: relative;
+
+  [data-align="right"] {
+    margin-left: auto;
+  }
+
+  .vuuGridLayoutItemHeader-title {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    padding: 0 var(--salt-spacing-200);
+  }
+}
+
+.vuuGridLayoutStackedItem {
+  /* height: var(--vuu-layout-tabs-height); */
+  .saltTabsNext {
+    margin-top: 3px;
+  }
+}
+
+.vuu-detached {
+  visibility: hidden;
+}
+
+.vuu-stacked {
+  margin-top: var(--vuu-layout-tabs-height)
+}
+
+.vuuGridLayoutItemHeader-close {
+  margin-left: auto;
+}
+
+.vuuGridLayoutStackedItemContent,
+.vuuGridLayoutItemContent {
+  flex: 1 1 auto;
+  position: relative;
+}
+
+.vuuGridLayoutStackedItemContent > *,
+.vuuGridLayoutItemContent > * {
+  position: absolute;
+  inset: 0;
+}
+
+
+.vuuDropTarget-east {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 50%;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 0px;
+}
+.vuuDropTarget-west {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 50%;
+}
+.vuuDropTarget-north {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 50%;
+  --grid-dropzone-right: 0px;
+}
+.vuuDropTarget-south {
+  --grid-dropzone-top: 50%;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 0px;
+}
+
+.vuuDropTarget-centre {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 0px;
+}
+
+/* we could simplify this by assigning a className to the content */
+.vuu-stacked {
+  & > .vuuDropTarget-north {
+    --grid-dropzone-top: -32px;
+  }
+  & > .vuuDropTarget-east {
+    --grid-dropzone-top: -32px;
+  }
+  & > .vuuDropTarget-west {
+    --grid-dropzone-top: -32px;
+  }
+}
+
+.vuuDropTarget-centre:after,
+.vuuDropTarget-north:after, 
+.vuuDropTarget-east:after, 
+.vuuDropTarget-south:after,
+.vuuDropTarget-west:after {
+  background-color: cornflowerblue;
+  content: "";
+  opacity: 0.3;
+  pointer-events: none;
+  position: absolute;
+  top: var(--grid-dropzone-top);
+  right: var(--grid-dropzone-right);
+  bottom: var(--grid-dropzone-bottom);
+  left: var(--grid-dropzone-left);
+  transition-property: top, left, right, bottom;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  z-index: 100;
+}
+.vuuDropTarget-header:after {
+  background-color: red;
+  content: "";
+  inset: 0px;
+  opacity: 0.3;
+  pointer-events: none;
+  position: absolute;
+  transition-property: top, left, right, bottom;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  z-index: 100;
+}
+
diff --git a/vuu-ui/packages/grid-layout/src/GridLayout.tsx b/vuu-ui/packages/grid-layout/src/GridLayout.tsx
new file mode 100644
index 000000000..87943f85c
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridLayout.tsx
@@ -0,0 +1,183 @@
+import { registerComponent } from "@finos/vuu-utils";
+import { useIdMemo } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import cx from "clsx";
+import { CSSProperties, HTMLAttributes, ReactElement } from "react";
+import { DragDropProviderNext } from "./drag-drop-next/DragDropProviderNext";
+import type { ResizeOrientation } from "./grid-dom-utils";
+import { getGridArea } from "./grid-layout-utils";
+import { GridLayoutContext } from "./GridLayoutContext";
+import { GridLayoutItemProps } from "./GridLayoutItem";
+import { GridLayoutStackedItem } from "./GridLayoutStackedtem";
+import {
+  AriaOrientation,
+  GridColumnsAndRows,
+  GridLayoutChangeHandler,
+} from "./GridModel";
+import { GridPlaceholder } from "./GridPlaceholder";
+import { useGridLayout } from "./useGridLayout";
+import { useGridSplitterResizing } from "./useGridSplitterResizing";
+
+import gridLayoutCss from "./GridLayout.css";
+
+const classBase = "vuuGridLayout";
+
+export type GridResizeable = "h" | "v" | "hv";
+
+export interface GridSplitterProps extends HTMLAttributes<HTMLDivElement> {
+  "aria-controls": string;
+  ariaOrientation: AriaOrientation;
+  orientation: ResizeOrientation;
+}
+
+const NO_DRAG_SOURCES = {} as const;
+
+export const GridSplitter = ({
+  "aria-controls": ariaControls,
+  ariaOrientation,
+  orientation,
+  ...htmlAttributes
+}: GridSplitterProps) => {
+  const id = `${ariaControls}-splitter-${orientation[0]}`;
+  return (
+    <div
+      {...htmlAttributes}
+      aria-controls={ariaControls}
+      aria-orientation={ariaOrientation}
+      className="vuuGridSplitter"
+      id={id}
+      role="separator"
+    />
+  );
+};
+
+export interface GridLayoutProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  children?:
+    | ReactElement<GridLayoutItemProps>
+    | ReactElement<GridLayoutItemProps>[];
+  "full-page"?: boolean;
+  colsAndRows?: GridColumnsAndRows;
+  onChange?: GridLayoutChangeHandler;
+}
+
+export const GridLayout = ({
+  id: idProp,
+  children: childrenProp,
+  className,
+  "full-page": fullPage,
+  colsAndRows,
+  onClick,
+  onChange,
+  style: styleProp,
+  ...htmlAttributes
+}: GridLayoutProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-grid-layout",
+    css: gridLayoutCss,
+    window: targetWindow,
+  });
+
+  const id = useIdMemo(idProp);
+
+  const {
+    children,
+    containerCallback,
+    dispatchGridLayoutAction,
+    gridLayoutModel,
+    gridModel,
+    nonContentGridItems: { placeholders, splitters, stackedItems },
+    onDetachTab,
+    onDragEnd,
+    onDragStart,
+    onDrop,
+    onDropStackedItem,
+  } = useGridLayout({
+    children: childrenProp,
+    id,
+    colsAndRows,
+    onChange,
+  });
+
+  const splitterLayoutProps = useGridSplitterResizing({
+    gridLayoutModel,
+    gridModel,
+    id,
+    onClick,
+  });
+
+  const style = {
+    ...gridModel.tracks.css,
+    ...styleProp,
+  } as CSSProperties;
+
+  return (
+    <GridLayoutContext.Provider
+      value={{
+        dispatchGridLayoutAction,
+        gridLayoutModel,
+        gridModel,
+        id,
+        onDragEnd,
+        onDragStart,
+        onDrop,
+      }}
+    >
+      <DragDropProviderNext
+        dragSources={NO_DRAG_SOURCES}
+        onDetachTab={onDetachTab}
+        onDrop={onDropStackedItem}
+      >
+        <div
+          {...htmlAttributes}
+          {...splitterLayoutProps}
+          id={id}
+          ref={containerCallback}
+          style={style}
+          className={cx(classBase, className, {
+            vuuFullPage: fullPage,
+          })}
+          onDragEnd={onDragEnd}
+        >
+          {stackedItems.map((stackedItem) => (
+            <GridLayoutStackedItem
+              id={stackedItem.id}
+              key={stackedItem.id}
+              style={{
+                gridArea: getGridArea(stackedItem),
+              }}
+            />
+          ))}
+          {children}
+          {placeholders.map((placeholder) => (
+            <GridPlaceholder
+              id={placeholder.id}
+              key={placeholder.id}
+              style={{
+                gridArea: getGridArea(placeholder),
+              }}
+            />
+          ))}
+          {splitters.map((splitter) => (
+            <GridSplitter
+              aria-controls={splitter.controls}
+              ariaOrientation={splitter.ariaOrientation}
+              id={splitter.id}
+              key={splitter.id}
+              orientation={splitter.orientation}
+              style={{
+                gridArea: getGridArea(splitter),
+              }}
+            />
+          ))}
+        </div>
+      </DragDropProviderNext>
+    </GridLayoutContext.Provider>
+  );
+};
+
+GridLayout.displayName = "Grid";
+
+registerComponent("Grid", GridLayout, "container");
diff --git a/vuu-ui/packages/grid-layout/src/GridLayoutContext.ts b/vuu-ui/packages/grid-layout/src/GridLayoutContext.ts
new file mode 100644
index 000000000..4f189d932
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridLayoutContext.ts
@@ -0,0 +1,175 @@
+import { createContext, Dispatch, DragEvent, useContext } from "react";
+import { GridLayoutDragEndHandler } from "./GridLayoutProvider";
+import { GridModel, TabStateTab, TrackSize } from "./GridModel";
+import { GridLayoutDragStartHandler } from "./useDraggable";
+import { GridLayoutModel } from "./GridLayoutModel";
+import { GridLayoutDropPosition } from "@finos/vuu-utils";
+
+export type GridLayoutActionType = "close";
+
+export type GridLayoutCloseAction = {
+  type: "close";
+  id: string;
+};
+
+//TODO is it used ?
+export type GridLayoutInsertTabAction = {
+  type: "insert-tab";
+  id: string;
+  childId: string;
+};
+
+//TODO NOT USED
+export type GridLayoutSwitchTabAction = {
+  type: "switch-tab";
+  fromId: string;
+  toId: string;
+};
+
+export type GridLayoutTrackAction = {
+  type: "resize-grid-column" | "resize-grid-row";
+  trackIndex: number;
+  value: TrackSize;
+};
+
+export type GridLayoutAction =
+  | GridLayoutCloseAction
+  | GridLayoutInsertTabAction
+  | GridLayoutSwitchTabAction
+  | GridLayoutTrackAction;
+
+export type GridLayoutDispatch = Dispatch<GridLayoutAction>;
+const unconfiguredGridLayoutDispatch: GridLayoutDispatch = (action) =>
+  console.log(
+    `dispatch ${action.type}, have you forgotten to provide a GridLayoutProvider ?`,
+  );
+
+/**
+ * provides details of a dragged component within a stack
+ */
+export interface TabbedComponentDragSource {
+  element: HTMLElement;
+  isSelectedTab: boolean;
+  label: string;
+  layoutId: string;
+  tab: TabStateTab;
+  /** deprecated */
+  tabIndex: number;
+  tabsId: string;
+  type: "tabbed-component";
+}
+/**
+ * provides details of a dragged component
+ */
+export interface ComponentDragSource {
+  element: HTMLElement;
+  dragElement?: HTMLElement;
+  id: string;
+  label: string;
+  layoutId: string;
+  type: "component";
+}
+
+/**
+ * provides details of a template, to be used on drop to instantiate  a new component
+ */
+export interface TemplateDragSource {
+  componentJson: string;
+  element: HTMLElement;
+  layoutId: string;
+  label: string;
+  type: "template";
+}
+
+export type DragSourceProvider = (evt: DragEvent<Element>) => DragSource;
+
+export type DragSource =
+  | ComponentDragSource
+  | TemplateDragSource
+  | TabbedComponentDragSource;
+
+export const sourceIsComponent = (
+  source: DragSource | undefined,
+): source is ComponentDragSource => {
+  if (source === undefined) {
+    throw Error("sourceIsComponent: source is undefined");
+  }
+  return source.type === "component";
+};
+
+export const sourceIsTabbedComponent = (
+  source: DragSource | undefined,
+): source is TabbedComponentDragSource => {
+  if (source === undefined) {
+    throw Error("sourceIsComponent: source is undefined");
+  }
+  return source.type === "tabbed-component";
+};
+
+export const sourceIsTemplate = (
+  source: DragSource | undefined,
+): source is TemplateDragSource => {
+  if (source === undefined) {
+    throw Error("sourceIsTemplate: source is undefined");
+  }
+  return source.type === "template";
+};
+
+export type GridLayoutDropHandler = (
+  targetId: string,
+  dragSource: DragSource,
+  position: GridLayoutDropPosition,
+) => void;
+
+export interface GridLayoutContextProps {
+  dispatchGridLayoutAction: GridLayoutDispatch;
+  gridLayoutModel?: GridLayoutModel;
+  gridModel?: GridModel;
+  id: string;
+  onDragEnd?: GridLayoutDragEndHandler;
+  onDragStart: GridLayoutDragStartHandler;
+  onDrop: GridLayoutDropHandler;
+}
+
+export const GridLayoutContext = createContext<GridLayoutContextProps>({
+  dispatchGridLayoutAction: unconfiguredGridLayoutDispatch,
+  id: "",
+  onDragStart: () => console.log("no GridLayoutProvider"),
+  onDrop: () => console.log("no GridLayoutProvider"),
+});
+
+export const useGridLayoutDispatch = () => {
+  const { dispatchGridLayoutAction } = useContext(GridLayoutContext);
+  return dispatchGridLayoutAction;
+};
+
+export const useGridLayoutDropHandler = () => {
+  const { onDrop } = useContext(GridLayoutContext);
+  return onDrop;
+};
+
+export const useGridLayoutDragEndHandler = () => {
+  const { onDragEnd } = useContext(GridLayoutContext);
+  return onDragEnd;
+};
+
+export const useGridLayoutDragStartHandler = () => {
+  const { onDragStart } = useContext(GridLayoutContext);
+  return onDragStart;
+};
+
+export const useGridModel = () => {
+  const { gridModel } = useContext(GridLayoutContext);
+  if (gridModel) {
+    return gridModel;
+  } else {
+    throw Error(
+      "[useGridModel] no gridModel, did you forget to use a GridLayout",
+    );
+  }
+};
+
+export const useGridLayoutId = () => {
+  const { id } = useContext(GridLayoutContext);
+  return id;
+};
diff --git a/vuu-ui/packages/grid-layout/src/GridLayoutItem.tsx b/vuu-ui/packages/grid-layout/src/GridLayoutItem.tsx
new file mode 100644
index 000000000..798124799
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridLayoutItem.tsx
@@ -0,0 +1,214 @@
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import cx from "clsx";
+import {
+  createElement,
+  HTMLAttributes,
+  isValidElement,
+  MouseEventHandler,
+  ReactElement,
+  useCallback,
+  useEffect,
+} from "react";
+import { useAsDropTarget } from "./useAsDropTarget";
+import { useNotDropTarget } from "./useNotDropTarget";
+
+import { queryClosest } from "@finos/vuu-utils";
+import { componentToJson, LayoutJSON } from "./componentToJson";
+import gridLayoutCss from "./GridLayout.css";
+import {
+  DragSourceProvider,
+  useGridLayoutDispatch,
+  useGridLayoutDragStartHandler,
+} from "./GridLayoutContext";
+import { GridModelChildItemProps } from "./GridModel";
+import gridSplitterCss from "./GridSplitter.css";
+import { useDraggable } from "./useDraggable";
+import { useGridChildProps } from "./useGridChildProps";
+import { IconButton } from "./IconButton";
+
+const classBaseItem = "vuuGridLayoutItem";
+
+export interface GridLayoutItemProps
+  extends Omit<GridModelChildItemProps, "contentDetached" | "type">,
+    Omit<
+      HTMLAttributes<HTMLDivElement>,
+      "id" | "onDragStart" | "onDrop" | "style"
+    > {
+  "data-drop-target"?: boolean | string;
+  header?: boolean;
+  /**
+   * If provided, component is fixed height
+   */
+  height?: number;
+  label?: string;
+  /**
+   * If provided, component is fixed width
+   */
+  width?: number;
+}
+
+const getDragSource: DragSourceProvider = (evt) => {
+  const draggedItem = queryClosest(evt.target, ".vuuGridLayoutItem");
+  const dragElement =
+    (draggedItem?.querySelector(".vuuDraggableLabel") as HTMLElement) ||
+    undefined;
+  if (draggedItem) {
+    const gridLayout = queryClosest(draggedItem, ".vuuGridLayout", true);
+    return {
+      dragElement,
+      element: draggedItem,
+      id: draggedItem.id,
+      layoutId: gridLayout.id,
+      label:
+        draggedItem.querySelector(".vuuDraggableLabel")?.textContent ??
+        "no label",
+      type: "component",
+    };
+  }
+  throw Error("GridLayoutItem no found");
+};
+
+export const GridLayoutItem = ({
+  children,
+  className: classNameProp,
+  contentVisible: contentVisibleProp,
+  "data-drop-target": dataDropTarget,
+  header: headerProp,
+  height,
+  id,
+  stackId,
+  resizeable,
+  style: styleProp,
+  title: titleProp,
+  width,
+  ...htmlAttributes
+}: GridLayoutItemProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-grid-layout",
+    css: gridLayoutCss,
+    window: targetWindow,
+  });
+  useComponentCssInjection({
+    testId: "vuu-grid-splitter",
+    css: gridSplitterCss,
+    window: targetWindow,
+  });
+
+  const dispatch = useGridLayoutDispatch();
+  // TODO pass the styleProp in here to initialise the model value
+  const {
+    contentDetached,
+    contentVisible,
+    dropTarget,
+    header,
+    stacked,
+    title,
+    ...layoutProps
+  } = useGridChildProps({
+    contentVisible: contentVisibleProp,
+    dropTarget: dataDropTarget,
+    header: headerProp,
+    height,
+    id,
+    resizeable,
+    stackId,
+    style: styleProp,
+    title: titleProp,
+    width,
+  });
+
+  useEffect(
+    () => () => {
+      console.log(`unmount layout item ${id}`);
+    },
+    [id],
+  );
+
+  // why can't the hook that processes this make this call ?
+  const onDragStart = useGridLayoutDragStartHandler();
+
+  const onClose = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (evt) => {
+      evt.stopPropagation();
+      dispatch({ type: "close", id });
+    },
+    [dispatch, id],
+  );
+
+  const useDropTargetHook = dropTarget ? useAsDropTarget : useNotDropTarget;
+  const droppableProps = useDropTargetHook();
+  const draggableProps = useDraggable({
+    draggableClassName: classBaseItem,
+    getDragSource,
+    onDragStart,
+  });
+
+  console.log(`[GridLayoutItem] #${id} contentVisible ${contentVisible}`);
+
+  const className = cx(classBaseItem, {
+    "vuu-detached": contentDetached,
+    "vuu-stacked": stacked && !contentDetached,
+  });
+
+  const style = {
+    ...styleProp,
+    ...layoutProps,
+    "--header-height": header ? "25px" : "0px",
+  };
+
+  return contentVisible || contentDetached ? (
+    <div
+      {...htmlAttributes}
+      {...draggableProps}
+      {...droppableProps}
+      className={cx(className)}
+      id={id}
+      key={id}
+      style={style}
+    >
+      {header && !stacked ? (
+        <div className={cx(`${classBaseItem}Header`)} data-drop-target="header">
+          <span
+            className={`${classBaseItem}Header-title vuuDraggableLabel`}
+            draggable
+          >
+            {title}
+          </span>
+          <IconButton
+            className={`${classBaseItem}Header-close`}
+            data-align="right"
+            icon="close"
+            onClick={onClose}
+            variant="secondary"
+          />
+        </div>
+      ) : null}
+      <div
+        className={cx(`${classBaseItem}Content`)}
+        data-drop-target={dropTarget}
+      >
+        {children}
+      </div>
+    </div>
+  ) : null;
+};
+
+const GridLayoutItemType = createElement(GridLayoutItem).type;
+export const isGridLayoutItem = (element: ReactElement) =>
+  element.type === GridLayoutItem;
+
+GridLayoutItem.toJSON = (
+  element: ReactElement<GridLayoutItemProps, typeof GridLayoutItemType>,
+) => {
+  const { children } = element.props;
+  if (isValidElement(children)) {
+    const child = componentToJson(children);
+    return {
+      ...child,
+    } as LayoutJSON;
+  } else {
+    throw Error("[GridLayoutItem] children is not a react element");
+  }
+};
diff --git a/vuu-ui/packages/grid-layout/src/GridLayoutModel.ts b/vuu-ui/packages/grid-layout/src/GridLayoutModel.ts
new file mode 100644
index 000000000..25665e470
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridLayoutModel.ts
@@ -0,0 +1,807 @@
+import {
+  EventEmitter,
+  GridLayoutSplitDirection,
+  OptionalProperty,
+} from "@finos/vuu-utils";
+import {
+  gridResizeDirectionFromDropPosition,
+  doesResizeRequireNewTrack as isResizeTrackShared,
+  itemsFillColumn,
+  itemsFillRow,
+  splitGridChildPosition,
+} from "./grid-layout-utils";
+import {
+  TrackType,
+  type GridLayoutModelCoordinates,
+  type GridModel,
+  type GridModelChildItem,
+  type GridModelEvents,
+  type ISplitter,
+} from "./GridModel";
+
+export type GridLayoutModelPosition = {
+  end: number;
+  start: number;
+};
+
+export type ResizeState = {
+  resizeTrackIsShared: boolean;
+  mousePos: number;
+  splitter: ISplitter;
+};
+
+export type GridItemRemoveReason = "drag" | "close" | "placeholder" | "unstack";
+
+export type GridLayoutResizeOperation = "contract" | "expand";
+export type GridLayoutResizeDirection = "vertical" | "horizontal";
+export type GridLayoutRelativePosition =
+  | "aboveInSameColumn"
+  | "belowInSameColumn"
+  | "rightInSameRow"
+  | "leftInSameRow";
+export type GridLayoutTrack = "column" | "row";
+
+export type GridLayoutModelItemType =
+  | "content"
+  | "placeholder"
+  | "splitter"
+  | "stacked-content";
+
+type OneOrBothGridLayoutModelCoordinates =
+  | GridLayoutModelCoordinates
+  | OptionalProperty<GridLayoutModelCoordinates, "column">
+  | OptionalProperty<GridLayoutModelCoordinates, "row">;
+
+export type GridItemUpdate = [string, OneOrBothGridLayoutModelCoordinates];
+type ColumnAndRowUpdates = [GridItemUpdate[], GridItemUpdate[]];
+
+export type GridLayoutModelEvents = Pick<
+  GridModelEvents,
+  "child-position-updates"
+>;
+
+export class GridLayoutModel extends EventEmitter<GridLayoutModelEvents> {
+  private splitters: ISplitter[] | undefined;
+
+  constructor(private gridModel: GridModel) {
+    super();
+  }
+
+  private updateContrasToOccupySpace = ({
+    column,
+    id,
+    row,
+  }: GridModelChildItem): ColumnAndRowUpdates => {
+    // Do we have one or more GridItems that can be extended horizontally
+    // to fill the space described by column, row
+    // 1) Identify items that start on the same row and abut our gridCell(s)
+    // of interest, either to the left or to the right.
+    const adjacentItemsWithSameRowStart = this.gridModel
+      .findByRowStart(row.start)
+      ?.filter(
+        ({ column: { start, end }, stackId }) =>
+          stackId === undefined &&
+          (end === column.start || start === column.end),
+      );
+    if (adjacentItemsWithSameRowStart) {
+      // 2) do any of the items that start on the same row as our gridcell
+      // of interest also span exactly the same row(s) as that cell. If we
+      // have at least one of these, then we have a single item that can be
+      // extended to cover our cell(s) of interest.
+      // TODO sort by column, so we get the left item first
+      const itemsInSameRow = adjacentItemsWithSameRowStart.filter(
+        (item) => item.row.end === row.end && item.id !== id,
+      );
+      if (itemsInSameRow.length === 1) {
+        const [itemInSameRow] = itemsInSameRow;
+        const {
+          id: contraId,
+          column: { start, end },
+        } = itemInSameRow;
+
+        if (end === column.start) {
+          const updates: ColumnAndRowUpdates = [
+            [[contraId, { column: { start, end: column.end } }]],
+            [],
+          ];
+          if (itemInSameRow.type === "stacked-content") {
+            const stackedItems = this.gridModel.getStackedChildItems(
+              itemInSameRow.id,
+            );
+            stackedItems.forEach(({ id }) => {
+              updates[0].push([id, { column: { start, end: column.end } }]);
+            });
+          }
+
+          return updates;
+        } else if (start === column.end) {
+          const updates: ColumnAndRowUpdates = [
+            [[contraId, { column: { start: column.start, end } }]],
+            [],
+          ];
+          if (itemInSameRow.type === "stacked-content") {
+            const stackedItems = this.gridModel.getStackedChildItems(
+              itemInSameRow.id,
+            );
+            stackedItems.forEach(({ id }) => {
+              updates[0].push([id, { column: { start: column.start, end } }]);
+            });
+          }
+
+          return updates;
+        }
+      } else if (itemsInSameRow.length === 2) {
+        // assuming no overlapping gridcells, the most we can have here
+        // is 2 items in same row, one left and one right
+        const adjacentBefore = itemsInSameRow.filter(
+          (item) => item.column.end === column.start,
+        );
+        if (adjacentBefore.length === 1) {
+          const {
+            id: contraId,
+            column: { start },
+          } = adjacentBefore[0];
+          return [[[contraId, { column: { start, end: column.end } }]], []];
+        }
+        const adjacentAfter = itemsInSameRow.filter(
+          (item) => item.column.start === column.end,
+        );
+        if (adjacentAfter.length === 1) {
+          const {
+            id: contraId,
+            column: { end },
+          } = adjacentAfter[0];
+          return [[[contraId, { column: { start: column.start, end } }]], []];
+        }
+      } else {
+        // 3) We do not have a single gridcell that can be extended to cover our
+        // gridcell of interest, but we might have multiple cells that together
+        // can serve the same end. If we have multiple cells that all abut our
+        // target cell (on the same side) and together span the same row(s) as
+        // our target, we have what we need.
+        if (row.end - row.start > 1) {
+          const itemsEndingWhereTargetStarts = this.gridModel
+            .findByColumnEnd(column.start)
+            ?.filter(
+              (item) =>
+                item.stackId === undefined &&
+                item.row.start >= row.start &&
+                item.row.end <= row.end,
+            );
+          if (
+            itemsEndingWhereTargetStarts &&
+            itemsFillRow(itemsEndingWhereTargetStarts, row)
+          ) {
+            const columnUpdates = itemsEndingWhereTargetStarts.map(
+              ({ id: contraId, column: { start } }) =>
+                [
+                  contraId,
+                  { column: { start, end: column.end } },
+                ] as GridItemUpdate,
+            );
+
+            // if any are stacked-content, apply updates to child items
+
+            return [columnUpdates, []];
+          }
+          const itemsStartingWhereTargetEnds = this.gridModel
+            .findByColumnStart(column.end)
+            ?.filter(
+              (item) =>
+                item.stackId === undefined &&
+                item.row.start >= row.start &&
+                item.row.end <= row.end,
+            );
+          if (
+            itemsStartingWhereTargetEnds &&
+            itemsFillRow(itemsStartingWhereTargetEnds, row)
+          ) {
+            const columnUpdates = itemsStartingWhereTargetEnds.map(
+              ({ id: contraId, column: { end } }) =>
+                [
+                  contraId,
+                  { column: { start: column.start, end } },
+                ] as GridItemUpdate,
+            );
+            return [columnUpdates, []];
+          }
+        }
+      }
+    }
+    const adjacentItemsWithSameColumnStart = this.gridModel
+      .findByColumnStart(column.start)
+      ?.filter(
+        ({ row: { start, end }, stackId }) =>
+          stackId === undefined && (end === row.start || start === row.end),
+      );
+    if (adjacentItemsWithSameColumnStart) {
+      const itemsInSameColumn = adjacentItemsWithSameColumnStart.filter(
+        (item) => item.column.end === column.end && item.id !== id,
+      );
+
+      if (itemsInSameColumn.length === 1) {
+        const [itemInSameColumn] = itemsInSameColumn;
+
+        const {
+          id: contraId,
+          row: { start, end },
+        } = itemInSameColumn;
+        if (end === row.start) {
+          const updates: ColumnAndRowUpdates = [
+            [],
+            [[contraId, { row: { start, end: row.end } }]],
+          ];
+          if (itemInSameColumn.type === "stacked-content") {
+            const stackedItems = this.gridModel.getStackedChildItems(
+              itemInSameColumn.id,
+            );
+            stackedItems.forEach(({ id }) => {
+              updates[1].push([id, { row: { start, end: row.end } }]);
+            });
+          }
+          return updates;
+        } else if (start === row.end) {
+          const updates: ColumnAndRowUpdates = [
+            [],
+            [[contraId, { row: { start: row.start, end } }]],
+          ];
+          if (itemInSameColumn.type === "stacked-content") {
+            const stackedItems = this.gridModel.getStackedChildItems(
+              itemInSameColumn.id,
+            );
+            stackedItems.forEach(({ id }) => {
+              updates[1].push([id, { row: { start: row.start, end } }]);
+            });
+          }
+          return updates;
+        }
+      } else if (itemsInSameColumn.length === 2) {
+        const adjacentBefore = itemsInSameColumn.filter(
+          (item) => item.row.end === row.start,
+        );
+        if (adjacentBefore.length === 1) {
+          const {
+            id: contraId,
+            row: { start },
+          } = adjacentBefore[0];
+          return [[[contraId, { row: { start, end: row.end } }]], []];
+        }
+        const adjacentAfter = itemsInSameColumn.filter(
+          (item) => item.row.start === row.end,
+        );
+        if (adjacentAfter.length === 1) {
+          const {
+            id: contraId,
+            row: { end },
+          } = adjacentAfter[0];
+          return [[[contraId, { row: { start: row.start, end } }]], []];
+        }
+      } else {
+        if (column.end - column.start > 1) {
+          const itemsEndingWhereTargetStarts = this.gridModel
+            .findByRowEnd(row.start)
+            ?.filter(
+              (item) =>
+                item.column.start >= column.start &&
+                item.column.end <= column.end,
+            );
+          if (
+            itemsEndingWhereTargetStarts &&
+            itemsFillColumn(itemsEndingWhereTargetStarts, column)
+          ) {
+            const rowUpdates = itemsEndingWhereTargetStarts.map(
+              ({ id: contraId, row: { start } }) =>
+                [contraId, { row: { start, end: row.end } }] as GridItemUpdate,
+            );
+            return [[], rowUpdates];
+          }
+          const itemsStartingWhereTargetEnds = this.gridModel
+            .findByRowStart(row.end)
+            ?.filter(
+              (item) =>
+                item.column.start >= column.start &&
+                item.column.end <= column.end,
+            );
+          if (
+            itemsStartingWhereTargetEnds &&
+            itemsFillColumn(itemsStartingWhereTargetEnds, column)
+          ) {
+            const rowUpdates = itemsStartingWhereTargetEnds.map(
+              ({ id: contraId, row: { end } }) =>
+                [
+                  contraId,
+                  { row: { start: row.start, end } },
+                ] as GridItemUpdate,
+            );
+            return [[], rowUpdates];
+          }
+        }
+      }
+    }
+    return [[], []];
+  };
+
+  private setColExpanded = ({
+    id,
+    column: { start, end },
+  }: GridModelChildItem): GridItemUpdate => [
+    id,
+    { column: { start, end: end + 1 } },
+  ];
+
+  private setRowExpanded = ({
+    id,
+    row: { start, end },
+  }: GridModelChildItem): GridItemUpdate => [
+    id,
+    { row: { start, end: end + 1 } },
+  ];
+
+  private setShiftColForward = ({
+    id,
+    column: { start, end },
+  }: GridModelChildItem): GridItemUpdate => [
+    id,
+    { column: { start: start + 1, end: end + 1 } },
+  ];
+
+  private setShiftRowForward = ({
+    id,
+    row: { start, end },
+  }: GridModelChildItem): GridItemUpdate => [
+    id,
+    { row: { start: start + 1, end: end + 1 } },
+  ];
+
+  removeGridItem(gridItemId: string, reason: GridItemRemoveReason) {
+    const gridItem = this.gridModel.getChildItem(gridItemId, true);
+    this.gridModel.removeChildItem(gridItemId, reason);
+
+    const [colItemUpdates, rowItemUpdates] =
+      this.updateContrasToOccupySpace(gridItem);
+
+    if (rowItemUpdates.length || colItemUpdates.length) {
+      colItemUpdates.forEach(([id, { column: colPosition }]) => {
+        if (colPosition) {
+          this.gridModel.updateChildColumn(id, colPosition);
+        }
+      });
+      rowItemUpdates.forEach(([id, { row: rowPosition }]) => {
+        if (rowPosition) {
+          this.gridModel.updateChildRow(id, rowPosition);
+        }
+      });
+
+      const [unusedColLines, unusedRowLines] =
+        this.gridModel.findUnusedGridLines();
+      // TODO do we ever hit this code any more ?
+      console.log({ unusedColLines, unusedRowLines });
+      if (unusedColLines.length === 1) {
+        const trackIndex = unusedColLines[0] - 1;
+        const colUpdates = this.removeTrack(trackIndex, "horizontal");
+
+        colUpdates.forEach(([id, u]) => {
+          const existingUpdate = colItemUpdates.find(
+            ([itemId]) => id === itemId,
+          );
+          if (existingUpdate) {
+            existingUpdate[1] = u;
+          } else {
+            colItemUpdates.push([id, u]);
+          }
+        });
+      } else if (unusedColLines.length > 1) {
+        throw Error(
+          `[GridLayoutModel] removeGridItem, unexpected number of unused column lines ${unusedColLines.length}`,
+        );
+      }
+
+      if (unusedRowLines.length === 1) {
+        const trackIndex = unusedRowLines[0] - 1;
+        const rowUpdates = this.removeTrack(trackIndex, "vertical");
+        rowUpdates.forEach(([id, u]) => {
+          const existingUpdate = rowItemUpdates.find(
+            ([itemId]) => id === itemId,
+          );
+          if (existingUpdate) {
+            existingUpdate[1] = u;
+          } else {
+            rowItemUpdates.push([id, u]);
+          }
+        });
+      } else if (unusedRowLines.length > 1) {
+        throw Error(
+          `[GridLayoutModel] removeGridItem, unexpected number of unused row lines ${unusedRowLines.length}`,
+        );
+      }
+
+      if (unusedColLines.length === 1) {
+        const [indexOfRemovedColumnTrack] = unusedColLines;
+        this.gridModel.removeGridColumn(
+          indexOfRemovedColumnTrack - 1,
+          "bwd",
+          false,
+        );
+      }
+
+      if (unusedRowLines.length === 1) {
+        const [indexOfRemovedRowTrack] = unusedRowLines;
+        this.gridModel.removeGridRow(indexOfRemovedRowTrack - 1, "bwd", false);
+      }
+
+      this.emit(
+        "child-position-updates",
+        colItemUpdates.concat(rowItemUpdates),
+        { placeholders: true, splitters: true },
+      );
+    }
+
+    if (reason !== "placeholder") {
+      this.gridModel.createPlaceholders();
+    }
+
+    return [];
+  }
+
+  dropReplaceGridItem(droppedItemId: string, targetItemId: string) {
+    const { gridModel } = this;
+    const droppedGridItem = gridModel.getChildItem(droppedItemId, true);
+    const { column, row } = gridModel.getChildItem(targetItemId, true);
+    gridModel.removeChildItem(targetItemId, "close");
+    gridModel.updateChildColumn(droppedItemId, column);
+    gridModel.updateChildRow(droppedItemId, row);
+    return droppedGridItem;
+  }
+
+  createSplitters(): ISplitter[] {
+    return (this.splitters = this.gridModel.getSplitters());
+  }
+
+  getSplitterById(splitterId: string) {
+    const splitter = this.splitters?.find(({ id }) => id === splitterId);
+    if (splitter) {
+      return splitter;
+    } else {
+      throw Error(`[GridLayoutModel] getSplitterId #${splitterId}`);
+    }
+  }
+
+  getSplitter(
+    gridLayoutItem: GridModelChildItem,
+    resizeDirection: GridLayoutResizeDirection,
+  ) {
+    const splitter = this.splitters?.find(
+      ({ controls, orientation }) =>
+        controls === gridLayoutItem.id && orientation === resizeDirection,
+    );
+
+    if (splitter) {
+      return splitter;
+    }
+    throw Error(
+      `no splitter for gridItem ${gridLayoutItem.id} (${resizeDirection})`,
+    );
+  }
+
+  addTrackForResize(
+    trackType: TrackType,
+    newTrackIndex: number,
+    newTrackSize: number,
+    resizeOperation: GridLayoutResizeOperation,
+    trackIndex: number,
+    state: ResizeState,
+  ) {
+    console.log(
+      `[GridLayoutModel] addTrackForResize ${newTrackIndex} ${newTrackSize}`,
+    );
+
+    const { splitter } = state;
+    const { before: contraIds, after: resizeIds } = splitter.resizedChildItems;
+    const resizeDirection = splitter.orientation;
+
+    const expandingResizeItem = resizeOperation === "expand";
+    const indexAdjustment = expandingResizeItem ? -1 : +1;
+
+    this.gridModel.tracks.insertTrack(
+      trackType,
+      newTrackSize,
+      trackIndex,
+      expandingResizeItem,
+    );
+
+    const updates = this.addTrack(newTrackIndex, resizeDirection);
+
+    contraIds.forEach((id) => {
+      const {
+        [trackType]: { start, end },
+      } = this.gridModel.getChildItem(id, true);
+      const existingUpdate = updates.find(
+        ([itemId, positions]) => id === itemId && positions[trackType],
+      );
+      if (existingUpdate) {
+        const [, { [trackType]: position }] = existingUpdate;
+        if (position) {
+          position.end += indexAdjustment;
+        }
+      } else {
+        if (trackType === "column") {
+          updates.push([id, { column: { start, end: end + indexAdjustment } }]);
+        } else {
+          updates.push([id, { row: { start, end: end + indexAdjustment } }]);
+        }
+      }
+    });
+
+    resizeIds.forEach((id) => {
+      const {
+        [trackType]: { start, end },
+      } = this.gridModel.getChildItem(id, true);
+      const existingUpdate = updates.find(
+        ([itemId, positions]) => id === itemId && positions[trackType],
+      );
+      if (existingUpdate) {
+        const [, { [trackType]: position }] = existingUpdate;
+        if (position) {
+          position.start += indexAdjustment;
+        }
+      } else {
+        if (trackType === "column") {
+          updates.push([id, { column: { start, end: end + indexAdjustment } }]);
+        } else {
+          updates.push([id, { row: { start, end: end + indexAdjustment } }]);
+        }
+      }
+    });
+
+    this.applyUpdates(updates);
+
+    this.emit("child-position-updates", updates, { splitters: true });
+  }
+
+  /**
+   * Calculate the new grid positions for a dropped item and the target item,
+   * when the target is being split in two. Generate updates for the respective
+   * grid child items.
+   *
+   * @param droppedItemId
+   * @param targetItemId
+   * @param splitDirection
+   * @param splitIndex
+   * @returns
+   */
+  private dropSplitTarget(
+    droppedItemId: string,
+    targetItemId: string,
+    splitDirection: GridLayoutSplitDirection,
+    splitIndex: number,
+  ) {
+    let updates: GridItemUpdate[] = [];
+    const targetGridItem = this.gridModel.getChildItem(targetItemId, true);
+
+    const [droppedItemPosition, targetItemPosition] = splitGridChildPosition(
+      targetGridItem,
+      splitDirection,
+      splitIndex,
+    );
+
+    updates.push([targetItemId, targetItemPosition]);
+    updates.push([droppedItemId, droppedItemPosition]);
+
+    // Updates applied to a stacked item must also be applied to child items
+    if (targetGridItem.type === "stacked-content") {
+      const childitems = this.gridModel.getStackedChildItems(targetItemId);
+      updates = updates.concat(
+        childitems.map(({ id }) => [id, targetItemPosition]),
+      );
+    }
+
+    this.applyUpdates(updates);
+
+    return updates;
+  }
+
+  /**
+   * Dragged child item has been dropped on (NESW) quadrant of target.
+   * Split the target in two, respecting targetted quadrant and
+   * assign layout positions of each child item.
+   */
+  dropSplitGridItem(
+    droppedItemId: string,
+    targetItemId: string,
+    splitDirection: GridLayoutSplitDirection,
+    resizeDirection = gridResizeDirectionFromDropPosition(splitDirection),
+  ) {
+    const targetGridItem = this.gridModel.getChildItem(targetItemId, true);
+    let updates: GridItemUpdate[] = [];
+
+    const trackType = resizeDirection === "vertical" ? "row" : "column";
+    const tracks = this.gridModel.tracks.getTracks(trackType);
+
+    // determine where we need to split the track and check that this is, in fact, neccesary
+    const isVertical = resizeDirection === "vertical";
+
+    const resizeTrack = targetGridItem[trackType];
+    let newTrackIndex = resizeTrack.start - 1;
+
+    if (resizeTrack.end - resizeTrack.start === 1) {
+      // Splitting a single column
+      updates = this.addTrack(newTrackIndex, resizeDirection);
+      this.applyUpdates(updates);
+
+      updates = updates.filter(
+        ([id]) => id !== droppedItemId && id !== targetItemId,
+      );
+
+      updates = updates.concat(
+        this.dropSplitTarget(
+          droppedItemId,
+          targetItemId,
+          splitDirection,
+          isVertical
+            ? targetGridItem.row.end - 1
+            : targetGridItem.column.end - 1,
+        ),
+      );
+      const targetTrack = tracks[newTrackIndex];
+      if (targetTrack.isFraction) {
+        this.gridModel.tracks.measure(trackType);
+      }
+
+      this.gridModel.tracks.splitTrack(trackType, newTrackIndex);
+    } else {
+      // Is there already a track line in the required position
+      const bisectingGridTrack = this.gridModel.tracks.getBisectingTrack(
+        trackType,
+        resizeTrack.start,
+        resizeTrack.end,
+      );
+      if (bisectingGridTrack !== -1) {
+        const [droppedItemPosition, targetItemPosition] =
+          splitGridChildPosition(
+            { column: targetGridItem.column, row: targetGridItem.row },
+            splitDirection,
+            bisectingGridTrack,
+          );
+
+        updates.push([droppedItemId, droppedItemPosition]);
+        updates.push([targetItemId, targetItemPosition]);
+
+        // Updates applied to a stacked item must also be applied to child items
+        if (targetGridItem.type === "stacked-content") {
+          const childitems = this.gridModel.getStackedChildItems(targetItemId);
+          updates = updates.concat(
+            childitems.map(({ id }) => [id, targetItemPosition]),
+          );
+        }
+
+        this.applyUpdates(updates);
+      } else {
+        newTrackIndex = this.gridModel.tracks.splitTracks(
+          trackType,
+          resizeTrack.start,
+          resizeTrack.end,
+        );
+        updates = this.addTrack(newTrackIndex, resizeDirection);
+
+        updates = updates.filter(
+          ([id]) => id !== droppedItemId && id !== targetItemId,
+        );
+
+        updates = updates.concat(
+          this.dropSplitTarget(
+            droppedItemId,
+            targetItemId,
+            splitDirection,
+            newTrackIndex + 2,
+          ),
+        );
+      }
+    }
+
+    this.emit(
+      "child-position-updates",
+      updates,
+      { splitters: true },
+      // updates.filter(([id]) => id !== droppedItemId),
+    );
+  }
+
+  /*
+  When we add a track, all current track edges will be increased by 1.
+  Any gridItem bound to an edge equal to or greater than the one being
+  added must be adjusted.
+ */
+  addTrack(trackIndex: number, resizeDirection: GridLayoutResizeDirection) {
+    const gridPosition = trackIndex + 1;
+    const updates: GridItemUpdate[] = [];
+
+    const [setExpanded, setShiftForward] =
+      resizeDirection === "vertical"
+        ? [this.setRowExpanded, this.setShiftRowForward]
+        : [this.setColExpanded, this.setShiftColForward];
+
+    const track = resizeDirection === "vertical" ? "row" : "column";
+    for (const item of this.gridModel.childItems) {
+      const { start, end } = item[track];
+
+      if (start > gridPosition) {
+        updates.push(setShiftForward(item));
+      } else if (end > gridPosition) {
+        updates.push(setExpanded(item));
+      }
+    }
+
+    this.applyUpdates(updates);
+
+    return updates;
+  }
+
+  /*
+  When we remove a track edge, all following track edges will be reduced by 1.
+  Any gridItem bound to an edge greater than the one being removed must be
+  adjusted.
+ */
+  removeTrack(trackIndex: number, resizeDirection: GridLayoutResizeDirection) {
+    const gridPosition = trackIndex + 1;
+    const updates: GridItemUpdate[] = [];
+
+    const track = resizeDirection === "horizontal" ? "column" : "row";
+    for (const item of this.gridModel.childItems) {
+      const { start, end } = item[track];
+      let startUpdate: Partial<GridLayoutModelPosition> | undefined = undefined;
+      let endUpdate: Partial<GridLayoutModelPosition> | undefined = undefined;
+
+      if (start > gridPosition) {
+        startUpdate = { start: start - 1 };
+      }
+      if (end > gridPosition) {
+        endUpdate = { end: end - 1 };
+      }
+
+      if (startUpdate || endUpdate) {
+        updates.push([
+          item.id,
+          {
+            [track]: { start, end, ...startUpdate, ...endUpdate },
+          } as OneOrBothGridLayoutModelCoordinates,
+        ]);
+      }
+    }
+
+    this.applyUpdates(updates);
+
+    return updates;
+  }
+
+  isResizeTrackShared(splitter: ISplitter) {
+    if (this.splitters) {
+      return isResizeTrackShared(this.splitters, splitter);
+    } else {
+      throw Error(
+        "[GridLayoutModel] isResizeTrackShared, no splitters created",
+      );
+    }
+  }
+
+  toDebugString() {
+    return `
+      ${this.gridModel.childItems
+        .map(
+          ({ id, column, resizeable = "", row }) =>
+            `\n${id}\t\tcol ${column.start}/${column.end}\t row ${row.start}/${row.end}\t${resizeable}`,
+        )
+        .join("")}
+    `;
+  }
+
+  private applyUpdates(updates: GridItemUpdate[]) {
+    updates?.forEach(([id, { column: columnPosition, row: rowPosition }]) => {
+      if (columnPosition) {
+        this.gridModel.updateChildColumn(id, columnPosition);
+      }
+      if (rowPosition) {
+        this.gridModel.updateChildRow(id, rowPosition);
+      }
+    });
+  }
+}
diff --git a/vuu-ui/packages/grid-layout/src/GridLayoutProvider.tsx b/vuu-ui/packages/grid-layout/src/GridLayoutProvider.tsx
new file mode 100644
index 000000000..0e860c544
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridLayoutProvider.tsx
@@ -0,0 +1,197 @@
+import {
+  createContext,
+  DragEvent,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
+import { GridLayoutChangeHandler, GridLayoutDescriptor } from "./GridModel";
+import { GridLayoutItem, GridLayoutItemProps } from "./GridLayoutItem";
+import { layoutToJSON } from "./layoutToJson";
+import { layoutFromJson } from "./layoutFromJson";
+import { LayoutJSON } from "./componentToJson";
+
+export type GridChildElementsChangeHandler = (
+  id: string,
+  childElements: ReactElement<GridLayoutItemProps>[],
+) => void;
+
+type GridLayoutOptions = {
+  newChildItem: {
+    header: boolean;
+  };
+};
+
+export type ReactElementList = ReactElement[];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ReactElementMap<P = any> = Record<string, ReactElement<P>>;
+export type SerializedComponentMap = Record<string, LayoutJSON>;
+
+export type SerializedGridLayout = {
+  components: SerializedComponentMap;
+  id: string;
+  layout: GridLayoutDescriptor;
+};
+
+export type DeserializedGridLayout = {
+  components: ReactElementMap<GridLayoutItemProps>;
+  id: string;
+  layout: GridLayoutDescriptor;
+};
+
+interface GridLayoutProviderContext {
+  /**
+   * Returns a 'deserialized' copy of a grid layout. Deserialized means the
+   * child gridItems have already been reconstituted as React Elements
+   */
+  getSavedGrid?: (id: string) => DeserializedGridLayout | undefined;
+  gridChildItemsMap?: Map<string, SerializedComponentMap>;
+  gridLayoutMap?: Map<string, GridLayoutDescriptor>;
+  getChildElements?: (
+    id: string,
+    children?: ReactNode,
+  ) => ReactElement[] | undefined;
+  options?: GridLayoutOptions;
+  onChangeChildElements?: GridChildElementsChangeHandler;
+  onChangeLayout?: GridLayoutChangeHandler;
+}
+
+const GridLayoutProviderContext = createContext<GridLayoutProviderContext>({});
+
+export type GridLayoutDragEndHandler = (evt: DragEvent<HTMLElement>) => void;
+
+export interface GridLayoutProviderProps {
+  children: ReactNode;
+  options?: GridLayoutOptions;
+  serializedLayout?: SerializedGridLayout;
+}
+
+export const GridLayoutProvider = (
+  props: GridLayoutProviderProps,
+): ReactElement => {
+  const { children, serializedLayout, options } = props;
+  const [gridLayoutMap, gridChildItemsMap] = useMemo<
+    [Map<string, GridLayoutDescriptor>, Map<string, SerializedComponentMap>]
+  >(() => {
+    const componentMap = new Map();
+    const layoutMap: Map<string, GridLayoutDescriptor> = new Map();
+
+    if (serializedLayout) {
+      const { id, components, layout } = serializedLayout;
+      componentMap.set(id, components);
+      layoutMap.set(id, layout);
+    }
+    return [layoutMap, componentMap];
+  }, [serializedLayout]);
+
+  const onChangeLayout = useCallback<GridLayoutChangeHandler>(
+    (id, gridLayoutDescriptor) => {
+      console.log(`[GridLayoutProvider] ${id} onChangeLayout
+      ${JSON.stringify(gridLayoutDescriptor, null, 2)}`);
+      gridLayoutMap.set(id, gridLayoutDescriptor);
+    },
+    [gridLayoutMap],
+  );
+
+  /**
+   * We track child elements for two reasons:
+   *  - layout persistence to remote storage
+   *  - re-mounting of grid layout that has been previously
+   * unmounted, e.g because of tab switching withn a tabbed display
+   */
+  const onChangeChildElements = useCallback<GridChildElementsChangeHandler>(
+    (layoutId, childElements) => {
+      // console.log(`[GridLayoutProvider] #${layoutId} onChangeChildElements`, {
+      //   childElements,
+      // });
+      const serializedComponentMap =
+        childElements.reduce<SerializedComponentMap>((map, component) => {
+          const { id: gridLayoutItemId } = component.props;
+          if (typeof gridLayoutItemId !== "string") {
+            throw Error(
+              `[GridLayoutProvider] onChangeChildElements, child GridLayoutItem has no id`,
+            );
+          }
+          map[gridLayoutItemId] = layoutToJSON(component);
+          return map;
+        }, {});
+      gridChildItemsMap.set(layoutId, serializedComponentMap);
+    },
+    [gridChildItemsMap],
+  );
+  const getChildElements = useCallback(
+    (/*id: string, children?: ReactNode*/) => {
+      // console.log(`[GridLayoutProvider] #${id} getChildElements `, {
+      //   children,
+      // });
+      return undefined;
+    },
+    [],
+  );
+
+  const getSavedGrid = useCallback(
+    (id: string): DeserializedGridLayout | undefined => {
+      const layoutJSON = gridChildItemsMap.get(id);
+      const layout = gridLayoutMap.get(id);
+      if (layoutJSON && layout) {
+        return {
+          components: Object.entries(layoutJSON).reduce<
+            Record<string, ReactElement>
+          >((map, [id, layoutJSON]) => {
+            const gridItem = layout.gridLayoutItems?.[id];
+            if (!gridItem) {
+              throw Error(
+                `[GridLayoutProvider] no saved gridLayoutItem details for #${id}`,
+              );
+            }
+            const { gridArea, ...props } = gridItem;
+            map[id] = (
+              <GridLayoutItem {...props} id={id} key={id} style={{ gridArea }}>
+                {layoutFromJson(layoutJSON, "")}
+              </GridLayoutItem>
+            );
+            return map;
+          }, {}),
+          id,
+          layout,
+        };
+      }
+    },
+    [gridChildItemsMap, gridLayoutMap],
+  );
+
+  return (
+    <GridLayoutProviderContext.Provider
+      value={{
+        getChildElements,
+        getSavedGrid,
+        gridChildItemsMap,
+        gridLayoutMap,
+        onChangeChildElements,
+        onChangeLayout,
+        options,
+      }}
+    >
+      {children}
+    </GridLayoutProviderContext.Provider>
+  );
+};
+
+export const useGridChangeHandler = () => {
+  const { onChangeChildElements, onChangeLayout } = useContext(
+    GridLayoutProviderContext,
+  );
+  return { onChangeChildElements, onChangeLayout };
+};
+
+export const useSavedGrid = () => {
+  const { getSavedGrid } = useContext(GridLayoutProviderContext);
+  return getSavedGrid;
+};
+
+export const useGridLayoutOptions = () => {
+  const { options } = useContext(GridLayoutProviderContext);
+  return options;
+};
diff --git a/vuu-ui/packages/grid-layout/src/GridLayoutStackedtem.tsx b/vuu-ui/packages/grid-layout/src/GridLayoutStackedtem.tsx
new file mode 100644
index 000000000..ec35790bf
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridLayoutStackedtem.tsx
@@ -0,0 +1,135 @@
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import cx from "clsx";
+import {
+  createElement,
+  ReactElement,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+} from "react";
+
+import {
+  TabBar,
+  TabListNext,
+  TabNext,
+  TabNextTrigger,
+  TabsNext,
+} from "@salt-ds/lab";
+import gridLayoutCss from "./GridLayout.css";
+import { GridLayoutItemProps } from "./GridLayoutItem";
+import gridSplitterCss from "./GridSplitter.css";
+import { useGridChildProps } from "./useGridChildProps";
+import { useDragContext } from "./drag-drop-next/DragDropProviderNext";
+import { useGridModel } from "./GridLayoutContext";
+
+const classBaseItem = "vuuGridLayoutStackedItem";
+
+export const GridLayoutStackedItem = ({
+  children,
+  className: classNameProp,
+  header,
+  id,
+  resizeable,
+  style: styleProp,
+  title,
+  ...htmlAttributes
+}: GridLayoutItemProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-grid-layout",
+    css: gridLayoutCss,
+    window: targetWindow,
+  });
+  useComponentCssInjection({
+    testId: "vuu-grid-splitter",
+    css: gridSplitterCss,
+    window: targetWindow,
+  });
+
+  const { registerTabsForDragDrop } = useDragContext();
+
+  useEffect(() => {
+    registerTabsForDragDrop(id);
+  }, [id, registerTabsForDragDrop]);
+
+  const layoutProps = useGridChildProps({
+    id,
+    resizeable,
+    style: styleProp,
+    type: "stacked-content",
+  });
+
+  const { getTabState } = useGridModel();
+  const tabState = getTabState(id);
+
+  const handleTabSelectionChange = useCallback(
+    (_: SyntheticEvent | null, value: string) => {
+      tabState.setActiveTab(value);
+    },
+    [tabState],
+  );
+
+  const className = cx(classBaseItem, "vuuGridLayoutItem");
+
+  const style = {
+    ...styleProp,
+    ...layoutProps,
+  };
+
+  const tabsId = `tabs-${id}`;
+
+  // console.log(
+  //   `[GridLayoutStackedItem] render (#${tabState.activeTab.id} active)
+  //    ${JSON.stringify(tabState.tabs, null, 2)}
+  //   `,
+  // );
+
+  console.log(
+    `[GridLayoutStackedItem] render ${tabState.tabs.map((t) => t.label)}`,
+  );
+
+  return (
+    <>
+      <div
+        {...htmlAttributes}
+        className={cx(className)}
+        id={id}
+        key={id}
+        style={style}
+      >
+        <TabsNext
+          onChange={handleTabSelectionChange}
+          value={tabState.tabs[tabState.active].label}
+        >
+          <TabBar divider>
+            <TabListNext
+              appearance="transparent"
+              className="vuuDragContainer"
+              id={tabsId}
+            >
+              {tabState.tabs.map(({ id: gridLayoutItemId, label }, index) => (
+                <TabNext
+                  className="vuuDraggableItem"
+                  data-index={index}
+                  data-grid-layout-item-id={gridLayoutItemId}
+                  data-label={label}
+                  draggable
+                  value={label}
+                  key={label}
+                >
+                  <TabNextTrigger>{label}</TabNextTrigger>
+                </TabNext>
+              ))}
+            </TabListNext>
+          </TabBar>
+        </TabsNext>
+      </div>
+    </>
+  );
+};
+
+const GridLayoutStackedItemType = createElement(GridLayoutStackedItem).type;
+
+export const isGridLayoutStackedItem = (element: ReactElement) =>
+  element.type === GridLayoutStackedItemType;
diff --git a/vuu-ui/packages/grid-layout/src/GridModel.ts b/vuu-ui/packages/grid-layout/src/GridModel.ts
new file mode 100644
index 000000000..775ee0919
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridModel.ts
@@ -0,0 +1,1616 @@
+import { EventEmitter, uuid, type OptionalProperty } from "@finos/vuu-utils";
+import { CSSProperties } from "react";
+import { DropPosition } from "./drag-drop-next/DragContextNext";
+import {
+  byColumnStart,
+  byRowStart,
+  getGridPosition,
+  getMatchingColspan,
+  getMatchingRowspan,
+  isFixedHeightChildItem,
+  isFixedWidthChildItem,
+} from "./grid-layout-utils";
+import { getEmptyExtents, getGridMatrix } from "./grid-matrix";
+import {
+  GridItemRemoveReason,
+  GridItemUpdate,
+  GridLayoutModelPosition,
+  GridLayoutResizeDirection,
+} from "./GridLayoutModel";
+
+export type TrackUnit = "px" | "fr";
+export type CSSTrackSize = `${number}${TrackUnit}`;
+export type TrackSize = number | CSSTrackSize;
+
+export const isFractionUnit = (trackSize: TrackSize) =>
+  typeof trackSize === "string" && trackSize.endsWith("fr");
+
+export const isPixelUnit = (trackSize: TrackSize): trackSize is CSSTrackSize =>
+  typeof trackSize === "string" && trackSize.endsWith("px");
+
+const NO_SPLITTERS: ISplitter[] = [];
+
+//TODO shouldn't id be here ?
+export interface GridLayoutChildItemDescriptor {
+  contentVisible?: boolean;
+  dropTarget?: boolean | string;
+  gridArea: string;
+  header?: boolean;
+  resizeable?: GridModelItemResizeable;
+  /**
+   * For GridLayoutItems that are 'stacked' (e.g. displayed in tabbed container)
+   * this is the id of the associated StackedLayoutItem.
+   */
+  stackId?: string;
+  title?: string;
+}
+
+export interface GridLayoutChildItemDescriptorWithComponentId
+  extends GridLayoutChildItemDescriptor {
+  componentId: string;
+}
+
+export type GridLayoutChildItemDescriptors = Record<
+  string,
+  GridLayoutChildItemDescriptor
+>;
+// export type GridLayoutChildItemDescriptors =
+//   | Record<string, GridLayoutChildItemDescriptor>
+//   | GridLayoutChildItemDescriptorWithComponentId[];
+
+export interface GridColumnsAndRows {
+  cols: TrackSize[];
+  rows: TrackSize[];
+}
+
+/**
+ * Describes a GridLayout
+ * grid rows and columns
+ * layout details of gridItems
+ */
+export interface GridLayoutDescriptor extends GridColumnsAndRows {
+  gridLayoutItems?: GridLayoutChildItemDescriptors;
+}
+
+export interface GridLayoutModelCoordinates {
+  column: GridLayoutModelPosition;
+  row: GridLayoutModelPosition;
+}
+
+export interface GridModelChildItemProps
+  extends Omit<GridLayoutChildItemDescriptor, "gridArea"> {
+  contentVisible?: boolean;
+  fixed?: boolean;
+  height?: number;
+  id: string;
+  style: GridChildItemStyle;
+  type?: GridModelItemType;
+  width?: number;
+}
+
+export type GridModelTrack = "column" | "row";
+
+export type AssignDirection = "bwd" | "fwd";
+
+const assertValidTracks = (track: "col" | "row", trackSizes?: TrackSize[]) => {
+  if (trackSizes === undefined) {
+    console.warn(`[GridModel]  ${track}s  must be specified`);
+  }
+};
+
+export type GridLayoutChangeHandler = (
+  gridId: string,
+  gridLayoutDescriptor: GridLayoutDescriptor,
+) => void;
+
+export type NonContentResetOptions = {
+  placeholders?: boolean;
+  splitters?: boolean;
+};
+
+export const NonContentResetOptions: NonContentResetOptions = {
+  placeholders: false,
+  splitters: false,
+};
+
+export type GridChildPositionChangeHandler = (
+  updates: GridItemUpdate[],
+  nonContentResetOptions?: NonContentResetOptions,
+) => void;
+
+export type TabsChangeHandler = (
+  tabsId: string,
+  active: number,
+  tabs: TabStateTab[],
+) => void;
+export type TabSelectionChangeHandler = (
+  tabsId: string,
+  active: number,
+) => void;
+
+export type GridModelEvents = {
+  "grid-layout-change": GridLayoutChangeHandler;
+  "child-position-updates": GridChildPositionChangeHandler;
+  "tabs-change": TabsChangeHandler;
+  "tabs-created": (stackItem: GridModelChildItem) => void;
+  "tabs-removed": (tabsId: string) => void;
+  "tab-selection-change": TabSelectionChangeHandler;
+};
+
+export type GridModelPosition = {
+  end: number;
+  start: number;
+};
+
+/**
+ * Describes position of component within grid container. Position
+ * is grid column and row start and end values.
+ */
+export interface GridModelCoordinates {
+  column: GridModelPosition;
+  row: GridModelPosition;
+}
+
+export type GridModelItemResizeable = "h" | "v" | "hv" | false;
+export type GridModelItemType =
+  | "content"
+  | "placeholder"
+  | "splitter"
+  | "stacked-content";
+
+/**
+ * The set of attributes that allow the management of layout and behaviour of a
+ * component laid out in a grid container.
+ */
+export interface IGridModelChildItem extends GridModelCoordinates {
+  childId?: string[];
+  closeable?: boolean;
+  contentVisible?: boolean;
+  dropTarget?: boolean | string;
+  fixed?: boolean;
+  header?: boolean;
+  height?: number;
+  id: string;
+  stackId?: string;
+  resizeable?: GridModelItemResizeable;
+  title?: string;
+  type: GridModelItemType;
+  width?: number;
+}
+
+export interface IPlaceholder extends IGridModelChildItem {
+  type: "placeholder";
+}
+
+// TODO revert this when we support full gridARea syntax
+// export type GridChildItemStyle = Pick<CSSProperties, "gridArea">;
+export type GridChildItemStyle = Omit<CSSProperties, "gridArea"> & {
+  gridArea: string;
+};
+
+const isPlaceholder = (item: IGridModelChildItem): item is IPlaceholder =>
+  item.type === "placeholder";
+
+type StackedGridModelChildItem = GridModelChildItem & { stackId: string };
+export const isStackedItem = (
+  i: GridModelChildItem,
+): i is StackedGridModelChildItem => !!i.stackId;
+
+export type GridModelStackedChildItem = GridModelChildItem & {
+  type: "stacked-content";
+};
+
+class ObservableGridPosition {
+  #id: string;
+  #start: number;
+  #end: number;
+  constructor(id: string, { start, end }: GridModelPosition) {
+    this.#id = id;
+    this.#start = start;
+    this.#end = end;
+  }
+
+  get start() {
+    return this.#start;
+  }
+  set start(val: number) {
+    // console.log(`[ObservableGridPosition] #${this.#id} set start ${val}`);
+    this.#start = val;
+  }
+  get end() {
+    return this.#end;
+  }
+  set end(val: number) {
+    // console.log(`[ObservableGridPosition] #${this.#id} set end ${val}`);
+    this.#end = val;
+  }
+
+  // clone() {
+  //   return new ObservableGridPosition(this.#id, {
+  //     start: this.#start,
+  //     end: this.#end,
+  //   });
+  // }
+
+  toJSON() {
+    return {
+      start: this.#start,
+      end: this.#end,
+    };
+  }
+}
+
+export class GridModelChildItem implements IGridModelChildItem {
+  id: string;
+  column: GridModelPosition;
+  contentDetached?: boolean;
+  contentVisible?: boolean;
+  dropTarget?: boolean | string;
+  header?: boolean;
+  height?: number;
+  stackId?: string;
+  resizeable: GridModelItemResizeable;
+  row: GridModelPosition;
+  title?: string;
+  type: GridModelItemType;
+  width?: number;
+
+  #dragging = false;
+
+  constructor({
+    header,
+    height,
+    id,
+    row,
+    column,
+    dropTarget,
+    stackId,
+    resizeable = false,
+    title,
+    type = "content",
+    width,
+    contentVisible = stackId === undefined,
+  }: OptionalProperty<IGridModelChildItem, "type">) {
+    this.contentVisible = contentVisible;
+    this.dropTarget = dropTarget;
+    this.header = header;
+    this.height = height;
+    this.id = id;
+    this.row = new ObservableGridPosition(id, row);
+    this.column = new ObservableGridPosition(id, column);
+    this.stackId = stackId;
+    this.resizeable = resizeable;
+    this.title = title;
+    this.type = type;
+    this.width = width;
+  }
+
+  get dragging() {
+    return this.#dragging;
+  }
+
+  set dragging(isDragging: boolean) {
+    console.log(`[GridModelItem#${this.id}] set dragging ${isDragging}`);
+    this.#dragging = isDragging;
+  }
+
+  get layoutStyle() {
+    const {
+      column: { start: gridColumnStart, end: gridColumnEnd },
+      row: { start: gridRowStart, end: gridRowEnd },
+    } = this;
+    return { gridColumnEnd, gridColumnStart, gridRowEnd, gridRowStart };
+  }
+}
+
+export type AriaOrientation = "horizontal" | "vertical";
+export type SplitterAlign = "start" | "end";
+
+export interface ISplitter extends GridLayoutModelCoordinates {
+  align: SplitterAlign;
+  ariaOrientation: AriaOrientation;
+  controls: string;
+  id: string;
+  orientation: GridLayoutResizeDirection;
+  /**
+   * Index values of the two grid tracks (column or row) whose
+   * dimension (width for columns, height for rows) can be
+   * manipulated with this splitter. The tracks will usually,
+   * but not always, be adjacent.
+   */
+  resizedGridTracks: [number, number];
+  resizedChildItems: {
+    before: string[];
+    after: string[];
+  };
+}
+
+export type TabStateEvent = (tabState: TabState) => void;
+export type TabStateTabEvents = {
+  "active-change": TabStateEvent;
+  "tab-added": (tabState: TabState, tab: TabStateTab) => void;
+  "tab-detached": TabStateEvent;
+  "tabs-change": (tabsId: string, active: number, tabs: TabStateTab[]) => void;
+  "tabs-removed": (tabsId: string) => void;
+};
+
+export type TabStateTab = {
+  id: string;
+  label: string;
+};
+
+export class TabState extends EventEmitter<TabStateTabEvents> {
+  detachedTab: TabStateTab | undefined = undefined;
+  constructor(
+    public id: string,
+    public active: number,
+    public tabs: TabStateTab[],
+  ) {
+    super();
+  }
+
+  setActiveTab(value: string) {
+    this.active = this.indexOfTab(value);
+    this.emit("active-change", this);
+  }
+
+  /**
+   * A Tab is detached when a drag operation commences. It is removed from Tabstrip, but associated component
+   * remains in DOM. The 'next' tab is selected and the associated TabPanel made visible. The tab panel associated
+   * with the detached tab remains below the selected tab panel. This allows a dragged tab panel to be repositioned
+   * vis drag drop without removing it from DOM, triggering React unmount/remount.
+   */
+  detachTab(value: string) {
+    const nextActiveTab = this.getNextActiveTab();
+    if (nextActiveTab) {
+      this.detachedTab = this.tabs[this.indexOfTab(value)];
+      this.emit("tab-detached", this);
+      this.setActiveTab(nextActiveTab.label);
+    }
+  }
+
+  setNextActiveTab() {
+    const nextActiveTab = this.getNextActiveTab();
+    if (nextActiveTab) {
+      this.setActiveTab(nextActiveTab.label);
+    }
+  }
+
+  moveTab(
+    tab: TabStateTab,
+    { position, target }: DropPosition,
+    activateTab = false,
+  ) {
+    const { label: activeTab } = this.activeTab;
+    const indexOfMovedTab = this.indexOfTab(tab.label);
+    const newTabs = this.tabs.slice();
+    const [movedTab] = newTabs.splice(indexOfMovedTab, 1);
+    const indexOfTargetTab = this.indexOfTab(target, newTabs);
+
+    if (position === "after") {
+      newTabs.splice(indexOfTargetTab + 1, 0, movedTab);
+    } else {
+      newTabs.splice(indexOfTargetTab, 0, movedTab);
+    }
+
+    this.tabs = newTabs;
+
+    if (activateTab) {
+      this.active = this.indexOfTab(tab.label);
+    } else {
+      this.active = this.indexOfTab(activeTab);
+    }
+
+    this.emit("tabs-change", this.id, this.active, this.tabs);
+  }
+
+  addTab(tab: TabStateTab, { position, target }: DropPosition) {
+    console.log(
+      `[TabState#${this.id}] add tab #${tab.id} ${tab.label} ${position} ${target}`,
+    );
+    const pos = this.indexOfTab(target);
+    const newTabs = this.tabs.slice();
+    newTabs.splice(pos, 0, tab);
+    this.active = newTabs.indexOf(tab);
+    this.tabs = newTabs;
+    this.emit("tab-added", this, tab);
+  }
+
+  removeTab(id: string) {
+    console.log(`[TabState] remove tab ${id}`);
+    const { label: activeLabel } = this.activeTab;
+    this.tabs = this.tabs.filter((tab) => tab.id !== id);
+    this.active = this.indexOfTab(activeLabel);
+    if (this.tabs.length === 1) {
+      this.emit("tabs-removed", this.id);
+    } else {
+      this.emit("tabs-change", this.id, this.active, this.tabs);
+    }
+  }
+
+  get activeTab() {
+    return this.tabs[this.active];
+  }
+
+  private getNextActiveTab() {
+    const pos = this.tabs.indexOf(this.activeTab);
+    return pos > 0 ? this.tabs[pos - 1] : this.tabs[pos + 1];
+  }
+
+  private indexOfTab(label: string, tabs = this.tabs) {
+    return tabs.findIndex((tab) => tab.label === label);
+  }
+}
+
+export type TrackType = "column" | "row";
+
+export type GridTrackResizeHandler = (
+  trackType: TrackType,
+  tracks: GridTrack[],
+) => void;
+export type GridTrackEvents = {
+  "grid-track-resize": GridTrackResizeHandler;
+};
+
+const trackSizeToCssValue = (trackSize: TrackSize): CSSTrackSize =>
+  typeof trackSize === "number" ? `${trackSize}px` : trackSize;
+
+export class GridTrack {
+  static fromTrackSize = (trackSize: TrackSize) => new GridTrack(trackSize);
+
+  #measuredValue = -1;
+  #trackSize: TrackSize;
+
+  constructor(trackSize: TrackSize) {
+    this.#trackSize = trackSize;
+  }
+
+  get cssValue() {
+    return trackSizeToCssValue(this.#trackSize);
+  }
+
+  get hasBeenMeasured() {
+    return this.#measuredValue !== -1;
+  }
+
+  get isFraction() {
+    return isFractionUnit(this.#trackSize);
+  }
+
+  get isPixelValue() {
+    return isPixelUnit(this.#trackSize);
+  }
+
+  get isNumber() {
+    return typeof this.#trackSize === "number";
+  }
+
+  get isMeasured() {
+    return this.measuredValue !== -1;
+  }
+
+  get measuredValue() {
+    return this.#measuredValue ?? -1;
+  }
+
+  set measuredValue(value: number) {
+    this.#measuredValue = value;
+  }
+
+  convertUnitsToPixels() {
+    if (this.hasBeenMeasured) {
+      this.#trackSize = `${this.#measuredValue}px`;
+    } else {
+      throw Error(
+        `[GridTrack] convertUnitToPixels, tracks must be measured before calling this method`,
+      );
+    }
+  }
+
+  get hasNumericValue() {
+    return this.isNumber || this.isPixelValue || this.isMeasured;
+  }
+
+  get numericValue(): number {
+    if (this.isNumber) {
+      return this.#trackSize as number;
+    } else if (isPixelUnit(this.#trackSize)) {
+      return parseInt(this.#trackSize);
+    } else if (this.#measuredValue !== -1) {
+      return this.#measuredValue;
+    } else {
+      throw Error(
+        `[GridTrack] getter numericValue, trackSize is neither numeric or a pixel value`,
+      );
+    }
+  }
+
+  get trackSize() {
+    return this.#trackSize;
+  }
+
+  set trackSize(trackSize: TrackSize) {
+    this.#trackSize = trackSize;
+  }
+
+  increment(value: number) {
+    if (typeof this.#trackSize === "number") {
+      this.#trackSize += value;
+    } else if (isPixelUnit(this.#trackSize)) {
+      this.#trackSize = parseInt(this.#trackSize) + value;
+    } else if (this.#measuredValue !== -1) {
+      this.#trackSize = this.#measuredValue + value;
+    } else {
+      throw Error(
+        `[GridTrack] increment, value ${this.#trackSize} cannot be incremented unless measured first`,
+      );
+    }
+  }
+
+  toString = () => this.cssValue;
+}
+
+export class GridTracks extends EventEmitter<GridTrackEvents> {
+  #columns: GridTrack[];
+  #rows: GridTrack[];
+
+  constructor(
+    private gridId: string,
+    columns: TrackSize[],
+    rows: TrackSize[],
+  ) {
+    super();
+    this.#columns = columns.map(GridTrack.fromTrackSize);
+    this.#rows = rows.map(GridTrack.fromTrackSize);
+
+    console.log(`[GridTracks] 
+      columns ${columns.join(" ")}
+      rows ${rows.join(" ")}`);
+  }
+
+  get columns() {
+    return this.#columns.map((col) => col.trackSize);
+  }
+
+  set columns(columns: TrackSize[]) {
+    console.log(`[GridTracks] set columns ${columns.join(" ")}`);
+    this.#columns = columns.map(GridTrack.fromTrackSize);
+    this.emit("grid-track-resize", "column", this.#columns);
+  }
+
+  get rows() {
+    return this.#rows.map((col) => col.trackSize);
+  }
+
+  set rows(rows: TrackSize[]) {
+    console.log(`[GridTracks] set rows ${rows.join(" ")}`);
+    this.#rows = rows.map(GridTrack.fromTrackSize);
+    this.emit("grid-track-resize", "row", this.#rows);
+  }
+
+  get colCount() {
+    return this.#columns.length;
+  }
+  get rowCount() {
+    return this.#rows.length;
+  }
+
+  getTracks(trackType: TrackType) {
+    return trackType === "column" ? this.#columns : this.#rows;
+  }
+
+  /**
+   * Set the numeric track values from values read from DOM. This is invoked from a callbackRef
+   * as soom as GridLayout container is rendered into dom.
+   */
+  measure(trackType: TrackType) {
+    const el = document.getElementById(this.gridId);
+    if (el) {
+      const tracks = this.getTracks(trackType);
+      const measuredTracks = getComputedStyle(el)
+        .getPropertyValue(`grid-template-${trackType}s`)
+        .split(" ")
+        .map((value) => parseInt(value, 10));
+      console.log(
+        `[GridTracks] measure  ${trackType} ${measuredTracks.join(" ")}`,
+      );
+      measuredTracks.forEach((val, i) => (tracks[i].measuredValue = val));
+    } else {
+      throw Error(`[GridTracks] measure no grid element found #${this.gridId}`);
+    }
+  }
+
+  getBisectingTrack(
+    trackType: TrackType,
+    startIndex: number,
+    endIndex: number,
+  ) {
+    console.log(
+      `[GridTracks] getBisectingTrack (${trackType}) [${startIndex} : ${endIndex}] `,
+    );
+
+    const tracks = this.getTracks(trackType);
+    const tracksInRange = tracks.slice(startIndex - 1, endIndex);
+    if (!tracksInRange.every((track) => track.hasNumericValue)) {
+      this.measure(trackType);
+    }
+
+    if (endIndex - startIndex > 1) {
+      // Total the sizes between start and end
+      // find the half way point
+      // see if an existing edge occurs at that point (or wiuthin .5 pixesl, if decimal)
+    }
+    let size = 0;
+    for (let i = startIndex - 1; i < endIndex - 1; i++) {
+      size += tracks[i].numericValue;
+    }
+    const halfSize = size / 2;
+
+    size = 0;
+    for (let i = startIndex - 1; i < endIndex - 1; i++) {
+      size += tracks[i].numericValue;
+      if (Math.abs(halfSize - size) < 1) {
+        return i + 2;
+      }
+    }
+    return -1;
+  }
+
+  /**
+   * Split a single track into 2 equal sized tracks
+   *
+   */
+  splitTrack(trackType: TrackType, trackIndex: number) {
+    console.log(`[GridTracks] splitTrack (${trackType}) [${trackIndex}] `);
+
+    const tracks = this.getTracks(trackType);
+    const targetTrack = tracks[trackIndex];
+    if (targetTrack.isFraction) {
+      this.measure(trackType);
+    }
+    const sizeOfNewTrack = Math.floor(targetTrack.numericValue / 2);
+
+    tracks.splice(trackIndex, 0, new GridTrack(sizeOfNewTrack));
+    targetTrack.increment(-sizeOfNewTrack);
+
+    this.emit("grid-track-resize", trackType, tracks);
+  }
+
+  /**
+   * Given multiple tracks (columns/rows), create a new grid line that exactly bisects
+   * given tracks.
+   */
+  //TODO what if there is an existing track that bisects range
+  splitTracks(
+    trackType: TrackType,
+    fromTrackLine: number,
+    toTrackLine: number,
+  ) {
+    const tracks = this.getTracks(trackType);
+
+    const tracksInRange = tracks.slice(fromTrackLine - 1, toTrackLine);
+    if (!tracksInRange.every((track) => track.hasNumericValue)) {
+      this.measure(trackType);
+    }
+
+    let size = 0;
+    for (let i = fromTrackLine - 1; i < toTrackLine - 1; i++) {
+      size += tracks[i].numericValue;
+    }
+    let halfTrack = Math.floor(size / 2);
+    let newTrackIndex = 0;
+
+    const newTracks: GridTrack[] = [];
+    for (let i = 0; i < tracks.length; i++) {
+      if (i < fromTrackLine - 1) {
+        newTracks.push(tracks[i]);
+      } else if (i < toTrackLine - 1) {
+        if (tracks[i].numericValue < halfTrack) {
+          newTracks.push(tracks[i]);
+          halfTrack -= tracks[i].numericValue;
+        } else if (halfTrack) {
+          newTrackIndex = newTracks.length;
+          newTracks.push(new GridTrack(halfTrack));
+          newTracks.push(new GridTrack(tracks[i].numericValue - halfTrack));
+          halfTrack = 0;
+        } else {
+          newTracks.push(tracks[i]);
+        }
+      } else {
+        newTracks.push(tracks[i]);
+      }
+    }
+
+    console.log(`[GridTracks] splitTracks, after: ${tracks.join(" ")}`);
+
+    this.emit("grid-track-resize", trackType, newTracks);
+
+    return newTrackIndex;
+  }
+
+  insertTrack(
+    trackType: TrackType,
+    newTrackSize: number,
+    trackIndex: number,
+    expandingResizeItem: boolean,
+  ) {
+    console.log(
+      `[GridTracks] insertTrack (${trackType}) [${trackIndex}]  ${newTrackSize} expandingResizeItem ${expandingResizeItem}`,
+    );
+
+    const tracks = this.getTracks(trackType);
+    const resizeTrack = tracks[trackIndex];
+    const contraTrack = tracks[trackIndex - 1];
+    if (contraTrack === undefined) {
+      throw Error(
+        `[GridTracks] splitTrack, no contraTrack at [${contraTrack}]`,
+      );
+    }
+
+    const reducedTrack = expandingResizeItem ? contraTrack : resizeTrack;
+    if (reducedTrack.isFraction) {
+      this.measure(trackType);
+    }
+    tracks.splice(trackIndex, 0, new GridTrack(Math.abs(newTrackSize)));
+    reducedTrack.increment(-newTrackSize);
+
+    console.log(`[GridTracks] insertTrack, after: ${this.#columns.join(" ")}`);
+
+    this.emit("grid-track-resize", trackType, tracks);
+  }
+
+  removeTrack(
+    trackType: TrackType,
+    index: number,
+    assignDirection: AssignDirection = "fwd",
+  ) {
+    const assignFwd = index === 0 || assignDirection === "fwd";
+
+    const tracks = this.getTracks(trackType);
+
+    const contraTrack = assignFwd ? tracks[index + 1] : tracks[index - 1];
+    const [removedTrack] = tracks.splice(index, 1);
+    contraTrack.increment(removedTrack.numericValue);
+
+    this.emit("grid-track-resize", trackType, tracks);
+  }
+
+  resizeTo(
+    trackType: TrackType,
+    trackIndex: number,
+    value: TrackSize,
+    // animate = true,
+  ) {
+    // console.log(
+    //   `[GridTracks] resizeTo ${trackType} [${trackIndex}] ${value} animate ? ${animate}`,
+    // );
+
+    const tracks = this.getTracks(trackType);
+    tracks[trackIndex].trackSize = value;
+    this.emit("grid-track-resize", trackType, tracks);
+  }
+
+  resizeBy(
+    trackType: "row" | "column",
+    trackIndex: number,
+    contraTrackIndex: number,
+    value: number,
+  ) {
+    // console.log(
+    //   `[GridTracks] resize ${trackType} [${trackIndex},${contraTrackIndex}] by ${value}`,
+    // );
+    const tracks = this.getTracks(trackType);
+    const resizeTrack = tracks[trackIndex];
+    const contraTrack = tracks[contraTrackIndex];
+
+    if (resizeTrack === undefined || contraTrack === undefined) {
+      throw Error("[GridTracks] resize, no track at index position");
+    }
+
+    if (!resizeTrack.isFraction) {
+      resizeTrack.increment(value);
+    }
+    if (!contraTrack.isFraction) {
+      contraTrack.increment(-value);
+    } else if (resizeTrack.isFraction) {
+      // both tracks are defined with fractional unit
+      this.measure(trackType);
+      contraTrack.convertUnitsToPixels();
+      contraTrack.increment(-value);
+    }
+
+    this.emit("grid-track-resize", trackType, tracks);
+  }
+
+  get css(): Pick<CSSProperties, "gridTemplateColumns" | "gridTemplateRows"> {
+    return {
+      gridTemplateColumns: this.#columns.join(" "),
+      gridTemplateRows: this.#rows.join(" "),
+    };
+  }
+
+  serialize() {
+    return {
+      cols: this.columns,
+      rows: this.rows,
+    };
+  }
+
+  toString() {
+    return `
+      grid-template-columns: ${this.#columns.join(" ")} 
+      grid-template-rows: ${this.#rows.join(" ")} 
+    `;
+  }
+}
+export class GridModel extends EventEmitter<GridModelEvents> {
+  tracks: GridTracks;
+
+  #childItems: GridModelChildItem[] = [];
+  #index = new Map<string, IGridModelChildItem>();
+  #tabState = new Map<string, TabState>();
+
+  constructor(
+    public id: string,
+    { cols, gridLayoutItems, rows }: GridLayoutDescriptor,
+  ) {
+    super();
+
+    assertValidTracks("col", cols);
+    assertValidTracks("row", rows);
+
+    this.tracks = new GridTracks(id, cols, rows);
+
+    if (gridLayoutItems) {
+      this.addChildItems(gridLayoutItems);
+    }
+  }
+
+  get childItems() {
+    return this.#childItems;
+  }
+
+  private handleTabsChange = (
+    stackId: string,
+    active: number,
+    tabs: TabStateTab[],
+  ) => {
+    console.log(`[GridModel] handleTabsChange #${stackId} [${active}]`);
+    const activeTab = tabs[active];
+    this.activateStackedChildItem(stackId, activeTab);
+    this.emit("tabs-change", stackId, active, tabs);
+  };
+
+  private handleTabsRemoved = (stackId: string) => {
+    console.log(`[GridModel] handleTabsRemoved #${stackId}`);
+    this.removeChildItem(stackId, "unstack");
+
+    this.emit("tabs-removed", stackId);
+  };
+
+  private handleTabSelectionChange = ({
+    active,
+    activeTab,
+    id: stackId,
+  }: TabState) => {
+    console.log(`[GridModel] handleTabSelectionChange #${stackId} [${active}]`);
+    this.activateStackedChildItem(stackId, activeTab);
+    this.emit("tab-selection-change", stackId, active);
+  };
+
+  private handleTabAdded = (
+    { activeTab, id, tabs }: TabState,
+    tab: TabStateTab,
+  ) => {
+    const active = tabs.indexOf(activeTab);
+
+    const stackItem = this.getChildItem(id, true);
+    const stackedItem = this.getChildItem(activeTab.id, true);
+    console.log(`[GridModel] handleTabAdded ${id}`, {
+      tab,
+      stackItem,
+      stackedItem,
+    });
+
+    stackedItem.stackId = id;
+
+    // TODO - should we assign same instance of column and row to stacked items ?
+    this.updateChildColumn(activeTab.id, stackItem.column);
+    this.updateChildRow(activeTab.id, stackItem.row);
+    this, this.activateStackedChildItem(id, activeTab);
+    this.emit("child-position-updates", [
+      [activeTab.id, { column: stackItem.column, row: stackItem.row }],
+    ]);
+
+    this.emit("tabs-change", id, active, tabs);
+  };
+  private handleTabDetached = ({ activeTab, id: stackId }: TabState) => {
+    console.log(`[GridModel#${this.id}] handleTabDetached#${stackId}`);
+    this.detachStackedChildItem(stackId, activeTab);
+  };
+
+  getTabState = (tabsId: string) => {
+    const tabState = this.#tabState.get(tabsId);
+    if (tabState) {
+      return tabState;
+    } else {
+      throw Error(
+        `[GridModel#${this.id}] getTabState, no tabState found for tabs #${tabsId} and no initialisation params provided`,
+      );
+    }
+  };
+
+  setTabState(
+    stackId: string,
+    childItems: GridModelChildItem[],
+    activeItem = 0,
+  ) {
+    console.log(`[GridModel] setTabState  ${stackId}`);
+    let tabState = this.#tabState.get(stackId);
+    if (tabState) {
+      throw Error(`[GridModel] setTabState  already created for ${stackId}`);
+    }
+    const tabs = childItems.map(({ id, title }, index) => ({
+      id,
+      label: title ?? `Label-${index + 1}`,
+    }));
+    tabState = new TabState(stackId, activeItem, tabs);
+
+    tabState.on("active-change", this.handleTabSelectionChange);
+    tabState.on("tab-added", this.handleTabAdded);
+    tabState.on("tab-detached", this.handleTabDetached);
+    tabState.on("tabs-change", this.handleTabsChange);
+    tabState.on("tabs-removed", this.handleTabsRemoved);
+
+    this.activateStackedChildItem(stackId, tabs[activeItem]);
+
+    this.#tabState.set(stackId, tabState);
+    return tabState;
+  }
+
+  activateStackedChildItem(stackId: string, { id }: TabStateTab) {
+    const stackedChildren = this.getStackedChildItems(stackId);
+    stackedChildren.forEach((child) => {
+      if (child.id === id) {
+        child.contentVisible = true;
+        child.contentDetached = undefined;
+      } else {
+        child.contentVisible = false;
+      }
+    });
+  }
+
+  detachStackedChildItem(stackId: string, { id }: TabStateTab) {
+    const stackedChildren = this.getStackedChildItems(stackId);
+    const detachedChild = stackedChildren.find(
+      ({ id: itemId }) => itemId === id,
+    );
+    if (detachedChild) {
+      detachedChild.contentDetached = true;
+    }
+  }
+
+  moveItemWithinTabs(
+    tabsId: string,
+    tab: TabStateTab,
+    dropPosition: DropPosition,
+    selectMovedTab: boolean,
+  ) {
+    console.log(
+      `[GridModel#${this.id}] moveItemWithinTabs ${tab.id} in ${tabsId} ${dropPosition.position} ${dropPosition.target}`,
+    );
+    this.getTabState(tabsId).moveTab(tab, dropPosition, selectMovedTab);
+  }
+
+  moveItemBetweenTabs(
+    fromTabsId: string,
+    toTabsId: string,
+    tab: TabStateTab,
+    dropPosition: DropPosition,
+  ) {
+    console.log(
+      `[GridModel] moveItemBetweenTabs ${tab.id} from ${fromTabsId} to ${toTabsId} ${dropPosition.position} ${dropPosition.target}`,
+    );
+
+    this.getTabState(fromTabsId).removeTab(tab.id);
+    this.getTabState(toTabsId).addTab(tab, dropPosition);
+  }
+
+  notifyChange() {
+    this.emit("grid-layout-change", this.id, this.toGridLayoutDescriptor());
+  }
+
+  toGridLayoutDescriptor(): GridLayoutDescriptor {
+    return {
+      ...this.tracks.serialize(),
+      gridLayoutItems: this.#childItems.reduce<GridLayoutChildItemDescriptors>(
+        (
+          result,
+          {
+            id,
+            column,
+            contentVisible,
+            dropTarget,
+            header,
+            resizeable,
+            row,
+            stackId,
+            title,
+            type,
+          },
+        ) => {
+          console.log(`[GridModel] toGridLayoutDescriptor ${id} = ${type}`);
+          if (stackId) {
+            console.log(
+              `[GridModel] is a stacked item, active item ? ${contentVisible === true} `,
+            );
+          }
+          // The stacked-content gridItems are a runtime construct, no need to serialize
+          if (type !== "stacked-content") {
+            result[id] = {
+              contentVisible,
+              dropTarget,
+              gridArea: `${row.start}/${column.start}/${row.end}/${column.end}`,
+              header,
+              resizeable,
+              stackId,
+              title,
+            };
+          }
+          return result;
+        },
+        {},
+      ),
+    };
+  }
+
+  removeGridColumn(
+    index: number,
+    assignDirection?: AssignDirection,
+    updateChildItems = true,
+  ) {
+    this.tracks.removeTrack("column", index, assignDirection);
+
+    const updates: GridItemUpdate[] = [];
+
+    if (updateChildItems) {
+      const gridPosition = index + 1;
+
+      for (const item of this.#childItems) {
+        const { start, end } = item.column;
+
+        let startUpdate: Partial<GridLayoutModelPosition> | undefined =
+          undefined;
+        let endUpdate: Partial<GridLayoutModelPosition> | undefined = undefined;
+
+        if (start > gridPosition) {
+          startUpdate = { start: start - 1 };
+        }
+        if (end > gridPosition) {
+          endUpdate = { end: end - 1 };
+        }
+
+        if (startUpdate || endUpdate) {
+          updates.push([
+            item.id,
+            {
+              column: { start, end, ...startUpdate, ...endUpdate },
+            },
+          ]);
+        }
+      }
+
+      updates.forEach(([id, { column }]) => {
+        if (column) {
+          this.updateChildColumn(id, column);
+        }
+      });
+    }
+
+    this.emit("child-position-updates", updates, { splitters: true });
+  }
+  removeGridRow(
+    index: number,
+    assignDirection?: AssignDirection,
+    updateChildItems = true,
+  ) {
+    this.tracks.removeTrack("row", index, assignDirection);
+
+    // const newRows = this.removeGridTrack(this.#rows, index, assignDirection);
+    // this.setGridRows(newRows);
+
+    const updates: GridItemUpdate[] = [];
+
+    if (updateChildItems) {
+      const gridPosition = index + 1;
+
+      for (const item of this.#childItems) {
+        const { start, end } = item.row;
+
+        let startUpdate: Partial<GridLayoutModelPosition> | undefined =
+          undefined;
+        let endUpdate: Partial<GridLayoutModelPosition> | undefined = undefined;
+
+        if (start > gridPosition) {
+          startUpdate = { start: start - 1 };
+        }
+        if (end > gridPosition) {
+          endUpdate = { end: end - 1 };
+        }
+
+        if (startUpdate || endUpdate) {
+          updates.push([
+            item.id,
+            {
+              row: { start, end, ...startUpdate, ...endUpdate },
+            },
+          ]);
+        }
+      }
+
+      updates.forEach(([id, { row }]) => {
+        if (row) {
+          this.updateChildRow(id, row);
+        }
+      });
+    }
+
+    this.emit("child-position-updates", updates, { splitters: true });
+  }
+
+  private addChildItems(childItems: GridLayoutChildItemDescriptors) {
+    for (const [
+      id,
+      {
+        contentVisible,
+        dropTarget,
+        header,
+        resizeable,
+        stackId,
+        title,
+        ...item
+      },
+    ] of Object.entries(childItems)) {
+      const { column, row } = getGridPosition(item.gridArea);
+      this.addChildItem(
+        new GridModelChildItem({
+          contentVisible,
+          id,
+          column,
+          dropTarget,
+          header,
+          resizeable,
+          row,
+          stackId,
+          title,
+        }),
+      );
+    }
+  }
+
+  addChildItem(childItem: GridModelChildItem) {
+    // TODO assert that item is within current columns, rows or extend these
+    // console.log(
+    //   `[GridModel#${this.id}] addChildItem ${childItem.id} (parent: ${childItem.stackId})
+    //     is visible ? ${childItem.contentVisible}
+    //     resizeable ? ${childItem.resizeable}
+    //     gridArea ${JSON.stringify(childItem.layoutStyle)}
+    //   `,
+    //   {
+    //     childItem,
+    //   },
+    // );
+    this.#childItems.push(childItem);
+    this.#index.set(childItem.id, childItem);
+  }
+
+  updateChildColumn(childItemId: string, { start, end }: GridModelPosition) {
+    const childItem = this.getChildItem(childItemId, true);
+    const { start: previousStart, end: previousEnd } = childItem.column;
+    if (start !== previousStart) {
+      childItem.column.start = start;
+    }
+    if (end !== previousEnd) {
+      childItem.column.end = end;
+    }
+  }
+
+  updateChildRow(childItemId: string, { start, end }: GridModelPosition) {
+    const childItem = this.getChildItem(childItemId, true);
+    const { start: previousStart, end: previousEnd } = childItem.row;
+    if (start !== previousStart) {
+      childItem.row.start = start;
+    }
+    if (end !== previousEnd) {
+      childItem.row.end = end;
+    }
+  }
+
+  /**
+   * How we handle removal depends on context (the remove reason).
+   * If the child item is being deleted, we clear all references to the
+   * item in our internal structures. If the item is being dragged, we
+   * can expect it to be dropped again. We preserve some references,
+   * but mark the item as dragging.
+   */
+  removeChildItem(childItemId: string, reason: GridItemRemoveReason) {
+    const childItem = this.getChildItem(childItemId, true);
+    if (reason === "drag") {
+      childItem.dragging = true;
+    } else {
+      const indexOfDoomedItem = this.#childItems.indexOf(childItem);
+      this.#childItems.splice(indexOfDoomedItem, 1);
+      this.#index.delete(childItemId);
+      if (childItem.type === "stacked-content") {
+        const stackedChildItems = this.getStackedChildItems(childItemId);
+        stackedChildItems.forEach((childItem) => {
+          childItem.stackId = undefined;
+          childItem.contentVisible = true;
+        });
+      }
+    }
+  }
+
+  stackChildItems(targetId: string, stackedChildId: string) {
+    const targetChild = this.getChildItem(targetId, true);
+    const stackedChild = this.getChildItem(stackedChildId, true);
+
+    const {
+      column: { start: colStart, end: colEnd },
+      row: { start: rowStart, end: rowEnd },
+    } = targetChild;
+    const stackId = uuid();
+    const stackChild = new GridModelChildItem({
+      column: { start: colStart, end: colEnd },
+      id: stackId,
+      row: { start: rowStart, end: rowEnd },
+      type: "stacked-content",
+    });
+
+    this.setTabState(stackId, [targetChild, stackedChild]);
+
+    this.addChildItem(stackChild);
+
+    targetChild.stackId = stackId;
+    stackedChild.stackId = stackId;
+
+    this.updateChildColumn(stackedChild.id, { start: colStart, end: colEnd });
+    this.updateChildRow(stackedChild.id, { start: rowStart, end: rowEnd });
+
+    stackedChild.contentVisible = false;
+    targetChild.contentVisible = true;
+
+    this.emit("tabs-created", stackChild);
+  }
+
+  getChildItem(childItemId: string, throwIfNotFound: true): GridModelChildItem;
+  getChildItem(
+    childItemId: string,
+    throwIfNotFound?: false,
+  ): GridModelChildItem | undefined;
+  getChildItem(childItemId: string, throwIfNotFound = false) {
+    const gridItem = this.#index.get(childItemId);
+    if (gridItem) {
+      return gridItem;
+    } else if (throwIfNotFound) {
+      throw Error(`[GridModel] GridItem #${childItemId} not found`);
+    }
+  }
+
+  getStackedChildItems(): Map<string, StackedGridModelChildItem[]>;
+  getStackedChildItems(stackId: string): GridModelChildItem[];
+  getStackedChildItems(stackId?: string) {
+    if (stackId) {
+      return this.childItems.filter(
+        (childItem) => childItem.stackId === stackId,
+      );
+    } else {
+      const stackedChildren = this.childItems.filter(isStackedItem);
+      return Map.groupBy(stackedChildren, ({ stackId }) => stackId);
+    }
+  }
+
+  validateChildId(childItemId: string) {
+    if (this.#childItems.findIndex(({ id }) => id === childItemId) === -1) {
+      throw Error(`[GridModel] validateChildId #${childItemId}`);
+    } else {
+      return childItemId;
+    }
+  }
+
+  clearPlaceholders() {
+    const placeHolders = this.getPlaceholders();
+    placeHolders.forEach((placeholder) =>
+      this.removeChildItem(placeholder.id, "placeholder"),
+    );
+  }
+
+  findUnusedGridLines() {
+    const { colCount, rowCount } = this.tracks;
+
+    const unusedStartPositions: number[] = [];
+    const unusedColLines: number[] = [];
+    const unusedRowLines: number[] = [];
+
+    const childItemsWithoutDraggedItem = this.#childItems.filter(
+      (item) => !item.dragging,
+    );
+
+    for (let i = 1; i <= colCount; i++) {
+      if (!this.findByColumnStart(i, childItemsWithoutDraggedItem)) {
+        unusedStartPositions.push(i);
+      }
+    }
+
+    for (let i = 2; i <= colCount + 1; i++) {
+      if (!this.findByColumnEnd(i, childItemsWithoutDraggedItem)) {
+        if (unusedStartPositions.includes(i)) {
+          unusedColLines.push(i);
+        }
+      }
+    }
+
+    unusedStartPositions.length = 0;
+
+    for (let i = 1; i <= rowCount; i++) {
+      if (!this.findByRowStart(i, childItemsWithoutDraggedItem)) {
+        unusedStartPositions.push(i);
+      }
+    }
+
+    for (let i = 2; i <= rowCount + 1; i++) {
+      if (!this.findByRowEnd(i, childItemsWithoutDraggedItem)) {
+        if (unusedStartPositions.includes(i)) {
+          unusedRowLines.push(i);
+        }
+      }
+    }
+
+    return [unusedColLines, unusedRowLines];
+  }
+
+  /*
+  Placeholders are created to represent any empty areas on the grid
+  */
+  createPlaceholders() {
+    const {
+      childItems: gridItems,
+      tracks: { colCount, rowCount },
+    } = this;
+
+    this.clearPlaceholders();
+
+    const grid = getGridMatrix(gridItems, rowCount, colCount);
+    const emptyExtents = getEmptyExtents(grid);
+    emptyExtents.forEach((gridItem) => this.addChildItem(gridItem));
+  }
+
+  getPlaceholders() {
+    return this.childItems.filter(isPlaceholder);
+  }
+
+  getSplitters() {
+    return this.#childItems.flatMap(this.getSplittersForChildItem);
+  }
+
+  private getSplittersForChildItem = (childItem: GridModelChildItem) => {
+    if (childItem.stackId) {
+      return NO_SPLITTERS;
+    }
+
+    const splitters: ISplitter[] = [];
+    const { column, id, row } = childItem;
+
+    // 1) Horizontal (column) resizing - the vertically aligned splitters
+
+    if (!isFixedWidthChildItem(childItem)) {
+      const columnContrasAndSiblings =
+        this.findColContrasAndSiblings(childItem);
+
+      if (columnContrasAndSiblings) {
+        const resizeTrackIndex = column.start - 1;
+        const contraTrackIndex = column.start - 2;
+
+        const resizedChildItems = {
+          before: columnContrasAndSiblings.contras.map((c) => c.id),
+          after: columnContrasAndSiblings.siblings.map((c) => c.id),
+        };
+
+        splitters.push({
+          align: "start",
+          ariaOrientation: "vertical",
+          column,
+          controls: id,
+          id: `${id}-splitter-h`,
+          orientation: "horizontal",
+          row: columnContrasAndSiblings.position,
+          resizedChildItems,
+          resizedGridTracks: [contraTrackIndex, resizeTrackIndex],
+        });
+      }
+    }
+
+    // 2) Vertical (row) resizing - the horizontally aligned splitters
+
+    if (!isFixedHeightChildItem(childItem)) {
+      const rowContrasAndSiblings = this.findRowContrasAndSiblings(childItem);
+
+      if (rowContrasAndSiblings) {
+        const contraTrackIndex = row.start - 2;
+        let resizeTrackIndex = row.start - 1;
+
+        if (rowContrasAndSiblings.siblings[0] !== childItem) {
+          resizeTrackIndex = rowContrasAndSiblings.siblings[0].row.start - 1;
+        }
+
+        const resizedChildItems = {
+          before: rowContrasAndSiblings.contras.map((c) => c.id),
+          after: rowContrasAndSiblings.siblings.map((c) => c.id),
+        };
+
+        splitters.push({
+          align: "start",
+          ariaOrientation: "horizontal",
+          column: rowContrasAndSiblings.position,
+          controls: id,
+          id: `${id}-splitter-v`,
+          orientation: "vertical",
+          resizedChildItems,
+          resizedGridTracks: [contraTrackIndex, resizeTrackIndex],
+          row,
+        });
+      }
+    }
+
+    // console.log(
+    //   `[GridModel#${this.id}] getSplittersForChildItem#${childItem.id}`,
+    //   {
+    //     splitters,
+    //   },
+    // );
+
+    return splitters;
+  };
+
+  private findColContrasAndSiblings(childItem: GridModelChildItem) {
+    const contrasLeft = this.getContrasLeft(childItem);
+    if (contrasLeft.length > 0) {
+      const siblingsBelow = this.getSiblingsBelow(childItem);
+      return getMatchingRowspan(childItem, siblingsBelow, contrasLeft);
+    }
+  }
+  private findRowContrasAndSiblings(childItem: GridModelChildItem) {
+    const contrasAbove = this.getContrasAbove(childItem);
+    if (
+      contrasAbove.length > 0 &&
+      !contrasAbove.every(isFixedHeightChildItem)
+    ) {
+      if (isFixedHeightChildItem(childItem)) {
+        const contrasBelow = this.getContrasBelow(childItem);
+        if (contrasBelow) {
+          const [contra] = contrasBelow;
+          const siblingsRight = this.getSiblingsRight(contra);
+          return getMatchingColspan(contra, siblingsRight, contrasAbove);
+        }
+        // console.log(`going to have to skip a row for ${childItem.id}`, {
+        //   contrasBelow,
+        // });
+      } else {
+        const siblingsRight = this.getSiblingsRight(childItem);
+        return getMatchingColspan(childItem, siblingsRight, contrasAbove);
+      }
+    }
+  }
+
+  toDebugString() {
+    console.log(
+      this.#childItems
+        .map(
+          (c) =>
+            `${c.id.padEnd(10)} col ${c.column.start}/${c.column.end}, row ${c.row.start}/${c.row.end}`,
+        )
+        .join("\n"),
+    );
+  }
+
+  private getContrasAbove({ column, row }: GridModelChildItem) {
+    const allContrasAbove = this.findByRowEnd(row.start);
+    if (allContrasAbove) {
+      const indexOfAlignedContra = allContrasAbove.findIndex(
+        (item) => item.column.start === column.start,
+      );
+      if (indexOfAlignedContra !== -1) {
+        return allContrasAbove.sort(byColumnStart).slice(indexOfAlignedContra);
+      }
+    }
+    return [];
+  }
+  private getContrasBelow({ column, row }: GridModelChildItem) {
+    const allContrasBelow = this.findByRowStart(row.end);
+    if (allContrasBelow) {
+      const indexOfAlignedContra = allContrasBelow.findIndex(
+        (item) => item.column.start === column.start,
+      );
+      if (indexOfAlignedContra !== -1) {
+        return allContrasBelow.sort(byColumnStart).slice(indexOfAlignedContra);
+      }
+    }
+    return [];
+  }
+
+  private getSiblingsRight({ column, row }: GridModelChildItem) {
+    return (
+      this.findByRowStart(row.start)?.filter(
+        (item) => item.column.start > column.start,
+      ) ?? []
+    );
+  }
+
+  private getContrasLeft({ column, row }: GridModelChildItem) {
+    const allContrasLeft = this.findByColumnEnd(column.start);
+    if (allContrasLeft) {
+      const indexOfAlignedContra = allContrasLeft.findIndex(
+        (item) => item.row.start === row.start,
+      );
+      if (indexOfAlignedContra !== -1) {
+        // placeholders may not be in correct sort position
+        // sorting the original array here is ok
+        return allContrasLeft.sort(byRowStart).slice(indexOfAlignedContra);
+      }
+    }
+    return [];
+  }
+
+  private getSiblingsBelow({ column, row }: GridModelChildItem) {
+    return (
+      this.findByColumnStart(column.start)?.filter(
+        (item) => item.row.start > row.start,
+      ) ?? []
+    );
+  }
+
+  /**
+   * Given a column, return all childItems starting at that column
+   */
+  findByColumnStart(col: number, childItems = this.#childItems) {
+    const childItemsStartingAtCol = childItems.filter(
+      ({ column: { start } }) => start === col,
+    );
+    return childItemsStartingAtCol.length === 0
+      ? undefined
+      : childItemsStartingAtCol;
+  }
+  /**
+   * Given a column, return all childItems ending at that column
+   */
+  findByColumnEnd(col: number, childItems = this.#childItems) {
+    const childItemsEndingAtCol = childItems.filter(
+      ({ column: { end } }) => end === col,
+    );
+    return childItemsEndingAtCol.length === 0
+      ? undefined
+      : childItemsEndingAtCol;
+  }
+  /**
+   * Given a row, return all childItems starting at that row
+   */
+  findByRowStart(row: number, childItems = this.#childItems) {
+    const childItemsStartingAtRow = childItems.filter(
+      ({ row: { start } }) => start === row,
+    );
+    return childItemsStartingAtRow.length === 0
+      ? undefined
+      : childItemsStartingAtRow;
+  }
+  /**
+   * Given a row, return all childItems ending at that row
+   */
+  findByRowEnd(row: number, childItems = this.#childItems) {
+    const childItemsEndingAtRow = childItems.filter(
+      ({ row: { end } }) => end === row,
+    );
+    return childItemsEndingAtRow.length === 0
+      ? undefined
+      : childItemsEndingAtRow;
+  }
+}
diff --git a/vuu-ui/packages/grid-layout/src/GridPlaceholder.css b/vuu-ui/packages/grid-layout/src/GridPlaceholder.css
new file mode 100644
index 000000000..842e41c79
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridPlaceholder.css
@@ -0,0 +1,4 @@
+.vuuGridPlaceholder {
+  background-color: rgba(255, 12, 12, 0.1);
+  position: relative;
+}
diff --git a/vuu-ui/packages/grid-layout/src/GridPlaceholder.tsx b/vuu-ui/packages/grid-layout/src/GridPlaceholder.tsx
new file mode 100644
index 000000000..c69939f32
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridPlaceholder.tsx
@@ -0,0 +1,35 @@
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { HTMLAttributes } from "react";
+import { useAsDropTarget } from "./useAsDropTarget";
+
+import gridPlaceholderCss from "./GridPlaceholder.css";
+
+const classBase = "vuuGridPlaceholder";
+
+export interface GridPlaceholderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop"> {
+  debugLabel?: string;
+}
+
+export const GridPlaceholder = ({
+  ...htmlAttributes
+}: GridPlaceholderProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-grid-layout-placeholder",
+    css: gridPlaceholderCss,
+    window: targetWindow,
+  });
+
+  const dragDropHandlers = useAsDropTarget();
+
+  return (
+    <div
+      {...htmlAttributes}
+      {...dragDropHandlers}
+      className={`${classBase} vuuGridLayoutItem`}
+      data-drop-target
+    />
+  );
+};
diff --git a/vuu-ui/packages/grid-layout/src/GridSplitter.css b/vuu-ui/packages/grid-layout/src/GridSplitter.css
new file mode 100644
index 000000000..9700c21e7
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/GridSplitter.css
@@ -0,0 +1,27 @@
+.vuuGridSplitter {
+    background-color: cornflowerblue;
+}
+.vuuGridSplitter[aria-orientation="vertical"] {
+    cursor: ew-resize;
+    transform: translate(-2px,0);
+    width: 4px;
+}
+
+.vuuGridSplitter[aria-orientation="horizontal"] {
+    cursor: ns-resize;
+    height: 4px;
+    transform: translate(0, -2px);
+}
+
+.vuuGridSplitter[aria-controls="blue"]{
+    background-color: blue;
+}
+.vuuGridSplitter[aria-controls="red"]{
+    background-color: red;
+}
+.vuuGridSplitter[aria-controls="black"]{
+    background-color: black;
+}
+.vuuGridSplitter[aria-controls="green"]{
+    background-color: green;
+}
diff --git a/vuu-ui/packages/grid-layout/src/Icon.css b/vuu-ui/packages/grid-layout/src/Icon.css
new file mode 100644
index 000000000..334c28742
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/Icon.css
@@ -0,0 +1,3 @@
+.vuuIcon {
+    --vuu-icon-left: 0;
+}
\ No newline at end of file
diff --git a/vuu-ui/packages/grid-layout/src/Icon.tsx b/vuu-ui/packages/grid-layout/src/Icon.tsx
new file mode 100644
index 000000000..313cd7103
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/Icon.tsx
@@ -0,0 +1,42 @@
+import { HTMLAttributes } from "react";
+import cx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+
+import iconCss from "./Icon.css";
+
+const classBase = "vuuIcon";
+
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+  name: string;
+  size?: number;
+}
+
+export const Icon = ({
+  className,
+  name,
+  size,
+  style: styleProp,
+  ...htmlAttributes
+}: IconProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-icon",
+    css: iconCss,
+    window: targetWindow,
+  });
+
+  const style =
+    typeof size === "number"
+      ? { ...styleProp, "--vuu-icon-size": `${size}px` }
+      : styleProp;
+  return (
+    <span
+      {...htmlAttributes}
+      className={cx(classBase, className)}
+      data-icon={name}
+      role="img"
+      style={style}
+    />
+  );
+};
diff --git a/vuu-ui/packages/grid-layout/src/IconButton.css b/vuu-ui/packages/grid-layout/src/IconButton.css
new file mode 100644
index 000000000..5842a812d
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/IconButton.css
@@ -0,0 +1,4 @@
+.vuuIconButton {
+  --saltButton-padding: 0;
+  --saltButton-minWidth: var(--salt-size-base);
+}
diff --git a/vuu-ui/packages/grid-layout/src/IconButton.tsx b/vuu-ui/packages/grid-layout/src/IconButton.tsx
new file mode 100644
index 000000000..e787a4231
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/IconButton.tsx
@@ -0,0 +1,35 @@
+import cx from "clsx";
+import { Button, ButtonProps } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon } from "./Icon";
+import { forwardRef } from "react";
+
+import iconButtonCss from "./IconButton.css";
+
+const classBase = "vuuIconButton";
+
+export interface IconButtonProps extends Omit<ButtonProps, "children"> {
+  icon: string;
+  size?: number;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    { "aria-label": ariaLabel, className, icon, size, ...buttonProps },
+    ref
+  ) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-icon-button",
+      css: iconButtonCss,
+      window: targetWindow,
+    });
+
+    return (
+      <Button {...buttonProps} className={cx(classBase, className)} ref={ref}>
+        <Icon aria-label={ariaLabel} name={icon} size={size} />
+      </Button>
+    );
+  }
+);
diff --git a/vuu-ui/packages/grid-layout/src/componentToJson.ts b/vuu-ui/packages/grid-layout/src/componentToJson.ts
new file mode 100644
index 000000000..5dd5e73d0
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/componentToJson.ts
@@ -0,0 +1,83 @@
+import { elementImplementsJSONSerialization } from "@finos/vuu-utils";
+import React, { CSSProperties, ReactElement } from "react";
+import { getProps } from "./propUtils";
+import { typeOf } from "./typeOf";
+
+export interface LayoutJSON<T extends object = any> {
+  active?: number;
+  children?: LayoutJSON[];
+  id?: string;
+  props?: T;
+  state?: unknown;
+  style?: CSSProperties;
+  title?: string;
+  type: string;
+}
+
+export interface LayoutProps {
+  active?: number;
+  "data-path"?: string;
+  children?: ReactElement[];
+  /**
+   * indicates flexDirection for Flexbox
+   */
+  column?: boolean;
+  dropTarget?: boolean;
+  i8d: string;
+  key: string;
+  // layout?: LayoutJSON;
+  path?: string;
+  resizeable?: boolean;
+  style: CSSProperties;
+  type?: string;
+  version?: number;
+}
+
+export function componentToJson(element: ReactElement): LayoutJSON {
+  if (elementImplementsJSONSerialization(element)) {
+    return element.type.toJSON(element);
+  } else {
+    const type = typeOf(element) as string;
+    const { id, children, type: _omit, ...props } = getProps(element);
+
+    // const state = hasPersistentState(id) ? getPersistentState(id) : undefined;
+    const state = undefined;
+
+    return {
+      id,
+      type,
+      props: serializeProps(props as LayoutProps),
+      state,
+      children: React.Children.map(children, componentToJson),
+    };
+  }
+}
+
+export function serializeProps(props?: LayoutProps) {
+  if (props) {
+    const { path, ...otherProps } = props;
+    const result: { [key: string]: any } = {};
+    for (const [key, value] of Object.entries(otherProps)) {
+      result[key] = serializeValue(value);
+    }
+    return result;
+  }
+}
+
+function serializeValue(value: unknown): any {
+  if (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return value;
+  } else if (Array.isArray(value)) {
+    return value.map(serializeValue);
+  } else if (typeof value === "object" && value !== null) {
+    const result: { [key: string]: any } = {};
+    for (const [k, v] of Object.entries(value)) {
+      result[k] = serializeValue(v);
+    }
+    return result;
+  }
+}
diff --git a/vuu-ui/packages/grid-layout/src/drag-drop-next/DragContextNext.tsx b/vuu-ui/packages/grid-layout/src/drag-drop-next/DragContextNext.tsx
new file mode 100644
index 000000000..50609d132
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/drag-drop-next/DragContextNext.tsx
@@ -0,0 +1,247 @@
+import { EventEmitter, type orientationType } from "@finos/vuu-utils";
+import {
+  DragSource,
+  sourceIsComponent,
+  sourceIsTabbedComponent,
+  sourceIsTemplate,
+} from "../GridLayoutContext";
+import { initializeDragContainer } from "./drag-drop-listeners";
+
+type DragSourceDescriptor = {
+  // TODO make optional default is self
+  dropTargets: string[];
+  orientation?: orientationType;
+  payloadType?: string;
+};
+
+export type DropPosition = {
+  position: "before" | "after";
+  target: string;
+};
+
+export type DragSources = {
+  [key: string]: DragSourceDescriptor;
+};
+
+export type DropProps<T extends DragSource = DragSource> = {
+  dragSource: T;
+  toId?: string;
+  // The tab drop properties ...
+  tabsId?: string;
+  dropPosition?: DropPosition;
+};
+
+export type DropHandler<T extends DragSource = DragSource> = (
+  dropProps: DropProps<T>,
+) => void;
+
+const defaultDropHandler = () =>
+  console.log("no dropHandler has been attached");
+
+export type DragContextDropEvent = {
+  type: "drop";
+  dragSource: DragSource;
+  tabsId: string;
+  dropPosition: DropPosition;
+};
+export type DragContextDetachTabEvent = {
+  gridId: string;
+  type: "detach-tab";
+  tabsId: string;
+  value: string;
+};
+
+export type DragContextDropHandler = (evt: DragContextDropEvent) => void;
+export type DragContextDetachTabHandler = (
+  evt: DragContextDetachTabEvent,
+) => void;
+
+export type DragContextEvents = {
+  drop: DragContextDropHandler;
+  "detach-tab": DragContextDetachTabHandler;
+};
+
+/**
+ * This context is a global singleton. Even when DragDropProviders are nested,
+ * a single instance of this context object is always used.
+ */
+export class DragContext extends EventEmitter<DragContextEvents> {
+  #dragElementHeight?: number;
+  #dragElementWidth?: number;
+  #dragLabelWidth?: number;
+  #dragSource?: DragSource;
+  #dragSources: Map<string, DragSourceDescriptor> = new Map();
+  #dropHandler: DropHandler = defaultDropHandler;
+  #dropped = false;
+  #dropZoneCache = new Map<HTMLElement, boolean>();
+  #element?: HTMLElement;
+  #mouseX = -1;
+  #mouseY = -1;
+
+  beginDrag(e: DragEvent, dragSource: DragSource) {
+    const { clientX: x, clientY: y, dataTransfer } = e;
+    console.log(`[DragContextNext] beginDrag #${dragSource.layoutId}`);
+    if (dataTransfer) {
+      dataTransfer.effectAllowed = "move";
+      if (sourceIsTemplate(dragSource)) {
+        dataTransfer.setData("text/json", dragSource.componentJson);
+      } else if (sourceIsComponent(dragSource)) {
+        dataTransfer.setData("text/plain", dragSource.id);
+      } else if (sourceIsTabbedComponent(dragSource)) {
+        dataTransfer.setData("text/plain", dragSource.tab.id);
+      } else {
+        throw Error("whaat");
+      }
+      const { height, width } = dragSource.element.getBoundingClientRect();
+      this.#dragSource = dragSource;
+      this.#dropped = false;
+      this.#dragElementHeight = height;
+      this.#dragElementWidth = width;
+      this.#mouseX = x;
+      this.#mouseY = y;
+    }
+  }
+
+  endDrag() {
+    this.#dropZoneCache.clear();
+    this.#dragSource = undefined;
+    this.#element = undefined;
+    this.#dragElementHeight = undefined;
+    this.#dragElementWidth = undefined;
+  }
+
+  /**
+   * A 'detached' tab is one that has been dragged from its place in tabstrip
+   * but not yet dropped. If it is the selected tab, we want to avoid unmounting
+   * the react component in the associated TabPanel. By marking it as 'detached'
+   * the TabPanel is still rendered but not visible. When the tab is dropped, the
+   * TabPanel can be assigned its new location (might still be within tabstrip, might
+   * not be) and made visible, without ever having to unmount/remount.
+   */
+  detachTab(gridId: string, tabsId: string, value: string) {
+    // console.log(
+    //   `%c[DragContextNext] #${gridId}detachTab #${tabsId} tab (${value})`,
+    //   "color:blue;font-weight:bold;",
+    // );
+    // change dragSource to component
+    console.log({
+      dragSource: this.#dragSource,
+    });
+
+    this.emit("detach-tab", { type: "detach-tab", gridId, tabsId, value });
+  }
+
+  drop = ({
+    tabsId,
+    dropPosition,
+  }: Pick<DragContextDropEvent, "tabsId" | "dropPosition">) => {
+    console.log(
+      `[DragContextNext] drop at #${tabsId} ${dropPosition?.position} ${dropPosition?.target}`,
+    );
+    this.#dropped = true;
+    if (this.#dragSource) {
+      this.emit("drop", {
+        type: "drop",
+        dragSource: this.#dragSource,
+        tabsId,
+        dropPosition,
+      });
+    } else {
+      throw Error("[DragContextNext] drop, dragSource not defined");
+    }
+  };
+
+  registerTabsForDragDrop = (id: string) => {
+    console.log(`[DragContextNext] registerDragSource #${id}`);
+    this.#dragSources.set(id, { dropTargets: ["*"] });
+    const dragSourceElement = document.getElementById(id);
+    if (dragSourceElement) {
+      initializeDragContainer(dragSourceElement, this);
+    } else {
+      throw Error(
+        `[DragDropProviderNext] registerDragSource no element found for #${id}`,
+      );
+    }
+  };
+
+  get draggedElement() {
+    const element = this.#element;
+    if (element) {
+      return element;
+    } else {
+      throw Error(
+        `dragged element is being accessed, but drag is not in effect, of beginDrag was not called`,
+      );
+    }
+  }
+
+  get dragElementWidth() {
+    return this.#dragElementWidth ?? 100;
+  }
+
+  get dragSource() {
+    return this.#dragSource;
+  }
+
+  get internalDragSources() {
+    return this.#dragSources;
+  }
+
+  set dragSources(dragSources: DragSources) {
+    this.buildDragSources(dragSources);
+  }
+
+  // get dragState() {
+  //   if (
+  //     this.#dragSource &&
+  //     this.#height !== undefined &&
+  //     this.#width !== undefined
+  //   ) {
+  //     return {
+  //       element: this.#dragSource?.element,
+  //       height: this.#height,
+  //       sourceId: this.#dragSource.id,
+  //       width: this.#width,
+  //     };
+  //   }
+  // }
+
+  set dropHandler(dropHandler: DropHandler) {
+    if (this.#dropHandler === defaultDropHandler) {
+      console.log("[DragContextNext] set dropHandler");
+    } else {
+      console.log(
+        "[DragContextNext] set dropHandler - WARNING overwriting existing value",
+      );
+    }
+    this.#dropHandler = dropHandler;
+  }
+
+  get dropped() {
+    return this.#dropped;
+  }
+
+  get x() {
+    return this.#mouseX;
+  }
+  set x(value: number) {
+    this.#mouseX = value;
+  }
+
+  get y() {
+    return this.#mouseY;
+  }
+  set y(value: number) {
+    this.#mouseY = value;
+  }
+
+  private buildDragSources(dragSources: DragSources) {
+    const sources = this.#dragSources;
+    for (const [
+      sourceId,
+      { dropTargets, orientation = "horizontal" },
+    ] of Object.entries(dragSources)) {
+      sources.set(sourceId, { dropTargets, orientation });
+    }
+  }
+}
diff --git a/vuu-ui/packages/grid-layout/src/drag-drop-next/DragDropProviderNext.css b/vuu-ui/packages/grid-layout/src/drag-drop-next/DragDropProviderNext.css
new file mode 100644
index 000000000..976163b81
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/drag-drop-next/DragDropProviderNext.css
@@ -0,0 +1,65 @@
+.vuuDragContainer {
+    --orientation-transition-property: width;
+    --transition-property: var(--orientation-transition-property);
+
+    align-items: stretch;
+    background: white !important; /* TODO */
+    row-gap: 0;
+
+    &.vuuDragContainer-dragging {
+        .saltTabNextTrigger {
+            /* only when drag in progress */
+            pointer-events: none;
+        }
+    
+    }
+
+    &.vuuDragContainer-vertical {
+        --orientation-transition-property:height;
+
+        .SpaceMan {
+            height: 0;
+            width: auto;
+        }
+    
+    }
+
+    /* Only if no existing scrollbars */
+    &:has(.vuuDraggableItem-settling){
+        overflow:visible;
+    }
+
+    .vuuDraggableItem:not([aria-selected="true"]) {
+        background: inherit;
+    }
+
+    .vuuDraggableItem-hidden {
+        position: absolute;
+        z-index: -1;
+    }
+
+    .vuuDraggableItem-settling {
+        position: absolute;
+        z-index: 1;
+    }
+
+    .vuuDraggableItem-animating {
+        transition: transform .2s ease-in-out;
+    }
+
+    .SpaceMan {
+        align-self: stretch;
+        background-color: #d9d9d9;
+        flex: 0 0 auto;
+        min-height: 100%;
+        transition-property: var(--transition-property);
+        transition-duration: .1s;
+        transition-timing-function: ease-in;
+        width:0;
+    }
+
+    &.saltTabListNext {
+        gap: 0;
+    }
+
+}
\ No newline at end of file
diff --git a/vuu-ui/packages/grid-layout/src/drag-drop-next/DragDropProviderNext.tsx b/vuu-ui/packages/grid-layout/src/drag-drop-next/DragDropProviderNext.tsx
new file mode 100644
index 000000000..a0b0eecf8
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/drag-drop-next/DragDropProviderNext.tsx
@@ -0,0 +1,89 @@
+import { createContext, ReactNode, useContext, useEffect } from "react";
+// import { initializeDragContainer } from "./drag-drop-listeners";
+import {
+  DragContext,
+  DragContextDetachTabHandler,
+  DragContextDropHandler,
+  type DragSources,
+} from "./DragContextNext";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+
+import dragDropProviderCss from "./DragDropProviderNext.css";
+import { useGridLayoutId } from "../GridLayoutContext";
+
+export type DragDropRegistrationFn = (id: string) => void;
+export type DragDropBeginDrag = (
+  id: string,
+  draggedElement: HTMLElement,
+) => void;
+export type DragDropEndDrag = (id: string) => void;
+
+export type DragSourceRegistrationHandler = (id: string) => void;
+
+const DragDropContext = createContext<DragContext>(new DragContext());
+
+export interface DragDropNextProviderProps {
+  children: ReactNode;
+  dragSources: DragSources;
+  onDetachTab: DragContextDetachTabHandler;
+  onDrop: DragContextDropHandler;
+}
+
+export type MeasuredTarget = {
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+};
+
+export const DragDropProviderNext = ({
+  children,
+  onDetachTab,
+  onDrop,
+}: DragDropNextProviderProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-drag-drop-provider",
+    css: dragDropProviderCss,
+    window: targetWindow,
+  });
+
+  const dragContext = useDragContext();
+
+  const layoutId = useGridLayoutId();
+
+  useEffect(() => {
+    dragContext.on("detach-tab", onDetachTab);
+    dragContext.on("drop", onDrop);
+
+    const cleanupCallbacks: Array<() => void> = [];
+    console.log(
+      `[DragDropProviderNext#${layoutId}] useEffect dragSources [${[...dragContext.internalDragSources.keys()]}]`,
+    );
+    // TODO this is for declarative drag drop sources, not supported for now
+    // dragContext.internalDragSources.forEach(({ orientation }, id) => {
+    //   const el = document.getElementById(id);
+    //   if (el) {
+    //     cleanupCallbacks.push(
+    //       initializeDragContainer(el, dragContext, orientation),
+    //     );
+    //   } else {
+    //     throw Error(
+    //       `[DragDropProviderNext] useEffect no element found for dragSource #${id}`,
+    //     );
+    //   }
+    // });
+    return () => cleanupCallbacks.forEach((cleanup) => cleanup());
+  }, [dragContext, layoutId, onDetachTab, onDrop]);
+
+  return (
+    <DragDropContext.Provider value={dragContext}>
+      {children}
+    </DragDropContext.Provider>
+  );
+};
+
+export const useDragContext = () => {
+  return useContext(DragDropContext);
+};
diff --git a/vuu-ui/packages/grid-layout/src/drag-drop-next/SpaceMan.tsx b/vuu-ui/packages/grid-layout/src/drag-drop-next/SpaceMan.tsx
new file mode 100644
index 000000000..9113f966e
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/drag-drop-next/SpaceMan.tsx
@@ -0,0 +1,382 @@
+import { RefCallback } from "react";
+import { asInteger, isValidNumber, orientationType } from "@finos/vuu-utils";
+import { DragContext, DropPosition } from "./DragContextNext";
+
+export type State = "initial" | "away" | "1spacer" | "2spacer";
+
+type Direction = "fwd" | "bwd";
+
+export class SpaceMan {
+  #dragContext: DragContext;
+  #dragItem: HTMLElement | undefined;
+  #dragContainer: HTMLElement | null = null;
+  #dragSize = 0;
+  #dragOperation: "local" | "remote" | "none" = "none";
+  #fromIndex: string | number | undefined;
+  #mouseOffset: { x: number; y: number } = { x: 0, y: 0 };
+  #orientation: orientationType;
+  #sizeProperty: "height" | "width";
+  #spacer1 = this.createDragSpacer();
+  #spacer2 = this.createDragSpacer();
+  // TODO do we still need this state
+  #state: State = "initial";
+  #toDirection: Direction | undefined;
+  #toIndex: string | number | undefined = undefined;
+  #withinDragContainer = false;
+
+  constructor(
+    dragContext: DragContext,
+    public id: string,
+    orientation: orientationType = "horizontal",
+  ) {
+    this.#dragContext = dragContext;
+    this.#orientation = orientation;
+    this.#sizeProperty = orientation === "horizontal" ? "width" : "height";
+  }
+
+  get mouseOffset() {
+    return this.#mouseOffset;
+  }
+  set mouseOffset(offset: { x: number; y: number }) {
+    this.#mouseOffset = offset;
+  }
+
+  get dropPosition(): DropPosition | undefined {
+    // console.log("[SpaceMan] get dropPosition");
+    const dropTargetSpacer = this.#dragContainer?.querySelector(
+      '[data-drop-target="true"]',
+    );
+    if (dropTargetSpacer) {
+      let siblingElement = dropTargetSpacer.nextElementSibling as HTMLElement;
+      if (siblingElement) {
+        return {
+          position: "before",
+          target: siblingElement.dataset.label ?? siblingElement.id,
+        };
+      }
+
+      siblingElement = dropTargetSpacer.previousElementSibling as HTMLElement;
+      if (siblingElement) {
+        return {
+          position: "after",
+          target: siblingElement.dataset.label ?? siblingElement.id,
+        };
+      }
+
+      throw Error(
+        `[[SpaceMan] (getter) dropPosition] no dropTarget with data-drop-target attribute found`,
+      );
+    }
+  }
+
+  get positionRelativeToTargetTab(): "before" | "after" {
+    return "before";
+  }
+
+  setDragContainer: RefCallback<HTMLElement> = (el: HTMLElement | null) => {
+    this.#dragContainer = el;
+  };
+
+  enterDragContainer() {
+    console.log(`%cEnterDragContainer`, "color:red;font-weight:bold;");
+    this.#withinDragContainer = true;
+
+    // create spacers
+  }
+
+  leaveDragContainer() {
+    console.log(`%cLeaveDragContainer`, "color:red;font-weight:bold;");
+    // TODO we need to undo this at end of drag operation
+    this.freezeContainer();
+    this.#withinDragContainer = false;
+    this.#state = "away";
+    this.setSpacerSizes(0, 0);
+    //TODO is the timeout just to allow the spacer rezuse to animate ?
+    // seems to work without it
+    setTimeout(() => {
+      // TODO deal with situation where item re-enters before this happens
+      this.clearSpacers();
+    }, 200);
+  }
+
+  dragStart(index: number | string) {
+    console.log(
+      "%c[SpaceMan] dragStart",
+      "background: yellow;font-weight:bold",
+    );
+    const item = this.#dragContainer?.querySelector(
+      `[data-index="${index}"]`,
+    ) as HTMLElement;
+    if (item) {
+      this.#dragContainer?.classList.add("vuuDragContainer-dragging");
+      const propertyName = this.#sizeProperty;
+      const { [propertyName]: size } = item.getBoundingClientRect();
+      this.#dragSize = size;
+      this.#dragOperation = "local";
+      this.#withinDragContainer = true;
+      setTimeout(() => {
+        item.classList.add("vuuDraggableItem-hidden");
+
+        this.#spacer1.style[propertyName] = `${size}px`;
+        item?.before(this.#spacer1);
+        this.#dragItem = item;
+        if (!this.#withinDragContainer) {
+          // Item has been dragged straight out of container
+          // Delay this slightly more than RequestAnimationFrame. Avoids
+          // skipping animation completely where user drags item very quickly
+          // out of container.
+          this.setSpacerSizes(0, 0, 30);
+        }
+      }, 60);
+      this.#state = "1spacer";
+      this.#fromIndex = index;
+    } else {
+      throw Error(`[SpaceMan] spaceOut no item at index[${index}]`);
+    }
+  }
+
+  dragEnter(index: number, direction: Direction) {
+    console.log(
+      `[SpaceMan] dragEnter index ${index} direction ${direction} state ${this.#state}`,
+    );
+    const propertyName = this.#sizeProperty;
+    if (index === this.#toIndex && direction === this.#toDirection) {
+      console.log(
+        `[SpaceMan] dragEnter, return early: no change to toIndex, direction`,
+      );
+      return;
+    }
+    // we need to use ID rather than index, index is only meaningful
+    // within a tabs/list drag operation
+    if (this.#withinDragContainer === false) {
+      this.#toIndex =
+        // we will not have #fromIndex if dragged item is from another container
+        index > asInteger(this.#fromIndex, Number.MAX_SAFE_INTEGER)
+          ? index - 1
+          : index;
+      this.enterDragContainer();
+      console.log(`insert first spacer dragOperation ${this.#dragOperation}`);
+      this.insertSpacer(index, this.#dragContext.dragElementWidth);
+
+      if (this.#dragOperation === "none") {
+        this.#dragOperation = "remote";
+      }
+    } else {
+      this.#toIndex = index;
+      this.#toDirection = direction;
+
+      const item = this.#dragContainer?.querySelector(
+        `[data-index="${index}"]`,
+      );
+      if (item) {
+        if (this.#dragOperation === "none") {
+          this.#dragOperation = "remote";
+          console.log(
+            `
+            Does this ever happen any more ? 
+            second first spacer dragOperation ${this.#dragOperation} direction ${direction}`,
+          );
+          this.insertSpacer(index, 100);
+        } else {
+          if (direction === "fwd") {
+            if (this.#state === "1spacer") {
+              item.after(this.#spacer2);
+              this.#state = "2spacer";
+              this.setSpacerSizes(0, this.#dragSize);
+            } else if (this.#state === "2spacer") {
+              if (this.#spacer1.style[propertyName] === "0px") {
+                item.after(this.#spacer1);
+                this.setSpacerSizes(this.#dragSize, 0);
+              } else {
+                item.after(this.#spacer2);
+                this.setSpacerSizes(0, this.#dragSize);
+              }
+            }
+          } else {
+            if (this.#state === "1spacer") {
+              item.before(this.#spacer2);
+              this.#state = "2spacer";
+              this.setSpacerSizes(0, this.#dragSize);
+            } else if (this.#state === "2spacer") {
+              if (this.#spacer1.style[propertyName] === "0px") {
+                item.before(this.#spacer1);
+                this.setSpacerSizes(this.#dragSize, 0);
+              } else {
+                item.before(this.#spacer2);
+                this.setSpacerSizes(0, this.#dragSize);
+              }
+            }
+          }
+        }
+      } else {
+        throw Error(`[SpaceMan] dragEnter no item at index[${index}]`);
+      }
+    }
+  }
+
+  insertSpacer(index: number | string, size: number) {
+    if (this.#state === "initial" || this.#state === "away") {
+      const item = this.#dragContainer?.querySelector(
+        `[data-index="${index}"]`,
+      );
+      if (item) {
+        this.#dragSize = size;
+        item?.before(this.#spacer1);
+        this.#state = "1spacer";
+        this.setSpacerSizes(size);
+      } else {
+        throw Error(`[SpaceMan] inject no item at index[${index}]`);
+      }
+    } else {
+      throw Error(
+        `can only inject drag content when state is "initial" or "away", found "${this.#state}"`,
+      );
+    }
+  }
+
+  private freezeContainer() {
+    if (this.#dragContainer) {
+      const { width } = this.#dragContainer.getBoundingClientRect();
+      this.#dragContainer.style.width = `${width}px`;
+    }
+  }
+  private unfreezeContainer() {
+    if (this.#dragContainer) {
+      this.#dragContainer.style.width = "";
+    }
+  }
+
+  private clearSpacers() {
+    const propertyName = this.#sizeProperty;
+    this.#spacer1.remove();
+    this.#spacer2.remove();
+    this.#spacer1.style[propertyName] = "0px";
+    this.#spacer2.style[propertyName] = "0px";
+  }
+
+  cleanup() {
+    console.log(`[SpaceMan#${this.id}] cleanup`);
+    this.clearSpacers();
+
+    if (this.#dragItem) {
+      this.#dragItem.classList.remove("vuuDraggableItem-settling");
+      this.#dragItem.classList.remove("vuuDraggableItem-animating");
+      this.#dragItem.style.left = "";
+      this.#dragItem.style.top = "";
+      this.#dragItem.style.width = "";
+      this.#dragItem = undefined;
+    }
+  }
+
+  drop(x: number, y: number): Promise<void> {
+    // TODO dragItem should be passed in
+    // console.log(`[SpaceMan#${this.id}] drop, returns a promise`, {
+    //   dragItem: this.#dragItem,
+    // });
+    return new Promise((resolve) => {
+      if (this.#dragItem) {
+        const dragItem = this.#dragItem;
+
+        const settleComplete = () => {
+          dragItem.removeEventListener("transitionend", settleComplete);
+          this.cleanup();
+          this.unfreezeContainer();
+          resolve();
+        };
+
+        dragItem?.classList.replace(
+          "vuuDraggableItem-hidden",
+          "vuuDraggableItem-settling",
+        );
+
+        const { left: containerLeft, top: containerTop } =
+          this.getPositionOfDragContainer();
+        const { left, top, width } = this.getPositionOfDropTarget();
+        if (this.#orientation === "vertical") {
+          dragItem.style.width = `${width}px`;
+        }
+        dragItem.style.left = `${left - containerLeft}px`;
+        dragItem.style.top = `${top - containerTop}px`;
+
+        const offsetLeft = x - this.#mouseOffset.x - left - 1;
+        const offsetTop = y - this.#mouseOffset.y - top - 1;
+
+        dragItem.style.transform = `translate(${offsetLeft}px, ${offsetTop}px)`;
+
+        this.#dragContainer?.classList.remove("vuuDragContainer-dragging");
+
+        requestAnimationFrame(() => {
+          dragItem?.classList.add("vuuDraggableItem-animating");
+          dragItem.addEventListener("transitionend", settleComplete);
+          dragItem.style.transform = `translate(${0}px, ${0}px)`;
+        });
+      } else {
+        // remote drag
+        this.cleanup();
+        resolve();
+      }
+    });
+  }
+
+  dragEnd() {
+    //TODO only if not dropped
+    this.#dragContainer?.classList.remove("vuuDragContainer-dragging");
+    // we need to do a bit more than this
+    // this.#dragItem?.classList.remove("vuuDraggableItem-hidden");
+    // this.#dragItem = undefined;
+  }
+
+  private getPositionOfDragContainer() {
+    if (this.#dragContainer) {
+      const { left, top } = this.#dragContainer.getBoundingClientRect();
+      return { left, top };
+    } else {
+      throw Error("[SpaceMan] getPositionOfDragContainer, no drag container");
+    }
+  }
+
+  private getPositionOfDropTarget(index = 0): {
+    left: number;
+    top: number;
+    width: number;
+  } {
+    const spacer = index === 0 ? this.#spacer1 : this.#spacer2;
+    const {
+      [this.#sizeProperty]: size,
+      left,
+      top,
+      width,
+    } = spacer.getBoundingClientRect();
+    if (size === 0) {
+      if (index === 0) {
+        return this.getPositionOfDropTarget(1);
+      } else {
+        throw Error("no spacer with expected width");
+      }
+    } else {
+      return { left, top, width };
+    }
+  }
+
+  private setSpacerSizes(size1: number, size2?: number, timeout = 0) {
+    const propertyName = this.#sizeProperty;
+    setTimeout(() => {
+      if (this.#spacer1.parentNode === null) {
+        // do nothing
+      } else {
+        this.#spacer1.style[propertyName] = `${size1}px`;
+        this.#spacer1.dataset.dropTarget = size1 > 0 ? "true" : "false";
+        if (isValidNumber(size2)) {
+          this.#spacer2.style[propertyName] = `${size2}px`;
+          this.#spacer2.dataset.dropTarget = size2 > 0 ? "true" : "false";
+        }
+      }
+    }, timeout);
+  }
+
+  private createDragSpacer() {
+    const spacer = document.createElement("div");
+    spacer.className = "SpaceMan";
+    return spacer;
+  }
+}
diff --git a/vuu-ui/packages/grid-layout/src/drag-drop-next/drag-drop-listeners.ts b/vuu-ui/packages/grid-layout/src/drag-drop-next/drag-drop-listeners.ts
new file mode 100644
index 000000000..cfed560f6
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/drag-drop-next/drag-drop-listeners.ts
@@ -0,0 +1,241 @@
+import { orientationType, queryClosest } from "@finos/vuu-utils";
+import { DragContext } from "./DragContextNext";
+import { SpaceMan } from "./SpaceMan";
+import { sourceIsTabbedComponent } from "../GridLayoutContext";
+import { getClosestGridLayout } from "../grid-dom-utils";
+
+const isDraggable = (
+  target: EventTarget | HTMLElement | null,
+): target is HTMLElement => {
+  const el = target as HTMLElement;
+  return el !== null && queryClosest(el, '[draggable="true"]') !== null;
+};
+
+const getDraggableEl = (target: EventTarget | HTMLElement | null) => {
+  const el = target as HTMLElement;
+  if (isDraggable(target)) {
+    if (el?.classList.contains("vuuDraggableItem")) {
+      return el;
+    } else {
+      return queryClosest(el, ".vuuDraggableItem");
+    }
+  } else {
+    return null;
+  }
+};
+
+const isRemoteContainer = (
+  sourceElement: HTMLElement,
+  targetElement: HTMLElement,
+) => {
+  return sourceElement.parentElement !== targetElement?.parentElement;
+};
+
+const getDataIndex = (el: HTMLElement | null) =>
+  el ? parseInt(el.dataset.index ?? "-1") : -1;
+
+const getDataLabel = (el: HTMLElement | null) => el?.dataset.label ?? "";
+
+export function initializeDragContainer(
+  containerEl: HTMLElement,
+  dragContext: DragContext,
+  orientation: orientationType = "horizontal",
+) {
+  const gridId = getClosestGridLayout(containerEl);
+  const dragId = containerEl.id;
+  const spaceMan = new SpaceMan(dragContext, dragId, orientation);
+  spaceMan.setDragContainer(containerEl);
+
+  const focusDroppedTab = (tabsId: string, tabLabel: string) => {
+    requestAnimationFrame(() => {
+      const droppedTab = document
+        .getElementById(tabsId)
+        ?.querySelector(
+          `[data-label="${tabLabel}"] .saltTabNextTrigger`,
+        ) as HTMLButtonElement;
+      droppedTab?.focus();
+    });
+  };
+
+  const onDragStart = (e: DragEvent) => {
+    const element = getDraggableEl(e.target);
+    console.log(`[drag-drop-listeners#${gridId}] onDragStart`);
+    if (element) {
+      const tabsContainer = queryClosest(e.target, ".vuuDragContainer", true);
+      const gridLayout = queryClosest(tabsContainer, ".vuuGridLayout", true);
+      const gridLayoutItem = queryClosest(
+        tabsContainer,
+        ".vuuGridLayoutItem",
+        true,
+      );
+      const tabIndex = getDataIndex(element);
+      const label = getDataLabel(element);
+      const isSelectedTab =
+        element.querySelector('[aria-selected="true"]') !== null;
+
+      const { gridLayoutItemId } = element.dataset;
+      e.stopPropagation();
+      dragContext.beginDrag(e, {
+        element,
+        label,
+        isSelectedTab,
+        layoutId: gridLayout.id,
+        tab: { id: gridLayoutItemId ?? "", label },
+        tabIndex,
+        tabsId: gridLayoutItem.id,
+        type: "tabbed-component",
+      });
+
+      requestAnimationFrame(() => {
+        console.log(`[drag-drop-listeners#${gridId}]] onDragStart<RAF>`);
+        spaceMan.dragStart(tabIndex);
+        dragContext.detachTab(gridId, gridLayoutItem.id, label);
+      });
+    }
+  };
+
+  const onDragEnter = (e: DragEvent) => {
+    // we should really mark drop targets
+    const dropTarget = getDraggableEl(e.target);
+    console.log(`[drag-drop-listeners#${dragId}] onDragEnter`);
+    // We always revent default here, that way useAsDropItem will know that another drag handler
+    // is responsible for this area
+    e.preventDefault();
+    const { dragSource, x, y } = dragContext;
+    if (dropTarget) {
+      console.log(
+        `[drag-drop-listeners#${dragId}] onDragEnter ${dropTarget.className} preventDefault`,
+      );
+      const indexOfDropTarget = getDataIndex(dropTarget);
+      if (sourceIsTabbedComponent(dragSource)) {
+        if (
+          indexOfDropTarget !== -1 &&
+          (indexOfDropTarget !== dragSource?.tabIndex ||
+            isRemoteContainer(dragSource.element, dropTarget))
+        ) {
+          const direction =
+            orientation === "horizontal"
+              ? e.clientX > x
+                ? "fwd"
+                : "bwd"
+              : e.clientY > y
+                ? "fwd"
+                : "bwd";
+
+          spaceMan.dragEnter(indexOfDropTarget, direction);
+        }
+      } else {
+        console.log(`draging a componnet over a tabstrip`);
+
+        const direction =
+          orientation === "horizontal"
+            ? e.clientX > x
+              ? "fwd"
+              : "bwd"
+            : e.clientY > y
+              ? "fwd"
+              : "bwd";
+
+        spaceMan.dragEnter(indexOfDropTarget, direction);
+      }
+    }
+    dragContext.x = e.clientX;
+    dragContext.y = e.clientY;
+  };
+
+  const onDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
+  const onDragLeave = (e: DragEvent) => {
+    console.log(
+      `[drag-drop-listeners#${dragId}] onDragleave ${spaceMan.id}.${dragId}`,
+    );
+    // Have we dragged the draggable item right out of the parent drag container
+    const container = queryClosest(e.relatedTarget, `#${spaceMan.id}`);
+    if (container === null) {
+      spaceMan.leaveDragContainer();
+    }
+  };
+
+  const onDrop = async (e: DragEvent) => {
+    if (e.defaultPrevented) {
+      console.log(
+        `[drag-drop-listeners#${dragId}] onDrop ${dragId} - already handled`,
+      );
+      spaceMan.cleanup();
+    } else {
+      const { clientX, clientY } = e;
+      e.stopPropagation();
+
+      // important we capture this before calling spaceMan.drop
+      const { dropPosition } = spaceMan;
+
+      console.log(
+        `[drag-drop-listeners] onDrop #${dragId}  ${dropPosition?.position} targetTabId ${dropPosition?.target}`,
+      );
+      if (dropPosition) {
+        await spaceMan.drop(clientX, clientY);
+        dragContext.drop({
+          tabsId: dragId,
+          dropPosition,
+        });
+
+        if (dragContext.dragSource) {
+          focusDroppedTab(dragId, dragContext.dragSource.label);
+        }
+      } else {
+        console.log(`[drag-drop-listeners] onDrop, drop is elsewhere `);
+        spaceMan.cleanup();
+      }
+    }
+  };
+  const onDragEnd = () => {
+    // console.log(`[drag-drop-listeners#${dragId}] onDragEnd`, {
+    //   dragSource: dragContext.dragSource,
+    // });
+    if (
+      sourceIsTabbedComponent(dragContext.dragSource) &&
+      dragContext.dragSource.tabsId === dragId
+    ) {
+      console.log(`[drag-drop-listeners#${dragId}] do we need to cleanup`);
+    }
+    if (!dragContext.dropped) {
+      spaceMan.dragEnd();
+    }
+  };
+
+  const onMouseDown = ({ clientX, clientY, target }: MouseEvent) => {
+    // TODO we will need to get the actual draggable, before measuring
+    const draggable = getDraggableEl(target);
+    if (draggable) {
+      const { left, top } = draggable.getBoundingClientRect();
+      spaceMan.mouseOffset = {
+        x: clientX - left,
+        y: clientY - top,
+      };
+    }
+  };
+
+  console.log(`[drag-drop-listeners#${gridId}] register listeners`);
+  containerEl?.addEventListener("mousedown", onMouseDown);
+  containerEl?.addEventListener("dragstart", onDragStart);
+  containerEl?.addEventListener("dragenter", onDragEnter);
+  containerEl?.addEventListener("dragleave", onDragLeave);
+  containerEl?.addEventListener("dragover", onDragOver);
+  document.body.addEventListener("drop", onDrop);
+  document.body.addEventListener("dragend", onDragEnd);
+
+  function cleanUp() {
+    console.log(`[drag-drop-listeners#${gridId}] unregister listeners`);
+    containerEl?.removeEventListener("mousedown", onMouseDown);
+    containerEl?.removeEventListener("dragstart", onDragStart);
+    containerEl?.removeEventListener("dragenter", onDragEnter);
+    containerEl?.removeEventListener("dragleave", onDragLeave);
+    containerEl?.removeEventListener("dragover", onDragOver);
+    document.body.removeEventListener("drop", onDrop);
+    document.body.removeEventListener("dragend", onDragEnd);
+  }
+
+  return cleanUp;
+}
diff --git a/vuu-ui/packages/grid-layout/src/grid-dom-utils.ts b/vuu-ui/packages/grid-layout/src/grid-dom-utils.ts
new file mode 100644
index 000000000..90fae1aa5
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/grid-dom-utils.ts
@@ -0,0 +1,102 @@
+import { queryClosest } from "@finos/vuu-utils";
+import {
+  GridLayoutModelPosition,
+  GridLayoutResizeDirection,
+} from "./GridLayoutModel";
+import { GridModelChildItem } from "./GridModel";
+
+export const classNameLayoutItem = "vuuGridLayoutItem";
+
+export type ResizeOrientation = "horizontal" | "vertical";
+
+// TODO cobvert these to GridLayoutPosition
+type GridPos = [number, number];
+
+export const isSplitter = (element: HTMLElement) =>
+  element.classList.contains("vuuGridSplitter");
+
+export const getGridLayoutItem = (el: HTMLElement) => {
+  if (el.classList.contains(classNameLayoutItem)) {
+    return el;
+  } else {
+    return el.closest(`.${classNameLayoutItem}`) as HTMLElement;
+  }
+};
+
+const NO_POSITION: GridPos = [-1, -1];
+
+export const getColumn = (el: HTMLElement): GridPos => {
+  const value = getComputedStyle(el)
+    .getPropertyValue("grid-column")
+    .split("/")
+    .map((value) => parseInt(value, 10));
+  if (value.length === 2) {
+    return value as GridPos;
+  } else if (value.length === 1) {
+    return [value[0], value[0]];
+  } else {
+    return NO_POSITION;
+  }
+};
+
+export const getRow = (el: HTMLElement | undefined): GridPos => {
+  if (el === undefined) {
+    throw Error("getRow invoked with null element");
+  }
+  const value = getComputedStyle(el)
+    .getPropertyValue("grid-row")
+    .split("/")
+    .map((value) => parseInt(value, 10));
+  if (value.length === 2) {
+    return value as GridPos;
+  } else if (value.length === 1) {
+    return [value[0], value[0]];
+  } else {
+    return NO_POSITION;
+  }
+};
+
+export const getRowIndex = (el: HTMLElement) => {
+  const [from] = getRow(el);
+  return from - 1;
+};
+
+export const setGridColumn = (
+  target: string | HTMLElement,
+  { start, end }: GridLayoutModelPosition,
+) => {
+  const el =
+    typeof target === "string"
+      ? (document.getElementById(target) as HTMLElement)
+      : target;
+  el?.style.setProperty("grid-column", `${start}/${end}`);
+};
+
+export const setGridRow = (
+  target: string | HTMLElement,
+  { start, end }: GridLayoutModelPosition,
+) => {
+  const el =
+    typeof target === "string"
+      ? (document.getElementById(target) as HTMLElement)
+      : target;
+  el?.style.setProperty("grid-row", `${start}/${end}`);
+};
+
+export const spansMultipleTracks = (
+  gridItem: GridModelChildItem,
+  direction: GridLayoutResizeDirection,
+) => {
+  const track = direction === "horizontal" ? "column" : "row";
+  const { start, end } = gridItem[track];
+  return end - start > 1;
+};
+
+export function getClosestGridLayout(source: string): string;
+export function getClosestGridLayout(source: HTMLElement): string;
+export function getClosestGridLayout(source: string | HTMLElement) {
+  const el =
+    typeof source === "string" ? document.getElementById(source) : source;
+  const gridLayout = queryClosest(el, ".vuuGridLayout", true);
+  return gridLayout.id;
+}
diff --git a/vuu-ui/packages/grid-layout/src/grid-layout-utils.ts b/vuu-ui/packages/grid-layout/src/grid-layout-utils.ts
new file mode 100644
index 000000000..23b0fa8bb
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/grid-layout-utils.ts
@@ -0,0 +1,463 @@
+import {
+  GridLayoutDropPosition,
+  GridLayoutSplitDirection,
+} from "@finos/vuu-utils";
+import {
+  GridLayoutModelPosition,
+  GridLayoutResizeDirection,
+} from "./GridLayoutModel";
+import {
+  GridLayoutChildItemDescriptor,
+  GridLayoutModelCoordinates,
+  GridModelChildItem,
+  GridModelCoordinates,
+  ISplitter,
+  TrackType,
+} from "./GridModel";
+
+/**
+ * Given an array of track sizes, split the value at the indicated
+ * index position by inserting a new value.  If the new value has
+ * a non zero size, reduce the original value by same amount, so
+ * combined size remains the same.
+ * @param tracks ,
+ * @param trackIndex
+ * @param size
+ */
+const insertTrack = (tracks: number[], trackIndex: number, size = 0) => {
+  if (tracks[trackIndex] < size) {
+    throw Error(
+      `insertTrack target track ${tracks[trackIndex]} is not large enough to accommodate new track ${size}`,
+    );
+  }
+  return tracks.reduce<number[]>((list, track, i) => {
+    if (i === trackIndex) {
+      list.push(size);
+      track -= size;
+    }
+    list.push(track);
+    return list;
+  }, []);
+};
+
+export const splitTrack = (tracks: number[], trackIndex: number) => {
+  const sizeOfNewTrack = Math.floor(tracks[trackIndex] / 2);
+  return insertTrack(tracks, trackIndex, sizeOfNewTrack);
+};
+
+export type ContrasAndSiblings = {
+  contras: GridModelChildItem[];
+  position: GridLayoutModelPosition;
+  siblings: GridModelChildItem[];
+};
+
+/**
+ * Siblings are gridLayoutItem(s) starting on same trackEdge as
+ * gridItem. Contras are gridLayoutItems ending on same trackEdge
+ * as gridItem.
+ * We are measuring here for a horizontal splitter,siblings are
+ * gridItems to the immediate right of gridItem, contras are
+ * gridItems ending in the row immediately above gridItem.
+ * @param gridLayoutItem
+ * @param siblings 0 or more siblings
+ * @param contras 1 or more contras
+ * @returns
+ */
+export const getMatchingColspan = (
+  targetGridItem: GridModelChildItem,
+  siblings: GridModelChildItem[],
+  contras: GridModelChildItem[],
+): ContrasAndSiblings | undefined => {
+  const { column } = targetGridItem;
+  const startCol = column.start;
+
+  let siblingIndex = 0;
+  let contraIndex = 0;
+
+  const contrasOut: GridModelChildItem[] = [];
+  const siblingsOut: GridModelChildItem[] = [targetGridItem];
+
+  const targetAndSiblings = [targetGridItem].concat(siblings);
+
+  while (
+    siblingIndex < targetAndSiblings.length &&
+    contraIndex < contras.length
+  ) {
+    // gridItem may span multiple columns, and may have no siblings
+    const sibling = targetAndSiblings[siblingIndex];
+    const contra = contras[contraIndex];
+    const end = Math.max(contra.column.end, sibling.column.end);
+
+    if (contra.column.end === end && sibling.column.end === end) {
+      contrasOut.push(contras[contraIndex]);
+      return {
+        contras: contrasOut,
+        position: { start: startCol, end },
+        siblings: siblingsOut,
+      };
+    } else if (contra.column.end < end) {
+      contrasOut.push(contras[contraIndex]);
+      contraIndex += 1;
+    } else {
+      siblingsOut.push(siblings[siblingIndex]);
+      siblingIndex += 1;
+    }
+  }
+};
+
+/**
+ * Siblings are gridLayoutItem(s) starting on same trackEdge as
+ * gridItem. Contras are gridLayoutItems ending on same trackEdge
+ * as gridItem.
+ * We are measuring here for a vertical splitter,siblings are
+ * gridItems immediately below gridItem, contras are
+ * gridItems ending in the col immediately left of gridItem.
+ * @param gridLayoutItem
+ * @param siblings 0 or more siblings
+ * @param contras 1 or more contras
+ * @returns
+ */
+export const getMatchingRowspan = (
+  gridItem: GridModelChildItem,
+  siblings: GridModelChildItem[],
+  contras: GridModelChildItem[],
+): ContrasAndSiblings | undefined => {
+  const { row } = gridItem;
+  const startRow = row.start;
+
+  let siblingIndex = 0;
+  let contraIndex = 0;
+
+  const contrasOut: GridModelChildItem[] = [];
+  const siblingsOut: GridModelChildItem[] = [gridItem];
+
+  const targetAndSiblings = [gridItem].concat(siblings);
+
+  while (
+    siblingIndex < targetAndSiblings.length &&
+    contraIndex < contras.length
+  ) {
+    // gridItem may span multiple rows, and may have no siblings
+    const sibling = targetAndSiblings[siblingIndex];
+    const contra = contras[contraIndex];
+    const end = Math.max(contra.row.end, sibling.row.end);
+
+    if (contra.row.end === end && sibling.row.end === end) {
+      contrasOut.push(contras[contraIndex]);
+      return {
+        contras: contrasOut,
+        position: { start: startRow, end: end },
+        siblings: siblingsOut,
+      };
+    } else if (contra.row.end < end) {
+      contrasOut.push(contras[contraIndex]);
+      contraIndex += 1;
+    } else {
+      siblingsOut.push(siblings[siblingIndex]);
+      siblingIndex += 1;
+    }
+  }
+};
+
+/**
+ * Resize requires new track if the splitter being used for resize is on the same
+ * trackEdge as another splitter
+ *
+ * @param splitters
+ * @param splitter
+ * @returns
+ */
+export const doesResizeRequireNewTrack = (
+  splitters: ISplitter[],
+  splitter: ISplitter,
+) => {
+  const potentialCandidates = splitters.filter(
+    ({ id, orientation }) =>
+      orientation === splitter.orientation && id !== splitter.id,
+  );
+
+  if (potentialCandidates.length > 0) {
+    const track = splitter.orientation === "horizontal" ? "column" : "row";
+    const {
+      [track]: { start: splitterStart },
+    } = splitter;
+    return potentialCandidates.some(
+      ({ [track]: { start } }) => start === splitterStart,
+    );
+  }
+  return false;
+};
+
+/**
+ *
+ * @param moveBy positive or negative number
+ * @param adjustmentAmount positive number, never greater than abs(moveBy)
+ * @returns
+ */
+export const adjustDistance = (moveBy: number, adjustmentAmount: number) => {
+  if (moveBy < 0) {
+    return moveBy + adjustmentAmount;
+  } else {
+    return moveBy - adjustmentAmount;
+  }
+};
+
+export const byColumnStart = (
+  item1: GridModelChildItem,
+  item2: GridModelChildItem,
+) => {
+  return item1.column.start - item2.column.start;
+};
+
+export const byRowStart = (
+  item1: GridModelChildItem,
+  item2: GridModelChildItem,
+) => {
+  return item1.row.start - item2.row.start;
+};
+
+export const gridResizeDirectionFromDropPosition = (
+  dropPosition: GridLayoutDropPosition,
+): GridLayoutResizeDirection =>
+  dropPosition === "north" || dropPosition === "south"
+    ? "vertical"
+    : "horizontal";
+
+const gridLayoutPositionComparator = (
+  p1: GridLayoutModelPosition,
+  p2: GridLayoutModelPosition,
+) => {
+  if (p1.start < p2.start) {
+    return -1;
+  } else if (p1.start > p2.start) {
+    return 1;
+  } else if (p1.end < p2.end) {
+    return -1;
+  } else if (p1.end > p2.end) {
+    return 1;
+  }
+  return 0;
+};
+export const byColumnPosition = (
+  { column: pos1 }: GridModelChildItem,
+  { column: pos2 }: GridModelChildItem,
+) => gridLayoutPositionComparator(pos1, pos2);
+
+export const byRowPosition = (
+  { row: pos1 }: GridModelChildItem,
+  { row: pos2 }: GridModelChildItem,
+) => gridLayoutPositionComparator(pos1, pos2);
+
+export const itemsFillColumn = (
+  items: GridModelChildItem[],
+  pos: GridLayoutModelPosition,
+) => {
+  const sortedItems = items.sort(byColumnPosition);
+  const firstItem = sortedItems.at(0);
+  const lastItem = sortedItems.at(-1);
+  if (firstItem && lastItem) {
+    const {
+      column: { start },
+    } = firstItem;
+    const {
+      column: { end },
+    } = lastItem;
+    if (start === pos.start && end === pos.end) {
+      for (let i = 1; i < sortedItems.length; i++) {
+        const prevItem = sortedItems[i - 1];
+        const currentItem = sortedItems[i];
+        if (prevItem.column.end !== currentItem.column.start) {
+          return false;
+        }
+      }
+      return true;
+    }
+  }
+  return false;
+};
+export const itemsFillRow = (
+  items: GridModelChildItem[],
+  row: GridLayoutModelPosition,
+) => {
+  const sortedItems = items.sort(byRowPosition);
+  const firstItem = sortedItems.at(0);
+  const lastItem = sortedItems.at(-1);
+  if (firstItem && lastItem) {
+    const {
+      row: { start },
+    } = firstItem;
+    const {
+      row: { end },
+    } = lastItem;
+    if (start === row.start && end === row.end) {
+      for (let i = 1; i < sortedItems.length; i++) {
+        const prevItem = sortedItems[i - 1];
+        const currentItem = sortedItems[i];
+        if (prevItem.row.end !== currentItem.row.start) {
+          return false;
+        }
+      }
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * This assumes that tracks have already been prepared, such that 'position'
+ * spans at least two tracks in the split direction
+ *
+ * @param position
+ * @param splitDirection
+ * @returns [droppedItemPosition, targetPosition]
+ */
+export const splitGridChildPosition = (
+  {
+    column: { start: colStart, end: colEnd },
+    row: { start: rowStart, end: rowEnd },
+  }: GridLayoutModelCoordinates,
+  splitDirection: GridLayoutSplitDirection,
+  splitTrackIndex: number,
+): [GridLayoutModelCoordinates, GridLayoutModelCoordinates] => {
+  const droppedPosition = {
+    column: { start: colStart, end: colEnd },
+    row: { start: rowStart, end: rowEnd },
+  };
+  const targetPosition = {
+    column: { start: colStart, end: colEnd },
+    row: { start: rowStart, end: rowEnd },
+  };
+
+  console.log(`split at ${splitTrackIndex}`);
+
+  switch (splitDirection) {
+    case "north":
+      return [
+        {
+          ...droppedPosition,
+          row: {
+            start: rowStart,
+            end: splitTrackIndex,
+          },
+        },
+        {
+          ...targetPosition,
+          row: {
+            start: splitTrackIndex,
+            end: rowEnd,
+          },
+        },
+      ];
+    case "east":
+      return [
+        {
+          ...droppedPosition,
+          column: {
+            start: splitTrackIndex,
+            end: colEnd,
+          },
+        },
+        {
+          ...targetPosition,
+          column: {
+            start: colStart,
+            end: splitTrackIndex,
+          },
+        },
+      ];
+    case "south":
+      return [
+        {
+          ...droppedPosition,
+          row: {
+            start: splitTrackIndex,
+            end: rowEnd,
+          },
+        },
+        {
+          ...targetPosition,
+          row: {
+            start: rowStart,
+            end: splitTrackIndex,
+          },
+        },
+      ];
+    case "west":
+      return [
+        {
+          ...droppedPosition,
+          column: {
+            start: colStart,
+            end: splitTrackIndex,
+          },
+        },
+        {
+          ...targetPosition,
+          column: {
+            start: splitTrackIndex,
+            end: colEnd,
+          },
+        },
+      ];
+  }
+};
+
+export const isFixedHeightChildItem = (item: GridModelChildItem) =>
+  item.resizeable === false || item.resizeable === "h";
+export const isFixedWidthChildItem = (item: GridModelChildItem) =>
+  item.resizeable === false || item.resizeable === "v";
+
+export const getGridArea = ({ column, row }: GridLayoutModelCoordinates) =>
+  `${row.start}/${column.start}/${row.end}/${column.end}`;
+
+export const getActiveIndex = (childItems: GridModelChildItem[]) => {
+  const index = childItems.findIndex((item) => item.contentVisible);
+  if (childItems.length === 0) {
+    return -1;
+  } else if (index === -1) {
+    return 0;
+  } else {
+    return index;
+  }
+};
+
+export const getSharedGridPosition = (
+  childItems: GridModelChildItem[],
+): GridLayoutModelCoordinates => {
+  const [{ column, row }, ...rest] = childItems;
+  if (rest.length > 0) {
+    if (
+      rest.some(
+        ({ column: c, row: r }) =>
+          c.start !== column.start ||
+          c.end !== column.end ||
+          r.start !== row.start ||
+          r.end !== row.end,
+      )
+    ) {
+      throw Error(
+        "grid-layout-utils] getSharedGridPosition not all child grid items hae same GridLayoutModelCoordinates",
+      );
+    }
+  }
+  return { column, row };
+};
+
+export const getGridPosition = (
+  gridArea: GridLayoutChildItemDescriptor["gridArea"],
+): GridModelCoordinates => {
+  if (typeof gridArea === "string") {
+    const [rowStart, colStart, rowEnd, colEnd] = gridArea
+      .split("/")
+      .map((val) => parseInt(val, 10));
+    return {
+      column: { start: colStart, end: colEnd },
+      row: { start: rowStart, end: rowEnd },
+    };
+  } else {
+    throw Error(`[grid-layout-utils] getGridPosition gridArea  must be valid`);
+  }
+};
+
+export const getTrackType = (splitter: ISplitter): TrackType =>
+  splitter.orientation === "vertical" ? "row" : "column";
diff --git a/vuu-ui/packages/grid-layout/src/grid-matrix.ts b/vuu-ui/packages/grid-layout/src/grid-matrix.ts
new file mode 100644
index 000000000..05a42a643
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/grid-matrix.ts
@@ -0,0 +1,104 @@
+import { uuid } from "@finos/vuu-utils";
+import { GridModelChildItem } from "./GridModel";
+
+export type GridMatrix = number[][];
+
+function addGridItemToGrid(
+  grid: GridMatrix,
+  {
+    column: { start: colStart, end: colEnd },
+    row: { start: rowStart, end: rowEnd },
+  }: GridModelChildItem,
+) {
+  for (let row = rowStart - 1; row < rowEnd - 1; row++) {
+    for (let col = colStart - 1; col < colEnd - 1; col++) {
+      grid[row][col] += 1;
+    }
+  }
+}
+
+const fillGridMatrix = (grid: GridMatrix, gridItems: GridModelChildItem[]) => {
+  for (const gridItem of gridItems) {
+    addGridItemToGrid(grid, gridItem);
+  }
+};
+
+export const getGridMatrix = (
+  gridItems: GridModelChildItem[],
+  rowCount: number,
+  colCount: number,
+): GridMatrix => {
+  const grid = new Array(rowCount);
+  for (let i = 0; i < grid.length; i++) {
+    grid[i] = new Array(colCount).fill(0);
+  }
+  fillGridMatrix(grid, gridItems);
+  return grid;
+};
+
+export const printGrid = (grid: number[][]) => {
+  for (let i = 0; i < grid.length; i++) {
+    const cols = grid[i];
+    console.log(` row ${i + 1} [${cols.join(", ")}]`);
+  }
+};
+
+const cloneGridMatrix = (grid: GridMatrix) => grid.map((row) => row.slice());
+
+function rowCellsAllEmpty(fromIndex: number, toIndex: number, row?: number[]) {
+  if (row) {
+    for (let i = fromIndex; i < toIndex; i++) {
+      if (row[i] !== 0) {
+        return false;
+      }
+    }
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function markCellsAsFilled(fromIndex: number, toIndex: number, row: number[]) {
+  for (let i = fromIndex; i < toIndex; i++) {
+    row[i] = 1;
+  }
+}
+
+export function getEmptyExtents(grid: GridMatrix) {
+  const emptyExtents: GridModelChildItem[] = [];
+  const rows = cloneGridMatrix(grid);
+  for (let i = 0; i < rows.length; i++) {
+    const cols = rows[i];
+    for (let j = 0; j < cols.length; j++) {
+      if (cols[j] === 0) {
+        cols[j] = 1;
+        let nextRow = i + 1;
+        let nextCol = j + 1;
+        // span as many columns as we find empty cells horizontally
+        while (cols[nextCol] === 0) {
+          cols[nextCol] = 1;
+          nextCol += 1;
+        }
+        // span multiple rows as well as columns, but only
+        // if we can span the same number of columns
+        // found above.
+        while (rowCellsAllEmpty(j, nextCol, rows[nextRow])) {
+          markCellsAsFilled(j, nextCol, rows[nextRow]);
+          nextRow += 1;
+        }
+
+        emptyExtents.push(
+          new GridModelChildItem({
+            column: { start: j + 1, end: nextCol + 1 },
+            id: uuid(),
+            resizeable: "hv",
+            row: { start: i + 1, end: nextRow + 1 },
+            type: "placeholder",
+          }),
+        );
+      }
+    }
+  }
+
+  return emptyExtents;
+}
diff --git a/vuu-ui/packages/grid-layout/src/index.ts b/vuu-ui/packages/grid-layout/src/index.ts
new file mode 100644
index 000000000..d1a214b30
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/index.ts
@@ -0,0 +1,24 @@
+export { GridLayout } from "./GridLayout";
+export { GridLayoutItem } from "./GridLayoutItem";
+export {
+  GridLayoutProvider,
+  type SerializedGridLayout,
+} from "./GridLayoutProvider";
+export type {
+  GridLayoutChangeHandler,
+  GridLayoutDescriptor,
+  TrackSize,
+} from "./GridModel";
+export { layoutFromJson } from "./layoutFromJson";
+export {
+  type DragSource,
+  useGridLayoutDispatch,
+  useGridModel,
+  useGridLayoutDragStartHandler,
+} from "./GridLayoutContext";
+export { useDraggable } from "./useDraggable";
+export { DragDropProviderNext } from "./drag-drop-next/DragDropProviderNext";
+export type {
+  DragSources,
+  DropHandler,
+} from "./drag-drop-next/DragContextNext";
diff --git a/vuu-ui/packages/grid-layout/src/layoutFromJson.ts b/vuu-ui/packages/grid-layout/src/layoutFromJson.ts
new file mode 100644
index 000000000..a403f8bb1
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/layoutFromJson.ts
@@ -0,0 +1,37 @@
+import { getLayoutComponent, uuid } from "@finos/vuu-utils";
+import React, { ReactElement } from "react";
+import { LayoutJSON } from "./componentToJson";
+
+export function layoutFromJson(
+  { active, id = uuid(), type, children, props, state }: LayoutJSON,
+  path: string,
+): ReactElement {
+  const componentType = type.match(/^[a-z]/) ? type : getLayoutComponent(type);
+
+  if (componentType === undefined) {
+    throw Error(
+      `layoutUtils unable to create component from JSON, unknown type ${type}`,
+    );
+  }
+
+  if (state) {
+    console.log(`devide how we deal with state`, {
+      state,
+    });
+    //   setPersistentState(id, state);
+  }
+
+  return React.createElement(
+    componentType,
+    {
+      active,
+      id,
+      ...props,
+      key: id,
+      path,
+    },
+    children
+      ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`))
+      : undefined,
+  );
+}
diff --git a/vuu-ui/packages/grid-layout/src/layoutToJson.ts b/vuu-ui/packages/grid-layout/src/layoutToJson.ts
new file mode 100644
index 000000000..a2533976f
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/layoutToJson.ts
@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { componentToJson } from "./componentToJson";
+
+export function layoutToJSON(component: ReactElement) {
+  return componentToJson(component);
+}
diff --git a/vuu-ui/packages/grid-layout/src/propUtils.ts b/vuu-ui/packages/grid-layout/src/propUtils.ts
new file mode 100644
index 000000000..b18b3df61
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/propUtils.ts
@@ -0,0 +1,29 @@
+import { ReactElement } from "react";
+import { LayoutModel } from "@finos/vuu-utils";
+
+const NO_PROPS = {};
+export const getProp = (
+  component: LayoutModel | undefined,
+  propName: string
+) => {
+  const props = getProps(component);
+  return props[propName] ?? props[`data-${propName}`];
+};
+
+export const getProps = (component?: LayoutModel) =>
+  component?.props || component || NO_PROPS;
+
+export const getChildProp = (container: LayoutModel) => {
+  const props = getProps(container);
+  if (props.children) {
+    const {
+      children: [target, ...rest],
+    } = props;
+    if (rest.length > 0) {
+      console.warn(
+        `getChild expected a single child, found ${rest.length + 1}`
+      );
+    }
+    return target as ReactElement;
+  }
+};
diff --git a/vuu-ui/packages/grid-layout/src/react-element-utils.ts b/vuu-ui/packages/grid-layout/src/react-element-utils.ts
new file mode 100644
index 000000000..e80ffe44c
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/react-element-utils.ts
@@ -0,0 +1,47 @@
+import React, { ReactElement } from "react";
+
+export const getGridItemChild = (
+  gridItems: ReactElement[],
+  gridItemId: string,
+): ReactElement => {
+  const targetGridItem = gridItems.find(
+    (gridItem) => gridItem.props.id === gridItemId,
+  );
+  if (targetGridItem) {
+    return targetGridItem;
+  } else {
+    throw Error(`getGridItemChild #${gridItemId} not found`);
+  }
+};
+
+export const getGridItemComponent = (
+  gridItems: ReactElement[],
+  gridItemId: string,
+): ReactElement => {
+  const targetGridItem = getGridItemChild(gridItems, gridItemId);
+  const childComponent = targetGridItem.props.children;
+  if (React.isValidElement(childComponent)) {
+    return childComponent;
+  } else if (Array.isArray(childComponent)) {
+    return childComponent.at(0) as ReactElement;
+  } else {
+    throw Error(`invalid child component`);
+  }
+};
+
+export const addChildToStackedGridItem = (
+  stackElement: ReactElement,
+  childElement: ReactElement,
+) => {
+  if (Array.isArray(stackElement.props.children)) {
+    console.log(`children is an array`);
+  }
+
+  const stackChildren = stackElement.props.children;
+  // can we add an imperative API method to Stack ?
+  return React.cloneElement(
+    stackElement,
+    { active: stackChildren.length } as any,
+    stackChildren.concat(childElement),
+  );
+};
diff --git a/vuu-ui/packages/grid-layout/src/typeOf.ts b/vuu-ui/packages/grid-layout/src/typeOf.ts
new file mode 100644
index 000000000..3ff90e13f
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/typeOf.ts
@@ -0,0 +1,30 @@
+import { LayoutModel, WithType } from "@finos/vuu-utils";
+import { ReactElement } from "react";
+import { LayoutJSON } from "./componentToJson";
+
+export function typeOf(element?: LayoutModel | WithType): string | undefined {
+  if (element) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const type = element.type as any;
+    if (typeof type === "function" || typeof type === "object") {
+      const elementName = type.displayName || type.name || type.type?.name;
+      if (typeof elementName === "string") {
+        return elementName;
+      }
+    }
+    if (typeof element.type === "string") {
+      return element.type;
+    }
+    if (element.constructor) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (element.constructor as any).displayName as string;
+    }
+    throw Error(`typeOf unable to determine type of element`);
+  }
+}
+
+export const isTypeOf = (element: ReactElement, type: string) =>
+  typeOf(element) === type;
+
+export const isLayoutJSON = (layout: LayoutJSON): layout is LayoutJSON =>
+  layout !== undefined && "type" in layout;
diff --git a/vuu-ui/packages/grid-layout/src/useAsDropTarget.ts b/vuu-ui/packages/grid-layout/src/useAsDropTarget.ts
new file mode 100644
index 000000000..4dbdb1e60
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/useAsDropTarget.ts
@@ -0,0 +1,293 @@
+import {
+  getPositionWithinBox,
+  type GridLayoutDropPosition,
+  pointPositionWithinRect,
+  queryClosest,
+  type rect,
+} from "@finos/vuu-utils";
+import { DragEventHandler, useCallback, useRef } from "react";
+import { useGridLayoutDropHandler, useGridLayoutId } from "./GridLayoutContext";
+import { useDragContext } from "./drag-drop-next/DragDropProviderNext";
+
+const DROPTARGET_CLASSNAME = "vuuDropTarget";
+const GRIDITEM_QUERY = ".vuuGridLayoutItem";
+const DROPTARGET_QUERY = "[data-drop-target]";
+
+const removeDropTargetPositionClassName = (el: HTMLElement) => {
+  el.classList.forEach((className) => {
+    if (className.match(/(north|east|south|west|centre|tabs|header)$/)) {
+      el.classList.remove(className);
+    }
+  });
+};
+
+const addDropTargetPositionClassName = (
+  el: HTMLElement,
+  position: GridLayoutDropPosition,
+) => {
+  removeDropTargetPositionClassName(el);
+  el.classList.add(`${DROPTARGET_CLASSNAME}-${position}`);
+};
+
+interface MousePosition {
+  clientX: number;
+  clientY: number;
+}
+
+/**
+ * Describes a drop target. Will always reference a GrtidLayoutItem, but these may include more than
+ * one dropTarget e.g. the header and the content area will each be drop targets and help determine
+ * the drop position.
+ */
+type DropTarget = {
+  /**
+   * identifies the GridLayoutItem associated with the dropTarget
+   */
+  gridLayoutItemId: string;
+  /**
+   * The element with data-drop-target attribute
+   */
+  target: HTMLElement;
+  /**
+   * Drop behaviour will differ depending on whether we are dragging over the header or main content body.
+   * A remote target is located elsewhere in the dom from the current drag location, e.g the tabPanel
+   * associated with a Tab.
+   */
+  type: "header" | "content" | "remote";
+};
+
+/**
+ * The dropTarget is usually the element with data-drop-target attribute. It can
+ * store an IDREF to another element.
+ */
+const getDropTarget = (
+  target: EventTarget,
+  currentDropTarget: DropTarget | undefined,
+): DropTarget | undefined => {
+  let dropTargetEl = queryClosest(target, DROPTARGET_QUERY);
+  if (dropTargetEl) {
+    const { id: gridLayoutItemId } = queryClosest(
+      dropTargetEl,
+      GRIDITEM_QUERY,
+      true,
+    );
+
+    if (dropTargetEl === currentDropTarget?.target) {
+      return currentDropTarget;
+    } else {
+      const { dropTarget: dropTargetValue } = dropTargetEl.dataset;
+      switch (dropTargetValue) {
+        case "true":
+          return {
+            gridLayoutItemId,
+            target: dropTargetEl,
+            type: "content",
+          };
+        case "header":
+          return {
+            gridLayoutItemId,
+            target: dropTargetEl,
+            type: "header",
+          };
+        case undefined:
+          throw Error(
+            "[useAsDropTarget] getDropTarget, called on element without data-drop-target attribute",
+          );
+        default: {
+          dropTargetEl = document.getElementById(
+            dropTargetValue,
+          ) as HTMLElement;
+          if (dropTargetEl) {
+            return {
+              gridLayoutItemId,
+              target: dropTargetEl,
+              type: "remote",
+            };
+          } else {
+            throw Error(
+              `[useAsDropTarget] getDropTarget, data-drop-target ${dropTargetValue} not found`,
+            );
+          }
+        }
+      }
+    }
+  }
+};
+
+type DropTargetState = {
+  mousePos: MousePosition;
+  position: GridLayoutDropPosition | undefined;
+  rect: rect;
+  dropTarget: DropTarget | undefined;
+};
+
+const NullRect: rect = {
+  bottom: -1,
+  left: -1,
+  right: -1,
+  top: -1,
+};
+
+const NULL_STATE: DropTargetState = {
+  mousePos: { clientX: -1, clientY: -1 },
+  position: undefined,
+  rect: NullRect,
+  dropTarget: undefined,
+};
+
+export const useAsDropTarget = () => {
+  const dropTargetStateRef = useRef<DropTargetState>(NULL_STATE);
+
+  const drop = useGridLayoutDropHandler();
+  const dragContext = useDragContext();
+  const layoutId = useGridLayoutId();
+
+  const onDragEnter = useCallback<DragEventHandler>(
+    (evt) => {
+      const { dropTarget: currentDropTarget } = dropTargetStateRef.current;
+      let dropTarget = getDropTarget(evt.target, currentDropTarget);
+      console.log(
+        `[useAsDropTarget#${layoutId}] onDragEnter ${dropTarget?.gridLayoutItemId}, evt already handled ${evt.defaultPrevented}`,
+      );
+
+      if (evt.defaultPrevented) {
+        // We are entering Tabs, this is handled by drag-drop-listeners
+        dropTarget = undefined;
+      }
+
+      if (dropTarget !== currentDropTarget) {
+        if (dropTarget) {
+          // console.log(
+          //   `%c[useAsDropTarget] onDragEnter set current dropTarget = ${dropTarget.gridLayoutItemId}`,
+          //   "color:green;font-weight:bold;",
+          // );
+
+          dropTargetStateRef.current.dropTarget = dropTarget;
+          const { rect } = dropTargetStateRef.current;
+          const { bottom, left, right, top } =
+            dropTarget.target.getBoundingClientRect();
+          rect.bottom = bottom;
+          rect.left = left;
+          rect.right = right;
+          rect.top = top;
+        } else if (currentDropTarget) {
+          dropTargetStateRef.current.dropTarget = undefined;
+          // console.log(
+          //   `%c[useAsDropTarget] clear droptarget ${currentDropTarget?.gridLayoutItemId}`,
+          //   "color:brown;font-weight: bold;",
+          // );
+          removeDropTargetPositionClassName(currentDropTarget?.target);
+        }
+      }
+    },
+    [layoutId],
+  );
+
+  // We could replace this with mouse move to reduce event rate
+  const onDragOver = useCallback<DragEventHandler>((evt) => {
+    const { dropTarget: currentDropTarget } = dropTargetStateRef.current;
+    const dropTarget = getDropTarget(evt.target, currentDropTarget);
+    if (dropTarget) {
+      // preventDefault on the event to enable drop
+      evt.preventDefault();
+      // TODO store dropTarget and rect and tabRect in same ref
+      if (dropTarget === currentDropTarget) {
+        const { position: lastPosition } = dropTargetStateRef.current;
+        if (dropTarget.type === "header") {
+          if (lastPosition !== "header") {
+            addDropTargetPositionClassName(dropTarget.target, "header");
+            dropTargetStateRef.current.position = "header";
+          }
+        } else {
+          const { clientX, clientY } = evt;
+          const { mousePos } = dropTargetStateRef.current;
+
+          if (clientX !== mousePos.clientX || clientY !== mousePos.clientY) {
+            mousePos.clientX = clientX;
+            mousePos.clientY = clientY;
+
+            const { rect } = dropTargetStateRef.current;
+
+            const { pctX, pctY /*, closeToTheEdge */ } =
+              pointPositionWithinRect(clientX, clientY, rect);
+            const position = getPositionWithinBox(
+              clientX,
+              clientY,
+              rect,
+              pctX,
+              pctY,
+            );
+            // console.log(
+            //   `[useAsDropTarget] onDragOver ${dropTarget.gridLayoutItemId} position ${position}`,
+            // );
+            if (position !== lastPosition) {
+              if (dropTargetStateRef.current.dropTarget) {
+                addDropTargetPositionClassName(dropTarget.target, position);
+              }
+              dropTargetStateRef.current.position = position;
+            }
+          }
+        }
+      }
+    }
+  }, []);
+
+  const onDragLeave = useCallback<DragEventHandler>((evt) => {
+    const { dropTarget: currentDropTarget } = dropTargetStateRef.current;
+    const dropTarget = getDropTarget(evt.target, currentDropTarget);
+    // console.log(
+    //   `[useAsDropTarget] onDragleave ${evt.target?.className} to ${evt.relatedTarget?.className}`,
+    //   {
+    //     dropTarget,
+    //   },
+    // );
+    if (dropTarget?.target === evt.target) {
+      if (dropTarget === currentDropTarget) {
+        console.log(
+          `[useAsDropTarget] onDragleave ... leaving the current dropTarget, dropTarget is now undefined`,
+        );
+        dropTargetStateRef.current.dropTarget = undefined;
+        dropTargetStateRef.current.position = undefined;
+      }
+
+      removeDropTargetPositionClassName(dropTarget.target);
+    }
+  }, []);
+
+  const onDrop = useCallback<DragEventHandler>(
+    (evt) => {
+      const { dropTarget: currentDropTarget } = dropTargetStateRef.current;
+      const { dragSource } = dragContext;
+      if (dragSource && currentDropTarget) {
+        // console.log(`[useAsDropTarget#${layoutId}] onDrop`, { dragSource });
+
+        const dropTarget = getDropTarget(evt.target, currentDropTarget);
+        if (dropTarget && dropTargetStateRef.current.position) {
+          // this prevents drag-drop-listeners drop firing when tab dragged to another tabstrip
+          evt.preventDefault();
+          removeDropTargetPositionClassName(dropTarget.target);
+          drop(
+            dropTarget.gridLayoutItemId,
+            dragSource,
+            dropTargetStateRef.current.position,
+          );
+        }
+      } else if (currentDropTarget) {
+        throw Error(
+          `[useAsDropTarget] onDrop no dragSource to drop on ${currentDropTarget.gridLayoutItemId}`,
+        );
+      }
+
+      dropTargetStateRef.current.dropTarget = undefined;
+      dropTargetStateRef.current.position = undefined;
+    },
+    [dragContext, drop],
+  );
+
+  return {
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+  };
+};
diff --git a/vuu-ui/packages/grid-layout/src/useDraggable.ts b/vuu-ui/packages/grid-layout/src/useDraggable.ts
new file mode 100644
index 000000000..c98f2e609
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/useDraggable.ts
@@ -0,0 +1,77 @@
+import { DragEvent, DragEventHandler, useCallback } from "react";
+import { GridLayoutDragEndHandler } from "./GridLayoutProvider";
+import { useDragContext } from "./drag-drop-next/DragDropProviderNext";
+import {
+  DragSourceProvider,
+  sourceIsComponent,
+  sourceIsTemplate,
+  useGridLayoutId,
+} from "./GridLayoutContext";
+import { LayoutJSON } from "./componentToJson";
+
+export type DragStartIdOptions = {
+  id: string;
+  type: "text/plain";
+};
+export type DragStartJsonOptions = {
+  payload: LayoutJSON;
+  type: "text/json";
+};
+
+export type GridLayoutDragStartHandler = (
+  evt: DragEvent<HTMLElement>,
+  dragStartOptions: DragStartIdOptions | DragStartJsonOptions,
+) => void;
+
+export interface DraggableHookProps {
+  draggableClassName?: string;
+  getDragSource: DragSourceProvider;
+  onDragEnd?: GridLayoutDragEndHandler;
+  onDragStart?: GridLayoutDragStartHandler;
+}
+
+export const useDraggable = ({
+  getDragSource,
+  onDragEnd,
+  onDragStart,
+}: DraggableHookProps) => {
+  const dragContext = useDragContext();
+  const layoutId = useGridLayoutId();
+
+  const handleDragStart = useCallback<DragEventHandler<HTMLElement>>(
+    (e) => {
+      const dragSource = getDragSource(e);
+      e.stopPropagation();
+      // Note we're not currently using the dataTransfer object. We use the dragSource
+      // We will need to change this if we want to support cross window drag drop
+      if (sourceIsTemplate(dragSource)) {
+        console.log(`[useDraggable#${layoutId}] drag template`);
+        onDragStart?.(e, {
+          payload: JSON.parse(dragSource.componentJson),
+          type: "text/json",
+        });
+      } else if (sourceIsComponent(dragSource)) {
+        console.log(`[useDraggable#${layoutId}] drag component`);
+        onDragStart?.(e, { id: dragSource.id, type: "text/plain" });
+      } else {
+        throw Error("didnt expect this");
+      }
+
+      dragContext.beginDrag(e.nativeEvent, dragSource);
+    },
+    [dragContext, getDragSource, layoutId, onDragStart],
+  );
+
+  const handleDragEnd = useCallback<DragEventHandler<HTMLElement>>(
+    (e) => {
+      (e.target as HTMLElement).classList.remove("dragging");
+      onDragEnd?.(e);
+    },
+    [onDragEnd],
+  );
+
+  return {
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+  };
+};
diff --git a/vuu-ui/packages/grid-layout/src/useGridChildProps.ts b/vuu-ui/packages/grid-layout/src/useGridChildProps.ts
new file mode 100644
index 000000000..88e0ee4af
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/useGridChildProps.ts
@@ -0,0 +1,57 @@
+import { useContext } from "react";
+import { GridModelChildItem, GridModelChildItemProps } from "./GridModel";
+import { GridLayoutContext } from "./GridLayoutContext";
+import { getGridPosition } from "./grid-layout-utils";
+
+export const useGridChildProps = ({
+  contentVisible,
+  dropTarget,
+  header,
+  height,
+  id,
+  stackId,
+  resizeable,
+  style,
+  title,
+  type = "content",
+  width,
+  // TODO handle resizeable etc
+
+  // no need to store gridStyle separately, we already have it in childItem row, column
+}: GridModelChildItemProps) => {
+  const { gridModel } = useContext(GridLayoutContext);
+
+  let childItem = gridModel?.getChildItem(id);
+  if (childItem) {
+    console.log(`already registered child item ${id}`);
+  } else {
+    const { column, row } = getGridPosition(style.gridArea);
+    childItem = new GridModelChildItem({
+      contentVisible,
+      dropTarget,
+      header,
+      height,
+      id,
+      column,
+      fixed: false,
+      stackId,
+      resizeable,
+      row,
+      title,
+      type,
+      width,
+    });
+
+    gridModel?.addChildItem(childItem);
+  }
+
+  return {
+    contentDetached: childItem.contentDetached,
+    contentVisible: childItem.contentVisible,
+    dropTarget: childItem.dropTarget,
+    header: childItem.header,
+    stacked: childItem.stackId !== undefined,
+    title: childItem.title,
+    ...childItem.layoutStyle,
+  };
+};
diff --git a/vuu-ui/packages/grid-layout/src/useGridLayout.tsx b/vuu-ui/packages/grid-layout/src/useGridLayout.tsx
new file mode 100644
index 000000000..1330c0a51
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/useGridLayout.tsx
@@ -0,0 +1,764 @@
+import {
+  asReactElements,
+  isGridLayoutSplitDirection,
+  isSimpleStateValue,
+  queryClosest,
+  uuid,
+} from "@finos/vuu-utils";
+import {
+  ReactElement,
+  ReactNode,
+  RefCallback,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  DragContextDetachTabHandler,
+  DragContextDropHandler,
+} from "./drag-drop-next/DragContextNext";
+import { layoutFromJson } from "./layoutFromJson";
+import {
+  getClosestGridLayout,
+  setGridColumn,
+  setGridRow,
+} from "./grid-dom-utils";
+import {
+  getActiveIndex,
+  getGridArea,
+  getSharedGridPosition,
+} from "./grid-layout-utils";
+import {
+  GridLayoutDispatch,
+  GridLayoutDropHandler,
+  sourceIsComponent,
+  sourceIsTabbedComponent,
+  sourceIsTemplate,
+  useGridLayoutId,
+} from "./GridLayoutContext";
+import {
+  GridLayoutItem,
+  GridLayoutItemProps,
+  isGridLayoutItem,
+} from "./GridLayoutItem";
+import { GridItemRemoveReason, GridLayoutModel } from "./GridLayoutModel";
+import {
+  GridLayoutDragEndHandler,
+  useGridChangeHandler,
+  useGridLayoutOptions,
+  useSavedGrid,
+  ReactElementList,
+} from "./GridLayoutProvider";
+import { isGridLayoutStackedItem } from "./GridLayoutStackedtem";
+import {
+  GridChildPositionChangeHandler,
+  GridColumnsAndRows,
+  GridLayoutChangeHandler,
+  GridLayoutDescriptor,
+  GridModel,
+  GridModelChildItem,
+  GridTrackResizeHandler,
+  ISplitter,
+  isStackedItem,
+  NonContentResetOptions,
+  TabsChangeHandler,
+  TabSelectionChangeHandler,
+} from "./GridModel";
+import {
+  addChildToStackedGridItem,
+  getGridItemChild,
+} from "./react-element-utils";
+import { GridLayoutDragStartHandler } from "./useDraggable";
+import { LayoutJSON } from "./componentToJson";
+
+export type GridLayoutHookProps = {
+  children: ReactNode;
+  id: string;
+  colsAndRows?: GridColumnsAndRows;
+  onChange?: GridLayoutChangeHandler;
+};
+
+type GridLayoutItemElements = Array<ReactElement<GridLayoutItemProps>>;
+
+type NonContentGridItems = {
+  splitters: ISplitter[];
+  placeholders: GridModelChildItem[];
+  stackedItems: GridModelChildItem[];
+};
+
+const isLayoutItem = (element: ReactElement) =>
+  isGridLayoutItem(element) || isGridLayoutStackedItem(element);
+
+/**
+ * Create the GridModel and bind model changes to DOM changes.
+ * The GridModel is constructed from a GridLayoutDescriptor, which may
+ * have been passed explicitly or extracted from GridLayoutItems.
+ *
+ * Create the list of GridLayoutItem elements to be rendered.
+ * The GridLayoutItem elements may be explicitly coded in JSX.
+ */
+export const useGridLayout = ({
+  children: childrenProp,
+  id,
+  colsAndRows,
+  onChange,
+}: GridLayoutHookProps) => {
+  const containerRef = useRef<HTMLDivElement>();
+  const { onChangeChildElements, onChangeLayout } = useGridChangeHandler();
+  const layoutOptions = useGridLayoutOptions();
+
+  const layoutId = useGridLayoutId();
+  const getSavedGrid = useSavedGrid();
+
+  const [, forceRender] = useState({});
+
+  /**
+   * Construct the initial set of child elements and the GridLayoutDescriptor
+   * which will be used to create the GridModel. We also save in state a copy
+   * of the child elements as a map, keyed by id.
+   */
+  const [children, layout] = useMemo<
+    [ReactElementList, GridLayoutDescriptor]
+  >(() => {
+    const savedGrid = getSavedGrid?.(id);
+    if (savedGrid) {
+      const { components: savedChildren, layout: savedLayout } = savedGrid;
+      return [Object.values(savedChildren), savedLayout];
+    } else if (colsAndRows) {
+      const reactElements = asReactElements(childrenProp);
+      const layoutDescriptor = {
+        ...colsAndRows,
+      };
+
+      return [reactElements, layoutDescriptor];
+    } else {
+      throw Error(
+        `[useGridLayout] useMemo no saved grid details available and no layout provided. Either pass layout prop or provide layout using a GridLayoutProvider`,
+      );
+    }
+  }, [childrenProp, getSavedGrid, id, colsAndRows]);
+
+  const buildGridLayoutItems = useMemo<GridLayoutItemElements>(() => {
+    //TODO check that children conform to expected props
+    // if layout passed. construct GridLayoutItems
+    if (children.every(isLayoutItem)) {
+      // see 1) above
+      // store as map
+      return children;
+    } else {
+      throw Error(
+        `[useGridLayout] every child GridItem must be a GridLayoutItem`,
+      );
+      // need to jump through some hoops here
+      // return Object.entries(childElementMap).map(
+      //   ([gridLayoutItemId, element]) => {
+      //     // TODO type IS in here although the types shouldn't allow it
+      //     const { gridArea, type, ...gridLayoutItemProps } =
+      //       layout.gridLayoutItems[gridLayoutItemId];
+      //     return (
+      //       <GridLayoutItem
+      //         {...gridLayoutItemProps}
+      //         id={gridLayoutItemId}
+      //         style={{ gridArea }}
+      //         key={gridLayoutItemId}
+      //       >
+      //         {element}
+      //       </GridLayoutItem>
+      //     );
+      //   },
+      // );
+    }
+  }, [children]);
+
+  const childrenRef = useRef<GridLayoutItemElements>(buildGridLayoutItems);
+  console.log({ children: childrenRef.current });
+
+  const setChildren = useCallback(
+    (
+      newChildren:
+        | GridLayoutItemElements
+        | SetStateAction<GridLayoutItemElements>,
+    ) => {
+      if (isSimpleStateValue(newChildren)) {
+        childrenRef.current = newChildren;
+      } else {
+        const { current: prev } = childrenRef;
+        childrenRef.current = newChildren(prev);
+      }
+
+      onChangeChildElements?.(id, childrenRef.current);
+
+      forceRender({});
+    },
+    [id, onChangeChildElements],
+  );
+
+  const [nonContentGridItems, setNonContentGridItems] =
+    useState<NonContentGridItems>({
+      splitters: [],
+      placeholders: [],
+      stackedItems: [],
+    });
+
+  console.log(`[useGridLayout] render`, {
+    savedLayout: layout,
+    savedChildElements: children,
+  });
+
+  useMemo(() => {
+    console.log(
+      `[useGridLayout] savedLayout has changed ${JSON.stringify(layout, null, 2)}`,
+    );
+  }, [layout]);
+
+  const [gridModel, gridLayoutModel, containerCallback] = useMemo(
+    // TODO handling runtime change of cols, rows etc currently not supported
+    () => {
+      // console.log(
+      //   `%c[useGridLayout#${id}] useMemo create the GridModel`,
+      //   "color: green",
+      // );
+      const gridModel = new GridModel(id, layout);
+      const gridLayoutModel = new GridLayoutModel(gridModel);
+      const callbackRef: RefCallback<HTMLDivElement> = (el) => {
+        if (el) {
+          containerRef.current = el;
+        }
+      };
+
+      return [gridModel, gridLayoutModel, callbackRef];
+    },
+    [id, layout],
+  );
+
+  const saveGridLayout = useCallback<GridLayoutChangeHandler>(
+    (id, gridLayout) => {
+      onChange?.(id, gridLayout);
+      onChangeLayout?.(id, gridLayout);
+    },
+    [onChangeLayout, onChange],
+  );
+
+  const updateGridChildItems = useCallback<GridChildPositionChangeHandler>(
+    (updates, { placeholders, splitters } = NonContentResetOptions) => {
+      console.log(`[useGridLayout] updateGridChildItems`, {
+        updates,
+      });
+
+      updates.forEach(([id, { column: columnPosition, row: rowPosition }]) => {
+        if (columnPosition) {
+          setGridColumn(id, columnPosition);
+        }
+        if (rowPosition) {
+          setGridRow(id, rowPosition);
+        }
+      });
+
+      if (splitters) {
+        const splitters = gridLayoutModel.createSplitters();
+        setNonContentGridItems((items) => ({ ...items, splitters }));
+      }
+      if (placeholders) {
+        const placeholders = gridModel.getPlaceholders();
+        setNonContentGridItems((items) => ({ ...items, placeholders }));
+      }
+    },
+    [gridLayoutModel, gridModel],
+  );
+
+  const removeGridItem = useCallback(
+    (id: string, reason: Extract<GridItemRemoveReason, "close" | "drag">) => {
+      if (reason === "close") {
+        setChildren((c) => c.filter((c) => c.props.id !== id));
+      } else {
+        // set a className
+        const gridItemEl = document.getElementById(id);
+        if (gridItemEl) {
+          // this should be set in code that handles dragging, not code that handles close
+          gridItemEl.classList.add("vuuGridLayoutItem-dragging");
+          gridItemEl.style.gridColumn = "1/1";
+        }
+      }
+
+      gridLayoutModel.removeGridItem(id, reason);
+    },
+    [gridLayoutModel, setChildren],
+  );
+
+  const handleDragStart = useCallback<GridLayoutDragStartHandler>(
+    (evt, options) => {
+      console.log(`[useGridLayout] handleDragStart layoutId ${layoutId}`);
+
+      const { current: grid } = containerRef;
+      if (grid) {
+        requestAnimationFrame(() => {
+          grid.classList.add("vuuDragging");
+          //TODO make this check more explicit
+          if (options.type === "text/plain") {
+            removeGridItem(options.id, "drag");
+          }
+        });
+      }
+    },
+    [containerRef, layoutId, removeGridItem],
+  );
+
+  const handleDragEnd = useCallback<GridLayoutDragEndHandler>(() => {
+    const { current: grid } = containerRef;
+    console.log(`[useGridLayout] drag end layoutId ${layoutId}`);
+    if (grid) {
+      grid.classList.remove("vuuDragging");
+    }
+  }, [layoutId]);
+
+  const addChildComponent = useCallback(
+    (
+      component: JSX.Element,
+      { column, header, id, row, title, type }: GridModelChildItem,
+    ) => {
+      console.log(`[useGridLayout] addChildComponent #${id}`);
+
+      // TODO we want to store components internally in a map, as well as providing an
+      // array for rendering. The map will be used for persistence, to tie the component
+      // to layout props - Q do we need to, can't the layout props be derived from the
+      // GridLayoutItem ?
+
+      if (type === "stacked-content") {
+        const stackedGridItem = getGridItemChild(childrenRef.current, id);
+        const newChild = addChildToStackedGridItem(stackedGridItem, component);
+        setChildren((c) =>
+          c.map((child) => (child.props.id === id ? newChild : child)),
+        );
+      } else {
+        console.log(`[useGridLayout] header = ${header}`);
+        const newChild = (
+          <GridLayoutItem
+            data-drop-target
+            header={header}
+            id={id}
+            key={id}
+            resizeable="hv"
+            style={{
+              gridArea: getGridArea({ column, row }),
+            }}
+            title={title}
+          >
+            {component}
+          </GridLayoutItem>
+        );
+        setChildren((c) => c.concat(newChild));
+      }
+    },
+    [setChildren],
+  );
+
+  /**
+   * payload is either the id of an existing gridLayoutItem that we are dragging
+   * of a json description of a new component
+   */
+  const handleDrop = useCallback<GridLayoutDropHandler>(
+    (targetItemId, dragSource, position) => {
+      // console.log(`[useGridLayout#${id}] handleDrop`, {
+      //   targetItemId,
+      //   dragSource,
+      //   position,
+      // });
+
+      const targetGridItem = gridModel.getChildItem(targetItemId, true);
+
+      containerRef.current?.classList.remove("vuuDragging");
+
+      if (sourceIsComponent(dragSource)) {
+        const droppedItemId = gridModel.validateChildId(dragSource.id);
+        const targetId = isStackedItem(targetGridItem)
+          ? targetGridItem.stackId
+          : targetItemId;
+
+        const droppedGridItem = gridModel.getChildItem(droppedItemId, true);
+        droppedGridItem.dragging = false;
+
+        const gridItemElement = document.getElementById(droppedItemId);
+        gridItemElement?.classList.remove("vuuGridLayoutItem-dragging");
+
+        if (isGridLayoutSplitDirection(position)) {
+          gridLayoutModel.dropSplitGridItem(droppedItemId, targetId, position);
+
+          const placeholders = gridModel.getPlaceholders();
+          const splitters = gridLayoutModel.createSplitters();
+          setNonContentGridItems(({ stackedItems }) => ({
+            placeholders,
+            splitters,
+            stackedItems,
+          }));
+        } else if (position === "centre") {
+          const { column, row } = gridLayoutModel.dropReplaceGridItem(
+            droppedItemId,
+            targetItemId,
+          );
+          setGridColumn(droppedItemId, column);
+          setGridRow(droppedItemId, row);
+
+          setChildren((c) =>
+            c.filter((child) => child.props.id !== targetItemId),
+          );
+        } else if (position === "header") {
+          gridModel.stackChildItems(targetId, dragSource.id);
+          gridModel.notifyChange();
+        } else {
+          console.log(`[useGridLayout] how do we handle ${position}`);
+        }
+      } else if (sourceIsTabbedComponent(dragSource)) {
+        // We are dropping a component dragged from a tabstrip and dropping it into
+        // a regular grid position (i.e. not into another or same tabstrip)
+
+        const sourceGridItem = gridModel.getChildItem(dragSource.tab.id, true);
+
+        const targetId = isStackedItem(targetGridItem)
+          ? targetGridItem.stackId
+          : targetItemId;
+
+        sourceGridItem.stackId = undefined;
+        sourceGridItem.contentVisible = true;
+        sourceGridItem.contentDetached = undefined;
+
+        if (isGridLayoutSplitDirection(position)) {
+          gridLayoutModel.dropSplitGridItem(
+            dragSource.tab.id,
+            targetId,
+            position,
+          );
+
+          // Important that we defer removing the tab until after the drop
+          // handling. Removing the tab will remove the entire tabstrip if
+          // only one tab remains after removing the dragged tab.
+          const tabState = gridModel.getTabState(dragSource.tabsId);
+          tabState?.removeTab(sourceGridItem.id);
+
+          const placeholders = gridModel.getPlaceholders();
+          const splitters = gridLayoutModel.createSplitters();
+          setNonContentGridItems(({ stackedItems }) => ({
+            placeholders,
+            splitters,
+            stackedItems,
+          }));
+        }
+      } else if (sourceIsTemplate(dragSource)) {
+        // dragging from palette or similar
+        const { label = "New Item", ...restJSON } = JSON.parse(
+          dragSource.componentJson,
+        );
+
+        const newChildId = uuid();
+        const gridModelChildItem = new GridModelChildItem({
+          id: newChildId,
+          column: { start: 1, end: 1 },
+          dropTarget: true,
+          header: layoutOptions?.newChildItem.header,
+          resizeable: "hv",
+          row: { start: 1, end: 1 },
+          title: label,
+        });
+        gridModel.addChildItem(gridModelChildItem);
+
+        const component = layoutFromJson(restJSON as LayoutJSON, "");
+        if (position === "centre") {
+          const newGridItem = gridLayoutModel.dropReplaceGridItem(
+            gridModelChildItem.id,
+            targetItemId,
+          );
+          addChildComponent(component, newGridItem);
+        } else if (position === "header") {
+          gridModel.stackChildItems(targetItemId, newChildId);
+          addChildComponent(component, gridModelChildItem);
+          gridModel.notifyChange();
+        } else {
+          gridLayoutModel.dropSplitGridItem(
+            gridModelChildItem.id,
+            targetItemId,
+            position,
+          );
+          addChildComponent(component, gridModelChildItem);
+          gridModel.notifyChange();
+        }
+      } else {
+        throw Error("wtf");
+      }
+    },
+    [
+      addChildComponent,
+      gridLayoutModel,
+      gridModel,
+      id,
+      layoutOptions?.newChildItem.header,
+      setChildren,
+    ],
+  );
+
+  const handleDetachTab = useCallback<DragContextDetachTabHandler>(
+    ({ gridId, tabsId, value }) => {
+      if (gridId === id) {
+        console.log(
+          `[useGridLayout#${id}] handleDetachTab #${gridId}:${tabsId}`,
+        );
+        const tabState = gridModel.getTabState(tabsId);
+        if (tabState.activeTab.label === value) {
+          tabState.detachTab(value);
+        }
+      }
+    },
+    [gridModel, id],
+  );
+
+  const handleDropStackedItem = useCallback<DragContextDropHandler>(
+    ({ dragSource, tabsId: targetStackItemId, dropPosition }) => {
+      console.log(
+        `[useGridLayout#${id}] handleDropStackedItem#${dragSource.layoutId}`,
+      );
+
+      if (sourceIsTabbedComponent(dragSource)) {
+        const { id: sourceStackItemId } = queryClosest(
+          document.getElementById(dragSource.tabsId),
+          ".vuuGridLayoutItem",
+          true,
+        );
+
+        console.log(
+          `[useGridLayout#${id}] dragging tab from (#${dragSource.layoutId}) tabstrip ${sourceStackItemId} to tabstrip ${targetStackItemId}`,
+        );
+        if (sourceStackItemId === targetStackItemId) {
+          // ignore a drag within tabstrip this is not the closest layout, it will
+          // be handled by closest layout to tabstrip.
+          if (dragSource.layoutId === id) {
+            if (dropPosition) {
+              console.log(
+                `[useGridLayout] drag within tabstrip ${sourceStackItemId}`,
+              );
+
+              gridModel.moveItemWithinTabs(
+                sourceStackItemId,
+                dragSource.tab,
+                dropPosition,
+                dragSource.isSelectedTab,
+              );
+            } else {
+              throw Error(
+                "[useGridLayout] handleDropStackedItem no dropPosition for drop onto tabs",
+              );
+            }
+          }
+        } else if (sourceStackItemId && targetStackItemId && dropPosition) {
+          console.log(
+            `[useGridLayout] dragging from one set of tabs to another`,
+          );
+
+          gridModel.moveItemBetweenTabs(
+            sourceStackItemId,
+            targetStackItemId,
+            dragSource.tab,
+            dropPosition,
+          );
+        }
+      } else if (targetStackItemId && dropPosition) {
+        if (sourceIsComponent(dragSource)) {
+          // console.log(
+          //   `[useGridLayout] dropping a standalone component #${dragSource.id} into a stack ${targetStackItemId}`,
+          //   {
+          //     dragSource,
+          //   },
+          // );
+          const tabState = gridModel.getTabState(targetStackItemId);
+          tabState.addTab(
+            { id: dragSource.id, label: dragSource.label },
+            dropPosition,
+          );
+        } else if (sourceIsTemplate(dragSource)) {
+          // we're dropping b atemplete item onto a tabstrip. Check that
+          // we are handling this in the context of the correct layout
+          const gridId = getClosestGridLayout(targetStackItemId);
+          if (gridId === id) {
+            console.log(
+              `[useGridLayout#${id}] dropping a templated source item onto a tabstrip in #${gridId}`,
+            );
+
+            const { label = "New Item", ...restJSON } = JSON.parse(
+              dragSource.componentJson,
+            );
+
+            const newChildId = uuid();
+            const gridModelChildItem = new GridModelChildItem({
+              id: newChildId,
+              column: { start: 1, end: 1 },
+              dropTarget: true,
+              header: layoutOptions?.newChildItem.header,
+              resizeable: "hv",
+              row: { start: 1, end: 1 },
+              stackId: targetStackItemId,
+              title: label,
+            });
+            gridModel.addChildItem(gridModelChildItem);
+
+            const component = layoutFromJson(restJSON as LayoutJSON, "");
+            addChildComponent(component, gridModelChildItem);
+            gridModel.notifyChange();
+          }
+        }
+      } else {
+        throw Error(
+          "[useGridLayout] handleDropStackedItem no details of the stacked drop target",
+        );
+      }
+    },
+    [addChildComponent, gridModel, id, layoutOptions?.newChildItem.header],
+  );
+
+  const handleTabsChange = useCallback<TabsChangeHandler>(
+    (id, active, tabs) => {
+      console.log(
+        `[useGridLayout] handleTabsChange #${id} selected: ${active} ${JSON.stringify(tabs)}`,
+      );
+      forceRender({});
+    },
+    [],
+  );
+
+  const handleTabsCreated = useCallback((stackItem: GridModelChildItem) => {
+    setNonContentGridItems(({ stackedItems, ...rest }) => ({
+      ...rest,
+      stackedItems: stackedItems.concat(stackItem),
+    }));
+  }, []);
+
+  const handleTabsRemoved = useCallback((stackId: string) => {
+    setNonContentGridItems(({ stackedItems, ...rest }) => ({
+      ...rest,
+      stackedItems: stackedItems.filter(({ id }) => id !== stackId),
+    }));
+  }, []);
+
+  const handleTabSelectionChange = useCallback<TabSelectionChangeHandler>(
+    (id, active) => {
+      console.log(`[useGridLayout] handleSelectedTabChange #${id} ${active}`);
+      forceRender({});
+    },
+    [],
+  );
+
+  const dispatchGridLayoutAction = useCallback<GridLayoutDispatch>(
+    (action) => {
+      switch (action.type) {
+        case "close":
+          removeGridItem(action.id, "close");
+          break;
+        case "insert-tab":
+          // never used
+          console.log(`insert tab`);
+          break;
+        case "resize-grid-column":
+          {
+            gridModel.tracks.resizeTo(
+              "column",
+              action.trackIndex,
+              action.value,
+            );
+          }
+          break;
+        default:
+          throw Error(
+            `[useGridLayout] dispatchGridLayoutAction unknown action type '${action.type}'`,
+          );
+      }
+    },
+    [gridModel, removeGridItem],
+  );
+
+  const handleTrackResize = useCallback<GridTrackResizeHandler>(
+    (trackType, tracks) => {
+      // console.log(
+      //   `[useGridLayout] handleTrackResize ${trackType} [${tracks.join(" ")}]`,
+      // );
+      if (containerRef.current) {
+        if (trackType === "column") {
+          containerRef.current.style.gridTemplateColumns = tracks.join(" ");
+        } else {
+          containerRef.current.style.gridTemplateRows = tracks.join(" ");
+        }
+      }
+    },
+    [],
+  );
+
+  useLayoutEffect(() => {
+    /*
+     * Initialise Splitters, Placeholders and UI controls for sets of stacked items.
+     * Initially, stacked items will always use tabs.
+     */
+    const stackedItems: GridModelChildItem[] = [];
+    for (const [stackId, items] of gridModel.getStackedChildItems()) {
+      const tabs = gridModel.getChildItem(stackId);
+      if (tabs === undefined) {
+        const { column, row } = getSharedGridPosition(items);
+        const activeIndex = getActiveIndex(items);
+        gridModel.setTabState(stackId, items, activeIndex);
+        const stackedItem = new GridModelChildItem({
+          column,
+          id: stackId,
+          row,
+          type: "stacked-content",
+        });
+        gridModel?.addChildItem(stackedItem);
+        stackedItems.push(stackedItem);
+      }
+    }
+
+    gridModel.createPlaceholders();
+    const splitters = gridLayoutModel.createSplitters();
+    const placeholders = gridModel.getPlaceholders();
+    setNonContentGridItems({ placeholders, splitters, stackedItems });
+  }, [gridModel, gridLayoutModel]);
+
+  useEffect(() => {
+    gridModel.addListener("grid-layout-change", saveGridLayout);
+    gridModel.addListener("child-position-updates", updateGridChildItems);
+    gridModel.addListener("tab-selection-change", handleTabSelectionChange);
+    gridModel.addListener("tabs-change", handleTabsChange);
+    gridModel.addListener("tabs-created", handleTabsCreated);
+    gridModel.addListener("tabs-removed", handleTabsRemoved);
+
+    gridModel.tracks.on("grid-track-resize", handleTrackResize);
+
+    gridLayoutModel.addListener("child-position-updates", updateGridChildItems);
+
+    return () => {
+      gridModel.removeAllListeners();
+    };
+  }, [
+    gridLayoutModel,
+    gridModel,
+    handleTabsChange,
+    handleTabSelectionChange,
+    saveGridLayout,
+    updateGridChildItems,
+    handleTabsCreated,
+    handleTabsRemoved,
+    handleTrackResize,
+  ]);
+
+  return {
+    children: childrenRef.current,
+    containerCallback,
+    containerRef,
+    dispatchGridLayoutAction,
+    gridLayoutModel,
+    gridModel,
+    nonContentGridItems,
+    onDetachTab: handleDetachTab,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    onDrop: handleDrop,
+    onDropStackedItem: handleDropStackedItem,
+  };
+};
diff --git a/vuu-ui/packages/grid-layout/src/useGridSplitterResizing.tsx b/vuu-ui/packages/grid-layout/src/useGridSplitterResizing.tsx
new file mode 100644
index 000000000..a5da24cf0
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/useGridSplitterResizing.tsx
@@ -0,0 +1,247 @@
+import { MouseEventHandler, useCallback, useRef } from "react";
+import {
+  classNameLayoutItem,
+  getGridLayoutItem,
+  isSplitter,
+} from "./grid-dom-utils";
+import { adjustDistance, getTrackType } from "./grid-layout-utils";
+import { GridLayoutProps } from "./GridLayout";
+import {
+  GridLayoutModel,
+  GridLayoutResizeOperation,
+  type ResizeState,
+} from "./GridLayoutModel";
+import { GridModel } from "./GridModel";
+import { queryClosest } from "@finos/vuu-utils";
+
+export type SplitterResizingHookProps = Pick<
+  GridLayoutProps,
+  "id" | "onClick"
+> & {
+  gridLayoutModel: GridLayoutModel;
+  gridModel: GridModel;
+};
+
+export const useGridSplitterResizing = ({
+  gridLayoutModel: layoutModel,
+  gridModel,
+  onClick: onClickProp,
+}: SplitterResizingHookProps) => {
+  const resizingState = useRef<ResizeState | undefined>();
+
+  const createNewTrackForResize = useCallback(
+    (moveBy: number) => {
+      const resizeOperation = moveBy < 0 ? "contract" : "expand";
+      const { current: state } = resizingState;
+      if (state) {
+        const { splitter } = state;
+        const trackType = getTrackType(splitter);
+
+        const [contraTrackIndex, resizeTrackIndex] = splitter.resizedGridTracks;
+
+        const newTrackIndex =
+          resizeOperation === "contract" ? resizeTrackIndex : contraTrackIndex;
+
+        layoutModel.addTrackForResize(
+          trackType,
+          newTrackIndex,
+          Math.abs(moveBy),
+          resizeOperation,
+          resizeTrackIndex,
+          state,
+        );
+
+        if (resizeOperation === "contract") {
+          // TODO what is this for ?
+          splitter.resizedGridTracks[1] += 1;
+          splitter.resizedGridTracks[0] += 1;
+        }
+
+        state.resizeTrackIsShared = false;
+      }
+    },
+    [layoutModel],
+  );
+
+  const removeTrack = useCallback(
+    (moveBy: number, resizeOperation: GridLayoutResizeOperation) => {
+      const { current: state } = resizingState;
+      let restoredDistance = 0;
+      if (state) {
+        const { resizeTrackIsShared, splitter } = state;
+
+        const [contraTrackIndex, resizeTrackIndex] = splitter.resizedGridTracks;
+
+        const trackType = getTrackType(splitter);
+        const targetTrack =
+          resizeOperation === "expand" ? contraTrackIndex : resizeTrackIndex;
+
+        const currentTracks = gridModel.tracks.getTracks(trackType);
+        restoredDistance = currentTracks[targetTrack].numericValue;
+
+        const assignDirection = resizeTrackIsShared
+          ? resizeOperation === "expand"
+            ? "bwd"
+            : "fwd"
+          : resizeOperation === "expand"
+            ? "fwd"
+            : "bwd";
+
+        if (splitter.orientation === "horizontal") {
+          gridModel.removeGridColumn(targetTrack, assignDirection);
+        } else {
+          gridModel.removeGridRow(targetTrack, assignDirection);
+        }
+
+        state.resizeTrackIsShared = true;
+        if (resizeOperation === "expand") {
+          splitter.resizedGridTracks[1] -= 1;
+          splitter.resizedGridTracks[0] -= 1;
+        }
+
+        const adjustedDistance = adjustDistance(moveBy, restoredDistance);
+        if (adjustedDistance !== 0 && resizeOperation) {
+          createNewTrackForResize(adjustedDistance);
+        }
+      }
+    },
+    [gridModel, createNewTrackForResize],
+  );
+
+  const moveSplitter = useCallback(
+    (moveBy: number) => {
+      const { current: state } = resizingState;
+      const directionOfTravel = moveBy < 0 ? "bwd" : "fwd";
+
+      if (state) {
+        const { splitter } = state;
+        const [contraTrackIndex, resizeTrackIndex] = splitter.resizedGridTracks;
+        const trackType =
+          splitter.orientation === "vertical" ? "row" : "column";
+
+        const tracks = gridModel.tracks.getTracks(trackType);
+
+        // this gets tricky when reduced track is a fractional value
+        const reducedTrack =
+          directionOfTravel === "fwd"
+            ? tracks[contraTrackIndex]
+            : tracks[resizeTrackIndex];
+
+        if (reducedTrack.isFraction) {
+          gridModel.tracks.measure(trackType);
+        }
+
+        if (
+          !reducedTrack.isFraction &&
+          reducedTrack.numericValue - Math.abs(moveBy) <= 0
+        ) {
+          if (directionOfTravel === "fwd") {
+            removeTrack(moveBy, "expand");
+          } else {
+            removeTrack(moveBy, "contract");
+          }
+        } else {
+          gridModel.tracks.resizeBy(
+            trackType,
+            resizeTrackIndex,
+            contraTrackIndex,
+            moveBy,
+          );
+        }
+      }
+    },
+    [gridModel, removeTrack],
+  );
+
+  const mouseMove = useCallback(
+    ({ clientX, clientY }: MouseEvent) => {
+      const { current: state } = resizingState;
+      if (state) {
+        const { mousePos, resizeTrackIsShared, splitter } = state;
+        const newMousePos =
+          splitter.orientation === "vertical" ? clientY : clientX;
+        if (newMousePos !== mousePos) {
+          const moveBy = mousePos - newMousePos;
+          state.mousePos = newMousePos;
+          if (moveBy !== 0) {
+            if (resizeTrackIsShared) {
+              createNewTrackForResize(moveBy);
+            }
+            moveSplitter(moveBy);
+          }
+        }
+      }
+    },
+    [createNewTrackForResize, moveSplitter],
+  );
+
+  const mouseUp = useCallback(() => {
+    document.removeEventListener("mousemove", mouseMove);
+    document.removeEventListener("mouseup", mouseUp);
+    // TODO make sure a resize has actually taken place
+    gridModel.notifyChange();
+  }, [gridModel, mouseMove]);
+
+  // TODO need to identify the expanding track and the contracting track
+  // these may not necessarily be adjacent, when resizeable attribute of
+  // gridItems is taken into account
+  const onMouseDown = useCallback<MouseEventHandler>(
+    (e) => {
+      const splitterElement = e.target as HTMLDivElement;
+      if (!isSplitter(splitterElement)) {
+        return;
+      }
+
+      const gridLayout = queryClosest(splitterElement, ".vuuGridLayout", true);
+      if (gridLayout.id === gridModel.id) {
+        e.preventDefault();
+        const splitter = layoutModel.getSplitterById(splitterElement.id);
+        resizingState.current = {
+          mousePos:
+            splitter.ariaOrientation === "horizontal" ? e.clientY : e.clientX,
+          resizeTrackIsShared: layoutModel.isResizeTrackShared(splitter),
+          splitter,
+        };
+
+        document.addEventListener("mousemove", mouseMove);
+        document.addEventListener("mouseup", mouseUp);
+      }
+    },
+    [gridModel, layoutModel, mouseMove, mouseUp],
+  );
+
+  const selectedRef = useRef<string>();
+  const clickHandler = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (e) => {
+      const gridLayoutItem = getGridLayoutItem(e.target as HTMLElement);
+      if (gridLayoutItem) {
+        if (isSplitter(gridLayoutItem)) {
+          // ignore
+        } else {
+          const { left, top } = gridLayoutItem.getBoundingClientRect();
+
+          if (e.clientY < top || e.clientX < left) {
+            return;
+          }
+
+          if (selectedRef.current) {
+            const el = document.getElementById(
+              selectedRef.current,
+            ) as HTMLElement;
+            el.classList.remove(`${classNameLayoutItem}-active`);
+          }
+
+          selectedRef.current = gridLayoutItem.id;
+          gridLayoutItem.classList.add(`${classNameLayoutItem}-active`);
+        }
+      }
+      onClickProp?.(e);
+    },
+    [onClickProp],
+  );
+
+  return {
+    onClick: clickHandler,
+    onMouseDown,
+  };
+};
diff --git a/vuu-ui/packages/grid-layout/src/useNotDropTarget.ts b/vuu-ui/packages/grid-layout/src/useNotDropTarget.ts
new file mode 100644
index 000000000..65a2ea236
--- /dev/null
+++ b/vuu-ui/packages/grid-layout/src/useNotDropTarget.ts
@@ -0,0 +1,3 @@
+export const useNotDropTarget = () => {
+  return {};
+};
diff --git a/vuu-ui/packages/vuu-theme/css/foundations/size.css b/vuu-ui/packages/vuu-theme/css/foundations/size.css
index a33bba248..23c5eda86 100644
--- a/vuu-ui/packages/vuu-theme/css/foundations/size.css
+++ b/vuu-ui/packages/vuu-theme/css/foundations/size.css
@@ -4,7 +4,7 @@
   --salt-size-base: 24px;
   --salt-size-border: 1px;
   --salt-size-icon: 10px;
-  --salt-size-indicator: 1px;
+  --salt-size-indicator: 2px;
   --salt-size-selectable: 12px;
   --salt-size-bar-strong: 4px;
   --salt-size-bar-small: 2px;
diff --git a/vuu-ui/packages/vuu-utils/src/box-utils.ts b/vuu-ui/packages/vuu-utils/src/box-utils.ts
index 39783fe82..3d85cef6d 100644
--- a/vuu-ui/packages/vuu-utils/src/box-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/box-utils.ts
@@ -13,3 +13,75 @@ export function boxContainsPoint(rect: rect, x: number, y: number) {
     return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
   }
 }
+
+export type GridLayoutSplitDirection = "north" | "south" | "east" | "west";
+
+export type GridLayoutDropPosition =
+  | GridLayoutSplitDirection
+  | "header"
+  | "centre";
+
+export function getCenteredBox(
+  { right, left, top, bottom }: rect,
+  pctSize: number,
+) {
+  const pctOffset = (1 - pctSize) / 2;
+  const w = (right - left) * pctOffset;
+  const h = (bottom - top) * pctOffset;
+  return { left: left + w, top: top + h, right: right - w, bottom: bottom - h };
+}
+
+export function pointPositionWithinRect(
+  x: number,
+  y: number,
+  rect: rect,
+  borderZone = 30,
+) {
+  const width = rect.right - rect.left;
+  const height = rect.bottom - rect.top;
+  const posX = x - rect.left;
+  const posY = y - rect.top;
+  let closeToTheEdge = 0;
+
+  if (posX < borderZone) closeToTheEdge += 8;
+  if (posX > width - borderZone) closeToTheEdge += 2;
+  if (posY < borderZone) closeToTheEdge += 1;
+  if (posY > height - borderZone) closeToTheEdge += 4;
+
+  return { pctX: posX / width, pctY: posY / height, closeToTheEdge };
+}
+
+export const isGridLayoutSplitDirection = (
+  position: GridLayoutDropPosition,
+): position is GridLayoutSplitDirection =>
+  position !== "centre" && position !== "header";
+
+export function getPositionWithinBox(
+  x: number,
+  y: number,
+  rect: rect,
+  pctX: number,
+  pctY: number,
+): GridLayoutDropPosition {
+  const centerBox = getCenteredBox(rect, 0.2);
+  if (boxContainsPoint(centerBox, x, y)) {
+    return "centre";
+  } else {
+    const quadrant = `${pctY < 0.5 ? "north" : "south"}${
+      pctX < 0.5 ? "west" : "east"
+    }`;
+
+    switch (quadrant) {
+      case "northwest":
+        return pctX > pctY ? "north" : "west";
+      case "northeast":
+        return 1 - pctX > pctY ? "north" : "east";
+      case "southeast":
+        return pctX > pctY ? "east" : "south";
+      case "southwest":
+        return 1 - pctX > pctY ? "west" : "south";
+      default:
+        throw Error("getPositionWithinBox failed top compute position");
+    }
+  }
+}
diff --git a/vuu-ui/packages/vuu-utils/src/data-utils.ts b/vuu-ui/packages/vuu-utils/src/data-utils.ts
index 55f08b920..d926c21ea 100644
--- a/vuu-ui/packages/vuu-utils/src/data-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/data-utils.ts
@@ -88,3 +88,20 @@ export function getMovingValueDirection(
     }
   }
 }
+
+export function asInteger(
+  index: number | string | undefined,
+  defaultValue?: number,
+) {
+  if (typeof index === "number") {
+    return index;
+  } else {
+    const numIdx = parseInt(index ?? "");
+    if (!isNaN(numIdx)) {
+      return numIdx;
+    } else if (typeof defaultValue === "number") {
+      return defaultValue;
+    }
+    throw Error(`parseIndex invalid value ${index}`);
+  }
+}
diff --git a/vuu-ui/packages/vuu-utils/src/react-utils.ts b/vuu-ui/packages/vuu-utils/src/react-utils.ts
index 972fcc5c5..3f864b9e7 100644
--- a/vuu-ui/packages/vuu-utils/src/react-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/react-utils.ts
@@ -3,6 +3,7 @@ import {
   isValidElement,
   ReactElement,
   ReactNode,
+  SetStateAction,
   useEffect,
   useRef,
 } from "react";
@@ -36,3 +37,6 @@ export const useIsMounted = (id = "") => {
 
   return isMountedRef;
 };
+
+export const isSimpleStateValue = <T>(arg: SetStateAction<T>): arg is T =>
+  typeof arg !== "function";
diff --git a/vuu-ui/packages/vuu-utils/src/ts-utils.ts b/vuu-ui/packages/vuu-utils/src/ts-utils.ts
index 3bb04a988..ad836d2e9 100644
--- a/vuu-ui/packages/vuu-utils/src/ts-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/ts-utils.ts
@@ -1,3 +1,6 @@
+import { JSXElementConstructor, ReactElement } from "react";
+import { LayoutJSON } from "./json-types";
+
 export function isNotNullOrUndefined<T>(
   value: T | undefined | null,
 ): value is NonNullable<T> {
@@ -6,3 +9,31 @@ export function isNotNullOrUndefined<T>(
 
 export const isObject = (o: unknown): o is object =>
   typeof o === "object" && o !== null;
+
+export type OptionalProperty<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>;
+
+/**
+ * test whether a given react element implements a custom toJSON
+ * serialisation (static) method.
+ */
+type JsonEnabledJSXElementConstructor<P> = JSXElementConstructor<P> & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  toJSON: (el: ReactElement) => LayoutJSON<any>;
+};
+
+interface ReactElementWithJSON<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  P = any,
+  T extends // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    JsonEnabledJSXElementConstructor<any> = JsonEnabledJSXElementConstructor<any>,
+> {
+  type: T;
+  props: P;
+  key: string | null;
+}
+export const elementImplementsJSONSerialization = (
+  element: ReactElement,
+): element is ReactElementWithJSON =>
+  typeof (element.type as JsonEnabledJSXElementConstructor<unknown>).toJSON ===
+  "function";
diff --git a/vuu-ui/scripts/build-all.mjs b/vuu-ui/scripts/build-all.mjs
index 08efffe17..892e72bcf 100644
--- a/vuu-ui/scripts/build-all.mjs
+++ b/vuu-ui/scripts/build-all.mjs
@@ -10,15 +10,16 @@ export const buildAll = async () => {
         "cjs",
         "debug",
         "license",
-        "json"
+        "json",
       )}`,
-      `packages/${packageName}`
+      `packages/${packageName}`,
     ).catch((err) => {
       console.error(`[${packageName}] ${err.message}`);
     });
 
   // TODO determine the dependency graph/build order programatically
   const wave1 = [
+    "grid-layout",
     "vuu-data-test",
     "vuu-filter-parser",
     "vuu-icons",
@@ -43,7 +44,7 @@ export const buildAll = async () => {
     console.log(
       JSON.stringify({
         "package-list": wave1.concat(wave2).concat(wave3).concat(wave4),
-      })
+      }),
     );
   }
 
diff --git a/vuu-ui/scripts/utils.mjs b/vuu-ui/scripts/utils.mjs
index 2189c4e9b..b1ca5fa3a 100644
--- a/vuu-ui/scripts/utils.mjs
+++ b/vuu-ui/scripts/utils.mjs
@@ -25,7 +25,7 @@ export const formatBytes = (bytes, decimals = 2, displayLength = 10) => {
   const i = floor(log(bytes) / log(k));
   return frontPad(
     parseFloat((bytes / pow(k, i)).toFixed(dm)) + " " + sizes[i],
-    displayLength
+    displayLength,
   );
 };
 
@@ -34,21 +34,15 @@ export const formatDuration = ({ seconds, nanoSeconds }) =>
 
 export const execWait = (cmd, cwd = ".") =>
   new Promise((resolve, reject) => {
-    // const newProcess = exec(cmd, { cwd }, (err, stdout, stderr) => {
     exec(cmd, { cwd }, (err, stdout, stderr) => {
       console.log(stdout);
-      if (stderr) {
-        console.log(`stderr: ${stderr}`);
-      }
-      if (err) {
-        reject(err);
+      // TODO whats the difference between err and stdErr ?
+      if (err ?? stderr) {
+        reject(err ?? stderr);
       } else {
         resolve();
       }
     });
-    // newProcess.stdout.on("data", function (data) {
-    //   console.log(data);
-    // });
   });
 
 export function removeFolder(folderPath) {
@@ -166,7 +160,7 @@ export const getCommandLineArg = (argName, expectValue, defaultValue) => {
   const argEquals = argName + "=";
   const args = process.argv.slice(2);
   const matchedArg = args.find(
-    (arg) => arg === argName || arg.startsWith(argEquals)
+    (arg) => arg === argName || arg.startsWith(argEquals),
   );
   if (matchedArg && expectValue) {
     if (matchedArg.startsWith(argEquals)) {
@@ -195,7 +189,7 @@ const args = process.argv.slice(2);
 export const withArgs = (...argNames) => {
   const commandLineArgs = argNames
     .map((arg) =>
-      args.includes(arg) || args.includes("--" + arg) ? ` --${arg}` : ""
+      args.includes(arg) || args.includes("--" + arg) ? ` --${arg}` : "",
     )
     .join("");
   return commandLineArgs ? ` -- ${commandLineArgs}` : "";
diff --git a/vuu-ui/showcase/scripts/build.ts b/vuu-ui/showcase/scripts/build.ts
index 8047d7d9e..0ff18e9c0 100644
--- a/vuu-ui/showcase/scripts/build.ts
+++ b/vuu-ui/showcase/scripts/build.ts
@@ -38,7 +38,7 @@ const cssInlinePlugin = {
     build.onLoad(
       {
         filter:
-          /packages\/vuu-(datatable|filters|layout|popups|shell|table"table-extras|ui-controls|table)\/.*.css$/,
+          /packages\/(vuu|grid)-(datatable|filters|layout|popups|shell|table"table-extras|ui-controls|table)\/.*.css$/,
       },
       async (args) => {
         const css = await fs.promises.readFile(args.path, "utf8");
diff --git a/vuu-ui/showcase/scripts/showcase.ts b/vuu-ui/showcase/scripts/showcase.ts
index d33eccb40..56c69d005 100644
--- a/vuu-ui/showcase/scripts/showcase.ts
+++ b/vuu-ui/showcase/scripts/showcase.ts
@@ -17,6 +17,13 @@ await writeFile(
   `export default ${JSON.stringify(treeSourceJson)};`,
   "./.showcase/treeSourceJson.js",
 );
+
+/**
+ * Launch vite dev server, which will begin serving index.html.
+ * This will in import one of the followingb depending on url
+ * - index-main.ts - the Showcase Shell, hosts application chrome and an IFRame
+ * - index-standalone.ts runs exhibit code in IFrame
+ */
 execWait("npm run dev");
 
 console.log(`opening showcase at ${chalk.green("http://localhost:5173/")} ...`);
diff --git a/vuu-ui/showcase/src/examples/html/GridLayout.examples.css b/vuu-ui/showcase/src/examples/html/GridLayout.examples.css
index 3ee152811..29cae11a2 100644
--- a/vuu-ui/showcase/src/examples/html/GridLayout.examples.css
+++ b/vuu-ui/showcase/src/examples/html/GridLayout.examples.css
@@ -1,177 +1,61 @@
-.vuuGridLayout {
-    display: grid;
-    column-gap: var(--col-gap, 6px);
-    row-gap: var(--row-gap, 6px);
-    height: 100vh;
-    width: 100vw;
-}
-
-#GridLayoutA {
-    --col-gap: 6px;
-    --row-gap: 6px;
-    
-    --vuu-col-bg: rgba(252, 209, 232, 0.4);
-    --vuu-row-bg: rgba(252, 209, 232, 0.4);
-    
-    --col-gutter-count: calc(var(--col-count) - 1);
-    --total-col-gutter-width: calc(var(--col-gutter-count) * var(--col-gap));
-    --available-width: calc(100% - var(--total-col-gutter-width));
-    --percent-width: calc(1 / var(--col-count));
-    --column-width: calc(var(--available-width) * var(--percent-width));
-    
-    --row-gutter-count: calc(var(--row-count) - 1);
-    --total-row-gutter-height: calc(var(--row-gutter-count) * var(--row-gap));
-    --available-height: calc(100% - var(--total-row-gutter-height));
-    --percent-height: calc(1 / var(--row-count));
-    --row-height: calc(var(--available-height) * var(--percent-height));
-    
-    background: 
-        repeating-linear-gradient( to right, var(--vuu-col-bg) 0, var(--vuu-col-bg) var(--column-width), white var(--column-width), white calc(var(--column-width) + var(--col-gap)) ),
-        repeating-linear-gradient( to bottom, var(--vuu-row-bg) 0, var(--vuu-row-bg) var(--row-height), white var(--row-height), white calc(var(--row-height) + var(--row-gap)) ); 
-
-    grid-template-columns: repeat(var(--col-count), 1fr);
-    grid-template-rows: repeat(var(--row-count), 1fr);
-
-    grid-template-areas:
-        "l h h h h h h h h h h h h h h h h h h h h h h h"
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . ."
-        "l . . . . . . . . . . . . . . . . . . . . . . .";
-    
-}
-
-.component {
-    box-sizing: border-box;
-    display: inline-block;
-    min-height: 10px;
-    min-width: 10px;
-    opacity: 0.6;  
-    position: relative;
-}
-
-#component-A1 {
-    background-color: red;  
-    grid-area: h;
-}
-#component-A2 {
-    background-color: cyan;    
-    grid-area: l;
-}
-#component-A3 {
-    background-color: green;    
-    grid-column: 2/-1;
-    grid-row: -9/-5   
-}
-#component-A4 {
-    background-color: brown;    
-    grid-column: 2/-1;
-    grid-row: -13/-9   
-}
-#component-A5 {
-    background-color: black; 
-    grid-column: 2/-1;
-    grid-row: -5/-1   
-}
-
-
-#GridLayoutB{
-    grid-template-columns: 80px repeat(calc(var(--col-count) - 1), 1fr);
-    transition: 300ms;
-}
-
-#GridLayoutB:has(.resizing){
-    transition: none;;
-}
-
-#GridLayoutB:has(#component-B2:focus){
-    grid-template-columns: 240px repeat(calc(var(--col-count) - 1), 1fr);
-}
-
-#component-B1 {
-    background-color: red;  
-    grid-column: 2/-1;
-    grid-row: 1/2   
-}
-#component-B2 {
-    background-color: cyan;    
-    grid-column: 1/2;
-    grid-row: 1/-1   
-}
-
-#component-B3 {
-    background-color: green;    
-    grid-column: 2/-1;
-    grid-row: 2/3   
-}
-#component-B4 {
-    background-color: brown;    
-    grid-column: 2/-1;
-    grid-row: 3/4   
-}
-#component-B5 {
-    background-color: black; 
-    grid-column: 2/-1;
-    grid-row: 4/5   
-}
-
-
-
-[data-resizeable="v"] + [data-resizeable="v"]:before {
-    background-color: lightgray;
-    content:' ';
-    cursor: ns-resize;
-    height: 6px;
-    left:0;
-    position: absolute;
-    top:-6px;
-    width: 100%;
-}
-
-.component.resizing:before {
-    background-color: blue;;
-}
-
-#GridLayoutC{
-    grid-template-columns: 80px repeat(calc(var(--col-count) - 1), 1fr);
-    transition: 300ms;
-}
-
-#GridLayoutC:has(.resizing){
-    transition: none;;
-}
-
-#component-C1 {
-    background-color: red;  
-    grid-column: 2/-1;
-    grid-row: 1/2   
-}
-#component-C2 {
-    background-color: cyan;    
-    grid-column: 1/2;
-    grid-row: 1/-1   
-}
-
-#component-C3 {
-    background-color: green;    
-    grid-column: 2/-2;
-    grid-row: 2/3   
-}
-#component-C4 {
-    background-color: brown;    
-    grid-column: 2/-2;
-    grid-row: 3/4   
-}
-#component-C5 {
-    background-color: black; 
-    grid-column: 3/-1;
-    grid-row: 2/3   
+.vuuGridLayout.vuuFullPage {
+  height: 100vh;
+  width: 100vw;
+}
+
+
+[data-resize-role]:after {
+  color: white;
+  content: attr(data-resize-role);
+  font-size: 16px;
+  font-weight: bold;
+  left: 9px;
+  position: absolute;
+  top: 32px;
+}
+
+.vuuGridPalette {
+
+  .vuuGridPalette-item:has([data-item-id="green"]){
+    background-color: green;
+    color: white;
+  } 
+  .vuuGridPalette-item:has([data-item-id="red"]){
+    background-color: red;
+    color: white;
+  } 
+  .vuuGridPalette-item:has([data-item-id="yellow"]){
+    background-color: yellow;
+  } 
+  .vuuGridPalette-item:has([data-item-id="brown"]){
+    background-color: brown;
+    color: white;
+  } 
+
+  [data-item-id] {
+    background-color: inherit;
+    color: inherit;
+  }
+}
+
+/**
+  the following are from Stack
+  challenge: when resolving grid layout, some
+  measurements are taken before STack css has
+  been injected
+*/
+.vuuTabs {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.vuuTabs-tabPanel {
+  display: flex;
+  flex: 1; 
+  flex-direction: column;
+}
+
+.vuuTabs-tabPanel > * {
+  flex: 1 1 auto;
 }
diff --git a/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx b/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx
index d12ee4ceb..691815137 100644
--- a/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx
+++ b/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx
@@ -1,38 +1,1590 @@
-import { GridLayout } from "./components/GridLayout";
+import {
+  GridLayout,
+  GridLayoutChangeHandler,
+  GridLayoutItem,
+  GridLayoutProvider,
+  TrackSize,
+  useGridLayoutDispatch,
+  useGridModel,
+} from "@heswell/grid-layout";
+import { queryClosest } from "@finos/vuu-utils";
+import {
+  CSSProperties,
+  HTMLAttributes,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { DebugGridItem } from "./components/DebugGridItem";
+import { GridPalette, GridPaletteItem } from "./components/GridPalette";
+
 import "./GridLayout.examples.css";
+import { Button } from "@salt-ds/core";
+import { CSSTrackSize } from "@heswell/grid-layout/src/GridModel";
+
+export const SingleItemFillsGrid = () => {
+  return (
+    <GridLayout
+      colsAndRows={{
+        cols: ["1fr"],
+        rows: ["1fr"],
+      }}
+      full-page
+      id="GridLayoutB"
+    >
+      <GridLayoutItem
+        header
+        id="blue"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        title="Blue"
+      >
+        <DebugGridItem style={{ background: "blue" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const SingleStackedItemFillsGrid = () => {
+  return (
+    <GridLayout
+      colsAndRows={{ cols: ["1fr"], rows: ["1fr"] }}
+      full-page
+      id="GridLayout1"
+    >
+      <GridLayoutItem
+        data-drop-target
+        header
+        id="brown"
+        key="brown"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        stackId="tabs-1"
+        title="Brown"
+      >
+        <DebugGridItem style={{ background: "brown" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        data-drop-target
+        header
+        id="navy"
+        key="navy"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        stackId="tabs-1"
+        title="Navy"
+      >
+        <DebugGridItem style={{ background: "navy" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        data-drop-target
+        header
+        id="red"
+        key="red"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        stackId="tabs-1"
+        title="Red"
+      >
+        <DebugGridItem style={{ background: "red" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        data-drop-target
+        header
+        id="yellow"
+        key="yellow"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        stackId="tabs-1"
+        title="Yellow"
+      >
+        <DebugGridItem style={{ background: "yellow" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+// prettier-ignore
+export const TowerOfTwoStackedItems = () => {
+  return (
+    <GridLayout
+      colsAndRows={{ cols: ["1fr"], rows: ["1fr", "1fr"] }}
+      full-page
+      id="GridLayoutB"
+    >
+      <GridLayoutItem
+        header id="brown" key="brown" resizeable="hv"
+        style={{ gridArea: "1/1/2/2" }}
+        stackId="tabs-1" title="Brown"
+      >
+        <DebugGridItem style={{ background: "brown" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header id="navy" key="navy" resizeable="hv"
+        style={{ gridArea: "1/1/2/2" }}
+        stackId="tabs-1" title="Navy"
+      >
+        <DebugGridItem style={{ background: "navy" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header id="red" key="red" resizeable="hv"
+        style={{ gridArea: "1/1/2/2" }}
+        stackId="tabs-1" title="Red"
+      >
+        <DebugGridItem style={{ background: "red" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header id="yellow" key="yellow" resizeable="hv"
+        style={{ gridArea: "1/1/2/2" }}
+        stackId="tabs-1" title="Yellow"
+      >
+        <DebugGridItem style={{ background: "yellow" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header id="green" key="green" resizeable="hv"
+        style={{ gridArea: "2/1/3/2" }}
+        stackId="tabs-2" title="Green"
+      >
+        <DebugGridItem style={{ background: "green" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="pink"
+        key="pink"
+        resizeable="hv"
+        style={{
+          gridArea: "2/1/3/2",
+        }}
+        stackId="tabs-2"
+        title="Pink"
+      >
+        <DebugGridItem style={{ background: "pink" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header id="ivory" key="ivory" resizeable="hv"
+        style={{ gridArea: "2/1/3/2" }}
+        stackId="tabs-2" title="Ivory"
+      >
+        <DebugGridItem style={{ background: "ivory" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="rebeccapurple"
+        key="rebeccapurple"
+        resizeable="hv"
+        style={{
+          gridArea: "2/1/3/2",
+        }}
+        stackId="tabs-2"
+        title="Rebecca Purple"
+      >
+        <DebugGridItem style={{ background: "rebeccapurple" }} />
+      </GridLayoutItem>
+
+    </GridLayout>
+  );
+};
+
+export const TwoByTwoGrid = () => {
+  // prettier-ignore
+
+  const trackRef = useRef({ columnIndex: -1, rowIndex: -1 });
+
+  const getTrackIndex = (grid: HTMLElement, x: number, y: number) => {
+    const { left, top } = grid.getBoundingClientRect();
+    const columns = getComputedStyle(grid)
+      .getPropertyValue("grid-template-columns")
+      .split(" ")
+      .map((value) => parseInt(value, 10));
+    const rows = getComputedStyle(grid)
+      .getPropertyValue("grid-template-rows")
+      .split(" ")
+      .map((value) => parseInt(value, 10));
+
+    let columnIndex = 0;
+    let rowIndex = 0;
+
+    let posLeft = left;
+    let posTop = top;
+
+    for (let i = 0; i < columns.length; i++) {
+      posLeft += columns[i];
+      if (posLeft > x) {
+        columnIndex = i;
+        break;
+      }
+    }
+
+    for (let i = 0; i < rows.length; i++) {
+      posTop += rows[i];
+      if (posTop > y) {
+        rowIndex = i;
+        break;
+      }
+    }
+
+    return { columnIndex, rowIndex };
+  };
+
+  const onClick = useCallback<MouseEventHandler<HTMLDivElement>>(
+    ({ target, clientX, clientY }) => {
+      const grid = queryClosest(target, ".vuuGridLayout");
+      if (grid) {
+        trackRef.current = getTrackIndex(grid, clientX, clientY);
+      }
+    },
+    [],
+  );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        width: "100vw",
+      }}
+    >
+      <div style={{ flex: "0 0 40px" }}>
+        <div id="dragImage" style={{ position: "absolute", left: 0 }}></div>
+      </div>
+      <GridLayout
+        full-page
+        id="GridLayoutA"
+        colsAndRows={{
+          cols: ["1fr", "1fr"],
+          rows: ["1fr", "1fr"],
+        }}
+        onClick={onClick}
+      >
+        <GridLayoutItem
+          data-drop-target
+          header
+          id="green"
+          key="green"
+          resizeable="hv"
+          style={{
+            gridArea: "1/1/2/2",
+          }}
+          title="Green"
+        >
+          <DebugGridItem
+            style={{
+              background: "green",
+            }}
+          />
+        </GridLayoutItem>
+        <GridLayoutItem
+          data-drop-target
+          header
+          id="blue"
+          key="blue"
+          resizeable="hv"
+          style={{
+            gridArea: "1/2/2/3",
+          }}
+          title="Blue"
+        >
+          <DebugGridItem style={{ background: "blue" }} />
+        </GridLayoutItem>
+        <GridLayoutItem
+          data-drop-target
+          header
+          id="yellow"
+          key="yellow"
+          resizeable="hv"
+          style={{
+            gridArea: "2/1/3/2",
+          }}
+          title="Yellow"
+        >
+          <DebugGridItem style={{ background: "yellow" }} />
+        </GridLayoutItem>
+        <GridLayoutItem
+          data-drop-target
+          header
+          id="red"
+          key="red"
+          resizeable="hv"
+          style={{
+            gridArea: "2/2/3/3",
+          }}
+          title="Red"
+        >
+          <DebugGridItem style={{ background: "red" }} />
+        </GridLayoutItem>
+      </GridLayout>
+    </div>
+  );
+};
+
+export const TwoByTwoEmptyCell = () => {
+  return (
+    <GridLayout
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr"],
+      }}
+      full-page
+      id="GridLayoutB"
+    >
+      <GridLayoutItem
+        header
+        id="blue"
+        resizeable="hv"
+        style={{
+          gridArea: "1/2/2/3",
+        }}
+        title="Blue"
+      >
+        <DebugGridItem style={{ background: "blue" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="black"
+        resizeable="hv"
+        style={{
+          gridArea: "2/1/3/2",
+        }}
+        title="Black"
+      >
+        <div style={{ background: "black" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red"
+        resizeable="hv"
+        style={{
+          gridArea: "2/2/3/3",
+        }}
+        title="Red"
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const TwoByTwoDoubleRowspanInColumnTwo = () => {
+  return (
+    <GridLayout
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr"],
+      }}
+      full-page
+      id="GridLayoutB"
+    >
+      <GridLayoutItem
+        header
+        id="green-H"
+        resizeable="hv"
+        style={{
+          gridArea: "1/2/2/2",
+        }}
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="blue-H"
+        resizeable="hv"
+        style={{
+          gridArea: "1/2/3/3",
+        }}
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red-H"
+        resizeable="hv"
+        style={{
+          gridArea: "2/1/3/2",
+        }}
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const TwoByTwoColumnOneDoubleRowspan = () => {
+  return (
+    <GridLayout
+      full-page
+      id="GridLayoutB"
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr"],
+      }}
+    >
+      <GridLayoutItem
+        id="green-H"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/3/2",
+        }}
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="blue-H"
+        resizeable="hv"
+        style={{
+          gridArea: "1/2/2/3",
+        }}
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="red-H"
+        resizeable="hv"
+        style={{
+          gridArea: "2/2/3/3",
+        }}
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const SkewedTowerDeepTopRight = () => {
+  return (
+    <GridLayout
+      full-page
+      id="GridLayoutD"
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr", "1fr"],
+      }}
+    >
+      <GridLayoutItem
+        header
+        id="green"
+        key="green"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        title="Green"
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="blue"
+        key="blue"
+        resizeable="hv"
+        style={{
+          gridArea: "1/2/3/3",
+        }}
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="yellow"
+        key="yellow"
+        resizeable="hv"
+        style={{
+          gridArea: "2/1/4/2",
+        }}
+      >
+        <div style={{ background: "yellow" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="red"
+        key="red"
+        resizeable="hv"
+        style={{
+          gridArea: "3/2/4/3",
+        }}
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
 
-export const GridLayoutA = () => {
+export const SkewedTowerDeepTopLeft = () => {
   return (
-    <GridLayout colCount={24} id="GridLayoutA" rowCount={13}>
-      <div className="component" id="component-A1" />
-      <div className="component" id="component-A2" />
-      <div className="component" id="component-A3" />
-      <div className="component" id="component-A4" />
-      <div className="component" id="component-A5" />
+    <GridLayout
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr", "1fr"],
+      }}
+      full-page
+      id="GridLayoutE"
+    >
+      <GridLayoutItem
+        id="green-H"
+        resizeable="hv"
+        style={{ gridArea: "1/1/3/2" }}
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="blue-H"
+        resizeable="hv"
+        style={{ gridArea: "1/2/2/3" }}
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="black-H"
+        resizeable="hv"
+        style={{ gridArea: "3/1/4/1" }}
+      >
+        <div style={{ background: "black" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="red-H"
+        resizeable="hv"
+        style={{ gridArea: "2/2/4/3" }}
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
     </GridLayout>
   );
 };
 
-export const GridLayoutB = () => {
+export const SkewedTerracesWideTopLeft = () => {
   return (
-    <GridLayout colCount={1} id="GridLayoutB" rowCount={3}>
-      <div className="component" id="component-B1" />
-      <div className="component" id="component-B2" tabIndex={0} />
-      <div className="component" id="component-B3" data-resizeable="v" />
-      <div className="component" id="component-B4" data-resizeable="v" />
-      <div className="component" id="component-B5" data-resizeable="v" />
+    <GridLayout
+      full-page
+      id="GridLayoutE"
+      colsAndRows={{
+        cols: ["1fr", "1fr", "1fr"],
+        rows: ["1fr", "1fr"],
+      }}
+    >
+      <GridLayoutItem
+        id="green"
+        key={"green"}
+        resizeable="hv"
+        style={{ gridArea: "1/1/2/3" }}
+      >
+        <DebugGridItem
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="blue"
+        key="blue"
+        resizeable="hv"
+        style={{ gridArea: "1/3/2/4" }}
+      >
+        <DebugGridItem
+          style={{
+            background: "blue",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="yellow"
+        key="yellow"
+        resizeable="hv"
+        style={{ gridArea: "2/1/3/2" }}
+      >
+        <DebugGridItem
+          style={{
+            background: "yellow",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="red"
+        key="red"
+        resizeable="hv"
+        style={{ gridArea: "2/2/3/4" }}
+      >
+        <DebugGridItem
+          style={{
+            background: "red",
+          }}
+        />
+      </GridLayoutItem>
     </GridLayout>
   );
 };
 
-export const GridLayoutC = () => {
+export const GridLayoutG = () => {
   return (
-    <GridLayout colCount={3} id="GridLayoutC" rowCount={2}>
-      <div className="component" id="component-C1" />
-      <div className="component" id="component-C2" tabIndex={0} />
-      <div className="component" id="component-C3" data-resizeable="v" />
-      <div className="component" id="component-C4" data-resizeable="v" />
-      <div className="component" id="component-C5" data-resizeable="v" />
+    <GridLayout
+      full-page
+      id="GridLayoutE"
+      colsAndRows={{
+        cols: ["1fr", "1fr", "1fr"],
+        rows: ["1fr", "1fr"],
+      }}
+    >
+      <GridLayoutItem
+        id="green-H"
+        resizeable="hv"
+        style={{ gridArea: "1/1/2/2" }}
+        title="Green"
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="blue-H"
+        resizeable="hv"
+        style={{ gridArea: "1/2/2/4" }}
+        title="Blue"
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="black-H"
+        resizeable="hv"
+        style={{ gridArea: "2/1/3/3" }}
+        title="Black"
+      >
+        <div style={{ background: "black" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="red-H"
+        resizeable="hv"
+        style={{ gridArea: "2/3/3/4" }}
+        title="Red"
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
     </GridLayout>
   );
 };
+
+export const GridLayoutH = () => {
+  return (
+    <GridLayout
+      full-page
+      id="GridLayoutE"
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "32px", "1fr"],
+      }}
+    >
+      <GridLayoutItem
+        header
+        id="green"
+        resizeable="hv"
+        style={{ gridArea: "1/1/2/2" }}
+        title="Green"
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="blue"
+        resizeable="hv"
+        style={{ gridArea: "1/2/2/4" }}
+        title="Blue"
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+      {/* should also be able to work out fixed height by lack of resizeable */}
+      <GridLayoutItem height={32} id="tabs" style={{ gridArea: "2/1/3/4" }}>
+        <div style={{ background: "brown", bottom: 0 }} />
+      </GridLayoutItem>
+
+      <GridLayoutItem
+        id="black"
+        resizeable="hv"
+        style={{ gridArea: "4/1/4/4" }}
+        title="Black"
+      >
+        <div style={{ background: "black", top: 0 }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="red"
+        resizeable="hv"
+        style={{ gridArea: "3/1/4/4" }}
+        title="Red"
+      >
+        <div style={{ background: "red", top: 0 }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const FourCellTerrace = () => {
+  return (
+    <GridLayout
+      full-page
+      id="GridLayoutE"
+      colsAndRows={{
+        cols: ["1fr", "1fr", "1fr", "1fr"],
+        rows: ["1fr"],
+      }}
+    >
+      <GridLayoutItem
+        header
+        id="green"
+        resizeable="hv"
+        style={{ gridArea: "1/1/2/2" }}
+        title="Green"
+      >
+        <DebugGridItem
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="blue"
+        resizeable="hv"
+        style={{ gridArea: "1/2/2/3" }}
+        title="Blue"
+      >
+        <DebugGridItem
+          style={{
+            background: "blue",
+          }}
+        />
+      </GridLayoutItem>
+
+      <GridLayoutItem
+        header
+        id="yellow"
+        resizeable="hv"
+        style={{ gridArea: "1/3/2/4" }}
+        title="Yellow"
+      >
+        <DebugGridItem
+          style={{
+            background: "yellow",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red"
+        resizeable="hv"
+        style={{ gridArea: "1/4/2/5" }}
+        title="Red"
+      >
+        <DebugGridItem
+          style={{
+            background: "red",
+          }}
+        />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const FixedAppHeaderSimpleContent = () => {
+  return (
+    <GridLayout
+      colsAndRows={{
+        cols: ["1fr"],
+        rows: ["80px", "1fr"],
+      }}
+      full-page
+      id="GridLayoutB"
+    >
+      <GridLayoutItem height={80} id="gray" style={{ gridArea: "1/1/2/2" }}>
+        <DebugGridItem style={{ background: "gray" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="blue"
+        resizeable="hv"
+        style={{
+          gridArea: "2/1/3/2",
+        }}
+        title="Blue"
+      >
+        <DebugGridItem style={{ background: "blue" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+export const FixedAppHeaderThreeColumnContent = () => {
+  return (
+    // prettier-ignore
+    <GridLayout id="GridLayoutB" full-page
+      colsAndRows={{ cols: ["200px", "1fr", "200px"], rows: ["48px", "40px", "1fr"] }}
+    >
+      <GridLayoutItem id="gray" style={{ gridArea: "1/1/2/4" }}>
+        <DebugGridItem style={{ background: "gray" }} />
+      </GridLayoutItem>
+      <GridLayoutItem id="blue" resizeable="h" title="Blue" style={{ gridArea: "2/1/4/2" }} >
+        <DebugGridItem style={{ background: "blue" }} />
+      </GridLayoutItem>
+      <GridLayoutItem id="brown" resizeable="h" style={{ gridArea: "2/2/3/3" }} >
+        <DebugGridItem style={{ background: "brown" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red"
+        resizeable="hv"
+        title="Red"
+        style={{ gridArea: "3/2/4/3" }}
+      >
+        <DebugGridItem style={{ background: "red" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="yellow"
+        resizeable="h"
+        title="Yellow"
+        style={{ gridArea: "2/3/4/4" }}
+      >
+        <DebugGridItem style={{ background: "yellow" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+const closeButtonStyleLeft: CSSProperties = {
+  bottom: 6,
+  position: "absolute",
+  left: 6,
+};
+const closeButtonStyleRight: CSSProperties = {
+  bottom: 6,
+  position: "absolute",
+  right: 6,
+};
+
+const flip = (size: string) => (size === "0px" ? "200px" : "0px");
+
+export const FixedAppHeaderCollapsibleSidebars = () => {
+  const [cols, setCols] = useState<CSSTrackSize[]>(["200px", "1fr", "200px"]);
+  const [rows] = useState<CSSTrackSize[]>(["48px", "40px", "1fr"]);
+  const toggleLeftSidebar = () => {
+    setCols(([col1, col2, col3]) => [flip(col1), col2, col3]);
+  };
+  const closeLeftSidebar = () => {
+    setCols(([, col2, col3]) => ["0px", col2, col3]);
+  };
+  const toggleRightSidebar = () => {
+    setCols(([col1, col2, col3]) => [col1, col2, flip(col3)]);
+  };
+  const closeRightSidebar = () => {
+    setCols(([col1, col2]) => [col1, col2, "0px"]);
+  };
+  return (
+    // prettier-ignore
+    <GridLayout id="GridLayoutB" full-page
+      colsAndRows={{ cols, rows }}
+    >
+      <GridLayoutItem id="gray" style={{ gridArea: "1/1/2/4" }}>
+        <DebugGridItem style={{ alignItems: "center",background: "gray",display: "flex", gap: 9,justifyContent: "center"  }} >
+        <Button onClick={toggleLeftSidebar} >Toggle Left</Button>
+        <Button onClick={toggleRightSidebar}>Toggle Right </Button>
+
+          </DebugGridItem>
+      </GridLayoutItem>
+      <GridLayoutItem id="blue" resizeable="h" title="Blue" style={{ gridArea: "2/1/4/2" }} >
+        <DebugGridItem style={{ background: "blue" }}>
+          <Button onClick={closeLeftSidebar} style={closeButtonStyleLeft}>Close</Button>
+          </DebugGridItem>
+      </GridLayoutItem>
+      <GridLayoutItem id="brown" resizeable="h" style={{ gridArea: "2/2/3/3" }} >
+        <DebugGridItem style={{ background: "brown" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red"
+        resizeable="hv"
+        title="Red"
+        style={{ gridArea: "3/2/4/3" }}
+      >
+        <DebugGridItem style={{ background: "red" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="yellow"
+        resizeable="h"
+        title="Yellow"
+        style={{ gridArea: "2/3/4/4" }}
+      >
+        <DebugGridItem style={{ background: "yellow" }} >
+          <Button onClick={closeRightSidebar} style={closeButtonStyleRight}>Close</Button>
+        </DebugGridItem>
+
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+const CustomHeader = ({
+  children,
+  ...htmlAttributes
+}: HTMLAttributes<HTMLDivElement>) => {
+  const dispatch = useGridLayoutDispatch();
+  const gridModel = useGridModel();
+  const toggleLeftSidebar = () => {
+    const currentValue = gridModel.tracks.columns.at(0);
+    const value: TrackSize = currentValue === 0 ? "200px" : 0;
+    dispatch({ type: "resize-grid-column", trackIndex: 0, value });
+  };
+  const toggleRightSidebar = () => {
+    const currentValue = gridModel.tracks.columns.at(2);
+    const value: TrackSize = currentValue === 0 ? "200px" : 0;
+    dispatch({ type: "resize-grid-column", trackIndex: 2, value });
+  };
+  return (
+    <div
+      className="CustomHeader"
+      style={{
+        alignItems: "center",
+        display: "flex",
+        gap: 9,
+        background: "gray",
+        justifyContent: "center",
+      }}
+      {...htmlAttributes}
+    >
+      <Button onClick={toggleLeftSidebar}>Toggle Left</Button>
+      <Button onClick={toggleRightSidebar}>Toggle Right </Button>
+    </div>
+  );
+};
+
+export const FixedAppHeaderCustomCollapsibleSidebars = () => {
+  const [cols, setCols] = useState<TrackSize[]>(["200px", "1fr", "200px"]);
+  const [rows] = useState<TrackSize[]>(["48px", "40px", "1fr"]);
+  const closeLeftSidebar = () => {
+    setCols(([, col2, col3]) => ["0px", col2, col3]);
+  };
+  const closeRightSidebar = () => {
+    setCols(([col1, col2]) => [col1, col2, "0px"]);
+  };
+  return (
+    // prettier-ignore
+    <GridLayout id="GridLayoutB" full-page
+      colsAndRows={{ cols, rows }}
+    >
+      <GridLayoutItem id="gray" style={{ gridArea: "1/1/2/4" }}>
+        <CustomHeader  />
+      </GridLayoutItem>
+      <GridLayoutItem id="blue" resizeable="h" title="Blue" style={{ gridArea: "2/1/4/2" }} >
+        <DebugGridItem style={{ background: "blue" }}>
+          <Button onClick={closeLeftSidebar} style={closeButtonStyleLeft}>Close</Button>
+          </DebugGridItem>
+      </GridLayoutItem>
+      <GridLayoutItem id="brown" resizeable="h" style={{ gridArea: "2/2/3/3" }} >
+        <DebugGridItem style={{ background: "brown" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red"
+        resizeable="hv"
+        title="Red"
+        style={{ gridArea: "3/2/4/3" }}
+      >
+        <DebugGridItem style={{ background: "red" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        id="yellow"
+        resizeable="h"
+        title="Yellow"
+        style={{ gridArea: "2/3/4/4" }}
+      >
+        <DebugGridItem style={{ background: "yellow" }} >
+          <Button onClick={closeRightSidebar} style={closeButtonStyleRight}>Close</Button>
+        </DebugGridItem>
+
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const SingleRowFixedItemCenter = () => {
+  return (
+    <GridLayout
+      full-page
+      id="GridLayoutE"
+      colsAndRows={{
+        cols: ["1fr", "1fr", "1fr", "1fr"],
+        rows: ["1fr"],
+      }}
+    >
+      <GridLayoutItem
+        header
+        id="green"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        title="Green"
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="blue"
+        style={{
+          gridArea: "1/2/2/3",
+        }}
+        title="Blue"
+        width={150}
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+
+      <GridLayoutItem
+        header
+        id="black"
+        resizeable="hv"
+        style={{
+          gridArea: "1/3/2/4",
+        }}
+        title="Black"
+      >
+        <div style={{ background: "black" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red"
+        resizeable="hv"
+        style={{
+          gridArea: "1/4/2/5",
+        }}
+        title="Red"
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const SingleColumnFixedItemBlue = () => {
+  return (
+    <GridLayout
+      full-page
+      id="GridLayoutE"
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr", "1fr", "1fr"],
+      }}
+      style={{
+        gridTemplateRows: "1fr 100px 1fr 1fr",
+      }}
+    >
+      <GridLayoutItem
+        header
+        id="green"
+        resizeable="hv"
+        style={{
+          gridArea: "1/1/2/2",
+        }}
+        title="Green"
+      >
+        <div
+          style={{
+            background: "green",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="pink"
+        resizeable="hv"
+        style={{
+          gridArea: "1/2/2/3",
+        }}
+        title="Pink"
+      >
+        <div
+          style={{
+            background: "pink",
+          }}
+        />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        height={100}
+        id="blue"
+        style={{
+          gridArea: "2/1/3/3",
+        }}
+        title="Blue (fixed height 100px)"
+      >
+        <div style={{ background: "blue" }} />
+      </GridLayoutItem>
+
+      <GridLayoutItem
+        header
+        id="yellow"
+        resizeable="hv"
+        style={{
+          gridArea: "3/1/4/3",
+        }}
+        title="Yellow"
+      >
+        <div style={{ background: "yellow" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="red"
+        resizeable="hv"
+        style={{
+          gridArea: "4/1/5/2",
+        }}
+        title="Red"
+      >
+        <div style={{ background: "red" }} />
+      </GridLayoutItem>
+      <GridLayoutItem
+        header
+        id="brown"
+        resizeable="hv"
+        style={{
+          gridArea: "4/2/5/3",
+        }}
+        title="Brown"
+      >
+        <div style={{ background: "brown" }} />
+      </GridLayoutItem>
+    </GridLayout>
+  );
+};
+
+export const EmptyGridLayout = () => {
+  return (
+    <GridLayout
+      full-page
+      id="GridLayoutE"
+      colsAndRows={{
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr"],
+      }}
+    ></GridLayout>
+  );
+};
+
+export const EmptyWithPalette = () => {
+  const paletteItems = useMemo<GridPaletteItem[]>(
+    () => [
+      {
+        id: "red",
+        label: "Red",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "red",
+          },
+        },
+      },
+      {
+        id: "green",
+        label: "Green",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "green",
+          },
+        },
+      },
+      {
+        id: "yellow",
+        label: "Yellow",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "yellow",
+          },
+        },
+      },
+      {
+        id: "brown",
+        label: "Brown",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "brown",
+          },
+        },
+      },
+    ],
+    [],
+  );
+  return (
+    <>
+      <div id="dragImage" style={{ position: "absolute", left: 0 }}></div>
+
+      <GridLayoutProvider options={{ newChildItem: { header: true } }}>
+        <GridLayout
+          full-page
+          id="GridLayoutE"
+          colsAndRows={{
+            cols: ["200px", "1fr"],
+            rows: ["1fr"],
+          }}
+        >
+          <GridLayoutItem
+            id="palette"
+            resizeable="hv"
+            style={{ gridArea: "1/1/2/2" }}
+          >
+            <GridPalette paletteItems={paletteItems} />
+          </GridLayoutItem>
+        </GridLayout>
+      </GridLayoutProvider>
+    </>
+  );
+};
+
+export const ShowCaseLayout = () => {
+  const paletteItems = useMemo<GridPaletteItem[]>(
+    () => [
+      {
+        id: "red",
+        label: "Red",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "red",
+          },
+        },
+      },
+      {
+        id: "green",
+        label: "Green",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "green",
+          },
+        },
+      },
+      {
+        id: "yellow",
+        label: "Yellow",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "yellow",
+          },
+        },
+      },
+      {
+        id: "brown",
+        label: "Brown",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "brown",
+          },
+        },
+      },
+    ],
+    [],
+  );
+  return (
+    <>
+      <div id="dragImage" style={{ position: "absolute", left: 0 }}></div>
+
+      <GridLayout
+        full-page
+        id="GridLayoutE"
+        colsAndRows={{
+          cols: ["200px", "1fr", "200px"],
+          rows: ["48px", "40px", "1fr"],
+        }}
+      >
+        <GridLayoutItem id="app-header" style={{ gridArea: "1/1/2/4" }}>
+          <div style={{ background: "yellow" }}>AppHeader</div>
+        </GridLayoutItem>
+        <GridLayoutItem
+          id="palette"
+          resizeable="hv"
+          style={{ gridArea: "2/1/4/2" }}
+        >
+          <GridPalette paletteItems={paletteItems} />
+        </GridLayoutItem>
+
+        <GridLayoutItem id="app-toolbar" style={{ gridArea: "2/2/3/3" }}>
+          <div style={{ background: "brown", color: "white" }}>Toolbar</div>
+        </GridLayoutItem>
+
+        <GridLayoutItem
+          id="brown"
+          stackId="main-tabs"
+          style={{ gridArea: "3/2/4/3" }}
+          title="Brown"
+        >
+          <div style={{ background: "brown", color: "white" }}>Brown</div>
+        </GridLayoutItem>
+        <GridLayoutItem
+          id="navy"
+          stackId="main-tabs"
+          style={{ gridArea: "3/2/4/3" }}
+          title="Navy"
+        >
+          <div style={{ background: "navy", color: "white" }}>Navy</div>
+        </GridLayoutItem>
+        <GridLayoutItem
+          id="gray"
+          stackId="main-tabs"
+          style={{ gridArea: "3/2/4/3" }}
+          title="Gray"
+        >
+          <div style={{ background: "gray", color: "white" }}>Gray</div>
+        </GridLayoutItem>
+        <GridLayoutItem
+          id="black"
+          stackId="main-tabs"
+          style={{ gridArea: "3/2/4/3" }}
+          title="Black"
+        >
+          <div style={{ background: "black", color: "white" }}>Black</div>
+        </GridLayoutItem>
+      </GridLayout>
+    </>
+  );
+};
+
+export const ShowCaseLayoutNestedGrid = () => {
+  const paletteItems = useMemo<GridPaletteItem[]>(
+    () => [
+      {
+        label: "Red",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "red",
+          },
+        },
+      },
+      {
+        label: "Green",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "green",
+          },
+        },
+      },
+      {
+        label: "Yellow",
+        type: "DebugGridItem",
+        props: {
+          style: {
+            background: "yellow",
+          },
+        },
+      },
+      {
+        label: "Brown",
+        type: "DebugGridItem",
+        props: {
+          debugLabel: "Brown",
+          style: {
+            background: "brown",
+          },
+        },
+      },
+    ],
+    [],
+  );
+
+  const handleGridLayoutChanged = useCallback<GridLayoutChangeHandler>(() => {
+    // console.log(`layout changed for grid ${id}`, {
+    //   gridLayout,
+    // });
+  }, []);
+
+  return (
+    <>
+      <div id="dragImage" style={{ position: "absolute", left: 0 }}></div>
+      <GridLayoutProvider options={{ newChildItem: { header: true } }}>
+        <GridLayout
+          full-page
+          id="showcase"
+          colsAndRows={{
+            cols: ["200px", "1fr", "200px"],
+            rows: ["48px", "40px", "1fr"],
+          }}
+          onChange={handleGridLayoutChanged}
+        >
+          <GridLayoutItem
+            id="app-header"
+            style={{
+              gridArea: "1/1/2/4",
+            }}
+          >
+            <div style={{ background: "yellow" }}>AppHeader</div>
+          </GridLayoutItem>
+          <GridLayoutItem
+            id="palette"
+            resizeable="hv"
+            style={{
+              gridArea: "2/1/4/2",
+            }}
+          >
+            <GridPalette paletteItems={paletteItems} />
+          </GridLayoutItem>
+
+          <GridLayoutItem
+            id="app-toolbar"
+            style={{
+              gridArea: "2/2/3/3",
+            }}
+          >
+            <div style={{ background: "brown", color: "white" }}>Toolbar</div>
+          </GridLayoutItem>
+
+          <GridLayoutItem
+            id="LayoutBrown"
+            stackId="main-tabs"
+            style={{ gridArea: "3/2/4/3" }}
+            title="Brown Layout"
+          >
+            <GridLayout
+              id="brown-layout"
+              colsAndRows={{ cols: ["1fr"], rows: ["1fr"] }}
+              title="Brown Layout"
+            >
+              <GridLayoutItem
+                data-drop-target
+                id="brown"
+                resizeable="hv"
+                style={{ gridArea: "1/1/2/2" }}
+              >
+                <DebugGridItem
+                  style={{
+                    background: "brown",
+                  }}
+                />
+              </GridLayoutItem>
+            </GridLayout>
+          </GridLayoutItem>
+          <GridLayoutItem
+            id="LayoutNavy"
+            stackId="main-tabs"
+            style={{ gridArea: "3/2/4/3" }}
+            title="Navy Layout"
+          >
+            <GridLayout
+              id="navy-layout"
+              colsAndRows={{
+                cols: ["1fr"],
+                rows: ["1fr"],
+              }}
+              title="Navy Layout"
+            >
+              <GridLayoutItem
+                data-drop-target
+                id="navy"
+                style={{
+                  gridArea: "1/1/2/2",
+                }}
+              >
+                <DebugGridItem
+                  style={{
+                    background: "navy",
+                  }}
+                />
+              </GridLayoutItem>
+            </GridLayout>
+          </GridLayoutItem>
+          <GridLayoutItem
+            id="LayoutGray"
+            stackId="main-tabs"
+            style={{ gridArea: "3/2/4/3" }}
+            title="Gray Layout"
+          >
+            <GridLayout
+              id="gray-layout"
+              colsAndRows={{
+                cols: ["1fr"],
+                rows: ["1fr"],
+              }}
+              title="Gray Layout"
+            >
+              <GridLayoutItem
+                data-drop-target
+                id="gray"
+                style={{
+                  gridArea: "1/1/2/2",
+                }}
+              >
+                <DebugGridItem
+                  style={{
+                    background: "darkgray",
+                  }}
+                />
+              </GridLayoutItem>
+            </GridLayout>
+          </GridLayoutItem>
+          <GridLayoutItem
+            id="LayoutBlack"
+            stackId="main-tabs"
+            style={{ gridArea: "3/2/4/3" }}
+            title="Black Layout"
+          >
+            <GridLayout
+              id="black-layout"
+              colsAndRows={{
+                cols: ["1fr"],
+                rows: ["1fr"],
+              }}
+              title="Black Layout"
+            >
+              <GridLayoutItem
+                data-drop-target
+                id="black"
+                style={{
+                  gridArea: "1/1/2/2",
+                }}
+              >
+                <DebugGridItem
+                  style={{
+                    background: "black",
+                    color: "white",
+                  }}
+                />
+              </GridLayoutItem>
+            </GridLayout>
+          </GridLayoutItem>
+        </GridLayout>
+      </GridLayoutProvider>
+    </>
+  );
+};
diff --git a/vuu-ui/showcase/src/examples/html/GridLayoutPersistence.examples.tsx b/vuu-ui/showcase/src/examples/html/GridLayoutPersistence.examples.tsx
new file mode 100644
index 000000000..25749a320
--- /dev/null
+++ b/vuu-ui/showcase/src/examples/html/GridLayoutPersistence.examples.tsx
@@ -0,0 +1,162 @@
+import { useMemo } from "react";
+
+import { type LayoutJSON } from "@finos/vuu-utils";
+import {
+  GridLayout,
+  GridLayoutProvider,
+  layoutFromJson,
+  type SerializedGridLayout,
+} from "@heswell/grid-layout";
+import "./GridLayout.examples.css";
+
+export const TwoByTwoDoubleRowspanInColumnTwoDeserialized = () => {
+  const serializedLayout = useMemo<SerializedGridLayout>(
+    // prettier-ignore
+    () => ({
+      id: "grid-1",
+      components: {
+        green: {
+          type: "div",  props: { style: { background: "green" } } },
+        blue: {
+          type: "div", props: { style: { background: "blue" } } },
+        red: {
+          type: "div", props: { style: { background: "red" } } },
+      },
+      layout: {
+        cols: ["1fr", "1fr"],
+        rows: ["1fr", "1fr"],
+        gridLayoutItems: {
+          green: {
+            gridArea: "1/1/2/2",
+            header: true,
+            resizeable: "hv",
+            title: "Green",
+          },
+          blue: {
+            gridArea: "1/2/3/3",
+            header: true,
+            resizeable: "hv",
+            title: "Blue",
+          },
+          red: {
+            gridArea: "2/1/3/2",
+            header: true,
+            resizeable: "hv",
+            title: "Red",
+          },
+        },
+      },
+    }),
+    [],
+  );
+
+  return (
+    <GridLayoutProvider serializedLayout={serializedLayout}>
+      <GridLayout full-page id="grid-1" />
+    </GridLayoutProvider>
+  );
+};
+
+export const SingleStackDeserialized = () => {
+  const serializedLayout = useMemo<SerializedGridLayout>(
+    // prettier-ignore
+    () => ({
+      id: "grid-1",
+      components: {
+        green: {
+          type: "div",  props: { style: { background: "green" } } },
+        blue: {
+          type: "div", props: { style: { background: "blue" } } },
+        red: {
+          type: "div", props: { style: { background: "red" } } },
+        yellow: {
+          type: "div", props: { style: { background: "yellow" } } },
+      },
+      layout: {
+        cols: ["1fr"],
+        rows: ["1fr","1fr"],
+        gridLayoutItems: {
+          green: {
+            gridArea: "1/1/2/2",
+            header: true,
+            resizeable: "hv",
+            stackId: "tabs-1",
+            title: "Green",
+          },
+          blue: {
+            gridArea: "1/1/2/2",
+            header: true,
+            resizeable: "hv",
+            stackId: "tabs-1",
+            title: "Blue",
+          },
+          red: {
+            contentVisible: true,
+            gridArea: "1/1/2/2",
+            header: true,
+            resizeable: "hv",
+            stackId: "tabs-1",
+            title: "Red",
+          },
+          yellow: {
+            gridArea: "2/1/3/2",
+            header: true,
+            resizeable: "hv",
+            title: "Yellow",
+          },
+        },
+      },
+    }),
+    [],
+  );
+
+  return (
+    <GridLayoutProvider serializedLayout={serializedLayout}>
+      <GridLayout full-page id="grid-1" />
+    </GridLayoutProvider>
+  );
+};
+
+export const GridLayoutFromJSON = () => {
+  const layoutJson = useMemo<LayoutJSON>(
+    () => ({
+      type: "Grid",
+      props: {
+        "full-page": true,
+        layout: {
+          cols: ["1fr", "1fr"],
+          rows: ["1fr", "1fr"],
+          gridLayoutItems: {
+            red: {
+              gridArea: "1/1/2/2",
+              header: true,
+              title: "Red",
+            },
+            green: {
+              gridArea: "2/1/3/2",
+              header: true,
+              title: "Green",
+            },
+            blue: {
+              gridArea: "1/2/3/3",
+              header: true,
+              title: "Blue",
+            },
+          },
+        },
+      },
+      children: [
+        { type: "div", id: "red", props: { style: { background: "red" } } },
+        { type: "div", id: "green", props: { style: { background: "green" } } },
+        { type: "div", id: "blue", props: { style: { background: "blue" } } },
+      ],
+    }),
+    [],
+  );
+
+  const gridLayout = useMemo(() => {
+    return layoutFromJson(layoutJson, "0");
+  }, [layoutJson]);
+
+  return gridLayout;
+};
diff --git a/vuu-ui/showcase/src/examples/html/components/DebugGridItem.tsx b/vuu-ui/showcase/src/examples/html/components/DebugGridItem.tsx
new file mode 100644
index 000000000..1ab7d3564
--- /dev/null
+++ b/vuu-ui/showcase/src/examples/html/components/DebugGridItem.tsx
@@ -0,0 +1,36 @@
+import { LayoutJSON, registerComponent } from "@finos/vuu-utils";
+import {
+  createElement,
+  HTMLAttributes,
+  ReactElement,
+  RefCallback,
+  useCallback,
+  useRef,
+} from "react";
+
+export type DebugGridItemProps = HTMLAttributes<HTMLDivElement>;
+
+export const DebugGridItem = (htmlAttributes: DebugGridItemProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const setRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
+    ref.current = el;
+  }, []);
+  console.log(`%c[DebugGridItem] render`, "color:brown;font-weight:bold;");
+  return <div {...htmlAttributes} className="vuuDebugGridItem" ref={setRef} />;
+};
+
+registerComponent("DebugGridItem", DebugGridItem, "view");
+
+const DebugGridItemType = createElement(DebugGridItem).type;
+
+DebugGridItem.toJSON = (
+  element: ReactElement<DebugGridItemProps, typeof DebugGridItemType>,
+) => {
+  return {
+    id: element.props.id,
+    props: {
+      style: element.props.style,
+    },
+    type: "DebugGridItem",
+  } as LayoutJSON;
+};
diff --git a/vuu-ui/showcase/src/examples/html/components/GridPalette.css b/vuu-ui/showcase/src/examples/html/components/GridPalette.css
new file mode 100644
index 000000000..984911071
--- /dev/null
+++ b/vuu-ui/showcase/src/examples/html/components/GridPalette.css
@@ -0,0 +1,12 @@
+.vuuGridPalette {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.vuuGridPalette-item {
+    align-items: center;
+    display: flex;
+    height: 24px;
+    padding: 0 4px;
+}
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/examples/html/components/GridPalette.tsx b/vuu-ui/showcase/src/examples/html/components/GridPalette.tsx
new file mode 100644
index 000000000..a2e591ca8
--- /dev/null
+++ b/vuu-ui/showcase/src/examples/html/components/GridPalette.tsx
@@ -0,0 +1,70 @@
+import { queryClosest } from "@finos/vuu-utils";
+import {
+  useDraggable,
+  useGridLayoutDragStartHandler,
+  type DragSource,
+} from "@heswell/grid-layout";
+import cx from "clsx";
+import { DragEvent, HTMLAttributes, useCallback } from "react";
+
+import "./GridPalette.css";
+
+const classBase = "vuuGridPalette";
+
+export interface GridPaletteProps extends HTMLAttributes<HTMLDivElement> {
+  paletteItems: GridPaletteItem[];
+}
+
+export type GridPaletteItem = {
+  label: string;
+  props: unknown;
+  type: string;
+};
+
+export const GridPalette = ({
+  paletteItems,
+  ...htmlAttributes
+}: GridPaletteProps) => {
+  const getDragSource = useCallback(
+    (evt: DragEvent<Element>): DragSource => {
+      const draggedItem = queryClosest(evt.target, ".vuuGridPalette-item");
+      if (draggedItem) {
+        const gridLayout = queryClosest(draggedItem, ".vuuGridLayout", true);
+
+        const index = parseInt(draggedItem.dataset.index ?? "-1");
+        const item = paletteItems[index] as GridPaletteItem;
+        return {
+          element: draggedItem,
+          componentJson: JSON.stringify(item),
+          layoutId: gridLayout.id,
+          label: "123",
+          type: "template",
+        };
+      }
+      throw Error("no palette item to provide payload");
+    },
+    [paletteItems],
+  );
+
+  const onDragStart = useGridLayoutDragStartHandler();
+  const draggableProps = useDraggable({
+    getDragSource,
+    onDragStart,
+  });
+
+  return (
+    <div {...htmlAttributes} className={classBase} {...draggableProps}>
+      {paletteItems.map((paletteItem, index) => (
+        <div className={cx(`${classBase}-item`)} data-index={index} key={index}>
+          <div
+            data-item-id={paletteItem.label.toLowerCase()}
+            draggable
+            style={{ padding: "3px 8px" }}
+          >
+            {paletteItem.label}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/vuu-ui/tools/vite-plugin-inline-css/src/index.js b/vuu-ui/tools/vite-plugin-inline-css/src/index.js
index 298fa04c0..88409d6df 100644
--- a/vuu-ui/tools/vite-plugin-inline-css/src/index.js
+++ b/vuu-ui/tools/vite-plugin-inline-css/src/index.js
@@ -1,24 +1,25 @@
 import { createFilter } from "vite";
 import MagicString from "magic-string";
-
-
+/**
+ * This plugin is invoked when we run showcase in dev mode
+ */
 // This plugin adds "?inline" to each css import within our components to disable
 // vite's own style injection used in storybook
-export function cssInline(options = {}) {
-  const {
-    exclude = ["**/**.stories.tsx"],
-    include = [
-      "**/packages/vuu-datatable/**/*.{tsx,jsx}",
-      "**/packages/vuu-data-react/**/*.{tsx,jsx}",
-      "**/packages/vuu-filters/**/*.{tsx,jsx}",
-      "**/packages/vuu-layout/**/*.{tsx,jsx}",
-      "**/packages/vuu-popups/**/*.{tsx,jsx}",
-      "**/packages/vuu-shell/**/*.{tsx,jsx}",
-      "**/packages/vuu-table/**/*.{tsx,jsx}",
-      "**/packages/vuu-table-extras/**/*.{tsx,jsx}",
-      "**/packages/vuu-ui-controls/**/*.{tsx,jsx}",
-    ],
-  } = options;
+export function cssInline() {
+  const exclude = ["**/**.stories.tsx"];
+  const include = [
+    "**/packages/grid-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-datatable/**/*.{tsx,jsx}",
+    "**/packages/vuu-data-react/**/*.{tsx,jsx}",
+    "**/packages/vuu-filters/**/*.{tsx,jsx}",
+    "**/packages/vuu-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-popups/**/*.{tsx,jsx}",
+    "**/packages/vuu-shell/**/*.{tsx,jsx}",
+    "**/packages/vuu-table/**/*.{tsx,jsx}",
+    "**/packages/vuu-table-extras/**/*.{tsx,jsx}",
+    "**/packages/vuu-ui-controls/**/*.{tsx,jsx}",
+  ];
+
   const filter = createFilter(include, exclude);
 
   return {