Merge pull request #14360 from Budibase/grid-layout-expansion

"Grid" drag and drop layouts

packages/bbui/package.json

@@ -72,6 +72,7 @@
     "@spectrum-css/switch": "1.0.2",
     "@spectrum-css/table": "3.0.1",
     "@spectrum-css/tabs": "3.2.12",
+    "@spectrum-css/tag": "3.0.0",
     "@spectrum-css/tags": "3.0.2",
     "@spectrum-css/textfield": "3.0.1",
     "@spectrum-css/toast": "3.0.1",

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { helpers } from "@budibase/shared-core"
   import { DetailSummary, notifications } from "@budibase/bbui"
   import { componentStore, builderStore } from "stores/builder"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@@ -8,6 +7,7 @@
   import { getComponentForSetting } from "components/design/settings/componentSettings"
   import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
+  import { shouldDisplaySetting } from "@budibase/frontend-core"
 
   export let componentDefinition
   export let componentInstance
@@ -48,7 +48,7 @@
 
     // Filter out settings which shouldn't be rendered
     sections.forEach(section => {
-      section.visible = shouldDisplay(instance, section)
+      section.visible = shouldDisplaySetting(instance, section)
       if (!section.visible) {
         return
       }
@@ -88,46 +88,6 @@
     }
   }
 
-  const shouldDisplay = (instance, setting) => {
-    let dependsOn = setting.dependsOn
-    if (dependsOn && !Array.isArray(dependsOn)) {
-      dependsOn = [dependsOn]
-    }
-    if (!dependsOn?.length) {
-      return true
-    }
-
-    // Ensure all conditions are met
-    return dependsOn.every(condition => {
-      let dependantSetting = condition
-      let dependantValues = null
-      let invert = !!condition.invert
-      if (typeof condition === "object") {
-        dependantSetting = condition.setting
-        dependantValues = condition.value
-      }
-      if (!dependantSetting) {
-        return false
-      }
-
-      // Ensure values is an array
-      if (!Array.isArray(dependantValues)) {
-        dependantValues = [dependantValues]
-      }
-
-      // If inverting, we want to ensure that we don't have any matches.
-      // If not inverting, we want to ensure that we do have any matches.
-      const currentVal = helpers.deepGet(instance, dependantSetting)
-      const anyMatches = dependantValues.some(dependantVal => {
-        if (dependantVal == null) {
-          return currentVal != null && currentVal !== false && currentVal !== ""
-        }
-        return dependantVal === currentVal
-      })
-      return anyMatches !== invert
-    })
-  }
-
   const canRenderControl = (instance, setting, isScreen, includeHidden) => {
     // Prevent rendering on click setting for screens
     if (setting?.type === "event" && isScreen) {
@@ -142,7 +102,7 @@
     if (setting.hidden && !includeHidden) {
       return false
     }
-    return shouldDisplay(instance, setting)
+    return shouldDisplaySetting(instance, setting)
   }
 </script>
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte

@@ -14,11 +14,90 @@
   import sanitizeUrl from "helpers/sanitizeUrl"
   import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
   import { getBindableProperties } from "dataBinding"
+  import BarButtonList from "components/design/settings/controls/BarButtonList.svelte"
 
   $: bindings = getBindableProperties($selectedScreen, null)
+  $: screenSettings = getScreenSettings($selectedScreen)
 
   let errors = {}
 
+  const getScreenSettings = screen => {
+    let settings = [
+      {
+        key: "routing.homeScreen",
+        control: Checkbox,
+        props: {
+          text: "Set as home screen",
+        },
+      },
+      {
+        key: "routing.route",
+        label: "Route",
+        control: Input,
+        parser: val => {
+          if (!val.startsWith("/")) {
+            val = "/" + val
+          }
+          return sanitizeUrl(val)
+        },
+        validate: route => {
+          const existingRoute = screen.routing.route
+          if (route !== existingRoute && routeTaken(route)) {
+            return "That URL is already in use for this role"
+          }
+          return null
+        },
+      },
+      {
+        key: "routing.roleId",
+        label: "Access",
+        control: RoleSelect,
+        validate: role => {
+          const existingRole = screen.routing.roleId
+          if (role !== existingRole && roleTaken(role)) {
+            return "That role is already in use for this URL"
+          }
+          return null
+        },
+      },
+      {
+        key: "onLoad",
+        label: "On screen load",
+        control: ButtonActionEditor,
+      },
+      {
+        key: "width",
+        label: "Width",
+        control: Select,
+        props: {
+          options: ["Extra small", "Small", "Medium", "Large", "Max"],
+          placeholder: "Default",
+          disabled: !!screen.layoutId,
+        },
+      },
+      {
+        key: "props.layout",
+        label: "Layout",
+        defaultValue: "flex",
+        control: BarButtonList,
+        props: {
+          options: [
+            {
+              barIcon: "ModernGridView",
+              value: "flex",
+            },
+            {
+              barIcon: "ViewGrid",
+              value: "grid",
+            },
+          ],
+        },
+      },
+    ]
+
+    return settings
+  }
+
   const routeTaken = url => {
     const roleId = get(selectedScreen).routing.roleId || "BASIC"
     return get(screenStore).screens.some(
@@ -71,61 +150,6 @@
     }
   }
 
-  $: screenSettings = [
-    {
-      key: "routing.homeScreen",
-      control: Checkbox,
-      props: {
-        text: "Set as home screen",
-      },
-    },
-    {
-      key: "routing.route",
-      label: "Route",
-      control: Input,
-      parser: val => {
-        if (!val.startsWith("/")) {
-          val = "/" + val
-        }
-        return sanitizeUrl(val)
-      },
-      validate: route => {
-        const existingRoute = get(selectedScreen).routing.route
-        if (route !== existingRoute && routeTaken(route)) {
-          return "That URL is already in use for this role"
-        }
-        return null
-      },
-    },
-    {
-      key: "routing.roleId",
-      label: "Access",
-      control: RoleSelect,
-      validate: role => {
-        const existingRole = get(selectedScreen).routing.roleId
-        if (role !== existingRole && roleTaken(role)) {
-          return "That role is already in use for this URL"
-        }
-        return null
-      },
-    },
-    {
-      key: "onLoad",
-      label: "On screen load",
-      control: ButtonActionEditor,
-    },
-    {
-      key: "width",
-      label: "Width",
-      control: Select,
-      props: {
-        options: ["Extra small", "Small", "Medium", "Large", "Max"],
-        placeholder: "Default",
-        disabled: !!$selectedScreen.layoutId,
-      },
-    },
-  ]
-
   const removeCustomLayout = async () => {
     return screenStore.removeCustomLayout(get(selectedScreen))
   }
@@ -149,6 +173,7 @@
     value={Helpers.deepGet($selectedScreen, setting.key)}
     onChange={val => setScreenSetting(setting, val)}
     props={{ ...setting.props, error: errors[setting.key] }}
+    defaultValue={setting.defaultValue}
     {bindings}
   />
 {/each}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte

@@ -33,7 +33,7 @@
         {/each}
       </div>
     </div>
-    <Layout gap="S" paddingX="L" paddingY="XL">
+    <Layout gap="XS" paddingX="L" paddingY="XL">
       {#if activeTab === "theme"}
         <ThemePanel />
       {:else}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -144,7 +144,12 @@
       const rootComponent = get(selectedScreen).props
       const component = findComponent(rootComponent, data.id)
       componentStore.copy(component)
-      await componentStore.paste(component)
+      await componentStore.paste(
+        component,
+        data.mode,
+        null,
+        data.selectComponent
+      )
     } else if (type === "preview-loaded") {
       // Wait for this event to show the client library if intelligent
       // loading is supported
@@ -246,13 +251,13 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="component-container">
+<div
+  class="component-container"
+  class:tablet={$previewStore.previewDevice === "tablet"}
+  class:mobile={$previewStore.previewDevice === "mobile"}
+>
   {#if loading}
-    <div
+    <div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
-      class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}
-      class:tablet={$previewStore.previewDevice === "tablet"}
-      class:mobile={$previewStore.previewDevice === "mobile"}
-    >
       <ClientAppSkeleton
         sideNav={$navigationStore?.navigation === "Left"}
         hideFooter
@@ -275,6 +280,7 @@
     src="/app/preview"
     class:hidden={loading || error}
   />
+  <div class="underlay" />
   <div
     class="add-component"
     class:active={isAddingComponent}
@@ -293,34 +299,13 @@
 />
 
 <style>
-  .loading {
-    position: absolute;
-    container-type: inline-size;
-    width: 100%;
-    height: 100%;
-    border: 2px solid transparent;
-    box-sizing: border-box;
-  }
-
-  .loading.tablet {
-    width: calc(1024px + 6px);
-    max-height: calc(768px + 6px);
-  }
-
-  .loading.mobile {
-    width: calc(390px + 6px);
-    max-height: calc(844px + 6px);
-  }
-
   .component-container {
-    grid-row-start: middle;
-    grid-column-start: middle;
     display: grid;
     place-items: center;
     position: relative;
-    overflow: hidden;
     margin: auto;
     height: 100%;
+    --client-padding: 6px;
   }
   .component-container iframe {
     border: 0;
@@ -329,6 +314,33 @@
     width: 100%;
     background-color: transparent;
   }
+
+  .loading,
+  .underlay {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: calc(100% - var(--client-padding) * 2);
+    height: calc(100% - var(--client-padding) * 2);
+  }
+  .tablet .loading,
+  .tablet .underlay {
+    max-width: 1024px;
+    max-height: 768px;
+  }
+  .mobile .loading,
+  .mobile .underlay {
+    max-width: 390px;
+    max-height: 844px;
+  }
+
+  .underlay {
+    background: var(--spectrum-global-color-gray-200);
+    z-index: -1;
+    padding: 2px;
+  }
+
   .center {
     position: absolute;
     width: 100%;

packages/builder/src/stores/builder/components.js

@@ -574,15 +574,26 @@ export class ComponentStore extends BudiStore {
       return
     }
 
-    // Determine the next component to select after deletion
+    // Determine the next component to select, and select it before deletion
+    // to avoid an intermediate state of no component selection
     const state = get(this.store)
-    let nextSelectedComponentId
+    let nextId
     if (state.selectedComponentId === component._id) {
-      nextSelectedComponentId = this.getNext()
+      nextId = this.getNext()
-      if (!nextSelectedComponentId) {
+      if (!nextId) {
-        nextSelectedComponentId = this.getPrevious()
+        nextId = this.getPrevious()
       }
     }
+    if (nextId) {
+      // If this is the nav, select the screen instead
+      if (nextId.endsWith("-navigation")) {
+        nextId = nextId.replace("-navigation", "-screen")
+      }
+      this.update(state => {
+        state.selectedComponentId = nextId
+        return state
+      })
+    }
 
     // Patch screen
     await screenStore.patch(screen => {
@@ -601,14 +612,6 @@ export class ComponentStore extends BudiStore {
         child => child._id !== component._id
       )
     })
-
-    // Update selected component if required
-    if (nextSelectedComponentId) {
-      this.update(state => {
-        state.selectedComponentId = nextSelectedComponentId
-        return state
-      })
-    }
   }
 
   copy(component, cut = false, selectParent = true) {
@@ -616,6 +619,7 @@ export class ComponentStore extends BudiStore {
     this.update(state => {
       state.componentToPaste = cloneDeep(component)
       state.componentToPaste.isCut = cut
+      state.componentToPaste.screenId = get(screenStore).selectedScreenId
       return state
     })
 
@@ -650,7 +654,7 @@ export class ComponentStore extends BudiStore {
    * @param {object} targetScreen
    * @returns
    */
-  async paste(targetComponent, mode, targetScreen) {
+  async paste(targetComponent, mode, targetScreen, selectComponent = true) {
     const state = get(this.store)
     if (!state.componentToPaste) {
       return
@@ -674,8 +678,10 @@ export class ComponentStore extends BudiStore {
         return false
       }
       const cut = componentToPaste.isCut
+      const sourceScreenId = componentToPaste.screenId
       const originalId = componentToPaste._id
       delete componentToPaste.isCut
+      delete componentToPaste.screenId
 
       // Make new component unique if copying
       if (!cut) {
@@ -683,6 +689,19 @@ export class ComponentStore extends BudiStore {
       }
       newComponentId = componentToPaste._id
 
+      // Strip grid position metadata if pasting into a new screen, but keep
+      // alignment metadata
+      if (sourceScreenId && sourceScreenId !== screen._id) {
+        for (let style of Object.keys(componentToPaste._styles?.normal || {})) {
+          if (
+            style.startsWith("--grid") &&
+            (style.endsWith("-start") || style.endsWith("-end"))
+          ) {
+            delete componentToPaste._styles.normal[style]
+          }
+        }
+      }
+
       // Delete old component if cutting
       if (cut) {
         const parent = findComponentParent(screen.props, originalId)
@@ -725,12 +744,13 @@ export class ComponentStore extends BudiStore {
     await screenStore.patch(patch, targetScreenId)
 
     // Select the new component
-    this.update(state => {
+    if (selectComponent) {
-      state.selectedScreenId = targetScreenId
+      this.update(state => {
-      state.selectedComponentId = newComponentId
+        state.selectedScreenId = targetScreenId
-
+        state.selectedComponentId = newComponentId
-      return state
+        return state
-    })
+      })
+    }
 
     componentTreeNodesStore.makeNodeVisible(newComponentId)
   }

packages/builder/src/templates/Component.js

@@ -54,4 +54,28 @@ export class Component extends BaseStructure {
   getId() {
     return this._json._id
   }
+
+  gridDesktopColSpan(start, end) {
+    this._json._styles.normal["--grid-desktop-col-start"] = start
+    this._json._styles.normal["--grid-desktop-col-end"] = end
+    return this
+  }
+
+  gridDesktopRowSpan(start, end) {
+    this._json._styles.normal["--grid-desktop-row-start"] = start
+    this._json._styles.normal["--grid-desktop-row-end"] = end
+    return this
+  }
+
+  gridMobileColSpan(start, end) {
+    this._json._styles.normal["--grid-mobile-col-start"] = start
+    this._json._styles.normal["--grid-mobile-col-end"] = end
+    return this
+  }
+
+  gridMobileRowSpan(start, end) {
+    this._json._styles.normal["--grid-mobile-row-start"] = start
+    this._json._styles.normal["--grid-mobile-row-end"] = end
+    return this
+  }
 }

packages/builder/src/templates/screenTemplating/Screen.js

@@ -18,6 +18,7 @@ export class Screen extends BaseStructure {
         },
         _children: [],
         _instanceName: "",
+        layout: "flex",
         direction: "column",
         hAlign: "stretch",
         vAlign: "top",

packages/builder/src/templates/screenTemplating/blank.js

@@ -8,6 +8,7 @@ const blank = ({ route, screens }) => {
 
   const template = new Screen()
     .instanceName("Blank screen")
+    .customProps({ layout: "grid" })
     .role(Roles.BASIC)
     .route(validRoute)
     .json()

packages/builder/src/templates/screenTemplating/table/inline.js

@@ -9,16 +9,21 @@ const inline = ({ tableOrView, permissions, screens }) => {
     .customProps({
       text: tableOrView.name,
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const tableBlock = new Component("@budibase/standard-components/gridblock")
     .instanceName(`${tableOrView.name} - Table`)
     .customProps({
       table: tableOrView.datasourceSelectFormat,
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const screenTemplate = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
     .addChild(heading)

packages/builder/src/templates/screenTemplating/table/modal.js

@@ -33,26 +33,22 @@ const modal = ({ tableOrView, permissions, screens }) => {
     type: "cta",
   })
 
-  buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
+  buttonGroup
-    hAlign: "right",
+    .instanceName(`${tableOrView.name} - Create`)
-    buttons: [createButton.json()],
-  })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
     .customProps({
-      direction: "row",
+      hAlign: "right",
-      hAlign: "stretch",
+      buttons: [createButton.json()],
     })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
+    .gridDesktopColSpan(1, 7)
-  tableHeader.addChild(heading)
+    .gridDesktopRowSpan(1, 3)
-  tableHeader.addChild(buttonGroup)
 
   const createFormBlock = new Component(
     "@budibase/standard-components/formblock"
@@ -134,13 +130,17 @@ const modal = ({ tableOrView, permissions, screens }) => {
       ],
     })
     .instanceName(`${tableOrView.name} - Table`)
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List and details`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
+    .addChild(buttonGroup)
+    .addChild(heading)
     .addChild(tableBlock)
     .addChild(createRowModal)
     .addChild(detailsModal)

packages/builder/src/templates/screenTemplating/table/newScreen.js

@@ -11,36 +11,41 @@ const getTableScreenTemplate = ({
   createScreenRoute,
   tableOrView,
   permissions,
+  gridLayout,
 }) => {
-  const newButton = new Component("@budibase/standard-components/button")
+  const buttonGroup = new Component("@budibase/standard-components/buttongroup")
-    .instanceName("New button")
+  const createButton = new Component("@budibase/standard-components/button")
-    .customProps({
+
-      text: "Create row",
+  createButton.customProps({
-      onClick: [
+    onClick: [
-        {
+      {
-          "##eventHandlerType": "Navigate To",
+        "##eventHandlerType": "Navigate To",
-          parameters: {
+        parameters: {
-            type: "url",
+          type: "url",
-            url: createScreenRoute,
+          url: createScreenRoute,
-          },
         },
-      ],
+      },
+    ],
+    text: "Create row",
+    type: "cta",
+  })
+
+  buttonGroup
+    .instanceName(`${tableOrView.name} - Create`)
+    .customProps({
+      hAlign: "right",
+      buttons: [createButton.json()],
     })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
+    .gridDesktopColSpan(1, 7)
-  const tableHeader = new Component("@budibase/standard-components/container")
+    .gridDesktopRowSpan(1, 3)
-    .instanceName("Heading container")
-    .customProps({
-      direction: "row",
-      hAlign: "stretch",
-    })
-    .addChild(heading)
-    .addChild(newButton)
 
   const updateScreenRouteSegments = updateScreenRoute.split(":id")
   if (updateScreenRouteSegments.length !== 2) {
@@ -67,14 +72,18 @@ const getTableScreenTemplate = ({
         },
       ],
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(route)
     .instanceName(`${tableOrView.name} - List`)
+    .customProps({ layout: gridLayout ? "grid" : "flex" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
     .addChild(tableBlock)
+    .addChild(heading)
+    .addChild(buttonGroup)
     .json()
 
   return {
@@ -300,6 +309,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     createScreenRoute,
     permissions,
     tableOrView,
+    gridLayout: true,
   })
 
   const updateScreenTemplate = getUpdateScreenTemplate({
@@ -307,6 +317,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     tableScreenRoute,
     tableOrView,
     permissions,
+    gridLayout: false,
   })
 
   const createScreenTemplate = getCreateScreenTemplate({
@@ -314,6 +325,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     tableScreenRoute,
     tableOrView,
     permissions,
+    gridLayout: false,
   })
 
   return [tableScreenTemplate, updateScreenTemplate, createScreenTemplate]

packages/builder/src/templates/screenTemplating/table/sidePanel.js

@@ -31,26 +31,22 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
     type: "cta",
   })
 
-  buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
+  buttonGroup
-    hAlign: "right",
+    .instanceName(`${tableOrView.name} - Create`)
-    buttons: [createButton.json()],
-  })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
     .customProps({
-      direction: "row",
+      hAlign: "right",
-      hAlign: "stretch",
+      buttons: [createButton.json()],
     })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
+    .gridDesktopColSpan(1, 7)
-  tableHeader.addChild(heading)
+    .gridDesktopRowSpan(1, 3)
-  tableHeader.addChild(buttonGroup)
 
   const createFormBlock = new Component(
     "@budibase/standard-components/formblock"
@@ -130,13 +126,17 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
       ],
     })
     .instanceName(`${tableOrView.name} - Table`)
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List and details`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
+    .addChild(heading)
+    .addChild(buttonGroup)
     .addChild(tableBlock)
     .addChild(createRowSidePanel)
     .addChild(detailsSidePanel)

packages/client/manifest.json

@@ -18,14 +18,37 @@
     "numberLike": {
       "supported": ["number", "boolean"],
       "partialSupport": [
-        { "type": "longform", "message": "stringAsNumber" },
+        {
-        { "type": "string", "message": "stringAsNumber" },
+          "type": "longform",
-        { "type": "bigint", "message": "stringAsNumber" },
+          "message": "stringAsNumber"
-        { "type": "options", "message": "stringAsNumber" },
+        },
-        { "type": "formula", "message": "stringAsNumber" },
+        {
-        { "type": "datetime", "message": "dateAsNumber" }
+          "type": "string",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "bigint",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "options",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "formula",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "datetime",
+          "message": "dateAsNumber"
+        }
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     },
     "stringLike": {
       "supported": [
@@ -37,19 +60,47 @@
         "boolean",
         "datetime"
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     },
     "datetimeLike": {
       "supported": ["datetime"],
       "partialSupport": [
-        { "type": "longform", "message": "stringAsDate" },
+        {
-        { "type": "string", "message": "stringAsDate" },
+          "type": "longform",
-        { "type": "options", "message": "stringAsDate" },
+          "message": "stringAsDate"
-        { "type": "formula", "message": "stringAsDate" },
+        },
-        { "type": "bigint", "message": "stringAsDate" },
+        {
-        { "type": "number", "message": "numberAsDate" }
+          "type": "string",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "options",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "formula",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "bigint",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "number",
+          "message": "numberAsDate"
+        }
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     }
   },
   "layout": {
@@ -114,11 +165,37 @@
     "icon": "Selection",
     "hasChildren": true,
     "size": {
-      "width": 400,
+      "width": 500,
       "height": 200
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "layout",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "Flex",
+            "value": "flex",
+            "barIcon": "ModernGridView",
+            "barTitle": "Flex layout"
+          },
+          {
+            "label": "Grid",
+            "value": "grid",
+            "barIcon": "ViewGrid",
+            "barTitle": "Grid layout"
+          }
+        ],
+        "defaultValue": "grid"
+      },
       {
         "type": "select",
         "label": "Direction",
@@ -139,7 +216,12 @@
             "barTitle": "Row layout"
           }
         ],
-        "defaultValue": "column"
+        "defaultValue": "column",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -173,7 +255,12 @@
             "barTitle": "Align stretched horizontally"
           }
         ],
-        "defaultValue": "stretch"
+        "defaultValue": "stretch",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -207,7 +294,12 @@
             "barTitle": "Align stretched vertically"
           }
         ],
-        "defaultValue": "top"
+        "defaultValue": "top",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -229,7 +321,12 @@
             "barTitle": "Grow container"
           }
         ],
-        "defaultValue": "shrink"
+        "defaultValue": "shrink",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -255,7 +352,12 @@
             "value": "L"
           }
         ],
-        "defaultValue": "M"
+        "defaultValue": "M",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "boolean",
@@ -263,7 +365,12 @@
         "key": "wrap",
         "showInBar": true,
         "barIcon": "ModernGridView",
-        "barTitle": "Wrap"
+        "barTitle": "Wrap",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "event",
@@ -280,8 +387,12 @@
     "illegalChildren": ["section"],
     "showEmptyState": false,
     "size": {
-      "width": 400,
+      "width": 600,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -302,6 +413,14 @@
     "name": "Button group",
     "icon": "Button",
     "hasChildren": false,
+    "size": {
+      "width": 200,
+      "height": 60
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "section": true,
@@ -484,9 +603,13 @@
     "icon": "Button",
     "editable": true,
     "size": {
-      "width": 105,
+      "width": 120,
       "height": 32
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
@@ -648,8 +771,12 @@
     "illegalChildren": ["section"],
     "hasChildren": true,
     "size": {
-      "width": 400,
+      "width": 500,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -1143,6 +1270,10 @@
       "width": 100,
       "height": 25
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
@@ -1220,6 +1351,7 @@
     "icon": "Images",
     "hasChildren": true,
     "styles": ["size"],
+    "showEmptyState": false,
     "size": {
       "width": 400,
       "height": 300
@@ -1285,6 +1417,10 @@
       "width": 25,
       "height": 25
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "icon",
@@ -1598,6 +1734,10 @@
       "width": 260,
       "height": 143
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
@@ -1631,6 +1771,10 @@
       "width": 400,
       "height": 100
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "text",
@@ -1647,7 +1791,11 @@
     "icon": "GraphBarVertical",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -1816,7 +1964,11 @@
     "icon": "GraphTrend",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -1980,7 +2132,11 @@
     "icon": "GraphAreaStacked",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2156,7 +2312,11 @@
     "icon": "GraphPie",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2296,7 +2456,11 @@
     "icon": "GraphDonut",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2436,7 +2600,11 @@
     "icon": "GraphBarVerticalStacked",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2553,7 +2721,11 @@
     "icon": "Histogram",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2704,11 +2876,15 @@
       "UpdateFieldValue",
       "ScrollTo"
     ],
-    "styles": ["size"],
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "size": {
       "width": 400,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "select",
@@ -2864,7 +3040,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 32
+      "height": 60
     },
     "settings": [
       {
@@ -2895,7 +3071,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 32
+      "height": 60
     },
     "settings": [
       {
@@ -3031,7 +3207,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3133,7 +3309,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3219,7 +3395,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3305,7 +3481,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3519,7 +3695,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3725,8 +3901,8 @@
     "editable": true,
     "requiredAncestors": ["form"],
     "size": {
-      "width": 20,
+      "width": 400,
-      "height": 20
+      "height": 60
     },
     "settings": [
       {
@@ -3852,7 +4028,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 150
+      "height": 100
     },
     "settings": [
       {
@@ -3976,7 +4152,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -4094,7 +4270,7 @@
     "styles": ["size"],
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -4167,7 +4343,10 @@
             "label": "High",
             "value": 3136
           },
-          { "label": "Custom", "value": "custom" }
+          {
+            "label": "Custom",
+            "value": "custom"
+          }
         ]
       },
       {
@@ -4251,7 +4430,7 @@
     "styles": ["size"],
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -4303,6 +4482,10 @@
       "width": 400,
       "height": 320
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -4602,7 +4785,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -4872,8 +5055,12 @@
     "hasChildren": true,
     "actions": ["RefreshDatasource"],
     "size": {
-      "width": 400,
+      "width": 500,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -5126,6 +5313,10 @@
       "width": 300,
       "height": 120
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
@@ -5190,6 +5381,10 @@
       "width": 100,
       "height": 35
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -5236,6 +5431,14 @@
     "name": "Chart Block",
     "icon": "GraphPie",
     "hasChildren": false,
+    "size": {
+      "width": 600,
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "select",
@@ -6159,6 +6362,10 @@
       "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "text",
@@ -6368,8 +6575,12 @@
     "illegalChildren": ["section", "rowexplorer"],
     "hasChildren": true,
     "size": {
-      "width": 400,
+      "width": 500,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -6624,6 +6835,10 @@
       "width": 400,
       "height": 100
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
+    },
     "settings": [
       {
         "type": "text",
@@ -6640,10 +6855,14 @@
     "hasChildren": false,
     "ejectable": false,
     "size": {
-      "width": 400,
+      "width": 600,
       "height": 400
     },
-    "styles": ["size"],
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
+    },
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
       {
         "type": "table",
@@ -6827,13 +7046,17 @@
   "formblock": {
     "name": "Form Block",
     "icon": "Form",
-    "styles": ["size"],
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "block": true,
     "info": "Form blocks are only compatible with internal or SQL tables",
     "size": {
-      "width": 400,
+      "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
+    },
     "settings": [
       {
         "type": "table",
@@ -6983,6 +7206,7 @@
     "name": "Side Panel",
     "icon": "RailRight",
     "hasChildren": true,
+    "ignoresLayout": true,
     "illegalChildren": ["section", "sidepanel", "modal"],
     "showEmptyState": false,
     "draggable": false,
@@ -7006,6 +7230,7 @@
     "icon": "MBox",
     "hasChildren": true,
     "illegalChildren": ["section", "modal", "sidepanel"],
+    "ignoresLayout": true,
     "showEmptyState": false,
     "draggable": false,
     "info": "Modals are hidden by default. They will only be revealed when triggered by the 'Open Modal' action.",
@@ -7052,8 +7277,12 @@
     "name": "Row Explorer Block",
     "icon": "PersonalizationField",
     "size": {
-      "width": 600,
+      "width": 800,
-      "height": 400
+      "height": 426
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -7167,23 +7396,6 @@
       "scope": "local"
     }
   },
-  "grid": {
-    "name": "Grid",
-    "icon": "ViewGrid",
-    "hasChildren": true,
-    "settings": [
-      {
-        "type": "number",
-        "key": "cols",
-        "label": "Columns"
-      },
-      {
-        "type": "number",
-        "key": "rows",
-        "label": "Rows"
-      }
-    ]
-  },
   "gridblock": {
     "name": "Table",
     "icon": "Table",
@@ -7192,6 +7404,10 @@
       "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "dataSource",

packages/client/src/components/ClientApp.svelte

@@ -235,9 +235,6 @@
                               />
                             {/key}
 
-                            <!-- Modal container to ensure they sit on top -->
-                            <div class="modal-container" />
-
                             <!-- Layers on top of app -->
                             <NotificationDisplay />
                             <ConfirmationDisplay />
@@ -284,7 +281,7 @@
     visibility: hidden;
     padding: 0;
     margin: 0;
-    overflow: hidden;
+    overflow: clip;
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -301,7 +298,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    overflow: hidden;
+    overflow: clip;
     background-color: transparent;
   }
 
@@ -311,7 +308,7 @@
   }
 
   #app-root {
-    overflow: hidden;
+    overflow: clip;
     height: 100%;
     width: 100%;
     display: flex;
@@ -327,6 +324,7 @@
     justify-content: flex-start;
     align-items: stretch;
     overflow: hidden;
+    position: relative;
   }
 
   .error {
@@ -356,22 +354,16 @@
   }
 
   /* Preview styles */
-  /* The additional 6px of size is to account for 4px padding and 2px border */
   #clip-root.preview {
-    padding: 2px;
+    padding: 6px;
   }
   #clip-root.tablet-preview {
-    width: calc(1024px + 6px);
+    width: calc(1024px + 12px);
-    height: calc(768px + 6px);
+    height: calc(768px + 12px);
   }
   #clip-root.mobile-preview {
-    width: calc(390px + 6px);
+    width: calc(390px + 12px);
-    height: calc(844px + 6px);
+    height: calc(844px + 12px);
-  }
-
-  .preview #app-root {
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
   }
 
   /* Print styles */

packages/client/src/components/Component.svelte

@@ -39,8 +39,10 @@
     getActionContextKey,
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
+  import { gridLayout } from "utils/grid.js"
 
   export let instance = {}
+  export let parent = null
   export let isLayout = false
   export let isRoot = false
   export let isBlock = false
@@ -102,8 +104,8 @@
   let settingsDefinitionMap
   let missingRequiredSettings = false
 
-  // Temporary styles which can be added in the app preview for things like DND.
+  // Temporary styles which can be added in the app preview for things like
-  // We clear these whenever a new instance is received.
+  // DND. We clear these whenever a new instance is received.
   let ephemeralStyles
 
   // Single string of all HBS blocks, used to check if we use a certain binding
@@ -193,19 +195,37 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
+  // Themes
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
 
+  // Apply ephemeral styles (such as when resizing grid components)
+  $: normalStyles = {
+    ...instance._styles?.normal,
+    ...ephemeralStyles,
+  }
+
+  // Metadata to pass into grid action to apply CSS
+  const insideGrid =
+    parent?._component.endsWith("/container") && parent?.layout === "grid"
+  $: gridMetadata = {
+    insideGrid,
+    ignoresLayout: definition?.ignoresLayout === true,
+    id,
+    interactive,
+    styles: normalStyles,
+    draggable,
+    definition,
+    errored: errorState,
+  }
+
   // Update component context
   $: store.set({
     id,
     children: children.length,
     styles: {
       ...instance._styles,
-      normal: {
+      normal: normalStyles,
-        ...instance._styles?.normal,
-        ...ephemeralStyles,
-      },
       custom: customCSS,
       id,
       empty: emptyState,
@@ -242,6 +262,9 @@
       lastInstanceKey = instanceKey
     }
 
+    // Reset ephemeral state
+    ephemeralStyles = null
+
     // Pull definition and constructor
     const component = instance._component
     constructor = componentStore.actions.getComponentConstructor(component)
@@ -561,19 +584,22 @@
     }
   }
 
-  const scrollIntoView = () => {
+  const scrollIntoView = async () => {
-    // Don't scroll into view if we selected this component because we were
+    const className = insideGrid ? id : `${id}-dom`
-    // starting dragging on it
+    const node = document.getElementsByClassName(className)[0]
-    if (get(dndIsDragging)) {
-      return
-    }
-    const node = document.getElementsByClassName(id)?.[0]?.children[0]
     if (!node) {
       return
     }
-    node.style.scrollMargin = "100px"
+    // Don't scroll into view if we selected this component because we were
+    // starting dragging on it
+    if (
+      get(dndIsDragging) ||
+      (insideGrid && node.classList.contains("dragging"))
+    ) {
+      return
+    }
     node.scrollIntoView({
-      behavior: "smooth",
+      behavior: "instant",
       block: "nearest",
       inline: "start",
     })
@@ -650,6 +676,7 @@
     data-name={name}
     data-icon={icon}
     data-parent={$component.id}
+    use:gridLayout={gridMetadata}
   >
     {#if errorState}
       <ComponentErrorState
@@ -660,7 +687,7 @@
       <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
         {#if children.length}
           {#each children as child (child._id)}
-            <svelte:self instance={child} />
+            <svelte:self instance={child} parent={instance} />
           {/each}
         {:else if emptyState}
           {#if isRoot}
@@ -687,7 +714,7 @@
     border-radius: 4px !important;
     transition: padding 260ms ease-out, border 260ms ease-out;
   }
-  .interactive :global(*) {
+  .interactive {
-    cursor: default;
+    cursor: default !important;
   }
 </style>

packages/client/src/components/Router.svelte

@@ -71,4 +71,7 @@
   div {
     position: relative;
   }
+  div :global(> .component > *) {
+    flex: 1 1 auto;
+  }
 </style>

packages/client/src/components/Screen.svelte

@@ -13,8 +13,9 @@
   const onLoadActions = memo()
 
   // Get the screen definition for the current route
-  $: screenDefinition = $screenStore.activeScreen?.props
+  $: screen = $screenStore.activeScreen
-  $: onLoadActions.set($screenStore.activeScreen?.onLoad)
+  $: screenDefinition = { ...screen?.props, addEmptyRows: true }
+  $: onLoadActions.set(screen?.onLoad)
   $: runOnLoadActions($onLoadActions, params)
 
   // Enrich and execute any on load actions.

packages/client/src/components/app/BackgroundImage.svelte

@@ -1,8 +1,7 @@
 <script>
   import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable, builderStore } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   export let url
@@ -19,20 +18,11 @@
   }
 </script>
 
-{#if url}
+<div class="outer" use:styleable={$component.styles}>
-  <div class="outer" use:styleable={$component.styles}>
+  <div class="inner" {style}>
-    <div class="inner" {style}>
+    <slot />
-      <slot />
-    </div>
   </div>
-{:else if $builderStore.inBuilder}
+</div>
-  <div
-    class="placeholder"
-    use:styleable={{ ...$component.styles, empty: true }}
-  >
-    <Placeholder />
-  </div>
-{/if}
 
 <style>
   .outer {
@@ -49,9 +39,4 @@
     background-size: cover;
     background-position: center center;
   }
-
-  .placeholder {
-    display: grid;
-    place-items: center;
-  }
 </style>

packages/client/src/components/app/ButtonGroup.svelte

@@ -19,6 +19,11 @@
       gap,
       wrap: true,
     }}
+    styles={{
+      normal: {
+        height: "100%",
+      },
+    }}
   >
     {#each buttons as { text, type, quiet, disabled, onClick, size, icon, gap }}
       <BlockComponent

packages/client/src/components/app/Grid.svelte

@@ -1,102 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const component = getContext("component")
-  const { styleable, builderStore } = getContext("sdk")
-
-  export let cols = 12
-  export let rows = 12
-
-  // Deliberately non-reactive as we want this fixed whenever the grid renders
-  const defaultColSpan = Math.ceil((cols + 1) / 2)
-  const defaultRowSpan = Math.ceil((rows + 1) / 2)
-
-  $: coords = generateCoords(rows, cols)
-
-  const generateCoords = (rows, cols) => {
-    let grid = []
-    for (let row = 0; row < rows; row++) {
-      for (let col = 0; col < cols; col++) {
-        grid.push({ row, col })
-      }
-    }
-    return grid
-  }
-</script>
-
-<div
-  class="grid"
-  use:styleable={{
-    ...$component.styles,
-    normal: {
-      ...$component.styles?.normal,
-      "--cols": cols,
-      "--rows": rows,
-      "--default-col-span": defaultColSpan,
-      "--default-row-span": defaultRowSpan,
-      gap: "0 !important",
-    },
-  }}
-  data-rows={rows}
-  data-cols={cols}
->
-  {#if $builderStore.inBuilder}
-    <div class="underlay">
-      {#each coords as _}
-        <div class="placeholder" />
-      {/each}
-    </div>
-  {/if}
-  <slot />
-</div>
-
-<style>
-  /*
-    Ensure all children of containers which are top level children of
-    grids do not overflow
-  */
-  :global(.grid > .component > .valid-container > .component > *) {
-    max-height: 100%;
-    max-width: 100%;
-  }
-
-  /* Ensure all top level children have some grid styles set */
-  :global(.grid > .component > *) {
-    overflow: hidden;
-    width: auto;
-    height: auto;
-    grid-column-start: 1;
-    grid-column-end: var(--default-col-span);
-    grid-row-start: 1;
-    grid-row-end: var(--default-row-span);
-    max-height: 100%;
-    max-width: 100%;
-  }
-
-  .grid {
-    position: relative;
-    height: 400px;
-  }
-  .grid,
-  .underlay {
-    display: grid;
-    grid-template-rows: repeat(var(--rows), 1fr);
-    grid-template-columns: repeat(var(--cols), 1fr);
-  }
-  .underlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    grid-gap: 2px;
-    background-color: var(--spectrum-global-color-gray-200);
-    border: 2px solid var(--spectrum-global-color-gray-200);
-  }
-  .underlay {
-    z-index: -1;
-  }
-  .placeholder {
-    background-color: var(--spectrum-global-color-gray-100);
-  }
-</style>

packages/client/src/components/app/GridBlock.svelte

@@ -198,7 +198,7 @@
     overflow: hidden;
     height: 410px;
   }
-  div.in-builder :global(*) {
+  div.in-builder :global(> *) {
-    pointer-events: none;
+    pointer-events: none !important;
   }
 </style>

packages/client/src/components/app/Layout.svelte

@@ -36,7 +36,6 @@
   export let logoLinkUrl
   export let openLogoLinkInNewTab
   export let textAlign
-
   export let embedded = false
 
   const NavigationClasses = {
@@ -339,6 +338,7 @@
       />
     </div>
   </div>
+  <div class="modal-container" />
 </div>
 
 <style>
@@ -353,6 +353,9 @@
     z-index: 1;
     overflow: hidden;
     position: relative;
+
+    /* Deliberately unitless as we need to do unitless calculations in grids */
+    --grid-spacing: 4;
   }
   .component {
     display: contents;
@@ -415,7 +418,6 @@
     color: var(--navTextColor);
     opacity: 1;
   }
-
   .nav :global(h1) {
     color: var(--navTextColor);
   }
@@ -481,9 +483,10 @@
     position: relative;
     padding: 32px;
   }
-  .main.size--max {
+  .main:not(.size--max):has(.screenslot-dom > .component > .grid) {
-    padding: 0;
+    padding: calc(32px - var(--grid-spacing) * 2px);
   }
+
   .layout--none .main {
     padding: 0;
   }
@@ -502,6 +505,9 @@
   .size--max {
     width: 100%;
   }
+  .main.size--max {
+    padding: 0;
+  }
 
   /*  Nav components */
   .burger {
@@ -613,6 +619,10 @@
   .mobile:not(.layout--none) .main {
     padding: 16px;
   }
+  .mobile:not(.layout--none)
+    .main:not(.size--max):has(.screenslot-dom > .component > .grid) {
+    padding: 6px;
+  }
   .mobile .main.size--max {
     padding: 0;
   }

packages/client/src/components/app/Repeater.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
-  import Container from "./Container.svelte"
+  import Container from "./container/Container.svelte"
 
   const { Provider, ContextScopes } = getContext("sdk")
   const component = getContext("component")

packages/client/src/components/app/Tag.svelte

@@ -57,4 +57,7 @@
   .spectrum-Tag--sizeL {
     padding: 0 var(--spectrum-global-dimension-size-150);
   }
+  .spectrum-Tag-label {
+    height: auto;
+  }
 </style>

packages/client/src/components/app/container/Container.svelte

@@ -0,0 +1,12 @@
+<script>
+  import GridContainer from "./GridContainer.svelte"
+  import FlexContainer from "./FlexContainer.svelte"
+
+  export let layout = "flex"
+
+  $: component = layout === "grid" ? GridContainer : FlexContainer
+</script>
+
+<svelte:component this={component} {...$$props}>
+  <slot />
+</svelte:component>

packages/client/src/components/app/container/FlexContainer.svelte

@@ -12,7 +12,7 @@
   export let wrap
   export let onClick
 
-  $: directionClass = direction ? `valid-container direction-${direction}` : ""
+  $: directionClass = direction ? `flex-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
   $: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
   $: sizeClass = size ? `size-${size}` : ""
@@ -39,11 +39,11 @@
 </div>
 
 <style>
-  .valid-container {
+  .flex-container {
     display: flex;
     max-width: 100%;
   }
-  .valid-container :global(.component > *) {
+  .flex-container :global(.component > *) {
     max-width: 100%;
   }
   .direction-row {

packages/client/src/components/app/container/GridContainer.svelte

@@ -0,0 +1,264 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import { writable } from "svelte/store"
+  import { GridRowHeight, GridColumns } from "constants"
+  import { memo } from "@budibase/frontend-core"
+
+  export let addEmptyRows = false
+
+  const component = getContext("component")
+  const { styleable, builderStore } = getContext("sdk")
+  const context = getContext("context")
+
+  let width
+  let height
+  let ref
+  let children = writable({})
+  let mounted = false
+  let styles = memo({})
+
+  $: inBuilder = $builderStore.inBuilder
+  $: requiredRows = calculateRequiredRows(
+    $children,
+    mobile,
+    addEmptyRows && inBuilder
+  )
+  $: requiredHeight = requiredRows * GridRowHeight
+  $: availableRows = Math.floor(height / GridRowHeight)
+  $: rows = Math.max(requiredRows, availableRows)
+  $: mobile = $context.device.mobile
+  $: empty = $component.empty
+  $: colSize = width / GridColumns
+  $: styles.set({
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      "--height": `${requiredHeight}px`,
+      "--min-height": $component.styles?.normal?.height || 0,
+      "--cols": GridColumns,
+      "--rows": rows,
+      "--col-size": colSize,
+      "--row-size": GridRowHeight,
+    },
+    empty: false,
+  })
+
+  // Calculates the minimum number of rows required to render all child
+  // components, on a certain device type
+  const calculateRequiredRows = (children, mobile, addEmptyRows) => {
+    const key = mobile ? "mobileRowEnd" : "desktopRowEnd"
+    let max = 2
+    for (let id of Object.keys(children)) {
+      if (children[id][key] > max) {
+        max = children[id][key]
+      }
+    }
+    let requiredRows = max - 1
+    if (addEmptyRows) {
+      return Math.ceil((requiredRows + 10) / 10) * 10
+    } else {
+      return requiredRows
+    }
+  }
+
+  // Stores metadata about a child node as constraints for determining grid size
+  const storeChild = node => {
+    children.update(state => ({
+      ...state,
+      [node.dataset.id]: {
+        desktopRowEnd: parseInt(node.dataset.gridDesktopRowEnd),
+        mobileRowEnd: parseInt(node.dataset.gridMobileRowEnd),
+      },
+    }))
+  }
+
+  // Removes constraint metadata for a certain child node
+  const removeChild = node => {
+    children.update(state => {
+      delete state[node.dataset.id]
+      return { ...state }
+    })
+  }
+
+  onMount(() => {
+    let observer
+    // Set up an observer to watch for changes in metadata attributes of child
+    // components, as well as child addition and deletion
+    observer = new MutationObserver(mutations => {
+      for (let mutation of mutations) {
+        const { target, type, addedNodes, removedNodes } = mutation
+        if (target === ref) {
+          if (addedNodes[0]?.classList?.contains("component")) {
+            // We've added a new child component inside the grid, so we need
+            // to consider it when determining required rows
+            storeChild(addedNodes[0])
+          } else if (removedNodes[0]?.classList?.contains("component")) {
+            // We've removed a child component inside the grid, so we need
+            // to stop considering it when determining required rows
+            removeChild(removedNodes[0])
+          }
+        } else if (
+          type === "attributes" &&
+          target.parentNode === ref &&
+          target.classList.contains("component")
+        ) {
+          // We've updated the size or position of a child
+          storeChild(target)
+        }
+      }
+    })
+    observer.observe(ref, {
+      childList: true,
+      attributes: true,
+      subtree: true,
+      attributeFilter: [
+        "data-grid-desktop-row-end",
+        "data-grid-mobile-row-end",
+      ],
+    })
+
+    // Now that the observer is set up, we mark the grid as mounted to mount
+    // our child components
+    mounted = true
+
+    // Cleanup our observer
+    return () => {
+      observer?.disconnect()
+    }
+  })
+</script>
+
+<div
+  bind:this={ref}
+  class="grid"
+  class:mobile
+  bind:clientWidth={width}
+  bind:clientHeight={height}
+  use:styleable={$styles}
+  data-cols={GridColumns}
+  data-col-size={colSize}
+>
+  {#if inBuilder}
+    <div class="underlay">
+      {#each { length: GridColumns * rows } as _, idx}
+        <div class="placeholder" class:first-col={idx % GridColumns === 0} />
+      {/each}
+    </div>
+  {/if}
+
+  <!-- Only render the slot if not empty, as we don't want the placeholder -->
+  {#if !empty && mounted}
+    <slot />
+  {/if}
+</div>
+
+<style>
+  .grid,
+  .underlay {
+    height: var(--height) !important;
+    min-height: var(--min-height) !important;
+    max-height: none !important;
+    display: grid;
+    gap: 0;
+    grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
+    grid-template-columns: repeat(var(--cols), calc(var(--col-size) * 1px));
+    position: relative;
+  }
+  .underlay {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-top: 1px solid var(--spectrum-global-color-gray-900);
+    opacity: 0.1;
+    pointer-events: none;
+  }
+  .underlay {
+    z-index: 0;
+  }
+  .placeholder {
+    border-bottom: 1px solid var(--spectrum-global-color-gray-900);
+    border-right: 1px solid var(--spectrum-global-color-gray-900);
+  }
+  .placeholder.first-col {
+    border-left: 1px solid var(--spectrum-global-color-gray-900);
+  }
+
+  /* Highlight grid lines when resizing children */
+  :global(.grid.highlight > .underlay) {
+    display: grid;
+  }
+
+  /* Highlight sibling borders when resizing childern */
+  :global(.grid.highlight > .component:not(.dragging)) {
+    outline: 2px solid var(--spectrum-global-color-static-blue-200);
+    pointer-events: none !important;
+  }
+  :global(.grid.highlight > .component.dragging) {
+    z-index: 999 !important;
+  }
+
+  /* Ensure all top level children have grid styles applied */
+  .grid :global(> .component:not(.ignores-layout)) {
+    display: flex;
+    overflow: auto;
+    pointer-events: all;
+    position: relative;
+    padding: calc(var(--grid-spacing) * 1px);
+    margin: calc(var(--grid-spacing) * 1px);
+
+    /* On desktop, use desktop metadata and fall back to mobile */
+    --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start));
+    --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end));
+    --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start));
+    --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end));
+    --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align));
+    --v-align: var(--grid-desktop-v-align, var(--grid-mobile-v-align));
+
+    /* Ensure grid metadata falls within limits */
+    grid-column-start: min(max(1, var(--col-start)), var(--cols)) !important;
+    grid-column-end: min(
+      max(2, var(--col-end)),
+      calc(var(--cols) + 1)
+    ) !important;
+    grid-row-start: max(1, var(--row-start)) !important;
+    grid-row-end: max(2, var(--row-end)) !important;
+
+    /* Flex container styles */
+    flex-direction: column;
+    align-items: var(--h-align);
+    justify-content: var(--v-align);
+  }
+
+  /* On mobile, use mobile metadata and fall back to desktop */
+  .grid.mobile :global(> .component) {
+    --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start));
+    --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end));
+    --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start));
+    --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end));
+    --h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align));
+    --v-align: var(--grid-mobile-v-align, var(--grid-desktop-v-align));
+  }
+
+  /* Handle grid children which need to fill the outer component wrapper */
+  .grid :global(> .component > *) {
+    flex: 0 0 auto !important;
+  }
+  .grid:not(.mobile)
+    :global(> .component[data-grid-desktop-v-align="stretch"] > *) {
+    flex: 1 1 0 !important;
+    height: 0 !important;
+  }
+  .grid.mobile :global(> .component[data-grid-mobile-v-align="stretch"] > *) {
+    flex: 1 1 0 !important;
+    height: 0 !important;
+  }
+
+  /* Grid specific CSS overrides for certain components */
+  .grid :global(> .component > img) {
+    object-fit: contain;
+    max-height: 100%;
+  }
+</style>

packages/client/src/components/app/index.js

@@ -13,7 +13,7 @@ import "@spectrum-css/page/dist/index-vars.css"
 export { default as Placeholder } from "./Placeholder.svelte"
 
 // User facing components
-export { default as container } from "./Container.svelte"
+export { default as container } from "./container/Container.svelte"
 export { default as section } from "./Section.svelte"
 export { default as dataprovider } from "./DataProvider.svelte"
 export { default as divider } from "./Divider.svelte"
@@ -35,7 +35,6 @@ export { default as spectrumcard } from "./SpectrumCard.svelte"
 export { default as tag } from "./Tag.svelte"
 export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
-export { default as grid } from "./Grid.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
 export { default as modal } from "./Modal.svelte"
 export { default as gridblock } from "./GridBlock.svelte"

packages/client/src/components/preview/DNDHandler.svelte

@@ -13,6 +13,7 @@
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
   import { DNDPlaceholderID } from "constants"
+  import { isGridEvent } from "utils/grid"
 
   const ThrottleRate = 130
 
@@ -25,15 +26,6 @@
   // Local flag for whether we are awaiting an async drop event
   let dropping = false
 
-  // Util to check if a DND event originates from a grid (or inside a grid).
-  // This is important as we do not handle grid DND in this handler.
-  const isGridEvent = e => {
-    return e.target
-      ?.closest?.(".component")
-      ?.parentNode?.closest?.(".component")
-      ?.childNodes[0]?.classList.contains("grid")
-  }
-
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
     return document.getElementsByClassName(`${id}-dom`)[0]
@@ -267,7 +259,7 @@
     // Check if we're adding a new component rather than moving one
     if (source.newComponentType) {
       dropping = true
-      await builderStore.actions.dropNewComponent(
+      builderStore.actions.dropNewComponent(
         source.newComponentType,
         drop.parent,
         drop.index

packages/client/src/components/preview/DNDPlaceholderOverlay.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { DNDPlaceholderID } from "constants"
-  import { domDebounce } from "utils/domDebounce.js"
+  import { Utils } from "@budibase/frontend-core"
 
   let left, top, height, width
 
@@ -19,7 +19,7 @@
       width = bounds.width
     }
   }
-  const debouncedUpdate = domDebounce(updatePosition)
+  const debouncedUpdate = Utils.domDebounce(updatePosition)
 
   onMount(() => {
     const interval = setInterval(debouncedUpdate, 100)

packages/client/src/components/preview/GridDNDHandler.svelte

@@ -1,112 +1,96 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
+  import { onMount, onDestroy, getContext } from "svelte"
   import { builderStore, componentStore } from "stores"
-  import { Utils } from "@budibase/frontend-core"
+  import { Utils, memo } from "@budibase/frontend-core"
+  import { GridRowHeight } from "constants"
+  import {
+    isGridEvent,
+    GridParams,
+    getGridVar,
+    Devices,
+    GridDragModes,
+  } from "utils/grid"
+
+  const context = getContext("context")
+
+  // Smallest possible 1x1 transparent GIF
+  const ghost = new Image(1, 1)
+  ghost.src =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
 
   let dragInfo
-  let gridStyles
+  let styles = memo()
-  let id
+
+  // Grid CSS variables
+  $: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
+  $: vars = {
+    colStart: getGridVar(device, GridParams.ColStart),
+    colEnd: getGridVar(device, GridParams.ColEnd),
+    rowStart: getGridVar(device, GridParams.RowStart),
+    rowEnd: getGridVar(device, GridParams.RowEnd),
+  }
 
   // Some memoisation of primitive types for performance
-  $: jsonStyles = JSON.stringify(gridStyles)
+  $: id = dragInfo?.id
-  $: id = dragInfo?.id || id
 
-  // Set ephemeral grid styles on the dragged component
+  // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: $instance?.setEphemeralStyles({
+  $: $instance?.setEphemeralStyles($styles)
-    ...gridStyles,
-    ...(gridStyles ? { "z-index": 999 } : null),
-  })
 
-  // Util to check if a DND event originates from a grid (or inside a grid).
+  // Sugar for a combination of both min and max
-  // This is important as we do not handle grid DND in this handler.
+  const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
-  const isGridEvent = e => {
-    return (
-      e.target
-        .closest?.(".component")
-        ?.parentNode.closest(".component")
-        ?.childNodes[0].classList.contains("grid") ||
-      e.target.classList.contains("anchor")
-    )
-  }
 
-  // Util to get the inner DOM node by a component ID
+  const processEvent = Utils.domDebounce((mouseX, mouseY) => {
-  const getDOMNode = id => {
-    const component = document.getElementsByClassName(id)[0]
-    return [...component.children][0]
-  }
-
-  const processEvent = Utils.throttle((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return
     }
-
+    const { mode, side, grid, domGrid } = dragInfo
-    const { mode, side, gridId, grid } = dragInfo
+    const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
-    const {
+    if (!domGrid) {
-      startX,
+      return
-      startY,
+    }
-      rowStart,
-      rowEnd,
-      colStart,
-      colEnd,
-      rowDeltaMin,
-      rowDeltaMax,
-      colDeltaMin,
-      colDeltaMax,
-    } = grid
-
-    const domGrid = getDOMNode(gridId)
     const cols = parseInt(domGrid.dataset.cols)
-    const rows = parseInt(domGrid.dataset.rows)
+    const colSize = parseInt(domGrid.dataset.colSize)
-    const { width, height } = domGrid.getBoundingClientRect()
-
-    const colWidth = width / cols
     const diffX = mouseX - startX
-    let deltaX = Math.round(diffX / colWidth)
+    let deltaX = Math.round(diffX / colSize)
-    const rowHeight = height / rows
     const diffY = mouseY - startY
-    let deltaY = Math.round(diffY / rowHeight)
+    let deltaY = Math.round(diffY / GridRowHeight)
-
+    if (mode === GridDragModes.Move) {
-    if (mode === "move") {
+      deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
-      deltaY = Math.min(Math.max(deltaY, rowDeltaMin), rowDeltaMax)
+      deltaY = Math.max(deltaY, 1 - rowStart)
-      deltaX = Math.min(Math.max(deltaX, colDeltaMin), colDeltaMax)
       const newStyles = {
-        "grid-row-start": rowStart + deltaY,
+        [vars.colStart]: colStart + deltaX,
-        "grid-row-end": rowEnd + deltaY,
+        [vars.colEnd]: colEnd + deltaX,
-        "grid-column-start": colStart + deltaX,
+        [vars.rowStart]: rowStart + deltaY,
-        "grid-column-end": colEnd + deltaX,
+        [vars.rowEnd]: rowEnd + deltaY,
       }
-      if (JSON.stringify(newStyles) !== jsonStyles) {
+      styles.set(newStyles)
-        gridStyles = newStyles
+    } else if (mode === GridDragModes.Resize) {
-      }
-    } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
-        newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
       } else if (side === "left") {
-        newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
       } else if (side === "top") {
-        newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "bottom") {
-        newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-right") {
-        newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-left") {
-        newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
-        newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "top-right") {
-        newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "top-left") {
-        newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
-        newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
-      }
-      if (JSON.stringify(newStyles) !== jsonStyles) {
-        gridStyles = newStyles
       }
+      styles.set(newStyles)
     }
-  }, 100)
+  })
 
   const handleEvent = e => {
     e.preventDefault()
@@ -121,77 +105,64 @@
     }
 
     // Hide drag ghost image
-    e.dataTransfer.setDragImage(new Image(), 0, 0)
+    e.dataTransfer.setDragImage(ghost, 0, 0)
 
     // Extract state
     let mode, id, side
-    if (e.target.classList.contains("anchor")) {
+    if (e.target.dataset.indicator === "true") {
-      // Handle resize
+      mode = e.target.dataset.dragMode
-      mode = "resize"
       id = e.target.dataset.id
       side = e.target.dataset.side
     } else {
       // Handle move
-      mode = "move"
+      mode = GridDragModes.Move
       const component = e.target.closest(".component")
       id = component.dataset.id
     }
 
-    // Find grid parent
+    // If holding ctrl/cmd then leave behind a duplicate of this component
-    const domComponent = getDOMNode(id)
+    if (mode === GridDragModes.Move && (e.ctrlKey || e.metaKey)) {
-    const gridId = domComponent?.closest(".grid")?.parentNode.dataset.id
+      builderStore.actions.duplicateComponent(id, "above", false)
-    if (!gridId) {
+    }
+
+    // Find grid parent and read from DOM
+    const domComponent = document.getElementsByClassName(id)[0]
+    const domGrid = domComponent?.closest(".grid")
+    if (!domGrid) {
       return
     }
+    const styles = getComputedStyle(domComponent)
+
+    // Show as active
+    domComponent.classList.add("dragging")
+    domGrid.classList.add("highlight")
+    builderStore.actions.selectComponent(id)
 
     // Update state
     dragInfo = {
       domTarget: e.target,
+      domComponent,
+      domGrid,
       id,
-      gridId,
+      gridId: domGrid.parentNode.dataset.id,
       mode,
       side,
+      grid: {
+        startX: e.clientX,
+        startY: e.clientY,
+        rowStart: parseInt(styles["grid-row-start"]),
+        rowEnd: parseInt(styles["grid-row-end"]),
+        colStart: parseInt(styles["grid-column-start"]),
+        colEnd: parseInt(styles["grid-column-end"]),
+      },
     }
 
     // Add event handler to clear all drag state when dragging ends
     dragInfo.domTarget.addEventListener("dragend", stopDragging)
   }
 
-  // Callback when entering a potential drop target
-  const onDragEnter = e => {
-    // Skip if we aren't validly dragging currently
-    if (!dragInfo || dragInfo.grid) {
-      return
-    }
-
-    const domGrid = getDOMNode(dragInfo.gridId)
-    const gridCols = parseInt(domGrid.dataset.cols)
-    const gridRows = parseInt(domGrid.dataset.rows)
-    const domNode = getDOMNode(dragInfo.id)
-    const styles = window.getComputedStyle(domNode)
-    if (domGrid) {
-      const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
-      const getStyle = x => parseInt(styles?.[x] || "0")
-      const getColStyle = x => minMax(getStyle(x), 1, gridCols + 1)
-      const getRowStyle = x => minMax(getStyle(x), 1, gridRows + 1)
-      dragInfo.grid = {
-        startX: e.clientX,
-        startY: e.clientY,
-        rowStart: getRowStyle("grid-row-start"),
-        rowEnd: getRowStyle("grid-row-end"),
-        colStart: getColStyle("grid-column-start"),
-        colEnd: getColStyle("grid-column-end"),
-        rowDeltaMin: 1 - getRowStyle("grid-row-start"),
-        rowDeltaMax: gridRows + 1 - getRowStyle("grid-row-end"),
-        colDeltaMin: 1 - getColStyle("grid-column-start"),
-        colDeltaMax: gridCols + 1 - getColStyle("grid-column-end"),
-      }
-      handleEvent(e)
-    }
-  }
-
   const onDragOver = e => {
-    if (!dragInfo?.grid) {
+    if (!dragInfo) {
       return
     }
     handleEvent(e)
@@ -199,30 +170,33 @@
 
   // Callback when drag stops (whether dropped or not)
   const stopDragging = async () => {
-    // Save changes
+    if (!dragInfo) {
-    if (gridStyles) {
+      return
-      await builderStore.actions.updateStyles(gridStyles, dragInfo.id)
     }
+    const { id, domTarget, domGrid, domComponent } = dragInfo
 
-    // Reset listener
+    // Reset DOM
-    if (dragInfo?.domTarget) {
+    domComponent.classList.remove("dragging")
-      dragInfo.domTarget.removeEventListener("dragend", stopDragging)
+    domGrid.classList.remove("highlight")
+    domTarget.removeEventListener("dragend", stopDragging)
+
+    // Save changes
+    if ($styles) {
+      builderStore.actions.updateStyles($styles, id)
     }
 
     // Reset state
     dragInfo = null
-    gridStyles = null
+    styles.set(null)
   }
 
   onMount(() => {
     document.addEventListener("dragstart", onDragStart, false)
-    document.addEventListener("dragenter", onDragEnter, false)
     document.addEventListener("dragover", onDragOver, false)
   })
 
   onDestroy(() => {
     document.removeEventListener("dragstart", onDragStart, false)
-    document.removeEventListener("dragenter", onDragEnter, false)
     document.removeEventListener("dragover", onDragOver, false)
   })
 </script>

packages/client/src/components/preview/GridStylesButton.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { builderStore } from "stores"
+
+  export let style
+  export let value
+  export let icon
+  export let title
+  export let componentId
+  export let active
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  {title}
+  class:active
+  on:click={() => {
+    builderStore.actions.updateStyles({ [style]: value }, componentId)
+  }}
+>
+  <Icon name={icon} size="S" />
+</div>
+
+<style>
+  div {
+    padding: 6px;
+    border-radius: 2px;
+    color: var(--spectrum-global-color-gray-700);
+    display: flex;
+    transition: color 0.13s ease-in-out, background-color 0.13s ease-in-out;
+  }
+  div:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+  .active,
+  .active:hover {
+    background-color: rgba(13, 102, 208, 0.1);
+    color: var(--spectrum-global-color-blue-600);
+  }
+</style>

packages/client/src/components/preview/Indicator.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
+  import { GridDragModes } from "utils/grid"
 
   export let top
   export let left
@@ -34,9 +35,20 @@
   class:line
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
   class:withText={!!text}
+  class:vCompact={height < 40}
+  class:hCompact={width < 40}
 >
   {#if text || icon}
-    <div class="label" class:flipped class:line class:right={alignRight}>
+    <div
+      class="label"
+      class:flipped
+      class:line
+      class:right={alignRight}
+      draggable="true"
+      data-indicator="true"
+      data-drag-mode={GridDragModes.Move}
+      data-id={componentId}
+    >
       {#if icon}
         <Icon name={icon} size="S" color="white" />
       {/if}
@@ -50,8 +62,10 @@
   {#if showResizeAnchors}
     {#each AnchorSides as side}
       <div
-        draggable="true"
         class="anchor {side}"
+        draggable="true"
+        data-indicator="true"
+        data-drag-mode={GridDragModes.Resize}
         data-side={side}
         data-id={componentId}
       >
@@ -99,6 +113,7 @@
     justify-content: flex-start;
     align-items: center;
     gap: 6px;
+    pointer-events: all;
   }
   .label.line {
     transform: translateY(-50%);
@@ -123,7 +138,7 @@
 
   /* Anchor */
   .anchor {
-    --size: 24px;
+    --size: 20px;
     position: absolute;
     width: var(--size);
     height: var(--size);
@@ -131,53 +146,84 @@
     display: grid;
     place-items: center;
     border-radius: 50%;
+    transform: translateX(-50%) translateY(-50%);
   }
   .anchor-inner {
-    width: 12px;
+    width: calc(var(--size) / 2);
-    height: 12px;
+    height: calc(var(--size) / 2);
     background: white;
     border: 2px solid var(--color);
     pointer-events: none;
+    border-radius: 2px;
   }
+
+  /* Thinner anchors for each edge */
+  .anchor.right,
+  .anchor.left {
+    height: calc(var(--size) * 2);
+  }
+  .anchor.top,
+  .anchor.bottom {
+    width: calc(var(--size) * 2);
+  }
+  .anchor.right .anchor-inner,
+  .anchor.left .anchor-inner {
+    height: calc(var(--size) * 1.2);
+    width: calc(var(--size) * 0.3);
+  }
+  .anchor.top .anchor-inner,
+  .anchor.bottom .anchor-inner {
+    width: calc(var(--size) * 1.2);
+    height: calc(var(--size) * 0.3);
+  }
+
+  /* Hide side indicators when they don't fit */
+  .indicator.hCompact .anchor.top,
+  .indicator.hCompact .anchor.bottom,
+  .indicator.vCompact .anchor.left,
+  .indicator.vCompact .anchor.right {
+    display: none;
+  }
+
+  /* Anchor positions */
   .anchor.right {
-    right: calc(var(--size) / -2 - 1px);
+    left: calc(100% + 1px);
-    top: calc(50% - var(--size) / 2);
+    top: 50%;
     cursor: e-resize;
   }
   .anchor.left {
-    left: calc(var(--size) / -2 - 1px);
+    left: -1px;
-    top: calc(50% - var(--size) / 2);
+    top: 50%;
     cursor: w-resize;
   }
   .anchor.bottom {
-    left: calc(50% - var(--size) / 2 + 1px);
+    left: 50%;
-    bottom: calc(var(--size) / -2 - 1px);
+    top: calc(100% + 1px);
     cursor: s-resize;
   }
   .anchor.top {
-    left: calc(50% - var(--size) / 2 + 1px);
+    left: 50%;
-    top: calc(var(--size) / -2 - 1px);
+    top: -1px;
     cursor: n-resize;
   }
-
   .anchor.bottom-right {
-    right: calc(var(--size) / -2 - 1px);
+    top: 100%;
-    bottom: calc(var(--size) / -2 - 1px);
+    left: 100%;
     cursor: se-resize;
   }
   .anchor.bottom-left {
-    left: calc(var(--size) / -2 - 1px);
+    left: 0;
-    bottom: calc(var(--size) / -2 - 1px);
+    top: 100%;
     cursor: sw-resize;
   }
   .anchor.top-right {
-    right: calc(var(--size) / -2 - 1px);
+    left: 100%;
-    top: calc(var(--size) / -2 - 1px);
+    top: 0;
     cursor: ne-resize;
   }
   .anchor.top-left {
-    left: calc(var(--size) / -2 - 1px);
+    left: 0;
-    top: calc(var(--size) / -2 - 1px);
+    top: 0;
     cursor: nw-resize;
   }
 </style>

packages/client/src/components/preview/IndicatorSet.svelte

@@ -1,8 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { domDebounce } from "utils/domDebounce"
   import { builderStore } from "stores"
+  import { memo, Utils } from "@budibase/frontend-core"
 
   export let componentId = null
   export let color = null
@@ -10,7 +10,10 @@
   export let prefix = null
   export let allowResizeAnchors = false
 
+  // Offset = 6 (clip-root padding) - 1 (half the border thickness)
+  const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
+  const mutationObserver = new MutationObserver(() => debouncedUpdate())
   const defaultState = () => ({
     // Cached props
     componentId,
@@ -29,38 +32,49 @@
 
   let interval
   let state = defaultState()
-  let nextState = null
+  let observingMutations = false
   let updating = false
-  let observers = []
+  let intersectionObservers = []
   let callbackCount = 0
+  let nextState
 
+  $: componentId, reset()
   $: visibleIndicators = state.indicators.filter(x => x.visible)
-  $: offset = $builderStore.inBuilder ? 0 : 2
+  $: offset = $builderStore.inBuilder ? 5 : -1
-  $: $$props, debouncedUpdate()
+  $: config.set({
+    componentId,
+    color,
+    zIndex,
+    prefix,
+    allowResizeAnchors,
+  })
 
-  const checkInsideGrid = id => {
+  // Update position when any props change
-    const component = document.getElementsByClassName(id)[0]
+  $: $config, debouncedUpdate()
-    const domNode = component?.children[0]
 
-    // Ignore grid itself
+  const reset = () => {
-    if (domNode?.classList.contains("grid")) {
+    mutationObserver.disconnect()
-      return false
+    observingMutations = false
-    }
+    updating = false
+  }
 
-    return component?.parentNode
+  const observeMutations = element => {
-      ?.closest?.(".component")
+    mutationObserver.observe(element, {
-      ?.childNodes[0]?.classList.contains("grid")
+      attributes: true,
+      attributeFilter: ["style"],
+    })
+    observingMutations = true
   }
 
   const createIntersectionCallback = idx => entries => {
-    if (callbackCount >= observers.length) {
+    if (callbackCount >= intersectionObservers.length) {
       return
     }
     nextState.indicators[idx].visible =
       nextState.indicators[idx].insideModal ||
       nextState.indicators[idx].insideSidePanel ||
       entries[0].isIntersecting
-    if (++callbackCount === observers.length) {
+    if (++callbackCount === intersectionObservers.length) {
       state = nextState
       updating = false
     }
@@ -76,76 +90,95 @@
       state = defaultState()
       return
     }
-
+    let elements = document.getElementsByClassName(componentId)
-    // Reset state
+    if (!elements.length) {
+      state = defaultState()
+      return
+    }
     updating = true
     callbackCount = 0
-    observers.forEach(o => o.disconnect())
+    intersectionObservers.forEach(o => o.disconnect())
-    observers = []
+    intersectionObservers = []
     nextState = defaultState()
 
+    // Start observing mutations if this is the first time we've seen our
+    // component in the DOM
+    if (!observingMutations) {
+      observeMutations(elements[0])
+    }
+
     // Check if we're inside a grid
     if (allowResizeAnchors) {
-      nextState.insideGrid = checkInsideGrid(componentId)
+      nextState.insideGrid = elements[0]?.dataset.insideGrid === "true"
     }
 
-    // Determine next set of indicators
+    // Get text to display
-    const parents = document.getElementsByClassName(componentId)
+    nextState.text = elements[0].dataset.name
-    if (parents.length) {
+    if (nextState.prefix) {
-      nextState.text = parents[0].dataset.name
+      nextState.text = `${nextState.prefix} ${nextState.text}`
-      if (nextState.prefix) {
-        nextState.text = `${nextState.prefix} ${nextState.text}`
-      }
-      if (parents[0].dataset.icon) {
-        nextState.icon = parents[0].dataset.icon
-      }
     }
-    nextState.error = parents?.[0]?.classList.contains("error")
+    if (elements[0].dataset.icon) {
+      nextState.icon = elements[0].dataset.icon
+    }
+    nextState.error = elements[0].classList.contains("error")
 
     // Batch reads to minimize reflow
     const scrollX = window.scrollX
     const scrollY = window.scrollY
 
     // Extract valid children
-    // Sanity limit of 100 active indicators
+    // Sanity limit of active indicators
-    const children = Array.from(
+    if (!nextState.insideGrid) {
-      document.getElementsByClassName(`${componentId}-dom`)
+      elements = document.getElementsByClassName(`${componentId}-dom`)
-    )
+    }
+    elements = Array.from(elements)
       .filter(x => x != null)
       .slice(0, 100)
+    const multi = elements.length > 1
 
     // If there aren't any nodes then reset
-    if (!children.length) {
+    if (!elements.length) {
       state = defaultState()
-      updating = false
       return
     }
 
     const device = document.getElementById("app-root")
     const deviceBounds = device.getBoundingClientRect()
-    children.forEach((child, idx) => {
+    nextState.indicators = elements.map((element, idx) => {
-      const callback = createIntersectionCallback(idx)
+      const elBounds = element.getBoundingClientRect()
-      const threshold = children.length > 1 ? 1 : 0
+      let indicator = {
-      const observer = new IntersectionObserver(callback, {
+        top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
-        threshold,
+        left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
-        root: device,
+        width: Math.round(elBounds.width + 2),
-      })
+        height: Math.round(elBounds.height + 2),
-      observer.observe(child)
+        visible: true,
-      observers.push(observer)
+      }
 
-      const elBounds = child.getBoundingClientRect()
+      // If observing more than one node then we need to use an intersection
-      nextState.indicators.push({
+      // observer to determine whether each indicator should be visible
-        top: elBounds.top + scrollY - deviceBounds.top - offset,
+      if (multi) {
-        left: elBounds.left + scrollX - deviceBounds.left - offset,
+        const callback = createIntersectionCallback(idx)
-        width: elBounds.width + 4,
+        const intersectionObserver = new IntersectionObserver(callback, {
-        height: elBounds.height + 4,
+          threshold: 1,
-        visible: false,
+          root: device,
-        insideSidePanel: !!child.closest(".side-panel"),
+        })
-        insideModal: !!child.closest(".modal-content"),
+        intersectionObserver.observe(element)
-      })
+        intersectionObservers.push(intersectionObserver)
+        indicator.visible = false
+        indicator.insideSidePanel = !!element.closest(".side-panel")
+        indicator.insideModal = !!element.closest(".modal-content")
+      }
+
+      return indicator
     })
+
+    // Immediately apply the update if we're just observing a single node
+    if (!multi) {
+      state = nextState
+      updating = false
+    }
   }
-  const debouncedUpdate = domDebounce(updatePosition)
+  const debouncedUpdate = Utils.domDebounce(updatePosition)
 
   onMount(() => {
     debouncedUpdate()
@@ -154,9 +187,9 @@
   })
 
   onDestroy(() => {
+    mutationObserver.disconnect()
     clearInterval(interval)
     document.removeEventListener("scroll", debouncedUpdate, true)
-    observers.forEach(o => o.disconnect())
   })
 </script>
 

packages/client/src/components/preview/SettingsBar.svelte

@@ -1,117 +1,180 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
+  import { onMount, onDestroy, getContext } from "svelte"
   import SettingsButton from "./SettingsButton.svelte"
+  import GridStylesButton from "./GridStylesButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore, componentStore, dndIsDragging } from "stores"
-  import { domDebounce } from "utils/domDebounce"
+  import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
+  import { getGridVar, GridParams, Devices } from "utils/grid"
 
+  const context = getContext("context")
   const verticalOffset = 36
   const horizontalOffset = 2
+  const observer = new MutationObserver(() => debouncedUpdate())
 
   let top = 0
   let left = 0
   let interval
   let self
   let measured = false
+  let observing = false
+  let insideGrid = false
+  let gridHAlign
+  let gridVAlign
 
   $: id = $builderStore.selectedComponentId
+  $: id, reset()
+  $: component = $componentStore.selectedComponent
+  $: definition = $componentStore.selectedComponentDefinition
   $: instance = componentStore.actions.getComponentInstance(id)
   $: state = $instance?.state
-  $: definition = $componentStore.selectedComponentDefinition
   $: showBar =
     definition?.showSettingsBar !== false &&
     !$dndIsDragging &&
     definition &&
     !$state?.errorState
-  $: {
+  $: settings = getBarSettings(component, definition)
-    if (!showBar) {
-      measured = false
-    }
-  }
-  $: settings = getBarSettings(definition)
   $: isRoot = id === $builderStore.screen?.props?._id
+  $: showGridStyles =
+    insideGrid &&
+    (definition?.grid?.hAlign !== "stretch" ||
+      definition?.grid?.vAlign !== "stretch")
+  $: mobile = $context.device.mobile
+  $: device = mobile ? Devices.Mobile : Devices.Desktop
+  $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
+  $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
-  const getBarSettings = definition => {
+  const reset = () => {
+    observer.disconnect()
+    measured = false
+    observing = false
+    insideGrid = false
+  }
+
+  const startObserving = domBoundary => {
+    observer.observe(domBoundary, {
+      attributes: true,
+      attributeFilter: ["style"],
+    })
+    observing = true
+  }
+
+  const getBarSettings = (component, definition) => {
     let allSettings = []
     definition?.settings?.forEach(setting => {
-      if (setting.section) {
+      if (setting.section && shouldDisplaySetting(component, setting)) {
         allSettings = allSettings.concat(setting.settings || [])
       } else {
         allSettings.push(setting)
       }
     })
-    return allSettings.filter(setting => setting.showInBar && !setting.hidden)
+    return allSettings.filter(
+      setting =>
+        setting.showInBar &&
+        !setting.hidden &&
+        shouldDisplaySetting(component, setting)
+    )
   }
 
   const updatePosition = () => {
     if (!showBar) {
       return
     }
-    const id = $builderStore.selectedComponentId
-    const parent = document.getElementsByClassName(id)?.[0]
-    const element = parent?.children?.[0]
 
-    // The settings bar is higher in the dom tree than the selection indicators
+    // Find DOM boundary and ensure it is valid
-    // as we want to be able to render the settings bar wider than the screen,
+    let domBoundary = document.getElementsByClassName(id)[0]
-    // or outside the screen.
+    if (!domBoundary) {
-    // Therefore we use the clip root rather than the app root to determine
+      return reset()
-    // its position.
+    }
-    const device = document.getElementById("clip-root")
-    if (element && self) {
-      // Batch reads to minimize reflow
-      const deviceBounds = device.getBoundingClientRect()
-      const elBounds = element.getBoundingClientRect()
-      const width = self.offsetWidth
-      const height = self.offsetHeight
-      const { scrollX, scrollY, innerWidth } = window
 
-      // Vertically, always render above unless no room, then render inside
+    // If we're inside a grid, allow time for buttons to render
-      let newTop = elBounds.top + scrollY - verticalOffset - height
+    const nextInsideGrid = domBoundary.dataset.insideGrid === "true"
-      if (newTop < deviceBounds.top - 50) {
+    if (nextInsideGrid && !insideGrid) {
-        newTop = deviceBounds.top - 50
+      insideGrid = true
-      }
+      return
-      if (newTop < 0) {
+    } else {
-        newTop = 0
+      insideGrid = nextInsideGrid
-      }
+    }
-      const deviceBottom = deviceBounds.top + deviceBounds.height
-      if (newTop > deviceBottom - 44) {
-        newTop = deviceBottom - 44
-      }
 
-      //If element is at the very top of the screen, put the bar below the element
+    // Get the correct DOM boundary depending if we're inside a grid or not
-      if (elBounds.top < elBounds.height && elBounds.height < 80) {
+    if (!insideGrid) {
-        newTop = elBounds.bottom + verticalOffset
+      domBoundary =
-      }
+        domBoundary.getElementsByClassName(`${id}-dom`)[0] ||
+        domBoundary.children?.[0]
+    }
+    if (!domBoundary || !self) {
+      return reset()
+    }
 
-      // Horizontally, try to center first.
+    // Start observing if required
-      // Failing that, render to left edge of component.
+    if (!observing) {
-      // Failing that, render to right edge of component,
+      startObserving(domBoundary)
-      // Failing that, render to window left edge and accept defeat.
+    }
-      let elCenter = elBounds.left + scrollX + elBounds.width / 2
+
-      let newLeft = elCenter - width / 2
+    // Batch reads to minimize reflow
+    const deviceEl = document.getElementById("clip-root")
+    const deviceBounds = deviceEl.getBoundingClientRect()
+    const elBounds = domBoundary.getBoundingClientRect()
+    const width = self.offsetWidth
+    const height = self.offsetHeight
+    const { scrollX, scrollY, innerWidth } = window
+
+    // Read grid metadata from data attributes
+    if (insideGrid) {
+      if (mobile) {
+        gridHAlign = domBoundary.dataset.gridMobileHAlign
+        gridVAlign = domBoundary.dataset.gridMobileVAlign
+      } else {
+        gridHAlign = domBoundary.dataset.gridDesktopHAlign
+        gridVAlign = domBoundary.dataset.gridDesktopVAlign
+      }
+    }
+
+    // Vertically, always render above unless no room, then render inside
+    let newTop = elBounds.top + scrollY - verticalOffset - height
+    if (newTop < deviceBounds.top - 50) {
+      newTop = deviceBounds.top - 50
+    }
+    if (newTop < 0) {
+      newTop = 0
+    }
+    const deviceBottom = deviceBounds.top + deviceBounds.height
+    if (newTop > deviceBottom - 44) {
+      newTop = deviceBottom - 44
+    }
+
+    //If element is at the very top of the screen, put the bar below the element
+    if (elBounds.top < elBounds.height && elBounds.height < 80) {
+      newTop = elBounds.bottom + verticalOffset
+    }
+
+    // Horizontally, try to center first.
+    // Failing that, render to left edge of component.
+    // Failing that, render to right edge of component,
+    // Failing that, render to window left edge and accept defeat.
+    let elCenter = elBounds.left + scrollX + elBounds.width / 2
+    let newLeft = elCenter - width / 2
+    if (newLeft < 0 || newLeft + width > innerWidth) {
+      newLeft = elBounds.left + scrollX - horizontalOffset
       if (newLeft < 0 || newLeft + width > innerWidth) {
-        newLeft = elBounds.left + scrollX - horizontalOffset
+        newLeft = elBounds.right + scrollX - width + horizontalOffset
         if (newLeft < 0 || newLeft + width > innerWidth) {
-          newLeft = elBounds.right + scrollX - width + horizontalOffset
+          newLeft = horizontalOffset
-          if (newLeft < 0 || newLeft + width > innerWidth) {
-            newLeft = horizontalOffset
-          }
         }
       }
-
-      // Only update state when things changes to minimize renders
-      if (Math.round(newTop) !== Math.round(top)) {
-        top = newTop
-      }
-      if (Math.round(newLeft) !== Math.round(left)) {
-        left = newLeft
-      }
-
-      measured = true
     }
+
+    // Only update state when things changes to minimize renders
+    if (Math.round(newTop) !== Math.round(top)) {
+      top = newTop
+    }
+    if (Math.round(newLeft) !== Math.round(left)) {
+      left = newLeft
+    }
+    measured = true
   }
-  const debouncedUpdate = domDebounce(updatePosition)
+  const debouncedUpdate = Utils.domDebounce(updatePosition)
 
   onMount(() => {
     debouncedUpdate()
@@ -122,16 +185,85 @@
   onDestroy(() => {
     clearInterval(interval)
     document.removeEventListener("scroll", debouncedUpdate, true)
+    reset()
   })
 </script>
 
 {#if showBar}
   <div
     class="bar"
-    style="top: {top}px; left: {left}px;"
+    style="top:{top}px; left:{left}px;"
     bind:this={self}
     class:visible={measured}
   >
+    {#if showGridStyles}
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="start"
+        icon="AlignLeft"
+        title="Align left"
+        active={gridHAlign === "start"}
+        componentId={id}
+      />
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="center"
+        icon="AlignCenter"
+        title="Align center"
+        active={gridHAlign === "center"}
+        componentId={id}
+      />
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="end"
+        icon="AlignRight"
+        title="Align right"
+        active={gridHAlign === "end"}
+        componentId={id}
+      />
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="stretch"
+        icon="MoveLeftRight"
+        title="Stretch horizontally"
+        active={gridHAlign === "stretch"}
+        componentId={id}
+      />
+      <div class="divider" />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="start"
+        icon="AlignTop"
+        title="Align top"
+        active={gridVAlign === "start"}
+        componentId={id}
+      />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="center"
+        icon="AlignMiddle"
+        title="Align middle"
+        active={gridVAlign === "center"}
+        componentId={id}
+      />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="end"
+        icon="AlignBottom"
+        title="Align bottom"
+        active={gridVAlign === "end"}
+        componentId={id}
+      />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="stretch"
+        icon="MoveUpDown"
+        title="Stretch vertically"
+        active={gridVAlign === "stretch"}
+        componentId={id}
+      />
+      <div class="divider" />
+    {/if}
     {#each settings as setting, idx}
       {#if setting.type === "select"}
         {#if setting.barStyle === "buttons"}
@@ -141,6 +273,7 @@
               value={option.value}
               icon={option.barIcon}
               title={option.barTitle || option.label}
+              {component}
             />
           {/each}
         {:else}
@@ -148,6 +281,7 @@
             prop={setting.key}
             options={setting.options}
             label={setting.label}
+            {component}
           />
         {/if}
       {:else if setting.type === "boolean"}
@@ -156,9 +290,10 @@
           icon={setting.barIcon}
           title={setting.barTitle || setting.label}
           bool
+          {component}
         />
       {:else if setting.type === "color"}
-        <SettingsColorPicker prop={setting.key} />
+        <SettingsColorPicker prop={setting.key} {component} />
       {/if}
       {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
         <div class="divider" />

packages/client/src/components/preview/SettingsButton.svelte

@@ -1,17 +1,19 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop
   export let value
   export let icon
   export let title
-  export let rotate = false
   export let bool = false
+  export let active = false
+  export let component
 
   const dispatch = createEventDispatcher()
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+
+  $: currentValue = component?.[prop]
   $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
 
@@ -19,7 +21,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   {title}
-  class:rotate
   class:active
   on:click={() => {
     if (prop) {
@@ -49,7 +50,4 @@
     background-color: rgba(13, 102, 208, 0.1);
     color: var(--spectrum-global-color-blue-600);
   }
-  .rotate {
-    transform: rotate(90deg);
-  }
 </style>

packages/client/src/components/preview/SettingsColorPicker.svelte

@@ -1,10 +1,11 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>

packages/client/src/components/preview/SettingsPicker.svelte

@@ -1,12 +1,13 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
   export let options
   export let label
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>

packages/client/src/constants.js

@@ -15,3 +15,6 @@ export const ActionTypes = {
 
 export const DNDPlaceholderID = "dnd-placeholder"
 export const ScreenslotType = "screenslot"
+export const GridRowHeight = 24
+export const GridColumns = 12
+export const GridSpacing = 4

packages/client/src/stores/builder.js

@@ -41,13 +41,20 @@ const createBuilderStore = () => {
       eventStore.actions.dispatchEvent("update-prop", { prop, value })
     },
     updateStyles: async (styles, id) => {
-      await eventStore.actions.dispatchEvent("update-styles", { styles, id })
+      await eventStore.actions.dispatchEvent("update-styles", {
+        styles,
+        id,
+      })
     },
     keyDown: (key, ctrlKey) => {
       eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })
     },
-    duplicateComponent: id => {
+    duplicateComponent: (id, mode = "below", selectComponent = true) => {
-      eventStore.actions.dispatchEvent("duplicate-component", { id })
+      eventStore.actions.dispatchEvent("duplicate-component", {
+        id,
+        mode,
+        selectComponent,
+      })
     },
     deleteComponent: id => {
       eventStore.actions.dispatchEvent("delete-component", { id })

packages/client/src/stores/components.js

@@ -142,9 +142,6 @@ const createComponentStore = () => {
   }
 
   const getComponentInstance = id => {
-    if (!id) {
-      return null
-    }
     return derived(store, $store => $store.mountedComponents[id])
   }
 

packages/client/src/stores/screens.js

@@ -129,29 +129,30 @@ const createScreenStore = () => {
       // If we don't have a legacy custom layout, build a layout structure
       // from the screen navigation settings
       if (!activeLayout) {
-        let navigationSettings = {
+        let layoutSettings = {
           navigation: "None",
           pageWidth: activeScreen?.width || "Large",
+          embedded: $appStore.embedded,
         }
         if (activeScreen?.showNavigation) {
-          navigationSettings = {
+          layoutSettings = {
-            ...navigationSettings,
+            ...layoutSettings,
             ...($builderStore.navigation || $appStore.application?.navigation),
           }
 
           // Default navigation to top
-          if (!navigationSettings.navigation) {
+          if (!layoutSettings.navigation) {
-            navigationSettings.navigation = "Top"
+            layoutSettings.navigation = "Top"
           }
 
           // Default title to app name
-          if (!navigationSettings.title && !navigationSettings.hideTitle) {
+          if (!layoutSettings.title && !layoutSettings.hideTitle) {
-            navigationSettings.title = $appStore.application?.name
+            layoutSettings.title = $appStore.application?.name
           }
 
           // Default to the org logo
-          if (!navigationSettings.logoUrl) {
+          if (!layoutSettings.logoUrl) {
-            navigationSettings.logoUrl = $orgStore?.logoUrl
+            layoutSettings.logoUrl = $orgStore?.logoUrl
           }
         }
         activeLayout = {
@@ -173,8 +174,7 @@ const createScreenStore = () => {
                 },
               },
             ],
-            ...navigationSettings,
+            ...layoutSettings,
-            embedded: $appStore.embedded,
           },
         }
       }

packages/client/src/utils/domDebounce.js

@@ -1,14 +0,0 @@
-export const domDebounce = (callback, extractParams = x => x) => {
-  let active = false
-  let lastParams
-  return (...params) => {
-    lastParams = extractParams(...params)
-    if (!active) {
-      active = true
-      requestAnimationFrame(() => {
-        callback(lastParams)
-        active = false
-      })
-    }
-  }
-}

packages/client/src/utils/grid.js

@@ -0,0 +1,183 @@
+import { GridSpacing, GridRowHeight } from "constants"
+import { builderStore } from "stores"
+import { buildStyleString } from "utils/styleable.js"
+
+/**
+ * We use CSS variables on components to control positioning and layout of
+ * components inside grids.
+ * --grid-[mobile/desktop]-[row/col]-[start-end]: for positioning
+ * --grid-[mobile/desktop]-[h/v]-align: for layout of inner components within
+ *  the components grid bounds
+ *
+ * Component definitions define their default layout preference via the
+ * `grid.hAlign` and `grid.vAlign` keys in the manifest.
+ *
+ * We also apply grid-[mobile/desktop]-grow CSS classes to component wrapper
+ * DOM nodes to use later in selectors, to control the sizing of children.
+ */
+
+// Enum representing the different CSS variables we use for grid metadata
+export const GridParams = {
+  HAlign: "h-align",
+  VAlign: "v-align",
+  ColStart: "col-start",
+  ColEnd: "col-end",
+  RowStart: "row-start",
+  RowEnd: "row-end",
+}
+
+// Classes used in selectors inside grid containers to control child styles
+export const GridClasses = {
+  DesktopFill: "grid-desktop-grow",
+  MobileFill: "grid-mobile-grow",
+}
+
+// Enum for device preview type, included in grid CSS variables
+export const Devices = {
+  Desktop: "desktop",
+  Mobile: "mobile",
+}
+
+export const GridDragModes = {
+  Resize: "resize",
+  Move: "move",
+}
+
+// Builds a CSS variable name for a certain piece of grid metadata
+export const getGridVar = (device, param) => `--grid-${device}-${param}`
+
+// Determines whether a JS event originated from immediately within a grid
+export const isGridEvent = e => {
+  return (
+    e.target.dataset?.indicator === "true" ||
+    e.target
+      .closest?.(".component")
+      ?.parentNode.closest(".component")
+      ?.childNodes[0]?.classList?.contains("grid")
+  )
+}
+
+// Svelte action to apply required class names and styles to our component
+// wrappers
+export const gridLayout = (node, metadata) => {
+  let selectComponent
+
+  // Applies the required listeners, CSS and classes to a component DOM node
+  const applyMetadata = metadata => {
+    const {
+      id,
+      styles,
+      interactive,
+      errored,
+      definition,
+      draggable,
+      insideGrid,
+      ignoresLayout,
+    } = metadata
+    if (!insideGrid) {
+      return
+    }
+
+    // If this component ignores layout, flag it as such so that we can avoid
+    // selecting it later
+    if (ignoresLayout) {
+      node.classList.add("ignores-layout")
+      return
+    }
+
+    // Callback to select the component when clicking on the wrapper
+    selectComponent = e => {
+      e.stopPropagation()
+      builderStore.actions.selectComponent(id)
+    }
+
+    // Determine default width and height of component
+    let width = errored ? 500 : definition?.size?.width || 200
+    let height = errored ? 60 : definition?.size?.height || 200
+    width += 2 * GridSpacing
+    height += 2 * GridSpacing
+    let vars = {
+      "--default-width": width,
+      "--default-height": height,
+    }
+
+    // Generate defaults for all grid params
+    const defaults = {
+      [GridParams.HAlign]: definition?.grid?.hAlign || "stretch",
+      [GridParams.VAlign]: definition?.grid?.vAlign || "center",
+      [GridParams.ColStart]: 1,
+      [GridParams.ColEnd]:
+        "round(up, calc((var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) + 1))",
+      [GridParams.RowStart]: 1,
+      [GridParams.RowEnd]: Math.max(2, Math.ceil(height / GridRowHeight) + 1),
+    }
+
+    // Specify values for all grid params for all devices, and strip these CSS
+    // variables from the styles being applied to the inner component, as we
+    // want to apply these to the wrapper instead
+    for (let param of Object.values(GridParams)) {
+      let dVar = getGridVar(Devices.Desktop, param)
+      let mVar = getGridVar(Devices.Mobile, param)
+      vars[dVar] = styles[dVar] ?? styles[mVar] ?? defaults[param]
+      vars[mVar] = styles[mVar] ?? styles[dVar] ?? defaults[param]
+    }
+
+    // Apply some overrides depending on component state
+    if (errored) {
+      vars[getGridVar(Devices.Desktop, GridParams.HAlign)] = "stretch"
+      vars[getGridVar(Devices.Mobile, GridParams.HAlign)] = "stretch"
+      vars[getGridVar(Devices.Desktop, GridParams.VAlign)] = "stretch"
+      vars[getGridVar(Devices.Mobile, GridParams.VAlign)] = "stretch"
+    }
+
+    // Apply some metadata to data attributes to speed up lookups
+    const addDataTag = (tagName, device, param) => {
+      const val = `${vars[getGridVar(device, param)]}`
+      if (node.dataset[tagName] !== val) {
+        node.dataset[tagName] = val
+      }
+    }
+    addDataTag("gridDesktopRowEnd", Devices.Desktop, GridParams.RowEnd)
+    addDataTag("gridMobileRowEnd", Devices.Mobile, GridParams.RowEnd)
+    addDataTag("gridDesktopHAlign", Devices.Desktop, GridParams.HAlign)
+    addDataTag("gridMobileHAlign", Devices.Mobile, GridParams.HAlign)
+    addDataTag("gridDesktopVAlign", Devices.Desktop, GridParams.VAlign)
+    addDataTag("gridMobileVAlign", Devices.Mobile, GridParams.VAlign)
+    if (node.dataset.insideGrid !== true) {
+      node.dataset.insideGrid = true
+    }
+
+    // Apply all CSS variables to the wrapper
+    node.style = buildStyleString(vars)
+
+    // Add a listener to select this node on click
+    if (interactive) {
+      node.addEventListener("click", selectComponent, false)
+    }
+
+    // Add draggable attribute
+    node.setAttribute("draggable", !!draggable)
+  }
+
+  // Removes the previously set up listeners
+  const removeListeners = () => {
+    // By checking if this is defined we can avoid trying to remove event
+    // listeners on every component
+    if (selectComponent) {
+      node.removeEventListener("click", selectComponent, false)
+      selectComponent = null
+    }
+  }
+
+  applyMetadata(metadata)
+
+  return {
+    update(newMetadata) {
+      removeListeners()
+      applyMetadata(newMetadata)
+    },
+    destroy() {
+      removeListeners()
+    },
+  }
+}

packages/client/src/utils/styleable.js

@@ -3,13 +3,13 @@ import { builderStore } from "stores"
 /**
  * Helper to build a CSS string from a style object.
  */
-const buildStyleString = (styleObject, customStyles) => {
+export const buildStyleString = (styleObject, customStyles) => {
   let str = ""
-  Object.entries(styleObject || {}).forEach(([style, value]) => {
+  for (let key of Object.keys(styleObject || {})) {
-    if (style && value != null) {
+    if (styleObject[key] != null) {
-      str += `${style}: ${value}; `
+      str += `${key}:${styleObject[key]};`
     }
-  })
+  }
   return str + (customStyles || "")
 }
 

packages/frontend-core/src/components/ClientAppSkeleton.svelte

@@ -58,7 +58,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    border-radius: 4px;
     overflow: hidden;
     background-color: var(--spectrum-global-color-gray-200);
   }

packages/frontend-core/src/utils/index.js

@@ -9,3 +9,4 @@ export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
 export * from "./theme"
+export * from "./settings"

packages/frontend-core/src/utils/memo.js

@@ -4,32 +4,23 @@ import { writable, get, derived } from "svelte/store"
 // subscribed children will only fire when a new value is actually set
 export const memo = initialValue => {
   const store = writable(initialValue)
+  let currentJSON = null
 
-  const tryUpdateValue = (newValue, currentValue) => {
+  const tryUpdateValue = newValue => {
-    // Sanity check for primitive equality
+    const newJSON = JSON.stringify(newValue)
-    if (currentValue === newValue) {
+    if (newJSON !== currentJSON) {
-      return
-    }
-
-    // Otherwise deep compare via JSON stringify
-    const currentString = JSON.stringify(currentValue)
-    const newString = JSON.stringify(newValue)
-    if (currentString !== newString) {
       store.set(newValue)
+      currentJSON = newJSON
     }
   }
 
   return {
     subscribe: store.subscribe,
-    set: newValue => {
+    set: tryUpdateValue,
-      const currentValue = get(store)
-      tryUpdateValue(newValue, currentValue)
-    },
     update: updateFn => {
-      const currentValue = get(store)
+      let mutableCurrentValue = JSON.parse(currentJSON)
-      let mutableCurrentValue = JSON.parse(JSON.stringify(currentValue))
       const newValue = updateFn(mutableCurrentValue)
-      tryUpdateValue(newValue, currentValue)
+      tryUpdateValue(newValue)
     },
   }
 }

packages/frontend-core/src/utils/settings.js

@@ -0,0 +1,43 @@
+import { helpers } from "@budibase/shared-core"
+
+// Util to check if a setting can be rendered for a certain instance, based on
+// the "dependsOn" metadata in the manifest
+export const shouldDisplaySetting = (instance, setting) => {
+  let dependsOn = setting.dependsOn
+  if (dependsOn && !Array.isArray(dependsOn)) {
+    dependsOn = [dependsOn]
+  }
+  if (!dependsOn?.length) {
+    return true
+  }
+
+  // Ensure all conditions are met
+  return dependsOn.every(condition => {
+    let dependantSetting = condition
+    let dependantValues = null
+    let invert = !!condition.invert
+    if (typeof condition === "object") {
+      dependantSetting = condition.setting
+      dependantValues = condition.value
+    }
+    if (!dependantSetting) {
+      return false
+    }
+
+    // Ensure values is an array
+    if (!Array.isArray(dependantValues)) {
+      dependantValues = [dependantValues]
+    }
+
+    // If inverting, we want to ensure that we don't have any matches.
+    // If not inverting, we want to ensure that we do have any matches.
+    const currentVal = helpers.deepGet(instance, dependantSetting)
+    const anyMatches = dependantValues.some(dependantVal => {
+      if (dependantVal == null) {
+        return currentVal != null && currentVal !== false && currentVal !== ""
+      }
+      return dependantVal === currentVal
+    })
+    return anyMatches !== invert
+  })
+}

yarn.lock

@@ -5127,6 +5127,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.2.12.tgz#9b08f23d5aa881b3441af7757800c7173e5685ff"
   integrity sha512-rPFUW9SSW4+3/UJ3UrtY2/l3sQvlqB1fqxHLPDjgykvbfrnMejcCTNV4ZrFNHXpE/6+kGnk+yVViSPtWGwJzkA==
 
+"@spectrum-css/tag@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-3.0.0.tgz#b2e335dc526713b83f3e995e8d1d4fc84a3fc4df"
+  integrity sha512-a9z7ZTAWPonkWRNY5kxVaO6bxu9de3qUZWJ9Bl1YBlwWc8Fy1L7XqT4Wq3pW+4sktUbUUqqPYPIXK9xEFDofEw==
+
 "@spectrum-css/tags@3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.2.tgz#5bf35fb79c97cd9344de485bd4626ad5b9f07757"