@likec4/diagram 1.43.0 → 1.44.0

package/dist/navigationpanel/controls/LayoutWarning.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { navigationPanelActionIcon } from '@likec4/styles/recipes';
+import { HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Notification, Text, Button } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { memo, Fragment as Fragment$1 } from 'react';
+import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+
+const LayoutWarning = memo(() => {
+  const [ctx, { toggleCompare }] = useDiagramCompareLayout();
+  const portalProps = useMantinePortalProps();
+  const { drifts, isActive, isEnabled } = ctx;
+  return /* @__PURE__ */ jsx(AnimatePresence, { propagate: true, children: isEnabled && !isActive && /* @__PURE__ */ jsxs(
+    HoverCard,
+    {
+      position: "bottom-start",
+      openDelay: 600,
+      closeDelay: 200,
+      floatingStrategy: "absolute",
+      offset: {
+        mainAxis: 4,
+        crossAxis: -22
+      },
+      ...portalProps,
+      children: [
+        /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            component: m.button,
+            layout: "position",
+            onClick: (e) => {
+              toggleCompare();
+            },
+            whileTap: {
+              scale: 0.95,
+              translateY: 1
+            },
+            className: cx(
+              "group",
+              navigationPanelActionIcon({
+                variant: "filled",
+                type: "warning"
+              }),
+              hstack({
+                gap: "xxs",
+                padding: "1.5",
+                rounded: "sm",
+                userSelect: "none",
+                cursor: "pointer",
+                fontSize: "xs",
+                fontWeight: 600
+              })
+            ),
+            children: isActive ? /* @__PURE__ */ jsx(Fragment, { children: "Stop Compare" }) : /* @__PURE__ */ jsx(IconAlertTriangle, { size: 18 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
+          Notification,
+          {
+            color: "orange",
+            withBorder: false,
+            withCloseButton: false,
+            title: "View is out of sync",
+            children: [
+              /* @__PURE__ */ jsx(Text, { mt: 2, size: "sm", lh: "xs", children: "Model has changed since this view was last updated." }),
+              /* @__PURE__ */ jsxs(Text, { mt: 4, size: "sm", lh: "xs", children: [
+                "Detected changes:",
+                drifts.map((drift) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "- ",
+                    drift
+                  ] })
+                ] }, drift))
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  mt: "xs",
+                  size: "compact-sm",
+                  variant: "default",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleCompare();
+                  },
+                  children: "Compare with current state"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+LayoutWarning.displayName = "ManualLayoutWarning";
+
+export { LayoutWarning };

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { hstack } from '@likec4/styles/patterns';
 import * as m from 'motion/react-m';
-import { useDiagram, useDiagramContext } from '../../hooks/useDiagram.js';
+import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { PanelActionIcon } from '../_common.js';
-import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
 
 const NavigationButtons = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/controls/OpenSource.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useCurrentViewId } from '../../hooks/useCurrentViewId.js';
+import { useCurrentViewId } from '../../hooks/useCurrentView.js';
 import { Tooltip, PanelActionIcon } from '../_common.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const OpenSource = () => {
   const viewId = useCurrentViewId();

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

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

package/dist/navigationpanel/controls/SearchControl.js

@@ -1,17 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } 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 { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
-import { useDiagram } from '../../hooks/useDiagram.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import { memo } from 'react';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../hooks/safeContext.js';
+import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
-function SearchControl() {
+const SearchControl = memo(() => {
+  const { enableSearch, enableCompareWithLatest } = useEnabledFeatures();
   const diagram = useDiagram();
   const isMac = isMacOs();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
       component: m.button,
@@ -30,17 +36,8 @@ function SearchControl() {
           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"
-          },
+          layerStyle: "likec4.panel.action",
           display: {
             base: "none",
             "@/md": "flex"
@@ -64,7 +61,8 @@ function SearchControl() {
         )
       ]
     }
-  );
-}
+  ) });
+});
+SearchControl.displayName = "SearchControl";
 
 export { SearchControl };

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

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

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -1,23 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { hstack } from '@likec4/styles/patterns';
 import { UnstyledButton } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
-import { useDiagramContext, useDiagram } from '../../hooks/useDiagram.js';
-import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
-import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import { useDiagramContext } from '../../hooks/useDiagram.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/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 selector = (ctx) => ({
+  visible: ctx.features.enableReadOnly !== true && // Disable toggle in sequence mode
+  (ctx.view._type !== "dynamic" || ctx.dynamicViewVariant !== "sequence"),
+  isReadOnly: ctx.toggledFeatures.enableReadOnly ?? ctx.features.enableReadOnly
 });
 const ToggleReadonly = () => {
   const { visible, isReadOnly } = useDiagramContext(selector);
   const diagram = useDiagram();
-  if (!visible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visible && /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
       component: m.button,
@@ -26,6 +26,9 @@ const ToggleReadonly = () => {
         e.stopPropagation();
         diagram.toggleFeature("ReadOnly");
       },
+      initial: { opacity: 0, scale: 0.6 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.6 },
       whileTap: {
         translateY: 1
       },
@@ -39,11 +42,11 @@ const ToggleReadonly = () => {
           userSelect: "none",
           cursor: "pointer",
           color: {
-            base: "likec4.panel.action-icon.text",
-            _hover: "likec4.panel.action-icon.text.hover"
+            base: "likec4.panel.action",
+            _hover: "likec4.panel.action.hover"
           },
           backgroundColor: {
-            _hover: "likec4.panel.action-icon.bg.hover"
+            _hover: "likec4.panel.action.bg.hover"
           }
         })
       ),
@@ -58,12 +61,12 @@ const ToggleReadonly = () => {
               lineHeight: 1,
               opacity: 0.8
             }),
-            children: "Unlock"
+            children: "Edit"
           }
         )
       ]
     }
-  );
+  ) });
 };
 
 export { ToggleReadonly };

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

@@ -1,6 +1,7 @@
 export { BurgerButton } from './BurgerButton';
+export { DetailsControls } from './DetailsControls';
+export { LayoutWarning } from './LayoutWarning';
 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

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

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -2,10 +2,11 @@ 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 { memo } from 'react';
 import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../hooks/useLikeC4Project.js';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
 
-function ProjectsMenu(props) {
+const ProjectsMenu = memo((_) => {
   const { projects, onProjectChange } = useLikeC4ProjectsContext();
   const projectId = useLikeC4ProjectId();
   if (projects.length <= 1) {
@@ -18,7 +19,7 @@ function ProjectsMenu(props) {
         css: {
           fontWeight: "400",
           fontSize: "xxs",
-          color: "mantine.colors.dimmed",
+          color: "likec4.panel.text.dimmed",
           userSelect: "none"
         },
         children: "Project"
@@ -57,7 +58,6 @@ function ProjectsMenu(props) {
                 })
               },
               rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 12, stroke: 1.5 }),
-              ...props,
               children: projectId
             }
           ) }),
@@ -79,6 +79,6 @@ function ProjectsMenu(props) {
       }
     )
   ] });
-}
+});
 
 export { ProjectsMenu };

package/dist/navigationpanel/editorpanel/CenterCamera.js

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useDiagram } from '../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
-import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
 
 const CenterCamera = () => {
   const diagram = useDiagram();

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

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

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -3,25 +3,26 @@ import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text,
 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 { 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.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
 
 const selector = (state) => ({
   viewId: state.view.id,
+  isManualLayout: state.view._layout === "manual",
   autoLayout: state.view.autoLayout
 });
 const ChangeAutoLayoutButton = () => {
-  const { onChange } = useDiagramEventHandlers();
   const diagram = useDiagram();
   const [rootRef, setRootRef] = useState(null);
   const [controlsRefs, setControlsRefs] = useState({});
   const {
     autoLayout,
-    viewId
+    viewId,
+    isManualLayout
   } = useDiagramContext(selector);
   const { ref, hovered: isSpacingHovered } = useHover();
   const setControlRef = (name) => (node) => {
@@ -30,29 +31,29 @@ const ChangeAutoLayoutButton = () => {
   };
   const setAutoLayout = (direction) => (event) => {
     event.stopPropagation();
-    onChange?.({
-      change: {
-        op: "change-autolayout",
-        layout: {
-          ...autoLayout,
-          direction
-        }
+    diagram.fitDiagram();
+    diagram.triggerChange({
+      op: "change-autolayout",
+      layout: {
+        ...autoLayout,
+        direction
       }
     });
   };
   const setSpacing = (nodeSep, rankSep) => {
     diagram.fitDiagram();
-    onChange?.({
-      change: {
-        op: "change-autolayout",
-        layout: {
-          ...autoLayout,
-          nodeSep,
-          rankSep
-        }
+    diagram.triggerChange({
+      op: "change-autolayout",
+      layout: {
+        ...autoLayout,
+        nodeSep,
+        rankSep
       }
     });
   };
+  if (isManualLayout) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     Popover,
     {

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -5,8 +5,8 @@ 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 { ToggleReadonly } from './ToggleReadonly.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
 
 function EditorPanel() {
@@ -38,8 +38,8 @@ function EditorPanel() {
       children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 600, closeDelay: 120, children: [
         /* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
         /* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
-        /* @__PURE__ */ jsx(LayoutDriftNotification, {}),
-        /* @__PURE__ */ jsx(CenterCamera, {})
+        /* @__PURE__ */ jsx(CenterCamera, {}),
+        /* @__PURE__ */ jsx(ToggleReadonly, {})
       ] })
     }
   ) });

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

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

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -2,19 +2,22 @@ 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 { memo } from 'react';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../hooks/safeContext.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.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
-import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
-import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
-import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
-import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
-import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
-import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
-import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
-import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
+import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
 
 const Action = ({
   label,
@@ -36,7 +39,7 @@ const Action = ({
     children: icon
   }
 ) });
-const ManualLayoutToolsButton = (props) => {
+const ManualLayoutToolsButton = memo(() => {
   const diagram = useDiagram();
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
@@ -50,7 +53,6 @@ const ManualLayoutToolsButton = (props) => {
         "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(
@@ -168,6 +170,7 @@ const ManualLayoutToolsButton = (props) => {
       ]
     }
   );
-};
+});
+ManualLayoutToolsButton.displayName = "ManualLayoutToolsButton";
 
 export { ManualLayoutToolsButton };

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

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

package/dist/navigationpanel/editorpanel/ToggleReadonly.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../hooks/safeContext.js';
+import { PanelActionIcon } from '../_common.js';
+import { Tooltip } from './_common.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+
+const ToggleReadonly = () => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Switch to Read-only", children: /* @__PURE__ */ jsx(PanelActionIcon, { onClick: () => diagram.toggleFeature("ReadOnly"), children: /* @__PURE__ */ jsx(IconLockOpen2, { size: 14, stroke: 2 }) }) });
+};
+
+export { ToggleReadonly };

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

@@ -8,8 +8,8 @@ export declare const breadcrumbTitle: RecipeRuntimeFn<{
     dimmed: {
         true: {
             color: {
-                base: "mantine.colors.dimmed";
-                _hover: "mantine.colors.text";
+                base: "likec4.panel.text.dimmed";
+                _hover: "likec4.panel.action";
             };
         };
     };

package/dist/navigationpanel/styles.css.js

@@ -6,8 +6,8 @@ const breadcrumbTitle = cva({
     fontWeight: "500",
     transition: "fast",
     color: {
-      base: "mantine.colors.text/90",
-      _hover: "[var(--mantine-color-bright)]"
+      base: "likec4.panel.action",
+      _hover: "likec4.panel.action.hover"
     }
   },
   variants: {
@@ -19,8 +19,8 @@ const breadcrumbTitle = cva({
     dimmed: {
       "true": {
         color: {
-          base: "mantine.colors.dimmed",
-          _hover: "mantine.colors.text"
+          base: "likec4.panel.text.dimmed",
+          _hover: "likec4.panel.action"
         }
       }
     }

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -5,16 +5,21 @@ 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 { useDiagramContext } from '../../hooks/useDiagram.js';
 import { TriggerWalkthroughButton } from './DynamicViewControls.js';
-import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
-import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
-import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
+import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
+import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 
 const PrevNextButton = Button.withProps({
   // Button is polymorphic, but we dont want it to inherit the motion props
   component: m.button,
+  layout: "position",
+  whileTap: {
+    scale: 0.95
+  },
   variant: "light",
   size: "xs",
   fw: "500"
@@ -60,7 +65,7 @@ function ActiveWalkthroughControls() {
       totalSteps: s.xyedges.length
     };
   });
-  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, children: [
+  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, mode: "popLayout", children: [
     /* @__PURE__ */ jsx(
       TriggerWalkthroughButton,
       {
@@ -87,10 +92,11 @@ function ActiveWalkthroughControls() {
       },
       "prev"
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       Badge,
       {
         component: m.div,
+        layout: "position",
         size: "md",
         radius: "sm",
         variant: isParallel ? "gradient" : "transparent",
@@ -108,11 +114,11 @@ function ActiveWalkthroughControls() {
         className: css({
           alignItems: "baseline"
         }),
-        children: /* @__PURE__ */ jsxs(m.span, { children: [
+        children: [
           currentStep,
           " / ",
           totalSteps
-        ] })
+        ]
       },
       "step-badge"
     ),