From ed403fd79daebbb8649566c5d10dfd7bbe1192a1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 8 Dec 2023 13:45:51 +0000
Subject: [PATCH 01/67] WIP

---
 packages/builder/src/builderStore/store/frontend.js |  8 +++++++-
 .../components/common/bindings/BindingPanel.svelte  |  3 +++
 .../components/common/bindings/BindingPicker.svelte | 13 +++++++++----
 .../common/bindings/ClientBindingPanel.svelte       |  3 ++-
 .../common/bindings/DrawerBindableInput.svelte      |  4 +++-
 .../design/settings/controls/PropertyControl.svelte |  2 ++
 .../Component/ComponentSettingsSection.svelte       |  9 +++++++++
 .../design/[screenId]/_components/AppPreview.svelte | 10 ++++++++++
 packages/client/src/index.js                        |  6 ++++++
 9 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 2e22276e50..83f72669ee 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -88,7 +88,7 @@ const INITIAL_FRONTEND_STATE = {
   selectedLayoutId: null,
 
   // Client state
-  selectedComponentInstance: null,
+  selectedComponentContext: null,
 
   // Onboarding
   onboarding: false,
@@ -504,6 +504,12 @@ export const getFrontendStore = () => {
           return state
         })
       },
+      setSelectedComponentContext: context => {
+        store.update(state => {
+          state.selectedComponentContext = context
+          return state
+        })
+      },
     },
     layouts: {
       select: layoutId => {
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 4df26c5d03..927b5cb82a 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -45,6 +45,7 @@
   export let valid
   export let allowJS = false
   export let allowHelpers = true
+  export let context = null
 
   const drawerActions = getContext("drawer-actions")
   const bindingDrawerActions = getContext("binding-drawer-actions")
@@ -250,6 +251,7 @@
                 <BindingPicker
                   {bindings}
                   {allowHelpers}
+                  {context}
                   addHelper={onSelectHelper}
                   addBinding={onSelectBinding}
                   mode={editorMode}
@@ -330,6 +332,7 @@
                   <BindingPicker
                     {bindings}
                     {allowHelpers}
+                    {context}
                     addHelper={onSelectHelper}
                     addBinding={onSelectBinding}
                     mode={editorMode}
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index f752e37315..61893eb897 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { convertToJS } from "@budibase/string-templates"
+  import { convertToJS, processStringSync } from "@budibase/string-templates"
   import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
 
@@ -9,6 +9,7 @@
   export let bindings
   export let mode
   export let allowHelpers
+  export let context = null
 
   let search = ""
   let popover
@@ -95,6 +96,9 @@
         {#if hoverTarget.example}
           <pre class="helper__example">{hoverTarget.example}</pre>
         {/if}
+        {#if hoverTarget.val}
+          <pre>{hoverTarget.val}</pre>
+        {/if}
       </div>
     </Layout>
   </Popover>
@@ -165,13 +169,14 @@
               <li
                 class="binding"
                 on:mouseenter={e => {
+                  const hbs = `{{ ${binding.runtimeBinding} }}`
+                  const val = processStringSync(hbs, context)
+                  console.log(binding.runtimeBinding, val)
                   popoverAnchor = e.target
-                  if (!binding.description) {
-                    return
-                  }
                   hoverTarget = {
                     title: binding.display?.name || binding.fieldSchema?.name,
                     description: binding.description,
+                    val,
                   }
                   popover.show()
                   e.stopPropagation()
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 74e14574ab..a46c18af27 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -6,7 +6,7 @@
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
-
+  export let context = null
   $: enrichedBindings = enrichBindings(bindings)
 
   // Ensure bindings have the correct categories
@@ -24,6 +24,7 @@
 <BindingPanel
   bind:valid
   bindings={enrichedBindings}
+  {context}
   {value}
   {allowJS}
   {allowHelpers}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 09732ce4f2..2ce9977bbe 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -4,7 +4,6 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
@@ -22,8 +21,10 @@
   export let updateOnChange = true
   export let drawerLeft
   export let disableBindings = false
+  export let context = null
 
   const dispatch = createEventDispatcher()
+
   let bindingDrawer
   let valid = true
   let currentVal = value
@@ -95,6 +96,7 @@
     bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
+    {context}
     {bindings}
     {allowJS}
     {allowHelpers}
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index a6f3d1b218..2195e8a1b9 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -24,6 +24,7 @@
   export let propertyFocus = false
   export let info = null
   export let disableBindings = false
+  export let context = null
 
   $: nullishValue = value == null || value === ""
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
@@ -97,6 +98,7 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
+      {context}
       {nested}
       {key}
       {type}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 6093d2a45e..eb69756626 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -8,6 +8,7 @@
   import { getComponentForSetting } from "components/design/settings/componentSettings"
   import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
+  import { onMount } from "svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -26,6 +27,7 @@
     tag,
     includeHidden
   )
+  $: context = $store.selectedComponentContext
 
   const getSections = (instance, definition, isScreen, tag, includeHidden) => {
     const settings = definition?.settings ?? []
@@ -145,6 +147,12 @@
     }
     return shouldDisplay(instance, setting)
   }
+
+  onMount(() => {
+    store.actions.preview.sendEvent("request-context")
+  })
+
+  $: console.log(context)
 </script>
 
 {#each sections as section, idx (section.name)}
@@ -191,6 +199,7 @@
                 min: setting.min ?? null,
                 max: setting.max ?? null,
               }}
+              {context}
               {bindings}
               {componentBindings}
               {componentInstance}
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 45fe005ceb..a6820cb551 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
@@ -181,6 +181,16 @@
     } else if (type === "add-parent-component") {
       const { componentId, parentType } = data
       await store.actions.components.addParent(componentId, parentType)
+    } else if (type === "provide-context") {
+      let context = data?.context
+      if (context) {
+        try {
+          context = JSON.parse(context)
+        } catch (error) {
+          context = null
+        }
+      }
+      store.actions.preview.setSelectedComponentContext(context)
     } else {
       console.warn(`Client sent unknown event type: ${type}`)
     }
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 415d9fa5f2..2d2419eeca 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -75,6 +75,12 @@ const loadBudibase = async () => {
       } else {
         dndStore.actions.reset()
       }
+    } else if (type === "request-context") {
+      const { selectedComponentInstance } = get(componentStore)
+      const context = selectedComponentInstance?.getDataContext()
+      eventStore.actions.dispatchEvent("provide-context", {
+        context: JSON.stringify(context),
+      })
     }
   }
 

From 06556325a1595389faf5db9d829b0e3d14782c4a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Feb 2024 14:45:16 +0000
Subject: [PATCH 02/67] Remove proxying of context changes up the chain

---
 .../src/components/context/Provider.svelte    |  4 +-
 packages/client/src/stores/context.js         | 53 +++++--------------
 2 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index 1b6a073512..ad5b580c4f 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -33,7 +33,7 @@
   const provideData = newData => {
     const dataKey = JSON.stringify(newData)
     if (dataKey !== lastDataKey) {
-      context.actions.provideData(providerKey, newData, scope)
+      context.actions.provideData(providerKey, newData)
       lastDataKey = dataKey
     }
   }
@@ -43,7 +43,7 @@
     if (actionsKey !== lastActionsKey) {
       lastActionsKey = actionsKey
       newActions?.forEach(({ type, callback, metadata }) => {
-        context.actions.provideAction(providerKey, type, callback, scope)
+        context.actions.provideAction(providerKey, type, callback)
 
         // Register any "refresh datasource" actions with a singleton store
         // so we can easily refresh data at all levels for any datasource
diff --git a/packages/client/src/stores/context.js b/packages/client/src/stores/context.js
index e54c773591..c1ec18ef13 100644
--- a/packages/client/src/stores/context.js
+++ b/packages/client/src/stores/context.js
@@ -1,5 +1,4 @@
 import { writable, derived } from "svelte/store"
-import { ContextScopes } from "constants"
 
 export const createContextStore = parentContext => {
   const context = writable({})
@@ -20,60 +19,34 @@ export const createContextStore = parentContext => {
   }
 
   // Provide some data in context
-  const provideData = (providerId, data, scope = ContextScopes.Global) => {
+  const provideData = (providerId, data) => {
     if (!providerId || data === undefined) {
       return
     }
 
-    // Proxy message up the chain if we have a parent and are providing global
-    // context
-    if (scope === ContextScopes.Global && parentContext) {
-      parentContext.actions.provideData(providerId, data, scope)
-    }
-
     // Otherwise this is either the context root, or we're providing a local
     // context override, so we need to update the local context instead
-    else {
-      context.update(state => {
-        state[providerId] = data
-        return state
-      })
-      broadcastChange(providerId)
-    }
+    context.update(state => {
+      state[providerId] = data
+      return state
+    })
+    broadcastChange(providerId)
   }
 
   // Provides some action in context
-  const provideAction = (
-    providerId,
-    actionType,
-    callback,
-    scope = ContextScopes.Global
-  ) => {
+  const provideAction = (providerId, actionType, callback) => {
     if (!providerId || !actionType) {
       return
     }
 
-    // Proxy message up the chain if we have a parent and are providing global
-    // context
-    if (scope === ContextScopes.Global && parentContext) {
-      parentContext.actions.provideAction(
-        providerId,
-        actionType,
-        callback,
-        scope
-      )
-    }
-
     // Otherwise this is either the context root, or we're providing a local
     // context override, so we need to update the local context instead
-    else {
-      const key = `${providerId}_${actionType}`
-      context.update(state => {
-        state[key] = callback
-        return state
-      })
-      broadcastChange(key)
-    }
+    const key = `${providerId}_${actionType}`
+    context.update(state => {
+      state[key] = callback
+      return state
+    })
+    broadcastChange(key)
   }
 
   const observeChanges = callback => {

From a880c5e62a5aceb3c4a207ad55cedaee9d6834d8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Feb 2024 10:27:23 +0000
Subject: [PATCH 03/67] Update outside popover styles

---
 packages/bbui/src/Actions/position_dropdown.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index cc169eac09..14bb209b97 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -38,8 +38,9 @@ export default function positionDropdown(element, opts) {
       styles = customUpdate(anchorBounds, elementBounds, styles)
     } else {
       // Determine vertical styles
-      if (align === "right-outside") {
-        styles.top = anchorBounds.top
+      if (align === "right-outside" || align === "left-outside") {
+        styles.top = anchorBounds.bottom - elementBounds.height
+        styles.maxHeight = maxHeight
       } else if (
         window.innerHeight - anchorBounds.bottom <
         (maxHeight || 100)

From daec133f792e89499700510949a0d3b15aac6262 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Feb 2024 10:27:29 +0000
Subject: [PATCH 04/67] Add live eval of bindings

---
 .../common/bindings/BindingPanel.svelte       | 37 +++++++-
 .../common/bindings/BindingPicker.svelte      | 91 +++++++++----------
 .../Component/ComponentSettingsSection.svelte |  2 -
 3 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 1dba55c733..3b64c918d0 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -15,6 +15,7 @@
     decodeJSBinding,
     encodeJSBinding,
     convertToJS,
+    processStringSync,
   } from "@budibase/string-templates"
   import {
     readableToRuntimeBinding,
@@ -59,15 +60,21 @@
   let hbsValue = initialValueJS ? null : value
   let sidebar = true
   let targetMode = null
+  let expressionResult
 
   $: usingJS = mode === "JavaScript"
-  $: editorMode = mode == "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
+  $: editorMode =
+    mode === "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
   $: bindingCompletions = bindingsToCompletions(bindings, editorMode)
+  $: runtimeExpression = readableToRuntimeBinding(bindings, value)
+  $: expressionResult = processStringSync(runtimeExpression || "", context)
 
   const updateValue = val => {
-    valid = isValid(readableToRuntimeBinding(bindings, val))
+    const runtimeExpression = readableToRuntimeBinding(bindings, val)
+    valid = isValid(runtimeExpression)
     if (valid) {
       dispatch("change", val)
+      expressionResult = processStringSync(runtimeExpression || "", context)
     }
   }
 
@@ -114,7 +121,7 @@
   }
 
   const switchMode = () => {
-    if (targetMode == "Text") {
+    if (targetMode === "Text") {
       jsValue = null
       updateValue(jsValue)
     } else {
@@ -204,6 +211,11 @@
                   autofocus={autofocusEditor}
                 />
               </div>
+              {#if expressionResult}
+                <div class="result">
+                  {expressionResult}
+                </div>
+              {/if}
               <div class="binding-footer">
                 <div class="messaging">
                   {#if !valid}
@@ -308,6 +320,11 @@
                     autofocus={autofocusEditor}
                   />
                 </div>
+                {#if expressionResult}
+                  <div class="result">
+                    {expressionResult}
+                  </div>
+                {/if}
                 <div class="binding-footer">
                   <div class="messaging">
                     <Icon name="FlashOn" />
@@ -515,4 +532,18 @@
   .binding-drawer :global(.code-editor > div) {
     height: 100%;
   }
+
+  .result {
+    margin: 0;
+    background: var(--spectrum-global-color-gray-200);
+    font-size: 14px;
+    padding: var(--spacing-l);
+    border-radius: var(--border-radius-s);
+    font-family: monospace;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    max-height: 200px;
+    overflow: auto;
+    white-space: pre;
+    word-wrap: anywhere;
+  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index e1c7d2fadb..23728c4b83 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -16,12 +16,8 @@
   let popoverAnchor
   let hoverTarget
   let helpers = handlebarsCompletions()
-
   let selectedCategory
 
-  $: searchRgx = new RegExp(search, "ig")
-
-  // Icons
   $: bindingIcons = bindings?.reduce((acc, ele) => {
     if (ele.icon) {
       acc[ele.category] = acc[ele.category] || ele.icon
@@ -29,10 +25,9 @@
     return acc
   }, {})
   $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
-
   $: categories = Object.entries(groupBy("category", bindings))
   $: categoryNames = getCategoryNames(categories)
-
+  $: searchRgx = new RegExp(search, "ig")
   $: filteredCategories = categories
     .map(([name, categoryBindings]) => ({
       name,
@@ -73,38 +68,35 @@
     }
     return names
   }
+
+  const getBindingValue = binding => {
+    const hbs = `{{ ${binding.runtimeBinding} }}`
+    return processStringSync(hbs, context)
+  }
 </script>
 
-<span class="detailPopover">
-  <Popover
-    align="left-outside"
-    bind:this={popover}
-    anchor={popoverAnchor}
-    maxWidth={300}
-    maxHeight={300}
-    dismissible={false}
-  >
+<Popover
+  align="left-outside"
+  bind:this={popover}
+  anchor={popoverAnchor}
+  maxWidth={400}
+  maxHeight={300}
+  dismissible={false}
+>
+  <div class="helper">
     <Layout gap="S">
-      <div class="helper">
-        {#if hoverTarget.title}
-          <div class="helper__name">{hoverTarget.title}</div>
-        {/if}
-        {#if hoverTarget.description}
-          <div class="helper__description">
-            <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-            {@html hoverTarget.description}
-          </div>
-        {/if}
-        {#if hoverTarget.example}
-          <pre class="helper__example">{hoverTarget.example}</pre>
-        {/if}
-        {#if hoverTarget.val}
-          <pre>{hoverTarget.val}</pre>
-        {/if}
-      </div>
+      {#if hoverTarget.description}
+        <div>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html hoverTarget.description}
+        </div>
+      {/if}
+      {#if hoverTarget.code}
+        <pre>{hoverTarget.code}</pre>
+      {/if}
     </Layout>
-  </Popover>
-</span>
+  </div>
+</Popover>
 
 <Layout noPadding gap="S">
   {#if selectedCategory}
@@ -171,14 +163,13 @@
               <li
                 class="binding"
                 on:mouseenter={e => {
-                  const hbs = `{{ ${binding.runtimeBinding} }}`
-                  const val = processStringSync(hbs, context)
-                  console.log(binding.runtimeBinding, val)
+                  let val = getBindingValue(binding)
+                  if (val === "") {
+                    val = " "
+                  }
                   popoverAnchor = e.target
                   hoverTarget = {
-                    title: binding.display?.name || binding.fieldSchema?.name,
-                    description: binding.description,
-                    val,
+                    code: val,
                   }
                   popover.show()
                   e.stopPropagation()
@@ -224,19 +215,15 @@
             {#each filteredHelpers as helper}
               <li
                 class="binding"
-                on:click={() => addHelper(helper, mode.name == "javascript")}
+                on:click={() => addHelper(helper, mode.name === "javascript")}
                 on:mouseenter={e => {
                   popoverAnchor = e.target
                   if (!helper.displayText && helper.description) {
                     return
                   }
                   hoverTarget = {
-                    title: helper.displayText,
                     description: helper.description,
-                    example: getHelperExample(
-                      helper,
-                      mode.name == "javascript"
-                    ),
+                    code: getHelperExample(helper, mode.name === "javascript"),
                   }
                   popover.show()
                   e.stopPropagation()
@@ -397,4 +384,16 @@
     margin-left: 2px;
     font-weight: 600;
   }
+
+  .helper pre {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+  .helper :global(p) {
+    padding: 0;
+    margin: 0;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index a18f21ae1d..c096ef58ec 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -150,8 +150,6 @@
   onMount(() => {
     store.actions.preview.sendEvent("request-context")
   })
-
-  $: console.log(context)
 </script>
 
 {#each sections as section, idx (section.name)}

From f3f5532ad630e9560063f968d35cbe635cd63f37 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Feb 2024 16:32:28 +0000
Subject: [PATCH 05/67] Fix merge issues

---
 .../_components/Component/ComponentSettingsSection.svelte   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 36ef6a7526..c7fe7b6b33 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -1,7 +1,7 @@
 <script>
   import { helpers } from "@budibase/shared-core"
   import { DetailSummary, notifications } from "@budibase/bbui"
-  import { componentStore } from "stores/builder"
+  import { componentStore, previewStore } from "stores/builder"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
@@ -27,7 +27,7 @@
     tag,
     includeHidden
   )
-  $: context = $store.selectedComponentContext
+  $: context = $previewStore.selectedComponentContext
 
   const getSections = (instance, definition, isScreen, tag, includeHidden) => {
     const settings = definition?.settings ?? []
@@ -148,7 +148,7 @@
   }
 
   onMount(() => {
-    store.actions.preview.sendEvent("request-context")
+    previewStore.sendEvent("request-context")
   })
 </script>
 

From 461418390d6a72bbb012d88d85543c6b7d18979b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 12:36:03 +0000
Subject: [PATCH 06/67] Change how context is passed through to binding drawers
 to ensure it's always available

---
 .../common/bindings/BindingPanel.svelte       | 20 +++++++++----------
 .../common/bindings/BindingPicker.svelte      | 17 ++++++++--------
 .../common/bindings/ClientBindingPanel.svelte |  4 ++--
 .../bindings/DrawerBindableInput.svelte       |  2 --
 .../ButtonConfiguration.svelte                |  1 +
 .../settings/controls/PropertyControl.svelte  |  2 --
 .../Component/ComponentSettingsSection.svelte |  2 --
 7 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index cb564593a0..d7b0e6e65c 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -135,13 +135,10 @@
         selected={mode}
         on:select={onChangeMode}
         beforeSwitch={selectedMode => {
-          if (selectedMode == mode) {
+          if (selectedMode === mode) {
             return true
           }
-
-          //Get the current mode value
           const editorValue = usingJS ? decodeJSBinding(jsValue) : hbsValue
-
           if (editorValue) {
             targetMode = selectedMode
             return false
@@ -204,9 +201,9 @@
                     <div class="syntax-error">
                       Current Handlebars syntax is invalid, please check the
                       guide
-                      <a href="https://handlebarsjs.com/guide/" target="_blank"
-                        >here</a
-                      >
+                      <a href="https://handlebarsjs.com/guide/" target="_blank">
+                        here
+                      </a>
                       for more details.
                     </div>
                   {:else}
@@ -523,9 +520,10 @@
     border-radius: var(--border-radius-s);
     font-family: monospace;
     border: 1px solid var(--spectrum-global-color-gray-300);
-    max-height: 200px;
-    overflow: auto;
-    white-space: pre;
-    word-wrap: anywhere;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    max-height: 92px;
   }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 8ae236a7ab..cb990b277a 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -10,7 +10,6 @@
   export let mode
   export let allowHelpers
   export let context = null
-  export let noPaddingTop = false
 
   let search = ""
   let popover
@@ -70,6 +69,8 @@
     return names
   }
 
+  $: console.log(context)
+
   const getBindingValue = binding => {
     const hbs = `{{ ${binding.runtimeBinding} }}`
     return processStringSync(hbs, context)
@@ -165,15 +166,13 @@
                 class="binding"
                 on:mouseenter={e => {
                   let val = getBindingValue(binding)
-                  if (val === "") {
-                    val = " "
+                  if (val !== "") {
+                    popoverAnchor = e.target
+                    hoverTarget = {
+                      code: val,
+                    }
+                    popover.show()
                   }
-                  popoverAnchor = e.target
-                  hoverTarget = {
-                    code: val,
-                  }
-                  popover.show()
-                  e.stopPropagation()
                 }}
                 on:mouseleave={() => {
                   popover.hide()
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 4bf05190db..39d8aaf2f5 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,12 +1,12 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
+  import { previewStore } from "stores/builder"
 
   export let bindings = []
   export let valid
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
-  export let context = null
   export let autofocusEditor = false
 
   $: enrichedBindings = enrichBindings(bindings)
@@ -26,7 +26,7 @@
 <BindingPanel
   bind:valid
   bindings={enrichedBindings}
-  {context}
+  context={$previewStore.selectedComponentContext}
   {value}
   {allowJS}
   {allowHelpers}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index e0c1942cb4..11b7901e84 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -24,7 +24,6 @@
   export let drawerLeft
   export let key
   export let disableBindings = false
-  export let context = null
 
   const dispatch = createEventDispatcher()
 
@@ -106,7 +105,6 @@
     bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
-    {context}
     {bindings}
     {allowJS}
     {allowHelpers}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
index 186392bd90..feddc3cdc0 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -14,6 +14,7 @@
   export let key
   export let nested
   export let max
+  export let context
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 2ecf3b6f96..94c9d22f54 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -24,7 +24,6 @@
   export let propertyFocus = false
   export let info = null
   export let disableBindings = false
-  export let context = null
   export let wide
 
   $: nullishValue = value == null || value === ""
@@ -99,7 +98,6 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
-      {context}
       {nested}
       {key}
       {type}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index c7fe7b6b33..1e01ec1840 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -27,7 +27,6 @@
     tag,
     includeHidden
   )
-  $: context = $previewStore.selectedComponentContext
 
   const getSections = (instance, definition, isScreen, tag, includeHidden) => {
     const settings = definition?.settings ?? []
@@ -199,7 +198,6 @@
                 min: setting.min ?? null,
                 max: setting.max ?? null,
               }}
-              {context}
               {bindings}
               {componentBindings}
               {componentInstance}

From 5f6b846937161accd2100b5bdef2881359d8e5b6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 13:25:41 +0000
Subject: [PATCH 07/67] Add ability for components to provide example data
 context that they provide so that more bindings work with live eval

---
 .../common/bindings/BindingPicker.svelte      |  2 -
 .../client/src/components/Component.svelte    | 11 ++++-
 .../src/components/app/GridBlock.svelte       | 14 ++++++
 packages/client/src/sdk.js                    |  2 +
 packages/client/src/utils/components.js       | 49 +++++++++++++++++++
 5 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index cb990b277a..5ff304fdb2 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -69,8 +69,6 @@
     return names
   }
 
-  $: console.log(context)
-
   const getBindingValue = binding => {
     const hbs = `{{ ${binding.runtimeBinding} }}`
     return processStringSync(hbs, context)
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6d6af91dcc..e7024ac17f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -575,6 +575,15 @@
     }
   }
 
+  const getDataContext = () => {
+    const normalContext = get(context)
+    const additionalContext = ref?.getAdditionalDataContext?.()
+    return {
+      ...normalContext,
+      ...additionalContext,
+    }
+  }
+
   onMount(() => {
     // Register this component instance for external access
     if ($appStore.isDevApp) {
@@ -583,7 +592,7 @@
           component: instance._component,
           getSettings: () => cachedSettings,
           getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
-          getDataContext: () => get(context),
+          getDataContext: getDataContext,
           reload: () => initialise(instance, true),
           setEphemeralStyles: styles => (ephemeralStyles = styles),
           state: store,
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 0a343cac51..c2bc9f3989 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -30,6 +30,7 @@
     ActionTypes,
     createContextStore,
     Provider,
+    generateGoldenSample,
   } = getContext("sdk")
 
   let grid
@@ -48,6 +49,19 @@
     },
   ]
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(grid?.getContext()?.rows)
+    const goldenRow = generateGoldenSample(rows)
+    const id = [get(component).id]
+    return {
+      [id]: goldenRow,
+      eventContext: {
+        row: goldenRow,
+      },
+    }
+  }
+
   // Parses columns to fix older formats
   const getParsedColumns = columns => {
     // If the first element has an active key all elements should be in the new format
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 557d5ca8da..c0b99cd131 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -28,6 +28,7 @@ import { ActionTypes } from "./constants"
 import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
 import { enrichButtonActions } from "./utils/buttonActions.js"
+import { generateGoldenSample } from "./utils/components.js"
 import { processStringSync, makePropSafe } from "@budibase/string-templates"
 import { fetchData, LuceneUtils, Constants } from "@budibase/frontend-core"
 
@@ -65,6 +66,7 @@ export default {
   processStringSync,
   makePropSafe,
   createContextStore,
+  generateGoldenSample,
 
   // Components
   Provider,
diff --git a/packages/client/src/utils/components.js b/packages/client/src/utils/components.js
index 1812175c2c..70f80e4329 100644
--- a/packages/client/src/utils/components.js
+++ b/packages/client/src/utils/components.js
@@ -82,3 +82,52 @@ export const findComponentParent = (rootComponent, id, parentComponent) => {
   }
   return null
 }
+
+/**
+ * Util to check is a given value is "better" than another. "Betterness" is
+ * defined as presence and length.
+ */
+const isBetterSample = (newValue, oldValue) => {
+  // Prefer non-null values
+  if (oldValue == null && newValue != null) {
+    return true
+  }
+
+  // Don't change type
+  const oldType = typeof oldValue
+  const newType = typeof newValue
+  if (oldType !== newType) {
+    return false
+  }
+
+  // Prefer longer values
+  if (newType === "string" && newValue.length > oldValue.length) {
+    return true
+  }
+  if (
+    newType === "object" &&
+    Object.keys(newValue).length > Object.keys(oldValue).length
+  ) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Generates a best-case example object of the provided samples.
+ * The generated sample does not necessarily exist - it simply is a sample that
+ * contains "good" examples for every property of all the samples.
+ * The generate sample will have a value for all keys across all samples.
+ */
+export const generateGoldenSample = samples => {
+  let goldenSample = {}
+  samples?.forEach(sample => {
+    Object.keys(sample).forEach(key => {
+      if (isBetterSample(sample[key], goldenSample[key])) {
+        goldenSample[key] = sample[key]
+      }
+    })
+  })
+  return goldenSample
+}

From dc077da5ae1e213cd4609ea0878aa3e9072129ef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 14:21:03 +0000
Subject: [PATCH 08/67] Improve how component context is retrieved for live
 eval and provide extra context from grid and card blocks

---
 .../common/bindings/ClientBindingPanel.svelte     |  3 +++
 .../Component/ComponentSettingsSection.svelte     |  7 +------
 packages/builder/src/stores/builder/preview.js    |  5 +++++
 .../client/src/components/app/GridBlock.svelte    |  2 +-
 .../src/components/app/blocks/CardsBlock.svelte   | 15 ++++++++++++++-
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 39d8aaf2f5..97cb097a51 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,6 +1,7 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
   import { previewStore } from "stores/builder"
+  import { onMount } from "svelte"
 
   export let bindings = []
   export let valid
@@ -21,6 +22,8 @@
       type: null,
     }))
   }
+
+  onMount(previewStore.requestComponentContext)
 </script>
 
 <BindingPanel
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 1e01ec1840..b5a960a533 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -1,14 +1,13 @@
 <script>
   import { helpers } from "@budibase/shared-core"
   import { DetailSummary, notifications } from "@budibase/bbui"
-  import { componentStore, previewStore } from "stores/builder"
+  import { componentStore } from "stores/builder"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
   import { getComponentForSetting } from "components/design/settings/componentSettings"
   import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
-  import { onMount } from "svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -145,10 +144,6 @@
     }
     return shouldDisplay(instance, setting)
   }
-
-  onMount(() => {
-    previewStore.sendEvent("request-context")
-  })
 </script>
 
 {#each sections as section, idx (section.name)}
diff --git a/packages/builder/src/stores/builder/preview.js b/packages/builder/src/stores/builder/preview.js
index eca69d56d7..4923185ee7 100644
--- a/packages/builder/src/stores/builder/preview.js
+++ b/packages/builder/src/stores/builder/preview.js
@@ -60,6 +60,10 @@ export const createPreviewStore = () => {
     })
   }
 
+  const requestComponentContext = () => {
+    sendEvent("request-context")
+  }
+
   return {
     subscribe: store.subscribe,
     setDevice,
@@ -69,6 +73,7 @@ export const createPreviewStore = () => {
     stopDrag,
     showPreview,
     setSelectedComponentContext,
+    requestComponentContext,
   }
 }
 
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index c2bc9f3989..46a507387d 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -53,7 +53,7 @@
   export const getAdditionalDataContext = () => {
     const rows = get(grid?.getContext()?.rows)
     const goldenRow = generateGoldenSample(rows)
-    const id = [get(component).id]
+    const id = get(component).id
     return {
       [id]: goldenRow,
       eventContext: {
diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 008fa7e730..bd2b69d352 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -4,6 +4,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
+  import { get } from "svelte/store"
 
   export let title
   export let dataSource
@@ -31,7 +32,9 @@
   export let linkColumn
   export let noRowsMessage
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const context = getContext("context")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
+  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -62,6 +65,16 @@
     },
   ]
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[dataProviderId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    const id = get(component).id
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
+
   // Builds a full details page URL for the card title
   const buildFullCardUrl = (link, url, repeaterId, linkColumn) => {
     if (!link || !url || !repeaterId) {

From 5c4e797251a0ceca04ed1735688536d012652ea5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 14:23:17 +0000
Subject: [PATCH 09/67] Provide additional context from repeater blocks

---
 .../src/components/app/blocks/RepeaterBlock.svelte  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index 30fbdddcdc..878b827c78 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
@@ -4,6 +4,7 @@
   import Placeholder from "components/app/Placeholder.svelte"
   import { getContext } from "svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
+  import { get } from "svelte/store"
 
   export let dataSource
   export let filter
@@ -18,8 +19,20 @@
   export let gap
 
   const component = getContext("component")
+  const context = getContext("context")
+  const { generateGoldenSample } = getContext("sdk")
 
   let providerId
+
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[providerId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    const id = get(component).id
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
 </script>
 
 <Block>

From 840f499b47d110ebc77726d95b14835ef9df5370 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 14:33:40 +0000
Subject: [PATCH 10/67] Provide additional data context from form blocks

---
 .../app/blocks/MultiStepFormblock.svelte      | 14 ++-
 .../app/blocks/form/FormBlock.svelte          | 88 +++++++++++--------
 2 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index b24c2f418a..1a0fbbd50d 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -5,7 +5,7 @@
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
-  import { writable } from "svelte/store"
+  import { get, writable } from "svelte/store"
 
   export let actionType
   export let rowId
@@ -15,7 +15,7 @@
   export let buttonPosition = "bottom"
   export let size
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
   const component = getContext("component")
   const context = getContext("context")
 
@@ -45,6 +45,16 @@
   $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
   $: updateCurrentStep(enrichedSteps, $builderStore, $component)
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const id = get(component).id
+    const rows = get(context)[`${id}-provider`]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
+
   const updateCurrentStep = (steps, builderStore, component) => {
     const { componentId, step } = builderStore.metadata || {}
 
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index cdf1a05628..8c084a71ab 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -3,6 +3,7 @@
   import InnerFormBlock from "./InnerFormBlock.svelte"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./FormBlockWrapper.svelte"
+  import { get } from "svelte/store"
 
   export let actionType
   export let dataSource
@@ -11,7 +12,6 @@
   export let fields
   export let buttons
   export let buttonPosition
-
   export let title
   export let description
   export let rowId
@@ -25,8 +25,56 @@
   export let saveButtonLabel
   export let deleteButtonLabel
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
   const component = getContext("component")
+  const context = getContext("context")
+
+  let schema
+
+  $: formattedFields = convertOldFieldFormat(fields)
+  $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
+  $: fetchSchema(dataSource)
+  // We could simply spread $$props into the inner form and append our
+  // additions, but that would create svelte warnings about unused props and
+  // make maintenance in future more confusing as we typically always have a
+  // proper mapping of schema settings to component exports, without having to
+  // search multiple files
+  $: innerProps = {
+    dataSource,
+    actionUrl,
+    actionType,
+    size,
+    disabled,
+    fields: fieldsOrDefault,
+    title,
+    description,
+    schema,
+    notificationOverride,
+    buttons:
+      buttons ||
+      Utils.buildFormBlockButtonConfig({
+        _id: $component.id,
+        showDeleteButton,
+        showSaveButton,
+        saveButtonLabel,
+        deleteButtonLabel,
+        notificationOverride,
+        actionType,
+        actionUrl,
+        dataSource,
+      }),
+    buttonPosition: buttons ? buttonPosition : "top",
+  }
+
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const id = get(component).id
+    const rows = get(context)[`${id}-provider`]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
 
   const convertOldFieldFormat = fields => {
     if (!fields) {
@@ -68,42 +116,6 @@
     return [...fields, ...defaultFields].filter(field => field.active)
   }
 
-  let schema
-
-  $: formattedFields = convertOldFieldFormat(fields)
-  $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
-  $: fetchSchema(dataSource)
-  // We could simply spread $$props into the inner form and append our
-  // additions, but that would create svelte warnings about unused props and
-  // make maintenance in future more confusing as we typically always have a
-  // proper mapping of schema settings to component exports, without having to
-  // search multiple files
-  $: innerProps = {
-    dataSource,
-    actionUrl,
-    actionType,
-    size,
-    disabled,
-    fields: fieldsOrDefault,
-    title,
-    description,
-    schema,
-    notificationOverride,
-    buttons:
-      buttons ||
-      Utils.buildFormBlockButtonConfig({
-        _id: $component.id,
-        showDeleteButton,
-        showSaveButton,
-        saveButtonLabel,
-        deleteButtonLabel,
-        notificationOverride,
-        actionType,
-        actionUrl,
-        dataSource,
-      }),
-    buttonPosition: buttons ? buttonPosition : "top",
-  }
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }

From 53bb890d3d9f8ec922b3f9c07261e02e08c989a3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 14:36:28 +0000
Subject: [PATCH 11/67] Provide additional context from row explorer block

---
 .../src/components/app/blocks/RowExplorer.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/blocks/RowExplorer.svelte b/packages/client/src/components/app/blocks/RowExplorer.svelte
index 8fadcb5006..1e2357713a 100644
--- a/packages/client/src/components/app/blocks/RowExplorer.svelte
+++ b/packages/client/src/components/app/blocks/RowExplorer.svelte
@@ -3,25 +3,35 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { generate } from "shortid"
+  import { get } from "svelte/store"
+  import { getContext } from "svelte"
 
   export let dataSource
   export let height
-
   export let cardTitle
   export let cardSubtitle
   export let cardDescription
   export let cardImageURL
   export let cardSearchField
-
   export let detailFields
   export let detailTitle
-
   export let noRowsMessage
 
   const stateKey = generate()
+  const context = getContext("context")
+  const { generateGoldenSample } = getContext("sdk")
 
   let listDataProviderId
   let listRepeaterId
+
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[listDataProviderId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [listRepeaterId]: goldenRow,
+    }
+  }
 </script>
 
 <Block>

From 86695c0ee49fb41cf6117c48e9a1388d757f0ad0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 16:24:31 +0000
Subject: [PATCH 12/67] Add syntax highlighting to live binding eval

---
 packages/builder/package.json                 |  1 +
 .../common/bindings/BindingPanel.svelte       | 25 +++++++++++++--
 .../common/bindings/BindingPicker.svelte      | 31 +++++++++++++++----
 3 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 52db8e11bc..3bf9ab4442 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -70,6 +70,7 @@
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",
+    "json-format-highlight": "^1.0.4",
     "lodash": "4.17.21",
     "posthog-js": "^1.36.0",
     "remixicon": "2.5.0",
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index d7b0e6e65c..f0ded4a67b 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -33,6 +33,7 @@
   } from "../CodeEditor"
   import BindingPicker from "./BindingPicker.svelte"
   import { BindingHelpers } from "./utils"
+  import formatHighlight from "json-format-highlight"
 
   const dispatch = createEventDispatcher()
 
@@ -123,6 +124,24 @@
     onSelectBinding("", { forceJS: true })
   }
 
+  const highlight = json => {
+    // Attempt to parse and then stringify, in case this is valid JSON
+    try {
+      json = JSON.stringify(JSON.parse(json), null, 2)
+    } catch (err) {
+      // Ignore
+    }
+
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
+  }
+
   onMount(() => {
     valid = isValid(readableToRuntimeBinding(bindings, value))
   })
@@ -192,7 +211,7 @@
               </div>
               {#if expressionResult}
                 <div class="result">
-                  {expressionResult}
+                  {@html highlight(expressionResult)}
                 </div>
               {/if}
               <div class="binding-footer">
@@ -301,7 +320,7 @@
                 </div>
                 {#if expressionResult}
                   <div class="result">
-                    {expressionResult}
+                    {@html highlight(expressionResult)}
                   </div>
                 {/if}
                 <div class="binding-footer">
@@ -524,6 +543,6 @@
     overflow-x: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
-    max-height: 92px;
+    max-height: 128px;
   }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 5ff304fdb2..4f08cd5306 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -3,6 +3,7 @@
   import { convertToJS, processStringSync } from "@budibase/string-templates"
   import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
+  import formatHighlight from "json-format-highlight"
 
   export let addHelper
   export let addBinding
@@ -70,8 +71,20 @@
   }
 
   const getBindingValue = binding => {
-    const hbs = `{{ ${binding.runtimeBinding} }}`
-    return processStringSync(hbs, context)
+    const hbs = `{{ literal ${binding.runtimeBinding} }}`
+    const res = processStringSync(hbs, context)
+    return JSON.stringify(res, null, 2)
+  }
+
+  const highlight = json => {
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
   }
 </script>
 
@@ -79,7 +92,7 @@
   align="left-outside"
   bind:this={popover}
   anchor={popoverAnchor}
-  maxWidth={400}
+  maxWidth={600}
   maxHeight={300}
   dismissible={false}
 >
@@ -92,7 +105,7 @@
         </div>
       {/if}
       {#if hoverTarget.code}
-        <pre>{hoverTarget.code}</pre>
+        <pre>{@html highlight(hoverTarget.code)}</pre>
       {/if}
     </Layout>
   </div>
@@ -387,8 +400,14 @@
     padding: 0;
     margin: 0;
     font-size: 12px;
-    white-space: pre-wrap;
-    word-break: break-all;
+    white-space: pre;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .helper pre :global(span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
   }
   .helper :global(p) {
     padding: 0;

From 14b2bfa8d690802877058b3b5b1faf7b6ad2582d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 16:24:46 +0000
Subject: [PATCH 13/67] Update lock

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 1937482837..3e147eed34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13765,6 +13765,11 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-format-highlight@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/json-format-highlight/-/json-format-highlight-1.0.4.tgz#2e44277edabcec79a3d2c84e984c62e2258037b9"
+  integrity sha512-RqenIjKr1I99XfXPAml9G7YlEZg/GnsH7emWyWJh2yuGXqHW8spN7qx6/ME+MoIBb35/fxrMC9Jauj6nvGe4Mg==
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"

From 433c3a6306fdd161da70d145b4ac73885f215757 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 19 Feb 2024 16:22:23 +0000
Subject: [PATCH 14/67] Debounce hiding binding values to enable interacting
 with them

---
 packages/bbui/src/Popover/Popover.svelte      |  2 +
 .../common/bindings/BindingPicker.svelte      | 51 +++++++++++++------
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 5066e3aa05..7ff5ae5f03 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -101,6 +101,8 @@
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
+      on:mouseenter
+      on:mouseleave
     >
       <slot />
     </div>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 4f08cd5306..342855f427 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -18,6 +18,7 @@
   let hoverTarget
   let helpers = handlebarsCompletions()
   let selectedCategory
+  let hideTimeout
 
   $: bindingIcons = bindings?.reduce((acc, ele) => {
     if (ele.icon) {
@@ -86,6 +87,37 @@
       nullColor: "#c678dd",
     })
   }
+
+  const showPopover = (target, binding) => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout)
+      hideTimeout = null
+    }
+    let val = getBindingValue(binding)
+    if (val !== "") {
+      popoverAnchor = target
+      hoverTarget = {
+        code: val,
+      }
+      popover.show()
+    }
+  }
+
+  const hidePopover = () => {
+    hideTimeout = setTimeout(() => {
+      popover.hide()
+      popoverAnchor = null
+      hoverTarget = null
+      hideTimeout = null
+    }, 100)
+  }
+
+  const stopHiding = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout)
+      hideTimeout = null
+    }
+  }
 </script>
 
 <Popover
@@ -95,6 +127,8 @@
   maxWidth={600}
   maxHeight={300}
   dismissible={false}
+  on:mouseenter={stopHiding}
+  on:mouseleave={hidePopover}
 >
   <div class="helper">
     <Layout gap="S">
@@ -175,21 +209,8 @@
             {#each category.bindings as binding}
               <li
                 class="binding"
-                on:mouseenter={e => {
-                  let val = getBindingValue(binding)
-                  if (val !== "") {
-                    popoverAnchor = e.target
-                    hoverTarget = {
-                      code: val,
-                    }
-                    popover.show()
-                  }
-                }}
-                on:mouseleave={() => {
-                  popover.hide()
-                  popoverAnchor = null
-                  hoverTarget = null
-                }}
+                on:mouseenter={e => showPopover(e.target, binding)}
+                on:mouseleave={hidePopover}
                 on:focus={() => {}}
                 on:blur={() => {}}
                 on:click={() => addBinding(binding)}

From 602f35537d9f0438014c0600ae3afcb89f6a94d8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 19 Feb 2024 16:28:23 +0000
Subject: [PATCH 15/67] Support custom min widths for popovers

---
 packages/bbui/src/Actions/position_dropdown.js                | 3 ++-
 packages/bbui/src/Popover/Popover.svelte                      | 3 ++-
 .../src/components/common/bindings/BindingPicker.svelte       | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 14bb209b97..31a1044ba4 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -15,6 +15,7 @@ export default function positionDropdown(element, opts) {
       align,
       maxHeight,
       maxWidth,
+      minWidth,
       useAnchorWidth,
       offset = 5,
       customUpdate,
@@ -28,7 +29,7 @@ export default function positionDropdown(element, opts) {
     const elementBounds = element.getBoundingClientRect()
     let styles = {
       maxHeight: null,
-      minWidth: null,
+      minWidth,
       maxWidth,
       left: null,
       top: null,
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 7ff5ae5f03..407fb0b153 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -12,6 +12,7 @@
   export let anchor
   export let align = "right"
   export let portalTarget
+  export let minWidth
   export let maxWidth
   export let maxHeight
   export let open = false
@@ -21,7 +22,6 @@
   export let customHeight
   export let animate = true
   export let customZindex
-
   export let handlePostionUpdate
   export let showPopover = true
   export let clickOutsideOverride = false
@@ -86,6 +86,7 @@
         align,
         maxHeight,
         maxWidth,
+        minWidth,
         useAnchorWidth,
         offset,
         customUpdate: handlePostionUpdate,
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 342855f427..9c0522ce5a 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -124,11 +124,11 @@
   align="left-outside"
   bind:this={popover}
   anchor={popoverAnchor}
-  maxWidth={600}
+  minWidth={0}
+  maxWidth={480}
   maxHeight={300}
   dismissible={false}
   on:mouseenter={stopHiding}
-  on:mouseleave={hidePopover}
 >
   <div class="helper">
     <Layout gap="S">

From 7a278234b55d82b4407e51edc4d46b0b7c342eb5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 19 Feb 2024 16:30:29 +0000
Subject: [PATCH 16/67] Suppress warning

---
 .../src/components/common/bindings/BindingPicker.svelte      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 9c0522ce5a..60ca6abf7c 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -139,7 +139,10 @@
         </div>
       {/if}
       {#if hoverTarget.code}
-        <pre>{@html highlight(hoverTarget.code)}</pre>
+        <pre>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html highlight(hoverTarget.code)}
+        </pre>
       {/if}
     </Layout>
   </div>

From ca3f464523f4f57351db2f979c6392da4297756e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 20 Feb 2024 10:11:27 +0000
Subject: [PATCH 17/67] Tidy up logic for showing and hiding popovers for
 bindings and helpers

---
 .../common/CodeEditor/CodeEditor.svelte       | 22 ++++-
 .../src/components/common/CodeEditor/index.js |  5 +
 .../common/bindings/BindingPanel.svelte       | 45 +++++++--
 .../common/bindings/BindingPicker.svelte      | 93 +++++++------------
 4 files changed, 91 insertions(+), 74 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index f4fa762bce..b169cd2f7c 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -117,7 +117,7 @@
   const indentWithTabCustom = {
     key: "Tab",
     run: view => {
-      if (completionStatus(view.state) == "active") {
+      if (completionStatus(view.state) === "active") {
         acceptCompletion(view)
         return true
       }
@@ -131,7 +131,7 @@
   }
 
   const buildKeymap = () => {
-    const baseMap = [
+    return [
       ...closeBracketsKeymap,
       ...defaultKeymap,
       ...historyKeymap,
@@ -139,7 +139,6 @@
       ...completionKeymap,
       indentWithTabCustom,
     ]
-    return baseMap
   }
 
   const buildBaseExtensions = () => {
@@ -215,7 +214,7 @@
       )
     }
 
-    if (mode.name == "javascript") {
+    if (mode.name === "javascript") {
       complete.push(javascript())
       complete.push(highlightWhitespace())
       complete.push(lineNumbers())
@@ -321,4 +320,19 @@
     border-radius: var(--border-radius-s);
     padding: 4px 6px;
   }
+
+  .code-editor :global(.binding__example) {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    white-space: pre;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-height: 480px;
+  }
+  .code-editor :global(.binding__example span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
 </style>
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 0d71a475f0..6f55f42169 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -255,6 +255,11 @@ export const buildBindingInfoNode = (completion, binding) => {
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
 
+  if (binding.valueHTML) {
+    ele.innerHTML = `<div class="binding__example">${binding.valueHTML}</div>`
+    return ele
+  }
+
   const exampleNodeHtml = binding.readableBinding
     ? `<div class="binding__example">{{ ${binding.readableBinding} }}</div>`
     : ""
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index f0ded4a67b..3708f83c61 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -62,16 +62,45 @@
   let targetMode = null
   let expressionResult
 
+  $: enrichedBindings = enrichBindings(bindings, context)
   $: usingJS = mode === "JavaScript"
   $: editorMode =
     mode === "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
-  $: bindingCompletions = bindingsToCompletions(bindings, editorMode)
-  $: runtimeExpression = readableToRuntimeBinding(bindings, value)
+  $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
+  $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: expressionResult = processStringSync(runtimeExpression || "", context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
 
+  const getBindingValue = (binding, context) => {
+    const hbs = `{{ literal ${binding.runtimeBinding} }}`
+    const res = processStringSync(hbs, context)
+    return JSON.stringify(res, null, 2)
+  }
+
+  const highlightJSON = json => {
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
+  }
+
+  const enrichBindings = (bindings, context) => {
+    return bindings.map(binding => {
+      const value = getBindingValue(binding, context)
+      return {
+        ...binding,
+        value,
+        valueHTML: highlightJSON(value),
+      }
+    })
+  }
+
   const updateValue = val => {
-    const runtimeExpression = readableToRuntimeBinding(bindings, val)
+    const runtimeExpression = readableToRuntimeBinding(enrichedBindings, val)
     valid = isValid(runtimeExpression)
     if (valid) {
       dispatch("change", val)
@@ -116,9 +145,9 @@
   }
 
   const convert = () => {
-    const runtime = readableToRuntimeBinding(bindings, hbsValue)
+    const runtime = readableToRuntimeBinding(enrichedBindings, hbsValue)
     const runtimeJs = encodeJSBinding(convertToJS(runtime))
-    jsValue = runtimeToReadableBinding(bindings, runtimeJs)
+    jsValue = runtimeToReadableBinding(enrichedBindings, runtimeJs)
     hbsValue = null
     mode = "JavaScript"
     onSelectBinding("", { forceJS: true })
@@ -143,7 +172,7 @@
   }
 
   onMount(() => {
-    valid = isValid(readableToRuntimeBinding(bindings, value))
+    valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
   })
 </script>
 
@@ -261,7 +290,7 @@
             {#if sidebar}
               <div class="binding-picker">
                 <BindingPicker
-                  {bindings}
+                  bindings={enrichedBindings}
                   {allowHelpers}
                   {context}
                   addHelper={onSelectHelper}
@@ -348,7 +377,7 @@
               {#if sidebar}
                 <div class="binding-picker">
                   <BindingPicker
-                    {bindings}
+                    bindings={enrichedBindings}
                     {allowHelpers}
                     {context}
                     addHelper={onSelectHelper}
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 60ca6abf7c..d1baa03999 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -71,36 +71,26 @@
     return names
   }
 
-  const getBindingValue = binding => {
-    const hbs = `{{ literal ${binding.runtimeBinding} }}`
-    const res = processStringSync(hbs, context)
-    return JSON.stringify(res, null, 2)
+  const showBindingPopover = (binding, target) => {
+    stopHidingPopover()
+    popoverAnchor = target
+    hoverTarget = {
+      code: binding.valueHTML,
+    }
+    popover.show()
   }
 
-  const highlight = json => {
-    return formatHighlight(json, {
-      keyColor: "#e06c75",
-      numberColor: "#e5c07b",
-      stringColor: "#98c379",
-      trueColor: "#d19a66",
-      falseColor: "#d19a66",
-      nullColor: "#c678dd",
-    })
-  }
-
-  const showPopover = (target, binding) => {
-    if (hideTimeout) {
-      clearTimeout(hideTimeout)
-      hideTimeout = null
+  const showHelperPopover = (helper, target) => {
+    stopHidingPopover()
+    if (!helper.displayText && helper.description) {
+      return
     }
-    let val = getBindingValue(binding)
-    if (val !== "") {
-      popoverAnchor = target
-      hoverTarget = {
-        code: val,
-      }
-      popover.show()
+    popoverAnchor = target
+    hoverTarget = {
+      description: helper.description,
+      code: getHelperExample(helper, mode.name === "javascript"),
     }
+    popover.show()
   }
 
   const hidePopover = () => {
@@ -112,7 +102,7 @@
     }, 100)
   }
 
-  const stopHiding = () => {
+  const stopHidingPopover = () => {
     if (hideTimeout) {
       clearTimeout(hideTimeout)
       hideTimeout = null
@@ -126,9 +116,10 @@
   anchor={popoverAnchor}
   minWidth={0}
   maxWidth={480}
-  maxHeight={300}
+  maxHeight={480}
   dismissible={false}
-  on:mouseenter={stopHiding}
+  on:mouseenter={stopHidingPopover}
+  on:mouseleave={hidePopover}
 >
   <div class="helper">
     <Layout gap="S">
@@ -139,10 +130,8 @@
         </div>
       {/if}
       {#if hoverTarget.code}
-        <pre>
-          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-          {@html highlight(hoverTarget.code)}
-        </pre>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+        <pre>{@html hoverTarget.code}</pre>
       {/if}
     </Layout>
   </div>
@@ -212,10 +201,8 @@
             {#each category.bindings as binding}
               <li
                 class="binding"
-                on:mouseenter={e => showPopover(e.target, binding)}
+                on:mouseenter={e => showBindingPopover(binding, e.target)}
                 on:mouseleave={hidePopover}
-                on:focus={() => {}}
-                on:blur={() => {}}
                 on:click={() => addBinding(binding)}
               >
                 <span class="binding__label">
@@ -227,7 +214,6 @@
                     {binding.readableBinding}
                   {/if}
                 </span>
-
                 {#if binding.display?.type || binding.fieldSchema?.type}
                   <span class="binding__typeWrap">
                     <span class="binding__type">
@@ -250,26 +236,9 @@
             {#each filteredHelpers as helper}
               <li
                 class="binding"
+                on:mouseenter={e => showHelperPopover(helper, e.target)}
+                on:mouseleave={hidePopover}
                 on:click={() => addHelper(helper, mode.name === "javascript")}
-                on:mouseenter={e => {
-                  popoverAnchor = e.target
-                  if (!helper.displayText && helper.description) {
-                    return
-                  }
-                  hoverTarget = {
-                    description: helper.description,
-                    code: getHelperExample(helper, mode.name === "javascript"),
-                  }
-                  popover.show()
-                  e.stopPropagation()
-                }}
-                on:mouseleave={() => {
-                  popover.hide()
-                  popoverAnchor = null
-                  hoverTarget = null
-                }}
-                on:focus={() => {}}
-                on:blur={() => {}}
               >
                 <span class="binding__label">{helper.displayText}</span>
                 <span class="binding__typeWrap">
@@ -287,16 +256,16 @@
 <style>
   .search :global(input) {
     border: none;
-    border-radius: 0px;
+    border-radius: 0;
     background: none;
-    padding: 0px;
+    padding: 0;
   }
 
   .search {
     padding: var(--spacing-m) var(--spacing-l);
     display: flex;
     align-items: center;
-    border-top: 0px;
+    border-top: 0;
     border-bottom: var(--border-light);
     border-left: 2px solid transparent;
     border-right: 2px solid transparent;
@@ -316,17 +285,17 @@
   }
 
   ul.category-list {
-    padding: 0px var(--spacing-l);
+    padding: 0 var(--spacing-l);
     padding-bottom: var(--spacing-l);
   }
   .sub-section {
     padding: var(--spacing-l);
-    padding-top: 0px;
+    padding-top: 0;
   }
   .sub-section-back {
     padding: var(--spacing-l);
     padding-top: var(--spacing-xl);
-    padding-bottom: 0px;
+    padding-bottom: 0;
   }
   .cat-heading {
     margin-bottom: var(--spacing-l);

From 0217bac2672fda9d765da9ee3f059512fe8c24f8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 22 Feb 2024 15:05:21 +0000
Subject: [PATCH 18/67] Add multiple style improvements to drawers

---
 packages/bbui/src/Drawer/Drawer.svelte        |  18 +-
 packages/bbui/src/Drawer/DrawerContent.svelte |  14 +-
 .../SetupPanel/AutomationBlockSetup.svelte    |   2 +-
 .../common/CodeEditor/CodeEditor.svelte       |  13 +-
 .../src/components/common/CodeEditor/index.js |  17 +
 .../common/bindings/BindingPanel.svelte       | 703 +++++++-----------
 ...gPicker.svelte => BindingSidePanel.svelte} | 220 +++---
 .../bindings/DrawerBindableInput.svelte       |   4 -
 .../bindings/EvaluationSidePanel.svelte       | 122 +++
 9 files changed, 568 insertions(+), 545 deletions(-)
 rename packages/builder/src/components/common/bindings/{BindingPicker.svelte => BindingSidePanel.svelte} (66%)
 create mode 100644 packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 8976bfb81e..00891c6bdc 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -9,7 +9,7 @@
   export let title
   export let fillWidth
   export let left = "314px"
-  export let width = "calc(100% - 626px)"
+  export let width = "calc(100% - 648px)"
   export let headless = false
 
   const dispatch = createEventDispatcher()
@@ -68,10 +68,7 @@
       {#if !headless}
         <header>
           <div class="text">
-            <Heading size="XS">{title}</Heading>
-            <Body size="S">
-              <slot name="description" />
-            </Body>
+            {title}
           </div>
           <div class="buttons">
             <Button secondary quiet on:click={hide}>Cancel</Button>
@@ -85,10 +82,6 @@
 {/if}
 
 <style>
-  .drawer.headless :global(.drawer-contents) {
-    height: calc(40vh + 75px);
-  }
-
   .buttons {
     display: flex;
     gap: var(--spacing-m);
@@ -98,8 +91,11 @@
     position: absolute;
     bottom: 0;
     background: var(--background);
-    border-top: var(--border-light);
+    border: var(--border-light);
     z-index: 3;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 8px;
   }
 
   .fillWidth {
@@ -112,7 +108,7 @@
     justify-content: space-between;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: var(--spacing-l) var(--spacing-xl);
+    padding: var(--spacing-m) var(--spacing-xl);
     gap: var(--spacing-xl);
   }
 
diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 944a3f4313..1c7c48170f 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -1,4 +1,8 @@
-<div class="drawer-contents">
+<script>
+  export let padding = true
+</script>
+
+<div class="drawer-contents" class:padding>
   <div class:no-sidebar={!$$slots.sidebar} class="container">
     {#if $$slots.sidebar}
       <div class="sidebar">
@@ -13,7 +17,7 @@
 
 <style>
   .drawer-contents {
-    height: 40vh;
+    height: 400px;
     overflow-y: auto;
   }
   .container {
@@ -27,13 +31,15 @@
   .sidebar {
     border-right: var(--border-light);
     overflow: auto;
-    padding: var(--spacing-xl);
     scrollbar-width: none;
   }
+  .padding .sidebar {
+    padding: var(--spacing-xl);
+  }
   .sidebar::-webkit-scrollbar {
     display: none;
   }
-  .main {
+  .padding .main {
     padding: var(--spacing-xl);
   }
   .main :global(textarea) {
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 707317f9e6..2c7282ad7e 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -31,7 +31,7 @@
   import Editor from "components/integration/QueryEditor.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
-  import BindingPicker from "components/common/bindings/BindingPicker.svelte"
+  import BindingPicker from "components/common/bindings/BindingSidePanel.svelte"
   import { BindingHelpers } from "components/common/bindings/utils"
   import {
     bindingsToCompletions,
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index b169cd2f7c..0d8798d0f2 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -153,6 +153,8 @@
       syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }),
       highlightActiveLineGutter(),
       highlightSpecialChars(),
+      lineNumbers(),
+      foldGutter(),
       EditorView.lineWrapping,
       EditorView.updateListener.of(v => {
         const docStr = v.state.doc?.toString()
@@ -217,8 +219,6 @@
     if (mode.name === "javascript") {
       complete.push(javascript())
       complete.push(highlightWhitespace())
-      complete.push(lineNumbers())
-      complete.push(foldGutter())
     }
 
     if (placeholder) {
@@ -297,9 +297,14 @@
 </div>
 
 <style>
-  .code-editor.handlebars :global(.cm-content) {
-    font-family: var(--font-sans);
+  /* Unify spacing between HBS and JS */
+  .code-editor :global(.cm-content) {
+    padding: var(--spacing-m) 0;
   }
+  .code-editor {
+    font-size: 12px;
+  }
+
   .code-editor :global(.cm-tooltip.cm-completionInfo) {
     padding: var(--spacing-m);
   }
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 6f55f42169..e320dacb3f 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -31,6 +31,23 @@ export const getDefaultTheme = opts => {
   const { height, resize, dark } = opts
   return EditorView.theme(
     {
+      ".cm-gutters": {
+        backgroundColor: "var(--spectrum-global-color-gray-75)",
+        color: "var(--spectrum-global-color-gray-500)",
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: "var(--spectrum-global-color-gray-200)",
+        color: "var(--spectrum-global-color-gray-700)",
+      },
+      ".cm-activeLine": {
+        backgroundColor: "var(--spectrum-global-color-gray-75)",
+      },
+      ".cm-line": {
+        padding: "0 var(--spacing-s)",
+      },
+      ".cm-selectionBackground": {
+        backgroundColor: "var(--spectrum-global-color-gray-200) !important",
+      },
       "&.cm-focused .cm-cursor": {
         borderLeftColor: "var(--spectrum-alias-text-color)",
       },
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 3708f83c61..5d64f0e171 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,15 +1,6 @@
 <script>
-  import {
-    DrawerContent,
-    Tabs,
-    Tab,
-    Body,
-    Button,
-    ActionButton,
-    Heading,
-    Icon,
-  } from "@budibase/bbui"
-  import { createEventDispatcher, onMount, getContext } from "svelte"
+  import { DrawerContent, ActionButton, Icon } from "@budibase/bbui"
+  import { createEventDispatcher, onMount } from "svelte"
   import {
     isValid,
     decodeJSBinding,
@@ -21,8 +12,6 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "dataBinding"
-
-  import { admin } from "stores/portal"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
   import {
     getHelperCompletions,
@@ -31,17 +20,15 @@
     EditorModes,
     bindingsToCompletions,
   } from "../CodeEditor"
-  import BindingPicker from "./BindingPicker.svelte"
+  import BindingSidePanel from "./BindingSidePanel.svelte"
+  import EvaluationSidePanel from "./EvaluationSidePanel.svelte"
   import { BindingHelpers } from "./utils"
   import formatHighlight from "json-format-highlight"
+  import { capitalise } from "helpers"
 
   const dispatch = createEventDispatcher()
 
   export let bindings
-  // jsValue/hbsValue are the state of the value that is being built
-  // within this binding panel - the value should not be updated until
-  // the binding panel is saved. This is the default value of the
-  // expression when the binding panel is opened, but shouldn't be updated.
   export let value = ""
   export let valid
   export let allowJS = false
@@ -49,23 +36,32 @@
   export let context = null
   export let autofocusEditor = false
 
-  const drawerActions = getContext("drawer-actions")
-  const bindingDrawerActions = getContext("binding-drawer-actions")
+  const Modes = {
+    Text: "Text",
+    JavaScript: "JavaScript",
+  }
+  const SidePanels = {
+    Bindings: "FlashOn",
+    Evaluation: "Play",
+  }
+
+  let initialValueJS = value?.startsWith?.("{{ js ")
+  let mode = initialValueJS ? Modes.JavaScript : Modes.Text
+  let sidePanel = null
 
   let getCaretPosition
   let insertAtPos
-  let initialValueJS = typeof value === "string" && value?.startsWith("{{ js ")
-  let mode = initialValueJS ? "JavaScript" : "Text"
   let jsValue = initialValueJS ? value : null
   let hbsValue = initialValueJS ? null : value
-  let sidebar = true
   let targetMode = null
   let expressionResult
 
+  $: editorTabs = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
+  $: sideTabs = [SidePanels.Evaluation, SidePanels.Bindings]
   $: enrichedBindings = enrichBindings(bindings, context)
-  $: usingJS = mode === "JavaScript"
+  $: usingJS = mode === Modes.JavaScript
   $: editorMode =
-    mode === "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
+    mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
   $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: expressionResult = processStringSync(runtimeExpression || "", context)
@@ -117,9 +113,13 @@
     bindingHelpers.onSelectBinding(js ? jsValue : hbsValue, binding, { js })
   }
 
-  const onChangeMode = e => {
-    mode = e.detail
-    updateValue(mode === "JavaScript" ? jsValue : hbsValue)
+  const changeMode = newMode => {
+    mode = newMode
+    updateValue(newMode === Modes.JavaScript ? jsValue : hbsValue)
+  }
+
+  const changeSidePanel = newSidePanel => {
+    sidePanel = newSidePanel === sidePanel ? null : newSidePanel
   }
 
   const onChangeHBSValue = e => {
@@ -153,412 +153,292 @@
     onSelectBinding("", { forceJS: true })
   }
 
-  const highlight = json => {
-    // Attempt to parse and then stringify, in case this is valid JSON
-    try {
-      json = JSON.stringify(JSON.parse(json), null, 2)
-    } catch (err) {
-      // Ignore
-    }
-
-    return formatHighlight(json, {
-      keyColor: "#e06c75",
-      numberColor: "#e5c07b",
-      stringColor: "#98c379",
-      trueColor: "#d19a66",
-      falseColor: "#d19a66",
-      nullColor: "#c678dd",
-    })
-  }
-
   onMount(() => {
     valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
   })
 </script>
 
-<span class="binding-drawer">
-  <DrawerContent>
+<DrawerContent padding={false}>
+  <div class="binding-panel">
     <div class="main">
-      <Tabs
-        selected={mode}
-        on:select={onChangeMode}
-        beforeSwitch={selectedMode => {
-          if (selectedMode === mode) {
-            return true
-          }
-          const editorValue = usingJS ? decodeJSBinding(jsValue) : hbsValue
-          if (editorValue) {
-            targetMode = selectedMode
-            return false
-          }
-          return true
-        }}
-      >
-        <Tab title="Text">
-          <div class="main-content" class:binding-panel={sidebar}>
-            <div class="editor">
-              <div class="overlay-wrap">
-                {#if targetMode}
-                  <div class="mode-overlay">
-                    <div class="prompt-body">
-                      <Heading size="S">
-                        {`Switch to ${targetMode}?`}
-                      </Heading>
-                      <Body>This will discard anything in your binding</Body>
-                      <div class="switch-actions">
-                        <Button
-                          secondary
-                          size="S"
-                          on:click={() => {
-                            targetMode = null
-                          }}
-                        >
-                          No - keep text
-                        </Button>
-                        <Button cta size="S" on:click={switchMode}>
-                          Yes - discard text
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                {/if}
-                <CodeEditor
-                  value={hbsValue}
-                  on:change={onChangeHBSValue}
-                  bind:getCaretPosition
-                  bind:insertAtPos
-                  completions={[
-                    hbAutocomplete([
-                      ...bindingCompletions,
-                      ...getHelperCompletions(editorMode),
-                    ]),
-                  ]}
-                  placeholder=""
-                  height="100%"
-                  autofocus={autofocusEditor}
-                />
-              </div>
-              {#if expressionResult}
-                <div class="result">
-                  {@html highlight(expressionResult)}
-                </div>
-              {/if}
-              <div class="binding-footer">
-                <div class="messaging">
-                  {#if !valid}
-                    <div class="syntax-error">
-                      Current Handlebars syntax is invalid, please check the
-                      guide
-                      <a href="https://handlebarsjs.com/guide/" target="_blank">
-                        here
-                      </a>
-                      for more details.
-                    </div>
-                  {:else}
-                    <Icon name="FlashOn" />
-                    <div class="messaging-wrap">
-                      <div>
-                        Add available bindings by typing &#123;&#123; or use the
-                        menu on the right
-                      </div>
-                    </div>
-                  {/if}
-                </div>
-                <div class="actions">
-                  {#if $admin.isDev && allowJS}
-                    <ActionButton
-                      secondary
-                      on:click={() => {
-                        convert()
-                        targetMode = null
-                      }}
-                    >
-                      Convert To JS
-                    </ActionButton>
-                  {/if}
-                  <ActionButton
-                    secondary
-                    icon={sidebar ? "RailRightClose" : "RailRightOpen"}
-                    on:click={() => {
-                      sidebar = !sidebar
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {#if sidebar}
-              <div class="binding-picker">
-                <BindingPicker
-                  bindings={enrichedBindings}
-                  {allowHelpers}
-                  {context}
-                  addHelper={onSelectHelper}
-                  addBinding={onSelectBinding}
-                  mode={editorMode}
-                />
-              </div>
-            {/if}
-          </div>
-        </Tab>
-        {#if allowJS}
-          <Tab title="JavaScript">
-            <div class="main-content" class:binding-panel={sidebar}>
-              <div class="editor">
-                <div class="overlay-wrap">
-                  {#if targetMode}
-                    <div class="mode-overlay">
-                      <div class="prompt-body">
-                        <Heading size="S">
-                          {`Switch to ${targetMode}?`}
-                        </Heading>
-                        <Body>This will discard anything in your binding</Body>
-                        <div class="switch-actions">
-                          <Button
-                            secondary
-                            size="S"
-                            on:click={() => {
-                              targetMode = null
-                            }}
-                          >
-                            No - keep javascript
-                          </Button>
-                          <Button cta size="S" on:click={switchMode}>
-                            Yes - discard javascript
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  {/if}
-
-                  <CodeEditor
-                    value={decodeJSBinding(jsValue)}
-                    on:change={onChangeJSValue}
-                    completions={[
-                      jsAutocomplete([
-                        ...bindingCompletions,
-                        ...getHelperCompletions(editorMode),
-                      ]),
-                    ]}
-                    mode={EditorModes.JS}
-                    bind:getCaretPosition
-                    bind:insertAtPos
-                    height="100%"
-                    autofocus={autofocusEditor}
-                  />
-                </div>
-                {#if expressionResult}
-                  <div class="result">
-                    {@html highlight(expressionResult)}
-                  </div>
-                {/if}
-                <div class="binding-footer">
-                  <div class="messaging">
-                    <Icon name="FlashOn" />
-                    <div class="messaging-wrap">
-                      <div>
-                        Add available bindings by typing $ or use the menu on
-                        the right
-                      </div>
-                    </div>
-                  </div>
-                  <div class="actions">
-                    <ActionButton
-                      secondary
-                      icon={sidebar ? "RailRightClose" : "RailRightOpen"}
-                      on:click={() => {
-                        sidebar = !sidebar
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {#if sidebar}
-                <div class="binding-picker">
-                  <BindingPicker
-                    bindings={enrichedBindings}
-                    {allowHelpers}
-                    {context}
-                    addHelper={onSelectHelper}
-                    addBinding={onSelectBinding}
-                    mode={editorMode}
-                  />
-                </div>
-              {/if}
-            </div>
-          </Tab>
-        {/if}
-        <div class="drawer-actions">
-          {#if typeof drawerActions?.hide === "function" && drawerActions?.headless}
-            <Button
-              secondary
+      <div class="tabs">
+        <div class="editor-tabs">
+          {#each editorTabs as tab}
+            <ActionButton
+              size="M"
               quiet
-              on:click={() => {
-                drawerActions.hide()
-              }}
+              selected={mode === tab}
+              on:click={() => changeMode(tab)}
             >
-              Cancel
-            </Button>
-          {/if}
-          {#if typeof bindingDrawerActions?.save === "function" && drawerActions?.headless}
-            <Button
-              cta
-              disabled={!valid}
-              on:click={() => {
-                bindingDrawerActions.save()
-              }}
-            >
-              Save
-            </Button>
-          {/if}
+              {capitalise(tab)}
+            </ActionButton>
+          {/each}
         </div>
-      </Tabs>
+        <div class="side-tabs">
+          {#each sideTabs as tab}
+            <ActionButton
+              size="M"
+              quiet
+              selected={sidePanel === tab}
+              on:click={() => changeSidePanel(tab)}
+            >
+              <Icon name={tab} size="S" />
+            </ActionButton>
+          {/each}
+        </div>
+      </div>
+      <div class="editor">
+        {#if mode === Modes.Text}
+          <CodeEditor
+            value={hbsValue}
+            on:change={onChangeHBSValue}
+            bind:getCaretPosition
+            bind:insertAtPos
+            completions={[
+              hbAutocomplete([
+                ...bindingCompletions,
+                ...getHelperCompletions(editorMode),
+              ]),
+            ]}
+            height="100%"
+            autofocus={autofocusEditor}
+            placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
+          />
+        {:else if mode === Modes.JavaScript}
+          <CodeEditor
+            value={decodeJSBinding(jsValue)}
+            on:change={onChangeJSValue}
+            completions={[
+              jsAutocomplete([
+                ...bindingCompletions,
+                ...getHelperCompletions(editorMode),
+              ]),
+            ]}
+            mode={EditorModes.JS}
+            bind:getCaretPosition
+            bind:insertAtPos
+            height="100%"
+            autofocus={autofocusEditor}
+            placeholder="Add bindings by typing $ or use the menu on the right"
+          />
+        {/if}
+      </div>
     </div>
-  </DrawerContent>
-</span>
+    <div class="side" class:visible={!!sidePanel}>
+      {#if sidePanel === SidePanels.Bindings}
+        <BindingSidePanel
+          bindings={enrichedBindings}
+          {allowHelpers}
+          {context}
+          addHelper={onSelectHelper}
+          addBinding={onSelectBinding}
+          mode={editorMode}
+        />
+      {:else if sidePanel === SidePanels.Evaluation}
+        <EvaluationSidePanel {expressionResult} />
+      {/if}
+    </div>
+  </div>
+</DrawerContent>
 
 <style>
-  .binding-drawer :global(.container > .main) {
-    overflow: hidden;
-    height: 100%;
-    padding: 0px;
-  }
-
-  .binding-drawer :global(.container > .main > .main) {
-    overflow: hidden;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .binding-drawer :global(.spectrum-Tabs-content) {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .binding-drawer :global(.spectrum-Tabs-content > div),
-  .binding-drawer :global(.spectrum-Tabs-content > div > div),
-  .binding-drawer :global(.spectrum-Tabs-content .main-content) {
+  .binding-panel {
     height: 100%;
   }
-
-  .binding-drawer .main-content {
-    grid-template-rows: unset;
-  }
-
-  .messaging {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-m);
-    min-width: 0;
-    flex: 1;
-  }
-  .messaging-wrap {
-    overflow: hidden;
-  }
-  .messaging-wrap > div {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .main :global(textarea) {
-    min-height: 202px !important;
-  }
-
-  .main-content {
-    padding: var(--spacing-s) var(--spacing-xl);
-  }
-
-  .main :global(.spectrum-Tabs div.drawer-actions) {
-    display: flex;
-    gap: var(--spacing-m);
-    margin-left: auto;
-  }
-
-  .main :global(.spectrum-Tabs-content),
-  .main :global(.spectrum-Tabs-content .main-content) {
-    margin-top: 0px;
-    padding: 0px;
-  }
-
-  .main :global(.spectrum-Tabs) {
-    display: flex;
-  }
-
-  .syntax-error {
-    color: var(--red);
-    font-size: 12px;
-  }
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
-
-  .binding-footer {
-    width: 100%;
+  .binding-panel,
+  .tabs {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
+    align-items: stretch;
   }
-  .main-content {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 380px;
-  }
-  .main-content.binding-panel {
-    grid-template-columns: 1fr 320px;
-  }
-  .binding-picker {
-    border-left: 2px solid var(--border-light);
-    border-left: var(--border-light);
-    overflow: scroll;
-    height: 100%;
-  }
-  .editor {
-    padding: var(--spacing-xl);
-    min-width: 0;
+  .main {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xl);
-    overflow: hidden;
+    justify-content: flex-start;
+    align-items: stretch;
   }
-  .overlay-wrap {
-    position: relative;
-    flex: 1;
-    overflow: hidden;
+  .side {
+    flex: 0 0 0;
+    transition: flex 130ms ease-out;
   }
-  .mode-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(
-      --spectrum-textfield-m-background-color,
-      var(--spectrum-global-color-gray-50)
-    );
-    border-radius: var(--border-radius-s);
-  }
-  .prompt-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-l);
-  }
-  .prompt-body .switch-actions {
-    display: flex;
-    gap: var(--spacing-l);
+  .side.visible {
+    flex: 0 0 420px;
   }
 
-  .binding-drawer :global(.code-editor),
-  .binding-drawer :global(.code-editor > div) {
+  /* Tabs */
+  .tabs {
+    padding: var(--spacing-m);
+    border-bottom: 2px solid transparent;
+  }
+  .editor-tabs,
+  .side-tabs {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .side-tabs :global(.icon) {
+    width: 16px;
+    display: flex;
+  }
+
+  /* Editor */
+  .editor {
+    flex: 1 1 auto;
+    height: 0;
+  }
+  .editor :global(.code-editor),
+  .editor :global(.code-editor > div),
+  .editor :global(.cm-editor) {
     height: 100%;
   }
+  .editor :global(.cm-editor) {
+    border: none;
+    border-radius: 0;
+  }
+
+  /*.binding-drawer :global(.container > .main) {*/
+  /*  overflow: hidden;*/
+  /*  height: 100%;*/
+  /*  padding: 0px;*/
+  /*}*/
+  /*.binding-drawer :global(.container > .main > .main) {*/
+  /*  overflow: hidden;*/
+  /*  height: 100%;*/
+  /*  display: flex;*/
+  /*  flex-direction: column;*/
+  /*}*/
+
+  /*.binding-drawer :global(.spectrum-Tabs-content) {*/
+  /*  flex: 1;*/
+  /*  overflow: hidden;*/
+  /*}*/
+
+  /*.binding-drawer :global(.spectrum-Tabs-content > div),*/
+  /*.binding-drawer :global(.spectrum-Tabs-content > div > div),*/
+  /*.binding-drawer :global(.spectrum-Tabs-content .main-content) {*/
+  /*  height: 100%;*/
+  /*}*/
+
+  /*.binding-drawer .main-content {*/
+  /*  grid-template-rows: unset;*/
+  /*}*/
+
+  /*.messaging {*/
+  /*  display: flex;*/
+  /*  align-items: center;*/
+  /*  gap: var(--spacing-m);*/
+  /*  min-width: 0;*/
+  /*  flex: 1;*/
+  /*}*/
+  /*.messaging-wrap {*/
+  /*  overflow: hidden;*/
+  /*}*/
+  /*.messaging-wrap > div {*/
+  /*  text-overflow: ellipsis;*/
+  /*  white-space: nowrap;*/
+  /*  overflow: hidden;*/
+  /*}*/
+  /*.main :global(textarea) {*/
+  /*  min-height: 202px !important;*/
+  /*}*/
+
+  /*.main-content {*/
+  /*  padding: var(--spacing-s) var(--spacing-xl);*/
+  /*}*/
+
+  /*.main :global(.spectrum-Tabs div.drawer-actions) {*/
+  /*  display: flex;*/
+  /*  gap: var(--spacing-m);*/
+  /*  margin-left: auto;*/
+  /*}*/
+
+  /*.main :global(.spectrum-Tabs-content),*/
+  /*.main :global(.spectrum-Tabs-content .main-content) {*/
+  /*  margin-top: 0px;*/
+  /*  padding: 0px;*/
+  /*}*/
+
+  /*.main :global(.spectrum-Tabs) {*/
+  /*  display: flex;*/
+  /*}*/
+
+  /*.syntax-error {*/
+  /*  color: var(--red);*/
+  /*  font-size: 12px;*/
+  /*}*/
+  /*.syntax-error a {*/
+  /*  color: var(--red);*/
+  /*  text-decoration: underline;*/
+  /*}*/
+
+  /*.binding-footer {*/
+  /*  width: 100%;*/
+  /*  display: flex;*/
+  /*  justify-content: space-between;*/
+  /*}*/
+  /*.main-content {*/
+  /*  display: grid;*/
+  /*  grid-template-columns: 1fr;*/
+  /*  grid-template-rows: 380px;*/
+  /*}*/
+  /*.main-content.binding-panel {*/
+  /*  grid-template-columns: 1fr 320px;*/
+  /*}*/
+  /*.binding-picker {*/
+  /*  border-left: 2px solid var(--border-light);*/
+  /*  border-left: var(--border-light);*/
+  /*  overflow: scroll;*/
+  /*  height: 100%;*/
+  /*}*/
+  /*.editor {*/
+  /*  padding: var(--spacing-xl);*/
+  /*  min-width: 0;*/
+  /*  display: flex;*/
+  /*  flex-direction: column;*/
+  /*  gap: var(--spacing-xl);*/
+  /*  overflow: hidden;*/
+  /*}*/
+  /*.overlay-wrap {*/
+  /*  position: relative;*/
+  /*  flex: 1;*/
+  /*  overflow: hidden;*/
+  /*}*/
+  /*.mode-overlay {*/
+  /*  position: absolute;*/
+  /*  top: 0;*/
+  /*  left: 0;*/
+  /*  z-index: 2;*/
+  /*  width: 100%;*/
+  /*  height: 100%;*/
+  /*  display: flex;*/
+  /*  align-items: center;*/
+  /*  justify-content: center;*/
+  /*  background-color: var(*/
+  /*    --spectrum-textfield-m-background-color,*/
+  /*    var(--spectrum-global-color-gray-50)*/
+  /*  );*/
+  /*  border-radius: var(--border-radius-s);*/
+  /*}*/
+  /*.prompt-body {*/
+  /*  display: flex;*/
+  /*  flex-direction: column;*/
+  /*  align-items: center;*/
+  /*  justify-content: center;*/
+  /*  gap: var(--spacing-l);*/
+  /*}*/
+  /*.prompt-body .switch-actions {*/
+  /*  display: flex;*/
+  /*  gap: var(--spacing-l);*/
+  /*}*/
+
+  /*.binding-drawer :global(.code-editor),*/
+  /*.binding-drawer :global(.code-editor > div) {*/
+  /*  height: 100%;*/
+  /*}*/
 
   .result {
     margin: 0;
@@ -568,10 +448,5 @@
     border-radius: var(--border-radius-s);
     font-family: monospace;
     border: 1px solid var(--spectrum-global-color-gray-300);
-    overflow-y: scroll;
-    overflow-x: hidden;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    max-height: 128px;
   }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
similarity index 66%
rename from packages/builder/src/components/common/bindings/BindingPicker.svelte
rename to packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index d1baa03999..b74f3c6fcd 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -137,123 +137,129 @@
   </div>
 </Popover>
 
-<Layout noPadding gap="S">
-  {#if selectedCategory}
-    <div class="sub-section-back">
-      <ActionButton
-        secondary
-        icon={"ArrowLeft"}
-        on:click={() => {
-          selectedCategory = null
-        }}
-      >
-        Back
-      </ActionButton>
-    </div>
-  {/if}
-
-  {#if !selectedCategory}
-    <div class="search">
-      <span class="search-input">
-        <Input
-          placeholder={"Search for bindings"}
-          autocomplete="off"
-          bind:value={search}
-        />
-      </span>
-
-      <span
-        class="search-input-icon"
-        on:click={() => {
-          search = null
-        }}
-        class:searching={search}
-      >
-        <Icon name={search ? "Close" : "Search"} />
-      </span>
-    </div>
-  {/if}
-
-  {#if !selectedCategory && !search}
-    <ul class="category-list">
-      {#each categoryNames as categoryName}
-        <li
+<div class="binding-side-panel">
+  <Layout noPadding gap="S">
+    {#if selectedCategory}
+      <div class="sub-section-back">
+        <ActionButton
+          secondary
+          icon={"ArrowLeft"}
           on:click={() => {
-            selectedCategory = categoryName
+            selectedCategory = null
           }}
         >
-          <Icon name={categoryIcons[categoryName]} />
-          <span class="category-name">{categoryName} </span>
-          <span class="category-chevron"><Icon name="ChevronRight" /></span>
-        </li>
-      {/each}
-    </ul>
-  {/if}
+          Back
+        </ActionButton>
+      </div>
+    {/if}
 
-  {#if selectedCategory || search}
-    {#each filteredCategories as category}
-      {#if category.bindings?.length}
-        <div class="sub-section">
-          <div class="cat-heading">
-            <Icon name={categoryIcons[category.name]} />{category.name}
-          </div>
-          <ul>
-            {#each category.bindings as binding}
-              <li
-                class="binding"
-                on:mouseenter={e => showBindingPopover(binding, e.target)}
-                on:mouseleave={hidePopover}
-                on:click={() => addBinding(binding)}
-              >
-                <span class="binding__label">
-                  {#if binding.display?.name}
-                    {binding.display.name}
-                  {:else if binding.fieldSchema?.name}
-                    {binding.fieldSchema?.name}
-                  {:else}
-                    {binding.readableBinding}
-                  {/if}
-                </span>
-                {#if binding.display?.type || binding.fieldSchema?.type}
-                  <span class="binding__typeWrap">
-                    <span class="binding__type">
-                      {binding.display?.type || binding.fieldSchema?.type}
-                    </span>
+    {#if !selectedCategory}
+      <div class="search">
+        <span class="search-input">
+          <Input
+            placeholder={"Search for bindings"}
+            autocomplete="off"
+            bind:value={search}
+          />
+        </span>
+
+        <span
+          class="search-input-icon"
+          on:click={() => {
+            search = null
+          }}
+          class:searching={search}
+        >
+          <Icon name={search ? "Close" : "Search"} />
+        </span>
+      </div>
+    {/if}
+
+    {#if !selectedCategory && !search}
+      <ul class="category-list">
+        {#each categoryNames as categoryName}
+          <li
+            on:click={() => {
+              selectedCategory = categoryName
+            }}
+          >
+            <Icon name={categoryIcons[categoryName]} />
+            <span class="category-name">{categoryName} </span>
+            <span class="category-chevron"><Icon name="ChevronRight" /></span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    {#if selectedCategory || search}
+      {#each filteredCategories as category}
+        {#if category.bindings?.length}
+          <div class="sub-section">
+            <div class="cat-heading">
+              <Icon name={categoryIcons[category.name]} />{category.name}
+            </div>
+            <ul>
+              {#each category.bindings as binding}
+                <li
+                  class="binding"
+                  on:mouseenter={e => showBindingPopover(binding, e.target)}
+                  on:mouseleave={hidePopover}
+                  on:click={() => addBinding(binding)}
+                >
+                  <span class="binding__label">
+                    {#if binding.display?.name}
+                      {binding.display.name}
+                    {:else if binding.fieldSchema?.name}
+                      {binding.fieldSchema?.name}
+                    {:else}
+                      {binding.readableBinding}
+                    {/if}
                   </span>
-                {/if}
-              </li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
-    {/each}
+                  {#if binding.display?.type || binding.fieldSchema?.type}
+                    <span class="binding__typeWrap">
+                      <span class="binding__type">
+                        {binding.display?.type || binding.fieldSchema?.type}
+                      </span>
+                    </span>
+                  {/if}
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+      {/each}
 
-    {#if selectedCategory === "Helpers" || search}
-      {#if filteredHelpers?.length}
-        <div class="sub-section">
-          <div class="cat-heading">Helpers</div>
-          <ul class="helpers">
-            {#each filteredHelpers as helper}
-              <li
-                class="binding"
-                on:mouseenter={e => showHelperPopover(helper, e.target)}
-                on:mouseleave={hidePopover}
-                on:click={() => addHelper(helper, mode.name === "javascript")}
-              >
-                <span class="binding__label">{helper.displayText}</span>
-                <span class="binding__typeWrap">
-                  <span class="binding__type">function</span>
-                </span>
-              </li>
-            {/each}
-          </ul>
-        </div>
+      {#if selectedCategory === "Helpers" || search}
+        {#if filteredHelpers?.length}
+          <div class="sub-section">
+            <div class="cat-heading">Helpers</div>
+            <ul class="helpers">
+              {#each filteredHelpers as helper}
+                <li
+                  class="binding"
+                  on:mouseenter={e => showHelperPopover(helper, e.target)}
+                  on:mouseleave={hidePopover}
+                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                >
+                  <span class="binding__label">{helper.displayText}</span>
+                  <span class="binding__typeWrap">
+                    <span class="binding__type">function</span>
+                  </span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
       {/if}
     {/if}
-  {/if}
-</Layout>
+  </Layout>
+</div>
 
 <style>
+  .binding-side-panel {
+    border-left: var(--border-light);
+  }
+
   .search :global(input) {
     border: none;
     border-radius: 0;
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 11b7901e84..0a021bb8df 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -91,11 +91,7 @@
   bind:this={bindingDrawer}
   {title}
   left={drawerLeft}
-  headless
 >
-  <svelte:fragment slot="description">
-    Add the objects on the left to enrich your text.
-  </svelte:fragment>
   <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
     Save
   </Button>
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
new file mode 100644
index 0000000000..21d891d998
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -0,0 +1,122 @@
+<script>
+  import formatHighlight from "json-format-highlight"
+  import { Icon, notifications } from "@budibase/bbui"
+  import { copyToClipboard } from "@budibase/bbui/helpers"
+
+  export let expressionResult
+
+  $: error = expressionResult === "Error while executing JS"
+  $: empty = expressionResult == null || expressionResult === ""
+  $: success = !error && !empty
+
+  const highlight = json => {
+    // Attempt to parse and then stringify, in case this is valid JSON
+    try {
+      json = JSON.stringify(JSON.parse(json), null, 2)
+    } catch (err) {
+      // Ignore
+    }
+
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
+  }
+
+  const copy = () => {
+    let clipboardVal = expressionResult
+    if (typeof clipboardVal === "object") {
+      clipboardVal = JSON.stringify(clipboardVal, null, 2)
+    }
+    copyToClipboard(clipboardVal)
+    notifications.success("Value copied to clipboard")
+  }
+</script>
+
+<div class="evaluation-side-panel">
+  <div class="header" class:success class:error>
+    <div class="header-content">
+      {#if success}
+        <Icon
+          name="CheckmarkCircle"
+          color="var(--spectrum-global-color-green-600)"
+        />
+        <span>Success</span>
+        <Icon name="Copy" hoverable on:click={copy} />
+      {:else if error}
+        <Icon name="Alert" color="var(--spectrum-global-color-red-600)" />
+        <span> Error </span>
+        <Icon name="Copy" hoverable on:click={copy} />
+      {:else}
+        <span>Run</span>
+      {/if}
+    </div>
+  </div>
+  <div class="body">
+    {#if expressionResult}
+      {@html highlight(expressionResult)}
+    {:else}
+      Your expression will be evaluated here
+    {/if}
+  </div>
+</div>
+
+<style>
+  .evaluation-side-panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    border-left: var(--border-light);
+  }
+  .header {
+    padding: var(--spacing-m);
+    flex: 0 0 auto;
+    position: relative;
+    border-bottom: var(--border-light);
+  }
+  .header-content {
+    height: var(--spectrum-alias-item-height-m);
+    display: flex;
+    align-items: center;
+    z-index: 2;
+    position: relative;
+    gap: var(--spacing-m);
+  }
+  .header-content span {
+    flex: 1 1 auto;
+  }
+  .header.success::before,
+  .header.error::before {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    position: absolute;
+    opacity: 10%;
+  }
+  .header.success::before {
+    background: var(--spectrum-global-color-green-600);
+  }
+  .header.error::before {
+    background: var(--spectrum-global-color-red-400);
+  }
+  .body {
+    flex: 1 1 auto;
+    padding: var(--spacing-m);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    height: 0;
+  }
+</style>

From 8320c50c9686602084240fcc8adb2b449d840dd8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 22 Feb 2024 16:44:18 +0000
Subject: [PATCH 19/67] Fix multiple style issues with codemirror

---
 packages/builder/package.json                 |  2 +-
 .../common/CodeEditor/CodeEditor.svelte       | 44 ++++++++++++++++++-
 .../src/components/common/CodeEditor/index.js | 13 ------
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 3bf9ab4442..4871833d48 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -66,7 +66,7 @@
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
     "@zerodevx/svelte-json-view": "^1.0.7",
-    "codemirror": "^5.59.0",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 0d8798d0f2..9341711022 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -299,12 +299,53 @@
 <style>
   /* Unify spacing between HBS and JS */
   .code-editor :global(.cm-content) {
-    padding: var(--spacing-m) 0;
+    padding: 10px 0;
   }
   .code-editor {
     font-size: 12px;
   }
 
+  /* Overrides to ensure background selection is pixel perfect with active line */
+  .code-editor :global(.cm-line) {
+    height: 16px;
+    padding: 0 var(--spacing-s);
+  }
+  .code-editor :global(.cm-activeLine) {
+    position: relative;
+    background: transparent;
+  }
+  .code-editor :global(.cm-activeLine::before) {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 1px;
+    height: calc(100% - 2px);
+    width: 100%;
+    background: var(--spectrum-global-color-gray-75);
+    z-index: -2;
+  }
+  .code-editor :global(.cm-gutterElement) {
+    margin-bottom: 0;
+  }
+  .code-editor :global(.cm-activeLineGutter) {
+    color: var(--spectrum-global-color-gray-700);
+    background: transparent;
+    position: relative;
+  }
+  .code-editor :global(.cm-activeLineGutter::before) {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 1px;
+    height: calc(100% - 2px);
+    width: 100%;
+    background: var(--spectrum-global-color-gray-200);
+    z-index: -2;
+  }
+  .code-editor :global(.cm-selectionBackground) {
+    background-color: var(--spectrum-global-color-gray-300) !important;
+  }
+
   .code-editor :global(.cm-tooltip.cm-completionInfo) {
     padding: var(--spacing-m);
   }
@@ -330,6 +371,7 @@
     padding: 0;
     margin: 0;
     font-size: 12px;
+    font-family: var(--font-mono);
     white-space: pre;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index e320dacb3f..0cf3f240f1 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -35,19 +35,6 @@ export const getDefaultTheme = opts => {
         backgroundColor: "var(--spectrum-global-color-gray-75)",
         color: "var(--spectrum-global-color-gray-500)",
       },
-      ".cm-activeLineGutter": {
-        backgroundColor: "var(--spectrum-global-color-gray-200)",
-        color: "var(--spectrum-global-color-gray-700)",
-      },
-      ".cm-activeLine": {
-        backgroundColor: "var(--spectrum-global-color-gray-75)",
-      },
-      ".cm-line": {
-        padding: "0 var(--spacing-s)",
-      },
-      ".cm-selectionBackground": {
-        backgroundColor: "var(--spectrum-global-color-gray-200) !important",
-      },
       "&.cm-focused .cm-cursor": {
         borderLeftColor: "var(--spectrum-alias-text-color)",
       },

From 41b397c2f7ac50ba94289a1d0971bc0d14296884 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 23 Feb 2024 10:15:53 +0000
Subject: [PATCH 20/67] Improve multiple styles for the drawer and code editor

---
 packages/bbui/src/Drawer/DrawerContent.svelte                | 4 ++++
 .../src/components/common/CodeEditor/CodeEditor.svelte       | 5 +++--
 packages/builder/src/components/common/CodeEditor/index.js   | 3 +--
 .../src/components/common/bindings/BindingSidePanel.svelte   | 2 ++
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 1c7c48170f..85002af923 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -39,6 +39,10 @@
   .sidebar::-webkit-scrollbar {
     display: none;
   }
+  .main {
+    height: 100%;
+    overflow: hidden;
+  }
   .padding .main {
     padding: var(--spacing-xl);
   }
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 9341711022..935ca98463 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -321,7 +321,7 @@
     top: 1px;
     height: calc(100% - 2px);
     width: 100%;
-    background: var(--spectrum-global-color-gray-75);
+    background: var(--spectrum-global-color-gray-100);
     z-index: -2;
   }
   .code-editor :global(.cm-gutterElement) {
@@ -343,7 +343,8 @@
     z-index: -2;
   }
   .code-editor :global(.cm-selectionBackground) {
-    background-color: var(--spectrum-global-color-gray-300) !important;
+    background-color: var(--spectrum-global-color-blue-400) !important;
+    opacity: 0.4;
   }
 
   .code-editor :global(.cm-tooltip.cm-completionInfo) {
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 0cf3f240f1..deb5f272dd 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -114,8 +114,7 @@ export const getDefaultTheme = opts => {
         backgroundColor: "var(--spectrum-global-color-gray-200)",
       },
       "& .binding-wrap": {
-        color: "var(--spectrum-global-color-blue-700)",
-        fontFamily: "monospace",
+        color: "var(--spectrum-global-color-orange-600)",
       },
     },
     { dark }
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index b74f3c6fcd..d68857b420 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -258,6 +258,8 @@
 <style>
   .binding-side-panel {
     border-left: var(--border-light);
+    height: 100%;
+    overflow: auto;
   }
 
   .search :global(input) {

From c410160e60c0ddfe84e3dc6265088fc3e0935b6b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 23 Feb 2024 12:43:14 +0000
Subject: [PATCH 21/67] More drawer style updates

---
 .../common/bindings/BindingPanel.svelte       | 157 +-----------------
 .../common/bindings/BindingSidePanel.svelte   |  83 ++++-----
 yarn.lock                                     |  44 ++++-
 3 files changed, 80 insertions(+), 204 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 5d64f0e171..feb1a7fadf 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -260,11 +260,12 @@
     align-items: stretch;
   }
   .side {
-    flex: 0 0 0;
-    transition: flex 130ms ease-out;
+    flex: 0 0 360px;
+    margin-right: -360px;
+    transition: margin-right 130ms ease-out;
   }
   .side.visible {
-    flex: 0 0 420px;
+    margin-right: 0;
   }
 
   /* Tabs */
@@ -299,154 +300,4 @@
     border: none;
     border-radius: 0;
   }
-
-  /*.binding-drawer :global(.container > .main) {*/
-  /*  overflow: hidden;*/
-  /*  height: 100%;*/
-  /*  padding: 0px;*/
-  /*}*/
-  /*.binding-drawer :global(.container > .main > .main) {*/
-  /*  overflow: hidden;*/
-  /*  height: 100%;*/
-  /*  display: flex;*/
-  /*  flex-direction: column;*/
-  /*}*/
-
-  /*.binding-drawer :global(.spectrum-Tabs-content) {*/
-  /*  flex: 1;*/
-  /*  overflow: hidden;*/
-  /*}*/
-
-  /*.binding-drawer :global(.spectrum-Tabs-content > div),*/
-  /*.binding-drawer :global(.spectrum-Tabs-content > div > div),*/
-  /*.binding-drawer :global(.spectrum-Tabs-content .main-content) {*/
-  /*  height: 100%;*/
-  /*}*/
-
-  /*.binding-drawer .main-content {*/
-  /*  grid-template-rows: unset;*/
-  /*}*/
-
-  /*.messaging {*/
-  /*  display: flex;*/
-  /*  align-items: center;*/
-  /*  gap: var(--spacing-m);*/
-  /*  min-width: 0;*/
-  /*  flex: 1;*/
-  /*}*/
-  /*.messaging-wrap {*/
-  /*  overflow: hidden;*/
-  /*}*/
-  /*.messaging-wrap > div {*/
-  /*  text-overflow: ellipsis;*/
-  /*  white-space: nowrap;*/
-  /*  overflow: hidden;*/
-  /*}*/
-  /*.main :global(textarea) {*/
-  /*  min-height: 202px !important;*/
-  /*}*/
-
-  /*.main-content {*/
-  /*  padding: var(--spacing-s) var(--spacing-xl);*/
-  /*}*/
-
-  /*.main :global(.spectrum-Tabs div.drawer-actions) {*/
-  /*  display: flex;*/
-  /*  gap: var(--spacing-m);*/
-  /*  margin-left: auto;*/
-  /*}*/
-
-  /*.main :global(.spectrum-Tabs-content),*/
-  /*.main :global(.spectrum-Tabs-content .main-content) {*/
-  /*  margin-top: 0px;*/
-  /*  padding: 0px;*/
-  /*}*/
-
-  /*.main :global(.spectrum-Tabs) {*/
-  /*  display: flex;*/
-  /*}*/
-
-  /*.syntax-error {*/
-  /*  color: var(--red);*/
-  /*  font-size: 12px;*/
-  /*}*/
-  /*.syntax-error a {*/
-  /*  color: var(--red);*/
-  /*  text-decoration: underline;*/
-  /*}*/
-
-  /*.binding-footer {*/
-  /*  width: 100%;*/
-  /*  display: flex;*/
-  /*  justify-content: space-between;*/
-  /*}*/
-  /*.main-content {*/
-  /*  display: grid;*/
-  /*  grid-template-columns: 1fr;*/
-  /*  grid-template-rows: 380px;*/
-  /*}*/
-  /*.main-content.binding-panel {*/
-  /*  grid-template-columns: 1fr 320px;*/
-  /*}*/
-  /*.binding-picker {*/
-  /*  border-left: 2px solid var(--border-light);*/
-  /*  border-left: var(--border-light);*/
-  /*  overflow: scroll;*/
-  /*  height: 100%;*/
-  /*}*/
-  /*.editor {*/
-  /*  padding: var(--spacing-xl);*/
-  /*  min-width: 0;*/
-  /*  display: flex;*/
-  /*  flex-direction: column;*/
-  /*  gap: var(--spacing-xl);*/
-  /*  overflow: hidden;*/
-  /*}*/
-  /*.overlay-wrap {*/
-  /*  position: relative;*/
-  /*  flex: 1;*/
-  /*  overflow: hidden;*/
-  /*}*/
-  /*.mode-overlay {*/
-  /*  position: absolute;*/
-  /*  top: 0;*/
-  /*  left: 0;*/
-  /*  z-index: 2;*/
-  /*  width: 100%;*/
-  /*  height: 100%;*/
-  /*  display: flex;*/
-  /*  align-items: center;*/
-  /*  justify-content: center;*/
-  /*  background-color: var(*/
-  /*    --spectrum-textfield-m-background-color,*/
-  /*    var(--spectrum-global-color-gray-50)*/
-  /*  );*/
-  /*  border-radius: var(--border-radius-s);*/
-  /*}*/
-  /*.prompt-body {*/
-  /*  display: flex;*/
-  /*  flex-direction: column;*/
-  /*  align-items: center;*/
-  /*  justify-content: center;*/
-  /*  gap: var(--spacing-l);*/
-  /*}*/
-  /*.prompt-body .switch-actions {*/
-  /*  display: flex;*/
-  /*  gap: var(--spacing-l);*/
-  /*}*/
-
-  /*.binding-drawer :global(.code-editor),*/
-  /*.binding-drawer :global(.code-editor > div) {*/
-  /*  height: 100%;*/
-  /*}*/
-
-  .result {
-    margin: 0;
-    background: var(--spectrum-global-color-gray-200);
-    font-size: 14px;
-    padding: var(--spacing-l);
-    border-radius: var(--border-radius-s);
-    font-family: monospace;
-    border: 1px solid var(--spectrum-global-color-gray-300);
-  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index d68857b420..2c8c6144fb 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -140,21 +140,19 @@
 <div class="binding-side-panel">
   <Layout noPadding gap="S">
     {#if selectedCategory}
-      <div class="sub-section-back">
-        <ActionButton
-          secondary
-          icon={"ArrowLeft"}
-          on:click={() => {
-            selectedCategory = null
-          }}
-        >
-          Back
-        </ActionButton>
+      <div class="header">
+        <Icon
+          name="BackAndroid"
+          hoverable
+          size="S"
+          on:click={() => (selectedCategory = null)}
+        />
+        {selectedCategory}
       </div>
     {/if}
 
     {#if !selectedCategory}
-      <div class="search">
+      <div class="header">
         <span class="search-input">
           <Input
             placeholder={"Search for bindings"}
@@ -162,7 +160,6 @@
             bind:value={search}
           />
         </span>
-
         <span
           class="search-input-icon"
           on:click={() => {
@@ -195,9 +192,11 @@
       {#each filteredCategories as category}
         {#if category.bindings?.length}
           <div class="sub-section">
-            <div class="cat-heading">
-              <Icon name={categoryIcons[category.name]} />{category.name}
-            </div>
+            {#if filteredCategories.length > 1}
+              <div class="cat-heading">
+                <Icon name={categoryIcons[category.name]} />{category.name}
+              </div>
+            {/if}
             <ul>
               {#each category.bindings as binding}
                 <li
@@ -262,32 +261,28 @@
     overflow: auto;
   }
 
-  .search :global(input) {
+  .header {
+    height: 53px;
+    padding: 0 var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: var(--border-light);
+    position: sticky;
+    top: 0;
+    gap: var(--spacing-m);
+    background: var(--background);
+    z-index: 1;
+  }
+
+  .header :global(input) {
     border: none;
     border-radius: 0;
     background: none;
     padding: 0;
   }
-
-  .search {
-    padding: var(--spacing-m) var(--spacing-l);
-    display: flex;
-    align-items: center;
-    border-top: 0;
-    border-bottom: var(--border-light);
-    border-left: 2px solid transparent;
-    border-right: 2px solid transparent;
-    margin-right: 1px;
-    position: sticky;
-    top: 0;
-    background-color: var(--background);
-    z-index: 2;
-  }
-
   .search-input {
     flex: 1;
   }
-
   .search-input-icon.searching {
     cursor: pointer;
   }
@@ -300,14 +295,6 @@
     padding: var(--spacing-l);
     padding-top: 0;
   }
-  .sub-section-back {
-    padding: var(--spacing-l);
-    padding-top: var(--spacing-xl);
-    padding-bottom: 0;
-  }
-  .cat-heading {
-    margin-bottom: var(--spacing-l);
-  }
   ul.helpers li * {
     pointer-events: none;
   }
@@ -317,7 +304,6 @@
     align-items: center;
   }
   ul.category-list .category-name {
-    font-weight: 600;
     text-transform: capitalize;
   }
   ul.category-list .category-chevron {
@@ -331,6 +317,7 @@
   li.binding {
     display: flex;
     align-items: center;
+    gap: var(--spacing-m);
   }
   li.binding .binding__typeWrap {
     flex: 1;
@@ -346,8 +333,8 @@
   .cat-heading {
     font-size: var(--font-size-s);
     font-weight: 600;
-    text-transform: uppercase;
-    color: var(--spectrum-global-color-gray-600);
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-s);
   }
 
   .cat-heading {
@@ -384,17 +371,13 @@
   }
 
   .binding__label {
-    font-weight: 600;
     text-transform: capitalize;
   }
 
   .binding__type {
     font-family: var(--font-mono);
-    background-color: var(--spectrum-global-color-gray-200);
-    border-radius: var(--border-radius-s);
-    padding: 2px 4px;
-    margin-left: 2px;
-    font-weight: 600;
+    font-size: 10px;
+    color: var(--spectrum-global-color-gray-700);
   }
 
   .helper pre {
diff --git a/yarn.lock b/yarn.lock
index 3e147eed34..e745a78238 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2120,6 +2120,16 @@
     "@codemirror/view" "^6.6.0"
     "@lezer/common" "^1.0.0"
 
+"@codemirror/commands@^6.0.0":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.3.3.tgz#03face5bf5f3de0fc4e09b177b3c91eda2ceb7e9"
+  integrity sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.4.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.1.0"
+
 "@codemirror/commands@^6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
@@ -2164,11 +2174,25 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
+"@codemirror/search@^6.0.0":
+  version "6.5.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.6.tgz#8f858b9e678d675869112e475f082d1e8488db93"
+  integrity sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
 "@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.0.tgz#a0fb08403ced8c2a68d1d0acee926bd20be922f2"
   integrity sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==
 
+"@codemirror/state@^6.4.0":
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
+  integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
+
 "@codemirror/theme-one-dark@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
@@ -3380,6 +3404,11 @@
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.2.tgz#8fb9b86bdaa2ece57e7d59e5ffbcb37d71815087"
   integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==
 
+"@lezer/common@^1.1.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
+  integrity sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==
+
 "@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.4.tgz#98ed821e89f72981b7ba590474e6ee86c8185619"
@@ -8086,11 +8115,24 @@ codemirror-spell-checker@1.1.2:
   dependencies:
     typo-js "*"
 
-codemirror@^5.59.0, codemirror@^5.63.1:
+codemirror@^5.63.1:
   version "5.65.12"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.12.tgz#294fdf097d10ac5b56a9e011a91eff252afc73ae"
   integrity sha512-z2jlHBocElRnPYysN2HAuhXbO3DNB0bcSKmNz3hcWR2Js2Dkhc1bEOxG93Z3DeUrnm+qx56XOY5wQmbP5KY0sw==
 
+codemirror@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
+  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"

From d3504d714cd78a811245175a0633d235b789cdf1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 23 Feb 2024 12:49:43 +0000
Subject: [PATCH 22/67] More style fixes for drawer overflow

---
 packages/bbui/src/Drawer/DrawerContent.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 85002af923..e923c728f7 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -41,10 +41,12 @@
   }
   .main {
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
+    overflow-x: hidden;
   }
   .padding .main {
     padding: var(--spacing-xl);
+    height: calc(100% - var(--spacing-xl) * 2);
   }
   .main :global(textarea) {
     min-height: 200px;

From 7484f087bc8770b04da4621eb25efd03cc57017b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 23 Feb 2024 18:15:01 +0000
Subject: [PATCH 23/67] Add stacked drawer support and transitions

---
 packages/bbui/src/Drawer/Drawer.svelte        | 77 +++++++++++++------
 .../common/CodeEditor/CodeEditor.svelte       |  4 +
 .../src/components/common/CodeEditor/index.js |  2 -
 .../common/bindings/BindingPanel.svelte       |  2 +
 .../[screenId]/_components/AppPanel.svelte    | 10 +++
 5 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 00891c6bdc..aa35cd4c59 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -1,15 +1,16 @@
+<script context="module">
+  import { writable } from "svelte/store"
+
+  const openDrawers = writable([])
+</script>
+
 <script>
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
-  import Body from "../Typography/Body.svelte"
-  import Heading from "../Typography/Heading.svelte"
-  import { setContext, createEventDispatcher } from "svelte"
+  import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
 
   export let title
-  export let fillWidth
-  export let left = "314px"
-  export let width = "calc(100% - 648px)"
   export let headless = false
 
   const dispatch = createEventDispatcher()
@@ -17,12 +18,15 @@
   let visible = false
   let drawerId = generate()
 
+  $: depth = $openDrawers.length - $openDrawers.indexOf(drawerId) - 1
+
   export function show() {
     if (visible) {
       return
     }
     visible = true
     dispatch("drawerShow", drawerId)
+    openDrawers.update(state => [...state, drawerId])
   }
 
   export function hide() {
@@ -31,6 +35,7 @@
     }
     visible = false
     dispatch("drawerHide", drawerId)
+    openDrawers.update(state => state.filter(id => id !== drawerId))
   }
 
   setContext("drawer-actions", {
@@ -54,22 +59,33 @@
       },
     }
   }
+
+  const getScaleFactor = depth => {
+    // Quadratic function approaching a limit of 1 as depth tends to infinity
+    const lim = 1 - 1 / (depth * depth + 1)
+    // Scale drawers between 1 and 0.9 as depth approaches infinity
+    return 1 - lim * 0.1
+  }
+
+  onDestroy(() => {
+    if (visible) {
+      hide()
+    }
+  })
 </script>
 
 {#if visible}
-  <Portal>
-    <section
-      class:fillWidth
+  <Portal target=".drawer-container">
+    <div
       class="drawer"
       class:headless
       transition:slide|local
-      style={`width: ${width}; left: ${left};`}
+      style="--scale-factor:{getScaleFactor(depth)}"
+      class:stacked={depth > 0}
     >
       {#if !headless}
         <header>
-          <div class="text">
-            {title}
-          </div>
+          <div class="text">{title}</div>
           <div class="buttons">
             <Button secondary quiet on:click={hide}>Cancel</Button>
             <slot name="buttons" />
@@ -77,30 +93,41 @@
         </header>
       {/if}
       <slot name="body" />
-    </section>
+    </div>
   </Portal>
 {/if}
 
 <style>
-  .buttons {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
   .drawer {
+    --drawer-spacing: 10px;
     position: absolute;
-    bottom: 0;
+    left: var(--drawer-spacing);
+    bottom: var(--drawer-spacing);
+    transform: translateY(calc(-210% * (1 - var(--scale-factor))))
+      scale(var(--scale-factor));
+    width: calc(100% - 2 * var(--drawer-spacing));
     background: var(--background);
     border: var(--border-light);
     z-index: 3;
     border-radius: 8px;
     overflow: hidden;
-    margin: 8px;
+    box-sizing: border-box;
+    transition: transform 360ms ease-out;
   }
-
-  .fillWidth {
-    left: 260px !important;
-    width: calc(100% - 260px) !important;
+  .drawer::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    pointer-events: none;
+    transition: opacity 360ms ease-out;
+    opacity: calc(10 * (1 - var(--scale-factor)));
+  }
+  .drawer.stacked::after {
+    pointer-events: all;
   }
 
   header {
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 935ca98463..f00e9cd780 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -297,6 +297,10 @@
 </div>
 
 <style>
+  .code-editor :global(.cm-editor) {
+    background: var(--spectrum-global-color-gray-50) !important;
+  }
+
   /* Unify spacing between HBS and JS */
   .code-editor :global(.cm-content) {
     padding: 10px 0;
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index deb5f272dd..65a01f7f53 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -44,8 +44,6 @@ export const getDefaultTheme = opts => {
         border:
           "var(--spectrum-alias-border-size-thin) solid var(--spectrum-alias-border-color)",
         borderRadius: "var(--border-radius-s)",
-        backgroundColor:
-          "var( --spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50) )",
         resize: resize ? `${resize}` : "",
         overflow: "hidden",
         color: "var(--spectrum-alias-text-color)",
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index feb1a7fadf..920b9b83bd 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -25,6 +25,7 @@
   import { BindingHelpers } from "./utils"
   import formatHighlight from "json-format-highlight"
   import { capitalise } from "helpers"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -173,6 +174,7 @@
               {capitalise(tab)}
             </ActionButton>
           {/each}
+          <DrawerBindableInput />
         </div>
         <div class="side-tabs">
           {#each sideTabs as tab}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 5867021386..c2988ada46 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -6,6 +6,7 @@
 </script>
 
 <div class="app-panel">
+  <div class="drawer-container" />
   <div class="header">
     <div class="header-left">
       <UndoRedoControl store={screenStore.history} />
@@ -33,6 +34,15 @@
     justify-content: flex-start;
     align-items: stretch;
     padding: 9px var(--spacing-m);
+    position: relative;
+  }
+  .drawer-container {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    top: 0;
+    left: 0;
   }
   .header {
     display: flex;

From 395942d8b603eb38f8785742418e56b6ce1a5f8e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 24 Feb 2024 13:26:34 +0000
Subject: [PATCH 24/67] Add modal drawer support with transitions

---
 packages/bbui/src/Drawer/Drawer.svelte        | 144 ++++++++++++++----
 packages/bbui/src/Drawer/DrawerContent.svelte |   2 +-
 .../common/bindings/BindingPanel.svelte       |  16 +-
 .../[screenId]/_components/AppPanel.svelte    |   1 +
 4 files changed, 134 insertions(+), 29 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index aa35cd4c59..6a0d02e02e 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -1,7 +1,52 @@
 <script context="module">
-  import { writable } from "svelte/store"
+  import { writable, get } from "svelte/store"
 
+  // Observe this class name if possible in order to know how to size the
+  // drawer. If this doesn't exist we'll use a fixed size.
+  const drawerContainer = "drawer-container"
+
+  // Context level stores to keep drawers in sync
   const openDrawers = writable([])
+  const modal = writable(false)
+  const drawerLeft = writable(null)
+  const drawerWidth = writable(null)
+
+  // Resize observer to keep track of size changes
+  let observer
+
+  // Starts observing the target node to watching to size changes.
+  // Invoked when the first drawer of a chain is rendered.
+  const observe = () => {
+    const target = document.getElementsByClassName(drawerContainer)[0]
+    if (observer || !target) {
+      return
+    }
+    observer = new ResizeObserver(entries => {
+      if (!entries?.[0]) {
+        return
+      }
+      const bounds = entries[0].target.getBoundingClientRect()
+      drawerLeft.set(bounds.left)
+      drawerWidth.set(bounds.width)
+    })
+    observer.observe(target)
+
+    // Manually measure once to ensure that we have dimensions for the initial
+    // paint
+    const bounds = target.getBoundingClientRect()
+    drawerLeft.set(bounds.left)
+    drawerWidth.set(bounds.width)
+  }
+
+  // Stops observing the target node.
+  // Invoked when the last drawer of a chain is removed.
+  const unobserve = () => {
+    if (get(openDrawers).length) {
+      return
+    }
+    observer.disconnect()
+    observer = null
+  }
 </script>
 
 <script>
@@ -9,21 +54,45 @@
   import Button from "../Button/Button.svelte"
   import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
+  import { fade } from "svelte/transition"
 
   export let title
   export let headless = false
 
   const dispatch = createEventDispatcher()
+  const spacing = 10
 
   let visible = false
   let drawerId = generate()
 
   $: depth = $openDrawers.length - $openDrawers.indexOf(drawerId) - 1
+  $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal)
+
+  const getStyle = (depth, left, width, modal) => {
+    let style = `
+      --scale-factor: ${getScaleFactor(depth)};
+      --spacing: ${spacing}px;
+    `
+    // Most modal styles are handled by class names
+    if (modal) {
+      return style
+    }
+
+    // Normal drawers need a few additional styles
+    left = left ? `${left + width / 2}px` : "20vw"
+    width = width ? `${width - 2 * spacing}px` : "60vw"
+    return `
+      ${style}
+      left: ${left};
+      width: ${width};
+    `
+  }
 
   export function show() {
     if (visible) {
       return
     }
+    observe()
     visible = true
     dispatch("drawerShow", drawerId)
     openDrawers.update(state => [...state, drawerId])
@@ -36,12 +105,16 @@
     visible = false
     dispatch("drawerHide", drawerId)
     openDrawers.update(state => state.filter(id => id !== drawerId))
+    if (!$openDrawers.length) {
+      modal.set(false)
+    }
+    unobserve()
   }
 
-  setContext("drawer-actions", {
+  setContext("drawer", {
     hide,
     show,
-    headless,
+    modal,
   })
 
   const easeInOutQuad = x => {
@@ -52,10 +125,14 @@
   // transition has a horrible overshoot
   const slide = () => {
     return {
-      duration: 360,
+      duration: 260,
       css: t => {
-        const translation = 100 - Math.round(easeInOutQuad(t) * 100)
-        return `transform: translateY(${translation}%);`
+        const f = easeInOutQuad(t)
+        const yOffset = (1 - f) * 200
+        return `
+          transform: translateX(-50%) translateY(calc(${yOffset}px + 50% - 1200px * (1 - var(--scale-factor))));
+          opacity:${f};
+        `
       },
     }
   }
@@ -75,13 +152,16 @@
 </script>
 
 {#if visible}
-  <Portal target=".drawer-container">
+  <Portal target=".modal-container">
+    {#if $modal}
+      <div transition:fade={{ duration: 260 }} class="underlay" />
+    {/if}
     <div
       class="drawer"
       class:headless
+      class:modal={$modal}
       transition:slide|local
-      style="--scale-factor:{getScaleFactor(depth)}"
-      class:stacked={depth > 0}
+      {style}
     >
       {#if !headless}
         <header>
@@ -93,41 +173,55 @@
         </header>
       {/if}
       <slot name="body" />
+      {#if !$modal && depth > 0}
+        <div class="overlay" transition:fade|local={{ duration: 260 }} />
+      {/if}
     </div>
   </Portal>
 {/if}
 
 <style>
   .drawer {
-    --drawer-spacing: 10px;
     position: absolute;
-    left: var(--drawer-spacing);
-    bottom: var(--drawer-spacing);
-    transform: translateY(calc(-210% * (1 - var(--scale-factor))))
-      scale(var(--scale-factor));
-    width: calc(100% - 2 * var(--drawer-spacing));
+    transform: translateX(-50%) scale(var(--scale-factor))
+      translateY(calc(50% - 800px * (1 - var(--scale-factor))));
     background: var(--background);
     border: var(--border-light);
     z-index: 3;
     border-radius: 8px;
     overflow: hidden;
     box-sizing: border-box;
-    transition: transform 360ms ease-out;
+    transition: transform 260ms ease-out, bottom 260ms ease-out,
+      left 260ms ease-out, width 260ms ease-out, height 260ms ease-out;
+    height: 420px;
+    bottom: calc(var(--spacing) + 210px);
+    max-width: calc(100vw - 200px);
+    max-height: calc(100vh - 200px);
   }
-  .drawer::after {
-    content: "";
-    position: absolute;
+  .drawer.modal {
+    left: 50vw;
+    bottom: 50vh;
+    width: 1600px;
+    height: 800px;
+  }
+
+  .overlay,
+  .underlay {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--background);
-    pointer-events: none;
     transition: opacity 360ms ease-out;
-    opacity: calc(10 * (1 - var(--scale-factor)));
+    z-index: 3;
+    opacity: 0.5;
   }
-  .drawer.stacked::after {
-    pointer-events: all;
+  .overlay {
+    position: absolute;
+    background: var(--background);
+  }
+  .underlay {
+    position: fixed;
+    background: var(--modal-background, rgba(0, 0, 0, 0.75));
   }
 
   header {
@@ -138,7 +232,6 @@
     padding: var(--spacing-m) var(--spacing-xl);
     gap: var(--spacing-xl);
   }
-
   .text {
     display: flex;
     flex-direction: column;
@@ -146,7 +239,6 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
-
   .buttons {
     display: flex;
     flex-direction: row;
diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index e923c728f7..8069425d51 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -17,7 +17,7 @@
 
 <style>
   .drawer-contents {
-    height: 400px;
+    height: 100%;
     overflow-y: auto;
   }
   .container {
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 920b9b83bd..3470564f68 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import { DrawerContent, ActionButton, Icon } from "@budibase/bbui"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher, getContext, onMount } from "svelte"
   import {
     isValid,
     decodeJSBinding,
@@ -37,6 +37,7 @@
   export let context = null
   export let autofocusEditor = false
 
+  const drawerContext = getContext("drawer")
   const Modes = {
     Text: "Text",
     JavaScript: "JavaScript",
@@ -49,14 +50,15 @@
   let initialValueJS = value?.startsWith?.("{{ js ")
   let mode = initialValueJS ? Modes.JavaScript : Modes.Text
   let sidePanel = null
-
   let getCaretPosition
   let insertAtPos
   let jsValue = initialValueJS ? value : null
   let hbsValue = initialValueJS ? null : value
   let targetMode = null
   let expressionResult
+  let drawerIsModal
 
+  $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
   $: editorTabs = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
   $: sideTabs = [SidePanels.Evaluation, SidePanels.Bindings]
   $: enrichedBindings = enrichBindings(bindings, context)
@@ -187,6 +189,16 @@
               <Icon name={tab} size="S" />
             </ActionButton>
           {/each}
+          {#if drawerContext}
+            <ActionButton
+              size="M"
+              quiet
+              selected={drawerIsModal}
+              on:click={() => drawerContext.modal.set(!drawerIsModal)}
+            >
+              <Icon name={drawerIsModal ? "Minimize" : "Maximize"} size="S" />
+            </ActionButton>
+          {/if}
         </div>
       </div>
       <div class="editor">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index c2988ada46..c90c4ea599 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -35,6 +35,7 @@
     align-items: stretch;
     padding: 9px var(--spacing-m);
     position: relative;
+    transition: width 360ms ease-out;
   }
   .drawer-container {
     position: absolute;

From fde54b289783d0839b19d273f506de71a1dc6fef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 24 Feb 2024 16:28:21 +0000
Subject: [PATCH 25/67] Revert codemirror to v5

---
 packages/builder/package.json |  2 +-
 yarn.lock                     | 45 ++++-------------------------------
 2 files changed, 5 insertions(+), 42 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 4871833d48..1e68d4dc07 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -66,7 +66,7 @@
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
     "@zerodevx/svelte-json-view": "^1.0.7",
-    "codemirror": "^6.0.1",
+    "codemirror": "^5.65.16",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",
diff --git a/yarn.lock b/yarn.lock
index e745a78238..1953992320 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2120,16 +2120,6 @@
     "@codemirror/view" "^6.6.0"
     "@lezer/common" "^1.0.0"
 
-"@codemirror/commands@^6.0.0":
-  version "6.3.3"
-  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.3.3.tgz#03face5bf5f3de0fc4e09b177b3c91eda2ceb7e9"
-  integrity sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.4.0"
-    "@codemirror/view" "^6.0.0"
-    "@lezer/common" "^1.1.0"
-
 "@codemirror/commands@^6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
@@ -2174,25 +2164,11 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/search@^6.0.0":
-  version "6.5.6"
-  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.6.tgz#8f858b9e678d675869112e475f082d1e8488db93"
-  integrity sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    crelt "^1.0.5"
-
 "@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.0.tgz#a0fb08403ced8c2a68d1d0acee926bd20be922f2"
   integrity sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==
 
-"@codemirror/state@^6.4.0":
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
-  integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
-
 "@codemirror/theme-one-dark@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
@@ -3404,11 +3380,6 @@
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.2.tgz#8fb9b86bdaa2ece57e7d59e5ffbcb37d71815087"
   integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==
 
-"@lezer/common@^1.1.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
-  integrity sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==
-
 "@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.4.tgz#98ed821e89f72981b7ba590474e6ee86c8185619"
@@ -8120,18 +8091,10 @@ codemirror@^5.63.1:
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.12.tgz#294fdf097d10ac5b56a9e011a91eff252afc73ae"
   integrity sha512-z2jlHBocElRnPYysN2HAuhXbO3DNB0bcSKmNz3hcWR2Js2Dkhc1bEOxG93Z3DeUrnm+qx56XOY5wQmbP5KY0sw==
 
-codemirror@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
-  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
+codemirror@^5.65.16:
+  version "5.65.16"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.16.tgz#efc0661be6bf4988a6a1c2fe6893294638cdb334"
+  integrity sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==
 
 collect-v8-coverage@^1.0.0:
   version "1.0.1"

From da838386d955ec1524d42306ac29ecc2d672b0fc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 24 Feb 2024 16:30:58 +0000
Subject: [PATCH 26/67] Show binding panel by default

---
 .../builder/src/components/common/bindings/BindingPanel.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 3470564f68..1d585e9da9 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -49,7 +49,7 @@
 
   let initialValueJS = value?.startsWith?.("{{ js ")
   let mode = initialValueJS ? Modes.JavaScript : Modes.Text
-  let sidePanel = null
+  let sidePanel = SidePanels.Bindings
   let getCaretPosition
   let insertAtPos
   let jsValue = initialValueJS ? value : null
@@ -274,6 +274,7 @@
     align-items: stretch;
   }
   .side {
+    overflow: hidden;
     flex: 0 0 360px;
     margin-right: -360px;
     transition: margin-right 130ms ease-out;

From a27529eca5ec9dfaf71ac63cbbfe60c59c5313f1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 24 Feb 2024 16:33:15 +0000
Subject: [PATCH 27/67] Remove success state from evaluation panel and rename
 to preview

---
 .../common/bindings/EvaluationSidePanel.svelte | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 21d891d998..220c661f44 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -40,19 +40,15 @@
 <div class="evaluation-side-panel">
   <div class="header" class:success class:error>
     <div class="header-content">
-      {#if success}
-        <Icon
-          name="CheckmarkCircle"
-          color="var(--spectrum-global-color-green-600)"
-        />
-        <span>Success</span>
-        <Icon name="Copy" hoverable on:click={copy} />
-      {:else if error}
+      {#if error}
         <Icon name="Alert" color="var(--spectrum-global-color-red-600)" />
         <span> Error </span>
         <Icon name="Copy" hoverable on:click={copy} />
       {:else}
-        <span>Run</span>
+        <span>Preview</span>
+        {#if !empty}
+          <Icon name="Copy" hoverable on:click={copy} />
+        {/if}
       {/if}
     </div>
   </div>
@@ -91,7 +87,6 @@
   .header-content span {
     flex: 1 1 auto;
   }
-  .header.success::before,
   .header.error::before {
     content: "";
     left: 0;
@@ -102,9 +97,6 @@
     position: absolute;
     opacity: 10%;
   }
-  .header.success::before {
-    background: var(--spectrum-global-color-green-600);
-  }
   .header.error::before {
     background: var(--spectrum-global-color-red-400);
   }

From d666d03328ae77891cb88ca608efcb1e97177760 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 24 Feb 2024 18:17:08 +0000
Subject: [PATCH 28/67] Add loading indicator and debounce evaluations to fix
 performance issues with large JSON payloads

---
 .../common/bindings/BindingPanel.svelte       | 22 +++++++++++++----
 .../bindings/EvaluationSidePanel.svelte       | 24 +++++++++++++++----
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 1d585e9da9..51a74e059e 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { DrawerContent, ActionButton, Icon } from "@budibase/bbui"
+  import { DrawerContent, ActionButton, Icon, Helpers } from "@budibase/bbui"
   import { createEventDispatcher, getContext, onMount } from "svelte"
   import {
     isValid,
@@ -26,6 +26,7 @@
   import formatHighlight from "json-format-highlight"
   import { capitalise } from "helpers"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { Utils } from "@budibase/frontend-core"
 
   const dispatch = createEventDispatcher()
 
@@ -57,6 +58,7 @@
   let targetMode = null
   let expressionResult
   let drawerIsModal
+  let evaluating = false
 
   $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
   $: editorTabs = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
@@ -67,9 +69,21 @@
     mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
   $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
-  $: expressionResult = processStringSync(runtimeExpression || "", context)
+  $: requestUpdateEvaluation(runtimeExpression, context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
 
+  const updateEvaluation = (expression, context) => {
+    expressionResult = processStringSync(expression || "", context)
+    evaluating = false
+  }
+
+  const debouncedUpdateEvaluation = Utils.debounce(updateEvaluation, 260)
+
+  const requestUpdateEvaluation = (expression, context) => {
+    evaluating = true
+    debouncedUpdateEvaluation(expression, context)
+  }
+
   const getBindingValue = (binding, context) => {
     const hbs = `{{ literal ${binding.runtimeBinding} }}`
     const res = processStringSync(hbs, context)
@@ -103,7 +117,7 @@
     valid = isValid(runtimeExpression)
     if (valid) {
       dispatch("change", val)
-      expressionResult = processStringSync(runtimeExpression || "", context)
+      requestUpdateEvaluation(runtimeExpression, context)
     }
   }
 
@@ -249,7 +263,7 @@
           mode={editorMode}
         />
       {:else if sidePanel === SidePanels.Evaluation}
-        <EvaluationSidePanel {expressionResult} />
+        <EvaluationSidePanel {expressionResult} {evaluating} />
       {/if}
     </div>
   </div>
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 220c661f44..5037a422cc 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -1,13 +1,16 @@
 <script>
   import formatHighlight from "json-format-highlight"
-  import { Icon, notifications } from "@budibase/bbui"
+  import { Icon, ProgressCircle, notifications } from "@budibase/bbui"
   import { copyToClipboard } from "@budibase/bbui/helpers"
+  import { fade } from "svelte/transition"
 
   export let expressionResult
+  export let evaluating = false
 
   $: error = expressionResult === "Error while executing JS"
   $: empty = expressionResult == null || expressionResult === ""
   $: success = !error && !empty
+  $: highlightedResult = highlight(expressionResult)
 
   const highlight = json => {
     // Attempt to parse and then stringify, in case this is valid JSON
@@ -16,7 +19,6 @@
     } catch (err) {
       // Ignore
     }
-
     return formatHighlight(json, {
       keyColor: "#e06c75",
       numberColor: "#e5c07b",
@@ -42,10 +44,22 @@
     <div class="header-content">
       {#if error}
         <Icon name="Alert" color="var(--spectrum-global-color-red-600)" />
-        <span> Error </span>
+        <div>Error</div>
+        {#if evaluating}
+          <div transition:fade|local={{ duration: 130 }}>
+            <ProgressCircle size="S" />
+          </div>
+        {/if}
+        <span />
         <Icon name="Copy" hoverable on:click={copy} />
       {:else}
-        <span>Preview</span>
+        <div>Preview</div>
+        {#if evaluating}
+          <div transition:fade|local={{ duration: 130 }}>
+            <ProgressCircle size="S" />
+          </div>
+        {/if}
+        <span />
         {#if !empty}
           <Icon name="Copy" hoverable on:click={copy} />
         {/if}
@@ -54,7 +68,7 @@
   </div>
   <div class="body">
     {#if expressionResult}
-      {@html highlight(expressionResult)}
+      {@html highlightedResult}
     {:else}
       Your expression will be evaluated here
     {/if}

From ad576e2c018354d945dafec5a122d8420598b568 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 26 Feb 2024 13:31:34 +0000
Subject: [PATCH 29/67] Add swap overlay when changing modes and improve styles

---
 packages/bbui/src/Drawer/Drawer.svelte        |   3 +
 packages/bbui/src/Drawer/DrawerContent.svelte |   3 +-
 .../common/bindings/BindingPanel.svelte       | 101 ++++++++++++++----
 .../bindings/EvaluationSidePanel.svelte       |   4 +-
 4 files changed, 89 insertions(+), 22 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 6a0d02e02e..fd3cf5bed8 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -197,6 +197,9 @@
     bottom: calc(var(--spacing) + 210px);
     max-width: calc(100vw - 200px);
     max-height: calc(100vh - 200px);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
   .drawer.modal {
     left: 50vw;
diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 8069425d51..7974e1e1bf 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -17,8 +17,9 @@
 
 <style>
   .drawer-contents {
-    height: 100%;
     overflow-y: auto;
+    flex: 1 1 auto;
+    height: 0;
   }
   .container {
     height: 100%;
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 51a74e059e..07e01c7ebd 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { DrawerContent, ActionButton, Icon, Helpers } from "@budibase/bbui"
+  import {
+    DrawerContent,
+    ActionButton,
+    Icon,
+    Heading,
+    Body,
+    Button,
+  } from "@budibase/bbui"
   import { createEventDispatcher, getContext, onMount } from "svelte"
   import {
     isValid,
@@ -67,17 +74,16 @@
   $: usingJS = mode === Modes.JavaScript
   $: editorMode =
     mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
+  $: editorValue = editorMode === EditorModes.JS ? jsValue : hbsValue
   $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: requestUpdateEvaluation(runtimeExpression, context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
 
-  const updateEvaluation = (expression, context) => {
+  const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
     expressionResult = processStringSync(expression || "", context)
     evaluating = false
-  }
-
-  const debouncedUpdateEvaluation = Utils.debounce(updateEvaluation, 260)
+  }, 260)
 
   const requestUpdateEvaluation = (expression, context) => {
     evaluating = true
@@ -131,8 +137,22 @@
   }
 
   const changeMode = newMode => {
-    mode = newMode
-    updateValue(newMode === Modes.JavaScript ? jsValue : hbsValue)
+    if (targetMode || newMode === mode) {
+      return
+    }
+    if (editorValue) {
+      targetMode = newMode
+    } else {
+      mode = newMode
+    }
+  }
+
+  const confirmChangeMode = () => {
+    jsValue = null
+    hbsValue = null
+    updateValue(null)
+    mode = targetMode
+    targetMode = null
   }
 
   const changeSidePanel = newSidePanel => {
@@ -149,18 +169,6 @@
     updateValue(jsValue)
   }
 
-  const switchMode = () => {
-    if (targetMode === "Text") {
-      jsValue = null
-      updateValue(jsValue)
-    } else {
-      hbsValue = null
-      updateValue(hbsValue)
-    }
-    mode = targetMode + ""
-    targetMode = null
-  }
-
   const convert = () => {
     const runtime = readableToRuntimeBinding(enrichedBindings, hbsValue)
     const runtimeJs = encodeJSBinding(convertToJS(runtime))
@@ -250,6 +258,30 @@
             placeholder="Add bindings by typing $ or use the menu on the right"
           />
         {/if}
+        {#if targetMode}
+          <div class="mode-overlay">
+            <div class="prompt-body">
+              <Heading size="S">
+                Switch to {targetMode}?
+              </Heading>
+              <Body>This will discard anything in your binding</Body>
+              <div class="switch-actions">
+                <Button
+                  secondary
+                  size="S"
+                  on:click={() => {
+                    targetMode = null
+                  }}
+                >
+                  No - keep {mode}
+                </Button>
+                <Button cta size="S" on:click={confirmChangeMode}>
+                  Yes - discard {mode}
+                </Button>
+              </div>
+            </div>
+          </div>
+        {/if}
       </div>
     </div>
     <div class="side" class:visible={!!sidePanel}>
@@ -319,6 +351,7 @@
   .editor {
     flex: 1 1 auto;
     height: 0;
+    position: relative;
   }
   .editor :global(.code-editor),
   .editor :global(.code-editor > div),
@@ -329,4 +362,34 @@
     border: none;
     border-radius: 0;
   }
+
+  /* Overlay */
+  .mode-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    border-radius: var(--border-radius-s);
+  }
+  .prompt-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-l);
+  }
+  .prompt-body .switch-actions {
+    display: flex;
+    gap: var(--spacing-l);
+  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 5037a422cc..3d80b05b07 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -85,7 +85,7 @@
     border-left: var(--border-light);
   }
   .header {
-    padding: var(--spacing-m);
+    padding: var(--spacing-m) var(--spacing-l);
     flex: 0 0 auto;
     position: relative;
     border-bottom: var(--border-light);
@@ -116,7 +116,7 @@
   }
   .body {
     flex: 1 1 auto;
-    padding: var(--spacing-m);
+    padding: var(--spacing-m) var(--spacing-l);
     font-family: var(--font-mono);
     font-size: 12px;
     overflow-y: scroll;

From 92abdec15005177c5cba494c5a98434284adeca8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 26 Feb 2024 16:07:01 +0000
Subject: [PATCH 30/67] Fully refactor drawer rendering to not depend on CSS
 transforms, which break codemirror

---
 packages/bbui/src/Drawer/Drawer.svelte        | 35 ++++++++++---------
 .../common/CodeEditor/CodeEditor.svelte       | 34 ++++++++++--------
 .../src/components/common/CodeEditor/index.js |  4 ---
 3 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index fd3cf5bed8..d05f59bc41 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -74,17 +74,15 @@
       --spacing: ${spacing}px;
     `
     // Most modal styles are handled by class names
-    if (modal) {
+    if (modal || left == null || width == null) {
       return style
     }
 
-    // Normal drawers need a few additional styles
-    left = left ? `${left + width / 2}px` : "20vw"
-    width = width ? `${width - 2 * spacing}px` : "60vw"
+    // Drawers observing another dom node need custom position styles
     return `
       ${style}
-      left: ${left};
-      width: ${width};
+      left: ${left + spacing}px;
+      width: ${width - 2 * spacing}px;
     `
   }
 
@@ -130,7 +128,7 @@
         const f = easeInOutQuad(t)
         const yOffset = (1 - f) * 200
         return `
-          transform: translateX(-50%) translateY(calc(${yOffset}px + 50% - 1200px * (1 - var(--scale-factor))));
+          transform: translateY(calc(${yOffset}px - 800px * (1 - var(--scale-factor))));
           opacity:${f};
         `
       },
@@ -159,6 +157,7 @@
     <div
       class="drawer"
       class:headless
+      class:stacked={depth > 0}
       class:modal={$modal}
       transition:slide|local
       {style}
@@ -183,8 +182,10 @@
 <style>
   .drawer {
     position: absolute;
-    transform: translateX(-50%) scale(var(--scale-factor))
-      translateY(calc(50% - 800px * (1 - var(--scale-factor))));
+    left: 25vw;
+    width: 50vw;
+    bottom: var(--spacing);
+    height: 420px;
     background: var(--background);
     border: var(--border-light);
     z-index: 3;
@@ -193,19 +194,19 @@
     box-sizing: border-box;
     transition: transform 260ms ease-out, bottom 260ms ease-out,
       left 260ms ease-out, width 260ms ease-out, height 260ms ease-out;
-    height: 420px;
-    bottom: calc(var(--spacing) + 210px);
-    max-width: calc(100vw - 200px);
-    max-height: calc(100vh - 200px);
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
   .drawer.modal {
-    left: 50vw;
-    bottom: 50vh;
-    width: 1600px;
-    height: 800px;
+    left: 15vw;
+    width: 70vw;
+    bottom: 15vh;
+    height: 70vh;
+  }
+  .drawer.stacked {
+    transform: translateY(calc(-1 * 1024px * (1 - var(--scale-factor))))
+      scale(var(--scale-factor));
   }
 
   .overlay,
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index f00e9cd780..172380e251 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -297,11 +297,10 @@
 </div>
 
 <style>
+  /* Editor */
   .code-editor :global(.cm-editor) {
     background: var(--spectrum-global-color-gray-50) !important;
   }
-
-  /* Unify spacing between HBS and JS */
   .code-editor :global(.cm-content) {
     padding: 10px 0;
   }
@@ -309,7 +308,7 @@
     font-size: 12px;
   }
 
-  /* Overrides to ensure background selection is pixel perfect with active line */
+  /* Active line */
   .code-editor :global(.cm-line) {
     height: 16px;
     padding: 0 var(--spacing-s);
@@ -325,16 +324,23 @@
     top: 1px;
     height: calc(100% - 2px);
     width: 100%;
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--spectrum-global-color-gray-100) !important;
     z-index: -2;
   }
+
+  /* Code selection */
+  .code-editor :global(.cm-selectionBackground) {
+    background-color: var(--spectrum-global-color-blue-400) !important;
+    opacity: 0.4;
+  }
+
+  /* Gutters */
   .code-editor :global(.cm-gutterElement) {
     margin-bottom: 0;
   }
-  .code-editor :global(.cm-activeLineGutter) {
-    color: var(--spectrum-global-color-gray-700);
-    background: transparent;
-    position: relative;
+  .code-editor :global(.cm-gutters) {
+    background-color: var(--spectrum-global-color-gray-75) !important;
+    color: var(--spectrum-global-color-gray-500);
   }
   .code-editor :global(.cm-activeLineGutter::before) {
     content: "";
@@ -343,14 +349,16 @@
     top: 1px;
     height: calc(100% - 2px);
     width: 100%;
-    background: var(--spectrum-global-color-gray-200);
+    background: var(--spectrum-global-color-gray-200) !important;
     z-index: -2;
   }
-  .code-editor :global(.cm-selectionBackground) {
-    background-color: var(--spectrum-global-color-blue-400) !important;
-    opacity: 0.4;
+  .code-editor :global(.cm-activeLineGutter) {
+    color: var(--spectrum-global-color-gray-700);
+    background: transparent;
+    position: relative;
   }
 
+  /* Completion popover */
   .code-editor :global(.cm-tooltip.cm-completionInfo) {
     padding: var(--spacing-m);
   }
@@ -365,13 +373,11 @@
       ),
       0, 0;
   }
-
   .code-editor :global(.autocomplete-option .cm-completionDetail) {
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
     padding: 4px 6px;
   }
-
   .code-editor :global(.binding__example) {
     padding: 0;
     margin: 0;
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 65a01f7f53..f05617b73c 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -31,10 +31,6 @@ export const getDefaultTheme = opts => {
   const { height, resize, dark } = opts
   return EditorView.theme(
     {
-      ".cm-gutters": {
-        backgroundColor: "var(--spectrum-global-color-gray-75)",
-        color: "var(--spectrum-global-color-gray-500)",
-      },
       "&.cm-focused .cm-cursor": {
         borderLeftColor: "var(--spectrum-alias-text-color)",
       },

From a44f348e374377a0dbffb3ed96750c7f18aa6bb6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 26 Feb 2024 16:13:39 +0000
Subject: [PATCH 31/67] Standardise icon sizes in binding side panel

---
 .../common/bindings/BindingSidePanel.svelte           | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 2c8c6144fb..40f9b65bc3 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -167,7 +167,7 @@
           }}
           class:searching={search}
         >
-          <Icon name={search ? "Close" : "Search"} />
+          <Icon size="S" name={search ? "Close" : "Search"} />
         </span>
       </div>
     {/if}
@@ -180,7 +180,11 @@
               selectedCategory = categoryName
             }}
           >
-            <Icon name={categoryIcons[categoryName]} />
+            <Icon
+              size="S"
+              color="var(--spectrum-global-color-gray-700)"
+              name={categoryIcons[categoryName]}
+            />
             <span class="category-name">{categoryName} </span>
             <span class="category-chevron"><Icon name="ChevronRight" /></span>
           </li>
@@ -303,6 +307,9 @@
     gap: var(--spacing-m);
     align-items: center;
   }
+  ul.category-list :global(.spectrum-Icon) {
+    margin: -4px 0;
+  }
   ul.category-list .category-name {
     text-transform: capitalize;
   }

From 1e74fe0cb7a16b5505721211b48e4bad1aefebcf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 09:24:26 +0000
Subject: [PATCH 32/67] Improve popover positioning, improve drawer styles and
 performance

---
 .../bbui/src/Actions/position_dropdown.js     |   6 +-
 packages/bbui/src/Drawer/Drawer.svelte        |   2 +-
 .../common/CodeEditor/CodeEditor.svelte       | 133 +++++++++++++-----
 .../src/components/common/CodeEditor/index.js |  97 +------------
 .../common/bindings/BindingPanel.svelte       |   2 +-
 5 files changed, 114 insertions(+), 126 deletions(-)

diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 31a1044ba4..b0dd94ad46 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -40,8 +40,12 @@ export default function positionDropdown(element, opts) {
     } else {
       // Determine vertical styles
       if (align === "right-outside" || align === "left-outside") {
-        styles.top = anchorBounds.bottom - elementBounds.height
+        styles.top =
+          anchorBounds.top + anchorBounds.height / 2 - elementBounds.height / 2
         styles.maxHeight = maxHeight
+        if (styles.top + elementBounds.height > window.innerHeight) {
+          styles.top = window.innerHeight - elementBounds.height
+        }
       } else if (
         window.innerHeight - anchorBounds.bottom <
         (maxHeight || 100)
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index d05f59bc41..ff7497b905 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -60,7 +60,7 @@
   export let headless = false
 
   const dispatch = createEventDispatcher()
-  const spacing = 10
+  const spacing = 11
 
   let visible = false
   let drawerId = generate()
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 172380e251..9b3d01fbbc 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -42,7 +42,7 @@
   } from "@codemirror/commands"
   import { Compartment } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
-  import { EditorModes, getDefaultTheme } from "./"
+  import { EditorModes } from "./"
   import { themeStore } from "stores/portal"
 
   export let label
@@ -164,14 +164,7 @@
         dispatch("change", docStr)
       }),
       keymap.of(buildKeymap()),
-      themeConfig.of([
-        getDefaultTheme({
-          height: editorHeight,
-          resize,
-          dark: isDark,
-        }),
-        ...(isDark ? [oneDark] : []),
-      ]),
+      themeConfig.of([...(isDark ? [oneDark] : [])]),
     ]
   }
 
@@ -182,7 +175,7 @@
       complete.push(
         autocompletion({
           override: [...completions],
-          closeOnBlur: true,
+          closeOnBlur: false,
           icons: false,
           optionClass: () => "autocomplete-option",
         })
@@ -264,14 +257,7 @@
 
       // Issue theme compartment update
       editor.dispatch({
-        effects: themeConfig.reconfigure([
-          getDefaultTheme({
-            height: editorHeight,
-            resize,
-            dark: isDark,
-          }),
-          ...(isDark ? [oneDark] : []),
-        ]),
+        effects: themeConfig.reconfigure([...(isDark ? [oneDark] : [])]),
       })
     }
   }
@@ -312,6 +298,7 @@
   .code-editor :global(.cm-line) {
     height: 16px;
     padding: 0 var(--spacing-s);
+    color: var(--spectrum-alias-text-color);
   }
   .code-editor :global(.cm-activeLine) {
     position: relative;
@@ -358,30 +345,103 @@
     position: relative;
   }
 
+  /* Cursor color */
+  .code-editor :global(.cm-focused .cm-cursor) {
+    border-left-color: var(--spectrum-alias-text-color);
+  }
+
+  /* Placeholder */
+  .code-editor :global(.cm-placeholder) {
+    color: var(--spectrum-global-color-gray-700);
+    font-style: italic;
+  }
+
+  /* Highlight bindings */
+  .code-editor :global(.binding-wrap) {
+    color: var(--spectrum-global-color-blue-700);
+  }
+
   /* Completion popover */
-  .code-editor :global(.cm-tooltip.cm-completionInfo) {
+  .code-editor :global(.cm-tooltip-autocomplete) {
+    background: var(--spectrum-global-color-gray-75);
+    border-radius: 4px;
+    border: 1px solid var(--spectrum-global-color-gray-200);
+  }
+  .code-editor :global(.cm-tooltip-autocomplete > ul) {
+    max-height: 20em;
+  }
+
+  /* Completion section header*/
+  .code-editor :global(.info-section) {
+    display: flex;
+    align-items: center;
     padding: var(--spacing-m);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-s);
+    gap: var(--spacing-m);
+    color: var(--spectrum-alias-text-color);
+    font-weight: 600;
   }
-  .code-editor :global(.cm-tooltip-autocomplete > ul > li[aria-selected]) {
-    border-radius: var(
-        --spectrum-popover-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-      ),
-      var(
-        --spectrum-popover-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-      ),
-      0, 0;
+  .code-editor :global(.info-section:not(:first-of-type)) {
+    border-top: 1px solid var(--spectrum-global-color-gray-200);
   }
+
+  /* Completion item container */
+  .code-editor :global(.autocomplete-option) {
+    padding: var(--spacing-s) var(--spacing-m) !important;
+    padding-left: calc(16px + 2 * var(--spacing-m)) !important;
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+    color: var(--spectrum-alias-text-color);
+  }
+
+  /* Highlighted completion item */
+  .code-editor :global(.autocomplete-option[aria-selected]) {
+    background: var(--spectrum-global-color-blue-400);
+    color: white;
+  }
+  .code-editor
+    :global(.autocomplete-option[aria-selected] .cm-completionDetail) {
+    color: white;
+  }
+
+  /* Completion item label */
+  .code-editor :global(.cm-completionLabel) {
+    flex: 1 1 auto;
+    font-size: var(--font-size-s);
+    font-family: var(--font-sans);
+    text-transform: capitalize;
+  }
+
+  /* Completion item type */
   .code-editor :global(.autocomplete-option .cm-completionDetail) {
-    background-color: var(--spectrum-global-color-gray-200);
+    font-family: var(--font-mono);
+    color: var(--spectrum-global-color-gray-700);
+    font-style: normal;
+    text-transform: capitalize;
+    font-size: 10px;
+  }
+
+  /* Live binding value / helper container */
+  .code-editor :global(.cm-completionInfo) {
+    margin-left: var(--spacing-s);
+    border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: var(--border-radius-s);
-    padding: 4px 6px;
+    background-color: var(--spectrum-global-color-gray-50);
+    padding: var(--spacing-m);
+    margin-top: -2px;
+  }
+
+  /* Live binding value / helper value */
+  .code-editor :global(.binding__description) {
+    color: var(--spectrum-global-color-gray-700);
+    font-size: var(--font-size-s);
   }
   .code-editor :global(.binding__example) {
     padding: 0;
     margin: 0;
-    font-size: 12px;
+    font-size: var(--font-size-s);
     font-family: var(--font-mono);
     white-space: pre;
     text-overflow: ellipsis;
@@ -393,4 +453,13 @@
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
+
+  /* Wrapper around helpers */
+  .code-editor :global(.info-bubble) {
+    font-size: var(--font-size-s);
+    display: grid;
+    grid-gap: var(--spacing-s);
+    grid-template-columns: 1fr;
+    color: var(--spectrum-global-color-gray-800);
+  }
 </style>
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index f05617b73c..c877907e9c 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -27,94 +27,6 @@ export const SECTIONS = {
   },
 }
 
-export const getDefaultTheme = opts => {
-  const { height, resize, dark } = opts
-  return EditorView.theme(
-    {
-      "&.cm-focused .cm-cursor": {
-        borderLeftColor: "var(--spectrum-alias-text-color)",
-      },
-      "&": {
-        height: height ? `${height}` : "",
-        lineHeight: "1.3",
-        border:
-          "var(--spectrum-alias-border-size-thin) solid var(--spectrum-alias-border-color)",
-        borderRadius: "var(--border-radius-s)",
-        resize: resize ? `${resize}` : "",
-        overflow: "hidden",
-        color: "var(--spectrum-alias-text-color)",
-      },
-      "& .cm-tooltip.cm-tooltip-autocomplete > ul": {
-        fontFamily:
-          "var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base))",
-        maxHeight: "16em",
-      },
-      "& .cm-placeholder": {
-        color: "var(--spectrum-alias-text-color)",
-        fontStyle: "italic",
-      },
-      "&.cm-focused": {
-        outline: "none",
-        borderColor: "var(--spectrum-alias-border-color-mouse-focus)",
-      },
-      // AUTO COMPLETE
-      "& .cm-completionDetail": {
-        fontStyle: "unset",
-        textTransform: "uppercase",
-        fontSize: "10px",
-        backgroundColor: "var(--spectrum-global-color-gray-100)",
-        color: "var(--spectrum-global-color-gray-600)",
-      },
-      "& .cm-completionLabel": {
-        marginLeft:
-          "calc(var(--spectrum-alias-workflow-icon-size-m) + var(--spacing-m))",
-      },
-      "& .info-bubble": {
-        fontSize: "var(--font-size-s)",
-        display: "grid",
-        gridGap: "var(--spacing-s)",
-        gridTemplateColumns: "1fr",
-        color: "var(--spectrum-global-color-gray-800)",
-      },
-      "& .cm-tooltip": {
-        marginLeft: "var(--spacing-s)",
-        border: "1px solid var(--spectrum-global-color-gray-300)",
-        borderRadius:
-          "var( --spectrum-popover-border-radius, var(--spectrum-alias-border-radius-regular) )",
-        backgroundColor: "var(--spectrum-global-color-gray-50)",
-      },
-      // Section header
-      "& .info-section": {
-        display: "flex",
-        padding: "var(--spacing-s)",
-        gap: "var(--spacing-m)",
-        borderBottom: "1px solid var(--spectrum-global-color-gray-200)",
-        color: "var(--spectrum-global-color-gray-800)",
-        fontWeight: "bold",
-      },
-      "& .info-section .spectrum-Icon": {
-        color: "var(--spectrum-global-color-gray-600)",
-      },
-      // Autocomplete Option
-      "& .cm-tooltip.cm-tooltip-autocomplete .autocomplete-option": {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        fontSize: "var(--spectrum-alias-font-size-default)",
-        padding: "var(--spacing-s)",
-        color: "var(--spectrum-global-color-gray-800)",
-      },
-      "& .cm-tooltip-autocomplete ul li[aria-selected].autocomplete-option": {
-        backgroundColor: "var(--spectrum-global-color-gray-200)",
-      },
-      "& .binding-wrap": {
-        color: "var(--spectrum-global-color-orange-600)",
-      },
-    },
-    { dark }
-  )
-}
-
 export const buildHelperInfoNode = (completion, helper) => {
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
@@ -137,10 +49,11 @@ export const buildHelperInfoNode = (completion, helper) => {
 
 const toSpectrumIcon = name => {
   return `<svg
-    class="spectrum-Icon spectrum-Icon--sizeM"
+    class="spectrum-Icon spectrum-Icon--sizeS"
     focusable="false"
     aria-hidden="false"
     aria-label="${name}-section-icon"
+    style="color:var(--spectrum-global-color-gray-700)"
   >
     <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-${name}" />
   </svg>`
@@ -149,7 +62,9 @@ const toSpectrumIcon = name => {
 export const buildSectionHeader = (type, sectionName, icon, rank) => {
   const ele = document.createElement("div")
   ele.classList.add("info-section")
-  ele.classList.add(type)
+  if (type) {
+    ele.classList.add(type)
+  }
   ele.innerHTML = `${toSpectrumIcon(icon)}<span>${sectionName}</span>`
   return {
     name: sectionName,
@@ -171,7 +86,7 @@ export const helpersToCompletion = (helpers, mode) => {
       },
       type: "helper",
       section: helperSection,
-      detail: "FUNCTION",
+      detail: "Function",
       apply: (view, completion, from, to) => {
         insertBinding(view, from, to, key, mode)
       },
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 07e01c7ebd..02a5b99495 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -332,7 +332,7 @@
   /* Tabs */
   .tabs {
     padding: var(--spacing-m);
-    border-bottom: 2px solid transparent;
+    border-bottom: var(--border-light);
   }
   .editor-tabs,
   .side-tabs {

From 6bb3c76d1d652b3901675e9a5912e7b2c718eee0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 12:51:53 +0000
Subject: [PATCH 33/67] Further improve code mirror styles and consistency

---
 .../common/CodeEditor/CodeEditor.svelte       | 25 +++++++-----
 .../src/components/common/CodeEditor/index.js |  6 +--
 .../common/bindings/BindingSidePanel.svelte   | 40 +++++++++++--------
 3 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 9b3d01fbbc..58942e5091 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -433,10 +433,19 @@
     margin-top: -2px;
   }
 
+  /* Wrapper around helpers */
+  .code-editor :global(.info-bubble) {
+    font-size: var(--font-size-s);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    color: var(--spectrum-global-color-gray-800);
+  }
+
   /* Live binding value / helper value */
   .code-editor :global(.binding__description) {
-    color: var(--spectrum-global-color-gray-700);
-    font-size: var(--font-size-s);
+    color: var(--spectrum-alias-text-color);
+    font-size: var(--font-size-m);
   }
   .code-editor :global(.binding__example) {
     padding: 0;
@@ -448,18 +457,12 @@
     overflow: hidden;
     max-height: 480px;
   }
+  .code-editor :global(.binding__example.helper) {
+    color: var(--spectrum-global-color-blue-700);
+  }
   .code-editor :global(.binding__example span) {
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
-
-  /* Wrapper around helpers */
-  .code-editor :global(.info-bubble) {
-    font-size: var(--font-size-s);
-    display: grid;
-    grid-gap: var(--spacing-s);
-    grid-template-columns: 1fr;
-    color: var(--spectrum-global-color-gray-800);
-  }
 </style>
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index c877907e9c..962e0bd393 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -32,17 +32,17 @@ export const buildHelperInfoNode = (completion, helper) => {
   ele.classList.add("info-bubble")
 
   const exampleNodeHtml = helper.example
-    ? `<div class="binding__example">${helper.example}</div>`
+    ? `<div class="binding__example helper">${helper.example}</div>`
     : ""
   const descriptionMarkup = sanitizeHtml(helper.description, {
     allowedTags: [],
     allowedAttributes: {},
   })
-  const descriptionNodeHtml = `<div class="binding__description">${descriptionMarkup}</div>`
+  const descriptionNodeHtml = `<div class="binding__description helper">${descriptionMarkup}</div>`
 
   ele.innerHTML = `
-    ${exampleNodeHtml}
     ${descriptionNodeHtml}
+    ${exampleNodeHtml}
   `
   return ele
 }
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 40f9b65bc3..2c1880149f 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -75,6 +75,7 @@
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {
+      helper: false,
       code: binding.valueHTML,
     }
     popover.show()
@@ -87,6 +88,7 @@
     }
     popoverAnchor = target
     hoverTarget = {
+      helper: true,
       description: helper.description,
       code: getHelperExample(helper, mode.name === "javascript"),
     }
@@ -121,19 +123,17 @@
   on:mouseenter={stopHidingPopover}
   on:mouseleave={hidePopover}
 >
-  <div class="helper">
-    <Layout gap="S">
-      {#if hoverTarget.description}
-        <div>
-          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-          {@html hoverTarget.description}
-        </div>
-      {/if}
-      {#if hoverTarget.code}
+  <div class="binding-popover" class:helper={hoverTarget.helper}>
+    {#if hoverTarget.description}
+      <div>
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-        <pre>{@html hoverTarget.code}</pre>
-      {/if}
-    </Layout>
+        {@html hoverTarget.description}
+      </div>
+    {/if}
+    {#if hoverTarget.code}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+      <pre>{@html hoverTarget.code}</pre>
+    {/if}
   </div>
 </Popover>
 
@@ -380,14 +380,19 @@
   .binding__label {
     text-transform: capitalize;
   }
-
   .binding__type {
     font-family: var(--font-mono);
     font-size: 10px;
     color: var(--spectrum-global-color-gray-700);
   }
 
-  .helper pre {
+  .binding-popover {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    padding: var(--spacing-m);
+  }
+  .binding-popover pre {
     padding: 0;
     margin: 0;
     font-size: 12px;
@@ -395,12 +400,15 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .helper pre :global(span) {
+  .binding-popover.helper pre {
+    color: var(--spectrum-global-color-blue-700);
+  }
+  .binding-popover pre :global(span) {
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
-  .helper :global(p) {
+  .binding-popover :global(p) {
     padding: 0;
     margin: 0;
   }

From 9450c5b770b62f154452f8f953bf8a6bee4180a2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 12:55:48 +0000
Subject: [PATCH 34/67] Disable live binding eval when no context is provided

---
 .../src/components/common/bindings/BindingPanel.svelte    | 4 +++-
 .../components/common/bindings/BindingSidePanel.svelte    | 8 +++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 02a5b99495..16fd40eaa1 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -69,7 +69,9 @@
 
   $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
   $: editorTabs = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
-  $: sideTabs = [SidePanels.Evaluation, SidePanels.Bindings]
+  $: sideTabs = context
+    ? [SidePanels.Evaluation, SidePanels.Bindings]
+    : [SidePanels.Bindings]
   $: enrichedBindings = enrichBindings(bindings, context)
   $: usingJS = mode === Modes.JavaScript
   $: editorMode =
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 2c1880149f..c5020afee7 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -1,9 +1,8 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { convertToJS, processStringSync } from "@budibase/string-templates"
-  import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
+  import { convertToJS } from "@budibase/string-templates"
+  import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
-  import formatHighlight from "json-format-highlight"
 
   export let addHelper
   export let addBinding
@@ -72,6 +71,9 @@
   }
 
   const showBindingPopover = (binding, target) => {
+    if (!context) {
+      return
+    }
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {

From e10dd49540f60baf689519b5753b9151c9cac717 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 13:25:37 +0000
Subject: [PATCH 35/67] Update drawer titles across the board to be more useful

---
 .../common/bindings/DrawerBindableCombobox.svelte           | 6 +-----
 .../components/common/bindings/DrawerBindableInput.svelte   | 4 ++--
 .../controls/ButtonActionEditor/ButtonActionEditor.svelte   | 3 ++-
 .../controls/ButtonActionEditor/actions/DeleteRow.svelte    | 2 +-
 .../controls/ButtonActionEditor/actions/FetchRow.svelte     | 2 +-
 .../controls/ButtonActionEditor/actions/SaveFields.svelte   | 2 +-
 .../ButtonActionEditor/actions/ShowNotification.svelte      | 1 +
 .../ButtonActionEditor/actions/UpdateFieldValue.svelte      | 1 +
 .../controls/ButtonActionEditor/actions/UpdateState.svelte  | 1 +
 .../design/settings/controls/PropertyControl.svelte         | 1 +
 10 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index 37800d899d..c9bffcd812 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -77,11 +77,7 @@
   {/if}
 </div>
 
-<Drawer bind:this={bindingDrawer} {title} headless>
-  <svelte:fragment slot="description">
-    Add the objects on the left to enrich your text.
-  </svelte:fragment>
-
+<Drawer bind:this={bindingDrawer} {title}>
   <Button cta slot="buttons" on:click={handleClose} disabled={!valid}>
     Save
   </Button>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 0a021bb8df..5a2cdf321e 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -13,7 +13,7 @@
   export let panel = ClientBindingPanel
   export let value = ""
   export let bindings = []
-  export let title = "Bindings"
+  export let title
   export let placeholder
   export let label
   export let disabled = false
@@ -89,7 +89,7 @@
   on:drawerShow
   {fillWidth}
   bind:this={bindingDrawer}
-  {title}
+  title={title ?? placeholder ?? "Bindings"}
   left={drawerLeft}
 >
   <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
index d445c98a1a..f009c975cf 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
@@ -12,6 +12,7 @@
   export let bindings
   export let nested
   export let componentInstance
+  export let title = "Actions"
 
   let drawer
   let tmpValue
@@ -37,7 +38,7 @@
   <ActionButton on:click={openDrawer}>{actionText}</ActionButton>
 </div>
 
-<Drawer bind:this={drawer} title={"Actions"} on:drawerHide on:drawerShow>
+<Drawer bind:this={drawer} {title} on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Define what actions to run.
   </svelte:fragment>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
index b8459ac0eb..8f9d7121ed 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
@@ -31,7 +31,7 @@
     <Label small>Row IDs</Label>
     <DrawerBindableInput
       {bindings}
-      title="Rows to delete"
+      title="Row IDs to delete"
       value={parameters.rowId}
       on:change={value => (parameters.rowId = value.detail)}
     />
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
index 4478f1bb16..61b7494ab2 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
@@ -29,7 +29,7 @@
   <Label small>Row ID</Label>
   <DrawerBindableInput
     {bindings}
-    title="Row ID to Fetch"
+    title="Row ID"
     value={parameters.rowId}
     on:change={value => (parameters.rowId = value.detail)}
   />
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
index 52bd84c453..e03af75207 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
@@ -62,7 +62,7 @@
     {/if}
     <Label small>{valueLabel}</Label>
     <DrawerBindableInput
-      title={`Value for "${field[0]}"`}
+      title={field[0]}
       value={field[1]}
       {bindings}
       on:change={event => updateFieldValue(idx, event.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
index 55b00d215d..d95e13cb5f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
@@ -40,6 +40,7 @@
   <Select bind:value={parameters.type} options={types} placeholder={null} />
   <Label>Message</Label>
   <DrawerBindableInput
+    title="Message"
     {bindings}
     value={parameters.message}
     on:change={e => (parameters.message = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
index 51aa6e8cfd..9c843e35d6 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
@@ -72,6 +72,7 @@
   {#if parameters.type === "set"}
     <Label small>Value</Label>
     <DrawerBindableInput
+      title="Field value"
       {bindings}
       value={parameters.value}
       on:change={e => (parameters.value = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
index 16a77692ae..fda05ef45a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
@@ -38,6 +38,7 @@
   {#if parameters.type === "set"}
     <Label small>Value</Label>
     <DrawerBindableInput
+      title="State value"
       {bindings}
       value={parameters.value}
       on:change={e => (parameters.value = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 94c9d22f54..7cc4e77103 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -98,6 +98,7 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
+      title={label}
       {nested}
       {key}
       {type}

From c12d3cffc3cf5849f8ac6b5d8f5a717f60aaada8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 13:28:13 +0000
Subject: [PATCH 36/67] Remove useless concept of headless drawer and fix issue
 with drawer observer

---
 packages/bbui/src/Drawer/Drawer.svelte        | 20 ++++++++-----------
 .../common/bindings/DrawerBindableSlot.svelte |  4 ----
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index ff7497b905..509522e1c5 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -44,7 +44,7 @@
     if (get(openDrawers).length) {
       return
     }
-    observer.disconnect()
+    observer?.disconnect()
     observer = null
   }
 </script>
@@ -57,7 +57,6 @@
   import { fade } from "svelte/transition"
 
   export let title
-  export let headless = false
 
   const dispatch = createEventDispatcher()
   const spacing = 11
@@ -156,21 +155,18 @@
     {/if}
     <div
       class="drawer"
-      class:headless
       class:stacked={depth > 0}
       class:modal={$modal}
       transition:slide|local
       {style}
     >
-      {#if !headless}
-        <header>
-          <div class="text">{title}</div>
-          <div class="buttons">
-            <Button secondary quiet on:click={hide}>Cancel</Button>
-            <slot name="buttons" />
-          </div>
-        </header>
-      {/if}
+      <header>
+        <div class="text">{title}</div>
+        <div class="buttons">
+          <Button secondary quiet on:click={hide}>Cancel</Button>
+          <slot name="buttons" />
+        </div>
+      </header>
       <slot name="body" />
       {#if !$modal && depth > 0}
         <div class="overlay" transition:fade|local={{ duration: 260 }} />
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index dc058ac203..4b0b5fce51 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -175,11 +175,7 @@
   bind:this={bindingDrawer}
   {title}
   left={drawerLeft}
-  headless
 >
-  <svelte:fragment slot="description">
-    Add the objects on the left to enrich your text.
-  </svelte:fragment>
   <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
     Save
   </Button>

From 7bf8a8b5305945237168c12126f86d3f11c3cb02 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 13:30:11 +0000
Subject: [PATCH 37/67] Add more instances of useful drawer titles

---
 packages/bbui/src/Drawer/Drawer.svelte                          | 2 +-
 .../components/common/bindings/DrawerBindableCombobox.svelte    | 2 +-
 .../src/components/common/bindings/DrawerBindableSlot.svelte    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 509522e1c5..74dbd984a6 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -161,7 +161,7 @@
       {style}
     >
       <header>
-        <div class="text">{title}</div>
+        <div class="text">{title || "Bindings"}</div>
         <div class="buttons">
           <Button secondary quiet on:click={hide}>Cancel</Button>
           <slot name="buttons" />
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index c9bffcd812..03988bdec3 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -77,7 +77,7 @@
   {/if}
 </div>
 
-<Drawer bind:this={bindingDrawer} {title}>
+<Drawer bind:this={bindingDrawer} title={title ?? placeholder ?? "Bindings"}>
   <Button cta slot="buttons" on:click={handleClose} disabled={!valid}>
     Save
   </Button>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index 4b0b5fce51..7e37b741e2 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -173,7 +173,7 @@
   on:drawerShow
   {fillWidth}
   bind:this={bindingDrawer}
-  {title}
+  title={title ?? placeholder ?? "Bindings"}
   left={drawerLeft}
 >
   <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>

From 010a55ea20a77f28fe708edec61ca3c54b5d127c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 13:37:16 +0000
Subject: [PATCH 38/67] Improve titles in more places in automations

---
 .../src/components/automation/SetupPanel/RowSelector.svelte     | 2 +-
 .../design/settings/controls/FilterEditor/FilterDrawer.svelte   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 6cc96d8c68..fbcacf4418 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -130,7 +130,7 @@
           {:else}
             <DrawerBindableSlot
               fillWidth
-              title={value.title}
+              title={value.title || field}
               panel={AutomationBindingPanel}
               type={schema.type}
               {schema}
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
index 0fe1cb90d2..b631f10486 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
@@ -260,7 +260,7 @@
               {#if filter.field && filter.valueType === "Binding"}
                 <DrawerBindableInput
                   disabled={filter.noValue}
-                  title={`Value for "${filter.field}"`}
+                  title={filter.field}
                   value={filter.value}
                   placeholder="Value"
                   {panel}

From 92d8dc14a1191567f0d1c5f6cc728769430f7c17 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 13:47:49 +0000
Subject: [PATCH 39/67] Add more drawer titles

---
 .../design/settings/controls/ColumnEditor/CellDrawer.svelte     | 1 +
 .../design/settings/controls/ColumnEditor/CellEditor.svelte     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
index f5167e3657..f6f25b2512 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
@@ -28,6 +28,7 @@
         placeholder="Default"
       />
       <DrawerBindableInput
+        title="Value"
         label="Value"
         value={column.template}
         on:change={e => (column.template = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte
index b52e7edc54..04a491c6f3 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Icon name="Settings" hoverable size="S" on:click={open} />
-<Drawer bind:this={drawer} title="Table Columns">
+<Drawer bind:this={drawer} title={column.name}>
   <svelte:fragment slot="description">
     "{column.name}" column settings
   </svelte:fragment>

From 32b0aa34b82d853819b4371855dfdec3808e71c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 13:51:36 +0000
Subject: [PATCH 40/67] Fix crash with dynamic filter when using custom data
 source

---
 .../src/components/app/dynamic-filter/DynamicFilter.svelte  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 199a6122ab..28141459a9 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -58,13 +58,13 @@
     }
     let clonedSchema = {}
     if (!allowedFields?.length) {
-      clonedSchema = schema
+      clonedSchema = schema || {}
     } else {
       allowedFields?.forEach(field => {
-        if (schema[field.name]) {
+        if (schema?.[field.name]) {
           clonedSchema[field.name] = schema[field.name]
           clonedSchema[field.name].displayName = field.displayName
-        } else if (schema[field]) {
+        } else if (schema?.[field]) {
           clonedSchema[field] = schema[field]
         }
       })

From 3d96292f26bc8a237d78538d65e82557aed05936 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 14:15:03 +0000
Subject: [PATCH 41/67] Clean up usages of drawers everywhere

---
 packages/bbui/src/Drawer/Drawer.svelte        |  22 +++-
 .../SetupPanel/AutomationBlockSetup.svelte    |  24 ++--
 .../SetupPanel/AutomationSelector.svelte      |   1 -
 .../SetupPanel/QueryParamSelector.svelte      |   1 -
 .../automation/SetupPanel/RowSelector.svelte  |   1 -
 .../SetupPanel/RowSelectorTypes.svelte        |   2 +-
 .../common/bindings/BindingPanel.svelte       |   2 +-
 .../bindings/DrawerBindableInput.svelte       |   6 +-
 .../common/bindings/DrawerBindableSlot.svelte |   2 -
 .../common/bindings/ModalBindableInput.svelte | 112 +-----------------
 .../controls/FilterEditor/FilterDrawer.svelte |   2 -
 .../integration/KeyValueBuilder.svelte        |   1 -
 12 files changed, 32 insertions(+), 144 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 74dbd984a6..5c80e4c84c 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -52,11 +52,12 @@
 <script>
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
-  import { setContext, createEventDispatcher, onDestroy } from "svelte"
+  import { setContext, createEventDispatcher, onMount } from "svelte"
   import { generate } from "shortid"
   import { fade } from "svelte/transition"
 
   export let title
+  export let forceModal = false
 
   const dispatch = createEventDispatcher()
   const spacing = 11
@@ -89,6 +90,9 @@
     if (visible) {
       return
     }
+    if (forceModal) {
+      modal.set(true)
+    }
     observe()
     visible = true
     dispatch("drawerShow", drawerId)
@@ -112,6 +116,7 @@
     hide,
     show,
     modal,
+    forceModal,
   })
 
   const easeInOutQuad = x => {
@@ -141,9 +146,14 @@
     return 1 - lim * 0.1
   }
 
-  onDestroy(() => {
-    if (visible) {
-      hide()
+  onMount(() => {
+    if (forceModal) {
+      modal.set(true)
+    }
+    return () => {
+      if (visible) {
+        hide()
+      }
     }
   })
 </script>
@@ -184,7 +194,7 @@
     height: 420px;
     background: var(--background);
     border: var(--border-light);
-    z-index: 3;
+    z-index: 999;
     border-radius: 8px;
     overflow: hidden;
     box-sizing: border-box;
@@ -212,7 +222,7 @@
     width: 100%;
     height: 100%;
     transition: opacity 360ms ease-out;
-    z-index: 3;
+    z-index: 999;
     opacity: 0.5;
   }
   .overlay {
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 2c7282ad7e..26d121a2e0 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -52,11 +52,12 @@
   export let testData
   export let schemaProperties
   export let isTestModal = false
+
   let webhookModal
   let drawer
-  let fillWidth = true
   let inputData
   let insertAtPos, getCaretPosition
+
   $: filters = lookForFilters(schemaProperties) || []
   $: tempFilters = filters
   $: stepId = block.stepId
@@ -80,7 +81,6 @@
   })
   $: editingJs = codeMode === EditorModes.JS
   $: requiredProperties = block.schema.inputs.required || []
-
   $: stepCompletions =
     codeMode === EditorModes.Handlebars
       ? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])]
@@ -377,12 +377,13 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     {#if canShowField(key, value)}
+      {@const label = getFieldLabel(key, value)}
       <div class:block-field={shouldRenderField(value)}>
         {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
           <Label
             tooltip={value.title === "Binding / Value"
               ? "If using the String input type, please use a comma or newline separated string"
-              : null}>{getFieldLabel(key, value)}</Label
+              : null}>{label}</Label
           >
         {/if}
         <div class:field-width={shouldRenderField(value)}>
@@ -415,8 +416,7 @@
             </div>
           {:else if value.type === "date"}
             <DrawerBindableSlot
-              fillWidth
-              title={value.title}
+              title={value.title ?? label}
               panel={AutomationBindingPanel}
               type={"date"}
               value={inputData[key]}
@@ -439,7 +439,7 @@
             />
           {:else if value.customType === "filters"}
             <ActionButton on:click={drawer.show}>Define filters</ActionButton>
-            <Drawer bind:this={drawer} {fillWidth} title="Filtering">
+            <Drawer bind:this={drawer} title="Filtering">
               <Button cta slot="buttons" on:click={() => saveFilters(key)}>
                 Save
               </Button>
@@ -450,7 +450,6 @@
                 {schemaFields}
                 datasource={{ type: "table", tableId }}
                 panel={AutomationBindingPanel}
-                fillWidth
                 on:change={e => (tempFilters = e.detail)}
               />
             </Drawer>
@@ -463,19 +462,17 @@
           {:else if value.customType === "email"}
             {#if isTestModal}
               <ModalBindableInput
-                title={value.title}
+                title={value.title ?? label}
                 value={inputData[key]}
                 panel={AutomationBindingPanel}
                 type="email"
                 on:change={e => onChange(e, key)}
                 {bindings}
-                fillWidth
                 updateOnChange={false}
               />
             {:else}
               <DrawerBindableInput
-                fillWidth
-                title={value.title}
+                title={value.title ?? label}
                 panel={AutomationBindingPanel}
                 type="email"
                 value={inputData[key]}
@@ -609,7 +606,7 @@
           {:else if value.type === "string" || value.type === "number" || value.type === "integer"}
             {#if isTestModal}
               <ModalBindableInput
-                title={value.title}
+                title={value.title || label}
                 value={inputData[key]}
                 panel={AutomationBindingPanel}
                 type={value.customType}
@@ -620,8 +617,7 @@
             {:else}
               <div class="test">
                 <DrawerBindableInput
-                  fillWidth={true}
-                  title={value.title}
+                  title={value.title ?? label}
                   panel={AutomationBindingPanel}
                   type={value.customType}
                   value={inputData[key]}
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
index 4372122119..46600d3f85 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
@@ -57,7 +57,6 @@
           on:change={e => onChange(e, field)}
           type="string"
           {bindings}
-          fillWidth={true}
           updateOnChange={false}
         />
       </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index 4674002d61..f46bca3090 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -52,7 +52,6 @@
           on:change={e => onChange(e, field)}
           type="string"
           {bindings}
-          fillWidth={true}
           updateOnChange={false}
         />
       </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index fbcacf4418..0d15df6c87 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -129,7 +129,6 @@
             />
           {:else}
             <DrawerBindableSlot
-              fillWidth
               title={value.title || field}
               panel={AutomationBindingPanel}
               type={schema.type}
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
index 937e3b6c69..040e783cd3 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@@ -85,8 +85,8 @@
     on:change={e => onChange(e, field)}
     type="string"
     bindings={parsedBindings}
-    fillWidth={true}
     allowJS={true}
     updateOnChange={false}
+    title={schema.name}
   />
 {/if}
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 16fd40eaa1..ba07b6f254 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -213,7 +213,7 @@
               <Icon name={tab} size="S" />
             </ActionButton>
           {/each}
-          {#if drawerContext}
+          {#if drawerContext && !drawerContext.forceModal}
             <ActionButton
               size="M"
               quiet
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 5a2cdf321e..e61376daa0 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -17,13 +17,12 @@
   export let placeholder
   export let label
   export let disabled = false
-  export let fillWidth
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
-  export let drawerLeft
   export let key
   export let disableBindings = false
+  export let forceModal = false
 
   const dispatch = createEventDispatcher()
 
@@ -87,10 +86,9 @@
 <Drawer
   on:drawerHide={onDrawerHide}
   on:drawerShow
-  {fillWidth}
   bind:this={bindingDrawer}
   title={title ?? placeholder ?? "Bindings"}
-  left={drawerLeft}
+  {forceModal}
 >
   <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
     Save
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index 7e37b741e2..3530277195 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -16,7 +16,6 @@
   export let placeholder
   export let label
   export let disabled = false
-  export let fillWidth
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
@@ -171,7 +170,6 @@
 <Drawer
   on:drawerHide
   on:drawerShow
-  {fillWidth}
   bind:this={bindingDrawer}
   title={title ?? placeholder ?? "Bindings"}
   left={drawerLeft}
diff --git a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index 084c86f944..970857011f 100644
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -1,113 +1,5 @@
 <script>
-  import { Icon, Input, Modal, Body, ModalContent } from "@budibase/bbui"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "dataBinding"
-  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
-  import { createEventDispatcher } from "svelte"
-  import { isJSBinding } from "@budibase/string-templates"
-
-  export let panel = ServerBindingPanel
-  export let value = ""
-  export let bindings = []
-  export let title = "Bindings"
-  export let placeholder
-  export let label
-  export let allowJS = false
-  export let updateOnChange = true
-
-  const dispatch = createEventDispatcher()
-  let bindingModal
-  let valid = true
-
-  $: readableValue = runtimeToReadableBinding(bindings, value)
-  $: tempValue = readableValue
-  $: isJS = isJSBinding(value)
-
-  const saveBinding = () => {
-    onChange(tempValue)
-    bindingModal.hide()
-  }
-
-  const onChange = input => {
-    dispatch("change", readableToRuntimeBinding(bindings, input))
-  }
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 </script>
 
-<div class="control">
-  <Input
-    {label}
-    readonly={isJS}
-    value={isJS ? "(JavaScript function)" : readableValue}
-    on:change={event => onChange(event.detail)}
-    {placeholder}
-    {updateOnChange}
-  />
-  <div class="icon" on:click={bindingModal.show}>
-    <Icon size="S" name="FlashOn" />
-  </div>
-</div>
-<Modal bind:this={bindingModal}>
-  <ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
-    <Body extraSmall grey>
-      Add the objects on the left to enrich your text.
-    </Body>
-    <div class="panel-wrapper">
-      <svelte:component
-        this={panel}
-        serverSide
-        value={readableValue}
-        bind:valid
-        on:change={e => (tempValue = e.detail)}
-        {bindings}
-        {allowJS}
-      />
-    </div>
-  </ModalContent>
-</Modal>
-
-<style>
-  .control {
-    flex: 1;
-    position: relative;
-  }
-
-  .icon {
-    right: 1px;
-    bottom: 1px;
-    position: absolute;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
-    border-left: 1px solid var(--spectrum-alias-border-color);
-    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
-    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
-    width: 31px;
-    color: var(--spectrum-alias-text-color);
-    background-color: var(--spectrum-global-color-gray-75);
-    transition: background-color
-        var(--spectrum-global-animation-duration-100, 130ms),
-      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
-      border-color var(--spectrum-global-animation-duration-100, 130ms);
-    height: calc(var(--spectrum-alias-item-height-m) - 2px);
-  }
-
-  .icon:hover {
-    cursor: pointer;
-    color: var(--spectrum-alias-text-color-hover);
-    background-color: var(--spectrum-global-color-gray-50);
-    border-color: var(--spectrum-alias-border-color-hover);
-  }
-
-  .panel-wrapper {
-    border: var(--border-light);
-    border-radius: 4px;
-  }
-
-  .control :global(.spectrum-Textfield-input) {
-    padding-right: 40px;
-  }
-</style>
+<DrawerBindableInput {...$$props} forceModal />
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
index b631f10486..7f1ee8010d 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
@@ -26,7 +26,6 @@
   export let bindings = []
   export let panel = ClientBindingPanel
   export let allowBindings = true
-  export let fillWidth = false
   export let datasource
 
   const dispatch = createEventDispatcher()
@@ -266,7 +265,6 @@
                   {panel}
                   {bindings}
                   on:change={event => (filter.value = event.detail)}
-                  {fillWidth}
                 />
               {:else if ["string", "longform", "number", "bigint", "formula"].includes(filter.type)}
                 <Input disabled={filter.noValue} bind:value={filter.value} />
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index 8dac07bcec..af73a60d9f 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -131,7 +131,6 @@
           value={field.value}
           allowJS={false}
           {allowHelpers}
-          fillWidth={true}
           drawerLeft={bindingDrawerLeft}
         />
       {:else}

From afbdaac0db646d3be5226d42aa5d7cac256387a8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 14:17:07 +0000
Subject: [PATCH 42/67] Simplify modalbindableinput

---
 .../components/common/bindings/ModalBindableInput.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index 970857011f..3261dc6b74 100644
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -2,4 +2,11 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 </script>
 
-<DrawerBindableInput {...$$props} forceModal />
+<DrawerBindableInput
+  {...$$props}
+  forceModal
+  on:change
+  on:blur
+  on:drawerHide
+  on:drawerShow
+/>

From e2fe2798421cb836732452c845a353cf32b13a93 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 14:30:21 +0000
Subject: [PATCH 43/67] Exclude drawers from click_outside callbacks, unless
 registered inside a drawer

---
 packages/bbui/src/Actions/click_outside.js |  7 +++
 packages/bbui/src/Drawer/Drawer.svelte     | 59 ++++++++++------------
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 1961dca47c..62416ae88d 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -32,6 +32,13 @@ const handleClick = event => {
       return
     }
 
+    // Ignore clicks for drawers, unless the handler is registered from a drawer
+    const sourceInDrawer = handler.anchor.closest(".drawer-container") != null
+    const clickInDrawer = event.target.closest(".drawer-container") != null
+    if (clickInDrawer && !sourceInDrawer) {
+      return
+    }
+
     handler.callback?.(event)
   })
 }
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 5c80e4c84c..672795e078 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -46,13 +46,14 @@
     }
     observer?.disconnect()
     observer = null
+    modal.set(false)
   }
 </script>
 
 <script>
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
-  import { setContext, createEventDispatcher, onMount } from "svelte"
+  import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
   import { fade } from "svelte/transition"
 
@@ -106,9 +107,6 @@
     visible = false
     dispatch("drawerHide", drawerId)
     openDrawers.update(state => state.filter(id => id !== drawerId))
-    if (!$openDrawers.length) {
-      modal.set(false)
-    }
     unobserve()
   }
 
@@ -146,41 +144,38 @@
     return 1 - lim * 0.1
   }
 
-  onMount(() => {
-    if (forceModal) {
-      modal.set(true)
-    }
-    return () => {
-      if (visible) {
-        hide()
-      }
+  onDestroy(() => {
+    if (visible) {
+      hide()
     }
   })
 </script>
 
 {#if visible}
   <Portal target=".modal-container">
-    {#if $modal}
-      <div transition:fade={{ duration: 260 }} class="underlay" />
-    {/if}
-    <div
-      class="drawer"
-      class:stacked={depth > 0}
-      class:modal={$modal}
-      transition:slide|local
-      {style}
-    >
-      <header>
-        <div class="text">{title || "Bindings"}</div>
-        <div class="buttons">
-          <Button secondary quiet on:click={hide}>Cancel</Button>
-          <slot name="buttons" />
-        </div>
-      </header>
-      <slot name="body" />
-      {#if !$modal && depth > 0}
-        <div class="overlay" transition:fade|local={{ duration: 260 }} />
+    <div class="drawer-container">
+      {#if $modal}
+        <div transition:fade={{ duration: 260 }} class="underlay" />
       {/if}
+      <div
+        class="drawer"
+        class:stacked={depth > 0}
+        class:modal={$modal}
+        transition:slide|local
+        {style}
+      >
+        <header>
+          <div class="text">{title || "Bindings"}</div>
+          <div class="buttons">
+            <Button secondary quiet on:click={hide}>Cancel</Button>
+            <slot name="buttons" />
+          </div>
+        </header>
+        <slot name="body" />
+        {#if !$modal && depth > 0}
+          <div class="overlay" transition:fade|local={{ duration: 260 }} />
+        {/if}
+      </div>
     </div>
   </Portal>
 {/if}

From 334c6de3045a73109d370c44873000524aaf6e6f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 14:34:47 +0000
Subject: [PATCH 44/67] Attempt to make CreateEditColumn slightly readable by
 grouping variables as done everywhere else

---
 .../DataTable/modals/CreateEditColumn.svelte  | 158 ++++++++----------
 1 file changed, 73 insertions(+), 85 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 09245b06c5..b3fbd7132d 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -49,43 +49,21 @@
 
   const dispatch = createEventDispatcher()
   const PROHIBITED_COLUMN_NAMES = ["type", "_id", "_rev", "tableId"]
-  const { dispatch: gridDispatch } = getContext("grid")
+  const { dispatch: gridDispatch, rows } = getContext("grid")
 
   export let field
 
   let mounted = false
-  const fieldDefinitions = Object.values(FIELDS).reduce(
-    // Storing the fields by complex field id
-    (acc, field) => ({
-      ...acc,
-      [makeFieldId(field.type, field.subtype)]: field,
-    }),
-    {}
-  )
-
-  function makeFieldId(type, subtype, autocolumn) {
-    // don't make field IDs for auto types
-    if (type === AUTO_TYPE || autocolumn) {
-      return type.toUpperCase()
-    } else {
-      return `${type}${subtype || ""}`.toUpperCase()
-    }
-  }
-
   let originalName
   let linkEditDisabled
   let primaryDisplay
   let indexes = [...($tables.selected.indexes || [])]
   let isCreating = undefined
-
   let relationshipPart1 = PrettyRelationshipDefinitions.Many
   let relationshipPart2 = PrettyRelationshipDefinitions.One
-
   let relationshipTableIdPrimary = null
   let relationshipTableIdSecondary = null
-
   let table = $tables.selected
-
   let confirmDeleteDialog
   let savingColumn
   let deleteColName
@@ -99,11 +77,6 @@
   }
   let relationshipOpts1 = Object.values(PrettyRelationshipDefinitions)
   let relationshipOpts2 = Object.values(PrettyRelationshipDefinitions)
-
-  $: if (primaryDisplay) {
-    editableColumn.constraints.presence = { allowEmpty: false }
-  }
-
   let relationshipMap = {
     [RelationshipType.ONE_TO_MANY]: {
       part1: PrettyRelationshipDefinitions.MANY,
@@ -118,7 +91,11 @@
       part2: PrettyRelationshipDefinitions.MANY,
     },
   }
+  let autoColumnInfo = getAutoColumnInformation()
 
+  $: if (primaryDisplay) {
+    editableColumn.constraints.presence = { allowEmpty: false }
+  }
   $: {
     // this parses any changes the user has made when creating a new internal relationship
     // into what we expect the schema to look like
@@ -148,6 +125,74 @@
       editableColumn.tableId = relationshipTableIdSecondary
     }
   }
+  $: initialiseField(field, savingColumn)
+  $: checkConstraints(editableColumn)
+  $: required = !!editableColumn?.constraints?.presence || primaryDisplay
+  $: uneditable =
+    $tables.selected?._id === TableNames.USERS &&
+    UNEDITABLE_USER_FIELDS.includes(editableColumn.name)
+  $: invalid =
+    !editableColumn?.name ||
+    (editableColumn?.type === LINK_TYPE && !editableColumn?.tableId) ||
+    Object.keys(errors).length !== 0
+  $: errors = checkErrors(editableColumn)
+  $: datasource = $datasources.list.find(
+    source => source._id === table?.sourceId
+  )
+  $: tableAutoColumnsTypes = getTableAutoColumnTypes($tables?.selected)
+  $: availableAutoColumns = Object.keys(autoColumnInfo).reduce((acc, key) => {
+    if (!tableAutoColumnsTypes.includes(key)) {
+      acc[key] = autoColumnInfo[key]
+    }
+    return acc
+  }, {})
+  $: availableAutoColumnKeys = availableAutoColumns
+    ? Object.keys(availableAutoColumns)
+    : []
+  $: autoColumnOptions = editableColumn.autocolumn
+    ? autoColumnInfo
+    : availableAutoColumns
+  // used to select what different options can be displayed for column type
+  $: canBeDisplay =
+    editableColumn?.type !== LINK_TYPE &&
+    editableColumn?.type !== AUTO_TYPE &&
+    editableColumn?.type !== JSON_TYPE &&
+    !editableColumn.autocolumn
+  $: canBeRequired =
+    editableColumn?.type !== LINK_TYPE &&
+    !uneditable &&
+    editableColumn?.type !== AUTO_TYPE &&
+    !editableColumn.autocolumn
+  $: externalTable = table.sourceType === DB_TYPE_EXTERNAL
+  // in the case of internal tables the sourceId will just be undefined
+  $: tableOptions = $tables.list.filter(
+    opt =>
+      opt.sourceType === table.sourceType && table.sourceId === opt.sourceId
+  )
+  $: typeEnabled =
+    !originalName ||
+    (originalName &&
+      SWITCHABLE_TYPES.indexOf(editableColumn.type) !== -1 &&
+      !editableColumn?.autocolumn)
+
+  const fieldDefinitions = Object.values(FIELDS).reduce(
+    // Storing the fields by complex field id
+    (acc, field) => ({
+      ...acc,
+      [makeFieldId(field.type, field.subtype)]: field,
+    }),
+    {}
+  )
+
+  function makeFieldId(type, subtype, autocolumn) {
+    // don't make field IDs for auto types
+    if (type === AUTO_TYPE || autocolumn) {
+      return type.toUpperCase()
+    } else {
+      return `${type}${subtype || ""}`.toUpperCase()
+    }
+  }
+
   const initialiseField = (field, savingColumn) => {
     isCreating = !field
     if (field && !savingColumn) {
@@ -187,22 +232,6 @@
     }
   }
 
-  $: initialiseField(field, savingColumn)
-
-  $: checkConstraints(editableColumn)
-  $: required = !!editableColumn?.constraints?.presence || primaryDisplay
-  $: uneditable =
-    $tables.selected?._id === TableNames.USERS &&
-    UNEDITABLE_USER_FIELDS.includes(editableColumn.name)
-  $: invalid =
-    !editableColumn?.name ||
-    (editableColumn?.type === LINK_TYPE && !editableColumn?.tableId) ||
-    Object.keys(errors).length !== 0
-  $: errors = checkErrors(editableColumn)
-  $: datasource = $datasources.list.find(
-    source => source._id === table?.sourceId
-  )
-
   const getTableAutoColumnTypes = table => {
     return Object.keys(table?.schema).reduce((acc, key) => {
       let fieldSchema = table?.schema[key]
@@ -213,47 +242,6 @@
     }, [])
   }
 
-  let autoColumnInfo = getAutoColumnInformation()
-
-  $: tableAutoColumnsTypes = getTableAutoColumnTypes($tables?.selected)
-  $: availableAutoColumns = Object.keys(autoColumnInfo).reduce((acc, key) => {
-    if (!tableAutoColumnsTypes.includes(key)) {
-      acc[key] = autoColumnInfo[key]
-    }
-    return acc
-  }, {})
-
-  $: availableAutoColumnKeys = availableAutoColumns
-    ? Object.keys(availableAutoColumns)
-    : []
-
-  $: autoColumnOptions = editableColumn.autocolumn
-    ? autoColumnInfo
-    : availableAutoColumns
-
-  // used to select what different options can be displayed for column type
-  $: canBeDisplay =
-    editableColumn?.type !== LINK_TYPE &&
-    editableColumn?.type !== AUTO_TYPE &&
-    editableColumn?.type !== JSON_TYPE &&
-    !editableColumn.autocolumn
-  $: canBeRequired =
-    editableColumn?.type !== LINK_TYPE &&
-    !uneditable &&
-    editableColumn?.type !== AUTO_TYPE &&
-    !editableColumn.autocolumn
-  $: externalTable = table.sourceType === DB_TYPE_EXTERNAL
-  // in the case of internal tables the sourceId will just be undefined
-  $: tableOptions = $tables.list.filter(
-    opt =>
-      opt.sourceType === table.sourceType && table.sourceId === opt.sourceId
-  )
-  $: typeEnabled =
-    !originalName ||
-    (originalName &&
-      SWITCHABLE_TYPES.indexOf(editableColumn.type) !== -1 &&
-      !editableColumn?.autocolumn)
-
   async function saveColumn() {
     savingColumn = true
     if (errors?.length) {

From 08ad9d9c4e13f165ae7af9b60349124e3fd75276 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 27 Feb 2024 14:44:25 +0000
Subject: [PATCH 45/67] Add binding eval for non relationship fields when
 editing formula columns

---
 .../DataTable/modals/CreateEditColumn.svelte  |  5 ++
 .../bindings/DrawerBindableInput.svelte       |  2 +
 .../common/bindings/ServerBindingPanel.svelte |  2 +
 packages/client/src/sdk.js                    | 10 ++--
 packages/client/src/utils/components.js       | 49 -------------------
 packages/frontend-core/src/utils/index.js     |  1 +
 packages/frontend-core/src/utils/rows.js      | 48 ++++++++++++++++++
 7 files changed, 65 insertions(+), 52 deletions(-)
 create mode 100644 packages/frontend-core/src/utils/rows.js

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index b3fbd7132d..c1d1a5655a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -36,6 +36,8 @@
   import { ValidColumnNameRegex } from "@budibase/shared-core"
   import { FieldType, FieldSubtype, SourceName } from "@budibase/types"
   import RelationshipSelector from "components/common/RelationshipSelector.svelte"
+  import { RowUtils } from "@budibase/frontend-core"
+  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
 
   const AUTO_TYPE = FIELDS.AUTO.type
   const FORMULA_TYPE = FIELDS.FORMULA.type
@@ -93,6 +95,7 @@
   }
   let autoColumnInfo = getAutoColumnInformation()
 
+  $: rowGoldenSample = RowUtils.generateGoldenSample($rows)
   $: if (primaryDisplay) {
     editableColumn.constraints.presence = { allowEmpty: false }
   }
@@ -667,6 +670,7 @@
       </div>
       <div class="input-length">
         <ModalBindableInput
+          panel={ServerBindingPanel}
           title="Formula"
           value={editableColumn.formula}
           on:change={e => {
@@ -677,6 +681,7 @@
           }}
           bindings={getBindings({ table })}
           allowJS
+          context={rowGoldenSample}
         />
       </div>
     </div>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index e61376daa0..e3b8615103 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -23,6 +23,7 @@
   export let key
   export let disableBindings = false
   export let forceModal = false
+  export let context = null
 
   const dispatch = createEventDispatcher()
 
@@ -102,6 +103,7 @@
     {bindings}
     {allowJS}
     {allowHelpers}
+    {context}
   />
 </Drawer>
 
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 213e5bbf1d..fdc8254a18 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -5,6 +5,7 @@
   export let valid
   export let value = ""
   export let allowJS = false
+  export let context = null
 
   $: enrichedBindings = enrichBindings(bindings)
 
@@ -23,5 +24,6 @@
   bindings={enrichedBindings}
   {value}
   {allowJS}
+  {context}
   on:change
 />
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index c0b99cd131..d86d635970 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -28,9 +28,13 @@ import { ActionTypes } from "./constants"
 import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
 import { enrichButtonActions } from "./utils/buttonActions.js"
-import { generateGoldenSample } from "./utils/components.js"
 import { processStringSync, makePropSafe } from "@budibase/string-templates"
-import { fetchData, LuceneUtils, Constants } from "@budibase/frontend-core"
+import {
+  fetchData,
+  LuceneUtils,
+  Constants,
+  RowUtils,
+} from "@budibase/frontend-core"
 
 export default {
   API,
@@ -66,7 +70,7 @@ export default {
   processStringSync,
   makePropSafe,
   createContextStore,
-  generateGoldenSample,
+  generateGoldenSample: RowUtils.generateGoldenSample,
 
   // Components
   Provider,
diff --git a/packages/client/src/utils/components.js b/packages/client/src/utils/components.js
index 70f80e4329..1812175c2c 100644
--- a/packages/client/src/utils/components.js
+++ b/packages/client/src/utils/components.js
@@ -82,52 +82,3 @@ export const findComponentParent = (rootComponent, id, parentComponent) => {
   }
   return null
 }
-
-/**
- * Util to check is a given value is "better" than another. "Betterness" is
- * defined as presence and length.
- */
-const isBetterSample = (newValue, oldValue) => {
-  // Prefer non-null values
-  if (oldValue == null && newValue != null) {
-    return true
-  }
-
-  // Don't change type
-  const oldType = typeof oldValue
-  const newType = typeof newValue
-  if (oldType !== newType) {
-    return false
-  }
-
-  // Prefer longer values
-  if (newType === "string" && newValue.length > oldValue.length) {
-    return true
-  }
-  if (
-    newType === "object" &&
-    Object.keys(newValue).length > Object.keys(oldValue).length
-  ) {
-    return true
-  }
-
-  return false
-}
-
-/**
- * Generates a best-case example object of the provided samples.
- * The generated sample does not necessarily exist - it simply is a sample that
- * contains "good" examples for every property of all the samples.
- * The generate sample will have a value for all keys across all samples.
- */
-export const generateGoldenSample = samples => {
-  let goldenSample = {}
-  samples?.forEach(sample => {
-    Object.keys(sample).forEach(key => {
-      if (isBetterSample(sample[key], goldenSample[key])) {
-        goldenSample[key] = sample[key]
-      }
-    })
-  })
-  return goldenSample
-}
diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js
index 3f00c00e47..98998b7f0e 100644
--- a/packages/frontend-core/src/utils/index.js
+++ b/packages/frontend-core/src/utils/index.js
@@ -3,6 +3,7 @@ export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
 export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
+export * as RowUtils from "./rows"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
diff --git a/packages/frontend-core/src/utils/rows.js b/packages/frontend-core/src/utils/rows.js
new file mode 100644
index 0000000000..ea43d63734
--- /dev/null
+++ b/packages/frontend-core/src/utils/rows.js
@@ -0,0 +1,48 @@
+/**
+ * Util to check is a given value is "better" than another. "Betterness" is
+ * defined as presence and length.
+ */
+const isBetterSample = (newValue, oldValue) => {
+  // Prefer non-null values
+  if (oldValue == null && newValue != null) {
+    return true
+  }
+
+  // Don't change type
+  const oldType = typeof oldValue
+  const newType = typeof newValue
+  if (oldType !== newType) {
+    return false
+  }
+
+  // Prefer longer values
+  if (newType === "string" && newValue.length > oldValue.length) {
+    return true
+  }
+  if (
+    newType === "object" &&
+    Object.keys(newValue).length > Object.keys(oldValue).length
+  ) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Generates a best-case example object of the provided samples.
+ * The generated sample does not necessarily exist - it simply is a sample that
+ * contains "good" examples for every property of all the samples.
+ * The generate sample will have a value for all keys across all samples.
+ */
+export const generateGoldenSample = samples => {
+  let goldenSample = {}
+  samples?.slice(0, 100).forEach(sample => {
+    Object.keys(sample).forEach(key => {
+      if (isBetterSample(sample[key], goldenSample[key])) {
+        goldenSample[key] = sample[key]
+      }
+    })
+  })
+  return goldenSample
+}

From 47cc9557c42dd4cd82a6087f781ffd8d489abdd8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 16:29:32 +0000
Subject: [PATCH 46/67] Improve drawer state management between instances

---
 packages/bbui/src/Drawer/Drawer.svelte                   | 9 ++++++++-
 .../src/components/common/bindings/BindingPanel.svelte   | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 672795e078..118a7dcd8e 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -8,6 +8,7 @@
   // Context level stores to keep drawers in sync
   const openDrawers = writable([])
   const modal = writable(false)
+  const resizable = writable(true)
   const drawerLeft = writable(null)
   const drawerWidth = writable(null)
 
@@ -45,8 +46,13 @@
       return
     }
     observer?.disconnect()
+
+    // Reset state
     observer = null
     modal.set(false)
+    resizable.set(true)
+    drawerLeft.set(null)
+    drawerWidth.set(null)
   }
 </script>
 
@@ -93,6 +99,7 @@
     }
     if (forceModal) {
       modal.set(true)
+      resizable.set(false)
     }
     observe()
     visible = true
@@ -114,7 +121,7 @@
     hide,
     show,
     modal,
-    forceModal,
+    resizable,
   })
 
   const easeInOutQuad = x => {
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index ba07b6f254..9a2a55cd9e 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -34,6 +34,7 @@
   import { capitalise } from "helpers"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import { get } from "svelte/store"
 
   const dispatch = createEventDispatcher()
 
@@ -213,7 +214,7 @@
               <Icon name={tab} size="S" />
             </ActionButton>
           {/each}
-          {#if drawerContext && !drawerContext.forceModal}
+          {#if drawerContext && get(drawerContext.resizable)}
             <ActionButton
               size="M"
               quiet

From d11e0a8e62c7e53c914b128fe7722a7decaf2435 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 16:29:59 +0000
Subject: [PATCH 47/67] Remove testing components

---
 .../builder/src/components/common/bindings/BindingPanel.svelte  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 9a2a55cd9e..15cbec667a 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -32,7 +32,6 @@
   import { BindingHelpers } from "./utils"
   import formatHighlight from "json-format-highlight"
   import { capitalise } from "helpers"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { Utils } from "@budibase/frontend-core"
   import { get } from "svelte/store"
 
@@ -201,7 +200,6 @@
               {capitalise(tab)}
             </ActionButton>
           {/each}
-          <DrawerBindableInput />
         </div>
         <div class="side-tabs">
           {#each sideTabs as tab}

From 5010c4fe4ef69d4b846e5cb374f25c0991486b08 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 17:00:06 +0000
Subject: [PATCH 48/67] Improve handling of nullish expression to provide a
 more reliable match to the real evaluation

---
 .../common/bindings/BindingPanel.svelte       | 24 +++++++------------
 .../common/bindings/BindingSidePanel.svelte   |  2 +-
 .../bindings/EvaluationSidePanel.svelte       | 12 ++++++----
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 15cbec667a..2e4a7a63a8 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -12,13 +12,9 @@
     isValid,
     decodeJSBinding,
     encodeJSBinding,
-    convertToJS,
     processStringSync,
   } from "@budibase/string-templates"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "dataBinding"
+  import { readableToRuntimeBinding } from "dataBinding"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
   import {
     getHelperCompletions,
@@ -93,7 +89,8 @@
   }
 
   const getBindingValue = (binding, context) => {
-    const hbs = `{{ literal ${binding.runtimeBinding} }}`
+    const js = `return $("${binding.runtimeBinding}")`
+    const hbs = encodeJSBinding(js)
     const res = processStringSync(hbs, context)
     return JSON.stringify(res, null, 2)
   }
@@ -171,15 +168,6 @@
     updateValue(jsValue)
   }
 
-  const convert = () => {
-    const runtime = readableToRuntimeBinding(enrichedBindings, hbsValue)
-    const runtimeJs = encodeJSBinding(convertToJS(runtime))
-    jsValue = runtimeToReadableBinding(enrichedBindings, runtimeJs)
-    hbsValue = null
-    mode = "JavaScript"
-    onSelectBinding("", { forceJS: true })
-  }
-
   onMount(() => {
     valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
   })
@@ -296,7 +284,11 @@
           mode={editorMode}
         />
       {:else if sidePanel === SidePanels.Evaluation}
-        <EvaluationSidePanel {expressionResult} {evaluating} />
+        <EvaluationSidePanel
+          {expressionResult}
+          {evaluating}
+          expression={editorValue}
+        />
       {/if}
     </div>
   </div>
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index c5020afee7..87fcb7cb5b 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -71,7 +71,7 @@
   }
 
   const showBindingPopover = (binding, target) => {
-    if (!context) {
+    if (!context || !binding.value || binding.value === "") {
       return
     }
     stopHidingPopover()
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 3d80b05b07..37f9deda14 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -6,13 +6,17 @@
 
   export let expressionResult
   export let evaluating = false
+  export let expression = null
 
   $: error = expressionResult === "Error while executing JS"
-  $: empty = expressionResult == null || expressionResult === ""
+  $: empty = expression == null || expression?.trim() === ""
   $: success = !error && !empty
   $: highlightedResult = highlight(expressionResult)
 
   const highlight = json => {
+    if (json == null) {
+      return ""
+    }
     // Attempt to parse and then stringify, in case this is valid JSON
     try {
       json = JSON.stringify(JSON.parse(json), null, 2)
@@ -67,10 +71,10 @@
     </div>
   </div>
   <div class="body">
-    {#if expressionResult}
-      {@html highlightedResult}
-    {:else}
+    {#if empty}
       Your expression will be evaluated here
+    {:else}
+      {@html highlightedResult}
     {/if}
   </div>
 </div>

From e53676791a8d8b9dfd47759bb02242287ca3be7f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 17:04:01 +0000
Subject: [PATCH 49/67] Fix font size of code block in helper popovers

---
 .../src/components/common/bindings/BindingSidePanel.svelte    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 87fcb7cb5b..4815353cff 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -123,7 +123,6 @@
   maxHeight={480}
   dismissible={false}
   on:mouseenter={stopHidingPopover}
-  on:mouseleave={hidePopover}
 >
   <div class="binding-popover" class:helper={hoverTarget.helper}>
     {#if hoverTarget.description}
@@ -414,4 +413,7 @@
     padding: 0;
     margin: 0;
   }
+  .binding-popover.helper :global(code) {
+    font-size: 12px;
+  }
 </style>

From b159258fb5c814bb9c512973a73e9832c6682068 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 17:04:39 +0000
Subject: [PATCH 50/67] Restore mouse functionality

---
 .../src/components/common/bindings/BindingSidePanel.svelte       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 4815353cff..3a3c3c4034 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -123,6 +123,7 @@
   maxHeight={480}
   dismissible={false}
   on:mouseenter={stopHidingPopover}
+  on:mouseleave={hidePopover}
 >
   <div class="binding-popover" class:helper={hoverTarget.helper}>
     {#if hoverTarget.description}

From 3aed79ad03a5f36d1e9d0c7646dea82289e29365 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 19:08:29 +0000
Subject: [PATCH 51/67] Remove helpers subheading

---
 .../src/components/common/bindings/BindingSidePanel.svelte       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 3a3c3c4034..1595aed3b5 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -237,7 +237,6 @@
       {#if selectedCategory === "Helpers" || search}
         {#if filteredHelpers?.length}
           <div class="sub-section">
-            <div class="cat-heading">Helpers</div>
             <ul class="helpers">
               {#each filteredHelpers as helper}
                 <li

From 755ece13b62a40df1dccbb96934fea12b2f24bb1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 19:40:21 +0000
Subject: [PATCH 52/67] Lint, remove drawer modal border, bump account portal

---
 packages/account-portal                                         | 2 +-
 packages/bbui/src/Drawer/Drawer.svelte                          | 1 +
 packages/builder/src/components/common/CodeEditor/index.js      | 1 -
 .../builder/src/components/common/bindings/BindingPanel.svelte  | 2 --
 .../[application]/design/[screenId]/_components/AppPanel.svelte | 2 +-
 5 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/account-portal b/packages/account-portal
index 8c446c4ba3..19f7a5829f 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 8c446c4ba385592127fa31755d3b64467b291882
+Subproject commit 19f7a5829f4d23cbc694136e45d94482a59a475a
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 118a7dcd8e..606b4e28cd 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -211,6 +211,7 @@
     width: 70vw;
     bottom: 15vh;
     height: 70vh;
+    border: none;
   }
   .drawer.stacked {
     transform: translateY(calc(-1 * 1024px * (1 - var(--scale-factor))))
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 962e0bd393..82c8ddf647 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -1,4 +1,3 @@
-import { EditorView } from "@codemirror/view"
 import { getManifest } from "@budibase/string-templates"
 import sanitizeHtml from "sanitize-html"
 import { groupBy } from "lodash"
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 2e4a7a63a8..a3d57e1d5c 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -225,7 +225,6 @@
                 ...getHelperCompletions(editorMode),
               ]),
             ]}
-            height="100%"
             autofocus={autofocusEditor}
             placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
           />
@@ -242,7 +241,6 @@
             mode={EditorModes.JS}
             bind:getCaretPosition
             bind:insertAtPos
-            height="100%"
             autofocus={autofocusEditor}
             placeholder="Add bindings by typing $ or use the menu on the right"
           />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index c90c4ea599..4617814485 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -33,7 +33,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    padding: 9px var(--spacing-m);
+    padding: 9px 10px 12px 10px;
     position: relative;
     transition: width 360ms ease-out;
   }

From 10b5ab34cfa10cb1ad6c278879fc66b6815c6628 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 19:51:25 +0000
Subject: [PATCH 53/67] Re-add border for drawer modals

---
 packages/bbui/src/Drawer/Drawer.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 606b4e28cd..118a7dcd8e 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -211,7 +211,6 @@
     width: 70vw;
     bottom: 15vh;
     height: 70vh;
-    border: none;
   }
   .drawer.stacked {
     transform: translateY(calc(-1 * 1024px * (1 - var(--scale-factor))))

From d2cdee13aec50d912fea881cf90ad8562a38c088 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 20:18:20 +0000
Subject: [PATCH 54/67] Update automation code editors to work with new
 components

---
 .../SetupPanel/AutomationBlockSetup.svelte    | 24 ++++---------------
 .../common/CodeEditor/CodeEditor.svelte       | 15 ++++++++----
 .../common/bindings/BindingPanel.svelte       |  9 -------
 .../common/bindings/BindingSidePanel.svelte   |  6 ++---
 4 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 2434002d52..aff9e43aa7 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -547,7 +547,7 @@
           {:else if value.customType === "code"}
             <CodeEditorModal>
               <div class:js-editor={editingJs}>
-                <div class:js-code={editingJs} style="width: 100%">
+                <div class:js-code={editingJs} style="width:100%;height:500px;">
                   <CodeEditor
                     value={inputData[key]}
                     on:change={e => {
@@ -560,20 +560,10 @@
                     autocompleteEnabled={codeMode !== EditorModes.JS}
                     bind:getCaretPosition
                     bind:insertAtPos
-                    height={500}
+                    placeholder={codeMode === EditorModes.Handlebars
+                      ? "Add bindings by typing {{"
+                      : null}
                   />
-                  <div class="messaging">
-                    {#if codeMode === EditorModes.Handlebars}
-                      <Icon name="FlashOn" />
-                      <div class="messaging-wrap">
-                        <div>
-                          Add available bindings by typing <strong>
-                            &#125;&#125;
-                          </strong>
-                        </div>
-                      </div>
-                    {/if}
-                  </div>
                 </div>
                 {#if editingJs}
                   <div class="js-binding-picker">
@@ -650,11 +640,6 @@
     width: 320px;
   }
 
-  .messaging {
-    display: flex;
-    align-items: center;
-    margin-top: var(--spacing-xl);
-  }
   .fields {
     display: flex;
     flex-direction: column;
@@ -666,7 +651,6 @@
   .block-field {
     display: flex; /* Use Flexbox */
     justify-content: space-between;
-    align-items: center;
     flex-direction: row; /* Arrange label and field side by side */
     align-items: center; /* Align vertically in the center */
     gap: 10px; /* Add some space between label and field */
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 58942e5091..080476a9b7 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -47,7 +47,6 @@
 
   export let label
   export let completions = []
-  export let height = 200
   export let resize = "none"
   export let mode = EditorModes.Handlebars
   export let value = ""
@@ -241,8 +240,6 @@
     }
   }
 
-  $: editorHeight = typeof height === "number" ? `${height}px` : height
-
   // Init when all elements are ready
   $: if (mounted && !isEditorInitialised) {
     isEditorInitialised = true
@@ -284,14 +281,22 @@
 
 <style>
   /* Editor */
+  .code-editor {
+    font-size: 12px;
+    height: 100%;
+  }
   .code-editor :global(.cm-editor) {
+    height: 100%;
     background: var(--spectrum-global-color-gray-50) !important;
+    outline: none;
+    border: none;
+    border-radius: 0;
   }
   .code-editor :global(.cm-content) {
     padding: 10px 0;
   }
-  .code-editor {
-    font-size: 12px;
+  .code-editor > div {
+    height: 100%;
   }
 
   /* Active line */
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index a3d57e1d5c..b40ce1aa6a 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -344,15 +344,6 @@
     height: 0;
     position: relative;
   }
-  .editor :global(.code-editor),
-  .editor :global(.code-editor > div),
-  .editor :global(.cm-editor) {
-    height: 100%;
-  }
-  .editor :global(.cm-editor) {
-    border: none;
-    border-radius: 0;
-  }
 
   /* Overlay */
   .mode-overlay {
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 1595aed3b5..d51e30afa7 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -362,15 +362,15 @@
     padding: var(--spacing-m);
     border-radius: 4px;
     background-color: var(--spectrum-global-color-gray-200);
-    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
-      border-color 130ms ease-in-out;
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
     word-wrap: break-word;
   }
   li:not(:last-of-type) {
     margin-bottom: var(--spacing-s);
   }
   li :global(*) {
-    transition: color 130ms ease-in-out;
+    transition: color 130ms ease-out;
   }
   li:hover {
     color: var(--spectrum-global-color-gray-900);

From 245670f585e41983514b14ef011b8dd64efe0b47 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 20:22:48 +0000
Subject: [PATCH 55/67] Ignore more svelte 4 warnings

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte          | 1 -
 .../src/components/common/bindings/BindingSidePanel.svelte     | 3 +++
 .../src/components/common/bindings/EvaluationSidePanel.svelte  | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index aff9e43aa7..7fa2401c88 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -12,7 +12,6 @@
     Drawer,
     Modal,
     notifications,
-    Icon,
     Checkbox,
     DatePicker,
   } from "@budibase/bbui"
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index d51e30afa7..d990451005 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -139,6 +139,9 @@
   </div>
 </Popover>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="binding-side-panel">
   <Layout noPadding gap="S">
     {#if selectedCategory}
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 37f9deda14..82c3f80a6f 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -74,6 +74,7 @@
     {#if empty}
       Your expression will be evaluated here
     {:else}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
       {@html highlightedResult}
     {/if}
   </div>

From c138cbeba29527141fcd7091068ca22eebe8b0b9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 1 Mar 2024 10:28:53 +0000
Subject: [PATCH 56/67] Update drawer transitions and styles as they were
 broken with svelte 4 update

---
 packages/bbui/src/Drawer/Drawer.svelte | 42 ++++++++++++++++++--------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 118a7dcd8e..757f86b471 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -61,7 +61,6 @@
   import Button from "../Button/Button.svelte"
   import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
-  import { fade } from "svelte/transition"
 
   export let title
   export let forceModal = false
@@ -130,7 +129,7 @@
 
   // Use a custom svelte transition here because the built-in slide
   // transition has a horrible overshoot
-  const slide = () => {
+  const drawerSlide = () => {
     return {
       duration: 260,
       css: t => {
@@ -138,12 +137,23 @@
         const yOffset = (1 - f) * 200
         return `
           transform: translateY(calc(${yOffset}px - 800px * (1 - var(--scale-factor))));
-          opacity:${f};
+          opacity: ${f};
         `
       },
     }
   }
 
+  // Custom fade transition because the default svelte one doesn't work any more
+  // with svelte 4
+  const drawerFade = () => {
+    return {
+      duration: 260,
+      css: t => {
+        return `opacity: ${easeInOutQuad(t)};`
+      },
+    }
+  }
+
   const getScaleFactor = depth => {
     // Quadratic function approaching a limit of 1 as depth tends to infinity
     const lim = 1 - 1 / (depth * depth + 1)
@@ -161,14 +171,16 @@
 {#if visible}
   <Portal target=".modal-container">
     <div class="drawer-container">
-      {#if $modal}
-        <div transition:fade={{ duration: 260 }} class="underlay" />
-      {/if}
+      <div
+        class="underlay"
+        class:hidden={!$modal}
+        transition:drawerFade|local
+      />
       <div
         class="drawer"
         class:stacked={depth > 0}
         class:modal={$modal}
-        transition:slide|local
+        transition:drawerSlide|local
         {style}
       >
         <header>
@@ -179,9 +191,7 @@
           </div>
         </header>
         <slot name="body" />
-        {#if !$modal && depth > 0}
-          <div class="overlay" transition:fade|local={{ duration: 260 }} />
-        {/if}
+        <div class="overlay" class:hidden={$modal || depth === 0} />
       </div>
     </div>
   </Portal>
@@ -223,17 +233,23 @@
     left: 0;
     width: 100%;
     height: 100%;
-    transition: opacity 360ms ease-out;
     z-index: 999;
-    opacity: 0.5;
+    display: block;
+    transition: opacity 260ms ease-out;
   }
   .overlay {
     position: absolute;
     background: var(--background);
+    opacity: 0.5;
   }
   .underlay {
     position: fixed;
-    background: var(--modal-background, rgba(0, 0, 0, 0.75));
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .underlay.hidden,
+  .overlay.hidden {
+    opacity: 0 !important;
+    pointer-events: none;
   }
 
   header {

From 97375d1a330a4cfd12953097bc96c037a778c262 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Mar 2024 11:54:39 +0000
Subject: [PATCH 57/67] Fallback to binding example syntax for code-mirror
 popover plugin when no context exists

---
 .../src/components/common/CodeEditor/CodeEditor.svelte        | 4 ++--
 packages/builder/src/components/common/CodeEditor/index.js    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 080476a9b7..88661467be 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -174,7 +174,7 @@
       complete.push(
         autocompletion({
           override: [...completions],
-          closeOnBlur: false,
+          closeOnBlur: true,
           icons: false,
           optionClass: () => "autocomplete-option",
         })
@@ -462,7 +462,7 @@
     overflow: hidden;
     max-height: 480px;
   }
-  .code-editor :global(.binding__example.helper) {
+  .code-editor :global(.binding__example) {
     color: var(--spectrum-global-color-blue-700);
   }
   .code-editor :global(.binding__example span) {
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 82c8ddf647..bd55c371e6 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -166,7 +166,7 @@ export const buildBindingInfoNode = (completion, binding) => {
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
 
-  if (binding.valueHTML) {
+  if (binding.value != null && binding.valueHTML) {
     ele.innerHTML = `<div class="binding__example">${binding.valueHTML}</div>`
     return ele
   }

From 428fdfcc0a00cb297460bb1cdda6f8cad5b309db Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Mar 2024 12:10:50 +0000
Subject: [PATCH 58/67] Handle errors when stringifying component context in
 case there somehow is a cyclical reference which is unserialisable

---
 packages/client/src/index.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 5886128396..1ce7101466 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -87,8 +87,14 @@ const loadBudibase = async () => {
     } else if (type === "request-context") {
       const { selectedComponentInstance } = get(componentStore)
       const context = selectedComponentInstance?.getDataContext()
+      let stringifiedContext = null
+      try {
+        stringifiedContext = JSON.stringify(context)
+      } catch (error) {
+        // Ignore - invalid context
+      }
       eventStore.actions.dispatchEvent("provide-context", {
-        context: JSON.stringify(context),
+        context: stringifiedContext,
       })
     } else if (type === "hover-component") {
       hoverStore.actions.hoverComponent(data)

From 7d1af03e6229da709d24845fc641b2ddb9340e44 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 09:32:52 +0000
Subject: [PATCH 59/67] Merge

---
 .../src/components/common/bindings/BindingPanel.svelte      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index b40ce1aa6a..e8578fee83 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -77,6 +77,12 @@
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: requestUpdateEvaluation(runtimeExpression, context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
+  $: {
+    // Ensure a valid side panel option is always selected
+    if (sidePanel && !sidePanelOptions.includes(sidePanel)) {
+      sidePanel = sidePanelOptions[0]
+    }
+  }
 
   const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
     expressionResult = processStringSync(expression || "", context)

From 10c5eee87e891149fb5e51fd71d24866f6432f58 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 11:00:04 +0000
Subject: [PATCH 60/67] Fix existing issue where command palette sits behinds
 modals

---
 packages/bbui/src/Modal/Modal.svelte                      | 8 ++++++--
 .../src/components/common/bindings/BindingPanel.svelte    | 6 ------
 .../src/pages/builder/app/[application]/_layout.svelte    | 2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index f891d0584d..be9c338892 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -10,6 +10,7 @@
   export let inline = false
   export let disableCancel = false
   export let autoFocus = true
+  export let zIndex = 999
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
@@ -101,7 +102,11 @@
   <Portal target=".modal-container">
     {#if visible}
       <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
+      <div
+        class="spectrum-Underlay is-open"
+        on:mousedown|self={cancel}
+        style="z-index:{zIndex || 999}"
+      >
         <div
           class="background"
           in:fade={{ duration: 200 }}
@@ -132,7 +137,6 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    z-index: 999;
     overflow: auto;
     overflow-x: hidden;
     background: transparent;
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index e8578fee83..b40ce1aa6a 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -77,12 +77,6 @@
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: requestUpdateEvaluation(runtimeExpression, context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
-  $: {
-    // Ensure a valid side panel option is always selected
-    if (sidePanel && !sidePanelOptions.includes(sidePanel)) {
-      sidePanel = sidePanelOptions[0]
-    }
-  }
 
   const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
     expressionResult = processStringSync(expression || "", context)
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 16a1adadee..45b10d3d9e 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -188,7 +188,7 @@
 {/if}
 
 <svelte:window on:keydown={handleKeyDown} />
-<Modal bind:this={commandPaletteModal}>
+<Modal bind:this={commandPaletteModal} zIndex={999999}>
   <CommandPalette />
 </Modal>
 

From 7e724e8d8bd60f99978b23ec57ba523edd1f1440 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 11:45:11 +0000
Subject: [PATCH 61/67] Update binding side panel to show readable bindings and
 real values

---
 .../common/bindings/BindingPanel.svelte       |  2 +-
 .../common/bindings/BindingSidePanel.svelte   | 29 ++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index b40ce1aa6a..e8ad96ea69 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -279,7 +279,7 @@
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
-          mode={editorMode}
+          js={editorMode === EditorModes.JS}
         />
       {:else if sidePanel === SidePanels.Evaluation}
         <EvaluationSidePanel
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index d990451005..36e5e8e05e 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -7,7 +7,7 @@
   export let addHelper
   export let addBinding
   export let bindings
-  export let mode
+  export let js
   export let allowHelpers
   export let context = null
 
@@ -47,7 +47,7 @@
       (!search ||
         helper.label.match(searchRgx) ||
         helper.description.match(searchRgx)) &&
-      (mode.name !== "javascript" || helper.allowsJs)
+      (!js || helper.allowsJs)
     )
   })
 
@@ -71,14 +71,16 @@
   }
 
   const showBindingPopover = (binding, target) => {
+    let code = binding.valueHTML
     if (!context || !binding.value || binding.value === "") {
-      return
+      code = null
     }
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {
       helper: false,
-      code: binding.valueHTML,
+      code,
+      binding: binding.readableBinding,
     }
     popover.show()
   }
@@ -92,7 +94,7 @@
     hoverTarget = {
       helper: true,
       description: helper.description,
-      code: getHelperExample(helper, mode.name === "javascript"),
+      code: getHelperExample(helper, js),
     }
     popover.show()
   }
@@ -112,6 +114,15 @@
       hideTimeout = null
     }
   }
+
+  const getReadableBindingLabel = readableBinding => {
+    console.log(js)
+    if (js) {
+      return `$("${readableBinding}")`
+    } else {
+      return `{{ ${readableBinding} }}`
+    }
+  }
 </script>
 
 <Popover
@@ -126,6 +137,9 @@
   on:mouseleave={hidePopover}
 >
   <div class="binding-popover" class:helper={hoverTarget.helper}>
+    {#if hoverTarget.binding}
+      <pre class="binding">{getReadableBindingLabel(hoverTarget.binding)}</pre>
+    {/if}
     {#if hoverTarget.description}
       <div>
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
@@ -246,7 +260,7 @@
                   class="binding"
                   on:mouseenter={e => showHelperPopover(helper, e.target)}
                   on:mouseleave={hidePopover}
-                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                  on:click={() => addHelper(helper, js)}
                 >
                   <span class="binding__label">{helper.displayText}</span>
                   <span class="binding__typeWrap">
@@ -404,7 +418,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .binding-popover.helper pre {
+  .binding-popover.helper pre,
+  .binding-popover pre.binding {
     color: var(--spectrum-global-color-blue-700);
   }
   .binding-popover pre :global(span) {

From 07ea080ab888a50cd983c32da63b8b1ec762ab99 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 12:07:25 +0000
Subject: [PATCH 62/67] Update binding popovers to remove example bindings and
 therefore make consistent across the board

---
 .../common/CodeEditor/CodeEditor.svelte       |  5 ++--
 .../src/components/common/CodeEditor/index.js | 22 +++-----------
 .../common/bindings/BindingPanel.svelte       |  7 ++++-
 .../common/bindings/BindingSidePanel.svelte   | 29 +++++--------------
 4 files changed, 19 insertions(+), 44 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 88661467be..5d9b84fde5 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -47,7 +47,6 @@
 
   export let label
   export let completions = []
-  export let resize = "none"
   export let mode = EditorModes.Handlebars
   export let value = ""
   export let placeholder = null
@@ -55,6 +54,8 @@
   export let autofocus = false
   export let jsBindingWrapping = true
 
+  const dispatch = createEventDispatcher()
+
   // Export a function to expose caret position
   export const getCaretPosition = () => {
     const selection_range = editor.state.selection.ranges[0]
@@ -106,8 +107,6 @@
     }
   )
 
-  const dispatch = createEventDispatcher()
-
   // Theming!
   let currentTheme = $themeStore?.theme
   let isDark = !currentTheme.includes("light")
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index bd55c371e6..c104267aa4 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -163,26 +163,12 @@ export const jsAutocomplete = baseCompletions => {
 }
 
 export const buildBindingInfoNode = (completion, binding) => {
+  if (!binding.valueHTML || binding.value == null) {
+    return null
+  }
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
-
-  if (binding.value != null && binding.valueHTML) {
-    ele.innerHTML = `<div class="binding__example">${binding.valueHTML}</div>`
-    return ele
-  }
-
-  const exampleNodeHtml = binding.readableBinding
-    ? `<div class="binding__example">{{ ${binding.readableBinding} }}</div>`
-    : ""
-
-  const descriptionNodeHtml = binding.description
-    ? `<div class="binding__description">${binding.description}</div>`
-    : ""
-
-  ele.innerHTML = `
-    ${exampleNodeHtml}
-    ${descriptionNodeHtml}
-  `
+  ele.innerHTML = `<div class="binding__example">${binding.valueHTML}</div>`
   return ele
 }
 
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index e8ad96ea69..9543c97791 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -108,6 +108,9 @@
 
   const enrichBindings = (bindings, context) => {
     return bindings.map(binding => {
+      if (!context) {
+        return binding
+      }
       const value = getBindingValue(binding, context)
       return {
         ...binding,
@@ -227,6 +230,7 @@
             ]}
             autofocus={autofocusEditor}
             placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
+            jsBindingWrapping={false}
           />
         {:else if mode === Modes.JavaScript}
           <CodeEditor
@@ -243,6 +247,7 @@
             bind:insertAtPos
             autofocus={autofocusEditor}
             placeholder="Add bindings by typing $ or use the menu on the right"
+            jsBindingWrapping
           />
         {/if}
         {#if targetMode}
@@ -279,7 +284,7 @@
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
-          js={editorMode === EditorModes.JS}
+          {mode}
         />
       {:else if sidePanel === SidePanels.Evaluation}
         <EvaluationSidePanel
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 36e5e8e05e..d990451005 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -7,7 +7,7 @@
   export let addHelper
   export let addBinding
   export let bindings
-  export let js
+  export let mode
   export let allowHelpers
   export let context = null
 
@@ -47,7 +47,7 @@
       (!search ||
         helper.label.match(searchRgx) ||
         helper.description.match(searchRgx)) &&
-      (!js || helper.allowsJs)
+      (mode.name !== "javascript" || helper.allowsJs)
     )
   })
 
@@ -71,16 +71,14 @@
   }
 
   const showBindingPopover = (binding, target) => {
-    let code = binding.valueHTML
     if (!context || !binding.value || binding.value === "") {
-      code = null
+      return
     }
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {
       helper: false,
-      code,
-      binding: binding.readableBinding,
+      code: binding.valueHTML,
     }
     popover.show()
   }
@@ -94,7 +92,7 @@
     hoverTarget = {
       helper: true,
       description: helper.description,
-      code: getHelperExample(helper, js),
+      code: getHelperExample(helper, mode.name === "javascript"),
     }
     popover.show()
   }
@@ -114,15 +112,6 @@
       hideTimeout = null
     }
   }
-
-  const getReadableBindingLabel = readableBinding => {
-    console.log(js)
-    if (js) {
-      return `$("${readableBinding}")`
-    } else {
-      return `{{ ${readableBinding} }}`
-    }
-  }
 </script>
 
 <Popover
@@ -137,9 +126,6 @@
   on:mouseleave={hidePopover}
 >
   <div class="binding-popover" class:helper={hoverTarget.helper}>
-    {#if hoverTarget.binding}
-      <pre class="binding">{getReadableBindingLabel(hoverTarget.binding)}</pre>
-    {/if}
     {#if hoverTarget.description}
       <div>
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
@@ -260,7 +246,7 @@
                   class="binding"
                   on:mouseenter={e => showHelperPopover(helper, e.target)}
                   on:mouseleave={hidePopover}
-                  on:click={() => addHelper(helper, js)}
+                  on:click={() => addHelper(helper, mode.name === "javascript")}
                 >
                   <span class="binding__label">{helper.displayText}</span>
                   <span class="binding__typeWrap">
@@ -418,8 +404,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .binding-popover.helper pre,
-  .binding-popover pre.binding {
+  .binding-popover.helper pre {
     color: var(--spectrum-global-color-blue-700);
   }
   .binding-popover pre :global(span) {

From a3b1062d09c12cc4ae5ed38754ca33b72e19cd0b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 13:18:53 +0000
Subject: [PATCH 63/67] Fix existing issue of CodeEditor completions not being
 reactive and allow saving invalid HBS bindings

---
 .../common/bindings/BindingPanel.svelte       | 68 ++++++++++---------
 .../common/bindings/ClientBindingPanel.svelte |  2 -
 .../bindings/DrawerBindableCombobox.svelte    |  6 +-
 .../bindings/DrawerBindableInput.svelte       |  6 +-
 .../common/bindings/DrawerBindableSlot.svelte |  6 +-
 .../common/bindings/ServerBindingPanel.svelte |  2 -
 .../DataSourceSelect/DataSourceSelect.svelte  |  6 +-
 7 files changed, 41 insertions(+), 55 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 9543c97791..1872ee2e5f 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -77,6 +77,18 @@
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: requestUpdateEvaluation(runtimeExpression, context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
+  $: hbsCompletions = [
+    hbAutocomplete([
+      ...bindingCompletions,
+      ...getHelperCompletions(EditorModes.Handlebars),
+    ]),
+  ]
+  $: jsCompletions = [
+    jsAutocomplete([
+      ...bindingCompletions,
+      ...getHelperCompletions(EditorModes.JS),
+    ]),
+  ]
 
   const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
     expressionResult = processStringSync(expression || "", context)
@@ -217,38 +229,32 @@
       </div>
       <div class="editor">
         {#if mode === Modes.Text}
-          <CodeEditor
-            value={hbsValue}
-            on:change={onChangeHBSValue}
-            bind:getCaretPosition
-            bind:insertAtPos
-            completions={[
-              hbAutocomplete([
-                ...bindingCompletions,
-                ...getHelperCompletions(editorMode),
-              ]),
-            ]}
-            autofocus={autofocusEditor}
-            placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
-            jsBindingWrapping={false}
-          />
+          {#key hbsCompletions}
+            <CodeEditor
+              value={hbsValue}
+              on:change={onChangeHBSValue}
+              bind:getCaretPosition
+              bind:insertAtPos
+              completions={hbsCompletions}
+              autofocus={autofocusEditor}
+              placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
+              jsBindingWrapping={false}
+            />
+          {/key}
         {:else if mode === Modes.JavaScript}
-          <CodeEditor
-            value={decodeJSBinding(jsValue)}
-            on:change={onChangeJSValue}
-            completions={[
-              jsAutocomplete([
-                ...bindingCompletions,
-                ...getHelperCompletions(editorMode),
-              ]),
-            ]}
-            mode={EditorModes.JS}
-            bind:getCaretPosition
-            bind:insertAtPos
-            autofocus={autofocusEditor}
-            placeholder="Add bindings by typing $ or use the menu on the right"
-            jsBindingWrapping
-          />
+          {#key jsCompletions}
+            <CodeEditor
+              value={decodeJSBinding(jsValue)}
+              on:change={onChangeJSValue}
+              completions={jsCompletions}
+              mode={EditorModes.JS}
+              bind:getCaretPosition
+              bind:insertAtPos
+              autofocus={autofocusEditor}
+              placeholder="Add bindings by typing $ or use the menu on the right"
+              jsBindingWrapping
+            />
+          {/key}
         {/if}
         {#if targetMode}
           <div class="mode-overlay">
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 97cb097a51..843dec8c89 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -4,7 +4,6 @@
   import { onMount } from "svelte"
 
   export let bindings = []
-  export let valid
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
@@ -27,7 +26,6 @@
 </script>
 
 <BindingPanel
-  bind:valid
   bindings={enrichedBindings}
   context={$previewStore.selectedComponentContext}
   {value}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index 36f297bb92..7a1a480bc0 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -22,7 +22,6 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  let valid = true
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
@@ -80,15 +79,12 @@
 </div>
 
 <Drawer bind:this={bindingDrawer} title={title ?? placeholder ?? "Bindings"}>
-  <Button cta slot="buttons" on:click={handleClose} disabled={!valid}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
     value={readableValue}
     close={handleClose}
-    bind:valid
     on:change={event => (tempValue = event.detail)}
     {bindings}
     {allowJS}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 12aa4edf2e..d11ebcf87a 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -28,7 +28,6 @@
   const dispatch = createEventDispatcher()
 
   let bindingDrawer
-  let valid = true
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -93,13 +92,10 @@
   title={title ?? placeholder ?? "Bindings"}
   {forceModal}
 >
-  <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
-    bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index 84045e786a..8ce9dda209 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -25,7 +25,6 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  let valid = true
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -176,13 +175,10 @@
   title={title ?? placeholder ?? "Bindings"}
   left={drawerLeft}
 >
-  <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
-    bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index fdc8254a18..5718d080f2 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -2,7 +2,6 @@
   import BindingPanel from "./BindingPanel.svelte"
 
   export let bindings = []
-  export let valid
   export let value = ""
   export let allowJS = false
   export let context = null
@@ -20,7 +19,6 @@
 </script>
 
 <BindingPanel
-  bind:valid
   bindings={enrichedBindings}
   {value}
   {allowJS}
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index 0e01c264fc..bf0aa75bed 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
@@ -48,7 +48,6 @@
   let drawer
   let tmpQueryParams
   let tmpCustomData
-  let customDataValid = true
   let modal
 
   $: text = value?.label ?? "Choose an option"
@@ -267,14 +266,11 @@
     <Drawer title="Custom data" bind:this={drawer}>
       <div slot="buttons" style="display:contents">
         <Button primary on:click={promptForCSV}>Load CSV</Button>
-        <Button cta on:click={saveCustomData} disabled={!customDataValid}>
-          Save
-        </Button>
+        <Button cta on:click={saveCustomData}>Save</Button>
       </div>
       <div slot="description">Provide a JSON array to use as data</div>
       <ClientBindingPanel
         slot="body"
-        bind:valid={customDataValid}
         value={tmpCustomData}
         on:change={event => (tmpCustomData = event.detail)}
         {bindings}

From bb953d3bc4f7e664beaf5c1c779cd1c54a8c5fe1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 13:32:27 +0000
Subject: [PATCH 64/67] Shorten duplicate key value

---
 packages/client/src/components/Component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index e7024ac17f..3d267ec623 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -592,7 +592,7 @@
           component: instance._component,
           getSettings: () => cachedSettings,
           getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
-          getDataContext: getDataContext,
+          getDataContext,
           reload: () => initialise(instance, true),
           setEphemeralStyles: styles => (ephemeralStyles = styles),
           state: store,

From 20c8191323598a6d65c8664d697d4cc2b7cf1696 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 14:00:42 +0000
Subject: [PATCH 65/67] Fix bgu

---
 .../builder/src/components/common/bindings/BindingPanel.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 1872ee2e5f..327a2b5eda 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -290,7 +290,7 @@
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
-          {mode}
+          mode={editorMode}
         />
       {:else if sidePanel === SidePanels.Evaluation}
         <EvaluationSidePanel

From a806dff3f4add6d246c550a635a870e04e5dcd27 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 16:18:37 +0000
Subject: [PATCH 66/67] Remove concept of validity from binding panel and
 allowing saving anything

---
 .../components/common/bindings/BindingPanel.svelte  | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 327a2b5eda..d0f88f8029 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -9,7 +9,6 @@
   } from "@budibase/bbui"
   import { createEventDispatcher, getContext, onMount } from "svelte"
   import {
-    isValid,
     decodeJSBinding,
     encodeJSBinding,
     processStringSync,
@@ -35,7 +34,6 @@
 
   export let bindings
   export let value = ""
-  export let valid
   export let allowJS = false
   export let allowHelpers = true
   export let context = null
@@ -134,11 +132,8 @@
 
   const updateValue = val => {
     const runtimeExpression = readableToRuntimeBinding(enrichedBindings, val)
-    valid = isValid(runtimeExpression)
-    if (valid) {
-      dispatch("change", val)
-      requestUpdateEvaluation(runtimeExpression, context)
-    }
+    dispatch("change", val)
+    requestUpdateEvaluation(runtimeExpression, context)
   }
 
   const onSelectHelper = (helper, js) => {
@@ -182,10 +177,6 @@
     jsValue = encodeJSBinding(e.detail)
     updateValue(jsValue)
   }
-
-  onMount(() => {
-    valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
-  })
 </script>
 
 <DrawerContent padding={false}>

From 8eee45b44ac4035b91d8f54e2082d2bafbd7a6e5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 10:23:52 +0000
Subject: [PATCH 67/67] Lint

---
 .../builder/src/components/common/bindings/BindingPanel.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index d0f88f8029..aa765c03f6 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -7,7 +7,7 @@
     Body,
     Button,
   } from "@budibase/bbui"
-  import { createEventDispatcher, getContext, onMount } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
   import {
     decodeJSBinding,
     encodeJSBinding,