@nyaruka/temba-components 0.142.2 → 0.142.3

package/src/flow/NodeEditor.ts

@@ -388,9 +388,7 @@ export class NodeEditor extends RapidElement {
 
       .accordion-toggle-icon {
         color: #999;
-        transition:
-          transform 0.2s ease,
-          opacity 0.3s ease;
+        transition: transform 0.2s ease, opacity 0.3s ease;
       }
 
       .accordion-toggle-icon.expanded {
@@ -2194,18 +2192,20 @@ export class NodeEditor extends RapidElement {
                             class="accordion-checkmark-icon"
                           ></temba-icon>`
                         : showBubble
-                          ? html`<div
-                              class="accordion-count-bubble ${!showBubble
-                                ? 'hidden'
-                                : ''}"
-                            >
-                              ${valueCount}
-                            </div>`
-                          : ''}
+                        ? html`<div
+                            class="accordion-count-bubble ${!showBubble
+                              ? 'hidden'
+                              : ''}"
+                          >
+                            ${valueCount}
+                          </div>`
+                        : ''}
                     </div>`}
               </div>
               <div
-                class="accordion-content ${isCollapsed ? 'collapsed' : 'expanded'}"
+                class="accordion-content ${isCollapsed
+                  ? 'collapsed'
+                  : 'expanded'}"
               >
                 ${section.items.map((item) =>
                   this.renderLayoutItem(item, config, renderedFields)

package/src/flow/Plumber.ts

@@ -2,6 +2,21 @@ import { isRightClick } from './utils';
 
 export type TargetFace = 'top' | 'left' | 'right';
 
+/** Extract clientX/clientY from a MouseEvent or the first touch of a TouchEvent. */
+function getClientCoords(e: MouseEvent | TouchEvent): {
+  clientX: number;
+  clientY: number;
+} {
+  if ('touches' in e) {
+    const touch = e.touches[0] || (e as TouchEvent).changedTouches[0];
+    return { clientX: touch.clientX, clientY: touch.clientY };
+  }
+  return {
+    clientX: (e as MouseEvent).clientX,
+    clientY: (e as MouseEvent).clientY
+  };
+}
+
 // Shared arrow/drag constants used by both Plumber and Editor
 export const ARROW_LENGTH = 13;
 export const ARROW_HALF_WIDTH = 6.5;
@@ -33,8 +48,8 @@ interface DragState {
   svgEl: SVGSVGElement;
   pathEl: SVGPathElement;
   arrowEl: SVGPolygonElement;
-  onMove: (e: MouseEvent) => void;
-  onUp: (e: MouseEvent) => void;
+  onMove: (e: MouseEvent | TouchEvent) => void;
+  onUp: (e: MouseEvent | TouchEvent) => void;
 }
 
 /**
@@ -242,56 +257,75 @@ export class Plumber {
     let pendingDrag: {
       startX: number;
       startY: number;
-      onMove: (e: MouseEvent) => void;
-      onUp: (e: MouseEvent) => void;
+      onMove: (e: MouseEvent | TouchEvent) => void;
+      onUp: (e: MouseEvent | TouchEvent) => void;
+      isTouch: boolean;
     } | null = null;
 
     const DRAG_THRESHOLD = 5;
 
-    const onMouseDown = (e: MouseEvent) => {
-      if (isRightClick(e)) return;
+    const beginPendingDrag = (e: MouseEvent | TouchEvent) => {
+      if ('button' in e && isRightClick(e)) return;
 
       // Don't start drag from exit if it already has a connection —
       // existing connections are picked up from the arrowhead instead
       if (this.connections.has(exitId)) return;
 
-      const startX = e.clientX;
-      const startY = e.clientY;
+      const isTouch = 'touches' in e;
+      if (isTouch) e.preventDefault();
+
+      const { clientX: startX, clientY: startY } = getClientCoords(e);
 
       const nodeEl = element.closest('temba-flow-node');
       const scope = nodeEl?.getAttribute('uuid') || '';
       const originalTargetId: string | null = null;
 
-      const onMove = (me: MouseEvent) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
+      const onMove = (me: MouseEvent | TouchEvent) => {
+        const { clientX, clientY } = getClientCoords(me);
+        const dx = clientX - startX;
+        const dy = clientY - startY;
         if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
           // Exceeded threshold — start actual drag
-          document.removeEventListener('mousemove', onMove);
-          document.removeEventListener('mouseup', onUp);
-          pendingDrag = null;
+          removePendingListeners();
           this.startDrag(exitId, scope, originalTargetId, me);
         }
       };
 
       const onUp = () => {
-        // Mouse released without dragging — let click handler fire
+        // Released without dragging — let click handler fire
+        removePendingListeners();
+      };
+
+      const removePendingListeners = () => {
         document.removeEventListener('mousemove', onMove);
         document.removeEventListener('mouseup', onUp);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onUp);
+        document.removeEventListener('touchcancel', onUp);
         pendingDrag = null;
       };
 
       document.addEventListener('mousemove', onMove);
       document.addEventListener('mouseup', onUp);
-      pendingDrag = { startX, startY, onMove, onUp };
+      document.addEventListener('touchmove', onMove, { passive: false });
+      document.addEventListener('touchend', onUp);
+      document.addEventListener('touchcancel', onUp);
+      pendingDrag = { startX, startY, onMove, onUp, isTouch };
     };
 
-    element.addEventListener('mousedown', onMouseDown);
+    element.addEventListener('mousedown', beginPendingDrag);
+    element.addEventListener('touchstart', beginPendingDrag, {
+      passive: false
+    });
     this.sources.set(exitId, () => {
-      element.removeEventListener('mousedown', onMouseDown);
+      element.removeEventListener('mousedown', beginPendingDrag);
+      element.removeEventListener('touchstart', beginPendingDrag);
       if (pendingDrag) {
         document.removeEventListener('mousemove', pendingDrag.onMove);
         document.removeEventListener('mouseup', pendingDrag.onUp);
+        document.removeEventListener('touchmove', pendingDrag.onMove);
+        document.removeEventListener('touchend', pendingDrag.onUp);
+        document.removeEventListener('touchcancel', pendingDrag.onUp);
         pendingDrag = null;
       }
     });
@@ -714,19 +748,23 @@ export class Plumber {
 
     // Make arrowhead draggable for picking up existing connections
     const DRAG_THRESHOLD = 5;
-    const onArrowMouseDown = (e: MouseEvent) => {
-      if (isRightClick(e)) return;
+    const onArrowDown = (e: MouseEvent | TouchEvent) => {
+      if ('button' in e && isRightClick(e)) return;
       e.stopPropagation();
+      if ('touches' in e) e.preventDefault();
 
-      const startX = e.clientX;
-      const startY = e.clientY;
+      const { clientX: startX, clientY: startY } = getClientCoords(e);
 
-      const onMove = (me: MouseEvent) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
+      const onMove = (me: MouseEvent | TouchEvent) => {
+        const { clientX, clientY } = getClientCoords(me);
+        const dx = clientX - startX;
+        const dy = clientY - startY;
         if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
           document.removeEventListener('mousemove', onMove);
           document.removeEventListener('mouseup', onUp);
+          document.removeEventListener('touchmove', onMove);
+          document.removeEventListener('touchend', onUp);
+          document.removeEventListener('touchcancel', onUp);
           this.startDrag(exitId, scope, toId, me);
         }
       };
@@ -734,12 +772,21 @@ export class Plumber {
       const onUp = () => {
         document.removeEventListener('mousemove', onMove);
         document.removeEventListener('mouseup', onUp);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onUp);
+        document.removeEventListener('touchcancel', onUp);
       };
 
       document.addEventListener('mousemove', onMove);
       document.addEventListener('mouseup', onUp);
+      document.addEventListener('touchmove', onMove, { passive: false });
+      document.addEventListener('touchend', onUp);
+      document.addEventListener('touchcancel', onUp);
     };
-    arrowEl.addEventListener('mousedown', onArrowMouseDown);
+    arrowEl.addEventListener('mousedown', onArrowDown);
+    arrowEl.addEventListener('touchstart', onArrowDown, { passive: false });
+    pathEl.addEventListener('mousedown', onArrowDown);
+    pathEl.addEventListener('touchstart', onArrowDown, { passive: false });
 
     // Mark the exit element as connected
     const exitEl = document.getElementById(exitId);
@@ -1202,10 +1249,18 @@ export class Plumber {
     exitId: string,
     scope: string,
     originalTargetId: string | null,
-    e: MouseEvent
+    e: MouseEvent | TouchEvent
   ) {
-    // Remove existing connection SVG for this exit (the connection is being dragged away)
-    this.removeConnectionSVG(exitId);
+    // Hide (don't remove) the existing connection SVG while dragging.
+    // On iOS Safari, removing the element that received the original
+    // touchstart can trigger touchcancel, prematurely ending the drag.
+    // We defer removal until the drag ends.
+    const oldConn = this.connections.get(exitId);
+    if (oldConn) {
+      oldConn.svgEl.style.display = 'none';
+      const overlay = this.overlays.get(exitId);
+      if (overlay) overlay.style.display = 'none';
+    }
 
     const { svgEl, pathEl, arrowEl } = this.createSVGElement();
     svgEl.classList.add('dragging');
@@ -1283,26 +1338,33 @@ export class Plumber {
     };
 
     // Initial path to cursor (convert viewport to canvas coordinates)
-    const cursorX = this.toCanvas(e.clientX - canvasRect.left);
-    const cursorY = this.toCanvas(e.clientY - canvasRect.top);
+    const { clientX: initX, clientY: initY } = getClientCoords(e);
+    const cursorX = this.toCanvas(initX - canvasRect.left);
+    const cursorY = this.toCanvas(initY - canvasRect.top);
     updateDragPath(cursorX, cursorY);
 
     this.connectionDragging = true;
 
-    const onMove = (me: MouseEvent) => {
+    const onMove = (me: MouseEvent | TouchEvent) => {
+      if ('touches' in me) me.preventDefault();
       // Re-read canvasRect each move since scroll may have changed
       const rect = this.canvas.getBoundingClientRect();
-      const cx = this.toCanvas(me.clientX - rect.left);
-      const cy = this.toCanvas(me.clientY - rect.top);
+      const { clientX, clientY } = getClientCoords(me);
+      const cx = this.toCanvas(clientX - rect.left);
+      const cy = this.toCanvas(clientY - rect.top);
       updateDragPath(cx, cy);
     };
 
-    const onUp = (_me: MouseEvent) => {
+    const onUp = (_me: MouseEvent | TouchEvent) => {
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', onUp);
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onUp);
+      document.removeEventListener('touchcancel', onUp);
 
-      // Remove the drag SVG
+      // Remove the drag SVG and the hidden old connection SVG
       svgEl.remove();
+      this.removeConnectionSVG(exitId);
       this.connectionDragging = false;
       this.dragState = null;
 
@@ -1317,6 +1379,9 @@ export class Plumber {
 
     document.addEventListener('mousemove', onMove);
     document.addEventListener('mouseup', onUp);
+    document.addEventListener('touchmove', onMove, { passive: false });
+    document.addEventListener('touchend', onUp);
+    document.addEventListener('touchcancel', onUp);
 
     this.dragState = {
       sourceId: exitId,

package/src/flow/StickyNote.ts

@@ -21,6 +21,11 @@ export class StickyNote extends RapidElement {
   @property({ type: Boolean })
   private colorPickerExpanded = false;
 
+  // On touch devices, contenteditable starts false to prevent Apple Pencil
+  // Scribble from hijacking touches. It is set to true on explicit tap.
+  private isTouchDevice = navigator.maxTouchPoints > 0;
+  private editingField: HTMLElement | null = null;
+
   @fromStore(zustand, (state: AppState) => state.isTranslating)
   private isTranslating!: boolean;
 
@@ -289,6 +294,7 @@ export class StickyNote extends RapidElement {
   }
 
   private handleTitleBlur(event: FocusEvent): void {
+    this.handleContentBlurForTouch(event);
     const target = event.target as HTMLElement;
     const newTitle = target.textContent || '';
 
@@ -304,6 +310,7 @@ export class StickyNote extends RapidElement {
   }
 
   private handleBodyBlur(event: FocusEvent): void {
+    this.handleContentBlurForTouch(event);
     const target = event.target as HTMLElement;
     const newBody = target.innerText || '';
 
@@ -318,6 +325,46 @@ export class StickyNote extends RapidElement {
     this.requestUpdate();
   }
 
+  /* c8 ignore start -- touch-only handlers untestable in headless Chromium */
+  private handleDragHandleTouchStart(event: TouchEvent): void {
+    // Prevent Apple Pencil Scribble from activating on the adjacent
+    // contenteditable fields when touching/dragging the handle.
+    event.preventDefault();
+  }
+
+  /**
+   * On touch devices, contenteditable is off by default. A tap on the
+   * title or body enables it and focuses the element for editing.
+   */
+  private handleContentTap(event: TouchEvent): void {
+    if (!this.isTouchDevice) return;
+    const target = event.target as HTMLElement;
+    if (
+      !target.classList.contains('sticky-title') &&
+      !target.classList.contains('sticky-body')
+    )
+      return;
+
+    // Enable editing and focus
+    target.setAttribute('contenteditable', 'true');
+    this.editingField = target;
+    target.focus();
+    event.stopPropagation();
+  }
+
+  /**
+   * When a contenteditable field loses focus on a touch device,
+   * disable contenteditable again to prevent Scribble.
+   */
+  private handleContentBlurForTouch(event: FocusEvent): void {
+    const target = event.target as HTMLElement;
+    if (this.isTouchDevice && this.editingField === target) {
+      target.setAttribute('contenteditable', 'false');
+      this.editingField = null;
+    }
+  }
+  /* c8 ignore stop */
+
   private handleContentMouseDown(event: MouseEvent): void {
     // If this sticky note is selected, don't stop propagation
     // so that group dragging can work
@@ -356,11 +403,19 @@ export class StickyNote extends RapidElement {
     this.colorPickerExpanded = false;
   }
 
+  /* c8 ignore next 5 -- touch-only */
+  private handleColorPickerTap(event: TouchEvent): void {
+    event.stopPropagation();
+    event.preventDefault();
+    this.colorPickerExpanded = !this.colorPickerExpanded;
+  }
+
   private handleColorOptionClick(
-    event: MouseEvent,
+    event: MouseEvent | TouchEvent,
     color: 'yellow' | 'blue' | 'pink' | 'green' | 'gray'
   ): void {
     event.stopPropagation();
+    event.preventDefault();
 
     if (this.data && color !== this.data.color) {
       getStore()
@@ -391,23 +446,29 @@ export class StickyNote extends RapidElement {
         data-uuid="${this.uuid}"
       >
         <div class="sticky-title-container">
-          <temba-icon name="drag" class="drag-handle"></temba-icon>
+          <temba-icon
+            name="drag"
+            class="drag-handle"
+            @touchstart=${this.handleDragHandleTouchStart}
+          ></temba-icon>
           <div
             class="sticky-title"
-            contenteditable="${!this.isTranslating}"
+            contenteditable="${!this.isTranslating && !this.isTouchDevice}"
             @blur="${this.handleTitleBlur}"
             @keydown="${this.handleTitleKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
+            @touchend="${this.handleContentTap}"
             .textContent="${this.data.title}"
           ></div>
         </div>
         <div class="sticky-body-container">
           <div
             class="sticky-body"
-            contenteditable="${!this.isTranslating}"
+            contenteditable="${!this.isTranslating && !this.isTouchDevice}"
             @blur="${this.handleBodyBlur}"
             @keydown="${this.handleBodyKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
+            @touchend="${this.handleContentTap}"
             .textContent="${this.data.body}"
           ></div>
           ${!this.isTranslating
@@ -419,6 +480,7 @@ export class StickyNote extends RapidElement {
             class="color-picker"
             @mouseenter="${this.handleColorPickerMouseEnter}"
             @mouseleave="${this.handleColorPickerMouseLeave}"
+            @touchend="${this.handleColorPickerTap}"
           >
             <div
               class="color-options ${this.colorPickerExpanded
@@ -429,26 +491,36 @@ export class StickyNote extends RapidElement {
                 class="color-option yellow"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'yellow')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'yellow')}"
               ></div>
               <div
                 class="color-option blue"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'blue')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'blue')}"
               ></div>
               <div
                 class="color-option pink"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'pink')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'pink')}"
               ></div>
               <div
                 class="color-option green"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'green')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'green')}"
               ></div>
               <div
                 class="color-option gray"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'gray')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'gray')}"
               ></div>
             </div>
           </div>

package/src/flow/actions/send_msg.ts

@@ -19,6 +19,17 @@ export const send_msg: ActionConfig = {
   render: (_node: Node, action: SendMsg) => {
     const text = action.text.replace(/\n/g, '<br>');
     return html`
+      ${action.template
+        ? html`<div
+            style="border: 1px solid #7dc8bc;padding: 0.5em;margin-bottom: 0.5em;border-radius: 4px; display:flex;align-items: flex-start;background: #f0faf7;color: #128C7E;font-size: 0.85em;"
+          >
+            <temba-icon
+              name="channel_wac"
+              style="--icon-size: 14px;"
+            ></temba-icon>
+            <div style="margin-left:0.4em">${action.template.name}</div>
+          </div>`
+        : null}
       ${renderClamped(html`${unsafeHTML(text)}`, action.text)}
       ${(action.quick_replies || [])?.length > 0
         ? html`<div class="quick-replies">
@@ -27,14 +38,6 @@ export const send_msg: ActionConfig = {
             })}
           </div>`
         : null}
-      ${action.template
-        ? html`<div
-            style="border: 1px solid var(--color-widget-border);padding: 0.5em;margin-top: 1em;border-radius: var(--curvature); display:flex;background: rgba(0,0,0,.03);"
-          >
-            <temba-icon name="channel_wac"></temba-icon>
-            <div style="margin-left:0.5em">${action.template.name}</div>
-          </div>`
-        : null}
     `;
   },
   form: {

package/src/flow/nodes/split_by_subflow.ts

@@ -33,7 +33,9 @@ export const split_by_subflow: NodeConfig = {
     ) as any;
     return html`
       <div class="body">
-        ${enterFlowAction?.flow ? renderFlowLinks([enterFlowAction.flow], 'flow') : null}
+        ${enterFlowAction?.flow
+          ? renderFlowLinks([enterFlowAction.flow], 'flow')
+          : null}
       </div>
     `;
   },

package/src/flow/utils.ts

@@ -162,9 +162,7 @@ export const renderFlowLinks = (flows: NamedObject[], icon?: string) => {
     itemElements.push(html`<div
       style="display:flex;items-align:center;margin-top:0.2em;"
     >
-      ${icon
-        ? html`<div style="margin-right:0.4em; width: 1em;"></div>`
-        : null}
+      ${icon ? html`<div style="margin-right:0.4em; width: 1em;"></div>` : null}
       <div style="font-size:0.8em">+${remainingCount} more</div>
     </div>`);
   }