@almadar/ui 5.120.0 → 5.121.0

package/dist/components/index.cjs

@@ -42,6 +42,7 @@ var core$1 = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var react = require('@xyflow/react');
+var d3Force = require('d3-force');
 var patterns = require('@almadar/core/patterns');
 var reactQuery = require('@tanstack/react-query');
 
@@ -36664,7 +36665,10 @@ function resolveColor3(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, labelMeasureCtx; exports.GraphCanvas = void 0;
+function truncateLabel(label) {
+  return label.length > MAX_LABEL_CHARS ? label.slice(0, MAX_LABEL_CHARS - 1) + "\u2026" : label;
+}
+var GROUP_COLORS2, labelMeasureCtx, MAX_LABEL_CHARS; exports.GraphCanvas = void 0;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -36685,6 +36689,7 @@ var init_GraphCanvas = __esm({
       "var(--color-accent)"
     ];
     labelMeasureCtx = null;
+    MAX_LABEL_CHARS = 22;
     exports.GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -36795,6 +36800,7 @@ var init_GraphCanvas = __esm({
         const w = viewW * layoutScale;
         const h = viewH * layoutScale;
         const labelFont = resolveColor3("var(--font-family)", canvas) || "system-ui";
+        const clamp01 = (v) => Math.min(1, Math.max(0, v));
         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) => {
@@ -36819,7 +36825,7 @@ var init_GraphCanvas = __esm({
               y = h * 0.2 + rand() * h * 0.6;
             }
           }
-          return { ...n, x, y, vx: 0, vy: 0, fx: 0, fy: 0 };
+          return { ...n, x, y, vx: 0, vy: 0 };
         });
         nodesRef.current = simNodes;
         const prevIds = /* @__PURE__ */ new Set([...prevPos.keys()]);
@@ -36828,17 +36834,15 @@ var init_GraphCanvas = __esm({
         const overlap = prevIds.size === 0 ? 0 : kept / Math.max(prevIds.size, newIdList.length);
         const fullRelayout = !laidOutRef.current || overlap < 0.5;
         if (layout === "force") {
-          const maxIterations = 300;
-          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();
-          {
+          if (fullRelayout) {
+            const LABEL_GAP = 12;
+            const LABEL_H = 16;
+            for (const n of simNodes) n.labelW = showLabels && n.label ? measureLabelWidth(truncateLabel(n.label), labelFont) : 0;
+            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;
@@ -36849,113 +36853,33 @@ var init_GraphCanvas = __esm({
             }
             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;
-            }
-            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]));
-              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;
-              };
-              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 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);
-              }
-              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;
-              }
+              similarityNeighbors.set(id, new Set(arr.slice(0, SIMILARITY_NEIGHBORS).map((p) => p.target)));
             }
-            for (const node of nodes) {
-              node.x = Math.max(30, Math.min(w - 30, node.x));
-              node.y = Math.max(30, Math.min(h - 30, node.y));
+            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 groupTarget = /* @__PURE__ */ new Map();
+            const multiCluster = groups.length > 1;
+            if (multiCluster) {
+              const ring = Math.min(w, h) * 0.34;
+              groups.forEach((g, i) => {
+                const a = i / groups.length * 2 * Math.PI;
+                groupTarget.set(g, { x: w / 2 + ring * Math.cos(a), y: h / 2 + ring * Math.sin(a) });
+              });
             }
+            const present = new Set(simNodes.map((n) => n.id));
+            const edgeLinks = propEdges.filter((e) => present.has(e.source) && present.has(e.target)).map((e) => ({ source: e.source, target: e.target, weight: clamp01(e.weight ?? 1) }));
+            const simLinks = activeSimilarity.filter((p) => present.has(p.source) && present.has(p.target)).map((p) => ({ source: p.source, target: p.target, weight: clamp01(p.weight) }));
+            const collideRadius = (n) => Math.max(n.size || 8, (n.labelW ?? 0) / 2) + nodeSpacing / 2;
+            const simulation = d3Force.forceSimulation(simNodes).force("edge", d3Force.forceLink(edgeLinks).id((d) => d.id).distance((l) => linkDistance * (0.35 + (1 - l.weight) * 0.3)).strength(0.9)).force("similarity", d3Force.forceLink(simLinks).id((d) => d.id).distance((l) => linkDistance * (1.35 - 0.55 * l.weight)).strength(0.03)).force("charge", d3Force.forceManyBody().strength(-repulsion * 0.5)).force("collide", d3Force.forceCollide().radius(collideRadius).strength(0.9)).force("x", d3Force.forceX((n) => groupTarget.get(n.group ?? "")?.x ?? w / 2).strength(multiCluster ? 0.05 : 0.02)).force("y", d3Force.forceY((n) => groupTarget.get(n.group ?? "")?.y ?? h / 2).strength(multiCluster ? 0.05 : 0.02)).stop();
+            for (let i = 0; i < 300; i++) simulation.tick();
             const pad = nodeSpacing / 2;
             const rectsOf = (n) => {
               const r = n.size || 8;
-              const lw = showLabels ? n.labelW ?? (n.labelW = n.label ? measureLabelWidth(n.label, labelFont) : 0) : 0;
+              const lw = showLabels ? n.labelW ?? 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]
@@ -36967,11 +36891,12 @@ var init_GraphCanvas = __esm({
               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];
+            for (let pass = 0; pass < 24; pass++) {
+              let moved = false;
+              for (let i = 0; i < simNodes.length; i++) {
+                for (let j = i + 1; j < simNodes.length; j++) {
+                  const a = simNodes[i];
+                  const b = simNodes[j];
                   const ra = rectsOf(a);
                   const rb = rectsOf(b);
                   let best = null;
@@ -36980,31 +36905,25 @@ var init_GraphCanvas = __esm({
                     if (s && (!best || s.depth < best.depth)) best = s;
                   }
                   if (best) {
+                    moved = true;
                     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 (!moved) break;
             }
-          };
-          if (fullRelayout) {
-            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;
+              const lw = showLabels ? node.labelW ?? 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);
@@ -37125,6 +37044,7 @@ var init_GraphCanvas = __esm({
           }
           ctx.stroke();
           if (showLabels && node.label) {
+            const displayLabel = truncateLabel(node.label);
             ctx.font = `${isSelected || isHovered ? "600" : "500"} 12px ${fontFamily}`;
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
@@ -37132,9 +37052,9 @@ var init_GraphCanvas = __esm({
             ctx.lineWidth = 3;
             ctx.lineJoin = "round";
             ctx.strokeStyle = bgColor;
-            ctx.strokeText(node.label, node.x, ly);
+            ctx.strokeText(displayLabel, node.x, ly);
             ctx.fillStyle = isSelected || isHovered ? fgColor : mutedColor;
-            ctx.fillText(node.label, node.x, ly);
+            ctx.fillText(displayLabel, node.x, ly);
           }
           if (node.badge && node.badge > 1) {
             const bx = node.x + radius * 0.7;
@@ -37282,6 +37202,20 @@ var init_GraphCanvas = __esm({
         },
         [toCoords, nodeAt, onNodeDoubleClick]
       );
+      const hoveredObj = hoveredNode ? nodesRef.current.find((n) => n.id === hoveredNode) : void 0;
+      const canvasEl = canvasRef.current;
+      const showLabelTooltip = Boolean(
+        hoveredObj?.label && hoveredObj.label.length > MAX_LABEL_CHARS && hoveredObj.x != null && canvasEl
+      );
+      const labelTooltipStyle = (() => {
+        if (!showLabelTooltip || !canvasEl || !hoveredObj || hoveredObj.x == null || hoveredObj.y == null) return void 0;
+        const rect = canvasEl.getBoundingClientRect();
+        return {
+          left: rect.left + offset.x + hoveredObj.x * zoom,
+          top: rect.top + offset.y + hoveredObj.y * zoom - 10,
+          transform: "translate(-50%, -100%)"
+        };
+      })();
       if (isLoading) {
         return /* @__PURE__ */ jsxRuntime.jsx(exports.LoadingState, { message: t("common.loading"), className });
       }
@@ -37335,23 +37269,43 @@ var init_GraphCanvas = __esm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-full bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "canvas",
-          {
-            ref: canvasRef,
-            width: Math.round(logicalW * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
-            height: Math.round(height * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
-            className: "w-full cursor-grab active:cursor-grabbing touch-none",
-            style: { height },
-            onPointerDown: gestureHandlers.onPointerDown,
-            onPointerMove: gestureHandlers.onPointerMove,
-            onPointerUp: gestureHandlers.onPointerUp,
-            onPointerCancel: gestureHandlers.onPointerCancel,
-            onPointerLeave: handlePointerLeave,
-            onWheel: gestureHandlers.onWheel,
-            onDoubleClick: handleDoubleClick
-          }
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "w-full bg-background", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              width: Math.round(logicalW * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
+              height: Math.round(height * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
+              className: "w-full cursor-grab active:cursor-grabbing touch-none",
+              style: { height },
+              onPointerDown: gestureHandlers.onPointerDown,
+              onPointerMove: gestureHandlers.onPointerMove,
+              onPointerUp: gestureHandlers.onPointerUp,
+              onPointerCancel: gestureHandlers.onPointerCancel,
+              onPointerLeave: handlePointerLeave,
+              onWheel: gestureHandlers.onWheel,
+              onDoubleClick: handleDoubleClick
+            }
+          ),
+          typeof window !== "undefined" && showLabelTooltip && labelTooltipStyle && reactDom.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "fixed z-50 px-3 py-2 max-w-xs",
+                  "bg-primary text-primary-foreground",
+                  "shadow-elevation-popover rounded-sm",
+                  "text-sm pointer-events-none",
+                  "break-words whitespace-normal"
+                ),
+                style: labelTooltipStyle,
+                role: "tooltip",
+                children: hoveredObj?.label
+              }
+            ),
+            document.body
+          )
+        ] }),
         groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             exports.Box,