@nyaruka/temba-components 0.138.6 → 0.140.0

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

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { RapidElement } from '../RapidElement';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { getClasses } from '../utils';
 import { WebChatIcon } from '../webchat';
 var ThumbnailContentType;
@@ -27,6 +27,11 @@ export class Thumbnail extends RapidElement {
         this.preview = true;
         // cached tile URL for location thumbnails
         this.tileUrl = '';
+        // audio player state
+        this.audio = null;
+        this.audioPlaying = false;
+        this.audioProgress = 0;
+        this.audioDuration = 0;
     }
     static get styles() {
         return css `
@@ -72,11 +77,57 @@ export class Thumbnail extends RapidElement {
       }
 
       .thumb.document,
-      .thumb.audio,
       .thumb.video {
         border: 1px solid #eee;
       }
 
+      .audio-player {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 8px;
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: var(--curvature);
+        cursor: default;
+      }
+
+      .audio-play-btn {
+        cursor: pointer;
+        color: #666;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .audio-play-btn:hover {
+        color: #333;
+      }
+
+      .audio-progress-bar {
+        flex: 1;
+        height: 3px;
+        background: #ddd;
+        border-radius: 2px;
+        overflow: hidden;
+        min-width: 60px;
+        cursor: pointer;
+      }
+
+      .audio-progress-fill {
+        height: 100%;
+        background: var(--color-primary, #2387ca);
+        border-radius: 2px;
+        transition: width 0.15s linear;
+      }
+
+      .audio-time {
+        font-size: 11px;
+        color: #999;
+        flex-shrink: 0;
+        min-width: 28px;
+        text-align: right;
+      }
+
       .wrapper:hover .thumb.icon {
       }
 
@@ -109,6 +160,58 @@ export class Thumbnail extends RapidElement {
       }
     `;
     }
+    handleAudioPlayClick(e) {
+        e.stopPropagation();
+        if (!this.audio) {
+            this.audio = new Audio(this.url);
+            this.audio.addEventListener('timeupdate', () => {
+                if (this.audio.duration) {
+                    this.audioProgress = this.audio.currentTime / this.audio.duration;
+                    this.audioDuration = this.audio.duration;
+                }
+            });
+            this.audio.addEventListener('ended', () => {
+                this.audioPlaying = false;
+                this.audioProgress = 0;
+            });
+            this.audio.addEventListener('error', () => {
+                this.audioPlaying = false;
+                this.audioProgress = 0;
+            });
+        }
+        if (this.audioPlaying) {
+            this.audio.pause();
+            this.audioPlaying = false;
+        }
+        else {
+            this.audio.play().catch(() => {
+                this.audioPlaying = false;
+            });
+            this.audioPlaying = true;
+        }
+    }
+    handleProgressClick(e) {
+        e.stopPropagation();
+        if (!this.audio || !this.audio.duration)
+            return;
+        const bar = e.currentTarget;
+        const rect = bar.getBoundingClientRect();
+        const pct = (e.clientX - rect.left) / rect.width;
+        this.audio.currentTime = pct * this.audio.duration;
+    }
+    formatTime(seconds) {
+        const s = Math.floor(seconds);
+        const m = Math.floor(s / 60);
+        const rem = s % 60;
+        return `${m}:${rem.toString().padStart(2, '0')}`;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.audio) {
+            this.audio.pause();
+            this.audio = null;
+        }
+    }
     // convert lat/lng to tile coordinates for OSM
     latLngToTile(lat, lng, zoom) {
         const n = Math.pow(2, zoom);
@@ -198,6 +301,9 @@ export class Thumbnail extends RapidElement {
             const osmUrl = `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=15/${this.latitude}/${this.longitude}`;
             window.open(osmUrl, '_blank');
         }
+        else if (this.contentType === ThumbnailContentType.AUDIO) {
+            // audio has inline controls, no click action needed
+        }
         else {
             window.open(this.url, '_blank');
         }
@@ -209,10 +315,14 @@ export class Thumbnail extends RapidElement {
         window.open(this.url, '_blank');
     }
     render() {
+        var _a;
         return html `
       <div
         @click=${this.handleThumbnailClicked.bind(this)}
         class="${getClasses({ wrapper: true, zoom: this.zoom })}"
+        style="${this.contentType === ThumbnailContentType.AUDIO
+            ? 'cursor: default;'
+            : ''}"
         url=${this.url}
       >
         ${this.contentType === ThumbnailContentType.IMAGE && this.preview
@@ -220,14 +330,53 @@ export class Thumbnail extends RapidElement {
           class="observe thumb ${this.contentType}"
           src="${this.url}"
         ></img></div>`
-            : html `
+            : this.contentType === ThumbnailContentType.AUDIO
+                ? html `<div class="audio-player">
+              <div class="audio-play-btn" @click=${this.handleAudioPlayClick}>
+                ${this.audioPlaying
+                    ? html `<svg
+                      viewBox="0 0 24 24"
+                      width="14"
+                      height="14"
+                      fill="currentColor"
+                    >
+                      <rect x="5" y="3" width="4" height="18" />
+                      <rect x="15" y="3" width="4" height="18" />
+                    </svg>`
+                    : html `<svg
+                      viewBox="0 0 24 24"
+                      width="14"
+                      height="14"
+                      fill="currentColor"
+                    >
+                      <polygon points="6,3 20,12 6,21" />
+                    </svg>`}
+              </div>
+              <div
+                class="audio-progress-bar"
+                @click=${this.handleProgressClick}
+              >
+                <div
+                  class="audio-progress-fill"
+                  style="width: ${this.audioProgress * 100}%"
+                ></div>
+              </div>
+              <div class="audio-time">
+                ${this.audioDuration
+                    ? this.formatTime(this.audioPlaying || this.audioProgress > 0
+                        ? ((_a = this.audio) === null || _a === void 0 ? void 0 : _a.currentTime) || 0
+                        : this.audioDuration)
+                    : ''}
+              </div>
+            </div>`
+                : html `
               ${this.contentType === ThumbnailContentType.LOCATION
-                ? html `<img
+                    ? html `<img
                     style="height:125px;margin-bottom:-3px;border-radius:var(--curvature);"
                     src="${this.tileUrl}"
                     alt="Location preview"
                   />`
-                : html `<div
+                    : html `<div
                     style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
                   >
                     <temba-icon
@@ -267,4 +416,13 @@ __decorate([
 __decorate([
     property({ type: String, attribute: false })
 ], Thumbnail.prototype, "tileUrl", void 0);
+__decorate([
+    state()
+], Thumbnail.prototype, "audioPlaying", void 0);
+__decorate([
+    state()
+], Thumbnail.prototype, "audioProgress", void 0);
+__decorate([
+    state()
+], Thumbnail.prototype, "audioDuration", void 0);
 //# sourceMappingURL=Thumbnail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/display/Thumbnail.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValueMap, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from './Lightbox';\nimport { WebChatIcon } from '../webchat';\n\nenum ThumbnailContentType {\n  IMAGE = 'image',\n  AUDIO = 'audio',\n  VIDEO = 'video',\n  DOCUMENT = 'document',\n  LOCATION = 'location',\n  OTHER = 'other'\n}\n\nconst ThumbnailIcons = {\n  [ThumbnailContentType.IMAGE]: WebChatIcon.attachment_image,\n  [ThumbnailContentType.AUDIO]: WebChatIcon.attachment_audio,\n  [ThumbnailContentType.VIDEO]: WebChatIcon.attachment_video,\n  [ThumbnailContentType.DOCUMENT]: WebChatIcon.attachment_document,\n  [ThumbnailContentType.OTHER]: WebChatIcon.attachment\n};\n\nexport class Thumbnail extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline;\n      }\n\n      .wrapper {\n        padding: var(--thumb-padding, 0.4em);\n        background: var(--thumb-background, #fff);\n        box-shadow: var(--widget-box-shadow);\n        cursor: pointer;\n        border-radius: calc(var(--curvature) * 1.5);\n        border: 0px solid #f3f3f3;\n      }\n\n      .wrapper.zoom {\n        border: none;\n        padding: 0 !important;\n        border-radius: 0 !important;\n        overflow: hidden !important;\n      }\n\n      .zoom .thumb {\n        border-radius: 0px !important;\n        width: calc(var(--thumb-size, 4em) + 0.8em);\n        max-height: calc(90vh - 10em);\n      }\n\n      .thumb {\n        background-size: cover;\n        background-position: center;\n        background-repeat: no-repeat;\n        border-radius: var(--curvature);\n        max-height: calc(var(--thumb-size, 4em) * 2);\n        max-width: calc(var(--thumb-size, 4em) * 2);\n        height: var(--thumb-size, 4em);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 400;\n        color: var(--thumb-icon, #bbb);\n      }\n\n      .thumb.document,\n      .thumb.audio,\n      .thumb.video {\n        border: 1px solid #eee;\n      }\n\n      .wrapper:hover .thumb.icon {\n      }\n\n      .viewer {\n        display: block;\n      }\n\n      .zoom .viewer {\n        display: block;\n      }\n\n      .download {\n        display: none;\n        position: absolute;\n        right: 0em;\n        bottom: 0em;\n        border-radius: var(--curvature);\n        transform: scale(0.2) translate(3em, 3em);\n        padding: 0.4em;\n      }\n\n      .zoom .download {\n        display: block;\n        background: rgba(0, 0, 0, 0.5);\n      }\n\n      .zoom .download:hover {\n        background: rgba(0, 0, 0, 0.6);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  attachment: string;\n\n  @property({ type: Number })\n  ratio: number = 0;\n\n  @property({ type: Boolean })\n  preview: boolean = true;\n\n  @property({ type: Boolean, attribute: false })\n  zoom: boolean;\n\n  @property({ type: String, attribute: true })\n  contentType: string;\n\n  @property({ type: Number, attribute: false })\n  latitude: number;\n\n  @property({ type: Number, attribute: false })\n  longitude: number;\n\n  // cached tile URL for location thumbnails\n  @property({ type: String, attribute: false })\n  private tileUrl: string = '';\n\n  // convert lat/lng to tile coordinates for OSM\n  private latLngToTile(lat: number, lng: number, zoom: number) {\n    const n = Math.pow(2, zoom);\n    const x = Math.floor(((lng + 180) / 360) * n);\n    const latRad = (lat * Math.PI) / 180;\n    const y = Math.floor(\n      ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) *\n        n\n    );\n    return { x, y, z: zoom };\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (\n      changes.has('contentType') &&\n      this.contentType === ThumbnailContentType.IMAGE\n    ) {\n      const toObserve = this.shadowRoot.querySelector('.observe');\n      if (toObserve) {\n        new ResizeObserver((e, observer) => {\n          if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {\n            this.ratio = toObserve.clientHeight / toObserve.clientWidth;\n            this.preview =\n              this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);\n            observer.disconnect();\n          }\n        }).observe(toObserve);\n      }\n    }\n\n    // convert our attachment to a url and label\n    if (changes.has('attachment')) {\n      if (this.attachment) {\n        const splitIndex = this.attachment.indexOf(':');\n        if (splitIndex === -1) {\n          this.url = this.attachment;\n        } else {\n          const contentType = this.attachment.substring(0, splitIndex);\n          this.url = this.attachment.substring(splitIndex + 1);\n\n          if (contentType.startsWith('image')) {\n            this.contentType = ThumbnailContentType.IMAGE;\n          } else if (contentType.startsWith('audio')) {\n            this.contentType = ThumbnailContentType.AUDIO;\n          } else if (contentType.startsWith('video')) {\n            this.contentType = ThumbnailContentType.VIDEO;\n          } else if (contentType.startsWith('application')) {\n            this.contentType = ThumbnailContentType.DOCUMENT;\n          } else if (contentType.startsWith('geo')) {\n            this.contentType = ThumbnailContentType.LOCATION;\n            // Parse coordinates from URL which is already stripped of \"geo:\" prefix\n            // Format is now just: lat,lng\n            const coords = this.url.match(/^([^,]+),([^,]+)/);\n            if (coords) {\n              this.latitude = parseFloat(coords[1]);\n              this.longitude = parseFloat(coords[2]);\n            }\n          } else {\n            this.contentType = ThumbnailContentType.OTHER;\n          }\n        }\n      }\n    }\n\n    // calculate tile URL when latitude/longitude changes\n    if (changes.has('latitude') || changes.has('longitude')) {\n      if (\n        this.latitude !== undefined &&\n        this.longitude !== undefined &&\n        !isNaN(this.latitude) &&\n        !isNaN(this.longitude)\n      ) {\n        const tile = this.latLngToTile(this.latitude, this.longitude, 13);\n        this.tileUrl = `https://tile.openstreetmap.org/${tile.z}/${tile.x}/${tile.y}.png`;\n      } else {\n        this.tileUrl = '';\n      }\n    }\n  }\n\n  public handleThumbnailClicked() {\n    if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {\n      window.setTimeout(() => {\n        const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n        lightbox.showElement(this);\n      }, 100);\n    } else if (this.contentType === ThumbnailContentType.LOCATION) {\n      // open location in openstreetmap\n      const osmUrl = `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=15/${this.latitude}/${this.longitude}`;\n      window.open(osmUrl, '_blank');\n    } else {\n      window.open(this.url, '_blank');\n    }\n  }\n\n  public handleDownload(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n\n    // open this.url in another tab\n    window.open(this.url, '_blank');\n  }\n\n  public render() {\n    return html`\n      <div\n        @click=${this.handleThumbnailClicked.bind(this)}\n        class=\"${getClasses({ wrapper: true, zoom: this.zoom })}\"\n        url=${this.url}\n      >\n        ${this.contentType === ThumbnailContentType.IMAGE && this.preview\n          ? html`<div class=\"\"><div class=\"download\" @click=${this.handleDownload.bind(\n              this\n            )}><temba-icon size=\"1\" style=\"color:#fff;\" name=\"download\"></temba-icon></div><img\n          class=\"observe thumb ${this.contentType}\"\n          src=\"${this.url}\"\n        ></img></div>`\n          : html`\n              ${this.contentType === ThumbnailContentType.LOCATION\n                ? html`<img\n                    style=\"height:125px;margin-bottom:-3px;border-radius:var(--curvature);\"\n                    src=\"${this.tileUrl}\"\n                    alt=\"Location preview\"\n                  />`\n                : html`<div\n                    style=\"padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);\"\n                  >\n                    <temba-icon\n                      size=\"1.5\"\n                      name=\"${ThumbnailIcons[this.contentType]}\"\n                    ></temba-icon>\n                  </div>`}\n            `}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/display/Thumbnail.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValueMap, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property, state } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from './Lightbox';\nimport { WebChatIcon } from '../webchat';\n\nenum ThumbnailContentType {\n  IMAGE = 'image',\n  AUDIO = 'audio',\n  VIDEO = 'video',\n  DOCUMENT = 'document',\n  LOCATION = 'location',\n  OTHER = 'other'\n}\n\nconst ThumbnailIcons = {\n  [ThumbnailContentType.IMAGE]: WebChatIcon.attachment_image,\n  [ThumbnailContentType.AUDIO]: WebChatIcon.attachment_audio,\n  [ThumbnailContentType.VIDEO]: WebChatIcon.attachment_video,\n  [ThumbnailContentType.DOCUMENT]: WebChatIcon.attachment_document,\n  [ThumbnailContentType.OTHER]: WebChatIcon.attachment\n};\n\nexport class Thumbnail extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline;\n      }\n\n      .wrapper {\n        padding: var(--thumb-padding, 0.4em);\n        background: var(--thumb-background, #fff);\n        box-shadow: var(--widget-box-shadow);\n        cursor: pointer;\n        border-radius: calc(var(--curvature) * 1.5);\n        border: 0px solid #f3f3f3;\n      }\n\n      .wrapper.zoom {\n        border: none;\n        padding: 0 !important;\n        border-radius: 0 !important;\n        overflow: hidden !important;\n      }\n\n      .zoom .thumb {\n        border-radius: 0px !important;\n        width: calc(var(--thumb-size, 4em) + 0.8em);\n        max-height: calc(90vh - 10em);\n      }\n\n      .thumb {\n        background-size: cover;\n        background-position: center;\n        background-repeat: no-repeat;\n        border-radius: var(--curvature);\n        max-height: calc(var(--thumb-size, 4em) * 2);\n        max-width: calc(var(--thumb-size, 4em) * 2);\n        height: var(--thumb-size, 4em);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 400;\n        color: var(--thumb-icon, #bbb);\n      }\n\n      .thumb.document,\n      .thumb.video {\n        border: 1px solid #eee;\n      }\n\n      .audio-player {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 6px 8px;\n        background: rgba(0, 0, 0, 0.05);\n        border-radius: var(--curvature);\n        cursor: default;\n      }\n\n      .audio-play-btn {\n        cursor: pointer;\n        color: #666;\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n      }\n\n      .audio-play-btn:hover {\n        color: #333;\n      }\n\n      .audio-progress-bar {\n        flex: 1;\n        height: 3px;\n        background: #ddd;\n        border-radius: 2px;\n        overflow: hidden;\n        min-width: 60px;\n        cursor: pointer;\n      }\n\n      .audio-progress-fill {\n        height: 100%;\n        background: var(--color-primary, #2387ca);\n        border-radius: 2px;\n        transition: width 0.15s linear;\n      }\n\n      .audio-time {\n        font-size: 11px;\n        color: #999;\n        flex-shrink: 0;\n        min-width: 28px;\n        text-align: right;\n      }\n\n      .wrapper:hover .thumb.icon {\n      }\n\n      .viewer {\n        display: block;\n      }\n\n      .zoom .viewer {\n        display: block;\n      }\n\n      .download {\n        display: none;\n        position: absolute;\n        right: 0em;\n        bottom: 0em;\n        border-radius: var(--curvature);\n        transform: scale(0.2) translate(3em, 3em);\n        padding: 0.4em;\n      }\n\n      .zoom .download {\n        display: block;\n        background: rgba(0, 0, 0, 0.5);\n      }\n\n      .zoom .download:hover {\n        background: rgba(0, 0, 0, 0.6);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  attachment: string;\n\n  @property({ type: Number })\n  ratio: number = 0;\n\n  @property({ type: Boolean })\n  preview: boolean = true;\n\n  @property({ type: Boolean, attribute: false })\n  zoom: boolean;\n\n  @property({ type: String, attribute: true })\n  contentType: string;\n\n  @property({ type: Number, attribute: false })\n  latitude: number;\n\n  @property({ type: Number, attribute: false })\n  longitude: number;\n\n  // cached tile URL for location thumbnails\n  @property({ type: String, attribute: false })\n  private tileUrl: string = '';\n\n  // audio player state\n  private audio: HTMLAudioElement | null = null;\n\n  @state()\n  private audioPlaying = false;\n\n  @state()\n  private audioProgress = 0;\n\n  @state()\n  private audioDuration = 0;\n\n  private handleAudioPlayClick(e: Event) {\n    e.stopPropagation();\n\n    if (!this.audio) {\n      this.audio = new Audio(this.url);\n      this.audio.addEventListener('timeupdate', () => {\n        if (this.audio.duration) {\n          this.audioProgress = this.audio.currentTime / this.audio.duration;\n          this.audioDuration = this.audio.duration;\n        }\n      });\n      this.audio.addEventListener('ended', () => {\n        this.audioPlaying = false;\n        this.audioProgress = 0;\n      });\n      this.audio.addEventListener('error', () => {\n        this.audioPlaying = false;\n        this.audioProgress = 0;\n      });\n    }\n\n    if (this.audioPlaying) {\n      this.audio.pause();\n      this.audioPlaying = false;\n    } else {\n      this.audio.play().catch(() => {\n        this.audioPlaying = false;\n      });\n      this.audioPlaying = true;\n    }\n  }\n\n  private handleProgressClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (!this.audio || !this.audio.duration) return;\n    const bar = e.currentTarget as HTMLElement;\n    const rect = bar.getBoundingClientRect();\n    const pct = (e.clientX - rect.left) / rect.width;\n    this.audio.currentTime = pct * this.audio.duration;\n  }\n\n  private formatTime(seconds: number): string {\n    const s = Math.floor(seconds);\n    const m = Math.floor(s / 60);\n    const rem = s % 60;\n    return `${m}:${rem.toString().padStart(2, '0')}`;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.audio) {\n      this.audio.pause();\n      this.audio = null;\n    }\n  }\n\n  // convert lat/lng to tile coordinates for OSM\n  private latLngToTile(lat: number, lng: number, zoom: number) {\n    const n = Math.pow(2, zoom);\n    const x = Math.floor(((lng + 180) / 360) * n);\n    const latRad = (lat * Math.PI) / 180;\n    const y = Math.floor(\n      ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) *\n        n\n    );\n    return { x, y, z: zoom };\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (\n      changes.has('contentType') &&\n      this.contentType === ThumbnailContentType.IMAGE\n    ) {\n      const toObserve = this.shadowRoot.querySelector('.observe');\n      if (toObserve) {\n        new ResizeObserver((e, observer) => {\n          if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {\n            this.ratio = toObserve.clientHeight / toObserve.clientWidth;\n            this.preview =\n              this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);\n            observer.disconnect();\n          }\n        }).observe(toObserve);\n      }\n    }\n\n    // convert our attachment to a url and label\n    if (changes.has('attachment')) {\n      if (this.attachment) {\n        const splitIndex = this.attachment.indexOf(':');\n        if (splitIndex === -1) {\n          this.url = this.attachment;\n        } else {\n          const contentType = this.attachment.substring(0, splitIndex);\n          this.url = this.attachment.substring(splitIndex + 1);\n\n          if (contentType.startsWith('image')) {\n            this.contentType = ThumbnailContentType.IMAGE;\n          } else if (contentType.startsWith('audio')) {\n            this.contentType = ThumbnailContentType.AUDIO;\n          } else if (contentType.startsWith('video')) {\n            this.contentType = ThumbnailContentType.VIDEO;\n          } else if (contentType.startsWith('application')) {\n            this.contentType = ThumbnailContentType.DOCUMENT;\n          } else if (contentType.startsWith('geo')) {\n            this.contentType = ThumbnailContentType.LOCATION;\n            // Parse coordinates from URL which is already stripped of \"geo:\" prefix\n            // Format is now just: lat,lng\n            const coords = this.url.match(/^([^,]+),([^,]+)/);\n            if (coords) {\n              this.latitude = parseFloat(coords[1]);\n              this.longitude = parseFloat(coords[2]);\n            }\n          } else {\n            this.contentType = ThumbnailContentType.OTHER;\n          }\n        }\n      }\n    }\n\n    // calculate tile URL when latitude/longitude changes\n    if (changes.has('latitude') || changes.has('longitude')) {\n      if (\n        this.latitude !== undefined &&\n        this.longitude !== undefined &&\n        !isNaN(this.latitude) &&\n        !isNaN(this.longitude)\n      ) {\n        const tile = this.latLngToTile(this.latitude, this.longitude, 13);\n        this.tileUrl = `https://tile.openstreetmap.org/${tile.z}/${tile.x}/${tile.y}.png`;\n      } else {\n        this.tileUrl = '';\n      }\n    }\n  }\n\n  public handleThumbnailClicked() {\n    if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {\n      window.setTimeout(() => {\n        const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n        lightbox.showElement(this);\n      }, 100);\n    } else if (this.contentType === ThumbnailContentType.LOCATION) {\n      // open location in openstreetmap\n      const osmUrl = `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=15/${this.latitude}/${this.longitude}`;\n      window.open(osmUrl, '_blank');\n    } else if (this.contentType === ThumbnailContentType.AUDIO) {\n      // audio has inline controls, no click action needed\n    } else {\n      window.open(this.url, '_blank');\n    }\n  }\n\n  public handleDownload(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n\n    // open this.url in another tab\n    window.open(this.url, '_blank');\n  }\n\n  public render() {\n    return html`\n      <div\n        @click=${this.handleThumbnailClicked.bind(this)}\n        class=\"${getClasses({ wrapper: true, zoom: this.zoom })}\"\n        style=\"${this.contentType === ThumbnailContentType.AUDIO\n          ? 'cursor: default;'\n          : ''}\"\n        url=${this.url}\n      >\n        ${this.contentType === ThumbnailContentType.IMAGE && this.preview\n          ? html`<div class=\"\"><div class=\"download\" @click=${this.handleDownload.bind(\n              this\n            )}><temba-icon size=\"1\" style=\"color:#fff;\" name=\"download\"></temba-icon></div><img\n          class=\"observe thumb ${this.contentType}\"\n          src=\"${this.url}\"\n        ></img></div>`\n          : this.contentType === ThumbnailContentType.AUDIO\n          ? html`<div class=\"audio-player\">\n              <div class=\"audio-play-btn\" @click=${this.handleAudioPlayClick}>\n                ${this.audioPlaying\n                  ? html`<svg\n                      viewBox=\"0 0 24 24\"\n                      width=\"14\"\n                      height=\"14\"\n                      fill=\"currentColor\"\n                    >\n                      <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                      <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                    </svg>`\n                  : html`<svg\n                      viewBox=\"0 0 24 24\"\n                      width=\"14\"\n                      height=\"14\"\n                      fill=\"currentColor\"\n                    >\n                      <polygon points=\"6,3 20,12 6,21\" />\n                    </svg>`}\n              </div>\n              <div\n                class=\"audio-progress-bar\"\n                @click=${this.handleProgressClick}\n              >\n                <div\n                  class=\"audio-progress-fill\"\n                  style=\"width: ${this.audioProgress * 100}%\"\n                ></div>\n              </div>\n              <div class=\"audio-time\">\n                ${this.audioDuration\n                  ? this.formatTime(\n                      this.audioPlaying || this.audioProgress > 0\n                        ? this.audio?.currentTime || 0\n                        : this.audioDuration\n                    )\n                  : ''}\n              </div>\n            </div>`\n          : html`\n              ${this.contentType === ThumbnailContentType.LOCATION\n                ? html`<img\n                    style=\"height:125px;margin-bottom:-3px;border-radius:var(--curvature);\"\n                    src=\"${this.tileUrl}\"\n                    alt=\"Location preview\"\n                  />`\n                : html`<div\n                    style=\"padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);\"\n                  >\n                    <temba-icon\n                      size=\"1.5\"\n                      name=\"${ThumbnailIcons[this.contentType]}\"\n                    ></temba-icon>\n                  </div>`}\n            `}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -79,20 +79,22 @@ export class CanvasMenu extends RapidElement {
     }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
-        // Close menu when clicking outside
+        // Close menu when clicking outside — use mousedown instead of click
+        // to avoid being triggered by the click synthesized from a drag-and-drop
+        // (mousedown on exit + mouseup on canvas = click on common ancestor)
         const handleClickOutside = (e) => {
             if (this.open && !this.contains(e.target)) {
                 this.close();
             }
         };
-        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('mousedown', handleClickOutside);
         // Store cleanup function
         this._clickOutsideHandler = handleClickOutside;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this._clickOutsideHandler) {
-            document.removeEventListener('click', this._clickOutsideHandler);
+            document.removeEventListener('mousedown', this._clickOutsideHandler);
         }
     }
     show(x, y, clickPosition, showStickyNote = true) {

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  @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"]}
+{"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 — use mousedown instead of click\n    // to avoid being triggered by the click synthesized from a drag-and-drop\n    // (mousedown on exit + mouseup on canvas = click on common ancestor)\n    const handleClickOutside = (e: MouseEvent) => {\n      if (this.open && !this.contains(e.target as Node)) {\n        this.close();\n      }\n    };\n\n    document.addEventListener('mousedown', 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(\n        'mousedown',\n        (this as any)._clickOutsideHandler\n      );\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

@@ -111,6 +111,12 @@ export class CanvasNode extends RapidElement {
         pointer-events: none !important;
       }
 
+      /* Issue indicators - hatched red title bar */
+      .action-content.has-issues .cn-title,
+      .node.has-issues > .router .cn-title {
+        background: repeating-linear-gradient(120deg, tomato, tomato 6px, #ff7056 0, #ff7056 18px) !important;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -286,11 +292,7 @@ export class CanvasNode extends RapidElement {
         position: relative;
         box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
         cursor: pointer;
-        pointer-events: none;
-      }
-
-      .exit.jtk-connected {
-        background: var(--color-connectors, #e6e6e6);
+        pointer-events: all;
       }
 
       .exit.connected {
@@ -302,11 +304,14 @@ export class CanvasNode extends RapidElement {
         background-color: var(--color-connectors, #e6e6e6);
       }
 
-      .exit.connected.read-only, .exit.connected.read-only:hover {
-        background-color: #fff;
+      .exit.read-only, .exit.read-only:hover {
         pointer-events: none !important;
         cursor: default;
       }
+
+      .exit.connected.read-only, .exit.connected.read-only:hover {
+        background-color: #fff;
+      }
       
       .exit.removing, .exit.removing:hover {
         background-color: var(--color-error);
@@ -473,10 +478,14 @@ export class CanvasNode extends RapidElement {
                 // make our initial connections
                 // 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);
+                    var _b;
+                    // Terminal nodes have no visible exits
+                    if (((_b = this.ui) === null || _b === void 0 ? void 0 : _b.type) !== 'terminal') {
+                        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);
+                            }
                         }
                     }
                     // Note: revalidation is handled by plumber's processPendingConnections which calls repaintEverything
@@ -772,6 +781,10 @@ export class CanvasNode extends RapidElement {
         }
         this.requestUpdate();
     }
+    getTopCenter(el) {
+        const rect = el.getBoundingClientRect();
+        return { x: rect.left + rect.width / 2, y: rect.top };
+    }
     handleActionMouseDown(event, action) {
         // Don't handle clicks on the remove button, drag handle, or when action is in removing state
         const target = event.target;
@@ -813,10 +826,17 @@ export class CanvasNode extends RapidElement {
             // Only fire the action edit event if we haven't dragged beyond the threshold
             // AND either there's no Editor parent (test case) or the Editor didn't drag the node
             if (distance <= DRAG_THRESHOLD && (!editor || !editorWasDragging)) {
+                // Use top-center of the action element as the dialog origin
+                const actionEl = event.currentTarget;
+                const origin = actionEl
+                    ? this.getTopCenter(actionEl)
+                    : { x: event.clientX, y: event.clientY };
                 // Fire event to request action editing
                 this.fireCustomEvent(CustomEventType.ActionEditRequested, {
                     action,
-                    nodeUuid: this.node.uuid
+                    nodeUuid: this.node.uuid,
+                    originX: origin.x,
+                    originY: origin.y
                 });
             }
         }
@@ -915,18 +935,24 @@ export class CanvasNode extends RapidElement {
                 // Using literal 5 instead of DRAG_THRESHOLD since it's not imported
                 // Fire event to request node editing if the node has a router
                 if (this.node.router) {
+                    // Use top-center of the node as the dialog origin
+                    const origin = this.getTopCenter(this);
                     // If router node has exactly one action, open the action editor directly
                     if (this.node.actions && this.node.actions.length === 1) {
                         this.fireCustomEvent(CustomEventType.ActionEditRequested, {
                             action: this.node.actions[0],
-                            nodeUuid: this.node.uuid
+                            nodeUuid: this.node.uuid,
+                            originX: origin.x,
+                            originY: origin.y
                         });
                     }
                     else {
                         // Otherwise open the node editor as before
                         this.fireCustomEvent(CustomEventType.NodeEditRequested, {
                             node: this.node,
-                            nodeUI: this.ui
+                            nodeUI: this.ui,
+                            originX: origin.x,
+                            originY: origin.y
                         });
                     }
                 }
@@ -1062,17 +1088,15 @@ export class CanvasNode extends RapidElement {
         this.requestUpdate();
     }
     renderTitle(config, action, index, isRemoving = false) {
-        var _b, _c, _d, _e;
+        var _b, _c, _d, _e, _f;
         const color = config.group
             ? (_b = ACTION_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color
             : '#aaaaaa';
+        const isTerminal = ((_c = this.ui) === null || _c === void 0 ? void 0 : _c.type) === 'terminal';
         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.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
+      ${isTerminal
+            ? html `<div class="title-spacer"></div>`
+            : ((_d = this.ui) === null || _d === void 0 ? void 0 : _d.type) === 'execute_actions' || ((_f = (_e = this.node) === null || _e === void 0 ? void 0 : _e.actions) === null || _f === void 0 ? void 0 : _f.length) > 1
                 ? html `<temba-icon
             class="drag-handle ${this.isReadOnly() ? 'read-only-hidden' : ''}"
             name="sort"
@@ -1081,7 +1105,9 @@ export class CanvasNode extends RapidElement {
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
       <div
-        class="remove-button ${this.isReadOnly() ? 'read-only-hidden' : ''}"
+        class="remove-button ${isTerminal || this.isReadOnly()
+            ? 'read-only-hidden'
+            : ''}"
         @click=${(e) => this.handleActionRemoveClick(e, action, index)}
         title="Remove action"
       >
@@ -1166,7 +1192,7 @@ export class CanvasNode extends RapidElement {
         return localizedAction;
     }
     renderAction(node, action, index) {
-        var _b, _c, _d;
+        var _b, _c, _d, _e;
         const config = ACTION_CONFIG[action.type];
         const isRemoving = this.actionRemovingState.has(action.uuid);
         const isLocalizable = (config === null || config === void 0 ? void 0 : config.localizable) && config.localizable.length > 0;
@@ -1177,6 +1203,7 @@ export class CanvasNode extends RapidElement {
         // Get the localized action if translating
         const displayAction = this.getLocalizedAction(action);
         if (config) {
+            const hasIssues = (_e = this.issuesByAction) === null || _e === void 0 ? void 0 : _e.has(action.uuid);
             const classes = [
                 'action',
                 'sortable',
@@ -1190,7 +1217,7 @@ export class CanvasNode extends RapidElement {
                 .join(' ');
             return html `<div class="${classes}" id="action-${index}">
         <div
-          class="action-content"
+          class="action-content ${hasIssues ? 'has-issues' : ''}"
           @mousedown=${(e) => !isDisabled && this.handleActionMouseDown(e, action)}
           @mouseup=${(e) => !isDisabled && this.handleActionMouseUp(e, action)}
           style="cursor: ${isDisabled ? 'not-allowed' : 'pointer'}"
@@ -1321,7 +1348,7 @@ export class CanvasNode extends RapidElement {
         return this.viewingRevision || this.isTranslating;
     }
     render() {
-        var _b;
+        var _b, _c, _d, _e;
         if (!this.node || !this.ui) {
             return html `<div class="node">Loading...</div>`;
         }
@@ -1333,13 +1360,17 @@ export class CanvasNode extends RapidElement {
             !this.includeCategoriesInTranslation;
         // Get active contact count for this node
         const activeCount = (((_b = this.activity) === null || _b === void 0 ? void 0 : _b.nodes) && this.activity.nodes[this.node.uuid]) || 0;
+        // Check for node-level issues or action-level issues on any action in this node
+        const nodeHasIssues = ((_c = this.issuesByNode) === null || _c === void 0 ? void 0 : _c.has(this.node.uuid)) ||
+            ((_d = this.node.actions) === null || _d === void 0 ? void 0 : _d.some((a) => { var _b; return (_b = this.issuesByAction) === null || _b === void 0 ? void 0 : _b.has(a.uuid); }));
         return html `
       <div
         id="${this.node.uuid}"
         class=${getClasses({
             node: true,
             'execute-actions': this.ui.type === 'execute_actions',
-            'non-localizable': isNodeDisabled
+            'non-localizable': isNodeDisabled,
+            'has-issues': nodeHasIssues
         })}
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
@@ -1348,7 +1379,9 @@ export class CanvasNode extends RapidElement {
               ${activeCount.toLocaleString()}
             </div>`
             : ''}
-        ${nodeConfig && nodeConfig.type !== 'execute_actions'
+        ${nodeConfig &&
+            nodeConfig.type !== 'execute_actions' &&
+            nodeConfig.type !== 'terminal'
             ? html `<div class="router" style="position: relative;">
               <div
                 @mousedown=${(e) => this.handleNodeMouseDown(e)}
@@ -1361,7 +1394,7 @@ export class CanvasNode extends RapidElement {
                 : null}
               </div>
             </div>`
-            : this.node.actions.length > 0
+            : ((_e = this.node.actions) === null || _e === void 0 ? void 0 : _e.length) > 0
                 ? this.ui.type === 'execute_actions'
                     ? html `<temba-sortable-list
                   dragHandle="drag-handle"
@@ -1389,7 +1422,9 @@ export class CanvasNode extends RapidElement {
               ${this.renderRouter(this.node.router, this.ui)}
               ${this.renderCategories(this.node)}
             </div>`
-            : html `<div class="action-exits">
+            : this.ui.type === 'terminal'
+                ? ''
+                : html `<div class="action-exits">
               ${repeat(this.node.exits, (exit) => exit.uuid, (exit) => this.renderExit(exit))}
             </div>`}
         ${this.ui.type === 'execute_actions' && !this.isReadOnly()
@@ -1432,4 +1467,10 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.getCurrentActivity())
 ], CanvasNode.prototype, "activity", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.issuesByNode)
+], CanvasNode.prototype, "issuesByNode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.issuesByAction)
+], CanvasNode.prototype, "issuesByAction", void 0);
 //# sourceMappingURL=CanvasNode.js.map