widget column bar - respects sizes

packages/web/src/widgets/WidgetColumnBar.svelte

@@ -1,5 +1,39 @@
-<div class="main-container">
-    <slot></slot>
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import createRef from '../utility/createRef';
+
+  let definitions = [];
+  const dynamicPropsCollection = [];
+  let clientHeight;
+
+  const widgetColumnBarHeight = writable(0);
+
+  setContext('widgetColumnBarHeight', widgetColumnBarHeight);
+  setContext('pushWidgetItemDefinition', (item, dynamicProps) => {
+    dynamicPropsCollection.push(dynamicProps);
+    definitions = [...definitions, item];
+    return definitions.length - 1;
+  });
+  setContext('updateWidgetItemDefinition', (index, item) => {
+    definitions[index] = item;
+  });
+
+  $: $widgetColumnBarHeight = clientHeight;
+
+  $: computeDynamicProps(definitions);
+
+  function computeDynamicProps(defs: any[]) {
+    for (let index = 0; index < defs.length; index++) {
+      const definition = defs[index];
+      const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip);
+      dynamicPropsCollection[index].set({ splitterVisible });
+    }
+  }
+</script>
+
+<div class="main-container" bind:clientHeight>
+  <slot />
 </div>
 
 <style>