@likec4/diagram 1.1.0 → 1.1.1

package/dist/state/DiagramContext.d.ts

@@ -41,8 +41,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
     setHoveredEdge: (edgeId: string | null) => void;
     setLastClickedNode: (nodeId: string | null) => void;
     setLastClickedEdge: (edgeId: string | null) => void;
+    resetLastClicked: () => void;
     getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-    triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+    triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
     triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
     fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
 }>, "subscribe"> & {
@@ -87,8 +88,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-            triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+            triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
         }, previousSelectedState: {
@@ -131,8 +133,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-            triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+            triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
         }) => void): () => void;
@@ -176,8 +179,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-            triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+            triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
         }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
@@ -228,8 +232,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
     } | Partial<{
@@ -272,8 +277,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
     }> | ((state: {
@@ -316,8 +322,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
     }) => {
@@ -360,8 +367,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
     } | Partial<{
@@ -404,8 +412,9 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
-        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
     }>), replace?: boolean | undefined, action?: A | undefined): void;

package/dist/state/diagramStore.d.ts

@@ -39,6 +39,7 @@ interface DiagramStoreActions {
     setHoveredEdge: (edgeId: string | null) => void;
     setLastClickedNode: (nodeId: string | null) => void;
     setLastClickedEdge: (edgeId: string | null) => void;
+    resetLastClicked: () => void;
     getElement(id: Fqn): DiagramNode | null;
     triggerOnChange: (changes: NonEmptyArray<Change>) => void;
     triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
@@ -86,8 +87,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
     setHoveredEdge: (edgeId: string | null) => void;
     setLastClickedNode: (nodeId: string | null) => void;
     setLastClickedEdge: (edgeId: string | null) => void;
+    resetLastClicked: () => void;
     getElement: (id: Fqn) => DiagramNode | null;
-    triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+    triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
     triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
     fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
 }>, "subscribe"> & {
@@ -132,8 +134,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: Fqn) => DiagramNode | null;
-            triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+            triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
         }, previousSelectedState: {
@@ -176,8 +179,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: Fqn) => DiagramNode | null;
-            triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+            triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
         }) => void): () => void;
@@ -221,8 +225,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: Fqn) => DiagramNode | null;
-            triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+            triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
         }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
@@ -273,8 +278,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+        triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
     } | Partial<{
@@ -317,8 +323,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+        triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
     }> | ((state: {
@@ -361,8 +368,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+        triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
     }) => {
@@ -405,8 +413,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+        triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
     } | Partial<{
@@ -449,8 +458,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: Fqn) => DiagramNode | null;
-        triggerOnChange: (changes: NonEmptyArray<Change>) => void;
+        triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
     }>), replace?: boolean | undefined, action?: A | undefined): void;

package/dist/state/useDiagramStore.d.ts

@@ -42,8 +42,9 @@ declare function useDiagramStoreApi(): {
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
     };
@@ -89,8 +90,9 @@ declare function useDiagramStoreApi(): {
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
     } | Partial<{
@@ -133,8 +135,9 @@ declare function useDiagramStoreApi(): {
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
     }> | ((state: {
@@ -177,8 +180,9 @@ declare function useDiagramStoreApi(): {
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
     }) => {
@@ -221,8 +225,9 @@ declare function useDiagramStoreApi(): {
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
     } | Partial<{
@@ -265,8 +270,9 @@ declare function useDiagramStoreApi(): {
         setHoveredEdge: (edgeId: string | null) => void;
         setLastClickedNode: (nodeId: string | null) => void;
         setLastClickedEdge: (edgeId: string | null) => void;
+        resetLastClicked: () => void;
         getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+        triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
         triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
         fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
     }>), replace?: boolean | undefined, action?: A | undefined) => void;
@@ -311,8 +317,9 @@ declare function useDiagramStoreApi(): {
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-            triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+            triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
         }, previousSelectedState: {
@@ -355,8 +362,9 @@ declare function useDiagramStoreApi(): {
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-            triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+            triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
         }) => void): () => void;
@@ -400,8 +408,9 @@ declare function useDiagramStoreApi(): {
             setHoveredEdge: (edgeId: string | null) => void;
             setLastClickedNode: (nodeId: string | null) => void;
             setLastClickedEdge: (edgeId: string | null) => void;
+            resetLastClicked: () => void;
             getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
-            triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
+            triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
             triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
             fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
         }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {

package/dist/style.css

@@ -597,6 +597,10 @@ svg.react-flow__connectionline {
 .react-flow__edge-text {
   fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
 }
+.likec4-diagram-root {
+  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
+  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
+}
 .likec4-diagram-root {
   --likec4-font-family: var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"');
   --likec4-background-color: var(--mantine-color-body);
@@ -1262,7 +1266,7 @@ svg.react-flow__connectionline {
   --xy-background-pattern-color: var(--likec4-background-pattern-color);
 }
 .react-flow._2h8g8h1 .react-flow__viewport {
-  will-change: transform;
+  backface-visibility: hidden;
 }
 .react-flow._2h8g8h1._2h8g8h3 {
   --likec4-background-color: transparent !important;
@@ -1271,28 +1275,66 @@ svg.react-flow__connectionline {
 }
 :where(._2h8g8h4, ._2h8g8h3) .react-flow__attribution {
   display: none;
+}.hbkbtj0 {
+  bottom: 0;
+  left: 0;
+  padding: 8px;
+  margin: 0;
+}
+.hbkbtj1 {
+  cursor: default;
+  min-width: 200px;
+  max-width: calc(100vw - 16px);
+  background-color: color-mix(in srgb, var(--mantine-color-body), transparent 20%);
+  backdrop-filter: blur(8px);
+}
+.hbkbtj3 {
+  white-space-collapse: preserve-breaks;
+  color: var(--mantine-color-gray-7);
+}
+:where([data-mantine-color-scheme="dark"]) .hbkbtj3 {
+  color: var(--mantine-color-gray-5);
+}
+@media (min-width: 62em) {
+  .hbkbtj1 {
+    max-width: 45vw;
+  }
 }._1lmzt1h0 {
   top: var(--likec4-options-panel-top, 1rem);
   right: var(--likec4-options-panel-right, 1rem);
   margin: 0;
   box-shadow: var(--mantine-shadow-xl);
-}.bexn7q0 {
+}@keyframes bexn7q5 {
+  from {
+    stroke-dashoffset: 36;
+  }
+  to {
+    stroke-dashoffset: 1;
+  }
+}
+.bexn7q1 {
+  --bexn7q0: black;
   --xy-edge-stroke: var(--likec4-relation-lineColor);
-  --xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), white 30%);
+  --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-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 35%);
-  --xy-edge-stroke-width: 2.5px;
+  --xy-edge-stroke-width: 2.2px;
 }
-[data-mantine-color-scheme="dark"] .bexn7q0 {
+:where([data-mantine-color-scheme="dark"]) .bexn7q1 {
+  --bexn7q0: white;
   --xy-edge-label-color: var(--likec4-relation-labelColor);
   --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 55%);
 }
-.bexn7q0[data-edge-hovered='true'] {
-  --xy-edge-stroke: color-mix(in srgb, var(--likec4-relation-lineColor), white 30%);
+:where(.react-flow__edge.selected) .bexn7q1 {
+  --xy-edge-stroke: var(--xy-edge-stroke-selected);
+  --xy-edge-stroke-width: 3px;
+}
+.bexn7q1[data-edge-hovered='true'] {
+  --xy-edge-stroke: var(--xy-edge-stroke-selected);
   --xy-edge-stroke-width: 3px;
 }
-.react-flow__edge.selected .bexn7q0 {
-  --xy-edge-stroke-width: 2.5;
+:where(.react-flow__edge.selected) .bexn7q1[data-edge-hovered='true'] {
+  --xy-edge-stroke-width: 3.6px;
 }
 .react-flow__edges > svg {
   mix-blend-mode: screen;
@@ -1300,24 +1342,47 @@ svg.react-flow__connectionline {
 :where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg {
   mix-blend-mode: lighten;
 }
-.bexn7q1 {
-  stroke-width: calc(var(--xy-edge-stroke-width) + 8);
-  stroke-opacity: 0.1;
-}
 .bexn7q2 {
+  stroke-width: var(--xy-edge-stroke-width);
+  stroke-opacity: 0.05;
+  transition-property: stroke-width, stroke-opacity;
+  transition-duration: 155ms;
+  transition-timing-function: ease-out;
+}
+:where(.react-flow__edge.selected, [data-edge-hovered='true']) .bexn7q2 {
+  stroke-width: calc(var(--xy-edge-stroke-width) + 8px);
+  stroke-opacity: 0.11;
+}
+.bexn7q3 {
   fill: var(--xy-edge-stroke);
   stroke: var(--xy-edge-stroke);
 }
-.react-flow__edge.selected .bexn7q2 {
+.bexn7q4 {
+  fill: var(--xy-edge-stroke);
+  stroke: var(--xy-edge-stroke);
+}
+:where(.react-flow__edge.selected) .bexn7q3 {
   --xy-edge-stroke: var(--xy-edge-stroke-selected);
 }
-.bexn7q0[data-edge-hovered='true'] .bexn7q3 {
+.bexn7q6 {
+  animation-duration: 800ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+:where([data-edge-hovered='true']) .bexn7q6 {
+  animation-name: bexn7q5;
+  animation-delay: 500ms;
+  transition: all 130ms ease-out;
+}
+:where(.react-flow__edge.selected) .bexn7q6 {
+  animation-name: bexn7q5;
+  animation-delay: 0ms;
   transition: all 130ms ease-out;
 }
-.bexn7q7 {
-  --bexn7q6: translate(var(--bexn7q4), var(--bexn7q5));
-  --bexn7q4: 50%;
-  --bexn7q5: 50%;
+.bexn7qa {
+  --bexn7q9: translate(var(--bexn7q7), var(--bexn7q8));
+  --bexn7q7: 50%;
+  --bexn7q8: 50%;
   top: 0;
   left: 0;
   font-family: var(--likec4-font-family);
@@ -1331,14 +1396,14 @@ svg.react-flow__connectionline {
   width: max-content;
   background-color: var(--xy-edge-label-background-color);
   border-radius: 3px;
-  transform: var(--bexn7q6);
-  will-change: transform;
+  transform: var(--bexn7q9);
+  backface-visibility: hidden;
 }
-.bexn7q7[data-edge-hovered="true"] {
+.bexn7qa[data-edge-hovered="true"] {
   transition: all 140ms ease-out;
-  transform: var(--bexn7q6) scale(1.1);
+  transform: var(--bexn7q9) scale(1.1);
 }
-.bexn7q8 {
+.bexn7qb {
   color: var(--xy-edge-label-color);
   font-size: calc(0.78125rem * var(--mantine-scale));
   line-height: 1.12;
@@ -1362,7 +1427,7 @@ svg.react-flow__connectionline {
   width: 100%;
   height: 100%;
   position: relative;
-  border-radius: calc(0.375rem * var(--mantine-scale));
+  border-radius: 6px;
   box-shadow: 0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4);
   padding: 8px;
   background: var(--likec4-element-fill);
@@ -1380,7 +1445,6 @@ svg.react-flow__connectionline {
   --lbtzdo3: calc(var(--lbtzdo1, 80%) - var(--lbtzdo4));
   --lbtzdo4: 0%;
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
-  border-radius: 8px;
   border-style: dashed;
   border-width: 3px;
   padding: 6px;
@@ -1388,14 +1452,13 @@ svg.react-flow__connectionline {
   background: color-mix(in srgb , var(--likec4-element-fill),  transparent var(--lbtzdo3));
   background-clip: padding-box;
 }
-:where(.lbtzdo0[data-hovered]) .lbtzdo5 {
-  --lbtzdo4: 15%;
-  transition-delay: 175ms;
-}
 :where(.react-flow__node.selected) .lbtzdo5 {
-  --lbtzdo4: 25%;
+  --lbtzdo4: 5%;
   transition-delay: 50ms;
-  border-color: transparent;
+}
+:where([data-hovered]) .lbtzdo5 {
+  --lbtzdo4: 15%;
+  transition-delay: 175ms;
 }
 .lbtzdo6 {
   font-family: var(--likec4-compound-font-family);
@@ -1415,12 +1478,12 @@ svg.react-flow__connectionline {
 :where([data-likec4-navigable='true']) .lbtzdo6 {
   padding-left: 26px;
 }
-:where([data-mantine-color-scheme='light']) .lbtzdo6 {
-  opacity: 1;
-}
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
   --_compound-title-color: var(--likec4-element-stroke);
 }
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdo6 {
+  opacity: 1;
+}
 .lbtzdoa {
   --lbtzdo8: var(--likec4-element-loContrast);
   --lbtzdo9: 6;
@@ -1517,6 +1580,7 @@ svg.react-flow__connectionline {
   height: 100%;
   padding: 0;
   margin: 0;
+  backface-visibility: hidden;
 }
 ._1b6tkn4 {
   stroke: var(--likec4-element-loContrast);

package/dist/ui/DiagramTitlePanel.css.d.ts

@@ -0,0 +1,4 @@
+export declare const container: string;
+export declare const paper: string;
+export declare const title: string;
+export declare const description: string;

package/dist/ui/DiagramTitlePanel.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DiagramTitlePanel(): JSX.Element;

package/dist/ui/OptionsPanel.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-declare const OptionsPanelMemo: import('react').NamedExoticComponent<object>;
-export default OptionsPanelMemo;
+export default function OptionsPanel(): JSX.Element;

package/dist/xyflow/SelectEdgesOnNodeFocus.d.ts

@@ -0,0 +1 @@
+export declare function SelectEdgesOnNodeFocus(): null;