@likec4/diagram 1.47.0 → 1.48.0

package/dist/likec4diagram/state/machine.state.ready.focused.d.ts

@@ -134,9 +134,13 @@ export declare const focused: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>[];
-            target?: never;
         } | {
+            target: string;
             guard: "click: focused node";
             actions: ( ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
@@ -165,7 +169,6 @@ export declare const focused: {
                     id: "editor";
                 };
             }>, never, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
-            target: string;
         } | {
             actions: ( ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
@@ -198,7 +201,6 @@ export declare const focused: {
                 node: import("../types").Types.Node;
             }, Events, undefined, never, never, never, never, never>)[];
             guard?: never;
-            target?: never;
         })[];
         'focus.node': {
             actions: ActionFunction<Context, Events, Events, undefined, Values<{
@@ -316,40 +318,18 @@ export declare const focused: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>[];
         };
         'key.esc': {
             target: string;
         };
         'xyflow.paneClick': {
-            actions: ( ActionFunction<Context, Events, Events, undefined, Values<{
-                hotkeyActorLogic: {
-                    src: "hotkeyActorLogic";
-                    logic: HotkeyActorLogic;
-                    id: "hotkey";
-                };
-                overlaysActorLogic: {
-                    src: "overlaysActorLogic";
-                    logic: OverlaysActorLogic;
-                    id: "overlays";
-                };
-                searchActorLogic: {
-                    src: "searchActorLogic";
-                    logic: SearchActorLogic;
-                    id: "search";
-                };
-                mediaPrintActorLogic: {
-                    src: "mediaPrintActorLogic";
-                    logic: MediaPrintActorLogic;
-                    id: "mediaPrint";
-                };
-                editorActor: {
-                    src: "editorActor";
-                    logic: EditorActorLogic;
-                    id: "editor";
-                };
-            }>, never, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
             target: string;
+            actions: ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>[];
         };
         'notations.unhighlight': {
             actions: ActionFunction<Context, Events, Events, undefined, Values<{
@@ -467,6 +447,10 @@ export declare const focused: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>;
         };
         'tag.unhighlight': {
@@ -585,126 +569,11 @@ export declare const focused: {
                     type: "click: selected edge";
                     params: unknown;
                 };
-            }>, never, EmittedEvents>;
-        };
-        'update.view': {
-            guard: "is same view";
-            actions: ActionFunction<Context, Events, Events, undefined, Values<{
-                hotkeyActorLogic: {
-                    src: "hotkeyActorLogic";
-                    logic: HotkeyActorLogic;
-                    id: "hotkey";
-                };
-                overlaysActorLogic: {
-                    src: "overlaysActorLogic";
-                    logic: OverlaysActorLogic;
-                    id: "overlays";
-                };
-                searchActorLogic: {
-                    src: "searchActorLogic";
-                    logic: SearchActorLogic;
-                    id: "search";
-                };
-                mediaPrintActorLogic: {
-                    src: "mediaPrintActorLogic";
-                    logic: MediaPrintActorLogic;
-                    id: "mediaPrint";
-                };
-                editorActor: {
-                    src: "editorActor";
-                    logic: EditorActorLogic;
-                    id: "editor";
-                };
-            }>, never, Values<{
-                isReady: {
-                    type: "isReady";
-                    params: unknown;
-                };
-                "enabled: Editor": {
-                    type: "enabled: Editor";
-                    params: unknown;
-                };
-                "enabled: FitView": {
-                    type: "enabled: FitView";
-                    params: unknown;
-                };
-                "enabled: FocusMode": {
-                    type: "enabled: FocusMode";
-                    params: unknown;
-                };
-                "enabled: Readonly": {
-                    type: "enabled: Readonly";
-                    params: unknown;
-                };
-                "enabled: RelationshipDetails": {
-                    type: "enabled: RelationshipDetails";
-                    params: unknown;
-                };
-                "enabled: Search": {
-                    type: "enabled: Search";
-                    params: unknown;
-                };
-                "enabled: ElementDetails": {
-                    type: "enabled: ElementDetails";
-                    params: unknown;
-                };
-                "enabled: OpenSource": {
-                    type: "enabled: OpenSource";
-                    params: unknown;
-                };
-                "enabled: DynamicViewWalkthrough": {
-                    type: "enabled: DynamicViewWalkthrough";
-                    params: unknown;
-                };
-                "focus.node: autoUnfocus": {
-                    type: "focus.node: autoUnfocus";
-                    params: unknown;
-                };
-                "enabled: Overlays": {
-                    type: "enabled: Overlays";
-                    params: unknown;
-                };
-                "not readonly": {
-                    type: "not readonly";
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
                     params: unknown;
                 };
-                "is dynamic view": {
-                    type: "is dynamic view";
-                    params: unknown;
-                };
-                "is same view": {
-                    type: "is same view";
-                    params: unknown;
-                };
-                "is another view": {
-                    type: "is another view";
-                    params: unknown;
-                };
-                "click: node has modelFqn": {
-                    type: "click: node has modelFqn";
-                    params: unknown;
-                };
-                "click: selected node": {
-                    type: "click: selected node";
-                    params: unknown;
-                };
-                "click: same node": {
-                    type: "click: same node";
-                    params: unknown;
-                };
-                "click: focused node": {
-                    type: "click: focused node";
-                    params: unknown;
-                };
-                "click: node has connections": {
-                    type: "click: node has connections";
-                    params: unknown;
-                };
-                "click: selected edge": {
-                    type: "click: selected edge";
-                    params: unknown;
-                };
-            }>, never, EmittedEvents>[];
+            }>, never, EmittedEvents>;
         };
     };
 };

package/dist/likec4diagram/state/machine.state.ready.focused.js

@@ -1,5 +1,5 @@
-import { updateView, focusOnNodesAndEdges, resetLastClickedNode, emitPaneClick, assignFocusedNode, openSourceOfFocusedOrLastClickedNode, assignLastClickedNode, openElementDetails, emitNodeClick, stopHotKeyActor, undimEverything, cancelAutoUnfocusTimer, startHotKeyActor, startAutoUnfocusTimer } from './machine.actions.js';
-import { machine, targetState } from './machine.setup.js';
+import { focusOnNodesAndEdges, emitPaneClick, assignFocusedNode, openSourceOfFocusedOrLastClickedNode, assignLastClickedNode, openElementDetails, emitNodeClick, stopHotKeyActor, undimEverything, cancelAutoUnfocusTimer, startHotKeyActor, startAutoUnfocusTimer } from './machine.actions.js';
+import { machine, to, targetState } from './machine.setup.js';
 import { fitFocusedBounds, returnViewportBefore, cancelFitDiagram, assignViewportBefore } from './machine.actions.layout.js';
 import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
@@ -27,7 +27,7 @@ const focused = machine.createStateConfig({
   ],
   on: {
     "focus.autoUnfocus": {
-      target: targetState.idle
+      ...to.idle
     },
     "xyflow.nodeClick": [
       {
@@ -48,7 +48,7 @@ const focused = machine.createStateConfig({
           assignLastClickedNode(),
           emitNodeClick()
         ],
-        target: targetState.idle
+        ...to.idle
       },
       {
         actions: [
@@ -70,27 +70,19 @@ const focused = machine.createStateConfig({
       ]
     },
     "key.esc": {
-      target: targetState.idle
+      ...to.idle
     },
     "xyflow.paneClick": {
       actions: [
-        resetLastClickedNode(),
         emitPaneClick()
       ],
-      target: targetState.idle
+      ...to.idle
     },
     "notations.unhighlight": {
       actions: focusOnNodesAndEdges()
     },
     "tag.unhighlight": {
       actions: focusOnNodesAndEdges()
-    },
-    "update.view": {
-      guard: "is same view",
-      actions: [
-        updateView(),
-        focusOnNodesAndEdges()
-      ]
     }
   }
 });

package/dist/likec4diagram/state/machine.state.ready.idle.d.ts

@@ -10,6 +10,7 @@ export declare const idle: {
     id: string;
     on: {
         'xyflow.nodeClick': ({
+            target: string;
             guard: GuardPredicate<Context, {
                 type: "xyflow.nodeClick";
                 node: import("../types").Types.Node;
@@ -44,7 +45,6 @@ export declare const idle: {
                     id: "editor";
                 };
             }>, never, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
-            target: string;
         } | {
             guard: GuardPredicate<Context, {
                 type: "xyflow.nodeClick";
@@ -168,8 +168,11 @@ export declare const idle: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>[];
-            target?: never;
         } | {
             actions: ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
@@ -286,9 +289,12 @@ export declare const idle: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>[];
             guard?: never;
-            target?: never;
         })[];
         'xyflow.paneClick': {
             actions: ( ActionFunction<Context, Events, Events, undefined, Values<{
@@ -320,9 +326,7 @@ export declare const idle: {
             }>, never, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
         };
         'xyflow.paneDblClick': {
-            actions: ActionFunction<Context, {
-                type: "xyflow.paneDblClick";
-            }, Events, undefined, Values<{
+            actions: ( ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
                     src: "hotkeyActorLogic";
                     logic: HotkeyActorLogic;
@@ -348,96 +352,7 @@ export declare const idle: {
                     logic: EditorActorLogic;
                     id: "editor";
                 };
-            }>, never, Values<{
-                isReady: {
-                    type: "isReady";
-                    params: unknown;
-                };
-                "enabled: Editor": {
-                    type: "enabled: Editor";
-                    params: unknown;
-                };
-                "enabled: FitView": {
-                    type: "enabled: FitView";
-                    params: unknown;
-                };
-                "enabled: FocusMode": {
-                    type: "enabled: FocusMode";
-                    params: unknown;
-                };
-                "enabled: Readonly": {
-                    type: "enabled: Readonly";
-                    params: unknown;
-                };
-                "enabled: RelationshipDetails": {
-                    type: "enabled: RelationshipDetails";
-                    params: unknown;
-                };
-                "enabled: Search": {
-                    type: "enabled: Search";
-                    params: unknown;
-                };
-                "enabled: ElementDetails": {
-                    type: "enabled: ElementDetails";
-                    params: unknown;
-                };
-                "enabled: OpenSource": {
-                    type: "enabled: OpenSource";
-                    params: unknown;
-                };
-                "enabled: DynamicViewWalkthrough": {
-                    type: "enabled: DynamicViewWalkthrough";
-                    params: unknown;
-                };
-                "focus.node: autoUnfocus": {
-                    type: "focus.node: autoUnfocus";
-                    params: unknown;
-                };
-                "enabled: Overlays": {
-                    type: "enabled: Overlays";
-                    params: unknown;
-                };
-                "not readonly": {
-                    type: "not readonly";
-                    params: unknown;
-                };
-                "is dynamic view": {
-                    type: "is dynamic view";
-                    params: unknown;
-                };
-                "is same view": {
-                    type: "is same view";
-                    params: unknown;
-                };
-                "is another view": {
-                    type: "is another view";
-                    params: unknown;
-                };
-                "click: node has modelFqn": {
-                    type: "click: node has modelFqn";
-                    params: unknown;
-                };
-                "click: selected node": {
-                    type: "click: selected node";
-                    params: unknown;
-                };
-                "click: same node": {
-                    type: "click: same node";
-                    params: unknown;
-                };
-                "click: focused node": {
-                    type: "click: focused node";
-                    params: unknown;
-                };
-                "click: node has connections": {
-                    type: "click: node has connections";
-                    params: unknown;
-                };
-                "click: selected edge": {
-                    type: "click: selected edge";
-                    params: unknown;
-                };
-            }>, never, EmittedEvents>[];
+            }>, never, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
         };
         'focus.node': ({
             guard: "focus.node: autoUnfocus";

package/dist/likec4diagram/state/machine.state.ready.idle.js

@@ -1,8 +1,8 @@
-import { resetLastClickedNode, emitEdgeClick, assignFocusedNode, emitPaneClick, assignLastClickedNode, emitNodeClick, openSourceOfFocusedOrLastClickedNode, openElementDetails, emitOpenSource } from './machine.actions.js';
-import { machine, targetState } from './machine.setup.js';
+import { resetLastClickedNode, emitEdgeClick, assignFocusedNode, emitOpenSourceOfView, emitPaneClick, assignLastClickedNode, emitNodeClick, openSourceOfFocusedOrLastClickedNode, openElementDetails } from './machine.actions.js';
+import { machine, targetState, to } from './machine.setup.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
 import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
-import { fitDiagram } from './machine.actions.layout.js';
+import { raiseFitDiagram } from './machine.actions.layout.js';
 
 const idle = machine.createStateConfig({
   id: targetState.idle.slice(1),
@@ -23,7 +23,7 @@ const idle = machine.createStateConfig({
           assignFocusedNode(),
           emitNodeClick()
         ],
-        target: targetState.focused
+        ...to.focused
       },
       {
         guard: xstateGuards_cjsExports.and([
@@ -59,14 +59,9 @@ const idle = machine.createStateConfig({
     "xyflow.paneDblClick": {
       actions: [
         resetLastClickedNode(),
-        xstateActions_cjsExports.enqueueActions(({ context, enqueue, check }) => {
-          if (check("enabled: FitView")) {
-            enqueue(fitDiagram());
-          }
-          enqueue(
-            emitOpenSource({ view: context.view.id })
-          );
-        })
+        raiseFitDiagram(),
+        emitOpenSourceOfView(),
+        emitPaneClick()
       ]
     },
     "focus.node": [

package/dist/likec4diagram/state/machine.state.ready.js

@@ -1,13 +1,13 @@
-import { updateView, resetLastClickedNode, emitEdgeClick, assignLastClickedNode, emitNodeClick, emitPaneClick, undimEverything, tagHighlight, notationsHighlight, startEditing, onEdgeDoubleClick, stopEditing, onEdgeMouseLeave, onEdgeMouseEnter, onNodeMouseLeave, onNodeMouseEnter, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureEditorActor, assignToggledFeatures, emitOpenSource, openOverlay, cancelEditing, disableCompareWithLatest, triggerChange, resetEdgesControlPoints, layoutAlign, handleNavigate, closeAllOverlays, closeSearch, stopEditorActor } from './machine.actions.js';
-import { machine, targetState } from './machine.setup.js';
+import { resetLastClickedNode, emitOpenSourceOfView, emitPaneClick, onNodeMouseLeave, onNodeMouseEnter, assignLastClickedNode, emitNodeClick, onEdgeMouseLeave, onEdgeMouseEnter, startEditing, onEdgeDoubleClick, stopEditing, emitEdgeClick, updateView, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureEditorActor, assignToggledFeatures, undimEverything, tagHighlight, emitOpenSource, openOverlay, notationsHighlight, handleNavigate, cancelEditing, disableCompareWithLatest, triggerChange, resetEdgesControlPoints, layoutAlign, closeAllOverlays, closeSearch, stopEditorActor } from './machine.actions.js';
+import { machine, to } from './machine.setup.js';
 import { focused } from './machine.state.ready.focused.js';
 import { idle } from './machine.state.ready.idle.js';
 import { printing } from './machine.state.ready.printing.js';
 import { walkthrough } from './machine.state.ready.walkthrough.js';
 import { typedSystem } from './utils.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
+import { setViewport, cancelFitDiagram, raiseFitDiagram, fitDiagram } from './machine.actions.layout.js';
 import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
-import { setViewport, fitDiagram, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
 
 const ready = machine.createStateConfig({
   initial: "idle",
@@ -31,9 +31,6 @@ const ready = machine.createStateConfig({
     printing
   },
   on: {
-    "navigate.*": {
-      actions: handleNavigate()
-    },
     "layout.align": {
       guard: "not readonly",
       actions: [
@@ -60,35 +57,46 @@ const ready = machine.createStateConfig({
         })
       ]
     },
-    "xyflow.resized": {
-      guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
-      actions: [
-        cancelFitDiagram(),
-        raiseFitDiagram({ delay: 200 })
-      ]
+    "media.print.on": {
+      ...to.printing
+    },
+    "navigate.*": {
+      actions: handleNavigate()
+    },
+    "notations.highlight": {
+      actions: notationsHighlight()
+    },
+    "notations.unhighlight": {
+      actions: undimEverything()
     },
     "open.elementDetails": {
       actions: openOverlay()
     },
-    "open.relationshipsBrowser": {
+    "open.relationshipDetails": {
       actions: openOverlay()
     },
-    "open.relationshipDetails": {
+    "open.relationshipsBrowser": {
       actions: openOverlay()
     },
+    "open.search": {
+      guard: "enabled: Search",
+      actions: xstateActions_cjsExports.sendTo(typedSystem.searchActor, ({ event }) => ({
+        type: "open",
+        search: event.search
+      }))
+    },
     "open.source": {
       guard: "enabled: OpenSource",
       actions: emitOpenSource()
     },
-    "walkthrough.start": {
-      guard: "is dynamic view",
-      target: targetState.walkthrough
+    "tag.highlight": {
+      actions: tagHighlight()
+    },
+    "tag.unhighlight": {
+      actions: undimEverything()
     },
     "toggle.feature": {
-      actions: [
-        assignToggledFeatures(),
-        ensureEditorActor()
-      ]
+      actions: assignToggledFeatures()
     },
     "update.features": {
       actions: [
@@ -98,17 +106,26 @@ const ready = machine.createStateConfig({
         ensureEditorActor()
       ]
     },
-    "xyflow.nodeMouseEnter": {
-      actions: onNodeMouseEnter()
-    },
-    "xyflow.nodeMouseLeave": {
-      actions: onNodeMouseLeave()
-    },
-    "xyflow.edgeMouseEnter": {
-      actions: onEdgeMouseEnter()
+    "update.view": [
+      // Redirect to navigating state if received another view
+      {
+        guard: "is another view",
+        ...to.navigating
+      },
+      // Otherwise, just update the view in place
+      {
+        actions: updateView()
+      }
+    ],
+    "walkthrough.start": {
+      guard: "is dynamic view",
+      ...to.walkthrough
     },
-    "xyflow.edgeMouseLeave": {
-      actions: onEdgeMouseLeave()
+    "xyflow.edgeClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitEdgeClick()
+      ]
     },
     "xyflow.edgeDoubleClick": {
       guard: xstateGuards_cjsExports.and([
@@ -121,24 +138,32 @@ const ready = machine.createStateConfig({
         stopEditing(true)
       ]
     },
-    "notations.highlight": {
-      actions: notationsHighlight()
+    "xyflow.edgeMouseEnter": {
+      actions: onEdgeMouseEnter()
     },
-    "notations.unhighlight": {
-      actions: undimEverything()
+    "xyflow.edgeMouseLeave": {
+      actions: onEdgeMouseLeave()
     },
-    "tag.highlight": {
-      actions: tagHighlight()
+    "xyflow.fitDiagram": {
+      guard: "enabled: FitView",
+      actions: [
+        xstateActions_cjsExports.assign({
+          viewportChangedManually: false
+        }),
+        fitDiagram()
+      ]
     },
-    "tag.unhighlight": {
-      actions: undimEverything()
+    "xyflow.nodeClick": {
+      actions: [
+        assignLastClickedNode(),
+        emitNodeClick()
+      ]
     },
-    "open.search": {
-      guard: "enabled: Search",
-      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).searchActorRef, ({ event }) => ({
-        type: "open",
-        search: event.search
-      }))
+    "xyflow.nodeMouseEnter": {
+      actions: onNodeMouseEnter()
+    },
+    "xyflow.nodeMouseLeave": {
+      actions: onNodeMouseLeave()
     },
     "xyflow.paneClick": {
       actions: [
@@ -146,38 +171,24 @@ const ready = machine.createStateConfig({
         emitPaneClick()
       ]
     },
-    "xyflow.nodeClick": {
+    "xyflow.paneDblClick": {
       actions: [
-        assignLastClickedNode(),
-        emitNodeClick()
+        resetLastClickedNode(),
+        cancelFitDiagram(),
+        raiseFitDiagram(),
+        emitOpenSourceOfView(),
+        emitPaneClick()
       ]
     },
-    "xyflow.edgeClick": {
+    "xyflow.resized": {
+      guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
       actions: [
-        resetLastClickedNode(),
-        emitEdgeClick()
+        cancelFitDiagram(),
+        raiseFitDiagram({ delay: 150 })
       ]
     },
-    "xyflow.fitDiagram": {
-      guard: "enabled: FitView",
-      actions: fitDiagram()
-    },
     "xyflow.setViewport": {
       actions: setViewport()
-    },
-    "update.view": [
-      // Redirect to navigating state if received another view
-      {
-        guard: "is another view",
-        target: targetState.navigating
-      },
-      // Otherwise, just update the view in place
-      {
-        actions: updateView()
-      }
-    ],
-    "media.print.on": {
-      target: targetState.printing
     }
   }
 });