@almadar/ui 5.119.0 → 5.121.0

package/dist/components/index.js

@@ -43,6 +43,7 @@ import { DndContext, useSensors, useSensor, PointerSensor, KeyboardSensor, useDr
 import { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
+import { forceSimulation, forceLink, forceManyBody, forceCollide, forceX, forceY } from 'd3-force';
 import { isDrawHostPattern, getPatternDefinition as getPatternDefinition$1, getComponentForPattern as getComponentForPattern$1 } from '@almadar/core/patterns';
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 
@@ -36619,7 +36620,10 @@ function resolveColor3(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
+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, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -36640,6 +36644,7 @@ var init_GraphCanvas = __esm({
       "var(--color-accent)"
     ];
     labelMeasureCtx = null;
+    MAX_LABEL_CHARS = 22;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -36744,9 +36749,13 @@ var init_GraphCanvas = __esm({
       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 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) => {
@@ -36771,7 +36780,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()]);
@@ -36780,105 +36789,52 @@ 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 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;
-            }
-            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;
-            };
+          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) {
-              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 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 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 arr = bySource.get(pair.source) ?? [];
+              arr.push(pair);
+              bySource.set(pair.source, arr);
             }
-            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;
+            for (const [id, arr] of bySource) {
+              arr.sort((a, b) => b.weight - a.weight);
+              similarityNeighbors.set(id, new Set(arr.slice(0, SIMILARITY_NEIGHBORS).map((p) => p.target)));
             }
-            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.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) * 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;
-              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 = forceSimulation(simNodes).force("edge", forceLink(edgeLinks).id((d) => d.id).distance((l) => linkDistance * (0.35 + (1 - l.weight) * 0.3)).strength(0.9)).force("similarity", forceLink(simLinks).id((d) => d.id).distance((l) => linkDistance * (1.35 - 0.55 * l.weight)).strength(0.03)).force("charge", forceManyBody().strength(-repulsion * 0.5)).force("collide", forceCollide().radius(collideRadius).strength(0.9)).force("x", forceX((n) => groupTarget.get(n.group ?? "")?.x ?? w / 2).strength(multiCluster ? 0.05 : 0.02)).force("y", 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]
@@ -36890,11 +36846,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;
@@ -36903,25 +36860,35 @@ 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);
+            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 ?? 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();
@@ -37032,6 +36999,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";
@@ -37039,9 +37007,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;
@@ -37189,6 +37157,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__ */ jsx(LoadingState, { message: t("common.loading"), className });
       }
@@ -37242,23 +37224,43 @@ var init_GraphCanvas = __esm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "w-full bg-background", children: /* @__PURE__ */ 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__ */ jsxs(Box, { className: "w-full bg-background", children: [
+          /* @__PURE__ */ 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 && createPortal(
+            /* @__PURE__ */ 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__ */ jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
           /* @__PURE__ */ jsx(
             Box,