From 80842531f363b9b183359100dfdb2841c3b5daa1 Mon Sep 17 00:00:00 2001
From: elf Pavlik <elf-pavlik@hackers4peace.net>
Date: Mon, 22 Jun 2026 19:34:30 -0600
Subject: [PATCH 1/2] fix errors

---
 src/CustomNodes.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/CustomNodes.tsx b/src/CustomNodes.tsx
index 113d82e..ae6ea37 100644
--- a/src/CustomNodes.tsx
+++ b/src/CustomNodes.tsx
@@ -3,7 +3,7 @@ import {
   ElementActions,
   ElementData,
   ElementNodeContainer,
-  XYFlow,
+  xyflow,
   elementNode,
   useDiagram,
   useLikeC4Styles
@@ -33,7 +33,7 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => {
       <ElementActions {...nodeProps}
         extraButtons={[{
           key: 'bolt',
-          icon: <IconBolt/>,
+          icon: <IconBolt />,
           onClick(e) {
             e.stopPropagation();
             open(nodeModel.id);
@@ -42,10 +42,10 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => {
       />
       <DefaultHandles />
       {(isHoveredOrSelected && nodeModel.element.hasMetadata()) && (
-        <XYFlow.NodeToolbar
+        <xyflow.NodeToolbar
           isVisible
           offset={0}
-          position={XYFlow.Position.Top}
+          position={xyflow.Position.Top}
           align={'center'}
           data-likec4-color={nodeProps.data.color}
           // ❇️ This is a class from styles.css
@@ -60,30 +60,30 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => {
             <div className='metadata'>
               {Object.entries(nodeModel.element.getMetadata()).map(([key, value]) => (
                 <Fragment key={key}>
-                <div data-metadata-key>{key}</div>
-                <div data-metadata-value>{value}</div>
-              </Fragment>))}
+                  <div data-metadata-key>{key}</div>
+                  <div data-metadata-value>{value}</div>
+                </Fragment>))}
             </div>
             <div style={{ display: 'flex', gap: 8 }}>
               <button onClick={(e) => {
-                  e.stopPropagation();
-                  diagram.openElementDetails(nodeModel.id)
-                }}>
+                e.stopPropagation();
+                diagram.openElementDetails(nodeModel.id)
+              }}>
                 Open Details
               </button>
               <button onClick={(e) => {
-                  e.stopPropagation();
-                  diagram.focusNode(nodeModel.id)
-                }}
+                e.stopPropagation();
+                diagram.focusNode(nodeModel.id)
+              }}
               >Focus</button>
             </div>
           </div>
-        </XYFlow.NodeToolbar>
+        </xyflow.NodeToolbar>
       )}
     </ElementNodeContainer>
   );
 })
 
 const IconBolt = () => (
-  <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2.02c-5.51 0-9.98 4.47-9.98 9.98s4.47 9.98 9.98 9.98 9.98-4.47 9.98-9.98S17.51 2.02 12 2.02zm0 17.96c-4.4 0-7.98-3.58-7.98-7.98S7.6 4.02 12 4.02 19.98 7.6 19.98 12 16.4 19.98 12 19.98zM12.75 5l-4.5 8.5h3.14V19l4.36-8.5h-3z"></path></svg>
+  <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2.02c-5.51 0-9.98 4.47-9.98 9.98s4.47 9.98 9.98 9.98 9.98-4.47 9.98-9.98S17.51 2.02 12 2.02zm0 17.96c-4.4 0-7.98-3.58-7.98-7.98S7.6 4.02 12 4.02 19.98 7.6 19.98 12 16.4 19.98 12 19.98zM12.75 5l-4.5 8.5h3.14V19l4.36-8.5h-3z"></path></svg>
 )

From 605c70bcf88f74db51886ab5f7009c096801f3c0 Mon Sep 17 00:00:00 2001
From: elf Pavlik <elf-pavlik@hackers4peace.net>
Date: Mon, 22 Jun 2026 19:43:58 -0600
Subject: [PATCH 2/2] update dependencies

---
 package.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index a2ebb14..b44310f 100644
--- a/package.json
+++ b/package.json
@@ -14,18 +14,18 @@
   },
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
-    "likec4": "latest",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-use": "^17.6.0",
+    "likec4": "^1.58.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-use": "^17.6.1",
     "roughjs": "^4.6.6"
   },
   "devDependencies": {
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.11"
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   },
   "stackblitz": {
     "installDependencies": true