@almadar/ui 5.116.0 → 5.117.0

package/dist/avl/index.cjs

@@ -37242,7 +37242,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -37311,6 +37311,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = React90.useState(null);
       const nodesRef = React90.useRef([]);
+      const laidOutRef = React90.useRef(false);
       const [, forceUpdate] = React90.useState(0);
       const [logicalW, setLogicalW] = React90.useState(800);
       React90.useEffect(() => {
@@ -37380,10 +37381,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -37403,8 +37407,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -37509,20 +37517,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r2 = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r2 * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r2 * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       React90.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/avl/index.js

@@ -37196,7 +37196,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -37265,6 +37265,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
+      const laidOutRef = useRef(false);
       const [, forceUpdate] = useState(0);
       const [logicalW, setLogicalW] = useState(800);
       useEffect(() => {
@@ -37334,10 +37335,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -37357,8 +37361,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -37463,20 +37471,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r2 = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r2 * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r2 * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/components/index.cjs

@@ -36631,7 +36631,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -36700,6 +36700,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = React73.useState(null);
       const nodesRef = React73.useRef([]);
+      const laidOutRef = React73.useRef(false);
       const [, forceUpdate] = React73.useState(0);
       const [logicalW, setLogicalW] = React73.useState(800);
       React73.useEffect(() => {
@@ -36769,10 +36770,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -36792,8 +36796,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -36898,20 +36906,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       React73.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/components/index.js

@@ -36586,7 +36586,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -36655,6 +36655,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
+      const laidOutRef = useRef(false);
       const [, forceUpdate] = useState(0);
       const [logicalW, setLogicalW] = useState(800);
       useEffect(() => {
@@ -36724,10 +36725,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -36747,8 +36751,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -36853,20 +36861,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/providers/index.cjs

@@ -35372,7 +35372,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -35441,6 +35441,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = React83.useState(null);
       const nodesRef = React83.useRef([]);
+      const laidOutRef = React83.useRef(false);
       const [, forceUpdate] = React83.useState(0);
       const [logicalW, setLogicalW] = React83.useState(800);
       React83.useEffect(() => {
@@ -35510,10 +35511,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -35533,8 +35537,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -35639,20 +35647,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       React83.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/providers/index.js

@@ -35327,7 +35327,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -35396,6 +35396,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
+      const laidOutRef = useRef(false);
       const [, forceUpdate] = useState(0);
       const [logicalW, setLogicalW] = useState(800);
       useEffect(() => {
@@ -35465,10 +35466,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -35488,8 +35492,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -35594,20 +35602,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/runtime/index.cjs

@@ -34737,7 +34737,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -34806,6 +34806,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = React81.useState(null);
       const nodesRef = React81.useRef([]);
+      const laidOutRef = React81.useRef(false);
       const [, forceUpdate] = React81.useState(0);
       const [logicalW, setLogicalW] = React81.useState(800);
       React81.useEffect(() => {
@@ -34875,10 +34876,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -34898,8 +34902,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -35004,20 +35012,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       React81.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/runtime/index.js

@@ -34693,7 +34693,7 @@ function measureLabelWidth(text) {
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
   labelMeasureCtx.font = "12px system-ui";
-  return labelMeasureCtx.measureText(text).width;
+  return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
@@ -34762,6 +34762,7 @@ var init_GraphCanvas = __esm({
       offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
+      const laidOutRef = useRef(false);
       const [, forceUpdate] = useState(0);
       const [logicalW, setLogicalW] = useState(800);
       useEffect(() => {
@@ -34831,10 +34832,13 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const prevPos = /* @__PURE__ */ new Map();
+        for (const pn of nodesRef.current) if (pn.x != null && pn.y != null) prevPos.set(pn.id, { x: pn.x, y: pn.y });
         const simNodes = propNodes.map((n, idx) => {
-          let x = n.x ?? 0;
-          let y = n.y ?? 0;
-          if (!n.x || !n.y) {
+          const prev = prevPos.get(n.id);
+          let x = prev?.x ?? n.x ?? 0;
+          let y = prev?.y ?? n.y ?? 0;
+          if (!prev && (!n.x || !n.y)) {
             if (layout === "circular") {
               const angle = idx / propNodes.length * 2 * Math.PI;
               const radius = Math.min(w, h) * 0.35;
@@ -34854,8 +34858,12 @@ var init_GraphCanvas = __esm({
           return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
         });
         nodesRef.current = simNodes;
+        const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
+        const newIdList = simNodes.map((n) => n.id);
+        const kept = newIdList.filter((id) => prevIds.has(id)).length;
+        const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
+        const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          let iterations = 0;
           const maxIterations = 300;
           const tick = () => {
             const nodes = nodesRef.current;
@@ -34960,20 +34968,47 @@ var init_GraphCanvas = __esm({
                 }
               }
             }
-            iterations++;
-            forceUpdate((n) => n + 1);
-            if (iterations < maxIterations) {
-              animRef.current = requestAnimationFrame(tick);
-            }
           };
-          animRef.current = requestAnimationFrame(tick);
+          if (fullRelayout) {
+            for (let i = 0; i < maxIterations; i++) tick();
+            laidOutRef.current = true;
+          } else {
+            const centroids = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (!prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              let c = centroids.get(g);
+              if (!c) {
+                c = { x: 0, y: 0, n: 0 };
+                centroids.set(g, c);
+              }
+              c.x += node.x;
+              c.y += node.y;
+              c.n += 1;
+            }
+            const ringCount = /* @__PURE__ */ new Map();
+            for (const node of simNodes) {
+              if (prevPos.has(node.id)) continue;
+              const g = node.group ?? "__none__";
+              const c = centroids.get(g);
+              const cx = c && c.n > 0 ? c.x / c.n : w / 2;
+              const cy = c && c.n > 0 ? c.y / c.n : h / 2;
+              const k = ringCount.get(g) ?? 0;
+              ringCount.set(g, k + 1);
+              const angle = k * 2.399963;
+              const r = 22 + k * 8;
+              node.x = Math.max(30, Math.min(w - 30, cx + r * Math.cos(angle)));
+              node.y = Math.max(30, Math.min(h - 30, cy + r * Math.sin(angle)));
+            }
+          }
+          forceUpdate((n) => n + 1);
         } else {
           forceUpdate((n) => n + 1);
         }
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.116.0",
+  "version": "5.117.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [