@likec4/diagram 1.24.1 → 1.25.0

package/dist/hooks/useDiagram.js

@@ -124,6 +124,10 @@ function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, useCallbackRef(selector), compare);
 }
+function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
+  const syncLayoutActorRef = useDiagramActorSnapshot((s) => s.context.syncLayoutActorRef);
+  return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
+}
 function useDiagramContext(selector, compare = shallowEqual) {
   return useDiagramActorSnapshot(useCallbackRef((s) => selector(s.context)), compare);
 }
@@ -131,5 +135,6 @@ export {
   useDiagram,
   useDiagramActorRef,
   useDiagramActorSnapshot,
-  useDiagramContext
+  useDiagramContext,
+  useDiagramSyncLayoutState
 };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout';
 export { FramerMotionConfig } from './context/FramerMotionConfig';
 export { LikeC4Diagram } from './LikeC4Diagram';
 export type { LikeC4DiagramProps } from './LikeC4Diagram';

package/dist/likec4diagram/XYFlow.d.ts

@@ -1,11 +1,7 @@
+import { PropsWithChildren, NamedExoticComponent } from 'react';
 import { EnforceOptional } from 'type-fest/source/enforce-optional';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-import { NamedExoticComponent } from 'react';
 type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
-export type LikeC4DiagramXYFlowProps = Required<Picked>;
-export declare const LikeC4DiagramXYFlow: NamedExoticComponent<Required<{
-    background?: "solid" | "transparent" | "dots" | "lines" | "cross";
-    nodesDraggable?: boolean;
-    nodesSelectable?: boolean;
-}>>;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>;
+export declare const LikeC4DiagramXYFlow: NamedExoticComponent<LikeC4DiagramXYFlowProps>;
 export {};

package/dist/likec4diagram/XYFlow.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
@@ -6,11 +6,10 @@ import { shallowEqual } from "fast-equals";
 import { memo } from "react";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useDiagram, useDiagramContext } from "../hooks/useDiagram.js";
-import { edgeTypes } from "./custom/index.js";
+import { edgeTypes, nodeTypes } from "./custom/index.js";
 import { DiagramUI } from "./DiagramUI.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { nodeTypes } from "./custom/nodes/nodeTypes.js";
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized,
   nodes: ctx.xynodes,
@@ -29,7 +28,12 @@ const selectXYProps = (ctx) => ({
   }
 });
 const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport, b.viewport);
-const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
+const LikeC4DiagramXYFlow = memo(({
+  background,
+  nodesDraggable,
+  nodesSelectable,
+  children
+}) => {
   const diagram = useDiagram();
   const {
     initialized,
@@ -53,7 +57,7 @@ const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable
   const onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
       nodes,
@@ -120,7 +124,10 @@ const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable
       nodesSelectable,
       ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,
-      children: /* @__PURE__ */ jsx(DiagramUI, {})
+      children: [
+        /* @__PURE__ */ jsx(DiagramUI, {}),
+        children
+      ]
     }
   );
 }, shallowEqual);

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,14 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { nonNullable, isStepEdgeId } from "@likec4/core";
 import { useDebouncedEffect } from "@react-hookz/web";
+import { EdgeLabelRenderer } from "@xyflow/react";
 import clsx from "clsx";
 import { line, curveCatmullRomOpen } from "d3-shape";
 import { useState, useRef, useEffect } from "react";
 import { isTruthy, first, last } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { VectorImpl, vector } from "../../../utils/vector.js";
 import { isSamePoint, bezierControlPoints, bezierPath } from "../../../utils/xyflow.js";
-import { controlPoint, controlDragging } from "./edges.css.js";
+import { controlPointsContainer, controlPoint, controlDragging } from "./edges.css.js";
 import { NotePopover } from "./NotePopover.js";
 import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
 import { getNodeIntersectionFromCenterToPoint } from "./utils.js";
@@ -22,6 +24,7 @@ import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton
 const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
 const RelationshipEdge = customEdge((props) => {
   var _a;
+  const isReducedGraphicsMode = useIsReducedGraphics();
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
@@ -39,10 +42,11 @@ const RelationshipEdge = customEdge((props) => {
     target,
     targetX,
     targetY,
+    selected = false,
     data: {
       id: edgeId,
-      navigateTo,
       points,
+      hovered = false,
       active = false,
       dimmed = false,
       labelBBox,
@@ -50,6 +54,7 @@ const RelationshipEdge = customEdge((props) => {
       ...data
     }
   } = props;
+  const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
   const sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`);
   const targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`);
   const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position);
@@ -243,7 +248,7 @@ const RelationshipEdge = customEdge((props) => {
     const notes = props.data.notes;
     if (notes && isStepEdgeId(props.id) && ((_a = diagram.getContext().activeWalkthrough) == null ? void 0 : _a.stepId) === props.id) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(NotePopover, { notes, children: /* @__PURE__ */ jsx("div", { ...props2 }) });
-    } else if (enableRelationshipDetails) {
+    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(
         RelationshipsDropdownMenu,
         {
@@ -258,26 +263,6 @@ const RelationshipEdge = customEdge((props) => {
   }
   return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
     /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
-    enableEdgeEditing && /* @__PURE__ */ jsx(
-      "g",
-      {
-        onContextMenu: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        },
-        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
-          "circle",
-          {
-            onPointerDown: (e) => onControlPointerDown(i, e),
-            className: controlPoint,
-            cx: p.x,
-            cy: p.y,
-            r: 3
-          },
-          i
-        ))
-      }
-    ),
     /* @__PURE__ */ jsx(
       EdgeLabel,
       {
@@ -288,7 +273,7 @@ const RelationshipEdge = customEdge((props) => {
           translate: isModified ? "translate(-50%, 0)" : void 0
         },
         ...renderLabel && { renderRoot: renderLabel },
-        children: !isControlPointDragging && enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+        children: !isControlPointDragging && navigateTo && /* @__PURE__ */ jsx(
           EdgeActionButton,
           {
             ...props,
@@ -299,7 +284,27 @@ const RelationshipEdge = customEdge((props) => {
           }
         )
       }
-    )
+    ),
+    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(EdgeContainer, { component: "svg", className: controlPointsContainer, ...props, children: /* @__PURE__ */ jsx(
+      "g",
+      {
+        onContextMenu: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            onPointerDown: (e) => onControlPointerDown(i, e),
+            className: clsx("nodrag nopan", controlPoint),
+            cx: Math.round(p.x),
+            cy: Math.round(p.y),
+            r: 3
+          },
+          i
+        ))
+      }
+    ) }) })
   ] });
 });
 export {

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,2 +1,3 @@
+export declare const controlPointsContainer: string;
 export declare const controlPoint: string;
 export declare const controlDragging: string;

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -1,7 +1,9 @@
 /* empty css                         */
-var controlPoint = "_1fw3wl00";
-var controlDragging = "_1fw3wl01";
+var controlPointsContainer = "_1fw3wl00";
+var controlPoint = "_1fw3wl01";
+var controlDragging = "_1fw3wl02";
 export {
   controlDragging,
-  controlPoint
+  controlPoint,
+  controlPointsContainer
 };

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

@@ -1,7 +1,15 @@
+import { Types } from '../types';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { NodeProps } from '../../base';
 import { Position, XYPosition } from '@xyflow/system';
 import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
-export { nodeTypes } from './nodes/nodeTypes';
+export declare const nodeTypes: {
+    element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
+    deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
+    'compound-element': NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
+    'compound-deployment': NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
+    'view-group': NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;
+};
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{
         source: string;

package/dist/likec4diagram/custom/index.js

@@ -1,7 +1,16 @@
 import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from "./nodes/nodeTypes.js";
+const nodeTypes = {
+  element: ElementNode,
+  deployment: DeploymentNode,
+  "compound-element": CompoundElementNode,
+  "compound-deployment": CompoundDeploymentNode,
+  "view-group": ViewGroupNode
+};
 const edgeTypes = {
   relationship: RelationshipEdge
 };
 export {
-  edgeTypes
+  edgeTypes,
+  nodeTypes
 };

package/dist/likec4diagram/custom/nodes/nodeTypes.d.ts

@@ -1,10 +1,8 @@
 import { NodeProps } from '../../../base';
 import { Types } from '../../types';
 import { NamedExoticComponent } from 'react';
-export declare const nodeTypes: {
-    element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
-    deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
-    'compound-element': NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
-    'compound-deployment': NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
-    'view-group': NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;
-};
+export declare const ElementNode: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
+export declare const DeploymentNode: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
+export declare const CompoundElementNode: NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
+export declare const CompoundDeploymentNode: NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
+export declare const ViewGroupNode: NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;

package/dist/likec4diagram/custom/nodes/nodeTypes.js

@@ -8,8 +8,8 @@ import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolb
 import { customNode } from "../../../base/primitives/customNode.js";
 import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
 import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
-import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { CompoundDetailsButton } from "../../../base/primitives/compound/CompoundDetailsButton.js";
 import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
 import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
@@ -30,65 +30,67 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
     }
   );
 };
-const nodeTypes = {
-  element: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-    /* @__PURE__ */ jsx(ElementActions, { ...props }),
-    /* @__PURE__ */ jsx(
-      ElementDetailsButtonWithHandler,
-      {
-        fqn: props.data.modelFqn,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  deployment: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-    /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
-    !!props.data.modelFqn && /* @__PURE__ */ jsx(
-      ElementDetailsButtonWithHandler,
-      {
-        fqn: props.data.modelFqn,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  "compound-element": customNode((props) => {
-    const diagram = useDiagram();
-    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-      /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-      /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(
-        CompoundDetailsButton,
-        {
-          ...props,
-          onClick: (e) => {
-            e.stopPropagation();
-            diagram.openElementDetails(props.data.modelFqn, props.id);
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
-      /* @__PURE__ */ jsx(DefaultHandles, {})
-    ] });
-  }),
-  "compound-deployment": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+const ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+  /* @__PURE__ */ jsx(ElementActions, { ...props }),
+  /* @__PURE__ */ jsx(
+    ElementDetailsButtonWithHandler,
+    {
+      fqn: props.data.modelFqn,
+      ...props
+    }
+  ),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const DeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+  /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
+  !!props.data.modelFqn && /* @__PURE__ */ jsx(
+    ElementDetailsButtonWithHandler,
+    {
+      fqn: props.data.modelFqn,
+      ...props
+    }
+  ),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const CompoundElementNode = customNode((props) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
     /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  "view-group": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(
+      CompoundDetailsButton,
+      {
+        ...props,
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openElementDetails(props.data.modelFqn, props.id);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] }))
-};
+  ] });
+});
+const CompoundDeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+  /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
 export {
-  nodeTypes
+  CompoundDeploymentNode,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementNode,
+  ViewGroupNode
 };

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

@@ -1,27 +1,80 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Group, Stack, ActionIconGroup } from "@mantine/core";
-import { IconMenu2, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from "@mantine/core";
+import { IconFileSymlink, IconFocusCentered, IconMenu2 } from "@tabler/icons-react";
 import { clsx } from "clsx";
-import { LayoutGroup } from "framer-motion";
+import { LayoutGroup, AnimatePresence, m } from "framer-motion";
 import { memo } from "react";
-import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
+import { useControlsCustomLayout } from "../../../context/ControlsCustomLayout.js";
+import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from "../../../hooks/useDiagram.js";
 import { LikeC4Search } from "../search/LikeC4Search.js";
-import { ActionIcon, Tooltip } from "./_shared.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
 import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
 import { NavigationButtons } from "./NavigationButtons.js";
-import { navigationButtons, actionIconGroup, panel } from "./styles.css.js";
+import { actionIconGroup, navigationButtons, panel } from "./styles.css.js";
 import { ToggleReadonly } from "./ToggleReadonly.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
+const ControlsDefaultLayout = ({
+  burgerMenu,
+  navigationButtons: navigationButtons$1,
+  search,
+  actionsGroup
+}) => /* @__PURE__ */ jsxs(
+  Group,
+  {
+    component: m.div,
+    initial: {
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -16
+    },
+    animate: {
+      opacity: 1,
+      translateX: 0,
+      translateY: 0
+    },
+    exit: {
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -10
+    },
+    align: "flex-start",
+    className: clsx(
+      "react-flow__panel",
+      panel,
+      "likec4-top-left-panel"
+    ),
+    gap: "xs",
+    onClick: stopPropagation,
+    children: [
+      /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
+        /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+          Group,
+          {
+            className: clsx(navigationButtons, "likec4-navigation-webview"),
+            gap: "xs",
+            children: [
+              burgerMenu,
+              navigationButtons$1
+            ]
+          }
+        ) }),
+        actionsGroup
+      ] }),
+      /* @__PURE__ */ jsx(Box, { children: search })
+    ]
+  }
+);
 const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext((c) => ({
+  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
     viewId: c.view.id,
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
-    viewportChanged: c.viewportChangedManually
+    viewportChanged: c.viewportChangedManually,
+    isNotActiveWalkthrough: c.activeWalkthrough === null
   }));
   const diagram = useDiagram();
   const {
@@ -37,73 +90,59 @@ const Controls = memo(() => {
   } = useEnabledFeatures();
   const notReadOnly = !enableReadOnly;
   const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(
-    Group,
+  const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout;
+  return /* @__PURE__ */ jsx(LayoutGroup, { inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
+    ControlsLayout,
     {
-      align: "flex-start",
-      className: clsx(
-        "react-flow__panel",
-        panel,
-        "likec4-top-left-panel"
+      burgerMenu: onBurgerMenuClick && /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onBurgerMenuClick();
+          },
+          children: /* @__PURE__ */ jsx(IconMenu2, {})
+        }
       ),
-      gap: "xs",
-      onClick: stopPropagation,
-      children: [
-        /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
-          /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
-            Group,
-            {
-              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, {})
-              ]
-            }
-          ) }),
-          /* @__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 && /* @__PURE__ */ jsx(ToggleReadonly, {}),
-            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, {})
-              }
-            ) })
-          ] })
+      navigationButtons: enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
+      search: enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
+      syncInProgressBadge: /* @__PURE__ */ jsx(SyncLayoutBadge, {}),
+      actionsGroup: /* @__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 && /* @__PURE__ */ jsx(ToggleReadonly, {}),
+        enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
+        enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+          /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
         ] }),
-        /* @__PURE__ */ jsx(Group, { children: enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}) })
-      ]
+        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, {})
+          }
+        ) })
+      ] })
     }
-  );
+  ) }) });
 });
+const SyncLayoutBadge = () => {
+  const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));
+  if (!isPending) return null;
+  return /* @__PURE__ */ jsx(Badge, { color: "pink", radius: "xs", size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(Loader, { color: "orange", size: 8 }), children: "Pending..." });
+};
 export {
   Controls
 };