@likec4/diagram 1.34.1 → 1.35.0

package/dist/navigationpanel/controls/SearchControl.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { UnstyledButton } from '@mantine/core';
+import { isMacOs } from '@xyflow/system';
+import * as m from 'motion/react-m';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+
+function SearchControl() {
+  const diagram = useDiagram();
+  const isMac = isMacOs();
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      component: m.button,
+      layout: "position",
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openSearch();
+      },
+      whileTap: {
+        translateY: 1
+      },
+      className: cx(
+        "group",
+        hstack({
+          gap: "2xs",
+          paddingInline: "sm",
+          paddingBlock: "2xs",
+          rounded: "sm",
+          userSelect: "none",
+          cursor: "pointer",
+          color: {
+            base: "likec4.panel.action-icon.text",
+            _hover: "likec4.panel.action-icon.text.hover"
+          },
+          backgroundColor: {
+            base: "likec4.panel.action-icon.bg",
+            _hover: "likec4.panel.action-icon.bg.hover"
+          },
+          smDown: {
+            display: "none"
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(IconSearch, { size: 14, stroke: 2.5 }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            css: {
+              fontSize: "11px",
+              fontWeight: 600,
+              lineHeight: 1,
+              opacity: 0.8,
+              whiteSpace: "nowrap"
+            },
+            children: isMac ? "⌘ + K" : "Ctrl + K"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SearchControl };

package/dist/navigationpanel/controls/ToggleReadonly.d.ts

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

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { UnstyledButton } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { useDiagramContext, useDiagram } from '../../hooks/useDiagram.js';
+import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+
+const selector = (state) => ({
+  visible: state.features.enableReadOnly !== true,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
+});
+const ToggleReadonly = () => {
+  const { visible, isReadOnly } = useDiagramContext(selector);
+  const diagram = useDiagram();
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      component: m.button,
+      layout: "position",
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.toggleFeature("ReadOnly");
+      },
+      whileTap: {
+        translateY: 1
+      },
+      className: cx(
+        "group",
+        hstack({
+          gap: "2",
+          paddingInline: "2xs",
+          paddingBlock: "2xs",
+          rounded: "sm",
+          userSelect: "none",
+          cursor: "pointer",
+          color: {
+            base: "likec4.panel.action-icon.text",
+            _hover: "likec4.panel.action-icon.text.hover"
+          },
+          backgroundColor: {
+            _hover: "likec4.panel.action-icon.bg.hover"
+          }
+        })
+      ),
+      children: [
+        isReadOnly ? /* @__PURE__ */ jsx(IconLock, { size: 14, stroke: 2 }) : /* @__PURE__ */ jsx(IconLockOpen2, { size: 14, stroke: 2 }),
+        isReadOnly && /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: css({
+              fontSize: "11px",
+              fontWeight: 600,
+              lineHeight: 1,
+              opacity: 0.8
+            }),
+            children: "Unlock"
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { ToggleReadonly };

package/dist/navigationpanel/controls/index.d.ts

@@ -0,0 +1,5 @@
+export { BurgerButton } from './BurgerButton';
+export { NavigationButtons } from './NavigationButtons';
+export { OpenSource } from './OpenSource';
+export { SearchControl } from './SearchControl';
+export { ToggleReadonly } from './ToggleReadonly';

package/dist/navigationpanel/editorpanel/CenterCamera.d.ts

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

package/dist/navigationpanel/editorpanel/CenterCamera.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { PanelActionIcon } from '../_common.js';
+import { Tooltip } from './_common.js';
+import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+
+const CenterCamera = () => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Center camera", children: /* @__PURE__ */ jsx(PanelActionIcon, { onClick: () => diagram.fitDiagram(), children: /* @__PURE__ */ jsx(IconFocusCentered, {}) }) });
+};
+
+export { CenterCamera };

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.d.ts

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

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text, Flex, UnstyledButton } from '@mantine/core';
+import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
+import { useDebouncedCallback } from '@react-hookz/web';
+import { useState, forwardRef } from 'react';
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram.js';
+import { PanelActionIcon } from '../_common.js';
+import { Tooltip } from './_common.js';
+import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.js';
+import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
+import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
+
+const selector = (state) => ({
+  viewId: state.view.id,
+  autoLayout: state.view.autoLayout
+});
+const ChangeAutoLayoutButton = () => {
+  const { onChange } = useDiagramEventHandlers();
+  const diagram = useDiagram();
+  const [rootRef, setRootRef] = useState(null);
+  const [controlsRefs, setControlsRefs] = useState({});
+  const {
+    autoLayout,
+    viewId
+  } = useDiagramContext(selector);
+  const { ref, hovered: isSpacingHovered } = useHover();
+  const setControlRef = (name) => (node) => {
+    controlsRefs[name] = node;
+    setControlsRefs(controlsRefs);
+  };
+  const setAutoLayout = (direction) => (event) => {
+    event.stopPropagation();
+    onChange?.({
+      change: {
+        op: "change-autolayout",
+        layout: {
+          ...autoLayout,
+          direction
+        }
+      }
+    });
+  };
+  const setSpacing = (nodeSep, rankSep) => {
+    diagram.fitDiagram();
+    onChange?.({
+      change: {
+        op: "change-autolayout",
+        layout: {
+          ...autoLayout,
+          nodeSep,
+          rankSep
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "right-start",
+      clickOutsideEvents: [
+        "pointerdown"
+      ],
+      radius: "xs",
+      shadow: "lg",
+      offset: {
+        mainAxis: 10
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Change Auto Layout", children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) }) }) }),
+        /* @__PURE__ */ jsx(PopoverDropdown, { className: "likec4-top-left-panel", p: 8, pt: 6, opacity: isSpacingHovered ? 0.6 : 1, children: /* @__PURE__ */ jsxs(Box, { pos: "relative", ref: setRootRef, children: [
+          /* @__PURE__ */ jsx(
+            FloatingIndicator,
+            {
+              target: controlsRefs[autoLayout.direction],
+              parent: rootRef,
+              className: autolayoutIndicator
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text, { inline: true, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", justify: "stretch", maw: 160, children: [
+            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("TB"), onClick: setAutoLayout("TB"), children: "Top-Bottom" }),
+            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("BT"), onClick: setAutoLayout("BT"), children: "Bottom-Top" }),
+            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("LR"), onClick: setAutoLayout("LR"), children: "Left-Right" }),
+            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("RL"), onClick: setAutoLayout("RL"), children: "Right-Left" })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { my: 10, children: /* @__PURE__ */ jsx(Text, { inline: true, fz: "xs", c: "dimmed", fw: 500, children: "Spacing:" }) }),
+          /* @__PURE__ */ jsx(
+            SpacingSliders,
+            {
+              ref,
+              isVertical: autoLayout.direction === "TB" || autoLayout.direction === "BT",
+              nodeSep: autoLayout.nodeSep,
+              rankSep: autoLayout.rankSep,
+              onChange: setSpacing
+            },
+            viewId
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+const MAX_SPACING = 400;
+const SpacingSliders = forwardRef(({
+  isVertical,
+  nodeSep,
+  rankSep,
+  onChange
+}, _ref) => {
+  if (!isVertical) {
+    [nodeSep, rankSep] = [rankSep, nodeSep];
+  }
+  const propagateChange = useDebouncedCallback(
+    ({ x, y }) => {
+      if (!isVertical) {
+        [x, y] = [y, x];
+      }
+      onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING));
+    },
+    [onChange, isVertical],
+    250,
+    2e3
+  );
+  const [value, setValue] = useUncontrolled({
+    defaultValue: clampUseMovePosition({
+      x: (nodeSep ?? 100) / MAX_SPACING,
+      y: (rankSep ?? 120) / MAX_SPACING
+    }),
+    onChange: propagateChange
+  });
+  const { ref } = useMove(setValue);
+  let nodeSepValue = Math.round(value.x * MAX_SPACING);
+  let rankSepValue = Math.round(value.y * MAX_SPACING);
+  if (!isVertical) {
+    [nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue];
+  }
+  const mergedRef = useMergedRef(ref, _ref);
+  return /* @__PURE__ */ jsxs(Box, { ref: mergedRef, className: spacingSliderBody, pt: "100%", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: spacingSliderThumb,
+        style: {
+          left: `${value.x * 100}%`,
+          top: `${value.y * 100}%`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { pos: "absolute", left: 2, bottom: 2, children: /* @__PURE__ */ jsxs(Text, { component: "div", fz: 8, c: "dimmed", fw: 500, children: [
+      rankSepValue,
+      ", ",
+      nodeSepValue
+    ] }) })
+  ] });
+});
+
+export { ChangeAutoLayoutButton };

package/dist/navigationpanel/editorpanel/EditorPanel.d.ts

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

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { vstack } from '@likec4/styles/patterns';
+import { TooltipGroup } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { CenterCamera } from './CenterCamera.js';
+import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
+import { LayoutDriftNotification } from './LayoutDriftNotification.js';
+import { ManualLayoutToolsButton } from './ManualLayoutToolsButton.js';
+import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+
+function EditorPanel() {
+  const { enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: !enableReadOnly && /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layout: "position",
+      className: vstack({
+        gap: "sm",
+        layerStyle: "likec4.panel",
+        position: "relative",
+        cursor: "pointer",
+        padding: "4",
+        pointerEvents: "all"
+      }),
+      initial: {
+        opacity: 0,
+        translateX: -20
+      },
+      animate: {
+        opacity: 1,
+        translateX: 0
+      },
+      exit: {
+        opacity: 0,
+        translateX: -20
+      },
+      children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
+        /* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
+        /* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
+        /* @__PURE__ */ jsx(LayoutDriftNotification, {}),
+        /* @__PURE__ */ jsx(CenterCamera, {})
+      ] })
+    }
+  ) });
+}
+
+export { EditorPanel };

package/dist/navigationpanel/editorpanel/LayoutDriftNotification.d.ts

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

package/dist/navigationpanel/editorpanel/LayoutDriftNotification.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { HoverCard, HoverCardTarget, ActionIcon, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
+import { css } from '@likec4/styles/css';
+import { useDiagramContext } from '../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+
+const LayoutDriftNotification = () => {
+  const portalProps = useMantinePortalProps();
+  const hasLayoutDrift = useDiagramContext((c) => c.view.hasLayoutDrift ?? false);
+  if (!hasLayoutDrift) return null;
+  return /* @__PURE__ */ jsxs(
+    HoverCard,
+    {
+      position: "right-start",
+      openDelay: 200,
+      closeDelay: 100,
+      ...portalProps,
+      children: [
+        /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            color: "orange",
+            c: "orange",
+            className: css({
+              bg: "mantine.colors.orange.light"
+            }),
+            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
+          Notification,
+          {
+            color: "orange",
+            withBorder: false,
+            withCloseButton: false,
+            title: "Manual layout issues",
+            children: [
+              /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+                "View contains new elements or their sizes have changed,",
+                /* @__PURE__ */ jsx("br", {}),
+                "last manual layout can not be applied."
+              ] }),
+              /* @__PURE__ */ jsxs(Text, { mt: "xs", size: "sm", lh: "xs", children: [
+                "Update view predicates or remove ",
+                /* @__PURE__ */ jsx(Code, { children: "@likec4-generated" })
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { LayoutDriftNotification };

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.d.ts

@@ -0,0 +1,2 @@
+import { PopoverProps } from '@mantine/core';
+export declare const ManualLayoutToolsButton: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -0,0 +1,174 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { Popover, PopoverTarget, PopoverDropdown, TooltipGroup, ActionIcon } from '@mantine/core';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { PanelActionIcon } from '../_common.js';
+import { Tooltip } from './_common.js';
+import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
+
+const Action = ({
+  label,
+  icon,
+  onClick
+}) => /* @__PURE__ */ jsx(Tooltip, { label, withinPortal: false, position: "top", children: /* @__PURE__ */ jsx(
+  ActionIcon,
+  {
+    classNames: {
+      root: "action-icon",
+      icon: css({
+        "& > svg": {
+          width: "70%",
+          height: "70%"
+        }
+      })
+    },
+    variant: "subtle",
+    color: "gray",
+    onClick,
+    children: icon
+  }
+) });
+const ManualLayoutToolsButton = (props) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "right-start",
+      offset: {
+        mainAxis: 10,
+        crossAxis: -2
+      },
+      clickOutsideEvents: [
+        "pointerdown"
+      ],
+      radius: "sm",
+      shadow: "lg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Manual layouting tools", children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) }) }),
+        /* @__PURE__ */ jsx(
+          PopoverDropdown,
+          {
+            className: hstack({
+              gap: 1,
+              layerStyle: "likec4.panel",
+              p: "2"
+            }),
+            children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align in columns",
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { stroke: 1.2 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Column");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align left",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, { stroke: 1.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Left");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align center",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, { stroke: 1.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Center");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align right",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, { stroke: 1.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Right");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align in rows",
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { stroke: 1.5, style: { transform: "rotate(90deg)" } }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Row");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align top",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, { stroke: 1.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Top");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align middle",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, { stroke: 1.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Middle");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align bottom",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, { stroke: 1.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Bottom");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Reset all control points",
+                  icon: /* @__PURE__ */ jsx(IconRouteOff, { stroke: 1.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.resetEdgeControlPoints();
+                  }
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { ManualLayoutToolsButton };

package/dist/navigationpanel/editorpanel/_common.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TooltipProps } from '@mantine/core';
+export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;

package/dist/navigationpanel/editorpanel/_common.js

@@ -0,0 +1,14 @@
+import { Tooltip as Tooltip$1 } from '@mantine/core';
+
+const Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  openDelay: 600,
+  closeDelay: 120,
+  label: "",
+  children: null,
+  offset: 8,
+  position: "right"
+});
+
+export { Tooltip };

package/dist/navigationpanel/editorpanel/index.d.ts

@@ -0,0 +1 @@
+export { EditorPanel } from './EditorPanel';

package/dist/navigationpanel/editorpanel/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const navigationButtons: string;
+export declare const panel: string;
+export declare const actionIconGroup: string;
+export declare const autolayoutIcon: string;
+export declare const autolayoutButton: string;
+export declare const autolayoutIndicator: string;
+export declare const spacingSliderBody: string;
+export declare const spacingSliderThumb: string;