@arcgis/coding-components 5.2.0-next.135 → 5.2.0-next.137

package/dist/components/arcgis-arcade-editor/customElement.js

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { g as N, c as z } from "../../chunks/runtime.js";
-import { css as U, html as d, nothing as C } from "lit";
+import { css as U, html as d, nothing as B } from "lit";
 import { i as H } from "../../chunks/monaco-importer.js";
 import { LitElement as V, createEvent as R, safeClassMap as P } from "@arcgis/lumina";
 import { generateGuid as G } from "@arcgis/toolkit/string";
-import { i as A, e as B, c as m, D as W } from "../../chunks/arcade-executor.js";
+import { i as A, e as C, c as m, D as W } from "../../chunks/arcade-executor.js";
 import { s as j, a as Q } from "../../chunks/arcade-service-accessors.js";
 import { b as y } from "../../chunks/arcade-defaults.js";
 import { setArcadeAskAiBinding as w, arcadeAskAiCommandId as Y, arcadeQuickFixKind as J } from "../../chunks/arcade-mode.js";
@@ -15,15 +15,15 @@ import { g as q } from "../../chunks/utils.js";
 import { rethrowError as l } from "@arcgis/toolkit/log";
 import { watch as v } from "@arcgis/core/core/reactiveUtils.js";
 import f from "@arcgis/core/core/Accessor.js";
-import { property as o, subclass as S } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { property as r, subclass as S } from "@arcgis/core/core/accessorSupport/decorators.js";
 import { A as M } from "../../chunks/ArcadeDebuggerPreviewTabsState.js";
 import { r as ee } from "../../chunks/utilities.js";
 import { Range as I, KeyCode as F, KeyMod as O, Uri as te } from "monaco-editor";
 const ie = U`:host{height:100%}calcite-tooltip:not([calcite-hydrated])>*{display:none}.main-action-bar{calcite-action-group{padding-inline-end:var(--calcite-spacing-sm)}calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-sm)}calcite-action-group:last-child{border-inline-end-width:0px}calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}}.bottom-action-bar.is-collapsed{border-bottom:0}.bottom-action-bar{display:flex;.bottom-action-bar__actions{flex:1 1 auto;min-inline-size:0}}`;
-var se = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, _ = (i, e, t, s) => {
-  for (var a = s > 1 ? void 0 : s ? ae(e, t) : e, n = i.length - 1, r; n >= 0; n--)
-    (r = i[n]) && (a = (s ? r(e, t, a) : r(a)) || a);
-  return s && a && se(e, t, a), a;
+var se = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, _ = (i, e, t, s) => {
+  for (var n = s > 1 ? void 0 : s ? ne(e, t) : e, a = i.length - 1, o; a >= 0; a--)
+    (o = i[a]) && (n = (s ? o(e, t, n) : o(n)) || n);
+  return s && n && se(e, t, n), n;
 };
 const K = 100;
 let h = class extends f {
@@ -32,25 +32,25 @@ let h = class extends f {
   }
 };
 _([
-  o()
+  r()
 ], h.prototype, "collectionItems", 2);
 _([
-  o()
+  r()
 ], h.prototype, "errorMessage", 2);
 _([
-  o()
+  r()
 ], h.prototype, "expanded", 2);
 _([
-  o()
+  r()
 ], h.prototype, "requestId", 2);
 _([
-  o()
+  r()
 ], h.prototype, "schemaValue", 2);
 _([
-  o()
+  r()
 ], h.prototype, "status", 2);
 _([
-  o()
+  r()
 ], h.prototype, "visibleChildCount", 2);
 h = _([
   S("ArcadeDebuggerLazyTreeNodeState")
@@ -66,8 +66,8 @@ let k = class extends f {
     const s = this.nodes.get(i);
     if (s)
       return s;
-    const a = new h();
-    return a.expanded = e, this.nodes.set(i, a), e && t && this.loadNode(i, t), a;
+    const n = new h();
+    return n.expanded = e, this.nodes.set(i, n), e && t && this.loadNode(i, t), n;
   }
   setExpanded(i, e, t) {
     const s = this.ensureNode(i, e, t);
@@ -99,13 +99,13 @@ let k = class extends f {
     const s = this.nodes.get(i);
     if (!s || s.status === "loading" || s.status === "loaded")
       return;
-    const a = this.generation, n = s.requestId + 1;
-    s.requestId = n, s.status = "loading", s.errorMessage = "", s.schemaValue = void 0, s.collectionItems = [], e().then((r) => {
+    const n = this.generation, a = s.requestId + 1;
+    s.requestId = a, s.status = "loading", s.errorMessage = "", s.schemaValue = void 0, s.collectionItems = [], e().then((o) => {
       const u = this.nodes.get(i);
-      !u || this.generation !== a || u.requestId !== n || (t(u, r), u.status = "loaded");
+      !u || this.generation !== n || u.requestId !== a || (t(u, o), u.status = "loaded");
     }).catch(() => {
-      const r = this.nodes.get(i);
-      !r || this.generation !== a || r.requestId !== n || (r.status = "error");
+      const o = this.nodes.get(i);
+      !o || this.generation !== n || o.requestId !== a || (o.status = "error");
     });
   }
   destroyNodes() {
@@ -117,10 +117,10 @@ let k = class extends f {
 k = _([
   S("ArcadeDebuggerLazyTreeState")
 ], k);
-var ne = Object.defineProperty, re = Object.getOwnPropertyDescriptor, c = (i, e, t, s) => {
-  for (var a = s > 1 ? void 0 : s ? re(e, t) : e, n = i.length - 1, r; n >= 0; n--)
-    (r = i[n]) && (a = (s ? r(e, t, a) : r(a)) || a);
-  return s && a && ne(e, t, a), a;
+var ae = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, c = (i, e, t, s) => {
+  for (var n = s > 1 ? void 0 : s ? oe(e, t) : e, a = i.length - 1, o; a >= 0; a--)
+    (o = i[a]) && (n = (s ? o(e, t, n) : o(n)) || n);
+  return s && n && ae(e, t, n), n;
 };
 let b = class extends f {
   constructor(i) {
@@ -152,22 +152,22 @@ let b = class extends f {
   }
 };
 c([
-  o()
+  r()
 ], b.prototype, "phase", 2);
 c([
-  o()
+  r()
 ], b.prototype, "mode", 2);
 c([
-  o()
+  r()
 ], b.prototype, "sessionId", 2);
 c([
-  o()
+  r()
 ], b.prototype, "result", 2);
 c([
-  o()
+  r()
 ], b.prototype, "consoleLogs", 2);
 c([
-  o()
+  r()
 ], b.prototype, "hasExecuted", 2);
 b = c([
   S("ArcadeDebuggerExecutionModel")
@@ -191,10 +191,10 @@ let D = class extends f {
   }
 };
 c([
-  o()
+  r()
 ], D.prototype, "editorBreakpoints", 2);
 c([
-  o()
+  r()
 ], D.prototype, "executionBreakpoints", 2);
 D = c([
   S("ArcadeDebuggerSessionModel")
@@ -205,10 +205,10 @@ let E = class extends f {
   }
 };
 c([
-  o()
+  r()
 ], E.prototype, "openedPanel", 2);
 c([
-  o()
+  r()
 ], E.prototype, "showPanel", 2);
 E = c([
   S("ArcadeDebuggerUiModel")
@@ -231,10 +231,10 @@ let $ = class extends f {
   }
 };
 c([
-  o()
+  r()
 ], $.prototype, "pausedState", 2);
 c([
-  o()
+  r()
 ], $.prototype, "lastPausedState", 2);
 $ = c([
   S("ArcadeDebuggerPausedFrameModel")
@@ -407,112 +407,112 @@ let g = class extends f {
   }
 };
 c([
-  o()
+  r()
 ], g.prototype, "execution", 2);
 c([
-  o()
+  r()
 ], g.prototype, "lazyTreeState", 2);
 c([
-  o()
+  r()
 ], g.prototype, "pausedLine", 2);
 c([
-  o()
+  r()
 ], g.prototype, "pausedFrame", 2);
 c([
-  o()
+  r()
 ], g.prototype, "previewTabsState", 2);
 c([
-  o()
+  r()
 ], g.prototype, "session", 2);
 c([
-  o()
+  r()
 ], g.prototype, "ui", 2);
 g = c([
   S("ArcadeDebuggerStore")
 ], g);
-class oe {
+class re {
   #e;
-  #a;
+  #n;
   #t;
-  constructor(e, t = B) {
-    this.#e = e, this.#a = t;
+  constructor(e, t = C) {
+    this.#e = e, this.#n = t;
   }
   start(e) {
     this.cancel({ hidePanel: !1 });
     const t = e.mode === "debug" ? this.#e.startDebug() : this.#e.startRun();
     setTimeout(() => {
-      this.#i(t) && this.#r(e, t);
+      this.#i(t) && this.#o(e, t);
     }, 0);
   }
   cancel({ hidePanel: e = !0 } = {}) {
     this.#t?.abort(), this.#t = void 0, this.#e.isExecuting && this.#e.cancelExecution({ hidePanel: e });
   }
-  async #r(e, t) {
+  async #o(e, t) {
     let s;
     try {
-      const { externalExecutor: a } = e;
-      s = a ? await this.#c({ ...e, externalExecutor: a }, t) : await this.#o(e, t);
-    } catch (a) {
-      const n = a instanceof Error ? a.message : String(a);
-      s = { type: "failure", error: m(n, a) };
+      const { externalExecutor: n } = e;
+      s = n ? await this.#c({ ...e, externalExecutor: n }, t) : await this.#r(e, t);
+    } catch (n) {
+      const a = n instanceof Error ? n.message : String(n);
+      s = { type: "failure", error: m(a, n) };
     }
     this.#d(t, s);
   }
-  async #o(e, t) {
+  async #r(e, t) {
     if (!e.testData)
       return { type: "failure", error: m("Missing test data") };
     const s = await e.editorProfile;
     if (!s)
       return { type: "failure", error: m("Missing editor profile") };
-    const a = await this.#a(s.definition, e.script, e.testData, {
+    const n = await this.#n(s.definition, e.script, e.testData, {
       mode: e.mode,
-      console: (n) => this.#s(t, n),
+      console: (a) => this.#s(t, a),
       breakpoints: e.mode === "debug" ? e.breakpoints : void 0,
-      onDebugPause: e.mode === "debug" ? (n, r) => this.#n(t, n, r) : void 0
+      onDebugPause: e.mode === "debug" ? (a, o) => this.#a(t, a, o) : void 0
     });
-    return e.mode === "debug" ? A(a) ? { type: "failure", error: this.#u(a) } : { type: "debug", value: a } : A(a) ? { type: "legacy-run", result: a } : { type: "failure", error: m("Unexpected debug result") };
+    return e.mode === "debug" ? A(n) ? { type: "failure", error: this.#u(n) } : { type: "debug", value: n } : A(n) ? { type: "legacy-run", result: n } : { type: "failure", error: m("Unexpected debug result") };
   }
   async #c(e, t) {
-    const { externalExecutor: s } = e, a = new AbortController();
-    this.#t = a;
+    const { externalExecutor: s } = e, n = new AbortController();
+    this.#t = n;
     try {
       if (e.mode === "debug") {
-        const r = await s.execute({
+        const o = await s.execute({
           mode: "debug",
           script: e.script,
           console: (u) => this.#s(t, u),
-          signal: a.signal,
+          signal: n.signal,
           breakpoints: e.breakpoints,
-          onDebugPause: (u, x) => this.#n(t, u, x)
+          onDebugPause: (u, x) => this.#a(t, u, x)
         });
-        return { type: "debug", value: r.result, timing: r.timing };
+        return { type: "debug", value: o.result, timing: o.timing };
       }
-      const n = await s.execute({
+      const a = await s.execute({
         mode: "run",
         script: e.script,
-        console: (r) => this.#s(t, r),
-        signal: a.signal
+        console: (o) => this.#s(t, o),
+        signal: n.signal
       });
-      return { type: "run", value: n.result, timing: n.timing };
-    } catch (n) {
-      const r = n instanceof Error ? n.message : String(n);
-      return { type: "failure", error: m(r, n) };
+      return { type: "run", value: a.result, timing: a.timing };
+    } catch (a) {
+      const o = a instanceof Error ? a.message : String(a);
+      return { type: "failure", error: m(o, a) };
     } finally {
-      this.#t === a && (this.#t = void 0);
+      this.#t === n && (this.#t = void 0);
     }
   }
   #s(e, t) {
     this.#i(e) && this.#e.addConsoleLog(t);
   }
-  async #n(e, t, s) {
+  async #a(e, t, s) {
     if (!this.#i(e) || !this.#e.isDebugging)
       return;
-    const a = Promise.withResolvers();
+    const n = Promise.withResolvers();
     return this.#e.pauseDebug({
       line: t.line,
       result: s,
-      continue: a
-    }), await a.promise;
+      continue: n
+    }), await n.promise;
   }
   #d(e, t) {
     if (this.#i(e))
@@ -546,7 +546,7 @@ const ce = {
 };
 class de extends V {
   constructor() {
-    super(...arguments), this._codeEditorElt = T(), this._arcadeAssistantElt = T(), this._componentReadyDefer = Promise.withResolvers(), this._disposables = [], this._editorProfilePromise = Promise.resolve(void 0), this._focusContinueActionOnPause = !1, this._debuggerState = new g(), this._executionCoordinator = new oe(this._debuggerState), this.messages = X(), this._modelId = G(), this._openArcadeHelp = () => {
+    super(...arguments), this._codeEditorElt = T(), this._arcadeAssistantElt = T(), this._componentReadyDefer = Promise.withResolvers(), this._disposables = [], this._editorProfilePromise = Promise.resolve(void 0), this._focusContinueActionOnPause = !1, this._debuggerState = new g(), this._executionCoordinator = new re(this._debuggerState), this.messages = X(), this._modelId = G(), this._openArcadeHelp = () => {
       window.open(W, "Arcade Help");
     }, this._decorations = void 0, this._monacoEditor = Z(H), this._editorOptions = {}, this._toggleSidePanel = (e) => {
       e.currentTarget instanceof HTMLElement && this._setOpenedSidePanel(e.currentTarget.dataset.panelName ?? "none");
@@ -571,7 +571,7 @@ class de extends V {
     }, this._debuggerPausedLineDecoration = void 0, this._preparingArcade = !1, this._arcadeAssistantRemoteState = { shouldRender: !1 }, this._diagnostics = [], this.enableDebugger = !1, this.hideDocumentationActions = !1, this.hideSideBar = !1, this.openedSidePanel = "none", this.script = "", this.sideActionBarExpanded = !1, this.disableAssistant = !1, this.arcgisDiagnosticsChange = R({ bubbles: !1 }), this.arcgisScriptChange = R({ bubbles: !1 });
   }
   static {
-    this.properties = { _apiLibrary: 16, _editorProfile: 16, _preparingArcade: 16, _arcadeAssistantRemoteState: 16, _diagnostics: 16, editorInstance: 32, editorOptions: 0, enableDebugger: 5, hideDocumentationActions: 5, hideSideBar: 5, messageOverrides: 0, openedSidePanel: 3, profile: 0, script: 1, sideActionBarExpanded: 7, snippets: 0, suggestions: 0, testData: 0, customPanels: 0, disableAssistant: 5, arcadeAssistant: 0, externalExecutor: 0 };
+    this.properties = { _apiLibrary: 16, _editorProfile: 16, _preparingArcade: 16, _arcadeAssistantRemoteState: 16, _diagnostics: 16, editorInstance: 32, editorOptions: 0, enableDebugger: 5, hideDocumentationActions: 5, hideSideBar: 5, messageOverrides: 0, openedSidePanel: 3, profile: 0, script: 1, sideActionBarExpanded: 7, snippets: 0, suggestions: 0, testData: 0, customPanels: 0, disableAssistant: 5, arcadeAssistant: 0, externalExecutor: 0, docsConfig: 0 };
   }
   static {
     this.styles = [ie];
@@ -601,21 +601,21 @@ class de extends V {
     if (!e)
       return { type: "error", value: "Missing editor profile", error: null };
     await this._componentReadyDefer.promise;
-    const t = this._codeEditorElt.value?.value, s = await B(e.definition, t, this.testData, { mode: "run" });
+    const t = this._codeEditorElt.value?.value, s = await C(e.definition, t, this.testData, { mode: "run" });
     return A(s) ? s : { type: "error", value: "Unexpected result", error: null };
   }
   async testRun() {
     try {
       const e = this._codeEditorElt.value?.value ?? this.script;
       if (this.externalExecutor) {
-        const { result: n } = await this.externalExecutor.execute({
+        const { result: a } = await this.externalExecutor.execute({
           mode: "run",
           script: e,
           console: () => {
           },
           signal: new AbortController().signal
         });
-        return n;
+        return a;
       }
       const t = this.testData;
       if (!t)
@@ -624,10 +624,10 @@ class de extends V {
       const s = await this._editorProfilePromise;
       if (!s)
         throw new Error("Missing editor profile");
-      const a = await B(s.definition, e, t, { mode: "debug" });
-      if (A(a))
-        throw a.type === "error" && a.error instanceof Error ? a.error : new Error(a.type === "error" ? a.value : "Unexpected Arcade result");
-      return a;
+      const n = await C(s.definition, e, t, { mode: "debug" });
+      if (A(n))
+        throw n.type === "error" && n.error instanceof Error ? n.error : new Error(n.type === "error" ? n.value : "Unexpected Arcade result");
+      return n;
     } catch (e) {
       const t = e instanceof Error ? e.message : String(e);
       return m(t, e);
@@ -675,16 +675,16 @@ class de extends V {
       })), this._canExecute && !this._executeScriptAction && this._addExecuteScriptAction(), this._syncAskAiAction();
       const t = v(() => this._debuggerState.editorBreakpoints, () => {
         this._updateBreakpointsDecorations(), this._updateDebuggerBreakpointContextKey();
-      }, { sync: !0 }), s = v(() => this._debuggerState.debuggerLine, () => this._updateDebuggerPausedLineDecoration(), { sync: !0 }), a = v(() => this._debuggerState.isPaused, () => {
+      }, { sync: !0 }), s = v(() => this._debuggerState.debuggerLine, () => this._updateDebuggerPausedLineDecoration(), { sync: !0 }), n = v(() => this._debuggerState.isPaused, () => {
         !this._debuggerState.isPaused || !this._focusContinueActionOnPause || (this._focusContinueActionOnPause = !1, this.updateComplete.then(() => {
           requestAnimationFrame(() => {
             this.isConnected && this._debuggerState.isPaused && this.el.shadowRoot?.querySelector("#debugger-continue-action")?.setFocus();
           });
         }));
-      }, { sync: !0 }), n = v(() => this._debuggerState.isDebugging, () => {
+      }, { sync: !0 }), a = v(() => this._debuggerState.isDebugging, () => {
         this._debuggerState.isDebugging || (this._focusContinueActionOnPause = !1);
-      }, { sync: !0 }), r = v(() => this._debuggerState.consoleLogs.length, () => this.requestUpdate(), { sync: !0 });
-      this._disposables.push({ dispose: () => t.remove() }, { dispose: () => s.remove() }, { dispose: () => a.remove() }, { dispose: () => n.remove() }, { dispose: () => r.remove() }), this._updateDebuggerBreakpointContextKey();
+      }, { sync: !0 }), o = v(() => this._debuggerState.consoleLogs.length, () => this.requestUpdate(), { sync: !0 });
+      this._disposables.push({ dispose: () => t.remove() }, { dispose: () => s.remove() }, { dispose: () => n.remove() }, { dispose: () => a.remove() }, { dispose: () => o.remove() }), this._updateDebuggerBreakpointContextKey();
       const u = this.editorInstance?.onMouseDown((p) => this._onEditorMouseDown(p));
       u && this._disposables.push(u);
       const x = this.editorInstance?.onDidChangeModelContent((p) => this._onEditorModelContentChange(p));
@@ -706,7 +706,7 @@ class de extends V {
     if (!this.enableDebugger || !this._debuggerState.editorBreakpoints.length || e.isFlush)
       return;
     const t = ee(this._debuggerState.editorBreakpoints, e.changes);
-    t.length === this._debuggerState.editorBreakpoints.length && t.every((s, a) => s === this._debuggerState.editorBreakpoints[a]) || this._debuggerState.setBreakpoints(t);
+    t.length === this._debuggerState.editorBreakpoints.length && t.every((s, n) => s === this._debuggerState.editorBreakpoints[n]) || this._debuggerState.setBreakpoints(t);
   }
   _updateDebuggerPausedLineDecoration() {
     const e = this.editorInstance;
@@ -764,13 +764,13 @@ class de extends V {
     this._debuggerState.setPanel(e);
   }
   async _executeScript(e, t = !1) {
-    const s = this.testData, a = this.externalExecutor;
-    !this._codeEditorElt.value || !s && !a || (this._focusContinueActionOnPause = e === "debug" && t, this._executionCoordinator.start({
+    const s = this.testData, n = this.externalExecutor;
+    !this._codeEditorElt.value || !s && !n || (this._focusContinueActionOnPause = e === "debug" && t, this._executionCoordinator.start({
       mode: e,
       script: this._codeEditorElt.value?.value ?? this.script,
       testData: s,
       editorProfile: this._editorProfilePromise,
-      externalExecutor: a,
+      externalExecutor: n,
       breakpoints: this._debuggerState.debuggerBreakpoints
     }));
   }
@@ -905,8 +905,8 @@ class de extends V {
   renderMainPanel() {
     return d`<arcgis-code-editor slot=editor .editorOptions=${this.editorOptions} .language=${y.languageId} .value=${this.script ?? ""} .modelId=${this._modelId} @arcgisValueChange=${this._onCodeEditorValueChange} ${L(this._codeEditorElt)}></arcgis-code-editor>`;
   }
-  renderAction({ id: e, label: t, icon: s, active: a, panelName: n, iconFlipRtl: r = !1, onClick: u = this._toggleSidePanel }) {
-    return d`<calcite-action id=${e ?? C} .text=${t} .textEnabled=${this.sideActionBarExpanded} .icon=${s} .active=${a} @click=${u} data-panel-name=${n ?? C} .iconFlipRtl=${r}></calcite-action>${!this.sideActionBarExpanded && d`<calcite-tooltip .referenceElement=${e}><span>${t}</span></calcite-tooltip>` || ""}`;
+  renderAction({ id: e, label: t, icon: s, active: n, panelName: a, iconFlipRtl: o = !1, onClick: u = this._toggleSidePanel }) {
+    return d`<calcite-action id=${e ?? B} .text=${t} .textEnabled=${this.sideActionBarExpanded} .icon=${s} .active=${n} @click=${u} data-panel-name=${a ?? B} .iconFlipRtl=${o}></calcite-action>${!this.sideActionBarExpanded && d`<calcite-tooltip .referenceElement=${e}><span>${t}</span></calcite-tooltip>` || ""}`;
   }
   renderSideActionBar() {
     return this.hideSideBar ? null : d`<calcite-action-bar slot=side-action-bar class="side-action-bar" .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><calcite-action-group>${this.renderAction({
@@ -956,7 +956,7 @@ class de extends V {
     return d`<arcgis-language-api-panel slot=side-panel class=${P(e === "api" ? "" : "hidden")} .loading=${this._preparingArcade} .apiLibrary=${this._apiLibrary} .hideDocumentationActions=${this.hideDocumentationActions} @arcgisInternalItemSelected=${this._insertAsSnippet} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none .closed=${e !== "api"}></arcgis-language-api-panel><arcgis-editor-variables slot=side-panel class=${P(e === "variables" ? "" : "hidden")} .loading=${this._preparingArcade} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none .variable=${this._editorProfile} .closed=${e !== "variables"} .messageOverrides=${{
       profileempty: this.messages.profileempty,
       profilevariables: this.messages.profilevariables
-    }}></arcgis-editor-variables>${this.suggestions?.length && d`<arcgis-arcade-suggestions slot=side-panel class=${P(e === "suggestions" ? "" : "hidden")} .closed=${e !== "suggestions"} .suggestions=${this.suggestions} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none></arcgis-arcade-suggestions>` || ""}${t?.shouldRender && d`<arcgis-arcade-coding-assistant slot=side-panel class=${P(e === "arcade-assistant" ? "" : "hidden")} .closed=${e !== "arcade-assistant"} .insertText=${this._insertText.bind(this)} .closePanel=${this._closeSidePanel} .portalUrl=${t.portalUrl} .serviceUrl=${"serviceUrl" in t ? t.serviceUrl : void 0} .helpBase=${t.helpBase} .promptingEnabled=${this._canPromptWithArcadeAssistant()} .feedbackServiceUrl=${t.feedbackServiceUrl} .editorRef=${this.el} .appVersion=${this.arcadeAssistant?.appVersion} .disableQuestionAnswerLogging=${this.arcadeAssistant?.disableQuestionAnswerLogging} .diagnostics=${this._diagnostics} .isDevEnv=${"isDevEnv" in t ? t.isDevEnv : !1} ${L(this._arcadeAssistantElt)}></arcgis-arcade-coding-assistant>` || ""}${this.customPanels?.map((s) => d`<calcite-flow slot=side-panel class=${P(e === s.id ? "" : "hidden")}>${s?.useFlows ? s.renderer?.({
+    }}></arcgis-editor-variables>${this.suggestions?.length && d`<arcgis-arcade-suggestions slot=side-panel class=${P(e === "suggestions" ? "" : "hidden")} .closed=${e !== "suggestions"} .suggestions=${this.suggestions} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none></arcgis-arcade-suggestions>` || ""}${t?.shouldRender && d`<arcgis-arcade-coding-assistant slot=side-panel class=${P(e === "arcade-assistant" ? "" : "hidden")} .closed=${e !== "arcade-assistant"} .insertText=${this._insertText.bind(this)} .closePanel=${this._closeSidePanel} .portalUrl=${t.portalUrl} .serviceUrl=${"serviceUrl" in t ? t.serviceUrl : void 0} .helpBase=${t.helpBase} .promptingEnabled=${this._canPromptWithArcadeAssistant()} .feedbackServiceUrl=${t.feedbackServiceUrl} .editorRef=${this.el} .appVersion=${this.arcadeAssistant?.appVersion} .disableQuestionAnswerLogging=${this.arcadeAssistant?.disableQuestionAnswerLogging} .diagnostics=${this._diagnostics} .isDevEnv=${"isDevEnv" in t ? t.isDevEnv : !1} .docsConfig=${this.docsConfig} ${L(this._arcadeAssistantElt)}></arcgis-arcade-coding-assistant>` || ""}${this.customPanels?.map((s) => d`<calcite-flow slot=side-panel class=${P(e === s.id ? "" : "hidden")}>${s?.useFlows ? s.renderer?.({
       closePanel: this._toggleSidePanel,
       insertText: this._insertText.bind(this),
       closed: e !== s.id,
@@ -979,19 +979,19 @@ class de extends V {
     return d`<arcgis-arcade-results slot=results-panel .openedResultPanel=${e} .loading=${this._debuggerState.isExecuting} .result=${this._debuggerState.resultForLegacyRenderer} .executionTiming=${this._debuggerState.executionTiming} .consoleLogs=${this._debuggerState.consoleLogs} @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange} @arcgisInternalClosePanel=${this._onExecutionPanelClose}></arcgis-arcade-results>`;
   }
   renderBottomExecutionBody() {
-    const { showPanel: e, openedPanel: t, debugResult: s, isExecuting: a } = this._debuggerState;
+    const { showPanel: e, openedPanel: t, debugResult: s, isExecuting: n } = this._debuggerState;
     if (!e)
       return null;
-    const n = t === "debug-console" ? "output" : t;
-    return this.enableDebugger && t === "debug-console" ? d`<arcgis-arcade-debugger-console slot=results-panel .modelId=${this._modelId} .debuggerStore=${this._debuggerState}></arcgis-arcade-debugger-console>` : t === "output" && s ? d`<arcgis-arcade-debugger-output .outputTitle=${this.messages.output} slot=results-panel .debuggerStore=${this._debuggerState} .result=${s}></arcgis-arcade-debugger-output>` : d`<arcgis-arcade-results slot=results-panel class="bottom-results" .openedResultPanel=${n} .loading=${t === "console" && this._debuggerState.isPaused ? !1 : a} .result=${this._debuggerState.resultForLegacyRenderer} .executionTiming=${this._debuggerState.executionTiming} .consoleLogs=${this._debuggerState.consoleLogs} hide-header @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange}></arcgis-arcade-results>`;
+    const a = t === "debug-console" ? "output" : t;
+    return this.enableDebugger && t === "debug-console" ? d`<arcgis-arcade-debugger-console slot=results-panel .modelId=${this._modelId} .debuggerStore=${this._debuggerState}></arcgis-arcade-debugger-console>` : t === "output" && s ? d`<arcgis-arcade-debugger-output slot=results-panel .debuggerStore=${this._debuggerState} .result=${s}></arcgis-arcade-debugger-output>` : d`<arcgis-arcade-results slot=results-panel class="bottom-results" .openedResultPanel=${a} .loading=${t === "console" && this._debuggerState.isPaused ? !1 : n} .result=${this._debuggerState.resultForLegacyRenderer} .executionTiming=${this._debuggerState.executionTiming} .consoleLogs=${this._debuggerState.consoleLogs} hide-header @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange}></arcgis-arcade-results>`;
   }
   renderBottomActionBar() {
     if (!this._usesBottomExecutionDrawer)
       return null;
-    const { showPanel: e, hasExecuted: t, openedPanel: s, isDebugging: a, isPaused: n, isExecuting: r } = this._debuggerState, u = this.messages.continue ?? "Continue", x = this.messages.reset ?? "Reset", p = this.messages.stop ?? "Stop";
-    return d`<div slot=bottom-action-bar class=${`main-action-bar bottom-action-bar ${e ? "" : "is-collapsed"}`}><calcite-action-bar class="bottom-action-bar__actions" layout=horizontal scale=s expand-toggle-disabled expanded><calcite-action-group scale=s>${this.enableDebugger && a ? d`<calcite-action id=debugger-continue-action .text=${u} icon=forward scale=s .disabled=${!n} @click=${this._continueDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-continue-action placement=top><span>${u}</span></calcite-tooltip><calcite-action id=debugger-reset-action .text=${x} icon=reset scale=s @click=${this._resetDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-reset-action placement=top><span>${x}</span></calcite-tooltip><calcite-action id=debugger-stop-action .text=${p} icon=circle-stop scale=s @click=${this._stopDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-stop-action placement=top><span>${p}</span></calcite-tooltip>` : d`<calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade || r} @click=${() => {
+    const { showPanel: e, hasExecuted: t, openedPanel: s, isDebugging: n, isPaused: a, isExecuting: o } = this._debuggerState, u = this.messages.continue ?? "Continue", x = this.messages.reset ?? "Reset", p = this.messages.stop ?? "Stop";
+    return d`<div slot=bottom-action-bar class=${`main-action-bar bottom-action-bar ${e ? "" : "is-collapsed"}`}><calcite-action-bar class="bottom-action-bar__actions" layout=horizontal scale=s expand-toggle-disabled expanded><calcite-action-group scale=s>${this.enableDebugger && n ? d`<calcite-action id=debugger-continue-action .text=${u} icon=forward scale=s .disabled=${!a} @click=${this._continueDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-continue-action placement=top><span>${u}</span></calcite-tooltip><calcite-action id=debugger-reset-action .text=${x} icon=reset scale=s @click=${this._resetDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-reset-action placement=top><span>${x}</span></calcite-tooltip><calcite-action id=debugger-stop-action .text=${p} icon=circle-stop scale=s @click=${this._stopDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-stop-action placement=top><span>${p}</span></calcite-tooltip>` : d`<calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade || o} @click=${() => {
       this._executeScript("run").catch(l(this));
-    }}></calcite-action>${this.enableDebugger && d`<calcite-action .disabled=${this._debuggerState.editorBreakpoints.length === 0} .text=${this.messages.runanddebug ?? "Run and Debug"} text-enabled icon=debug-script scale=s .loading=${this._preparingArcade || r} @click=${this._runAndDebug}></calcite-action>` || ""}`}</calcite-action-group>${t ? d`<calcite-action-group scale=s><calcite-action .active=${s === "output" && e} .text=${this.messages.output ?? "Output"} text-enabled scale=s icon=list-show-all icon-flip-rtl @click=${() => this._setExecutionPanel("output")}></calcite-action><calcite-action .active=${s === "console" && e} .text=${this.messages.console ?? "Console"} text-enabled scale=s icon=console icon-flip-rtl @click=${() => this._setExecutionPanel("console")}></calcite-action><calcite-action .active=${s === "log" && e} .text=${this.messages.log ?? "Log"} text-enabled scale=s icon=list icon-flip-rtl @click=${() => this._setExecutionPanel("log")} .disabled=${this.enableDebugger && this._debuggerState.mode === "debug"}></calcite-action>${this.enableDebugger && d`<calcite-action .active=${s === "debug-console" && e} .text=${this.messages.debugconsole ?? "Debug console"} text-enabled scale=s icon=debug .disabled=${this._debuggerState.mode !== "debug"} @click=${() => this._setExecutionPanel("debug-console")}></calcite-action>` || ""}</calcite-action-group>` : null}</calcite-action-bar>${e ? d`<calcite-action .text=${this.messages.collapse ?? "Collapse"} scale=s icon=chevrons-down icon-flip-rtl @click=${this._onExecutionPanelClose} slot=actions-end></calcite-action>` : null}</div>`;
+    }}></calcite-action>${this.enableDebugger && d`<calcite-action .disabled=${this._debuggerState.editorBreakpoints.length === 0} .text=${this.messages.runanddebug ?? "Run and Debug"} text-enabled icon=debug-script scale=s .loading=${this._preparingArcade || o} @click=${this._runAndDebug}></calcite-action>` || ""}`}</calcite-action-group>${t ? d`<calcite-action-group scale=s><calcite-action .active=${s === "output" && e} .text=${this.messages.output ?? "Output"} text-enabled scale=s icon=list-show-all icon-flip-rtl @click=${() => this._setExecutionPanel("output")}></calcite-action><calcite-action .active=${s === "console" && e} .text=${this.messages.console ?? "Console"} text-enabled scale=s icon=console icon-flip-rtl @click=${() => this._setExecutionPanel("console")}></calcite-action><calcite-action .active=${s === "log" && e} .text=${this.messages.log ?? "Log"} text-enabled scale=s icon=list icon-flip-rtl @click=${() => this._setExecutionPanel("log")} .disabled=${this.enableDebugger && this._debuggerState.mode === "debug"}></calcite-action>${this.enableDebugger && d`<calcite-action .active=${s === "debug-console" && e} .text=${this.messages.debugconsole ?? "Debug console"} text-enabled scale=s icon=debug .disabled=${this._debuggerState.mode !== "debug"} @click=${() => this._setExecutionPanel("debug-console")}></calcite-action>` || ""}</calcite-action-group>` : null}</calcite-action-bar>${e ? d`<calcite-action .text=${this.messages.collapse ?? "Collapse"} scale=s icon=chevrons-down icon-flip-rtl @click=${this._onExecutionPanelClose} slot=actions-end></calcite-action>` : null}</div>`;
   }
   render() {
     return d`<arcgis-code-editor-shell>${this.renderMainActionBar()}${this.renderMainPanel()}${this.renderBottomActionBar()}${this.renderResultsPanel()}${this.renderSidePanel()}${this.renderSideActionBar()}</arcgis-code-editor-shell>`;