@ledgerhq/lumen-ui-react-visualization 0.1.22 → 0.1.23

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

@@ -1,3 +1,3 @@
 import { LineProps } from './types';
-export declare function 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/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":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,EAAE,SAAsB,EAChC,KAAK,EACL,YAAY,GACb,EAAE,SAAS,kDAwFX"}
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,IAAI,iDA+Ff,CAAC"}

package/dist/lib/Components/Line/Line.js

@@ -1,20 +1,20 @@
 import { jsxs as c, jsx as o, Fragment as T } from "react/jsx-runtime";
-import { useId as k, useMemo as d } from "react";
-import { isNumericScale as y } from "../../utils/scales/scales.js";
-import { LINE_DEFAULT_STROKE_COLOR as A, LINE_AREA_GRADIENT_OPACITY as N, LINE_STROKE_WIDTH as O } from "./constants.js";
-import { toScaledPoints as v, buildLinePath as R, buildAreaPath as D } from "./utils.js";
-import { useCartesianChartContext as j } from "../CartesianChart/context/cartesianChartContext.js";
-import { usePathReveal as b } from "../CartesianChart/RevealAnimation/context.js";
-function U({
+import { memo as k, useId as y, useMemo as d } from "react";
+import { isNumericScale as A } from "../../utils/scales/scales.js";
+import { LINE_DEFAULT_STROKE_COLOR as N, LINE_AREA_GRADIENT_OPACITY as O, LINE_STROKE_WIDTH as v } from "./constants.js";
+import { toScaledPoints as R, buildLinePath as D, buildAreaPath as j } from "./utils.js";
+import { useCartesianChartContext as b } from "../CartesianChart/context/cartesianChartContext.js";
+import { usePathReveal as F } from "../CartesianChart/RevealAnimation/context.js";
+const q = k(function({
   seriesId: g,
   stroke: C,
   showArea: s = !1,
-  areaType: F = "gradient",
+  areaType: K = "gradient",
   curve: x,
   connectNulls: L
 }) {
-  const { getXScale: S, getYScale: _, getXAxisConfig: E, drawingArea: i, seriesMap: I } = j(), P = b(), l = S(), n = _(), p = E(), u = k(), t = I.get(g), r = (C ?? t?.stroke) || A, a = x ?? t?.curve, f = L ?? t?.connectNulls ?? !1, e = d(
-    () => t?.data && l && n && y(n) ? v(
+  const { getXScale: S, getYScale: _, getXAxisConfig: E, drawingArea: i, seriesMap: I } = b(), P = F(), l = S(), n = _(), p = E(), u = y(), t = I.get(g), r = (C ?? t?.stroke) || N, a = x ?? t?.curve, f = L ?? t?.connectNulls ?? !1, e = d(
+    () => t?.data && l && n && A(n) ? R(
       t.data,
       l,
       n,
@@ -23,10 +23,10 @@ function U({
     ) : null,
     [t, l, n, p, f]
   ), m = d(
-    () => e ? R(e, a) : null,
+    () => e ? D(e, a) : null,
     [e, a]
   ), h = d(
-    () => s && e && i ? D(e, i, a) : null,
+    () => s && e && i ? j(e, i, a) : null,
     [s, e, i, a]
   );
   return m ? /* @__PURE__ */ c("g", { clipPath: P, children: [
@@ -46,7 +46,7 @@ function U({
               {
                 offset: "0%",
                 stopColor: r,
-                stopOpacity: N
+                stopOpacity: O
               }
             ),
             /* @__PURE__ */ o("stop", { offset: "100%", stopColor: r, stopOpacity: 0 })
@@ -70,13 +70,13 @@ function U({
         d: m,
         fill: "none",
         stroke: r,
-        strokeWidth: O,
+        strokeWidth: v,
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
     )
   ] }) : null;
-}
+});
 export {
-  U as Line
+  q as Line
 };

package/dist/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":"AAYA,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,SAAS,CAAC;AA0FjB,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,YAAY,EACZ,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,eAAe,EACf,wBAAwB,EACxB,OAAO,EACP,YAAY,EACZ,OAAe,EACf,UAAsB,EACtB,QAAQ,GACT,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAgF1B"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,SAAS,CAAC;AA0FjB,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,YAAY,EACZ,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,eAAe,EACf,wBAAwB,EACxB,OAAO,EACP,YAAY,EACZ,OAAe,EACf,UAAsB,EACtB,QAAQ,GACT,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAsF1B"}

package/dist/lib/Components/LineChart/LineChart.js

@@ -1,47 +1,47 @@
-import { jsx as i, jsxs as A, Fragment as g } from "react/jsx-runtime";
-import { useMemo as I } from "react";
+import { jsx as i, jsxs as S, Fragment as u } from "react/jsx-runtime";
+import { useMemo as h } from "react";
 import { ChartEmptyLabel as M } from "../CartesianChart/ChartEmptyLabel/ChartEmptyLabel.js";
 import { useShimmerAnimation as R } from "../CartesianChart/hooks/useShimmerAnimation.js";
 import { computeAxisPadding as V, canRenderLine as W, getChartDisplayState as q } from "./utils.js";
-import { defaultXAxisProps as P, defaultYAxisProps as h } from "../Axis/Axis.constants.js";
+import { defaultXAxisProps as k, defaultYAxisProps as g } from "../Axis/Axis.constants.js";
 import { CartesianChart as z } from "../CartesianChart/CartesianChart.js";
 import { LineChartEmptyState as G } from "./LineChartEmptyState/LineChartEmptyState.js";
 import { XAxis as H } from "../Axis/XAxis/XAxis.js";
 import { YAxis as J } from "../Axis/YAxis/YAxis.js";
 import { Line as K } from "../Line/Line.js";
 import { cssVar as N } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-const k = ({
+const b = ({
   series: o,
   showArea: r,
   areaType: a,
-  connectNulls: s,
+  connectNulls: e,
   stroke: n
-}) => /* @__PURE__ */ i(g, { children: o.map((t) => /* @__PURE__ */ i(
+}) => /* @__PURE__ */ i(u, { children: o.map((t) => /* @__PURE__ */ i(
   K,
   {
     seriesId: t.id,
     stroke: n ?? t.stroke,
     showArea: r,
     areaType: a,
-    connectNulls: s
+    connectNulls: e
   },
   t.id
 )) }), O = ({
   series: o,
   showArea: r,
   areaType: a,
-  connectNulls: s
+  connectNulls: e
 }) => {
   const { animationStyle: n, keyframe: t } = R();
-  return /* @__PURE__ */ A(g, { children: [
+  return /* @__PURE__ */ S(u, { children: [
     /* @__PURE__ */ i("style", { children: t }),
     /* @__PURE__ */ i("g", { style: { animation: n }, children: /* @__PURE__ */ i(
-      k,
+      b,
       {
         series: o,
         showArea: r,
         areaType: a,
-        connectNulls: s,
+        connectNulls: e,
         stroke: N("var(--border-muted-subtle)")
       }
     ) })
@@ -50,77 +50,83 @@ const k = ({
   series: o,
   showArea: r,
   areaType: a,
-  connectNulls: s,
+  connectNulls: e,
   showXAxis: n,
   showYAxis: t,
-  xAxisConfig: d,
-  yAxisConfig: e,
+  xAxisConfig: m,
+  yAxisConfig: s,
   isTransitionLoading: c,
   children: f
-}) => /* @__PURE__ */ A(g, { children: [
-  n && /* @__PURE__ */ i(H, { ...d }),
-  t && /* @__PURE__ */ i(J, { ...e }),
+}) => /* @__PURE__ */ S(u, { children: [
+  n && /* @__PURE__ */ i(H, { ...m }),
+  t && /* @__PURE__ */ i(J, { ...s }),
   c ? /* @__PURE__ */ i(
     O,
     {
       series: o,
       showArea: r,
       areaType: a,
-      connectNulls: s
+      connectNulls: e
     }
   ) : /* @__PURE__ */ i(
-    k,
+    b,
     {
       series: o,
       showArea: r,
       areaType: a,
-      connectNulls: s
+      connectNulls: e
     }
   ),
   f
 ] });
-function ei({
+function si({
   series: o,
   showArea: r = !1,
   areaType: a = "gradient",
-  connectNulls: s,
+  connectNulls: e,
   showXAxis: n = !1,
   showYAxis: t = !1,
-  xAxis: d,
-  yAxis: e,
+  xAxis: m,
+  yAxis: s,
   width: c = "100%",
   height: f = 240,
-  inset: S,
-  enableScrubbing: b,
-  onScrubberPositionChange: v,
-  animate: j,
-  magnetRadius: D,
-  loading: u = !1,
-  emptyLabel: C = "No data",
-  children: E
+  inset: v,
+  enableScrubbing: A,
+  onScrubberPositionChange: j,
+  animate: D,
+  magnetRadius: E,
+  loading: C = !1,
+  emptyLabel: L = "No data",
+  children: T
 }) {
-  const p = {
-    ...P,
-    ...d,
-    position: d?.position ?? P.position
-  }, l = {
-    ...h,
-    ...e,
-    position: e?.position ?? h.position,
-    width: e?.width ?? h.width
-  }, L = p.position, x = l.position, y = l.width, T = I(
+  const p = h(
+    () => ({
+      ...k,
+      ...m,
+      position: m?.position ?? k.position
+    }),
+    [m]
+  ), l = h(
+    () => ({
+      ...g,
+      ...s,
+      position: s?.position ?? g.position,
+      width: s?.width ?? g.width
+    }),
+    [s]
+  ), y = p.position, x = l.position, P = l.width, B = h(
     () => V({
       showXAxis: n,
       showYAxis: t,
-      xAxisPosition: L,
+      xAxisPosition: y,
       yAxisPosition: x,
-      yAxisWidth: y
+      yAxisWidth: P
     }),
-    [n, t, L, x, y]
-  ), B = W(o, p.data), { status: m, ariaLabel: F } = q({
-    loading: u,
-    hasData: B,
-    emptyLabel: C
+    [n, t, y, x, P]
+  ), F = W(o, p.data), { status: d, ariaLabel: I } = q({
+    loading: C,
+    hasData: F,
+    emptyLabel: L
   });
   return /* @__PURE__ */ i(
     z,
@@ -130,33 +136,33 @@ function ei({
       yAxis: l,
       width: c,
       height: f,
-      inset: S,
-      axisPadding: T,
-      enableScrubbing: b,
-      onScrubberPositionChange: v,
-      animate: j,
-      magnetRadius: D,
-      ariaLabel: F,
-      ariaBusy: u,
-      overlay: m === "empty" ? /* @__PURE__ */ i(M, { children: C }) : void 0,
-      children: m === "initial-loading" || m === "empty" ? /* @__PURE__ */ i(G, { loading: m === "initial-loading" }) : /* @__PURE__ */ i(
+      inset: v,
+      axisPadding: B,
+      enableScrubbing: A,
+      onScrubberPositionChange: j,
+      animate: D,
+      magnetRadius: E,
+      ariaLabel: I,
+      ariaBusy: C,
+      overlay: d === "empty" ? /* @__PURE__ */ i(M, { children: L }) : void 0,
+      children: d === "initial-loading" || d === "empty" ? /* @__PURE__ */ i(G, { loading: d === "initial-loading" }) : /* @__PURE__ */ i(
         Q,
         {
           series: o ?? [],
           showArea: r,
           areaType: a,
-          connectNulls: s,
+          connectNulls: e,
           showXAxis: n,
           showYAxis: t,
           xAxisConfig: p,
           yAxisConfig: l,
-          isTransitionLoading: m === "transition-loading",
-          children: E
+          isTransitionLoading: d === "transition-loading",
+          children: T
         }
       )
     }
   );
 }
 export {
-  ei as LineChart
+  si as LineChart
 };

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

@@ -1,4 +1,4 @@
 import { PointLabelProps, PointProps } from './types';
 export declare function PointLabel({ style, textAnchor, dominantBaseline, ...props }: Readonly<PointLabelProps>): import("react/jsx-runtime").JSX.Element;
-export declare function Point({ dataX, dataY, color, label, LabelComponent, labelPosition, hidePoint, showLabelArrow, size, onClick, 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/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":"AAGA,OAAO,KAAK,EAEV,eAAe,EAEf,UAAU,EACX,MAAM,SAAS,CAAC;AAIjB,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAqB,EACrB,gBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAe3B;AA+BD,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,kDA2DtB"}
+{"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;AAKjB,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAqB,EACrB,gBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAe3B;AA+BD,eAAO,MAAM,KAAK,4DAwEhB,CAAC"}

package/dist/lib/Components/Point/Point.js

@@ -1,122 +1,123 @@
-import { jsxs as A, jsx as n } from "react/jsx-runtime";
-import { DEFAULT_SIZE as E, LABEL_FONT_SIZE as P, STROKE_WIDTH as S } from "./constants.js";
-import { usePointGeometry as T } from "./usePointGeometry.js";
-import { resolveLabel as k, computeLabelGeometry as _, buildArrowPoints as w } from "./utils.js";
+import { jsxs as P, jsx as n } from "react/jsx-runtime";
+import { memo as E } from "react";
+import { DEFAULT_SIZE as S, LABEL_FONT_SIZE as T, STROKE_WIDTH as k } from "./constants.js";
+import { usePointGeometry as _ } from "./usePointGeometry.js";
+import { resolveLabel as w, computeLabelGeometry as F, buildArrowPoints as G } from "./utils.js";
 import { cssVar as l } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-function F({
-  style: t,
-  textAnchor: e = "middle",
+function I({
+  style: i,
+  textAnchor: t = "middle",
   dominantBaseline: o = "auto",
-  ...r
+  ...e
 }) {
   return /* @__PURE__ */ n(
     "text",
     {
-      textAnchor: e,
+      textAnchor: t,
       dominantBaseline: o,
       style: {
         fill: l("var(--text-base)"),
-        fontSize: P,
+        fontSize: T,
         fontWeight: l("var(--font-style-body-4-weight-medium)"),
         fontFamily: l("var(--font-family-font)"),
-        ...t
+        ...i
       },
-      ...r
+      ...e
     }
   );
 }
-function G({ x: t, y: e, size: o, color: r }) {
-  const u = o / 2, a = r ?? l("var(--background-muted-strong)");
+function V({ x: i, y: t, size: o, color: e }) {
+  const c = o / 2, m = e ?? l("var(--background-muted-strong)");
   return /* @__PURE__ */ n(
     "circle",
     {
       "data-testid": "point-circle",
-      cx: t,
-      cy: e,
-      r: u,
+      cx: i,
+      cy: t,
+      r: c,
       style: {
-        fill: a,
+        fill: m,
         stroke: l("var(--background-canvas)")
       },
-      strokeWidth: S
+      strokeWidth: k
     }
   );
 }
-function I({ x: t, y: e, size: o, position: r }) {
+function W({ x: i, y: t, size: o, position: e }) {
   return /* @__PURE__ */ n(
     "polygon",
     {
       "data-testid": "point-arrow",
-      points: w(t, e, o / 2, r),
+      points: G(i, t, o / 2, e),
       style: { fill: l("var(--text-base)") }
     }
   );
 }
-function Z({
+const K = E(function({
   dataX: t,
-  dataY: e,
-  color: o,
-  label: r,
-  LabelComponent: u,
-  labelPosition: a = "top",
-  hidePoint: d = !1,
-  showLabelArrow: m = !0,
-  size: f = E,
-  onClick: x,
-  magnetic: p = !1,
-  labelAlignment: b = "auto"
+  dataY: o,
+  color: e,
+  label: c,
+  LabelComponent: m,
+  labelPosition: f = "top",
+  hidePoint: p = !1,
+  showLabelArrow: x = !0,
+  size: u = S,
+  onClick: y,
+  magnetic: b = !1,
+  labelAlignment: v = "auto"
 }) {
-  const { pixel: i, drawingArea: v, revealStyle: g, isVisible: L } = T({
+  const { pixel: r, drawingArea: g, revealStyle: L, isVisible: h } = _({
     dataX: t,
-    dataY: e,
-    magnetic: p
+    dataY: o,
+    magnetic: b
   });
-  if (!L || !i)
+  if (!h || !r)
     return null;
-  const s = k(r, t), y = s !== void 0, c = y ? _({
-    text: s,
-    pixelX: i.x,
-    pixelY: i.y,
-    size: f,
-    labelPosition: a,
-    showLabelArrow: m,
-    area: v,
-    alignment: b
-  }) : null, h = u ?? F;
-  return /* @__PURE__ */ A(
+  const a = w(c, t), d = a !== void 0, s = d ? F({
+    text: a,
+    pixelX: r.x,
+    pixelY: r.y,
+    size: u,
+    labelPosition: f,
+    showLabelArrow: x,
+    area: g,
+    alignment: v
+  }) : null, A = m ?? I;
+  return /* @__PURE__ */ P(
     "g",
     {
       "data-testid": "point-group",
-      onClick: x,
+      onClick: y,
       style: {
-        ...g,
-        ...x ? { cursor: "pointer" } : void 0
+        ...L,
+        ...y ? { cursor: "pointer" } : void 0
       },
       children: [
-        !d && /* @__PURE__ */ n(G, { x: i.x, y: i.y, size: f, color: o }),
-        y && m && /* @__PURE__ */ n(
-          I,
+        !p && /* @__PURE__ */ n(V, { x: r.x, y: r.y, size: u, color: e }),
+        d && x && /* @__PURE__ */ n(
+          W,
           {
-            x: i.x,
-            y: i.y,
-            size: f,
-            position: a
+            x: r.x,
+            y: r.y,
+            size: u,
+            position: f
           }
         ),
-        s != null && c && /* @__PURE__ */ n(
-          h,
+        a != null && s && /* @__PURE__ */ n(
+          A,
           {
-            x: c.x,
-            y: c.y,
-            textAnchor: c.textAnchor,
-            children: s
+            x: s.x,
+            y: s.y,
+            textAnchor: s.textAnchor,
+            children: a
           }
         )
       ]
     }
   );
-}
+});
 export {
-  Z as Point,
-  F as PointLabel
+  K as Point,
+  I as PointLabel
 };

package/dist/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/lib/Components/Point/pointContext/MagneticPointsProvider.js

@@ -1,19 +1,22 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useRef as g, useState as p, useCallback as n, useMemo as P } from "react";
-import { MagneticPointsContextProvider as l } from "./magneticPointsContext.js";
-function C({
+import { useRef as l, useState as v, useCallback as n, useMemo as g } from "react";
+import { MagneticRegistryProvider as h, MagneticSnapshotProvider as M } from "./magneticPointsContext.js";
+function S({
   children: f
 }) {
-  const e = g(/* @__PURE__ */ new Set()), [o, s] = p(0), i = n((r) => {
-    e.current.has(r) || (e.current.add(r), s((t) => t + 1));
+  const e = l(/* @__PURE__ */ new Set()), [s, o] = v(0), i = n((r) => {
+    e.current.has(r) || (e.current.add(r), o((t) => t + 1));
   }, []), c = n((r) => {
-    e.current.has(r) && (e.current.delete(r), s((t) => t + 1));
-  }, []), u = n(() => e.current, []), m = P(
-    () => ({ register: i, unregister: c, getMagneticPoints: u, version: o }),
-    [i, c, u, o]
+    e.current.has(r) && (e.current.delete(r), o((t) => t + 1));
+  }, []), u = n(() => e.current, []), m = g(
+    () => ({ register: i, unregister: c }),
+    [i, c]
+  ), p = g(
+    () => ({ version: s, getMagneticPoints: u }),
+    [s, u]
   );
-  return /* @__PURE__ */ a(l, { value: m, children: f });
+  return /* @__PURE__ */ a(h, { value: m, children: /* @__PURE__ */ a(M, { value: p, children: f }) });
 }
 export {
-  C as MagneticPointsProvider
+  S as MagneticPointsProvider
 };

package/dist/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/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/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/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/lib/Components/Point/pointContext/magneticPointsContext.js

@@ -1,9 +1,14 @@
-import { createSafeContext as t } from "../../../../libs/utils-shared/dist/index.js";
-const [o, e] = t("MagneticPoints"), i = () => e({
-  consumerName: "useMagneticPointsContext",
+import { createSafeContext as e } from "../../../../libs/utils-shared/dist/index.js";
+const [a, t] = e("MagneticRegistry"), [o, n] = e("MagneticSnapshot"), i = () => t({
+  consumerName: "useMagneticRegistry",
+  contextRequired: !0
+}), c = () => n({
+  consumerName: "useMagneticSnapshot",
   contextRequired: !0
 });
 export {
-  o as MagneticPointsContextProvider,
-  i as useMagneticPointsContext
+  a as MagneticRegistryProvider,
+  o as MagneticSnapshotProvider,
+  i as useMagneticRegistry,
+  c as useMagneticSnapshot
 };

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

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { DrawingArea } from '../../utils/types';
 import { BaseAxisProps } from '../Axis';
-import { MagneticPointsContextValue } from './pointContext/magneticPointsContext';
+import { 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/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":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,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,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;IACvC,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":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,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,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;IACvC,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/lib/Components/Point/usePointGeometry.js

@@ -1,30 +1,30 @@
-import { useMemo as x, useEffect as a } from "react";
-import { projectPoint as v } from "../../utils/scales/scales.js";
-import { isWithinBounds as C, resolveDataXToIndex as S } from "./utils.js";
-import { useCartesianChartContext as g } from "../CartesianChart/context/cartesianChartContext.js";
-import { useMagneticPointsContext as y } from "./pointContext/magneticPointsContext.js";
-import { usePointReveal as P } from "../CartesianChart/RevealAnimation/context.js";
+import { useMemo as a, useEffect as x } from "react";
+import { projectPoint as g } from "../../utils/scales/scales.js";
+import { isWithinBounds as v, resolveDataXToIndex as y } from "./utils.js";
+import { useCartesianChartContext as S } from "../CartesianChart/context/cartesianChartContext.js";
+import { useMagneticRegistry as R } from "./pointContext/magneticPointsContext.js";
+import { usePointReveal as d } from "../CartesianChart/RevealAnimation/context.js";
 const A = ({
-  dataX: t,
-  dataY: e,
-  magnetic: n
+  dataX: e,
+  dataY: t,
+  magnetic: r
 }) => {
-  const { getXScale: r, getYScale: i, getXAxisConfig: o, drawingArea: u } = g(), f = y();
-  d(n, t, o, f);
-  const c = r(), m = i(), s = x(() => {
+  const { getXScale: i, getYScale: n, getXAxisConfig: o, drawingArea: u } = S(), f = R();
+  C(r, e, o, f);
+  const c = i(), m = n(), s = a(() => {
     if (!(!c || !m))
-      return v(t, e, c, m);
-  }, [t, e, c, m]), l = P(), p = s !== void 0 && C(s.x, s.y, u);
+      return g(e, t, c, m);
+  }, [e, t, c, m]), l = d(), p = s !== void 0 && v(s.x, s.y, u);
   return { pixel: s, drawingArea: u, revealStyle: l, isVisible: p };
-}, d = (t, e, n, { register: r, unregister: i }) => {
-  a(() => {
-    if (!t) return;
-    const o = S(e, n());
+}, C = (e, t, r, { register: i, unregister: n }) => {
+  x(() => {
+    if (!e) return;
+    const o = y(t, r());
     if (o !== void 0)
-      return r(o), () => i(o);
-  }, [t, e, n, r, i]);
+      return i(o), () => n(o);
+  }, [e, t, r, i, n]);
 };
 export {
-  d as useMagneticRegistration,
+  C as useMagneticRegistration,
   A as usePointGeometry
 };

package/dist/lib/Components/Scrubber/ScrubberProvider.js

@@ -3,7 +3,7 @@ import { useState as K, useRef as k, useMemo as X, useCallback as c, useEffect a
 import { clamp as p } from "../../utils/numbers.js";
 import { buildSortedMagnets as z, getDataIndexFromPosition as H, resolvePixelX as N, applyMagnetization as U } from "./utils.js";
 import { useCartesianChartContext as V } from "../CartesianChart/context/cartesianChartContext.js";
-import { useMagneticPointsContext as G } from "../Point/pointContext/magneticPointsContext.js";
+import { useMagneticSnapshot as G } from "../Point/pointContext/magneticPointsContext.js";
 import { ScrubberContextProvider as J } from "./context/scrubberContext.js";
 function S({
   children: R,
@@ -17,31 +17,31 @@ function S({
   ), h = k(m);
   h.current = m;
   const g = k(null), l = k(0), A = X(() => {
-    const t = w();
+    const e = w();
     return z({
-      magneticIndices: t,
-      getPixelForIndex: (e) => N(e, f, v())
+      magneticIndices: e,
+      getPixelForIndex: (t) => N(t, f, v())
     });
   }, [T, w, f, v]), i = c(
-    (t) => {
-      const e = t === void 0 || n <= 0 ? void 0 : p(t, 0, n - 1);
-      B(e), y?.(e);
+    (e) => {
+      const t = e === void 0 || n <= 0 ? void 0 : p(e, 0, n - 1);
+      B(t), y?.(t);
     },
     [n, y]
   ), I = c(
-    (t) => {
-      const e = f();
-      if (!e || !r || n <= 0) return;
+    (e) => {
+      const t = f();
+      if (!t || !r || n <= 0) return;
       const a = v();
       let o = H(
-        t,
         e,
+        t,
         a,
         n
       );
       E > 0 && (o = U({
         resolvedIndex: o,
-        pixelX: t,
+        pixelX: e,
         sortedMagnets: A,
         magnetRadius: E
       })), o !== h.current && i(o);
@@ -56,57 +56,57 @@ function S({
       i
     ]
   ), u = c(
-    (t) => {
-      g.current = t, l.current || (l.current = requestAnimationFrame(() => {
+    (e) => {
+      g.current = e, l.current || (l.current = requestAnimationFrame(() => {
         l.current = 0;
-        const e = g.current;
-        e !== null && (g.current = null, I(e));
+        const t = g.current;
+        t !== null && (g.current = null, I(t));
       }));
     },
     [I]
   ), s = c(() => {
     r && i(void 0);
   }, [r, i]), L = c(
-    (t) => {
-      const a = t.currentTarget.getBoundingClientRect();
-      u(t.clientX - a.left);
+    (e) => {
+      const a = e.currentTarget.getBoundingClientRect();
+      u(e.clientX - a.left);
     },
     [u]
   ), x = c(
-    (t) => {
-      if (!r || !t.touches.length) return;
-      const e = t.touches[0], o = t.currentTarget.getBoundingClientRect();
-      u(e.clientX - o.left);
+    (e) => {
+      if (!r || !e.touches.length) return;
+      const t = e.touches[0], o = e.currentTarget.getBoundingClientRect();
+      u(t.clientX - o.left);
     },
     [r, u]
   ), P = c(
-    (t) => {
-      if (!t.touches.length) return;
-      t.preventDefault();
-      const e = t.touches[0], o = t.currentTarget.getBoundingClientRect();
-      u(e.clientX - o.left);
+    (e) => {
+      if (!e.touches.length) return;
+      e.preventDefault();
+      const t = e.touches[0], o = e.currentTarget.getBoundingClientRect();
+      u(t.clientX - o.left);
     },
     [u]
   ), C = c(
-    (t) => {
+    (e) => {
       if (!r || n <= 0) return;
-      const e = n - 1, a = h.current ?? e, o = t.shiftKey ? p(Math.floor(e * 0.1), 1, 10) : 1;
+      const t = n - 1, a = h.current ?? t, o = e.shiftKey ? p(Math.floor(t * 0.1), 1, 10) : 1;
       let d;
-      switch (t.key) {
+      switch (e.key) {
         case "ArrowLeft":
-          t.preventDefault(), d = p(a - o, 0, e);
+          e.preventDefault(), d = p(a - o, 0, t);
           break;
         case "ArrowRight":
-          t.preventDefault(), d = p(a + o, 0, e);
+          e.preventDefault(), d = p(a + o, 0, t);
           break;
         case "Home":
-          t.preventDefault(), d = 0;
+          e.preventDefault(), d = 0;
           break;
         case "End":
-          t.preventDefault(), d = e;
+          e.preventDefault(), d = t;
           break;
         case "Escape":
-          t.preventDefault(), d = void 0;
+          e.preventDefault(), d = void 0;
           break;
         default:
           return;
@@ -118,10 +118,10 @@ function S({
     !r || h.current === void 0 || s();
   }, [r, s]);
   j(() => {
-    const t = D.current;
-    if (!(!t || !r))
-      return t.addEventListener("mousemove", L), t.addEventListener("mouseleave", s), t.addEventListener("touchstart", x, { passive: !1 }), t.addEventListener("touchmove", P, { passive: !1 }), t.addEventListener("touchend", s), t.addEventListener("touchcancel", s), t.addEventListener("keydown", C), t.addEventListener("blur", M), () => {
-        t.removeEventListener("mousemove", L), t.removeEventListener("mouseleave", s), t.removeEventListener("touchstart", x), t.removeEventListener("touchmove", P), t.removeEventListener("touchend", s), t.removeEventListener("touchcancel", s), t.removeEventListener("keydown", C), t.removeEventListener("blur", M), cancelAnimationFrame(l.current), l.current = 0;
+    const e = D.current;
+    if (!(!e || !r))
+      return e.addEventListener("mousemove", L), e.addEventListener("mouseleave", s), e.addEventListener("touchstart", x, { passive: !1 }), e.addEventListener("touchmove", P, { passive: !1 }), e.addEventListener("touchend", s), e.addEventListener("touchcancel", s), e.addEventListener("keydown", C), e.addEventListener("blur", M), () => {
+        e.removeEventListener("mousemove", L), e.removeEventListener("mouseleave", s), e.removeEventListener("touchstart", x), e.removeEventListener("touchmove", P), e.removeEventListener("touchend", s), e.removeEventListener("touchcancel", s), e.removeEventListener("keydown", C), e.removeEventListener("blur", M), cancelAnimationFrame(l.current), l.current = 0;
       };
   }, [
     D,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react-visualization",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -33,8 +33,8 @@
     ]
   },
   "peerDependencies": {
-    "@ledgerhq/lumen-design-core": "0.1.17",
-    "@ledgerhq/lumen-ui-react": "0.1.42",
+    "@ledgerhq/lumen-design-core": "0.1.18",
+    "@ledgerhq/lumen-ui-react": "0.1.43",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",
@@ -42,7 +42,7 @@
     "tailwind-merge": "^2.6.0"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.5",
+    "@ledgerhq/lumen-utils-shared": "0.1.6",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react-visualization",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@ledgerhq/lumen-design-core": "0.1.18",
-    "@ledgerhq/lumen-ui-react": "0.1.43",
+    "@ledgerhq/lumen-ui-react": "0.1.44",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",