@nyaruka/temba-components 0.141.0 → 0.142.0

package/src/list/SortableList.ts

@@ -81,7 +81,8 @@ export class SortableList extends RapidElement {
 
   ghostElement: HTMLDivElement = null;
   downEle: HTMLDivElement = null;
-  originalElementRect: DOMRect = null; // Store original dimensions
+  originalElementRect: DOMRect = null; // Store viewport dimensions for ghost
+  originalLayoutSize: { width: number; height: number } = null; // Store layout dimensions for placeholders
   originalDragIndex: number = -1; // Store original index before moving element
   xOffset = 0;
   yOffset = 0;
@@ -319,16 +320,17 @@ export class SortableList extends RapidElement {
 
     this.dropPlaceholder.className = 'drop-placeholder sortable';
 
-    // Copy dimensions from the original element (before it was hidden)
-    if (this.originalElementRect) {
-      const rect = this.originalElementRect;
-      this.dropPlaceholder.style.width = rect.width + 'px';
-      this.dropPlaceholder.style.height = rect.height + 'px';
-      this.dropPlaceholder.style.minHeight = rect.height + 'px';
+    // Use layout-space dimensions for placeholders (unaffected by ancestor transforms)
+    if (this.originalLayoutSize) {
+      const size = this.originalLayoutSize;
+      this.dropPlaceholder.style.width = size.width + 'px';
+      this.dropPlaceholder.style.height = size.height + 'px';
+      this.dropPlaceholder.style.minHeight = size.height + 'px';
       this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
       this.dropPlaceholder.style.flexShrink = '0';
       this.dropPlaceholder.style.background = '#f3f4f6';
-      this.dropPlaceholder.style.border = '2px dashed #d1d5db';
+      this.dropPlaceholder.style.outline = '2px dashed #d1d5db';
+      this.dropPlaceholder.style.outlineOffset = '-2px';
     }
 
     // Insert the placeholder in the correct position in the DOM
@@ -352,15 +354,16 @@ export class SortableList extends RapidElement {
     this.dropPlaceholder = document.createElement('div');
     this.dropPlaceholder.className = 'drop-placeholder sortable';
 
-    // Copy dimensions from the original element
-    const rect = this.originalElementRect;
-    this.dropPlaceholder.style.width = rect.width + 'px';
-    this.dropPlaceholder.style.height = rect.height + 'px';
-    this.dropPlaceholder.style.minHeight = rect.height + 'px';
+    // Use layout-space dimensions for placeholders (unaffected by ancestor transforms)
+    const size = this.originalLayoutSize;
+    this.dropPlaceholder.style.width = size.width + 'px';
+    this.dropPlaceholder.style.height = size.height + 'px';
+    this.dropPlaceholder.style.minHeight = size.height + 'px';
     this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
     this.dropPlaceholder.style.flexShrink = '0';
     this.dropPlaceholder.style.background = '#f3f4f6';
-    this.dropPlaceholder.style.border = '2px dashed #d1d5db';
+    this.dropPlaceholder.style.outline = '2px dashed #d1d5db';
+    this.dropPlaceholder.style.outlineOffset = '-2px';
 
     // Insert the placeholder right after the hidden original element
     this.downEle.insertAdjacentElement('afterend', this.dropPlaceholder);
@@ -387,7 +390,11 @@ export class SortableList extends RapidElement {
 
       // Use getBoundingClientRect for accurate offsets and store original dimensions
       const rect = ele.getBoundingClientRect();
-      this.originalElementRect = rect; // Store the original rect before hiding
+      this.originalElementRect = rect; // Store viewport rect for ghost positioning
+      this.originalLayoutSize = {
+        width: ele.offsetWidth,
+        height: ele.offsetHeight
+      }; // Store layout dimensions for placeholders
       this.xOffset = event.clientX - rect.left;
       this.yOffset = event.clientY - rect.top;
       this.yDown = event.clientY;
@@ -424,17 +431,31 @@ export class SortableList extends RapidElement {
       // Style the clone as a ghost
       this.ghostElement.classList.add('ghost');
 
-      // Use the stored original dimensions for positioning
+      // Detect ancestor scale transform (e.g. zoom) by comparing viewport
+      // to layout dimensions, so the ghost renders content at the right scale
       const rect = this.originalElementRect;
+      const layoutSize = this.originalLayoutSize;
+      const ancestorScale =
+        layoutSize.width > 0 ? rect.width / layoutSize.width : 1;
+      const hasAncestorScale = Math.abs(ancestorScale - 1) > 0.001;
 
       this.ghostElement.style.position = 'fixed';
       this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
       this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
-      this.ghostElement.style.width = rect.width + 'px';
-      this.ghostElement.style.height = rect.height + 'px';
       this.ghostElement.style.zIndex = '99999';
       this.ghostElement.style.opacity = '0.8';
-      this.ghostElement.style.transform = 'scale(1.03)';
+
+      if (hasAncestorScale) {
+        // Use layout dimensions with ancestor scale so content renders correctly
+        this.ghostElement.style.width = layoutSize.width + 'px';
+        this.ghostElement.style.height = layoutSize.height + 'px';
+        this.ghostElement.style.transform = `scale(${ancestorScale * 1.03})`;
+        this.ghostElement.style.transformOrigin = '0 0';
+      } else {
+        this.ghostElement.style.width = rect.width + 'px';
+        this.ghostElement.style.height = rect.height + 'px';
+        this.ghostElement.style.transform = 'scale(1.03)';
+      }
 
       // allow component to customize the ghost node
       if (this.prepareGhost) {

package/src/live/ContactChat.ts

@@ -162,6 +162,15 @@ export class ContactChat extends ContactStoreElement {
         opacity: 0.9;
       }
 
+      .flow-footer {
+        text-align: center;
+        pointer-events: none;
+      }
+
+      .flow-footer .in-flow {
+        pointer-events: auto;
+      }
+
       .in-flow:hover {
         opacity: 1;
       }
@@ -780,7 +789,7 @@ export class ContactChat extends ContactStoreElement {
             >
               ${inFlow
                 ? html`
-                    <div slot="footer" style="text-align:center;">
+                    <div slot="footer" class="flow-footer">
                       <div class="in-flow">
                         <div class="flow-name">
                           <temba-icon name="flow" size="1.2"></temba-icon>

package/src/store/flow-definition.d.ts

@@ -325,6 +325,7 @@ export interface FlowUI {
   languages: Record<string, string>[];
   translation_filters?: { categories: boolean };
   auto_translations?: Record<string, Record<string, string[]>>;
+  editor?: string;
 }
 
 export interface FlowDefinition {

package/src/version.ts

@@ -0,0 +1,10 @@
+declare const __TEMBA_COMPONENTS_VERSION__: string;
+
+let _version = 'dev';
+try {
+  _version = __TEMBA_COMPONENTS_VERSION__;
+} catch {
+  // not replaced by build tooling; keep default
+}
+
+export const TEMBA_COMPONENTS_VERSION = _version;