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 01/32] 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 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 02/32] 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 03/32] 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 04/32] 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 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 05/32] 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 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 06/32] 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 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 07/32] 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 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 08/32] 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 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 09/32] 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 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 10/32] 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 11/32] 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 12/32] 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 13/32] 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 14/32] 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 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 15/32] 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 16/32] 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 17/32] 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 18/32] 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 19/32] 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 20/32] 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 21/32] 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 22/32] 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 23/32] 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 24/32] 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 25/32] 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 26/32] 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 27/32] 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 28/32] 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 29/32] 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 30/32] 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 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 31/32] 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 32/32] 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}