@ankhorage/zora 25.10.9 → 25.11.1

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphViewDomCallbacks.test.ts

@@ -0,0 +1,77 @@
+import { expect, test } from 'bun:test';
+
+import { GRAPH_VIEW_EVENTS } from '../../../constants/events';
+import { createGraphViewDomCallbacks } from './createGraphViewDomCallbacks';
+
+test('exposes public controller on bubbling ready and layout events without changing React callbacks', () => {
+  const host = new EventTarget();
+  const controller = createController();
+  const observed: string[] = [];
+  const browserEvents: string[] = [];
+  for (const name of [GRAPH_VIEW_EVENTS.ready, GRAPH_VIEW_EVENTS.layoutComplete]) {
+    host.addEventListener(name, (event) => {
+      if (!(event instanceof CustomEvent)) throw new Error('Expected a CustomEvent.');
+      const detail: unknown = event.detail;
+      if (typeof detail !== 'object' || detail === null || !('controller' in detail))
+        throw new Error('Expected a public controller in the browser event.');
+      expect(detail.controller).toBe(controller);
+      expect(event.bubbles).toBe(true);
+      browserEvents.push(name);
+    });
+  }
+
+  const callbacks = createGraphViewDomCallbacks(
+    {
+      onReady: (received) => {
+        expect(received).toBe(controller);
+        observed.push('ready');
+      },
+      onLayoutComplete: (received) => {
+        expect(received).toBe(controller);
+        observed.push('layout');
+      },
+    },
+    { current: host },
+  );
+  callbacks.onReady?.(controller);
+  callbacks.onLayoutComplete?.(controller);
+
+  expect(observed).toEqual(['ready', 'layout']);
+  expect(browserEvents).toEqual([GRAPH_VIEW_EVENTS.ready, GRAPH_VIEW_EVENTS.layoutComplete]);
+  expect(controller.measureNodes(['src']).nodes[0]?.id).toBe('src');
+});
+
+test('preserves React callbacks when the browser host is unmounted', () => {
+  const controller = createController();
+  const observed: string[] = [];
+  const callbacks = createGraphViewDomCallbacks(
+    {
+      onReady: () => observed.push('ready'),
+      onLayoutComplete: () => observed.push('layout'),
+    },
+    { current: null },
+  );
+  callbacks.onReady?.(controller);
+  callbacks.onLayoutComplete?.(controller);
+  expect(observed).toEqual(['ready', 'layout']);
+});
+
+/*** Supplies public viewport and rendered geometry without a Cytoscape instance. */
+function createController() {
+  return {
+    fit: () => undefined,
+    measureNodes: (ids: readonly string[]) => ({
+      nodes: ids.map((id) => ({
+        id,
+        position: { x: 120, y: 80 },
+        size: { width: 100, height: 48 },
+      })),
+      viewport: { width: 800, height: 600 },
+    }),
+    getViewport: () => ({ pan: { x: 0, y: 0 }, zoom: 1 }),
+    getZoomRange: () => ({ min: 0.5, max: 2 }),
+    setPan: () => undefined,
+    setZoom: () => undefined,
+    zoomBy: () => undefined,
+  };
+}

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphViewDomCallbacks.ts

@@ -0,0 +1,55 @@
+import type {
+  GraphViewCallbacks,
+  GraphViewController,
+  GraphViewDomControllerEventDetail,
+} from '../../../../../types/graph-view';
+import { GRAPH_VIEW_EVENTS, type GraphViewDomControllerEventName } from '../../../constants/events';
+
+/***
+ * Mirror public GraphView controller callbacks as bubbling browser lifecycle events.
+ * Browser hosts can measure actual rendered nodes without reaching into the graph engine.
+ */
+export function createGraphViewDomCallbacks(
+  callbacks: GraphViewCallbacks,
+  hostRef: { readonly current: unknown },
+): GraphViewCallbacks {
+  return {
+    ...callbacks,
+    onReady(controller) {
+      callbacks.onReady?.(controller);
+      dispatchGraphViewControllerEvent(hostRef, GRAPH_VIEW_EVENTS.ready, controller);
+    },
+    onLayoutComplete(controller) {
+      callbacks.onLayoutComplete?.(controller);
+      dispatchGraphViewControllerEvent(hostRef, GRAPH_VIEW_EVENTS.layoutComplete, controller);
+    },
+  };
+}
+
+/*** Deliver the existing public controller reference on the GraphView root event channel. */
+function dispatchGraphViewControllerEvent(
+  hostRef: { readonly current: unknown },
+  name: GraphViewDomControllerEventName,
+  controller: GraphViewController,
+): void {
+  const host = hostRef.current;
+  if (!canDispatchBrowserEvent(host)) return;
+  host.dispatchEvent(
+    new CustomEvent<GraphViewDomControllerEventDetail>(name, {
+      bubbles: true,
+      detail: { controller },
+    }),
+  );
+}
+
+/*** Narrow an untrusted browser host to the standard event-dispatch method. */
+function canDispatchBrowserEvent(
+  value: unknown,
+): value is { dispatchEvent(event: Event): boolean } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'dispatchEvent' in value &&
+    typeof value.dispatchEvent === 'function'
+  );
+}

package/src/features/graph-view/adapters/inbound/web-artifact/shouldFitGraphAfterLayout.test.ts

@@ -4,14 +4,18 @@ import { shouldFitGraphAfterLayout } from './shouldFitGraphAfterLayout';
 
 describe('shouldFitGraphAfterLayout', () => {
   it('fits the initial layout once', () => {
-    expect(shouldFitGraphAfterLayout(false, false)).toBe(true);
+    expect(shouldFitGraphAfterLayout(false, false, false)).toBe(true);
   });
 
   it('preserves viewport after the graph is ready', () => {
-    expect(shouldFitGraphAfterLayout(true, false)).toBe(false);
+    expect(shouldFitGraphAfterLayout(true, false, false)).toBe(false);
   });
 
   it('fits a changed package depth or filtered topology after readiness', () => {
-    expect(shouldFitGraphAfterLayout(true, true)).toBe(true);
+    expect(shouldFitGraphAfterLayout(true, true, false)).toBe(true);
+  });
+
+  it('fits a newly selected layout algorithm with unchanged topology', () => {
+    expect(shouldFitGraphAfterLayout(true, false, true)).toBe(true);
   });
 });

package/src/features/graph-view/adapters/inbound/web-artifact/shouldFitGraphAfterLayout.ts

@@ -1,4 +1,8 @@
-/*** Fit initial or structurally changed graphs while preserving the viewport across spacing updates. */
-export function shouldFitGraphAfterLayout(ready: boolean, topologyChanged: boolean): boolean {
-  return !ready || topologyChanged;
+/*** Fit initial, topology, or layout-algorithm changes while preserving viewport intent otherwise. */
+export function shouldFitGraphAfterLayout(
+  ready: boolean,
+  topologyChanged: boolean,
+  layoutChanged: boolean,
+): boolean {
+  return !ready || topologyChanged || layoutChanged;
 }

package/src/features/graph-view/constants/events.ts

@@ -0,0 +1,12 @@
+/***
+ * Canonical public GraphView browser lifecycle event names.
+ * Candidate for a shared Ankhorage event strategy: define common naming, typed
+ * payloads and dispatch conventions before extracting a cross-component contract.
+ */
+export const GRAPH_VIEW_EVENTS = {
+  ready: 'zora-graph-view-ready',
+  layoutComplete: 'zora-graph-view-layout-complete',
+} as const;
+
+export type GraphViewDomControllerEventName =
+  (typeof GRAPH_VIEW_EVENTS)[keyof typeof GRAPH_VIEW_EVENTS];

package/src/features/graph-view/public.ts

@@ -1,6 +1,7 @@
 export type {
   GraphViewCallbacks,
   GraphViewController,
+  GraphViewDomControllerEventDetail,
   GraphViewEdge,
   GraphViewElementEvent,
   GraphViewElementEventType,
@@ -18,3 +19,4 @@ export type {
   GraphViewViewport,
 } from '../../types/graph-view';
 export { GraphView } from './adapters/inbound/web-artifact/GraphView';
+export { GRAPH_VIEW_EVENTS } from './constants/events';

package/src/types/graph-view.ts

@@ -94,6 +94,11 @@ export interface GraphViewController {
   zoomBy(factor: number): void;
 }
 
+/*** The browser lifecycle events carry only the existing public graph controller. */
+export interface GraphViewDomControllerEventDetail {
+  readonly controller: GraphViewController;
+}
+
 export interface GraphViewProps {
   readonly nodes: readonly GraphViewNode[];
   readonly edges: readonly GraphViewEdge[];

package/web-dist/components/graph-view/GraphView.d.ts

@@ -10,10 +10,21 @@ import type { GraphViewProps } from './GraphView.types-0';
  * text. Keep padding in styleRules. Compound and rich-node dimensions retain their existing owners.
  * minReadableLabelSize Expand the manual zoom ceiling until plain labels reach this CSS-pixel size.
  * maxFitLabelSize Cap automatic fitting at this plain-label CSS-pixel size, leaving whitespace for tiny graphs.
+ * Browser lifecycle events named by public GRAPH_VIEW_EVENTS bubble from the root
+ * with `detail.controller`: the same public GraphViewController delivered to React.
+ * Browser integrations can call `measureNodes` without accessing the Cytoscape runtime.
+ * The standalone browser artifact exposes the same names as `GraphView.events`.
  * onSpacingFactorChange Receive the spacing accepted by explicit fit({ optimizeSpacing: true }).
  * Ordinary zoom never adjusts spacing or relayouts. Explicit optimization preserves layout ordering,
  * stops once effective fit reaches maxFitLabelSize, keeps labels and unrelated compound boundaries
  * collision-safe, and permits only a small rendered background-overlap fallback for dense graphs.
  */
 export declare function GraphView(props: GraphViewProps): React.JSX.Element;
-export type { GraphViewCallbacks, GraphViewController, GraphViewEdge, GraphViewElementEvent, GraphViewElementEventType, GraphViewFitOptions, GraphViewLayoutName, GraphViewMeasurement, GraphViewNode, GraphViewNodeMeasurement, GraphViewNodeRenderContext, GraphViewPoint, GraphViewProps, GraphViewRenderedNode, GraphViewSize, GraphViewStyleRule, GraphViewViewport } from './GraphView.types-0';
+
+export declare namespace GraphView {
+    var events: {
+        readonly ready: "zora-graph-view-ready";
+        readonly layoutComplete: "zora-graph-view-layout-complete";
+    };
+}
+export type { GraphViewCallbacks, GraphViewController, GraphViewDomControllerEventDetail, GraphViewEdge, GraphViewElementEvent, GraphViewElementEventType, GraphViewFitOptions, GraphViewLayoutName, GraphViewMeasurement, GraphViewNode, GraphViewNodeMeasurement, GraphViewNodeRenderContext, GraphViewPoint, GraphViewProps, GraphViewRenderedNode, GraphViewSize, GraphViewStyleRule, GraphViewViewport } from './GraphView.types-0';

package/web-dist/components/graph-view/GraphView.js

@@ -91964,6 +91964,12 @@ Consider installing the package or pass your own 'workerFactory' to ELK's constr
 // src/features/graph-view/adapters/inbound/web-artifact/GraphView.tsx
 import React2 from "react";
 
+// src/features/graph-view/constants/events.ts
+var GRAPH_VIEW_EVENTS = {
+  ready: "zora-graph-view-ready",
+  layoutComplete: "zora-graph-view-layout-complete"
+};
+
 // node_modules/cytoscape/dist/cytoscape.esm.mjs
 function _arrayLikeToArray(r, a) {
   (a == null || a > r.length) && (a = r.length);
@@ -122730,7 +122736,8 @@ function createGraphController(cy, fitPaddingRef, optimizeFit) {
     readableSize: 0,
     fitSize: Infinity,
     readableZoom: 0,
-    fitZoom: Infinity
+    fitZoom: Infinity,
+    resizeSnapshot: null
   };
   const controller = {
     fit(options) {
@@ -122780,6 +122787,9 @@ function createGraphController(cy, fitPaddingRef, optimizeFit) {
     getReadableZoomTarget() {
       return state.readableZoom;
     },
+    beginResize() {
+      state.resizeSnapshot = captureResizeSnapshot(cy);
+    },
     settle(fit) {
       const logicalZoom = cy.zoom() / state.scale;
       const fonts = cy.nodes().filter((node) => !node.isParent() && Boolean(node.style("label"))).map((node) => Number.parseFloat(String(node.style("font-size")))).filter((size) => Number.isFinite(size) && size > 0);
@@ -122787,15 +122797,66 @@ function createGraphController(cy, fitPaddingRef, optimizeFit) {
       state.fitZoom = fonts.length ? state.fitSize / fonts.reduce((maximum, size) => Math.max(maximum, size), 0) : Infinity;
       state.scale = state.relative ? Math.min(getNodeFitZoom(cy, fitPaddingRef.current), state.fitZoom) : 1;
       applyZoomLimits(cy, state);
-      if (fit)
+      if (fit) {
+        state.resizeSnapshot = null;
+        controller.fit();
+      } else if (settlePreservedViewport(cy, state, logicalZoom))
         controller.fit();
-      else if (state.relative) {
-        setCenteredZoom(cy, logicalZoom * state.scale);
-        cy.center(cy.nodes());
-      }
     }
   };
 }
+function captureResizeSnapshot(cy) {
+  const viewport = { width: cy.width(), height: cy.height() };
+  const zoom = cy.zoom();
+  if (!isUsableViewport(viewport) || !Number.isFinite(zoom) || zoom <= 0)
+    return null;
+  const pan = cy.pan();
+  const renderedCenter = { x: viewport.width / 2, y: viewport.height / 2 };
+  return {
+    center: {
+      x: (renderedCenter.x - pan.x) / zoom,
+      y: (renderedCenter.y - pan.y) / zoom
+    },
+    nodeBounds: getNodeBoundsStatus(cy, viewport)
+  };
+}
+function settlePreservedViewport(cy, state, logicalZoom) {
+  const snapshot = state.resizeSnapshot;
+  state.resizeSnapshot = null;
+  const zoom = state.relative ? logicalZoom * state.scale : cy.zoom();
+  if (snapshot === null) {
+    if (state.relative)
+      setCenteredZoom(cy, zoom);
+    return false;
+  }
+  const viewport = { width: cy.width(), height: cy.height() };
+  if (!isUsableViewport(viewport))
+    return false;
+  cy.viewport({
+    zoom,
+    pan: {
+      x: viewport.width / 2 - snapshot.center.x * zoom,
+      y: viewport.height / 2 - snapshot.center.y * zoom
+    }
+  });
+  const nodeBounds = getNodeBoundsStatus(cy, viewport);
+  return nodeBounds === "unusable" || snapshot.nodeBounds === "fit" && nodeBounds === "clipped";
+}
+function getNodeBoundsStatus(cy, viewport) {
+  if (cy.nodes().empty())
+    return "empty";
+  if (!isUsableViewport(viewport))
+    return "unusable";
+  const bounds = cy.nodes().renderedBoundingBox();
+  if (![bounds.x1, bounds.x2, bounds.y1, bounds.y2].every(Number.isFinite))
+    return "unusable";
+  const fitsHorizontally = bounds.x1 >= 0 && bounds.x2 <= viewport.width;
+  const fitsVertically = bounds.y1 >= 0 && bounds.y2 <= viewport.height;
+  return fitsHorizontally && fitsVertically ? "fit" : "clipped";
+}
+function isUsableViewport(viewport) {
+  return Number.isFinite(viewport.width) && Number.isFinite(viewport.height) && viewport.width > 0 && viewport.height > 0;
+}
 function measureRenderedNodes(cy, nodeIds) {
   const viewport = { width: cy.width(), height: cy.height() };
   if (viewport.width <= 0 || viewport.height <= 0 || nodeIds.length === 0)
@@ -122894,31 +122955,62 @@ function createGraphResizeObserver(input) {
   if (Observer === null)
     return null;
   const sizeRef = { height: -1, width: -1 };
+  const pendingLayoutResizeRef = { current: false };
+  const pendingResizeSnapshotRef = { current: false };
+  const resizeScheduledRef = { current: false };
   const observer = new Observer((entries) => {
     const entry = entries.at(0);
     if (entry === undefined || !hasSizeChanged(sizeRef, entry.contentRect))
       return;
     sizeRef.height = entry.contentRect.height;
     sizeRef.width = entry.contentRect.width;
-    if (input.layoutRunningRef.current)
-      return;
     if (!input.readyRef.current && !input.pendingInitialFitRef.current)
       return;
-    scheduleResizeFit(input);
+    captureResizeSnapshot2(input, pendingResizeSnapshotRef);
+    if (input.layoutRunningRef.current) {
+      pendingLayoutResizeRef.current = true;
+      return;
+    }
+    scheduleResizeFit(input, pendingLayoutResizeRef, pendingResizeSnapshotRef, resizeScheduledRef);
   });
   observer.observe(input.container);
-  return observer;
+  return {
+    disconnect: () => observer.disconnect(),
+    flushAfterLayout: () => flushAfterLayout(input, pendingLayoutResizeRef, pendingResizeSnapshotRef)
+  };
+}
+function captureResizeSnapshot2(input, pendingResizeSnapshotRef) {
+  if (pendingResizeSnapshotRef.current)
+    return;
+  input.beginViewportResize();
+  pendingResizeSnapshotRef.current = true;
+}
+function flushAfterLayout(input, pendingLayoutResizeRef, pendingResizeSnapshotRef) {
+  if (!pendingLayoutResizeRef.current || input.cy.destroyed() || input.layoutRunningRef.current)
+    return;
+  pendingLayoutResizeRef.current = false;
+  pendingResizeSnapshotRef.current = false;
+  input.cy.resize();
 }
-function scheduleResizeFit(input) {
+function scheduleResizeFit(input, pendingLayoutResizeRef, pendingResizeSnapshotRef, resizeScheduledRef) {
+  if (resizeScheduledRef.current)
+    return;
+  resizeScheduledRef.current = true;
   scheduleGraphFrame(() => {
-    if (input.cy.destroyed() || input.layoutRunningRef.current)
+    resizeScheduledRef.current = false;
+    if (input.cy.destroyed())
+      return;
+    if (input.layoutRunningRef.current) {
+      pendingLayoutResizeRef.current = true;
       return;
+    }
     input.cy.resize();
     if (input.cy.width() <= 0 || input.cy.height() <= 0)
       return;
+    pendingResizeSnapshotRef.current = false;
     const completedPendingInitialFit = input.pendingInitialFitRef.current;
     input.pendingInitialFitRef.current = false;
-    input.settleViewport();
+    input.settleViewport(completedPendingInitialFit);
     input.onViewportSettled(completedPendingInitialFit);
   });
 }
@@ -123227,8 +123319,8 @@ function stopGraphLayout(layout, handleStop) {
 }
 
 // src/features/graph-view/adapters/inbound/web-artifact/shouldFitGraphAfterLayout.ts
-function shouldFitGraphAfterLayout(ready, topologyChanged) {
-  return !ready || topologyChanged;
+function shouldFitGraphAfterLayout(ready, topologyChanged, layoutChanged) {
+  return !ready || topologyChanged || layoutChanged;
 }
 
 // src/features/graph-view/adapters/inbound/web-artifact/sizeGraphNodesToLabels.ts
@@ -123378,6 +123470,7 @@ function createRuntimeState(cy, container, callbacksRef) {
     loopSizer: createGraphLoopSizer(cy),
     pendingInitialFitRef: { current: false },
     readyRef,
+    settledLayoutRef: { current: null },
     settledTopologyRef: { current: null },
     relayoutScheduledRef: { current: false },
     renderedNodeListeners
@@ -123386,7 +123479,8 @@ function createRuntimeState(cy, container, callbacksRef) {
   const resizeObserver = createGraphResizeObserver({
     container,
     cy,
-    settleViewport: () => viewport.settle(true),
+    beginViewportResize: () => viewport.beginResize(),
+    settleViewport: (fit) => viewport.settle(fit),
     layoutRunningRef,
     pendingInitialFitRef: stateBase.pendingInitialFitRef,
     onViewportSettled: (completedPendingInitialFit) => {
@@ -123462,6 +123556,7 @@ function completeCurrentLayout(state, generation) {
     state.layoutRef.current = null;
     state.cy.resize();
     state.layoutRunningRef.current = false;
+    state.resizeObserver?.flushAfterLayout();
     if (!hasUsableViewport(state.cy)) {
       if (!state.readyRef.current)
         state.pendingInitialFitRef.current = true;
@@ -123472,8 +123567,9 @@ function completeCurrentLayout(state, generation) {
     if (input === null)
       return;
     const topology = getGraphTopologyKey(input.nodes, input.edges);
-    const shouldFit = shouldFitGraphAfterLayout(state.readyRef.current, topology !== state.settledTopologyRef.current);
+    const shouldFit = shouldFitGraphAfterLayout(state.readyRef.current, topology !== state.settledTopologyRef.current, input.layout !== state.settledLayoutRef.current);
     state.viewport.settle(shouldFit);
+    state.settledLayoutRef.current = input.layout;
     state.settledTopologyRef.current = topology;
     const fitRequest = state.fitRequestRef.current;
     state.fitRequestRef.current = null;
@@ -123615,6 +123711,33 @@ function destroyRuntime(state) {
 }
 registerGraphLayouts();
 
+// src/features/graph-view/adapters/inbound/web-artifact/createGraphViewDomCallbacks.ts
+function createGraphViewDomCallbacks(callbacks, hostRef) {
+  return {
+    ...callbacks,
+    onReady(controller) {
+      callbacks.onReady?.(controller);
+      dispatchGraphViewControllerEvent(hostRef, GRAPH_VIEW_EVENTS.ready, controller);
+    },
+    onLayoutComplete(controller) {
+      callbacks.onLayoutComplete?.(controller);
+      dispatchGraphViewControllerEvent(hostRef, GRAPH_VIEW_EVENTS.layoutComplete, controller);
+    }
+  };
+}
+function dispatchGraphViewControllerEvent(hostRef, name, controller) {
+  const host = hostRef.current;
+  if (!canDispatchBrowserEvent(host))
+    return;
+  host.dispatchEvent(new CustomEvent(name, {
+    bubbles: true,
+    detail: { controller }
+  }));
+}
+function canDispatchBrowserEvent(value) {
+  return typeof value === "object" && value !== null && "dispatchEvent" in value && typeof value.dispatchEvent === "function";
+}
+
 // src/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.tsx
 import React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -123700,8 +123823,10 @@ function readResizeObserverConstructor2() {
 // src/features/graph-view/adapters/inbound/web-artifact/GraphView.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function GraphView(props) {
-  const { containerRef, renderedNodes, runtimeRef } = useGraphViewRuntime(props);
+  const hostRef = React2.useRef(null);
+  const { containerRef, renderedNodes, runtimeRef } = useGraphViewRuntime(props, hostRef);
   return /* @__PURE__ */ jsxs("div", {
+    ref: hostRef,
     "aria-label": props.ariaLabel ?? "Graph",
     className: props.className,
     role: "application",
@@ -123728,10 +123853,11 @@ function GraphView(props) {
     ]
   });
 }
-function useGraphViewRuntime(props) {
+GraphView.events = GRAPH_VIEW_EVENTS;
+function useGraphViewRuntime(props, hostRef) {
   const containerRef = React2.useRef(null);
   const runtimeRef = React2.useRef(null);
-  const callbacksRef = useGraphCallbacksRef(props);
+  const callbacksRef = useGraphCallbacksRef(props, hostRef);
   const [renderedNodes, setRenderedNodes] = React2.useState([]);
   useRuntimeLifecycle(containerRef, runtimeRef, callbacksRef);
   useRuntimeGraphUpdate(runtimeRef, props);
@@ -123740,8 +123866,8 @@ function useGraphViewRuntime(props) {
   useKnownNodeSizes(runtimeRef, props.nodes, props.getNodeSize);
   return { containerRef, renderedNodes, runtimeRef };
 }
-function useGraphCallbacksRef(props) {
-  const callbacksRef = React2.useRef(readCallbacks(props));
+function useGraphCallbacksRef(props, hostRef) {
+  const callbacksRef = React2.useRef(createGraphViewDomCallbacks(readCallbacks(props), hostRef));
   const {
     onEdgeEvent,
     onLayoutComplete,
@@ -123751,21 +123877,22 @@ function useGraphCallbacksRef(props) {
     onSpacingFactorChange
   } = props;
   React2.useEffect(() => {
-    callbacksRef.current = {
+    callbacksRef.current = createGraphViewDomCallbacks({
       onEdgeEvent,
       onLayoutComplete,
       onNodeEvent,
       onReady,
       onViewportChange,
       onSpacingFactorChange
-    };
+    }, hostRef);
   }, [
     onEdgeEvent,
     onLayoutComplete,
     onNodeEvent,
     onReady,
     onViewportChange,
-    onSpacingFactorChange
+    onSpacingFactorChange,
+    hostRef
   ]);
   return callbacksRef;
 }

package/web-dist/components/graph-view/GraphView.types-0.d.ts

@@ -81,6 +81,10 @@ export interface GraphViewController {
     setZoom(zoom: number): void;
     zoomBy(factor: number): void;
 }
+/*** The browser lifecycle events carry only the existing public graph controller. */
+export interface GraphViewDomControllerEventDetail {
+    readonly controller: GraphViewController;
+}
 export interface GraphViewProps {
     readonly nodes: readonly GraphViewNode[];
     readonly edges: readonly GraphViewEdge[];