From d15d034af36b43058b3fd75dff3909e35fd39e02 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 28 Jul 2022 14:25:58 +0100
Subject: [PATCH 01/21] Add keyboard shortcuts for components. Improve
 component reordering

---
 .../src/builderStore/store/frontend.js        | 203 ++++++++++++++++--
 .../[screenId]/_components/AppPreview.svelte  |   4 +
 .../navigation/ComponentListPanel.svelte      |  79 ++++++-
 .../components/preview/KeyboardManager.svelte |  10 +-
 packages/client/src/stores/builder.js         |   4 +-
 5 files changed, 266 insertions(+), 34 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 58d803aa03..ff926bce1f 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -618,6 +618,16 @@ export const getFrontendStore = () => {
             }
           }
 
+          // Check inside is valid
+          if (mode === "inside") {
+            const definition = store.actions.components.getDefinition(
+              targetComponent._component
+            )
+            if (!definition.hasChildren) {
+              mode = "below"
+            }
+          }
+
           // Paste new component
           if (mode === "inside") {
             // Paste inside target component if chosen
@@ -654,46 +664,197 @@ export const getFrontendStore = () => {
           return state
         })
       },
+      selectPrevious: () => {
+        const state = get(store)
+        const componentId = state.selectedComponentId
+        const screen = get(selectedScreen)
+        const parent = findComponentParent(screen.props, componentId)
+        let newComponentId = componentId
+
+        // Check we aren't right at the top of the tree
+        const index = parent?._children.findIndex(x => x._id === componentId)
+        if (!parent || componentId === screen.props._id) {
+          return
+        }
+
+        // If we have siblings above us, choose the sibling or a descendant
+        if (index > 0) {
+          // If sibling before us accepts children, select a descendant
+          const previousSibling = parent._children[index - 1]
+          if (previousSibling._children?.length) {
+            let target = previousSibling
+            while (target._children?.length) {
+              target = target._children[target._children.length - 1]
+            }
+            newComponentId = target._id
+          }
+
+          // Otherwise just select sibling
+          else {
+            newComponentId = previousSibling._id
+          }
+        }
+
+        // If no siblings above us, select the parent
+        else {
+          newComponentId = parent._id
+        }
+
+        // Only update state if component changed
+        if (newComponentId !== componentId) {
+          store.update(state => {
+            state.selectedComponentId = newComponentId
+            return state
+          })
+        }
+      },
+      selectNext: () => {
+        const component = get(selectedComponent)
+        const componentId = component?._id
+        const screen = get(selectedScreen)
+        const parent = findComponentParent(screen.props, componentId)
+        const index = parent?._children.findIndex(x => x._id === componentId)
+        let newComponentId = componentId
+
+        // If we have children, select first child
+        if (component._children?.length) {
+          newComponentId = component._children[0]._id
+        } else if (!parent) {
+          return null
+        }
+
+        // Otherwise select the next sibling if we have one
+        else if (index < parent._children.length - 1) {
+          const nextSibling = parent._children[index + 1]
+          newComponentId = nextSibling._id
+        }
+
+        // Last child, select our parents next sibling
+        else {
+          let target = parent
+          let targetParent = findComponentParent(screen.props, target._id)
+          let targetIndex = targetParent?._children.findIndex(
+            child => child._id === target._id
+          )
+          while (
+            targetParent != null &&
+            targetIndex === targetParent._children?.length - 1
+          ) {
+            target = targetParent
+            targetParent = findComponentParent(screen.props, target._id)
+            targetIndex = targetParent?._children.findIndex(
+              child => child._id === target._id
+            )
+          }
+          if (targetParent) {
+            newComponentId = targetParent._children[targetIndex + 1]._id
+          }
+        }
+
+        // Only update state if component ID is different
+        if (newComponentId !== componentId) {
+          store.update(state => {
+            state.selectedComponentId = newComponentId
+            return state
+          })
+        }
+      },
       moveUp: async component => {
         await store.actions.screens.patch(screen => {
           const componentId = component?._id
           const parent = findComponentParent(screen.props, componentId)
-          if (!parent?._children?.length) {
-            return false
+
+          // Check we aren't right at the top of the tree
+          const index = parent?._children.findIndex(x => x._id === componentId)
+          if (!parent || (index === 0 && parent._id === screen.props._id)) {
+            return
           }
-          const currentIndex = parent._children.findIndex(
-            child => child._id === componentId
-          )
-          if (currentIndex === 0) {
-            return false
-          }
-          const originalComponent = cloneDeep(parent._children[currentIndex])
-          const newChildren = parent._children.filter(
+
+          // Copy original component and remove it from the parent
+          const originalComponent = cloneDeep(parent._children[index])
+          parent._children = parent._children.filter(
             component => component._id !== componentId
           )
-          newChildren.splice(currentIndex - 1, 0, originalComponent)
-          parent._children = newChildren
+
+          // If we have siblings above us, move up
+          if (index > 0) {
+            // If sibling before us accepts children, move to last child of
+            // sibling
+            const previousSibling = parent._children[index - 1]
+            const definition = store.actions.components.getDefinition(
+              previousSibling._component
+            )
+            if (definition.hasChildren) {
+              previousSibling._children.push(originalComponent)
+            }
+
+            // Otherwise just move component above sibling
+            else {
+              parent._children.splice(index - 1, 0, originalComponent)
+            }
+          }
+
+          // If no siblings above us, go above the parent as long as it isn't
+          // the screen
+          else if (parent._id !== screen.props._id) {
+            const grandParent = findComponentParent(screen.props, parent._id)
+            const parentIndex = grandParent._children.findIndex(
+              child => child._id === parent._id
+            )
+            grandParent._children.splice(parentIndex, 0, originalComponent)
+          }
         })
       },
       moveDown: async component => {
         await store.actions.screens.patch(screen => {
           const componentId = component?._id
           const parent = findComponentParent(screen.props, componentId)
+
+          // Sanity check parent is found
           if (!parent?._children?.length) {
             return false
           }
-          const currentIndex = parent._children.findIndex(
-            child => child._id === componentId
-          )
-          if (currentIndex === parent._children.length - 1) {
-            return false
+
+          // Check we aren't right at the bottom of the tree
+          const index = parent._children.findIndex(x => x._id === componentId)
+          if (
+            index === parent._children.length - 1 &&
+            parent._id === screen.props._id
+          ) {
+            return
           }
-          const originalComponent = cloneDeep(parent._children[currentIndex])
-          const newChildren = parent._children.filter(
+
+          // Copy the original component and remove from parent
+          const originalComponent = cloneDeep(parent._children[index])
+          parent._children = parent._children.filter(
             component => component._id !== componentId
           )
-          newChildren.splice(currentIndex + 1, 0, originalComponent)
-          parent._children = newChildren
+
+          // Move below the next sibling if we are not the last sibling
+          if (index < parent._children.length) {
+            // If the next sibling has children, become the first child
+            const nextSibling = parent._children[index]
+            const definition = store.actions.components.getDefinition(
+              nextSibling._component
+            )
+            if (definition.hasChildren) {
+              nextSibling._children.splice(0, 0, originalComponent)
+            }
+
+            // Otherwise move below next sibling
+            else {
+              parent._children.splice(index + 1, 0, originalComponent)
+            }
+          }
+
+          // Last child, so move below our parent
+          else {
+            const grandParent = findComponentParent(screen.props, parent._id)
+            const parentIndex = grandParent._children.findIndex(
+              child => child._id === parent._id
+            )
+            grandParent._children.splice(parentIndex + 1, 0, originalComponent)
+          }
         })
       },
       updateStyle: async (name, value) => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index abb956c9d3..dc22f93300 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -144,7 +144,11 @@
       } else if (type === "update-prop") {
         await store.actions.components.updateSetting(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
+        // Legacy type, can be deleted in future
         confirmDeleteComponent(data.id)
+      } else if (type === "key-down") {
+        const { key, ctrlKey } = data
+        document.dispatchEvent(new KeyboardEvent("keydown", { key, ctrlKey }))
       } else if (type === "duplicate-component" && data.id) {
         const rootComponent = get(currentAsset).props
         const component = findComponent(rootComponent, data.id)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 1bb4e3d9cd..e10015f964 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -2,16 +2,19 @@
   import Panel from "components/design/Panel.svelte"
   import ComponentTree from "./ComponentTree.svelte"
   import { dndStore } from "./dndStore.js"
-  import { goto } from "@roxi/routify"
-  import { store, selectedScreen } from "builderStore"
+  import { goto, isActive } from "@roxi/routify"
+  import { store, selectedScreen, selectedComponent } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
-  import { setContext } from "svelte"
+  import { setContext, onMount } from "svelte"
+  import { get } from "svelte/store"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { DropPosition } from "./dndStore"
   import { notifications } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   let scrollRef
+  let confirmDeleteDialog
 
   const scrollTo = bounds => {
     if (!bounds) {
@@ -69,6 +72,69 @@
   setContext("scroll", {
     scrollTo,
   })
+
+  const deleteComponent = async () => {
+    await store.actions.components.delete(get(selectedComponent))
+  }
+
+  const handleKeyPress = async e => {
+    // Ignore repeating events
+    if (e.repeat) {
+      return
+    }
+    // Ignore events when typing
+    const activeTag = document.activeElement?.tagName.toLowerCase()
+    if (["input", "textarea"].indexOf(activeTag) !== -1 && e.key !== "Escape") {
+      return
+    }
+    const component = get(selectedComponent)
+    try {
+      if (e.key === "Delete") {
+        e.preventDefault()
+        confirmDeleteDialog.show()
+      } else if (e.ctrlKey) {
+        if (e.key === "ArrowUp") {
+          e.preventDefault()
+          e.stopPropagation()
+          await store.actions.components.moveUp(component)
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault()
+          await store.actions.components.moveDown(component)
+        } else if (e.key === "c") {
+          e.preventDefault()
+          await store.actions.components.copy(component, false)
+        } else if (e.key === "x") {
+          e.preventDefault()
+          store.actions.components.copy(component, true)
+        } else if (e.key === "v") {
+          e.preventDefault()
+          await store.actions.components.paste(component, "inside")
+        } else if (e.key === "Enter") {
+          e.preventDefault()
+          $goto("./new")
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        await store.actions.components.selectPrevious()
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault()
+        await store.actions.components.selectNext()
+      } else if (e.key === "Escape" && $isActive("./new")) {
+        e.preventDefault()
+        $goto("./")
+      }
+    } catch (error) {
+      console.log(error)
+      notifications.error("Error handling key press")
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKeyPress)
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress)
+    }
+  })
 </script>
 
 <Panel
@@ -119,6 +185,13 @@
     </ul>
   </div>
 </Panel>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  body={`Are you sure you want to delete "${$selectedComponent?._instanceName}"?`}
+  okText="Delete Component"
+  onOk={deleteComponent}
+/>
 
 <style>
   .nav-items-container {
diff --git a/packages/client/src/components/preview/KeyboardManager.svelte b/packages/client/src/components/preview/KeyboardManager.svelte
index c0358088c5..7371874705 100644
--- a/packages/client/src/components/preview/KeyboardManager.svelte
+++ b/packages/client/src/components/preview/KeyboardManager.svelte
@@ -16,20 +16,14 @@
   })
 
   const onKeyDown = e => {
-    if (e.key === "Delete" || e.key === "Backspace") {
-      deleteSelectedComponent()
-    }
-  }
-
-  const deleteSelectedComponent = () => {
     const state = get(builderStore)
-    if (!state.inBuilder || !state.selectedComponentId || state.editMode) {
+    if (!state.inBuilder || state.editMode) {
       return
     }
     const activeTag = document.activeElement?.tagName.toLowerCase()
     if (["input", "textarea"].indexOf(activeTag) !== -1) {
       return
     }
-    builderStore.actions.deleteComponent(state.selectedComponentId)
+    builderStore.actions.keyDown(e.key, e.ctrlKey)
   }
 </script>
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 9d85eee022..af81fc33c8 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -39,8 +39,8 @@ const createBuilderStore = () => {
     updateProp: (prop, value) => {
       dispatchEvent("update-prop", { prop, value })
     },
-    deleteComponent: id => {
-      dispatchEvent("delete-component", { id })
+    keyDown: (key, ctrlKey) => {
+      dispatchEvent("key-down", { key, ctrlKey })
     },
     duplicateComponent: id => {
       dispatchEvent("duplicate-component", { id })

From 4b500eb26fa897ad9f5a9c0ce91a765ab2775f50 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 28 Jul 2022 14:38:29 +0100
Subject: [PATCH 02/21] Prevent showing deletion modal for the screen element

---
 .../navigation/ComponentListPanel.svelte      | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index e10015f964..76d5483be9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -90,12 +90,24 @@
     const component = get(selectedComponent)
     try {
       if (e.key === "Delete") {
+        // Don't show confirmation for the screen itself
+        if (component._id === get(selectedScreen).props._id) {
+          return
+        }
         e.preventDefault()
         confirmDeleteDialog.show()
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        await store.actions.components.selectPrevious()
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault()
+        await store.actions.components.selectNext()
+      } else if (e.key === "Escape" && $isActive("./new")) {
+        e.preventDefault()
+        $goto("./")
       } else if (e.ctrlKey) {
         if (e.key === "ArrowUp") {
           e.preventDefault()
-          e.stopPropagation()
           await store.actions.components.moveUp(component)
         } else if (e.key === "ArrowDown") {
           e.preventDefault()
@@ -113,15 +125,6 @@
           e.preventDefault()
           $goto("./new")
         }
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault()
-        await store.actions.components.selectPrevious()
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault()
-        await store.actions.components.selectNext()
-      } else if (e.key === "Escape" && $isActive("./new")) {
-        e.preventDefault()
-        $goto("./")
       }
     } catch (error) {
       console.log(error)

From 99010ad770b32467b25b697891bc68df577a6916 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 28 Jul 2022 14:38:50 +0100
Subject: [PATCH 03/21] Auto focus modals so that escape and enter keys work
 without mouse intervention

---
 packages/bbui/src/Modal/Modal.svelte | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 706ee56bb2..85a3d25e49 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -11,6 +11,8 @@
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
+  let modal
+
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -41,12 +43,22 @@
     }
   }
 
-  async function focusFirstInput(node) {
+  async function focusModal(node) {
+    await tick()
+
+    // Try to focus first input
     const inputs = node.querySelectorAll("input")
     if (inputs?.length) {
-      await tick()
       inputs[0].focus()
     }
+
+    // Otherwise try to focus confirmation button
+    else if (modal) {
+      const confirm = modal.querySelector(".confirm-wrap .spectrum-Button")
+      if (confirm) {
+        confirm.focus()
+      }
+    }
   }
 
   setContext(Context.Modal, { show, hide, cancel })
@@ -56,7 +68,7 @@
 
 {#if inline}
   {#if visible}
-    <div use:focusFirstInput class="spectrum-Modal inline is-open">
+    <div use:focusModal bind:this={modal} class="spectrum-Modal inline is-open">
       <slot />
     </div>
   {/if}
@@ -80,7 +92,8 @@
           <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
             <slot name="outside" />
             <div
-              use:focusFirstInput
+              use:focusModal
+              bind:this={modal}
               class="spectrum-Modal is-open"
               in:fly={{ y: 30, duration: 200 }}
               out:fly|local={{ y: 30, duration: 200 }}

From 3adb95df558cf807d01c7630a17dcdd42f561ced Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 11:44:57 +0100
Subject: [PATCH 04/21] Fix button roundess not applying properly to large and
 XL buttons

---
 .../client/src/components/CustomThemeWrapper.svelte  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index 919aa13926..20dae01ce0 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/packages/client/src/components/CustomThemeWrapper.svelte
@@ -17,10 +17,16 @@
     --spectrum-semantic-cta-color-background-default: var(--primaryColor);
     --spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);
     --spectrum-semantic-cta-color-background-down: var(--primaryColorHover);
-    --spectrum-button-primary-s-border-radius: var(--buttonBorderRadius);
+    --spectrum-button-primary-s-border-radius: calc(
+      var(--buttonBorderRadius) * 0.9
+    );
     --spectrum-button-primary-m-border-radius: var(--buttonBorderRadius);
-    --spectrum-button-primary-l-border-radius: var(--buttonBorderRadius);
-    --spectrum-button-primary-xl-border-radius: var(--buttonBorderRadius);
+    --spectrum-button-primary-l-border-radius: calc(
+      var(--buttonBorderRadius) * 1.25
+    );
+    --spectrum-button-primary-xl-border-radius: calc(
+      var(--buttonBorderRadius) * 1.5
+    );
 
     /* Loading spinners */
     --spectrum-progresscircle-medium-track-fill-color: var(--primaryColor);

From e83543151ea86ffc2c6e7aec7738d65572375391 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 11:52:10 +0100
Subject: [PATCH 05/21] Add support for custom themes in client apps

---
 packages/client/src/components/ClientApp.svelte | 2 +-
 packages/client/src/components/app/index.js     | 2 ++
 packages/client/src/stores/theme.js             | 9 +++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 64b1712b89..8312fb29d1 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -92,7 +92,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium spectrum--darkest {$themeStore.theme}"
+    class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
   >
     <DeviceBindingsProvider>
       <UserBindingsProvider>
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index c7b8f18643..1c0d868433 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -5,6 +5,8 @@ import "@spectrum-css/vars/dist/spectrum-darkest.css"
 import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-lightest.css"
+import "@budibase/frontend-core/src/themes/nord.css"
+import "@budibase/frontend-core/src/themes/midnight.css"
 import "@spectrum-css/page/dist/index-vars.css"
 
 // Non user-facing components
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index 995dafbedc..8877556f0c 100644
--- a/packages/client/src/stores/theme.js
+++ b/packages/client/src/stores/theme.js
@@ -1,6 +1,7 @@
 import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
+import { Constants } from "@budibase/frontend-core"
 
 // This is the good old acorn bug where having the word "g l o b a l" makes it
 // think that this is not ES6 compatible and starts throwing errors when using
@@ -28,6 +29,13 @@ const createThemeStore = () => {
       // Ensure theme is set
       theme = theme || defaultTheme
 
+      // Get base theme
+      let base =
+        Constants.Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
+      if (base) {
+        base = `spectrum--${base}`
+      }
+
       // Delete and nullish keys from the custom theme
       if (customTheme) {
         Object.entries(customTheme).forEach(([key, value]) => {
@@ -51,6 +59,7 @@ const createThemeStore = () => {
 
       return {
         theme,
+        baseTheme: base,
         customTheme,
         customThemeCss,
       }

From 4158513bf4a90b6d9f688973e267b10f652ca2a7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 11:52:54 +0100
Subject: [PATCH 06/21] Fix keybinding order precendence

---
 .../navigation/ComponentListPanel.svelte      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 76d5483be9..b8ce275722 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -89,23 +89,7 @@
     }
     const component = get(selectedComponent)
     try {
-      if (e.key === "Delete") {
-        // Don't show confirmation for the screen itself
-        if (component._id === get(selectedScreen).props._id) {
-          return
-        }
-        e.preventDefault()
-        confirmDeleteDialog.show()
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault()
-        await store.actions.components.selectPrevious()
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault()
-        await store.actions.components.selectNext()
-      } else if (e.key === "Escape" && $isActive("./new")) {
-        e.preventDefault()
-        $goto("./")
-      } else if (e.ctrlKey) {
+      if (e.ctrlKey) {
         if (e.key === "ArrowUp") {
           e.preventDefault()
           await store.actions.components.moveUp(component)
@@ -125,6 +109,22 @@
           e.preventDefault()
           $goto("./new")
         }
+      } else if (e.key === "Delete") {
+        // Don't show confirmation for the screen itself
+        if (component._id === get(selectedScreen).props._id) {
+          return
+        }
+        e.preventDefault()
+        confirmDeleteDialog.show()
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        await store.actions.components.selectPrevious()
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault()
+        await store.actions.components.selectNext()
+      } else if (e.key === "Escape" && $isActive("./new")) {
+        e.preventDefault()
+        $goto("./")
       }
     } catch (error) {
       console.log(error)

From df759ac20a7a81dd6c888378b6ea95c61e197098 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 11:53:07 +0100
Subject: [PATCH 07/21] Offer custom themes for client apps and improve theme
 panel

---
 .../theme/_components/AppThemeSelect.svelte   | 71 ++++++++++++-------
 .../_components/ButtonRoundnessSelect.svelte  | 38 ++++++++++
 .../_components/ThemeSettingsPanel.svelte     | 67 ++---------------
 3 files changed, 88 insertions(+), 88 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
index accd156c29..86a897bf60 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
@@ -1,20 +1,11 @@
 <script>
-  import { notifications, Slider, Icon } from "@budibase/bbui"
+  import { notifications } from "@budibase/bbui"
   import { store } from "builderStore"
+  import { Constants } from "@budibase/frontend-core"
 
-  const ThemeOptions = [
-    "spectrum--darkest",
-    "spectrum--dark",
-    "spectrum--light",
-    "spectrum--lightest",
-  ]
-
-  $: themeIndex = ThemeOptions.indexOf($store.theme) ?? 2
-
-  const onChangeTheme = async e => {
+  const onChangeTheme = async theme => {
     try {
-      const theme = ThemeOptions[e.detail] ?? ThemeOptions[2]
-      await store.actions.theme.save(theme)
+      await store.actions.theme.save(`spectrum--${theme}`)
     } catch (error) {
       notifications.error("Error updating theme")
     }
@@ -22,26 +13,52 @@
 </script>
 
 <div class="container">
-  <Icon name="Moon" />
-  <Slider
-    min={0}
-    max={3}
-    step={1}
-    value={themeIndex}
-    on:change={onChangeTheme}
-  />
-  <Icon name="Light" />
+  {#each Constants.Themes as theme}
+    <div
+      class="theme"
+      class:selected={`spectrum--${theme.class}` === $store.theme}
+      on:click={() => onChangeTheme(theme.class)}
+    >
+      <div
+        style="background: {theme.preview}"
+        class="color spectrum--{theme.class}"
+      />
+      {theme.name}
+    </div>
+  {/each}
 </div>
 
 <style>
-  div {
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+  }
+  .color {
+    width: 20px;
+    height: 20px;
+    border-radius: 50px;
+    background: var(--spectrum-global-color-gray-200);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .theme {
+    border-radius: 4px;
+    padding: var(--spacing-s) var(--spacing-m);
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-m);
+    gap: var(--spacing-xl);
+    transition: background 130ms ease-out;
+    font-weight: 600;
+    color: var(--spectrum-global-color-gray-900);
   }
-  div :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
+  .theme:hover {
+    cursor: pointer;
+  }
+  .theme.selected,
+  .theme:hover {
+    background: var(--spectrum-global-color-gray-50);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
new file mode 100644
index 0000000000..21b04f694f
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { Slider, Button } from "@budibase/bbui"
+
+  export let customTheme
+
+  const dispatch = createEventDispatcher()
+  const options = ["0", "4px", "8px", "16px"]
+
+  $: index = options.indexOf(customTheme.buttonBorderRadius) ?? 2
+
+  const onChange = async e => {
+    dispatch("change", options[e.detail])
+  }
+</script>
+
+<div class="container">
+  <Slider min={0} max={3} step={1} value={index} on:change={onChange} />
+  <div class="button" style="--radius: {customTheme.buttonBorderRadius};">
+    <Button primary newStyles>Button</Button>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .container :global(.spectrum-Form-item) {
+    flex: 1 1 auto;
+  }
+  .button :global(.spectrum-Button) {
+    border-radius: var(--radius) !important;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
index 4bad3b7bc4..19184a8644 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
@@ -11,25 +11,7 @@
   import { get } from "svelte/store"
   import { DefaultAppTheme } from "constants"
   import AppThemeSelect from "./AppThemeSelect.svelte"
-
-  const ButtonBorderRadiusOptions = [
-    {
-      label: "Square",
-      value: "0",
-    },
-    {
-      label: "Soft edge",
-      value: "4px",
-    },
-    {
-      label: "Curved",
-      value: "8px",
-    },
-    {
-      label: "Round",
-      value: "16px",
-    },
-  ]
+  import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
 
   $: customTheme = $store.customTheme || {}
 
@@ -52,22 +34,11 @@
       <AppThemeSelect />
     </Layout>
     <Layout noPadding gap="XS">
-      <Label>Buttons</Label>
-      <div class="buttons">
-        {#each ButtonBorderRadiusOptions as option}
-          <div
-            class:active={customTheme.buttonBorderRadius === option.value}
-            style={`--radius: ${option.value}`}
-          >
-            <Button
-              secondary
-              on:click={() => update("buttonBorderRadius", option.value)}
-            >
-              {option.label}
-            </Button>
-          </div>
-        {/each}
-      </div>
+      <Label>Button roundness</Label>
+      <ButtonRoundnessSelect
+        {customTheme}
+        on:change={e => update("buttonBorderRadius", e.detail)}
+      />
     </Layout>
     <Layout noPadding gap="XS">
       <Label>Accent color</Label>
@@ -88,29 +59,3 @@
     </Layout>
   </Layout>
 </Panel>
-
-<style>
-  .buttons {
-    display: grid;
-    grid-template-columns: 100px 100px;
-    gap: var(--spacing-m);
-  }
-  .buttons > div {
-    display: contents;
-  }
-  .buttons > div :global(.spectrum-Button) {
-    border-radius: var(--radius) !important;
-    border-width: 1px;
-    border-color: var(--spectrum-global-color-gray-400);
-    font-weight: 600;
-  }
-  .buttons > div:hover :global(.spectrum-Button) {
-    background: var(--spectrum-global-color-gray-700);
-    border-color: var(--spectrum-global-color-gray-700);
-  }
-  .buttons > div.active :global(.spectrum-Button) {
-    background: var(--spectrum-global-color-gray-200);
-    color: var(--spectrum-global-color-gray-800);
-    border-color: var(--spectrum-global-color-gray-600);
-  }
-</style>

From 5737e23dd6b7e5463a00316e7c6d7e8a8adaf8f3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 12:10:53 +0100
Subject: [PATCH 08/21] Add keybindings to component context menu. Add
 duplicate keybinding. Simplify pasting

---
 packages/bbui/src/Menu/Item.svelte            | 13 +++++
 .../navigation/ComponentDropdownMenu.svelte   | 54 +++++++++++--------
 .../navigation/ComponentListPanel.svelte      |  4 ++
 .../components/preview/KeyboardManager.svelte |  6 +++
 4 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index a5609683a8..138eb33b35 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -8,6 +8,7 @@
   export let icon = undefined
   export let disabled = undefined
   export let noClose = false
+  export let keyBind = undefined
 
   const onClick = () => {
     if (actionMenu && !noClose) {
@@ -36,10 +37,22 @@
     </svg>
   {/if}
   <span class="spectrum-Menu-itemLabel"><slot /></span>
+  {#if keyBind}
+    <div class="keyBind">
+      {keyBind}
+    </div>
+  {/if}
 </li>
 
 <style>
   .spectrum-Menu-itemIcon {
     align-self: center;
   }
+  .keyBind {
+    margin-left: var(--spacing-xl);
+    color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 600;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
index ed66c66c29..d2e35b8364 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
@@ -64,44 +64,54 @@
     <div slot="control" class="icon">
       <Icon size="S" hoverable name="MoreSmallList" />
     </div>
-    <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
+    <MenuItem icon="Delete" keyBind="Del" on:click={confirmDeleteDialog.show}>
       Delete
     </MenuItem>
-    <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
+    <MenuItem
+      noClose
+      icon="ChevronUp"
+      keyBind="Ctrl+↑"
+      on:click={moveUpComponent}
+    >
       Move up
     </MenuItem>
-    <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
+    <MenuItem
+      noClose
+      icon="ChevronDown"
+      keyBind="Ctrl+↓"
+      on:click={moveDownComponent}
+    >
       Move down
     </MenuItem>
-    <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
+    <MenuItem
+      noClose
+      icon="Duplicate"
+      keyBind="Ctrl+D"
+      on:click={duplicateComponent}
+    >
       Duplicate
     </MenuItem>
-    <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
+    <MenuItem
+      icon="Cut"
+      keyBind="Ctrl+X"
+      on:click={() => storeComponentForCopy(true)}
+    >
       Cut
     </MenuItem>
-    <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
+    <MenuItem
+      icon="Copy"
+      keyBind="Ctrl+C"
+      on:click={() => storeComponentForCopy(false)}
+    >
       Copy
     </MenuItem>
-    <MenuItem
-      icon="LayersBringToFront"
-      on:click={() => pasteComponent("above")}
-      disabled={noPaste}
-    >
-      Paste above
-    </MenuItem>
     <MenuItem
       icon="LayersSendToBack"
-      on:click={() => pasteComponent("below")}
+      keyBind="Ctrl+V"
+      on:click={() => pasteComponent("inside")}
       disabled={noPaste}
     >
-      Paste below
-    </MenuItem>
-    <MenuItem
-      icon="ShowOneLayer"
-      on:click={() => pasteComponent("inside")}
-      disabled={noPaste || noChildrenAllowed}
-    >
-      Paste inside
+      Paste
     </MenuItem>
   </ActionMenu>
   <ConfirmDialog
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index b8ce275722..c8926c325c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -105,6 +105,10 @@
         } else if (e.key === "v") {
           e.preventDefault()
           await store.actions.components.paste(component, "inside")
+        } else if (e.key === "d") {
+          e.preventDefault()
+          await store.actions.components.copy(component)
+          await store.actions.components.paste(component, "below")
         } else if (e.key === "Enter") {
           e.preventDefault()
           $goto("./new")
diff --git a/packages/client/src/components/preview/KeyboardManager.svelte b/packages/client/src/components/preview/KeyboardManager.svelte
index 7371874705..1eedb0fde7 100644
--- a/packages/client/src/components/preview/KeyboardManager.svelte
+++ b/packages/client/src/components/preview/KeyboardManager.svelte
@@ -24,6 +24,12 @@
     if (["input", "textarea"].indexOf(activeTag) !== -1) {
       return
     }
+
+    // Need to manually block certain keys from propagating to the browser
+    if (e.ctrlKey && e.key === "d") {
+      e.preventDefault()
+    }
+
     builderStore.actions.keyDown(e.key, e.ctrlKey)
   }
 </script>

From 65e43b0f70c65dc964d1d08d0d0169e00848d9ad Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 13:05:50 +0100
Subject: [PATCH 09/21] Improve component selection after deleting a component

---
 .../src/builderStore/store/frontend.js        | 108 +++++++++---------
 1 file changed, 57 insertions(+), 51 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index ff926bce1f..c7795d4b54 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -534,7 +534,16 @@ export const getFrontendStore = () => {
         if (!component) {
           return
         }
-        let parentId
+
+        // Determine the next component to select after deletion
+        const state = get(store)
+        let nextSelectedComponentId
+        if (state.selectedComponentId === component._id) {
+          nextSelectedComponentId = store.actions.components.getNext()
+          if (!nextSelectedComponentId) {
+            nextSelectedComponentId = store.actions.components.getPrevious()
+          }
+        }
 
         // Patch screen
         await store.actions.screens.patch(screen => {
@@ -549,17 +558,18 @@ export const getFrontendStore = () => {
           if (!parent) {
             return false
           }
-          parentId = parent._id
           parent._children = parent._children.filter(
             child => child._id !== component._id
           )
         })
 
-        // Select the deleted component's parent
-        store.update(state => {
-          state.selectedComponentId = parentId
-          return state
-        })
+        // Update selected component if required
+        if (nextSelectedComponentId) {
+          store.update(state => {
+            state.selectedComponentId = nextSelectedComponentId
+            return state
+          })
+        }
       },
       copy: (component, cut = false, selectParent = true) => {
         // Update store with copied component
@@ -664,17 +674,16 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      selectPrevious: () => {
+      getPrevious: () => {
         const state = get(store)
         const componentId = state.selectedComponentId
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
-        let newComponentId = componentId
 
         // Check we aren't right at the top of the tree
         const index = parent?._children.findIndex(x => x._id === componentId)
         if (!parent || componentId === screen.props._id) {
-          return
+          return null
         }
 
         // If we have siblings above us, choose the sibling or a descendant
@@ -686,75 +695,72 @@ export const getFrontendStore = () => {
             while (target._children?.length) {
               target = target._children[target._children.length - 1]
             }
-            newComponentId = target._id
+            return target._id
           }
 
           // Otherwise just select sibling
-          else {
-            newComponentId = previousSibling._id
-          }
+          return previousSibling._id
         }
 
         // If no siblings above us, select the parent
-        else {
-          newComponentId = parent._id
-        }
-
-        // Only update state if component changed
-        if (newComponentId !== componentId) {
-          store.update(state => {
-            state.selectedComponentId = newComponentId
-            return state
-          })
-        }
+        return parent._id
       },
-      selectNext: () => {
+      getNext: () => {
         const component = get(selectedComponent)
         const componentId = component?._id
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
-        let newComponentId = componentId
 
         // If we have children, select first child
         if (component._children?.length) {
-          newComponentId = component._children[0]._id
+          return component._children[0]._id
         } else if (!parent) {
           return null
         }
 
         // Otherwise select the next sibling if we have one
-        else if (index < parent._children.length - 1) {
+        if (index < parent._children.length - 1) {
           const nextSibling = parent._children[index + 1]
-          newComponentId = nextSibling._id
+          return nextSibling._id
         }
 
         // Last child, select our parents next sibling
-        else {
-          let target = parent
-          let targetParent = findComponentParent(screen.props, target._id)
-          let targetIndex = targetParent?._children.findIndex(
+        let target = parent
+        let targetParent = findComponentParent(screen.props, target._id)
+        let targetIndex = targetParent?._children.findIndex(
+          child => child._id === target._id
+        )
+        while (
+          targetParent != null &&
+          targetIndex === targetParent._children?.length - 1
+        ) {
+          target = targetParent
+          targetParent = findComponentParent(screen.props, target._id)
+          targetIndex = targetParent?._children.findIndex(
             child => child._id === target._id
           )
-          while (
-            targetParent != null &&
-            targetIndex === targetParent._children?.length - 1
-          ) {
-            target = targetParent
-            targetParent = findComponentParent(screen.props, target._id)
-            targetIndex = targetParent?._children.findIndex(
-              child => child._id === target._id
-            )
-          }
-          if (targetParent) {
-            newComponentId = targetParent._children[targetIndex + 1]._id
-          }
         }
-
-        // Only update state if component ID is different
-        if (newComponentId !== componentId) {
+        if (targetParent) {
+          return targetParent._children[targetIndex + 1]._id
+        } else {
+          return null
+        }
+      },
+      selectPrevious: () => {
+        const previousId = store.actions.components.getPrevious()
+        if (previousId) {
           store.update(state => {
-            state.selectedComponentId = newComponentId
+            state.selectedComponentId = previousId
+            return state
+          })
+        }
+      },
+      selectNext: () => {
+        const nextId = store.actions.components.getNext()
+        if (nextId) {
+          store.update(state => {
+            state.selectedComponentId = nextId
             return state
           })
         }

From cfe10e36e411550922bc70e2f9fe43fea7c9bd8d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 13:10:02 +0100
Subject: [PATCH 10/21] Add key binds to screenslot component

---
 packages/bbui/src/Menu/Item.svelte                    |  3 +++
 .../navigation/ScreenslotDropdownMenu.svelte          | 11 ++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index 138eb33b35..495bb8d71f 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -55,4 +55,7 @@
     font-size: 12px;
     font-weight: 600;
   }
+  .is-disabled .keyBind {
+    color: var(--spectrum-global-color-gray-300);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
index 7ec7b0821c..9d4486096f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
@@ -31,15 +31,20 @@
     <div slot="control" class="icon">
       <Icon size="S" hoverable name="MoreSmallList" />
     </div>
-    <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
+    <MenuItem
+      icon="Copy"
+      keyBind="Ctrl+C"
+      on:click={() => storeComponentForCopy(false)}
+    >
       Copy
     </MenuItem>
     <MenuItem
-      icon="ShowOneLayer"
+      icon="LayersSendToBack"
+      keyBind="Ctrl+V"
       on:click={() => pasteComponent("inside")}
       disabled={noPaste}
     >
-      Paste inside
+      Paste
     </MenuItem>
   </ActionMenu>
 {/if}

From 447f463ec5c13930ebdfd47a324dbb36d86c30a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 13:11:50 +0100
Subject: [PATCH 11/21] Fix icon colors being static grey in automation section

---
 .../automation/AutomationBuilder/FlowChart/FlowItem.svelte      | 2 +-
 .../AutomationBuilder/FlowChart/FlowItemHeader.svelte           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index c1618a890f..dd8fa7df46 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -162,7 +162,7 @@
             width="28px"
             height="28px"
             class="spectrum-Icon"
-            style="color:grey;"
+            style="color:var(--spectrum-global-color-gray-700);"
             focusable="false"
           >
             <use xlink:href="#spectrum-icon-18-Reuse" />
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index 99c6f251f9..676af0d17c 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -63,7 +63,7 @@
           width="28px"
           height="28px"
           class="spectrum-Icon"
-          style="color:grey;"
+          style="color:var(--spectrum-global-color-gray-700);"
           focusable="false"
         >
           <use xlink:href="#spectrum-icon-18-{block.icon}" />

From 808de3bbfbadceb46fe37a54eae3344ab1da5cd5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 1 Aug 2022 09:54:30 +0100
Subject: [PATCH 12/21] Update modal background colours to be themeable and use
 theme colours for nord and midnight

---
 packages/bbui/src/Modal/Modal.svelte          | 24 +++++++++++++------
 .../frontend-core/src/themes/midnight.css     |  2 ++
 packages/frontend-core/src/themes/nord.css    |  2 ++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 85a3d25e49..47420444a2 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -82,12 +82,12 @@
   -->
   <Portal target=".modal-container">
     {#if visible}
-      <div
-        class="spectrum-Underlay is-open"
-        in:fade={{ duration: 200 }}
-        out:fade|local={{ duration: 200 }}
-        on:mousedown|self={cancel}
-      >
+      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
+        <div
+          class="background"
+          in:fade={{ duration: 200 }}
+          out:fade|local={{ duration: 200 }}
+        />
         <div class="modal-wrapper" on:mousedown|self={cancel}>
           <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
             <slot name="outside" />
@@ -116,7 +116,17 @@
     z-index: 999;
     overflow: auto;
     overflow-x: hidden;
-    background: rgba(0, 0, 0, 0.75);
+    background: transparent;
+  }
+  .background {
+    background: var(--modal-background, rgba(0, 0, 0, 0.75));
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    opacity: 0.65;
+    pointer-events: none;
   }
 
   .modal-wrapper {
diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css
index 528d847702..f2b4650ebf 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -12,5 +12,7 @@
     --spectrum-global-color-gray-700: hsl(var(--hue), var(--sat), 70%);
     --spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 80%);
     --spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
+
+    --modal-background: var(--spectrum-global-color-gray-50);
 }
 
diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index ebcf7efaf9..05a4215e41 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -43,4 +43,6 @@
 
   --spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.1);
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
+
+  --modal-background: var(--spectrum-global-color-gray-50);
 }

From f07fd31e6852a310ba94e487758fb4cde4931a6a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 1 Aug 2022 10:06:01 +0100
Subject: [PATCH 13/21] Dedupe component actions by dispatching keyboard events
 when clicking component dropdown menu

---
 .../navigation/ComponentDropdownMenu.svelte   | 174 ++++++------------
 1 file changed, 58 insertions(+), 116 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
index d2e35b8364..f01d49f8e8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
@@ -1,127 +1,69 @@
 <script>
   import { store } from "builderStore"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
 
-  export let component
-
-  let confirmDeleteDialog
-
-  $: definition = store.actions.components.getDefinition(component?._component)
-  $: noChildrenAllowed = !component || !definition?.hasChildren
   $: noPaste = !$store.componentToPaste
 
-  // "editable" has been repurposed for inline text editing.
-  // It remains here for legacy compatibility.
-  // Future components should define "static": true for indicate they should
-  // not show a context menu.
-  $: showMenu = definition?.editable !== false && definition?.static !== true
-
-  const moveUpComponent = async () => {
-    try {
-      await store.actions.components.moveUp(component)
-    } catch (error) {
-      notifications.error("Error moving component up")
-    }
-  }
-
-  const moveDownComponent = async () => {
-    try {
-      await store.actions.components.moveDown(component)
-    } catch (error) {
-      notifications.error("Error moving component down")
-    }
-  }
-
-  const duplicateComponent = () => {
-    storeComponentForCopy(false)
-    pasteComponent("below")
-  }
-
-  const deleteComponent = async () => {
-    try {
-      await store.actions.components.delete(component)
-    } catch (error) {
-      notifications.error("Error deleting component")
-    }
-  }
-
-  const storeComponentForCopy = (cut = false) => {
-    store.actions.components.copy(component, cut)
-  }
-
-  const pasteComponent = mode => {
-    try {
-      store.actions.components.paste(component, mode)
-    } catch (error) {
-      notifications.error("Error saving component")
-    }
+  const keyboardEvent = (key, ctrlKey = false) => {
+    document.dispatchEvent(new KeyboardEvent("keydown", { key, ctrlKey }))
   }
 </script>
 
-{#if showMenu}
-  <ActionMenu>
-    <div slot="control" class="icon">
-      <Icon size="S" hoverable name="MoreSmallList" />
-    </div>
-    <MenuItem icon="Delete" keyBind="Del" on:click={confirmDeleteDialog.show}>
-      Delete
-    </MenuItem>
-    <MenuItem
-      noClose
-      icon="ChevronUp"
-      keyBind="Ctrl+↑"
-      on:click={moveUpComponent}
-    >
-      Move up
-    </MenuItem>
-    <MenuItem
-      noClose
-      icon="ChevronDown"
-      keyBind="Ctrl+↓"
-      on:click={moveDownComponent}
-    >
-      Move down
-    </MenuItem>
-    <MenuItem
-      noClose
-      icon="Duplicate"
-      keyBind="Ctrl+D"
-      on:click={duplicateComponent}
-    >
-      Duplicate
-    </MenuItem>
-    <MenuItem
-      icon="Cut"
-      keyBind="Ctrl+X"
-      on:click={() => storeComponentForCopy(true)}
-    >
-      Cut
-    </MenuItem>
-    <MenuItem
-      icon="Copy"
-      keyBind="Ctrl+C"
-      on:click={() => storeComponentForCopy(false)}
-    >
-      Copy
-    </MenuItem>
-    <MenuItem
-      icon="LayersSendToBack"
-      keyBind="Ctrl+V"
-      on:click={() => pasteComponent("inside")}
-      disabled={noPaste}
-    >
-      Paste
-    </MenuItem>
-  </ActionMenu>
-  <ConfirmDialog
-    bind:this={confirmDeleteDialog}
-    title="Confirm Deletion"
-    body={`Are you sure you wish to delete this '${definition?.name}' component?`}
-    okText="Delete Component"
-    onOk={deleteComponent}
-  />
-{/if}
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
+  </div>
+  <MenuItem
+    icon="Delete"
+    keyBind="Del"
+    on:click={() => keyboardEvent("Delete")}
+  >
+    Delete
+  </MenuItem>
+  <MenuItem
+    icon="ChevronUp"
+    keyBind="Ctrl+↑"
+    on:click={() => keyboardEvent("ArrowUp", true)}
+  >
+    Move up
+  </MenuItem>
+  <MenuItem
+    icon="ChevronDown"
+    keyBind="Ctrl+↓"
+    on:click={() => keyboardEvent("ArrowDown", true)}
+  >
+    Move down
+  </MenuItem>
+  <MenuItem
+    icon="Duplicate"
+    keyBind="Ctrl+D"
+    on:click={() => keyboardEvent("d", true)}
+  >
+    Duplicate
+  </MenuItem>
+  <MenuItem
+    icon="Cut"
+    keyBind="Ctrl+X"
+    on:click={() => keyboardEvent("x", true)}
+  >
+    Cut
+  </MenuItem>
+  <MenuItem
+    icon="Copy"
+    keyBind="Ctrl+C"
+    on:click={() => keyboardEvent("c", true)}
+  >
+    Copy
+  </MenuItem>
+  <MenuItem
+    icon="LayersSendToBack"
+    keyBind="Ctrl+V"
+    on:click={() => keyboardEvent("v", true)}
+    disabled={noPaste}
+  >
+    Paste
+  </MenuItem>
+</ActionMenu>
 
 <style>
   .icon {

From 4d47d06991d9179e0c525306c4cb1ec0c9b8d3b7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 1 Aug 2022 10:20:46 +0100
Subject: [PATCH 14/21] Lint

---
 .../theme/_components/ThemeSettingsPanel.svelte           | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
index 19184a8644..1c86a51f67 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
@@ -1,12 +1,6 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import {
-    Layout,
-    Label,
-    ColorPicker,
-    Button,
-    notifications,
-  } from "@budibase/bbui"
+  import { Layout, Label, ColorPicker, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import { get } from "svelte/store"
   import { DefaultAppTheme } from "constants"

From 530b6940d4e28d796e5ec315254e824f8843ed73 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 2 Aug 2022 10:01:24 +0100
Subject: [PATCH 15/21] Update style of keybinds for menu items

---
 packages/bbui/src/Menu/Item.svelte | 49 ++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index 495bb8d71f..ba103460c0 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -10,6 +10,21 @@
   export let noClose = false
   export let keyBind = undefined
 
+  $: keys = getKeys(keyBind)
+
+  const getKeys = keyBind => {
+    let keys = keyBind?.split("+") || []
+    for (let i = 0; i < keys.length; i++) {
+      if (
+        keys[i].toLowerCase() === "ctrl" &&
+        navigator.platform.startsWith("Mac")
+      ) {
+        keys[i] = "⌘"
+      }
+    }
+    return keys
+  }
+
   const onClick = () => {
     if (actionMenu && !noClose) {
       actionMenu.hide()
@@ -37,9 +52,13 @@
     </svg>
   {/if}
   <span class="spectrum-Menu-itemLabel"><slot /></span>
-  {#if keyBind}
-    <div class="keyBind">
-      {keyBind}
+  {#if keys?.length}
+    <div class="keys">
+      {#each keys as key}
+        <div class="key">
+          {key}
+        </div>
+      {/each}
     </div>
   {/if}
 </li>
@@ -48,14 +67,26 @@
   .spectrum-Menu-itemIcon {
     align-self: center;
   }
-  .keyBind {
-    margin-left: var(--spacing-xl);
-    color: var(--spectrum-global-color-gray-600);
-    text-transform: uppercase;
+  .keys {
+    margin-left: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 4px;
+  }
+  .key {
+    color: var(--spectrum-global-color-gray-900);
+    padding: 2px 4px;
     font-size: 12px;
     font-weight: 600;
+    background-color: var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    min-width: 12px;
+    text-align: center;
+    margin: -1px 0;
   }
-  .is-disabled .keyBind {
-    color: var(--spectrum-global-color-gray-300);
+  .is-disabled .key {
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>

From b75e53b50aab1155e1f554047ecabfc509ef6cb6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 2 Aug 2022 10:01:46 +0100
Subject: [PATCH 16/21] Allow use of meta key as well as control key for
 modifier shortcuts

---
 .../_components/navigation/ComponentListPanel.svelte            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 484ac68ec4..ec01c62907 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -89,7 +89,7 @@
     }
     const component = get(selectedComponent)
     try {
-      if (e.ctrlKey) {
+      if (e.ctrlKey || e.metaKey) {
         if (e.key === "ArrowUp") {
           e.preventDefault()
           await store.actions.components.moveUp(component)

From 63a0dacf3687952a4dc9edb3aec98e90df623606 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 2 Aug 2022 10:02:04 +0100
Subject: [PATCH 17/21] Update hover background colour for nord theme

---
 packages/frontend-core/src/themes/nord.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index 05a4215e41..c5a9b13640 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -43,6 +43,7 @@
 
   --spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.1);
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
+  --spectrum-alias-background-color-hover-overlay: rgba(169, 177, 193, 0.1);
 
   --modal-background: var(--spectrum-global-color-gray-50);
 }

From 8423fcaab968a07fe967aa95b0d3cee9cba3bd59 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Aug 2022 14:46:38 +0100
Subject: [PATCH 18/21] Add XS size for icons

---
 packages/bbui/src/Icon/Icon.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 9c99178fdb..f2cae14f0b 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -83,4 +83,9 @@
     transform: translateX(-50%);
     text-align: center;
   }
+
+  .spectrum-Icon--sizeXS {
+    width: 10px;
+    height: 10px;
+  }
 </style>

From 16a7593f055a68c7aa9c76267fcc80886d4234c4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Aug 2022 14:47:07 +0100
Subject: [PATCH 19/21] SUpport using icons for keybind indicators in menu
 items

---
 packages/bbui/src/Menu/Item.svelte | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index ba103460c0..cffbccc908 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -1,5 +1,6 @@
 <script>
   import { createEventDispatcher, getContext } from "svelte"
+  import { Icon } from "@budibase/bbui"
 
   const dispatch = createEventDispatcher()
   const actionMenu = getContext("actionMenu")
@@ -42,21 +43,20 @@
   tabindex="0"
 >
   {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon"
-      focusable="false"
-      aria-hidden="true"
-      aria-label={icon}
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
+    <div class="icon">
+      <Icon name={icon} size="S" />
+    </div>
   {/if}
   <span class="spectrum-Menu-itemLabel"><slot /></span>
   {#if keys?.length}
     <div class="keys">
       {#each keys as key}
         <div class="key">
-          {key}
+          {#if key.startsWith("!")}
+            <Icon size="XS" name={key.split("!")[1]} />
+          {:else}
+            {key}
+          {/if}
         </div>
       {/each}
     </div>
@@ -64,8 +64,9 @@
 </li>
 
 <style>
-  .spectrum-Menu-itemIcon {
+  .icon {
     align-self: center;
+    margin-right: var(--spacing-s);
   }
   .keys {
     margin-left: 30px;
@@ -83,8 +84,11 @@
     background-color: var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     min-width: 12px;
+    height: 16px;
     text-align: center;
     margin: -1px 0;
+    display: grid;
+    place-items: center;
   }
   .is-disabled .key {
     color: var(--spectrum-global-color-gray-600);

From 62f017517d0ab0d923007b8dc6a193332f5d03ce Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Aug 2022 14:47:20 +0100
Subject: [PATCH 20/21] Use either backspace or delete for deleting components

---
 .../_components/navigation/ComponentDropdownMenu.svelte     | 6 +++---
 .../_components/navigation/ComponentListPanel.svelte        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
index f01d49f8e8..faa8b9d552 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
@@ -15,21 +15,21 @@
   </div>
   <MenuItem
     icon="Delete"
-    keyBind="Del"
+    keyBind="!BackAndroid"
     on:click={() => keyboardEvent("Delete")}
   >
     Delete
   </MenuItem>
   <MenuItem
     icon="ChevronUp"
-    keyBind="Ctrl+↑"
+    keyBind="Ctrl+!ArrowUp"
     on:click={() => keyboardEvent("ArrowUp", true)}
   >
     Move up
   </MenuItem>
   <MenuItem
     icon="ChevronDown"
-    keyBind="Ctrl+↓"
+    keyBind="Ctrl+!ArrowDown"
     on:click={() => keyboardEvent("ArrowDown", true)}
   >
     Move down
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index ec01c62907..0c292d1db4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -113,7 +113,7 @@
           e.preventDefault()
           $goto("./new")
         }
-      } else if (e.key === "Delete") {
+      } else if (e.key === "Backspace" || e.key === "Delete") {
         // Don't show confirmation for the screen itself
         if (component._id === get(selectedScreen).props._id) {
           return

From 4079deb42c8807ccd4f9b9278eaad98754c0d48e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Aug 2022 15:01:38 +0100
Subject: [PATCH 21/21] Fix icon import

---
 packages/bbui/src/Menu/Item.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index cffbccc908..dfe61c1736 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher, getContext } from "svelte"
-  import { Icon } from "@budibase/bbui"
+  import Icon from "../Icon/Icon.svelte"
 
   const dispatch = createEventDispatcher()
   const actionMenu = getContext("actionMenu")