@openc3/vue-common 6.10.3 → 6.10.5

package/dist/{Openc3Screen-CDwAWaTl.js → Openc3Screen-BxuqrFPG.js}

@@ -1,72 +1,63 @@
-import { f as D, y as K, a as F, W as X, e as H, l as Y } from "./UpgradeToEnterpriseDialog.vue_vue_type_style_index_0_scoped_dda5adfc_lang-D9LFRi0t.js";
-import { resolveComponent as r, createBlock as b, openBlock as f, withKeys as N, withCtx as a, createVNode as s, createElementVNode as v, toDisplayString as k, createTextVNode as T, withModifiers as A, createElementBlock as E, Fragment as R, renderList as B, ref as P, computed as j, watch as q, normalizeStyle as Z, createCommentVNode as V, withDirectives as M, vShow as L, normalizeProps as U, guardReactiveProps as W } from "vue";
-import { _ as O } from "./CustomIcon-B9m73Gqm.js";
+import { E as V, O as q, a as M, W as Z, A as X, l as H } from "./UpgradeToEnterpriseDialog.vue_vue_type_style_index_0_scoped_dda5adfc_lang-8uBNo_8r.js";
+import { resolveComponent as d, createElementBlock as I, openBlock as f, createVNode as o, withCtx as r, createTextVNode as T, createElementVNode as _, withModifiers as O, normalizeStyle as B, toDisplayString as k, createBlock as x, withKeys as N, Fragment as R, renderList as P, ref as $, computed as Y, watch as K, createCommentVNode as E, withDirectives as F, vShow as z, normalizeProps as L, guardReactiveProps as U } from "vue";
+import { _ as A } from "./CustomIcon-B9m73Gqm.js";
 import { f as J } from "./fileIcon-DqRHb1_Z.js";
-import { A as G } from "./TopBar-BkwvK0oj.js";
+import { A as j } from "./TopBar-DcfK2Z2G.js";
 class Q {
   constructor() {
-    D.get("/openc3-api/autocomplete/data/screen").then((t) => {
+    V.get("/openc3-api/autocomplete/data/screen").then((t) => {
       this.autocompleteData = t.data;
-    }), this.api = new K();
+    }), this.api = new q();
   }
-  async getCompletions(t, n, o, i, l) {
-    let p = n.getLine(o.row).slice(0, o.column).trimStart().split(/ (?![^<]*>)/), h = this.autocompleteData;
-    p.length > 1 && (h = h.find((S) => S.caption === p[0]));
-    let w = {}, C = !0;
-    if (h && h.params) {
-      h.params.length == p.length - 1 && (C = !1);
-      let S = h.params[p.length - 2];
-      if (S["Target name"])
-        h = (await this.api.get_target_names()).reduce(
-          (d, y) => (d[y] = 1, d),
+  async getCompletions(t, n, s, i, l) {
+    let h = n.getLine(s.row).slice(0, s.column).trimStart().split(/ (?![^<]*>)/), m = this.autocompleteData;
+    h.length > 1 && (m = m.find((w) => w.caption === h[0]));
+    let y = {}, S = !0;
+    if (m && m.params) {
+      m.params.length == h.length - 1 && (S = !1);
+      let w = m.params[h.length - 2];
+      if (w["Target name"])
+        m = (await this.api.get_target_names()).reduce(
+          (a, g) => (a[g] = 1, a),
           {}
         );
-      else if (S["Packet name"]) {
-        let u = p[p.length - 2];
-        h = (await this.api.get_all_tlm(u)).reduce(
-          (y, m) => (y[m.packet_name] = m.description, y),
+      else if (w["Packet name"]) {
+        let u = h[h.length - 2];
+        m = (await this.api.get_all_tlm(u)).reduce(
+          (g, p) => (g[p.packet_name] = p.description, g),
           {}
-        ), h.LATEST = "LATEST values from all packets";
-      } else if (S["Item name"]) {
-        let u = p[p.length - 3], d = p[p.length - 2];
-        if (d === "LATEST") {
-          let y = await this.api.get_all_tlm_item_names(u);
-          h = {}, y.forEach((m) => {
-            h[m] = `LATEST ${m}`;
+        ), m.LATEST = "LATEST values from all packets";
+      } else if (w["Item name"]) {
+        let u = h[h.length - 3], a = h[h.length - 2];
+        if (a === "LATEST") {
+          let g = await this.api.get_all_tlm_item_names(u);
+          m = {}, g.forEach((p) => {
+            m[p] = `LATEST ${p}`;
           });
         } else
-          h = (await this.api.get_tlm(u, d)).items.reduce(
-            (m, g) => (m[g.name] = g.description, m),
+          m = (await this.api.get_tlm(u, a)).items.reduce(
+            (p, b) => (p[b.name] = b.description, p),
             {}
           );
       } else
-        h = S;
-      w = Object.keys(h || {}).map((u) => {
-        let d = {
-          value: u + (C ? " " : ""),
+        m = w;
+      y = Object.keys(m || {}).map((u) => {
+        let a = {
+          value: u + (S ? " " : ""),
           // We want the autoComplete to continue right up
           // to the last parameter
-          command: C && "startAutocomplete"
+          command: S && "startAutocomplete"
         };
-        return typeof h[u] == "string" && (d.meta = h[u]), d;
+        return typeof m[u] == "string" && (a.meta = m[u]), a;
       });
     } else
-      w = h;
-    l(null, w);
+      y = m;
+    l(null, y);
   }
 }
 const ee = {
   props: {
-    modelValue: Boolean,
-    target: {
-      type: String,
-      default: ""
-    },
-    screen: {
-      type: String,
-      default: ""
-    },
-    definition: {
+    modelValue: {
       type: String,
       default: ""
     },
@@ -74,15 +65,21 @@ const ee = {
       type: Array,
       default: () => []
     },
-    errors: {
-      type: Array,
-      default: () => []
+    height: {
+      type: String,
+      default: "45vh"
+    },
+    filename: {
+      type: String,
+      default: "screen.txt"
     }
   },
-  emits: ["cancel", "delete", "save", "update:modelValue"],
+  emits: ["update:modelValue"],
   data() {
     return {
+      editor: null,
       file: null,
+      loadedKeywords: [],
       docsKeyword: "",
       contextMenu: !1,
       menuX: 0,
@@ -90,61 +87,55 @@ const ee = {
     };
   },
   computed: {
-    editErrors: function() {
-      if (this.definition === "" && !this.file)
-        return ["Input can not be blank."];
-      if (this.errors.length !== 0) {
-        let e = /* @__PURE__ */ new Set(), t = [];
-        const n = this.errors.toSorted(
-          (o, i) => o.lineNumber - i.lineNumber
-        );
-        for (const o of n) {
-          let i = `At ${o.lineNumber}: (${o.line}) ${o.message}.`;
-          o.usage && (i += ` Usage: ${o.usage}`), t.push(i), e.add(o.message);
-        }
-        return t;
-      }
-      return [];
+    effectiveKeywords() {
+      return this.keywords.length > 0 ? this.keywords : this.loadedKeywords;
+    }
+  },
+  watch: {
+    modelValue(e) {
+      this.editor && this.editor.getValue() !== e && (this.editor.setValue(e), this.editor.clearSelection());
     },
-    show: {
-      get() {
-        return this.modelValue;
-      },
-      set(e) {
-        this.$emit("update:modelValue", e);
+    effectiveKeywords() {
+      if (this.editor) {
+        const e = this.buildScreenMode();
+        this.editor.session.setMode(new e());
       }
     }
   },
-  mounted: function() {
-    this.editor = F.edit(this.$refs.editor), this.editor.setTheme("ace/theme/twilight");
-    const e = this.buildScreenMode();
-    this.editor.session.setMode(new e()), this.editor.session.setTabSize(2), this.editor.session.setUseWrapMode(!0), this.editor.$blockScrolling = 1 / 0, this.editor.setOption("enableBasicAutocompletion", !0), this.editor.setOption("enableLiveAutocompletion", !0), this.editor.completers = [new Q()], this.editor.setHighlightActiveLine(!1), this.editor.setValue(this.definition), this.editor.clearSelection(), G.applyVimModeIfEnabled(this.editor), this.editor.focus();
+  created() {
+    this.keywords.length === 0 && this.loadKeywords();
+  },
+  mounted() {
+    this.initEditor();
   },
   beforeUnmount() {
-    this.editor.destroy(), this.editor.container.remove();
+    this.editor && (this.editor.destroy(), this.editor.container.remove());
   },
   methods: {
-    toggleVimMode: function() {
-      G.toggleVimMode(this.editor);
-    },
-    showContextMenu: function(e) {
-      this.menuX = e.pageX, this.menuY = e.pageY;
-      let t = this.editor.getCursorPosition(), n = this.editor.session.getTokenAt(t.row, t.column);
-      if (n) {
-        let o = n.value.trim();
-        o.includes(" ") ? this.docsKeyword = o.split(" ")[0] : this.docsKeyword = o, this.contextMenu = !0;
+    async loadKeywords() {
+      try {
+        const e = await V.get(
+          "/openc3-api/autocomplete/keywords/screen"
+        );
+        this.loadedKeywords = e.data;
+      } catch (e) {
+        console.error("Error loading screen keywords:", e);
       }
     },
-    openDocumentation() {
-      window.open(
-        `${window.location.origin}/tools/staticdocs/docs/configuration/telemetry-screens#${this.docsKeyword.toLowerCase()}`,
-        "_blank"
-      );
+    initEditor() {
+      this.editor = M.edit(this.$refs.editor), this.editor.setTheme("ace/theme/twilight");
+      const e = this.buildScreenMode();
+      this.editor.session.setMode(new e()), this.editor.session.setTabSize(2), this.editor.session.setUseWrapMode(!0), this.editor.$blockScrolling = 1 / 0, this.editor.setOption("enableBasicAutocompletion", !0), this.editor.setOption("enableLiveAutocompletion", !0), this.editor.completers = [new Q()], this.editor.setHighlightActiveLine(!1), this.editor.setValue(this.modelValue), this.editor.clearSelection(), j.applyVimModeIfEnabled(this.editor), this.editor.focus(), this.editor.session.on("change", () => {
+        this.$emit("update:modelValue", this.editor.getValue());
+      });
+    },
+    getValue() {
+      return this.editor ? this.editor.getValue() : this.modelValue;
     },
     buildScreenMode() {
-      let e = F.require("ace/lib/oop"), t = F.require(
+      let e = M.require("ace/lib/oop"), t = M.require(
         "ace/mode/text_highlight_rules"
-      ).TextHighlightRules, n = this.keywords.join("|"), o = function() {
+      ).TextHighlightRules, n = this.effectiveKeywords.join("|"), s = function() {
         this.$rules = {
           start: [
             {
@@ -165,33 +156,217 @@ const ee = {
             },
             {
               token: "keyword",
-              regex: new RegExp(`^\\s*(${n})\\b`)
+              regex: n ? new RegExp(`^\\s*(${n})\\b`) : /(?!)/
             }
           ]
         }, this.normalizeRules();
       };
-      e.inherits(o, t);
+      e.inherits(s, t);
       let i = function() {
-        this.HighlightRules = o;
-      }, l = F.require("ace/mode/text").Mode;
+        this.HighlightRules = s;
+      }, l = M.require("ace/mode/text").Mode;
       return e.inherits(i, l), (function() {
         this.$id = "ace/mode/openc3";
       }).call(i.prototype), i;
     },
-    downloadScreen: function() {
+    toggleVimMode() {
+      j.toggleVimMode(this.editor);
+    },
+    showContextMenu(e) {
+      this.menuX = e.pageX, this.menuY = e.pageY;
+      let t = this.editor.getCursorPosition(), n = this.editor.session.getTokenAt(t.row, t.column);
+      if (n) {
+        let s = n.value.trim();
+        s.includes(" ") ? this.docsKeyword = s.split(" ")[0] : this.docsKeyword = s, this.contextMenu = !0;
+      }
+    },
+    openDocumentation() {
+      window.open(
+        `${window.location.origin}/tools/staticdocs/docs/configuration/telemetry-screens#${this.docsKeyword.toLowerCase()}`,
+        "_blank"
+      );
+    },
+    downloadContent() {
       const e = new Blob([this.editor.getValue()], {
         type: "text/plain"
       }), t = document.createElement("a");
-      t.href = URL.createObjectURL(e), t.setAttribute("download", `${this.screen.toLowerCase()}.txt`), t.click();
+      t.href = URL.createObjectURL(e), t.setAttribute("download", this.filename), t.click();
     },
-    loadFile: function() {
+    loadFile() {
       const e = new FileReader();
       e.readAsText(this.file);
       const t = this;
       e.onload = function() {
-        t.editor.setValue(e.result), t.file = null;
+        t.editor.setValue(e.result), t.editor.clearSelection(), t.file = null;
       };
+    }
+  }
+}, te = { class: "screen-editor-container" };
+function ne(e, t, n, s, i, l) {
+  const c = d("v-btn"), v = d("v-file-input"), h = d("v-spacer"), m = d("v-row"), y = d("v-list-item-title"), S = d("v-list-item"), w = d("v-divider"), u = d("v-list"), a = d("v-menu");
+  return f(), I("div", te, [
+    o(m, {
+      "no-gutters": "",
+      align: "center",
+      class: "mb-2"
+    }, {
+      default: r(() => [
+        o(c, {
+          disabled: !i.file,
+          color: "primary",
+          size: "small",
+          class: "mr-3",
+          "data-test": "screen-editor-load",
+          onClick: l.loadFile
+        }, {
+          default: r(() => [...t[3] || (t[3] = [
+            T(" Load ", -1)
+          ])]),
+          _: 1
+        }, 8, ["disabled", "onClick"]),
+        o(v, {
+          modelValue: i.file,
+          "onUpdate:modelValue": t[0] || (t[0] = (g) => i.file = g),
+          "truncate-length": "15",
+          accept: ".txt",
+          label: "Click to select .txt screen file.",
+          density: "compact",
+          "hide-details": "",
+          style: { "max-width": "300px" }
+        }, null, 8, ["modelValue"]),
+        o(h),
+        o(c, {
+          icon: "mdi-download",
+          variant: "text",
+          density: "compact",
+          title: "Download",
+          "data-test": "download-screen-icon",
+          onClick: l.downloadContent
+        }, null, 8, ["onClick"])
+      ]),
+      _: 1
+    }),
+    o(m, {
+      "no-gutters": "",
+      class: "mb-2"
+    }, {
+      default: r(() => [
+        _("pre", {
+          ref: "editor",
+          class: "screen-editor",
+          style: B({ height: n.height, width: "100%" }),
+          onContextmenu: t[1] || (t[1] = O((...g) => l.showContextMenu && l.showContextMenu(...g), ["prevent"]))
+        }, null, 36),
+        o(a, {
+          modelValue: i.contextMenu,
+          "onUpdate:modelValue": t[2] || (t[2] = (g) => i.contextMenu = g),
+          target: [i.menuX, i.menuY]
+        }, {
+          default: r(() => [
+            o(u, null, {
+              default: r(() => [
+                o(S, {
+                  link: "",
+                  onClick: l.openDocumentation
+                }, {
+                  default: r(() => [
+                    o(y, null, {
+                      default: r(() => [
+                        T(k(i.docsKeyword) + " documentation ", 1)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["onClick"]),
+                o(w),
+                o(S, {
+                  title: "Toggle Vim mode",
+                  "prepend-icon": "extras:vim",
+                  onClick: l.toggleVimMode
+                }, null, 8, ["onClick"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue", "target"])
+      ]),
+      _: 1
+    }),
+    o(m, { "no-gutters": "" }, {
+      default: r(() => [...t[4] || (t[4] = [
+        _("span", { class: "text-caption text-grey" }, " Ctrl-space brings up autocomplete. Right click keywords for documentation. ", -1)
+      ])]),
+      _: 1
+    })
+  ]);
+}
+const ie = /* @__PURE__ */ A(ee, [["render", ne], ["__scopeId", "data-v-9458690b"]]), se = {
+  components: {
+    ScreenEditor: ie
+  },
+  props: {
+    modelValue: Boolean,
+    target: {
+      type: String,
+      default: ""
+    },
+    screen: {
+      type: String,
+      default: ""
+    },
+    definition: {
+      type: String,
+      default: ""
     },
+    keywords: {
+      type: Array,
+      default: () => []
+    },
+    errors: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["cancel", "delete", "save", "update:modelValue"],
+  data() {
+    return {
+      editorContent: this.definition
+    };
+  },
+  computed: {
+    editErrors: function() {
+      if (this.editorContent === "")
+        return ["Input can not be blank."];
+      if (this.errors.length !== 0) {
+        let e = /* @__PURE__ */ new Set(), t = [];
+        const n = this.errors.toSorted(
+          (s, i) => s.lineNumber - i.lineNumber
+        );
+        for (const s of n) {
+          let i = `At ${s.lineNumber}: (${s.line}) ${s.message}.`;
+          s.usage && (i += ` Usage: ${s.usage}`), t.push(i), e.add(s.message);
+        }
+        return t;
+      }
+      return [];
+    },
+    show: {
+      get() {
+        return this.modelValue;
+      },
+      set(e) {
+        this.$emit("update:modelValue", e);
+      }
+    }
+  },
+  watch: {
+    definition(e) {
+      this.editorContent = e;
+    }
+  },
+  methods: {
     deleteScreen: function() {
       this.$dialog.confirm("Are you sure you want to delete this screen?!", {
         okText: "Delete",
@@ -201,22 +376,22 @@ const ee = {
       });
     }
   }
-}, te = ["textContent"];
-function ne(e, t, n, o, i, l) {
-  const c = r("v-btn"), x = r("v-spacer"), p = r("v-toolbar"), h = r("v-row"), w = r("v-file-input"), C = r("v-list-item-title"), S = r("v-list-item"), u = r("v-divider"), d = r("v-list"), y = r("v-menu"), m = r("v-card-text"), g = r("v-card"), I = r("v-dialog");
-  return f(), b(I, {
+}, le = ["textContent"];
+function oe(e, t, n, s, i, l) {
+  const c = d("v-btn"), v = d("v-spacer"), h = d("v-toolbar"), m = d("screen-editor"), y = d("v-row"), S = d("v-card-text"), w = d("v-card"), u = d("v-dialog");
+  return f(), x(u, {
     modelValue: l.show,
-    "onUpdate:modelValue": t[5] || (t[5] = (_) => l.show = _),
+    "onUpdate:modelValue": t[3] || (t[3] = (a) => l.show = a),
     persistent: "",
     width: "75vw",
-    onKeydown: t[6] || (t[6] = N((_) => e.$emit("cancel"), ["esc"]))
+    onKeydown: t[4] || (t[4] = N((a) => e.$emit("cancel"), ["esc"]))
   }, {
-    default: a(() => [
-      s(g, null, {
-        default: a(() => [
-          s(p, { height: "24" }, {
-            default: a(() => [
-              s(c, {
+    default: r(() => [
+      o(w, null, {
+        default: r(() => [
+          o(h, { height: "24" }, {
+            default: r(() => [
+              o(c, {
                 class: "mx-2",
                 icon: "mdi-delete",
                 variant: "text",
@@ -224,135 +399,54 @@ function ne(e, t, n, o, i, l) {
                 "data-test": "delete-screen-icon",
                 onClick: l.deleteScreen
               }, null, 8, ["onClick"]),
-              s(x),
-              v("span", null, " Edit Screen: " + k(n.target) + " " + k(n.screen), 1),
-              s(x),
-              s(c, {
-                class: "mx-2",
-                icon: "mdi-download",
-                variant: "text",
-                density: "compact",
-                "data-test": "download-screen-icon",
-                onClick: l.downloadScreen
-              }, null, 8, ["onClick"])
+              o(v),
+              _("span", null, " Edit Screen: " + k(n.target) + " " + k(n.screen), 1),
+              o(v)
             ]),
             _: 1
           }),
-          s(m, { style: { "max-height": "90vh" } }, {
-            default: a(() => [
-              s(h, { class: "mt-3" }, {
-                default: a(() => [...t[7] || (t[7] = [
-                  T(" Upload a screen file. ", -1)
-                ])]),
-                _: 1
-              }),
-              s(h, {
-                "no-gutters": "",
-                align: "center"
-              }, {
-                default: a(() => [
-                  s(c, {
-                    disabled: !i.file,
-                    color: "primary",
-                    class: "mr-3",
-                    "data-test": "edit-screen-load",
-                    onClick: l.loadFile
-                  }, {
-                    default: a(() => [...t[8] || (t[8] = [
-                      T(" Load ", -1)
-                    ])]),
-                    _: 1
-                  }, 8, ["disabled", "onClick"]),
-                  s(w, {
-                    modelValue: i.file,
-                    "onUpdate:modelValue": t[0] || (t[0] = (_) => i.file = _),
-                    "truncate-length": "15",
-                    accept: ".txt",
-                    label: "Click to select .txt screen file."
-                  }, null, 8, ["modelValue"])
-                ]),
-                _: 1
-              }),
-              s(h, { class: "mb-2" }, {
-                default: a(() => [...t[9] || (t[9] = [
-                  T(" Edit the screen definition. ", -1)
-                ])]),
-                _: 1
-              }),
-              s(h, { class: "mb-2" }, {
-                default: a(() => [
-                  v("pre", {
-                    ref: "editor",
-                    class: "editor",
-                    onContextmenu: t[1] || (t[1] = A((..._) => l.showContextMenu && l.showContextMenu(..._), ["prevent"]))
-                  }, null, 544),
-                  s(y, {
-                    modelValue: i.contextMenu,
-                    "onUpdate:modelValue": t[2] || (t[2] = (_) => i.contextMenu = _),
-                    target: [i.menuX, i.menuY]
-                  }, {
-                    default: a(() => [
-                      s(d, null, {
-                        default: a(() => [
-                          s(S, { link: "" }, {
-                            default: a(() => [
-                              s(C, { onClick: l.openDocumentation }, {
-                                default: a(() => [
-                                  T(k(i.docsKeyword) + " documentation ", 1)
-                                ]),
-                                _: 1
-                              }, 8, ["onClick"])
-                            ]),
-                            _: 1
-                          }),
-                          s(u),
-                          s(S, {
-                            title: "Toggle Vim mode",
-                            "prepend-icon": "extras:vim",
-                            onClick: l.toggleVimMode
-                          }, null, 8, ["onClick"])
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "target"])
-                ]),
-                _: 1
-              }),
-              s(h, { style: { "max-height": "120px", "overflow-y": "auto" } }, {
-                default: a(() => [
-                  (f(!0), E(R, null, B(l.editErrors, (_, $) => (f(), E("div", { key: $ }, [
-                    v("span", {
+          o(S, { style: { "max-height": "90vh" } }, {
+            default: r(() => [
+              o(m, {
+                ref: "screenEditor",
+                modelValue: i.editorContent,
+                "onUpdate:modelValue": t[0] || (t[0] = (a) => i.editorContent = a),
+                keywords: n.keywords,
+                filename: `${n.screen.toLowerCase()}.txt`,
+                height: "45vh"
+              }, null, 8, ["modelValue", "keywords", "filename"]),
+              o(y, { style: { "max-height": "120px", "overflow-y": "auto" } }, {
+                default: r(() => [
+                  (f(!0), I(R, null, P(l.editErrors, (a, g) => (f(), I("div", { key: g }, [
+                    _("span", {
                       class: "text-red",
-                      textContent: k(_)
-                    }, null, 8, te)
+                      textContent: k(a)
+                    }, null, 8, le)
                   ]))), 128))
                 ]),
                 _: 1
               }),
-              s(h, { class: "mt-5" }, {
-                default: a(() => [
-                  t[12] || (t[12] = v("span", null, " Ctrl-space brings up autocomplete. Right click keywords for documentation. ", -1)),
-                  s(x),
-                  s(c, {
+              o(y, { class: "mt-3" }, {
+                default: r(() => [
+                  o(v),
+                  o(c, {
                     class: "mx-2",
                     variant: "outlined",
                     "data-test": "edit-screen-cancel",
-                    onClick: t[3] || (t[3] = (_) => e.$emit("cancel"))
+                    onClick: t[1] || (t[1] = (a) => e.$emit("cancel"))
                   }, {
-                    default: a(() => [...t[10] || (t[10] = [
+                    default: r(() => [...t[5] || (t[5] = [
                       T(" Cancel ", -1)
                     ])]),
                     _: 1
                   }),
-                  s(c, {
+                  o(c, {
                     class: "mx-2",
                     color: "primary",
                     "data-test": "edit-screen-save",
-                    onClick: t[4] || (t[4] = (_) => e.$emit("save", e.editor.getValue()))
+                    onClick: t[2] || (t[2] = (a) => e.$emit("save", i.editorContent))
                   }, {
-                    default: a(() => [...t[11] || (t[11] = [
+                    default: r(() => [...t[6] || (t[6] = [
                       T(" Save ", -1)
                     ])]),
                     _: 1
@@ -370,7 +464,79 @@ function ne(e, t, n, o, i, l) {
     _: 1
   }, 8, ["modelValue"]);
 }
-const ie = /* @__PURE__ */ O(ee, [["render", ne], ["__scopeId", "data-v-00a228d0"]]), le = {
+const re = /* @__PURE__ */ A(se, [["render", oe]]), ae = (e) => V.get(`/openc3-api/autocomplete/keywords/${e}`), de = (e) => V.get(`/openc3-api/autocomplete/data/${e}`), Fe = (e, t) => e.reduce((n, s) => {
+  const i = t(s);
+  return n[i] ? n[i].push(s) : n[i] = [s], n;
+}, {}), ce = (e) => {
+  const t = "(^|[{\\(\\s])", n = `[\\s\\(]f?['"]`, s = "(\\S+\\s?){0,3}";
+  return new RegExp(`${t}${e}${n}${s}$`);
+};
+class G {
+  constructor(t, n = () => {
+  }, s = () => {
+  }) {
+    this.keywordExpressions = [], this.autocompleteData = [], ae(t).then((i) => {
+      this.keywordExpressions = i.data.map(ce), s();
+    }), de(t).then((i) => {
+      this.autocompleteData = i.data, n();
+    });
+  }
+  getCompletions(t, n, s, i, l) {
+    let c = [];
+    const v = n.doc.$lines[s.row].slice(
+      0,
+      s.column
+    );
+    this.keywordExpressions.some((h) => v.match(h)) && (c = this.autocompleteData), l(null, [
+      ...c
+      // Uncomment to also return the built-in autocomplete words (but I found they're not very good and just get in the way when using live autocomplete)
+      // ...session.$mode.$highlightRules.$keywordList.map((word) => ({
+      //   caption: word,
+      //   value: word,
+      //   meta: 'keyword',
+      // })),
+    ]);
+  }
+}
+class ze extends G {
+  constructor() {
+    super("cmd");
+  }
+}
+class Ne extends G {
+  constructor() {
+    super("tlm", () => {
+      this.groupedPacketData = this.autocompleteData.reduce((t, n) => {
+        const s = n.caption.match(/\S+\s\S+/)[0], i = n.snippet.replace(`${s} `, ""), l = {
+          caption: i,
+          snippet: i,
+          meta: "item"
+        };
+        return t[s] ? t[s].push(l) : t[s] = [l], t;
+      }, {}), this.packets = Object.keys(this.groupedPacketData).map((t) => ({
+        caption: t,
+        snippet: t,
+        meta: "packet"
+      }));
+    });
+  }
+  // Override the parent's getCompletions to take advantage of the grouping by packet done in the constructor
+  getCompletions(t, n, s, i, l) {
+    let c = [];
+    const v = n.doc.$lines[s.row].slice(
+      0,
+      s.column
+    );
+    if (this.keywordExpressions.some((h) => v.match(h))) {
+      const h = Object.keys(this.groupedPacketData).find(
+        (m) => v.includes(m)
+      );
+      h ? c = this.groupedPacketData[h] : c = this.packets;
+    }
+    l(null, c);
+  }
+}
+const ue = {
   props: {
     modelValue: Boolean
   },
@@ -420,13 +586,13 @@ const ie = /* @__PURE__ */ O(ee, [["render", ne], ["__scopeId", "data-v-00a228d0
       this.alert = e.text, this.alertType = e.type, this.showAlert = !0;
     },
     update: function() {
-      D.get("/openc3-api/environment").then((e) => {
+      V.get("/openc3-api/environment").then((e) => {
         this.environment = e.data;
       }).catch((e) => {
       });
     },
     addEnvironment: function() {
-      D.post("/openc3-api/environment", {
+      V.post("/openc3-api/environment", {
         data: {
           key: this.key.toUpperCase(),
           value: this.keyValue
@@ -445,7 +611,7 @@ const ie = /* @__PURE__ */ O(ee, [["render", ne], ["__scopeId", "data-v-00a228d0
       this.$dialog.confirm(`Are you sure you want to delete: ${e.key}=${e.value}`, {
         okText: "Delete",
         cancelText: "Cancel"
-      }).then((t) => D.delete(`/openc3-api/environment/${e.name}`)).then((t) => {
+      }).then((t) => V.delete(`/openc3-api/environment/${e.name}`)).then((t) => {
         const n = {
           text: `Removed environment variable: ${e.name}`,
           type: "success"
@@ -460,39 +626,39 @@ const ie = /* @__PURE__ */ O(ee, [["render", ne], ["__scopeId", "data-v-00a228d0
       });
     }
   }
-}, se = { class: "pa-3" };
-function oe(e, t, n, o, i, l) {
-  const c = r("v-spacer"), x = r("v-toolbar"), p = r("v-text-field"), h = r("v-row"), w = r("v-btn"), C = r("v-data-table"), S = r("v-col"), u = r("v-card-text"), d = r("v-card"), y = r("v-dialog");
-  return f(), b(y, {
+}, he = { class: "pa-3" };
+function me(e, t, n, s, i, l) {
+  const c = d("v-spacer"), v = d("v-toolbar"), h = d("v-text-field"), m = d("v-row"), y = d("v-btn"), S = d("v-data-table"), w = d("v-col"), u = d("v-card-text"), a = d("v-card"), g = d("v-dialog");
+  return f(), x(g, {
     modelValue: l.show,
-    "onUpdate:modelValue": t[4] || (t[4] = (m) => l.show = m),
+    "onUpdate:modelValue": t[4] || (t[4] = (p) => l.show = p),
     width: "600"
   }, {
-    default: a(() => [
-      s(d, null, {
-        default: a(() => [
-          v("form", {
-            onSubmit: t[3] || (t[3] = A((...m) => l.addEnvironment && l.addEnvironment(...m), ["prevent"]))
+    default: r(() => [
+      o(a, null, {
+        default: r(() => [
+          _("form", {
+            onSubmit: t[3] || (t[3] = O((...p) => l.addEnvironment && l.addEnvironment(...p), ["prevent"]))
           }, [
-            s(x, { height: "24" }, {
-              default: a(() => [
-                s(c),
-                t[5] || (t[5] = v("span", null, "Global Environment Variables", -1)),
-                s(c)
+            o(v, { height: "24" }, {
+              default: r(() => [
+                o(c),
+                t[5] || (t[5] = _("span", null, "Global Environment Variables", -1)),
+                o(c)
               ]),
               _: 1
             }),
-            s(u, null, {
-              default: a(() => [
-                v("div", se, [
-                  s(h, {
+            o(u, null, {
+              default: r(() => [
+                _("div", he, [
+                  o(m, {
                     dense: "",
                     class: "mb-2"
                   }, {
-                    default: a(() => [
-                      s(p, {
+                    default: r(() => [
+                      o(h, {
                         modelValue: i.search,
-                        "onUpdate:modelValue": t[0] || (t[0] = (m) => i.search = m),
+                        "onUpdate:modelValue": t[0] || (t[0] = (p) => i.search = p),
                         label: "search",
                         type: "text",
                         "data-test": "search",
@@ -508,7 +674,7 @@ function oe(e, t, n, o, i, l) {
                     ]),
                     _: 1
                   }),
-                  s(C, {
+                  o(S, {
                     "item-key": "name",
                     "hide-default-header": "",
                     "data-test": "env-table",
@@ -518,36 +684,36 @@ function oe(e, t, n, o, i, l) {
                     "items-per-page": 5,
                     "items-per-page-options": [5]
                   }, {
-                    "item.actions": a(({ item: m }) => [
-                      s(w, {
+                    "item.actions": r(({ item: p }) => [
+                      o(y, {
                         icon: "mdi-delete",
                         variant: "text",
                         class: "mt-1",
                         "data-test": "item-delete",
                         "aria-label": "Delete Environment Variable",
-                        onClick: (g) => l.deleteEnvironment(m)
+                        onClick: (b) => l.deleteEnvironment(p)
                       }, null, 8, ["onClick"])
                     ]),
                     _: 1
                   }, 8, ["search", "headers", "items"]),
-                  s(h, { dense: "" }, {
-                    default: a(() => [
-                      s(S, null, {
-                        default: a(() => [
-                          s(p, {
+                  o(m, { dense: "" }, {
+                    default: r(() => [
+                      o(w, null, {
+                        default: r(() => [
+                          o(h, {
                             modelValue: i.key,
-                            "onUpdate:modelValue": t[1] || (t[1] = (m) => i.key = m),
+                            "onUpdate:modelValue": t[1] || (t[1] = (p) => i.key = p),
                             label: "Key",
                             "data-test": "env-key"
                           }, null, 8, ["modelValue"])
                         ]),
                         _: 1
                       }),
-                      s(S, null, {
-                        default: a(() => [
-                          s(p, {
+                      o(w, null, {
+                        default: r(() => [
+                          o(h, {
                             modelValue: i.keyValue,
-                            "onUpdate:modelValue": t[2] || (t[2] = (m) => i.keyValue = m),
+                            "onUpdate:modelValue": t[2] || (t[2] = (p) => i.keyValue = p),
                             label: "Value",
                             "data-test": "env-value"
                           }, null, 8, ["modelValue"])
@@ -557,17 +723,17 @@ function oe(e, t, n, o, i, l) {
                     ]),
                     _: 1
                   }),
-                  s(h, { dense: "" }, {
-                    default: a(() => [
-                      s(w, {
+                  o(m, { dense: "" }, {
+                    default: r(() => [
+                      o(y, {
                         block: "",
                         type: "submit",
                         color: "primary",
                         "data-test": "add-env",
                         disabled: !i.key || !i.keyValue,
-                        onClick: A(l.addEnvironment, ["prevent"])
+                        onClick: O(l.addEnvironment, ["prevent"])
                       }, {
-                        default: a(() => [...t[6] || (t[6] = [
+                        default: r(() => [...t[6] || (t[6] = [
                           T(" Add ", -1)
                         ])]),
                         _: 1
@@ -587,10 +753,10 @@ function oe(e, t, n, o, i, l) {
     _: 1
   }, 8, ["modelValue"]);
 }
-const Ie = /* @__PURE__ */ O(le, [["render", oe]]), ae = { class: "tree-node" }, re = { class: "content-wrapper" }, de = ["tabindex"], ce = { key: 1 }, ue = {
+const Re = /* @__PURE__ */ A(ue, [["render", me]]), fe = { class: "tree-node" }, pe = { class: "content-wrapper" }, ge = ["tabindex"], ve = { key: 1 }, ye = {
   key: 2,
   class: "children"
-}, he = {
+}, _e = {
   __name: "TreeNode",
   props: {
     node: {
@@ -608,142 +774,142 @@ const Ie = /* @__PURE__ */ O(le, [["render", oe]]), ae = { class: "tree-node" },
   },
   emits: ["nodeToggled", "request", "delete"],
   setup(e, { emit: t }) {
-    const n = e, o = P(n.node.isOpen || !1), i = j(() => {
-      const u = (d) => {
-        var y;
-        return !n.search || d.path.toLowerCase().includes(n.search.toLowerCase()) ? !0 : !!((y = d.children) != null && y.some(u));
+    const n = e, s = $(n.node.isOpen || !1), i = Y(() => {
+      const u = (a) => {
+        var g;
+        return !n.search || a.path.toLowerCase().includes(n.search.toLowerCase()) ? !0 : !!((g = a.children) != null && g.some(u));
       };
       return u(n.node);
     });
-    q(
+    K(
       () => n.node.isOpen,
       (u) => {
-        o.value = u;
+        s.value = u;
       }
-    ), q(
+    ), K(
       () => n.search,
       (u) => {
-        u ? n.node.isOpen || w() : n.node.isOpen && w();
+        u ? n.node.isOpen || y() : n.node.isOpen && y();
       }
     );
-    const l = t, c = P({
+    const l = t, c = $({
       show: !1,
       text: "",
       x: 0,
       y: 0
-    }), x = (u, d) => {
-      if (!d || d.length <= 50) return;
-      const y = u.target.getBoundingClientRect(), m = y.left, g = y.top;
-      c.value.text = d, c.value.x = m, c.value.y = g - 40, c.value.show = !0;
-    }, p = () => {
+    }), v = (u, a) => {
+      if (!a || a.length <= 50) return;
+      const g = u.target.getBoundingClientRect(), p = g.left, b = g.top;
+      c.value.text = a, c.value.x = p, c.value.y = b - 40, c.value.show = !0;
+    }, h = () => {
       c.value.show = !1;
-    }, h = (u) => {
-      u.children ? (w(), n.type === "save" && l("request", u)) : l("request", u);
-    }, w = () => {
-      n.node.children && (o.value = !o.value, n.node.isOpen = o.value, l("nodeToggled", n.node.id, o.value));
-    }, C = (u, d) => {
-      l("nodeToggled", u, d);
-    }, S = (u) => {
+    }, m = (u) => {
+      u.children ? (y(), n.type === "save" && l("request", u)) : l("request", u);
+    }, y = () => {
+      n.node.children && (s.value = !s.value, n.node.isOpen = s.value, l("nodeToggled", n.node.id, s.value));
+    }, S = (u, a) => {
+      l("nodeToggled", u, a);
+    }, w = (u) => {
       l("request", u);
     };
-    return (u, d) => {
-      const y = r("v-tooltip"), m = r("v-icon"), g = r("v-btn"), I = r("tree-node", !0);
-      return f(), E(R, null, [
-        s(y, {
+    return (u, a) => {
+      const g = d("v-tooltip"), p = d("v-icon"), b = d("v-btn"), C = d("tree-node", !0);
+      return f(), I(R, null, [
+        o(g, {
           modelValue: c.value.show,
-          "onUpdate:modelValue": d[0] || (d[0] = (_) => c.value.show = _),
+          "onUpdate:modelValue": a[0] || (a[0] = (D) => c.value.show = D),
           text: c.value.text,
           location: "top",
-          style: Z(`position: fixed; left: ${c.value.x}px; top: ${c.value.y}px; pointer-events: none;`)
+          style: B(`position: fixed; left: ${c.value.x}px; top: ${c.value.y}px; pointer-events: none;`)
         }, null, 8, ["modelValue", "text", "style"]),
-        v("div", ae, [
-          i.value ? (f(), E("div", {
+        _("div", fe, [
+          i.value ? (f(), I("div", {
             key: 0,
             class: "node-content",
-            onClick: d[4] || (d[4] = (_) => h(e.node))
+            onClick: a[4] || (a[4] = (D) => m(e.node))
           }, [
-            v("div", re, [
-              e.node.children ? (f(), b(m, {
+            _("div", pe, [
+              e.node.children ? (f(), x(p, {
                 key: 0,
                 class: "toggle-icon",
                 style: { "padding-right": "10px" }
               }, {
-                default: a(() => [
+                default: r(() => [
                   T(k(e.node.isOpen ? "mdi-menu-down" : "mdi-menu-right"), 1)
                 ]),
                 _: 1
-              })) : V("", !0),
-              e.node.children ? (f(), b(m, {
+              })) : E("", !0),
+              e.node.children ? (f(), x(p, {
                 key: 1,
                 size: "small",
                 style: { "padding-right": "10px" }
               }, {
-                default: a(() => [...d[5] || (d[5] = [
+                default: r(() => [...a[5] || (a[5] = [
                   T(k("mdi-folder"), -1)
                 ])]),
                 _: 1
-              })) : e.node.title.includes(".rb") ? (f(), b(m, {
+              })) : e.node.title.includes(".rb") ? (f(), x(p, {
                 key: 2,
                 size: "small",
                 style: { "padding-right": "10px" }
               }, {
-                default: a(() => [...d[6] || (d[6] = [
+                default: r(() => [...a[6] || (a[6] = [
                   T(k("mdi-language-ruby"), -1)
                 ])]),
                 _: 1
-              })) : e.node.title.includes(".py") ? (f(), b(m, {
+              })) : e.node.title.includes(".py") ? (f(), x(p, {
                 key: 3,
                 size: "small",
                 style: { "padding-right": "10px" }
               }, {
-                default: a(() => [...d[7] || (d[7] = [
+                default: r(() => [...a[7] || (a[7] = [
                   T(k("mdi-language-python"), -1)
                 ])]),
                 _: 1
-              })) : (f(), b(m, {
+              })) : (f(), x(p, {
                 key: 4,
                 size: "small",
                 style: { "padding-right": "10px" }
               }, {
-                default: a(() => [...d[8] || (d[8] = [
+                default: r(() => [...a[8] || (a[8] = [
                   T(k("mdi-file-document"), -1)
                 ])]),
                 _: 1
               })),
-              v("span", {
+              _("span", {
                 class: "text-h6",
                 tabindex: e.node.children ? -1 : 0,
-                onKeyup: d[1] || (d[1] = N((_) => h(e.node), ["enter"])),
-                onMouseenter: d[2] || (d[2] = (_) => x(_, e.node.title)),
-                onMouseleave: p
-              }, k(e.node.title), 41, de),
-              e.node.title === "__TEMP__" ? (f(), b(g, {
+                onKeyup: a[1] || (a[1] = N((D) => m(e.node), ["enter"])),
+                onMouseenter: a[2] || (a[2] = (D) => v(D, e.node.title)),
+                onMouseleave: h
+              }, k(e.node.title), 41, ge),
+              e.node.title === "__TEMP__" ? (f(), x(b, {
                 key: 5,
                 icon: "mdi-delete",
                 variant: "text",
                 style: { "margin-left": "auto" },
                 "aria-label": "Delete",
-                onClick: d[3] || (d[3] = (_) => l("delete"))
-              })) : V("", !0)
+                onClick: a[3] || (a[3] = (D) => l("delete"))
+              })) : E("", !0)
             ])
-          ])) : (f(), E("div", ce)),
-          e.node.children && e.node.isOpen ? (f(), E("div", ue, [
-            (f(!0), E(R, null, B(e.node.children, (_) => (f(), b(I, {
-              key: _.id,
-              node: _,
+          ])) : (f(), I("div", ve)),
+          e.node.children && e.node.isOpen ? (f(), I("div", ye, [
+            (f(!0), I(R, null, P(e.node.children, (D) => (f(), x(C, {
+              key: D.id,
+              node: D,
               search: e.search,
               type: e.type,
-              onNodeToggled: C,
-              onRequest: S
+              onNodeToggled: S,
+              onRequest: w
             }, null, 8, ["node", "search", "type"]))), 128))
-          ])) : V("", !0)
+          ])) : E("", !0)
         ])
       ], 64);
     };
   }
-}, me = /* @__PURE__ */ O(he, [["__scopeId", "data-v-c9e90a15"]]), fe = {
+}, be = /* @__PURE__ */ A(_e, [["__scopeId", "data-v-c9e90a15"]]), xe = {
   components: {
-    TreeNode: me
+    TreeNode: be
   },
   props: {
     type: {
@@ -821,7 +987,7 @@ For example: TGT1/procedures/test.py or TGT2/lib/inst.rb`, e;
     }
   },
   created() {
-    D.get("/openc3-api/targets").then((e) => {
+    V.get("/openc3-api/targets").then((e) => {
       this.targets = e.data, this.targets.push("__TEMP__"), this.targets.forEach((t) => {
         this.items.push({
           id: t,
@@ -838,15 +1004,15 @@ For example: TGT1/procedures/test.py or TGT2/lib/inst.rb`, e;
       return J(e);
     },
     loadFiles: function(e) {
-      D.get(this.apiUrl, { params: { target: e } }).then((t) => {
+      V.get(this.apiUrl, { params: { target: e } }).then((t) => {
         if (t.data.length === 0) {
-          this.items = this.items.filter((o) => o.id !== e);
+          this.items = this.items.filter((s) => s.id !== e);
           return;
         }
-        for (let o of t.data.sort())
-          this.filepath = o, this.insertFile(this.items, 2, o);
+        for (let s of t.data.sort())
+          this.filepath = s, this.insertFile(this.items, 2, s);
         this.inputFilename && (this.selectedFile = this.inputFilename);
-        const n = this.items.findIndex((o) => o.id === e);
+        const n = this.items.findIndex((s) => s.id === e);
         n !== -1 && (this.items[n].disabled = !1);
       }).catch((t) => {
         this.$emit("error", `Failed to connect to OpenC3. ${t}`);
@@ -865,19 +1031,19 @@ For example: TGT1/procedures/test.py or TGT2/lib/inst.rb`, e;
         if (n.id === t)
           return n.path;
         if (n.children) {
-          const o = this.findItem(n.children, t);
-          if (o)
-            return o;
+          const s = this.findItem(n.children, t);
+          if (s)
+            return s;
         }
       }
       return null;
     },
     exists: function(e, t) {
       let n = !1;
-      for (let o of e) {
-        if (o.path === t || o.path.length > 1 && o.path[o.path.length - 1] === "*" && o.path.slice(0, o.path.length - 1) === t)
+      for (let s of e) {
+        if (s.path === t || s.path.length > 1 && s.path[s.path.length - 1] === "*" && s.path.slice(0, s.path.length - 1) === t)
           return !0;
-        o.children && (n = n || this.exists(o.children, t));
+        s.children && (n = n || this.exists(s.children, t));
       }
       return n;
     },
@@ -888,7 +1054,7 @@ For example: TGT1/procedures/test.py or TGT2/lib/inst.rb`, e;
       this.$dialog.confirm("Are you sure you want to delete all the temporary files?", {
         okText: "Delete",
         cancelText: "Cancel"
-      }).then((e) => D.delete("/script-api/scripts/temp_files")).then((e) => {
+      }).then((e) => V.delete("/script-api/scripts/temp_files")).then((e) => {
         this.$emit("clear-temp"), this.loadFiles("__TEMP__");
       }).catch((e) => {
         this.$notify.serious({
@@ -898,14 +1064,14 @@ For example: TGT1/procedures/test.py or TGT2/lib/inst.rb`, e;
       });
     },
     openSuccess: function() {
-      this.disableButtons = !0, D.get(`${this.apiUrl}/${this.selectedFile}`).then((e) => {
+      this.disableButtons = !0, V.get(`${this.apiUrl}/${this.selectedFile}`).then((e) => {
         const t = {
           name: this.selectedFile,
           contents: e.data.contents
         };
         e.data.suites && (t.suites = JSON.parse(e.data.suites)), e.data.error && (t.error = e.data.error), e.data.success && (t.success = e.data.success);
-        const n = e.data.locked, o = e.data.breakpoints;
-        this.$emit("file", { file: t, locked: n, breakpoints: o }), this.clear();
+        const n = e.data.locked, s = e.data.breakpoints;
+        this.$emit("file", { file: t, locked: n, breakpoints: s }), this.clear();
       }).catch((e) => {
         this.$emit("error", `Failed to open ${this.selectedFile}. ${e}`), this.clear();
       });
@@ -920,54 +1086,54 @@ For example: TGT1/procedures/test.py or TGT2/lib/inst.rb`, e;
       }) : (this.$emit("filename", this.selectedFile), this.clear());
     },
     insertFile: function(e, t, n) {
-      let o = n.split("/");
-      if (o.length === 1) {
+      let s = n.split("/");
+      if (s.length === 1) {
         e.push({
           id: this.filepath,
-          title: o[0],
+          title: s[0],
           file: "ruby",
           path: this.filepath
         });
         return;
       }
-      const i = e.findIndex((l) => l.title === o[0]);
+      const i = e.findIndex((l) => l.title === s[0]);
       i === -1 ? (e.push({
         id: this.filepath.split("/").slice(0, t - 1).join("/"),
-        title: o[0],
+        title: s[0],
         children: [],
         path: this.filepath.split("/").slice(0, t - 1).join("/")
       }), this.insertFile(
         e[e.length - 1].children,
         // Start from the node we just added
         t + 1,
-        o.slice(1).join("/")
+        s.slice(1).join("/")
         // Strip the first part of the path
       )) : this.insertFile(
         e[i].children,
         t + 1,
-        o.slice(1).join("/")
+        s.slice(1).join("/")
       );
     }
   }
-}, pe = { class: "pa-3" }, ge = { class: "overflow-y-auto tree-container" };
-function ve(e, t, n, o, i, l) {
-  const c = r("v-progress-circular"), x = r("v-overlay"), p = r("v-spacer"), h = r("v-toolbar"), w = r("v-row"), C = r("v-text-field"), S = r("tree-node"), u = r("v-btn"), d = r("v-card-text"), y = r("v-card"), m = r("v-dialog");
-  return f(), b(m, {
+}, we = { class: "pa-3" }, ke = { class: "overflow-y-auto tree-container" };
+function Se(e, t, n, s, i, l) {
+  const c = d("v-progress-circular"), v = d("v-overlay"), h = d("v-spacer"), m = d("v-toolbar"), y = d("v-row"), S = d("v-text-field"), w = d("tree-node"), u = d("v-btn"), a = d("v-card-text"), g = d("v-card"), p = d("v-dialog");
+  return f(), x(p, {
     modelValue: l.show,
-    "onUpdate:modelValue": t[4] || (t[4] = (g) => l.show = g),
+    "onUpdate:modelValue": t[4] || (t[4] = (b) => l.show = b),
     persistent: "",
     width: "800",
     onKeydown: [
-      t[5] || (t[5] = N((g) => l.success(), ["enter"])),
-      t[6] || (t[6] = N((g) => i.disableButtons ? null : l.show = !1, ["esc"]))
+      t[5] || (t[5] = N((b) => l.success(), ["enter"])),
+      t[6] || (t[6] = N((b) => i.disableButtons ? null : l.show = !1, ["esc"]))
     ]
   }, {
-    default: a(() => [
-      s(y, null, {
-        default: a(() => [
-          s(x, { "model-value": i.loading }, {
-            default: a(() => [
-              s(c, {
+    default: r(() => [
+      o(g, null, {
+        default: r(() => [
+          o(v, { "model-value": i.loading }, {
+            default: r(() => [
+              o(c, {
                 indeterminate: "",
                 absolute: "",
                 size: "64"
@@ -975,34 +1141,34 @@ function ve(e, t, n, o, i, l) {
             ]),
             _: 1
           }, 8, ["model-value"]),
-          v("form", {
-            onSubmit: t[3] || (t[3] = A((...g) => l.success && l.success(...g), ["prevent"]))
+          _("form", {
+            onSubmit: t[3] || (t[3] = O((...b) => l.success && l.success(...b), ["prevent"]))
           }, [
-            s(h, { height: "24" }, {
-              default: a(() => [
-                s(p),
-                v("span", null, k(l.title), 1),
-                s(p)
+            o(m, { height: "24" }, {
+              default: r(() => [
+                o(h),
+                _("span", null, k(l.title), 1),
+                o(h)
               ]),
               _: 1
             }),
-            s(d, null, {
-              default: a(() => [
-                v("div", pe, [
-                  s(w, null, {
-                    default: a(() => [
+            o(a, null, {
+              default: r(() => [
+                _("div", we, [
+                  o(y, null, {
+                    default: r(() => [
                       T(k(l.helpText), 1)
                     ]),
                     _: 1
                   }),
-                  s(w, {
+                  o(y, {
                     dense: "",
                     class: "mt-5"
                   }, {
-                    default: a(() => [
-                      s(C, {
+                    default: r(() => [
+                      o(S, {
                         modelValue: i.search,
-                        "onUpdate:modelValue": t[0] || (t[0] = (g) => i.search = g),
+                        "onUpdate:modelValue": t[0] || (t[0] = (b) => i.search = b),
                         flat: "",
                         autofocus: "",
                         "hide-details": "",
@@ -1015,21 +1181,21 @@ function ve(e, t, n, o, i, l) {
                     ]),
                     _: 1
                   }),
-                  v("div", ge, [
-                    (f(!0), E(R, null, B(i.items, (g) => (f(), b(S, {
-                      key: `${g.id}`,
-                      node: g,
+                  _("div", ke, [
+                    (f(!0), I(R, null, P(i.items, (b) => (f(), x(w, {
+                      key: `${b.id}`,
+                      node: b,
                       search: i.search,
                       type: n.type,
                       onRequest: l.activeFile,
                       onDelete: l.deleteTemp
                     }, null, 8, ["node", "search", "type", "onRequest", "onDelete"]))), 128))
                   ]),
-                  s(w, { class: "my-2" }, {
-                    default: a(() => [
-                      s(C, {
+                  o(y, { class: "my-2" }, {
+                    default: r(() => [
+                      o(S, {
                         modelValue: i.selectedFile,
-                        "onUpdate:modelValue": t[1] || (t[1] = (g) => i.selectedFile = g),
+                        "onUpdate:modelValue": t[1] || (t[1] = (b) => i.selectedFile = b),
                         "hide-details": "",
                         label: "Filename",
                         "data-test": "file-open-save-filename",
@@ -1038,42 +1204,42 @@ function ve(e, t, n, o, i, l) {
                     ]),
                     _: 1
                   }),
-                  s(w, { dense: "" }, {
-                    default: a(() => [
-                      M(v("div", {
+                  o(y, { dense: "" }, {
+                    default: r(() => [
+                      F(_("div", {
                         class: "my-2 text-red",
                         style: { "white-space": "pre-line" }
                       }, k(l.error), 513), [
-                        [L, l.error]
+                        [z, l.error]
                       ])
                     ]),
                     _: 1
                   }),
-                  s(w, { class: "mt-2" }, {
-                    default: a(() => [
-                      s(p),
-                      s(u, {
+                  o(y, { class: "mt-2" }, {
+                    default: r(() => [
+                      o(h),
+                      o(u, {
                         variant: "outlined",
                         class: "mx-2",
                         "data-test": "file-open-save-cancel-btn",
                         disabled: i.disableButtons,
-                        onClick: t[2] || (t[2] = (g) => l.show = !1)
+                        onClick: t[2] || (t[2] = (b) => l.show = !1)
                       }, {
-                        default: a(() => [...t[7] || (t[7] = [
+                        default: r(() => [...t[7] || (t[7] = [
                           T(" Cancel ", -1)
                         ])]),
                         _: 1
                       }, 8, ["disabled"]),
-                      s(u, {
+                      o(u, {
                         ref: "submitBtn",
                         type: "submit",
                         color: "primary",
                         class: "mx-2",
                         "data-test": "file-open-save-submit-btn",
                         disabled: i.disableButtons || !!l.error,
-                        onClick: A(l.success, ["prevent"])
+                        onClick: O(l.success, ["prevent"])
                       }, {
-                        default: a(() => [
+                        default: r(() => [
                           T(k(l.submit), 1)
                         ]),
                         _: 1
@@ -1093,11 +1259,11 @@ function ve(e, t, n, o, i, l) {
     _: 1
   }, 8, ["modelValue"]);
 }
-const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
+const Le = /* @__PURE__ */ A(xe, [["render", Se]]), W = 20, Te = {
   components: {
-    EditScreenDialog: ie
+    EditScreenDialog: re
   },
-  mixins: [X],
+  mixins: [Z],
   props: {
     target: {
       type: String,
@@ -1162,6 +1328,14 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
     playbackDateTime: {
       type: Date,
       default: null
+    },
+    frozen: {
+      type: Boolean,
+      default: !1
+    },
+    frozenValues: {
+      type: Object,
+      default: null
     }
   },
   emits: [
@@ -1209,7 +1383,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
       screenValues: {},
       updateCounter: 0,
       updater: null,
-      screenId: Y.uniqueId("openc3-screen_"),
+      screenId: H.uniqueId("openc3-screen_"),
       tlmAvailableTimeout: null
     };
   },
@@ -1220,9 +1394,9 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
         for (const n of this.errors) {
           if (e.has(n.message))
             continue;
-          let o = `${n.time}: (${n.type}) ${n.message}
+          let s = `${n.time}: (${n.type}) ${n.message}
 `;
-          t += o, e.add(n.message);
+          t += s, e.add(n.message);
         }
         return t;
       }
@@ -1250,13 +1424,24 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
       handler(e, t) {
         e === "realtime" ? this.updateRefreshInterval() : (clearInterval(this.updater), this.updater = null);
       }
+    },
+    frozen: {
+      handler(e) {
+        e ? this.updater && (clearInterval(this.updater), this.updater = null) : this.playbackMode === "realtime" && this.updateRefreshInterval();
+      }
+    },
+    frozenValues: {
+      immediate: !0,
+      handler(e) {
+        e && this.frozen && Object.assign(this.screenValues, e);
+      }
     }
   },
   // Called when an error from any descendent component is captured
   // We need this because an error can occur from any of the children
   // in the widget stack and are typically thrown on create()
   errorCaptured(e, t, n) {
-    return this.errors.length < z && (e.usage ? this.errors.push({
+    return this.errors.length < W && (e.usage ? this.errors.push({
       type: "usage",
       message: e.message,
       usage: e.usage,
@@ -1270,10 +1455,12 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
     })), !1;
   },
   created() {
-    this.api = new K(), this.configParser = new H(), this.parseDefinition(), this.screenKey = Math.floor(Math.random() * 1e6);
+    this.api = new q(), this.configParser = new X(), this.parseDefinition(), this.screenKey = Math.floor(Math.random() * 1e6);
   },
   mounted() {
-    this.playbackMode === "realtime" && this.updateRefreshInterval(), this.floated && (this.$refs.bar.onmousedown = this.dragMouseDown, this.$refs.bar.parentElement.parentElement.style = "z-index: " + this.zIndex);
+    this.playbackMode === "realtime" && !this.frozen && this.updateRefreshInterval(), this.frozen && this.frozenValues && this.$nextTick(() => {
+      Object.assign(this.screenValues, this.frozenValues);
+    }), this.floated && (this.$refs.bar.onmousedown = this.dragMouseDown, this.$refs.bar.parentElement.parentElement.style = "z-index: " + this.zIndex);
   },
   unmounted() {
     this.updater != null && (clearInterval(this.updater), this.updater = null), this.tlmAvailableTimeout != null && (clearTimeout(this.tlmAvailableTimeout), this.tlmAvailableTimeout = null);
@@ -1308,7 +1495,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
         "",
         !1,
         !0,
-        (e, t, n, o) => {
+        (e, t, n, s) => {
           if (e)
             switch (e) {
               case "SCREEN":
@@ -1366,7 +1553,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
                 ), t[1] === "RAW" && (t[1] = "RAW__" + t[2].toLowerCase()), this.globalSettings.push(t);
                 break;
               default:
-                this.processWidget(e, t, n, o);
+                this.processWidget(e, t, n, s);
                 break;
             }
         }
@@ -1374,7 +1561,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
         let e = [], t = [];
         for (const n of this.dynamicWidgets)
           e.push(n.name), t.push(n.lineNumber);
-        this.errors.length < z && this.errors.push({
+        this.errors.length < W && this.errors.push({
           type: "usage",
           message: `Unknown widget! Are these widgets: ${e.join(",")}?`,
           lineNumber: t.join(","),
@@ -1450,7 +1637,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
     },
     saveEdit: function(e) {
       this.editDialog = !1, this.currentDefinition = e, this.rerender(), this.$nextTick(function() {
-        D.post(
+        V.post(
           "/openc3-api/screen/",
           {
             data: {
@@ -1465,7 +1652,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
       });
     },
     deleteScreen: function() {
-      this.editDialog = !1, D.delete(`/openc3-api/screen/${this.target}/${this.screen}`).then(
+      this.editDialog = !1, V.delete(`/openc3-api/screen/${this.target}/${this.screen}`).then(
         (e) => {
           this.$emit("delete-screen");
         }
@@ -1474,7 +1661,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
     minMaxTransition: function() {
       this.expand = !this.expand, this.$emit("min-max-screen");
     },
-    processWidget: function(e, t, n, o) {
+    processWidget: function(e, t, n, s) {
       let i = null;
       e === "NAMED_WIDGET" && (this.configParser.verify_num_parameters(
         2,
@@ -1484,7 +1671,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
       const l = e.charAt(0).toUpperCase() + e.slice(1).toLowerCase() + "Widget";
       let c = [];
       if (c.push(["__SCREEN_ID__", this.screenId]), i !== null && c.push(["NAMED_WIDGET", i]), e === "VERTICAL" || e === "VERTICALBOX" || e === "HORIZONTAL" || e === "HORIZONTALBOX" || e === "MATRIXBYCOLUMNS" || e === "TABBOOK" || e === "TABITEM" || e === "CANVAS" || e === "RADIOGROUP" || e === "SCROLLWINDOW") {
-        const x = {
+        const v = {
           type: l,
           parameters: t,
           settings: c,
@@ -1492,7 +1679,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
           screenTimeZone: this.timeZone,
           widgets: []
         };
-        this.layoutStack.push(x), this.currentLayout.widgets.push(x), this.currentLayout = x;
+        this.layoutStack.push(v), this.currentLayout.widgets.push(v), this.currentLayout = v;
       } else if (this.$options.components[l])
         this.currentLayout.widgets.push({
           type: l,
@@ -1502,10 +1689,10 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
           screenValues: this.screenValues,
           screenTimeZone: this.timeZone,
           line: n,
-          lineNumber: o
+          lineNumber: s
         });
       else {
-        let x = {
+        let v = {
           type: "DynamicWidget",
           target: this.target,
           parameters: t,
@@ -1514,9 +1701,9 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
           screenTimeZone: this.timeZone,
           name: l,
           line: n,
-          lineNumber: o
+          lineNumber: s
         };
-        this.currentLayout.widgets.push(x), this.dynamicWidgets.push(x);
+        this.currentLayout.widgets.push(v), this.dynamicWidgets.push(v);
       }
     },
     applyGlobalSettings: function(e) {
@@ -1529,6 +1716,8 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
       });
     },
     update: function() {
+      if (this.frozen)
+        return;
       let e = this.playbackMode === "playback" ? this.playbackDateTime : null;
       this.actualScreenItems.length !== 0 && this.api.get_tlm_values(
         this.actualScreenItems,
@@ -1536,10 +1725,12 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
         this.cacheTimeout,
         e
       ).then((t) => {
-        t && t.length > 0 && this.updateValues(t);
+        t && t.length > 0 && (this.updateValues(t), this.errors = this.errors.filter(
+          (n) => n.type !== "error" || !n.message.includes("Request error")
+        ));
       }).catch((t) => {
         let n = JSON.stringify(t, null, 2);
-        this.errors.find((o) => o.message === n) || this.errors.length < z && this.errors.push({
+        this.errors.find((s) => s.message === n) || this.errors.length < W && this.errors.push({
           type: "error",
           message: n,
           time: (/* @__PURE__ */ new Date()).getTime()
@@ -1559,7 +1750,7 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
           e[t].push(this.updateCounter), this.screenValues[this.screenItems[t]] = e[t];
     },
     debouncedUpdateTlmAvailable: function() {
-      this.tlmAvailableTimeout != null && clearTimeout(this.tlmAvailableTimeout), this.tlmAvailableTimeout = setTimeout(() => {
+      this.frozen || (this.tlmAvailableTimeout != null && clearTimeout(this.tlmAvailableTimeout), this.tlmAvailableTimeout = setTimeout(() => {
         this.api.get_tlm_available(this.screenItems).then((e) => {
           if (this.actualScreenItems = e, this.screenItems.length != e.length)
             console.log(
@@ -1570,14 +1761,14 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
           else
             for (let t = 0; t < this.actualScreenItems.length; t++)
               if (this.actualScreenItems[t] === null) {
-                const n = this.screenItems[t].split("__"), o = this.currentDefinition.split(`
-`), i = o.findIndex(
+                const n = this.screenItems[t].split("__"), s = this.currentDefinition.split(`
+`), i = s.findIndex(
                   (l) => l.includes(n[0]) && l.includes(n[1]) && l.includes(n[2])
                 ) + 1;
                 i > 0 ? this.errors.push({
                   type: "usage",
                   message: `Null for ${n.join(" ")}! Does it exist?`,
-                  line: o[i - 1],
+                  line: s[i - 1],
                   // 0-based line array
                   lineNumber: i,
                   time: (/* @__PURE__ */ new Date()).getTime()
@@ -1590,41 +1781,45 @@ const Ve = /* @__PURE__ */ O(fe, [["render", ve]]), z = 20, ye = {
         }).catch((e) => {
           console.log("Error getting tlm available", e), this.actualScreenItems = this.screenItems;
         }), this.tlmAvailableTimeout = null;
-      }, 100);
+      }, 100));
     },
     addItem: function(e) {
-      this.screenItems.push(e), this.screenValues[e] = [null, null, 0], this.debouncedUpdateTlmAvailable();
+      this.screenItems.push(e), this.frozen && this.frozenValues && this.frozenValues[e] ? this.screenValues[e] = this.frozenValues[e] : this.screenValues[e] = [null, null, 0], this.debouncedUpdateTlmAvailable();
     },
     deleteItem: function(e) {
       let t = this.screenItems.indexOf(e);
       this.screenItems.splice(t, 1), this.debouncedUpdateTlmAvailable();
+    },
+    // Get current screen values for saving (used by notebooks)
+    getScreenValues: function() {
+      return JSON.parse(JSON.stringify(this.screenValues));
     }
   }
-}, _e = {
+}, Ce = {
   ref: "screen",
   class: "pa-1",
   style: { position: "relative" }
-}, be = {
+}, Ve = {
   key: 1,
   class: "pa-1",
   style: { position: "relative" }
 };
-function xe(e, t, n, o, i, l) {
-  const c = r("v-btn"), x = r("v-tooltip"), p = r("v-spacer"), h = r("v-toolbar"), w = r("v-overlay"), C = r("vertical-widget"), S = r("v-expand-transition"), u = r("v-card"), d = r("edit-screen-dialog"), y = r("v-textarea"), m = r("v-card-actions"), g = r("v-dialog");
-  return f(), E("div", {
+function Ee(e, t, n, s, i, l) {
+  const c = d("v-btn"), v = d("v-tooltip"), h = d("v-spacer"), m = d("v-toolbar"), y = d("v-overlay"), S = d("vertical-widget"), w = d("v-expand-transition"), u = d("v-card"), a = d("edit-screen-dialog"), g = d("v-textarea"), p = d("v-card-actions"), b = d("v-dialog");
+  return f(), I("div", {
     ref: "bar",
-    style: Z(l.computedStyle)
+    style: B(l.computedStyle)
   }, [
-    n.inline ? V("", !0) : (f(), b(u, {
+    n.inline ? E("", !0) : (f(), x(u, {
       key: 0,
       "min-height": i.height,
       "min-width": i.width,
       style: { cursor: "default" }
     }, {
-      default: a(() => [
-        s(h, { height: "24" }, {
-          default: a(() => [
-            M(s(c, {
+      default: r(() => [
+        o(m, { height: "24" }, {
+          default: r(() => [
+            F(o(c, {
               icon: "mdi-alert",
               variant: "text",
               density: "compact",
@@ -1634,9 +1829,9 @@ function xe(e, t, n, o, i, l) {
                 i.errorDialog = !0;
               })
             }, null, 512), [
-              [L, i.errors.length !== 0]
+              [z, i.errors.length !== 0]
             ]),
-            s(c, {
+            o(c, {
               icon: "mdi-pencil",
               variant: "text",
               density: "compact",
@@ -1644,14 +1839,14 @@ function xe(e, t, n, o, i, l) {
               "aria-label": "Edit Screen",
               onClick: l.openEdit
             }, null, 8, ["onClick"]),
-            n.fixFloated ? V("", !0) : (f(), b(x, {
+            n.fixFloated ? E("", !0) : (f(), x(v, {
               key: 0,
               "open-delay": 600,
               location: "top"
             }, {
-              activator: a(({ props: I }) => [
-                v("div", U(W(I)), [
-                  s(c, {
+              activator: r(({ props: C }) => [
+                _("div", L(U(C)), [
+                  o(c, {
                     icon: i.floated ? "mdi-balloon" : "mdi-view-grid-outline",
                     variant: "text",
                     density: "compact",
@@ -1661,19 +1856,19 @@ function xe(e, t, n, o, i, l) {
                   }, null, 8, ["icon", "aria-label", "onClick"])
                 ], 16)
               ]),
-              default: a(() => [
-                v("span", null, k(i.floated ? "Unfloat Screen" : "Float Screen"), 1)
+              default: r(() => [
+                _("span", null, k(i.floated ? "Unfloat Screen" : "Float Screen"), 1)
               ]),
               _: 1
             })),
-            i.floated ? (f(), b(x, {
+            i.floated ? (f(), x(v, {
               key: 1,
               "open-delay": 600,
               location: "top"
             }, {
-              activator: a(({ props: I }) => [
-                v("div", U(W(I)), [
-                  s(c, {
+              activator: r(({ props: C }) => [
+                _("div", L(U(C)), [
+                  o(c, {
                     icon: "mdi-arrow-up",
                     variant: "text",
                     density: "compact",
@@ -1683,19 +1878,19 @@ function xe(e, t, n, o, i, l) {
                   }, null, 8, ["onClick"])
                 ], 16)
               ]),
-              default: a(() => [
-                t[6] || (t[6] = v("span", null, " Move Screen Up ", -1))
+              default: r(() => [
+                t[6] || (t[6] = _("span", null, " Move Screen Up ", -1))
               ]),
               _: 1
-            })) : V("", !0),
-            i.floated && i.zIndex > n.minZ ? (f(), b(x, {
+            })) : E("", !0),
+            i.floated && i.zIndex > n.minZ ? (f(), x(v, {
               key: 2,
               "open-delay": 600,
               location: "top"
             }, {
-              activator: a(({ props: I }) => [
-                v("div", U(W(I)), [
-                  s(c, {
+              activator: r(({ props: C }) => [
+                _("div", L(U(C)), [
+                  o(c, {
                     icon: "mdi-arrow-down",
                     variant: "text",
                     density: "compact",
@@ -1705,15 +1900,15 @@ function xe(e, t, n, o, i, l) {
                   }, null, 8, ["onClick"])
                 ], 16)
               ]),
-              default: a(() => [
-                t[7] || (t[7] = v("span", null, " Move Screen Down ", -1))
+              default: r(() => [
+                t[7] || (t[7] = _("span", null, " Move Screen Down ", -1))
               ]),
               _: 1
-            })) : V("", !0),
-            s(p),
-            v("span", null, k(n.target) + " " + k(n.screen), 1),
-            s(p),
-            i.expand ? (f(), b(c, {
+            })) : E("", !0),
+            o(h),
+            _("span", null, k(n.target) + " " + k(n.screen), 1),
+            o(h),
+            i.expand ? (f(), x(c, {
               key: 3,
               icon: "mdi-window-minimize",
               variant: "text",
@@ -1721,7 +1916,7 @@ function xe(e, t, n, o, i, l) {
               "data-test": "minimize-screen-icon",
               "aria-label": "Minimize Screen",
               onClick: l.minMaxTransition
-            }, null, 8, ["onClick"])) : (f(), b(c, {
+            }, null, 8, ["onClick"])) : (f(), x(c, {
               key: 4,
               icon: "mdi-window-maximize",
               variant: "text",
@@ -1730,30 +1925,29 @@ function xe(e, t, n, o, i, l) {
               "aria-label": "Maximize Screen",
               onClick: l.minMaxTransition
             }, null, 8, ["onClick"])),
-            n.showClose ? (f(), b(c, {
+            n.showClose ? (f(), x(c, {
               key: 5,
               icon: "mdi-close-box",
               variant: "text",
               density: "compact",
               "data-test": "close-screen-icon",
               "aria-label": "Close Screen",
-              onClick: t[1] || (t[1] = (I) => e.$emit("close-screen"))
-            })) : V("", !0)
+              onClick: t[1] || (t[1] = (C) => e.$emit("close-screen"))
+            })) : E("", !0)
           ]),
           _: 1
         }),
-        i.editDialog ? V("", !0) : (f(), b(S, { key: 0 }, {
-          default: a(() => [
-            M(v("div", _e, [
-              s(w, {
+        i.editDialog ? E("", !0) : (f(), x(w, { key: 0 }, {
+          default: r(() => [
+            F(_("div", Ce, [
+              o(y, {
                 style: { "pointer-events": "none" },
                 "model-value": i.errors.length !== 0,
                 opacity: "0.8",
-                absolute: "",
-                attach: "",
+                contained: "",
                 "scroll-strategy": "none"
               }, null, 8, ["model-value"]),
-              (f(), b(C, {
+              (f(), x(S, {
                 key: i.screenKey,
                 widgets: i.layoutStack[0].widgets,
                 "screen-values": i.screenValues,
@@ -1765,7 +1959,7 @@ function xe(e, t, n, o, i, l) {
                 onCloseAll: l.closeAll
               }, null, 8, ["widgets", "screen-values", "screen-time-zone", "onAddItem", "onDeleteItem", "onOpen", "onClose", "onCloseAll"]))
             ], 512), [
-              [L, i.expand]
+              [z, i.expand]
             ])
           ]),
           _: 1
@@ -1773,16 +1967,15 @@ function xe(e, t, n, o, i, l) {
       ]),
       _: 1
     }, 8, ["min-height", "min-width"])),
-    n.inline ? (f(), E("div", be, [
-      s(w, {
+    n.inline ? (f(), I("div", Ve, [
+      o(y, {
         style: { "pointer-events": "none" },
         "model-value": i.errors.length !== 0,
         opacity: "0.8",
-        absolute: "",
-        attach: "",
+        contained: "",
         "scroll-strategy": "none"
       }, null, 8, ["model-value"]),
-      M(s(c, {
+      F(o(c, {
         icon: "mdi-alert",
         variant: "text",
         density: "compact",
@@ -1792,9 +1985,9 @@ function xe(e, t, n, o, i, l) {
           i.errorDialog = !0;
         })
       }, null, 512), [
-        [L, i.errors.length !== 0]
+        [z, i.errors.length !== 0]
       ]),
-      (f(), b(C, {
+      (f(), x(S, {
         key: i.screenKey,
         widgets: i.layoutStack[0].widgets,
         "screen-values": i.screenValues,
@@ -1805,11 +1998,11 @@ function xe(e, t, n, o, i, l) {
         onClose: l.close,
         onCloseAll: l.closeAll
       }, null, 8, ["widgets", "screen-values", "screen-time-zone", "onAddItem", "onDeleteItem", "onOpen", "onClose", "onCloseAll"]))
-    ])) : V("", !0),
-    i.editDialog ? (f(), b(d, {
+    ])) : E("", !0),
+    i.editDialog ? (f(), x(a, {
       key: 2,
       modelValue: i.editDialog,
-      "onUpdate:modelValue": t[3] || (t[3] = (I) => i.editDialog = I),
+      "onUpdate:modelValue": t[3] || (t[3] = (C) => i.editDialog = C),
       target: n.target,
       screen: n.screen,
       definition: i.currentDefinition,
@@ -1818,48 +2011,48 @@ function xe(e, t, n, o, i, l) {
       onSave: l.saveEdit,
       onCancel: l.cancelEdit,
       onDelete: l.deleteScreen
-    }, null, 8, ["modelValue", "target", "screen", "definition", "keywords", "errors", "onSave", "onCancel", "onDelete"])) : V("", !0),
-    s(g, {
+    }, null, 8, ["modelValue", "target", "screen", "definition", "keywords", "errors", "onSave", "onCancel", "onDelete"])) : E("", !0),
+    o(b, {
       modelValue: i.errorDialog,
-      "onUpdate:modelValue": t[5] || (t[5] = (I) => i.errorDialog = I),
+      "onUpdate:modelValue": t[5] || (t[5] = (C) => i.errorDialog = C),
       width: "60vw"
     }, {
-      default: a(() => [
-        s(h, { height: "24" }, {
-          default: a(() => [
-            s(p),
-            v("span", null, " Screen: " + k(n.target) + " " + k(n.screen) + " Errors ", 1),
-            s(p)
+      default: r(() => [
+        o(m, { height: "24" }, {
+          default: r(() => [
+            o(h),
+            _("span", null, " Screen: " + k(n.target) + " " + k(n.screen) + " Errors ", 1),
+            o(h)
           ]),
           _: 1
         }),
-        s(u, null, {
-          default: a(() => [
-            s(y, {
+        o(u, null, {
+          default: r(() => [
+            o(g, {
               class: "errors",
               readonly: "",
               rows: "13",
               "model-value": l.error
             }, null, 8, ["model-value"]),
-            s(m, { class: "pb-5" }, {
-              default: a(() => [
-                s(p),
-                s(c, {
+            o(p, { class: "pb-5" }, {
+              default: r(() => [
+                o(h),
+                o(c, {
                   variant: "outlined",
                   class: "mr-2",
                   onClick: l.clearErrors
                 }, {
-                  default: a(() => [...t[8] || (t[8] = [
+                  default: r(() => [...t[8] || (t[8] = [
                     T(" Clear Errors ", -1)
                   ])]),
                   _: 1
                 }, 8, ["onClick"]),
-                s(c, {
+                o(c, {
                   variant: "flat",
                   class: "mr-2",
-                  onClick: t[4] || (t[4] = (I) => i.errorDialog = !1)
+                  onClick: t[4] || (t[4] = (C) => i.errorDialog = !1)
                 }, {
-                  default: a(() => [...t[9] || (t[9] = [
+                  default: r(() => [...t[9] || (t[9] = [
                     T(" Close ", -1)
                   ])]),
                   _: 1
@@ -1875,12 +2068,17 @@ function xe(e, t, n, o, i, l) {
     }, 8, ["modelValue"])
   ], 4);
 }
-const Ee = /* @__PURE__ */ O(ye, [["render", xe], ["__scopeId", "data-v-9e7135e1"]]);
+const Ue = /* @__PURE__ */ A(Te, [["render", Ee], ["__scopeId", "data-v-c69254c7"]]);
 export {
-  ie as E,
-  Ve as F,
-  Ee as O,
+  ze as C,
+  re as E,
+  Le as F,
+  Ue as O,
   Q as S,
-  Ie as a
+  Ne as T,
+  ie as a,
+  Re as b,
+  Fe as c,
+  ae as g
 };
-//# sourceMappingURL=Openc3Screen-CDwAWaTl.js.map
+//# sourceMappingURL=Openc3Screen-BxuqrFPG.js.map