@likec4/diagram 1.41.0 → 1.42.1

package/dist/{likec4model → hooks}/useLikeC4Project.d.ts

@@ -1,5 +1,5 @@
 import { LikeC4Project, ProjectId } from '@likec4/core/types';
-import { LikeC4ProjectsContext } from './LikeC4ProjectsContext';
+import { LikeC4ProjectsContext } from '../context/LikeC4ProjectsContext';
 /**
  * @returns The list of available projects, or empty array if no projects are available.
  */

package/dist/{likec4model → hooks}/useLikeC4Project.js

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
-import { LikeC4ModelContext } from './LikeC4ModelContext.js';
-import { LikeC4ProjectsContext } from './LikeC4ProjectsContext.js';
+import { LikeC4ModelContext } from '../context/LikeC4ModelContext.js';
+import { LikeC4ProjectsContext } from '../context/LikeC4ProjectsContext.js';
 
 const emptyProjects = [];
 function useLikeC4Projects() {

package/dist/hooks/useLikeC4Styles.d.ts

@@ -0,0 +1,2 @@
+import { LikeC4Styles } from '@likec4/core/styles';
+export declare function useLikeC4Styles(): LikeC4Styles;

package/dist/hooks/useLikeC4Styles.js

@@ -0,0 +1,18 @@
+import { LikeC4Styles } from '@likec4/core/styles';
+import { useContext, useState, useEffect } from 'react';
+import { LikeC4ModelContext } from '../context/LikeC4ModelContext.js';
+
+function useLikeC4Styles() {
+  const model = useContext(LikeC4ModelContext);
+  if (!model) {
+    console.error("No LikeC4ModelContext found");
+  }
+  const $styles = model?.$styles ?? LikeC4Styles.DEFAULT;
+  const [styles, setStyles] = useState($styles);
+  useEffect(() => {
+    setStyles((current) => current.equals($styles) ? current : $styles);
+  }, [$styles]);
+  return styles;
+}
+
+export { useLikeC4Styles };

package/dist/hooks/useMantinePortalProps.js

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { useRootContainer } from '../context/RootContainer.js';
+import { useRootContainerElement } from '../context/RootContainerContext.js';
 
 function useMantinePortalProps() {
-  const target = useRootContainer();
+  const target = useRootContainerElement();
   return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
 }
 

package/dist/hooks/useReducedGraphics.d.ts

@@ -1 +1 @@
-export { useIsPanning, useIsReducedGraphics } from '../context/ReduceGraphics';
+export { useIsPanning, useIsReducedGraphics } from '../context/RootContainerContext';

package/dist/hooks/useXYFlow.d.ts

@@ -1,15 +1,15 @@
-import { ReactFlowInstance, ReactFlowState, InternalNode } from '@xyflow/react';
+import { InternalNode, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
-export declare const useXYFlow: () => ReactFlowInstance<Types.Node, Types.Edge>;
-export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>;
-export type XYStoreState = ReactFlowState<Types.Node, Types.Edge>;
+export type XYFlowInstance = ReactFlowInstance<Types.AnyNode, Types.AnyEdge>;
+export declare function useXYFlow(): XYFlowInstance;
+export type XYStoreState = ReactFlowState<Types.AnyNode, Types.AnyEdge>;
 export declare function useXYStore<StateSlice = unknown>(selector: (state: XYStoreState) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
-export declare const useXYStoreApi: () => {
-    getState: () => ReactFlowState<Types.Node, Types.Edge>;
-    setState: (partial: ReactFlowState<Types.Node, Types.Edge> | Partial<ReactFlowState<Types.Node, Types.Edge>> | ((state: ReactFlowState<Types.Node, Types.Edge>) => ReactFlowState<Types.Node, Types.Edge> | Partial<ReactFlowState<Types.Node, Types.Edge>>), replace?: boolean | undefined) => void;
-    subscribe: (listener: (state: ReactFlowState<Types.Node, Types.Edge>, prevState: ReactFlowState<Types.Node, Types.Edge>) => void) => () => void;
+export declare function useXYStoreApi(): XYStoreApi;
+export type XYStoreApi = {
+    getState: () => XYStoreState;
+    setState: (state: Partial<XYStoreState> | ((state: XYStoreState) => Partial<XYStoreState>)) => void;
 };
-export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
-export declare const useXYInternalNode: (id: string) => InternalNode<Types.Node> | undefined;
+export type XYInternalNode = InternalNode<Types.AnyNode>;
+export declare function useXYInternalNode(id: string): XYInternalNode | undefined;
 export declare function useCurrentZoom(): number;
 export declare function useIsZoomTooSmall(): boolean;

package/dist/hooks/useXYFlow.js

@@ -1,16 +1,22 @@
 import { useCallbackRef } from '@mantine/hooks';
-import { useReactFlow, useInternalNode, useStoreApi, useStore } from '@xyflow/react';
+import { useStore, useStoreApi, useReactFlow, useInternalNode } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 
-const useXYFlow = useReactFlow;
+function useXYFlow() {
+  return useReactFlow();
+}
 function useXYStore(selector, equalityFn) {
   return useStore(
     useCallbackRef(selector),
-    equalityFn ?? shallowEqual
+    shallowEqual
   );
 }
-const useXYStoreApi = useStoreApi;
-const useXYInternalNode = useInternalNode;
+function useXYStoreApi() {
+  return useStoreApi();
+}
+function useXYInternalNode(id) {
+  return useInternalNode(id);
+}
 const selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
 function useCurrentZoom() {
   return useStore(selectCurrentZoom);

package/dist/index.d.ts

@@ -1,10 +1,18 @@
-export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout';
-export { FramerMotionConfig } from './context/FramerMotionConfig';
 export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
-export { Overlay, type OverlayProps, } from './overlays/overlay/Overlay';
+export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, WhereOperator, } from './LikeC4Diagram.props';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
-export * from './custom/hooks';
-export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from './LikeC4Diagram.props';
-export { StaticLikeC4Diagram, type StaticLikeC4DiagramProps, } from './StaticLikeC4Diagram';
+export { type DiagramApi, type DiagramContext, useDiagram, useDiagramContext, useOnDiagramEvent, } from './hooks/useDiagram';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
+export { useCurrentViewModel } from './hooks/useCurrentViewModel';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';
+export { useLikeC4Styles } from './hooks/useLikeC4Styles';
+export { useUpdateEffect } from './hooks/useUpdateEffect';
+export type { Types } from './likec4diagram/types';
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
+export { LikeC4View } from './LikeC4View';
+export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View';
+export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
+export { useCurrentViewId } from './hooks/useCurrentViewId';
+export { getViewBounds } from './utils/get-view-bounds';

package/dist/index.js

@@ -1,19 +1,15 @@
-export { FramerMotionConfig } from './context/FramerMotionConfig.js';
 export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
-export { Overlay } from './overlays/overlay/Overlay.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
-export { useDiagramEventHandlers } from './context/DiagramEventHandlers.js';
-export { useEnabledFeatures } from './context/DiagramFeatures.js';
-export { useCurrentViewId } from './hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
-export { useDiagramActorRef } from './hooks/safeContext.js';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
-export { useCurrentViewModel } from './likec4model/useCurrentViewModel.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './likec4model/useLikeC4Model.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './likec4model/useLikeC4Project.js';
-export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
-export { useSetState } from './hooks/useSetState.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';
+export { useCurrentViewModel } from './hooks/useCurrentViewModel.js';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './hooks/useLikeC4Project.js';
+export { useLikeC4Styles } from './hooks/useLikeC4Styles.js';
 export { useUpdateEffect } from './hooks/useUpdateEffect.js';
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
+export { LikeC4View } from './LikeC4View.js';
+export { ReactLikeC4 } from './ReactLikeC4.js';
+export { useCurrentViewId } from './hooks/useCurrentViewId.js';
+export { getViewBounds } from './utils/get-view-bounds.js';

package/dist/likec4diagram/DiagramUI.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const LikeC4DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/DiagramUI.js

@@ -1,41 +1,35 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRerender } from '@react-hookz/web';
 import { memo } from 'react';
+import { ErrorBoundary } from '../components/ErrorFallback.js';
+import { EnsureCurrentViewModel } from '../context/LikeC4ModelContext.js';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
 import { useSearchActorRef } from '../hooks/useSearchActor.js';
-import { EnsureCurrentViewModel } from '../likec4model/LikeC4ModelContext.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { RelationshipPopover } from './relationship-popover/RelationshipPopover.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { NavigationPanel } from '../navigationpanel/NavigationPanel.js';
-import { Controls } from './ui/controls/Controls.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
-import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
-import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough.js';
 
-const DiagramUI = memo(() => {
+const LikeC4DiagramUI = memo(() => {
   const {
     enableControls,
-    enableViewTitle,
     enableNotations,
-    enableDynamicViewWalkthrough,
     enableSearch,
     enableRelationshipDetails
   } = useEnabledFeatures();
+  const rerender = useRerender();
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    enableControls === "next" ? /* @__PURE__ */ jsx(EnsureCurrentViewModel, { children: /* @__PURE__ */ jsx(NavigationPanel, {}) }) : /* @__PURE__ */ jsx(Controls, {}),
+  return /* @__PURE__ */ jsxs(ErrorBoundary, { onReset: rerender, children: [
+    enableControls && /* @__PURE__ */ jsx(EnsureCurrentViewModel, { children: /* @__PURE__ */ jsx(NavigationPanel, {}) }),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableControls === true && /* @__PURE__ */ jsxs(Fragment, { children: [
-      enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
-      enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
-    ] }),
     enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef }),
     enableRelationshipDetails && /* @__PURE__ */ jsx(RelationshipPopover, {})
   ] });
 });
-DiagramUI.displayName = "DiagramUI";
+LikeC4DiagramUI.displayName = "DiagramUI";
 
-export { DiagramUI };
+export { LikeC4DiagramUI };

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,19 +1,46 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { deepEqual, shallowEqual } from 'fast-equals';
+import { isEmpty } from 'remeda';
+import { memoNode } from '../base-primitives/memoNode.js';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
-import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
+import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerContext.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
-import { BuiltinNodes, edgeTypes } from './custom/index.js';
-import { DiagramUI } from './DiagramUI.js';
+import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
+import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-import { SequenceParallelArea } from './custom/nodes/SequenceActorNode.js';
-import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 
+const edgeTypes = {
+  relationship: BuiltinEdges.RelationshipEdge,
+  "seq-step": BuiltinEdges.SequenceStepEdge
+};
+const builtinNodes = {
+  element: memoNode(BuiltinNodes.ElementNode),
+  deployment: memoNode(BuiltinNodes.DeploymentNode),
+  "compound-element": memoNode(BuiltinNodes.CompoundElementNode),
+  "compound-deployment": memoNode(BuiltinNodes.CompoundDeploymentNode),
+  "view-group": memoNode(BuiltinNodes.ViewGroupNode),
+  "seq-actor": memoNode(BuiltinNodes.SequenceActorNode),
+  "seq-parallel": memoNode(BuiltinNodes.SequenceParallelArea)
+};
+function prepareNodeTypes(nodeTypes) {
+  if (!nodeTypes || isEmpty(nodeTypes)) {
+    return builtinNodes;
+  }
+  return {
+    element: nodeTypes.element ?? builtinNodes.element,
+    deployment: nodeTypes.deployment ?? builtinNodes.deployment,
+    "compound-element": nodeTypes.compoundElement ?? builtinNodes["compound-element"],
+    "compound-deployment": nodeTypes.compoundDeployment ?? builtinNodes["compound-deployment"],
+    "view-group": nodeTypes.viewGroup ?? builtinNodes["view-group"],
+    "seq-actor": nodeTypes.seqActor ?? builtinNodes["seq-actor"],
+    "seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"]
+  };
+}
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
   nodes: ctx.xynodes,
@@ -79,123 +106,108 @@ function LikeC4DiagramXYFlow({
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   }), nodeTypes = useCustomCompareMemo(
-    () => {
-      return {
-        element: renderNodes?.element ?? BuiltinNodes.element,
-        deployment: renderNodes?.deployment ?? BuiltinNodes.deployment,
-        "compound-element": renderNodes?.compoundElement ?? BuiltinNodes.compoundElement,
-        "compound-deployment": renderNodes?.compoundDeployment ?? BuiltinNodes.compoundDeployment,
-        "view-group": renderNodes?.viewGroup ?? BuiltinNodes.viewGroup,
-        "seq-actor": renderNodes?.sequenceActor ?? BuiltinNodes.sequenceActor,
-        "seq-parallel": SequenceParallelArea
-      };
-    },
+    () => prepareNodeTypes(renderNodes),
     [renderNodes],
-    shallowEqual
+    depsShallowEqual
   );
   useUpdateEffect(() => {
     console.warn("renderNodes changed - this might degrade performance");
   }, [nodeTypes]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      BaseXYFlow,
-      {
-        nodes,
-        edges,
-        className: cx(initialized ? "initialized" : "not-initialized"),
-        nodeTypes,
-        edgeTypes,
-        onNodesChange: useCallbackRef((changes) => {
-          diagram.send({ type: "xyflow.applyNodeChanges", changes });
-        }),
-        onEdgesChange: useCallbackRef((changes) => {
-          diagram.send({ type: "xyflow.applyEdgeChanges", changes });
-        }),
-        background: initialized ? background : "transparent",
-        fitView: false,
-        onNodeClick: useCallbackRef((e, node) => {
-          e.stopPropagation();
-          diagram.send({ type: "xyflow.nodeClick", node });
-          onNodeClick?.(diagram.findDiagramNode(node.id), e);
-        }),
-        onEdgeClick: useCallbackRef((e, edge) => {
-          e.stopPropagation();
-          diagram.send({ type: "xyflow.edgeClick", edge });
-          onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
-        }),
-        onPaneClick: useCallbackRef((e) => {
-          e.stopPropagation();
-          diagram.send({ type: "xyflow.paneClick" });
-          onCanvasClick?.(e);
-        }),
-        onDoubleClick: useCallbackRef((e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          diagram.send({ type: "xyflow.paneDblClick" });
-          onCanvasDblClick?.(e);
-        }),
-        onNodeMouseEnter: useCallbackRef((_event, node) => {
-          _event.stopPropagation();
-          if (!node.data.hovered) {
-            diagram.send({ type: "xyflow.nodeMouseEnter", node });
-          }
-        }),
-        onNodeMouseLeave: useCallbackRef((_event, node) => {
-          _event.stopPropagation();
-          if (node.data.hovered) {
-            diagram.send({ type: "xyflow.nodeMouseLeave", node });
-          }
-        }),
-        onEdgeMouseEnter: useCallbackRef((event, edge) => {
-          event.stopPropagation();
-          if (!edge.data.hovered) {
-            diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
-          }
-        }),
-        onEdgeMouseLeave: useCallbackRef((event, edge) => {
-          event.stopPropagation();
-          if (edge.data.hovered) {
-            diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
-          }
-        }),
-        ...props.pannable && {
-          onMove
-        },
-        onMoveEnd,
-        onInit: useCallbackRef((instance) => {
-          diagram.send({ type: "xyflow.init", instance });
-        }),
-        onNodeContextMenu: useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id),
-            `diagramNode ${node.id} not found`
-          );
-          onNodeContextMenu?.(diagramNode, event);
-        }),
-        onEdgeContextMenu: useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id),
-            `diagramEdge ${edge.id} not found`
-          );
-          onEdgeContextMenu?.(diagramEdge, event);
-        }),
-        onPaneContextMenu: useCallbackRef((event) => {
-          onCanvasContextMenu?.(event);
-        }),
-        ...enableFitView && {
-          onViewportResize
-        },
-        nodesDraggable: notReadOnly && nodesDraggable,
-        nodesSelectable,
-        edgesFocusable: false,
-        ...notReadOnly && nodesDraggable && layoutConstraints,
-        ...props,
-        ...reactFlowProps,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx(DiagramUI, {}, "DiagramUI")
-  ] });
+  return /* @__PURE__ */ jsx(
+    BaseXYFlow,
+    {
+      nodes,
+      edges,
+      className: cx(initialized ? "initialized" : "not-initialized"),
+      nodeTypes,
+      edgeTypes,
+      onNodesChange: useCallbackRef((changes) => {
+        diagram.send({ type: "xyflow.applyNodeChanges", changes });
+      }),
+      onEdgesChange: useCallbackRef((changes) => {
+        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
+      }),
+      background: initialized ? background : "transparent",
+      fitView: false,
+      onNodeClick: useCallbackRef((e, node) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.nodeClick", node });
+        onNodeClick?.(diagram.findDiagramNode(node.id), e);
+      }),
+      onEdgeClick: useCallbackRef((e, edge) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.edgeClick", edge });
+        onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
+      }),
+      onPaneClick: useCallbackRef((e) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.paneClick" });
+        onCanvasClick?.(e);
+      }),
+      onDoubleClick: useCallbackRef((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        diagram.send({ type: "xyflow.paneDblClick" });
+        onCanvasDblClick?.(e);
+      }),
+      onNodeMouseEnter: useCallbackRef((_event, node) => {
+        _event.stopPropagation();
+        if (!node.data.hovered) {
+          diagram.send({ type: "xyflow.nodeMouseEnter", node });
+        }
+      }),
+      onNodeMouseLeave: useCallbackRef((_event, node) => {
+        _event.stopPropagation();
+        if (node.data.hovered) {
+          diagram.send({ type: "xyflow.nodeMouseLeave", node });
+        }
+      }),
+      onEdgeMouseEnter: useCallbackRef((event, edge) => {
+        event.stopPropagation();
+        if (!edge.data.hovered) {
+          diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
+        }
+      }),
+      onEdgeMouseLeave: useCallbackRef((event, edge) => {
+        event.stopPropagation();
+        if (edge.data.hovered) {
+          diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
+        }
+      }),
+      onMove,
+      onMoveEnd,
+      onInit: useCallbackRef((instance) => {
+        diagram.send({ type: "xyflow.init", instance });
+      }),
+      onNodeContextMenu: useCallbackRef((event, node) => {
+        const diagramNode = nonNullable(
+          diagram.findDiagramNode(node.id),
+          `diagramNode ${node.id} not found`
+        );
+        onNodeContextMenu?.(diagramNode, event);
+      }),
+      onEdgeContextMenu: useCallbackRef((event, edge) => {
+        const diagramEdge = nonNullable(
+          diagram.findDiagramEdge(edge.id),
+          `diagramEdge ${edge.id} not found`
+        );
+        onEdgeContextMenu?.(diagramEdge, event);
+      }),
+      onPaneContextMenu: useCallbackRef((event) => {
+        onCanvasContextMenu?.(event);
+      }),
+      ...enableFitView && {
+        onViewportResize
+      },
+      nodesDraggable: notReadOnly && nodesDraggable,
+      nodesSelectable,
+      edgesFocusable: false,
+      ...notReadOnly && nodesDraggable && layoutConstraints,
+      ...props,
+      ...reactFlowProps,
+      children
+    }
+  );
 }
 
 export { LikeC4DiagramXYFlow };

package/dist/likec4diagram/convert-to-xyflow.js

@@ -1,10 +1,10 @@
 import { diagramToXY } from './xyflow-diagram/diagram-view.js';
-import { sequenceViewToXY } from './xyflow-sequence/sequence-view.js';
+import { sequenceLayoutToXY } from './xyflow-sequence/sequence-layout.js';
 
 function convertToXYFlow({ dynamicViewVariant, ...params }) {
   const view = params.view;
   const isDynamic = view._type === "dynamic";
-  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceViewToXY(view) : diagramToXY(params);
+  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view) : diagramToXY(params);
   if (isDynamic && view.variant !== dynamicViewVariant) {
     return {
       view: {

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

@@ -1,51 +1,3 @@
-import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId, RichTextOrEmpty } from '@likec4/core';
-import { XYPosition } from '@xyflow/react';
-import { FunctionComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
-export declare const RelationshipEdge: FunctionComponent<{
-    id: string;
-    selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
-    style?: CSSProperties;
-    animated?: boolean;
-    source: string;
-    target: string;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
-    sourcePosition: Position;
-    targetPosition: Position;
-    label?: ReactNode;
-    labelStyle?: CSSProperties;
-    labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
-    labelBgPadding?: [number, number];
-    labelBgBorderRadius?: number;
-    sourceHandleId?: string | null;
-    targetHandleId?: string | null;
-    markerStart?: string;
-    markerEnd?: string;
-    pathOptions?: any;
-    interactionWidth?: number;
-    data: import("../../../base").Base.EdgeData & {
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-        id: EdgeId;
-        label: string | null;
-        points: NonEmptyArray<Point>;
-        color: Color | undefined;
-        dir: "forward" | "back" | "both" | undefined;
-        technology: string | null | undefined;
-        labelBBox: BBox | null | undefined;
-        line: RelationshipLineType | undefined;
-        head: RelationshipArrowType | undefined;
-        tail: RelationshipArrowType | undefined;
-        navigateTo: ViewId<string> | null | undefined;
-        notes: RichTextOrEmpty;
-        labelXY: XYPosition | null;
-        controlPoints: XYPosition[] | undefined | null;
-    };
-}>;
+import { Types } from '../../types';
+import { FunctionComponent } from 'react';
+export declare const RelationshipEdge: FunctionComponent<Types.EdgeProps<"relationship">>;

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

@@ -15,15 +15,15 @@ import { VectorImpl, vector } from '../../../utils/vector.js';
 import { isSamePoint, bezierControlPoints, bezierPath } from '../../../utils/xyflow.js';
 import { controlDragging, controlPointsContainer, controlPoint } from './edges.css.js';
 import { getNodeIntersectionFromCenterToPoint } from './utils.js';
-import { customEdge } from '../../../base/primitives/customEdge.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';
-import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
-import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
+import { memoEdge } from '../../../base-primitives/memoEdge.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';
+import { EdgeLabel } from '../../../base-primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton.js';
 
 const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
-const RelationshipEdge = customEdge((props) => {
+const RelationshipEdge = memoEdge((props) => {
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
@@ -46,7 +46,6 @@ const RelationshipEdge = customEdge((props) => {
       points,
       hovered = false,
       active = false,
-      dimmed = false,
       labelBBox,
       labelXY,
       ...data
@@ -56,7 +55,7 @@ const RelationshipEdge = customEdge((props) => {
   const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
   const sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`);
   const targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`);
-  const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position);
+  const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data);
   let controlPoints = data.controlPoints ?? bezierControlPoints(props.data);
   let edgePath;
   if (isModified) {

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

@@ -1,3 +1,2 @@
-import { EdgeProps } from '../../../base';
 import { Types } from '../../types';
-export declare function SequenceStepEdge(props: EdgeProps<Types.SequenceStepEdgeData>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react/jsx-runtime").JSX.Element;