ngx-kit 9.0.1 → 9.2.0

package/fesm2022/ngx-kit-drag-resize.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { signal, EventEmitter, Injectable, InjectionToken, inject, ApplicationRef, Directive, model, input, output, Renderer2, effect, ContentChild, Input, HostListener, Output, ElementRef } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
 
 /**
  * Boundary clamping utilities.
@@ -70,17 +69,117 @@ function clampResizeWithinBoundary(boundaryRect, startRect, width, height, left,
     return { width: clampedWidth, height: clampedHeight, left: clampedLeft, top: clampedTop };
 }
 /** Current page zoom level (1 = 100%). Falls back to devicePixelRatio pre visualViewport. */
-function getPageZoom() {
-    return window.visualViewport?.scale ?? window.devicePixelRatio ?? 1;
+function getPageZoom(element) {
+    const win = element?.ownerDocument.defaultView ?? (typeof window !== 'undefined' ? window : null);
+    return win?.visualViewport?.scale ?? win?.devicePixelRatio ?? 1;
 }
 /** Adjusts a raw pointer-derived value for the current page zoom level. */
-function adjustForZoom(value) {
-    const zoom = getPageZoom();
+function adjustForZoom(value, element) {
+    const zoom = getPageZoom(element);
     return zoom ? value / zoom : value;
 }
 
+/** Base (LTR) physical direction for every logical direction. */
+const LTR_BASE = {
+    start: 'w',
+    end: 'e',
+    'n-start': 'nw',
+    'n-end': 'ne',
+    's-start': 'sw',
+    's-end': 'se',
+};
+/** Mirrors the horizontal component of a physical direction. 'n' / 's' pass through unchanged. */
+const MIRROR = {
+    n: 'n',
+    s: 's',
+    e: 'w',
+    w: 'e',
+    ne: 'nw',
+    nw: 'ne',
+    se: 'sw',
+    sw: 'se',
+};
+function isLogicalDirection(dir) {
+    return Object.prototype.hasOwnProperty.call(LTR_BASE, dir);
+}
+/**
+ * True when `element` sits inside a right-to-left context.
+ *
+ * Reads the *computed* `direction` style instead of `element.dir`, because
+ * `direction` is inherited and is almost never set on the resizable element
+ * itself - it's usually set on `<html>`, `<body>`, or some ancestor wrapper.
+ */
+function isRtl(element) {
+    const win = element.ownerDocument.defaultView;
+    return win ? win.getComputedStyle(element).direction === 'rtl' : false;
+}
+/**
+ * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
+ * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
+ * based on `rtl`.
+ *
+ * Physical directions pass through untouched, so it's always safe to call this
+ * even when `dir` might already be physical (e.g. resolving a direction that was
+ * already resolved once before).
+ */
+function resolveLogicalDirection(dir, rtl) {
+    if (!isLogicalDirection(dir)) {
+        return dir;
+    }
+    const base = LTR_BASE[dir];
+    return rtl ? MIRROR[base] : base;
+}
+
 /** Above any app chrome (modals, sticky headers) but below the browser's own UI. */
 const PREVIEW_Z_INDEX = '2147483000';
+/**
+ * The clone lives in <body>, so rules that depend on its ORIGINAL ancestors (`.palette .tile`,
+ * `.board { font: ... }`, `[dir=rtl] .x`) no longer match it. These are the properties that make
+ * the difference between "looks like the block I grabbed" and "looks like an unstyled <div>":
+ * the inherited text properties plus the root box's own visual properties. Only the ROOT is
+ * handled (one `getComputedStyle` at drag start); use `*ngxDragPreview` for a bespoke preview.
+ */
+const PREVIEW_STYLE_PROPS = [
+    // inherited
+    'direction',
+    'color',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'line-height',
+    'letter-spacing',
+    'text-align',
+    'text-transform',
+    'white-space',
+    // the root box
+    'background-color',
+    'background-image',
+    'background-size',
+    'background-position',
+    'background-repeat',
+    'border-top',
+    'border-right',
+    'border-bottom',
+    'border-left',
+    'border-radius',
+    'box-shadow',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'opacity',
+];
+function copyVisualStyles(source, target) {
+    const cs = source.ownerDocument.defaultView?.getComputedStyle(source);
+    if (!cs)
+        return;
+    for (const prop of PREVIEW_STYLE_PROPS) {
+        const value = cs.getPropertyValue(prop);
+        if (value)
+            target.style.setProperty(prop, value);
+    }
+}
 class DragPreviewRef {
     tpl;
     /** Set by `ngxDragPreview` so the embedded view can join Angular's change-detection tree. */
@@ -112,6 +211,7 @@ class DragPreviewRef {
             // Avoid duplicated ids in the document.
             this.element.removeAttribute('id');
             this.element.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'));
+            copyVisualStyles(dragEl, this.element);
             this.element.classList.add('ngx-drag-preview');
             this.element.setAttribute('aria-hidden', 'true');
             this.element.setAttribute('inert', '');
@@ -135,9 +235,10 @@ class DragPreviewRef {
             willChange: 'transform',
             zIndex: PREVIEW_Z_INDEX,
         });
+        const win = doc.defaultView;
         if (isRtl(doc.body)) {
             Object.assign(this.element.style, {
-                right: `${window.innerWidth - rect.right}px`,
+                right: `${(win?.innerWidth ?? rect.right) - rect.right}px`,
                 left: 'auto',
             });
         }
@@ -147,7 +248,7 @@ class DragPreviewRef {
                 right: 'auto',
             });
         }
-        doc.body.appendChild(this.element);
+        (doc.body ?? doc.documentElement).appendChild(this.element);
         return this.element;
     }
     detach() {
@@ -161,6 +262,174 @@ class DragPreviewRef {
     }
 }
 
+function viewportDeltaToLocal(element, delta, includeElementTransform = true) {
+    const inverse = invertLinear(getLocalToViewportMatrix(element, includeElementTransform));
+    return applyLinear(inverse, delta);
+}
+/**
+ * Inverse of a 2D linear transform, or `null` when it is not invertible (zero-scale ancestor).
+ * Exposed so hot paths (every pointer move) can compute the matrix ONCE per drag instead of
+ * walking the ancestor chain with `getComputedStyle` on every event.
+ */
+function invertLinear(matrix) {
+    const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+    if (!Number.isFinite(determinant) || Math.abs(determinant) < 1e-8)
+        return null;
+    return {
+        a: matrix.d / determinant,
+        b: -matrix.b / determinant,
+        c: -matrix.c / determinant,
+        d: matrix.a / determinant,
+    };
+}
+/** Applies a linear transform to a vector. A `null` matrix (see `invertLinear`) yields `{0,0}`. */
+function applyLinear(matrix, delta) {
+    if (!matrix)
+        return { x: 0, y: 0 };
+    return {
+        x: matrix.a * delta.x + matrix.c * delta.y,
+        y: matrix.b * delta.x + matrix.d * delta.y,
+    };
+}
+/**
+ * Converts a SIZE measured in the viewport pixels of `fromDocument` into the viewport pixels of
+ * `toDocument` (they differ when the iframe element is scaled, e.g. a zoomed-out device preview).
+ * Returns `null` when the documents are unrelated / cross-origin.
+ */
+function convertSizeBetweenDocuments(size, fromDocument, toDocument) {
+    if (fromDocument === toDocument)
+        return { ...size };
+    const a = convertPointBetweenDocuments({ x: 0, y: 0 }, fromDocument, toDocument);
+    const b = convertPointBetweenDocuments({ x: size.x, y: size.y }, fromDocument, toDocument);
+    if (!a || !b)
+        return null;
+    return { x: b.x - a.x, y: b.y - a.y };
+}
+/**
+ * Axis scale (always positive) between `element`'s local CSS pixels and viewport pixels,
+ * i.e. how many screen pixels one CSS pixel inside `element` occupies. Rotation is ignored.
+ */
+function getLocalScale(element) {
+    const m = getLocalToViewportMatrix(element);
+    return { x: Math.hypot(m.a, m.b) || 1, y: Math.hypot(m.c, m.d) || 1 };
+}
+function localDeltaToViewport(element, delta) {
+    const matrix = getLocalToViewportMatrix(element);
+    return {
+        x: matrix.a * delta.x + matrix.c * delta.y,
+        y: matrix.b * delta.x + matrix.d * delta.y,
+    };
+}
+/** Returns the composed 2D linear transform from element-local to viewport space. */
+function getLocalToViewportMatrix(element, includeElementTransform = true) {
+    const win = element.ownerDocument.defaultView;
+    if (!win || typeof win.DOMMatrix !== 'function') {
+        return { a: 1, b: 0, c: 0, d: 1 };
+    }
+    let result = { a: 1, b: 0, c: 0, d: 1 };
+    let current = includeElementTransform ? element : element.parentElement;
+    while (current) {
+        const style = win.getComputedStyle(current);
+        const transform = style.transform;
+        if (transform && transform !== 'none') {
+            try {
+                const matrix = new win.DOMMatrix(transform);
+                result = multiplyLinear({ a: matrix.a, b: matrix.b, c: matrix.c, d: matrix.d }, result);
+            }
+            catch {
+                // Ignore unsupported/malformed transforms and continue with remaining ancestors.
+            }
+        }
+        // CSS `zoom` is not represented consistently in computed `transform` across browsers.
+        const zoom = Number.parseFloat(style.getPropertyValue('zoom'));
+        if (Number.isFinite(zoom) && zoom > 0 && zoom !== 1) {
+            result = multiplyLinear({ a: zoom, b: 0, c: 0, d: zoom }, result);
+        }
+        current = current.parentElement;
+    }
+    return result;
+}
+function multiplyLinear(left, right) {
+    return {
+        a: left.a * right.a + left.c * right.b,
+        b: left.b * right.a + left.d * right.b,
+        c: left.a * right.c + left.c * right.d,
+        d: left.b * right.c + left.d * right.d,
+    };
+}
+/**
+ * Converts a client-space point from one same-origin Document viewport to another.
+ * The conversion walks both frameElement chains through their common top-level document.
+ * Cross-origin frame boundaries cannot be inspected and return null.
+ */
+function convertPointBetweenDocuments(point, fromDocument, toDocument) {
+    if (fromDocument === toDocument)
+        return { ...point };
+    const toTop = (doc, value) => {
+        let current = doc;
+        let result = { ...value };
+        const visited = new Set();
+        while (current.defaultView?.frameElement) {
+            if (visited.has(current))
+                return null;
+            visited.add(current);
+            let frame;
+            try {
+                frame = current.defaultView.frameElement;
+            }
+            catch {
+                return null;
+            }
+            const iframe = frame;
+            const rect = iframe.getBoundingClientRect();
+            const scaleX = iframe.offsetWidth ? rect.width / iframe.offsetWidth : 1;
+            const scaleY = iframe.offsetHeight ? rect.height / iframe.offsetHeight : 1;
+            result = {
+                x: rect.left + iframe.clientLeft * scaleX + result.x * scaleX,
+                y: rect.top + iframe.clientTop * scaleY + result.y * scaleY,
+            };
+            current = iframe.ownerDocument;
+        }
+        return { document: current, point: result };
+    };
+    const from = toTop(fromDocument, point);
+    if (!from)
+        return null;
+    const targetFrames = [];
+    let current = toDocument;
+    const visited = new Set();
+    while (current && current !== from.document) {
+        if (visited.has(current))
+            return null;
+        visited.add(current);
+        let frame;
+        try {
+            frame = current.defaultView?.frameElement ?? null;
+        }
+        catch {
+            return null;
+        }
+        if (!frame)
+            return null;
+        targetFrames.push(frame);
+        current = frame.ownerDocument;
+    }
+    if (current !== from.document)
+        return null;
+    let result = from.point;
+    for (let i = targetFrames.length - 1; i >= 0; i--) {
+        const iframe = targetFrames[i];
+        const rect = iframe.getBoundingClientRect();
+        const scaleX = iframe.offsetWidth ? rect.width / iframe.offsetWidth : 1;
+        const scaleY = iframe.offsetHeight ? rect.height / iframe.offsetHeight : 1;
+        result = {
+            x: (result.x - rect.left) / scaleX - iframe.clientLeft,
+            y: (result.y - rect.top) / scaleY - iframe.clientTop,
+        };
+    }
+    return result;
+}
+
 let zIndexCounter = 1000;
 class DragRef {
     data;
@@ -197,6 +466,8 @@ class DragRef {
     sourceDisplay = '';
     sourcePointerEvents = '';
     sourceTransition = '';
+    sourceWillChange = '';
+    sourceTransform = '';
     /** True while a drop-list drag (body preview + placeholder) is in progress. Free drag: always false. */
     listDrag = false;
     cachedLists = [];
@@ -211,8 +482,18 @@ class DragRef {
     lastEffective = { x: 0, y: 0 };
     scrollListener;
     resizeListener;
+    /**
+     * Every document that hosts a candidate list (the source document, plus any same-origin iframe
+     * such as a page-builder canvas) needs its own scroll/resize listeners: `scroll` does not cross
+     * the iframe boundary, so scrolling the canvas never reaches a listener on the parent page.
+     */
+    documentListeners = new Map();
+    /** viewport → local matrix of the dragged element, computed once per free drag. */
+    freeDragInverse;
     init() {
-        this.previousTransform = getComputedStyle?.(this.el)?.getPropertyValue?.('transform');
+        this.previousTransform =
+            this.el.ownerDocument.defaultView?.getComputedStyle(this.el).transform ?? '';
+        this.sourceTransform = this.el.style.transform;
     }
     withDropList(list) {
         if (this.dropList === list)
@@ -237,18 +518,22 @@ class DragRef {
         this.moveDx = 0;
         this.moveDy = 0;
         this.scrollCompensation = { x: 0, y: 0 };
+        this.freeDragInverse = undefined;
         // Only draggables that are direct children of their drop list take part in sorting.
         // Everything else is a plain free drag.
         const list = this.dropList && this.dropList.el === this.el.parentElement ? this.dropList : null;
         this.originDropList = list;
         this.originIndex = list?.getItemIndex(this) ?? -1;
-        this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
+        const win = this.el.ownerDocument.defaultView;
+        this.previousTransform = win?.getComputedStyle(this.el).transform ?? '';
+        this.sourceTransform = this.el.style.transform;
         this.isDragging.set(true);
         this.previousZIndex = this.el.style.zIndex;
         this.sourceVisibility = this.el.style.visibility;
         this.sourceDisplay = this.el.style.display;
         this.sourcePointerEvents = this.el.style.pointerEvents;
         this.sourceTransition = this.el.style.transition;
+        this.sourceWillChange = this.el.style.willChange;
         this.el.classList.add('ngx-draggable--dragging');
         this.el.style.willChange = 'transform';
         this.el.style.transition = 'none';
@@ -334,7 +619,8 @@ class DragRef {
         this.el.style.visibility = this.sourceVisibility;
         this.el.style.display = this.sourceDisplay;
         this.el.style.pointerEvents = this.sourcePointerEvents;
-        this.el.style.willChange = '';
+        this.el.style.willChange = this.sourceWillChange;
+        this.el.style.transition = this.sourceTransition;
         this.el.style.zIndex = this.previousZIndex;
     }
     cancelDrag() {
@@ -350,7 +636,7 @@ class DragRef {
             return;
         }
         // ---- free drag: unchanged ----
-        this.el.style.transform = this.previousTransform;
+        this.el.style.transform = this.sourceTransform;
         this.el.style.visibility = this.sourceVisibility;
         this.el.style.pointerEvents = this.sourcePointerEvents;
         this.scrollCompensation = { x: 0, y: 0 };
@@ -358,10 +644,24 @@ class DragRef {
     }
     /** Abort without emitting anything (the directive was destroyed mid-drag). Idempotent. */
     dispose() {
-        if (!this.listDrag)
+        if (!this.isDragging())
             return;
         this.isDragging.set(false);
-        this.finishListDrag(false);
+        this.position.set({ x: 0, y: 0 });
+        if (this.listDrag) {
+            this.finishListDrag(false);
+            return;
+        }
+        this.el.style.transform = this.sourceTransform;
+        this.el.style.visibility = this.sourceVisibility;
+        this.el.style.display = this.sourceDisplay;
+        this.el.style.pointerEvents = this.sourcePointerEvents;
+        this.el.style.transition = this.sourceTransition;
+        this.el.style.willChange = this.sourceWillChange;
+        this.el.style.zIndex = this.previousZIndex;
+        this.el.classList.remove('ngx-draggable--dragging');
+        this.scrollCompensation = { x: 0, y: 0 };
+        this.position.set({ x: 0, y: 0 });
     }
     /** True while a drop-list drag is running. */
     get isListDrag() {
@@ -410,14 +710,21 @@ class DragRef {
             : '';
         const tx = this.moveDx + this.scrollCompensation.x;
         const ty = this.moveDy + this.scrollCompensation.y;
-        this.el.style.transform = `${base}translate3d(${tx}px, ${ty}px, 0)`;
+        if (this.freeDragInverse === undefined) {
+            // Includes the element's own (pre-drag) transform: the translate is appended after it.
+            this.freeDragInverse = invertLinear(getLocalToViewportMatrix(this.el, true));
+        }
+        const local = applyLinear(this.freeDragInverse, { x: tx, y: ty });
+        this.el.style.transform = `${base}translate3d(${local.x}px, ${local.y}px, 0)`;
     }
     // -------------------------------------------------------------------------------------
     // drop-list drag
     // -------------------------------------------------------------------------------------
     beginListDrag(origin, pointer) {
         const doc = this.el.ownerDocument;
-        const win = doc.defaultView ?? window;
+        const win = doc.defaultView;
+        if (!win)
+            return;
         this.dropListsSnapshot = null; // force refreshDropCandidates() to do a full pass below
         this.refreshDropCandidates(origin);
         this.lastEffective = { ...pointer };
@@ -436,9 +743,40 @@ class DragRef {
                 l._refresh();
             this.updateDropTarget(this.lastEffective);
         };
-        // Capture: `scroll` does not bubble, and any ancestor (or the page) may be the one scrolling.
-        doc.addEventListener('scroll', this.scrollListener, { capture: true, passive: true });
-        win.addEventListener('resize', this.resizeListener, { passive: true });
+        this.syncDocumentListeners();
+    }
+    /**
+     * Keeps scroll/resize listeners attached to every document that currently hosts a candidate
+     * list. Capture: `scroll` does not bubble, and any ancestor (or the page) may be scrolling.
+     */
+    syncDocumentListeners() {
+        if (!this.scrollListener || !this.resizeListener)
+            return;
+        const scroll = this.scrollListener;
+        const resize = this.resizeListener;
+        const wanted = new Set([this.el.ownerDocument]);
+        for (const list of this.cachedLists) {
+            const doc = list.el?.ownerDocument;
+            if (doc)
+                wanted.add(doc);
+        }
+        for (const [doc, remove] of this.documentListeners) {
+            if (!wanted.has(doc)) {
+                remove();
+                this.documentListeners.delete(doc);
+            }
+        }
+        for (const doc of wanted) {
+            const win = doc.defaultView;
+            if (!win || this.documentListeners.has(doc))
+                continue;
+            doc.addEventListener('scroll', scroll, { capture: true, passive: true });
+            win.addEventListener('resize', resize, { passive: true });
+            this.documentListeners.set(doc, () => {
+                doc.removeEventListener('scroll', scroll, { capture: true });
+                win.removeEventListener('resize', resize);
+            });
+        }
     }
     /**
      * Recomputes which registered lists are valid targets for this drag — connected to the
@@ -467,6 +805,7 @@ class DragRef {
         }
         this.dropCandidates = next;
         this.cachedLists = next.map((c) => c.list);
+        this.syncDocumentListeners();
     }
     /**
      * Decide which list is under the pointer, switch if needed, then re-sort in the active one.
@@ -484,9 +823,11 @@ class DragRef {
         if (!origin)
             return;
         this.refreshDropCandidates(origin);
-        const next = this.resolveDropList(pointer);
+        const resolved = this.resolveDropList(pointer);
+        const next = resolved?.list ?? null;
+        const targetPointer = resolved?.pointer ?? pointer;
         if (next === this.activeDropList) {
-            next?.sortItem(this, pointer);
+            next?.sortItem(this, targetPointer);
             return;
         }
         const prev = this.activeDropList;
@@ -501,7 +842,7 @@ class DragRef {
             origin.exit(this); // truly outside the origin's territory now: reset it (idempotent)
         }
         this.activeDropList = next;
-        next?.enter(this, pointer.x, pointer.y); // fresh entry, or resumes a still-alive (frozen) session
+        next?.enter(this, targetPointer.x, targetPointer.y); // coordinates belong to the target document
     }
     /**
      * Innermost connected list under the pointer, from the precomputed candidates: deeper always
@@ -513,15 +854,22 @@ class DragRef {
         let best = null;
         let bestDepth = -1;
         for (const { list, depth } of this.dropCandidates) {
-            if (!list._containsPoint(pointer.x, pointer.y))
+            const targetDocument = list.el?.ownerDocument;
+            if (!targetDocument)
+                continue;
+            // Pointer coordinates originate in the draggable's document. A same-origin iframe has
+            // its own viewport coordinate space, so convert before testing its DropList geometry.
+            const targetPoint = convertPointBetweenDocuments(pointer, this.el.ownerDocument, targetDocument);
+            if (!targetPoint || !list._containsPoint(targetPoint.x, targetPoint.y))
                 continue;
             if (!best || depth > bestDepth) {
-                best = list;
+                best = { list, pointer: targetPoint };
                 bestDepth = depth;
             }
-            else if (depth === bestDepth && best !== this.activeDropList) {
-                if (list === this.activeDropList || list._area() < best._area())
-                    best = list;
+            else if (depth === bestDepth && best.list !== this.activeDropList) {
+                if (list === this.activeDropList || list._area() < best.list._area()) {
+                    best = { list, pointer: targetPoint };
+                }
             }
         }
         return best;
@@ -532,11 +880,9 @@ class DragRef {
      * regardless of how the drag ended. Only then is the drop event emitted.
      */
     finishListDrag(commit) {
-        const doc = this.el.ownerDocument;
-        if (this.scrollListener)
-            doc.removeEventListener('scroll', this.scrollListener, { capture: true });
-        if (this.resizeListener)
-            (doc.defaultView ?? window).removeEventListener('resize', this.resizeListener);
+        for (const remove of this.documentListeners.values())
+            remove();
+        this.documentListeners.clear();
         this.scrollListener = this.resizeListener = undefined;
         const target = commit ? this.activeDropList : null;
         const event = target?._finish(this, true) ?? null;
@@ -556,7 +902,7 @@ class DragRef {
         this.el.style.display = this.sourceDisplay;
         this.el.style.pointerEvents = this.sourcePointerEvents;
         this.el.style.transition = this.sourceTransition;
-        this.el.style.willChange = '';
+        this.el.style.willChange = this.sourceWillChange;
         this.el.style.zIndex = this.previousZIndex;
         if (event && target)
             target.onDrop.emit(event);
@@ -564,6 +910,7 @@ class DragRef {
     updatePreview() {
         if (!this.preview || !this.preview.element)
             return;
+        // Preview is fixed in the source document's viewport coordinate space.
         this.preview.element.style.transform = `translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
     }
 }
@@ -586,7 +933,7 @@ class ElementHelper {
         return false;
     }
     static findParentBySelector(elm, selector) {
-        var all = document.querySelectorAll(selector);
+        var all = elm.ownerDocument.querySelectorAll(selector);
         var cur = elm.parentNode;
         while (cur && !ElementHelper.collectionHas(all, cur)) {
             //keep going up until you find a match
@@ -615,15 +962,17 @@ function getFirstLevelDraggables(container) {
     return firstLevel;
 }
 function isElementNode(node) {
-    return node?.nodeType === Node.ELEMENT_NODE;
+    return node?.nodeType === Node.ELEMENT_NODE; // 1
 }
 function isDocumentNode(node) {
-    return node?.nodeType === Node.DOCUMENT_NODE;
+    return node?.nodeType === Node.DOCUMENT_NODE; // 9
 }
 function isShadowRootNode(node) {
     return node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
 }
 function getOwnerWindow(node) {
+    if (isDocumentNode(node))
+        return node.defaultView;
     return node?.ownerDocument?.defaultView ?? null;
 }
 function isWindow(value) {
@@ -950,7 +1299,7 @@ class ScrollFrame {
      * @param start   first element to inspect (walks up through its ancestors)
      * @param includeStart whether `start` itself counts (true for a list whose own scroll moves its items)
      */
-    constructor(start, includeStart = true, win = window) {
+    constructor(start, includeStart = true, win = start?.ownerDocument.defaultView ?? null) {
         this.win = win;
         let node = includeStart ? start : (start?.parentElement ?? null);
         const root = start?.ownerDocument.documentElement;
@@ -960,7 +1309,8 @@ class ScrollFrame {
                 this.targets.push(node);
             node = node.parentElement;
         }
-        this.targets.push(win);
+        if (win)
+            this.targets.push(win);
         this.origin = this.read();
     }
     /** Call when any scroll event fires. */
@@ -980,23 +1330,26 @@ class ScrollFrame {
         let x = 0;
         let y = 0;
         for (const t of this.targets) {
-            if (t === this.win) {
+            if (this.win && t === this.win) {
                 x += this.win.scrollX;
                 y += this.win.scrollY;
             }
             else {
-                x += t.scrollLeft;
-                y += t.scrollTop;
+                const el = t;
+                // Element scroll offsets are local CSS pixels; geometry snapshots are viewport pixels.
+                const delta = localDeltaToViewport(el, { x: el.scrollLeft, y: el.scrollTop });
+                x += delta.x;
+                y += delta.y;
             }
         }
         return { x, y };
     }
 }
 function scrolls(el) {
-    const s = getComputedStyle?.(el);
+    const s = el.ownerDocument.defaultView?.getComputedStyle(el);
     // `hidden` containers still scroll programmatically; `clip` never does.
     const scrollish = (v) => v === 'auto' || v === 'scroll' || v === 'overlay' || v === 'hidden';
-    return scrollish(s.overflowX) || scrollish(s.overflowY);
+    return !!s && (scrollish(s.overflowX) || scrollish(s.overflowY));
 }
 
 /**
@@ -1007,7 +1360,7 @@ function scrolls(el) {
  */
 function makeSpacer(container) {
     for (const n of Array.from(container.childNodes)) {
-        if (n.nodeType === Node.TEXT_NODE && n.nodeValue && /^\s+$/.test(n.nodeValue)) {
+        if (n.nodeType === 3 && n.nodeValue && /^\s+$/.test(n.nodeValue)) {
             return container.ownerDocument.createTextNode(n.nodeValue);
         }
     }
@@ -1058,6 +1411,13 @@ class SortSession {
     /** undefined = not created yet, null = this layout has no whitespace separators. */
     spacer;
     onOffsetChange;
+    /**
+     * viewport → local-CSS-pixel matrix of the container's coordinate space. Every slot is a direct
+     * child of the container, so ONE matrix serves all of them. It is computed lazily and kept for
+     * the whole session: walking the ancestor chain with `getComputedStyle` on every displacement
+     * would put style reads on the hot path (see the "zero style reads per move" test).
+     */
+    inverse;
     constructor(init) {
         this.spacer = init.spacer;
         this.onOffsetChange = init.onOffsetChange;
@@ -1130,6 +1490,7 @@ class SortSession {
             return;
         const target = this.targetIdx;
         this.clearDisplacement();
+        this.inverse = undefined; // the viewport may have changed the ancestors' transforms
         this.snapshot();
         this.frame = new ScrollFrame(this.container, true);
         if (this.mode === 'transform') {
@@ -1215,6 +1576,7 @@ class SortSession {
         const horizontal = this.model.axis === 'x';
         this.entries.forEach((e, i) => {
             const o = offsets[i];
+            // `o` is derived from DOMRect measurements (viewport CSS pixels).
             this.setOffset(e, horizontal ? { x: o, y: 0 } : { x: 0, y: o });
         });
     }
@@ -1228,10 +1590,17 @@ class SortSession {
         }
         else {
             this.applied.set(e.el, off);
-            e.el.style.transform = `translate3d(${off.x}px, ${off.y}px, 0)${e.base}`;
+            const local = this.toLocal(off);
+            e.el.style.transform = `translate3d(${local.x}px, ${local.y}px, 0)${e.base}`;
         }
         this.onOffsetChange?.(e.el, off);
     }
+    toLocal(delta) {
+        if (this.inverse === undefined) {
+            this.inverse = invertLinear(getLocalToViewportMatrix(this.container, true));
+        }
+        return applyLinear(this.inverse, delta);
+    }
     // ---------------------------------------------------------------------------------------
     // flow strategy (single placeholder move + FLIP transforms)
     // ---------------------------------------------------------------------------------------
@@ -1253,7 +1622,8 @@ class SortSession {
             const dx = first[i].left - last[i].left;
             const dy = first[i].top - last[i].top;
             if (this.animationMs > 0 && (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5)) {
-                e.el.style.transform = `translate3d(${dx}px, ${dy}px, 0)${e.base}`;
+                const local = this.toLocal({ x: dx, y: dy });
+                e.el.style.transform = `translate3d(${local.x}px, ${local.y}px, 0)${e.base}`;
                 moved.push(e);
             }
         });
@@ -1298,63 +1668,10 @@ class SortSession {
     }
 }
 function initialTransform(el) {
-    const t = getComputedStyle?.(el)?.transform;
+    const t = el.ownerDocument.defaultView?.getComputedStyle(el).transform;
     return t && t !== 'none' ? ` ${t}` : '';
 }
 
-/** Base (LTR) physical direction for every logical direction. */
-const LTR_BASE = {
-    start: 'w',
-    end: 'e',
-    'n-start': 'nw',
-    'n-end': 'ne',
-    's-start': 'sw',
-    's-end': 'se',
-};
-/** Mirrors the horizontal component of a physical direction. 'n' / 's' pass through unchanged. */
-const MIRROR = {
-    n: 'n',
-    s: 's',
-    e: 'w',
-    w: 'e',
-    ne: 'nw',
-    nw: 'ne',
-    se: 'sw',
-    sw: 'se',
-};
-function isLogicalDirection(dir) {
-    return Object.prototype.hasOwnProperty.call(LTR_BASE, dir);
-}
-/**
- * True when `element` sits inside a right-to-left context.
- *
- * Reads the *computed* `direction` style instead of `element.dir`, because
- * `direction` is inherited and is almost never set on the resizable element
- * itself - it's usually set on `<html>`, `<body>`, or some ancestor wrapper.
- */
-function isRtl(element) {
-    if (typeof window === 'undefined') {
-        return false;
-    }
-    return window.getComputedStyle(element).direction === 'rtl';
-}
-/**
- * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
- * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
- * based on `rtl`.
- *
- * Physical directions pass through untouched, so it's always safe to call this
- * even when `dir` might already be physical (e.g. resolving a direction that was
- * already resolved once before).
- */
-function resolveLogicalDirection(dir, rtl) {
-    if (!isLogicalDirection(dir)) {
-        return dir;
-    }
-    const base = LTR_BASE[dir];
-    return rtl ? MIRROR[base] : base;
-}
-
 /**
  * A drop list.
  *
@@ -1375,6 +1692,14 @@ class DropListRef {
     dropListGroup;
     /** Duration (ms) of the sibling slide animation. `0` disables animation. */
     sortAnimationDuration = 200;
+    /**
+     * How the auto-generated placeholder is sized.
+     *  - `'item'` (default): exactly the dragged item's footprint.
+     *  - `'stretch'`: only the MAIN axis follows the item; the cross axis fills the list. This is
+     *    what a page-builder canvas wants when a small palette tile is dragged into a full-width
+     *    column of blocks (the tile's own width means nothing there).
+     */
+    placeholderFit = 'item';
     _draggables = new Set();
     onDrop = new EventEmitter();
     /**
@@ -1836,14 +2161,35 @@ class DropListRef {
         if (ph.custom)
             return;
         placeholder.style.display = drag.originalDisplay;
+        // `rect` is in the VIEWPORT pixels of the dragged item's document. CSS sizes are local to the
+        // list: convert across an (optionally scaled) iframe boundary first, then through the
+        // list's own scaled/zoomed ancestors. Without this a placeholder inside a `scale(.5)` canvas
+        // would be drawn at half the size it reserves.
+        const inTarget = convertSizeBetweenDocuments({ x: rect.width, y: rect.height }, drag.el.ownerDocument, this.el.ownerDocument) ?? { x: rect.width, y: rect.height };
+        const scale = getLocalScale(this.el);
+        const width = Math.abs(inTarget.x) / scale.x;
+        const height = Math.abs(inTarget.y) / scale.y;
         // Occupies exactly the dragged item's footprint, so the gap reserved in the list — and the
         // sibling-displacement math derived from it — matches the item's real size.
-        set('width', `${rect.width}px`);
-        set('height', `${rect.height}px`);
-        // set('min-width', `${rect.width}px`);
-        // set('min-height', `${rect.height}px`);
-        // set('max-width', `${rect.width}px`);
-        // set('max-height', `${rect.height}px`);
+        const axis = this.placeholderFit === 'stretch' ? fallbackAxis(this.el) : null;
+        if (axis === 'y') {
+            // vertical stack: the width is whatever the list gives its children
+            set('width', 'auto');
+            set('max-width', 'none');
+            if (placeholder.style.display === 'inline' || placeholder.style.display === 'inline-block') {
+                placeholder.style.display = 'block';
+            }
+        }
+        else {
+            set('width', `${width}px`);
+        }
+        if (axis === 'x') {
+            set('height', 'auto');
+            set('max-height', 'none');
+        }
+        else {
+            set('height', `${height}px`);
+        }
         set('visibility', 'visible');
         set('opacity', '0.16');
         set('pointer-events', 'none');
@@ -1853,13 +2199,14 @@ class DropListRef {
 }
 /** Orientation to assume while a list has fewer than two items to measure. */
 function fallbackAxis(container) {
-    const s = getComputedStyle(container);
-    if (s.display.includes('flex'))
+    const win = container.ownerDocument.defaultView;
+    const s = win?.getComputedStyle(container);
+    if (s?.display.includes('flex'))
         return s.flexDirection.startsWith('column') ? 'y' : 'x';
-    if (s.display.includes('grid'))
+    if (s?.display.includes('grid'))
         return 'y';
     const child = container.firstElementChild;
-    if (child && getComputedStyle(child).display.startsWith('inline'))
+    if (child && win?.getComputedStyle(child).display.startsWith('inline'))
         return 'x';
     return 'y';
 }
@@ -1870,8 +2217,28 @@ function measureHit(el) {
         return null;
     const clips = [];
     const root = el.ownerDocument.documentElement;
+    // The visible window of the document itself. Matters for a list inside an <iframe>: a tall
+    // canvas extends far below the iframe's viewport, and a pointer that is already outside the
+    // frame (toolbar, footer) must not count as "over the list".
+    const ownerWin = el.ownerDocument.defaultView;
+    if (ownerWin?.frameElement) {
+        // In quirks mode (an iframe written without <!doctype>) `documentElement.clientHeight` is the
+        // height of the CONTENT, and the viewport size lives on <body> instead.
+        const sizer = el.ownerDocument.compatMode === 'CSS1Compat' ? root : (el.ownerDocument.body ?? root);
+        clips.push({
+            box: {
+                left: 0,
+                top: 0,
+                right: sizer.clientWidth || ownerWin.innerWidth,
+                bottom: sizer.clientHeight || ownerWin.innerHeight,
+            },
+            frame: new ScrollFrame(null, false, null), // the window clip never moves with scrolling
+        });
+    }
     for (let node = el.parentElement; node && node !== root; node = node.parentElement) {
-        const s = getComputedStyle(node);
+        const s = node.ownerDocument.defaultView?.getComputedStyle(node);
+        if (!s)
+            continue;
         const cx = s.overflowX !== 'visible';
         const cy = s.overflowY !== 'visible';
         if (!cx && !cy)
@@ -1957,6 +2324,8 @@ class DragDropService {
                 continue;
             }
             if (isDocumentNode(node)) {
+                // Same-origin iframe: continue the logical DOM ancestry through its frame element.
+                // This lets a DropList inside an iframe inherit an outer NgxDropListGroup.
                 const frame = node.defaultView?.frameElement;
                 if (frame) {
                     node = frame;
@@ -1985,15 +2354,13 @@ class DragDropService {
                 node = node.host;
                 continue;
             }
-            // iframe Document
-            // 9 === DOCUMENT_NODE
+            // Cross a same-origin iframe boundary so groups can connect lists in both documents.
             if (node.nodeType === 9) {
                 const frame = node.defaultView?.frameElement;
                 if (frame) {
                     node = frame;
                     continue;
                 }
-                // root document
                 break;
             }
             node = node.parentNode;
@@ -2030,12 +2397,16 @@ class DragDropService {
         if (!source)
             return null;
         let best = null;
+        const sourceDocument = dragEl?.ownerDocument ?? source.el?.ownerDocument;
+        if (!sourceDocument)
+            return null;
         for (const list of this.dropLists()) {
             if (!list.el || !source.isConnectedTo(list))
                 continue;
             if (dragEl && dragEl !== list.el && dragEl.contains(list.el))
                 continue;
-            if (!list._containsPoint(point.x, point.y))
+            const targetPoint = convertPointBetweenDocuments(point, sourceDocument, list.el.ownerDocument);
+            if (!targetPoint || !list._containsPoint(targetPoint.x, targetPoint.y))
                 continue;
             if (!best)
                 best = list;
@@ -2065,7 +2436,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  */
 class AutoScroller {
     raf = 0;
-    container = window;
+    container;
+    win;
+    /** Document the pointer coordinates (`update(x, y)`) are expressed in. */
+    pointerDoc;
     speed = { x: 0, y: 0 };
     onTick;
     edge;
@@ -2076,6 +2450,8 @@ class AutoScroller {
     }
     /** onTick اجرا می‌شود بعد از هر گام اسکرول، تا با آخرین موقعیت pointer، sort/placeholder به‌روز شود. */
     start(fromEl, onTick) {
+        this.win = fromEl.ownerDocument.defaultView ?? undefined;
+        this.pointerDoc = fromEl.ownerDocument;
         this.container = findScrollableAncestor(fromEl);
         this.onTick = onTick;
     }
@@ -2084,21 +2460,37 @@ class AutoScroller {
         this.container = findScrollableAncestor(fromEl);
     }
     update(clientX, clientY) {
+        // The scroll container may live in another document (a page-builder iframe). Its rect is in
+        // THAT document's viewport pixels, so bring the pointer into the same space first.
+        let x = clientX;
+        let y = clientY;
+        const containerDoc = documentOf(this.container);
+        if (this.pointerDoc && containerDoc && containerDoc !== this.pointerDoc) {
+            const p = convertPointBetweenDocuments({ x, y }, this.pointerDoc, containerDoc);
+            if (!p) {
+                this.speed = { x: 0, y: 0 };
+                return;
+            }
+            x = p.x;
+            y = p.y;
+        }
         const rect = getScrollRect(this.container);
         this.speed = {
-            x: edgeSpeed(clientX, rect.left, rect.right, this.edge, this.maxSpeed),
-            y: edgeSpeed(clientY, rect.top, rect.bottom, this.edge, this.maxSpeed),
+            x: edgeSpeed(x, rect.left, rect.right, this.edge, this.maxSpeed),
+            y: edgeSpeed(y, rect.top, rect.bottom, this.edge, this.maxSpeed),
         };
         if ((this.speed.x || this.speed.y) && !this.raf) {
-            this.raf = requestAnimationFrame(this.tick);
+            this.raf = this.win?.requestAnimationFrame(this.tick) ?? 0;
         }
     }
     stop() {
         if (this.raf)
-            cancelAnimationFrame(this.raf);
+            this.win?.cancelAnimationFrame(this.raf);
         this.raf = 0;
         this.speed = { x: 0, y: 0 };
         this.onTick = undefined;
+        this.win = undefined;
+        this.pointerDoc = undefined;
     }
     tick = () => {
         if (!this.speed.x && !this.speed.y) {
@@ -2110,13 +2502,15 @@ class AutoScroller {
             container.scrollBy(this.speed.x, this.speed.y);
         }
         else {
-            container.scrollLeft += this.speed.x;
-            container.scrollTop += this.speed.y;
+            // Edge speed is measured in viewport pixels; scrollLeft/Top are local to the scroller.
+            const local = viewportDeltaToLocal(container, this.speed);
+            container.scrollLeft += local.x;
+            container.scrollTop += local.y;
         }
         // Pointer ثابت مانده ولی محتوا اسکرول شده؛
         // بنابراین موقعیت placeholder/sort را دوباره محاسبه کن.
         this.onTick?.();
-        this.raf = requestAnimationFrame(this.tick);
+        this.raf = this.win?.requestAnimationFrame(this.tick) ?? 0;
     };
 }
 function edgeSpeed(pos, min, max, edge, maxSpeed) {
@@ -2128,25 +2522,47 @@ function edgeSpeed(pos, min, max, edge, maxSpeed) {
 }
 function getScrollRect(container) {
     if (isWindow(container)) {
-        return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
-    }
-    return container.getBoundingClientRect();
+        return { left: 0, top: 0, right: container.innerWidth, bottom: container.innerHeight };
+    }
+    // A scroller taller than the screen (or partly outside it) is only "edge-sensitive" at the
+    // edges the user can actually see: clip its rect to the document viewport.
+    const r = container.getBoundingClientRect();
+    const win = container.ownerDocument.defaultView;
+    if (!win)
+        return r;
+    return {
+        left: Math.max(r.left, 0),
+        top: Math.max(r.top, 0),
+        right: Math.min(r.right, win.innerWidth),
+        bottom: Math.min(r.bottom, win.innerHeight),
+    };
+}
+function documentOf(container) {
+    return isWindow(container) ? container.document : container.ownerDocument;
 }
 function findScrollableAncestor(el) {
     let node = el;
     while (node) {
-        const style = getComputedStyle(node);
+        const win = node.ownerDocument.defaultView;
+        if (!win)
+            break;
+        const style = win.getComputedStyle(node);
         const scrollable = /(auto|scroll|overlay)/.test(style.overflowY + style.overflowX);
-        if (scrollable && node.scrollHeight > node.clientHeight) {
+        if (scrollable && (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth)) {
+            // <html>/<body> scroll the whole document: their own rect spans the full (tall) page, so
+            // edge detection must use the window's viewport instead.
+            const doc = node.ownerDocument;
+            if (node === doc.documentElement || node === doc.body)
+                return win;
             return node;
         }
         node = node.parentElement;
     }
-    return el.ownerDocument.defaultView ?? window;
+    return el.ownerDocument.defaultView ?? el;
 }
 function getScrollPosition(container) {
     if (isWindow(container)) {
-        return { left: window.scrollX, top: window.scrollY };
+        return { left: container.scrollX, top: container.scrollY };
     }
     return { left: container.scrollLeft, top: container.scrollTop };
 }
@@ -2212,6 +2628,19 @@ class NgxDraggable {
     /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
     autoScroll = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "autoScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * Presses that start inside an element matching this selector never start a drag (the element
+     * stays fully usable: text caret, clicks, selection). Handy for editable regions of a block.
+     */
+    noDragSelector = input('[data-no-drag]', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noDragSelector" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, presses on native interactive controls (`button, a, input, textarea, select`,
+     * `[contenteditable]`) do not start a drag either. Off by default so that a page-builder canvas
+     * block can be grabbed by its own button/link, which is exactly what you want while editing.
+     */
+    ignoreInteractive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ignoreInteractive" }] : /* istanbul ignore next */ []));
     set data(v) {
         this._ref.data = v;
     }
@@ -2222,7 +2651,6 @@ class NgxDraggable {
     _ref = new DragRef();
     dragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
-    doc = inject(DOCUMENT);
     service = inject(DragDropService);
     scroller = new AutoScroller();
     down = false;
@@ -2236,11 +2664,13 @@ class NgxDraggable {
     removeEscape;
     removeCancel;
     removeLostCapture;
-    scrollTarget = window;
+    scrollTarget;
     lastScroll = { left: 0, top: 0 };
     lastWindowScroll = { left: 0, top: 0 };
     removeContainerScroll;
     removeWindowScroll;
+    removeDocKeydown;
+    keyboardDrag = false;
     renderer = inject(Renderer2);
     constructor(host) {
         this.host = host;
@@ -2251,6 +2681,8 @@ class NgxDraggable {
         });
     }
     ngOnInit() {
+        this.scrollTarget =
+            this.host.nativeElement.ownerDocument.defaultView ?? this.host.nativeElement;
         this._ref.el = this.dragRootElement()
             ? (this.host.nativeElement.closest(this.dragRootElement()) ?? this.host.nativeElement)
             : this.host.nativeElement;
@@ -2282,6 +2714,7 @@ class NgxDraggable {
         this.removeEscape?.();
         this.removeCancel?.();
         this.removeLostCapture?.();
+        this.removeDocKeydown?.();
         this.scroller.stop();
         this.stopScrollTracking();
         // Destroyed mid-drag (e.g. the model changed underneath us): never leave a body clone behind.
@@ -2292,7 +2725,7 @@ class NgxDraggable {
     pointerDown(e) {
         if (this.disabled() ||
             e.button !== 0 ||
-            // this.isInteractive(e.target) ||
+            this.isExcluded(e.target) ||
             !this.isOnHandle(e.target))
             return;
         // Nested draggables: pointerdown bubbles, so without this an ancestor draggable would start
@@ -2302,20 +2735,33 @@ class NgxDraggable {
         claimedPointerEvents.add(e);
         e.preventDefault();
         this.down = true;
+        this.keyboardDrag = false;
         this.pointerId = e.pointerId;
-        this._ref.el.setPointerCapture(this.pointerId);
+        // Pointer capture keeps move/up events flowing to this document even while the pointer is
+        // over an <iframe> (the page-builder canvas). It can throw (pointer already gone, synthetic
+        // events from automation tools) — in that case we simply fall back to plain document events.
+        try {
+            this._ref.el.setPointerCapture(this.pointerId);
+        }
+        catch {
+            /* not capturable: document level listeners below still work inside this document */
+        }
         this.start = { x: e.clientX, y: e.clientY };
         this._ref.boundary = this.boundary();
         this._ref.lockAxis = this.lockAxis();
         this._ref.pointerDown(this.start);
-        this.removeMove = this.renderer.listen(this._ref.el, 'pointermove', (ev) => this.pointerMove(ev));
-        this.removeUp = this.renderer.listen(this._ref.el, 'pointerup', (ev) => this.pointerUp(ev));
-        this.removeEscape = this.renderer.listen(this.doc, 'keydown', (ev) => {
+        const doc = this._ref.el.ownerDocument;
+        // Listen on the DOCUMENT (captured events bubble up to it): this keeps working when the
+        // dragged element is re-rendered / detached by the framework mid-drag, and it is the same
+        // for real captured events and for events dispatched by test tooling.
+        this.removeMove = this.renderer.listen(doc, 'pointermove', (ev) => this.pointerMove(ev));
+        this.removeUp = this.renderer.listen(doc, 'pointerup', (ev) => this.pointerUp(ev));
+        this.removeEscape = this.renderer.listen(doc, 'keydown', (ev) => {
             if (ev.key === 'Escape' && this.dragging())
                 this.cancel();
         });
-        this.removeCancel = this.renderer.listen(this.doc, 'pointercancel', (ev) => this.pointerCancel(ev));
-        this.removeLostCapture = this.renderer.listen(this.doc, 'lostpointercapture', (ev) => this.pointerCancel(ev));
+        this.removeCancel = this.renderer.listen(doc, 'pointercancel', (ev) => this.pointerCancel(ev));
+        this.removeLostCapture = this.renderer.listen(doc, 'lostpointercapture', (ev) => this.pointerCancel(ev));
     }
     applyDragUpdate(p) {
         const before = this._ref.activeDropList;
@@ -2326,32 +2772,39 @@ class NgxDraggable {
             const after = this._ref.activeDropList;
             // Follow the hovered list; outside every list, scroll the page.
             if (after !== before)
-                this.scroller.retarget(after?.el ?? this.doc.body);
+                this.scroller.retarget(after?.el ?? this._ref.el.ownerDocument.body);
         }
         this.dragMove.emit(p);
     }
     /** فراخوانی می‌شود دقیقاً وقتی drag واقعاً شروع می‌شود (چه با موس، چه با کیبورد). */
     startScrollTracking() {
+        const win = this._ref.el.ownerDocument.defaultView;
         this.scrollTarget = findScrollableAncestor(this._ref.el);
         this.lastScroll = getScrollPosition(this.scrollTarget);
-        this.lastWindowScroll = { left: window.scrollX, top: window.scrollY };
-        if (this.scrollTarget !== window) {
+        this.lastWindowScroll = { left: win?.scrollX ?? 0, top: win?.scrollY ?? 0 };
+        if (win && this.scrollTarget !== win) {
             this.removeContainerScroll = this.renderer.listen(this.scrollTarget, 'scroll', () => this.handleContainerScroll());
         }
         // همیشه window رو هم جدا گوش می‌دیم؛ چون ممکنه container محلی نداشته باشیم
         // ولی خودِ صفحه اسکرول بشه.
-        this.removeWindowScroll = this.renderer.listen('window', 'scroll', () => this.handleWindowScroll());
+        if (win) {
+            this.removeWindowScroll = this.renderer.listen(win, 'scroll', () => this.handleWindowScroll());
+        }
     }
     handleContainerScroll() {
         const pos = getScrollPosition(this.scrollTarget);
         const dx = pos.left - this.lastScroll.left;
         const dy = pos.top - this.lastScroll.top;
         this.lastScroll = pos;
-        this._ref.notifyScroll(dx, dy);
+        const viewportDelta = localDeltaToViewport(this.scrollTarget, { x: dx, y: dy });
+        this._ref.notifyScroll(viewportDelta.x, viewportDelta.y);
     }
     handleWindowScroll() {
-        const left = window.scrollX;
-        const top = window.scrollY;
+        const win = this._ref.el.ownerDocument.defaultView;
+        if (!win)
+            return;
+        const left = win.scrollX;
+        const top = win.scrollY;
         const dx = left - this.lastWindowScroll.left;
         const dy = top - this.lastWindowScroll.top;
         this.lastWindowScroll = { left, top };
@@ -2387,20 +2840,21 @@ class NgxDraggable {
     pointerUp(e) {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
-        if (this._ref.el.hasPointerCapture(this.pointerId)) {
-            this._ref.el.releasePointerCapture(this.pointerId);
-        }
+        this.releaseCapture();
         if (this.dragging()) {
             // Also when released OUTSIDE every list: endDrag() rolls the drag back and cleans up.
-            if (this._ref.isListDrag) {
-                // The release position is authoritative for the drop target (a fast flick may end with
-                // a pointerup that has no preceding pointermove at that position).
-                const p = { x: e.clientX, y: e.clientY };
-                if (p.x !== this.lastPointer.x || p.y !== this.lastPointer.y)
-                    this._ref.dragMove(p);
-                this._ref.endDrag();
+            // The release position is authoritative for list sorting (a fast flick may end with
+            // a pointerup that has no preceding pointermove at that position).
+            const p = { x: e.clientX, y: e.clientY };
+            if (this._ref.isListDrag && (p.x !== this.lastPointer.x || p.y !== this.lastPointer.y)) {
+                this._ref.dragMove(p);
             }
+            // endDrag must run for free drags too, otherwise their lifecycle never completes.
+            this._ref.endDrag();
             this.service.end(this._ref);
+            // The browser still fires a `click` on the captured element after the button is released.
+            // After a real drag that click must not select the block / follow its link.
+            this.swallowNextClick();
         }
         this.finish();
         this.dragEnd.emit(this._ref.pointer);
@@ -2409,18 +2863,33 @@ class NgxDraggable {
     pointerCancel(e) {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
-        if (this.dragging() && this._ref.isListDrag) {
+        if (this.dragging()) {
             this.cancel();
             return;
         }
         this.pointerUp(e);
     }
+    releaseCapture() {
+        if (this.pointerId < 0)
+            return;
+        try {
+            if (this._ref.el.hasPointerCapture?.(this.pointerId)) {
+                this._ref.el.releasePointerCapture(this.pointerId);
+            }
+        }
+        catch {
+            /* element detached or pointer already released */
+        }
+    }
     cancel() {
         this._ref.cancelDrag();
         this.service.end(this._ref);
         this.finish();
     }
     finish() {
+        this.releaseCapture();
+        this.removeDocKeydown?.();
+        this.removeDocKeydown = undefined;
         this.dragging.set(false);
         this.down = false;
         this.scroller.stop();
@@ -2433,10 +2902,20 @@ class NgxDraggable {
         this.removeMove = this.removeUp = this.removeEscape = undefined;
         this.removeCancel = this.removeLostCapture = undefined;
     }
+    /** Keys already processed (the host listener and the document listener may both see one). */
+    handledKeys = new WeakSet();
     /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
     keyDown(e) {
-        if (this.disabled())
+        if (this.disabled() || this.handledKeys.has(e))
+            return;
+        // Only the draggable ITSELF being focused means "move me". Arrow keys typed into an input,
+        // a textarea or a contenteditable region inside the block belong to that control (caret
+        // movement), and must never start a drag or be swallowed.
+        if (e.target !== this.host.nativeElement && e.target !== this._ref.el && !this.dragging())
+            return;
+        if (this.dragging() && isEditableTarget(e.target))
             return;
+        this.handledKeys.add(e);
         const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         const deltas = {
             ArrowLeft: { x: -step, y: 0 },
@@ -2462,6 +2941,7 @@ class NgxDraggable {
                 this.dragging.set(true);
                 this.service.begin(this._ref);
                 this.startScrollTracking();
+                this.beginKeyboardSession();
                 this.dragStart.emit(origin);
             }
             this._ref.nudge(delta.x, delta.y);
@@ -2473,29 +2953,63 @@ class NgxDraggable {
             this._ref.endDrag();
             this.service.end(this._ref);
             this.dragEnd.emit(this._ref.pointer);
-            this.dragging.set(false);
-            this.stopScrollTracking();
+            this.finish();
+            this.restoreFocus();
         }
         else if (e.key === 'Escape' && this.dragging()) {
             e.preventDefault();
             this._ref.cancelDrag();
             this.service.end(this._ref);
-            this.dragging.set(false);
+            this.finish();
+            this.restoreFocus();
         }
     }
+    /**
+     * A list item is `display:none` while it is being moved, so the browser drops its focus and
+     * the following arrow/Enter/Escape presses would go to <body>. Listen on the document for the
+     * duration of a keyboard drag so the gesture keeps working.
+     */
+    beginKeyboardSession() {
+        this.keyboardDrag = true;
+        this.removeDocKeydown?.();
+        this.removeDocKeydown = this.renderer.listen(this._ref.el.ownerDocument, 'keydown', (ev) => this.keyDown(ev));
+    }
+    restoreFocus() {
+        this.removeDocKeydown?.();
+        this.removeDocKeydown = undefined;
+        if (this.keyboardDrag) {
+            this.keyboardDrag = false;
+            this._ref.el.focus?.({ preventScroll: true });
+        }
+    }
+    /** Swallow the single `click` the browser dispatches right after a completed drag. */
+    swallowNextClick() {
+        const doc = this._ref.el.ownerDocument;
+        const stop = (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+        };
+        doc.addEventListener('click', stop, { capture: true, once: true });
+        // If no click follows (pointer released elsewhere), do not eat the user's NEXT real click.
+        doc.defaultView?.setTimeout(() => doc.removeEventListener('click', stop, { capture: true }), 0);
+    }
     isOnHandle(target) {
         if (!this.dragHandle())
             return true;
         // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
-        return target instanceof HTMLElement && !!target.closest(this.dragHandle());
+        return isElementTarget(target) && !!target.closest(this.dragHandle());
     }
-    isInteractive(target) {
-        // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
-        return (target instanceof HTMLElement &&
-            !!target.closest('button,a,input,textarea,select,[data-no-drag]'));
+    /** Should a press on `target` be left alone (no drag)? */
+    isExcluded(target) {
+        if (!isElementTarget(target))
+            return false;
+        const selector = this.noDragSelector();
+        if (selector && target.closest(selector))
+            return true;
+        return this.ignoreInteractive() && isEditableOrInteractive(target);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], queries: [{ propertyName: "customPreview", first: true, predicate: NgxDragPreview, descendants: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, noDragSelector: { classPropertyName: "noDragSelector", publicName: "noDragSelector", isSignal: true, isRequired: false, transformFunction: null }, ignoreInteractive: { classPropertyName: "ignoreInteractive", publicName: "ignoreInteractive", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], queries: [{ propertyName: "customPreview", first: true, predicate: NgxDragPreview, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
             type: Directive,
@@ -2510,13 +3024,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.disable-drag]': 'disabled()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], noDragSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDragSelector", required: false }] }], ignoreInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreInteractive", required: false }] }], data: [{
                 type: Input,
                 args: ['data']
             }], customPreview: [{
                 type: ContentChild,
                 args: [NgxDragPreview]
             }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
+function isEditableOrInteractive(el) {
+    return !!el.closest('button,a[href],input,textarea,select,[contenteditable]:not([contenteditable="false"])');
+}
+function isEditableTarget(target) {
+    if (!isElementTarget(target))
+        return false;
+    return !!target.closest('input,textarea,select,[contenteditable]:not([contenteditable="false"])');
+}
+function isElementTarget(target) {
+    return (!!target &&
+        typeof target === 'object' &&
+        'nodeType' in target &&
+        target.nodeType === 1 &&
+        'closest' in target);
+}
 
 const ALL_DIRECTIONS = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
 const KEYBOARD_STEP = 8;
@@ -2558,9 +3087,19 @@ class NgxResizable {
     beforeHeight = '';
     beforeTransform = '';
     pointerId = -1;
+    startWidth = 0;
+    startHeight = 0;
+    removeDocumentListeners = [];
+    renderer = inject(Renderer2);
     constructor(el) {
         this.el = el;
     }
+    ngOnDestroy() {
+        if (this.resizing()) {
+            this.restoreBeforeResize();
+            this.finish();
+        }
+    }
     onPointerDown(e) {
         if (this.disabled() || e.button !== 0) {
             return;
@@ -2585,6 +3124,10 @@ class NgxResizable {
             y: e.clientY,
         };
         this.beforeTransition = element.style.transition;
+        this.beforeWidth = element.style.width;
+        this.beforeHeight = element.style.height;
+        this.startWidth = element.offsetWidth;
+        this.startHeight = element.offsetHeight;
         /**
          * Keep DragRef's transform as the immutable base.
          *
@@ -2594,7 +3137,20 @@ class NgxResizable {
         this.beforeTransform = element.style.transform;
         this.resizing.set(true);
         element.style.transition = 'none';
-        element.setPointerCapture?.(e.pointerId);
+        try {
+            element.setPointerCapture?.(e.pointerId);
+        }
+        catch {
+            /* synthetic / already-ended pointer: document listeners below still receive the events */
+        }
+        const doc = element.ownerDocument;
+        this.removeDocumentListeners = [
+            this.renderer.listen(doc, 'pointermove', (event) => this.onPointerMove(event)),
+            this.renderer.listen(doc, 'pointerup', (event) => this.onPointerUp(event)),
+            this.renderer.listen(doc, 'pointercancel', (event) => this.onPointerCancel(event)),
+            this.renderer.listen(doc, 'lostpointercapture', (event) => this.onPointerCancel(event)),
+            this.renderer.listen(doc, 'keydown', (event) => this.onDocumentKeyDown(event)),
+        ];
         const out = this.calculate(e);
         this.apply(out);
         this.resizeStart.emit(out);
@@ -2624,16 +3180,30 @@ class NgxResizable {
             return;
         }
         e.preventDefault();
+        this.restoreBeforeResize();
+        this.finish();
+    }
+    onPointerCancel(e) {
+        if (!this.resizing() || e.pointerId !== this.pointerId)
+            return;
+        this.restoreBeforeResize();
+        this.finish();
+    }
+    restoreBeforeResize() {
         const element = this.el.nativeElement;
         element.style.width = this.beforeWidth;
         element.style.height = this.beforeHeight;
         element.style.transform = this.beforeTransform;
-        this.finish();
     }
     onHandleKeyDown(e) {
         if (this.disabled()) {
             return;
         }
+        // Only when the resizable element itself is focused: arrow keys pressed inside an input /
+        // contenteditable that lives in the block are caret movement, not a resize request.
+        if (e.target !== this.el.nativeElement) {
+            return;
+        }
         const rtl = isRtl(this.el.nativeElement);
         const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         let dw = 0;
@@ -2655,10 +3225,11 @@ class NgxResizable {
         }
         e.preventDefault();
         const rect = this.el.nativeElement.getBoundingClientRect();
-        const width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), rect.width + dw)), 'x');
-        const height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), rect.height + dh)), 'y');
-        this.el.nativeElement.style.width = `${width}px`;
-        this.el.nativeElement.style.height = `${height}px`;
+        const width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), this.el.nativeElement.offsetWidth + dw)), 'x');
+        const height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), this.el.nativeElement.offsetHeight + dh)), 'y');
+        const styled = this.toStyleSize(width, height);
+        this.el.nativeElement.style.width = `${styled.width}px`;
+        this.el.nativeElement.style.height = `${styled.height}px`;
         const out = {
             width,
             height,
@@ -2672,10 +3243,14 @@ class NgxResizable {
         this.resizeEnd.emit(out);
     }
     calculate(e) {
-        const dx = e.clientX - this.pointer.x;
-        const dy = e.clientY - this.pointer.y;
-        let width = this.start.width;
-        let height = this.start.height;
+        const localDelta = viewportDeltaToLocal(this.el.nativeElement, {
+            x: e.clientX - this.pointer.x,
+            y: e.clientY - this.pointer.y,
+        });
+        const dx = localDelta.x;
+        const dy = localDelta.y;
+        let width = this.startWidth;
+        let height = this.startHeight;
         /**
          * East
          */
@@ -2708,23 +3283,27 @@ class NgxResizable {
          * This is useful for boundary calculations and
          * emitted resize events.
          */
+        const matrix = getLocalToViewportMatrix(this.el.nativeElement);
+        const scaleX = Math.hypot(matrix.a, matrix.b) || 1;
+        const scaleY = Math.hypot(matrix.c, matrix.d) || 1;
         let left = this.start.left;
         let top = this.start.top;
         if (this.direction.includes('w')) {
-            left = this.start.right - width;
+            left = this.start.right - width * scaleX;
         }
         if (this.direction.includes('n')) {
-            top = this.start.bottom - height;
+            top = this.start.bottom - height * scaleY;
         }
         let moveLeft = left - this.start.left;
         let moveTop = top - this.start.top;
         /**
          * Boundary constraint.
          */
-        if (this.boundary) {
-            const clamped = clampResizeWithinBoundary(this.boundary()?.getBoundingClientRect(), this.start, width, height, moveLeft, moveTop);
-            width = clamped.width;
-            height = clamped.height;
+        const boundaryEl = this.boundary();
+        if (boundaryEl) {
+            const clamped = clampResizeWithinBoundary(boundaryEl.getBoundingClientRect(), this.start, width * scaleX, height * scaleY, moveLeft, moveTop);
+            width = clamped.width / scaleX;
+            height = clamped.height / scaleY;
             moveLeft = clamped.left;
             moveTop = clamped.top;
             left = this.start.left + moveLeft;
@@ -2755,8 +3334,9 @@ class NgxResizable {
          * Changing width/height may cause the browser to re-layout
          * the element, especially for relative/flex/grid/static layouts.
          */
-        element.style.width = `${out.width}px`;
-        element.style.height = `${out.height}px`;
+        const style = this.toStyleSize(out.width, out.height);
+        element.style.width = `${style.width}px`;
+        element.style.height = `${style.height}px`;
         /**
          * Force/read layout after changing the size.
          */
@@ -2787,12 +3367,33 @@ class NgxResizable {
          * correction required by Resize.
          */
         const baseTransform = this.beforeTransform && this.beforeTransform !== 'none' ? `${this.beforeTransform} ` : '';
+        const localCorrection = viewportDeltaToLocal(element, { x: correctionX, y: correctionY });
         element.style.transform =
-            `${baseTransform}translate3d(` + `${correctionX}px, ` + `${correctionY}px, 0)`;
+            `${baseTransform}translate3d(` + `${localCorrection.x}px, ` + `${localCorrection.y}px, 0)`;
+    }
+    /**
+     * `offsetWidth/Height` (what we measure and report) are BORDER-box sizes. The inline
+     * `width/height` we write are interpreted according to `box-sizing`: for the CSS default
+     * (`content-box`) writing the border-box number would make a padded/bordered block jump by
+     * its padding+border the instant a resize starts. Convert so the box is exactly the size
+     * reported in `IResizableOutput`.
+     */
+    toStyleSize(width, height) {
+        const el = this.el.nativeElement;
+        const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+        if (!cs || cs.boxSizing === 'border-box')
+            return { width, height };
+        const px = (v) => Number.parseFloat(v) || 0;
+        const extraX = px(cs.paddingLeft) + px(cs.paddingRight) + px(cs.borderLeftWidth) + px(cs.borderRightWidth);
+        const extraY = px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth);
+        return { width: Math.max(0, width - extraX), height: Math.max(0, height - extraY) };
     }
     clampGrid(value, axis) {
-        const grid = typeof this.grid() === 'number' ? this.grid : this.grid()?.[axis];
-        if (!grid || grid <= 0) {
+        const g = this.grid();
+        // NOTE: the previous code returned the input *signal function* for a numeric grid, so every
+        // snapped size became NaN and the resize silently stopped working.
+        const grid = typeof g === 'number' ? g : g?.[axis];
+        if (!grid || !Number.isFinite(grid) || grid <= 0) {
             return value;
         }
         return Math.round(value / grid) * grid;
@@ -2800,7 +3401,19 @@ class NgxResizable {
     finish() {
         this.resizing.set(false);
         this.el.nativeElement.style.transition = this.beforeTransition;
+        const pointerId = this.pointerId;
         this.pointerId = -1;
+        for (const remove of this.removeDocumentListeners)
+            remove();
+        this.removeDocumentListeners = [];
+        try {
+            if (pointerId >= 0 && this.el.nativeElement.hasPointerCapture?.(pointerId)) {
+                this.el.nativeElement.releasePointerCapture(pointerId);
+            }
+        }
+        catch {
+            /* already released */
+        }
         this.beforeTransform = '';
     }
     resolvedDirections() {
@@ -2823,7 +3436,7 @@ class NgxResizable {
          * Explicit resize handle has priority.
          */
         // TODO notsafe instanceof:node.nodeType === Node.ELEMENT_NODE
-        const handle = e.target instanceof HTMLElement
+        const handle = isHTMLElementTarget(e.target)
             ? e.target.closest('[data-ngx-resize-handle]')
             : null;
         if (handle && element.contains(handle)) {
@@ -2866,7 +3479,7 @@ class NgxResizable {
         return this.resolvedDirections().includes(direction) ? direction : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, directions: { classPropertyName: "directions", publicName: "directions", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", minWidth: "minWidthChange", minHeight: "minHeightChange", maxWidth: "maxWidthChange", maxHeight: "maxHeightChange", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp($event)", "document:keydown": "onDocumentKeyDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, directions: { classPropertyName: "directions", publicName: "directions", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", minWidth: "minWidthChange", minHeight: "minHeightChange", maxWidth: "maxWidthChange", maxHeight: "maxHeightChange", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, decorators: [{
             type: Directive,
@@ -2880,19 +3493,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }, { type: i0.Output, args: ["minWidthChange"] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }, { type: i0.Output, args: ["minHeightChange"] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }, { type: i0.Output, args: ["maxWidthChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }, { type: i0.Output, args: ["maxHeightChange"] }], directions: [{ type: i0.Input, args: [{ isSignal: true, alias: "directions", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], onPointerDown: [{
                 type: HostListener,
                 args: ['pointerdown', ['$event']]
-            }], onPointerMove: [{
-                type: HostListener,
-                args: ['document:pointermove', ['$event']]
-            }], onPointerUp: [{
-                type: HostListener,
-                args: ['document:pointerup', ['$event']]
-            }], onDocumentKeyDown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
             }], onHandleKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
+function isHTMLElementTarget(target) {
+    return (!!target &&
+        typeof target === 'object' &&
+        'nodeType' in target &&
+        target.nodeType === 1 &&
+        'closest' in target);
+}
 
 const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
 /**
@@ -2942,6 +3553,13 @@ class NgxDropList {
     set disableSort(value) {
         this._ref.disableSort = value === true;
     }
+    /** `'stretch'`: the placeholder only copies the item's size along the list's main axis. */
+    set placeholderFit(value) {
+        this._ref.placeholderFit = value === 'stretch' ? 'stretch' : 'item';
+    }
+    set sortAnimationDuration(value) {
+        this._ref.sortAnimationDuration = value == null ? 200 : Math.max(0, value);
+    }
     drop = new EventEmitter();
     customPlaceholder;
     sub;
@@ -2973,7 +3591,7 @@ class NgxDropList {
         this.service.removeDropList(this._ref);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropList, isStandalone: true, selector: "[NgxDropList],[ngxDropList]", inputs: { data: "data", connectedTo: "connectedTo", disableSort: "disableSort" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], queries: [{ propertyName: "customPlaceholder", first: true, predicate: NgxPlaceholder, descendants: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropList, isStandalone: true, selector: "[NgxDropList],[ngxDropList]", inputs: { data: "data", connectedTo: "connectedTo", disableSort: "disableSort", placeholderFit: "placeholderFit", sortAnimationDuration: "sortAnimationDuration" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], queries: [{ propertyName: "customPlaceholder", first: true, predicate: NgxPlaceholder, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, decorators: [{
             type: Directive,
@@ -2989,6 +3607,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], disableSort: [{
                 type: Input
+            }], placeholderFit: [{
+                type: Input
+            }], sortAnimationDuration: [{
+                type: Input
             }], drop: [{
                 type: Output
             }], customPlaceholder: [{
@@ -3061,9 +3683,54 @@ function clamp(v, max) {
     return Math.max(0, Math.min(max, v));
 }
 
+/**
+ * Helpers for a page builder's "export HTML" step.
+ *
+ * While you edit, the directives decorate the canvas DOM: `ngx-*` classes, `tabindex="0"`,
+ * `aria-grabbed`, `touch-action: none`, and — if an export happens mid-drag — a placeholder or a
+ * preview clone. None of that belongs in the page a visitor receives. Run the canvas through
+ * `getCleanHtml()` (or `stripEditorArtifacts()` on a clone you already have) before saving.
+ */
+const TRANSIENT_NODES = '.ngx-drag-placeholder, .ngx-drag-preview';
+/** Mutates `root` (and its subtree) in place. Pass a CLONE of live DOM, never the live canvas. */
+function stripEditorArtifacts(root, options = {}) {
+    const prefix = options.classPrefix ?? 'ngx-';
+    const dropClasses = new Set(['disable-drag', ...(options.extraClasses ?? [])]);
+    const dropAttrs = ['aria-grabbed', ...(options.extraAttributes ?? [])];
+    root.querySelectorAll(TRANSIENT_NODES).forEach((n) => n.remove());
+    const all = [root, ...Array.from(root.querySelectorAll('*'))];
+    for (const el of all) {
+        // `tabindex="0"` is only ours on draggables (a real focusable of the page keeps its own).
+        if (el.classList.contains('ngx-draggable') && el.getAttribute('tabindex') === '0') {
+            el.removeAttribute('tabindex');
+        }
+        for (const attr of dropAttrs)
+            el.removeAttribute(attr);
+        for (const cls of Array.from(el.classList)) {
+            if (cls.startsWith(prefix) || dropClasses.has(cls))
+                el.classList.remove(cls);
+        }
+        if (!el.classList.length)
+            el.removeAttribute('class');
+        const style = el.style;
+        if (style) {
+            if (style.touchAction === 'none')
+                style.removeProperty('touch-action');
+            if (!el.getAttribute('style')?.trim())
+                el.removeAttribute('style');
+        }
+    }
+}
+/** Serialised, editor-free HTML of `el`'s children (the canvas content). */
+function getCleanHtml(el, options) {
+    const clone = el.cloneNode(true);
+    stripEditorArtifacts(clone, options);
+    return clone.innerHTML;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getCleanHtml, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, stripEditorArtifacts, transferArrayItem };
 //# sourceMappingURL=ngx-kit-drag-resize.mjs.map