@likec4/diagram 1.44.0 → 1.46.0

package/dist/navigationpanel/actor.d.ts

@@ -1,5 +1,5 @@
 import { LayoutedView, ViewId } from '@likec4/core/types';
-import { ActorRefFromLogic, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 import { CurrentViewModel } from '../hooks/useCurrentViewModel';
 export interface NavigationPanelActorInput {
     view: LayoutedView;
@@ -90,211 +90,11 @@ export interface NavigationPanelActorContext {
     selectedFolder: string;
     searchQuery: string;
 }
-declare const _actorLogic: StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, {}, never, Values<{
-    "update activatedBy": {
-        type: "update activatedBy";
-        params: NonReducibleUnknown;
-    };
-    "keep dropdown open": {
-        type: "keep dropdown open";
-        params: NonReducibleUnknown;
-    };
-    "update selected folder": {
-        type: "update selected folder";
-        params: NonReducibleUnknown;
-    };
-    "reset selected folder": {
-        type: "reset selected folder";
-        params: NonReducibleUnknown;
-    };
-    "update inputs": {
-        type: "update inputs";
-        params: NonReducibleUnknown;
-    };
-    "reset search query": {
-        type: "reset search query";
-        params: NonReducibleUnknown;
-    };
-    "update search query": {
-        type: "update search query";
-        params: NonReducibleUnknown;
-    };
-    "emit navigateTo": {
-        type: "emit navigateTo";
-        params: NonReducibleUnknown;
-    };
-}>, Values<{
-    "was opened on hover": {
-        type: "was opened on hover";
-        params: unknown;
-    };
-    "has search query": {
-        type: "has search query";
-        params: unknown;
-    };
-    "search query is empty": {
-        type: "search query is empty";
-        params: unknown;
-    };
-}>, "open timeout" | "close timeout", "pending" | "idle" | {
-    active: "search" | "opened" | "closing" | "decide";
-}, "active", NavigationPanelActorInput, NonReducibleUnknown, NavigationPanelActorEmitted, MetaObject, {
-    readonly id: "breadcrumbs";
-    readonly context: ({ input }: {
-        spawn: {
-            <TSrc extends never>(logic: TSrc, ...[options]: never): ActorRefFromLogic<never>;
-            <TLogic extends AnyActorLogic>(src: TLogic, ...[options]: ConditionalRequired<[options?: {
-                id?: never;
-                systemId?: string;
-                input?: InputFrom<TLogic>;
-                syncSnapshot?: boolean;
-            } & { [K in RequiredLogicInput<TLogic>]: unknown; }], IsNotNever<RequiredLogicInput<TLogic>>>): ActorRefFromLogic<TLogic>;
-        };
-        input: NavigationPanelActorInput;
-        self: ActorRef<MachineSnapshot<NavigationPanelActorContext, NavigationPanelActorEvent, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, NavigationPanelActorEvent, AnyEventObject>;
-    }) => {
-        breadcrumbs: never[];
-        activatedBy: "hover";
-        selectedFolder: string;
-        searchQuery: string;
-        folderColumns: never[];
-        view: LayoutedView;
-        viewModel: CurrentViewModel | null;
-    };
-    readonly initial: "idle";
-    readonly entry: readonly ["update activatedBy", "reset selected folder"];
-    readonly on: {
-        readonly 'update.inputs': {
-            readonly actions: "update inputs";
-        };
-        readonly 'searchQuery.change': {
-            readonly actions: readonly ["update search query", ActionFunction<NavigationPanelActorContext, {
-                type: "searchQuery.change";
-                value: string;
-            }, NavigationPanelActorEvent, undefined, never, never, never, "open timeout" | "close timeout", never>];
-        };
-    };
-    readonly states: {
-        readonly idle: {
-            readonly id: "idle";
-            readonly on: {
-                readonly 'breadcrumbs.mouseEnter.*': {
-                    readonly target: "pending";
-                    readonly actions: "update activatedBy";
-                };
-                readonly 'breadcrumbs.click.*': {
-                    readonly target: "active";
-                    readonly actions: "update activatedBy";
-                };
-            };
-        };
-        readonly pending: {
-            readonly on: {
-                readonly 'breadcrumbs.mouseEnter.*': {
-                    readonly actions: "update activatedBy";
-                };
-                readonly 'breadcrumbs.mouseLeave.*': {
-                    readonly target: "idle";
-                };
-                readonly 'breadcrumbs.click.*': {
-                    readonly target: "active";
-                    readonly actions: "update activatedBy";
-                };
-            };
-            readonly after: {
-                readonly 'open timeout': {
-                    readonly target: "active";
-                };
-            };
-        };
-        readonly active: {
-            readonly tags: readonly ["active"];
-            readonly initial: "decide";
-            readonly on: {
-                readonly 'dropdown.dismiss': {
-                    readonly target: "#idle";
-                };
-                readonly 'breadcrumbs.mouseLeave': {
-                    readonly guard: "was opened on hover";
-                    readonly target: ".closing";
-                };
-                readonly 'dropdown.mouseLeave': {
-                    readonly guard: "was opened on hover";
-                    readonly target: ".closing";
-                };
-                readonly 'searchQuery.changed': {
-                    readonly target: ".decide";
-                };
-            };
-            readonly states: {
-                readonly decide: {
-                    readonly always: readonly [{
-                        readonly guard: "has search query";
-                        readonly target: "search";
-                    }, {
-                        readonly target: "opened";
-                    }];
-                };
-                readonly opened: {
-                    readonly on: {
-                        readonly 'searchQuery.changed': {
-                            readonly guard: "has search query";
-                            readonly actions: "keep dropdown open";
-                            readonly target: "search";
-                        };
-                        readonly 'breadcrumbs.click.viewtitle': {
-                            readonly actions: "reset selected folder";
-                        };
-                        readonly 'breadcrumbs.click.*': {
-                            readonly actions: "update selected folder";
-                        };
-                        readonly 'select.folder': {
-                            readonly actions: readonly ["keep dropdown open", "update selected folder"];
-                        };
-                        readonly 'select.view': {
-                            readonly actions: readonly ["emit navigateTo"];
-                        };
-                    };
-                };
-                readonly search: {
-                    readonly on: {
-                        readonly 'breadcrumbs.click.viewtitle': {
-                            readonly actions: readonly ["reset search query", "reset selected folder"];
-                            readonly target: "opened";
-                        };
-                        readonly 'breadcrumbs.click.*': {
-                            readonly actions: readonly ["reset search query", "update selected folder"];
-                            readonly target: "opened";
-                        };
-                        readonly 'select.view': {
-                            readonly actions: readonly ["emit navigateTo"];
-                        };
-                    };
-                };
-                readonly closing: {
-                    readonly on: {
-                        readonly 'breadcrumbs.mouseEnter.*': {
-                            readonly target: "decide";
-                        };
-                        readonly 'dropdown.mouseEnter': {
-                            readonly target: "decide";
-                        };
-                    };
-                    readonly after: {
-                        readonly 'close timeout': {
-                            readonly target: "#idle";
-                        };
-                    };
-                };
-            };
-        };
-    };
-}>;
-type InferredMachine = typeof _actorLogic;
-export interface NavigationPanelActorLogic extends InferredMachine {
+type Tags = 'active';
+export interface NavigationPanelActorLogic extends StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, {}, any, any, any, any, any, Tags, NavigationPanelActorInput, any, NavigationPanelActorEmitted, any, any> {
 }
 export declare const navigationPanelActorLogic: NavigationPanelActorLogic;
 export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
-export interface NavigationPanelActorRef extends ActorRefFromLogic<NavigationPanelActorLogic> {
+export interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, NavigationPanelActorEvent, NavigationPanelActorEmitted> {
 }
 export {};

package/dist/navigationpanel/actor.js

@@ -5,7 +5,7 @@ const _actorLogic = setup({
   types: {
     context: {},
     events: {},
-    tags: "active",
+    tags: "",
     input: {},
     emitted: {}
   },

package/dist/navigationpanel/comparepanel/CompareActionsMenu.d.ts

@@ -1,3 +1,5 @@
-export declare function CompareActionsMenu({ onResetManualLayout, }: {
+export declare function CompareActionsMenu({ disabled, onApplyLatestToManual, onResetManualLayout, }: {
+    disabled?: boolean;
+    onApplyLatestToManual?: undefined | (() => void);
     onResetManualLayout: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -1,12 +1,15 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
-import { navigationPanelActionIcon } from '@likec4/styles/recipes';
-import { Menu, UnstyledButton, Badge } from '@mantine/core';
-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';
+import { Menu, UnstyledButton, Tooltip } from '@mantine/core';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import { stopPropagation } from '../../utils/xyflow.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 function CompareActionsMenu({
+  disabled = false,
+  onApplyLatestToManual,
   onResetManualLayout
 }) {
   return /* @__PURE__ */ jsxs(
@@ -17,27 +20,22 @@ function CompareActionsMenu({
       shadow: "lg",
       position: "bottom-start",
       offset: { mainAxis: 4 },
+      disabled,
       children: [
         /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(
           UnstyledButton,
           {
+            disabled,
             className: cx(
               "mantine-active",
-              navigationPanelActionIcon({
-                variant: "default"
-              }),
               hstack({
                 gap: "2",
                 py: "1.5",
                 px: "2",
                 lineHeight: "1",
-                rounded: "sm",
                 textStyle: "xs",
                 fontWeight: "medium",
-                color: {
-                  base: "likec4.panel.action",
-                  _hover: "likec4.panel.action.hover"
-                },
+                layerStyle: "likec4.panel.action",
                 userSelect: "none"
               })
             ),
@@ -48,8 +46,36 @@ function CompareActionsMenu({
           }
         ) }),
         /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-          /* @__PURE__ */ jsx(Menu.Item, { disabled: true, rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", radius: "sm", children: "Soon" }), children: "Apply changes" }),
-          /* @__PURE__ */ jsx(Menu.Item, { fz: "sm", onClick: onResetManualLayout, children: "Reset manual layout" })
+          /* @__PURE__ */ jsxs(
+            Menu.Item,
+            {
+              disabled: !onApplyLatestToManual,
+              onClick: onApplyLatestToManual,
+              rightSection: onApplyLatestToManual && /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  onClick: stopPropagation,
+                  position: "right-start",
+                  label: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Applies changes from the latest auto-layouted",
+                    /* @__PURE__ */ jsx("br", {}),
+                    "to saved snapshot, preserving (as possible)",
+                    /* @__PURE__ */ jsx("br", {}),
+                    "manual adjustments.",
+                    /* @__PURE__ */ jsx("br", {}),
+                    /* @__PURE__ */ jsx("br", {}),
+                    "You can undo this action."
+                  ] }),
+                  children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 14, stroke: 1.7, opacity: 0.5 })
+                }
+              ),
+              children: [
+                "Sync with latest",
+                !onApplyLatestToManual && /* @__PURE__ */ jsx(Box, { textStyle: "xs", children: "view type is changed" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: onResetManualLayout, children: "Remove manual layout" })
         ] })
       ]
     }

package/dist/navigationpanel/comparepanel/ComparePanelControls.js

@@ -5,7 +5,7 @@ import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js'
 import { PanelActionIcon } from '../_common.js';
 import { CompareActionsMenu } from './CompareActionsMenu.js';
 import { LayoutTypeSwitcher } from './LayoutTypeSwitcher.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const Divider = Divider$1.withProps({
   mx: 2,
@@ -13,7 +13,7 @@ const Divider = Divider$1.withProps({
   orientation: "vertical"
 });
 function ComparePanelControls() {
-  const [ctx, { toggleCompare, switchLayout, resetManualLayout }] = useDiagramCompareLayout();
+  const [ctx, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }] = useDiagramCompareLayout();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Box,
@@ -33,12 +33,14 @@ function ComparePanelControls() {
         onChange: switchLayout
       }
     ),
-    ctx.isEditable && /* @__PURE__ */ jsxs(HStack, { gap: "1", children: [
+    ctx.hasEditor && /* @__PURE__ */ jsxs(HStack, { gap: "1", children: [
       /* @__PURE__ */ jsx(Divider, {}),
       /* @__PURE__ */ jsx(
         CompareActionsMenu,
         {
-          onResetManualLayout: resetManualLayout
+          disabled: ctx.layout === "auto",
+          onResetManualLayout: resetManualLayout,
+          onApplyLatestToManual: ctx.canApplyLatest ? applyLatestToManual : void 0
         }
       ),
       /* @__PURE__ */ jsx(Divider, {})

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js

@@ -10,8 +10,8 @@ function LayoutTypeSwitcher({
   onChange
 }) {
   const data = useMemo(() => [
-    { value: "manual", label: "Saved" },
-    { value: "auto", label: "Latest" }
+    { value: "manual", label: "Saved manual" },
+    { value: "auto", label: "Latest auto" }
   ], []);
   return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
     SegmentedControl,

package/dist/navigationpanel/controls/DetailsControls.js

@@ -12,8 +12,8 @@ import { Link } from '../../components/Link.js';
 import { useOnDiagramEvent } 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.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
 import { Markdown } from '../../base-primitives/Markdown.js';

package/dist/navigationpanel/controls/LayoutWarning.js

@@ -8,7 +8,7 @@ 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';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutWarning = memo(() => {
   const [ctx, { toggleCompare }] = useDiagramCompareLayout();
@@ -33,6 +33,7 @@ const LayoutWarning = memo(() => {
             component: m.button,
             layout: "position",
             onClick: (e) => {
+              e.stopPropagation();
               toggleCompare();
             },
             whileTap: {

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -4,8 +4,8 @@ import * as m from 'motion/react-m';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { PanelActionIcon } from '../_common.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';
+import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.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.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
 
 const NavigationButtons = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/controls/OpenSource.js

@@ -3,7 +3,7 @@ import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.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.2.0/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.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const OpenSource = () => {
   const viewId = useCurrentViewId();

package/dist/navigationpanel/controls/SearchControl.js

@@ -11,7 +11,7 @@ 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';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 const SearchControl = memo(() => {
   const { enableSearch, enableCompareWithLatest } = useEnabledFeatures();
@@ -37,7 +37,7 @@ const SearchControl = memo(() => {
           paddingInline: "sm",
           paddingBlock: "xxs",
           userSelect: "none",
-          layerStyle: "likec4.panel.action",
+          layerStyle: "likec4.panel.action.filled",
           display: {
             base: "none",
             "@/md": "flex"

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -4,30 +4,41 @@ import { hstack } from '@likec4/styles/patterns';
 import { UnstyledButton } from '@mantine/core';
 import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
+import { isTruthy } from 'remeda';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
+import { deriveToggledFeatures } from '../../likec4diagram/state/machine.setup.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';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
 
-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 selector = (ctx) => {
+  const toggledFeatures = deriveToggledFeatures(ctx);
+  const comparingLatest = toggledFeatures.enableCompareWithLatest && !!ctx.view.drifts && ctx.view._layout === "auto";
+  const sequenceLayoutActive = ctx.view._type === "dynamic" && ctx.dynamicViewVariant === "sequence";
+  const noActiveWalkthrough = !isTruthy(ctx.activeWalkthrough);
+  const hasEditor = ctx.features.enableEditor;
+  return {
+    visible: hasEditor && noActiveWalkthrough,
+    disabled: comparingLatest || sequenceLayoutActive,
+    isReadOnly: ctx.toggledFeatures.enableReadOnly ?? false
+  };
+};
 const ToggleReadonly = () => {
-  const { visible, isReadOnly } = useDiagramContext(selector);
+  const { visible, disabled, isReadOnly } = useDiagramContext(selector);
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visible && /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
       component: m.button,
       layout: "position",
+      layoutDependency: isReadOnly,
+      disabled,
       onClick: (e) => {
         e.stopPropagation();
-        diagram.toggleFeature("ReadOnly");
+        !disabled && diagram.toggleFeature("ReadOnly");
       },
       initial: { opacity: 0, scale: 0.6 },
-      animate: { opacity: 1, scale: 1 },
+      animate: { opacity: 1, scale: disabled ? 0.95 : 1 },
       exit: { opacity: 0, scale: 0.6 },
       whileTap: {
         translateY: 1
@@ -38,21 +49,20 @@ const ToggleReadonly = () => {
           gap: "0.5",
           paddingInline: "xxs",
           paddingBlock: "xxs",
-          rounded: "sm",
           userSelect: "none",
-          cursor: "pointer",
-          color: {
-            base: "likec4.panel.action",
-            _hover: "likec4.panel.action.hover"
-          },
+          layerStyle: "likec4.panel.action",
           backgroundColor: {
-            _hover: "likec4.panel.action.bg.hover"
+            base: "none",
+            _notDisabled: {
+              _hover: "likec4.panel.action.bg.hover"
+            }
           }
         })
       ),
       children: [
-        isReadOnly ? /* @__PURE__ */ jsx(IconLock, { size: 14, stroke: 2 }) : /* @__PURE__ */ jsx(IconLockOpen2, { size: 14, stroke: 2 }),
-        isReadOnly && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(IconLockOpen2, { size: 14, stroke: 2, style: { display: isReadOnly ? "none" : void 0 } }),
+        /* @__PURE__ */ jsx(IconLock, { size: 14, stroke: 2, style: { display: !isReadOnly ? "none" : void 0 } }),
+        /* @__PURE__ */ jsx(
           m.div,
           {
             className: css({
@@ -61,6 +71,9 @@ const ToggleReadonly = () => {
               lineHeight: 1,
               opacity: 0.8
             }),
+            style: {
+              display: isReadOnly ? "block" : "none"
+            },
             children: "Edit"
           }
         )

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -4,7 +4,7 @@ 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.2.0/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.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
 
 const ProjectsMenu = memo((_) => {
   const { projects, onProjectChange } = useLikeC4ProjectsContext();

package/dist/navigationpanel/editorpanel/CenterCamera.js

@@ -5,7 +5,7 @@ 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.2.0/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.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
 
 const CenterCamera = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -8,7 +8,7 @@ import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.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';
+import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
 
 const selector = (state) => ({
   viewId: state.view.id,

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -9,15 +9,15 @@ 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.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';
+import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
 
 const Action = ({
   label,

package/dist/navigationpanel/editorpanel/ToggleReadonly.js

@@ -5,7 +5,7 @@ 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';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
 
 const ToggleReadonly = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -8,9 +8,9 @@ import { isTruthy } from 'remeda';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { TriggerWalkthroughButton } from './DynamicViewControls.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 IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.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.2.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.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 
 const PrevNextButton = Button.withProps({