@likec4/diagram 1.21.0 → 1.22.0

package/dist/likec4diagram/state/assign.js

@@ -277,7 +277,7 @@ function resetEdgeControlPoints({ context }) {
     if (!sourceCenter || !targetCenter) {
       return [];
     }
-    if (source == target) {
+    if (source === target) {
       const loopSize = 80;
       const centerOfTopBoundary = new VectorImpl(0, source.height || 0).mul(-0.5).add(sourceCenter);
       return [

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

@@ -1,4 +1,4 @@
-import { BBox, DiagramView, EdgeId, Fqn, NodeId, RelationId, StepEdgeId, ViewChange, ViewId, XYPoint, DiagramNode, Color, RelationshipLineType, NonEmptyArray } from '@likec4/core';
+import { BBox, DiagramView, EdgeId, Fqn, NodeId, StepEdgeId, ViewChange, ViewId, XYPoint, DiagramNode, RelationId, Color, RelationshipLineType, NonEmptyArray } from '@likec4/core';
 import { ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
 import { EdgeChange, NodeChange, Rect, Viewport, EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ActorRefFromLogic, SnapshotFrom, StateMachine, CallbackActorLogic, AnyEventObject, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, ActorLogic, Values, RequiredActorOptions, GetConcreteByKey, StopAction, CancelAction } from 'xstate';
@@ -70,10 +70,10 @@ export type Events = HotKeyEvent | {
     type: 'xyflow.init';
     instance: ReactFlowInstance<Types.Node, Types.Edge>;
 } | {
-    type: 'xyflow.applyNodeChages';
+    type: 'xyflow.applyNodeChanges';
     changes: NodeChange<Types.Node>[];
 } | {
-    type: 'xyflow.applyEdgeChages';
+    type: 'xyflow.applyEdgeChanges';
     changes: EdgeChange<Types.Edge>[];
 } | {
     type: 'xyflow.viewportMoved';
@@ -7600,9 +7600,9 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
         };
     };
     readonly on: {
-        readonly 'xyflow.applyNodeChages': {
+        readonly 'xyflow.applyNodeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyNodeChages";
+                type: "xyflow.applyNodeChanges";
                 changes: NodeChange<Types.Node>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {
@@ -7815,9 +7815,9 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'xyflow.applyEdgeChages': {
+        readonly 'xyflow.applyEdgeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyEdgeChages";
+                type: "xyflow.applyEdgeChanges";
                 changes: EdgeChange<Types.Edge>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {

package/dist/likec4diagram/state/machine.js

@@ -472,7 +472,7 @@ const diagramMachine = setup({
         pending: {
           entry: enqueueActions(({ enqueue }) => {
             enqueue.sendTo((c) => c.context.syncLayoutActorRef, { type: "stop" });
-            enqueue.stopChild("layout");
+            enqueue.stopChild("syncLayout");
             enqueue({
               type: "trigger:NavigateTo",
               params: ({ context }) => ({
@@ -495,15 +495,16 @@ const diagramMachine = setup({
                       }
                     }
                   });
+                  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.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 75 });
               }),
               target: "done"
             }
@@ -602,12 +603,12 @@ const diagramMachine = setup({
     }
   },
   on: {
-    "xyflow.applyNodeChages": {
+    "xyflow.applyNodeChanges": {
       actions: assign({
         xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes)
       })
     },
-    "xyflow.applyEdgeChages": {
+    "xyflow.applyEdgeChanges": {
       actions: assign({
         xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges)
       })
@@ -673,17 +674,19 @@ const diagramMachine = setup({
                   }
                 }
               });
+              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 });
             }
           } else {
             enqueue.sendTo((c) => c.context.syncLayoutActorRef, { type: "synced" });
-          }
-          if (isAnotherView || !context.viewportChangedManually) {
-            enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 90 });
+            if (!context.viewportChangedManually) {
+              enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
+            }
           }
           enqueue.assign(mergeXYNodesEdges);
           enqueue.assign({

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,18 +1,19 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { Stack, ActionIconGroup, Badge, Loader } from "@mantine/core";
-import { openSpotlight } from "@mantine/spotlight";
-import { IconSearch, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Group, Stack, ActionIconGroup, Badge, Loader } from "@mantine/core";
+import { IconMenu2, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
 import { clsx } from "clsx";
+import { LayoutGroup } from "framer-motion";
 import { memo } from "react";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramSyncLayoutState } from "../../../hooks/useDiagramActor.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { Tooltip, ActionIcon } from "./_shared.js";
+import { LikeC4Search } from "../search/LikeC4Search.js";
+import { ActionIcon, Tooltip } from "./_shared.js";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
 import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
 import { NavigationButtons } from "./NavigationButtons.js";
-import { actionIconGroup, panel } from "./styles.css.js";
+import { navigationButtons, actionIconGroup, panel } from "./styles.css.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
@@ -25,72 +26,86 @@ const Controls = memo(() => {
   }));
   const diagram = useDiagram();
   const {
-    onOpenSource
+    onOpenSource,
+    onBurgerMenuClick
   } = useDiagramEventHandlers();
   const {
     enableControls,
     enableSearch,
     enableNavigationButtons,
     enableReadOnly,
-    enableEdgeEditing,
     enableVscode
   } = useEnabledFeatures();
   const notReadOnly = !enableReadOnly;
   const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Stack,
+  return /* @__PURE__ */ jsxs(
+    Group,
     {
+      align: "flex-start",
       className: clsx(
         "react-flow__panel",
         panel,
         "likec4-top-left-panel"
       ),
-      align: "flex-start",
-      onClick: stopPropagation,
       gap: "xs",
+      onClick: stopPropagation,
       children: [
-        enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
-        /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
-          enableControls && enableSearch && /* @__PURE__ */ jsx(Tooltip, { label: "Search (Ctrl+F or ⌘+F)", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
+        /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
+          /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+            Group,
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                openSpotlight();
-              },
-              children: /* @__PURE__ */ jsx(IconSearch, {})
+              className: clsx(navigationButtons, "likec4-navigation-webview"),
+              gap: "xs",
+              children: [
+                onBurgerMenuClick && /* @__PURE__ */ jsx(
+                  ActionIcon,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onBurgerMenuClick();
+                    },
+                    children: /* @__PURE__ */ jsx(IconMenu2, {})
+                  }
+                ),
+                enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {})
+              ]
             }
           ) }),
-          enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
-              },
-              children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
-            }
-          ) }),
-          enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
-          enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
-            /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
-          ] }),
-          enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                diagram.fitDiagram();
-              },
-              children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-            }
-          ) })
+          /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
+            enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
+                },
+                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
+              }
+            ) }),
+            enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
+            enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+              /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
+            ] }),
+            enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  diagram.fitDiagram();
+                },
+                children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+              }
+            ) })
+          ] })
         ] }),
-        notReadOnly && /* @__PURE__ */ jsx(SyncLayoutBadge, {})
+        /* @__PURE__ */ jsxs(Group, { children: [
+          enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
+          notReadOnly && /* @__PURE__ */ jsx(SyncLayoutBadge, {})
+        ] })
       ]
     }
-  ) });
+  );
 });
 const SyncLayoutBadge = () => {
   const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -1,16 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconMenu2, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { LayoutGroup, AnimatePresence, m } from "framer-motion";
-import { Group } from "@mantine/core";
-import clsx from "clsx";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { AnimatePresence, m } from "framer-motion";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { ActionIcon } from "./_shared.js";
-import { navigationButtons } from "./styles.css.js";
-import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 const NavigationButtons = () => {
   const diagram = useDiagram();
-  const { onBurgerMenuClick } = useDiagramEventHandlers();
   const {
     hasStepBack,
     hasStepForward
@@ -18,74 +13,54 @@ const NavigationButtons = () => {
     hasStepBack: s.navigationHistory.currentIndex > 0,
     hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
   }));
-  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
-    Group,
-    {
-      className: clsx(navigationButtons, "likec4-navigation-webview"),
-      align: "flex-start",
-      gap: "xs",
-      children: [
-        onBurgerMenuClick && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    hasStepBack && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(-10px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0.05,
+          transform: "translateX(-10px)"
+        },
+        children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
             onClick: (e) => {
               e.stopPropagation();
-              onBurgerMenuClick();
+              diagram.navigate("back");
             },
-            children: /* @__PURE__ */ jsx(IconMenu2, {})
+            children: /* @__PURE__ */ jsx(IconChevronLeft, {})
           }
-        ),
-        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-          hasStepBack && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: true,
-              initial: { opacity: 0.05, transform: "translateX(-10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0.05,
-                transform: "translateX(-10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    diagram.navigate("back");
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-                }
-              )
-            },
-            "back"
-          ),
-          hasStepForward && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: true,
-              initial: { opacity: 0.05, transform: "translateX(10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    diagram.navigate("forward");
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronRight, {})
-                }
-              )
+        )
+      },
+      "back"
+    ),
+    hasStepForward && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(10px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0,
+          transform: "translateX(10px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("forward");
             },
-            "forward"
-          )
-        ] })
-      ]
-    }
-  ) });
+            children: /* @__PURE__ */ jsx(IconChevronRight, {})
+          }
+        )
+      },
+      "forward"
+    )
+  ] });
 };
 export {
   NavigationButtons

package/dist/likec4diagram/ui/controls/_shared.js

@@ -1,4 +1,4 @@
-import { Tooltip as Tooltip$1, ActionIcon as ActionIcon$1 } from "@mantine/core";
+import { ActionIcon as ActionIcon$1, Tooltip as Tooltip$1 } from "@mantine/core";
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -4,23 +4,24 @@ import { useLocalStorage } from "@mantine/hooks";
 import { IconMenu } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
+import { Link } from "../../../components/Link.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { card, title, description, container } from "./DiagramTitlePanel.css.js";
-import { Link } from "../../../base/Link.js";
 const selector = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",
   description: s.view.description,
-  links: s.view.links
+  links: s.view.links,
+  isNotActiveWalkthrough: s.activeWalkthrough === null
 });
 function DiagramTitlePanel() {
-  const { id, title: title$1, description: description$1, links } = useDiagramContext(selector);
+  const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
   });
   const toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     m.div,
     {
       initial: { opacity: 0.05, scale: 0.7 },

package/dist/likec4diagram/ui/index.d.ts

@@ -1,2 +1,4 @@
 export { Controls } from './controls/Controls';
 export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel';
+export { NotationPanel } from './notation/NotationPanel';
+export { DynamicViewWalkthrough } from './walkthrough/DynamicViewWalkthrough';

package/dist/likec4diagram/ui/search/ElementsColumn.css.d.ts

@@ -0,0 +1,15 @@
+export { focusable } from './_shared.css';
+export declare const treeContainer: string;
+export declare const treeNode: string;
+export declare const treeRoot: string;
+export declare const treeLabel: string;
+export declare const treeSubtree: string;
+export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const elementExpandIcon: string;
+export declare const elementButton: string;
+export declare const elementTitleAndId: string;
+export declare const elementTitle: string;
+export declare const elementId: string;
+export declare const elementDescription: string;
+export declare const elementIcon: string;
+export declare const elementViewsCount: string;

package/dist/likec4diagram/ui/search/ElementsColumn.css.js

@@ -0,0 +1,30 @@
+/* empty css                           */
+/* empty css                                  */
+var focusable = "_1cfw8gr4";
+var treeNode = "basone1";
+var treeRoot = "basone2";
+var treeLabel = "basone3";
+var treeSubtree = "basone4";
+var elementExpandIcon = "basone5";
+var elementButton = "basone6 _1cfw8gr3";
+var elementTitleAndId = "basone7";
+var elementTitle = "basone8 _1cfw8gr5";
+var elementId = "basone9";
+var elementDescription = "basonea _1cfw8gr6";
+var elementIcon = "basoneb";
+var elementViewsCount = "basonec";
+export {
+  elementButton,
+  elementDescription,
+  elementExpandIcon,
+  elementIcon,
+  elementId,
+  elementTitle,
+  elementTitleAndId,
+  elementViewsCount,
+  focusable,
+  treeLabel,
+  treeNode,
+  treeRoot,
+  treeSubtree
+};

package/dist/likec4diagram/ui/search/ElementsColumn.d.ts

@@ -0,0 +1 @@
+export declare function ElementsColumn(): import("react/jsx-runtime").JSX.Element;