@skygraph/react 0.4.0 → 0.5.0

package/dist/index.js

@@ -31,7 +31,7 @@ import {
   buildPrintHtml,
   printElement,
   useTable
-} from "./chunk-MJAEAFPN.js";
+} from "./chunk-NXB3VAVF.js";
 import {
   Button,
   Input,
@@ -41,13 +41,13 @@ import {
   Tree,
   TreeSelect,
   useTree
-} from "./chunk-6SHHUUAE.js";
+} from "./chunk-UO6VJC3C.js";
 import {
   DataGrid
-} from "./chunk-KCFWFDSP.js";
+} from "./chunk-Z5UGF7EO.js";
 import {
   Checkbox
-} from "./chunk-DRBAZI46.js";
+} from "./chunk-FSV73JI4.js";
 import {
   ConfigProvider,
   Spin,
@@ -2315,9 +2315,7 @@ function RadioGroup({
 }) {
   const config = useConfig();
   const disabled = disabledProp ?? config.disabled ?? false;
-  const [internalValue, setInternalValue] = React3.useState(
-    value ?? defaultValue
-  );
+  const [internalValue, setInternalValue] = React3.useState(value ?? defaultValue);
   const currentValue = value ?? internalValue;
   const groupClass = unstyled ? className ?? "" : [
     "sg-radio-group",
@@ -2349,6 +2347,7 @@ function RadioGroup({
             }
           }
         ),
+        !unstyled && /* @__PURE__ */ jsx4("span", { className: "sg-radio-box", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx4("span", { className: unstyled ? "" : "sg-radio-label", children: opt.label }),
         loading && currentValue === opt.value && /* @__PURE__ */ jsx4(Spin, { size: "small", unstyled })
       ]
@@ -8020,7 +8019,7 @@ import {
   pointsToPath,
   pointsToRoundedPath,
   getBezierPath,
-  nearestSide
+  resolveEdgeEndpoint
 } from "@skygraph/core";
 
 // src/components/complex/Diagram/HoverActions.tsx
@@ -8167,47 +8166,26 @@ function selectionsEqual(a, b) {
 
 // src/components/complex/Diagram/Diagram.tsx
 import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
-function resolveAnchor(graph, nodeId, ref) {
-  const anchors = graph.anchorsOf(nodeId);
-  let anchor;
-  if (typeof ref === "string") {
-    anchor = anchors.find((a) => a.id === ref);
-  } else {
-    let best;
-    let bestDiff = Infinity;
-    for (const a of anchors) {
-      const diff = Math.abs(a.s - ref.s);
-      if (diff < bestDiff) {
-        bestDiff = diff;
-        best = a;
-      }
-    }
-    anchor = best;
-  }
-  if (!anchor) return null;
-  return { point: anchor.point };
-}
-function endpointWorldPoint(graph, ep) {
-  const node = graph.getNode(ep.node);
-  if (!node) return null;
-  const local = resolveAnchor(graph, ep.node, ep.anchor);
-  if (!local) return null;
-  const bounds = graph.boundsOf(ep.node);
-  return [
-    bounds.x + (local.point[0] - localOriginOffset(node).x),
-    bounds.y + (local.point[1] - localOriginOffset(node).y)
-  ];
-}
-function localOriginOffset(node) {
-  const o = node.outline;
-  if (o.kind === "ellipse") return { x: -o.rx, y: -o.ry };
-  return { x: 0, y: 0 };
-}
 function defaultRenderNode(node) {
   return /* @__PURE__ */ jsx40("span", { className: "sg-diagram-node-label", children: node.id });
 }
 var ORTHOGONAL_CORNER_RADIUS = 8;
-function buildEdgePath(edge, start, end, obstacles, sourceBounds, targetBounds, routerOpts) {
+var ENDPOINT_PADDING = 8;
+function resolveEdgeEndpoints(sourceBox, targetBox) {
+  const source = resolveEdgeEndpoint(sourceBox, targetBox, ENDPOINT_PADDING);
+  const target = resolveEdgeEndpoint(targetBox, sourceBox, ENDPOINT_PADDING);
+  return { source, target };
+}
+function edgeMidpoint(graph, ep) {
+  const sb = graph.boundsOf(ep.from.node);
+  const tb = graph.boundsOf(ep.to.node);
+  if (sb.w === 0 || tb.w === 0) return null;
+  const { source, target } = resolveEdgeEndpoints(sb, tb);
+  return [(source.point[0] + target.point[0]) / 2, (source.point[1] + target.point[1]) / 2];
+}
+function buildEdgePath(edge, source, target, obstacles, sourceBounds, targetBounds, routerOpts) {
+  const start = source.point;
+  const end = target.point;
   switch (edge.routing) {
     case "orthogonal": {
       const points = routeOrthogonal(start, end, {
@@ -8216,18 +8194,18 @@ function buildEdgePath(edge, start, end, obstacles, sourceBounds, targetBounds,
         inflate: routerOpts?.inflate,
         maxNodes: routerOpts?.maxNodes,
         sourceBounds,
-        targetBounds
+        targetBounds,
+        stepPosition: routerOpts?.stepPosition,
+        stubLength: routerOpts?.stubLength
       });
       return pointsToRoundedPath(points, routerOpts?.cornerRadius ?? ORTHOGONAL_CORNER_RADIUS);
     }
     case "bezier": {
-      const sourceSide = sourceBounds ? nearestSide(sourceBounds, end) : "right";
-      const targetSide = targetBounds ? nearestSide(targetBounds, start) : "left";
       return getBezierPath({
         source: start,
-        sourceSide,
+        sourceSide: source.side,
         target: end,
-        targetSide,
+        targetSide: target.side,
         curvature: routerOpts?.curvature
       });
     }
@@ -8696,10 +8674,9 @@ function DiagramInner({
   const hoveredEdgeRecord = hoveredEdge != null ? state.edges.get(hoveredEdge) ?? null : null;
   const hoveredEdgeMid = useMemo11(() => {
     if (!hoveredEdgeRecord) return null;
-    const a = endpointWorldPoint(graph, hoveredEdgeRecord.from);
-    const b = endpointWorldPoint(graph, hoveredEdgeRecord.to);
-    if (!a || !b) return null;
-    return { x: (a[0] + b[0]) / 2, y: (a[1] + b[1]) / 2 };
+    const mid = edgeMidpoint(graph, hoveredEdgeRecord);
+    if (!mid) return null;
+    return { x: mid[0], y: mid[1] };
   }, [graph, hoveredEdgeRecord]);
   return /* @__PURE__ */ jsxs36(
     "div",
@@ -8745,53 +8722,33 @@ function DiagramInner({
                   },
                   "aria-hidden": "true",
                   children: [
-                    edgeArrows && /* @__PURE__ */ jsxs36("defs", { children: [
-                      /* @__PURE__ */ jsx40(
-                        "marker",
-                        {
-                          id: "sg-diagram-arrow",
-                          viewBox: "0 0 10 10",
-                          refX: "9",
-                          refY: "5",
-                          markerWidth: "7",
-                          markerHeight: "7",
-                          orient: "auto-start-reverse",
-                          markerUnits: "userSpaceOnUse",
-                          children: /* @__PURE__ */ jsx40(
-                            "path",
-                            {
-                              d: "M 0 0 L 10 5 L 0 10 Z",
-                              fill: "context-stroke",
-                              className: "sg-diagram-arrow-fill"
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx40(
-                        "marker",
-                        {
-                          id: "sg-diagram-arrow-hover",
-                          viewBox: "0 0 10 10",
-                          refX: "9",
-                          refY: "5",
-                          markerWidth: "8",
-                          markerHeight: "8",
-                          orient: "auto-start-reverse",
-                          markerUnits: "userSpaceOnUse",
-                          children: /* @__PURE__ */ jsx40(
-                            "path",
-                            {
-                              d: "M 0 0 L 10 5 L 0 10 Z",
-                              fill: "context-stroke",
-                              className: "sg-diagram-arrow-fill"
-                            }
-                          )
-                        }
-                      )
-                    ] }),
+                    edgeArrows && /* @__PURE__ */ jsx40("defs", { children: /* @__PURE__ */ jsx40(
+                      "marker",
+                      {
+                        id: "sg-diagram-arrow",
+                        viewBox: "-10 -10 20 20",
+                        refX: "0",
+                        refY: "0",
+                        markerWidth: "12",
+                        markerHeight: "12",
+                        orient: "auto-start-reverse",
+                        markerUnits: "strokeWidth",
+                        children: /* @__PURE__ */ jsx40(
+                          "path",
+                          {
+                            d: "M -7 -5 L 0 0 L -7 5",
+                            fill: "none",
+                            stroke: "context-stroke",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            className: "sg-diagram-arrow-fill"
+                          }
+                        )
+                      }
+                    ) }),
                     edges.map(
                       (edge) => renderEdge(
-                        graph,
                         edge,
                         boundsById,
                         routeAroundNodes,
@@ -8891,10 +8848,11 @@ function DiagramInner({
     }
   );
 }
-function renderEdge(graph, edge, boundsById, routeAroundNodes, routerOpts, interactive, arrows, onContextMenu, onMouseEnter, onMouseLeave) {
-  const a = endpointWorldPoint(graph, edge.from);
-  const b = endpointWorldPoint(graph, edge.to);
-  if (!a || !b) return null;
+function renderEdge(edge, boundsById, routeAroundNodes, routerOpts, interactive, arrows, onContextMenu, onMouseEnter, onMouseLeave) {
+  const sBox = boundsById.get(edge.from.node);
+  const tBox = boundsById.get(edge.to.node);
+  if (!sBox || !tBox) return null;
+  const { source, target } = resolveEdgeEndpoints(sBox, tBox);
   let obstacles;
   if (routeAroundNodes && edge.routing === "orthogonal") {
     const skip = /* @__PURE__ */ new Set([edge.from.node, edge.to.node]);
@@ -8903,10 +8861,7 @@ function renderEdge(graph, edge, boundsById, routeAroundNodes, routerOpts, inter
       if (!skip.has(id)) obstacles.push(bb);
     }
   }
-  const needsBounds = edge.routing === "orthogonal" || edge.routing === "bezier";
-  const sourceBounds = needsBounds ? boundsById.get(edge.from.node) : void 0;
-  const targetBounds = needsBounds ? boundsById.get(edge.to.node) : void 0;
-  const d = buildEdgePath(edge, a, b, obstacles, sourceBounds, targetBounds, routerOpts);
+  const d = buildEdgePath(edge, source, target, obstacles, void 0, void 0, routerOpts);
   const markerEnd = arrows ? "url(#sg-diagram-arrow)" : void 0;
   if (!interactive) {
     return /* @__PURE__ */ jsx40(
@@ -9425,7 +9380,7 @@ import {
   useMemo as useMemo14,
   useRef as useRef21
 } from "react";
-import { routeOrthogonal as routeOrthogonal2, pointsToPath as pointsToPath2 } from "@skygraph/core";
+import { pointsToPath as pointsToPath2 } from "@skygraph/core";
 import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 var DAY = 864e5;
 var STEP_MS = {
@@ -9446,11 +9401,18 @@ function alignUp(t, step) {
 function clamp2(v, lo, hi) {
   return Math.max(lo, Math.min(hi, v));
 }
-function formatTick(timeMs, scale) {
+function formatTick(timeMs, scale, columnWidth) {
   const d = new Date(timeMs);
   switch (scale) {
     case "day": {
       const dd = String(d.getUTCDate()).padStart(2, "0");
+      if (columnWidth < 32) {
+        if (d.getUTCDate() === 1) {
+          const mm2 = String(d.getUTCMonth() + 1).padStart(2, "0");
+          return `${dd}.${mm2}`;
+        }
+        return dd;
+      }
       const mm = String(d.getUTCMonth() + 1).padStart(2, "0");
       return `${dd}.${mm}`;
     }
@@ -9530,12 +9492,12 @@ function Gantt({
     for (let t = resolved.rangeStart; t < resolved.rangeEnd; t += resolved.step) {
       out.push({
         x: (t - resolved.rangeStart) * resolved.pxPerMs,
-        label: formatTick(t, scale),
+        label: formatTick(t, scale, columnWidth),
         time: t
       });
     }
     return out;
-  }, [resolved, scale]);
+  }, [resolved, scale, columnWidth]);
   const taskRects = useMemo14(() => {
     return tasks.map((task) => {
       const startMs = toMs(task.start);
@@ -9554,17 +9516,38 @@ function Gantt({
   }, [taskRects]);
   const dependencyPaths = useMemo14(() => {
     const out = [];
+    const STUB = 8;
+    const APPROACH = 18;
     for (const r of taskRects) {
       const deps = r.task.dependencies;
       if (!deps || deps.length === 0) continue;
       for (const depId of deps) {
         const src = taskRectById.get(depId);
         if (!src) continue;
-        const startPt = [src.x + src.w, src.y + src.h / 2];
-        const endPt = [r.x, r.y + r.h / 2];
-        const points = routeOrthogonal2(startPt, endPt, {
-          preferred: "hv"
-        });
+        const sx = src.x + src.w;
+        const sy = src.y + src.h / 2;
+        const tx = r.x;
+        const ey = r.y + r.h / 2;
+        let points;
+        if (tx >= sx + STUB + APPROACH) {
+          const bendX = sx + STUB;
+          points = [
+            [sx, sy],
+            [bendX, sy],
+            [bendX, ey],
+            [tx, ey]
+          ];
+        } else {
+          const detourY = src.y + src.h;
+          points = [
+            [sx, sy],
+            [sx + STUB, sy],
+            [sx + STUB, detourY],
+            [tx - APPROACH, detourY],
+            [tx - APPROACH, ey],
+            [tx, ey]
+          ];
+        }
         out.push({ id: `${depId}->${r.task.id}`, d: pointsToPath2(points) });
       }
     }
@@ -9631,12 +9614,13 @@ function Gantt({
   const wrapperClass = unstyled ? className : ["sg-gantt", className].filter(Boolean).join(" ");
   const headerHeight = rowHeight;
   const gridHeight = resolved.rows.length * rowHeight;
-  const totalHeight = gridHeight + headerHeight;
+  const SCROLLBAR_RESERVE = 14;
+  const totalHeight = gridHeight + headerHeight + SCROLLBAR_RESERVE;
   const wrapperStyle = {
     display: "grid",
-    gridTemplateColumns: `${sidebarWidth}px 1fr`,
+    gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)`,
     width: "100%",
-    overflow: "auto",
+    overflow: "hidden",
     height: totalHeight,
     ...style
   };
@@ -9669,12 +9653,12 @@ function Gantt({
             row.key
           ))
         ] }),
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsx43(
           "div",
           {
             className: unstyled ? void 0 : "sg-gantt-main",
-            style: { position: "relative", width: resolved.totalWidth, minWidth: "100%" },
-            children: [
+            style: { position: "relative", overflowX: "auto", overflowY: "hidden", minWidth: 0 },
+            children: /* @__PURE__ */ jsxs38("div", { style: { position: "relative", width: resolved.totalWidth, minWidth: "100%" }, children: [
               /* @__PURE__ */ jsx43(
                 "div",
                 {
@@ -9723,44 +9707,6 @@ function Gantt({
                       },
                       row.key
                     )),
-                    dependencyPaths.length > 0 && /* @__PURE__ */ jsxs38(
-                      "svg",
-                      {
-                        className: unstyled ? void 0 : "sg-gantt-deps",
-                        width: resolved.totalWidth,
-                        height: gridHeight,
-                        style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "visible" },
-                        "aria-hidden": "true",
-                        children: [
-                          /* @__PURE__ */ jsx43("defs", { children: /* @__PURE__ */ jsx43(
-                            "marker",
-                            {
-                              id: "sg-gantt-arrow",
-                              viewBox: "0 0 10 10",
-                              refX: "8",
-                              refY: "5",
-                              markerWidth: "6",
-                              markerHeight: "6",
-                              orient: "auto",
-                              children: /* @__PURE__ */ jsx43("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "currentColor" })
-                            }
-                          ) }),
-                          dependencyPaths.map((p) => /* @__PURE__ */ jsx43(
-                            "path",
-                            {
-                              d: p.d,
-                              className: unstyled ? void 0 : "sg-gantt-dep",
-                              fill: "none",
-                              stroke: "currentColor",
-                              strokeWidth: 1.5,
-                              markerEnd: "url(#sg-gantt-arrow)",
-                              "data-dep-id": p.id
-                            },
-                            p.id
-                          ))
-                        ]
-                      }
-                    ),
                     taskRects.map(({ task, x, y, w, h }) => {
                       const barClass = unstyled ? void 0 : [
                         "sg-gantt-bar",
@@ -9834,11 +9780,54 @@ function Gantt({
                         },
                         task.id
                       );
-                    })
+                    }),
+                    dependencyPaths.length > 0 && /* @__PURE__ */ jsxs38(
+                      "svg",
+                      {
+                        className: unstyled ? void 0 : "sg-gantt-deps",
+                        width: resolved.totalWidth,
+                        height: gridHeight,
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          pointerEvents: "none",
+                          overflow: "visible"
+                        },
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ jsx43("defs", { children: /* @__PURE__ */ jsx43(
+                            "marker",
+                            {
+                              id: "sg-gantt-arrow",
+                              viewBox: "0 0 10 10",
+                              refX: "10",
+                              refY: "5",
+                              markerWidth: "6",
+                              markerHeight: "6",
+                              orient: "auto",
+                              children: /* @__PURE__ */ jsx43("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "currentColor" })
+                            }
+                          ) }),
+                          dependencyPaths.map((p) => /* @__PURE__ */ jsx43(
+                            "path",
+                            {
+                              d: p.d,
+                              className: unstyled ? void 0 : "sg-gantt-dep",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: 1.5,
+                              markerEnd: "url(#sg-gantt-arrow)",
+                              "data-dep-id": p.id
+                            },
+                            p.id
+                          ))
+                        ]
+                      }
+                    )
                   ]
                 }
               )
-            ]
+            ] })
           }
         )
       ]
@@ -9890,14 +9879,7 @@ function formatTick2(timeMs, scale) {
     }
   }
 }
-function deriveRange2(assignments, step) {
-  if (assignments.length === 0) {
-    const now = Date.now();
-    return {
-      from: new Date(alignDown2(now, step)),
-      to: new Date(alignUp2(now + step * 4, step))
-    };
-  }
+function resolveRange(assignments, step, range) {
   let lo = Infinity;
   let hi = -Infinity;
   for (const a of assignments) {
@@ -9906,6 +9888,22 @@ function deriveRange2(assignments, step) {
     if (s < lo) lo = s;
     if (e > hi) hi = e;
   }
+  if (range) {
+    const rangeFrom = range.from.getTime();
+    const rangeTo = range.to.getTime();
+    if (assignments.length === 0) return { from: new Date(rangeFrom), to: new Date(rangeTo) };
+    return {
+      from: new Date(alignDown2(Math.min(rangeFrom, lo), step)),
+      to: new Date(alignUp2(Math.max(rangeTo, hi), step))
+    };
+  }
+  if (assignments.length === 0) {
+    const now = Date.now();
+    return {
+      from: new Date(alignDown2(now, step)),
+      to: new Date(alignUp2(now + step * 4, step))
+    };
+  }
   return {
     from: new Date(alignDown2(lo - step, step)),
     to: new Date(alignUp2(hi + step, step))
@@ -9936,7 +9934,7 @@ function ResourceCalendar({
   const [ghost, setGhost] = useState21(null);
   const step = STEP_MS2[scale];
   const resolvedRange = useMemo15(
-    () => range ?? deriveRange2(assignments, step),
+    () => resolveRange(assignments, step, range),
     [range, assignments, step]
   );
   const rangeStart = resolvedRange.from.getTime();
@@ -10555,6 +10553,33 @@ function normalizePadding(p) {
   if (typeof p === "number") return [p, p, p, p];
   return [...p];
 }
+function defaultYTickFormatter(value) {
+  if (Number.isInteger(value)) return String(value);
+  if (Math.abs(value) >= 1e3) return value.toFixed(0);
+  if (Math.abs(value) >= 1) return value.toFixed(2).replace(/\.?0+$/, "");
+  return value.toFixed(2);
+}
+function estimateYAxisLabelWidth(min, max, tickCount, formatter) {
+  const fmt = formatter ?? defaultYTickFormatter;
+  const count = Math.max(2, tickCount ?? 5);
+  let maxLen = 0;
+  for (let i = 0; i < count; i++) {
+    const t = i / (count - 1);
+    const value = min + t * (max - min);
+    const s = fmt(value);
+    if (s.length > maxLen) maxLen = s.length;
+  }
+  return maxLen * 7;
+}
+function resolveChartPadding(userPadding, yAxis, yMin, yMax) {
+  const base = normalizePadding(userPadding);
+  if (userPadding !== void 0 || !yAxis) return base;
+  const labelW = estimateYAxisLabelWidth(yMin, yMax, yAxis.tickCount, yAxis.tickFormatter);
+  const need = Math.ceil(labelW + 18);
+  if (need > base[3]) base[3] = need;
+  if (yAxis.label) base[3] += 16;
+  return base;
+}
 function chartBounds(values) {
   let min = Infinity;
   let max = -Infinity;
@@ -11508,7 +11533,11 @@ function LineChartInner({
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
   const svgRef = useRef26(null);
-  const [pt, pr, pb, pl] = normalizePadding(padding);
+  const { min, max } = useMemo19(() => chartBounds(series.map((s) => s.values)), [series]);
+  const [pt, pr, pb, pl] = useMemo19(
+    () => resolveChartPadding(padding, yAxis, min, max),
+    [padding, yAxis, min, max]
+  );
   const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
   const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
   const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
@@ -11516,7 +11545,6 @@ function LineChartInner({
   const viewH = measured.height;
   const plotW = Math.max(0, viewW - pl - pr);
   const plotH = Math.max(0, viewH - pt - pb);
-  const { min, max } = useMemo19(() => chartBounds(series.map((s) => s.values)), [series]);
   const range = max - min || 1;
   const xStep = categories.length > 1 ? plotW / (categories.length - 1) : 0;
   function xFor(i) {
@@ -11785,7 +11813,14 @@ function BarChartInner({
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
   const svgRef = useRef27(null);
-  const [pt, pr, pb, pl] = normalizePadding(padding);
+  const { min, max } = useMemo20(() => chartBounds(series.map((s) => s.values)), [series]);
+  const baseline = Math.min(0, min);
+  const top = Math.max(0, max);
+  const span = top - baseline || 1;
+  const [pt, pr, pb, pl] = useMemo20(
+    () => resolveChartPadding(padding, yAxis, baseline, top),
+    [padding, yAxis, baseline, top]
+  );
   const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
   const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
   const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
@@ -11793,10 +11828,6 @@ function BarChartInner({
   const viewH = measured.height;
   const plotW = Math.max(0, viewW - pl - pr);
   const plotH = Math.max(0, viewH - pt - pb);
-  const { min, max } = useMemo20(() => chartBounds(series.map((s) => s.values)), [series]);
-  const baseline = Math.min(0, min);
-  const top = Math.max(0, max);
-  const span = top - baseline || 1;
   const yZero = pt + top / span * plotH;
   const groupCount = categories.length;
   const groupWidth = groupCount > 0 ? plotW / groupCount : 0;
@@ -11991,14 +12022,6 @@ function AreaChartInner({
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
   const svgRef = useRef28(null);
-  const [pt, pr, pb, pl] = normalizePadding(padding);
-  const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
-  const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
-  const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
-  const viewW = measured.width;
-  const viewH = measured.height;
-  const plotW = Math.max(0, viewW - pl - pr);
-  const plotH = Math.max(0, viewH - pt - pb);
   const stackedValues = useMemo21(() => {
     if (!stacked) return series.map((s) => [...s.values]);
     const totals = new Array(categories.length).fill(0);
@@ -12019,6 +12042,17 @@ function AreaChartInner({
   const baseline = Math.min(0, min);
   const top = Math.max(0, max);
   const span = top - baseline || 1;
+  const [pt, pr, pb, pl] = useMemo21(
+    () => resolveChartPadding(padding, yAxis, baseline, top),
+    [padding, yAxis, baseline, top]
+  );
+  const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
+  const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
+  const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
+  const viewW = measured.width;
+  const viewH = measured.height;
+  const plotW = Math.max(0, viewW - pl - pr);
+  const plotH = Math.max(0, viewH - pt - pb);
   const xStep = categories.length > 1 ? plotW / (categories.length - 1) : 0;
   function xFor(i) {
     return pl + i * xStep;
@@ -12481,10 +12515,20 @@ function ListInner({
     setDragIndex(null);
     setDropIndex(null);
   }, []);
+  const scrollRafRef = React22.useRef(null);
   const handleVirtualScroll = React22.useCallback(() => {
-    if (virtualRef.current) {
-      setScrollTop(virtualRef.current.scrollTop);
-    }
+    if (scrollRafRef.current != null) return;
+    scrollRafRef.current = requestAnimationFrame(() => {
+      scrollRafRef.current = null;
+      if (virtualRef.current) {
+        setScrollTop(virtualRef.current.scrollTop);
+      }
+    });
+  }, []);
+  React22.useEffect(() => {
+    return () => {
+      if (scrollRafRef.current != null) cancelAnimationFrame(scrollRafRef.current);
+    };
   }, []);
   const emptyText = locale?.emptyText ?? "No Data";
   const gridStyle = React22.useMemo(() => {