@likec4/diagram 1.2.2 → 1.4.0

package/dist/xyflow/XYFlow.d.ts

@@ -2,10 +2,11 @@ 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({ className, children, defaultNodes, defaultEdges, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function XYFlow({ colorMode, className, children, defaultNodes, defaultEdges, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

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,7 +5,8 @@ type XYFlowInnerProps = PropsWithChildren<{
     background: NonNullable<LikeC4DiagramProperties['background']>;
     controls: boolean;
     showDiagramTitle: boolean;
+    showNavigationButtons: boolean;
     enableDynamicViewWalkthrough: boolean;
 }>;
-export declare function XYFlowInner({ children, background, controls, showDiagramTitle, enableDynamicViewWalkthrough }: XYFlowInnerProps): import("react/jsx-runtime").JSX.Element;
+export declare const XYFlowInner: import('react').NamedExoticComponent<XYFlowInnerProps>;
 export {};

package/dist/xyflow/const.d.ts

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

package/dist/xyflow/diagram-to-xyflow.d.ts

@@ -1,7 +1,7 @@
 import { DiagramView } from '@likec4/core';
 import { XYFlowData } from '../xyflow/types';
 
-export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'nodes' | 'edges' | '__'>, opts: {
+export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>, opts: {
     draggable: boolean;
     selectable: boolean;
 }): XYFlowData;

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

@@ -1,5 +1,4 @@
 import { EdgeProps } from '@xyflow/react';
-import { CSSProperties } from 'react';
 
 export declare const RelationshipEdge: import('react').NamedExoticComponent<EdgeProps<{
     source: string;
@@ -17,14 +16,14 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     ariaLabel?: string;
     interactionWidth?: number;
     label?: import('react').ReactNode;
-    labelStyle?: CSSProperties;
+    labelStyle?: import('react').CSSProperties;
     labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
+    labelBgStyle?: import('react').CSSProperties;
     labelBgPadding?: [number, number];
     labelBgBorderRadius?: number;
-    style?: CSSProperties;
+    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/edges/utils.d.ts

@@ -1,8 +1,10 @@
-import { Point } from '@likec4/core';
 import { Position, XYPosition } from '@xyflow/react';
 import { InternalXYFlowNode } from '../types';
 
-export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, [x1, y1]: Point): readonly [number, number];
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, { x: x1, y: y1 }: XYPosition): {
+    x: number;
+    y: number;
+};
 export declare function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XYPosition): readonly [number, number, Position];
 export declare function getEdgeParams(source: InternalXYFlowNode, target: InternalXYFlowNode): {
     sx: number;

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/compound/CompoundNode.css.d.ts

@@ -1,8 +1,10 @@
 export declare const container: string;
 export declare const dimmed: string;
-export declare const varTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const compoundBody: string;
 export declare const transparent: string;
 export declare const title: string;
+export declare const titleWithNavigation: string;
 export declare const indicator: string;
 export declare const navigateBtn: string;

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

@@ -2,5 +2,5 @@ import { NodeProps } from '@xyflow/react';
 import { ElementXYFlowNode } from '../../types';
 
 type ElementNodeProps = NodeProps<ElementXYFlowNode>;
-export declare function ElementNode({ id, data: { element }, dragging, selected, width, height }: ElementNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare const ElementNodeMemo: import('react').NamedExoticComponent<ElementNodeProps>;
 export {};

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/nodes/element/index.d.ts

@@ -1 +1 @@
-export { ElementNode } from './ElementNode';
+export { ElementNodeMemo as ElementNode } from './ElementNode';

package/dist/xyflow/types.d.ts

@@ -1,4 +1,4 @@
-import { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core';
+import { BBox, DiagramEdge, DiagramNode, Fqn, Point, XYPosition } 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';
@@ -25,7 +25,7 @@ export declare namespace XYFlowNode {
 }
 export type RelationshipData = {
     edge: DiagramEdge;
-    controlPoints: Point[];
+    controlPoints: XYPosition[] | null;
     headPoint: Point | null;
     tailPoint: Point | null;
     type: 'bezier' | 'poly';
@@ -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/dist/xyflow/utils.d.ts

@@ -1,4 +1,7 @@
+import { DiagramEdge, Point } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/react';
 
 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,38 +48,40 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.2.2",
+    "@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.1",
-    "@mantine/hooks": "^7.10.1",
+    "@mantine/core": "7.10.2",
+    "@mantine/hooks": "7.10.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.2.2",
+    "@likec4/tsconfig": "1.4.0",
     "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "^7.10.1",
-    "@mantine/hooks": "^7.10.1",
-    "@mantine/vanilla-extract": "^7.10.1",
+    "@mantine/core": "7.10.2",
+    "@mantine/hooks": "7.10.2",
+    "@mantine/vanilla-extract": "7.10.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vanilla-extract/css": "^1.15.2",
-    "@vanilla-extract/dynamic": "^2.1.1",
-    "@vanilla-extract/esbuild-plugin": "^2.3.6",
+    "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "^12.0.0-next",
+    "@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",
@@ -89,8 +91,7 @@
     "tilg": "^0.1.1",
     "type-fest": "^4.18.2",
     "typescript": "^5.4.5",
-    "unbuild": "^2.0.0",
-    "vite": "5.3.0",
+    "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: {
@@ -17,10 +27,10 @@ globalStyle(`.react-flow${cssReactFlow}`, {
     [xyvars.background.pattern.color]: vars.likec4.background.pattern.color
   }
 })
-globalStyle(`.react-flow${cssReactFlow} .react-flow__viewport`, {
-  // willChange: 'transform'
-  backfaceVisibility: 'hidden'
-})
+
+// globalStyle(`.react-flow${cssReactFlow} .react-flow__node`, {
+//   willChange: 'transform'
+// })
 
 export const cssDisablePan = style({})
 

package/src/LikeC4Diagram.props.ts

@@ -3,12 +3,14 @@ import type {
   DiagramEdge,
   DiagramNode,
   DiagramView,
+  EdgeId,
   ElementShape,
   Fqn,
   NonEmptyArray,
   ThemeColor,
   ViewID
 } from '@likec4/core'
+import type { XYPosition } from '@xyflow/system'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
@@ -19,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 = (
@@ -55,12 +58,25 @@ export namespace Changes {
     }
     targets: NonEmptyArray<Fqn>
   }
+
+  export interface SaveManualLayout {
+    op: 'save-manual-layout'
+    nodes: Record<Fqn, {
+      x: number
+      y: number
+      width: number
+      height: number
+    }>
+    edges: Record<EdgeId, {
+      controlPoints: XYPosition[]
+    }>
+  }
 }
 
-export type Change = Changes.ChangeElementStyle
+export type Change = Changes.ChangeElementStyle | Changes.SaveManualLayout
 
 export type ChangeEvent = {
-  changes: NonEmptyArray<Change>
+  change: Change
 }
 export type OnChange = {
   (event: ChangeEvent): void
@@ -144,11 +160,23 @@ 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
    */
   enableDynamicViewWalkthrough?: boolean | undefined
+
+  /**
+   * Experimental feature to enable edge editing
+   * @default false
+   */
+  experimentalEdgeEditing?: boolean | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -1,19 +1,23 @@
-import '@xyflow/react/dist/style.css'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
 import clsx from 'clsx'
-import { useRef } from 'react'
+import { DEV } from 'esm-env'
+import { shallowEqual } from 'fast-equals'
+import { domAnimation, LazyMotion } from 'framer-motion'
+import { memo, useEffect, useRef, useState } from 'react'
+import useTilg from 'tilg'
 import { rootClassName } from './globals.css'
 import { KeepAspectRatioContainer } from './KeepAspectRatioContainer'
 import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
-import { WhenInitialized } from './state/WhenInitialized'
+import { useDiagramStoreApi } from './state/useDiagramStore'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
 import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
-import type { XYFlowData } from './xyflow/types'
+import type { XYFlowData, XYFlowEdge, XYFlowNode } from './xyflow/types'
 import { XYFlow } from './xyflow/XYFlow'
 import { XYFlowInner } from './xyflow/XYFlowInner'
 
@@ -29,13 +33,15 @@ export function LikeC4Diagram({
   nodesSelectable = !readonly,
   nodesDraggable = !readonly,
   background = 'dots',
-  controls = !readonly,
+  controls = false,
   showElementLinks = true,
   showDiagramTitle = true,
+  showNavigationButtons = false,
   enableDynamicViewWalkthrough = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
+  experimentalEdgeEditing = false,
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -46,7 +52,7 @@ export function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu
 }: LikeC4DiagramProps) {
-  console.log('LikeC4Diagram')
+  DEV && useTilg()
   const initialRef = useRef<{
     defaultNodes: XYFlowData['nodes']
     defaultEdges: XYFlowData['edges']
@@ -81,6 +87,7 @@ export function LikeC4Diagram({
           showElementLinks={showElementLinks}
           nodesDraggable={nodesDraggable}
           nodesSelectable={nodesSelectable}
+          experimentalEdgeEditing={experimentalEdgeEditing}
           onCanvasClick={onCanvasClick}
           onCanvasContextMenu={onCanvasContextMenu}
           onEdgeClick={onEdgeClick}
@@ -91,38 +98,102 @@ export function LikeC4Diagram({
           onNavigateTo={onNavigateTo}
           onCanvasDblClick={onCanvasDblClick}
         >
-          <KeepAspectRatioContainer
-            className={clsx(rootClassName, className)}
-            enabled={keepAspectRatio}
-            width={view.width}
-            height={view.height}
-          >
-            <XYFlow
-              className={clsx(
-                'likec4-diagram',
-                cssReactFlow,
-                controls === false && cssNoControls,
-                pannable !== true && cssDisablePan,
-                background === 'transparent' && cssTransparentBg
-              )}
-              defaultNodes={initialRef.current.defaultNodes}
-              defaultEdges={initialRef.current.defaultEdges}
+          <LazyMotion features={domAnimation} strict>
+            <KeepAspectRatioContainer
+              className={clsx(rootClassName, className)}
+              enabled={keepAspectRatio}
+              width={view.width}
+              height={view.height}
             >
-              <XYFlowInner
-                showDiagramTitle={showDiagramTitle}
-                enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+              <LikeC4DiagramInnerMemo
+                defaultNodes={initialRef.current.defaultNodes}
+                defaultEdges={initialRef.current.defaultEdges}
+                fitView={fitView}
+                zoomable={zoomable}
                 background={background}
                 controls={controls}
+                pannable={pannable}
+                showDiagramTitle={showDiagramTitle}
+                showNavigationButtons={showNavigationButtons}
+                enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
               />
-            </XYFlow>
-            <WhenInitialized>
-              <SyncWithDiagram />
-              {fitView && <FitViewOnDiagramChange />}
-              {fitView && zoomable && <SelectEdgesOnNodeFocus />}
-            </WhenInitialized>
-          </KeepAspectRatioContainer>
+            </KeepAspectRatioContainer>
+          </LazyMotion>
         </DiagramContextProvider>
       </XYFlowProvider>
     </EnsureMantine>
   )
 }
+
+type LikeC4DiagramInnerProps = {
+  background: NonNullable<LikeC4DiagramProperties['background']>
+  fitView: boolean
+  zoomable: boolean
+  pannable: boolean
+  controls: boolean
+  defaultNodes: XYFlowNode[]
+  defaultEdges: XYFlowEdge[]
+  showDiagramTitle: boolean
+  showNavigationButtons: boolean
+  enableDynamicViewWalkthrough: boolean
+}
+const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
+  background,
+  fitView,
+  zoomable,
+  controls,
+  pannable,
+  defaultNodes,
+  defaultEdges,
+  showDiagramTitle,
+  showNavigationButtons,
+  enableDynamicViewWalkthrough
+}) {
+  DEV && useTilg()
+  const diagramApi = useDiagramStoreApi()
+  const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
+
+  useEffect(() => {
+    if (isInitialized) {
+      return
+    }
+    return diagramApi.subscribe(
+      s => s.initialized,
+      setIsInitialized,
+      {
+        fireImmediately: true
+      }
+    )
+  }, [isInitialized])
+
+  return (
+    <>
+      <XYFlow
+        defaultNodes={defaultNodes}
+        defaultEdges={defaultEdges}
+        className={clsx(
+          'likec4-diagram',
+          cssReactFlow,
+          controls === false && cssNoControls,
+          pannable !== true && cssDisablePan,
+          background === 'transparent' && cssTransparentBg
+        )}
+      >
+        <XYFlowInner
+          showNavigationButtons={showNavigationButtons}
+          showDiagramTitle={showDiagramTitle}
+          enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+          background={background}
+          controls={controls}
+        />
+      </XYFlow>
+      {isInitialized && (
+        <>
+          <SyncWithDiagram />
+          {fitView && <FitViewOnDiagramChange />}
+          {fitView && zoomable && <SelectEdgesOnNodeFocus />}
+        </>
+      )}
+    </>
+  )
+}, shallowEqual)

package/src/globals.css.ts

@@ -13,7 +13,7 @@ globalStyle(`.${rootClassName}`, {
 })
 
 createGlobalTheme(`.${rootClassName}`, {
-  ...omit(vars, ['optionsPanel', 'default'])
+  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default'])
 }, {
   likec4: {
     font:
@@ -25,7 +25,6 @@ createGlobalTheme(`.${rootClassName}`, {
       }
     }
   },
-  filterDimmed: 'brightness(.6) grayscale(.8) opacity(.5) blur(1px)',
   compound: {
     font: vars.likec4.font,
     titleColor: vars.element.loContrast