@likec4/diagram 1.19.1 → 1.20.0

package/dist/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from "@mantine/core";
 import { IconLayoutCollage, IconLayoutBoardSplit, IconLayoutAlignLeft, IconLayoutAlignCenter, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignMiddle, IconLayoutAlignBottom, IconRouteOff } from "@tabler/icons-react";
-import { useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+import { useDiagram } from "../../../hooks/useDiagram.js";
 import { Tooltip, ActionIcon } from "./_shared.js";
 const Action = ({
   label,
@@ -9,7 +9,7 @@ const Action = ({
   onClick
 }) => /* @__PURE__ */ jsx(Tooltip, { label, withinPortal: false, position: "top", children: /* @__PURE__ */ jsx(ActionIcon, { onClick, children: icon }) });
 const ManualLayoutToolsButton = (props) => {
-  const store = useDiagramStoreApi();
+  const diagram = useDiagram();
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -34,7 +34,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Column");
+                  diagram.align("Column");
                 }
               }
             ),
@@ -45,7 +45,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Left");
+                  diagram.align("Left");
                 }
               }
             ),
@@ -56,7 +56,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Center");
+                  diagram.align("Center");
                 }
               }
             ),
@@ -67,7 +67,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Right");
+                  diagram.align("Right");
                 }
               }
             ),
@@ -78,7 +78,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Row");
+                  diagram.align("Row");
                 }
               }
             ),
@@ -89,7 +89,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Top");
+                  diagram.align("Top");
                 }
               }
             ),
@@ -100,7 +100,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Middle");
+                  diagram.align("Middle");
                 }
               }
             ),
@@ -111,7 +111,7 @@ const ManualLayoutToolsButton = (props) => {
                 icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
                 onClick: (e) => {
                   e.stopPropagation();
-                  store.getState().align("Bottom");
+                  diagram.align("Bottom");
                 }
               }
             )
@@ -123,7 +123,7 @@ const ManualLayoutToolsButton = (props) => {
               icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
               onClick: (e) => {
                 e.stopPropagation();
-                store.getState().resetEdgeControlPoints();
+                diagram.resetEdgeControlPoints();
               }
             }
           )

package/dist/likec4diagram/ui/controls/NavigationButtons.d.ts

@@ -0,0 +1 @@
+export declare const NavigationButtons: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,92 @@
+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 { 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
+  } = useDiagramContext((s) => ({
+    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(
+          ActionIcon,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onBurgerMenuClick();
+            },
+            children: /* @__PURE__ */ jsx(IconMenu2, {})
+          }
+        ),
+        /* @__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, {})
+                }
+              )
+            },
+            "forward"
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  NavigationButtons
+};

package/dist/{ui/top-left → likec4diagram/ui/controls}/_shared.js

@@ -7,7 +7,8 @@ const Tooltip = Tooltip$1.withProps({
   closeDelay: 120,
   label: "",
   children: null,
-  offset: 8
+  offset: 8,
+  withinPortal: false
 });
 const ActionIcon = ActionIcon$1.withProps({
   classNames: {

package/dist/{ui/top-left → likec4diagram/ui/controls}/styles.css.d.ts

@@ -1,4 +1,4 @@
-export declare const backwardForwardButtons: string;
+export declare const navigationButtons: string;
 export declare const panel: string;
 export declare const actionIconGroup: string;
 export declare const autolayoutIcon: string;

package/dist/likec4diagram/ui/controls/styles.css.js

@@ -0,0 +1,17 @@
+/* empty css                          */
+var navigationButtons = "o1xx0f0";
+var panel = "o1xx0f1";
+var actionIconGroup = "o1xx0f2";
+var autolayoutButton = "o1xx0f4";
+var autolayoutIndicator = "o1xx0f5";
+var spacingSliderBody = "o1xx0f6";
+var spacingSliderThumb = "o1xx0f7";
+export {
+  actionIconGroup,
+  autolayoutButton,
+  autolayoutIndicator,
+  navigationButtons,
+  panel,
+  spacingSliderBody,
+  spacingSliderThumb
+};

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

@@ -0,0 +1,11 @@
+/* empty css                                     */
+var container = "_1wkb4qe0";
+var card = "_1wkb4qe1";
+var title = "_1wkb4qe2";
+var description = "_1wkb4qe3";
+export {
+  card,
+  container,
+  description,
+  title
+};

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.d.ts

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

package/dist/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.js

@@ -4,9 +4,9 @@ import { useLocalStorage } from "@mantine/hooks";
 import { IconMenu } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { container, card, title, description } from "./DiagramTitlePanel.css.js";
 import { Link } from "./Link.js";
-import { useDiagramState } from "../hooks/useDiagramState.js";
 const selector = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",
@@ -14,7 +14,7 @@ const selector = (s) => ({
   links: s.view.links
 });
 function DiagramTitlePanel() {
-  const { id, title: title$1, description: description$1, links } = useDiagramState(selector);
+  const { id, title: title$1, description: description$1, links } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
@@ -155,5 +155,5 @@ function DiagramTitlePanel() {
   ) });
 }
 export {
-  DiagramTitlePanel as default
+  DiagramTitlePanel
 };

package/dist/likec4diagram/ui/diagram-title/Link.d.ts

@@ -0,0 +1,4 @@
+import { Link } from '@likec4/core';
+export declare function Link({ link }: {
+    link: Link;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Controls } from './controls/Controls';
+export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel';

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -0,0 +1,13 @@
+/* empty css                                 */
+var container = "r9c4gg0";
+var card = "r9c4gg1";
+var tabPanel = "r9c4gg2";
+var elementNotation = "r9c4gg3";
+var shapeBadge = "r9c4gg5";
+export {
+  card,
+  container,
+  elementNotation,
+  shapeBadge,
+  tabPanel
+};

package/dist/likec4diagram/ui/notation/NotationPanel.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const NotationPanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/{ui → likec4diagram/ui}/notation/NotationPanel.js

@@ -5,14 +5,15 @@ import { useLocalStorage } from "@mantine/hooks";
 import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
-import { useState } from "react";
-import { ceil, isNonNullish, isNullish } from "remeda";
-import { useDiagramState, useDiagramStoreApi } from "../../hooks/useDiagramState.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { ElementShapeSvg } from "../../xyflow/nodes/element/ElementShapeSvg.js";
-import { container, card, tabPanel, elementNotation, shapeSvg, shapeBadge } from "./NotationPanel.css.js";
-import { vars } from "../../theme-vars.css.js";
-import { useXYStore } from "../../hooks/useXYFlow.js";
+import { memo, useState } from "react";
+import { ceil, isNonNullish } from "remeda";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useXYStore } from "../../../hooks/useXYFlow.js";
+import { container, card, tabPanel, elementNotation, shapeBadge } from "./NotationPanel.css.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
+import { vars } from "../../../theme-vars.css.js";
 const ElementNotation = ({ value }) => {
   const {
     title,
@@ -20,7 +21,7 @@ const ElementNotation = ({ value }) => {
     shape = "rectangle"
   } = value;
   const [onlyKind, setOnlyKind] = useState(null);
-  const diagramStore = useDiagramStoreApi();
+  useDiagram();
   const w = 300;
   const h = 200;
   return /* @__PURE__ */ jsx(
@@ -31,15 +32,13 @@ const ElementNotation = ({ value }) => {
       py: "sm",
       className: elementNotation,
       mod: {
-        "data-likec4-color": color
+        "likec4-color": color
       },
       onMouseEnter: () => {
         setOnlyKind(null);
-        diagramStore.getState().highlightByElementNotation(value);
       },
       onMouseLeave: () => {
         setOnlyKind(null);
-        diagramStore.setState({ dimmed: /* @__PURE__ */ new Set() });
       },
       children: /* @__PURE__ */ jsxs(
         Group,
@@ -53,24 +52,18 @@ const ElementNotation = ({ value }) => {
               {
                 flex: "0 0 70px",
                 style: {
+                  position: "relative",
                   width: 70,
                   height: ceil(70 * (h / w), 0)
                 },
                 children: /* @__PURE__ */ jsx(
-                  "svg",
+                  ElementShape,
                   {
-                    className: clsx(
-                      shapeSvg
-                    ),
-                    viewBox: `0 0 ${w} ${h}`,
-                    children: /* @__PURE__ */ jsx(
-                      ElementShapeSvg,
-                      {
-                        shape,
-                        w,
-                        h
-                      }
-                    )
+                    data: {
+                      shape,
+                      width: w,
+                      height: h
+                    }
                   }
                 )
               }
@@ -82,11 +75,9 @@ const ElementNotation = ({ value }) => {
                   className: shapeBadge,
                   onMouseEnter: () => {
                     setOnlyKind(kind);
-                    diagramStore.getState().highlightByElementNotation(value, kind);
                   },
                   onMouseLeave: () => {
                     setOnlyKind(null);
-                    diagramStore.getState().highlightByElementNotation(value);
                   },
                   opacity: isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1,
                   color: isNonNullish(onlyKind) && onlyKind !== kind ? "gray" : vars.element.fill,
@@ -119,16 +110,17 @@ const selector = (s) => {
   return {
     id: s.view.id,
     notations: ((_a = s.view.notation) == null ? void 0 : _a.elements) ?? [],
-    isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough)
+    isVisible: true
+    // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
   };
 };
-function NotationPanel() {
+const NotationPanel = memo(() => {
   const height = useXYStore((s) => s.height);
   const {
     id,
     notations,
     isVisible
-  } = useDiagramState(selector);
+  } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-webview-collapsed",
     defaultValue: true
@@ -244,7 +236,7 @@ function NotationPanel() {
       id
     )
   ] });
-}
+});
 export {
   NotationPanel
 };

package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.js

@@ -1,8 +1,8 @@
 /* empty css                                          */
-var container = "_2jkb2y0";
-var buttons = "_2jkb2y1";
-var btn = "_2jkb2y3";
-var parallelStateFrame = "_2jkb2y4";
+var container = "totqfb0";
+var buttons = "totqfb1";
+var btn = "totqfb3";
+var parallelStateFrame = "totqfb4";
 export {
   btn,
   buttons,

package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.js

@@ -1,66 +1,41 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { nonNullable } from "@likec4/core";
 import { Box, Button, Badge, ButtonGroup } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
 import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
-import { isNonNull, isTruthy, first } from "remeda";
+import { isNonNull, isTruthy } from "remeda";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { parallelStateFrame, container, buttons, btn } from "./DynamicViewWalkthrough.css.js";
-import { useXYStore } from "../hooks/useXYFlow.js";
-import { useDiagramState, useDiagramStoreApi } from "../hooks/useDiagramState.js";
+import { useXYStore } from "../../../hooks/useXYFlow.js";
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s) => s.width <= 750);
   const {
-    nextDynamicStep,
-    stopDynamicView,
     isActive,
     isParallel,
     hasNext,
     hasPrevious
-  } = useDiagramState((s) => {
-    var _a, _b, _c;
+  } = useDiagramContext((s) => {
+    var _a;
     return {
-      nextDynamicStep: s.nextDynamicStep,
-      stopDynamicView: s.stopWalkthrough,
       isActive: isNonNull(s.activeWalkthrough),
       isParallel: isTruthy((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
-      hasNext: ((_b = s.activeWalkthrough) == null ? void 0 : _b.hasNext) ?? false,
-      hasPrevious: ((_c = s.activeWalkthrough) == null ? void 0 : _c.hasPrevious) ?? false
+      hasNext: s.xyedges.findIndex((e) => {
+        var _a2;
+        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
+      }) < s.xyedges.length - 1,
+      hasPrevious: s.xyedges.findIndex((e) => {
+        var _a2;
+        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
+      }) > 0
     };
   });
-  const diagramApi = useDiagramStoreApi();
-  useHotkeys(
-    isActive ? [
-      ["ArrowLeft", () => nextDynamicStep(-1)],
-      ["ArrowRight", () => nextDynamicStep()],
-      ["Escape", (e) => {
-        e.stopImmediatePropagation();
-        stopDynamicView();
-      }, { preventDefault: true }]
-    ] : [
-      ["ArrowLeft", () => nextDynamicStep()],
-      ["ArrowRight", () => nextDynamicStep()]
-    ]
-  );
+  const diagram = useDiagram();
   const buttonProps = {
     className: btn,
     size: isMobile ? "compact-md" : "lg",
     radius: isMobile ? "lg" : "xl"
   };
-  const startWalkthrough = (e) => {
-    e.stopPropagation();
-    const {
-      xyedges,
-      activateWalkthrough
-    } = diagramApi.getState();
-    const firstEdge = nonNullable(first(xyedges), "expected at least one edge");
-    activateWalkthrough(firstEdge.data.edge.id);
-  };
-  const nextStep = (increment = 1) => (e) => {
-    e.stopPropagation();
-    nextDynamicStep(increment);
-  };
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
     isParallel && /* @__PURE__ */ jsx(
       Box,
@@ -87,7 +62,7 @@ function DynamicViewWalkthrough() {
               ...buttonProps,
               className: clsx(buttons, btn),
               rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
-              onClick: startWalkthrough,
+              onClick: () => diagram.startWalkthrough(),
               px: "xl",
               children: "Start"
             }
@@ -117,7 +92,7 @@ function DynamicViewWalkthrough() {
                 ...buttonProps,
                 pl: "lg",
                 disabled: !hasPrevious,
-                onClick: nextStep(-1),
+                onClick: () => diagram.walkthroughStep("previous"),
                 children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
               }
             ),
@@ -128,7 +103,7 @@ function DynamicViewWalkthrough() {
                 px: hasNext ? "md" : "xl",
                 onClick: (e) => {
                   e.stopPropagation();
-                  stopDynamicView();
+                  diagram.stopWalkthrough();
                 },
                 children: [
                   hasNext && /* @__PURE__ */ jsx(IconPlayerStopFilled, {}),
@@ -141,7 +116,7 @@ function DynamicViewWalkthrough() {
               {
                 ...buttonProps,
                 pr: "lg",
-                onClick: nextStep(),
+                onClick: () => diagram.walkthroughStep("next"),
                 children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
               }
             )

package/dist/{xyflow → likec4diagram}/useLayoutConstraints.d.ts

@@ -1,7 +1,8 @@
 import { NonEmptyArray } from '@likec4/core';
-import { ReactFlowProps, XYPosition } from '@xyflow/react';
-import { XYStoreApi } from '../hooks/useXYFlow';
-import { DiagramFlowTypes } from './types';
+import { InternalNode as RFInternalNode, OnNodeDrag, XYPosition } from '@xyflow/react';
+import { XYStoreApi } from '../hooks';
+import { Types } from './types';
+type InternalNode = RFInternalNode<Types.Node>;
 declare abstract class Rect {
     static readonly LeftPadding = 40;
     static readonly RightPadding = 40;
@@ -24,17 +25,21 @@ declare abstract class Rect {
 declare class Compound extends Rect {
     protected readonly parent: Compound | null;
     readonly children: Rect[];
-    constructor(xynode: DiagramFlowTypes.InternalNode, parent?: Compound | null);
+    constructor(xynode: InternalNode, parent?: Compound | null);
 }
 type NodePositionUpdater = (nodes: Array<{
     rect: Rect | Compound;
-    node: DiagramFlowTypes.InternalNode;
+    node: InternalNode;
 }>) => void;
 export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNodeIds: NonEmptyArray<string>): {
     updateXYFlowNodes: () => void;
     onMove: (updater: NodePositionUpdater) => void;
 };
-type LayoutConstraints = Required<Pick<ReactFlowProps<DiagramFlowTypes.Node>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>;
+type LayoutConstraints = {
+    onNodeDragStart: OnNodeDrag<Types.Node>;
+    onNodeDrag: OnNodeDrag<Types.Node>;
+    onNodeDragStop: OnNodeDrag<Types.Node>;
+};
 /**
  * Keeps the layout constraints (parent nodes and children) when dragging a node
  */

package/dist/{xyflow → likec4diagram}/useLayoutConstraints.js

@@ -2,10 +2,13 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { nonNullable } from "@likec4/core";
+import "@xyflow/react";
 import { getNodeDimensions } from "@xyflow/system";
 import { useRef, useMemo } from "react";
 import { pipe, filter, map, hasAtLeast, isNullish } from "remeda";
-import { useDiagramStoreApi } from "../hooks/useDiagramState.js";
+import { useSyncedRef } from "@react-hookz/web";
+import { useDiagram } from "../hooks/useDiagram.js";
+import { useXYStoreApi } from "../hooks/useXYFlow.js";
 class Rect {
   constructor() {
     __publicField(this, "id");
@@ -21,10 +24,12 @@ class Rect {
     };
   }
   set positionAbsolute(pos) {
-    this.maxX += pos.x - this.minX;
-    this.maxY += pos.y - this.minY;
-    this.minX = pos.x;
-    this.minY = pos.y;
+    const x = Math.round(pos.x);
+    const y = Math.round(pos.y);
+    this.maxX += x - this.minX;
+    this.maxY += y - this.minY;
+    this.minX = x;
+    this.minY = y;
   }
   get dimensions() {
     return {
@@ -104,7 +109,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift();
     const isEditing = editingNodeIds.includes(xynode.id);
-    const shouldTraverse = !isEditing && xynode.type === "compound" && ancestorsOfDraggingNodes.has(xynode.id);
+    const shouldTraverse = !isEditing && (xynode.type === "compound-element" || xynode.type === "compound-deployment" || xynode.type === "view-group") && ancestorsOfDraggingNodes.has(xynode.id);
     const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
     rects.set(xynode.id, rect);
     if (shouldTraverse) {
@@ -187,13 +192,13 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   };
 }
 function useLayoutConstraints() {
-  const diagramApi = useDiagramStoreApi();
-  const solverRef = useRef();
+  const xystore = useXYStoreApi();
+  const diagram = useSyncedRef(useDiagram());
+  const solverRef = useRef(void 0);
   return useMemo(() => ({
     onNodeDragStart: (_event, xynode) => {
-      const { cancelSaveManualLayout, xystore } = diagramApi.getState();
+      diagram.current.cancelSaveManualLayout();
       const { nodeLookup } = xystore.getState();
-      cancelSaveManualLayout();
       const draggingNodes = pipe(
         Array.from(nodeLookup.values()),
         filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
@@ -215,10 +220,10 @@ function useLayoutConstraints() {
     onNodeDragStop: () => {
       var _a;
       (_a = solverRef.current) == null ? void 0 : _a.updateXYFlowNodes();
-      diagramApi.getState().scheduleSaveManualLayout();
+      diagram.current.scheduleSaveManualLayout();
       solverRef.current = void 0;
     }
-  }), [diagramApi]);
+  }), [xystore]);
 }
 export {
   createLayoutConstraints,