@likec4/diagram 1.47.0 → 1.48.0

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.d.ts

@@ -1,4 +1,4 @@
-import { NavigationPanelActionIconVariant } from '../../styled-system/recipes';
+import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
 import { ActionIconProps, TooltipProps, BreadcrumbsProps } from '@mantine/core';
 import { HTMLMotionProps } from 'motion/react';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';

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/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/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.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '../../styled-system';
+import { RecipeRuntimeFn } from '@likec4/styles';
 export declare const breadcrumbTitle: RecipeRuntimeFn<{
     truncate: {
         true: {

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({

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

@@ -1,5 +1,5 @@
 import { ButtonProps } from '@mantine/core';
-import { ForwardRefExoticComponent, ReactEventHandler, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Key, Ref, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Key, Ref, RefAttributes } from 'react';
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
     id?: string | undefined;
@@ -10,14 +10,72 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     className?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
-    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
-    value?: string | number | readonly string[] | undefined;
+    dir?: string | undefined;
+    property?: string | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    lang?: string | undefined;
+    name?: string | undefined;
+    nonce?: string | undefined;
+    part?: string | undefined;
+    slot?: string | undefined;
+    tabIndex?: number | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "step" | "page" | "location" | "date" | "time" | "true" | "false" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
     onCopy?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCopyCapture?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCut?: ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -48,6 +106,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onInvalidCapture?: FormEventHandler<HTMLButtonElement> | undefined;
     onLoad?: ReactEventHandler<HTMLButtonElement> | undefined;
     onLoadCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
+    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
     onErrorCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement> | undefined;
     onKeyDownCapture?: KeyboardEventHandler<HTMLButtonElement> | undefined;
@@ -181,21 +240,18 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onTransitionRunCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
+    value?: string | number | readonly string[] | undefined;
+    key?: Key | null | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoCapitalize?: "none" | (string & {}) | "on" | "off" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
-    dir?: string | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "previous" | "enter" | "go" | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    slot?: string | undefined;
+    enterKeyHint?: "search" | "next" | "previous" | "done" | "send" | "enter" | "go" | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     about?: string | undefined;
@@ -203,7 +259,6 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
-    property?: string | undefined;
     rel?: string | undefined;
     resource?: string | undefined;
     rev?: string | undefined;
@@ -226,61 +281,6 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
-    part?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "other" | "ascending" | "descending" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    name?: string | undefined;
-    key?: Key | null | undefined;
     ref?: Ref<HTMLButtonElement> | undefined;
     disabled?: boolean | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;