@atolljs/islands 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atolljs/islands",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Atoll islands — MonoWorker/PolyWorker hosts rendering framework islands (React/Vue/Svelte/Solid/Angular) over a proxy-DOM op protocol",
   "homepage": "https://jwhenry3.github.io/atolljs/consumer/quickstart/",
   "type": "module",
@@ -19,7 +19,7 @@
     "htmlparser2": "^12.0.0"
   },
   "peerDependencies": {
-    "@atolljs/core": "0.1.9"
+    "@atolljs/core": "0.1.10"
   },
   "repository": {
     "type": "git",

package/src/island.ts

@@ -227,6 +227,7 @@ function buildEventPayload(
   e: Event,
   target: EventTarget | null,
   targetId: number | undefined,
+  relatedTargetId?: number,
 ): EventPayload {
   const input = target as HTMLInputElement | null;
   const mouse = e as MouseEvent;
@@ -243,6 +244,18 @@ function buildEventPayload(
   const coord = (v: unknown): number | undefined =>
     num(v) ?? (pointerFam ? 0 : undefined);
   const button = num(mouse.button) ?? (pointerFam ? 0 : undefined);
+  // currentTarget is the element this listener was attached to — the exact
+  // element hit-testing libraries normalize pointer coords against
+  // (zrender's `normalizeEvent(this.dom, e)`). Checked structurally, not
+  // via `instanceof Element`: in in-process embeddings the worker-side
+  // dispatcher may point the global at ProxyElement.
+  const ct = e.currentTarget as Element | null;
+  const localRect =
+    ct && typeof ct.getBoundingClientRect === 'function'
+      ? ct.getBoundingClientRect()
+      : null;
+  const local = (v: number | undefined, origin: number): number | undefined =>
+    localRect && typeof v === 'number' ? v - origin : undefined;
   return {
     type: e.type,
     value: input && 'value' in input ? input.value : undefined,
@@ -252,6 +265,8 @@ function buildEventPayload(
     clientY: coord(mouse.clientY),
     screenX: coord(mouse.screenX),
     screenY: coord(mouse.screenY),
+    zrX: local(mouse.clientX, localRect?.left ?? 0),
+    zrY: local(mouse.clientY, localRect?.top ?? 0),
     button,
     which:
       typeof mouse.which === 'number' && mouse.which !== 0
@@ -273,6 +288,7 @@ function buildEventPayload(
     pointerType: typeof pointer.pointerType === 'string' ? pointer.pointerType : undefined,
     scrollTop: input instanceof HTMLElement ? input.scrollTop : undefined,
     targetId,
+    relatedTargetId,
   };
 }
 
@@ -547,6 +563,7 @@ export async function mountIsland(opts: MountIslandOptions): Promise<IslandHandl
         e,
         target,
         target !== null ? nodeIds.get(target as Node) : undefined,
+        nodeIds.get((e as MouseEvent).relatedTarget as Node),
       );
       // The whole point: an event = one postMessage round-trip. The worker
       // re-renders, we apply whatever ops come back.

package/src/ops.ts

@@ -124,6 +124,19 @@ export interface EventPayload {
   clientY?: number;
   screenX?: number;
   screenY?: number;
+  /**
+   * Pointer coords in the LISTENER element's local space:
+   * `clientX/Y − event.currentTarget.getBoundingClientRect()` computed
+   * main-thread where real rects exist. The proxy DOM has no measurement
+   * channel, so worker-side hit-testing libraries cannot derive local
+   * coords themselves: zrender's four-marker getBoundingClientRect
+   * transform degenerates, and e.offsetX is absent anyway. zrender's
+   * normalizeEvent early-returns on `e.zrX != null`, which is why the
+   * fields carry its names — charts (echarts SVG renderer) get working
+   * axis pointers/tooltips, any library can read them the same way.
+   */
+  zrX?: number;
+  zrY?: number;
   button?: number;
   /**
    * UIEvent.which — non-standard but set by every browser (1 = left button,
@@ -153,6 +166,15 @@ export interface EventPayload {
   scrollTop?: number;
   /** The worker instance id of `event.target`, when it maps to one. */
   targetId?: number;
+  /**
+   * The worker instance id of `event.relatedTarget` (MouseEvent/FocusEvent),
+   * when it maps to an op-created node. Lets over/out/leave/enter handlers
+   * distinguish "moved to a child" from "actually left the element" —
+   * zrender's mouseout gate (`toElement || relatedTarget` → isLocalEl walk)
+   * is the canonical consumer; without it every child transition looks like
+   * a real leave and charts flicker as tooltips hide/show.
+   */
+  relatedTargetId?: number;
   /**
    * The proxy-DOM node for `targetId` — SYNTHESIZED worker-side by the proxy
    * DOM when it wraps a listener (it never crosses the wire). Lets delegated
@@ -162,6 +184,13 @@ export interface EventPayload {
    * same proxy document.
    */
   target?: unknown;
+  /**
+   * The proxy-DOM node for `relatedTargetId` — SYNTHESIZED worker-side like
+   * `target` (never crosses the wire). Handler code can walk
+   * `relatedTarget.parentNode` — e.g. zrender's isLocalEl — to test
+   * whether the pointer moved within the listener's subtree.
+   */
+  relatedTarget?: unknown;
   /**
    * Synthesized NO-OPS — added worker-side by the proxy DOM when it wraps a
    * listener's payload (they never cross the wire). They exist so library

package/src/worker/dom/document.ts

@@ -307,6 +307,13 @@ export class InternalDocument implements ProxyDocument {
         out.target = node;
       }
     }
+    // Materialize relatedTarget the same way — over/out handlers walk it
+    // (zrender's isLocalEl climbs parentNode to the listener root) to tell
+    // "moved to a child" apart from "actually left".
+    if (typeof payload.relatedTargetId === 'number') {
+      const related = instances.get(payload.relatedTargetId);
+      if (related !== undefined) out.relatedTarget = this._wrap(related);
+    }
     if (out.composedPath === undefined) {
       const path: unknown[] = [];
       let n = out.target as ProxyNode | undefined;

package/src/worker/subIsland.ts

@@ -81,6 +81,7 @@ const clientMounts = new WeakMap<object, number>();
  */
 const ENRICHED_KEYS = new Set([
   'target',
+  'relatedTarget',
   'currentTarget',
   'composedPath',
   'preventDefault',