@nyaruka/temba-components 0.139.0 → 0.141.0

package/out-tsc/src/flow/Editor.js

@@ -8,11 +8,11 @@ import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
+import { formatIssueMessage, getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
 import { Plumber, calculateFlowchartPath, ARROW_LENGTH, ARROW_HALF_WIDTH, CURSOR_GAP } from './Plumber';
 import { CanvasNode } from './CanvasNode';
-import { getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
 export function findNodeForExit(definition, exitUuid) {
     for (const node of definition.nodes) {
         const exit = node.exits.find((e) => e.uuid === exitUuid);
@@ -22,7 +22,7 @@ export function findNodeForExit(definition, exitUuid) {
     }
     return null;
 }
-const SAVE_QUIET_TIME = 500;
+const SAVE_QUIET_TIME = 2000;
 const DRAG_THRESHOLD = 5;
 const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
 // Offset for positioning dropped action node relative to mouse cursor
@@ -68,12 +68,23 @@ export class Editor extends RapidElement {
     }
     static get styles() {
         return css `
+      #editor-container {
+        position: relative;
+        flex: 1;
+        display: flex;
+        min-height: 0;
+      }
+
       #editor {
         overflow: scroll;
         flex: 1;
         -webkit-font-smoothing: antialiased;
       }
 
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       #grid {
         position: relative;
         background-color: #f9f9f9;
@@ -207,7 +218,7 @@ export class Editor extends RapidElement {
         font-weight: 600;
         line-height: 0.9;
         cursor: pointer;
-        z-index: 500;
+        z-index: 10;
         pointer-events: auto;
         white-space: nowrap;
         user-select: none;
@@ -522,6 +533,91 @@ export class Editor extends RapidElement {
         color: #9ca3af;
         white-space: nowrap;
       }
+
+      .issue-list-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #333;
+      }
+
+      .issue-list-item:hover {
+        background: #fff5f5;
+      }
+
+      .issue-list-item temba-icon {
+        color: tomato;
+        flex-shrink: 0;
+      }
+
+      .empty-flow {
+        position: sticky;
+        top: 80px;
+        left: 0;
+        right: 0;
+        height: 0;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 50;
+      }
+
+      .empty-flow-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        text-align: center;
+        pointer-events: auto;
+      }
+
+      .empty-flow-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #374151;
+      }
+
+      .empty-flow-description {
+        font-size: 14px;
+        color: #6b7280;
+        max-width: 320px;
+        line-height: 1.5;
+      }
+
+      .empty-flow-button {
+        background: var(--color-primary-dark);
+        border: none;
+        color: #fff;
+        padding: 10px 20px;
+        border-radius: var(--curvature);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
+      .empty-flow-button:hover {
+        opacity: 0.9;
+      }
+
+      .save-indicator {
+        position: absolute;
+        top: 8px;
+        right: 16px;
+        padding: 6px 10px;
+        z-index: 10000;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.15s ease-in-out;
+      }
+
+      .save-indicator.visible {
+        opacity: 1;
+      }
     `;
     }
     constructor() {
@@ -550,6 +646,7 @@ export class Editor extends RapidElement {
         // Canvas-relative source exit position (set at drag start)
         this.connectionSourceX = null;
         this.connectionSourceY = null;
+        this.issuesWindowHidden = true;
         this.localizationWindowHidden = true;
         this.translationFilters = {
             categories: false
@@ -563,12 +660,15 @@ export class Editor extends RapidElement {
         this.revisions = [];
         this.viewingRevision = null;
         this.isLoadingRevisions = false;
+        this.isSaving = false;
+        this.saveError = null;
         this.preRevertState = null;
         this.translationCache = new Map();
         // NodeEditor state - handles both node and action editing
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.dialogOrigin = null;
         this.isCreatingNewNode = false;
         this.pendingNodePosition = null;
         // Canvas drop state for dragging actions to canvas
@@ -596,6 +696,7 @@ export class Editor extends RapidElement {
         this.setupGlobalEventListeners();
         if (changes.has('flow')) {
             getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+            this.fetchRevisions();
         }
         this.plumber.on('connection:drag', (connection) => {
             this.dragFromNodeId = connection.data.nodeId;
@@ -723,9 +824,14 @@ export class Editor extends RapidElement {
         }
         if (changes.has('dirtyDate')) {
             if (this.dirtyDate) {
+                this.isSaving = true;
                 this.debouncedSave();
             }
         }
+        if (changes.has('saveError') && this.saveError) {
+            this.showSaveErrorDialog(this.saveError);
+            this.saveError = null;
+        }
         if (changes.has('languageCode')) {
             this.translationCache.clear();
         }
@@ -767,11 +873,15 @@ export class Editor extends RapidElement {
     }
     saveChanges(definitionOverride) {
         const definition = definitionOverride || this.definition;
-        // post the flow definition to the server
+        this.isSaving = true;
         return getStore()
             .postJSON(`/flow/revisions/${this.flow}/`, definition)
             .then((response) => {
             var _b;
+            if (response.status < 200 || response.status >= 300) {
+                this.saveError = this.extractErrorMessage(response);
+                return;
+            }
             // Update flow info and revision with the response data
             if (response.json) {
                 const state = getStore().getState();
@@ -781,16 +891,53 @@ export class Editor extends RapidElement {
                 if (((_b = response.json.revision) === null || _b === void 0 ? void 0 : _b.revision) !== undefined) {
                     state.setRevision(response.json.revision.revision);
                 }
-                // if the revisions window is open, refresh the list
-                if (!this.revisionsWindowHidden) {
-                    this.fetchRevisions();
-                }
+                // Refresh revisions list so the tab visibility stays up to date
+                this.fetchRevisions();
             }
+            getStore().getState().setDirtyDate(null);
         })
             .catch((error) => {
             console.error('Failed to save flow:', error);
+            if (error instanceof Response) {
+                this.saveError = `Server error (${error.status}). Your changes have not been saved.`;
+            }
+            else {
+                this.saveError =
+                    'Unable to reach the server. Please check your connection and try again.';
+            }
+        })
+            .finally(() => {
+            this.isSaving = false;
+        });
+    }
+    extractErrorMessage(response) {
+        if (response.json) {
+            if (typeof response.json.detail === 'string') {
+                return response.json.detail;
+            }
+            if (typeof response.json.error === 'string') {
+                return response.json.error;
+            }
+            if (typeof response.json.description === 'string') {
+                return response.json.description;
+            }
+        }
+        return `Save failed with status ${response.status}.`;
+    }
+    showSaveErrorDialog(message) {
+        const dialog = document.createElement('temba-dialog');
+        dialog.header = 'Save Failed';
+        dialog.primaryButtonName = '';
+        dialog.cancelButtonName = 'Dismiss';
+        const content = document.createElement('div');
+        content.style.cssText = 'padding: 20px; font-size: 14px; line-height: 1.5;';
+        content.textContent = message;
+        dialog.appendChild(content);
+        document.body.appendChild(dialog);
+        dialog.open = true;
+        dialog.addEventListener('temba-dialog-hidden', () => {
+            document.body.removeChild(dialog);
         });
-        getStore().getState().setDirtyDate(null);
     }
     startActivityFetching() {
         // Don't start if simulator is active
@@ -822,6 +969,10 @@ export class Editor extends RapidElement {
         }
         const state = store.getState();
         state.fetchActivity(activityEndpoint).then(() => {
+            // Guard against responses arriving after the editor is disconnected
+            if (!this.isConnected) {
+                return;
+            }
             // Schedule next fetch with exponential backoff (max 5 minutes)
             this.activityInterval = Math.min(60000 * 5, this.activityInterval + 100);
             if (this.activityTimer !== null) {
@@ -853,6 +1004,9 @@ export class Editor extends RapidElement {
         if (canvas) {
             canvas.removeEventListener('contextmenu', this.boundCanvasContextMenu);
         }
+        // Clear all flow-specific data from the store so stale data
+        // isn't briefly visible when a different flow is opened.
+        zustand.getState().clearFlowData();
     }
     setupGlobalEventListeners() {
         document.addEventListener('mousemove', this.boundMouseMove);
@@ -915,6 +1069,7 @@ export class Editor extends RapidElement {
             return;
         if (this.isReadOnly())
             return;
+        this.blurActiveContentEditable();
         const element = event.currentTarget;
         // Only start dragging if clicking on the element itself, not on exits or other interactive elements
         const target = event.target;
@@ -974,10 +1129,22 @@ export class Editor extends RapidElement {
         // We clicked on empty canvas space, start selection
         this.handleCanvasMouseDown(event);
     }
+    blurActiveContentEditable() {
+        var _b;
+        let active = document.activeElement;
+        while ((_b = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) {
+            active = active.shadowRoot.activeElement;
+        }
+        if (active instanceof HTMLElement &&
+            active.getAttribute('contenteditable') === 'true') {
+            active.blur();
+        }
+    }
     handleCanvasMouseDown(event) {
         var _b;
         if (this.isReadOnly())
             return;
+        this.blurActiveContentEditable();
         const target = event.target;
         if (target.id === 'canvas' || target.id === 'grid') {
             // Ignore clicks on exits
@@ -1538,6 +1705,25 @@ export class Editor extends RapidElement {
             });
         }
     }
+    handleEmptyFlowClick(event) {
+        const editor = this.querySelector('#editor');
+        if (!editor)
+            return;
+        // Scroll to top-left
+        editor.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+        // Place node at top-left of the canvas
+        const nodeLeft = 0;
+        const nodeTop = 0;
+        const canvasMenu = this.querySelector('temba-canvas-menu');
+        if (canvasMenu) {
+            const button = event.currentTarget;
+            const rect = button.getBoundingClientRect();
+            const menuWidth = 265;
+            const menuX = rect.left + rect.width / 2 - menuWidth / 2;
+            const menuY = rect.bottom + 8;
+            canvasMenu.show(menuX, menuY, { x: nodeLeft, y: nodeTop }, false);
+        }
+    }
     handleCanvasMenuSelection(event) {
         const selection = event.detail;
         const store = getStore();
@@ -1692,6 +1878,10 @@ export class Editor extends RapidElement {
     handleActionEditRequested(event) {
         // For action editing, we set the action and find the corresponding node
         this.editingAction = event.detail.action;
+        this.dialogOrigin =
+            event.detail.originX != null
+                ? { x: event.detail.originX, y: event.detail.originY }
+                : null;
         // Find the node that contains this action
         const nodeUuid = event.detail.nodeUuid;
         const node = this.definition.nodes.find((n) => n.uuid === nodeUuid);
@@ -1727,6 +1917,10 @@ export class Editor extends RapidElement {
     handleNodeEditRequested(event) {
         this.editingNode = event.detail.node;
         this.editingNodeUI = event.detail.nodeUI;
+        this.dialogOrigin =
+            event.detail.originX != null
+                ? { x: event.detail.originX, y: event.detail.originY }
+                : null;
     }
     handleNodeDeleted(event) {
         const nodeUuid = event.detail.uuid;
@@ -1797,6 +1991,7 @@ export class Editor extends RapidElement {
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.dialogOrigin = null;
     }
     handleActionEditCanceled() {
         // If we were creating a new node, just discard it
@@ -2253,6 +2448,7 @@ export class Editor extends RapidElement {
         }
         this.localizationWindowHidden = false;
         this.revisionsWindowHidden = true;
+        this.issuesWindowHidden = true;
         const alreadySelected = languages.some((lang) => lang.code === this.languageCode);
         if (!alreadySelected) {
             this.handleLanguageChange(languages[0].code);
@@ -2460,11 +2656,42 @@ export class Editor extends RapidElement {
         }
         this.autoTranslating = false;
     }
+    handleIssuesTabClick() {
+        this.issuesWindowHidden = false;
+        this.revisionsWindowHidden = true;
+        this.localizationWindowHidden = true;
+    }
+    handleIssuesWindowClosed() {
+        this.issuesWindowHidden = true;
+    }
+    handleIssueItemClick(issue) {
+        var _b;
+        const issuesWindow = document.getElementById('issues-window');
+        issuesWindow === null || issuesWindow === void 0 ? void 0 : issuesWindow.handleClose();
+        this.issuesWindowHidden = true;
+        this.focusNode(issue.node_uuid);
+        const node = this.definition.nodes.find((n) => n.uuid === issue.node_uuid);
+        if (!node)
+            return;
+        if (issue.action_uuid) {
+            const action = (_b = node.actions) === null || _b === void 0 ? void 0 : _b.find((a) => a.uuid === issue.action_uuid);
+            if (action) {
+                this.editingAction = action;
+                this.editingNode = node;
+                this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+            }
+        }
+        else {
+            this.editingNode = node;
+            this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+        }
+    }
     handleRevisionsTabClick() {
         if (this.revisionsWindowHidden) {
             this.fetchRevisions();
             this.revisionsWindowHidden = false;
-            this.localizationWindowHidden = true; // Close other window
+            this.issuesWindowHidden = true;
+            this.localizationWindowHidden = true;
         }
     }
     handleRevisionsWindowClosed() {
@@ -2565,14 +2792,61 @@ export class Editor extends RapidElement {
         // Fetch the latest version of the flow to ensure the store is up to date
         getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
     }
+    renderIssuesTab() {
+        var _b;
+        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.length) || !this.revisionsWindowHidden)
+            return '';
+        return html `
+      <temba-floating-tab
+        id="issues-tab"
+        icon="alert_warning"
+        label="Flow Issues"
+        color="tomato"
+        order="1"
+        .hidden=${!this.issuesWindowHidden}
+        @temba-button-clicked=${this.handleIssuesTabClick}
+      ></temba-floating-tab>
+    `;
+    }
+    renderIssuesWindow() {
+        var _b;
+        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.length))
+            return '';
+        return html `
+      <temba-floating-window
+        id="issues-window"
+        header="Flow Issues"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="tomato"
+        .hidden=${this.issuesWindowHidden}
+        @temba-dialog-hidden=${this.handleIssuesWindowClosed}
+      >
+        <div style="display:flex; flex-direction:column; gap:2px;">
+          ${this.flowIssues.map((issue) => html `
+              <div
+                class="issue-list-item"
+                @click=${() => this.handleIssueItemClick(issue)}
+              >
+                <temba-icon name="alert_warning" size="1.2"></temba-icon>
+                <span>${formatIssueMessage(issue)}</span>
+              </div>
+            `)}
+        </div>
+      </temba-floating-window>
+    `;
+    }
     renderRevisionsTab() {
+        if (this.revisions.length <= 1)
+            return '';
         return html `
       <temba-floating-tab
         id="revisions-tab"
         icon="revisions"
         label="Revisions"
         color="rgb(142, 94, 167)"
-        order="1"
+        order="2"
         .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
         @temba-button-clicked=${this.handleRevisionsTabClick}
       ></temba-floating-tab>
@@ -2833,6 +3107,11 @@ export class Editor extends RapidElement {
     `;
     }
     renderLocalizationTab() {
+        var _b;
+        if (!this.revisionsWindowHidden)
+            return '';
+        if (((_b = this.definition) === null || _b === void 0 ? void 0 : _b.nodes.length) === 0)
+            return '';
         const languages = this.getLocalizationLanguages();
         if (!languages.length) {
             return html ``;
@@ -2843,7 +3122,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
-        order="2"
+        order="3"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -2890,23 +3169,44 @@ export class Editor extends RapidElement {
       ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
         const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
-        return html `${style} ${this.renderRevisionsWindow()}
-      ${this.renderLocalizationWindow()} ${this.renderAutoTranslateDialog()}
-      <div id="editor">
-        <div
-          id="grid"
-          class="${this.viewingRevision ? 'viewing-revision' : ''}"
-          style="min-width:100%;width:${this.canvasSize.width}px; height:${this
-            .canvasSize.height}px"
-        >
+        return html `${style} ${this.renderIssuesWindow()}
+      ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
+      <div id="editor-container">
+        <div id="editor">
+          ${this.definition &&
+            this.definition.nodes.length === 0 &&
+            !this.isReadOnly()
+            ? html `<div class="empty-flow">
+                <div class="empty-flow-content">
+                  <div class="empty-flow-title">This flow is empty</div>
+                  <div class="empty-flow-description">
+                    Get started by adding your first action or split to define
+                    how this flow will work.
+                  </div>
+                  <button
+                    class="empty-flow-button"
+                    @click=${this.handleEmptyFlowClick}
+                  >
+                    Add first step
+                  </button>
+                </div>
+              </div>`
+            : ''}
           <div
-            id="canvas"
-            class="${getClasses({
+            id="grid"
+            class="${this.viewingRevision ? 'viewing-revision' : ''}"
+            style="min-width:100%;width:${this.canvasSize
+            .width}px; height:${this.canvasSize.height}px"
+          >
+            <div
+              id="canvas"
+              class="${getClasses({
             'viewing-revision': !!this.viewingRevision,
             'read-only-connections': !!this.viewingRevision || this.isTranslating
         })}"
-          >
-            ${this.definition
+            >
+              ${this.definition
             ? repeat([...this.definition.nodes].sort((a, b) => a.uuid.localeCompare(b.uuid)), (node) => node.uuid, (node) => {
                 var _b, _c, _d;
                 const position = ((_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position) || {
@@ -2920,43 +3220,49 @@ export class Editor extends RapidElement {
                 const isFlowStart = this.definition.nodes.length > 0 &&
                     this.definition.nodes[0].uuid === node.uuid;
                 return html `<temba-flow-node
-                      class="draggable ${dragging ? 'dragging' : ''} ${selected
-                    ? 'selected'
-                    : ''} ${isFlowStart ? 'flow-start' : ''}"
-                      @mousedown=${this.handleMouseDown.bind(this)}
-                      uuid=${node.uuid}
-                      data-node-uuid=${node.uuid}
-                      style="left:${position.left}px; top:${position.top}px;transition: all 0.2s ease-in-out;"
-                      .plumber=${this.plumber}
-                      .node=${node}
-                      .ui=${this.definition._ui.nodes[node.uuid]}
-                      @temba-node-deleted=${(event) => {
+                        class="draggable ${dragging
+                    ? 'dragging'
+                    : ''} ${selected ? 'selected' : ''} ${isFlowStart
+                    ? 'flow-start'
+                    : ''}"
+                        @mousedown=${this.handleMouseDown.bind(this)}
+                        uuid=${node.uuid}
+                        data-node-uuid=${node.uuid}
+                        style="left:${position.left}px; top:${position.top}px;transition: all 0.2s ease-in-out;"
+                        .plumber=${this.plumber}
+                        .node=${node}
+                        .ui=${this.definition._ui.nodes[node.uuid]}
+                        @temba-node-deleted=${(event) => {
                     this.deleteNodes([event.detail.uuid]);
                 }}
-                    ></temba-flow-node>`;
+                      ></temba-flow-node>`;
             })
             : html `<temba-loading></temba-loading>`}
-            ${repeat(Object.entries(stickies), ([uuid]) => uuid, ([uuid, sticky]) => {
+              ${repeat(Object.entries(stickies), ([uuid]) => uuid, ([uuid, sticky]) => {
             var _b;
             const position = sticky.position || { left: 0, top: 0 };
             const dragging = this.isDragging && ((_b = this.currentDragItem) === null || _b === void 0 ? void 0 : _b.uuid) === uuid;
             const selected = this.selectedItems.has(uuid);
             return html `<temba-sticky-note
-                  class="draggable ${dragging ? 'dragging' : ''} ${selected
+                    class="draggable ${dragging ? 'dragging' : ''} ${selected
                 ? 'selected'
                 : ''}"
-                  @mousedown=${this.handleMouseDown.bind(this)}
-                  style="left:${position.left}px; top:${position.top}px;"
-                  uuid=${uuid}
-                  .data=${sticky}
-                  .dragging=${dragging}
-                  .selected=${selected}
-                ></temba-sticky-note>`;
+                    @mousedown=${this.handleMouseDown.bind(this)}
+                    style="left:${position.left}px; top:${position.top}px;"
+                    uuid=${uuid}
+                    .data=${sticky}
+                    .dragging=${dragging}
+                    .selected=${selected}
+                  ></temba-sticky-note>`;
         })}
-            ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
-            ${this.renderConnectionPlaceholder()}
+              ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
+              ${this.renderConnectionPlaceholder()}
+            </div>
           </div>
         </div>
+        <div class="save-indicator ${this.isSaving ? 'visible' : ''}">
+          <temba-loading units="3" size="8"></temba-loading>
+        </div>
       </div>
 
       ${this.editingNode || this.editingAction
@@ -2964,6 +3270,7 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
+            .dialogOrigin=${this.dialogOrigin}
             @temba-node-saved=${(e) => this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e) => this.handleActionSaved(e.detail.action)}
             @temba-node-edit-cancelled=${this.handleNodeEditCanceled}
@@ -2977,7 +3284,8 @@ export class Editor extends RapidElement {
             .features=${this.features}
           ></temba-node-type-selector>`
             : ''}
-      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
+      ${this.renderIssuesTab()} ${this.renderRevisionsTab()}
+      ${this.renderLocalizationTab()} `;
     }
 }
 __decorate([
@@ -3016,6 +3324,9 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.getCurrentActivity())
 ], Editor.prototype, "activityData", void 0);
+__decorate([
+    fromStore(zustand, (state) => { var _b; return ((_b = state.flowInfo) === null || _b === void 0 ? void 0 : _b.issues) || []; })
+], Editor.prototype, "flowIssues", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isDragging", void 0);
@@ -3046,6 +3357,9 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "isValidTarget", void 0);
+__decorate([
+    state()
+], Editor.prototype, "issuesWindowHidden", void 0);
 __decorate([
     state()
 ], Editor.prototype, "localizationWindowHidden", void 0);
@@ -3079,6 +3393,12 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "isLoadingRevisions", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isSaving", void 0);
+__decorate([
+    state()
+], Editor.prototype, "saveError", void 0);
 __decorate([
     state()
 ], Editor.prototype, "editingNode", void 0);