@likec4/diagram 1.7.2 → 1.7.4

package/dist/state/diagramStore.d.ts

@@ -1,9 +1,9 @@
-import { DiagramNode, DiagramView, Fqn, NodeId, ViewID } from '@likec4/core';
+import { DiagramNode, DiagramView, Fqn, NodeId, ViewChange, ViewID } from '@likec4/core';
 import { OnEdgesChange, OnNodesChange } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { Exact, Simplify } from 'type-fest';
-import { Changes, ElementIconRenderer, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
-import { XYStoreApi } from '../xyflow/hooks';
+import { XYStoreApi } from '../hooks/useXYFlow';
+import { ElementIconRenderer, LikeC4DiagramEventHandlers, WhereOperator } from '../LikeC4Diagram.props';
 import { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types';
 
 type RequiredOrNull<T> = {
@@ -13,6 +13,7 @@ export type DiagramInitialState = {
     view: DiagramView;
     readonly: boolean;
     showElementLinks: boolean;
+    showNavigationButtons: boolean;
     fitViewEnabled: boolean;
     fitViewPadding: number;
     zoomable: boolean;
@@ -22,6 +23,7 @@ export type DiagramInitialState = {
     experimentalEdgeEditing: boolean;
     enableFocusMode: boolean;
     renderIcon: ElementIconRenderer | null;
+    whereFilter: WhereOperator<string, string> | null;
     enableDynamicViewWalkthrough: boolean;
     xyflow: XYFlowInstance;
     xystore: XYStoreApi;
@@ -60,7 +62,7 @@ export type DiagramState = Simplify<DiagramInitialState & {
     setLastClickedEdge: (edgeId: string | null) => void;
     resetLastClicked: () => void;
     getElement(id: Fqn): DiagramNode | null;
-    triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+    triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
     /**
      * @returns true if there was pending save layout
      */
@@ -82,6 +84,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
     view: DiagramView;
     readonly: boolean;
     showElementLinks: boolean;
+    showNavigationButtons: boolean;
     fitViewEnabled: boolean;
     fitViewPadding: number;
     zoomable: boolean;
@@ -91,6 +94,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
     experimentalEdgeEditing: boolean;
     enableFocusMode: boolean;
     renderIcon: ElementIconRenderer | null;
+    whereFilter: WhereOperator<string, string> | null;
     enableDynamicViewWalkthrough: boolean;
     xyflow: XYFlowInstance;
     xystore: XYStoreApi;
@@ -104,7 +108,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
     onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
     onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
     onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-    onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+    onBurgerMenuClick: (() => void) | null;
+    onOpenSourceView: (() => void) | null;
+    onOpenSourceElement: ((fqn: Fqn) => void) | null;
+    onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
     readonly storeDevId: string;
     xynodes: XYFlowNode[];
     xyedges: XYFlowEdge[];
@@ -137,7 +144,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
     setLastClickedEdge: (edgeId: string | null) => void;
     resetLastClicked: () => void;
     getElement: (id: Fqn) => DiagramNode | null;
-    triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+    triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
     cancelSaveManualLayout: () => boolean;
     scheduleSaveManualLayout: () => void;
     triggerSaveManualLayout: () => void;
@@ -157,6 +164,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
+            showNavigationButtons: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -166,6 +174,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             experimentalEdgeEditing: boolean;
             enableFocusMode: boolean;
             renderIcon: ElementIconRenderer | null;
+            whereFilter: WhereOperator<string, string> | null;
             enableDynamicViewWalkthrough: boolean;
             xyflow: XYFlowInstance;
             xystore: XYStoreApi;
@@ -179,7 +188,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
             onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
             onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-            onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+            onBurgerMenuClick: (() => void) | null;
+            onOpenSourceView: (() => void) | null;
+            onOpenSourceElement: ((fqn: Fqn) => void) | null;
+            onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
             readonly storeDevId: string;
             xynodes: XYFlowNode[];
             xyedges: {
@@ -240,7 +252,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             setLastClickedEdge: (edgeId: string | null) => void;
             resetLastClicked: () => void;
             getElement: (id: Fqn) => DiagramNode | null;
-            triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+            triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
             cancelSaveManualLayout: () => boolean;
             scheduleSaveManualLayout: () => void;
             triggerSaveManualLayout: () => void;
@@ -286,6 +298,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
+            showNavigationButtons: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -295,6 +308,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             experimentalEdgeEditing: boolean;
             enableFocusMode: boolean;
             renderIcon: ElementIconRenderer | null;
+            whereFilter: WhereOperator<string, string> | null;
             enableDynamicViewWalkthrough: boolean;
             xyflow: XYFlowInstance;
             xystore: XYStoreApi;
@@ -308,7 +322,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
             onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
             onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-            onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+            onBurgerMenuClick: (() => void) | null;
+            onOpenSourceView: (() => void) | null;
+            onOpenSourceElement: ((fqn: Fqn) => void) | null;
+            onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
             readonly storeDevId: string;
             xynodes: XYFlowNode[];
             xyedges: {
@@ -369,7 +386,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             setLastClickedEdge: (edgeId: string | null) => void;
             resetLastClicked: () => void;
             getElement: (id: Fqn) => DiagramNode | null;
-            triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+            triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
             cancelSaveManualLayout: () => boolean;
             scheduleSaveManualLayout: () => void;
             triggerSaveManualLayout: () => void;
@@ -416,6 +433,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
+            showNavigationButtons: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -425,6 +443,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             experimentalEdgeEditing: boolean;
             enableFocusMode: boolean;
             renderIcon: ElementIconRenderer | null;
+            whereFilter: WhereOperator<string, string> | null;
             enableDynamicViewWalkthrough: boolean;
             xyflow: XYFlowInstance;
             xystore: XYStoreApi;
@@ -438,7 +457,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
             onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
             onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-            onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+            onBurgerMenuClick: (() => void) | null;
+            onOpenSourceView: (() => void) | null;
+            onOpenSourceElement: ((fqn: Fqn) => void) | null;
+            onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
             readonly storeDevId: string;
             xynodes: XYFlowNode[];
             xyedges: {
@@ -499,7 +521,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             setLastClickedEdge: (edgeId: string | null) => void;
             resetLastClicked: () => void;
             getElement: (id: Fqn) => DiagramNode | null;
-            triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+            triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
             cancelSaveManualLayout: () => boolean;
             scheduleSaveManualLayout: () => void;
             triggerSaveManualLayout: () => void;
@@ -553,6 +575,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
+        showNavigationButtons: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -562,6 +585,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: XYFlowInstance;
         xystore: XYStoreApi;
@@ -575,7 +599,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
         onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
         onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-        onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSourceView: (() => void) | null;
+        onOpenSourceElement: ((fqn: Fqn) => void) | null;
+        onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
         readonly storeDevId: string;
         xynodes: XYFlowNode[];
         xyedges: {
@@ -636,7 +663,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         setLastClickedEdge: (edgeId: string | null) => void;
         resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => boolean;
         scheduleSaveManualLayout: () => void;
         triggerSaveManualLayout: () => void;
@@ -682,6 +709,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
+        showNavigationButtons: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -691,6 +719,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: XYFlowInstance;
         xystore: XYStoreApi;
@@ -704,7 +733,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
         onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
         onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-        onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSourceView: (() => void) | null;
+        onOpenSourceElement: ((fqn: Fqn) => void) | null;
+        onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
         readonly storeDevId: string;
         xynodes: XYFlowNode[];
         xyedges: {
@@ -765,7 +797,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         setLastClickedEdge: (edgeId: string | null) => void;
         resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => boolean;
         scheduleSaveManualLayout: () => void;
         triggerSaveManualLayout: () => void;
@@ -811,6 +843,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
+        showNavigationButtons: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -820,6 +853,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: XYFlowInstance;
         xystore: XYStoreApi;
@@ -833,7 +867,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
         onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
         onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-        onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSourceView: (() => void) | null;
+        onOpenSourceElement: ((fqn: Fqn) => void) | null;
+        onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
         readonly storeDevId: string;
         xynodes: XYFlowNode[];
         xyedges: {
@@ -894,7 +931,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         setLastClickedEdge: (edgeId: string | null) => void;
         resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => boolean;
         scheduleSaveManualLayout: () => void;
         triggerSaveManualLayout: () => void;
@@ -940,6 +977,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
+        showNavigationButtons: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -949,6 +987,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: XYFlowInstance;
         xystore: XYStoreApi;
@@ -962,7 +1001,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
         onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
         onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-        onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSourceView: (() => void) | null;
+        onOpenSourceElement: ((fqn: Fqn) => void) | null;
+        onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
         readonly storeDevId: string;
         xynodes: XYFlowNode[];
         xyedges: {
@@ -1023,7 +1065,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         setLastClickedEdge: (edgeId: string | null) => void;
         resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => boolean;
         scheduleSaveManualLayout: () => void;
         triggerSaveManualLayout: () => void;
@@ -1069,6 +1111,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
+        showNavigationButtons: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -1078,6 +1121,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: XYFlowInstance;
         xystore: XYStoreApi;
@@ -1091,7 +1135,10 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
         onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
         onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
-        onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSourceView: (() => void) | null;
+        onOpenSourceElement: ((fqn: Fqn) => void) | null;
+        onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
         readonly storeDevId: string;
         xynodes: XYFlowNode[];
         xyedges: {
@@ -1152,7 +1199,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         setLastClickedEdge: (edgeId: string | null) => void;
         resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => boolean;
         scheduleSaveManualLayout: () => void;
         triggerSaveManualLayout: () => void;
@@ -1196,4 +1243,6 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         }>;
     }>), replace?: boolean | undefined, action?: A | undefined): void;
 }>;
+export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;
+export type DiagramStoreApi = Readonly<Pick<DiagramZustandStore, 'getState' | 'setState' | 'subscribe'>>;
 export {};

package/dist/style.css

@@ -1291,7 +1291,7 @@ svg.react-flow__connectionline {
   --bexn7q0: black;
   --xy-edge-stroke: var(--likec4-relation-lineColor);
   --xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), var(--bexn7q0) 35%);
-  --xy-edge-label-color: color-mix(in srgb, var(--likec4-relation-labelColor), rgba(255 255 255 / 0.85) 20%);
+  --xy-edge-label-color: color-mix(in srgb, var(--likec4-relation-labelColor), rgba(255 255 255 / 0.85) 40%);
   --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 40%);
   --xy-edge-stroke-width: 3;
 }
@@ -1385,12 +1385,29 @@ svg.react-flow__connectionline {
 .bexn7q2 .bexn7q8 {
   animation-play-state: paused;
 }
-.bexn7qc {
-  --bexn7qb: translate(var(--bexn7q9, -50%), var(--bexn7qa, -50%));
+.bexn7q9 {
+  flex: 0 0 auto;
+  font-weight: 600;
+  font-size: calc(0.875rem * var(--mantine-scale));
+  line-height: 1;
+  padding: 5px 5px;
+  text-align: center;
+  min-width: 22px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  background-color: color-mix(in srgb, var(--likec4-relation-labelBg), var(--bexn7q0) 5%);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) .bexn7q9 {
+  background-color: color-mix(in srgb, var(--likec4-relation-labelBg), var(--bexn7q0) 15%);
+}
+.bexn7qd {
+  --bexn7qc: translate(var(--bexn7qa, -50%), var(--bexn7qb, -50%));
   top: 0;
   left: 0;
   padding: 2px 4px 4px 4px;
   font-family: var(--likec4-font-family);
+  display: flex;
   position: absolute;
   pointer-events: all;
   cursor: pointer;
@@ -1399,45 +1416,32 @@ svg.react-flow__connectionline {
   mix-blend-mode: plus-lighter;
   color: var(--xy-edge-label-color);
   background-color: var(--xy-edge-label-background-color);
-  border-radius: 3px;
-  transform: var(--bexn7qb);
+  border-radius: 2px;
+  transform: var(--bexn7qc);
 }
-.bexn7qc[data-edge-hovered="true"] {
+.bexn7qd[data-edge-hovered="true"] {
   transition: all 140ms ease-in-out;
-  transform: var(--bexn7qb) scale(1.12);
+  transform: var(--bexn7qc) scale(1.12);
 }
-.bexn7qc:is(.bexn7q2) {
+.bexn7qd:has(.bexn7q9) {
+  padding: 0;
+  gap: 2px;
+}
+.bexn7qd:is(.bexn7q2) {
   opacity: 0.3;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
   will-change: opacity, filter;
 }
-.bexn7qd {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  font-weight: 500;
-  font-size: calc(1rem * var(--mantine-scale));
-  line-height: 0.9;
-  padding: 4px 6px;
-  border-radius: 99999px;
-  text-align: center;
-  min-width: 22px;
-  background-color: var(--xy-edge-label-background-color);
-  transition: all 120ms ease-out;
-  transform: translateX(-100%);
-  font-variant-numeric: tabular-nums;
-}
-:where([data-edge-hovered="true"],[data-edge-active="true"]) .bexn7qd {
-  font-weight: 600;
-  background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 5%);
-}
 .bexn7qe {
   text-align: left;
   white-space-collapse: preserve-breaks;
   font-size: calc(0.875rem * var(--mantine-scale));
   line-height: 1.185;
+}
+.bexn7qd:has(.bexn7q9) .bexn7qe {
+  padding: 2px 5px 4px 2px;
 }@keyframes lbtzdoa {
   from {
     opacity: 0.6;
@@ -1962,13 +1966,6 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
 }
 ._4ysv0o2 {
   text-align: left;
-}._19mimxc0 {
-  top: var(--likec4-navigation-panel-top, 0.8rem);
-  left: var(--likec4-navigation-panel-left, 1rem);
-  margin: 0;
-}
-._19mimxc0 .mantine-ActionIcon-root {
-  --ai-size: var(--ai-size-lg);
 }.hbkbtj0 {
   bottom: 0;
   left: 0;
@@ -1995,13 +1992,13 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
 }
 @media (min-width: 48em) {
   .hbkbtj1 {
-    min-width: 300px;
+    min-width: 250px;
     max-width: 90vw;
   }
 }
 @media (min-width: 62em) {
   .hbkbtj1 {
-    min-width: 400px;
+    min-width: 350px;
     max-width: 70vw;
   }
 }._2jkb2y0 {
@@ -2042,4 +2039,28 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
   right: var(--likec4-options-panel-right, 1rem);
   margin: 0;
   box-shadow: var(--mantine-shadow-xl);
+}._1snasyb0 {
+  top: var(--likec4-navigation-panel-top, 1rem);
+  left: var(--likec4-navigation-panel-left, 1rem);
+  margin: 0;
+}
+.likec4-top-left-panel .action-icon {
+  --ai-size: var(--ai-size-lg);
+}
+.likec4-top-left-panel .action-icon .tabler-icon {
+  width: 70%;
+  height: 70%;
+}
+._1snasyb1 .tabler-icon {
+  width: 75%;
+  height: 75%;
+}
+._1snasyb2 {
+  background: var(--mantine-color-gray-2);
+  border-radius: var(--mantine-radius-sm);
+  border: 1px solid var(--mantine-color-gray-3);
+}
+:where([data-mantine-color-scheme="dark"]) ._1snasyb2 {
+  background: var(--mantine-color-dark-5);
+  border: 1px solid var(--mantine-color-dark-4);
 }

package/dist/ui/top-left/ChangeAutoLayoutButton.d.ts

@@ -0,0 +1,3 @@
+import { PopoverProps } from '@mantine/core';
+
+export declare const ChangeAutoLayoutButton: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/top-left/TopLeftPanel.d.ts

@@ -0,0 +1,4 @@
+export declare const TopLeftPanel: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ui/top-left/_shared.d.ts

@@ -0,0 +1,5 @@
+export declare const Tooltip: import('react').ForwardRefExoticComponent<import('@mantine/core').TooltipProps & import('react').RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;
+export declare const ActionIcon: <L = "button">(props: import('@mantine/core').PolymorphicComponentProps<L, import('@mantine/core').ActionIconProps>) => React.ReactElement;

package/dist/ui/top-left/styles.css.d.ts

@@ -0,0 +1,3 @@
+export declare const panel: string;
+export declare const autolayoutIcon: string;
+export declare const autolayoutIndicator: string;

package/dist/xyflow/XYFlowInner.d.ts

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

package/dist/xyflow/const.d.ts

@@ -4,3 +4,4 @@ export declare const ZIndexes: {
     readonly Element: 6;
 };
 export declare const MinZoom = 0.1;
+export declare const MaxZoom = 2;

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

@@ -5,8 +5,8 @@ export declare const markerContext: string;
 export declare const controlPoint: string;
 export declare const controlDragging: string;
 export declare const cssEdgePath: string;
+export declare const stepEdgeNumber: string;
 export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const edgeLabel: string;
-export declare const stepEdgeNumber: string;
 export declare const edgeLabelText: string;

package/dist/xyflow/{hooks/useLayoutConstraints.d.ts → useLayoutConstraints.d.ts}

@@ -1,5 +1,5 @@
 import { ReactFlowProps } from '@xyflow/react';
-import { XYFlowNode } from '../types';
+import { XYFlowNode } from './types';
 
 type LayoutConstraints = Required<Pick<ReactFlowProps<XYFlowNode>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>;
 /**

package/dist/xyflow/utils.d.ts

@@ -1,8 +1,18 @@
 import { DiagramEdge, Point } from '@likec4/core/types';
-import { XYPosition } from '@xyflow/react';
+import { Rect, XYPosition } from '@xyflow/react';
+import { InternalXYFlowNode } from './types';
 
 export declare function toDomPrecision(v: number | null): number;
 export declare function distance(a: XYPosition, b: XYPosition): number;
+export declare const nodeToRect: (nd: InternalXYFlowNode) => Rect;
+/**
+ * Checks if a rectangle is completely inside another rectangle.
+ *
+ * @param test - The rectangle to test.
+ * @param target - The target rectangle.
+ * @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
+ */
+export declare const isInside: (test: Rect, target: Rect) => boolean;
 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.7.2",
+  "version": "1.7.4",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -54,27 +54,27 @@
     "@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/react": "12.0.4",
     "@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.19",
+    "framer-motion": "^11.3.24",
     "remeda": "^2.3.0",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
-    "@likec4/core": "1.7.2",
+    "@likec4/core": "1.7.4",
     "@mantine/core": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/core": "1.7.2",
-    "@likec4/tsconfig": "1.7.2",
+    "@likec4/core": "1.7.4",
+    "@likec4/tsconfig": "1.7.4",
     "@mantine/core": "7.11.2",
     "@mantine/hooks": "7.11.2",
     "@mantine/vanilla-extract": "7.11.2",