@likec4/diagram 1.34.2 → 1.36.0

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: "xs",
+        layerStyle: "likec4.panel",
+        position: "relative",
+        cursor: "pointer",
+        padding: "xxs",
+        pointerEvents: "all"
+      }),
+      initial: {
+        opacity: 0,
+        translateX: -20
+      },
+      animate: {
+        opacity: 1,
+        translateX: 0
+      },
+      exit: {
+        opacity: 0,
+        translateX: -20
+      },
+      children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 600, closeDelay: 120, 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,173 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { Popover, PopoverTarget, PopoverDropdown, TooltipGroup } from '@mantine/core';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.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(
+  PanelActionIcon,
+  {
+    classNames: {
+      root: "action-icon",
+      icon: css({
+        "& > svg": {
+          width: "70%",
+          height: "70%"
+        }
+      })
+    },
+    onClick,
+    children: icon
+  }
+) });
+const ManualLayoutToolsButton = (props) => {
+  const diagram = useDiagram();
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "right",
+      offset: {
+        mainAxis: 12
+      },
+      clickOutsideEvents: [
+        "pointerdown"
+      ],
+      ...portalProps,
+      ...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: "0.5",
+              layerStyle: "likec4.panel",
+              padding: "1",
+              pointerEvents: "all"
+            }),
+            children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align in columns",
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Column");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align left",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Left");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align center",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Center");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align right",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Right");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align in rows",
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Row");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align top",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Top");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align middle",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Middle");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Align bottom",
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.align("Bottom");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: "Reset all control points",
+                  icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
+                  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;

package/dist/navigationpanel/editorpanel/styles.js

@@ -0,0 +1,79 @@
+import { css } from '@likec4/styles/css';
+
+css({
+  gap: "xxs",
+  _empty: {
+    display: "none"
+  }
+});
+css({
+  top: "md",
+  left: "md",
+  margin: "0",
+  pointerEvents: "none",
+  "& :where(button, .action-icon, [role='dialog'])": {
+    pointerEvents: "all"
+  },
+  ["& .action-icon"]: {
+    ["--ai-size"]: "2rem"
+  },
+  ["& .tabler-icon"]: {
+    width: "65%",
+    height: "65%"
+  },
+  _reduceGraphics: {
+    "& .action-icon": {
+      "--ai-radius": "0px"
+    }
+  }
+});
+css({
+  shadow: {
+    base: "md",
+    _whenPanning: "none"
+  }
+});
+css({
+  ["& .tabler-icon"]: {
+    width: "65%",
+    height: "65%"
+  }
+});
+const autolayoutButton = css({
+  flex: "1 1 40%",
+  textAlign: "center",
+  fontWeight: 500,
+  padding: "[4px 6px]",
+  fontSize: "11px",
+  zIndex: 1
+});
+const autolayoutIndicator = css({
+  background: "mantine.colors.gray[2]",
+  borderRadius: "sm",
+  border: `1px solid`,
+  borderColor: "mantine.colors.gray[4]",
+  _dark: {
+    background: "mantine.colors.dark[5]",
+    borderColor: "mantine.colors.dark[4]"
+  }
+});
+const spacingSliderBody = css({
+  position: "relative",
+  borderRadius: "sm",
+  background: "mantine.colors.gray[3]",
+  boxShadow: "inset 1px 1px 3px 0px #00000024",
+  _dark: {
+    background: "mantine.colors.dark[7]"
+  }
+});
+const spacingSliderThumb = css({
+  position: "absolute",
+  width: 8,
+  height: 8,
+  border: `2px solid`,
+  borderColor: "mantine.colors.gray[5]",
+  borderRadius: 3,
+  transform: "translate(-50%, -50%)"
+});
+
+export { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb };

package/dist/navigationpanel/hooks.d.ts

@@ -0,0 +1,20 @@
+import { ViewId } from '@likec4/core';
+import { DependencyList, Provider } from 'react';
+import { NavigationPanelActorContext, NavigationPanelActorEvent, NavigationPanelActorRef, NavigationPanelActorSnapshot } from './actor';
+export declare const NavigationPanelActorContextProvider: Provider<NavigationPanelActorRef>;
+export declare const useNavigationActorRef: () => NavigationPanelActorRef;
+export declare function useNavigationActorSnapshot<T = unknown>(selector: (context: NavigationPanelActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
+export declare function useNavigationActorContext<T = unknown>(selector: (context: NavigationPanelActorContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
+export interface NavigationActor {
+    readonly actorRef: NavigationPanelActorRef;
+    send: (event: NavigationPanelActorEvent) => void;
+    selectFolder: (folderPath: string) => void;
+    selectView: (viewId: ViewId) => void;
+    /**
+     * If the navigation dropdown is opened
+     */
+    isOpened: () => boolean;
+    clearSearch: () => void;
+    closeDropdown: () => void;
+}
+export declare function useNavigationActor(): NavigationActor;

package/dist/navigationpanel/hooks.js

@@ -0,0 +1,38 @@
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { createContext, useMemo, useContext } from 'react';
+
+const NavigationPanelActorSafeContext = createContext(null);
+NavigationPanelActorSafeContext.displayName = "NavigationPanelActorSafeContext";
+const NavigationPanelActorContextProvider = NavigationPanelActorSafeContext.Provider;
+const useNavigationActorRef = () => {
+  const ctx = useContext(NavigationPanelActorSafeContext);
+  if (ctx === null) {
+    throw new Error("NavigationPanelActorRef is not found in the context");
+  }
+  return ctx;
+};
+function useNavigationActorSnapshot(selector, compare = shallowEqual, deps) {
+  const actorRef = useNavigationActorRef();
+  return useSelector(actorRef, selector, compare);
+}
+function useNavigationActorContext(selector, compare = shallowEqual, deps) {
+  return useNavigationActorSnapshot((snapshot) => selector(snapshot.context), compare);
+}
+function useNavigationActor() {
+  const actorRef = useNavigationActorRef();
+  return useMemo(() => ({
+    actorRef,
+    send: (event) => actorRef.send(event),
+    selectFolder: (folderPath) => actorRef.send({ type: "select.folder", folderPath }),
+    selectView: (viewId) => actorRef.send({ type: "select.view", viewId }),
+    isOpened: () => {
+      const snapshot = actorRef.getSnapshot();
+      return snapshot.hasTag("active");
+    },
+    clearSearch: () => actorRef.send({ type: "searchQuery.change", value: "" }),
+    closeDropdown: () => actorRef.send({ type: "dropdown.dismiss" })
+  }), [actorRef]);
+}
+
+export { NavigationPanelActorContextProvider, useNavigationActor, useNavigationActorContext, useNavigationActorRef, useNavigationActorSnapshot };

package/dist/navigationpanel/index.d.ts

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

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

@@ -0,0 +1,16 @@
+import { RecipeRuntimeFn } from '@likec4/styles/types';
+export declare const breadcrumbTitle: RecipeRuntimeFn<{
+    truncate: {
+        true: {
+            truncate: boolean;
+        };
+    };
+    dimmed: {
+        true: {
+            color: {
+                base: "mantine.colors.dimmed";
+                _hover: "mantine.colors.text";
+            };
+        };
+    };
+}>;

package/dist/navigationpanel/styles.css.js

@@ -0,0 +1,30 @@
+import { cva } from '@likec4/styles/css';
+
+const breadcrumbTitle = cva({
+  base: {
+    fontSize: "sm",
+    fontWeight: "500",
+    transition: "fast",
+    color: {
+      base: "mantine.colors.text/90",
+      _hover: "mantine.colors.text"
+    }
+  },
+  variants: {
+    truncate: {
+      "true": {
+        truncate: true
+      }
+    },
+    dimmed: {
+      "true": {
+        color: {
+          base: "mantine.colors.dimmed",
+          _hover: "mantine.colors.text"
+        }
+      }
+    }
+  }
+});
+
+export { breadcrumbTitle };

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.d.ts

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

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { Button, Badge, Portal } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { isTruthy } from 'remeda';
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram.js';
+import { Tooltip } from '../_common.js';
+import { useNavigationActor } from '../hooks.js';
+import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
+import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
+import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+
+const TriggerWalkthroughButton = Button.withProps({
+  // Button is polymorphic, but we dont want it to inherit the motion props
+  component: m.button,
+  // @ts-expect-error
+  layoutId: "trigger-dynamic-walkthrough",
+  variant: "filled",
+  size: "xs",
+  fw: "500",
+  className: css({
+    flexShrink: 0
+  })
+});
+const StartWalkthroughButton = () => {
+  const diagram = useDiagram();
+  const actor = useNavigationActor();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Start Dynamic View Walkthrough", children: /* @__PURE__ */ jsx(
+    TriggerWalkthroughButton,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        actor.closeDropdown();
+        diagram.startWalkthrough();
+      },
+      rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, { size: 10 }),
+      children: "Start"
+    }
+  ) });
+};
+const PrevNextButton = Button.withProps({
+  // Button is polymorphic, but we dont want it to inherit the motion props
+  component: m.button,
+  variant: "light",
+  size: "xs",
+  fw: "500"
+});
+const ParallelFrame = () => {
+  const { portalProps } = useMantinePortalProps();
+  return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      css: {
+        position: "absolute",
+        margin: "0",
+        padding: "0",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        border: `2px solid`,
+        borderColor: "mantine.colors.orange[6]",
+        pointerEvents: "none",
+        md: {
+          borderWidth: 4
+        }
+      }
+    }
+  ) });
+};
+const ActiveWalkthroughControls = () => {
+  const diagram = useDiagram();
+  const {
+    isParallel,
+    hasNext,
+    hasPrevious,
+    currentStep,
+    totalSteps
+  } = useDiagramContext((s) => {
+    const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
+    return {
+      isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+      hasNext: currentStepIndex < s.xyedges.length - 1,
+      hasPrevious: currentStepIndex > 0,
+      currentStep: currentStepIndex + 1,
+      totalSteps: s.xyedges.length
+    };
+  });
+  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, children: [
+    /* @__PURE__ */ jsx(
+      TriggerWalkthroughButton,
+      {
+        variant: "light",
+        color: "orange",
+        mr: "sm",
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.stopWalkthrough();
+        },
+        rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
+        children: "Stop"
+      },
+      "trigger-dynamic-walkthrough"
+    ),
+    /* @__PURE__ */ jsx(
+      PrevNextButton,
+      {
+        disabled: !hasPrevious,
+        onClick: () => diagram.walkthroughStep("previous"),
+        leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
+        children: "Previous"
+      },
+      "prev"
+    ),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        component: m.div,
+        size: "md",
+        radius: "sm",
+        variant: isParallel ? "gradient" : "transparent",
+        gradient: { from: "red", to: "orange", deg: 90 },
+        rightSection: /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: css({
+              fontSize: "xxs",
+              display: isParallel ? "block" : "none"
+            }),
+            children: "parallel"
+          }
+        ),
+        className: css({
+          alignItems: "baseline"
+        }),
+        children: /* @__PURE__ */ jsxs(m.span, { children: [
+          currentStep,
+          " / ",
+          totalSteps
+        ] })
+      },
+      "step-badge"
+    ),
+    /* @__PURE__ */ jsx(
+      PrevNextButton,
+      {
+        disabled: !hasNext,
+        onClick: () => diagram.walkthroughStep("next"),
+        rightSection: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, { size: 10 }),
+        children: "Next"
+      },
+      "next"
+    ),
+    isParallel && /* @__PURE__ */ jsx(ParallelFrame, {})
+  ] });
+};
+
+export { ActiveWalkthroughControls, StartWalkthroughButton };