@almadar/ui 5.118.0 → 5.119.0

package/dist/runtime/index.cjs

@@ -34732,11 +34732,11 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
-function measureLabelWidth(text) {
+function measureLabelWidth(text, fontFamily = "system-ui") {
   if (typeof document === "undefined") return text.length * 6;
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
-  labelMeasureCtx.font = "12px system-ui";
+  labelMeasureCtx.font = `12px ${fontFamily}`;
   return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
@@ -34761,6 +34761,9 @@ function mulberry32(a) {
     return ((t ^ t >>> 14) >>> 0) / 4294967296;
   };
 }
+function edgeKeyOf(a, b) {
+  return a < b ? `${a}\0${b}` : `${b}\0${a}`;
+}
 function resolveColor3(color, el) {
   const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
   if (!m) return color;
@@ -34894,6 +34897,7 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const labelFont = resolveColor3("var(--font-family)", canvas) || "system-ui";
         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) => {
@@ -34928,10 +34932,15 @@ var init_GraphCanvas = __esm({
         const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
           const maxIterations = 300;
-          const tick = () => {
+          const COOL = 0.12;
+          const COLLIDE_PASSES = 6;
+          const LABEL_GAP = 12;
+          const LABEL_H = 16;
+          const tick = (iter) => {
             const nodes = nodesRef.current;
             const centerX = w / 2;
             const centerY = h / 2;
+            const temp = Math.max(COOL, 1 - iter / maxIterations);
             for (const node of nodes) {
               node.fx = 0;
               node.fy = 0;
@@ -34941,7 +34950,7 @@ var init_GraphCanvas = __esm({
                 const dx = nodes[j].x - nodes[i].x;
                 const dy = nodes[j].y - nodes[i].y;
                 const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const force = repulsion / (dist * dist);
+                const force = repulsion / (dist * dist) * temp;
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
                 nodes[i].fx -= fx;
@@ -34951,42 +34960,34 @@ var init_GraphCanvas = __esm({
               }
             }
             const nodeById = new Map(nodes.map((n) => [n.id, n]));
-            if (propSimilarity.length > 0) {
-              for (const pair of propSimilarity) {
-                const source = nodeById.get(pair.source);
-                const target = nodeById.get(pair.target);
-                if (!source || !target) continue;
-                const dx = target.x - source.x;
-                const dy = target.y - source.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const w2 = Math.min(1, Math.max(0, pair.weight));
-                const linkTarget = linkDistance * (1 - w2);
-                const force = (dist - linkTarget) * (0.04 + 0.1 * w2);
-                const fx = dx / dist * force;
-                const fy = dy / dist * force;
-                source.fx += fx;
-                source.fy += fy;
-                target.fx -= fx;
-                target.fy -= fy;
-              }
-            } else {
-              for (const edge of propEdges) {
-                const source = nodeById.get(edge.source);
-                const target = nodeById.get(edge.target);
-                if (!source || !target) continue;
-                const dx = target.x - source.x;
-                const dy = target.y - source.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const w2 = Math.min(1, Math.max(0, edge.weight ?? 1));
-                const linkTarget = linkDistance * (0.5 + (1 - w2) * 1.5);
-                const force = (dist - linkTarget) * (0.04 + 0.1 * w2);
-                const fx = dx / dist * force;
-                const fy = dy / dist * force;
-                source.fx += fx;
-                source.fy += fy;
-                target.fx -= fx;
-                target.fy -= fy;
-              }
+            const spring = (a, b, rest, k) => {
+              const dx = b.x - a.x;
+              const dy = b.y - a.y;
+              const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+              const force = (dist - rest) * k * temp;
+              const fx = dx / dist * force;
+              const fy = dy / dist * force;
+              a.fx += fx;
+              a.fy += fy;
+              b.fx -= fx;
+              b.fy -= fy;
+            };
+            const drawnPairs = /* @__PURE__ */ new Set();
+            for (const edge of propEdges) {
+              const source = nodeById.get(edge.source);
+              const target = nodeById.get(edge.target);
+              if (!source || !target) continue;
+              drawnPairs.add(edgeKeyOf(edge.source, edge.target));
+              const w2 = Math.min(1, Math.max(0, edge.weight ?? 1));
+              spring(source, target, linkDistance * (0.35 + (1 - w2) * 0.3), 0.14);
+            }
+            for (const pair of propSimilarity) {
+              if (drawnPairs.has(edgeKeyOf(pair.source, pair.target))) continue;
+              const source = nodeById.get(pair.source);
+              const target = nodeById.get(pair.target);
+              if (!source || !target) continue;
+              const w2 = Math.min(1, Math.max(0, pair.weight));
+              spring(source, target, linkDistance * (1.35 - 0.55 * w2), 0.015);
             }
             const centroids = /* @__PURE__ */ new Map();
             for (const node of nodes) {
@@ -35000,14 +35001,20 @@ var init_GraphCanvas = __esm({
               c.y += node.y;
               c.n += 1;
             }
+            const multiCluster = centroids.size > 1;
             for (const node of nodes) {
-              const c = centroids.get(node.group ?? "__none__");
-              if (c && c.n > 1) {
-                node.fx += (c.x / c.n - node.x) * 0.04;
-                node.fy += (c.y / c.n - node.y) * 0.04;
+              if (multiCluster) {
+                const c = centroids.get(node.group ?? "__none__");
+                if (c && c.n > 1) {
+                  node.fx += (c.x / c.n - node.x) * 0.04 * temp;
+                  node.fy += (c.y / c.n - node.y) * 0.04 * temp;
+                } else {
+                  node.fx += (centerX - node.x) * 0.01 * temp;
+                  node.fy += (centerY - node.y) * 0.01 * temp;
+                }
               } else {
-                node.fx += (centerX - node.x) * 0.01;
-                node.fy += (centerY - node.y) * 0.01;
+                node.fx += (centerX - node.x) * 8e-3 * temp;
+                node.fy += (centerY - node.y) * 8e-3 * temp;
               }
             }
             const damping = 0.9;
@@ -35019,42 +35026,53 @@ 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 = 16;
             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 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));
+            const rectsOf = (n) => {
+              const r = n.size || 8;
+              const lw = showLabels ? n.labelW ?? (n.labelW = n.label ? measureLabelWidth(n.label, labelFont) : 0) : 0;
+              return {
+                circle: [n.x - r - pad, n.y - r - pad, n.x + r + pad, n.y + r + pad],
+                label: [n.x - lw / 2 - pad, n.y + r + LABEL_GAP - 8, n.x + lw / 2 + pad, n.y + r + LABEL_GAP + LABEL_H]
+              };
+            };
+            const sep = (r1, r2) => {
+              const ox = Math.min(r1[2], r2[2]) - Math.max(r1[0], r2[0]);
+              const oy = Math.min(r1[3], r2[3]) - Math.max(r1[1], r2[1]);
+              if (ox <= 0 || oy <= 0) return null;
+              return ox <= oy ? { axis: "x", depth: ox, sign: r1[0] + r1[2] < r2[0] + r2[2] ? 1 : -1 } : { axis: "y", depth: oy, sign: r1[1] + r1[3] < r2[1] + r2[3] ? 1 : -1 };
+            };
+            for (let pass = 0; pass < COLLIDE_PASSES; pass++) {
+              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 ra = rectsOf(a);
+                  const rb = rectsOf(b);
+                  let best = null;
+                  for (const [r1, r2] of [[ra.circle, rb.circle], [ra.circle, rb.label], [ra.label, rb.circle], [ra.label, rb.label]]) {
+                    const s = sep(r1, r2);
+                    if (s && (!best || s.depth < best.depth)) best = s;
+                  }
+                  if (best) {
+                    const push = best.depth / 2;
+                    if (best.axis === "x") {
+                      a.x = Math.max(30, Math.min(w - 30, a.x - push * best.sign));
+                      b.x = Math.max(30, Math.min(w - 30, b.x + push * best.sign));
+                      a.vx = 0;
+                      b.vx = 0;
+                    } else {
+                      a.y = Math.max(30, Math.min(h - 30, a.y - push * best.sign));
+                      b.y = Math.max(30, Math.min(h - 30, b.y + push * best.sign));
+                      a.vy = 0;
+                      b.vy = 0;
+                    }
                   }
                 }
               }
             }
           };
           if (fullRelayout) {
-            for (let i = 0; i < maxIterations; i++) tick();
+            for (let i = 0; i < maxIterations; i++) tick(i);
             laidOutRef.current = true;
           } else {
             const centroids = /* @__PURE__ */ new Map();

package/dist/runtime/index.js

@@ -34688,11 +34688,11 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
-function measureLabelWidth(text) {
+function measureLabelWidth(text, fontFamily = "system-ui") {
   if (typeof document === "undefined") return text.length * 6;
   if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
   if (!labelMeasureCtx) return text.length * 6;
-  labelMeasureCtx.font = "12px system-ui";
+  labelMeasureCtx.font = `12px ${fontFamily}`;
   return labelMeasureCtx.measureText(text).width + 4;
 }
 function getGroupColor(group, groups) {
@@ -34717,6 +34717,9 @@ function mulberry32(a) {
     return ((t ^ t >>> 14) >>> 0) / 4294967296;
   };
 }
+function edgeKeyOf(a, b) {
+  return a < b ? `${a}\0${b}` : `${b}\0${a}`;
+}
 function resolveColor3(color, el) {
   const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
   if (!m) return color;
@@ -34850,6 +34853,7 @@ var init_GraphCanvas = __esm({
         if (!canvas || propNodes.length === 0) return;
         const w = logicalW;
         const h = height;
+        const labelFont = resolveColor3("var(--font-family)", canvas) || "system-ui";
         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) => {
@@ -34884,10 +34888,15 @@ var init_GraphCanvas = __esm({
         const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
           const maxIterations = 300;
-          const tick = () => {
+          const COOL = 0.12;
+          const COLLIDE_PASSES = 6;
+          const LABEL_GAP = 12;
+          const LABEL_H = 16;
+          const tick = (iter) => {
             const nodes = nodesRef.current;
             const centerX = w / 2;
             const centerY = h / 2;
+            const temp = Math.max(COOL, 1 - iter / maxIterations);
             for (const node of nodes) {
               node.fx = 0;
               node.fy = 0;
@@ -34897,7 +34906,7 @@ var init_GraphCanvas = __esm({
                 const dx = nodes[j].x - nodes[i].x;
                 const dy = nodes[j].y - nodes[i].y;
                 const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const force = repulsion / (dist * dist);
+                const force = repulsion / (dist * dist) * temp;
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
                 nodes[i].fx -= fx;
@@ -34907,42 +34916,34 @@ var init_GraphCanvas = __esm({
               }
             }
             const nodeById = new Map(nodes.map((n) => [n.id, n]));
-            if (propSimilarity.length > 0) {
-              for (const pair of propSimilarity) {
-                const source = nodeById.get(pair.source);
-                const target = nodeById.get(pair.target);
-                if (!source || !target) continue;
-                const dx = target.x - source.x;
-                const dy = target.y - source.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const w2 = Math.min(1, Math.max(0, pair.weight));
-                const linkTarget = linkDistance * (1 - w2);
-                const force = (dist - linkTarget) * (0.04 + 0.1 * w2);
-                const fx = dx / dist * force;
-                const fy = dy / dist * force;
-                source.fx += fx;
-                source.fy += fy;
-                target.fx -= fx;
-                target.fy -= fy;
-              }
-            } else {
-              for (const edge of propEdges) {
-                const source = nodeById.get(edge.source);
-                const target = nodeById.get(edge.target);
-                if (!source || !target) continue;
-                const dx = target.x - source.x;
-                const dy = target.y - source.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const w2 = Math.min(1, Math.max(0, edge.weight ?? 1));
-                const linkTarget = linkDistance * (0.5 + (1 - w2) * 1.5);
-                const force = (dist - linkTarget) * (0.04 + 0.1 * w2);
-                const fx = dx / dist * force;
-                const fy = dy / dist * force;
-                source.fx += fx;
-                source.fy += fy;
-                target.fx -= fx;
-                target.fy -= fy;
-              }
+            const spring = (a, b, rest, k) => {
+              const dx = b.x - a.x;
+              const dy = b.y - a.y;
+              const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+              const force = (dist - rest) * k * temp;
+              const fx = dx / dist * force;
+              const fy = dy / dist * force;
+              a.fx += fx;
+              a.fy += fy;
+              b.fx -= fx;
+              b.fy -= fy;
+            };
+            const drawnPairs = /* @__PURE__ */ new Set();
+            for (const edge of propEdges) {
+              const source = nodeById.get(edge.source);
+              const target = nodeById.get(edge.target);
+              if (!source || !target) continue;
+              drawnPairs.add(edgeKeyOf(edge.source, edge.target));
+              const w2 = Math.min(1, Math.max(0, edge.weight ?? 1));
+              spring(source, target, linkDistance * (0.35 + (1 - w2) * 0.3), 0.14);
+            }
+            for (const pair of propSimilarity) {
+              if (drawnPairs.has(edgeKeyOf(pair.source, pair.target))) continue;
+              const source = nodeById.get(pair.source);
+              const target = nodeById.get(pair.target);
+              if (!source || !target) continue;
+              const w2 = Math.min(1, Math.max(0, pair.weight));
+              spring(source, target, linkDistance * (1.35 - 0.55 * w2), 0.015);
             }
             const centroids = /* @__PURE__ */ new Map();
             for (const node of nodes) {
@@ -34956,14 +34957,20 @@ var init_GraphCanvas = __esm({
               c.y += node.y;
               c.n += 1;
             }
+            const multiCluster = centroids.size > 1;
             for (const node of nodes) {
-              const c = centroids.get(node.group ?? "__none__");
-              if (c && c.n > 1) {
-                node.fx += (c.x / c.n - node.x) * 0.04;
-                node.fy += (c.y / c.n - node.y) * 0.04;
+              if (multiCluster) {
+                const c = centroids.get(node.group ?? "__none__");
+                if (c && c.n > 1) {
+                  node.fx += (c.x / c.n - node.x) * 0.04 * temp;
+                  node.fy += (c.y / c.n - node.y) * 0.04 * temp;
+                } else {
+                  node.fx += (centerX - node.x) * 0.01 * temp;
+                  node.fy += (centerY - node.y) * 0.01 * temp;
+                }
               } else {
-                node.fx += (centerX - node.x) * 0.01;
-                node.fy += (centerY - node.y) * 0.01;
+                node.fx += (centerX - node.x) * 8e-3 * temp;
+                node.fy += (centerY - node.y) * 8e-3 * temp;
               }
             }
             const damping = 0.9;
@@ -34975,42 +34982,53 @@ 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 = 16;
             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 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));
+            const rectsOf = (n) => {
+              const r = n.size || 8;
+              const lw = showLabels ? n.labelW ?? (n.labelW = n.label ? measureLabelWidth(n.label, labelFont) : 0) : 0;
+              return {
+                circle: [n.x - r - pad, n.y - r - pad, n.x + r + pad, n.y + r + pad],
+                label: [n.x - lw / 2 - pad, n.y + r + LABEL_GAP - 8, n.x + lw / 2 + pad, n.y + r + LABEL_GAP + LABEL_H]
+              };
+            };
+            const sep = (r1, r2) => {
+              const ox = Math.min(r1[2], r2[2]) - Math.max(r1[0], r2[0]);
+              const oy = Math.min(r1[3], r2[3]) - Math.max(r1[1], r2[1]);
+              if (ox <= 0 || oy <= 0) return null;
+              return ox <= oy ? { axis: "x", depth: ox, sign: r1[0] + r1[2] < r2[0] + r2[2] ? 1 : -1 } : { axis: "y", depth: oy, sign: r1[1] + r1[3] < r2[1] + r2[3] ? 1 : -1 };
+            };
+            for (let pass = 0; pass < COLLIDE_PASSES; pass++) {
+              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 ra = rectsOf(a);
+                  const rb = rectsOf(b);
+                  let best = null;
+                  for (const [r1, r2] of [[ra.circle, rb.circle], [ra.circle, rb.label], [ra.label, rb.circle], [ra.label, rb.label]]) {
+                    const s = sep(r1, r2);
+                    if (s && (!best || s.depth < best.depth)) best = s;
+                  }
+                  if (best) {
+                    const push = best.depth / 2;
+                    if (best.axis === "x") {
+                      a.x = Math.max(30, Math.min(w - 30, a.x - push * best.sign));
+                      b.x = Math.max(30, Math.min(w - 30, b.x + push * best.sign));
+                      a.vx = 0;
+                      b.vx = 0;
+                    } else {
+                      a.y = Math.max(30, Math.min(h - 30, a.y - push * best.sign));
+                      b.y = Math.max(30, Math.min(h - 30, b.y + push * best.sign));
+                      a.vy = 0;
+                      b.vy = 0;
+                    }
                   }
                 }
               }
             }
           };
           if (fullRelayout) {
-            for (let i = 0; i < maxIterations; i++) tick();
+            for (let i = 0; i < maxIterations; i++) tick(i);
             laidOutRef.current = true;
           } else {
             const centroids = /* @__PURE__ */ new Map();

package/package.json

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