@likec4/diagram 1.43.0 → 1.45.0

package/dist/likec4diagram/custom/edges/useControlPoints.js

@@ -0,0 +1,58 @@
+import { deepEqual } from 'fast-equals';
+import { useState } from 'react';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
+import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
+import { vector } from '../../../utils/vector.js';
+import { bezierControlPoints } from '../../../utils/xyflow.js';
+
+function useControlPoints({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  data
+}) {
+  const [controlPoints, setControlPoints] = useState(
+    () => data.controlPoints ?? bezierControlPoints(data.points)
+  );
+  useUpdateEffect(() => {
+    const next = data.controlPoints ?? bezierControlPoints(data.points);
+    setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
+  }, [
+    data.controlPoints?.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join("|") ?? "",
+    data.points.map((p) => `${Math.round(p[0])},${Math.round(p[1])}`).join("|")
+  ]);
+  const insertControlPoint = useCallbackRef(({ x, y }) => {
+    const sourceV = vector(sourceX, sourceY);
+    const targetV = vector(targetX, targetY);
+    const points = [
+      data.dir === "back" ? targetV : sourceV,
+      ...controlPoints.map(vector) || [],
+      data.dir === "back" ? sourceV : targetV
+    ];
+    const newPointV = vector(x, y).round();
+    let insertionIndex = 0;
+    let minDistance = Infinity;
+    for (let i = 0; i < points.length - 1; i++) {
+      const a = points[i], b = points[i + 1], fromCurrentToNext = b.subtract(a), fromCurrentToNew = newPointV.subtract(a), fromNextToNew = newPointV.subtract(b);
+      if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).length() / fromCurrentToNext.length());
+        if (distanceToEdge < minDistance) {
+          minDistance = distanceToEdge;
+          insertionIndex = i;
+        }
+      }
+    }
+    const newControlPoints = controlPoints.slice();
+    newControlPoints.splice(insertionIndex, 0, { x: newPointV.x, y: newPointV.y });
+    setControlPoints(newControlPoints);
+    return newControlPoints;
+  });
+  return {
+    controlPoints,
+    setControlPoints,
+    insertControlPoint
+  };
+}
+
+export { useControlPoints };

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.d.ts

@@ -0,0 +1,7 @@
+import { XYPosition } from '@xyflow/react';
+import { Types } from '../../types';
+export declare function useRelationshipEdgePath({ props: { sourceX, sourceY, source, target, targetX, targetY, data, }, controlPoints, isControlPointDragging, }: {
+    props: Types.EdgeProps<'relationship'>;
+    controlPoints: XYPosition[];
+    isControlPointDragging: boolean;
+}): string;

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js

@@ -0,0 +1,60 @@
+import { nonNullable } from '@likec4/core';
+import { line, curveCatmullRomOpen } from 'd3-shape';
+import { useCallback } from 'react';
+import { isTruthy, first, last } from 'remeda';
+import { useXYStore } from '../../../hooks/useXYFlow.js';
+import { nodeToRect, getNodeIntersectionFromCenterToPoint, bezierPath, isEqualRects } from '../../../utils/xyflow.js';
+
+const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.round(d.x)).y((d) => Math.round(d.y));
+const isSameRects = (a, b) => isEqualRects(a.sourceNode, b.sourceNode) && isEqualRects(a.targetNode, b.targetNode);
+function useRelationshipEdgePath({
+  props: {
+    sourceX,
+    sourceY,
+    source,
+    target,
+    targetX,
+    targetY,
+    data
+  },
+  controlPoints,
+  isControlPointDragging
+}) {
+  const {
+    sourceNode,
+    targetNode
+  } = useXYStore(
+    useCallback(({ nodeLookup }) => {
+      const sourceNode2 = nonNullable(nodeLookup.get(source), `source node ${source} not found`);
+      const targetNode2 = nonNullable(nodeLookup.get(target), `target node ${target} not found`);
+      return {
+        sourceNode: nodeToRect(sourceNode2),
+        targetNode: nodeToRect(targetNode2)
+      };
+    }, [source, target]),
+    isSameRects
+  );
+  const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
+  if (isModified) {
+    const sourceCenterPos = { x: sourceX, y: sourceY };
+    const targetCenterPos = { x: targetX, y: targetY };
+    const nodeMargin = 6;
+    const points = data.dir === "back" ? [
+      targetCenterPos,
+      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos, nodeMargin),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos, nodeMargin),
+      sourceCenterPos
+    ] : [
+      sourceCenterPos,
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos, nodeMargin),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos, nodeMargin),
+      targetCenterPos
+    ];
+    return nonNullable(curve(points));
+  }
+  return bezierPath(data.points);
+}
+
+export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/edges/utils.d.ts

@@ -1,16 +1,4 @@
 import { InternalNode, XYPosition, Position } from '@xyflow/react';
-import { VectorImpl } from '../../../utils';
-export declare function getNodeCenter(node: InternalNode): XYPosition;
-/**
- * Helper function returns the intersection point
- * of the line between the center of the intersectionNode and the target
- *
- * @param intersectionNode the node that is the center of the line
- * @param target position of the target
- * @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
- * @returns coordinates of the intersection point
- */
-export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalNode, target: XYPosition, nodeMargin?: number): VectorImpl;
 export declare function getPointPosition(node: InternalNode, intersectionPoint: XYPosition): readonly [number, number, Position];
 export declare function getEdgeParams(source: InternalNode, target: InternalNode): {
     sx: number;

package/dist/likec4diagram/custom/nodes/CompoundActions.js

@@ -1,6 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { CompoundActionButton } from '../../../base-primitives/compound/CompoundActionButton.js';
 
 const CompoundActions = (props) => {

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -2,6 +2,7 @@ import { SimplifyDeep } from 'type-fest';
 import { ElementActionButtons } from '../../../base-primitives';
 import { BaseNodeData } from '../../../base/types';
 import { Types } from '../../types';
+import { NamedExoticComponent } from 'react';
 type WithExtraButtons = {
     /**
      * Add extra action buttons
@@ -53,7 +54,7 @@ export type ElementActionsProps = SimplifyDeep<{
  * />
  * ```
  */
-export declare const ElementActions: ({ extraButtons, ...props }: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementActions: NamedExoticComponent<ElementActionsProps>;
 export type DeploymentElementActionsProps = SimplifyDeep<{
     selected?: boolean;
     data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -1,19 +1,24 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { deepEqual, shallowEqual } from 'fast-equals';
+import { memo, useMemo } from 'react';
 import { hasAtLeast } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import '@xstate/react';
+import { useDiagram } from '../../../hooks/safeContext.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
-const ElementActions = ({
+const compareElementActionsProps = (a, b) => {
+  return deepEqual(a.data.id, b.data.id) && deepEqual(a.selected ?? false, b.selected ?? false) && deepEqual(a.data.modelFqn ?? null, b.data.modelFqn ?? null) && deepEqual(a.data.navigateTo ?? null, b.data.navigateTo ?? null) && deepEqual(a.data.hovered ?? false, b.data.hovered ?? false) && (!a.extraButtons && !b.extraButtons || shallowEqual(a.extraButtons, b.extraButtons));
+};
+const ElementActions = memo(({
   extraButtons,
   ...props
 }) => {
   const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
-  const { navigateTo, modelFqn } = props.data;
+  const { id, navigateTo, modelFqn } = props.data;
   let buttons = useMemo(() => {
     const buttons2 = [];
     if (navigateTo && enableNavigateTo) {
@@ -22,7 +27,7 @@ const ElementActions = ({
         icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
         onClick: (e) => {
           e.stopPropagation();
-          diagram.navigateTo(navigateTo, props.data.id);
+          diagram.navigateTo(navigateTo, id);
         }
       });
     }
@@ -37,12 +42,12 @@ const ElementActions = ({
       });
     }
     return buttons2;
-  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.data.id]);
+  }, [enableNavigateTo, enableRelationshipBrowser, modelFqn, navigateTo, id, diagram]);
   if (extraButtons && hasAtLeast(extraButtons, 1)) {
     buttons = [...buttons, ...extraButtons];
   }
   return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
-};
+}, compareElementActionsProps);
 const DeploymentElementActions = ({
   extraButtons,
   ...props
@@ -73,7 +78,7 @@ const DeploymentElementActions = ({
       });
     }
     return buttons2;
-  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, id]);
+  }, [enableNavigateTo, enableRelationshipBrowser, modelFqn, navigateTo, id]);
   if (extraButtons && hasAtLeast(extraButtons, 1)) {
     buttons = [...buttons, ...extraButtons];
   }

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.ts

@@ -0,0 +1,6 @@
+import { Types } from '../../types';
+export type NodeDriftsProps = {
+    nodeProps: Types.NodeProps;
+    position?: 'top' | 'bottom';
+};
+export declare function NodeDrifts({ nodeProps: { data }, position, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/NodeDrifts.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box } from '@likec4/styles/jsx';
+import { Notification, Text } from '@mantine/core';
+import { Position, NodeToolbar } from '@xyflow/react';
+
+function NodeDrifts({
+  nodeProps: { data },
+  position = "bottom"
+}) {
+  const drifts = data.drifts;
+  if (!drifts || drifts.length === 0) {
+    return null;
+  }
+  const toolbarPosition = position === "top" ? Position.Top : Position.Bottom;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "likec4-node-drifts",
+      css: {
+        position: "absolute",
+        inset: "0",
+        pointerEvents: "none",
+        "& + .likec4-element-shape": {
+          outlineColor: "likec4.compare.manual.outline",
+          outlineWidth: {
+            base: "2px",
+            _light: "4px"
+          },
+          outlineStyle: "solid",
+          outlineOffset: "1"
+        }
+      },
+      children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: toolbarPosition, children: /* @__PURE__ */ jsx(
+        Notification,
+        {
+          color: "orange",
+          withBorder: false,
+          withCloseButton: false,
+          title: "Changes:",
+          children: drifts.map((drift) => /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+            "- ",
+            drift
+          ] }, drift))
+        }
+      ) })
+    }
+  );
+}
+
+export { NodeDrifts };

package/dist/likec4diagram/custom/nodes/SequenceActorNode.js

@@ -3,7 +3,9 @@ import { css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { Handle, Position } from '@xyflow/react';
 import { isTruthy } from 'remeda';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { ElementActions } from './ElementActions.js';
+import { NodeDrifts } from './NodeDrifts.js';
 import { ElementDetailsButtonWithHandler } from './nodes.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
@@ -67,8 +69,10 @@ const ActorStepPort = ({
 };
 const hasModelFqn = (data) => isTruthy(data.modelFqn);
 function SequenceActorNode(props) {
+  const { enableElementDetails, enableCompareWithLatest } = useEnabledFeatures();
   const data = props.data;
   const {
+    id,
     positionAbsoluteY,
     data: {
       viewHeight,
@@ -102,11 +106,12 @@ function SequenceActorNode(props) {
       }
     ),
     /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+      enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementData, { ...props }),
       hasModelFqn(data) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ElementActions, { ...props, data }),
-        /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props, data })
+        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data })
       ] })
     ] }),
     ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, { port: p, data: props.data }, p.id))
@@ -125,7 +130,7 @@ function SequenceParallelArea(props) {
         borderWidth: 1,
         "--_color": {
           base: "var(--likec4-palette-stroke)",
-          _dark: "[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
+          _dark: "[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
         },
         borderColor: "[var(--_color)/30]",
         backgroundColor: "var(--likec4-palette-fill)/15",

package/dist/likec4diagram/custom/nodes/index.d.ts

@@ -2,6 +2,7 @@ export { CompoundActions } from './CompoundActions';
 export { DeploymentElementActions, ElementActions } from './ElementActions';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
 export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode';
+export { NodeDrifts, type NodeDriftsProps } from './NodeDrifts';
 export * from './CompoundActions';
 export * from './ElementActions';
 export * from './toolbar/CompoundToolbar';

package/dist/likec4diagram/custom/nodes/nodes.d.ts

@@ -1,5 +1,13 @@
+import { Fqn } from '@likec4/core';
+import { BaseNodeData } from '../../../base/types';
 import { Types } from '../../types';
-export declare function ElementDetailsButtonWithHandler(props: Pick<Types.NodeProps<'element' | 'deployment'>, 'id' | 'data'>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ElementDetailsButtonWithHandler(props: {
+    id: string;
+    selected?: boolean;
+    data: BaseNodeData & {
+        modelFqn?: Fqn | null | undefined;
+    };
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react/jsx-runtime").JSX.Element | null;
 /**
  * Renders an element node.

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -1,8 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
+import { NodeDrifts } from './NodeDrifts.js';
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
@@ -16,10 +21,9 @@ import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
 
 function ElementDetailsButtonWithHandler(props) {
-  const { enableElementDetails } = useEnabledFeatures();
   const diagram = useDiagram();
   const fqn = props.data.modelFqn;
-  if (!enableElementDetails || !fqn) return null;
+  if (!fqn) return null;
   return /* @__PURE__ */ jsx(
     ElementDetailsButton,
     {
@@ -32,10 +36,9 @@ function ElementDetailsButtonWithHandler(props) {
   );
 }
 function CompoundDetailsButtonWithHandler(props) {
-  const { enableElementDetails } = useEnabledFeatures();
   const diagram = useDiagram();
   const fqn = props.data.modelFqn;
-  if (!enableElementDetails || !fqn) return null;
+  if (!fqn) return null;
   return /* @__PURE__ */ jsx(
     CompoundDetailsButton,
     {
@@ -48,54 +51,96 @@ function CompoundDetailsButtonWithHandler(props) {
   );
 }
 function ElementNode(props) {
-  const { enableElementTags, enableReadOnly } = useEnabledFeatures();
+  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
-    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
 }
 function DeploymentNode(props) {
-  const { enableElementTags, enableReadOnly } = useEnabledFeatures();
+  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
-    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
 }
+const compoundHasDrifts = css({
+  outlineColor: "likec4.compare.manual.outline",
+  outlineWidth: {
+    base: "2px",
+    _light: "4px"
+  },
+  outlineStyle: "solid",
+  outlineOffset: "1"
+});
+const hasDrifts = (props) => {
+  return props.data.drifts && props.data.drifts.length > 0;
+};
 function CompoundElementNode(props) {
-  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
-  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-    !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] });
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const showDrifts = enableCompareWithLatest && hasDrifts(props);
+  return /* @__PURE__ */ jsxs(
+    CompoundNodeContainer,
+    {
+      className: showDrifts ? compoundHasDrifts : void 0,
+      nodeProps: props,
+      children: [
+        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+        /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+        enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+        !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    }
+  );
 }
 function CompoundDeploymentNode(props) {
-  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
-  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-    !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] });
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const showDrifts = enableCompareWithLatest && hasDrifts(props);
+  return /* @__PURE__ */ jsxs(
+    CompoundNodeContainer,
+    {
+      className: showDrifts ? compoundHasDrifts : void 0,
+      nodeProps: props,
+      children: [
+        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+        /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+        enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+        !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    }
+  );
 }
 function ViewGroupNode(props) {
-  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] });
+  const { enableCompareWithLatest } = useEnabledFeatures();
+  const showDrifts = enableCompareWithLatest && hasDrifts(props);
+  return /* @__PURE__ */ jsxs(
+    CompoundNodeContainer,
+    {
+      className: showDrifts ? compoundHasDrifts : void 0,
+      nodeProps: props,
+      children: [
+        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    }
+  );
 }
 
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.d.ts

@@ -1,6 +1,6 @@
 import { LikeC4Theme, ThemeColor } from '@likec4/core';
 import { PopoverProps } from '@mantine/core';
-import { OnStyleChange } from './_shared';
+import { OnStyleChange } from './types';
 type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
     elementColor: ThemeColor;
     elementOpacity?: number | undefined;

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js

@@ -4,7 +4,7 @@ import { useUpdateEffect } from '@react-hookz/web';
 import { useState } from 'react';
 import { keys } from 'remeda';
 import { useLikeC4Styles } from '../../../../hooks/useLikeC4Styles.js';
-import { SemanticColors } from './_shared.js';
+import { SemanticColors } from './types.js';
 
 function ColorButton({
   elementColor,

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js

@@ -2,9 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box, SegmentedControl } from '@mantine/core';
 import { useState, useEffect } from 'react';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
-import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
+import { useHandlers } from './useHandlers.js';
 
 function CompoundElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -3,11 +3,12 @@ import { ElementShapes } from '@likec4/core/styles';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
-import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import { useHandlers } from './useHandlers.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -1,21 +1,11 @@
-import { DeploymentFqn, Fqn, ThemeColor, ViewChange } from '@likec4/core';
+import { DeploymentFqn, Fqn } from '@likec4/core/types';
 import { MergeExclusive } from 'type-fest';
-import { Types } from '../../../types';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { TooltipProps } from '@mantine/core';
-export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void;
-export declare const SemanticColors: readonly ["primary", "secondary", "muted"];
-export type ThemeColorKey = typeof SemanticColors[number];
-export type ColorKey = Exclude<ThemeColor, ThemeColorKey>;
 export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
-export declare function useHandlers(target: Fqn | DeploymentFqn, props: Types.NodeProps): {
-    elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
-    onColorPreview: (color: ThemeColor | null) => void;
-    onChange: OnStyleChange;
-};
 export declare function BrowseRelationshipsButton({ fqn }: {
     fqn: Fqn;
 }): import("react/jsx-runtime").JSX.Element;