@arcgis/coding-components 5.1.0-next.87 → 5.1.0-next.89

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

@@ -1,91 +1,504 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { g as I, c as D } from "../../chunks/runtime.js";
-import { css as C, html as i, nothing as b } from "lit";
-import { KeyCode as B } from "monaco-editor";
-import "monaco-editor/esm/vs/editor/standalone/browser/standaloneServices.js";
-import "monaco-editor/esm/vs/editor/standalone/common/standaloneTheme.js";
-import "monaco-editor/esm/vs/platform/hover/browser/hover.js";
-import "monaco-editor/esm/vs/editor/common/languages/supports/tokenization.js";
-import "monaco-editor/esm/vs/base/browser/dom.js";
-import "monaco-editor/esm/vs/editor/browser/editorDom.js";
-import "monaco-editor/esm/vs/editor/browser/controller/mouseTarget.js";
-import { LitElement as k, createEvent as v, safeClassMap as l } from "@arcgis/lumina";
-import { generateGuid as M } from "@arcgis/toolkit/string";
-import { D as L, e as x } from "../../chunks/arcade-executor.js";
-import { s as T, g as U } from "../../chunks/arcade-service-accessors.js";
-import { b as c } from "../../chunks/arcade-defaults.js";
-import { u as F } from "../../chunks/useT9n.js";
-import { createRef as O, ref as N } from "lit/directives/ref.js";
-import R from "@arcgis/core/identity/IdentityManager.js";
-import { log as H, rethrowError as r } from "@arcgis/toolkit/log";
-const j = C`: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 calcite-action:not(:first-child){padding-inline-start: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)}}`, E = "https://services6.arcgis.com/HXHga6CfMLMBOlBX/ArcGIS/rest/services/survey123_6e349a50b4504ca6b6107216d568db5f_form/FeatureServer/0", a = (s, e) => H(s, "Arcade Assistant", e), z = (s) => {
-  const { aiAssistantsEnabled: e } = s;
-  return e === void 0 ? (a("warn", "`areAiAssistantsEnabled` is not defined in the organizations settings."), !1) : e;
-}, V = (s) => !(!s || !("id" in s)), G = async (s) => (await R.getCredential(s, { oAuthPopupConfirmation: !1 })).token, q = async (s) => {
+import { g as q, c as W } from "../../chunks/runtime.js";
+import { css as Q, html as l, nothing as F } from "lit";
+import { i as X } from "../../chunks/monaco-importer.js";
+import { LitElement as K, createEvent as O, safeClassMap as x } from "@arcgis/lumina";
+import { generateGuid as Y } from "@arcgis/toolkit/string";
+import { D as J, e as U, i as L } from "../../chunks/arcade-executor.js";
+import { s as Z, a as ee } from "../../chunks/arcade-service-accessors.js";
+import { b as P } from "../../chunks/arcade-defaults.js";
+import { u as te } from "../../chunks/useT9n.js";
+import { createRef as se, ref as ie } from "lit/directives/ref.js";
+import { load as ae } from "@arcgis/lumina/controllers";
+import j from "@arcgis/core/identity/IdentityManager.js";
+import { log as ne, rethrowError as g } from "@arcgis/toolkit/log";
+import { watch as T } from "@arcgis/core/core/reactiveUtils.js";
+import f from "@arcgis/core/core/Accessor.js";
+import { property as o, subclass as m } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { A as N } from "../../chunks/ArcadeDebuggerPreviewTabsState.js";
+import { r as oe } from "../../chunks/utilities.js";
+import { Range as z, KeyCode as re } from "monaco-editor";
+const ce = Q`: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 calcite-action:not(:first-child){padding-inline-start: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}`, H = "https://services6.arcgis.com/HXHga6CfMLMBOlBX/ArcGIS/rest/services/survey123_6e349a50b4504ca6b6107216d568db5f_form/FeatureServer/0", p = (t, e) => ne(t, "Arcade Assistant", e), le = (t) => {
+  const { aiAssistantsEnabled: e } = t;
+  return e === void 0 ? (p("warn", "`areAiAssistantsEnabled` is not defined in the organizations settings."), !1) : e;
+}, de = (t) => !(!t || !("id" in t)), ue = async (t) => (await j.getCredential(t, { oAuthPopupConfirmation: !1 })).token, he = async (t) => {
   try {
-    return !!await R.checkSignInStatus(s);
+    return !!await j.checkSignInStatus(t);
   } catch {
-    return a("warn", "User is not signed in."), !1;
+    return p("warn", "User is not signed in."), !1;
   }
 };
-async function Q({
-  portalUrl: s,
+async function ge({
+  portalUrl: t,
   profile: e
 }) {
-  if (!V(e))
-    return a("warn", "Addon initialization failed. Reason: unsupported profile."), { shouldRender: !1 };
-  const t = s.replace(/\/sharing\/rest(\/.*)?$/iu, "").replace(/\/$/u, "");
-  if (!await q(t))
+  if (!de(e))
+    return p("warn", "Addon initialization failed. Reason: unsupported profile."), { shouldRender: !1 };
+  const s = t.replace(/\/sharing\/rest(\/.*)?$/iu, "").replace(/\/$/u, "");
+  if (!await he(s))
     return { shouldRender: !1 };
-  const n = await G(s), p = `${t}/sharing/rest/portals/self?f=json&token=${n}`, u = `${t}/sharing/rest/portals/self/settings?f=json&token=${n}`, g = `${t}/sharing/rest/portals/self/signinSettings?f=json&token=${n}`, w = await Promise.allSettled([
-    fetch(p, { credentials: "include" }).then((o) => o.json()),
-    fetch(u, { credentials: "include" }).then((o) => o.json()),
-    fetch(g, { credentials: "include" }).then((o) => o.json())
-  ]), [f, _, m] = w, h = f.status === "fulfilled" ? f.value : (a("warn", `Failed to fetch selfUrl. Reason: ${f.reason}.`), {}), $ = _.status === "fulfilled" ? _.value : (a("warn", `Failed to fetch settingsUrl. Reason: ${_.reason}.`), {}), y = m.status === "fulfilled" ? m.value : (a("warn", `Failed to fetch signinSettingsUrl. Reason: ${m.reason}.`), {});
-  if (h.isPortal)
+  const a = await ue(t), r = `${s}/sharing/rest/portals/self?f=json&token=${a}`, n = `${s}/sharing/rest/portals/self/settings?f=json&token=${a}`, d = `${s}/sharing/rest/portals/self/signinSettings?f=json&token=${a}`, w = await Promise.allSettled([
+    fetch(r, { credentials: "include" }).then((S) => S.json()),
+    fetch(n, { credentials: "include" }).then((S) => S.json()),
+    fetch(d, { credentials: "include" }).then((S) => S.json())
+  ]), [E, R, C] = w, A = E.status === "fulfilled" ? E.value : (p("warn", `Failed to fetch selfUrl. Reason: ${E.reason}.`), {}), M = R.status === "fulfilled" ? R.value : (p("warn", `Failed to fetch settingsUrl. Reason: ${R.reason}.`), {}), G = C.status === "fulfilled" ? C.value : (p("warn", `Failed to fetch signinSettingsUrl. Reason: ${C.reason}.`), {});
+  if (A.isPortal)
     return { shouldRender: !1 };
-  const S = h.helpBase || "";
-  if (!$)
-    return a("warn", "Settings response is not available."), { shouldRender: !1 };
-  let A = z($);
-  y.blockBetaApps === !0 && (a(
+  const k = A.helpBase || "";
+  if (!M)
+    return p("warn", "Settings response is not available."), { shouldRender: !1 };
+  let I = le(M);
+  G.blockBetaApps === !0 && (p(
     "warn",
     "Arcade Assistant is blocked by the organization settings. To enable it, do not block beta apps in the organization settings."
-  ), A = !1), h?.user?.privileges?.includes("portal:user:useAIAssistants") || (a("warn", "User does not have the required privileges to use AI Assistants."), A = !1);
-  const P = h?.helperServices?.aiAssistantServices?.url;
-  return P ? {
+  ), I = !1), A?.user?.privileges?.includes("portal:user:useAIAssistants") || (p("warn", "User does not have the required privileges to use AI Assistants."), I = !1);
+  const B = A?.helperServices?.aiAssistantServices?.url;
+  return B ? {
     shouldRender: !0,
-    serviceUrl: P,
-    helpBase: S,
-    assistantsEnabled: A,
-    feedbackServiceUrl: E
+    serviceUrl: B,
+    helpBase: k,
+    assistantsEnabled: I,
+    feedbackServiceUrl: H
   } : {
     shouldRender: !0,
     assistantsEnabled: !1,
-    helpBase: S,
-    feedbackServiceUrl: E
+    helpBase: k,
+    feedbackServiceUrl: H
   };
 }
-class X extends k {
+var pe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, _ = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? be(e, s) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (i ? n(e, s, a) : n(a)) || a);
+  return i && a && pe(e, s, a), a;
+};
+const V = 100;
+let u = class extends f {
+  constructor(t) {
+    super(t), this.collectionItems = [], this.errorMessage = "", this.expanded = !1, this.requestId = 0, this.status = "idle", this.visibleChildCount = V;
+  }
+};
+_([
+  o()
+], u.prototype, "collectionItems", 2);
+_([
+  o()
+], u.prototype, "errorMessage", 2);
+_([
+  o()
+], u.prototype, "expanded", 2);
+_([
+  o()
+], u.prototype, "requestId", 2);
+_([
+  o()
+], u.prototype, "schemaValue", 2);
+_([
+  o()
+], u.prototype, "status", 2);
+_([
+  o()
+], u.prototype, "visibleChildCount", 2);
+u = _([
+  m("ArcadeDebuggerLazyTreeNodeState")
+], u);
+let D = class extends f {
+  constructor(t) {
+    super(t), this.generation = 0, this.nodes = /* @__PURE__ */ new Map();
+  }
+  reset() {
+    this.generation += 1, this.destroyNodes();
+  }
+  ensureNode(t, e = !1, s) {
+    const i = this.nodes.get(t);
+    if (i)
+      return i;
+    const a = new u();
+    return a.expanded = e, this.nodes.set(t, a), e && s && this.loadNode(t, s), a;
+  }
+  setExpanded(t, e, s) {
+    const i = this.ensureNode(t, e, s);
+    if (i.expanded === e) {
+      e && s && this.loadNode(t, s);
+      return;
+    }
+    i.expanded = e, e && s && this.loadNode(t, s);
+  }
+  showMore(t, e) {
+    const s = this.ensureNode(t);
+    s.visibleChildCount >= e || (s.visibleChildCount = Math.min(e, s.visibleChildCount + V));
+  }
+  loadNode(t, e) {
+    switch (e.kind) {
+      case "collection":
+        this.runLoad(t, e.load, (s, i) => {
+          s.collectionItems = i;
+        });
+        return;
+      case "schema":
+        this.runLoad(t, e.load, (s, i) => {
+          s.schemaValue = i;
+        });
+        return;
+    }
+  }
+  runLoad(t, e, s) {
+    const i = this.nodes.get(t);
+    if (!i || i.status === "loading" || i.status === "loaded")
+      return;
+    const a = this.generation, r = i.requestId + 1;
+    i.requestId = r, i.status = "loading", i.errorMessage = "", i.schemaValue = void 0, i.collectionItems = [], e().then((n) => {
+      const d = this.nodes.get(t);
+      !d || this.generation !== a || d.requestId !== r || (s(d, n), d.status = "loaded");
+    }).catch(() => {
+      const n = this.nodes.get(t);
+      !n || this.generation !== a || n.requestId !== r || (n.status = "error");
+    });
+  }
+  destroyNodes() {
+    for (const t of this.nodes.values())
+      t.destroy();
+    this.nodes.clear();
+  }
+};
+D = _([
+  m("ArcadeDebuggerLazyTreeState")
+], D);
+var _e = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, c = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? fe(e, s) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (i ? n(e, s, a) : n(a)) || a);
+  return i && a && _e(e, s, a), a;
+};
+let b = class extends f {
+  constructor(t) {
+    super(t), this.phase = "idle", this.sessionId = 0, this.consoleLogs = [], this.hasExecuted = !1;
+  }
+  get isExecuting() {
+    return this.phase === "running" || this.phase === "debug-running" || this.phase === "debug-paused";
+  }
+  get isDebugging() {
+    return this.phase === "debug-running" || this.phase === "debug-paused";
+  }
+  get isPaused() {
+    return this.phase === "debug-paused";
+  }
+  get runResult() {
+    return this.result?.resultType === "run" ? this.result.result : void 0;
+  }
+  get debugResult() {
+    return this.result?.resultType === "debug" ? this.result.result : void 0;
+  }
+  addConsoleLog(t) {
+    this.consoleLogs = [...this.consoleLogs, t];
+  }
+};
+c([
+  o()
+], b.prototype, "phase", 2);
+c([
+  o()
+], b.prototype, "mode", 2);
+c([
+  o()
+], b.prototype, "sessionId", 2);
+c([
+  o()
+], b.prototype, "result", 2);
+c([
+  o()
+], b.prototype, "consoleLogs", 2);
+c([
+  o()
+], b.prototype, "hasExecuted", 2);
+b = c([
+  m("ArcadeDebuggerExecutionModel")
+], b);
+let y = class extends f {
+  constructor(t) {
+    super(t), this.breakpoints = [];
+  }
+  setBreakpoints(t) {
+    this.breakpoints = Array.from(new Set(t)).sort((e, s) => e - s);
+  }
+  toggleBreakpoint(t) {
+    const e = new Set(this.breakpoints);
+    e.has(t) ? e.delete(t) : e.add(t), this.setBreakpoints(e);
+  }
+  clearBreakpoints() {
+    this.breakpoints = [];
+  }
+};
+c([
+  o()
+], y.prototype, "breakpoints", 2);
+y = c([
+  m("ArcadeDebuggerSessionModel")
+], y);
+let v = class extends f {
+  constructor(t) {
+    super(t), this.openedPanel = "output", this.showPanel = !1;
+  }
+};
+c([
+  o()
+], v.prototype, "openedPanel", 2);
+c([
+  o()
+], v.prototype, "showPanel", 2);
+v = c([
+  m("ArcadeDebuggerUiModel")
+], v);
+let $ = class extends f {
+  constructor(t) {
+    super(t);
+  }
+  get line() {
+    return this.pausedState?.line;
+  }
+  clearPausedState() {
+    this.lastPausedState = this.pausedState, this.pausedState = void 0;
+  }
+  reset() {
+    this.pausedState = void 0, this.lastPausedState = void 0;
+  }
+  setPausedState(t) {
+    this.pausedState = t, this.lastPausedState = t;
+  }
+};
+c([
+  o()
+], $.prototype, "pausedState", 2);
+c([
+  o()
+], $.prototype, "lastPausedState", 2);
+$ = c([
+  m("ArcadeDebuggerPausedFrameModel")
+], $);
+let h = class extends f {
+  constructor(t) {
+    super(t), this.execution = new b(), this.lazyTreeState = new D(), this.pausedFrame = new $(), this.previewTabsState = new N(), this.session = new y(), this.ui = new v();
+  }
+  get breakpoints() {
+    return this.session.breakpoints;
+  }
+  get debuggerBreakpoints() {
+    return this.session.breakpoints.map((t) => ({ line: t }));
+  }
+  get consoleLogs() {
+    return this.execution.consoleLogs;
+  }
+  get debug() {
+    if (!(!this.pausedFrame.pausedState && !this.pausedFrame.lastPausedState))
+      return {
+        pausedState: this.pausedFrame.pausedState,
+        lastPausedState: this.pausedFrame.lastPausedState
+      };
+  }
+  get debugResult() {
+    return this.execution.debugResult;
+  }
+  get debuggerLine() {
+    return this.pausedFrame.pausedState?.line;
+  }
+  get executionState() {
+    return this.pausedFrame.pausedState;
+  }
+  get hasExecuted() {
+    return this.execution.hasExecuted;
+  }
+  get isDebugging() {
+    return this.execution.isDebugging;
+  }
+  get isExecuting() {
+    return this.execution.isExecuting;
+  }
+  get isPaused() {
+    return this.execution.isPaused;
+  }
+  get mode() {
+    return this.execution.mode;
+  }
+  get openedPanel() {
+    return this.ui.openedPanel;
+  }
+  get outputRenderer() {
+    if (this.execution.result)
+      return this.execution.result.resultType === "debug" ? "debugger" : "legacy";
+  }
+  get phase() {
+    return this.execution.phase;
+  }
+  get result() {
+    return this.execution.result;
+  }
+  get runResult() {
+    return this.execution.runResult;
+  }
+  get sessionId() {
+    return this.execution.sessionId;
+  }
+  get showPanel() {
+    return this.ui.showPanel;
+  }
+  addConsoleLog(t) {
+    this.execution.addConsoleLog(t);
+  }
+  clearBreakpoints() {
+    this.session.clearBreakpoints();
+  }
+  clearForMissingTestData() {
+    this.stopDebug({ hidePanel: !0 }), this.execution.hasExecuted = !1, this.execution.result = void 0;
+  }
+  closePanel() {
+    this.ui.showPanel = !1;
+  }
+  completeDebug(t) {
+    this.execution.mode = "debug", this.execution.result = { resultType: "debug", result: t }, this.execution.phase = "completed", this.ui.openedPanel = "output", this.pausedFrame.reset(), this.resetTransientDebuggerState();
+  }
+  completeRun(t) {
+    this.execution.mode = "run", this.execution.result = { resultType: "run", result: t }, this.execution.phase = "completed", this.pausedFrame.reset(), this.resetTransientDebuggerState();
+  }
+  continueDebug() {
+    const t = this.pausedFrame.pausedState?.continue;
+    t && (this.execution.phase = "debug-running", this.pausedFrame.clearPausedState(), t.resolve());
+  }
+  disableDebugger() {
+    this.stopDebug({ hidePanel: !0 }), this.clearBreakpoints();
+  }
+  fail(t) {
+    this.completeRun(t);
+  }
+  pauseDebug(t) {
+    const e = this.pausedFrame.pausedState ?? this.pausedFrame.lastPausedState;
+    this.syncPausedState(e, t), this.pausedFrame.setPausedState(t), this.execution.phase = "debug-paused";
+  }
+  reset() {
+    this.execution.phase = "idle", this.execution.mode = void 0, this.execution.result = void 0, this.execution.consoleLogs = [], this.execution.hasExecuted = !1, this.execution.sessionId = 0, this.ui.openedPanel = "output", this.ui.showPanel = !1, this.pausedFrame.reset(), this.session.clearBreakpoints(), this.replaceTransientDebuggerState();
+  }
+  resetDebug() {
+    this.stopDebug({ hidePanel: !1 }), this.execution.result = void 0, this.execution.consoleLogs = [], this.ui.openedPanel = "debug-console";
+  }
+  disconnect() {
+    this.stopDebug({ hidePanel: !0 });
+  }
+  setBreakpoints(t) {
+    this.session.setBreakpoints(t);
+  }
+  setPanel(t) {
+    this.execution.hasExecuted && (this.ui.openedPanel = t, this.ui.showPanel = !0);
+  }
+  startDebug() {
+    return this.execution.mode = "debug", this.execution.phase = "debug-running", this.execution.hasExecuted = !0, this.execution.result = void 0, this.execution.consoleLogs = [], this.ui.openedPanel = "debug-console", this.ui.showPanel = !0, this.execution.sessionId += 1, this.pausedFrame.reset(), this.replaceTransientDebuggerState(), this.execution.sessionId;
+  }
+  startRun() {
+    return this.execution.mode = "run", this.execution.phase = "running", this.execution.hasExecuted = !0, this.execution.result = void 0, this.execution.consoleLogs = [], this.ui.openedPanel = "output", this.ui.showPanel = !0, this.execution.sessionId += 1, this.pausedFrame.reset(), this.replaceTransientDebuggerState(), this.execution.sessionId;
+  }
+  stopDebug({ hidePanel: t = !0, invalidateSession: e = !0 } = {}) {
+    const s = this.pausedFrame.pausedState?.continue;
+    e && (this.execution.sessionId += 1), this.execution.phase = this.execution.hasExecuted ? "completed" : "idle", this.pausedFrame.reset(), this.resetTransientDebuggerState(), t && (this.ui.showPanel = !1), this.ui.openedPanel === "debug-console" && (this.ui.openedPanel = "output"), s?.resolve();
+  }
+  /**
+   * Resets transient debugger state (paused line, lazy tree state, preview tabs state).
+   * If the paused state has changed, also invalidates all preview tabs to ensure they are reloaded when next opened.
+   */
+  syncPausedState(t, e) {
+    this.lazyTreeState.reset(), t && e && t !== e && this.previewTabsState.invalidateAll(), this.pausedLine = e?.line;
+  }
+  toggleBreakpoint(t) {
+    this.session.toggleBreakpoint(t);
+  }
+  togglePanel(t) {
+    if (this.execution.hasExecuted) {
+      if (t == null) {
+        this.ui.showPanel = !this.ui.showPanel;
+        return;
+      }
+      if (this.ui.openedPanel === t && this.ui.showPanel) {
+        this.ui.showPanel = !1;
+        return;
+      }
+      this.setPanel(t);
+    }
+  }
+  resetTransientDebuggerState() {
+    this.pausedLine = void 0, this.lazyTreeState.reset(), this.previewTabsState.clear();
+  }
+  replaceTransientDebuggerState() {
+    this.pausedLine = void 0, this.lazyTreeState = new D(), this.previewTabsState = new N();
+  }
+};
+c([
+  o()
+], h.prototype, "execution", 2);
+c([
+  o()
+], h.prototype, "lazyTreeState", 2);
+c([
+  o()
+], h.prototype, "pausedLine", 2);
+c([
+  o()
+], h.prototype, "pausedFrame", 2);
+c([
+  o()
+], h.prototype, "previewTabsState", 2);
+c([
+  o()
+], h.prototype, "session", 2);
+c([
+  o()
+], h.prototype, "ui", 2);
+h = c([
+  m("ArcadeDebuggerStore")
+], h);
+const me = {
+  glyphMargin: !0,
+  lineNumbersMinChars: 1
+};
+class Se extends K {
   constructor() {
-    super(...arguments), this._codeEditorElt = O(), this._componentReadyDefer = Promise.withResolvers(), this._disposables = [], this._editorProfilePromise = Promise.resolve(void 0), this.messages = F(), this._modelId = M(), this._openArcadeHelp = () => {
-      window.open(L, "Arcade Help");
-    }, this._toggleSidePanel = (e) => {
-      if (!e.target)
+    super(...arguments), this._codeEditorElt = se(), this._componentReadyDefer = Promise.withResolvers(), this._disposables = [], this._editorProfilePromise = Promise.resolve(void 0), this._debuggerState = new h(), this.messages = te(), this._modelId = Y(), this._openArcadeHelp = () => {
+      window.open(J, "Arcade Help");
+    }, this._decorations = void 0, this._monacoEditor = ae(X), this._editorOptions = {}, this._toggleSidePanel = (e) => {
+      e.currentTarget instanceof HTMLElement && this._setOpenedSidePanel(e.currentTarget.dataset.panelName ?? "none");
+    }, this._closeSidePanel = () => {
+      this._setOpenedSidePanel("none");
+    }, this._updateBreakpointsDecorations = () => {
+      const e = this.editorInstance;
+      if (!e)
         return;
-      const t = e.target?.dataset.panelName ?? "none";
-      this.openedSidePanel = t === this.openedSidePanel ? "none" : t, this.openedSidePanel === "none" && this._codeEditorElt.value?.setFocus().catch(r(this));
-    }, this._consoleLogs = [], this._executingScript = !1, this._preparingArcade = !1, this._resultPanel = "output", this._showExecutionPanel = !1, this._arcadeAssistantRemoteState = { shouldRender: !1 }, this.hideDocumentationActions = !1, this.hideSideBar = !1, this.openedSidePanel = "none", this.script = "", this.sideActionBarExpanded = !1, this.arcgisDiagnosticsChange = v({ bubbles: !1 }), this.arcgisScriptChange = v({ bubbles: !1 });
+      const s = this._debuggerState.breakpoints.map((i) => ({
+        range: new z(i, 1, i, 1),
+        options: {
+          isWholeLine: !0,
+          glyphMarginClassName: "arcgis-code-editor__breakpoint-glyph"
+        }
+      }));
+      this._decorations?.clear(), this._decorations = e.createDecorationsCollection(s);
+    }, this._clearDebuggerDecorations = () => {
+      this._decorations?.clear(), this._decorations = void 0, this._debuggerPausedLineDecoration?.clear(), this._debuggerPausedLineDecoration = void 0;
+    }, this._debuggerPausedLineDecoration = void 0, this._preparingArcade = !1, this._arcadeAssistantRemoteState = { shouldRender: !1 }, this.enableDebugger = !1, this.hideDocumentationActions = !1, this.hideSideBar = !1, this.openedSidePanel = "none", this.script = "", this.sideActionBarExpanded = !1, this.arcgisDiagnosticsChange = O({ bubbles: !1 }), this.arcgisScriptChange = O({ bubbles: !1 });
   }
   static {
-    this.properties = { _apiLibrary: 16, _consoleLogs: 16, _editorProfile: 16, _executingScript: 16, _executionResult: 16, _preparingArcade: 16, _resultPanel: 16, _showExecutionPanel: 16, _arcadeAssistantRemoteState: 16, editorInstance: 32, editorOptions: 0, hideDocumentationActions: 5, hideSideBar: 5, messageOverrides: 0, openedSidePanel: 3, profile: 0, script: 1, sideActionBarExpanded: 7, snippets: 0, suggestions: 0, testData: 0, customPanels: 0, arcadeAssistant: 0 };
+    this.properties = { _apiLibrary: 16, _editorProfile: 16, _preparingArcade: 16, _arcadeAssistantRemoteState: 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, arcadeAssistant: 0 };
   }
   static {
-    this.styles = [j];
+    this.styles = [ce];
+  }
+  get _usesBottomExecutionDrawer() {
+    return this.enableDebugger && !!this.testData;
   }
   get editorInstance() {
     return this._codeEditorElt.value?.editorInstance;
   }
+  get editorOptions() {
+    return {
+      ...me,
+      ...this._editorOptions
+    };
+  }
+  set editorOptions(e) {
+    this._editorOptions = e ?? {};
+  }
   async getTestResult() {
     if (!this.testData)
       return { type: "error", value: "Missing test data", error: null };
@@ -93,43 +506,120 @@ class X extends k {
     if (!e)
       return { type: "error", value: "Missing editor profile", error: null };
     await this._componentReadyDefer.promise;
-    const t = this._codeEditorElt.value?.value;
-    return await x(e.definition, t, this.testData);
+    const s = this._codeEditorElt.value?.value, i = await U(e.definition, s, this.testData, { mode: "run" });
+    return L(i) ? i : { type: "error", value: "Unexpected debug result", error: null };
   }
   async setFocus() {
     await this._componentReadyDefer.promise, await this._codeEditorElt.value?.setFocus();
   }
   async load() {
-    const e = I("./assets");
-    T(e), await this._updateDataModelDeps(), await this._updateArcadeAssistantRemoteState();
+    const e = q("./assets");
+    Z(e), await this._updateDataModelDeps(), await this._updateArcadeAssistantRemoteState(), this.manager.onLifecycle(() => (this.hasUpdated && this._connectMonacoCustomizations().catch(g(this)), () => {
+      for (; this._disposables.length; )
+        this._disposables.pop()?.dispose();
+      this._connectMonacoCustomizationsPromise = void 0, this._executeScriptAction = void 0, this._clearDebuggerDecorations(), this._debuggerState.disconnect();
+    }));
   }
   willUpdate(e) {
-    (e.has("messages") || e.has("profile")) && this._updateDataModelDeps(), e.has("testData") && this._testDataChanged(), e.has("snippets") && c.updateApiContextForModel(this._modelId, {
+    (e.has("messages") || e.has("profile")) && this._updateDataModelDeps(), e.has("testData") && this._testDataChanged(), e.has("enableDebugger") && !this.enableDebugger && this._debuggerState.disableDebugger(), e.has("snippets") && P.updateApiContextForModel(this._modelId, {
       snippets: this.snippets
     }), e.has("arcadeAssistant") && this._updateArcadeAssistantRemoteState();
   }
   async loaded() {
-    this._componentReadyDefer.resolve(), await this._updateApiLibrary();
-    const e = await U();
-    this._disposables.push(e.onDiagnosticsChange((t) => !this._preparingArcade && this.arcgisDiagnosticsChange.emit(t.diagnostics))), this.testData && this._addExecuteScriptAction();
+    this._componentReadyDefer.resolve(), await this._updateApiLibrary(), await this._connectMonacoCustomizations(), await this._codeEditorElt.value?.setFocus();
+  }
+  _setOpenedSidePanel(e) {
+    this.openedSidePanel = e === this.openedSidePanel ? "none" : e;
+  }
+  async _connectMonacoCustomizations() {
+    if (this._disposables.length || this._connectMonacoCustomizationsPromise)
+      return await this._connectMonacoCustomizationsPromise;
+    this._connectMonacoCustomizationsPromise = (async () => {
+      if (await this.updateComplete, !this.isConnected || this._disposables.length)
+        return;
+      const e = await ee();
+      if (!this.isConnected || this._disposables.length)
+        return;
+      this._disposables.push(e.onDiagnosticsChange((d) => !this._preparingArcade && this.arcgisDiagnosticsChange.emit(d.diagnostics))), this.testData && !this._executeScriptAction && this._addExecuteScriptAction();
+      const s = T(() => this._debuggerState.breakpoints, () => this._updateBreakpointsDecorations(), { sync: !0 }), i = T(() => this._debuggerState.debuggerLine, () => this._updateDebuggerPausedLineDecoration(), { sync: !0 }), a = T(() => this._debuggerState.consoleLogs.length, () => this.requestUpdate(), { sync: !0 });
+      this._disposables.push({ dispose: () => s.remove() }, { dispose: () => i.remove() }, { dispose: () => a.remove() });
+      const r = this.editorInstance?.onMouseDown((d) => this._onEditorMouseDown(d));
+      r && this._disposables.push(r);
+      const n = this.editorInstance?.onDidChangeModelContent((d) => this._onEditorModelContentChange(d));
+      n && this._disposables.push(n), this._updateBreakpointsDecorations(), this._updateDebuggerPausedLineDecoration();
+    })();
+    try {
+      await this._connectMonacoCustomizationsPromise;
+    } finally {
+      this._connectMonacoCustomizationsPromise = void 0;
+    }
+  }
+  _onEditorMouseDown(e) {
+    if (!this.enableDebugger || ![
+      this._monacoEditor.MouseTargetType.GUTTER_GLYPH_MARGIN,
+      this._monacoEditor.MouseTargetType.GUTTER_LINE_NUMBERS,
+      this._monacoEditor.MouseTargetType.GUTTER_LINE_DECORATIONS
+    ].includes(e.target.type))
+      return;
+    const s = e.target.position?.lineNumber;
+    s && this._debuggerState.toggleBreakpoint(s);
+  }
+  _onEditorModelContentChange(e) {
+    if (!this.enableDebugger || !this._debuggerState.breakpoints.length || e.isFlush)
+      return;
+    const s = oe(this._debuggerState.breakpoints, e.changes);
+    s.length === this._debuggerState.breakpoints.length && s.every((i, a) => i === this._debuggerState.breakpoints[a]) || this._debuggerState.setBreakpoints(s);
   }
-  disconnectedCallback() {
-    for (super.disconnectedCallback(); this._disposables.length; )
-      this._disposables.pop()?.dispose();
+  _updateDebuggerPausedLineDecoration() {
+    const e = this.editorInstance;
+    if (!e)
+      return;
+    this._debuggerPausedLineDecoration?.clear();
+    const s = this._debuggerState.debuggerLine;
+    s != null ? this._debuggerPausedLineDecoration = e.createDecorationsCollection([
+      {
+        range: new z(s, 1, s, 1),
+        options: {
+          isWholeLine: !0,
+          className: "arcgis-code-editor__debugger-paused-line",
+          glyphMarginClassName: "arcgis-code-editor__debugger-paused-glyph",
+          marginClassName: "arcgis-code-editor__debugger-paused-line arcgis-code-editor__debugger-paused-margin"
+        }
+      }
+    ]) : this._debuggerPausedLineDecoration = void 0;
+  }
+  _continueDebugSession() {
+    this._debuggerState.continueDebug();
+  }
+  _stopDebugSession({ hideExecutionPanel: e = !0 } = {}) {
+    this._debuggerState.stopDebug({ hidePanel: e });
+  }
+  _resetDebugSession() {
+    this._debuggerState.resetDebug(), this._executeScript("debug").catch(g(this));
+  }
+  async _handleDebugPause(e, s, i) {
+    if (!this._debuggerState.isDebugging || e !== this._debuggerState.sessionId)
+      return;
+    const a = Promise.withResolvers();
+    return this._debuggerState.pauseDebug({
+      line: s.line,
+      result: i,
+      continue: a
+    }), await a.promise;
   }
   async _updateDataModelDeps() {
     await this._updateEditorProfile(), await this._updateApiLibrary();
   }
   _testDataChanged() {
-    !this.testData && this._executeScriptAction && (this._disposeSafely(this._executeScriptAction), this._executeScriptAction = void 0), this.testData && !this._executeScriptAction && this._addExecuteScriptAction(), this._showExecutionPanel && this._executeScript().catch(r(this));
+    !this.testData && this._executeScriptAction && (this._disposeSafely(this._executeScriptAction), this._executeScriptAction = void 0), this.testData && !this._executeScriptAction && this._addExecuteScriptAction(), !this.testData && this.enableDebugger && this._debuggerState.clearForMissingTestData(), this._debuggerState.showPanel && this._executeScript("run").catch(g(this));
   }
   async _updateEditorProfile() {
     this._preparingArcade = !0;
     try {
-      await c.setProfileForModel(this._modelId, this.profile, {
+      await P.setProfileForModel(this._modelId, this.profile, {
         locale: this.messages._t9nLocale,
         snippets: this.snippets
-      }), this._editorProfile = c.getEditorProfileForModel(this._modelId);
+      }), this._editorProfile = P.getEditorProfileForModel(this._modelId);
     } catch {
       this._editorProfile = void 0;
     } finally {
@@ -137,26 +627,45 @@ class X extends k {
     }
   }
   async _updateApiLibrary() {
-    this._apiLibrary = await c.getApiLibraryForModel(this._modelId);
+    this._apiLibrary = await P.getApiLibraryForModel(this._modelId);
+  }
+  _setExecutionPanel(e) {
+    this._debuggerState.togglePanel(e);
   }
-  async _executeScript() {
-    const e = this.testData;
-    if (!this._codeEditorElt.value || !e)
+  async _executeScript(e) {
+    const s = this.testData;
+    if (!this._codeEditorElt.value || !s)
       return;
-    const t = await this._editorProfilePromise;
-    if (!t) {
-      this._executionResult = { type: "error", value: "Missing editor profile", error: null };
+    const i = e === "debug" ? this._debuggerState.startDebug() : this._debuggerState.startRun(), a = await this._editorProfilePromise;
+    if (!a) {
+      this._debuggerState.fail({ type: "error", value: "Missing editor profile", error: null });
       return;
     }
-    this._showExecutionPanel = !0, this._executingScript = !0, this._consoleLogs = [], setTimeout(() => {
+    setTimeout(() => {
       (async () => {
-        const d = this._codeEditorElt.value?.value;
-        this._executionResult = await x(t.definition, d, e, (n) => setTimeout(() => this._consoleLogs = [...this._consoleLogs, n], 0)), this._executingScript = !1;
+        const r = this._codeEditorElt.value?.value, n = {
+          mode: e,
+          console: (w) => this._debuggerState.addConsoleLog(w),
+          breakpoints: e === "debug" ? this._debuggerState.debuggerBreakpoints : void 0
+        };
+        e === "debug" && (n.onDebugPause = this._handleDebugPause.bind(this, i));
+        const d = await U(a.definition, r, s, n);
+        if (i === this._debuggerState.sessionId) {
+          if (e === "debug") {
+            if (L(d)) {
+              this._debuggerState.fail(d);
+              return;
+            }
+            this._debuggerState.completeDebug(d);
+            return;
+          }
+          L(d) ? this._debuggerState.completeRun(d) : this._debuggerState.fail({ type: "error", value: "Unexpected debug result", error: null });
+        }
       })();
     }, 0);
   }
   _toggleShowExecutionPanel() {
-    this._showExecutionPanel = !this._showExecutionPanel;
+    this._debuggerState.togglePanel();
   }
   _toggleSideActionBarExpanded() {
     this.sideActionBarExpanded = !this.sideActionBarExpanded;
@@ -165,58 +674,58 @@ class X extends k {
     e.stopPropagation(), this.script = e.detail, this.arcgisScriptChange.emit(e.detail);
   }
   _insertAsSnippet(e) {
-    this._codeEditorElt.value?.insertSnippet(e.detail).catch(r(this));
+    this._codeEditorElt.value?.insertSnippet(e.detail).catch(g(this));
   }
   _insertAsText(e) {
     this._insertText(e.detail);
   }
   _insertText(e) {
-    this._codeEditorElt.value?.insertText(e).catch(r(this));
+    this._codeEditorElt.value?.insertText(e).catch(g(this));
   }
   _onResultPanelChange(e) {
-    const t = e.currentTarget;
-    this._resultPanel = t.openedResultPanel;
+    const s = e.currentTarget;
+    this._debuggerState.setPanel(s.openedResultPanel);
   }
   _onExecutionPanelClose() {
-    this._showExecutionPanel = !1;
+    this._debuggerState.closePanel();
   }
   _addExecuteScriptAction() {
     const e = this.editorInstance?.addAction({
       // An unique identifier for the action.
       id: "run-script",
       label: "Run Arcade Expression",
-      keybindings: [B.F5],
+      keybindings: [re.F5],
       contextMenuGroupId: "code",
       contextMenuOrder: 1,
       run: () => {
-        this.testData && this._executeScript().catch(r(this));
+        this.testData && this._executeScript("run").catch(g(this));
       }
     });
     e && (this._executeScriptAction = e, this._disposables.push(e));
   }
   _disposeSafely(e) {
-    const t = this._disposables.indexOf(e);
-    t !== -1 && this._disposables.splice(t, 1), e.dispose();
+    const s = this._disposables.indexOf(e);
+    s !== -1 && this._disposables.splice(s, 1), e.dispose();
   }
   async _updateArcadeAssistantRemoteState() {
-    this.arcadeAssistant && (this._arcadeAssistantRemoteState = await Q({
+    this.arcadeAssistant && (this._arcadeAssistantRemoteState = await ge({
       ...this.arcadeAssistant,
       profile: this.profile
     }));
   }
   renderMainActionBar() {
-    return this.testData ? i`<calcite-action-bar class="main-action-bar" layout=horizontal scale=s expanded expand-disabled slot=top-action-bar><calcite-action-group scale=s><calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade} @click=${() => {
-      this._executeScript().catch(r(this));
-    }}></calcite-action>${this._executionResult ? i`<calcite-action .text=${this.messages.lastresults ?? ""} .active=${this._showExecutionPanel} text-enabled icon=access-string-results icon-flip-rtl scale=s @click=${this._toggleShowExecutionPanel}></calcite-action>` : null}</calcite-action-group></calcite-action-bar>` : null;
+    return this.enableDebugger || !this.testData ? null : l`<calcite-action-bar class="main-action-bar" layout=horizontal scale=s expanded expand-disabled slot=top-action-bar><calcite-action-group scale=s><calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade} @click=${() => {
+      this._executeScript("run").catch(g(this));
+    }}></calcite-action>${this._debuggerState.result ? l`<calcite-action .text=${this.messages.lastresults ?? ""} .active=${this._debuggerState.showPanel} text-enabled icon=access-string-results icon-flip-rtl scale=s @click=${this._toggleShowExecutionPanel}></calcite-action>` : null}</calcite-action-group></calcite-action-bar>`;
   }
   renderMainPanel() {
-    return i`<arcgis-code-editor slot=editor .editorOptions=${this.editorOptions} .language=${c.languageId} .value=${this.script ?? ""} .modelId=${this._modelId} @arcgisValueChange=${this._onCodeEditorValueChange} ${N(this._codeEditorElt)}></arcgis-code-editor>`;
+    return l`<arcgis-code-editor slot=editor .editorOptions=${this.editorOptions} .language=${P.languageId} .value=${this.script ?? ""} .modelId=${this._modelId} @arcgisValueChange=${this._onCodeEditorValueChange} ${ie(this._codeEditorElt)}></arcgis-code-editor>`;
   }
-  renderAction({ id: e, label: t, icon: d, active: n, panelName: p, iconFlipRtl: u = !1, onClick: g = this._toggleSidePanel }) {
-    return i`<calcite-action id=${e ?? b} .text=${t} .textEnabled=${this.sideActionBarExpanded} .icon=${d} .active=${n} @click=${g} data-panel-name=${p ?? b} .iconFlipRtl=${u}></calcite-action>${!this.sideActionBarExpanded && i`<calcite-tooltip .referenceElement=${e}><span>${t}</span></calcite-tooltip>` || ""}`;
+  renderAction({ id: e, label: s, icon: i, active: a, panelName: r, iconFlipRtl: n = !1, onClick: d = this._toggleSidePanel }) {
+    return l`<calcite-action id=${e ?? F} .text=${s} .textEnabled=${this.sideActionBarExpanded} .icon=${i} .active=${a} @click=${d} data-panel-name=${r ?? F} .iconFlipRtl=${n}></calcite-action>${!this.sideActionBarExpanded && l`<calcite-tooltip .referenceElement=${e}><span>${s}</span></calcite-tooltip>` || ""}`;
   }
   renderSideActionBar() {
-    return this.hideSideBar ? null : i`<calcite-action-bar slot=side-action-bar class="side-action-bar" .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><calcite-action-group>${this.renderAction({
+    return this.hideSideBar ? null : l`<calcite-action-bar slot=side-action-bar class="side-action-bar" .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><calcite-action-group>${this.renderAction({
       id: "profile-variables-action",
       label: this.messages.profilevariables ?? "",
       icon: "profile-variables",
@@ -260,28 +769,47 @@ class X extends k {
     if (this.hideSideBar)
       return null;
     const { openedSidePanel: e } = this;
-    return i`<arcgis-language-api-panel slot=side-panel class=${l(e === "api" ? "" : "hidden")} .loading=${this._preparingArcade} .apiLibrary=${this._apiLibrary} .hideDocumentationActions=${this.hideDocumentationActions} @arcgisInternalItemSelected=${this._insertAsSnippet} @arcgisInternalClosePanel=${this._toggleSidePanel} data-panel-name=none .closed=${e !== "api"}></arcgis-language-api-panel><arcgis-editor-variables slot=side-panel class=${l(e === "variables" ? "" : "hidden")} .loading=${this._preparingArcade} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._toggleSidePanel} data-panel-name=none .variable=${this._editorProfile} .closed=${e !== "variables"} .messageOverrides=${{ profileempty: this.messages.profileempty }}></arcgis-editor-variables>${this.suggestions?.length && i`<arcgis-arcade-suggestions slot=side-panel class=${l(e === "suggestions" ? "" : "hidden")} .closed=${e !== "suggestions"} .suggestions=${this.suggestions} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._toggleSidePanel} data-panel-name=none></arcgis-arcade-suggestions>` || ""}${this.arcadeAssistant && this._arcadeAssistantRemoteState.shouldRender && i`<arcgis-arcade-coding-assistant slot=side-panel class=${l(e === "arcade-assistant" ? "" : "hidden")} .closed=${e !== "arcade-assistant"} .insertText=${this._insertText.bind(this)} .closePanel=${this._toggleSidePanel} .portalUrl=${this.arcadeAssistant.portalUrl} .serviceUrl=${"serviceUrl" in this._arcadeAssistantRemoteState ? this._arcadeAssistantRemoteState.serviceUrl : void 0} .helpBase=${this._arcadeAssistantRemoteState.helpBase} .assistantsEnabled=${this._arcadeAssistantRemoteState.assistantsEnabled} .feedbackServiceUrl=${this._arcadeAssistantRemoteState.feedbackServiceUrl} .editorRef=${this.el} .appVersion=${this.arcadeAssistant.appVersion} .disableQuestionAnswerLogging=${this.arcadeAssistant.disableQuestionAnswerLogging}></arcgis-arcade-coding-assistant>` || ""}${this.customPanels?.map((t) => i`<calcite-flow slot=side-panel class=${l(e === t.id ? "" : "hidden")}>${t?.useFlows ? t.renderer?.({
+    return l`<arcgis-language-api-panel slot=side-panel class=${x(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=${x(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 }}></arcgis-editor-variables>${this.suggestions?.length && l`<arcgis-arcade-suggestions slot=side-panel class=${x(e === "suggestions" ? "" : "hidden")} .closed=${e !== "suggestions"} .suggestions=${this.suggestions} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none></arcgis-arcade-suggestions>` || ""}${this.arcadeAssistant && this._arcadeAssistantRemoteState.shouldRender && l`<arcgis-arcade-coding-assistant slot=side-panel class=${x(e === "arcade-assistant" ? "" : "hidden")} .closed=${e !== "arcade-assistant"} .insertText=${this._insertText.bind(this)} .closePanel=${this._closeSidePanel} .portalUrl=${this.arcadeAssistant.portalUrl} .serviceUrl=${"serviceUrl" in this._arcadeAssistantRemoteState ? this._arcadeAssistantRemoteState.serviceUrl : void 0} .helpBase=${this._arcadeAssistantRemoteState.helpBase} .assistantsEnabled=${this._arcadeAssistantRemoteState.assistantsEnabled} .feedbackServiceUrl=${this._arcadeAssistantRemoteState.feedbackServiceUrl} .editorRef=${this.el} .appVersion=${this.arcadeAssistant.appVersion} .disableQuestionAnswerLogging=${this.arcadeAssistant.disableQuestionAnswerLogging}></arcgis-arcade-coding-assistant>` || ""}${this.customPanels?.map((s) => l`<calcite-flow slot=side-panel class=${x(e === s.id ? "" : "hidden")}>${s?.useFlows ? s.renderer?.({
       closePanel: this._toggleSidePanel,
       insertText: this._insertText.bind(this),
-      closed: e !== t.id,
+      closed: e !== s.id,
       /** pass this.el instead of "this" as it is what actually gets attached to the dom */
       editorRef: this.el
-    }) : i`<calcite-flow-item .heading=${t.name} heading-level=2 closable .closed=${e !== t.id} @calciteFlowItemClose=${this._toggleSidePanel} .description=${t.description}>${t.renderer?.({
+    }) : l`<calcite-flow-item .heading=${s.name} heading-level=2 closable .closed=${e !== s.id} @calciteFlowItemClose=${this._toggleSidePanel} .description=${s.description}>${s.renderer?.({
       closePanel: this._toggleSidePanel,
       insertText: this._insertText.bind(this),
-      closed: e !== t.id,
+      closed: e !== s.id,
       /** pass this.el instead of "this" as it is what actually gets attached to the dom */
       editorRef: this.el
     })}</calcite-flow-item>`}</calcite-flow>`)}`;
   }
   renderResultsPanel() {
-    return this._showExecutionPanel ? i`<arcgis-arcade-results slot=results-panel .openedResultPanel=${this._resultPanel} .loading=${this._executingScript} .result=${this._executionResult} .consoleLogs=${this._consoleLogs} @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange} @arcgisInternalClosePanel=${this._onExecutionPanelClose}></arcgis-arcade-results>` : null;
+    if (this._usesBottomExecutionDrawer)
+      return this.renderBottomExecutionBody();
+    if (!this._debuggerState.showPanel)
+      return null;
+    const e = this._debuggerState.openedPanel === "debug-console" ? "output" : this._debuggerState.openedPanel;
+    return l`<arcgis-arcade-results slot=results-panel .openedResultPanel=${e} .loading=${this._debuggerState.isExecuting} .result=${this._debuggerState.runResult} .consoleLogs=${this._debuggerState.consoleLogs} @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange} @arcgisInternalClosePanel=${this._onExecutionPanelClose}></arcgis-arcade-results>`;
+  }
+  renderBottomExecutionBody() {
+    const { showPanel: e, openedPanel: s, debugResult: i, isExecuting: a, mode: r } = this._debuggerState;
+    return e ? s === "debug-console" ? l`<arcgis-arcade-debugger-console slot=results-panel .modelId=${this._modelId} .debuggerStore=${this._debuggerState}></arcgis-arcade-debugger-console>` : s === "output" && r === "debug" ? l`<arcgis-arcade-debugger-output slot=results-panel .debuggerStore=${this._debuggerState} .result=${i}></arcgis-arcade-debugger-output>` : l`<arcgis-arcade-results slot=results-panel class="bottom-results" .openedResultPanel=${s} .loading=${s === "console" && this._debuggerState.isPaused ? !1 : a} .result=${this._debuggerState.runResult} .consoleLogs=${this._debuggerState.consoleLogs} hide-header @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange}></arcgis-arcade-results>` : null;
+  }
+  renderBottomActionBar() {
+    if (!this._usesBottomExecutionDrawer)
+      return null;
+    const { showPanel: e, hasExecuted: s, openedPanel: i, isDebugging: a, isPaused: r, isExecuting: n } = this._debuggerState;
+    return l`<calcite-action-bar slot=bottom-action-bar class=${`main-action-bar bottom-action-bar ${e ? "" : "is-collapsed"}`} layout=horizontal scale=s expand-disabled><calcite-action-group scale=s>${a ? l`<calcite-action .text=${this.messages.continue ?? "Continue"} icon=forward scale=s .disabled=${!r} @click=${this._continueDebugSession}></calcite-action><calcite-action .text=${this.messages.reset ?? "Reset"} icon=reset scale=s @click=${this._resetDebugSession}></calcite-action><calcite-action .text=${this.messages.stop ?? "Stop"} icon=circle-stop scale=s @click=${() => this._stopDebugSession()}></calcite-action>` : l`<calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade || n} @click=${() => {
+      this._executeScript("run").catch(g(this));
+    }}></calcite-action><calcite-action .text=${this.messages.runanddebug ?? "Run and Debug"} text-enabled icon=debug-script scale=s .loading=${this._preparingArcade || n} @click=${() => {
+      this._executeScript("debug").catch(g(this));
+    }}></calcite-action>`}</calcite-action-group>${s ? l`<calcite-action-group scale=s><calcite-action .active=${i === "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=${i === "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=${i === "log" && e} .text=${this.messages.log ?? "Log"} text-enabled scale=s icon=list icon-flip-rtl @click=${() => this._setExecutionPanel("log")}></calcite-action><calcite-action .active=${i === "debug-console" && e} .text=${this.messages.debugconsole ?? "Debug Console"} text-enabled scale=s icon=debug-script icon-flip-rtl .disabled=${this._debuggerState.mode !== "debug"} @click=${() => this._setExecutionPanel("debug-console")}></calcite-action></calcite-action-group>` : null}${e ? l`<calcite-action-group scale=s><calcite-action .text=${this.messages.close ?? "Close"} scale=s icon=x icon-flip-rtl @click=${this._onExecutionPanelClose}></calcite-action></calcite-action-group>` : null}</calcite-action-bar>`;
   }
   render() {
-    return i`<arcgis-code-editor-shell>${this.renderMainActionBar()}${this.renderMainPanel()}${this.renderResultsPanel()}${this.renderSidePanel()}${this.renderSideActionBar()}</arcgis-code-editor-shell>`;
+    return l`<arcgis-code-editor-shell>${this.renderMainActionBar()}${this.renderMainPanel()}${this.renderBottomActionBar()}${this.renderResultsPanel()}${this.renderSidePanel()}${this.renderSideActionBar()}</arcgis-code-editor-shell>`;
   }
 }
-D("arcgis-arcade-editor", X);
+W("arcgis-arcade-editor", Se);
 export {
-  X as ArcgisArcadeEditor
+  Se as ArcgisArcadeEditor
 };