From 2aae2bab3128306591bab8191163050f7ca24ab2 Mon Sep 17 00:00:00 2001
From: poirazis <poirazis@gmail.com>
Date: Sun, 30 Jun 2024 17:43:47 +0300
Subject: [PATCH 1/2] wip

---
 package.json               |  10 +-
 schema.json                |  25 +++-
 src/Component.svelte       | 248 ++++++++++++++++++++-----------------
 src/RepeaterPreview.svelte |   8 +-
 src/TabControl.svelte      |  22 ++--
 5 files changed, 175 insertions(+), 138 deletions(-)

diff --git a/package.json b/package.json
index 831678d..768566a 100644
--- a/package.json
+++ b/package.json
@@ -14,23 +14,23 @@
     "@crownframework/svelte-error-boundary": "^1.0.3",
     "@spectrum-css/opacitycheckerboard": "^1.1.5",
     "@spectrum-css/splitview": "4.0.3",
-    "svelte": "^4.2.17",
+    "svelte": "^4.2.18",
     "svelte-fsm": "^1.2.0"
   },
   "devDependencies": {
-    "@budibase/backend-core": "^2.28.1",
-    "@budibase/shared-core": "^2.28.1",
+    "@budibase/backend-core": "^2.29.4",
+    "@budibase/shared-core": "^2.29.4",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "rollup": "^2.79.1",
     "rollup-plugin-copy2": "^0.3.1",
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-svelte": "^7.2.1",
+    "rollup-plugin-svelte": "^7.2.2",
     "rollup-plugin-svg": "^2.0.0",
     "tar": "^6.2.1"
   }
diff --git a/schema.json b/schema.json
index e3f562d..c84f11a 100644
--- a/schema.json
+++ b/schema.json
@@ -164,6 +164,20 @@
             "label": "Source Array",
             "resetOn": "bound",
             "dependsOn": { "setting": "bound", "value": "array" }
+          },
+          {
+            "type": "boolean",
+            "key": "autorefresh",
+            "label": "Auto Refresh",
+            "resetOn": "bound",
+            "dependsOn": { "setting": "bound", "value": "dataprovider" }
+          },
+          {
+            "type": "number",
+            "key": "autorefreshRate",
+            "label": "Refresh Every",
+            "resetOn": "bound",
+            "dependsOn": "autorefresh"
           }
         ]
       },
@@ -401,12 +415,6 @@
             "key": "activeTab",
             "label": "Active Tab"
           },
-          {
-            "type": "boolean",
-            "key": "tabsQuiet",
-            "label": "Quiet",
-            "defaultValue": false
-          },
           {
             "type": "boolean",
             "key": "tabsEmphasized",
@@ -530,6 +538,11 @@
             "type": "color",
             "key": "color",
             "label": "Color"
+          },
+          {
+            "type": "event",
+            "key": "onShow",
+            "label": "On Show"
           }
         ]
       },
diff --git a/src/Component.svelte b/src/Component.svelte
index 6c46538..32754f3 100644
--- a/src/Component.svelte
+++ b/src/Component.svelte
@@ -14,6 +14,7 @@
     Provider,
     ContextScopes,
     componentStore,
+    screenStore,
     memo,
   } = getContext("sdk");
 
@@ -66,9 +67,12 @@
 
   export let skeleton = false;
 
-  // Events
+  // Events as Parent
   export let onTabChange;
 
+  // Events as Child
+  export let onShow;
+
   let containers = [];
   let container;
 
@@ -85,11 +89,9 @@
   let id = Math.random() * 10;
   let childCssVariables = {};
   let cssVariables = {};
-  let scope = ContextScopes.Local;
+  let builderCssVariables = {};
 
-  const props = memo($$props);
-
-  $: props.set($$props);
+  let scope = ContextScopes.Local;
 
   // The array of slots to be rendered in array repeater mode
   let slots;
@@ -177,6 +179,7 @@
         childState.deactivate();
       },
       show() {
+        onShow?.();
         childState.activate();
       },
       synchProperties() {
@@ -186,8 +189,6 @@
           ...$component.styles,
           normal: {
             ...$component.styles.normal,
-            ...cssVariables,
-            ...childCssVariables,
             "border-top-width": borderTop
               ? $component.styles.normal["border-width"] ?? 0
               : 0,
@@ -390,7 +391,7 @@
       },
       refresh() {
         childCssVariables = {
-          flex: flex == "grow" ? flexFactor + " 1 auto" : "0 1 auto",
+          flex: flex == "grow" ? flexFactor + " 1 auto" : "0 0 auto",
         };
       },
     },
@@ -477,9 +478,9 @@
       "plugin/bb-component-SuperContainer"
     : false;
 
-  $: state.synchProperties($$props);
-
   $: if (bound == "array") slots = safeParse(sourceArray);
+
+  // If a Child , keep in sync with parent
   $: childState.synch($parentState);
   $: parentState?.updateContainer(
     id,
@@ -490,6 +491,7 @@
     Math.min(rowSpan, $parentGridStore?.gridRows)
   );
 
+  // Inside Builder specigic code
   $: {
     if (
       $builderStore.inBuilder &&
@@ -509,13 +511,32 @@
     }
   }
 
-  $: if (mode == "grid") setContext("superContainerParams", gridStore);
+  // Update on property changes
+  $: state.synchProperties(
+    mode,
+    childMode,
+    hAlign,
+    vAlign,
+    flex,
+    flexFactor,
+    bound,
+    direction,
+    gap,
+    activeTab,
+    gridColumns,
+    gridRows
+  );
 
-  $: if (mode == "fieldgroup") {
-    setContext("field-group", labelPos);
-    setContext("field-group-label-width", labelWidth);
-    setContext("field-group-disabled", disabled);
-  }
+  // Append Compnent Styles
+  $: $component.styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles.normal,
+      ...cssVariables,
+      ...childCssVariables,
+      ...builderCssVariables,
+    },
+  };
 
   function safeParse(str) {
     let parsed = [];
@@ -553,9 +574,15 @@
     }
   });
 
-  $: state.synchProperties($props);
-
+  // Expose State to Children
   setContext("superContainer", state);
+  $: if (mode == "grid") setContext("superContainerParams", gridStore);
+
+  $: if (mode == "fieldgroup") {
+    setContext("field-group", labelPos);
+    setContext("field-group-label-width", labelWidth);
+    setContext("field-group-disabled", disabled);
+  }
 </script>
 
 <svelte:window
@@ -563,107 +590,100 @@
   on:mousemove={(e) => (resizing ? state.resize(e) : null)}
 />
 
-{#key disabled}
-  {#key mode}
-    {#if $childState != "hidden" && $childState != "tabItem"}
-      <div
-        bind:this={container}
-        class:super-container={$state == "container"}
-        class:accordion={$state == "accordion"}
-        class:super-grid={$state == "grid"}
-        class:tabs={$state == "tabs"}
-        class:splitview={$state == "splitview"}
-        class:super-fieldgroup={$state == "fieldgroup"}
-        class:super-container-item={$childState == "containerItem"}
-        class:accordion-item={$childState == "accordionItem"}
-        class:tab-item={$childState == "tabItem" || $childState == "hidden"}
-        class:splitview-item={$childState == "splitviewItem"}
-        class:super-fieldgroup-item={$childState == "fieldgroupItem"}
-        class:nested={$builderStore.inBuilder && nested}
-        class:spectrum-OpacityCheckerboard={$builderStore.inBuilder &&
-          $component.empty}
-        use:styleable={$component.styles}
-      >
-        {#if skeleton}
-          <CellSkeleton>Loading ...</CellSkeleton>
-        {:else}
-          {#if mode == "grid" && $builderStore.inBuilder}
-            <div class="underlay">
-              {#each coords as _, idx}
-                <div class="placeholder spectrum-OpacityCheckerboard">
-                  {idx}
-                </div>
-              {/each}
+{#if $childState != "hidden" && $childState != "tabItem"}
+  <div
+    bind:this={container}
+    class:super-container={$state == "container"}
+    class:accordion={$state == "accordion"}
+    class:super-grid={$state == "grid"}
+    class:tabs={$state == "tabs"}
+    class:splitview={$state == "splitview"}
+    class:super-fieldgroup={$state == "fieldgroup"}
+    class:super-container-item={$childState == "containerItem"}
+    class:accordion-item={$childState == "accordionItem"}
+    class:tab-item={$childState == "tabItem" || $childState == "hidden"}
+    class:splitview-item={$childState == "splitviewItem"}
+    class:super-fieldgroup-item={$childState == "fieldgroupItem"}
+    class:nested={$builderStore.inBuilder && nested}
+    class:spectrum-OpacityCheckerboard={$builderStore.inBuilder &&
+      $component.empty}
+    use:styleable={$component.styles}
+  >
+    {#if skeleton}
+      <CellSkeleton>Loading ...</CellSkeleton>
+    {:else}
+      {#if mode == "grid" && $builderStore.inBuilder}
+        <div class="underlay">
+          {#each coords as _, idx}
+            <div class="placeholder spectrum-OpacityCheckerboard">
+              {idx}
             </div>
-          {/if}
-
-          {#if mode == "tabs" && containers?.length > 0}
-            <TabControl
-              {containers}
-              {hAlign}
-              {vAlign}
-              {direction}
-              {selectedTab}
-              {state}
-              {theme}
-              {tabsQuiet}
-              {tabsAlignment}
-              {tabsSize}
-              {tabsIconsOnly}
-              {tabsEmphasized}
-            />
-          {/if}
-
-          <!-- In Repeater Mode with Data Provider -->
-          {#if bound == "dataprovider" && dataprovider}
-            <RepeaterPreview inBuilder={$builderStore.inBuilder} {mode} />
-            {#if dataprovider?.rows?.length}
-              {#each dataprovider.rows as row}
-                <Provider data={row} {scope}>
-                  <slot />
-                </Provider>
-              {/each}
-            {:else if $builderStore.inBuilder}
-              <Provider data={{}} {scope}>
-                <slot />
-              </Provider>
-            {/if}
-            <!-- In Repeater Mode with Array -->
-          {:else if bound == "array"}
-            {#if slots?.length}
-              {#each slots as row, idx}
-                <Provider
-                  data={{ index: idx, value: row }}
-                  scope={ContextScopes.Local}
-                >
-                  <slot />
-                </Provider>
-              {/each}
-            {:else if $builderStore.inBuilder}
-              <Provider
-                data={{ index: -1, value: {} }}
-                scope={ContextScopes.Local}
-              >
-                <slot />
-              </Provider>
-            {/if}
-            <!-- In unbound mode -->
-          {:else if mode == "grid"}
+          {/each}
+        </div>
+      {/if}
+
+      {#if mode == "tabs" && containers?.length > 0}
+        <TabControl
+          {containers}
+          {hAlign}
+          {vAlign}
+          {direction}
+          {selectedTab}
+          {state}
+          {theme}
+          {tabsQuiet}
+          {tabsAlignment}
+          {tabsSize}
+          {tabsIconsOnly}
+          {tabsEmphasized}
+        />
+      {/if}
+
+      <!-- In Repeater Mode with Data Provider -->
+      {#if bound == "dataprovider" && dataprovider}
+        <RepeaterPreview inBuilder={$builderStore.inBuilder} {mode} />
+        {#if dataprovider?.rows?.length}
+          {#each dataprovider.rows as row}
+            <Provider data={row} {scope}>
+              <slot />
+            </Provider>
+          {/each}
+        {:else if $builderStore.inBuilder}
+          <Provider data={{}} {scope}>
             <slot />
-          {:else}
-            {#key labelPos + labelWidth}
+          </Provider>
+        {/if}
+        <!-- In Repeater Mode with Array -->
+      {:else if bound == "array"}
+        {#if slots?.length}
+          {#each slots as row, idx}
+            <Provider
+              data={{ index: idx, value: row }}
+              scope={ContextScopes.Local}
+            >
               <slot />
-            {/key}
-          {/if}
-
-          {#if grabberPosition}
-            <Grabber {grabberPosition} {resizing} {state} />
-          {/if}
+            </Provider>
+          {/each}
+        {:else if $builderStore.inBuilder}
+          <Provider data={{ index: -1, value: {} }} scope={ContextScopes.Local}>
+            <slot />
+          </Provider>
         {/if}
-      </div>
+        <!-- In unbound mode -->
+      {:else if mode == "grid"}
+        <slot />
+      {:else}
+        {#key labelPos + labelWidth}
+          <slot />
+        {/key}
+      {/if}
+
+      {#if grabberPosition}
+        <Grabber {grabberPosition} {resizing} {state} />
+      {/if}
     {/if}
-  {/key}
-{/key}
+  </div>
+{/if}
 
 <style>
   :global(.super-fieldgroup > .component > *) {
diff --git a/src/RepeaterPreview.svelte b/src/RepeaterPreview.svelte
index 84adc5d..aaa5629 100644
--- a/src/RepeaterPreview.svelte
+++ b/src/RepeaterPreview.svelte
@@ -29,8 +29,8 @@
     position: absolute;
     top: 12px;
     right: 12px;
-    width: 24px;
-    height: 24px;
+    width: 16px;
+    height: 16px;
     background-color: lime;
     border-radius: 50%;
     display: grid;
@@ -39,7 +39,7 @@
     z-index: 100;
   }
   .repeater > svg {
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
   }
 </style>
diff --git a/src/TabControl.svelte b/src/TabControl.svelte
index ba64e9f..d3a7973 100644
--- a/src/TabControl.svelte
+++ b/src/TabControl.svelte
@@ -6,20 +6,20 @@
   export let vAlign;
   export let state;
   export let theme;
-  export let tabsQuiet;
   export let tabsSize;
   export let tabsAlignment;
   export let tabsIconsOnly;
   export let tabsEmphasized;
 
   let tabs = [];
+  let innerWidth;
 
   let indicatorLeft, indicatorWidth, indicatorTop, indicatorHeight;
 
   const tabHeights = {
-    S: "2.25rem",
-    M: "2.5rem",
-    L: "3rem",
+    S: "2rem",
+    M: "2.25rem",
+    L: "2.5rem",
   };
   const tabWidths = {
     S: "7.5rem",
@@ -46,11 +46,13 @@
     }
   };
 
+  $: getIndicatorPosition(innerWidth);
   $: setTimeout(() => getIndicatorPosition($$props, tabs), 10);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
+<svelte:window bind:innerWidth />
 {#if containers?.length}
   <div
     class="tabs"
@@ -71,6 +73,8 @@
     style:--tabIndicatorHeight={indicatorHeight}
   >
     {#each containers as container, idx}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         bind:this={tabs[container.id]}
         class="tab"
@@ -102,7 +106,7 @@
     position: relative;
     display: flex;
     gap: 0.85rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
     padding-bottom: 0.5rem;
   }
   .tabs.buttons {
@@ -110,7 +114,7 @@
     display: flex;
     gap: 0rem;
     margin-bottom: 0.5rem;
-    padding-bottom: 0.5ren;
+    padding-bottom: 0.5rem;
   }
 
   .tabs::before {
@@ -178,12 +182,12 @@
     color: var(--spectrum-global-color-gray-600);
     font-weight: 600;
     height: var(--tab-height);
-    width: var(--tab-width);
+    min-width: var(--tab-width);
   }
 
   .tab.button {
     padding: var(--tab-padding);
-    height: 2rem;
+    height: var(--tab-height);
     width: var(--tab-width);
     align-items: center;
     justify-content: var(--tab-alignment);
@@ -219,7 +223,7 @@
   .tab.vertical {
     border: none;
     padding-left: 0.85rem;
-    height: 2.4rem;
+    height: var(--tab-height);
   }
 
   .tab-text {

From 2231903038ef52ac473930a97ed34776bb7ffd12 Mon Sep 17 00:00:00 2001
From: poirazis <poirazis@gmail.com>
Date: Tue, 29 Oct 2024 16:24:36 +0200
Subject: [PATCH 2/2] v1.10.0

---
 package.json          |  14 +-
 schema.json           |  58 ++-------
 src/Component.svelte  | 288 +++++++++++++++---------------------------
 src/TabControl.svelte |  10 +-
 4 files changed, 124 insertions(+), 246 deletions(-)

diff --git a/package.json b/package.json
index 768566a..3706654 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperContainer",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A Multi Layout Data Aware Container Component for Budibase",
   "author": "Michael Poirazi",
   "license": "MIT",
@@ -14,19 +14,19 @@
     "@crownframework/svelte-error-boundary": "^1.0.3",
     "@spectrum-css/opacitycheckerboard": "^1.1.5",
     "@spectrum-css/splitview": "4.0.3",
-    "svelte": "^4.2.18",
+    "svelte": "^4.2.19",
     "svelte-fsm": "^1.2.0"
   },
   "devDependencies": {
-    "@budibase/backend-core": "^2.29.4",
-    "@budibase/shared-core": "^2.29.4",
+    "@budibase/backend-core": "^2.33.5",
+    "@budibase/shared-core": "^2.33.5",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.39",
-    "rollup": "^2.79.1",
+    "postcss": "^8.4.47",
+    "rollup": "^2.79.2",
     "rollup-plugin-copy2": "^0.3.1",
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-postcss": "^4.0.2",
diff --git a/schema.json b/schema.json
index c84f11a..fae62b9 100644
--- a/schema.json
+++ b/schema.json
@@ -10,14 +10,18 @@
     "showEmptyState": true,
     "icon": "SelectIntersect",
     "styles": ["padding", "size", "border", "background"],
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "context": [
       {
         "type": "schema",
-        "scope": "local"
+        "scope": "global"
       },
       {
         "type": "static",
-        "scope": "local",
+        "scope": "global",
         "values": [
           { "key": "value", "label": "value", "type": "object" },
           { "key": "index", "label": "index", "type": "number" }
@@ -156,6 +160,7 @@
             "type": "dataProvider",
             "key": "dataprovider",
             "label": "Data Provider",
+            "resetOn": "bound",
             "dependsOn": { "setting": "bound", "value": "dataprovider" }
           },
           {
@@ -164,20 +169,6 @@
             "label": "Source Array",
             "resetOn": "bound",
             "dependsOn": { "setting": "bound", "value": "array" }
-          },
-          {
-            "type": "boolean",
-            "key": "autorefresh",
-            "label": "Auto Refresh",
-            "resetOn": "bound",
-            "dependsOn": { "setting": "bound", "value": "dataprovider" }
-          },
-          {
-            "type": "number",
-            "key": "autorefreshRate",
-            "label": "Refresh Every",
-            "resetOn": "bound",
-            "dependsOn": "autorefresh"
           }
         ]
       },
@@ -196,7 +187,7 @@
       {
         "section": true,
         "name": "Container Options",
-        "dependsOn": { "setting": "mode", "value": "container" },
+
         "settings": [
           {
             "type": "select",
@@ -264,7 +255,7 @@
                 "barTitle": "Align stretched horizontally"
               }
             ],
-            "defaultValue": "flex-start"
+            "defaultValue": "stretch"
           },
           {
             "type": "select",
@@ -545,37 +536,6 @@
             "label": "On Show"
           }
         ]
-      },
-      {
-        "section": true,
-        "tag": "style",
-        "name": "Borders",
-        "settings": [
-          {
-            "type": "boolean",
-            "key": "borderTop",
-            "label": "Top",
-            "defaultValue": true
-          },
-          {
-            "type": "boolean",
-            "key": "borderRight",
-            "label": "Right",
-            "defaultValue": true
-          },
-          {
-            "type": "boolean",
-            "key": "borderBottom",
-            "label": "Bottom",
-            "defaultValue": true
-          },
-          {
-            "type": "boolean",
-            "key": "borderLeft",
-            "label": "Left",
-            "defaultValue": true
-          }
-        ]
       }
     ]
   }
diff --git a/src/Component.svelte b/src/Component.svelte
index 32754f3..515747e 100644
--- a/src/Component.svelte
+++ b/src/Component.svelte
@@ -1,22 +1,13 @@
 <script>
   import { getContext, onDestroy, onMount, setContext } from "svelte";
   import "@spectrum-css/opacitycheckerboard/dist/index-vars.css";
-  import RepeaterPreview from "./RepeaterPreview.svelte";
   import TabControl from "./TabControl.svelte";
   import Grabber from "./Grabber.svelte";
   import fsm from "svelte-fsm";
-  import { writable } from "svelte/store";
   import CellSkeleton from "./CellSkeleton.svelte";
 
-  const {
-    styleable,
-    builderStore,
-    Provider,
-    ContextScopes,
-    componentStore,
-    screenStore,
-    memo,
-  } = getContext("sdk");
+  const { styleable, builderStore, Provider, memo, ContextScopes } =
+    getContext("sdk");
 
   const component = getContext("component");
 
@@ -27,15 +18,13 @@
   export let dataprovider;
   export let sourceArray;
   export let bound = false;
-  export let hideIfEmpty = false;
-  export let emptyMessage = "No Records Found";
 
   export let flex;
   export let flexFactor = 1;
   export let mode = "container";
   export let childMode = "containerItem";
   export let direction;
-  export let hAlign;
+  export let hAlign = "stretch";
   export let vAlign;
   export let gap;
   export let wrap;
@@ -56,11 +45,6 @@
   export let labelWidth = "6rem";
   export let disabled;
 
-  export let borderTop;
-  export let borderRight;
-  export let borderBottom;
-  export let borderLeft;
-
   // Grid Child Item Options
   export let colSpan = 1;
   export let rowSpan = 1;
@@ -91,10 +75,8 @@
   let cssVariables = {};
   let builderCssVariables = {};
 
-  let scope = ContextScopes.Local;
-
   // The array of slots to be rendered in array repeater mode
-  let slots;
+  let slots = [];
 
   // The State machine that handles the parent role of the super container
   const state = fsm(mode, {
@@ -183,34 +165,8 @@
         childState.activate();
       },
       synchProperties() {
-        this.refresh($builderStore.inBuilder);
+        this.refresh();
         childState.refresh();
-        $component.styles = {
-          ...$component.styles,
-          normal: {
-            ...$component.styles.normal,
-            "border-top-width": borderTop
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "border-right-width": borderRight
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "border-bottom-width": borderBottom
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "border-left-width": borderLeft
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "--random-color": "#" + randomColor,
-            "--spectrum-opacity-checkerboard-square-dark":
-              "var(--spectrum-global-color-gray-200)",
-            "--spectrum-opacity-checkerboard-square-light": bound
-              ? "var(--random-color)"
-              : "var(--spectrum-global-color-gray-75)",
-            "--spectrum-opacity-checkerboard-square-size": "8px",
-            "--spectrum-opacity-checkerboard-position": "left top",
-          },
-        };
         return mode;
       },
     },
@@ -234,6 +190,16 @@
               ? "1"
               : null,
         };
+        builderCssVariables = {
+          "--random-color": "#" + randomColor,
+          "--spectrum-opacity-checkerboard-square-dark":
+            "var(--spectrum-global-color-gray-200)",
+          "--spectrum-opacity-checkerboard-square-light": bound
+            ? "var(--random-color)"
+            : "var(--spectrum-global-color-gray-75)",
+          "--spectrum-opacity-checkerboard-square-size": "8px",
+          "--spectrum-opacity-checkerboard-position": "left top",
+        };
       },
     },
     grid: {
@@ -250,6 +216,8 @@
           "--grid-column-gap": gap + "rem",
           "--grid-row-gap": gap + "rem",
         };
+
+        builderCssVariables = {};
       },
     },
     splitview: {
@@ -295,16 +263,10 @@
       },
       selectTab(tabId) {
         if (tabId == selectedTab) return;
-
-        containers.forEach(({ id, state, title }) => {
-          if (tabId == id) {
-            state.show();
-            onTabChange?.({ tabTitle: title });
-            selectedTab = id;
-          } else {
-            state.hide();
-          }
-        });
+        else {
+          selectedTab = tabId;
+          onTabChange?.({ tabTitle: title });
+        }
       },
     },
     fieldgroup: {
@@ -331,57 +293,9 @@
   const childState = fsm(childMode ?? "containerItem", {
     "*": {
       synch(parentState) {
-        if (parentState == "grid") {
-          return "gridItem";
-        }
-        if (parentState == "tabs") {
-          return "tabItem";
-        }
-        if (parentState == "accordion") return "accordionItem";
-        if (parentState == "splitview") return "splitviewItem";
-        if (parentState == "fieldgroup") return "fieldgroupItem";
         if (!parentState || parentState == "container") {
           return "containerItem";
-        }
-        $component.styles = {
-          ...$component.styles,
-          normal: {
-            ...$component.styles.normal,
-            ...cssVariables,
-            ...childCssVariables,
-            "border-top-width": borderTop
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "border-right-width": borderRight
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "border-bottom-width": borderBottom
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "border-left-width": borderLeft
-              ? $component.styles.normal["border-width"] ?? 0
-              : 0,
-            "--random-color": "#" + randomColor,
-            "--spectrum-opacity-checkerboard-square-dark":
-              "var(--spectrum-global-color-gray-200)",
-            "--spectrum-opacity-checkerboard-square-light": bound
-              ? "var(--random-color)"
-              : "var(--spectrum-global-color-gray-75)",
-            "--spectrum-opacity-checkerboard-square-size": "8px",
-            "--spectrum-opacity-checkerboard-position": "left top",
-          },
-        };
-      },
-      activate() {
-        return "activeTabItem";
-      },
-      deactivate() {
-        return "hidden";
-      },
-    },
-    hidden: {
-      activate() {
-        return "activeTabItem";
+        } else return parentState + "Item";
       },
     },
     disabled: {},
@@ -422,6 +336,12 @@
             "grid-row": "span " + Math.min(rowSpan, $parentGridStore?.gridRows),
             override: "hidden",
           };
+
+          builderCssVariables = inBuilder
+            ? {
+                "background-color": "rgba(10,10,10, 0.15)",
+              }
+            : {};
         } else {
           childCssVariables = {
             "grid-column": "span " + colSpan * 6,
@@ -430,24 +350,20 @@
         }
       },
     },
-    tabItem: {
+    tabsItem: {
       _enter() {
         this.refresh();
       },
+      activate() {
+        return "activeTabsItem";
+      },
     },
-    refresh() {
-      childCssVariables = {
-        flex: "1 0 auto",
-      };
-    },
-    activeTabItem: {
+    activeTabsItem: {
       _enter() {
         this.refresh();
       },
-      refresh() {
-        childCssVariables = {
-          flex: "1 0 auto",
-        };
+      deactivate() {
+        return "tabsItem";
       },
     },
     fieldgroupItem: {
@@ -464,9 +380,15 @@
     },
   });
 
-  let gridStore = new writable({});
-  $: $gridStore = { gridColumns, gridRows };
   $: coords = new Array(gridColumns * gridRows);
+  $: childState.synch($parentState);
+  $: if ($childState == "tabsItem" && $parentGridStore?.selectedTab == id)
+    childState.activate();
+  else if (
+    $childState == "activeTabsItem" &&
+    $parentGridStore?.selectedTab != id
+  )
+    childState.deactivate();
 
   $: randomColor =
     $builderStore.inBuilder && bound
@@ -478,10 +400,11 @@
       "plugin/bb-component-SuperContainer"
     : false;
 
-  $: if (bound == "array") slots = safeParse(sourceArray);
+  $: slots =
+    bound == "array" ? safeParse(sourceArray) : dataprovider?.rows || [0];
 
   // If a Child , keep in sync with parent
-  $: childState.synch($parentState);
+
   $: parentState?.updateContainer(
     id,
     title,
@@ -492,20 +415,18 @@
   );
 
   // Inside Builder specigic code
+  $: inBuilder = $builderStore.inBuilder;
+  $: selected = $component.selected;
   $: {
-    if (
-      $builderStore.inBuilder &&
-      parentState &&
-      $componentStore.selectedComponentPath?.includes($component.id)
-    ) {
+    if (inBuilder && selected && parentState) {
       parentState.selectChild($component.id);
       if (childMode != $parentState + "Item")
         builderStore.actions.updateProp("childMode", $parentState + "Item");
     } else if (
-      $builderStore.inBuilder &&
+      inBuilder &&
+      selected &&
       !parentState &&
-      childMode != "containerItem" &&
-      $componentStore.selectedComponentPath?.includes($component.id)
+      childMode != "containerItem"
     ) {
       builderStore.actions.updateProp("childMode", "containerItem");
     }
@@ -513,18 +434,21 @@
 
   // Update on property changes
   $: state.synchProperties(
+    bound,
     mode,
     childMode,
     hAlign,
     vAlign,
     flex,
     flexFactor,
-    bound,
     direction,
     gap,
     activeTab,
     gridColumns,
-    gridRows
+    gridRows,
+    rowSpan,
+    colSpan,
+    wrap
   );
 
   // Append Compnent Styles
@@ -538,14 +462,30 @@
     },
   };
 
+  $: if (mode == "fieldgroup") {
+    setContext("field-group", labelPos);
+    setContext("field-group-columns", gridColumns);
+    setContext("field-group-label-width", labelWidth);
+    setContext("field-group-disabled", disabled);
+  }
+
   function safeParse(str) {
-    let parsed = [];
+    let parsed;
+
+    if (!str) return [0];
+    if (bound != "array" || !str) return [];
+    if (Array.isArray(str)) return str;
 
     try {
       parsed = JSON.parse(str);
+      if (typeof parsed === "object") {
+        const arrayOfObjects = Object.keys(parsed).map((key) => parsed[key]);
+        return arrayOfObjects;
+      }
     } catch (error) {
-      console.debug(error);
+      parsed = [];
     }
+
     return parsed;
   }
 
@@ -574,23 +514,23 @@
     }
   });
 
+  const params = memo({});
+  $: params.set({
+    gridColumns,
+    gridRows,
+    selectedTab,
+  });
+
   // Expose State to Children
   setContext("superContainer", state);
-  $: if (mode == "grid") setContext("superContainerParams", gridStore);
-
-  $: if (mode == "fieldgroup") {
-    setContext("field-group", labelPos);
-    setContext("field-group-label-width", labelWidth);
-    setContext("field-group-disabled", disabled);
-  }
+  setContext("superContainerParams", params);
 </script>
 
 <svelte:window
   on:mouseup={state.stopResizing}
   on:mousemove={(e) => (resizing ? state.resize(e) : null)}
 />
-
-{#if $childState != "hidden" && $childState != "tabItem"}
+{#if $childState != "tabsItem"}
   <div
     bind:this={container}
     class:super-container={$state == "container"}
@@ -601,7 +541,7 @@
     class:super-fieldgroup={$state == "fieldgroup"}
     class:super-container-item={$childState == "containerItem"}
     class:accordion-item={$childState == "accordionItem"}
-    class:tab-item={$childState == "tabItem" || $childState == "hidden"}
+    class:tab-item={$childState == "activeTabsItem"}
     class:splitview-item={$childState == "splitviewItem"}
     class:super-fieldgroup-item={$childState == "fieldgroupItem"}
     class:nested={$builderStore.inBuilder && nested}
@@ -612,12 +552,10 @@
     {#if skeleton}
       <CellSkeleton>Loading ...</CellSkeleton>
     {:else}
-      {#if mode == "grid" && $builderStore.inBuilder}
+      {#if mode == "grid" && inBuilder}
         <div class="underlay">
           {#each coords as _, idx}
-            <div class="placeholder spectrum-OpacityCheckerboard">
-              {idx}
-            </div>
+            <div class="placeholder" />
           {/each}
         </div>
       {/if}
@@ -639,42 +577,24 @@
         />
       {/if}
 
-      <!-- In Repeater Mode with Data Provider -->
-      {#if bound == "dataprovider" && dataprovider}
-        <RepeaterPreview inBuilder={$builderStore.inBuilder} {mode} />
-        {#if dataprovider?.rows?.length}
-          {#each dataprovider.rows as row}
-            <Provider data={row} {scope}>
-              <slot />
-            </Provider>
-          {/each}
-        {:else if $builderStore.inBuilder}
-          <Provider data={{}} {scope}>
+      {#if bound}
+        {#each slots as row, idx (idx)}
+          <Provider
+            data={bound == "array"
+              ? { value: row, index: idx }
+              : { ...row, index: idx, value: row }}
+            scope={ContextScopes.Local}
+          >
             <slot />
           </Provider>
-        {/if}
-        <!-- In Repeater Mode with Array -->
-      {:else if bound == "array"}
-        {#if slots?.length}
-          {#each slots as row, idx}
-            <Provider
-              data={{ index: idx, value: row }}
-              scope={ContextScopes.Local}
-            >
-              <slot />
-            </Provider>
-          {/each}
-        {:else if $builderStore.inBuilder}
-          <Provider data={{ index: -1, value: {} }} scope={ContextScopes.Local}>
-            <slot />
-          </Provider>
-        {/if}
-        <!-- In unbound mode -->
-      {:else if mode == "grid"}
-        <slot />
+        {/each}
       {:else}
-        {#key labelPos + labelWidth}
-          <slot />
+        {#key labelWidth}
+          {#key labelPos}
+            {#key disabled}
+              <slot />
+            {/key}
+          {/key}
         {/key}
       {/if}
 
@@ -722,7 +642,7 @@
     grid-template-rows: repeat(var(--grid-rows), 1fr);
     column-gap: var(--grid-column-gap);
     row-gap: var(--grid-row-gap);
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--spectrum-global-color-gray-75);
   }
 
   .placeholder {
@@ -730,7 +650,7 @@
     align-items: center;
     justify-content: center;
     color: var(--spectrum-global-color-gray-500);
-    border: 1px solid var(--spectrum-global-color-gray-400);
+    border: 1px dotted var(--spectrum-global-color-gray-400);
   }
 
   .super-fieldgroup {
diff --git a/src/TabControl.svelte b/src/TabControl.svelte
index d3a7973..71307b1 100644
--- a/src/TabControl.svelte
+++ b/src/TabControl.svelte
@@ -52,10 +52,10 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<svelte:window bind:innerWidth />
 {#if containers?.length}
   <div
     class="tabs"
+    bind:clientWidth={innerWidth}
     class:vertical={direction == "column"}
     class:buttons={theme == "buttons"}
     style:justify-content={direction == "row" ? hAlign : vAlign}
@@ -72,7 +72,7 @@
     style:--tabIndicatorTop={indicatorTop}
     style:--tabIndicatorHeight={indicatorHeight}
   >
-    {#each containers as container, idx}
+    {#each containers as container, idx (idx)}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
@@ -106,15 +106,13 @@
     position: relative;
     display: flex;
     gap: 0.85rem;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+    min-height: 2.4rem;
   }
   .tabs.buttons {
     position: relative;
     display: flex;
     gap: 0rem;
-    margin-bottom: 0.5rem;
-    padding-bottom: 0.5rem;
   }
 
   .tabs::before {