@flighthq/interaction 0.2.0 → 0.2.1-next.423.3350e53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flighthq/interaction",
-  "version": "0.2.0",
+  "version": "0.2.1-next.423.3350e53",
   "repository": {
     "type": "git",
     "url": "https://github.com/flighthq/flight.git",
@@ -32,14 +32,20 @@
     "clean:dist": "tsx ../../scripts/clean-package-dist.ts"
   },
   "dependencies": {
-    "@flighthq/geometry": "0.2.0",
-    "@flighthq/node": "0.2.0",
-    "@flighthq/displayobject": "0.2.0",
-    "@flighthq/signals": "0.2.0",
-    "@flighthq/types": "0.2.0"
+    "@flighthq/geometry": "0.2.1-next.423.3350e53",
+    "@flighthq/node": "0.2.1-next.423.3350e53",
+    "@flighthq/displayobject": "0.2.1-next.423.3350e53",
+    "@flighthq/log": "0.2.1-next.423.3350e53",
+    "@flighthq/path": "0.2.1-next.423.3350e53",
+    "@flighthq/shape": "0.2.1-next.423.3350e53",
+    "@flighthq/spatial": "0.2.1-next.423.3350e53",
+    "@flighthq/signals": "0.2.1-next.423.3350e53",
+    "@flighthq/surface": "0.2.1-next.423.3350e53",
+    "@flighthq/text": "0.2.1-next.423.3350e53",
+    "@flighthq/textlayout": "0.2.1-next.423.3350e53",
+    "@flighthq/types": "0.2.1-next.423.3350e53"
   },
   "devDependencies": {
-    "@flighthq/shape": "*",
     "@flighthq/sprite": "*",
     "typescript": "^5.3.0"
   },

package/src/cursorBackend.test.ts

@@ -0,0 +1,24 @@
+import type { Cursor } from '@flighthq/types';
+
+import { createWebCursorBackend } from './cursorBackend';
+
+describe('createWebCursorBackend', () => {
+  function fakeElement(): { style: { cursor: string } } {
+    return { style: { cursor: 'init' } };
+  }
+
+  it('writes the cursor value to element.style.cursor', () => {
+    const el = fakeElement();
+    const backend = createWebCursorBackend(el as unknown as HTMLElement);
+    backend.setCursor('pointer' as Cursor);
+    expect(el.style.cursor).toBe('pointer');
+  });
+
+  it('clears to the empty string when given null', () => {
+    const el = fakeElement();
+    const backend = createWebCursorBackend(el as unknown as HTMLElement);
+    backend.setCursor('grab' as Cursor);
+    backend.setCursor(null);
+    expect(el.style.cursor).toBe('');
+  });
+});

package/src/displayHitTests.test.ts

@@ -3,17 +3,16 @@ import { setRectangle } from '@flighthq/geometry';
 import { getNodeLocalBoundsRectangle } from '@flighthq/node';
 
 import {
-  defaultBitmapHitTestPointHandler,
-  defaultDisplayObjectHitTestPointHandler,
-  defaultHtmlViewHitTestPointHandler,
-  defaultMovieClipHitTestPointHandler,
-  defaultRenderViewHitTestPointHandler,
-  defaultRichTextHitTestPointHandler,
-  defaultShapeHitTestPointHandler,
-  defaultStageHitTestPointHandler,
-  defaultTextHitTestPointHandler,
-  defaultTextInputHitTestPointHandler,
-  defaultVideoHitTestPointHandler,
+  defaultBitmapHitTestHandler,
+  defaultDisplayObjectHitTestHandler,
+  defaultHtmlViewHitTestHandler,
+  defaultMovieClipHitTestHandler,
+  defaultRenderViewHitTestHandler,
+  defaultRichTextHitTestHandler,
+  defaultShapeHitTestHandler,
+  defaultTextHitTestHandler,
+  defaultTextInputHitTestHandler,
+  defaultVideoHitTestHandler,
 } from './displayHitTests';
 
 function makeDisplayObject() {
@@ -22,116 +21,109 @@ function makeDisplayObject() {
   return obj;
 }
 
-describe('defaultBitmapHitTestPointHandler', () => {
+describe('defaultBitmapHitTestHandler', () => {
   it('returns true when point is within local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultBitmapHitTestPointHandler(obj, 50, 50, false)).toBe(true);
+    expect(defaultBitmapHitTestHandler(obj, 50, 50)).toBe(true);
   });
 
   it('returns false when point is outside local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultBitmapHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultBitmapHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });
 
-describe('defaultDisplayObjectHitTestPointHandler', () => {
+describe('defaultDisplayObjectHitTestHandler', () => {
   it('always returns false — plain display objects have no hit geometry', () => {
     const obj = makeDisplayObject();
-    expect(defaultDisplayObjectHitTestPointHandler(obj, 50, 50, false)).toBe(false);
-    expect(defaultDisplayObjectHitTestPointHandler(obj, 0, 0, false)).toBe(false);
-    expect(defaultDisplayObjectHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultDisplayObjectHitTestHandler(obj, 50, 50)).toBe(false);
+    expect(defaultDisplayObjectHitTestHandler(obj, 0, 0)).toBe(false);
+    expect(defaultDisplayObjectHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });
 
-describe('defaultHtmlViewHitTestPointHandler', () => {
+describe('defaultHtmlViewHitTestHandler', () => {
   it('always returns false — browser manages HtmlView hit testing', () => {
     const obj = makeDisplayObject();
-    expect(defaultHtmlViewHitTestPointHandler(obj, 50, 50, false)).toBe(false);
+    expect(defaultHtmlViewHitTestHandler(obj, 50, 50)).toBe(false);
   });
 });
 
-describe('defaultMovieClipHitTestPointHandler', () => {
+describe('defaultMovieClipHitTestHandler', () => {
   it('always returns false — containers have no self hit area', () => {
     const obj = makeDisplayObject();
-    expect(defaultMovieClipHitTestPointHandler(obj, 50, 50, false)).toBe(false);
+    expect(defaultMovieClipHitTestHandler(obj, 50, 50)).toBe(false);
   });
 });
 
-describe('defaultRenderViewHitTestPointHandler', () => {
+describe('defaultRenderViewHitTestHandler', () => {
   it('returns true when point is within local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultRenderViewHitTestPointHandler(obj, 50, 50, false)).toBe(true);
+    expect(defaultRenderViewHitTestHandler(obj, 50, 50)).toBe(true);
   });
 
   it('returns false when point is outside local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultRenderViewHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultRenderViewHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });
 
-describe('defaultRichTextHitTestPointHandler', () => {
+describe('defaultRichTextHitTestHandler', () => {
   it('returns true when point is within local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultRichTextHitTestPointHandler(obj, 50, 50, false)).toBe(true);
+    expect(defaultRichTextHitTestHandler(obj, 50, 50)).toBe(true);
   });
 
   it('returns false when point is outside local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultRichTextHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultRichTextHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });
 
-describe('defaultShapeHitTestPointHandler', () => {
+describe('defaultShapeHitTestHandler', () => {
   it('returns true when point is within local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultShapeHitTestPointHandler(obj, 50, 50, false)).toBe(true);
+    expect(defaultShapeHitTestHandler(obj, 50, 50)).toBe(true);
   });
 
   it('returns false when point is outside local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultShapeHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultShapeHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });
 
-describe('defaultStageHitTestPointHandler', () => {
-  it('always returns false — containers have no self hit area', () => {
-    const obj = makeDisplayObject();
-    expect(defaultStageHitTestPointHandler(obj, 50, 50, false)).toBe(false);
-  });
-});
-
-describe('defaultTextHitTestPointHandler', () => {
+describe('defaultTextHitTestHandler', () => {
   it('returns true when point is within local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultTextHitTestPointHandler(obj, 50, 50, false)).toBe(true);
+    expect(defaultTextHitTestHandler(obj, 50, 50)).toBe(true);
   });
 
   it('returns false when point is outside local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultTextHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultTextHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });
 
-describe('defaultTextInputHitTestPointHandler', () => {
+describe('defaultTextInputHitTestHandler', () => {
   it('returns true when point is within local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultTextInputHitTestPointHandler(obj, 50, 50, false)).toBe(true);
+    expect(defaultTextInputHitTestHandler(obj, 50, 50)).toBe(true);
   });
 
   it('returns false when point is outside local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultTextInputHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultTextInputHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });
 
-describe('defaultVideoHitTestPointHandler', () => {
+describe('defaultVideoHitTestHandler', () => {
   it('returns true when point is within local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultVideoHitTestPointHandler(obj, 50, 50, false)).toBe(true);
+    expect(defaultVideoHitTestHandler(obj, 50, 50)).toBe(true);
   });
 
   it('returns false when point is outside local bounds', () => {
     const obj = makeDisplayObject();
-    expect(defaultVideoHitTestPointHandler(obj, 200, 200, false)).toBe(false);
+    expect(defaultVideoHitTestHandler(obj, 200, 200)).toBe(false);
   });
 });

package/src/enableInteractionGuards.test.ts

@@ -0,0 +1,102 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { addLogSink, createMemoryLogSink, getMemoryLogSinkEntries, removeLogSink } from '@flighthq/log';
+import { addNodeChild } from '@flighthq/node';
+
+import {
+  disableInteractionGuards,
+  enableInteractionGuards,
+  explainInteractionHitEligibility,
+} from './enableInteractionGuards';
+import { connectInteractionSignal, createInteractionManager } from './interactionManager';
+import { setNodeFocusable, setNodeHitTestEnabled } from './nodeInteractionState';
+
+afterEach(() => {
+  disableInteractionGuards();
+});
+
+describe('disableInteractionGuards', () => {
+  it('stops the guard from warning', () => {
+    const root = createDisplayObject();
+    const manager = createInteractionManager(root);
+    enableInteractionGuards();
+    disableInteractionGuards();
+    const sink = createMemoryLogSink(8);
+    addLogSink(sink.sink);
+    try {
+      connectInteractionSignal(manager, root, 'onPointerDown', () => {});
+      expect(getMemoryLogSinkEntries(sink).length).toBe(0);
+    } finally {
+      removeLogSink(sink.sink);
+    }
+  });
+});
+
+describe('enableInteractionGuards', () => {
+  it('does not warn when the target subtree has an opted-in node', () => {
+    const root = createDisplayObject();
+    const child = createDisplayObject();
+    setNodeHitTestEnabled(child, true);
+    addNodeChild(root, child);
+    const manager = createInteractionManager(root);
+    enableInteractionGuards();
+    const sink = createMemoryLogSink(8);
+    addLogSink(sink.sink);
+    try {
+      connectInteractionSignal(manager, root, 'onPointerDown', () => {});
+      expect(getMemoryLogSinkEntries(sink).length).toBe(0);
+    } finally {
+      removeLogSink(sink.sink);
+    }
+  });
+
+  it('warns once when a listener targets a node with no hit-testable subtree', () => {
+    const root = createDisplayObject();
+    const manager = createInteractionManager(root);
+    enableInteractionGuards();
+    const sink = createMemoryLogSink(8);
+    addLogSink(sink.sink);
+    try {
+      connectInteractionSignal(manager, root, 'onPointerDown', () => {});
+      const entries = getMemoryLogSinkEntries(sink);
+      expect(entries.length).toBe(1);
+      expect(String((entries[0].data as Record<string, unknown>).message)).toContain('setNodeHitTestEnabled');
+    } finally {
+      removeLogSink(sink.sink);
+    }
+  });
+
+  it('warns a focus listener toward setNodeFocusable, and stays silent once a focus stop exists', () => {
+    const root = createDisplayObject();
+    const manager = createInteractionManager(root);
+    enableInteractionGuards();
+    const sink = createMemoryLogSink(8);
+    addLogSink(sink.sink);
+    try {
+      connectInteractionSignal(manager, root, 'onFocusIn', () => {});
+      const entries = getMemoryLogSinkEntries(sink);
+      expect(entries.length).toBe(1);
+      expect(String((entries[0].data as Record<string, unknown>).message)).toContain('setNodeFocusable');
+
+      const focusable = createDisplayObject();
+      setNodeFocusable(focusable, true);
+      addNodeChild(root, focusable);
+      connectInteractionSignal(manager, root, 'onFocusOut', () => {});
+      expect(getMemoryLogSinkEntries(sink).length).toBe(1);
+    } finally {
+      removeLogSink(sink.sink);
+    }
+  });
+});
+
+describe('explainInteractionHitEligibility', () => {
+  it('reports self eligibility and whether the subtree has a candidate', () => {
+    const root = createDisplayObject();
+    const child = createDisplayObject();
+    addNodeChild(root, child);
+    expect(explainInteractionHitEligibility(root)).toEqual({ eligible: false, hasEligibleInSubtree: false });
+    setNodeHitTestEnabled(child, true);
+    expect(explainInteractionHitEligibility(root)).toEqual({ eligible: false, hasEligibleInSubtree: true });
+    setNodeHitTestEnabled(root, true);
+    expect(explainInteractionHitEligibility(root)).toEqual({ eligible: true, hasEligibleInSubtree: true });
+  });
+});

package/src/focusManager.test.ts

@@ -0,0 +1,307 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { setRectangle } from '@flighthq/geometry';
+import { addNodeChild, getNodeLocalBoundsRectangle, invalidateNodeLocalTransform } from '@flighthq/node';
+import { connectSignal, createSignal, emitSignal } from '@flighthq/signals';
+import type { DisplayObject, FocusEventData, InputKeyboardData } from '@flighthq/types';
+
+import {
+  clearFocus,
+  connectFocusNavigation,
+  createFocusManager,
+  focusNextNode,
+  focusNodeInDirection,
+  focusPreviousNode,
+  getFocusOrder,
+  getFocusedNode,
+  isNodeFocused,
+  setFocusedNode,
+} from './focusManager';
+import { enableInteractionSignals } from './interactionManager';
+import { setNodeFocusable, setNodeTabIndex } from './nodeInteractionState';
+
+function focusable(tabIndex: number = -1): DisplayObject {
+  const node = createDisplayObject();
+  setNodeFocusable(node, true);
+  if (tabIndex !== -1) setNodeTabIndex(node, tabIndex);
+  return node;
+}
+
+// A focusable node positioned in world space, so directional navigation can compare bounds centers.
+function placed(x: number, y: number): DisplayObject {
+  const node = focusable();
+  node.x = x;
+  node.y = y;
+  invalidateNodeLocalTransform(node);
+  setRectangle(getNodeLocalBoundsRectangle(node), 0, 0, 20, 20);
+  return node;
+}
+
+function keyInput() {
+  return { onKeyDown: createSignal<(data: Readonly<InputKeyboardData>) => void>() };
+}
+
+function keyData(key: string, shiftKey: boolean = false): InputKeyboardData {
+  return {
+    altKey: false,
+    capsLock: false,
+    code: key,
+    ctrlKey: false,
+    key,
+    keyCode: 0,
+    location: 0,
+    metaKey: false,
+    modifier: 0,
+    numLock: false,
+    repeat: false,
+    shiftKey,
+    timeStamp: 0,
+  };
+}
+
+function sceneOf(...nodes: readonly DisplayObject[]): DisplayObject {
+  const root = createDisplayObject();
+  for (const node of nodes) addNodeChild(root, node);
+  return root;
+}
+
+describe('clearFocus', () => {
+  it('drops focus and fires onFocusOut on the previously focused node', () => {
+    const a = focusable();
+    const manager = createFocusManager(sceneOf(a));
+    setFocusedNode(manager, a);
+    let out = 0;
+    connectSignal(enableInteractionSignals(a).onFocusOut, () => out++);
+
+    clearFocus(manager);
+    expect(getFocusedNode(manager)).toBeNull();
+    expect(out).toBe(1);
+  });
+});
+
+describe('connectFocusNavigation', () => {
+  it('advances on Tab and retreats on Shift+Tab, and stops after disconnect', () => {
+    const a = focusable();
+    const b = focusable();
+    const manager = createFocusManager(sceneOf(a, b));
+    const input = keyInput();
+    const disconnect = connectFocusNavigation(input, manager);
+
+    emitSignal(input.onKeyDown, keyData('Tab'));
+    expect(getFocusedNode(manager)).toBe(a);
+    emitSignal(input.onKeyDown, keyData('Tab'));
+    expect(getFocusedNode(manager)).toBe(b);
+    emitSignal(input.onKeyDown, keyData('Tab', true));
+    expect(getFocusedNode(manager)).toBe(a);
+
+    disconnect();
+    emitSignal(input.onKeyDown, keyData('Tab'));
+    expect(getFocusedNode(manager)).toBe(a);
+  });
+
+  it('drives directional navigation from the arrow keys only when arrowKeys is set', () => {
+    const center = placed(100, 100);
+    const right = placed(200, 100);
+    const manager = createFocusManager(sceneOf(center, right));
+    setFocusedNode(manager, center);
+
+    const plain = keyInput();
+    const disconnectPlain = connectFocusNavigation(plain, manager);
+    emitSignal(plain.onKeyDown, keyData('ArrowRight'));
+    expect(getFocusedNode(manager)).toBe(center);
+    disconnectPlain();
+
+    connectFocusNavigation(keyInput(), manager, { arrowKeys: true });
+    const arrows = keyInput();
+    connectFocusNavigation(arrows, manager, { arrowKeys: true });
+    emitSignal(arrows.onKeyDown, keyData('ArrowRight'));
+    expect(getFocusedNode(manager)).toBe(right);
+  });
+});
+
+describe('createFocusManager', () => {
+  it('starts unfocused with wrap on by default, and honors wrap: false', () => {
+    const root = createDisplayObject();
+    expect(createFocusManager(root)).toEqual({ focused: null, root, wrap: true });
+    expect(createFocusManager(root, { wrap: false }).wrap).toBe(false);
+  });
+});
+
+describe('focusNextNode', () => {
+  it('advances through the order and wraps when enabled', () => {
+    const a = focusable();
+    const b = focusable();
+    const manager = createFocusManager(sceneOf(a, b));
+
+    expect(focusNextNode(manager)).toBe(a);
+    expect(focusNextNode(manager)).toBe(b);
+    expect(focusNextNode(manager)).toBe(a);
+  });
+
+  it('returns null at the last stop when wrap is off', () => {
+    const a = focusable();
+    const b = focusable();
+    const manager = createFocusManager(sceneOf(a, b), { wrap: false });
+    setFocusedNode(manager, b);
+
+    expect(focusNextNode(manager)).toBeNull();
+    expect(getFocusedNode(manager)).toBe(b);
+  });
+
+  it('returns null when there are no focus stops', () => {
+    const manager = createFocusManager(sceneOf(createDisplayObject()));
+    expect(focusNextNode(manager)).toBeNull();
+  });
+});
+
+describe('focusNodeInDirection', () => {
+  it('picks the nearest stop on the requested side of the focused node', () => {
+    const center = placed(100, 100);
+    const right = placed(200, 100);
+    const left = placed(0, 100);
+    const up = placed(100, 0);
+    const down = placed(100, 200);
+    const manager = createFocusManager(sceneOf(center, right, left, up, down));
+
+    setFocusedNode(manager, center);
+    expect(focusNodeInDirection(manager, 'right')).toBe(right);
+    setFocusedNode(manager, center);
+    expect(focusNodeInDirection(manager, 'left')).toBe(left);
+    setFocusedNode(manager, center);
+    expect(focusNodeInDirection(manager, 'up')).toBe(up);
+    setFocusedNode(manager, center);
+    expect(focusNodeInDirection(manager, 'down')).toBe(down);
+  });
+
+  it('returns null when nothing is focused or nothing lies that way', () => {
+    const center = placed(100, 100);
+    const left = placed(0, 100);
+    const manager = createFocusManager(sceneOf(center, left));
+
+    expect(focusNodeInDirection(manager, 'right')).toBeNull();
+    setFocusedNode(manager, center);
+    expect(focusNodeInDirection(manager, 'right')).toBeNull();
+    expect(getFocusedNode(manager)).toBe(center);
+  });
+});
+
+describe('focusPreviousNode', () => {
+  it('retreats through the order and wraps when enabled', () => {
+    const a = focusable();
+    const b = focusable();
+    const manager = createFocusManager(sceneOf(a, b));
+    setFocusedNode(manager, a);
+
+    expect(focusPreviousNode(manager)).toBe(b);
+    expect(focusPreviousNode(manager)).toBe(a);
+  });
+});
+
+describe('getFocusedNode', () => {
+  it('reflects the current focus', () => {
+    const a = focusable();
+    const manager = createFocusManager(sceneOf(a));
+    expect(getFocusedNode(manager)).toBeNull();
+    setFocusedNode(manager, a);
+    expect(getFocusedNode(manager)).toBe(a);
+  });
+});
+
+describe('getFocusOrder', () => {
+  it('collects focusable nodes in tree order, skipping non-focusable ones', () => {
+    const a = focusable();
+    const decorative = createDisplayObject();
+    const b = focusable();
+    const manager = createFocusManager(sceneOf(a, decorative, b));
+
+    expect(getFocusOrder(manager)).toEqual([a, b]);
+  });
+
+  it('orders explicit tabIndex ahead of natural order, ascending', () => {
+    const natural1 = focusable();
+    const natural2 = focusable();
+    const explicit = focusable(1);
+    const manager = createFocusManager(sceneOf(natural1, natural2, explicit));
+
+    expect(getFocusOrder(manager)).toEqual([explicit, natural1, natural2]);
+  });
+
+  it('skips a disabled node and its subtree', () => {
+    const a = focusable();
+    const disabledParent = createDisplayObject();
+    disabledParent.enabled = false;
+    const buried = focusable();
+    addNodeChild(disabledParent, buried);
+    const manager = createFocusManager(sceneOf(a, disabledParent));
+
+    expect(getFocusOrder(manager)).toEqual([a]);
+  });
+});
+
+describe('isNodeFocused', () => {
+  it('is true only for the focused node', () => {
+    const a = focusable();
+    const b = focusable();
+    const manager = createFocusManager(sceneOf(a, b));
+    setFocusedNode(manager, a);
+
+    expect(isNodeFocused(manager, a)).toBe(true);
+    expect(isNodeFocused(manager, b)).toBe(false);
+  });
+});
+
+describe('setFocusedNode', () => {
+  it('rejects a non-focusable node without changing focus', () => {
+    const plain = createDisplayObject();
+    const manager = createFocusManager(sceneOf(plain));
+    expect(setFocusedNode(manager, plain)).toBe(false);
+    expect(getFocusedNode(manager)).toBeNull();
+  });
+
+  it('fires onFocusOut then onFocusIn with relatedTarget set to the other node', () => {
+    const a = focusable();
+    const b = focusable();
+    const manager = createFocusManager(sceneOf(a, b));
+    setFocusedNode(manager, a);
+
+    let outRelated: unknown = 'unset';
+    let inRelated: unknown = 'unset';
+    connectSignal(enableInteractionSignals(a).onFocusOut, (data: Readonly<FocusEventData>) => {
+      outRelated = data.relatedTarget;
+    });
+    connectSignal(enableInteractionSignals(b).onFocusIn, (data: Readonly<FocusEventData>) => {
+      inRelated = data.relatedTarget;
+    });
+
+    setFocusedNode(manager, b);
+    expect(outRelated).toBe(b);
+    expect(inRelated).toBe(a);
+  });
+
+  it('bubbles onFocusIn up to an ancestor listener', () => {
+    const child = focusable();
+    const root = sceneOf(child);
+    const manager = createFocusManager(root);
+
+    let currentTarget: unknown = null;
+    let target: unknown = null;
+    connectSignal(enableInteractionSignals(root).onFocusIn, (data: Readonly<FocusEventData>) => {
+      currentTarget = data.currentTarget;
+      target = data.target;
+    });
+
+    setFocusedNode(manager, child);
+    expect(target).toBe(child);
+    expect(currentTarget).toBe(root);
+  });
+
+  it('is a no-op that still returns true when refocusing the same node', () => {
+    const a = focusable();
+    const manager = createFocusManager(sceneOf(a));
+    setFocusedNode(manager, a);
+    let events = 0;
+    connectSignal(enableInteractionSignals(a).onFocusIn, () => events++);
+
+    expect(setFocusedNode(manager, a)).toBe(true);
+    expect(events).toBe(0);
+  });
+});