@ledgerhq/lumen-ui-rnative-visualization 0.1.23 → 0.1.25

package/dist/typescript/src/lib/Components/Line/Line.d.ts

@@ -1,3 +1,3 @@
 import type { LineProps } from './types';
-export declare const Line: ({ seriesId, stroke, showArea, areaType: _areaType, curve, connectNulls, }: LineProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Line: import("react").NamedExoticComponent<LineProps>;
 //# sourceMappingURL=Line.d.ts.map

package/dist/typescript/src/lib/Components/Line/Line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,IAAI,GAAI,2EAOlB,SAAS,mDAkFX,CAAC"}
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,IAAI,iDAyFf,CAAC"}

package/dist/typescript/src/lib/Components/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,SAAS,CAAC;AA0FjB,eAAO,MAAM,SAAS,GAAI,0MAmBvB,QAAQ,CAAC,cAAc,CAAC,4CAgF1B,CAAC"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,SAAS,CAAC;AA0FjB,eAAO,MAAM,SAAS,GAAI,0MAmBvB,QAAQ,CAAC,cAAc,CAAC,4CAuF1B,CAAC"}

package/dist/typescript/src/lib/Components/Point/Point.d.ts

@@ -1,4 +1,4 @@
 import type { PointLabelProps, PointProps } from './types';
 export declare function PointLabel({ textAnchor, ...props }: Readonly<PointLabelProps>): import("react/jsx-runtime").JSX.Element;
-export declare function Point({ dataX, dataY, color, label, LabelComponent, labelPosition, hidePoint, showLabelArrow, size, onPress, magnetic, labelAlignment, }: Readonly<PointProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare const Point: import("react").NamedExoticComponent<Readonly<PointProps>>;
 //# sourceMappingURL=Point.d.ts.map

package/dist/typescript/src/lib/Components/Point/Point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/Point.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,eAAe,EAEf,UAAU,EACX,MAAM,SAAS,CAAC;AAMjB,wBAAgB,UAAU,CAAC,EACzB,UAAqB,EACrB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAa3B;AAgCD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,cAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,cAAqB,EACrB,IAAmB,EACnB,OAAO,EACP,QAAgB,EAChB,cAAuB,GACxB,EAAE,QAAQ,CAAC,UAAU,CAAC,kDAoDtB"}
+{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/Point.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAEV,eAAe,EAEf,UAAU,EACX,MAAM,SAAS,CAAC;AAOjB,wBAAgB,UAAU,CAAC,EACzB,UAAqB,EACrB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAa3B;AAgCD,eAAO,MAAM,KAAK,4DAiEhB,CAAC"}

package/dist/typescript/src/lib/Components/Point/pointContext/MagneticPointsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MagneticPointsProvider.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Point/pointContext/MagneticPointsProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,GACT,EAAE,QAAQ,CAAC,2BAA2B,CAAC,2CA8BvC"}
+{"version":3,"file":"MagneticPointsProvider.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Point/pointContext/MagneticPointsProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,GACT,EAAE,QAAQ,CAAC,2BAA2B,CAAC,2CAwCvC"}

package/dist/typescript/src/lib/Components/Point/pointContext/index.d.ts

@@ -1,3 +1,3 @@
-export { useMagneticPointsContext, type MagneticPointsContextValue, } from './magneticPointsContext';
+export { useMagneticRegistry, useMagneticSnapshot, type MagneticRegistryValue, type MagneticSnapshotValue, } from './magneticPointsContext';
 export { MagneticPointsProvider } from './MagneticPointsProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/lib/Components/Point/pointContext/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Point/pointContext/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Point/pointContext/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/typescript/src/lib/Components/Point/pointContext/magneticPointsContext.d.ts

@@ -1,13 +1,30 @@
-export type MagneticPointsContextValue = {
+/**
+ * Stable registration API for magnetic points. Its identity never changes for
+ * the provider's lifetime, so consumers (every `Point`) do not re-render when
+ * the magnetic set changes — only when they mount/unmount.
+ */
+export type MagneticRegistryValue = {
     register: (dataIndex: number) => void;
     unregister: (dataIndex: number) => void;
+};
+/**
+ * Mutable snapshot of the registered magnetic points. Changes on every
+ * register/unregister (via `version`) and is consumed only by the scrubber,
+ * which needs to recompute its snap targets when the set changes.
+ */
+export type MagneticSnapshotValue = {
     version: number;
     getMagneticPoints: () => ReadonlySet<number>;
 };
-declare const MagneticPointsContextProvider: import("react").FC<{
+declare const MagneticRegistryProvider: import("react").FC<{
+    children: import("react").ReactNode;
+    value: MagneticRegistryValue;
+}>;
+declare const MagneticSnapshotProvider: import("react").FC<{
     children: import("react").ReactNode;
-    value: MagneticPointsContextValue;
+    value: MagneticSnapshotValue;
 }>;
-export declare const useMagneticPointsContext: () => MagneticPointsContextValue;
-export { MagneticPointsContextProvider };
+export declare const useMagneticRegistry: () => MagneticRegistryValue;
+export declare const useMagneticSnapshot: () => MagneticSnapshotValue;
+export { MagneticRegistryProvider, MagneticSnapshotProvider };
 //# sourceMappingURL=magneticPointsContext.d.ts.map

package/dist/typescript/src/lib/Components/Point/pointContext/magneticPointsContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"magneticPointsContext.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Point/pointContext/magneticPointsContext.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAO,6BAA6B;;;EAC6B,CAAC;AAElE,eAAO,MAAM,wBAAwB,QAAO,0BAIxC,CAAC;AAEL,OAAO,EAAE,6BAA6B,EAAE,CAAC"}
+{"version":3,"file":"magneticPointsContext.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Point/pointContext/magneticPointsContext.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAO,wBAAwB;;;EAC+B,CAAC;AAE/D,QAAA,MAAO,wBAAwB;;;EAC+B,CAAC;AAE/D,eAAO,MAAM,mBAAmB,QAAO,qBAInC,CAAC;AAEL,eAAO,MAAM,mBAAmB,QAAO,qBAInC,CAAC;AAEL,OAAO,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/typescript/src/lib/Components/Point/usePointGeometry.d.ts

@@ -1,7 +1,7 @@
 import type { DrawingArea } from '../../utils/types';
 import type { BaseAxisProps } from '../Axis';
 import { useRevealFadeProps } from '../CartesianChart/RevealAnimation';
-import type { MagneticPointsContextValue } from './pointContext/magneticPointsContext';
+import type { MagneticRegistryValue } from './pointContext/magneticPointsContext';
 type Pixel = {
     x: number;
     y: number;
@@ -28,6 +28,6 @@ export declare const usePointGeometry: ({ dataX, dataY, magnetic, }: UsePointGeo
  * Registers/unregisters a data index as a magnetic snap target
  * when the Point has `magnetic` enabled.
  */
-export declare const useMagneticRegistration: (magnetic: boolean, dataX: number, getXAxisConfig: () => BaseAxisProps | undefined, { register, unregister }: MagneticPointsContextValue) => void;
+export declare const useMagneticRegistration: (magnetic: boolean, dataX: number, getXAxisConfig: () => BaseAxisProps | undefined, { register, unregister }: MagneticRegistryValue) => void;
 export {};
 //# sourceMappingURL=usePointGeometry.d.ts.map

package/dist/typescript/src/lib/Components/Point/usePointGeometry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePointGeometry.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/usePointGeometry.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGvF,KAAK,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;IACjD,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,6BAI9B,sBAAsB,KAAG,aAqB3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,OAAO,EACjB,OAAO,MAAM,EACb,gBAAgB,MAAM,aAAa,GAAG,SAAS,EAC/C,0BAA0B,0BAA0B,KACnD,IAQF,CAAC"}
+{"version":3,"file":"usePointGeometry.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/usePointGeometry.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAGlF,KAAK,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;IACjD,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,6BAI9B,sBAAsB,KAAG,aAqB3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,OAAO,EACjB,OAAO,MAAM,EACb,gBAAgB,MAAM,aAAa,GAAG,SAAS,EAC/C,0BAA0B,qBAAqB,KAC9C,IAQF,CAAC"}

package/dist/typescript/src/lib/Components/Scrubber/ScrubberProvider.d.ts

@@ -7,10 +7,9 @@ import type { ScrubberProviderProps } from './types';
  * gesture-capture `View` overlay). `CartesianChart` handles this positioning
  * automatically when `enableScrubbing` is true.
  *
- * Activation requires a 50 ms long press before panning begins. This prevents
- * accidental scrubbing when the user is scrolling a parent `ScrollView` or
- * `FlatList`. The `isScrubbing` shared value gates the pan via manual activation
- * so scroll and scrub gestures never compete.
+ * Scrubbing engages on horizontal panning (`activeOffsetX`) or a press-and-hold
+ * (`LongPress`); vertical movement fails the pan (`failOffsetY`) so an ancestor
+ * vertical scroll view keeps scrolling.
  */
 export declare function ScrubberProvider({ children, width, height, enableScrubbing, onScrubberPositionChange, magnetRadius, style, }: Readonly<ScrubberProviderProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ScrubberProvider.d.ts.map

package/dist/typescript/src/lib/Components/Scrubber/ScrubberProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAUrD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,MAAM,EACN,eAAe,EACf,wBAAwB,EACxB,YAAgB,EAChB,KAAK,GACN,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CAwKjC"}
+{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAcrD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,MAAM,EACN,eAAe,EACf,wBAAwB,EACxB,YAAgB,EAChB,KAAK,GACN,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CA8JjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative-visualization",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -31,7 +31,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.6",
+    "@ledgerhq/lumen-utils-shared": "0.1.7",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0"
@@ -44,8 +44,8 @@
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.18",
-    "@ledgerhq/lumen-ui-rnative": "0.1.46",
+    "@ledgerhq/lumen-design-core": "0.1.19",
+    "@ledgerhq/lumen-ui-rnative": "0.1.48",
     "react": "^19.0.0",
     "react-native": "~0.81.6",
     "react-native-svg": "^15.0.0",

package/src/lib/Components/Line/Line.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@ledgerhq/lumen-ui-rnative';
-import { useId, useMemo } from 'react';
+import { useId, useMemo, memo } from 'react';
 import { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg';
 
 import { isNumericScale } from '../../utils/scales/scales';
@@ -10,14 +10,14 @@ import { LINE_AREA_GRADIENT_OPACITY, LINE_STROKE_WIDTH } from './constants';
 import type { LineProps } from './types';
 import { buildAreaPath, buildLinePath, toScaledPoints } from './utils';
 
-export const Line = ({
+export const Line = memo(function Line({
   seriesId,
   stroke,
   showArea = false,
   areaType: _areaType = 'gradient',
   curve,
   connectNulls,
-}: LineProps) => {
+}: LineProps) {
   const { getXScale, getYScale, getXAxisConfig, drawingArea, seriesMap } =
     useCartesianChartContext();
   const clipPath = usePathReveal();
@@ -99,4 +99,4 @@ export const Line = ({
       />
     </G>
   );
-};
+});

package/src/lib/Components/LineChart/LineChart.performance.test.tsx

@@ -0,0 +1,101 @@
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { render } from '@testing-library/react-native';
+import React, { Profiler } from 'react';
+import type { ProfilerOnRenderCallback } from 'react';
+
+import { Point } from '../Point';
+
+import { LineChart } from './LineChart';
+
+// Deterministic render budgets: assert on counts, never time, so CI never flakes.
+// Native scrubbing is gesture/worklet driven and not simulable here, so the
+// scrub re-render guard lives only in the React lib.
+
+const POINT_COUNT = 24;
+
+const buildData = (length: number): number[] =>
+  Array.from({ length }, (_, i) => (i % 9) + 1);
+
+// Counts commits of the Point subtree itself (via React.Profiler) rather than a
+// wrapper's renders. A wrapper counter sits above Point and never re-runs when a
+// context Point consumes updates, so it would silently miss the version-cascade
+// regression this budget guards against.
+let pointMountCommits = 0;
+let pointUpdateCommits = 0;
+const onPointRender: ProfilerOnRenderCallback = (_id, phase) => {
+  if (phase === 'mount') {
+    pointMountCommits++;
+  } else {
+    pointUpdateCommits++;
+  }
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+    {children}
+  </ThemeProvider>
+);
+
+beforeEach(() => {
+  pointMountCommits = 0;
+  pointUpdateCommits = 0;
+});
+
+describe('LineChart performance budgets', () => {
+  it('emits a bounded node count per point', () => {
+    const data = buildData(POINT_COUNT);
+
+    const { queryAllByTestId } = render(
+      <Wrapper>
+        <LineChart
+          series={[{ id: 's', stroke: '#000', data }]}
+          width={400}
+          height={200}
+          animate={false}
+        >
+          {data.map((value, index) => (
+            <Point key={index} dataX={index} dataY={value} />
+          ))}
+        </LineChart>
+      </Wrapper>,
+    );
+
+    const groups = queryAllByTestId('point-group');
+    const circles = queryAllByTestId('point-circle');
+    const arrows = queryAllByTestId('point-arrow');
+
+    expect(circles).toHaveLength(groups.length);
+    expect(arrows).toHaveLength(0);
+    expect(groups.length).toBeGreaterThan(0);
+  });
+
+  it('renders each magnetic point exactly once on mount (no version cascade)', () => {
+    const data = buildData(POINT_COUNT);
+
+    render(
+      <Wrapper>
+        <LineChart
+          series={[{ id: 's', stroke: '#000', data }]}
+          width={400}
+          height={200}
+          animate={false}
+        >
+          {data.map((value, index) => (
+            <Profiler
+              key={index}
+              id={`point-${index}`}
+              onRender={onPointRender}
+            >
+              <Point magnetic dataX={index} dataY={value} />
+            </Profiler>
+          ))}
+        </LineChart>
+      </Wrapper>,
+    );
+
+    expect(pointMountCommits).toBe(POINT_COUNT);
+    expect(pointUpdateCommits).toBe(0);
+  });
+});

package/src/lib/Components/LineChart/LineChart.tsx

@@ -127,17 +127,24 @@ export const LineChart = ({
   emptyLabel = 'No data',
   connectNulls,
 }: Readonly<LineChartProps>) => {
-  const xAxisConfig = {
-    ...defaultXAxisProps,
-    ...xAxis,
-    position: xAxis?.position ?? defaultXAxisProps.position,
-  };
-  const yAxisConfig = {
-    ...defaultYAxisProps,
-    ...yAxis,
-    position: yAxis?.position ?? defaultYAxisProps.position,
-    width: yAxis?.width ?? defaultYAxisProps.width,
-  };
+  const xAxisConfig = useMemo(
+    () => ({
+      ...defaultXAxisProps,
+      ...xAxis,
+      position: xAxis?.position ?? defaultXAxisProps.position,
+    }),
+    [xAxis],
+  );
+
+  const yAxisConfig = useMemo(
+    () => ({
+      ...defaultYAxisProps,
+      ...yAxis,
+      position: yAxis?.position ?? defaultYAxisProps.position,
+      width: yAxis?.width ?? defaultYAxisProps.width,
+    }),
+    [yAxis],
+  );
 
   const xAxisPosition = xAxisConfig.position;
   const yAxisPosition = yAxisConfig.position;

package/src/lib/Components/Point/Point.tsx

@@ -1,4 +1,6 @@
 import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+
+import { memo } from 'react';
 import Animated from 'react-native-reanimated';
 import { Circle, G, Polygon, Text as SvgText } from 'react-native-svg';
 
@@ -9,6 +11,7 @@ import type {
   PointMarkerProps,
   PointProps,
 } from './types';
+
 import { usePointGeometry } from './usePointGeometry';
 import { buildArrowPoints, computeLabelGeometry, resolveLabel } from './utils';
 
@@ -62,7 +65,7 @@ function PointArrow({ x, y, size, position }: Readonly<PointArrowProps>) {
   );
 }
 
-export function Point({
+export const Point = memo(function Point({
   dataX,
   dataY,
   color,
@@ -127,4 +130,4 @@ export function Point({
       )}
     </AnimatedG>
   );
-}
+});

package/src/lib/Components/Point/pointContext/MagneticPointsProvider.test.tsx

@@ -2,13 +2,25 @@ import { describe, expect, it } from '@jest/globals';
 import { renderHook, act } from '@testing-library/react-native';
 import type { ReactNode } from 'react';
 
-import { useMagneticPointsContext } from './magneticPointsContext';
+import {
+  useMagneticRegistry,
+  useMagneticSnapshot,
+} from './magneticPointsContext';
 import { MagneticPointsProvider } from './MagneticPointsProvider';
 
 const wrapper = ({ children }: { children: ReactNode }) => (
   <MagneticPointsProvider>{children}</MagneticPointsProvider>
 );
 
+/**
+ * Reads both split contexts so the existing assertions (register/unregister/
+ * getMagneticPoints/version) keep working against a single result object.
+ */
+const useMagneticPointsContext = () => ({
+  ...useMagneticRegistry(),
+  ...useMagneticSnapshot(),
+});
+
 describe('MagneticPointsProvider', () => {
   it('starts with an empty set', () => {
     const { result } = renderHook(() => useMagneticPointsContext(), {

package/src/lib/Components/Point/pointContext/MagneticPointsProvider.tsx

@@ -2,8 +2,10 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 
 import {
-  MagneticPointsContextProvider,
-  type MagneticPointsContextValue,
+  MagneticRegistryProvider,
+  MagneticSnapshotProvider,
+  type MagneticRegistryValue,
+  type MagneticSnapshotValue,
 } from './magneticPointsContext';
 
 type MagneticPointsProviderProps = {
@@ -32,14 +34,24 @@ export function MagneticPointsProvider({
     return pointsRef.current;
   }, []);
 
-  const value: MagneticPointsContextValue = useMemo(
-    () => ({ register, unregister, getMagneticPoints, version }),
-    [register, unregister, getMagneticPoints, version],
+  // Stable identity for the provider's lifetime: `Point` consumers read this
+  // and therefore never re-render when the magnetic set changes.
+  const registry: MagneticRegistryValue = useMemo(
+    () => ({ register, unregister }),
+    [register, unregister],
+  );
+
+  // Changes on every register/unregister: consumed only by the scrubber.
+  const snapshot: MagneticSnapshotValue = useMemo(
+    () => ({ version, getMagneticPoints }),
+    [version, getMagneticPoints],
   );
 
   return (
-    <MagneticPointsContextProvider value={value}>
-      {children}
-    </MagneticPointsContextProvider>
+    <MagneticRegistryProvider value={registry}>
+      <MagneticSnapshotProvider value={snapshot}>
+        {children}
+      </MagneticSnapshotProvider>
+    </MagneticRegistryProvider>
   );
 }

package/src/lib/Components/Point/pointContext/index.ts

@@ -1,5 +1,7 @@
 export {
-  useMagneticPointsContext,
-  type MagneticPointsContextValue,
+  useMagneticRegistry,
+  useMagneticSnapshot,
+  type MagneticRegistryValue,
+  type MagneticSnapshotValue,
 } from './magneticPointsContext';
 export { MagneticPointsProvider } from './MagneticPointsProvider';

package/src/lib/Components/Point/pointContext/magneticPointsContext.ts

@@ -1,19 +1,41 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 
-export type MagneticPointsContextValue = {
+/**
+ * Stable registration API for magnetic points. Its identity never changes for
+ * the provider's lifetime, so consumers (every `Point`) do not re-render when
+ * the magnetic set changes — only when they mount/unmount.
+ */
+export type MagneticRegistryValue = {
   register: (dataIndex: number) => void;
   unregister: (dataIndex: number) => void;
+};
+
+/**
+ * Mutable snapshot of the registered magnetic points. Changes on every
+ * register/unregister (via `version`) and is consumed only by the scrubber,
+ * which needs to recompute its snap targets when the set changes.
+ */
+export type MagneticSnapshotValue = {
   version: number;
   getMagneticPoints: () => ReadonlySet<number>;
 };
 
-const [MagneticPointsContextProvider, _useMagneticPointsSafeContext] =
-  createSafeContext<MagneticPointsContextValue>('MagneticPoints');
+const [MagneticRegistryProvider, _useMagneticRegistrySafeContext] =
+  createSafeContext<MagneticRegistryValue>('MagneticRegistry');
+
+const [MagneticSnapshotProvider, _useMagneticSnapshotSafeContext] =
+  createSafeContext<MagneticSnapshotValue>('MagneticSnapshot');
+
+export const useMagneticRegistry = (): MagneticRegistryValue =>
+  _useMagneticRegistrySafeContext({
+    consumerName: 'useMagneticRegistry',
+    contextRequired: true,
+  });
 
-export const useMagneticPointsContext = (): MagneticPointsContextValue =>
-  _useMagneticPointsSafeContext({
-    consumerName: 'useMagneticPointsContext',
+export const useMagneticSnapshot = (): MagneticSnapshotValue =>
+  _useMagneticSnapshotSafeContext({
+    consumerName: 'useMagneticSnapshot',
     contextRequired: true,
   });
 
-export { MagneticPointsContextProvider };
+export { MagneticRegistryProvider, MagneticSnapshotProvider };

package/src/lib/Components/Point/usePointGeometry.ts

@@ -5,8 +5,8 @@ import type { DrawingArea } from '../../utils/types';
 import type { BaseAxisProps } from '../Axis';
 import { useCartesianChartContext } from '../CartesianChart/context';
 import { useRevealFadeProps } from '../CartesianChart/RevealAnimation';
-import { useMagneticPointsContext } from './pointContext';
-import type { MagneticPointsContextValue } from './pointContext/magneticPointsContext';
+import { useMagneticRegistry } from './pointContext';
+import type { MagneticRegistryValue } from './pointContext/magneticPointsContext';
 import { isWithinBounds, resolveDataXToIndex } from './utils';
 
 type Pixel = { x: number; y: number };
@@ -37,9 +37,9 @@ export const usePointGeometry = ({
 }: UsePointGeometryParams): PointGeometry => {
   const { getXScale, getYScale, getXAxisConfig, drawingArea } =
     useCartesianChartContext();
-  const magneticContext = useMagneticPointsContext();
+  const magneticRegistry = useMagneticRegistry();
 
-  useMagneticRegistration(magnetic, dataX, getXAxisConfig, magneticContext);
+  useMagneticRegistration(magnetic, dataX, getXAxisConfig, magneticRegistry);
 
   const xScale = getXScale();
   const yScale = getYScale();
@@ -65,7 +65,7 @@ export const useMagneticRegistration = (
   magnetic: boolean,
   dataX: number,
   getXAxisConfig: () => BaseAxisProps | undefined,
-  { register, unregister }: MagneticPointsContextValue,
+  { register, unregister }: MagneticRegistryValue,
 ): void => {
   useEffect(() => {
     if (!magnetic) return;

package/src/lib/Components/Scrubber/ScrubberProvider.tsx

@@ -2,12 +2,12 @@ import { triggerHapticFeedback } from '@ledgerhq/lumen-ui-rnative';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { useSharedValue } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 
 import { clamp } from '../../utils/numbers';
 import { useCartesianChartContext } from '../CartesianChart/context';
-import { useMagneticPointsContext } from '../Point/pointContext';
+import { useMagneticSnapshot } from '../Point/pointContext';
 import { ScrubberContextProvider } from './context';
 import type { ScrubberProviderProps } from './types';
 import {
@@ -17,7 +17,11 @@ import {
   buildSortedMagnets,
 } from './utils';
 
-const LONG_PRESS_MIN_DURATION_MS = 50;
+const LONG_PRESS_MIN_DURATION_MS = 100;
+
+// Travel (px) past which a horizontal drag scrubs and a vertical drag fails
+// the pan (yielding to an ancestor scroll view). Also bounds the long press.
+const PAN_AXIS_THRESHOLD_PX = 10;
 
 /**
  * Provides scrubbing interaction for a chart.
@@ -27,10 +31,9 @@ const LONG_PRESS_MIN_DURATION_MS = 50;
  * gesture-capture `View` overlay). `CartesianChart` handles this positioning
  * automatically when `enableScrubbing` is true.
  *
- * Activation requires a 50 ms long press before panning begins. This prevents
- * accidental scrubbing when the user is scrolling a parent `ScrollView` or
- * `FlatList`. The `isScrubbing` shared value gates the pan via manual activation
- * so scroll and scrub gestures never compete.
+ * Scrubbing engages on horizontal panning (`activeOffsetX`) or a press-and-hold
+ * (`LongPress`); vertical movement fails the pan (`failOffsetY`) so an ancestor
+ * vertical scroll view keeps scrolling.
  */
 export function ScrubberProvider({
   children,
@@ -46,13 +49,11 @@ export function ScrubberProvider({
   >();
 
   const { getXScale, getXAxisConfig, dataLength } = useCartesianChartContext();
-  const { getMagneticPoints, version } = useMagneticPointsContext();
+  const { getMagneticPoints, version } = useMagneticSnapshot();
 
-  // All values touched by the gesture's JS-thread callback live in a single
-  // ref. Reading via `latest.current` keeps the callbacks reference-stable
-  // across data, scale, and prop updates, which in turn keeps `composed` and
-  // the gesture surface JSX stable so re-rendering the provider on each
-  // index change never tears down the GestureDetector or the View tree.
+  // Gesture callbacks read everything through this ref so they stay
+  // reference-stable, keeping `composed` and the surface JSX from re-creating
+  // (which would tear down the GestureDetector) on each index change.
   const sortedMagnets = useMemo(() => {
     const magneticIndices = getMagneticPoints();
     return buildSortedMagnets({
@@ -140,43 +141,35 @@ export function ScrubberProvider({
     [setScrubberPositionAndNotify],
   );
 
-  const isScrubbing = useSharedValue(false);
-
   const resetScrubber = useCallback((): void => {
     'worklet';
-    isScrubbing.value = false;
     scheduleOnRN(handlePositionChange, null);
-  }, [isScrubbing, handlePositionChange]);
+  }, [handlePositionChange]);
 
   const composed = useMemo(() => {
     const longPress = Gesture.LongPress()
       .minDuration(LONG_PRESS_MIN_DURATION_MS)
+      .maxDistance(PAN_AXIS_THRESHOLD_PX)
       .onStart((e) => {
         'worklet';
-        isScrubbing.value = true;
         scheduleOnRN(handlePositionChange, e.x);
-      });
+      })
+      .onEnd(resetScrubber);
 
     const pan = Gesture.Pan()
-      .manualActivation(true)
-      .onTouchesMove((_, manager) => {
-        'worklet';
-        if (isScrubbing.value) manager.activate();
-      })
+      .activeOffsetX([-PAN_AXIS_THRESHOLD_PX, PAN_AXIS_THRESHOLD_PX])
+      .failOffsetY([-PAN_AXIS_THRESHOLD_PX, PAN_AXIS_THRESHOLD_PX])
       .onUpdate((e) => {
         'worklet';
         scheduleOnRN(handlePositionChange, e.x);
       })
-      .onEnd(resetScrubber)
       .onFinalize(resetScrubber);
 
     return Gesture.Simultaneous(longPress, pan);
-  }, [isScrubbing, handlePositionChange, resetScrubber]);
+  }, [handlePositionChange, resetScrubber]);
 
-  // Memoizing the surface lets React's element-identity bailout skip
-  // reconciling the View / GestureDetector / chart `children` subtree when
-  // only `scrubberPosition` changes. The Scrubber consumer still updates via
-  // context as expected.
+  // Memoized so a `scrubberPosition` change doesn't re-render the chart
+  // subtree; the Scrubber still updates through context.
   const surface = useMemo(
     () => (
       <View style={[{ width, height }, style]}>