@likec4/diagram 1.46.4 → 1.48.0

package/dist/navigationpanel/NavigationPanelControls.js

@@ -12,7 +12,7 @@ import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { BreadcrumbsSeparator } from './_common.js';
 import { useNavigationActor } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
-import { BurgerButton } from './controls/BurgerButton.js';
+import { LogoButton } from './controls/LogoButton.js';
 import { NavigationButtons } from './controls/NavigationButtons.js';
 import { DetailsControls } from './controls/DetailsControls.js';
 import { OpenSource } from './controls/OpenSource.js';
@@ -38,7 +38,9 @@ const NavigationPanelControls = memo(() => {
   const actor = useNavigationActor();
   const {
     enableNavigationButtons,
-    enableDynamicViewWalkthrough
+    enableDynamicViewWalkthrough,
+    enableCompareWithLatest,
+    enableSearch
   } = useEnabledFeatures();
   const {
     folders,
@@ -104,7 +106,7 @@ const NavigationPanelControls = memo(() => {
     "view-title"
   );
   return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, mode: "popLayout", children: [
-    /* @__PURE__ */ jsx(BurgerButton, {}, "burger-button"),
+    /* @__PURE__ */ jsx(LogoButton, {}, "logo-button"),
     enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
     /* @__PURE__ */ jsxs(
       m.div,
@@ -143,7 +145,7 @@ const NavigationPanelControls = memo(() => {
       "actions"
     ),
     enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
-    /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+    enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
     /* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
   ] });
 });

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -17,13 +17,13 @@ import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, useNavigationActorSnapshot, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
 import { useOnDiagramEvent } from '../hooks/useDiagram.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
-import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
-import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
+import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
+import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
 
 const scopedKeydownHandler = createScopedKeydownHandler({
   siblingSelector: "[data-likec4-focusable]",

package/dist/navigationpanel/_common.js

@@ -4,7 +4,7 @@ import { navigationPanelActionIcon } from '@likec4/styles/recipes';
 import { ActionIcon, ThemeIcon, Tooltip as Tooltip$1, Breadcrumbs } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -19,7 +19,6 @@ const Tooltip = Tooltip$1.withProps({
 const BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(
   ThemeIcon,
   {
-    component: m.div,
     variant: "transparent",
     size: 16,
     className: css({

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -3,9 +3,9 @@ import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { Menu, UnstyledButton, Tooltip } from '@mantine/core';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 function CompareActionsMenu({
   disabled = false,

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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const Divider = Divider$1.withProps({
   mx: 2,

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js

@@ -3,16 +3,15 @@ import { invariant } from '@likec4/core';
 import { css } from '@likec4/styles/css';
 import { SegmentedControl } from '@mantine/core';
 import * as m from 'motion/react-m';
-import { useMemo } from 'react';
 
+const data = [
+  { value: "manual", label: "Saved manual" },
+  { value: "auto", label: "Latest auto" }
+];
 function LayoutTypeSwitcher({
   value,
   onChange
 }) {
-  const data = useMemo(() => [
-    { 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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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';
@@ -97,7 +97,7 @@ const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(P
           {
             css: {
               fontSize: "11px",
-              fontWeight: 600,
+              fontWeight: "bold",
               lineHeight: 1,
               opacity: 0.8
             },
@@ -112,7 +112,7 @@ const SectionHeader = styled("div", {
   base: {
     fontSize: "xs",
     color: "mantine.colors.dimmed",
-    fontWeight: 500,
+    fontWeight: "medium",
     userSelect: "none",
     mb: "xxs"
   }
@@ -242,7 +242,7 @@ const ViewBadge = ({
 const ViewBadgeLabel = styled("div", {
   base: {
     color: "mantine.colors.dimmed",
-    fontWeight: 500,
+    fontWeight: "medium",
     fontSize: "xxs",
     userSelect: "none"
   }

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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutWarning = memo(() => {
   const [ctx, { toggleCompare }] = useDiagramCompareLayout();
@@ -53,7 +53,7 @@ const LayoutWarning = memo(() => {
                 userSelect: "none",
                 cursor: "pointer",
                 fontSize: "xs",
-                fontWeight: 600
+                fontWeight: "bold"
               })
             ),
             children: isActive ? /* @__PURE__ */ jsx(Fragment, { children: "Stop Compare" }) : /* @__PURE__ */ jsx(IconAlertTriangle, { size: 18 })

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

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

package/dist/navigationpanel/controls/{BurgerButton.js → LogoButton.js}

@@ -7,9 +7,9 @@ import { Logo, LogoIcon } from '../../components/Logo.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useNavigationActor } from '../hooks.js';
 
-const BurgerButton = () => {
+const LogoButton = () => {
   const actor = useNavigationActor();
-  const { onBurgerMenuClick } = useDiagramEventHandlers();
+  const { onLogoClick } = useDiagramEventHandlers();
   return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
@@ -21,9 +21,9 @@ const BurgerButton = () => {
       },
       onClick: (e) => {
         e.stopPropagation();
-        if (onBurgerMenuClick && actor.isOpened()) {
+        if (onLogoClick && actor.isOpened()) {
           setTimeout(() => {
-            onBurgerMenuClick();
+            onLogoClick();
           }, 100);
         }
         actor.send({ type: "breadcrumbs.click.root" });
@@ -69,4 +69,4 @@ const BurgerButton = () => {
   ) });
 };
 
-export { BurgerButton };
+export { LogoButton };

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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const OpenSource = () => {
   const viewId = useCurrentViewId();

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

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

package/dist/navigationpanel/controls/SearchControl.js

@@ -1,23 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { UnstyledButton } from '@mantine/core';
 import { isMacOs } from '@xyflow/system';
-import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
-import { memo } from 'react';
 import '@xstate/react';
 import 'fast-equals';
+import 'react';
 import { useDiagram } from '../../hooks/safeContext.js';
-import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
-const SearchControl = memo(() => {
-  const { enableSearch, enableCompareWithLatest } = useEnabledFeatures();
+function SearchControl() {
   const diagram = useDiagram();
   const isMac = isMacOs();
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
       component: m.button,
@@ -51,7 +48,7 @@ const SearchControl = memo(() => {
           {
             css: {
               fontSize: "11px",
-              fontWeight: 600,
+              fontWeight: "bold",
               lineHeight: 1,
               opacity: 0.8,
               whiteSpace: "nowrap"
@@ -61,8 +58,7 @@ const SearchControl = memo(() => {
         )
       ]
     }
-  ) });
-});
-SearchControl.displayName = "SearchControl";
+  );
+}
 
 export { SearchControl };

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -8,18 +8,17 @@ 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 IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
-import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
 
 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,
+    disabled: comparingLatest,
     isReadOnly: ctx.toggledFeatures.enableReadOnly ?? false
   };
 };
@@ -67,7 +66,7 @@ const ToggleReadonly = () => {
           {
             className: css({
               fontSize: "11px",
-              fontWeight: 600,
+              fontWeight: "bold",
               lineHeight: 1,
               opacity: 0.8
             }),

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

@@ -1,6 +1,6 @@
-export { BurgerButton } from './BurgerButton';
 export { DetailsControls } from './DetailsControls';
 export { LayoutWarning } from './LayoutWarning';
+export { LogoButton } from './LogoButton';
 export { NavigationButtons } from './NavigationButtons';
 export { OpenSource } from './OpenSource';
 export { SearchControl } from './SearchControl';

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -1,23 +1,29 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } 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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
 
 const ProjectsMenu = memo((_) => {
   const { projects, onProjectChange } = useLikeC4ProjectsContext();
-  const projectId = useLikeC4ProjectId();
   if (projects.length <= 1) {
     return null;
   }
+  return /* @__PURE__ */ jsx(WithProjectsMenu, { projects, onProjectChange });
+});
+function WithProjectsMenu({
+  projects,
+  onProjectChange
+}) {
+  const projectId = useLikeC4ProjectId();
   return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", alignItems: "baseline", children: [
     /* @__PURE__ */ jsx(
       Box,
       {
         css: {
-          fontWeight: "400",
+          fontWeight: "normal",
           fontSize: "xxs",
           color: "likec4.panel.text.dimmed",
           userSelect: "none"
@@ -43,7 +49,7 @@ const ProjectsMenu = memo((_) => {
               color: "gray",
               classNames: {
                 root: css({
-                  fontWeight: "400",
+                  fontWeight: "normal",
                   fontSize: "xxs",
                   height: "auto",
                   lineHeight: 1.1,
@@ -79,6 +85,6 @@ const ProjectsMenu = memo((_) => {
       }
     )
   ] });
-});
+}
 
 export { ProjectsMenu };

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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
+import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
-import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
-import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
-import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
-import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
-import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
-import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
-import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
-import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
+import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
 
 const ToggleReadonly = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/editorpanel/styles.js

@@ -42,7 +42,7 @@ css({
 const autolayoutButton = css({
   flex: "1 1 40%",
   textAlign: "center",
-  fontWeight: 500,
+  fontWeight: "medium",
   padding: "[4px 6px]",
   fontSize: "11px",
   zIndex: 1
@@ -68,11 +68,11 @@ const spacingSliderBody = css({
 });
 const spacingSliderThumb = css({
   position: "absolute",
-  width: 8,
-  height: 8,
+  width: "8px",
+  height: "8px",
   border: `2px solid`,
   borderColor: "mantine.colors.gray[5]",
-  borderRadius: 3,
+  borderRadius: "sm",
   transform: "translate(-50%, -50%)"
 });
 

package/dist/navigationpanel/styles.css.js

@@ -3,7 +3,7 @@ import { cva } from '@likec4/styles/css';
 const breadcrumbTitle = cva({
   base: {
     fontSize: "sm",
-    fontWeight: "500",
+    fontWeight: "medium",
     transition: "fast",
     color: {
       base: "likec4.panel.action",

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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
-import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
-import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
+import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
+import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
+import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 
 const PrevNextButton = Button.withProps({