@likec4/diagram 1.24.0 → 1.25.0

package/dist/state/diagram-machine.js

@@ -2,16 +2,17 @@ import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, getP
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { nodeToRect } from "@xyflow/system";
 import { hasAtLeast, prop, clamp, first } from "remeda";
-import { setup, enqueueActions, assertEvent, stopChild, assign, sendTo, cancel, raise, spawnChild, and, or } from "xstate";
+import { setup, enqueueActions, assign, assertEvent, stopChild, sendTo, cancel, raise, spawnChild, and, or } from "xstate";
 import { MinZoom } from "../base/const.js";
 import { AllDisabled } from "../context/DiagramFeatures.js";
 import { createLayoutConstraints } from "../likec4diagram/useLayoutConstraints.js";
 import { overlaysActorLogic } from "../overlays/overlaysActor.js";
 import { getAligner, toNodeRect } from "./aligners.js";
-import { resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges, lastClickedNode } from "./assign.js";
+import { lastClickedNode, resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges } from "./assign.js";
 import { hotkeyActorLogic } from "./hotkeyActor.js";
+import { DiagramToggledFeaturesPersistence } from "./persistence.js";
 import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
-import { typedSystem, findDiagramNode, focusedBounds } from "./utils.js";
+import { typedSystem, focusedBounds, findDiagramNode } from "./utils.js";
 const diagramMachine = setup({
   types: {
     context: {},
@@ -40,7 +41,7 @@ const diagramMachine = setup({
       }
       nonexhaustive(event.type);
     },
-    "click: selected node ": ({ event }) => {
+    "click: selected node": ({ event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return event.node.selected === true;
     },
@@ -52,6 +53,10 @@ const diagramMachine = setup({
     "click: focused node": ({ context, event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return context.focusedNode === event.node.id;
+    },
+    "click: node has connections": ({ context, event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
     }
   },
   actions: {
@@ -61,21 +66,22 @@ const diagramMachine = setup({
     },
     "trigger:OpenSource": (_, _params) => {
     },
-    "open source of focused node": enqueueActions(({ context, enqueue }) => {
-      if (!context.focusedNode || !context.features.enableVscode) return;
-      const diagramNode = findDiagramNode(context, context.focusedNode);
+    "assign lastClickedNode": assign(({ context, event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return {
+        lastClickedNode: lastClickedNode({ context, event })
+      };
+    }),
+    "open source of focused or last clicked node": enqueueActions(({ context, enqueue }) => {
+      var _a;
+      const nodeId = context.focusedNode ?? ((_a = context.lastClickedNode) == null ? void 0 : _a.id);
+      if (!nodeId || !context.features.enableVscode) return;
+      const diagramNode = findDiagramNode(context, nodeId);
       if (!diagramNode) return;
-      enqueue.cancel("openSource");
       if (DiagramNode.deploymentRef(diagramNode)) {
-        enqueue.raise({ type: "open.source", deployment: DiagramNode.deploymentRef(diagramNode) }, {
-          id: "openSource",
-          delay: 100
-        });
+        enqueue.raise({ type: "open.source", deployment: DiagramNode.deploymentRef(diagramNode) });
       } else if (DiagramNode.modelRef(diagramNode)) {
-        enqueue.raise({ type: "open.source", element: DiagramNode.modelRef(diagramNode) }, {
-          id: "openSource",
-          delay: 100
-        });
+        enqueue.raise({ type: "open.source", element: DiagramNode.modelRef(diagramNode) });
       }
     }),
     "xyflow:fitDiagram": ({ context }, params) => {
@@ -97,6 +103,22 @@ const diagramMachine = setup({
       viewport.y = Math.round(viewport.y);
       panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
+    "xyflow:fitFocusedBounds": ({ context }) => {
+      const { bounds, duration = 450 } = focusedBounds({ context });
+      const { width, height, panZoom, transform } = context.xystore.getState();
+      const maxZoom = Math.max(1, transform[2]);
+      const viewport = getViewportForBounds(
+        bounds,
+        width,
+        height,
+        MinZoom,
+        maxZoom,
+        context.fitViewPadding
+      );
+      viewport.x = Math.round(viewport.x);
+      viewport.y = Math.round(viewport.y);
+      panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
+    },
     "xyflow:setViewportCenter": ({ context }, params) => {
       const { x, y } = params;
       invariant(context.xyflow, "xyflow is not initialized");
@@ -183,7 +205,7 @@ const diagramMachine = setup({
   context: ({ input, self, spawn }) => ({
     ...input,
     features: { ...AllDisabled },
-    toggledFeatures: {
+    toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true
     },
     initialized: false,
@@ -242,9 +264,10 @@ const diagramMachine = setup({
             // TODO: xstate fails to infer the type of the guard
             guard: and([
               "enabled: FocusMode",
+              "click: node has connections",
               or([
                 "click: same node",
-                "click: selected node "
+                "click: selected node"
               ])
             ]),
             actions: [
@@ -256,9 +279,10 @@ const diagramMachine = setup({
             target: "focused"
           },
           {
-            actions: assign({
-              lastClickedNode
-            })
+            actions: [
+              "assign lastClickedNode",
+              "open source of focused or last clicked node"
+            ]
           }
         ],
         "xyflow.paneClick": {
@@ -301,12 +325,9 @@ const diagramMachine = setup({
           ...focusNodesEdges(s),
           viewportBeforeFocus: { ...s.context.viewport }
         })),
-        "open source of focused node",
+        "open source of focused or last clicked node",
         spawnChild("hotkeyActorLogic", { id: "hotkey" }),
-        {
-          type: "xyflow:fitDiagram",
-          params: focusedBounds
-        }
+        "xyflow:fitFocusedBounds"
       ],
       exit: enqueueActions(({ enqueue, context }) => {
         enqueue.stopChild("hotkey");
@@ -330,15 +351,12 @@ const diagramMachine = setup({
           {
             actions: [
               assign({
-                lastClickedNode,
-                focusedNode: ({ event }) => event.node.id
+                lastClickedNode
               }),
-              assign(focusNodesEdges),
-              "open source of focused node",
-              {
-                type: "xyflow:fitDiagram",
-                params: focusedBounds
-              }
+              raise(({ event }) => ({
+                type: "focus.node",
+                nodeId: event.node.id
+              }))
             ]
           }
         ],
@@ -348,11 +366,8 @@ const diagramMachine = setup({
               focusedNode: ({ event }) => event.nodeId
             }),
             assign(focusNodesEdges),
-            "open source of focused node",
-            {
-              type: "xyflow:fitDiagram",
-              params: focusedBounds
-            }
+            "open source of focused or last clicked node",
+            "xyflow:fitFocusedBounds"
           ]
         },
         "key.esc": {
@@ -380,69 +395,60 @@ const diagramMachine = setup({
     },
     // Navigating to another view (after `navigateTo` event)
     navigating: {
-      initial: "pending",
-      type: "compound",
-      states: {
-        pending: {
-          entry: enqueueActions(({ enqueue }) => {
-            enqueue("closeAllOverlays");
-            enqueue("stopSyncLayout");
-            enqueue({
-              type: "trigger:NavigateTo",
-              params: ({ context }) => ({
-                viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-              })
-            });
-          }),
-          on: {
-            "update.view": {
-              actions: enqueueActions(({ enqueue, context, event }) => {
-                const { fromNode, toNode } = findCorrespondingNode(context, event);
-                if (fromNode && toNode) {
-                  enqueue({
-                    type: "xyflow:alignNodeFromToAfterNavigate",
-                    params: {
-                      fromNode: fromNode.id,
-                      toPosition: {
-                        x: toNode.position[0],
-                        y: toNode.position[1]
-                      }
-                    }
-                  });
-                  enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 });
-                } else {
-                  enqueue({
-                    type: "xyflow:setViewportCenter",
-                    params: getBBoxCenter(event.view.bounds)
-                  });
-                  enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
-                }
-                enqueue.assign(updateNavigationHistory);
-                enqueue.assign(mergeXYNodesEdges);
-              }),
-              target: "done"
-            }
-          }
-        },
-        done: {
-          type: "final"
+      entry: [
+        "closeAllOverlays",
+        "stopSyncLayout",
+        {
+          type: "trigger:NavigateTo",
+          params: ({ context }) => ({
+            viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+          })
         }
-      },
-      onDone: {
-        target: "idle"
-      },
+      ],
       exit: assign({
         syncLayoutActorRef: ({ self, context, spawn }) => spawn("syncManualLayoutActorLogic", {
           id: "syncLayout",
           systemId: "syncLayout",
           input: { parent: self, viewId: context.view.id }
-        }),
-        lastOnNavigate: null
-      })
+        })
+        // lastOnNavigate: null,
+      }),
+      on: {
+        "update.view": {
+          actions: enqueueActions(({ enqueue, context, event }) => {
+            const { fromNode, toNode } = findCorrespondingNode(context, event);
+            if (fromNode && toNode) {
+              enqueue({
+                type: "xyflow:alignNodeFromToAfterNavigate",
+                params: {
+                  fromNode: fromNode.id,
+                  toPosition: {
+                    x: toNode.position[0],
+                    y: toNode.position[1]
+                  }
+                }
+              });
+              enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 });
+            } else {
+              enqueue({
+                type: "xyflow:setViewportCenter",
+                params: getBBoxCenter(event.view.bounds)
+              });
+              enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
+            }
+            enqueue.assign(updateNavigationHistory);
+            enqueue.assign(mergeXYNodesEdges);
+            enqueue.assign({
+              lastOnNavigate: null
+            });
+          }),
+          target: "#idle"
+        }
+      }
     },
     walkthrough: {
       entry: [
-        // spawnChild('hotkeyActor', { id: 'hotkey' }),
+        spawnChild("hotkeyActorLogic", { id: "hotkey" }),
         assign({
           viewportBeforeFocus: ({ context }) => context.viewport,
           activeWalkthrough: ({ context, event }) => {
@@ -455,10 +461,7 @@ const diagramMachine = setup({
           }
         }),
         assign(updateActiveWalkthrough),
-        {
-          type: "xyflow:fitDiagram",
-          params: focusedBounds
-        }
+        "xyflow:fitFocusedBounds"
       ],
       on: {
         "key.esc": {
@@ -489,15 +492,15 @@ const diagramMachine = setup({
               }
             });
             enqueue.assign(updateActiveWalkthrough);
-            enqueue({
-              type: "xyflow:fitDiagram",
-              params: focusedBounds
-            });
+            enqueue("xyflow:fitFocusedBounds");
           })
         },
         "walkthrough.end": {
           target: "idle"
         },
+        "xyflow.paneDblClick": {
+          target: "idle"
+        },
         // We received another view, close overlay and process event again
         "update.view": {
           guard: "is another view",
@@ -505,18 +508,18 @@ const diagramMachine = setup({
           target: "idle"
         }
       },
-      exit: enqueueActions(({ enqueue, context }) => {
+      exit: enqueueActions(({ enqueue, context, event }) => {
         enqueue.stopChild("hotkey");
         if (context.viewportBeforeFocus) {
           enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
         } else {
           enqueue({ type: "xyflow:fitDiagram" });
         }
-        enqueue.assign((s) => ({
+        enqueue.assign({
           activeWalkthrough: null,
-          ...unfocusNodesEdges(s),
+          ...unfocusNodesEdges({ context }),
           viewportBeforeFocus: null
-        }));
+        });
       })
     }
   },
@@ -546,15 +549,13 @@ const diagramMachine = setup({
     },
     "navigate.to": {
       guard: "is another view",
-      actions: [
-        assign({
-          lastOnNavigate: ({ context, event }) => ({
-            fromView: context.view.id,
-            toView: event.viewId,
-            fromNode: event.fromNode ?? null
-          })
+      actions: assign({
+        lastOnNavigate: ({ context, event }) => ({
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null
         })
-      ],
+      }),
       target: ".navigating"
     },
     "navigate.back": {
@@ -631,7 +632,10 @@ const diagramMachine = setup({
     "layout.align": {
       guard: "not readonly",
       actions: [
-        { type: "layout.align", params: ({ event }) => ({ mode: event.mode }) },
+        {
+          type: "layout.align",
+          params: ({ event }) => ({ mode: event.mode })
+        },
         raise({ type: "saveManualLayout.schedule" })
       ]
     },
@@ -650,7 +654,7 @@ const diagramMachine = setup({
       ]
     },
     "open.elementDetails": {
-      actions: enqueueActions(({ context, enqueue, system, event }) => {
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => {
         var _a;
         let initiatedFrom = null;
         const fromNodeId = event.fromNode ?? ((_a = context.view.nodes.find((n) => DiagramNode.modelRef(n) === event.fqn)) == null ? void 0 : _a.id);
@@ -668,12 +672,12 @@ const diagramMachine = setup({
             clientRect
           };
         }
-        enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+        return {
           type: "open.elementDetails",
           subject: event.fqn,
           currentView: context.view,
           ...initiatedFrom && { initiatedFrom }
-        });
+        };
       })
     },
     "open.relationshipsBrowser": {
@@ -702,10 +706,12 @@ const diagramMachine = setup({
     },
     "toggle.feature": {
       actions: assign({
-        toggledFeatures: ({ context, event }) => ({
-          ...context.toggledFeatures,
-          [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
-        })
+        toggledFeatures: ({ context, event }) => {
+          return DiagramToggledFeaturesPersistence.write({
+            ...context.toggledFeatures,
+            [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
+          });
+        }
       })
     }
   },

package/dist/state/persistence.d.ts

@@ -0,0 +1,5 @@
+import { EnabledFeatures } from '../context/DiagramFeatures';
+export declare const DiagramToggledFeaturesPersistence: {
+    read(): Partial<EnabledFeatures> | null;
+    write<F extends Partial<EnabledFeatures>>(toggledFeatures: F): F;
+};

package/dist/state/persistence.js

@@ -0,0 +1,23 @@
+import { pickBy, isBoolean } from "remeda";
+const key = `likec4:diagram:toggledFeatures`;
+const DiagramToggledFeaturesPersistence = {
+  read() {
+    try {
+      let fromStorage = sessionStorage.getItem(key);
+      if (fromStorage) {
+        return JSON.parse(fromStorage);
+      }
+      return null;
+    } catch (e) {
+      console.error(`Error reading fromStorage ${key}:`, e);
+      return null;
+    }
+  },
+  write(toggledFeatures) {
+    sessionStorage.setItem(key, JSON.stringify(pickBy(toggledFeatures, isBoolean)));
+    return toggledFeatures;
+  }
+};
+export {
+  DiagramToggledFeaturesPersistence
+};

package/dist/theme-vars.css.d.ts

@@ -61,12 +61,3 @@ export declare const xyvars: {
         borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
 };
-export declare const whereLight = ":where([data-mantine-color-scheme=\"light\"])";
-export declare const whereDark = ":where([data-mantine-color-scheme=\"dark\"])";
-export declare const easings: {
-    out: string;
-    inOut: string;
-};
-export declare const transitions: {
-    fast: string;
-};

package/dist/theme-vars.d.ts

@@ -1,3 +1,15 @@
 import { MantineVars } from '@mantine/vanilla-extract';
-export { easings, transitions, vars, whereDark, whereLight, xyvars, } from './theme-vars.css';
+export { vars, xyvars, } from './theme-vars.css';
+export declare const rootClassName = "likec4-diagram-root";
+export declare const whereNotReducedGraphics = ":where(.likec4-diagram-root:not([data-likec4-reduced-graphics]))";
+export declare const whereReducedGraphics = ":where(.likec4-diagram-root:is([data-likec4-reduced-graphics=\"true\"]))";
+export declare const whereLight = ":where([data-mantine-color-scheme=\"light\"])";
+export declare const whereDark = ":where([data-mantine-color-scheme=\"dark\"])";
+export declare const easings: {
+    out: string;
+    inOut: string;
+};
+export declare const transitions: {
+    fast: string;
+};
 export declare const mantine: MantineVars;

package/dist/theme-vars.js

@@ -1,5 +1,7 @@
 import { themeToVars } from "@mantine/vanilla-extract";
+const rootClassName = "likec4-diagram-root";
 const mantine = themeToVars({});
 export {
-  mantine
+  mantine,
+  rootClassName
 };

package/dist/utils/css.d.ts

@@ -0,0 +1 @@
+export declare function getVarName(variable: string): string;

package/dist/utils/css.js

@@ -0,0 +1,10 @@
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+export {
+  getVarName
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -27,35 +27,41 @@
         "default": "./dist/index.js"
       }
     },
-    "./style.css": "./dist/style.css"
+    "./package.json": "./package.json",
+    "./diagram.css": "./dist/diagram.css"
+  },
+  "wireit": {
+    "build:watch": {
+      "command": "vite build --watch --mode development --clearScreen=false -l warn",
+      "service": true
+    }
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/vanilla-extract": "7.17.0",
+    "@mantine/vanilla-extract": "7.17.1",
     "@nanostores/react": "0.8.4",
     "@react-hookz/web": "^25.0.1",
     "@tabler/icons-react": "3.29.0",
-    "@vanilla-extract/dynamic": "^2.1.2",
     "@xstate/react": "^5.0.2",
-    "@xyflow/react": "12.4.3",
-    "@xyflow/system": "0.0.51",
+    "@xyflow/react": "12.4.4",
+    "@xyflow/system": "0.0.52",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.2.2",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^12.4.2",
+    "framer-motion": "^12.4.7",
     "khroma": "^2.1.0",
     "nanostores": "0.11.3",
     "react-error-boundary": "^5.0.0",
-    "remeda": "^2.20.1",
+    "remeda": "^2.20.2",
     "type-fest": "4.34.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.24.0"
+    "@likec4/core": "1.25.0"
   },
   "peerDependencies": {
-    "@mantine/core": "7.17.0",
-    "@mantine/hooks": "7.17.0",
+    "@mantine/core": "7.17.1",
+    "@mantine/hooks": "7.17.1",
     "react": "~19.0.0",
     "react-dom": "~19.0.0"
   },
@@ -72,14 +78,16 @@
     "typescript": "5.7.3",
     "vite": "6.1.0",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.4",
-    "@likec4/tsconfig": "1.24.0"
+    "vitest": "^3.0.6",
+    "wireit": "^0.14.11",
+    "@likec4/tsconfig": "1.25.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "vite build",
+    "build:watch": "wireit",
     "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
+    "clean": "rm -r -f -g \"dist/*\" .tsbuildinfo",
     "test": "vitest run --no-isolate"
   }
 }