@likec4/diagram 1.44.0 → 1.45.0

package/dist/base-primitives/element/ElementShape.js

@@ -151,11 +151,11 @@ function ShapeSvgOutline({ shape, w, h }) {
       svg = /* @__PURE__ */ jsx(
         "rect",
         {
-          x: -1,
-          y: -1,
-          width: w + 2,
-          height: h + 2,
-          rx: 6
+          x: -3,
+          y: -3,
+          width: w + 6,
+          height: h + 6,
+          rx: 8
         }
       );
       break;

package/dist/base-primitives/element/ElementTags.d.ts

@@ -1,11 +1,13 @@
-import { BoxProps } from '@likec4/styles/jsx';
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes, MemoExoticComponent } from 'react';
 import { BaseNodePropsWithData } from '../../base/types';
-import { ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
 export type ElementTagProps = {
     tag: string;
     cursor?: 'pointer' | 'default';
-} & Omit<BoxProps, 'children'>;
-export declare const ElementTag: ForwardRefExoticComponent<Omit<ElementTagProps, "ref"> & RefAttributes<HTMLDivElement>>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'color'>;
+export declare const ElementTag: ForwardRefExoticComponent<{
+    tag: string;
+    cursor?: "pointer" | "default";
+} & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "color"> & RefAttributes<HTMLDivElement>>;
 type Data = {
     tags: readonly string[] | null | undefined;
     width: number;

package/dist/context/DiagramFeatures.d.ts

@@ -2,6 +2,7 @@ import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
+export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
 export type EnabledFeatures = {
     [P in `enable${FeatureName}`]: boolean;
 };

package/dist/context/TagStylesContext.js

@@ -13,7 +13,7 @@ const generateColorVars = (spec) => {
   if (isTagColorSpecified(spec)) {
     return `
       --colors-likec4-tag-bg: ${color};
-      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color}, var(--colors-likec4-mix-color) 20%);
+      --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
     `;
   }
   if (!radixColors.includes(color)) {

package/dist/custom/hooks.d.ts

@@ -1,11 +1,11 @@
-export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../likec4diagram/state/types';
+export type { DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents, DiagramEvents, } from '../likec4diagram/state/types';
 export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { useCurrentView, useCurrentViewId, } from '../hooks/useCurrentView';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
 export { useCurrentViewModel, } from '../hooks/useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../hooks/useLikeC4Model';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
 export { useLikeC4Styles, } from '../hooks/useLikeC4Styles';
 export { useSetState } from '../hooks/useSetState';
 export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/custom/index.js

@@ -18,7 +18,7 @@ export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
 export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
 export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export { useCallbackRef } from './useCallbackRef';
 export { useId } from './useId';
 export { useMantinePortalProps } from './useMantinePortalProps';
+export { useMediaPrint } from './useMediaPrint';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';
 export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
@@ -8,6 +9,6 @@ export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow';
 export { useCurrentView, useCurrentViewId } from './useCurrentView';
 export { useCurrentViewModel } from './useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './useLikeC4Model';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
 export { useLikeC4Styles } from './useLikeC4Styles';
 export * from './useDiagram';

package/dist/hooks/useDiagramCompareLayout.js

@@ -1,5 +1,6 @@
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
+import { deriveToggledFeatures } from '../likec4diagram/state/machine.setup.js';
 import { useDiagramActorRef } from './safeContext.js';
 import { useCallbackRef } from './useCallbackRef.js';
 
@@ -14,10 +15,14 @@ const selectCompareLayoutState = ({ context }) => {
       layout: context.view._layout ?? "auto"
     };
   }
+  const {
+    enableCompareWithLatest,
+    enableReadOnly
+  } = deriveToggledFeatures(context);
   return {
     isEnabled: true,
-    isEditable: !context.features.enableReadOnly,
-    isActive: context.toggledFeatures.enableCompareWithLatest === true,
+    isEditable: !enableReadOnly,
+    isActive: enableCompareWithLatest === true,
     drifts,
     layout: context.view._layout ?? "auto"
   };

package/dist/hooks/useLikeC4Project.d.ts

@@ -17,6 +17,11 @@ export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
  */
 export declare function useHasProjects(): boolean;
 /**
- * @returns The current project id.
+ * @returns Current project id, as provided by LikeC4Model
  */
 export declare function useLikeC4ProjectId(): ProjectId;
+/**
+ * Returns current LikeC4 project.
+ * Requires both LikeC4ModelProvider and LikeC4ProjectsProvider in the tree.*
+ */
+export declare function useLikeC4Project(): LikeC4Project;

package/dist/hooks/useLikeC4Project.js

@@ -29,9 +29,21 @@ function useHasProjects() {
 function useLikeC4ProjectId() {
   const ctx = useContext(LikeC4ModelContext);
   if (!ctx) {
-    throw new Error("No LikeC4ModelContext found");
+    throw new Error("No LikeC4ModelProvider found");
   }
   return ctx.projectId;
 }
+function useLikeC4Project() {
+  const projectId = useLikeC4ProjectId();
+  const projectsCtx = useContext(LikeC4ProjectsContext);
+  if (!projectsCtx) {
+    throw new Error("No LikeC4ProjectsProvider found");
+  }
+  const project = projectsCtx.projects.find((p) => p.id === projectId);
+  if (!project) {
+    throw new Error(`Project with id '${projectId}' not found in LikeC4ProjectsProvider`);
+  }
+  return project;
+}
 
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/hooks/useMediaPrint.d.ts

@@ -0,0 +1,6 @@
+import { ReadableAtom } from 'nanostores';
+export declare const $isPrint: ReadableAtom<boolean>;
+/**
+ * Hook to determine if the current media is print.
+ */
+export declare function useMediaPrint(): boolean;

package/dist/likec4diagram/DiagramXYFlow.js

@@ -11,6 +11,7 @@ import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerCo
 import { useDiagramActorSnapshot } from '../hooks/useDiagram.js';
 import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
+import { deriveToggledFeatures } from './state/machine.setup.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagram } from '../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
@@ -44,8 +45,8 @@ function prepareNodeTypes(nodeTypes) {
   };
 }
 const selectXYProps = ({ context: ctx, children }) => {
-  const toggledFeatures = ctx.toggledFeatures;
-  const enableReadOnly = ctx.features.enableReadOnly || toggledFeatures.enableReadOnly === true;
+  ctx.toggledFeatures;
+  const { enableReadOnly } = deriveToggledFeatures(ctx);
   const isNotEditingEdge = enableReadOnly || children.syncLayout?.getSnapshot().context.editing !== "edge";
   return {
     enableReadOnly,
@@ -57,11 +58,11 @@ const selectXYProps = ({ context: ctx, children }) => {
     nodesDraggable: !enableReadOnly && ctx.nodesDraggable,
     nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
     fitViewPadding: ctx.fitViewPadding,
-    enableFitView: ctx.toggledFeatures.enableFitView ?? ctx.features.enableFitView,
+    enableFitView: ctx.features.enableFitView,
     ...!ctx.features.enableFitView && {
       viewport: {
-        x: -Math.min(ctx.view.bounds.x, 0),
-        y: -Math.min(ctx.view.bounds.y, 0),
+        x: -ctx.view.bounds.x,
+        y: -ctx.view.bounds.y,
         zoom: 1
       }
     }
@@ -109,7 +110,11 @@ function LikeC4DiagramXYFlow({
     notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
     isPanning.clear();
-    diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    diagram.send({
+      type: "xyflow.viewportMoved",
+      viewport,
+      manually: !!event
+    });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   }), nodeTypes = useCustomCompareMemo(

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

@@ -0,0 +1,6 @@
+import { Types } from '../../types';
+export type EdgeDriftsProps = {
+    edgeProps: Types.EdgeProps;
+    svgPath: string;
+};
+export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+
+function EdgeDrifts({
+  edgeProps: { data },
+  svgPath
+}) {
+  const drifts = data.drifts;
+  if (!drifts || drifts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: cx(
+        "react-flow__edge-path",
+        css({
+          pointerEvents: "none",
+          stroke: "likec4.compare.manual.outline",
+          fill: "none",
+          mixBlendMode: "plus-lighter",
+          strokeWidth: {
+            base: "8px",
+            _whenHovered: "12px"
+          },
+          strokeOpacity: {
+            base: 0.3,
+            _whenHovered: 0.5
+          }
+        })
+      ),
+      d: svgPath,
+      strokeLinecap: "round"
+    }
+  );
+}
+
+export { EdgeDrifts };

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

@@ -1,8 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { useRafEffect } from '@react-hookz/web';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { ZIndexes } from '../../../base/const.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
@@ -12,6 +11,7 @@ import { useDiagram } from '../../../hooks/safeContext.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
 import { useXYFlow, useXYStoreApi } from '../../../hooks/useXYFlow.js';
 import { isSamePoint } from '../../../utils/xyflow.js';
+import { EdgeDrifts } from './EdgeDrifts.js';
 import { controlDragging, controlPointsContainer, controlPoint } from './edges.css.js';
 import { useControlPoints } from './useControlPoints.js';
 import { useRelationshipEdgePath } from './useRelationshipEdgePath.js';
@@ -31,11 +31,14 @@ const getEdgeCenter = (path) => {
 };
 const RelationshipEdge = memoEdge((props) => {
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
+  const isControlPointDraggingRef = useRef(isControlPointDragging);
+  isControlPointDraggingRef.current = isControlPointDragging;
   const xyflow = useXYFlow();
   const diagram = useDiagram();
   const {
     enableNavigateTo,
-    enableReadOnly
+    enableReadOnly,
+    enableCompareWithLatest
   } = useEnabledFeatures();
   const enabledEditing = !enableReadOnly;
   const {
@@ -66,21 +69,22 @@ const RelationshipEdge = memoEdge((props) => {
     y: labelXY?.y ?? labelY
   });
   useUpdateEffect(() => {
-    setLabelPos({
+    if (isControlPointDraggingRef.current) {
+      return;
+    }
+    const next = {
       x: labelX,
       y: labelY
-    });
+    };
+    setLabelPos((current) => isSamePoint(current, next) ? current : next);
   }, [labelX, labelY]);
   const svgPathRef = useRef(null);
-  useRafEffect(() => {
+  useEffect(() => {
     const path = svgPathRef.current;
     if (!path || !isControlPointDragging) return;
-    setLabelPos(getEdgeCenter(path));
+    const next = getEdgeCenter(path);
+    setLabelPos((current) => isSamePoint(current, next) ? current : next);
   }, [edgePath, isControlPointDragging]);
-  if (isControlPointDragging) {
-    labelX = labelPos.x;
-    labelY = labelPos.y;
-  }
   const updateEdgeData = useCallbackRef((controlPoints2) => {
     const point = svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
     if (labelBBox && point) {
@@ -89,8 +93,7 @@ const RelationshipEdge = memoEdge((props) => {
         labelBBox: {
           ...labelBBox,
           ...point
-        },
-        labelXY: point
+        }
       });
     } else {
       diagram.updateEdgeData(id, { controlPoints: controlPoints2 });
@@ -165,11 +168,18 @@ const RelationshipEdge = memoEdge((props) => {
           }
         }
       ),
+      enableCompareWithLatest && /* @__PURE__ */ jsx(
+        EdgeDrifts,
+        {
+          edgeProps: props,
+          svgPath: edgePath
+        }
+      ),
       labelBBox && /* @__PURE__ */ jsx(
         EdgeLabelContainer,
         {
           edgeProps: props,
-          labelPosition: { x: labelX, y: labelY },
+          labelPosition: isControlPointDragging ? labelPos : { x: labelX, y: labelY },
           children: /* @__PURE__ */ jsx(
             EdgeLabel,
             {

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

@@ -5,6 +5,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { EdgeDrifts } from './EdgeDrifts.js';
 import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';
 import { EdgePath } from '../../../base-primitives/edge/EdgePath.js';
 import { EdgeLabelContainer } from '../../../base-primitives/edge/EdgeLabelContainer.js';
@@ -13,7 +14,7 @@ import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton
 
 const LABEL_OFFSET = 16;
 function SequenceStepEdge(props) {
-  const { enableNavigateTo } = useEnabledFeatures();
+  const { enableNavigateTo, enableCompareWithLatest } = useEnabledFeatures();
   const diagram = useDiagram();
   const { navigateTo } = props.data;
   const isSelfLoop = props.source === props.target;
@@ -50,6 +51,7 @@ function SequenceStepEdge(props) {
         svgPath: path
       }
     ),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, { edgeProps: props, svgPath: path }),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
       {

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

@@ -19,8 +19,8 @@ function useControlPoints({
     const next = data.controlPoints ?? bezierControlPoints(data.points);
     setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
   }, [
-    data.controlPoints?.map((p) => `${p.x},${p.y}`).join("|") ?? "",
-    data.points.map((p) => `${p[0]},${p[1]}`).join("|")
+    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);
@@ -30,7 +30,7 @@ function useControlPoints({
       ...controlPoints.map(vector) || [],
       data.dir === "back" ? sourceV : targetV
     ];
-    const newPointV = vector(Math.round(x), Math.round(y));
+    const newPointV = vector(x, y).round();
     let insertionIndex = 0;
     let minDistance = Infinity;
     for (let i = 0; i < points.length - 1; i++) {

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

@@ -3,10 +3,10 @@ import { line, curveCatmullRomOpen } from 'd3-shape';
 import { useCallback } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
-import { extractMinimalInternalNode, getNodeIntersectionFromCenterToPoint, bezierPath, isEqualMinimalInternalNodes } from '../../../utils/xyflow.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 isSameNodes = (a, b) => isEqualMinimalInternalNodes(a.sourceNode, b.sourceNode) && isEqualMinimalInternalNodes(a.targetNode, b.targetNode);
+const isSameRects = (a, b) => isEqualRects(a.sourceNode, b.sourceNode) && isEqualRects(a.targetNode, b.targetNode);
 function useRelationshipEdgePath({
   props: {
     sourceX,
@@ -28,11 +28,11 @@ function useRelationshipEdgePath({
       const sourceNode2 = nonNullable(nodeLookup.get(source), `source node ${source} not found`);
       const targetNode2 = nonNullable(nodeLookup.get(target), `target node ${target} not found`);
       return {
-        sourceNode: extractMinimalInternalNode(sourceNode2),
-        targetNode: extractMinimalInternalNode(targetNode2)
+        sourceNode: nodeToRect(sourceNode2),
+        targetNode: nodeToRect(targetNode2)
       };
     }, [source, target]),
-    isSameNodes
+    isSameRects
   );
   const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
   if (isModified) {

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/{ElementNodeDrifts.js → NodeDrifts.js}

@@ -1,13 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box } from '@likec4/styles/jsx';
 import { Notification, Text } from '@mantine/core';
-import { NodeToolbar, Position } from '@xyflow/react';
+import { Position, NodeToolbar } from '@xyflow/react';
 
-function ElementNodeDrifts({ data }) {
+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,
     {
@@ -26,7 +30,7 @@ function ElementNodeDrifts({ data }) {
           outlineOffset: "1"
         }
       },
-      children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: Position.Bottom, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: toolbarPosition, children: /* @__PURE__ */ jsx(
         Notification,
         {
           color: "orange",
@@ -43,4 +47,4 @@ function ElementNodeDrifts({ data }) {
   );
 }
 
-export { ElementNodeDrifts };
+export { NodeDrifts };

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

@@ -5,6 +5,7 @@ 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';
@@ -68,7 +69,7 @@ const ActorStepPort = ({
 };
 const hasModelFqn = (data) => isTruthy(data.modelFqn);
 function SequenceActorNode(props) {
-  const { enableElementDetails } = useEnabledFeatures();
+  const { enableElementDetails, enableCompareWithLatest } = useEnabledFeatures();
   const data = props.data;
   const {
     id,
@@ -105,6 +106,7 @@ 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: [
@@ -128,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.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import '@xstate/react';
 import 'fast-equals';
@@ -6,7 +7,7 @@ import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
-import { ElementNodeDrifts } from './ElementNodeDrifts.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';
@@ -52,7 +53,7 @@ function CompoundDetailsButtonWithHandler(props) {
 function ElementNode(props) {
   const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    enableCompareWithLatest && /* @__PURE__ */ jsx(ElementNodeDrifts, { ...props }),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
@@ -65,7 +66,7 @@ function ElementNode(props) {
 function DeploymentNode(props) {
   const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    enableCompareWithLatest && /* @__PURE__ */ jsx(ElementNodeDrifts, { ...props }),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
@@ -75,31 +76,71 @@ function DeploymentNode(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 };