@likec4/diagram 1.39.2 → 1.39.4

package/dist/LikeC4Diagram.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId } from '@mantine/hooks';
 import { ReactFlowProvider } from '@xyflow/react';
 import { useRef } from 'react';
 import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
 import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
+import { useId } from './hooks/useId.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
 import { DiagramActorProvider } from './state/DiagramActorProvider.js';
@@ -58,7 +58,7 @@ function LikeC4Diagram({
   renderNodes,
   children
 }) {
-  const id = useId().replace("mantine-", "likec4-");
+  const id = useId();
   const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {

package/dist/LikeC4Styles.js

@@ -4,7 +4,6 @@ import { useMantineStyleNonce } from '@mantine/core';
 import { toRgba, mix, toHex, scale } from 'khroma';
 import { memo } from 'react';
 import { pipe, entries, map, join, range } from 'remeda';
-import globalsCss from './globals.css.js';
 import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
 
 const scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`;
@@ -96,15 +95,6 @@ function LikeC4Styles({ id }) {
   );
 }
 const MemoizedStyles = memo(({ id, nonce, customColorsStyles, builtInColors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(
-    "style",
-    {
-      type: "text/css",
-      "data-likec4-global": id,
-      dangerouslySetInnerHTML: { __html: globalsCss.replaceAll(".likec4-root", `#${id}.likec4-root`) },
-      nonce
-    }
-  ),
   /* @__PURE__ */ jsx(
     "style",
     {

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
@@ -38,12 +38,6 @@ function EdgeLabelContainer({
     "div",
     {
       className: cx(
-        css({
-          display: {
-            _reduceGraphicsOnPan: "none",
-            _smallZoom: "none"
-          }
-        }),
         "nodrag nopan",
         "likec4-edge-label-container",
         className

package/dist/bundle/ShadowRoot.js

@@ -1,5 +1,4 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
 import { MantineProvider } from '@mantine/core';
 import { useRef, useCallback } from 'react';
 import root from 'react-shadow';
@@ -27,12 +26,7 @@ function ShadowRoot({
     {
       ref: rootRef,
       ...colorScheme && { "data-mantine-color-scheme": colorScheme },
-      className: cx(
-        "likec4-shadow-root",
-        css({
-          display: "contents"
-        })
-      ),
+      className: "likec4-shadow-root",
       children: /* @__PURE__ */ jsx(
         MantineProvider,
         {

package/dist/bundle/styles.css.js

@@ -1,9 +1,10 @@
 import { css } from '@likec4/styles/css';
 import { createTheme, Portal } from '@mantine/core';
-import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback, useId } from '@mantine/hooks';
+import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
 import { useState } from 'react';
 import { first, isString, isFunction } from 'remeda';
+import { useId } from '../hooks/useId.js';
 import fontsCss from '../styles-font.css2.js';
 import inlinedStyles from '../styles.css2.js';
 
@@ -61,7 +62,7 @@ function useBundledStyleSheet(injectFontCss, styleNonce) {
   useIsomorphicLayoutEffect(() => {
     const css2 = new CSSStyleSheet();
     css2.replaceSync(
-      inlinedStyles.replaceAll(":where(:root, :host)", `.likec4-shadow-root`).replaceAll(":where(:host, :root)", `.likec4-shadow-root`).replaceAll(":root", `.likec4-shadow-root`).replaceAll("body {", `.likec4-shadow-root{`).replaceAll("body{", `.likec4-shadow-root{`)
+      inlinedStyles.replaceAll(":where(:root,:host)", `.likec4-shadow-root`).replaceAll(":root", `.likec4-shadow-root`).replaceAll("body {", `.likec4-shadow-root{`).replaceAll("body{", `.likec4-shadow-root{`)
     );
     setStyleSheets([css2]);
     return () => {
@@ -128,15 +129,15 @@ function useShadowRootStyle(keepAspectRatio, view) {
   background: transparent;
   padding: 0;
   overflow: hidden;
+  aspect-ratio: ${Math.ceil(view.bounds.width)} / ${Math.ceil(view.bounds.height)};
   ${isLandscape ? "" : `
-  max-width: var(--likec4-view-max-width, ${Math.ceil(view.bounds.width)}px);
+  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(view.bounds.width)}px));
   margin-left: auto;
   margin-right: auto;`}
   width: ${isLandscape ? "100%" : "auto"};
   height: ${isLandscape ? "auto" : "100%"};
   ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
-  aspect-ratio: ${Math.ceil(view.bounds.width)} / ${Math.ceil(view.bounds.height)};
-  max-height: var(--likec4-view-max-height, ${Math.ceil(view.bounds.height)}px);
+  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(view.bounds.height)}px));
 }
 `.trim()
   ];

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { useId } from './useId';
 export { useMantinePortalProps } from './useMantinePortalProps';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';

package/dist/hooks/useId.d.ts

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

package/dist/hooks/useId.js

@@ -0,0 +1,7 @@
+import { useId as useId$1 } from '@mantine/hooks';
+
+function useId() {
+  return useId$1().replace("mantine-", "likec4-");
+}
+
+export { useId };

package/dist/likec4diagram/DiagramXYFlow.js

@@ -59,7 +59,7 @@ function LikeC4DiagramXYFlow({
   } = useDiagramEventHandlers();
   const notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(true);
-  }, isReducedGraphics ? 120 : 200), notPanning = useDebouncedCallback(() => {
+  }, isReducedGraphics ? 120 : 400), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     if ($isPanning.get()) {
       $isPanning.set(false);
@@ -73,9 +73,7 @@ function LikeC4DiagramXYFlow({
     }
     notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    if (!!event && !isReducedGraphics) {
-      notPanning.flush();
-    }
+    isPanning.clear();
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -45,7 +45,7 @@ const RelationshipPopover = memo(() => {
   const diagram = useDiagram();
   const { viewId, selected } = useDiagramContext(selectDiagramContext);
   const openedEdgeId = useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
-  useOnDiagramEvent("viewChange", () => {
+  useOnDiagramEvent("navigateTo", () => {
     actorRef.send({ type: "close" });
   });
   useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {

package/dist/navigationpanel/NavigationPanel.js

@@ -84,9 +84,8 @@ const NavigationPanelImpl = ({ actor }) => {
     Popover,
     {
       offset: {
-        mainAxis: 2
+        mainAxis: 4
       },
-      middlewares: { flip: false },
       opened,
       position: "bottom-start",
       trapFocus: true,
@@ -95,7 +94,7 @@ const NavigationPanelImpl = ({ actor }) => {
       onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
       children: [
         /* @__PURE__ */ jsx(NavigationPanelPopoverTarget, { actor }),
-        /* @__PURE__ */ jsx(NavigationPanelDropdown, {})
+        opened && /* @__PURE__ */ jsx(NavigationPanelDropdown, {})
       ]
     }
   );

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -14,6 +14,7 @@ import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
+import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
@@ -31,6 +32,12 @@ const scopedKeydownHandler = createScopedKeydownHandler({
 function NavigationPanelDropdown() {
   const actor = useNavigationActor();
   const searchQuery = useSelector(actor.actorRef, (s) => s.context.searchQuery);
+  useOnDiagramEvent("paneClick", () => {
+    actor.closeDropdown();
+  });
+  useOnDiagramEvent("nodeClick", () => {
+    actor.closeDropdown();
+  });
   const setSearchQuery = useThrottledCallback((value) => {
     actor.send({ type: "searchQuery.change", value });
   }, 250);

package/dist/state/DiagramActorProvider.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCustomCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
@@ -8,11 +8,13 @@ import { ErrorBoundary } from '../components/ErrorFallback.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
+import { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
 import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
+import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 
 const selectToggledFeatures = (state) => {
   if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
@@ -64,7 +66,6 @@ function DiagramActorProvider({
       }
     }
   );
-  useActorEventHandlers(actorRef);
   const features = useEnabledFeatures();
   useCustomCompareEffect(
     () => {
@@ -89,27 +90,23 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { viewId: view.id, children }) }) }) });
+  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
+    /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }),
+    /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
+  ] });
 }
-function CurrentViewModelProvider({
-  children,
-  viewId
-}) {
+function CurrentViewModelProvider({ children }) {
+  const viewId = useCurrentViewId();
   const likec4model = useLikeC4Model();
   const viewmodel = likec4model.findView(viewId);
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
 }
-function useActorEventHandlers(actorRef) {
+function DiagramActorEventListener({ actorRef }) {
   const {
-    onChange,
     onNavigateTo,
     onOpenSource
   } = useDiagramEventHandlers();
-  useEffect(() => {
-    if (!onChange) return;
-    const subscription = actorRef.on("viewChange", ({ change }) => onChange({ change }));
-    return () => subscription.unsubscribe();
-  }, [actorRef, onChange]);
+  useOnDiagramEvent("openSource", ({ params }) => onOpenSource?.(params));
   useEffect(() => {
     if (!onNavigateTo) return;
     let frame;
@@ -124,11 +121,7 @@ function useActorEventHandlers(actorRef) {
       subscription.unsubscribe();
     };
   }, [actorRef, onNavigateTo]);
-  useEffect(() => {
-    if (!onOpenSource) return;
-    const subscription = actorRef.on("openSource", ({ params }) => onOpenSource(params));
-    return () => subscription.unsubscribe();
-  }, [actorRef, onOpenSource]);
+  return null;
 }
 
 export { DiagramActorProvider };

package/dist/state/diagram-machine.d.ts

@@ -1,4 +1,5 @@
-import { DiagramView, EdgeId, Fqn, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, XYPoint, BBox } from '@likec4/core';
+import { BBox } from '@likec4/core';
+import { DiagramEdge, DiagramNode, DiagramView, EdgeId, Fqn, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewId, XYPoint } from '@likec4/core/types';
 import { ReactFlowInstance, useStoreApi } from '@xyflow/react';
 import { EdgeChange, NodeChange, Rect, Viewport } from '@xyflow/system';
 import { MouseEvent } from 'react';
@@ -199,12 +200,19 @@ export type Events = HotKeyEvent | {
 export type EmittedEvents = {
     type: 'navigateTo';
     viewId: ViewId;
-} | {
-    type: 'viewChange';
-    change: ViewChange;
 } | {
     type: 'openSource';
     params: OpenSourceParams;
+} | {
+    type: 'paneClick';
+} | {
+    type: 'nodeClick';
+    node: DiagramNode;
+    xynode: Types.Node;
+} | {
+    type: 'edgeClick';
+    edge: DiagramEdge;
+    xyedge: Types.Edge;
 } | {
     type: 'edgeMouseEnter';
     edge: Types.Edge;
@@ -276,12 +284,6 @@ declare const _diagramMachine: StateMachine<Context, Events, {
         type: "onEdgeMouseLeave";
         params: NonReducibleUnknown;
     };
-    "trigger:OnChange": {
-        type: "trigger:OnChange";
-        params: {
-            change: ViewChange;
-        };
-    };
     "layout.align": {
         type: "layout.align";
         params: {
@@ -322,6 +324,10 @@ declare const _diagramMachine: StateMachine<Context, Events, {
         type: "assign lastClickedNode";
         params: NonReducibleUnknown;
     };
+    "reset lastClickedNode": {
+        type: "reset lastClickedNode";
+        params: NonReducibleUnknown;
+    };
     "open source of focused or last clicked node": {
         type: "open source of focused or last clicked node";
         params: NonReducibleUnknown;
@@ -407,6 +413,18 @@ declare const _diagramMachine: StateMachine<Context, Events, {
         type: "emit: edgeEditingStarted";
         params: NonReducibleUnknown;
     };
+    "emit: paneClick": {
+        type: "emit: paneClick";
+        params: NonReducibleUnknown;
+    };
+    "emit: nodeClick": {
+        type: "emit: nodeClick";
+        params: NonReducibleUnknown;
+    };
+    "emit: edgeClick": {
+        type: "emit: edgeClick";
+        params: NonReducibleUnknown;
+    };
 }>, Values<{
     isReady: {
         type: "isReady";
@@ -978,41 +996,16 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     logic: SearchActorLogic;
                                     id: "search";
                                 };
-                            }>, never, never, never, never>];
+                            }>, never, never, never, never>, "emit: nodeClick"];
                             readonly target: "focused";
                         }, {
-                            readonly actions: readonly ["assign lastClickedNode", "open source of focused or last clicked node"];
+                            readonly actions: readonly ["assign lastClickedNode", "open source of focused or last clicked node", "emit: nodeClick"];
                         }];
                         readonly 'xyflow.paneClick': {
-                            readonly actions: readonly [ ActionFunction<Context, {
-                                type: "xyflow.paneClick";
-                            }, Events, undefined, Values<{
-                                syncManualLayoutActorLogic: {
-                                    src: "syncManualLayoutActorLogic";
-                                    logic: SyncLayoutActorLogic;
-                                    id: "syncLayout";
-                                };
-                                hotkeyActorLogic: {
-                                    src: "hotkeyActorLogic";
-                                    logic: HotkeyActorLogic;
-                                    id: "hotkey";
-                                };
-                                overlaysActorLogic: {
-                                    src: "overlaysActorLogic";
-                                    logic: OverlaysActorLogic;
-                                    id: "overlays";
-                                };
-                                searchActorLogic: {
-                                    src: "searchActorLogic";
-                                    logic: SearchActorLogic;
-                                    id: "search";
-                                };
-                            }>, never, never, never, never>];
+                            readonly actions: readonly ["reset lastClickedNode", "emit: paneClick"];
                         };
                         readonly 'xyflow.paneDblClick': {
-                            readonly actions: readonly [{
-                                readonly type: "xyflow:fitDiagram";
-                            }, {
+                            readonly actions: readonly ["reset lastClickedNode", "xyflow:fitDiagram", {
                                 readonly type: "trigger:OpenSource";
                                 readonly params: ({ context }: {
                                     context: Context;
@@ -1055,10 +1048,10 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                         };
                         readonly 'xyflow.edgeClick': {
                             readonly guard: any;
-                            readonly actions: ActionFunction<Context, {
+                            readonly actions: readonly [ ActionFunction<Context, {
                                 type: "xyflow.edgeClick";
                                 edge: Types.Edge;
-                            }, Events, undefined, never, never, never, never, never>;
+                            }, Events, undefined, never, never, never, never, never>, "emit: edgeClick"];
                         };
                     };
                 };
@@ -1148,12 +1141,6 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "onEdgeMouseLeave";
                             params: NonReducibleUnknown;
                         };
-                        "trigger:OnChange": {
-                            type: "trigger:OnChange";
-                            params: {
-                                change: ViewChange;
-                            };
-                        };
                         "layout.align": {
                             type: "layout.align";
                             params: {
@@ -1194,6 +1181,10 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "assign lastClickedNode";
                             params: NonReducibleUnknown;
                         };
+                        "reset lastClickedNode": {
+                            type: "reset lastClickedNode";
+                            params: NonReducibleUnknown;
+                        };
                         "open source of focused or last clicked node": {
                             type: "open source of focused or last clicked node";
                             params: NonReducibleUnknown;
@@ -1279,6 +1270,18 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "emit: edgeEditingStarted";
                             params: NonReducibleUnknown;
                         };
+                        "emit: paneClick": {
+                            type: "emit: paneClick";
+                            params: NonReducibleUnknown;
+                        };
+                        "emit: nodeClick": {
+                            type: "emit: nodeClick";
+                            params: NonReducibleUnknown;
+                        };
+                        "emit: edgeClick": {
+                            type: "emit: edgeClick";
+                            params: NonReducibleUnknown;
+                        };
                     }>, Values<{
                         isReady: {
                             type: "isReady";
@@ -1340,6 +1343,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                     readonly on: {
                         readonly 'xyflow.nodeClick': readonly [{
                             readonly guard: "click: focused node";
+                            readonly actions: "emit: nodeClick";
                             readonly target: "#idle";
                         }, {
                             readonly actions: readonly [ ActionFunction<Context, {
@@ -1369,7 +1373,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             }>, never, never, never, never>, ActionFunction<Context, {
                                 type: "xyflow.nodeClick";
                                 node: Types.Node;
-                            }, Events, undefined, never, never, never, never, never>];
+                            }, Events, undefined, never, never, never, never, never>, "emit: nodeClick"];
                         }];
                         readonly 'focus.node': {
                             readonly actions: readonly [ ActionFunction<Context, {
@@ -1402,30 +1406,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             readonly target: "idle";
                         };
                         readonly 'xyflow.paneClick': {
-                            readonly actions: ActionFunction<Context, {
-                                type: "xyflow.paneClick";
-                            }, Events, undefined, Values<{
-                                syncManualLayoutActorLogic: {
-                                    src: "syncManualLayoutActorLogic";
-                                    logic: SyncLayoutActorLogic;
-                                    id: "syncLayout";
-                                };
-                                hotkeyActorLogic: {
-                                    src: "hotkeyActorLogic";
-                                    logic: HotkeyActorLogic;
-                                    id: "hotkey";
-                                };
-                                overlaysActorLogic: {
-                                    src: "overlaysActorLogic";
-                                    logic: OverlaysActorLogic;
-                                    id: "overlays";
-                                };
-                                searchActorLogic: {
-                                    src: "searchActorLogic";
-                                    logic: SearchActorLogic;
-                                    id: "search";
-                                };
-                            }>, never, never, never, never>;
+                            readonly actions: readonly ["reset lastClickedNode", "emit: paneClick"];
                             readonly target: "idle";
                         };
                         readonly 'notations.unhighlight': {
@@ -1542,7 +1523,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     logic: SearchActorLogic;
                                     id: "search";
                                 };
-                            }>, never, never, never, never>, "update active walkthrough", "xyflow:fitFocusedBounds", "emit: walkthroughStep"];
+                            }>, never, never, never, never>, "update active walkthrough", "xyflow:fitFocusedBounds", "emit: edgeClick", "emit: walkthroughStep"];
                         };
                         readonly 'notations.unhighlight': {
                             readonly actions: "update active walkthrough";
@@ -1609,12 +1590,6 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "onEdgeMouseLeave";
                             params: NonReducibleUnknown;
                         };
-                        "trigger:OnChange": {
-                            type: "trigger:OnChange";
-                            params: {
-                                change: ViewChange;
-                            };
-                        };
                         "layout.align": {
                             type: "layout.align";
                             params: {
@@ -1655,6 +1630,10 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "assign lastClickedNode";
                             params: NonReducibleUnknown;
                         };
+                        "reset lastClickedNode": {
+                            type: "reset lastClickedNode";
+                            params: NonReducibleUnknown;
+                        };
                         "open source of focused or last clicked node": {
                             type: "open source of focused or last clicked node";
                             params: NonReducibleUnknown;
@@ -1740,6 +1719,18 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "emit: edgeEditingStarted";
                             params: NonReducibleUnknown;
                         };
+                        "emit: paneClick": {
+                            type: "emit: paneClick";
+                            params: NonReducibleUnknown;
+                        };
+                        "emit: nodeClick": {
+                            type: "emit: nodeClick";
+                            params: NonReducibleUnknown;
+                        };
+                        "emit: edgeClick": {
+                            type: "emit: edgeClick";
+                            params: NonReducibleUnknown;
+                        };
                     }>, Values<{
                         isReady: {
                             type: "isReady";
@@ -1853,12 +1844,6 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "onEdgeMouseLeave";
                             params: NonReducibleUnknown;
                         };
-                        "trigger:OnChange": {
-                            type: "trigger:OnChange";
-                            params: {
-                                change: ViewChange;
-                            };
-                        };
                         "layout.align": {
                             type: "layout.align";
                             params: {
@@ -1899,6 +1884,10 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "assign lastClickedNode";
                             params: NonReducibleUnknown;
                         };
+                        "reset lastClickedNode": {
+                            type: "reset lastClickedNode";
+                            params: NonReducibleUnknown;
+                        };
                         "open source of focused or last clicked node": {
                             type: "open source of focused or last clicked node";
                             params: NonReducibleUnknown;
@@ -1984,6 +1973,18 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "emit: edgeEditingStarted";
                             params: NonReducibleUnknown;
                         };
+                        "emit: paneClick": {
+                            type: "emit: paneClick";
+                            params: NonReducibleUnknown;
+                        };
+                        "emit: nodeClick": {
+                            type: "emit: nodeClick";
+                            params: NonReducibleUnknown;
+                        };
+                        "emit: edgeClick": {
+                            type: "emit: edgeClick";
+                            params: NonReducibleUnknown;
+                        };
                     }>, Values<{
                         isReady: {
                             type: "isReady";
@@ -2048,6 +2049,15 @@ declare const _diagramMachine: StateMachine<Context, Events, {
         };
     };
     readonly on: {
+        readonly 'xyflow.paneClick': {
+            readonly actions: "emit: paneClick";
+        };
+        readonly 'xyflow.nodeClick': {
+            readonly actions: "emit: nodeClick";
+        };
+        readonly 'xyflow.edgeClick': {
+            readonly actions: "emit: edgeClick";
+        };
         readonly 'xyflow.applyNodeChanges': {
             readonly actions: ActionFunction<Context, {
                 type: "xyflow.applyNodeChanges";
@@ -2268,12 +2278,6 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                     type: "onEdgeMouseLeave";
                     params: NonReducibleUnknown;
                 };
-                "trigger:OnChange": {
-                    type: "trigger:OnChange";
-                    params: {
-                        change: ViewChange;
-                    };
-                };
                 "layout.align": {
                     type: "layout.align";
                     params: {
@@ -2314,6 +2318,10 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                     type: "assign lastClickedNode";
                     params: NonReducibleUnknown;
                 };
+                "reset lastClickedNode": {
+                    type: "reset lastClickedNode";
+                    params: NonReducibleUnknown;
+                };
                 "open source of focused or last clicked node": {
                     type: "open source of focused or last clicked node";
                     params: NonReducibleUnknown;
@@ -2399,6 +2407,18 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                     type: "emit: edgeEditingStarted";
                     params: NonReducibleUnknown;
                 };
+                "emit: paneClick": {
+                    type: "emit: paneClick";
+                    params: NonReducibleUnknown;
+                };
+                "emit: nodeClick": {
+                    type: "emit: nodeClick";
+                    params: NonReducibleUnknown;
+                };
+                "emit: edgeClick": {
+                    type: "emit: edgeClick";
+                    params: NonReducibleUnknown;
+                };
             }>, Values<{
                 isReady: {
                     type: "isReady";