@livetemplate/client 0.11.4 → 0.11.6

package/dist/tests/directives.test.js

@@ -648,4 +648,948 @@ describe("handleAutoClickDirectives", () => {
         expect(clickSpy).not.toHaveBeenCalled();
     });
 });
+describe("handleShadowRootHydration", () => {
+    beforeEach(() => {
+        document.body.innerHTML = "";
+    });
+    it("attaches an open shadow root and moves template content into it", () => {
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="open"><span class="inner">hi</span></template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(host.shadowRoot).not.toBeNull();
+        expect(host.shadowRoot.querySelector(".inner")?.textContent).toBe("hi");
+        // Template should be gone — leaving it would re-trigger the hook
+        // on every subsequent render.
+        expect(host.querySelector("template")).toBeNull();
+    });
+    it("honors shadowrootmode='closed'", () => {
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="closed"><span>x</span></template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        // Closed shadow root: parent.shadowRoot stays null per spec, but
+        // the template still gets consumed.
+        expect(host.shadowRoot).toBeNull();
+        expect(host.querySelector("template")).toBeNull();
+    });
+    it("is a no-op when there are no shadowroot templates", () => {
+        document.body.innerHTML = `<div><p>nothing here</p></div>`;
+        const before = document.body.innerHTML;
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(document.body.innerHTML).toBe(before);
+    });
+    it("replaces existing shadow content on re-hydration in closed mode (WeakMap fallback)", () => {
+        // parent.shadowRoot is null for closed roots by spec, so a re-render
+        // would otherwise re-call attachShadow, throw NotSupportedError, and
+        // silently drop the new content. The WeakMap side-channel locates
+        // the prior root so replaceChildren actually updates it.
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="closed"><span class="round">1</span></template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(host.shadowRoot).toBeNull(); // closed — spec confirms
+        // The directive's WeakMap holds the closed root; we can't observe
+        // its content via host.shadowRoot, but we CAN verify (a) the
+        // re-render path doesn't throw, (b) the template gets consumed,
+        // and (c) the template's content left the light DOM — together,
+        // strong evidence the content moved into the cached shadow root
+        // rather than vanishing or staying parked as an inert template
+        // (the exact failure mode pre-fix).
+        host.innerHTML = `<template shadowrootmode="closed"><span class="round">2</span></template>`;
+        expect(() => (0, directives_1.handleShadowRootHydration)(document.body)).not.toThrow();
+        expect(host.querySelector("template")).toBeNull();
+        expect(host.children.length).toBe(0); // content lives in shadow, not light DOM
+    });
+    it("replaces existing shadow content on re-hydration (server re-render)", () => {
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="open"><span>first</span></template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(host.shadowRoot.querySelector("span")?.textContent).toBe("first");
+        // Simulate the server emitting a new template into the same host
+        // after a morph (host kept, template re-inserted).
+        host.innerHTML = `<template shadowrootmode="open"><span>second</span></template>`;
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(host.shadowRoot.querySelector("span")?.textContent).toBe("second");
+        expect(host.querySelector("template")).toBeNull();
+    });
+    it("handles multiple sibling templates on one page", () => {
+        document.body.innerHTML = `
+      <div id="a"><template shadowrootmode="open"><i>A</i></template></div>
+      <div id="b"><template shadowrootmode="open"><i>B</i></template></div>
+      <div id="c"><template shadowrootmode="open"><i>C</i></template></div>
+    `;
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        for (const [id, want] of [["a", "A"], ["b", "B"], ["c", "C"]]) {
+            const host = document.getElementById(id);
+            expect(host.shadowRoot?.querySelector("i")?.textContent).toBe(want);
+        }
+    });
+    it("silently drops the template when the host can't accept a shadow root", () => {
+        // Real-world hosts that can't accept a shadow root (void elements,
+        // <input>, <textarea>, custom-element mode conflicts) make
+        // attachShadow throw a DOMException. The hook must catch and
+        // remove the template instead of leaving a re-trigger ticking on
+        // every render. Drive the failure path via a stub on a regular
+        // <div> so this test doesn't depend on jsdom's <input>-as-host
+        // behaviour, which varies across versions.
+        const host = document.createElement("div");
+        host.id = "host";
+        document.body.appendChild(host);
+        const tpl = document.createElement("template");
+        tpl.setAttribute("shadowrootmode", "open");
+        host.appendChild(tpl);
+        const orig = host.attachShadow.bind(host);
+        host.attachShadow = () => {
+            throw new DOMException("Operation is not supported", "NotSupportedError");
+        };
+        expect(() => (0, directives_1.handleShadowRootHydration)(document.body)).not.toThrow();
+        // Template must be removed even though attach failed.
+        expect(host.querySelector("template")).toBeNull();
+        expect(host.shadowRoot).toBeNull();
+        host.attachShadow = orig;
+        host.remove();
+    });
+    it("warns when attachShadow rejects the host (DOMException path)", () => {
+        const warn = jest.spyOn(console, "warn").mockImplementation(() => { });
+        const host = document.createElement("div");
+        host.id = "warn-host";
+        document.body.appendChild(host);
+        const tpl = document.createElement("template");
+        tpl.setAttribute("shadowrootmode", "open");
+        host.appendChild(tpl);
+        host.attachShadow = () => {
+            throw new DOMException("Operation is not supported", "NotSupportedError");
+        };
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining("attachShadow rejected"), host);
+        warn.mockRestore();
+        host.remove();
+    });
+    it("removes templates with an unrecognised shadowrootmode and warns", () => {
+        // The HTML parser doesn't activate a `<template shadowrootmode>`
+        // with an unknown mode value. The directive removes the template
+        // outright (so the fast-path advertised in the docblock isn't
+        // defeated by a persistent typo that the qsa keeps re-finding) and
+        // logs a console.warn so authors actually see the mistake.
+        const warn = jest.spyOn(console, "warn").mockImplementation(() => { });
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="opne"><span>typo</span></template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(host.shadowRoot).toBeNull();
+        expect(host.querySelector("template")).toBeNull();
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining("invalid shadowrootmode"), expect.anything());
+        warn.mockRestore();
+    });
+    it("rethrows non-DOMException errors so real bugs surface", () => {
+        document.body.innerHTML = `
+      <div id="host"><template shadowrootmode="open"><span>x</span></template></div>
+    `;
+        const host = document.getElementById("host");
+        host.attachShadow = () => {
+            throw new Error("typo in options or runtime bug");
+        };
+        // A bare catch would have hidden this; the narrow guard surfaces it.
+        expect(() => (0, directives_1.handleShadowRootHydration)(document.body)).toThrow("typo in options or runtime bug");
+    });
+    it("idempotent re-run when no remaining templates is essentially free", () => {
+        document.body.innerHTML = `<div id="host"></div>`;
+        // First run: nothing to do.
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        // Second run on a clean tree: still nothing.
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        const host = document.getElementById("host");
+        expect(host.shadowRoot).toBeNull();
+    });
+    it("forwards shadowrootdelegatesfocus / clonable / serializable to attachShadow", () => {
+        // Use a spy because jsdom doesn't expose the options on the resulting
+        // ShadowRoot in a stable way across versions — checking the call args
+        // is what we actually want to assert ("the directive forwards
+        // attributes faithfully to the platform call").
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="open" shadowrootdelegatesfocus shadowrootclonable shadowrootserializable>
+          <span>focus me</span>
+        </template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        const spy = jest.spyOn(host, "attachShadow");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(spy).toHaveBeenCalledWith({
+            mode: "open",
+            delegatesFocus: true,
+            clonable: true,
+            serializable: true,
+        });
+    });
+    // Documented limitations — kept as it.skip so a future PR that
+    // closes either gap can flip the skip and have an instant test.
+    it("warns when shadowrootmode is changed on re-render (mode is one-shot)", () => {
+        const warn = jest.spyOn(console, "warn").mockImplementation(() => { });
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="open"><span>first</span></template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        // Server flips the mode on the next render — surfacing the mismatch
+        // is the contract.
+        host.innerHTML = `<template shadowrootmode="closed"><span>second</span></template>`;
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining("shadowrootmode changed"), host);
+        // The pre-existing open root persists (attachShadow can't be re-
+        // called); content still updates inside it.
+        expect(host.shadowRoot?.querySelector("span")?.textContent).toBe("second");
+        warn.mockRestore();
+    });
+    it.skip("nested DSD inside another template is inert on first render", () => {
+        // A `<template shadowrootmode>` nested inside another `<template>`
+        // is in DocumentFragment land, which qsa doesn't descend into — the
+        // inner template is never in the first qsa result, so it stays
+        // inert from render zero. (The "on re-render" case is the same
+        // mechanism: after the outer shadow attaches, the inner template
+        // sits behind a shadow boundary, also out of qsa's reach.)
+        document.body.innerHTML = `
+      <div id="outer">
+        <template shadowrootmode="open">
+          <div id="inner">
+            <template shadowrootmode="open"><span>nested</span></template>
+          </div>
+        </template>
+      </div>
+    `;
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        const outer = document.getElementById("outer");
+        const inner = outer.shadowRoot.getElementById("inner");
+        expect(inner.shadowRoot).toBeNull();
+        expect(inner.querySelector("template")).not.toBeNull();
+    });
+    it("defaults all extended options to false when attrs are absent", () => {
+        document.body.innerHTML = `
+      <div id="host">
+        <template shadowrootmode="open"><span>x</span></template>
+      </div>
+    `;
+        const host = document.getElementById("host");
+        const spy = jest.spyOn(host, "attachShadow");
+        (0, directives_1.handleShadowRootHydration)(document.body);
+        expect(spy).toHaveBeenCalledWith({
+            mode: "open",
+            delegatesFocus: false,
+            clonable: false,
+            serializable: false,
+        });
+    });
+});
+describe("handleAreaSelectDirectives", () => {
+    // The module-level areaSelectArmed map is cleared lazily — the sweep
+    // only fires when handleAreaSelectDirectives runs. Without an explicit
+    // afterEach, tests that don't call it would inherit armed elements
+    // from prior tests. teardownAreaSelectForRoot(document.body) wipes
+    // every entry so each test gets a fresh slate.
+    afterEach(() => {
+        (0, directives_1.teardownAreaSelectForRoot)(document.body);
+    });
+    // jsdom-friendly helper: configure the target element so it has a
+    // non-trivial bounding rect (jsdom returns zeros by default) and a
+    // positioned parent so the overlay has somewhere to land. Returns
+    // [target, parent] for the assertions.
+    function mountTarget(targetTag, attrs, rect) {
+        document.body.innerHTML = `
+      <div id="parent" style="position:relative;">
+        <${targetTag} id="target"></${targetTag}>
+      </div>
+    `;
+        const target = document.getElementById("target");
+        const parent = document.getElementById("parent");
+        for (const [k, v] of Object.entries(attrs))
+            target.setAttribute(k, v);
+        target.getBoundingClientRect = jest.fn(() => ({
+            x: rect.left,
+            y: rect.top,
+            left: rect.left,
+            top: rect.top,
+            right: rect.left + rect.width,
+            bottom: rect.top + rect.height,
+            width: rect.width,
+            height: rect.height,
+            toJSON: () => ({}),
+        }));
+        parent.getBoundingClientRect = jest.fn(() => ({
+            x: rect.left,
+            y: rect.top,
+            left: rect.left,
+            top: rect.top,
+            right: rect.left + rect.width,
+            bottom: rect.top + rect.height,
+            width: rect.width,
+            height: rect.height,
+            toJSON: () => ({}),
+        }));
+        // jsdom doesn't implement pointer-capture; stub so the directive's
+        // try/catch around it doesn't matter, but the test still asserts
+        // the contract.
+        target.setPointerCapture = jest.fn();
+        target.releasePointerCapture = jest.fn();
+        return [target, parent];
+    }
+    function dispatchPointer(el, type, clientX, clientY, pointerId = 1) {
+        const e = new MouseEvent(type, { clientX, clientY, button: 0, bubbles: true });
+        // PointerEvent isn't fully supported in jsdom but the directive
+        // only reads pointerId / isPrimary / button / clientX / clientY.
+        Object.defineProperty(e, "pointerId", { value: pointerId });
+        Object.defineProperty(e, "isPrimary", { value: true });
+        el.dispatchEvent(e);
+    }
+    beforeEach(() => {
+        document.body.innerHTML = "";
+        jest.spyOn(console, "warn").mockImplementation(() => { });
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it("dispatches the action with 0..1 fraction coords on pointerup", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 100, top: 50, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Drag from (120, 80) → (220, 150) inside the rect.
+        // x = (120 - 100) / 200 = 0.10
+        // y = (80 - 50)   / 200 = 0.15
+        // w = (220 - 120) / 200 = 0.50
+        // h = (150 - 80)  / 200 = 0.35
+        dispatchPointer(target, "pointerdown", 120, 80);
+        dispatchPointer(target, "pointermove", 220, 150);
+        dispatchPointer(target, "pointerup", 220, 150);
+        expect(send).toHaveBeenCalledTimes(1);
+        const msg = send.mock.calls[0][0];
+        expect(msg.action).toBe("selectImageArea");
+        expect(msg.data.x).toBeCloseTo(0.10, 5);
+        expect(msg.data.y).toBeCloseTo(0.15, 5);
+        expect(msg.data.w).toBeCloseTo(0.50, 5);
+        expect(msg.data.h).toBeCloseTo(0.35, 5);
+    });
+    it("filters drags smaller than the min-fraction threshold", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 1000, height: 1000 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Drag is 10×10 px on a 1000×1000 rect → 1% fraction in both dims.
+        // 1% < MIN_AREA_FRACTION (2%) → must drop.
+        dispatchPointer(target, "pointerdown", 100, 100);
+        dispatchPointer(target, "pointermove", 110, 110);
+        dispatchPointer(target, "pointerup", 110, 110);
+        expect(send).not.toHaveBeenCalled();
+        // Overlay should have been cleaned up after the failed drag.
+        expect(document.querySelectorAll(".lvt-area-select-overlay").length).toBe(0);
+    });
+    it("paints an overlay during the drag and removes it on release", () => {
+        const [, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const target = parent.querySelector("img");
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        expect(parent.querySelector(".lvt-area-select-overlay")).not.toBeNull();
+        dispatchPointer(target, "pointermove", 60, 70);
+        const overlay = parent.querySelector(".lvt-area-select-overlay");
+        expect(overlay.style.width).toBe("50px");
+        expect(overlay.style.height).toBe("60px");
+        dispatchPointer(target, "pointerup", 60, 70);
+        expect(parent.querySelector(".lvt-area-select-overlay")).toBeNull();
+    });
+    it("pointercancel removes the overlay and does NOT dispatch", () => {
+        const [, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const target = parent.querySelector("img");
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 60, 60);
+        dispatchPointer(target, "pointercancel", 60, 60);
+        expect(send).not.toHaveBeenCalled();
+        expect(parent.querySelector(".lvt-area-select-overlay")).toBeNull();
+    });
+    it("is idempotent across renders for the same action", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 100, 100);
+        dispatchPointer(target, "pointerup", 100, 100);
+        // Listeners must NOT have been duplicated by repeated calls.
+        expect(send).toHaveBeenCalledTimes(1);
+    });
+    it("re-arms with new action when the attribute value changes", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "first" }, { left: 0, top: 0, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        target.setAttribute("lvt-fx:area-select", "second");
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 100, 100);
+        dispatchPointer(target, "pointerup", 100, 100);
+        expect(send).toHaveBeenCalledTimes(1);
+        expect(send.mock.calls[0][0].action).toBe("second");
+    });
+    it("warns and skips when the attribute value is empty", () => {
+        const warn = console.warn;
+        mountTarget("img", { "lvt-fx:area-select": "" }, { left: 0, top: 0, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining("requires an action name"));
+    });
+    it("clamps coords to 0..1 when the drag escapes the element rect", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 100, top: 100, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Drag starts inside but ends far below-right of the rect.
+        dispatchPointer(target, "pointerdown", 150, 150);
+        dispatchPointer(target, "pointerup", 10000, 10000);
+        expect(send).toHaveBeenCalledTimes(1);
+        const data = send.mock.calls[0][0].data;
+        expect(data.x).toBeGreaterThanOrEqual(0);
+        expect(data.x).toBeLessThanOrEqual(1);
+        expect(data.x + data.w).toBeLessThanOrEqual(1);
+        expect(data.y + data.h).toBeLessThanOrEqual(1);
+    });
+    it("fast-path returns when no matching elements", () => {
+        document.body.innerHTML = `<div><p>nothing here</p></div>`;
+        const send = jest.fn();
+        // Should not throw, should not dispatch.
+        expect(() => (0, directives_1.handleAreaSelectDirectives)(document.body, send)).not.toThrow();
+        expect(send).not.toHaveBeenCalled();
+    });
+    it("removes the overlay when the host is detached mid-drag", () => {
+        const [target, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        expect(parent.querySelector(".lvt-area-select-overlay")).not.toBeNull();
+        // Simulate a server diff replacing the host element.
+        target.remove();
+        // A late pointermove (jsdom dispatches to the detached element)
+        // must clean up the overlay rather than leave it orphaned under
+        // the parent.
+        dispatchPointer(target, "pointermove", 60, 70);
+        expect(parent.querySelector(".lvt-area-select-overlay")).toBeNull();
+    });
+    it("suppresses native <img> drag via dragstart preventDefault", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        (0, directives_1.handleAreaSelectDirectives)(document.body, jest.fn());
+        // Without the dragstart listener, Chromium would call default-
+        // action (start a native image drag) and steal the gesture from
+        // pointer events. The directive must call preventDefault on
+        // dragstart so pointermove + pointerup keep arriving.
+        const drag = new Event("dragstart", { bubbles: true, cancelable: true });
+        target.dispatchEvent(drag);
+        expect(drag.defaultPrevented).toBe(true);
+    });
+    it("positions overlay correctly when target is offset inside its parent", () => {
+        // Parent at (0,0), target at (50, 25) — exercises the
+        // border-box-to-padding-box offset math with a real gap.
+        document.body.innerHTML = `
+      <div id="parent" style="position:relative;">
+        <img id="target" lvt-fx:area-select="selectImageArea">
+      </div>
+    `;
+        const target = document.getElementById("target");
+        const parent = document.getElementById("parent");
+        target.getBoundingClientRect = jest.fn(() => ({
+            x: 50, y: 25, left: 50, top: 25, right: 150, bottom: 125,
+            width: 100, height: 100, toJSON: () => ({}),
+        }));
+        parent.getBoundingClientRect = jest.fn(() => ({
+            x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+            width: 200, height: 200, toJSON: () => ({}),
+        }));
+        target.setPointerCapture = jest.fn();
+        target.releasePointerCapture = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, jest.fn());
+        // Drag from (80, 50) → (120, 90) — inside the target's 100×100 rect.
+        // Relative to the parent (and after subtracting clientLeft/clientTop=0
+        // for a borderless parent), the overlay should sit at left=80, top=50.
+        dispatchPointer(target, "pointerdown", 80, 50);
+        dispatchPointer(target, "pointermove", 120, 90);
+        const overlay = parent.querySelector(".lvt-area-select-overlay");
+        expect(overlay).not.toBeNull();
+        expect(overlay.style.left).toBe("80px");
+        expect(overlay.style.top).toBe("50px");
+        expect(overlay.style.width).toBe("40px");
+        expect(overlay.style.height).toBe("40px");
+    });
+    it("pointerleave for a different pointerId does NOT cancel our capture-fallback drag", () => {
+        // When setPointerCapture fails the directive attaches a
+        // pointerleave fallback so the drag can clean up. In a multi-
+        // touch scenario, a SECONDARY pointer leaving the element fires
+        // pointerleave too — must not be mistaken for our pointer
+        // leaving.
+        const [, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const target = parent.querySelector("img");
+        // Force capture failure so the pointerleave fallback is attached.
+        target.setPointerCapture = jest.fn(() => {
+            throw new DOMException("no capture", "InvalidStateError");
+        });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Primary drag with pointerId=1.
+        dispatchPointer(target, "pointerdown", 10, 10, 1);
+        dispatchPointer(target, "pointermove", 80, 80, 1);
+        // Secondary pointer (id=42) leaves the host. Must NOT cancel
+        // our id=1 drag.
+        dispatchPointer(target, "pointerleave", 80, 80, 42);
+        // Primary drag still alive — pointerup completes it normally.
+        dispatchPointer(target, "pointerup", 100, 100, 1);
+        expect(send).toHaveBeenCalledTimes(1);
+    });
+    it("lostpointercapture for a different pointerId does NOT cancel our drag", () => {
+        // Another code path could call setPointerCapture on the same
+        // element with a different pointerId and later release it,
+        // firing lostpointercapture on the host. Our handler must not
+        // mistake that for OUR drag being canceled.
+        const [, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const target = parent.querySelector("img");
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Our drag starts with pointerId=1.
+        dispatchPointer(target, "pointerdown", 10, 10, 1);
+        dispatchPointer(target, "pointermove", 80, 80, 1);
+        // Unrelated lostpointercapture for pointerId=42 — must be ignored.
+        dispatchPointer(target, "lostpointercapture", 80, 80, 42);
+        // Our drag is still alive — pointerup dispatches normally.
+        dispatchPointer(target, "pointerup", 100, 100, 1);
+        expect(send).toHaveBeenCalledTimes(1);
+    });
+    it("releasePointerCapture firing lostpointercapture synchronously does not drop the dispatch", () => {
+        // Chromium fires lostpointercapture SYNCHRONOUSLY during
+        // releasePointerCapture. Without the early state-reset in
+        // finalize, the nested lostpointercapture handler would see
+        // pointerId still matching, run a nested finalize that clears
+        // startRect, then the outer finalize would resume with rect=null
+        // and silently drop the dispatched action.
+        const [, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const target = parent.querySelector("img");
+        // Make releasePointerCapture fire lostpointercapture synchronously
+        // — the real Chromium behaviour that wasn't covered by jest.fn().
+        target.releasePointerCapture = jest.fn((pid) => {
+            target.dispatchEvent(Object.assign(new MouseEvent("lostpointercapture", { bubbles: false }), {
+                pointerId: pid,
+            }));
+        });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 20, 20);
+        dispatchPointer(target, "pointermove", 80, 80);
+        dispatchPointer(target, "pointerup", 80, 80);
+        // The action must still dispatch — the early state-reset prevents
+        // the nested lostpointercapture from re-entering finalize and
+        // clearing the rect mid-call.
+        expect(send).toHaveBeenCalledTimes(1);
+    });
+    it("uses pointerdown-time rect for fractions even if host moves between mousemoves", () => {
+        // If a server diff repositions the host mid-drag, the rect
+        // captured AT POINTERUP would clamp startClientX (which was
+        // captured against the OLD position) into the wrong place.
+        // The dispatched fractions must reflect the original drag,
+        // measured against the rect that existed at pointerdown.
+        document.body.innerHTML = `
+      <div id="parent" style="position:relative;"><img id="target" lvt-fx:area-select="selectImageArea"></div>
+    `;
+        const parent = document.getElementById("parent");
+        const target = document.getElementById("target");
+        // Rect call counter: first call (pointerdown) returns the OLD
+        // rect, subsequent calls return a NEW rect 500px away.
+        let rectCalls = 0;
+        target.getBoundingClientRect = jest.fn(() => {
+            rectCalls++;
+            if (rectCalls === 1) {
+                return {
+                    x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+                    width: 200, height: 200, toJSON: () => ({}),
+                };
+            }
+            return {
+                x: 500, y: 500, left: 500, top: 500, right: 700, bottom: 700,
+                width: 200, height: 200, toJSON: () => ({}),
+            };
+        });
+        parent.getBoundingClientRect = jest.fn(() => ({
+            x: 0, y: 0, left: 0, top: 0, right: 1000, bottom: 1000,
+            width: 1000, height: 1000, toJSON: () => ({}),
+        }));
+        target.setPointerCapture = jest.fn();
+        target.releasePointerCapture = jest.fn();
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Drag from (40, 60) → (140, 160) inside the OLD rect at (0..200).
+        // OLD-rect fractions: x=40/200=0.2, y=60/200=0.3, w=100/200=0.5,
+        // h=100/200=0.5. With the new (500..700) rect at finalize time,
+        // clamping (40,60) into that rect would silently shift the start.
+        dispatchPointer(target, "pointerdown", 40, 60);
+        dispatchPointer(target, "pointermove", 90, 110);
+        dispatchPointer(target, "pointerup", 140, 160);
+        expect(send).toHaveBeenCalledTimes(1);
+        const data = send.mock.calls[0][0].data;
+        expect(data.x).toBeCloseTo(0.2, 5);
+        expect(data.y).toBeCloseTo(0.3, 5);
+        expect(data.w).toBeCloseTo(0.5, 5);
+        expect(data.h).toBeCloseTo(0.5, 5);
+    });
+    it("uses the pointerdown-time parent even if host moves between mousemoves", () => {
+        // Two positioned parents at known offsets. The host starts under
+        // the first; we begin a drag, then synthetically re-parent the
+        // host into the second container mid-drag. Without the parent-
+        // capture fix, updateOverlay would refetch el.parentElement and
+        // compute against the SECOND parent while the overlay still
+        // lives in the FIRST — visual mis-positioning for the rest of
+        // the drag. With the fix, the overlay tracks the FIRST parent.
+        document.body.innerHTML = `
+      <div id="p1" style="position:relative;"></div>
+      <div id="p2" style="position:relative;"></div>
+    `;
+        const p1 = document.getElementById("p1");
+        const p2 = document.getElementById("p2");
+        const target = document.createElement("img");
+        target.setAttribute("lvt-fx:area-select", "selectImageArea");
+        p1.appendChild(target);
+        target.getBoundingClientRect = jest.fn(() => ({
+            x: 10, y: 10, left: 10, top: 10, right: 110, bottom: 110,
+            width: 100, height: 100, toJSON: () => ({}),
+        }));
+        p1.getBoundingClientRect = jest.fn(() => ({
+            x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+            width: 200, height: 200, toJSON: () => ({}),
+        }));
+        p2.getBoundingClientRect = jest.fn(() => ({
+            x: 500, y: 500, left: 500, top: 500, right: 700, bottom: 700,
+            width: 200, height: 200, toJSON: () => ({}),
+        }));
+        target.setPointerCapture = jest.fn();
+        target.releasePointerCapture = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, jest.fn());
+        dispatchPointer(target, "pointerdown", 30, 30);
+        // Server diff moves the host to p2.
+        p2.appendChild(target);
+        dispatchPointer(target, "pointermove", 80, 60);
+        // Overlay stays in p1 (where pointerdown attached it). Position is
+        // computed against p1's rect (cached at pointerdown), not p2's.
+        const overlayInP1 = p1.querySelector(".lvt-area-select-overlay");
+        const overlayInP2 = p2.querySelector(".lvt-area-select-overlay");
+        expect(overlayInP1).not.toBeNull();
+        expect(overlayInP2).toBeNull();
+        // pointerdown at (30,30), move to (80,60) → 50×30 against p1
+        // at (0,0). If updateOverlay had re-fetched el.parentElement
+        // and used p2 (at 500,500), left would be -470 instead of 30.
+        expect(overlayInP1.style.left).toBe("30px");
+    });
+    it("positions overlay correctly when parent is scrolled", () => {
+        // For a scrolled positioned parent: an element at viewport_x =
+        // parentRect.left actually has CSS_left = parent.scrollLeft (the
+        // browser is scrolled, so what's at viewport-x-0 is parent-x-100
+        // for scrollLeft=100). Without adding scrollLeft/scrollTop back
+        // into the CSS coords, the overlay paints displaced by the scroll
+        // amount.
+        document.body.innerHTML = `
+      <div id="parent" style="position:relative;"><img id="target" lvt-fx:area-select="selectImageArea"></div>
+    `;
+        const parent = document.getElementById("parent");
+        const target = document.getElementById("target");
+        target.getBoundingClientRect = jest.fn(() => ({
+            x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+            width: 200, height: 200, toJSON: () => ({}),
+        }));
+        parent.getBoundingClientRect = jest.fn(() => ({
+            x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+            width: 200, height: 200, toJSON: () => ({}),
+        }));
+        // jsdom: scrollLeft/Top are mutable properties; just assign.
+        Object.defineProperty(parent, "scrollLeft", { value: 100, configurable: true });
+        Object.defineProperty(parent, "scrollTop", { value: 50, configurable: true });
+        target.setPointerCapture = jest.fn();
+        target.releasePointerCapture = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, jest.fn());
+        // Drag from viewport (30, 40) to (90, 100). With the scroll
+        // correction the overlay's CSS left should be
+        // 30 - 0 - 0 + 100 = 130 and CSS top should be
+        // 40 - 0 - 0 + 50 = 90. Without it, left=30 / top=40 (the bug).
+        dispatchPointer(target, "pointerdown", 30, 40);
+        dispatchPointer(target, "pointermove", 90, 100);
+        const overlay = parent.querySelector(".lvt-area-select-overlay");
+        expect(overlay).not.toBeNull();
+        expect(overlay.style.left).toBe("130px");
+        expect(overlay.style.top).toBe("90px");
+        expect(overlay.style.width).toBe("60px");
+        expect(overlay.style.height).toBe("60px");
+    });
+    it("warns when the parent's computed position is `static`", () => {
+        // Forgetting position:relative on the parent silently mis-paints
+        // the overlay against the nearest positioned ancestor. A
+        // dev-time warn gives the author a chance to spot the mistake.
+        const warn = console.warn;
+        document.body.innerHTML = `
+      <div id="static-parent">
+        <img id="target" lvt-fx:area-select="selectImageArea">
+      </div>
+    `;
+        const target = document.getElementById("target");
+        target.getBoundingClientRect = jest.fn(() => ({
+            x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+            width: 200, height: 200, toJSON: () => ({}),
+        }));
+        target.setPointerCapture = jest.fn();
+        target.releasePointerCapture = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, jest.fn());
+        dispatchPointer(target, "pointerdown", 10, 10);
+        const warnings = warn.mock.calls.filter((args) => typeof args[0] === "string" && args[0].includes("parentElement has no positioning context"));
+        expect(warnings.length).toBe(1);
+    });
+    it("dedupes the static-parent warn across repeated drags", () => {
+        // Without the WeakSet dedupe, a user repeatedly dragging on the
+        // same mis-configured element would spam console.warn (and
+        // re-run getComputedStyle, a style-recalc trigger) once per
+        // pointerdown.
+        const warn = console.warn;
+        document.body.innerHTML = `
+      <div id="static-parent">
+        <img id="target" lvt-fx:area-select="selectImageArea">
+      </div>
+    `;
+        const target = document.getElementById("target");
+        target.getBoundingClientRect = jest.fn(() => ({
+            x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+            width: 200, height: 200, toJSON: () => ({}),
+        }));
+        target.setPointerCapture = jest.fn();
+        target.releasePointerCapture = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, jest.fn());
+        // Three drags on the same mis-configured parent — only the FIRST
+        // should warn.
+        for (let i = 0; i < 3; i++) {
+            dispatchPointer(target, "pointerdown", 10, 10);
+            dispatchPointer(target, "pointerup", 60, 60);
+        }
+        const warnings = warn.mock.calls.filter((args) => typeof args[0] === "string" && args[0].includes("parentElement has no positioning context"));
+        expect(warnings.length).toBe(1);
+    });
+    it("pointercancel cancels the drag without dispatching", () => {
+        // pointercancel fires on system gestures (OS-level swipe, app
+        // switch). Like lostpointercapture / pointerleave, it must remove
+        // the overlay and NOT dispatch — same contract from the user's
+        // perspective.
+        const [, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const target = parent.querySelector("img");
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 80, 80);
+        dispatchPointer(target, "pointercancel", 80, 80);
+        expect(send).not.toHaveBeenCalled();
+        expect(parent.querySelector(".lvt-area-select-overlay")).toBeNull();
+    });
+    it("rejects zero-area rectangles even if the threshold check would pass", () => {
+        // The MIN_AREA_FRACTION check uses && so a wide-but-thin drag is
+        // a legit selection — but a literal 60% × 0% drag has no area,
+        // can't render sensibly, and would divide by zero downstream.
+        // Drop it independently of the threshold.
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Drag from (40,100) to (160,100) — w=60% of 200, h=0%.
+        dispatchPointer(target, "pointerdown", 40, 100);
+        dispatchPointer(target, "pointermove", 160, 100);
+        dispatchPointer(target, "pointerup", 160, 100);
+        expect(send).not.toHaveBeenCalled();
+    });
+    it("teardownAreaSelectForRoot cancels armed elements under root", () => {
+        // For the disconnect / destroy lifecycle: if a client tears down
+        // without a subsequent handleAreaSelectDirectives call, the
+        // module-level singleton would otherwise leak listeners.
+        document.body.innerHTML = `
+      <div id="root">
+        <div id="parent" style="position:relative;">
+          <img id="target" lvt-fx:area-select="selectImageArea">
+        </div>
+      </div>
+      <div id="outside-parent" style="position:relative;">
+        <img id="outside-target" lvt-fx:area-select="otherAction">
+      </div>
+    `;
+        const root = document.getElementById("root");
+        const target = document.getElementById("target");
+        const outside = document.getElementById("outside-target");
+        for (const el of [target, outside]) {
+            el.getBoundingClientRect = jest.fn(() => ({
+                x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+                width: 200, height: 200, toJSON: () => ({}),
+            }));
+            el.parentElement.getBoundingClientRect = jest.fn(() => ({
+                x: 0, y: 0, left: 0, top: 0, right: 200, bottom: 200,
+                width: 200, height: 200, toJSON: () => ({}),
+            }));
+            el.setPointerCapture = jest.fn();
+            el.releasePointerCapture = jest.fn();
+        }
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        (0, directives_1.teardownAreaSelectForRoot)(root);
+        // The target inside root must NOT dispatch after teardown.
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 100, 100);
+        dispatchPointer(target, "pointerup", 100, 100);
+        expect(send).not.toHaveBeenCalled();
+        // The target outside root must still work.
+        dispatchPointer(outside, "pointerdown", 10, 10);
+        dispatchPointer(outside, "pointermove", 100, 100);
+        dispatchPointer(outside, "pointerup", 100, 100);
+        expect(send).toHaveBeenCalledTimes(1);
+        expect(send.mock.calls[0][0].action).toBe("otherAction");
+        (0, directives_1.teardownAreaSelectForRoot)(document.body); // clean up for next test
+    });
+    it("does not preventDefault on pointerdown — clicks still bubble", () => {
+        // The contract promises a small-rect drag (treated as a click)
+        // still reaches the host's click handlers. Calling
+        // preventDefault on pointerdown would suppress the compatibility
+        // mouse events that fire click — so the directive must NOT do
+        // that.
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        (0, directives_1.handleAreaSelectDirectives)(document.body, jest.fn());
+        const down = new MouseEvent("pointerdown", {
+            clientX: 50, clientY: 50, button: 0, bubbles: true, cancelable: true,
+        });
+        Object.defineProperty(down, "pointerId", { value: 1 });
+        Object.defineProperty(down, "isPrimary", { value: true });
+        target.dispatchEvent(down);
+        expect(down.defaultPrevented).toBe(false);
+    });
+    it("stale pointerleave listener does not survive into the next gesture", () => {
+        // The bug Claude flagged: when setPointerCapture fails on drag N,
+        // the directive registers a pointerleave fallback. If drag N
+        // gets stuck (pointer never leaves so the fallback never fires
+        // and no pointerup arrives), and the user starts drag N+1, the
+        // re-entrancy guard finalizes drag N but the STALE pointerleave
+        // listener from N would still be attached. If capture SUCCEEDS
+        // on drag N+1 (no new pointerleave registered), the stale one
+        // from N would still fire if the pointer ever leaves — and
+        // incorrectly cancel drag N+1. finalize() must remove the
+        // pointerleave listener so it can't outlive its own gesture.
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        // Capture FAILS only on the first call (drag N), succeeds after.
+        let captureCalls = 0;
+        target.setPointerCapture = jest.fn(() => {
+            captureCalls++;
+            if (captureCalls === 1) {
+                throw new DOMException("no capture", "InvalidStateError");
+            }
+        });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Drag N: pointerdown attaches the pointerleave fallback, but
+        // user starts drag and never releases (simulates a "stuck"
+        // drag). Do NOT pointerup.
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 80, 80);
+        // Drag N+1 starts. Re-entrancy guard finalizes drag N. WITHOUT
+        // the fix, drag N's pointerleave listener stays attached.
+        // Capture succeeds this time so no NEW pointerleave is attached.
+        dispatchPointer(target, "pointerdown", 20, 20);
+        dispatchPointer(target, "pointermove", 100, 100);
+        // Fire pointerleave. With the fix, no pointerleave handler is
+        // attached → no-op, drag N+1 continues. WITHOUT the fix, the
+        // stale listener from N would call finalize and cancel.
+        target.dispatchEvent(new MouseEvent("pointerleave", { bubbles: false }));
+        dispatchPointer(target, "pointerup", 100, 100);
+        // Drag N+1 should have dispatched normally — the stale listener
+        // must NOT have cancelled it.
+        expect(send).toHaveBeenCalledTimes(1);
+    });
+    it("idempotent re-arm picks up the latest send callback (no stale closure)", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const firstSend = jest.fn();
+        const secondSend = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, firstSend);
+        // A subsequent render passes a different send (e.g. after a WS
+        // reconnect rebuilt the transport). The idempotent path keeps
+        // the listeners but MUST swap the captured send so the next
+        // drag dispatches through the latest callback.
+        (0, directives_1.handleAreaSelectDirectives)(document.body, secondSend);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 100, 100);
+        dispatchPointer(target, "pointerup", 100, 100);
+        expect(firstSend).not.toHaveBeenCalled();
+        expect(secondSend).toHaveBeenCalledTimes(1);
+    });
+    it("lostpointercapture cancels the drag without dispatching", () => {
+        const [, parent] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const target = parent.querySelector("img");
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 80, 80);
+        // Platform yanks capture (OS gesture, another setPointerCapture
+        // call elsewhere). lostpointercapture should cancel like
+        // pointercancel — overlay removed, no action dispatched.
+        dispatchPointer(target, "lostpointercapture", 80, 80);
+        expect(send).not.toHaveBeenCalled();
+        expect(parent.querySelector(".lvt-area-select-overlay")).toBeNull();
+    });
+    it("cleans up armed elements whose attribute was removed by a server diff", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // Server diff removes the attribute. The element stays in the DOM
+        // (host alive, but no longer wants area-select). The next
+        // handleAreaSelectDirectives pass MUST cancel the listeners — a
+        // subsequent drag must not dispatch the old action.
+        target.removeAttribute("lvt-fx:area-select");
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 100, 100);
+        dispatchPointer(target, "pointerup", 100, 100);
+        expect(send).not.toHaveBeenCalled();
+    });
+    it("recovers from a stuck drag on the next pointerdown (re-entrancy guard)", () => {
+        const [target] = mountTarget("img", { "lvt-fx:area-select": "selectImageArea" }, { left: 0, top: 0, width: 200, height: 200 });
+        const send = jest.fn();
+        (0, directives_1.handleAreaSelectDirectives)(document.body, send);
+        // First drag: pointerdown but no pointerup (simulates a captured
+        // pointer that never released — what happens when capture silently
+        // fails and pointer leaves the element).
+        dispatchPointer(target, "pointerdown", 10, 10);
+        dispatchPointer(target, "pointermove", 60, 60);
+        // No pointerup. The drag is "stuck".
+        // Second drag starts. Without the re-entrancy guard, the first
+        // overlay would be orphaned. With the guard, the directive cancels
+        // the stuck drag before starting the new one, and the new drag
+        // completes normally.
+        dispatchPointer(target, "pointerdown", 100, 100);
+        dispatchPointer(target, "pointermove", 150, 150);
+        dispatchPointer(target, "pointerup", 150, 150);
+        expect(send).toHaveBeenCalledTimes(1);
+        // The dispatched coords must come from the SECOND drag, not the
+        // first. (Start=100, End=150 → x=0.5, w=0.25 on the 200-wide rect.)
+        const data = send.mock.calls[0][0].data;
+        expect(data.x).toBeCloseTo(0.50, 5);
+        expect(data.w).toBeCloseTo(0.25, 5);
+        // Exactly one overlay at most over the whole sequence (the second
+        // drag's) — never two.
+        expect(document.querySelectorAll(".lvt-area-select-overlay").length).toBe(0);
+    });
+});
 //# sourceMappingURL=directives.test.js.map