@nyaruka/temba-components 0.137.0 → 0.138.4

package/out-tsc/src/display/FloatingTab.js

@@ -10,6 +10,7 @@ export class FloatingTab extends RapidElement {
         this.color = '#6B7280';
         this.top = -1; // -1 means auto-calculate position
         this.hidden = false;
+        this.autoPositioned = false;
     }
     static get styles() {
         return css `
@@ -72,7 +73,13 @@ export class FloatingTab extends RapidElement {
     connectedCallback() {
         super.connectedCallback();
         FloatingTab.allTabs.push(this);
-        this.updatePosition();
+    }
+    firstUpdated() {
+        // only auto-calculate position if no top was provided (still at default -1)
+        if (this.top === -1) {
+            this.autoPositioned = true;
+            this.updatePosition();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -80,8 +87,12 @@ export class FloatingTab extends RapidElement {
         if (index > -1) {
             FloatingTab.allTabs.splice(index, 1);
         }
-        // update positions of remaining tabs
-        FloatingTab.allTabs.forEach((tab) => tab.updatePosition());
+        // update positions of remaining tabs that use auto-positioning
+        FloatingTab.allTabs.forEach((tab) => {
+            if (tab.autoPositioned) {
+                tab.updatePosition();
+            }
+        });
     }
     updatePosition() {
         // auto-calculate position based on index
@@ -90,8 +101,8 @@ export class FloatingTab extends RapidElement {
             this.top = 100; // default fallback
         }
         else {
-            // start at 100px and stack with 10px gap between tabs
-            this.top = 100 + index * (FloatingTab.TAB_HEIGHT + 0);
+            // start at 150px and stack with TAB_HEIGHT gap between tabs
+            this.top = 150 + index * (FloatingTab.TAB_HEIGHT + 0);
         }
     }
     updated(changes) {
@@ -99,9 +110,6 @@ export class FloatingTab extends RapidElement {
         if (changes.has('hidden')) {
             this.classList.toggle('hidden', this.hidden);
         }
-        if (changes.has('top')) {
-            this.updatePosition();
-        }
     }
     handleClick() {
         // hide all tabs when one is clicked

package/out-tsc/src/display/FloatingTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingTab.js","sourceRoot":"","sources":["../../../src/display/FloatingTab.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\n\nexport class FloatingTab extends RapidElement {\n  static get styles() {\n    return css`\n      .tab.hidden {\n        transform: translateX(100%);\n      }\n      .tab {\n        position: fixed;\n        right: 0;\n        z-index: 4998;\n        transition: transform var(--transition-duration, 300ms) ease-in-out;\n        display: flex;\n        align-items: center;\n        padding: 12px;\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n        cursor: pointer;\n        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);\n        transition: all calc(var(--transition-duration, 300ms) * 0.7)\n          ease-in-out;\n        user-select: none;\n      }\n\n      .tab:hover {\n        padding-right: 16px;\n        box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3);\n      }\n\n      .icon-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 16px;\n        height: 16px;\n      }\n\n      temba-icon {\n        --icon-color: white;\n      }\n\n      .label {\n        color: white;\n        font-weight: 500;\n        font-size: 16px;\n        max-width: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        margin-left: 0;\n        opacity: 0;\n        transition: all var(--transition-duration, 300ms) ease-in-out;\n      }\n\n      .tab:hover .label {\n        max-width: 200px;\n        margin-left: 12px;\n        opacity: 1;\n      }\n    `;\n  }\n\n  static TAB_HEIGHT = 50; // height of tab for auto-stacking\n  static allTabs: FloatingTab[] = [];\n\n  @property({ type: String })\n  icon: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  @property({ type: Number })\n  top = -1; // -1 means auto-calculate position\n\n  @property({ type: Boolean })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    FloatingTab.allTabs.push(this);\n    this.updatePosition();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index > -1) {\n      FloatingTab.allTabs.splice(index, 1);\n    }\n    // update positions of remaining tabs\n    FloatingTab.allTabs.forEach((tab) => tab.updatePosition());\n  }\n\n  private updatePosition() {\n    // auto-calculate position based on index\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index === -1) {\n      this.top = 100; // default fallback\n    } else {\n      // start at 100px and stack with 10px gap between tabs\n      this.top = 100 + index * (FloatingTab.TAB_HEIGHT + 0);\n    }\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      this.classList.toggle('hidden', this.hidden);\n    }\n    if (changes.has('top')) {\n      this.updatePosition();\n    }\n  }\n\n  private handleClick() {\n    // hide all tabs when one is clicked\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      action: 'toggle'\n    });\n  }\n\n  public static showAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = false;\n    });\n  }\n\n  public static hideAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n  }\n\n  public render(): TemplateResult {\n    const tabStyle = `\n      background-color: ${this.color};\n      top: ${this.top}px;\n    `;\n\n    const classes = getClasses({\n      tab: true,\n      hidden: this.hidden\n    });\n\n    return html`\n      <div class=\"${classes}\" style=\"${tabStyle}\" @click=${this.handleClick}>\n        <div class=\"icon-container\">\n          ${this.icon\n            ? html`<temba-icon size=\"1.5\" name=\"${this.icon}\"></temba-icon>`\n            : ''}\n        </div>\n        <div class=\"label\">${this.label}</div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FloatingTab.js","sourceRoot":"","sources":["../../../src/display/FloatingTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAsEE,UAAK,GAAG,SAAS,CAAC;QAGlB,QAAG,GAAG,CAAC,CAAC,CAAC,CAAC,mCAAmC;QAG7C,WAAM,GAAG,KAAK,CAAC;QAEP,mBAAc,GAAG,KAAK,CAAC;IA8FjC,CAAC;IA3KC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDT,CAAC;IACJ,CAAC;IAsBD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAES,YAAY;QACpB,4EAA4E;QAC5E,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;YACf,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACvC,CAAC;QACD,+DAA+D;QAC/D,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAClC,IAAI,GAAG,CAAC,cAAc,EAAE,CAAC;gBACvB,GAAG,CAAC,cAAc,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,yCAAyC;QACzC,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,mBAAmB;QACrC,CAAC;aAAM,CAAC;YACN,4DAA4D;YAC5D,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,CAAC,WAAW,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAEM,OAAO,CACZ,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,oCAAoC;QACpC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAClC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;YAClD,MAAM,EAAE,QAAQ;SACjB,CAAC,CAAC;IACL,CAAC;IAEM,MAAM,CAAC,WAAW;QACvB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAClC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,MAAM,CAAC,WAAW;QACvB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAClC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAG;0BACK,IAAI,CAAC,KAAK;aACvB,IAAI,CAAC,GAAG;KAChB,CAAC;QAEF,MAAM,OAAO,GAAG,UAAU,CAAC;YACzB,GAAG,EAAE,IAAI;YACT,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO,YAAY,QAAQ,YAAY,IAAI,CAAC,WAAW;;YAE/D,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,IAAI,iBAAiB;YAChE,CAAC,CAAC,EAAE;;6BAEa,IAAI,CAAC,KAAK;;KAElC,CAAC;IACJ,CAAC;;AA/GM,sBAAU,GAAG,EAAE,AAAL,CAAM,CAAC,kCAAkC;AACnD,mBAAO,GAAkB,EAAE,AAApB,CAAqB;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACb","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\n\nexport class FloatingTab extends RapidElement {\n  static get styles() {\n    return css`\n      .tab.hidden {\n        transform: translateX(100%);\n      }\n      .tab {\n        position: fixed;\n        right: 0;\n        z-index: 4998;\n        transition: transform var(--transition-duration, 300ms) ease-in-out;\n        display: flex;\n        align-items: center;\n        padding: 12px;\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n        cursor: pointer;\n        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);\n        transition: all calc(var(--transition-duration, 300ms) * 0.7)\n          ease-in-out;\n        user-select: none;\n      }\n\n      .tab:hover {\n        padding-right: 16px;\n        box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3);\n      }\n\n      .icon-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 16px;\n        height: 16px;\n      }\n\n      temba-icon {\n        --icon-color: white;\n      }\n\n      .label {\n        color: white;\n        font-weight: 500;\n        font-size: 16px;\n        max-width: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        margin-left: 0;\n        opacity: 0;\n        transition: all var(--transition-duration, 300ms) ease-in-out;\n      }\n\n      .tab:hover .label {\n        max-width: 200px;\n        margin-left: 12px;\n        opacity: 1;\n      }\n    `;\n  }\n\n  static TAB_HEIGHT = 50; // height of tab for auto-stacking\n  static allTabs: FloatingTab[] = [];\n\n  @property({ type: String })\n  icon: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  @property({ type: Number })\n  top = -1; // -1 means auto-calculate position\n\n  @property({ type: Boolean })\n  hidden = false;\n\n  private autoPositioned = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    FloatingTab.allTabs.push(this);\n  }\n\n  protected firstUpdated(): void {\n    // only auto-calculate position if no top was provided (still at default -1)\n    if (this.top === -1) {\n      this.autoPositioned = true;\n      this.updatePosition();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index > -1) {\n      FloatingTab.allTabs.splice(index, 1);\n    }\n    // update positions of remaining tabs that use auto-positioning\n    FloatingTab.allTabs.forEach((tab) => {\n      if (tab.autoPositioned) {\n        tab.updatePosition();\n      }\n    });\n  }\n\n  private updatePosition() {\n    // auto-calculate position based on index\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index === -1) {\n      this.top = 100; // default fallback\n    } else {\n      // start at 150px and stack with TAB_HEIGHT gap between tabs\n      this.top = 150 + index * (FloatingTab.TAB_HEIGHT + 0);\n    }\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      this.classList.toggle('hidden', this.hidden);\n    }\n  }\n\n  private handleClick() {\n    // hide all tabs when one is clicked\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      action: 'toggle'\n    });\n  }\n\n  public static showAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = false;\n    });\n  }\n\n  public static hideAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n  }\n\n  public render(): TemplateResult {\n    const tabStyle = `\n      background-color: ${this.color};\n      top: ${this.top}px;\n    `;\n\n    const classes = getClasses({\n      tab: true,\n      hidden: this.hidden\n    });\n\n    return html`\n      <div class=\"${classes}\" style=\"${tabStyle}\" @click=${this.handleClick}>\n        <div class=\"icon-container\">\n          ${this.icon\n            ? html`<temba-icon size=\"1.5\" name=\"${this.icon}\"></temba-icon>`\n            : ''}\n        </div>\n        <div class=\"label\">${this.label}</div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -13,6 +13,7 @@ export class CanvasMenu extends RapidElement {
         this.x = 0;
         this.y = 0;
         this.open = false;
+        this.showStickyNote = true;
         this.clickPosition = { x: 0, y: 0 };
     }
     static get styles() {
@@ -94,10 +95,11 @@ export class CanvasMenu extends RapidElement {
             document.removeEventListener('click', this._clickOutsideHandler);
         }
     }
-    show(x, y, clickPosition) {
+    show(x, y, clickPosition, showStickyNote = true) {
         this.x = x;
         this.y = y;
         this.clickPosition = clickPosition;
+        this.showStickyNote = showStickyNote;
         this.open = true;
         // Adjust position after menu renders to ensure it fits on screen
         requestAnimationFrame(() => {
@@ -129,15 +131,22 @@ export class CanvasMenu extends RapidElement {
             this.y = adjustedY;
         }
     }
-    close() {
-        this.open = false;
+    close(fireCanceledEvent = true) {
+        if (this.open) {
+            this.open = false;
+            // Fire close event so parent can clean up, but only if not from a selection
+            if (fireCanceledEvent) {
+                this.fireCustomEvent(CustomEventType.Canceled, {});
+            }
+        }
     }
     handleMenuItemClick(action) {
         this.fireCustomEvent(CustomEventType.Selection, {
             action,
             position: this.clickPosition
         });
-        this.close();
+        // Close without firing canceled event since we made a selection
+        this.close(false);
     }
     render() {
         if (!this.open) {
@@ -169,18 +178,24 @@ export class CanvasMenu extends RapidElement {
           </div>
         </div>
 
-        <div class="divider"></div>
+        ${this.showStickyNote
+            ? html `
+              <div class="divider"></div>
 
-        <div
-          class="menu-item"
-          @click=${() => this.handleMenuItemClick('sticky')}
-        >
-          <temba-icon name="note" size="1.25"></temba-icon>
-          <div class="menu-item-content">
-            <div class="menu-item-title">Add Sticky Note</div>
-            <div class="menu-item-description">Add a note to the canvas</div>
-          </div>
-        </div>
+              <div
+                class="menu-item"
+                @click=${() => this.handleMenuItemClick('sticky')}
+              >
+                <temba-icon name="note" size="1.25"></temba-icon>
+                <div class="menu-item-content">
+                  <div class="menu-item-title">Add Sticky Note</div>
+                  <div class="menu-item-description">
+                    Add a note to the canvas
+                  </div>
+                </div>
+              </div>
+            `
+            : ''}
       </div>
     `;
     }
@@ -194,6 +209,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CanvasMenu.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], CanvasMenu.prototype, "showStickyNote", void 0);
 __decorate([
     state()
 ], CanvasMenu.prototype, "clickPosition", void 0);

package/out-tsc/src/flow/CanvasMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasMenu.js","sourceRoot":"","sources":["../../../src/flow/CanvasMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\n\n/**\n * Event detail for canvas menu selection\n */\nexport interface CanvasMenuSelection {\n  action: 'sticky' | 'action' | 'split';\n  position: { x: number; y: number };\n}\n\n/**\n * CanvasMenu - A popup menu for adding items to the flow canvas\n * Displayed when double-clicking on empty canvas space\n */\nexport class CanvasMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: fixed;\n        z-index: 10000;\n        display: block;\n        pointer-events: none;\n      }\n\n      .menu {\n        position: fixed;\n        background: white;\n        border-radius: var(--curvature);\n        box-shadow: var(--dropdown-shadow);\n        padding: 0.5em 0;\n        width: 265px;\n        pointer-events: auto;\n      }\n\n      .menu-item {\n        padding: 0.75em 1.5em;\n        cursor: pointer;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.75em;\n        transition: background-color 0.15s ease;\n      }\n\n      .menu-item:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n\n      .menu-item temba-icon {\n        --icon-color: var(--color-text);\n        margin-top: 0.15em;\n      }\n\n      .menu-item-content {\n        display: flex;\n        flex-direction: column;\n        gap: 0.15em;\n      }\n\n      .menu-item-title {\n        font-weight: 500;\n        font-size: 1rem;\n        color: var(--color-text-dark);\n      }\n\n      .menu-item-description {\n        font-size: 0.85rem;\n        color: var(--color-text);\n      }\n\n      .divider {\n        height: 1px;\n        background: rgba(0, 0, 0, 0.1);\n        margin: 0.5em 0;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  public x = 0;\n\n  @property({ type: Number })\n  public y = 0;\n\n  @property({ type: Boolean })\n  public open = false;\n\n  @state()\n  private clickPosition = { x: 0, y: 0 };\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    // Close menu when clicking outside\n    const handleClickOutside = (e: MouseEvent) => {\n      if (this.open && !this.contains(e.target as Node)) {\n        this.close();\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n\n    // Store cleanup function\n    (this as any)._clickOutsideHandler = handleClickOutside;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if ((this as any)._clickOutsideHandler) {\n      document.removeEventListener('click', (this as any)._clickOutsideHandler);\n    }\n  }\n\n  public show(x: number, y: number, clickPosition: { x: number; y: number }) {\n    this.x = x;\n    this.y = y;\n    this.clickPosition = clickPosition;\n    this.open = true;\n\n    // Adjust position after menu renders to ensure it fits on screen\n    requestAnimationFrame(() => {\n      this.adjustPosition();\n    });\n  }\n\n  private adjustPosition(): void {\n    const menuElement = this.shadowRoot?.querySelector('.menu') as HTMLElement;\n    if (!menuElement) return;\n\n    const menuRect = menuElement.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const margin = 10; // margin from viewport edges\n\n    let adjustedX = this.x;\n    let adjustedY = this.y;\n\n    // Check if menu goes off the right edge\n    if (this.x + menuRect.width + margin > viewportWidth) {\n      adjustedX = viewportWidth - menuRect.width - margin;\n    }\n\n    // Check if menu goes off the bottom edge\n    if (this.y + menuRect.height + margin > viewportHeight) {\n      adjustedY = viewportHeight - menuRect.height - margin;\n    }\n\n    // Update position if needed\n    if (adjustedX !== this.x || adjustedY !== this.y) {\n      this.x = adjustedX;\n      this.y = adjustedY;\n    }\n  }\n\n  public close() {\n    this.open = false;\n  }\n\n  private handleMenuItemClick(action: 'sticky' | 'action' | 'split') {\n    this.fireCustomEvent(CustomEventType.Selection, {\n      action,\n      position: this.clickPosition\n    } as CanvasMenuSelection);\n    this.close();\n  }\n\n  public render(): TemplateResult {\n    if (!this.open) {\n      return html``;\n    }\n\n    return html`\n      <div class=\"menu\" style=\"left: ${this.x}px; top: ${this.y}px;\">\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('action')}\n        >\n          <temba-icon name=\"action\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Action</div>\n            <div class=\"menu-item-description\">\n              Send messages, update contacts\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('split')}\n        >\n          <temba-icon name=\"split\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Split</div>\n            <div class=\"menu-item-description\">Branch based on conditions</div>\n          </div>\n        </div>\n\n        <div class=\"divider\"></div>\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('sticky')}\n        >\n          <temba-icon name=\"note\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Sticky Note</div>\n            <div class=\"menu-item-description\">Add a note to the canvas</div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"CanvasMenu.js","sourceRoot":"","sources":["../../../src/flow/CanvasMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\n\n/**\n * Event detail for canvas menu selection\n */\nexport interface CanvasMenuSelection {\n  action: 'sticky' | 'action' | 'split';\n  position: { x: number; y: number };\n}\n\n/**\n * CanvasMenu - A popup menu for adding items to the flow canvas\n * Displayed when double-clicking on empty canvas space\n */\nexport class CanvasMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: fixed;\n        z-index: 10000;\n        display: block;\n        pointer-events: none;\n      }\n\n      .menu {\n        position: fixed;\n        background: white;\n        border-radius: var(--curvature);\n        box-shadow: var(--dropdown-shadow);\n        padding: 0.5em 0;\n        width: 265px;\n        pointer-events: auto;\n      }\n\n      .menu-item {\n        padding: 0.75em 1.5em;\n        cursor: pointer;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.75em;\n        transition: background-color 0.15s ease;\n      }\n\n      .menu-item:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n\n      .menu-item temba-icon {\n        --icon-color: var(--color-text);\n        margin-top: 0.15em;\n      }\n\n      .menu-item-content {\n        display: flex;\n        flex-direction: column;\n        gap: 0.15em;\n      }\n\n      .menu-item-title {\n        font-weight: 500;\n        font-size: 1rem;\n        color: var(--color-text-dark);\n      }\n\n      .menu-item-description {\n        font-size: 0.85rem;\n        color: var(--color-text);\n      }\n\n      .divider {\n        height: 1px;\n        background: rgba(0, 0, 0, 0.1);\n        margin: 0.5em 0;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  public x = 0;\n\n  @property({ type: Number })\n  public y = 0;\n\n  @property({ type: Boolean })\n  public open = false;\n\n  @property({ type: Boolean })\n  public showStickyNote = true;\n\n  @state()\n  private clickPosition = { x: 0, y: 0 };\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    // Close menu when clicking outside\n    const handleClickOutside = (e: MouseEvent) => {\n      if (this.open && !this.contains(e.target as Node)) {\n        this.close();\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n\n    // Store cleanup function\n    (this as any)._clickOutsideHandler = handleClickOutside;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if ((this as any)._clickOutsideHandler) {\n      document.removeEventListener('click', (this as any)._clickOutsideHandler);\n    }\n  }\n\n  public show(\n    x: number,\n    y: number,\n    clickPosition: { x: number; y: number },\n    showStickyNote: boolean = true\n  ) {\n    this.x = x;\n    this.y = y;\n    this.clickPosition = clickPosition;\n    this.showStickyNote = showStickyNote;\n    this.open = true;\n\n    // Adjust position after menu renders to ensure it fits on screen\n    requestAnimationFrame(() => {\n      this.adjustPosition();\n    });\n  }\n\n  private adjustPosition(): void {\n    const menuElement = this.shadowRoot?.querySelector('.menu') as HTMLElement;\n    if (!menuElement) return;\n\n    const menuRect = menuElement.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const margin = 10; // margin from viewport edges\n\n    let adjustedX = this.x;\n    let adjustedY = this.y;\n\n    // Check if menu goes off the right edge\n    if (this.x + menuRect.width + margin > viewportWidth) {\n      adjustedX = viewportWidth - menuRect.width - margin;\n    }\n\n    // Check if menu goes off the bottom edge\n    if (this.y + menuRect.height + margin > viewportHeight) {\n      adjustedY = viewportHeight - menuRect.height - margin;\n    }\n\n    // Update position if needed\n    if (adjustedX !== this.x || adjustedY !== this.y) {\n      this.x = adjustedX;\n      this.y = adjustedY;\n    }\n  }\n\n  public close(fireCanceledEvent: boolean = true) {\n    if (this.open) {\n      this.open = false;\n      // Fire close event so parent can clean up, but only if not from a selection\n      if (fireCanceledEvent) {\n        this.fireCustomEvent(CustomEventType.Canceled, {});\n      }\n    }\n  }\n\n  private handleMenuItemClick(action: 'sticky' | 'action' | 'split') {\n    this.fireCustomEvent(CustomEventType.Selection, {\n      action,\n      position: this.clickPosition\n    } as CanvasMenuSelection);\n    // Close without firing canceled event since we made a selection\n    this.close(false);\n  }\n\n  public render(): TemplateResult {\n    if (!this.open) {\n      return html``;\n    }\n\n    return html`\n      <div class=\"menu\" style=\"left: ${this.x}px; top: ${this.y}px;\">\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('action')}\n        >\n          <temba-icon name=\"action\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Action</div>\n            <div class=\"menu-item-description\">\n              Send messages, update contacts\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('split')}\n        >\n          <temba-icon name=\"split\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Split</div>\n            <div class=\"menu-item-description\">Branch based on conditions</div>\n          </div>\n        </div>\n\n        ${this.showStickyNote\n          ? html`\n              <div class=\"divider\"></div>\n\n              <div\n                class=\"menu-item\"\n                @click=${() => this.handleMenuItemClick('sticky')}\n              >\n                <temba-icon name=\"note\" size=\"1.25\"></temba-icon>\n                <div class=\"menu-item-content\">\n                  <div class=\"menu-item-title\">Add Sticky Note</div>\n                  <div class=\"menu-item-description\">\n                    Add a note to the canvas\n                  </div>\n                </div>\n              </div>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -22,11 +22,8 @@ export class CanvasNode extends RapidElement {
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
         min-width: 200px;
         border-radius: var(--curvature);
-        
         color: #333;
-        cursor: move;
         user-select: none;
-
       }
 
       /* Flow start indicator */
@@ -109,7 +106,7 @@ export class CanvasNode extends RapidElement {
         opacity: 1;
       }
 
-      .translating-hidden {
+      .read-only-hidden {
         visibility: hidden !important;
         pointer-events: none !important;
       }
@@ -304,6 +301,12 @@ export class CanvasNode extends RapidElement {
       .exit.connected:hover {
         background-color: var(--color-connectors, #e6e6e6);
       }
+
+      .exit.connected.read-only, .exit.connected.read-only:hover {
+        background-color: #fff;
+        pointer-events: none !important;
+        cursor: default;
+      }
       
       .exit.removing, .exit.removing:hover {
         background-color: var(--color-error);
@@ -405,6 +408,7 @@ export class CanvasNode extends RapidElement {
         super();
         // Track exits that are in "removing" state
         this.exitRemovalTimeouts = new Map();
+        this.connectionTimeout = null;
         // Set of exit UUIDs that are in the removing state
         this.exitRemovingState = new Set();
         // Track actions that are in "removing" state
@@ -460,19 +464,25 @@ export class CanvasNode extends RapidElement {
         if (changes.has('node')) {
             // Only proceed if plumber is available (for tests that don't set it up)
             if (this.plumber) {
-                this.plumber.removeNodeConnections(this.node.uuid);
+                if (this.connectionTimeout) {
+                    clearTimeout(this.connectionTimeout);
+                }
+                // Pass exit IDs explicitly to avoid DOM querying dependency
+                const exitIds = this.node.exits.map((e) => e.uuid);
+                this.plumber.removeNodeConnections(this.node.uuid, exitIds);
                 // make our initial connections
-                for (const exit of this.node.exits) {
-                    if (!exit.destination_uuid) {
-                        // if we have no destination, then we are a source
-                        // so make our source endpoint
+                // We use setTimeout to allow for DOM updates to complete before querying for exits
+                this.connectionTimeout = window.setTimeout(() => {
+                    for (const exit of this.node.exits) {
                         this.plumber.makeSource(exit.uuid);
+                        if (exit.destination_uuid) {
+                            this.plumber.connectIds(this.node.uuid, exit.uuid, exit.destination_uuid);
+                        }
                     }
-                    else {
-                        this.plumber.connectIds(this.node.uuid, exit.uuid, exit.destination_uuid);
-                    }
-                }
-                this.plumber.revalidate([this.node.uuid]);
+                    // Note: revalidation is handled by plumber's processPendingConnections which calls repaintEverything
+                    this.connectionTimeout = null;
+                    this.plumber.revalidate([this.node.uuid]);
+                }, 0);
             }
             const ele = this.parentElement;
             if (ele) {
@@ -482,6 +492,14 @@ export class CanvasNode extends RapidElement {
         }
     }
     disconnectedCallback() {
+        // Force cleanup of connections for this node
+        if (this.plumber && this.node) {
+            if (this.connectionTimeout) {
+                clearTimeout(this.connectionTimeout);
+                this.connectionTimeout = null;
+            }
+            this.plumber.forgetNode(this.node.uuid);
+        }
         // Remove the event listener when the component is removed
         super.disconnectedCallback();
         // Remove external drag event listeners
@@ -503,6 +521,10 @@ export class CanvasNode extends RapidElement {
         // Clear the removing state
         this.exitRemovingState.clear();
         this.actionRemovingState.clear();
+        // only proceed if plumber is available (for tests that don't set it up)
+        if (this.plumber) {
+            this.plumber.removeNodeConnections(this.node.uuid, this.node.exits.map((e) => e.uuid));
+        }
     }
     handleExitClick(event, exit) {
         event.preventDefault();
@@ -1047,23 +1069,19 @@ export class CanvasNode extends RapidElement {
         return html `<div class="cn-title" style="background:${color}">
       ${((_c = this.ui) === null || _c === void 0 ? void 0 : _c.type) === 'execute_actions'
             ? html `<temba-icon
-            class="drag-handle ${this.isTranslating
-                ? 'translating-hidden'
-                : ''}"
+            class="drag-handle ${this.isReadOnly() ? 'read-only-hidden' : ''}"
             name="sort"
           ></temba-icon>`
             : ((_e = (_d = this.node) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.length) > 1
                 ? html `<temba-icon
-            class="drag-handle ${this.isTranslating
-                    ? 'translating-hidden'
-                    : ''}"
+            class="drag-handle ${this.isReadOnly() ? 'read-only-hidden' : ''}"
             name="sort"
           ></temba-icon>`
                 : html `<div class="title-spacer"></div>`}
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
       <div
-        class="remove-button ${this.isTranslating ? 'translating-hidden' : ''}"
+        class="remove-button ${this.isReadOnly() ? 'read-only-hidden' : ''}"
         @click=${(e) => this.handleActionRemoveClick(e, action, index)}
         title="Remove action"
       >
@@ -1091,7 +1109,7 @@ export class CanvasNode extends RapidElement {
                 : html `${config.name}`}
       </div>
       <div
-        class="remove-button ${this.isTranslating ? 'translating-hidden' : ''}"
+        class="remove-button ${this.isReadOnly() ? 'read-only-hidden' : ''}"
         @click=${(e) => this.handleNodeRemoveClick(e)}
         title="Remove node"
       >
@@ -1292,12 +1310,16 @@ export class CanvasNode extends RapidElement {
         class=${getClasses({
             exit: true,
             connected: !!exit.destination_uuid,
-            removing: this.exitRemovingState.has(exit.uuid)
+            removing: this.exitRemovingState.has(exit.uuid),
+            'read-only': this.isReadOnly()
         })}
         @click=${(e) => this.handleExitClick(e, exit)}
       ></div>
     </div>`;
     }
+    isReadOnly() {
+        return this.viewingRevision || this.isTranslating;
+    }
     render() {
         var _b;
         if (!this.node || !this.ui) {
@@ -1370,7 +1392,7 @@ export class CanvasNode extends RapidElement {
             : html `<div class="action-exits">
               ${repeat(this.node.exits, (exit) => exit.uuid, (exit) => this.renderExit(exit))}
             </div>`}
-        ${this.ui.type === 'execute_actions' && !this.isTranslating
+        ${this.ui.type === 'execute_actions' && !this.isReadOnly()
             ? html `<div
               class="add-action-button"
               @click=${(e) => this.handleAddActionClick(e)}
@@ -1398,6 +1420,9 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.languageCode)
 ], CanvasNode.prototype, "languageCode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.viewingRevision)
+], CanvasNode.prototype, "viewingRevision", void 0);
 __decorate([
     fromStore(zustand, (state) => state.flowDefinition)
 ], CanvasNode.prototype, "flowDefinition", void 0);