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

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

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

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

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

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

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

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

diff --git a/asd b/asd
new file mode 100644
index 00000000000..e69de29bb2d

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 639f648a552..b04cd8b956a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -3,7 +3,6 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
-  import StatePanel from "./StatePanel.svelte"
 </script>
 
 <div class="app-panel">
@@ -11,13 +10,12 @@
   <div class="header">
     <div class="header-left">
       <UndoRedoControl store={screenStore.history} />
+    </div>
+    <div class="header-right">
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
     </div>
-    <div class="header-right">
-      <StatePanel />
-    </div>
   </div>
   <div class="content">
     {#key $appStore.version}