@almadar/ui 5.118.0 → 5.120.0

package/dist/components/index.cjs

@@ -36626,11 +36626,11 @@ var init_DocumentViewer = __esm({
     exports.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) {
@@ -36655,6 +36655,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;
@@ -36786,8 +36789,12 @@ var init_GraphCanvas = __esm({
       React73.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas || propNodes.length === 0) return;
-        const w = logicalW;
-        const h = height;
+        const viewW = logicalW;
+        const viewH = height;
+        const layoutScale = Math.max(1, Math.min(3, Math.sqrt(propNodes.length / 12)));
+        const w = viewW * layoutScale;
+        const h = viewH * layoutScale;
+        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) => {
@@ -36822,133 +36829,192 @@ 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 SIMILARITY_NEIGHBORS = 5;
+          const SIMILARITY_MIN_WEIGHT = 0.25;
+          const drawnPairs = /* @__PURE__ */ new Set();
+          for (const edge of propEdges) drawnPairs.add(edgeKeyOf(edge.source, edge.target));
+          const similarityNeighbors = /* @__PURE__ */ new Map();
+          {
+            const bySource = /* @__PURE__ */ new Map();
+            for (const pair of propSimilarity) {
+              if (pair.weight < SIMILARITY_MIN_WEIGHT) continue;
+              if (drawnPairs.has(edgeKeyOf(pair.source, pair.target))) continue;
+              const arr = bySource.get(pair.source) ?? [];
+              arr.push(pair);
+              bySource.set(pair.source, arr);
+            }
+            for (const [id, arr] of bySource) {
+              arr.sort((a, b) => b.weight - a.weight);
+              const keep = new Set(arr.slice(0, SIMILARITY_NEIGHBORS).map((p) => p.target));
+              similarityNeighbors.set(id, keep);
+            }
+          }
+          const activeSimilarity = propSimilarity.filter((pair) => {
+            if (drawnPairs.has(edgeKeyOf(pair.source, pair.target))) return false;
+            const a = similarityNeighbors.get(pair.source);
+            const b = similarityNeighbors.get(pair.target);
+            return (a?.has(pair.target) ?? false) || (b?.has(pair.source) ?? false);
+          });
+          const tick = (iter, options) => {
+            const skipForces = options?.skipForces ?? false;
             const nodes = nodesRef.current;
             const centerX = w / 2;
             const centerY = h / 2;
+            const temp = skipForces ? 0 : Math.max(COOL, 1 - iter / maxIterations);
             for (const node of nodes) {
               node.fx = 0;
               node.fy = 0;
             }
-            for (let i = 0; i < nodes.length; i++) {
-              for (let j = i + 1; j < nodes.length; j++) {
-                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 fx = dx / dist * force;
-                const fy = dy / dist * force;
-                nodes[i].fx -= fx;
-                nodes[i].fy -= fy;
-                nodes[j].fx += fx;
-                nodes[j].fy += fy;
+            if (!skipForces) {
+              for (let i = 0; i < nodes.length; i++) {
+                for (let j = i + 1; j < nodes.length; j++) {
+                  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) * temp;
+                  const fx = dx / dist * force;
+                  const fy = dy / dist * force;
+                  nodes[i].fx -= fx;
+                  nodes[i].fy -= fy;
+                  nodes[j].fx += fx;
+                  nodes[j].fy += fy;
+                }
               }
-            }
-            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 nodeById = new Map(nodes.map((n) => [n.id, n]));
+              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 w2 = Math.min(1, Math.max(0, pair.weight));
-                const linkTarget = linkDistance * (1 - w2);
-                const force = (dist - linkTarget) * (0.04 + 0.1 * w2);
+                const force = (dist - rest) * k * temp;
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
-                source.fx += fx;
-                source.fy += fy;
-                target.fx -= fx;
-                target.fy -= fy;
-              }
-            } else {
+                a.fx += fx;
+                a.fy += fy;
+                b.fx -= fx;
+                b.fy -= fy;
+              };
               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;
+                drawnPairs.add(edgeKeyOf(edge.source, edge.target));
                 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;
+                spring(source, target, linkDistance * (0.35 + (1 - w2) * 0.3), 0.14);
               }
-            }
-            const centroids = /* @__PURE__ */ new Map();
-            for (const node of nodes) {
-              const g = node.group ?? "__none__";
-              let c = centroids.get(g);
-              if (!c) {
-                c = { x: 0, y: 0, n: 0 };
-                centroids.set(g, c);
+              for (const pair of activeSimilarity) {
+                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);
               }
-              c.x += node.x;
-              c.y += node.y;
-              c.n += 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;
-              } else {
-                node.fx += (centerX - node.x) * 0.01;
-                node.fy += (centerY - node.y) * 0.01;
+              const centroids = /* @__PURE__ */ new Map();
+              for (const node of nodes) {
+                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 multiCluster = centroids.size > 1;
+              for (const node of nodes) {
+                if (multiCluster) {
+                  const c = centroids.get(node.group ?? "__none__");
+                  if (c && c.n > 1) {
+                    node.fx += (c.x / c.n - node.x) * 0.06 * temp;
+                    node.fy += (c.y / c.n - node.y) * 0.06 * temp;
+                  } else {
+                    node.fx += (centerX - node.x) * 0.01 * temp;
+                    node.fy += (centerY - node.y) * 0.01 * temp;
+                  }
+                } else {
+                  node.fx += (centerX - node.x) * 8e-3 * temp;
+                  node.fy += (centerY - node.y) * 8e-3 * temp;
+                }
+              }
+              const damping = 0.9;
+              for (const node of nodes) {
+                node.vx = (node.vx + node.fx) * damping;
+                node.vy = (node.vy + node.fy) * damping;
+                node.x += node.vx;
+                node.y += node.vy;
               }
             }
-            const damping = 0.9;
             for (const node of nodes) {
-              node.vx = (node.vx + node.fx) * damping;
-              node.vy = (node.vy + node.fy) * damping;
-              node.x += node.vx;
-              node.y += node.vy;
               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);
+            for (let i = 0; i < 4; i++) tick(maxIterations, { skipForces: true });
+            const fitPad = 40;
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            for (const node of nodesRef.current) {
+              const r = node.size || 8;
+              const lw = showLabels ? node.labelW ?? (node.labelW = node.label ? measureLabelWidth(node.label, labelFont) : 0) : 0;
+              minX = Math.min(minX, node.x - r, node.x - lw / 2);
+              minY = Math.min(minY, node.y - r);
+              maxX = Math.max(maxX, node.x + r, node.x + lw / 2);
+              maxY = Math.max(maxY, node.y + r + LABEL_GAP + LABEL_H);
+            }
+            const bboxW = Math.max(1, maxX - minX + fitPad * 2);
+            const bboxH = Math.max(1, maxY - minY + fitPad * 2);
+            const nextZoom = Math.min(1, viewW / bboxW, viewH / bboxH);
+            setZoom(nextZoom);
+            setOffset({ x: fitPad - minX * nextZoom, y: fitPad - minY * nextZoom });
             laidOutRef.current = true;
           } else {
             const centroids = /* @__PURE__ */ new Map();

package/dist/components/index.d.cts

@@ -8832,10 +8832,11 @@ interface GraphEdge {
     color?: string;
 }
 /**
- * All-pairs similarity (cosine 0–1) used ONLY for layout: ideal pair distance
- * is derived from similarity (higher ⇒ closer). Never drawn — `edges` remain
- * the only rendered links. When provided it supersedes edge-weight attraction;
- * when omitted, edges drive layout as before.
+ * All-pairs similarity (cosine 0–1) used ONLY for layout, never drawn — `edges`
+ * remain the only rendered links. It is the SECONDARY macro-layout: pairs that are
+ * NOT directly connected get a weak spring (higher cosine ⇒ closer) so clusters
+ * arrange relative to each other, while drawn `edges` stay the primary tight
+ * structure. When omitted, edges alone drive the layout.
  */
 interface GraphSimilarity {
     source: string;
@@ -8857,9 +8858,10 @@ interface GraphCanvasProps {
     /** Graph edges (the only rendered links) */
     edges?: readonly GraphEdge[];
     /**
-     * All-pairs similarity (cosine 0–1) used ONLY for layout: ideal pair
-     * distance = linkDistance × (1 − cosine). Never drawn. When provided it
-     * supersedes edge-weight attraction; when omitted, edges drive layout.
+     * All-pairs similarity (cosine 0–1) used ONLY for layout, never drawn. It is the
+     * secondary macro-layout: non-connected pairs get a weak spring (higher cosine ⇒
+     * closer) so clusters arrange relative to each other; drawn `edges` stay the
+     * primary tight structure. When omitted, edges alone drive the layout.
      */
     similarity?: readonly GraphSimilarity[];
     /** Canvas height */

package/dist/components/index.d.ts

@@ -8832,10 +8832,11 @@ interface GraphEdge {
     color?: string;
 }
 /**
- * All-pairs similarity (cosine 0–1) used ONLY for layout: ideal pair distance
- * is derived from similarity (higher ⇒ closer). Never drawn — `edges` remain
- * the only rendered links. When provided it supersedes edge-weight attraction;
- * when omitted, edges drive layout as before.
+ * All-pairs similarity (cosine 0–1) used ONLY for layout, never drawn — `edges`
+ * remain the only rendered links. It is the SECONDARY macro-layout: pairs that are
+ * NOT directly connected get a weak spring (higher cosine ⇒ closer) so clusters
+ * arrange relative to each other, while drawn `edges` stay the primary tight
+ * structure. When omitted, edges alone drive the layout.
  */
 interface GraphSimilarity {
     source: string;
@@ -8857,9 +8858,10 @@ interface GraphCanvasProps {
     /** Graph edges (the only rendered links) */
     edges?: readonly GraphEdge[];
     /**
-     * All-pairs similarity (cosine 0–1) used ONLY for layout: ideal pair
-     * distance = linkDistance × (1 − cosine). Never drawn. When provided it
-     * supersedes edge-weight attraction; when omitted, edges drive layout.
+     * All-pairs similarity (cosine 0–1) used ONLY for layout, never drawn. It is the
+     * secondary macro-layout: non-connected pairs get a weak spring (higher cosine ⇒
+     * closer) so clusters arrange relative to each other; drawn `edges` stay the
+     * primary tight structure. When omitted, edges alone drive the layout.
      */
     similarity?: readonly GraphSimilarity[];
     /** Canvas height */