@likec4/diagram 1.18.0 → 1.19.1

package/dist/ui/DynamicViewWalkthrough.js

@@ -0,0 +1,156 @@
+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 { parallelStateFrame, container, buttons, btn } from "./DynamicViewWalkthrough.css.js";
+import { useXYStore } from "../hooks/useXYFlow.js";
+import { useDiagramState, useDiagramStoreApi } from "../hooks/useDiagramState.js";
+function DynamicViewWalkthrough() {
+  const isMobile = useXYStore((s) => s.width <= 750);
+  const {
+    nextDynamicStep,
+    stopDynamicView,
+    isActive,
+    isParallel,
+    hasNext,
+    hasPrevious
+  } = useDiagramState((s) => {
+    var _a, _b, _c;
+    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
+    };
+  });
+  const diagramApi = useDiagramStoreApi();
+  useHotkeys(
+    isActive ? [
+      ["ArrowLeft", () => nextDynamicStep(-1)],
+      ["ArrowRight", () => nextDynamicStep()],
+      ["Escape", (e) => {
+        e.stopImmediatePropagation();
+        stopDynamicView();
+      }, { preventDefault: true }]
+    ] : [
+      ["ArrowLeft", () => nextDynamicStep()],
+      ["ArrowRight", () => nextDynamicStep()]
+    ]
+  );
+  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,
+      {
+        layout: true,
+        component: m.div,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: clsx("react-flow__panel", parallelStateFrame)
+      },
+      "parallel-frame"
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: clsx("react-flow__panel", container),
+        onClick: (e) => e.stopPropagation(),
+        onDoubleClick: (e) => e.stopPropagation(),
+        children: [
+          !isActive && /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...buttonProps,
+              className: clsx(buttons, btn),
+              rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
+              onClick: startWalkthrough,
+              px: "xl",
+              children: "Start"
+            }
+          ),
+          isParallel && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              component: m.div,
+              initial: { opacity: 0.05, transform: "translateY(20px)" },
+              animate: { opacity: 1, transform: "translateY(0)" },
+              exit: {
+                opacity: 0,
+                transform: "translateY(20px)"
+              },
+              variant: "gradient",
+              size: isMobile ? "xs" : "md",
+              gradient: { from: "red", to: "orange", deg: 90 },
+              radius: "sm",
+              children: "parallel"
+            },
+            "parallel-badge"
+          ),
+          isActive && /* @__PURE__ */ jsxs(ButtonGroup, { className: buttons, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...buttonProps,
+                pl: "lg",
+                disabled: !hasPrevious,
+                onClick: nextStep(-1),
+                children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                ...buttonProps,
+                px: hasNext ? "md" : "xl",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  stopDynamicView();
+                },
+                children: [
+                  hasNext && /* @__PURE__ */ jsx(IconPlayerStopFilled, {}),
+                  !hasNext && "End"
+                ]
+              }
+            ),
+            hasNext && /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...buttonProps,
+                pr: "lg",
+                onClick: nextStep(),
+                children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DynamicViewWalkthrough
+};

package/dist/ui/EnsureMantine.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+type EnsureMantineProps = PropsWithChildren<{}>;
+export declare function EnsureMantine({ children }: EnsureMantineProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EnsureMantine {
+    var displayName: string;
+}
+export {};

package/dist/ui/EnsureMantine.js

@@ -0,0 +1,14 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { MantineContext } from "@mantine/core";
+import { useContext } from "react";
+function EnsureMantine({ children }) {
+  const mantineCtx = useContext(MantineContext);
+  if (!mantineCtx) {
+    throw new Error("LikeC4Diagram must be a child of MantineProvider");
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+EnsureMantine.displayName = "EnsureMantine";
+export {
+  EnsureMantine
+};

package/dist/ui/FramerMotionConfig.d.ts

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

package/dist/ui/FramerMotionConfig.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useMantineStyleNonce } from "@mantine/core";
+import { useId } from "@mantine/hooks";
+import { LazyMotion, domMax, MotionConfig, LayoutGroup } from "framer-motion";
+import "react";
+const FramerMotionConfig = ({ children }) => {
+  var _a;
+  const layoutId = useId();
+  const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", ...nonce && { nonce }, children: /* @__PURE__ */ jsx(LayoutGroup, { id: layoutId, children }) }) });
+};
+export {
+  FramerMotionConfig
+};

package/dist/ui/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/ui/Link.js

@@ -0,0 +1,36 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Group, Box, Anchor, CopyButton, Button } from "@mantine/core";
+function Link({ link }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "center", gap: "sm", children: [
+    /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+      Anchor,
+      {
+        href: link.url,
+        target: "_blank",
+        fz: "xs",
+        truncate: "end",
+        display: "inline-block",
+        w: "100%",
+        onClick: (e) => e.stopPropagation(),
+        children: link.title || link.url
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CopyButton, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "compact-xs",
+        fz: "10",
+        variant: "light",
+        onClick: (e) => {
+          e.stopPropagation();
+          copy();
+        },
+        color: copied ? "teal" : "gray",
+        children: copied ? "copied" : "copy"
+      }
+    ) })
+  ] }, link.url) });
+}
+export {
+  Link
+};

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

@@ -0,0 +1,6 @@
+export declare const container: string;
+export declare const card: string;
+export declare const tabPanel: string;
+export declare const elementNotation: string;
+export declare const shapeSvg: string;
+export declare const shapeBadge: string;

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

@@ -0,0 +1,16 @@
+/* empty css                                                    */
+/* empty css                                 */
+var container = "_1ncdyfa0";
+var card = "_1ncdyfa1";
+var tabPanel = "_1ncdyfa2";
+var elementNotation = "_1ncdyfa3";
+var shapeSvg = "_1ncdyfa4";
+var shapeBadge = "_1ncdyfa5";
+export {
+  card,
+  container,
+  elementNotation,
+  shapeBadge,
+  shapeSvg,
+  tabPanel
+};

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

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

package/dist/ui/notation/NotationPanel.js

@@ -0,0 +1,250 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "@likec4/core";
+import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from "@mantine/core";
+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";
+const ElementNotation = ({ value }) => {
+  const {
+    title,
+    color = "primary",
+    shape = "rectangle"
+  } = value;
+  const [onlyKind, setOnlyKind] = useState(null);
+  const diagramStore = useDiagramStoreApi();
+  const w = 300;
+  const h = 200;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      shadow: "none",
+      px: "xs",
+      py: "sm",
+      className: elementNotation,
+      mod: {
+        "data-likec4-color": color
+      },
+      onMouseEnter: () => {
+        setOnlyKind(null);
+        diagramStore.getState().highlightByElementNotation(value);
+      },
+      onMouseLeave: () => {
+        setOnlyKind(null);
+        diagramStore.setState({ dimmed: /* @__PURE__ */ new Set() });
+      },
+      children: /* @__PURE__ */ jsxs(
+        Group,
+        {
+          gap: "sm",
+          align: "stretch",
+          wrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                flex: "0 0 70px",
+                style: {
+                  width: 70,
+                  height: ceil(70 * (h / w), 0)
+                },
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: clsx(
+                      shapeSvg
+                    ),
+                    viewBox: `0 0 ${w} ${h}`,
+                    children: /* @__PURE__ */ jsx(
+                      ElementShapeSvg,
+                      {
+                        shape,
+                        w,
+                        h
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { gap: 4, flex: 1, children: [
+              /* @__PURE__ */ jsx(Group, { gap: 4, flex: "0 0 auto", children: value.kinds.map((kind) => /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  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,
+                  children: kind
+                },
+                kind
+              )) }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  component: "div",
+                  fz: "sm",
+                  fw: 500,
+                  lh: "1.25",
+                  style: {
+                    textWrap: "pretty"
+                  },
+                  children: title
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+const selector = (s) => {
+  var _a;
+  return {
+    id: s.view.id,
+    notations: ((_a = s.view.notation) == null ? void 0 : _a.elements) ?? [],
+    isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough)
+  };
+};
+function NotationPanel() {
+  const height = useXYStore((s) => s.height);
+  const {
+    id,
+    notations,
+    isVisible
+  } = useDiagramState(selector);
+  const [isCollapsed, setCollapsed] = useLocalStorage({
+    key: "notation-webview-collapsed",
+    defaultValue: true
+  });
+  const hasNotations = notations.length > 0;
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    !hasNotations && isVisible && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: { opacity: 0.75, translateX: "50%" },
+        animate: { opacity: 1, translateX: 0 },
+        exit: {
+          translateX: "100%",
+          opacity: 0.6
+        },
+        className: clsx("react-flow__panel", container),
+        children: /* @__PURE__ */ jsx(Tooltip, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            size: "lg",
+            variant: "light",
+            color: "orange",
+            radius: "md",
+            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
+          }
+        ) })
+      },
+      "empty"
+    ),
+    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: { opacity: 0.75, translateX: "50%" },
+        animate: { opacity: 1, translateX: 0 },
+        exit: {
+          translateX: "100%",
+          opacity: 0.6
+        },
+        className: clsx("react-flow__panel", container),
+        children: /* @__PURE__ */ jsx(Tooltip, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            size: "lg",
+            variant: "default",
+            color: "gray",
+            radius: "md",
+            onClick: () => setCollapsed(false),
+            children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
+          }
+        ) })
+      },
+      "collapsed"
+    ),
+    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: {
+          opacity: 0.75,
+          // translateX: '50%',
+          scale: 0.2
+        },
+        animate: { opacity: 1, scale: 1 },
+        exit: {
+          opacity: 0,
+          scale: 0.25
+        },
+        className: clsx("react-flow__panel", container),
+        style: {
+          transformOrigin: "bottom right"
+        },
+        children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            radius: "sm",
+            withBorder: true,
+            shadow: "lg",
+            className: card,
+            children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "first", radius: "xs", children: [
+              /* @__PURE__ */ jsxs(TabsList, { children: [
+                /* @__PURE__ */ jsx(
+                  ActionIcon,
+                  {
+                    size: "md",
+                    variant: "subtle",
+                    color: "gray",
+                    ml: 2,
+                    style: {
+                      alignSelf: "center"
+                    },
+                    onClick: () => setCollapsed(true),
+                    children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(TabsTab, { value: "first", fz: "xs", children: "Elements" }),
+                /* @__PURE__ */ jsx(TabsTab, { value: "second", fz: "xs", disabled: true, children: "Relationships" })
+              ] }),
+              /* @__PURE__ */ jsx(TabsPanel, { value: "first", className: tabPanel, hidden: isCollapsed, children: /* @__PURE__ */ jsx(
+                ScrollAreaAutosize,
+                {
+                  viewportProps: {
+                    style: {
+                      maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n }, i)) })
+                }
+              ) })
+            ] })
+          }
+        )
+      },
+      id
+    )
+  ] });
+}
+export {
+  NotationPanel
+};

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

@@ -0,0 +1 @@
+export { NotationPanel as default } from './NotationPanel';

package/dist/ui/top-left/ChangeAutoLayoutButton.d.ts

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

package/dist/ui/top-left/ChangeAutoLayoutButton.js

@@ -0,0 +1,159 @@
+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 { IconLayoutDashboard } from "@tabler/icons-react";
+import { useState, forwardRef } from "react";
+import { useDiagramStoreApi, useDiagramState } from "../../hooks/useDiagramState.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
+import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from "./styles.css.js";
+const selector = (state) => ({
+  viewId: state.view.id,
+  autoLayout: state.view.autoLayout
+});
+const ChangeAutoLayoutButton = (props) => {
+  const store = useDiagramStoreApi();
+  const [rootRef, setRootRef] = useState(null);
+  const [controlsRefs, setControlsRefs] = useState({});
+  const {
+    autoLayout,
+    viewId
+  } = useDiagramState(selector);
+  const { ref, hovered: isSpacingHovered } = useHover();
+  const setControlRef = (name) => (node) => {
+    controlsRefs[name] = node;
+    setControlsRefs(controlsRefs);
+  };
+  const setAutoLayout = (direction) => (event) => {
+    var _a, _b;
+    event.stopPropagation();
+    (_b = (_a = store.getState()).onChange) == null ? void 0 : _b.call(_a, {
+      change: {
+        op: "change-autolayout",
+        layout: {
+          ...autoLayout,
+          direction
+        }
+      }
+    });
+  };
+  const setSpacing = (nodeSep, rankSep) => {
+    var _a, _b;
+    store.setState({
+      viewportChanged: false
+    });
+    (_b = (_a = store.getState()).onChange) == null ? void 0 : _b.call(_a, {
+      change: {
+        op: "change-autolayout",
+        layout: {
+          ...autoLayout,
+          nodeSep,
+          rankSep
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "right-start",
+      clickOutsideEvents: [
+        "pointerdown"
+      ],
+      radius: "xs",
+      shadow: "lg",
+      offset: {
+        mainAxis: 10
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Change Auto Layout", children: /* @__PURE__ */ jsx(ActionIcon, { 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
+};