npm - @almadar/ui - Versions diffs - 5.63.1 → 5.63.2 - Mend

@almadar/ui 5.63.1 → 5.63.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/avl/index.cjs +36 -14
package/dist/avl/index.js +36 -14
package/dist/components/index.cjs +36 -14
package/dist/components/index.js +36 -14
package/dist/providers/index.cjs +36 -14
package/dist/providers/index.js +36 -14
package/dist/runtime/index.cjs +36 -14
package/dist/runtime/index.js +36 -14
package/package.json +1 -1

package/dist/avl/index.cjs CHANGED Viewed

@@ -41203,6 +41203,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -41214,7 +41221,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -41234,6 +41241,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -41414,22 +41422,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -41446,7 +41468,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React93.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/avl/index.js CHANGED Viewed

@@ -41156,6 +41156,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -41167,7 +41174,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -41187,6 +41194,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -41367,22 +41375,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -41399,7 +41421,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/components/index.cjs CHANGED Viewed

@@ -39430,6 +39430,13 @@ var init_DocumentViewer = __esm({
     exports.DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -39441,7 +39448,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2; exports.GraphCanvas = void 0;
+var GROUP_COLORS2, labelMeasureCtx; exports.GraphCanvas = void 0;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -39461,6 +39468,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     exports.GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39641,22 +39649,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39673,7 +39695,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React79.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/components/index.js CHANGED Viewed

@@ -39384,6 +39384,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -39395,7 +39402,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -39415,6 +39422,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39595,22 +39603,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39627,7 +39649,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/providers/index.cjs CHANGED Viewed

@@ -39004,6 +39004,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -39015,7 +39022,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -39035,6 +39042,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39215,22 +39223,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39247,7 +39269,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React85.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/providers/index.js CHANGED Viewed

@@ -38957,6 +38957,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -38968,7 +38975,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -38988,6 +38995,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39168,22 +39176,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39200,7 +39222,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/runtime/index.cjs CHANGED Viewed

@@ -38702,6 +38702,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -38713,7 +38720,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -38733,6 +38740,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -38913,22 +38921,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -38945,7 +38967,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React84.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/dist/runtime/index.js CHANGED Viewed

@@ -38655,6 +38655,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -38666,7 +38673,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -38686,6 +38693,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -38866,22 +38874,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -38898,7 +38920,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;

package/package.json CHANGED Viewed

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