@likec4/diagram 1.3.0 → 1.4.0

package/dist/state/useNavigationHistory.d.ts

@@ -0,0 +1,5 @@
+export declare function useNavigationHistory(): {
+    hasBack: boolean;
+    hasForward: boolean;
+    ops: import('@mantine/hooks').UseStateHistoryHandlers<import('@likec4/core').ViewID>;
+};

package/dist/style.css

@@ -1274,6 +1274,11 @@ svg.react-flow__connectionline {
 }
 :where(._2h8g8h4, ._2h8g8h3) .react-flow__attribution {
   display: none;
+}
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+  ._2h8g8h1 {
+    --likec4-safari-animation-hook: ;
+  }
 }@keyframes bexn7q6 {
   from {
     stroke-dashoffset: 36;
@@ -1313,7 +1318,7 @@ svg.react-flow__connectionline {
   opacity: 0.8;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
-  filter: grayscale(0.85) blur(1px);
+  filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
   will-change: opacity, filter;
 }
 .bexn7q3 {
@@ -1356,20 +1361,25 @@ svg.react-flow__connectionline {
   animation-duration: 800ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
+  animation-name: bexn7q6;
+  animation-play-state: paused;
 }
 :where([data-edge-hovered='true']) .bexn7q7 {
-  animation-name: bexn7q6;
+  animation-play-state: running;
   animation-delay: 350ms;
-  transition: stroke,stroke-width 130ms ease-out;
+  transition: stroke 130ms ease-out,stroke-width 130ms ease-out;
 }
 :where(.react-flow__edge.selected, [data-edge-active='true']) .bexn7q7 {
-  animation-name: bexn7q6;
+  animation-play-state: running;
   animation-delay: 0ms;
-  transition: stroke,stroke-width 130ms ease-out;
+  transition: stroke 130ms ease-out,stroke-width 130ms ease-out;
 }
 :where([data-edge-dir='back']) .bexn7q7 {
   animation-direction: reverse;
 }
+.bexn7q2 .bexn7q7 {
+  animation-play-state: paused;
+}
 .bexn7qb {
   --bexn7qa: translate(var(--bexn7q8, -50%), var(--bexn7q9, -50%));
   top: 0;
@@ -1390,10 +1400,10 @@ svg.react-flow__connectionline {
   transform: var(--bexn7qa) scale(1.1);
 }
 .bexn7qb:is(.bexn7q2) {
-  opacity: 0.8;
+  opacity: 0.6;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
-  filter: grayscale(0.85) blur(2px);
+  filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
   will-change: opacity, filter;
 }
 .bexn7qc {
@@ -1440,7 +1450,7 @@ svg.react-flow__connectionline {
   opacity: 0.25;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
-  filter: grayscale(0.85) blur(1px);
+  filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
   will-change: opacity, filter;
 }
 .lbtzdo4 {
@@ -1487,11 +1497,8 @@ svg.react-flow__connectionline {
   transition-delay: 200ms;
   opacity: calc(var(--lbtzdo2, 1) + var(--lbtzdo5));
 }
-:where(.react-flow__node.selected) .lbtzdo6 {
-  --lbtzdo5: .05;
-}
 :where([data-hovered]) .lbtzdo6 {
-  --lbtzdo5: .1;
+  --lbtzdo5: .07;
 }
 .lbtzdo7 {
   font-family: var(--likec4-compound-font-family);
@@ -1573,7 +1580,7 @@ svg.react-flow__connectionline {
 }
 .lbtzdoe:hover {
   box-shadow: var(--mantine-shadow-lg);
-  transform: scale(1.466);
+  transform: scale(1.42);
   opacity: 1;
   transition-delay: 0;
 }
@@ -1598,7 +1605,7 @@ svg.react-flow__connectionline {
   width: 70%;
   height: 70%;
   stroke-width: 1.5;
-}@keyframes _1b6tkn4 {
+}@keyframes _1b6tkn5 {
   from {
     opacity: 0.6;
   }
@@ -1615,48 +1622,58 @@ svg.react-flow__connectionline {
   display: flex;
   align-items: stretch;
 }
-.react-flow__node-element:has(._1b6tkn3) {
+:where(.react-flow__node.selected) ._1b6tkn2 {
+  will-change: transform;
+}
+._1b6tkn2[data-hovered="true"] {
+  will-change: transform;
+}
+._1b6tkn3 {
+  will-change: transform;
+}
+.react-flow__node-element:has(._1b6tkn4) {
   opacity: 0.25;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
-  filter: grayscale(0.85) blur(2px);
+  filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(2px));
   will-change: opacity, filter;
 }
-._1b6tkn5 {
+._1b6tkn6 {
   stroke: var(--likec4-element-loContrast);
   transform-origin: center center;
   stroke-width: 6;
   animation-duration: 800ms;
-  animation-name: _1b6tkn4;
   animation-iteration-count: infinite;
   animation-direction: alternate;
+  opacity: 0.6;
   visibility: hidden;
 }
-:where(.react-flow__node.selected) ._1b6tkn5 {
+:where(.react-flow__node.selected) ._1b6tkn6 {
   visibility: visible;
+  animation-name: var(--likec4-safari-animation-hook, _1b6tkn5);
 }
-:where(.react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkn5 {
-  animation-name: none;
+:where(.react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkn6 {
   stroke-width: 10;
   stroke: var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));
   visibility: visible;
 }
-:where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn5 {
+:where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn6 {
   stroke-width: 10;
 }
-._1b6tkn3 ._1b6tkn5 {
+._1b6tkn4 ._1b6tkn6 {
   visibility: hidden;
+  display: none;
 }
-._1b6tkn6 {
+._1b6tkn7 {
   fill: var(--likec4-element-fill);
 }
-._1b6tkn7 {
+._1b6tkn8 {
   fill: var(--likec4-element-stroke);
 }
-._1b6tkn8 {
+._1b6tkn9 {
   fill: var(--_1b6tkn0);
 }
-._1b6tkn9 {
+._1b6tkna {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
@@ -1668,7 +1685,7 @@ svg.react-flow__connectionline {
   text-wrap: balance;
   color: var(--likec4-element-hiContrast);
 }
-._1b6tkna {
+._1b6tknb {
   flex: 0 1 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
@@ -1683,7 +1700,7 @@ svg.react-flow__connectionline {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._1b6tknb {
+._1b6tknc {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
@@ -1696,10 +1713,10 @@ svg.react-flow__connectionline {
   opacity: 0.92;
   color: var(--likec4-element-loContrast);
 }
-._1b6tkn2:hover ._1b6tknb {
+._1b6tkn2:hover ._1b6tknc {
   opacity: 1;
 }
-._1b6tknc {
+._1b6tknd {
   --_1b6tkn1: calc(1.5rem * var(--mantine-scale));
   flex: 1;
   padding: var(--_1b6tkn1);
@@ -1710,24 +1727,24 @@ svg.react-flow__connectionline {
   overflow: hidden;
   gap: calc(0.5rem * var(--mantine-scale));
 }
-._1b6tknc:has(._1b6tkna):has(._1b6tknb) {
+._1b6tknd:has(._1b6tknb):has(._1b6tknc) {
   gap: calc(0.375rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknc {
+:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknd {
   padding-left: calc(2.5rem * var(--mantine-scale));
   padding-right: calc(1.25rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknc {
+:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknd {
   padding-top: calc(2.125rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="browser"]) ._1b6tknc {
+:where([data-likec4-shape="browser"]) ._1b6tknd {
   padding-top: calc(2rem * var(--mantine-scale));
   padding-bottom: calc(1.75rem * var(--mantine-scale));
 }
-._1b6tkne {
-  --_1b6tknd: 30px;
-  flex: 0 1 var(--_1b6tknd);
-  max-height: var(--_1b6tknd);
+._1b6tknf {
+  --_1b6tkne: 30px;
+  flex: 0 1 var(--_1b6tkne);
+  max-height: var(--_1b6tkne);
   margin-top: -8px;
   position: relative;
   user-select: none;
@@ -1735,17 +1752,17 @@ svg.react-flow__connectionline {
   overflow: visible;
   mix-blend-mode: hard-light;
 }
-._1b6tkne img {
+._1b6tknf img {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: auto;
   object-fit: contain;
-  max-height: calc(var(--_1b6tknd) + 16px);
+  max-height: calc(var(--_1b6tkne) + 16px);
 }
-._1b6tknh {
-  --_1b6tknf: 
+._1b6tkni {
+  --_1b6tkng: 
   drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
   drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-element-stroke) 40%, transparent))
   drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
@@ -1757,15 +1774,15 @@ svg.react-flow__connectionline {
   fill: var(--likec4-element-fill);
   stroke: var(--likec4-element-stroke);
   overflow: visible;
-  filter: var(--_1b6tkng, var(--_1b6tknf));
+  filter: var(--_1b6tknh, var(--_1b6tkng));
   transition: filter 300ms ease-out;
   transition-delay: 0ms;
   z-index: -1;
 }
-:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tknh {
+:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkni {
   filter: none;
 }
-._1b6tkni {
+._1b6tknj {
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));
@@ -1783,28 +1800,28 @@ svg.react-flow__connectionline {
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-._1b6tkni:hover {
+._1b6tknj:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: translate(-50%, 0) scale(1.35);
   opacity: 1;
   transition-delay: 0;
 }
-._1b6tkni:active {
+._1b6tknj:active {
   transform: translate(-50%, 0) scale(1.02);
   opacity: 1;
   transition-delay: 0;
 }
-:where([data-likec4-shape='browser']) ._1b6tkni {
+:where([data-likec4-shape='browser']) ._1b6tknj {
   bottom: 3px;
 }
-:where(.react-flow__node:not(.dragging) ._1b6tkn2:hover) ._1b6tkni:not(:hover) {
+:where(.react-flow__node:not(.dragging) ._1b6tkn2:hover) ._1b6tknj:not(:hover) {
   --ai-bg: var(--ai-bg-hover);
   box-shadow: var(--mantine-shadow-lg);
   transform: translate(-50%, 0) scale(1.185);
   opacity: 1;
   transition-delay: 250ms;
 }
-._1b6tkni svg.icon {
+._1b6tknj svg.icon {
   width: 65%;
   height: 65%;
   stroke-width: 1.5;
@@ -1859,6 +1876,18 @@ svg.react-flow__connectionline {
 }
 ._4ysv0o2 {
   text-align: left;
+}._19mimxc0 {
+  top: var(--likec4-navigation-panel-top, 1rem);
+  left: var(--likec4-navigation-panel-left, 1rem);
+  margin: 0;
+}
+._19mimxc0 .mantine-ActionIcon-root {
+  --ai-size: var(--ai-size-md);
+}
+@media (min-width: 62em) {
+  ._19mimxc0 .mantine-ActionIcon-root {
+    --ai-size: var(--ai-size-lg);
+  }
 }.hbkbtj0 {
   bottom: 0;
   left: 0;
@@ -1867,11 +1896,14 @@ svg.react-flow__connectionline {
 }
 .hbkbtj1 {
   cursor: default;
-  min-width: 100px;
+  min-width: 150px;
   max-width: calc(100vw - 16px);
   background-color: color-mix(in srgb, var(--mantine-color-body), transparent 20%);
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: var(--likec4-safari-animation-hook, blur(8px));
+  backdrop-filter: var(--likec4-safari-animation-hook, blur(8px));
+}
+:where([data-mantine-color-scheme='dark']) .hbkbtj1 {
+  background-color: color-mix(in srgb, var(--mantine-color-dark-6), transparent 20%);
 }
 .hbkbtj3 {
   white-space-collapse: preserve-breaks;

package/dist/theme.css.d.ts

@@ -1,4 +1,5 @@
 export declare const vars: {
+    safariAnimationHook: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     default: {
         font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
@@ -31,6 +32,10 @@ export declare const vars: {
         top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         right: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    navigationPanel: {
+        top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        left: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
 };
 export declare const xyvars: {
     background: {

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

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

package/dist/ui/BackwardForwardPanel.d.ts

@@ -0,0 +1 @@
+export declare function BackwardForwardPanel(): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/ui/OptionsPanel.d.ts

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

package/dist/xyflow/XYFlowEvents.d.ts

@@ -28,7 +28,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;
@@ -59,7 +59,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;
@@ -91,7 +91,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;
@@ -120,7 +120,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;

package/dist/xyflow/XYFlowInner.d.ts

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

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

@@ -23,7 +23,7 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     labelBgBorderRadius?: number;
     style?: import('react').CSSProperties;
     className?: string;
-    updatable?: import('@xyflow/react').EdgeUpdatable;
+    reconnectable?: boolean | import('@xyflow/react').HandleType;
     focusable?: boolean;
     data: import('../types').RelationshipData;
     readonly id: string;

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

@@ -23,7 +23,7 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     labelBgBorderRadius?: number;
     style?: import('react').CSSProperties;
     className?: string;
-    updatable?: import('@xyflow/react').EdgeUpdatable;
+    reconnectable?: boolean | import('@xyflow/react').HandleType;
     focusable?: boolean;
     data: import('../types').RelationshipData;
     readonly id: string;
@@ -58,7 +58,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -87,7 +87,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -115,7 +115,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -143,7 +143,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -171,7 +171,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -199,7 +199,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -228,7 +228,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -256,7 +256,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;

package/dist/xyflow/nodes/element/element.css.d.ts

@@ -1,5 +1,6 @@
 export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const container: string;
+export declare const containerAnimated: string;
 export declare const dimmed: string;
 export declare const indicator: string;
 export declare const fillElementFill: string;

package/dist/xyflow/types.d.ts

@@ -62,7 +62,7 @@ export declare namespace XYFlowEdge {
         labelBgBorderRadius?: number;
         style?: import("react").CSSProperties;
         className?: string;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
+        reconnectable?: boolean | import("@xyflow/react").HandleType;
         focusable?: boolean;
         data: RelationshipData;
         readonly id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,18 +48,18 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.3.0",
+    "@likec4/core": "1.4.0",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.0.0",
+    "@tabler/icons-react": "^3.7.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.2.2",
+    "framer-motion": "^11.2.12",
     "remeda": "^1.61.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "peerDependencies": {
     "@mantine/core": "7.10.2",
@@ -68,7 +68,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.3.0",
+    "@likec4/tsconfig": "1.4.0",
     "@lume/kiwi": "^0.4.3",
     "@mantine/core": "7.10.2",
     "@mantine/hooks": "7.10.2",
@@ -78,10 +78,10 @@
     "@types/d3-shape": "^3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.7",
+    "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "12.0.0-next.21",
-    "@xyflow/system": "0.0.29",
+    "@xyflow/react": "12.0.0-next.24",
+    "@xyflow/system": "0.0.30",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "execa": "^9.1.0",
@@ -91,7 +91,7 @@
     "tilg": "^0.1.1",
     "type-fest": "^4.18.2",
     "typescript": "^5.4.5",
-    "vite": "5.3.1",
+    "vite": "5.3.2",
     "vite-plugin-dts": "^3.9.1"
   }
 }

package/src/LikeC4Diagram.css.ts

@@ -9,7 +9,17 @@ export const keepAspectRatioContainer = style({
   padding: 0
 })
 
-export const cssReactFlow = style({})
+export const cssReactFlow = style({
+  '@supports': {
+    // https://wojtek.im/journal/targeting-safari-with-css-media-query
+    '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
+      // TODO: this workaround disables animations in Safari (to improve performance)
+      vars: {
+        [vars.safariAnimationHook]: ''
+      }
+    }
+  }
+})
 
 globalStyle(`.react-flow${cssReactFlow}`, {
   vars: {

package/src/LikeC4Diagram.props.ts

@@ -21,9 +21,10 @@ export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigat
 export type OnNavigateTo = {
   (
     to: ViewID,
-    event: ReactMouseEvent,
-    element: DiagramNodeWithNavigate,
-    xynode: XYFlowNode
+    // These fields present if navigateTo triggered by a node click
+    event?: ReactMouseEvent,
+    element?: DiagramNodeWithNavigate,
+    xynode?: XYFlowNode
   ): void
 }
 export type OnNodeClick = (
@@ -159,6 +160,12 @@ export interface LikeC4DiagramProperties {
    */
   showDiagramTitle?: boolean | undefined
 
+  /**
+   * Show back/forward navigation buttons
+   * @default false
+   */
+  showNavigationButtons?: undefined | boolean
+
   /**
    * If Walkthrough for dynamic views should be enabled
    * @default false