@likec4/diagram 1.34.2 → 1.36.0

package/dist/navigationpanel/controls/SearchControl.js

@@ -0,0 +1,70 @@
+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: {
+        scale: 0.95,
+        translateY: 1
+      },
+      className: cx(
+        "group",
+        hstack({
+          gap: "xxs",
+          paddingInline: "sm",
+          paddingBlock: "xxs",
+          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"
+          },
+          display: {
+            base: "none",
+            "@/md": "flex"
+          }
+        })
+      ),
+      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: "0.5",
+          paddingInline: "xxs",
+          paddingBlock: "xxs",
+          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/ViewDetailsCard.d.ts

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

package/dist/navigationpanel/controls/ViewDetailsCard.js

@@ -0,0 +1,232 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { HStack, Box, styled } from '@likec4/styles/jsx';
+import { hstack, vstack } from '@likec4/styles/patterns';
+import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { Link } from '../../components/Link.js';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+import { useNavigationActorSnapshot } from '../hooks.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import { ElementTag } from '../../base/primitives/element/ElementTags.js';
+import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+
+const selector = ({ context }) => {
+  const view = context.viewModel;
+  return {
+    id: view.id,
+    title: view.titleOrUntitled,
+    description: view.description,
+    tags: view.tags,
+    links: view.links,
+    relativePath: view.$view.relativePath
+  };
+};
+const ViewDetailsCard = (props) => {
+  const data = useNavigationActorSnapshot(selector);
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "bottom-end",
+      shadow: "xl",
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      trapFocus: true,
+      ...portalProps,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length }),
+        /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data })
+      ]
+    }
+  );
+};
+const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+  UnstyledButton,
+  {
+    component: m.button,
+    layout: "position",
+    whileTap: {
+      scale: 0.95,
+      translateY: 1
+    },
+    className: cx(
+      "group",
+      hstack({
+        gap: "2",
+        paddingInline: "xxs",
+        paddingBlock: "xxs",
+        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"
+        },
+        display: {
+          base: "none",
+          "@/xs": "flex"
+        }
+      }),
+      ``
+    ),
+    children: [
+      /* @__PURE__ */ jsx(IconId, { size: 16, stroke: 1.8 }),
+      linksCount > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "[1px]", children: [
+        /* @__PURE__ */ jsx(IconLink, { size: 14, stroke: 2 }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            css: {
+              fontSize: "11px",
+              fontWeight: 600,
+              lineHeight: 1,
+              opacity: 0.8
+            },
+            children: linksCount
+          }
+        )
+      ] })
+    ]
+  }
+) });
+const SectionHeader = styled("div", {
+  base: {
+    fontSize: "xs",
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    userSelect: "none",
+    mb: "xxs"
+  }
+});
+const ViewDetailsCardDropdown = ({
+  data: {
+    id,
+    title,
+    description,
+    tags,
+    links,
+    relativePath
+  }
+}) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(
+    Popover.Dropdown,
+    {
+      className: cx(
+        "nowheel nopan nodrag",
+        vstack({
+          margin: "xs",
+          layerStyle: "likec4.dropdown",
+          gap: "md",
+          padding: "md",
+          pointerEvents: "all",
+          maxWidth: "calc(100cqw - 32px)",
+          minWidth: "calc(100cqw - 50px)",
+          maxHeight: "calc(100cqh - 100px)",
+          width: "max-content",
+          cursor: "default",
+          "@/sm": {
+            minWidth: 400,
+            maxWidth: 550
+          },
+          "@/lg": {
+            maxWidth: 700
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", children: title }),
+          /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-start", mt: "1", children: [
+            /* @__PURE__ */ jsx(ViewBadge, { label: "id", value: id }),
+            /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag, i) => /* @__PURE__ */ jsx(
+              ElementTag,
+              {
+                tag,
+                cursor: "pointer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  diagram.openSearch(`#${tag}`);
+                }
+              },
+              tag
+            )) })
+          ] })
+        ] }),
+        links.length > 0 && /* @__PURE__ */ jsxs("section", { className: hstack({ alignItems: "baseline" }), children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Links" }),
+          /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
+        ] }),
+        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
+        description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
+          /* @__PURE__ */ jsx(
+            MarkdownBlock,
+            {
+              value: description,
+              fontSize: "sm",
+              emptyText: "No description",
+              className: css({
+                userSelect: "all"
+              })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const ViewBadge = ({
+  label,
+  value
+}) => {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", children: [
+    /* @__PURE__ */ jsx(ViewBadgeLabel, { children: label }),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "sm",
+        radius: "sm",
+        variant: "light",
+        color: "gray",
+        tt: "none",
+        fw: 500,
+        classNames: {
+          root: css({
+            width: "max-content",
+            overflow: "visible",
+            px: "1",
+            color: {
+              _light: "mantine.colors.gray[8]"
+            }
+          }),
+          label: css({
+            overflow: "visible"
+          }),
+          section: css({
+            opacity: 0.5,
+            userSelect: "none",
+            marginInlineEnd: "0.5"
+          })
+        },
+        children: value
+      }
+    )
+  ] });
+};
+const ViewBadgeLabel = styled("div", {
+  base: {
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    fontSize: "xxs",
+    userSelect: "none"
+  }
+});
+
+export { ViewDetailsCard };

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

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

package/dist/navigationpanel/dropdown/ProjectsMenu.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '@mantine/core';
+export declare function ProjectsMenu(props: ButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { HStack, Box } from '@likec4/styles/jsx';
+import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
+import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../likec4model/useLikeC4Project.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+
+function ProjectsMenu(props) {
+  const { projects, onProjectChange } = useLikeC4ProjectsContext();
+  const projectId = useLikeC4ProjectId();
+  if (projects.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", alignItems: "baseline", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        css: {
+          fontWeight: "400",
+          fontSize: "xxs",
+          color: "mantine.colors.dimmed",
+          userSelect: "none"
+        },
+        children: "Project"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Menu, { shadow: "md", position: "bottom-start", offset: { mainAxis: 2 }, closeOnItemClick: true, children: [
+      /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          tabIndex: -1,
+          autoFocus: false,
+          variant: "subtle",
+          size: "compact-xs",
+          color: "gray",
+          classNames: {
+            root: css({
+              fontWeight: "400",
+              fontSize: "xxs",
+              height: "auto",
+              lineHeight: 1.1,
+              color: {
+                _light: "mantine.colors.gray[9]"
+              }
+            }),
+            section: css({
+              '&:is([data-position="right"])': {
+                marginInlineStart: "1"
+              }
+            })
+          },
+          rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 12, stroke: 1.5 }),
+          ...props,
+          children: projectId
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MenuDropdown, { children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          onClick: (e) => {
+            if (projectId === id) {
+              e.stopPropagation();
+              return;
+            }
+            onProjectChange(id);
+          },
+          children: title ?? id
+        },
+        id
+      )) })
+    ] })
+  ] });
+}
+
+export { ProjectsMenu };

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;