From 1e0938e93e2650e70764d309a1ba07251e415836 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 13 Jan 2025 16:09:01 +0000
Subject: [PATCH 01/81] Add dummy action buttons for new panels

---
 .../design/[screenId]/_components/AppPanel.svelte  | 12 ++++++++++--
 .../[screenId]/_components/BindingsPanel.svelte    | 14 ++++++++++++++
 .../[screenId]/_components/StatePanel.svelte       | 14 ++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte

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 29e2ce03ff..3df2332543 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
@@ -3,6 +3,9 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
+  import { ActionButton } from "@budibase/bbui"
+  import BindingsPanel from "./BindingsPanel.svelte"
+  import StatePanel from "./StatePanel.svelte"
 </script>
 
 <div class="app-panel">
@@ -10,12 +13,14 @@
   <div class="header">
     <div class="header-left">
       <UndoRedoControl store={screenStore.history} />
-    </div>
-    <div class="header-right">
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
     </div>
+    <div class="header-right">
+      <BindingsPanel />
+      <StatePanel />
+    </div>
   </div>
   <div class="content">
     {#key $appStore.version}
@@ -50,6 +55,9 @@
     margin-bottom: 9px;
   }
 
+  .header-left {
+    display: flex;
+  }
   .header-left :global(div) {
     border-right: none;
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
new file mode 100644
index 0000000000..73cac27331
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+
+  let visible = false
+  let modal
+</script>
+
+<ActionButton on:click={modal.show}>Bindings</ActionButton>
+
+<Modal bind:this={modal}>
+  <ModalContent title="Bindings" showConfirmButton={false} cancelText="Close">
+    Some awesome bindings content.
+  </ModalContent>
+</Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
new file mode 100644
index 0000000000..5212f243af
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+
+  let visible = false
+  let modal
+</script>
+
+<ActionButton on:click={modal.show}>State</ActionButton>
+
+<Modal bind:this={modal}>
+  <ModalContent title="State" showConfirmButton={false} cancelText="Close">
+    Some awesome state content.
+  </ModalContent>
+</Modal>

From 99537ae93d982b96d53fccb66d368cd026c3ac97 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 14 Jan 2025 15:06:17 +0000
Subject: [PATCH 02/81] Find components with state vars and allow user to
 select

---
 .../[screenId]/_components/StatePanel.svelte  | 147 +++++++++++++++++-
 1 file changed, 142 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 5212f243af..a98b03b0c2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,14 +1,151 @@
-<script>
-  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+<script lang="ts">
+  import { ActionButton, Modal, ModalContent, Combobox } from "@budibase/bbui"
+  import { getAllStateVariables } from "@/dataBinding"
+  import { appStore, selectedComponent, componentStore } from "@/stores/builder"
+  import {
+    decodeJSBinding,
+    findHBSBlocks,
+    isJSBinding,
+  } from "@budibase/string-templates"
 
-  let visible = false
-  let modal
+  let modal: Modal
+  let selectedKey = ""
+  let stateValue = ""
+  let componentsUsingState: Array<{ id: string; name: string }> = []
+  const keyOptions = getAllStateVariables()
+
+  function findComponentsUsingState(
+    component: any,
+    stateKey: string
+  ): Array<{ id: string; name: string }> {
+    let componentsUsingState: Array<{ id: string; name: string }> = []
+
+    const { _children, ...componentWithoutChildren } = component
+    const componentStr = JSON.stringify(componentWithoutChildren)
+
+    const bindings = findHBSBlocks(componentStr).map(binding => {
+      let sanitizedBinding = binding.replace(/\\"/g, '"')
+      if (isJSBinding(sanitizedBinding)) {
+        return decodeJSBinding(sanitizedBinding)
+      } else {
+        return sanitizedBinding
+      }
+    })
+    const bindingString = bindings.join(" ")
+
+    if (bindingString.includes(stateKey)) {
+      componentsUsingState.push({
+        id: component._id,
+        name: component._instanceName || "Unnamed Component",
+      })
+    }
+
+    if (_children) {
+      for (let child of _children) {
+        componentsUsingState = [
+          ...componentsUsingState,
+          ...findComponentsUsingState(child, stateKey),
+        ]
+      }
+    }
+
+    return componentsUsingState
+  }
+
+  function handleKeySelect(event: CustomEvent) {
+    selectedKey = event.detail
+    const localStorageKey = `${$appStore.appId}.state`
+    const state = JSON.parse(localStorage.getItem(localStorageKey) || "{}")
+    stateValue = state[selectedKey]
+
+    if ($selectedComponent) {
+      componentsUsingState = findComponentsUsingState(
+        $selectedComponent,
+        selectedKey
+      )
+    }
+  }
 </script>
 
 <ActionButton on:click={modal.show}>State</ActionButton>
 
 <Modal bind:this={modal}>
   <ModalContent title="State" showConfirmButton={false} cancelText="Close">
-    Some awesome state content.
+    <Combobox options={keyOptions} on:change={handleKeySelect} />
+    <div class="state-value helper">
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      <pre>{@html JSON.stringify(stateValue, null, 2)}</pre>
+    </div>
+    {#if componentsUsingState.length > 0}
+      <div class="components-list">
+        <h4>Components using this state:</h4>
+        {#each componentsUsingState as component}
+          <button
+            class="component-link"
+            on:click={() => componentStore.select(component.id)}
+          >
+            {component.name}
+          </button>
+        {/each}
+      </div>
+    {/if}
   </ModalContent>
 </Modal>
+
+<style>
+  .state-value {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    padding: var(--spacing-m);
+    background-color: var(--spectrum-global-color-gray-50);
+  }
+  .state-value pre {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    white-space: pre;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .state-value.helper pre {
+    color: var(--spectrum-global-color-blue-700);
+  }
+  .state-value pre :global(span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+  .state-value :global(p) {
+    padding: 0;
+    margin: 0;
+  }
+  .state-value.helper :global(code) {
+    font-size: 12px;
+  }
+  .components-list {
+    margin-top: var(--spacing-m);
+    padding: var(--spacing-m);
+    background-color: var(--spectrum-global-color-gray-50);
+  }
+  .components-list h4 {
+    margin: 0 0 var(--spacing-s) 0;
+    font-size: 14px;
+  }
+  .component-link {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: var(--spacing-xs) var(--spacing-s);
+    margin: 2px 0;
+    border: none;
+    background: none;
+    color: var(--spectrum-global-color-blue-700);
+    cursor: pointer;
+    font-size: 12px;
+  }
+  .component-link:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    border-radius: 4px;
+  }
+</style>

From cc765ef6b44e38ed5e7f82faae7a886b0726a3c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 14 Jan 2025 15:44:10 +0000
Subject: [PATCH 03/81] Use global context when requesting client context and
 no component is selected

---
 packages/client/src/constants.js         | 1 +
 packages/client/src/index.js             | 6 ++++--
 packages/client/src/stores/components.js | 3 ++-
 packages/client/src/stores/screens.js    | 6 +++---
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index f7e3e86d40..a3d06fd48f 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -15,6 +15,7 @@ export const ActionTypes = {
 
 export const DNDPlaceholderID = "dnd-placeholder"
 export const ScreenslotType = "screenslot"
+export const ScreenslotID = "screenslot"
 export const GridRowHeight = 24
 export const GridColumns = 12
 export const GridSpacing = 4
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 9cef52bb1e..e3f5c34d3e 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -86,8 +86,10 @@ const loadBudibase = async () => {
         dndStore.actions.reset()
       }
     } else if (type === "request-context") {
-      const { selectedComponentInstance } = get(componentStore)
-      const context = selectedComponentInstance?.getDataContext()
+      const { selectedComponentInstance, screenslotInstance } =
+        get(componentStore)
+      const instance = selectedComponentInstance || screenslotInstance
+      const context = instance?.getDataContext()
       let stringifiedContext = null
       try {
         stringifiedContext = JSON.stringify(context)
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index d4afa6c7f1..8a8f82883d 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -6,7 +6,7 @@ import { screenStore } from "./screens"
 import { builderStore } from "./builder"
 import Router from "../components/Router.svelte"
 import * as AppComponents from "../components/app/index.js"
-import { ScreenslotType } from "../constants.js"
+import { ScreenslotID, ScreenslotType } from "../constants.js"
 
 export const BudibasePrefix = "@budibase/standard-components/"
 
@@ -43,6 +43,7 @@ const createComponentStore = () => {
         selectedComponentDefinition: definition,
         selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
+        screenslotInstance: $store.mountedComponents[ScreenslotID],
       }
     }
   )
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index bc87216660..7261ca375a 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -7,7 +7,7 @@ import { dndIndex, dndParent, dndIsNewComponent, dndBounds } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
-import { DNDPlaceholderID } from "constants"
+import { DNDPlaceholderID, ScreenslotID, ScreenslotType } from "constants"
 
 const createScreenStore = () => {
   const store = derived(
@@ -163,8 +163,8 @@ const createScreenStore = () => {
             _component: "@budibase/standard-components/layout",
             _children: [
               {
-                _component: "screenslot",
-                _id: "screenslot",
+                _component: ScreenslotType,
+                _id: ScreenslotID,
                 _styles: {
                   normal: {
                     flex: "1 1 auto",

From 7bd718b0d9005f4c84a8711de075fda46fb95215 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Jan 2025 09:53:27 +0000
Subject: [PATCH 04/81] work to highlight setting when selected

---
 .../[screenId]/_components/StatePanel.svelte  | 114 +++++++++---------
 1 file changed, 56 insertions(+), 58 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index a98b03b0c2..d3c579441b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import { ActionButton, Modal, ModalContent, Combobox } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
-  import { appStore, selectedComponent, componentStore } from "@/stores/builder"
+  import {
+    componentStore,
+    selectedScreen,
+    builderStore,
+  } from "@/stores/builder"
   import {
     decodeJSBinding,
     findHBSBlocks,
@@ -10,33 +14,50 @@
 
   let modal: Modal
   let selectedKey = ""
-  let stateValue = ""
-  let componentsUsingState: Array<{ id: string; name: string }> = []
+  let componentsUsingState: Array<{
+    id: string
+    name: string
+    settings: string[]
+  }> = []
   const keyOptions = getAllStateVariables()
 
   function findComponentsUsingState(
     component: any,
     stateKey: string
-  ): Array<{ id: string; name: string }> {
-    let componentsUsingState: Array<{ id: string; name: string }> = []
+  ): Array<{ id: string; name: string; settings: string[] }> {
+    let componentsUsingState: Array<{
+      id: string
+      name: string
+      settings: string[]
+    }> = []
 
-    const { _children, ...componentWithoutChildren } = component
-    const componentStr = JSON.stringify(componentWithoutChildren)
+    const { _children, ...componentSettings } = component
 
-    const bindings = findHBSBlocks(componentStr).map(binding => {
-      let sanitizedBinding = binding.replace(/\\"/g, '"')
-      if (isJSBinding(sanitizedBinding)) {
-        return decodeJSBinding(sanitizedBinding)
-      } else {
-        return sanitizedBinding
+    let settingsWithState: string[] = []
+
+    for (const [setting, value] of Object.entries(componentSettings)) {
+      if (typeof value === "string") {
+        const bindings = findHBSBlocks(value).map(binding => {
+          let sanitizedBinding = binding.replace(/\\"/g, '"')
+          if (isJSBinding(sanitizedBinding)) {
+            return decodeJSBinding(sanitizedBinding)
+          } else {
+            return sanitizedBinding
+          }
+        })
+        const bindingString = bindings.join(" ")
+
+        if (bindingString.includes(stateKey)) {
+          settingsWithState.push(setting)
+        }
       }
-    })
-    const bindingString = bindings.join(" ")
+    }
 
-    if (bindingString.includes(stateKey)) {
+    if (settingsWithState.length > 0) {
       componentsUsingState.push({
         id: component._id,
-        name: component._instanceName || "Unnamed Component",
+        name: component._instanceName,
+        settings: settingsWithState,
       })
     }
 
@@ -54,17 +75,28 @@
 
   function handleKeySelect(event: CustomEvent) {
     selectedKey = event.detail
-    const localStorageKey = `${$appStore.appId}.state`
-    const state = JSON.parse(localStorage.getItem(localStorageKey) || "{}")
-    stateValue = state[selectedKey]
 
-    if ($selectedComponent) {
+    if ($selectedScreen?.props) {
       componentsUsingState = findComponentsUsingState(
-        $selectedComponent,
+        $selectedScreen.props,
         selectedKey
       )
     }
   }
+
+  function onClickComponentLink(component: {
+    id: string
+    name: string
+    settings: string[]
+  }) {
+    componentStore.select(component.id)
+    // Delay highlighting until after component selection and re-render
+    setTimeout(() => {
+      component.settings.forEach(setting => {
+        builderStore.highlightSetting(setting)
+      })
+    }, 100)
+  }
 </script>
 
 <ActionButton on:click={modal.show}>State</ActionButton>
@@ -72,19 +104,15 @@
 <Modal bind:this={modal}>
   <ModalContent title="State" showConfirmButton={false} cancelText="Close">
     <Combobox options={keyOptions} on:change={handleKeySelect} />
-    <div class="state-value helper">
-      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      <pre>{@html JSON.stringify(stateValue, null, 2)}</pre>
-    </div>
     {#if componentsUsingState.length > 0}
       <div class="components-list">
         <h4>Components using this state:</h4>
         {#each componentsUsingState as component}
           <button
             class="component-link"
-            on:click={() => componentStore.select(component.id)}
+            on:click={() => onClickComponentLink(component)}
           >
-            {component.name}
+            {component.name} ({component.settings.join(", ")})
           </button>
         {/each}
       </div>
@@ -93,36 +121,6 @@
 </Modal>
 
 <style>
-  .state-value {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-m);
-    padding: var(--spacing-m);
-    background-color: var(--spectrum-global-color-gray-50);
-  }
-  .state-value pre {
-    padding: 0;
-    margin: 0;
-    font-size: 12px;
-    white-space: pre;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  .state-value.helper pre {
-    color: var(--spectrum-global-color-blue-700);
-  }
-  .state-value pre :global(span) {
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-  }
-  .state-value :global(p) {
-    padding: 0;
-    margin: 0;
-  }
-  .state-value.helper :global(code) {
-    font-size: 12px;
-  }
   .components-list {
     margin-top: var(--spacing-m);
     padding: var(--spacing-m);

From 5c54c4385d7dde59baf6fb0fbd18b4bc7de83de4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Jan 2025 14:29:36 +0000
Subject: [PATCH 05/81] convert bbui combobox and popover to ts

---
 packages/bbui/src/Form/Combobox.svelte      | 21 ++++++------
 packages/bbui/src/Form/Core/Combobox.svelte | 14 ++++----
 packages/bbui/src/Popover/Popover.svelte    | 38 ++++++++++-----------
 3 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index 44854d949e..18a2359c30 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -1,17 +1,17 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import Combobox from "./Core/Combobox.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = undefined
-  export let disabled = false
-  export let readonly = false
-  export let labelPosition = "above"
-  export let error = null
-  export let placeholder = "Choose an option or type"
-  export let options = []
-  export let helpText = null
+  export let value: string | null = null
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let labelPosition: string = "above"
+  export let error: string | null = null
+  export let placeholder: string = "Choose an option or type"
+  export let options: any[] = []
+  export let helpText: string | null = null
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
 
@@ -30,7 +30,6 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Combobox
-    {error}
     {disabled}
     {value}
     {options}
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index c38cf1d9b1..8f805fbba6 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
@@ -6,12 +6,12 @@
   import clickOutside from "../../Actions/click_outside"
   import Popover from "../../Popover/Popover.svelte"
 
-  export let value = null
-  export let id = null
-  export let placeholder = "Choose an option or type"
-  export let disabled = false
-  export let readonly = false
-  export let options = []
+  export let value: string | null = null
+  export let id: string | null = null
+  export let placeholder: string = "Choose an option or type"
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let options: any[] = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index cccd83f871..5a5b4b2c14 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
@@ -9,24 +9,24 @@
 
   const dispatch = createEventDispatcher()
 
-  export let anchor
-  export let align = "right"
-  export let portalTarget
-  export let minWidth
-  export let maxWidth
-  export let maxHeight
-  export let open = false
-  export let useAnchorWidth = false
-  export let dismissible = true
-  export let offset = 4
-  export let customHeight
-  export let animate = true
-  export let customZindex
-  export let handlePostionUpdate
-  export let showPopover = true
-  export let clickOutsideOverride = false
-  export let resizable = true
-  export let wrap = false
+  export let anchor: any | undefined = undefined
+  export let align: string | undefined = "right"
+  export let portalTarget: any | undefined = undefined
+  export let minWidth: number | undefined = undefined
+  export let maxWidth: number | undefined = undefined
+  export let maxHeight: number | undefined = undefined
+  export let open: boolean | undefined = false
+  export let useAnchorWidth: boolean | undefined = false
+  export let dismissible: boolean | undefined = true
+  export let offset: number | undefined = 4
+  export let customHeight: number | undefined = undefined
+  export let animate: boolean | undefined = true
+  export let customZindex: number | undefined = undefined
+  export let handlePostionUpdate: () => void | undefined = undefined
+  export let showPopover: boolean | undefined = true
+  export let clickOutsideOverride: boolean | undefined = false
+  export let resizable: boolean | undefined = true
+  export let wrap: boolean | undefined = false
 
   const animationDuration = 260
 

From 8763f5251ce4b1195837f3ee8c5d4399a965d829 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Jan 2025 14:29:56 +0000
Subject: [PATCH 06/81] add ability to highlight multiple settings

---
 .../settings/controls/PropertyControl.svelte  | 12 ++++---
 .../[screenId]/_components/StatePanel.svelte  | 20 ++++++++---
 .../builder/src/stores/builder/builder.ts     | 33 +++++++++++++++----
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 65b3ed9395..52bcc7bce2 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -27,14 +27,18 @@
 
   let highlightType
 
-  $: highlightedProp = $builderStore.highlightedSetting
+  $: highlightedSettings = $builderStore.highlightedSettings
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
   $: if (!Array.isArray(value)) {
-    highlightType =
-      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
+    const highlightedSetting = highlightedSettings?.find(
+      setting => setting.key === key
+    )
+    highlightType = highlightedSetting
+      ? `highlighted-${highlightedSetting.type}`
+      : ""
   }
 
   const getAllBindings = (bindings, componentBindings, nested) => {
@@ -77,7 +81,7 @@
   }
 
   onDestroy(() => {
-    if (highlightedProp) {
+    if (highlightedSettings) {
       builderStore.highlightSetting(null)
     }
   })
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index d3c579441b..2a5a68a4fb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onDestroy } from "svelte"
   import { ActionButton, Modal, ModalContent, Combobox } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
   import {
@@ -13,7 +14,7 @@
   } from "@budibase/string-templates"
 
   let modal: Modal
-  let selectedKey = ""
+  let selectedKey: string | null = null
   let componentsUsingState: Array<{
     id: string
     name: string
@@ -75,7 +76,9 @@
 
   function handleKeySelect(event: CustomEvent) {
     selectedKey = event.detail
-
+    if (!selectedKey) {
+      throw new Error("No state key selected")
+    }
     if ($selectedScreen?.props) {
       componentsUsingState = findComponentsUsingState(
         $selectedScreen.props,
@@ -90,20 +93,29 @@
     settings: string[]
   }) {
     componentStore.select(component.id)
-    // Delay highlighting until after component selection and re-render
+
+    // Delay highlighting until after component selection and re-render (i know this is disgusting)
     setTimeout(() => {
       component.settings.forEach(setting => {
         builderStore.highlightSetting(setting)
       })
     }, 100)
   }
+
+  onDestroy(() => {
+    builderStore.highlightSetting(undefined)
+  })
 </script>
 
 <ActionButton on:click={modal.show}>State</ActionButton>
 
 <Modal bind:this={modal}>
   <ModalContent title="State" showConfirmButton={false} cancelText="Close">
-    <Combobox options={keyOptions} on:change={handleKeySelect} />
+    <Combobox
+      value={selectedKey}
+      options={keyOptions}
+      on:change={handleKeySelect}
+    />
     {#if componentsUsingState.length > 0}
       <div class="components-list">
         <h4>Components using this state:</h4>
diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts
index e4cbbba7f1..36c47b2838 100644
--- a/packages/builder/src/stores/builder/builder.ts
+++ b/packages/builder/src/stores/builder/builder.ts
@@ -8,10 +8,10 @@ import { App } from "@budibase/types"
 
 interface BuilderState {
   previousTopNavPath: Record<string, string>
-  highlightedSetting: {
+  highlightedSettings: Array<{
     key: string
     type: "info" | string
-  } | null
+  }> | null
   propertyFocus: string | null
   builderSidePanel: boolean
   onboarding: boolean
@@ -24,7 +24,7 @@ interface BuilderState {
 
 export const INITIAL_BUILDER_STATE: BuilderState = {
   previousTopNavPath: {},
-  highlightedSetting: null,
+  highlightedSettings: null,
   propertyFocus: null,
   builderSidePanel: false,
   onboarding: false,
@@ -76,10 +76,29 @@ export class BuilderStore extends BudiStore<BuilderState> {
   }
 
   highlightSetting(key?: string, type?: string) {
-    this.update(state => ({
-      ...state,
-      highlightedSetting: key ? { key, type: type || "info" } : null,
-    }))
+    this.update(state => {
+      if (!key) {
+        return {
+          ...state,
+          highlightedSettings: null,
+        }
+      }
+
+      const currentSettings = state.highlightedSettings || []
+
+      const settingExists = currentSettings.some(setting => setting.key === key)
+      if (!settingExists) {
+        return {
+          ...state,
+          highlightedSettings: [
+            ...currentSettings,
+            { key, type: type || "info" },
+          ],
+        }
+      }
+
+      return state
+    })
   }
 
   propertyFocus(key: string | null) {

From 1048a506275996c709fbbacee7564e3e3aab40c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 15 Jan 2025 14:52:27 +0000
Subject: [PATCH 07/81] Add functional bindings panel

---
 .../BindingExplorer/BindingNode.svelte        | 188 ++++++++++++++++++
 .../_components/BindingsPanel.svelte          | 100 +++++++++-
 2 files changed, 282 insertions(+), 6 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
new file mode 100644
index 0000000000..155312c03e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+  import { Icon } from "@budibase/bbui"
+
+  export let label: string | undefined
+  export let value: any
+  export let root: boolean = true
+  export let path: (string | number)[] = []
+
+  const Colors = {
+    Undefined: "var(--spectrum-global-color-gray-600)",
+    Null: "purple",
+    String: "orange",
+    Number: "blue",
+    True: "green",
+    False: "red",
+    Date: "pink",
+  }
+
+  let expanded = false
+
+  $: isArray = Array.isArray(value)
+  $: isObject = value?.toString?.() === "[object Object]"
+  $: keys = isArray || isObject ? Object.keys(value).sort() : []
+  $: expandable = keys.length > 0
+  $: displayValue = getDisplayValue(isArray, isObject, keys, value)
+  $: style = getStyle(expandable, value)
+  $: readableBinding = `{{ ${path.join(".")} }}`
+
+  const pluralise = (text: string, number: number) => {
+    return number === 1 ? text : text + "s"
+  }
+
+  const getDisplayValue = (
+    isArray: boolean,
+    isObject: boolean,
+    keys: any[],
+    value: any
+  ) => {
+    if (isArray) {
+      return `[] ${keys.length} ${pluralise("item", keys.length)}`
+    }
+    if (isObject) {
+      return `{} ${keys.length} ${pluralise("key", keys.length)}`
+    }
+    if (typeof value === "object" && typeof value?.toString === "function") {
+      return JSON.stringify(value.toString(), null, 2)
+    } else {
+      return JSON.stringify(value, null, 2)
+    }
+  }
+
+  const getStyle = (expandable: boolean, value: any) => {
+    let style = ""
+    const color = getColor(expandable, value)
+    if (color) {
+      style += `color:${color};`
+    }
+    return style
+  }
+
+  const getColor = (expandable: boolean, value: any) => {
+    if (expandable) {
+      return
+    }
+    switch (value) {
+      case undefined:
+        return Colors.Undefined
+      case null:
+        return Colors.Null
+      case true:
+        return Colors.True
+      case false:
+        return Colors.False
+    }
+    switch (typeof value) {
+      case "string":
+        return Colors.String
+      case "number":
+        return Colors.Number
+    }
+    if (value instanceof Date) {
+      return Colors.Date
+    }
+  }
+
+  $: console.log(path)
+</script>
+
+<div class="binding-node">
+  {#if label}
+    <div class="binding-text" title={readableBinding}>
+      <div class="binding-arrow">
+        {#if expandable}
+          <Icon
+            name={expanded ? "ChevronDown" : "ChevronRight"}
+            hoverable
+            color="var(--spectrum-global-color-gray-600)"
+            on:click={() => (expanded = !expanded)}
+          />
+        {/if}
+      </div>
+      <div class="binding-label" class:expandable>
+        {label}
+      </div>
+      <div class="binding-value" class:expandable {style}>
+        {displayValue}
+      </div>
+    </div>
+  {/if}
+  {#if expandable && (expanded || !label)}
+    <div class="binding-children" class:root>
+      {#each keys as key}
+        <svelte:self
+          label={key}
+          value={value[key]}
+          root={false}
+          path={[...path, key]}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .binding-node {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+  }
+  .binding-arrow {
+    margin-right: 2px;
+    flex: 0 0 18px;
+  }
+  .binding-text {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-family: monospace;
+    font-size: 12px;
+    width: 100%;
+  }
+  .binding-children {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    /* border-left: 1px solid var(--spectrum-global-color-gray-400); */
+    /* margin-left: 20px; */
+    padding-left: 18px;
+  }
+  .binding-children.root {
+    border-left: none;
+    margin-left: 0;
+    padding-left: 0;
+  }
+
+  /* Size label and value according to type */
+  .binding-label,
+  .binding-value {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .binding-label {
+    flex: 0 0 auto;
+    max-width: 50%;
+    margin-right: 8px;
+  }
+  .binding-value {
+    flex: 1 1 auto;
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .binding-label.expandable {
+    flex: 0 1 auto;
+    max-width: none;
+  }
+  .binding-value.expandable {
+    flex: 0 0 auto;
+  }
+
+  /* Trim spans in the highlighted HTML */
+  .binding-value :global(span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 73cac27331..6af802c570 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,14 +1,102 @@
-<script>
+<script lang="ts">
   import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+  import {
+    previewStore,
+    selectedScreen,
+    componentStore,
+    snippets,
+  } from "@/stores/builder"
+  import { getBindableProperties } from "@/dataBinding"
+  import { processObjectSync } from "@budibase/string-templates"
+  import BindingNode from "./BindingExplorer/BindingNode.svelte"
 
-  let visible = false
-  let modal
+  enum ValueType {
+    Object = "Object",
+    Array = "Array",
+    Primitive = "Primitive",
+  }
+
+  // Minimal typing for the real data binding structure, as none exists
+  type DataBinding = {
+    category: string
+    runtimeBinding: string
+    readableBinding: string
+  }
+
+  type BindingEntry = {
+    readableBinding: string
+    runtimeBinding: string | null
+    value: any
+    valueType: ValueType
+  }
+
+  type BindingMap = {
+    [key: string]: BindingEntry
+  }
+
+  let modal: any
+
+  $: context = {
+    ...($previewStore.selectedComponentContext || {}),
+    date: new Date(),
+    string: "foo",
+    number: 1234,
+    undefined: undefined,
+    null: null,
+    true: true,
+    false: false,
+    array: [1, 2, 3],
+    object: { foo: "bar" },
+    error: new Error(),
+  }
+  $: selectedComponentId = $componentStore.selectedComponentId
+  $: bindings = getBindableProperties($selectedScreen, selectedComponentId)
+  $: enrichedBindings = enrichBindings(bindings, context, $snippets)
+
+  const show = () => {
+    previewStore.requestComponentContext()
+    modal.show()
+  }
+
+  const enrichBindings = (
+    bindings: DataBinding[],
+    context: Record<string, any>,
+    snippets: any
+  ) => {
+    // Create a single big array to enrich in one go
+    const bindingStrings = bindings.map(binding => {
+      if (binding.runtimeBinding.startsWith('trim "')) {
+        // Account for nasty hardcoded HBS bindings for roles, for legacy
+        // compatibility
+        return `{{ ${binding.runtimeBinding} }}`
+      } else {
+        return `{{ literal ${binding.runtimeBinding} }}`
+      }
+    })
+    const bindingEvauations = processObjectSync(bindingStrings, {
+      ...context,
+      snippets,
+    }) as any[]
+
+    // Enrich bindings with evaluations and highlighted HTML
+    const flatBindings = bindings.map((binding, idx) => ({
+      ...binding,
+      value: bindingEvauations[idx],
+    }))
+
+    return flatBindings
+  }
 </script>
 
-<ActionButton on:click={modal.show}>Bindings</ActionButton>
+<ActionButton on:click={show}>Bindings</ActionButton>
 
 <Modal bind:this={modal}>
-  <ModalContent title="Bindings" showConfirmButton={false} cancelText="Close">
-    Some awesome bindings content.
+  <ModalContent
+    title="Bindings"
+    showConfirmButton={false}
+    cancelText="Close"
+    size="M"
+  >
+    <BindingNode value={context} />
   </ModalContent>
 </Modal>

From 094881e807c011ccfbfdee94334d29e5867d1e74 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Jan 2025 15:54:40 +0000
Subject: [PATCH 08/81] clear highlight state as part of component select

---
 .../settings/controls/PropertyControl.svelte       |  7 -------
 .../[screenId]/_components/StatePanel.svelte       | 14 +++-----------
 packages/builder/src/stores/builder/components.ts  |  6 ++++++
 3 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 52bcc7bce2..b3eca2485a 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -5,7 +5,6 @@
     runtimeToReadableBinding,
   } from "@/dataBinding"
   import { builderStore } from "@/stores/builder"
-  import { onDestroy } from "svelte"
 
   export let label = ""
   export let labelHidden = false
@@ -79,12 +78,6 @@
       ? defaultValue
       : enriched
   }
-
-  onDestroy(() => {
-    if (highlightedSettings) {
-      builderStore.highlightSetting(null)
-    }
-  })
 </script>
 
 <div
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 2a5a68a4fb..0786c76d20 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onDestroy } from "svelte"
   import { ActionButton, Modal, ModalContent, Combobox } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
   import {
@@ -94,17 +93,10 @@
   }) {
     componentStore.select(component.id)
 
-    // Delay highlighting until after component selection and re-render (i know this is disgusting)
-    setTimeout(() => {
-      component.settings.forEach(setting => {
-        builderStore.highlightSetting(setting)
-      })
-    }, 100)
+    component.settings.forEach(setting => {
+      builderStore.highlightSetting(setting)
+    })
   }
-
-  onDestroy(() => {
-    builderStore.highlightSetting(undefined)
-  })
 </script>
 
 <ActionButton on:click={modal.show}>State</ActionButton>
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 9ad9a75f84..450487a52f 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -20,6 +20,7 @@ import {
   previewStore,
   tables,
   componentTreeNodesStore,
+  builderStore,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@@ -716,6 +717,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
    * @param {string} componentId
    */
   select(componentId: string) {
+    builderStore.update(state => {
+      state.highlightedSettings = null
+      return state
+    })
+
     this.update(state => {
       state.selectedComponentId = componentId
       return state

From cf291b60be9b099be244c8ee518c6380fda38c95 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 15 Jan 2025 21:08:37 +0000
Subject: [PATCH 09/81] Add style improvements

---
 .../BindingExplorer/BindingNode.svelte        | 60 +++++++++------
 .../_components/BindingsPanel.svelte          | 77 ++++++++-----------
 2 files changed, 68 insertions(+), 69 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
index 155312c03e..2253cc782c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Icon } from "@budibase/bbui"
+  import { isBoolean } from "lodash"
 
   export let label: string | undefined
   export let value: any
@@ -7,25 +8,38 @@
   export let path: (string | number)[] = []
 
   const Colors = {
-    Undefined: "var(--spectrum-global-color-gray-600)",
-    Null: "purple",
-    String: "orange",
-    Number: "blue",
-    True: "green",
-    False: "red",
-    Date: "pink",
+    Array: "var(--spectrum-global-color-gray-600)",
+    Object: "var(--spectrum-global-color-gray-600)",
+    Other: "var(--spectrum-global-color-indigo-600)",
+    Undefined: "var(--spectrum-global-color-gray-500)",
+    Null: "var(--spectrum-global-color-magenta-600)",
+    String: "var(--spectrum-global-color-orange-600)",
+    Number: "var(--spectrum-global-color-blue-600)",
+    True: "var(--spectrum-global-color-green-600)",
+    False: "var(--spectrum-global-color-red-600)",
+    Date: "var(--spectrum-global-color-green-600)",
   }
 
   let expanded = false
 
   $: isArray = Array.isArray(value)
   $: isObject = value?.toString?.() === "[object Object]"
-  $: keys = isArray || isObject ? Object.keys(value).sort() : []
+  $: keys = getKeys(isArray, isObject, value)
   $: expandable = keys.length > 0
   $: displayValue = getDisplayValue(isArray, isObject, keys, value)
-  $: style = getStyle(expandable, value)
+  $: style = getStyle(isArray, isObject, value)
   $: readableBinding = `{{ ${path.join(".")} }}`
 
+  const getKeys = (isArray: boolean, isObject: boolean, value: any) => {
+    if (isArray) {
+      return [...value.keys()]
+    }
+    if (isObject) {
+      return Object.keys(value).sort()
+    }
+    return []
+  }
+
   const pluralise = (text: string, number: number) => {
     return number === 1 ? text : text + "s"
   }
@@ -43,24 +57,22 @@
       return `{} ${keys.length} ${pluralise("key", keys.length)}`
     }
     if (typeof value === "object" && typeof value?.toString === "function") {
-      return JSON.stringify(value.toString(), null, 2)
+      return value.toString()
     } else {
       return JSON.stringify(value, null, 2)
     }
   }
 
-  const getStyle = (expandable: boolean, value: any) => {
-    let style = ""
-    const color = getColor(expandable, value)
-    if (color) {
-      style += `color:${color};`
-    }
-    return style
+  const getStyle = (isArray: boolean, isObject: boolean, value: any) => {
+    return `color:${getColor(isArray, isObject, value)};`
   }
 
-  const getColor = (expandable: boolean, value: any) => {
-    if (expandable) {
-      return
+  const getColor = (isArray: boolean, isObject: boolean, value: any) => {
+    if (isArray) {
+      return Colors.Array
+    }
+    if (isObject) {
+      return Colors.Object
     }
     switch (value) {
       case undefined:
@@ -81,13 +93,12 @@
     if (value instanceof Date) {
       return Colors.Date
     }
+    return Colors.Other
   }
-
-  $: console.log(path)
 </script>
 
 <div class="binding-node">
-  {#if label}
+  {#if label != null}
     <div class="binding-text" title={readableBinding}>
       <div class="binding-arrow">
         {#if expandable}
@@ -107,7 +118,7 @@
       </div>
     </div>
   {/if}
-  {#if expandable && (expanded || !label)}
+  {#if expandable && (expanded || label == null)}
     <div class="binding-children" class:root>
       {#each keys as key}
         <svelte:self
@@ -169,7 +180,6 @@
   }
   .binding-value {
     flex: 1 1 auto;
-    color: var(--spectrum-global-color-gray-600);
   }
   .binding-label.expandable {
     flex: 0 1 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 6af802c570..7318e8ac1d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+  import { ActionButton, Modal, ModalContent, Helpers } from "@budibase/bbui"
   import {
     previewStore,
     selectedScreen,
@@ -7,14 +7,8 @@
     snippets,
   } from "@/stores/builder"
   import { getBindableProperties } from "@/dataBinding"
-  import { processObjectSync } from "@budibase/string-templates"
   import BindingNode from "./BindingExplorer/BindingNode.svelte"
-
-  enum ValueType {
-    Object = "Object",
-    Array = "Array",
-    Primitive = "Primitive",
-  }
+  import { processObjectSync } from "@budibase/string-templates"
 
   // Minimal typing for the real data binding structure, as none exists
   type DataBinding = {
@@ -23,45 +17,21 @@
     readableBinding: string
   }
 
-  type BindingEntry = {
-    readableBinding: string
-    runtimeBinding: string | null
-    value: any
-    valueType: ValueType
-  }
-
-  type BindingMap = {
-    [key: string]: BindingEntry
-  }
-
   let modal: any
 
-  $: context = {
-    ...($previewStore.selectedComponentContext || {}),
-    date: new Date(),
-    string: "foo",
-    number: 1234,
-    undefined: undefined,
-    null: null,
-    true: true,
-    false: false,
-    array: [1, 2, 3],
-    object: { foo: "bar" },
-    error: new Error(),
-  }
+  $: previewContext = $previewStore.selectedComponentContext || {}
   $: selectedComponentId = $componentStore.selectedComponentId
+  $: context = makeContext(previewContext, bindings)
   $: bindings = getBindableProperties($selectedScreen, selectedComponentId)
-  $: enrichedBindings = enrichBindings(bindings, context, $snippets)
 
   const show = () => {
     previewStore.requestComponentContext()
     modal.show()
   }
 
-  const enrichBindings = (
-    bindings: DataBinding[],
-    context: Record<string, any>,
-    snippets: any
+  const makeContext = (
+    previewContext: Record<string, any>,
+    bindings: DataBinding[]
   ) => {
     // Create a single big array to enrich in one go
     const bindingStrings = bindings.map(binding => {
@@ -74,17 +44,36 @@
       }
     })
     const bindingEvauations = processObjectSync(bindingStrings, {
-      ...context,
-      snippets,
+      ...previewContext,
+      snippets: $snippets,
     }) as any[]
 
     // Enrich bindings with evaluations and highlighted HTML
-    const flatBindings = bindings.map((binding, idx) => ({
-      ...binding,
-      value: bindingEvauations[idx],
-    }))
+    const enrichedBindings: any[] = bindings.map((binding, idx) => {
+      return {
+        ...binding,
+        value: bindingEvauations[idx],
+      }
+    })
 
-    return flatBindings
+    let context = {
+      _dataTypes: {
+        date: new Date(),
+        string: "foo",
+        number: 1234,
+        undefined: undefined,
+        null: null,
+        true: true,
+        false: false,
+        array: [1, 2, 3],
+        object: { foo: "bar" },
+        error: new Error(),
+      },
+    }
+    for (let binding of enrichedBindings) {
+      Helpers.deepSet(context, binding.readableBinding, binding.value)
+    }
+    return context
   }
 </script>
 

From 59d71119ad002d8f83fab4e3b015bdccfa9c88bd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 15 Jan 2025 21:25:48 +0000
Subject: [PATCH 10/81] Test

---
 asd | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 asd

diff --git a/asd b/asd
new file mode 100644
index 0000000000..e69de29bb2

From e14bf007dba0f53c5c9b3cf0e1afc21d7604fb3d Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 16 Jan 2025 08:59:04 +0000
Subject: [PATCH 11/81] some tidy up

---
 packages/bbui/src/Popover/Popover.svelte                      | 2 +-
 .../design/[screenId]/_components/StatePanel.svelte           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 5a5b4b2c14..caba27cf25 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -9,7 +9,7 @@
 
   const dispatch = createEventDispatcher()
 
-  export let anchor: any | undefined = undefined
+  export let anchor: HTMLElement | undefined = undefined
   export let align: string | undefined = "right"
   export let portalTarget: any | undefined = undefined
   export let minWidth: number | undefined = undefined
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 0786c76d20..10ba825423 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -73,7 +73,7 @@
     return componentsUsingState
   }
 
-  function handleKeySelect(event: CustomEvent) {
+  function handleStateKeySelect(event: CustomEvent) {
     selectedKey = event.detail
     if (!selectedKey) {
       throw new Error("No state key selected")
@@ -106,7 +106,7 @@
     <Combobox
       value={selectedKey}
       options={keyOptions}
-      on:change={handleKeySelect}
+      on:change={handleStateKeySelect}
     />
     {#if componentsUsingState.length > 0}
       <div class="components-list">

From fa01802127dca5346ff2b2aba549d83a6cacab71 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 16 Jan 2025 10:52:13 +0000
Subject: [PATCH 12/81] Update import

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

diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index 8a8f82883d..024e7b4edc 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -6,7 +6,7 @@ import { screenStore } from "./screens"
 import { builderStore } from "./builder"
 import Router from "../components/Router.svelte"
 import * as AppComponents from "../components/app/index.js"
-import { ScreenslotID, ScreenslotType } from "../constants.js"
+import { ScreenslotID, ScreenslotType } from "../constants"
 
 export const BudibasePrefix = "@budibase/standard-components/"
 

From 5acd6ab3d60ae2451f71590153b934b776ca0ff9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 16 Jan 2025 12:19:45 +0000
Subject: [PATCH 13/81] Add hover state and expansion to binding labels

---
 .../BindingExplorer/BindingNode.svelte        | 34 +++++++++++++------
 .../_components/BindingsPanel.svelte          |  4 +--
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
index 2253cc782c..2c4c5844fb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { Icon } from "@budibase/bbui"
-  import { isBoolean } from "lodash"
+  import { AbsTooltip, Icon, TooltipPosition } from "@budibase/bbui"
 
-  export let label: string | undefined
-  export let value: any
+  export let label: string | undefined = undefined
+  export let value: any = undefined
   export let root: boolean = true
   export let path: (string | number)[] = []
 
@@ -99,23 +98,33 @@
 
 <div class="binding-node">
   {#if label != null}
-    <div class="binding-text" title={readableBinding}>
+    <div class="binding-text">
       <div class="binding-arrow">
         {#if expandable}
           <Icon
             name={expanded ? "ChevronDown" : "ChevronRight"}
             hoverable
             color="var(--spectrum-global-color-gray-600)"
+            hoverColor="var(--spectrum-global-color-gray-900)"
             on:click={() => (expanded = !expanded)}
           />
         {/if}
       </div>
-      <div class="binding-label" class:expandable>
+      <div
+        class="binding-label"
+        class:expandable
+        on:click={() => (expanded = !expanded)}
+      >
         {label}
       </div>
-      <div class="binding-value" class:expandable {style}>
-        {displayValue}
-      </div>
+      <AbsTooltip
+        text={isArray || isObject ? null : displayValue}
+        position={TooltipPosition.Right}
+      >
+        <div class="binding-value" class:expandable {style}>
+          {displayValue}
+        </div>
+      </AbsTooltip>
     </div>
   {/if}
   {#if expandable && (expanded || label == null)}
@@ -177,9 +186,14 @@
     flex: 0 0 auto;
     max-width: 50%;
     margin-right: 8px;
+    transition: color 130ms ease-out;
+  }
+  .binding-label.expandable:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
   }
   .binding-value {
-    flex: 1 1 auto;
+    flex: 0 1 auto;
   }
   .binding-label.expandable {
     flex: 0 1 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 7318e8ac1d..b7bc394539 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -43,7 +43,7 @@
         return `{{ literal ${binding.runtimeBinding} }}`
       }
     })
-    const bindingEvauations = processObjectSync(bindingStrings, {
+    const bindingEvaluations = processObjectSync(bindingStrings, {
       ...previewContext,
       snippets: $snippets,
     }) as any[]
@@ -52,7 +52,7 @@
     const enrichedBindings: any[] = bindings.map((binding, idx) => {
       return {
         ...binding,
-        value: bindingEvauations[idx],
+        value: bindingEvaluations[idx],
       }
     })
 

From 7cb422f806936d9169f01a3ea6cd8045598c137d Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 16 Jan 2025 14:42:22 +0000
Subject: [PATCH 14/81] find components that are updating state

---
 .../settings/controls/PropertyControl.svelte  |  2 +-
 .../[screenId]/_components/StatePanel.svelte  | 74 +++++++++++++++++--
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index b3eca2485a..5118f7be2e 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -31,7 +31,7 @@
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
-  $: if (!Array.isArray(value)) {
+  $: if (value) {
     const highlightedSetting = highlightedSettings?.find(
       setting => setting.key === key
     )
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 10ba825423..9469f74923 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -12,15 +12,57 @@
     isJSBinding,
   } from "@budibase/string-templates"
 
-  let modal: Modal
-  let selectedKey: string | null = null
-  let componentsUsingState: Array<{
+  type ComponentUsingState = {
     id: string
     name: string
     settings: string[]
-  }> = []
+  }[]
+
+  let modal: Modal
+  let selectedKey: string | null = null
+  let componentsUsingState: ComponentUsingState = []
+  let componentsUpdatingState: ComponentUsingState = []
+
   const keyOptions = getAllStateVariables()
 
+  function findComponentsUpdatingState(
+    component: any,
+    stateKey: string
+  ): ComponentUsingState {
+    let foundComponents: ComponentUsingState = []
+
+    const eventHandlerProps = ["onClick", "onChange"]
+
+    eventHandlerProps.forEach(eventType => {
+      const handlers = component[eventType]
+      if (Array.isArray(handlers)) {
+        handlers.forEach(handler => {
+          if (
+            handler["##eventHandlerType"] === "Update State" &&
+            handler.parameters?.key === stateKey
+          ) {
+            foundComponents.push({
+              id: component._id,
+              name: component._instanceName,
+              settings: [eventType],
+            })
+          }
+        })
+      }
+    })
+
+    if (component._children) {
+      for (let child of component._children) {
+        foundComponents = [
+          ...foundComponents,
+          ...findComponentsUpdatingState(child, stateKey),
+        ]
+      }
+    }
+
+    return foundComponents
+  }
+
   function findComponentsUsingState(
     component: any,
     stateKey: string
@@ -32,7 +74,6 @@
     }> = []
 
     const { _children, ...componentSettings } = component
-
     let settingsWithState: string[] = []
 
     for (const [setting, value] of Object.entries(componentSettings)) {
@@ -83,6 +124,10 @@
         $selectedScreen.props,
         selectedKey
       )
+      componentsUpdatingState = findComponentsUpdatingState(
+        $selectedScreen.props,
+        selectedKey
+      )
     }
   }
 
@@ -92,7 +137,6 @@
     settings: string[]
   }) {
     componentStore.select(component.id)
-
     component.settings.forEach(setting => {
       builderStore.highlightSetting(setting)
     })
@@ -121,6 +165,24 @@
         {/each}
       </div>
     {/if}
+    {#if componentsUpdatingState.length > 0}
+      <div class="components-list">
+        <h4>Components updating this state:</h4>
+        {#each componentsUpdatingState as component}
+          <button
+            class="component-link"
+            on:click={() =>
+              onClickComponentLink({
+                id: component.id,
+                name: component.name,
+                settings: component.settings,
+              })}
+          >
+            {component.name} (via {component.settings.join(", ")})
+          </button>
+        {/each}
+      </div>
+    {/if}
   </ModalContent>
 </Modal>
 

From 050f1e7a5f4682b6661d83c69afd9ba9867565c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 17 Jan 2025 09:39:33 +0000
Subject: [PATCH 15/81] Convert multiple files to TS and update BBUI to support
 TS

---
 packages/bbui/package.json                    |   5 +-
 .../{click_outside.js => click_outside.ts}    |  86 +++++++++++----
 .../bbui/src/Actions/position_dropdown.js     |  27 ++---
 packages/bbui/src/Icon/Icon.svelte            |  24 ++---
 packages/bbui/src/Popover/Popover.svelte      |  73 ++++++++-----
 packages/bbui/src/helpers.d.ts                |   3 -
 packages/bbui/src/{index.js => index.ts}      |   6 +-
 packages/bbui/svelte.config.js                |   7 ++
 packages/bbui/tsconfig.json                   |  11 ++
 packages/bbui/vite.config.js                  |   2 +-
 .../components/common/DetailPopover.svelte    |  56 ++++++----
 .../components/common/UpdateAppTopNav.svelte  |   2 +-
 .../portal/onboarding/TourPopover.svelte      |   4 +-
 .../BindingExplorer/BindingNode.svelte        | 100 +++++++++++-------
 .../_components/BindingsPanel.svelte          |  49 +++++----
 15 files changed, 297 insertions(+), 158 deletions(-)
 rename packages/bbui/src/Actions/{click_outside.js => click_outside.ts} (63%)
 delete mode 100644 packages/bbui/src/helpers.d.ts
 rename packages/bbui/src/{index.js => index.ts} (98%)
 create mode 100644 packages/bbui/svelte.config.js
 create mode 100644 packages/bbui/tsconfig.json

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 89f72bc46d..2caad20bf6 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -3,7 +3,7 @@
   "description": "A UI solution used in the different Budibase projects.",
   "version": "0.0.0",
   "license": "MPL-2.0",
-  "svelte": "src/index.js",
+  "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
   "exports": {
     ".": {
@@ -14,7 +14,8 @@
     "./spectrum-icons-vite.js": "./src/spectrum-icons-vite.js"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "dev": "vite build --watch --mode=dev"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "1.4.0",
diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.ts
similarity index 63%
rename from packages/bbui/src/Actions/click_outside.js
rename to packages/bbui/src/Actions/click_outside.ts
index 526659cb7a..248a03039e 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.ts
@@ -1,3 +1,17 @@
+type ClickOutsideCallback = (event: MouseEvent) => void | undefined
+
+interface ClickOutsideOpts {
+  callback?: ClickOutsideCallback
+  anchor?: HTMLElement
+}
+
+interface Handler {
+  id: number
+  element: HTMLElement
+  anchor: HTMLElement
+  callback?: ClickOutsideCallback
+}
+
 // These class names will never trigger a callback if clicked, no matter what
 const ignoredClasses = [
   ".download-js-link",
@@ -14,18 +28,20 @@ const conditionallyIgnoredClasses = [
   ".drawer-wrapper",
   ".spectrum-Popover",
 ]
-let clickHandlers = []
-let candidateTarget
+let clickHandlers: Handler[] = []
+let candidateTarget: HTMLElement | undefined
 
 // Processes a "click outside" event and invokes callbacks if our source element
 // is valid
-const handleClick = event => {
+const handleClick = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
   // Ignore click if this is an ignored class
-  if (event.target.closest('[data-ignore-click-outside="true"]')) {
+  if (target.closest('[data-ignore-click-outside="true"]')) {
     return
   }
   for (let className of ignoredClasses) {
-    if (event.target.closest(className)) {
+    if (target.closest(className)) {
       return
     }
   }
@@ -33,41 +49,41 @@ const handleClick = event => {
   // Process handlers
   clickHandlers.forEach(handler => {
     // Check that the click isn't inside the target
-    if (handler.element.contains(event.target)) {
+    if (handler.element.contains(target)) {
       return
     }
 
     // Ignore clicks for certain classes unless we're nested inside them
     for (let className of conditionallyIgnoredClasses) {
       const sourceInside = handler.anchor.closest(className) != null
-      const clickInside = event.target.closest(className) != null
+      const clickInside = target.closest(className) != null
       if (clickInside && !sourceInside) {
         return
       }
     }
 
-    handler.callback?.(event)
+    handler.callback?.(e)
   })
 }
 
 // On mouse up we only trigger a "click outside" callback if we targetted the
 // same element that we did on mouse down. This fixes all sorts of issues where
 // we get annoying callbacks firing when we drag to select text.
-const handleMouseUp = e => {
+const handleMouseUp = (e: MouseEvent) => {
   if (candidateTarget === e.target) {
     handleClick(e)
   }
-  candidateTarget = null
+  candidateTarget = undefined
 }
 
 // On mouse down we store which element was targetted for comparison later
-const handleMouseDown = e => {
+const handleMouseDown = (e: MouseEvent) => {
   // Only handle the primary mouse button here.
   // We handle context menu (right click) events in another handler.
   if (e.button !== 0) {
     return
   }
-  candidateTarget = e.target
+  candidateTarget = e.target as HTMLElement
 
   // Clear any previous listeners in case of multiple down events, and register
   // a single mouse up listener
@@ -82,7 +98,12 @@ document.addEventListener("contextmenu", handleClick)
 /**
  * Adds or updates a click handler
  */
-const updateHandler = (id, element, anchor, callback) => {
+const updateHandler = (
+  id: number,
+  element: HTMLElement,
+  anchor: HTMLElement,
+  callback: ClickOutsideCallback | undefined
+) => {
   let existingHandler = clickHandlers.find(x => x.id === id)
   if (!existingHandler) {
     clickHandlers.push({ id, element, anchor, callback })
@@ -94,27 +115,52 @@ const updateHandler = (id, element, anchor, callback) => {
 /**
  * Removes a click handler
  */
-const removeHandler = id => {
+const removeHandler = (id: number) => {
   clickHandlers = clickHandlers.filter(x => x.id !== id)
 }
 
 /**
- * Svelte action to apply a click outside handler for a certain element
+ * Svelte action to apply a click outside handler for a certain element.
  * opts.anchor is an optional param specifying the real root source of the
  * component being observed. This is required for things like popovers, where
  * the element using the clickoutside action is the popover, but the popover is
  * rendered at the root of the DOM somewhere, whereas the popover anchor is the
  * element we actually want to consider when determining the source component.
  */
-export default (element, opts) => {
+export default (
+  element: HTMLElement,
+  opts?: ClickOutsideOpts | ClickOutsideCallback
+) => {
   const id = Math.random()
-  const update = newOpts => {
-    const callback =
-      newOpts?.callback || (typeof newOpts === "function" ? newOpts : null)
-    const anchor = newOpts?.anchor || element
+
+  const isCallback = (
+    opts?: ClickOutsideOpts | ClickOutsideCallback
+  ): opts is ClickOutsideCallback => {
+    return typeof opts === "function"
+  }
+
+  const isOpts = (
+    opts?: ClickOutsideOpts | ClickOutsideCallback
+  ): opts is ClickOutsideOpts => {
+    return opts != null && typeof opts === "object"
+  }
+
+  const update = (newOpts?: ClickOutsideOpts | ClickOutsideCallback) => {
+    let callback: ClickOutsideCallback | undefined
+    let anchor = element
+    if (isCallback(newOpts)) {
+      callback = newOpts
+    } else if (isOpts(newOpts)) {
+      callback = newOpts.callback
+      if (newOpts.anchor) {
+        anchor = newOpts.anchor
+      }
+    }
     updateHandler(id, element, anchor, callback)
   }
+
   update(opts)
+
   return {
     update,
     destroy: () => removeHandler(id),
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index e95c7dd1b6..ee6bc37177 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -1,10 +1,4 @@
-/**
- * Valid alignment options are
- * - left
- * - right
- * - left-outside
- * - right-outside
- **/
+import { PopoverAlignment } from "../Popover/Popover.svelte"
 
 // Strategies are defined as [Popover]To[Anchor].
 // They can apply for both horizontal and vertical alignment.
@@ -149,20 +143,29 @@ export default function positionDropdown(element, opts) {
       }
 
       // Determine X strategy
-      if (align === "right") {
+      if (align === PopoverAlignment.Right) {
         applyXStrategy(Strategies.EndToEnd)
-      } else if (align === "right-outside" || align === "right-context-menu") {
+      } else if (
+        align === PopoverAlignment.RightOutside ||
+        align === PopoverAlignment.RightContextMenu
+      ) {
         applyXStrategy(Strategies.StartToEnd)
-      } else if (align === "left-outside" || align === "left-context-menu") {
+      } else if (
+        align === PopoverAlignment.LeftOutside ||
+        align === PopoverAlignment.LeftContextMenu
+      ) {
         applyXStrategy(Strategies.EndToStart)
-      } else if (align === "center") {
+      } else if (align === PopoverAlignment.Center) {
         applyXStrategy(Strategies.MidPoint)
       } else {
         applyXStrategy(Strategies.StartToStart)
       }
 
       // Determine Y strategy
-      if (align === "right-outside" || align === "left-outside") {
+      if (
+        align === PopoverAlignment.RightOutside ||
+        align === PopoverAlignment.LeftOutside
+      ) {
         applyYStrategy(Strategies.MidPoint)
       } else if (
         align === "right-context-menu" ||
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 73ad8edd10..a5d040c845 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -1,23 +1,23 @@
-<script>
+<script lang="ts">
   import {
     default as AbsTooltip,
     TooltipPosition,
     TooltipType,
   } from "../Tooltip/AbsTooltip.svelte"
 
-  export let name = "Add"
-  export let hidden = false
-  export let size = "M"
-  export let hoverable = false
-  export let disabled = false
-  export let color
-  export let hoverColor
-  export let tooltip
+  export let name: string = "Add"
+  export let hidden: boolean = false
+  export let size: "XS" | "S" | "M" | "L" | "XL" = "M"
+  export let hoverable: boolean = false
+  export let disabled: boolean = false
+  export let color: string | undefined = undefined
+  export let hoverColor: string | undefined = undefined
+  export let tooltip: string | undefined = undefined
   export let tooltipPosition = TooltipPosition.Bottom
   export let tooltipType = TooltipType.Default
-  export let tooltipColor
-  export let tooltipWrap = true
-  export let newStyles = false
+  export let tooltipColor: string | undefined = undefined
+  export let tooltipWrap: boolean = true
+  export let newStyles: boolean = false
 </script>
 
 <AbsTooltip
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index cccd83f871..e811cd828a 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -1,4 +1,21 @@
-<script>
+<script context="module" lang="ts">
+  export enum PopoverAlignment {
+    Left = "left",
+    Right = "right",
+    LeftOutside = "left-outside",
+    RightOutside = "right-outside",
+    Center = "center",
+    RightContextMenu = "right-context-menu",
+    LeftContextMenu = "left-context-menu",
+  }
+
+  export interface PopoverAPI {
+    show: () => void
+    hide: () => void
+  }
+</script>
+
+<script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
@@ -9,31 +26,35 @@
 
   const dispatch = createEventDispatcher()
 
-  export let anchor
-  export let align = "right"
-  export let portalTarget
-  export let minWidth
-  export let maxWidth
-  export let maxHeight
-  export let open = false
-  export let useAnchorWidth = false
-  export let dismissible = true
-  export let offset = 4
-  export let customHeight
-  export let animate = true
-  export let customZindex
-  export let handlePostionUpdate
-  export let showPopover = true
-  export let clickOutsideOverride = false
-  export let resizable = true
-  export let wrap = false
+  export let anchor: HTMLElement | undefined = undefined
+  export let align: PopoverAlignment = PopoverAlignment.Right
+  export let portalTarget: string | undefined = undefined
+  export let minWidth: number | undefined = undefined
+  export let maxWidth: number | undefined = undefined
+  export let maxHeight: number | undefined = undefined
+  export let open: boolean = false
+  export let useAnchorWidth: boolean = false
+  export let dismissible: boolean = true
+  export let offset: number = 4
+  export let customHeight: string | undefined = undefined
+  export let animate: boolean = true
+  export let customZIndex: number | undefined = undefined
+  export let handlePositionUpdate: Function | undefined = undefined
+  export let showPopover: boolean = true
+  export let clickOutsideOverride: boolean = false
+  export let resizable: boolean = true
+  export let wrap: boolean = false
 
   const animationDuration = 260
 
-  let timeout
+  let timeout: ReturnType<typeof setTimeout> | undefined
   let blockPointerEvents = false
 
-  $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
+  // Portal library lacks types, so we have to type this as any even though it's
+  // actually a string
+  $: target = (portalTarget ||
+    getContext(Context.PopoverRoot) ||
+    ".spectrum") as any
   $: {
     // Disable pointer events for the initial part of the animation, because we
     // fly from top to bottom and initially can be positioned under the cursor,
@@ -113,7 +134,7 @@
         minWidth,
         useAnchorWidth,
         offset,
-        customUpdate: handlePostionUpdate,
+        customUpdate: handlePositionUpdate,
         resizable,
         wrap,
       }}
@@ -123,11 +144,11 @@
       }}
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
-      class:customZindex
+      class:customZIndex
       class:hidden={!showPopover}
       class:blockPointerEvents
       role="presentation"
-      style="height: {customHeight}; --customZindex: {customZindex};"
+      style="height: {customHeight}; --customZIndex: {customZIndex};"
       transition:fly|local={{
         y: -20,
         duration: animate ? animationDuration : 0,
@@ -157,7 +178,7 @@
     opacity: 0;
     pointer-events: none;
   }
-  .customZindex {
-    z-index: var(--customZindex) !important;
+  .customZIndex {
+    z-index: var(--customZIndex) !important;
   }
 </style>
diff --git a/packages/bbui/src/helpers.d.ts b/packages/bbui/src/helpers.d.ts
deleted file mode 100644
index 79e08657b7..0000000000
--- a/packages/bbui/src/helpers.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module "./helpers" {
-  export const cloneDeep: <T>(obj: T) => T
-}
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.ts
similarity index 98%
rename from packages/bbui/src/index.js
rename to packages/bbui/src/index.ts
index 3efafed156..3c0d6c1a0b 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.ts
@@ -45,7 +45,11 @@ export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
-export { default as Popover } from "./Popover/Popover.svelte"
+export {
+  default as Popover,
+  PopoverAlignment,
+  type PopoverAPI,
+} from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
diff --git a/packages/bbui/svelte.config.js b/packages/bbui/svelte.config.js
new file mode 100644
index 0000000000..7d908c15d5
--- /dev/null
+++ b/packages/bbui/svelte.config.js
@@ -0,0 +1,7 @@
+const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte")
+
+const config = {
+  preprocess: vitePreprocess(),
+}
+
+module.exports = config
diff --git a/packages/bbui/tsconfig.json b/packages/bbui/tsconfig.json
new file mode 100644
index 0000000000..0da9d9c97c
--- /dev/null
+++ b/packages/bbui/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "./dist",
+    "lib": ["ESNext"],
+    "baseUrl": ".",
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules", "**/*.json", "**/*.spec.ts", "**/*.spec.js"]
+}
diff --git a/packages/bbui/vite.config.js b/packages/bbui/vite.config.js
index bf0f9fc26d..bccca20e43 100644
--- a/packages/bbui/vite.config.js
+++ b/packages/bbui/vite.config.js
@@ -9,7 +9,7 @@ export default defineConfig(({ mode }) => {
     build: {
       sourcemap: !isProduction,
       lib: {
-        entry: "src/index.js",
+        entry: "src/index.ts",
         formats: ["es"],
       },
     },
diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte
index f1e81a6340..94d1b4df50 100644
--- a/packages/builder/src/components/common/DetailPopover.svelte
+++ b/packages/builder/src/components/common/DetailPopover.svelte
@@ -1,14 +1,20 @@
-<script>
-  import { Popover, Icon } from "@budibase/bbui"
+<script lang="ts">
+  import {
+    Popover,
+    PopoverAlignment,
+    type PopoverAPI,
+    Icon,
+  } from "@budibase/bbui"
 
-  export let title
-  export let align = "left"
-  export let showPopover
-  export let width
+  export let title: string = ""
+  export let subtitle: string | undefined = undefined
+  export let align: PopoverAlignment = PopoverAlignment.Left
+  export let showPopover: boolean = true
+  export let width: number | undefined = undefined
 
-  let popover
-  let anchor
-  let open
+  let popover: PopoverAPI | undefined
+  let anchor: HTMLElement | undefined
+  let open: boolean = false
 
   export const show = () => popover?.show()
   export const hide = () => popover?.hide()
@@ -30,20 +36,24 @@
   {showPopover}
   on:open
   on:close
-  customZindex={100}
+  customZIndex={100}
 >
   <div class="detail-popover">
     <div class="detail-popover__header">
       <div class="detail-popover__title">
         {title}
+        <Icon
+          name="Close"
+          hoverable
+          color="var(--spectrum-global-color-gray-600)"
+          hoverColor="var(--spectrum-global-color-gray-900)"
+          on:click={hide}
+          size="S"
+        />
       </div>
-      <Icon
-        name="Close"
-        hoverable
-        color="var(--spectrum-global-color-gray-600)"
-        hoverColor="var(--spectum-global-color-gray-900)"
-        on:click={hide}
-      />
+      {#if subtitle}
+        <div class="detail-popover__subtitle">{subtitle}</div>
+      {/if}
     </div>
     <div class="detail-popover__body">
       <slot />
@@ -56,14 +66,18 @@
     background-color: var(--spectrum-alias-background-color-primary);
   }
   .detail-popover__header {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    padding: var(--spacing-l) var(--spacing-xl);
+    gap: var(--spacing-s);
+  }
+  .detail-popover__title {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    padding: var(--spacing-l) var(--spacing-xl);
-  }
-  .detail-popover__title {
     font-size: 16px;
     font-weight: 600;
   }
diff --git a/packages/builder/src/components/common/UpdateAppTopNav.svelte b/packages/builder/src/components/common/UpdateAppTopNav.svelte
index f4a76c4576..967bf1dfdf 100644
--- a/packages/builder/src/components/common/UpdateAppTopNav.svelte
+++ b/packages/builder/src/components/common/UpdateAppTopNav.svelte
@@ -25,7 +25,7 @@
 </div>
 
 <Popover
-  customZindex={998}
+  customZIndex={998}
   bind:this={formPopover}
   align="center"
   anchor={formPopoverAnchor}
diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index dabbde098b..e39d6bc853 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -96,8 +96,8 @@
       maxWidth={300}
       dismissible={false}
       offset={12}
-      handlePostionUpdate={tourStep?.positionHandler}
-      customZindex={3}
+      handlePositionUpdate={tourStep?.positionHandler}
+      customZIndex={3}
     >
       <div class="tour-content">
         <Layout noPadding gap="M">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
index 2c4c5844fb..3dba3743b4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AbsTooltip, Icon, TooltipPosition } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
 
   export let label: string | undefined = undefined
   export let value: any = undefined
@@ -9,20 +9,22 @@
   const Colors = {
     Array: "var(--spectrum-global-color-gray-600)",
     Object: "var(--spectrum-global-color-gray-600)",
-    Other: "var(--spectrum-global-color-indigo-600)",
-    Undefined: "var(--spectrum-global-color-gray-500)",
-    Null: "var(--spectrum-global-color-magenta-600)",
-    String: "var(--spectrum-global-color-orange-600)",
-    Number: "var(--spectrum-global-color-blue-600)",
-    True: "var(--spectrum-global-color-green-600)",
-    False: "var(--spectrum-global-color-red-600)",
-    Date: "var(--spectrum-global-color-green-600)",
+    Other: "var(--spectrum-global-color-blue-700)",
+    Undefined: "var(--spectrum-global-color-gray-600)",
+    Null: "var(--spectrum-global-color-yellow-700)",
+    String: "var(--spectrum-global-color-orange-700)",
+    Number: "var(--spectrum-global-color-purple-700)",
+    True: "var(--spectrum-global-color-celery-700)",
+    False: "var(--spectrum-global-color-red-700)",
+    Date: "var(--spectrum-global-color-green-700)",
   }
 
   let expanded = false
+  let valueExpanded = false
 
   $: isArray = Array.isArray(value)
   $: isObject = value?.toString?.() === "[object Object]"
+  $: primitive = !(isArray || isObject)
   $: keys = getKeys(isArray, isObject, value)
   $: expandable = keys.length > 0
   $: displayValue = getDisplayValue(isArray, isObject, keys, value)
@@ -96,13 +98,15 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="binding-node">
   {#if label != null}
     <div class="binding-text">
-      <div class="binding-arrow">
+      <div class="binding-arrow" class:expanded>
         {#if expandable}
           <Icon
-            name={expanded ? "ChevronDown" : "ChevronRight"}
+            name="Play"
             hoverable
             color="var(--spectrum-global-color-gray-600)"
             hoverColor="var(--spectrum-global-color-gray-900)"
@@ -112,19 +116,21 @@
       </div>
       <div
         class="binding-label"
+        class:primitive
         class:expandable
         on:click={() => (expanded = !expanded)}
       >
         {label}
       </div>
-      <AbsTooltip
-        text={isArray || isObject ? null : displayValue}
-        position={TooltipPosition.Right}
+      <div
+        class="binding-value"
+        class:primitive
+        class:expanded={valueExpanded}
+        {style}
+        on:click={() => (valueExpanded = !valueExpanded)}
       >
-        <div class="binding-value" class:expandable {style}>
-          {displayValue}
-        </div>
-      </AbsTooltip>
+        {displayValue}
+      </div>
     </div>
   {/if}
   {#if expandable && (expanded || label == null)}
@@ -150,24 +156,33 @@
     overflow: hidden;
   }
   .binding-arrow {
-    margin-right: 2px;
+    margin: -3px 2px -2px 0;
     flex: 0 0 18px;
+    transition: transform 130ms ease-out;
+  }
+  .binding-arrow :global(svg) {
+    width: 9px;
+  }
+  .binding-arrow.expanded {
+    transform: rotate(90deg);
   }
   .binding-text {
     display: flex;
     flex-direction: row;
-    align-items: center;
     font-family: monospace;
     font-size: 12px;
+    align-items: flex-start;
     width: 100%;
   }
   .binding-children {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    /* border-left: 1px solid var(--spectrum-global-color-gray-400); */
-    /* margin-left: 20px; */
-    padding-left: 18px;
+    /*padding-left: 18px;*/
+
+    border-left: 1px solid var(--spectrum-global-color-gray-400);
+    margin-left: 20px;
+    padding-left: 3px;
   }
   .binding-children.root {
     border-left: none;
@@ -176,31 +191,40 @@
   }
 
   /* Size label and value according to type */
-  .binding-label,
-  .binding-value {
+  .binding-label {
+    flex: 0 1 auto;
+    margin-right: 8px;
+    transition: color 130ms ease-out;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .binding-label {
-    flex: 0 0 auto;
-    max-width: 50%;
-    margin-right: 8px;
-    transition: color 130ms ease-out;
-  }
   .binding-label.expandable:hover {
     cursor: pointer;
     color: var(--spectrum-global-color-gray-900);
   }
   .binding-value {
-    flex: 0 1 auto;
-  }
-  .binding-label.expandable {
-    flex: 0 1 auto;
-    max-width: none;
-  }
-  .binding-value.expandable {
     flex: 0 0 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    transition: filter 130ms ease-out;
+  }
+  .binding-value.primitive:hover {
+    filter: brightness(1.25);
+    cursor: pointer;
+  }
+  .binding-value.expanded {
+    word-break: break-all;
+    white-space: wrap;
+  }
+
+  .binding-label.primitive {
+    flex: 0 0 auto;
+    max-width: 50%;
+  }
+  .binding-value.primitive {
+    flex: 0 1 auto;
   }
 
   /* Trim spans in the highlighted HTML */
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index b7bc394539..1da4c42ac6 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionButton, Modal, ModalContent, Helpers } from "@budibase/bbui"
+  import { ActionButton, Helpers, PopoverAlignment } from "@budibase/bbui"
   import {
     previewStore,
     selectedScreen,
@@ -9,6 +9,7 @@
   import { getBindableProperties } from "@/dataBinding"
   import BindingNode from "./BindingExplorer/BindingNode.svelte"
   import { processObjectSync } from "@budibase/string-templates"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
 
   // Minimal typing for the real data binding structure, as none exists
   type DataBinding = {
@@ -17,18 +18,11 @@
     readableBinding: string
   }
 
-  let modal: any
-
   $: previewContext = $previewStore.selectedComponentContext || {}
   $: selectedComponentId = $componentStore.selectedComponentId
   $: context = makeContext(previewContext, bindings)
   $: bindings = getBindableProperties($selectedScreen, selectedComponentId)
 
-  const show = () => {
-    previewStore.requestComponentContext()
-    modal.show()
-  }
-
   const makeContext = (
     previewContext: Record<string, any>,
     bindings: DataBinding[]
@@ -77,15 +71,32 @@
   }
 </script>
 
-<ActionButton on:click={show}>Bindings</ActionButton>
-
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Bindings"
-    showConfirmButton={false}
-    cancelText="Close"
-    size="M"
-  >
+<DetailPopover
+  title="Data context"
+  subtitle="Showing all bindable data context available on the /employees screen."
+  align={PopoverAlignment.Right}
+>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      icon="Code"
+      quiet
+      selected={open}
+      on:click={previewStore.requestComponentContext}
+    >
+      Data context
+    </ActionButton>
+  </svelte:fragment>
+  <div class="bindings">
     <BindingNode value={context} />
-  </ModalContent>
-</Modal>
+  </div>
+</DetailPopover>
+
+<style>
+  .bindings {
+    margin: calc(-1 * var(--spacing-xl));
+    padding: 20px 12px;
+    background: var(--spectrum-global-color-gray-50);
+    overflow-y: auto;
+    max-height: 600px;
+  }
+</style>

From 3cdcc44cbeb74651b59b10d968204646315e7426 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 17 Jan 2025 10:10:52 +0000
Subject: [PATCH 16/81] further popover changes / ts updates

---
 packages/bbui/src/Form/Combobox.svelte        |  21 +--
 packages/bbui/src/Form/Core/Combobox.svelte   |  14 +-
 packages/bbui/src/Icon/Icon.svelte            |  31 ++--
 .../[screenId]/_components/StatePanel.svelte  | 162 +++++++++++-------
 4 files changed, 134 insertions(+), 94 deletions(-)

diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index 18a2359c30..44854d949e 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -1,17 +1,17 @@
-<script lang="ts">
+<script>
   import Field from "./Field.svelte"
   import Combobox from "./Core/Combobox.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value: string | null = null
-  export let label: string | undefined = undefined
-  export let disabled: boolean = false
-  export let readonly: boolean = false
-  export let labelPosition: string = "above"
-  export let error: string | null = null
-  export let placeholder: string = "Choose an option or type"
-  export let options: any[] = []
-  export let helpText: string | null = null
+  export let value = null
+  export let label = undefined
+  export let disabled = false
+  export let readonly = false
+  export let labelPosition = "above"
+  export let error = null
+  export let placeholder = "Choose an option or type"
+  export let options = []
+  export let helpText = null
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
 
@@ -30,6 +30,7 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Combobox
+    {error}
     {disabled}
     {value}
     {options}
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index 8f805fbba6..c38cf1d9b1 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
@@ -6,12 +6,12 @@
   import clickOutside from "../../Actions/click_outside"
   import Popover from "../../Popover/Popover.svelte"
 
-  export let value: string | null = null
-  export let id: string | null = null
-  export let placeholder: string = "Choose an option or type"
-  export let disabled: boolean = false
-  export let readonly: boolean = false
-  export let options: any[] = []
+  export let value = null
+  export let id = null
+  export let placeholder = "Choose an option or type"
+  export let disabled = false
+  export let readonly = false
+  export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 73ad8edd10..d777405772 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -1,23 +1,26 @@
-<script>
+<script lang="ts">
   import {
     default as AbsTooltip,
     TooltipPosition,
     TooltipType,
   } from "../Tooltip/AbsTooltip.svelte"
 
-  export let name = "Add"
-  export let hidden = false
-  export let size = "M"
-  export let hoverable = false
-  export let disabled = false
-  export let color
-  export let hoverColor
-  export let tooltip
-  export let tooltipPosition = TooltipPosition.Bottom
-  export let tooltipType = TooltipType.Default
-  export let tooltipColor
-  export let tooltipWrap = true
-  export let newStyles = false
+  type TooltipPositionType =
+    (typeof TooltipPosition)[keyof typeof TooltipPosition]
+
+  export let name: string = "Add"
+  export let hidden: boolean = false
+  export let size: string = "M"
+  export let hoverable: boolean = false
+  export let disabled: boolean = false
+  export let color: string | undefined = undefined
+  export let hoverColor: string | undefined = undefined
+  export let tooltip: string | undefined = undefined
+  export let tooltipPosition: TooltipPositionType = TooltipPosition.Bottom
+  export let tooltipType: TooltipPositionType = TooltipType.Default
+  export let tooltipColor: string | undefined = undefined
+  export let tooltipWrap: boolean = true
+  export let newStyles: boolean = false
 </script>
 
 <AbsTooltip
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 9469f74923..b52a27c23e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionButton, Modal, ModalContent, Combobox } from "@budibase/bbui"
+  import { ActionButton, Popover, Divider, Icon, Select } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
   import {
     componentStore,
@@ -11,25 +11,33 @@
     findHBSBlocks,
     isJSBinding,
   } from "@budibase/string-templates"
+  import { onMount } from "svelte"
 
   type ComponentUsingState = {
     id: string
     name: string
     settings: string[]
-  }[]
-
-  let modal: Modal
-  let selectedKey: string | null = null
-  let componentsUsingState: ComponentUsingState = []
-  let componentsUpdatingState: ComponentUsingState = []
+  }
 
   const keyOptions = getAllStateVariables()
 
+  let popoverAnchor: any
+  let popover: any
+  let selectedKey: string | null
+  let componentsUsingState: ComponentUsingState[] = []
+  let componentsUpdatingState: ComponentUsingState[] = []
+
+  onMount(() => {
+    if (selectedKey) {
+      searchComponents(selectedKey)
+    }
+  })
+
   function findComponentsUpdatingState(
     component: any,
     stateKey: string
-  ): ComponentUsingState {
-    let foundComponents: ComponentUsingState = []
+  ): ComponentUsingState[] {
+    let foundComponents: ComponentUsingState[] = []
 
     const eventHandlerProps = ["onClick", "onChange"]
 
@@ -66,12 +74,8 @@
   function findComponentsUsingState(
     component: any,
     stateKey: string
-  ): Array<{ id: string; name: string; settings: string[] }> {
-    let componentsUsingState: Array<{
-      id: string
-      name: string
-      settings: string[]
-    }> = []
+  ): ComponentUsingState[] {
+    let componentsUsingState: ComponentUsingState[] = []
 
     const { _children, ...componentSettings } = component
     let settingsWithState: string[] = []
@@ -114,61 +118,83 @@
     return componentsUsingState
   }
 
+  function searchComponents(stateKey: string) {
+    if (!stateKey || !$selectedScreen?.props) {
+      return
+    }
+    componentsUsingState = findComponentsUsingState(
+      $selectedScreen.props,
+      stateKey
+    )
+    componentsUpdatingState = findComponentsUpdatingState(
+      $selectedScreen.props,
+      stateKey
+    )
+  }
+
   function handleStateKeySelect(event: CustomEvent) {
     selectedKey = event.detail
     if (!selectedKey) {
       throw new Error("No state key selected")
     }
-    if ($selectedScreen?.props) {
-      componentsUsingState = findComponentsUsingState(
-        $selectedScreen.props,
-        selectedKey
-      )
-      componentsUpdatingState = findComponentsUpdatingState(
-        $selectedScreen.props,
-        selectedKey
-      )
-    }
+    searchComponents(selectedKey)
   }
 
-  function onClickComponentLink(component: {
-    id: string
-    name: string
-    settings: string[]
-  }) {
+  function onClickComponentLink(component: ComponentUsingState) {
     componentStore.select(component.id)
     component.settings.forEach(setting => {
       builderStore.highlightSetting(setting)
     })
+    popover.hide()
   }
 </script>
 
-<ActionButton on:click={modal.show}>State</ActionButton>
+<div bind:this={popoverAnchor}>
+  <ActionButton on:click={popover.show}>State</ActionButton>
+</div>
+
+<Popover bind:this={popover} anchor={popoverAnchor} align="right">
+  <div class="state-panel">
+    <div class="split-title">
+      <div>State</div>
+      <div>
+        <Icon size="S" hoverable name="Close" on:click={popover.hide} />
+      </div>
+    </div>
+    <div>
+      Showing state variables for {$selectedScreen?.routing?.route.split(
+        "/"
+      )[1]}:
+    </div>
+    <div class="section">
+      <Select
+        value={selectedKey}
+        placeholder="Type here..."
+        options={keyOptions}
+        on:change={handleStateKeySelect}
+      />
+    </div>
+    <Divider />
+    <div class="section">state inspector here</div>
+    <Divider />
 
-<Modal bind:this={modal}>
-  <ModalContent title="State" showConfirmButton={false} cancelText="Close">
-    <Combobox
-      value={selectedKey}
-      options={keyOptions}
-      on:change={handleStateKeySelect}
-    />
     {#if componentsUsingState.length > 0}
-      <div class="components-list">
-        <h4>Components using this state:</h4>
-        {#each componentsUsingState as component}
+      <div class="section">
+        <span class="text">Updates:</span>
+        {#each componentsUsingState as component, i}
           <button
             class="component-link"
             on:click={() => onClickComponentLink(component)}
           >
-            {component.name} ({component.settings.join(", ")})
+            {component.name}{i < componentsUsingState.length - 1 ? ", " : ""}
           </button>
         {/each}
       </div>
     {/if}
     {#if componentsUpdatingState.length > 0}
-      <div class="components-list">
-        <h4>Components updating this state:</h4>
-        {#each componentsUpdatingState as component}
+      <div class="section">
+        <span class="text">Updated by:</span>
+        {#each componentsUpdatingState as component, i}
           <button
             class="component-link"
             on:click={() =>
@@ -178,38 +204,48 @@
                 settings: component.settings,
               })}
           >
-            {component.name} (via {component.settings.join(", ")})
+            {component.name}{i < componentsUpdatingState.length - 1 ? ", " : ""}
           </button>
         {/each}
       </div>
     {/if}
-  </ModalContent>
-</Modal>
+  </div>
+</Popover>
 
 <style>
-  .components-list {
-    margin-top: var(--spacing-m);
+  .state-panel {
+    background-color: var(--spectrum-alias-background-color-primary);
+    max-width: 300px;
+    min-width: 300px;
     padding: var(--spacing-m);
-    background-color: var(--spectrum-global-color-gray-50);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
   }
-  .components-list h4 {
-    margin: 0 0 var(--spacing-s) 0;
-    font-size: 14px;
+  .section {
+    gap: var(--spacing-s);
+  }
+  .text {
+    color: var(--spectrum-global-color-gray-700);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
   .component-link {
-    display: block;
-    width: 100%;
-    text-align: left;
-    padding: var(--spacing-xs) var(--spacing-s);
-    margin: 2px 0;
+    display: inline;
     border: none;
     background: none;
-    color: var(--spectrum-global-color-blue-700);
+    text-decoration: underline;
+    color: var(--spectrum-global-color-white);
     cursor: pointer;
-    font-size: 12px;
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    padding: 0;
   }
   .component-link:hover {
-    background-color: var(--spectrum-global-color-gray-200);
-    border-radius: 4px;
+    text-decoration: underline;
+  }
+
+  .split-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 </style>

From c902c66c56ddad1fb73901e5158c8a41b94247f3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 17 Jan 2025 16:26:42 +0000
Subject: [PATCH 17/81] Add side nav tabs for bindings and state

---
 .../[screenId]/_components/LeftPanel.svelte   | 42 +++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index fa3ad5f6be..b680140170 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -1,15 +1,41 @@
-<script>
+<script lang="ts">
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
   import { getHorizontalResizeActions } from "@/components/common/resizable"
+  import { ActionButton } from "@budibase/bbui"
 
   const [resizable, resizableHandle] = getHorizontalResizeActions()
+
+  enum Tabs {
+    Components = "Components",
+    Bindings = "Bindings",
+    State = "State",
+  }
+
+  let activeTab = Tabs.Components
 </script>
 
 <div class="panel" use:resizable>
   <div class="content">
     <ScreenList />
-    <ComponentList />
+    <div class="tabs">
+      {#each Object.values(Tabs) as tab}
+        <ActionButton
+          quiet
+          selected={activeTab === tab}
+          on:click={() => (activeTab = tab)}
+        >
+          {tab}
+        </ActionButton>
+      {/each}
+    </div>
+    {#if activeTab === Tabs.Components}
+      <ComponentList />
+    {:else if activeTab === Tabs.Bindings}
+      <div class="tab-content">Bindings</div>
+    {:else if activeTab === Tabs.State}
+      <div class="tab-content">State</div>
+    {/if}
   </div>
   <div class="divider">
     <div class="dividerClickExtender" role="separator" use:resizableHandle />
@@ -34,6 +60,17 @@
     position: relative;
   }
 
+  .tabs {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    padding: var(--spacing-m) var(--spacing-l);
+    border-bottom: var(--border-light);
+  }
+  .tab-content {
+    padding: var(--spacing-l);
+  }
+
   .divider {
     position: relative;
     height: 100%;
@@ -45,7 +82,6 @@
     background: var(--spectrum-global-color-gray-300);
     cursor: row-resize;
   }
-
   .dividerClickExtender {
     position: absolute;
     cursor: col-resize;

From 8bf6b6c4d89ead03ea0c45058272641732dea06f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 12:02:06 +0000
Subject: [PATCH 18/81] Move bindings panel into left panel

---
 .../[screenId]/[componentId]/_layout.svelte   |  2 +-
 .../[screenId]/_components/AppPanel.svelte    |  3 --
 .../BindingExplorer/BindingNode.svelte        |  4 +-
 .../_components/BindingsPanel.svelte          | 48 +++++++++----------
 .../[screenId]/_components/LeftPanel.svelte   |  7 ++-
 5 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 16fe7d9c2f..f5dec6371f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -30,7 +30,7 @@
     if (id === `${$screenStore.selectedScreenId}-screen`) return true
     if (id === `${$screenStore.selectedScreenId}-navigation`) return true
 
-    return !!findComponent($selectedScreen.props, id)
+    return !!findComponent($selectedScreen?.props, id)
   }
 
   // Keep URL and state in sync for selected component ID
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 3df2332543..639f648a55 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
@@ -3,8 +3,6 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
-  import { ActionButton } from "@budibase/bbui"
-  import BindingsPanel from "./BindingsPanel.svelte"
   import StatePanel from "./StatePanel.svelte"
 </script>
 
@@ -18,7 +16,6 @@
       {/if}
     </div>
     <div class="header-right">
-      <BindingsPanel />
       <StatePanel />
     </div>
   </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
index 3dba3743b4..b2a696262d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
@@ -156,8 +156,8 @@
     overflow: hidden;
   }
   .binding-arrow {
-    margin: -3px 2px -2px 0;
-    flex: 0 0 18px;
+    margin: -3px 6px -2px 4px;
+    flex: 0 0 9px;
     transition: transform 130ms ease-out;
   }
   .binding-arrow :global(svg) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 1da4c42ac6..f4d622cfd3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionButton, Helpers, PopoverAlignment } from "@budibase/bbui"
+  import { Link, Body, Helpers, Layout } from "@budibase/bbui"
   import {
     previewStore,
     selectedScreen,
@@ -9,7 +9,7 @@
   import { getBindableProperties } from "@/dataBinding"
   import BindingNode from "./BindingExplorer/BindingNode.svelte"
   import { processObjectSync } from "@budibase/string-templates"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { onMount } from "svelte"
 
   // Minimal typing for the real data binding structure, as none exists
   type DataBinding = {
@@ -69,34 +69,32 @@
     }
     return context
   }
+
+  onMount(previewStore.requestComponentContext)
 </script>
 
-<DetailPopover
-  title="Data context"
-  subtitle="Showing all bindable data context available on the /employees screen."
-  align={PopoverAlignment.Right}
->
-  <svelte:fragment slot="anchor" let:open>
-    <ActionButton
-      icon="Code"
-      quiet
-      selected={open}
-      on:click={previewStore.requestComponentContext}
-    >
-      Data context
-    </ActionButton>
-  </svelte:fragment>
-  <div class="bindings">
+<div class="bindings-panel">
+  <Layout noPadding gap="S">
+    <div class="text">
+      <Body size="S">Showing all available bindings.</Body>
+      <Link href="/">Learn more.</Link>
+    </div>
     <BindingNode value={context} />
-  </div>
-</DetailPopover>
+  </Layout>
+</div>
 
 <style>
-  .bindings {
-    margin: calc(-1 * var(--spacing-xl));
-    padding: 20px 12px;
-    background: var(--spectrum-global-color-gray-50);
+  .bindings-panel {
+    flex: 1 1 auto;
+    height: 0;
     overflow-y: auto;
-    max-height: 600px;
+    overflow-x: hidden;
+    padding: var(--spacing-l);
+  }
+  .text {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    flex-wrap: wrap;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index b680140170..ed2cda53d6 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -3,6 +3,7 @@
   import ComponentList from "./ComponentList/index.svelte"
   import { getHorizontalResizeActions } from "@/components/common/resizable"
   import { ActionButton } from "@budibase/bbui"
+  import BindingsPanel from "./BindingsPanel.svelte"
 
   const [resizable, resizableHandle] = getHorizontalResizeActions()
 
@@ -32,7 +33,7 @@
     {#if activeTab === Tabs.Components}
       <ComponentList />
     {:else if activeTab === Tabs.Bindings}
-      <div class="tab-content">Bindings</div>
+      <BindingsPanel />
     {:else if activeTab === Tabs.State}
       <div class="tab-content">State</div>
     {/if}
@@ -68,6 +69,10 @@
     border-bottom: var(--border-light);
   }
   .tab-content {
+    flex: 1 1 auto;
+    height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
     padding: var(--spacing-l);
   }
 

From c3b4a3690331085d3bd2a4dfdddd4e179ccb0f09 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 14:32:17 +0000
Subject: [PATCH 19/81] Add link to bindings docs

---
 packages/bbui/src/Link/Link.svelte                         | 4 ++--
 .../design/[screenId]/_components/BindingsPanel.svelte     | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
index 58f999473a..d43f7256e7 100644
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@@ -9,8 +9,8 @@
   export let primary = false
   export let secondary = false
   export let overBackground = false
-  export let target
-  export let download
+  export let target = undefined
+  export let download = undefined
   export let disabled = false
   export let tooltip = null
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index f4d622cfd3..47540f3085 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -77,7 +77,12 @@
   <Layout noPadding gap="S">
     <div class="text">
       <Body size="S">Showing all available bindings.</Body>
-      <Link href="/">Learn more.</Link>
+      <Link
+        target="_blank"
+        href="https://docs.budibase.com/docs/introduction-to-bindings"
+      >
+        Learn more.
+      </Link>
     </div>
     <BindingNode value={context} />
   </Layout>

From 034369119ce5b324774f6da47293e0c3410f9fbd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 14:48:45 +0000
Subject: [PATCH 20/81] Add copy icon on hover

---
 .../BindingExplorer/BindingNode.svelte        | 62 ++++++++++++++-----
 1 file changed, 45 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
index b2a696262d..e5339119cb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Icon } from "@budibase/bbui"
+  import { Icon, notifications, Helpers } from "@budibase/bbui"
 
   export let label: string | undefined = undefined
   export let value: any = undefined
@@ -96,6 +96,11 @@
     }
     return Colors.Other
   }
+
+  const copyValue = () => {
+    Helpers.copyToClipboard(JSON.stringify(value))
+    notifications.success("Value copied to clipboard")
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -131,6 +136,16 @@
       >
         {displayValue}
       </div>
+      <div class="copy-value-icon">
+        <Icon
+          name="Copy"
+          size="XS"
+          hoverable
+          color="var(--spectrum-global-color-gray-600)"
+          hoverColor="var(--spectrum-global-color-gray-900)"
+          on:click={copyValue}
+        />
+      </div>
     </div>
   {/if}
   {#if expandable && (expanded || label == null)}
@@ -155,6 +170,8 @@
     gap: 8px;
     overflow: hidden;
   }
+
+  /* Expand arrow */
   .binding-arrow {
     margin: -3px 6px -2px 4px;
     flex: 0 0 9px;
@@ -166,6 +183,8 @@
   .binding-arrow.expanded {
     transform: rotate(90deg);
   }
+
+  /* Main text wrapper */
   .binding-text {
     display: flex;
     flex-direction: row;
@@ -174,21 +193,6 @@
     align-items: flex-start;
     width: 100%;
   }
-  .binding-children {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    /*padding-left: 18px;*/
-
-    border-left: 1px solid var(--spectrum-global-color-gray-400);
-    margin-left: 20px;
-    padding-left: 3px;
-  }
-  .binding-children.root {
-    border-left: none;
-    margin-left: 0;
-    padding-left: 0;
-  }
 
   /* Size label and value according to type */
   .binding-label {
@@ -209,6 +213,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     transition: filter 130ms ease-out;
+    user-select: none;
   }
   .binding-value.primitive:hover {
     filter: brightness(1.25);
@@ -218,7 +223,6 @@
     word-break: break-all;
     white-space: wrap;
   }
-
   .binding-label.primitive {
     flex: 0 0 auto;
     max-width: 50%;
@@ -233,4 +237,28 @@
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
+
+  /* Copy icon for value */
+  .copy-value-icon {
+    display: none;
+    margin-left: 8px;
+  }
+  .binding-text:hover .copy-value-icon {
+    display: block;
+  }
+
+  /* Children wrapper */
+  .binding-children {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-left: 1px solid var(--spectrum-global-color-gray-400);
+    margin-left: 20px;
+    padding-left: 3px;
+  }
+  .binding-children.root {
+    border-left: none;
+    margin-left: 0;
+    padding-left: 0;
+  }
 </style>

From 97447981dccadea35c55f6bc32fbab53a3a430df Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 16:04:39 +0000
Subject: [PATCH 21/81] Update behaviour for copying bindings

---
 .../_components/BindingExplorer/BindingNode.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
index e5339119cb..0b7b54214c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
@@ -75,6 +75,9 @@
     if (isObject) {
       return Colors.Object
     }
+    if (value instanceof Date) {
+      return Colors.Date
+    }
     switch (value) {
       case undefined:
         return Colors.Undefined
@@ -91,15 +94,12 @@
       case "number":
         return Colors.Number
     }
-    if (value instanceof Date) {
-      return Colors.Date
-    }
     return Colors.Other
   }
 
-  const copyValue = () => {
-    Helpers.copyToClipboard(JSON.stringify(value))
-    notifications.success("Value copied to clipboard")
+  const copyBinding = () => {
+    Helpers.copyToClipboard(readableBinding)
+    notifications.success("Binding copied to clipboard")
   }
 </script>
 
@@ -143,7 +143,7 @@
           hoverable
           color="var(--spectrum-global-color-gray-600)"
           hoverColor="var(--spectrum-global-color-gray-900)"
-          on:click={copyValue}
+          on:click={copyBinding}
         />
       </div>
     </div>

From 1edf3800536d853be5fa55be6464668eabdd86cb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 16:07:59 +0000
Subject: [PATCH 22/81] Update component panel to remove header and add
 component button

---
 .../_components/ComponentList/index.svelte    | 51 ++-----------------
 1 file changed, 3 insertions(+), 48 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index eb5a57ec9c..d97d4e58be 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { notifications, Icon, Body } from "@budibase/bbui"
-  import { isActive, goto } from "@roxi/routify"
+  import { notifications, Icon } from "@budibase/bbui"
   import {
     selectedScreen,
     screenStore,
@@ -17,19 +16,9 @@
   import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
   import getScreenContextMenuItems from "./getScreenContextMenuItems"
 
-  let scrolling = false
-
   $: screenComponentId = `${$screenStore.selectedScreenId}-screen`
   $: navComponentId = `${$screenStore.selectedScreenId}-navigation`
 
-  const toNewComponentRoute = () => {
-    if ($isActive(`./:componentId/new`)) {
-      $goto(`./:componentId`)
-    } else {
-      $goto(`./:componentId/new`)
-    }
-  }
-
   const onDrop = async () => {
     try {
       await dndStore.actions.drop()
@@ -39,10 +28,6 @@
     }
   }
 
-  const handleScroll = e => {
-    scrolling = e.target.scrollTop !== 0
-  }
-
   const hover = hoverStore.hover
 
   // showCopy is used to hide the copy button when the user right-clicks the empty
@@ -72,17 +57,9 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="components">
-  <div class="header" class:scrolling>
-    <Body size="S">Components</Body>
-    <div on:click={toNewComponentRoute} class="addButton">
-      <Icon name="Add" />
-    </div>
-  </div>
   <div class="list-panel">
-    <ComponentScrollWrapper on:scroll={handleScroll}>
+    <ComponentScrollWrapper>
       <ul
         class="componentTree"
         on:contextmenu={e => openScreenContextMenu(e, false)}
@@ -168,35 +145,13 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-  }
-
-  .header {
-    height: 50px;
-    box-sizing: border-box;
-    padding: var(--spacing-l);
-    display: flex;
-    align-items: center;
-    border-bottom: 2px solid transparent;
-    transition: border-bottom 130ms ease-out;
-  }
-  .header.scrolling {
-    border-bottom: var(--border-light);
+    padding-top: var(--spacing-l);
   }
 
   .components :global(.nav-item) {
     padding-right: 8px !important;
   }
 
-  .addButton {
-    margin-left: auto;
-    color: var(--grey-7);
-    cursor: pointer;
-  }
-
-  .addButton:hover {
-    color: var(--ink);
-  }
-
   .list-panel {
     display: flex;
     flex-direction: column;

From d872ee19d02c7b5fad5a50b16830d833c585985c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 16:09:01 +0000
Subject: [PATCH 23/81] Move components around

---
 .../_components/{BindingExplorer => }/BindingNode.svelte    | 0
 .../design/[screenId]/_components/BindingsPanel.svelte      | 6 +++---
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/{BindingExplorer => }/BindingNode.svelte (100%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 47540f3085..d7e1138775 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { onMount } from "svelte"
   import { Link, Body, Helpers, Layout } from "@budibase/bbui"
+  import { processObjectSync } from "@budibase/string-templates"
   import {
     previewStore,
     selectedScreen,
@@ -7,9 +9,7 @@
     snippets,
   } from "@/stores/builder"
   import { getBindableProperties } from "@/dataBinding"
-  import BindingNode from "./BindingExplorer/BindingNode.svelte"
-  import { processObjectSync } from "@budibase/string-templates"
-  import { onMount } from "svelte"
+  import BindingNode from "./BindingNode.svelte"
 
   // Minimal typing for the real data binding structure, as none exists
   type DataBinding = {

From f0594c63d588b0a372e0e7a6eff647fb3b0d92d9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 16:19:28 +0000
Subject: [PATCH 24/81] Remove example data types

---
 .../_components/BindingsPanel.svelte           | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index d7e1138775..6e19cab955 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -42,28 +42,14 @@
       snippets: $snippets,
     }) as any[]
 
-    // Enrich bindings with evaluations and highlighted HTML
+    // Deeply set values for all readable bindings
     const enrichedBindings: any[] = bindings.map((binding, idx) => {
       return {
         ...binding,
         value: bindingEvaluations[idx],
       }
     })
-
-    let context = {
-      _dataTypes: {
-        date: new Date(),
-        string: "foo",
-        number: 1234,
-        undefined: undefined,
-        null: null,
-        true: true,
-        false: false,
-        array: [1, 2, 3],
-        object: { foo: "bar" },
-        error: new Error(),
-      },
-    }
+    let context = {}
     for (let binding of enrichedBindings) {
       Helpers.deepSet(context, binding.readableBinding, binding.value)
     }

From 007157d5ba5f0cfb99e89cc91eb2a3a929f7fb06 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Jan 2025 16:37:11 +0000
Subject: [PATCH 25/81] Fix lint

---
 .../design/[screenId]/_components/LeftPanel.svelte        | 8 ++++----
 .../design/[screenId]/_components/StatePanel.svelte       | 1 -
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index ed2cda53d6..ea285621cd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -7,10 +7,10 @@
 
   const [resizable, resizableHandle] = getHorizontalResizeActions()
 
-  enum Tabs {
-    Components = "Components",
-    Bindings = "Bindings",
-    State = "State",
+  const Tabs = {
+    Components: "Components",
+    Bindings: "Bindings",
+    State: "State",
   }
 
   let activeTab = Tabs.Components
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 5212f243af..b9cd2002d0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,7 +1,6 @@
 <script>
   import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
 
-  let visible = false
   let modal
 </script>
 

From c185e806b60b51dc7ea23947be333ad5df1ea0f4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jan 2025 10:32:45 +0000
Subject: [PATCH 26/81] Type AbsTooltip

---
 asd                                         |  0
 packages/bbui/src/Tooltip/AbsTooltip.svelte | 50 ++++++++++-----------
 2 files changed, 25 insertions(+), 25 deletions(-)
 delete mode 100644 asd

diff --git a/asd b/asd
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index b85f4e1c03..c084e460b6 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -1,38 +1,38 @@
-<script context="module">
-  export const TooltipPosition = {
-    Top: "top",
-    Right: "right",
-    Bottom: "bottom",
-    Left: "left",
+<script context="module" lang="ts">
+  export enum TooltipPosition {
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom",
+    Left = "left",
   }
-  export const TooltipType = {
-    Default: "default",
-    Info: "info",
-    Positive: "positive",
-    Negative: "negative",
+  export enum TooltipType {
+    Default = "default",
+    Info = "info",
+    Positive = "positive",
+    Negative = "negative",
   }
 </script>
 
-<script>
+<script lang="ts">
   import Portal from "svelte-portal"
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
   import { onDestroy } from "svelte"
 
-  export let position = TooltipPosition.Top
-  export let type = TooltipType.Default
-  export let text = ""
-  export let fixed = false
-  export let color = null
-  export let noWrap = false
+  export let position: TooltipPosition = TooltipPosition.Top
+  export let type: TooltipType = TooltipType.Default
+  export let text: string = ""
+  export let fixed: boolean = false
+  export let color: string | undefined = undefined
+  export let noWrap: boolean = false
 
-  let wrapper
+  let wrapper: HTMLElement | undefined
   let hovered = false
-  let left
-  let top
+  let left: number | undefined
+  let top: number | undefined
   let visible = false
-  let timeout
-  let interval
+  let timeout: ReturnType<typeof setTimeout> | undefined
+  let interval: ReturnType<typeof setInterval> | undefined
 
   $: {
     if (hovered || fixed) {
@@ -49,8 +49,8 @@
   const updateTooltipPosition = () => {
     const node = wrapper?.children?.[0]
     if (!node) {
-      left = null
-      top = null
+      left = undefined
+      top = undefined
       return
     }
     const bounds = node.getBoundingClientRect()

From 10748505382a06ae8234a50851d5e38a22eb5181 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Jan 2025 10:49:35 +0000
Subject: [PATCH 27/81] add ability for user to add default state value

---
 .../[screenId]/_components/AppPanel.svelte    |   2 -
 .../[screenId]/_components/LeftPanel.svelte   |   3 +-
 .../[screenId]/_components/StatePanel.svelte  | 162 ++++++++++--------
 .../builder/src/stores/builder/preview.ts     |   4 +
 packages/client/src/index.js                  |   4 +
 5 files changed, 104 insertions(+), 71 deletions(-)

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 3df2332543..108103cde3 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
@@ -5,7 +5,6 @@
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
   import { ActionButton } from "@budibase/bbui"
   import BindingsPanel from "./BindingsPanel.svelte"
-  import StatePanel from "./StatePanel.svelte"
 </script>
 
 <div class="app-panel">
@@ -19,7 +18,6 @@
     </div>
     <div class="header-right">
       <BindingsPanel />
-      <StatePanel />
     </div>
   </div>
   <div class="content">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index b680140170..a46efb8a8a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -3,6 +3,7 @@
   import ComponentList from "./ComponentList/index.svelte"
   import { getHorizontalResizeActions } from "@/components/common/resizable"
   import { ActionButton } from "@budibase/bbui"
+  import StatePanel from "./StatePanel.svelte"
 
   const [resizable, resizableHandle] = getHorizontalResizeActions()
 
@@ -34,7 +35,7 @@
     {:else if activeTab === Tabs.Bindings}
       <div class="tab-content">Bindings</div>
     {:else if activeTab === Tabs.State}
-      <div class="tab-content">State</div>
+      <div class="tab-content"><StatePanel /></div>
     {/if}
   </div>
   <div class="divider">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index b52a27c23e..be47a18b3e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -5,6 +5,7 @@
     componentStore,
     selectedScreen,
     builderStore,
+    previewStore,
   } from "@/stores/builder"
   import {
     decodeJSBinding,
@@ -12,7 +13,7 @@
     isJSBinding,
   } from "@budibase/string-templates"
   import { onMount } from "svelte"
-
+  import CodeMirrorEditor from "@/components/common/CodeMirrorEditor.svelte"
   type ComponentUsingState = {
     id: string
     name: string
@@ -21,18 +22,29 @@
 
   const keyOptions = getAllStateVariables()
 
-  let popoverAnchor: any
-  let popover: any
-  let selectedKey: string | null
+  let selectedKey: string | undefined = undefined
   let componentsUsingState: ComponentUsingState[] = []
   let componentsUpdatingState: ComponentUsingState[] = []
+  let editorValue: string = ""
 
   onMount(() => {
     if (selectedKey) {
       searchComponents(selectedKey)
     }
+    previewStore.requestComponentContext()
   })
 
+  $: {
+    let previewContext = $previewStore.selectedComponentContext || {}
+
+    if (selectedKey && previewContext.state) {
+      // It's unlikely value will ever be populated immediately as state is never populated automatically in preview
+      const value = previewContext.state[selectedKey] ?? null
+      editorValue = JSON.stringify(value, null, 2)
+    } else {
+      editorValue = ""
+    }
+  }
   function findComponentsUpdatingState(
     component: any,
     stateKey: string
@@ -145,78 +157,92 @@
     component.settings.forEach(setting => {
       builderStore.highlightSetting(setting)
     })
-    popover.hide()
+  }
+
+  function handleStateInspectorChange(e: CustomEvent) {
+    if (!selectedKey || !$previewStore.selectedComponentContext) {
+      throw new Error("No state key selected")
+    }
+
+    if (!e.detail) {
+      return
+    }
+
+    const value = JSON.parse(e.detail)
+    const stateUpdate = { [selectedKey]: value }
+
+    previewStore.updateState(stateUpdate)
+
+    previewStore.setSelectedComponentContext({
+      ...$previewStore.selectedComponentContext,
+      state: stateUpdate,
+    })
+
+    previewStore.requestComponentContext()
   }
 </script>
 
-<div bind:this={popoverAnchor}>
-  <ActionButton on:click={popover.show}>State</ActionButton>
-</div>
-
-<Popover bind:this={popover} anchor={popoverAnchor} align="right">
-  <div class="state-panel">
-    <div class="split-title">
-      <div>State</div>
-      <div>
-        <Icon size="S" hoverable name="Close" on:click={popover.hide} />
-      </div>
-    </div>
-    <div>
-      Showing state variables for {$selectedScreen?.routing?.route.split(
-        "/"
-      )[1]}:
-    </div>
-    <div class="section">
-      <Select
-        value={selectedKey}
-        placeholder="Type here..."
-        options={keyOptions}
-        on:change={handleStateKeySelect}
-      />
-    </div>
-    <Divider />
-    <div class="section">state inspector here</div>
-    <Divider />
-
-    {#if componentsUsingState.length > 0}
-      <div class="section">
-        <span class="text">Updates:</span>
-        {#each componentsUsingState as component, i}
-          <button
-            class="component-link"
-            on:click={() => onClickComponentLink(component)}
-          >
-            {component.name}{i < componentsUsingState.length - 1 ? ", " : ""}
-          </button>
-        {/each}
-      </div>
-    {/if}
-    {#if componentsUpdatingState.length > 0}
-      <div class="section">
-        <span class="text">Updated by:</span>
-        {#each componentsUpdatingState as component, i}
-          <button
-            class="component-link"
-            on:click={() =>
-              onClickComponentLink({
-                id: component.id,
-                name: component.name,
-                settings: component.settings,
-              })}
-          >
-            {component.name}{i < componentsUpdatingState.length - 1 ? ", " : ""}
-          </button>
-        {/each}
-      </div>
-    {/if}
+<div class="state-panel">
+  <div>State</div>
+  <div>
+    Showing state variables for {$selectedScreen?.routing?.route.split("/")[1]}:
   </div>
-</Popover>
+  <div class="section">
+    <Select
+      value={selectedKey}
+      placeholder="Type here..."
+      options={keyOptions}
+      on:change={handleStateKeySelect}
+    />
+  </div>
+  <Divider />
+  <div class="section">
+    <CodeMirrorEditor
+      height={200}
+      value={editorValue}
+      resize="vertical"
+      label="State Inspector"
+      on:change={handleStateInspectorChange}
+    />
+  </div>
+  <Divider />
+
+  {#if componentsUsingState.length > 0}
+    <div class="section">
+      <span class="text">Updates:</span>
+      {#each componentsUsingState as component, i}
+        <button
+          class="component-link"
+          on:click={() => onClickComponentLink(component)}
+        >
+          {component.name}{i < componentsUsingState.length - 1 ? ", " : ""}
+        </button>
+      {/each}
+    </div>
+  {/if}
+  {#if componentsUpdatingState.length > 0}
+    <div class="section">
+      <span class="text">Updated by:</span>
+      {#each componentsUpdatingState as component, i}
+        <button
+          class="component-link"
+          on:click={() =>
+            onClickComponentLink({
+              id: component.id,
+              name: component.name,
+              settings: component.settings,
+            })}
+        >
+          {component.name}{i < componentsUpdatingState.length - 1 ? ", " : ""}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
 
 <style>
   .state-panel {
     background-color: var(--spectrum-alias-background-color-primary);
-    max-width: 300px;
-    min-width: 300px;
     padding: var(--spacing-m);
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/stores/builder/preview.ts b/packages/builder/src/stores/builder/preview.ts
index fe14c02535..87b2b9355e 100644
--- a/packages/builder/src/stores/builder/preview.ts
+++ b/packages/builder/src/stores/builder/preview.ts
@@ -82,6 +82,10 @@ export class PreviewStore extends BudiStore<PreviewState> {
     }))
   }
 
+  updateState(data: Record<string, any>) {
+    this.sendEvent("builder-state", data)
+  }
+
   requestComponentContext() {
     this.sendEvent("request-context")
   }
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index e3f5c34d3e..d601692e53 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -9,6 +9,7 @@ import {
   dndStore,
   eventStore,
   hoverStore,
+  stateStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
 import { get } from "svelte/store"
@@ -103,6 +104,9 @@ const loadBudibase = async () => {
       hoverStore.actions.hoverComponent(data, false)
     } else if (type === "builder-meta") {
       builderStore.actions.setMetadata(data)
+    } else if (type === "builder-state") {
+      const [[key, value]] = Object.entries(data)
+      stateStore.actions.setValue(key, value)
     }
   }
 

From 3bd8becab1c1374f1937c137a4e62f3b964d3b1b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jan 2025 10:57:51 +0000
Subject: [PATCH 28/81] Make binding viewer a more generic JSON viewer

---
 .../common/JSONViewer.svelte}                 | 51 ++++++++++++-------
 .../_components/BindingsPanel.svelte          | 14 +++--
 2 files changed, 45 insertions(+), 20 deletions(-)
 rename packages/builder/src/{pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte => components/common/JSONViewer.svelte} (85%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte b/packages/builder/src/components/common/JSONViewer.svelte
similarity index 85%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte
rename to packages/builder/src/components/common/JSONViewer.svelte
index 0b7b54214c..af90a4451a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte
+++ b/packages/builder/src/components/common/JSONViewer.svelte
@@ -1,11 +1,24 @@
+<script context="module" lang="ts">
+  export interface JSONViewerClickEvent {
+    detail: {
+      label: string | undefined
+      value: any
+      path: (string | number)[]
+    }
+  }
+</script>
+
 <script lang="ts">
-  import { Icon, notifications, Helpers } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
 
   export let label: string | undefined = undefined
   export let value: any = undefined
   export let root: boolean = true
   export let path: (string | number)[] = []
+  export let showCopyIcon: boolean = false
 
+  const dispatch = createEventDispatcher()
   const Colors = {
     Array: "var(--spectrum-global-color-gray-600)",
     Object: "var(--spectrum-global-color-gray-600)",
@@ -21,6 +34,7 @@
 
   let expanded = false
   let valueExpanded = false
+  let clickContext: JSONViewerClickContext
 
   $: isArray = Array.isArray(value)
   $: isObject = value?.toString?.() === "[object Object]"
@@ -29,7 +43,7 @@
   $: expandable = keys.length > 0
   $: displayValue = getDisplayValue(isArray, isObject, keys, value)
   $: style = getStyle(isArray, isObject, value)
-  $: readableBinding = `{{ ${path.join(".")} }}`
+  $: clickContext = { value, label, path }
 
   const getKeys = (isArray: boolean, isObject: boolean, value: any) => {
     if (isArray) {
@@ -96,11 +110,6 @@
     }
     return Colors.Other
   }
-
-  const copyBinding = () => {
-    Helpers.copyToClipboard(readableBinding)
-    notifications.success("Binding copied to clipboard")
-  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -124,6 +133,7 @@
         class:primitive
         class:expandable
         on:click={() => (expanded = !expanded)}
+        on:click={() => dispatch("click-label", clickContext)}
       >
         {label}
       </div>
@@ -133,19 +143,22 @@
         class:expanded={valueExpanded}
         {style}
         on:click={() => (valueExpanded = !valueExpanded)}
+        on:click={() => dispatch("click-value", clickContext)}
       >
         {displayValue}
       </div>
-      <div class="copy-value-icon">
-        <Icon
-          name="Copy"
-          size="XS"
-          hoverable
-          color="var(--spectrum-global-color-gray-600)"
-          hoverColor="var(--spectrum-global-color-gray-900)"
-          on:click={copyBinding}
-        />
-      </div>
+      {#if showCopyIcon}
+        <div class="copy-value-icon">
+          <Icon
+            name="Copy"
+            size="XS"
+            hoverable
+            color="var(--spectrum-global-color-gray-600)"
+            hoverColor="var(--spectrum-global-color-gray-900)"
+            on:click={() => dispatch("click-copy", clickContext)}
+          />
+        </div>
+      {/if}
     </div>
   {/if}
   {#if expandable && (expanded || label == null)}
@@ -156,6 +169,10 @@
           value={value[key]}
           root={false}
           path={[...path, key]}
+          {showCopyIcon}
+          on:click-label
+          on:click-value
+          on:click-copy
         />
       {/each}
     </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 6e19cab955..9bfabe0584 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { Link, Body, Helpers, Layout } from "@budibase/bbui"
+  import { Link, Body, Helpers, Layout, notifications } from "@budibase/bbui"
   import { processObjectSync } from "@budibase/string-templates"
   import {
     previewStore,
@@ -9,7 +9,9 @@
     snippets,
   } from "@/stores/builder"
   import { getBindableProperties } from "@/dataBinding"
-  import BindingNode from "./BindingNode.svelte"
+  import JSONViewer, {
+    type JSONViewerClickEvent,
+  } from "@/components/common/JSONViewer.svelte"
 
   // Minimal typing for the real data binding structure, as none exists
   type DataBinding = {
@@ -56,6 +58,12 @@
     return context
   }
 
+  const copyBinding = (e: JSONViewerClickEvent) => {
+    const readableBinding = `{{ ${e.detail.path.join(".")} }}`
+    Helpers.copyToClipboard(readableBinding)
+    notifications.success("Binding copied to clipboard")
+  }
+
   onMount(previewStore.requestComponentContext)
 </script>
 
@@ -70,7 +78,7 @@
         Learn more.
       </Link>
     </div>
-    <BindingNode value={context} />
+    <JSONViewer value={context} showCopyIcon on:click-copy={copyBinding} />
   </Layout>
 </div>
 

From b54a9fb4620d6fb128dc08e4102031b70126273b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jan 2025 14:46:26 +0000
Subject: [PATCH 29/81] Fix TS exports of enums from BBUI, bump portal version

---
 packages/bbui/package.json                    |  2 +-
 .../bbui/src/Actions/position_dropdown.js     |  2 +-
 packages/bbui/src/Icon/Icon.svelte            |  7 ++----
 packages/bbui/src/Popover/Popover.svelte      | 17 ++++----------
 packages/bbui/src/Tooltip/AbsTooltip.svelte   | 16 +------------
 packages/bbui/src/constants.ts                | 23 +++++++++++++++++++
 packages/bbui/src/index.ts                    | 12 ++++------
 .../components/common/DetailPopover.svelte    |  2 +-
 .../src/components/common/JSONViewer.svelte   | 11 +++++----
 yarn.lock                                     |  7 +++++-
 10 files changed, 49 insertions(+), 50 deletions(-)
 create mode 100644 packages/bbui/src/constants.ts

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 2caad20bf6..6809f1ffa5 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -80,7 +80,7 @@
     "dayjs": "^1.10.8",
     "easymde": "^2.16.1",
     "svelte-dnd-action": "^0.9.8",
-    "svelte-portal": "^1.0.0"
+    "svelte-portal": "^2.2.1"
   },
   "resolutions": {
     "loader-utils": "1.4.1"
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index ee6bc37177..258ce9879d 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -1,4 +1,4 @@
-import { PopoverAlignment } from "../Popover/Popover.svelte"
+import { PopoverAlignment } from "../constants"
 
 // Strategies are defined as [Popover]To[Anchor].
 // They can apply for both horizontal and vertical alignment.
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index a46e558b3a..c2fe36397b 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-  import {
-    default as AbsTooltip,
-    TooltipPosition,
-    TooltipType,
-  } from "../Tooltip/AbsTooltip.svelte"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import { TooltipPosition, TooltipType } from "../constants"
 
   export let name: string = "Add"
   export let hidden: boolean = false
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index e811cd828a..8ba4e8ca2c 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -1,14 +1,4 @@
 <script context="module" lang="ts">
-  export enum PopoverAlignment {
-    Left = "left",
-    Right = "right",
-    LeftOutside = "left-outside",
-    RightOutside = "right-outside",
-    Center = "center",
-    RightContextMenu = "right-context-menu",
-    LeftContextMenu = "left-context-menu",
-  }
-
   export interface PopoverAPI {
     show: () => void
     hide: () => void
@@ -23,6 +13,7 @@
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"
   import Context from "../context"
+  import { PopoverAlignment } from "../constants"
 
   const dispatch = createEventDispatcher()
 
@@ -86,13 +77,13 @@
     }
   }
 
-  const handleOutsideClick = e => {
+  const handleOutsideClick = (e: MouseEvent) => {
     if (clickOutsideOverride) {
       return
     }
     if (open) {
       // Stop propagation if the source is the anchor
-      let node = e.target
+      let node = e.target as Node
       let fromAnchor = false
       while (!fromAnchor && node && node.parentNode) {
         fromAnchor = node === anchor
@@ -107,7 +98,7 @@
     }
   }
 
-  function handleEscape(e) {
+  function handleEscape(e: KeyboardEvent) {
     if (!clickOutsideOverride) {
       return
     }
diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index c084e460b6..528ea84efd 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -1,23 +1,9 @@
-<script context="module" lang="ts">
-  export enum TooltipPosition {
-    Top = "top",
-    Right = "right",
-    Bottom = "bottom",
-    Left = "left",
-  }
-  export enum TooltipType {
-    Default = "default",
-    Info = "info",
-    Positive = "positive",
-    Negative = "negative",
-  }
-</script>
-
 <script lang="ts">
   import Portal from "svelte-portal"
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
   import { onDestroy } from "svelte"
+  import { TooltipPosition, TooltipType } from "../constants"
 
   export let position: TooltipPosition = TooltipPosition.Top
   export let type: TooltipType = TooltipType.Default
diff --git a/packages/bbui/src/constants.ts b/packages/bbui/src/constants.ts
new file mode 100644
index 0000000000..5685e6e489
--- /dev/null
+++ b/packages/bbui/src/constants.ts
@@ -0,0 +1,23 @@
+export enum PopoverAlignment {
+  Left = "left",
+  Right = "right",
+  LeftOutside = "left-outside",
+  RightOutside = "right-outside",
+  Center = "center",
+  RightContextMenu = "right-context-menu",
+  LeftContextMenu = "left-context-menu",
+}
+
+export enum TooltipPosition {
+  Top = "top",
+  Right = "right",
+  Bottom = "bottom",
+  Left = "left",
+}
+
+export enum TooltipType {
+  Default = "default",
+  Info = "info",
+  Positive = "positive",
+  Negative = "negative",
+}
diff --git a/packages/bbui/src/index.ts b/packages/bbui/src/index.ts
index 3c0d6c1a0b..2809cbf99f 100644
--- a/packages/bbui/src/index.ts
+++ b/packages/bbui/src/index.ts
@@ -1,8 +1,9 @@
 import "./bbui.css"
-
-// Spectrum icons
 import "@spectrum-css/icon/dist/index-vars.css"
 
+// Constants
+export * from "./constants"
+
 // Form components
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
@@ -45,11 +46,7 @@ export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
-export {
-  default as Popover,
-  PopoverAlignment,
-  type PopoverAPI,
-} from "./Popover/Popover.svelte"
+export { default as Popover, type PopoverAPI } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
@@ -96,7 +93,6 @@ export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
 export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
-export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte
index 94d1b4df50..97ab8ff6d3 100644
--- a/packages/builder/src/components/common/DetailPopover.svelte
+++ b/packages/builder/src/components/common/DetailPopover.svelte
@@ -2,8 +2,8 @@
   import {
     Popover,
     PopoverAlignment,
-    type PopoverAPI,
     Icon,
+    type PopoverAPI,
   } from "@budibase/bbui"
 
   export let title: string = ""
diff --git a/packages/builder/src/components/common/JSONViewer.svelte b/packages/builder/src/components/common/JSONViewer.svelte
index af90a4451a..16c023982b 100644
--- a/packages/builder/src/components/common/JSONViewer.svelte
+++ b/packages/builder/src/components/common/JSONViewer.svelte
@@ -1,10 +1,11 @@
 <script context="module" lang="ts">
+  interface JSONViewerClickContext {
+    label: string | undefined
+    value: any
+    path: (string | number)[]
+  }
   export interface JSONViewerClickEvent {
-    detail: {
-      label: string | undefined
-      value: any
-      path: (string | number)[]
-    }
+    detail: JSONViewerClickContext
   }
 </script>
 
diff --git a/yarn.lock b/yarn.lock
index 453dc45128..120df5d3f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18997,11 +18997,16 @@ svelte-loading-spinners@^0.1.1:
   resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz#3fa6fa0ef67ab635773bf20b07d0b071debbadaa"
   integrity sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA==
 
-svelte-portal@1.0.0, svelte-portal@^1.0.0:
+svelte-portal@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
+svelte-portal@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-2.2.1.tgz#b1d7bed78e56318db245996beb5483d8de6b9740"
+  integrity sha512-uF7is5sM4aq5iN7QF/67XLnTUvQCf2iiG/B1BHTqLwYVY1dsVmTeXZ/LeEyU6dLjApOQdbEG9lkqHzxiQtOLEQ==
+
 svelte-spa-router@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz#720ef0cc9a4af33b155812496545c7999483878c"

From aa5f5baedd8af0cb5e13ea8fafc5b0db10f850ef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jan 2025 15:01:12 +0000
Subject: [PATCH 30/81] Fix AI settings tests

---
 .../portal/settings/ai/AISettings.spec.js     | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js b/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
index bfd4311aa0..35f8859cd5 100644
--- a/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
+++ b/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
@@ -40,26 +40,33 @@ function setupEnv(hosting, features = {}, flags = {}) {
 describe("AISettings", () => {
   let instance = null
 
+  const setupDOM = () => {
+    instance = render(AISettings, {})
+    const modalContainer = document.createElement("div")
+    modalContainer.classList.add("modal-container")
+    instance.baseElement.appendChild(modalContainer)
+  }
+
   afterEach(() => {
     vi.restoreAllMocks()
   })
 
   it("that the AISettings is rendered", () => {
-    instance = render(AISettings, {})
+    setupDOM()
     expect(instance).toBeDefined()
   })
 
   describe("Licensing", () => {
     it("should show the premium label on self host for custom configs", async () => {
       setupEnv(Hosting.Self)
-      instance = render(AISettings, {})
+      setupDOM()
       const premiumTag = instance.queryByText("Premium")
       expect(premiumTag).toBeInTheDocument()
     })
 
     it("should show the enterprise label on cloud for custom configs", async () => {
       setupEnv(Hosting.Cloud)
-      instance = render(AISettings, {})
+      setupDOM()
       const enterpriseTag = instance.queryByText("Enterprise")
       expect(enterpriseTag).toBeInTheDocument()
     })
@@ -69,7 +76,7 @@ describe("AISettings", () => {
       let configModal
 
       setupEnv(Hosting.Cloud)
-      instance = render(AISettings)
+      setupDOM()
       addConfigurationButton = instance.queryByText("Add configuration")
       expect(addConfigurationButton).toBeInTheDocument()
       await fireEvent.click(addConfigurationButton)
@@ -86,7 +93,7 @@ describe("AISettings", () => {
         { customAIConfigsEnabled: true },
         { AI_CUSTOM_CONFIGS: true }
       )
-      instance = render(AISettings)
+      setupDOM()
       addConfigurationButton = instance.queryByText("Add configuration")
       expect(addConfigurationButton).toBeInTheDocument()
       await fireEvent.click(addConfigurationButton)
@@ -103,7 +110,7 @@ describe("AISettings", () => {
         { customAIConfigsEnabled: true },
         { AI_CUSTOM_CONFIGS: true }
       )
-      instance = render(AISettings)
+      setupDOM()
       addConfigurationButton = instance.queryByText("Add configuration")
       expect(addConfigurationButton).toBeInTheDocument()
       await fireEvent.click(addConfigurationButton)

From aac4d1e30575752ed6c75dc1b47aaf04e8461fae Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jan 2025 15:09:38 +0000
Subject: [PATCH 31/81] Fix version of svelte-portal across the board

---
 packages/builder/package.json | 2 +-
 yarn.lock                     | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 6fcf72c5fb..0fa4687242 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -81,7 +81,7 @@
     "shortid": "2.2.15",
     "svelte-dnd-action": "^0.9.8",
     "svelte-loading-spinners": "^0.1.1",
-    "svelte-portal": "1.0.0",
+    "svelte-portal": "^2.2.1",
     "yup": "^0.32.11"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 120df5d3f9..5f5711865b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18997,11 +18997,6 @@ svelte-loading-spinners@^0.1.1:
   resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz#3fa6fa0ef67ab635773bf20b07d0b071debbadaa"
   integrity sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA==
 
-svelte-portal@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
-  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
-
 svelte-portal@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-2.2.1.tgz#b1d7bed78e56318db245996beb5483d8de6b9740"

From 27a7c29ac1ad722d8431e22928b2b2ea852fc8d3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jan 2025 15:44:29 +0000
Subject: [PATCH 32/81] Increase max length of JSON viewer labels for primitive
 values

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

diff --git a/packages/builder/src/components/common/JSONViewer.svelte b/packages/builder/src/components/common/JSONViewer.svelte
index 16c023982b..79f9438701 100644
--- a/packages/builder/src/components/common/JSONViewer.svelte
+++ b/packages/builder/src/components/common/JSONViewer.svelte
@@ -243,7 +243,7 @@
   }
   .binding-label.primitive {
     flex: 0 0 auto;
-    max-width: 50%;
+    max-width: 75%;
   }
   .binding-value.primitive {
     flex: 0 1 auto;

From 417631c7dc4d085ca704862c0ac77e8b2eef92c5 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Jan 2025 16:03:10 +0000
Subject: [PATCH 33/81] tweaking around user default values

---
 .../[screenId]/_components/StatePanel.svelte  | 71 +++++++++++--------
 1 file changed, 41 insertions(+), 30 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index be47a18b3e..99f4b252a2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionButton, Popover, Divider, Icon, Select } from "@budibase/bbui"
+  import { Divider, Select, Heading } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
   import {
     componentStore,
@@ -14,6 +14,7 @@
   } from "@budibase/string-templates"
   import { onMount } from "svelte"
   import CodeMirrorEditor from "@/components/common/CodeMirrorEditor.svelte"
+
   type ComponentUsingState = {
     id: string
     name: string
@@ -26,6 +27,7 @@
   let componentsUsingState: ComponentUsingState[] = []
   let componentsUpdatingState: ComponentUsingState[] = []
   let editorValue: string = ""
+  let editorError: string | null = null
 
   onMount(() => {
     if (selectedKey) {
@@ -35,16 +37,19 @@
   })
 
   $: {
-    let previewContext = $previewStore.selectedComponentContext || {}
+    const previewContext = $previewStore.selectedComponentContext || {}
 
     if (selectedKey && previewContext.state) {
       // It's unlikely value will ever be populated immediately as state is never populated automatically in preview
       const value = previewContext.state[selectedKey] ?? null
       editorValue = JSON.stringify(value, null, 2)
+      editorError = null
     } else {
       editorValue = ""
+      editorError = null
     }
   }
+
   function findComponentsUpdatingState(
     component: any,
     stateKey: string
@@ -79,7 +84,6 @@
         ]
       }
     }
-
     return foundComponents
   }
 
@@ -168,25 +172,30 @@
       return
     }
 
-    const value = JSON.parse(e.detail)
-    const stateUpdate = { [selectedKey]: value }
+    try {
+      const value = JSON.parse(e.detail)
+      const stateUpdate = { [selectedKey]: value }
+      editorError = null
 
-    previewStore.updateState(stateUpdate)
+      previewStore.updateState(stateUpdate)
+      previewStore.updateState(stateUpdate)
 
-    previewStore.setSelectedComponentContext({
-      ...$previewStore.selectedComponentContext,
-      state: stateUpdate,
-    })
+      previewStore.updateState(stateUpdate)
 
-    previewStore.requestComponentContext()
+      previewStore.setSelectedComponentContext({
+        ...$previewStore.selectedComponentContext,
+        state: stateUpdate,
+      })
+      previewStore.requestComponentContext()
+    } catch (err) {
+      editorError = "Invalid JSON value"
+    }
   }
 </script>
 
 <div class="state-panel">
-  <div>State</div>
-  <div>
-    Showing state variables for {$selectedScreen?.routing?.route.split("/")[1]}:
-  </div>
+  <Heading size="S">State</Heading>
+  <div>Showing state variables for this screen</div>
   <div class="section">
     <Select
       value={selectedKey}
@@ -204,6 +213,9 @@
       label="State Inspector"
       on:change={handleStateInspectorChange}
     />
+    {#if editorError}
+      <div class="error">{editorError}</div>
+    {/if}
   </div>
   <Divider />
 
@@ -211,29 +223,26 @@
     <div class="section">
       <span class="text">Updates:</span>
       {#each componentsUsingState as component, i}
+        {#if i > 0}{", "}{/if}
         <button
           class="component-link"
           on:click={() => onClickComponentLink(component)}
         >
-          {component.name}{i < componentsUsingState.length - 1 ? ", " : ""}
+          {component.name}
         </button>
       {/each}
     </div>
   {/if}
   {#if componentsUpdatingState.length > 0}
     <div class="section">
-      <span class="text">Updated by:</span>
+      <span class="text">Controlled by:</span>
       {#each componentsUpdatingState as component, i}
+        {#if i > 0}{", "}{/if}
         <button
           class="component-link"
-          on:click={() =>
-            onClickComponentLink({
-              id: component.id,
-              name: component.name,
-              settings: component.settings,
-            })}
+          on:click={() => onClickComponentLink(component)}
         >
-          {component.name}{i < componentsUpdatingState.length - 1 ? ", " : ""}
+          {component.name}
         </button>
       {/each}
     </div>
@@ -255,6 +264,14 @@
     color: var(--spectrum-global-color-gray-700);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
+  .error {
+    color: var(
+      --spectrum-semantic-negative-color-default,
+      var(--spectrum-global-color-red-500)
+    );
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    margin-top: var(--spectrum-global-dimension-size-75);
+  }
   .component-link {
     display: inline;
     border: none;
@@ -268,10 +285,4 @@
   .component-link:hover {
     text-decoration: underline;
   }
-
-  .split-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
 </style>

From c199b681e3308c0233cf3d000b526383a1200a22 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Jan 2025 16:04:14 +0000
Subject: [PATCH 34/81] some duplicate code

---
 .../design/[screenId]/_components/StatePanel.svelte           | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 99f4b252a2..cf6cd12d91 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -178,10 +178,6 @@
       editorError = null
 
       previewStore.updateState(stateUpdate)
-      previewStore.updateState(stateUpdate)
-
-      previewStore.updateState(stateUpdate)
-
       previewStore.setSelectedComponentContext({
         ...$previewStore.selectedComponentContext,
         state: stateUpdate,

From 8cab28d5b64147b6d6c1dd4bcb398e3cb8daa788 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 23 Jan 2025 10:08:34 +0000
Subject: [PATCH 35/81] add link for each individual setting

---
 .../Component/ComponentSettingsPanel.svelte   |   9 +
 .../Component/ConditionalUISection.svelte     |  23 ++-
 .../[screenId]/_components/StatePanel.svelte  | 162 +++++++++++-------
 3 files changed, 134 insertions(+), 60 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index 30f11e6cab..d9862e6e14 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -16,6 +16,7 @@
   } from "@/dataBinding"
   import { ActionButton, notifications } from "@budibase/bbui"
   import { capitalise } from "@/helpers"
+  import { builderStore } from "@/stores/builder"
   import TourWrap from "@/components/portal/onboarding/TourWrap.svelte"
   import { TOUR_STEP_KEYS } from "@/components/portal/onboarding/tours.js"
 
@@ -55,6 +56,14 @@
   $: id = $selectedComponent?._id
   $: id, (section = tabs[0])
   $: componentName = getComponentName(componentInstance)
+
+  $: highlightedSettings = $builderStore.highlightedSettings
+  $: if (highlightedSettings?.length) {
+    const settings = highlightedSettings.map(s => s.key)
+    if (settings.length === 1 && settings[0] === "_conditions") {
+      section = "conditions"
+    }
+  }
 </script>
 
 {#if $selectedComponent}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index b40a6af3c6..d91799b6da 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -9,6 +9,7 @@
   import { componentStore } from "@/stores/builder"
   import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
+  import { builderStore } from "@/stores/builder"
 
   export let componentInstance
   export let componentDefinition
@@ -18,6 +19,10 @@
   let tempValue
   let drawer
 
+  $: highlightCondition = $builderStore.highlightedSettings?.find(
+    setting => setting.key === "_conditions"
+  )
+
   const openDrawer = () => {
     tempValue = JSON.parse(JSON.stringify(componentInstance?._conditions ?? []))
     drawer.show()
@@ -52,7 +57,9 @@
 />
 
 <DetailSummary name={"Conditions"} collapsible={false}>
-  <ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
+  <div class:highlighted={highlightCondition}>
+    <ActionButton fullWidth on:click={openDrawer}>{conditionText}</ActionButton>
+  </div>
 </DetailSummary>
 <Drawer bind:this={drawer} title="Conditions">
   <svelte:fragment slot="description">
@@ -61,3 +68,17 @@
   <Button cta slot="buttons" on:click={() => save()}>Save</Button>
   <ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
 </Drawer>
+
+<style>
+  .highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    border-left: 4px solid var(--spectrum-semantic-informative-color-background);
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    margin-top: -3.5px;
+    margin-bottom: -3.5px;
+    padding-bottom: 3.5px;
+    padding-top: 3.5px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index cf6cd12d91..9dc3d3137d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Divider, Select, Heading } from "@budibase/bbui"
+  import { Select, Link } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
   import {
     componentStore,
@@ -13,7 +13,7 @@
     isJSBinding,
   } from "@budibase/string-templates"
   import { onMount } from "svelte"
-  import CodeMirrorEditor from "@/components/common/CodeMirrorEditor.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   type ComponentUsingState = {
     id: string
@@ -40,9 +40,8 @@
     const previewContext = $previewStore.selectedComponentContext || {}
 
     if (selectedKey && previewContext.state) {
-      // It's unlikely value will ever be populated immediately as state is never populated automatically in preview
-      const value = previewContext.state[selectedKey] ?? null
-      editorValue = JSON.stringify(value, null, 2)
+      // It's unlikely value will ever be populated immediately as preview never has state values on load
+      editorValue = previewContext.state[selectedKey] ?? null
       editorError = null
     } else {
       editorValue = ""
@@ -50,10 +49,10 @@
     }
   }
 
-  function findComponentsUpdatingState(
+  const findComponentsUpdatingState = (
     component: any,
     stateKey: string
-  ): ComponentUsingState[] {
+  ): ComponentUsingState[] => {
     let foundComponents: ComponentUsingState[] = []
 
     const eventHandlerProps = ["onClick", "onChange"]
@@ -87,39 +86,76 @@
     return foundComponents
   }
 
-  function findComponentsUsingState(
+  const findComponentsUsingState = (
     component: any,
     stateKey: string
-  ): ComponentUsingState[] {
+  ): ComponentUsingState[] => {
     let componentsUsingState: ComponentUsingState[] = []
 
+    const processValue = (value: string): boolean => {
+      const bindings = findHBSBlocks(value).map(binding => {
+        const sanitizedBinding = binding.replace(/\\"/g, '"')
+        return isJSBinding(sanitizedBinding)
+          ? decodeJSBinding(sanitizedBinding)
+          : sanitizedBinding
+      })
+      return bindings.join(" ").includes(stateKey)
+    }
+
     const { _children, ...componentSettings } = component
-    let settingsWithState: string[] = []
 
+    // Check normal settings
     for (const [setting, value] of Object.entries(componentSettings)) {
-      if (typeof value === "string") {
-        const bindings = findHBSBlocks(value).map(binding => {
-          let sanitizedBinding = binding.replace(/\\"/g, '"')
-          if (isJSBinding(sanitizedBinding)) {
-            return decodeJSBinding(sanitizedBinding)
-          } else {
-            return sanitizedBinding
-          }
+      if (typeof value === "string" && processValue(value)) {
+        componentsUsingState.push({
+          id: component._id,
+          name: `${component._instanceName} (${setting})`,
+          settings: [setting],
         })
-        const bindingString = bindings.join(" ")
+      }
+    }
 
-        if (bindingString.includes(stateKey)) {
-          settingsWithState.push(setting)
+    // Check conditions
+    if (component._conditions?.length > 0) {
+      for (const condition of component._conditions) {
+        const conditionValues = [condition.referenceValue, condition.newValue]
+        if (
+          conditionValues.some(
+            value => typeof value === "string" && processValue(value)
+          )
+        ) {
+          componentsUsingState.push({
+            id: component._id,
+            name: `${component._instanceName} (conditions)`,
+            settings: ["_conditions"],
+          })
+          break
         }
       }
     }
 
-    if (settingsWithState.length > 0) {
-      componentsUsingState.push({
-        id: component._id,
-        name: component._instanceName,
-        settings: settingsWithState,
-      })
+    // Check styles
+    if (component._styles) {
+      const checkStyleObject = (obj: any) => {
+        for (const [, value] of Object.entries(obj)) {
+          if (typeof value === "string" && processValue(value)) {
+            return true
+          }
+        }
+        return false
+      }
+
+      const hasStateInStyles = Object.values(component._styles).some(styleObj =>
+        checkStyleObject(styleObj)
+      )
+
+      if (hasStateInStyles) {
+        componentsUsingState.push({
+          id: component._id,
+          name: `${component._instanceName} (styles)`,
+          settings: ["_styles"],
+        })
+      }
     }
 
     if (_children) {
@@ -134,7 +170,7 @@
     return componentsUsingState
   }
 
-  function searchComponents(stateKey: string) {
+  const searchComponents = (stateKey: string) => {
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
@@ -148,22 +184,21 @@
     )
   }
 
-  function handleStateKeySelect(event: CustomEvent) {
-    selectedKey = event.detail
-    if (!selectedKey) {
+  const handleStateKeySelect = (key: CustomEvent) => {
+    if (!key.detail) {
       throw new Error("No state key selected")
     }
-    searchComponents(selectedKey)
+    searchComponents(key.detail)
   }
 
-  function onClickComponentLink(component: ComponentUsingState) {
+  const onClickComponentLink = (component: ComponentUsingState) => {
     componentStore.select(component.id)
     component.settings.forEach(setting => {
       builderStore.highlightSetting(setting)
     })
   }
 
-  function handleStateInspectorChange(e: CustomEvent) {
+  const handleStateInspectorChange = (e: CustomEvent) => {
     if (!selectedKey || !$previewStore.selectedComponentContext) {
       throw new Error("No state key selected")
     }
@@ -172,48 +207,40 @@
       return
     }
 
-    try {
-      const value = JSON.parse(e.detail)
-      const stateUpdate = { [selectedKey]: value }
-      editorError = null
+    const stateUpdate = { [selectedKey]: e.detail }
+    editorError = null
 
-      previewStore.updateState(stateUpdate)
-      previewStore.setSelectedComponentContext({
-        ...$previewStore.selectedComponentContext,
-        state: stateUpdate,
-      })
-      previewStore.requestComponentContext()
-    } catch (err) {
-      editorError = "Invalid JSON value"
-    }
+    previewStore.updateState(stateUpdate)
+    previewStore.setSelectedComponentContext({
+      ...$previewStore.selectedComponentContext,
+      state: stateUpdate,
+    })
+    previewStore.requestComponentContext()
   }
 </script>
 
 <div class="state-panel">
-  <Heading size="S">State</Heading>
-  <div>Showing state variables for this screen</div>
   <div class="section">
     <Select
+      label="State variables"
       value={selectedKey}
       placeholder="Type here..."
       options={keyOptions}
       on:change={handleStateKeySelect}
     />
   </div>
-  <Divider />
   <div class="section">
-    <CodeMirrorEditor
-      height={200}
+    <DrawerBindableInput
       value={editorValue}
-      resize="vertical"
-      label="State Inspector"
+      title={`Set value for "${selectedKey}"`}
+      placeholder="Enter a value"
+      label="Set temporary value for design preview"
       on:change={handleStateInspectorChange}
     />
     {#if editorError}
       <div class="error">{editorError}</div>
     {/if}
   </div>
-  <Divider />
 
   {#if componentsUsingState.length > 0}
     <div class="section">
@@ -221,7 +248,7 @@
       {#each componentsUsingState as component, i}
         {#if i > 0}{", "}{/if}
         <button
-          class="component-link"
+          class="component-link updates-colour"
           on:click={() => onClickComponentLink(component)}
         >
           {component.name}
@@ -235,7 +262,7 @@
       {#each componentsUpdatingState as component, i}
         {#if i > 0}{", "}{/if}
         <button
-          class="component-link"
+          class="component-link controlled-by-colour"
           on:click={() => onClickComponentLink(component)}
         >
           {component.name}
@@ -243,6 +270,16 @@
       {/each}
     </div>
   {/if}
+  <div style="opacity: 0.5; ">
+    <Link
+      href="https://docs.budibase.com/docs/app-state"
+      target="_blank"
+      size={"S"}
+      secondary
+    >
+      Learn more about State within Budibase.
+    </Link>
+  </div>
 </div>
 
 <style>
@@ -258,7 +295,7 @@
   }
   .text {
     color: var(--spectrum-global-color-gray-700);
-    font-size: var(--spectrum-global-dimension-font-size-75);
+    font-size: var(--spectrum-global-dimension-font-size-50);
   }
   .error {
     color: var(
@@ -268,6 +305,13 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
+
+  .updates-colour {
+    color: #8488fd;
+  }
+  .controlled-by-colour {
+    color: #e87400;
+  }
   .component-link {
     display: inline;
     border: none;
@@ -275,7 +319,7 @@
     text-decoration: underline;
     color: var(--spectrum-global-color-white);
     cursor: pointer;
-    font-size: var(--spectrum-global-dimension-font-size-75);
+    font-size: var(--spectrum-global-dimension-font-size-50);
     padding: 0;
   }
   .component-link:hover {

From 3ac7c90fb87bc46b53da4d0f944664db2c5103b3 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 23 Jan 2025 14:59:25 +0000
Subject: [PATCH 36/81] refactor and allow for condition and style settings

---
 .../Component/ComponentSettingsPanel.svelte   |   6 +-
 .../Component/ConditionalUISection.svelte     |   4 +-
 .../Component/CustomStylesSection.svelte      |  19 +-
 .../[screenId]/_components/StatePanel.svelte  | 184 +++++++++---------
 4 files changed, 119 insertions(+), 94 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index d9862e6e14..121719a568 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -60,8 +60,12 @@
   $: highlightedSettings = $builderStore.highlightedSettings
   $: if (highlightedSettings?.length) {
     const settings = highlightedSettings.map(s => s.key)
-    if (settings.length === 1 && settings[0] === "_conditions") {
+    if (settings.includes("_conditions")) {
       section = "conditions"
+    } else if (settings.includes("_styles")) {
+      section = "styles"
+    } else if (settings.includes("_settings")) {
+      section = "settings"
     }
   }
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index d91799b6da..755aaea9ba 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -19,7 +19,7 @@
   let tempValue
   let drawer
 
-  $: highlightCondition = $builderStore.highlightedSettings?.find(
+  $: highlighted = $builderStore.highlightedSettings?.find(
     setting => setting.key === "_conditions"
   )
 
@@ -57,7 +57,7 @@
 />
 
 <DetailSummary name={"Conditions"} collapsible={false}>
-  <div class:highlighted={highlightCondition}>
+  <div class:highlighted>
     <ActionButton fullWidth on:click={openDrawer}>{conditionText}</ActionButton>
   </div>
 </DetailSummary>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index 30e448774b..e936b3bca1 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -16,6 +16,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "@/dataBinding"
+  import { builderStore } from "@/stores/builder"
 
   export let componentInstance
   export let componentDefinition
@@ -32,6 +33,10 @@
 
   $: icon = componentDefinition?.icon
 
+  $: highlighted = $builderStore.highlightedSettings?.find(
+    setting => setting.key === "_styles"
+  )
+
   const openDrawer = () => {
     tempValue = runtimeToReadableBinding(
       bindings,
@@ -55,7 +60,7 @@
   name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
   collapsible={false}
 >
-  <div>
+  <div class:highlighted>
     <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
   </div>
 </DetailSummary>
@@ -97,4 +102,16 @@
     align-items: center;
     gap: var(--spacing-m);
   }
+
+  .highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    border-left: 4px solid var(--spectrum-semantic-informative-color-background);
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    margin-top: -3.5px;
+    margin-bottom: -3.5px;
+    padding-bottom: 3.5px;
+    padding-top: 3.5px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 9dc3d3137d..ea9f77882f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { onMount } from "svelte"
   import { Select, Link } from "@budibase/bbui"
+  import type { Component } from "@budibase/types"
   import { getAllStateVariables } from "@/dataBinding"
   import {
     componentStore,
@@ -12,7 +14,6 @@
     findHBSBlocks,
     isJSBinding,
   } from "@budibase/string-templates"
-  import { onMount } from "svelte"
   import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   type ComponentUsingState = {
@@ -30,15 +31,12 @@
   let editorError: string | null = null
 
   onMount(() => {
-    if (selectedKey) {
-      searchComponents(selectedKey)
-    }
     previewStore.requestComponentContext()
   })
 
+  $: $selectedScreen, selectedKey && searchComponents(selectedKey)
   $: {
     const previewContext = $previewStore.selectedComponentContext || {}
-
     if (selectedKey && previewContext.state) {
       // It's unlikely value will ever be populated immediately as preview never has state values on load
       editorValue = previewContext.state[selectedKey] ?? null
@@ -50,7 +48,7 @@
   }
 
   const findComponentsUpdatingState = (
-    component: any,
+    component: Component,
     stateKey: string
   ): ComponentUsingState[] => {
     let foundComponents: ComponentUsingState[] = []
@@ -66,7 +64,7 @@
             handler.parameters?.key === stateKey
           ) {
             foundComponents.push({
-              id: component._id,
+              id: component._id!,
               name: component._instanceName,
               settings: [eventType],
             })
@@ -86,76 +84,71 @@
     return foundComponents
   }
 
+  const hasStateBinding = (value: string, stateKey: string): boolean => {
+    const bindings = findHBSBlocks(value).map(binding => {
+      const sanitizedBinding = binding.replace(/\\"/g, '"')
+      return isJSBinding(sanitizedBinding)
+        ? decodeJSBinding(sanitizedBinding)
+        : sanitizedBinding
+    })
+    return bindings.join(" ").includes(stateKey)
+  }
+
+  const getSettingsWithState = (component: any, stateKey: string): string[] => {
+    const settingsWithState: string[] = []
+    for (const [setting, value] of Object.entries(component)) {
+      if (typeof value === "string" && hasStateBinding(value, stateKey)) {
+        settingsWithState.push(setting)
+      }
+    }
+    return settingsWithState
+  }
+
+  const checkConditions = (conditions: any[], stateKey: string): boolean => {
+    return conditions.some(condition =>
+      [condition.referenceValue, condition.newValue].some(
+        value => typeof value === "string" && hasStateBinding(value, stateKey)
+      )
+    )
+  }
+
+  const checkStyles = (styles: any, stateKey: string): boolean => {
+    return (
+      typeof styles?.custom === "string" &&
+      hasStateBinding(styles.custom, stateKey)
+    )
+  }
+
   const findComponentsUsingState = (
     component: any,
     stateKey: string
   ): ComponentUsingState[] => {
     let componentsUsingState: ComponentUsingState[] = []
+    const { _children, _styles, _conditions, ...componentSettings } = component
 
-    const processValue = (value: string): boolean => {
-      const bindings = findHBSBlocks(value).map(binding => {
-        const sanitizedBinding = binding.replace(/\\"/g, '"')
-        return isJSBinding(sanitizedBinding)
-          ? decodeJSBinding(sanitizedBinding)
-          : sanitizedBinding
+    const settingsWithState = getSettingsWithState(componentSettings, stateKey)
+    settingsWithState.forEach(setting => {
+      componentsUsingState.push({
+        id: component._id,
+        name: `${component._instanceName} (${setting})`,
+        settings: [setting],
+      })
+    })
+
+    if (_conditions?.length > 0 && checkConditions(_conditions, stateKey)) {
+      componentsUsingState.push({
+        id: component._id,
+        name: `${component._instanceName} (conditions)`,
+        settings: ["_conditions"],
       })
-      return bindings.join(" ").includes(stateKey)
     }
 
-    const { _children, ...componentSettings } = component
-
-    // Check normal settings
-    for (const [setting, value] of Object.entries(componentSettings)) {
-      if (typeof value === "string" && processValue(value)) {
-        componentsUsingState.push({
-          id: component._id,
-          name: `${component._instanceName} (${setting})`,
-          settings: [setting],
-        })
-      }
-    }
-
-    // Check conditions
-    if (component._conditions?.length > 0) {
-      for (const condition of component._conditions) {
-        const conditionValues = [condition.referenceValue, condition.newValue]
-        if (
-          conditionValues.some(
-            value => typeof value === "string" && processValue(value)
-          )
-        ) {
-          componentsUsingState.push({
-            id: component._id,
-            name: `${component._instanceName} (conditions)`,
-            settings: ["_conditions"],
-          })
-          break
-        }
-      }
-    }
-
-    // Check styles
-    if (component._styles) {
-      const checkStyleObject = (obj: any) => {
-        for (const [, value] of Object.entries(obj)) {
-          if (typeof value === "string" && processValue(value)) {
-            return true
-          }
-        }
-        return false
-      }
-
-      const hasStateInStyles = Object.values(component._styles).some(styleObj =>
-        checkStyleObject(styleObj)
-      )
-
-      if (hasStateInStyles) {
-        componentsUsingState.push({
-          id: component._id,
-          name: `${component._instanceName} (styles)`,
-          settings: ["_styles"],
-        })
-      }
+    if (_styles && checkStyles(_styles, stateKey)) {
+      componentsUsingState.push({
+        id: component._id,
+        name: `${component._instanceName} (styles)`,
+        settings: ["_styles"],
+      })
     }
 
     if (_children) {
@@ -170,7 +163,7 @@
     return componentsUsingState
   }
 
-  const searchComponents = (stateKey: string) => {
+  const searchComponents = (stateKey: string | undefined) => {
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
@@ -223,7 +216,7 @@
   <div class="section">
     <Select
       label="State variables"
-      value={selectedKey}
+      bind:value={selectedKey}
       placeholder="Type here..."
       options={keyOptions}
       on:change={handleStateKeySelect}
@@ -245,29 +238,31 @@
   {#if componentsUsingState.length > 0}
     <div class="section">
       <span class="text">Updates:</span>
-      {#each componentsUsingState as component, i}
-        {#if i > 0}{", "}{/if}
-        <button
-          class="component-link updates-colour"
-          on:click={() => onClickComponentLink(component)}
-        >
-          {component.name}
-        </button>
-      {/each}
+      <div class="updates-section">
+        {#each componentsUsingState as component}
+          <button
+            class="component-link updates-colour"
+            on:click={() => onClickComponentLink(component)}
+          >
+            {component.name}
+          </button>
+        {/each}
+      </div>
     </div>
   {/if}
   {#if componentsUpdatingState.length > 0}
     <div class="section">
       <span class="text">Controlled by:</span>
-      {#each componentsUpdatingState as component, i}
-        {#if i > 0}{", "}{/if}
-        <button
-          class="component-link controlled-by-colour"
-          on:click={() => onClickComponentLink(component)}
-        >
-          {component.name}
-        </button>
-      {/each}
+      <div class="updates-section">
+        {#each componentsUpdatingState as component}
+          <button
+            class="component-link controlled-by-colour"
+            on:click={() => onClickComponentLink(component)}
+          >
+            {component.name}
+          </button>
+        {/each}git
+      </div>
     </div>
   {/if}
   <div style="opacity: 0.5; ">
@@ -291,6 +286,8 @@
     gap: var(--spacing-m);
   }
   .section {
+    display: flex;
+    flex-direction: column;
     gap: var(--spacing-s);
   }
   .text {
@@ -313,16 +310,23 @@
     color: #e87400;
   }
   .component-link {
-    display: inline;
+    display: inline-block;
     border: none;
     background: none;
     text-decoration: underline;
-    color: var(--spectrum-global-color-white);
     cursor: pointer;
     font-size: var(--spectrum-global-dimension-font-size-50);
     padding: 0;
+    white-space: nowrap;
   }
   .component-link:hover {
     text-decoration: underline;
   }
+
+  .updates-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
 </style>

From 28c59d1d1cca8d850a62d9a7a2403a2108989716 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 23 Jan 2025 15:06:45 +0000
Subject: [PATCH 37/81] rogue string

---
 .../design/[screenId]/_components/StatePanel.svelte             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index ea9f77882f..60a43059fc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -261,7 +261,7 @@
           >
             {component.name}
           </button>
-        {/each}git
+        {/each}
       </div>
     </div>
   {/if}

From f4a10d4f63e3647391d58f20b0ed03123786bb6d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 23 Jan 2025 15:27:33 +0000
Subject: [PATCH 38/81] Move component keyboard handler to allow it to function
 when bindings or state tabs are active

---
 .../_components/{ComponentList => }/ComponentKeyHandler.svelte  | 0
 .../design/[screenId]/_components/ComponentList/index.svelte    | 2 --
 .../design/[screenId]/_components/LeftPanel.svelte              | 2 ++
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/{ComponentList => }/ComponentKeyHandler.svelte (100%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentKeyHandler.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentKeyHandler.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index d97d4e58be..7636d923de 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -12,7 +12,6 @@
   import ComponentTree from "./ComponentTree.svelte"
   import { dndStore, DropPosition } from "./dndStore.js"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
   import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
   import getScreenContextMenuItems from "./getScreenContextMenuItems"
 
@@ -136,7 +135,6 @@
       </ul>
     </ComponentScrollWrapper>
   </div>
-  <ComponentKeyHandler />
 </div>
 
 <style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index ea285621cd..1ffefbaa32 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -4,6 +4,7 @@
   import { getHorizontalResizeActions } from "@/components/common/resizable"
   import { ActionButton } from "@budibase/bbui"
   import BindingsPanel from "./BindingsPanel.svelte"
+  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
 
   const [resizable, resizableHandle] = getHorizontalResizeActions()
 
@@ -42,6 +43,7 @@
     <div class="dividerClickExtender" role="separator" use:resizableHandle />
   </div>
 </div>
+<ComponentKeyHandler />
 
 <style>
   .panel {

From 2c1c5d7ce9fe57ec6694cdf6f3385feeb7c366f3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 23 Jan 2025 15:28:34 +0000
Subject: [PATCH 39/81] Remove placeholder state panel button

---
 .../design/[screenId]/_components/AppPanel.svelte           | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

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 639f648a55..b04cd8b956 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
@@ -3,7 +3,6 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
-  import StatePanel from "./StatePanel.svelte"
 </script>
 
 <div class="app-panel">
@@ -11,13 +10,12 @@
   <div class="header">
     <div class="header-left">
       <UndoRedoControl store={screenStore.history} />
+    </div>
+    <div class="header-right">
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
     </div>
-    <div class="header-right">
-      <StatePanel />
-    </div>
   </div>
   <div class="content">
     {#key $appStore.version}

From 513e31d0b34c9f6af122700447619ef7c19ee7d5 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 23 Jan 2025 15:39:53 +0000
Subject: [PATCH 40/81] some tidy up and revert highlightedSetting to obj

---
 .../settings/controls/PropertyControl.svelte  | 10 ++----
 .../Component/ComponentSettingsPanel.svelte   | 11 +++----
 .../Component/ConditionalUISection.svelte     |  4 +--
 .../Component/CustomStylesSection.svelte      |  4 +--
 .../[screenId]/_components/AppPanel.svelte    |  1 -
 .../builder/src/stores/builder/builder.ts     | 33 ++++---------------
 .../builder/src/stores/builder/components.ts  |  2 +-
 7 files changed, 18 insertions(+), 47 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 5118f7be2e..fa337e085b 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -26,18 +26,14 @@
 
   let highlightType
 
-  $: highlightedSettings = $builderStore.highlightedSettings
+  $: highlightedProp = $builderStore.highlightedSetting
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
   $: if (value) {
-    const highlightedSetting = highlightedSettings?.find(
-      setting => setting.key === key
-    )
-    highlightType = highlightedSetting
-      ? `highlighted-${highlightedSetting.type}`
-      : ""
+    highlightType =
+      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
   }
 
   const getAllBindings = (bindings, componentBindings, nested) => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index 121719a568..fcd0ddaafc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -57,14 +57,13 @@
   $: id, (section = tabs[0])
   $: componentName = getComponentName(componentInstance)
 
-  $: highlightedSettings = $builderStore.highlightedSettings
-  $: if (highlightedSettings?.length) {
-    const settings = highlightedSettings.map(s => s.key)
-    if (settings.includes("_conditions")) {
+  $: highlightedSetting = $builderStore.highlightedSetting
+  $: if (highlightedSetting) {
+    if (highlightedSetting.key === "_conditions") {
       section = "conditions"
-    } else if (settings.includes("_styles")) {
+    } else if (highlightedSetting.key === "_styles") {
       section = "styles"
-    } else if (settings.includes("_settings")) {
+    } else if (highlightedSetting.key === "_settings") {
       section = "settings"
     }
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index 755aaea9ba..965aee33f4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -19,9 +19,7 @@
   let tempValue
   let drawer
 
-  $: highlighted = $builderStore.highlightedSettings?.find(
-    setting => setting.key === "_conditions"
-  )
+  $: highlighted = $builderStore.highlightedSetting?.key === "_conditions"
 
   const openDrawer = () => {
     tempValue = JSON.parse(JSON.stringify(componentInstance?._conditions ?? []))
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index e936b3bca1..7879a606a7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -33,9 +33,7 @@
 
   $: icon = componentDefinition?.icon
 
-  $: highlighted = $builderStore.highlightedSettings?.find(
-    setting => setting.key === "_styles"
-  )
+  $: highlighted = $builderStore.highlightedSetting?.key === "_styles"
 
   const openDrawer = () => {
     tempValue = runtimeToReadableBinding(
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 108103cde3..d57e9431be 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
@@ -3,7 +3,6 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
-  import { ActionButton } from "@budibase/bbui"
   import BindingsPanel from "./BindingsPanel.svelte"
 </script>
 
diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts
index 36c47b2838..e4cbbba7f1 100644
--- a/packages/builder/src/stores/builder/builder.ts
+++ b/packages/builder/src/stores/builder/builder.ts
@@ -8,10 +8,10 @@ import { App } from "@budibase/types"
 
 interface BuilderState {
   previousTopNavPath: Record<string, string>
-  highlightedSettings: Array<{
+  highlightedSetting: {
     key: string
     type: "info" | string
-  }> | null
+  } | null
   propertyFocus: string | null
   builderSidePanel: boolean
   onboarding: boolean
@@ -24,7 +24,7 @@ interface BuilderState {
 
 export const INITIAL_BUILDER_STATE: BuilderState = {
   previousTopNavPath: {},
-  highlightedSettings: null,
+  highlightedSetting: null,
   propertyFocus: null,
   builderSidePanel: false,
   onboarding: false,
@@ -76,29 +76,10 @@ export class BuilderStore extends BudiStore<BuilderState> {
   }
 
   highlightSetting(key?: string, type?: string) {
-    this.update(state => {
-      if (!key) {
-        return {
-          ...state,
-          highlightedSettings: null,
-        }
-      }
-
-      const currentSettings = state.highlightedSettings || []
-
-      const settingExists = currentSettings.some(setting => setting.key === key)
-      if (!settingExists) {
-        return {
-          ...state,
-          highlightedSettings: [
-            ...currentSettings,
-            { key, type: type || "info" },
-          ],
-        }
-      }
-
-      return state
-    })
+    this.update(state => ({
+      ...state,
+      highlightedSetting: key ? { key, type: type || "info" } : null,
+    }))
   }
 
   propertyFocus(key: string | null) {
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 450487a52f..f1a4916973 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -718,7 +718,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
    */
   select(componentId: string) {
     builderStore.update(state => {
-      state.highlightedSettings = null
+      state.highlightedSetting = null
       return state
     })
 

From 7c52166d0dfc7af2df07729bc6e45a561ec8073c Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Jan 2025 13:48:00 +0000
Subject: [PATCH 41/81] typing

---
 packages/bbui/src/Form/Core/Picker.svelte     | 110 +++++++++++-------
 packages/bbui/src/Form/Core/Search.svelte     |  16 +--
 packages/bbui/src/Form/Core/Select.svelte     |  76 +++++++-----
 packages/bbui/src/Form/Core/TextField.svelte  |  29 +++--
 packages/bbui/src/Form/Field.svelte           |  14 +--
 packages/bbui/src/Form/Input.svelte           |  15 ++-
 packages/bbui/src/Form/Select.svelte          |  56 +++++----
 .../bbui/src/StatusLight/StatusLight.svelte   |  40 +++----
 .../bindings/DrawerBindableInput.svelte       |  40 +++----
 .../[screenId]/_components/StatePanel.svelte  |   6 +-
 10 files changed, 226 insertions(+), 176 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 88866196a7..8fcf769be2 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
@@ -11,43 +11,61 @@
   import Tags from "../../Tags/Tags.svelte"
   import Tag from "../../Tags/Tag.svelte"
   import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
+  import { PopoverAlignment } from "../../constants"
 
-  export let id = null
-  export let disabled = false
-  export let fieldText = ""
-  export let fieldIcon = ""
-  export let fieldColour = ""
-  export let isPlaceholder = false
-  export let placeholderOption = null
-  export let options = []
-  export let isOptionSelected = () => false
-  export let isOptionEnabled = () => true
-  export let onSelectOption = () => {}
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let getOptionIcon = () => null
+  export let id: string | undefined = undefined
+  export let disabled: boolean = false
+  export let fieldText: string = ""
+  export let fieldIcon: string = ""
+  export let fieldColour: string = ""
+  export let isPlaceholder: boolean = false
+  export let placeholderOption: string | undefined | boolean = undefined
+  export let options: any[] = []
+  export let isOptionSelected = (_value: any) => false
+  export let isOptionEnabled = (_value: any) => true
+  export let onSelectOption: (_value: any) => void = () => {}
+  export let getOptionLabel: (_option: any, _idx?: number) => string = option =>
+    option
+  export let getOptionValue: (_option: any, _idx?: number) => any = option =>
+    option
+  export let getOptionIcon: (
+    _option: any,
+    _idx?: number
+  ) => string | undefined = () => undefined
   export let useOptionIconImage = false
-  export let getOptionColour = () => null
-  export let getOptionSubtitle = () => null
-  export let open = false
-  export let readonly = false
-  export let quiet = false
-  export let autoWidth = false
-  export let autocomplete = false
-  export let sort = false
-  export let searchTerm = null
-  export let customPopoverHeight
-  export let align = "left"
-  export let footer = null
-  export let customAnchor = null
-  export let loading
-  export let onOptionMouseenter = () => {}
-  export let onOptionMouseleave = () => {}
+  export let getOptionColour: (
+    _option: any,
+    _idx?: number
+  ) => string | undefined = () => undefined
+  export let getOptionSubtitle: (
+    _option: any,
+    _idx?: number
+  ) => string | undefined = () => undefined
+  export let open: boolean = false
+  export let readonly: boolean = false
+  export let quiet: boolean = false
+  export let autoWidth: boolean | undefined = false
+  export let autocomplete: boolean = false
+  export let sort: boolean = false
+  export let searchTerm: string | null = null
+  export let customPopoverHeight: string | undefined = undefined
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let customAnchor: HTMLElement | undefined = undefined
+  export let loading: boolean = false
+  export let onOptionMouseenter: (
+    _e: MouseEvent,
+    _option: any
+  ) => void = () => {}
+  export let onOptionMouseleave: (
+    _e: MouseEvent,
+    _option: any
+  ) => void = () => {}
 
   const dispatch = createEventDispatcher()
 
-  let button
-  let component
+  let button: any
+  let component: any
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -56,7 +74,7 @@
     getOptionLabel
   )
 
-  const onClick = e => {
+  const onClick = (e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
     dispatch("click")
@@ -67,7 +85,11 @@
     open = !open
   }
 
-  const getSortedOptions = (options, getLabel, sort) => {
+  const getSortedOptions = (
+    options: any[],
+    getLabel: (_option: any) => string,
+    sort: boolean
+  ) => {
     if (!options?.length || !Array.isArray(options)) {
       return []
     }
@@ -81,17 +103,21 @@
     })
   }
 
-  const getFilteredOptions = (options, term, getLabel) => {
+  const getFilteredOptions = (
+    options: any[],
+    term: string | null,
+    getLabel: (_option: any) => string
+  ) => {
     if (autocomplete && term) {
       const lowerCaseTerm = term.toLowerCase()
-      return options.filter(option => {
+      return options.filter((option: any) => {
         return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
       })
     }
     return options
   }
 
-  const onScroll = e => {
+  const onScroll = (e: any) => {
     const scrollPxThreshold = 100
     const scrollPositionFromBottom =
       e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
@@ -151,18 +177,20 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover
   anchor={customAnchor ? customAnchor : button}
-  align={align || "left"}
+  align={align || PopoverAlignment.Left}
   {open}
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
-  maxWidth={autoWidth ? 400 : null}
+  maxWidth={autoWidth ? 400 : undefined}
   customHeight={customPopoverHeight}
   maxHeight={360}
 >
   <div
     class="popover-content"
     class:auto-width={autoWidth}
-    use:clickOutside={() => (open = false)}
+    use:clickOutside={() => {
+      open = false
+    }}
   >
     {#if autocomplete}
       <Search
diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
index f19c2a7f4c..fbd09117a1 100644
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -1,19 +1,19 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/search/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let placeholder = null
+  export let value: any = null
+  export let placeholder: string | undefined = undefined
   export let disabled = false
   export let id = null
   export let updateOnChange = true
   export let quiet = false
-  export let inputRef
+  export let inputRef: HTMLInputElement | undefined = undefined
 
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = value => {
+  const updateValue = (value: any) => {
     dispatch("change", value)
   }
 
@@ -21,19 +21,19 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     focus = false
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (!updateOnChange) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event: any) => {
     if (event.key === "Enter") {
       updateValue(event.target.value)
     }
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 7d325bb6cc..0e88216887 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -1,33 +1,43 @@
-<script>
+<script lang="ts">
   import { createEventDispatcher } from "svelte"
   import Picker from "./Picker.svelte"
-
-  export let value = null
-  export let id = null
-  export let placeholder = "Choose an option"
-  export let disabled = false
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let getOptionIcon = () => null
-  export let getOptionColour = () => null
-  export let getOptionSubtitle = () => null
-  export let compare = null
+  import { PopoverAlignment } from "../../constants"
+  export let value: any = null
+  export let id: string | undefined = undefined
+  export let placeholder: string | boolean = "Choose an option"
+  export let disabled: boolean = false
+  export let options: any[] = []
+  export let getOptionLabel = (option: any) => option
+  export let getOptionValue = (_option: any, _idx: number | undefined) =>
+    _option
+  export let getOptionIcon: (
+    _option: any,
+    _idx?: number
+  ) => string | undefined = () => undefined
+  export let getOptionColour: (
+    _option: any,
+    _idx?: number
+  ) => string | undefined = () => undefined
+  export let getOptionSubtitle: (
+    _option: any,
+    _idx?: number
+  ) => string | undefined = () => undefined
+  export let compare: any = null
   export let useOptionIconImage = false
   export let isOptionEnabled
-  export let readonly = false
-  export let quiet = false
-  export let autoWidth = false
-  export let autocomplete = false
-  export let sort = false
-  export let align
-  export let footer = null
-  export let open = false
-  export let tag = null
-  export let searchTerm = null
-  export let loading
+  export let readonly: boolean = false
+  export let quiet: boolean = false
+  export let autoWidth: boolean = false
+  export let autocomplete: boolean = false
+  export let sort: boolean = false
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let open: boolean = false
+  export let searchTerm: string | undefined = undefined
+  export let loading: boolean | undefined = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
+  export let customPopoverHeight: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -35,24 +45,28 @@
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
-  function compareOptionAndValue(option, value) {
+  function compareOptionAndValue(option: any, value: any) {
     return typeof compare === "function"
       ? compare(option, value)
       : option === value
   }
 
-  const getFieldAttribute = (getAttribute, value, options) => {
+  const getFieldAttribute = (getAttribute: any, value: any, options: any) => {
     // Wait for options to load if there is a value but no options
     if (!options?.length) {
       return ""
     }
-    const index = options.findIndex((option, idx) =>
+    const index = options.findIndex((option: any, idx: number) =>
       compareOptionAndValue(getOptionValue(option, idx), value)
     )
     return index !== -1 ? getAttribute(options[index], index) : null
   }
 
-  const getFieldText = (value, options, placeholder) => {
+  const getFieldText = (
+    value: any,
+    options: any,
+    placeholder: boolean | string
+  ) => {
     if (value == null || value === "") {
       // Explicit false means use no placeholder and allow an empty fields
       if (placeholder === false) {
@@ -67,7 +81,7 @@
     )
   }
 
-  const selectOption = value => {
+  const selectOption = (value: any) => {
     dispatch("change", value)
     open = false
   }
@@ -98,14 +112,14 @@
   {isOptionEnabled}
   {autocomplete}
   {sort}
-  {tag}
   {onOptionMouseenter}
   {onOptionMouseleave}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder === false
-    ? null
+    ? undefined
     : placeholder || "Choose an option"}
   isOptionSelected={option => compareOptionAndValue(option, value)}
   onSelectOption={selectOption}
   {loading}
+  {customPopoverHeight}
 />
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 917bb2a452..db96a17811 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount, tick } from "svelte"
 
   export let value = null
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
   export let id = null
   export let readonly = false
   export let updateOnChange = true
   export let quiet = false
-  export let align
+  export let align: "left" | "right" | "center" | undefined = undefined
   export let autofocus = false
-  export let autocomplete = null
+  export let autocomplete: boolean | undefined
 
   const dispatch = createEventDispatcher()
 
-  let field
+  let field: any
   let focus = false
 
-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
     if (readonly || disabled) {
       return
     }
@@ -37,7 +37,7 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     if (readonly || disabled) {
       return
     }
@@ -45,14 +45,14 @@
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (readonly || !updateOnChange || disabled) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event: any) => {
     if (readonly || disabled) {
       return
     }
@@ -61,13 +61,20 @@
     }
   }
 
-  const getInputMode = type => {
+  const getInputMode = (type: any) => {
     if (type === "bigint") {
       return "numeric"
     }
     return type === "number" ? "decimal" : "text"
   }
 
+  $: autocompleteValue =
+    typeof autocomplete === "boolean"
+      ? autocomplete
+        ? "on"
+        : "off"
+      : undefined
+
   onMount(async () => {
     if (disabled) return
     focus = autofocus
@@ -104,7 +111,7 @@
     class="spectrum-Textfield-input"
     style={align ? `text-align: ${align};` : ""}
     inputmode={getInputMode(type)}
-    {autocomplete}
+    autocomplete={autocompleteValue}
   />
 </div>
 
diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte
index 1770438c3c..5624956c8c 100644
--- a/packages/bbui/src/Form/Field.svelte
+++ b/packages/bbui/src/Form/Field.svelte
@@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import FieldLabel from "./FieldLabel.svelte"
   import Icon from "../Icon/Icon.svelte"
 
-  export let id = null
-  export let label = null
-  export let labelPosition = "above"
-  export let error = null
-  export let helpText = null
-  export let tooltip = ""
+  export let id: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let tooltip: string | undefined = undefined
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index 47962720af..05b5bfa884 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -1,24 +1,24 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import TextField from "./Core/TextField.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
+  export let value: any = undefined
+  export let label: string | undefined = undefined
   export let labelPosition = "above"
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
   export let readonly = false
   export let error = null
   export let updateOnChange = true
   export let quiet = false
-  export let autofocus
-  export let autocomplete
+  export let autofocus: boolean | undefined = undefined
+  export let autocomplete: boolean | undefined = undefined
   export let helpText = null
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -27,7 +27,6 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <TextField
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {value}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 0e67a1f532..984a382f0a 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -1,44 +1,44 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
   import { createEventDispatcher } from "svelte"
+  import { PopoverAlignment } from "../constants"
 
-  export let value = null
-  export let label = undefined
-  export let disabled = false
-  export let readonly = false
-  export let labelPosition = "above"
-  export let error = null
-  export let placeholder = "Choose an option"
-  export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
-  export let getOptionSubtitle = option => option?.subtitle
-  export let getOptionIcon = option => option?.icon
-  export let getOptionColour = option => option?.colour
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let placeholder: string = "Choose an option"
+  export let options: any[] = []
+  export let getOptionLabel = (option: any) => extractProperty(option, "label")
+  export let getOptionValue = (option: any) => extractProperty(option, "value")
+  export let getOptionSubtitle = (option: any) => option?.subtitle
+  export let getOptionIcon = (option: any) => option?.icon
+  export let getOptionColour = (option: any) => option?.colour
   export let useOptionIconImage = false
   export let isOptionEnabled = undefined
-  export let quiet = false
-  export let autoWidth = false
-  export let sort = false
-  export let tooltip = ""
-  export let autocomplete = false
-  export let customPopoverHeight = undefined
-  export let align = undefined
-  export let footer = null
-  export let tag = null
-  export let helpText = null
-  export let compare = undefined
+  export let quiet: boolean = false
+  export let autoWidth: boolean = false
+  export let sort: boolean = false
+  export let tooltip: string | undefined = undefined
+  export let autocomplete: boolean = false
+  export let customPopoverHeight: string | undefined = undefined
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let compare: any = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
 
-  const extractProperty = (value, property) => {
+  const extractProperty = (value: any, property: any) => {
     if (value && typeof value === "object") {
       return value[property]
     }
@@ -49,7 +49,6 @@
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <Select
     {quiet}
-    {error}
     {disabled}
     {readonly}
     {value}
@@ -68,7 +67,6 @@
     {isOptionEnabled}
     {autocomplete}
     {customPopoverHeight}
-    {tag}
     {compare}
     {onOptionMouseenter}
     {onOptionMouseleave}
diff --git a/packages/bbui/src/StatusLight/StatusLight.svelte b/packages/bbui/src/StatusLight/StatusLight.svelte
index f3ef1f62de..e15bed42dd 100644
--- a/packages/bbui/src/StatusLight/StatusLight.svelte
+++ b/packages/bbui/src/StatusLight/StatusLight.svelte
@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/statuslight"
 
-  export let size = "M"
-  export let celery = false
-  export let yellow = false
-  export let fuchsia = false
-  export let indigo = false
-  export let seafoam = false
-  export let chartreuse = false
-  export let magenta = false
-  export let purple = false
-  export let neutral = false
-  export let info = false
-  export let positive = false
-  export let notice = false
-  export let negative = false
-  export let disabled = false
-  export let active = false
-  export let color = null
-  export let square = false
-  export let hoverable = false
+  export let size: string = "M"
+  export let celery: boolean = false
+  export let yellow: boolean = false
+  export let fuchsia: boolean = false
+  export let indigo: boolean = false
+  export let seafoam: boolean = false
+  export let chartreuse: boolean = false
+  export let magenta: boolean = false
+  export let purple: boolean = false
+  export let neutral: boolean = false
+  export let info: boolean = false
+  export let positive: boolean = false
+  export let notice: boolean = false
+  export let negative: boolean = false
+  export let disabled: boolean = false
+  export let active: boolean = false
+  export let color: string | undefined = undefined
+  export let square: boolean = false
+  export let hoverable: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index aec23f6ccc..8957fa9a77 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { Icon, Input, Drawer, Button } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
@@ -10,25 +10,25 @@
   import { builderStore } from "@/stores/builder"
 
   export let panel = ClientBindingPanel
-  export let value = ""
-  export let bindings = []
-  export let title
-  export let placeholder
-  export let label
-  export let disabled = false
-  export let allowHBS = true
-  export let allowJS = true
-  export let allowHelpers = true
-  export let updateOnChange = true
-  export let key
-  export let disableBindings = false
-  export let forceModal = false
+  export let value: any = ""
+  export let bindings: any[] = []
+  export let title: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let allowHBS: boolean = true
+  export let allowJS: boolean = true
+  export let allowHelpers: boolean = true
+  export let updateOnChange: boolean = true
+  export let key: string | null = null
+  export let disableBindings: boolean = false
+  export let forceModal: boolean = false
   export let context = null
-  export let autocomplete
+  export let autocomplete: boolean | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
-  let bindingDrawer
+  let bindingDrawer: any
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -38,7 +38,7 @@
   const saveBinding = () => {
     onChange(tempValue)
     onBlur()
-    builderStore.propertyFocus()
+    builderStore.propertyFocus(null)
     bindingDrawer.hide()
   }
 
@@ -46,7 +46,7 @@
     save: saveBinding,
   })
 
-  const onChange = value => {
+  const onChange = (value: any) => {
     currentVal = readableToRuntimeBinding(bindings, value)
     dispatch("change", currentVal)
   }
@@ -55,8 +55,8 @@
     dispatch("blur", currentVal)
   }
 
-  const onDrawerHide = e => {
-    builderStore.propertyFocus()
+  const onDrawerHide = (e: any) => {
+    builderStore.propertyFocus(null)
     dispatch("drawerHide", e.detail)
   }
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 60a43059fc..df3bc72c68 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -265,7 +265,7 @@
       </div>
     </div>
   {/if}
-  <div style="opacity: 0.5; ">
+  <div class="link-opacity">
     <Link
       href="https://docs.budibase.com/docs/app-state"
       target="_blank"
@@ -329,4 +329,8 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
+
+  .link-opacity {
+    opacity: 0.5;
+  }
 </style>

From 4d4fb3a0d728ba111eb79cdc4843904ca65ab210 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Jan 2025 13:57:37 +0000
Subject: [PATCH 42/81] fix types

---
 packages/bbui/src/Form/Input.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index 05b5bfa884..b1a8669135 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -10,12 +10,12 @@
   export let type = "text"
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
   export let updateOnChange = true
   export let quiet = false
   export let autofocus: boolean | undefined = undefined
   export let autocomplete: boolean | undefined = undefined
-  export let helpText = null
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const onChange = (e: any) => {

From 0a2f88376148019bc9ce748d2b58ae399d09c341 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Jan 2025 14:04:30 +0000
Subject: [PATCH 43/81] fix bad merge

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

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 7e0c59b939..8ba4e8ca2c 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -1,3 +1,10 @@
+<script context="module" lang="ts">
+  export interface PopoverAPI {
+    show: () => void
+    hide: () => void
+  }
+</script>
+
 <script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
   import Portal from "svelte-portal"

From 0ac2f882e7701533ff60a54c40762d25dcd6ebf3 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Jan 2025 15:59:21 +0000
Subject: [PATCH 44/81] fixes

---
 packages/bbui/src/Form/Core/Search.svelte             |  2 +-
 .../design/[screenId]/_components/StatePanel.svelte   | 11 -----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
index fbd09117a1..bc3b38d8ed 100644
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -8,7 +8,7 @@
   export let id = null
   export let updateOnChange = true
   export let quiet = false
-  export let inputRef: HTMLInputElement | undefined = undefined
+  export let inputRef: HTMLElement | undefined = undefined
 
   const dispatch = createEventDispatcher()
   let focus = false
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index df3bc72c68..da971fc85b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -28,7 +28,6 @@
   let componentsUsingState: ComponentUsingState[] = []
   let componentsUpdatingState: ComponentUsingState[] = []
   let editorValue: string = ""
-  let editorError: string | null = null
 
   onMount(() => {
     previewStore.requestComponentContext()
@@ -40,10 +39,8 @@
     if (selectedKey && previewContext.state) {
       // It's unlikely value will ever be populated immediately as preview never has state values on load
       editorValue = previewContext.state[selectedKey] ?? null
-      editorError = null
     } else {
       editorValue = ""
-      editorError = null
     }
   }
 
@@ -196,12 +193,7 @@
       throw new Error("No state key selected")
     }
 
-    if (!e.detail) {
-      return
-    }
-
     const stateUpdate = { [selectedKey]: e.detail }
-    editorError = null
 
     previewStore.updateState(stateUpdate)
     previewStore.setSelectedComponentContext({
@@ -230,9 +222,6 @@
       label="Set temporary value for design preview"
       on:change={handleStateInspectorChange}
     />
-    {#if editorError}
-      <div class="error">{editorError}</div>
-    {/if}
   </div>
 
   {#if componentsUsingState.length > 0}

From 4b7270a85522abe16bd9b6991e476e52e857ee4a Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Jan 2025 16:03:49 +0000
Subject: [PATCH 45/81] add onRowClick to components updating state

---
 .../design/[screenId]/_components/StatePanel.svelte            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index da971fc85b..5a47399e4a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -50,7 +50,7 @@
   ): ComponentUsingState[] => {
     let foundComponents: ComponentUsingState[] = []
 
-    const eventHandlerProps = ["onClick", "onChange"]
+    const eventHandlerProps = ["onClick", "onChange", "onRowClick"]
 
     eventHandlerProps.forEach(eventType => {
       const handlers = component[eventType]
@@ -164,6 +164,7 @@
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
+    console.log($selectedScreen.props)
     componentsUsingState = findComponentsUsingState(
       $selectedScreen.props,
       stateKey

From eb932770b3103fcb8e8b8faf7b9c34c197690d6f Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Jan 2025 16:51:25 +0000
Subject: [PATCH 46/81] further updates

---
 .../design/[screenId]/_components/StatePanel.svelte    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 5a47399e4a..53e192dd89 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -50,7 +50,13 @@
   ): ComponentUsingState[] => {
     let foundComponents: ComponentUsingState[] = []
 
-    const eventHandlerProps = ["onClick", "onChange", "onRowClick"]
+    const eventHandlerProps = [
+      "onClick",
+      "onChange",
+      "onRowClick",
+      "onChange",
+      "buttonOnClick",
+    ]
 
     eventHandlerProps.forEach(eventType => {
       const handlers = component[eventType]
@@ -164,7 +170,7 @@
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
-    console.log($selectedScreen.props)
+
     componentsUsingState = findComponentsUsingState(
       $selectedScreen.props,
       stateKey

From 43b7dc5d7b9c8ff8ef058fe5116b71d86e1e8edb Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Sat, 25 Jan 2025 16:18:22 +0000
Subject: [PATCH 47/81] pr feedback

---
 packages/bbui/src/Form/Select.svelte          |  2 +-
 packages/builder/src/dataBinding.js           | 21 +++--
 .../[screenId]/_components/StatePanel.svelte  | 83 ++++++++++---------
 3 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 984a382f0a..b935aaff71 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -10,7 +10,7 @@
   export let readonly: boolean = false
   export let labelPosition: string = "above"
   export let error: string | undefined = undefined
-  export let placeholder: string = "Choose an option"
+  export let placeholder: string | boolean = "Choose an option"
   export let options: any[] = []
   export let getOptionLabel = (option: any) => extractProperty(option, "label")
   export let getOptionValue = (option: any) => extractProperty(option, "value")
diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js
index 1272c9eb6d..df2a910395 100644
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@@ -1159,10 +1159,16 @@ export const buildFormSchema = (component, asset) => {
  * Returns an array of the keys of any state variables which are set anywhere
  * in the app.
  */
-export const getAllStateVariables = () => {
+export const getAllStateVariables = (screen = null) => {
   // Find all button action settings in all components
+  let assets = []
+  if (screen) {
+    assets.push(screen)
+  } else {
+    assets = getAllAssets()
+  }
   let eventSettings = []
-  getAllAssets().forEach(asset => {
+  assets.forEach(asset => {
     findAllMatchingComponents(asset.props, component => {
       const settings = componentStore.getComponentSettings(component._component)
       const nestedTypes = [
@@ -1213,12 +1219,17 @@ export const getAllStateVariables = () => {
     })
   })
 
-  // Add on load settings from screens
-  get(screenStore).screens.forEach(screen => {
+  if (screen) {
     if (screen.onLoad) {
       eventSettings.push(screen.onLoad)
     }
-  })
+  } else {
+    get(screenStore).screens.forEach(screen => {
+      if (screen.onLoad) {
+        eventSettings.push(screen.onLoad)
+      }
+    })
+  }
 
   // Extract all state keys from any "update state" actions in each setting
   let bindingSet = new Set()
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 53e192dd89..847b078887 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte"
   import { Select, Link } from "@budibase/bbui"
   import type { Component } from "@budibase/types"
-  import { getAllStateVariables } from "@/dataBinding"
+  import { getAllStateVariables, getBindableProperties } from "@/dataBinding"
   import {
     componentStore,
     selectedScreen,
@@ -16,31 +16,40 @@
   } from "@budibase/string-templates"
   import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
-  type ComponentUsingState = {
+  interface ComponentUsingState {
     id: string
     name: string
     settings: string[]
   }
 
-  const keyOptions = getAllStateVariables()
+  $: keyOptions = getAllStateVariables($selectedScreen)
+  $: bindings = getBindableProperties(
+    $selectedScreen,
+    $componentStore.selectedComponentId
+  )
 
   let selectedKey: string | undefined = undefined
   let componentsUsingState: ComponentUsingState[] = []
   let componentsUpdatingState: ComponentUsingState[] = []
   let editorValue: string = ""
+  let previousScreenId: string | undefined = undefined
 
-  onMount(() => {
-    previewStore.requestComponentContext()
-  })
-
-  $: $selectedScreen, selectedKey && searchComponents(selectedKey)
   $: {
+    const screenChanged =
+      $selectedScreen && $selectedScreen._id !== previousScreenId
     const previewContext = $previewStore.selectedComponentContext || {}
-    if (selectedKey && previewContext.state) {
-      // It's unlikely value will ever be populated immediately as preview never has state values on load
-      editorValue = previewContext.state[selectedKey] ?? null
-    } else {
+
+    if (screenChanged) {
+      selectedKey = keyOptions[0]
+      componentsUsingState = []
+      componentsUpdatingState = []
       editorValue = ""
+      previousScreenId = $selectedScreen._id
+    }
+
+    if (selectedKey) {
+      searchComponents(selectedKey)
+      editorValue = previewContext.state?.[selectedKey] ?? ""
     }
   }
 
@@ -197,18 +206,19 @@
 
   const handleStateInspectorChange = (e: CustomEvent) => {
     if (!selectedKey || !$previewStore.selectedComponentContext) {
-      throw new Error("No state key selected")
+      return
     }
 
-    const stateUpdate = { [selectedKey]: e.detail }
-
+    const stateUpdate = {
+      [selectedKey]: e.detail,
+    }
     previewStore.updateState(stateUpdate)
-    previewStore.setSelectedComponentContext({
-      ...$previewStore.selectedComponentContext,
-      state: stateUpdate,
-    })
-    previewStore.requestComponentContext()
+    editorValue = e.detail
   }
+
+  onMount(() => {
+    previewStore.requestComponentContext()
+  })
 </script>
 
 <div class="state-panel">
@@ -216,21 +226,23 @@
     <Select
       label="State variables"
       bind:value={selectedKey}
-      placeholder="Type here..."
+      placeholder={keyOptions.length > 0 ? false : "No state variables found"}
       options={keyOptions}
       on:change={handleStateKeySelect}
     />
   </div>
-  <div class="section">
-    <DrawerBindableInput
-      value={editorValue}
-      title={`Set value for "${selectedKey}"`}
-      placeholder="Enter a value"
-      label="Set temporary value for design preview"
-      on:change={handleStateInspectorChange}
-    />
-  </div>
-
+  {#if selectedKey && keyOptions.length > 0}
+    <div class="section">
+      <DrawerBindableInput
+        value={editorValue}
+        title={`Set value for "${selectedKey}"`}
+        placeholder="Enter a value"
+        label="Set temporary value for design preview"
+        on:change={e => handleStateInspectorChange(e)}
+        {bindings}
+      />
+    </div>
+  {/if}
   {#if componentsUsingState.length > 0}
     <div class="section">
       <span class="text">Updates:</span>
@@ -276,7 +288,6 @@
 <style>
   .state-panel {
     background-color: var(--spectrum-alias-background-color-primary);
-    padding: var(--spacing-m);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-m);
@@ -290,14 +301,6 @@
     color: var(--spectrum-global-color-gray-700);
     font-size: var(--spectrum-global-dimension-font-size-50);
   }
-  .error {
-    color: var(
-      --spectrum-semantic-negative-color-default,
-      var(--spectrum-global-color-red-500)
-    );
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    margin-top: var(--spectrum-global-dimension-size-75);
-  }
 
   .updates-colour {
     color: #8488fd;

From 09f4db6b570136dab3d3581d8b78afdf9d41cd80 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 27 Jan 2025 09:01:39 +0000
Subject: [PATCH 48/81] finding of screen onload

---
 .../[screenId]/_components/StatePanel.svelte  | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 847b078887..1c0473d8db 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -47,6 +47,10 @@
       previousScreenId = $selectedScreen._id
     }
 
+    if (keyOptions.length > 0 && !keyOptions.includes(selectedKey)) {
+      selectedKey = keyOptions[0]
+    }
+
     if (selectedKey) {
       searchComponents(selectedKey)
       editorValue = previewContext.state?.[selectedKey] ?? ""
@@ -180,14 +184,30 @@
       return
     }
 
+    const componentStateUpdates = findComponentsUpdatingState(
+      $selectedScreen.props,
+      stateKey
+    )
+
     componentsUsingState = findComponentsUsingState(
       $selectedScreen.props,
       stateKey
     )
-    componentsUpdatingState = findComponentsUpdatingState(
-      $selectedScreen.props,
-      stateKey
-    )
+
+    const screenStateUpdates =
+      $selectedScreen?.onLoad
+        ?.filter(
+          (handler: any) =>
+            handler["##eventHandlerType"] === "Update State" &&
+            handler.parameters?.key === stateKey
+        )
+        .map(() => ({
+          id: $selectedScreen._id,
+          name: "Screen onLoad",
+          settings: ["onLoad"],
+        })) || []
+
+    componentsUpdatingState = [...componentStateUpdates, ...screenStateUpdates]
   }
 
   const handleStateKeySelect = (key: CustomEvent) => {

From 09bb958f0ff23c32735d325dc835c0e31bd58119 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 27 Jan 2025 10:08:50 +0000
Subject: [PATCH 49/81] finally tracked down issue with urlStateSync causing
 update

---
 .../builder/src/stores/builder/components.ts    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index f1a4916973..a30cdaaf59 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -716,15 +716,16 @@ export class ComponentStore extends BudiStore<ComponentState> {
    *
    * @param {string} componentId
    */
-  select(componentId: string) {
-    builderStore.update(state => {
-      state.highlightedSetting = null
-      return state
-    })
-
+  select(id: string) {
     this.update(state => {
-      state.selectedComponentId = componentId
-      return state
+      // Only clear highlights if selecting a different component
+      if (!id.includes(state.selectedComponentId!)) {
+        builderStore.highlightSetting()
+      }
+      return {
+        ...state,
+        selectedComponentId: id,
+      }
     })
   }
 

From 44d9a51fc2b0881068f9223312c41d872513500d Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 27 Jan 2025 15:43:46 +0000
Subject: [PATCH 50/81] handle js bindings in default value

---
 .../design/[screenId]/_components/StatePanel.svelte         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 1c0473d8db..228211a8af 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -13,6 +13,7 @@
     decodeJSBinding,
     findHBSBlocks,
     isJSBinding,
+    processStringSync,
   } from "@budibase/string-templates"
   import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
@@ -230,7 +231,10 @@
     }
 
     const stateUpdate = {
-      [selectedKey]: e.detail,
+      [selectedKey]: processStringSync(
+        e.detail,
+        $previewStore.selectedComponentContext
+      ),
     }
     previewStore.updateState(stateUpdate)
     editorValue = e.detail

From 987b3e83f4ac673a38338cf9b4bd01bc14daac44 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 28 Jan 2025 11:07:06 +0000
Subject: [PATCH 51/81] fix types

---
 packages/bbui/src/Form/Core/Picker.svelte | 39 ++++++++++----------
 packages/bbui/src/Form/Core/Select.svelte | 45 ++++++++++++-----------
 packages/bbui/src/Form/Select.svelte      | 28 +++++++++-----
 3 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 8fcf769be2..8541858923 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -1,3 +1,8 @@
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
 <script lang="ts">
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
@@ -20,27 +25,21 @@
   export let fieldColour: string = ""
   export let isPlaceholder: boolean = false
   export let placeholderOption: string | undefined | boolean = undefined
-  export let options: any[] = []
-  export let isOptionSelected = (_value: any) => false
-  export let isOptionEnabled = (_value: any) => true
-  export let onSelectOption: (_value: any) => void = () => {}
-  export let getOptionLabel: (_option: any, _idx?: number) => string = option =>
-    option
-  export let getOptionValue: (_option: any, _idx?: number) => any = option =>
-    option
-  export let getOptionIcon: (
-    _option: any,
-    _idx?: number
-  ) => string | undefined = () => undefined
+  export let options: O[] = []
+  export let isOptionSelected = (option: O) => option as unknown as boolean
+  export let isOptionEnabled = (option: O, _index?: number) =>
+    option as unknown as boolean
+  export let onSelectOption: (_value: V) => void = () => {}
+  export let getOptionLabel = (option: O, _index?: number) => `${option}`
+  export let getOptionValue = (option: O, _index?: number) =>
+    option as unknown as V
+  export let getOptionIcon = (option: O, _index?: number) =>
+    option as unknown as O
   export let useOptionIconImage = false
-  export let getOptionColour: (
-    _option: any,
-    _idx?: number
-  ) => string | undefined = () => undefined
-  export let getOptionSubtitle: (
-    _option: any,
-    _idx?: number
-  ) => string | undefined = () => undefined
+  export let getOptionColour = (option: O, _index?: number) =>
+    option as unknown as O
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option as unknown as O
   export let open: boolean = false
   export let readonly: boolean = false
   export let quiet: boolean = false
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 0e88216887..2957c0fec2 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -1,30 +1,31 @@
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
   import Picker from "./Picker.svelte"
   import { PopoverAlignment } from "../../constants"
-  export let value: any = null
+
+  export let value: V | null = null
   export let id: string | undefined = undefined
   export let placeholder: string | boolean = "Choose an option"
   export let disabled: boolean = false
-  export let options: any[] = []
-  export let getOptionLabel = (option: any) => option
-  export let getOptionValue = (_option: any, _idx: number | undefined) =>
-    _option
-  export let getOptionIcon: (
-    _option: any,
-    _idx?: number
-  ) => string | undefined = () => undefined
-  export let getOptionColour: (
-    _option: any,
-    _idx?: number
-  ) => string | undefined = () => undefined
-  export let getOptionSubtitle: (
-    _option: any,
-    _idx?: number
-  ) => string | undefined = () => undefined
-  export let compare: any = null
+  export let options: O[] = []
+  export let getOptionLabel = (option: O, _index?: number) => `${option}`
+  export let getOptionValue = (option: O, _index?: number) =>
+    option as unknown as V
+  export let getOptionIcon = (option: O, _index?: number) =>
+    option as unknown as string
+  export let getOptionColour = (option: O, _index?: number) =>
+    option as unknown as string
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option as unknown as string
+  export let compare = (option: O, value: V) => option === value
   export let useOptionIconImage = false
-  export let isOptionEnabled
+  export let isOptionEnabled = (option: O, _index?: number) =>
+    option as unknown as boolean
   export let readonly: boolean = false
   export let quiet: boolean = false
   export let autoWidth: boolean = false
@@ -45,13 +46,13 @@
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
-  function compareOptionAndValue(option: any, value: any) {
+  function compareOptionAndValue(option: O, value: V) {
     return typeof compare === "function"
       ? compare(option, value)
       : option === value
   }
 
-  const getFieldAttribute = (getAttribute: any, value: any, options: any) => {
+  const getFieldAttribute = (getAttribute: any, value: V[], options: O[]) => {
     // Wait for options to load if there is a value but no options
     if (!options?.length) {
       return ""
@@ -81,7 +82,7 @@
     )
   }
 
-  const selectOption = (value: any) => {
+  const selectOption = (value: V) => {
     dispatch("change", value)
     open = false
   }
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index b935aaff71..be79da36aa 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -1,24 +1,34 @@
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
 <script lang="ts">
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
   import { createEventDispatcher } from "svelte"
   import { PopoverAlignment } from "../constants"
 
-  export let value: string | undefined = undefined
+  export let value: V | undefined = undefined
   export let label: string | undefined = undefined
   export let disabled: boolean = false
   export let readonly: boolean = false
   export let labelPosition: string = "above"
   export let error: string | undefined = undefined
   export let placeholder: string | boolean = "Choose an option"
-  export let options: any[] = []
-  export let getOptionLabel = (option: any) => extractProperty(option, "label")
-  export let getOptionValue = (option: any) => extractProperty(option, "value")
-  export let getOptionSubtitle = (option: any) => option?.subtitle
-  export let getOptionIcon = (option: any) => option?.icon
-  export let getOptionColour = (option: any) => option?.colour
+  export let options: O[] = []
+  export let getOptionLabel = (option: O, _index?: number) =>
+    extractProperty(option, "label")
+  export let getOptionValue = (option: O, _index?: number) =>
+    extractProperty(option, "value")
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option?.subtitle
+  export let getOptionIcon = (option: O, _index?: number) => option?.icon
+  export let getOptionColour = (option: O, _index?: number) => option?.colour
   export let useOptionIconImage = false
-  export let isOptionEnabled = undefined
+  export let isOptionEnabled:
+    | ((_option: O, _index?: number) => boolean)
+    | undefined = undefined
   export let quiet: boolean = false
   export let autoWidth: boolean = false
   export let sort: boolean = false
@@ -33,7 +43,7 @@
   export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
-  const onChange = (e: any) => {
+  const onChange = (e: CustomEvent<any>) => {
     value = e.detail
     dispatch("change", e.detail)
   }

From b7dbe2e11c819487a453de0f0cedaa2dc84ef7e1 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 28 Jan 2025 11:24:46 +0000
Subject: [PATCH 52/81] tidy up

---
 packages/builder/src/dataBinding.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js
index df2a910395..b476365aab 100644
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@@ -1160,11 +1160,12 @@ export const buildFormSchema = (component, asset) => {
  * in the app.
  */
 export const getAllStateVariables = (screen = null) => {
-  // Find all button action settings in all components
   let assets = []
   if (screen) {
+    // only include state variables from a specific screen
     assets.push(screen)
   } else {
+    // otherwise include state variables from all screens
     assets = getAllAssets()
   }
   let eventSettings = []
@@ -1219,6 +1220,7 @@ export const getAllStateVariables = (screen = null) => {
     })
   })
 
+  // Add on load settings from screens
   if (screen) {
     if (screen.onLoad) {
       eventSettings.push(screen.onLoad)

From a100099cd3981ce3d65198eab5d71916027011c4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 28 Jan 2025 15:51:10 +0000
Subject: [PATCH 53/81] some further ux updates

---
 .../[screenId]/_components/StatePanel.svelte  | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 228211a8af..e3fa50f07f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -212,7 +212,7 @@
   }
 
   const handleStateKeySelect = (key: CustomEvent) => {
-    if (!key.detail) {
+    if (!key.detail && keyOptions.length > 0) {
       throw new Error("No state key selected")
     }
     searchComponents(key.detail)
@@ -246,6 +246,15 @@
 </script>
 
 <div class="state-panel">
+  <div class="link">
+    <Link
+      href="https://docs.budibase.com/docs/app-state"
+      target="_blank"
+      secondary
+    >
+      Learn how to use State within Budibase.
+    </Link>
+  </div>
   <div class="section">
     <Select
       label="State variables"
@@ -297,16 +306,6 @@
       </div>
     </div>
   {/if}
-  <div class="link-opacity">
-    <Link
-      href="https://docs.budibase.com/docs/app-state"
-      target="_blank"
-      size={"S"}
-      secondary
-    >
-      Learn more about State within Budibase.
-    </Link>
-  </div>
 </div>
 
 <style>
@@ -319,18 +318,18 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-s);
+    gap: var(--spacing-xs);
   }
   .text {
-    color: var(--spectrum-global-color-gray-700);
+    color: var(--spectrum-global-color-gray-600);
     font-size: var(--spectrum-global-dimension-font-size-50);
   }
 
   .updates-colour {
-    color: #8488fd;
+    color: var(--spectrum-global-color-blue-700);
   }
   .controlled-by-colour {
-    color: #e87400;
+    color: var(--spectrum-global-color-orange-700);
   }
   .component-link {
     display: inline-block;
@@ -353,7 +352,12 @@
     gap: var(--spacing-xs);
   }
 
-  .link-opacity {
-    opacity: 0.5;
+  .link {
+    color: var(--spectrum-global-color-gray-600);
+    margin-top: var(--spacing-m);
+  }
+
+  .link:hover {
+    color: var(--spectrum-global-color-gray-700);
   }
 </style>

From 680f52adbd8e96c6e3998fe099802413838fd0c6 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 29 Jan 2025 09:35:13 +0000
Subject: [PATCH 54/81] remove link

---
 .../design/[screenId]/_components/StatePanel.svelte      | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index e3fa50f07f..61630f3c98 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -246,15 +246,6 @@
 </script>
 
 <div class="state-panel">
-  <div class="link">
-    <Link
-      href="https://docs.budibase.com/docs/app-state"
-      target="_blank"
-      secondary
-    >
-      Learn how to use State within Budibase.
-    </Link>
-  </div>
   <div class="section">
     <Select
       label="State variables"

From 8a0c9aef0147d46bfea2f7e707888e5493a0d64d Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 29 Jan 2025 10:16:06 +0000
Subject: [PATCH 55/81] lint

---
 packages/builder/src/dataBinding.js                 |  2 +-
 .../design/[screenId]/_components/StatePanel.svelte | 13 ++-----------
 packages/types/src/documents/app/screen.ts          | 12 ++++++++++++
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js
index b476365aab..739ecc9494 100644
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@@ -1159,7 +1159,7 @@ export const buildFormSchema = (component, asset) => {
  * Returns an array of the keys of any state variables which are set anywhere
  * in the app.
  */
-export const getAllStateVariables = (screen = null) => {
+export const getAllStateVariables = screen => {
   let assets = []
   if (screen) {
     // only include state variables from a specific screen
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 61630f3c98..fb2d8da93b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { Select, Link } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
   import type { Component } from "@budibase/types"
   import { getAllStateVariables, getBindableProperties } from "@/dataBinding"
   import {
@@ -203,7 +203,7 @@
             handler.parameters?.key === stateKey
         )
         .map(() => ({
-          id: $selectedScreen._id,
+          id: $selectedScreen._id!,
           name: "Screen onLoad",
           settings: ["onLoad"],
         })) || []
@@ -342,13 +342,4 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
-
-  .link {
-    color: var(--spectrum-global-color-gray-600);
-    margin-top: var(--spacing-m);
-  }
-
-  .link:hover {
-    color: var(--spectrum-global-color-gray-700);
-  }
 </style>
diff --git a/packages/types/src/documents/app/screen.ts b/packages/types/src/documents/app/screen.ts
index a8c32118d3..20355d111b 100644
--- a/packages/types/src/documents/app/screen.ts
+++ b/packages/types/src/documents/app/screen.ts
@@ -23,6 +23,7 @@ export interface Screen extends Document {
   props: ScreenProps
   name?: string
   pluginAdded?: boolean
+  onLoad?: EventHandler[]
 }
 
 export interface ScreenRoutesViewOutput extends Document {
@@ -36,3 +37,14 @@ export type ScreenRoutingJson = Record<
     subpaths: Record<string, any>
   }
 >
+
+export interface EventHandler {
+  parameters: {
+    key: string
+    type: string
+    value: string
+    persist: any | null
+  }
+  eventHandlerType: string
+  id: string
+}

From f5baa311f93cdd7a68ef6172fd62a9104fc85f6a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 Jan 2025 10:49:31 +0000
Subject: [PATCH 56/81] Remove link

---
 .../_components/BindingsPanel.svelte          | 22 +++----------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 9bfabe0584..5083ad4210 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -68,18 +68,7 @@
 </script>
 
 <div class="bindings-panel">
-  <Layout noPadding gap="S">
-    <div class="text">
-      <Body size="S">Showing all available bindings.</Body>
-      <Link
-        target="_blank"
-        href="https://docs.budibase.com/docs/introduction-to-bindings"
-      >
-        Learn more.
-      </Link>
-    </div>
-    <JSONViewer value={context} showCopyIcon on:click-copy={copyBinding} />
-  </Layout>
+  <JSONViewer value={context} showCopyIcon on:click-copy={copyBinding} />
 </div>
 
 <style>
@@ -88,12 +77,7 @@
     height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: var(--spacing-l);
-  }
-  .text {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    flex-wrap: wrap;
+    padding: var(--spacing-xl) var(--spacing-l) var(--spacing-l)
+      var(--spacing-l);
   }
 </style>

From 9cf0e66fe7893d2fe6b045057a8ce1d1926c4c91 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 Jan 2025 11:17:49 +0000
Subject: [PATCH 57/81] Lint

---
 .../design/[screenId]/_components/BindingsPanel.svelte          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 5083ad4210..fb222905bf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { Link, Body, Helpers, Layout, notifications } from "@budibase/bbui"
+  import { Helpers, notifications } from "@budibase/bbui"
   import { processObjectSync } from "@budibase/string-templates"
   import {
     previewStore,

From 532b74069da0ab91f2cd159461dce8d8abf3124f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 Jan 2025 11:57:08 +0000
Subject: [PATCH 58/81] Design tweaks

---
 .../[screenId]/_components/StatePanel.svelte  | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index fb2d8da93b..af0903276e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -246,30 +246,26 @@
 </script>
 
 <div class="state-panel">
-  <div class="section">
-    <Select
-      label="State variables"
-      bind:value={selectedKey}
-      placeholder={keyOptions.length > 0 ? false : "No state variables found"}
-      options={keyOptions}
-      on:change={handleStateKeySelect}
-    />
-  </div>
+  <Select
+    label="State variables"
+    bind:value={selectedKey}
+    placeholder={keyOptions.length > 0 ? false : "No state variables found"}
+    options={keyOptions}
+    on:change={handleStateKeySelect}
+  />
   {#if selectedKey && keyOptions.length > 0}
-    <div class="section">
-      <DrawerBindableInput
-        value={editorValue}
-        title={`Set value for "${selectedKey}"`}
-        placeholder="Enter a value"
-        label="Set temporary value for design preview"
-        on:change={e => handleStateInspectorChange(e)}
-        {bindings}
-      />
-    </div>
+    <DrawerBindableInput
+      value={editorValue}
+      title={`Set value for "${selectedKey}"`}
+      placeholder="Enter a value"
+      label="Set temporary value for design preview"
+      on:change={e => handleStateInspectorChange(e)}
+      {bindings}
+    />
   {/if}
   {#if componentsUsingState.length > 0}
     <div class="section">
-      <span class="text">Updates:</span>
+      <span class="text">Updates</span>
       <div class="updates-section">
         {#each componentsUsingState as component}
           <button
@@ -284,7 +280,7 @@
   {/if}
   {#if componentsUpdatingState.length > 0}
     <div class="section">
-      <span class="text">Controlled by:</span>
+      <span class="text">Controlled by</span>
       <div class="updates-section">
         {#each componentsUpdatingState as component}
           <button
@@ -309,15 +305,16 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-s);
+    margin-top: var(--spacing-s);
   }
   .text {
-    color: var(--spectrum-global-color-gray-600);
-    font-size: var(--spectrum-global-dimension-font-size-50);
+    color: var(--spectrum-global-color-gray-700);
+    font-size: 12px;
   }
 
   .updates-colour {
-    color: var(--spectrum-global-color-blue-700);
+    color: var(--bb-indigo-light);
   }
   .controlled-by-colour {
     color: var(--spectrum-global-color-orange-700);
@@ -328,9 +325,9 @@
     background: none;
     text-decoration: underline;
     cursor: pointer;
-    font-size: var(--spectrum-global-dimension-font-size-50);
     padding: 0;
     white-space: nowrap;
+    font-size: 12px;
   }
   .component-link:hover {
     text-decoration: underline;
@@ -340,6 +337,6 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-s);
   }
 </style>

From bf2b5a515207d99a153e86a342e631d7b7e93f87 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 29 Jan 2025 12:00:33 +0000
Subject: [PATCH 59/81] typing issue

---
 packages/bbui/src/Form/Core/Combobox.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index e2e2792f54..38cc3ec091 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -11,6 +11,7 @@
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Popover from "../../Popover/Popover.svelte"
+  import { PopoverAlignment } from "../../constants"
 
   export let value: string | undefined = undefined
   export let id: string | undefined = undefined
@@ -97,11 +98,16 @@
 <Popover
   {anchor}
   {open}
-  align="left"
+  align={PopoverAlignment.Left}
   on:close={() => (open = false)}
   useAnchorWidth
 >
-  <div class="popover-content" use:clickOutside={() => (open = false)}>
+  <div
+    class="popover-content"
+    use:clickOutside={() => {
+      open = false
+    }}
+  >
     <ul class="spectrum-Menu" role="listbox">
       {#if options && Array.isArray(options)}
         {#each options as option}

From 9eccaa0017f8d711c50add54edddcb9f83cea7e5 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 29 Jan 2025 14:30:22 +0000
Subject: [PATCH 60/81] use hyphens in state component list

---
 .../design/[screenId]/_components/StatePanel.svelte         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index af0903276e..c992fa7f07 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -147,7 +147,7 @@
     settingsWithState.forEach(setting => {
       componentsUsingState.push({
         id: component._id,
-        name: `${component._instanceName} (${setting})`,
+        name: `${component._instanceName} - ${setting}`,
         settings: [setting],
       })
     })
@@ -155,7 +155,7 @@
     if (_conditions?.length > 0 && checkConditions(_conditions, stateKey)) {
       componentsUsingState.push({
         id: component._id,
-        name: `${component._instanceName} (conditions)`,
+        name: `${component._instanceName} - conditions`,
         settings: ["_conditions"],
       })
     }
@@ -163,7 +163,7 @@
     if (_styles && checkStyles(_styles, stateKey)) {
       componentsUsingState.push({
         id: component._id,
-        name: `${component._instanceName} (styles)`,
+        name: `${component._instanceName} - styles`,
         settings: ["_styles"],
       })
     }

From 6d22718e077e3b47c34c42efb4b7f21f5b8a1c82 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 30 Jan 2025 14:50:51 +0000
Subject: [PATCH 61/81] Updates state panel to address missing usages

---
 .../[screenId]/_components/StatePanel.svelte  | 100 +++++++++++++-----
 1 file changed, 75 insertions(+), 25 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index c992fa7f07..05f444a9f2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -36,11 +36,11 @@
   let previousScreenId: string | undefined = undefined
 
   $: {
-    const screenChanged =
+    const hasScreenChanged =
       $selectedScreen && $selectedScreen._id !== previousScreenId
     const previewContext = $previewStore.selectedComponentContext || {}
 
-    if (screenChanged) {
+    if (hasScreenChanged) {
       selectedKey = keyOptions[0]
       componentsUsingState = []
       componentsUpdatingState = []
@@ -66,38 +66,67 @@
 
     const eventHandlerProps = [
       "onClick",
-      "onChange",
       "onRowClick",
       "onChange",
       "buttonOnClick",
     ]
 
+    const isStateUpdateHandler = (handler: any) =>
+      handler["##eventHandlerType"] === "Update State" &&
+      handler.parameters?.key === stateKey
+
+    const checkEventHandlers = (
+      handlers: any[],
+      componentId: string,
+      instanceName: string,
+      setting: string
+    ) => {
+      if (!Array.isArray(handlers)) return
+
+      handlers.forEach(handler => {
+        if (isStateUpdateHandler(handler)) {
+          foundComponents.push({
+            id: componentId,
+            name: instanceName,
+            settings: [setting],
+          })
+        }
+      })
+    }
+
     eventHandlerProps.forEach(eventType => {
-      const handlers = component[eventType]
-      if (Array.isArray(handlers)) {
-        handlers.forEach(handler => {
-          if (
-            handler["##eventHandlerType"] === "Update State" &&
-            handler.parameters?.key === stateKey
-          ) {
-            foundComponents.push({
-              id: component._id!,
-              name: component._instanceName,
-              settings: [eventType],
-            })
-          }
+      checkEventHandlers(
+        component[eventType],
+        component._id!,
+        component._instanceName,
+        eventType
+      )
+    })
+
+    Object.entries(component).forEach(([propName, propValue]) => {
+      if (Array.isArray(propValue)) {
+        propValue.forEach(item => {
+          eventHandlerProps.forEach(eventType => {
+            checkEventHandlers(
+              item[eventType],
+              component._id!,
+              component._instanceName,
+              propName
+            )
+          })
         })
       }
     })
 
     if (component._children) {
-      for (let child of component._children) {
-        foundComponents = [
-          ...foundComponents,
-          ...findComponentsUpdatingState(child, stateKey),
-        ]
-      }
+      foundComponents = [
+        ...foundComponents,
+        ...component._children.flatMap(child =>
+          findComponentsUpdatingState(child, stateKey)
+        ),
+      ]
     }
+
     return foundComponents
   }
 
@@ -113,11 +142,32 @@
 
   const getSettingsWithState = (component: any, stateKey: string): string[] => {
     const settingsWithState: string[] = []
-    for (const [setting, value] of Object.entries(component)) {
-      if (typeof value === "string" && hasStateBinding(value, stateKey)) {
-        settingsWithState.push(setting)
+
+    const searchForStateBinding = (value: any, path: string[]) => {
+      if (typeof value === "string") {
+        if (hasStateBinding(value, stateKey)) {
+          const topLevelProperty = path[0]
+          if (!settingsWithState.includes(topLevelProperty)) {
+            settingsWithState.push(topLevelProperty)
+          }
+        }
+      } else if (Array.isArray(value)) {
+        value.forEach((item, index) => {
+          searchForStateBinding(item, [...path, `${index}`])
+        })
+      } else if (typeof value === "object" && value !== null) {
+        Object.entries(value).forEach(([key, val]) => {
+          searchForStateBinding(val, [...path, key])
+        })
       }
     }
+
+    Object.entries(component).forEach(([key, value]) => {
+      if (["_children", "_styles", "_conditions"].includes(key)) return
+
+      searchForStateBinding(value, [key])
+    })
+
     return settingsWithState
   }
 

From e9bf78abe089169a850af032d482d8778028dcc4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 30 Jan 2025 16:12:12 +0000
Subject: [PATCH 62/81] unneeded flatmap

---
 .../design/[screenId]/_components/StatePanel.svelte  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 05f444a9f2..f62adf3c9f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -119,12 +119,12 @@
     })
 
     if (component._children) {
-      foundComponents = [
-        ...foundComponents,
-        ...component._children.flatMap(child =>
-          findComponentsUpdatingState(child, stateKey)
-        ),
-      ]
+      for (let child of component._children) {
+        foundComponents = [
+          ...foundComponents,
+          ...findComponentsUpdatingState(child, stateKey),
+        ]
+      }
     }
 
     return foundComponents

From 233112e30fe9ccfe21c7abfaf799cadf21f657d3 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 31 Jan 2025 11:25:57 +0000
Subject: [PATCH 63/81] pr feedback

---
 .../[screenId]/_components/StatePanel.svelte  | 122 ++++++------------
 .../builder/src/stores/builder/components.ts  |   1 +
 2 files changed, 41 insertions(+), 82 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index f62adf3c9f..5b8b0e1794 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -87,7 +87,7 @@
         if (isStateUpdateHandler(handler)) {
           foundComponents.push({
             id: componentId,
-            name: instanceName,
+            name: instanceName + " - " + setting,
             settings: [setting],
           })
         }
@@ -103,20 +103,22 @@
       )
     })
 
-    Object.entries(component).forEach(([propName, propValue]) => {
-      if (Array.isArray(propValue)) {
-        propValue.forEach(item => {
-          eventHandlerProps.forEach(eventType => {
-            checkEventHandlers(
-              item[eventType],
-              component._id!,
-              component._instanceName,
-              propName
-            )
+    Object.entries(component)
+      .filter(([key]) => key !== "_children")
+      .forEach(([propName, propValue]) => {
+        if (Array.isArray(propValue)) {
+          propValue.forEach(item => {
+            eventHandlerProps.forEach(eventType => {
+              checkEventHandlers(
+                item[eventType],
+                component._id!,
+                component._instanceName,
+                propName
+              )
+            })
           })
-        })
-      }
-    })
+        }
+      })
 
     if (component._children) {
       for (let child of component._children) {
@@ -140,84 +142,41 @@
     return bindings.join(" ").includes(stateKey)
   }
 
-  const getSettingsWithState = (component: any, stateKey: string): string[] => {
-    const settingsWithState: string[] = []
-
-    const searchForStateBinding = (value: any, path: string[]) => {
-      if (typeof value === "string") {
-        if (hasStateBinding(value, stateKey)) {
-          const topLevelProperty = path[0]
-          if (!settingsWithState.includes(topLevelProperty)) {
-            settingsWithState.push(topLevelProperty)
-          }
-        }
-      } else if (Array.isArray(value)) {
-        value.forEach((item, index) => {
-          searchForStateBinding(item, [...path, `${index}`])
-        })
-      } else if (typeof value === "object" && value !== null) {
-        Object.entries(value).forEach(([key, val]) => {
-          searchForStateBinding(val, [...path, key])
-        })
-      }
-    }
-
-    Object.entries(component).forEach(([key, value]) => {
-      if (["_children", "_styles", "_conditions"].includes(key)) return
-
-      searchForStateBinding(value, [key])
-    })
-
-    return settingsWithState
+  const getSettingsWithState = (
+    component: Component,
+    stateKey: string
+  ): string[] => {
+    return Object.entries(component)
+      .filter(([key]) => key !== "_children")
+      .filter(([_, value]) => hasStateBinding(JSON.stringify(value), stateKey))
+      .map(([key]) => key)
   }
-
-  const checkConditions = (conditions: any[], stateKey: string): boolean => {
-    return conditions.some(condition =>
-      [condition.referenceValue, condition.newValue].some(
-        value => typeof value === "string" && hasStateBinding(value, stateKey)
-      )
-    )
-  }
-
-  const checkStyles = (styles: any, stateKey: string): boolean => {
-    return (
-      typeof styles?.custom === "string" &&
-      hasStateBinding(styles.custom, stateKey)
-    )
-  }
-
   const findComponentsUsingState = (
-    component: any,
+    component: Component,
     stateKey: string
   ): ComponentUsingState[] => {
     let componentsUsingState: ComponentUsingState[] = []
-    const { _children, _styles, _conditions, ...componentSettings } = component
+    const { _children } = component
 
-    const settingsWithState = getSettingsWithState(componentSettings, stateKey)
+    const settingsWithState = getSettingsWithState(component, stateKey)
     settingsWithState.forEach(setting => {
+      if (setting === "_conditions") {
+        setting = "Conditions"
+      } else if (setting === "_styles") {
+        setting = "Styles"
+      }
+      const label =
+        componentStore
+          .getDefinition(component._component)
+          ?.settings?.find(t => t.key === setting)?.label || setting
+
       componentsUsingState.push({
-        id: component._id,
-        name: `${component._instanceName} - ${setting}`,
+        id: component._id!,
+        name: `${component._instanceName} - ${label}`,
         settings: [setting],
       })
     })
 
-    if (_conditions?.length > 0 && checkConditions(_conditions, stateKey)) {
-      componentsUsingState.push({
-        id: component._id,
-        name: `${component._instanceName} - conditions`,
-        settings: ["_conditions"],
-      })
-    }
-
-    if (_styles && checkStyles(_styles, stateKey)) {
-      componentsUsingState.push({
-        id: component._id,
-        name: `${component._instanceName} - styles`,
-        settings: ["_styles"],
-      })
-    }
-
     if (_children) {
       for (let child of _children) {
         componentsUsingState = [
@@ -234,7 +193,6 @@
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
-
     const componentStateUpdates = findComponentsUpdatingState(
       $selectedScreen.props,
       stateKey
@@ -254,7 +212,7 @@
         )
         .map(() => ({
           id: $selectedScreen._id!,
-          name: "Screen onLoad",
+          name: "Screen - onLoad",
           settings: ["onLoad"],
         })) || []
 
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 4e25a919ac..c1c11442a9 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -67,6 +67,7 @@ export interface ComponentDefinition {
 export interface ComponentSetting {
   key: string
   type: string
+  label?: string
   section?: string
   name?: string
   defaultValue?: any

From 833403df37709f72662158aa6e4f3cb753e299d0 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 31 Jan 2025 11:58:03 +0000
Subject: [PATCH 64/81] small update to handle special case

---
 .../design/[screenId]/_components/StatePanel.svelte   | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 5b8b0e1794..8394d3166f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -160,15 +160,17 @@
 
     const settingsWithState = getSettingsWithState(component, stateKey)
     settingsWithState.forEach(setting => {
+      const label =
+        componentStore
+          .getDefinition(component._component)
+          ?.settings?.find(t => t.key === setting)?.label || setting
+
+      // These have no label so have to set manually
       if (setting === "_conditions") {
         setting = "Conditions"
       } else if (setting === "_styles") {
         setting = "Styles"
       }
-      const label =
-        componentStore
-          .getDefinition(component._component)
-          ?.settings?.find(t => t.key === setting)?.label || setting
 
       componentsUsingState.push({
         id: component._id!,
@@ -193,6 +195,7 @@
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
+    console.log($selectedScreen)
     const componentStateUpdates = findComponentsUpdatingState(
       $selectedScreen.props,
       stateKey

From 6bc1541cafa194aae39d7b02b27aaff6f7855328 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 31 Jan 2025 13:55:43 +0000
Subject: [PATCH 65/81] event handlers from component itself

---
 .../[screenId]/_components/StatePanel.svelte  | 25 ++++++++++++-------
 packages/builder/src/stores/builder/index.js  |  7 +++++-
 .../src/stores/builder/screenComponent.ts     |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 8394d3166f..9522a5ef7f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -8,6 +8,7 @@
     selectedScreen,
     builderStore,
     previewStore,
+    findComponentsBySettingsType,
   } from "@/stores/builder"
   import {
     decodeJSBinding,
@@ -64,12 +65,19 @@
   ): ComponentUsingState[] => {
     let foundComponents: ComponentUsingState[] = []
 
-    const eventHandlerProps = [
-      "onClick",
-      "onRowClick",
-      "onChange",
-      "buttonOnClick",
-    ]
+    let eventHandlers: string[] = []
+    if ($selectedScreen) {
+      let componentSettings = findComponentsBySettingsType(
+        $selectedScreen,
+        "event",
+        $componentStore.components
+      )
+
+      // Get an array of all event handlers within this component
+      eventHandlers = [
+        ...new Set(componentSettings.map(handler => handler.setting.key)),
+      ]
+    }
 
     const isStateUpdateHandler = (handler: any) =>
       handler["##eventHandlerType"] === "Update State" &&
@@ -94,7 +102,7 @@
       })
     }
 
-    eventHandlerProps.forEach(eventType => {
+    eventHandlers.forEach(eventType => {
       checkEventHandlers(
         component[eventType],
         component._id!,
@@ -108,7 +116,7 @@
       .forEach(([propName, propValue]) => {
         if (Array.isArray(propValue)) {
           propValue.forEach(item => {
-            eventHandlerProps.forEach(eventType => {
+            eventHandlers.forEach(eventType => {
               checkEventHandlers(
                 item[eventType],
                 component._id!,
@@ -195,7 +203,6 @@
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
-    console.log($selectedScreen)
     const componentStateUpdates = findComponentsUpdatingState(
       $selectedScreen.props,
       stateKey
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 7dd7f67828..c6dc631e5c 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -16,7 +16,11 @@ import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
-import { screenComponents, screenComponentErrors } from "./screenComponent"
+import {
+  screenComponents,
+  screenComponentErrors,
+  findComponentsBySettingsType,
+} from "./screenComponent"
 
 // Backend
 import { tables } from "./tables"
@@ -70,6 +74,7 @@ export {
   appPublished,
   screenComponents,
   screenComponentErrors,
+  findComponentsBySettingsType,
 }
 
 export const reset = () => {
diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index f1a9440c02..446d0f31d6 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -124,7 +124,7 @@ export const screenComponentErrors = derived(
   }
 )
 
-function findComponentsBySettingsType(
+export function findComponentsBySettingsType(
   screen: Screen,
   type: string | string[],
   definitions: Record<string, ComponentDefinition>

From 6c950307911d270e1303b8ca3af6cc69395beb7a Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 31 Jan 2025 13:56:53 +0000
Subject: [PATCH 66/81] interpolate string

---
 .../design/[screenId]/_components/StatePanel.svelte             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 9522a5ef7f..be11f16cf5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -95,7 +95,7 @@
         if (isStateUpdateHandler(handler)) {
           foundComponents.push({
             id: componentId,
-            name: instanceName + " - " + setting,
+            name: `${instanceName} - ${setting}`,
             settings: [setting],
           })
         }

From 038c27fa409c4bde7cbb99115bf3955d8089a699 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 31 Jan 2025 14:05:41 +0000
Subject: [PATCH 67/81] documentation

---
 .../design/[screenId]/_components/StatePanel.svelte             | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index be11f16cf5..08e9d5ab07 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -111,6 +111,8 @@
       )
     })
 
+    // This gets event handlers nested within properties
+    // like the buttons property within a table.
     Object.entries(component)
       .filter(([key]) => key !== "_children")
       .forEach(([propName, propValue]) => {

From bcf0da742e4abef502d7ed6a929f163b1c9b8daa Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Sun, 2 Feb 2025 14:49:44 +0000
Subject: [PATCH 68/81] make improvements to finding state handlers

---
 .../[screenId]/_components/StatePanel.svelte  | 108 ++++++++----------
 1 file changed, 49 insertions(+), 59 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 08e9d5ab07..54b92b7680 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -64,79 +64,68 @@
     stateKey: string
   ): ComponentUsingState[] => {
     let foundComponents: ComponentUsingState[] = []
+    const definition = componentStore.getDefinition(component._component)
 
-    let eventHandlers: string[] = []
-    if ($selectedScreen) {
-      let componentSettings = findComponentsBySettingsType(
-        $selectedScreen,
-        "event",
-        $componentStore.components
-      )
-
-      // Get an array of all event handlers within this component
-      eventHandlers = [
-        ...new Set(componentSettings.map(handler => handler.setting.key)),
-      ]
-    }
-
-    const isStateUpdateHandler = (handler: any) =>
-      handler["##eventHandlerType"] === "Update State" &&
-      handler.parameters?.key === stateKey
-
-    const checkEventHandlers = (
+    const checkStateUpdateHandlers = (
       handlers: any[],
       componentId: string,
       instanceName: string,
-      setting: string
+      settingKey: string
     ) => {
       if (!Array.isArray(handlers)) return
 
       handlers.forEach(handler => {
-        if (isStateUpdateHandler(handler)) {
+        if (
+          handler["##eventHandlerType"] === "Update State" &&
+          handler.parameters?.key === stateKey
+        ) {
+          let label =
+            definition?.settings?.find(t => t.key === settingKey)?.label ||
+            settingKey
           foundComponents.push({
             id: componentId,
-            name: `${instanceName} - ${setting}`,
-            settings: [setting],
+            name: `${instanceName} - ${label}`,
+            settings: [settingKey],
           })
         }
       })
     }
 
-    eventHandlers.forEach(eventType => {
-      checkEventHandlers(
-        component[eventType],
-        component._id!,
-        component._instanceName,
-        eventType
+    componentStore
+      .getComponentSettings(component._component)
+      .filter(
+        setting =>
+          setting.type === "event" || setting.type === "buttonConfiguration"
       )
-    })
-
-    // This gets event handlers nested within properties
-    // like the buttons property within a table.
-    Object.entries(component)
-      .filter(([key]) => key !== "_children")
-      .forEach(([propName, propValue]) => {
-        if (Array.isArray(propValue)) {
-          propValue.forEach(item => {
-            eventHandlers.forEach(eventType => {
-              checkEventHandlers(
-                item[eventType],
+      .forEach(setting => {
+        if (setting.type === "event") {
+          checkStateUpdateHandlers(
+            component[setting.key],
+            component._id!,
+            component._instanceName,
+            setting.key
+          )
+        } else if (setting.type === "buttonConfiguration") {
+          const buttons = component[setting.key]
+          if (Array.isArray(buttons)) {
+            buttons.forEach(button => {
+              checkStateUpdateHandlers(
+                button.onClick,
                 component._id!,
                 component._instanceName,
-                propName
+                setting.key
               )
             })
-          })
+          }
         }
       })
 
     if (component._children) {
-      for (let child of component._children) {
-        foundComponents = [
-          ...foundComponents,
-          ...findComponentsUpdatingState(child, stateKey),
-        ]
-      }
+      foundComponents.push(
+        ...component._children.flatMap(child =>
+          findComponentsUpdatingState(child, stateKey)
+        )
+      )
     }
 
     return foundComponents
@@ -166,20 +155,20 @@
     stateKey: string
   ): ComponentUsingState[] => {
     let componentsUsingState: ComponentUsingState[] = []
+    let label
+
     const { _children } = component
-
+    const definition = componentStore.getDefinition(component._component)
     const settingsWithState = getSettingsWithState(component, stateKey)
-    settingsWithState.forEach(setting => {
-      const label =
-        componentStore
-          .getDefinition(component._component)
-          ?.settings?.find(t => t.key === setting)?.label || setting
 
-      // These have no label so have to set manually
+    settingsWithState.forEach(setting => {
+      label =
+        definition?.settings?.find(t => t.key === setting)?.label || setting
+
       if (setting === "_conditions") {
-        setting = "Conditions"
+        label = "Conditions"
       } else if (setting === "_styles") {
-        setting = "Styles"
+        label = "Styles"
       }
 
       componentsUsingState.push({
@@ -205,6 +194,7 @@
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
+
     const componentStateUpdates = findComponentsUpdatingState(
       $selectedScreen.props,
       stateKey
@@ -224,7 +214,7 @@
         )
         .map(() => ({
           id: $selectedScreen._id!,
-          name: "Screen - onLoad",
+          name: "Screen - On load",
           settings: ["onLoad"],
         })) || []
 

From 4803bbd2a4c720fd0c5cbc05cfeeabb52db80462 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Sun, 2 Feb 2025 14:52:03 +0000
Subject: [PATCH 69/81] lint

---
 .../design/[screenId]/_components/StatePanel.svelte              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 54b92b7680..93cbeeb4fb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -8,7 +8,6 @@
     selectedScreen,
     builderStore,
     previewStore,
-    findComponentsBySettingsType,
   } from "@/stores/builder"
   import {
     decodeJSBinding,

From d4ffd0509e56c4dd5b916bd890508e1ae59495b4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 10:51:29 +0000
Subject: [PATCH 70/81] Improve reactivity, simplify logic and fix EventHandler
 type

---
 .../[screenId]/_components/StatePanel.svelte  | 281 ++++++++----------
 packages/types/src/documents/app/screen.ts    |   2 +-
 2 files changed, 118 insertions(+), 165 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 93cbeeb4fb..dbab4af520 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte"
   import { Select } from "@budibase/bbui"
-  import type { Component } from "@budibase/types"
+  import type { Component, EventHandler } from "@budibase/types"
   import { getAllStateVariables, getBindableProperties } from "@/dataBinding"
   import {
     componentStore,
@@ -23,113 +23,157 @@
     settings: string[]
   }
 
+  let selectedKey: string | undefined = undefined
+  let componentsUsingState: ComponentUsingState[] = []
+  let componentsUpdatingState: ComponentUsingState[] = []
+  let editorValue: string = ""
+
+  $: selectStateKey(selectedKey)
   $: keyOptions = getAllStateVariables($selectedScreen)
   $: bindings = getBindableProperties(
     $selectedScreen,
     $componentStore.selectedComponentId
   )
 
-  let selectedKey: string | undefined = undefined
-  let componentsUsingState: ComponentUsingState[] = []
-  let componentsUpdatingState: ComponentUsingState[] = []
-  let editorValue: string = ""
-  let previousScreenId: string | undefined = undefined
-
+  // Auto-select first valid state key
   $: {
-    const hasScreenChanged =
-      $selectedScreen && $selectedScreen._id !== previousScreenId
-    const previewContext = $previewStore.selectedComponentContext || {}
-
-    if (hasScreenChanged) {
+    if (keyOptions.length && !keyOptions.includes(selectedKey)) {
       selectedKey = keyOptions[0]
+    } else if (!keyOptions.length) {
+      selectedKey = undefined
+    }
+  }
+
+  const selectStateKey = (key: string | undefined) => {
+    if (key) {
+      searchComponents(key)
+      editorValue = $previewStore.selectedComponentContext?.state?.[key] ?? ""
+    } else {
+      editorValue = ""
       componentsUsingState = []
       componentsUpdatingState = []
-      editorValue = ""
-      previousScreenId = $selectedScreen._id
     }
+  }
 
-    if (keyOptions.length > 0 && !keyOptions.includes(selectedKey)) {
-      selectedKey = keyOptions[0]
+  const searchComponents = (stateKey: string) => {
+    if (!$selectedScreen?.props) {
+      return
     }
+    componentsUsingState = findComponentsUsingState(
+      $selectedScreen.props,
+      stateKey
+    )
+    componentsUpdatingState = findComponentsUpdatingState(
+      $selectedScreen.props,
+      stateKey
+    )
 
-    if (selectedKey) {
-      searchComponents(selectedKey)
-      editorValue = previewContext.state?.[selectedKey] ?? ""
+    // Check screen load actions which are outside the component hierarchy
+    if (eventUpdatesState($selectedScreen.onLoad, stateKey)) {
+      componentsUpdatingState.push({
+        id: $selectedScreen._id!,
+        name: "Screen - On load",
+        settings: ["onLoad"],
+      })
     }
   }
 
+  const eventUpdatesState = (
+    handlers: EventHandler[] | undefined,
+    stateKey: string
+  ) => {
+    return handlers?.some(handler => {
+      return (
+        handler["##eventHandlerType"] === "Update State" &&
+        handler.parameters?.key === stateKey
+      )
+    })
+  }
+
   const findComponentsUpdatingState = (
     component: Component,
-    stateKey: string
+    stateKey: string,
+    foundComponents: ComponentUsingState[] = []
   ): ComponentUsingState[] => {
-    let foundComponents: ComponentUsingState[] = []
-    const definition = componentStore.getDefinition(component._component)
-
-    const checkStateUpdateHandlers = (
-      handlers: any[],
-      componentId: string,
-      instanceName: string,
-      settingKey: string
-    ) => {
-      if (!Array.isArray(handlers)) return
-
-      handlers.forEach(handler => {
-        if (
-          handler["##eventHandlerType"] === "Update State" &&
-          handler.parameters?.key === stateKey
-        ) {
-          let label =
-            definition?.settings?.find(t => t.key === settingKey)?.label ||
-            settingKey
-          foundComponents.push({
-            id: componentId,
-            name: `${instanceName} - ${label}`,
-            settings: [settingKey],
-          })
-        }
-      })
-    }
-
+    // Check all settings of this component
     componentStore
       .getComponentSettings(component._component)
-      .filter(
-        setting =>
-          setting.type === "event" || setting.type === "buttonConfiguration"
-      )
+      .filter(s => s.type === "event" || s.type === "buttonConfiguration")
       .forEach(setting => {
         if (setting.type === "event") {
-          checkStateUpdateHandlers(
-            component[setting.key],
-            component._id!,
-            component._instanceName,
-            setting.key
-          )
+          if (eventUpdatesState(component[setting.key], stateKey)) {
+            let label = setting.label || setting.key
+            foundComponents.push({
+              id: component._id!,
+              name: `${component._instanceName} - ${label}`,
+              settings: [setting.key],
+            })
+          }
         } else if (setting.type === "buttonConfiguration") {
           const buttons = component[setting.key]
           if (Array.isArray(buttons)) {
             buttons.forEach(button => {
-              checkStateUpdateHandlers(
-                button.onClick,
-                component._id!,
-                component._instanceName,
-                setting.key
-              )
+              if (eventUpdatesState(button.onClick, stateKey)) {
+                let label = setting.label || setting.key
+                foundComponents.push({
+                  id: component._id!,
+                  name: `${component._instanceName} - ${label}`,
+                  settings: [setting.key],
+                })
+              }
             })
           }
         }
       })
 
-    if (component._children) {
-      foundComponents.push(
-        ...component._children.flatMap(child =>
-          findComponentsUpdatingState(child, stateKey)
-        )
-      )
-    }
-
+    // Check children
+    component._children?.forEach(child => {
+      findComponentsUpdatingState(child, stateKey, foundComponents)
+    })
     return foundComponents
   }
 
+  const findComponentsUsingState = (
+    component: Component,
+    stateKey: string,
+    componentsUsingState: ComponentUsingState[] = []
+  ): ComponentUsingState[] => {
+    const settings = componentStore.getComponentSettings(component._component)
+
+    // Check all settings of this component
+    const settingsWithState = getSettingsUsingState(component, stateKey)
+    settingsWithState.forEach(setting => {
+      // Get readable label for this setting
+      let label = settings.find(s => s.key === setting)?.label || setting
+      if (setting === "_conditions") {
+        label = "Conditions"
+      } else if (setting === "_styles") {
+        label = "Styles"
+      }
+      componentsUsingState.push({
+        id: component._id!,
+        name: `${component._instanceName} - ${label}`,
+        settings: [setting],
+      })
+    })
+
+    // Check children
+    component._children?.forEach(child => {
+      findComponentsUsingState(child, stateKey, componentsUsingState)
+    })
+    return componentsUsingState
+  }
+
+  const getSettingsUsingState = (
+    component: Component,
+    stateKey: string
+  ): string[] => {
+    return Object.entries(component)
+      .filter(([key]) => key !== "_children")
+      .filter(([_, value]) => hasStateBinding(JSON.stringify(value), stateKey))
+      .map(([key]) => key)
+  }
+
   const hasStateBinding = (value: string, stateKey: string): boolean => {
     const bindings = findHBSBlocks(value).map(binding => {
       const sanitizedBinding = binding.replace(/\\"/g, '"')
@@ -140,105 +184,15 @@
     return bindings.join(" ").includes(stateKey)
   }
 
-  const getSettingsWithState = (
-    component: Component,
-    stateKey: string
-  ): string[] => {
-    return Object.entries(component)
-      .filter(([key]) => key !== "_children")
-      .filter(([_, value]) => hasStateBinding(JSON.stringify(value), stateKey))
-      .map(([key]) => key)
-  }
-  const findComponentsUsingState = (
-    component: Component,
-    stateKey: string
-  ): ComponentUsingState[] => {
-    let componentsUsingState: ComponentUsingState[] = []
-    let label
-
-    const { _children } = component
-    const definition = componentStore.getDefinition(component._component)
-    const settingsWithState = getSettingsWithState(component, stateKey)
-
-    settingsWithState.forEach(setting => {
-      label =
-        definition?.settings?.find(t => t.key === setting)?.label || setting
-
-      if (setting === "_conditions") {
-        label = "Conditions"
-      } else if (setting === "_styles") {
-        label = "Styles"
-      }
-
-      componentsUsingState.push({
-        id: component._id!,
-        name: `${component._instanceName} - ${label}`,
-        settings: [setting],
-      })
-    })
-
-    if (_children) {
-      for (let child of _children) {
-        componentsUsingState = [
-          ...componentsUsingState,
-          ...findComponentsUsingState(child, stateKey),
-        ]
-      }
-    }
-
-    return componentsUsingState
-  }
-
-  const searchComponents = (stateKey: string | undefined) => {
-    if (!stateKey || !$selectedScreen?.props) {
-      return
-    }
-
-    const componentStateUpdates = findComponentsUpdatingState(
-      $selectedScreen.props,
-      stateKey
-    )
-
-    componentsUsingState = findComponentsUsingState(
-      $selectedScreen.props,
-      stateKey
-    )
-
-    const screenStateUpdates =
-      $selectedScreen?.onLoad
-        ?.filter(
-          (handler: any) =>
-            handler["##eventHandlerType"] === "Update State" &&
-            handler.parameters?.key === stateKey
-        )
-        .map(() => ({
-          id: $selectedScreen._id!,
-          name: "Screen - On load",
-          settings: ["onLoad"],
-        })) || []
-
-    componentsUpdatingState = [...componentStateUpdates, ...screenStateUpdates]
-  }
-
-  const handleStateKeySelect = (key: CustomEvent) => {
-    if (!key.detail && keyOptions.length > 0) {
-      throw new Error("No state key selected")
-    }
-    searchComponents(key.detail)
-  }
-
   const onClickComponentLink = (component: ComponentUsingState) => {
     componentStore.select(component.id)
-    component.settings.forEach(setting => {
-      builderStore.highlightSetting(setting)
-    })
+    builderStore.highlightSetting(component.settings[0])
   }
 
   const handleStateInspectorChange = (e: CustomEvent) => {
     if (!selectedKey || !$previewStore.selectedComponentContext) {
       return
     }
-
     const stateUpdate = {
       [selectedKey]: processStringSync(
         e.detail,
@@ -260,7 +214,6 @@
     bind:value={selectedKey}
     placeholder={keyOptions.length > 0 ? false : "No state variables found"}
     options={keyOptions}
-    on:change={handleStateKeySelect}
   />
   {#if selectedKey && keyOptions.length > 0}
     <DrawerBindableInput
diff --git a/packages/types/src/documents/app/screen.ts b/packages/types/src/documents/app/screen.ts
index 20355d111b..f1a119083c 100644
--- a/packages/types/src/documents/app/screen.ts
+++ b/packages/types/src/documents/app/screen.ts
@@ -45,6 +45,6 @@ export interface EventHandler {
     value: string
     persist: any | null
   }
-  eventHandlerType: string
+  "##eventHandlerType": string
   id: string
 }

From 60834ed6ad40fb0757c9cb6ddc2b8cbf56e2dde4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 11:00:54 +0000
Subject: [PATCH 71/81] Fix highlighting settings on same component not working
 if moving from styles to a setting

---
 .../_components/Component/ComponentSettingsPanel.svelte       | 2 +-
 packages/builder/src/stores/builder/components.ts             | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index fcd0ddaafc..2d64570b7e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -63,7 +63,7 @@
       section = "conditions"
     } else if (highlightedSetting.key === "_styles") {
       section = "styles"
-    } else if (highlightedSetting.key === "_settings") {
+    } else {
       section = "settings"
     }
   }
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 35a5f2ac13..92e0c24af9 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -745,10 +745,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
   }
 
-  /**
-   *
-   * @param {string} componentId
-   */
   select(id: string) {
     this.update(state => {
       // Only clear highlights if selecting a different component

From a4b87772a5401f71eeb9f7f36384bbdfb27fd9c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 11:02:11 +0000
Subject: [PATCH 72/81] Update label

---
 .../design/[screenId]/_components/StatePanel.svelte             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index dbab4af520..99ffea0314 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -210,7 +210,7 @@
 
 <div class="state-panel">
   <Select
-    label="State variables"
+    label="State variable"
     bind:value={selectedKey}
     placeholder={keyOptions.length > 0 ? false : "No state variables found"}
     options={keyOptions}

From 46265ade7a42792731ce012309f81d798864fcf4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 12:05:07 +0000
Subject: [PATCH 73/81] Add type for component conditions and find usages of
 updating state within conditions

---
 .../Component/ConditionalUIDrawer.svelte      |   6 +-
 .../[screenId]/_components/StatePanel.svelte  | 106 ++++++++++++------
 packages/types/src/documents/app/component.ts |  13 +++
 3 files changed, 86 insertions(+), 39 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
index 2309737cb8..863333e91d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
@@ -190,7 +190,7 @@
                 <Icon name="DragHandle" size="XL" />
               </div>
               <Select
-                placeholder={null}
+                placeholder={false}
                 options={actionOptions}
                 bind:value={condition.action}
               />
@@ -227,7 +227,7 @@
                 on:change={e => (condition.newValue = e.detail)}
               />
               <Select
-                placeholder={null}
+                placeholder={false}
                 options={getOperatorOptions(condition)}
                 bind:value={condition.operator}
                 on:change={e => onOperatorChange(condition, e.detail)}
@@ -236,7 +236,7 @@
                 disabled={condition.noValue || condition.operator === "oneOf"}
                 options={valueTypeOptions}
                 bind:value={condition.valueType}
-                placeholder={null}
+                placeholder={false}
                 on:change={e => onValueTypeChange(condition, e.detail)}
               />
               {#if ["string", "number"].includes(condition.valueType)}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 99ffea0314..3a59b60f7c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import { onMount } from "svelte"
   import { Select } from "@budibase/bbui"
-  import type { Component, EventHandler } from "@budibase/types"
+  import type {
+    Component,
+    ComponentCondition,
+    EventHandler,
+  } from "@budibase/types"
   import { getAllStateVariables, getBindableProperties } from "@/dataBinding"
   import {
     componentStore,
@@ -16,11 +20,12 @@
     processStringSync,
   } from "@budibase/string-templates"
   import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import { type ComponentSetting } from "@/stores/builder/components"
 
   interface ComponentUsingState {
     id: string
     name: string
-    settings: string[]
+    setting: string
   }
 
   let selectedKey: string | undefined = undefined
@@ -73,11 +78,12 @@
       componentsUpdatingState.push({
         id: $selectedScreen._id!,
         name: "Screen - On load",
-        settings: ["onLoad"],
+        setting: "onLoad",
       })
     }
   }
 
+  // Checks if an event setting updates a certain state key
   const eventUpdatesState = (
     handlers: EventHandler[] | undefined,
     stateKey: string
@@ -90,44 +96,74 @@
     })
   }
 
+  // Checks if a setting for the given component updates a certain state key
+  const settingUpdatesState = (
+    component: Record<string, any>,
+    setting: ComponentSetting,
+    stateKey: string
+  ) => {
+    if (setting.type === "event") {
+      return eventUpdatesState(component[setting.key], stateKey)
+    } else if (setting.type === "buttonConfiguration") {
+      const buttons = component[setting.key]
+      if (Array.isArray(buttons)) {
+        for (let button of buttons) {
+          if (eventUpdatesState(button.onClick, stateKey)) {
+            return true
+          }
+        }
+      }
+    }
+    return false
+  }
+
+  // Checks if a condition updates a certain state key
+  const conditionUpdatesState = (
+    condition: ComponentCondition,
+    settings: ComponentSetting[],
+    stateKey: string
+  ) => {
+    const setting = settings.find(s => s.key === condition.setting)
+    if (!setting) {
+      return false
+    }
+    const component = { [setting.key]: condition.settingValue }
+    return settingUpdatesState(component, setting, stateKey)
+  }
+
   const findComponentsUpdatingState = (
     component: Component,
     stateKey: string,
     foundComponents: ComponentUsingState[] = []
   ): ComponentUsingState[] => {
-    // Check all settings of this component
-    componentStore
-      .getComponentSettings(component._component)
+    const { _children, _conditions, _component, _instanceName, _id } = component
+    const settings = componentStore
+      .getComponentSettings(_component)
       .filter(s => s.type === "event" || s.type === "buttonConfiguration")
-      .forEach(setting => {
-        if (setting.type === "event") {
-          if (eventUpdatesState(component[setting.key], stateKey)) {
-            let label = setting.label || setting.key
-            foundComponents.push({
-              id: component._id!,
-              name: `${component._instanceName} - ${label}`,
-              settings: [setting.key],
-            })
-          }
-        } else if (setting.type === "buttonConfiguration") {
-          const buttons = component[setting.key]
-          if (Array.isArray(buttons)) {
-            buttons.forEach(button => {
-              if (eventUpdatesState(button.onClick, stateKey)) {
-                let label = setting.label || setting.key
-                foundComponents.push({
-                  id: component._id!,
-                  name: `${component._instanceName} - ${label}`,
-                  settings: [setting.key],
-                })
-              }
-            })
-          }
-        }
+
+    // Check all settings of this component
+    settings.forEach(setting => {
+      if (settingUpdatesState(component, setting, stateKey)) {
+        const label = setting.label || setting.key
+        foundComponents.push({
+          id: _id!,
+          name: `${_instanceName} - ${label}`,
+          setting: setting.key,
+        })
+      }
+    })
+
+    // Check if conditions update these settings to update this state key
+    if (_conditions?.some(c => conditionUpdatesState(c, settings, stateKey))) {
+      foundComponents.push({
+        id: _id!,
+        name: `${_instanceName} - Conditions`,
+        setting: "_conditions",
       })
+    }
 
     // Check children
-    component._children?.forEach(child => {
+    _children?.forEach(child => {
       findComponentsUpdatingState(child, stateKey, foundComponents)
     })
     return foundComponents
@@ -153,7 +189,7 @@
       componentsUsingState.push({
         id: component._id!,
         name: `${component._instanceName} - ${label}`,
-        settings: [setting],
+        setting,
       })
     })
 
@@ -186,7 +222,7 @@
 
   const onClickComponentLink = (component: ComponentUsingState) => {
     componentStore.select(component.id)
-    builderStore.highlightSetting(component.settings[0])
+    builderStore.highlightSetting(component.setting)
   }
 
   const handleStateInspectorChange = (e: CustomEvent) => {
@@ -274,7 +310,6 @@
     color: var(--spectrum-global-color-gray-700);
     font-size: 12px;
   }
-
   .updates-colour {
     color: var(--bb-indigo-light);
   }
@@ -294,7 +329,6 @@
   .component-link:hover {
     text-decoration: underline;
   }
-
   .updates-section {
     display: flex;
     flex-direction: column;
diff --git a/packages/types/src/documents/app/component.ts b/packages/types/src/documents/app/component.ts
index 654b2c87cb..abf9db26ff 100644
--- a/packages/types/src/documents/app/component.ts
+++ b/packages/types/src/documents/app/component.ts
@@ -1,9 +1,22 @@
 import { Document } from "../document"
+import { BasicOperator } from "../../sdk"
 
 export interface Component extends Document {
   _instanceName: string
   _styles: { [key: string]: any }
   _component: string
   _children?: Component[]
+  _conditions?: ComponentCondition[]
   [key: string]: any
 }
+
+export interface ComponentCondition {
+  id: string
+  operator: BasicOperator
+  action: "update" | "show" | "hide"
+  valueType: "string" | "number" | "datetime" | "boolean"
+  newValue?: any
+  referenceValue?: any
+  setting?: string
+  settingValue?: any
+}

From 48eee5dd795fa480f3dc0a5585d69ebbf397c410 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 12:11:50 +0000
Subject: [PATCH 74/81] Fix styles of highlighting conditions

---
 .../design/settings/controls/PropertyControl.svelte       | 8 ++++----
 .../_components/Component/ComponentSettingsPanel.svelte   | 6 +++---
 .../_components/Component/ConditionalUISection.svelte     | 8 ++------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index fa337e085b..b0e8561bc8 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -143,10 +143,10 @@
   .property-control.highlighted {
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-static-red-600);
-    margin-top: -3.5px;
-    margin-bottom: -3.5px;
-    padding-bottom: 3.5px;
-    padding-top: 3.5px;
+    margin-top: -4px;
+    margin-bottom: -4px;
+    padding-bottom: 4px;
+    padding-top: 4px;
   }
 
   .property-control.property-focus :global(input) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index 2d64570b7e..de6993c661 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -110,7 +110,7 @@
           {/each}
         </div>
       </span>
-      {#if section == "settings"}
+      {#if section === "settings"}
         <TourWrap
           stepKeys={[
             BUILDER_FORM_CREATE_STEPS,
@@ -127,7 +127,7 @@
           />
         </TourWrap>
       {/if}
-      {#if section == "styles"}
+      {#if section === "styles"}
         <DesignSection
           {componentInstance}
           {componentBindings}
@@ -142,7 +142,7 @@
           componentTitle={title}
         />
       {/if}
-      {#if section == "conditions"}
+      {#if section === "conditions"}
         <ConditionalUISection
           {componentInstance}
           {componentDefinition}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index 965aee33f4..07b9d35a64 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -72,11 +72,7 @@
     background: var(--spectrum-global-color-gray-300);
     border-left: 4px solid var(--spectrum-semantic-informative-color-background);
     transition: background 130ms ease-out, border-color 130ms ease-out;
-    margin-top: -3.5px;
-    margin-bottom: -3.5px;
-    padding-bottom: 3.5px;
-    padding-top: 3.5px;
-    padding-left: 5px;
-    padding-right: 5px;
+    margin: -4px calc(-1 * var(--spacing-xl));
+    padding: 4px var(--spacing-xl) 4px calc(var(--spacing-xl) - 4px);
   }
 </style>

From 9b405ea7e1ae3f7d625e0759c5912c31ff0f0e18 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 12:12:56 +0000
Subject: [PATCH 75/81] Fix styles of highlighting custom CSS

---
 .../_components/Component/CustomStylesSection.svelte      | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index 7879a606a7..230f6ebc60 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -105,11 +105,7 @@
     background: var(--spectrum-global-color-gray-300);
     border-left: 4px solid var(--spectrum-semantic-informative-color-background);
     transition: background 130ms ease-out, border-color 130ms ease-out;
-    margin-top: -3.5px;
-    margin-bottom: -3.5px;
-    padding-bottom: 3.5px;
-    padding-top: 3.5px;
-    padding-left: 5px;
-    padding-right: 5px;
+    margin: -4px calc(-1 * var(--spacing-xl));
+    padding: 4px var(--spacing-xl) 4px calc(var(--spacing-xl) - 4px);
   }
 </style>

From c298731d170562c173626a21aa99b6a113ed761c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 12:16:02 +0000
Subject: [PATCH 76/81] Fix screen settings panel not having enough padding,
 making highlighted settings look incorrect

---
 .../[screenId]/[componentId]/_components/Screen/index.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
index d2fed41655..be7d48f88f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
@@ -33,7 +33,7 @@
         {/each}
       </div>
     </div>
-    <Layout gap="XS" paddingX="L" paddingY="XL">
+    <Layout gap="XS" paddingX="XL" paddingY="XL">
       {#if activeTab === "theme"}
         <ThemePanel />
       {:else}

From e5141a7e778121aa84cd925e866451c09641060e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 12:24:14 +0000
Subject: [PATCH 77/81] Fix typing issue with component conditions

---
 packages/builder/src/stores/builder/components.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 92e0c24af9..5b8b455e5a 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -34,6 +34,7 @@ import { BudiStore } from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
 import {
   Component as ComponentType,
+  ComponentCondition,
   FieldType,
   Screen,
   Table,
@@ -1136,7 +1137,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     })
   }
 
-  async updateConditions(conditions: Record<string, any>) {
+  async updateConditions(conditions: ComponentCondition[]) {
     await this.patch((component: Component) => {
       component._conditions = conditions
     })

From f7313c5bf9e3639d2b74ce96dc6b8ac4fe8e551c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 12:35:55 +0000
Subject: [PATCH 78/81] Ensure state panel updates in real time

---
 .../[screenId]/_components/StatePanel.svelte  | 32 ++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 3a59b60f7c..61ca6f0c80 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -5,6 +5,7 @@
     Component,
     ComponentCondition,
     EventHandler,
+    Screen,
   } from "@budibase/types"
   import { getAllStateVariables, getBindableProperties } from "@/dataBinding"
   import {
@@ -33,7 +34,7 @@
   let componentsUpdatingState: ComponentUsingState[] = []
   let editorValue: string = ""
 
-  $: selectStateKey(selectedKey)
+  $: selectStateKey($selectedScreen, selectedKey)
   $: keyOptions = getAllStateVariables($selectedScreen)
   $: bindings = getBindableProperties(
     $selectedScreen,
@@ -49,9 +50,12 @@
     }
   }
 
-  const selectStateKey = (key: string | undefined) => {
-    if (key) {
-      searchComponents(key)
+  const selectStateKey = (
+    screen: Screen | undefined,
+    key: string | undefined
+  ) => {
+    if (screen && key) {
+      searchComponents(screen, key)
       editorValue = $previewStore.selectedComponentContext?.state?.[key] ?? ""
     } else {
       editorValue = ""
@@ -60,23 +64,15 @@
     }
   }
 
-  const searchComponents = (stateKey: string) => {
-    if (!$selectedScreen?.props) {
-      return
-    }
-    componentsUsingState = findComponentsUsingState(
-      $selectedScreen.props,
-      stateKey
-    )
-    componentsUpdatingState = findComponentsUpdatingState(
-      $selectedScreen.props,
-      stateKey
-    )
+  const searchComponents = (screen: Screen, stateKey: string) => {
+    const { props, onLoad, _id } = screen
+    componentsUsingState = findComponentsUsingState(props, stateKey)
+    componentsUpdatingState = findComponentsUpdatingState(props, stateKey)
 
     // Check screen load actions which are outside the component hierarchy
-    if (eventUpdatesState($selectedScreen.onLoad, stateKey)) {
+    if (eventUpdatesState(onLoad, stateKey)) {
       componentsUpdatingState.push({
-        id: $selectedScreen._id!,
+        id: _id!,
         name: "Screen - On load",
         setting: "onLoad",
       })

From a6e1008904c4200913032ed100d8144a2dd4746a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 14:10:25 +0000
Subject: [PATCH 79/81] Add 'new' badges to binding and state panels

---
 .../[screenId]/_components/LeftPanel.svelte   | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index ba08804a3f..574cc7f707 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -28,7 +28,12 @@
           selected={activeTab === tab}
           on:click={() => (activeTab = tab)}
         >
-          {tab}
+          <div class="tab-label">
+            {tab}
+            {#if tab !== Tabs.Components}
+              <div class="new">NEW</div>
+            {/if}
+          </div>
         </ActionButton>
       {/each}
     </div>
@@ -49,7 +54,7 @@
 <style>
   .panel {
     display: flex;
-    min-width: 270px;
+    min-width: 310px;
     width: 310px;
     height: 100%;
   }
@@ -78,6 +83,19 @@
     overflow-x: hidden;
     padding: var(--spacing-l);
   }
+  .tab-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .new {
+    font-size: 8px;
+    background: var(--bb-indigo);
+    border-radius: 2px;
+    padding: 1px 3px;
+    color: white;
+    font-weight: bold;
+  }
 
   .divider {
     position: relative;

From e6649852967f3c51f1f2f10aabd0dbeed43b3c1a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 14:11:17 +0000
Subject: [PATCH 80/81] Add hover state to state panel usage links

---
 .../design/[screenId]/_components/StatePanel.svelte             | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index 61ca6f0c80..ac0b6adcd0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -321,9 +321,11 @@
     padding: 0;
     white-space: nowrap;
     font-size: 12px;
+    transition: filter 130ms ease-out;
   }
   .component-link:hover {
     text-decoration: underline;
+    filter: brightness(1.2);
   }
   .updates-section {
     display: flex;

From b8df0d0f593c52de6ad7510470841568746b2275 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 14:20:09 +0000
Subject: [PATCH 81/81] Allow selecting binding value text for copying

---
 packages/builder/src/components/common/JSONViewer.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/common/JSONViewer.svelte b/packages/builder/src/components/common/JSONViewer.svelte
index 79f9438701..55f6252117 100644
--- a/packages/builder/src/components/common/JSONViewer.svelte
+++ b/packages/builder/src/components/common/JSONViewer.svelte
@@ -231,7 +231,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     transition: filter 130ms ease-out;
-    user-select: none;
   }
   .binding-value.primitive:hover {
     filter: brightness(1.25);