@likec4/diagram 1.6.0 → 1.7.0

package/dist/types.d.ts

@@ -0,0 +1,20 @@
+import { Fqn, RelationID, ViewID } from '@likec4/core';
+import { Simplify } from 'type-fest';
+
+type TaggedUnion<TagKey extends string, UnionMembers extends Record<string, Record<string, unknown>>> = {
+    [Name in keyof UnionMembers]: Simplify<{
+        [Key in TagKey]: Name;
+    } & UnionMembers[Name]>;
+}[keyof UnionMembers];
+export type DiagramEditorCommand = TaggedUnion<'type', {
+    showElement: {
+        element: Fqn;
+    };
+    showRelation: {
+        relation: RelationID;
+    };
+    showView: {
+        view: ViewID;
+    };
+}>;
+export {};

package/dist/xyflow/EdgeMarkers.d.ts

@@ -9,3 +9,4 @@ export declare const EdgeMarkers: {
     Dot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
     ODot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
 };
+export type EdgeMarkerType = keyof typeof EdgeMarkers;

package/dist/xyflow/FitviewOnDiagramChange.d.ts

@@ -1,4 +1,4 @@
 /**
- * Fits the view when the view changes and nodes are initialized
+ * Fits the view when diagram changes
  */
 export declare function FitViewOnDiagramChange(): import("react/jsx-runtime").JSX.Element | null;

package/dist/xyflow/XYFlow.d.ts

@@ -1,12 +1,9 @@
 import { CSSProperties, PropsWithChildren } from 'react';
-import { XYFlowEdge, XYFlowNode } from './types';
 
 type XYFlowWrapperProps = PropsWithChildren<{
     colorMode?: 'system' | 'light' | 'dark';
     className?: string | undefined;
-    defaultNodes: XYFlowNode[];
-    defaultEdges: XYFlowEdge[];
     style?: CSSProperties | undefined;
 }>;
-export declare function XYFlow({ colorMode, className, children, defaultNodes, defaultEdges, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function XYFlow({ colorMode, className, children, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/xyflow/XYFlowEvents.d.ts

@@ -2,13 +2,15 @@ import { ReactFlowProps } from '@xyflow/react';
 import { Simplify } from 'type-fest';
 import { XYFlowEdge, XYFlowNode } from './types';
 
-export type XYFlowEventHandlers = Simplify<Required<Pick<ReactFlowProps<XYFlowNode, XYFlowEdge>, 'onDoubleClick' | 'onPaneClick' | 'onNodeClick' | 'onNodeDoubleClick' | 'onEdgeClick' | 'onMoveEnd' | 'onNodeContextMenu' | 'onEdgeContextMenu' | 'onPaneContextMenu' | 'onNodeMouseEnter' | 'onNodeMouseLeave' | 'onEdgeMouseEnter' | 'onEdgeMouseLeave'>>>;
+export type XYFlowEventHandlers = Simplify<Required<Pick<ReactFlowProps<XYFlowNode, XYFlowEdge>, 'onDoubleClick' | 'onPaneClick' | 'onNodeClick' | 'onNodeDoubleClick' | 'onEdgeClick' | 'onEdgeDoubleClick' | 'onMoveEnd' | 'onNodeContextMenu' | 'onEdgeContextMenu' | 'onPaneContextMenu' | 'onNodeMouseEnter' | 'onNodeMouseLeave' | 'onEdgeMouseEnter' | 'onEdgeMouseLeave'>>>;
 export declare function useXYFlowEvents(): {
     onDoubleClick: (event: import('react').MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
     onNodeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
     onPaneContextMenu: (event: MouseEvent | import('react').MouseEvent<Element, MouseEvent>) => void;
     onEdgeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -17,6 +19,7 @@ export declare function useXYFlowEvents(): {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('./types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -33,13 +36,12 @@ export declare function useXYFlowEvents(): {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('./types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }) => void;
     onNodeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
     onNodeDoubleClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
     onEdgeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -48,6 +50,7 @@ export declare function useXYFlowEvents(): {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('./types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -64,14 +67,42 @@ export declare function useXYFlowEvents(): {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
+    }) => void;
+    onEdgeDoubleClick: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
         data: import('./types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
+        selected?: boolean;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: string | import('react').ReactNode;
+        labelStyle?: import('react').CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import('react').CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: import('react').CSSProperties;
+        className?: string;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
+        focusable?: boolean;
     }) => void;
     onMoveEnd: (event: MouseEvent | TouchEvent | null, _viewport: import('@xyflow/react').Viewport) => void;
     onNodeMouseEnter: (_event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
     onNodeMouseLeave: (_event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
     onEdgeMouseEnter: (_event: import('react').MouseEvent<Element, MouseEvent>, { id, source, target }: {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -80,6 +111,7 @@ export declare function useXYFlowEvents(): {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('./types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -96,11 +128,10 @@ export declare function useXYFlowEvents(): {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('./types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }) => void;
     onEdgeMouseLeave: (_event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -109,6 +140,7 @@ export declare function useXYFlowEvents(): {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('./types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -125,8 +157,5 @@ export declare function useXYFlowEvents(): {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('./types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }) => void;
 };

package/dist/xyflow/XYFlowInner.d.ts

@@ -6,7 +6,6 @@ type XYFlowInnerProps = PropsWithChildren<{
     controls: boolean;
     showDiagramTitle: boolean;
     showNavigationButtons: boolean;
-    enableDynamicViewWalkthrough: boolean;
 }>;
 export declare const XYFlowInner: import('react').NamedExoticComponent<XYFlowInnerProps>;
 export {};

package/dist/xyflow/edges/RelationshipEdge.d.ts

@@ -2,6 +2,8 @@ import { EdgeProps } from '@xyflow/react';
 import { RelationshipData } from '../types';
 
 export declare const RelationshipEdge: import('react').NamedExoticComponent<EdgeProps<{
+    id: string;
+    type: "relationship";
     source: string;
     target: string;
     sourceHandle?: string | null;
@@ -10,6 +12,7 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     hidden?: boolean;
     deletable?: boolean;
     selectable?: boolean;
+    data: RelationshipData;
     selected?: boolean;
     markerStart?: import('@xyflow/react').EdgeMarkerType;
     markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -26,7 +29,4 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     className?: string;
     reconnectable?: boolean | import('@xyflow/react').HandleType;
     focusable?: boolean;
-    data: RelationshipData;
-    readonly id: string;
-    readonly type: "relationship";
 }>>;

package/dist/xyflow/hooks/index.d.ts

@@ -1,3 +1,2 @@
-export { useLayoutConstraints } from './useLayoutConstraints';
 export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow';
 export type * from './useXYFlow';

package/dist/xyflow/hooks/useXYFlow.d.ts

@@ -1,6 +1,8 @@
 import { XYFlowEdge, XYFlowNode, XYFlowState } from '../types';
 
 export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<XYFlowNode, {
+    id: string;
+    type: "relationship";
     source: string;
     target: string;
     sourceHandle?: string | null;
@@ -9,6 +11,7 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     hidden?: boolean;
     deletable?: boolean;
     selectable?: boolean;
+    data: import('../types').RelationshipData;
     selected?: boolean;
     markerStart?: import('@xyflow/react').EdgeMarkerType;
     markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -25,9 +28,6 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     className?: string;
     reconnectable?: boolean | import('@xyflow/react').HandleType;
     focusable?: boolean;
-    data: import('../types').RelationshipData;
-    readonly id: string;
-    readonly type: "relationship";
 }>;
 export declare const useXYNodesData: {
     (nodeId: string): Pick<XYFlowNode, "id" | "type" | "data"> | null;
@@ -36,6 +36,8 @@ export declare const useXYNodesData: {
 export declare function useXYStore<StateSlice = unknown>(selector: (state: XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
     getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -44,6 +46,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -60,11 +63,10 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }>;
     setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -73,6 +75,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -89,10 +92,9 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -101,6 +103,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -117,10 +120,9 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -129,6 +131,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -145,10 +148,9 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -157,6 +159,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -173,10 +176,9 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -185,6 +187,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -201,11 +204,10 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }>>), replace?: boolean | undefined) => void;
     subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -214,6 +216,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -230,10 +233,9 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
+        id: string;
+        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -242,6 +244,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
+        data: import('../types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -258,9 +261,6 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
-        data: import('../types').RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
     }>) => void) => () => void;
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;

package/dist/xyflow/types.d.ts

@@ -1,39 +1,36 @@
-import { BBox, DiagramEdge, DiagramNode, Fqn, XYPosition } from '@likec4/core';
+import { BBox, DiagramEdge, DiagramNode, Fqn, XYPoint } from '@likec4/core';
 import { Edge, EdgeMouseHandler, InternalNode, Node, NodeMouseHandler, OnMoveEnd, OnMoveStart, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { SetReadonly, SetRequired } from 'type-fest';
+import { Simplify } from 'type-fest';
 
-export type ElementNodeData = {
+export type ElementXYFlowNode = Node<{
     fqn: Fqn;
     element: DiagramNode;
-};
-type TypedXYFlowNode<D extends Record<string, unknown>, T extends string> = SetReadonly<SetRequired<Node<D, T>, 'type'>, 'id' | 'type'>;
-type TypedXYFlowEdge<D extends Record<string, unknown>, T extends string> = SetReadonly<SetRequired<Edge<D, T>, 'type' | 'data'>, 'id' | 'type'>;
-export type ElementXYFlowNode = TypedXYFlowNode<ElementNodeData, 'element'>;
-export type CompoundNodeData = {
+}, 'element'>;
+export type CompoundXYFlowNode = Node<{
     fqn: Fqn;
     element: DiagramNode;
-};
-export type CompoundXYFlowNode = TypedXYFlowNode<CompoundNodeData, 'compound'>;
+}, 'compound'>;
 export type XYFlowNode = ElementXYFlowNode | CompoundXYFlowNode;
 export type InternalXYFlowNode = InternalNode<XYFlowNode>;
 export declare namespace XYFlowNode {
-    type Data = ElementNodeData | CompoundNodeData;
     function isCompound(node: unknown): node is CompoundXYFlowNode;
     function isElement(node: Node): node is ElementXYFlowNode;
     const is: (node: Node) => node is XYFlowNode;
 }
 export type RelationshipData = {
     edge: DiagramEdge;
-    controlPoints: XYPosition[] | null;
-    type: 'bezier' | 'poly';
+    controlPoints: XYPoint[] | null;
     stepNum: number | null;
     label: null | {
         bbox: BBox;
         text: string;
     };
 };
-export type RelationshipEdge = TypedXYFlowEdge<RelationshipData, 'relationship'>;
+export type RelationshipEdge = Simplify<Edge<RelationshipData, 'relationship'> & {
+    type: 'relationship';
+    data: RelationshipData;
+}>;
 export type XYFlowEdge = RelationshipEdge;
 export declare namespace XYFlowEdge {
     type Data = RelationshipData;
@@ -41,10 +38,6 @@ export declare namespace XYFlowEdge {
 }
 export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>;
 export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>;
-export type XYFlowData = {
-    nodes: XYFlowNode[];
-    edges: XYFlowEdge[];
-};
 export type XYFlowEventHandlers = {
     onPanelClick: (event: ReactMouseEvent) => void;
     onNodeContextMenu: NodeMouseHandler<XYFlowNode>;
@@ -55,4 +48,3 @@ export type XYFlowEventHandlers = {
     onMoveStart: OnMoveStart;
     onMoveEnd: OnMoveEnd;
 };
-export {};

package/dist/xyflow/utils.d.ts

@@ -5,3 +5,4 @@ export declare function toDomPrecision(v: number | null): number;
 export declare function distance(a: XYPosition, b: XYPosition): number;
 export declare function bezierControlPoints(diagramEdge: DiagramEdge): XYPosition[];
 export declare function isSamePoint(a: XYPosition | Point, b: XYPosition | Point): boolean;
+export declare function distanceBetweenPoints(a: XYPosition, b: XYPosition): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,28 +48,33 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.6.0",
+    "@lume/kiwi": "^0.4.3",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "^3.11.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
+    "@xyflow/react": "12.0.3",
+    "@xyflow/system": "0.0.37",
+    "bezier-js": "^6.1.4",
+    "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.3.8",
+    "framer-motion": "^11.3.19",
     "remeda": "^2.3.0",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
+    "@likec4/core": "1.7.0",
     "@mantine/core": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.6.0",
-    "@lume/kiwi": "^0.4.3",
+    "@likec4/core": "1.7.0",
+    "@likec4/tsconfig": "1.7.0",
     "@mantine/core": "7.11.2",
     "@mantine/hooks": "7.11.2",
     "@mantine/vanilla-extract": "7.11.2",
@@ -80,17 +85,12 @@
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "12.0.3",
-    "@xyflow/system": "0.0.37",
-    "bezier-js": "^6.1.4",
-    "clsx": "^2.1.1",
     "execa": "^9.3.0",
     "khroma": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tilg": "^0.1.1",
     "type-fest": "^4.21.0",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "vite": "5.3.4",
     "vite-plugin-dts": "^3.9.1"
   }

package/src/LikeC4Diagram.props.ts

@@ -3,16 +3,15 @@ import type {
   DiagramEdge,
   DiagramNode,
   DiagramView,
-  EdgeId,
   ElementShape,
   Fqn,
-  IconUrl,
   NonEmptyArray,
   ThemeColor,
-  ViewID
+  ViewID,
+  ViewManualLayout
 } from '@likec4/core'
-import type { XYPosition } from '@xyflow/system'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
+import type { DiagramEditorCommand } from './types'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackground } from './xyflow/XYFlowBackground'
 
@@ -54,6 +53,10 @@ export type OnEdgeClick = (
   }
 ) => void
 
+export type OnEditorCommand = (
+  cmd: DiagramEditorCommand
+) => void
+
 /**
  * On pane/canvas click (not on any node or edge)
  */
@@ -73,15 +76,7 @@ export namespace Changes {
 
   export interface SaveManualLayout {
     op: 'save-manual-layout'
-    nodes: Record<Fqn, {
-      x: number
-      y: number
-      width: number
-      height: number
-    }>
-    edges: Record<EdgeId, {
-      controlPoints: XYPosition[]
-    }>
+    layout: ViewManualLayout
   }
 }
 
@@ -138,6 +133,7 @@ export interface LikeC4DiagramProperties {
    * @default 0
    */
   fitViewPadding?: number | undefined
+
   nodesSelectable?: boolean | undefined
 
   /**
@@ -178,6 +174,12 @@ export interface LikeC4DiagramProperties {
    */
   showNavigationButtons?: undefined | boolean
 
+  /**
+   * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+   * @default true
+   */
+  enableFocusMode?: boolean | undefined
+
   /**
    * If Walkthrough for dynamic views should be enabled
    * @default false
@@ -207,4 +209,6 @@ export interface LikeC4DiagramEventHandlers {
   onEdgeContextMenu?: OnEdgeClick | null | undefined
   onCanvasClick?: OnCanvasClick | null | undefined
   onCanvasDblClick?: OnCanvasClick | null | undefined
+
+  onEditorCommand?: OnEditorCommand | null | undefined
 }