@almadar/ui 5.58.0 → 5.60.0

package/dist/runtime/index.cjs

@@ -37668,6 +37668,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -37698,6 +37704,9 @@ var init_GraphCanvas = __esm({
       actions,
       onNodeClick,
       nodeClickEvent,
+      selectedNodeId,
+      repulsion = 800,
+      linkDistance = 100,
       layout = "force",
       entity,
       isLoading = false,
@@ -37713,6 +37722,37 @@ var init_GraphCanvas = __esm({
       const [hoveredNode, setHoveredNode] = React81.useState(null);
       const nodesRef = React81.useRef([]);
       const [, forceUpdate] = React81.useState(0);
+      const interactionRef = React81.useRef({
+        mode: "none",
+        dragNodeId: null,
+        startMouse: { x: 0, y: 0 },
+        startOffset: { x: 0, y: 0 },
+        downPos: { x: 0, y: 0 }
+      });
+      const toCoords = React81.useCallback(
+        (e) => {
+          const canvas = canvasRef.current;
+          if (!canvas) return null;
+          const rect = canvas.getBoundingClientRect();
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
+          return {
+            screenX,
+            screenY,
+            graphX: (screenX - offset.x) / zoom,
+            graphY: (screenY - offset.y) / zoom
+          };
+        },
+        [offset, zoom]
+      );
+      const nodeAt = React81.useCallback((graphX, graphY) => {
+        return nodesRef.current.find((n) => {
+          const dist = Math.sqrt((n.x - graphX) ** 2 + (n.y - graphY) ** 2);
+          return dist < (n.size || 8) + 4;
+        });
+      }, []);
       const handleAction = React81.useCallback(
         (action) => {
           if (action.event) {
@@ -37778,7 +37818,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 = 800 / (dist * dist);
+                const force = repulsion / (dist * dist);
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
                 nodes[i].fx -= fx;
@@ -37794,7 +37834,7 @@ var init_GraphCanvas = __esm({
               const dx = target.x - source.x;
               const dy = target.y - source.y;
               const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-              const force = (dist - 100) * 0.05;
+              const force = (dist - linkDistance) * 0.05;
               const fx = dx / dist * force;
               const fy = dy / dist * force;
               source.fx += fx;
@@ -37828,7 +37868,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance]);
       React81.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -37837,6 +37877,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -37862,20 +37903,27 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
+          const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
+          const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
           ctx.beginPath();
-          ctx.arc(node.x, node.y, isHovered ? size + 2 : size, 0, Math.PI * 2);
+          ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
           ctx.fillStyle = color;
           ctx.fill();
-          ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
-          ctx.lineWidth = isHovered ? 2 : 1;
+          if (isSelected) {
+            ctx.strokeStyle = accentColor;
+            ctx.lineWidth = 3;
+          } else {
+            ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
+            ctx.lineWidth = isHovered ? 2 : 1;
+          }
           ctx.stroke();
           if (showLabels && node.label) {
             ctx.fillStyle = "#666666";
-            ctx.font = `${isHovered ? "bold " : ""}10px system-ui`;
+            ctx.font = `${isSelected || isHovered ? "bold " : ""}10px system-ui`;
             ctx.textAlign = "center";
-            ctx.fillText(node.label, node.x, node.y + size + 12);
+            ctx.fillText(node.label, node.x, node.y + radius + 12);
           }
         }
         ctx.restore();
@@ -37886,6 +37934,97 @@ var init_GraphCanvas = __esm({
         setZoom(1);
         setOffset({ x: 0, y: 0 });
       }, []);
+      const handleWheel = React81.useCallback(
+        (e) => {
+          if (!interactive) return;
+          e.preventDefault();
+          const coords = toCoords(e);
+          if (!coords) return;
+          const oldZoom = zoom;
+          const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+          const newZoom = Math.max(0.3, Math.min(3, oldZoom * factor));
+          if (newZoom === oldZoom) return;
+          setOffset((o) => ({
+            x: coords.screenX - (coords.screenX - o.x) * (newZoom / oldZoom),
+            y: coords.screenY - (coords.screenY - o.y) * (newZoom / oldZoom)
+          }));
+          setZoom(newZoom);
+        },
+        [interactive, toCoords, zoom]
+      );
+      const handleMouseDown = React81.useCallback(
+        (e) => {
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          const state = interactionRef.current;
+          state.downPos = { x: e.clientX, y: e.clientY };
+          state.startMouse = { x: e.clientX, y: e.clientY };
+          state.startOffset = { ...offset };
+          if (draggable && node) {
+            state.mode = "dragging";
+            state.dragNodeId = node.id;
+          } else if (interactive) {
+            state.mode = "panning";
+            state.dragNodeId = null;
+          } else {
+            state.mode = "none";
+            state.dragNodeId = null;
+          }
+        },
+        [toCoords, nodeAt, draggable, interactive, offset]
+      );
+      const handleMouseMove = React81.useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          if (state.mode === "panning") {
+            const dx = e.clientX - state.startMouse.x;
+            const dy = e.clientY - state.startMouse.y;
+            setOffset({ x: state.startOffset.x + dx, y: state.startOffset.y + dy });
+            return;
+          }
+          if (state.mode === "dragging" && state.dragNodeId) {
+            const coords2 = toCoords(e);
+            if (!coords2) return;
+            const node2 = nodesRef.current.find((n) => n.id === state.dragNodeId);
+            if (node2) {
+              node2.x = coords2.graphX;
+              node2.y = coords2.graphY;
+              node2.vx = 0;
+              node2.vy = 0;
+              forceUpdate((n) => n + 1);
+            }
+            return;
+          }
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          setHoveredNode(node?.id ?? null);
+        },
+        [toCoords, nodeAt]
+      );
+      const handleMouseUp = React81.useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          const moved = Math.abs(e.clientX - state.downPos.x) + Math.abs(e.clientY - state.downPos.y);
+          state.mode = "none";
+          state.dragNodeId = null;
+          if (moved < 4) {
+            const coords = toCoords(e);
+            if (!coords) return;
+            const node = nodeAt(coords.graphX, coords.graphY);
+            if (node) {
+              handleNodeClick(node);
+            }
+          }
+        },
+        [toCoords, nodeAt, handleNodeClick]
+      );
+      const handleMouseLeave = React81.useCallback(() => {
+        interactionRef.current.mode = "none";
+        interactionRef.current.dragNodeId = null;
+        setHoveredNode(null);
+      }, []);
       if (isLoading) {
         return /* @__PURE__ */ jsxRuntime.jsx(LoadingState, { message: t("common.loading"), className });
       }
@@ -37947,20 +38086,11 @@ var init_GraphCanvas = __esm({
             height,
             className: "w-full cursor-grab active:cursor-grabbing",
             style: { height },
-            onClick: (e) => {
-              const canvas = canvasRef.current;
-              if (!canvas) return;
-              const rect = canvas.getBoundingClientRect();
-              const x = (e.clientX - rect.left - offset.x) / zoom;
-              const y = (e.clientY - rect.top - offset.y) / zoom;
-              const clickedNode = nodesRef.current.find((n) => {
-                const dist = Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2);
-                return dist < (n.size || 8) + 4;
-              });
-              if (clickedNode) {
-                handleNodeClick(clickedNode);
-              }
-            }
+            onWheel: handleWheel,
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseLeave
           }
         ) }),
         groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [

package/dist/runtime/index.js

@@ -37621,6 +37621,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -37651,6 +37657,9 @@ var init_GraphCanvas = __esm({
       actions,
       onNodeClick,
       nodeClickEvent,
+      selectedNodeId,
+      repulsion = 800,
+      linkDistance = 100,
       layout = "force",
       entity,
       isLoading = false,
@@ -37666,6 +37675,37 @@ var init_GraphCanvas = __esm({
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
       const [, forceUpdate] = useState(0);
+      const interactionRef = useRef({
+        mode: "none",
+        dragNodeId: null,
+        startMouse: { x: 0, y: 0 },
+        startOffset: { x: 0, y: 0 },
+        downPos: { x: 0, y: 0 }
+      });
+      const toCoords = useCallback(
+        (e) => {
+          const canvas = canvasRef.current;
+          if (!canvas) return null;
+          const rect = canvas.getBoundingClientRect();
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
+          return {
+            screenX,
+            screenY,
+            graphX: (screenX - offset.x) / zoom,
+            graphY: (screenY - offset.y) / zoom
+          };
+        },
+        [offset, zoom]
+      );
+      const nodeAt = useCallback((graphX, graphY) => {
+        return nodesRef.current.find((n) => {
+          const dist = Math.sqrt((n.x - graphX) ** 2 + (n.y - graphY) ** 2);
+          return dist < (n.size || 8) + 4;
+        });
+      }, []);
       const handleAction = useCallback(
         (action) => {
           if (action.event) {
@@ -37731,7 +37771,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 = 800 / (dist * dist);
+                const force = repulsion / (dist * dist);
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
                 nodes[i].fx -= fx;
@@ -37747,7 +37787,7 @@ var init_GraphCanvas = __esm({
               const dx = target.x - source.x;
               const dy = target.y - source.y;
               const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-              const force = (dist - 100) * 0.05;
+              const force = (dist - linkDistance) * 0.05;
               const fx = dx / dist * force;
               const fy = dy / dist * force;
               source.fx += fx;
@@ -37781,7 +37821,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -37790,6 +37830,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -37815,20 +37856,27 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
+          const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
+          const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
           ctx.beginPath();
-          ctx.arc(node.x, node.y, isHovered ? size + 2 : size, 0, Math.PI * 2);
+          ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
           ctx.fillStyle = color;
           ctx.fill();
-          ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
-          ctx.lineWidth = isHovered ? 2 : 1;
+          if (isSelected) {
+            ctx.strokeStyle = accentColor;
+            ctx.lineWidth = 3;
+          } else {
+            ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
+            ctx.lineWidth = isHovered ? 2 : 1;
+          }
           ctx.stroke();
           if (showLabels && node.label) {
             ctx.fillStyle = "#666666";
-            ctx.font = `${isHovered ? "bold " : ""}10px system-ui`;
+            ctx.font = `${isSelected || isHovered ? "bold " : ""}10px system-ui`;
             ctx.textAlign = "center";
-            ctx.fillText(node.label, node.x, node.y + size + 12);
+            ctx.fillText(node.label, node.x, node.y + radius + 12);
           }
         }
         ctx.restore();
@@ -37839,6 +37887,97 @@ var init_GraphCanvas = __esm({
         setZoom(1);
         setOffset({ x: 0, y: 0 });
       }, []);
+      const handleWheel = useCallback(
+        (e) => {
+          if (!interactive) return;
+          e.preventDefault();
+          const coords = toCoords(e);
+          if (!coords) return;
+          const oldZoom = zoom;
+          const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+          const newZoom = Math.max(0.3, Math.min(3, oldZoom * factor));
+          if (newZoom === oldZoom) return;
+          setOffset((o) => ({
+            x: coords.screenX - (coords.screenX - o.x) * (newZoom / oldZoom),
+            y: coords.screenY - (coords.screenY - o.y) * (newZoom / oldZoom)
+          }));
+          setZoom(newZoom);
+        },
+        [interactive, toCoords, zoom]
+      );
+      const handleMouseDown = useCallback(
+        (e) => {
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          const state = interactionRef.current;
+          state.downPos = { x: e.clientX, y: e.clientY };
+          state.startMouse = { x: e.clientX, y: e.clientY };
+          state.startOffset = { ...offset };
+          if (draggable && node) {
+            state.mode = "dragging";
+            state.dragNodeId = node.id;
+          } else if (interactive) {
+            state.mode = "panning";
+            state.dragNodeId = null;
+          } else {
+            state.mode = "none";
+            state.dragNodeId = null;
+          }
+        },
+        [toCoords, nodeAt, draggable, interactive, offset]
+      );
+      const handleMouseMove = useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          if (state.mode === "panning") {
+            const dx = e.clientX - state.startMouse.x;
+            const dy = e.clientY - state.startMouse.y;
+            setOffset({ x: state.startOffset.x + dx, y: state.startOffset.y + dy });
+            return;
+          }
+          if (state.mode === "dragging" && state.dragNodeId) {
+            const coords2 = toCoords(e);
+            if (!coords2) return;
+            const node2 = nodesRef.current.find((n) => n.id === state.dragNodeId);
+            if (node2) {
+              node2.x = coords2.graphX;
+              node2.y = coords2.graphY;
+              node2.vx = 0;
+              node2.vy = 0;
+              forceUpdate((n) => n + 1);
+            }
+            return;
+          }
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          setHoveredNode(node?.id ?? null);
+        },
+        [toCoords, nodeAt]
+      );
+      const handleMouseUp = useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          const moved = Math.abs(e.clientX - state.downPos.x) + Math.abs(e.clientY - state.downPos.y);
+          state.mode = "none";
+          state.dragNodeId = null;
+          if (moved < 4) {
+            const coords = toCoords(e);
+            if (!coords) return;
+            const node = nodeAt(coords.graphX, coords.graphY);
+            if (node) {
+              handleNodeClick(node);
+            }
+          }
+        },
+        [toCoords, nodeAt, handleNodeClick]
+      );
+      const handleMouseLeave = useCallback(() => {
+        interactionRef.current.mode = "none";
+        interactionRef.current.dragNodeId = null;
+        setHoveredNode(null);
+      }, []);
       if (isLoading) {
         return /* @__PURE__ */ jsx(LoadingState, { message: t("common.loading"), className });
       }
@@ -37900,20 +38039,11 @@ var init_GraphCanvas = __esm({
             height,
             className: "w-full cursor-grab active:cursor-grabbing",
             style: { height },
-            onClick: (e) => {
-              const canvas = canvasRef.current;
-              if (!canvas) return;
-              const rect = canvas.getBoundingClientRect();
-              const x = (e.clientX - rect.left - offset.x) / zoom;
-              const y = (e.clientY - rect.top - offset.y) / zoom;
-              const clickedNode = nodesRef.current.find((n) => {
-                const dist = Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2);
-                return dist < (n.size || 8) + 4;
-              });
-              if (clickedNode) {
-                handleNodeClick(clickedNode);
-              }
-            }
+            onWheel: handleWheel,
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseLeave
           }
         ) }),
         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: [

package/package.json

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