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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

From 18f09f4e13818ef0e9455488270524178a1b0ca3 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 22 Feb 2024 15:00:16 +0000
Subject: [PATCH 018/148] Duplicate app behaviour and test updates

---
 .../backend-core/src/events/publishers/app.ts |  13 ++
 .../tests/core/utilities/mocks/events.ts      |   1 +
 packages/bbui/src/Form/Core/index.js          |   1 +
 .../src/components/deploy/DeleteModal.svelte  |  40 ++++-
 .../src/components/start/AppRow.svelte        |   7 +-
 .../src/components/start/AppRowContext.svelte |  71 ++++++++
 .../components/start/DuplicateAppModal.svelte | 156 ++++++++++++++++++
 .../components/start/ExportAppModal.svelte    |   1 +
 .../app/[application]/settings/_layout.svelte |   8 +-
 packages/frontend-core/src/api/app.js         |  12 ++
 .../server/src/api/controllers/application.ts |  74 ++++++++-
 packages/server/src/api/routes/application.ts |   5 +
 .../src/api/routes/tests/application.spec.ts  |  95 +++++++++++
 .../server/src/sdk/app/backups/imports.ts     |   2 +-
 .../src/tests/utilities/TestConfiguration.ts  |   8 +-
 packages/types/src/sdk/events/app.ts          |   8 +
 packages/types/src/sdk/events/event.ts        |   2 +
 17 files changed, 484 insertions(+), 20 deletions(-)
 create mode 100644 packages/builder/src/components/start/AppRowContext.svelte
 create mode 100644 packages/builder/src/components/start/DuplicateAppModal.svelte

diff --git a/packages/backend-core/src/events/publishers/app.ts b/packages/backend-core/src/events/publishers/app.ts
index d08d59b5f1..af26b09e72 100644
--- a/packages/backend-core/src/events/publishers/app.ts
+++ b/packages/backend-core/src/events/publishers/app.ts
@@ -13,6 +13,7 @@ import {
   AppVersionRevertedEvent,
   AppRevertedEvent,
   AppExportedEvent,
+  AppDuplicatedEvent,
 } from "@budibase/types"
 
 const created = async (app: App, timestamp?: string | number) => {
@@ -77,6 +78,17 @@ async function fileImported(app: App) {
   await publishEvent(Event.APP_FILE_IMPORTED, properties)
 }
 
+async function duplicated(app: App, duplicateAppId: string) {
+  const properties: AppDuplicatedEvent = {
+    duplicateAppId,
+    appId: app.appId,
+    audited: {
+      name: app.name,
+    },
+  }
+  await publishEvent(Event.APP_DUPLICATED, properties)
+}
+
 async function templateImported(app: App, templateKey: string) {
   const properties: AppTemplateImportedEvent = {
     appId: app.appId,
@@ -147,6 +159,7 @@ export default {
   published,
   unpublished,
   fileImported,
+  duplicated,
   templateImported,
   versionUpdated,
   versionReverted,
diff --git a/packages/backend-core/tests/core/utilities/mocks/events.ts b/packages/backend-core/tests/core/utilities/mocks/events.ts
index fef730768a..96f351de10 100644
--- a/packages/backend-core/tests/core/utilities/mocks/events.ts
+++ b/packages/backend-core/tests/core/utilities/mocks/events.ts
@@ -15,6 +15,7 @@ beforeAll(async () => {
 
   jest.spyOn(events.app, "created")
   jest.spyOn(events.app, "updated")
+  jest.spyOn(events.app, "duplicated")
   jest.spyOn(events.app, "deleted")
   jest.spyOn(events.app, "published")
   jest.spyOn(events.app, "unpublished")
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index b0edf52748..3e5befca0b 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -14,3 +14,4 @@ export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
 export { default as CoreSlider } from "./Slider.svelte"
 export { default as CoreFile } from "./File.svelte"
+export { default as CoreEnv } from "./EnvSwitch.svelte"
diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 855f6a0757..293d0adf60 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -3,9 +3,16 @@
   import { goto } from "@roxi/routify"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { apps } from "stores/portal"
-  import { appStore } from "stores/builder"
   import { API } from "api"
 
+  export let appId
+  export let appName
+  export let onDeleteSuccess = () => {
+    $goto("/builder")
+  }
+
+  let deleting = false
+
   export const show = () => {
     deletionModal.show()
   }
@@ -17,14 +24,24 @@
   let deletionModal
   let deletionConfirmationAppName
 
+  const copyName = () => {
+    deletionConfirmationAppName = appName
+  }
+
   const deleteApp = async () => {
+    if (!appId) {
+      console.log("No app id provided")
+      return
+    }
+    deleting = true
     try {
-      await API.deleteApp($appStore.appId)
+      await API.deleteApp(appId)
       apps.load()
       notifications.success("App deleted successfully")
-      $goto("/builder")
+      onDeleteSuccess()
     } catch (err) {
       notifications.error("Error deleting app")
+      deleting = false
     }
   }
 </script>
@@ -35,14 +52,19 @@
   okText="Delete"
   onOk={deleteApp}
   onCancel={() => (deletionConfirmationAppName = null)}
-  disabled={deletionConfirmationAppName !== $appStore.name}
+  disabled={deletionConfirmationAppName !== appName || deleting}
 >
-  Are you sure you want to delete <b>{$appStore.name}</b>?
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  Are you sure you want to delete
+  <b class="app-name" on:click={copyName}>{appName}</b>?
   <br />
   Please enter the app name below to confirm.
   <br /><br />
-  <Input
-    bind:value={deletionConfirmationAppName}
-    placeholder={$appStore.name}
-  />
+  <Input bind:value={deletionConfirmationAppName} placeholder={appName} />
 </ConfirmDialog>
+
+<style>
+  .app-name {
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index c05ae4c624..dd23487870 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -5,6 +5,7 @@
   import { goto } from "@roxi/routify"
   import { UserAvatars } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
+  import AppRowContext from "./AppRowContext.svelte"
 
   export let app
   export let lockedAction
@@ -74,12 +75,10 @@
 
   {#if isBuilder}
     <div class="app-row-actions">
-      <Button size="S" secondary on:click={lockedAction || goToOverview}>
-        Manage
-      </Button>
-      <Button size="S" primary on:click={lockedAction || goToBuilder}>
+      <Button size="S" secondary on:click={lockedAction || goToBuilder}>
         Edit
       </Button>
+      <AppRowContext {app} />
     </div>
   {:else if app.deployed}
     <!-- this can happen if an app builder has app user access to an app -->
diff --git a/packages/builder/src/components/start/AppRowContext.svelte b/packages/builder/src/components/start/AppRowContext.svelte
new file mode 100644
index 0000000000..f2b9d2e04c
--- /dev/null
+++ b/packages/builder/src/components/start/AppRowContext.svelte
@@ -0,0 +1,71 @@
+<script>
+  import { ActionMenu, MenuItem, Icon, Modal } from "@budibase/bbui"
+  import DeleteModal from "components/deploy/DeleteModal.svelte"
+  import ExportAppModal from "./ExportAppModal.svelte"
+  import DuplicateAppModal from "./DuplicateAppModal.svelte"
+
+  export let app
+
+  let deleteModal
+  let exportModal
+  let duplicateModal
+
+  let exportPublishedVersion = false
+</script>
+
+<DeleteModal
+  bind:this={deleteModal}
+  appId={app.devId}
+  appName={app.name}
+  onDeleteSuccess={() => {}}
+/>
+
+<Modal bind:this={exportModal} padding={false}>
+  <ExportAppModal {app} published={exportPublishedVersion} />
+</Modal>
+
+<Modal bind:this={duplicateModal} padding={false}>
+  <DuplicateAppModal appId={app.devId} appName={app.name} />
+</Modal>
+
+<ActionMenu align="right">
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
+  </div>
+  <MenuItem
+    icon="Copy"
+    on:click={() => {
+      duplicateModal.show()
+    }}
+  >
+    Duplicate
+  </MenuItem>
+  <MenuItem
+    icon="Export"
+    on:click={() => {
+      exportPublishedVersion = false
+      exportModal.show()
+    }}
+  >
+    Export latest edited app
+  </MenuItem>
+  {#if app.deployed}
+    <MenuItem
+      icon="Export"
+      on:click={() => {
+        exportPublishedVersion = true
+        exportModal.show()
+      }}
+    >
+      Export latest published app
+    </MenuItem>
+  {/if}
+  <MenuItem
+    icon="Delete"
+    on:click={() => {
+      deleteModal.show()
+    }}
+  >
+    Delete
+  </MenuItem>
+</ActionMenu>
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
new file mode 100644
index 0000000000..9a83f57215
--- /dev/null
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -0,0 +1,156 @@
+<script>
+  import {
+    ModalContent,
+    Input,
+    notifications,
+    Layout,
+    keepOpen,
+  } from "@budibase/bbui"
+  import { createValidationStore } from "helpers/validation/yup"
+  import { writable, get } from "svelte/store"
+  import * as appValidation from "helpers/validation/yup/app"
+  import { apps } from "stores/portal"
+  import { onMount } from "svelte"
+  import { API } from "api"
+
+  export let appId
+  export let appName
+
+  const validation = createValidationStore()
+  const values = writable({ name: appName + " copy", url: null })
+  const appPrefix = "/app"
+
+  let defaultAppName = appName + " copy"
+  let duplicating = false
+
+  $: {
+    const { url } = $values
+
+    validation.check({
+      ...$values,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
+  }
+
+  const resolveAppName = name => {
+    return name ? name.trim() : null
+  }
+
+  const resolveAppUrl = name => {
+    let parsedName
+    const resolvedName = resolveAppName(name)
+    parsedName = resolvedName ? resolvedName.toLowerCase() : ""
+    const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
+    return encodeURI(parsedUrl)
+  }
+
+  const nameToUrl = appName => {
+    let resolvedUrl = resolveAppUrl(appName)
+    tidyUrl(resolvedUrl)
+  }
+
+  const tidyUrl = url => {
+    if (url && !url.startsWith("/")) {
+      url = `/${url}`
+    }
+    $values.url = url === "" ? null : url
+  }
+
+  const duplicateApp = async () => {
+    duplicating = true
+
+    let data = new FormData()
+    data.append("name", $values.name.trim())
+    if ($values.url) {
+      data.append("url", $values.url.trim())
+    }
+
+    try {
+      await API.duplicateApp(data, appId)
+      apps.load()
+      notifications.success("App duplicated successfully")
+    } catch (err) {
+      notifications.error("Error duplicating app")
+      duplicating = false
+    }
+  }
+
+  const setupValidation = async () => {
+    const applications = get(apps)
+    appValidation.name(validation, { apps: applications })
+    appValidation.url(validation, { apps: applications })
+
+    const { url } = $values
+    validation.check({
+      ...$values,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
+  }
+
+  $: appUrl = `${window.location.origin}${
+    $values.url
+      ? `${appPrefix}${$values.url}`
+      : `${appPrefix}${resolveAppUrl($values.name)}`
+  }`
+
+  onMount(async () => {
+    nameToUrl($values.name)
+    await setupValidation()
+  })
+</script>
+
+<ModalContent
+  title={"Duplicate App"}
+  onConfirm={async () => {
+    validation.check({
+      ...$values,
+    })
+    if ($validation.valid) {
+      await duplicateApp()
+    } else {
+      return keepOpen
+    }
+  }}
+>
+  <Layout gap="S" noPadding>
+    <Input
+      autofocus={true}
+      bind:value={$values.name}
+      disabled={duplicating}
+      error={$validation.touched.name && $validation.errors.name}
+      on:blur={() => ($validation.touched.name = true)}
+      on:change={nameToUrl($values.name)}
+      label="Name"
+      placeholder={defaultAppName}
+    />
+    <span>
+      <Input
+        bind:value={$values.url}
+        disabled={duplicating}
+        error={$validation.touched.url && $validation.errors.url}
+        on:blur={() => ($validation.touched.url = true)}
+        on:change={tidyUrl($values.url)}
+        label="URL"
+        placeholder={$values.url
+          ? $values.url
+          : `/${resolveAppUrl($values.name)}`}
+      />
+      {#if $values.url && $values.url !== "" && !$validation.errors.url}
+        <div class="app-server" title={appUrl}>
+          {appUrl}
+        </div>
+      {/if}
+    </span>
+  </Layout>
+</ModalContent>
+
+<style>
+  .app-server {
+    color: var(--spectrum-global-color-gray-600);
+    margin-top: 10px;
+    width: 320px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/start/ExportAppModal.svelte b/packages/builder/src/components/start/ExportAppModal.svelte
index 734e4448a1..ec0cf42fe0 100644
--- a/packages/builder/src/components/start/ExportAppModal.svelte
+++ b/packages/builder/src/components/start/ExportAppModal.svelte
@@ -121,6 +121,7 @@
     <Input
       type="password"
       label="Password"
+      autocomplete="new-password"
       placeholder="Type here..."
       bind:value={password}
       error={$validation.errors.password}
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index da4f743f04..67befddcb9 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -3,7 +3,7 @@
   import { Page, Layout, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
-  import { isOnlyUser } from "stores/builder"
+  import { isOnlyUser, appStore } from "stores/builder"
 
   let deleteModal
 </script>
@@ -67,7 +67,11 @@
   </Page>
 </div>
 
-<DeleteModal bind:this={deleteModal} />
+<DeleteModal
+  bind:this={deleteModal}
+  appId={$appStore.appId}
+  appName={$appStore.name}
+/>
 
 <style>
   .delete-action :global(.text) {
diff --git a/packages/frontend-core/src/api/app.js b/packages/frontend-core/src/api/app.js
index 49137cbecd..fff2e99fe5 100644
--- a/packages/frontend-core/src/api/app.js
+++ b/packages/frontend-core/src/api/app.js
@@ -83,6 +83,18 @@ export const buildAppEndpoints = API => ({
     })
   },
 
+  /**
+   * Duplicate an existing app
+   * @param app the app to dupe
+   */
+  duplicateApp: async (app, appId) => {
+    return await API.post({
+      url: `/api/applications/${appId}/duplicate`,
+      body: app,
+      json: false,
+    })
+  },
+
   /**
    * Update an application using an export - the body
    * should be of type FormData, with a "file" and a "password" if encrypted.
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 33582cf656..c838e14744 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -26,6 +26,7 @@ import {
   env as envCore,
   ErrorCode,
   events,
+  HTTPError,
   migrations,
   objectStore,
   roles,
@@ -119,7 +120,7 @@ interface AppTemplate {
   templateString: string
   useTemplate: string
   file?: {
-    type: string
+    type?: string
     path: string
     password?: string
   }
@@ -252,6 +253,10 @@ async function performAppCreate(ctx: UserCtx) {
       ...(ctx.request.files.templateFile as any),
       password: encryptionPassword,
     }
+  } else if (typeof ctx.request.body.file?.path === "string") {
+    instanceConfig.file = {
+      path: ctx.request.body.file?.path,
+    }
   }
   const tenantId = tenancy.isMultiTenant() ? tenancy.getTenantId() : null
   const appId = generateDevAppID(generateAppID(tenantId))
@@ -361,12 +366,20 @@ async function creationEvents(request: any, app: App) {
     else if (request.files?.templateFile) {
       creationFns.push(a => events.app.fileImported(a))
     }
+    // from server file path
+    else if (request.body.file && request.duplicate) {
+      // explicitly pass in the newly created app id
+      creationFns.push(a => events.app.duplicated(a, app.appId))
+    }
     // unknown
     else {
       console.error("Could not determine template creation event")
     }
   }
-  creationFns.push(a => events.app.created(a))
+
+  if (!request.duplicate) {
+    creationFns.push(a => events.app.created(a))
+  }
 
   for (let fn of creationFns) {
     await fn(app)
@@ -380,7 +393,9 @@ async function appPostCreate(ctx: UserCtx, app: App) {
     tenantId,
     appId: app.appId,
   })
+
   await creationEvents(ctx.request, app)
+
   // app import & template creation
   if (ctx.request.body.useTemplate === "true") {
     const { rows } = await getUniqueRows([app.appId])
@@ -613,6 +628,61 @@ export async function importToApp(ctx: UserCtx) {
   ctx.body = { message: "app updated" }
 }
 
+/**
+ * Create a copy of the latest dev application.
+ * Performs an export of the app, then imports from the export dir path
+ */
+export async function duplicateApp(ctx: UserCtx) {
+  const { name: appName, url: possibleUrl } = ctx.request.body
+  const { appId: sourceAppId } = ctx.params
+  const [app] = await dbCore.getAppsByIDs([sourceAppId])
+
+  if (!app) {
+    ctx.throw(404, "Source app not found")
+  }
+
+  const apps = (await dbCore.getAllApps({ dev: true })) as App[]
+
+  checkAppName(ctx, apps, appName)
+  const url = sdk.applications.getAppUrl({ name: appName, url: possibleUrl })
+  checkAppUrl(ctx, apps, url)
+
+  const tmpPath = await sdk.backups.exportApp(sourceAppId, {
+    excludeRows: false,
+    tar: false,
+  })
+
+  // Build a create request that triggers an import from the export path above.
+  const createReq: any = {
+    request: {
+      body: {
+        name: appName,
+        url: possibleUrl,
+        useTemplate: "true",
+        file: {
+          path: tmpPath,
+        },
+      },
+      // Mark the create as a duplicate to kick off the correct event.
+      duplicate: true,
+    },
+  }
+
+  await create(createReq)
+  const { body: newApplication } = createReq
+
+  if (!newApplication) {
+    ctx.throw(500, "There was a problem duplicating the application")
+  }
+
+  ctx.body = {
+    message: "app duplicated",
+    duplicateAppId: newApplication?.appId,
+    sourceAppId,
+  }
+  ctx.status = 200
+}
+
 export async function updateAppPackage(appPackage: any, appId: any) {
   return context.doInAppContext(appId, async () => {
     const db = context.getAppDB()
diff --git a/packages/server/src/api/routes/application.ts b/packages/server/src/api/routes/application.ts
index babcb1b44b..f72a8c3c22 100644
--- a/packages/server/src/api/routes/application.ts
+++ b/packages/server/src/api/routes/application.ts
@@ -59,6 +59,11 @@ router
     authorized(permissions.GLOBAL_BUILDER),
     controller.destroy
   )
+  .post(
+    "/api/applications/:appId/duplicate",
+    authorized(permissions.GLOBAL_BUILDER),
+    controller.duplicateApp
+  )
   .post(
     "/api/applications/:appId/import",
     authorized(permissions.BUILDER),
diff --git a/packages/server/src/api/routes/tests/application.spec.ts b/packages/server/src/api/routes/tests/application.spec.ts
index fa5cb0a983..d202e31d2b 100644
--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@@ -107,6 +107,44 @@ describe("/applications", () => {
       expect(events.app.created).toBeCalledTimes(1)
       expect(events.app.fileImported).toBeCalledTimes(1)
     })
+
+    it("should reject with a known name", async () => {
+      let createError
+
+      const app = config.getApp()
+      expect(app).toBeDefined()
+      try {
+        await config.createApp(app?.name!)
+      } catch (err: any) {
+        createError = err
+        // Must be reset back to its original value or it breaks all
+        // subsequent tests
+        config.appId = app?.appId!
+      }
+
+      expect(createError).toBeDefined()
+      expect(createError.message).toEqual(
+        "Error 400 - App name is already in use."
+      )
+    })
+
+    it("should reject with a known url", async () => {
+      let createError
+
+      const app = config.getApp()
+      expect(app).toBeDefined()
+      try {
+        await config.createApp("made up", app?.url!)
+      } catch (err: any) {
+        createError = err
+        config.appId = app?.appId!
+      }
+
+      expect(createError).toBeDefined()
+      expect(createError.message).toEqual(
+        "Error 400 - App URL is already in use."
+      )
+    })
   })
 
   describe("fetch", () => {
@@ -325,6 +363,63 @@ describe("/applications", () => {
     })
   })
 
+  describe("POST /api/applications/:appId/duplicate", () => {
+    it("should duplicate an existing app", async () => {
+      await config.createApp("to-dupe")
+      const sourceAppId = config.getProdAppId()
+
+      const resp = await request
+        .post(`/api/applications/${sourceAppId}/duplicate`)
+        .field("name", "to-dupe copy")
+        .field("url", "/to-dupe-copy")
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(200)
+
+      expect(events.app.duplicated).toBeCalled()
+      expect(resp.body.duplicateAppId).toBeDefined()
+      expect(resp.body.sourceAppId).toEqual(sourceAppId)
+      expect(resp.body.duplicateAppId).not.toEqual(sourceAppId)
+    })
+
+    it("should reject an unknown app id with a 404", async () => {
+      await request
+        .post(`/api/applications/app_1234_not_real/duplicate`)
+        .field("name", "to-dupe copy")
+        .field("url", "/to-dupe-copy")
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(404)
+    })
+
+    it("should reject with a known name", async () => {
+      await config.createApp("known name")
+      const sourceAppId = config.getProdAppId()
+      const resp = await request
+        .post(`/api/applications/${sourceAppId}/duplicate`)
+        .field("name", "known name")
+        .field("url", "/known-name")
+        .set(config.defaultHeaders())
+        .expect(400)
+
+      expect(resp.body.message).toEqual("App name is already in use.")
+    })
+
+    it("should reject with a known url", async () => {
+      await config.createApp("known-url")
+      const sourceAppId = config.getProdAppId()
+
+      const resp = await request
+        .post(`/api/applications/${sourceAppId}/duplicate`)
+        .field("name", "this is fine")
+        .field("url", "/known-url")
+        .set(config.defaultHeaders())
+        .expect(400)
+
+      expect(resp.body.message).toEqual("App URL is already in use.")
+    })
+  })
+
   describe("POST /api/applications/:appId/sync", () => {
     it("should not sync automation logs", async () => {
       // setup the apps
diff --git a/packages/server/src/sdk/app/backups/imports.ts b/packages/server/src/sdk/app/backups/imports.ts
index 75c17dfa95..977dea5b63 100644
--- a/packages/server/src/sdk/app/backups/imports.ts
+++ b/packages/server/src/sdk/app/backups/imports.ts
@@ -24,7 +24,7 @@ import tar from "tar"
 
 type TemplateType = {
   file?: {
-    type: string
+    type?: string
     path: string
     password?: string
   }
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index ea3204536a..86a274df37 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -550,12 +550,16 @@ export default class TestConfiguration {
   }
 
   // APP
-  async createApp(appName: string): Promise<App> {
+  async createApp(appName: string, url?: string): Promise<App> {
     // create dev app
     // clear any old app
     this.appId = null
     this.app = await context.doInTenant(this.tenantId!, async () => {
-      const app = await this._req({ name: appName }, null, appController.create)
+      const app = await this._req(
+        { name: appName, url },
+        null,
+        appController.create
+      )
       this.appId = app.appId!
       return app
     })
diff --git a/packages/types/src/sdk/events/app.ts b/packages/types/src/sdk/events/app.ts
index 602dd8b6a5..8f03974035 100644
--- a/packages/types/src/sdk/events/app.ts
+++ b/packages/types/src/sdk/events/app.ts
@@ -44,6 +44,14 @@ export interface AppFileImportedEvent extends BaseEvent {
   }
 }
 
+export interface AppDuplicatedEvent extends BaseEvent {
+  duplicateAppId: string
+  appId: string
+  audited: {
+    name: string
+  }
+}
+
 export interface AppTemplateImportedEvent extends BaseEvent {
   appId: string
   templateKey: string
diff --git a/packages/types/src/sdk/events/event.ts b/packages/types/src/sdk/events/event.ts
index f20f1b8fd6..05f4fe4be9 100644
--- a/packages/types/src/sdk/events/event.ts
+++ b/packages/types/src/sdk/events/event.ts
@@ -60,6 +60,7 @@ export enum Event {
   APP_CREATED = "app:created",
   APP_UPDATED = "app:updated",
   APP_DELETED = "app:deleted",
+  APP_DUPLICATED = "app:duplicated",
   APP_PUBLISHED = "app:published",
   APP_UNPUBLISHED = "app:unpublished",
   APP_TEMPLATE_IMPORTED = "app:template:imported",
@@ -259,6 +260,7 @@ export const AuditedEventFriendlyName: Record<Event, string | undefined> = {
   [Event.APP_CREATED]: `App "{{ name }}" created`,
   [Event.APP_UPDATED]: `App "{{ name }}" updated`,
   [Event.APP_DELETED]: `App "{{ name }}" deleted`,
+  [Event.APP_DUPLICATED]: `App "{{ name }}" duplicated`,
   [Event.APP_PUBLISHED]: `App "{{ name }}" published`,
   [Event.APP_UNPUBLISHED]: `App "{{ name }}" unpublished`,
   [Event.APP_TEMPLATE_IMPORTED]: `App "{{ name }}" template imported`,

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

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

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

From c0d1b31ba2e4acef0bc6303db188df7667991bd5 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 22 Feb 2024 15:19:17 +0000
Subject: [PATCH 020/148] Lint

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

diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 293d0adf60..e1653f5f7b 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -30,7 +30,7 @@
 
   const deleteApp = async () => {
     if (!appId) {
-      console.log("No app id provided")
+      console.error("No app id provided")
       return
     }
     deleting = true

From 2bcf5ebe3a8f9b939d060e4a0874ecbccbb9b827 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 22 Feb 2024 15:36:54 +0000
Subject: [PATCH 021/148] Lint

---
 packages/builder/src/components/deploy/DeleteModal.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index e1653f5f7b..26a13623b5 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -46,6 +46,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <ConfirmDialog
   bind:this={deletionModal}
   title="Delete app"
@@ -54,9 +55,10 @@
   onCancel={() => (deletionConfirmationAppName = null)}
   disabled={deletionConfirmationAppName !== appName || deleting}
 >
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
   Are you sure you want to delete
-  <b class="app-name" on:click={copyName}>{appName}</b>?
+  <b class="app-name" role="button" tabindex={-1} on:click={copyName}>
+    {appName}
+  </b>?
   <br />
   Please enter the app name below to confirm.
   <br /><br />

From 6f269d631c203c5e05957cbb5b08aae38f971277 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 22 Feb 2024 16:14:57 +0000
Subject: [PATCH 022/148] Bump account portal

---
 packages/account-portal | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/account-portal b/packages/account-portal
index a851eeacab..ab324e35d8 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit a851eeacabfaad8bff6e781f5e5a62063cbc31f3
+Subproject commit ab324e35d855012bd0f49caa53c6dd765223c6fa

From 13e294b70887b3218b1e0368939f59dbe6f56dc5 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 22 Feb 2024 16:19:06 +0000
Subject: [PATCH 023/148] Removed references to unused picker

---
 packages/bbui/src/Form/Core/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 3e5befca0b..b0edf52748 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -14,4 +14,3 @@ export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
 export { default as CoreSlider } from "./Slider.svelte"
 export { default as CoreFile } from "./File.svelte"
-export { default as CoreEnv } from "./EnvSwitch.svelte"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

From e8e2a3c31dee17478b990074e6bcac468c6a3aa9 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 26 Feb 2024 10:57:37 +0000
Subject: [PATCH 034/148] Added context menu to the app navigation sidebar

---
 .../bbui/src/ActionMenu/ActionMenu.svelte     |  2 +-
 .../src/components/common/NavItem.svelte      |  7 +++---
 .../src/components/start/AppRowContext.svelte |  4 ++--
 .../apps/_components/PortalSideBar.svelte     | 23 ++++++++++++++++++-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
index 642ec4932a..c55d1cb43d 100644
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -38,7 +38,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget} on:open on:close>
   <Menu>
     <slot />
   </Menu>
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 0819bcb86b..7180b149de 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -71,6 +71,7 @@
   class:scrollable
   class:highlighted
   class:selectedBy
+  class:actionsOpen={highlighted && withActions}
   on:dragend
   on:dragstart
   on:dragover
@@ -168,8 +169,9 @@
     --avatars-background: var(--spectrum-global-color-gray-300);
   }
   .nav-item:hover .actions,
-  .hovering .actions {
-    visibility: visible;
+  .hovering .actions,
+  .nav-item.withActions.actionsOpen .actions {
+    opacity: 1;
   }
   .nav-item-content {
     flex: 1 1 auto;
@@ -272,7 +274,6 @@
     position: relative;
     display: grid;
     place-items: center;
-    visibility: hidden;
     order: 3;
     opacity: 0;
     width: 20px;
diff --git a/packages/builder/src/components/start/AppRowContext.svelte b/packages/builder/src/components/start/AppRowContext.svelte
index f2b9d2e04c..3d24aeb542 100644
--- a/packages/builder/src/components/start/AppRowContext.svelte
+++ b/packages/builder/src/components/start/AppRowContext.svelte
@@ -5,11 +5,11 @@
   import DuplicateAppModal from "./DuplicateAppModal.svelte"
 
   export let app
+  export let align = "right"
 
   let deleteModal
   let exportModal
   let duplicateModal
-
   let exportPublishedVersion = false
 </script>
 
@@ -28,7 +28,7 @@
   <DuplicateAppModal appId={app.devId} appName={app.name} />
 </Modal>
 
-<ActionMenu align="right">
+<ActionMenu {align} on:open on:close>
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index 3ece483425..b6f66ff8e7 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -3,8 +3,11 @@
   import { params, goto } from "@roxi/routify"
   import NavItem from "components/common/NavItem.svelte"
   import NavHeader from "components/common/NavHeader.svelte"
+  import AppRowContext from "components/start/AppRowContext.svelte"
+  import { AppStatus } from "constants"
 
   let searchString
+  let opened
 
   $: filteredApps = $apps
     .filter(app => {
@@ -13,6 +16,12 @@
         app.name.toLowerCase().includes(searchString.toLowerCase())
       )
     })
+    .map(app => {
+      return {
+        ...app,
+        deployed: app.status === AppStatus.DEPLOYED,
+      }
+    })
     .sort((a, b) => {
       const lowerA = a.name.toLowerCase()
       const lowerB = b.name.toLowerCase()
@@ -42,8 +51,20 @@
         icon={app.icon?.name || "Apps"}
         iconColor={app.icon?.color}
         selected={$params.appId === app.appId}
+        highlighted={opened == app.appId}
         on:click={() => $goto(`./${app.appId}`)}
-      />
+      >
+        <AppRowContext
+          {app}
+          align="left"
+          on:open={() => {
+            opened = app.appId
+          }}
+          on:close={() => {
+            opened = null
+          }}
+        />
+      </NavItem>
     {/each}
   </div>
 </div>

From a01bd88fd7a1fbb5bfb8c470112d6a6fdba60e93 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 26 Feb 2024 11:05:26 +0000
Subject: [PATCH 035/148] Bump account portal

---
 packages/account-portal | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/account-portal b/packages/account-portal
index ab324e35d8..de6d44c372 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit ab324e35d855012bd0f49caa53c6dd765223c6fa
+Subproject commit de6d44c372a7f48ca0ce8c6c0c19311d4bc21646

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

From b7b1e95eb8b0fdf8ed1b84075747bb23f3148712 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 1 Mar 2024 15:25:40 +0000
Subject: [PATCH 064/148] Add working PoC of snippets for both polyfilled vm
 and isolated-vm

---
 packages/server/package.json                  |  3 +-
 packages/server/src/api/controllers/script.ts |  2 +-
 packages/server/src/jsRunner/bundles/index.ts |  2 ++
 .../jsRunner/bundles/snippets.ivm.bundle.js   |  3 ++
 .../server/src/jsRunner/bundles/snippets.ts   | 18 ++++++++++++
 packages/server/src/jsRunner/index.ts         |  6 ++--
 .../src/jsRunner/tests/isolatedVM.spec.ts     |  2 +-
 packages/server/src/jsRunner/utilities.ts     |  3 --
 .../server/src/jsRunner/vm/isolated-vm.ts     | 14 ++++++++-
 packages/server/src/threads/query.ts          |  2 +-
 packages/string-templates/package.json        |  3 +-
 .../src/helpers/javascript.js                 | 29 ++++++++++++++++++-
 .../string-templates/src/helpers/snippet.js   |  1 +
 packages/string-templates/src/iife.js         |  3 ++
 packages/string-templates/src/index.js        |  2 ++
 15 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
 create mode 100644 packages/server/src/jsRunner/bundles/snippets.ts
 delete mode 100644 packages/server/src/jsRunner/utilities.ts
 create mode 100644 packages/string-templates/src/helpers/snippet.js
 create mode 100644 packages/string-templates/src/iife.js

diff --git a/packages/server/package.json b/packages/server/package.json
index 45980a4be6..572e735335 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -13,9 +13,10 @@
     "build": "node ./scripts/build.js",
     "postbuild": "copyfiles -f ../client/dist/budibase-client.js ../client/manifest.json client && copyfiles -f ../../yarn.lock ./dist/",
     "check:types": "tsc -p tsconfig.json --noEmit --paths null",
+    "build:isolated-vm-lib:snippets": "esbuild --minify --bundle src/jsRunner/bundles/snippets.ts --outfile=src/jsRunner/bundles/snippets.ivm.bundle.js --platform=node --format=iife --global-name=snippets",
     "build:isolated-vm-lib:string-templates": "esbuild --minify --bundle src/jsRunner/bundles/index-helpers.ts --outfile=src/jsRunner/bundles/index-helpers.ivm.bundle.js --platform=node --format=iife --external:handlebars --global-name=helpers",
     "build:isolated-vm-lib:bson": "esbuild --minify --bundle src/jsRunner/bundles/bsonPackage.ts --outfile=src/jsRunner/bundles/bson.ivm.bundle.js --platform=node --format=iife --global-name=bson",
-    "build:isolated-vm-libs": "yarn build:isolated-vm-lib:string-templates && yarn build:isolated-vm-lib:bson",
+    "build:isolated-vm-libs": "yarn build:isolated-vm-lib:string-templates && yarn build:isolated-vm-lib:bson && yarn build:isolated-vm-lib:snippets",
     "build:dev": "yarn prebuild && tsc --build --watch --preserveWatchOutput",
     "debug": "yarn build && node --expose-gc --inspect=9222 dist/index.js",
     "jest": "NODE_OPTIONS=\"--no-node-snapshot $NODE_OPTIONS\" jest",
diff --git a/packages/server/src/api/controllers/script.ts b/packages/server/src/api/controllers/script.ts
index b69fc430a6..4317f5fcde 100644
--- a/packages/server/src/api/controllers/script.ts
+++ b/packages/server/src/api/controllers/script.ts
@@ -1,6 +1,6 @@
 import { Ctx } from "@budibase/types"
 import { IsolatedVM } from "../../jsRunner/vm"
-import { iifeWrapper } from "../../jsRunner/utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 
 export async function execute(ctx: Ctx) {
   const { script, context } = ctx.request.body
diff --git a/packages/server/src/jsRunner/bundles/index.ts b/packages/server/src/jsRunner/bundles/index.ts
index 9e2960807a..f7685206a6 100644
--- a/packages/server/src/jsRunner/bundles/index.ts
+++ b/packages/server/src/jsRunner/bundles/index.ts
@@ -5,11 +5,13 @@ import fs from "fs"
 export const enum BundleType {
   HELPERS = "helpers",
   BSON = "bson",
+  SNIPPETS = "snippets",
 }
 
 const bundleSourceFile: Record<BundleType, string> = {
   [BundleType.HELPERS]: "./index-helpers.ivm.bundle.js",
   [BundleType.BSON]: "./bson.ivm.bundle.js",
+  [BundleType.SNIPPETS]: "./snippets.ivm.bundle.js",
 }
 const bundleSourceCode: Partial<Record<BundleType, string>> = {}
 
diff --git a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
new file mode 100644
index 0000000000..e5bc2df6c6
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
@@ -0,0 +1,3 @@
+"use strict";var snippets=(()=>{var s=Object.create;var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var W=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),d=(e,r)=>{for(var n in r)p(e,n,{get:r[n],enumerable:!0})},o=(e,r,n,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of c(r))!m.call(e,t)&&t!==n&&p(e,t,{get:()=>r[t],enumerable:!(i=x(r,t))||i.enumerable});return e};var g=(e,r,n)=>(n=e!=null?s(l(e)):{},o(r||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e)),v=e=>o(p({},"__esModule",{value:!0}),e);var u=W((_,f)=>{f.exports.iifeWrapper=e=>`(function(){
+${e}
+})();`});var y={};d(y,{default:()=>w});var a=g(u()),w=new Proxy({},{get:function(e,r){return[eval][0]((0,a.iifeWrapper)($("snippets")[r]))}});return v(y);})();
diff --git a/packages/server/src/jsRunner/bundles/snippets.ts b/packages/server/src/jsRunner/bundles/snippets.ts
new file mode 100644
index 0000000000..d45fe56ec0
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -0,0 +1,18 @@
+// @ts-ignore
+// eslint-disable-next-line local-rules/no-budibase-imports
+import { iifeWrapper } from "@budibase/string-templates/iife"
+
+export default new Proxy(
+  {},
+  {
+    get: function (_, name) {
+      // Get snippet definitions from global context, get the correct snippet
+      // then eval the JS.
+      // https://esbuild.github.io/content-types/#direct-eval for info on why
+      // eval is being called this way.
+      // @ts-ignore
+      // eslint-disable-next-line no-undef
+      return [eval][0](iifeWrapper($("snippets")[name]))
+    },
+  }
+)
diff --git a/packages/server/src/jsRunner/index.ts b/packages/server/src/jsRunner/index.ts
index 0c9f5d9f01..67aaffae7f 100644
--- a/packages/server/src/jsRunner/index.ts
+++ b/packages/server/src/jsRunner/index.ts
@@ -21,13 +21,15 @@ export function init() {
               memoryLimit: env.JS_RUNNER_MEMORY_LIMIT,
               invocationTimeout: env.JS_PER_INVOCATION_TIMEOUT_MS,
               isolateAccumulatedTimeout: env.JS_PER_REQUEST_TIMEOUT_MS,
-            }).withHelpers()
+            })
+              .withHelpers()
+              .withSnippets()
 
         if (bbCtx) {
           // If we have a context, we want to persist it to reuse the isolate
           bbCtx.vm = vm
         }
-        const { helpers, ...rest } = ctx
+        const { helpers, snippets, ...rest } = ctx
         return vm.withContext(rest, () => vm.execute(js))
       } catch (error: any) {
         if (error.message === "Script execution timed out.") {
diff --git a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
index 5296598ef1..5a9bc05d76 100644
--- a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
+++ b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
@@ -1,7 +1,7 @@
 import fs from "fs"
 import path from "path"
 import { IsolatedVM } from "../vm"
-import { iifeWrapper } from "../utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 
 function runJSWithIsolatedVM(script: string, context: Record<string, any>) {
   const runner = new IsolatedVM()
diff --git a/packages/server/src/jsRunner/utilities.ts b/packages/server/src/jsRunner/utilities.ts
deleted file mode 100644
index fa398ec239..0000000000
--- a/packages/server/src/jsRunner/utilities.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function iifeWrapper(script: string) {
-  return `(function(){\n${script}\n})();`
-}
diff --git a/packages/server/src/jsRunner/vm/isolated-vm.ts b/packages/server/src/jsRunner/vm/isolated-vm.ts
index b0692f0fd1..fb45abf5df 100644
--- a/packages/server/src/jsRunner/vm/isolated-vm.ts
+++ b/packages/server/src/jsRunner/vm/isolated-vm.ts
@@ -7,7 +7,7 @@ import querystring from "querystring"
 
 import { BundleType, loadBundle } from "../bundles"
 import { VM } from "@budibase/types"
-import { iifeWrapper } from "../utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 import environment from "../../environment"
 
 class ExecutionTimeoutError extends Error {
@@ -98,6 +98,18 @@ export class IsolatedVM implements VM {
     return this
   }
 
+  withSnippets() {
+    const snippetsSource = loadBundle(BundleType.SNIPPETS)
+    const script = this.isolate.compileScriptSync(
+      `${snippetsSource};snippets=snippets.default;`
+    )
+    script.runSync(this.vm, { timeout: this.invocationTimeout, release: false })
+    new Promise(() => {
+      script.release()
+    })
+    return this
+  }
+
   withContext<T>(context: Record<string, any>, executeWithContext: () => T) {
     this.addToContext(context)
 
diff --git a/packages/server/src/threads/query.ts b/packages/server/src/threads/query.ts
index 9d7b7062a5..40caa6dfd8 100644
--- a/packages/server/src/threads/query.ts
+++ b/packages/server/src/threads/query.ts
@@ -8,7 +8,7 @@ import {
   QueryResponse,
 } from "./definitions"
 import { IsolatedVM } from "../jsRunner/vm"
-import { iifeWrapper } from "../jsRunner/utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 import { getIntegration } from "../integrations"
 import { processStringSync } from "@budibase/string-templates"
 import { context, cache, auth } from "@budibase/backend-core"
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index ceafd5364f..340d74ef8a 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -12,7 +12,8 @@
       "import": "./dist/bundle.mjs"
     },
     "./package.json": "./package.json",
-    "./test/utils": "./test/utils.js"
+    "./test/utils": "./test/utils.js",
+    "./iife": "./src/iife.js"
   },
   "files": [
     "dist",
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 7827736812..65c70cc330 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -2,6 +2,8 @@ const { atob, isBackendService, isJSAllowed } = require("../utilities")
 const cloneDeep = require("lodash.clonedeep")
 const { LITERAL_MARKER } = require("../helpers/constants")
 const { getJsHelperList } = require("./list")
+const { iifeWrapper } = require("../iife")
+const { CrazyLongSnippet } = require("./snippet")
 
 // The method of executing JS scripts depends on the bundle being built.
 // This setter is used in the entrypoint (either index.js or index.mjs).
@@ -40,15 +42,30 @@ const getContextValue = (path, context) => {
   return data
 }
 
+const snippets = {
+  Square: `
+    return function(num) {
+      return num * num
+    }
+  `,
+  HelloWorld: `
+   return "Hello, world!"
+  `,
+  CrazyLongSnippet: atob(CrazyLongSnippet),
+}
+
 // Evaluates JS code against a certain context
 module.exports.processJS = (handlebars, context) => {
+  // for testing
+  context.snippets = snippets
+
   if (!isJSAllowed() || (isBackendService() && !runJS)) {
     throw new Error("JS disabled in environment.")
   }
   try {
     // Wrap JS in a function and immediately invoke it.
     // This is required to allow the final `return` statement to be valid.
-    const js = `(function(){${atob(handlebars)}})();`
+    const js = iifeWrapper(atob(handlebars))
 
     // Our $ context function gets a value from context.
     // We clone the context to avoid mutation in the binding affecting real
@@ -56,6 +73,16 @@ module.exports.processJS = (handlebars, context) => {
     const sandboxContext = {
       $: path => getContextValue(path, cloneDeep(context)),
       helpers: getJsHelperList(),
+
+      // Proxy to evaluate snippets when running in the browser
+      snippets: new Proxy(
+        {},
+        {
+          get: function (_, name) {
+            return eval(iifeWrapper(context.snippets[name]))
+          },
+        }
+      ),
     }
 
     // Create a sandbox with our context and run the JS
diff --git a/packages/string-templates/src/helpers/snippet.js b/packages/string-templates/src/helpers/snippet.js
new file mode 100644
index 0000000000..950019a69f
--- /dev/null
+++ b/packages/string-templates/src/helpers/snippet.js
@@ -0,0 +1 @@
+module.exports.CrazyLongSnippet = `LyoqCiAqIG1hcmtlZCAtIGEgbWFya2Rvd24gcGFyc2VyCiAqIENvcHlyaWdodCAoYykgMjAxMS0yMDIyLCBDaHJpc3RvcGhlciBKZWZmcmV5LiAoTUlUIExpY2Vuc2VkKQogKiBodHRwczovL2dpdGh1Yi5jb20vbWFya2VkanMvbWFya2VkCiAqLwoKLyoqCiAqIERPIE5PVCBFRElUIFRISVMgRklMRQogKiBUaGUgY29kZSBpbiB0aGlzIGZpbGUgaXMgZ2VuZXJhdGVkIGZyb20gZmlsZXMgaW4gLi9zcmMvCiAqLwoKZnVuY3Rpb24gZ2V0RGVmYXVsdHMoKSB7CiAgcmV0dXJuIHsKICAgIGJhc2VVcmw6IG51bGwsCiAgICBicmVha3M6IGZhbHNlLAogICAgZXh0ZW5zaW9uczogbnVsbCwKICAgIGdmbTogdHJ1ZSwKICAgIGhlYWRlcklkczogdHJ1ZSwKICAgIGhlYWRlclByZWZpeDogIiIsCiAgICBoaWdobGlnaHQ6IG51bGwsCiAgICBsYW5nUHJlZml4OiAibGFuZ3VhZ2UtIiwKICAgIG1hbmdsZTogdHJ1ZSwKICAgIHBlZGFudGljOiBmYWxzZSwKICAgIHJlbmRlcmVyOiBudWxsLAogICAgc2FuaXRpemU6IGZhbHNlLAogICAgc2FuaXRpemVyOiBudWxsLAogICAgc2lsZW50OiBmYWxzZSwKICAgIHNtYXJ0TGlzdHM6IGZhbHNlLAogICAgc21hcnR5cGFudHM6IGZhbHNlLAogICAgdG9rZW5pemVyOiBudWxsLAogICAgd2Fsa1Rva2VuczogbnVsbCwKICAgIHhodG1sOiBmYWxzZSwKICB9Cn0KCmxldCBkZWZhdWx0cyA9IGdldERlZmF1bHRzKCkKCmZ1bmN0aW9uIGNoYW5nZURlZmF1bHRzKG5ld0RlZmF1bHRzKSB7CiAgZGVmYXVsdHMgPSBuZXdEZWZhdWx0cwp9CgovKioKICogSGVscGVycwogKi8KY29uc3QgZXNjYXBlVGVzdCA9IC9bJjw+IiddLwpjb25zdCBlc2NhcGVSZXBsYWNlID0gL1smPD4iJ10vZwpjb25zdCBlc2NhcGVUZXN0Tm9FbmNvZGUgPSAvWzw+IiddfCYoPyEjP1x3KzspLwpjb25zdCBlc2NhcGVSZXBsYWNlTm9FbmNvZGUgPSAvWzw+IiddfCYoPyEjP1x3KzspL2cKY29uc3QgZXNjYXBlUmVwbGFjZW1lbnRzID0gewogICImIjogIiZhbXA7IiwKICAiPCI6ICImbHQ7IiwKICAiPiI6ICImZ3Q7IiwKICAnIic6ICImcXVvdDsiLAogICInIjogIiYjMzk7IiwKfQpjb25zdCBnZXRFc2NhcGVSZXBsYWNlbWVudCA9IGNoID0+IGVzY2FwZVJlcGxhY2VtZW50c1tjaF0KZnVuY3Rpb24gZXNjYXBlKGh0bWwsIGVuY29kZSkgewogIGlmIChlbmNvZGUpIHsKICAgIGlmIChlc2NhcGVUZXN0LnRlc3QoaHRtbCkpIHsKICAgICAgcmV0dXJuIGh0bWwucmVwbGFjZShlc2NhcGVSZXBsYWNlLCBnZXRFc2NhcGVSZXBsYWNlbWVudCkKICAgIH0KICB9IGVsc2UgewogICAgaWYgKGVzY2FwZVRlc3ROb0VuY29kZS50ZXN0KGh0bWwpKSB7CiAgICAgIHJldHVybiBodG1sLnJlcGxhY2UoZXNjYXBlUmVwbGFjZU5vRW5jb2RlLCBnZXRFc2NhcGVSZXBsYWNlbWVudCkKICAgIH0KICB9CgogIHJldHVybiBodG1sCn0KCmNvbnN0IHVuZXNjYXBlVGVzdCA9IC8mKCMoPzpcZCspfCg/OiN4WzAtOUEtRmEtZl0rKXwoPzpcdyspKTs/L2dpCgovKioKICogQHBhcmFtIHtzdHJpbmd9IGh0bWwKICovCmZ1bmN0aW9uIHVuZXNjYXBlKGh0bWwpIHsKICAvLyBleHBsaWNpdGx5IG1hdGNoIGRlY2ltYWwsIGhleCwgYW5kIG5hbWVkIEhUTUwgZW50aXRpZXMKICByZXR1cm4gaHRtbC5yZXBsYWNlKHVuZXNjYXBlVGVzdCwgKF8sIG4pID0+IHsKICAgIG4gPSBuLnRvTG93ZXJDYXNlKCkKICAgIGlmIChuID09PSAiY29sb24iKSByZXR1cm4gIjoiCiAgICBpZiAobi5jaGFyQXQoMCkgPT09ICIjIikgewogICAgICByZXR1cm4gbi5jaGFyQXQoMSkgPT09ICJ4IgogICAgICAgID8gU3RyaW5nLmZyb21DaGFyQ29kZShwYXJzZUludChuLnN1YnN0cmluZygyKSwgMTYpKQogICAgICAgIDogU3RyaW5nLmZyb21DaGFyQ29kZSgrbi5zdWJzdHJpbmcoMSkpCiAgICB9CiAgICByZXR1cm4gIiIKICB9KQp9Cgpjb25zdCBjYXJldCA9IC8oXnxbXlxbXSlcXi9nCgovKioKICogQHBhcmFtIHtzdHJpbmcgfCBSZWdFeHB9IHJlZ2V4CiAqIEBwYXJhbSB7c3RyaW5nfSBvcHQKICovCmZ1bmN0aW9uIGVkaXQocmVnZXgsIG9wdCkgewogIHJlZ2V4ID0gdHlwZW9mIHJlZ2V4ID09PSAic3RyaW5nIiA/IHJlZ2V4IDogcmVnZXguc291cmNlCiAgb3B0ID0gb3B0IHx8ICIiCiAgY29uc3Qgb2JqID0gewogICAgcmVwbGFjZTogKG5hbWUsIHZhbCkgPT4gewogICAgICB2YWwgPSB2YWwuc291cmNlIHx8IHZhbAogICAgICB2YWwgPSB2YWwucmVwbGFjZShjYXJldCwgIiQxIikKICAgICAgcmVnZXggPSByZWdleC5yZXBsYWNlKG5hbWUsIHZhbCkKICAgICAgcmV0dXJuIG9iagogICAgfSwKICAgIGdldFJlZ2V4OiAoKSA9PiB7CiAgICAgIHJldHVybiBuZXcgUmVnRXhwKHJlZ2V4LCBvcHQpCiAgICB9LAogIH0KICByZXR1cm4gb2JqCn0KCmNvbnN0IG5vbldvcmRBbmRDb2xvblRlc3QgPSAvW15cdzpdL2cKY29uc3Qgb3JpZ2luSW5kZXBlbmRlbnRVcmwgPSAvXiR8XlthLXpdW2EtejAtOSsuLV0qOnxeWz8jXS9pCgovKioKICogQHBhcmFtIHtib29sZWFufSBzYW5pdGl6ZQogKiBAcGFyYW0ge3N0cmluZ30gYmFzZQogKiBAcGFyYW0ge3N0cmluZ30gaHJlZgogKi8KZnVuY3Rpb24gY2xlYW5Vcmwoc2FuaXRpemUsIGJhc2UsIGhyZWYpIHsKICBpZiAoc2FuaXRpemUpIHsKICAgIGxldCBwcm90CiAgICB0cnkgewogICAgICBwcm90ID0gZGVjb2RlVVJJQ29tcG9uZW50KHVuZXNjYXBlKGhyZWYpKQogICAgICAgIC5yZXBsYWNlKG5vbldvcmRBbmRDb2xvblRlc3QsICIiKQogICAgICAgIC50b0xvd2VyQ2FzZSgpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHJldHVybiBudWxsCiAgICB9CiAgICBpZiAoCiAgICAgIHByb3QuaW5kZXhPZigiamF2YXNjcmlwdDoiKSA9PT0gMCB8fAogICAgICBwcm90LmluZGV4T2YoInZic2NyaXB0OiIpID09PSAwIHx8CiAgICAgIHByb3QuaW5kZXhPZigiZGF0YToiKSA9PT0gMAogICAgKSB7CiAgICAgIHJldHVybiBudWxsCiAgICB9CiAgfQogIGlmIChiYXNlICYmICFvcmlnaW5JbmRlcGVuZGVudFVybC50ZXN0KGhyZWYpKSB7CiAgICBocmVmID0gcmVzb2x2ZVVybChiYXNlLCBocmVmKQogIH0KICB0cnkgewogICAgaHJlZiA9IGVuY29kZVVSSShocmVmKS5yZXBsYWNlKC8lMjUvZywgIiUiKQogIH0gY2F0Y2ggKGUpIHsKICAgIHJldHVybiBudWxsCiAgfQogIHJldHVybiBocmVmCn0KCmNvbnN0IGJhc2VVcmxzID0ge30KY29uc3QganVzdERvbWFpbiA9IC9eW146XSs6XC8qW14vXSokLwpjb25zdCBwcm90b2NvbCA9IC9eKFteOl0rOilbXHNcU10qJC8KY29uc3QgZG9tYWluID0gL14oW146XSs6XC8qW14vXSopW1xzXFNdKiQvCgovKioKICogQHBhcmFtIHtzdHJpbmd9IGJhc2UKICogQHBhcmFtIHtzdHJpbmd9IGhyZWYKICovCmZ1bmN0aW9uIHJlc29sdmVVcmwoYmFzZSwgaHJlZikgewogIGlmICghYmFzZVVybHNbIiAiICsgYmFzZV0pIHsKICAgIC8vIHdlIGNhbiBpZ25vcmUgZXZlcnl0aGluZyBpbiBiYXNlIGFmdGVyIHRoZSBsYXN0IHNsYXNoIG9mIGl0cyBwYXRoIGNvbXBvbmVudCwKICAgIC8vIGJ1dCB3ZSBtaWdodCBuZWVkIHRvIGFkZCBfdGhhdF8KICAgIC8vIGh0dHBzOi8vdG9vbHMuaWV0Zi5vcmcvaHRtbC9yZmMzOTg2I3NlY3Rpb24tMwogICAgaWYgKGp1c3REb21haW4udGVzdChiYXNlKSkgewogICAgICBiYXNlVXJsc1siICIgKyBiYXNlXSA9IGJhc2UgKyAiLyIKICAgIH0gZWxzZSB7CiAgICAgIGJhc2VVcmxzWyIgIiArIGJhc2VdID0gcnRyaW0oYmFzZSwgIi8iLCB0cnVlKQogICAgfQogIH0KICBiYXNlID0gYmFzZVVybHNbIiAiICsgYmFzZV0KICBjb25zdCByZWxhdGl2ZUJhc2UgPSBiYXNlLmluZGV4T2YoIjoiKSA9PT0gLTEKCiAgaWYgKGhyZWYuc3Vic3RyaW5nKDAsIDIpID09PSAiLy8iKSB7CiAgICBpZiAocmVsYXRpdmVCYXNlKSB7CiAgICAgIHJldHVybiBocmVmCiAgICB9CiAgICByZXR1cm4gYmFzZS5yZXBsYWNlKHByb3RvY29sLCAiJDEiKSArIGhyZWYKICB9IGVsc2UgaWYgKGhyZWYuY2hhckF0KDApID09PSAiLyIpIHsKICAgIGlmIChyZWxhdGl2ZUJhc2UpIHsKICAgICAgcmV0dXJuIGhyZWYKICAgIH0KICAgIHJldHVybiBiYXNlLnJlcGxhY2UoZG9tYWluLCAiJDEiKSArIGhyZWYKICB9IGVsc2UgewogICAgcmV0dXJuIGJhc2UgKyBocmVmCiAgfQp9Cgpjb25zdCBub29wVGVzdCA9IHsgZXhlYzogZnVuY3Rpb24gbm9vcFRlc3QoKSB7fSB9CgpmdW5jdGlvbiBtZXJnZShvYmopIHsKICBsZXQgaSA9IDEsCiAgICB0YXJnZXQsCiAgICBrZXkKCiAgZm9yICg7IGkgPCBhcmd1bWVudHMubGVuZ3RoOyBpKyspIHsKICAgIHRhcmdldCA9IGFyZ3VtZW50c1tpXQogICAgZm9yIChrZXkgaW4gdGFyZ2V0KSB7CiAgICAgIGlmIChPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwodGFyZ2V0LCBrZXkpKSB7CiAgICAgICAgb2JqW2tleV0gPSB0YXJnZXRba2V5XQogICAgICB9CiAgICB9CiAgfQoKICByZXR1cm4gb2JqCn0KCmZ1bmN0aW9uIHNwbGl0Q2VsbHModGFibGVSb3csIGNvdW50KSB7CiAgLy8gZW5zdXJlIHRoYXQgZXZlcnkgY2VsbC1kZWxpbWl0aW5nIHBpcGUgaGFzIGEgc3BhY2UKICAvLyBiZWZvcmUgaXQgdG8gZGlzdGluZ3Vpc2ggaXQgZnJvbSBhbiBlc2NhcGVkIHBpcGUKICBjb25zdCByb3cgPSB0YWJsZVJvdy5yZXBsYWNlKC9cfC9nLCAobWF0Y2gsIG9mZnNldCwgc3RyKSA9PiB7CiAgICAgIGxldCBlc2NhcGVkID0gZmFsc2UsCiAgICAgICAgY3VyciA9IG9mZnNldAogICAgICB3aGlsZSAoLS1jdXJyID49IDAgJiYgc3RyW2N1cnJdID09PSAiXFwiKSBlc2NhcGVkID0gIWVzY2FwZWQKICAgICAgaWYgKGVzY2FwZWQpIHsKICAgICAgICAvLyBvZGQgbnVtYmVyIG9mIHNsYXNoZXMgbWVhbnMgfCBpcyBlc2NhcGVkCiAgICAgICAgLy8gc28gd2UgbGVhdmUgaXQgYWxvbmUKICAgICAgICByZXR1cm4gInwiCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gYWRkIHNwYWNlIGJlZm9yZSB1bmVzY2FwZWQgfAogICAgICAgIHJldHVybiAiIHwiCiAgICAgIH0KICAgIH0pLAogICAgY2VsbHMgPSByb3cuc3BsaXQoLyBcfC8pCiAgbGV0IGkgPSAwCgogIC8vIEZpcnN0L2xhc3QgY2VsbCBpbiBhIHJvdyBjYW5ub3QgYmUgZW1wdHkgaWYgaXQgaGFzIG5vIGxlYWRpbmcvdHJhaWxpbmcgcGlwZQogIGlmICghY2VsbHNbMF0udHJpbSgpKSB7CiAgICBjZWxscy5zaGlmdCgpCiAgfQogIGlmIChjZWxscy5sZW5ndGggPiAwICYmICFjZWxsc1tjZWxscy5sZW5ndGggLSAxXS50cmltKCkpIHsKICAgIGNlbGxzLnBvcCgpCiAgfQoKICBpZiAoY2VsbHMubGVuZ3RoID4gY291bnQpIHsKICAgIGNlbGxzLnNwbGljZShjb3VudCkKICB9IGVsc2UgewogICAgd2hpbGUgKGNlbGxzLmxlbmd0aCA8IGNvdW50KSBjZWxscy5wdXNoKCIiKQogIH0KCiAgZm9yICg7IGkgPCBjZWxscy5sZW5ndGg7IGkrKykgewogICAgLy8gbGVhZGluZyBvciB0cmFpbGluZyB3aGl0ZXNwYWNlIGlzIGlnbm9yZWQgcGVyIHRoZSBnZm0gc3BlYwogICAgY2VsbHNbaV0gPSBjZWxsc1tpXS50cmltKCkucmVwbGFjZSgvXFxcfC9nLCAifCIpCiAgfQogIHJldHVybiBjZWxscwp9CgovKioKICogUmVtb3ZlIHRyYWlsaW5nICdjJ3MuIEVxdWl2YWxlbnQgdG8gc3RyLnJlcGxhY2UoL2MqJC8sICcnKS4KICogL2MqJC8gaXMgdnVsbmVyYWJsZSB0byBSRURPUy4KICoKICogQHBhcmFtIHtzdHJpbmd9IHN0cgogKiBAcGFyYW0ge3N0cmluZ30gYwogKiBAcGFyYW0ge2Jvb2xlYW59IGludmVydCBSZW1vdmUgc3VmZml4IG9mIG5vbi1jIGNoYXJzIGluc3RlYWQuIERlZmF1bHQgZmFsc2V5LgogKi8KZnVuY3Rpb24gcnRyaW0oc3RyLCBjLCBpbnZlcnQpIHsKICBjb25zdCBsID0gc3RyLmxlbmd0aAogIGlmIChsID09PSAwKSB7CiAgICByZXR1cm4gIiIKICB9CgogIC8vIExlbmd0aCBvZiBzdWZmaXggbWF0Y2hpbmcgdGhlIGludmVydCBjb25kaXRpb24uCiAgbGV0IHN1ZmZMZW4gPSAwCgogIC8vIFN0ZXAgbGVmdCB1bnRpbCB3ZSBmYWlsIHRvIG1hdGNoIHRoZSBpbnZlcnQgY29uZGl0aW9uLgogIHdoaWxlIChzdWZmTGVuIDwgbCkgewogICAgY29uc3QgY3VyckNoYXIgPSBzdHIuY2hhckF0KGwgLSBzdWZmTGVuIC0gMSkKICAgIGlmIChjdXJyQ2hhciA9PT0gYyAmJiAhaW52ZXJ0KSB7CiAgICAgIHN1ZmZMZW4rKwogICAgfSBlbHNlIGlmIChjdXJyQ2hhciAhPT0gYyAmJiBpbnZlcnQpIHsKICAgICAgc3VmZkxlbisrCiAgICB9IGVsc2UgewogICAgICBicmVhawogICAgfQogIH0KCiAgcmV0dXJuIHN0ci5zbGljZSgwLCBsIC0gc3VmZkxlbikKfQoKZnVuY3Rpb24gZmluZENsb3NpbmdCcmFja2V0KHN0ciwgYikgewogIGlmIChzdHIuaW5kZXhPZihiWzFdKSA9PT0gLTEpIHsKICAgIHJldHVybiAtMQogIH0KICBjb25zdCBsID0gc3RyLmxlbmd0aAogIGxldCBsZXZlbCA9IDAsCiAgICBpID0gMAogIGZvciAoOyBpIDwgbDsgaSsrKSB7CiAgICBpZiAoc3RyW2ldID09PSAiXFwiKSB7CiAgICAgIGkrKwogICAgfSBlbHNlIGlmIChzdHJbaV0gPT09IGJbMF0pIHsKICAgICAgbGV2ZWwrKwogICAgfSBlbHNlIGlmIChzdHJbaV0gPT09IGJbMV0pIHsKICAgICAgbGV2ZWwtLQogICAgICBpZiAobGV2ZWwgPCAwKSB7CiAgICAgICAgcmV0dXJuIGkKICAgICAgfQogICAgfQogIH0KICByZXR1cm4gLTEKfQoKZnVuY3Rpb24gY2hlY2tTYW5pdGl6ZURlcHJlY2F0aW9uKG9wdCkgewogIGlmIChvcHQgJiYgb3B0LnNhbml0aXplICYmICFvcHQuc2lsZW50KSB7CiAgICBjb25zb2xlLndhcm4oCiAgICAgICJtYXJrZWQoKTogc2FuaXRpemUgYW5kIHNhbml0aXplciBwYXJhbWV0ZXJzIGFyZSBkZXByZWNhdGVkIHNpbmNlIHZlcnNpb24gMC43LjAsIHNob3VsZCBub3QgYmUgdXNlZCBhbmQgd2lsbCBiZSByZW1vdmVkIGluIHRoZSBmdXR1cmUuIFJlYWQgbW9yZSBoZXJlOiBodHRwczovL21hcmtlZC5qcy5vcmcvIy9VU0lOR19BRFZBTkNFRC5tZCNvcHRpb25zIgogICAgKQogIH0KfQoKLy8gY29waWVkIGZyb20gaHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9hLzU0NTAxMTMvODA2Nzc3Ci8qKgogKiBAcGFyYW0ge3N0cmluZ30gcGF0dGVybgogKiBAcGFyYW0ge251bWJlcn0gY291bnQKICovCmZ1bmN0aW9uIHJlcGVhdFN0cmluZyhwYXR0ZXJuLCBjb3VudCkgewogIGlmIChjb3VudCA8IDEpIHsKICAgIHJldHVybiAiIgogIH0KICBsZXQgcmVzdWx0ID0gIiIKICB3aGlsZSAoY291bnQgPiAxKSB7CiAgICBpZiAoY291bnQgJiAxKSB7CiAgICAgIHJlc3VsdCArPSBwYXR0ZXJuCiAgICB9CiAgICBjb3VudCA+Pj0gMQogICAgcGF0dGVybiArPSBwYXR0ZXJuCiAgfQogIHJldHVybiByZXN1bHQgKyBwYXR0ZXJuCn0KCmZ1bmN0aW9uIG91dHB1dExpbmsoY2FwLCBsaW5rLCByYXcsIGxleGVyKSB7CiAgY29uc3QgaHJlZiA9IGxpbmsuaHJlZgogIGNvbnN0IHRpdGxlID0gbGluay50aXRsZSA/IGVzY2FwZShsaW5rLnRpdGxlKSA6IG51bGwKICBjb25zdCB0ZXh0ID0gY2FwWzFdLnJlcGxhY2UoL1xcKFtcW1xdXSkvZywgIiQxIikKCiAgaWYgKGNhcFswXS5jaGFyQXQoMCkgIT09ICIhIikgewogICAgbGV4ZXIuc3RhdGUuaW5MaW5rID0gdHJ1ZQogICAgY29uc3QgdG9rZW4gPSB7CiAgICAgIHR5cGU6ICJsaW5rIiwKICAgICAgcmF3LAogICAgICBocmVmLAogICAgICB0aXRsZSwKICAgICAgdGV4dCwKICAgICAgdG9rZW5zOiBsZXhlci5pbmxpbmVUb2tlbnModGV4dCwgW10pLAogICAgfQogICAgbGV4ZXIuc3RhdGUuaW5MaW5rID0gZmFsc2UKICAgIHJldHVybiB0b2tlbgogIH0KICByZXR1cm4gewogICAgdHlwZTogImltYWdlIiwKICAgIHJhdywKICAgIGhyZWYsCiAgICB0aXRsZSwKICAgIHRleHQ6IGVzY2FwZSh0ZXh0KSwKICB9Cn0KCmZ1bmN0aW9uIGluZGVudENvZGVDb21wZW5zYXRpb24ocmF3LCB0ZXh0KSB7CiAgY29uc3QgbWF0Y2hJbmRlbnRUb0NvZGUgPSByYXcubWF0Y2goL14oXHMrKSg/OmBgYCkvKQoKICBpZiAobWF0Y2hJbmRlbnRUb0NvZGUgPT09IG51bGwpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBjb25zdCBpbmRlbnRUb0NvZGUgPSBtYXRjaEluZGVudFRvQ29kZVsxXQoKICByZXR1cm4gdGV4dAogICAgLnNwbGl0KCJcbiIpCiAgICAubWFwKG5vZGUgPT4gewogICAgICBjb25zdCBtYXRjaEluZGVudEluTm9kZSA9IG5vZGUubWF0Y2goL15ccysvKQogICAgICBpZiAobWF0Y2hJbmRlbnRJbk5vZGUgPT09IG51bGwpIHsKICAgICAgICByZXR1cm4gbm9kZQogICAgICB9CgogICAgICBjb25zdCBbaW5kZW50SW5Ob2RlXSA9IG1hdGNoSW5kZW50SW5Ob2RlCgogICAgICBpZiAoaW5kZW50SW5Ob2RlLmxlbmd0aCA+PSBpbmRlbnRUb0NvZGUubGVuZ3RoKSB7CiAgICAgICAgcmV0dXJuIG5vZGUuc2xpY2UoaW5kZW50VG9Db2RlLmxlbmd0aCkKICAgICAgfQoKICAgICAgcmV0dXJuIG5vZGUKICAgIH0pCiAgICAuam9pbigiXG4iKQp9CgovKioKICogVG9rZW5pemVyCiAqLwpjbGFzcyBUb2tlbml6ZXIgewogIGNvbnN0cnVjdG9yKG9wdGlvbnMpIHsKICAgIHRoaXMub3B0aW9ucyA9IG9wdGlvbnMgfHwgZGVmYXVsdHMKICB9CgogIHNwYWNlKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5uZXdsaW5lLmV4ZWMoc3JjKQogICAgaWYgKGNhcCAmJiBjYXBbMF0ubGVuZ3RoID4gMCkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJzcGFjZSIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgIH0KICAgIH0KICB9CgogIGNvZGUoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmJsb2NrLmNvZGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IHRleHQgPSBjYXBbMF0ucmVwbGFjZSgvXiB7MSw0fS9nbSwgIiIpCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImNvZGUiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGNvZGVCbG9ja1N0eWxlOiAiaW5kZW50ZWQiLAogICAgICAgIHRleHQ6ICF0aGlzLm9wdGlvbnMucGVkYW50aWMgPyBydHJpbSh0ZXh0LCAiXG4iKSA6IHRleHQsCiAgICAgIH0KICAgIH0KICB9CgogIGZlbmNlcyhzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuYmxvY2suZmVuY2VzLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBjb25zdCByYXcgPSBjYXBbMF0KICAgICAgY29uc3QgdGV4dCA9IGluZGVudENvZGVDb21wZW5zYXRpb24ocmF3LCBjYXBbM10gfHwgIiIpCgogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJjb2RlIiwKICAgICAgICByYXcsCiAgICAgICAgbGFuZzogY2FwWzJdID8gY2FwWzJdLnRyaW0oKSA6IGNhcFsyXSwKICAgICAgICB0ZXh0LAogICAgICB9CiAgICB9CiAgfQoKICBoZWFkaW5nKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5oZWFkaW5nLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBsZXQgdGV4dCA9IGNhcFsyXS50cmltKCkKCiAgICAgIC8vIHJlbW92ZSB0cmFpbGluZyAjcwogICAgICBpZiAoLyMkLy50ZXN0KHRleHQpKSB7CiAgICAgICAgY29uc3QgdHJpbW1lZCA9IHJ0cmltKHRleHQsICIjIikKICAgICAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljKSB7CiAgICAgICAgICB0ZXh0ID0gdHJpbW1lZC50cmltKCkKICAgICAgICB9IGVsc2UgaWYgKCF0cmltbWVkIHx8IC8gJC8udGVzdCh0cmltbWVkKSkgewogICAgICAgICAgLy8gQ29tbW9uTWFyayByZXF1aXJlcyBzcGFjZSBiZWZvcmUgdHJhaWxpbmcgI3MKICAgICAgICAgIHRleHQgPSB0cmltbWVkLnRyaW0oKQogICAgICAgIH0KICAgICAgfQoKICAgICAgY29uc3QgdG9rZW4gPSB7CiAgICAgICAgdHlwZTogImhlYWRpbmciLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGRlcHRoOiBjYXBbMV0ubGVuZ3RoLAogICAgICAgIHRleHQsCiAgICAgICAgdG9rZW5zOiBbXSwKICAgICAgfQogICAgICB0aGlzLmxleGVyLmlubGluZSh0b2tlbi50ZXh0LCB0b2tlbi50b2tlbnMpCiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgaHIoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmJsb2NrLmhyLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJociIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgIH0KICAgIH0KICB9CgogIGJsb2NrcXVvdGUoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmJsb2NrLmJsb2NrcXVvdGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IHRleHQgPSBjYXBbMF0ucmVwbGFjZSgvXiAqPlsgXHRdPy9nbSwgIiIpCgogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJibG9ja3F1b3RlIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0b2tlbnM6IHRoaXMubGV4ZXIuYmxvY2tUb2tlbnModGV4dCwgW10pLAogICAgICAgIHRleHQsCiAgICAgIH0KICAgIH0KICB9CgogIGxpc3Qoc3JjKSB7CiAgICBsZXQgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5saXN0LmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBsZXQgcmF3LAogICAgICAgIGlzdGFzaywKICAgICAgICBpc2NoZWNrZWQsCiAgICAgICAgaW5kZW50LAogICAgICAgIGksCiAgICAgICAgYmxhbmtMaW5lLAogICAgICAgIGVuZHNXaXRoQmxhbmtMaW5lLAogICAgICAgIGxpbmUsCiAgICAgICAgbmV4dExpbmUsCiAgICAgICAgcmF3TGluZSwKICAgICAgICBpdGVtQ29udGVudHMsCiAgICAgICAgZW5kRWFybHkKCiAgICAgIGxldCBidWxsID0gY2FwWzFdLnRyaW0oKQogICAgICBjb25zdCBpc29yZGVyZWQgPSBidWxsLmxlbmd0aCA+IDEKCiAgICAgIGNvbnN0IGxpc3QgPSB7CiAgICAgICAgdHlwZTogImxpc3QiLAogICAgICAgIHJhdzogIiIsCiAgICAgICAgb3JkZXJlZDogaXNvcmRlcmVkLAogICAgICAgIHN0YXJ0OiBpc29yZGVyZWQgPyArYnVsbC5zbGljZSgwLCAtMSkgOiAiIiwKICAgICAgICBsb29zZTogZmFsc2UsCiAgICAgICAgaXRlbXM6IFtdLAogICAgICB9CgogICAgICBidWxsID0gaXNvcmRlcmVkID8gYFxcZHsxLDl9XFwke2J1bGwuc2xpY2UoLTEpfWAgOiBgXFwke2J1bGx9YAoKICAgICAgaWYgKHRoaXMub3B0aW9ucy5wZWRhbnRpYykgewogICAgICAgIGJ1bGwgPSBpc29yZGVyZWQgPyBidWxsIDogIlsqKy1dIgogICAgICB9CgogICAgICAvLyBHZXQgbmV4dCBsaXN0IGl0ZW0KICAgICAgY29uc3QgaXRlbVJlZ2V4ID0gbmV3IFJlZ0V4cCgKICAgICAgICBgXiggezAsM30ke2J1bGx9KSgoPzpbXHQgXVteXFxuXSopPyg/OlxcbnwkKSlgCiAgICAgICkKCiAgICAgIC8vIENoZWNrIGlmIGN1cnJlbnQgYnVsbGV0IHBvaW50IGNhbiBzdGFydCBhIG5ldyBMaXN0IEl0ZW0KICAgICAgd2hpbGUgKHNyYykgewogICAgICAgIGVuZEVhcmx5ID0gZmFsc2UKICAgICAgICBpZiAoIShjYXAgPSBpdGVtUmVnZXguZXhlYyhzcmMpKSkgewogICAgICAgICAgYnJlYWsKICAgICAgICB9CgogICAgICAgIGlmICh0aGlzLnJ1bGVzLmJsb2NrLmhyLnRlc3Qoc3JjKSkgewogICAgICAgICAgLy8gRW5kIGxpc3QgaWYgYnVsbGV0IHdhcyBhY3R1YWxseSBIUiAocG9zc2libHkgbW92ZSBpbnRvIGl0ZW1SZWdleD8pCiAgICAgICAgICBicmVhawogICAgICAgIH0KCiAgICAgICAgcmF3ID0gY2FwWzBdCiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyhyYXcubGVuZ3RoKQoKICAgICAgICBsaW5lID0gY2FwWzJdLnNwbGl0KCJcbiIsIDEpWzBdCiAgICAgICAgbmV4dExpbmUgPSBzcmMuc3BsaXQoIlxuIiwgMSlbMF0KCiAgICAgICAgaWYgKHRoaXMub3B0aW9ucy5wZWRhbnRpYykgewogICAgICAgICAgaW5kZW50ID0gMgogICAgICAgICAgaXRlbUNvbnRlbnRzID0gbGluZS50cmltTGVmdCgpCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIGluZGVudCA9IGNhcFsyXS5zZWFyY2goL1teIF0vKSAvLyBGaW5kIGZpcnN0IG5vbi1zcGFjZSBjaGFyCiAgICAgICAgICBpbmRlbnQgPSBpbmRlbnQgPiA0ID8gMSA6IGluZGVudCAvLyBUcmVhdCBpbmRlbnRlZCBjb2RlIGJsb2NrcyAoPiA0IHNwYWNlcykgYXMgaGF2aW5nIG9ubHkgMSBpbmRlbnQKICAgICAgICAgIGl0ZW1Db250ZW50cyA9IGxpbmUuc2xpY2UoaW5kZW50KQogICAgICAgICAgaW5kZW50ICs9IGNhcFsxXS5sZW5ndGgKICAgICAgICB9CgogICAgICAgIGJsYW5rTGluZSA9IGZhbHNlCgogICAgICAgIGlmICghbGluZSAmJiAvXiAqJC8udGVzdChuZXh0TGluZSkpIHsKICAgICAgICAgIC8vIEl0ZW1zIGJlZ2luIHdpdGggYXQgbW9zdCBvbmUgYmxhbmsgbGluZQogICAgICAgICAgcmF3ICs9IG5leHRMaW5lICsgIlxuIgogICAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyhuZXh0TGluZS5sZW5ndGggKyAxKQogICAgICAgICAgZW5kRWFybHkgPSB0cnVlCiAgICAgICAgfQoKICAgICAgICBpZiAoIWVuZEVhcmx5KSB7CiAgICAgICAgICBjb25zdCBuZXh0QnVsbGV0UmVnZXggPSBuZXcgUmVnRXhwKAogICAgICAgICAgICBgXiB7MCwke01hdGgubWluKAogICAgICAgICAgICAgIDMsCiAgICAgICAgICAgICAgaW5kZW50IC0gMQogICAgICAgICAgICApfX0oPzpbKistXXxcXGR7MSw5fVsuKV0pKCg/OiBbXlxcbl0qKT8oPzpcXG58JCkpYAogICAgICAgICAgKQogICAgICAgICAgY29uc3QgaHJSZWdleCA9IG5ldyBSZWdFeHAoCiAgICAgICAgICAgIGBeIHswLCR7TWF0aC5taW4oCiAgICAgICAgICAgICAgMywKICAgICAgICAgICAgICBpbmRlbnQgLSAxCiAgICAgICAgICAgICl9fSgoPzotICopezMsfXwoPzpfICopezMsfXwoPzpcXCogKil7Myx9KSg/Olxcbit8JClgCiAgICAgICAgICApCgogICAgICAgICAgLy8gQ2hlY2sgaWYgZm9sbG93aW5nIGxpbmVzIHNob3VsZCBiZSBpbmNsdWRlZCBpbiBMaXN0IEl0ZW0KICAgICAgICAgIHdoaWxlIChzcmMpIHsKICAgICAgICAgICAgcmF3TGluZSA9IHNyYy5zcGxpdCgiXG4iLCAxKVswXQogICAgICAgICAgICBsaW5lID0gcmF3TGluZQoKICAgICAgICAgICAgLy8gUmUtYWxpZ24gdG8gZm9sbG93IGNvbW1vbm1hcmsgbmVzdGluZyBydWxlcwogICAgICAgICAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljKSB7CiAgICAgICAgICAgICAgbGluZSA9IGxpbmUucmVwbGFjZSgvXiB7MSw0fSg/PSggezR9KSpbXiBdKS9nLCAiICAiKQogICAgICAgICAgICB9CgogICAgICAgICAgICAvLyBFbmQgbGlzdCBpdGVtIGlmIGZvdW5kIHN0YXJ0IG9mIG5ldyBidWxsZXQKICAgICAgICAgICAgaWYgKG5leHRCdWxsZXRSZWdleC50ZXN0KGxpbmUpKSB7CiAgICAgICAgICAgICAgYnJlYWsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLy8gSG9yaXpvbnRhbCBydWxlIGZvdW5kCiAgICAgICAgICAgIGlmIChoclJlZ2V4LnRlc3Qoc3JjKSkgewogICAgICAgICAgICAgIGJyZWFrCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGlmIChsaW5lLnNlYXJjaCgvW14gXS8pID49IGluZGVudCB8fCAhbGluZS50cmltKCkpIHsKICAgICAgICAgICAgICAvLyBEZWRlbnQgaWYgcG9zc2libGUKICAgICAgICAgICAgICBpdGVtQ29udGVudHMgKz0gIlxuIiArIGxpbmUuc2xpY2UoaW5kZW50KQogICAgICAgICAgICB9IGVsc2UgaWYgKCFibGFua0xpbmUpIHsKICAgICAgICAgICAgICAvLyBVbnRpbCBibGFuayBsaW5lLCBpdGVtIGRvZXNuJ3QgbmVlZCBpbmRlbnRhdGlvbgogICAgICAgICAgICAgIGl0ZW1Db250ZW50cyArPSAiXG4iICsgbGluZQogICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgIC8vIE90aGVyd2lzZSwgaW1wcm9wZXIgaW5kZW50YXRpb24gZW5kcyB0aGlzIGl0ZW0KICAgICAgICAgICAgICBicmVhawogICAgICAgICAgICB9CgogICAgICAgICAgICBpZiAoIWJsYW5rTGluZSAmJiAhbGluZS50cmltKCkpIHsKICAgICAgICAgICAgICAvLyBDaGVjayBpZiBjdXJyZW50IGxpbmUgaXMgYmxhbmsKICAgICAgICAgICAgICBibGFua0xpbmUgPSB0cnVlCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIHJhdyArPSByYXdMaW5lICsgIlxuIgogICAgICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHJhd0xpbmUubGVuZ3RoICsgMSkKICAgICAgICAgIH0KICAgICAgICB9CgogICAgICAgIGlmICghbGlzdC5sb29zZSkgewogICAgICAgICAgLy8gSWYgdGhlIHByZXZpb3VzIGl0ZW0gZW5kZWQgd2l0aCBhIGJsYW5rIGxpbmUsIHRoZSBsaXN0IGlzIGxvb3NlCiAgICAgICAgICBpZiAoZW5kc1dpdGhCbGFua0xpbmUpIHsKICAgICAgICAgICAgbGlzdC5sb29zZSA9IHRydWUKICAgICAgICAgIH0gZWxzZSBpZiAoL1xuICpcbiAqJC8udGVzdChyYXcpKSB7CiAgICAgICAgICAgIGVuZHNXaXRoQmxhbmtMaW5lID0gdHJ1ZQogICAgICAgICAgfQogICAgICAgIH0KCiAgICAgICAgLy8gQ2hlY2sgZm9yIHRhc2sgbGlzdCBpdGVtcwogICAgICAgIGlmICh0aGlzLm9wdGlvbnMuZ2ZtKSB7CiAgICAgICAgICBpc3Rhc2sgPSAvXlxbWyB4WF1cXSAvLmV4ZWMoaXRlbUNvbnRlbnRzKQogICAgICAgICAgaWYgKGlzdGFzaykgewogICAgICAgICAgICBpc2NoZWNrZWQgPSBpc3Rhc2tbMF0gIT09ICJbIF0gIgogICAgICAgICAgICBpdGVtQ29udGVudHMgPSBpdGVtQ29udGVudHMucmVwbGFjZSgvXlxbWyB4WF1cXSArLywgIiIpCiAgICAgICAgICB9CiAgICAgICAgfQoKICAgICAgICBsaXN0Lml0ZW1zLnB1c2goewogICAgICAgICAgdHlwZTogImxpc3RfaXRlbSIsCiAgICAgICAgICByYXcsCiAgICAgICAgICB0YXNrOiAhIWlzdGFzaywKICAgICAgICAgIGNoZWNrZWQ6IGlzY2hlY2tlZCwKICAgICAgICAgIGxvb3NlOiBmYWxzZSwKICAgICAgICAgIHRleHQ6IGl0ZW1Db250ZW50cywKICAgICAgICB9KQoKICAgICAgICBsaXN0LnJhdyArPSByYXcKICAgICAgfQoKICAgICAgLy8gRG8gbm90IGNvbnN1bWUgbmV3bGluZXMgYXQgZW5kIG9mIGZpbmFsIGl0ZW0uIEFsdGVybmF0aXZlbHksIG1ha2UgaXRlbVJlZ2V4ICpzdGFydCogd2l0aCBhbnkgbmV3bGluZXMgdG8gc2ltcGxpZnkvc3BlZWQgdXAgZW5kc1dpdGhCbGFua0xpbmUgbG9naWMKICAgICAgbGlzdC5pdGVtc1tsaXN0Lml0ZW1zLmxlbmd0aCAtIDFdLnJhdyA9IHJhdy50cmltUmlnaHQoKQogICAgICBsaXN0Lml0ZW1zW2xpc3QuaXRlbXMubGVuZ3RoIC0gMV0udGV4dCA9IGl0ZW1Db250ZW50cy50cmltUmlnaHQoKQogICAgICBsaXN0LnJhdyA9IGxpc3QucmF3LnRyaW1SaWdodCgpCgogICAgICBjb25zdCBsID0gbGlzdC5pdGVtcy5sZW5ndGgKCiAgICAgIC8vIEl0ZW0gY2hpbGQgdG9rZW5zIGhhbmRsZWQgaGVyZSBhdCBlbmQgYmVjYXVzZSB3ZSBuZWVkZWQgdG8gaGF2ZSB0aGUgZmluYWwgaXRlbSB0byB0cmltIGl0IGZpcnN0CiAgICAgIGZvciAoaSA9IDA7IGkgPCBsOyBpKyspIHsKICAgICAgICB0aGlzLmxleGVyLnN0YXRlLnRvcCA9IGZhbHNlCiAgICAgICAgbGlzdC5pdGVtc1tpXS50b2tlbnMgPSB0aGlzLmxleGVyLmJsb2NrVG9rZW5zKGxpc3QuaXRlbXNbaV0udGV4dCwgW10pCiAgICAgICAgY29uc3Qgc3BhY2VycyA9IGxpc3QuaXRlbXNbaV0udG9rZW5zLmZpbHRlcih0ID0+IHQudHlwZSA9PT0gInNwYWNlIikKICAgICAgICBjb25zdCBoYXNNdWx0aXBsZUxpbmVCcmVha3MgPSBzcGFjZXJzLmV2ZXJ5KHQgPT4gewogICAgICAgICAgY29uc3QgY2hhcnMgPSB0LnJhdy5zcGxpdCgiIikKICAgICAgICAgIGxldCBsaW5lQnJlYWtzID0gMAogICAgICAgICAgZm9yIChjb25zdCBjaGFyIG9mIGNoYXJzKSB7CiAgICAgICAgICAgIGlmIChjaGFyID09PSAiXG4iKSB7CiAgICAgICAgICAgICAgbGluZUJyZWFrcyArPSAxCiAgICAgICAgICAgIH0KICAgICAgICAgICAgaWYgKGxpbmVCcmVha3MgPiAxKSB7CiAgICAgICAgICAgICAgcmV0dXJuIHRydWUKICAgICAgICAgICAgfQogICAgICAgICAgfQoKICAgICAgICAgIHJldHVybiBmYWxzZQogICAgICAgIH0pCgogICAgICAgIGlmICghbGlzdC5sb29zZSAmJiBzcGFjZXJzLmxlbmd0aCAmJiBoYXNNdWx0aXBsZUxpbmVCcmVha3MpIHsKICAgICAgICAgIC8vIEhhdmluZyBhIHNpbmdsZSBsaW5lIGJyZWFrIGRvZXNuJ3QgbWVhbiBhIGxpc3QgaXMgbG9vc2UuIEEgc2luZ2xlIGxpbmUgYnJlYWsgaXMgdGVybWluYXRpbmcgdGhlIGxhc3QgbGlzdCBpdGVtCiAgICAgICAgICBsaXN0Lmxvb3NlID0gdHJ1ZQogICAgICAgICAgbGlzdC5pdGVtc1tpXS5sb29zZSA9IHRydWUKICAgICAgICB9CiAgICAgIH0KCiAgICAgIHJldHVybiBsaXN0CiAgICB9CiAgfQoKICBodG1sKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5odG1sLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBjb25zdCB0b2tlbiA9IHsKICAgICAgICB0eXBlOiAiaHRtbCIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgICAgcHJlOgogICAgICAgICAgIXRoaXMub3B0aW9ucy5zYW5pdGl6ZXIgJiYKICAgICAgICAgIChjYXBbMV0gPT09ICJwcmUiIHx8IGNhcFsxXSA9PT0gInNjcmlwdCIgfHwgY2FwWzFdID09PSAic3R5bGUiKSwKICAgICAgICB0ZXh0OiBjYXBbMF0sCiAgICAgIH0KICAgICAgaWYgKHRoaXMub3B0aW9ucy5zYW5pdGl6ZSkgewogICAgICAgIHRva2VuLnR5cGUgPSAicGFyYWdyYXBoIgogICAgICAgIHRva2VuLnRleHQgPSB0aGlzLm9wdGlvbnMuc2FuaXRpemVyCiAgICAgICAgICA/IHRoaXMub3B0aW9ucy5zYW5pdGl6ZXIoY2FwWzBdKQogICAgICAgICAgOiBlc2NhcGUoY2FwWzBdKQogICAgICAgIHRva2VuLnRva2VucyA9IFtdCiAgICAgICAgdGhpcy5sZXhlci5pbmxpbmUodG9rZW4udGV4dCwgdG9rZW4udG9rZW5zKQogICAgICB9CiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgZGVmKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5kZWYuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGlmIChjYXBbM10pIGNhcFszXSA9IGNhcFszXS5zdWJzdHJpbmcoMSwgY2FwWzNdLmxlbmd0aCAtIDEpCiAgICAgIGNvbnN0IHRhZyA9IGNhcFsxXS50b0xvd2VyQ2FzZSgpLnJlcGxhY2UoL1xzKy9nLCAiICIpCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImRlZiIsCiAgICAgICAgdGFnLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGhyZWY6IGNhcFsyXSwKICAgICAgICB0aXRsZTogY2FwWzNdLAogICAgICB9CiAgICB9CiAgfQoKICB0YWJsZShzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuYmxvY2sudGFibGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IGl0ZW0gPSB7CiAgICAgICAgdHlwZTogInRhYmxlIiwKICAgICAgICBoZWFkZXI6IHNwbGl0Q2VsbHMoY2FwWzFdKS5tYXAoYyA9PiB7CiAgICAgICAgICByZXR1cm4geyB0ZXh0OiBjIH0KICAgICAgICB9KSwKICAgICAgICBhbGlnbjogY2FwWzJdLnJlcGxhY2UoL14gKnxcfCAqJC9nLCAiIikuc3BsaXQoLyAqXHwgKi8pLAogICAgICAgIHJvd3M6CiAgICAgICAgICBjYXBbM10gJiYgY2FwWzNdLnRyaW0oKQogICAgICAgICAgICA/IGNhcFszXS5yZXBsYWNlKC9cblsgXHRdKiQvLCAiIikuc3BsaXQoIlxuIikKICAgICAgICAgICAgOiBbXSwKICAgICAgfQoKICAgICAgaWYgKGl0ZW0uaGVhZGVyLmxlbmd0aCA9PT0gaXRlbS5hbGlnbi5sZW5ndGgpIHsKICAgICAgICBpdGVtLnJhdyA9IGNhcFswXQoKICAgICAgICBsZXQgbCA9IGl0ZW0uYWxpZ24ubGVuZ3RoCiAgICAgICAgbGV0IGksIGosIGssIHJvdwogICAgICAgIGZvciAoaSA9IDA7IGkgPCBsOyBpKyspIHsKICAgICAgICAgIGlmICgvXiAqLSs6ICokLy50ZXN0KGl0ZW0uYWxpZ25baV0pKSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSAicmlnaHQiCiAgICAgICAgICB9IGVsc2UgaWYgKC9eICo6LSs6ICokLy50ZXN0KGl0ZW0uYWxpZ25baV0pKSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSAiY2VudGVyIgogICAgICAgICAgfSBlbHNlIGlmICgvXiAqOi0rICokLy50ZXN0KGl0ZW0uYWxpZ25baV0pKSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSAibGVmdCIKICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSBudWxsCiAgICAgICAgICB9CiAgICAgICAgfQoKICAgICAgICBsID0gaXRlbS5yb3dzLmxlbmd0aAogICAgICAgIGZvciAoaSA9IDA7IGkgPCBsOyBpKyspIHsKICAgICAgICAgIGl0ZW0ucm93c1tpXSA9IHNwbGl0Q2VsbHMoaXRlbS5yb3dzW2ldLCBpdGVtLmhlYWRlci5sZW5ndGgpLm1hcChjID0+IHsKICAgICAgICAgICAgcmV0dXJuIHsgdGV4dDogYyB9CiAgICAgICAgICB9KQogICAgICAgIH0KCiAgICAgICAgLy8gcGFyc2UgY2hpbGQgdG9rZW5zIGluc2lkZSBoZWFkZXJzIGFuZCBjZWxscwoKICAgICAgICAvLyBoZWFkZXIgY2hpbGQgdG9rZW5zCiAgICAgICAgbCA9IGl0ZW0uaGVhZGVyLmxlbmd0aAogICAgICAgIGZvciAoaiA9IDA7IGogPCBsOyBqKyspIHsKICAgICAgICAgIGl0ZW0uaGVhZGVyW2pdLnRva2VucyA9IFtdCiAgICAgICAgICB0aGlzLmxleGVyLmlubGluZShpdGVtLmhlYWRlcltqXS50ZXh0LCBpdGVtLmhlYWRlcltqXS50b2tlbnMpCiAgICAgICAgfQoKICAgICAgICAvLyBjZWxsIGNoaWxkIHRva2VucwogICAgICAgIGwgPSBpdGVtLnJvd3MubGVuZ3RoCiAgICAgICAgZm9yIChqID0gMDsgaiA8IGw7IGorKykgewogICAgICAgICAgcm93ID0gaXRlbS5yb3dzW2pdCiAgICAgICAgICBmb3IgKGsgPSAwOyBrIDwgcm93Lmxlbmd0aDsgaysrKSB7CiAgICAgICAgICAgIHJvd1trXS50b2tlbnMgPSBbXQogICAgICAgICAgICB0aGlzLmxleGVyLmlubGluZShyb3dba10udGV4dCwgcm93W2tdLnRva2VucykKICAgICAgICAgIH0KICAgICAgICB9CgogICAgICAgIHJldHVybiBpdGVtCiAgICAgIH0KICAgIH0KICB9CgogIGxoZWFkaW5nKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5saGVhZGluZy5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgY29uc3QgdG9rZW4gPSB7CiAgICAgICAgdHlwZTogImhlYWRpbmciLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGRlcHRoOiBjYXBbMl0uY2hhckF0KDApID09PSAiPSIgPyAxIDogMiwKICAgICAgICB0ZXh0OiBjYXBbMV0sCiAgICAgICAgdG9rZW5zOiBbXSwKICAgICAgfQogICAgICB0aGlzLmxleGVyLmlubGluZSh0b2tlbi50ZXh0LCB0b2tlbi50b2tlbnMpCiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgcGFyYWdyYXBoKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5wYXJhZ3JhcGguZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IHRva2VuID0gewogICAgICAgIHR5cGU6ICJwYXJhZ3JhcGgiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIHRleHQ6CiAgICAgICAgICBjYXBbMV0uY2hhckF0KGNhcFsxXS5sZW5ndGggLSAxKSA9PT0gIlxuIgogICAgICAgICAgICA/IGNhcFsxXS5zbGljZSgwLCAtMSkKICAgICAgICAgICAgOiBjYXBbMV0sCiAgICAgICAgdG9rZW5zOiBbXSwKICAgICAgfQogICAgICB0aGlzLmxleGVyLmlubGluZSh0b2tlbi50ZXh0LCB0b2tlbi50b2tlbnMpCiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgdGV4dChzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuYmxvY2sudGV4dC5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgY29uc3QgdG9rZW4gPSB7CiAgICAgICAgdHlwZTogInRleHQiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIHRleHQ6IGNhcFswXSwKICAgICAgICB0b2tlbnM6IFtdLAogICAgICB9CiAgICAgIHRoaXMubGV4ZXIuaW5saW5lKHRva2VuLnRleHQsIHRva2VuLnRva2VucykKICAgICAgcmV0dXJuIHRva2VuCiAgICB9CiAgfQoKICBlc2NhcGUoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmlubGluZS5lc2NhcGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImVzY2FwZSIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgICAgdGV4dDogZXNjYXBlKGNhcFsxXSksCiAgICAgIH0KICAgIH0KICB9CgogIHRhZyhzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLnRhZy5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgaWYgKCF0aGlzLmxleGVyLnN0YXRlLmluTGluayAmJiAvXjxhIC9pLnRlc3QoY2FwWzBdKSkgewogICAgICAgIHRoaXMubGV4ZXIuc3RhdGUuaW5MaW5rID0gdHJ1ZQogICAgICB9IGVsc2UgaWYgKHRoaXMubGV4ZXIuc3RhdGUuaW5MaW5rICYmIC9ePFwvYT4vaS50ZXN0KGNhcFswXSkpIHsKICAgICAgICB0aGlzLmxleGVyLnN0YXRlLmluTGluayA9IGZhbHNlCiAgICAgIH0KICAgICAgaWYgKAogICAgICAgICF0aGlzLmxleGVyLnN0YXRlLmluUmF3QmxvY2sgJiYKICAgICAgICAvXjwocHJlfGNvZGV8a2JkfHNjcmlwdCkoXHN8PikvaS50ZXN0KGNhcFswXSkKICAgICAgKSB7CiAgICAgICAgdGhpcy5sZXhlci5zdGF0ZS5pblJhd0Jsb2NrID0gdHJ1ZQogICAgICB9IGVsc2UgaWYgKAogICAgICAgIHRoaXMubGV4ZXIuc3RhdGUuaW5SYXdCbG9jayAmJgogICAgICAgIC9ePFwvKHByZXxjb2RlfGtiZHxzY3JpcHQpKFxzfD4pL2kudGVzdChjYXBbMF0pCiAgICAgICkgewogICAgICAgIHRoaXMubGV4ZXIuc3RhdGUuaW5SYXdCbG9jayA9IGZhbHNlCiAgICAgIH0KCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogdGhpcy5vcHRpb25zLnNhbml0aXplID8gInRleHQiIDogImh0bWwiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGluTGluazogdGhpcy5sZXhlci5zdGF0ZS5pbkxpbmssCiAgICAgICAgaW5SYXdCbG9jazogdGhpcy5sZXhlci5zdGF0ZS5pblJhd0Jsb2NrLAogICAgICAgIHRleHQ6IHRoaXMub3B0aW9ucy5zYW5pdGl6ZQogICAgICAgICAgPyB0aGlzLm9wdGlvbnMuc2FuaXRpemVyCiAgICAgICAgICAgID8gdGhpcy5vcHRpb25zLnNhbml0aXplcihjYXBbMF0pCiAgICAgICAgICAgIDogZXNjYXBlKGNhcFswXSkKICAgICAgICAgIDogY2FwWzBdLAogICAgICB9CiAgICB9CiAgfQoKICBsaW5rKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5pbmxpbmUubGluay5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgY29uc3QgdHJpbW1lZFVybCA9IGNhcFsyXS50cmltKCkKICAgICAgaWYgKCF0aGlzLm9wdGlvbnMucGVkYW50aWMgJiYgL148Ly50ZXN0KHRyaW1tZWRVcmwpKSB7CiAgICAgICAgLy8gY29tbW9ubWFyayByZXF1aXJlcyBtYXRjaGluZyBhbmdsZSBicmFja2V0cwogICAgICAgIGlmICghLz4kLy50ZXN0KHRyaW1tZWRVcmwpKSB7CiAgICAgICAgICByZXR1cm4KICAgICAgICB9CgogICAgICAgIC8vIGVuZGluZyBhbmdsZSBicmFja2V0IGNhbm5vdCBiZSBlc2NhcGVkCiAgICAgICAgY29uc3QgcnRyaW1TbGFzaCA9IHJ0cmltKHRyaW1tZWRVcmwuc2xpY2UoMCwgLTEpLCAiXFwiKQogICAgICAgIGlmICgodHJpbW1lZFVybC5sZW5ndGggLSBydHJpbVNsYXNoLmxlbmd0aCkgJSAyID09PSAwKSB7CiAgICAgICAgICByZXR1cm4KICAgICAgICB9CiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gZmluZCBjbG9zaW5nIHBhcmVudGhlc2lzCiAgICAgICAgY29uc3QgbGFzdFBhcmVuSW5kZXggPSBmaW5kQ2xvc2luZ0JyYWNrZXQoY2FwWzJdLCAiKCkiKQogICAgICAgIGlmIChsYXN0UGFyZW5JbmRleCA+IC0xKSB7CiAgICAgICAgICBjb25zdCBzdGFydCA9IGNhcFswXS5pbmRleE9mKCIhIikgPT09IDAgPyA1IDogNAogICAgICAgICAgY29uc3QgbGlua0xlbiA9IHN0YXJ0ICsgY2FwWzFdLmxlbmd0aCArIGxhc3RQYXJlbkluZGV4CiAgICAgICAgICBjYXBbMl0gPSBjYXBbMl0uc3Vic3RyaW5nKDAsIGxhc3RQYXJlbkluZGV4KQogICAgICAgICAgY2FwWzBdID0gY2FwWzBdLnN1YnN0cmluZygwLCBsaW5rTGVuKS50cmltKCkKICAgICAgICAgIGNhcFszXSA9ICIiCiAgICAgICAgfQogICAgICB9CiAgICAgIGxldCBocmVmID0gY2FwWzJdCiAgICAgIGxldCB0aXRsZSA9ICIiCiAgICAgIGlmICh0aGlzLm9wdGlvbnMucGVkYW50aWMpIHsKICAgICAgICAvLyBzcGxpdCBwZWRhbnRpYyBocmVmIGFuZCB0aXRsZQogICAgICAgIGNvbnN0IGxpbmsgPSAvXihbXiciXSpbXlxzXSlccysoWyciXSkoLiopXDIvLmV4ZWMoaHJlZikKCiAgICAgICAgaWYgKGxpbmspIHsKICAgICAgICAgIGhyZWYgPSBsaW5rWzFdCiAgICAgICAgICB0aXRsZSA9IGxpbmtbM10KICAgICAgICB9CiAgICAgIH0gZWxzZSB7CiAgICAgICAgdGl0bGUgPSBjYXBbM10gPyBjYXBbM10uc2xpY2UoMSwgLTEpIDogIiIKICAgICAgfQoKICAgICAgaHJlZiA9IGhyZWYudHJpbSgpCiAgICAgIGlmICgvXjwvLnRlc3QoaHJlZikpIHsKICAgICAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljICYmICEvPiQvLnRlc3QodHJpbW1lZFVybCkpIHsKICAgICAgICAgIC8vIHBlZGFudGljIGFsbG93cyBzdGFydGluZyBhbmdsZSBicmFja2V0IHdpdGhvdXQgZW5kaW5nIGFuZ2xlIGJyYWNrZXQKICAgICAgICAgIGhyZWYgPSBocmVmLnNsaWNlKDEpCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIGhyZWYgPSBocmVmLnNsaWNlKDEsIC0xKQogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gb3V0cHV0TGluaygKICAgICAgICBjYXAsCiAgICAgICAgewogICAgICAgICAgaHJlZjogaHJlZiA/IGhyZWYucmVwbGFjZSh0aGlzLnJ1bGVzLmlubGluZS5fZXNjYXBlcywgIiQxIikgOiBocmVmLAogICAgICAgICAgdGl0bGU6IHRpdGxlCiAgICAgICAgICAgID8gdGl0bGUucmVwbGFjZSh0aGlzLnJ1bGVzLmlubGluZS5fZXNjYXBlcywgIiQxIikKICAgICAgICAgICAgOiB0aXRsZSwKICAgICAgICB9LAogICAgICAgIGNhcFswXSwKICAgICAgICB0aGlzLmxleGVyCiAgICAgICkKICAgIH0KICB9CgogIHJlZmxpbmsoc3JjLCBsaW5rcykgewogICAgbGV0IGNhcAogICAgaWYgKAogICAgICAoY2FwID0gdGhpcy5ydWxlcy5pbmxpbmUucmVmbGluay5leGVjKHNyYykpIHx8CiAgICAgIChjYXAgPSB0aGlzLnJ1bGVzLmlubGluZS5ub2xpbmsuZXhlYyhzcmMpKQogICAgKSB7CiAgICAgIGxldCBsaW5rID0gKGNhcFsyXSB8fCBjYXBbMV0pLnJlcGxhY2UoL1xzKy9nLCAiICIpCiAgICAgIGxpbmsgPSBsaW5rc1tsaW5rLnRvTG93ZXJDYXNlKCldCiAgICAgIGlmICghbGluayB8fCAhbGluay5ocmVmKSB7CiAgICAgICAgY29uc3QgdGV4dCA9IGNhcFswXS5jaGFyQXQoMCkKICAgICAgICByZXR1cm4gewogICAgICAgICAgdHlwZTogInRleHQiLAogICAgICAgICAgcmF3OiB0ZXh0LAogICAgICAgICAgdGV4dCwKICAgICAgICB9CiAgICAgIH0KICAgICAgcmV0dXJuIG91dHB1dExpbmsoY2FwLCBsaW5rLCBjYXBbMF0sIHRoaXMubGV4ZXIpCiAgICB9CiAgfQoKICBlbVN0cm9uZyhzcmMsIG1hc2tlZFNyYywgcHJldkNoYXIgPSAiIikgewogICAgbGV0IG1hdGNoID0gdGhpcy5ydWxlcy5pbmxpbmUuZW1TdHJvbmcubERlbGltLmV4ZWMoc3JjKQogICAgaWYgKCFtYXRjaCkgcmV0dXJuCgogICAgLy8gXyBjYW4ndCBiZSBiZXR3ZWVuIHR3byBhbHBoYW51bWVyaWNzLiBccHtMfVxwe059IGluY2x1ZGVzIG5vbi1lbmdsaXNoIGFscGhhYmV0L251bWJlcnMgYXMgd2VsbAogICAgaWYgKG1hdGNoWzNdICYmIHByZXZDaGFyLm1hdGNoKC9bXHB7TH1ccHtOfV0vdSkpIHJldHVybgoKICAgIGNvbnN0IG5leHRDaGFyID0gbWF0Y2hbMV0gfHwgbWF0Y2hbMl0gfHwgIiIKCiAgICBpZiAoCiAgICAgICFuZXh0Q2hhciB8fAogICAgICAobmV4dENoYXIgJiYKICAgICAgICAocHJldkNoYXIgPT09ICIiIHx8IHRoaXMucnVsZXMuaW5saW5lLnB1bmN0dWF0aW9uLmV4ZWMocHJldkNoYXIpKSkKICAgICkgewogICAgICBjb25zdCBsTGVuZ3RoID0gbWF0Y2hbMF0ubGVuZ3RoIC0gMQogICAgICBsZXQgckRlbGltLAogICAgICAgIHJMZW5ndGgsCiAgICAgICAgZGVsaW1Ub3RhbCA9IGxMZW5ndGgsCiAgICAgICAgbWlkRGVsaW1Ub3RhbCA9IDAKCiAgICAgIGNvbnN0IGVuZFJlZyA9CiAgICAgICAgbWF0Y2hbMF1bMF0gPT09ICIqIgogICAgICAgICAgPyB0aGlzLnJ1bGVzLmlubGluZS5lbVN0cm9uZy5yRGVsaW1Bc3QKICAgICAgICAgIDogdGhpcy5ydWxlcy5pbmxpbmUuZW1TdHJvbmcuckRlbGltVW5kCiAgICAgIGVuZFJlZy5sYXN0SW5kZXggPSAwCgogICAgICAvLyBDbGlwIG1hc2tlZFNyYyB0byBzYW1lIHNlY3Rpb24gb2Ygc3RyaW5nIGFzIHNyYyAobW92ZSB0byBsZXhlcj8pCiAgICAgIG1hc2tlZFNyYyA9IG1hc2tlZFNyYy5zbGljZSgtMSAqIHNyYy5sZW5ndGggKyBsTGVuZ3RoKQoKICAgICAgd2hpbGUgKChtYXRjaCA9IGVuZFJlZy5leGVjKG1hc2tlZFNyYykpICE9IG51bGwpIHsKICAgICAgICByRGVsaW0gPQogICAgICAgICAgbWF0Y2hbMV0gfHwgbWF0Y2hbMl0gfHwgbWF0Y2hbM10gfHwgbWF0Y2hbNF0gfHwgbWF0Y2hbNV0gfHwgbWF0Y2hbNl0KCiAgICAgICAgaWYgKCFyRGVsaW0pIGNvbnRpbnVlIC8vIHNraXAgc2luZ2xlICogaW4gX19hYmMqYWJjX18KCiAgICAgICAgckxlbmd0aCA9IHJEZWxpbS5sZW5ndGgKCiAgICAgICAgaWYgKG1hdGNoWzNdIHx8IG1hdGNoWzRdKSB7CiAgICAgICAgICAvLyBmb3VuZCBhbm90aGVyIExlZnQgRGVsaW0KICAgICAgICAgIGRlbGltVG90YWwgKz0gckxlbmd0aAogICAgICAgICAgY29udGludWUKICAgICAgICB9IGVsc2UgaWYgKG1hdGNoWzVdIHx8IG1hdGNoWzZdKSB7CiAgICAgICAgICAvLyBlaXRoZXIgTGVmdCBvciBSaWdodCBEZWxpbQogICAgICAgICAgaWYgKGxMZW5ndGggJSAzICYmICEoKGxMZW5ndGggKyByTGVuZ3RoKSAlIDMpKSB7CiAgICAgICAgICAgIG1pZERlbGltVG90YWwgKz0gckxlbmd0aAogICAgICAgICAgICBjb250aW51ZSAvLyBDb21tb25NYXJrIEVtcGhhc2lzIFJ1bGVzIDktMTAKICAgICAgICAgIH0KICAgICAgICB9CgogICAgICAgIGRlbGltVG90YWwgLT0gckxlbmd0aAoKICAgICAgICBpZiAoZGVsaW1Ub3RhbCA+IDApIGNvbnRpbnVlIC8vIEhhdmVuJ3QgZm91bmQgZW5vdWdoIGNsb3NpbmcgZGVsaW1pdGVycwoKICAgICAgICAvLyBSZW1vdmUgZXh0cmEgY2hhcmFjdGVycy4gKmEqKiogLT4gKmEqCiAgICAgICAgckxlbmd0aCA9IE1hdGgubWluKHJMZW5ndGgsIHJMZW5ndGggKyBkZWxpbVRvdGFsICsgbWlkRGVsaW1Ub3RhbCkKCiAgICAgICAgLy8gQ3JlYXRlIGBlbWAgaWYgc21hbGxlc3QgZGVsaW1pdGVyIGhhcyBvZGQgY2hhciBjb3VudC4gKmEqKioKICAgICAgICBpZiAoTWF0aC5taW4obExlbmd0aCwgckxlbmd0aCkgJSAyKSB7CiAgICAgICAgICBjb25zdCB0ZXh0ID0gc3JjLnNsaWNlKDEsIGxMZW5ndGggKyBtYXRjaC5pbmRleCArIHJMZW5ndGgpCiAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICB0eXBlOiAiZW0iLAogICAgICAgICAgICByYXc6IHNyYy5zbGljZSgwLCBsTGVuZ3RoICsgbWF0Y2guaW5kZXggKyByTGVuZ3RoICsgMSksCiAgICAgICAgICAgIHRleHQsCiAgICAgICAgICAgIHRva2VuczogdGhpcy5sZXhlci5pbmxpbmVUb2tlbnModGV4dCwgW10pLAogICAgICAgICAgfQogICAgICAgIH0KCiAgICAgICAgLy8gQ3JlYXRlICdzdHJvbmcnIGlmIHNtYWxsZXN0IGRlbGltaXRlciBoYXMgZXZlbiBjaGFyIGNvdW50LiAqKmEqKioKICAgICAgICBjb25zdCB0ZXh0ID0gc3JjLnNsaWNlKDIsIGxMZW5ndGggKyBtYXRjaC5pbmRleCArIHJMZW5ndGggLSAxKQogICAgICAgIHJldHVybiB7CiAgICAgICAgICB0eXBlOiAic3Ryb25nIiwKICAgICAgICAgIHJhdzogc3JjLnNsaWNlKDAsIGxMZW5ndGggKyBtYXRjaC5pbmRleCArIHJMZW5ndGggKyAxKSwKICAgICAgICAgIHRleHQsCiAgICAgICAgICB0b2tlbnM6IHRoaXMubGV4ZXIuaW5saW5lVG9rZW5zKHRleHQsIFtdKSwKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9CgogIGNvZGVzcGFuKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5pbmxpbmUuY29kZS5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgbGV0IHRleHQgPSBjYXBbMl0ucmVwbGFjZSgvXG4vZywgIiAiKQogICAgICBjb25zdCBoYXNOb25TcGFjZUNoYXJzID0gL1teIF0vLnRlc3QodGV4dCkKICAgICAgY29uc3QgaGFzU3BhY2VDaGFyc09uQm90aEVuZHMgPSAvXiAvLnRlc3QodGV4dCkgJiYgLyAkLy50ZXN0KHRleHQpCiAgICAgIGlmIChoYXNOb25TcGFjZUNoYXJzICYmIGhhc1NwYWNlQ2hhcnNPbkJvdGhFbmRzKSB7CiAgICAgICAgdGV4dCA9IHRleHQuc3Vic3RyaW5nKDEsIHRleHQubGVuZ3RoIC0gMSkKICAgICAgfQogICAgICB0ZXh0ID0gZXNjYXBlKHRleHQsIHRydWUpCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImNvZGVzcGFuIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0ZXh0LAogICAgICB9CiAgICB9CiAgfQoKICBicihzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLmJyLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJiciIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgIH0KICAgIH0KICB9CgogIGRlbChzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLmRlbC5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgcmV0dXJuIHsKICAgICAgICB0eXBlOiAiZGVsIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0ZXh0OiBjYXBbMl0sCiAgICAgICAgdG9rZW5zOiB0aGlzLmxleGVyLmlubGluZVRva2VucyhjYXBbMl0sIFtdKSwKICAgICAgfQogICAgfQogIH0KCiAgYXV0b2xpbmsoc3JjLCBtYW5nbGUpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLmF1dG9saW5rLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBsZXQgdGV4dCwgaHJlZgogICAgICBpZiAoY2FwWzJdID09PSAiQCIpIHsKICAgICAgICB0ZXh0ID0gZXNjYXBlKHRoaXMub3B0aW9ucy5tYW5nbGUgPyBtYW5nbGUoY2FwWzFdKSA6IGNhcFsxXSkKICAgICAgICBocmVmID0gIm1haWx0bzoiICsgdGV4dAogICAgICB9IGVsc2UgewogICAgICAgIHRleHQgPSBlc2NhcGUoY2FwWzFdKQogICAgICAgIGhyZWYgPSB0ZXh0CiAgICAgIH0KCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImxpbmsiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIHRleHQsCiAgICAgICAgaHJlZiwKICAgICAgICB0b2tlbnM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogInRleHQiLAogICAgICAgICAgICByYXc6IHRleHQsCiAgICAgICAgICAgIHRleHQsCiAgICAgICAgICB9LAogICAgICAgIF0sCiAgICAgIH0KICAgIH0KICB9CgogIHVybChzcmMsIG1hbmdsZSkgewogICAgbGV0IGNhcAogICAgaWYgKChjYXAgPSB0aGlzLnJ1bGVzLmlubGluZS51cmwuZXhlYyhzcmMpKSkgewogICAgICBsZXQgdGV4dCwgaHJlZgogICAgICBpZiAoY2FwWzJdID09PSAiQCIpIHsKICAgICAgICB0ZXh0ID0gZXNjYXBlKHRoaXMub3B0aW9ucy5tYW5nbGUgPyBtYW5nbGUoY2FwWzBdKSA6IGNhcFswXSkKICAgICAgICBocmVmID0gIm1haWx0bzoiICsgdGV4dAogICAgICB9IGVsc2UgewogICAgICAgIC8vIGRvIGV4dGVuZGVkIGF1dG9saW5rIHBhdGggdmFsaWRhdGlvbgogICAgICAgIGxldCBwcmV2Q2FwWmVybwogICAgICAgIGRvIHsKICAgICAgICAgIHByZXZDYXBaZXJvID0gY2FwWzBdCiAgICAgICAgICBjYXBbMF0gPSB0aGlzLnJ1bGVzLmlubGluZS5fYmFja3BlZGFsLmV4ZWMoY2FwWzBdKVswXQogICAgICAgIH0gd2hpbGUgKHByZXZDYXBaZXJvICE9PSBjYXBbMF0pCiAgICAgICAgdGV4dCA9IGVzY2FwZShjYXBbMF0pCiAgICAgICAgaWYgKGNhcFsxXSA9PT0gInd3dy4iKSB7CiAgICAgICAgICBocmVmID0gImh0dHA6Ly8iICsgdGV4dAogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICBocmVmID0gdGV4dAogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJsaW5rIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0ZXh0LAogICAgICAgIGhyZWYsCiAgICAgICAgdG9rZW5zOiBbCiAgICAgICAgICB7CiAgICAgICAgICAgIHR5cGU6ICJ0ZXh0IiwKICAgICAgICAgICAgcmF3OiB0ZXh0LAogICAgICAgICAgICB0ZXh0LAogICAgICAgICAgfSwKICAgICAgICBdLAogICAgICB9CiAgICB9CiAgfQoKICBpbmxpbmVUZXh0KHNyYywgc21hcnR5cGFudHMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLnRleHQuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGxldCB0ZXh0CiAgICAgIGlmICh0aGlzLmxleGVyLnN0YXRlLmluUmF3QmxvY2spIHsKICAgICAgICB0ZXh0ID0gdGhpcy5vcHRpb25zLnNhbml0aXplCiAgICAgICAgICA/IHRoaXMub3B0aW9ucy5zYW5pdGl6ZXIKICAgICAgICAgICAgPyB0aGlzLm9wdGlvbnMuc2FuaXRpemVyKGNhcFswXSkKICAgICAgICAgICAgOiBlc2NhcGUoY2FwWzBdKQogICAgICAgICAgOiBjYXBbMF0KICAgICAgfSBlbHNlIHsKICAgICAgICB0ZXh0ID0gZXNjYXBlKHRoaXMub3B0aW9ucy5zbWFydHlwYW50cyA/IHNtYXJ0eXBhbnRzKGNhcFswXSkgOiBjYXBbMF0pCiAgICAgIH0KICAgICAgcmV0dXJuIHsKICAgICAgICB0eXBlOiAidGV4dCIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgICAgdGV4dCwKICAgICAgfQogICAgfQogIH0KfQoKLyoqCiAqIEJsb2NrLUxldmVsIEdyYW1tYXIKICovCmNvbnN0IGJsb2NrID0gewogIG5ld2xpbmU6IC9eKD86ICooPzpcbnwkKSkrLywKICBjb2RlOiAvXiggezR9W15cbl0rKD86XG4oPzogKig/OlxufCQpKSopPykrLywKICBmZW5jZXM6CiAgICAvXiB7MCwzfShgezMsfSg/PVteYFxuXSpcbil8fnszLH0pKFteXG5dKilcbig/OnwoW1xzXFNdKj8pXG4pKD86IHswLDN9XDFbfmBdKiAqKD89XG58JCl8JCkvLAogIGhyOiAvXiB7MCwzfSgoPzotW1x0IF0qKXszLH18KD86X1sgXHRdKil7Myx9fCg/OlwqWyBcdF0qKXszLH0pKD86XG4rfCQpLywKICBoZWFkaW5nOiAvXiB7MCwzfSgjezEsNn0pKD89XHN8JCkoLiopKD86XG4rfCQpLywKICBibG9ja3F1b3RlOiAvXiggezAsM30+ID8ocGFyYWdyYXBofFteXG5dKikoPzpcbnwkKSkrLywKICBsaXN0OiAvXiggezAsM31idWxsKShbIFx0XVteXG5dKz8pPyg/OlxufCQpLywKICBodG1sOgogICAgIl4gezAsM30oPzoiICsgLy8gb3B0aW9uYWwgaW5kZW50YXRpb24KICAgICI8KHNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWEpW1xccz5dW1xcc1xcU10qPyg/OjwvXFwxPlteXFxuXSpcXG4rfCQpIiArIC8vICgxKQogICAgInxjb21tZW50W15cXG5dKihcXG4rfCQpIiArIC8vICgyKQogICAgInw8XFw/W1xcc1xcU10qPyg/OlxcPz5cXG4qfCQpIiArIC8vICgzKQogICAgInw8IVtBLVpdW1xcc1xcU10qPyg/Oj5cXG4qfCQpIiArIC8vICg0KQogICAgInw8IVxcW0NEQVRBXFxbW1xcc1xcU10qPyg/OlxcXVxcXT5cXG4qfCQpIiArIC8vICg1KQogICAgInw8Lz8odGFnKSg/OiArfFxcbnwvPz4pW1xcc1xcU10qPyg/Oig/OlxcbiAqKStcXG58JCkiICsgLy8gKDYpCiAgICAifDwoPyFzY3JpcHR8cHJlfHN0eWxlfHRleHRhcmVhKShbYS16XVtcXHctXSopKD86YXR0cmlidXRlKSo/ICovPz4oPz1bIFxcdF0qKD86XFxufCQpKVtcXHNcXFNdKj8oPzooPzpcXG4gKikrXFxufCQpIiArIC8vICg3KSBvcGVuIHRhZwogICAgInw8Lyg/IXNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWEpW2Etel1bXFx3LV0qXFxzKj4oPz1bIFxcdF0qKD86XFxufCQpKVtcXHNcXFNdKj8oPzooPzpcXG4gKikrXFxufCQpIiArIC8vICg3KSBjbG9zaW5nIHRhZwogICAgIikiLAogIGRlZjogL14gezAsM31cWyhsYWJlbClcXTogKig/OlxuICopPzw/KFteXHM+XSspPj8oPzooPzogKyg/OlxuICopP3wgKlxuICopKHRpdGxlKSk/ICooPzpcbit8JCkvLAogIHRhYmxlOiBub29wVGVzdCwKICBsaGVhZGluZzogL14oW15cbl0rKVxuIHswLDN9KD0rfC0rKSAqKD86XG4rfCQpLywKICAvLyByZWdleCB0ZW1wbGF0ZSwgcGxhY2Vob2xkZXJzIHdpbGwgYmUgcmVwbGFjZWQgYWNjb3JkaW5nIHRvIGRpZmZlcmVudCBwYXJhZ3JhcGgKICAvLyBpbnRlcnJ1cHRpb24gcnVsZXMgb2YgY29tbW9ubWFyayBhbmQgdGhlIG9yaWdpbmFsIG1hcmtkb3duIHNwZWM6CiAgX3BhcmFncmFwaDoKICAgIC9eKFteXG5dKyg/OlxuKD8haHJ8aGVhZGluZ3xsaGVhZGluZ3xibG9ja3F1b3RlfGZlbmNlc3xsaXN0fGh0bWx8dGFibGV8ICtcbilbXlxuXSspKikvLAogIHRleHQ6IC9eW15cbl0rLywKfQoKYmxvY2suX2xhYmVsID0gLyg/IVxzKlxdKSg/OlxcLnxbXlxbXF1cXF0pKy8KYmxvY2suX3RpdGxlID0gLyg/OiIoPzpcXCI/fFteIlxcXSkqInwnW14nXG5dKig/OlxuW14nXG5dKykqXG4/J3xcKFteKCldKlwpKS8KYmxvY2suZGVmID0gZWRpdChibG9jay5kZWYpCiAgLnJlcGxhY2UoImxhYmVsIiwgYmxvY2suX2xhYmVsKQogIC5yZXBsYWNlKCJ0aXRsZSIsIGJsb2NrLl90aXRsZSkKICAuZ2V0UmVnZXgoKQoKYmxvY2suYnVsbGV0ID0gLyg/OlsqKy1dfFxkezEsOX1bLildKS8KYmxvY2subGlzdEl0ZW1TdGFydCA9IGVkaXQoL14oICopKGJ1bGwpICovKQogIC5yZXBsYWNlKCJidWxsIiwgYmxvY2suYnVsbGV0KQogIC5nZXRSZWdleCgpCgpibG9jay5saXN0ID0gZWRpdChibG9jay5saXN0KQogIC5yZXBsYWNlKC9idWxsL2csIGJsb2NrLmJ1bGxldCkKICAucmVwbGFjZSgKICAgICJociIsCiAgICAiXFxuKyg/PVxcMT8oPzooPzotICopezMsfXwoPzpfICopezMsfXwoPzpcXCogKil7Myx9KSg/Olxcbit8JCkpIgogICkKICAucmVwbGFjZSgiZGVmIiwgIlxcbisoPz0iICsgYmxvY2suZGVmLnNvdXJjZSArICIpIikKICAuZ2V0UmVnZXgoKQoKYmxvY2suX3RhZyA9CiAgImFkZHJlc3N8YXJ0aWNsZXxhc2lkZXxiYXNlfGJhc2Vmb250fGJsb2NrcXVvdGV8Ym9keXxjYXB0aW9uIiArCiAgInxjZW50ZXJ8Y29sfGNvbGdyb3VwfGRkfGRldGFpbHN8ZGlhbG9nfGRpcnxkaXZ8ZGx8ZHR8ZmllbGRzZXR8ZmlnY2FwdGlvbiIgKwogICJ8ZmlndXJlfGZvb3Rlcnxmb3JtfGZyYW1lfGZyYW1lc2V0fGhbMS02XXxoZWFkfGhlYWRlcnxocnxodG1sfGlmcmFtZSIgKwogICJ8bGVnZW5kfGxpfGxpbmt8bWFpbnxtZW51fG1lbnVpdGVtfG1ldGF8bmF2fG5vZnJhbWVzfG9sfG9wdGdyb3VwfG9wdGlvbiIgKwogICJ8cHxwYXJhbXxzZWN0aW9ufHNvdXJjZXxzdW1tYXJ5fHRhYmxlfHRib2R5fHRkfHRmb290fHRofHRoZWFkfHRpdGxlfHRyIiArCiAgInx0cmFja3x1bCIKYmxvY2suX2NvbW1lbnQgPSAvPCEtLSg/IS0/PilbXHNcU10qPyg/Oi0tPnwkKS8KYmxvY2suaHRtbCA9IGVkaXQoYmxvY2suaHRtbCwgImkiKQogIC5yZXBsYWNlKCJjb21tZW50IiwgYmxvY2suX2NvbW1lbnQpCiAgLnJlcGxhY2UoInRhZyIsIGJsb2NrLl90YWcpCiAgLnJlcGxhY2UoCiAgICAiYXR0cmlidXRlIiwKICAgIC8gK1thLXpBLVo6X11bXHcuOi1dKig/OiAqPSAqIlteIlxuXSoifCAqPSAqJ1teJ1xuXSonfCAqPSAqW15ccyInPTw+YF0rKT8vCiAgKQogIC5nZXRSZWdleCgpCgpibG9jay5wYXJhZ3JhcGggPSBlZGl0KGJsb2NrLl9wYXJhZ3JhcGgpCiAgLnJlcGxhY2UoImhyIiwgYmxvY2suaHIpCiAgLnJlcGxhY2UoImhlYWRpbmciLCAiIHswLDN9I3sxLDZ9ICIpCiAgLnJlcGxhY2UoInxsaGVhZGluZyIsICIiKSAvLyBzZXRleCBoZWFkaW5ncyBkb24ndCBpbnRlcnJ1cHQgY29tbW9ubWFyayBwYXJhZ3JhcGhzCiAgLnJlcGxhY2UoInx0YWJsZSIsICIiKQogIC5yZXBsYWNlKCJibG9ja3F1b3RlIiwgIiB7MCwzfT4iKQogIC5yZXBsYWNlKCJmZW5jZXMiLCAiIHswLDN9KD86YHszLH0oPz1bXmBcXG5dKlxcbil8fnszLH0pW15cXG5dKlxcbiIpCiAgLnJlcGxhY2UoImxpc3QiLCAiIHswLDN9KD86WyorLV18MVsuKV0pICIpIC8vIG9ubHkgbGlzdHMgc3RhcnRpbmcgZnJvbSAxIGNhbiBpbnRlcnJ1cHQKICAucmVwbGFjZSgKICAgICJodG1sIiwKICAgICI8Lz8oPzp0YWcpKD86ICt8XFxufC8/Pil8PCg/OnNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWF8IS0tKSIKICApCiAgLnJlcGxhY2UoInRhZyIsIGJsb2NrLl90YWcpIC8vIHBhcnMgY2FuIGJlIGludGVycnVwdGVkIGJ5IHR5cGUgKDYpIGh0bWwgYmxvY2tzCiAgLmdldFJlZ2V4KCkKCmJsb2NrLmJsb2NrcXVvdGUgPSBlZGl0KGJsb2NrLmJsb2NrcXVvdGUpCiAgLnJlcGxhY2UoInBhcmFncmFwaCIsIGJsb2NrLnBhcmFncmFwaCkKICAuZ2V0UmVnZXgoKQoKLyoqCiAqIE5vcm1hbCBCbG9jayBHcmFtbWFyCiAqLwoKYmxvY2subm9ybWFsID0gbWVyZ2Uoe30sIGJsb2NrKQoKLyoqCiAqIEdGTSBCbG9jayBHcmFtbWFyCiAqLwoKYmxvY2suZ2ZtID0gbWVyZ2Uoe30sIGJsb2NrLm5vcm1hbCwgewogIHRhYmxlOgogICAgIl4gKihbXlxcbiBdLipcXHwuKilcXG4iICsgLy8gSGVhZGVyCiAgICAiIHswLDN9KD86XFx8ICopPyg6Py0rOj8gKig/OlxcfCAqOj8tKzo/ICopKikoPzpcXHwgKik/IiArIC8vIEFsaWduCiAgICAiKD86XFxuKCg/Oig/ISAqXFxufGhyfGhlYWRpbmd8YmxvY2txdW90ZXxjb2RlfGZlbmNlc3xsaXN0fGh0bWwpLiooPzpcXG58JCkpKilcXG4qfCQpIiwgLy8gQ2VsbHMKfSkKCmJsb2NrLmdmbS50YWJsZSA9IGVkaXQoYmxvY2suZ2ZtLnRhYmxlKQogIC5yZXBsYWNlKCJociIsIGJsb2NrLmhyKQogIC5yZXBsYWNlKCJoZWFkaW5nIiwgIiB7MCwzfSN7MSw2fSAiKQogIC5yZXBsYWNlKCJibG9ja3F1b3RlIiwgIiB7MCwzfT4iKQogIC5yZXBsYWNlKCJjb2RlIiwgIiB7NH1bXlxcbl0iKQogIC5yZXBsYWNlKCJmZW5jZXMiLCAiIHswLDN9KD86YHszLH0oPz1bXmBcXG5dKlxcbil8fnszLH0pW15cXG5dKlxcbiIpCiAgLnJlcGxhY2UoImxpc3QiLCAiIHswLDN9KD86WyorLV18MVsuKV0pICIpIC8vIG9ubHkgbGlzdHMgc3RhcnRpbmcgZnJvbSAxIGNhbiBpbnRlcnJ1cHQKICAucmVwbGFjZSgKICAgICJodG1sIiwKICAgICI8Lz8oPzp0YWcpKD86ICt8XFxufC8/Pil8PCg/OnNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWF8IS0tKSIKICApCiAgLnJlcGxhY2UoInRhZyIsIGJsb2NrLl90YWcpIC8vIHRhYmxlcyBjYW4gYmUgaW50ZXJydXB0ZWQgYnkgdHlwZSAoNikgaHRtbCBibG9ja3MKICAuZ2V0UmVnZXgoKQoKYmxvY2suZ2ZtLnBhcmFncmFwaCA9IGVkaXQoYmxvY2suX3BhcmFncmFwaCkKICAucmVwbGFjZSgiaHIiLCBibG9jay5ocikKICAucmVwbGFjZSgiaGVhZGluZyIsICIgezAsM30jezEsNn0gIikKICAucmVwbGFjZSgifGxoZWFkaW5nIiwgIiIpIC8vIHNldGV4IGhlYWRpbmdzIGRvbid0IGludGVycnVwdCBjb21tb25tYXJrIHBhcmFncmFwaHMKICAucmVwbGFjZSgidGFibGUiLCBibG9jay5nZm0udGFibGUpIC8vIGludGVycnVwdCBwYXJhZ3JhcGhzIHdpdGggdGFibGUKICAucmVwbGFjZSgiYmxvY2txdW90ZSIsICIgezAsM30+IikKICAucmVwbGFjZSgiZmVuY2VzIiwgIiB7MCwzfSg/OmB7Myx9KD89W15gXFxuXSpcXG4pfH57Myx9KVteXFxuXSpcXG4iKQogIC5yZXBsYWNlKCJsaXN0IiwgIiB7MCwzfSg/OlsqKy1dfDFbLildKSAiKSAvLyBvbmx5IGxpc3RzIHN0YXJ0aW5nIGZyb20gMSBjYW4gaW50ZXJydXB0CiAgLnJlcGxhY2UoCiAgICAiaHRtbCIsCiAgICAiPC8/KD86dGFnKSg/OiArfFxcbnwvPz4pfDwoPzpzY3JpcHR8cHJlfHN0eWxlfHRleHRhcmVhfCEtLSkiCiAgKQogIC5yZXBsYWNlKCJ0YWciLCBibG9jay5fdGFnKSAvLyBwYXJzIGNhbiBiZSBpbnRlcnJ1cHRlZCBieSB0eXBlICg2KSBodG1sIGJsb2NrcwogIC5nZXRSZWdleCgpCi8qKgogKiBQZWRhbnRpYyBncmFtbWFyIChvcmlnaW5hbCBKb2huIEdydWJlcidzIGxvb3NlIG1hcmtkb3duIHNwZWNpZmljYXRpb24pCiAqLwoKYmxvY2sucGVkYW50aWMgPSBtZXJnZSh7fSwgYmxvY2subm9ybWFsLCB7CiAgaHRtbDogZWRpdCgKICAgICJeICooPzpjb21tZW50ICooPzpcXG58XFxzKiQpIiArCiAgICAgICJ8PCh0YWcpW1xcc1xcU10rPzwvXFwxPiAqKD86XFxuezIsfXxcXHMqJCkiICsgLy8gY2xvc2VkIHRhZwogICAgICAifDx0YWcoPzpcIlteXCJdKlwifCdbXiddKid8XFxzW14nXCIvPlxcc10qKSo/Lz8+ICooPzpcXG57Mix9fFxccyokKSkiCiAgKQogICAgLnJlcGxhY2UoImNvbW1lbnQiLCBibG9jay5fY29tbWVudCkKICAgIC5yZXBsYWNlKAogICAgICAvdGFnL2csCiAgICAgICIoPyEoPzoiICsKICAgICAgICAiYXxlbXxzdHJvbmd8c21hbGx8c3xjaXRlfHF8ZGZufGFiYnJ8ZGF0YXx0aW1lfGNvZGV8dmFyfHNhbXB8a2JkfHN1YiIgKwogICAgICAgICJ8c3VwfGl8Ynx1fG1hcmt8cnVieXxydHxycHxiZGl8YmRvfHNwYW58YnJ8d2JyfGluc3xkZWx8aW1nKSIgKwogICAgICAgICJcXGIpXFx3Kyg/ITp8W15cXHdcXHNAXSpAKVxcYiIKICAgICkKICAgIC5nZXRSZWdleCgpLAogIGRlZjogL14gKlxbKFteXF1dKylcXTogKjw/KFteXHM+XSspPj8oPzogKyhbIihdW15cbl0rWyIpXSkpPyAqKD86XG4rfCQpLywKICBoZWFkaW5nOiAvXigjezEsNn0pKC4qKSg/OlxuK3wkKS8sCiAgZmVuY2VzOiBub29wVGVzdCwgLy8gZmVuY2VzIG5vdCBzdXBwb3J0ZWQKICBwYXJhZ3JhcGg6IGVkaXQoYmxvY2subm9ybWFsLl9wYXJhZ3JhcGgpCiAgICAucmVwbGFjZSgiaHIiLCBibG9jay5ocikKICAgIC5yZXBsYWNlKCJoZWFkaW5nIiwgIiAqI3sxLDZ9ICpbXlxuXSIpCiAgICAucmVwbGFjZSgibGhlYWRpbmciLCBibG9jay5saGVhZGluZykKICAgIC5yZXBsYWNlKCJibG9ja3F1b3RlIiwgIiB7MCwzfT4iKQogICAgLnJlcGxhY2UoInxmZW5jZXMiLCAiIikKICAgIC5yZXBsYWNlKCJ8bGlzdCIsICIiKQogICAgLnJlcGxhY2UoInxodG1sIiwgIiIpCiAgICAuZ2V0UmVnZXgoKSwKfSkKCi8qKgogKiBJbmxpbmUtTGV2ZWwgR3JhbW1hcgogKi8KY29uc3QgaW5saW5lID0gewogIGVzY2FwZTogL15cXChbISIjJCUmJygpKissXC0uLzo7PD0+P0BcW1xdXFxeX2B7fH1+XSkvLAogIGF1dG9saW5rOiAvXjwoc2NoZW1lOlteXHNceDAwLVx4MWY8Pl0qfGVtYWlsKT4vLAogIHVybDogbm9vcFRlc3QsCiAgdGFnOgogICAgIl5jb21tZW50IiArCiAgICAifF48L1thLXpBLVpdW1xcdzotXSpcXHMqPiIgKyAvLyBzZWxmLWNsb3NpbmcgdGFnCiAgICAifF48W2EtekEtWl1bXFx3LV0qKD86YXR0cmlidXRlKSo/XFxzKi8/PiIgKyAvLyBvcGVuIHRhZwogICAgInxePFxcP1tcXHNcXFNdKj9cXD8+IiArIC8vIHByb2Nlc3NpbmcgaW5zdHJ1Y3Rpb24sIGUuZy4gPD9waHAgPz4KICAgICJ8XjwhW2EtekEtWl0rXFxzW1xcc1xcU10qPz4iICsgLy8gZGVjbGFyYXRpb24sIGUuZy4gPCFET0NUWVBFIGh0bWw+CiAgICAifF48IVxcW0NEQVRBXFxbW1xcc1xcU10qP1xcXVxcXT4iLCAvLyBDREFUQSBzZWN0aW9uCiAgbGluazogL14hP1xbKGxhYmVsKVxdXChccyooaHJlZikoPzpccysodGl0bGUpKT9ccypcKS8sCiAgcmVmbGluazogL14hP1xbKGxhYmVsKVxdXFsocmVmKVxdLywKICBub2xpbms6IC9eIT9cWyhyZWYpXF0oPzpcW1xdKT8vLAogIHJlZmxpbmtTZWFyY2g6ICJyZWZsaW5rfG5vbGluayg/IVxcKCkiLAogIGVtU3Ryb25nOiB7CiAgICBsRGVsaW06IC9eKD86XCorKD86KFtwdW5jdF9dKXxbXlxzKl0pKXxeXysoPzooW3B1bmN0Kl0pfChbXlxzX10pKS8sCiAgICAvLyAgICAgICAgKDEpIGFuZCAoMikgY2FuIG9ubHkgYmUgYSBSaWdodCBEZWxpbWl0ZXIuICgzKSBhbmQgKDQpIGNhbiBvbmx5IGJlIExlZnQuICAoNSkgYW5kICg2KSBjYW4gYmUgZWl0aGVyIExlZnQgb3IgUmlnaHQuCiAgICAvLyAgICAgICAgICAoKSBTa2lwIG9ycGhhbiBpbnNpZGUgc3Ryb25nICAoKSBDb25zdW1lIHRvIGRlbGltICgxKSAjKioqICAgICAgICAgICAgICAgICgyKSBhKioqIywgYSoqKiAgICAgICAgICAgICAgICAgICAoMykgIyoqKmEsICoqKmEgICAgICAgICAgICAgICAgICg0KSAqKiojICAgICAgICAgICAgICAoNSkgIyoqKiMgICAgICAgICAgICAgICAgICg2KSBhKioqYQogICAgckRlbGltQXN0OgogICAgICAvXlteXypdKj9cX1xfW15fKl0qP1wqW15fKl0qPyg/PVxfXF8pfFteKl0rKD89W14qXSl8W3B1bmN0X10oXCorKSg/PVtcc118JCl8W15wdW5jdCpfXHNdKFwqKykoPz1bcHVuY3RfXHNdfCQpfFtwdW5jdF9cc10oXCorKSg/PVtecHVuY3QqX1xzXSl8W1xzXShcKispKD89W3B1bmN0X10pfFtwdW5jdF9dKFwqKykoPz1bcHVuY3RfXSl8W15wdW5jdCpfXHNdKFwqKykoPz1bXnB1bmN0Kl9cc10pLywKICAgIHJEZWxpbVVuZDoKICAgICAgL15bXl8qXSo/XCpcKlteXypdKj9cX1teXypdKj8oPz1cKlwqKXxbXl9dKyg/PVteX10pfFtwdW5jdCpdKFxfKykoPz1bXHNdfCQpfFtecHVuY3QqX1xzXShcXyspKD89W3B1bmN0KlxzXXwkKXxbcHVuY3QqXHNdKFxfKykoPz1bXnB1bmN0Kl9cc10pfFtcc10oXF8rKSg/PVtwdW5jdCpdKXxbcHVuY3QqXShcXyspKD89W3B1bmN0Kl0pLywgLy8gXi0gTm90IGFsbG93ZWQgZm9yIF8KICB9LAogIGNvZGU6IC9eKGArKShbXmBdfFteYF1bXHNcU10qP1teYF0pXDEoPyFgKS8sCiAgYnI6IC9eKCB7Mix9fFxcKVxuKD8hXHMqJCkvLAogIGRlbDogbm9vcFRlc3QsCiAgdGV4dDogL14oYCt8W15gXSkoPzooPz0gezIsfVxuKXxbXHNcU10qPyg/Oig/PVtcXDwhXFtgKl9dfFxiX3wkKXxbXiBdKD89IHsyLH1cbikpKS8sCiAgcHVuY3R1YXRpb246IC9eKFtcc3B1bmN0dWF0aW9uXSkvLAp9CgovLyBsaXN0IG9mIHB1bmN0dWF0aW9uIG1hcmtzIGZyb20gQ29tbW9uTWFyayBzcGVjCi8vIHdpdGhvdXQgKiBhbmQgXyB0byBoYW5kbGUgdGhlIGRpZmZlcmVudCBlbXBoYXNpcyBtYXJrZXJzICogYW5kIF8KaW5saW5lLl9wdW5jdHVhdGlvbiA9ICIhXCIjJCUmJygpK1xcLS4sLzo7PD0+P0BcXFtcXF1gXnt8fX4iCmlubGluZS5wdW5jdHVhdGlvbiA9IGVkaXQoaW5saW5lLnB1bmN0dWF0aW9uKQogIC5yZXBsYWNlKC9wdW5jdHVhdGlvbi9nLCBpbmxpbmUuX3B1bmN0dWF0aW9uKQogIC5nZXRSZWdleCgpCgovLyBzZXF1ZW5jZXMgZW0gc2hvdWxkIHNraXAgb3ZlciBbdGl0bGVdKGxpbmspLCBgY29kZWAsIDxodG1sPgppbmxpbmUuYmxvY2tTa2lwID0gL1xbW15cXV0qP1xdXChbXlwpXSo/XCl8YFteYF0qP2B8PFtePl0qPz4vZwppbmxpbmUuZXNjYXBlZEVtU3QgPSAvXFxcKnxcXF8vZwoKaW5saW5lLl9jb21tZW50ID0gZWRpdChibG9jay5fY29tbWVudCkucmVwbGFjZSgiKD86LS0+fCQpIiwgIi0tPiIpLmdldFJlZ2V4KCkKCmlubGluZS5lbVN0cm9uZy5sRGVsaW0gPSBlZGl0KGlubGluZS5lbVN0cm9uZy5sRGVsaW0pCiAgLnJlcGxhY2UoL3B1bmN0L2csIGlubGluZS5fcHVuY3R1YXRpb24pCiAgLmdldFJlZ2V4KCkKCmlubGluZS5lbVN0cm9uZy5yRGVsaW1Bc3QgPSBlZGl0KGlubGluZS5lbVN0cm9uZy5yRGVsaW1Bc3QsICJnIikKICAucmVwbGFjZSgvcHVuY3QvZywgaW5saW5lLl9wdW5jdHVhdGlvbikKICAuZ2V0UmVnZXgoKQoKaW5saW5lLmVtU3Ryb25nLnJEZWxpbVVuZCA9IGVkaXQoaW5saW5lLmVtU3Ryb25nLnJEZWxpbVVuZCwgImciKQogIC5yZXBsYWNlKC9wdW5jdC9nLCBpbmxpbmUuX3B1bmN0dWF0aW9uKQogIC5nZXRSZWdleCgpCgppbmxpbmUuX2VzY2FwZXMgPSAvXFwoWyEiIyQlJicoKSorLFwtLi86Ozw9Pj9AXFtcXVxcXl9ge3x9fl0pL2cKCmlubGluZS5fc2NoZW1lID0gL1thLXpBLVpdW2EtekEtWjAtOSsuLV17MSwzMX0vCmlubGluZS5fZW1haWwgPQogIC9bYS16QS1aMC05LiEjJCUmJyorLz0/Xl9ge3x9fi1dKyhAKVthLXpBLVowLTldKD86W2EtekEtWjAtOS1dezAsNjF9W2EtekEtWjAtOV0pPyg/OlwuW2EtekEtWjAtOV0oPzpbYS16QS1aMC05LV17MCw2MX1bYS16QS1aMC05XSk/KSsoPyFbLV9dKS8KaW5saW5lLmF1dG9saW5rID0gZWRpdChpbmxpbmUuYXV0b2xpbmspCiAgLnJlcGxhY2UoInNjaGVtZSIsIGlubGluZS5fc2NoZW1lKQogIC5yZXBsYWNlKCJlbWFpbCIsIGlubGluZS5fZW1haWwpCiAgLmdldFJlZ2V4KCkKCmlubGluZS5fYXR0cmlidXRlID0KICAvXHMrW2EtekEtWjpfXVtcdy46LV0qKD86XHMqPVxzKiJbXiJdKiJ8XHMqPVxzKidbXiddKid8XHMqPVxzKlteXHMiJz08PmBdKyk/LwoKaW5saW5lLnRhZyA9IGVkaXQoaW5saW5lLnRhZykKICAucmVwbGFjZSgiY29tbWVudCIsIGlubGluZS5fY29tbWVudCkKICAucmVwbGFjZSgiYXR0cmlidXRlIiwgaW5saW5lLl9hdHRyaWJ1dGUpCiAgLmdldFJlZ2V4KCkKCmlubGluZS5fbGFiZWwgPSAvKD86XFsoPzpcXC58W15cW1xdXFxdKSpcXXxcXC58YFteYF0qYHxbXlxbXF1cXGBdKSo/LwppbmxpbmUuX2hyZWYgPSAvPCg/OlxcLnxbXlxuPD5cXF0pKz58W15cc1x4MDAtXHgxZl0qLwppbmxpbmUuX3RpdGxlID0gLyIoPzpcXCI/fFteIlxcXSkqInwnKD86XFwnP3xbXidcXF0pKid8XCgoPzpcXFwpP3xbXilcXF0pKlwpLwoKaW5saW5lLmxpbmsgPSBlZGl0KGlubGluZS5saW5rKQogIC5yZXBsYWNlKCJsYWJlbCIsIGlubGluZS5fbGFiZWwpCiAgLnJlcGxhY2UoImhyZWYiLCBpbmxpbmUuX2hyZWYpCiAgLnJlcGxhY2UoInRpdGxlIiwgaW5saW5lLl90aXRsZSkKICAuZ2V0UmVnZXgoKQoKaW5saW5lLnJlZmxpbmsgPSBlZGl0KGlubGluZS5yZWZsaW5rKQogIC5yZXBsYWNlKCJsYWJlbCIsIGlubGluZS5fbGFiZWwpCiAgLnJlcGxhY2UoInJlZiIsIGJsb2NrLl9sYWJlbCkKICAuZ2V0UmVnZXgoKQoKaW5saW5lLm5vbGluayA9IGVkaXQoaW5saW5lLm5vbGluaykucmVwbGFjZSgicmVmIiwgYmxvY2suX2xhYmVsKS5nZXRSZWdleCgpCgppbmxpbmUucmVmbGlua1NlYXJjaCA9IGVkaXQoaW5saW5lLnJlZmxpbmtTZWFyY2gsICJnIikKICAucmVwbGFjZSgicmVmbGluayIsIGlubGluZS5yZWZsaW5rKQogIC5yZXBsYWNlKCJub2xpbmsiLCBpbmxpbmUubm9saW5rKQogIC5nZXRSZWdleCgpCgovKioKICogTm9ybWFsIElubGluZSBHcmFtbWFyCiAqLwoKaW5saW5lLm5vcm1hbCA9IG1lcmdlKHt9LCBpbmxpbmUpCgovKioKICogUGVkYW50aWMgSW5saW5lIEdyYW1tYXIKICovCgppbmxpbmUucGVkYW50aWMgPSBtZXJnZSh7fSwgaW5saW5lLm5vcm1hbCwgewogIHN0cm9uZzogewogICAgc3RhcnQ6IC9eX198XCpcKi8sCiAgICBtaWRkbGU6IC9eX18oPz1cUykoW1xzXFNdKj9cUylfXyg/IV8pfF5cKlwqKD89XFMpKFtcc1xTXSo/XFMpXCpcKig/IVwqKS8sCiAgICBlbmRBc3Q6IC9cKlwqKD8hXCopL2csCiAgICBlbmRVbmQ6IC9fXyg/IV8pL2csCiAgfSwKICBlbTogewogICAgc3RhcnQ6IC9eX3xcKi8sCiAgICBtaWRkbGU6IC9eKClcKig/PVxTKShbXHNcU10qP1xTKVwqKD8hXCopfF5fKD89XFMpKFtcc1xTXSo/XFMpXyg/IV8pLywKICAgIGVuZEFzdDogL1wqKD8hXCopL2csCiAgICBlbmRVbmQ6IC9fKD8hXykvZywKICB9LAogIGxpbms6IGVkaXQoL14hP1xbKGxhYmVsKVxdXCgoLio/KVwpLykKICAgIC5yZXBsYWNlKCJsYWJlbCIsIGlubGluZS5fbGFiZWwpCiAgICAuZ2V0UmVnZXgoKSwKICByZWZsaW5rOiBlZGl0KC9eIT9cWyhsYWJlbClcXVxzKlxbKFteXF1dKilcXS8pCiAgICAucmVwbGFjZSgibGFiZWwiLCBpbmxpbmUuX2xhYmVsKQogICAgLmdldFJlZ2V4KCksCn0pCgovKioKICogR0ZNIElubGluZSBHcmFtbWFyCiAqLwoKaW5saW5lLmdmbSA9IG1lcmdlKHt9LCBpbmxpbmUubm9ybWFsLCB7CiAgZXNjYXBlOiBlZGl0KGlubGluZS5lc2NhcGUpLnJlcGxhY2UoIl0pIiwgIn58XSkiKS5nZXRSZWdleCgpLAogIF9leHRlbmRlZF9lbWFpbDoKICAgIC9bQS1aYS16MC05Ll8rLV0rKEApW2EtekEtWjAtOS1fXSsoPzpcLlthLXpBLVowLTktX10qW2EtekEtWjAtOV0pKyg/IVstX10pLywKICB1cmw6IC9eKCg/OmZ0cHxodHRwcz8pOlwvXC98d3d3XC4pKD86W2EtekEtWjAtOVwtXStcLj8pK1teXHM8XSp8XmVtYWlsLywKICBfYmFja3BlZGFsOgogICAgLyg/OltePyEuLDo7Kl9+KCkmXSt8XChbXildKlwpfCYoPyFbYS16QS1aMC05XSs7JCl8Wz8hLiw6OypffildKyg/ISQpKSsvLAogIGRlbDogL14ofn4/KSg/PVteXHN+XSkoW1xzXFNdKj9bXlxzfl0pXDEoPz1bXn5dfCQpLywKICB0ZXh0OiAvXihbYH5dK3xbXmB+XSkoPzooPz0gezIsfVxuKXwoPz1bYS16QS1aMC05LiEjJCUmJyorXC89P19ge1x8fX4tXStAKXxbXHNcU10qPyg/Oig/PVtcXDwhXFtgKn5fXXxcYl98aHR0cHM/OlwvXC98ZnRwOlwvXC98d3d3XC58JCl8W14gXSg/PSB7Mix9XG4pfFteYS16QS1aMC05LiEjJCUmJyorXC89P19ge1x8fX4tXSg/PVthLXpBLVowLTkuISMkJSYnKitcLz0/X2B7XHx9fi1dK0ApKSkvLAp9KQoKaW5saW5lLmdmbS51cmwgPSBlZGl0KGlubGluZS5nZm0udXJsLCAiaSIpCiAgLnJlcGxhY2UoImVtYWlsIiwgaW5saW5lLmdmbS5fZXh0ZW5kZWRfZW1haWwpCiAgLmdldFJlZ2V4KCkKLyoqCiAqIEdGTSArIExpbmUgQnJlYWtzIElubGluZSBHcmFtbWFyCiAqLwoKaW5saW5lLmJyZWFrcyA9IG1lcmdlKHt9LCBpbmxpbmUuZ2ZtLCB7CiAgYnI6IGVkaXQoaW5saW5lLmJyKS5yZXBsYWNlKCJ7Mix9IiwgIioiKS5nZXRSZWdleCgpLAogIHRleHQ6IGVkaXQoaW5saW5lLmdmbS50ZXh0KQogICAgLnJlcGxhY2UoIlxcYl8iLCAiXFxiX3wgezIsfVxcbiIpCiAgICAucmVwbGFjZSgvXHsyLFx9L2csICIqIikKICAgIC5nZXRSZWdleCgpLAp9KQoKLyoqCiAqIHNtYXJ0eXBhbnRzIHRleHQgcmVwbGFjZW1lbnQKICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICovCmZ1bmN0aW9uIHNtYXJ0eXBhbnRzKHRleHQpIHsKICByZXR1cm4gKAogICAgdGV4dAogICAgICAvLyBlbS1kYXNoZXMKICAgICAgLnJlcGxhY2UoLy0tLS9nLCAiXHUyMDE0IikKICAgICAgLy8gZW4tZGFzaGVzCiAgICAgIC5yZXBsYWNlKC8tLS9nLCAiXHUyMDEzIikKICAgICAgLy8gb3BlbmluZyBzaW5nbGVzCiAgICAgIC5yZXBsYWNlKC8oXnxbLVx1MjAxNC8oXFt7IlxzXSknL2csICIkMVx1MjAxOCIpCiAgICAgIC8vIGNsb3Npbmcgc2luZ2xlcyAmIGFwb3N0cm9waGVzCiAgICAgIC5yZXBsYWNlKC8nL2csICJcdTIwMTkiKQogICAgICAvLyBvcGVuaW5nIGRvdWJsZXMKICAgICAgLnJlcGxhY2UoLyhefFstXHUyMDE0LyhcW3tcdTIwMThcc10pIi9nLCAiJDFcdTIwMWMiKQogICAgICAvLyBjbG9zaW5nIGRvdWJsZXMKICAgICAgLnJlcGxhY2UoLyIvZywgIlx1MjAxZCIpCiAgICAgIC8vIGVsbGlwc2VzCiAgICAgIC5yZXBsYWNlKC9cLnszfS9nLCAiXHUyMDI2IikKICApCn0KCi8qKgogKiBtYW5nbGUgZW1haWwgYWRkcmVzc2VzCiAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAqLwpmdW5jdGlvbiBtYW5nbGUodGV4dCkgewogIGxldCBvdXQgPSAiIiwKICAgIGksCiAgICBjaAoKICBjb25zdCBsID0gdGV4dC5sZW5ndGgKICBmb3IgKGkgPSAwOyBpIDwgbDsgaSsrKSB7CiAgICBjaCA9IHRleHQuY2hhckNvZGVBdChpKQogICAgaWYgKE1hdGgucmFuZG9tKCkgPiAwLjUpIHsKICAgICAgY2ggPSAieCIgKyBjaC50b1N0cmluZygxNikKICAgIH0KICAgIG91dCArPSAiJiMiICsgY2ggKyAiOyIKICB9CgogIHJldHVybiBvdXQKfQoKLyoqCiAqIEJsb2NrIExleGVyCiAqLwpjbGFzcyBMZXhlciB7CiAgY29uc3RydWN0b3Iob3B0aW9ucykgewogICAgdGhpcy50b2tlbnMgPSBbXQogICAgdGhpcy50b2tlbnMubGlua3MgPSBPYmplY3QuY3JlYXRlKG51bGwpCiAgICB0aGlzLm9wdGlvbnMgPSBvcHRpb25zIHx8IGRlZmF1bHRzCiAgICB0aGlzLm9wdGlvbnMudG9rZW5pemVyID0gdGhpcy5vcHRpb25zLnRva2VuaXplciB8fCBuZXcgVG9rZW5pemVyKCkKICAgIHRoaXMudG9rZW5pemVyID0gdGhpcy5vcHRpb25zLnRva2VuaXplcgogICAgdGhpcy50b2tlbml6ZXIub3B0aW9ucyA9IHRoaXMub3B0aW9ucwogICAgdGhpcy50b2tlbml6ZXIubGV4ZXIgPSB0aGlzCiAgICB0aGlzLmlubGluZVF1ZXVlID0gW10KICAgIHRoaXMuc3RhdGUgPSB7CiAgICAgIGluTGluazogZmFsc2UsCiAgICAgIGluUmF3QmxvY2s6IGZhbHNlLAogICAgICB0b3A6IHRydWUsCiAgICB9CgogICAgY29uc3QgcnVsZXMgPSB7CiAgICAgIGJsb2NrOiBibG9jay5ub3JtYWwsCiAgICAgIGlubGluZTogaW5saW5lLm5vcm1hbCwKICAgIH0KCiAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljKSB7CiAgICAgIHJ1bGVzLmJsb2NrID0gYmxvY2sucGVkYW50aWMKICAgICAgcnVsZXMuaW5saW5lID0gaW5saW5lLnBlZGFudGljCiAgICB9IGVsc2UgaWYgKHRoaXMub3B0aW9ucy5nZm0pIHsKICAgICAgcnVsZXMuYmxvY2sgPSBibG9jay5nZm0KICAgICAgaWYgKHRoaXMub3B0aW9ucy5icmVha3MpIHsKICAgICAgICBydWxlcy5pbmxpbmUgPSBpbmxpbmUuYnJlYWtzCiAgICAgIH0gZWxzZSB7CiAgICAgICAgcnVsZXMuaW5saW5lID0gaW5saW5lLmdmbQogICAgICB9CiAgICB9CiAgICB0aGlzLnRva2VuaXplci5ydWxlcyA9IHJ1bGVzCiAgfQoKICAvKioKICAgKiBFeHBvc2UgUnVsZXMKICAgKi8KICBzdGF0aWMgZ2V0IHJ1bGVzKCkgewogICAgcmV0dXJuIHsKICAgICAgYmxvY2ssCiAgICAgIGlubGluZSwKICAgIH0KICB9CgogIC8qKgogICAqIFN0YXRpYyBMZXggTWV0aG9kCiAgICovCiAgc3RhdGljIGxleChzcmMsIG9wdGlvbnMpIHsKICAgIGNvbnN0IGxleGVyID0gbmV3IExleGVyKG9wdGlvbnMpCiAgICByZXR1cm4gbGV4ZXIubGV4KHNyYykKICB9CgogIC8qKgogICAqIFN0YXRpYyBMZXggSW5saW5lIE1ldGhvZAogICAqLwogIHN0YXRpYyBsZXhJbmxpbmUoc3JjLCBvcHRpb25zKSB7CiAgICBjb25zdCBsZXhlciA9IG5ldyBMZXhlcihvcHRpb25zKQogICAgcmV0dXJuIGxleGVyLmlubGluZVRva2VucyhzcmMpCiAgfQoKICAvKioKICAgKiBQcmVwcm9jZXNzaW5nCiAgICovCiAgbGV4KHNyYykgewogICAgc3JjID0gc3JjLnJlcGxhY2UoL1xyXG58XHIvZywgIlxuIikKCiAgICB0aGlzLmJsb2NrVG9rZW5zKHNyYywgdGhpcy50b2tlbnMpCgogICAgbGV0IG5leHQKICAgIHdoaWxlICgobmV4dCA9IHRoaXMuaW5saW5lUXVldWUuc2hpZnQoKSkpIHsKICAgICAgdGhpcy5pbmxpbmVUb2tlbnMobmV4dC5zcmMsIG5leHQudG9rZW5zKQogICAgfQoKICAgIHJldHVybiB0aGlzLnRva2VucwogIH0KCiAgLyoqCiAgICogTGV4aW5nCiAgICovCiAgYmxvY2tUb2tlbnMoc3JjLCB0b2tlbnMgPSBbXSkgewogICAgaWYgKHRoaXMub3B0aW9ucy5wZWRhbnRpYykgewogICAgICBzcmMgPSBzcmMucmVwbGFjZSgvXHQvZywgIiAgICAiKS5yZXBsYWNlKC9eICskL2dtLCAiIikKICAgIH0gZWxzZSB7CiAgICAgIHNyYyA9IHNyYy5yZXBsYWNlKC9eKCAqKShcdCspL2dtLCAoXywgbGVhZGluZywgdGFicykgPT4gewogICAgICAgIHJldHVybiBsZWFkaW5nICsgIiAgICAiLnJlcGVhdCh0YWJzLmxlbmd0aCkKICAgICAgfSkKICAgIH0KCiAgICBsZXQgdG9rZW4sIGxhc3RUb2tlbiwgY3V0U3JjLCBsYXN0UGFyYWdyYXBoQ2xpcHBlZAoKICAgIHdoaWxlIChzcmMpIHsKICAgICAgaWYgKAogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zICYmCiAgICAgICAgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMuYmxvY2sgJiYKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucy5ibG9jay5zb21lKGV4dFRva2VuaXplciA9PiB7CiAgICAgICAgICBpZiAoKHRva2VuID0gZXh0VG9rZW5pemVyLmNhbGwoeyBsZXhlcjogdGhpcyB9LCBzcmMsIHRva2VucykpKSB7CiAgICAgICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgICAgIHJldHVybiB0cnVlCiAgICAgICAgICB9CiAgICAgICAgICByZXR1cm4gZmFsc2UKICAgICAgICB9KQogICAgICApIHsKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBuZXdsaW5lCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5zcGFjZShzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBpZiAodG9rZW4ucmF3Lmxlbmd0aCA9PT0gMSAmJiB0b2tlbnMubGVuZ3RoID4gMCkgewogICAgICAgICAgLy8gaWYgdGhlcmUncyBhIHNpbmdsZSBcbiBhcyBhIHNwYWNlciwgaXQncyB0ZXJtaW5hdGluZyB0aGUgbGFzdCBsaW5lLAogICAgICAgICAgLy8gc28gbW92ZSBpdCB0aGVyZSBzbyB0aGF0IHdlIGRvbid0IGdldCB1bmVjZXNzYXJ5IHBhcmFncmFwaCB0YWdzCiAgICAgICAgICB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdLnJhdyArPSAiXG4iCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIH0KICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBjb2RlCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5jb2RlKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIGxhc3RUb2tlbiA9IHRva2Vuc1t0b2tlbnMubGVuZ3RoIC0gMV0KICAgICAgICAvLyBBbiBpbmRlbnRlZCBjb2RlIGJsb2NrIGNhbm5vdCBpbnRlcnJ1cHQgYSBwYXJhZ3JhcGguCiAgICAgICAgaWYgKAogICAgICAgICAgbGFzdFRva2VuICYmCiAgICAgICAgICAobGFzdFRva2VuLnR5cGUgPT09ICJwYXJhZ3JhcGgiIHx8IGxhc3RUb2tlbi50eXBlID09PSAidGV4dCIpCiAgICAgICAgKSB7CiAgICAgICAgICBsYXN0VG9rZW4ucmF3ICs9ICJcbiIgKyB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9ICJcbiIgKyB0b2tlbi50ZXh0CiAgICAgICAgICB0aGlzLmlubGluZVF1ZXVlW3RoaXMuaW5saW5lUXVldWUubGVuZ3RoIC0gMV0uc3JjID0gbGFzdFRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGZlbmNlcwogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIuZmVuY2VzKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGhlYWRpbmcKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmhlYWRpbmcoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gaHIKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmhyKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGJsb2NrcXVvdGUKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmJsb2NrcXVvdGUoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gbGlzdAogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIubGlzdChzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBodG1sCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5odG1sKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGRlZgogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIuZGVmKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIGxhc3RUb2tlbiA9IHRva2Vuc1t0b2tlbnMubGVuZ3RoIC0gMV0KICAgICAgICBpZiAoCiAgICAgICAgICBsYXN0VG9rZW4gJiYKICAgICAgICAgIChsYXN0VG9rZW4udHlwZSA9PT0gInBhcmFncmFwaCIgfHwgbGFzdFRva2VuLnR5cGUgPT09ICJ0ZXh0IikKICAgICAgICApIHsKICAgICAgICAgIGxhc3RUb2tlbi5yYXcgKz0gIlxuIiArIHRva2VuLnJhdwogICAgICAgICAgbGFzdFRva2VuLnRleHQgKz0gIlxuIiArIHRva2VuLnJhdwogICAgICAgICAgdGhpcy5pbmxpbmVRdWV1ZVt0aGlzLmlubGluZVF1ZXVlLmxlbmd0aCAtIDFdLnNyYyA9IGxhc3RUb2tlbi50ZXh0CiAgICAgICAgfSBlbHNlIGlmICghdGhpcy50b2tlbnMubGlua3NbdG9rZW4udGFnXSkgewogICAgICAgICAgdGhpcy50b2tlbnMubGlua3NbdG9rZW4udGFnXSA9IHsKICAgICAgICAgICAgaHJlZjogdG9rZW4uaHJlZiwKICAgICAgICAgICAgdGl0bGU6IHRva2VuLnRpdGxlLAogICAgICAgICAgfQogICAgICAgIH0KICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyB0YWJsZSAoZ2ZtKQogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIudGFibGUoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gbGhlYWRpbmcKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmxoZWFkaW5nKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIHRvcC1sZXZlbCBwYXJhZ3JhcGgKICAgICAgLy8gcHJldmVudCBwYXJhZ3JhcGggY29uc3VtaW5nIGV4dGVuc2lvbnMgYnkgY2xpcHBpbmcgJ3NyYycgdG8gZXh0ZW5zaW9uIHN0YXJ0CiAgICAgIGN1dFNyYyA9IHNyYwogICAgICBpZiAodGhpcy5vcHRpb25zLmV4dGVuc2lvbnMgJiYgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMuc3RhcnRCbG9jaykgewogICAgICAgIGxldCBzdGFydEluZGV4ID0gSW5maW5pdHkKICAgICAgICBjb25zdCB0ZW1wU3JjID0gc3JjLnNsaWNlKDEpCiAgICAgICAgbGV0IHRlbXBTdGFydAogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnN0YXJ0QmxvY2suZm9yRWFjaChmdW5jdGlvbiAoZ2V0U3RhcnRJbmRleCkgewogICAgICAgICAgdGVtcFN0YXJ0ID0gZ2V0U3RhcnRJbmRleC5jYWxsKHsgbGV4ZXI6IHRoaXMgfSwgdGVtcFNyYykKICAgICAgICAgIGlmICh0eXBlb2YgdGVtcFN0YXJ0ID09PSAibnVtYmVyIiAmJiB0ZW1wU3RhcnQgPj0gMCkgewogICAgICAgICAgICBzdGFydEluZGV4ID0gTWF0aC5taW4oc3RhcnRJbmRleCwgdGVtcFN0YXJ0KQogICAgICAgICAgfQogICAgICAgIH0pCiAgICAgICAgaWYgKHN0YXJ0SW5kZXggPCBJbmZpbml0eSAmJiBzdGFydEluZGV4ID49IDApIHsKICAgICAgICAgIGN1dFNyYyA9IHNyYy5zdWJzdHJpbmcoMCwgc3RhcnRJbmRleCArIDEpCiAgICAgICAgfQogICAgICB9CiAgICAgIGlmICh0aGlzLnN0YXRlLnRvcCAmJiAodG9rZW4gPSB0aGlzLnRva2VuaXplci5wYXJhZ3JhcGgoY3V0U3JjKSkpIHsKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RQYXJhZ3JhcGhDbGlwcGVkICYmIGxhc3RUb2tlbi50eXBlID09PSAicGFyYWdyYXBoIikgewogICAgICAgICAgbGFzdFRva2VuLnJhdyArPSAiXG4iICsgdG9rZW4ucmF3CiAgICAgICAgICBsYXN0VG9rZW4udGV4dCArPSAiXG4iICsgdG9rZW4udGV4dAogICAgICAgICAgdGhpcy5pbmxpbmVRdWV1ZS5wb3AoKQogICAgICAgICAgdGhpcy5pbmxpbmVRdWV1ZVt0aGlzLmlubGluZVF1ZXVlLmxlbmd0aCAtIDFdLnNyYyA9IGxhc3RUb2tlbi50ZXh0CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIH0KICAgICAgICBsYXN0UGFyYWdyYXBoQ2xpcHBlZCA9IGN1dFNyYy5sZW5ndGggIT09IHNyYy5sZW5ndGgKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gdGV4dAogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIudGV4dChzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RUb2tlbiAmJiBsYXN0VG9rZW4udHlwZSA9PT0gInRleHQiKSB7CiAgICAgICAgICBsYXN0VG9rZW4ucmF3ICs9ICJcbiIgKyB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9ICJcbiIgKyB0b2tlbi50ZXh0CiAgICAgICAgICB0aGlzLmlubGluZVF1ZXVlLnBvcCgpCiAgICAgICAgICB0aGlzLmlubGluZVF1ZXVlW3RoaXMuaW5saW5lUXVldWUubGVuZ3RoIC0gMV0uc3JjID0gbGFzdFRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIGlmIChzcmMpIHsKICAgICAgICBjb25zdCBlcnJNc2cgPSAiSW5maW5pdGUgbG9vcCBvbiBieXRlOiAiICsgc3JjLmNoYXJDb2RlQXQoMCkKICAgICAgICBpZiAodGhpcy5vcHRpb25zLnNpbGVudCkgewogICAgICAgICAgY29uc29sZS5lcnJvcihlcnJNc2cpCiAgICAgICAgICBicmVhawogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoZXJyTXNnKQogICAgICAgIH0KICAgICAgfQogICAgfQoKICAgIHRoaXMuc3RhdGUudG9wID0gdHJ1ZQogICAgcmV0dXJuIHRva2VucwogIH0KCiAgaW5saW5lKHNyYywgdG9rZW5zKSB7CiAgICB0aGlzLmlubGluZVF1ZXVlLnB1c2goeyBzcmMsIHRva2VucyB9KQogIH0KCiAgLyoqCiAgICogTGV4aW5nL0NvbXBpbGluZwogICAqLwogIGlubGluZVRva2VucyhzcmMsIHRva2VucyA9IFtdKSB7CiAgICBsZXQgdG9rZW4sIGxhc3RUb2tlbiwgY3V0U3JjCgogICAgLy8gU3RyaW5nIHdpdGggbGlua3MgbWFza2VkIHRvIGF2b2lkIGludGVyZmVyZW5jZSB3aXRoIGVtIGFuZCBzdHJvbmcKICAgIGxldCBtYXNrZWRTcmMgPSBzcmMKICAgIGxldCBtYXRjaAogICAgbGV0IGtlZXBQcmV2Q2hhciwgcHJldkNoYXIKCiAgICAvLyBNYXNrIG91dCByZWZsaW5rcwogICAgaWYgKHRoaXMudG9rZW5zLmxpbmtzKSB7CiAgICAgIGNvbnN0IGxpbmtzID0gT2JqZWN0LmtleXModGhpcy50b2tlbnMubGlua3MpCiAgICAgIGlmIChsaW5rcy5sZW5ndGggPiAwKSB7CiAgICAgICAgd2hpbGUgKAogICAgICAgICAgKG1hdGNoID0gdGhpcy50b2tlbml6ZXIucnVsZXMuaW5saW5lLnJlZmxpbmtTZWFyY2guZXhlYyhtYXNrZWRTcmMpKSAhPQogICAgICAgICAgbnVsbAogICAgICAgICkgewogICAgICAgICAgaWYgKAogICAgICAgICAgICBsaW5rcy5pbmNsdWRlcyhtYXRjaFswXS5zbGljZShtYXRjaFswXS5sYXN0SW5kZXhPZigiWyIpICsgMSwgLTEpKQogICAgICAgICAgKSB7CiAgICAgICAgICAgIG1hc2tlZFNyYyA9CiAgICAgICAgICAgICAgbWFza2VkU3JjLnNsaWNlKDAsIG1hdGNoLmluZGV4KSArCiAgICAgICAgICAgICAgIlsiICsKICAgICAgICAgICAgICByZXBlYXRTdHJpbmcoImEiLCBtYXRjaFswXS5sZW5ndGggLSAyKSArCiAgICAgICAgICAgICAgIl0iICsKICAgICAgICAgICAgICBtYXNrZWRTcmMuc2xpY2UoCiAgICAgICAgICAgICAgICB0aGlzLnRva2VuaXplci5ydWxlcy5pbmxpbmUucmVmbGlua1NlYXJjaC5sYXN0SW5kZXgKICAgICAgICAgICAgICApCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgICAvLyBNYXNrIG91dCBvdGhlciBibG9ja3MKICAgIHdoaWxlICgKICAgICAgKG1hdGNoID0gdGhpcy50b2tlbml6ZXIucnVsZXMuaW5saW5lLmJsb2NrU2tpcC5leGVjKG1hc2tlZFNyYykpICE9IG51bGwKICAgICkgewogICAgICBtYXNrZWRTcmMgPQogICAgICAgIG1hc2tlZFNyYy5zbGljZSgwLCBtYXRjaC5pbmRleCkgKwogICAgICAgICJbIiArCiAgICAgICAgcmVwZWF0U3RyaW5nKCJhIiwgbWF0Y2hbMF0ubGVuZ3RoIC0gMikgKwogICAgICAgICJdIiArCiAgICAgICAgbWFza2VkU3JjLnNsaWNlKHRoaXMudG9rZW5pemVyLnJ1bGVzLmlubGluZS5ibG9ja1NraXAubGFzdEluZGV4KQogICAgfQoKICAgIC8vIE1hc2sgb3V0IGVzY2FwZWQgZW0gJiBzdHJvbmcgZGVsaW1pdGVycwogICAgd2hpbGUgKAogICAgICAobWF0Y2ggPSB0aGlzLnRva2VuaXplci5ydWxlcy5pbmxpbmUuZXNjYXBlZEVtU3QuZXhlYyhtYXNrZWRTcmMpKSAhPSBudWxsCiAgICApIHsKICAgICAgbWFza2VkU3JjID0KICAgICAgICBtYXNrZWRTcmMuc2xpY2UoMCwgbWF0Y2guaW5kZXgpICsKICAgICAgICAiKysiICsKICAgICAgICBtYXNrZWRTcmMuc2xpY2UodGhpcy50b2tlbml6ZXIucnVsZXMuaW5saW5lLmVzY2FwZWRFbVN0Lmxhc3RJbmRleCkKICAgIH0KCiAgICB3aGlsZSAoc3JjKSB7CiAgICAgIGlmICgha2VlcFByZXZDaGFyKSB7CiAgICAgICAgcHJldkNoYXIgPSAiIgogICAgICB9CiAgICAgIGtlZXBQcmV2Q2hhciA9IGZhbHNlCgogICAgICAvLyBleHRlbnNpb25zCiAgICAgIGlmICgKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucyAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLmlubGluZSAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLmlubGluZS5zb21lKGV4dFRva2VuaXplciA9PiB7CiAgICAgICAgICBpZiAoKHRva2VuID0gZXh0VG9rZW5pemVyLmNhbGwoeyBsZXhlcjogdGhpcyB9LCBzcmMsIHRva2VucykpKSB7CiAgICAgICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgICAgIHJldHVybiB0cnVlCiAgICAgICAgICB9CiAgICAgICAgICByZXR1cm4gZmFsc2UKICAgICAgICB9KQogICAgICApIHsKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBlc2NhcGUKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmVzY2FwZShzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyB0YWcKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLnRhZyhzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RUb2tlbiAmJiB0b2tlbi50eXBlID09PSAidGV4dCIgJiYgbGFzdFRva2VuLnR5cGUgPT09ICJ0ZXh0IikgewogICAgICAgICAgbGFzdFRva2VuLnJhdyArPSB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9IHRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGxpbmsKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmxpbmsoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gcmVmbGluaywgbm9saW5rCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5yZWZsaW5rKHNyYywgdGhpcy50b2tlbnMubGlua3MpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RUb2tlbiAmJiB0b2tlbi50eXBlID09PSAidGV4dCIgJiYgbGFzdFRva2VuLnR5cGUgPT09ICJ0ZXh0IikgewogICAgICAgICAgbGFzdFRva2VuLnJhdyArPSB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9IHRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGVtICYgc3Ryb25nCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5lbVN0cm9uZyhzcmMsIG1hc2tlZFNyYywgcHJldkNoYXIpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBjb2RlCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5jb2Rlc3BhbihzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBicgogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIuYnIoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gZGVsIChnZm0pCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5kZWwoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gYXV0b2xpbmsKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmF1dG9saW5rKHNyYywgbWFuZ2xlKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gdXJsIChnZm0pCiAgICAgIGlmICghdGhpcy5zdGF0ZS5pbkxpbmsgJiYgKHRva2VuID0gdGhpcy50b2tlbml6ZXIudXJsKHNyYywgbWFuZ2xlKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gdGV4dAogICAgICAvLyBwcmV2ZW50IGlubGluZVRleHQgY29uc3VtaW5nIGV4dGVuc2lvbnMgYnkgY2xpcHBpbmcgJ3NyYycgdG8gZXh0ZW5zaW9uIHN0YXJ0CiAgICAgIGN1dFNyYyA9IHNyYwogICAgICBpZiAodGhpcy5vcHRpb25zLmV4dGVuc2lvbnMgJiYgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMuc3RhcnRJbmxpbmUpIHsKICAgICAgICBsZXQgc3RhcnRJbmRleCA9IEluZmluaXR5CiAgICAgICAgY29uc3QgdGVtcFNyYyA9IHNyYy5zbGljZSgxKQogICAgICAgIGxldCB0ZW1wU3RhcnQKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucy5zdGFydElubGluZS5mb3JFYWNoKGZ1bmN0aW9uIChnZXRTdGFydEluZGV4KSB7CiAgICAgICAgICB0ZW1wU3RhcnQgPSBnZXRTdGFydEluZGV4LmNhbGwoeyBsZXhlcjogdGhpcyB9LCB0ZW1wU3JjKQogICAgICAgICAgaWYgKHR5cGVvZiB0ZW1wU3RhcnQgPT09ICJudW1iZXIiICYmIHRlbXBTdGFydCA+PSAwKSB7CiAgICAgICAgICAgIHN0YXJ0SW5kZXggPSBNYXRoLm1pbihzdGFydEluZGV4LCB0ZW1wU3RhcnQpCiAgICAgICAgICB9CiAgICAgICAgfSkKICAgICAgICBpZiAoc3RhcnRJbmRleCA8IEluZmluaXR5ICYmIHN0YXJ0SW5kZXggPj0gMCkgewogICAgICAgICAgY3V0U3JjID0gc3JjLnN1YnN0cmluZygwLCBzdGFydEluZGV4ICsgMSkKICAgICAgICB9CiAgICAgIH0KICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmlubGluZVRleHQoY3V0U3JjLCBzbWFydHlwYW50cykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIGlmICh0b2tlbi5yYXcuc2xpY2UoLTEpICE9PSAiXyIpIHsKICAgICAgICAgIC8vIFRyYWNrIHByZXZDaGFyIGJlZm9yZSBzdHJpbmcgb2YgX19fXyBzdGFydGVkCiAgICAgICAgICBwcmV2Q2hhciA9IHRva2VuLnJhdy5zbGljZSgtMSkKICAgICAgICB9CiAgICAgICAga2VlcFByZXZDaGFyID0gdHJ1ZQogICAgICAgIGxhc3RUb2tlbiA9IHRva2Vuc1t0b2tlbnMubGVuZ3RoIC0gMV0KICAgICAgICBpZiAobGFzdFRva2VuICYmIGxhc3RUb2tlbi50eXBlID09PSAidGV4dCIpIHsKICAgICAgICAgIGxhc3RUb2tlbi5yYXcgKz0gdG9rZW4ucmF3CiAgICAgICAgICBsYXN0VG9rZW4udGV4dCArPSB0b2tlbi50ZXh0CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIH0KICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICBpZiAoc3JjKSB7CiAgICAgICAgY29uc3QgZXJyTXNnID0gIkluZmluaXRlIGxvb3Agb24gYnl0ZTogIiArIHNyYy5jaGFyQ29kZUF0KDApCiAgICAgICAgaWYgKHRoaXMub3B0aW9ucy5zaWxlbnQpIHsKICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZXJyTXNnKQogICAgICAgICAgYnJlYWsKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdGhyb3cgbmV3IEVycm9yKGVyck1zZykKICAgICAgICB9CiAgICAgIH0KICAgIH0KCiAgICByZXR1cm4gdG9rZW5zCiAgfQp9CgovKioKICogUmVuZGVyZXIKICovCmNsYXNzIFJlbmRlcmVyIHsKICBjb25zdHJ1Y3RvcihvcHRpb25zKSB7CiAgICB0aGlzLm9wdGlvbnMgPSBvcHRpb25zIHx8IGRlZmF1bHRzCiAgfQoKICBjb2RlKGNvZGUsIGluZm9zdHJpbmcsIGVzY2FwZWQpIHsKICAgIGNvbnN0IGxhbmcgPSAoaW5mb3N0cmluZyB8fCAiIikubWF0Y2goL1xTKi8pWzBdCiAgICBpZiAodGhpcy5vcHRpb25zLmhpZ2hsaWdodCkgewogICAgICBjb25zdCBvdXQgPSB0aGlzLm9wdGlvbnMuaGlnaGxpZ2h0KGNvZGUsIGxhbmcpCiAgICAgIGlmIChvdXQgIT0gbnVsbCAmJiBvdXQgIT09IGNvZGUpIHsKICAgICAgICBlc2NhcGVkID0gdHJ1ZQogICAgICAgIGNvZGUgPSBvdXQKICAgICAgfQogICAgfQoKICAgIGNvZGUgPSBjb2RlLnJlcGxhY2UoL1xuJC8sICIiKSArICJcbiIKCiAgICBpZiAoIWxhbmcpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAiPHByZT48Y29kZT4iICsKICAgICAgICAoZXNjYXBlZCA/IGNvZGUgOiBlc2NhcGUoY29kZSwgdHJ1ZSkpICsKICAgICAgICAiPC9jb2RlPjwvcHJlPlxuIgogICAgICApCiAgICB9CgogICAgcmV0dXJuICgKICAgICAgJzxwcmU+PGNvZGUgY2xhc3M9IicgKwogICAgICB0aGlzLm9wdGlvbnMubGFuZ1ByZWZpeCArCiAgICAgIGVzY2FwZShsYW5nLCB0cnVlKSArCiAgICAgICciPicgKwogICAgICAoZXNjYXBlZCA/IGNvZGUgOiBlc2NhcGUoY29kZSwgdHJ1ZSkpICsKICAgICAgIjwvY29kZT48L3ByZT5cbiIKICAgICkKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSBxdW90ZQogICAqLwogIGJsb2NrcXVvdGUocXVvdGUpIHsKICAgIHJldHVybiBgPGJsb2NrcXVvdGU+XG4ke3F1b3RlfTwvYmxvY2txdW90ZT5cbmAKICB9CgogIGh0bWwoaHRtbCkgewogICAgcmV0dXJuIGh0bWwKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICogQHBhcmFtIHtzdHJpbmd9IGxldmVsCiAgICogQHBhcmFtIHtzdHJpbmd9IHJhdwogICAqIEBwYXJhbSB7YW55fSBzbHVnZ2VyCiAgICovCiAgaGVhZGluZyh0ZXh0LCBsZXZlbCwgcmF3LCBzbHVnZ2VyKSB7CiAgICBpZiAodGhpcy5vcHRpb25zLmhlYWRlcklkcykgewogICAgICBjb25zdCBpZCA9IHRoaXMub3B0aW9ucy5oZWFkZXJQcmVmaXggKyBzbHVnZ2VyLnNsdWcocmF3KQogICAgICByZXR1cm4gYDxoJHtsZXZlbH0gaWQ9IiR7aWR9Ij4ke3RleHR9PC9oJHtsZXZlbH0+XG5gCiAgICB9CgogICAgLy8gaWdub3JlIElEcwogICAgcmV0dXJuIGA8aCR7bGV2ZWx9PiR7dGV4dH08L2gke2xldmVsfT5cbmAKICB9CgogIGhyKCkgewogICAgcmV0dXJuIHRoaXMub3B0aW9ucy54aHRtbCA/ICI8aHIvPlxuIiA6ICI8aHI+XG4iCiAgfQoKICBsaXN0KGJvZHksIG9yZGVyZWQsIHN0YXJ0KSB7CiAgICBjb25zdCB0eXBlID0gb3JkZXJlZCA/ICJvbCIgOiAidWwiLAogICAgICBzdGFydGF0dCA9IG9yZGVyZWQgJiYgc3RhcnQgIT09IDEgPyAnIHN0YXJ0PSInICsgc3RhcnQgKyAnIicgOiAiIgogICAgcmV0dXJuICI8IiArIHR5cGUgKyBzdGFydGF0dCArICI+XG4iICsgYm9keSArICI8LyIgKyB0eXBlICsgIj5cbiIKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICovCiAgbGlzdGl0ZW0odGV4dCkgewogICAgcmV0dXJuIGA8bGk+JHt0ZXh0fTwvbGk+XG5gCiAgfQoKICBjaGVja2JveChjaGVja2VkKSB7CiAgICByZXR1cm4gKAogICAgICAiPGlucHV0ICIgKwogICAgICAoY2hlY2tlZCA/ICdjaGVja2VkPSIiICcgOiAiIikgKwogICAgICAnZGlzYWJsZWQ9IiIgdHlwZT0iY2hlY2tib3giJyArCiAgICAgICh0aGlzLm9wdGlvbnMueGh0bWwgPyAiIC8iIDogIiIpICsKICAgICAgIj4gIgogICAgKQogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBwYXJhZ3JhcGgodGV4dCkgewogICAgcmV0dXJuIGA8cD4ke3RleHR9PC9wPlxuYAogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IGhlYWRlcgogICAqIEBwYXJhbSB7c3RyaW5nfSBib2R5CiAgICovCiAgdGFibGUoaGVhZGVyLCBib2R5KSB7CiAgICBpZiAoYm9keSkgYm9keSA9IGA8dGJvZHk+JHtib2R5fTwvdGJvZHk+YAoKICAgIHJldHVybiAoCiAgICAgICI8dGFibGU+XG4iICsgIjx0aGVhZD5cbiIgKyBoZWFkZXIgKyAiPC90aGVhZD5cbiIgKyBib2R5ICsgIjwvdGFibGU+XG4iCiAgICApCiAgfQoKICAvKioKICAgKiBAcGFyYW0ge3N0cmluZ30gY29udGVudAogICAqLwogIHRhYmxlcm93KGNvbnRlbnQpIHsKICAgIHJldHVybiBgPHRyPlxuJHtjb250ZW50fTwvdHI+XG5gCiAgfQoKICB0YWJsZWNlbGwoY29udGVudCwgZmxhZ3MpIHsKICAgIGNvbnN0IHR5cGUgPSBmbGFncy5oZWFkZXIgPyAidGgiIDogInRkIgogICAgY29uc3QgdGFnID0gZmxhZ3MuYWxpZ24gPyBgPCR7dHlwZX0gYWxpZ249IiR7ZmxhZ3MuYWxpZ259Ij5gIDogYDwke3R5cGV9PmAKICAgIHJldHVybiB0YWcgKyBjb250ZW50ICsgYDwvJHt0eXBlfT5cbmAKICB9CgogIC8qKgogICAqIHNwYW4gbGV2ZWwgcmVuZGVyZXIKICAgKiBAcGFyYW0ge3N0cmluZ30gdGV4dAogICAqLwogIHN0cm9uZyh0ZXh0KSB7CiAgICByZXR1cm4gYDxzdHJvbmc+JHt0ZXh0fTwvc3Ryb25nPmAKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICovCiAgZW0odGV4dCkgewogICAgcmV0dXJuIGA8ZW0+JHt0ZXh0fTwvZW0+YAogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBjb2Rlc3Bhbih0ZXh0KSB7CiAgICByZXR1cm4gYDxjb2RlPiR7dGV4dH08L2NvZGU+YAogIH0KCiAgYnIoKSB7CiAgICByZXR1cm4gdGhpcy5vcHRpb25zLnhodG1sID8gIjxici8+IiA6ICI8YnI+IgogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBkZWwodGV4dCkgewogICAgcmV0dXJuIGA8ZGVsPiR7dGV4dH08L2RlbD5gCiAgfQoKICAvKioKICAgKiBAcGFyYW0ge3N0cmluZ30gaHJlZgogICAqIEBwYXJhbSB7c3RyaW5nfSB0aXRsZQogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICovCiAgbGluayhocmVmLCB0aXRsZSwgdGV4dCkgewogICAgaHJlZiA9IGNsZWFuVXJsKHRoaXMub3B0aW9ucy5zYW5pdGl6ZSwgdGhpcy5vcHRpb25zLmJhc2VVcmwsIGhyZWYpCiAgICBpZiAoaHJlZiA9PT0gbnVsbCkgewogICAgICByZXR1cm4gdGV4dAogICAgfQogICAgbGV0IG91dCA9ICc8YSBocmVmPSInICsgZXNjYXBlKGhyZWYpICsgJyInCiAgICBpZiAodGl0bGUpIHsKICAgICAgb3V0ICs9ICcgdGl0bGU9IicgKyB0aXRsZSArICciJwogICAgfQogICAgb3V0ICs9ICI+IiArIHRleHQgKyAiPC9hPiIKICAgIHJldHVybiBvdXQKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSBocmVmCiAgICogQHBhcmFtIHtzdHJpbmd9IHRpdGxlCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBpbWFnZShocmVmLCB0aXRsZSwgdGV4dCkgewogICAgaHJlZiA9IGNsZWFuVXJsKHRoaXMub3B0aW9ucy5zYW5pdGl6ZSwgdGhpcy5vcHRpb25zLmJhc2VVcmwsIGhyZWYpCiAgICBpZiAoaHJlZiA9PT0gbnVsbCkgewogICAgICByZXR1cm4gdGV4dAogICAgfQoKICAgIGxldCBvdXQgPSBgPGltZyBzcmM9IiR7aHJlZn0iIGFsdD0iJHt0ZXh0fSJgCiAgICBpZiAodGl0bGUpIHsKICAgICAgb3V0ICs9IGAgdGl0bGU9IiR7dGl0bGV9ImAKICAgIH0KICAgIG91dCArPSB0aGlzLm9wdGlvbnMueGh0bWwgPyAiLz4iIDogIj4iCiAgICByZXR1cm4gb3V0CiAgfQoKICB0ZXh0KHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQp9CgovKioKICogVGV4dFJlbmRlcmVyCiAqIHJldHVybnMgb25seSB0aGUgdGV4dHVhbCBwYXJ0IG9mIHRoZSB0b2tlbgogKi8KY2xhc3MgVGV4dFJlbmRlcmVyIHsKICAvLyBubyBuZWVkIGZvciBibG9jayBsZXZlbCByZW5kZXJlcnMKICBzdHJvbmcodGV4dCkgewogICAgcmV0dXJuIHRleHQKICB9CgogIGVtKHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBjb2Rlc3Bhbih0ZXh0KSB7CiAgICByZXR1cm4gdGV4dAogIH0KCiAgZGVsKHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBodG1sKHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICB0ZXh0KHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBsaW5rKGhyZWYsIHRpdGxlLCB0ZXh0KSB7CiAgICByZXR1cm4gIiIgKyB0ZXh0CiAgfQoKICBpbWFnZShocmVmLCB0aXRsZSwgdGV4dCkgewogICAgcmV0dXJuICIiICsgdGV4dAogIH0KCiAgYnIoKSB7CiAgICByZXR1cm4gIiIKICB9Cn0KCi8qKgogKiBTbHVnZ2VyIGdlbmVyYXRlcyBoZWFkZXIgaWQKICovCmNsYXNzIFNsdWdnZXIgewogIGNvbnN0cnVjdG9yKCkgewogICAgdGhpcy5zZWVuID0ge30KICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB2YWx1ZQogICAqLwogIHNlcmlhbGl6ZSh2YWx1ZSkgewogICAgcmV0dXJuICgKICAgICAgdmFsdWUKICAgICAgICAudG9Mb3dlckNhc2UoKQogICAgICAgIC50cmltKCkKICAgICAgICAvLyByZW1vdmUgaHRtbCB0YWdzCiAgICAgICAgLnJlcGxhY2UoLzxbIVwvYS16XS4qPz4vZ2ksICIiKQogICAgICAgIC8vIHJlbW92ZSB1bndhbnRlZCBjaGFycwogICAgICAgIC5yZXBsYWNlKAogICAgICAgICAgL1tcdTIwMDAtXHUyMDZGXHUyRTAwLVx1MkU3RlxcJyEiIyQlJigpKissLi86Ozw9Pj9AW1xdXmB7fH1+XS9nLAogICAgICAgICAgIiIKICAgICAgICApCiAgICAgICAgLnJlcGxhY2UoL1xzL2csICItIikKICAgICkKICB9CgogIC8qKgogICAqIEZpbmRzIHRoZSBuZXh0IHNhZmUgKHVuaXF1ZSkgc2x1ZyB0byB1c2UKICAgKiBAcGFyYW0ge3N0cmluZ30gb3JpZ2luYWxTbHVnCiAgICogQHBhcmFtIHtib29sZWFufSBpc0RyeVJ1bgogICAqLwogIGdldE5leHRTYWZlU2x1ZyhvcmlnaW5hbFNsdWcsIGlzRHJ5UnVuKSB7CiAgICBsZXQgc2x1ZyA9IG9yaWdpbmFsU2x1ZwogICAgbGV0IG9jY3VyZW5jZUFjY3VtdWxhdG9yID0gMAogICAgaWYgKHRoaXMuc2Vlbi5oYXNPd25Qcm9wZXJ0eShzbHVnKSkgewogICAgICBvY2N1cmVuY2VBY2N1bXVsYXRvciA9IHRoaXMuc2VlbltvcmlnaW5hbFNsdWddCiAgICAgIGRvIHsKICAgICAgICBvY2N1cmVuY2VBY2N1bXVsYXRvcisrCiAgICAgICAgc2x1ZyA9IG9yaWdpbmFsU2x1ZyArICItIiArIG9jY3VyZW5jZUFjY3VtdWxhdG9yCiAgICAgIH0gd2hpbGUgKHRoaXMuc2Vlbi5oYXNPd25Qcm9wZXJ0eShzbHVnKSkKICAgIH0KICAgIGlmICghaXNEcnlSdW4pIHsKICAgICAgdGhpcy5zZWVuW29yaWdpbmFsU2x1Z10gPSBvY2N1cmVuY2VBY2N1bXVsYXRvcgogICAgICB0aGlzLnNlZW5bc2x1Z10gPSAwCiAgICB9CiAgICByZXR1cm4gc2x1ZwogIH0KCiAgLyoqCiAgICogQ29udmVydCBzdHJpbmcgdG8gdW5pcXVlIGlkCiAgICogQHBhcmFtIHtvYmplY3R9IFtvcHRpb25zXQogICAqIEBwYXJhbSB7Ym9vbGVhbn0gW29wdGlvbnMuZHJ5cnVuXSBHZW5lcmF0ZXMgdGhlIG5leHQgdW5pcXVlIHNsdWcgd2l0aG91dAogICAqIHVwZGF0aW5nIHRoZSBpbnRlcm5hbCBhY2N1bXVsYXRvci4KICAgKi8KICBzbHVnKHZhbHVlLCBvcHRpb25zID0ge30pIHsKICAgIGNvbnN0IHNsdWcgPSB0aGlzLnNlcmlhbGl6ZSh2YWx1ZSkKICAgIHJldHVybiB0aGlzLmdldE5leHRTYWZlU2x1ZyhzbHVnLCBvcHRpb25zLmRyeXJ1bikKICB9Cn0KCi8qKgogKiBQYXJzaW5nICYgQ29tcGlsaW5nCiAqLwpjbGFzcyBQYXJzZXIgewogIGNvbnN0cnVjdG9yKG9wdGlvbnMpIHsKICAgIHRoaXMub3B0aW9ucyA9IG9wdGlvbnMgfHwgZGVmYXVsdHMKICAgIHRoaXMub3B0aW9ucy5yZW5kZXJlciA9IHRoaXMub3B0aW9ucy5yZW5kZXJlciB8fCBuZXcgUmVuZGVyZXIoKQogICAgdGhpcy5yZW5kZXJlciA9IHRoaXMub3B0aW9ucy5yZW5kZXJlcgogICAgdGhpcy5yZW5kZXJlci5vcHRpb25zID0gdGhpcy5vcHRpb25zCiAgICB0aGlzLnRleHRSZW5kZXJlciA9IG5ldyBUZXh0UmVuZGVyZXIoKQogICAgdGhpcy5zbHVnZ2VyID0gbmV3IFNsdWdnZXIoKQogIH0KCiAgLyoqCiAgICogU3RhdGljIFBhcnNlIE1ldGhvZAogICAqLwogIHN0YXRpYyBwYXJzZSh0b2tlbnMsIG9wdGlvbnMpIHsKICAgIGNvbnN0IHBhcnNlciA9IG5ldyBQYXJzZXIob3B0aW9ucykKICAgIHJldHVybiBwYXJzZXIucGFyc2UodG9rZW5zKQogIH0KCiAgLyoqCiAgICogU3RhdGljIFBhcnNlIElubGluZSBNZXRob2QKICAgKi8KICBzdGF0aWMgcGFyc2VJbmxpbmUodG9rZW5zLCBvcHRpb25zKSB7CiAgICBjb25zdCBwYXJzZXIgPSBuZXcgUGFyc2VyKG9wdGlvbnMpCiAgICByZXR1cm4gcGFyc2VyLnBhcnNlSW5saW5lKHRva2VucykKICB9CgogIC8qKgogICAqIFBhcnNlIExvb3AKICAgKi8KICBwYXJzZSh0b2tlbnMsIHRvcCA9IHRydWUpIHsKICAgIGxldCBvdXQgPSAiIiwKICAgICAgaSwKICAgICAgaiwKICAgICAgaywKICAgICAgbDIsCiAgICAgIGwzLAogICAgICByb3csCiAgICAgIGNlbGwsCiAgICAgIGhlYWRlciwKICAgICAgYm9keSwKICAgICAgdG9rZW4sCiAgICAgIG9yZGVyZWQsCiAgICAgIHN0YXJ0LAogICAgICBsb29zZSwKICAgICAgaXRlbUJvZHksCiAgICAgIGl0ZW0sCiAgICAgIGNoZWNrZWQsCiAgICAgIHRhc2ssCiAgICAgIGNoZWNrYm94LAogICAgICByZXQKCiAgICBjb25zdCBsID0gdG9rZW5zLmxlbmd0aAogICAgZm9yIChpID0gMDsgaSA8IGw7IGkrKykgewogICAgICB0b2tlbiA9IHRva2Vuc1tpXQoKICAgICAgLy8gUnVuIGFueSByZW5kZXJlciBleHRlbnNpb25zCiAgICAgIGlmICgKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucyAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnJlbmRlcmVycyAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnJlbmRlcmVyc1t0b2tlbi50eXBlXQogICAgICApIHsKICAgICAgICByZXQgPSB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucy5yZW5kZXJlcnNbdG9rZW4udHlwZV0uY2FsbCgKICAgICAgICAgIHsgcGFyc2VyOiB0aGlzIH0sCiAgICAgICAgICB0b2tlbgogICAgICAgICkKICAgICAgICBpZiAoCiAgICAgICAgICByZXQgIT09IGZhbHNlIHx8CiAgICAgICAgICAhWwogICAgICAgICAgICAic3BhY2UiLAogICAgICAgICAgICAiaHIiLAogICAgICAgICAgICAiaGVhZGluZyIsCiAgICAgICAgICAgICJjb2RlIiwKICAgICAgICAgICAgInRhYmxlIiwKICAgICAgICAgICAgImJsb2NrcXVvdGUiLAogICAgICAgICAgICAibGlzdCIsCiAgICAgICAgICAgICJodG1sIiwKICAgICAgICAgICAgInBhcmFncmFwaCIsCiAgICAgICAgICAgICJ0ZXh0IiwKICAgICAgICAgIF0uaW5jbHVkZXModG9rZW4udHlwZSkKICAgICAgICApIHsKICAgICAgICAgIG91dCArPSByZXQgfHwgIiIKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICB9CgogICAgICBzd2l0Y2ggKHRva2VuLnR5cGUpIHsKICAgICAgICBjYXNlICJzcGFjZSI6IHsKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImhyIjogewogICAgICAgICAgb3V0ICs9IHRoaXMucmVuZGVyZXIuaHIoKQogICAgICAgICAgY29udGludWUKICAgICAgICB9CiAgICAgICAgY2FzZSAiaGVhZGluZyI6IHsKICAgICAgICAgIG91dCArPSB0aGlzLnJlbmRlcmVyLmhlYWRpbmcoCiAgICAgICAgICAgIHRoaXMucGFyc2VJbmxpbmUodG9rZW4udG9rZW5zKSwKICAgICAgICAgICAgdG9rZW4uZGVwdGgsCiAgICAgICAgICAgIHVuZXNjYXBlKHRoaXMucGFyc2VJbmxpbmUodG9rZW4udG9rZW5zLCB0aGlzLnRleHRSZW5kZXJlcikpLAogICAgICAgICAgICB0aGlzLnNsdWdnZXIKICAgICAgICAgICkKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImNvZGUiOiB7CiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5jb2RlKHRva2VuLnRleHQsIHRva2VuLmxhbmcsIHRva2VuLmVzY2FwZWQpCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgICBjYXNlICJ0YWJsZSI6IHsKICAgICAgICAgIGhlYWRlciA9ICIiCgogICAgICAgICAgLy8gaGVhZGVyCiAgICAgICAgICBjZWxsID0gIiIKICAgICAgICAgIGwyID0gdG9rZW4uaGVhZGVyLmxlbmd0aAogICAgICAgICAgZm9yIChqID0gMDsgaiA8IGwyOyBqKyspIHsKICAgICAgICAgICAgY2VsbCArPSB0aGlzLnJlbmRlcmVyLnRhYmxlY2VsbCgKICAgICAgICAgICAgICB0aGlzLnBhcnNlSW5saW5lKHRva2VuLmhlYWRlcltqXS50b2tlbnMpLAogICAgICAgICAgICAgIHsgaGVhZGVyOiB0cnVlLCBhbGlnbjogdG9rZW4uYWxpZ25bal0gfQogICAgICAgICAgICApCiAgICAgICAgICB9CiAgICAgICAgICBoZWFkZXIgKz0gdGhpcy5yZW5kZXJlci50YWJsZXJvdyhjZWxsKQoKICAgICAgICAgIGJvZHkgPSAiIgogICAgICAgICAgbDIgPSB0b2tlbi5yb3dzLmxlbmd0aAogICAgICAgICAgZm9yIChqID0gMDsgaiA8IGwyOyBqKyspIHsKICAgICAgICAgICAgcm93ID0gdG9rZW4ucm93c1tqXQoKICAgICAgICAgICAgY2VsbCA9ICIiCiAgICAgICAgICAgIGwzID0gcm93Lmxlbmd0aAogICAgICAgICAgICBmb3IgKGsgPSAwOyBrIDwgbDM7IGsrKykgewogICAgICAgICAgICAgIGNlbGwgKz0gdGhpcy5yZW5kZXJlci50YWJsZWNlbGwodGhpcy5wYXJzZUlubGluZShyb3dba10udG9rZW5zKSwgewogICAgICAgICAgICAgICAgaGVhZGVyOiBmYWxzZSwKICAgICAgICAgICAgICAgIGFsaWduOiB0b2tlbi5hbGlnbltrXSwKICAgICAgICAgICAgICB9KQogICAgICAgICAgICB9CgogICAgICAgICAgICBib2R5ICs9IHRoaXMucmVuZGVyZXIudGFibGVyb3coY2VsbCkKICAgICAgICAgIH0KICAgICAgICAgIG91dCArPSB0aGlzLnJlbmRlcmVyLnRhYmxlKGhlYWRlciwgYm9keSkKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImJsb2NrcXVvdGUiOiB7CiAgICAgICAgICBib2R5ID0gdGhpcy5wYXJzZSh0b2tlbi50b2tlbnMpCiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5ibG9ja3F1b3RlKGJvZHkpCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgICBjYXNlICJsaXN0IjogewogICAgICAgICAgb3JkZXJlZCA9IHRva2VuLm9yZGVyZWQKICAgICAgICAgIHN0YXJ0ID0gdG9rZW4uc3RhcnQKICAgICAgICAgIGxvb3NlID0gdG9rZW4ubG9vc2UKICAgICAgICAgIGwyID0gdG9rZW4uaXRlbXMubGVuZ3RoCgogICAgICAgICAgYm9keSA9ICIiCiAgICAgICAgICBmb3IgKGogPSAwOyBqIDwgbDI7IGorKykgewogICAgICAgICAgICBpdGVtID0gdG9rZW4uaXRlbXNbal0KICAgICAgICAgICAgY2hlY2tlZCA9IGl0ZW0uY2hlY2tlZAogICAgICAgICAgICB0YXNrID0gaXRlbS50YXNrCgogICAgICAgICAgICBpdGVtQm9keSA9ICIiCiAgICAgICAgICAgIGlmIChpdGVtLnRhc2spIHsKICAgICAgICAgICAgICBjaGVja2JveCA9IHRoaXMucmVuZGVyZXIuY2hlY2tib3goY2hlY2tlZCkKICAgICAgICAgICAgICBpZiAobG9vc2UpIHsKICAgICAgICAgICAgICAgIGlmICgKICAgICAgICAgICAgICAgICAgaXRlbS50b2tlbnMubGVuZ3RoID4gMCAmJgogICAgICAgICAgICAgICAgICBpdGVtLnRva2Vuc1swXS50eXBlID09PSAicGFyYWdyYXBoIgogICAgICAgICAgICAgICAgKSB7CiAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zWzBdLnRleHQgPSBjaGVja2JveCArICIgIiArIGl0ZW0udG9rZW5zWzBdLnRleHQKICAgICAgICAgICAgICAgICAgaWYgKAogICAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zWzBdLnRva2VucyAmJgogICAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zWzBdLnRva2Vucy5sZW5ndGggPiAwICYmCiAgICAgICAgICAgICAgICAgICAgaXRlbS50b2tlbnNbMF0udG9rZW5zWzBdLnR5cGUgPT09ICJ0ZXh0IgogICAgICAgICAgICAgICAgICApIHsKICAgICAgICAgICAgICAgICAgICBpdGVtLnRva2Vuc1swXS50b2tlbnNbMF0udGV4dCA9CiAgICAgICAgICAgICAgICAgICAgICBjaGVja2JveCArICIgIiArIGl0ZW0udG9rZW5zWzBdLnRva2Vuc1swXS50ZXh0CiAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zLnVuc2hpZnQoewogICAgICAgICAgICAgICAgICAgIHR5cGU6ICJ0ZXh0IiwKICAgICAgICAgICAgICAgICAgICB0ZXh0OiBjaGVja2JveCwKICAgICAgICAgICAgICAgICAgfSkKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgaXRlbUJvZHkgKz0gY2hlY2tib3gKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGl0ZW1Cb2R5ICs9IHRoaXMucGFyc2UoaXRlbS50b2tlbnMsIGxvb3NlKQogICAgICAgICAgICBib2R5ICs9IHRoaXMucmVuZGVyZXIubGlzdGl0ZW0oaXRlbUJvZHksIHRhc2ssIGNoZWNrZWQpCiAgICAgICAgICB9CgogICAgICAgICAgb3V0ICs9IHRoaXMucmVuZGVyZXIubGlzdChib2R5LCBvcmRlcmVkLCBzdGFydCkKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImh0bWwiOiB7CiAgICAgICAgICAvLyBUT0RPIHBhcnNlIGlubGluZSBjb250ZW50IGlmIHBhcmFtZXRlciBtYXJrZG93bj0xCiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5odG1sKHRva2VuLnRleHQpCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgICBjYXNlICJwYXJhZ3JhcGgiOiB7CiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5wYXJhZ3JhcGgodGhpcy5wYXJzZUlubGluZSh0b2tlbi50b2tlbnMpKQogICAgICAgICAgY29udGludWUKICAgICAgICB9CiAgICAgICAgY2FzZSAidGV4dCI6IHsKICAgICAgICAgIGJvZHkgPSB0b2tlbi50b2tlbnMgPyB0aGlzLnBhcnNlSW5saW5lKHRva2VuLnRva2VucykgOiB0b2tlbi50ZXh0CiAgICAgICAgICB3aGlsZSAoaSArIDEgPCBsICYmIHRva2Vuc1tpICsgMV0udHlwZSA9PT0gInRleHQiKSB7CiAgICAgICAgICAgIHRva2VuID0gdG9rZW5zWysraV0KICAgICAgICAgICAgYm9keSArPQogICAgICAgICAgICAgICJcbiIgKwogICAgICAgICAgICAgICh0b2tlbi50b2tlbnMgPyB0aGlzLnBhcnNlSW5saW5lKHRva2VuLnRva2VucykgOiB0b2tlbi50ZXh0KQogICAgICAgICAgfQogICAgICAgICAgb3V0ICs9IHRvcCA/IHRoaXMucmVuZGVyZXIucGFyYWdyYXBoKGJvZHkpIDogYm9keQogICAgICAgICAgY29udGludWUKICAgICAgICB9CgogICAgICAgIGRlZmF1bHQ6IHsKICAgICAgICAgIGNvbnN0IGVyck1zZyA9ICdUb2tlbiB3aXRoICInICsgdG9rZW4udHlwZSArICciIHR5cGUgd2FzIG5vdCBmb3VuZC4nCiAgICAgICAgICBpZiAodGhpcy5vcHRpb25zLnNpbGVudCkgewogICAgICAgICAgICBjb25zb2xlLmVycm9yKGVyck1zZykKICAgICAgICAgICAgcmV0dXJuCiAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoZXJyTXNnKQogICAgICAgICAgfQogICAgICAgIH0KICAgICAgfQogICAgfQoKICAgIHJldHVybiBvdXQKICB9CgogIC8qKgogICAqIFBhcnNlIElubGluZSBUb2tlbnMKICAgKi8KICBwYXJzZUlubGluZSh0b2tlbnMsIHJlbmRlcmVyKSB7CiAgICByZW5kZXJlciA9IHJlbmRlcmVyIHx8IHRoaXMucmVuZGVyZXIKICAgIGxldCBvdXQgPSAiIiwKICAgICAgaSwKICAgICAgdG9rZW4sCiAgICAgIHJldAoKICAgIGNvbnN0IGwgPSB0b2tlbnMubGVuZ3RoCiAgICBmb3IgKGkgPSAwOyBpIDwgbDsgaSsrKSB7CiAgICAgIHRva2VuID0gdG9rZW5zW2ldCgogICAgICAvLyBSdW4gYW55IHJlbmRlcmVyIGV4dGVuc2lvbnMKICAgICAgaWYgKAogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zICYmCiAgICAgICAgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMucmVuZGVyZXJzICYmCiAgICAgICAgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMucmVuZGVyZXJzW3Rva2VuLnR5cGVdCiAgICAgICkgewogICAgICAgIHJldCA9IHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnJlbmRlcmVyc1t0b2tlbi50eXBlXS5jYWxsKAogICAgICAgICAgeyBwYXJzZXI6IHRoaXMgfSwKICAgICAgICAgIHRva2VuCiAgICAgICAgKQogICAgICAgIGlmICgKICAgICAgICAgIHJldCAhPT0gZmFsc2UgfHwKICAgICAgICAgICFbCiAgICAgICAgICAgICJlc2NhcGUiLAogICAgICAgICAgICAiaHRtbCIsCiAgICAgICAgICAgICJsaW5rIiwKICAgICAgICAgICAgImltYWdlIiwKICAgICAgICAgICAgInN0cm9uZyIsCiAgICAgICAgICAgICJlbSIsCiAgICAgICAgICAgICJjb2Rlc3BhbiIsCiAgICAgICAgICAgICJiciIsCiAgICAgICAgICAgICJkZWwiLAogICAgICAgICAgICAidGV4dCIsCiAgICAgICAgICBdLmluY2x1ZGVzKHRva2VuLnR5cGUpCiAgICAgICAgKSB7CiAgICAgICAgICBvdXQgKz0gcmV0IHx8ICIiCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgfQoKICAgICAgc3dpdGNoICh0b2tlbi50eXBlKSB7CiAgICAgICAgY2FzZSAiZXNjYXBlIjogewogICAgICAgICAgb3V0ICs9IHJlbmRlcmVyLnRleHQodG9rZW4udGV4dCkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgImh0bWwiOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuaHRtbCh0b2tlbi50ZXh0KQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgY2FzZSAibGluayI6IHsKICAgICAgICAgIG91dCArPSByZW5kZXJlci5saW5rKAogICAgICAgICAgICB0b2tlbi5ocmVmLAogICAgICAgICAgICB0b2tlbi50aXRsZSwKICAgICAgICAgICAgdGhpcy5wYXJzZUlubGluZSh0b2tlbi50b2tlbnMsIHJlbmRlcmVyKQogICAgICAgICAgKQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgY2FzZSAiaW1hZ2UiOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuaW1hZ2UodG9rZW4uaHJlZiwgdG9rZW4udGl0bGUsIHRva2VuLnRleHQpCiAgICAgICAgICBicmVhawogICAgICAgIH0KICAgICAgICBjYXNlICJzdHJvbmciOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuc3Ryb25nKHRoaXMucGFyc2VJbmxpbmUodG9rZW4udG9rZW5zLCByZW5kZXJlcikpCiAgICAgICAgICBicmVhawogICAgICAgIH0KICAgICAgICBjYXNlICJlbSI6IHsKICAgICAgICAgIG91dCArPSByZW5kZXJlci5lbSh0aGlzLnBhcnNlSW5saW5lKHRva2VuLnRva2VucywgcmVuZGVyZXIpKQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgY2FzZSAiY29kZXNwYW4iOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuY29kZXNwYW4odG9rZW4udGV4dCkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgImJyIjogewogICAgICAgICAgb3V0ICs9IHJlbmRlcmVyLmJyKCkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgImRlbCI6IHsKICAgICAgICAgIG91dCArPSByZW5kZXJlci5kZWwodGhpcy5wYXJzZUlubGluZSh0b2tlbi50b2tlbnMsIHJlbmRlcmVyKSkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgInRleHQiOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIudGV4dCh0b2tlbi50ZXh0KQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgZGVmYXVsdDogewogICAgICAgICAgY29uc3QgZXJyTXNnID0gJ1Rva2VuIHdpdGggIicgKyB0b2tlbi50eXBlICsgJyIgdHlwZSB3YXMgbm90IGZvdW5kLicKICAgICAgICAgIGlmICh0aGlzLm9wdGlvbnMuc2lsZW50KSB7CiAgICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZXJyTXNnKQogICAgICAgICAgICByZXR1cm4KICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihlcnJNc2cpCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgICByZXR1cm4gb3V0CiAgfQp9CgovKioKICogTWFya2VkCiAqLwpmdW5jdGlvbiBtYXJrZWQoc3JjLCBvcHQsIGNhbGxiYWNrKSB7CiAgLy8gdGhyb3cgZXJyb3IgaW4gY2FzZSBvZiBub24gc3RyaW5nIGlucHV0CiAgaWYgKHR5cGVvZiBzcmMgPT09ICJ1bmRlZmluZWQiIHx8IHNyYyA9PT0gbnVsbCkgewogICAgdGhyb3cgbmV3IEVycm9yKCJtYXJrZWQoKTogaW5wdXQgcGFyYW1ldGVyIGlzIHVuZGVmaW5lZCBvciBudWxsIikKICB9CiAgaWYgKHR5cGVvZiBzcmMgIT09ICJzdHJpbmciKSB7CiAgICB0aHJvdyBuZXcgRXJyb3IoCiAgICAgICJtYXJrZWQoKTogaW5wdXQgcGFyYW1ldGVyIGlzIG9mIHR5cGUgIiArCiAgICAgICAgT2JqZWN0LnByb3RvdHlwZS50b1N0cmluZy5jYWxsKHNyYykgKwogICAgICAgICIsIHN0cmluZyBleHBlY3RlZCIKICAgICkKICB9CgogIGlmICh0eXBlb2Ygb3B0ID09PSAiZnVuY3Rpb24iKSB7CiAgICBjYWxsYmFjayA9IG9wdAogICAgb3B0ID0gbnVsbAogIH0KCiAgb3B0ID0gbWVyZ2Uoe30sIG1hcmtlZC5kZWZhdWx0cywgb3B0IHx8IHt9KQogIGNoZWNrU2FuaXRpemVEZXByZWNhdGlvbihvcHQpCgogIGlmIChjYWxsYmFjaykgewogICAgY29uc3QgaGlnaGxpZ2h0ID0gb3B0LmhpZ2hsaWdodAogICAgbGV0IHRva2VucwoKICAgIHRyeSB7CiAgICAgIHRva2VucyA9IExleGVyLmxleChzcmMsIG9wdCkKICAgIH0gY2F0Y2ggKGUpIHsKICAgICAgcmV0dXJuIGNhbGxiYWNrKGUpCiAgICB9CgogICAgY29uc3QgZG9uZSA9IGZ1bmN0aW9uIChlcnIpIHsKICAgICAgbGV0IG91dAoKICAgICAgaWYgKCFlcnIpIHsKICAgICAgICB0cnkgewogICAgICAgICAgaWYgKG9wdC53YWxrVG9rZW5zKSB7CiAgICAgICAgICAgIG1hcmtlZC53YWxrVG9rZW5zKHRva2Vucywgb3B0LndhbGtUb2tlbnMpCiAgICAgICAgICB9CiAgICAgICAgICBvdXQgPSBQYXJzZXIucGFyc2UodG9rZW5zLCBvcHQpCiAgICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgICAgZXJyID0gZQogICAgICAgIH0KICAgICAgfQoKICAgICAgb3B0LmhpZ2hsaWdodCA9IGhpZ2hsaWdodAoKICAgICAgcmV0dXJuIGVyciA/IGNhbGxiYWNrKGVycikgOiBjYWxsYmFjayhudWxsLCBvdXQpCiAgICB9CgogICAgaWYgKCFoaWdobGlnaHQgfHwgaGlnaGxpZ2h0Lmxlbmd0aCA8IDMpIHsKICAgICAgcmV0dXJuIGRvbmUoKQogICAgfQoKICAgIGRlbGV0ZSBvcHQuaGlnaGxpZ2h0CgogICAgaWYgKCF0b2tlbnMubGVuZ3RoKSByZXR1cm4gZG9uZSgpCgogICAgbGV0IHBlbmRpbmcgPSAwCiAgICBtYXJrZWQud2Fsa1Rva2Vucyh0b2tlbnMsIGZ1bmN0aW9uICh0b2tlbikgewogICAgICBpZiAodG9rZW4udHlwZSA9PT0gImNvZGUiKSB7CiAgICAgICAgcGVuZGluZysrCiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7CiAgICAgICAgICBoaWdobGlnaHQodG9rZW4udGV4dCwgdG9rZW4ubGFuZywgZnVuY3Rpb24gKGVyciwgY29kZSkgewogICAgICAgICAgICBpZiAoZXJyKSB7CiAgICAgICAgICAgICAgcmV0dXJuIGRvbmUoZXJyKQogICAgICAgICAgICB9CiAgICAgICAgICAgIGlmIChjb2RlICE9IG51bGwgJiYgY29kZSAhPT0gdG9rZW4udGV4dCkgewogICAgICAgICAgICAgIHRva2VuLnRleHQgPSBjb2RlCiAgICAgICAgICAgICAgdG9rZW4uZXNjYXBlZCA9IHRydWUKICAgICAgICAgICAgfQoKICAgICAgICAgICAgcGVuZGluZy0tCiAgICAgICAgICAgIGlmIChwZW5kaW5nID09PSAwKSB7CiAgICAgICAgICAgICAgZG9uZSgpCiAgICAgICAgICAgIH0KICAgICAgICAgIH0pCiAgICAgICAgfSwgMCkKICAgICAgfQogICAgfSkKCiAgICBpZiAocGVuZGluZyA9PT0gMCkgewogICAgICBkb25lKCkKICAgIH0KCiAgICByZXR1cm4KICB9CgogIHRyeSB7CiAgICBjb25zdCB0b2tlbnMgPSBMZXhlci5sZXgoc3JjLCBvcHQpCiAgICBpZiAob3B0LndhbGtUb2tlbnMpIHsKICAgICAgbWFya2VkLndhbGtUb2tlbnModG9rZW5zLCBvcHQud2Fsa1Rva2VucykKICAgIH0KICAgIHJldHVybiBQYXJzZXIucGFyc2UodG9rZW5zLCBvcHQpCiAgfSBjYXRjaCAoZSkgewogICAgZS5tZXNzYWdlICs9ICJcblBsZWFzZSByZXBvcnQgdGhpcyB0byBodHRwczovL2dpdGh1Yi5jb20vbWFya2VkanMvbWFya2VkLiIKICAgIGlmIChvcHQuc2lsZW50KSB7CiAgICAgIHJldHVybiAoCiAgICAgICAgIjxwPkFuIGVycm9yIG9jY3VycmVkOjwvcD48cHJlPiIgKwogICAgICAgIGVzY2FwZShlLm1lc3NhZ2UgKyAiIiwgdHJ1ZSkgKwogICAgICAgICI8L3ByZT4iCiAgICAgICkKICAgIH0KICAgIHRocm93IGUKICB9Cn0KCi8qKgogKiBPcHRpb25zCiAqLwoKbWFya2VkLm9wdGlvbnMgPSBtYXJrZWQuc2V0T3B0aW9ucyA9IGZ1bmN0aW9uIChvcHQpIHsKICBtZXJnZShtYXJrZWQuZGVmYXVsdHMsIG9wdCkKICBjaGFuZ2VEZWZhdWx0cyhtYXJrZWQuZGVmYXVsdHMpCiAgcmV0dXJuIG1hcmtlZAp9CgptYXJrZWQuZ2V0RGVmYXVsdHMgPSBnZXREZWZhdWx0cwoKbWFya2VkLmRlZmF1bHRzID0gZGVmYXVsdHMKCi8qKgogKiBVc2UgRXh0ZW5zaW9uCiAqLwoKbWFya2VkLnVzZSA9IGZ1bmN0aW9uICguLi5hcmdzKSB7CiAgY29uc3Qgb3B0cyA9IG1lcmdlKHt9LCAuLi5hcmdzKQogIGNvbnN0IGV4dGVuc2lvbnMgPSBtYXJrZWQuZGVmYXVsdHMuZXh0ZW5zaW9ucyB8fCB7CiAgICByZW5kZXJlcnM6IHt9LAogICAgY2hpbGRUb2tlbnM6IHt9LAogIH0KICBsZXQgaGFzRXh0ZW5zaW9ucwoKICBhcmdzLmZvckVhY2gocGFjayA9PiB7CiAgICAvLyA9PS0tIFBhcnNlICJhZGRvbiIgZXh0ZW5zaW9ucyAtLT09IC8vCiAgICBpZiAocGFjay5leHRlbnNpb25zKSB7CiAgICAgIGhhc0V4dGVuc2lvbnMgPSB0cnVlCiAgICAgIHBhY2suZXh0ZW5zaW9ucy5mb3JFYWNoKGV4dCA9PiB7CiAgICAgICAgaWYgKCFleHQubmFtZSkgewogICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCJleHRlbnNpb24gbmFtZSByZXF1aXJlZCIpCiAgICAgICAgfQogICAgICAgIGlmIChleHQucmVuZGVyZXIpIHsKICAgICAgICAgIC8vIFJlbmRlcmVyIGV4dGVuc2lvbnMKICAgICAgICAgIGNvbnN0IHByZXZSZW5kZXJlciA9IGV4dGVuc2lvbnMucmVuZGVyZXJzCiAgICAgICAgICAgID8gZXh0ZW5zaW9ucy5yZW5kZXJlcnNbZXh0Lm5hbWVdCiAgICAgICAgICAgIDogbnVsbAogICAgICAgICAgaWYgKHByZXZSZW5kZXJlcikgewogICAgICAgICAgICAvLyBSZXBsYWNlIGV4dGVuc2lvbiB3aXRoIGZ1bmMgdG8gcnVuIG5ldyBleHRlbnNpb24gYnV0IGZhbGwgYmFjayBpZiBmYWxzZQogICAgICAgICAgICBleHRlbnNpb25zLnJlbmRlcmVyc1tleHQubmFtZV0gPSBmdW5jdGlvbiAoLi4uYXJncykgewogICAgICAgICAgICAgIGxldCByZXQgPSBleHQucmVuZGVyZXIuYXBwbHkodGhpcywgYXJncykKICAgICAgICAgICAgICBpZiAocmV0ID09PSBmYWxzZSkgewogICAgICAgICAgICAgICAgcmV0ID0gcHJldlJlbmRlcmVyLmFwcGx5KHRoaXMsIGFyZ3MpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHJldHVybiByZXQKICAgICAgICAgICAgfQogICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgZXh0ZW5zaW9ucy5yZW5kZXJlcnNbZXh0Lm5hbWVdID0gZXh0LnJlbmRlcmVyCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIGlmIChleHQudG9rZW5pemVyKSB7CiAgICAgICAgICAvLyBUb2tlbml6ZXIgRXh0ZW5zaW9ucwogICAgICAgICAgaWYgKCFleHQubGV2ZWwgfHwgKGV4dC5sZXZlbCAhPT0gImJsb2NrIiAmJiBleHQubGV2ZWwgIT09ICJpbmxpbmUiKSkgewogICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoImV4dGVuc2lvbiBsZXZlbCBtdXN0IGJlICdibG9jaycgb3IgJ2lubGluZSciKQogICAgICAgICAgfQogICAgICAgICAgaWYgKGV4dGVuc2lvbnNbZXh0LmxldmVsXSkgewogICAgICAgICAgICBleHRlbnNpb25zW2V4dC5sZXZlbF0udW5zaGlmdChleHQudG9rZW5pemVyKQogICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgZXh0ZW5zaW9uc1tleHQubGV2ZWxdID0gW2V4dC50b2tlbml6ZXJdCiAgICAgICAgICB9CiAgICAgICAgICBpZiAoZXh0LnN0YXJ0KSB7CiAgICAgICAgICAgIC8vIEZ1bmN0aW9uIHRvIGNoZWNrIGZvciBzdGFydCBvZiB0b2tlbgogICAgICAgICAgICBpZiAoZXh0LmxldmVsID09PSAiYmxvY2siKSB7CiAgICAgICAgICAgICAgaWYgKGV4dGVuc2lvbnMuc3RhcnRCbG9jaykgewogICAgICAgICAgICAgICAgZXh0ZW5zaW9ucy5zdGFydEJsb2NrLnB1c2goZXh0LnN0YXJ0KQogICAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICBleHRlbnNpb25zLnN0YXJ0QmxvY2sgPSBbZXh0LnN0YXJ0XQogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSBlbHNlIGlmIChleHQubGV2ZWwgPT09ICJpbmxpbmUiKSB7CiAgICAgICAgICAgICAgaWYgKGV4dGVuc2lvbnMuc3RhcnRJbmxpbmUpIHsKICAgICAgICAgICAgICAgIGV4dGVuc2lvbnMuc3RhcnRJbmxpbmUucHVzaChleHQuc3RhcnQpCiAgICAgICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgICAgIGV4dGVuc2lvbnMuc3RhcnRJbmxpbmUgPSBbZXh0LnN0YXJ0XQogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfQogICAgICAgICAgfQogICAgICAgIH0KICAgICAgICBpZiAoZXh0LmNoaWxkVG9rZW5zKSB7CiAgICAgICAgICAvLyBDaGlsZCB0b2tlbnMgdG8gYmUgdmlzaXRlZCBieSB3YWxrVG9rZW5zCiAgICAgICAgICBleHRlbnNpb25zLmNoaWxkVG9rZW5zW2V4dC5uYW1lXSA9IGV4dC5jaGlsZFRva2VucwogICAgICAgIH0KICAgICAgfSkKICAgIH0KCiAgICAvLyA9PS0tIFBhcnNlICJvdmVyd3JpdGUiIGV4dGVuc2lvbnMgLS09PSAvLwogICAgaWYgKHBhY2sucmVuZGVyZXIpIHsKICAgICAgY29uc3QgcmVuZGVyZXIgPSBtYXJrZWQuZGVmYXVsdHMucmVuZGVyZXIgfHwgbmV3IFJlbmRlcmVyKCkKICAgICAgZm9yIChjb25zdCBwcm9wIGluIHBhY2sucmVuZGVyZXIpIHsKICAgICAgICBjb25zdCBwcmV2UmVuZGVyZXIgPSByZW5kZXJlcltwcm9wXQogICAgICAgIC8vIFJlcGxhY2UgcmVuZGVyZXIgd2l0aCBmdW5jIHRvIHJ1biBleHRlbnNpb24sIGJ1dCBmYWxsIGJhY2sgaWYgZmFsc2UKICAgICAgICByZW5kZXJlcltwcm9wXSA9ICguLi5hcmdzKSA9PiB7CiAgICAgICAgICBsZXQgcmV0ID0gcGFjay5yZW5kZXJlcltwcm9wXS5hcHBseShyZW5kZXJlciwgYXJncykKICAgICAgICAgIGlmIChyZXQgPT09IGZhbHNlKSB7CiAgICAgICAgICAgIHJldCA9IHByZXZSZW5kZXJlci5hcHBseShyZW5kZXJlciwgYXJncykKICAgICAgICAgIH0KICAgICAgICAgIHJldHVybiByZXQKICAgICAgICB9CiAgICAgIH0KICAgICAgb3B0cy5yZW5kZXJlciA9IHJlbmRlcmVyCiAgICB9CiAgICBpZiAocGFjay50b2tlbml6ZXIpIHsKICAgICAgY29uc3QgdG9rZW5pemVyID0gbWFya2VkLmRlZmF1bHRzLnRva2VuaXplciB8fCBuZXcgVG9rZW5pemVyKCkKICAgICAgZm9yIChjb25zdCBwcm9wIGluIHBhY2sudG9rZW5pemVyKSB7CiAgICAgICAgY29uc3QgcHJldlRva2VuaXplciA9IHRva2VuaXplcltwcm9wXQogICAgICAgIC8vIFJlcGxhY2UgdG9rZW5pemVyIHdpdGggZnVuYyB0byBydW4gZXh0ZW5zaW9uLCBidXQgZmFsbCBiYWNrIGlmIGZhbHNlCiAgICAgICAgdG9rZW5pemVyW3Byb3BdID0gKC4uLmFyZ3MpID0+IHsKICAgICAgICAgIGxldCByZXQgPSBwYWNrLnRva2VuaXplcltwcm9wXS5hcHBseSh0b2tlbml6ZXIsIGFyZ3MpCiAgICAgICAgICBpZiAocmV0ID09PSBmYWxzZSkgewogICAgICAgICAgICByZXQgPSBwcmV2VG9rZW5pemVyLmFwcGx5KHRva2VuaXplciwgYXJncykKICAgICAgICAgIH0KICAgICAgICAgIHJldHVybiByZXQKICAgICAgICB9CiAgICAgIH0KICAgICAgb3B0cy50b2tlbml6ZXIgPSB0b2tlbml6ZXIKICAgIH0KCiAgICAvLyA9PS0tIFBhcnNlIFdhbGtUb2tlbnMgZXh0ZW5zaW9ucyAtLT09IC8vCiAgICBpZiAocGFjay53YWxrVG9rZW5zKSB7CiAgICAgIGNvbnN0IHdhbGtUb2tlbnMgPSBtYXJrZWQuZGVmYXVsdHMud2Fsa1Rva2VucwogICAgICBvcHRzLndhbGtUb2tlbnMgPSBmdW5jdGlvbiAodG9rZW4pIHsKICAgICAgICBwYWNrLndhbGtUb2tlbnMuY2FsbCh0aGlzLCB0b2tlbikKICAgICAgICBpZiAod2Fsa1Rva2VucykgewogICAgICAgICAgd2Fsa1Rva2Vucy5jYWxsKHRoaXMsIHRva2VuKQogICAgICAgIH0KICAgICAgfQogICAgfQoKICAgIGlmIChoYXNFeHRlbnNpb25zKSB7CiAgICAgIG9wdHMuZXh0ZW5zaW9ucyA9IGV4dGVuc2lvbnMKICAgIH0KCiAgICBtYXJrZWQuc2V0T3B0aW9ucyhvcHRzKQogIH0pCn0KCi8qKgogKiBSdW4gY2FsbGJhY2sgZm9yIGV2ZXJ5IHRva2VuCiAqLwoKbWFya2VkLndhbGtUb2tlbnMgPSBmdW5jdGlvbiAodG9rZW5zLCBjYWxsYmFjaykgewogIGZvciAoY29uc3QgdG9rZW4gb2YgdG9rZW5zKSB7CiAgICBjYWxsYmFjay5jYWxsKG1hcmtlZCwgdG9rZW4pCiAgICBzd2l0Y2ggKHRva2VuLnR5cGUpIHsKICAgICAgY2FzZSAidGFibGUiOiB7CiAgICAgICAgZm9yIChjb25zdCBjZWxsIG9mIHRva2VuLmhlYWRlcikgewogICAgICAgICAgbWFya2VkLndhbGtUb2tlbnMoY2VsbC50b2tlbnMsIGNhbGxiYWNrKQogICAgICAgIH0KICAgICAgICBmb3IgKGNvbnN0IHJvdyBvZiB0b2tlbi5yb3dzKSB7CiAgICAgICAgICBmb3IgKGNvbnN0IGNlbGwgb2Ygcm93KSB7CiAgICAgICAgICAgIG1hcmtlZC53YWxrVG9rZW5zKGNlbGwudG9rZW5zLCBjYWxsYmFjaykKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgYnJlYWsKICAgICAgfQogICAgICBjYXNlICJsaXN0IjogewogICAgICAgIG1hcmtlZC53YWxrVG9rZW5zKHRva2VuLml0ZW1zLCBjYWxsYmFjaykKICAgICAgICBicmVhawogICAgICB9CiAgICAgIGRlZmF1bHQ6IHsKICAgICAgICBpZiAoCiAgICAgICAgICBtYXJrZWQuZGVmYXVsdHMuZXh0ZW5zaW9ucyAmJgogICAgICAgICAgbWFya2VkLmRlZmF1bHRzLmV4dGVuc2lvbnMuY2hpbGRUb2tlbnMgJiYKICAgICAgICAgIG1hcmtlZC5kZWZhdWx0cy5leHRlbnNpb25zLmNoaWxkVG9rZW5zW3Rva2VuLnR5cGVdCiAgICAgICAgKSB7CiAgICAgICAgICAvLyBXYWxrIGFueSBleHRlbnNpb25zCiAgICAgICAgICBtYXJrZWQuZGVmYXVsdHMuZXh0ZW5zaW9ucy5jaGlsZFRva2Vuc1t0b2tlbi50eXBlXS5mb3JFYWNoKGZ1bmN0aW9uICgKICAgICAgICAgICAgY2hpbGRUb2tlbnMKICAgICAgICAgICkgewogICAgICAgICAgICBtYXJrZWQud2Fsa1Rva2Vucyh0b2tlbltjaGlsZFRva2Vuc10sIGNhbGxiYWNrKQogICAgICAgICAgfSkKICAgICAgICB9IGVsc2UgaWYgKHRva2VuLnRva2VucykgewogICAgICAgICAgbWFya2VkLndhbGtUb2tlbnModG9rZW4udG9rZW5zLCBjYWxsYmFjaykKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9Cn0KCi8qKgogKiBQYXJzZSBJbmxpbmUKICogQHBhcmFtIHtzdHJpbmd9IHNyYwogKi8KbWFya2VkLnBhcnNlSW5saW5lID0gZnVuY3Rpb24gKHNyYywgb3B0KSB7CiAgLy8gdGhyb3cgZXJyb3IgaW4gY2FzZSBvZiBub24gc3RyaW5nIGlucHV0CiAgaWYgKHR5cGVvZiBzcmMgPT09ICJ1bmRlZmluZWQiIHx8IHNyYyA9PT0gbnVsbCkgewogICAgdGhyb3cgbmV3IEVycm9yKAogICAgICAibWFya2VkLnBhcnNlSW5saW5lKCk6IGlucHV0IHBhcmFtZXRlciBpcyB1bmRlZmluZWQgb3IgbnVsbCIKICAgICkKICB9CiAgaWYgKHR5cGVvZiBzcmMgIT09ICJzdHJpbmciKSB7CiAgICB0aHJvdyBuZXcgRXJyb3IoCiAgICAgICJtYXJrZWQucGFyc2VJbmxpbmUoKTogaW5wdXQgcGFyYW1ldGVyIGlzIG9mIHR5cGUgIiArCiAgICAgICAgT2JqZWN0LnByb3RvdHlwZS50b1N0cmluZy5jYWxsKHNyYykgKwogICAgICAgICIsIHN0cmluZyBleHBlY3RlZCIKICAgICkKICB9CgogIG9wdCA9IG1lcmdlKHt9LCBtYXJrZWQuZGVmYXVsdHMsIG9wdCB8fCB7fSkKICBjaGVja1Nhbml0aXplRGVwcmVjYXRpb24ob3B0KQoKICB0cnkgewogICAgY29uc3QgdG9rZW5zID0gTGV4ZXIubGV4SW5saW5lKHNyYywgb3B0KQogICAgaWYgKG9wdC53YWxrVG9rZW5zKSB7CiAgICAgIG1hcmtlZC53YWxrVG9rZW5zKHRva2Vucywgb3B0LndhbGtUb2tlbnMpCiAgICB9CiAgICByZXR1cm4gUGFyc2VyLnBhcnNlSW5saW5lKHRva2Vucywgb3B0KQogIH0gY2F0Y2ggKGUpIHsKICAgIGUubWVzc2FnZSArPSAiXG5QbGVhc2UgcmVwb3J0IHRoaXMgdG8gaHR0cHM6Ly9naXRodWIuY29tL21hcmtlZGpzL21hcmtlZC4iCiAgICBpZiAob3B0LnNpbGVudCkgewogICAgICByZXR1cm4gKAogICAgICAgICI8cD5BbiBlcnJvciBvY2N1cnJlZDo8L3A+PHByZT4iICsKICAgICAgICBlc2NhcGUoZS5tZXNzYWdlICsgIiIsIHRydWUpICsKICAgICAgICAiPC9wcmU+IgogICAgICApCiAgICB9CiAgICB0aHJvdyBlCiAgfQp9CgovKioKICogRXhwb3NlCiAqLwptYXJrZWQuUGFyc2VyID0gUGFyc2VyCm1hcmtlZC5wYXJzZXIgPSBQYXJzZXIucGFyc2UKbWFya2VkLlJlbmRlcmVyID0gUmVuZGVyZXIKbWFya2VkLlRleHRSZW5kZXJlciA9IFRleHRSZW5kZXJlcgptYXJrZWQuTGV4ZXIgPSBMZXhlcgptYXJrZWQubGV4ZXIgPSBMZXhlci5sZXgKbWFya2VkLlRva2VuaXplciA9IFRva2VuaXplcgptYXJrZWQuU2x1Z2dlciA9IFNsdWdnZXIKbWFya2VkLnBhcnNlID0gbWFya2VkCgpjb25zdCBvcHRpb25zID0gbWFya2VkLm9wdGlvbnMKY29uc3Qgc2V0T3B0aW9ucyA9IG1hcmtlZC5zZXRPcHRpb25zCmNvbnN0IHVzZSA9IG1hcmtlZC51c2UKY29uc3Qgd2Fsa1Rva2VucyA9IG1hcmtlZC53YWxrVG9rZW5zCmNvbnN0IHBhcnNlSW5saW5lID0gbWFya2VkLnBhcnNlSW5saW5lCmNvbnN0IHBhcnNlID0gbWFya2VkCmNvbnN0IHBhcnNlciA9IFBhcnNlci5wYXJzZQpjb25zdCBsZXhlciA9IExleGVyLmxleAoKY29uc3QgZW1haWwgPSB0cmlnZ2VyLnJvdwpyZXR1cm4gbWFya2VkKGVtYWlsLk1lc3NhZ2Up`
diff --git a/packages/string-templates/src/iife.js b/packages/string-templates/src/iife.js
new file mode 100644
index 0000000000..d043c14565
--- /dev/null
+++ b/packages/string-templates/src/iife.js
@@ -0,0 +1,3 @@
+module.exports.iifeWrapper = script => {
+  return `(function(){\n${script}\n})();`
+}
diff --git a/packages/string-templates/src/index.js b/packages/string-templates/src/index.js
index 0125b9e0ab..5ae773516f 100644
--- a/packages/string-templates/src/index.js
+++ b/packages/string-templates/src/index.js
@@ -3,6 +3,7 @@ const handlebars = require("handlebars")
 const { registerAll, registerMinimum } = require("./helpers/index")
 const processors = require("./processors")
 const { atob, btoa, isBackendService } = require("./utilities")
+const { iifeWrapper } = require("./iife")
 const manifest = require("../manifest.json")
 const {
   FIND_HBS_REGEX,
@@ -426,3 +427,4 @@ function defaultJSSetup() {
 defaultJSSetup()
 
 module.exports.defaultJSSetup = defaultJSSetup
+module.exports.iifeWrapper = iifeWrapper

From 2189e3ee0fbc5491e2527d64e341629dabcbdad8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 1 Mar 2024 15:26:02 +0000
Subject: [PATCH 065/148] Fix duped import

---
 packages/server/src/threads/query.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/server/src/threads/query.ts b/packages/server/src/threads/query.ts
index 40caa6dfd8..f7384ab9bb 100644
--- a/packages/server/src/threads/query.ts
+++ b/packages/server/src/threads/query.ts
@@ -8,9 +8,8 @@ import {
   QueryResponse,
 } from "./definitions"
 import { IsolatedVM } from "../jsRunner/vm"
-import { iifeWrapper } from "@budibase/string-templates"
+import { iifeWrapper, processStringSync } from "@budibase/string-templates"
 import { getIntegration } from "../integrations"
-import { processStringSync } from "@budibase/string-templates"
 import { context, cache, auth } from "@budibase/backend-core"
 import { getGlobalIDFromUserMetadataID } from "../db/utils"
 import sdk from "../sdk"

From 483fcbe30af5d0d444d68967dddc719e9cd30dbb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 1 Mar 2024 15:48:39 +0000
Subject: [PATCH 066/148] Add example of crazy long snippet for performance
 testing

---
 packages/string-templates/package.json              | 3 ++-
 packages/string-templates/src/helpers/javascript.js | 2 --
 packages/string-templates/src/helpers/snippet.js    | 3 ++-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 340d74ef8a..1f3e1b618a 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -13,7 +13,8 @@
     },
     "./package.json": "./package.json",
     "./test/utils": "./test/utils.js",
-    "./iife": "./src/iife.js"
+    "./iife": "./src/iife.js",
+    "./snippet": "./src/helpers/snippet.js"
   },
   "files": [
     "dist",
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 65c70cc330..7f3693c1c4 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -3,7 +3,6 @@ const cloneDeep = require("lodash.clonedeep")
 const { LITERAL_MARKER } = require("../helpers/constants")
 const { getJsHelperList } = require("./list")
 const { iifeWrapper } = require("../iife")
-const { CrazyLongSnippet } = require("./snippet")
 
 // The method of executing JS scripts depends on the bundle being built.
 // This setter is used in the entrypoint (either index.js or index.mjs).
@@ -51,7 +50,6 @@ const snippets = {
   HelloWorld: `
    return "Hello, world!"
   `,
-  CrazyLongSnippet: atob(CrazyLongSnippet),
 }
 
 // Evaluates JS code against a certain context
diff --git a/packages/string-templates/src/helpers/snippet.js b/packages/string-templates/src/helpers/snippet.js
index 950019a69f..b7269b56cc 100644
--- a/packages/string-templates/src/helpers/snippet.js
+++ b/packages/string-templates/src/helpers/snippet.js
@@ -1 +1,2 @@
-module.exports.CrazyLongSnippet = `LyoqCiAqIG1hcmtlZCAtIGEgbWFya2Rvd24gcGFyc2VyCiAqIENvcHlyaWdodCAoYykgMjAxMS0yMDIyLCBDaHJpc3RvcGhlciBKZWZmcmV5LiAoTUlUIExpY2Vuc2VkKQogKiBodHRwczovL2dpdGh1Yi5jb20vbWFya2VkanMvbWFya2VkCiAqLwoKLyoqCiAqIERPIE5PVCBFRElUIFRISVMgRklMRQogKiBUaGUgY29kZSBpbiB0aGlzIGZpbGUgaXMgZ2VuZXJhdGVkIGZyb20gZmlsZXMgaW4gLi9zcmMvCiAqLwoKZnVuY3Rpb24gZ2V0RGVmYXVsdHMoKSB7CiAgcmV0dXJuIHsKICAgIGJhc2VVcmw6IG51bGwsCiAgICBicmVha3M6IGZhbHNlLAogICAgZXh0ZW5zaW9uczogbnVsbCwKICAgIGdmbTogdHJ1ZSwKICAgIGhlYWRlcklkczogdHJ1ZSwKICAgIGhlYWRlclByZWZpeDogIiIsCiAgICBoaWdobGlnaHQ6IG51bGwsCiAgICBsYW5nUHJlZml4OiAibGFuZ3VhZ2UtIiwKICAgIG1hbmdsZTogdHJ1ZSwKICAgIHBlZGFudGljOiBmYWxzZSwKICAgIHJlbmRlcmVyOiBudWxsLAogICAgc2FuaXRpemU6IGZhbHNlLAogICAgc2FuaXRpemVyOiBudWxsLAogICAgc2lsZW50OiBmYWxzZSwKICAgIHNtYXJ0TGlzdHM6IGZhbHNlLAogICAgc21hcnR5cGFudHM6IGZhbHNlLAogICAgdG9rZW5pemVyOiBudWxsLAogICAgd2Fsa1Rva2VuczogbnVsbCwKICAgIHhodG1sOiBmYWxzZSwKICB9Cn0KCmxldCBkZWZhdWx0cyA9IGdldERlZmF1bHRzKCkKCmZ1bmN0aW9uIGNoYW5nZURlZmF1bHRzKG5ld0RlZmF1bHRzKSB7CiAgZGVmYXVsdHMgPSBuZXdEZWZhdWx0cwp9CgovKioKICogSGVscGVycwogKi8KY29uc3QgZXNjYXBlVGVzdCA9IC9bJjw+IiddLwpjb25zdCBlc2NhcGVSZXBsYWNlID0gL1smPD4iJ10vZwpjb25zdCBlc2NhcGVUZXN0Tm9FbmNvZGUgPSAvWzw+IiddfCYoPyEjP1x3KzspLwpjb25zdCBlc2NhcGVSZXBsYWNlTm9FbmNvZGUgPSAvWzw+IiddfCYoPyEjP1x3KzspL2cKY29uc3QgZXNjYXBlUmVwbGFjZW1lbnRzID0gewogICImIjogIiZhbXA7IiwKICAiPCI6ICImbHQ7IiwKICAiPiI6ICImZ3Q7IiwKICAnIic6ICImcXVvdDsiLAogICInIjogIiYjMzk7IiwKfQpjb25zdCBnZXRFc2NhcGVSZXBsYWNlbWVudCA9IGNoID0+IGVzY2FwZVJlcGxhY2VtZW50c1tjaF0KZnVuY3Rpb24gZXNjYXBlKGh0bWwsIGVuY29kZSkgewogIGlmIChlbmNvZGUpIHsKICAgIGlmIChlc2NhcGVUZXN0LnRlc3QoaHRtbCkpIHsKICAgICAgcmV0dXJuIGh0bWwucmVwbGFjZShlc2NhcGVSZXBsYWNlLCBnZXRFc2NhcGVSZXBsYWNlbWVudCkKICAgIH0KICB9IGVsc2UgewogICAgaWYgKGVzY2FwZVRlc3ROb0VuY29kZS50ZXN0KGh0bWwpKSB7CiAgICAgIHJldHVybiBodG1sLnJlcGxhY2UoZXNjYXBlUmVwbGFjZU5vRW5jb2RlLCBnZXRFc2NhcGVSZXBsYWNlbWVudCkKICAgIH0KICB9CgogIHJldHVybiBodG1sCn0KCmNvbnN0IHVuZXNjYXBlVGVzdCA9IC8mKCMoPzpcZCspfCg/OiN4WzAtOUEtRmEtZl0rKXwoPzpcdyspKTs/L2dpCgovKioKICogQHBhcmFtIHtzdHJpbmd9IGh0bWwKICovCmZ1bmN0aW9uIHVuZXNjYXBlKGh0bWwpIHsKICAvLyBleHBsaWNpdGx5IG1hdGNoIGRlY2ltYWwsIGhleCwgYW5kIG5hbWVkIEhUTUwgZW50aXRpZXMKICByZXR1cm4gaHRtbC5yZXBsYWNlKHVuZXNjYXBlVGVzdCwgKF8sIG4pID0+IHsKICAgIG4gPSBuLnRvTG93ZXJDYXNlKCkKICAgIGlmIChuID09PSAiY29sb24iKSByZXR1cm4gIjoiCiAgICBpZiAobi5jaGFyQXQoMCkgPT09ICIjIikgewogICAgICByZXR1cm4gbi5jaGFyQXQoMSkgPT09ICJ4IgogICAgICAgID8gU3RyaW5nLmZyb21DaGFyQ29kZShwYXJzZUludChuLnN1YnN0cmluZygyKSwgMTYpKQogICAgICAgIDogU3RyaW5nLmZyb21DaGFyQ29kZSgrbi5zdWJzdHJpbmcoMSkpCiAgICB9CiAgICByZXR1cm4gIiIKICB9KQp9Cgpjb25zdCBjYXJldCA9IC8oXnxbXlxbXSlcXi9nCgovKioKICogQHBhcmFtIHtzdHJpbmcgfCBSZWdFeHB9IHJlZ2V4CiAqIEBwYXJhbSB7c3RyaW5nfSBvcHQKICovCmZ1bmN0aW9uIGVkaXQocmVnZXgsIG9wdCkgewogIHJlZ2V4ID0gdHlwZW9mIHJlZ2V4ID09PSAic3RyaW5nIiA/IHJlZ2V4IDogcmVnZXguc291cmNlCiAgb3B0ID0gb3B0IHx8ICIiCiAgY29uc3Qgb2JqID0gewogICAgcmVwbGFjZTogKG5hbWUsIHZhbCkgPT4gewogICAgICB2YWwgPSB2YWwuc291cmNlIHx8IHZhbAogICAgICB2YWwgPSB2YWwucmVwbGFjZShjYXJldCwgIiQxIikKICAgICAgcmVnZXggPSByZWdleC5yZXBsYWNlKG5hbWUsIHZhbCkKICAgICAgcmV0dXJuIG9iagogICAgfSwKICAgIGdldFJlZ2V4OiAoKSA9PiB7CiAgICAgIHJldHVybiBuZXcgUmVnRXhwKHJlZ2V4LCBvcHQpCiAgICB9LAogIH0KICByZXR1cm4gb2JqCn0KCmNvbnN0IG5vbldvcmRBbmRDb2xvblRlc3QgPSAvW15cdzpdL2cKY29uc3Qgb3JpZ2luSW5kZXBlbmRlbnRVcmwgPSAvXiR8XlthLXpdW2EtejAtOSsuLV0qOnxeWz8jXS9pCgovKioKICogQHBhcmFtIHtib29sZWFufSBzYW5pdGl6ZQogKiBAcGFyYW0ge3N0cmluZ30gYmFzZQogKiBAcGFyYW0ge3N0cmluZ30gaHJlZgogKi8KZnVuY3Rpb24gY2xlYW5Vcmwoc2FuaXRpemUsIGJhc2UsIGhyZWYpIHsKICBpZiAoc2FuaXRpemUpIHsKICAgIGxldCBwcm90CiAgICB0cnkgewogICAgICBwcm90ID0gZGVjb2RlVVJJQ29tcG9uZW50KHVuZXNjYXBlKGhyZWYpKQogICAgICAgIC5yZXBsYWNlKG5vbldvcmRBbmRDb2xvblRlc3QsICIiKQogICAgICAgIC50b0xvd2VyQ2FzZSgpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHJldHVybiBudWxsCiAgICB9CiAgICBpZiAoCiAgICAgIHByb3QuaW5kZXhPZigiamF2YXNjcmlwdDoiKSA9PT0gMCB8fAogICAgICBwcm90LmluZGV4T2YoInZic2NyaXB0OiIpID09PSAwIHx8CiAgICAgIHByb3QuaW5kZXhPZigiZGF0YToiKSA9PT0gMAogICAgKSB7CiAgICAgIHJldHVybiBudWxsCiAgICB9CiAgfQogIGlmIChiYXNlICYmICFvcmlnaW5JbmRlcGVuZGVudFVybC50ZXN0KGhyZWYpKSB7CiAgICBocmVmID0gcmVzb2x2ZVVybChiYXNlLCBocmVmKQogIH0KICB0cnkgewogICAgaHJlZiA9IGVuY29kZVVSSShocmVmKS5yZXBsYWNlKC8lMjUvZywgIiUiKQogIH0gY2F0Y2ggKGUpIHsKICAgIHJldHVybiBudWxsCiAgfQogIHJldHVybiBocmVmCn0KCmNvbnN0IGJhc2VVcmxzID0ge30KY29uc3QganVzdERvbWFpbiA9IC9eW146XSs6XC8qW14vXSokLwpjb25zdCBwcm90b2NvbCA9IC9eKFteOl0rOilbXHNcU10qJC8KY29uc3QgZG9tYWluID0gL14oW146XSs6XC8qW14vXSopW1xzXFNdKiQvCgovKioKICogQHBhcmFtIHtzdHJpbmd9IGJhc2UKICogQHBhcmFtIHtzdHJpbmd9IGhyZWYKICovCmZ1bmN0aW9uIHJlc29sdmVVcmwoYmFzZSwgaHJlZikgewogIGlmICghYmFzZVVybHNbIiAiICsgYmFzZV0pIHsKICAgIC8vIHdlIGNhbiBpZ25vcmUgZXZlcnl0aGluZyBpbiBiYXNlIGFmdGVyIHRoZSBsYXN0IHNsYXNoIG9mIGl0cyBwYXRoIGNvbXBvbmVudCwKICAgIC8vIGJ1dCB3ZSBtaWdodCBuZWVkIHRvIGFkZCBfdGhhdF8KICAgIC8vIGh0dHBzOi8vdG9vbHMuaWV0Zi5vcmcvaHRtbC9yZmMzOTg2I3NlY3Rpb24tMwogICAgaWYgKGp1c3REb21haW4udGVzdChiYXNlKSkgewogICAgICBiYXNlVXJsc1siICIgKyBiYXNlXSA9IGJhc2UgKyAiLyIKICAgIH0gZWxzZSB7CiAgICAgIGJhc2VVcmxzWyIgIiArIGJhc2VdID0gcnRyaW0oYmFzZSwgIi8iLCB0cnVlKQogICAgfQogIH0KICBiYXNlID0gYmFzZVVybHNbIiAiICsgYmFzZV0KICBjb25zdCByZWxhdGl2ZUJhc2UgPSBiYXNlLmluZGV4T2YoIjoiKSA9PT0gLTEKCiAgaWYgKGhyZWYuc3Vic3RyaW5nKDAsIDIpID09PSAiLy8iKSB7CiAgICBpZiAocmVsYXRpdmVCYXNlKSB7CiAgICAgIHJldHVybiBocmVmCiAgICB9CiAgICByZXR1cm4gYmFzZS5yZXBsYWNlKHByb3RvY29sLCAiJDEiKSArIGhyZWYKICB9IGVsc2UgaWYgKGhyZWYuY2hhckF0KDApID09PSAiLyIpIHsKICAgIGlmIChyZWxhdGl2ZUJhc2UpIHsKICAgICAgcmV0dXJuIGhyZWYKICAgIH0KICAgIHJldHVybiBiYXNlLnJlcGxhY2UoZG9tYWluLCAiJDEiKSArIGhyZWYKICB9IGVsc2UgewogICAgcmV0dXJuIGJhc2UgKyBocmVmCiAgfQp9Cgpjb25zdCBub29wVGVzdCA9IHsgZXhlYzogZnVuY3Rpb24gbm9vcFRlc3QoKSB7fSB9CgpmdW5jdGlvbiBtZXJnZShvYmopIHsKICBsZXQgaSA9IDEsCiAgICB0YXJnZXQsCiAgICBrZXkKCiAgZm9yICg7IGkgPCBhcmd1bWVudHMubGVuZ3RoOyBpKyspIHsKICAgIHRhcmdldCA9IGFyZ3VtZW50c1tpXQogICAgZm9yIChrZXkgaW4gdGFyZ2V0KSB7CiAgICAgIGlmIChPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwodGFyZ2V0LCBrZXkpKSB7CiAgICAgICAgb2JqW2tleV0gPSB0YXJnZXRba2V5XQogICAgICB9CiAgICB9CiAgfQoKICByZXR1cm4gb2JqCn0KCmZ1bmN0aW9uIHNwbGl0Q2VsbHModGFibGVSb3csIGNvdW50KSB7CiAgLy8gZW5zdXJlIHRoYXQgZXZlcnkgY2VsbC1kZWxpbWl0aW5nIHBpcGUgaGFzIGEgc3BhY2UKICAvLyBiZWZvcmUgaXQgdG8gZGlzdGluZ3Vpc2ggaXQgZnJvbSBhbiBlc2NhcGVkIHBpcGUKICBjb25zdCByb3cgPSB0YWJsZVJvdy5yZXBsYWNlKC9cfC9nLCAobWF0Y2gsIG9mZnNldCwgc3RyKSA9PiB7CiAgICAgIGxldCBlc2NhcGVkID0gZmFsc2UsCiAgICAgICAgY3VyciA9IG9mZnNldAogICAgICB3aGlsZSAoLS1jdXJyID49IDAgJiYgc3RyW2N1cnJdID09PSAiXFwiKSBlc2NhcGVkID0gIWVzY2FwZWQKICAgICAgaWYgKGVzY2FwZWQpIHsKICAgICAgICAvLyBvZGQgbnVtYmVyIG9mIHNsYXNoZXMgbWVhbnMgfCBpcyBlc2NhcGVkCiAgICAgICAgLy8gc28gd2UgbGVhdmUgaXQgYWxvbmUKICAgICAgICByZXR1cm4gInwiCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gYWRkIHNwYWNlIGJlZm9yZSB1bmVzY2FwZWQgfAogICAgICAgIHJldHVybiAiIHwiCiAgICAgIH0KICAgIH0pLAogICAgY2VsbHMgPSByb3cuc3BsaXQoLyBcfC8pCiAgbGV0IGkgPSAwCgogIC8vIEZpcnN0L2xhc3QgY2VsbCBpbiBhIHJvdyBjYW5ub3QgYmUgZW1wdHkgaWYgaXQgaGFzIG5vIGxlYWRpbmcvdHJhaWxpbmcgcGlwZQogIGlmICghY2VsbHNbMF0udHJpbSgpKSB7CiAgICBjZWxscy5zaGlmdCgpCiAgfQogIGlmIChjZWxscy5sZW5ndGggPiAwICYmICFjZWxsc1tjZWxscy5sZW5ndGggLSAxXS50cmltKCkpIHsKICAgIGNlbGxzLnBvcCgpCiAgfQoKICBpZiAoY2VsbHMubGVuZ3RoID4gY291bnQpIHsKICAgIGNlbGxzLnNwbGljZShjb3VudCkKICB9IGVsc2UgewogICAgd2hpbGUgKGNlbGxzLmxlbmd0aCA8IGNvdW50KSBjZWxscy5wdXNoKCIiKQogIH0KCiAgZm9yICg7IGkgPCBjZWxscy5sZW5ndGg7IGkrKykgewogICAgLy8gbGVhZGluZyBvciB0cmFpbGluZyB3aGl0ZXNwYWNlIGlzIGlnbm9yZWQgcGVyIHRoZSBnZm0gc3BlYwogICAgY2VsbHNbaV0gPSBjZWxsc1tpXS50cmltKCkucmVwbGFjZSgvXFxcfC9nLCAifCIpCiAgfQogIHJldHVybiBjZWxscwp9CgovKioKICogUmVtb3ZlIHRyYWlsaW5nICdjJ3MuIEVxdWl2YWxlbnQgdG8gc3RyLnJlcGxhY2UoL2MqJC8sICcnKS4KICogL2MqJC8gaXMgdnVsbmVyYWJsZSB0byBSRURPUy4KICoKICogQHBhcmFtIHtzdHJpbmd9IHN0cgogKiBAcGFyYW0ge3N0cmluZ30gYwogKiBAcGFyYW0ge2Jvb2xlYW59IGludmVydCBSZW1vdmUgc3VmZml4IG9mIG5vbi1jIGNoYXJzIGluc3RlYWQuIERlZmF1bHQgZmFsc2V5LgogKi8KZnVuY3Rpb24gcnRyaW0oc3RyLCBjLCBpbnZlcnQpIHsKICBjb25zdCBsID0gc3RyLmxlbmd0aAogIGlmIChsID09PSAwKSB7CiAgICByZXR1cm4gIiIKICB9CgogIC8vIExlbmd0aCBvZiBzdWZmaXggbWF0Y2hpbmcgdGhlIGludmVydCBjb25kaXRpb24uCiAgbGV0IHN1ZmZMZW4gPSAwCgogIC8vIFN0ZXAgbGVmdCB1bnRpbCB3ZSBmYWlsIHRvIG1hdGNoIHRoZSBpbnZlcnQgY29uZGl0aW9uLgogIHdoaWxlIChzdWZmTGVuIDwgbCkgewogICAgY29uc3QgY3VyckNoYXIgPSBzdHIuY2hhckF0KGwgLSBzdWZmTGVuIC0gMSkKICAgIGlmIChjdXJyQ2hhciA9PT0gYyAmJiAhaW52ZXJ0KSB7CiAgICAgIHN1ZmZMZW4rKwogICAgfSBlbHNlIGlmIChjdXJyQ2hhciAhPT0gYyAmJiBpbnZlcnQpIHsKICAgICAgc3VmZkxlbisrCiAgICB9IGVsc2UgewogICAgICBicmVhawogICAgfQogIH0KCiAgcmV0dXJuIHN0ci5zbGljZSgwLCBsIC0gc3VmZkxlbikKfQoKZnVuY3Rpb24gZmluZENsb3NpbmdCcmFja2V0KHN0ciwgYikgewogIGlmIChzdHIuaW5kZXhPZihiWzFdKSA9PT0gLTEpIHsKICAgIHJldHVybiAtMQogIH0KICBjb25zdCBsID0gc3RyLmxlbmd0aAogIGxldCBsZXZlbCA9IDAsCiAgICBpID0gMAogIGZvciAoOyBpIDwgbDsgaSsrKSB7CiAgICBpZiAoc3RyW2ldID09PSAiXFwiKSB7CiAgICAgIGkrKwogICAgfSBlbHNlIGlmIChzdHJbaV0gPT09IGJbMF0pIHsKICAgICAgbGV2ZWwrKwogICAgfSBlbHNlIGlmIChzdHJbaV0gPT09IGJbMV0pIHsKICAgICAgbGV2ZWwtLQogICAgICBpZiAobGV2ZWwgPCAwKSB7CiAgICAgICAgcmV0dXJuIGkKICAgICAgfQogICAgfQogIH0KICByZXR1cm4gLTEKfQoKZnVuY3Rpb24gY2hlY2tTYW5pdGl6ZURlcHJlY2F0aW9uKG9wdCkgewogIGlmIChvcHQgJiYgb3B0LnNhbml0aXplICYmICFvcHQuc2lsZW50KSB7CiAgICBjb25zb2xlLndhcm4oCiAgICAgICJtYXJrZWQoKTogc2FuaXRpemUgYW5kIHNhbml0aXplciBwYXJhbWV0ZXJzIGFyZSBkZXByZWNhdGVkIHNpbmNlIHZlcnNpb24gMC43LjAsIHNob3VsZCBub3QgYmUgdXNlZCBhbmQgd2lsbCBiZSByZW1vdmVkIGluIHRoZSBmdXR1cmUuIFJlYWQgbW9yZSBoZXJlOiBodHRwczovL21hcmtlZC5qcy5vcmcvIy9VU0lOR19BRFZBTkNFRC5tZCNvcHRpb25zIgogICAgKQogIH0KfQoKLy8gY29waWVkIGZyb20gaHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9hLzU0NTAxMTMvODA2Nzc3Ci8qKgogKiBAcGFyYW0ge3N0cmluZ30gcGF0dGVybgogKiBAcGFyYW0ge251bWJlcn0gY291bnQKICovCmZ1bmN0aW9uIHJlcGVhdFN0cmluZyhwYXR0ZXJuLCBjb3VudCkgewogIGlmIChjb3VudCA8IDEpIHsKICAgIHJldHVybiAiIgogIH0KICBsZXQgcmVzdWx0ID0gIiIKICB3aGlsZSAoY291bnQgPiAxKSB7CiAgICBpZiAoY291bnQgJiAxKSB7CiAgICAgIHJlc3VsdCArPSBwYXR0ZXJuCiAgICB9CiAgICBjb3VudCA+Pj0gMQogICAgcGF0dGVybiArPSBwYXR0ZXJuCiAgfQogIHJldHVybiByZXN1bHQgKyBwYXR0ZXJuCn0KCmZ1bmN0aW9uIG91dHB1dExpbmsoY2FwLCBsaW5rLCByYXcsIGxleGVyKSB7CiAgY29uc3QgaHJlZiA9IGxpbmsuaHJlZgogIGNvbnN0IHRpdGxlID0gbGluay50aXRsZSA/IGVzY2FwZShsaW5rLnRpdGxlKSA6IG51bGwKICBjb25zdCB0ZXh0ID0gY2FwWzFdLnJlcGxhY2UoL1xcKFtcW1xdXSkvZywgIiQxIikKCiAgaWYgKGNhcFswXS5jaGFyQXQoMCkgIT09ICIhIikgewogICAgbGV4ZXIuc3RhdGUuaW5MaW5rID0gdHJ1ZQogICAgY29uc3QgdG9rZW4gPSB7CiAgICAgIHR5cGU6ICJsaW5rIiwKICAgICAgcmF3LAogICAgICBocmVmLAogICAgICB0aXRsZSwKICAgICAgdGV4dCwKICAgICAgdG9rZW5zOiBsZXhlci5pbmxpbmVUb2tlbnModGV4dCwgW10pLAogICAgfQogICAgbGV4ZXIuc3RhdGUuaW5MaW5rID0gZmFsc2UKICAgIHJldHVybiB0b2tlbgogIH0KICByZXR1cm4gewogICAgdHlwZTogImltYWdlIiwKICAgIHJhdywKICAgIGhyZWYsCiAgICB0aXRsZSwKICAgIHRleHQ6IGVzY2FwZSh0ZXh0KSwKICB9Cn0KCmZ1bmN0aW9uIGluZGVudENvZGVDb21wZW5zYXRpb24ocmF3LCB0ZXh0KSB7CiAgY29uc3QgbWF0Y2hJbmRlbnRUb0NvZGUgPSByYXcubWF0Y2goL14oXHMrKSg/OmBgYCkvKQoKICBpZiAobWF0Y2hJbmRlbnRUb0NvZGUgPT09IG51bGwpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBjb25zdCBpbmRlbnRUb0NvZGUgPSBtYXRjaEluZGVudFRvQ29kZVsxXQoKICByZXR1cm4gdGV4dAogICAgLnNwbGl0KCJcbiIpCiAgICAubWFwKG5vZGUgPT4gewogICAgICBjb25zdCBtYXRjaEluZGVudEluTm9kZSA9IG5vZGUubWF0Y2goL15ccysvKQogICAgICBpZiAobWF0Y2hJbmRlbnRJbk5vZGUgPT09IG51bGwpIHsKICAgICAgICByZXR1cm4gbm9kZQogICAgICB9CgogICAgICBjb25zdCBbaW5kZW50SW5Ob2RlXSA9IG1hdGNoSW5kZW50SW5Ob2RlCgogICAgICBpZiAoaW5kZW50SW5Ob2RlLmxlbmd0aCA+PSBpbmRlbnRUb0NvZGUubGVuZ3RoKSB7CiAgICAgICAgcmV0dXJuIG5vZGUuc2xpY2UoaW5kZW50VG9Db2RlLmxlbmd0aCkKICAgICAgfQoKICAgICAgcmV0dXJuIG5vZGUKICAgIH0pCiAgICAuam9pbigiXG4iKQp9CgovKioKICogVG9rZW5pemVyCiAqLwpjbGFzcyBUb2tlbml6ZXIgewogIGNvbnN0cnVjdG9yKG9wdGlvbnMpIHsKICAgIHRoaXMub3B0aW9ucyA9IG9wdGlvbnMgfHwgZGVmYXVsdHMKICB9CgogIHNwYWNlKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5uZXdsaW5lLmV4ZWMoc3JjKQogICAgaWYgKGNhcCAmJiBjYXBbMF0ubGVuZ3RoID4gMCkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJzcGFjZSIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgIH0KICAgIH0KICB9CgogIGNvZGUoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmJsb2NrLmNvZGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IHRleHQgPSBjYXBbMF0ucmVwbGFjZSgvXiB7MSw0fS9nbSwgIiIpCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImNvZGUiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGNvZGVCbG9ja1N0eWxlOiAiaW5kZW50ZWQiLAogICAgICAgIHRleHQ6ICF0aGlzLm9wdGlvbnMucGVkYW50aWMgPyBydHJpbSh0ZXh0LCAiXG4iKSA6IHRleHQsCiAgICAgIH0KICAgIH0KICB9CgogIGZlbmNlcyhzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuYmxvY2suZmVuY2VzLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBjb25zdCByYXcgPSBjYXBbMF0KICAgICAgY29uc3QgdGV4dCA9IGluZGVudENvZGVDb21wZW5zYXRpb24ocmF3LCBjYXBbM10gfHwgIiIpCgogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJjb2RlIiwKICAgICAgICByYXcsCiAgICAgICAgbGFuZzogY2FwWzJdID8gY2FwWzJdLnRyaW0oKSA6IGNhcFsyXSwKICAgICAgICB0ZXh0LAogICAgICB9CiAgICB9CiAgfQoKICBoZWFkaW5nKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5oZWFkaW5nLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBsZXQgdGV4dCA9IGNhcFsyXS50cmltKCkKCiAgICAgIC8vIHJlbW92ZSB0cmFpbGluZyAjcwogICAgICBpZiAoLyMkLy50ZXN0KHRleHQpKSB7CiAgICAgICAgY29uc3QgdHJpbW1lZCA9IHJ0cmltKHRleHQsICIjIikKICAgICAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljKSB7CiAgICAgICAgICB0ZXh0ID0gdHJpbW1lZC50cmltKCkKICAgICAgICB9IGVsc2UgaWYgKCF0cmltbWVkIHx8IC8gJC8udGVzdCh0cmltbWVkKSkgewogICAgICAgICAgLy8gQ29tbW9uTWFyayByZXF1aXJlcyBzcGFjZSBiZWZvcmUgdHJhaWxpbmcgI3MKICAgICAgICAgIHRleHQgPSB0cmltbWVkLnRyaW0oKQogICAgICAgIH0KICAgICAgfQoKICAgICAgY29uc3QgdG9rZW4gPSB7CiAgICAgICAgdHlwZTogImhlYWRpbmciLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGRlcHRoOiBjYXBbMV0ubGVuZ3RoLAogICAgICAgIHRleHQsCiAgICAgICAgdG9rZW5zOiBbXSwKICAgICAgfQogICAgICB0aGlzLmxleGVyLmlubGluZSh0b2tlbi50ZXh0LCB0b2tlbi50b2tlbnMpCiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgaHIoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmJsb2NrLmhyLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJociIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgIH0KICAgIH0KICB9CgogIGJsb2NrcXVvdGUoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmJsb2NrLmJsb2NrcXVvdGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IHRleHQgPSBjYXBbMF0ucmVwbGFjZSgvXiAqPlsgXHRdPy9nbSwgIiIpCgogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJibG9ja3F1b3RlIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0b2tlbnM6IHRoaXMubGV4ZXIuYmxvY2tUb2tlbnModGV4dCwgW10pLAogICAgICAgIHRleHQsCiAgICAgIH0KICAgIH0KICB9CgogIGxpc3Qoc3JjKSB7CiAgICBsZXQgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5saXN0LmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBsZXQgcmF3LAogICAgICAgIGlzdGFzaywKICAgICAgICBpc2NoZWNrZWQsCiAgICAgICAgaW5kZW50LAogICAgICAgIGksCiAgICAgICAgYmxhbmtMaW5lLAogICAgICAgIGVuZHNXaXRoQmxhbmtMaW5lLAogICAgICAgIGxpbmUsCiAgICAgICAgbmV4dExpbmUsCiAgICAgICAgcmF3TGluZSwKICAgICAgICBpdGVtQ29udGVudHMsCiAgICAgICAgZW5kRWFybHkKCiAgICAgIGxldCBidWxsID0gY2FwWzFdLnRyaW0oKQogICAgICBjb25zdCBpc29yZGVyZWQgPSBidWxsLmxlbmd0aCA+IDEKCiAgICAgIGNvbnN0IGxpc3QgPSB7CiAgICAgICAgdHlwZTogImxpc3QiLAogICAgICAgIHJhdzogIiIsCiAgICAgICAgb3JkZXJlZDogaXNvcmRlcmVkLAogICAgICAgIHN0YXJ0OiBpc29yZGVyZWQgPyArYnVsbC5zbGljZSgwLCAtMSkgOiAiIiwKICAgICAgICBsb29zZTogZmFsc2UsCiAgICAgICAgaXRlbXM6IFtdLAogICAgICB9CgogICAgICBidWxsID0gaXNvcmRlcmVkID8gYFxcZHsxLDl9XFwke2J1bGwuc2xpY2UoLTEpfWAgOiBgXFwke2J1bGx9YAoKICAgICAgaWYgKHRoaXMub3B0aW9ucy5wZWRhbnRpYykgewogICAgICAgIGJ1bGwgPSBpc29yZGVyZWQgPyBidWxsIDogIlsqKy1dIgogICAgICB9CgogICAgICAvLyBHZXQgbmV4dCBsaXN0IGl0ZW0KICAgICAgY29uc3QgaXRlbVJlZ2V4ID0gbmV3IFJlZ0V4cCgKICAgICAgICBgXiggezAsM30ke2J1bGx9KSgoPzpbXHQgXVteXFxuXSopPyg/OlxcbnwkKSlgCiAgICAgICkKCiAgICAgIC8vIENoZWNrIGlmIGN1cnJlbnQgYnVsbGV0IHBvaW50IGNhbiBzdGFydCBhIG5ldyBMaXN0IEl0ZW0KICAgICAgd2hpbGUgKHNyYykgewogICAgICAgIGVuZEVhcmx5ID0gZmFsc2UKICAgICAgICBpZiAoIShjYXAgPSBpdGVtUmVnZXguZXhlYyhzcmMpKSkgewogICAgICAgICAgYnJlYWsKICAgICAgICB9CgogICAgICAgIGlmICh0aGlzLnJ1bGVzLmJsb2NrLmhyLnRlc3Qoc3JjKSkgewogICAgICAgICAgLy8gRW5kIGxpc3QgaWYgYnVsbGV0IHdhcyBhY3R1YWxseSBIUiAocG9zc2libHkgbW92ZSBpbnRvIGl0ZW1SZWdleD8pCiAgICAgICAgICBicmVhawogICAgICAgIH0KCiAgICAgICAgcmF3ID0gY2FwWzBdCiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyhyYXcubGVuZ3RoKQoKICAgICAgICBsaW5lID0gY2FwWzJdLnNwbGl0KCJcbiIsIDEpWzBdCiAgICAgICAgbmV4dExpbmUgPSBzcmMuc3BsaXQoIlxuIiwgMSlbMF0KCiAgICAgICAgaWYgKHRoaXMub3B0aW9ucy5wZWRhbnRpYykgewogICAgICAgICAgaW5kZW50ID0gMgogICAgICAgICAgaXRlbUNvbnRlbnRzID0gbGluZS50cmltTGVmdCgpCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIGluZGVudCA9IGNhcFsyXS5zZWFyY2goL1teIF0vKSAvLyBGaW5kIGZpcnN0IG5vbi1zcGFjZSBjaGFyCiAgICAgICAgICBpbmRlbnQgPSBpbmRlbnQgPiA0ID8gMSA6IGluZGVudCAvLyBUcmVhdCBpbmRlbnRlZCBjb2RlIGJsb2NrcyAoPiA0IHNwYWNlcykgYXMgaGF2aW5nIG9ubHkgMSBpbmRlbnQKICAgICAgICAgIGl0ZW1Db250ZW50cyA9IGxpbmUuc2xpY2UoaW5kZW50KQogICAgICAgICAgaW5kZW50ICs9IGNhcFsxXS5sZW5ndGgKICAgICAgICB9CgogICAgICAgIGJsYW5rTGluZSA9IGZhbHNlCgogICAgICAgIGlmICghbGluZSAmJiAvXiAqJC8udGVzdChuZXh0TGluZSkpIHsKICAgICAgICAgIC8vIEl0ZW1zIGJlZ2luIHdpdGggYXQgbW9zdCBvbmUgYmxhbmsgbGluZQogICAgICAgICAgcmF3ICs9IG5leHRMaW5lICsgIlxuIgogICAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyhuZXh0TGluZS5sZW5ndGggKyAxKQogICAgICAgICAgZW5kRWFybHkgPSB0cnVlCiAgICAgICAgfQoKICAgICAgICBpZiAoIWVuZEVhcmx5KSB7CiAgICAgICAgICBjb25zdCBuZXh0QnVsbGV0UmVnZXggPSBuZXcgUmVnRXhwKAogICAgICAgICAgICBgXiB7MCwke01hdGgubWluKAogICAgICAgICAgICAgIDMsCiAgICAgICAgICAgICAgaW5kZW50IC0gMQogICAgICAgICAgICApfX0oPzpbKistXXxcXGR7MSw5fVsuKV0pKCg/OiBbXlxcbl0qKT8oPzpcXG58JCkpYAogICAgICAgICAgKQogICAgICAgICAgY29uc3QgaHJSZWdleCA9IG5ldyBSZWdFeHAoCiAgICAgICAgICAgIGBeIHswLCR7TWF0aC5taW4oCiAgICAgICAgICAgICAgMywKICAgICAgICAgICAgICBpbmRlbnQgLSAxCiAgICAgICAgICAgICl9fSgoPzotICopezMsfXwoPzpfICopezMsfXwoPzpcXCogKil7Myx9KSg/Olxcbit8JClgCiAgICAgICAgICApCgogICAgICAgICAgLy8gQ2hlY2sgaWYgZm9sbG93aW5nIGxpbmVzIHNob3VsZCBiZSBpbmNsdWRlZCBpbiBMaXN0IEl0ZW0KICAgICAgICAgIHdoaWxlIChzcmMpIHsKICAgICAgICAgICAgcmF3TGluZSA9IHNyYy5zcGxpdCgiXG4iLCAxKVswXQogICAgICAgICAgICBsaW5lID0gcmF3TGluZQoKICAgICAgICAgICAgLy8gUmUtYWxpZ24gdG8gZm9sbG93IGNvbW1vbm1hcmsgbmVzdGluZyBydWxlcwogICAgICAgICAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljKSB7CiAgICAgICAgICAgICAgbGluZSA9IGxpbmUucmVwbGFjZSgvXiB7MSw0fSg/PSggezR9KSpbXiBdKS9nLCAiICAiKQogICAgICAgICAgICB9CgogICAgICAgICAgICAvLyBFbmQgbGlzdCBpdGVtIGlmIGZvdW5kIHN0YXJ0IG9mIG5ldyBidWxsZXQKICAgICAgICAgICAgaWYgKG5leHRCdWxsZXRSZWdleC50ZXN0KGxpbmUpKSB7CiAgICAgICAgICAgICAgYnJlYWsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLy8gSG9yaXpvbnRhbCBydWxlIGZvdW5kCiAgICAgICAgICAgIGlmIChoclJlZ2V4LnRlc3Qoc3JjKSkgewogICAgICAgICAgICAgIGJyZWFrCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGlmIChsaW5lLnNlYXJjaCgvW14gXS8pID49IGluZGVudCB8fCAhbGluZS50cmltKCkpIHsKICAgICAgICAgICAgICAvLyBEZWRlbnQgaWYgcG9zc2libGUKICAgICAgICAgICAgICBpdGVtQ29udGVudHMgKz0gIlxuIiArIGxpbmUuc2xpY2UoaW5kZW50KQogICAgICAgICAgICB9IGVsc2UgaWYgKCFibGFua0xpbmUpIHsKICAgICAgICAgICAgICAvLyBVbnRpbCBibGFuayBsaW5lLCBpdGVtIGRvZXNuJ3QgbmVlZCBpbmRlbnRhdGlvbgogICAgICAgICAgICAgIGl0ZW1Db250ZW50cyArPSAiXG4iICsgbGluZQogICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgIC8vIE90aGVyd2lzZSwgaW1wcm9wZXIgaW5kZW50YXRpb24gZW5kcyB0aGlzIGl0ZW0KICAgICAgICAgICAgICBicmVhawogICAgICAgICAgICB9CgogICAgICAgICAgICBpZiAoIWJsYW5rTGluZSAmJiAhbGluZS50cmltKCkpIHsKICAgICAgICAgICAgICAvLyBDaGVjayBpZiBjdXJyZW50IGxpbmUgaXMgYmxhbmsKICAgICAgICAgICAgICBibGFua0xpbmUgPSB0cnVlCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIHJhdyArPSByYXdMaW5lICsgIlxuIgogICAgICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHJhd0xpbmUubGVuZ3RoICsgMSkKICAgICAgICAgIH0KICAgICAgICB9CgogICAgICAgIGlmICghbGlzdC5sb29zZSkgewogICAgICAgICAgLy8gSWYgdGhlIHByZXZpb3VzIGl0ZW0gZW5kZWQgd2l0aCBhIGJsYW5rIGxpbmUsIHRoZSBsaXN0IGlzIGxvb3NlCiAgICAgICAgICBpZiAoZW5kc1dpdGhCbGFua0xpbmUpIHsKICAgICAgICAgICAgbGlzdC5sb29zZSA9IHRydWUKICAgICAgICAgIH0gZWxzZSBpZiAoL1xuICpcbiAqJC8udGVzdChyYXcpKSB7CiAgICAgICAgICAgIGVuZHNXaXRoQmxhbmtMaW5lID0gdHJ1ZQogICAgICAgICAgfQogICAgICAgIH0KCiAgICAgICAgLy8gQ2hlY2sgZm9yIHRhc2sgbGlzdCBpdGVtcwogICAgICAgIGlmICh0aGlzLm9wdGlvbnMuZ2ZtKSB7CiAgICAgICAgICBpc3Rhc2sgPSAvXlxbWyB4WF1cXSAvLmV4ZWMoaXRlbUNvbnRlbnRzKQogICAgICAgICAgaWYgKGlzdGFzaykgewogICAgICAgICAgICBpc2NoZWNrZWQgPSBpc3Rhc2tbMF0gIT09ICJbIF0gIgogICAgICAgICAgICBpdGVtQ29udGVudHMgPSBpdGVtQ29udGVudHMucmVwbGFjZSgvXlxbWyB4WF1cXSArLywgIiIpCiAgICAgICAgICB9CiAgICAgICAgfQoKICAgICAgICBsaXN0Lml0ZW1zLnB1c2goewogICAgICAgICAgdHlwZTogImxpc3RfaXRlbSIsCiAgICAgICAgICByYXcsCiAgICAgICAgICB0YXNrOiAhIWlzdGFzaywKICAgICAgICAgIGNoZWNrZWQ6IGlzY2hlY2tlZCwKICAgICAgICAgIGxvb3NlOiBmYWxzZSwKICAgICAgICAgIHRleHQ6IGl0ZW1Db250ZW50cywKICAgICAgICB9KQoKICAgICAgICBsaXN0LnJhdyArPSByYXcKICAgICAgfQoKICAgICAgLy8gRG8gbm90IGNvbnN1bWUgbmV3bGluZXMgYXQgZW5kIG9mIGZpbmFsIGl0ZW0uIEFsdGVybmF0aXZlbHksIG1ha2UgaXRlbVJlZ2V4ICpzdGFydCogd2l0aCBhbnkgbmV3bGluZXMgdG8gc2ltcGxpZnkvc3BlZWQgdXAgZW5kc1dpdGhCbGFua0xpbmUgbG9naWMKICAgICAgbGlzdC5pdGVtc1tsaXN0Lml0ZW1zLmxlbmd0aCAtIDFdLnJhdyA9IHJhdy50cmltUmlnaHQoKQogICAgICBsaXN0Lml0ZW1zW2xpc3QuaXRlbXMubGVuZ3RoIC0gMV0udGV4dCA9IGl0ZW1Db250ZW50cy50cmltUmlnaHQoKQogICAgICBsaXN0LnJhdyA9IGxpc3QucmF3LnRyaW1SaWdodCgpCgogICAgICBjb25zdCBsID0gbGlzdC5pdGVtcy5sZW5ndGgKCiAgICAgIC8vIEl0ZW0gY2hpbGQgdG9rZW5zIGhhbmRsZWQgaGVyZSBhdCBlbmQgYmVjYXVzZSB3ZSBuZWVkZWQgdG8gaGF2ZSB0aGUgZmluYWwgaXRlbSB0byB0cmltIGl0IGZpcnN0CiAgICAgIGZvciAoaSA9IDA7IGkgPCBsOyBpKyspIHsKICAgICAgICB0aGlzLmxleGVyLnN0YXRlLnRvcCA9IGZhbHNlCiAgICAgICAgbGlzdC5pdGVtc1tpXS50b2tlbnMgPSB0aGlzLmxleGVyLmJsb2NrVG9rZW5zKGxpc3QuaXRlbXNbaV0udGV4dCwgW10pCiAgICAgICAgY29uc3Qgc3BhY2VycyA9IGxpc3QuaXRlbXNbaV0udG9rZW5zLmZpbHRlcih0ID0+IHQudHlwZSA9PT0gInNwYWNlIikKICAgICAgICBjb25zdCBoYXNNdWx0aXBsZUxpbmVCcmVha3MgPSBzcGFjZXJzLmV2ZXJ5KHQgPT4gewogICAgICAgICAgY29uc3QgY2hhcnMgPSB0LnJhdy5zcGxpdCgiIikKICAgICAgICAgIGxldCBsaW5lQnJlYWtzID0gMAogICAgICAgICAgZm9yIChjb25zdCBjaGFyIG9mIGNoYXJzKSB7CiAgICAgICAgICAgIGlmIChjaGFyID09PSAiXG4iKSB7CiAgICAgICAgICAgICAgbGluZUJyZWFrcyArPSAxCiAgICAgICAgICAgIH0KICAgICAgICAgICAgaWYgKGxpbmVCcmVha3MgPiAxKSB7CiAgICAgICAgICAgICAgcmV0dXJuIHRydWUKICAgICAgICAgICAgfQogICAgICAgICAgfQoKICAgICAgICAgIHJldHVybiBmYWxzZQogICAgICAgIH0pCgogICAgICAgIGlmICghbGlzdC5sb29zZSAmJiBzcGFjZXJzLmxlbmd0aCAmJiBoYXNNdWx0aXBsZUxpbmVCcmVha3MpIHsKICAgICAgICAgIC8vIEhhdmluZyBhIHNpbmdsZSBsaW5lIGJyZWFrIGRvZXNuJ3QgbWVhbiBhIGxpc3QgaXMgbG9vc2UuIEEgc2luZ2xlIGxpbmUgYnJlYWsgaXMgdGVybWluYXRpbmcgdGhlIGxhc3QgbGlzdCBpdGVtCiAgICAgICAgICBsaXN0Lmxvb3NlID0gdHJ1ZQogICAgICAgICAgbGlzdC5pdGVtc1tpXS5sb29zZSA9IHRydWUKICAgICAgICB9CiAgICAgIH0KCiAgICAgIHJldHVybiBsaXN0CiAgICB9CiAgfQoKICBodG1sKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5odG1sLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBjb25zdCB0b2tlbiA9IHsKICAgICAgICB0eXBlOiAiaHRtbCIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgICAgcHJlOgogICAgICAgICAgIXRoaXMub3B0aW9ucy5zYW5pdGl6ZXIgJiYKICAgICAgICAgIChjYXBbMV0gPT09ICJwcmUiIHx8IGNhcFsxXSA9PT0gInNjcmlwdCIgfHwgY2FwWzFdID09PSAic3R5bGUiKSwKICAgICAgICB0ZXh0OiBjYXBbMF0sCiAgICAgIH0KICAgICAgaWYgKHRoaXMub3B0aW9ucy5zYW5pdGl6ZSkgewogICAgICAgIHRva2VuLnR5cGUgPSAicGFyYWdyYXBoIgogICAgICAgIHRva2VuLnRleHQgPSB0aGlzLm9wdGlvbnMuc2FuaXRpemVyCiAgICAgICAgICA/IHRoaXMub3B0aW9ucy5zYW5pdGl6ZXIoY2FwWzBdKQogICAgICAgICAgOiBlc2NhcGUoY2FwWzBdKQogICAgICAgIHRva2VuLnRva2VucyA9IFtdCiAgICAgICAgdGhpcy5sZXhlci5pbmxpbmUodG9rZW4udGV4dCwgdG9rZW4udG9rZW5zKQogICAgICB9CiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgZGVmKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5kZWYuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGlmIChjYXBbM10pIGNhcFszXSA9IGNhcFszXS5zdWJzdHJpbmcoMSwgY2FwWzNdLmxlbmd0aCAtIDEpCiAgICAgIGNvbnN0IHRhZyA9IGNhcFsxXS50b0xvd2VyQ2FzZSgpLnJlcGxhY2UoL1xzKy9nLCAiICIpCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImRlZiIsCiAgICAgICAgdGFnLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGhyZWY6IGNhcFsyXSwKICAgICAgICB0aXRsZTogY2FwWzNdLAogICAgICB9CiAgICB9CiAgfQoKICB0YWJsZShzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuYmxvY2sudGFibGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IGl0ZW0gPSB7CiAgICAgICAgdHlwZTogInRhYmxlIiwKICAgICAgICBoZWFkZXI6IHNwbGl0Q2VsbHMoY2FwWzFdKS5tYXAoYyA9PiB7CiAgICAgICAgICByZXR1cm4geyB0ZXh0OiBjIH0KICAgICAgICB9KSwKICAgICAgICBhbGlnbjogY2FwWzJdLnJlcGxhY2UoL14gKnxcfCAqJC9nLCAiIikuc3BsaXQoLyAqXHwgKi8pLAogICAgICAgIHJvd3M6CiAgICAgICAgICBjYXBbM10gJiYgY2FwWzNdLnRyaW0oKQogICAgICAgICAgICA/IGNhcFszXS5yZXBsYWNlKC9cblsgXHRdKiQvLCAiIikuc3BsaXQoIlxuIikKICAgICAgICAgICAgOiBbXSwKICAgICAgfQoKICAgICAgaWYgKGl0ZW0uaGVhZGVyLmxlbmd0aCA9PT0gaXRlbS5hbGlnbi5sZW5ndGgpIHsKICAgICAgICBpdGVtLnJhdyA9IGNhcFswXQoKICAgICAgICBsZXQgbCA9IGl0ZW0uYWxpZ24ubGVuZ3RoCiAgICAgICAgbGV0IGksIGosIGssIHJvdwogICAgICAgIGZvciAoaSA9IDA7IGkgPCBsOyBpKyspIHsKICAgICAgICAgIGlmICgvXiAqLSs6ICokLy50ZXN0KGl0ZW0uYWxpZ25baV0pKSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSAicmlnaHQiCiAgICAgICAgICB9IGVsc2UgaWYgKC9eICo6LSs6ICokLy50ZXN0KGl0ZW0uYWxpZ25baV0pKSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSAiY2VudGVyIgogICAgICAgICAgfSBlbHNlIGlmICgvXiAqOi0rICokLy50ZXN0KGl0ZW0uYWxpZ25baV0pKSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSAibGVmdCIKICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgIGl0ZW0uYWxpZ25baV0gPSBudWxsCiAgICAgICAgICB9CiAgICAgICAgfQoKICAgICAgICBsID0gaXRlbS5yb3dzLmxlbmd0aAogICAgICAgIGZvciAoaSA9IDA7IGkgPCBsOyBpKyspIHsKICAgICAgICAgIGl0ZW0ucm93c1tpXSA9IHNwbGl0Q2VsbHMoaXRlbS5yb3dzW2ldLCBpdGVtLmhlYWRlci5sZW5ndGgpLm1hcChjID0+IHsKICAgICAgICAgICAgcmV0dXJuIHsgdGV4dDogYyB9CiAgICAgICAgICB9KQogICAgICAgIH0KCiAgICAgICAgLy8gcGFyc2UgY2hpbGQgdG9rZW5zIGluc2lkZSBoZWFkZXJzIGFuZCBjZWxscwoKICAgICAgICAvLyBoZWFkZXIgY2hpbGQgdG9rZW5zCiAgICAgICAgbCA9IGl0ZW0uaGVhZGVyLmxlbmd0aAogICAgICAgIGZvciAoaiA9IDA7IGogPCBsOyBqKyspIHsKICAgICAgICAgIGl0ZW0uaGVhZGVyW2pdLnRva2VucyA9IFtdCiAgICAgICAgICB0aGlzLmxleGVyLmlubGluZShpdGVtLmhlYWRlcltqXS50ZXh0LCBpdGVtLmhlYWRlcltqXS50b2tlbnMpCiAgICAgICAgfQoKICAgICAgICAvLyBjZWxsIGNoaWxkIHRva2VucwogICAgICAgIGwgPSBpdGVtLnJvd3MubGVuZ3RoCiAgICAgICAgZm9yIChqID0gMDsgaiA8IGw7IGorKykgewogICAgICAgICAgcm93ID0gaXRlbS5yb3dzW2pdCiAgICAgICAgICBmb3IgKGsgPSAwOyBrIDwgcm93Lmxlbmd0aDsgaysrKSB7CiAgICAgICAgICAgIHJvd1trXS50b2tlbnMgPSBbXQogICAgICAgICAgICB0aGlzLmxleGVyLmlubGluZShyb3dba10udGV4dCwgcm93W2tdLnRva2VucykKICAgICAgICAgIH0KICAgICAgICB9CgogICAgICAgIHJldHVybiBpdGVtCiAgICAgIH0KICAgIH0KICB9CgogIGxoZWFkaW5nKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5saGVhZGluZy5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgY29uc3QgdG9rZW4gPSB7CiAgICAgICAgdHlwZTogImhlYWRpbmciLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGRlcHRoOiBjYXBbMl0uY2hhckF0KDApID09PSAiPSIgPyAxIDogMiwKICAgICAgICB0ZXh0OiBjYXBbMV0sCiAgICAgICAgdG9rZW5zOiBbXSwKICAgICAgfQogICAgICB0aGlzLmxleGVyLmlubGluZSh0b2tlbi50ZXh0LCB0b2tlbi50b2tlbnMpCiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgcGFyYWdyYXBoKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5ibG9jay5wYXJhZ3JhcGguZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGNvbnN0IHRva2VuID0gewogICAgICAgIHR5cGU6ICJwYXJhZ3JhcGgiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIHRleHQ6CiAgICAgICAgICBjYXBbMV0uY2hhckF0KGNhcFsxXS5sZW5ndGggLSAxKSA9PT0gIlxuIgogICAgICAgICAgICA/IGNhcFsxXS5zbGljZSgwLCAtMSkKICAgICAgICAgICAgOiBjYXBbMV0sCiAgICAgICAgdG9rZW5zOiBbXSwKICAgICAgfQogICAgICB0aGlzLmxleGVyLmlubGluZSh0b2tlbi50ZXh0LCB0b2tlbi50b2tlbnMpCiAgICAgIHJldHVybiB0b2tlbgogICAgfQogIH0KCiAgdGV4dChzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuYmxvY2sudGV4dC5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgY29uc3QgdG9rZW4gPSB7CiAgICAgICAgdHlwZTogInRleHQiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIHRleHQ6IGNhcFswXSwKICAgICAgICB0b2tlbnM6IFtdLAogICAgICB9CiAgICAgIHRoaXMubGV4ZXIuaW5saW5lKHRva2VuLnRleHQsIHRva2VuLnRva2VucykKICAgICAgcmV0dXJuIHRva2VuCiAgICB9CiAgfQoKICBlc2NhcGUoc3JjKSB7CiAgICBjb25zdCBjYXAgPSB0aGlzLnJ1bGVzLmlubGluZS5lc2NhcGUuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImVzY2FwZSIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgICAgdGV4dDogZXNjYXBlKGNhcFsxXSksCiAgICAgIH0KICAgIH0KICB9CgogIHRhZyhzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLnRhZy5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgaWYgKCF0aGlzLmxleGVyLnN0YXRlLmluTGluayAmJiAvXjxhIC9pLnRlc3QoY2FwWzBdKSkgewogICAgICAgIHRoaXMubGV4ZXIuc3RhdGUuaW5MaW5rID0gdHJ1ZQogICAgICB9IGVsc2UgaWYgKHRoaXMubGV4ZXIuc3RhdGUuaW5MaW5rICYmIC9ePFwvYT4vaS50ZXN0KGNhcFswXSkpIHsKICAgICAgICB0aGlzLmxleGVyLnN0YXRlLmluTGluayA9IGZhbHNlCiAgICAgIH0KICAgICAgaWYgKAogICAgICAgICF0aGlzLmxleGVyLnN0YXRlLmluUmF3QmxvY2sgJiYKICAgICAgICAvXjwocHJlfGNvZGV8a2JkfHNjcmlwdCkoXHN8PikvaS50ZXN0KGNhcFswXSkKICAgICAgKSB7CiAgICAgICAgdGhpcy5sZXhlci5zdGF0ZS5pblJhd0Jsb2NrID0gdHJ1ZQogICAgICB9IGVsc2UgaWYgKAogICAgICAgIHRoaXMubGV4ZXIuc3RhdGUuaW5SYXdCbG9jayAmJgogICAgICAgIC9ePFwvKHByZXxjb2RlfGtiZHxzY3JpcHQpKFxzfD4pL2kudGVzdChjYXBbMF0pCiAgICAgICkgewogICAgICAgIHRoaXMubGV4ZXIuc3RhdGUuaW5SYXdCbG9jayA9IGZhbHNlCiAgICAgIH0KCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogdGhpcy5vcHRpb25zLnNhbml0aXplID8gInRleHQiIDogImh0bWwiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIGluTGluazogdGhpcy5sZXhlci5zdGF0ZS5pbkxpbmssCiAgICAgICAgaW5SYXdCbG9jazogdGhpcy5sZXhlci5zdGF0ZS5pblJhd0Jsb2NrLAogICAgICAgIHRleHQ6IHRoaXMub3B0aW9ucy5zYW5pdGl6ZQogICAgICAgICAgPyB0aGlzLm9wdGlvbnMuc2FuaXRpemVyCiAgICAgICAgICAgID8gdGhpcy5vcHRpb25zLnNhbml0aXplcihjYXBbMF0pCiAgICAgICAgICAgIDogZXNjYXBlKGNhcFswXSkKICAgICAgICAgIDogY2FwWzBdLAogICAgICB9CiAgICB9CiAgfQoKICBsaW5rKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5pbmxpbmUubGluay5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgY29uc3QgdHJpbW1lZFVybCA9IGNhcFsyXS50cmltKCkKICAgICAgaWYgKCF0aGlzLm9wdGlvbnMucGVkYW50aWMgJiYgL148Ly50ZXN0KHRyaW1tZWRVcmwpKSB7CiAgICAgICAgLy8gY29tbW9ubWFyayByZXF1aXJlcyBtYXRjaGluZyBhbmdsZSBicmFja2V0cwogICAgICAgIGlmICghLz4kLy50ZXN0KHRyaW1tZWRVcmwpKSB7CiAgICAgICAgICByZXR1cm4KICAgICAgICB9CgogICAgICAgIC8vIGVuZGluZyBhbmdsZSBicmFja2V0IGNhbm5vdCBiZSBlc2NhcGVkCiAgICAgICAgY29uc3QgcnRyaW1TbGFzaCA9IHJ0cmltKHRyaW1tZWRVcmwuc2xpY2UoMCwgLTEpLCAiXFwiKQogICAgICAgIGlmICgodHJpbW1lZFVybC5sZW5ndGggLSBydHJpbVNsYXNoLmxlbmd0aCkgJSAyID09PSAwKSB7CiAgICAgICAgICByZXR1cm4KICAgICAgICB9CiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gZmluZCBjbG9zaW5nIHBhcmVudGhlc2lzCiAgICAgICAgY29uc3QgbGFzdFBhcmVuSW5kZXggPSBmaW5kQ2xvc2luZ0JyYWNrZXQoY2FwWzJdLCAiKCkiKQogICAgICAgIGlmIChsYXN0UGFyZW5JbmRleCA+IC0xKSB7CiAgICAgICAgICBjb25zdCBzdGFydCA9IGNhcFswXS5pbmRleE9mKCIhIikgPT09IDAgPyA1IDogNAogICAgICAgICAgY29uc3QgbGlua0xlbiA9IHN0YXJ0ICsgY2FwWzFdLmxlbmd0aCArIGxhc3RQYXJlbkluZGV4CiAgICAgICAgICBjYXBbMl0gPSBjYXBbMl0uc3Vic3RyaW5nKDAsIGxhc3RQYXJlbkluZGV4KQogICAgICAgICAgY2FwWzBdID0gY2FwWzBdLnN1YnN0cmluZygwLCBsaW5rTGVuKS50cmltKCkKICAgICAgICAgIGNhcFszXSA9ICIiCiAgICAgICAgfQogICAgICB9CiAgICAgIGxldCBocmVmID0gY2FwWzJdCiAgICAgIGxldCB0aXRsZSA9ICIiCiAgICAgIGlmICh0aGlzLm9wdGlvbnMucGVkYW50aWMpIHsKICAgICAgICAvLyBzcGxpdCBwZWRhbnRpYyBocmVmIGFuZCB0aXRsZQogICAgICAgIGNvbnN0IGxpbmsgPSAvXihbXiciXSpbXlxzXSlccysoWyciXSkoLiopXDIvLmV4ZWMoaHJlZikKCiAgICAgICAgaWYgKGxpbmspIHsKICAgICAgICAgIGhyZWYgPSBsaW5rWzFdCiAgICAgICAgICB0aXRsZSA9IGxpbmtbM10KICAgICAgICB9CiAgICAgIH0gZWxzZSB7CiAgICAgICAgdGl0bGUgPSBjYXBbM10gPyBjYXBbM10uc2xpY2UoMSwgLTEpIDogIiIKICAgICAgfQoKICAgICAgaHJlZiA9IGhyZWYudHJpbSgpCiAgICAgIGlmICgvXjwvLnRlc3QoaHJlZikpIHsKICAgICAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljICYmICEvPiQvLnRlc3QodHJpbW1lZFVybCkpIHsKICAgICAgICAgIC8vIHBlZGFudGljIGFsbG93cyBzdGFydGluZyBhbmdsZSBicmFja2V0IHdpdGhvdXQgZW5kaW5nIGFuZ2xlIGJyYWNrZXQKICAgICAgICAgIGhyZWYgPSBocmVmLnNsaWNlKDEpCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIGhyZWYgPSBocmVmLnNsaWNlKDEsIC0xKQogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gb3V0cHV0TGluaygKICAgICAgICBjYXAsCiAgICAgICAgewogICAgICAgICAgaHJlZjogaHJlZiA/IGhyZWYucmVwbGFjZSh0aGlzLnJ1bGVzLmlubGluZS5fZXNjYXBlcywgIiQxIikgOiBocmVmLAogICAgICAgICAgdGl0bGU6IHRpdGxlCiAgICAgICAgICAgID8gdGl0bGUucmVwbGFjZSh0aGlzLnJ1bGVzLmlubGluZS5fZXNjYXBlcywgIiQxIikKICAgICAgICAgICAgOiB0aXRsZSwKICAgICAgICB9LAogICAgICAgIGNhcFswXSwKICAgICAgICB0aGlzLmxleGVyCiAgICAgICkKICAgIH0KICB9CgogIHJlZmxpbmsoc3JjLCBsaW5rcykgewogICAgbGV0IGNhcAogICAgaWYgKAogICAgICAoY2FwID0gdGhpcy5ydWxlcy5pbmxpbmUucmVmbGluay5leGVjKHNyYykpIHx8CiAgICAgIChjYXAgPSB0aGlzLnJ1bGVzLmlubGluZS5ub2xpbmsuZXhlYyhzcmMpKQogICAgKSB7CiAgICAgIGxldCBsaW5rID0gKGNhcFsyXSB8fCBjYXBbMV0pLnJlcGxhY2UoL1xzKy9nLCAiICIpCiAgICAgIGxpbmsgPSBsaW5rc1tsaW5rLnRvTG93ZXJDYXNlKCldCiAgICAgIGlmICghbGluayB8fCAhbGluay5ocmVmKSB7CiAgICAgICAgY29uc3QgdGV4dCA9IGNhcFswXS5jaGFyQXQoMCkKICAgICAgICByZXR1cm4gewogICAgICAgICAgdHlwZTogInRleHQiLAogICAgICAgICAgcmF3OiB0ZXh0LAogICAgICAgICAgdGV4dCwKICAgICAgICB9CiAgICAgIH0KICAgICAgcmV0dXJuIG91dHB1dExpbmsoY2FwLCBsaW5rLCBjYXBbMF0sIHRoaXMubGV4ZXIpCiAgICB9CiAgfQoKICBlbVN0cm9uZyhzcmMsIG1hc2tlZFNyYywgcHJldkNoYXIgPSAiIikgewogICAgbGV0IG1hdGNoID0gdGhpcy5ydWxlcy5pbmxpbmUuZW1TdHJvbmcubERlbGltLmV4ZWMoc3JjKQogICAgaWYgKCFtYXRjaCkgcmV0dXJuCgogICAgLy8gXyBjYW4ndCBiZSBiZXR3ZWVuIHR3byBhbHBoYW51bWVyaWNzLiBccHtMfVxwe059IGluY2x1ZGVzIG5vbi1lbmdsaXNoIGFscGhhYmV0L251bWJlcnMgYXMgd2VsbAogICAgaWYgKG1hdGNoWzNdICYmIHByZXZDaGFyLm1hdGNoKC9bXHB7TH1ccHtOfV0vdSkpIHJldHVybgoKICAgIGNvbnN0IG5leHRDaGFyID0gbWF0Y2hbMV0gfHwgbWF0Y2hbMl0gfHwgIiIKCiAgICBpZiAoCiAgICAgICFuZXh0Q2hhciB8fAogICAgICAobmV4dENoYXIgJiYKICAgICAgICAocHJldkNoYXIgPT09ICIiIHx8IHRoaXMucnVsZXMuaW5saW5lLnB1bmN0dWF0aW9uLmV4ZWMocHJldkNoYXIpKSkKICAgICkgewogICAgICBjb25zdCBsTGVuZ3RoID0gbWF0Y2hbMF0ubGVuZ3RoIC0gMQogICAgICBsZXQgckRlbGltLAogICAgICAgIHJMZW5ndGgsCiAgICAgICAgZGVsaW1Ub3RhbCA9IGxMZW5ndGgsCiAgICAgICAgbWlkRGVsaW1Ub3RhbCA9IDAKCiAgICAgIGNvbnN0IGVuZFJlZyA9CiAgICAgICAgbWF0Y2hbMF1bMF0gPT09ICIqIgogICAgICAgICAgPyB0aGlzLnJ1bGVzLmlubGluZS5lbVN0cm9uZy5yRGVsaW1Bc3QKICAgICAgICAgIDogdGhpcy5ydWxlcy5pbmxpbmUuZW1TdHJvbmcuckRlbGltVW5kCiAgICAgIGVuZFJlZy5sYXN0SW5kZXggPSAwCgogICAgICAvLyBDbGlwIG1hc2tlZFNyYyB0byBzYW1lIHNlY3Rpb24gb2Ygc3RyaW5nIGFzIHNyYyAobW92ZSB0byBsZXhlcj8pCiAgICAgIG1hc2tlZFNyYyA9IG1hc2tlZFNyYy5zbGljZSgtMSAqIHNyYy5sZW5ndGggKyBsTGVuZ3RoKQoKICAgICAgd2hpbGUgKChtYXRjaCA9IGVuZFJlZy5leGVjKG1hc2tlZFNyYykpICE9IG51bGwpIHsKICAgICAgICByRGVsaW0gPQogICAgICAgICAgbWF0Y2hbMV0gfHwgbWF0Y2hbMl0gfHwgbWF0Y2hbM10gfHwgbWF0Y2hbNF0gfHwgbWF0Y2hbNV0gfHwgbWF0Y2hbNl0KCiAgICAgICAgaWYgKCFyRGVsaW0pIGNvbnRpbnVlIC8vIHNraXAgc2luZ2xlICogaW4gX19hYmMqYWJjX18KCiAgICAgICAgckxlbmd0aCA9IHJEZWxpbS5sZW5ndGgKCiAgICAgICAgaWYgKG1hdGNoWzNdIHx8IG1hdGNoWzRdKSB7CiAgICAgICAgICAvLyBmb3VuZCBhbm90aGVyIExlZnQgRGVsaW0KICAgICAgICAgIGRlbGltVG90YWwgKz0gckxlbmd0aAogICAgICAgICAgY29udGludWUKICAgICAgICB9IGVsc2UgaWYgKG1hdGNoWzVdIHx8IG1hdGNoWzZdKSB7CiAgICAgICAgICAvLyBlaXRoZXIgTGVmdCBvciBSaWdodCBEZWxpbQogICAgICAgICAgaWYgKGxMZW5ndGggJSAzICYmICEoKGxMZW5ndGggKyByTGVuZ3RoKSAlIDMpKSB7CiAgICAgICAgICAgIG1pZERlbGltVG90YWwgKz0gckxlbmd0aAogICAgICAgICAgICBjb250aW51ZSAvLyBDb21tb25NYXJrIEVtcGhhc2lzIFJ1bGVzIDktMTAKICAgICAgICAgIH0KICAgICAgICB9CgogICAgICAgIGRlbGltVG90YWwgLT0gckxlbmd0aAoKICAgICAgICBpZiAoZGVsaW1Ub3RhbCA+IDApIGNvbnRpbnVlIC8vIEhhdmVuJ3QgZm91bmQgZW5vdWdoIGNsb3NpbmcgZGVsaW1pdGVycwoKICAgICAgICAvLyBSZW1vdmUgZXh0cmEgY2hhcmFjdGVycy4gKmEqKiogLT4gKmEqCiAgICAgICAgckxlbmd0aCA9IE1hdGgubWluKHJMZW5ndGgsIHJMZW5ndGggKyBkZWxpbVRvdGFsICsgbWlkRGVsaW1Ub3RhbCkKCiAgICAgICAgLy8gQ3JlYXRlIGBlbWAgaWYgc21hbGxlc3QgZGVsaW1pdGVyIGhhcyBvZGQgY2hhciBjb3VudC4gKmEqKioKICAgICAgICBpZiAoTWF0aC5taW4obExlbmd0aCwgckxlbmd0aCkgJSAyKSB7CiAgICAgICAgICBjb25zdCB0ZXh0ID0gc3JjLnNsaWNlKDEsIGxMZW5ndGggKyBtYXRjaC5pbmRleCArIHJMZW5ndGgpCiAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICB0eXBlOiAiZW0iLAogICAgICAgICAgICByYXc6IHNyYy5zbGljZSgwLCBsTGVuZ3RoICsgbWF0Y2guaW5kZXggKyByTGVuZ3RoICsgMSksCiAgICAgICAgICAgIHRleHQsCiAgICAgICAgICAgIHRva2VuczogdGhpcy5sZXhlci5pbmxpbmVUb2tlbnModGV4dCwgW10pLAogICAgICAgICAgfQogICAgICAgIH0KCiAgICAgICAgLy8gQ3JlYXRlICdzdHJvbmcnIGlmIHNtYWxsZXN0IGRlbGltaXRlciBoYXMgZXZlbiBjaGFyIGNvdW50LiAqKmEqKioKICAgICAgICBjb25zdCB0ZXh0ID0gc3JjLnNsaWNlKDIsIGxMZW5ndGggKyBtYXRjaC5pbmRleCArIHJMZW5ndGggLSAxKQogICAgICAgIHJldHVybiB7CiAgICAgICAgICB0eXBlOiAic3Ryb25nIiwKICAgICAgICAgIHJhdzogc3JjLnNsaWNlKDAsIGxMZW5ndGggKyBtYXRjaC5pbmRleCArIHJMZW5ndGggKyAxKSwKICAgICAgICAgIHRleHQsCiAgICAgICAgICB0b2tlbnM6IHRoaXMubGV4ZXIuaW5saW5lVG9rZW5zKHRleHQsIFtdKSwKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9CgogIGNvZGVzcGFuKHNyYykgewogICAgY29uc3QgY2FwID0gdGhpcy5ydWxlcy5pbmxpbmUuY29kZS5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgbGV0IHRleHQgPSBjYXBbMl0ucmVwbGFjZSgvXG4vZywgIiAiKQogICAgICBjb25zdCBoYXNOb25TcGFjZUNoYXJzID0gL1teIF0vLnRlc3QodGV4dCkKICAgICAgY29uc3QgaGFzU3BhY2VDaGFyc09uQm90aEVuZHMgPSAvXiAvLnRlc3QodGV4dCkgJiYgLyAkLy50ZXN0KHRleHQpCiAgICAgIGlmIChoYXNOb25TcGFjZUNoYXJzICYmIGhhc1NwYWNlQ2hhcnNPbkJvdGhFbmRzKSB7CiAgICAgICAgdGV4dCA9IHRleHQuc3Vic3RyaW5nKDEsIHRleHQubGVuZ3RoIC0gMSkKICAgICAgfQogICAgICB0ZXh0ID0gZXNjYXBlKHRleHQsIHRydWUpCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImNvZGVzcGFuIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0ZXh0LAogICAgICB9CiAgICB9CiAgfQoKICBicihzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLmJyLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJiciIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgIH0KICAgIH0KICB9CgogIGRlbChzcmMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLmRlbC5leGVjKHNyYykKICAgIGlmIChjYXApIHsKICAgICAgcmV0dXJuIHsKICAgICAgICB0eXBlOiAiZGVsIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0ZXh0OiBjYXBbMl0sCiAgICAgICAgdG9rZW5zOiB0aGlzLmxleGVyLmlubGluZVRva2VucyhjYXBbMl0sIFtdKSwKICAgICAgfQogICAgfQogIH0KCiAgYXV0b2xpbmsoc3JjLCBtYW5nbGUpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLmF1dG9saW5rLmV4ZWMoc3JjKQogICAgaWYgKGNhcCkgewogICAgICBsZXQgdGV4dCwgaHJlZgogICAgICBpZiAoY2FwWzJdID09PSAiQCIpIHsKICAgICAgICB0ZXh0ID0gZXNjYXBlKHRoaXMub3B0aW9ucy5tYW5nbGUgPyBtYW5nbGUoY2FwWzFdKSA6IGNhcFsxXSkKICAgICAgICBocmVmID0gIm1haWx0bzoiICsgdGV4dAogICAgICB9IGVsc2UgewogICAgICAgIHRleHQgPSBlc2NhcGUoY2FwWzFdKQogICAgICAgIGhyZWYgPSB0ZXh0CiAgICAgIH0KCiAgICAgIHJldHVybiB7CiAgICAgICAgdHlwZTogImxpbmsiLAogICAgICAgIHJhdzogY2FwWzBdLAogICAgICAgIHRleHQsCiAgICAgICAgaHJlZiwKICAgICAgICB0b2tlbnM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogInRleHQiLAogICAgICAgICAgICByYXc6IHRleHQsCiAgICAgICAgICAgIHRleHQsCiAgICAgICAgICB9LAogICAgICAgIF0sCiAgICAgIH0KICAgIH0KICB9CgogIHVybChzcmMsIG1hbmdsZSkgewogICAgbGV0IGNhcAogICAgaWYgKChjYXAgPSB0aGlzLnJ1bGVzLmlubGluZS51cmwuZXhlYyhzcmMpKSkgewogICAgICBsZXQgdGV4dCwgaHJlZgogICAgICBpZiAoY2FwWzJdID09PSAiQCIpIHsKICAgICAgICB0ZXh0ID0gZXNjYXBlKHRoaXMub3B0aW9ucy5tYW5nbGUgPyBtYW5nbGUoY2FwWzBdKSA6IGNhcFswXSkKICAgICAgICBocmVmID0gIm1haWx0bzoiICsgdGV4dAogICAgICB9IGVsc2UgewogICAgICAgIC8vIGRvIGV4dGVuZGVkIGF1dG9saW5rIHBhdGggdmFsaWRhdGlvbgogICAgICAgIGxldCBwcmV2Q2FwWmVybwogICAgICAgIGRvIHsKICAgICAgICAgIHByZXZDYXBaZXJvID0gY2FwWzBdCiAgICAgICAgICBjYXBbMF0gPSB0aGlzLnJ1bGVzLmlubGluZS5fYmFja3BlZGFsLmV4ZWMoY2FwWzBdKVswXQogICAgICAgIH0gd2hpbGUgKHByZXZDYXBaZXJvICE9PSBjYXBbMF0pCiAgICAgICAgdGV4dCA9IGVzY2FwZShjYXBbMF0pCiAgICAgICAgaWYgKGNhcFsxXSA9PT0gInd3dy4iKSB7CiAgICAgICAgICBocmVmID0gImh0dHA6Ly8iICsgdGV4dAogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICBocmVmID0gdGV4dAogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICJsaW5rIiwKICAgICAgICByYXc6IGNhcFswXSwKICAgICAgICB0ZXh0LAogICAgICAgIGhyZWYsCiAgICAgICAgdG9rZW5zOiBbCiAgICAgICAgICB7CiAgICAgICAgICAgIHR5cGU6ICJ0ZXh0IiwKICAgICAgICAgICAgcmF3OiB0ZXh0LAogICAgICAgICAgICB0ZXh0LAogICAgICAgICAgfSwKICAgICAgICBdLAogICAgICB9CiAgICB9CiAgfQoKICBpbmxpbmVUZXh0KHNyYywgc21hcnR5cGFudHMpIHsKICAgIGNvbnN0IGNhcCA9IHRoaXMucnVsZXMuaW5saW5lLnRleHQuZXhlYyhzcmMpCiAgICBpZiAoY2FwKSB7CiAgICAgIGxldCB0ZXh0CiAgICAgIGlmICh0aGlzLmxleGVyLnN0YXRlLmluUmF3QmxvY2spIHsKICAgICAgICB0ZXh0ID0gdGhpcy5vcHRpb25zLnNhbml0aXplCiAgICAgICAgICA/IHRoaXMub3B0aW9ucy5zYW5pdGl6ZXIKICAgICAgICAgICAgPyB0aGlzLm9wdGlvbnMuc2FuaXRpemVyKGNhcFswXSkKICAgICAgICAgICAgOiBlc2NhcGUoY2FwWzBdKQogICAgICAgICAgOiBjYXBbMF0KICAgICAgfSBlbHNlIHsKICAgICAgICB0ZXh0ID0gZXNjYXBlKHRoaXMub3B0aW9ucy5zbWFydHlwYW50cyA/IHNtYXJ0eXBhbnRzKGNhcFswXSkgOiBjYXBbMF0pCiAgICAgIH0KICAgICAgcmV0dXJuIHsKICAgICAgICB0eXBlOiAidGV4dCIsCiAgICAgICAgcmF3OiBjYXBbMF0sCiAgICAgICAgdGV4dCwKICAgICAgfQogICAgfQogIH0KfQoKLyoqCiAqIEJsb2NrLUxldmVsIEdyYW1tYXIKICovCmNvbnN0IGJsb2NrID0gewogIG5ld2xpbmU6IC9eKD86ICooPzpcbnwkKSkrLywKICBjb2RlOiAvXiggezR9W15cbl0rKD86XG4oPzogKig/OlxufCQpKSopPykrLywKICBmZW5jZXM6CiAgICAvXiB7MCwzfShgezMsfSg/PVteYFxuXSpcbil8fnszLH0pKFteXG5dKilcbig/OnwoW1xzXFNdKj8pXG4pKD86IHswLDN9XDFbfmBdKiAqKD89XG58JCl8JCkvLAogIGhyOiAvXiB7MCwzfSgoPzotW1x0IF0qKXszLH18KD86X1sgXHRdKil7Myx9fCg/OlwqWyBcdF0qKXszLH0pKD86XG4rfCQpLywKICBoZWFkaW5nOiAvXiB7MCwzfSgjezEsNn0pKD89XHN8JCkoLiopKD86XG4rfCQpLywKICBibG9ja3F1b3RlOiAvXiggezAsM30+ID8ocGFyYWdyYXBofFteXG5dKikoPzpcbnwkKSkrLywKICBsaXN0OiAvXiggezAsM31idWxsKShbIFx0XVteXG5dKz8pPyg/OlxufCQpLywKICBodG1sOgogICAgIl4gezAsM30oPzoiICsgLy8gb3B0aW9uYWwgaW5kZW50YXRpb24KICAgICI8KHNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWEpW1xccz5dW1xcc1xcU10qPyg/OjwvXFwxPlteXFxuXSpcXG4rfCQpIiArIC8vICgxKQogICAgInxjb21tZW50W15cXG5dKihcXG4rfCQpIiArIC8vICgyKQogICAgInw8XFw/W1xcc1xcU10qPyg/OlxcPz5cXG4qfCQpIiArIC8vICgzKQogICAgInw8IVtBLVpdW1xcc1xcU10qPyg/Oj5cXG4qfCQpIiArIC8vICg0KQogICAgInw8IVxcW0NEQVRBXFxbW1xcc1xcU10qPyg/OlxcXVxcXT5cXG4qfCQpIiArIC8vICg1KQogICAgInw8Lz8odGFnKSg/OiArfFxcbnwvPz4pW1xcc1xcU10qPyg/Oig/OlxcbiAqKStcXG58JCkiICsgLy8gKDYpCiAgICAifDwoPyFzY3JpcHR8cHJlfHN0eWxlfHRleHRhcmVhKShbYS16XVtcXHctXSopKD86YXR0cmlidXRlKSo/ICovPz4oPz1bIFxcdF0qKD86XFxufCQpKVtcXHNcXFNdKj8oPzooPzpcXG4gKikrXFxufCQpIiArIC8vICg3KSBvcGVuIHRhZwogICAgInw8Lyg/IXNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWEpW2Etel1bXFx3LV0qXFxzKj4oPz1bIFxcdF0qKD86XFxufCQpKVtcXHNcXFNdKj8oPzooPzpcXG4gKikrXFxufCQpIiArIC8vICg3KSBjbG9zaW5nIHRhZwogICAgIikiLAogIGRlZjogL14gezAsM31cWyhsYWJlbClcXTogKig/OlxuICopPzw/KFteXHM+XSspPj8oPzooPzogKyg/OlxuICopP3wgKlxuICopKHRpdGxlKSk/ICooPzpcbit8JCkvLAogIHRhYmxlOiBub29wVGVzdCwKICBsaGVhZGluZzogL14oW15cbl0rKVxuIHswLDN9KD0rfC0rKSAqKD86XG4rfCQpLywKICAvLyByZWdleCB0ZW1wbGF0ZSwgcGxhY2Vob2xkZXJzIHdpbGwgYmUgcmVwbGFjZWQgYWNjb3JkaW5nIHRvIGRpZmZlcmVudCBwYXJhZ3JhcGgKICAvLyBpbnRlcnJ1cHRpb24gcnVsZXMgb2YgY29tbW9ubWFyayBhbmQgdGhlIG9yaWdpbmFsIG1hcmtkb3duIHNwZWM6CiAgX3BhcmFncmFwaDoKICAgIC9eKFteXG5dKyg/OlxuKD8haHJ8aGVhZGluZ3xsaGVhZGluZ3xibG9ja3F1b3RlfGZlbmNlc3xsaXN0fGh0bWx8dGFibGV8ICtcbilbXlxuXSspKikvLAogIHRleHQ6IC9eW15cbl0rLywKfQoKYmxvY2suX2xhYmVsID0gLyg/IVxzKlxdKSg/OlxcLnxbXlxbXF1cXF0pKy8KYmxvY2suX3RpdGxlID0gLyg/OiIoPzpcXCI/fFteIlxcXSkqInwnW14nXG5dKig/OlxuW14nXG5dKykqXG4/J3xcKFteKCldKlwpKS8KYmxvY2suZGVmID0gZWRpdChibG9jay5kZWYpCiAgLnJlcGxhY2UoImxhYmVsIiwgYmxvY2suX2xhYmVsKQogIC5yZXBsYWNlKCJ0aXRsZSIsIGJsb2NrLl90aXRsZSkKICAuZ2V0UmVnZXgoKQoKYmxvY2suYnVsbGV0ID0gLyg/OlsqKy1dfFxkezEsOX1bLildKS8KYmxvY2subGlzdEl0ZW1TdGFydCA9IGVkaXQoL14oICopKGJ1bGwpICovKQogIC5yZXBsYWNlKCJidWxsIiwgYmxvY2suYnVsbGV0KQogIC5nZXRSZWdleCgpCgpibG9jay5saXN0ID0gZWRpdChibG9jay5saXN0KQogIC5yZXBsYWNlKC9idWxsL2csIGJsb2NrLmJ1bGxldCkKICAucmVwbGFjZSgKICAgICJociIsCiAgICAiXFxuKyg/PVxcMT8oPzooPzotICopezMsfXwoPzpfICopezMsfXwoPzpcXCogKil7Myx9KSg/Olxcbit8JCkpIgogICkKICAucmVwbGFjZSgiZGVmIiwgIlxcbisoPz0iICsgYmxvY2suZGVmLnNvdXJjZSArICIpIikKICAuZ2V0UmVnZXgoKQoKYmxvY2suX3RhZyA9CiAgImFkZHJlc3N8YXJ0aWNsZXxhc2lkZXxiYXNlfGJhc2Vmb250fGJsb2NrcXVvdGV8Ym9keXxjYXB0aW9uIiArCiAgInxjZW50ZXJ8Y29sfGNvbGdyb3VwfGRkfGRldGFpbHN8ZGlhbG9nfGRpcnxkaXZ8ZGx8ZHR8ZmllbGRzZXR8ZmlnY2FwdGlvbiIgKwogICJ8ZmlndXJlfGZvb3Rlcnxmb3JtfGZyYW1lfGZyYW1lc2V0fGhbMS02XXxoZWFkfGhlYWRlcnxocnxodG1sfGlmcmFtZSIgKwogICJ8bGVnZW5kfGxpfGxpbmt8bWFpbnxtZW51fG1lbnVpdGVtfG1ldGF8bmF2fG5vZnJhbWVzfG9sfG9wdGdyb3VwfG9wdGlvbiIgKwogICJ8cHxwYXJhbXxzZWN0aW9ufHNvdXJjZXxzdW1tYXJ5fHRhYmxlfHRib2R5fHRkfHRmb290fHRofHRoZWFkfHRpdGxlfHRyIiArCiAgInx0cmFja3x1bCIKYmxvY2suX2NvbW1lbnQgPSAvPCEtLSg/IS0/PilbXHNcU10qPyg/Oi0tPnwkKS8KYmxvY2suaHRtbCA9IGVkaXQoYmxvY2suaHRtbCwgImkiKQogIC5yZXBsYWNlKCJjb21tZW50IiwgYmxvY2suX2NvbW1lbnQpCiAgLnJlcGxhY2UoInRhZyIsIGJsb2NrLl90YWcpCiAgLnJlcGxhY2UoCiAgICAiYXR0cmlidXRlIiwKICAgIC8gK1thLXpBLVo6X11bXHcuOi1dKig/OiAqPSAqIlteIlxuXSoifCAqPSAqJ1teJ1xuXSonfCAqPSAqW15ccyInPTw+YF0rKT8vCiAgKQogIC5nZXRSZWdleCgpCgpibG9jay5wYXJhZ3JhcGggPSBlZGl0KGJsb2NrLl9wYXJhZ3JhcGgpCiAgLnJlcGxhY2UoImhyIiwgYmxvY2suaHIpCiAgLnJlcGxhY2UoImhlYWRpbmciLCAiIHswLDN9I3sxLDZ9ICIpCiAgLnJlcGxhY2UoInxsaGVhZGluZyIsICIiKSAvLyBzZXRleCBoZWFkaW5ncyBkb24ndCBpbnRlcnJ1cHQgY29tbW9ubWFyayBwYXJhZ3JhcGhzCiAgLnJlcGxhY2UoInx0YWJsZSIsICIiKQogIC5yZXBsYWNlKCJibG9ja3F1b3RlIiwgIiB7MCwzfT4iKQogIC5yZXBsYWNlKCJmZW5jZXMiLCAiIHswLDN9KD86YHszLH0oPz1bXmBcXG5dKlxcbil8fnszLH0pW15cXG5dKlxcbiIpCiAgLnJlcGxhY2UoImxpc3QiLCAiIHswLDN9KD86WyorLV18MVsuKV0pICIpIC8vIG9ubHkgbGlzdHMgc3RhcnRpbmcgZnJvbSAxIGNhbiBpbnRlcnJ1cHQKICAucmVwbGFjZSgKICAgICJodG1sIiwKICAgICI8Lz8oPzp0YWcpKD86ICt8XFxufC8/Pil8PCg/OnNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWF8IS0tKSIKICApCiAgLnJlcGxhY2UoInRhZyIsIGJsb2NrLl90YWcpIC8vIHBhcnMgY2FuIGJlIGludGVycnVwdGVkIGJ5IHR5cGUgKDYpIGh0bWwgYmxvY2tzCiAgLmdldFJlZ2V4KCkKCmJsb2NrLmJsb2NrcXVvdGUgPSBlZGl0KGJsb2NrLmJsb2NrcXVvdGUpCiAgLnJlcGxhY2UoInBhcmFncmFwaCIsIGJsb2NrLnBhcmFncmFwaCkKICAuZ2V0UmVnZXgoKQoKLyoqCiAqIE5vcm1hbCBCbG9jayBHcmFtbWFyCiAqLwoKYmxvY2subm9ybWFsID0gbWVyZ2Uoe30sIGJsb2NrKQoKLyoqCiAqIEdGTSBCbG9jayBHcmFtbWFyCiAqLwoKYmxvY2suZ2ZtID0gbWVyZ2Uoe30sIGJsb2NrLm5vcm1hbCwgewogIHRhYmxlOgogICAgIl4gKihbXlxcbiBdLipcXHwuKilcXG4iICsgLy8gSGVhZGVyCiAgICAiIHswLDN9KD86XFx8ICopPyg6Py0rOj8gKig/OlxcfCAqOj8tKzo/ICopKikoPzpcXHwgKik/IiArIC8vIEFsaWduCiAgICAiKD86XFxuKCg/Oig/ISAqXFxufGhyfGhlYWRpbmd8YmxvY2txdW90ZXxjb2RlfGZlbmNlc3xsaXN0fGh0bWwpLiooPzpcXG58JCkpKilcXG4qfCQpIiwgLy8gQ2VsbHMKfSkKCmJsb2NrLmdmbS50YWJsZSA9IGVkaXQoYmxvY2suZ2ZtLnRhYmxlKQogIC5yZXBsYWNlKCJociIsIGJsb2NrLmhyKQogIC5yZXBsYWNlKCJoZWFkaW5nIiwgIiB7MCwzfSN7MSw2fSAiKQogIC5yZXBsYWNlKCJibG9ja3F1b3RlIiwgIiB7MCwzfT4iKQogIC5yZXBsYWNlKCJjb2RlIiwgIiB7NH1bXlxcbl0iKQogIC5yZXBsYWNlKCJmZW5jZXMiLCAiIHswLDN9KD86YHszLH0oPz1bXmBcXG5dKlxcbil8fnszLH0pW15cXG5dKlxcbiIpCiAgLnJlcGxhY2UoImxpc3QiLCAiIHswLDN9KD86WyorLV18MVsuKV0pICIpIC8vIG9ubHkgbGlzdHMgc3RhcnRpbmcgZnJvbSAxIGNhbiBpbnRlcnJ1cHQKICAucmVwbGFjZSgKICAgICJodG1sIiwKICAgICI8Lz8oPzp0YWcpKD86ICt8XFxufC8/Pil8PCg/OnNjcmlwdHxwcmV8c3R5bGV8dGV4dGFyZWF8IS0tKSIKICApCiAgLnJlcGxhY2UoInRhZyIsIGJsb2NrLl90YWcpIC8vIHRhYmxlcyBjYW4gYmUgaW50ZXJydXB0ZWQgYnkgdHlwZSAoNikgaHRtbCBibG9ja3MKICAuZ2V0UmVnZXgoKQoKYmxvY2suZ2ZtLnBhcmFncmFwaCA9IGVkaXQoYmxvY2suX3BhcmFncmFwaCkKICAucmVwbGFjZSgiaHIiLCBibG9jay5ocikKICAucmVwbGFjZSgiaGVhZGluZyIsICIgezAsM30jezEsNn0gIikKICAucmVwbGFjZSgifGxoZWFkaW5nIiwgIiIpIC8vIHNldGV4IGhlYWRpbmdzIGRvbid0IGludGVycnVwdCBjb21tb25tYXJrIHBhcmFncmFwaHMKICAucmVwbGFjZSgidGFibGUiLCBibG9jay5nZm0udGFibGUpIC8vIGludGVycnVwdCBwYXJhZ3JhcGhzIHdpdGggdGFibGUKICAucmVwbGFjZSgiYmxvY2txdW90ZSIsICIgezAsM30+IikKICAucmVwbGFjZSgiZmVuY2VzIiwgIiB7MCwzfSg/OmB7Myx9KD89W15gXFxuXSpcXG4pfH57Myx9KVteXFxuXSpcXG4iKQogIC5yZXBsYWNlKCJsaXN0IiwgIiB7MCwzfSg/OlsqKy1dfDFbLildKSAiKSAvLyBvbmx5IGxpc3RzIHN0YXJ0aW5nIGZyb20gMSBjYW4gaW50ZXJydXB0CiAgLnJlcGxhY2UoCiAgICAiaHRtbCIsCiAgICAiPC8/KD86dGFnKSg/OiArfFxcbnwvPz4pfDwoPzpzY3JpcHR8cHJlfHN0eWxlfHRleHRhcmVhfCEtLSkiCiAgKQogIC5yZXBsYWNlKCJ0YWciLCBibG9jay5fdGFnKSAvLyBwYXJzIGNhbiBiZSBpbnRlcnJ1cHRlZCBieSB0eXBlICg2KSBodG1sIGJsb2NrcwogIC5nZXRSZWdleCgpCi8qKgogKiBQZWRhbnRpYyBncmFtbWFyIChvcmlnaW5hbCBKb2huIEdydWJlcidzIGxvb3NlIG1hcmtkb3duIHNwZWNpZmljYXRpb24pCiAqLwoKYmxvY2sucGVkYW50aWMgPSBtZXJnZSh7fSwgYmxvY2subm9ybWFsLCB7CiAgaHRtbDogZWRpdCgKICAgICJeICooPzpjb21tZW50ICooPzpcXG58XFxzKiQpIiArCiAgICAgICJ8PCh0YWcpW1xcc1xcU10rPzwvXFwxPiAqKD86XFxuezIsfXxcXHMqJCkiICsgLy8gY2xvc2VkIHRhZwogICAgICAifDx0YWcoPzpcIlteXCJdKlwifCdbXiddKid8XFxzW14nXCIvPlxcc10qKSo/Lz8+ICooPzpcXG57Mix9fFxccyokKSkiCiAgKQogICAgLnJlcGxhY2UoImNvbW1lbnQiLCBibG9jay5fY29tbWVudCkKICAgIC5yZXBsYWNlKAogICAgICAvdGFnL2csCiAgICAgICIoPyEoPzoiICsKICAgICAgICAiYXxlbXxzdHJvbmd8c21hbGx8c3xjaXRlfHF8ZGZufGFiYnJ8ZGF0YXx0aW1lfGNvZGV8dmFyfHNhbXB8a2JkfHN1YiIgKwogICAgICAgICJ8c3VwfGl8Ynx1fG1hcmt8cnVieXxydHxycHxiZGl8YmRvfHNwYW58YnJ8d2JyfGluc3xkZWx8aW1nKSIgKwogICAgICAgICJcXGIpXFx3Kyg/ITp8W15cXHdcXHNAXSpAKVxcYiIKICAgICkKICAgIC5nZXRSZWdleCgpLAogIGRlZjogL14gKlxbKFteXF1dKylcXTogKjw/KFteXHM+XSspPj8oPzogKyhbIihdW15cbl0rWyIpXSkpPyAqKD86XG4rfCQpLywKICBoZWFkaW5nOiAvXigjezEsNn0pKC4qKSg/OlxuK3wkKS8sCiAgZmVuY2VzOiBub29wVGVzdCwgLy8gZmVuY2VzIG5vdCBzdXBwb3J0ZWQKICBwYXJhZ3JhcGg6IGVkaXQoYmxvY2subm9ybWFsLl9wYXJhZ3JhcGgpCiAgICAucmVwbGFjZSgiaHIiLCBibG9jay5ocikKICAgIC5yZXBsYWNlKCJoZWFkaW5nIiwgIiAqI3sxLDZ9ICpbXlxuXSIpCiAgICAucmVwbGFjZSgibGhlYWRpbmciLCBibG9jay5saGVhZGluZykKICAgIC5yZXBsYWNlKCJibG9ja3F1b3RlIiwgIiB7MCwzfT4iKQogICAgLnJlcGxhY2UoInxmZW5jZXMiLCAiIikKICAgIC5yZXBsYWNlKCJ8bGlzdCIsICIiKQogICAgLnJlcGxhY2UoInxodG1sIiwgIiIpCiAgICAuZ2V0UmVnZXgoKSwKfSkKCi8qKgogKiBJbmxpbmUtTGV2ZWwgR3JhbW1hcgogKi8KY29uc3QgaW5saW5lID0gewogIGVzY2FwZTogL15cXChbISIjJCUmJygpKissXC0uLzo7PD0+P0BcW1xdXFxeX2B7fH1+XSkvLAogIGF1dG9saW5rOiAvXjwoc2NoZW1lOlteXHNceDAwLVx4MWY8Pl0qfGVtYWlsKT4vLAogIHVybDogbm9vcFRlc3QsCiAgdGFnOgogICAgIl5jb21tZW50IiArCiAgICAifF48L1thLXpBLVpdW1xcdzotXSpcXHMqPiIgKyAvLyBzZWxmLWNsb3NpbmcgdGFnCiAgICAifF48W2EtekEtWl1bXFx3LV0qKD86YXR0cmlidXRlKSo/XFxzKi8/PiIgKyAvLyBvcGVuIHRhZwogICAgInxePFxcP1tcXHNcXFNdKj9cXD8+IiArIC8vIHByb2Nlc3NpbmcgaW5zdHJ1Y3Rpb24sIGUuZy4gPD9waHAgPz4KICAgICJ8XjwhW2EtekEtWl0rXFxzW1xcc1xcU10qPz4iICsgLy8gZGVjbGFyYXRpb24sIGUuZy4gPCFET0NUWVBFIGh0bWw+CiAgICAifF48IVxcW0NEQVRBXFxbW1xcc1xcU10qP1xcXVxcXT4iLCAvLyBDREFUQSBzZWN0aW9uCiAgbGluazogL14hP1xbKGxhYmVsKVxdXChccyooaHJlZikoPzpccysodGl0bGUpKT9ccypcKS8sCiAgcmVmbGluazogL14hP1xbKGxhYmVsKVxdXFsocmVmKVxdLywKICBub2xpbms6IC9eIT9cWyhyZWYpXF0oPzpcW1xdKT8vLAogIHJlZmxpbmtTZWFyY2g6ICJyZWZsaW5rfG5vbGluayg/IVxcKCkiLAogIGVtU3Ryb25nOiB7CiAgICBsRGVsaW06IC9eKD86XCorKD86KFtwdW5jdF9dKXxbXlxzKl0pKXxeXysoPzooW3B1bmN0Kl0pfChbXlxzX10pKS8sCiAgICAvLyAgICAgICAgKDEpIGFuZCAoMikgY2FuIG9ubHkgYmUgYSBSaWdodCBEZWxpbWl0ZXIuICgzKSBhbmQgKDQpIGNhbiBvbmx5IGJlIExlZnQuICAoNSkgYW5kICg2KSBjYW4gYmUgZWl0aGVyIExlZnQgb3IgUmlnaHQuCiAgICAvLyAgICAgICAgICAoKSBTa2lwIG9ycGhhbiBpbnNpZGUgc3Ryb25nICAoKSBDb25zdW1lIHRvIGRlbGltICgxKSAjKioqICAgICAgICAgICAgICAgICgyKSBhKioqIywgYSoqKiAgICAgICAgICAgICAgICAgICAoMykgIyoqKmEsICoqKmEgICAgICAgICAgICAgICAgICg0KSAqKiojICAgICAgICAgICAgICAoNSkgIyoqKiMgICAgICAgICAgICAgICAgICg2KSBhKioqYQogICAgckRlbGltQXN0OgogICAgICAvXlteXypdKj9cX1xfW15fKl0qP1wqW15fKl0qPyg/PVxfXF8pfFteKl0rKD89W14qXSl8W3B1bmN0X10oXCorKSg/PVtcc118JCl8W15wdW5jdCpfXHNdKFwqKykoPz1bcHVuY3RfXHNdfCQpfFtwdW5jdF9cc10oXCorKSg/PVtecHVuY3QqX1xzXSl8W1xzXShcKispKD89W3B1bmN0X10pfFtwdW5jdF9dKFwqKykoPz1bcHVuY3RfXSl8W15wdW5jdCpfXHNdKFwqKykoPz1bXnB1bmN0Kl9cc10pLywKICAgIHJEZWxpbVVuZDoKICAgICAgL15bXl8qXSo/XCpcKlteXypdKj9cX1teXypdKj8oPz1cKlwqKXxbXl9dKyg/PVteX10pfFtwdW5jdCpdKFxfKykoPz1bXHNdfCQpfFtecHVuY3QqX1xzXShcXyspKD89W3B1bmN0KlxzXXwkKXxbcHVuY3QqXHNdKFxfKykoPz1bXnB1bmN0Kl9cc10pfFtcc10oXF8rKSg/PVtwdW5jdCpdKXxbcHVuY3QqXShcXyspKD89W3B1bmN0Kl0pLywgLy8gXi0gTm90IGFsbG93ZWQgZm9yIF8KICB9LAogIGNvZGU6IC9eKGArKShbXmBdfFteYF1bXHNcU10qP1teYF0pXDEoPyFgKS8sCiAgYnI6IC9eKCB7Mix9fFxcKVxuKD8hXHMqJCkvLAogIGRlbDogbm9vcFRlc3QsCiAgdGV4dDogL14oYCt8W15gXSkoPzooPz0gezIsfVxuKXxbXHNcU10qPyg/Oig/PVtcXDwhXFtgKl9dfFxiX3wkKXxbXiBdKD89IHsyLH1cbikpKS8sCiAgcHVuY3R1YXRpb246IC9eKFtcc3B1bmN0dWF0aW9uXSkvLAp9CgovLyBsaXN0IG9mIHB1bmN0dWF0aW9uIG1hcmtzIGZyb20gQ29tbW9uTWFyayBzcGVjCi8vIHdpdGhvdXQgKiBhbmQgXyB0byBoYW5kbGUgdGhlIGRpZmZlcmVudCBlbXBoYXNpcyBtYXJrZXJzICogYW5kIF8KaW5saW5lLl9wdW5jdHVhdGlvbiA9ICIhXCIjJCUmJygpK1xcLS4sLzo7PD0+P0BcXFtcXF1gXnt8fX4iCmlubGluZS5wdW5jdHVhdGlvbiA9IGVkaXQoaW5saW5lLnB1bmN0dWF0aW9uKQogIC5yZXBsYWNlKC9wdW5jdHVhdGlvbi9nLCBpbmxpbmUuX3B1bmN0dWF0aW9uKQogIC5nZXRSZWdleCgpCgovLyBzZXF1ZW5jZXMgZW0gc2hvdWxkIHNraXAgb3ZlciBbdGl0bGVdKGxpbmspLCBgY29kZWAsIDxodG1sPgppbmxpbmUuYmxvY2tTa2lwID0gL1xbW15cXV0qP1xdXChbXlwpXSo/XCl8YFteYF0qP2B8PFtePl0qPz4vZwppbmxpbmUuZXNjYXBlZEVtU3QgPSAvXFxcKnxcXF8vZwoKaW5saW5lLl9jb21tZW50ID0gZWRpdChibG9jay5fY29tbWVudCkucmVwbGFjZSgiKD86LS0+fCQpIiwgIi0tPiIpLmdldFJlZ2V4KCkKCmlubGluZS5lbVN0cm9uZy5sRGVsaW0gPSBlZGl0KGlubGluZS5lbVN0cm9uZy5sRGVsaW0pCiAgLnJlcGxhY2UoL3B1bmN0L2csIGlubGluZS5fcHVuY3R1YXRpb24pCiAgLmdldFJlZ2V4KCkKCmlubGluZS5lbVN0cm9uZy5yRGVsaW1Bc3QgPSBlZGl0KGlubGluZS5lbVN0cm9uZy5yRGVsaW1Bc3QsICJnIikKICAucmVwbGFjZSgvcHVuY3QvZywgaW5saW5lLl9wdW5jdHVhdGlvbikKICAuZ2V0UmVnZXgoKQoKaW5saW5lLmVtU3Ryb25nLnJEZWxpbVVuZCA9IGVkaXQoaW5saW5lLmVtU3Ryb25nLnJEZWxpbVVuZCwgImciKQogIC5yZXBsYWNlKC9wdW5jdC9nLCBpbmxpbmUuX3B1bmN0dWF0aW9uKQogIC5nZXRSZWdleCgpCgppbmxpbmUuX2VzY2FwZXMgPSAvXFwoWyEiIyQlJicoKSorLFwtLi86Ozw9Pj9AXFtcXVxcXl9ge3x9fl0pL2cKCmlubGluZS5fc2NoZW1lID0gL1thLXpBLVpdW2EtekEtWjAtOSsuLV17MSwzMX0vCmlubGluZS5fZW1haWwgPQogIC9bYS16QS1aMC05LiEjJCUmJyorLz0/Xl9ge3x9fi1dKyhAKVthLXpBLVowLTldKD86W2EtekEtWjAtOS1dezAsNjF9W2EtekEtWjAtOV0pPyg/OlwuW2EtekEtWjAtOV0oPzpbYS16QS1aMC05LV17MCw2MX1bYS16QS1aMC05XSk/KSsoPyFbLV9dKS8KaW5saW5lLmF1dG9saW5rID0gZWRpdChpbmxpbmUuYXV0b2xpbmspCiAgLnJlcGxhY2UoInNjaGVtZSIsIGlubGluZS5fc2NoZW1lKQogIC5yZXBsYWNlKCJlbWFpbCIsIGlubGluZS5fZW1haWwpCiAgLmdldFJlZ2V4KCkKCmlubGluZS5fYXR0cmlidXRlID0KICAvXHMrW2EtekEtWjpfXVtcdy46LV0qKD86XHMqPVxzKiJbXiJdKiJ8XHMqPVxzKidbXiddKid8XHMqPVxzKlteXHMiJz08PmBdKyk/LwoKaW5saW5lLnRhZyA9IGVkaXQoaW5saW5lLnRhZykKICAucmVwbGFjZSgiY29tbWVudCIsIGlubGluZS5fY29tbWVudCkKICAucmVwbGFjZSgiYXR0cmlidXRlIiwgaW5saW5lLl9hdHRyaWJ1dGUpCiAgLmdldFJlZ2V4KCkKCmlubGluZS5fbGFiZWwgPSAvKD86XFsoPzpcXC58W15cW1xdXFxdKSpcXXxcXC58YFteYF0qYHxbXlxbXF1cXGBdKSo/LwppbmxpbmUuX2hyZWYgPSAvPCg/OlxcLnxbXlxuPD5cXF0pKz58W15cc1x4MDAtXHgxZl0qLwppbmxpbmUuX3RpdGxlID0gLyIoPzpcXCI/fFteIlxcXSkqInwnKD86XFwnP3xbXidcXF0pKid8XCgoPzpcXFwpP3xbXilcXF0pKlwpLwoKaW5saW5lLmxpbmsgPSBlZGl0KGlubGluZS5saW5rKQogIC5yZXBsYWNlKCJsYWJlbCIsIGlubGluZS5fbGFiZWwpCiAgLnJlcGxhY2UoImhyZWYiLCBpbmxpbmUuX2hyZWYpCiAgLnJlcGxhY2UoInRpdGxlIiwgaW5saW5lLl90aXRsZSkKICAuZ2V0UmVnZXgoKQoKaW5saW5lLnJlZmxpbmsgPSBlZGl0KGlubGluZS5yZWZsaW5rKQogIC5yZXBsYWNlKCJsYWJlbCIsIGlubGluZS5fbGFiZWwpCiAgLnJlcGxhY2UoInJlZiIsIGJsb2NrLl9sYWJlbCkKICAuZ2V0UmVnZXgoKQoKaW5saW5lLm5vbGluayA9IGVkaXQoaW5saW5lLm5vbGluaykucmVwbGFjZSgicmVmIiwgYmxvY2suX2xhYmVsKS5nZXRSZWdleCgpCgppbmxpbmUucmVmbGlua1NlYXJjaCA9IGVkaXQoaW5saW5lLnJlZmxpbmtTZWFyY2gsICJnIikKICAucmVwbGFjZSgicmVmbGluayIsIGlubGluZS5yZWZsaW5rKQogIC5yZXBsYWNlKCJub2xpbmsiLCBpbmxpbmUubm9saW5rKQogIC5nZXRSZWdleCgpCgovKioKICogTm9ybWFsIElubGluZSBHcmFtbWFyCiAqLwoKaW5saW5lLm5vcm1hbCA9IG1lcmdlKHt9LCBpbmxpbmUpCgovKioKICogUGVkYW50aWMgSW5saW5lIEdyYW1tYXIKICovCgppbmxpbmUucGVkYW50aWMgPSBtZXJnZSh7fSwgaW5saW5lLm5vcm1hbCwgewogIHN0cm9uZzogewogICAgc3RhcnQ6IC9eX198XCpcKi8sCiAgICBtaWRkbGU6IC9eX18oPz1cUykoW1xzXFNdKj9cUylfXyg/IV8pfF5cKlwqKD89XFMpKFtcc1xTXSo/XFMpXCpcKig/IVwqKS8sCiAgICBlbmRBc3Q6IC9cKlwqKD8hXCopL2csCiAgICBlbmRVbmQ6IC9fXyg/IV8pL2csCiAgfSwKICBlbTogewogICAgc3RhcnQ6IC9eX3xcKi8sCiAgICBtaWRkbGU6IC9eKClcKig/PVxTKShbXHNcU10qP1xTKVwqKD8hXCopfF5fKD89XFMpKFtcc1xTXSo/XFMpXyg/IV8pLywKICAgIGVuZEFzdDogL1wqKD8hXCopL2csCiAgICBlbmRVbmQ6IC9fKD8hXykvZywKICB9LAogIGxpbms6IGVkaXQoL14hP1xbKGxhYmVsKVxdXCgoLio/KVwpLykKICAgIC5yZXBsYWNlKCJsYWJlbCIsIGlubGluZS5fbGFiZWwpCiAgICAuZ2V0UmVnZXgoKSwKICByZWZsaW5rOiBlZGl0KC9eIT9cWyhsYWJlbClcXVxzKlxbKFteXF1dKilcXS8pCiAgICAucmVwbGFjZSgibGFiZWwiLCBpbmxpbmUuX2xhYmVsKQogICAgLmdldFJlZ2V4KCksCn0pCgovKioKICogR0ZNIElubGluZSBHcmFtbWFyCiAqLwoKaW5saW5lLmdmbSA9IG1lcmdlKHt9LCBpbmxpbmUubm9ybWFsLCB7CiAgZXNjYXBlOiBlZGl0KGlubGluZS5lc2NhcGUpLnJlcGxhY2UoIl0pIiwgIn58XSkiKS5nZXRSZWdleCgpLAogIF9leHRlbmRlZF9lbWFpbDoKICAgIC9bQS1aYS16MC05Ll8rLV0rKEApW2EtekEtWjAtOS1fXSsoPzpcLlthLXpBLVowLTktX10qW2EtekEtWjAtOV0pKyg/IVstX10pLywKICB1cmw6IC9eKCg/OmZ0cHxodHRwcz8pOlwvXC98d3d3XC4pKD86W2EtekEtWjAtOVwtXStcLj8pK1teXHM8XSp8XmVtYWlsLywKICBfYmFja3BlZGFsOgogICAgLyg/OltePyEuLDo7Kl9+KCkmXSt8XChbXildKlwpfCYoPyFbYS16QS1aMC05XSs7JCl8Wz8hLiw6OypffildKyg/ISQpKSsvLAogIGRlbDogL14ofn4/KSg/PVteXHN+XSkoW1xzXFNdKj9bXlxzfl0pXDEoPz1bXn5dfCQpLywKICB0ZXh0OiAvXihbYH5dK3xbXmB+XSkoPzooPz0gezIsfVxuKXwoPz1bYS16QS1aMC05LiEjJCUmJyorXC89P19ge1x8fX4tXStAKXxbXHNcU10qPyg/Oig/PVtcXDwhXFtgKn5fXXxcYl98aHR0cHM/OlwvXC98ZnRwOlwvXC98d3d3XC58JCl8W14gXSg/PSB7Mix9XG4pfFteYS16QS1aMC05LiEjJCUmJyorXC89P19ge1x8fX4tXSg/PVthLXpBLVowLTkuISMkJSYnKitcLz0/X2B7XHx9fi1dK0ApKSkvLAp9KQoKaW5saW5lLmdmbS51cmwgPSBlZGl0KGlubGluZS5nZm0udXJsLCAiaSIpCiAgLnJlcGxhY2UoImVtYWlsIiwgaW5saW5lLmdmbS5fZXh0ZW5kZWRfZW1haWwpCiAgLmdldFJlZ2V4KCkKLyoqCiAqIEdGTSArIExpbmUgQnJlYWtzIElubGluZSBHcmFtbWFyCiAqLwoKaW5saW5lLmJyZWFrcyA9IG1lcmdlKHt9LCBpbmxpbmUuZ2ZtLCB7CiAgYnI6IGVkaXQoaW5saW5lLmJyKS5yZXBsYWNlKCJ7Mix9IiwgIioiKS5nZXRSZWdleCgpLAogIHRleHQ6IGVkaXQoaW5saW5lLmdmbS50ZXh0KQogICAgLnJlcGxhY2UoIlxcYl8iLCAiXFxiX3wgezIsfVxcbiIpCiAgICAucmVwbGFjZSgvXHsyLFx9L2csICIqIikKICAgIC5nZXRSZWdleCgpLAp9KQoKLyoqCiAqIHNtYXJ0eXBhbnRzIHRleHQgcmVwbGFjZW1lbnQKICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICovCmZ1bmN0aW9uIHNtYXJ0eXBhbnRzKHRleHQpIHsKICByZXR1cm4gKAogICAgdGV4dAogICAgICAvLyBlbS1kYXNoZXMKICAgICAgLnJlcGxhY2UoLy0tLS9nLCAiXHUyMDE0IikKICAgICAgLy8gZW4tZGFzaGVzCiAgICAgIC5yZXBsYWNlKC8tLS9nLCAiXHUyMDEzIikKICAgICAgLy8gb3BlbmluZyBzaW5nbGVzCiAgICAgIC5yZXBsYWNlKC8oXnxbLVx1MjAxNC8oXFt7IlxzXSknL2csICIkMVx1MjAxOCIpCiAgICAgIC8vIGNsb3Npbmcgc2luZ2xlcyAmIGFwb3N0cm9waGVzCiAgICAgIC5yZXBsYWNlKC8nL2csICJcdTIwMTkiKQogICAgICAvLyBvcGVuaW5nIGRvdWJsZXMKICAgICAgLnJlcGxhY2UoLyhefFstXHUyMDE0LyhcW3tcdTIwMThcc10pIi9nLCAiJDFcdTIwMWMiKQogICAgICAvLyBjbG9zaW5nIGRvdWJsZXMKICAgICAgLnJlcGxhY2UoLyIvZywgIlx1MjAxZCIpCiAgICAgIC8vIGVsbGlwc2VzCiAgICAgIC5yZXBsYWNlKC9cLnszfS9nLCAiXHUyMDI2IikKICApCn0KCi8qKgogKiBtYW5nbGUgZW1haWwgYWRkcmVzc2VzCiAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAqLwpmdW5jdGlvbiBtYW5nbGUodGV4dCkgewogIGxldCBvdXQgPSAiIiwKICAgIGksCiAgICBjaAoKICBjb25zdCBsID0gdGV4dC5sZW5ndGgKICBmb3IgKGkgPSAwOyBpIDwgbDsgaSsrKSB7CiAgICBjaCA9IHRleHQuY2hhckNvZGVBdChpKQogICAgaWYgKE1hdGgucmFuZG9tKCkgPiAwLjUpIHsKICAgICAgY2ggPSAieCIgKyBjaC50b1N0cmluZygxNikKICAgIH0KICAgIG91dCArPSAiJiMiICsgY2ggKyAiOyIKICB9CgogIHJldHVybiBvdXQKfQoKLyoqCiAqIEJsb2NrIExleGVyCiAqLwpjbGFzcyBMZXhlciB7CiAgY29uc3RydWN0b3Iob3B0aW9ucykgewogICAgdGhpcy50b2tlbnMgPSBbXQogICAgdGhpcy50b2tlbnMubGlua3MgPSBPYmplY3QuY3JlYXRlKG51bGwpCiAgICB0aGlzLm9wdGlvbnMgPSBvcHRpb25zIHx8IGRlZmF1bHRzCiAgICB0aGlzLm9wdGlvbnMudG9rZW5pemVyID0gdGhpcy5vcHRpb25zLnRva2VuaXplciB8fCBuZXcgVG9rZW5pemVyKCkKICAgIHRoaXMudG9rZW5pemVyID0gdGhpcy5vcHRpb25zLnRva2VuaXplcgogICAgdGhpcy50b2tlbml6ZXIub3B0aW9ucyA9IHRoaXMub3B0aW9ucwogICAgdGhpcy50b2tlbml6ZXIubGV4ZXIgPSB0aGlzCiAgICB0aGlzLmlubGluZVF1ZXVlID0gW10KICAgIHRoaXMuc3RhdGUgPSB7CiAgICAgIGluTGluazogZmFsc2UsCiAgICAgIGluUmF3QmxvY2s6IGZhbHNlLAogICAgICB0b3A6IHRydWUsCiAgICB9CgogICAgY29uc3QgcnVsZXMgPSB7CiAgICAgIGJsb2NrOiBibG9jay5ub3JtYWwsCiAgICAgIGlubGluZTogaW5saW5lLm5vcm1hbCwKICAgIH0KCiAgICBpZiAodGhpcy5vcHRpb25zLnBlZGFudGljKSB7CiAgICAgIHJ1bGVzLmJsb2NrID0gYmxvY2sucGVkYW50aWMKICAgICAgcnVsZXMuaW5saW5lID0gaW5saW5lLnBlZGFudGljCiAgICB9IGVsc2UgaWYgKHRoaXMub3B0aW9ucy5nZm0pIHsKICAgICAgcnVsZXMuYmxvY2sgPSBibG9jay5nZm0KICAgICAgaWYgKHRoaXMub3B0aW9ucy5icmVha3MpIHsKICAgICAgICBydWxlcy5pbmxpbmUgPSBpbmxpbmUuYnJlYWtzCiAgICAgIH0gZWxzZSB7CiAgICAgICAgcnVsZXMuaW5saW5lID0gaW5saW5lLmdmbQogICAgICB9CiAgICB9CiAgICB0aGlzLnRva2VuaXplci5ydWxlcyA9IHJ1bGVzCiAgfQoKICAvKioKICAgKiBFeHBvc2UgUnVsZXMKICAgKi8KICBzdGF0aWMgZ2V0IHJ1bGVzKCkgewogICAgcmV0dXJuIHsKICAgICAgYmxvY2ssCiAgICAgIGlubGluZSwKICAgIH0KICB9CgogIC8qKgogICAqIFN0YXRpYyBMZXggTWV0aG9kCiAgICovCiAgc3RhdGljIGxleChzcmMsIG9wdGlvbnMpIHsKICAgIGNvbnN0IGxleGVyID0gbmV3IExleGVyKG9wdGlvbnMpCiAgICByZXR1cm4gbGV4ZXIubGV4KHNyYykKICB9CgogIC8qKgogICAqIFN0YXRpYyBMZXggSW5saW5lIE1ldGhvZAogICAqLwogIHN0YXRpYyBsZXhJbmxpbmUoc3JjLCBvcHRpb25zKSB7CiAgICBjb25zdCBsZXhlciA9IG5ldyBMZXhlcihvcHRpb25zKQogICAgcmV0dXJuIGxleGVyLmlubGluZVRva2VucyhzcmMpCiAgfQoKICAvKioKICAgKiBQcmVwcm9jZXNzaW5nCiAgICovCiAgbGV4KHNyYykgewogICAgc3JjID0gc3JjLnJlcGxhY2UoL1xyXG58XHIvZywgIlxuIikKCiAgICB0aGlzLmJsb2NrVG9rZW5zKHNyYywgdGhpcy50b2tlbnMpCgogICAgbGV0IG5leHQKICAgIHdoaWxlICgobmV4dCA9IHRoaXMuaW5saW5lUXVldWUuc2hpZnQoKSkpIHsKICAgICAgdGhpcy5pbmxpbmVUb2tlbnMobmV4dC5zcmMsIG5leHQudG9rZW5zKQogICAgfQoKICAgIHJldHVybiB0aGlzLnRva2VucwogIH0KCiAgLyoqCiAgICogTGV4aW5nCiAgICovCiAgYmxvY2tUb2tlbnMoc3JjLCB0b2tlbnMgPSBbXSkgewogICAgaWYgKHRoaXMub3B0aW9ucy5wZWRhbnRpYykgewogICAgICBzcmMgPSBzcmMucmVwbGFjZSgvXHQvZywgIiAgICAiKS5yZXBsYWNlKC9eICskL2dtLCAiIikKICAgIH0gZWxzZSB7CiAgICAgIHNyYyA9IHNyYy5yZXBsYWNlKC9eKCAqKShcdCspL2dtLCAoXywgbGVhZGluZywgdGFicykgPT4gewogICAgICAgIHJldHVybiBsZWFkaW5nICsgIiAgICAiLnJlcGVhdCh0YWJzLmxlbmd0aCkKICAgICAgfSkKICAgIH0KCiAgICBsZXQgdG9rZW4sIGxhc3RUb2tlbiwgY3V0U3JjLCBsYXN0UGFyYWdyYXBoQ2xpcHBlZAoKICAgIHdoaWxlIChzcmMpIHsKICAgICAgaWYgKAogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zICYmCiAgICAgICAgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMuYmxvY2sgJiYKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucy5ibG9jay5zb21lKGV4dFRva2VuaXplciA9PiB7CiAgICAgICAgICBpZiAoKHRva2VuID0gZXh0VG9rZW5pemVyLmNhbGwoeyBsZXhlcjogdGhpcyB9LCBzcmMsIHRva2VucykpKSB7CiAgICAgICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgICAgIHJldHVybiB0cnVlCiAgICAgICAgICB9CiAgICAgICAgICByZXR1cm4gZmFsc2UKICAgICAgICB9KQogICAgICApIHsKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBuZXdsaW5lCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5zcGFjZShzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBpZiAodG9rZW4ucmF3Lmxlbmd0aCA9PT0gMSAmJiB0b2tlbnMubGVuZ3RoID4gMCkgewogICAgICAgICAgLy8gaWYgdGhlcmUncyBhIHNpbmdsZSBcbiBhcyBhIHNwYWNlciwgaXQncyB0ZXJtaW5hdGluZyB0aGUgbGFzdCBsaW5lLAogICAgICAgICAgLy8gc28gbW92ZSBpdCB0aGVyZSBzbyB0aGF0IHdlIGRvbid0IGdldCB1bmVjZXNzYXJ5IHBhcmFncmFwaCB0YWdzCiAgICAgICAgICB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdLnJhdyArPSAiXG4iCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIH0KICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBjb2RlCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5jb2RlKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIGxhc3RUb2tlbiA9IHRva2Vuc1t0b2tlbnMubGVuZ3RoIC0gMV0KICAgICAgICAvLyBBbiBpbmRlbnRlZCBjb2RlIGJsb2NrIGNhbm5vdCBpbnRlcnJ1cHQgYSBwYXJhZ3JhcGguCiAgICAgICAgaWYgKAogICAgICAgICAgbGFzdFRva2VuICYmCiAgICAgICAgICAobGFzdFRva2VuLnR5cGUgPT09ICJwYXJhZ3JhcGgiIHx8IGxhc3RUb2tlbi50eXBlID09PSAidGV4dCIpCiAgICAgICAgKSB7CiAgICAgICAgICBsYXN0VG9rZW4ucmF3ICs9ICJcbiIgKyB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9ICJcbiIgKyB0b2tlbi50ZXh0CiAgICAgICAgICB0aGlzLmlubGluZVF1ZXVlW3RoaXMuaW5saW5lUXVldWUubGVuZ3RoIC0gMV0uc3JjID0gbGFzdFRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGZlbmNlcwogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIuZmVuY2VzKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGhlYWRpbmcKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmhlYWRpbmcoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gaHIKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmhyKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGJsb2NrcXVvdGUKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmJsb2NrcXVvdGUoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gbGlzdAogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIubGlzdChzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBodG1sCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5odG1sKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGRlZgogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIuZGVmKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIGxhc3RUb2tlbiA9IHRva2Vuc1t0b2tlbnMubGVuZ3RoIC0gMV0KICAgICAgICBpZiAoCiAgICAgICAgICBsYXN0VG9rZW4gJiYKICAgICAgICAgIChsYXN0VG9rZW4udHlwZSA9PT0gInBhcmFncmFwaCIgfHwgbGFzdFRva2VuLnR5cGUgPT09ICJ0ZXh0IikKICAgICAgICApIHsKICAgICAgICAgIGxhc3RUb2tlbi5yYXcgKz0gIlxuIiArIHRva2VuLnJhdwogICAgICAgICAgbGFzdFRva2VuLnRleHQgKz0gIlxuIiArIHRva2VuLnJhdwogICAgICAgICAgdGhpcy5pbmxpbmVRdWV1ZVt0aGlzLmlubGluZVF1ZXVlLmxlbmd0aCAtIDFdLnNyYyA9IGxhc3RUb2tlbi50ZXh0CiAgICAgICAgfSBlbHNlIGlmICghdGhpcy50b2tlbnMubGlua3NbdG9rZW4udGFnXSkgewogICAgICAgICAgdGhpcy50b2tlbnMubGlua3NbdG9rZW4udGFnXSA9IHsKICAgICAgICAgICAgaHJlZjogdG9rZW4uaHJlZiwKICAgICAgICAgICAgdGl0bGU6IHRva2VuLnRpdGxlLAogICAgICAgICAgfQogICAgICAgIH0KICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyB0YWJsZSAoZ2ZtKQogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIudGFibGUoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gbGhlYWRpbmcKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmxoZWFkaW5nKHNyYykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIHRvcC1sZXZlbCBwYXJhZ3JhcGgKICAgICAgLy8gcHJldmVudCBwYXJhZ3JhcGggY29uc3VtaW5nIGV4dGVuc2lvbnMgYnkgY2xpcHBpbmcgJ3NyYycgdG8gZXh0ZW5zaW9uIHN0YXJ0CiAgICAgIGN1dFNyYyA9IHNyYwogICAgICBpZiAodGhpcy5vcHRpb25zLmV4dGVuc2lvbnMgJiYgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMuc3RhcnRCbG9jaykgewogICAgICAgIGxldCBzdGFydEluZGV4ID0gSW5maW5pdHkKICAgICAgICBjb25zdCB0ZW1wU3JjID0gc3JjLnNsaWNlKDEpCiAgICAgICAgbGV0IHRlbXBTdGFydAogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnN0YXJ0QmxvY2suZm9yRWFjaChmdW5jdGlvbiAoZ2V0U3RhcnRJbmRleCkgewogICAgICAgICAgdGVtcFN0YXJ0ID0gZ2V0U3RhcnRJbmRleC5jYWxsKHsgbGV4ZXI6IHRoaXMgfSwgdGVtcFNyYykKICAgICAgICAgIGlmICh0eXBlb2YgdGVtcFN0YXJ0ID09PSAibnVtYmVyIiAmJiB0ZW1wU3RhcnQgPj0gMCkgewogICAgICAgICAgICBzdGFydEluZGV4ID0gTWF0aC5taW4oc3RhcnRJbmRleCwgdGVtcFN0YXJ0KQogICAgICAgICAgfQogICAgICAgIH0pCiAgICAgICAgaWYgKHN0YXJ0SW5kZXggPCBJbmZpbml0eSAmJiBzdGFydEluZGV4ID49IDApIHsKICAgICAgICAgIGN1dFNyYyA9IHNyYy5zdWJzdHJpbmcoMCwgc3RhcnRJbmRleCArIDEpCiAgICAgICAgfQogICAgICB9CiAgICAgIGlmICh0aGlzLnN0YXRlLnRvcCAmJiAodG9rZW4gPSB0aGlzLnRva2VuaXplci5wYXJhZ3JhcGgoY3V0U3JjKSkpIHsKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RQYXJhZ3JhcGhDbGlwcGVkICYmIGxhc3RUb2tlbi50eXBlID09PSAicGFyYWdyYXBoIikgewogICAgICAgICAgbGFzdFRva2VuLnJhdyArPSAiXG4iICsgdG9rZW4ucmF3CiAgICAgICAgICBsYXN0VG9rZW4udGV4dCArPSAiXG4iICsgdG9rZW4udGV4dAogICAgICAgICAgdGhpcy5pbmxpbmVRdWV1ZS5wb3AoKQogICAgICAgICAgdGhpcy5pbmxpbmVRdWV1ZVt0aGlzLmlubGluZVF1ZXVlLmxlbmd0aCAtIDFdLnNyYyA9IGxhc3RUb2tlbi50ZXh0CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIH0KICAgICAgICBsYXN0UGFyYWdyYXBoQ2xpcHBlZCA9IGN1dFNyYy5sZW5ndGggIT09IHNyYy5sZW5ndGgKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gdGV4dAogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIudGV4dChzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RUb2tlbiAmJiBsYXN0VG9rZW4udHlwZSA9PT0gInRleHQiKSB7CiAgICAgICAgICBsYXN0VG9rZW4ucmF3ICs9ICJcbiIgKyB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9ICJcbiIgKyB0b2tlbi50ZXh0CiAgICAgICAgICB0aGlzLmlubGluZVF1ZXVlLnBvcCgpCiAgICAgICAgICB0aGlzLmlubGluZVF1ZXVlW3RoaXMuaW5saW5lUXVldWUubGVuZ3RoIC0gMV0uc3JjID0gbGFzdFRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIGlmIChzcmMpIHsKICAgICAgICBjb25zdCBlcnJNc2cgPSAiSW5maW5pdGUgbG9vcCBvbiBieXRlOiAiICsgc3JjLmNoYXJDb2RlQXQoMCkKICAgICAgICBpZiAodGhpcy5vcHRpb25zLnNpbGVudCkgewogICAgICAgICAgY29uc29sZS5lcnJvcihlcnJNc2cpCiAgICAgICAgICBicmVhawogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoZXJyTXNnKQogICAgICAgIH0KICAgICAgfQogICAgfQoKICAgIHRoaXMuc3RhdGUudG9wID0gdHJ1ZQogICAgcmV0dXJuIHRva2VucwogIH0KCiAgaW5saW5lKHNyYywgdG9rZW5zKSB7CiAgICB0aGlzLmlubGluZVF1ZXVlLnB1c2goeyBzcmMsIHRva2VucyB9KQogIH0KCiAgLyoqCiAgICogTGV4aW5nL0NvbXBpbGluZwogICAqLwogIGlubGluZVRva2VucyhzcmMsIHRva2VucyA9IFtdKSB7CiAgICBsZXQgdG9rZW4sIGxhc3RUb2tlbiwgY3V0U3JjCgogICAgLy8gU3RyaW5nIHdpdGggbGlua3MgbWFza2VkIHRvIGF2b2lkIGludGVyZmVyZW5jZSB3aXRoIGVtIGFuZCBzdHJvbmcKICAgIGxldCBtYXNrZWRTcmMgPSBzcmMKICAgIGxldCBtYXRjaAogICAgbGV0IGtlZXBQcmV2Q2hhciwgcHJldkNoYXIKCiAgICAvLyBNYXNrIG91dCByZWZsaW5rcwogICAgaWYgKHRoaXMudG9rZW5zLmxpbmtzKSB7CiAgICAgIGNvbnN0IGxpbmtzID0gT2JqZWN0LmtleXModGhpcy50b2tlbnMubGlua3MpCiAgICAgIGlmIChsaW5rcy5sZW5ndGggPiAwKSB7CiAgICAgICAgd2hpbGUgKAogICAgICAgICAgKG1hdGNoID0gdGhpcy50b2tlbml6ZXIucnVsZXMuaW5saW5lLnJlZmxpbmtTZWFyY2guZXhlYyhtYXNrZWRTcmMpKSAhPQogICAgICAgICAgbnVsbAogICAgICAgICkgewogICAgICAgICAgaWYgKAogICAgICAgICAgICBsaW5rcy5pbmNsdWRlcyhtYXRjaFswXS5zbGljZShtYXRjaFswXS5sYXN0SW5kZXhPZigiWyIpICsgMSwgLTEpKQogICAgICAgICAgKSB7CiAgICAgICAgICAgIG1hc2tlZFNyYyA9CiAgICAgICAgICAgICAgbWFza2VkU3JjLnNsaWNlKDAsIG1hdGNoLmluZGV4KSArCiAgICAgICAgICAgICAgIlsiICsKICAgICAgICAgICAgICByZXBlYXRTdHJpbmcoImEiLCBtYXRjaFswXS5sZW5ndGggLSAyKSArCiAgICAgICAgICAgICAgIl0iICsKICAgICAgICAgICAgICBtYXNrZWRTcmMuc2xpY2UoCiAgICAgICAgICAgICAgICB0aGlzLnRva2VuaXplci5ydWxlcy5pbmxpbmUucmVmbGlua1NlYXJjaC5sYXN0SW5kZXgKICAgICAgICAgICAgICApCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgICAvLyBNYXNrIG91dCBvdGhlciBibG9ja3MKICAgIHdoaWxlICgKICAgICAgKG1hdGNoID0gdGhpcy50b2tlbml6ZXIucnVsZXMuaW5saW5lLmJsb2NrU2tpcC5leGVjKG1hc2tlZFNyYykpICE9IG51bGwKICAgICkgewogICAgICBtYXNrZWRTcmMgPQogICAgICAgIG1hc2tlZFNyYy5zbGljZSgwLCBtYXRjaC5pbmRleCkgKwogICAgICAgICJbIiArCiAgICAgICAgcmVwZWF0U3RyaW5nKCJhIiwgbWF0Y2hbMF0ubGVuZ3RoIC0gMikgKwogICAgICAgICJdIiArCiAgICAgICAgbWFza2VkU3JjLnNsaWNlKHRoaXMudG9rZW5pemVyLnJ1bGVzLmlubGluZS5ibG9ja1NraXAubGFzdEluZGV4KQogICAgfQoKICAgIC8vIE1hc2sgb3V0IGVzY2FwZWQgZW0gJiBzdHJvbmcgZGVsaW1pdGVycwogICAgd2hpbGUgKAogICAgICAobWF0Y2ggPSB0aGlzLnRva2VuaXplci5ydWxlcy5pbmxpbmUuZXNjYXBlZEVtU3QuZXhlYyhtYXNrZWRTcmMpKSAhPSBudWxsCiAgICApIHsKICAgICAgbWFza2VkU3JjID0KICAgICAgICBtYXNrZWRTcmMuc2xpY2UoMCwgbWF0Y2guaW5kZXgpICsKICAgICAgICAiKysiICsKICAgICAgICBtYXNrZWRTcmMuc2xpY2UodGhpcy50b2tlbml6ZXIucnVsZXMuaW5saW5lLmVzY2FwZWRFbVN0Lmxhc3RJbmRleCkKICAgIH0KCiAgICB3aGlsZSAoc3JjKSB7CiAgICAgIGlmICgha2VlcFByZXZDaGFyKSB7CiAgICAgICAgcHJldkNoYXIgPSAiIgogICAgICB9CiAgICAgIGtlZXBQcmV2Q2hhciA9IGZhbHNlCgogICAgICAvLyBleHRlbnNpb25zCiAgICAgIGlmICgKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucyAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLmlubGluZSAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLmlubGluZS5zb21lKGV4dFRva2VuaXplciA9PiB7CiAgICAgICAgICBpZiAoKHRva2VuID0gZXh0VG9rZW5pemVyLmNhbGwoeyBsZXhlcjogdGhpcyB9LCBzcmMsIHRva2VucykpKSB7CiAgICAgICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgICAgIHJldHVybiB0cnVlCiAgICAgICAgICB9CiAgICAgICAgICByZXR1cm4gZmFsc2UKICAgICAgICB9KQogICAgICApIHsKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBlc2NhcGUKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmVzY2FwZShzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyB0YWcKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLnRhZyhzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RUb2tlbiAmJiB0b2tlbi50eXBlID09PSAidGV4dCIgJiYgbGFzdFRva2VuLnR5cGUgPT09ICJ0ZXh0IikgewogICAgICAgICAgbGFzdFRva2VuLnJhdyArPSB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9IHRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGxpbmsKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmxpbmsoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gcmVmbGluaywgbm9saW5rCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5yZWZsaW5rKHNyYywgdGhpcy50b2tlbnMubGlua3MpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICBsYXN0VG9rZW4gPSB0b2tlbnNbdG9rZW5zLmxlbmd0aCAtIDFdCiAgICAgICAgaWYgKGxhc3RUb2tlbiAmJiB0b2tlbi50eXBlID09PSAidGV4dCIgJiYgbGFzdFRva2VuLnR5cGUgPT09ICJ0ZXh0IikgewogICAgICAgICAgbGFzdFRva2VuLnJhdyArPSB0b2tlbi5yYXcKICAgICAgICAgIGxhc3RUb2tlbi50ZXh0ICs9IHRva2VuLnRleHQKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgfQogICAgICAgIGNvbnRpbnVlCiAgICAgIH0KCiAgICAgIC8vIGVtICYgc3Ryb25nCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5lbVN0cm9uZyhzcmMsIG1hc2tlZFNyYywgcHJldkNoYXIpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBjb2RlCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5jb2Rlc3BhbihzcmMpKSkgewogICAgICAgIHNyYyA9IHNyYy5zdWJzdHJpbmcodG9rZW4ucmF3Lmxlbmd0aCkKICAgICAgICB0b2tlbnMucHVzaCh0b2tlbikKICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICAvLyBicgogICAgICBpZiAoKHRva2VuID0gdGhpcy50b2tlbml6ZXIuYnIoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gZGVsIChnZm0pCiAgICAgIGlmICgodG9rZW4gPSB0aGlzLnRva2VuaXplci5kZWwoc3JjKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gYXV0b2xpbmsKICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmF1dG9saW5rKHNyYywgbWFuZ2xlKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gdXJsIChnZm0pCiAgICAgIGlmICghdGhpcy5zdGF0ZS5pbkxpbmsgJiYgKHRva2VuID0gdGhpcy50b2tlbml6ZXIudXJsKHNyYywgbWFuZ2xlKSkpIHsKICAgICAgICBzcmMgPSBzcmMuc3Vic3RyaW5nKHRva2VuLnJhdy5sZW5ndGgpCiAgICAgICAgdG9rZW5zLnB1c2godG9rZW4pCiAgICAgICAgY29udGludWUKICAgICAgfQoKICAgICAgLy8gdGV4dAogICAgICAvLyBwcmV2ZW50IGlubGluZVRleHQgY29uc3VtaW5nIGV4dGVuc2lvbnMgYnkgY2xpcHBpbmcgJ3NyYycgdG8gZXh0ZW5zaW9uIHN0YXJ0CiAgICAgIGN1dFNyYyA9IHNyYwogICAgICBpZiAodGhpcy5vcHRpb25zLmV4dGVuc2lvbnMgJiYgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMuc3RhcnRJbmxpbmUpIHsKICAgICAgICBsZXQgc3RhcnRJbmRleCA9IEluZmluaXR5CiAgICAgICAgY29uc3QgdGVtcFNyYyA9IHNyYy5zbGljZSgxKQogICAgICAgIGxldCB0ZW1wU3RhcnQKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucy5zdGFydElubGluZS5mb3JFYWNoKGZ1bmN0aW9uIChnZXRTdGFydEluZGV4KSB7CiAgICAgICAgICB0ZW1wU3RhcnQgPSBnZXRTdGFydEluZGV4LmNhbGwoeyBsZXhlcjogdGhpcyB9LCB0ZW1wU3JjKQogICAgICAgICAgaWYgKHR5cGVvZiB0ZW1wU3RhcnQgPT09ICJudW1iZXIiICYmIHRlbXBTdGFydCA+PSAwKSB7CiAgICAgICAgICAgIHN0YXJ0SW5kZXggPSBNYXRoLm1pbihzdGFydEluZGV4LCB0ZW1wU3RhcnQpCiAgICAgICAgICB9CiAgICAgICAgfSkKICAgICAgICBpZiAoc3RhcnRJbmRleCA8IEluZmluaXR5ICYmIHN0YXJ0SW5kZXggPj0gMCkgewogICAgICAgICAgY3V0U3JjID0gc3JjLnN1YnN0cmluZygwLCBzdGFydEluZGV4ICsgMSkKICAgICAgICB9CiAgICAgIH0KICAgICAgaWYgKCh0b2tlbiA9IHRoaXMudG9rZW5pemVyLmlubGluZVRleHQoY3V0U3JjLCBzbWFydHlwYW50cykpKSB7CiAgICAgICAgc3JjID0gc3JjLnN1YnN0cmluZyh0b2tlbi5yYXcubGVuZ3RoKQogICAgICAgIGlmICh0b2tlbi5yYXcuc2xpY2UoLTEpICE9PSAiXyIpIHsKICAgICAgICAgIC8vIFRyYWNrIHByZXZDaGFyIGJlZm9yZSBzdHJpbmcgb2YgX19fXyBzdGFydGVkCiAgICAgICAgICBwcmV2Q2hhciA9IHRva2VuLnJhdy5zbGljZSgtMSkKICAgICAgICB9CiAgICAgICAga2VlcFByZXZDaGFyID0gdHJ1ZQogICAgICAgIGxhc3RUb2tlbiA9IHRva2Vuc1t0b2tlbnMubGVuZ3RoIC0gMV0KICAgICAgICBpZiAobGFzdFRva2VuICYmIGxhc3RUb2tlbi50eXBlID09PSAidGV4dCIpIHsKICAgICAgICAgIGxhc3RUb2tlbi5yYXcgKz0gdG9rZW4ucmF3CiAgICAgICAgICBsYXN0VG9rZW4udGV4dCArPSB0b2tlbi50ZXh0CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHRva2Vucy5wdXNoKHRva2VuKQogICAgICAgIH0KICAgICAgICBjb250aW51ZQogICAgICB9CgogICAgICBpZiAoc3JjKSB7CiAgICAgICAgY29uc3QgZXJyTXNnID0gIkluZmluaXRlIGxvb3Agb24gYnl0ZTogIiArIHNyYy5jaGFyQ29kZUF0KDApCiAgICAgICAgaWYgKHRoaXMub3B0aW9ucy5zaWxlbnQpIHsKICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZXJyTXNnKQogICAgICAgICAgYnJlYWsKICAgICAgICB9IGVsc2UgewogICAgICAgICAgdGhyb3cgbmV3IEVycm9yKGVyck1zZykKICAgICAgICB9CiAgICAgIH0KICAgIH0KCiAgICByZXR1cm4gdG9rZW5zCiAgfQp9CgovKioKICogUmVuZGVyZXIKICovCmNsYXNzIFJlbmRlcmVyIHsKICBjb25zdHJ1Y3RvcihvcHRpb25zKSB7CiAgICB0aGlzLm9wdGlvbnMgPSBvcHRpb25zIHx8IGRlZmF1bHRzCiAgfQoKICBjb2RlKGNvZGUsIGluZm9zdHJpbmcsIGVzY2FwZWQpIHsKICAgIGNvbnN0IGxhbmcgPSAoaW5mb3N0cmluZyB8fCAiIikubWF0Y2goL1xTKi8pWzBdCiAgICBpZiAodGhpcy5vcHRpb25zLmhpZ2hsaWdodCkgewogICAgICBjb25zdCBvdXQgPSB0aGlzLm9wdGlvbnMuaGlnaGxpZ2h0KGNvZGUsIGxhbmcpCiAgICAgIGlmIChvdXQgIT0gbnVsbCAmJiBvdXQgIT09IGNvZGUpIHsKICAgICAgICBlc2NhcGVkID0gdHJ1ZQogICAgICAgIGNvZGUgPSBvdXQKICAgICAgfQogICAgfQoKICAgIGNvZGUgPSBjb2RlLnJlcGxhY2UoL1xuJC8sICIiKSArICJcbiIKCiAgICBpZiAoIWxhbmcpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAiPHByZT48Y29kZT4iICsKICAgICAgICAoZXNjYXBlZCA/IGNvZGUgOiBlc2NhcGUoY29kZSwgdHJ1ZSkpICsKICAgICAgICAiPC9jb2RlPjwvcHJlPlxuIgogICAgICApCiAgICB9CgogICAgcmV0dXJuICgKICAgICAgJzxwcmU+PGNvZGUgY2xhc3M9IicgKwogICAgICB0aGlzLm9wdGlvbnMubGFuZ1ByZWZpeCArCiAgICAgIGVzY2FwZShsYW5nLCB0cnVlKSArCiAgICAgICciPicgKwogICAgICAoZXNjYXBlZCA/IGNvZGUgOiBlc2NhcGUoY29kZSwgdHJ1ZSkpICsKICAgICAgIjwvY29kZT48L3ByZT5cbiIKICAgICkKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSBxdW90ZQogICAqLwogIGJsb2NrcXVvdGUocXVvdGUpIHsKICAgIHJldHVybiBgPGJsb2NrcXVvdGU+XG4ke3F1b3RlfTwvYmxvY2txdW90ZT5cbmAKICB9CgogIGh0bWwoaHRtbCkgewogICAgcmV0dXJuIGh0bWwKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICogQHBhcmFtIHtzdHJpbmd9IGxldmVsCiAgICogQHBhcmFtIHtzdHJpbmd9IHJhdwogICAqIEBwYXJhbSB7YW55fSBzbHVnZ2VyCiAgICovCiAgaGVhZGluZyh0ZXh0LCBsZXZlbCwgcmF3LCBzbHVnZ2VyKSB7CiAgICBpZiAodGhpcy5vcHRpb25zLmhlYWRlcklkcykgewogICAgICBjb25zdCBpZCA9IHRoaXMub3B0aW9ucy5oZWFkZXJQcmVmaXggKyBzbHVnZ2VyLnNsdWcocmF3KQogICAgICByZXR1cm4gYDxoJHtsZXZlbH0gaWQ9IiR7aWR9Ij4ke3RleHR9PC9oJHtsZXZlbH0+XG5gCiAgICB9CgogICAgLy8gaWdub3JlIElEcwogICAgcmV0dXJuIGA8aCR7bGV2ZWx9PiR7dGV4dH08L2gke2xldmVsfT5cbmAKICB9CgogIGhyKCkgewogICAgcmV0dXJuIHRoaXMub3B0aW9ucy54aHRtbCA/ICI8aHIvPlxuIiA6ICI8aHI+XG4iCiAgfQoKICBsaXN0KGJvZHksIG9yZGVyZWQsIHN0YXJ0KSB7CiAgICBjb25zdCB0eXBlID0gb3JkZXJlZCA/ICJvbCIgOiAidWwiLAogICAgICBzdGFydGF0dCA9IG9yZGVyZWQgJiYgc3RhcnQgIT09IDEgPyAnIHN0YXJ0PSInICsgc3RhcnQgKyAnIicgOiAiIgogICAgcmV0dXJuICI8IiArIHR5cGUgKyBzdGFydGF0dCArICI+XG4iICsgYm9keSArICI8LyIgKyB0eXBlICsgIj5cbiIKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICovCiAgbGlzdGl0ZW0odGV4dCkgewogICAgcmV0dXJuIGA8bGk+JHt0ZXh0fTwvbGk+XG5gCiAgfQoKICBjaGVja2JveChjaGVja2VkKSB7CiAgICByZXR1cm4gKAogICAgICAiPGlucHV0ICIgKwogICAgICAoY2hlY2tlZCA/ICdjaGVja2VkPSIiICcgOiAiIikgKwogICAgICAnZGlzYWJsZWQ9IiIgdHlwZT0iY2hlY2tib3giJyArCiAgICAgICh0aGlzLm9wdGlvbnMueGh0bWwgPyAiIC8iIDogIiIpICsKICAgICAgIj4gIgogICAgKQogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBwYXJhZ3JhcGgodGV4dCkgewogICAgcmV0dXJuIGA8cD4ke3RleHR9PC9wPlxuYAogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IGhlYWRlcgogICAqIEBwYXJhbSB7c3RyaW5nfSBib2R5CiAgICovCiAgdGFibGUoaGVhZGVyLCBib2R5KSB7CiAgICBpZiAoYm9keSkgYm9keSA9IGA8dGJvZHk+JHtib2R5fTwvdGJvZHk+YAoKICAgIHJldHVybiAoCiAgICAgICI8dGFibGU+XG4iICsgIjx0aGVhZD5cbiIgKyBoZWFkZXIgKyAiPC90aGVhZD5cbiIgKyBib2R5ICsgIjwvdGFibGU+XG4iCiAgICApCiAgfQoKICAvKioKICAgKiBAcGFyYW0ge3N0cmluZ30gY29udGVudAogICAqLwogIHRhYmxlcm93KGNvbnRlbnQpIHsKICAgIHJldHVybiBgPHRyPlxuJHtjb250ZW50fTwvdHI+XG5gCiAgfQoKICB0YWJsZWNlbGwoY29udGVudCwgZmxhZ3MpIHsKICAgIGNvbnN0IHR5cGUgPSBmbGFncy5oZWFkZXIgPyAidGgiIDogInRkIgogICAgY29uc3QgdGFnID0gZmxhZ3MuYWxpZ24gPyBgPCR7dHlwZX0gYWxpZ249IiR7ZmxhZ3MuYWxpZ259Ij5gIDogYDwke3R5cGV9PmAKICAgIHJldHVybiB0YWcgKyBjb250ZW50ICsgYDwvJHt0eXBlfT5cbmAKICB9CgogIC8qKgogICAqIHNwYW4gbGV2ZWwgcmVuZGVyZXIKICAgKiBAcGFyYW0ge3N0cmluZ30gdGV4dAogICAqLwogIHN0cm9uZyh0ZXh0KSB7CiAgICByZXR1cm4gYDxzdHJvbmc+JHt0ZXh0fTwvc3Ryb25nPmAKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICovCiAgZW0odGV4dCkgewogICAgcmV0dXJuIGA8ZW0+JHt0ZXh0fTwvZW0+YAogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBjb2Rlc3Bhbih0ZXh0KSB7CiAgICByZXR1cm4gYDxjb2RlPiR7dGV4dH08L2NvZGU+YAogIH0KCiAgYnIoKSB7CiAgICByZXR1cm4gdGhpcy5vcHRpb25zLnhodG1sID8gIjxici8+IiA6ICI8YnI+IgogIH0KCiAgLyoqCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBkZWwodGV4dCkgewogICAgcmV0dXJuIGA8ZGVsPiR7dGV4dH08L2RlbD5gCiAgfQoKICAvKioKICAgKiBAcGFyYW0ge3N0cmluZ30gaHJlZgogICAqIEBwYXJhbSB7c3RyaW5nfSB0aXRsZQogICAqIEBwYXJhbSB7c3RyaW5nfSB0ZXh0CiAgICovCiAgbGluayhocmVmLCB0aXRsZSwgdGV4dCkgewogICAgaHJlZiA9IGNsZWFuVXJsKHRoaXMub3B0aW9ucy5zYW5pdGl6ZSwgdGhpcy5vcHRpb25zLmJhc2VVcmwsIGhyZWYpCiAgICBpZiAoaHJlZiA9PT0gbnVsbCkgewogICAgICByZXR1cm4gdGV4dAogICAgfQogICAgbGV0IG91dCA9ICc8YSBocmVmPSInICsgZXNjYXBlKGhyZWYpICsgJyInCiAgICBpZiAodGl0bGUpIHsKICAgICAgb3V0ICs9ICcgdGl0bGU9IicgKyB0aXRsZSArICciJwogICAgfQogICAgb3V0ICs9ICI+IiArIHRleHQgKyAiPC9hPiIKICAgIHJldHVybiBvdXQKICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSBocmVmCiAgICogQHBhcmFtIHtzdHJpbmd9IHRpdGxlCiAgICogQHBhcmFtIHtzdHJpbmd9IHRleHQKICAgKi8KICBpbWFnZShocmVmLCB0aXRsZSwgdGV4dCkgewogICAgaHJlZiA9IGNsZWFuVXJsKHRoaXMub3B0aW9ucy5zYW5pdGl6ZSwgdGhpcy5vcHRpb25zLmJhc2VVcmwsIGhyZWYpCiAgICBpZiAoaHJlZiA9PT0gbnVsbCkgewogICAgICByZXR1cm4gdGV4dAogICAgfQoKICAgIGxldCBvdXQgPSBgPGltZyBzcmM9IiR7aHJlZn0iIGFsdD0iJHt0ZXh0fSJgCiAgICBpZiAodGl0bGUpIHsKICAgICAgb3V0ICs9IGAgdGl0bGU9IiR7dGl0bGV9ImAKICAgIH0KICAgIG91dCArPSB0aGlzLm9wdGlvbnMueGh0bWwgPyAiLz4iIDogIj4iCiAgICByZXR1cm4gb3V0CiAgfQoKICB0ZXh0KHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQp9CgovKioKICogVGV4dFJlbmRlcmVyCiAqIHJldHVybnMgb25seSB0aGUgdGV4dHVhbCBwYXJ0IG9mIHRoZSB0b2tlbgogKi8KY2xhc3MgVGV4dFJlbmRlcmVyIHsKICAvLyBubyBuZWVkIGZvciBibG9jayBsZXZlbCByZW5kZXJlcnMKICBzdHJvbmcodGV4dCkgewogICAgcmV0dXJuIHRleHQKICB9CgogIGVtKHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBjb2Rlc3Bhbih0ZXh0KSB7CiAgICByZXR1cm4gdGV4dAogIH0KCiAgZGVsKHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBodG1sKHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICB0ZXh0KHRleHQpIHsKICAgIHJldHVybiB0ZXh0CiAgfQoKICBsaW5rKGhyZWYsIHRpdGxlLCB0ZXh0KSB7CiAgICByZXR1cm4gIiIgKyB0ZXh0CiAgfQoKICBpbWFnZShocmVmLCB0aXRsZSwgdGV4dCkgewogICAgcmV0dXJuICIiICsgdGV4dAogIH0KCiAgYnIoKSB7CiAgICByZXR1cm4gIiIKICB9Cn0KCi8qKgogKiBTbHVnZ2VyIGdlbmVyYXRlcyBoZWFkZXIgaWQKICovCmNsYXNzIFNsdWdnZXIgewogIGNvbnN0cnVjdG9yKCkgewogICAgdGhpcy5zZWVuID0ge30KICB9CgogIC8qKgogICAqIEBwYXJhbSB7c3RyaW5nfSB2YWx1ZQogICAqLwogIHNlcmlhbGl6ZSh2YWx1ZSkgewogICAgcmV0dXJuICgKICAgICAgdmFsdWUKICAgICAgICAudG9Mb3dlckNhc2UoKQogICAgICAgIC50cmltKCkKICAgICAgICAvLyByZW1vdmUgaHRtbCB0YWdzCiAgICAgICAgLnJlcGxhY2UoLzxbIVwvYS16XS4qPz4vZ2ksICIiKQogICAgICAgIC8vIHJlbW92ZSB1bndhbnRlZCBjaGFycwogICAgICAgIC5yZXBsYWNlKAogICAgICAgICAgL1tcdTIwMDAtXHUyMDZGXHUyRTAwLVx1MkU3RlxcJyEiIyQlJigpKissLi86Ozw9Pj9AW1xdXmB7fH1+XS9nLAogICAgICAgICAgIiIKICAgICAgICApCiAgICAgICAgLnJlcGxhY2UoL1xzL2csICItIikKICAgICkKICB9CgogIC8qKgogICAqIEZpbmRzIHRoZSBuZXh0IHNhZmUgKHVuaXF1ZSkgc2x1ZyB0byB1c2UKICAgKiBAcGFyYW0ge3N0cmluZ30gb3JpZ2luYWxTbHVnCiAgICogQHBhcmFtIHtib29sZWFufSBpc0RyeVJ1bgogICAqLwogIGdldE5leHRTYWZlU2x1ZyhvcmlnaW5hbFNsdWcsIGlzRHJ5UnVuKSB7CiAgICBsZXQgc2x1ZyA9IG9yaWdpbmFsU2x1ZwogICAgbGV0IG9jY3VyZW5jZUFjY3VtdWxhdG9yID0gMAogICAgaWYgKHRoaXMuc2Vlbi5oYXNPd25Qcm9wZXJ0eShzbHVnKSkgewogICAgICBvY2N1cmVuY2VBY2N1bXVsYXRvciA9IHRoaXMuc2VlbltvcmlnaW5hbFNsdWddCiAgICAgIGRvIHsKICAgICAgICBvY2N1cmVuY2VBY2N1bXVsYXRvcisrCiAgICAgICAgc2x1ZyA9IG9yaWdpbmFsU2x1ZyArICItIiArIG9jY3VyZW5jZUFjY3VtdWxhdG9yCiAgICAgIH0gd2hpbGUgKHRoaXMuc2Vlbi5oYXNPd25Qcm9wZXJ0eShzbHVnKSkKICAgIH0KICAgIGlmICghaXNEcnlSdW4pIHsKICAgICAgdGhpcy5zZWVuW29yaWdpbmFsU2x1Z10gPSBvY2N1cmVuY2VBY2N1bXVsYXRvcgogICAgICB0aGlzLnNlZW5bc2x1Z10gPSAwCiAgICB9CiAgICByZXR1cm4gc2x1ZwogIH0KCiAgLyoqCiAgICogQ29udmVydCBzdHJpbmcgdG8gdW5pcXVlIGlkCiAgICogQHBhcmFtIHtvYmplY3R9IFtvcHRpb25zXQogICAqIEBwYXJhbSB7Ym9vbGVhbn0gW29wdGlvbnMuZHJ5cnVuXSBHZW5lcmF0ZXMgdGhlIG5leHQgdW5pcXVlIHNsdWcgd2l0aG91dAogICAqIHVwZGF0aW5nIHRoZSBpbnRlcm5hbCBhY2N1bXVsYXRvci4KICAgKi8KICBzbHVnKHZhbHVlLCBvcHRpb25zID0ge30pIHsKICAgIGNvbnN0IHNsdWcgPSB0aGlzLnNlcmlhbGl6ZSh2YWx1ZSkKICAgIHJldHVybiB0aGlzLmdldE5leHRTYWZlU2x1ZyhzbHVnLCBvcHRpb25zLmRyeXJ1bikKICB9Cn0KCi8qKgogKiBQYXJzaW5nICYgQ29tcGlsaW5nCiAqLwpjbGFzcyBQYXJzZXIgewogIGNvbnN0cnVjdG9yKG9wdGlvbnMpIHsKICAgIHRoaXMub3B0aW9ucyA9IG9wdGlvbnMgfHwgZGVmYXVsdHMKICAgIHRoaXMub3B0aW9ucy5yZW5kZXJlciA9IHRoaXMub3B0aW9ucy5yZW5kZXJlciB8fCBuZXcgUmVuZGVyZXIoKQogICAgdGhpcy5yZW5kZXJlciA9IHRoaXMub3B0aW9ucy5yZW5kZXJlcgogICAgdGhpcy5yZW5kZXJlci5vcHRpb25zID0gdGhpcy5vcHRpb25zCiAgICB0aGlzLnRleHRSZW5kZXJlciA9IG5ldyBUZXh0UmVuZGVyZXIoKQogICAgdGhpcy5zbHVnZ2VyID0gbmV3IFNsdWdnZXIoKQogIH0KCiAgLyoqCiAgICogU3RhdGljIFBhcnNlIE1ldGhvZAogICAqLwogIHN0YXRpYyBwYXJzZSh0b2tlbnMsIG9wdGlvbnMpIHsKICAgIGNvbnN0IHBhcnNlciA9IG5ldyBQYXJzZXIob3B0aW9ucykKICAgIHJldHVybiBwYXJzZXIucGFyc2UodG9rZW5zKQogIH0KCiAgLyoqCiAgICogU3RhdGljIFBhcnNlIElubGluZSBNZXRob2QKICAgKi8KICBzdGF0aWMgcGFyc2VJbmxpbmUodG9rZW5zLCBvcHRpb25zKSB7CiAgICBjb25zdCBwYXJzZXIgPSBuZXcgUGFyc2VyKG9wdGlvbnMpCiAgICByZXR1cm4gcGFyc2VyLnBhcnNlSW5saW5lKHRva2VucykKICB9CgogIC8qKgogICAqIFBhcnNlIExvb3AKICAgKi8KICBwYXJzZSh0b2tlbnMsIHRvcCA9IHRydWUpIHsKICAgIGxldCBvdXQgPSAiIiwKICAgICAgaSwKICAgICAgaiwKICAgICAgaywKICAgICAgbDIsCiAgICAgIGwzLAogICAgICByb3csCiAgICAgIGNlbGwsCiAgICAgIGhlYWRlciwKICAgICAgYm9keSwKICAgICAgdG9rZW4sCiAgICAgIG9yZGVyZWQsCiAgICAgIHN0YXJ0LAogICAgICBsb29zZSwKICAgICAgaXRlbUJvZHksCiAgICAgIGl0ZW0sCiAgICAgIGNoZWNrZWQsCiAgICAgIHRhc2ssCiAgICAgIGNoZWNrYm94LAogICAgICByZXQKCiAgICBjb25zdCBsID0gdG9rZW5zLmxlbmd0aAogICAgZm9yIChpID0gMDsgaSA8IGw7IGkrKykgewogICAgICB0b2tlbiA9IHRva2Vuc1tpXQoKICAgICAgLy8gUnVuIGFueSByZW5kZXJlciBleHRlbnNpb25zCiAgICAgIGlmICgKICAgICAgICB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucyAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnJlbmRlcmVycyAmJgogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnJlbmRlcmVyc1t0b2tlbi50eXBlXQogICAgICApIHsKICAgICAgICByZXQgPSB0aGlzLm9wdGlvbnMuZXh0ZW5zaW9ucy5yZW5kZXJlcnNbdG9rZW4udHlwZV0uY2FsbCgKICAgICAgICAgIHsgcGFyc2VyOiB0aGlzIH0sCiAgICAgICAgICB0b2tlbgogICAgICAgICkKICAgICAgICBpZiAoCiAgICAgICAgICByZXQgIT09IGZhbHNlIHx8CiAgICAgICAgICAhWwogICAgICAgICAgICAic3BhY2UiLAogICAgICAgICAgICAiaHIiLAogICAgICAgICAgICAiaGVhZGluZyIsCiAgICAgICAgICAgICJjb2RlIiwKICAgICAgICAgICAgInRhYmxlIiwKICAgICAgICAgICAgImJsb2NrcXVvdGUiLAogICAgICAgICAgICAibGlzdCIsCiAgICAgICAgICAgICJodG1sIiwKICAgICAgICAgICAgInBhcmFncmFwaCIsCiAgICAgICAgICAgICJ0ZXh0IiwKICAgICAgICAgIF0uaW5jbHVkZXModG9rZW4udHlwZSkKICAgICAgICApIHsKICAgICAgICAgIG91dCArPSByZXQgfHwgIiIKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICB9CgogICAgICBzd2l0Y2ggKHRva2VuLnR5cGUpIHsKICAgICAgICBjYXNlICJzcGFjZSI6IHsKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImhyIjogewogICAgICAgICAgb3V0ICs9IHRoaXMucmVuZGVyZXIuaHIoKQogICAgICAgICAgY29udGludWUKICAgICAgICB9CiAgICAgICAgY2FzZSAiaGVhZGluZyI6IHsKICAgICAgICAgIG91dCArPSB0aGlzLnJlbmRlcmVyLmhlYWRpbmcoCiAgICAgICAgICAgIHRoaXMucGFyc2VJbmxpbmUodG9rZW4udG9rZW5zKSwKICAgICAgICAgICAgdG9rZW4uZGVwdGgsCiAgICAgICAgICAgIHVuZXNjYXBlKHRoaXMucGFyc2VJbmxpbmUodG9rZW4udG9rZW5zLCB0aGlzLnRleHRSZW5kZXJlcikpLAogICAgICAgICAgICB0aGlzLnNsdWdnZXIKICAgICAgICAgICkKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImNvZGUiOiB7CiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5jb2RlKHRva2VuLnRleHQsIHRva2VuLmxhbmcsIHRva2VuLmVzY2FwZWQpCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgICBjYXNlICJ0YWJsZSI6IHsKICAgICAgICAgIGhlYWRlciA9ICIiCgogICAgICAgICAgLy8gaGVhZGVyCiAgICAgICAgICBjZWxsID0gIiIKICAgICAgICAgIGwyID0gdG9rZW4uaGVhZGVyLmxlbmd0aAogICAgICAgICAgZm9yIChqID0gMDsgaiA8IGwyOyBqKyspIHsKICAgICAgICAgICAgY2VsbCArPSB0aGlzLnJlbmRlcmVyLnRhYmxlY2VsbCgKICAgICAgICAgICAgICB0aGlzLnBhcnNlSW5saW5lKHRva2VuLmhlYWRlcltqXS50b2tlbnMpLAogICAgICAgICAgICAgIHsgaGVhZGVyOiB0cnVlLCBhbGlnbjogdG9rZW4uYWxpZ25bal0gfQogICAgICAgICAgICApCiAgICAgICAgICB9CiAgICAgICAgICBoZWFkZXIgKz0gdGhpcy5yZW5kZXJlci50YWJsZXJvdyhjZWxsKQoKICAgICAgICAgIGJvZHkgPSAiIgogICAgICAgICAgbDIgPSB0b2tlbi5yb3dzLmxlbmd0aAogICAgICAgICAgZm9yIChqID0gMDsgaiA8IGwyOyBqKyspIHsKICAgICAgICAgICAgcm93ID0gdG9rZW4ucm93c1tqXQoKICAgICAgICAgICAgY2VsbCA9ICIiCiAgICAgICAgICAgIGwzID0gcm93Lmxlbmd0aAogICAgICAgICAgICBmb3IgKGsgPSAwOyBrIDwgbDM7IGsrKykgewogICAgICAgICAgICAgIGNlbGwgKz0gdGhpcy5yZW5kZXJlci50YWJsZWNlbGwodGhpcy5wYXJzZUlubGluZShyb3dba10udG9rZW5zKSwgewogICAgICAgICAgICAgICAgaGVhZGVyOiBmYWxzZSwKICAgICAgICAgICAgICAgIGFsaWduOiB0b2tlbi5hbGlnbltrXSwKICAgICAgICAgICAgICB9KQogICAgICAgICAgICB9CgogICAgICAgICAgICBib2R5ICs9IHRoaXMucmVuZGVyZXIudGFibGVyb3coY2VsbCkKICAgICAgICAgIH0KICAgICAgICAgIG91dCArPSB0aGlzLnJlbmRlcmVyLnRhYmxlKGhlYWRlciwgYm9keSkKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImJsb2NrcXVvdGUiOiB7CiAgICAgICAgICBib2R5ID0gdGhpcy5wYXJzZSh0b2tlbi50b2tlbnMpCiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5ibG9ja3F1b3RlKGJvZHkpCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgICBjYXNlICJsaXN0IjogewogICAgICAgICAgb3JkZXJlZCA9IHRva2VuLm9yZGVyZWQKICAgICAgICAgIHN0YXJ0ID0gdG9rZW4uc3RhcnQKICAgICAgICAgIGxvb3NlID0gdG9rZW4ubG9vc2UKICAgICAgICAgIGwyID0gdG9rZW4uaXRlbXMubGVuZ3RoCgogICAgICAgICAgYm9keSA9ICIiCiAgICAgICAgICBmb3IgKGogPSAwOyBqIDwgbDI7IGorKykgewogICAgICAgICAgICBpdGVtID0gdG9rZW4uaXRlbXNbal0KICAgICAgICAgICAgY2hlY2tlZCA9IGl0ZW0uY2hlY2tlZAogICAgICAgICAgICB0YXNrID0gaXRlbS50YXNrCgogICAgICAgICAgICBpdGVtQm9keSA9ICIiCiAgICAgICAgICAgIGlmIChpdGVtLnRhc2spIHsKICAgICAgICAgICAgICBjaGVja2JveCA9IHRoaXMucmVuZGVyZXIuY2hlY2tib3goY2hlY2tlZCkKICAgICAgICAgICAgICBpZiAobG9vc2UpIHsKICAgICAgICAgICAgICAgIGlmICgKICAgICAgICAgICAgICAgICAgaXRlbS50b2tlbnMubGVuZ3RoID4gMCAmJgogICAgICAgICAgICAgICAgICBpdGVtLnRva2Vuc1swXS50eXBlID09PSAicGFyYWdyYXBoIgogICAgICAgICAgICAgICAgKSB7CiAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zWzBdLnRleHQgPSBjaGVja2JveCArICIgIiArIGl0ZW0udG9rZW5zWzBdLnRleHQKICAgICAgICAgICAgICAgICAgaWYgKAogICAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zWzBdLnRva2VucyAmJgogICAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zWzBdLnRva2Vucy5sZW5ndGggPiAwICYmCiAgICAgICAgICAgICAgICAgICAgaXRlbS50b2tlbnNbMF0udG9rZW5zWzBdLnR5cGUgPT09ICJ0ZXh0IgogICAgICAgICAgICAgICAgICApIHsKICAgICAgICAgICAgICAgICAgICBpdGVtLnRva2Vuc1swXS50b2tlbnNbMF0udGV4dCA9CiAgICAgICAgICAgICAgICAgICAgICBjaGVja2JveCArICIgIiArIGl0ZW0udG9rZW5zWzBdLnRva2Vuc1swXS50ZXh0CiAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICAgIGl0ZW0udG9rZW5zLnVuc2hpZnQoewogICAgICAgICAgICAgICAgICAgIHR5cGU6ICJ0ZXh0IiwKICAgICAgICAgICAgICAgICAgICB0ZXh0OiBjaGVja2JveCwKICAgICAgICAgICAgICAgICAgfSkKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgaXRlbUJvZHkgKz0gY2hlY2tib3gKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGl0ZW1Cb2R5ICs9IHRoaXMucGFyc2UoaXRlbS50b2tlbnMsIGxvb3NlKQogICAgICAgICAgICBib2R5ICs9IHRoaXMucmVuZGVyZXIubGlzdGl0ZW0oaXRlbUJvZHksIHRhc2ssIGNoZWNrZWQpCiAgICAgICAgICB9CgogICAgICAgICAgb3V0ICs9IHRoaXMucmVuZGVyZXIubGlzdChib2R5LCBvcmRlcmVkLCBzdGFydCkKICAgICAgICAgIGNvbnRpbnVlCiAgICAgICAgfQogICAgICAgIGNhc2UgImh0bWwiOiB7CiAgICAgICAgICAvLyBUT0RPIHBhcnNlIGlubGluZSBjb250ZW50IGlmIHBhcmFtZXRlciBtYXJrZG93bj0xCiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5odG1sKHRva2VuLnRleHQpCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgICBjYXNlICJwYXJhZ3JhcGgiOiB7CiAgICAgICAgICBvdXQgKz0gdGhpcy5yZW5kZXJlci5wYXJhZ3JhcGgodGhpcy5wYXJzZUlubGluZSh0b2tlbi50b2tlbnMpKQogICAgICAgICAgY29udGludWUKICAgICAgICB9CiAgICAgICAgY2FzZSAidGV4dCI6IHsKICAgICAgICAgIGJvZHkgPSB0b2tlbi50b2tlbnMgPyB0aGlzLnBhcnNlSW5saW5lKHRva2VuLnRva2VucykgOiB0b2tlbi50ZXh0CiAgICAgICAgICB3aGlsZSAoaSArIDEgPCBsICYmIHRva2Vuc1tpICsgMV0udHlwZSA9PT0gInRleHQiKSB7CiAgICAgICAgICAgIHRva2VuID0gdG9rZW5zWysraV0KICAgICAgICAgICAgYm9keSArPQogICAgICAgICAgICAgICJcbiIgKwogICAgICAgICAgICAgICh0b2tlbi50b2tlbnMgPyB0aGlzLnBhcnNlSW5saW5lKHRva2VuLnRva2VucykgOiB0b2tlbi50ZXh0KQogICAgICAgICAgfQogICAgICAgICAgb3V0ICs9IHRvcCA/IHRoaXMucmVuZGVyZXIucGFyYWdyYXBoKGJvZHkpIDogYm9keQogICAgICAgICAgY29udGludWUKICAgICAgICB9CgogICAgICAgIGRlZmF1bHQ6IHsKICAgICAgICAgIGNvbnN0IGVyck1zZyA9ICdUb2tlbiB3aXRoICInICsgdG9rZW4udHlwZSArICciIHR5cGUgd2FzIG5vdCBmb3VuZC4nCiAgICAgICAgICBpZiAodGhpcy5vcHRpb25zLnNpbGVudCkgewogICAgICAgICAgICBjb25zb2xlLmVycm9yKGVyck1zZykKICAgICAgICAgICAgcmV0dXJuCiAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoZXJyTXNnKQogICAgICAgICAgfQogICAgICAgIH0KICAgICAgfQogICAgfQoKICAgIHJldHVybiBvdXQKICB9CgogIC8qKgogICAqIFBhcnNlIElubGluZSBUb2tlbnMKICAgKi8KICBwYXJzZUlubGluZSh0b2tlbnMsIHJlbmRlcmVyKSB7CiAgICByZW5kZXJlciA9IHJlbmRlcmVyIHx8IHRoaXMucmVuZGVyZXIKICAgIGxldCBvdXQgPSAiIiwKICAgICAgaSwKICAgICAgdG9rZW4sCiAgICAgIHJldAoKICAgIGNvbnN0IGwgPSB0b2tlbnMubGVuZ3RoCiAgICBmb3IgKGkgPSAwOyBpIDwgbDsgaSsrKSB7CiAgICAgIHRva2VuID0gdG9rZW5zW2ldCgogICAgICAvLyBSdW4gYW55IHJlbmRlcmVyIGV4dGVuc2lvbnMKICAgICAgaWYgKAogICAgICAgIHRoaXMub3B0aW9ucy5leHRlbnNpb25zICYmCiAgICAgICAgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMucmVuZGVyZXJzICYmCiAgICAgICAgdGhpcy5vcHRpb25zLmV4dGVuc2lvbnMucmVuZGVyZXJzW3Rva2VuLnR5cGVdCiAgICAgICkgewogICAgICAgIHJldCA9IHRoaXMub3B0aW9ucy5leHRlbnNpb25zLnJlbmRlcmVyc1t0b2tlbi50eXBlXS5jYWxsKAogICAgICAgICAgeyBwYXJzZXI6IHRoaXMgfSwKICAgICAgICAgIHRva2VuCiAgICAgICAgKQogICAgICAgIGlmICgKICAgICAgICAgIHJldCAhPT0gZmFsc2UgfHwKICAgICAgICAgICFbCiAgICAgICAgICAgICJlc2NhcGUiLAogICAgICAgICAgICAiaHRtbCIsCiAgICAgICAgICAgICJsaW5rIiwKICAgICAgICAgICAgImltYWdlIiwKICAgICAgICAgICAgInN0cm9uZyIsCiAgICAgICAgICAgICJlbSIsCiAgICAgICAgICAgICJjb2Rlc3BhbiIsCiAgICAgICAgICAgICJiciIsCiAgICAgICAgICAgICJkZWwiLAogICAgICAgICAgICAidGV4dCIsCiAgICAgICAgICBdLmluY2x1ZGVzKHRva2VuLnR5cGUpCiAgICAgICAgKSB7CiAgICAgICAgICBvdXQgKz0gcmV0IHx8ICIiCiAgICAgICAgICBjb250aW51ZQogICAgICAgIH0KICAgICAgfQoKICAgICAgc3dpdGNoICh0b2tlbi50eXBlKSB7CiAgICAgICAgY2FzZSAiZXNjYXBlIjogewogICAgICAgICAgb3V0ICs9IHJlbmRlcmVyLnRleHQodG9rZW4udGV4dCkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgImh0bWwiOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuaHRtbCh0b2tlbi50ZXh0KQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgY2FzZSAibGluayI6IHsKICAgICAgICAgIG91dCArPSByZW5kZXJlci5saW5rKAogICAgICAgICAgICB0b2tlbi5ocmVmLAogICAgICAgICAgICB0b2tlbi50aXRsZSwKICAgICAgICAgICAgdGhpcy5wYXJzZUlubGluZSh0b2tlbi50b2tlbnMsIHJlbmRlcmVyKQogICAgICAgICAgKQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgY2FzZSAiaW1hZ2UiOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuaW1hZ2UodG9rZW4uaHJlZiwgdG9rZW4udGl0bGUsIHRva2VuLnRleHQpCiAgICAgICAgICBicmVhawogICAgICAgIH0KICAgICAgICBjYXNlICJzdHJvbmciOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuc3Ryb25nKHRoaXMucGFyc2VJbmxpbmUodG9rZW4udG9rZW5zLCByZW5kZXJlcikpCiAgICAgICAgICBicmVhawogICAgICAgIH0KICAgICAgICBjYXNlICJlbSI6IHsKICAgICAgICAgIG91dCArPSByZW5kZXJlci5lbSh0aGlzLnBhcnNlSW5saW5lKHRva2VuLnRva2VucywgcmVuZGVyZXIpKQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgY2FzZSAiY29kZXNwYW4iOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIuY29kZXNwYW4odG9rZW4udGV4dCkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgImJyIjogewogICAgICAgICAgb3V0ICs9IHJlbmRlcmVyLmJyKCkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgImRlbCI6IHsKICAgICAgICAgIG91dCArPSByZW5kZXJlci5kZWwodGhpcy5wYXJzZUlubGluZSh0b2tlbi50b2tlbnMsIHJlbmRlcmVyKSkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICAgIGNhc2UgInRleHQiOiB7CiAgICAgICAgICBvdXQgKz0gcmVuZGVyZXIudGV4dCh0b2tlbi50ZXh0KQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgICAgZGVmYXVsdDogewogICAgICAgICAgY29uc3QgZXJyTXNnID0gJ1Rva2VuIHdpdGggIicgKyB0b2tlbi50eXBlICsgJyIgdHlwZSB3YXMgbm90IGZvdW5kLicKICAgICAgICAgIGlmICh0aGlzLm9wdGlvbnMuc2lsZW50KSB7CiAgICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZXJyTXNnKQogICAgICAgICAgICByZXR1cm4KICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihlcnJNc2cpCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgICByZXR1cm4gb3V0CiAgfQp9CgovKioKICogTWFya2VkCiAqLwpmdW5jdGlvbiBtYXJrZWQoc3JjLCBvcHQsIGNhbGxiYWNrKSB7CiAgLy8gdGhyb3cgZXJyb3IgaW4gY2FzZSBvZiBub24gc3RyaW5nIGlucHV0CiAgaWYgKHR5cGVvZiBzcmMgPT09ICJ1bmRlZmluZWQiIHx8IHNyYyA9PT0gbnVsbCkgewogICAgdGhyb3cgbmV3IEVycm9yKCJtYXJrZWQoKTogaW5wdXQgcGFyYW1ldGVyIGlzIHVuZGVmaW5lZCBvciBudWxsIikKICB9CiAgaWYgKHR5cGVvZiBzcmMgIT09ICJzdHJpbmciKSB7CiAgICB0aHJvdyBuZXcgRXJyb3IoCiAgICAgICJtYXJrZWQoKTogaW5wdXQgcGFyYW1ldGVyIGlzIG9mIHR5cGUgIiArCiAgICAgICAgT2JqZWN0LnByb3RvdHlwZS50b1N0cmluZy5jYWxsKHNyYykgKwogICAgICAgICIsIHN0cmluZyBleHBlY3RlZCIKICAgICkKICB9CgogIGlmICh0eXBlb2Ygb3B0ID09PSAiZnVuY3Rpb24iKSB7CiAgICBjYWxsYmFjayA9IG9wdAogICAgb3B0ID0gbnVsbAogIH0KCiAgb3B0ID0gbWVyZ2Uoe30sIG1hcmtlZC5kZWZhdWx0cywgb3B0IHx8IHt9KQogIGNoZWNrU2FuaXRpemVEZXByZWNhdGlvbihvcHQpCgogIGlmIChjYWxsYmFjaykgewogICAgY29uc3QgaGlnaGxpZ2h0ID0gb3B0LmhpZ2hsaWdodAogICAgbGV0IHRva2VucwoKICAgIHRyeSB7CiAgICAgIHRva2VucyA9IExleGVyLmxleChzcmMsIG9wdCkKICAgIH0gY2F0Y2ggKGUpIHsKICAgICAgcmV0dXJuIGNhbGxiYWNrKGUpCiAgICB9CgogICAgY29uc3QgZG9uZSA9IGZ1bmN0aW9uIChlcnIpIHsKICAgICAgbGV0IG91dAoKICAgICAgaWYgKCFlcnIpIHsKICAgICAgICB0cnkgewogICAgICAgICAgaWYgKG9wdC53YWxrVG9rZW5zKSB7CiAgICAgICAgICAgIG1hcmtlZC53YWxrVG9rZW5zKHRva2Vucywgb3B0LndhbGtUb2tlbnMpCiAgICAgICAgICB9CiAgICAgICAgICBvdXQgPSBQYXJzZXIucGFyc2UodG9rZW5zLCBvcHQpCiAgICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgICAgZXJyID0gZQogICAgICAgIH0KICAgICAgfQoKICAgICAgb3B0LmhpZ2hsaWdodCA9IGhpZ2hsaWdodAoKICAgICAgcmV0dXJuIGVyciA/IGNhbGxiYWNrKGVycikgOiBjYWxsYmFjayhudWxsLCBvdXQpCiAgICB9CgogICAgaWYgKCFoaWdobGlnaHQgfHwgaGlnaGxpZ2h0Lmxlbmd0aCA8IDMpIHsKICAgICAgcmV0dXJuIGRvbmUoKQogICAgfQoKICAgIGRlbGV0ZSBvcHQuaGlnaGxpZ2h0CgogICAgaWYgKCF0b2tlbnMubGVuZ3RoKSByZXR1cm4gZG9uZSgpCgogICAgbGV0IHBlbmRpbmcgPSAwCiAgICBtYXJrZWQud2Fsa1Rva2Vucyh0b2tlbnMsIGZ1bmN0aW9uICh0b2tlbikgewogICAgICBpZiAodG9rZW4udHlwZSA9PT0gImNvZGUiKSB7CiAgICAgICAgcGVuZGluZysrCiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7CiAgICAgICAgICBoaWdobGlnaHQodG9rZW4udGV4dCwgdG9rZW4ubGFuZywgZnVuY3Rpb24gKGVyciwgY29kZSkgewogICAgICAgICAgICBpZiAoZXJyKSB7CiAgICAgICAgICAgICAgcmV0dXJuIGRvbmUoZXJyKQogICAgICAgICAgICB9CiAgICAgICAgICAgIGlmIChjb2RlICE9IG51bGwgJiYgY29kZSAhPT0gdG9rZW4udGV4dCkgewogICAgICAgICAgICAgIHRva2VuLnRleHQgPSBjb2RlCiAgICAgICAgICAgICAgdG9rZW4uZXNjYXBlZCA9IHRydWUKICAgICAgICAgICAgfQoKICAgICAgICAgICAgcGVuZGluZy0tCiAgICAgICAgICAgIGlmIChwZW5kaW5nID09PSAwKSB7CiAgICAgICAgICAgICAgZG9uZSgpCiAgICAgICAgICAgIH0KICAgICAgICAgIH0pCiAgICAgICAgfSwgMCkKICAgICAgfQogICAgfSkKCiAgICBpZiAocGVuZGluZyA9PT0gMCkgewogICAgICBkb25lKCkKICAgIH0KCiAgICByZXR1cm4KICB9CgogIHRyeSB7CiAgICBjb25zdCB0b2tlbnMgPSBMZXhlci5sZXgoc3JjLCBvcHQpCiAgICBpZiAob3B0LndhbGtUb2tlbnMpIHsKICAgICAgbWFya2VkLndhbGtUb2tlbnModG9rZW5zLCBvcHQud2Fsa1Rva2VucykKICAgIH0KICAgIHJldHVybiBQYXJzZXIucGFyc2UodG9rZW5zLCBvcHQpCiAgfSBjYXRjaCAoZSkgewogICAgZS5tZXNzYWdlICs9ICJcblBsZWFzZSByZXBvcnQgdGhpcyB0byBodHRwczovL2dpdGh1Yi5jb20vbWFya2VkanMvbWFya2VkLiIKICAgIGlmIChvcHQuc2lsZW50KSB7CiAgICAgIHJldHVybiAoCiAgICAgICAgIjxwPkFuIGVycm9yIG9jY3VycmVkOjwvcD48cHJlPiIgKwogICAgICAgIGVzY2FwZShlLm1lc3NhZ2UgKyAiIiwgdHJ1ZSkgKwogICAgICAgICI8L3ByZT4iCiAgICAgICkKICAgIH0KICAgIHRocm93IGUKICB9Cn0KCi8qKgogKiBPcHRpb25zCiAqLwoKbWFya2VkLm9wdGlvbnMgPSBtYXJrZWQuc2V0T3B0aW9ucyA9IGZ1bmN0aW9uIChvcHQpIHsKICBtZXJnZShtYXJrZWQuZGVmYXVsdHMsIG9wdCkKICBjaGFuZ2VEZWZhdWx0cyhtYXJrZWQuZGVmYXVsdHMpCiAgcmV0dXJuIG1hcmtlZAp9CgptYXJrZWQuZ2V0RGVmYXVsdHMgPSBnZXREZWZhdWx0cwoKbWFya2VkLmRlZmF1bHRzID0gZGVmYXVsdHMKCi8qKgogKiBVc2UgRXh0ZW5zaW9uCiAqLwoKbWFya2VkLnVzZSA9IGZ1bmN0aW9uICguLi5hcmdzKSB7CiAgY29uc3Qgb3B0cyA9IG1lcmdlKHt9LCAuLi5hcmdzKQogIGNvbnN0IGV4dGVuc2lvbnMgPSBtYXJrZWQuZGVmYXVsdHMuZXh0ZW5zaW9ucyB8fCB7CiAgICByZW5kZXJlcnM6IHt9LAogICAgY2hpbGRUb2tlbnM6IHt9LAogIH0KICBsZXQgaGFzRXh0ZW5zaW9ucwoKICBhcmdzLmZvckVhY2gocGFjayA9PiB7CiAgICAvLyA9PS0tIFBhcnNlICJhZGRvbiIgZXh0ZW5zaW9ucyAtLT09IC8vCiAgICBpZiAocGFjay5leHRlbnNpb25zKSB7CiAgICAgIGhhc0V4dGVuc2lvbnMgPSB0cnVlCiAgICAgIHBhY2suZXh0ZW5zaW9ucy5mb3JFYWNoKGV4dCA9PiB7CiAgICAgICAgaWYgKCFleHQubmFtZSkgewogICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCJleHRlbnNpb24gbmFtZSByZXF1aXJlZCIpCiAgICAgICAgfQogICAgICAgIGlmIChleHQucmVuZGVyZXIpIHsKICAgICAgICAgIC8vIFJlbmRlcmVyIGV4dGVuc2lvbnMKICAgICAgICAgIGNvbnN0IHByZXZSZW5kZXJlciA9IGV4dGVuc2lvbnMucmVuZGVyZXJzCiAgICAgICAgICAgID8gZXh0ZW5zaW9ucy5yZW5kZXJlcnNbZXh0Lm5hbWVdCiAgICAgICAgICAgIDogbnVsbAogICAgICAgICAgaWYgKHByZXZSZW5kZXJlcikgewogICAgICAgICAgICAvLyBSZXBsYWNlIGV4dGVuc2lvbiB3aXRoIGZ1bmMgdG8gcnVuIG5ldyBleHRlbnNpb24gYnV0IGZhbGwgYmFjayBpZiBmYWxzZQogICAgICAgICAgICBleHRlbnNpb25zLnJlbmRlcmVyc1tleHQubmFtZV0gPSBmdW5jdGlvbiAoLi4uYXJncykgewogICAgICAgICAgICAgIGxldCByZXQgPSBleHQucmVuZGVyZXIuYXBwbHkodGhpcywgYXJncykKICAgICAgICAgICAgICBpZiAocmV0ID09PSBmYWxzZSkgewogICAgICAgICAgICAgICAgcmV0ID0gcHJldlJlbmRlcmVyLmFwcGx5KHRoaXMsIGFyZ3MpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHJldHVybiByZXQKICAgICAgICAgICAgfQogICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgZXh0ZW5zaW9ucy5yZW5kZXJlcnNbZXh0Lm5hbWVdID0gZXh0LnJlbmRlcmVyCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIGlmIChleHQudG9rZW5pemVyKSB7CiAgICAgICAgICAvLyBUb2tlbml6ZXIgRXh0ZW5zaW9ucwogICAgICAgICAgaWYgKCFleHQubGV2ZWwgfHwgKGV4dC5sZXZlbCAhPT0gImJsb2NrIiAmJiBleHQubGV2ZWwgIT09ICJpbmxpbmUiKSkgewogICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoImV4dGVuc2lvbiBsZXZlbCBtdXN0IGJlICdibG9jaycgb3IgJ2lubGluZSciKQogICAgICAgICAgfQogICAgICAgICAgaWYgKGV4dGVuc2lvbnNbZXh0LmxldmVsXSkgewogICAgICAgICAgICBleHRlbnNpb25zW2V4dC5sZXZlbF0udW5zaGlmdChleHQudG9rZW5pemVyKQogICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgZXh0ZW5zaW9uc1tleHQubGV2ZWxdID0gW2V4dC50b2tlbml6ZXJdCiAgICAgICAgICB9CiAgICAgICAgICBpZiAoZXh0LnN0YXJ0KSB7CiAgICAgICAgICAgIC8vIEZ1bmN0aW9uIHRvIGNoZWNrIGZvciBzdGFydCBvZiB0b2tlbgogICAgICAgICAgICBpZiAoZXh0LmxldmVsID09PSAiYmxvY2siKSB7CiAgICAgICAgICAgICAgaWYgKGV4dGVuc2lvbnMuc3RhcnRCbG9jaykgewogICAgICAgICAgICAgICAgZXh0ZW5zaW9ucy5zdGFydEJsb2NrLnB1c2goZXh0LnN0YXJ0KQogICAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICBleHRlbnNpb25zLnN0YXJ0QmxvY2sgPSBbZXh0LnN0YXJ0XQogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSBlbHNlIGlmIChleHQubGV2ZWwgPT09ICJpbmxpbmUiKSB7CiAgICAgICAgICAgICAgaWYgKGV4dGVuc2lvbnMuc3RhcnRJbmxpbmUpIHsKICAgICAgICAgICAgICAgIGV4dGVuc2lvbnMuc3RhcnRJbmxpbmUucHVzaChleHQuc3RhcnQpCiAgICAgICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgICAgIGV4dGVuc2lvbnMuc3RhcnRJbmxpbmUgPSBbZXh0LnN0YXJ0XQogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfQogICAgICAgICAgfQogICAgICAgIH0KICAgICAgICBpZiAoZXh0LmNoaWxkVG9rZW5zKSB7CiAgICAgICAgICAvLyBDaGlsZCB0b2tlbnMgdG8gYmUgdmlzaXRlZCBieSB3YWxrVG9rZW5zCiAgICAgICAgICBleHRlbnNpb25zLmNoaWxkVG9rZW5zW2V4dC5uYW1lXSA9IGV4dC5jaGlsZFRva2VucwogICAgICAgIH0KICAgICAgfSkKICAgIH0KCiAgICAvLyA9PS0tIFBhcnNlICJvdmVyd3JpdGUiIGV4dGVuc2lvbnMgLS09PSAvLwogICAgaWYgKHBhY2sucmVuZGVyZXIpIHsKICAgICAgY29uc3QgcmVuZGVyZXIgPSBtYXJrZWQuZGVmYXVsdHMucmVuZGVyZXIgfHwgbmV3IFJlbmRlcmVyKCkKICAgICAgZm9yIChjb25zdCBwcm9wIGluIHBhY2sucmVuZGVyZXIpIHsKICAgICAgICBjb25zdCBwcmV2UmVuZGVyZXIgPSByZW5kZXJlcltwcm9wXQogICAgICAgIC8vIFJlcGxhY2UgcmVuZGVyZXIgd2l0aCBmdW5jIHRvIHJ1biBleHRlbnNpb24sIGJ1dCBmYWxsIGJhY2sgaWYgZmFsc2UKICAgICAgICByZW5kZXJlcltwcm9wXSA9ICguLi5hcmdzKSA9PiB7CiAgICAgICAgICBsZXQgcmV0ID0gcGFjay5yZW5kZXJlcltwcm9wXS5hcHBseShyZW5kZXJlciwgYXJncykKICAgICAgICAgIGlmIChyZXQgPT09IGZhbHNlKSB7CiAgICAgICAgICAgIHJldCA9IHByZXZSZW5kZXJlci5hcHBseShyZW5kZXJlciwgYXJncykKICAgICAgICAgIH0KICAgICAgICAgIHJldHVybiByZXQKICAgICAgICB9CiAgICAgIH0KICAgICAgb3B0cy5yZW5kZXJlciA9IHJlbmRlcmVyCiAgICB9CiAgICBpZiAocGFjay50b2tlbml6ZXIpIHsKICAgICAgY29uc3QgdG9rZW5pemVyID0gbWFya2VkLmRlZmF1bHRzLnRva2VuaXplciB8fCBuZXcgVG9rZW5pemVyKCkKICAgICAgZm9yIChjb25zdCBwcm9wIGluIHBhY2sudG9rZW5pemVyKSB7CiAgICAgICAgY29uc3QgcHJldlRva2VuaXplciA9IHRva2VuaXplcltwcm9wXQogICAgICAgIC8vIFJlcGxhY2UgdG9rZW5pemVyIHdpdGggZnVuYyB0byBydW4gZXh0ZW5zaW9uLCBidXQgZmFsbCBiYWNrIGlmIGZhbHNlCiAgICAgICAgdG9rZW5pemVyW3Byb3BdID0gKC4uLmFyZ3MpID0+IHsKICAgICAgICAgIGxldCByZXQgPSBwYWNrLnRva2VuaXplcltwcm9wXS5hcHBseSh0b2tlbml6ZXIsIGFyZ3MpCiAgICAgICAgICBpZiAocmV0ID09PSBmYWxzZSkgewogICAgICAgICAgICByZXQgPSBwcmV2VG9rZW5pemVyLmFwcGx5KHRva2VuaXplciwgYXJncykKICAgICAgICAgIH0KICAgICAgICAgIHJldHVybiByZXQKICAgICAgICB9CiAgICAgIH0KICAgICAgb3B0cy50b2tlbml6ZXIgPSB0b2tlbml6ZXIKICAgIH0KCiAgICAvLyA9PS0tIFBhcnNlIFdhbGtUb2tlbnMgZXh0ZW5zaW9ucyAtLT09IC8vCiAgICBpZiAocGFjay53YWxrVG9rZW5zKSB7CiAgICAgIGNvbnN0IHdhbGtUb2tlbnMgPSBtYXJrZWQuZGVmYXVsdHMud2Fsa1Rva2VucwogICAgICBvcHRzLndhbGtUb2tlbnMgPSBmdW5jdGlvbiAodG9rZW4pIHsKICAgICAgICBwYWNrLndhbGtUb2tlbnMuY2FsbCh0aGlzLCB0b2tlbikKICAgICAgICBpZiAod2Fsa1Rva2VucykgewogICAgICAgICAgd2Fsa1Rva2Vucy5jYWxsKHRoaXMsIHRva2VuKQogICAgICAgIH0KICAgICAgfQogICAgfQoKICAgIGlmIChoYXNFeHRlbnNpb25zKSB7CiAgICAgIG9wdHMuZXh0ZW5zaW9ucyA9IGV4dGVuc2lvbnMKICAgIH0KCiAgICBtYXJrZWQuc2V0T3B0aW9ucyhvcHRzKQogIH0pCn0KCi8qKgogKiBSdW4gY2FsbGJhY2sgZm9yIGV2ZXJ5IHRva2VuCiAqLwoKbWFya2VkLndhbGtUb2tlbnMgPSBmdW5jdGlvbiAodG9rZW5zLCBjYWxsYmFjaykgewogIGZvciAoY29uc3QgdG9rZW4gb2YgdG9rZW5zKSB7CiAgICBjYWxsYmFjay5jYWxsKG1hcmtlZCwgdG9rZW4pCiAgICBzd2l0Y2ggKHRva2VuLnR5cGUpIHsKICAgICAgY2FzZSAidGFibGUiOiB7CiAgICAgICAgZm9yIChjb25zdCBjZWxsIG9mIHRva2VuLmhlYWRlcikgewogICAgICAgICAgbWFya2VkLndhbGtUb2tlbnMoY2VsbC50b2tlbnMsIGNhbGxiYWNrKQogICAgICAgIH0KICAgICAgICBmb3IgKGNvbnN0IHJvdyBvZiB0b2tlbi5yb3dzKSB7CiAgICAgICAgICBmb3IgKGNvbnN0IGNlbGwgb2Ygcm93KSB7CiAgICAgICAgICAgIG1hcmtlZC53YWxrVG9rZW5zKGNlbGwudG9rZW5zLCBjYWxsYmFjaykKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgYnJlYWsKICAgICAgfQogICAgICBjYXNlICJsaXN0IjogewogICAgICAgIG1hcmtlZC53YWxrVG9rZW5zKHRva2VuLml0ZW1zLCBjYWxsYmFjaykKICAgICAgICBicmVhawogICAgICB9CiAgICAgIGRlZmF1bHQ6IHsKICAgICAgICBpZiAoCiAgICAgICAgICBtYXJrZWQuZGVmYXVsdHMuZXh0ZW5zaW9ucyAmJgogICAgICAgICAgbWFya2VkLmRlZmF1bHRzLmV4dGVuc2lvbnMuY2hpbGRUb2tlbnMgJiYKICAgICAgICAgIG1hcmtlZC5kZWZhdWx0cy5leHRlbnNpb25zLmNoaWxkVG9rZW5zW3Rva2VuLnR5cGVdCiAgICAgICAgKSB7CiAgICAgICAgICAvLyBXYWxrIGFueSBleHRlbnNpb25zCiAgICAgICAgICBtYXJrZWQuZGVmYXVsdHMuZXh0ZW5zaW9ucy5jaGlsZFRva2Vuc1t0b2tlbi50eXBlXS5mb3JFYWNoKGZ1bmN0aW9uICgKICAgICAgICAgICAgY2hpbGRUb2tlbnMKICAgICAgICAgICkgewogICAgICAgICAgICBtYXJrZWQud2Fsa1Rva2Vucyh0b2tlbltjaGlsZFRva2Vuc10sIGNhbGxiYWNrKQogICAgICAgICAgfSkKICAgICAgICB9IGVsc2UgaWYgKHRva2VuLnRva2VucykgewogICAgICAgICAgbWFya2VkLndhbGtUb2tlbnModG9rZW4udG9rZW5zLCBjYWxsYmFjaykKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9Cn0KCi8qKgogKiBQYXJzZSBJbmxpbmUKICogQHBhcmFtIHtzdHJpbmd9IHNyYwogKi8KbWFya2VkLnBhcnNlSW5saW5lID0gZnVuY3Rpb24gKHNyYywgb3B0KSB7CiAgLy8gdGhyb3cgZXJyb3IgaW4gY2FzZSBvZiBub24gc3RyaW5nIGlucHV0CiAgaWYgKHR5cGVvZiBzcmMgPT09ICJ1bmRlZmluZWQiIHx8IHNyYyA9PT0gbnVsbCkgewogICAgdGhyb3cgbmV3IEVycm9yKAogICAgICAibWFya2VkLnBhcnNlSW5saW5lKCk6IGlucHV0IHBhcmFtZXRlciBpcyB1bmRlZmluZWQgb3IgbnVsbCIKICAgICkKICB9CiAgaWYgKHR5cGVvZiBzcmMgIT09ICJzdHJpbmciKSB7CiAgICB0aHJvdyBuZXcgRXJyb3IoCiAgICAgICJtYXJrZWQucGFyc2VJbmxpbmUoKTogaW5wdXQgcGFyYW1ldGVyIGlzIG9mIHR5cGUgIiArCiAgICAgICAgT2JqZWN0LnByb3RvdHlwZS50b1N0cmluZy5jYWxsKHNyYykgKwogICAgICAgICIsIHN0cmluZyBleHBlY3RlZCIKICAgICkKICB9CgogIG9wdCA9IG1lcmdlKHt9LCBtYXJrZWQuZGVmYXVsdHMsIG9wdCB8fCB7fSkKICBjaGVja1Nhbml0aXplRGVwcmVjYXRpb24ob3B0KQoKICB0cnkgewogICAgY29uc3QgdG9rZW5zID0gTGV4ZXIubGV4SW5saW5lKHNyYywgb3B0KQogICAgaWYgKG9wdC53YWxrVG9rZW5zKSB7CiAgICAgIG1hcmtlZC53YWxrVG9rZW5zKHRva2Vucywgb3B0LndhbGtUb2tlbnMpCiAgICB9CiAgICByZXR1cm4gUGFyc2VyLnBhcnNlSW5saW5lKHRva2Vucywgb3B0KQogIH0gY2F0Y2ggKGUpIHsKICAgIGUubWVzc2FnZSArPSAiXG5QbGVhc2UgcmVwb3J0IHRoaXMgdG8gaHR0cHM6Ly9naXRodWIuY29tL21hcmtlZGpzL21hcmtlZC4iCiAgICBpZiAob3B0LnNpbGVudCkgewogICAgICByZXR1cm4gKAogICAgICAgICI8cD5BbiBlcnJvciBvY2N1cnJlZDo8L3A+PHByZT4iICsKICAgICAgICBlc2NhcGUoZS5tZXNzYWdlICsgIiIsIHRydWUpICsKICAgICAgICAiPC9wcmU+IgogICAgICApCiAgICB9CiAgICB0aHJvdyBlCiAgfQp9CgovKioKICogRXhwb3NlCiAqLwptYXJrZWQuUGFyc2VyID0gUGFyc2VyCm1hcmtlZC5wYXJzZXIgPSBQYXJzZXIucGFyc2UKbWFya2VkLlJlbmRlcmVyID0gUmVuZGVyZXIKbWFya2VkLlRleHRSZW5kZXJlciA9IFRleHRSZW5kZXJlcgptYXJrZWQuTGV4ZXIgPSBMZXhlcgptYXJrZWQubGV4ZXIgPSBMZXhlci5sZXgKbWFya2VkLlRva2VuaXplciA9IFRva2VuaXplcgptYXJrZWQuU2x1Z2dlciA9IFNsdWdnZXIKbWFya2VkLnBhcnNlID0gbWFya2VkCgpjb25zdCBvcHRpb25zID0gbWFya2VkLm9wdGlvbnMKY29uc3Qgc2V0T3B0aW9ucyA9IG1hcmtlZC5zZXRPcHRpb25zCmNvbnN0IHVzZSA9IG1hcmtlZC51c2UKY29uc3Qgd2Fsa1Rva2VucyA9IG1hcmtlZC53YWxrVG9rZW5zCmNvbnN0IHBhcnNlSW5saW5lID0gbWFya2VkLnBhcnNlSW5saW5lCmNvbnN0IHBhcnNlID0gbWFya2VkCmNvbnN0IHBhcnNlciA9IFBhcnNlci5wYXJzZQpjb25zdCBsZXhlciA9IExleGVyLmxleAoKY29uc3QgZW1haWwgPSB0cmlnZ2VyLnJvdwpyZXR1cm4gbWFya2VkKGVtYWlsLk1lc3NhZ2Up`
+module.exports.CrazyLongSnippet =
+  '/**\n * marked - a markdown parser\n * Copyright (c) 2011-2022, Christopher Jeffrey. (MIT Licensed)\n * https://github.com/markedjs/marked\n */\n\n/**\n * DO NOT EDIT THIS FILE\n * The code in this file is generated from files in ./src/\n */\n\nfunction getDefaults() {\n  return {\n    baseUrl: null,\n    breaks: false,\n    extensions: null,\n    gfm: true,\n    headerIds: true,\n    headerPrefix: "",\n    highlight: null,\n    langPrefix: "language-",\n    mangle: true,\n    pedantic: false,\n    renderer: null,\n    sanitize: false,\n    sanitizer: null,\n    silent: false,\n    smartLists: false,\n    smartypants: false,\n    tokenizer: null,\n    walkTokens: null,\n    xhtml: false,\n  }\n}\n\nlet defaults = getDefaults()\n\nfunction changeDefaults(newDefaults) {\n  defaults = newDefaults\n}\n\n/**\n * Helpers\n */\nconst escapeTest = /[&<>"\']/\nconst escapeReplace = /[&<>"\']/g\nconst escapeTestNoEncode = /[<>"\']|&(?!#?\\w+;)/\nconst escapeReplaceNoEncode = /[<>"\']|&(?!#?\\w+;)/g\nconst escapeReplacements = {\n  "&": "&amp;",\n  "<": "&lt;",\n  ">": "&gt;",\n  \'"\': "&quot;",\n  "\'": "&#39;",\n}\nconst getEscapeReplacement = ch => escapeReplacements[ch]\nfunction escape(html, encode) {\n  if (encode) {\n    if (escapeTest.test(html)) {\n      return html.replace(escapeReplace, getEscapeReplacement)\n    }\n  } else {\n    if (escapeTestNoEncode.test(html)) {\n      return html.replace(escapeReplaceNoEncode, getEscapeReplacement)\n    }\n  }\n\n  return html\n}\n\nconst unescapeTest = /&(#(?:\\d+)|(?:#x[0-9A-Fa-f]+)|(?:\\w+));?/gi\n\n/**\n * @param {string} html\n */\nfunction unescape(html) {\n  // explicitly match decimal, hex, and named HTML entities\n  return html.replace(unescapeTest, (_, n) => {\n    n = n.toLowerCase()\n    if (n === "colon") return ":"\n    if (n.charAt(0) === "#") {\n      return n.charAt(1) === "x"\n        ? String.fromCharCode(parseInt(n.substring(2), 16))\n        : String.fromCharCode(+n.substring(1))\n    }\n    return ""\n  })\n}\n\nconst caret = /(^|[^\\[])\\^/g\n\n/**\n * @param {string | RegExp} regex\n * @param {string} opt\n */\nfunction edit(regex, opt) {\n  regex = typeof regex === "string" ? regex : regex.source\n  opt = opt || ""\n  const obj = {\n    replace: (name, val) => {\n      val = val.source || val\n      val = val.replace(caret, "$1")\n      regex = regex.replace(name, val)\n      return obj\n    },\n    getRegex: () => {\n      return new RegExp(regex, opt)\n    },\n  }\n  return obj\n}\n\nconst nonWordAndColonTest = /[^\\w:]/g\nconst originIndependentUrl = /^$|^[a-z][a-z0-9+.-]*:|^[?#]/i\n\n/**\n * @param {boolean} sanitize\n * @param {string} base\n * @param {string} href\n */\nfunction cleanUrl(sanitize, base, href) {\n  if (sanitize) {\n    let prot\n    try {\n      prot = decodeURIComponent(unescape(href))\n        .replace(nonWordAndColonTest, "")\n        .toLowerCase()\n    } catch (e) {\n      return null\n    }\n    if (\n      prot.indexOf("javascript:") === 0 ||\n      prot.indexOf("vbscript:") === 0 ||\n      prot.indexOf("data:") === 0\n    ) {\n      return null\n    }\n  }\n  if (base && !originIndependentUrl.test(href)) {\n    href = resolveUrl(base, href)\n  }\n  try {\n    href = encodeURI(href).replace(/%25/g, "%")\n  } catch (e) {\n    return null\n  }\n  return href\n}\n\nconst baseUrls = {}\nconst justDomain = /^[^:]+:\\/*[^/]*$/\nconst protocol = /^([^:]+:)[\\s\\S]*$/\nconst domain = /^([^:]+:\\/*[^/]*)[\\s\\S]*$/\n\n/**\n * @param {string} base\n * @param {string} href\n */\nfunction resolveUrl(base, href) {\n  if (!baseUrls[" " + base]) {\n    // we can ignore everything in base after the last slash of its path component,\n    // but we might need to add _that_\n    // https://tools.ietf.org/html/rfc3986#section-3\n    if (justDomain.test(base)) {\n      baseUrls[" " + base] = base + "/"\n    } else {\n      baseUrls[" " + base] = rtrim(base, "/", true)\n    }\n  }\n  base = baseUrls[" " + base]\n  const relativeBase = base.indexOf(":") === -1\n\n  if (href.substring(0, 2) === "//") {\n    if (relativeBase) {\n      return href\n    }\n    return base.replace(protocol, "$1") + href\n  } else if (href.charAt(0) === "/") {\n    if (relativeBase) {\n      return href\n    }\n    return base.replace(domain, "$1") + href\n  } else {\n    return base + href\n  }\n}\n\nconst noopTest = { exec: function noopTest() {} }\n\nfunction merge(obj) {\n  let i = 1,\n    target,\n    key\n\n  for (; i < arguments.length; i++) {\n    target = arguments[i]\n    for (key in target) {\n      if (Object.prototype.hasOwnProperty.call(target, key)) {\n        obj[key] = target[key]\n      }\n    }\n  }\n\n  return obj\n}\n\nfunction splitCells(tableRow, count) {\n  // ensure that every cell-delimiting pipe has a space\n  // before it to distinguish it from an escaped pipe\n  const row = tableRow.replace(/\\|/g, (match, offset, str) => {\n      let escaped = false,\n        curr = offset\n      while (--curr >= 0 && str[curr] === "\\\\") escaped = !escaped\n      if (escaped) {\n        // odd number of slashes means | is escaped\n        // so we leave it alone\n        return "|"\n      } else {\n        // add space before unescaped |\n        return " |"\n      }\n    }),\n    cells = row.split(/ \\|/)\n  let i = 0\n\n  // First/last cell in a row cannot be empty if it has no leading/trailing pipe\n  if (!cells[0].trim()) {\n    cells.shift()\n  }\n  if (cells.length > 0 && !cells[cells.length - 1].trim()) {\n    cells.pop()\n  }\n\n  if (cells.length > count) {\n    cells.splice(count)\n  } else {\n    while (cells.length < count) cells.push("")\n  }\n\n  for (; i < cells.length; i++) {\n    // leading or trailing whitespace is ignored per the gfm spec\n    cells[i] = cells[i].trim().replace(/\\\\\\|/g, "|")\n  }\n  return cells\n}\n\n/**\n * Remove trailing \'c\'s. Equivalent to str.replace(/c*$/, \'\').\n * /c*$/ is vulnerable to REDOS.\n *\n * @param {string} str\n * @param {string} c\n * @param {boolean} invert Remove suffix of non-c chars instead. Default falsey.\n */\nfunction rtrim(str, c, invert) {\n  const l = str.length\n  if (l === 0) {\n    return ""\n  }\n\n  // Length of suffix matching the invert condition.\n  let suffLen = 0\n\n  // Step left until we fail to match the invert condition.\n  while (suffLen < l) {\n    const currChar = str.charAt(l - suffLen - 1)\n    if (currChar === c && !invert) {\n      suffLen++\n    } else if (currChar !== c && invert) {\n      suffLen++\n    } else {\n      break\n    }\n  }\n\n  return str.slice(0, l - suffLen)\n}\n\nfunction findClosingBracket(str, b) {\n  if (str.indexOf(b[1]) === -1) {\n    return -1\n  }\n  const l = str.length\n  let level = 0,\n    i = 0\n  for (; i < l; i++) {\n    if (str[i] === "\\\\") {\n      i++\n    } else if (str[i] === b[0]) {\n      level++\n    } else if (str[i] === b[1]) {\n      level--\n      if (level < 0) {\n        return i\n      }\n    }\n  }\n  return -1\n}\n\nfunction checkSanitizeDeprecation(opt) {\n  if (opt && opt.sanitize && !opt.silent) {\n    console.warn(\n      "marked(): sanitize and sanitizer parameters are deprecated since version 0.7.0, should not be used and will be removed in the future. Read more here: https://marked.js.org/#/USING_ADVANCED.md#options"\n    )\n  }\n}\n\n// copied from https://stackoverflow.com/a/5450113/806777\n/**\n * @param {string} pattern\n * @param {number} count\n */\nfunction repeatString(pattern, count) {\n  if (count < 1) {\n    return ""\n  }\n  let result = ""\n  while (count > 1) {\n    if (count & 1) {\n      result += pattern\n    }\n    count >>= 1\n    pattern += pattern\n  }\n  return result + pattern\n}\n\nfunction outputLink(cap, link, raw, lexer) {\n  const href = link.href\n  const title = link.title ? escape(link.title) : null\n  const text = cap[1].replace(/\\\\([\\[\\]])/g, "$1")\n\n  if (cap[0].charAt(0) !== "!") {\n    lexer.state.inLink = true\n    const token = {\n      type: "link",\n      raw,\n      href,\n      title,\n      text,\n      tokens: lexer.inlineTokens(text, []),\n    }\n    lexer.state.inLink = false\n    return token\n  }\n  return {\n    type: "image",\n    raw,\n    href,\n    title,\n    text: escape(text),\n  }\n}\n\nfunction indentCodeCompensation(raw, text) {\n  const matchIndentToCode = raw.match(/^(\\s+)(?:```)/)\n\n  if (matchIndentToCode === null) {\n    return text\n  }\n\n  const indentToCode = matchIndentToCode[1]\n\n  return text\n    .split("\\n")\n    .map(node => {\n      const matchIndentInNode = node.match(/^\\s+/)\n      if (matchIndentInNode === null) {\n        return node\n      }\n\n      const [indentInNode] = matchIndentInNode\n\n      if (indentInNode.length >= indentToCode.length) {\n        return node.slice(indentToCode.length)\n      }\n\n      return node\n    })\n    .join("\\n")\n}\n\n/**\n * Tokenizer\n */\nclass Tokenizer {\n  constructor(options) {\n    this.options = options || defaults\n  }\n\n  space(src) {\n    const cap = this.rules.block.newline.exec(src)\n    if (cap && cap[0].length > 0) {\n      return {\n        type: "space",\n        raw: cap[0],\n      }\n    }\n  }\n\n  code(src) {\n    const cap = this.rules.block.code.exec(src)\n    if (cap) {\n      const text = cap[0].replace(/^ {1,4}/gm, "")\n      return {\n        type: "code",\n        raw: cap[0],\n        codeBlockStyle: "indented",\n        text: !this.options.pedantic ? rtrim(text, "\\n") : text,\n      }\n    }\n  }\n\n  fences(src) {\n    const cap = this.rules.block.fences.exec(src)\n    if (cap) {\n      const raw = cap[0]\n      const text = indentCodeCompensation(raw, cap[3] || "")\n\n      return {\n        type: "code",\n        raw,\n        lang: cap[2] ? cap[2].trim() : cap[2],\n        text,\n      }\n    }\n  }\n\n  heading(src) {\n    const cap = this.rules.block.heading.exec(src)\n    if (cap) {\n      let text = cap[2].trim()\n\n      // remove trailing #s\n      if (/#$/.test(text)) {\n        const trimmed = rtrim(text, "#")\n        if (this.options.pedantic) {\n          text = trimmed.trim()\n        } else if (!trimmed || / $/.test(trimmed)) {\n          // CommonMark requires space before trailing #s\n          text = trimmed.trim()\n        }\n      }\n\n      const token = {\n        type: "heading",\n        raw: cap[0],\n        depth: cap[1].length,\n        text,\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  hr(src) {\n    const cap = this.rules.block.hr.exec(src)\n    if (cap) {\n      return {\n        type: "hr",\n        raw: cap[0],\n      }\n    }\n  }\n\n  blockquote(src) {\n    const cap = this.rules.block.blockquote.exec(src)\n    if (cap) {\n      const text = cap[0].replace(/^ *>[ \\t]?/gm, "")\n\n      return {\n        type: "blockquote",\n        raw: cap[0],\n        tokens: this.lexer.blockTokens(text, []),\n        text,\n      }\n    }\n  }\n\n  list(src) {\n    let cap = this.rules.block.list.exec(src)\n    if (cap) {\n      let raw,\n        istask,\n        ischecked,\n        indent,\n        i,\n        blankLine,\n        endsWithBlankLine,\n        line,\n        nextLine,\n        rawLine,\n        itemContents,\n        endEarly\n\n      let bull = cap[1].trim()\n      const isordered = bull.length > 1\n\n      const list = {\n        type: "list",\n        raw: "",\n        ordered: isordered,\n        start: isordered ? +bull.slice(0, -1) : "",\n        loose: false,\n        items: [],\n      }\n\n      bull = isordered ? `\\\\d{1,9}\\\\${bull.slice(-1)}` : `\\\\${bull}`\n\n      if (this.options.pedantic) {\n        bull = isordered ? bull : "[*+-]"\n      }\n\n      // Get next list item\n      const itemRegex = new RegExp(\n        `^( {0,3}${bull})((?:[\\t ][^\\\\n]*)?(?:\\\\n|$))`\n      )\n\n      // Check if current bullet point can start a new List Item\n      while (src) {\n        endEarly = false\n        if (!(cap = itemRegex.exec(src))) {\n          break\n        }\n\n        if (this.rules.block.hr.test(src)) {\n          // End list if bullet was actually HR (possibly move into itemRegex?)\n          break\n        }\n\n        raw = cap[0]\n        src = src.substring(raw.length)\n\n        line = cap[2].split("\\n", 1)[0]\n        nextLine = src.split("\\n", 1)[0]\n\n        if (this.options.pedantic) {\n          indent = 2\n          itemContents = line.trimLeft()\n        } else {\n          indent = cap[2].search(/[^ ]/) // Find first non-space char\n          indent = indent > 4 ? 1 : indent // Treat indented code blocks (> 4 spaces) as having only 1 indent\n          itemContents = line.slice(indent)\n          indent += cap[1].length\n        }\n\n        blankLine = false\n\n        if (!line && /^ *$/.test(nextLine)) {\n          // Items begin with at most one blank line\n          raw += nextLine + "\\n"\n          src = src.substring(nextLine.length + 1)\n          endEarly = true\n        }\n\n        if (!endEarly) {\n          const nextBulletRegex = new RegExp(\n            `^ {0,${Math.min(\n              3,\n              indent - 1\n            )}}(?:[*+-]|\\\\d{1,9}[.)])((?: [^\\\\n]*)?(?:\\\\n|$))`\n          )\n          const hrRegex = new RegExp(\n            `^ {0,${Math.min(\n              3,\n              indent - 1\n            )}}((?:- *){3,}|(?:_ *){3,}|(?:\\\\* *){3,})(?:\\\\n+|$)`\n          )\n\n          // Check if following lines should be included in List Item\n          while (src) {\n            rawLine = src.split("\\n", 1)[0]\n            line = rawLine\n\n            // Re-align to follow commonmark nesting rules\n            if (this.options.pedantic) {\n              line = line.replace(/^ {1,4}(?=( {4})*[^ ])/g, "  ")\n            }\n\n            // End list item if found start of new bullet\n            if (nextBulletRegex.test(line)) {\n              break\n            }\n\n            // Horizontal rule found\n            if (hrRegex.test(src)) {\n              break\n            }\n\n            if (line.search(/[^ ]/) >= indent || !line.trim()) {\n              // Dedent if possible\n              itemContents += "\\n" + line.slice(indent)\n            } else if (!blankLine) {\n              // Until blank line, item doesn\'t need indentation\n              itemContents += "\\n" + line\n            } else {\n              // Otherwise, improper indentation ends this item\n              break\n            }\n\n            if (!blankLine && !line.trim()) {\n              // Check if current line is blank\n              blankLine = true\n            }\n\n            raw += rawLine + "\\n"\n            src = src.substring(rawLine.length + 1)\n          }\n        }\n\n        if (!list.loose) {\n          // If the previous item ended with a blank line, the list is loose\n          if (endsWithBlankLine) {\n            list.loose = true\n          } else if (/\\n *\\n *$/.test(raw)) {\n            endsWithBlankLine = true\n          }\n        }\n\n        // Check for task list items\n        if (this.options.gfm) {\n          istask = /^\\[[ xX]\\] /.exec(itemContents)\n          if (istask) {\n            ischecked = istask[0] !== "[ ] "\n            itemContents = itemContents.replace(/^\\[[ xX]\\] +/, "")\n          }\n        }\n\n        list.items.push({\n          type: "list_item",\n          raw,\n          task: !!istask,\n          checked: ischecked,\n          loose: false,\n          text: itemContents,\n        })\n\n        list.raw += raw\n      }\n\n      // Do not consume newlines at end of final item. Alternatively, make itemRegex *start* with any newlines to simplify/speed up endsWithBlankLine logic\n      list.items[list.items.length - 1].raw = raw.trimRight()\n      list.items[list.items.length - 1].text = itemContents.trimRight()\n      list.raw = list.raw.trimRight()\n\n      const l = list.items.length\n\n      // Item child tokens handled here at end because we needed to have the final item to trim it first\n      for (i = 0; i < l; i++) {\n        this.lexer.state.top = false\n        list.items[i].tokens = this.lexer.blockTokens(list.items[i].text, [])\n        const spacers = list.items[i].tokens.filter(t => t.type === "space")\n        const hasMultipleLineBreaks = spacers.every(t => {\n          const chars = t.raw.split("")\n          let lineBreaks = 0\n          for (const char of chars) {\n            if (char === "\\n") {\n              lineBreaks += 1\n            }\n            if (lineBreaks > 1) {\n              return true\n            }\n          }\n\n          return false\n        })\n\n        if (!list.loose && spacers.length && hasMultipleLineBreaks) {\n          // Having a single line break doesn\'t mean a list is loose. A single line break is terminating the last list item\n          list.loose = true\n          list.items[i].loose = true\n        }\n      }\n\n      return list\n    }\n  }\n\n  html(src) {\n    const cap = this.rules.block.html.exec(src)\n    if (cap) {\n      const token = {\n        type: "html",\n        raw: cap[0],\n        pre:\n          !this.options.sanitizer &&\n          (cap[1] === "pre" || cap[1] === "script" || cap[1] === "style"),\n        text: cap[0],\n      }\n      if (this.options.sanitize) {\n        token.type = "paragraph"\n        token.text = this.options.sanitizer\n          ? this.options.sanitizer(cap[0])\n          : escape(cap[0])\n        token.tokens = []\n        this.lexer.inline(token.text, token.tokens)\n      }\n      return token\n    }\n  }\n\n  def(src) {\n    const cap = this.rules.block.def.exec(src)\n    if (cap) {\n      if (cap[3]) cap[3] = cap[3].substring(1, cap[3].length - 1)\n      const tag = cap[1].toLowerCase().replace(/\\s+/g, " ")\n      return {\n        type: "def",\n        tag,\n        raw: cap[0],\n        href: cap[2],\n        title: cap[3],\n      }\n    }\n  }\n\n  table(src) {\n    const cap = this.rules.block.table.exec(src)\n    if (cap) {\n      const item = {\n        type: "table",\n        header: splitCells(cap[1]).map(c => {\n          return { text: c }\n        }),\n        align: cap[2].replace(/^ *|\\| *$/g, "").split(/ *\\| */),\n        rows:\n          cap[3] && cap[3].trim()\n            ? cap[3].replace(/\\n[ \\t]*$/, "").split("\\n")\n            : [],\n      }\n\n      if (item.header.length === item.align.length) {\n        item.raw = cap[0]\n\n        let l = item.align.length\n        let i, j, k, row\n        for (i = 0; i < l; i++) {\n          if (/^ *-+: *$/.test(item.align[i])) {\n            item.align[i] = "right"\n          } else if (/^ *:-+: *$/.test(item.align[i])) {\n            item.align[i] = "center"\n          } else if (/^ *:-+ *$/.test(item.align[i])) {\n            item.align[i] = "left"\n          } else {\n            item.align[i] = null\n          }\n        }\n\n        l = item.rows.length\n        for (i = 0; i < l; i++) {\n          item.rows[i] = splitCells(item.rows[i], item.header.length).map(c => {\n            return { text: c }\n          })\n        }\n\n        // parse child tokens inside headers and cells\n\n        // header child tokens\n        l = item.header.length\n        for (j = 0; j < l; j++) {\n          item.header[j].tokens = []\n          this.lexer.inline(item.header[j].text, item.header[j].tokens)\n        }\n\n        // cell child tokens\n        l = item.rows.length\n        for (j = 0; j < l; j++) {\n          row = item.rows[j]\n          for (k = 0; k < row.length; k++) {\n            row[k].tokens = []\n            this.lexer.inline(row[k].text, row[k].tokens)\n          }\n        }\n\n        return item\n      }\n    }\n  }\n\n  lheading(src) {\n    const cap = this.rules.block.lheading.exec(src)\n    if (cap) {\n      const token = {\n        type: "heading",\n        raw: cap[0],\n        depth: cap[2].charAt(0) === "=" ? 1 : 2,\n        text: cap[1],\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  paragraph(src) {\n    const cap = this.rules.block.paragraph.exec(src)\n    if (cap) {\n      const token = {\n        type: "paragraph",\n        raw: cap[0],\n        text:\n          cap[1].charAt(cap[1].length - 1) === "\\n"\n            ? cap[1].slice(0, -1)\n            : cap[1],\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  text(src) {\n    const cap = this.rules.block.text.exec(src)\n    if (cap) {\n      const token = {\n        type: "text",\n        raw: cap[0],\n        text: cap[0],\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  escape(src) {\n    const cap = this.rules.inline.escape.exec(src)\n    if (cap) {\n      return {\n        type: "escape",\n        raw: cap[0],\n        text: escape(cap[1]),\n      }\n    }\n  }\n\n  tag(src) {\n    const cap = this.rules.inline.tag.exec(src)\n    if (cap) {\n      if (!this.lexer.state.inLink && /^<a /i.test(cap[0])) {\n        this.lexer.state.inLink = true\n      } else if (this.lexer.state.inLink && /^<\\/a>/i.test(cap[0])) {\n        this.lexer.state.inLink = false\n      }\n      if (\n        !this.lexer.state.inRawBlock &&\n        /^<(pre|code|kbd|script)(\\s|>)/i.test(cap[0])\n      ) {\n        this.lexer.state.inRawBlock = true\n      } else if (\n        this.lexer.state.inRawBlock &&\n        /^<\\/(pre|code|kbd|script)(\\s|>)/i.test(cap[0])\n      ) {\n        this.lexer.state.inRawBlock = false\n      }\n\n      return {\n        type: this.options.sanitize ? "text" : "html",\n        raw: cap[0],\n        inLink: this.lexer.state.inLink,\n        inRawBlock: this.lexer.state.inRawBlock,\n        text: this.options.sanitize\n          ? this.options.sanitizer\n            ? this.options.sanitizer(cap[0])\n            : escape(cap[0])\n          : cap[0],\n      }\n    }\n  }\n\n  link(src) {\n    const cap = this.rules.inline.link.exec(src)\n    if (cap) {\n      const trimmedUrl = cap[2].trim()\n      if (!this.options.pedantic && /^</.test(trimmedUrl)) {\n        // commonmark requires matching angle brackets\n        if (!/>$/.test(trimmedUrl)) {\n          return\n        }\n\n        // ending angle bracket cannot be escaped\n        const rtrimSlash = rtrim(trimmedUrl.slice(0, -1), "\\\\")\n        if ((trimmedUrl.length - rtrimSlash.length) % 2 === 0) {\n          return\n        }\n      } else {\n        // find closing parenthesis\n        const lastParenIndex = findClosingBracket(cap[2], "()")\n        if (lastParenIndex > -1) {\n          const start = cap[0].indexOf("!") === 0 ? 5 : 4\n          const linkLen = start + cap[1].length + lastParenIndex\n          cap[2] = cap[2].substring(0, lastParenIndex)\n          cap[0] = cap[0].substring(0, linkLen).trim()\n          cap[3] = ""\n        }\n      }\n      let href = cap[2]\n      let title = ""\n      if (this.options.pedantic) {\n        // split pedantic href and title\n        const link = /^([^\'"]*[^\\s])\\s+([\'"])(.*)\\2/.exec(href)\n\n        if (link) {\n          href = link[1]\n          title = link[3]\n        }\n      } else {\n        title = cap[3] ? cap[3].slice(1, -1) : ""\n      }\n\n      href = href.trim()\n      if (/^</.test(href)) {\n        if (this.options.pedantic && !/>$/.test(trimmedUrl)) {\n          // pedantic allows starting angle bracket without ending angle bracket\n          href = href.slice(1)\n        } else {\n          href = href.slice(1, -1)\n        }\n      }\n      return outputLink(\n        cap,\n        {\n          href: href ? href.replace(this.rules.inline._escapes, "$1") : href,\n          title: title\n            ? title.replace(this.rules.inline._escapes, "$1")\n            : title,\n        },\n        cap[0],\n        this.lexer\n      )\n    }\n  }\n\n  reflink(src, links) {\n    let cap\n    if (\n      (cap = this.rules.inline.reflink.exec(src)) ||\n      (cap = this.rules.inline.nolink.exec(src))\n    ) {\n      let link = (cap[2] || cap[1]).replace(/\\s+/g, " ")\n      link = links[link.toLowerCase()]\n      if (!link || !link.href) {\n        const text = cap[0].charAt(0)\n        return {\n          type: "text",\n          raw: text,\n          text,\n        }\n      }\n      return outputLink(cap, link, cap[0], this.lexer)\n    }\n  }\n\n  emStrong(src, maskedSrc, prevChar = "") {\n    let match = this.rules.inline.emStrong.lDelim.exec(src)\n    if (!match) return\n\n    // _ can\'t be between two alphanumerics. \\p{L}\\p{N} includes non-english alphabet/numbers as well\n    if (match[3] && prevChar.match(/[\\p{L}\\p{N}]/u)) return\n\n    const nextChar = match[1] || match[2] || ""\n\n    if (\n      !nextChar ||\n      (nextChar &&\n        (prevChar === "" || this.rules.inline.punctuation.exec(prevChar)))\n    ) {\n      const lLength = match[0].length - 1\n      let rDelim,\n        rLength,\n        delimTotal = lLength,\n        midDelimTotal = 0\n\n      const endReg =\n        match[0][0] === "*"\n          ? this.rules.inline.emStrong.rDelimAst\n          : this.rules.inline.emStrong.rDelimUnd\n      endReg.lastIndex = 0\n\n      // Clip maskedSrc to same section of string as src (move to lexer?)\n      maskedSrc = maskedSrc.slice(-1 * src.length + lLength)\n\n      while ((match = endReg.exec(maskedSrc)) != null) {\n        rDelim =\n          match[1] || match[2] || match[3] || match[4] || match[5] || match[6]\n\n        if (!rDelim) continue // skip single * in __abc*abc__\n\n        rLength = rDelim.length\n\n        if (match[3] || match[4]) {\n          // found another Left Delim\n          delimTotal += rLength\n          continue\n        } else if (match[5] || match[6]) {\n          // either Left or Right Delim\n          if (lLength % 3 && !((lLength + rLength) % 3)) {\n            midDelimTotal += rLength\n            continue // CommonMark Emphasis Rules 9-10\n          }\n        }\n\n        delimTotal -= rLength\n\n        if (delimTotal > 0) continue // Haven\'t found enough closing delimiters\n\n        // Remove extra characters. *a*** -> *a*\n        rLength = Math.min(rLength, rLength + delimTotal + midDelimTotal)\n\n        // Create `em` if smallest delimiter has odd char count. *a***\n        if (Math.min(lLength, rLength) % 2) {\n          const text = src.slice(1, lLength + match.index + rLength)\n          return {\n            type: "em",\n            raw: src.slice(0, lLength + match.index + rLength + 1),\n            text,\n            tokens: this.lexer.inlineTokens(text, []),\n          }\n        }\n\n        // Create \'strong\' if smallest delimiter has even char count. **a***\n        const text = src.slice(2, lLength + match.index + rLength - 1)\n        return {\n          type: "strong",\n          raw: src.slice(0, lLength + match.index + rLength + 1),\n          text,\n          tokens: this.lexer.inlineTokens(text, []),\n        }\n      }\n    }\n  }\n\n  codespan(src) {\n    const cap = this.rules.inline.code.exec(src)\n    if (cap) {\n      let text = cap[2].replace(/\\n/g, " ")\n      const hasNonSpaceChars = /[^ ]/.test(text)\n      const hasSpaceCharsOnBothEnds = /^ /.test(text) && / $/.test(text)\n      if (hasNonSpaceChars && hasSpaceCharsOnBothEnds) {\n        text = text.substring(1, text.length - 1)\n      }\n      text = escape(text, true)\n      return {\n        type: "codespan",\n        raw: cap[0],\n        text,\n      }\n    }\n  }\n\n  br(src) {\n    const cap = this.rules.inline.br.exec(src)\n    if (cap) {\n      return {\n        type: "br",\n        raw: cap[0],\n      }\n    }\n  }\n\n  del(src) {\n    const cap = this.rules.inline.del.exec(src)\n    if (cap) {\n      return {\n        type: "del",\n        raw: cap[0],\n        text: cap[2],\n        tokens: this.lexer.inlineTokens(cap[2], []),\n      }\n    }\n  }\n\n  autolink(src, mangle) {\n    const cap = this.rules.inline.autolink.exec(src)\n    if (cap) {\n      let text, href\n      if (cap[2] === "@") {\n        text = escape(this.options.mangle ? mangle(cap[1]) : cap[1])\n        href = "mailto:" + text\n      } else {\n        text = escape(cap[1])\n        href = text\n      }\n\n      return {\n        type: "link",\n        raw: cap[0],\n        text,\n        href,\n        tokens: [\n          {\n            type: "text",\n            raw: text,\n            text,\n          },\n        ],\n      }\n    }\n  }\n\n  url(src, mangle) {\n    let cap\n    if ((cap = this.rules.inline.url.exec(src))) {\n      let text, href\n      if (cap[2] === "@") {\n        text = escape(this.options.mangle ? mangle(cap[0]) : cap[0])\n        href = "mailto:" + text\n      } else {\n        // do extended autolink path validation\n        let prevCapZero\n        do {\n          prevCapZero = cap[0]\n          cap[0] = this.rules.inline._backpedal.exec(cap[0])[0]\n        } while (prevCapZero !== cap[0])\n        text = escape(cap[0])\n        if (cap[1] === "www.") {\n          href = "http://" + text\n        } else {\n          href = text\n        }\n      }\n      return {\n        type: "link",\n        raw: cap[0],\n        text,\n        href,\n        tokens: [\n          {\n            type: "text",\n            raw: text,\n            text,\n          },\n        ],\n      }\n    }\n  }\n\n  inlineText(src, smartypants) {\n    const cap = this.rules.inline.text.exec(src)\n    if (cap) {\n      let text\n      if (this.lexer.state.inRawBlock) {\n        text = this.options.sanitize\n          ? this.options.sanitizer\n            ? this.options.sanitizer(cap[0])\n            : escape(cap[0])\n          : cap[0]\n      } else {\n        text = escape(this.options.smartypants ? smartypants(cap[0]) : cap[0])\n      }\n      return {\n        type: "text",\n        raw: cap[0],\n        text,\n      }\n    }\n  }\n}\n\n/**\n * Block-Level Grammar\n */\nconst block = {\n  newline: /^(?: *(?:\\n|$))+/,\n  code: /^( {4}[^\\n]+(?:\\n(?: *(?:\\n|$))*)?)+/,\n  fences:\n    /^ {0,3}(`{3,}(?=[^`\\n]*\\n)|~{3,})([^\\n]*)\\n(?:|([\\s\\S]*?)\\n)(?: {0,3}\\1[~`]* *(?=\\n|$)|$)/,\n  hr: /^ {0,3}((?:-[\\t ]*){3,}|(?:_[ \\t]*){3,}|(?:\\*[ \\t]*){3,})(?:\\n+|$)/,\n  heading: /^ {0,3}(#{1,6})(?=\\s|$)(.*)(?:\\n+|$)/,\n  blockquote: /^( {0,3}> ?(paragraph|[^\\n]*)(?:\\n|$))+/,\n  list: /^( {0,3}bull)([ \\t][^\\n]+?)?(?:\\n|$)/,\n  html:\n    "^ {0,3}(?:" + // optional indentation\n    "<(script|pre|style|textarea)[\\\\s>][\\\\s\\\\S]*?(?:</\\\\1>[^\\\\n]*\\\\n+|$)" + // (1)\n    "|comment[^\\\\n]*(\\\\n+|$)" + // (2)\n    "|<\\\\?[\\\\s\\\\S]*?(?:\\\\?>\\\\n*|$)" + // (3)\n    "|<![A-Z][\\\\s\\\\S]*?(?:>\\\\n*|$)" + // (4)\n    "|<!\\\\[CDATA\\\\[[\\\\s\\\\S]*?(?:\\\\]\\\\]>\\\\n*|$)" + // (5)\n    "|</?(tag)(?: +|\\\\n|/?>)[\\\\s\\\\S]*?(?:(?:\\\\n *)+\\\\n|$)" + // (6)\n    "|<(?!script|pre|style|textarea)([a-z][\\\\w-]*)(?:attribute)*? */?>(?=[ \\\\t]*(?:\\\\n|$))[\\\\s\\\\S]*?(?:(?:\\\\n *)+\\\\n|$)" + // (7) open tag\n    "|</(?!script|pre|style|textarea)[a-z][\\\\w-]*\\\\s*>(?=[ \\\\t]*(?:\\\\n|$))[\\\\s\\\\S]*?(?:(?:\\\\n *)+\\\\n|$)" + // (7) closing tag\n    ")",\n  def: /^ {0,3}\\[(label)\\]: *(?:\\n *)?<?([^\\s>]+)>?(?:(?: +(?:\\n *)?| *\\n *)(title))? *(?:\\n+|$)/,\n  table: noopTest,\n  lheading: /^([^\\n]+)\\n {0,3}(=+|-+) *(?:\\n+|$)/,\n  // regex template, placeholders will be replaced according to different paragraph\n  // interruption rules of commonmark and the original markdown spec:\n  _paragraph:\n    /^([^\\n]+(?:\\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\\n)[^\\n]+)*)/,\n  text: /^[^\\n]+/,\n}\n\nblock._label = /(?!\\s*\\])(?:\\\\.|[^\\[\\]\\\\])+/\nblock._title = /(?:"(?:\\\\"?|[^"\\\\])*"|\'[^\'\\n]*(?:\\n[^\'\\n]+)*\\n?\'|\\([^()]*\\))/\nblock.def = edit(block.def)\n  .replace("label", block._label)\n  .replace("title", block._title)\n  .getRegex()\n\nblock.bullet = /(?:[*+-]|\\d{1,9}[.)])/\nblock.listItemStart = edit(/^( *)(bull) */)\n  .replace("bull", block.bullet)\n  .getRegex()\n\nblock.list = edit(block.list)\n  .replace(/bull/g, block.bullet)\n  .replace(\n    "hr",\n    "\\\\n+(?=\\\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\\\* *){3,})(?:\\\\n+|$))"\n  )\n  .replace("def", "\\\\n+(?=" + block.def.source + ")")\n  .getRegex()\n\nblock._tag =\n  "address|article|aside|base|basefont|blockquote|body|caption" +\n  "|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption" +\n  "|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe" +\n  "|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option" +\n  "|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr" +\n  "|track|ul"\nblock._comment = /\x3C!--(?!-?>)[\\s\\S]*?(?:-->|$)/\nblock.html = edit(block.html, "i")\n  .replace("comment", block._comment)\n  .replace("tag", block._tag)\n  .replace(\n    "attribute",\n    / +[a-zA-Z:_][\\w.:-]*(?: *= *"[^"\\n]*"| *= *\'[^\'\\n]*\'| *= *[^\\s"\'=<>`]+)?/\n  )\n  .getRegex()\n\nblock.paragraph = edit(block._paragraph)\n  .replace("hr", block.hr)\n  .replace("heading", " {0,3}#{1,6} ")\n  .replace("|lheading", "") // setex headings don\'t interrupt commonmark paragraphs\n  .replace("|table", "")\n  .replace("blockquote", " {0,3}>")\n  .replace("fences", " {0,3}(?:`{3,}(?=[^`\\\\n]*\\\\n)|~{3,})[^\\\\n]*\\\\n")\n  .replace("list", " {0,3}(?:[*+-]|1[.)]) ") // only lists starting from 1 can interrupt\n  .replace(\n    "html",\n    "</?(?:tag)(?: +|\\\\n|/?>)|<(?:script|pre|style|textarea|!--)"\n  )\n  .replace("tag", block._tag) // pars can be interrupted by type (6) html blocks\n  .getRegex()\n\nblock.blockquote = edit(block.blockquote)\n  .replace("paragraph", block.paragraph)\n  .getRegex()\n\n/**\n * Normal Block Grammar\n */\n\nblock.normal = merge({}, block)\n\n/**\n * GFM Block Grammar\n */\n\nblock.gfm = merge({}, block.normal, {\n  table:\n    "^ *([^\\\\n ].*\\\\|.*)\\\\n" + // Header\n    " {0,3}(?:\\\\| *)?(:?-+:? *(?:\\\\| *:?-+:? *)*)(?:\\\\| *)?" + // Align\n    "(?:\\\\n((?:(?! *\\\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\\\n|$))*)\\\\n*|$)", // Cells\n})\n\nblock.gfm.table = edit(block.gfm.table)\n  .replace("hr", block.hr)\n  .replace("heading", " {0,3}#{1,6} ")\n  .replace("blockquote", " {0,3}>")\n  .replace("code", " {4}[^\\\\n]")\n  .replace("fences", " {0,3}(?:`{3,}(?=[^`\\\\n]*\\\\n)|~{3,})[^\\\\n]*\\\\n")\n  .replace("list", " {0,3}(?:[*+-]|1[.)]) ") // only lists starting from 1 can interrupt\n  .replace(\n    "html",\n    "</?(?:tag)(?: +|\\\\n|/?>)|<(?:script|pre|style|textarea|!--)"\n  )\n  .replace("tag", block._tag) // tables can be interrupted by type (6) html blocks\n  .getRegex()\n\nblock.gfm.paragraph = edit(block._paragraph)\n  .replace("hr", block.hr)\n  .replace("heading", " {0,3}#{1,6} ")\n  .replace("|lheading", "") // setex headings don\'t interrupt commonmark paragraphs\n  .replace("table", block.gfm.table) // interrupt paragraphs with table\n  .replace("blockquote", " {0,3}>")\n  .replace("fences", " {0,3}(?:`{3,}(?=[^`\\\\n]*\\\\n)|~{3,})[^\\\\n]*\\\\n")\n  .replace("list", " {0,3}(?:[*+-]|1[.)]) ") // only lists starting from 1 can interrupt\n  .replace(\n    "html",\n    "</?(?:tag)(?: +|\\\\n|/?>)|<(?:script|pre|style|textarea|!--)"\n  )\n  .replace("tag", block._tag) // pars can be interrupted by type (6) html blocks\n  .getRegex()\n/**\n * Pedantic grammar (original John Gruber\'s loose markdown specification)\n */\n\nblock.pedantic = merge({}, block.normal, {\n  html: edit(\n    "^ *(?:comment *(?:\\\\n|\\\\s*$)" +\n      "|<(tag)[\\\\s\\\\S]+?</\\\\1> *(?:\\\\n{2,}|\\\\s*$)" + // closed tag\n      "|<tag(?:\\"[^\\"]*\\"|\'[^\']*\'|\\\\s[^\'\\"/>\\\\s]*)*?/?> *(?:\\\\n{2,}|\\\\s*$))"\n  )\n    .replace("comment", block._comment)\n    .replace(\n      /tag/g,\n      "(?!(?:" +\n        "a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub" +\n        "|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)" +\n        "\\\\b)\\\\w+(?!:|[^\\\\w\\\\s@]*@)\\\\b"\n    )\n    .getRegex(),\n  def: /^ *\\[([^\\]]+)\\]: *<?([^\\s>]+)>?(?: +(["(][^\\n]+[")]))? *(?:\\n+|$)/,\n  heading: /^(#{1,6})(.*)(?:\\n+|$)/,\n  fences: noopTest, // fences not supported\n  paragraph: edit(block.normal._paragraph)\n    .replace("hr", block.hr)\n    .replace("heading", " *#{1,6} *[^\\n]")\n    .replace("lheading", block.lheading)\n    .replace("blockquote", " {0,3}>")\n    .replace("|fences", "")\n    .replace("|list", "")\n    .replace("|html", "")\n    .getRegex(),\n})\n\n/**\n * Inline-Level Grammar\n */\nconst inline = {\n  escape: /^\\\\([!"#$%&\'()*+,\\-./:;<=>?@\\[\\]\\\\^_`{|}~])/,\n  autolink: /^<(scheme:[^\\s\\x00-\\x1f<>]*|email)>/,\n  url: noopTest,\n  tag:\n    "^comment" +\n    "|^</[a-zA-Z][\\\\w:-]*\\\\s*>" + // self-closing tag\n    "|^<[a-zA-Z][\\\\w-]*(?:attribute)*?\\\\s*/?>" + // open tag\n    "|^<\\\\?[\\\\s\\\\S]*?\\\\?>" + // processing instruction, e.g. <?php ?>\n    "|^<![a-zA-Z]+\\\\s[\\\\s\\\\S]*?>" + // declaration, e.g. <!DOCTYPE html>\n    "|^<!\\\\[CDATA\\\\[[\\\\s\\\\S]*?\\\\]\\\\]>", // CDATA section\n  link: /^!?\\[(label)\\]\\(\\s*(href)(?:\\s+(title))?\\s*\\)/,\n  reflink: /^!?\\[(label)\\]\\[(ref)\\]/,\n  nolink: /^!?\\[(ref)\\](?:\\[\\])?/,\n  reflinkSearch: "reflink|nolink(?!\\\\()",\n  emStrong: {\n    lDelim: /^(?:\\*+(?:([punct_])|[^\\s*]))|^_+(?:([punct*])|([^\\s_]))/,\n    //        (1) and (2) can only be a Right Delimiter. (3) and (4) can only be Left.  (5) and (6) can be either Left or Right.\n    //          () Skip orphan inside strong  () Consume to delim (1) #***                (2) a***#, a***                   (3) #***a, ***a                 (4) ***#              (5) #***#                 (6) a***a\n    rDelimAst:\n      /^[^_*]*?\\_\\_[^_*]*?\\*[^_*]*?(?=\\_\\_)|[^*]+(?=[^*])|[punct_](\\*+)(?=[\\s]|$)|[^punct*_\\s](\\*+)(?=[punct_\\s]|$)|[punct_\\s](\\*+)(?=[^punct*_\\s])|[\\s](\\*+)(?=[punct_])|[punct_](\\*+)(?=[punct_])|[^punct*_\\s](\\*+)(?=[^punct*_\\s])/,\n    rDelimUnd:\n      /^[^_*]*?\\*\\*[^_*]*?\\_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|[punct*](\\_+)(?=[\\s]|$)|[^punct*_\\s](\\_+)(?=[punct*\\s]|$)|[punct*\\s](\\_+)(?=[^punct*_\\s])|[\\s](\\_+)(?=[punct*])|[punct*](\\_+)(?=[punct*])/, // ^- Not allowed for _\n  },\n  code: /^(`+)([^`]|[^`][\\s\\S]*?[^`])\\1(?!`)/,\n  br: /^( {2,}|\\\\)\\n(?!\\s*$)/,\n  del: noopTest,\n  text: /^(`+|[^`])(?:(?= {2,}\\n)|[\\s\\S]*?(?:(?=[\\\\<!\\[`*_]|\\b_|$)|[^ ](?= {2,}\\n)))/,\n  punctuation: /^([\\spunctuation])/,\n}\n\n// list of punctuation marks from CommonMark spec\n// without * and _ to handle the different emphasis markers * and _\ninline._punctuation = "!\\"#$%&\'()+\\\\-.,/:;<=>?@\\\\[\\\\]`^{|}~"\ninline.punctuation = edit(inline.punctuation)\n  .replace(/punctuation/g, inline._punctuation)\n  .getRegex()\n\n// sequences em should skip over [title](link), `code`, <html>\ninline.blockSkip = /\\[[^\\]]*?\\]\\([^\\)]*?\\)|`[^`]*?`|<[^>]*?>/g\ninline.escapedEmSt = /\\\\\\*|\\\\_/g\n\ninline._comment = edit(block._comment).replace("(?:-->|$)", "-->").getRegex()\n\ninline.emStrong.lDelim = edit(inline.emStrong.lDelim)\n  .replace(/punct/g, inline._punctuation)\n  .getRegex()\n\ninline.emStrong.rDelimAst = edit(inline.emStrong.rDelimAst, "g")\n  .replace(/punct/g, inline._punctuation)\n  .getRegex()\n\ninline.emStrong.rDelimUnd = edit(inline.emStrong.rDelimUnd, "g")\n  .replace(/punct/g, inline._punctuation)\n  .getRegex()\n\ninline._escapes = /\\\\([!"#$%&\'()*+,\\-./:;<=>?@\\[\\]\\\\^_`{|}~])/g\n\ninline._scheme = /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/\ninline._email =\n  /[a-zA-Z0-9.!#$%&\'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/\ninline.autolink = edit(inline.autolink)\n  .replace("scheme", inline._scheme)\n  .replace("email", inline._email)\n  .getRegex()\n\ninline._attribute =\n  /\\s+[a-zA-Z:_][\\w.:-]*(?:\\s*=\\s*"[^"]*"|\\s*=\\s*\'[^\']*\'|\\s*=\\s*[^\\s"\'=<>`]+)?/\n\ninline.tag = edit(inline.tag)\n  .replace("comment", inline._comment)\n  .replace("attribute", inline._attribute)\n  .getRegex()\n\ninline._label = /(?:\\[(?:\\\\.|[^\\[\\]\\\\])*\\]|\\\\.|`[^`]*`|[^\\[\\]\\\\`])*?/\ninline._href = /<(?:\\\\.|[^\\n<>\\\\])+>|[^\\s\\x00-\\x1f]*/\ninline._title = /"(?:\\\\"?|[^"\\\\])*"|\'(?:\\\\\'?|[^\'\\\\])*\'|\\((?:\\\\\\)?|[^)\\\\])*\\)/\n\ninline.link = edit(inline.link)\n  .replace("label", inline._label)\n  .replace("href", inline._href)\n  .replace("title", inline._title)\n  .getRegex()\n\ninline.reflink = edit(inline.reflink)\n  .replace("label", inline._label)\n  .replace("ref", block._label)\n  .getRegex()\n\ninline.nolink = edit(inline.nolink).replace("ref", block._label).getRegex()\n\ninline.reflinkSearch = edit(inline.reflinkSearch, "g")\n  .replace("reflink", inline.reflink)\n  .replace("nolink", inline.nolink)\n  .getRegex()\n\n/**\n * Normal Inline Grammar\n */\n\ninline.normal = merge({}, inline)\n\n/**\n * Pedantic Inline Grammar\n */\n\ninline.pedantic = merge({}, inline.normal, {\n  strong: {\n    start: /^__|\\*\\*/,\n    middle: /^__(?=\\S)([\\s\\S]*?\\S)__(?!_)|^\\*\\*(?=\\S)([\\s\\S]*?\\S)\\*\\*(?!\\*)/,\n    endAst: /\\*\\*(?!\\*)/g,\n    endUnd: /__(?!_)/g,\n  },\n  em: {\n    start: /^_|\\*/,\n    middle: /^()\\*(?=\\S)([\\s\\S]*?\\S)\\*(?!\\*)|^_(?=\\S)([\\s\\S]*?\\S)_(?!_)/,\n    endAst: /\\*(?!\\*)/g,\n    endUnd: /_(?!_)/g,\n  },\n  link: edit(/^!?\\[(label)\\]\\((.*?)\\)/)\n    .replace("label", inline._label)\n    .getRegex(),\n  reflink: edit(/^!?\\[(label)\\]\\s*\\[([^\\]]*)\\]/)\n    .replace("label", inline._label)\n    .getRegex(),\n})\n\n/**\n * GFM Inline Grammar\n */\n\ninline.gfm = merge({}, inline.normal, {\n  escape: edit(inline.escape).replace("])", "~|])").getRegex(),\n  _extended_email:\n    /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/,\n  url: /^((?:ftp|https?):\\/\\/|www\\.)(?:[a-zA-Z0-9\\-]+\\.?)+[^\\s<]*|^email/,\n  _backpedal:\n    /(?:[^?!.,:;*_~()&]+|\\([^)]*\\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/,\n  del: /^(~~?)(?=[^\\s~])([\\s\\S]*?[^\\s~])\\1(?=[^~]|$)/,\n  text: /^([`~]+|[^`~])(?:(?= {2,}\\n)|(?=[a-zA-Z0-9.!#$%&\'*+\\/=?_`{\\|}~-]+@)|[\\s\\S]*?(?:(?=[\\\\<!\\[`*~_]|\\b_|https?:\\/\\/|ftp:\\/\\/|www\\.|$)|[^ ](?= {2,}\\n)|[^a-zA-Z0-9.!#$%&\'*+\\/=?_`{\\|}~-](?=[a-zA-Z0-9.!#$%&\'*+\\/=?_`{\\|}~-]+@)))/,\n})\n\ninline.gfm.url = edit(inline.gfm.url, "i")\n  .replace("email", inline.gfm._extended_email)\n  .getRegex()\n/**\n * GFM + Line Breaks Inline Grammar\n */\n\ninline.breaks = merge({}, inline.gfm, {\n  br: edit(inline.br).replace("{2,}", "*").getRegex(),\n  text: edit(inline.gfm.text)\n    .replace("\\\\b_", "\\\\b_| {2,}\\\\n")\n    .replace(/\\{2,\\}/g, "*")\n    .getRegex(),\n})\n\n/**\n * smartypants text replacement\n * @param {string} text\n */\nfunction smartypants(text) {\n  return (\n    text\n      // em-dashes\n      .replace(/---/g, "\\u2014")\n      // en-dashes\n      .replace(/--/g, "\\u2013")\n      // opening singles\n      .replace(/(^|[-\\u2014/(\\[{"\\s])\'/g, "$1\\u2018")\n      // closing singles & apostrophes\n      .replace(/\'/g, "\\u2019")\n      // opening doubles\n      .replace(/(^|[-\\u2014/(\\[{\\u2018\\s])"/g, "$1\\u201c")\n      // closing doubles\n      .replace(/"/g, "\\u201d")\n      // ellipses\n      .replace(/\\.{3}/g, "\\u2026")\n  )\n}\n\n/**\n * mangle email addresses\n * @param {string} text\n */\nfunction mangle(text) {\n  let out = "",\n    i,\n    ch\n\n  const l = text.length\n  for (i = 0; i < l; i++) {\n    ch = text.charCodeAt(i)\n    if (Math.random() > 0.5) {\n      ch = "x" + ch.toString(16)\n    }\n    out += "&#" + ch + ";"\n  }\n\n  return out\n}\n\n/**\n * Block Lexer\n */\nclass Lexer {\n  constructor(options) {\n    this.tokens = []\n    this.tokens.links = Object.create(null)\n    this.options = options || defaults\n    this.options.tokenizer = this.options.tokenizer || new Tokenizer()\n    this.tokenizer = this.options.tokenizer\n    this.tokenizer.options = this.options\n    this.tokenizer.lexer = this\n    this.inlineQueue = []\n    this.state = {\n      inLink: false,\n      inRawBlock: false,\n      top: true,\n    }\n\n    const rules = {\n      block: block.normal,\n      inline: inline.normal,\n    }\n\n    if (this.options.pedantic) {\n      rules.block = block.pedantic\n      rules.inline = inline.pedantic\n    } else if (this.options.gfm) {\n      rules.block = block.gfm\n      if (this.options.breaks) {\n        rules.inline = inline.breaks\n      } else {\n        rules.inline = inline.gfm\n      }\n    }\n    this.tokenizer.rules = rules\n  }\n\n  /**\n   * Expose Rules\n   */\n  static get rules() {\n    return {\n      block,\n      inline,\n    }\n  }\n\n  /**\n   * Static Lex Method\n   */\n  static lex(src, options) {\n    const lexer = new Lexer(options)\n    return lexer.lex(src)\n  }\n\n  /**\n   * Static Lex Inline Method\n   */\n  static lexInline(src, options) {\n    const lexer = new Lexer(options)\n    return lexer.inlineTokens(src)\n  }\n\n  /**\n   * Preprocessing\n   */\n  lex(src) {\n    src = src.replace(/\\r\\n|\\r/g, "\\n")\n\n    this.blockTokens(src, this.tokens)\n\n    let next\n    while ((next = this.inlineQueue.shift())) {\n      this.inlineTokens(next.src, next.tokens)\n    }\n\n    return this.tokens\n  }\n\n  /**\n   * Lexing\n   */\n  blockTokens(src, tokens = []) {\n    if (this.options.pedantic) {\n      src = src.replace(/\\t/g, "    ").replace(/^ +$/gm, "")\n    } else {\n      src = src.replace(/^( *)(\\t+)/gm, (_, leading, tabs) => {\n        return leading + "    ".repeat(tabs.length)\n      })\n    }\n\n    let token, lastToken, cutSrc, lastParagraphClipped\n\n    while (src) {\n      if (\n        this.options.extensions &&\n        this.options.extensions.block &&\n        this.options.extensions.block.some(extTokenizer => {\n          if ((token = extTokenizer.call({ lexer: this }, src, tokens))) {\n            src = src.substring(token.raw.length)\n            tokens.push(token)\n            return true\n          }\n          return false\n        })\n      ) {\n        continue\n      }\n\n      // newline\n      if ((token = this.tokenizer.space(src))) {\n        src = src.substring(token.raw.length)\n        if (token.raw.length === 1 && tokens.length > 0) {\n          // if there\'s a single \\n as a spacer, it\'s terminating the last line,\n          // so move it there so that we don\'t get unecessary paragraph tags\n          tokens[tokens.length - 1].raw += "\\n"\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // code\n      if ((token = this.tokenizer.code(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        // An indented code block cannot interrupt a paragraph.\n        if (\n          lastToken &&\n          (lastToken.type === "paragraph" || lastToken.type === "text")\n        ) {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.text\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // fences\n      if ((token = this.tokenizer.fences(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // heading\n      if ((token = this.tokenizer.heading(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // hr\n      if ((token = this.tokenizer.hr(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // blockquote\n      if ((token = this.tokenizer.blockquote(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // list\n      if ((token = this.tokenizer.list(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // html\n      if ((token = this.tokenizer.html(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // def\n      if ((token = this.tokenizer.def(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (\n          lastToken &&\n          (lastToken.type === "paragraph" || lastToken.type === "text")\n        ) {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.raw\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else if (!this.tokens.links[token.tag]) {\n          this.tokens.links[token.tag] = {\n            href: token.href,\n            title: token.title,\n          }\n        }\n        continue\n      }\n\n      // table (gfm)\n      if ((token = this.tokenizer.table(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // lheading\n      if ((token = this.tokenizer.lheading(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // top-level paragraph\n      // prevent paragraph consuming extensions by clipping \'src\' to extension start\n      cutSrc = src\n      if (this.options.extensions && this.options.extensions.startBlock) {\n        let startIndex = Infinity\n        const tempSrc = src.slice(1)\n        let tempStart\n        this.options.extensions.startBlock.forEach(function (getStartIndex) {\n          tempStart = getStartIndex.call({ lexer: this }, tempSrc)\n          if (typeof tempStart === "number" && tempStart >= 0) {\n            startIndex = Math.min(startIndex, tempStart)\n          }\n        })\n        if (startIndex < Infinity && startIndex >= 0) {\n          cutSrc = src.substring(0, startIndex + 1)\n        }\n      }\n      if (this.state.top && (token = this.tokenizer.paragraph(cutSrc))) {\n        lastToken = tokens[tokens.length - 1]\n        if (lastParagraphClipped && lastToken.type === "paragraph") {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.text\n          this.inlineQueue.pop()\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else {\n          tokens.push(token)\n        }\n        lastParagraphClipped = cutSrc.length !== src.length\n        src = src.substring(token.raw.length)\n        continue\n      }\n\n      // text\n      if ((token = this.tokenizer.text(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && lastToken.type === "text") {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.text\n          this.inlineQueue.pop()\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      if (src) {\n        const errMsg = "Infinite loop on byte: " + src.charCodeAt(0)\n        if (this.options.silent) {\n          console.error(errMsg)\n          break\n        } else {\n          throw new Error(errMsg)\n        }\n      }\n    }\n\n    this.state.top = true\n    return tokens\n  }\n\n  inline(src, tokens) {\n    this.inlineQueue.push({ src, tokens })\n  }\n\n  /**\n   * Lexing/Compiling\n   */\n  inlineTokens(src, tokens = []) {\n    let token, lastToken, cutSrc\n\n    // String with links masked to avoid interference with em and strong\n    let maskedSrc = src\n    let match\n    let keepPrevChar, prevChar\n\n    // Mask out reflinks\n    if (this.tokens.links) {\n      const links = Object.keys(this.tokens.links)\n      if (links.length > 0) {\n        while (\n          (match = this.tokenizer.rules.inline.reflinkSearch.exec(maskedSrc)) !=\n          null\n        ) {\n          if (\n            links.includes(match[0].slice(match[0].lastIndexOf("[") + 1, -1))\n          ) {\n            maskedSrc =\n              maskedSrc.slice(0, match.index) +\n              "[" +\n              repeatString("a", match[0].length - 2) +\n              "]" +\n              maskedSrc.slice(\n                this.tokenizer.rules.inline.reflinkSearch.lastIndex\n              )\n          }\n        }\n      }\n    }\n    // Mask out other blocks\n    while (\n      (match = this.tokenizer.rules.inline.blockSkip.exec(maskedSrc)) != null\n    ) {\n      maskedSrc =\n        maskedSrc.slice(0, match.index) +\n        "[" +\n        repeatString("a", match[0].length - 2) +\n        "]" +\n        maskedSrc.slice(this.tokenizer.rules.inline.blockSkip.lastIndex)\n    }\n\n    // Mask out escaped em & strong delimiters\n    while (\n      (match = this.tokenizer.rules.inline.escapedEmSt.exec(maskedSrc)) != null\n    ) {\n      maskedSrc =\n        maskedSrc.slice(0, match.index) +\n        "++" +\n        maskedSrc.slice(this.tokenizer.rules.inline.escapedEmSt.lastIndex)\n    }\n\n    while (src) {\n      if (!keepPrevChar) {\n        prevChar = ""\n      }\n      keepPrevChar = false\n\n      // extensions\n      if (\n        this.options.extensions &&\n        this.options.extensions.inline &&\n        this.options.extensions.inline.some(extTokenizer => {\n          if ((token = extTokenizer.call({ lexer: this }, src, tokens))) {\n            src = src.substring(token.raw.length)\n            tokens.push(token)\n            return true\n          }\n          return false\n        })\n      ) {\n        continue\n      }\n\n      // escape\n      if ((token = this.tokenizer.escape(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // tag\n      if ((token = this.tokenizer.tag(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && token.type === "text" && lastToken.type === "text") {\n          lastToken.raw += token.raw\n          lastToken.text += token.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // link\n      if ((token = this.tokenizer.link(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // reflink, nolink\n      if ((token = this.tokenizer.reflink(src, this.tokens.links))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && token.type === "text" && lastToken.type === "text") {\n          lastToken.raw += token.raw\n          lastToken.text += token.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // em & strong\n      if ((token = this.tokenizer.emStrong(src, maskedSrc, prevChar))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // code\n      if ((token = this.tokenizer.codespan(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // br\n      if ((token = this.tokenizer.br(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // del (gfm)\n      if ((token = this.tokenizer.del(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // autolink\n      if ((token = this.tokenizer.autolink(src, mangle))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // url (gfm)\n      if (!this.state.inLink && (token = this.tokenizer.url(src, mangle))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // text\n      // prevent inlineText consuming extensions by clipping \'src\' to extension start\n      cutSrc = src\n      if (this.options.extensions && this.options.extensions.startInline) {\n        let startIndex = Infinity\n        const tempSrc = src.slice(1)\n        let tempStart\n        this.options.extensions.startInline.forEach(function (getStartIndex) {\n          tempStart = getStartIndex.call({ lexer: this }, tempSrc)\n          if (typeof tempStart === "number" && tempStart >= 0) {\n            startIndex = Math.min(startIndex, tempStart)\n          }\n        })\n        if (startIndex < Infinity && startIndex >= 0) {\n          cutSrc = src.substring(0, startIndex + 1)\n        }\n      }\n      if ((token = this.tokenizer.inlineText(cutSrc, smartypants))) {\n        src = src.substring(token.raw.length)\n        if (token.raw.slice(-1) !== "_") {\n          // Track prevChar before string of ____ started\n          prevChar = token.raw.slice(-1)\n        }\n        keepPrevChar = true\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && lastToken.type === "text") {\n          lastToken.raw += token.raw\n          lastToken.text += token.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      if (src) {\n        const errMsg = "Infinite loop on byte: " + src.charCodeAt(0)\n        if (this.options.silent) {\n          console.error(errMsg)\n          break\n        } else {\n          throw new Error(errMsg)\n        }\n      }\n    }\n\n    return tokens\n  }\n}\n\n/**\n * Renderer\n */\nclass Renderer {\n  constructor(options) {\n    this.options = options || defaults\n  }\n\n  code(code, infostring, escaped) {\n    const lang = (infostring || "").match(/\\S*/)[0]\n    if (this.options.highlight) {\n      const out = this.options.highlight(code, lang)\n      if (out != null && out !== code) {\n        escaped = true\n        code = out\n      }\n    }\n\n    code = code.replace(/\\n$/, "") + "\\n"\n\n    if (!lang) {\n      return (\n        "<pre><code>" +\n        (escaped ? code : escape(code, true)) +\n        "</code></pre>\\n"\n      )\n    }\n\n    return (\n      \'<pre><code class="\' +\n      this.options.langPrefix +\n      escape(lang, true) +\n      \'">\' +\n      (escaped ? code : escape(code, true)) +\n      "</code></pre>\\n"\n    )\n  }\n\n  /**\n   * @param {string} quote\n   */\n  blockquote(quote) {\n    return `<blockquote>\\n${quote}</blockquote>\\n`\n  }\n\n  html(html) {\n    return html\n  }\n\n  /**\n   * @param {string} text\n   * @param {string} level\n   * @param {string} raw\n   * @param {any} slugger\n   */\n  heading(text, level, raw, slugger) {\n    if (this.options.headerIds) {\n      const id = this.options.headerPrefix + slugger.slug(raw)\n      return `<h${level} id="${id}">${text}</h${level}>\\n`\n    }\n\n    // ignore IDs\n    return `<h${level}>${text}</h${level}>\\n`\n  }\n\n  hr() {\n    return this.options.xhtml ? "<hr/>\\n" : "<hr>\\n"\n  }\n\n  list(body, ordered, start) {\n    const type = ordered ? "ol" : "ul",\n      startatt = ordered && start !== 1 ? \' start="\' + start + \'"\' : ""\n    return "<" + type + startatt + ">\\n" + body + "</" + type + ">\\n"\n  }\n\n  /**\n   * @param {string} text\n   */\n  listitem(text) {\n    return `<li>${text}</li>\\n`\n  }\n\n  checkbox(checked) {\n    return (\n      "<input " +\n      (checked ? \'checked="" \' : "") +\n      \'disabled="" type="checkbox"\' +\n      (this.options.xhtml ? " /" : "") +\n      "> "\n    )\n  }\n\n  /**\n   * @param {string} text\n   */\n  paragraph(text) {\n    return `<p>${text}</p>\\n`\n  }\n\n  /**\n   * @param {string} header\n   * @param {string} body\n   */\n  table(header, body) {\n    if (body) body = `<tbody>${body}</tbody>`\n\n    return (\n      "<table>\\n" + "<thead>\\n" + header + "</thead>\\n" + body + "</table>\\n"\n    )\n  }\n\n  /**\n   * @param {string} content\n   */\n  tablerow(content) {\n    return `<tr>\\n${content}</tr>\\n`\n  }\n\n  tablecell(content, flags) {\n    const type = flags.header ? "th" : "td"\n    const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`\n    return tag + content + `</${type}>\\n`\n  }\n\n  /**\n   * span level renderer\n   * @param {string} text\n   */\n  strong(text) {\n    return `<strong>${text}</strong>`\n  }\n\n  /**\n   * @param {string} text\n   */\n  em(text) {\n    return `<em>${text}</em>`\n  }\n\n  /**\n   * @param {string} text\n   */\n  codespan(text) {\n    return `<code>${text}</code>`\n  }\n\n  br() {\n    return this.options.xhtml ? "<br/>" : "<br>"\n  }\n\n  /**\n   * @param {string} text\n   */\n  del(text) {\n    return `<del>${text}</del>`\n  }\n\n  /**\n   * @param {string} href\n   * @param {string} title\n   * @param {string} text\n   */\n  link(href, title, text) {\n    href = cleanUrl(this.options.sanitize, this.options.baseUrl, href)\n    if (href === null) {\n      return text\n    }\n    let out = \'<a href="\' + escape(href) + \'"\'\n    if (title) {\n      out += \' title="\' + title + \'"\'\n    }\n    out += ">" + text + "</a>"\n    return out\n  }\n\n  /**\n   * @param {string} href\n   * @param {string} title\n   * @param {string} text\n   */\n  image(href, title, text) {\n    href = cleanUrl(this.options.sanitize, this.options.baseUrl, href)\n    if (href === null) {\n      return text\n    }\n\n    let out = `<img src="${href}" alt="${text}"`\n    if (title) {\n      out += ` title="${title}"`\n    }\n    out += this.options.xhtml ? "/>" : ">"\n    return out\n  }\n\n  text(text) {\n    return text\n  }\n}\n\n/**\n * TextRenderer\n * returns only the textual part of the token\n */\nclass TextRenderer {\n  // no need for block level renderers\n  strong(text) {\n    return text\n  }\n\n  em(text) {\n    return text\n  }\n\n  codespan(text) {\n    return text\n  }\n\n  del(text) {\n    return text\n  }\n\n  html(text) {\n    return text\n  }\n\n  text(text) {\n    return text\n  }\n\n  link(href, title, text) {\n    return "" + text\n  }\n\n  image(href, title, text) {\n    return "" + text\n  }\n\n  br() {\n    return ""\n  }\n}\n\n/**\n * Slugger generates header id\n */\nclass Slugger {\n  constructor() {\n    this.seen = {}\n  }\n\n  /**\n   * @param {string} value\n   */\n  serialize(value) {\n    return (\n      value\n        .toLowerCase()\n        .trim()\n        // remove html tags\n        .replace(/<[!\\/a-z].*?>/gi, "")\n        // remove unwanted chars\n        .replace(\n          /[\\u2000-\\u206F\\u2E00-\\u2E7F\\\\\'!"#$%&()*+,./:;<=>?@[\\]^`{|}~]/g,\n          ""\n        )\n        .replace(/\\s/g, "-")\n    )\n  }\n\n  /**\n   * Finds the next safe (unique) slug to use\n   * @param {string} originalSlug\n   * @param {boolean} isDryRun\n   */\n  getNextSafeSlug(originalSlug, isDryRun) {\n    let slug = originalSlug\n    let occurenceAccumulator = 0\n    if (this.seen.hasOwnProperty(slug)) {\n      occurenceAccumulator = this.seen[originalSlug]\n      do {\n        occurenceAccumulator++\n        slug = originalSlug + "-" + occurenceAccumulator\n      } while (this.seen.hasOwnProperty(slug))\n    }\n    if (!isDryRun) {\n      this.seen[originalSlug] = occurenceAccumulator\n      this.seen[slug] = 0\n    }\n    return slug\n  }\n\n  /**\n   * Convert string to unique id\n   * @param {object} [options]\n   * @param {boolean} [options.dryrun] Generates the next unique slug without\n   * updating the internal accumulator.\n   */\n  slug(value, options = {}) {\n    const slug = this.serialize(value)\n    return this.getNextSafeSlug(slug, options.dryrun)\n  }\n}\n\n/**\n * Parsing & Compiling\n */\nclass Parser {\n  constructor(options) {\n    this.options = options || defaults\n    this.options.renderer = this.options.renderer || new Renderer()\n    this.renderer = this.options.renderer\n    this.renderer.options = this.options\n    this.textRenderer = new TextRenderer()\n    this.slugger = new Slugger()\n  }\n\n  /**\n   * Static Parse Method\n   */\n  static parse(tokens, options) {\n    const parser = new Parser(options)\n    return parser.parse(tokens)\n  }\n\n  /**\n   * Static Parse Inline Method\n   */\n  static parseInline(tokens, options) {\n    const parser = new Parser(options)\n    return parser.parseInline(tokens)\n  }\n\n  /**\n   * Parse Loop\n   */\n  parse(tokens, top = true) {\n    let out = "",\n      i,\n      j,\n      k,\n      l2,\n      l3,\n      row,\n      cell,\n      header,\n      body,\n      token,\n      ordered,\n      start,\n      loose,\n      itemBody,\n      item,\n      checked,\n      task,\n      checkbox,\n      ret\n\n    const l = tokens.length\n    for (i = 0; i < l; i++) {\n      token = tokens[i]\n\n      // Run any renderer extensions\n      if (\n        this.options.extensions &&\n        this.options.extensions.renderers &&\n        this.options.extensions.renderers[token.type]\n      ) {\n        ret = this.options.extensions.renderers[token.type].call(\n          { parser: this },\n          token\n        )\n        if (\n          ret !== false ||\n          ![\n            "space",\n            "hr",\n            "heading",\n            "code",\n            "table",\n            "blockquote",\n            "list",\n            "html",\n            "paragraph",\n            "text",\n          ].includes(token.type)\n        ) {\n          out += ret || ""\n          continue\n        }\n      }\n\n      switch (token.type) {\n        case "space": {\n          continue\n        }\n        case "hr": {\n          out += this.renderer.hr()\n          continue\n        }\n        case "heading": {\n          out += this.renderer.heading(\n            this.parseInline(token.tokens),\n            token.depth,\n            unescape(this.parseInline(token.tokens, this.textRenderer)),\n            this.slugger\n          )\n          continue\n        }\n        case "code": {\n          out += this.renderer.code(token.text, token.lang, token.escaped)\n          continue\n        }\n        case "table": {\n          header = ""\n\n          // header\n          cell = ""\n          l2 = token.header.length\n          for (j = 0; j < l2; j++) {\n            cell += this.renderer.tablecell(\n              this.parseInline(token.header[j].tokens),\n              { header: true, align: token.align[j] }\n            )\n          }\n          header += this.renderer.tablerow(cell)\n\n          body = ""\n          l2 = token.rows.length\n          for (j = 0; j < l2; j++) {\n            row = token.rows[j]\n\n            cell = ""\n            l3 = row.length\n            for (k = 0; k < l3; k++) {\n              cell += this.renderer.tablecell(this.parseInline(row[k].tokens), {\n                header: false,\n                align: token.align[k],\n              })\n            }\n\n            body += this.renderer.tablerow(cell)\n          }\n          out += this.renderer.table(header, body)\n          continue\n        }\n        case "blockquote": {\n          body = this.parse(token.tokens)\n          out += this.renderer.blockquote(body)\n          continue\n        }\n        case "list": {\n          ordered = token.ordered\n          start = token.start\n          loose = token.loose\n          l2 = token.items.length\n\n          body = ""\n          for (j = 0; j < l2; j++) {\n            item = token.items[j]\n            checked = item.checked\n            task = item.task\n\n            itemBody = ""\n            if (item.task) {\n              checkbox = this.renderer.checkbox(checked)\n              if (loose) {\n                if (\n                  item.tokens.length > 0 &&\n                  item.tokens[0].type === "paragraph"\n                ) {\n                  item.tokens[0].text = checkbox + " " + item.tokens[0].text\n                  if (\n                    item.tokens[0].tokens &&\n                    item.tokens[0].tokens.length > 0 &&\n                    item.tokens[0].tokens[0].type === "text"\n                  ) {\n                    item.tokens[0].tokens[0].text =\n                      checkbox + " " + item.tokens[0].tokens[0].text\n                  }\n                } else {\n                  item.tokens.unshift({\n                    type: "text",\n                    text: checkbox,\n                  })\n                }\n              } else {\n                itemBody += checkbox\n              }\n            }\n\n            itemBody += this.parse(item.tokens, loose)\n            body += this.renderer.listitem(itemBody, task, checked)\n          }\n\n          out += this.renderer.list(body, ordered, start)\n          continue\n        }\n        case "html": {\n          // TODO parse inline content if parameter markdown=1\n          out += this.renderer.html(token.text)\n          continue\n        }\n        case "paragraph": {\n          out += this.renderer.paragraph(this.parseInline(token.tokens))\n          continue\n        }\n        case "text": {\n          body = token.tokens ? this.parseInline(token.tokens) : token.text\n          while (i + 1 < l && tokens[i + 1].type === "text") {\n            token = tokens[++i]\n            body +=\n              "\\n" +\n              (token.tokens ? this.parseInline(token.tokens) : token.text)\n          }\n          out += top ? this.renderer.paragraph(body) : body\n          continue\n        }\n\n        default: {\n          const errMsg = \'Token with "\' + token.type + \'" type was not found.\'\n          if (this.options.silent) {\n            console.error(errMsg)\n            return\n          } else {\n            throw new Error(errMsg)\n          }\n        }\n      }\n    }\n\n    return out\n  }\n\n  /**\n   * Parse Inline Tokens\n   */\n  parseInline(tokens, renderer) {\n    renderer = renderer || this.renderer\n    let out = "",\n      i,\n      token,\n      ret\n\n    const l = tokens.length\n    for (i = 0; i < l; i++) {\n      token = tokens[i]\n\n      // Run any renderer extensions\n      if (\n        this.options.extensions &&\n        this.options.extensions.renderers &&\n        this.options.extensions.renderers[token.type]\n      ) {\n        ret = this.options.extensions.renderers[token.type].call(\n          { parser: this },\n          token\n        )\n        if (\n          ret !== false ||\n          ![\n            "escape",\n            "html",\n            "link",\n            "image",\n            "strong",\n            "em",\n            "codespan",\n            "br",\n            "del",\n            "text",\n          ].includes(token.type)\n        ) {\n          out += ret || ""\n          continue\n        }\n      }\n\n      switch (token.type) {\n        case "escape": {\n          out += renderer.text(token.text)\n          break\n        }\n        case "html": {\n          out += renderer.html(token.text)\n          break\n        }\n        case "link": {\n          out += renderer.link(\n            token.href,\n            token.title,\n            this.parseInline(token.tokens, renderer)\n          )\n          break\n        }\n        case "image": {\n          out += renderer.image(token.href, token.title, token.text)\n          break\n        }\n        case "strong": {\n          out += renderer.strong(this.parseInline(token.tokens, renderer))\n          break\n        }\n        case "em": {\n          out += renderer.em(this.parseInline(token.tokens, renderer))\n          break\n        }\n        case "codespan": {\n          out += renderer.codespan(token.text)\n          break\n        }\n        case "br": {\n          out += renderer.br()\n          break\n        }\n        case "del": {\n          out += renderer.del(this.parseInline(token.tokens, renderer))\n          break\n        }\n        case "text": {\n          out += renderer.text(token.text)\n          break\n        }\n        default: {\n          const errMsg = \'Token with "\' + token.type + \'" type was not found.\'\n          if (this.options.silent) {\n            console.error(errMsg)\n            return\n          } else {\n            throw new Error(errMsg)\n          }\n        }\n      }\n    }\n    return out\n  }\n}\n\n/**\n * Marked\n */\nfunction marked(src, opt, callback) {\n  // throw error in case of non string input\n  if (typeof src === "undefined" || src === null) {\n    throw new Error("marked(): input parameter is undefined or null")\n  }\n  if (typeof src !== "string") {\n    throw new Error(\n      "marked(): input parameter is of type " +\n        Object.prototype.toString.call(src) +\n        ", string expected"\n    )\n  }\n\n  if (typeof opt === "function") {\n    callback = opt\n    opt = null\n  }\n\n  opt = merge({}, marked.defaults, opt || {})\n  checkSanitizeDeprecation(opt)\n\n  if (callback) {\n    const highlight = opt.highlight\n    let tokens\n\n    try {\n      tokens = Lexer.lex(src, opt)\n    } catch (e) {\n      return callback(e)\n    }\n\n    const done = function (err) {\n      let out\n\n      if (!err) {\n        try {\n          if (opt.walkTokens) {\n            marked.walkTokens(tokens, opt.walkTokens)\n          }\n          out = Parser.parse(tokens, opt)\n        } catch (e) {\n          err = e\n        }\n      }\n\n      opt.highlight = highlight\n\n      return err ? callback(err) : callback(null, out)\n    }\n\n    if (!highlight || highlight.length < 3) {\n      return done()\n    }\n\n    delete opt.highlight\n\n    if (!tokens.length) return done()\n\n    let pending = 0\n    marked.walkTokens(tokens, function (token) {\n      if (token.type === "code") {\n        pending++\n        setTimeout(() => {\n          highlight(token.text, token.lang, function (err, code) {\n            if (err) {\n              return done(err)\n            }\n            if (code != null && code !== token.text) {\n              token.text = code\n              token.escaped = true\n            }\n\n            pending--\n            if (pending === 0) {\n              done()\n            }\n          })\n        }, 0)\n      }\n    })\n\n    if (pending === 0) {\n      done()\n    }\n\n    return\n  }\n\n  try {\n    const tokens = Lexer.lex(src, opt)\n    if (opt.walkTokens) {\n      marked.walkTokens(tokens, opt.walkTokens)\n    }\n    return Parser.parse(tokens, opt)\n  } catch (e) {\n    e.message += "\\nPlease report this to https://github.com/markedjs/marked."\n    if (opt.silent) {\n      return (\n        "<p>An error occurred:</p><pre>" +\n        escape(e.message + "", true) +\n        "</pre>"\n      )\n    }\n    throw e\n  }\n}\n\n/**\n * Options\n */\n\nmarked.options = marked.setOptions = function (opt) {\n  merge(marked.defaults, opt)\n  changeDefaults(marked.defaults)\n  return marked\n}\n\nmarked.getDefaults = getDefaults\n\nmarked.defaults = defaults\n\n/**\n * Use Extension\n */\n\nmarked.use = function (...args) {\n  const opts = merge({}, ...args)\n  const extensions = marked.defaults.extensions || {\n    renderers: {},\n    childTokens: {},\n  }\n  let hasExtensions\n\n  args.forEach(pack => {\n    // ==-- Parse "addon" extensions --== //\n    if (pack.extensions) {\n      hasExtensions = true\n      pack.extensions.forEach(ext => {\n        if (!ext.name) {\n          throw new Error("extension name required")\n        }\n        if (ext.renderer) {\n          // Renderer extensions\n          const prevRenderer = extensions.renderers\n            ? extensions.renderers[ext.name]\n            : null\n          if (prevRenderer) {\n            // Replace extension with func to run new extension but fall back if false\n            extensions.renderers[ext.name] = function (...args) {\n              let ret = ext.renderer.apply(this, args)\n              if (ret === false) {\n                ret = prevRenderer.apply(this, args)\n              }\n              return ret\n            }\n          } else {\n            extensions.renderers[ext.name] = ext.renderer\n          }\n        }\n        if (ext.tokenizer) {\n          // Tokenizer Extensions\n          if (!ext.level || (ext.level !== "block" && ext.level !== "inline")) {\n            throw new Error("extension level must be \'block\' or \'inline\'")\n          }\n          if (extensions[ext.level]) {\n            extensions[ext.level].unshift(ext.tokenizer)\n          } else {\n            extensions[ext.level] = [ext.tokenizer]\n          }\n          if (ext.start) {\n            // Function to check for start of token\n            if (ext.level === "block") {\n              if (extensions.startBlock) {\n                extensions.startBlock.push(ext.start)\n              } else {\n                extensions.startBlock = [ext.start]\n              }\n            } else if (ext.level === "inline") {\n              if (extensions.startInline) {\n                extensions.startInline.push(ext.start)\n              } else {\n                extensions.startInline = [ext.start]\n              }\n            }\n          }\n        }\n        if (ext.childTokens) {\n          // Child tokens to be visited by walkTokens\n          extensions.childTokens[ext.name] = ext.childTokens\n        }\n      })\n    }\n\n    // ==-- Parse "overwrite" extensions --== //\n    if (pack.renderer) {\n      const renderer = marked.defaults.renderer || new Renderer()\n      for (const prop in pack.renderer) {\n        const prevRenderer = renderer[prop]\n        // Replace renderer with func to run extension, but fall back if false\n        renderer[prop] = (...args) => {\n          let ret = pack.renderer[prop].apply(renderer, args)\n          if (ret === false) {\n            ret = prevRenderer.apply(renderer, args)\n          }\n          return ret\n        }\n      }\n      opts.renderer = renderer\n    }\n    if (pack.tokenizer) {\n      const tokenizer = marked.defaults.tokenizer || new Tokenizer()\n      for (const prop in pack.tokenizer) {\n        const prevTokenizer = tokenizer[prop]\n        // Replace tokenizer with func to run extension, but fall back if false\n        tokenizer[prop] = (...args) => {\n          let ret = pack.tokenizer[prop].apply(tokenizer, args)\n          if (ret === false) {\n            ret = prevTokenizer.apply(tokenizer, args)\n          }\n          return ret\n        }\n      }\n      opts.tokenizer = tokenizer\n    }\n\n    // ==-- Parse WalkTokens extensions --== //\n    if (pack.walkTokens) {\n      const walkTokens = marked.defaults.walkTokens\n      opts.walkTokens = function (token) {\n        pack.walkTokens.call(this, token)\n        if (walkTokens) {\n          walkTokens.call(this, token)\n        }\n      }\n    }\n\n    if (hasExtensions) {\n      opts.extensions = extensions\n    }\n\n    marked.setOptions(opts)\n  })\n}\n\n/**\n * Run callback for every token\n */\n\nmarked.walkTokens = function (tokens, callback) {\n  for (const token of tokens) {\n    callback.call(marked, token)\n    switch (token.type) {\n      case "table": {\n        for (const cell of token.header) {\n          marked.walkTokens(cell.tokens, callback)\n        }\n        for (const row of token.rows) {\n          for (const cell of row) {\n            marked.walkTokens(cell.tokens, callback)\n          }\n        }\n        break\n      }\n      case "list": {\n        marked.walkTokens(token.items, callback)\n        break\n      }\n      default: {\n        if (\n          marked.defaults.extensions &&\n          marked.defaults.extensions.childTokens &&\n          marked.defaults.extensions.childTokens[token.type]\n        ) {\n          // Walk any extensions\n          marked.defaults.extensions.childTokens[token.type].forEach(function (\n            childTokens\n          ) {\n            marked.walkTokens(token[childTokens], callback)\n          })\n        } else if (token.tokens) {\n          marked.walkTokens(token.tokens, callback)\n        }\n      }\n    }\n  }\n}\n\n/**\n * Parse Inline\n * @param {string} src\n */\nmarked.parseInline = function (src, opt) {\n  // throw error in case of non string input\n  if (typeof src === "undefined" || src === null) {\n    throw new Error(\n      "marked.parseInline(): input parameter is undefined or null"\n    )\n  }\n  if (typeof src !== "string") {\n    throw new Error(\n      "marked.parseInline(): input parameter is of type " +\n        Object.prototype.toString.call(src) +\n        ", string expected"\n    )\n  }\n\n  opt = merge({}, marked.defaults, opt || {})\n  checkSanitizeDeprecation(opt)\n\n  try {\n    const tokens = Lexer.lexInline(src, opt)\n    if (opt.walkTokens) {\n      marked.walkTokens(tokens, opt.walkTokens)\n    }\n    return Parser.parseInline(tokens, opt)\n  } catch (e) {\n    e.message += "\\nPlease report this to https://github.com/markedjs/marked."\n    if (opt.silent) {\n      return (\n        "<p>An error occurred:</p><pre>" +\n        escape(e.message + "", true) +\n        "</pre>"\n      )\n    }\n    throw e\n  }\n}\n\n/**\n * Expose\n */\nmarked.Parser = Parser\nmarked.parser = Parser.parse\nmarked.Renderer = Renderer\nmarked.TextRenderer = TextRenderer\nmarked.Lexer = Lexer\nmarked.lexer = Lexer.lex\nmarked.Tokenizer = Tokenizer\nmarked.Slugger = Slugger\nmarked.parse = marked\n\nconst options = marked.options\nconst setOptions = marked.setOptions\nconst use = marked.use\nconst walkTokens = marked.walkTokens\nconst parseInline = marked.parseInline\nconst parse = marked\nconst parser = Parser.parse\nconst lexer = Lexer.lex\n\nconst email = trigger.row\nreturn marked(email.Message)'

From 91a98224d9e764e33d2434aca03c2c7fce4be168 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 4 Mar 2024 10:00:56 +0000
Subject: [PATCH 067/148] Bump account portal

---
 packages/account-portal | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/account-portal b/packages/account-portal
index 19f7a5829f..806b6fd5c1 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 19f7a5829f4d23cbc694136e45d94482a59a475a
+Subproject commit 806b6fd5c11c284ebf4a01627d75db939f0f8152

From ff69f1e876018ac665750c06f62d2998666baca1 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 4 Mar 2024 11:20:09 +0000
Subject: [PATCH 068/148] Make the file attribute optional on create app
 requests

---
 packages/types/src/api/web/application.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/types/src/api/web/application.ts b/packages/types/src/api/web/application.ts
index 87a0bd6ef9..818f261a08 100644
--- a/packages/types/src/api/web/application.ts
+++ b/packages/types/src/api/web/application.ts
@@ -11,6 +11,7 @@ export interface CreateAppRequest {
   includeSampleData?: boolean
   encryptionPassword?: string
   templateString?: string
+  file?: any
 }
 
 export interface FetchAppDefinitionResponse {

From 5f27e3a7427b7e74e6f92e9569dea9339cc62cfd Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 4 Mar 2024 12:20:34 +0000
Subject: [PATCH 069/148] Refactored app duplicate tests

---
 .../src/api/routes/tests/application.spec.ts  | 52 +++++++++----------
 .../src/tests/utilities/api/application.ts    | 19 +++++++
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/packages/server/src/api/routes/tests/application.spec.ts b/packages/server/src/api/routes/tests/application.spec.ts
index 3a69cf34d0..5a6c30d7a8 100644
--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@@ -271,13 +271,12 @@ describe("/applications", () => {
       await config.createApp("to-dupe")
       const sourceAppId = config.getProdAppId()
 
-      const resp = await request
-        .post(`/api/applications/${sourceAppId}/duplicate`)
-        .field("name", "to-dupe copy")
-        .field("url", "/to-dupe-copy")
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
+      const resp = await config.api.application.duplicateApp(sourceAppId, {
+        name: "to-dupe copy",
+        url: "/to-dupe-copy",
+      })
+
+      expect(resp.status).toEqual("200")
 
       expect(events.app.duplicated).toBeCalled()
       expect(resp.body.duplicateAppId).toBeDefined()
@@ -286,39 +285,38 @@ describe("/applications", () => {
     })
 
     it("should reject an unknown app id with a 404", async () => {
-      await request
-        .post(`/api/applications/app_1234_not_real/duplicate`)
-        .field("name", "to-dupe copy")
-        .field("url", "/to-dupe-copy")
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(404)
+      const resp = await config.api.application.duplicateApp(
+        "app_1234_not_real",
+        {
+          name: "to-dupe copy",
+          url: "/to-dupe-copy",
+        }
+      )
+
+      expect(resp.status).toEqual("404")
     })
 
     it("should reject with a known name", async () => {
       await config.createApp("known name")
       const sourceAppId = config.getProdAppId()
-      const resp = await request
-        .post(`/api/applications/${sourceAppId}/duplicate`)
-        .field("name", "known name")
-        .field("url", "/known-name")
-        .set(config.defaultHeaders())
-        .expect(400)
+      const resp = await config.api.application.duplicateApp(sourceAppId, {
+        name: "known name",
+        url: "/known-name",
+      })
 
+      expect(resp.status).toEqual("400")
       expect(resp.body.message).toEqual("App name is already in use.")
     })
 
     it("should reject with a known url", async () => {
       await config.createApp("known-url")
       const sourceAppId = config.getProdAppId()
+      const resp = await config.api.application.duplicateApp(sourceAppId, {
+        name: "this is fine",
+        url: "/known-url",
+      })
 
-      const resp = await request
-        .post(`/api/applications/${sourceAppId}/duplicate`)
-        .field("name", "this is fine")
-        .field("url", "/known-url")
-        .set(config.defaultHeaders())
-        .expect(400)
-
+      expect(resp.status).toEqual("400")
       expect(resp.body.message).toEqual("App URL is already in use.")
     })
   })
diff --git a/packages/server/src/tests/utilities/api/application.ts b/packages/server/src/tests/utilities/api/application.ts
index 3951bba667..5728483b82 100644
--- a/packages/server/src/tests/utilities/api/application.ts
+++ b/packages/server/src/tests/utilities/api/application.ts
@@ -160,6 +160,25 @@ export class ApplicationAPI extends TestAPI {
     }
   }
 
+  duplicateApp = async (appId: string, fields: object): Promise<Response> => {
+    let headers = {
+      ...this.config.defaultHeaders(),
+      [constants.Header.APP_ID]: appId,
+    }
+    const req = this.request
+      .post(`/api/applications/${appId}/duplicate`)
+      .set(headers)
+      .expect("Content-Type", /json/)
+
+    for (const [key, value] of Object.entries(fields)) {
+      req.field(key, value)
+    }
+
+    const response = await req
+
+    return response
+  }
+
   revertClient = async (appId: string): Promise<void> => {
     // While the revertClient endpoint does take an :appId parameter, it doesn't
     // use it. It uses the appId from the context.

From 3c684d8cb5ca2d4af9065462c6987b54712fa752 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 4 Mar 2024 15:11:26 +0000
Subject: [PATCH 070/148] Further refactoring of the tests to bring them up to
 date

---
 .../src/api/routes/tests/application.spec.ts  | 65 ++++++++++++-------
 .../src/tests/utilities/TestConfiguration.ts  | 11 ++++
 .../src/tests/utilities/api/application.ts    | 19 ------
 3 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/packages/server/src/api/routes/tests/application.spec.ts b/packages/server/src/api/routes/tests/application.spec.ts
index 5a6c30d7a8..33585366c8 100644
--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@@ -271,53 +271,70 @@ describe("/applications", () => {
       await config.createApp("to-dupe")
       const sourceAppId = config.getProdAppId()
 
-      const resp = await config.api.application.duplicateApp(sourceAppId, {
+      const resp = await config.duplicateApp(sourceAppId, {
         name: "to-dupe copy",
         url: "/to-dupe-copy",
       })
 
-      expect(resp.status).toEqual("200")
-
       expect(events.app.duplicated).toBeCalled()
-      expect(resp.body.duplicateAppId).toBeDefined()
-      expect(resp.body.sourceAppId).toEqual(sourceAppId)
-      expect(resp.body.duplicateAppId).not.toEqual(sourceAppId)
+      expect(resp.duplicateAppId).toBeDefined()
+      expect(resp.sourceAppId).toEqual(sourceAppId)
+      expect(resp.duplicateAppId).not.toEqual(sourceAppId)
     })
 
     it("should reject an unknown app id with a 404", async () => {
-      const resp = await config.api.application.duplicateApp(
-        "app_1234_not_real",
-        {
+      let dupeError
+      try {
+        await config.duplicateApp("app_fake", {
           name: "to-dupe copy",
           url: "/to-dupe-copy",
-        }
-      )
+        })
+      } catch (err: any) {
+        dupeError = err
+      }
 
-      expect(resp.status).toEqual("404")
+      expect(dupeError).toBeDefined()
+      expect(dupeError.message).toEqual("Error 404 - Source app not found")
     })
 
     it("should reject with a known name", async () => {
       await config.createApp("known name")
       const sourceAppId = config.getProdAppId()
-      const resp = await config.api.application.duplicateApp(sourceAppId, {
-        name: "known name",
-        url: "/known-name",
-      })
 
-      expect(resp.status).toEqual("400")
-      expect(resp.body.message).toEqual("App name is already in use.")
+      let dupeError
+      try {
+        await config.duplicateApp(sourceAppId, {
+          name: "known name",
+          url: "/known-name",
+        })
+      } catch (err: any) {
+        dupeError = err
+      }
+
+      expect(dupeError).toBeDefined()
+      expect(dupeError.message).toEqual(
+        "Error 400 - App name is already in use."
+      )
     })
 
     it("should reject with a known url", async () => {
       await config.createApp("known-url")
       const sourceAppId = config.getProdAppId()
-      const resp = await config.api.application.duplicateApp(sourceAppId, {
-        name: "this is fine",
-        url: "/known-url",
-      })
 
-      expect(resp.status).toEqual("400")
-      expect(resp.body.message).toEqual("App URL is already in use.")
+      let dupeError
+      try {
+        await config.duplicateApp(sourceAppId, {
+          name: "this is fine",
+          url: "/known-url",
+        })
+      } catch (err: any) {
+        dupeError = err
+      }
+
+      expect(dupeError).toBeDefined()
+      expect(dupeError.message).toEqual(
+        "Error 400 - App URL is already in use."
+      )
     })
   })
 
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index f7b8a703bb..aebb9e437d 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -575,6 +575,7 @@ export default class TestConfiguration {
       async () =>
         (await this._req(appController.create, {
           name: appName,
+          url,
         })) as App
     )
     this.appId = this.app.appId
@@ -589,6 +590,16 @@ export default class TestConfiguration {
     })
   }
 
+  async duplicateApp(appId: string, fields: object) {
+    return context.doInTenant(
+      this.tenantId!,
+      async () =>
+        await this._req(appController.duplicateApp, fields, {
+          appId,
+        })
+    )
+  }
+
   async publish() {
     await this._req(deployController.publishApp)
     // @ts-ignore
diff --git a/packages/server/src/tests/utilities/api/application.ts b/packages/server/src/tests/utilities/api/application.ts
index 5728483b82..3951bba667 100644
--- a/packages/server/src/tests/utilities/api/application.ts
+++ b/packages/server/src/tests/utilities/api/application.ts
@@ -160,25 +160,6 @@ export class ApplicationAPI extends TestAPI {
     }
   }
 
-  duplicateApp = async (appId: string, fields: object): Promise<Response> => {
-    let headers = {
-      ...this.config.defaultHeaders(),
-      [constants.Header.APP_ID]: appId,
-    }
-    const req = this.request
-      .post(`/api/applications/${appId}/duplicate`)
-      .set(headers)
-      .expect("Content-Type", /json/)
-
-    for (const [key, value] of Object.entries(fields)) {
-      req.field(key, value)
-    }
-
-    const response = await req
-
-    return response
-  }
-
   revertClient = async (appId: string): Promise<void> => {
     // While the revertClient endpoint does take an :appId parameter, it doesn't
     // use it. It uses the appId from the context.

From 3716054313abb0862d47cd5e1101f08bcf15c230 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 4 Mar 2024 15:20:39 +0000
Subject: [PATCH 071/148] Bump dependencies

---
 packages/account-portal | 2 +-
 packages/pro            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/account-portal b/packages/account-portal
index 806b6fd5c1..0c050591c2 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 806b6fd5c11c284ebf4a01627d75db939f0f8152
+Subproject commit 0c050591c21d3b67dc0c9225d60cc9e2324c8dac
diff --git a/packages/pro b/packages/pro
index 183b35d3ac..22a278da72 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 183b35d3acd42433dcb2d32bcd89a36abe13afec
+Subproject commit 22a278da720d92991dabdcd4cb6c96e7abe29781

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

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

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

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

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

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

From 320b443ca4d4563cb9377bbdf0cf3b4e49987a29 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 5 Mar 2024 16:23:39 +0000
Subject: [PATCH 074/148] Feedback changes. Permission change for app delete
 from GLOBAL_BUILDER to BUILDER. Minor updates to quota behaviour for apps.

---
 .../src/components/deploy/DeleteModal.svelte  |   7 +-
 .../portal/licensing/AppLimitModal.svelte     |  10 +-
 .../src/components/start/AppRowContext.svelte |  23 +++-
 .../components/start/DuplicateAppModal.svelte |   2 +
 .../app/[application]/settings/_layout.svelte |   1 +
 .../apps/_components/PortalSideBar.svelte     |  25 ++--
 .../server/src/api/controllers/application.ts |  46 ++++---
 packages/server/src/api/routes/application.ts |   4 +-
 .../src/api/routes/tests/application.spec.ts  | 124 ++++++------------
 .../src/tests/utilities/TestConfiguration.ts  |  10 --
 .../src/tests/utilities/api/application.ts    |  17 +++
 packages/types/src/api/web/application.ts     |  13 +-
 12 files changed, 144 insertions(+), 138 deletions(-)

diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 26a13623b5..676fed60f8 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -56,9 +56,10 @@
   disabled={deletionConfirmationAppName !== appName || deleting}
 >
   Are you sure you want to delete
-  <b class="app-name" role="button" tabindex={-1} on:click={copyName}>
+  <span class="app-name" role="button" tabindex={-1} on:click={copyName}>
     {appName}
-  </b>?
+  </span>?
+
   <br />
   Please enter the app name below to confirm.
   <br /><br />
@@ -68,5 +69,7 @@
 <style>
   .app-name {
     cursor: pointer;
+    font-weight: bold;
+    display: inline-block;
   }
 </style>
diff --git a/packages/builder/src/components/portal/licensing/AppLimitModal.svelte b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
index 39f553517e..bdecbcab3d 100644
--- a/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
+++ b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
@@ -31,17 +31,11 @@
       : null}
   >
     <Body>
-      You are currently on our <span class="free-plan">Free plan</span>. Upgrade
-      to our Pro plan to get unlimited apps and additional features.
+      You have exceeded the app limit for your current plan. Upgrade to get
+      unlimited apps and additional features!
     </Body>
     {#if !$auth.user.accountPortalAccess}
       <Body>Please contact the account holder to upgrade.</Body>
     {/if}
   </ModalContent>
 </Modal>
-
-<style>
-  .free-plan {
-    font-weight: 600;
-  }
-</style>
diff --git a/packages/builder/src/components/start/AppRowContext.svelte b/packages/builder/src/components/start/AppRowContext.svelte
index 3d24aeb542..f7986bcfa5 100644
--- a/packages/builder/src/components/start/AppRowContext.svelte
+++ b/packages/builder/src/components/start/AppRowContext.svelte
@@ -1,8 +1,10 @@
 <script>
   import { ActionMenu, MenuItem, Icon, Modal } from "@budibase/bbui"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
+  import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
   import ExportAppModal from "./ExportAppModal.svelte"
   import DuplicateAppModal from "./DuplicateAppModal.svelte"
+  import { auth, licensing } from "stores/portal"
 
   export let app
   export let align = "right"
@@ -11,21 +13,32 @@
   let exportModal
   let duplicateModal
   let exportPublishedVersion = false
+  let appLimitModal
 </script>
 
 <DeleteModal
   bind:this={deleteModal}
   appId={app.devId}
   appName={app.name}
-  onDeleteSuccess={() => {}}
+  onDeleteSuccess={async () => {
+    await licensing.init()
+  }}
 />
 
+<AppLimitModal bind:this={appLimitModal} />
+
 <Modal bind:this={exportModal} padding={false}>
   <ExportAppModal {app} published={exportPublishedVersion} />
 </Modal>
 
 <Modal bind:this={duplicateModal} padding={false}>
-  <DuplicateAppModal appId={app.devId} appName={app.name} />
+  <DuplicateAppModal
+    appId={app.devId}
+    appName={app.name}
+    onDuplicateSuccess={async () => {
+      await licensing.init()
+    }}
+  />
 </Modal>
 
 <ActionMenu {align} on:open on:close>
@@ -35,7 +48,11 @@
   <MenuItem
     icon="Copy"
     on:click={() => {
-      duplicateModal.show()
+      if ($licensing?.usageMetrics?.apps < 100) {
+        duplicateModal.show()
+      } else {
+        appLimitModal.show()
+      }
     }}
   >
     Duplicate
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
index 9a83f57215..d7b600cfeb 100644
--- a/packages/builder/src/components/start/DuplicateAppModal.svelte
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -15,6 +15,7 @@
 
   export let appId
   export let appName
+  export let onDuplicateSuccess = () => {}
 
   const validation = createValidationStore()
   const values = writable({ name: appName + " copy", url: null })
@@ -68,6 +69,7 @@
     try {
       await API.duplicateApp(data, appId)
       apps.load()
+      onDuplicateSuccess()
       notifications.success("App duplicated successfully")
     } catch (err) {
       notifications.error("Error duplicating app")
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 67befddcb9..2e90faf3a9 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -4,6 +4,7 @@
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
   import { isOnlyUser, appStore } from "stores/builder"
+  import { auth } from "stores/portal"
 
   let deleteModal
 </script>
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index b6f66ff8e7..e487713257 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -1,10 +1,11 @@
 <script>
-  import { apps, sideBarCollapsed } from "stores/portal"
+  import { apps, sideBarCollapsed, auth } from "stores/portal"
   import { params, goto } from "@roxi/routify"
   import NavItem from "components/common/NavItem.svelte"
   import NavHeader from "components/common/NavHeader.svelte"
   import AppRowContext from "components/start/AppRowContext.svelte"
   import { AppStatus } from "constants"
+  import { sdk } from "@budibase/shared-core"
 
   let searchString
   let opened
@@ -54,16 +55,18 @@
         highlighted={opened == app.appId}
         on:click={() => $goto(`./${app.appId}`)}
       >
-        <AppRowContext
-          {app}
-          align="left"
-          on:open={() => {
-            opened = app.appId
-          }}
-          on:close={() => {
-            opened = null
-          }}
-        />
+        {#if sdk.users.isBuilder($auth.user, app?.devId)}
+          <AppRowContext
+            {app}
+            align="left"
+            on:open={() => {
+              opened = app.appId
+            }}
+            on:close={() => {
+              opened = null
+            }}
+          />
+        {/if}
       </NavItem>
     {/each}
   </div>
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 3c2fb2046f..47cc08c738 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -51,6 +51,8 @@ import {
   CreateAppRequest,
   FetchAppDefinitionResponse,
   FetchAppPackageResponse,
+  DuplicateAppRequest,
+  DuplicateAppResponse,
 } from "@budibase/types"
 import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
 import sdk from "../../sdk"
@@ -378,7 +380,7 @@ async function creationEvents(request: any, app: App) {
       creationFns.push(a => events.app.fileImported(a))
     }
     // from server file path
-    else if (request.body.file && request.duplicate) {
+    else if (request.body.file) {
       // explicitly pass in the newly created app id
       creationFns.push(a => events.app.duplicated(a, app.appId))
     }
@@ -407,7 +409,7 @@ async function appPostCreate(ctx: UserCtx, app: App) {
 
   await creationEvents(ctx.request, app)
 
-  // app import & template creation
+  // app import, template creation and duplication
   if (ctx.request.body.useTemplate === "true") {
     const { rows } = await getUniqueRows([app.appId])
     const rowCount = rows ? rows.length : 0
@@ -436,7 +438,7 @@ async function appPostCreate(ctx: UserCtx, app: App) {
   }
 }
 
-export async function create(ctx: UserCtx) {
+export async function create(ctx: UserCtx<CreateAppRequest, App>) {
   const newApplication = await quotas.addApp(() => performAppCreate(ctx))
   await appPostCreate(ctx, newApplication)
   await cache.bustCache(cache.CacheKey.CHECKLIST)
@@ -645,7 +647,9 @@ export async function importToApp(ctx: UserCtx) {
  * Create a copy of the latest dev application.
  * Performs an export of the app, then imports from the export dir path
  */
-export async function duplicateApp(ctx: UserCtx) {
+export async function duplicateApp(
+  ctx: UserCtx<DuplicateAppRequest, DuplicateAppResponse>
+) {
   const { name: appName, url: possibleUrl } = ctx.request.body
   const { appId: sourceAppId } = ctx.params
   const [app] = await dbCore.getAppsByIDs([sourceAppId])
@@ -665,24 +669,28 @@ export async function duplicateApp(ctx: UserCtx) {
     tar: false,
   })
 
-  // Build a create request that triggers an import from the export path above.
-  const createReq: any = {
-    request: {
-      body: {
-        name: appName,
-        url: possibleUrl,
-        useTemplate: "true",
-        file: {
-          path: tmpPath,
-        },
-      },
-      // Mark the create as a duplicate to kick off the correct event.
-      duplicate: true,
+  const createRequestBody: CreateAppRequest = {
+    name: appName,
+    url: possibleUrl,
+    useTemplate: "true",
+    // The app export path
+    file: {
+      path: tmpPath,
     },
   }
 
-  await create(createReq)
-  const { body: newApplication } = createReq
+  // Build a new request
+  const createRequest = {
+    roleId: ctx.roleId,
+    user: ctx.user,
+    request: {
+      body: createRequestBody,
+    },
+  } as UserCtx<CreateAppRequest, App>
+
+  // Build the new application
+  await create(createRequest)
+  const { body: newApplication } = createRequest
 
   if (!newApplication) {
     ctx.throw(500, "There was a problem duplicating the application")
diff --git a/packages/server/src/api/routes/application.ts b/packages/server/src/api/routes/application.ts
index a065a22524..07db85451a 100644
--- a/packages/server/src/api/routes/application.ts
+++ b/packages/server/src/api/routes/application.ts
@@ -55,12 +55,12 @@ router
   )
   .delete(
     "/api/applications/:appId",
-    authorized(permissions.GLOBAL_BUILDER),
+    authorized(permissions.BUILDER),
     controller.destroy
   )
   .post(
     "/api/applications/:appId/duplicate",
-    authorized(permissions.GLOBAL_BUILDER),
+    authorized(permissions.BUILDER),
     controller.duplicateApp
   )
   .post(
diff --git a/packages/server/src/api/routes/tests/application.spec.ts b/packages/server/src/api/routes/tests/application.spec.ts
index 6093a29284..7823bf4bc2 100644
--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@@ -95,40 +95,13 @@ describe("/applications", () => {
     })
 
     it("should reject with a known name", async () => {
-      let createError
-
-      const app = config.getApp()
-      expect(app).toBeDefined()
-      try {
-        await config.createApp(app?.name!)
-      } catch (err: any) {
-        createError = err
-        // Must be reset back to its original value or it breaks all
-        // subsequent tests
-        config.appId = app?.appId!
-      }
-
-      expect(createError).toBeDefined()
-      expect(createError.message).toEqual(
-        "Error 400 - App name is already in use."
-      )
+      await config.api.application.create({ name: app.name }, { status: 400 })
     })
 
     it("should reject with a known url", async () => {
-      let createError
-
-      const app = config.getApp()
-      expect(app).toBeDefined()
-      try {
-        await config.createApp("made up", app?.url!)
-      } catch (err: any) {
-        createError = err
-        config.appId = app?.appId!
-      }
-
-      expect(createError).toBeDefined()
-      expect(createError.message).toEqual(
-        "Error 400 - App URL is already in use."
+      await config.api.application.create(
+        { name: "made up", url: app?.url! },
+        { status: 400 }
       )
     })
   })
@@ -268,73 +241,60 @@ describe("/applications", () => {
 
   describe("POST /api/applications/:appId/duplicate", () => {
     it("should duplicate an existing app", async () => {
-      await config.createApp("to-dupe")
-      const sourceAppId = config.getProdAppId()
-
-      const resp = await config.duplicateApp(sourceAppId, {
-        name: "to-dupe copy",
-        url: "/to-dupe-copy",
-      })
+      const resp = await config.api.application.duplicateApp(
+        app.appId,
+        {
+          name: "to-dupe copy",
+          url: "/to-dupe-copy",
+        },
+        {
+          status: 200,
+        }
+      )
 
       expect(events.app.duplicated).toBeCalled()
       expect(resp.duplicateAppId).toBeDefined()
-      expect(resp.sourceAppId).toEqual(sourceAppId)
-      expect(resp.duplicateAppId).not.toEqual(sourceAppId)
+      expect(resp.sourceAppId).toEqual(app.appId)
+      expect(resp.duplicateAppId).not.toEqual(app.appId)
     })
 
     it("should reject an unknown app id with a 404", async () => {
-      let dupeError
-      try {
-        await config.duplicateApp("app_fake", {
-          name: "to-dupe copy",
-          url: "/to-dupe-copy",
-        })
-      } catch (err: any) {
-        dupeError = err
-      }
-
-      expect(dupeError).toBeDefined()
-      expect(dupeError.message).toEqual("Error 404 - Source app not found")
+      await config.api.application.duplicateApp(
+        app.appId.slice(0, -1) + "a",
+        {
+          name: "to-dupe 123",
+          url: "/to-dupe-123",
+        },
+        {
+          status: 404,
+        }
+      )
     })
 
     it("should reject with a known name", async () => {
-      await config.createApp("known name")
-      const sourceAppId = config.getProdAppId()
-
-      let dupeError
-      try {
-        await config.duplicateApp(sourceAppId, {
-          name: "known name",
+      const resp = await config.api.application.duplicateApp(
+        app.appId,
+        {
+          name: app.name,
           url: "/known-name",
-        })
-      } catch (err: any) {
-        dupeError = err
-      }
-
-      expect(dupeError).toBeDefined()
-      expect(dupeError.message).toEqual(
-        "Error 400 - App name is already in use."
+        },
+        { status: 400 }
       )
+
+      expect(resp.message).toEqual("App name is already in use.")
     })
 
     it("should reject with a known url", async () => {
-      await config.createApp("known-url")
-      const sourceAppId = config.getProdAppId()
-
-      let dupeError
-      try {
-        await config.duplicateApp(sourceAppId, {
+      const resp = await config.api.application.duplicateApp(
+        app.appId,
+        {
           name: "this is fine",
-          url: "/known-url",
-        })
-      } catch (err: any) {
-        dupeError = err
-      }
-
-      expect(dupeError).toBeDefined()
-      expect(dupeError.message).toEqual(
-        "Error 400 - App URL is already in use."
+          url: app.url,
+        },
+        { status: 400 }
       )
+
+      expect(resp.message).toEqual("App URL is already in use.")
     })
   })
 
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index 70b29cf075..a0e1ecdc68 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -590,16 +590,6 @@ export default class TestConfiguration {
     })
   }
 
-  async duplicateApp(appId: string, fields: object) {
-    return context.doInTenant(
-      this.tenantId!,
-      async () =>
-        await this._req(appController.duplicateApp, fields, {
-          appId,
-        })
-    )
-  }
-
   async publish() {
     await this._req(deployController.publishApp)
     // @ts-ignore
diff --git a/packages/server/src/tests/utilities/api/application.ts b/packages/server/src/tests/utilities/api/application.ts
index da3d7cefd8..d28df223b5 100644
--- a/packages/server/src/tests/utilities/api/application.ts
+++ b/packages/server/src/tests/utilities/api/application.ts
@@ -4,6 +4,7 @@ import {
   type CreateAppRequest,
   type FetchAppDefinitionResponse,
   type FetchAppPackageResponse,
+  DuplicateAppResponse,
 } from "@budibase/types"
 import { Expectations, TestAPI } from "./base"
 import { AppStatus } from "../../../db/utils"
@@ -70,6 +71,22 @@ export class ApplicationAPI extends TestAPI {
     })
   }
 
+  duplicateApp = async (
+    appId: string,
+    fields: object,
+    expectations?: Expectations
+  ): Promise<DuplicateAppResponse> => {
+    let headers = {
+      ...this.config.defaultHeaders(),
+      [constants.Header.APP_ID]: appId,
+    }
+    return this._post(`/api/applications/${appId}/duplicate`, {
+      headers,
+      fields,
+      expectations,
+    })
+  }
+
   getDefinition = async (
     appId: string,
     expectations?: Expectations
diff --git a/packages/types/src/api/web/application.ts b/packages/types/src/api/web/application.ts
index d48264a6da..b77e81880b 100644
--- a/packages/types/src/api/web/application.ts
+++ b/packages/types/src/api/web/application.ts
@@ -11,7 +11,18 @@ export interface CreateAppRequest {
   includeSampleData?: boolean
   encryptionPassword?: string
   templateString?: string
-  file?: any
+  file?: { path: string }
+}
+
+export interface DuplicateAppRequest {
+  name: string
+  url?: string
+}
+
+export interface DuplicateAppResponse {
+  duplicateAppId: string
+  sourceAppId: string
+  message: string
 }
 
 export interface FetchAppDefinitionResponse {

From 1fc4dbfd355ec75e1ec01d76a6198441c871b1b6 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 5 Mar 2024 16:35:38 +0000
Subject: [PATCH 075/148] Lint

---
 packages/builder/src/components/start/AppRowContext.svelte      | 2 +-
 .../src/pages/builder/app/[application]/settings/_layout.svelte | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/start/AppRowContext.svelte b/packages/builder/src/components/start/AppRowContext.svelte
index f7986bcfa5..2533294274 100644
--- a/packages/builder/src/components/start/AppRowContext.svelte
+++ b/packages/builder/src/components/start/AppRowContext.svelte
@@ -4,7 +4,7 @@
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
   import ExportAppModal from "./ExportAppModal.svelte"
   import DuplicateAppModal from "./DuplicateAppModal.svelte"
-  import { auth, licensing } from "stores/portal"
+  import { licensing } from "stores/portal"
 
   export let app
   export let align = "right"
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 2e90faf3a9..67befddcb9 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -4,7 +4,6 @@
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
   import { isOnlyUser, appStore } from "stores/builder"
-  import { auth } from "stores/portal"
 
   let deleteModal
 </script>

From 65ca394f61b7a09935a1f013dfb80e48aa1e7470 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Mar 2024 16:56:55 +0000
Subject: [PATCH 076/148] Add snippets panel

---
 .../common/bindings/SnippetSidePanel.svelte   | 186 ++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 packages/builder/src/components/common/bindings/SnippetSidePanel.svelte

diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
new file mode 100644
index 0000000000..6a62e7a318
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -0,0 +1,186 @@
+<script>
+  import { Input, Layout, Icon, Popover } from "@budibase/bbui"
+
+  export let addSnippet
+  export let snippets
+
+  let search = ""
+  let searching = false
+  let popover
+  let popoverAnchor
+  let hoveredSnippet
+  let hideTimeout
+
+  snippets = [
+    {
+      name: "Square",
+      code: `
+      return function(num) {
+        return num * num
+      }
+    `,
+    },
+    {
+      name: "HelloWorld",
+      code: `
+      return "Hello, world!"
+    `,
+    },
+  ]
+
+  $: filteredSnippets = getFilteredSnippets(snippets, search)
+
+  const getFilteredSnippets = (snippets, search) => {
+    if (!snippets?.length) {
+      return []
+    }
+    if (!search?.length) {
+      return snippets
+    }
+    return snippets.filter(snippet =>
+      snippet.name.toLowerCase().includes(search.toLowerCase())
+    )
+  }
+
+  const showSnippet = (snippet, target) => {
+    stopHidingPopover()
+    popoverAnchor = target
+    hoveredSnippet = snippet
+    popover.show()
+  }
+
+  const hidePopover = () => {
+    hideTimeout = setTimeout(() => {
+      popover.hide()
+      popoverAnchor = null
+      hoveredSnippet = null
+      hideTimeout = null
+    }, 100)
+  }
+
+  const stopHidingPopover = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout)
+      hideTimeout = null
+    }
+  }
+
+  const startSearching = () => {
+    searching = true
+    search = ""
+  }
+
+  const stopSearching = () => {
+    searching = false
+    search = ""
+  }
+
+  const openSnippetModal = () => {}
+</script>
+
+<Popover
+  align="left-outside"
+  bind:this={popover}
+  anchor={popoverAnchor}
+  minWidth={0}
+  maxWidth={480}
+  maxHeight={480}
+  dismissible={false}
+  on:mouseenter={stopHidingPopover}
+  on:mouseleave={hidePopover}
+>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+  <pre class="snippet-popover">{@html hoveredSnippet.code}</pre>
+</Popover>
+
+<div class="snippet-side-panel">
+  <Layout noPadding gap="S">
+    <div class="header">
+      {#if searching}
+        <div class="search-input">
+          <Input
+            placeholder="Search for snippets"
+            autocomplete="off"
+            bind:value={search}
+          />
+        </div>
+        <Icon size="S" name="Close" hoverable on:click={stopSearching} />
+      {:else}
+        <div class="title">Snippets</div>
+        <Icon size="S" name="Search" hoverable on:click={startSearching} />
+        <Icon size="S" name="Add" hoverable on:click={openSnippetModal} />
+      {/if}
+    </div>
+
+    <div class="snippet-list">
+      {#each filteredSnippets as snippet}
+        <div class="snippet">
+          <div
+            class="snippet-name"
+            on:mouseenter={e => showSnippet(snippet, e.target)}
+            on:mouseleave={hidePopover}
+            on:click={() => addSnippet(snippet)}
+          >
+            {snippet.name}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </Layout>
+</div>
+
+<style>
+  .snippet-side-panel {
+    border-left: var(--border-light);
+    height: 100%;
+    overflow: auto;
+  }
+
+  /* Header */
+  .header {
+    height: 53px;
+    padding: 0 var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: var(--border-light);
+    position: sticky;
+    top: 0;
+    gap: var(--spacing-m);
+    background: var(--background);
+    z-index: 1;
+  }
+  .header :global(input) {
+    border: none;
+    border-radius: 0;
+    background: none;
+    padding: 0;
+  }
+  .search-input {
+    flex: 1;
+  }
+
+  /* List */
+  .snippet-list {
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .snippet {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
+    word-wrap: break-word;
+  }
+
+  /* Popover */
+  .snippet-popover {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    white-space: pre;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>

From 5b3280832cadc4c480b6f5680f6189b6c848fe32 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Mar 2024 18:38:48 +0000
Subject: [PATCH 077/148] Improve logic around swapping binding panel tabs

---
 .../common/CodeEditor/CodeEditor.svelte       | 51 +++++++-----
 .../common/bindings/BindingPanel.svelte       | 56 ++++++++++---
 .../common/bindings/SnippetSidePanel.svelte   | 81 +++++++++++++------
 .../src/components/common/bindings/utils.js   |  9 +++
 .../src/helpers/javascript.js                 | 14 ----
 5 files changed, 141 insertions(+), 70 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 88661467be..90188d3094 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -40,20 +40,20 @@
     indentMore,
     indentLess,
   } from "@codemirror/commands"
-  import { Compartment } from "@codemirror/state"
+  import { Compartment, EditorState } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
   import { EditorModes } from "./"
   import { themeStore } from "stores/portal"
 
   export let label
   export let completions = []
-  export let resize = "none"
   export let mode = EditorModes.Handlebars
   export let value = ""
   export let placeholder = null
   export let autocompleteEnabled = true
   export let autofocus = false
   export let jsBindingWrapping = true
+  export let readonly = false
 
   // Export a function to expose caret position
   export const getCaretPosition = () => {
@@ -143,32 +143,21 @@
   const buildBaseExtensions = () => {
     return [
       ...(mode.name === "handlebars" ? [plugin] : []),
-      history(),
       drawSelection(),
       dropCursor(),
       bracketMatching(),
       closeBrackets(),
-      highlightActiveLine(),
       syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }),
-      highlightActiveLineGutter(),
       highlightSpecialChars(),
-      lineNumbers(),
-      foldGutter(),
       EditorView.lineWrapping,
-      EditorView.updateListener.of(v => {
-        const docStr = v.state.doc?.toString()
-        if (docStr === value) {
-          return
-        }
-        dispatch("change", docStr)
-      }),
-      keymap.of(buildKeymap()),
       themeConfig.of([...(isDark ? [oneDark] : [])]),
     ]
   }
 
+  // None of this is reactive, but it never has been, so we just assume most
+  // config flags aren't changed at runtime
   const buildExtensions = base => {
-    const complete = [...base]
+    let complete = [...base]
 
     if (autocompleteEnabled) {
       complete.push(
@@ -210,12 +199,36 @@
 
     if (mode.name === "javascript") {
       complete.push(javascript())
-      complete.push(highlightWhitespace())
+      if (!readonly) {
+        complete.push(highlightWhitespace())
+      }
     }
 
     if (placeholder) {
       complete.push(placeholderFn(placeholder))
     }
+
+    if (readonly) {
+      complete.push(EditorState.readOnly.of(true))
+    } else {
+      complete = [
+        ...complete,
+        history(),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        lineNumbers(),
+        foldGutter(),
+        keymap.of(buildKeymap()),
+        EditorView.updateListener.of(v => {
+          const docStr = v.state.doc?.toString()
+          if (docStr === value) {
+            return
+          }
+          dispatch("change", docStr)
+        }),
+      ]
+    }
+
     return complete
   }
 
@@ -301,7 +314,6 @@
 
   /* Active line */
   .code-editor :global(.cm-line) {
-    height: 16px;
     padding: 0 var(--spacing-s);
     color: var(--spectrum-alias-text-color);
   }
@@ -319,6 +331,9 @@
     background: var(--spectrum-global-color-gray-100) !important;
     z-index: -2;
   }
+  .code-editor :global(.cm-highlightSpace:before) {
+    color: var(--spectrum-global-color-gray-500);
+  }
 
   /* Code selection */
   .code-editor :global(.cm-selectionBackground) {
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index b40ce1aa6a..8951ba1207 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -25,6 +25,7 @@
   } from "../CodeEditor"
   import BindingSidePanel from "./BindingSidePanel.svelte"
   import EvaluationSidePanel from "./EvaluationSidePanel.svelte"
+  import SnippetSidePanel from "./SnippetSidePanel.svelte"
   import { BindingHelpers } from "./utils"
   import formatHighlight from "json-format-highlight"
   import { capitalise } from "helpers"
@@ -38,6 +39,7 @@
   export let valid
   export let allowJS = false
   export let allowHelpers = true
+  export let allowSnippets = true
   export let context = null
   export let autofocusEditor = false
 
@@ -49,6 +51,7 @@
   const SidePanels = {
     Bindings: "FlashOn",
     Evaluation: "Play",
+    Snippets: "Code",
   }
 
   let initialValueJS = value?.startsWith?.("{{ js ")
@@ -64,10 +67,8 @@
   let evaluating = false
 
   $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
-  $: editorTabs = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
-  $: sideTabs = context
-    ? [SidePanels.Evaluation, SidePanels.Bindings]
-    : [SidePanels.Bindings]
+  $: editorModeOptions = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
+  $: sidePanelOptions = getSidePanelOptions(context, allowSnippets, mode)
   $: enrichedBindings = enrichBindings(bindings, context)
   $: usingJS = mode === Modes.JavaScript
   $: editorMode =
@@ -77,6 +78,22 @@
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: requestUpdateEvaluation(runtimeExpression, context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
+  $: {
+    if (!sidePanelOptions.includes(sidePanel)) {
+      sidePanel = SidePanels.Bindings
+    }
+  }
+
+  const getSidePanelOptions = (context, allowSnippets, mode) => {
+    let options = [SidePanels.Bindings]
+    if (context) {
+      options.unshift(SidePanels.Evaluation)
+    }
+    if (allowSnippets && mode === Modes.JavaScript) {
+      options.push(SidePanels.Snippets)
+    }
+    return options
+  }
 
   const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
     expressionResult = processStringSync(expression || "", context)
@@ -135,11 +152,22 @@
     bindingHelpers.onSelectBinding(js ? jsValue : hbsValue, binding, { js })
   }
 
+  const onSelectSnippet = snippet => {
+    bindingHelpers.onSelectSnippet(jsValue, snippet)
+  }
+
   const changeMode = newMode => {
     if (targetMode || newMode === mode) {
       return
     }
-    if (editorValue) {
+
+    // Get the raw editor value to see if we are abandoning changes
+    let rawValue = editorValue
+    if (mode === Modes.JavaScript) {
+      rawValue = decodeJSBinding(rawValue)
+    }
+
+    if (rawValue?.length) {
       targetMode = newMode
     } else {
       mode = newMode
@@ -178,26 +206,26 @@
     <div class="main">
       <div class="tabs">
         <div class="editor-tabs">
-          {#each editorTabs as tab}
+          {#each editorModeOptions as editorMode}
             <ActionButton
               size="M"
               quiet
-              selected={mode === tab}
-              on:click={() => changeMode(tab)}
+              selected={mode === editorMode}
+              on:click={() => changeMode(editorMode)}
             >
-              {capitalise(tab)}
+              {capitalise(editorMode)}
             </ActionButton>
           {/each}
         </div>
         <div class="side-tabs">
-          {#each sideTabs as tab}
+          {#each sidePanelOptions as panel}
             <ActionButton
               size="M"
               quiet
-              selected={sidePanel === tab}
-              on:click={() => changeSidePanel(tab)}
+              selected={sidePanel === panel}
+              on:click={() => changeSidePanel(panel)}
             >
-              <Icon name={tab} size="S" />
+              <Icon name={panel} size="S" />
             </ActionButton>
           {/each}
           {#if drawerContext && get(drawerContext.resizable)}
@@ -287,6 +315,8 @@
           {evaluating}
           expression={editorValue}
         />
+      {:else if sidePanel === SidePanels.Snippets}
+        <SnippetSidePanel addSnippet={onSelectSnippet} />
       {/if}
     </div>
   </div>
diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index 6a62e7a318..0539c4a8f5 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -1,5 +1,7 @@
 <script>
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import { EditorModes } from "components/common/CodeEditor"
 
   export let addSnippet
   export let snippets
@@ -15,16 +17,36 @@
     {
       name: "Square",
       code: `
-      return function(num) {
-        return num * num
-      }
-    `,
+        return function(num) {
+          return num * num
+        }
+      `,
     },
     {
       name: "HelloWorld",
       code: `
-      return "Hello, world!"
-    `,
+        return "Hello, world!"
+      `,
+    },
+    {
+      name: "Colorful",
+      code: `
+        let a = null
+        let b = "asdasd"
+        let c = 123123
+        let d = undefined
+        let e = [1, 2, 3]
+        let f = { foo: "bar" }
+        let g = Math.round(1.234)
+        if (a === b) {
+          return c ?? e
+        }
+        return d || f
+        // comment
+        let h = 1 + 2 + 3 * 3
+        let i = true
+        let j = false
+      `,
     },
   ]
 
@@ -89,8 +111,15 @@
   on:mouseenter={stopHidingPopover}
   on:mouseleave={hidePopover}
 >
-  <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-  <pre class="snippet-popover">{@html hoveredSnippet.code}</pre>
+  <div class="snippet-popover">
+    {#key hoveredSnippet}
+      <CodeEditor
+        value={hoveredSnippet.code.trim()}
+        mode={EditorModes.JS}
+        readonly
+      />
+    {/key}
+  </div>
 </Popover>
 
 <div class="snippet-side-panel">
@@ -114,15 +143,13 @@
 
     <div class="snippet-list">
       {#each filteredSnippets as snippet}
-        <div class="snippet">
-          <div
-            class="snippet-name"
-            on:mouseenter={e => showSnippet(snippet, e.target)}
-            on:mouseleave={hidePopover}
-            on:click={() => addSnippet(snippet)}
-          >
-            {snippet.name}
-          </div>
+        <div
+          class="snippet"
+          on:mouseenter={e => showSnippet(snippet, e.target)}
+          on:mouseleave={hidePopover}
+          on:click={() => addSnippet(snippet)}
+        >
+          {snippet.name}
         </div>
       {/each}
     </div>
@@ -155,14 +182,18 @@
     background: none;
     padding: 0;
   }
-  .search-input {
-    flex: 1;
+  .search-input,
+  .title {
+    flex: 1 1 auto;
   }
 
   /* List */
   .snippet-list {
     padding: 0 var(--spacing-l);
     padding-bottom: var(--spacing-l);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
   }
   .snippet {
     font-size: var(--font-size-s);
@@ -173,14 +204,14 @@
       border-color 130ms ease-out;
     word-wrap: break-word;
   }
+  .snippet:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    cursor: pointer;
+  }
 
   /* Popover */
   .snippet-popover {
-    padding: 0;
-    margin: 0;
-    font-size: 12px;
-    white-space: pre;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    width: 400px;
   }
 </style>
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index a086cd0394..4c95991887 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -38,4 +38,13 @@ export class BindingHelpers {
       this.insertAtPos({ start, end, value: insertVal })
     }
   }
+
+  // Adds a JS/HBS helper to the expression
+  onSelectSnippet(value, snippet) {
+    const pos = this.getCaretPosition()
+    const { start, end } = pos
+    const jsVal = decodeJSBinding(value)
+    const insertVal = jsInsert(jsVal, start, end, `snippets.${snippet.name}`)
+    this.insertAtPos({ start, end, value: insertVal })
+  }
 }
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 7f3693c1c4..3a45486129 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -41,22 +41,8 @@ const getContextValue = (path, context) => {
   return data
 }
 
-const snippets = {
-  Square: `
-    return function(num) {
-      return num * num
-    }
-  `,
-  HelloWorld: `
-   return "Hello, world!"
-  `,
-}
-
 // Evaluates JS code against a certain context
 module.exports.processJS = (handlebars, context) => {
-  // for testing
-  context.snippets = snippets
-
   if (!isJSAllowed() || (isBackendService() && !runJS)) {
     throw new Error("JS disabled in environment.")
   }

From 706f9b5d4abae8bf6f991c5c1180997b329a36e9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Mar 2024 19:11:34 +0000
Subject: [PATCH 078/148] Update snippets to be an array

---
 .../common/bindings/BindingPanel.svelte       | 35 ++++-----
 .../common/bindings/ClientBindingPanel.svelte |  3 +-
 .../common/bindings/ServerBindingPanel.svelte |  2 +
 .../common/bindings/SnippetSidePanel.svelte   | 37 ----------
 .../src/components/common/bindings/utils.js   |  6 +-
 packages/builder/src/stores/builder/index.js  |  3 +
 .../builder/src/stores/builder/snippets.js    | 71 +++++++++++++++++++
 .../builder/src/stores/builder/websocket.js   |  2 +
 .../jsRunner/bundles/snippets.ivm.bundle.js   |  4 +-
 .../server/src/jsRunner/bundles/snippets.ts   |  6 +-
 .../src/helpers/javascript.js                 |  4 +-
 11 files changed, 110 insertions(+), 63 deletions(-)
 create mode 100644 packages/builder/src/stores/builder/snippets.js

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 8951ba1207..9efab620af 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -41,6 +41,7 @@
   export let allowHelpers = true
   export let allowSnippets = true
   export let context = null
+  export let snippets = null
   export let autofocusEditor = false
 
   const drawerContext = getContext("drawer")
@@ -69,14 +70,14 @@
   $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
   $: editorModeOptions = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
   $: sidePanelOptions = getSidePanelOptions(context, allowSnippets, mode)
-  $: enrichedBindings = enrichBindings(bindings, context)
+  $: enrichedBindings = enrichBindings(bindings, context, snippets)
   $: usingJS = mode === Modes.JavaScript
   $: editorMode =
     mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
   $: editorValue = editorMode === EditorModes.JS ? jsValue : hbsValue
   $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
-  $: requestUpdateEvaluation(runtimeExpression, context)
+  $: requestEval(runtimeExpression, context, snippets)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
   $: {
     if (!sidePanelOptions.includes(sidePanel)) {
@@ -95,20 +96,23 @@
     return options
   }
 
-  const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
-    expressionResult = processStringSync(expression || "", context)
+  const debouncedEval = Utils.debounce((expression, context, snippets) => {
+    expressionResult = processStringSync(expression || "", {
+      ...context,
+      snippets,
+    })
     evaluating = false
   }, 260)
 
-  const requestUpdateEvaluation = (expression, context) => {
+  const requestEval = (expression, context, snippets) => {
     evaluating = true
-    debouncedUpdateEvaluation(expression, context)
+    debouncedEval(expression, context, snippets)
   }
 
-  const getBindingValue = (binding, context) => {
+  const getBindingValue = (binding, context, snippets) => {
     const js = `return $("${binding.runtimeBinding}")`
     const hbs = encodeJSBinding(js)
-    const res = processStringSync(hbs, context)
+    const res = processStringSync(hbs, { ...context, snippets })
     return JSON.stringify(res, null, 2)
   }
 
@@ -123,9 +127,9 @@
     })
   }
 
-  const enrichBindings = (bindings, context) => {
+  const enrichBindings = (bindings, context, snippets) => {
     return bindings.map(binding => {
-      const value = getBindingValue(binding, context)
+      const value = getBindingValue(binding, context, snippets)
       return {
         ...binding,
         value,
@@ -139,7 +143,7 @@
     valid = isValid(runtimeExpression)
     if (valid) {
       dispatch("change", val)
-      requestUpdateEvaluation(runtimeExpression, context)
+      requestEval(runtimeExpression, context, snippets)
     }
   }
 
@@ -152,10 +156,6 @@
     bindingHelpers.onSelectBinding(js ? jsValue : hbsValue, binding, { js })
   }
 
-  const onSelectSnippet = snippet => {
-    bindingHelpers.onSelectSnippet(jsValue, snippet)
-  }
-
   const changeMode = newMode => {
     if (targetMode || newMode === mode) {
       return
@@ -316,7 +316,10 @@
           expression={editorValue}
         />
       {:else if sidePanel === SidePanels.Snippets}
-        <SnippetSidePanel addSnippet={onSelectSnippet} />
+        <SnippetSidePanel
+          addSnippet={snippet => bindingHelpers.onSelectSnippet(snippet)}
+          {snippets}
+        />
       {/if}
     </div>
   </div>
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 97cb097a51..d3e80cf696 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
-  import { previewStore } from "stores/builder"
+  import { previewStore, snippetStore } from "stores/builder"
   import { onMount } from "svelte"
 
   export let bindings = []
@@ -30,6 +30,7 @@
   bind:valid
   bindings={enrichedBindings}
   context={$previewStore.selectedComponentContext}
+  snippets={$snippetStore}
   {value}
   {allowJS}
   {allowHelpers}
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index fdc8254a18..b4d31bd74a 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,5 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
+  import { snippetStore } from "stores/builder"
 
   export let bindings = []
   export let valid
@@ -22,6 +23,7 @@
 <BindingPanel
   bind:valid
   bindings={enrichedBindings}
+  snippets={$snippetStore}
   {value}
   {allowJS}
   {context}
diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index 0539c4a8f5..c1f3ca1531 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -13,43 +13,6 @@
   let hoveredSnippet
   let hideTimeout
 
-  snippets = [
-    {
-      name: "Square",
-      code: `
-        return function(num) {
-          return num * num
-        }
-      `,
-    },
-    {
-      name: "HelloWorld",
-      code: `
-        return "Hello, world!"
-      `,
-    },
-    {
-      name: "Colorful",
-      code: `
-        let a = null
-        let b = "asdasd"
-        let c = 123123
-        let d = undefined
-        let e = [1, 2, 3]
-        let f = { foo: "bar" }
-        let g = Math.round(1.234)
-        if (a === b) {
-          return c ?? e
-        }
-        return d || f
-        // comment
-        let h = 1 + 2 + 3 * 3
-        let i = true
-        let j = false
-      `,
-    },
-  ]
-
   $: filteredSnippets = getFilteredSnippets(snippets, search)
 
   const getFilteredSnippets = (snippets, search) => {
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index 4c95991887..4ff99aa6bb 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -40,11 +40,9 @@ export class BindingHelpers {
   }
 
   // Adds a JS/HBS helper to the expression
-  onSelectSnippet(value, snippet) {
+  onSelectSnippet(snippet) {
     const pos = this.getCaretPosition()
     const { start, end } = pos
-    const jsVal = decodeJSBinding(value)
-    const insertVal = jsInsert(jsVal, start, end, `snippets.${snippet.name}`)
-    this.insertAtPos({ start, end, value: insertVal })
+    this.insertAtPos({ start, end, value: `snippets.${snippet.name}` })
   }
 }
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index bac9fb8826..52561c09f4 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -18,6 +18,7 @@ import {
 } from "./automations.js"
 import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
+import { snippetStore } from "./snippets"
 
 // Backend
 import { tables } from "./tables"
@@ -62,6 +63,7 @@ export {
   queries,
   flags,
   hoverStore,
+  snippetStore,
 }
 
 export const reset = () => {
@@ -101,6 +103,7 @@ export const initialise = async pkg => {
   builderStore.init(application)
   navigationStore.syncAppNavigation(application?.navigation)
   themeStore.syncAppTheme(application)
+  snippetStore.syncMetadata(application)
   screenStore.syncAppScreens(pkg)
   layoutStore.syncAppLayouts(pkg)
   resetBuilderHistory()
diff --git a/packages/builder/src/stores/builder/snippets.js b/packages/builder/src/stores/builder/snippets.js
new file mode 100644
index 0000000000..2bac8ad994
--- /dev/null
+++ b/packages/builder/src/stores/builder/snippets.js
@@ -0,0 +1,71 @@
+import { writable } from "svelte/store"
+
+const EXAMPLE_SNIPPETS = [
+  {
+    name: "Square",
+    code: `
+        return function(num) {
+          return num * num
+        }
+      `,
+  },
+  {
+    name: "HelloWorld",
+    code: `
+        return "Hello, world!"
+      `,
+  },
+  {
+    name: "Colorful",
+    code: `
+        let a = null
+        let b = "asdasd"
+        let c = 123123
+        let d = undefined
+        let e = [1, 2, 3]
+        let f = { foo: "bar" }
+        let g = Math.round(1.234)
+        if (a === b) {
+          return c ?? e
+        }
+        return d || f
+        // comment
+        let h = 1 + 2 + 3 * 3
+        let i = true
+        let j = false
+      `,
+  },
+]
+
+const createSnippetStore = () => {
+  const store = writable(EXAMPLE_SNIPPETS)
+
+  const syncMetadata = metadata => {
+    store.set(metadata?.snippets || EXAMPLE_SNIPPETS)
+  }
+
+  const createSnippet = snippet => {
+    store.update(state => [...state, snippet])
+  }
+
+  const updateSnippet = updatedSnippet => {
+    store.update(state => [
+      ...state.filter(snippet => snippet.name !== updatedSnippet.name),
+      updatedSnippet,
+    ])
+  }
+
+  const deleteSnippet = snippetName => {
+    store.update(state => state.filter(snippet => snippet.name !== snippetName))
+  }
+
+  return {
+    ...store,
+    syncMetadata,
+    createSnippet,
+    updateSnippet,
+    deleteSnippet,
+  }
+}
+
+export const snippetStore = createSnippetStore()
diff --git a/packages/builder/src/stores/builder/websocket.js b/packages/builder/src/stores/builder/websocket.js
index bbdf7b6d63..71d9f852f7 100644
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/packages/builder/src/stores/builder/websocket.js
@@ -6,6 +6,7 @@ import {
   themeStore,
   navigationStore,
   deploymentStore,
+  snippetStore,
   datasources,
   tables,
 } from "stores/builder"
@@ -64,6 +65,7 @@ export const createBuilderWebsocket = appId => {
     appStore.syncMetadata(metadata)
     themeStore.syncMetadata(metadata)
     navigationStore.syncMetadata(metadata)
+    snippetStore.syncMetadata(metadata)
   })
   socket.onOther(
     BuilderSocketEvent.AppPublishChange,
diff --git a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
index e5bc2df6c6..fc49a121a4 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
+++ b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
@@ -1,3 +1,3 @@
-"use strict";var snippets=(()=>{var s=Object.create;var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var W=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),d=(e,r)=>{for(var n in r)p(e,n,{get:r[n],enumerable:!0})},o=(e,r,n,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of c(r))!m.call(e,t)&&t!==n&&p(e,t,{get:()=>r[t],enumerable:!(i=x(r,t))||i.enumerable});return e};var g=(e,r,n)=>(n=e!=null?s(l(e)):{},o(r||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e)),v=e=>o(p({},"__esModule",{value:!0}),e);var u=W((_,f)=>{f.exports.iifeWrapper=e=>`(function(){
+"use strict";var snippets=(()=>{var u=Object.create;var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),W=(e,n)=>{for(var r in n)i(e,r,{get:n[r],enumerable:!0})},o=(e,n,r,p)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of d(n))!x.call(e,t)&&t!==r&&i(e,t,{get:()=>n[t],enumerable:!(p=c(n,t))||p.enumerable});return e};var g=(e,n,r)=>(r=e!=null?u(m(e)):{},o(n||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),v=e=>o(i({},"__esModule",{value:!0}),e);var a=l((_,f)=>{f.exports.iifeWrapper=e=>`(function(){
 ${e}
-})();`});var y={};d(y,{default:()=>w});var a=g(u()),w=new Proxy({},{get:function(e,r){return[eval][0]((0,a.iifeWrapper)($("snippets")[r]))}});return v(y);})();
+})();`});var y={};W(y,{default:()=>w});var s=g(a()),w=new Proxy({},{get:function(e,n){let r=($("snippets")||[]).find(p=>p.name===n);return[eval][0]((0,s.iifeWrapper)(r.code))}});return v(y);})();
diff --git a/packages/server/src/jsRunner/bundles/snippets.ts b/packages/server/src/jsRunner/bundles/snippets.ts
index d45fe56ec0..861bacaec5 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ts
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -7,12 +7,14 @@ export default new Proxy(
   {
     get: function (_, name) {
       // Get snippet definitions from global context, get the correct snippet
-      // then eval the JS.
+      // then eval the JS. This will error if the snippet doesn't exist, but
+      // that's intended.
       // https://esbuild.github.io/content-types/#direct-eval for info on why
       // eval is being called this way.
       // @ts-ignore
       // eslint-disable-next-line no-undef
-      return [eval][0](iifeWrapper($("snippets")[name]))
+      const snippet = ($("snippets") || []).find(x => x.name === name)
+      return [eval][0](iifeWrapper(snippet.code))
     },
   }
 )
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 3a45486129..76ef19ef2e 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -63,7 +63,9 @@ module.exports.processJS = (handlebars, context) => {
         {},
         {
           get: function (_, name) {
-            return eval(iifeWrapper(context.snippets[name]))
+            // This will error if the snippet doesn't exist, but that's intended
+            const snippet = (context.snippets || []).find(x => x.name === name)
+            return eval(iifeWrapper(snippet.code))
           },
         }
       ),

From e3603a81d5098f2a4ca07becb4005301c1002537 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 6 Mar 2024 09:33:17 +0000
Subject: [PATCH 079/148] App favouriting

---
 packages/bbui/src/Icon/Icon.svelte            |  83 +++++-----
 packages/bbui/src/Tooltip/AbsTooltip.svelte   |   5 +
 packages/bbui/src/index.js                    |   2 +-
 .../src/components/common/NavHeader.svelte    |   4 +-
 .../src/components/common/NavItem.svelte      |   7 +-
 .../src/components/deploy/AppActions.svelte   |   8 +-
 .../src/components/deploy/DeleteModal.svelte  |   4 +-
 .../src/components/start/AppRow.svelte        |  58 ++++++-
 .../src/components/start/AppRowContext.svelte |  94 +++++++----
 .../components/start/ChooseIconModal.svelte   |   4 +-
 .../components/start/CreateAppModal.svelte    |   4 +-
 .../components/start/DuplicateAppModal.svelte |   6 +-
 .../components/start/UpdateAppModal.svelte    |   6 +-
 .../_components/BuilderSidePanel.svelte       |  11 +-
 .../builder/app/[application]/_layout.svelte  |   4 +-
 .../settings/automations/index.svelte         |   6 +-
 .../app/[application]/settings/embed.svelte   |   4 +-
 .../settings/exportImport.svelte              |   4 +-
 .../settings/name-and-url.svelte              |   4 +-
 .../src/pages/builder/apps/index.svelte       |  19 ++-
 .../src/pages/builder/portal/_layout.svelte   |   7 +-
 .../portal/account/auditLogs/index.svelte     |   4 +-
 .../portal/apps/FavouriteAppButton.svelte     |  29 ++++
 .../portal/apps/[appId]/_layout.svelte        |   4 +-
 .../builder/portal/apps/[appId]/index.svelte  | 103 ++++++++----
 .../apps/_components/PortalSideBar.svelte     |  96 ++++++-----
 .../pages/builder/portal/apps/_layout.svelte  |  11 +-
 .../pages/builder/portal/apps/create.svelte   |   4 +-
 .../pages/builder/portal/apps/index.svelte    |  96 +++++------
 .../portal/users/groups/[groupId].svelte      |  12 +-
 .../groups/_components/AppAddModal.svelte     |   6 +-
 .../portal/users/users/[userId].svelte        |  15 +-
 .../_components/AppsTableRenderer.svelte      |   4 +-
 .../src/stores/{builder => }/BudiStore.js     |   0
 packages/builder/src/stores/builder/app.js    |   2 +-
 .../builder/src/stores/builder/builder.js     |   2 +-
 .../builder/src/stores/builder/components.js  |   2 +-
 packages/builder/src/stores/builder/hover.js  |   2 +-
 .../builder/src/stores/builder/layouts.js     |   2 +-
 .../builder/src/stores/builder/navigation.js  |   2 +-
 .../builder/src/stores/builder/screens.js     |   2 +-
 .../builder/src/stores/builder/websocket.js   |   4 +-
 packages/builder/src/stores/portal/apps.js    | 153 ++++++++++++------
 packages/builder/src/stores/portal/index.js   |   2 +-
 packages/frontend-core/src/themes/nord.css    |   2 +
 packages/types/src/api/web/auth.ts            |   1 +
 packages/types/src/documents/global/user.ts   |   1 +
 .../worker/src/api/controllers/global/self.ts |  85 +++++++++-
 .../worker/src/api/routes/validation/users.ts |   1 +
 49 files changed, 658 insertions(+), 333 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
 rename packages/builder/src/stores/{builder => }/BudiStore.js (100%)

diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 275c339bf4..c7261ea74d 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -1,58 +1,53 @@
-<script context="module">
-  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
-</script>
-
 <script>
-  import Tooltip from "../Tooltip/Tooltip.svelte"
-  import { fade } from "svelte/transition"
+  import {
+    default as AbsTooltip,
+    TooltipPosition,
+    TooltipType,
+  } from "../Tooltip/AbsTooltip.svelte"
 
-  export let direction = "n"
   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
-
-  $: rotation = getRotation(direction)
-
-  let showTooltip = false
-
-  const getRotation = direction => {
-    return directions.indexOf(direction) * 45
-  }
+  export let tooltipPosition = TooltipPosition.Bottom
+  export let tooltipType = TooltipType.Default
+  export let tooltipColor
+  export let tooltipWrap = true
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  class="icon"
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:click={() => (showTooltip = false)}
+<AbsTooltip
+  text={tooltip}
+  type={tooltipType}
+  position={tooltipPosition}
+  color={tooltipColor}
+  noWrap={tooltipWrap}
 >
-  <svg
-    on:click
-    class:hoverable
-    class:disabled
-    class="spectrum-Icon spectrum-Icon--size{size}"
-    focusable="false"
-    aria-hidden={hidden}
-    aria-label={name}
-    style={`transform: rotate(${rotation}deg); ${
-      color ? `color: ${color};` : ""
-    }`}
-  >
-    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
-  </svg>
-  {#if tooltip && showTooltip}
-    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-      <Tooltip textWrapping direction="top" text={tooltip} />
-    </div>
-  {/if}
-</div>
+  <div class="icon">
+    <svg
+      on:click
+      class:hoverable
+      class:disabled
+      class="spectrum-Icon spectrum-Icon--size{size}"
+      focusable="false"
+      aria-hidden={hidden}
+      aria-label={name}
+      style={`${color ? `color: ${color};` : ""} ${
+        hoverColor
+          ? `--hover-color: ${hoverColor}`
+          : "--hover-color: var(--spectrum-alias-icon-color-selected-hover)"
+      }`}
+    >
+      <use
+        style="pointer-events: none;"
+        xlink:href="#spectrum-icon-18-{name}"
+      />
+    </svg>
+  </div>
+</AbsTooltip>
 
 <style>
   .icon {
@@ -66,7 +61,7 @@
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected-hover) !important;
+    color: var(--hover-color) !important;
     cursor: pointer;
   }
   svg.hoverable:active {
diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index d26c73d1c1..4d2399aaf8 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -24,6 +24,7 @@
   export let text = ""
   export let fixed = false
   export let color = null
+  export let noWrap = false
 
   let wrapper
   let hovered = false
@@ -105,6 +106,7 @@
   <Portal target=".spectrum">
     <span
       class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
+      class:noWrap
       style={`left:${left}px;top:${top}px;${tooltipStyle}`}
       transition:fade|local={{ duration: 130 }}
     >
@@ -118,6 +120,9 @@
   .abs-tooltip {
     display: contents;
   }
+  .spectrum-Tooltip.noWrap .spectrum-Tooltip-label {
+    width: max-content;
+  }
   .spectrum-Tooltip {
     position: absolute;
     z-index: 9999;
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index cda6b5acbf..d18c4d6910 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -19,7 +19,7 @@ export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
-export { default as Icon, directions } from "./Icon/Icon.svelte"
+export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
diff --git a/packages/builder/src/components/common/NavHeader.svelte b/packages/builder/src/components/common/NavHeader.svelte
index a163f354d2..2c67a3f9b3 100644
--- a/packages/builder/src/components/common/NavHeader.svelte
+++ b/packages/builder/src/components/common/NavHeader.svelte
@@ -59,7 +59,7 @@
     class="searchButton"
     class:hide={search}
   >
-    <Icon size="S" name="Search" />
+    <Icon size="S" name="Search" hoverable hoverColor="var(--ink)" />
   </div>
 
   <div
@@ -68,7 +68,7 @@
     class="addButton"
     class:rotate={search}
   >
-    <Icon name="Add" />
+    <Icon name="Add" hoverable hoverColor="var(--ink)" />
   </div>
 </div>
 
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 7180b149de..66b21e95a1 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -8,6 +8,7 @@
   export let iconTooltip
   export let withArrow = false
   export let withActions = true
+  export let showActions = false
   export let indentLevel = 0
   export let text
   export let border = true
@@ -68,10 +69,11 @@
   class:border
   class:selected
   class:withActions
+  class:showActions
+  class:actionsOpen={highlighted && withActions}
   class:scrollable
   class:highlighted
   class:selectedBy
-  class:actionsOpen={highlighted && withActions}
   on:dragend
   on:dragstart
   on:dragover
@@ -170,7 +172,8 @@
   }
   .nav-item:hover .actions,
   .hovering .actions,
-  .nav-item.withActions.actionsOpen .actions {
+  .nav-item.withActions.actionsOpen .actions,
+  .nav-item.withActions.showActions .actions {
     opacity: 1;
   }
   .nav-item-content {
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 86427ff761..f219a88a35 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -19,7 +19,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import analytics, { Events, EventSource } from "analytics"
   import { API } from "api"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import {
     previewStore,
     builderStore,
@@ -45,7 +45,7 @@
   let appActionPopoverAnchor
   let publishing = false
 
-  $: filteredApps = $apps.filter(app => app.devId === application)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
   $: latestDeployments = $deploymentStore
     .filter(deployment => deployment.status === "SUCCESS")
@@ -129,7 +129,7 @@
     }
     try {
       await API.unpublishApp(selectedApp.prodId)
-      await apps.load()
+      await appsStore.load()
       notifications.send("App unpublished", {
         type: "success",
         icon: "GlobeStrike",
@@ -141,7 +141,7 @@
 
   const completePublish = async () => {
     try {
-      await apps.load()
+      await appsStore.load()
       await deploymentStore.load()
     } catch (err) {
       notifications.error("Error refreshing app")
diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 26a13623b5..26ab498276 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -2,7 +2,7 @@
   import { Input, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { API } from "api"
 
   export let appId
@@ -36,7 +36,7 @@
     deleting = true
     try {
       await API.deleteApp(appId)
-      apps.load()
+      appsStore.load()
       notifications.success("App deleted successfully")
       onDeleteSuccess()
     } catch (err) {
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 60e073ca21..c12801d21f 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -6,10 +6,13 @@
   import { UserAvatars } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
   import AppRowContext from "./AppRowContext.svelte"
+  import FavouriteAppButton from "pages/builder/portal/apps/FavouriteAppButton.svelte"
 
   export let app
   export let lockedAction
 
+  let actionsOpen = false
+
   $: editing = app.sessions?.length
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
   $: unclickable = !isBuilder && !app.deployed
@@ -43,8 +46,10 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="app-row"
-  on:click={lockedAction || handleDefaultClick}
   class:unclickable
+  class:actionsOpen
+  class:favourite={app.favourite}
+  on:click={lockedAction || handleDefaultClick}
 >
   <div class="title">
     <div class="app-icon">
@@ -76,11 +81,28 @@
   </div>
 
   {#if isBuilder}
-    <div class="app-row-actions">
-      <Button size="S" secondary on:click={lockedAction || goToBuilder}>
-        Edit
-      </Button>
-      <AppRowContext {app} />
+    <div class="actions-wrap">
+      <div class="app-row-actions">
+        <div class="row-action">
+          <Button size="S" secondary on:click={lockedAction || goToBuilder}>
+            Edit
+          </Button>
+        </div>
+        <div class="row-action">
+          <AppRowContext
+            {app}
+            on:open={() => {
+              actionsOpen = true
+            }}
+            on:close={() => {
+              actionsOpen = false
+            }}
+          />
+        </div>
+      </div>
+      <div class="favourite-icon">
+        <FavouriteAppButton {app} noWrap />
+      </div>
     </div>
   {:else if app.deployed}
     <!-- this can happen if an app builder has app user access to an app -->
@@ -107,6 +129,16 @@
     border-color: var(--spectrum-global-color-gray-300);
   }
 
+  .app-row .favourite-icon {
+    display: none;
+  }
+
+  .app-row:hover .favourite-icon,
+  .app-row.favourite .favourite-icon,
+  .app-row.actionsOpen .favourite-icon {
+    display: flex;
+  }
+
   .updated {
     color: var(--spectrum-global-color-gray-700);
     display: flex;
@@ -142,11 +174,23 @@
   }
 
   .app-row-actions {
+    display: none;
+  }
+
+  .app-row:hover .app-row-actions,
+  .app-row.actionsOpen .app-row-actions {
     gap: var(--spacing-m);
-    display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
+    display: flex;
+  }
+
+  .actions-wrap {
+    gap: var(--spacing-m);
+    display: flex;
+    justify-content: flex-end;
+    min-height: var(--spectrum-alias-item-height-s);
   }
 
   .name {
diff --git a/packages/builder/src/components/start/AppRowContext.svelte b/packages/builder/src/components/start/AppRowContext.svelte
index 3d24aeb542..441e2bcc26 100644
--- a/packages/builder/src/components/start/AppRowContext.svelte
+++ b/packages/builder/src/components/start/AppRowContext.svelte
@@ -3,14 +3,68 @@
   import DeleteModal from "components/deploy/DeleteModal.svelte"
   import ExportAppModal from "./ExportAppModal.svelte"
   import DuplicateAppModal from "./DuplicateAppModal.svelte"
+  import { onMount } from "svelte"
 
   export let app
   export let align = "right"
+  export let options
 
   let deleteModal
   let exportModal
   let duplicateModal
   let exportPublishedVersion = false
+  let loaded = false
+
+  const getActions = app => {
+    if (!loaded) {
+      return []
+    }
+    return [
+      {
+        id: "duplicate",
+        icon: "Copy",
+        onClick: duplicateModal.show,
+        body: "Duplicate",
+      },
+      {
+        id: "exportDev",
+        icon: "Export",
+        onClick: () => {
+          exportPublishedVersion = false
+          exportModal.show()
+        },
+        body: "Export latest edited app",
+      },
+      {
+        id: "exportProd",
+        icon: "Export",
+        onClick: () => {
+          exportPublishedVersion = true
+          exportModal.show()
+        },
+        body: "Export latest published app",
+      },
+      {
+        id: "delete",
+        icon: "Delete",
+        onClick: deleteModal.show,
+        body: "Delete",
+      },
+    ].filter(action => {
+      if (action.id === "exportProd" && app.deployed !== true) {
+        return false
+      } else if (Array.isArray(options) && !options.includes(action.id)) {
+        return false
+      }
+      return true
+    })
+  }
+
+  $: actions = getActions(app, loaded)
+
+  onMount(() => {
+    loaded = true
+  })
 </script>
 
 <DeleteModal
@@ -32,40 +86,10 @@
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
-  <MenuItem
-    icon="Copy"
-    on:click={() => {
-      duplicateModal.show()
-    }}
-  >
-    Duplicate
-  </MenuItem>
-  <MenuItem
-    icon="Export"
-    on:click={() => {
-      exportPublishedVersion = false
-      exportModal.show()
-    }}
-  >
-    Export latest edited app
-  </MenuItem>
-  {#if app.deployed}
-    <MenuItem
-      icon="Export"
-      on:click={() => {
-        exportPublishedVersion = true
-        exportModal.show()
-      }}
-    >
-      Export latest published app
+
+  {#each actions as action}
+    <MenuItem icon={action.icon} on:click={action.onClick}>
+      {action.body}
     </MenuItem>
-  {/if}
-  <MenuItem
-    icon="Delete"
-    on:click={() => {
-      deleteModal.show()
-    }}
-  >
-    Delete
-  </MenuItem>
+  {/each}
 </ActionMenu>
diff --git a/packages/builder/src/components/start/ChooseIconModal.svelte b/packages/builder/src/components/start/ChooseIconModal.svelte
index ac1decfb6f..463567b12a 100644
--- a/packages/builder/src/components/start/ChooseIconModal.svelte
+++ b/packages/builder/src/components/start/ChooseIconModal.svelte
@@ -6,7 +6,7 @@
     Label,
     notifications,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { createEventDispatcher } from "svelte"
 
   export let app
@@ -49,7 +49,7 @@
       return
     }
     try {
-      await apps.update(app.instance._id, {
+      await appsStore.save(app.instance._id, {
         icon: { name, color },
       })
     } catch (error) {
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index b582232207..801f119dff 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -9,7 +9,7 @@
   } from "@budibase/bbui"
   import { initialise } from "stores/builder"
   import { API } from "api"
-  import { apps, admin, auth } from "stores/portal"
+  import { appsStore, admin, auth } from "stores/portal"
   import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
   import { createValidationStore } from "helpers/validation/yup"
@@ -92,7 +92,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = svelteGet(apps)
+    const applications = svelteGet(appsStore).apps
     appValidation.name(validation, { apps: applications })
     appValidation.url(validation, { apps: applications })
     appValidation.file(validation, { template })
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
index 9a83f57215..f4b6d74f2b 100644
--- a/packages/builder/src/components/start/DuplicateAppModal.svelte
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -9,7 +9,7 @@
   import { createValidationStore } from "helpers/validation/yup"
   import { writable, get } from "svelte/store"
   import * as appValidation from "helpers/validation/yup/app"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { onMount } from "svelte"
   import { API } from "api"
 
@@ -67,7 +67,7 @@
 
     try {
       await API.duplicateApp(data, appId)
-      apps.load()
+      appsStore.load()
       notifications.success("App duplicated successfully")
     } catch (err) {
       notifications.error("Error duplicating app")
@@ -76,7 +76,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = get(apps)
+    const applications = get(appsStore).apps
     appValidation.name(validation, { apps: applications })
     appValidation.url(validation, { apps: applications })
 
diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
index 5302104a45..94f6b20694 100644
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@@ -7,7 +7,7 @@
     Layout,
     Label,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { onMount } from "svelte"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
@@ -37,7 +37,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = svelteGet(apps)
+    const applications = svelteGet(appsStore).apps
     appValidation.name(validation, {
       apps: applications,
       currentApp: {
@@ -62,7 +62,7 @@
 
   async function updateApp() {
     try {
-      await apps.update(app.appId, {
+      await appsStore.save(app.appId, {
         name: $values.name?.trim(),
         url: $values.url?.trim(),
         icon: {
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index 7c1cc583e1..d714bafc70 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -15,7 +15,14 @@
     FancySelect,
   } from "@budibase/bbui"
   import { builderStore, appStore, roles } from "stores/builder"
-  import { groups, licensing, apps, users, auth, admin } from "stores/portal"
+  import {
+    groups,
+    licensing,
+    appsStore,
+    users,
+    auth,
+    admin,
+  } from "stores/portal"
   import {
     fetchData,
     Constants,
@@ -54,7 +61,7 @@
 
   let inviteFailureResponse = ""
   $: validEmail = emailValidator(email) === true
-  $: prodAppId = apps.getProdAppID($appStore.appId)
+  $: prodAppId = appsStore.getProdAppID($appStore.appId)
   $: promptInvite = showInvite(
     filteredInvites,
     filteredUsers,
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index c7f8c98e73..ddcdf77761 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -8,7 +8,7 @@
     userStore,
     deploymentStore,
   } from "stores/builder"
-  import { auth, apps } from "stores/portal"
+  import { auth, appsStore } from "stores/portal"
   import { TENANT_FEATURE_FLAGS, isEnabled } from "helpers/featureFlags"
   import {
     Icon,
@@ -52,7 +52,7 @@
       const pkg = await API.fetchAppPackage(application)
       await initialise(pkg)
 
-      await apps.load()
+      await appsStore.load()
       await deploymentStore.load()
 
       loaded = true
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
index d421645ede..7bba5f638c 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
@@ -18,7 +18,7 @@
   import { createPaginationStore } from "helpers/pagination"
   import { getContext, onDestroy, onMount } from "svelte"
   import dayjs from "dayjs"
-  import { auth, licensing, admin, apps } from "stores/portal"
+  import { auth, licensing, admin, appsStore } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
   import Portal from "svelte-portal"
 
@@ -36,7 +36,7 @@
   let status = null
   let timeRange = null
   let loaded = false
-  $: app = $apps.find(app => $appStore.appId?.includes(app.appId))
+  $: app = $appsStore.apps.find(app => $appStore.appId?.includes(app.appId))
   $: licensePlan = $auth.user?.license?.plan
   $: page = $pageInfo.page
   $: fetchLogs(automationId, status, page, timeRange)
@@ -129,7 +129,7 @@
 
   async function save({ detail }) {
     try {
-      await apps.update($appStore.appId, {
+      await appsStore.save($appStore.appId, {
         automations: {
           chainAutomations: detail,
         },
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index f1d95da362..5f82447e36 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -10,10 +10,10 @@
     notifications,
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { appStore } from "stores/builder"
 
-  $: filteredApps = $apps.filter(app => app.devId == $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appUrl = `${window.origin}/embed${app?.url}`
   $: appDeployed = app?.status === AppStatus.DEPLOYED
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte b/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
index 0ac2bc0d3f..417b5e4872 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
@@ -8,12 +8,12 @@
     Modal,
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { appStore } from "stores/builder"
   import ExportAppModal from "components/start/ExportAppModal.svelte"
   import ImportAppModal from "components/start/ImportAppModal.svelte"
 
-  $: filteredApps = $apps.filter(app => app.devId === $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId === $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
index 06fe7e1456..be580552c7 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
@@ -11,13 +11,13 @@
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
   import { appStore, initialise } from "stores/builder"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
   import { API } from "api"
 
   let updatingModal
 
-  $: filteredApps = $apps.filter(app => app.devId == $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index 7ccc98d78a..ce31bd84aa 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -12,7 +12,14 @@
     notifications,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { apps, organisation, auth, groups, licensing } from "stores/portal"
+  import {
+    appsStore,
+    organisation,
+    auth,
+    groups,
+    licensing,
+    enriched as enrichedApps,
+  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
   import { gradient } from "actions"
@@ -31,7 +38,9 @@
   $: userGroups = $groups.filter(group =>
     group.users.find(user => user._id === $auth.user?._id)
   )
-  $: publishedApps = $apps.filter(app => app.status === AppStatus.DEPLOYED)
+  $: publishedApps = $enrichedApps.filter(
+    app => app.status === AppStatus.DEPLOYED
+  )
   $: userApps = getUserApps(publishedApps, userGroups, $auth.user)
 
   function getUserApps(publishedApps, userGroups, user) {
@@ -46,12 +55,12 @@
         return userGroups.find(group => {
           return groups.actions
             .getGroupAppIds(group)
-            .map(role => apps.extractAppId(role))
+            .map(role => appsStore.extractAppId(role))
             .includes(app.appId)
         })
       } else {
         return Object.keys($auth.user?.roles)
-          .map(x => apps.extractAppId(x))
+          .map(x => appsStore.extractAppId(x))
           .includes(app.appId)
       }
     })
@@ -76,7 +85,7 @@
   onMount(async () => {
     try {
       await organisation.init()
-      await apps.load()
+      await appsStore.load()
       await groups.actions.init()
     } catch (error) {
       notifications.error("Error loading apps")
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index aad33f852a..18378c37e9 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -1,7 +1,7 @@
 <script>
   import { isActive, redirect, goto, url } from "@roxi/routify"
   import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
-  import { organisation, auth, menu, apps } from "stores/portal"
+  import { organisation, auth, menu, appsStore } from "stores/portal"
   import { onMount } from "svelte"
   import UpgradeButton from "./_components/UpgradeButton.svelte"
   import MobileMenu from "./_components/MobileMenu.svelte"
@@ -16,7 +16,8 @@
   let activeTab = "Apps"
 
   $: $url(), updateActiveTab($menu)
-  $: isOnboarding = !$apps.length && sdk.users.hasBuilderPermissions($auth.user)
+  $: isOnboarding =
+    !$appsStore.apps.length && sdk.users.hasBuilderPermissions($auth.user)
 
   const updateActiveTab = menu => {
     for (let entry of menu) {
@@ -40,7 +41,7 @@
       } else {
         try {
           // We need to load apps to know if we need to show onboarding fullscreen
-          await Promise.all([apps.load(), organisation.init()])
+          await Promise.all([appsStore.load(), organisation.init()])
         } catch (error) {
           notifications.error("Error getting org config")
         }
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
index 4fe98cf960..7f12c9ac36 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@@ -18,7 +18,7 @@
     Divider,
     ActionButton,
   } from "@budibase/bbui"
-  import { licensing, users, apps, auditLogs } from "stores/portal"
+  import { licensing, users, appsStore, auditLogs } from "stores/portal"
   import LockedFeature from "../../_components/LockedFeature.svelte"
   import { createPaginationStore } from "helpers/pagination"
   import { onMount, setContext } from "svelte"
@@ -102,7 +102,7 @@
     enrich(parseEventObject($auditLogs.events), selectedEvents, "id"),
     "id"
   )
-  $: sortedApps = sort(enrich($apps, selectedApps, "appId"), "name")
+  $: sortedApps = sort(enrich($appsStore.apps, selectedApps, "appId"), "name")
 
   const debounce = value => {
     clearTimeout(timer)
diff --git a/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
new file mode 100644
index 0000000000..c5e29cc3f6
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { Icon, TooltipPosition, TooltipType } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+
+  export let app
+  export let size = "S"
+  export let position = TooltipPosition.Top
+  export let noWrap = false
+  export let hoverColor = "var(--ink)"
+</script>
+
+<Icon
+  name={app?.favourite ? "Star" : "StarOutline"}
+  hoverable
+  color={app?.favourite ? "var(--spectrum-global-color-yellow-1000)" : null}
+  tooltip={app?.favourite ? "Remove from favourites" : "Add to favourites"}
+  tooltipType={TooltipType.Info}
+  tooltipPosition={position}
+  tooltipWrap={noWrap}
+  {hoverColor}
+  {size}
+  on:click={async e => {
+    e.stopPropagation()
+    await auth.updateSelf({
+      appFavourites: [app?.appId],
+    })
+  }}
+  disabled={!app}
+/>
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
index f1ed686a3a..871326eb91 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
@@ -1,8 +1,8 @@
 <script>
   import { params, redirect } from "@roxi/routify"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
 
-  $: app = $apps.find(app => app.appId === $params.appId)
+  $: app = $appsStore.apps.find(app => app.appId === $params.appId)
   $: {
     if (!app) {
       $redirect("../")
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
index e87c1104dd..13ba564e0b 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -1,12 +1,25 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import { apps, auth, sideBarCollapsed } from "stores/portal"
-  import { Link, Body, ActionButton } from "@budibase/bbui"
+  import {
+    auth,
+    sideBarCollapsed,
+    enriched as enrichedApps,
+  } from "stores/portal"
+  import AppRowContext from "components/start/AppRowContext.svelte"
+  import FavouriteAppButton from "../FavouriteAppButton.svelte"
+  import {
+    Link,
+    Body,
+    Button,
+    Icon,
+    TooltipPosition,
+    TooltipType,
+  } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
 
-  $: app = $apps.find(app => app.appId === $params.appId)
+  $: app = $enrichedApps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
 
@@ -30,42 +43,63 @@
   $: fetchScreens(app?.devId)
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="container">
   <div class="header">
     {#if $sideBarCollapsed}
-      <ActionButton
-        quiet
-        icon="Rail"
-        on:click={() => sideBarCollapsed.set(false)}
-      >
-        Menu
-      </ActionButton>
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(false)}>
+        <Icon
+          name={"Rail"}
+          hoverable
+          tooltip="Expand"
+          tooltipPosition={TooltipPosition.Right}
+          tooltipType={TooltipType.Info}
+          hoverColor={"var(--ink)"}
+        />
+      </div>
     {:else}
-      <ActionButton
-        quiet
-        icon="RailRightOpen"
-        on:click={() => sideBarCollapsed.set(true)}
-      >
-        Collapse
-      </ActionButton>
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(true)}>
+        <Icon
+          name={"RailRightOpen"}
+          hoverable
+          tooltip="Collapse"
+          tooltipType={TooltipType.Info}
+          tooltipPosition={TooltipPosition.Top}
+          hoverColor={"var(--ink)"}
+          size="S"
+        />
+      </div>
     {/if}
     {#if isBuilder}
-      <ActionButton
-        quiet
-        icon="Edit"
+      <Button
+        size="M"
+        secondary
         on:click={() => $goto(`/builder/app/${app.devId}`)}
       >
         Edit
-      </ActionButton>
+      </Button>
     {/if}
-    <ActionButton
-      disabled={noScreens}
-      quiet
-      icon="LinkOut"
-      on:click={() => window.open(iframeUrl, "_blank")}
-    >
-      Fullscreen
-    </ActionButton>
+    <div class="headerButton">
+      <FavouriteAppButton {app} />
+    </div>
+    <div class="headerButton" on:click={() => window.open(iframeUrl, "_blank")}>
+      <Icon
+        name="LinkOut"
+        disabled={noScreens}
+        hoverable
+        tooltip="Open in new tab"
+        tooltipType={TooltipType.Info}
+        tooltipPosition={TooltipPosition.Top}
+        hoverColor={"var(--ink)"}
+        size="S"
+      />
+    </div>
+    <AppRowContext
+      {app}
+      options={["duplicate", "delete", "exportDev", "exportProd"]}
+      align="left"
+    />
   </div>
   {#if noScreens}
     <div class="noScreens">
@@ -83,6 +117,15 @@
 </div>
 
 <style>
+  .headerButton {
+    color: var(--grey-7);
+    cursor: pointer;
+  }
+
+  .headerButton:hover {
+    color: var(--ink);
+  }
+
   .container {
     flex: 1 1 auto;
     display: flex;
@@ -96,7 +139,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-xl);
     flex: 0 0 50px;
   }
 
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index b6f66ff8e7..996c7c0580 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -1,32 +1,20 @@
 <script>
-  import { apps, sideBarCollapsed } from "stores/portal"
+  import { sideBarCollapsed, enriched as enrichedApps } from "stores/portal"
   import { params, goto } from "@roxi/routify"
   import NavItem from "components/common/NavItem.svelte"
   import NavHeader from "components/common/NavHeader.svelte"
   import AppRowContext from "components/start/AppRowContext.svelte"
-  import { AppStatus } from "constants"
+  import FavouriteAppButton from "../FavouriteAppButton.svelte"
 
   let searchString
   let opened
 
-  $: filteredApps = $apps
-    .filter(app => {
-      return (
-        !searchString ||
-        app.name.toLowerCase().includes(searchString.toLowerCase())
-      )
-    })
-    .map(app => {
-      return {
-        ...app,
-        deployed: app.status === AppStatus.DEPLOYED,
-      }
-    })
-    .sort((a, b) => {
-      const lowerA = a.name.toLowerCase()
-      const lowerB = b.name.toLowerCase()
-      return lowerA > lowerB ? 1 : -1
-    })
+  $: filteredApps = $enrichedApps.filter(app => {
+    return (
+      !searchString ||
+      app.name.toLowerCase().includes(searchString.toLowerCase())
+    )
+  })
 </script>
 
 <div class="side-bar" class:collapsed={$sideBarCollapsed}>
@@ -46,25 +34,38 @@
       selected={!$params.appId}
     />
     {#each filteredApps as app}
-      <NavItem
-        text={app.name}
-        icon={app.icon?.name || "Apps"}
-        iconColor={app.icon?.color}
-        selected={$params.appId === app.appId}
-        highlighted={opened == app.appId}
-        on:click={() => $goto(`./${app.appId}`)}
+      <span
+        class="side-bar-app-entry"
+        class:favourite={app.favourite}
+        class:actionsOpen={opened == app.appId}
       >
-        <AppRowContext
-          {app}
-          align="left"
-          on:open={() => {
-            opened = app.appId
-          }}
-          on:close={() => {
-            opened = null
-          }}
-        />
-      </NavItem>
+        <NavItem
+          text={app.name}
+          icon={app.icon?.name || "Apps"}
+          iconColor={app.icon?.color}
+          selected={$params.appId === app.appId}
+          highlighted={opened == app.appId}
+          on:click={() => $goto(`./${app.appId}`)}
+          withActions
+          showActions
+        >
+          <div class="app-entry-actions">
+            <AppRowContext
+              {app}
+              align="left"
+              on:open={() => {
+                opened = app.appId
+              }}
+              on:close={() => {
+                opened = null
+              }}
+            />
+          </div>
+          <div class="favourite-icon">
+            <FavouriteAppButton {app} size="XS" />
+          </div>
+        </NavItem>
+      </span>
     {/each}
   </div>
 </div>
@@ -107,4 +108,23 @@
     overflow: auto;
     overflow-x: hidden;
   }
+
+  .side-bar-app-entry :global(.nav-item-content .actions) {
+    width: auto;
+    display: flex;
+    gap: var(--spacing-s);
+  }
+
+  .side-bar-app-entry:hover .app-entry-actions,
+  .side-bar-app-entry:hover .favourite-icon,
+  .side-bar-app-entry.favourite .favourite-icon,
+  .side-bar-app-entry.actionsOpen .app-entry-actions,
+  .side-bar-app-entry.actionsOpen .favourite-icon {
+    opacity: 1;
+  }
+
+  .side-bar-app-entry .app-entry-actions,
+  .side-bar-app-entry .favourite-icon {
+    opacity: 0;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
index 8810edca9c..00719dc6d5 100644
--- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
@@ -2,7 +2,7 @@
   import { notifications } from "@budibase/bbui"
   import {
     admin,
-    apps,
+    appsStore,
     templates,
     licensing,
     groups,
@@ -14,7 +14,7 @@
   import PortalSideBar from "./_components/PortalSideBar.svelte"
 
   // Don't block loading if we've already hydrated state
-  let loaded = !!$apps?.length
+  let loaded = !!$appsStore.apps?.length
 
   onMount(async () => {
     try {
@@ -34,7 +34,10 @@
       }
 
       // Go to new app page if no apps exists
-      if (!$apps.length && sdk.users.hasBuilderPermissions($auth.user)) {
+      if (
+        !$appsStore.apps.length &&
+        sdk.users.hasBuilderPermissions($auth.user)
+      ) {
         $redirect("./onboarding")
       }
     } catch (error) {
@@ -46,7 +49,7 @@
 
 {#if loaded}
   <div class="page">
-    {#if $apps.length > 0}
+    {#if $appsStore.apps.length > 0}
       <PortalSideBar />
     {/if}
     <slot />
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index 1f2c579071..1248c41cf8 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -5,7 +5,7 @@
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
-  import { apps, templates, licensing } from "stores/portal"
+  import { appsStore, templates, licensing } from "stores/portal"
   import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
 
   let template
@@ -35,7 +35,7 @@
   }
 </script>
 
-{#if !$apps.length}
+{#if !$appsStore.apps.length}
   <FirstAppOnboarding />
 {:else}
   <Page>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index a1aa242a36..c087e3cc86 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -19,10 +19,16 @@
   import { automationStore, initialise } from "stores/builder"
   import { API } from "api"
   import { onMount } from "svelte"
-  import { apps, auth, admin, licensing, environment } from "stores/portal"
+  import {
+    appsStore,
+    auth,
+    admin,
+    licensing,
+    environment,
+    enriched as enrichedApps,
+  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
-  import { AppStatus } from "constants"
   import Logo from "assets/bb-space-man.svg"
 
   let sortBy = "name"
@@ -33,56 +39,27 @@
   let searchTerm = ""
   let creatingFromTemplate = false
   let automationErrors
-  let accessFilterList = null
 
   $: welcomeHeader = `Welcome ${$auth?.user?.firstName || "back"}`
-  $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
-  $: filteredApps = enrichedApps.filter(
-    app =>
-      (searchTerm
-        ? app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
-        : true) &&
-      (accessFilterList !== null
-        ? accessFilterList?.includes(
-            `${app?.type}_${app?.tenantId}_${app?.appId}`
-          )
-        : true)
-  )
-  $: automationErrors = getAutomationErrors(enrichedApps)
+  $: filteredApps = filterApps($enrichedApps, searchTerm)
+  $: automationErrors = getAutomationErrors(filteredApps || [])
   $: isOwner = $auth.accountPortalAccess && $admin.cloud
 
+  const filterApps = (apps, searchTerm) => {
+    return apps?.filter(app => {
+      const query = searchTerm?.trim()?.replace(/\s/g, "")
+      if (query) {
+        return app?.name?.toLowerCase().includes(query.toLowerCase())
+      } else {
+        return true
+      }
+    })
+  }
+
   const usersLimitLockAction = $licensing?.errUserLimit
     ? () => accountLockedModal.show()
     : null
 
-  const enrichApps = (apps, user, sortBy) => {
-    const enrichedApps = apps.map(app => ({
-      ...app,
-      deployed: app.status === AppStatus.DEPLOYED,
-      lockedYou: app.lockedBy && app.lockedBy.email === user?.email,
-      lockedOther: app.lockedBy && app.lockedBy.email !== user?.email,
-    }))
-
-    if (sortBy === "status") {
-      return enrichedApps.sort((a, b) => {
-        if (a.status === b.status) {
-          return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
-        }
-        return a.status === AppStatus.DEPLOYED ? -1 : 1
-      })
-    } else if (sortBy === "updated") {
-      return enrichedApps.sort((a, b) => {
-        const aUpdated = a.updatedAt || "9999"
-        const bUpdated = b.updatedAt || "9999"
-        return aUpdated < bUpdated ? 1 : -1
-      })
-    } else {
-      return enrichedApps.sort((a, b) => {
-        return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
-      })
-    }
-  }
-
   const getAutomationErrors = apps => {
     const automationErrors = {}
     for (let app of apps) {
@@ -117,7 +94,7 @@
   const initiateAppCreation = async () => {
     if ($licensing?.usageMetrics?.apps >= 100) {
       appLimitModal.show()
-    } else if ($apps?.length) {
+    } else if ($appsStore.apps?.length) {
       $goto("/builder/portal/apps/create")
     } else {
       template = null
@@ -136,7 +113,7 @@
       const templateKey = template.key.split("/")[1]
 
       let appName = templateKey.replace(/-/g, " ")
-      const appsWithSameName = $apps.filter(app =>
+      const appsWithSameName = $appsStore.apps.filter(app =>
         app.name?.startsWith(appName)
       )
       appName = `${appName} ${appsWithSameName.length + 1}`
@@ -217,7 +194,7 @@
           : "View error"}
         on:dismiss={async () => {
           await automationStore.actions.clearLogErrors({ appId })
-          await apps.load()
+          await appsStore.load()
         }}
         message={automationErrorMessage(appId)}
       />
@@ -233,7 +210,7 @@
       </div>
     </div>
 
-    {#if enrichedApps.length}
+    {#if $appsStore.apps.length}
       <Layout noPadding gap="L">
         <div class="title">
           {#if $auth.user && sdk.users.canCreateApps($auth.user)}
@@ -245,7 +222,7 @@
               >
                 Create new app
               </Button>
-              {#if $apps?.length > 0 && !$admin.offlineMode}
+              {#if $appsStore.apps?.length > 0 && !$admin.offlineMode}
                 <Button
                   size="M"
                   secondary
@@ -255,7 +232,7 @@
                   View templates
                 </Button>
               {/if}
-              {#if !$apps?.length}
+              {#if !$appsStore.apps?.length}
                 <Button
                   size="L"
                   quiet
@@ -267,11 +244,14 @@
               {/if}
             </div>
           {/if}
-          {#if enrichedApps.length > 1}
+          {#if $appsStore.apps.length > 1}
             <div class="app-actions">
               <Select
                 autoWidth
-                bind:value={sortBy}
+                value={$appsStore.sortBy}
+                on:change={e => {
+                  appsStore.updateSort(e.detail)
+                }}
                 placeholder={null}
                 options={[
                   { label: "Sort by name", value: "name" },
@@ -279,7 +259,17 @@
                   { label: "Sort by status", value: "status" },
                 ]}
               />
-              <Search placeholder="Search" bind:value={searchTerm} />
+              <Search
+                placeholder="Search"
+                on:input={e => {
+                  searchTerm = e.target.value
+                }}
+                on:change={e => {
+                  if (!e.detail) {
+                    searchTerm = null
+                  }
+                }}
+              />
             </div>
           {/if}
         </div>
diff --git a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
index d03c62d528..5db8f5f712 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@@ -13,7 +13,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { Breadcrumb, Breadcrumbs } from "components/portal/page"
   import { roles } from "stores/builder"
-  import { apps, auth, features, groups } from "stores/portal"
+  import { appsStore, auth, features, groups } from "stores/portal"
   import { onMount, setContext } from "svelte"
   import AppNameTableRenderer from "../users/_components/AppNameTableRenderer.svelte"
   import AppRoleTableRenderer from "../users/_components/AppRoleTableRenderer.svelte"
@@ -50,17 +50,17 @@
   $: scimEnabled = $features.isScimEnabled
   $: readonly = !sdk.users.isAdmin($auth.user) || scimEnabled
   $: group = $groups.find(x => x._id === groupId)
-  $: groupApps = $apps
+  $: groupApps = $appsStore.apps
     .filter(app =>
       groups.actions
         .getGroupAppIds(group)
-        .includes(apps.getProdAppID(app.devId))
+        .includes(appsStore.getProdAppID(app.devId))
     )
     .map(app => ({
       ...app,
-      role: group?.builder?.apps.includes(apps.getProdAppID(app.devId))
+      role: group?.builder?.apps.includes(appsStore.getProdAppID(app.devId))
         ? Constants.Roles.CREATOR
-        : group?.roles?.[apps.getProdAppID(app.devId)],
+        : group?.roles?.[appsStore.getProdAppID(app.devId)],
     }))
 
   $: {
@@ -92,7 +92,7 @@
   }
 
   const removeApp = async app => {
-    await groups.actions.removeApp(groupId, apps.getProdAppID(app.devId))
+    await groups.actions.removeApp(groupId, appsStore.getProdAppID(app.devId))
   }
   setContext("roles", {
     updateRole: () => {},
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
index f657a722a3..5071d40add 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
@@ -1,12 +1,12 @@
 <script>
   import { keepOpen, Body, ModalContent, Select } from "@budibase/bbui"
-  import { apps, groups } from "stores/portal"
+  import { appsStore, groups } from "stores/portal"
   import { roles } from "stores/builder"
   import RoleSelect from "components/common/RoleSelect.svelte"
 
   export let group
 
-  $: appOptions = $apps.map(app => ({
+  $: appOptions = $appsStore.apps.map(app => ({
     label: app.name,
     value: app,
   }))
@@ -16,7 +16,7 @@
   let selectingRole = false
 
   async function appSelected() {
-    const prodAppId = apps.getProdAppID(selectedApp.devId)
+    const prodAppId = appsStore.getProdAppID(selectedApp.devId)
     if (!selectingRole) {
       selectingRole = true
       await roles.fetchByAppId(prodAppId)
diff --git a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
index 0ea0749537..b8371cd46d 100644
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@@ -18,7 +18,14 @@
     Table,
   } from "@budibase/bbui"
   import { onMount, setContext } from "svelte"
-  import { users, auth, groups, apps, licensing, features } from "stores/portal"
+  import {
+    users,
+    auth,
+    groups,
+    appsStore,
+    licensing,
+    features,
+  } from "stores/portal"
   import { roles } from "stores/builder"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
@@ -93,7 +100,7 @@
   $: privileged = sdk.users.isAdminOrGlobalBuilder(user)
   $: nameLabel = getNameLabel(user)
   $: filteredGroups = getFilteredGroups($groups, searchTerm)
-  $: availableApps = getAvailableApps($apps, privileged, user?.roles)
+  $: availableApps = getAvailableApps($appsStore.apps, privileged, user?.roles)
   $: userGroups = $groups.filter(x => {
     return x.users?.find(y => {
       return y._id === userId
@@ -107,12 +114,12 @@
       availableApps = availableApps.filter(x => {
         let roleKeys = Object.keys(roles || {})
         return roleKeys.concat(user?.builder?.apps).find(y => {
-          return x.appId === apps.extractAppId(y)
+          return x.appId === appsStore.extractAppId(y)
         })
       })
     }
     return availableApps.map(app => {
-      const prodAppId = apps.getProdAppID(app.devId)
+      const prodAppId = appsStore.getProdAppID(app.devId)
       return {
         name: app.name,
         devId: app.devId,
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
index 32e50ef05f..28057f609c 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { sdk } from "@budibase/shared-core"
 
   export let value
@@ -10,7 +10,7 @@
 
   const getCount = () => {
     if (priviliged) {
-      return $apps.length
+      return $appsStore.apps.length
     } else {
       return sdk.users.hasAppBuilderPermissions(row)
         ? row?.builder?.apps?.length +
diff --git a/packages/builder/src/stores/builder/BudiStore.js b/packages/builder/src/stores/BudiStore.js
similarity index 100%
rename from packages/builder/src/stores/builder/BudiStore.js
rename to packages/builder/src/stores/BudiStore.js
diff --git a/packages/builder/src/stores/builder/app.js b/packages/builder/src/stores/builder/app.js
index cb58f69fa8..40a30d31a3 100644
--- a/packages/builder/src/stores/builder/app.js
+++ b/packages/builder/src/stores/builder/app.js
@@ -1,5 +1,5 @@
 import { API } from "api"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_APP_META_STATE = {
   appId: "",
diff --git a/packages/builder/src/stores/builder/builder.js b/packages/builder/src/stores/builder/builder.js
index 94fbfafb19..aa5dbaf702 100644
--- a/packages/builder/src/stores/builder/builder.js
+++ b/packages/builder/src/stores/builder/builder.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { createBuilderWebsocket } from "./websocket.js"
 import { BuilderSocketEvent } from "@budibase/shared-core"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore.js"
 import { previewStore } from "./preview.js"
 import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
 
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index d7572dca60..bf8a1ef896 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -27,7 +27,7 @@ import {
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
 } from "constants/backend"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
 import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
diff --git a/packages/builder/src/stores/builder/hover.js b/packages/builder/src/stores/builder/hover.js
index 064d5c15cf..f0444a7da5 100644
--- a/packages/builder/src/stores/builder/hover.js
+++ b/packages/builder/src/stores/builder/hover.js
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { previewStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_HOVER_STATE = {
   componentId: null,
diff --git a/packages/builder/src/stores/builder/layouts.js b/packages/builder/src/stores/builder/layouts.js
index e9a84a1d4a..30d6935b19 100644
--- a/packages/builder/src/stores/builder/layouts.js
+++ b/packages/builder/src/stores/builder/layouts.js
@@ -1,6 +1,6 @@
 import { derived, get } from "svelte/store"
 import { componentStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 import { API } from "api"
 
 export const INITIAL_LAYOUT_STATE = {
diff --git a/packages/builder/src/stores/builder/navigation.js b/packages/builder/src/stores/builder/navigation.js
index 6d53a41019..88565de99d 100644
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/packages/builder/src/stores/builder/navigation.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { API } from "api"
 import { appStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_NAVIGATION_STATE = {
   navigation: "Top",
diff --git a/packages/builder/src/stores/builder/screens.js b/packages/builder/src/stores/builder/screens.js
index a646dee2f8..7339593960 100644
--- a/packages/builder/src/stores/builder/screens.js
+++ b/packages/builder/src/stores/builder/screens.js
@@ -12,7 +12,7 @@ import {
 } from "stores/builder"
 import { createHistoryStore } from "stores/builder/history"
 import { API } from "api"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_SCREENS_STATE = {
   screens: [],
diff --git a/packages/builder/src/stores/builder/websocket.js b/packages/builder/src/stores/builder/websocket.js
index bbdf7b6d63..7b5ccebc89 100644
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/packages/builder/src/stores/builder/websocket.js
@@ -10,7 +10,7 @@ import {
   tables,
 } from "stores/builder"
 import { get } from "svelte/store"
-import { auth, apps } from "stores/portal"
+import { auth, appsStore } from "stores/portal"
 import { screenStore } from "./screens"
 import { SocketEvent, BuilderSocketEvent, helpers } from "@budibase/shared-core"
 import { notifications } from "@budibase/bbui"
@@ -68,7 +68,7 @@ export const createBuilderWebsocket = appId => {
   socket.onOther(
     BuilderSocketEvent.AppPublishChange,
     async ({ user, published }) => {
-      await apps.load()
+      await appsStore.load()
       if (published) {
         await deploymentStore.load()
       }
diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js
index 5fcf567ef5..ceb15f4117 100644
--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.js
@@ -1,39 +1,61 @@
-import { writable } from "svelte/store"
+import { derived } from "svelte/store"
 import { AppStatus } from "constants"
 import { API } from "api"
+import { auth } from "./auth"
+import BudiStore from "../BudiStore" // move this
 
 // properties that should always come from the dev app, not the deployed
 const DEV_PROPS = ["updatedBy", "updatedAt"]
 
-const extractAppId = id => {
-  const split = id?.split("_") || []
-  return split.length ? split[split.length - 1] : null
+export const INITIAL_APPS_STATE = {
+  apps: [],
+  sortBy: "name",
 }
 
-const getProdAppID = appId => {
-  if (!appId) {
-    return appId
-  }
-  let rest,
-    separator = ""
-  if (appId.startsWith("app_dev")) {
-    // split to take off the app_dev element, then join it together incase any other app_ exist
-    const split = appId.split("app_dev")
-    split.shift()
-    rest = split.join("app_dev")
-  } else if (!appId.startsWith("app")) {
-    rest = appId
-    separator = "_"
-  } else {
-    return appId
-  }
-  return `app${separator}${rest}`
-}
+export class AppsStore extends BudiStore {
+  constructor() {
+    super({ ...INITIAL_APPS_STATE })
 
-export function createAppStore() {
-  const store = writable([])
+    this.extractAppId = this.extractAppId.bind(this)
+    this.getProdAppID = this.getProdAppID.bind(this)
+    this.updateSort = this.updateSort.bind(this)
+    this.load = this.load.bind(this)
+    this.save = this.save.bind(this)
+  }
 
-  async function load() {
+  extractAppId(id) {
+    const split = id?.split("_") || []
+    return split.length ? split[split.length - 1] : null
+  }
+
+  getProdAppID(appId) {
+    if (!appId) {
+      return appId
+    }
+    let rest,
+      separator = ""
+    if (appId.startsWith("app_dev")) {
+      // split to take off the app_dev element, then join it together incase any other app_ exist
+      const split = appId.split("app_dev")
+      split.shift()
+      rest = split.join("app_dev")
+    } else if (!appId.startsWith("app")) {
+      rest = appId
+      separator = "_"
+    } else {
+      return appId
+    }
+    return `app${separator}${rest}`
+  }
+
+  updateSort(sortBy) {
+    this.update(state => ({
+      ...state,
+      sortBy,
+    }))
+  }
+
+  async load() {
     const json = await API.getApps()
     if (Array.isArray(json)) {
       // Merge apps into one sensible list
@@ -43,7 +65,7 @@ export function createAppStore() {
 
       // First append all dev app version
       devApps.forEach(app => {
-        const id = extractAppId(app.appId)
+        const id = this.extractAppId(app.appId)
         appMap[id] = {
           ...app,
           devId: app.appId,
@@ -53,7 +75,7 @@ export function createAppStore() {
 
       // Then merge with all prod app versions
       deployedApps.forEach(app => {
-        const id = extractAppId(app.appId)
+        const id = this.extractAppId(app.appId)
 
         // Skip any deployed apps which don't have a dev counterpart
         if (!appMap[id]) {
@@ -81,39 +103,80 @@ export function createAppStore() {
       // Transform into an array and clean up
       const apps = Object.values(appMap)
       apps.forEach(app => {
-        app.appId = extractAppId(app.devId)
+        app.appId = this.extractAppId(app.devId)
         delete app._id
         delete app._rev
       })
-      store.set(apps)
+      this.update(state => ({
+        ...state,
+        apps,
+      }))
     } else {
-      store.set([])
+      this.update(state => ({
+        ...state,
+        apps: [],
+      }))
     }
   }
 
-  async function update(appId, value) {
+  async save(appId, value) {
     await API.saveAppMetadata({
       appId,
       metadata: value,
     })
-    store.update(state => {
-      const updatedAppIndex = state.findIndex(app => app.instance._id === appId)
+    this.update(state => {
+      const updatedAppIndex = state.apps.findIndex(
+        app => app.instance._id === appId
+      )
       if (updatedAppIndex !== -1) {
-        let updatedApp = state[updatedAppIndex]
+        let updatedApp = state.apps[updatedAppIndex]
         updatedApp = { ...updatedApp, ...value }
-        state.apps = state.splice(updatedAppIndex, 1, updatedApp)
+        state.apps = state.apps.splice(updatedAppIndex, 1, updatedApp)
       }
       return state
     })
   }
-
-  return {
-    subscribe: store.subscribe,
-    load,
-    update,
-    extractAppId,
-    getProdAppID,
-  }
 }
 
-export const apps = createAppStore()
+export const appsStore = new AppsStore()
+
+// Centralise any logic that enriches the apps list
+export const enriched = derived([appsStore, auth], ([$store, $auth]) => {
+  const enrichedApps = $store.apps
+    ? $store.apps.map(app => ({
+        ...app,
+        deployed: app.status === AppStatus.DEPLOYED,
+        lockedYou: app.lockedBy && app.lockedBy.email === user?.email,
+        lockedOther: app.lockedBy && app.lockedBy.email !== user?.email,
+        favourite: $auth?.user.appFavourites?.includes(app.appId),
+      }))
+    : []
+
+  if ($store.sortBy === "status") {
+    return enrichedApps.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        if (a.status === b.status) {
+          return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
+        }
+        return a.status === AppStatus.DEPLOYED ? -1 : 1
+      }
+      return a.favourite ? -1 : 1
+    })
+  } else if ($store.sortBy === "updated") {
+    return enrichedApps?.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        const aUpdated = a.updatedAt || "9999"
+        const bUpdated = b.updatedAt || "9999"
+        return aUpdated < bUpdated ? 1 : -1
+      }
+      return a.favourite ? -1 : 1
+    })
+  } else {
+    return enrichedApps?.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
+      }
+      return a.favourite ? -1 : 1
+    })
+  }
+})
diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js
index ad2a59ddcd..bef176ebaf 100644
--- a/packages/builder/src/stores/portal/index.js
+++ b/packages/builder/src/stores/portal/index.js
@@ -3,7 +3,7 @@ import { writable } from "svelte/store"
 export { organisation } from "./organisation"
 export { users } from "./users"
 export { admin } from "./admin"
-export { apps } from "./apps"
+export { appsStore, enriched } from "./apps"
 export { email } from "./email"
 export { auth } from "./auth"
 export { oidc } from "./oidc"
diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index d47dbe8aa8..17771898ad 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -1,4 +1,6 @@
 .spectrum--nord {
+  --spectrum-global-color-yellow-1000: #d8b500;
+
   --spectrum-global-color-red-400: #bf616a;
   --spectrum-global-color-red-500: #c26971;
   --spectrum-global-color-red-600: #c57179;
diff --git a/packages/types/src/api/web/auth.ts b/packages/types/src/api/web/auth.ts
index 46b1e8cec9..4db36fa27e 100644
--- a/packages/types/src/api/web/auth.ts
+++ b/packages/types/src/api/web/auth.ts
@@ -18,6 +18,7 @@ export interface UpdateSelfRequest {
   password?: string
   forceResetPassword?: boolean
   onboardedAt?: string
+  appFavourites?: string[]
 }
 
 export interface UpdateSelfResponse {
diff --git a/packages/types/src/documents/global/user.ts b/packages/types/src/documents/global/user.ts
index 337855787f..e4cc9d7e2c 100644
--- a/packages/types/src/documents/global/user.ts
+++ b/packages/types/src/documents/global/user.ts
@@ -56,6 +56,7 @@ export interface User extends Document {
   userGroups?: string[]
   onboardedAt?: string
   scimInfo?: { isSync: true } & Record<string, any>
+  appFavourites?: string[]
   ssoId?: string
 }
 
diff --git a/packages/worker/src/api/controllers/global/self.ts b/packages/worker/src/api/controllers/global/self.ts
index 2d7e83a2c3..9caf4beff0 100644
--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/packages/worker/src/api/controllers/global/self.ts
@@ -9,7 +9,12 @@ import {
 } from "@budibase/backend-core"
 import env from "../../../environment"
 import { groups } from "@budibase/pro"
-import { UpdateSelfRequest, UpdateSelfResponse, UserCtx } from "@budibase/types"
+import {
+  UpdateSelfRequest,
+  UpdateSelfResponse,
+  User,
+  UserCtx,
+} from "@budibase/types"
 
 const { newid } = utils
 
@@ -105,16 +110,79 @@ export async function getSelf(ctx: any) {
   addSessionAttributesToUser(ctx)
 }
 
+export const syncAppFavourites = async (processedAppIds: string[]) => {
+  const apps = await fetchAppsByIds(processedAppIds)
+  return apps?.reduce((acc: string[], app) => {
+    const id = app.appId.replace(dbCore.APP_DEV_PREFIX, "")
+    if (processedAppIds.includes(id)) {
+      acc.push(id)
+    }
+    return acc
+  }, [])
+}
+
+export const fetchAppsByIds = async (processedAppIds: string[]) => {
+  return await dbCore.getAppsByIDs(
+    processedAppIds.map(appId => `${dbCore.APP_DEV_PREFIX}${appId}`)
+  )
+}
+
+const processUserAppFavourites = (
+  user: User,
+  appIdRequest: string[] | undefined
+) => {
+  const userAppFavourites = user.appFavourites || []
+  const appFavouritesRequest = appIdRequest || []
+  const appFavouritesUpdated = [
+    ...new Set(userAppFavourites.concat(appFavouritesRequest)),
+  ]
+
+  // Process state
+  let processedAppIds: string[]
+  if (userAppFavourites.length) {
+    const req = new Set(appFavouritesRequest)
+    const updated = new Set(userAppFavourites)
+    for (const element of req) {
+      if (updated.has(element)) {
+        // Subtract/Toggle any existing ones
+        updated.delete(element)
+      } else {
+        // Add new appIds
+        updated.add(element)
+      }
+    }
+    processedAppIds = [...updated]
+  } else {
+    processedAppIds = [...appFavouritesUpdated]
+  }
+  return processedAppIds
+}
+
 export async function updateSelf(
   ctx: UserCtx<UpdateSelfRequest, UpdateSelfResponse>
 ) {
   const update = ctx.request.body
 
   let user = await userSdk.db.getUser(ctx.user._id!)
-  user = {
-    ...user,
-    ...update,
+
+  if ("appFavourites" in update) {
+    const appIds: string[] = processUserAppFavourites(
+      user,
+      update.appFavourites
+    )
+    const validAppIds: string[] = await syncAppFavourites(appIds)
+
+    user = {
+      ...user,
+      appFavourites: validAppIds,
+    }
+  } else {
+    user = {
+      ...user,
+      ...update,
+    }
   }
+
   user = await userSdk.db.save(user, { requirePassword: false })
 
   if (update.password) {
@@ -131,3 +199,12 @@ export async function updateSelf(
     _rev: user._rev!,
   }
 }
+
+// export default {
+//   generateAPIKey,
+//   fetchAPIKey,
+//   getSelf,
+//   syncAppFavourites,
+//   fetchAppsByIds,
+//   updateSelf,
+// }
diff --git a/packages/worker/src/api/routes/validation/users.ts b/packages/worker/src/api/routes/validation/users.ts
index dfc1e6fbbf..2ae2d4984c 100644
--- a/packages/worker/src/api/routes/validation/users.ts
+++ b/packages/worker/src/api/routes/validation/users.ts
@@ -26,6 +26,7 @@ export const buildSelfSaveValidation = () => {
     firstName: OPTIONAL_STRING,
     lastName: OPTIONAL_STRING,
     onboardedAt: Joi.string().optional(),
+    appFavourites: Joi.array().optional(),
   }
   return auth.joiValidator.body(Joi.object(schema).required().unknown(false))
 }

From 84fb0dd9de5484583cfe9cd3c1f8b124de29fa86 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 6 Mar 2024 13:33:00 +0000
Subject: [PATCH 080/148] Add local state manipulation of snippets

---
 .../common/bindings/BindingPanel.svelte       | 64 ++++++++++---
 .../common/bindings/SnippetDrawer.svelte      | 53 +++++++++++
 .../common/bindings/SnippetSidePanel.svelte   | 93 ++++++++++++-------
 .../builder/src/stores/builder/snippets.js    |  9 +-
 packages/client/src/stores/derived/index.js   |  1 +
 .../client/src/stores/derived/snippets.js     |  6 ++
 .../client/src/utils/enrichDataBinding.js     | 26 ++----
 7 files changed, 177 insertions(+), 75 deletions(-)
 create mode 100644 packages/builder/src/components/common/bindings/SnippetDrawer.svelte
 create mode 100644 packages/client/src/stores/derived/snippets.js

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 9efab620af..232aabc21c 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -34,15 +34,17 @@
 
   const dispatch = createEventDispatcher()
 
-  export let bindings
+  export let bindings = []
   export let value = ""
-  export let valid
+  export let valid = true
+  export let allowHBS = true
   export let allowJS = false
   export let allowHelpers = true
   export let allowSnippets = true
   export let context = null
   export let snippets = null
   export let autofocusEditor = false
+  export let placeholder = null
 
   const drawerContext = getContext("drawer")
   const Modes = {
@@ -55,21 +57,26 @@
     Snippets: "Code",
   }
 
+  let mode
+  let sidePanel
   let initialValueJS = value?.startsWith?.("{{ js ")
-  let mode = initialValueJS ? Modes.JavaScript : Modes.Text
-  let sidePanel = SidePanels.Bindings
-  let getCaretPosition
-  let insertAtPos
   let jsValue = initialValueJS ? value : null
   let hbsValue = initialValueJS ? null : value
+  let getCaretPosition
+  let insertAtPos
   let targetMode = null
   let expressionResult
   let drawerIsModal
   let evaluating = false
 
   $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
-  $: editorModeOptions = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
-  $: sidePanelOptions = getSidePanelOptions(context, allowSnippets, mode)
+  $: editorModeOptions = getModeOptions(allowHBS, allowJS)
+  $: sidePanelOptions = getSidePanelOptions(
+    bindings,
+    context,
+    allowSnippets,
+    mode
+  )
   $: enrichedBindings = enrichBindings(bindings, context, snippets)
   $: usingJS = mode === Modes.JavaScript
   $: editorMode =
@@ -80,15 +87,30 @@
   $: requestEval(runtimeExpression, context, snippets)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
   $: {
+    // Ensure a valid side panel option is always selected
     if (!sidePanelOptions.includes(sidePanel)) {
-      sidePanel = SidePanels.Bindings
+      sidePanel = sidePanelOptions[0]
     }
   }
 
-  const getSidePanelOptions = (context, allowSnippets, mode) => {
-    let options = [SidePanels.Bindings]
+  const getModeOptions = (allowHBS, allowJS) => {
+    let options = []
+    if (allowHBS) {
+      options.push(Modes.Text)
+    }
+    if (allowJS) {
+      options.push(Modes.JavaScript)
+    }
+    return options
+  }
+
+  const getSidePanelOptions = (bindings, context, allowSnippets, mode) => {
+    let options = []
+    if (bindings?.length) {
+      options.push(SidePanels.Bindings)
+    }
     if (context) {
-      options.unshift(SidePanels.Evaluation)
+      options.push(SidePanels.Evaluation)
     }
     if (allowSnippets && mode === Modes.JavaScript) {
       options.push(SidePanels.Snippets)
@@ -197,6 +219,18 @@
   }
 
   onMount(() => {
+    // Set the initial mode appropriately
+    const initialValueMode = initialValueJS ? Modes.JavaScript : Modes.Text
+    if (editorModeOptions.includes(initialValueMode)) {
+      mode = initialValueMode
+    } else {
+      mode = editorModeOptions[0]
+    }
+
+    // Set the initial side panel
+    sidePanel = sidePanelOptions[0]
+
+    // Determine if our initial value is valid
     valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
   })
 </script>
@@ -254,7 +288,8 @@
               ]),
             ]}
             autofocus={autofocusEditor}
-            placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
+            placeholder={placeholder ||
+              "Add bindings by typing {{ or use the menu on the right"}
           />
         {:else if mode === Modes.JavaScript}
           <CodeEditor
@@ -270,7 +305,8 @@
             bind:getCaretPosition
             bind:insertAtPos
             autofocus={autofocusEditor}
-            placeholder="Add bindings by typing $ or use the menu on the right"
+            placeholder={placeholder ||
+              "Add bindings by typing $ or use the menu on the right"}
           />
         {/if}
         {#if targetMode}
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
new file mode 100644
index 0000000000..7e959053fa
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { Button, Drawer } from "@budibase/bbui"
+  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
+  import { snippetStore } from "stores/builder"
+
+  export let snippet
+
+  let drawer
+  let code = ""
+
+  export const show = () => drawer.show()
+  export const hide = () => drawer.hide()
+
+  $: key = snippet?.name
+  $: code = snippet?.code ? encodeJSBinding(snippet.code) : ""
+  $: rawJS = decodeJSBinding(code)
+
+  const saveSnippet = async () => {
+    await snippetStore.saveSnippet({
+      name:
+        snippet?.name || "Snippet_" + Math.random().toString().substring(2, 5),
+      code: rawJS,
+    })
+    drawer.hide()
+  }
+
+  const deleteSnippet = async () => {
+    await snippetStore.deleteSnippet(snippet.name)
+    drawer.hide()
+  }
+</script>
+
+<Drawer title={snippet ? "Edit snippet" : "Create snippet"} bind:this={drawer}>
+  <svelte:fragment slot="buttons">
+    {#if snippet}
+      <Button warning on:click={deleteSnippet}>Delete</Button>
+    {/if}
+    <Button cta on:click={saveSnippet} disabled={!rawJS?.length}>Save</Button>
+  </svelte:fragment>
+  <svelte:fragment slot="body">
+    {#key key}
+      <BindingPanel
+        allowHBS={false}
+        allowJS
+        allowSnippets={false}
+        placeholder="return function(input) &#10100; ... &#10101;"
+        value={code}
+        on:change={e => (code = e.detail)}
+      />
+    {/key}
+  </svelte:fragment>
+</Drawer>
diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index c1f3ca1531..592ca7cfcd 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -2,6 +2,7 @@
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
   import { EditorModes } from "components/common/CodeEditor"
+  import SnippetDrawer from "./SnippetDrawer.svelte"
 
   export let addSnippet
   export let snippets
@@ -12,6 +13,8 @@
   let popoverAnchor
   let hoveredSnippet
   let hideTimeout
+  let snippetDrawer
+  let editableSnippet
 
   $: filteredSnippets = getFilteredSnippets(snippets, search)
 
@@ -60,9 +63,61 @@
     search = ""
   }
 
-  const openSnippetModal = () => {}
+  const createSnippet = () => {
+    editableSnippet = null
+    snippetDrawer.show()
+  }
+
+  const editSnippet = (e, snippet) => {
+    e.preventDefault()
+    e.stopPropagation()
+    editableSnippet = snippet
+    snippetDrawer.show()
+  }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="snippet-side-panel">
+  <Layout noPadding gap="S">
+    <div class="header">
+      {#if searching}
+        <div class="search-input">
+          <Input
+            placeholder="Search for snippets"
+            autocomplete="off"
+            bind:value={search}
+          />
+        </div>
+        <Icon size="S" name="Close" hoverable on:click={stopSearching} />
+      {:else}
+        <div class="title">Snippets</div>
+        <Icon size="S" name="Search" hoverable on:click={startSearching} />
+        <Icon size="S" name="Add" hoverable on:click={createSnippet} />
+      {/if}
+    </div>
+    <div class="snippet-list">
+      {#each filteredSnippets as snippet}
+        <div
+          class="snippet"
+          on:mouseenter={e => showSnippet(snippet, e.target)}
+          on:mouseleave={hidePopover}
+          on:click={() => addSnippet(snippet)}
+        >
+          {snippet.name}
+          <Icon
+            name="Edit"
+            hoverable
+            size="S"
+            on:click={e => editSnippet(e, snippet)}
+            color="var(--spectrum-global-color-gray-700)"
+          />
+        </div>
+      {/each}
+    </div>
+  </Layout>
+</div>
+
 <Popover
   align="left-outside"
   bind:this={popover}
@@ -85,39 +140,7 @@
   </div>
 </Popover>
 
-<div class="snippet-side-panel">
-  <Layout noPadding gap="S">
-    <div class="header">
-      {#if searching}
-        <div class="search-input">
-          <Input
-            placeholder="Search for snippets"
-            autocomplete="off"
-            bind:value={search}
-          />
-        </div>
-        <Icon size="S" name="Close" hoverable on:click={stopSearching} />
-      {:else}
-        <div class="title">Snippets</div>
-        <Icon size="S" name="Search" hoverable on:click={startSearching} />
-        <Icon size="S" name="Add" hoverable on:click={openSnippetModal} />
-      {/if}
-    </div>
-
-    <div class="snippet-list">
-      {#each filteredSnippets as snippet}
-        <div
-          class="snippet"
-          on:mouseenter={e => showSnippet(snippet, e.target)}
-          on:mouseleave={hidePopover}
-          on:click={() => addSnippet(snippet)}
-        >
-          {snippet.name}
-        </div>
-      {/each}
-    </div>
-  </Layout>
-</div>
+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
 
 <style>
   .snippet-side-panel {
@@ -166,6 +189,8 @@
     transition: background-color 130ms ease-out, color 130ms ease-out,
       border-color 130ms ease-out;
     word-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
   }
   .snippet:hover {
     color: var(--spectrum-global-color-gray-900);
diff --git a/packages/builder/src/stores/builder/snippets.js b/packages/builder/src/stores/builder/snippets.js
index 2bac8ad994..9c28536298 100644
--- a/packages/builder/src/stores/builder/snippets.js
+++ b/packages/builder/src/stores/builder/snippets.js
@@ -44,11 +44,7 @@ const createSnippetStore = () => {
     store.set(metadata?.snippets || EXAMPLE_SNIPPETS)
   }
 
-  const createSnippet = snippet => {
-    store.update(state => [...state, snippet])
-  }
-
-  const updateSnippet = updatedSnippet => {
+  const saveSnippet = updatedSnippet => {
     store.update(state => [
       ...state.filter(snippet => snippet.name !== updatedSnippet.name),
       updatedSnippet,
@@ -62,8 +58,7 @@ const createSnippetStore = () => {
   return {
     ...store,
     syncMetadata,
-    createSnippet,
-    updateSnippet,
+    saveSnippet,
     deleteSnippet,
   }
 }
diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js
index d9a7743be6..337c73831f 100644
--- a/packages/client/src/stores/derived/index.js
+++ b/packages/client/src/stores/derived/index.js
@@ -4,3 +4,4 @@
 export { currentRole } from "./currentRole.js"
 export { dndComponentPath } from "./dndComponentPath.js"
 export { devToolsEnabled } from "./devToolsEnabled.js"
+export { snippets } from "./snippets.js"
diff --git a/packages/client/src/stores/derived/snippets.js b/packages/client/src/stores/derived/snippets.js
new file mode 100644
index 0000000000..55e7276edc
--- /dev/null
+++ b/packages/client/src/stores/derived/snippets.js
@@ -0,0 +1,6 @@
+import { derived } from "svelte/store"
+import { appStore } from "../app.js"
+
+export const snippets = derived(appStore, $appStore => $appStore.snippets)
+
+snippets.subscribe(console.log)
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index 0f142ab297..0068a3241c 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -1,28 +1,14 @@
 import { Helpers } from "@budibase/bbui"
-import { processString, processObjectSync } from "@budibase/string-templates"
-
-// Regex to test inputs with to see if they are likely candidates for template strings
-const looksLikeTemplate = /{{.*}}/
-
-/**
- * Enriches a given input with a row from the database.
- */
-export const enrichDataBinding = async (input, context) => {
-  // Only accept string inputs
-  if (!input || typeof input !== "string") {
-    return input
-  }
-  // Do a fast regex check if this looks like a template string
-  if (!looksLikeTemplate.test(input)) {
-    return input
-  }
-  return processString(input, context)
-}
+import { processObjectSync } from "@budibase/string-templates"
+import { snippets } from "../stores"
+import { get } from "svelte/store"
 
 /**
  * Recursively enriches all props in a props object and returns the new props.
  * Props are deeply cloned so that no mutation is done to the source object.
  */
 export const enrichDataBindings = (props, context) => {
-  return processObjectSync(Helpers.cloneDeep(props), context, { cache: true })
+  const totalContext = { ...context, snippets: get(snippets) }
+  const opts = { cache: true }
+  return processObjectSync(Helpers.cloneDeep(props), totalContext, opts)
 }

From d38a6ed0d3ebb311bec17f9f1244acb24b5a089f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 6 Mar 2024 13:59:20 +0000
Subject: [PATCH 081/148] Make any drawer expandable

---
 packages/bbui/src/Drawer/Drawer.svelte        | 21 +++++++++-
 .../common/bindings/BindingPanel.svelte       | 42 +++++++------------
 .../common/bindings/SnippetDrawer.svelte      |  8 +++-
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 757f86b471..9bd4eb5848 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -61,6 +61,7 @@
   import Button from "../Button/Button.svelte"
   import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
+  import { Icon, ActionButton } from "@budibase/bbui"
 
   export let title
   export let forceModal = false
@@ -184,10 +185,24 @@
         {style}
       >
         <header>
-          <div class="text">{title || "Bindings"}</div>
+          {#if $$slots.title}
+            <slot name="title" />
+          {:else}
+            <div class="text">{title || "Bindings"}</div>
+          {/if}
           <div class="buttons">
             <Button secondary quiet on:click={hide}>Cancel</Button>
             <slot name="buttons" />
+            {#if $resizable}
+              <ActionButton
+                size="M"
+                quiet
+                selected={$modal}
+                on:click={() => modal.set(!$modal)}
+              >
+                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+              </ActionButton>
+            {/if}
           </div>
         </header>
         <slot name="body" />
@@ -274,4 +289,8 @@
     align-items: center;
     gap: var(--spacing-m);
   }
+  .buttons :global(.icon) {
+    width: 16px;
+    display: flex;
+  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 232aabc21c..bba3832efd 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -30,7 +30,6 @@
   import formatHighlight from "json-format-highlight"
   import { capitalise } from "helpers"
   import { Utils } from "@budibase/frontend-core"
-  import { get } from "svelte/store"
 
   const dispatch = createEventDispatcher()
 
@@ -46,7 +45,6 @@
   export let autofocusEditor = false
   export let placeholder = null
 
-  const drawerContext = getContext("drawer")
   const Modes = {
     Text: "Text",
     JavaScript: "JavaScript",
@@ -66,10 +64,8 @@
   let insertAtPos
   let targetMode = null
   let expressionResult
-  let drawerIsModal
   let evaluating = false
 
-  $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(
     bindings,
@@ -239,18 +235,22 @@
   <div class="binding-panel">
     <div class="main">
       <div class="tabs">
-        <div class="editor-tabs">
-          {#each editorModeOptions as editorMode}
-            <ActionButton
-              size="M"
-              quiet
-              selected={mode === editorMode}
-              on:click={() => changeMode(editorMode)}
-            >
-              {capitalise(editorMode)}
-            </ActionButton>
-          {/each}
-        </div>
+        {#if $$slots.tabs}
+          <slot name="tabs" />
+        {:else}
+          <div class="editor-tabs">
+            {#each editorModeOptions as editorMode}
+              <ActionButton
+                size="M"
+                quiet
+                selected={mode === editorMode}
+                on:click={() => changeMode(editorMode)}
+              >
+                {capitalise(editorMode)}
+              </ActionButton>
+            {/each}
+          </div>
+        {/if}
         <div class="side-tabs">
           {#each sidePanelOptions as panel}
             <ActionButton
@@ -262,16 +262,6 @@
               <Icon name={panel} size="S" />
             </ActionButton>
           {/each}
-          {#if drawerContext && get(drawerContext.resizable)}
-            <ActionButton
-              size="M"
-              quiet
-              selected={drawerIsModal}
-              on:click={() => drawerContext.modal.set(!drawerIsModal)}
-            >
-              <Icon name={drawerIsModal ? "Minimize" : "Maximize"} size="S" />
-            </ActionButton>
-          {/if}
         </div>
       </div>
       <div class="editor">
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 7e959053fa..05c2b9b000 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Drawer } from "@budibase/bbui"
+  import { Button, Drawer, Input } from "@budibase/bbui"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
   import { snippetStore } from "stores/builder"
@@ -47,7 +47,11 @@
         placeholder="return function(input) &#10100; ... &#10101;"
         value={code}
         on:change={e => (code = e.detail)}
-      />
+      >
+        <div slot="tabs">
+          <Input placeholder="Name" />
+        </div>
+      </BindingPanel>
     {/key}
   </svelte:fragment>
 </Drawer>

From 7dc67185ed31d46d0521bcf9b0ea50a446508d11 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 6 Mar 2024 14:33:17 +0000
Subject: [PATCH 082/148] Improve snippet drawer

---
 .../common/bindings/BindingPanel.svelte       | 35 ++++----
 .../common/bindings/SnippetDrawer.svelte      | 86 +++++++++++++++++--
 2 files changed, 95 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index bba3832efd..f03c18fde3 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -7,7 +7,7 @@
     Body,
     Button,
   } from "@budibase/bbui"
-  import { createEventDispatcher, getContext, onMount } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
   import {
     isValid,
     decodeJSBinding,
@@ -44,6 +44,7 @@
   export let snippets = null
   export let autofocusEditor = false
   export let placeholder = null
+  export let showTabBar = true
 
   const Modes = {
     Text: "Text",
@@ -234,10 +235,8 @@
 <DrawerContent padding={false}>
   <div class="binding-panel">
     <div class="main">
-      <div class="tabs">
-        {#if $$slots.tabs}
-          <slot name="tabs" />
-        {:else}
+      {#if showTabBar}
+        <div class="tabs">
           <div class="editor-tabs">
             {#each editorModeOptions as editorMode}
               <ActionButton
@@ -250,20 +249,20 @@
               </ActionButton>
             {/each}
           </div>
-        {/if}
-        <div class="side-tabs">
-          {#each sidePanelOptions as panel}
-            <ActionButton
-              size="M"
-              quiet
-              selected={sidePanel === panel}
-              on:click={() => changeSidePanel(panel)}
-            >
-              <Icon name={panel} size="S" />
-            </ActionButton>
-          {/each}
+          <div class="side-tabs">
+            {#each sidePanelOptions as panel}
+              <ActionButton
+                size="M"
+                quiet
+                selected={sidePanel === panel}
+                on:click={() => changeSidePanel(panel)}
+              >
+                <Icon name={panel} size="S" />
+              </ActionButton>
+            {/each}
+          </div>
         </div>
-      </div>
+      {/if}
       <div class="editor">
         {#if mode === Modes.Text}
           <CodeEditor
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 05c2b9b000..f3a605bed4 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -1,25 +1,36 @@
 <script>
-  import { Button, Drawer, Input } from "@budibase/bbui"
+  import {
+    Button,
+    Drawer,
+    Input,
+    Icon,
+    AbsTooltip,
+    TooltipType,
+  } from "@budibase/bbui"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
   import { snippetStore } from "stores/builder"
 
   export let snippet
 
-  let drawer
-  let code = ""
-
   export const show = () => drawer.show()
   export const hide = () => drawer.hide()
 
+  const roughValidNameRegex = /^[_$A-Z\xA0-\uFFFF][_$A-Z0-9\xA0-\uFFFF]*$/i
+
+  let drawer
+  let name = ""
+  let code = ""
+
   $: key = snippet?.name
+  $: name = snippet?.name || "MySnippet"
   $: code = snippet?.code ? encodeJSBinding(snippet.code) : ""
   $: rawJS = decodeJSBinding(code)
+  $: nameValid = validateName(name)
 
   const saveSnippet = async () => {
     await snippetStore.saveSnippet({
-      name:
-        snippet?.name || "Snippet_" + Math.random().toString().substring(2, 5),
+      name,
       code: rawJS,
     })
     drawer.hide()
@@ -29,14 +40,56 @@
     await snippetStore.deleteSnippet(snippet.name)
     drawer.hide()
   }
+
+  // Validating function names is not as easy as you think. A simple regex does
+  // not work, as there are a bunch of reserved words. The correct regex for
+  // this is about 12K characters long.
+  // Instead, we can run a simple regex to roughly validate it, then basically
+  // try executing it and see if it's valid JS. The initial regex prevents
+  // against any potential XSS attacks here.
+  const validateName = name => {
+    if (!roughValidNameRegex.test(name)) {
+      return false
+    }
+    const js = `(function ${name}(){return true})()`
+    try {
+      return eval(js) === true
+    } catch (error) {
+      return false
+    }
+  }
 </script>
 
-<Drawer title={snippet ? "Edit snippet" : "Create snippet"} bind:this={drawer}>
+<Drawer bind:this={drawer}>
+  <svelte:fragment slot="title">
+    {#if snippet}
+      {snippet.name}
+    {:else}
+      <div class="name" class:invalid={!nameValid}>
+        <span>Name</span>
+        <Input bind:value={name} />
+        {#if !nameValid}
+          <AbsTooltip
+            text="Alphanumeric characters only, with no spaces"
+            type={TooltipType.Negative}
+          >
+            <Icon
+              name="Help"
+              size="S"
+              color="var(--spectrum-global-color-red-400)"
+            />
+          </AbsTooltip>
+        {/if}
+      </div>
+    {/if}
+  </svelte:fragment>
   <svelte:fragment slot="buttons">
     {#if snippet}
       <Button warning on:click={deleteSnippet}>Delete</Button>
     {/if}
-    <Button cta on:click={saveSnippet} disabled={!rawJS?.length}>Save</Button>
+    <Button cta on:click={saveSnippet} disabled={!rawJS?.length || !nameValid}>
+      Save
+    </Button>
   </svelte:fragment>
   <svelte:fragment slot="body">
     {#key key}
@@ -44,6 +97,7 @@
         allowHBS={false}
         allowJS
         allowSnippets={false}
+        showTabBar={false}
         placeholder="return function(input) &#10100; ... &#10101;"
         value={code}
         on:change={e => (code = e.detail)}
@@ -55,3 +109,19 @@
     {/key}
   </svelte:fragment>
 </Drawer>
+
+<style>
+  .name {
+    display: flex;
+    gap: var(--spacing-l);
+    align-items: center;
+    position: relative;
+  }
+  .name.invalid :global(input) {
+    width: 200px;
+  }
+  .name :global(.icon) {
+    position: absolute;
+    right: 10px;
+  }
+</style>

From 01679fbd0133deed9c0c49ef299e6d4cf34a87e7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 6 Mar 2024 18:36:22 +0000
Subject: [PATCH 083/148] Add name validation to snippets

---
 .../common/bindings/SnippetDrawer.svelte      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index f3a605bed4..d660f295c0 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -17,6 +17,7 @@
   export const hide = () => drawer.hide()
 
   const roughValidNameRegex = /^[_$A-Z\xA0-\uFFFF][_$A-Z0-9\xA0-\uFFFF]*$/i
+  const firstCharNumberRegex = /^[0-9].*$/
 
   let drawer
   let name = ""
@@ -26,7 +27,7 @@
   $: name = snippet?.name || "MySnippet"
   $: code = snippet?.code ? encodeJSBinding(snippet.code) : ""
   $: rawJS = decodeJSBinding(code)
-  $: nameValid = validateName(name)
+  $: nameError = validateName(name)
 
   const saveSnippet = async () => {
     await snippetStore.saveSnippet({
@@ -48,14 +49,20 @@
   // try executing it and see if it's valid JS. The initial regex prevents
   // against any potential XSS attacks here.
   const validateName = name => {
+    if (!name?.length) {
+      return "Name is required"
+    }
+    if (firstCharNumberRegex.test(name)) {
+      return "Can't start with a number"
+    }
     if (!roughValidNameRegex.test(name)) {
-      return false
+      return "No special characters or spaces"
     }
     const js = `(function ${name}(){return true})()`
     try {
-      return eval(js) === true
+      return eval(js) === true ? null : "Invalid name"
     } catch (error) {
-      return false
+      return "Invalid name"
     }
   }
 </script>
@@ -65,14 +72,11 @@
     {#if snippet}
       {snippet.name}
     {:else}
-      <div class="name" class:invalid={!nameValid}>
+      <div class="name" class:invalid={nameError != null}>
         <span>Name</span>
         <Input bind:value={name} />
-        {#if !nameValid}
-          <AbsTooltip
-            text="Alphanumeric characters only, with no spaces"
-            type={TooltipType.Negative}
-          >
+        {#if nameError}
+          <AbsTooltip text={nameError} type={TooltipType.Negative}>
             <Icon
               name="Help"
               size="S"
@@ -87,7 +91,7 @@
     {#if snippet}
       <Button warning on:click={deleteSnippet}>Delete</Button>
     {/if}
-    <Button cta on:click={saveSnippet} disabled={!rawJS?.length || !nameValid}>
+    <Button cta on:click={saveSnippet} disabled={nameError != null}>
       Save
     </Button>
   </svelte:fragment>
@@ -117,9 +121,12 @@
     align-items: center;
     position: relative;
   }
-  .name.invalid :global(input) {
+  .name :global(input) {
     width: 200px;
   }
+  .name.invalid :global(input) {
+    padding-right: 32px;
+  }
   .name :global(.icon) {
     position: absolute;
     right: 10px;

From 4d271ccb5395986167cd76e4dd4ef4d6c155e615 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 6 Mar 2024 19:07:16 +0000
Subject: [PATCH 084/148] Add real snippet saving and fix snippet evaluation in
 client apps

---
 .../common/bindings/SnippetDrawer.svelte      | 42 +++++++++---
 .../builder/src/stores/builder/snippets.js    | 67 ++++++-------------
 .../client/src/stores/derived/snippets.js     |  6 +-
 3 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index d660f295c0..05a397a3c7 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -6,6 +6,7 @@
     Icon,
     AbsTooltip,
     TooltipType,
+    notifications,
   } from "@budibase/bbui"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
@@ -22,24 +23,38 @@
   let drawer
   let name = ""
   let code = ""
+  let loading = false
 
   $: key = snippet?.name
   $: name = snippet?.name || "MySnippet"
   $: code = snippet?.code ? encodeJSBinding(snippet.code) : ""
   $: rawJS = decodeJSBinding(code)
-  $: nameError = validateName(name)
+  $: nameError = validateName(name, $snippetStore)
 
   const saveSnippet = async () => {
-    await snippetStore.saveSnippet({
-      name,
-      code: rawJS,
-    })
-    drawer.hide()
+    loading = true
+    try {
+      await snippetStore.saveSnippet({
+        name,
+        code: rawJS,
+      })
+      drawer.hide()
+      notifications.success(`Snippet ${name} saved`)
+    } catch (error) {
+      notifications.error("Error saving snippet")
+    }
+    loading = false
   }
 
   const deleteSnippet = async () => {
-    await snippetStore.deleteSnippet(snippet.name)
-    drawer.hide()
+    loading = true
+    try {
+      await snippetStore.deleteSnippet(snippet.name)
+      drawer.hide()
+    } catch (error) {
+      notifications.error("Error deleting snippet")
+    }
+    loading = false
   }
 
   // Validating function names is not as easy as you think. A simple regex does
@@ -48,7 +63,7 @@
   // Instead, we can run a simple regex to roughly validate it, then basically
   // try executing it and see if it's valid JS. The initial regex prevents
   // against any potential XSS attacks here.
-  const validateName = name => {
+  const validateName = (name, snippets) => {
     if (!name?.length) {
       return "Name is required"
     }
@@ -58,6 +73,9 @@
     if (!roughValidNameRegex.test(name)) {
       return "No special characters or spaces"
     }
+    if (snippets.some(snippet => snippet.name === name)) {
+      return "That name is already in use"
+    }
     const js = `(function ${name}(){return true})()`
     try {
       return eval(js) === true ? null : "Invalid name"
@@ -89,9 +107,11 @@
   </svelte:fragment>
   <svelte:fragment slot="buttons">
     {#if snippet}
-      <Button warning on:click={deleteSnippet}>Delete</Button>
+      <Button warning on:click={deleteSnippet} disabled={loading}>
+        Delete
+      </Button>
     {/if}
-    <Button cta on:click={saveSnippet} disabled={nameError != null}>
+    <Button cta on:click={saveSnippet} disabled={loading || nameError != null}>
       Save
     </Button>
   </svelte:fragment>
diff --git a/packages/builder/src/stores/builder/snippets.js b/packages/builder/src/stores/builder/snippets.js
index 9c28536298..624721317a 100644
--- a/packages/builder/src/stores/builder/snippets.js
+++ b/packages/builder/src/stores/builder/snippets.js
@@ -1,58 +1,33 @@
-import { writable } from "svelte/store"
-
-const EXAMPLE_SNIPPETS = [
-  {
-    name: "Square",
-    code: `
-        return function(num) {
-          return num * num
-        }
-      `,
-  },
-  {
-    name: "HelloWorld",
-    code: `
-        return "Hello, world!"
-      `,
-  },
-  {
-    name: "Colorful",
-    code: `
-        let a = null
-        let b = "asdasd"
-        let c = 123123
-        let d = undefined
-        let e = [1, 2, 3]
-        let f = { foo: "bar" }
-        let g = Math.round(1.234)
-        if (a === b) {
-          return c ?? e
-        }
-        return d || f
-        // comment
-        let h = 1 + 2 + 3 * 3
-        let i = true
-        let j = false
-      `,
-  },
-]
+import { writable, get } from "svelte/store"
+import { API } from "api"
+import { appStore } from "./app"
 
 const createSnippetStore = () => {
-  const store = writable(EXAMPLE_SNIPPETS)
+  const store = writable([])
 
   const syncMetadata = metadata => {
-    store.set(metadata?.snippets || EXAMPLE_SNIPPETS)
+    store.set(metadata?.snippets || [])
   }
 
-  const saveSnippet = updatedSnippet => {
-    store.update(state => [
-      ...state.filter(snippet => snippet.name !== updatedSnippet.name),
+  const saveSnippet = async updatedSnippet => {
+    const snippets = [
+      ...get(store).filter(snippet => snippet.name !== updatedSnippet.name),
       updatedSnippet,
-    ])
+    ]
+    const app = await API.saveAppMetadata({
+      appId: get(appStore).appId,
+      metadata: { snippets },
+    })
+    syncMetadata(app)
   }
 
-  const deleteSnippet = snippetName => {
-    store.update(state => state.filter(snippet => snippet.name !== snippetName))
+  const deleteSnippet = async snippetName => {
+    const snippets = get(store).filter(snippet => snippet.name !== snippetName)
+    const app = await API.saveAppMetadata({
+      appId: get(appStore).appId,
+      metadata: { snippets },
+    })
+    syncMetadata(app)
   }
 
   return {
diff --git a/packages/client/src/stores/derived/snippets.js b/packages/client/src/stores/derived/snippets.js
index 55e7276edc..3f11c040bd 100644
--- a/packages/client/src/stores/derived/snippets.js
+++ b/packages/client/src/stores/derived/snippets.js
@@ -1,6 +1,6 @@
 import { derived } from "svelte/store"
 import { appStore } from "../app.js"
 
-export const snippets = derived(appStore, $appStore => $appStore.snippets)
-
-snippets.subscribe(console.log)
+export const snippets = derived(appStore, $appStore => {
+  return $appStore?.application?.snippets || []
+})

From cb7f33de77006c7db9a2b040c8894b65bfad3a74 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 6 Mar 2024 20:27:46 +0000
Subject: [PATCH 085/148] Add automatic naming of snippets

---
 .../common/bindings/ClientBindingPanel.svelte |  4 +-
 .../common/bindings/ServerBindingPanel.svelte |  4 +-
 .../common/bindings/SnippetDrawer.svelte      | 12 ++--
 packages/builder/src/helpers/duplicate.js     | 50 +++++++++++++++
 .../src/helpers/tests/duplicate.test.js       | 63 ++++++++++++++++++-
 packages/builder/src/stores/builder/index.js  |  6 +-
 .../builder/src/stores/builder/snippets.js    |  4 +-
 .../builder/src/stores/builder/websocket.js   |  4 +-
 8 files changed, 130 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index d3e80cf696..efdaa51dba 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
-  import { previewStore, snippetStore } from "stores/builder"
+  import { previewStore, snippets } from "stores/builder"
   import { onMount } from "svelte"
 
   export let bindings = []
@@ -30,7 +30,7 @@
   bind:valid
   bindings={enrichedBindings}
   context={$previewStore.selectedComponentContext}
-  snippets={$snippetStore}
+  snippets={$snippets}
   {value}
   {allowJS}
   {allowHelpers}
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index b4d31bd74a..8546758a04 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
-  import { snippetStore } from "stores/builder"
+  import { snippets } from "stores/builder"
 
   export let bindings = []
   export let valid
@@ -23,7 +23,7 @@
 <BindingPanel
   bind:valid
   bindings={enrichedBindings}
-  snippets={$snippetStore}
+  snippets={$snippets}
   {value}
   {allowJS}
   {context}
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 05a397a3c7..9b91b1a47c 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -10,7 +10,8 @@
   } from "@budibase/bbui"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
-  import { snippetStore } from "stores/builder"
+  import { snippets } from "stores/builder"
+  import { getSequentialName } from "helpers/duplicate"
 
   export let snippet
 
@@ -25,16 +26,17 @@
   let code = ""
   let loading = false
 
+  $: defaultName = getSequentialName($snippets, "MySnippet", x => x.name)
   $: key = snippet?.name
-  $: name = snippet?.name || "MySnippet"
+  $: name = snippet?.name || defaultName
   $: code = snippet?.code ? encodeJSBinding(snippet.code) : ""
   $: rawJS = decodeJSBinding(code)
-  $: nameError = validateName(name, $snippetStore)
+  $: nameError = validateName(name, $snippets)
 
   const saveSnippet = async () => {
     loading = true
     try {
-      await snippetStore.saveSnippet({
+      await snippets.saveSnippet({
         name,
         code: rawJS,
       })
@@ -49,7 +51,7 @@
   const deleteSnippet = async () => {
     loading = true
     try {
-      await snippetStore.deleteSnippet(snippet.name)
+      await snippets.deleteSnippet(snippet.name)
       drawer.hide()
     } catch (error) {
       notifications.error("Error deleting snippet")
diff --git a/packages/builder/src/helpers/duplicate.js b/packages/builder/src/helpers/duplicate.js
index 1547fcd4d1..c2a924f97b 100644
--- a/packages/builder/src/helpers/duplicate.js
+++ b/packages/builder/src/helpers/duplicate.js
@@ -48,3 +48,53 @@ export const duplicateName = (name, allNames) => {
 
   return `${baseName} ${number}`
 }
+
+/**
+ * More flexible alternative to the above function, which handles getting the
+ * next sequential name from an array of existing items while accounting for
+ * any type of prefix, and being able to deeply retrieve that name from the
+ * existing item array.
+ *
+ * Examples with a prefix of "foo":
+ * [] => "foo"
+ * ["foo"] => "foo2"
+ * ["foo", "foo6"] => "foo7"
+ *
+ * Examples with a prefix of "foo " (space at the end):
+ * [] => "foo"
+ * ["foo"] => "foo 2"
+ * ["foo", "foo 6"] => "foo 7"
+ *
+ * @param items the array of existing items
+ * @param prefix the string prefix of each name, including any spaces desired
+ * @param getName optional function to extract the name for an item, if not a
+ *  flat array of strings
+ */
+export const getSequentialName = (items, prefix, getName = x => x) => {
+  if (!prefix?.length || !getName) {
+    return null
+  }
+  const trimmedPrefix = prefix.trim()
+  if (!items?.length) {
+    return trimmedPrefix
+  }
+  let max = 0
+  items.forEach(item => {
+    const name = getName(item)
+    if (typeof name !== "string" || !name.startsWith(trimmedPrefix)) {
+      return
+    }
+    const split = name.split(trimmedPrefix)
+    if (split.length !== 2) {
+      return
+    }
+    if (split[1].trim() === "") {
+      split[1] = "1"
+    }
+    const num = parseInt(split[1])
+    if (num > max) {
+      max = num
+    }
+  })
+  return max === 0 ? trimmedPrefix : `${prefix}${max + 1}`
+}
diff --git a/packages/builder/src/helpers/tests/duplicate.test.js b/packages/builder/src/helpers/tests/duplicate.test.js
index 400abed0aa..7e51c5ff2a 100644
--- a/packages/builder/src/helpers/tests/duplicate.test.js
+++ b/packages/builder/src/helpers/tests/duplicate.test.js
@@ -1,5 +1,5 @@
 import { expect, describe, it } from "vitest"
-import { duplicateName } from "../duplicate"
+import { duplicateName, getSequentialName } from "../duplicate"
 
 describe("duplicate", () => {
   describe("duplicates a name ", () => {
@@ -40,3 +40,64 @@ describe("duplicate", () => {
     })
   })
 })
+
+describe("getSequentialName", () => {
+  it("handles nullish items", async () => {
+    const name = getSequentialName(null, "foo", () => {})
+    expect(name).toBe("foo")
+  })
+
+  it("handles nullish prefix", async () => {
+    const name = getSequentialName([], null, () => {})
+    expect(name).toBe(null)
+  })
+
+  it("handles nullish getName function", async () => {
+    const name = getSequentialName([], "foo", null)
+    expect(name).toBe(null)
+  })
+
+  it("handles just the prefix", async () => {
+    const name = getSequentialName(["foo"], "foo", x => x)
+    expect(name).toBe("foo2")
+  })
+
+  it("handles continuous ranges", async () => {
+    const name = getSequentialName(["foo", "foo2", "foo3"], "foo", x => x)
+    expect(name).toBe("foo4")
+  })
+
+  it("handles discontinuous ranges", async () => {
+    const name = getSequentialName(["foo", "foo3"], "foo", x => x)
+    expect(name).toBe("foo4")
+  })
+
+  it("handles a space inside the prefix", async () => {
+    const name = getSequentialName(["foo", "foo 2", "foo 3"], "foo ", x => x)
+    expect(name).toBe("foo 4")
+  })
+
+  it("handles a space inside the prefix with just the prefix", async () => {
+    const name = getSequentialName(["foo"], "foo ", x => x)
+    expect(name).toBe("foo 2")
+  })
+
+  it("handles no matches", async () => {
+    const name = getSequentialName(["aaa", "bbb"], "foo", x => x)
+    expect(name).toBe("foo")
+  })
+
+  it("handles similar names", async () => {
+    const name = getSequentialName(
+      ["fooo1", "2foo", "a3foo4", "5foo5"],
+      "foo",
+      x => x
+    )
+    expect(name).toBe("foo")
+  })
+
+  it("handles non-string names", async () => {
+    const name = getSequentialName([null, 4123, [], {}], "foo", x => x)
+    expect(name).toBe("foo")
+  })
+})
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 52561c09f4..4df4bc3c41 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -18,7 +18,7 @@ import {
 } from "./automations.js"
 import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
-import { snippetStore } from "./snippets"
+import { snippets } from "./snippets"
 
 // Backend
 import { tables } from "./tables"
@@ -63,7 +63,7 @@ export {
   queries,
   flags,
   hoverStore,
-  snippetStore,
+  snippets,
 }
 
 export const reset = () => {
@@ -103,7 +103,7 @@ export const initialise = async pkg => {
   builderStore.init(application)
   navigationStore.syncAppNavigation(application?.navigation)
   themeStore.syncAppTheme(application)
-  snippetStore.syncMetadata(application)
+  snippets.syncMetadata(application)
   screenStore.syncAppScreens(pkg)
   layoutStore.syncAppLayouts(pkg)
   resetBuilderHistory()
diff --git a/packages/builder/src/stores/builder/snippets.js b/packages/builder/src/stores/builder/snippets.js
index 624721317a..72ab274730 100644
--- a/packages/builder/src/stores/builder/snippets.js
+++ b/packages/builder/src/stores/builder/snippets.js
@@ -2,7 +2,7 @@ import { writable, get } from "svelte/store"
 import { API } from "api"
 import { appStore } from "./app"
 
-const createSnippetStore = () => {
+const createsnippets = () => {
   const store = writable([])
 
   const syncMetadata = metadata => {
@@ -38,4 +38,4 @@ const createSnippetStore = () => {
   }
 }
 
-export const snippetStore = createSnippetStore()
+export const snippets = createsnippets()
diff --git a/packages/builder/src/stores/builder/websocket.js b/packages/builder/src/stores/builder/websocket.js
index 71d9f852f7..0704f26439 100644
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/packages/builder/src/stores/builder/websocket.js
@@ -6,7 +6,7 @@ import {
   themeStore,
   navigationStore,
   deploymentStore,
-  snippetStore,
+  snippets,
   datasources,
   tables,
 } from "stores/builder"
@@ -65,7 +65,7 @@ export const createBuilderWebsocket = appId => {
     appStore.syncMetadata(metadata)
     themeStore.syncMetadata(metadata)
     navigationStore.syncMetadata(metadata)
-    snippetStore.syncMetadata(metadata)
+    snippets.syncMetadata(metadata)
   })
   socket.onOther(
     BuilderSocketEvent.AppPublishChange,

From d08628234f47a85694f2b12971268b6d07b91816 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Mar 2024 08:25:02 +0000
Subject: [PATCH 086/148] Fix z-index of drawers

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

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 9bd4eb5848..966a6cecb7 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -221,7 +221,7 @@
     height: 420px;
     background: var(--background);
     border: var(--border-light);
-    z-index: 999;
+    z-index: 100;
     border-radius: 8px;
     overflow: hidden;
     box-sizing: border-box;
@@ -248,7 +248,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 999;
+    z-index: 100;
     display: block;
     transition: opacity 260ms ease-out;
   }

From ccb32af0786299ee483735f86b524dbc42e766ce Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Mar 2024 08:25:11 +0000
Subject: [PATCH 087/148] Add deletion confirmation to snippets

---
 .../common/bindings/SnippetDrawer.svelte      | 23 ++++++++++++++-----
 .../[screenId]/_components/AppPreview.svelte  |  2 ++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 9b91b1a47c..e7dd5c7a22 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -12,6 +12,7 @@
   import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
   import { snippets } from "stores/builder"
   import { getSequentialName } from "helpers/duplicate"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let snippet
 
@@ -25,6 +26,7 @@
   let name = ""
   let code = ""
   let loading = false
+  let deleteConfirmationDialog
 
   $: defaultName = getSequentialName($snippets, "MySnippet", x => x.name)
   $: key = snippet?.name
@@ -36,12 +38,10 @@
   const saveSnippet = async () => {
     loading = true
     try {
-      await snippets.saveSnippet({
-        name,
-        code: rawJS,
-      })
+      const newSnippet = { name, code: rawJS }
+      await snippets.saveSnippet(newSnippet)
       drawer.hide()
-      notifications.success(`Snippet ${name} saved`)
+      notifications.success(`Snippet ${newSnippet.name} saved`)
     } catch (error) {
       notifications.error("Error saving snippet")
     }
@@ -109,7 +109,11 @@
   </svelte:fragment>
   <svelte:fragment slot="buttons">
     {#if snippet}
-      <Button warning on:click={deleteSnippet} disabled={loading}>
+      <Button
+        warning
+        on:click={deleteConfirmationDialog.show}
+        disabled={loading}
+      >
         Delete
       </Button>
     {/if}
@@ -136,6 +140,13 @@
   </svelte:fragment>
 </Drawer>
 
+<ConfirmDialog
+  bind:this={deleteConfirmationDialog}
+  title="Delete snippet"
+  body={`Are you sure you want to delete ${snippet?.name}?`}
+  onOk={deleteSnippet}
+/>
+
 <style>
   .name {
     display: flex;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 530b3eee2c..cadc83d16a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -10,6 +10,7 @@
     navigationStore,
     selectedScreen,
     hoverStore,
+    snippets,
   } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -68,6 +69,7 @@
       hostname: window.location.hostname,
       port: window.location.port,
     },
+    snippets: $snippets,
   }
 
   // Refresh the preview when required

From d4a657bbfe54cd1bca32cb29b1981f222569b21b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Mar 2024 08:25:31 +0000
Subject: [PATCH 088/148] Pass snippets from builder to client when inside the
 builder preview to ensure new snippets can be evaluated

---
 packages/client/src/index.js                           |  1 +
 packages/client/src/stores/builder.js                  |  1 +
 packages/client/src/stores/derived/snippets.js         | 10 +++++++---
 .../src/api/controllers/static/templates/preview.hbs   |  4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 1ce7101466..9c249dd5b3 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -42,6 +42,7 @@ const loadBudibase = async () => {
     hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
     usedPlugins: window["##BUDIBASE_USED_PLUGINS##"],
     location: window["##BUDIBASE_LOCATION##"],
+    snippets: window["##BUDIBASE_SNIPPETS##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 2e745885b5..5440fc3a79 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -18,6 +18,7 @@ const createBuilderStore = () => {
     usedPlugins: null,
     eventResolvers: {},
     metadata: null,
+    snippets: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
diff --git a/packages/client/src/stores/derived/snippets.js b/packages/client/src/stores/derived/snippets.js
index 3f11c040bd..806ff85c4a 100644
--- a/packages/client/src/stores/derived/snippets.js
+++ b/packages/client/src/stores/derived/snippets.js
@@ -1,6 +1,10 @@
 import { derived } from "svelte/store"
 import { appStore } from "../app.js"
+import { builderStore } from "../builder.js"
 
-export const snippets = derived(appStore, $appStore => {
-  return $appStore?.application?.snippets || []
-})
+export const snippets = derived(
+  [appStore, builderStore],
+  ([$appStore, $builderStore]) => {
+    return $builderStore?.snippets || $appStore?.application?.snippets || []
+  }
+)
diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs
index 63c61baa9f..54b5b1a4e4 100644
--- a/packages/server/src/api/controllers/static/templates/preview.hbs
+++ b/packages/server/src/api/controllers/static/templates/preview.hbs
@@ -72,7 +72,8 @@
         navigation,
         hiddenComponentIds,
         usedPlugins,
-        location
+        location,
+        snippets
       } = parsed
 
       // Set some flags so the app knows we're in the builder
@@ -89,6 +90,7 @@
       window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
       window["##BUDIBASE_USED_PLUGINS##"] = usedPlugins
       window["##BUDIBASE_LOCATION##"] = location
+      window["##BUDIBASE_SNIPPETS##"] = snippets
 
       // Initialise app
       try {

From 84a50045444607d35d9cc39c421204d52a5f1a6b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Mar 2024 08:40:41 +0000
Subject: [PATCH 089/148] Fix BBUI imports

---
 packages/bbui/src/Drawer/Drawer.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 966a6cecb7..8bb11b833a 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -57,11 +57,12 @@
 </script>
 
 <script>
-  import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Portal from "svelte-portal"
   import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
-  import { Icon, ActionButton } from "@budibase/bbui"
 
   export let title
   export let forceModal = false

From ce1c98405a7d0c91bc665f223129cd7889271360 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 8 Mar 2024 14:40:01 +0000
Subject: [PATCH 090/148] Lint

---
 packages/builder/src/pages/builder/portal/apps/index.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index c087e3cc86..6781bcd197 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -31,7 +31,6 @@
   import AppRow from "components/start/AppRow.svelte"
   import Logo from "assets/bb-space-man.svg"
 
-  let sortBy = "name"
   let template
   let creationModal
   let appLimitModal

From c5753dab0aa6e56010794cda3cb454331f55e572 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 11 Mar 2024 09:20:19 +0000
Subject: [PATCH 091/148] Fix for duplicate app, PR feedback. Update for View
 only UX in app row, ensure favourite is displayed

---
 .../src/components/start/AppRow.svelte        | 23 +++++++++----------
 .../server/src/api/controllers/application.ts |  6 ++++-
 .../worker/src/api/controllers/global/self.ts |  9 --------
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index c12801d21f..6dd4030f3a 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -80,9 +80,9 @@
     <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
   </div>
 
-  {#if isBuilder}
-    <div class="actions-wrap">
-      <div class="app-row-actions">
+  <div class="actions-wrap">
+    <div class="app-row-actions">
+      {#if isBuilder}
         <div class="row-action">
           <Button size="S" secondary on:click={lockedAction || goToBuilder}>
             Edit
@@ -99,17 +99,16 @@
             }}
           />
         </div>
-      </div>
-      <div class="favourite-icon">
-        <FavouriteAppButton {app} noWrap />
-      </div>
+      {:else}
+        <!-- this can happen if an app builder has app user access to an app -->
+        <Button size="S" secondary>View</Button>
+      {/if}
     </div>
-  {:else if app.deployed}
-    <!-- this can happen if an app builder has app user access to an app -->
-    <div class="app-row-actions">
-      <Button size="S" secondary>View</Button>
+
+    <div class="favourite-icon">
+      <FavouriteAppButton {app} noWrap />
     </div>
-  {/if}
+  </div>
 </div>
 
 <style>
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 47cc08c738..afc2467ec2 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -59,6 +59,7 @@ import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
 import { sdk as sharedCoreSDK } from "@budibase/shared-core"
 import * as appMigrations from "../../appMigrations"
+import { cloneDeep } from "lodash"
 
 // utility function, need to do away with this
 async function getLayouts() {
@@ -682,7 +683,10 @@ export async function duplicateApp(
   // Build a new request
   const createRequest = {
     roleId: ctx.roleId,
-    user: ctx.user,
+    user: {
+      ...cloneDeep(ctx.user),
+      _id: dbCore.getGlobalIDFromUserMetadataID(ctx.user._id || ""),
+    },
     request: {
       body: createRequestBody,
     },
diff --git a/packages/worker/src/api/controllers/global/self.ts b/packages/worker/src/api/controllers/global/self.ts
index 9caf4beff0..15fe84b021 100644
--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/packages/worker/src/api/controllers/global/self.ts
@@ -199,12 +199,3 @@ export async function updateSelf(
     _rev: user._rev!,
   }
 }
-
-// export default {
-//   generateAPIKey,
-//   fetchAPIKey,
-//   getSelf,
-//   syncAppFavourites,
-//   fetchAppsByIds,
-//   updateSelf,
-// }

From 9f29a2c3d9bcd9c53e5b43d43b2884f1cc4e7138 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 11 Mar 2024 09:32:13 +0000
Subject: [PATCH 092/148] Creator bug fix was not commited

---
 .../builder/src/components/start/CreateAppModal.svelte     | 6 ++++++
 .../builder/src/components/start/DuplicateAppModal.svelte  | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 801f119dff..7fcc27ef03 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -16,6 +16,7 @@
   import * as appValidation from "helpers/validation/yup/app"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import { lowercase } from "helpers"
+  import { sdk } from "@budibase/shared-core"
 
   export let template
 
@@ -141,6 +142,11 @@
       // Create user
       await auth.setInitInfo({})
 
+      if (sdk.users.isCreator($auth.user, app?.devId)) {
+        // Refresh for access to created applications
+        await auth.getSelf()
+      }
+
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
       creating = false
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
index 2386d34437..a37e7f2b22 100644
--- a/packages/builder/src/components/start/DuplicateAppModal.svelte
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -9,9 +9,10 @@
   import { createValidationStore } from "helpers/validation/yup"
   import { writable, get } from "svelte/store"
   import * as appValidation from "helpers/validation/yup/app"
-  import { appsStore } from "stores/portal"
+  import { appsStore, auth } from "stores/portal"
   import { onMount } from "svelte"
   import { API } from "api"
+  import { sdk } from "@budibase/shared-core"
 
   export let appId
   export let appName
@@ -69,6 +70,10 @@
     try {
       await API.duplicateApp(data, appId)
       appsStore.load()
+      if (sdk.users.isCreator($auth.user, app?.devId)) {
+        // Refresh for access to created applications
+        await auth.getSelf()
+      }
       onDuplicateSuccess()
       notifications.success("App duplicated successfully")
     } catch (err) {

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

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

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

From 1f7e8f19ed4a9eb8d0dbfa9ab6eb674bfd1da539 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 11 Mar 2024 09:55:44 +0000
Subject: [PATCH 094/148] 
 packages/builder/src/components/start/DuplicateAppModal.svelte

---
 packages/builder/src/components/start/CreateAppModal.svelte   | 2 +-
 .../builder/src/components/start/DuplicateAppModal.svelte     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 7fcc27ef03..b5fed9cdc1 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -142,7 +142,7 @@
       // Create user
       await auth.setInitInfo({})
 
-      if (sdk.users.isCreator($auth.user, app?.devId)) {
+      if (!sdk.users.isBuilder($auth.user, createdApp?.appId)) {
         // Refresh for access to created applications
         await auth.getSelf()
       }
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
index a37e7f2b22..0db92ff76d 100644
--- a/packages/builder/src/components/start/DuplicateAppModal.svelte
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -68,9 +68,9 @@
     }
 
     try {
-      await API.duplicateApp(data, appId)
+      const app = await API.duplicateApp(data, appId)
       appsStore.load()
-      if (sdk.users.isCreator($auth.user, app?.devId)) {
+      if (!sdk.users.isBuilder($auth.user, app?.duplicateAppId)) {
         // Refresh for access to created applications
         await auth.getSelf()
       }

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

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

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

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

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

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

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

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

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

From 8c90d422c297d37c2b49ef76a7f02a1c3eb0c5c5 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 11 Mar 2024 12:21:59 +0000
Subject: [PATCH 098/148] Update to update self endpoint to make remove
 distinct flow for appFavourites

---
 .../worker/src/api/controllers/global/self.ts | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/worker/src/api/controllers/global/self.ts b/packages/worker/src/api/controllers/global/self.ts
index 15fe84b021..a3c001de03 100644
--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/packages/worker/src/api/controllers/global/self.ts
@@ -164,23 +164,21 @@ export async function updateSelf(
   const update = ctx.request.body
 
   let user = await userSdk.db.getUser(ctx.user._id!)
+  let requestAppFavourites: string[] = [...(update.appFavourites || [])]
+  let updatedAppFavourites: string[] | undefined
 
   if ("appFavourites" in update) {
     const appIds: string[] = processUserAppFavourites(
       user,
-      update.appFavourites
+      requestAppFavourites
     )
-    const validAppIds: string[] = await syncAppFavourites(appIds)
+    updatedAppFavourites = await syncAppFavourites(appIds)
+  }
 
-    user = {
-      ...user,
-      appFavourites: validAppIds,
-    }
-  } else {
-    user = {
-      ...user,
-      ...update,
-    }
+  user = {
+    ...user,
+    ...update,
+    ...(updatedAppFavourites ? { appFavourites: updatedAppFavourites } : {}),
   }
 
   user = await userSdk.db.save(user, { requirePassword: false })

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

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

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

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

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

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

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

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

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

From d6fd5933a4e6b096ac7871e7eaa04e0d18400bb2 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 11 Mar 2024 14:22:41 +0000
Subject: [PATCH 102/148] PR feedback and bug fix for server tests being
 completely skipped

---
 .../server/src/api/controllers/application.ts |   1 -
 .../src/api/routes/tests/application.spec.ts  | 196 +++++++++---------
 packages/types/src/api/web/application.ts     |   1 -
 3 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 47cc08c738..0a84451bac 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -697,7 +697,6 @@ export async function duplicateApp(
   }
 
   ctx.body = {
-    message: "app duplicated",
     duplicateAppId: newApplication?.appId,
     sourceAppId,
   }
diff --git a/packages/server/src/api/routes/tests/application.spec.ts b/packages/server/src/api/routes/tests/application.spec.ts
index 2a9e723423..04edc91bf6 100644
--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@@ -34,6 +34,96 @@ describe("/applications", () => {
     jest.clearAllMocks()
   })
 
+  // These need to go first for the app totals to make sense
+  describe("permissions", () => {
+    it("should only return apps a user has access to", async () => {
+      let user = await config.createUser({
+        builder: { global: false },
+        admin: { global: false },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(0)
+      })
+
+      user = await config.globalUser({
+        ...user,
+        builder: {
+          apps: [config.getProdAppId()],
+        },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(1)
+      })
+    })
+
+    it("should only return apps a user has access to through a custom role", async () => {
+      let user = await config.createUser({
+        builder: { global: false },
+        admin: { global: false },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(0)
+      })
+
+      const role = await config.api.roles.save({
+        name: "Test",
+        inherits: "PUBLIC",
+        permissionId: "read_only",
+        version: "name",
+      })
+
+      user = await config.globalUser({
+        ...user,
+        roles: {
+          [config.getProdAppId()]: role.name,
+        },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(1)
+      })
+    })
+
+    it("should only return apps a user has access to through a custom role on a group", async () => {
+      let user = await config.createUser({
+        builder: { global: false },
+        admin: { global: false },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(0)
+      })
+
+      const roleName = uuid.v4().replace(/-/g, "")
+      const role = await config.api.roles.save({
+        name: roleName,
+        inherits: "PUBLIC",
+        permissionId: "read_only",
+        version: "name",
+      })
+
+      const group = await config.createGroup(role._id!)
+
+      user = await config.globalUser({
+        ...user,
+        userGroups: [group._id!],
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(1)
+      })
+    })
+  })
+
   describe("create", () => {
     it("creates empty app", async () => {
       const app = await config.api.application.create({ name: utils.newid() })
@@ -96,13 +186,16 @@ describe("/applications", () => {
     })
 
     it("should reject with a known name", async () => {
-      await config.api.application.create({ name: app.name }, { status: 400 })
+      await config.api.application.create(
+        { name: app.name },
+        { body: { message: "App name is already in use." }, status: 400 }
+      )
     })
 
     it("should reject with a known url", async () => {
       await config.api.application.create(
         { name: "made up", url: app?.url! },
-        { status: 400 }
+        { body: { message: "App URL is already in use." }, status: 400 }
       )
     })
   })
@@ -279,10 +372,9 @@ describe("/applications", () => {
           name: app.name,
           url: "/known-name",
         },
-        { status: 400 }
+        { body: { message: "App name is already in use." }, status: 400 }
       )
-
-      expect(resp.message).toEqual("App name is already in use.")
+      expect(events.app.duplicated).not.toBeCalled()
     })
 
     it("should reject with a known url", async () => {
@@ -292,10 +384,9 @@ describe("/applications", () => {
           name: "this is fine",
           url: app.url,
         },
-        { status: 400 }
+        { body: { message: "App URL is already in use." }, status: 400 }
       )
-
-      expect(resp.message).toEqual("App URL is already in use.")
+      expect(events.app.duplicated).not.toBeCalled()
     })
   })
 
@@ -319,93 +410,4 @@ describe("/applications", () => {
       expect(devLogs.data.length).toBe(0)
     })
   })
-
-  describe("permissions", () => {
-    it("should only return apps a user has access to", async () => {
-      let user = await config.createUser({
-        builder: { global: false },
-        admin: { global: false },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(0)
-      })
-
-      user = await config.globalUser({
-        ...user,
-        builder: {
-          apps: [config.getProdAppId()],
-        },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(1)
-      })
-    })
-
-    it("should only return apps a user has access to through a custom role", async () => {
-      let user = await config.createUser({
-        builder: { global: false },
-        admin: { global: false },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(0)
-      })
-
-      const role = await config.api.roles.save({
-        name: "Test",
-        inherits: "PUBLIC",
-        permissionId: "read_only",
-        version: "name",
-      })
-
-      user = await config.globalUser({
-        ...user,
-        roles: {
-          [config.getProdAppId()]: role.name,
-        },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(1)
-      })
-    })
-
-    it.only("should only return apps a user has access to through a custom role on a group", async () => {
-      let user = await config.createUser({
-        builder: { global: false },
-        admin: { global: false },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(0)
-      })
-
-      const roleName = uuid.v4().replace(/-/g, "")
-      const role = await config.api.roles.save({
-        name: roleName,
-        inherits: "PUBLIC",
-        permissionId: "read_only",
-        version: "name",
-      })
-
-      const group = await config.createGroup(role._id!)
-
-      user = await config.globalUser({
-        ...user,
-        userGroups: [group._id!],
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(1)
-      })
-    })
-  })
 })
diff --git a/packages/types/src/api/web/application.ts b/packages/types/src/api/web/application.ts
index b77e81880b..68c349be5a 100644
--- a/packages/types/src/api/web/application.ts
+++ b/packages/types/src/api/web/application.ts
@@ -22,7 +22,6 @@ export interface DuplicateAppRequest {
 export interface DuplicateAppResponse {
   duplicateAppId: string
   sourceAppId: string
-  message: string
 }
 
 export interface FetchAppDefinitionResponse {

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

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

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

From cef0911950ca8fdf6c6846428ef709aac1e0ff83 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 16:21:07 +0000
Subject: [PATCH 104/148] Fix merge

---
 .../common/bindings/BindingPanel.svelte          | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 67d7e578b1..96a2187755 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -172,16 +172,8 @@
 
   const updateValue = val => {
     const runtimeExpression = readableToRuntimeBinding(enrichedBindings, val)
-<<<<<<< HEAD
-    valid = isValid(runtimeExpression)
-    if (valid) {
-      dispatch("change", val)
-      requestEval(runtimeExpression, context, snippets)
-    }
-=======
     dispatch("change", val)
-    requestUpdateEvaluation(runtimeExpression, context)
->>>>>>> fe12a8606438d41437e21729068b91038ba6df37
+    requestEval(runtimeExpression, context, snippets)
   }
 
   const onSelectHelper = (helper, js) => {
@@ -232,7 +224,6 @@
     jsValue = encodeJSBinding(e.detail)
     updateValue(jsValue)
   }
-<<<<<<< HEAD
 
   onMount(() => {
     // Set the initial mode appropriately
@@ -245,12 +236,7 @@
 
     // Set the initial side panel
     sidePanel = sidePanelOptions[0]
-
-    // Determine if our initial value is valid
-    valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
   })
-=======
->>>>>>> fe12a8606438d41437e21729068b91038ba6df37
 </script>
 
 <DrawerContent padding={false}>

From 79ae159329718780cf755225b4d2cbabc2ab51fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Mar 2024 21:10:53 +0000
Subject: [PATCH 105/148] Add code mirror completions for snippets

---
 .../common/CodeEditor/CodeEditor.svelte       | 67 +++++++++++++++----
 .../src/components/common/CodeEditor/index.js | 38 +++++++++++
 .../common/bindings/BindingPanel.svelte       |  2 +
 3 files changed, 94 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index b63c646ed4..1ddc3d802a 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -83,8 +83,8 @@
     })
   }
 
-  // For handlebars only.
-  const bindStyle = new MatchDecorator({
+  // Match decoration for HBS bindings
+  const hbsMatchDeco = new MatchDecorator({
     regexp: FIND_ANY_HBS_REGEX,
     decoration: () => {
       return Decoration.mark({
@@ -95,12 +95,35 @@
       })
     },
   })
-
-  let plugin = ViewPlugin.define(
+  const hbsMatchDecoPlugin = ViewPlugin.define(
     view => ({
-      decorations: bindStyle.createDeco(view),
+      decorations: hbsMatchDeco.createDeco(view),
       update(u) {
-        this.decorations = bindStyle.updateDeco(u, this.decorations)
+        this.decorations = hbsMatchDeco.updateDeco(u, this.decorations)
+      },
+    }),
+    {
+      decorations: v => v.decorations,
+    }
+  )
+
+  // Match decoration for snippets
+  const snippetMatchDeco = new MatchDecorator({
+    regexp: /snippets.[^\s(]+/g,
+    decoration: () => {
+      return Decoration.mark({
+        tag: "span",
+        attributes: {
+          class: "snippet-wrap",
+        },
+      })
+    },
+  })
+  const snippetMatchDecoPlugin = ViewPlugin.define(
+    view => ({
+      decorations: snippetMatchDeco.createDeco(view),
+      update(u) {
+        this.decorations = snippetMatchDeco.updateDeco(u, this.decorations)
       },
     }),
     {
@@ -142,7 +165,6 @@
 
   const buildBaseExtensions = () => {
     return [
-      ...(mode.name === "handlebars" ? [plugin] : []),
       drawSelection(),
       dropCursor(),
       bracketMatching(),
@@ -165,7 +187,10 @@
           override: [...completions],
           closeOnBlur: true,
           icons: false,
-          optionClass: () => "autocomplete-option",
+          optionClass: completion =>
+            completion.simple
+              ? "autocomplete-option-simple"
+              : "autocomplete-option",
         })
       )
       complete.push(
@@ -191,18 +216,23 @@
             view.dispatch(tr)
             return true
           }
-
           return false
         })
       )
     }
 
+    // JS only plugins
     if (mode.name === "javascript") {
+      complete.push(snippetMatchDecoPlugin)
       complete.push(javascript())
       if (!readonly) {
         complete.push(highlightWhitespace())
       }
     }
+    // HBS only plugins
+    else {
+      complete.push(hbsMatchDecoPlugin)
+    }
 
     if (placeholder) {
       complete.push(placeholderFn(placeholder))
@@ -376,9 +406,12 @@
     font-style: italic;
   }
 
-  /* Highlight bindings */
+  /* Highlight bindings and snippets */
   .code-editor :global(.binding-wrap) {
-    color: var(--spectrum-global-color-blue-700);
+    color: var(--spectrum-global-color-blue-700) !important;
+  }
+  .code-editor :global(.snippet-wrap *) {
+    color: #61afef !important;
   }
 
   /* Completion popover */
@@ -407,7 +440,8 @@
   }
 
   /* Completion item container */
-  .code-editor :global(.autocomplete-option) {
+  .code-editor :global(.autocomplete-option),
+  .code-editor :global(.autocomplete-option-simple) {
     padding: var(--spacing-s) var(--spacing-m) !important;
     padding-left: calc(16px + 2 * var(--spacing-m)) !important;
     display: flex;
@@ -415,9 +449,13 @@
     align-items: center;
     color: var(--spectrum-alias-text-color);
   }
+  .code-editor :global(.autocomplete-option-simple) {
+    padding-left: var(--spacing-s) !important;
+  }
 
   /* Highlighted completion item */
-  .code-editor :global(.autocomplete-option[aria-selected]) {
+  .code-editor :global(.autocomplete-option[aria-selected]),
+  .code-editor :global(.autocomplete-option-simple[aria-selected]) {
     background: var(--spectrum-global-color-blue-400);
     color: white;
   }
@@ -433,6 +471,9 @@
     font-family: var(--font-sans);
     text-transform: capitalize;
   }
+  .code-editor :global(.autocomplete-option-simple .cm-completionLabel) {
+    text-transform: none;
+  }
 
   /* Completion item type */
   .code-editor :global(.autocomplete-option .cm-completionDetail) {
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index c104267aa4..14c0084f3a 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -102,6 +102,29 @@ export const getHelperCompletions = mode => {
   }, [])
 }
 
+export const snippetAutoComplete = snippets => {
+  return function myCompletions(context) {
+    if (!snippets?.length) {
+      return null
+    }
+    const word = context.matchBefore(/\w*/)
+    if (word.from == word.to && !context.explicit) {
+      return null
+    }
+    return {
+      from: word.from,
+      options: snippets.map(snippet => ({
+        label: `snippets.${snippet.name}`,
+        type: "text",
+        simple: true,
+        apply: (view, completion, from, to) => {
+          insertSnippet(view, from, to, completion.label)
+        },
+      })),
+    }
+  }
+}
+
 const bindingFilter = (options, query) => {
   return options.filter(completion => {
     const section_parsed = completion.section.name.toLowerCase()
@@ -247,6 +270,21 @@ export const insertBinding = (view, from, to, text, mode) => {
   })
 }
 
+export const insertSnippet = (view, from, to, text, mode) => {
+  const parsedInsert = `${text}()`
+  let cursorPos = from + parsedInsert.length - 1
+  view.dispatch({
+    changes: {
+      from,
+      to,
+      insert: parsedInsert,
+    },
+    selection: {
+      anchor: cursorPos,
+    },
+  })
+}
+
 export const bindingsToCompletions = (bindings, mode) => {
   const bindingByCategory = groupBy(bindings, "category")
   const categoryMeta = bindings?.reduce((acc, ele) => {
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 96a2187755..01c2f5d55b 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -19,6 +19,7 @@
     getHelperCompletions,
     jsAutocomplete,
     hbAutocomplete,
+    snippetAutoComplete,
     EditorModes,
     bindingsToCompletions,
   } from "../CodeEditor"
@@ -98,6 +99,7 @@
       ...bindingCompletions,
       ...getHelperCompletions(EditorModes.JS),
     ]),
+    snippetAutoComplete(snippets),
   ]
 
   const getModeOptions = (allowHBS, allowJS) => {

From 10c581c3be7960aa3c063ec490589802f4e01f12 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 12 Mar 2024 15:39:26 +0000
Subject: [PATCH 106/148] Fetch snippets from app doc when creating a new
 isolate

---
 .../jsRunner/bundles/snippets.ivm.bundle.js   |  4 +-
 .../server/src/jsRunner/bundles/snippets.ts   |  7 ++-
 packages/server/src/jsRunner/index.ts         | 47 +++++++++++++------
 .../server/src/jsRunner/vm/isolated-vm.ts     | 12 +++--
 packages/types/src/documents/app/app.ts       |  3 +-
 packages/types/src/documents/app/index.ts     |  1 +
 packages/types/src/documents/app/snippet.ts   |  4 ++
 7 files changed, 52 insertions(+), 26 deletions(-)
 create mode 100644 packages/types/src/documents/app/snippet.ts

diff --git a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
index fc49a121a4..5adb19eaf7 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
+++ b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
@@ -1,3 +1,3 @@
-"use strict";var snippets=(()=>{var u=Object.create;var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),W=(e,n)=>{for(var r in n)i(e,r,{get:n[r],enumerable:!0})},o=(e,n,r,p)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of d(n))!x.call(e,t)&&t!==r&&i(e,t,{get:()=>n[t],enumerable:!(p=c(n,t))||p.enumerable});return e};var g=(e,n,r)=>(r=e!=null?u(m(e)):{},o(n||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),v=e=>o(i({},"__esModule",{value:!0}),e);var a=l((_,f)=>{f.exports.iifeWrapper=e=>`(function(){
+"use strict";var snippets=(()=>{var u=Object.create;var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),W=(e,n)=>{for(var i in n)p(e,i,{get:n[i],enumerable:!0})},o=(e,n,i,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of d(n))!x.call(e,r)&&r!==i&&p(e,r,{get:()=>n[r],enumerable:!(t=c(n,r))||t.enumerable});return e};var g=(e,n,i)=>(i=e!=null?u(m(e)):{},o(n||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),v=e=>o(p({},"__esModule",{value:!0}),e);var a=l((P,f)=>{f.exports.iifeWrapper=e=>`(function(){
 ${e}
-})();`});var y={};W(y,{default:()=>w});var s=g(a()),w=new Proxy({},{get:function(e,n){let r=($("snippets")||[]).find(p=>p.name===n);return[eval][0]((0,s.iifeWrapper)(r.code))}});return v(y);})();
+})();`});var y={};W(y,{default:()=>w});var s=g(a()),w=new Proxy({},{get:function(e,n){let i=(snippetDefinitions||[]).find(t=>t.name===n);return[eval][0]((0,s.iifeWrapper)(i.code))}});return v(y);})();
diff --git a/packages/server/src/jsRunner/bundles/snippets.ts b/packages/server/src/jsRunner/bundles/snippets.ts
index 861bacaec5..f473aaf7b4 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ts
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -6,14 +6,13 @@ export default new Proxy(
   {},
   {
     get: function (_, name) {
-      // Get snippet definitions from global context, get the correct snippet
-      // then eval the JS. This will error if the snippet doesn't exist, but
-      // that's intended.
+      // Snippet definitions are injected to the isolate global scope before
+      // this bundle is loaded, so we can access it from there.
       // https://esbuild.github.io/content-types/#direct-eval for info on why
       // eval is being called this way.
       // @ts-ignore
       // eslint-disable-next-line no-undef
-      const snippet = ($("snippets") || []).find(x => x.name === name)
+      const snippet = (snippetDefinitions || []).find(x => x.name === name)
       return [eval][0](iifeWrapper(snippet.code))
     },
   }
diff --git a/packages/server/src/jsRunner/index.ts b/packages/server/src/jsRunner/index.ts
index 67aaffae7f..d97fa4cc94 100644
--- a/packages/server/src/jsRunner/index.ts
+++ b/packages/server/src/jsRunner/index.ts
@@ -8,29 +8,48 @@ import {
 import { context, logging } from "@budibase/backend-core"
 import tracer from "dd-trace"
 import { IsolatedVM } from "./vm"
+import { App, DocumentType, Snippet, VM } from "@budibase/types"
+
+async function getIsolate(ctx: any): Promise<VM> {
+  // Reuse the existing isolate if one exists
+  if (ctx?.vm) {
+    return ctx.vm
+  }
+
+  // Get snippets to build into new isolate, if inside app context
+  let snippets: Snippet[] | undefined
+  const db = context.getAppDB()
+  if (db) {
+    console.log("READ APP METADATA")
+    const app = await db.get<App>(DocumentType.APP_METADATA)
+    snippets = app.snippets
+  }
+
+  // Build a new isolate
+  return new IsolatedVM({
+    memoryLimit: env.JS_RUNNER_MEMORY_LIMIT,
+    invocationTimeout: env.JS_PER_INVOCATION_TIMEOUT_MS,
+    isolateAccumulatedTimeout: env.JS_PER_REQUEST_TIMEOUT_MS,
+  })
+    .withHelpers()
+    .withSnippets(snippets)
+}
 
 export function init() {
   setJSRunner((js: string, ctx: Record<string, any>) => {
-    return tracer.trace("runJS", {}, span => {
+    return tracer.trace("runJS", {}, async span => {
       try {
+        // Reuse an existing isolate from context, or make a new one
         const bbCtx = context.getCurrentContext()
-
-        const vm = bbCtx?.vm
-          ? bbCtx.vm
-          : new IsolatedVM({
-              memoryLimit: env.JS_RUNNER_MEMORY_LIMIT,
-              invocationTimeout: env.JS_PER_INVOCATION_TIMEOUT_MS,
-              isolateAccumulatedTimeout: env.JS_PER_REQUEST_TIMEOUT_MS,
-            })
-              .withHelpers()
-              .withSnippets()
-
+        const vm = await getIsolate(bbCtx)
         if (bbCtx) {
-          // If we have a context, we want to persist it to reuse the isolate
           bbCtx.vm = vm
         }
+
+        // Strip helpers (an array) and snippets (a proxy isntance) as these
+        // will not survive the isolated-vm barrier
         const { helpers, snippets, ...rest } = ctx
-        return vm.withContext(rest, () => vm.execute(js))
+        return vm.withContext(rest, () => vm!.execute(js))
       } catch (error: any) {
         if (error.message === "Script execution timed out.") {
           throw new JsErrorTimeout()
diff --git a/packages/server/src/jsRunner/vm/isolated-vm.ts b/packages/server/src/jsRunner/vm/isolated-vm.ts
index fb45abf5df..f18888895f 100644
--- a/packages/server/src/jsRunner/vm/isolated-vm.ts
+++ b/packages/server/src/jsRunner/vm/isolated-vm.ts
@@ -6,7 +6,7 @@ import crypto from "crypto"
 import querystring from "querystring"
 
 import { BundleType, loadBundle } from "../bundles"
-import { VM } from "@budibase/types"
+import { Snippet, VM } from "@budibase/types"
 import { iifeWrapper } from "@budibase/string-templates"
 import environment from "../../environment"
 
@@ -98,11 +98,13 @@ export class IsolatedVM implements VM {
     return this
   }
 
-  withSnippets() {
+  withSnippets(snippets?: Snippet[]) {
     const snippetsSource = loadBundle(BundleType.SNIPPETS)
-    const script = this.isolate.compileScriptSync(
-      `${snippetsSource};snippets=snippets.default;`
-    )
+    const script = this.isolate.compileScriptSync(`
+      const snippetDefinitions = ${JSON.stringify(snippets || [])};
+      ${snippetsSource};
+      snippets = snippets.default;
+    `)
     script.runSync(this.vm, { timeout: this.invocationTimeout, release: false })
     new Promise(() => {
       script.release()
diff --git a/packages/types/src/documents/app/app.ts b/packages/types/src/documents/app/app.ts
index ae4f3fa6da..3b7f481253 100644
--- a/packages/types/src/documents/app/app.ts
+++ b/packages/types/src/documents/app/app.ts
@@ -1,4 +1,4 @@
-import { User, Document, Plugin } from "../"
+import { User, Document, Plugin, Snippet } from "../"
 import { SocketSession } from "../../sdk"
 
 export type AppMetadataErrors = { [key: string]: string[] }
@@ -26,6 +26,7 @@ export interface App extends Document {
   automations?: AutomationSettings
   usedPlugins?: Plugin[]
   upgradableVersion?: string
+  snippets?: Snippet[]
 }
 
 export interface AppInstance {
diff --git a/packages/types/src/documents/app/index.ts b/packages/types/src/documents/app/index.ts
index b81c9e36ac..a58b708de3 100644
--- a/packages/types/src/documents/app/index.ts
+++ b/packages/types/src/documents/app/index.ts
@@ -14,3 +14,4 @@ export * from "./backup"
 export * from "./webhook"
 export * from "./links"
 export * from "./component"
+export * from "./snippet"
diff --git a/packages/types/src/documents/app/snippet.ts b/packages/types/src/documents/app/snippet.ts
new file mode 100644
index 0000000000..1b8433b32e
--- /dev/null
+++ b/packages/types/src/documents/app/snippet.ts
@@ -0,0 +1,4 @@
+export interface Snippet {
+  name: string
+  code: string
+}

From 16ce5ac65e4c9347d2329a4adf3ba9f3ae731821 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 12 Mar 2024 17:02:01 +0000
Subject: [PATCH 107/148] Update how snippets are fetched and enriched into
 context, because HBS helpers can't be async

---
 .../backend-core/src/context/mainContext.ts   | 23 +++++++++-
 packages/backend-core/src/context/types.ts    |  3 +-
 .../api/controllers/row/ExternalRequest.ts    | 23 ++++++----
 .../src/api/controllers/row/staticFormula.ts  |  6 +--
 packages/server/src/db/linkedRows/index.ts    |  3 +-
 packages/server/src/jsRunner/index.ts         | 42 ++++++-------------
 .../src/utilities/rowProcessor/index.ts       |  2 +-
 .../src/utilities/rowProcessor/utils.ts       | 11 +++--
 8 files changed, 66 insertions(+), 47 deletions(-)

diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index ae86695168..c45536c2e2 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -10,7 +10,7 @@ import {
   StaticDatabases,
   DEFAULT_TENANT_ID,
 } from "../constants"
-import { Database, IdentityContext } from "@budibase/types"
+import { Database, IdentityContext, Snippet, App } from "@budibase/types"
 import { ContextMap } from "./types"
 
 let TEST_APP_ID: string | null = null
@@ -281,6 +281,27 @@ export function doInScimContext(task: any) {
   return newContext(updates, task)
 }
 
+export async function ensureSnippetContext() {
+  const ctx = getCurrentContext()
+
+  // If we've already added snippets to context, continue
+  if (!ctx || ctx.snippets) {
+    return
+  }
+
+  // Otherwise get snippets for this app and update context
+  let snippets: Snippet[] | undefined
+  const db = getAppDB()
+  if (db) {
+    const app = await db.get<App>(DocumentType.APP_METADATA)
+    snippets = app.snippets
+  }
+
+  // Always set snippets to a non-null value so that we can tell we've attempted
+  // to load snippets
+  ctx.snippets = snippets || []
+}
+
 export function getEnvironmentVariables() {
   const context = Context.get()
   if (!context.environmentVariables) {
diff --git a/packages/backend-core/src/context/types.ts b/packages/backend-core/src/context/types.ts
index 6fb9f44fad..3d5e106ed3 100644
--- a/packages/backend-core/src/context/types.ts
+++ b/packages/backend-core/src/context/types.ts
@@ -1,4 +1,4 @@
-import { IdentityContext, VM } from "@budibase/types"
+import { IdentityContext, Snippet, VM } from "@budibase/types"
 import { ExecutionTimeTracker } from "../timers"
 
 // keep this out of Budibase types, don't want to expose context info
@@ -12,4 +12,5 @@ export type ContextMap = {
   isMigrating?: boolean
   jsExecutionTracker?: ExecutionTimeTracker
   vm?: VM
+  snippets?: Snippet[]
 }
diff --git a/packages/server/src/api/controllers/row/ExternalRequest.ts b/packages/server/src/api/controllers/row/ExternalRequest.ts
index 685af4e98e..814b57567f 100644
--- a/packages/server/src/api/controllers/row/ExternalRequest.ts
+++ b/packages/server/src/api/controllers/row/ExternalRequest.ts
@@ -437,11 +437,11 @@ export class ExternalRequest<T extends Operation> {
     return { row: newRow, manyRelationships }
   }
 
-  processRelationshipFields(
+  async processRelationshipFields(
     table: Table,
     row: Row,
     relationships: RelationshipsJson[]
-  ): Row {
+  ): Promise<Row> {
     for (let relationship of relationships) {
       const linkedTable = this.tables[relationship.tableName]
       if (!linkedTable || !row[relationship.column]) {
@@ -457,7 +457,7 @@ export class ExternalRequest<T extends Operation> {
         }
         // process additional types
         relatedRow = processDates(table, relatedRow)
-        relatedRow = processFormulas(linkedTable, relatedRow)
+        relatedRow = await processFormulas(linkedTable, relatedRow)
         row[relationship.column][key] = relatedRow
       }
     }
@@ -521,7 +521,7 @@ export class ExternalRequest<T extends Operation> {
     return rows
   }
 
-  outputProcessing(
+  async outputProcessing(
     rows: Row[] = [],
     table: Table,
     relationships: RelationshipsJson[]
@@ -561,9 +561,12 @@ export class ExternalRequest<T extends Operation> {
     }
 
     // make sure all related rows are correct
-    let finalRowArray = Object.values(finalRows).map(row =>
-      this.processRelationshipFields(table, row, relationships)
-    )
+    let finalRowArray = []
+    for (let row of Object.values(finalRows)) {
+      finalRowArray.push(
+        await this.processRelationshipFields(table, row, relationships)
+      )
+    }
 
     // process some additional types
     finalRowArray = processDates(table, finalRowArray)
@@ -934,7 +937,11 @@ export class ExternalRequest<T extends Operation> {
         processed.manyRelationships
       )
     }
-    const output = this.outputProcessing(responseRows, table, relationships)
+    const output = await this.outputProcessing(
+      responseRows,
+      table,
+      relationships
+    )
     // if reading it'll just be an array of rows, return whole thing
     if (operation === Operation.READ) {
       return (
diff --git a/packages/server/src/api/controllers/row/staticFormula.ts b/packages/server/src/api/controllers/row/staticFormula.ts
index 0ea8b3560e..a75a6cd2cc 100644
--- a/packages/server/src/api/controllers/row/staticFormula.ts
+++ b/packages/server/src/api/controllers/row/staticFormula.ts
@@ -110,7 +110,7 @@ export async function updateAllFormulasInTable(table: Table) {
       (enriched: Row) => enriched._id === row._id
     )
     if (enrichedRow) {
-      const processed = processFormulas(table, cloneDeep(row), {
+      const processed = await processFormulas(table, cloneDeep(row), {
         dynamic: false,
         contextRows: [enrichedRow],
       })
@@ -143,7 +143,7 @@ export async function finaliseRow(
     squash: false,
   })) as Row
   // use enriched row to generate formulas for saving, specifically only use as context
-  row = processFormulas(table, row, {
+  row = await processFormulas(table, row, {
     dynamic: false,
     contextRows: [enrichedRow],
   })
@@ -179,7 +179,7 @@ export async function finaliseRow(
   const response = await db.put(row)
   // for response, calculate the formulas for the enriched row
   enrichedRow._rev = response.rev
-  enrichedRow = processFormulas(table, enrichedRow, {
+  enrichedRow = await processFormulas(table, enrichedRow, {
     dynamic: false,
   })
   // this updates the related formulas in other rows based on the relations to this row
diff --git a/packages/server/src/db/linkedRows/index.ts b/packages/server/src/db/linkedRows/index.ts
index 7af3f9392f..513e0c0df2 100644
--- a/packages/server/src/db/linkedRows/index.ts
+++ b/packages/server/src/db/linkedRows/index.ts
@@ -202,7 +202,8 @@ export async function attachFullLinkedDocs(
           table => table._id === linkedTableId
         )
         if (linkedTable) {
-          row[link.fieldName].push(processFormulas(linkedTable, linkedRow))
+          const processed = await processFormulas(linkedTable, linkedRow)
+          row[link.fieldName].push(processed)
         }
       }
     }
diff --git a/packages/server/src/jsRunner/index.ts b/packages/server/src/jsRunner/index.ts
index d97fa4cc94..ff39ce0666 100644
--- a/packages/server/src/jsRunner/index.ts
+++ b/packages/server/src/jsRunner/index.ts
@@ -8,40 +8,24 @@ import {
 import { context, logging } from "@budibase/backend-core"
 import tracer from "dd-trace"
 import { IsolatedVM } from "./vm"
-import { App, DocumentType, Snippet, VM } from "@budibase/types"
-
-async function getIsolate(ctx: any): Promise<VM> {
-  // Reuse the existing isolate if one exists
-  if (ctx?.vm) {
-    return ctx.vm
-  }
-
-  // Get snippets to build into new isolate, if inside app context
-  let snippets: Snippet[] | undefined
-  const db = context.getAppDB()
-  if (db) {
-    console.log("READ APP METADATA")
-    const app = await db.get<App>(DocumentType.APP_METADATA)
-    snippets = app.snippets
-  }
-
-  // Build a new isolate
-  return new IsolatedVM({
-    memoryLimit: env.JS_RUNNER_MEMORY_LIMIT,
-    invocationTimeout: env.JS_PER_INVOCATION_TIMEOUT_MS,
-    isolateAccumulatedTimeout: env.JS_PER_REQUEST_TIMEOUT_MS,
-  })
-    .withHelpers()
-    .withSnippets(snippets)
-}
 
 export function init() {
   setJSRunner((js: string, ctx: Record<string, any>) => {
-    return tracer.trace("runJS", {}, async span => {
+    return tracer.trace("runJS", {}, span => {
       try {
         // Reuse an existing isolate from context, or make a new one
         const bbCtx = context.getCurrentContext()
-        const vm = await getIsolate(bbCtx)
+        const vm =
+          bbCtx?.vm ||
+          new IsolatedVM({
+            memoryLimit: env.JS_RUNNER_MEMORY_LIMIT,
+            invocationTimeout: env.JS_PER_INVOCATION_TIMEOUT_MS,
+            isolateAccumulatedTimeout: env.JS_PER_REQUEST_TIMEOUT_MS,
+          })
+            .withHelpers()
+            .withSnippets(bbCtx?.snippets)
+
+        // Persist isolate in context so we can reuse it
         if (bbCtx) {
           bbCtx.vm = vm
         }
@@ -49,7 +33,7 @@ export function init() {
         // Strip helpers (an array) and snippets (a proxy isntance) as these
         // will not survive the isolated-vm barrier
         const { helpers, snippets, ...rest } = ctx
-        return vm.withContext(rest, () => vm!.execute(js))
+        return vm.withContext(rest, () => vm.execute(js))
       } catch (error: any) {
         if (error.message === "Script execution timed out.") {
           throw new JsErrorTimeout()
diff --git a/packages/server/src/utilities/rowProcessor/index.ts b/packages/server/src/utilities/rowProcessor/index.ts
index e3ca576fb7..d956a94d0b 100644
--- a/packages/server/src/utilities/rowProcessor/index.ts
+++ b/packages/server/src/utilities/rowProcessor/index.ts
@@ -245,7 +245,7 @@ export async function outputProcessing<T extends Row[] | Row>(
   }
 
   // process formulas after the complex types had been processed
-  enriched = processFormulas(table, enriched, { dynamic: true })
+  enriched = await processFormulas(table, enriched, { dynamic: true })
 
   if (opts.squash) {
     enriched = (await linkRows.squashLinksToPrimaryDisplay(
diff --git a/packages/server/src/utilities/rowProcessor/utils.ts b/packages/server/src/utilities/rowProcessor/utils.ts
index d0fc82b3ee..7292886084 100644
--- a/packages/server/src/utilities/rowProcessor/utils.ts
+++ b/packages/server/src/utilities/rowProcessor/utils.ts
@@ -10,6 +10,8 @@ import {
   FieldType,
 } from "@budibase/types"
 import tracer from "dd-trace"
+import { context } from "@budibase/backend-core"
+import { getCurrentContext } from "@budibase/backend-core/src/context"
 
 interface FormulaOpts {
   dynamic?: boolean
@@ -44,16 +46,19 @@ export function fixAutoColumnSubType(
 /**
  * Looks through the rows provided and finds formulas - which it then processes.
  */
-export function processFormulas<T extends Row | Row[]>(
+export async function processFormulas<T extends Row | Row[]>(
   table: Table,
   inputRows: T,
   { dynamic, contextRows }: FormulaOpts = { dynamic: true }
-): T {
-  return tracer.trace("processFormulas", {}, span => {
+): Promise<T> {
+  return tracer.trace("processFormulas", {}, async span => {
     const numRows = Array.isArray(inputRows) ? inputRows.length : 1
     span?.addTags({ table_id: table._id, dynamic, numRows })
     const rows = Array.isArray(inputRows) ? inputRows : [inputRows]
     if (rows) {
+      // Ensure we have snippet context
+      await context.ensureSnippetContext()
+
       for (let [column, schema] of Object.entries(table.schema)) {
         if (schema.type !== FieldType.FORMULA) {
           continue

From fda71de7c2147e93277f7bacc84cf65ac30b5d25 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 12 Mar 2024 19:07:38 +0000
Subject: [PATCH 108/148] Remove unused import

---
 packages/builder/src/components/common/CodeEditor/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 14c0084f3a..b93c95b944 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -270,7 +270,7 @@ export const insertBinding = (view, from, to, text, mode) => {
   })
 }
 
-export const insertSnippet = (view, from, to, text, mode) => {
+export const insertSnippet = (view, from, to, text) => {
   const parsedInsert = `${text}()`
   let cursorPos = from + parsedInsert.length - 1
   view.dispatch({

From 28d938ba3e19c67470a4dea108287e2f6c7dc0f5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 12 Mar 2024 19:09:32 +0000
Subject: [PATCH 109/148] Lint

---
 packages/server/src/utilities/rowProcessor/utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/server/src/utilities/rowProcessor/utils.ts b/packages/server/src/utilities/rowProcessor/utils.ts
index 7292886084..8201680f13 100644
--- a/packages/server/src/utilities/rowProcessor/utils.ts
+++ b/packages/server/src/utilities/rowProcessor/utils.ts
@@ -11,7 +11,6 @@ import {
 } from "@budibase/types"
 import tracer from "dd-trace"
 import { context } from "@budibase/backend-core"
-import { getCurrentContext } from "@budibase/backend-core/src/context"
 
 interface FormulaOpts {
   dynamic?: boolean

From 3b54daf2c8d798c44b8fced765c5c6a70ba96649 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 12 Mar 2024 21:40:48 +0000
Subject: [PATCH 110/148] Add snippet context before executing automations

---
 packages/backend-core/src/context/mainContext.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index c45536c2e2..f575d6950d 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -129,7 +129,10 @@ export async function doInAutomationContext<T>(params: {
       appId: params.appId,
       automationId: params.automationId,
     },
-    params.task
+    async () => {
+      await ensureSnippetContext()
+      return await params.task()
+    }
   )
 }
 

From 20f4c5a77d993a38c16daabc6cc0cb9398668695 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 12 Mar 2024 21:41:00 +0000
Subject: [PATCH 111/148] Add snippet context before testing automations
 manually

---
 packages/server/src/automations/triggers.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/server/src/automations/triggers.ts b/packages/server/src/automations/triggers.ts
index 08e3199a11..3336211c5d 100644
--- a/packages/server/src/automations/triggers.ts
+++ b/packages/server/src/automations/triggers.ts
@@ -112,6 +112,7 @@ export async function externalTrigger(
 
   const data: AutomationData = { automation, event: params as any }
   if (getResponses) {
+    await context.ensureSnippetContext()
     data.event = {
       ...data.event,
       appId: context.getAppId(),

From 70821182fe1b26673a9fb289295ef478d3f8a7ae Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 09:15:33 +0000
Subject: [PATCH 112/148] Update automation context to simplify applying
 snippet context

---
 packages/backend-core/src/context/mainContext.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index f575d6950d..9d4cc9096d 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -122,17 +122,14 @@ export async function doInAutomationContext<T>(params: {
   automationId: string
   task: () => T
 }): Promise<T> {
-  const tenantId = getTenantIDFromAppID(params.appId)
+  await ensureSnippetContext()
   return newContext(
     {
-      tenantId,
+      tenantId: getTenantIDFromAppID(params.appId),
       appId: params.appId,
       automationId: params.automationId,
     },
-    async () => {
-      await ensureSnippetContext()
-      return await params.task()
-    }
+    params.task
   )
 }
 

From 1eafd5e8437ca66096f54ff017f62530528f3bb7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 09:22:13 +0000
Subject: [PATCH 113/148] Fix issue with drawer positioning when nesting
 drawers with no target

---
 packages/bbui/src/Drawer/Drawer.svelte | 66 ++++++++++++--------------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 8bb11b833a..04e678c4e5 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -172,43 +172,37 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <div class="drawer-container">
-      <div
-        class="underlay"
-        class:hidden={!$modal}
-        transition:drawerFade|local
-      />
-      <div
-        class="drawer"
-        class:stacked={depth > 0}
-        class:modal={$modal}
-        transition:drawerSlide|local
-        {style}
-      >
-        <header>
-          {#if $$slots.title}
-            <slot name="title" />
-          {:else}
-            <div class="text">{title || "Bindings"}</div>
+    <div class="underlay" class:hidden={!$modal} transition:drawerFade|local />
+    <div
+      class="drawer"
+      class:stacked={depth > 0}
+      class:modal={$modal}
+      transition:drawerSlide|local
+      {style}
+    >
+      <header>
+        {#if $$slots.title}
+          <slot name="title" />
+        {:else}
+          <div class="text">{title || "Bindings"}</div>
+        {/if}
+        <div class="buttons">
+          <Button secondary quiet on:click={hide}>Cancel</Button>
+          <slot name="buttons" />
+          {#if $resizable}
+            <ActionButton
+              size="M"
+              quiet
+              selected={$modal}
+              on:click={() => modal.set(!$modal)}
+            >
+              <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+            </ActionButton>
           {/if}
-          <div class="buttons">
-            <Button secondary quiet on:click={hide}>Cancel</Button>
-            <slot name="buttons" />
-            {#if $resizable}
-              <ActionButton
-                size="M"
-                quiet
-                selected={$modal}
-                on:click={() => modal.set(!$modal)}
-              >
-                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
-              </ActionButton>
-            {/if}
-          </div>
-        </header>
-        <slot name="body" />
-        <div class="overlay" class:hidden={$modal || depth === 0} />
-      </div>
+        </div>
+      </header>
+      <slot name="body" />
+      <div class="overlay" class:hidden={$modal || depth === 0} />
     </div>
   </Portal>
 {/if}

From c25ea7a9d7e3e3225735aad706207163777408ee Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 09:42:31 +0000
Subject: [PATCH 114/148] Fix external triggers not getting snippet context

---
 packages/server/src/automations/triggers.ts | 1 -
 packages/server/src/threads/automation.ts   | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/automations/triggers.ts b/packages/server/src/automations/triggers.ts
index 3336211c5d..08e3199a11 100644
--- a/packages/server/src/automations/triggers.ts
+++ b/packages/server/src/automations/triggers.ts
@@ -112,7 +112,6 @@ export async function externalTrigger(
 
   const data: AutomationData = { automation, event: params as any }
   if (getResponses) {
-    await context.ensureSnippetContext()
     data.event = {
       ...data.event,
       appId: context.getAppId(),
diff --git a/packages/server/src/threads/automation.ts b/packages/server/src/threads/automation.ts
index a4938bb138..4e33fadce6 100644
--- a/packages/server/src/threads/automation.ts
+++ b/packages/server/src/threads/automation.ts
@@ -625,6 +625,7 @@ export async function executeInThread(job: Job<AutomationData>) {
   })
 
   return await context.doInAppContext(appId, async () => {
+    await context.ensureSnippetContext()
     const envVars = await sdkUtils.getEnvironmentVariables()
     // put into automation thread for whole context
     return await context.doInEnvironmentContext(envVars, async () => {

From 0ddf48f7ffc39de96c3ae1f8082a7574b8291ae2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 09:54:27 +0000
Subject: [PATCH 115/148] Update automation page to use full width drawers like
 the design section does

---
 .../pages/builder/app/[application]/automation/_layout.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index c4ee060149..57180625b1 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -40,7 +40,7 @@
 <!-- routify:options index=3 -->
 <div class="root">
   <AutomationPanel {modal} {webhookModal} />
-  <div class="content">
+  <div class="content drawer-container">
     {#if $automationStore.automations?.length}
       <slot />
     {:else}

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

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

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

From 2d12a1a8fa2aeca8e68d9643c17d971eac7792cd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 11:48:17 +0000
Subject: [PATCH 117/148] Add server-side validation for snippet names

---
 .../common/bindings/SnippetDrawer.svelte      | 21 +++++++------------
 .../server/src/api/routes/utils/validators.ts | 17 +++++++++++++++
 packages/shared-core/src/constants/index.ts   |  1 +
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index e7dd5c7a22..3badf0d8c3 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -13,13 +13,13 @@
   import { snippets } from "stores/builder"
   import { getSequentialName } from "helpers/duplicate"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { ValidSnippetNameRegex } from "@budibase/shared-core"
 
   export let snippet
 
   export const show = () => drawer.show()
   export const hide = () => drawer.hide()
 
-  const roughValidNameRegex = /^[_$A-Z\xA0-\uFFFF][_$A-Z0-9\xA0-\uFFFF]*$/i
   const firstCharNumberRegex = /^[0-9].*$/
 
   let drawer
@@ -43,7 +43,7 @@
       drawer.hide()
       notifications.success(`Snippet ${newSnippet.name} saved`)
     } catch (error) {
-      notifications.error("Error saving snippet")
+      notifications.error(error.message || "Error saving snippet")
     }
     loading = false
   }
@@ -69,21 +69,16 @@
     if (!name?.length) {
       return "Name is required"
     }
-    if (firstCharNumberRegex.test(name)) {
-      return "Can't start with a number"
-    }
-    if (!roughValidNameRegex.test(name)) {
-      return "No special characters or spaces"
-    }
     if (snippets.some(snippet => snippet.name === name)) {
       return "That name is already in use"
     }
-    const js = `(function ${name}(){return true})()`
-    try {
-      return eval(js) === true ? null : "Invalid name"
-    } catch (error) {
-      return "Invalid name"
+    if (firstCharNumberRegex.test(name)) {
+      return "Can't start with a number"
     }
+    if (!ValidSnippetNameRegex.test(name)) {
+      return "No special characters or spaces"
+    }
+    return null
   }
 </script>
 
diff --git a/packages/server/src/api/routes/utils/validators.ts b/packages/server/src/api/routes/utils/validators.ts
index 55766cd120..424d0d6c79 100644
--- a/packages/server/src/api/routes/utils/validators.ts
+++ b/packages/server/src/api/routes/utils/validators.ts
@@ -2,6 +2,7 @@ import { auth, permissions } from "@budibase/backend-core"
 import { DataSourceOperation } from "../../../constants"
 import { WebhookActionType } from "@budibase/types"
 import Joi from "joi"
+import { ValidSnippetNameRegex } from "@budibase/shared-core"
 
 const OPTIONAL_STRING = Joi.string().optional().allow(null).allow("")
 const OPTIONAL_NUMBER = Joi.number().optional().allow(null)
@@ -226,6 +227,21 @@ export function applicationValidator(opts = { isCreate: true }) {
     base.name = appNameValidator.optional()
   }
 
+  const snippetValidator = Joi.array()
+    .optional()
+    .items(
+      Joi.object({
+        name: Joi.string()
+          .pattern(new RegExp(ValidSnippetNameRegex))
+          .error(
+            new Error(
+              "Snippet name cannot include spaces or special characters, and cannot start with a number"
+            )
+          ),
+        code: OPTIONAL_STRING,
+      })
+    )
+
   return auth.joiValidator.body(
     Joi.object({
       _id: OPTIONAL_STRING,
@@ -235,6 +251,7 @@ export function applicationValidator(opts = { isCreate: true }) {
       template: Joi.object({
         templateString: OPTIONAL_STRING,
       }).unknown(true),
+      snippets: snippetValidator,
     }).unknown(true)
   )
 }
diff --git a/packages/shared-core/src/constants/index.ts b/packages/shared-core/src/constants/index.ts
index 99fb5c2a73..b5b651a3da 100644
--- a/packages/shared-core/src/constants/index.ts
+++ b/packages/shared-core/src/constants/index.ts
@@ -98,6 +98,7 @@ export enum BuilderSocketEvent {
 export const SocketSessionTTL = 60
 export const ValidQueryNameRegex = /^[^()]*$/
 export const ValidColumnNameRegex = /^[_a-zA-Z0-9\s]*$/g
+export const ValidSnippetNameRegex = /^[a-z-_][a-z0-9-_]*$/i
 
 export const REBOOT_CRON = "@reboot"
 

From a1186cd6d30845ab66d0a268b9a86b1001e41f33 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:01:26 +0000
Subject: [PATCH 118/148] Remove testing snippet code

---
 packages/string-templates/package.json           | 3 +--
 packages/string-templates/src/helpers/snippet.js | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)
 delete mode 100644 packages/string-templates/src/helpers/snippet.js

diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 1f3e1b618a..340d74ef8a 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -13,8 +13,7 @@
     },
     "./package.json": "./package.json",
     "./test/utils": "./test/utils.js",
-    "./iife": "./src/iife.js",
-    "./snippet": "./src/helpers/snippet.js"
+    "./iife": "./src/iife.js"
   },
   "files": [
     "dist",
diff --git a/packages/string-templates/src/helpers/snippet.js b/packages/string-templates/src/helpers/snippet.js
deleted file mode 100644
index b7269b56cc..0000000000
--- a/packages/string-templates/src/helpers/snippet.js
+++ /dev/null
@@ -1,2 +0,0 @@
-module.exports.CrazyLongSnippet =
-  '/**\n * marked - a markdown parser\n * Copyright (c) 2011-2022, Christopher Jeffrey. (MIT Licensed)\n * https://github.com/markedjs/marked\n */\n\n/**\n * DO NOT EDIT THIS FILE\n * The code in this file is generated from files in ./src/\n */\n\nfunction getDefaults() {\n  return {\n    baseUrl: null,\n    breaks: false,\n    extensions: null,\n    gfm: true,\n    headerIds: true,\n    headerPrefix: "",\n    highlight: null,\n    langPrefix: "language-",\n    mangle: true,\n    pedantic: false,\n    renderer: null,\n    sanitize: false,\n    sanitizer: null,\n    silent: false,\n    smartLists: false,\n    smartypants: false,\n    tokenizer: null,\n    walkTokens: null,\n    xhtml: false,\n  }\n}\n\nlet defaults = getDefaults()\n\nfunction changeDefaults(newDefaults) {\n  defaults = newDefaults\n}\n\n/**\n * Helpers\n */\nconst escapeTest = /[&<>"\']/\nconst escapeReplace = /[&<>"\']/g\nconst escapeTestNoEncode = /[<>"\']|&(?!#?\\w+;)/\nconst escapeReplaceNoEncode = /[<>"\']|&(?!#?\\w+;)/g\nconst escapeReplacements = {\n  "&": "&amp;",\n  "<": "&lt;",\n  ">": "&gt;",\n  \'"\': "&quot;",\n  "\'": "&#39;",\n}\nconst getEscapeReplacement = ch => escapeReplacements[ch]\nfunction escape(html, encode) {\n  if (encode) {\n    if (escapeTest.test(html)) {\n      return html.replace(escapeReplace, getEscapeReplacement)\n    }\n  } else {\n    if (escapeTestNoEncode.test(html)) {\n      return html.replace(escapeReplaceNoEncode, getEscapeReplacement)\n    }\n  }\n\n  return html\n}\n\nconst unescapeTest = /&(#(?:\\d+)|(?:#x[0-9A-Fa-f]+)|(?:\\w+));?/gi\n\n/**\n * @param {string} html\n */\nfunction unescape(html) {\n  // explicitly match decimal, hex, and named HTML entities\n  return html.replace(unescapeTest, (_, n) => {\n    n = n.toLowerCase()\n    if (n === "colon") return ":"\n    if (n.charAt(0) === "#") {\n      return n.charAt(1) === "x"\n        ? String.fromCharCode(parseInt(n.substring(2), 16))\n        : String.fromCharCode(+n.substring(1))\n    }\n    return ""\n  })\n}\n\nconst caret = /(^|[^\\[])\\^/g\n\n/**\n * @param {string | RegExp} regex\n * @param {string} opt\n */\nfunction edit(regex, opt) {\n  regex = typeof regex === "string" ? regex : regex.source\n  opt = opt || ""\n  const obj = {\n    replace: (name, val) => {\n      val = val.source || val\n      val = val.replace(caret, "$1")\n      regex = regex.replace(name, val)\n      return obj\n    },\n    getRegex: () => {\n      return new RegExp(regex, opt)\n    },\n  }\n  return obj\n}\n\nconst nonWordAndColonTest = /[^\\w:]/g\nconst originIndependentUrl = /^$|^[a-z][a-z0-9+.-]*:|^[?#]/i\n\n/**\n * @param {boolean} sanitize\n * @param {string} base\n * @param {string} href\n */\nfunction cleanUrl(sanitize, base, href) {\n  if (sanitize) {\n    let prot\n    try {\n      prot = decodeURIComponent(unescape(href))\n        .replace(nonWordAndColonTest, "")\n        .toLowerCase()\n    } catch (e) {\n      return null\n    }\n    if (\n      prot.indexOf("javascript:") === 0 ||\n      prot.indexOf("vbscript:") === 0 ||\n      prot.indexOf("data:") === 0\n    ) {\n      return null\n    }\n  }\n  if (base && !originIndependentUrl.test(href)) {\n    href = resolveUrl(base, href)\n  }\n  try {\n    href = encodeURI(href).replace(/%25/g, "%")\n  } catch (e) {\n    return null\n  }\n  return href\n}\n\nconst baseUrls = {}\nconst justDomain = /^[^:]+:\\/*[^/]*$/\nconst protocol = /^([^:]+:)[\\s\\S]*$/\nconst domain = /^([^:]+:\\/*[^/]*)[\\s\\S]*$/\n\n/**\n * @param {string} base\n * @param {string} href\n */\nfunction resolveUrl(base, href) {\n  if (!baseUrls[" " + base]) {\n    // we can ignore everything in base after the last slash of its path component,\n    // but we might need to add _that_\n    // https://tools.ietf.org/html/rfc3986#section-3\n    if (justDomain.test(base)) {\n      baseUrls[" " + base] = base + "/"\n    } else {\n      baseUrls[" " + base] = rtrim(base, "/", true)\n    }\n  }\n  base = baseUrls[" " + base]\n  const relativeBase = base.indexOf(":") === -1\n\n  if (href.substring(0, 2) === "//") {\n    if (relativeBase) {\n      return href\n    }\n    return base.replace(protocol, "$1") + href\n  } else if (href.charAt(0) === "/") {\n    if (relativeBase) {\n      return href\n    }\n    return base.replace(domain, "$1") + href\n  } else {\n    return base + href\n  }\n}\n\nconst noopTest = { exec: function noopTest() {} }\n\nfunction merge(obj) {\n  let i = 1,\n    target,\n    key\n\n  for (; i < arguments.length; i++) {\n    target = arguments[i]\n    for (key in target) {\n      if (Object.prototype.hasOwnProperty.call(target, key)) {\n        obj[key] = target[key]\n      }\n    }\n  }\n\n  return obj\n}\n\nfunction splitCells(tableRow, count) {\n  // ensure that every cell-delimiting pipe has a space\n  // before it to distinguish it from an escaped pipe\n  const row = tableRow.replace(/\\|/g, (match, offset, str) => {\n      let escaped = false,\n        curr = offset\n      while (--curr >= 0 && str[curr] === "\\\\") escaped = !escaped\n      if (escaped) {\n        // odd number of slashes means | is escaped\n        // so we leave it alone\n        return "|"\n      } else {\n        // add space before unescaped |\n        return " |"\n      }\n    }),\n    cells = row.split(/ \\|/)\n  let i = 0\n\n  // First/last cell in a row cannot be empty if it has no leading/trailing pipe\n  if (!cells[0].trim()) {\n    cells.shift()\n  }\n  if (cells.length > 0 && !cells[cells.length - 1].trim()) {\n    cells.pop()\n  }\n\n  if (cells.length > count) {\n    cells.splice(count)\n  } else {\n    while (cells.length < count) cells.push("")\n  }\n\n  for (; i < cells.length; i++) {\n    // leading or trailing whitespace is ignored per the gfm spec\n    cells[i] = cells[i].trim().replace(/\\\\\\|/g, "|")\n  }\n  return cells\n}\n\n/**\n * Remove trailing \'c\'s. Equivalent to str.replace(/c*$/, \'\').\n * /c*$/ is vulnerable to REDOS.\n *\n * @param {string} str\n * @param {string} c\n * @param {boolean} invert Remove suffix of non-c chars instead. Default falsey.\n */\nfunction rtrim(str, c, invert) {\n  const l = str.length\n  if (l === 0) {\n    return ""\n  }\n\n  // Length of suffix matching the invert condition.\n  let suffLen = 0\n\n  // Step left until we fail to match the invert condition.\n  while (suffLen < l) {\n    const currChar = str.charAt(l - suffLen - 1)\n    if (currChar === c && !invert) {\n      suffLen++\n    } else if (currChar !== c && invert) {\n      suffLen++\n    } else {\n      break\n    }\n  }\n\n  return str.slice(0, l - suffLen)\n}\n\nfunction findClosingBracket(str, b) {\n  if (str.indexOf(b[1]) === -1) {\n    return -1\n  }\n  const l = str.length\n  let level = 0,\n    i = 0\n  for (; i < l; i++) {\n    if (str[i] === "\\\\") {\n      i++\n    } else if (str[i] === b[0]) {\n      level++\n    } else if (str[i] === b[1]) {\n      level--\n      if (level < 0) {\n        return i\n      }\n    }\n  }\n  return -1\n}\n\nfunction checkSanitizeDeprecation(opt) {\n  if (opt && opt.sanitize && !opt.silent) {\n    console.warn(\n      "marked(): sanitize and sanitizer parameters are deprecated since version 0.7.0, should not be used and will be removed in the future. Read more here: https://marked.js.org/#/USING_ADVANCED.md#options"\n    )\n  }\n}\n\n// copied from https://stackoverflow.com/a/5450113/806777\n/**\n * @param {string} pattern\n * @param {number} count\n */\nfunction repeatString(pattern, count) {\n  if (count < 1) {\n    return ""\n  }\n  let result = ""\n  while (count > 1) {\n    if (count & 1) {\n      result += pattern\n    }\n    count >>= 1\n    pattern += pattern\n  }\n  return result + pattern\n}\n\nfunction outputLink(cap, link, raw, lexer) {\n  const href = link.href\n  const title = link.title ? escape(link.title) : null\n  const text = cap[1].replace(/\\\\([\\[\\]])/g, "$1")\n\n  if (cap[0].charAt(0) !== "!") {\n    lexer.state.inLink = true\n    const token = {\n      type: "link",\n      raw,\n      href,\n      title,\n      text,\n      tokens: lexer.inlineTokens(text, []),\n    }\n    lexer.state.inLink = false\n    return token\n  }\n  return {\n    type: "image",\n    raw,\n    href,\n    title,\n    text: escape(text),\n  }\n}\n\nfunction indentCodeCompensation(raw, text) {\n  const matchIndentToCode = raw.match(/^(\\s+)(?:```)/)\n\n  if (matchIndentToCode === null) {\n    return text\n  }\n\n  const indentToCode = matchIndentToCode[1]\n\n  return text\n    .split("\\n")\n    .map(node => {\n      const matchIndentInNode = node.match(/^\\s+/)\n      if (matchIndentInNode === null) {\n        return node\n      }\n\n      const [indentInNode] = matchIndentInNode\n\n      if (indentInNode.length >= indentToCode.length) {\n        return node.slice(indentToCode.length)\n      }\n\n      return node\n    })\n    .join("\\n")\n}\n\n/**\n * Tokenizer\n */\nclass Tokenizer {\n  constructor(options) {\n    this.options = options || defaults\n  }\n\n  space(src) {\n    const cap = this.rules.block.newline.exec(src)\n    if (cap && cap[0].length > 0) {\n      return {\n        type: "space",\n        raw: cap[0],\n      }\n    }\n  }\n\n  code(src) {\n    const cap = this.rules.block.code.exec(src)\n    if (cap) {\n      const text = cap[0].replace(/^ {1,4}/gm, "")\n      return {\n        type: "code",\n        raw: cap[0],\n        codeBlockStyle: "indented",\n        text: !this.options.pedantic ? rtrim(text, "\\n") : text,\n      }\n    }\n  }\n\n  fences(src) {\n    const cap = this.rules.block.fences.exec(src)\n    if (cap) {\n      const raw = cap[0]\n      const text = indentCodeCompensation(raw, cap[3] || "")\n\n      return {\n        type: "code",\n        raw,\n        lang: cap[2] ? cap[2].trim() : cap[2],\n        text,\n      }\n    }\n  }\n\n  heading(src) {\n    const cap = this.rules.block.heading.exec(src)\n    if (cap) {\n      let text = cap[2].trim()\n\n      // remove trailing #s\n      if (/#$/.test(text)) {\n        const trimmed = rtrim(text, "#")\n        if (this.options.pedantic) {\n          text = trimmed.trim()\n        } else if (!trimmed || / $/.test(trimmed)) {\n          // CommonMark requires space before trailing #s\n          text = trimmed.trim()\n        }\n      }\n\n      const token = {\n        type: "heading",\n        raw: cap[0],\n        depth: cap[1].length,\n        text,\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  hr(src) {\n    const cap = this.rules.block.hr.exec(src)\n    if (cap) {\n      return {\n        type: "hr",\n        raw: cap[0],\n      }\n    }\n  }\n\n  blockquote(src) {\n    const cap = this.rules.block.blockquote.exec(src)\n    if (cap) {\n      const text = cap[0].replace(/^ *>[ \\t]?/gm, "")\n\n      return {\n        type: "blockquote",\n        raw: cap[0],\n        tokens: this.lexer.blockTokens(text, []),\n        text,\n      }\n    }\n  }\n\n  list(src) {\n    let cap = this.rules.block.list.exec(src)\n    if (cap) {\n      let raw,\n        istask,\n        ischecked,\n        indent,\n        i,\n        blankLine,\n        endsWithBlankLine,\n        line,\n        nextLine,\n        rawLine,\n        itemContents,\n        endEarly\n\n      let bull = cap[1].trim()\n      const isordered = bull.length > 1\n\n      const list = {\n        type: "list",\n        raw: "",\n        ordered: isordered,\n        start: isordered ? +bull.slice(0, -1) : "",\n        loose: false,\n        items: [],\n      }\n\n      bull = isordered ? `\\\\d{1,9}\\\\${bull.slice(-1)}` : `\\\\${bull}`\n\n      if (this.options.pedantic) {\n        bull = isordered ? bull : "[*+-]"\n      }\n\n      // Get next list item\n      const itemRegex = new RegExp(\n        `^( {0,3}${bull})((?:[\\t ][^\\\\n]*)?(?:\\\\n|$))`\n      )\n\n      // Check if current bullet point can start a new List Item\n      while (src) {\n        endEarly = false\n        if (!(cap = itemRegex.exec(src))) {\n          break\n        }\n\n        if (this.rules.block.hr.test(src)) {\n          // End list if bullet was actually HR (possibly move into itemRegex?)\n          break\n        }\n\n        raw = cap[0]\n        src = src.substring(raw.length)\n\n        line = cap[2].split("\\n", 1)[0]\n        nextLine = src.split("\\n", 1)[0]\n\n        if (this.options.pedantic) {\n          indent = 2\n          itemContents = line.trimLeft()\n        } else {\n          indent = cap[2].search(/[^ ]/) // Find first non-space char\n          indent = indent > 4 ? 1 : indent // Treat indented code blocks (> 4 spaces) as having only 1 indent\n          itemContents = line.slice(indent)\n          indent += cap[1].length\n        }\n\n        blankLine = false\n\n        if (!line && /^ *$/.test(nextLine)) {\n          // Items begin with at most one blank line\n          raw += nextLine + "\\n"\n          src = src.substring(nextLine.length + 1)\n          endEarly = true\n        }\n\n        if (!endEarly) {\n          const nextBulletRegex = new RegExp(\n            `^ {0,${Math.min(\n              3,\n              indent - 1\n            )}}(?:[*+-]|\\\\d{1,9}[.)])((?: [^\\\\n]*)?(?:\\\\n|$))`\n          )\n          const hrRegex = new RegExp(\n            `^ {0,${Math.min(\n              3,\n              indent - 1\n            )}}((?:- *){3,}|(?:_ *){3,}|(?:\\\\* *){3,})(?:\\\\n+|$)`\n          )\n\n          // Check if following lines should be included in List Item\n          while (src) {\n            rawLine = src.split("\\n", 1)[0]\n            line = rawLine\n\n            // Re-align to follow commonmark nesting rules\n            if (this.options.pedantic) {\n              line = line.replace(/^ {1,4}(?=( {4})*[^ ])/g, "  ")\n            }\n\n            // End list item if found start of new bullet\n            if (nextBulletRegex.test(line)) {\n              break\n            }\n\n            // Horizontal rule found\n            if (hrRegex.test(src)) {\n              break\n            }\n\n            if (line.search(/[^ ]/) >= indent || !line.trim()) {\n              // Dedent if possible\n              itemContents += "\\n" + line.slice(indent)\n            } else if (!blankLine) {\n              // Until blank line, item doesn\'t need indentation\n              itemContents += "\\n" + line\n            } else {\n              // Otherwise, improper indentation ends this item\n              break\n            }\n\n            if (!blankLine && !line.trim()) {\n              // Check if current line is blank\n              blankLine = true\n            }\n\n            raw += rawLine + "\\n"\n            src = src.substring(rawLine.length + 1)\n          }\n        }\n\n        if (!list.loose) {\n          // If the previous item ended with a blank line, the list is loose\n          if (endsWithBlankLine) {\n            list.loose = true\n          } else if (/\\n *\\n *$/.test(raw)) {\n            endsWithBlankLine = true\n          }\n        }\n\n        // Check for task list items\n        if (this.options.gfm) {\n          istask = /^\\[[ xX]\\] /.exec(itemContents)\n          if (istask) {\n            ischecked = istask[0] !== "[ ] "\n            itemContents = itemContents.replace(/^\\[[ xX]\\] +/, "")\n          }\n        }\n\n        list.items.push({\n          type: "list_item",\n          raw,\n          task: !!istask,\n          checked: ischecked,\n          loose: false,\n          text: itemContents,\n        })\n\n        list.raw += raw\n      }\n\n      // Do not consume newlines at end of final item. Alternatively, make itemRegex *start* with any newlines to simplify/speed up endsWithBlankLine logic\n      list.items[list.items.length - 1].raw = raw.trimRight()\n      list.items[list.items.length - 1].text = itemContents.trimRight()\n      list.raw = list.raw.trimRight()\n\n      const l = list.items.length\n\n      // Item child tokens handled here at end because we needed to have the final item to trim it first\n      for (i = 0; i < l; i++) {\n        this.lexer.state.top = false\n        list.items[i].tokens = this.lexer.blockTokens(list.items[i].text, [])\n        const spacers = list.items[i].tokens.filter(t => t.type === "space")\n        const hasMultipleLineBreaks = spacers.every(t => {\n          const chars = t.raw.split("")\n          let lineBreaks = 0\n          for (const char of chars) {\n            if (char === "\\n") {\n              lineBreaks += 1\n            }\n            if (lineBreaks > 1) {\n              return true\n            }\n          }\n\n          return false\n        })\n\n        if (!list.loose && spacers.length && hasMultipleLineBreaks) {\n          // Having a single line break doesn\'t mean a list is loose. A single line break is terminating the last list item\n          list.loose = true\n          list.items[i].loose = true\n        }\n      }\n\n      return list\n    }\n  }\n\n  html(src) {\n    const cap = this.rules.block.html.exec(src)\n    if (cap) {\n      const token = {\n        type: "html",\n        raw: cap[0],\n        pre:\n          !this.options.sanitizer &&\n          (cap[1] === "pre" || cap[1] === "script" || cap[1] === "style"),\n        text: cap[0],\n      }\n      if (this.options.sanitize) {\n        token.type = "paragraph"\n        token.text = this.options.sanitizer\n          ? this.options.sanitizer(cap[0])\n          : escape(cap[0])\n        token.tokens = []\n        this.lexer.inline(token.text, token.tokens)\n      }\n      return token\n    }\n  }\n\n  def(src) {\n    const cap = this.rules.block.def.exec(src)\n    if (cap) {\n      if (cap[3]) cap[3] = cap[3].substring(1, cap[3].length - 1)\n      const tag = cap[1].toLowerCase().replace(/\\s+/g, " ")\n      return {\n        type: "def",\n        tag,\n        raw: cap[0],\n        href: cap[2],\n        title: cap[3],\n      }\n    }\n  }\n\n  table(src) {\n    const cap = this.rules.block.table.exec(src)\n    if (cap) {\n      const item = {\n        type: "table",\n        header: splitCells(cap[1]).map(c => {\n          return { text: c }\n        }),\n        align: cap[2].replace(/^ *|\\| *$/g, "").split(/ *\\| */),\n        rows:\n          cap[3] && cap[3].trim()\n            ? cap[3].replace(/\\n[ \\t]*$/, "").split("\\n")\n            : [],\n      }\n\n      if (item.header.length === item.align.length) {\n        item.raw = cap[0]\n\n        let l = item.align.length\n        let i, j, k, row\n        for (i = 0; i < l; i++) {\n          if (/^ *-+: *$/.test(item.align[i])) {\n            item.align[i] = "right"\n          } else if (/^ *:-+: *$/.test(item.align[i])) {\n            item.align[i] = "center"\n          } else if (/^ *:-+ *$/.test(item.align[i])) {\n            item.align[i] = "left"\n          } else {\n            item.align[i] = null\n          }\n        }\n\n        l = item.rows.length\n        for (i = 0; i < l; i++) {\n          item.rows[i] = splitCells(item.rows[i], item.header.length).map(c => {\n            return { text: c }\n          })\n        }\n\n        // parse child tokens inside headers and cells\n\n        // header child tokens\n        l = item.header.length\n        for (j = 0; j < l; j++) {\n          item.header[j].tokens = []\n          this.lexer.inline(item.header[j].text, item.header[j].tokens)\n        }\n\n        // cell child tokens\n        l = item.rows.length\n        for (j = 0; j < l; j++) {\n          row = item.rows[j]\n          for (k = 0; k < row.length; k++) {\n            row[k].tokens = []\n            this.lexer.inline(row[k].text, row[k].tokens)\n          }\n        }\n\n        return item\n      }\n    }\n  }\n\n  lheading(src) {\n    const cap = this.rules.block.lheading.exec(src)\n    if (cap) {\n      const token = {\n        type: "heading",\n        raw: cap[0],\n        depth: cap[2].charAt(0) === "=" ? 1 : 2,\n        text: cap[1],\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  paragraph(src) {\n    const cap = this.rules.block.paragraph.exec(src)\n    if (cap) {\n      const token = {\n        type: "paragraph",\n        raw: cap[0],\n        text:\n          cap[1].charAt(cap[1].length - 1) === "\\n"\n            ? cap[1].slice(0, -1)\n            : cap[1],\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  text(src) {\n    const cap = this.rules.block.text.exec(src)\n    if (cap) {\n      const token = {\n        type: "text",\n        raw: cap[0],\n        text: cap[0],\n        tokens: [],\n      }\n      this.lexer.inline(token.text, token.tokens)\n      return token\n    }\n  }\n\n  escape(src) {\n    const cap = this.rules.inline.escape.exec(src)\n    if (cap) {\n      return {\n        type: "escape",\n        raw: cap[0],\n        text: escape(cap[1]),\n      }\n    }\n  }\n\n  tag(src) {\n    const cap = this.rules.inline.tag.exec(src)\n    if (cap) {\n      if (!this.lexer.state.inLink && /^<a /i.test(cap[0])) {\n        this.lexer.state.inLink = true\n      } else if (this.lexer.state.inLink && /^<\\/a>/i.test(cap[0])) {\n        this.lexer.state.inLink = false\n      }\n      if (\n        !this.lexer.state.inRawBlock &&\n        /^<(pre|code|kbd|script)(\\s|>)/i.test(cap[0])\n      ) {\n        this.lexer.state.inRawBlock = true\n      } else if (\n        this.lexer.state.inRawBlock &&\n        /^<\\/(pre|code|kbd|script)(\\s|>)/i.test(cap[0])\n      ) {\n        this.lexer.state.inRawBlock = false\n      }\n\n      return {\n        type: this.options.sanitize ? "text" : "html",\n        raw: cap[0],\n        inLink: this.lexer.state.inLink,\n        inRawBlock: this.lexer.state.inRawBlock,\n        text: this.options.sanitize\n          ? this.options.sanitizer\n            ? this.options.sanitizer(cap[0])\n            : escape(cap[0])\n          : cap[0],\n      }\n    }\n  }\n\n  link(src) {\n    const cap = this.rules.inline.link.exec(src)\n    if (cap) {\n      const trimmedUrl = cap[2].trim()\n      if (!this.options.pedantic && /^</.test(trimmedUrl)) {\n        // commonmark requires matching angle brackets\n        if (!/>$/.test(trimmedUrl)) {\n          return\n        }\n\n        // ending angle bracket cannot be escaped\n        const rtrimSlash = rtrim(trimmedUrl.slice(0, -1), "\\\\")\n        if ((trimmedUrl.length - rtrimSlash.length) % 2 === 0) {\n          return\n        }\n      } else {\n        // find closing parenthesis\n        const lastParenIndex = findClosingBracket(cap[2], "()")\n        if (lastParenIndex > -1) {\n          const start = cap[0].indexOf("!") === 0 ? 5 : 4\n          const linkLen = start + cap[1].length + lastParenIndex\n          cap[2] = cap[2].substring(0, lastParenIndex)\n          cap[0] = cap[0].substring(0, linkLen).trim()\n          cap[3] = ""\n        }\n      }\n      let href = cap[2]\n      let title = ""\n      if (this.options.pedantic) {\n        // split pedantic href and title\n        const link = /^([^\'"]*[^\\s])\\s+([\'"])(.*)\\2/.exec(href)\n\n        if (link) {\n          href = link[1]\n          title = link[3]\n        }\n      } else {\n        title = cap[3] ? cap[3].slice(1, -1) : ""\n      }\n\n      href = href.trim()\n      if (/^</.test(href)) {\n        if (this.options.pedantic && !/>$/.test(trimmedUrl)) {\n          // pedantic allows starting angle bracket without ending angle bracket\n          href = href.slice(1)\n        } else {\n          href = href.slice(1, -1)\n        }\n      }\n      return outputLink(\n        cap,\n        {\n          href: href ? href.replace(this.rules.inline._escapes, "$1") : href,\n          title: title\n            ? title.replace(this.rules.inline._escapes, "$1")\n            : title,\n        },\n        cap[0],\n        this.lexer\n      )\n    }\n  }\n\n  reflink(src, links) {\n    let cap\n    if (\n      (cap = this.rules.inline.reflink.exec(src)) ||\n      (cap = this.rules.inline.nolink.exec(src))\n    ) {\n      let link = (cap[2] || cap[1]).replace(/\\s+/g, " ")\n      link = links[link.toLowerCase()]\n      if (!link || !link.href) {\n        const text = cap[0].charAt(0)\n        return {\n          type: "text",\n          raw: text,\n          text,\n        }\n      }\n      return outputLink(cap, link, cap[0], this.lexer)\n    }\n  }\n\n  emStrong(src, maskedSrc, prevChar = "") {\n    let match = this.rules.inline.emStrong.lDelim.exec(src)\n    if (!match) return\n\n    // _ can\'t be between two alphanumerics. \\p{L}\\p{N} includes non-english alphabet/numbers as well\n    if (match[3] && prevChar.match(/[\\p{L}\\p{N}]/u)) return\n\n    const nextChar = match[1] || match[2] || ""\n\n    if (\n      !nextChar ||\n      (nextChar &&\n        (prevChar === "" || this.rules.inline.punctuation.exec(prevChar)))\n    ) {\n      const lLength = match[0].length - 1\n      let rDelim,\n        rLength,\n        delimTotal = lLength,\n        midDelimTotal = 0\n\n      const endReg =\n        match[0][0] === "*"\n          ? this.rules.inline.emStrong.rDelimAst\n          : this.rules.inline.emStrong.rDelimUnd\n      endReg.lastIndex = 0\n\n      // Clip maskedSrc to same section of string as src (move to lexer?)\n      maskedSrc = maskedSrc.slice(-1 * src.length + lLength)\n\n      while ((match = endReg.exec(maskedSrc)) != null) {\n        rDelim =\n          match[1] || match[2] || match[3] || match[4] || match[5] || match[6]\n\n        if (!rDelim) continue // skip single * in __abc*abc__\n\n        rLength = rDelim.length\n\n        if (match[3] || match[4]) {\n          // found another Left Delim\n          delimTotal += rLength\n          continue\n        } else if (match[5] || match[6]) {\n          // either Left or Right Delim\n          if (lLength % 3 && !((lLength + rLength) % 3)) {\n            midDelimTotal += rLength\n            continue // CommonMark Emphasis Rules 9-10\n          }\n        }\n\n        delimTotal -= rLength\n\n        if (delimTotal > 0) continue // Haven\'t found enough closing delimiters\n\n        // Remove extra characters. *a*** -> *a*\n        rLength = Math.min(rLength, rLength + delimTotal + midDelimTotal)\n\n        // Create `em` if smallest delimiter has odd char count. *a***\n        if (Math.min(lLength, rLength) % 2) {\n          const text = src.slice(1, lLength + match.index + rLength)\n          return {\n            type: "em",\n            raw: src.slice(0, lLength + match.index + rLength + 1),\n            text,\n            tokens: this.lexer.inlineTokens(text, []),\n          }\n        }\n\n        // Create \'strong\' if smallest delimiter has even char count. **a***\n        const text = src.slice(2, lLength + match.index + rLength - 1)\n        return {\n          type: "strong",\n          raw: src.slice(0, lLength + match.index + rLength + 1),\n          text,\n          tokens: this.lexer.inlineTokens(text, []),\n        }\n      }\n    }\n  }\n\n  codespan(src) {\n    const cap = this.rules.inline.code.exec(src)\n    if (cap) {\n      let text = cap[2].replace(/\\n/g, " ")\n      const hasNonSpaceChars = /[^ ]/.test(text)\n      const hasSpaceCharsOnBothEnds = /^ /.test(text) && / $/.test(text)\n      if (hasNonSpaceChars && hasSpaceCharsOnBothEnds) {\n        text = text.substring(1, text.length - 1)\n      }\n      text = escape(text, true)\n      return {\n        type: "codespan",\n        raw: cap[0],\n        text,\n      }\n    }\n  }\n\n  br(src) {\n    const cap = this.rules.inline.br.exec(src)\n    if (cap) {\n      return {\n        type: "br",\n        raw: cap[0],\n      }\n    }\n  }\n\n  del(src) {\n    const cap = this.rules.inline.del.exec(src)\n    if (cap) {\n      return {\n        type: "del",\n        raw: cap[0],\n        text: cap[2],\n        tokens: this.lexer.inlineTokens(cap[2], []),\n      }\n    }\n  }\n\n  autolink(src, mangle) {\n    const cap = this.rules.inline.autolink.exec(src)\n    if (cap) {\n      let text, href\n      if (cap[2] === "@") {\n        text = escape(this.options.mangle ? mangle(cap[1]) : cap[1])\n        href = "mailto:" + text\n      } else {\n        text = escape(cap[1])\n        href = text\n      }\n\n      return {\n        type: "link",\n        raw: cap[0],\n        text,\n        href,\n        tokens: [\n          {\n            type: "text",\n            raw: text,\n            text,\n          },\n        ],\n      }\n    }\n  }\n\n  url(src, mangle) {\n    let cap\n    if ((cap = this.rules.inline.url.exec(src))) {\n      let text, href\n      if (cap[2] === "@") {\n        text = escape(this.options.mangle ? mangle(cap[0]) : cap[0])\n        href = "mailto:" + text\n      } else {\n        // do extended autolink path validation\n        let prevCapZero\n        do {\n          prevCapZero = cap[0]\n          cap[0] = this.rules.inline._backpedal.exec(cap[0])[0]\n        } while (prevCapZero !== cap[0])\n        text = escape(cap[0])\n        if (cap[1] === "www.") {\n          href = "http://" + text\n        } else {\n          href = text\n        }\n      }\n      return {\n        type: "link",\n        raw: cap[0],\n        text,\n        href,\n        tokens: [\n          {\n            type: "text",\n            raw: text,\n            text,\n          },\n        ],\n      }\n    }\n  }\n\n  inlineText(src, smartypants) {\n    const cap = this.rules.inline.text.exec(src)\n    if (cap) {\n      let text\n      if (this.lexer.state.inRawBlock) {\n        text = this.options.sanitize\n          ? this.options.sanitizer\n            ? this.options.sanitizer(cap[0])\n            : escape(cap[0])\n          : cap[0]\n      } else {\n        text = escape(this.options.smartypants ? smartypants(cap[0]) : cap[0])\n      }\n      return {\n        type: "text",\n        raw: cap[0],\n        text,\n      }\n    }\n  }\n}\n\n/**\n * Block-Level Grammar\n */\nconst block = {\n  newline: /^(?: *(?:\\n|$))+/,\n  code: /^( {4}[^\\n]+(?:\\n(?: *(?:\\n|$))*)?)+/,\n  fences:\n    /^ {0,3}(`{3,}(?=[^`\\n]*\\n)|~{3,})([^\\n]*)\\n(?:|([\\s\\S]*?)\\n)(?: {0,3}\\1[~`]* *(?=\\n|$)|$)/,\n  hr: /^ {0,3}((?:-[\\t ]*){3,}|(?:_[ \\t]*){3,}|(?:\\*[ \\t]*){3,})(?:\\n+|$)/,\n  heading: /^ {0,3}(#{1,6})(?=\\s|$)(.*)(?:\\n+|$)/,\n  blockquote: /^( {0,3}> ?(paragraph|[^\\n]*)(?:\\n|$))+/,\n  list: /^( {0,3}bull)([ \\t][^\\n]+?)?(?:\\n|$)/,\n  html:\n    "^ {0,3}(?:" + // optional indentation\n    "<(script|pre|style|textarea)[\\\\s>][\\\\s\\\\S]*?(?:</\\\\1>[^\\\\n]*\\\\n+|$)" + // (1)\n    "|comment[^\\\\n]*(\\\\n+|$)" + // (2)\n    "|<\\\\?[\\\\s\\\\S]*?(?:\\\\?>\\\\n*|$)" + // (3)\n    "|<![A-Z][\\\\s\\\\S]*?(?:>\\\\n*|$)" + // (4)\n    "|<!\\\\[CDATA\\\\[[\\\\s\\\\S]*?(?:\\\\]\\\\]>\\\\n*|$)" + // (5)\n    "|</?(tag)(?: +|\\\\n|/?>)[\\\\s\\\\S]*?(?:(?:\\\\n *)+\\\\n|$)" + // (6)\n    "|<(?!script|pre|style|textarea)([a-z][\\\\w-]*)(?:attribute)*? */?>(?=[ \\\\t]*(?:\\\\n|$))[\\\\s\\\\S]*?(?:(?:\\\\n *)+\\\\n|$)" + // (7) open tag\n    "|</(?!script|pre|style|textarea)[a-z][\\\\w-]*\\\\s*>(?=[ \\\\t]*(?:\\\\n|$))[\\\\s\\\\S]*?(?:(?:\\\\n *)+\\\\n|$)" + // (7) closing tag\n    ")",\n  def: /^ {0,3}\\[(label)\\]: *(?:\\n *)?<?([^\\s>]+)>?(?:(?: +(?:\\n *)?| *\\n *)(title))? *(?:\\n+|$)/,\n  table: noopTest,\n  lheading: /^([^\\n]+)\\n {0,3}(=+|-+) *(?:\\n+|$)/,\n  // regex template, placeholders will be replaced according to different paragraph\n  // interruption rules of commonmark and the original markdown spec:\n  _paragraph:\n    /^([^\\n]+(?:\\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\\n)[^\\n]+)*)/,\n  text: /^[^\\n]+/,\n}\n\nblock._label = /(?!\\s*\\])(?:\\\\.|[^\\[\\]\\\\])+/\nblock._title = /(?:"(?:\\\\"?|[^"\\\\])*"|\'[^\'\\n]*(?:\\n[^\'\\n]+)*\\n?\'|\\([^()]*\\))/\nblock.def = edit(block.def)\n  .replace("label", block._label)\n  .replace("title", block._title)\n  .getRegex()\n\nblock.bullet = /(?:[*+-]|\\d{1,9}[.)])/\nblock.listItemStart = edit(/^( *)(bull) */)\n  .replace("bull", block.bullet)\n  .getRegex()\n\nblock.list = edit(block.list)\n  .replace(/bull/g, block.bullet)\n  .replace(\n    "hr",\n    "\\\\n+(?=\\\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\\\* *){3,})(?:\\\\n+|$))"\n  )\n  .replace("def", "\\\\n+(?=" + block.def.source + ")")\n  .getRegex()\n\nblock._tag =\n  "address|article|aside|base|basefont|blockquote|body|caption" +\n  "|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption" +\n  "|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe" +\n  "|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option" +\n  "|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr" +\n  "|track|ul"\nblock._comment = /\x3C!--(?!-?>)[\\s\\S]*?(?:-->|$)/\nblock.html = edit(block.html, "i")\n  .replace("comment", block._comment)\n  .replace("tag", block._tag)\n  .replace(\n    "attribute",\n    / +[a-zA-Z:_][\\w.:-]*(?: *= *"[^"\\n]*"| *= *\'[^\'\\n]*\'| *= *[^\\s"\'=<>`]+)?/\n  )\n  .getRegex()\n\nblock.paragraph = edit(block._paragraph)\n  .replace("hr", block.hr)\n  .replace("heading", " {0,3}#{1,6} ")\n  .replace("|lheading", "") // setex headings don\'t interrupt commonmark paragraphs\n  .replace("|table", "")\n  .replace("blockquote", " {0,3}>")\n  .replace("fences", " {0,3}(?:`{3,}(?=[^`\\\\n]*\\\\n)|~{3,})[^\\\\n]*\\\\n")\n  .replace("list", " {0,3}(?:[*+-]|1[.)]) ") // only lists starting from 1 can interrupt\n  .replace(\n    "html",\n    "</?(?:tag)(?: +|\\\\n|/?>)|<(?:script|pre|style|textarea|!--)"\n  )\n  .replace("tag", block._tag) // pars can be interrupted by type (6) html blocks\n  .getRegex()\n\nblock.blockquote = edit(block.blockquote)\n  .replace("paragraph", block.paragraph)\n  .getRegex()\n\n/**\n * Normal Block Grammar\n */\n\nblock.normal = merge({}, block)\n\n/**\n * GFM Block Grammar\n */\n\nblock.gfm = merge({}, block.normal, {\n  table:\n    "^ *([^\\\\n ].*\\\\|.*)\\\\n" + // Header\n    " {0,3}(?:\\\\| *)?(:?-+:? *(?:\\\\| *:?-+:? *)*)(?:\\\\| *)?" + // Align\n    "(?:\\\\n((?:(?! *\\\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\\\n|$))*)\\\\n*|$)", // Cells\n})\n\nblock.gfm.table = edit(block.gfm.table)\n  .replace("hr", block.hr)\n  .replace("heading", " {0,3}#{1,6} ")\n  .replace("blockquote", " {0,3}>")\n  .replace("code", " {4}[^\\\\n]")\n  .replace("fences", " {0,3}(?:`{3,}(?=[^`\\\\n]*\\\\n)|~{3,})[^\\\\n]*\\\\n")\n  .replace("list", " {0,3}(?:[*+-]|1[.)]) ") // only lists starting from 1 can interrupt\n  .replace(\n    "html",\n    "</?(?:tag)(?: +|\\\\n|/?>)|<(?:script|pre|style|textarea|!--)"\n  )\n  .replace("tag", block._tag) // tables can be interrupted by type (6) html blocks\n  .getRegex()\n\nblock.gfm.paragraph = edit(block._paragraph)\n  .replace("hr", block.hr)\n  .replace("heading", " {0,3}#{1,6} ")\n  .replace("|lheading", "") // setex headings don\'t interrupt commonmark paragraphs\n  .replace("table", block.gfm.table) // interrupt paragraphs with table\n  .replace("blockquote", " {0,3}>")\n  .replace("fences", " {0,3}(?:`{3,}(?=[^`\\\\n]*\\\\n)|~{3,})[^\\\\n]*\\\\n")\n  .replace("list", " {0,3}(?:[*+-]|1[.)]) ") // only lists starting from 1 can interrupt\n  .replace(\n    "html",\n    "</?(?:tag)(?: +|\\\\n|/?>)|<(?:script|pre|style|textarea|!--)"\n  )\n  .replace("tag", block._tag) // pars can be interrupted by type (6) html blocks\n  .getRegex()\n/**\n * Pedantic grammar (original John Gruber\'s loose markdown specification)\n */\n\nblock.pedantic = merge({}, block.normal, {\n  html: edit(\n    "^ *(?:comment *(?:\\\\n|\\\\s*$)" +\n      "|<(tag)[\\\\s\\\\S]+?</\\\\1> *(?:\\\\n{2,}|\\\\s*$)" + // closed tag\n      "|<tag(?:\\"[^\\"]*\\"|\'[^\']*\'|\\\\s[^\'\\"/>\\\\s]*)*?/?> *(?:\\\\n{2,}|\\\\s*$))"\n  )\n    .replace("comment", block._comment)\n    .replace(\n      /tag/g,\n      "(?!(?:" +\n        "a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub" +\n        "|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)" +\n        "\\\\b)\\\\w+(?!:|[^\\\\w\\\\s@]*@)\\\\b"\n    )\n    .getRegex(),\n  def: /^ *\\[([^\\]]+)\\]: *<?([^\\s>]+)>?(?: +(["(][^\\n]+[")]))? *(?:\\n+|$)/,\n  heading: /^(#{1,6})(.*)(?:\\n+|$)/,\n  fences: noopTest, // fences not supported\n  paragraph: edit(block.normal._paragraph)\n    .replace("hr", block.hr)\n    .replace("heading", " *#{1,6} *[^\\n]")\n    .replace("lheading", block.lheading)\n    .replace("blockquote", " {0,3}>")\n    .replace("|fences", "")\n    .replace("|list", "")\n    .replace("|html", "")\n    .getRegex(),\n})\n\n/**\n * Inline-Level Grammar\n */\nconst inline = {\n  escape: /^\\\\([!"#$%&\'()*+,\\-./:;<=>?@\\[\\]\\\\^_`{|}~])/,\n  autolink: /^<(scheme:[^\\s\\x00-\\x1f<>]*|email)>/,\n  url: noopTest,\n  tag:\n    "^comment" +\n    "|^</[a-zA-Z][\\\\w:-]*\\\\s*>" + // self-closing tag\n    "|^<[a-zA-Z][\\\\w-]*(?:attribute)*?\\\\s*/?>" + // open tag\n    "|^<\\\\?[\\\\s\\\\S]*?\\\\?>" + // processing instruction, e.g. <?php ?>\n    "|^<![a-zA-Z]+\\\\s[\\\\s\\\\S]*?>" + // declaration, e.g. <!DOCTYPE html>\n    "|^<!\\\\[CDATA\\\\[[\\\\s\\\\S]*?\\\\]\\\\]>", // CDATA section\n  link: /^!?\\[(label)\\]\\(\\s*(href)(?:\\s+(title))?\\s*\\)/,\n  reflink: /^!?\\[(label)\\]\\[(ref)\\]/,\n  nolink: /^!?\\[(ref)\\](?:\\[\\])?/,\n  reflinkSearch: "reflink|nolink(?!\\\\()",\n  emStrong: {\n    lDelim: /^(?:\\*+(?:([punct_])|[^\\s*]))|^_+(?:([punct*])|([^\\s_]))/,\n    //        (1) and (2) can only be a Right Delimiter. (3) and (4) can only be Left.  (5) and (6) can be either Left or Right.\n    //          () Skip orphan inside strong  () Consume to delim (1) #***                (2) a***#, a***                   (3) #***a, ***a                 (4) ***#              (5) #***#                 (6) a***a\n    rDelimAst:\n      /^[^_*]*?\\_\\_[^_*]*?\\*[^_*]*?(?=\\_\\_)|[^*]+(?=[^*])|[punct_](\\*+)(?=[\\s]|$)|[^punct*_\\s](\\*+)(?=[punct_\\s]|$)|[punct_\\s](\\*+)(?=[^punct*_\\s])|[\\s](\\*+)(?=[punct_])|[punct_](\\*+)(?=[punct_])|[^punct*_\\s](\\*+)(?=[^punct*_\\s])/,\n    rDelimUnd:\n      /^[^_*]*?\\*\\*[^_*]*?\\_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|[punct*](\\_+)(?=[\\s]|$)|[^punct*_\\s](\\_+)(?=[punct*\\s]|$)|[punct*\\s](\\_+)(?=[^punct*_\\s])|[\\s](\\_+)(?=[punct*])|[punct*](\\_+)(?=[punct*])/, // ^- Not allowed for _\n  },\n  code: /^(`+)([^`]|[^`][\\s\\S]*?[^`])\\1(?!`)/,\n  br: /^( {2,}|\\\\)\\n(?!\\s*$)/,\n  del: noopTest,\n  text: /^(`+|[^`])(?:(?= {2,}\\n)|[\\s\\S]*?(?:(?=[\\\\<!\\[`*_]|\\b_|$)|[^ ](?= {2,}\\n)))/,\n  punctuation: /^([\\spunctuation])/,\n}\n\n// list of punctuation marks from CommonMark spec\n// without * and _ to handle the different emphasis markers * and _\ninline._punctuation = "!\\"#$%&\'()+\\\\-.,/:;<=>?@\\\\[\\\\]`^{|}~"\ninline.punctuation = edit(inline.punctuation)\n  .replace(/punctuation/g, inline._punctuation)\n  .getRegex()\n\n// sequences em should skip over [title](link), `code`, <html>\ninline.blockSkip = /\\[[^\\]]*?\\]\\([^\\)]*?\\)|`[^`]*?`|<[^>]*?>/g\ninline.escapedEmSt = /\\\\\\*|\\\\_/g\n\ninline._comment = edit(block._comment).replace("(?:-->|$)", "-->").getRegex()\n\ninline.emStrong.lDelim = edit(inline.emStrong.lDelim)\n  .replace(/punct/g, inline._punctuation)\n  .getRegex()\n\ninline.emStrong.rDelimAst = edit(inline.emStrong.rDelimAst, "g")\n  .replace(/punct/g, inline._punctuation)\n  .getRegex()\n\ninline.emStrong.rDelimUnd = edit(inline.emStrong.rDelimUnd, "g")\n  .replace(/punct/g, inline._punctuation)\n  .getRegex()\n\ninline._escapes = /\\\\([!"#$%&\'()*+,\\-./:;<=>?@\\[\\]\\\\^_`{|}~])/g\n\ninline._scheme = /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/\ninline._email =\n  /[a-zA-Z0-9.!#$%&\'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/\ninline.autolink = edit(inline.autolink)\n  .replace("scheme", inline._scheme)\n  .replace("email", inline._email)\n  .getRegex()\n\ninline._attribute =\n  /\\s+[a-zA-Z:_][\\w.:-]*(?:\\s*=\\s*"[^"]*"|\\s*=\\s*\'[^\']*\'|\\s*=\\s*[^\\s"\'=<>`]+)?/\n\ninline.tag = edit(inline.tag)\n  .replace("comment", inline._comment)\n  .replace("attribute", inline._attribute)\n  .getRegex()\n\ninline._label = /(?:\\[(?:\\\\.|[^\\[\\]\\\\])*\\]|\\\\.|`[^`]*`|[^\\[\\]\\\\`])*?/\ninline._href = /<(?:\\\\.|[^\\n<>\\\\])+>|[^\\s\\x00-\\x1f]*/\ninline._title = /"(?:\\\\"?|[^"\\\\])*"|\'(?:\\\\\'?|[^\'\\\\])*\'|\\((?:\\\\\\)?|[^)\\\\])*\\)/\n\ninline.link = edit(inline.link)\n  .replace("label", inline._label)\n  .replace("href", inline._href)\n  .replace("title", inline._title)\n  .getRegex()\n\ninline.reflink = edit(inline.reflink)\n  .replace("label", inline._label)\n  .replace("ref", block._label)\n  .getRegex()\n\ninline.nolink = edit(inline.nolink).replace("ref", block._label).getRegex()\n\ninline.reflinkSearch = edit(inline.reflinkSearch, "g")\n  .replace("reflink", inline.reflink)\n  .replace("nolink", inline.nolink)\n  .getRegex()\n\n/**\n * Normal Inline Grammar\n */\n\ninline.normal = merge({}, inline)\n\n/**\n * Pedantic Inline Grammar\n */\n\ninline.pedantic = merge({}, inline.normal, {\n  strong: {\n    start: /^__|\\*\\*/,\n    middle: /^__(?=\\S)([\\s\\S]*?\\S)__(?!_)|^\\*\\*(?=\\S)([\\s\\S]*?\\S)\\*\\*(?!\\*)/,\n    endAst: /\\*\\*(?!\\*)/g,\n    endUnd: /__(?!_)/g,\n  },\n  em: {\n    start: /^_|\\*/,\n    middle: /^()\\*(?=\\S)([\\s\\S]*?\\S)\\*(?!\\*)|^_(?=\\S)([\\s\\S]*?\\S)_(?!_)/,\n    endAst: /\\*(?!\\*)/g,\n    endUnd: /_(?!_)/g,\n  },\n  link: edit(/^!?\\[(label)\\]\\((.*?)\\)/)\n    .replace("label", inline._label)\n    .getRegex(),\n  reflink: edit(/^!?\\[(label)\\]\\s*\\[([^\\]]*)\\]/)\n    .replace("label", inline._label)\n    .getRegex(),\n})\n\n/**\n * GFM Inline Grammar\n */\n\ninline.gfm = merge({}, inline.normal, {\n  escape: edit(inline.escape).replace("])", "~|])").getRegex(),\n  _extended_email:\n    /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/,\n  url: /^((?:ftp|https?):\\/\\/|www\\.)(?:[a-zA-Z0-9\\-]+\\.?)+[^\\s<]*|^email/,\n  _backpedal:\n    /(?:[^?!.,:;*_~()&]+|\\([^)]*\\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/,\n  del: /^(~~?)(?=[^\\s~])([\\s\\S]*?[^\\s~])\\1(?=[^~]|$)/,\n  text: /^([`~]+|[^`~])(?:(?= {2,}\\n)|(?=[a-zA-Z0-9.!#$%&\'*+\\/=?_`{\\|}~-]+@)|[\\s\\S]*?(?:(?=[\\\\<!\\[`*~_]|\\b_|https?:\\/\\/|ftp:\\/\\/|www\\.|$)|[^ ](?= {2,}\\n)|[^a-zA-Z0-9.!#$%&\'*+\\/=?_`{\\|}~-](?=[a-zA-Z0-9.!#$%&\'*+\\/=?_`{\\|}~-]+@)))/,\n})\n\ninline.gfm.url = edit(inline.gfm.url, "i")\n  .replace("email", inline.gfm._extended_email)\n  .getRegex()\n/**\n * GFM + Line Breaks Inline Grammar\n */\n\ninline.breaks = merge({}, inline.gfm, {\n  br: edit(inline.br).replace("{2,}", "*").getRegex(),\n  text: edit(inline.gfm.text)\n    .replace("\\\\b_", "\\\\b_| {2,}\\\\n")\n    .replace(/\\{2,\\}/g, "*")\n    .getRegex(),\n})\n\n/**\n * smartypants text replacement\n * @param {string} text\n */\nfunction smartypants(text) {\n  return (\n    text\n      // em-dashes\n      .replace(/---/g, "\\u2014")\n      // en-dashes\n      .replace(/--/g, "\\u2013")\n      // opening singles\n      .replace(/(^|[-\\u2014/(\\[{"\\s])\'/g, "$1\\u2018")\n      // closing singles & apostrophes\n      .replace(/\'/g, "\\u2019")\n      // opening doubles\n      .replace(/(^|[-\\u2014/(\\[{\\u2018\\s])"/g, "$1\\u201c")\n      // closing doubles\n      .replace(/"/g, "\\u201d")\n      // ellipses\n      .replace(/\\.{3}/g, "\\u2026")\n  )\n}\n\n/**\n * mangle email addresses\n * @param {string} text\n */\nfunction mangle(text) {\n  let out = "",\n    i,\n    ch\n\n  const l = text.length\n  for (i = 0; i < l; i++) {\n    ch = text.charCodeAt(i)\n    if (Math.random() > 0.5) {\n      ch = "x" + ch.toString(16)\n    }\n    out += "&#" + ch + ";"\n  }\n\n  return out\n}\n\n/**\n * Block Lexer\n */\nclass Lexer {\n  constructor(options) {\n    this.tokens = []\n    this.tokens.links = Object.create(null)\n    this.options = options || defaults\n    this.options.tokenizer = this.options.tokenizer || new Tokenizer()\n    this.tokenizer = this.options.tokenizer\n    this.tokenizer.options = this.options\n    this.tokenizer.lexer = this\n    this.inlineQueue = []\n    this.state = {\n      inLink: false,\n      inRawBlock: false,\n      top: true,\n    }\n\n    const rules = {\n      block: block.normal,\n      inline: inline.normal,\n    }\n\n    if (this.options.pedantic) {\n      rules.block = block.pedantic\n      rules.inline = inline.pedantic\n    } else if (this.options.gfm) {\n      rules.block = block.gfm\n      if (this.options.breaks) {\n        rules.inline = inline.breaks\n      } else {\n        rules.inline = inline.gfm\n      }\n    }\n    this.tokenizer.rules = rules\n  }\n\n  /**\n   * Expose Rules\n   */\n  static get rules() {\n    return {\n      block,\n      inline,\n    }\n  }\n\n  /**\n   * Static Lex Method\n   */\n  static lex(src, options) {\n    const lexer = new Lexer(options)\n    return lexer.lex(src)\n  }\n\n  /**\n   * Static Lex Inline Method\n   */\n  static lexInline(src, options) {\n    const lexer = new Lexer(options)\n    return lexer.inlineTokens(src)\n  }\n\n  /**\n   * Preprocessing\n   */\n  lex(src) {\n    src = src.replace(/\\r\\n|\\r/g, "\\n")\n\n    this.blockTokens(src, this.tokens)\n\n    let next\n    while ((next = this.inlineQueue.shift())) {\n      this.inlineTokens(next.src, next.tokens)\n    }\n\n    return this.tokens\n  }\n\n  /**\n   * Lexing\n   */\n  blockTokens(src, tokens = []) {\n    if (this.options.pedantic) {\n      src = src.replace(/\\t/g, "    ").replace(/^ +$/gm, "")\n    } else {\n      src = src.replace(/^( *)(\\t+)/gm, (_, leading, tabs) => {\n        return leading + "    ".repeat(tabs.length)\n      })\n    }\n\n    let token, lastToken, cutSrc, lastParagraphClipped\n\n    while (src) {\n      if (\n        this.options.extensions &&\n        this.options.extensions.block &&\n        this.options.extensions.block.some(extTokenizer => {\n          if ((token = extTokenizer.call({ lexer: this }, src, tokens))) {\n            src = src.substring(token.raw.length)\n            tokens.push(token)\n            return true\n          }\n          return false\n        })\n      ) {\n        continue\n      }\n\n      // newline\n      if ((token = this.tokenizer.space(src))) {\n        src = src.substring(token.raw.length)\n        if (token.raw.length === 1 && tokens.length > 0) {\n          // if there\'s a single \\n as a spacer, it\'s terminating the last line,\n          // so move it there so that we don\'t get unecessary paragraph tags\n          tokens[tokens.length - 1].raw += "\\n"\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // code\n      if ((token = this.tokenizer.code(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        // An indented code block cannot interrupt a paragraph.\n        if (\n          lastToken &&\n          (lastToken.type === "paragraph" || lastToken.type === "text")\n        ) {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.text\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // fences\n      if ((token = this.tokenizer.fences(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // heading\n      if ((token = this.tokenizer.heading(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // hr\n      if ((token = this.tokenizer.hr(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // blockquote\n      if ((token = this.tokenizer.blockquote(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // list\n      if ((token = this.tokenizer.list(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // html\n      if ((token = this.tokenizer.html(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // def\n      if ((token = this.tokenizer.def(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (\n          lastToken &&\n          (lastToken.type === "paragraph" || lastToken.type === "text")\n        ) {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.raw\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else if (!this.tokens.links[token.tag]) {\n          this.tokens.links[token.tag] = {\n            href: token.href,\n            title: token.title,\n          }\n        }\n        continue\n      }\n\n      // table (gfm)\n      if ((token = this.tokenizer.table(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // lheading\n      if ((token = this.tokenizer.lheading(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // top-level paragraph\n      // prevent paragraph consuming extensions by clipping \'src\' to extension start\n      cutSrc = src\n      if (this.options.extensions && this.options.extensions.startBlock) {\n        let startIndex = Infinity\n        const tempSrc = src.slice(1)\n        let tempStart\n        this.options.extensions.startBlock.forEach(function (getStartIndex) {\n          tempStart = getStartIndex.call({ lexer: this }, tempSrc)\n          if (typeof tempStart === "number" && tempStart >= 0) {\n            startIndex = Math.min(startIndex, tempStart)\n          }\n        })\n        if (startIndex < Infinity && startIndex >= 0) {\n          cutSrc = src.substring(0, startIndex + 1)\n        }\n      }\n      if (this.state.top && (token = this.tokenizer.paragraph(cutSrc))) {\n        lastToken = tokens[tokens.length - 1]\n        if (lastParagraphClipped && lastToken.type === "paragraph") {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.text\n          this.inlineQueue.pop()\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else {\n          tokens.push(token)\n        }\n        lastParagraphClipped = cutSrc.length !== src.length\n        src = src.substring(token.raw.length)\n        continue\n      }\n\n      // text\n      if ((token = this.tokenizer.text(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && lastToken.type === "text") {\n          lastToken.raw += "\\n" + token.raw\n          lastToken.text += "\\n" + token.text\n          this.inlineQueue.pop()\n          this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      if (src) {\n        const errMsg = "Infinite loop on byte: " + src.charCodeAt(0)\n        if (this.options.silent) {\n          console.error(errMsg)\n          break\n        } else {\n          throw new Error(errMsg)\n        }\n      }\n    }\n\n    this.state.top = true\n    return tokens\n  }\n\n  inline(src, tokens) {\n    this.inlineQueue.push({ src, tokens })\n  }\n\n  /**\n   * Lexing/Compiling\n   */\n  inlineTokens(src, tokens = []) {\n    let token, lastToken, cutSrc\n\n    // String with links masked to avoid interference with em and strong\n    let maskedSrc = src\n    let match\n    let keepPrevChar, prevChar\n\n    // Mask out reflinks\n    if (this.tokens.links) {\n      const links = Object.keys(this.tokens.links)\n      if (links.length > 0) {\n        while (\n          (match = this.tokenizer.rules.inline.reflinkSearch.exec(maskedSrc)) !=\n          null\n        ) {\n          if (\n            links.includes(match[0].slice(match[0].lastIndexOf("[") + 1, -1))\n          ) {\n            maskedSrc =\n              maskedSrc.slice(0, match.index) +\n              "[" +\n              repeatString("a", match[0].length - 2) +\n              "]" +\n              maskedSrc.slice(\n                this.tokenizer.rules.inline.reflinkSearch.lastIndex\n              )\n          }\n        }\n      }\n    }\n    // Mask out other blocks\n    while (\n      (match = this.tokenizer.rules.inline.blockSkip.exec(maskedSrc)) != null\n    ) {\n      maskedSrc =\n        maskedSrc.slice(0, match.index) +\n        "[" +\n        repeatString("a", match[0].length - 2) +\n        "]" +\n        maskedSrc.slice(this.tokenizer.rules.inline.blockSkip.lastIndex)\n    }\n\n    // Mask out escaped em & strong delimiters\n    while (\n      (match = this.tokenizer.rules.inline.escapedEmSt.exec(maskedSrc)) != null\n    ) {\n      maskedSrc =\n        maskedSrc.slice(0, match.index) +\n        "++" +\n        maskedSrc.slice(this.tokenizer.rules.inline.escapedEmSt.lastIndex)\n    }\n\n    while (src) {\n      if (!keepPrevChar) {\n        prevChar = ""\n      }\n      keepPrevChar = false\n\n      // extensions\n      if (\n        this.options.extensions &&\n        this.options.extensions.inline &&\n        this.options.extensions.inline.some(extTokenizer => {\n          if ((token = extTokenizer.call({ lexer: this }, src, tokens))) {\n            src = src.substring(token.raw.length)\n            tokens.push(token)\n            return true\n          }\n          return false\n        })\n      ) {\n        continue\n      }\n\n      // escape\n      if ((token = this.tokenizer.escape(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // tag\n      if ((token = this.tokenizer.tag(src))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && token.type === "text" && lastToken.type === "text") {\n          lastToken.raw += token.raw\n          lastToken.text += token.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // link\n      if ((token = this.tokenizer.link(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // reflink, nolink\n      if ((token = this.tokenizer.reflink(src, this.tokens.links))) {\n        src = src.substring(token.raw.length)\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && token.type === "text" && lastToken.type === "text") {\n          lastToken.raw += token.raw\n          lastToken.text += token.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      // em & strong\n      if ((token = this.tokenizer.emStrong(src, maskedSrc, prevChar))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // code\n      if ((token = this.tokenizer.codespan(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // br\n      if ((token = this.tokenizer.br(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // del (gfm)\n      if ((token = this.tokenizer.del(src))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // autolink\n      if ((token = this.tokenizer.autolink(src, mangle))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // url (gfm)\n      if (!this.state.inLink && (token = this.tokenizer.url(src, mangle))) {\n        src = src.substring(token.raw.length)\n        tokens.push(token)\n        continue\n      }\n\n      // text\n      // prevent inlineText consuming extensions by clipping \'src\' to extension start\n      cutSrc = src\n      if (this.options.extensions && this.options.extensions.startInline) {\n        let startIndex = Infinity\n        const tempSrc = src.slice(1)\n        let tempStart\n        this.options.extensions.startInline.forEach(function (getStartIndex) {\n          tempStart = getStartIndex.call({ lexer: this }, tempSrc)\n          if (typeof tempStart === "number" && tempStart >= 0) {\n            startIndex = Math.min(startIndex, tempStart)\n          }\n        })\n        if (startIndex < Infinity && startIndex >= 0) {\n          cutSrc = src.substring(0, startIndex + 1)\n        }\n      }\n      if ((token = this.tokenizer.inlineText(cutSrc, smartypants))) {\n        src = src.substring(token.raw.length)\n        if (token.raw.slice(-1) !== "_") {\n          // Track prevChar before string of ____ started\n          prevChar = token.raw.slice(-1)\n        }\n        keepPrevChar = true\n        lastToken = tokens[tokens.length - 1]\n        if (lastToken && lastToken.type === "text") {\n          lastToken.raw += token.raw\n          lastToken.text += token.text\n        } else {\n          tokens.push(token)\n        }\n        continue\n      }\n\n      if (src) {\n        const errMsg = "Infinite loop on byte: " + src.charCodeAt(0)\n        if (this.options.silent) {\n          console.error(errMsg)\n          break\n        } else {\n          throw new Error(errMsg)\n        }\n      }\n    }\n\n    return tokens\n  }\n}\n\n/**\n * Renderer\n */\nclass Renderer {\n  constructor(options) {\n    this.options = options || defaults\n  }\n\n  code(code, infostring, escaped) {\n    const lang = (infostring || "").match(/\\S*/)[0]\n    if (this.options.highlight) {\n      const out = this.options.highlight(code, lang)\n      if (out != null && out !== code) {\n        escaped = true\n        code = out\n      }\n    }\n\n    code = code.replace(/\\n$/, "") + "\\n"\n\n    if (!lang) {\n      return (\n        "<pre><code>" +\n        (escaped ? code : escape(code, true)) +\n        "</code></pre>\\n"\n      )\n    }\n\n    return (\n      \'<pre><code class="\' +\n      this.options.langPrefix +\n      escape(lang, true) +\n      \'">\' +\n      (escaped ? code : escape(code, true)) +\n      "</code></pre>\\n"\n    )\n  }\n\n  /**\n   * @param {string} quote\n   */\n  blockquote(quote) {\n    return `<blockquote>\\n${quote}</blockquote>\\n`\n  }\n\n  html(html) {\n    return html\n  }\n\n  /**\n   * @param {string} text\n   * @param {string} level\n   * @param {string} raw\n   * @param {any} slugger\n   */\n  heading(text, level, raw, slugger) {\n    if (this.options.headerIds) {\n      const id = this.options.headerPrefix + slugger.slug(raw)\n      return `<h${level} id="${id}">${text}</h${level}>\\n`\n    }\n\n    // ignore IDs\n    return `<h${level}>${text}</h${level}>\\n`\n  }\n\n  hr() {\n    return this.options.xhtml ? "<hr/>\\n" : "<hr>\\n"\n  }\n\n  list(body, ordered, start) {\n    const type = ordered ? "ol" : "ul",\n      startatt = ordered && start !== 1 ? \' start="\' + start + \'"\' : ""\n    return "<" + type + startatt + ">\\n" + body + "</" + type + ">\\n"\n  }\n\n  /**\n   * @param {string} text\n   */\n  listitem(text) {\n    return `<li>${text}</li>\\n`\n  }\n\n  checkbox(checked) {\n    return (\n      "<input " +\n      (checked ? \'checked="" \' : "") +\n      \'disabled="" type="checkbox"\' +\n      (this.options.xhtml ? " /" : "") +\n      "> "\n    )\n  }\n\n  /**\n   * @param {string} text\n   */\n  paragraph(text) {\n    return `<p>${text}</p>\\n`\n  }\n\n  /**\n   * @param {string} header\n   * @param {string} body\n   */\n  table(header, body) {\n    if (body) body = `<tbody>${body}</tbody>`\n\n    return (\n      "<table>\\n" + "<thead>\\n" + header + "</thead>\\n" + body + "</table>\\n"\n    )\n  }\n\n  /**\n   * @param {string} content\n   */\n  tablerow(content) {\n    return `<tr>\\n${content}</tr>\\n`\n  }\n\n  tablecell(content, flags) {\n    const type = flags.header ? "th" : "td"\n    const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`\n    return tag + content + `</${type}>\\n`\n  }\n\n  /**\n   * span level renderer\n   * @param {string} text\n   */\n  strong(text) {\n    return `<strong>${text}</strong>`\n  }\n\n  /**\n   * @param {string} text\n   */\n  em(text) {\n    return `<em>${text}</em>`\n  }\n\n  /**\n   * @param {string} text\n   */\n  codespan(text) {\n    return `<code>${text}</code>`\n  }\n\n  br() {\n    return this.options.xhtml ? "<br/>" : "<br>"\n  }\n\n  /**\n   * @param {string} text\n   */\n  del(text) {\n    return `<del>${text}</del>`\n  }\n\n  /**\n   * @param {string} href\n   * @param {string} title\n   * @param {string} text\n   */\n  link(href, title, text) {\n    href = cleanUrl(this.options.sanitize, this.options.baseUrl, href)\n    if (href === null) {\n      return text\n    }\n    let out = \'<a href="\' + escape(href) + \'"\'\n    if (title) {\n      out += \' title="\' + title + \'"\'\n    }\n    out += ">" + text + "</a>"\n    return out\n  }\n\n  /**\n   * @param {string} href\n   * @param {string} title\n   * @param {string} text\n   */\n  image(href, title, text) {\n    href = cleanUrl(this.options.sanitize, this.options.baseUrl, href)\n    if (href === null) {\n      return text\n    }\n\n    let out = `<img src="${href}" alt="${text}"`\n    if (title) {\n      out += ` title="${title}"`\n    }\n    out += this.options.xhtml ? "/>" : ">"\n    return out\n  }\n\n  text(text) {\n    return text\n  }\n}\n\n/**\n * TextRenderer\n * returns only the textual part of the token\n */\nclass TextRenderer {\n  // no need for block level renderers\n  strong(text) {\n    return text\n  }\n\n  em(text) {\n    return text\n  }\n\n  codespan(text) {\n    return text\n  }\n\n  del(text) {\n    return text\n  }\n\n  html(text) {\n    return text\n  }\n\n  text(text) {\n    return text\n  }\n\n  link(href, title, text) {\n    return "" + text\n  }\n\n  image(href, title, text) {\n    return "" + text\n  }\n\n  br() {\n    return ""\n  }\n}\n\n/**\n * Slugger generates header id\n */\nclass Slugger {\n  constructor() {\n    this.seen = {}\n  }\n\n  /**\n   * @param {string} value\n   */\n  serialize(value) {\n    return (\n      value\n        .toLowerCase()\n        .trim()\n        // remove html tags\n        .replace(/<[!\\/a-z].*?>/gi, "")\n        // remove unwanted chars\n        .replace(\n          /[\\u2000-\\u206F\\u2E00-\\u2E7F\\\\\'!"#$%&()*+,./:;<=>?@[\\]^`{|}~]/g,\n          ""\n        )\n        .replace(/\\s/g, "-")\n    )\n  }\n\n  /**\n   * Finds the next safe (unique) slug to use\n   * @param {string} originalSlug\n   * @param {boolean} isDryRun\n   */\n  getNextSafeSlug(originalSlug, isDryRun) {\n    let slug = originalSlug\n    let occurenceAccumulator = 0\n    if (this.seen.hasOwnProperty(slug)) {\n      occurenceAccumulator = this.seen[originalSlug]\n      do {\n        occurenceAccumulator++\n        slug = originalSlug + "-" + occurenceAccumulator\n      } while (this.seen.hasOwnProperty(slug))\n    }\n    if (!isDryRun) {\n      this.seen[originalSlug] = occurenceAccumulator\n      this.seen[slug] = 0\n    }\n    return slug\n  }\n\n  /**\n   * Convert string to unique id\n   * @param {object} [options]\n   * @param {boolean} [options.dryrun] Generates the next unique slug without\n   * updating the internal accumulator.\n   */\n  slug(value, options = {}) {\n    const slug = this.serialize(value)\n    return this.getNextSafeSlug(slug, options.dryrun)\n  }\n}\n\n/**\n * Parsing & Compiling\n */\nclass Parser {\n  constructor(options) {\n    this.options = options || defaults\n    this.options.renderer = this.options.renderer || new Renderer()\n    this.renderer = this.options.renderer\n    this.renderer.options = this.options\n    this.textRenderer = new TextRenderer()\n    this.slugger = new Slugger()\n  }\n\n  /**\n   * Static Parse Method\n   */\n  static parse(tokens, options) {\n    const parser = new Parser(options)\n    return parser.parse(tokens)\n  }\n\n  /**\n   * Static Parse Inline Method\n   */\n  static parseInline(tokens, options) {\n    const parser = new Parser(options)\n    return parser.parseInline(tokens)\n  }\n\n  /**\n   * Parse Loop\n   */\n  parse(tokens, top = true) {\n    let out = "",\n      i,\n      j,\n      k,\n      l2,\n      l3,\n      row,\n      cell,\n      header,\n      body,\n      token,\n      ordered,\n      start,\n      loose,\n      itemBody,\n      item,\n      checked,\n      task,\n      checkbox,\n      ret\n\n    const l = tokens.length\n    for (i = 0; i < l; i++) {\n      token = tokens[i]\n\n      // Run any renderer extensions\n      if (\n        this.options.extensions &&\n        this.options.extensions.renderers &&\n        this.options.extensions.renderers[token.type]\n      ) {\n        ret = this.options.extensions.renderers[token.type].call(\n          { parser: this },\n          token\n        )\n        if (\n          ret !== false ||\n          ![\n            "space",\n            "hr",\n            "heading",\n            "code",\n            "table",\n            "blockquote",\n            "list",\n            "html",\n            "paragraph",\n            "text",\n          ].includes(token.type)\n        ) {\n          out += ret || ""\n          continue\n        }\n      }\n\n      switch (token.type) {\n        case "space": {\n          continue\n        }\n        case "hr": {\n          out += this.renderer.hr()\n          continue\n        }\n        case "heading": {\n          out += this.renderer.heading(\n            this.parseInline(token.tokens),\n            token.depth,\n            unescape(this.parseInline(token.tokens, this.textRenderer)),\n            this.slugger\n          )\n          continue\n        }\n        case "code": {\n          out += this.renderer.code(token.text, token.lang, token.escaped)\n          continue\n        }\n        case "table": {\n          header = ""\n\n          // header\n          cell = ""\n          l2 = token.header.length\n          for (j = 0; j < l2; j++) {\n            cell += this.renderer.tablecell(\n              this.parseInline(token.header[j].tokens),\n              { header: true, align: token.align[j] }\n            )\n          }\n          header += this.renderer.tablerow(cell)\n\n          body = ""\n          l2 = token.rows.length\n          for (j = 0; j < l2; j++) {\n            row = token.rows[j]\n\n            cell = ""\n            l3 = row.length\n            for (k = 0; k < l3; k++) {\n              cell += this.renderer.tablecell(this.parseInline(row[k].tokens), {\n                header: false,\n                align: token.align[k],\n              })\n            }\n\n            body += this.renderer.tablerow(cell)\n          }\n          out += this.renderer.table(header, body)\n          continue\n        }\n        case "blockquote": {\n          body = this.parse(token.tokens)\n          out += this.renderer.blockquote(body)\n          continue\n        }\n        case "list": {\n          ordered = token.ordered\n          start = token.start\n          loose = token.loose\n          l2 = token.items.length\n\n          body = ""\n          for (j = 0; j < l2; j++) {\n            item = token.items[j]\n            checked = item.checked\n            task = item.task\n\n            itemBody = ""\n            if (item.task) {\n              checkbox = this.renderer.checkbox(checked)\n              if (loose) {\n                if (\n                  item.tokens.length > 0 &&\n                  item.tokens[0].type === "paragraph"\n                ) {\n                  item.tokens[0].text = checkbox + " " + item.tokens[0].text\n                  if (\n                    item.tokens[0].tokens &&\n                    item.tokens[0].tokens.length > 0 &&\n                    item.tokens[0].tokens[0].type === "text"\n                  ) {\n                    item.tokens[0].tokens[0].text =\n                      checkbox + " " + item.tokens[0].tokens[0].text\n                  }\n                } else {\n                  item.tokens.unshift({\n                    type: "text",\n                    text: checkbox,\n                  })\n                }\n              } else {\n                itemBody += checkbox\n              }\n            }\n\n            itemBody += this.parse(item.tokens, loose)\n            body += this.renderer.listitem(itemBody, task, checked)\n          }\n\n          out += this.renderer.list(body, ordered, start)\n          continue\n        }\n        case "html": {\n          // TODO parse inline content if parameter markdown=1\n          out += this.renderer.html(token.text)\n          continue\n        }\n        case "paragraph": {\n          out += this.renderer.paragraph(this.parseInline(token.tokens))\n          continue\n        }\n        case "text": {\n          body = token.tokens ? this.parseInline(token.tokens) : token.text\n          while (i + 1 < l && tokens[i + 1].type === "text") {\n            token = tokens[++i]\n            body +=\n              "\\n" +\n              (token.tokens ? this.parseInline(token.tokens) : token.text)\n          }\n          out += top ? this.renderer.paragraph(body) : body\n          continue\n        }\n\n        default: {\n          const errMsg = \'Token with "\' + token.type + \'" type was not found.\'\n          if (this.options.silent) {\n            console.error(errMsg)\n            return\n          } else {\n            throw new Error(errMsg)\n          }\n        }\n      }\n    }\n\n    return out\n  }\n\n  /**\n   * Parse Inline Tokens\n   */\n  parseInline(tokens, renderer) {\n    renderer = renderer || this.renderer\n    let out = "",\n      i,\n      token,\n      ret\n\n    const l = tokens.length\n    for (i = 0; i < l; i++) {\n      token = tokens[i]\n\n      // Run any renderer extensions\n      if (\n        this.options.extensions &&\n        this.options.extensions.renderers &&\n        this.options.extensions.renderers[token.type]\n      ) {\n        ret = this.options.extensions.renderers[token.type].call(\n          { parser: this },\n          token\n        )\n        if (\n          ret !== false ||\n          ![\n            "escape",\n            "html",\n            "link",\n            "image",\n            "strong",\n            "em",\n            "codespan",\n            "br",\n            "del",\n            "text",\n          ].includes(token.type)\n        ) {\n          out += ret || ""\n          continue\n        }\n      }\n\n      switch (token.type) {\n        case "escape": {\n          out += renderer.text(token.text)\n          break\n        }\n        case "html": {\n          out += renderer.html(token.text)\n          break\n        }\n        case "link": {\n          out += renderer.link(\n            token.href,\n            token.title,\n            this.parseInline(token.tokens, renderer)\n          )\n          break\n        }\n        case "image": {\n          out += renderer.image(token.href, token.title, token.text)\n          break\n        }\n        case "strong": {\n          out += renderer.strong(this.parseInline(token.tokens, renderer))\n          break\n        }\n        case "em": {\n          out += renderer.em(this.parseInline(token.tokens, renderer))\n          break\n        }\n        case "codespan": {\n          out += renderer.codespan(token.text)\n          break\n        }\n        case "br": {\n          out += renderer.br()\n          break\n        }\n        case "del": {\n          out += renderer.del(this.parseInline(token.tokens, renderer))\n          break\n        }\n        case "text": {\n          out += renderer.text(token.text)\n          break\n        }\n        default: {\n          const errMsg = \'Token with "\' + token.type + \'" type was not found.\'\n          if (this.options.silent) {\n            console.error(errMsg)\n            return\n          } else {\n            throw new Error(errMsg)\n          }\n        }\n      }\n    }\n    return out\n  }\n}\n\n/**\n * Marked\n */\nfunction marked(src, opt, callback) {\n  // throw error in case of non string input\n  if (typeof src === "undefined" || src === null) {\n    throw new Error("marked(): input parameter is undefined or null")\n  }\n  if (typeof src !== "string") {\n    throw new Error(\n      "marked(): input parameter is of type " +\n        Object.prototype.toString.call(src) +\n        ", string expected"\n    )\n  }\n\n  if (typeof opt === "function") {\n    callback = opt\n    opt = null\n  }\n\n  opt = merge({}, marked.defaults, opt || {})\n  checkSanitizeDeprecation(opt)\n\n  if (callback) {\n    const highlight = opt.highlight\n    let tokens\n\n    try {\n      tokens = Lexer.lex(src, opt)\n    } catch (e) {\n      return callback(e)\n    }\n\n    const done = function (err) {\n      let out\n\n      if (!err) {\n        try {\n          if (opt.walkTokens) {\n            marked.walkTokens(tokens, opt.walkTokens)\n          }\n          out = Parser.parse(tokens, opt)\n        } catch (e) {\n          err = e\n        }\n      }\n\n      opt.highlight = highlight\n\n      return err ? callback(err) : callback(null, out)\n    }\n\n    if (!highlight || highlight.length < 3) {\n      return done()\n    }\n\n    delete opt.highlight\n\n    if (!tokens.length) return done()\n\n    let pending = 0\n    marked.walkTokens(tokens, function (token) {\n      if (token.type === "code") {\n        pending++\n        setTimeout(() => {\n          highlight(token.text, token.lang, function (err, code) {\n            if (err) {\n              return done(err)\n            }\n            if (code != null && code !== token.text) {\n              token.text = code\n              token.escaped = true\n            }\n\n            pending--\n            if (pending === 0) {\n              done()\n            }\n          })\n        }, 0)\n      }\n    })\n\n    if (pending === 0) {\n      done()\n    }\n\n    return\n  }\n\n  try {\n    const tokens = Lexer.lex(src, opt)\n    if (opt.walkTokens) {\n      marked.walkTokens(tokens, opt.walkTokens)\n    }\n    return Parser.parse(tokens, opt)\n  } catch (e) {\n    e.message += "\\nPlease report this to https://github.com/markedjs/marked."\n    if (opt.silent) {\n      return (\n        "<p>An error occurred:</p><pre>" +\n        escape(e.message + "", true) +\n        "</pre>"\n      )\n    }\n    throw e\n  }\n}\n\n/**\n * Options\n */\n\nmarked.options = marked.setOptions = function (opt) {\n  merge(marked.defaults, opt)\n  changeDefaults(marked.defaults)\n  return marked\n}\n\nmarked.getDefaults = getDefaults\n\nmarked.defaults = defaults\n\n/**\n * Use Extension\n */\n\nmarked.use = function (...args) {\n  const opts = merge({}, ...args)\n  const extensions = marked.defaults.extensions || {\n    renderers: {},\n    childTokens: {},\n  }\n  let hasExtensions\n\n  args.forEach(pack => {\n    // ==-- Parse "addon" extensions --== //\n    if (pack.extensions) {\n      hasExtensions = true\n      pack.extensions.forEach(ext => {\n        if (!ext.name) {\n          throw new Error("extension name required")\n        }\n        if (ext.renderer) {\n          // Renderer extensions\n          const prevRenderer = extensions.renderers\n            ? extensions.renderers[ext.name]\n            : null\n          if (prevRenderer) {\n            // Replace extension with func to run new extension but fall back if false\n            extensions.renderers[ext.name] = function (...args) {\n              let ret = ext.renderer.apply(this, args)\n              if (ret === false) {\n                ret = prevRenderer.apply(this, args)\n              }\n              return ret\n            }\n          } else {\n            extensions.renderers[ext.name] = ext.renderer\n          }\n        }\n        if (ext.tokenizer) {\n          // Tokenizer Extensions\n          if (!ext.level || (ext.level !== "block" && ext.level !== "inline")) {\n            throw new Error("extension level must be \'block\' or \'inline\'")\n          }\n          if (extensions[ext.level]) {\n            extensions[ext.level].unshift(ext.tokenizer)\n          } else {\n            extensions[ext.level] = [ext.tokenizer]\n          }\n          if (ext.start) {\n            // Function to check for start of token\n            if (ext.level === "block") {\n              if (extensions.startBlock) {\n                extensions.startBlock.push(ext.start)\n              } else {\n                extensions.startBlock = [ext.start]\n              }\n            } else if (ext.level === "inline") {\n              if (extensions.startInline) {\n                extensions.startInline.push(ext.start)\n              } else {\n                extensions.startInline = [ext.start]\n              }\n            }\n          }\n        }\n        if (ext.childTokens) {\n          // Child tokens to be visited by walkTokens\n          extensions.childTokens[ext.name] = ext.childTokens\n        }\n      })\n    }\n\n    // ==-- Parse "overwrite" extensions --== //\n    if (pack.renderer) {\n      const renderer = marked.defaults.renderer || new Renderer()\n      for (const prop in pack.renderer) {\n        const prevRenderer = renderer[prop]\n        // Replace renderer with func to run extension, but fall back if false\n        renderer[prop] = (...args) => {\n          let ret = pack.renderer[prop].apply(renderer, args)\n          if (ret === false) {\n            ret = prevRenderer.apply(renderer, args)\n          }\n          return ret\n        }\n      }\n      opts.renderer = renderer\n    }\n    if (pack.tokenizer) {\n      const tokenizer = marked.defaults.tokenizer || new Tokenizer()\n      for (const prop in pack.tokenizer) {\n        const prevTokenizer = tokenizer[prop]\n        // Replace tokenizer with func to run extension, but fall back if false\n        tokenizer[prop] = (...args) => {\n          let ret = pack.tokenizer[prop].apply(tokenizer, args)\n          if (ret === false) {\n            ret = prevTokenizer.apply(tokenizer, args)\n          }\n          return ret\n        }\n      }\n      opts.tokenizer = tokenizer\n    }\n\n    // ==-- Parse WalkTokens extensions --== //\n    if (pack.walkTokens) {\n      const walkTokens = marked.defaults.walkTokens\n      opts.walkTokens = function (token) {\n        pack.walkTokens.call(this, token)\n        if (walkTokens) {\n          walkTokens.call(this, token)\n        }\n      }\n    }\n\n    if (hasExtensions) {\n      opts.extensions = extensions\n    }\n\n    marked.setOptions(opts)\n  })\n}\n\n/**\n * Run callback for every token\n */\n\nmarked.walkTokens = function (tokens, callback) {\n  for (const token of tokens) {\n    callback.call(marked, token)\n    switch (token.type) {\n      case "table": {\n        for (const cell of token.header) {\n          marked.walkTokens(cell.tokens, callback)\n        }\n        for (const row of token.rows) {\n          for (const cell of row) {\n            marked.walkTokens(cell.tokens, callback)\n          }\n        }\n        break\n      }\n      case "list": {\n        marked.walkTokens(token.items, callback)\n        break\n      }\n      default: {\n        if (\n          marked.defaults.extensions &&\n          marked.defaults.extensions.childTokens &&\n          marked.defaults.extensions.childTokens[token.type]\n        ) {\n          // Walk any extensions\n          marked.defaults.extensions.childTokens[token.type].forEach(function (\n            childTokens\n          ) {\n            marked.walkTokens(token[childTokens], callback)\n          })\n        } else if (token.tokens) {\n          marked.walkTokens(token.tokens, callback)\n        }\n      }\n    }\n  }\n}\n\n/**\n * Parse Inline\n * @param {string} src\n */\nmarked.parseInline = function (src, opt) {\n  // throw error in case of non string input\n  if (typeof src === "undefined" || src === null) {\n    throw new Error(\n      "marked.parseInline(): input parameter is undefined or null"\n    )\n  }\n  if (typeof src !== "string") {\n    throw new Error(\n      "marked.parseInline(): input parameter is of type " +\n        Object.prototype.toString.call(src) +\n        ", string expected"\n    )\n  }\n\n  opt = merge({}, marked.defaults, opt || {})\n  checkSanitizeDeprecation(opt)\n\n  try {\n    const tokens = Lexer.lexInline(src, opt)\n    if (opt.walkTokens) {\n      marked.walkTokens(tokens, opt.walkTokens)\n    }\n    return Parser.parseInline(tokens, opt)\n  } catch (e) {\n    e.message += "\\nPlease report this to https://github.com/markedjs/marked."\n    if (opt.silent) {\n      return (\n        "<p>An error occurred:</p><pre>" +\n        escape(e.message + "", true) +\n        "</pre>"\n      )\n    }\n    throw e\n  }\n}\n\n/**\n * Expose\n */\nmarked.Parser = Parser\nmarked.parser = Parser.parse\nmarked.Renderer = Renderer\nmarked.TextRenderer = TextRenderer\nmarked.Lexer = Lexer\nmarked.lexer = Lexer.lex\nmarked.Tokenizer = Tokenizer\nmarked.Slugger = Slugger\nmarked.parse = marked\n\nconst options = marked.options\nconst setOptions = marked.setOptions\nconst use = marked.use\nconst walkTokens = marked.walkTokens\nconst parseInline = marked.parseInline\nconst parse = marked\nconst parser = Parser.parse\nconst lexer = Lexer.lex\n\nconst email = trigger.row\nreturn marked(email.Message)'

From 208464a158031be8374f684a25045448f32586fc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:02:37 +0000
Subject: [PATCH 119/148] Fix snippet decorator regex

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

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 3badf0d8c3..0989432735 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -80,6 +80,8 @@
     }
     return null
   }
+
+  $: console.log(nameError)
 </script>
 
 <Drawer bind:this={drawer}>

From 8a455781d4a63cb3ef12f62bd786c8b647dccc64 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:03:57 +0000
Subject: [PATCH 120/148] Fix regex. Wrong file before

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

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 1ddc3d802a..5eefe11e58 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -109,7 +109,7 @@
 
   // Match decoration for snippets
   const snippetMatchDeco = new MatchDecorator({
-    regexp: /snippets.[^\s(]+/g,
+    regexp: /snippets\.[^\s(]+/g,
     decoration: () => {
       return Decoration.mark({
         tag: "span",

From c9c0384c96e261079506ef6aec32d7e79a744f73 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:05:21 +0000
Subject: [PATCH 121/148] Fix being unable to edit snippets

---
 .../src/components/common/bindings/SnippetDrawer.svelte   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 0989432735..a8973c753b 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -80,8 +80,6 @@
     }
     return null
   }
-
-  $: console.log(nameError)
 </script>
 
 <Drawer bind:this={drawer}>
@@ -114,7 +112,11 @@
         Delete
       </Button>
     {/if}
-    <Button cta on:click={saveSnippet} disabled={loading || nameError != null}>
+    <Button
+      cta
+      on:click={saveSnippet}
+      disabled={!snippet && (loading || nameError)}
+    >
       Save
     </Button>
   </svelte:fragment>

From 886929b8bc82706e6360394db91ad219d8984853 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:06:42 +0000
Subject: [PATCH 122/148] Fix being unable to hide side panels in the binding
 editor again. Already fixed this but got lost in a merge

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

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 01c2f5d55b..7a29e20700 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -84,7 +84,7 @@
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
   $: {
     // Ensure a valid side panel option is always selected
-    if (!sidePanelOptions.includes(sidePanel)) {
+    if (sidePanel && !sidePanelOptions.includes(sidePanel)) {
       sidePanel = sidePanelOptions[0]
     }
   }

From 64855bbdf03d0ce3e7cfeec103d4236940d64766 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:11:09 +0000
Subject: [PATCH 123/148] Optimise cloneDeep usage in string templates

---
 packages/string-templates/src/helpers/javascript.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 76ef19ef2e..26c2753295 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -54,8 +54,9 @@ module.exports.processJS = (handlebars, context) => {
     // Our $ context function gets a value from context.
     // We clone the context to avoid mutation in the binding affecting real
     // app context.
+    const clonedContext = cloneDeep(context)
     const sandboxContext = {
-      $: path => getContextValue(path, cloneDeep(context)),
+      $: path => getContextValue(path, clonedContext),
       helpers: getJsHelperList(),
 
       // Proxy to evaluate snippets when running in the browser

From 861d48dbf32aa08d6e582c7951fef4d4fb45f73d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:37:49 +0000
Subject: [PATCH 124/148] Transform snippets into a map in the browser for
 faster access

---
 packages/string-templates/src/helpers/javascript.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 26c2753295..e38f9b5651 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -51,10 +51,16 @@ module.exports.processJS = (handlebars, context) => {
     // This is required to allow the final `return` statement to be valid.
     const js = iifeWrapper(atob(handlebars))
 
+    // Transform snippets into an object for faster access
+    let snippetMap = {}
+    for (let snippet of context.snippets || []) {
+      snippetMap[snippet.name] = snippet.code
+    }
+
     // Our $ context function gets a value from context.
     // We clone the context to avoid mutation in the binding affecting real
     // app context.
-    const clonedContext = cloneDeep(context)
+    const clonedContext = cloneDeep({ ...context, snippets: null })
     const sandboxContext = {
       $: path => getContextValue(path, clonedContext),
       helpers: getJsHelperList(),
@@ -64,9 +70,7 @@ module.exports.processJS = (handlebars, context) => {
         {},
         {
           get: function (_, name) {
-            // This will error if the snippet doesn't exist, but that's intended
-            const snippet = (context.snippets || []).find(x => x.name === name)
-            return eval(iifeWrapper(snippet.code))
+            return eval(iifeWrapper(snippetMap[name]))
           },
         }
       ),

From 663abde785a6af0294a5e561d979c687badcbc5c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:48:55 +0000
Subject: [PATCH 125/148] Optimise isolated-vm snippet performance by using a
 map and by caching evaluated snippets

---
 .../jsRunner/bundles/snippets.ivm.bundle.js   |  6 +++---
 .../server/src/jsRunner/bundles/snippets.ts   | 19 ++++++++++++-------
 .../server/src/jsRunner/vm/isolated-vm.ts     |  8 +++++++-
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
index 5adb19eaf7..85fb8bbd5a 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
+++ b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
@@ -1,3 +1,3 @@
-"use strict";var snippets=(()=>{var u=Object.create;var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),W=(e,n)=>{for(var i in n)p(e,i,{get:n[i],enumerable:!0})},o=(e,n,i,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of d(n))!x.call(e,r)&&r!==i&&p(e,r,{get:()=>n[r],enumerable:!(t=c(n,r))||t.enumerable});return e};var g=(e,n,i)=>(i=e!=null?u(m(e)):{},o(n||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),v=e=>o(p({},"__esModule",{value:!0}),e);var a=l((P,f)=>{f.exports.iifeWrapper=e=>`(function(){
-${e}
-})();`});var y={};W(y,{default:()=>w});var s=g(a()),w=new Proxy({},{get:function(e,n){let i=(snippetDefinitions||[]).find(t=>t.name===n);return[eval][0]((0,s.iifeWrapper)(i.code))}});return v(y);})();
+"use strict";var snippets=(()=>{var a=Object.create;var r=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var C=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var n in e)r(i,n,{get:e[n],enumerable:!0})},f=(i,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of h(e))!x.call(i,p)&&p!==n&&r(i,p,{get:()=>e[p],enumerable:!(t=c(e,p))||t.enumerable});return i};var W=(i,e,n)=>(n=i!=null?a(l(i)):{},f(e||!i||!i.__esModule?r(n,"default",{value:i,enumerable:!0}):n,i)),d=i=>f(r({},"__esModule",{value:!0}),i);var s=C((D,o)=>{o.exports.iifeWrapper=i=>`(function(){
+${i}
+})();`});var v={};y(v,{default:()=>g});var u=W(s()),g=new Proxy({},{get:function(i,e){if(!(e in snippetCache))snippetCache[e]=[eval][0]((0,u.iifeWrapper)(snippetDefinitions[e]));else return n=>n*2;return snippetCache[e]}});return d(v);})();
diff --git a/packages/server/src/jsRunner/bundles/snippets.ts b/packages/server/src/jsRunner/bundles/snippets.ts
index f473aaf7b4..258d501a27 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ts
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -6,14 +6,19 @@ export default new Proxy(
   {},
   {
     get: function (_, name) {
-      // Snippet definitions are injected to the isolate global scope before
-      // this bundle is loaded, so we can access it from there.
-      // https://esbuild.github.io/content-types/#direct-eval for info on why
-      // eval is being called this way.
+      // Both snippetDefinitions and snippetCache are injected to the isolate
+      // global scope before this bundle is loaded, so we can access it from
+      // there.
+      // See https://esbuild.github.io/content-types/#direct-eval for info on
+      // why eval is being called this way.
+      // Snippets are cached and reused once they have been evaluated.
       // @ts-ignore
-      // eslint-disable-next-line no-undef
-      const snippet = (snippetDefinitions || []).find(x => x.name === name)
-      return [eval][0](iifeWrapper(snippet.code))
+      if (!(name in snippetCache)) {
+        // @ts-ignore
+        snippetCache[name] = [eval][0](iifeWrapper(snippetDefinitions[name]))
+      }
+      // @ts-ignore
+      return snippetCache[name]
     },
   }
 )
diff --git a/packages/server/src/jsRunner/vm/isolated-vm.ts b/packages/server/src/jsRunner/vm/isolated-vm.ts
index 64e68c296d..e89d420ec5 100644
--- a/packages/server/src/jsRunner/vm/isolated-vm.ts
+++ b/packages/server/src/jsRunner/vm/isolated-vm.ts
@@ -99,9 +99,15 @@ export class IsolatedVM implements VM {
   }
 
   withSnippets(snippets?: Snippet[]) {
+    // Transform snippets into a map for faster access
+    let snippetMap: Record<string, string> = {}
+    for (let snippet of snippets || []) {
+      snippetMap[snippet.name] = snippet.code
+    }
     const snippetsSource = loadBundle(BundleType.SNIPPETS)
     const script = this.isolate.compileScriptSync(`
-      const snippetDefinitions = ${JSON.stringify(snippets || [])};
+      const snippetDefinitions = ${JSON.stringify(snippetMap)};
+      const snippetCache = {};
       ${snippetsSource};
       snippets = snippets.default;
     `)

From 30622a56ca0e3546d7ab79809602c33ce4a574cc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:50:26 +0000
Subject: [PATCH 126/148] Add updated snippets IVM bundle

---
 packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
index 85fb8bbd5a..bad9049af0 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
+++ b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
@@ -1,3 +1,3 @@
-"use strict";var snippets=(()=>{var a=Object.create;var r=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var C=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var n in e)r(i,n,{get:e[n],enumerable:!0})},f=(i,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of h(e))!x.call(i,p)&&p!==n&&r(i,p,{get:()=>e[p],enumerable:!(t=c(e,p))||t.enumerable});return i};var W=(i,e,n)=>(n=i!=null?a(l(i)):{},f(e||!i||!i.__esModule?r(n,"default",{value:i,enumerable:!0}):n,i)),d=i=>f(r({},"__esModule",{value:!0}),i);var s=C((D,o)=>{o.exports.iifeWrapper=i=>`(function(){
+"use strict";var snippets=(()=>{var u=Object.create;var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var l=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),W=(i,e)=>{for(var p in e)n(i,p,{get:e[p],enumerable:!0})},f=(i,e,p,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!C.call(i,t)&&t!==p&&n(i,t,{get:()=>e[t],enumerable:!(r=a(e,t))||r.enumerable});return i};var d=(i,e,p)=>(p=i!=null?u(x(i)):{},f(e||!i||!i.__esModule?n(p,"default",{value:i,enumerable:!0}):p,i)),g=i=>f(n({},"__esModule",{value:!0}),i);var s=l((D,o)=>{o.exports.iifeWrapper=i=>`(function(){
 ${i}
-})();`});var v={};y(v,{default:()=>g});var u=W(s()),g=new Proxy({},{get:function(i,e){if(!(e in snippetCache))snippetCache[e]=[eval][0]((0,u.iifeWrapper)(snippetDefinitions[e]));else return n=>n*2;return snippetCache[e]}});return d(v);})();
+})();`});var w={};W(w,{default:()=>v});var c=d(s()),v=new Proxy({},{get:function(i,e){return e in snippetCache||(snippetCache[e]=[eval][0]((0,c.iifeWrapper)(snippetDefinitions[e]))),snippetCache[e]}});return g(w);})();

From 95f71efdab75c8f8e6806d09a83131d3e3258d00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 12:52:36 +0000
Subject: [PATCH 127/148] Cache snippet evaluations in the browser

---
 packages/string-templates/src/helpers/javascript.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index e38f9b5651..5be2619463 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -51,8 +51,10 @@ module.exports.processJS = (handlebars, context) => {
     // This is required to allow the final `return` statement to be valid.
     const js = iifeWrapper(atob(handlebars))
 
-    // Transform snippets into an object for faster access
+    // Transform snippets into an object for faster access, and cache previously
+    // evaluated snippets
     let snippetMap = {}
+    let snippetCache = {}
     for (let snippet of context.snippets || []) {
       snippetMap[snippet.name] = snippet.code
     }
@@ -70,7 +72,10 @@ module.exports.processJS = (handlebars, context) => {
         {},
         {
           get: function (_, name) {
-            return eval(iifeWrapper(snippetMap[name]))
+            if (!(name in snippetCache)) {
+              snippetCache[name] = eval(iifeWrapper(snippetMap[name]))
+            }
+            return snippetCache[name]
           },
         }
       ),

From 5666a965e068a12c5086a92ab1d8cdce9e557172 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 13:01:44 +0000
Subject: [PATCH 128/148] Fix issue with click_outside and drawers

---
 packages/bbui/src/Actions/click_outside.js |  4 +-
 packages/bbui/src/Drawer/Drawer.svelte     | 67 ++++++++++++----------
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 62416ae88d..12c4c4d002 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -33,8 +33,8 @@ const handleClick = event => {
     }
 
     // Ignore clicks for drawers, unless the handler is registered from a drawer
-    const sourceInDrawer = handler.anchor.closest(".drawer-container") != null
-    const clickInDrawer = event.target.closest(".drawer-container") != null
+    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
+    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
     if (clickInDrawer && !sourceInDrawer) {
       return
     }
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 04e678c4e5..89ee92726d 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -172,37 +172,44 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <div class="underlay" class:hidden={!$modal} transition:drawerFade|local />
-    <div
-      class="drawer"
-      class:stacked={depth > 0}
-      class:modal={$modal}
-      transition:drawerSlide|local
-      {style}
-    >
-      <header>
-        {#if $$slots.title}
-          <slot name="title" />
-        {:else}
-          <div class="text">{title || "Bindings"}</div>
-        {/if}
-        <div class="buttons">
-          <Button secondary quiet on:click={hide}>Cancel</Button>
-          <slot name="buttons" />
-          {#if $resizable}
-            <ActionButton
-              size="M"
-              quiet
-              selected={$modal}
-              on:click={() => modal.set(!$modal)}
-            >
-              <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
-            </ActionButton>
+    <!-- This class is unstyled, but needed by click_outside -->
+    <div class="drawer-wrapper">
+      <div
+        class="underlay"
+        class:hidden={!$modal}
+        transition:drawerFade|local
+      />
+      <div
+        class="drawer"
+        class:stacked={depth > 0}
+        class:modal={$modal}
+        transition:drawerSlide|local
+        {style}
+      >
+        <header>
+          {#if $$slots.title}
+            <slot name="title" />
+          {:else}
+            <div class="text">{title || "Bindings"}</div>
           {/if}
-        </div>
-      </header>
-      <slot name="body" />
-      <div class="overlay" class:hidden={$modal || depth === 0} />
+          <div class="buttons">
+            <Button secondary quiet on:click={hide}>Cancel</Button>
+            <slot name="buttons" />
+            {#if $resizable}
+              <ActionButton
+                size="M"
+                quiet
+                selected={$modal}
+                on:click={() => modal.set(!$modal)}
+              >
+                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+              </ActionButton>
+            {/if}
+          </div>
+        </header>
+        <slot name="body" />
+        <div class="overlay" class:hidden={$modal || depth === 0} />
+      </div>
     </div>
   </Portal>
 {/if}

From 6d53b0676211b6a997325a0db1968f2ab4a65ab0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 13:23:48 +0000
Subject: [PATCH 129/148] Fix typo in automations placeholder

---
 .../automation/AutomationPanel/AutomationPanel.svelte           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 582db950fe..ac1c4f91cb 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -49,7 +49,7 @@
   <div class="side-bar-controls">
     <NavHeader
       title="Automations"
-      placeholder="Search for automation"
+      placeholder="Search for automations"
       bind:value={searchString}
       onAdd={() => modal.show()}
     />

From f9156765c0a695ad93ccf47df472f4699db02ba4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 13:57:24 +0000
Subject: [PATCH 130/148] Update binding panel icons to use new styles

---
 .../common/bindings/BindingSidePanel.svelte   | 63 ++++++++++++-------
 .../common/bindings/SnippetSidePanel.svelte   | 26 ++++++--
 2 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index d990451005..4c54ef2698 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -3,6 +3,7 @@
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
+  import { tick } from "svelte"
 
   export let addHelper
   export let addBinding
@@ -12,6 +13,7 @@
   export let context = null
 
   let search = ""
+  let searching = false
   let popover
   let popoverAnchor
   let hoverTarget
@@ -112,6 +114,17 @@
       hideTimeout = null
     }
   }
+
+  const startSearching = async () => {
+    searching = true
+    search = ""
+  }
+
+  const stopSearching = e => {
+    e.stopPropagation()
+    searching = false
+    search = ""
+  }
 </script>
 
 <Popover
@@ -158,25 +171,34 @@
 
     {#if !selectedCategory}
       <div class="header">
-        <span class="search-input">
-          <Input
-            placeholder={"Search for bindings"}
-            autocomplete="off"
-            bind:value={search}
+        {#if searching}
+          <div class="search-input">
+            <Input
+              placeholder="Search for bindings"
+              autocomplete="off"
+              bind:value={search}
+              autofocus
+            />
+          </div>
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            newStyles
+            on:click={stopSearching}
           />
-        </span>
-        <span
-          class="search-input-icon"
-          on:click={() => {
-            search = null
-          }}
-          class:searching={search}
-        >
-          <Icon size="S" name={search ? "Close" : "Search"} />
-        </span>
+        {:else}
+          <div class="title">Bindings</div>
+          <Icon
+            size="S"
+            name="Search"
+            hoverable
+            newStyles
+            on:click={startSearching}
+          />
+        {/if}
       </div>
     {/if}
-
     {#if !selectedCategory && !search}
       <ul class="category-list">
         {#each categoryNames as categoryName}
@@ -281,18 +303,15 @@
     background: var(--background);
     z-index: 1;
   }
-
   .header :global(input) {
     border: none;
     border-radius: 0;
     background: none;
     padding: 0;
   }
-  .search-input {
-    flex: 1;
-  }
-  .search-input-icon.searching {
-    cursor: pointer;
+  .search-input,
+  .title {
+    flex: 1 1 auto;
   }
 
   ul.category-list {
diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index 592ca7cfcd..72c9b2f44c 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -89,11 +89,29 @@
             bind:value={search}
           />
         </div>
-        <Icon size="S" name="Close" hoverable on:click={stopSearching} />
+        <Icon
+          size="S"
+          name="Close"
+          hoverable
+          newStyles
+          on:click={stopSearching}
+        />
       {:else}
         <div class="title">Snippets</div>
-        <Icon size="S" name="Search" hoverable on:click={startSearching} />
-        <Icon size="S" name="Add" hoverable on:click={createSnippet} />
+        <Icon
+          size="S"
+          name="Search"
+          hoverable
+          newStyles
+          on:click={startSearching}
+        />
+        <Icon
+          size="S"
+          name="Add"
+          hoverable
+          newStyles
+          on:click={createSnippet}
+        />
       {/if}
     </div>
     <div class="snippet-list">
@@ -108,9 +126,9 @@
           <Icon
             name="Edit"
             hoverable
+            newStyles
             size="S"
             on:click={e => editSnippet(e, snippet)}
-            color="var(--spectrum-global-color-gray-700)"
           />
         </div>
       {/each}

From 567cbf3ef89feaffc809d385da5229b0bcbfec7c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 13:58:42 +0000
Subject: [PATCH 131/148] More icon updates for consistency

---
 packages/bbui/src/Icon/Icon.svelte                     | 10 +++++++++-
 .../common/bindings/EvaluationSidePanel.svelte         |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 275c339bf4..13452cf981 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -14,6 +14,7 @@
   export let disabled = false
   export let color
   export let tooltip
+  export let newStyles = false
 
   $: rotation = getRotation(direction)
 
@@ -28,6 +29,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon"
+  class:newStyles
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
@@ -60,6 +62,9 @@
     display: grid;
     place-items: center;
   }
+  .newStyles {
+    color: var(--spectrum-global-color-gray-700);
+  }
 
   svg.hoverable {
     pointer-events: all;
@@ -72,7 +77,10 @@
   svg.hoverable:active {
     color: var(--spectrum-global-color-blue-400) !important;
   }
-
+  .newStyles svg.hoverable:hover,
+  .newStyles svg.hoverable:active {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }
   svg.disabled {
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 82c3f80a6f..1bd55b4e21 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -65,7 +65,7 @@
         {/if}
         <span />
         {#if !empty}
-          <Icon name="Copy" hoverable on:click={copy} />
+          <Icon name="Copy" hoverable newStyles on:click={copy} />
         {/if}
       {/if}
     </div>

From 138cd39c36d8e905fb9ca50fc9fc2a183c564e3c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 13:59:14 +0000
Subject: [PATCH 132/148] Autofocus search inputs

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

diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index 72c9b2f44c..c82eed7a23 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -87,6 +87,7 @@
             placeholder="Search for snippets"
             autocomplete="off"
             bind:value={search}
+            autofocus
           />
         </div>
         <Icon

From 2732a11b4bee87fd25382cc367f2d05ec2038ec0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 14:29:50 +0000
Subject: [PATCH 133/148] Update packages/shared-core/src/constants/index.ts

Co-authored-by: Sam Rose <hello@samwho.dev>
---
 packages/shared-core/src/constants/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared-core/src/constants/index.ts b/packages/shared-core/src/constants/index.ts
index b5b651a3da..633fd36e45 100644
--- a/packages/shared-core/src/constants/index.ts
+++ b/packages/shared-core/src/constants/index.ts
@@ -98,7 +98,7 @@ export enum BuilderSocketEvent {
 export const SocketSessionTTL = 60
 export const ValidQueryNameRegex = /^[^()]*$/
 export const ValidColumnNameRegex = /^[_a-zA-Z0-9\s]*$/g
-export const ValidSnippetNameRegex = /^[a-z-_][a-z0-9-_]*$/i
+export const ValidSnippetNameRegex = /^[a-z_][a-z0-9_]*$/i
 
 export const REBOOT_CRON = "@reboot"
 

From 47925e394d8c22baf90c09bdef3da87ddaad4025 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 16:20:18 +0000
Subject: [PATCH 134/148] Lint and remove outdated comment

---
 .../src/components/common/bindings/BindingSidePanel.svelte  | 2 --
 .../src/components/common/bindings/SnippetDrawer.svelte     | 6 ------
 2 files changed, 8 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 4c54ef2698..f364b39ba9 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -3,7 +3,6 @@
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
-  import { tick } from "svelte"
 
   export let addHelper
   export let addBinding
@@ -154,7 +153,6 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="binding-side-panel">
   <Layout noPadding gap="S">
     {#if selectedCategory}
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index a8973c753b..d6b6f92b17 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -59,12 +59,6 @@
     loading = false
   }
 
-  // Validating function names is not as easy as you think. A simple regex does
-  // not work, as there are a bunch of reserved words. The correct regex for
-  // this is about 12K characters long.
-  // Instead, we can run a simple regex to roughly validate it, then basically
-  // try executing it and see if it's valid JS. The initial regex prevents
-  // against any potential XSS attacks here.
   const validateName = (name, snippets) => {
     if (!name?.length) {
       return "Name is required"

From 8b4ce703e97657e97e01a9d13c579e6da6cc49a1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 17:01:09 +0000
Subject: [PATCH 135/148] Try to fix tests

---
 packages/backend-core/src/context/mainContext.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index 9d4cc9096d..6cea7efeba 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -292,7 +292,7 @@ export async function ensureSnippetContext() {
   // Otherwise get snippets for this app and update context
   let snippets: Snippet[] | undefined
   const db = getAppDB()
-  if (db) {
+  if (db && !env.isTest()) {
     const app = await db.get<App>(DocumentType.APP_METADATA)
     snippets = app.snippets
   }

From f8690a6bd95f45a76ffac597e50bb1cacd3f9a15 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 12:08:03 +0000
Subject: [PATCH 136/148] Update comment

---
 packages/builder/src/components/common/bindings/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index 4ff99aa6bb..c60374f0f7 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -39,7 +39,7 @@ export class BindingHelpers {
     }
   }
 
-  // Adds a JS/HBS helper to the expression
+  // Adds a snippet to the expression
   onSelectSnippet(snippet) {
     const pos = this.getCaretPosition()
     const { start, end } = pos

From 0e94caafcbfd5103cd551d43fdb4d7a4c5f6621c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 14:10:37 +0000
Subject: [PATCH 137/148] Update snippet insertion to not insert parenthesis

---
 packages/builder/src/components/common/CodeEditor/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index b93c95b944..f66c84adce 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -271,13 +271,12 @@ export const insertBinding = (view, from, to, text, mode) => {
 }
 
 export const insertSnippet = (view, from, to, text) => {
-  const parsedInsert = `${text}()`
-  let cursorPos = from + parsedInsert.length - 1
+  let cursorPos = from + text.length
   view.dispatch({
     changes: {
       from,
       to,
-      insert: parsedInsert,
+      insert: text,
     },
     selection: {
       anchor: cursorPos,

From 049c2b989ba8422765ee706ce8bafceecef5fb7e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 14:29:13 +0000
Subject: [PATCH 138/148] Soft paywall snippets

---
 .../common/bindings/SnippetSidePanel.svelte   | 150 ++++++++++++------
 1 file changed, 100 insertions(+), 50 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index c82eed7a23..4495e0d3e4 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -1,8 +1,19 @@
 <script>
-  import { Input, Layout, Icon, Popover } from "@budibase/bbui"
+  import {
+    Input,
+    Layout,
+    Icon,
+    Popover,
+    Tags,
+    Tag,
+    Body,
+    Button,
+  } from "@budibase/bbui"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
   import { EditorModes } from "components/common/CodeEditor"
   import SnippetDrawer from "./SnippetDrawer.svelte"
+  import { licensing } from "stores/portal"
+  import UpgradeButton from "pages/builder/portal/_components/UpgradeButton.svelte"
 
   export let addSnippet
   export let snippets
@@ -16,10 +27,11 @@
   let snippetDrawer
   let editableSnippet
 
-  $: filteredSnippets = getFilteredSnippets(snippets, search)
+  $: enableSnippets = !$licensing.isFreePlan
+  $: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
 
-  const getFilteredSnippets = (snippets, search) => {
-    if (!snippets?.length) {
+  const getFilteredSnippets = (enableSnippets, snippets, search) => {
+    if (!enableSnippets || !snippets?.length) {
       return []
     }
     if (!search?.length) {
@@ -81,58 +93,77 @@
 <div class="snippet-side-panel">
   <Layout noPadding gap="S">
     <div class="header">
-      {#if searching}
-        <div class="search-input">
-          <Input
-            placeholder="Search for snippets"
-            autocomplete="off"
-            bind:value={search}
-            autofocus
+      {#if enableSnippets}
+        {#if searching}
+          <div class="search-input">
+            <Input
+              placeholder="Search for snippets"
+              autocomplete="off"
+              bind:value={search}
+              autofocus
+            />
+          </div>
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            newStyles
+            on:click={stopSearching}
           />
-        </div>
-        <Icon
-          size="S"
-          name="Close"
-          hoverable
-          newStyles
-          on:click={stopSearching}
-        />
+        {:else}
+          <div class="title">Snippets</div>
+          <Icon
+            size="S"
+            name="Search"
+            hoverable
+            newStyles
+            on:click={startSearching}
+          />
+          <Icon
+            size="S"
+            name="Add"
+            hoverable
+            newStyles
+            on:click={createSnippet}
+          />
+        {/if}
       {:else}
-        <div class="title">Snippets</div>
-        <Icon
-          size="S"
-          name="Search"
-          hoverable
-          newStyles
-          on:click={startSearching}
-        />
-        <Icon
-          size="S"
-          name="Add"
-          hoverable
-          newStyles
-          on:click={createSnippet}
-        />
+        <div class="title">
+          Snippets
+          <Tags>
+            <Tag icon="LockClosed">Premium</Tag>
+          </Tags>
+        </div>
       {/if}
     </div>
     <div class="snippet-list">
-      {#each filteredSnippets as snippet}
-        <div
-          class="snippet"
-          on:mouseenter={e => showSnippet(snippet, e.target)}
-          on:mouseleave={hidePopover}
-          on:click={() => addSnippet(snippet)}
-        >
-          {snippet.name}
-          <Icon
-            name="Edit"
-            hoverable
-            newStyles
-            size="S"
-            on:click={e => editSnippet(e, snippet)}
-          />
+      {#if enableSnippets}
+        {#each filteredSnippets as snippet}
+          <div
+            class="snippet"
+            on:mouseenter={e => showSnippet(snippet, e.target)}
+            on:mouseleave={hidePopover}
+            on:click={() => addSnippet(snippet)}
+          >
+            {snippet.name}
+            <Icon
+              name="Edit"
+              hoverable
+              newStyles
+              size="S"
+              on:click={e => editSnippet(e, snippet)}
+            />
+          </div>
+        {/each}
+      {:else}
+        <div class="upgrade">
+          <Body size="S">
+            Create reusable blocks of JS that can be managed and updated all in
+            one place with Snippets
+          </Body>
+          <UpgradeButton />
         </div>
-      {/each}
+      {/if}
     </div>
   </Layout>
 </div>
@@ -191,6 +222,25 @@
   .title {
     flex: 1 1 auto;
   }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  /* Upgrade */
+  .upgrade {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .upgrade :global(p) {
+    text-align: center;
+    align-self: center;
+  }
 
   /* List */
   .snippet-list {

From a0ccfebebe7868c24616a40f8e76de9ec16db80e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 14:51:03 +0000
Subject: [PATCH 139/148] Soft paywall snippet autocompletion

---
 .../common/bindings/BindingPanel.svelte       | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 7a29e20700..21d389357f 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -30,6 +30,7 @@
   import formatHighlight from "json-format-highlight"
   import { capitalise } from "helpers"
   import { Utils } from "@budibase/frontend-core"
+  import { licensing } from "stores/portal"
 
   const dispatch = createEventDispatcher()
 
@@ -66,6 +67,7 @@
   let expressionResult
   let evaluating = false
 
+  $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(
     bindings,
@@ -78,29 +80,40 @@
   $: editorMode =
     mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
   $: editorValue = editorMode === EditorModes.JS ? jsValue : hbsValue
-  $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: requestEval(runtimeExpression, context, snippets)
+  $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
+  $: hbsCompletions = getHBSCompletions(bindingCompletions)
+  $: jsCompletions = getJSCompletions(bindingCompletions, snippets, useSnippets)
   $: {
     // Ensure a valid side panel option is always selected
     if (sidePanel && !sidePanelOptions.includes(sidePanel)) {
       sidePanel = sidePanelOptions[0]
     }
   }
-  $: hbsCompletions = [
-    hbAutocomplete([
-      ...bindingCompletions,
-      ...getHelperCompletions(EditorModes.Handlebars),
-    ]),
-  ]
-  $: jsCompletions = [
-    jsAutocomplete([
-      ...bindingCompletions,
-      ...getHelperCompletions(EditorModes.JS),
-    ]),
-    snippetAutoComplete(snippets),
-  ]
+
+  const getHBSCompletions = bindingCompletions => {
+    return [
+      hbAutocomplete([
+        ...bindingCompletions,
+        ...getHelperCompletions(EditorModes.Handlebars),
+      ]),
+    ]
+  }
+
+  const getJSCompletions = (bindingCompletions, snippets, useSnippets) => {
+    const completions = [
+      jsAutocomplete([
+        ...bindingCompletions,
+        ...getHelperCompletions(EditorModes.JS),
+      ]),
+    ]
+    if (useSnippets) {
+      completions.push(snippetAutoComplete(snippets))
+    }
+    return completions
+  }
 
   const getModeOptions = (allowHBS, allowJS) => {
     let options = []
@@ -113,7 +126,7 @@
     return options
   }
 
-  const getSidePanelOptions = (bindings, context, allowSnippets, mode) => {
+  const getSidePanelOptions = (bindings, context, useSnippets, mode) => {
     let options = []
     if (bindings?.length) {
       options.push(SidePanels.Bindings)
@@ -121,7 +134,7 @@
     if (context) {
       options.push(SidePanels.Evaluation)
     }
-    if (allowSnippets && mode === Modes.JavaScript) {
+    if (useSnippets && mode === Modes.JavaScript) {
       options.push(SidePanels.Snippets)
     }
     return options

From 560d8ee9c9aa2aa3b08552e6353464042095d618 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 14:57:51 +0000
Subject: [PATCH 140/148] Update font sizes for live eval to force consistency
 between browsers

---
 .../src/components/common/CodeEditor/CodeEditor.svelte        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 5eefe11e58..ba5f75083a 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -511,14 +511,14 @@
   .code-editor :global(.binding__example) {
     padding: 0;
     margin: 0;
-    font-size: var(--font-size-s);
+    font-size: 12px;
     font-family: var(--font-mono);
     white-space: pre;
     text-overflow: ellipsis;
     overflow: hidden;
     max-height: 480px;
   }
-  .code-editor :global(.binding__example) {
+  .code-editor :global(.binding__example.helper) {
     color: var(--spectrum-global-color-blue-700);
   }
   .code-editor :global(.binding__example span) {

From af43a182907ecbd6f34fa37cc32e21e0aecf5415 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 14:59:12 +0000
Subject: [PATCH 141/148] Reduce evaluation side panel copy icon size

---
 .../src/components/common/bindings/EvaluationSidePanel.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 1bd55b4e21..2c4e6a0991 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -55,7 +55,7 @@
           </div>
         {/if}
         <span />
-        <Icon name="Copy" hoverable on:click={copy} />
+        <Icon name="Copy" size="S" hoverable on:click={copy} />
       {:else}
         <div>Preview</div>
         {#if evaluating}
@@ -65,7 +65,7 @@
         {/if}
         <span />
         {#if !empty}
-          <Icon name="Copy" hoverable newStyles on:click={copy} />
+          <Icon name="Copy" newStyles size="S" hoverable on:click={copy} />
         {/if}
       {/if}
     </div>

From 1a9843fcc8e1e39724b540f614914d193b0dff4f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 15:36:05 +0000
Subject: [PATCH 142/148] Lint

---
 .../common/bindings/SnippetSidePanel.svelte           | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index 4495e0d3e4..1c6e443fb8 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -1,14 +1,5 @@
 <script>
-  import {
-    Input,
-    Layout,
-    Icon,
-    Popover,
-    Tags,
-    Tag,
-    Body,
-    Button,
-  } from "@budibase/bbui"
+  import { Input, Layout, Icon, Popover, Tags, Tag, Body } from "@budibase/bbui"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
   import { EditorModes } from "components/common/CodeEditor"
   import SnippetDrawer from "./SnippetDrawer.svelte"

From b3cf3fa636b21aa3532fad632810256c0b7c2481 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 16:16:24 +0000
Subject: [PATCH 143/148] Improve how snippets are handled in client apps

---
 .../client/src/components/ClientApp.svelte    | 187 +++++++++---------
 .../client/src/components/Component.svelte    |   3 +-
 .../context/SnippetsProvider.svelte           |   8 +
 .../client/src/stores/derived/snippets.js     |   4 +-
 .../client/src/utils/enrichDataBinding.js     |   6 +-
 5 files changed, 109 insertions(+), 99 deletions(-)
 create mode 100644 packages/client/src/components/context/SnippetsProvider.svelte

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 4efa8af4e6..66b2fc990d 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -37,6 +37,7 @@
   import DevTools from "components/devtools/DevTools.svelte"
   import FreeFooter from "components/FreeFooter.svelte"
   import licensing from "../licensing"
+  import SnippetsProvider from "./context/SnippetsProvider.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -116,112 +117,116 @@
         <StateBindingsProvider>
           <RowSelectionProvider>
             <QueryParamsProvider>
-              <!-- Settings bar can be rendered outside of device preview -->
-              <!-- Key block needs to be outside the if statement or it breaks -->
-              {#key $builderStore.selectedComponentId}
-                {#if $builderStore.inBuilder}
-                  <SettingsBar />
-                {/if}
-              {/key}
-
-              <!-- Clip boundary for selection indicators -->
-              <div
-                id="clip-root"
-                class:preview={$builderStore.inBuilder}
-                class:tablet-preview={$builderStore.previewDevice === "tablet"}
-                class:mobile-preview={$builderStore.previewDevice === "mobile"}
-              >
-                <!-- Actual app -->
-                <div id="app-root">
-                  {#if showDevTools}
-                    <DevToolsHeader />
+              <SnippetsProvider>
+                <!-- Settings bar can be rendered outside of device preview -->
+                <!-- Key block needs to be outside the if statement or it breaks -->
+                {#key $builderStore.selectedComponentId}
+                  {#if $builderStore.inBuilder}
+                    <SettingsBar />
                   {/if}
+                {/key}
 
-                  <div id="app-body">
-                    {#if permissionError}
-                      <div class="error">
-                        <Layout justifyItems="center" gap="S">
-                          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                          {@html ErrorSVG}
-                          <Heading size="L">
-                            You don't have permission to use this app
-                          </Heading>
-                          <Body size="S">
-                            Ask your administrator to grant you access
-                          </Body>
-                        </Layout>
-                      </div>
-                    {:else if !$screenStore.activeLayout}
-                      <div class="error">
-                        <Layout justifyItems="center" gap="S">
-                          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                          {@html ErrorSVG}
-                          <Heading size="L">
-                            Something went wrong rendering your app
-                          </Heading>
-                          <Body size="S">
-                            Get in touch with support if this issue persists
-                          </Body>
-                        </Layout>
-                      </div>
-                    {:else if embedNoScreens}
-                      <div class="error">
-                        <Layout justifyItems="center" gap="S">
-                          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                          {@html ErrorSVG}
-                          <Heading size="L">
-                            This Budibase app is not publicly accessible
-                          </Heading>
-                        </Layout>
-                      </div>
-                    {:else}
-                      <CustomThemeWrapper>
-                        {#key $screenStore.activeLayout._id}
-                          <Component
-                            isLayout
-                            instance={$screenStore.activeLayout.props}
-                          />
-                        {/key}
+                <!-- Clip boundary for selection indicators -->
+                <div
+                  id="clip-root"
+                  class:preview={$builderStore.inBuilder}
+                  class:tablet-preview={$builderStore.previewDevice ===
+                    "tablet"}
+                  class:mobile-preview={$builderStore.previewDevice ===
+                    "mobile"}
+                >
+                  <!-- Actual app -->
+                  <div id="app-root">
+                    {#if showDevTools}
+                      <DevToolsHeader />
+                    {/if}
 
-                        <!--
+                    <div id="app-body">
+                      {#if permissionError}
+                        <div class="error">
+                          <Layout justifyItems="center" gap="S">
+                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                            {@html ErrorSVG}
+                            <Heading size="L">
+                              You don't have permission to use this app
+                            </Heading>
+                            <Body size="S">
+                              Ask your administrator to grant you access
+                            </Body>
+                          </Layout>
+                        </div>
+                      {:else if !$screenStore.activeLayout}
+                        <div class="error">
+                          <Layout justifyItems="center" gap="S">
+                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                            {@html ErrorSVG}
+                            <Heading size="L">
+                              Something went wrong rendering your app
+                            </Heading>
+                            <Body size="S">
+                              Get in touch with support if this issue persists
+                            </Body>
+                          </Layout>
+                        </div>
+                      {:else if embedNoScreens}
+                        <div class="error">
+                          <Layout justifyItems="center" gap="S">
+                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                            {@html ErrorSVG}
+                            <Heading size="L">
+                              This Budibase app is not publicly accessible
+                            </Heading>
+                          </Layout>
+                        </div>
+                      {:else}
+                        <CustomThemeWrapper>
+                          {#key $screenStore.activeLayout._id}
+                            <Component
+                              isLayout
+                              instance={$screenStore.activeLayout.props}
+                            />
+                          {/key}
+
+                          <!--
                           Flatpickr needs to be inside the theme wrapper.
                           It also needs its own container because otherwise it hijacks
                           key events on the whole page. It is painful to work with.
                         -->
-                        <div id="flatpickr-root" />
+                          <div id="flatpickr-root" />
 
-                        <!-- Modal container to ensure they sit on top -->
-                        <div class="modal-container" />
+                          <!-- Modal container to ensure they sit on top -->
+                          <div class="modal-container" />
 
-                        <!-- Layers on top of app -->
-                        <NotificationDisplay />
-                        <ConfirmationDisplay />
-                        <PeekScreenDisplay />
-                      </CustomThemeWrapper>
-                    {/if}
+                          <!-- Layers on top of app -->
+                          <NotificationDisplay />
+                          <ConfirmationDisplay />
+                          <PeekScreenDisplay />
+                        </CustomThemeWrapper>
+                      {/if}
 
-                    {#if showDevTools}
-                      <DevTools />
+                      {#if showDevTools}
+                        <DevTools />
+                      {/if}
+                    </div>
+
+                    {#if !$builderStore.inBuilder && licensing.logoEnabled()}
+                      <FreeFooter />
                     {/if}
                   </div>
 
-                  {#if !$builderStore.inBuilder && licensing.logoEnabled()}
-                    <FreeFooter />
+                  <!-- Preview and dev tools utilities  -->
+                  {#if $appStore.isDevApp}
+                    <SelectionIndicator />
+                  {/if}
+                  {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
+                    <HoverIndicator />
+                  {/if}
+                  {#if $builderStore.inBuilder}
+                    <DNDHandler />
+                    <GridDNDHandler />
                   {/if}
                 </div>
-
-                <!-- Preview and dev tools utilities  -->
-                {#if $appStore.isDevApp}
-                  <SelectionIndicator />
-                {/if}
-                {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
-                  <HoverIndicator />
-                {/if}
-                {#if $builderStore.inBuilder}
-                  <DNDHandler />
-                  <GridDNDHandler />
-                {/if}
-              </div>
+              </SnippetsProvider>
             </QueryParamsProvider>
           </RowSelectionProvider>
         </StateBindingsProvider>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3d267ec623..7dbe0c0e44 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -565,7 +565,8 @@
 
     // If we don't know, check and cache
     if (used == null) {
-      used = bindingString.indexOf(`[${key}]`) !== -1
+      const searchString = key === "snippets" ? key : `[${key}]`
+      used = bindingString.indexOf(searchString) !== -1
       knownContextKeyMap[key] = used
     }
 
diff --git a/packages/client/src/components/context/SnippetsProvider.svelte b/packages/client/src/components/context/SnippetsProvider.svelte
new file mode 100644
index 0000000000..53fa1e8b7f
--- /dev/null
+++ b/packages/client/src/components/context/SnippetsProvider.svelte
@@ -0,0 +1,8 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { snippets } from "stores"
+</script>
+
+<Provider key="snippets" data={$snippets}>
+  <slot />
+</Provider>
diff --git a/packages/client/src/stores/derived/snippets.js b/packages/client/src/stores/derived/snippets.js
index 806ff85c4a..74b2797643 100644
--- a/packages/client/src/stores/derived/snippets.js
+++ b/packages/client/src/stores/derived/snippets.js
@@ -1,8 +1,8 @@
-import { derived } from "svelte/store"
 import { appStore } from "../app.js"
 import { builderStore } from "../builder.js"
+import { derivedMemo } from "@budibase/frontend-core"
 
-export const snippets = derived(
+export const snippets = derivedMemo(
   [appStore, builderStore],
   ([$appStore, $builderStore]) => {
     return $builderStore?.snippets || $appStore?.application?.snippets || []
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index 0068a3241c..3756d8789a 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -1,14 +1,10 @@
 import { Helpers } from "@budibase/bbui"
 import { processObjectSync } from "@budibase/string-templates"
-import { snippets } from "../stores"
-import { get } from "svelte/store"
 
 /**
  * Recursively enriches all props in a props object and returns the new props.
  * Props are deeply cloned so that no mutation is done to the source object.
  */
 export const enrichDataBindings = (props, context) => {
-  const totalContext = { ...context, snippets: get(snippets) }
-  const opts = { cache: true }
-  return processObjectSync(Helpers.cloneDeep(props), totalContext, opts)
+  return processObjectSync(Helpers.cloneDeep(props), context, { cache: true })
 }

From 23a91bcd2317f792fc80b1ea96290af4dd65c134 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 16:16:37 +0000
Subject: [PATCH 144/148] Update snippet empty state

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

diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 7974e1e1bf..490dfecc31 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -19,7 +19,6 @@
   .drawer-contents {
     overflow-y: auto;
     flex: 1 1 auto;
-    height: 0;
   }
   .container {
     height: 100%;

From a0e3a8f56c1128063c00847d89e5df75a8e8d1de Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 16:16:58 +0000
Subject: [PATCH 145/148] Update drawer styles to fix issue with filter modal

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

diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index 1c6e443fb8..c68699fc0f 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -1,5 +1,14 @@
 <script>
-  import { Input, Layout, Icon, Popover, Tags, Tag, Body } from "@budibase/bbui"
+  import {
+    Input,
+    Layout,
+    Icon,
+    Popover,
+    Tags,
+    Tag,
+    Body,
+    Button,
+  } from "@budibase/bbui"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
   import { EditorModes } from "components/common/CodeEditor"
   import SnippetDrawer from "./SnippetDrawer.svelte"
@@ -128,7 +137,7 @@
       {/if}
     </div>
     <div class="snippet-list">
-      {#if enableSnippets}
+      {#if enableSnippets && filteredSnippets?.length}
         {#each filteredSnippets as snippet}
           <div
             class="snippet"
@@ -149,10 +158,14 @@
       {:else}
         <div class="upgrade">
           <Body size="S">
-            Create reusable blocks of JS that can be managed and updated all in
-            one place with Snippets
+            Snippets let you create reusable JS functions and values that can
+            all be managed in one place
           </Body>
-          <UpgradeButton />
+          {#if enableSnippets}
+            <Button cta on:click={createSnippet}>Create snippet</Button>
+          {:else}
+            <UpgradeButton />
+          {/if}
         </div>
       {/if}
     </div>

From 5b0572c18b7cab8104fdf343d5110803643eafcc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 16:19:37 +0000
Subject: [PATCH 146/148] Ignore server coverage files from eslint

---
 .eslintignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintignore b/.eslintignore
index 8d4c64d960..f2c53c2fdc 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,6 +6,7 @@ packages/server/coverage
 packages/worker/coverage
 packages/backend-core/coverage
 packages/server/client
+packages/server/coverage
 packages/builder/.routify
 packages/sdk/sdk
 packages/account-portal/packages/server/build

From 8bbdebe050e7fe7dbcb1e35e338681596f687521 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Mar 2024 16:40:35 +0000
Subject: [PATCH 147/148] Don't show live eval popovers for roles as they have
 always been broken in JS

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

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index f364b39ba9..6ef2d35a6c 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -75,6 +75,13 @@
     if (!context || !binding.value || binding.value === "") {
       return
     }
+
+    // Roles have always been broken for JS. We need to exclude them from
+    // showing a popover as it will show "Error while executing JS".
+    if (binding.category === "Role") {
+      return
+    }
+
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {

From 4949ea1bcdbc9e60a5a192dfc880ceb59458e7b5 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 15 Mar 2024 09:09:44 +0000
Subject: [PATCH 148/148] PR feedback

---
 .../src/pages/builder/apps/index.svelte       |  2 +-
 .../portal/apps/FavouriteAppButton.svelte     | 16 ++++-
 .../builder/portal/apps/[appId]/index.svelte  |  6 +-
 .../apps/_components/PortalSideBar.svelte     |  6 +-
 .../pages/builder/portal/apps/index.svelte    |  2 +-
 packages/builder/src/stores/portal/apps.js    |  2 +-
 packages/builder/src/stores/portal/index.js   |  2 +-
 .../server/src/api/controllers/application.ts |  3 +-
 .../worker/src/api/controllers/global/self.ts | 58 +++++++------------
 9 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index ce31bd84aa..095bf2023b 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -18,7 +18,7 @@
     auth,
     groups,
     licensing,
-    enriched as enrichedApps,
+    enrichedApps,
   } from "stores/portal"
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
diff --git a/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
index c5e29cc3f6..7d6b4d81a9 100644
--- a/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
@@ -21,8 +21,22 @@
   {size}
   on:click={async e => {
     e.stopPropagation()
+    const userAppFavourites = new Set([...($auth.user.appFavourites || [])])
+    let processedAppIds = []
+
+    if ($auth.user.appFavourites && app?.appId) {
+      if (userAppFavourites.has(app.appId)) {
+        userAppFavourites.delete(app.appId)
+      } else {
+        userAppFavourites.add(app.appId)
+      }
+      processedAppIds = [...userAppFavourites]
+    } else {
+      processedAppIds = [app.appId]
+    }
+
     await auth.updateSelf({
-      appFavourites: [app?.appId],
+      appFavourites: processedAppIds,
     })
   }}
   disabled={!app}
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
index 13ba564e0b..3f8e9e7545 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -1,10 +1,6 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import {
-    auth,
-    sideBarCollapsed,
-    enriched as enrichedApps,
-  } from "stores/portal"
+  import { auth, sideBarCollapsed, enrichedApps } from "stores/portal"
   import AppRowContext from "components/start/AppRowContext.svelte"
   import FavouriteAppButton from "../FavouriteAppButton.svelte"
   import {
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index f11059857b..e9cd170c0b 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -1,9 +1,5 @@
 <script>
-  import {
-    sideBarCollapsed,
-    enriched as enrichedApps,
-    auth,
-  } from "stores/portal"
+  import { sideBarCollapsed, enrichedApps, auth } from "stores/portal"
   import { params, goto } from "@roxi/routify"
   import NavItem from "components/common/NavItem.svelte"
   import NavHeader from "components/common/NavHeader.svelte"
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 6781bcd197..adea7600a6 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -25,7 +25,7 @@
     admin,
     licensing,
     environment,
-    enriched as enrichedApps,
+    enrichedApps,
   } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js
index c06da03f9e..84c4348075 100644
--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.js
@@ -141,7 +141,7 @@ export class AppsStore extends BudiStore {
 export const appsStore = new AppsStore()
 
 // Centralise any logic that enriches the apps list
-export const enriched = derived([appsStore, auth], ([$store, $auth]) => {
+export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
   const enrichedApps = $store.apps
     ? $store.apps.map(app => ({
         ...app,
diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js
index bef176ebaf..ab3be2ce79 100644
--- a/packages/builder/src/stores/portal/index.js
+++ b/packages/builder/src/stores/portal/index.js
@@ -3,7 +3,7 @@ import { writable } from "svelte/store"
 export { organisation } from "./organisation"
 export { users } from "./users"
 export { admin } from "./admin"
-export { appsStore, enriched } from "./apps"
+export { appsStore, enrichedApps } from "./apps"
 export { email } from "./email"
 export { auth } from "./auth"
 export { oidc } from "./oidc"
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 0ee6c821fd..8e62954d88 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -59,7 +59,6 @@ import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
 import { sdk as sharedCoreSDK } from "@budibase/shared-core"
 import * as appMigrations from "../../appMigrations"
-import { cloneDeep } from "lodash"
 
 // utility function, need to do away with this
 async function getLayouts() {
@@ -684,7 +683,7 @@ export async function duplicateApp(
   const createRequest = {
     roleId: ctx.roleId,
     user: {
-      ...cloneDeep(ctx.user),
+      ...ctx.user,
       _id: dbCore.getGlobalIDFromUserMetadataID(ctx.user._id || ""),
     },
     request: {
diff --git a/packages/worker/src/api/controllers/global/self.ts b/packages/worker/src/api/controllers/global/self.ts
index a3c001de03..d2741116e5 100644
--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/packages/worker/src/api/controllers/global/self.ts
@@ -111,6 +111,9 @@ export async function getSelf(ctx: any) {
 }
 
 export const syncAppFavourites = async (processedAppIds: string[]) => {
+  if (processedAppIds.length === 0) {
+    return []
+  }
   const apps = await fetchAppsByIds(processedAppIds)
   return apps?.reduce((acc: string[], app) => {
     const id = app.appId.replace(dbCore.APP_DEV_PREFIX, "")
@@ -127,35 +130,27 @@ export const fetchAppsByIds = async (processedAppIds: string[]) => {
   )
 }
 
-const processUserAppFavourites = (
+const processUserAppFavourites = async (
   user: User,
-  appIdRequest: string[] | undefined
+  update: UpdateSelfRequest
 ) => {
-  const userAppFavourites = user.appFavourites || []
-  const appFavouritesRequest = appIdRequest || []
-  const appFavouritesUpdated = [
-    ...new Set(userAppFavourites.concat(appFavouritesRequest)),
-  ]
-
-  // Process state
-  let processedAppIds: string[]
-  if (userAppFavourites.length) {
-    const req = new Set(appFavouritesRequest)
-    const updated = new Set(userAppFavourites)
-    for (const element of req) {
-      if (updated.has(element)) {
-        // Subtract/Toggle any existing ones
-        updated.delete(element)
-      } else {
-        // Add new appIds
-        updated.add(element)
-      }
-    }
-    processedAppIds = [...updated]
-  } else {
-    processedAppIds = [...appFavouritesUpdated]
+  if (!("appFavourites" in update)) {
+    // Ignore requests without an explicit update to favourites.
+    return
   }
-  return processedAppIds
+
+  const userAppFavourites = user.appFavourites || []
+  const requestAppFavourites = new Set(update.appFavourites || [])
+  const containsAll = userAppFavourites.every(v => requestAppFavourites.has(v))
+
+  if (containsAll && requestAppFavourites.size === userAppFavourites.length) {
+    // Ignore request if the outcome will have no change
+    return
+  }
+
+  // Clean up the request by purging apps that no longer exist.
+  const syncedAppFavourites = await syncAppFavourites([...requestAppFavourites])
+  return syncedAppFavourites
 }
 
 export async function updateSelf(
@@ -164,16 +159,7 @@ export async function updateSelf(
   const update = ctx.request.body
 
   let user = await userSdk.db.getUser(ctx.user._id!)
-  let requestAppFavourites: string[] = [...(update.appFavourites || [])]
-  let updatedAppFavourites: string[] | undefined
-
-  if ("appFavourites" in update) {
-    const appIds: string[] = processUserAppFavourites(
-      user,
-      requestAppFavourites
-    )
-    updatedAppFavourites = await syncAppFavourites(appIds)
-  }
+  const updatedAppFavourites = await processUserAppFavourites(user, update)
 
   user = {
     ...user,