solid-recharts 0.1.0 → 0.2.1

package/src/polar/RadialBar.tsx

@@ -30,11 +30,15 @@
 // (final frame), element-form shape, per-sector item-hover dispatch (sectors lack
 // tooltipPosition).
 // Cells ARE wired: a <Cell> child overrides the per-sector fill/stroke/class.
-import { createEffect, createMemo, createSignal, For, merge, Show, untrack } from "solid-js";
+import { createMemo, For, merge, Show, untrack } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useUniqueId } from "../util/useUniqueId";
-import { AnimatedItems, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import { matchAppend, type AnimationMatchByProp } from "../animation/matchBy";
 import type { MutableRef } from "../animation/useAnimationStartSnapshot";
 import { usePolarChartLayout } from "../context/chartLayoutContext";
@@ -96,7 +100,7 @@ import {
 } from "../util/ChartUtils";
 import { interpolate, isNumber, mathSign } from "../util/DataUtils";
 import type { StackSeries } from "../util/stacks/stackTypes";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export type RadialBarDataItem = SectorProps &
   PolarViewBoxRequired &
@@ -494,29 +498,14 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
     maxBarSize: merged.maxBarSize,
   });
 
-  let prev: RadialBarSettings | null = null;
-
-  createEffect(
-    (): RadialBarSettings => settings(),
-    (s) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addPolarGraphicalItem(s);
-      } else if (prev !== s) {
-        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next: s });
-      }
-      prev = s;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removePolarGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<RadialBarSettings>(() => settings(), {
+      add: (next) => store.actions.graphicalItems.addPolarGraphicalItem(next),
+      replace: (prev, next) =>
+        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next }),
+      remove: (prev) => store.actions.graphicalItems.removePolarGraphicalItem(prev),
+    });
+  }
 
   // Per-sector <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);
@@ -574,17 +563,10 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
     current: null,
   };
   // Labels are hidden while the sectors animate (recharts' showLabels={!isAnimating}).
-  // ownedWrite: handleAnimationEnd also fires from the animation effect cleanup when a
-  // mid-animation chart is disposed (route/soft navigation) — a legal teardown write.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const handleAnimationStart = (): void => {
-    props.onAnimationStart?.();
-    setShowLabels(false);
-  };
-  const handleAnimationEnd = (): void => {
-    props.onAnimationEnd?.();
-    setShowLabels(true);
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
 
   // User pointer handlers are forwarded to each sector's wrapping <Layer>: the
   // mouse handlers wrap into the tooltip-item dispatch (called props-first), and
@@ -669,7 +651,7 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
             <Layer class={layerClass()}>
               <PolarLabelListContextProvider
                 value={() =>
-                  showLabels()
+                  !isAnimating()
                     ? secs().map(
                         (sector): PolarLabelListEntry => ({
                           value: sector.value,
@@ -730,7 +712,7 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
                             isActive={isSectorActiveShape(i())}
                             option={sectorOption(i())}
                             animationElapsedTime={animationElapsedTime}
-                            isAnimating={!showLabels() || animationElapsedTime < 1}
+                            isAnimating={isAnimating() || animationElapsedTime < 1}
                             isEntrance={isEntrance}
                             class={`recharts-radial-bar-sector ${entry.class ?? ""}`}
                             fill={entry.fill ?? merged.fill}

package/src/shape/Curve.tsx

@@ -38,7 +38,7 @@ import {
   curveStepBefore,
   line as shapeLine,
   type Line as D3LineCurve,
-} from "victory-vendor/d3-shape";
+} from "d3-shape";
 import { isNumber, upperFirst } from "../util/DataUtils";
 import { isWellBehavedNumber } from "../util/isWellBehavedNumber";
 import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";

package/src/shape/Symbols.tsx

@@ -20,7 +20,7 @@ import {
   symbolTriangle,
   symbolWye,
   type SymbolType as D3SymbolType,
-} from "victory-vendor/d3-shape";
+} from "d3-shape";
 import { SymbolType } from "../util/types";
 import { isNumber, upperFirst } from "../util/DataUtils";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";

package/src/state/RechartsReduxContext.tsx

@@ -4,5 +4,5 @@
 //
 // TODO: do not port this file as-is. The Solid-native port replaces it (see the
 // reason above). If a consumer needs this path, wire it to the Solid equivalent
-// instead. Tracked in scripts/porting-queue.mjs SKIP list and project memory.
+// instead.
 export {};

package/src/state/SetLegendPayload.ts

@@ -5,12 +5,16 @@
 // explicit `id` prop (the graphical item's id) keys the entry so replace/remove are
 // proxy-safe (recharts matches the array by reference, which Solid stores break).
 // `SetPolarLegendPayload` lands with the polar vertical. Returns nothing.
-import { createEffect } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppStore } from "./hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { LegendPayload } from "../component/DefaultLegendContent";
-import { unregisterOnCleanup } from "./unregisterOnCleanup";
+import { registerInStore } from "./registerInStore";
+
+interface LegendPayloadEntry {
+  id: string;
+  items: ReadonlyArray<LegendPayload>;
+}
 
 export function SetLegendPayload(props: {
   id: string;
@@ -19,32 +23,20 @@ export function SetLegendPayload(props: {
   const store = useAppStore();
   const isPanorama = useIsPanorama();
 
-  let prevId: string | null = null;
-
-  createEffect(
-    () => ({ id: props.id, items: props.legendPayload }),
-    (entry) => {
-      if (store == null || isPanorama) {
-        return;
-      }
-      if (prevId === null) {
-        store.actions.legend.addLegendPayload(entry);
-      } else {
+  // Panorama mirrors never contribute to the legend. The entry is keyed by id
+  // (recharts matches the array by reference, which Solid stores break), so
+  // replace/remove rebuild the `{ id, items: [] }` lookup key from prev.
+  if (store != null && !isPanorama) {
+    registerInStore<LegendPayloadEntry>(() => ({ id: props.id, items: props.legendPayload }), {
+      add: (next) => store.actions.legend.addLegendPayload(next),
+      replace: (prev, next) =>
         store.actions.legend.replaceLegendPayload({
-          prev: { id: prevId, items: [] },
-          next: entry,
-        });
-      }
-      prevId = entry.id;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prevId != null && store != null) {
-      store.actions.legend.removeLegendPayload({ id: prevId, items: [] });
-      prevId = null;
-    }
-  });
+          prev: { id: prev.id, items: [] },
+          next,
+        }),
+      remove: (prev) => store.actions.legend.removeLegendPayload({ id: prev.id, items: [] }),
+    });
+  }
 
   return null;
 }

package/src/state/SetTooltipEntrySettings.tsx

@@ -4,12 +4,11 @@
 // on change) + onCleanup (remove), the same effect-dispatch idiom Line/Bar/Area
 // use for their graphical-item registration. Returns null (renders nothing) — it
 // exists purely to register the item's tooltip payload entry in the store.
-import { createEffect } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppStore } from "./hooks";
 import { TooltipPayloadConfiguration } from "./tooltipSlice";
 import { useIsPanorama } from "../context/PanoramaContext";
-import { unregisterOnCleanup } from "./unregisterOnCleanup";
+import { registerInStore } from "./registerInStore";
 
 export function SetTooltipEntrySettings(props: {
   tooltipEntrySettings: TooltipPayloadConfiguration;
@@ -17,30 +16,14 @@ export function SetTooltipEntrySettings(props: {
   const store = useAppStore();
   const isPanorama = useIsPanorama();
 
-  let prev: TooltipPayloadConfiguration | null = null;
-
-  createEffect(
-    () => props.tooltipEntrySettings,
-    (settings) => {
-      if (store == null || isPanorama) {
-        // Panorama graphical items never contribute to the Tooltip payload.
-        return;
-      }
-      if (prev === null) {
-        store.actions.tooltip.addTooltipEntrySettings(settings);
-      } else if (prev !== settings) {
-        store.actions.tooltip.replaceTooltipEntrySettings({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.tooltip.removeTooltipEntrySettings(prev);
-      prev = null;
-    }
-  });
+  // Panorama graphical items never contribute to the Tooltip payload.
+  if (store != null && !isPanorama) {
+    registerInStore<TooltipPayloadConfiguration>(() => props.tooltipEntrySettings, {
+      add: (next) => store.actions.tooltip.addTooltipEntrySettings(next),
+      replace: (prev, next) => store.actions.tooltip.replaceTooltipEntrySettings({ prev, next }),
+      remove: (prev) => store.actions.tooltip.removeTooltipEntrySettings(prev),
+    });
+  }
 
   return null;
 }

package/src/state/cartesianAxisSlice.ts

@@ -195,67 +195,47 @@ export function createCartesianAxisSlice(
     zAxis: { ...initialState.zAxis },
   });
 
-  const actions: CartesianAxisActions = {
-    addXAxis(axis) {
-      setState((s) => {
-        s.xAxis[axis.id] = axis;
-      });
-    },
-    replaceXAxis({ prev, next }) {
-      setState((s) => {
-        if (s.xAxis[prev.id] !== undefined) {
-          if (prev.id !== next.id) {
-            delete s.xAxis[prev.id];
-          }
-          s.xAxis[next.id] = next;
-        }
-      });
-    },
-    removeXAxis(axis) {
-      setState((s) => {
-        delete s.xAxis[axis.id];
-      });
-    },
-    addYAxis(axis) {
-      setState((s) => {
-        s.yAxis[axis.id] = axis;
-      });
-    },
-    replaceYAxis({ prev, next }) {
-      setState((s) => {
-        if (s.yAxis[prev.id] !== undefined) {
-          if (prev.id !== next.id) {
-            delete s.yAxis[prev.id];
+  // The x/y/z axis maps are Record<AxisId, …> (not arrays), and their
+  // add/replace/remove mutate the draft IN PLACE — preserving each map's reference
+  // identity, which downstream reads rely on. So this is a local record helper, not
+  // the shared array `createCollectionActions`; `pick` selects the map to touch.
+  // Concentrates the replace body that was written verbatim three times (x/y/z).
+  function axisCollection<A extends { id: AxisId }>(pick: (s: AxisMapState) => Record<AxisId, A>) {
+    return {
+      add: (axis: A) =>
+        setState((s) => {
+          pick(s)[axis.id] = axis;
+        }),
+      replace: ({ prev, next }: { prev: A; next: A }) =>
+        setState((s) => {
+          const map = pick(s);
+          if (map[prev.id] !== undefined) {
+            if (prev.id !== next.id) {
+              delete map[prev.id];
+            }
+            map[next.id] = next;
           }
-          s.yAxis[next.id] = next;
-        }
-      });
-    },
-    removeYAxis(axis) {
-      setState((s) => {
-        delete s.yAxis[axis.id];
-      });
-    },
-    addZAxis(axis) {
-      setState((s) => {
-        s.zAxis[axis.id] = axis;
-      });
-    },
-    replaceZAxis({ prev, next }) {
-      setState((s) => {
-        if (s.zAxis[prev.id] !== undefined) {
-          if (prev.id !== next.id) {
-            delete s.zAxis[prev.id];
-          }
-          s.zAxis[next.id] = next;
-        }
-      });
-    },
-    removeZAxis(axis) {
-      setState((s) => {
-        delete s.zAxis[axis.id];
-      });
-    },
+        }),
+      remove: (axis: A) =>
+        setState((s) => {
+          delete pick(s)[axis.id];
+        }),
+    };
+  }
+  const x = axisCollection<XAxisSettings>((s) => s.xAxis);
+  const y = axisCollection<YAxisSettings>((s) => s.yAxis);
+  const z = axisCollection<ZAxisSettings>((s) => s.zAxis);
+
+  const actions: CartesianAxisActions = {
+    addXAxis: x.add,
+    replaceXAxis: x.replace,
+    removeXAxis: x.remove,
+    addYAxis: y.add,
+    replaceYAxis: y.replace,
+    removeYAxis: y.remove,
+    addZAxis: z.add,
+    replaceZAxis: z.replace,
+    removeZAxis: z.remove,
     updateYAxisWidth({ id, width }) {
       setState((s) => {
         const axis = s.yAxis[id];

package/src/state/createCollectionActions.ts

@@ -0,0 +1,51 @@
+// The add / replace / remove algebra for a store-held array collection.
+//
+// Several slices keep a keyed collection as an array and expose the same three
+// writes: append on add, swap-by-key on replace, filter-by-key on remove. Each
+// used to hand-write that algebra (once per collection: cartesian + polar
+// graphical items, reference dots/areas/lines, legend payload, tooltip entries).
+// This concentrates it so the slice immutability contract (ADR-0002) lives in one
+// place: every change produces a NEW array reference, so reference-equality
+// selector caches invalidate; a future in-place slip can only regress here.
+//
+// The slice supplies `update`, which MUST read the current array and assign the
+// result inside its own `setState` draft — the current-array read has to happen
+// in the write batch, not in the caller's scope. Actions register from inside
+// registerInStore's effect apply phase; a store read there (outside setState)
+// would trip STRICT_READ_UNTRACKED. `update` returning the same reference from its
+// updater is a no-op (matches the hand-written `index > -1` guard on replace).
+//
+// `keyOf` extracts the match key (an id field for most collections, a nested
+// `settings.graphicalItemId` for tooltip entries). Slices without a replace action
+// (reference elements) simply wire `add` and `remove`.
+
+export interface CollectionActions<T> {
+  // Arrow-property signatures (not `add(item): void`) so consumers can reference
+  // these without the unbound-method lint firing — they carry no `this`.
+  add: (item: T) => void;
+  replace: (payload: { prev: T; next: T }) => void;
+  remove: (item: T) => void;
+}
+
+export function createCollectionActions<T>(
+  update: (updater: (arr: ReadonlyArray<T>) => ReadonlyArray<T>) => void,
+  // Match key — compared only with `===`, so any value type is fine (an id
+  // field for most collections, a nested `settings.graphicalItemId` for tooltip).
+  keyOf: (item: T) => unknown,
+): CollectionActions<T> {
+  return {
+    add: (item) => update((arr) => [...arr, item]),
+    replace: ({ prev, next }) =>
+      update((arr) => {
+        const index = arr.findIndex((it) => keyOf(it) === keyOf(prev));
+        // Absent key → return the same reference so `update` writes nothing.
+        if (index < 0) {
+          return arr;
+        }
+        const nextItems = arr.slice();
+        nextItems[index] = next;
+        return nextItems;
+      }),
+    remove: (item) => update((arr) => arr.filter((it) => keyOf(it) !== keyOf(item))),
+  };
+}

package/src/state/createSelector.ts

@@ -0,0 +1,97 @@
+// Hand-rolled replacement for reselect v5 `createSelector` (ADR-0002).
+//
+// The port initially replaced reselect with plain functions memoized only by
+// each consumer's `createMemo` (ADR-0001), which lost *shared* memoization:
+// every consumer re-ran the full selector chain. This module restores
+// upstream's caching contract without the dependency:
+//
+//   - Cache nodes live per store (WeakMap keyed on the root state object, so
+//     they are GC'd with the chart) and per primitive args (nested Maps, i.e.
+//     SameValueZero keying — `0` and `"0"` are distinct axis ids), mirroring
+//     reselect v5's `weakMapMemoize`.
+//   - A node recomputes its combiner only when one of its extracted input
+//     values changes by reference (`===`, reselect's default equality). This
+//     is sound because every slice follows the slice immutability contract:
+//     writes replace the objects along the written path.
+//   - Input selectors run tracked on EVERY evaluation — they are the sole
+//     reactive surface, so a consumer's `createMemo` subscribes identically on
+//     cache hits and misses. The combiner runs `untrack`ed and must be pure
+//     over its inputs (reselect's own contract; combiners never read state).
+//   - `resultEqualityCheck` (upstream's `memoizeOptions.resultEqualityCheck`)
+//     keeps the previous reference when a recompute produces a value-equal
+//     result, so downstream reference comparisons — and `useAppSelector`'s
+//     `createMemo` equality — stop propagation.
+import { untrack } from "solid-js";
+
+export type CreateSelectorOptions<Result> = {
+  /** When a recompute yields a value-equal result, return the previous reference. */
+  resultEqualityCheck?: (previous: Result, next: Result) => boolean;
+};
+
+type InputSelector<State> = (state: State, ...args: never[]) => unknown;
+
+type CacheNode = {
+  entry?: { inputs: readonly unknown[]; result: unknown };
+  children?: Map<unknown, CacheNode>;
+};
+
+/**
+ * Memoizing selector factory — the Solid-native stand-in for reselect's
+ * `createSelector([inputs], combiner)`. The returned selector stays a plain
+ * function callable with or without a reactive owner; all callers of the same
+ * store share one cache node per argument combination.
+ *
+ * Input selectors must read every state path segment leading to the value they
+ * extract; the combiner must be pure over the extracted values. The returned
+ * function takes `...args: unknown[]` — callers annotate the exported const's
+ * type (e.g. `(state, axisType, axisId) => X`), which narrows this signature.
+ *
+ * Typed via a precise public overload + a loose implementation signature (the
+ * reselect approach): the body operates entirely on `unknown`, so it needs no
+ * type assertions while callers still get full input/combiner type checking.
+ */
+export function createSelector<
+  State extends object,
+  Inputs extends readonly InputSelector<State>[],
+  Result,
+>(
+  inputs: readonly [...Inputs],
+  combiner: (...values: { [K in keyof Inputs]: ReturnType<Inputs[K]> }) => Result,
+  options?: CreateSelectorOptions<Result>,
+): (state: State, ...args: unknown[]) => Result;
+export function createSelector(
+  inputs: ReadonlyArray<(state: object, ...args: unknown[]) => unknown>,
+  combiner: (...values: unknown[]) => unknown,
+  options?: CreateSelectorOptions<unknown>,
+): (state: object, ...args: unknown[]) => unknown {
+  const cache = new WeakMap<object, CacheNode>();
+  const resultEqualityCheck = options?.resultEqualityCheck;
+
+  return (state: object, ...args: unknown[]): unknown => {
+    let node: CacheNode = cache.get(state) ?? {};
+    cache.set(state, node);
+    for (const arg of args) {
+      const children: Map<unknown, CacheNode> = node.children ?? new Map<unknown, CacheNode>();
+      node.children = children;
+      const child: CacheNode = children.get(arg) ?? {};
+      children.set(arg, child);
+      node = child;
+    }
+
+    // Tracked: the input reads are the selector's whole reactive surface.
+    const values: readonly unknown[] = inputs.map((input) => input(state, ...args));
+
+    const entry = node.entry;
+    if (entry != null && values.every((value, i) => value === entry.inputs[i])) {
+      return entry.result;
+    }
+
+    const result = untrack(() => combiner(...values));
+    if (entry != null && resultEqualityCheck != null && resultEqualityCheck(entry.result, result)) {
+      entry.inputs = values;
+      return entry.result;
+    }
+    node.entry = { inputs: values, result };
+    return result;
+  };
+}

package/src/state/externalEventsMiddleware.ts

@@ -13,21 +13,13 @@ import {
 } from "./selectors/tooltipSelectors";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
 import type { RechartsStore } from "./store";
+import { isEventThrottled } from "./isEventThrottled";
 
 export type ExternalEventActionPayload<E = Event> = {
   reactEvent: E;
   handler: CategoricalChartFunc<E> | undefined;
 };
 
-export type ExternalEventAction = {
-  type: "externalEvent";
-  payload: ExternalEventActionPayload;
-};
-
-export function externalEventAction(payload: ExternalEventActionPayload): ExternalEventAction {
-  return { type: "externalEvent", payload };
-}
-
 const rafIdMap = new Map<string, number>();
 const timeoutIdMap = new Map<string, ReturnType<typeof setTimeout>>();
 const latestEventMap = new Map<
@@ -65,8 +57,7 @@ export function dispatchExternalEvent<E extends Event & { currentTarget: unknown
 
   const state = store.state;
   const { throttleDelay, throttledEvents } = state.eventSettings;
-  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
-  const isThrottled = eventListAsString === "all" || eventListAsString?.includes(eventType);
+  const isThrottled = isEventThrottled(throttledEvents, eventType);
 
   const existingTimeoutId = timeoutIdMap.get(eventType);
   if (existingTimeoutId !== undefined && (typeof throttleDelay !== "number" || !isThrottled)) {

package/src/state/graphicalItemsSlice.ts

@@ -11,6 +11,7 @@
 // unique `id` instead, which is the items' real identity and gives identical
 // ordering/replacement semantics.
 import { createStore } from "solid-js";
+import { createCollectionActions } from "./createCollectionActions";
 import { ChartData } from "./chartDataSlice";
 import { AxisId } from "./cartesianAxisSlice";
 import { DataKey } from "../util/types";
@@ -112,50 +113,36 @@ export function createGraphicalItemsSlice(
     polarItems: [...initialState.polarItems],
   });
 
-  const actions: GraphicalItemsActions = {
-    // State arrays are typed ReadonlyArray (immutable external API), so actions
-    // REASSIGN the whole array rather than mutate in place — Solid's fine-grained
-    // store still tracks the change, and the readonly type stays honest.
-    addCartesianGraphicalItem(item) {
-      setState((s) => {
-        s.cartesianItems = [...s.cartesianItems, item];
-      });
-    },
-    replaceCartesianGraphicalItem({ prev, next }) {
+  // State arrays are typed ReadonlyArray (immutable external API); the collection
+  // actions reassign the whole array rather than mutate in place (see ADR-0002).
+  const cartesian = createCollectionActions<CartesianGraphicalItemSettings>(
+    (updater) =>
       setState((s) => {
-        const index = s.cartesianItems.findIndex((it) => it.id === prev.id);
-        if (index > -1) {
-          const nextItems = s.cartesianItems.slice();
-          nextItems[index] = next;
-          s.cartesianItems = nextItems;
+        const next = updater(s.cartesianItems);
+        if (next !== s.cartesianItems) {
+          s.cartesianItems = next;
         }
-      });
-    },
-    removeCartesianGraphicalItem(item) {
-      setState((s) => {
-        s.cartesianItems = s.cartesianItems.filter((it) => it.id !== item.id);
-      });
-    },
-    addPolarGraphicalItem(item) {
-      setState((s) => {
-        s.polarItems = [...s.polarItems, item];
-      });
-    },
-    replacePolarGraphicalItem({ prev, next }) {
+      }),
+    (it) => it.id,
+  );
+  const polar = createCollectionActions<PolarGraphicalItemSettings>(
+    (updater) =>
       setState((s) => {
-        const index = s.polarItems.findIndex((it) => it.id === prev.id);
-        if (index > -1) {
-          const nextItems = s.polarItems.slice();
-          nextItems[index] = next;
-          s.polarItems = nextItems;
+        const next = updater(s.polarItems);
+        if (next !== s.polarItems) {
+          s.polarItems = next;
         }
-      });
-    },
-    removePolarGraphicalItem(item) {
-      setState((s) => {
-        s.polarItems = s.polarItems.filter((it) => it.id !== item.id);
-      });
-    },
+      }),
+    (it) => it.id,
+  );
+
+  const actions: GraphicalItemsActions = {
+    addCartesianGraphicalItem: cartesian.add,
+    replaceCartesianGraphicalItem: cartesian.replace,
+    removeCartesianGraphicalItem: cartesian.remove,
+    addPolarGraphicalItem: polar.add,
+    replacePolarGraphicalItem: polar.replace,
+    removePolarGraphicalItem: polar.remove,
   };
 
   return { state, actions };

package/src/state/isEventThrottled.ts

@@ -0,0 +1,12 @@
+// The "is this event in the throttle allowlist" decision, shared verbatim by the
+// mouse, keyboard, and external event middleware. Only the DECISION is shared:
+// the timer-lifecycle downstream genuinely differs per middleware (mouse is
+// trailing-only; keyboard and external are leading+trailing; external keys its
+// timers per event type), so unifying the scheduling would change behavior and is
+// deliberately left alone.
+export function isEventThrottled(
+  throttledEvents: ReadonlyArray<string> | "all" | undefined,
+  eventName: string,
+): boolean {
+  return throttledEvents === "all" || (throttledEvents?.includes(eventName) ?? false);
+}