solid-recharts 0.1.0

package/src/state/zIndexSlice.ts

@@ -0,0 +1,128 @@
+// Ported from recharts 3.8.1 src/state/zIndexSlice.ts (commit 7a23854).
+// FULL SOLID-NATIVE REWRITE (no Redux/immer). Registry of z-index -> element refs
+// used to portal components at each z-index. Z-index layering is wired into the
+// store so chart items can render through ZIndexLayer.
+import { createStore } from "solid-js";
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
+
+type ZIndexEntry = {
+  /**
+   * DOM element backing this z-index (used to portal components here). `undefined`
+   * means registration is in progress -- wait for the next render cycle.
+   */
+  element: Element | undefined;
+  /**
+   * Panorama items render in a different SVG element, so they need a separate
+   * element reference from normal items at the same z-index.
+   */
+  panoramaElement: Element | undefined;
+  consumers: number;
+};
+
+export type ZIndexState = {
+  zIndexMap: Record<number, ZIndexEntry>;
+};
+
+function buildInitialMap(): Record<number, ZIndexEntry> {
+  const map: Record<number, ZIndexEntry> = {};
+  for (const z of Object.values(DefaultZIndexes)) {
+    map[z] = { element: undefined, panoramaElement: undefined, consumers: 0 };
+  }
+  return map;
+}
+
+export const initialZIndexState: ZIndexState = {
+  zIndexMap: buildInitialMap(),
+};
+
+const defaultZIndexSet = new Set<number>(Object.values(DefaultZIndexes));
+function isDefaultZIndex(zIndex: number): boolean {
+  return defaultZIndexSet.has(zIndex);
+}
+
+export interface ZIndexActions {
+  registerZIndexPortal(payload: { zIndex: number }): void;
+  unregisterZIndexPortal(payload: { zIndex: number }): void;
+  registerZIndexPortalElement(payload: {
+    zIndex: number;
+    element: Element;
+    isPanorama: boolean;
+  }): void;
+  unregisterZIndexPortalElement(payload: { zIndex: number; isPanorama: boolean }): void;
+}
+
+export interface ZIndexSlice {
+  readonly state: ZIndexState;
+  readonly actions: ZIndexActions;
+}
+
+export function createZIndexSlice(initialState: ZIndexState = initialZIndexState): ZIndexSlice {
+  // Deep-copy the entries: a shallow `{ ...initialState.zIndexMap }` would make
+  // every chart's store wrap the SAME module-level ZIndexEntry objects from
+  // `initialZIndexState`, so one chart registering its portal <g> would
+  // overwrite every other chart's portal element (graphical items then portal
+  // into a different chart's svg).
+  const [state, setState] = createStore<ZIndexState>({
+    zIndexMap: Object.fromEntries(
+      Object.entries(initialState.zIndexMap).map(([z, entry]) => [z, { ...entry }]),
+    ),
+  });
+
+  const actions: ZIndexActions = {
+    registerZIndexPortal({ zIndex }) {
+      setState((s) => {
+        const entry = s.zIndexMap[zIndex];
+        if (entry) {
+          entry.consumers += 1;
+        } else {
+          s.zIndexMap[zIndex] = { consumers: 1, element: undefined, panoramaElement: undefined };
+        }
+      });
+    },
+    unregisterZIndexPortal({ zIndex }) {
+      setState((s) => {
+        const entry = s.zIndexMap[zIndex];
+        if (entry) {
+          entry.consumers -= 1;
+          // Garbage-collect unused entries, except default z-indexes (always
+          // rendered, so their portal provider stays mounted and won't re-register).
+          if (entry.consumers <= 0 && !isDefaultZIndex(zIndex)) {
+            delete s.zIndexMap[zIndex];
+          }
+        }
+      });
+    },
+    registerZIndexPortalElement({ zIndex, element, isPanorama }) {
+      setState((s) => {
+        const entry = s.zIndexMap[zIndex];
+        if (entry) {
+          if (isPanorama) {
+            entry.panoramaElement = element;
+          } else {
+            entry.element = element;
+          }
+        } else {
+          s.zIndexMap[zIndex] = {
+            consumers: 0,
+            element: isPanorama ? undefined : element,
+            panoramaElement: isPanorama ? element : undefined,
+          };
+        }
+      });
+    },
+    unregisterZIndexPortalElement({ zIndex, isPanorama }) {
+      setState((s) => {
+        const entry = s.zIndexMap[zIndex];
+        if (entry) {
+          if (isPanorama) {
+            entry.panoramaElement = undefined;
+          } else {
+            entry.element = undefined;
+          }
+        }
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/synchronisation/syncRegistry.ts

@@ -0,0 +1,131 @@
+// Solid-native cross-chart synchronisation registry.
+//
+// recharts 3.8.1 synchronises charts through a global mitt `eventCenter`
+// (`src/util/Events.ts`): on every tooltip/brush interaction a chart emits a
+// `TOOLTIP_SYNC_EVENT`/`BRUSH_SYNC_EVENT` carrying `(syncId, action, emitter)`,
+// and every chart subscribes to the same bus and filters by `syncId`/`emitter`.
+// The Solid-native rewrite has NO Redux and intentionally NO mitt — but a module
+// -level pub/sub registry is still the right shape for many-to-many cross-chart
+// communication (each chart's store is an island; there is no shared reactive
+// owner). This is a tiny synchronous emitter keyed by event name, deliberately
+// mirroring the recharts `eventCenter` API surface (`on`/`off`/`emit`) so the
+// behaviour — "send one event, every other subscriber receives it synchronously"
+// — is identical, and so the vendored synchronisation specs port faithfully.
+//
+// Deviations from recharts:
+//  - The payload is the *plain* `TooltipSyncState` object (recharts wraps it in a
+//    Redux `PayloadAction` via `setSyncInteraction(payload)`; here
+//    `setSyncInteraction` is a void store mutator, so the registry carries the
+//    payload directly and receivers call `store.actions.tooltip.setSyncInteraction`).
+//  - Emission happens from component effects (not a Redux middleware). Writes into
+//    a receiver's store therefore go through the store's batched setter; the
+//    registry itself holds no reactive state, so subscribing/emitting never reads
+//    or writes a tracked scope (no STRICT_READ / SIGNAL_WRITE_IN_OWNED_SCOPE).
+import { BrushStartEndIndex } from "../context/brushUpdateContext";
+import { TooltipSyncState } from "../state/tooltipSlice";
+
+export const TOOLTIP_SYNC_EVENT = "recharts.syncEvent.tooltip";
+export const BRUSH_SYNC_EVENT = "recharts.syncEvent.brush";
+
+export type SyncId = number | string;
+
+export type TooltipSyncListener = (
+  syncId: SyncId,
+  payload: TooltipSyncState,
+  emitter: symbol,
+) => void;
+
+export type BrushSyncListener = (
+  syncId: SyncId,
+  payload: BrushStartEndIndex,
+  emitter: symbol,
+) => void;
+
+// Two separately-typed listener sets — one per event. The public methods below
+// are typed via overloads (faithful to recharts' eventCenter signature); their
+// shared implementation narrows on `eventName`, but TypeScript can't co-narrow
+// the listener/payload param from that runtime check, so each branch keeps one
+// localized assertion (the repo's convention for unavoidable narrowing).
+const tooltipListeners = new Set<TooltipSyncListener>();
+const brushListeners = new Set<BrushSyncListener>();
+
+type AnyListener = TooltipSyncListener | BrushSyncListener;
+type AnyPayload = TooltipSyncState | BrushStartEndIndex;
+
+// Copy first so a listener that unsubscribes during dispatch doesn't mutate the
+// set we're iterating (matches mitt's array-snapshot semantics).
+function snapshot<L>(set: Set<L>): ReadonlyArray<L> {
+  return Array.from(set);
+}
+
+/**
+ * Overloaded surface of the bus. Interface declarations may carry method
+ * overloads (object-literal methods may not — the toolchain's formatter rejects
+ * them), so the typed `on`/`off`/`emit` overloads live here and the concrete
+ * object below is annotated with this type.
+ */
+interface SyncEventCenter {
+  on(eventName: typeof TOOLTIP_SYNC_EVENT, listener: TooltipSyncListener): void;
+  on(eventName: typeof BRUSH_SYNC_EVENT, listener: BrushSyncListener): void;
+  off(eventName: typeof TOOLTIP_SYNC_EVENT, listener: TooltipSyncListener): void;
+  off(eventName: typeof BRUSH_SYNC_EVENT, listener: BrushSyncListener): void;
+  emit(
+    eventName: typeof TOOLTIP_SYNC_EVENT,
+    syncId: SyncId,
+    payload: TooltipSyncState,
+    emitter: symbol,
+  ): void;
+  emit(
+    eventName: typeof BRUSH_SYNC_EVENT,
+    syncId: SyncId,
+    payload: BrushStartEndIndex,
+    emitter: symbol,
+  ): void;
+}
+
+type SyncEventName = typeof TOOLTIP_SYNC_EVENT | typeof BRUSH_SYNC_EVENT;
+
+/**
+ * The cross-chart synchronisation bus. Mirrors the `on`/`off`/`emit` surface of
+ * recharts' mitt `eventCenter` so synchronisation logic and tests read 1:1, but
+ * is a plain synchronous emitter with no reactive graph of its own.
+ *
+ * The event-name argument comes first (`on(TOOLTIP_SYNC_EVENT, …)`) for 1:1
+ * parity with recharts' eventCenter call sites and the vendored specs. The
+ * shared implementations narrow on `eventName`; TypeScript can't co-narrow the
+ * listener/payload param from that runtime check, so each branch keeps one
+ * localized assertion (the repo's convention for unavoidable narrowing).
+ */
+export const syncEventCenter: SyncEventCenter = {
+  on(eventName: SyncEventName, listener: AnyListener): void {
+    if (eventName === TOOLTIP_SYNC_EVENT) {
+      // eslint-disable-next-line typescript/consistent-type-assertions -- narrowed by eventName
+      tooltipListeners.add(listener as TooltipSyncListener);
+    } else {
+      // eslint-disable-next-line typescript/consistent-type-assertions -- narrowed by eventName
+      brushListeners.add(listener as BrushSyncListener);
+    }
+  },
+  off(eventName: SyncEventName, listener: AnyListener): void {
+    if (eventName === TOOLTIP_SYNC_EVENT) {
+      // eslint-disable-next-line typescript/consistent-type-assertions -- narrowed by eventName
+      tooltipListeners.delete(listener as TooltipSyncListener);
+    } else {
+      // eslint-disable-next-line typescript/consistent-type-assertions -- narrowed by eventName
+      brushListeners.delete(listener as BrushSyncListener);
+    }
+  },
+  emit(eventName: SyncEventName, syncId: SyncId, payload: AnyPayload, emitter: symbol): void {
+    if (eventName === TOOLTIP_SYNC_EVENT) {
+      for (const listener of snapshot(tooltipListeners)) {
+        // eslint-disable-next-line typescript/consistent-type-assertions -- narrowed by eventName
+        listener(syncId, payload as TooltipSyncState, emitter);
+      }
+      return;
+    }
+    for (const listener of snapshot(brushListeners)) {
+      // eslint-disable-next-line typescript/consistent-type-assertions -- narrowed by eventName
+      listener(syncId, payload as BrushStartEndIndex, emitter);
+    }
+  },
+};

package/src/synchronisation/syncSelectors.ts

@@ -0,0 +1,7 @@
+// Ported from recharts 3.8.1 src/synchronisation/syncSelectors.ts (commit 7a23854).
+import { RechartsRootState } from "../state/store";
+import { TooltipSyncState } from "../state/tooltipSlice";
+
+export function selectSynchronisedTooltipState(state: RechartsRootState): TooltipSyncState {
+  return state.tooltip.syncInteraction;
+}

package/src/synchronisation/types.ts

@@ -0,0 +1,42 @@
+// Ported from recharts 3.8.1 src/synchronisation/types.ts (commit 7a23854).
+// Canonical home for SyncMethod (util/types re-exports it; the earlier seed there
+// is now re-homed here). Deviation: `DataKey<any>` → `DataKey<unknown>` (no any).
+import { Coordinate, DataKey, TickItem } from "../util/types";
+import { TooltipIndex } from "../state/tooltipSlice";
+
+export type ActiveLabel = string | number | undefined;
+
+/**
+ * Despite the name, this type is used for all event types, not just mouse events.
+ */
+export type MouseHandlerDataParam = {
+  /**
+   * Index of the active tick in the current chart. Only works with number-indexed
+   * one-dimensional data charts (Line, Area, Bar, Pie, …), not two-dimensional
+   * ones (Treemap, Sankey) — though one day it will, hence the TooltipIndex type.
+   */
+  activeTooltipIndex: number | TooltipIndex | undefined;
+  isTooltipActive: boolean;
+  /**
+   * Exactly the same as activeTooltipIndex — duplicated in recharts@2 too, kept
+   * for backwards compatibility.
+   */
+  activeIndex: number | TooltipIndex | undefined;
+  /** The category or domain value of the active tooltip entry. */
+  activeLabel: ActiveLabel;
+  activeDataKey: DataKey<unknown> | undefined;
+  activeCoordinate: Coordinate | undefined;
+};
+
+/**
+ * Customises how charts synchronize tooltips and brushes. Default: `index`.
+ *
+ * - `index`: other charts reuse the current datum's index within the data array.
+ * - `value`: try to match other charts' values.
+ * - custom function: receives the current chart's ticks and the other chart's
+ *   active tooltip state, and returns the active tick index in the current chart.
+ */
+export type SyncMethod =
+  | "index"
+  | "value"
+  | ((ticks: ReadonlyArray<TickItem>, data: MouseHandlerDataParam) => number);

package/src/synchronisation/useChartSynchronisation.tsx

@@ -0,0 +1,372 @@
+// Ported from recharts 3.8.1 src/synchronisation/useChartSynchronisation.tsx
+// (commit 7a23854) to Solid 2.0.
+//
+// recharts wires three React `useEffect`s onto the mitt `eventCenter`:
+//   - emit a TOOLTIP_SYNC_EVENT whenever the local active tooltip changes,
+//   - listen for TOOLTIP_SYNC_EVENTs from OTHER charts and project them onto this
+//     chart's axes per `syncMethod`,
+//   - the same pair for brush start/end indexes.
+// The Solid port keeps the exact same semantics but over `syncEventCenter`
+// (`syncRegistry.ts`, a plain synchronous bus) and Solid `createEffect`s.
+//
+// Reactivity notes (diagnostics-clean):
+//  - Each effect uses the two-arg `createEffect(deps, effect)` form: the first
+//    function tracks the reactive inputs and returns them as a tuple, the second
+//    runs the side effect (subscribe/emit). Reads inside the side-effect callback
+//    are therefore not tracked, and we never write a *local* signal there — emits
+//    only call OTHER charts' batched store setters via the registry, which is the
+//    sanctioned cross-store write path (no SIGNAL_WRITE_IN_OWNED_SCOPE).
+//  - The listener calls `store.actions.tooltip.setSyncInteraction(...)` +
+//    `flush()` on the RECEIVING chart's store; that store is a different owner, so
+//    the write is not "in an owned computation" of the emitting effect.
+import { createEffect, flush, untrack } from "solid-js";
+import { useAppStore } from "../state/hooks";
+import {
+  selectEventEmitter,
+  selectSyncId,
+  selectSyncMethod,
+} from "../state/selectors/rootPropsSelectors";
+import {
+  selectActiveTooltipGraphicalItemId,
+  selectTooltipAxisTicks,
+  selectTooltipDataKey,
+} from "../state/selectors/tooltipSelectors";
+import { selectChartLayout, useViewBox } from "../context/chartLayoutContext";
+import { Coordinate, TickItem, TooltipEventType } from "../util/types";
+import { TooltipTrigger } from "../chart/types";
+import { TooltipIndex, TooltipSyncState } from "../state/tooltipSlice";
+import { ActiveLabel, MouseHandlerDataParam } from "./types";
+import { BrushStartEndIndex } from "../context/brushUpdateContext";
+import { BRUSH_SYNC_EVENT, SyncId, TOOLTIP_SYNC_EVENT, syncEventCenter } from "./syncRegistry";
+import type { RechartsStore } from "../state/store";
+
+const inactiveSyncState: TooltipSyncState = {
+  active: false,
+  coordinate: undefined,
+  dataKey: undefined,
+  index: null,
+  label: undefined,
+  sourceViewBox: undefined,
+  graphicalItemId: undefined,
+};
+
+/**
+ * Listens for tooltip sync events from other charts and writes the appropriate
+ * sync interaction state based on this chart's `syncMethod`. Mirrors recharts'
+ * `useTooltipSyncEventsListener` 1:1.
+ */
+function useTooltipSyncEventsListener(store: RechartsStore): void {
+  const viewBox = useViewBox();
+
+  createEffect(
+    () => {
+      const mySyncId = selectSyncId(store.state);
+      const myEventEmitter = selectEventEmitter(store.state);
+      const syncMethod = selectSyncMethod(store.state);
+      const tooltipTicks = selectTooltipAxisTicks(store.state);
+      const layout = selectChartLayout(store.state);
+      const box = viewBox();
+      return { mySyncId, myEventEmitter, syncMethod, tooltipTicks, layout, box };
+    },
+    ({ mySyncId, myEventEmitter, syncMethod, tooltipTicks, layout, box }) => {
+      if (mySyncId == null) {
+        // Not synchronised with any other chart — nothing to listen for.
+        return;
+      }
+
+      const listener = (
+        incomingSyncId: SyncId,
+        payload: TooltipSyncState,
+        emitter: symbol,
+      ): void => {
+        if (myEventEmitter === emitter) {
+          // Don't react to our own emissions.
+          return;
+        }
+        if (mySyncId !== incomingSyncId) {
+          // Not for this chart.
+          return;
+        }
+
+        // Source deactivation (mouseLeave) clears state for ALL sync methods,
+        // including sourceViewBox so emission can resume.
+        if (payload.active === false) {
+          store.actions.tooltip.setSyncInteraction(inactiveSyncState);
+          flush();
+          return;
+        }
+
+        if (syncMethod === "index") {
+          if (box && payload.coordinate && payload.sourceViewBox) {
+            const { coordinate } = payload;
+            const { x, y } = coordinate;
+            const {
+              x: sourceX,
+              y: sourceY,
+              width: sourceWidth,
+              height: sourceHeight,
+            } = payload.sourceViewBox;
+            const scaledCoordinate: Coordinate = {
+              ...coordinate,
+              x: box.x + (sourceWidth ? (x - sourceX) / sourceWidth : 0) * box.width,
+              y: box.y + (sourceHeight ? (y - sourceY) / sourceHeight : 0) * box.height,
+            };
+            store.actions.tooltip.setSyncInteraction({
+              ...payload,
+              coordinate: scaledCoordinate,
+            });
+          } else {
+            store.actions.tooltip.setSyncInteraction(payload);
+          }
+          flush();
+          return;
+        }
+
+        if (tooltipTicks == null) {
+          // 'value'/function need ticks.
+          return;
+        }
+
+        let activeTick: TickItem | undefined;
+        if (typeof syncMethod === "function") {
+          const syncMethodParam: MouseHandlerDataParam = {
+            activeTooltipIndex: payload.index == null ? undefined : Number(payload.index),
+            isTooltipActive: payload.active,
+            activeIndex: payload.index == null ? undefined : Number(payload.index),
+            activeLabel: payload.label,
+            activeDataKey: payload.dataKey,
+            activeCoordinate: payload.coordinate,
+          };
+          const activeTooltipIndex = syncMethod(tooltipTicks, syncMethodParam);
+          activeTick = tooltipTicks[activeTooltipIndex];
+        } else if (syncMethod === "value") {
+          activeTick = tooltipTicks.find((tick) => String(tick.value) === payload.label);
+        }
+
+        const { coordinate } = payload;
+        if (coordinate == null || box == null) {
+          store.actions.tooltip.setSyncInteraction(inactiveSyncState);
+          flush();
+          return;
+        }
+
+        if (activeTick == null) {
+          // No matching tick (sparse data): hide locally but KEEP sourceViewBox so
+          // the emission guard still sees us as "receiving" (no counter-cascade).
+          store.actions.tooltip.setSyncInteraction({
+            ...inactiveSyncState,
+            sourceViewBox: payload.sourceViewBox,
+          });
+          flush();
+          return;
+        }
+
+        const validateChartX = Math.min(coordinate.x, box.x + box.width);
+        const validateChartY = Math.min(coordinate.y, box.y + box.height);
+        const activeCoordinate: Coordinate = {
+          x: layout === "horizontal" ? activeTick.coordinate : validateChartX,
+          y: layout === "horizontal" ? validateChartY : activeTick.coordinate,
+        };
+
+        store.actions.tooltip.setSyncInteraction({
+          active: payload.active,
+          coordinate: activeCoordinate,
+          dataKey: payload.dataKey,
+          index: String(activeTick.index),
+          label: payload.label,
+          sourceViewBox: payload.sourceViewBox,
+          graphicalItemId: payload.graphicalItemId,
+        });
+        flush();
+      };
+
+      syncEventCenter.on(TOOLTIP_SYNC_EVENT, listener);
+      // The effect (apply) callback is a leaf scope — return cleanup, don't call
+      // onCleanup (which would warn NO_OWNER_CLEANUP). Runs before the next apply.
+      return () => {
+        syncEventCenter.off(TOOLTIP_SYNC_EVENT, listener);
+      };
+    },
+  );
+}
+
+/**
+ * Listens for brush sync events from other charts and keeps this chart's data
+ * start/end indexes in step. Mirrors recharts' `useBrushSyncEventsListener`.
+ */
+function useBrushSyncEventsListener(store: RechartsStore): void {
+  createEffect(
+    () => {
+      const mySyncId = selectSyncId(store.state);
+      const myEventEmitter = selectEventEmitter(store.state);
+      return { mySyncId, myEventEmitter };
+    },
+    ({ mySyncId, myEventEmitter }) => {
+      if (mySyncId == null) {
+        return;
+      }
+      const listener = (
+        incomingSyncId: SyncId,
+        payload: BrushStartEndIndex,
+        emitter: symbol,
+      ): void => {
+        if (myEventEmitter === emitter) {
+          return;
+        }
+        if (mySyncId === incomingSyncId) {
+          store.actions.chartData.setDataStartEndIndexes(payload);
+          flush();
+        }
+      };
+      syncEventCenter.on(BRUSH_SYNC_EVENT, listener);
+      return () => {
+        syncEventCenter.off(BRUSH_SYNC_EVENT, listener);
+      };
+    },
+  );
+}
+
+/**
+ * Wires this chart up to RECEIVE synchronisation events from other charts.
+ * Creates the chart's event-emitter symbol (used to ignore its own emissions)
+ * and registers the tooltip + brush listeners. No-op outside a chart.
+ */
+export function useSynchronisedEventsFromOtherCharts(): void {
+  const store = useAppStore();
+  if (store == null) {
+    return;
+  }
+  // recharts dispatches `createEventEmitter` from a useEffect; do the same via the
+  // two-arg createEffect (the effect callback runs in the effect phase, NOT the
+  // owned component scope — a direct setup-time write trips SIGNAL_WRITE_IN_OWNED
+  // _SCOPE). Effects flush in creation order, so the symbol is set before the
+  // emit effect (created later, in the Tooltip) first runs.
+  createEffect(
+    () => undefined,
+    () => store.actions.options.createEventEmitter(),
+  );
+  useTooltipSyncEventsListener(store);
+  useBrushSyncEventsListener(store);
+}
+
+/**
+ * EMITS tooltip sync events to other charts when this chart's active tooltip
+ * changes. Mirrors recharts' `useTooltipChartSynchronisation`.
+ *
+ * Emission is suppressed while `isReceivingSynchronisation` (a non-null
+ * `sourceViewBox` on the local sync state) to avoid feedback loops / cascading
+ * tooltip clears across charts with mismatched data.
+ *
+ * @param tooltipEventType resolved by the Tooltip
+ * @param trigger resolved by the Tooltip
+ * @param activeCoordinate from local interaction state
+ * @param activeLabel from local interaction state
+ * @param activeIndex from local interaction state
+ * @param isTooltipActive from local interaction state
+ */
+export function useTooltipChartSynchronisation(
+  tooltipEventType: () => TooltipEventType | undefined,
+  trigger: () => TooltipTrigger,
+  activeCoordinate: () => Coordinate | undefined,
+  activeLabel: () => ActiveLabel,
+  activeIndex: () => TooltipIndex | undefined,
+  isTooltipActive: () => boolean,
+): void {
+  const store = useAppStore();
+  if (store == null) {
+    return;
+  }
+  const viewBox = useViewBox();
+
+  // recharts dedupes via React's referential effect-dep comparison; its viewBox
+  // memo is reference-stable across renders. Here `selectChartViewBox` returns a
+  // fresh object each compute, so the effect can re-run with an unchanged payload
+  // — guard against emitting an identical sync state twice in a row.
+  let lastEmitted: string | undefined;
+
+  createEffect(
+    () => {
+      // Build the *plain* (snapshotted) payload in the COMPUTE phase, where store
+      // reads track and STRICT_READ_UNTRACKED doesn't apply. The apply phase then
+      // only emits — it never reads store proxies (which would warn).
+      const eventEmitterSymbol = selectEventEmitter(store.state);
+      const syncId = selectSyncId(store.state);
+      const tooltipState = store.state.tooltip.syncInteraction;
+      // sourceViewBox (not `active`) flags that we're currently RECEIVING sync.
+      const isReceivingSynchronisation = tooltipState.sourceViewBox != null;
+
+      const box = viewBox();
+      const rawCoordinate = activeCoordinate();
+      const rawLabel = activeLabel();
+      const payload: TooltipSyncState = {
+        active: isTooltipActive(),
+        coordinate: rawCoordinate == null ? undefined : { ...rawCoordinate },
+        dataKey: selectTooltipDataKey(store.state, tooltipEventType(), trigger()),
+        index: activeIndex() ?? null,
+        label: typeof rawLabel === "number" ? String(rawLabel) : rawLabel,
+        sourceViewBox: box == null ? undefined : { ...box },
+        graphicalItemId: selectActiveTooltipGraphicalItemId(store.state),
+      };
+      return { eventEmitterSymbol, syncId, isReceivingSynchronisation, payload };
+    },
+    ({ eventEmitterSymbol, syncId, isReceivingSynchronisation, payload }) => {
+      if (isReceivingSynchronisation) {
+        // Receiving sync — don't echo events back out.
+        return;
+      }
+      if (syncId == null) {
+        // Not synchronised.
+        return;
+      }
+      if (eventEmitterSymbol == null) {
+        // Used outside a chart context — bail silently.
+        return;
+      }
+      // Dedupe identical consecutive emissions (see lastEmitted note above). The
+      // payload is already a plain snapshot, so stringifying it here is safe.
+      const fingerprint = JSON.stringify(payload);
+      if (fingerprint === lastEmitted) {
+        return;
+      }
+      lastEmitted = fingerprint;
+      syncEventCenter.emit(TOOLTIP_SYNC_EVENT, syncId, payload, eventEmitterSymbol);
+    },
+  );
+}
+
+/**
+ * EMITS brush sync events to other charts when the brush start/end indexes
+ * change. Mirrors recharts' `useBrushChartSynchronisation`.
+ */
+export function useBrushChartSynchronisation(): void {
+  const store = useAppStore();
+  if (store == null) {
+    return;
+  }
+  createEffect(
+    () => {
+      const syncId = selectSyncId(store.state);
+      const eventEmitterSymbol = selectEventEmitter(store.state);
+      const brushStartIndex = store.state.chartData.dataStartIndex;
+      const brushEndIndex = store.state.chartData.dataEndIndex;
+      return { syncId, eventEmitterSymbol, brushStartIndex, brushEndIndex };
+    },
+    ({ syncId, eventEmitterSymbol, brushStartIndex, brushEndIndex }) => {
+      if (
+        syncId == null ||
+        brushStartIndex == null ||
+        brushEndIndex == null ||
+        eventEmitterSymbol == null
+      ) {
+        return;
+      }
+      const payload: BrushStartEndIndex = {
+        startIndex: brushStartIndex,
+        endIndex: brushEndIndex,
+      };
+      untrack(() => {
+        syncEventCenter.emit(BRUSH_SYNC_EVENT, syncId, payload, eventEmitterSymbol);
+      });
+    },
+  );
+}