@nyaruka/temba-components 0.156.3 → 0.156.4

package/src/flow/Editor.ts

@@ -31,6 +31,7 @@ import {
 import { TEMBA_COMPONENTS_VERSION } from '../version';
 import {
   formatIssueMessage,
+  getLanguageDisplayName,
   getNodeBounds,
   calculateReflowPositions,
   isRightClick,
@@ -70,8 +71,8 @@ import { Dialog } from '../layout/Dialog';
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
 import { FloatingWindow } from '../layout/FloatingWindow';
-import { Icon } from '../Icons';
 import { FlowSearch, SearchResult } from './FlowSearch';
+import { PRIMARY_LANGUAGE_OPTION_VALUE } from './EditorToolbar';
 
 export function findNodeForExit(
   definition: FlowDefinition,
@@ -134,7 +135,15 @@ interface LocalizationUpdate {
 }
 
 const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
-const PRIMARY_LANGUAGE_OPTION_VALUE = '__primary_language__';
+export type ToolbarAction =
+  | { action: 'view-change'; view: 'flow' | 'table' }
+  | { action: 'zoom-in' }
+  | { action: 'zoom-out' }
+  | { action: 'zoom-to-fit' }
+  | { action: 'zoom-to-full' }
+  | { action: 'revisions' }
+  | { action: 'search' }
+  | { action: 'language-change'; isPrimary?: boolean; languageCode?: string };
 const EMPTY_FLOW_ISSUES: FlowIssue[] = [];
 
 // How long the pending-changes auto-save countdown runs (in ms).
@@ -268,6 +277,13 @@ export class Editor extends RapidElement {
   private currentDragIsCopy = false;
   private dragStartPos = { x: 0, y: 0 };
 
+  // Mid-drag shift toggle: remember originals so we can switch between move/copy
+  private originalDragItem: DraggableItem | null = null;
+  private originalSelectedItems: Set<string> | null = null;
+
+  // Drag hint tooltip
+  private dragHintTimer: ReturnType<typeof setTimeout> | null = null;
+
   // Public getter for drag state
   public get dragging(): boolean {
     return this.isDragging;
@@ -458,9 +474,6 @@ export class Editor extends RapidElement {
   @property({ type: Boolean, reflect: true, attribute: 'message-view' })
   showMessageTable = false;
 
-  @state()
-  private showLanguageOptions = false;
-
   @state()
   private isCreatingNewNode = false;
 
@@ -506,16 +519,8 @@ export class Editor extends RapidElement {
   private getAvailableLanguages(): Array<{ code: string; name: string }> {
     // Use languages from workspace if available
     if (this.workspace?.languages && this.workspace.languages.length > 0) {
-      const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
       return this.workspace.languages
-        .map((code) => {
-          try {
-            const name = languageNames.of(code);
-            return name ? { code, name } : { code, name: code };
-          } catch {
-            return { code, name: code };
-          }
-        })
+        .map((code) => ({ code, name: getLanguageDisplayName(code) }))
         .filter((lang) => lang.code && lang.name);
     }
 
@@ -539,6 +544,8 @@ export class Editor extends RapidElement {
   private boundMouseUp = this.handleMouseUp.bind(this);
   private boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
   private boundKeyDown = this.handleKeyDown.bind(this);
+  private boundKeyUp = this.handleKeyUp.bind(this);
+  private boundWindowBlur = this.handleWindowBlur.bind(this);
   private boundCanvasContextMenu = this.handleCanvasContextMenu.bind(this);
   private boundWheel = this.handleWheel.bind(this);
   private boundTouchMove = this.handleTouchMove.bind(this);
@@ -557,198 +564,6 @@ export class Editor extends RapidElement {
         min-height: 0;
       }
 
-      .editor-toolbar {
-        --toolbar-control-height: 28px;
-        --toolbar-translation-control-height: 28px;
-        display: flex;
-        align-items: center;
-        padding: 6px 12px;
-        background: #fff;
-        border-bottom: 1px solid #e8e8e8;
-        flex-shrink: 0;
-        gap: 8px;
-      }
-
-      .toolbar-left {
-        display: flex;
-        align-items: center;
-        gap: 2px;
-      }
-
-      .toolbar-right {
-        display: flex;
-        align-items: center;
-        gap: 2px;
-        margin-left: auto;
-      }
-
-      .toolbar-btn {
-        width: var(--toolbar-control-height);
-        height: var(--toolbar-control-height);
-        border: none;
-        background: transparent;
-        border-radius: var(--curvature);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        color: #888;
-        font-size: 16px;
-        line-height: 1;
-        outline: none;
-      }
-
-      .toolbar-btn:focus {
-        outline: none;
-      }
-
-      .toolbar-btn:focus-visible {
-        outline: 2px solid #0064c8;
-        outline-offset: 2px;
-      }
-
-      .toolbar-btn:hover {
-        background: rgba(0, 0, 0, 0.06);
-        color: #555;
-      }
-
-      .toolbar-btn:disabled {
-        opacity: 0.3;
-        cursor: default;
-        background: transparent;
-      }
-
-      .toolbar-btn.active {
-        background: rgba(0, 100, 200, 0.1);
-        color: #0064c8;
-      }
-
-      .toolbar-btn.active:hover {
-        background: rgba(0, 100, 200, 0.15);
-      }
-
-      .toolbar-tip {
-        display: flex;
-        align-items: center;
-      }
-
-      .toolbar-divider {
-        width: 1px;
-        height: 16px;
-        background: #e0e0e0;
-        margin: 0 4px;
-      }
-
-      .toolbar-group {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        height: var(--toolbar-control-height);
-        box-sizing: border-box;
-        padding: 0 3px;
-        border: 1px solid #d7dce2;
-        border-radius: calc(var(--curvature) + 2px);
-        background: #f7f9fb;
-      }
-
-      .toolbar-group-divider {
-        width: 1px;
-        height: 18px;
-        background: #d7dce2;
-        margin: 0 2px;
-      }
-
-      .toolbar-language {
-        position: relative;
-        display: flex;
-        align-items: center;
-      }
-
-      .toolbar-language-group {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        margin-left: 2px;
-      }
-
-      .toolbar-zoom-group {
-        gap: 2px;
-      }
-
-      .language-pill {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        background: #e9eef4;
-        color: #0064c8;
-        height: var(--toolbar-translation-control-height);
-        padding: 0 8px;
-        border-radius: var(--curvature);
-        box-sizing: border-box;
-        font-size: 13px;
-        font-weight: 400;
-        white-space: nowrap;
-        cursor: pointer;
-        --icon-color: #0064c8;
-        --icon-size: 16px;
-        border: none;
-        outline: none;
-      }
-
-      .language-pill:hover {
-        filter: brightness(1.04);
-      }
-
-      .language-pill.primary {
-        background: #fff;
-        border: 1px solid #d7dce2;
-      }
-
-      .language-pill.complete {
-        background: #d4f5e0;
-        color: #1a7f37;
-        --icon-color: #1a7f37;
-      }
-
-      .language-pill-caret {
-        margin-left: 1px;
-        --icon-color: currentColor;
-        --icon-size: 12px;
-      }
-
-      .language-percent {
-        display: inline-block;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 1;
-        color: #0064c8;
-        white-space: nowrap;
-      }
-
-      .language-pill.complete .language-percent {
-        color: #1a7f37;
-      }
-
-      .toolbar-zoom-level {
-        font-size: 12px;
-        min-width: 40px;
-        text-align: center;
-        color: #555;
-        font-weight: 500;
-      }
-
-      .toolbar-translation {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-
-      .toolbar-btn.language-tool {
-        width: var(--toolbar-translation-control-height);
-        height: var(--toolbar-translation-control-height);
-      }
-
       #editor {
         overflow: scroll;
         flex: 1;
@@ -816,6 +631,10 @@ export class Editor extends RapidElement {
         transition: none !important;
       }
 
+      #canvas.shift-held {
+        --shift-held-cursor: copy;
+      }
+
       #canvas.viewing-revision {
         pointer-events: none;
       }
@@ -1050,6 +869,10 @@ export class Editor extends RapidElement {
         border-radius: var(--curvature);
       }
 
+      .draggable.selected.drag-copy {
+        outline: none;
+      }
+
       /* Language banner replaced by toolbar language selector */
 
       .localization-window-content {
@@ -1441,6 +1264,36 @@ export class Editor extends RapidElement {
         opacity: 0.8;
       }
 
+      .drag-hint {
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 100000;
+        pointer-events: none;
+        background: rgba(255, 255, 255, 0.5);
+        backdrop-filter: blur(6px);
+        color: #555;
+        font-size: 18px;
+        font-weight: 300;
+        padding: 10px 32px;
+        border-radius: 10px;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        white-space: nowrap;
+        display: none;
+      }
+
+      .drag-hint.visible {
+        display: block;
+        animation: drag-hint-in 0.15s ease forwards;
+      }
+
+      @keyframes drag-hint-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
       .reflow-card {
         position: absolute;
         top: 16px;
@@ -2064,6 +1917,8 @@ export class Editor extends RapidElement {
     document.removeEventListener('mouseup', this.boundMouseUp);
     document.removeEventListener('mousedown', this.boundGlobalMouseDown);
     document.removeEventListener('keydown', this.boundKeyDown);
+    document.removeEventListener('keyup', this.boundKeyUp);
+    window.removeEventListener('blur', this.boundWindowBlur);
     document.removeEventListener('touchmove', this.boundTouchMove);
     document.removeEventListener('touchend', this.boundTouchEnd);
     document.removeEventListener('touchcancel', this.boundTouchCancel);
@@ -2096,6 +1951,8 @@ export class Editor extends RapidElement {
     document.addEventListener('mouseup', this.boundMouseUp);
     document.addEventListener('mousedown', this.boundGlobalMouseDown);
     document.addEventListener('keydown', this.boundKeyDown);
+    document.addEventListener('keyup', this.boundKeyUp);
+    window.addEventListener('blur', this.boundWindowBlur);
     document.addEventListener('touchmove', this.boundTouchMove, {
       passive: false
     });
@@ -2429,7 +2286,44 @@ export class Editor extends RapidElement {
     }
   }
 
+  private showDragHint(): void {
+    if (this.isReadOnly()) return;
+    const hint = this.querySelector('#drag-hint') as HTMLElement;
+    if (!hint) return;
+    this.dragHintTimer = setTimeout(() => {
+      hint.classList.add('visible');
+      this.dragHintTimer = null;
+    }, 600);
+  }
+
+  private hideDragHint(): void {
+    if (this.dragHintTimer) {
+      clearTimeout(this.dragHintTimer);
+      this.dragHintTimer = null;
+    }
+    const hint = this.querySelector('#drag-hint') as HTMLElement;
+    if (hint) {
+      hint.classList.remove('visible');
+    }
+  }
+
   private handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Shift') {
+      this.querySelector('#canvas')?.classList.add('shift-held');
+
+      // Toggle to copy mode mid-drag
+      if (this.isDragging && !this.currentDragIsCopy) {
+        this.hideDragHint();
+        this.performShiftDragCopy();
+        // Clone elements aren't in the DOM until Lit re-renders;
+        // schedule position update after the next frame.
+        requestAnimationFrame(() => {
+          this.markCopyElements();
+          this.updateDragPositions();
+        });
+      }
+    }
+
     // Cmd/Ctrl+F opens flow search (unless a dialog is already open)
     if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
       event.preventDefault();
@@ -2459,6 +2353,28 @@ export class Editor extends RapidElement {
     }
   }
 
+  private handleKeyUp(event: KeyboardEvent): void {
+    if (event.key === 'Shift') {
+      this.querySelector('#canvas')?.classList.remove('shift-held');
+
+      // Toggle back to move mode mid-drag
+      if (this.isDragging && this.currentDragIsCopy) {
+        this.revertShiftDragCopy();
+        requestAnimationFrame(() => this.updateDragPositions());
+      }
+    }
+  }
+
+  private handleWindowBlur(): void {
+    this.querySelector('#canvas')?.classList.remove('shift-held');
+
+    // Revert copy mode if blur happens mid-drag (keyup may never fire)
+    if (this.isDragging && this.currentDragIsCopy) {
+      this.revertShiftDragCopy();
+      requestAnimationFrame(() => this.updateDragPositions());
+    }
+  }
+
   // --- Flow settings cookie (LRU, max 50 flows) ---
 
   static MAX_FLOW_SETTINGS = 50;
@@ -3683,9 +3599,15 @@ export class Editor extends RapidElement {
       this.isDragging = true;
       this.startAutoScroll();
 
-      if (this.shiftDragCopy) {
+      // Snapshot the original drag context before any copy occurs
+      this.originalDragItem = { ...this.currentDragItem };
+      this.originalSelectedItems = new Set(this.selectedItems);
+
+      if (this.shiftDragCopy || event.shiftKey) {
         this.performShiftDragCopy();
         this.shiftDragCopy = false;
+      } else {
+        this.showDragHint();
       }
     }
 
@@ -3696,14 +3618,14 @@ export class Editor extends RapidElement {
   }
 
   private performShiftDragCopy(): void {
-    if (!this.currentDragItem) return;
+    if (!this.originalDragItem) return;
 
-    // Determine which items to copy (same logic as itemsToMove)
+    // Always use the original items as the source for copying
     const itemsToCopy =
-      this.selectedItems.has(this.currentDragItem.uuid) &&
-      this.selectedItems.size > 1
-        ? Array.from(this.selectedItems)
-        : [this.currentDragItem.uuid];
+      this.originalSelectedItems?.has(this.originalDragItem.uuid) &&
+      (this.originalSelectedItems?.size ?? 0) > 1
+        ? Array.from(this.originalSelectedItems!)
+        : [this.originalDragItem.uuid];
 
     if (itemsToCopy.length === 0) return;
 
@@ -3719,19 +3641,44 @@ export class Editor extends RapidElement {
     }
     this.currentDragIsCopy = true;
 
+    // Snap original items back to their start positions.
+    // Set position while 'dragging' class is still applied so
+    // transitions are disabled and the move is instant.
+    for (const uuid of itemsToCopy) {
+      const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      const type =
+        element?.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
+      const position = this.getPosition(uuid, type);
+      if (element && position) {
+        element.style.left = `${position.left}px`;
+        element.style.top = `${position.top}px`;
+      }
+    }
+    this.plumber.revalidate(itemsToCopy);
+    // Force layout so the position is committed with transitions
+    // disabled, then remove the dragging class.
+    for (const uuid of itemsToCopy) {
+      const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      if (element) {
+        // Reading offsetHeight forces a synchronous layout
+        void element.offsetHeight;
+        element.classList.remove('dragging');
+      }
+    }
+
     // Update drag item to reference the copy
-    const newDragUuid = uuidMapping[this.currentDragItem.uuid];
+    const newDragUuid = uuidMapping[this.originalDragItem.uuid];
     if (newDragUuid) {
       this.currentDragItem = {
-        ...this.currentDragItem,
+        ...this.originalDragItem,
         uuid: newDragUuid
       };
     }
 
     // Update selected items to reference copies
-    if (this.selectedItems.size > 1) {
+    if ((this.originalSelectedItems?.size ?? 0) > 1) {
       const newSelectedItems = new Set<string>();
-      for (const uuid of this.selectedItems) {
+      for (const uuid of this.originalSelectedItems!) {
         const newUuid = uuidMapping[uuid];
         newSelectedItems.add(newUuid || uuid);
       }
@@ -3739,6 +3686,43 @@ export class Editor extends RapidElement {
     }
   }
 
+  private markCopyElements(): void {
+    for (const uuid of this.copiedItemUuids) {
+      const el = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      el?.classList.add('drag-copy');
+    }
+  }
+
+  private revertShiftDragCopy(): void {
+    if (!this.originalDragItem) return;
+
+    // Remove the cloned items
+    if (this.copiedItemUuids.length > 0) {
+      const nodeUuids = this.copiedItemUuids.filter((uuid) =>
+        this.definition.nodes.some((n) => n.uuid === uuid)
+      );
+      const stickyUuids = this.copiedItemUuids.filter(
+        (uuid) => this.definition._ui?.stickies?.[uuid]
+      );
+
+      if (nodeUuids.length > 0) {
+        getStore().getState().removeNodes(nodeUuids);
+      }
+      if (stickyUuids.length > 0) {
+        getStore().getState().removeStickyNotes(stickyUuids);
+      }
+      this.copiedItemUuids = [];
+    }
+
+    this.currentDragIsCopy = false;
+
+    // Restore drag context to originals
+    this.currentDragItem = { ...this.originalDragItem };
+    if (this.originalSelectedItems) {
+      this.selectedItems = new Set(this.originalSelectedItems);
+    }
+  }
+
   private updateDragPositions(): void {
     if (!this.currentDragItem || !this.lastPointerPos) return;
 
@@ -3770,11 +3754,15 @@ export class Editor extends RapidElement {
           element.style.left = `${position.left + deltaX}px`;
           element.style.top = `${position.top + deltaY}px`;
           element.classList.add('dragging');
+          if (this.currentDragIsCopy) {
+            element.classList.add('drag-copy');
+          }
         }
       }
     });
 
     this.plumber.revalidate(itemsToMove);
+
   }
 
   private startAutoScroll(): void {
@@ -3923,10 +3911,10 @@ export class Editor extends RapidElement {
           const newPosition = { left: snappedLeft, top: snappedTop };
           newPositions[uuid] = newPosition;
 
-          // Remove dragging class
+          // Remove dragging/copy classes
           const element = this.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
           if (element) {
-            element.classList.remove('dragging');
+            element.classList.remove('dragging', 'drag-copy');
             element.style.left = `${snappedLeft}px`;
             element.style.top = `${snappedTop}px`;
           }
@@ -3960,11 +3948,14 @@ export class Editor extends RapidElement {
     }
 
     // Reset all drag state
+    this.hideDragHint();
     this.isDragging = false;
     this.isMouseDown = false;
     this.shiftDragCopy = false;
     this.currentDragIsCopy = false;
     this.currentDragItem = null;
+    this.originalDragItem = null;
+    this.originalSelectedItems = null;
     this.canvasMouseDown = false;
     this.autoScrollDeltaX = 0;
     this.autoScrollDeltaY = 0;
@@ -6233,116 +6224,10 @@ export class Editor extends RapidElement {
     `;
   }
 
-  private handleLanguageIconClick(): void {
-    if (this.showLanguageOptions) {
-      this.showLanguageOptions = false;
-      return;
-    }
-    this.showLanguageOptions = true;
-    // Close on next click anywhere outside
-    requestAnimationFrame(() => {
-      const close = () => {
-        this.showLanguageOptions = false;
-        document.removeEventListener('click', close);
-      };
-      document.addEventListener('click', close, { once: true });
-    });
-  }
-
-  private handleLanguageOptionSelected(event: CustomEvent): void {
-    if (!this.showLanguageOptions) return;
-    const selected = event.detail?.selected;
-    if (selected?.value === PRIMARY_LANGUAGE_OPTION_VALUE) {
-      this.handleLanguageChange(this.definition?.language || '');
-    } else if (selected?.value) {
-      this.handleLanguageChange(selected.value);
-    }
-    this.showLanguageOptions = false;
-  }
-
-  private renderToolbarTip(
-    text: string | TemplateResult,
-    content: TemplateResult
-  ): TemplateResult {
-    const tipContent = text;
-    return html`
-      <temba-tip
-        class="toolbar-tip"
-        .text=${typeof tipContent === 'string' ? tipContent : ''}
-        .content=${typeof tipContent === 'string' ? null : tipContent}
-        position="top"
-      >
-        ${content}
-      </temba-tip>
-    `;
-  }
-
-  private isMacPlatform(): boolean {
-    return (
-      typeof navigator !== 'undefined' &&
-      /Mac|iPod|iPhone|iPad/.test(navigator.platform)
-    );
-  }
-
-  private getSearchShortcutLabel(): string {
-    return this.isMacPlatform() ? '⌘F' : 'Ctrl+F';
-  }
-
-  private renderToolbarShortcutLabel(
-    label: string,
-    shortcut: string
-  ): TemplateResult {
-    return html`<span style="display:inline-flex; align-items:center; gap:8px;">
-      <span>${label}</span>
-      <kbd>${shortcut}</kbd>
-    </span>`;
-  }
-
-  private renderToolbarLanguageOption(
-    option: { name: string; value: string; percent?: number },
-    selected: boolean
-  ): TemplateResult {
-    if (option.value === PRIMARY_LANGUAGE_OPTION_VALUE) {
-      const primaryBackground = selected ? '#e1e8ef' : '#edf1f5';
-      return html`
-        <div
-          style="display:flex; align-items:center; justify-content:space-between; gap:8px; background:${primaryBackground}; color:#2f3f52; border-radius:4px; padding:6px 10px;"
-        >
-          <span>${option.name}</span>
-          <span
-            style="display:inline-flex; align-items:center; border-radius:999px; background:rgba(47, 63, 82, 0.12); color:#2f3f52; font-size:10px; font-weight:700; line-height:1; padding:3px 7px;"
-            >Original</span
-          >
-        </div>
-      `;
-    }
-
-    const isComplete = option.percent === 100;
-    const optionBg = isComplete ? '#d4f5e0' : '';
-    const optionHoverBg = isComplete ? '#c0edce' : '';
-    const optionRadius = isComplete ? 'border-radius:4px;' : '';
-    const percentColor = isComplete ? 'color:#1a7f37;' : 'color:#5f6b7a;';
-
-    return html`
-      <div
-        style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; ${optionBg ? `background:${optionBg};` : ''} ${optionRadius}"
-        @mouseenter=${isComplete ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = optionHoverBg; } : null}
-        @mouseleave=${isComplete ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = optionBg; } : null}
-      >
-        <span style="${isComplete ? 'color:#1a7f37;' : ''}">${option.name}</span>
-        <span style="font-size:11px; font-weight:600; ${percentColor}"
-          >${option.percent ?? 0}%</span
-        >
-      </div>
-    `;
-  }
-
-  private renderToolbar(): TemplateResult {
+  private renderToolbarElement(): TemplateResult {
     const languages = this.getLocalizationLanguages();
     const availableLanguages = this.getAvailableLanguages();
     const baseLanguage = this.definition?.language;
-    const languageOptionCount = (baseLanguage ? 1 : 0) + languages.length;
-    const showLanguageControls = languageOptionCount > 1;
     const baseLanguageName =
       availableLanguages.find((lang) => lang.code === baseLanguage)?.name ||
       baseLanguage ||
@@ -6364,11 +6249,6 @@ export class Editor extends RapidElement {
     const percent = Math.round(
       (progress.localized / Math.max(progress.total, 1)) * 100
     );
-    const hasTranslations = progress.total > 0;
-    const showLocalizationTools = Boolean(activeLanguage);
-    const searchTargetLabel = this.showMessageTable
-      ? 'Search table'
-      : 'Search flow';
     const languageOptions = [
       {
         name: baseLanguageName,
@@ -6390,179 +6270,56 @@ export class Editor extends RapidElement {
     ];
 
     return html`
-      <div class="editor-toolbar">
-        <div class="toolbar-left">
-          ${this.renderToolbarTip(
-            'Flow View',
-            html`
-              <button
-                class="toolbar-btn ${!this.showMessageTable ? 'active' : ''}"
-                @click=${() => { this.showMessageTable = false; }}
-                aria-label="Flow View"
-              >
-                <temba-icon name="flow" size="1"></temba-icon>
-              </button>
-            `
-          )}
-          ${this.renderToolbarTip(
-            'Table View',
-            html`
-              <button
-                class="toolbar-btn ${this.showMessageTable ? 'active' : ''}"
-                @click=${() => { this.showMessageTable = true; }}
-                aria-label="Table View"
-              >
-                <temba-icon name=${Icon.quick_replies} size="1"></temba-icon>
-              </button>
-            `
-          )}
-          ${showLanguageControls
-            ? html`
-              <div class="toolbar-divider"></div>
-              <div class="toolbar-language-group">
-                <div class="toolbar-language">
-                  ${this.renderToolbarTip(
-                    'Change language',
-                    html`
-                      <button
-                        class="language-pill ${isBaseSelected ? 'primary' : percent === 100 ? 'complete' : ''}"
-                        id="language-btn"
-                        @click=${this.handleLanguageIconClick}
-                        aria-label="Change language"
-                      >
-                        <temba-icon name=${Icon.language}></temba-icon>
-                        <span>${currentLanguage.name}</span>
-                        ${!isBaseSelected
-                          ? html`<span class="language-percent">${percent}%</span>`
-                          : ''}
-                        <temba-icon
-                          class="language-pill-caret"
-                          name=${this.showLanguageOptions
-                            ? Icon.arrow_up
-                            : Icon.arrow_down}
-                        ></temba-icon>
-                      </button>
-                    `
-                  )}
-                  <temba-options
-                    .anchorTo=${this.querySelector('#language-btn') as HTMLElement}
-                    .options=${languageOptions}
-                    .renderOption=${this.renderToolbarLanguageOption}
-                    ?visible=${this.showLanguageOptions}
-                    @temba-selection=${this.handleLanguageOptionSelected}
-                    style="--temba-options-option-margin:4px; --temba-options-option-padding:0; --temba-options-option-radius:4px;"
-                    min-width="230"
-                  ></temba-options>
-                </div>
-                ${showLocalizationTools
-                  ? this.renderToolbarTranslationTools(hasTranslations)
-                  : ''}
-              </div>
-            `
-            : ''}
-        </div>
-        <div class="toolbar-right">
-          ${!this.showMessageTable ? html`
-            ${this.renderToolbarTip(
-              'Zoom to fit',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomToFit}
-                  ?disabled=${!this.zoomInitialized || this.zoomFitted}
-                  aria-label="Zoom to fit"
-                >
-                  <temba-icon name=${Icon.zoom_fit} size="1"></temba-icon>
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-            ${this.renderToolbarTip(
-              'Zoom out',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomOut}
-                  ?disabled=${!this.zoomInitialized || this.zoom <= 0.3}
-                  aria-label="Zoom out"
-                >
-                  −
-                </button>
-              `
-            )}
-            <span class="toolbar-zoom-level">${this.zoomInitialized ? `${Math.round(this.zoom * 100)}%` : ''}</span>
-            ${this.renderToolbarTip(
-              'Zoom in',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomIn}
-                  ?disabled=${!this.zoomInitialized || this.zoom >= 1.0}
-                  aria-label="Zoom in"
-                >
-                  +
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-            ${this.renderToolbarTip(
-              'Zoom to 100%',
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.zoomToFull}
-                  ?disabled=${!this.zoomInitialized || this.zoom >= 1.0}
-                  aria-label="Zoom to 100%"
-                >
-                  <temba-icon name=${Icon.zoom_in} size="1"></temba-icon>
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-          ` : ''}
-            ${this.renderToolbarTip(
-              'Revisions',
-              html`
-                <button
-                class="toolbar-btn ${!this.revisionsWindowHidden
-                  ? 'active'
-                  : ''}"
-                @click=${this.handleRevisionsTabClick}
-                aria-label="Revisions"
-              >
-                <temba-icon
-                  name=${this.isSaving ? 'progress_spinner' : 'revisions'}
-                  size="1"
-                  ?spin=${this.isSaving}
-                ></temba-icon>
-                </button>
-              `
-            )}
-            <div class="toolbar-divider"></div>
-            ${this.renderToolbarTip(
-              this.renderToolbarShortcutLabel(
-                searchTargetLabel,
-                this.getSearchShortcutLabel()
-              ),
-              html`
-                <button
-                  class="toolbar-btn"
-                  @click=${this.openFlowSearch}
-                  ?disabled=${!!this.viewingRevision}
-                  aria-label=${searchTargetLabel}
-                >
-                  <temba-icon name=${Icon.search} size="1"></temba-icon>
-                </button>
-              `
-            )}
-        </div>
-      </div>
+      <temba-editor-toolbar
+        ?message-view=${this.showMessageTable}
+        .zoom=${this.zoom}
+        ?zoom-initialized=${this.zoomInitialized}
+        ?zoom-fitted=${this.zoomFitted}
+        ?revisions-active=${!this.revisionsWindowHidden}
+        ?is-saving=${this.isSaving}
+        ?search-disabled=${!!this.viewingRevision}
+        .languageOptions=${languageOptions}
+        current-language-name=${currentLanguage.name}
+        ?is-base-language=${isBaseSelected}
+        .languagePercent=${percent}
+        ?show-localization-tools=${Boolean(activeLanguage)}
+        @temba-button-clicked=${this.handleToolbarAction}
+      ></temba-editor-toolbar>
     `;
   }
 
-  private renderToolbarTranslationTools(_hasTranslations: boolean): TemplateResult {
-    // auto translate button hidden pending backend changes
-    return html``;
+  private handleToolbarAction(e: CustomEvent): void {
+    const detail = e.detail as ToolbarAction;
+    switch (detail.action) {
+      case 'view-change':
+        this.showMessageTable = detail.view === 'table';
+        break;
+      case 'zoom-in':
+        this.zoomIn();
+        break;
+      case 'zoom-out':
+        this.zoomOut();
+        break;
+      case 'zoom-to-fit':
+        this.zoomToFit();
+        break;
+      case 'zoom-to-full':
+        this.zoomToFull();
+        break;
+      case 'revisions':
+        this.handleRevisionsTabClick();
+        break;
+      case 'search':
+        this.openFlowSearch();
+        break;
+      case 'language-change':
+        if (detail.isPrimary) {
+          this.handleLanguageChange(this.definition?.language || '');
+        } else if (detail.languageCode) {
+          this.handleLanguageChange(detail.languageCode);
+        }
+        break;
+    }
   }
 
   /**
@@ -6721,7 +6478,7 @@ export class Editor extends RapidElement {
     return html`${style} ${this.renderIssuesWindow()}
       ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
       <div id="editor-container">
-        ${this.renderToolbar()}
+        ${this.renderToolbarElement()}
         <div id="editor">
           ${this.showMessageTable
             ? html`<temba-message-table></temba-message-table>`
@@ -6852,6 +6609,7 @@ export class Editor extends RapidElement {
           `}
         </div>
         ${this.renderPendingCard()}
+        <div class="drag-hint" id="drag-hint">Hold ⇧ to duplicate</div>
       </div>
       <div class="loupe" id="loupe">
         <div class="loupe-content" id="loupe-content"></div>