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

package/dist/lib/Components/CartesianChart/RevealAnimation/context.js

@@ -1,4 +1,4 @@
-import { useContext as e, createContext as n, useMemo as r } from "react";
+import { createContext as n, useContext as e, useMemo as r } from "react";
 const o = n(void 0), s = () => e(o)?.clipPathAttr, c = () => {
   const t = e(o);
   return r(() => t?.getPointRevealStyle(), [t]);

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, }: 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":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAS3D,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAqB,EACrB,gBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAe3B;AAED,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,GACjB,EAAE,QAAQ,CAAC,UAAU,CAAC,kDAmEtB"}
+{"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,94 +1,123 @@
-import { jsxs as k, jsx as n } from "react/jsx-runtime";
-import { useMemo as E } from "react";
-import { projectPoint as M } from "../../utils/scales/scales.js";
-import { STROKE_WIDTH as R, DEFAULT_SIZE as T } from "./constants.js";
-import { useMagneticRegistration as z, isWithinBounds as D, resolveLabel as F, buildArrowPoints as I, computeLabelY as Y } from "./utils.js";
-import { useCartesianChartContext as _ } from "../CartesianChart/context/cartesianChartContext.js";
-import { useMagneticPointsContext as B } from "./pointContext/magneticPointsContext.js";
-import { usePointReveal as H } from "../CartesianChart/RevealAnimation/context.js";
-import { cssVar as e } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-function K({
-  style: o,
-  textAnchor: r = "middle",
-  dominantBaseline: i = "auto",
-  ...s
+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 I({
+  style: i,
+  textAnchor: t = "middle",
+  dominantBaseline: o = "auto",
+  ...e
 }) {
   return /* @__PURE__ */ n(
     "text",
     {
-      textAnchor: r,
-      dominantBaseline: i,
+      textAnchor: t,
+      dominantBaseline: o,
       style: {
-        fill: e("var(--text-base)"),
-        fontSize: e("var(--font-style-body-4-size)"),
-        fontWeight: e("var(--font-style-body-4-weight-medium)"),
-        fontFamily: e("var(--font-family-font)"),
-        ...o
+        fill: l("var(--text-base)"),
+        fontSize: T,
+        fontWeight: l("var(--font-style-body-4-weight-medium)"),
+        fontFamily: l("var(--font-family-font)"),
+        ...i
       },
-      ...s
+      ...e
     }
   );
 }
-function $({
-  dataX: o,
-  dataY: r,
-  color: i,
-  label: s,
-  LabelComponent: p,
-  labelPosition: m = "top",
-  hidePoint: y = !1,
+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: i,
+      cy: t,
+      r: c,
+      style: {
+        fill: m,
+        stroke: l("var(--background-canvas)")
+      },
+      strokeWidth: k
+    }
+  );
+}
+function W({ x: i, y: t, size: o, position: e }) {
+  return /* @__PURE__ */ n(
+    "polygon",
+    {
+      "data-testid": "point-arrow",
+      points: G(i, t, o / 2, e),
+      style: { fill: l("var(--text-base)") }
+    }
+  );
+}
+const K = E(function({
+  dataX: t,
+  dataY: o,
+  color: e,
+  label: c,
+  LabelComponent: m,
+  labelPosition: f = "top",
+  hidePoint: p = !1,
   showLabelArrow: x = !0,
-  size: g = T,
-  onClick: u,
-  magnetic: v = !1
+  size: u = S,
+  onClick: y,
+  magnetic: b = !1,
+  labelAlignment: v = "auto"
 }) {
-  const { getXScale: b, getYScale: h, getXAxisConfig: S, drawingArea: L } = _(), w = B();
-  z(v, o, S, w);
-  const l = b(), a = h(), c = g / 2, A = i ?? e("var(--background-muted-strong)"), t = E(() => {
-    if (!(!l || !a))
-      return M(o, r, l, a);
-  }, [o, r, l, a]), C = H();
-  if (!t || !D(t.x, t.y, L))
+  const { pixel: r, drawingArea: g, revealStyle: L, isVisible: h } = _({
+    dataX: t,
+    dataY: o,
+    magnetic: b
+  });
+  if (!h || !r)
     return null;
-  const f = F(s, o), P = f != null, d = x && P, W = Y(t.y, c, m, d), j = p ?? K;
-  return /* @__PURE__ */ k(
+  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: u,
+      onClick: y,
       style: {
-        ...C,
-        ...u ? { cursor: "pointer" } : void 0
+        ...L,
+        ...y ? { cursor: "pointer" } : void 0
       },
       children: [
-        !y && /* @__PURE__ */ n(
-          "circle",
+        !p && /* @__PURE__ */ n(V, { x: r.x, y: r.y, size: u, color: e }),
+        d && x && /* @__PURE__ */ n(
+          W,
           {
-            "data-testid": "point-circle",
-            cx: t.x,
-            cy: t.y,
-            r: c,
-            style: {
-              fill: A,
-              stroke: e("var(--background-canvas)")
-            },
-            strokeWidth: R
+            x: r.x,
+            y: r.y,
+            size: u,
+            position: f
           }
         ),
-        d && /* @__PURE__ */ n(
-          "polygon",
+        a != null && s && /* @__PURE__ */ n(
+          A,
           {
-            "data-testid": "point-arrow",
-            points: I(t.x, t.y, c, m),
-            style: { fill: e("var(--text-base)") }
+            x: s.x,
+            y: s.y,
+            textAnchor: s.textAnchor,
+            children: a
           }
-        ),
-        f != null && /* @__PURE__ */ n(j, { x: t.x, y: W, children: f })
+        )
       ]
     }
   );
-}
+});
 export {
-  $ as Point,
-  K as PointLabel
+  K as Point,
+  I as PointLabel
 };

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

@@ -4,4 +4,6 @@ export declare const ARROW_WIDTH = 6;
 export declare const ARROW_HEIGHT = 4;
 export declare const GAP = 4;
 export declare const LABEL_FONT_SIZE = 10;
+/** Approximate width of a character in the label font, as a ratio of the font size. */
+export declare const LABEL_CHAR_WIDTH_RATIO = 0.6;
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,GAAG,IAAI,CAAC;AACrB,eAAO,MAAM,eAAe,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,GAAG,IAAI,CAAC;AACrB,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,uFAAuF;AACvF,eAAO,MAAM,sBAAsB,MAAM,CAAC"}

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

@@ -1,9 +1,10 @@
-const o = 10, t = 2, c = 6, n = 4, s = 4, E = 10;
+const _ = 10, o = 2, t = 6, A = 4, T = 4, c = 10, n = 0.6;
 export {
-  n as ARROW_HEIGHT,
-  c as ARROW_WIDTH,
-  o as DEFAULT_SIZE,
-  s as GAP,
-  E as LABEL_FONT_SIZE,
-  t as STROKE_WIDTH
+  A as ARROW_HEIGHT,
+  t as ARROW_WIDTH,
+  _ as DEFAULT_SIZE,
+  T as GAP,
+  n as LABEL_CHAR_WIDTH_RATIO,
+  c as LABEL_FONT_SIZE,
+  o as STROKE_WIDTH
 };

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/types.d.ts

@@ -5,6 +5,28 @@ export type PointLabelProps = {
     children: string;
 } & Omit<SVGProps<SVGTextElement>, 'x' | 'y' | 'children'>;
 export type PointLabelComponent = ComponentType<PointLabelProps>;
+/**
+ * Horizontal alignment strategy for a point's label.
+ *
+ * - `'auto'`: keep the label inside the drawing area, anchoring it to the
+ *   nearest edge when it would overflow.
+ * - `'center'`: always centre the label on the point.
+ */
+export type LabelAlignment = 'center' | 'auto';
+/**
+ * Pixel position and styling inputs shared by the point's rendered glyphs. Each
+ * glyph picks the subset it needs and derives its own pixel geometry (e.g.
+ * radius from `size`).
+ */
+type PointGlyphProps = {
+    x: number;
+    y: number;
+    size: number;
+    color?: string;
+    position: 'top' | 'bottom';
+};
+export type PointMarkerProps = Pick<PointGlyphProps, 'x' | 'y' | 'size' | 'color'>;
+export type PointArrowProps = Pick<PointGlyphProps, 'x' | 'y' | 'size' | 'position'>;
 export type PointProps = {
     /**
      * X coordinate in data space (index or explicit value).
@@ -74,5 +96,15 @@ export type PointProps = {
      * @default false
      */
     magnetic?: boolean;
+    /**
+     * Horizontal alignment of the label relative to the chart's drawing area.
+     * With `'auto'`, a label that would overflow the left/right edge is anchored
+     * to that edge and grows inward instead of being clipped, while the arrow
+     * keeps pointing at the exact data point. Use `'center'` to always centre the
+     * label on the point.
+     * @default 'auto'
+     */
+    labelAlignment?: LabelAlignment;
 };
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;;;;;OAKG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEjE;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE/C;;;;GAIG;AACH,KAAK,eAAe,GAAG;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,eAAe,EACf,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,CAC7B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,UAAU,CAChC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;;;;;OAKG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC"}

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

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+import { DrawingArea } from '../../utils/types';
+import { BaseAxisProps } from '../Axis';
+import { MagneticRegistryValue } from './pointContext/magneticPointsContext';
+type Pixel = {
+    x: number;
+    y: number;
+};
+type UsePointGeometryParams = {
+    dataX: number;
+    dataY: number;
+    magnetic: boolean;
+};
+type PointGeometry = {
+    pixel: Pixel | undefined;
+    drawingArea: DrawingArea;
+    revealStyle: CSSProperties | undefined;
+    isVisible: boolean;
+};
+/**
+ * Resolves a point's chart geometry and behaviour: projects its data
+ * coordinates to pixels, registers it as a magnetic snap target when enabled,
+ * exposes the reveal-animation style, and reports whether it falls inside the
+ * drawing area.
+ */
+export declare const usePointGeometry: ({ dataX, dataY, magnetic, }: UsePointGeometryParams) => PointGeometry;
+/**
+ * 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 }: MagneticRegistryValue) => void;
+export {};
+//# sourceMappingURL=usePointGeometry.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,30 @@
+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: e,
+  dataY: t,
+  magnetic: r
+}) => {
+  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 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 };
+}, C = (e, t, r, { register: i, unregister: n }) => {
+  x(() => {
+    if (!e) return;
+    const o = y(t, r());
+    if (o !== void 0)
+      return i(o), () => n(o);
+  }, [e, t, r, i, n]);
+};
+export {
+  C as useMagneticRegistration,
+  A as usePointGeometry
+};

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

@@ -1,6 +1,7 @@
 import { DrawingArea } from '../../utils/types';
 import { BaseAxisProps } from '../Axis';
-import { MagneticPointsContextValue } from './pointContext/magneticPointsContext';
+import { LabelAlignment } from './types';
+export type LabelTextAnchor = 'start' | 'middle' | 'end';
 export declare const isWithinBounds: (px: number, py: number, area: DrawingArea) => boolean;
 /**
  * Builds the three SVG points of the arrow triangle.
@@ -15,12 +16,36 @@ export declare const buildArrowPoints: (cx: number, cy: number, radius: number,
 export declare const resolveLabel: (label: string | ((dataIndex: number) => string) | undefined, dataX: number) => string | undefined;
 export declare const resolveDataXToIndex: (dataX: number, axisConfig: BaseAxisProps | undefined) => number | undefined;
 /**
- * Registers/unregisters a data index as a magnetic snap target
- * when the Point has `magnetic` enabled.
+ * Computes the label's horizontal placement, keeping it inside the drawing area
+ * near the left/right edges. Centred on the point when it fits; otherwise
+ * anchored to the edge and aligned with the arrow's outer vertex (offset by half
+ * the arrow width from the point, when an arrow is rendered).
  */
-export declare const useMagneticRegistration: (magnetic: boolean, dataX: number, getXAxisConfig: () => BaseAxisProps | undefined, { register, unregister }: MagneticPointsContextValue) => void;
+export declare const computeLabelX: (pixelX: number, label: string, area: DrawingArea, alignment: LabelAlignment, hasArrow: boolean) => {
+    x: number;
+    textAnchor: LabelTextAnchor;
+};
 /**
  * Computes the vertical position of the label text baseline.
  */
 export declare const computeLabelY: (pixelY: number, radius: number, labelPosition: "top" | "bottom", renderArrow: boolean) => number;
+/**
+ * Computes where a point's label is drawn: the (optionally clamped) horizontal
+ * placement and the vertical baseline. Label content is resolved separately via
+ * {@link resolveLabel}.
+ */
+export declare const computeLabelGeometry: ({ text, pixelX, pixelY, size, labelPosition, showLabelArrow, area, alignment, }: {
+    text: string;
+    pixelX: number;
+    pixelY: number;
+    size: number;
+    labelPosition: "top" | "bottom";
+    showLabelArrow: boolean;
+    area: DrawingArea;
+    alignment: LabelAlignment;
+}) => {
+    x: number;
+    y: number;
+    textAnchor: LabelTextAnchor;
+};
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAEvF,eAAO,MAAM,cAAc,GACzB,IAAI,MAAM,EACV,IAAI,MAAM,EACV,MAAM,WAAW,KAChB,OAIyB,CAAC;AAE7B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,IAAI,MAAM,EACV,IAAI,MAAM,EACV,QAAQ,MAAM,EACd,UAAU,KAAK,GAAG,QAAQ,KACzB,MAYF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,EAC3D,OAAO,MAAM,KACZ,MAAM,GAAG,SAGX,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,MAAM,EACb,YAAY,aAAa,GAAG,SAAS,KACpC,MAAM,GAAG,SAMX,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;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,eAAe,KAAK,GAAG,QAAQ,EAC/B,aAAa,OAAO,KACnB,MAMF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEzD,eAAO,MAAM,cAAc,GACzB,IAAI,MAAM,EACV,IAAI,MAAM,EACV,MAAM,WAAW,KAChB,OAIyB,CAAC;AAE7B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,IAAI,MAAM,EACV,IAAI,MAAM,EACV,QAAQ,MAAM,EACd,UAAU,KAAK,GAAG,QAAQ,KACzB,MAYF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,EAC3D,OAAO,MAAM,KACZ,MAAM,GAAG,SAGX,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,MAAM,EACb,YAAY,aAAa,GAAG,SAAS,KACpC,MAAM,GAAG,SAMX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,MAAM,WAAW,EACjB,WAAW,cAAc,EACzB,UAAU,OAAO,KAChB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,eAAe,CAAA;CAgB1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,eAAe,KAAK,GAAG,QAAQ,EAC/B,aAAa,OAAO,KACnB,MAMF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,iFASlC;IACD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;IAChC,cAAc,EAAE,OAAO,CAAC;IACxB,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,cAAc,CAAC;CAC3B,KAAG;IACF,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,eAAe,CAAC;CAY7B,CAAC"}

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

@@ -1,38 +1,54 @@
-import { useEffect as d } from "react";
-import { GAP as i, LABEL_FONT_SIZE as p, ARROW_HEIGHT as f, ARROW_WIDTH as v } from "./constants.js";
-const R = (t, n, o) => t >= o.x && t <= o.x + o.width && n >= o.y && n <= o.y + o.height, W = (t, n, o, r) => {
-  const s = v / 2;
+import { GAP as i, LABEL_FONT_SIZE as h, LABEL_CHAR_WIDTH_RATIO as x, ARROW_WIDTH as A, ARROW_HEIGHT as d } from "./constants.js";
+const _ = (t, o, n) => t >= n.x && t <= n.x + n.width && o >= n.y && o <= n.y + n.height, I = (t, o, n, r) => {
+  const e = A / 2;
   if (r === "top") {
-    const c = n - o - i, $ = c - f;
-    return `${t},${c} ${t - s},${$} ${t + s},${$}`;
+    const f = o - n - i, u = f - d;
+    return `${t},${f} ${t - e},${u} ${t + e},${u}`;
   }
-  const e = n + o + i, u = e + f;
-  return `${t},${e} ${t - s},${u} ${t + s},${u}`;
-}, b = (t, n) => {
-  const o = typeof t == "function" ? t(n) : t;
-  return o === "" ? void 0 : o;
-}, h = (t, n) => {
-  const o = n?.data;
-  if (!o || typeof o[0] != "number") return t;
-  const r = o.indexOf(t);
+  const s = o + n + i, c = s + d;
+  return `${t},${s} ${t - e},${c} ${t + e},${c}`;
+}, R = (t, o) => {
+  const n = typeof t == "function" ? t(o) : t;
+  return n === "" ? void 0 : n;
+}, T = (t, o) => {
+  const n = o?.data;
+  if (!n || typeof n[0] != "number") return t;
+  const r = n.indexOf(t);
   if (r !== -1)
     return r;
-}, A = (t, n, o, { register: r, unregister: s }) => {
-  d(() => {
-    if (!t) return;
-    const e = h(n, o());
-    if (e !== void 0)
-      return r(e), () => s(e);
-  }, [t, n, o, r, s]);
-}, E = (t, n, o, r) => {
-  const s = r ? f + i : i;
-  return o === "top" ? t - n - s - i : t + n + s + i + p;
+}, L = (t, o, n, r, e) => {
+  if (r === "center")
+    return { x: t, textAnchor: "middle" };
+  const s = o.length * h * x / 2, c = e ? A / 2 : 0;
+  return t - s < n.x ? { x: t - c, textAnchor: "start" } : t + s > n.x + n.width ? { x: t + c, textAnchor: "end" } : { x: t, textAnchor: "middle" };
+}, O = (t, o, n, r) => {
+  const e = r ? d + i : i;
+  return n === "top" ? t - o - e - i : t + o + e + i + h;
+}, b = ({
+  text: t,
+  pixelX: o,
+  pixelY: n,
+  size: r,
+  labelPosition: e,
+  showLabelArrow: s,
+  area: c,
+  alignment: f
+}) => {
+  const { x: u, textAnchor: $ } = L(
+    o,
+    t,
+    c,
+    f,
+    s
+  ), m = O(n, r / 2, e, s);
+  return { x: u, y: m, textAnchor: $ };
 };
 export {
-  W as buildArrowPoints,
-  E as computeLabelY,
-  R as isWithinBounds,
-  h as resolveDataXToIndex,
-  b as resolveLabel,
-  A as useMagneticRegistration
+  I as buildArrowPoints,
+  b as computeLabelGeometry,
+  L as computeLabelX,
+  O as computeLabelY,
+  _ as isWithinBounds,
+  T as resolveDataXToIndex,
+  R as resolveLabel
 };

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.20",
+  "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.41",
+    "@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.21",
+  "version": "0.1.23",
   "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.44",
     "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"