@likec4/diagram 1.42.1 → 1.44.0

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 { extractMinimalInternalNode, getNodeIntersectionFromCenterToPoint, bezierPath, isEqualMinimalInternalNodes } 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);
+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: extractMinimalInternalNode(sourceNode2),
+        targetNode: extractMinimalInternalNode(targetNode2)
+      };
+    }, [source, target]),
+    isSameNodes
+  );
+  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/ElementNodeDrifts.d.ts

@@ -0,0 +1,4 @@
+import { Types } from '../../types';
+type ElementNodeDrifts = Types.NodeProps<'element' | 'deployment'>;
+export declare function ElementNodeDrifts({ data }: ElementNodeDrifts): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,46 @@
+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';
+
+function ElementNodeDrifts({ data }) {
+  const drifts = data.drifts;
+  if (!drifts || drifts.length === 0) {
+    return null;
+  }
+  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: Position.Bottom, 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 { ElementNodeDrifts };

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

@@ -3,6 +3,7 @@ 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 { ElementDetailsButtonWithHandler } from './nodes.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
@@ -67,8 +68,10 @@ const ActorStepPort = ({
 };
 const hasModelFqn = (data) => isTruthy(data.modelFqn);
 function SequenceActorNode(props) {
+  const { enableElementDetails } = useEnabledFeatures();
   const data = props.data;
   const {
+    id,
     positionAbsoluteY,
     data: {
       viewHeight,
@@ -106,7 +109,7 @@ function SequenceActorNode(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))

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,12 @@
 import { jsxs, 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 { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
+import { ElementNodeDrifts } from './ElementNodeDrifts.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 +20,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 +35,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,25 +50,27 @@ 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(ElementNodeDrifts, { ...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(ElementNodeDrifts, { ...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, {})
   ] });

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;

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

@@ -1,18 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import { invariant } from '@likec4/core';
 import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
-import { useState } from 'react';
-import { useDiagram } from '../../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.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 IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.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';
 
-const SemanticColors = [
-  "primary",
-  "secondary",
-  "muted"
-];
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",
@@ -23,45 +18,6 @@ const Tooltip = Tooltip$1.withProps({
   offset: 4,
   withinPortal: false
 });
-function useHandlers(target, props) {
-  const { onChange: triggerOnChange } = useDiagramEventHandlers();
-  const diagram = useDiagram();
-  const [originalColor, setOriginalColor] = useState(null);
-  const onColorPreview = useCallbackRef((color) => {
-    if (color === null) {
-      invariant(originalColor, "originalColor is null");
-      setOriginalColor(null);
-      diagram.updateNodeData(props.data.id, {
-        color: originalColor
-      });
-      return;
-    }
-    setOriginalColor((value) => value ?? props.data.color);
-    diagram.updateNodeData(props.data.id, {
-      color
-    });
-  });
-  const onChange = useCallbackRef((change) => {
-    triggerOnChange?.({
-      change: {
-        op: "change-element-style",
-        style: change,
-        targets: [target]
-      }
-    });
-    const { shape, color, ...style } = change;
-    diagram.updateNodeData(props.data.id, {
-      ...shape && { shape },
-      ...color && { color },
-      style
-    });
-  });
-  return {
-    elementColor: originalColor ?? props.data.color,
-    onColorPreview,
-    onChange
-  };
-}
 function BrowseRelationshipsButton({ fqn }) {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", children: /* @__PURE__ */ jsx(
@@ -113,4 +69,4 @@ function GoToSourceButton(props) {
   ) });
 }
 
-export { BrowseRelationshipsButton, GoToSourceButton, SemanticColors, Tooltip, useHandlers };
+export { BrowseRelationshipsButton, GoToSourceButton, Tooltip };

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

@@ -0,0 +1,5 @@
+import { ThemeColor, ViewChange } from '@likec4/core/types';
+export declare const SemanticColors: readonly ["primary", "secondary", "muted"];
+export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void;
+export type ThemeColorKey = typeof SemanticColors[number];
+export type ColorKey = Exclude<ThemeColor, ThemeColorKey>;

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

@@ -0,0 +1,7 @@
+const SemanticColors = [
+  "primary",
+  "secondary",
+  "muted"
+];
+
+export { SemanticColors };

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

@@ -0,0 +1,8 @@
+import { DeploymentFqn, Fqn, ThemeColor } from '@likec4/core';
+import { Types } from '../../../types';
+import { OnStyleChange } from './types';
+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;
+};

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

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useCallbackRef } from '../../../../hooks/useCallbackRef.js';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../../../hooks/safeContext.js';
+
+function useHandlers(target, props) {
+  const diagram = useDiagram();
+  const [originalColor, setOriginalColor] = useState(null);
+  const onColorPreview = useCallbackRef((color) => {
+    if (color === null) {
+      if (!originalColor) return;
+      setOriginalColor(null);
+      diagram.updateNodeData(props.data.id, {
+        color: originalColor
+      });
+      return;
+    }
+    setOriginalColor((value) => value ?? props.data.color);
+    diagram.updateNodeData(props.data.id, {
+      color
+    });
+  });
+  const onChange = useCallbackRef((change) => {
+    const { shape, color, ...style } = change;
+    diagram.updateNodeData(props.data.id, {
+      ...shape && { shape },
+      ...color && { color },
+      style
+    });
+    diagram.triggerChange({
+      op: "change-element-style",
+      style: change,
+      targets: [target]
+    });
+  });
+  return {
+    elementColor: originalColor ?? props.data.color,
+    onColorPreview,
+    onChange
+  };
+}
+
+export { useHandlers };

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -13,16 +13,17 @@ import { Link } from '../../components/Link.js';
 import { PortalToContainer } from '../../components/PortalToContainer.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useDiagram, useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { RelationshipPopoverActorLogic } from './actor.js';
 import { endpoint, title } from './styles.css.js';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { useRootContainerRef } from '../../context/RootContainerContext.js';
 import { roundDpr } from '../../utils/roundDpr.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
@@ -56,9 +57,6 @@ const RelationshipPopover = memo(() => {
   useOnDiagramEvent("edgeMouseLeave", () => {
     actorRef.send({ type: "xyedge.mouseLeave" });
   });
-  useOnDiagramEvent("edgeEditingStarted", () => {
-    actorRef.send({ type: "close" });
-  });
   useOnDiagramEvent("walkthroughStarted", () => {
     actorRef.send({ type: "close" });
   });

package/dist/likec4diagram/state/DiagramActorProvider.d.ts

@@ -1,12 +1,13 @@
 import { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { ViewPadding } from '../../LikeC4Diagram.props';
-export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
+export declare function DiagramActorProvider({ view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
     view: DiagramView;
     zoomable: boolean;
     pannable: boolean;
-    fitViewPadding: ViewPadding;
+    nodesDraggable: boolean;
     nodesSelectable: boolean;
+    fitViewPadding: ViewPadding;
     where: WhereOperator | null;
     dynamicViewVariant: DynamicViewDisplayVariant | undefined;
 }>): import("react/jsx-runtime").JSX.Element;