feat: enhance diagram overlay with navigation

Author: davydkov

package.json

@@ -14,11 +14,13 @@
   },
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
-    "likec4": "https://pkg.pr.new/likec4/likec4@6793aeb",
+    "likec4": "https://pkg.pr.new/likec4/likec4@82cb4e5",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-use": "^17.6.0",
-    "roughjs": "^4.6.6"
+    "roughjs": "^4.6.6",
+    "@xyflow/react": "12.8.4",
+    "@xyflow/system": "0.0.68"
   },
   "devDependencies": {
     "@types/react": "^19.1.13",

pnpm-lock.yaml

@@ -1,10 +1,10 @@
 
 import { ReactLikeC4 } from 'likec4:react'
 import { useHash } from 'react-use'
+import injectStyles from './App.css?inline'
 import { ElementNode } from './CustomNodes'
 import { CustomOverlay } from './CustomOverlay'
 import { useCustomOverlay } from './context'
-import injectStyles from './App.css?inline'
 
 
 function App() {
@@ -18,6 +18,12 @@ function App() {
       colorScheme='dark'
       viewId={viewId}
       controls
+      fitViewPadding={{
+        top: '80px',
+        left: '30px',
+        right: '30px',
+        bottom: '30px',
+      }}
       background='dots'
       enableElementDetails
       enableFocusMode

pnpm-workspace.yaml

@@ -50,7 +50,7 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => {
           data-likec4-color={nodeProps.data.color}
           // ❇️ This is a class from styles.css
           //    injected in the shadow DOM
-          className='node-toolbar '
+          className='node-toolbar'
         >
           <div style={{ fontSize: 24 }}>🛠️</div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>