@arcgis/coding-components 4.29.0-beta.99 → 4.29.0

package/dist/cjs/arcgis-arcade-api_6.cjs.entry.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.29/esri/copyright.txt for details.
- * v4.29.0-beta.99
+ * v4.29.0
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aaceaf1f.js');
-const arcadeDefaults = require('./arcade-defaults-5dd9ebb7.js');
+const index = require('./index-54d6f9be.js');
+const arcadeDefaults = require('./arcade-defaults-b30ccec8.js');
 
 async function colorizeCode(code) {
     return await arcadeDefaults.editor.colorize(code, "arcade", { tabSize: 2 });
@@ -24,24 +24,23 @@ async function colorizeCodeElement(e, text) {
     if (!e || e.tagName !== "CODE") {
         return;
     }
+    // eslint-disable-next-line require-atomic-updates
     e.innerHTML = await colorizeCode(text ?? "");
 }
 function generateColorizeStyles() {
+    /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
     const themeService = arcadeDefaults.StandaloneServices.get(arcadeDefaults.IStandaloneThemeService);
     const theme = themeService.getColorTheme();
     return arcadeDefaults.generateTokensCSSForColorMap(theme.tokenTheme.getColorMap());
+    /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
 }
 function onColorizeThemeChanged(func) {
+    /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
     const themeService = arcadeDefaults.StandaloneServices.get(arcadeDefaults.IStandaloneThemeService);
     return themeService.onDidColorThemeChange(() => func());
+    /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
 }
 
-const StickyFilterInput = ({ filterValue, ...rest }) => (
-// TODO: Remove when calcite-input bug with scale is fixed
-// @ts-expect-error
-index.h("div", { class: "sticky", scale: "m" },
-    index.h("calcite-input", { value: filterValue, icon: "magnifying-glass", clearable: true, ...rest })));
-
 var marked_umd = arcadeDefaults.createCommonjsModule(function (module, exports) {
 /**
  * marked v5.1.2 - a markdown parser
@@ -2919,6 +2918,7 @@ var marked_umd = arcadeDefaults.createCommonjsModule(function (module, exports)
 }));
 });
 
+// Set up the marked library to use GitHub Flavored Markdown and to use the custom renderer for links.
 marked_umd.marked.use({
     gfm: true,
     renderer: {
@@ -2927,6 +2927,9 @@ marked_umd.marked.use({
         }
     }
 });
+/**
+ * Converts a markdown string to HTML using the marked library.
+ */
 function convertMarkdownString(value) {
     value ?? (value = "");
     const result = marked_umd.marked(typeof value === "string" ? value : value.value, {
@@ -2939,11 +2942,12 @@ function convertMarkdownString(value) {
 }
 
 function isMonacoEnvironmentSetup() {
-    return !!globalThis.MonacoEnvironment?.getWorkerUrl;
+    return !!window.MonacoEnvironment?.getWorkerUrl;
 }
 const additionalLanguageWorkersMap = new Map();
+let _assetsPath = "";
 function getAssetsPath() {
-    return globalThis.MonacoEnvironment?.assetsPath;
+    return _assetsPath;
 }
 function setupMonacoEnvironment(assetsPath) {
     //
@@ -2951,10 +2955,10 @@ function setupMonacoEnvironment(assetsPath) {
     if (isMonacoEnvironmentSetup()) {
         return;
     }
+    _assetsPath = assetsPath;
     // Since we are using workers, monaco needs to find them.
     // Using the global MonacoEnvironment.
-    globalThis.MonacoEnvironment = {
-        assetsPath,
+    window.MonacoEnvironment = {
         getWorker: async (_, languageId) => {
             // Manufacture the url for the web worker
             let url = additionalLanguageWorkersMap.get(languageId) ?? `${assetsPath}/code-editor/editor.worker.js`;
@@ -2977,7 +2981,7 @@ function setupMonacoEnvironment(assetsPath) {
                     break;
             }
             // If we have a relative path or we are on same orgin, we can use the default js implementation
-            if (!arcadeDefaults.se(url) || arcadeDefaults.oe(url, globalThis.location.href, true)) {
+            if (!arcadeDefaults.ie(url) || arcadeDefaults.se(url, globalThis.location.href, true)) {
                 return new Worker(url, { name: languageId });
             }
             // For cross orgin, we will load the worker code as a string and manufacture a blob
@@ -3024,7 +3028,7 @@ async function getArcadeWorker(uri) {
  * @returns mode for arcade
  */
 async function getMode() {
-    return await Promise.resolve().then(function () { return require('./arcade-mode-0b4c53a1.js'); });
+    return await Promise.resolve().then(function () { return require('./arcade-mode-eb755260.js'); });
 }
 // Register the language in Monaco
 arcadeDefaults.languages.register({
@@ -3056,7 +3060,6 @@ const ArcgisArcadeApi = class {
         this.close = index.createEvent(this, "close", 3);
         this.itemSelected = index.createEvent(this, "itemSelected", 3);
         this._emitItemSelected = (e) => {
-            // @ts-expect-error
             const item = e.target?.["data-item"];
             if (!item) {
                 return;
@@ -3075,8 +3078,11 @@ const ArcgisArcadeApi = class {
             const keyEvent = e;
             if (!keyEvent.key || keyEvent.key === "Enter") {
                 e.preventDefault();
-                // @ts-expect-error
-                this.itemSelected.emit(e.target["data-item"].completion.insertText);
+                const item = e.target?.["data-item"];
+                if (!item) {
+                    return;
+                }
+                this.itemSelected.emit(item.completion.insertText);
             }
         };
         this._selectItem = (e) => {
@@ -3084,14 +3090,14 @@ const ArcgisArcadeApi = class {
                 return;
             }
             e.stopPropagation();
-            // @ts-expect-error
-            this._selectedApiItem = e.target["data-item"];
+            this._selectedApiItem = e.target?.["data-item"];
         };
         this._unselectItem = async () => {
             this._selectedApiItem = undefined;
         };
-        // @ts-expect-error
-        this._updateFilterValue = (e) => (this._filterValue = e.target?.value ?? "");
+        this._updateFilterValue = (e) => {
+            this._filterValue = e.target?.value ?? "";
+        };
         this._lang = "";
         this._t9nLocale = "";
         this._t9nStrings = undefined;
@@ -3113,12 +3119,12 @@ const ArcgisArcadeApi = class {
             if (!this.modelId || key !== arcadeDefaults.Uri.parse(this.modelId).toString()) {
                 return;
             }
-            this._updateApiLibrary();
+            this._updateApiLibrary().catch(console.error);
         });
-        this._updateApiLibrary();
+        await this._updateApiLibrary();
     }
     disconnectedCallback() {
-        arcadeDefaults.H(this);
+        arcadeDefaults.q(this);
         this._flowObserver?.disconnect();
         this._themeChangedListner?.dispose();
     }
@@ -3163,7 +3169,7 @@ const ArcgisArcadeApi = class {
         // When switching between flow the same reference is reused
         this._flowObserver = new MutationObserver(() => {
             // Get the last panel and try to set focus on the input element
-            arcadeDefaults.F(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+            arcadeDefaults.W(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
         });
         this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
@@ -3174,25 +3180,25 @@ const ArcgisArcadeApi = class {
         if (!filteredApiItems.length) {
             return null;
         }
-        return (index.h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (index.h("calcite-list-item", { label: arcadeDefaults.Z(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, index.h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
+        return (index.h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (index.h("calcite-list-item", { label: arcadeDefaults.G(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, index.h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
     }
     renderApiItemFlowItem() {
         const apiItem = this._selectedApiItem;
         if (!apiItem) {
             return null;
         }
-        return (index.h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (index.h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this._t9nStrings?.moreinformation)), index.h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => void e?.setFocus() }, this._t9nStrings?.insert ?? "Insert"), index.h("calcite-block", { open: true, heading: arcadeDefaults.Z(apiItem.completion.detail) }, index.h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (index.h("div", { ref: (e) => {
+        return (index.h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (index.h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this._t9nStrings?.moreinformation)), index.h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => void e?.setFocus() }, this._t9nStrings?.insert ?? "Insert"), index.h("calcite-block", { open: true, heading: arcadeDefaults.G(apiItem.completion.detail) }, index.h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (index.h("div", { ref: (e) => {
                 if (!e) {
                     return;
                 }
                 e.innerHTML = convertMarkdownString(apiItem.examples);
-                colorizedAllCodeElements(e);
+                colorizedAllCodeElements(e).catch(console.error);
             } })) : null)));
     }
     render() {
         const categories = (this._apiLibrary ?? []).map((apiCategory) => this.renderApiCategory(apiCategory));
         const empty = categories.every((g) => !g);
-        return (index.h(index.Host, null, index.h("style", null, this._colorizeStyle), index.h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, index.h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, index.h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), this._preparingApi ? (index.h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (index.h("calcite-list", null, empty ? index.h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
+        return (index.h(index.Host, null, index.h("style", null, this._colorizeStyle), index.h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, index.h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, index.h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), this._preparingApi ? (index.h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (index.h("calcite-list", null, empty ? index.h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
     }
     static get assetsDirs() { return ["assets"]; }
     get _hostElement() { return index.getElement(this); }
@@ -3358,17 +3364,18 @@ function formatArcadeResultDateOnly(dateObject) {
 function formatArcadeResultTimeOnly(dateObject) {
     return dateObject.value.toString();
 }
-async function loadArcadeResult(result, timeZone = "system") {
-    if (result.type !== "featureSet") {
-        return result;
+async function convertScriptOutputToArcadeResult(scriptOutput, timeZone = "system") {
+    const arcadeResult = valueToArcadeResult(scriptOutput);
+    if (arcadeResult.type !== "featureSet") {
+        return arcadeResult;
     }
     // Feature Set needs to be loaded
-    await result.value.load();
+    await arcadeResult.value.load();
     // Create the first iterator
-    result.iterator = result.value.iterator({ aborted: false });
+    arcadeResult.iterator = arcadeResult.value.iterator({ aborted: false });
     // Load the first batch of items
-    result.features = (await result.iterator.nextBatchAsArcadeFeatures(BatchSize, timeZone)) ?? [];
-    return result;
+    arcadeResult.features = (await arcadeResult.iterator.nextBatchAsArcadeFeatures(BatchSize, timeZone)) ?? [];
+    return arcadeResult;
 }
 async function executeScript(editorProfile, script, testContext, console) {
     //
@@ -3396,12 +3403,12 @@ async function executeScript(editorProfile, script, testContext, console) {
         // Execute the script
         const scriptOutput = await executor.executeAsync(profileVariableInstances, executeContext);
         // Convert script output to arcade result object and load data if necessary
-        const scriptResult = await loadArcadeResult(valueToArcadeResult(scriptOutput), timeZone);
+        const arcadeResult = await convertScriptOutputToArcadeResult(scriptOutput, timeZone);
         // Timestamp and measure cost
-        scriptResult.timeStamp = timeStamp;
-        scriptResult.compilationTime = t1 - t0;
-        scriptResult.executionTime = performance.now() - t1;
-        return scriptResult;
+        arcadeResult.timeStamp = timeStamp;
+        arcadeResult.compilationTime = t1 - t0;
+        arcadeResult.executionTime = performance.now() - t1;
+        return arcadeResult;
         //
     }
     catch (error) {
@@ -3461,7 +3468,8 @@ function setupArcadeTheme() {
         });
     });
 }
-const validKeys = ["comment", "keyword", "identifier", "string", "number", "constant"];
+const monacoThemeKeys = ["comment", "keyword", "identifier", "string", "number", "constant"];
+const colorRulesKeys = [...monacoThemeKeys, "date"];
 function updateThemeColors(theme, colorRules) {
     if (colorRules === undefined) {
         setupArcadeTheme();
@@ -3469,14 +3477,7 @@ function updateThemeColors(theme, colorRules) {
     }
     const base = theme === "light" ? "vs" : "vs-dark";
     const rules = [];
-    Object.keys(colorRules).forEach((key) => {
-        const foreground = colorRules[key];
-        if (!foreground) {
-            return;
-        }
-        rules.push({ token: `${key}.arc`, foreground });
-    });
-    validKeys.forEach((key) => {
+    monacoThemeKeys.forEach((key) => {
         const foreground = colorRules[key];
         if (!foreground) {
             return;
@@ -3511,15 +3512,19 @@ const ArcgisArcadeEditor = class {
             this._showExecutionPanel = true;
             this._executingScript = true;
             this._consoleLogs = [];
-            setTimeout(async () => {
+            setTimeout(() => void (async () => {
                 const script = await this._codeEditorElt?.getValue();
                 this._executionResult = await executeScript(editorProfile.definition, script, testContext, (log) => setTimeout(() => (this._consoleLogs = [...this._consoleLogs, log]), 0));
                 this._executingScript = false;
-            }, 0);
+            })(), 0);
+        };
+        this._toggleShowExecutionPanel = () => {
+            this._showExecutionPanel = !this._showExecutionPanel;
         };
-        this._toggleShowExecutionPanel = () => (this._showExecutionPanel = !this._showExecutionPanel);
-        this._toggleSideActionBarExpanded = () => (this.sideActionBarExpanded = !this.sideActionBarExpanded);
-        this._toggleSidePanel = async (e) => {
+        this._toggleSideActionBarExpanded = () => {
+            this.sideActionBarExpanded = !this.sideActionBarExpanded;
+        };
+        this._toggleSidePanel = (e) => {
             if (!e.target) {
                 return;
             }
@@ -3528,18 +3533,18 @@ const ArcgisArcadeEditor = class {
             this.openedSidePanel = panelName === this.openedSidePanel ? "none" : panelName;
             if (this.openedSidePanel === "none") {
                 // Reset focus on the code editor if no panel displayed
-                await this._codeEditorElt?.setFocus();
+                this._codeEditorElt?.setFocus().catch(console.error);
             }
         };
-        this._openArcadeHelp = () => window.open(DevelopersWebSitePath, "Arcade Help");
+        this._openArcadeHelp = () => void window.open(DevelopersWebSitePath, "Arcade Help");
         this._emitScriptChange = (e) => {
             e.stopPropagation();
             this.scriptChange.emit(e.detail);
         };
-        this._insertAsSnippet = async (e) => await this._codeEditorElt?.insertSnippet(e.detail);
-        this._insertAsText = async (e) => await this._codeEditorElt?.insertText(e.detail);
-        this._onResultPanelChange = (e) => (this._resultPanel = e.detail);
-        this._onExecutionPanelClose = () => (this._showExecutionPanel = false);
+        this._insertAsSnippet = (e) => void this._codeEditorElt?.insertSnippet(e.detail).catch(console.error);
+        this._insertAsText = (e) => void this._codeEditorElt?.insertText(e.detail).catch(console.error);
+        this._onResultPanelChange = (e) => void (this._resultPanel = e.detail);
+        this._onExecutionPanelClose = () => void (this._showExecutionPanel = false);
         this._lang = "";
         this._t9nLocale = "";
         this._t9nStrings = undefined;
@@ -3566,13 +3571,13 @@ const ArcgisArcadeEditor = class {
         if (newValue === oldValue) {
             return;
         }
-        this._updateEditorProfile();
+        this._updateEditorProfile().catch(console.error);
     }
     _testDataChanged(newValue, oldValue) {
         if (newValue === oldValue || !this._showExecutionPanel) {
             return;
         }
-        this._executeScript();
+        this._executeScript().catch(console.error);
     }
     _snippetChanged(newValue, oldValue) {
         if (newValue === oldValue) {
@@ -3623,14 +3628,6 @@ const ArcgisArcadeEditor = class {
         const script = await this._codeEditorElt?.getValue();
         return await executeScript(editorProfile.definition, script, this.testData);
     }
-    /**
-     * Returns the Arcade output type for the script.
-     * @deprecated Use getTestResult
-     * @internal
-     */
-    async getOutputType() {
-        return (await this.getTestResult()).type;
-    }
     /**
      * Allows to change theme colors
      * @internal
@@ -3639,13 +3636,12 @@ const ArcgisArcadeEditor = class {
         const theme = arcadeDefaults.k(this._hostElement);
         updateThemeColors(theme, colorRules);
         if (colorRules === undefined) {
-            ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
+            colorRulesKeys.forEach((key) => {
                 this._hostElement.style.removeProperty(`--arcgis-arcade-editor-${key}`);
             });
             return;
         }
-        ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
-            // @ts-expect-error
+        colorRulesKeys.forEach((key) => {
             const foreground = colorRules[key];
             if (!foreground) {
                 return;
@@ -3686,14 +3682,14 @@ const ArcgisArcadeEditor = class {
             contextMenuOrder: 1,
             run: () => {
                 if (this.testData) {
-                    this._executeScript();
+                    this._executeScript().catch(console.error);
                 }
             }
         });
         await this._codeEditorElt?.setFocus();
     }
     disconnectedCallback() {
-        arcadeDefaults.H(this);
+        arcadeDefaults.q(this);
         arcadeDefaults.arcadeDefaults.disposeApiContextForModel(this._modelId);
         arcadeDefaults.arcadeDefaults.disposeEditorProfileForModel(this._modelId);
         while (this._disposables.length) {
@@ -3744,22 +3740,45 @@ const ArcgisArcadeEditor = class {
     }
     //#endregion
     //#region Rendering the Action Bar
+    renderAction({ id, label, icon, active, panelName, onClick = this._toggleSidePanel }) {
+        return (index.h(index.Fragment, null, index.h("calcite-action", { id: id, text: label, icon: icon, active: active, onClick: onClick, "data-panel-name": panelName }), !this.sideActionBarExpanded && (index.h("calcite-tooltip", { label: label, "reference-element": id }, index.h("span", null, label)))));
+    }
     renderSideActionBar() {
         if (this.hideSideBar) {
             return null;
         }
-        return (index.h("calcite-action-bar", { class: "side-action-bar border-inline-start", expanded: !!this.sideActionBarExpanded, position: "end", onCalciteActionBarToggle: this._toggleSideActionBarExpanded }, index.h("calcite-action-group", null, index.h("calcite-action", { id: "profile-variables-action", text: this._t9nStrings?.profilevariables ?? "Profile variables", icon: "profile-variables", active: this.openedSidePanel === "variables", onClick: this._toggleSidePanel, "data-panel-name": "variables" }), index.h("calcite-action", { id: "function-action", text: this._t9nStrings?.constantsandfunctions ?? "Constants and functions", icon: "function", active: this.openedSidePanel === "api", onClick: this._toggleSidePanel, "data-panel-name": "api" }), this.suggestions?.length ? (index.h(index.Fragment, null, index.h("calcite-action", { id: "suggestions-action", text: this._t9nStrings?.suggestions ?? "Suggestions", icon: "lightbulb", active: this.openedSidePanel === "suggestions", onClick: this._toggleSidePanel, "data-panel-name": "suggestions" }))) : null, this.hideDocumentationActions ? null : (index.h(index.Fragment, null, index.h("calcite-action", { id: "developer-website-action", text: this._t9nStrings?.help ?? "Help", icon: "question", iconFlipRtl: this._t9nLocale === "ar", onClick: this._openArcadeHelp }))))));
-    }
-    // private renderTooltip(id: string, label: string | undefined): VNode | null {
-    //   if (this.sideActionBarExpanded || !label) {
-    //     return null;
-    //   }
-    //   return (
-    //     <calcite-tooltip label={label} reference-element={id} placement="leading-start">
-    //       <span>{label}</span>
-    //     </calcite-tooltip>
-    //   );
-    // }
+        console.log("expanded", this.sideActionBarExpanded);
+        return (index.h("calcite-action-bar", { class: "side-action-bar border-inline-start", expanded: !!this.sideActionBarExpanded, position: "end", onCalciteActionBarToggle: this._toggleSideActionBarExpanded }, index.h("calcite-action-group", null, this.renderAction({
+            id: "profile-variables-action",
+            label: this._t9nStrings?.profilevariables ?? "Profile variables",
+            icon: "profile-variables",
+            active: this.openedSidePanel === "variables",
+            panelName: "variables"
+        }), this.renderAction({
+            id: "function-action",
+            label: this._t9nStrings?.constantsandfunctions ?? "Constants and functions",
+            icon: "function",
+            active: this.openedSidePanel === "api",
+            panelName: "api"
+        }), this.suggestions?.length
+            ? this.renderAction({
+                id: "suggestions-action",
+                label: this._t9nStrings?.suggestions ?? "Suggestions",
+                icon: "lightbulb",
+                active: this.openedSidePanel === "suggestions",
+                panelName: "suggestions"
+            })
+            : null, this.hideDocumentationActions
+            ? null
+            : this.renderAction({
+                id: "developer-website-action",
+                label: this._t9nStrings?.help ?? "Help",
+                icon: "question",
+                active: false,
+                panelName: "none",
+                onClick: this._openArcadeHelp
+            }))));
+    }
     //#endregion
     //#region Render Side Panel
     renderSidePanel() {
@@ -3800,62 +3819,7 @@ const ArcgisArcadeEditor = class {
 };
 ArcgisArcadeEditor.style = arcadeEditorCss;
 
-const indentSpecs = { char: " ", size: 2 };
-const indentType = new Array(indentSpecs.size + 1).join(indentSpecs.char);
-function createPushFunc(p) {
-    return (substring) => `\\${p.push(substring)}\\`;
-}
-function createPopFunc(p) {
-    return (_, offset) => p[offset - 1] ?? "";
-}
-function indent(index, indentType) {
-    return new Array(index + 1).join(indentType);
-}
-function jsonFormat(json) {
-    // Convert to string and extract backslashes and strings
-    const p = [];
-    const pushFunc = createPushFunc(p);
-    const jsonString = JSON.stringify(json)
-        .replace(/\\./gu, pushFunc)
-        .replace(/(".*?"|'.*?')/gu, pushFunc)
-        .replace(/\s+/u, "");
-    // Indent and insert newlines
-    let indentIndex = 0;
-    let out = "";
-    for (let i = 0; i < jsonString.length; i++) {
-        const c = jsonString.charAt(i);
-        switch (c) {
-            case "{":
-            case "[":
-                indentIndex += 1;
-                out += `${c}\n${indent(indentIndex, indentType)}`;
-                break;
-            case "}":
-            case "]":
-                indentIndex -= 1;
-                out += `\n${indent(indentIndex, indentType)}${c}`;
-                break;
-            case ",":
-                out += `,\n${indent(indentIndex, indentType)}`;
-                break;
-            case ":":
-                out += ": ";
-                break;
-            default:
-                out += c;
-                break;
-        }
-    }
-    // Strip whitespace from numeric arrays and put backslashes
-    // and strings back in
-    const popFunc = createPopFunc(p);
-    return out
-        .replace(/\[[\d,\s]+?\]/gu, (m) => m.replace(/\s/gu, ""))
-        .replace(/\\(\d+)\\/gu, popFunc) // strings
-        .replace(/\\(\d+)\\/gu, popFunc); // backslashes in strings
-}
-
-const arcadeResultsCss = ":host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2)}:host .flex-adjustable{flex:1 1 auto;overflow:hidden}:host .flex-row{display:flex;flex-direction:row;overflow:hidden}:host .flex-column{display:flex;flex-direction:column;overflow:hidden}:host .y-scrollable-container{overflow-y:auto;block-size:100%;background-color:var(--calcite-color-foreground-1)}:host header{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}:host .ltr-container{direction:ltr}:host calcite-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group:last-child{border-inline-end-width:0px}:host calcite-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1)}:host .color-info{color:var(--calcite-color-info)}:host .color-error{color:var(--calcite-color-danger)}:host .color-success{color:var(--calcite-color-success)}:host [class*=result-value-]{font-size:var(--calcite-font-size--2);line-height:1.25rem;background-color:var(--calcite-color-foreground-1);margin:var(--calcite-spacing-three-quarter)}:host .console-logs-container{background-color:var(--calcite-color-foreground-1);padding:0 var(--calcite-spacing-three-quarter);font-family:var(--calcite-code-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal)}:host .result-value-table table{display:block;max-width:fit-content;overflow-x:auto;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap}:host .result-value-table table thead{background-color:var(--calcite-color-foreground-2)}:host .result-value-table table tr{border-top:1px solid var(--calcite-color-border-3);border-bottom:1px solid var(--calcite-color-border-3)}:host .result-value-table table th,:host .result-value-table table td{border-inline-start:1px solid var(--calcite-color-border-3);border-inline-end:1px solid var(--calcite-color-border-3);text-align:start;padding:var(--calcite-spacing-quarter)}:host .result-value-table table th .string-value,:host .result-value-table table td .string-value{white-space:pre}:host .result-value-table table th{font-weight:var(--calcite-font-weight-medium)}:host .tree-item-label,:host .number-value,:host .string-value,:host .boolean-value{font-family:var(--calcite-code-family)}:host .tree-item-label,:host .value-type{color:var(--calcite-text-2);font-weight:var(--calcite-font-weight-normal)}:host .dictionary-property{color:var(--arcgis-arcade-editor-identifier)}:host .number-value{color:var(--arcgis-arcade-editor-number)}:host .string-value{color:var(--arcgis-arcade-editor-string);white-space:pre-wrap}:host .constant-value{color:var(--arcgis-arcade-editor-constant)}:host .date-value{color:var(--arcgis-arcade-editor-date)}";
+const arcadeResultsCss = ":host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2)}:host .flex-adjustable{flex:1 1 auto;overflow:hidden}:host .flex-row{display:flex;flex-direction:row;overflow:hidden}:host .flex-column{display:flex;flex-direction:column;overflow:hidden}:host .y-scrollable-container{overflow-y:auto;block-size:100%;background-color:var(--calcite-color-foreground-1)}:host header{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}:host .ltr-container{direction:ltr}:host calcite-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group:last-child{border-inline-end-width:0px}:host calcite-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1)}:host .color-info{color:var(--calcite-color-status-info)}:host .color-error{color:var(--calcite-color-status-danger)}:host .color-success{color:var(--calcite-color-status-success)}:host [class*=result-value-]{font-size:var(--calcite-font-size--2);line-height:1.25rem;background-color:var(--calcite-color-foreground-1);margin:var(--calcite-spacing-three-quarter)}:host .console-logs-container{background-color:var(--calcite-color-foreground-1);padding:0 var(--calcite-spacing-three-quarter);font-family:var(--calcite-code-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal)}:host .result-value-table table{display:block;max-width:fit-content;overflow-x:auto;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap}:host .result-value-table table thead{background-color:var(--calcite-color-foreground-2)}:host .result-value-table table tr{border-top:1px solid var(--calcite-color-border-3);border-bottom:1px solid var(--calcite-color-border-3)}:host .result-value-table table th,:host .result-value-table table td{border-inline-start:1px solid var(--calcite-color-border-3);border-inline-end:1px solid var(--calcite-color-border-3);text-align:start;padding:var(--calcite-spacing-quarter)}:host .result-value-table table th .string-value,:host .result-value-table table td .string-value{white-space:pre}:host .result-value-table table th{font-weight:var(--calcite-font-weight-medium)}:host .tree-item-label,:host .number-value,:host .string-value,:host .boolean-value{font-family:var(--calcite-code-family)}:host .tree-item-label,:host .value-type{color:var(--calcite-color-text-2);font-weight:var(--calcite-font-weight-normal)}:host .dictionary-property{color:var(--arcgis-arcade-editor-identifier)}:host .number-value{color:var(--arcgis-arcade-editor-number)}:host .string-value{color:var(--arcgis-arcade-editor-string);white-space:pre-wrap}:host .constant-value{color:var(--arcgis-arcade-editor-constant)}:host .date-value{color:var(--arcgis-arcade-editor-date)}";
 
 //#region Specialized Constants
 const treeProps = {
@@ -3876,10 +3840,10 @@ function renderDictionaryProperty(key) {
     return (index.h(index.Fragment, null, index.h("span", { class: "dictionary-property" }, key), index.h("span", null, ":\u00A0")));
 }
 function renderDictionaryAsJsonTree(value, subtree = false) {
-    return (index.h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, index.h("calcite-tree-item", { class: "string-value" }, jsonFormat(value.castAsJson()))));
+    return (index.h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, index.h("calcite-tree-item", { class: "string-value" }, JSON.stringify(value.castAsJson(), undefined, 2))));
 }
 function renderGeometryTree(value, subtree = false) {
-    return (index.h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, index.h("calcite-tree-item", null, index.h("div", { class: "tree-item-label" }, renderDictionaryProperty("type"), value.type)), index.h("calcite-tree-item", null, index.h("div", { class: "tree-item-label" }, renderDictionaryProperty("value"), index.h("span", { class: "string-value" }, jsonFormat(value.toJSON()))))));
+    return (index.h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, index.h("calcite-tree-item", null, index.h("div", { class: "tree-item-label" }, renderDictionaryProperty("type"), value.type)), index.h("calcite-tree-item", null, index.h("div", { class: "tree-item-label" }, renderDictionaryProperty("value"), index.h("span", { class: "string-value" }, JSON.stringify(value, undefined, 2))))));
 }
 function renderSimpleValue(arcadeResult) {
     switch (arcadeResult.type) {
@@ -3887,7 +3851,7 @@ function renderSimpleValue(arcadeResult) {
         case "null":
             return index.h("span", { class: "constant-value" }, arcadeResult.type);
         case "text":
-            return index.h("span", { class: "string-value" }, arcadeDefaults.Q(arcadeResult.value));
+            return index.h("span", { class: "string-value" }, arcadeDefaults.D(arcadeResult.value));
         case "number":
             return index.h("span", { class: "number-value" }, arcadeResult.value.toString());
         case "boolean":
@@ -3895,9 +3859,9 @@ function renderSimpleValue(arcadeResult) {
         case "date":
             return index.h("span", { class: "date-value" }, formatArcadeResultDate(arcadeResult));
         case "dateOnly":
-            return index.h("span", { class: "string-value" }, arcadeDefaults.Q(formatArcadeResultDateOnly(arcadeResult)));
+            return index.h("span", { class: "string-value" }, arcadeDefaults.D(formatArcadeResultDateOnly(arcadeResult)));
         case "time":
-            return index.h("span", { class: "string-value" }, arcadeDefaults.Q(formatArcadeResultTimeOnly(arcadeResult)));
+            return index.h("span", { class: "string-value" }, arcadeDefaults.D(formatArcadeResultTimeOnly(arcadeResult)));
         default:
             return null;
     }
@@ -3944,7 +3908,7 @@ const ArcgisArcadeResults = class {
         await arcadeDefaults.B(this, index.getAssetPath("./assets"));
     }
     disconnectedCallback() {
-        arcadeDefaults.H(this);
+        arcadeDefaults.q(this);
     }
     // #endregion
     //#region Private Methods
@@ -3971,18 +3935,18 @@ const ArcgisArcadeResults = class {
             return index.h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
         }
         const iconClass = this.result?.type === "error" ? "color-error" : "color-success";
-        return (index.h("calcite-list", null, this.result ? (index.h(index.Fragment, null, index.h("calcite-list-item", { label: arcadeDefaults.K(this._t9nStrings?.lastexecutionformat, {
+        return (index.h("calcite-list", null, this.result ? (index.h(index.Fragment, null, index.h("calcite-list-item", { label: arcadeDefaults.Z(this._t9nStrings?.lastexecutionformat, {
                 timeStamp: new Intl.DateTimeFormat(this._t9nLocale, {
                     dateStyle: "medium",
                     timeStyle: "medium"
                 }).format(this.result.timeStamp)
-            }) }, index.h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), index.h("calcite-list-item", { label: arcadeDefaults.K(this._t9nStrings?.compilationtimeformat, {
+            }) }, index.h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), index.h("calcite-list-item", { label: arcadeDefaults.Z(this._t9nStrings?.compilationtimeformat, {
                 time: new Intl.NumberFormat(this._t9nLocale, {
                     style: "unit",
                     unit: "millisecond",
                     maximumFractionDigits: 2
                 }).format(this.result.compilationTime ?? 0)
-            }) }, index.h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), index.h("calcite-list-item", { label: arcadeDefaults.K(this._t9nStrings?.executiontimeformat, {
+            }) }, index.h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), index.h("calcite-list-item", { label: arcadeDefaults.Z(this._t9nStrings?.executiontimeformat, {
                 time: new Intl.NumberFormat(this._t9nLocale, {
                     style: "unit",
                     unit: "millisecond",
@@ -3999,7 +3963,7 @@ const ArcgisArcadeResults = class {
         }
         switch (this.result?.type) {
             case "error":
-                return (index.h("div", { class: "result-value-simple flex-adjustable" }, arcadeDefaults.K(this._t9nStrings?.executionerrorformat, {
+                return (index.h("div", { class: "result-value-simple flex-adjustable" }, arcadeDefaults.Z(this._t9nStrings?.executionerrorformat, {
                     message: this.result.value
                 })));
             case "null":
@@ -4036,7 +4000,7 @@ const ArcgisArcadeResults = class {
     renderArrayHeader(arcadeResult) {
         const items = arcadeResult.value ?? [];
         const leftoverCount = Math.max(items.length - MaxArrayItems, 0);
-        return (index.h(index.Fragment, null, index.h("span", null, `${arcadeResult.type}(${items.length ?? 0})`), leftoverCount > 0 ? (index.h("span", null, "\u00A0", arcadeDefaults.K(this._t9nStrings?.showingfirstitemsformat, {
+        return (index.h(index.Fragment, null, index.h("span", null, `${arcadeResult.type}(${items.length ?? 0})`), leftoverCount > 0 ? (index.h("span", null, "\u00A0", arcadeDefaults.Z(this._t9nStrings?.showingfirstitemsformat, {
             count: MaxArrayItems.toString()
         }))) : null));
     }
@@ -4082,7 +4046,7 @@ const ArcgisArcadeResults = class {
         }
     }
     renderFeatureSetLabel(arcadeResult) {
-        return (index.h("div", { class: "value-type" }, index.h("span", null, arcadeResult.type, ":"), arcadeResult.features.length >= BatchSize ? (index.h("span", null, "\u00A0", arcadeDefaults.K(this._t9nStrings?.showingfirstitemsformat, {
+        return (index.h("div", { class: "value-type" }, index.h("span", null, arcadeResult.type, ":"), arcadeResult.features.length >= BatchSize ? (index.h("span", null, "\u00A0", arcadeDefaults.Z(this._t9nStrings?.showingfirstitemsformat, {
             count: BatchSize.toString()
         }))) : null));
     }
@@ -4111,10 +4075,10 @@ const ArcgisArcadeSuggestions = class {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "close", 3);
         this.itemSelected = index.createEvent(this, "itemSelected", 3);
-        // @ts-expect-error
-        this._updateFilterValue = (e) => (this._filterValue = e.target?.value ?? "");
+        this._updateFilterValue = (e) => {
+            this._filterValue = e.target?.value ?? "";
+        };
         this._emitItemSelected = (e) => {
-            // @ts-expect-error
             const item = e.target?.["data-item"];
             if (!item) {
                 return;
@@ -4126,7 +4090,6 @@ const ArcgisArcadeSuggestions = class {
             }
         };
         this._showSuggestionDetail = (e) => {
-            // @ts-expect-error
             const item = e.target?.["data-item"];
             if (!item) {
                 return;
@@ -4134,8 +4097,12 @@ const ArcgisArcadeSuggestions = class {
             e.stopPropagation();
             this._selectedSuggestion = item;
         };
-        this._emitClose = () => this.close.emit();
-        this._beforeBack = async () => (this._selectedSuggestion = undefined);
+        this._emitClose = () => {
+            this.close.emit();
+        };
+        this._beforeBack = async () => {
+            this._selectedSuggestion = undefined;
+        };
         this._lang = "";
         this._t9nLocale = "";
         this._t9nStrings = undefined;
@@ -4157,7 +4124,7 @@ const ArcgisArcadeSuggestions = class {
     disconnectedCallback() {
         this._flowObserver?.disconnect();
         this._themeChangedListner?.dispose();
-        arcadeDefaults.H(this);
+        arcadeDefaults.q(this);
     }
     // #endregion
     //#region Private Methods
@@ -4175,7 +4142,7 @@ const ArcgisArcadeSuggestions = class {
         // When switching between flow the same reference is reused
         this._flowObserver = new MutationObserver(() => {
             // Get the last panel and try to set focus on the input element
-            arcadeDefaults.F(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+            arcadeDefaults.W(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
         });
         this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
@@ -4205,7 +4172,7 @@ const ArcgisArcadeSuggestions = class {
         return (index.h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose, beforeBack: this._beforeBack }, index.h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelected, ref: (e) => void e?.setFocus(), "data-item": suggestion }, this._t9nStrings?.insert), index.h("calcite-block", { open: true, heading: suggestion.label, description: suggestion.description }, index.h("div", { innerHTML: convertMarkdownString(suggestion.documentation) }), index.h("pre", null, index.h("code", { ref: (e) => e === undefined ? undefined : void colorizeCodeElement(e, suggestion.code).catch(console.error) })))));
     }
     render() {
-        return (index.h(index.Host, null, index.h("style", null, this._colorizeStyle), index.h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, index.h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose }, index.h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), index.h("calcite-list", null, this.renderSuggestionGroups())), this.renderSuggestionFlowItem())));
+        return (index.h(index.Host, null, index.h("style", null, this._colorizeStyle), index.h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, index.h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose }, index.h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), index.h("calcite-list", null, this.renderSuggestionGroups())), this.renderSuggestionFlowItem())));
     }
     static get assetsDirs() { return ["assets"]; }
     get _hostElement() { return index.getElement(this); }
@@ -4217,21 +4184,30 @@ ArcgisArcadeSuggestions.style = arcadeSuggestionsCss;
 
 const arcadeVariablesCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}";
 
+function stopEnterPropagation(e) {
+    if (e.key === "Enter") {
+        e.stopPropagation();
+    }
+}
 const ArcgisArcadeVariables = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "close", 3);
         this.itemSelected = index.createEvent(this, "itemSelected", 3);
-        // @ts-expect-error
-        this._updateFilterValue = (e) => (this._filterValue = e.target?.value ?? "");
+        this._updateFilterValue = (e) => {
+            this._filterValue = e.target.value;
+        };
         this._beforeBack = async () => {
             this.removeLastPanelRenderer();
             this._filterValue = "";
         };
-        this._emitClose = () => this.close.emit();
-        this._backToTop = () => (this._flowItemRenderers = []);
+        this._emitClose = () => {
+            this.close.emit();
+        };
+        this._backToTop = () => {
+            this._flowItemRenderers = [];
+        };
         this._emitItemSelected = (e) => {
-            // @ts-expect-error
             const variable = e.target?.["data-item"];
             if (!variable || variable.nonInteractive) {
                 return;
@@ -4242,13 +4218,7 @@ const ArcgisArcadeVariables = class {
                 this.itemSelected.emit(variable.snippet);
             }
         };
-        this._stopEnterPropagation = (e) => {
-            if (e.key === "Enter") {
-                e.stopPropagation();
-            }
-        };
         this._showCollectionPanel = (e) => {
-            // @ts-expect-error
             const collectionVariable = e.target?.["data-item"];
             if (!collectionVariable) {
                 return;
@@ -4274,7 +4244,7 @@ const ArcgisArcadeVariables = class {
         await arcadeDefaults.B(this, index.getAssetPath("./assets"));
     }
     disconnectedCallback() {
-        arcadeDefaults.H(this);
+        arcadeDefaults.q(this);
         this._flowObserver?.disconnect();
     }
     // #endregion
@@ -4299,7 +4269,7 @@ const ArcgisArcadeVariables = class {
         // When switching between flow the same reference is reused
         this._flowObserver = new MutationObserver(() => {
             // Get the last panel and try to set focus on the input element
-            arcadeDefaults.F(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+            arcadeDefaults.W(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
         });
         this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
@@ -4317,17 +4287,23 @@ const ArcgisArcadeVariables = class {
             let loading = this.loading;
             if (!loading && !collection.loaded) {
                 // Request to load and update mutation counter when done
-                collection.loadSource().then(() => setTimeout(() => {
+                collection
+                    .loadSource()
+                    .then(() => setTimeout(() => {
                     this._mutationCounter += 1;
-                }));
+                }))
+                    .catch(() => {
+                    console.error("Error loading collection");
+                    loading = false;
+                });
                 loading = true;
             }
-            return (index.h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, index.h("calcite-action", { slot: "header-actions-end", text: this._t9nStrings?.backtotop ?? "Back to top", scale: "m", hidden: topPanel, icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), index.h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), loading ? (index.h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (index.h("calcite-list", null, this.renderEditorVariables(collection)))));
+            return (index.h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, description: collection.breadcrumb, beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, index.h("calcite-action", { slot: "header-actions-end", text: this._t9nStrings?.backtotop ?? "Back to top", scale: "m", hidden: topPanel, icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), index.h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), loading ? (index.h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (index.h("calcite-list", null, this.renderEditorVariables(collection)))));
         };
     }
     renderEditorVariables(collection) {
         // Filter the variables. Skip group, we will filter the children later on.
-        const filterExpression = arcadeDefaults.D(this._filterValue);
+        const filterExpression = arcadeDefaults.K(this._filterValue);
         const filteredVariables = collection.variables.filter((variable) => variable.passFilter(filterExpression));
         if (!filteredVariables.length) {
             return index.h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No item");
@@ -4340,7 +4316,7 @@ const ArcgisArcadeVariables = class {
                 // Group is a collection but we represent it differently
                 return (index.h("calcite-list-item-group", { heading: variable.getLabel() }, this.renderEditorVariables(variable)));
             default:
-                return (index.h("calcite-list-item", { label: variable.getLabel(), description: variable.getDescription(), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": variable }, variable.isCollection ? (index.h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showCollectionPanel, onKeyPress: this._stopEnterPropagation, "data-item": variable })) : null, variable.icon ? index.h("calcite-icon", { icon: variable.icon, scale: "s", slot: "content-start" }) : null));
+                return (index.h("calcite-list-item", { label: variable.getLabel(), description: variable.getDescription(), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": variable }, variable.isCollection ? (index.h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showCollectionPanel, onKeyPress: stopEnterPropagation, "data-item": variable })) : null, variable.icon ? index.h("calcite-icon", { icon: variable.icon, scale: "s", slot: "content-start" }) : null));
         }
     }
     render() {