@likec4/diagram 1.52.0 → 1.54.0

package/dist/likec4diagram/state/machine.state.ready.walkthrough.js

@@ -4,8 +4,8 @@ import { assertEvent } from 'xstate';
 import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
 import { updateView, emitEdgeClick, stopHotKeyActor, undimEverything, startHotKeyActor, cancelEditing } from './machine.actions.js';
 import { machine, targetState } from './machine.setup.js';
-import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
 import { fitFocusedBounds, returnViewportBefore, cancelFitDiagram, assignViewportBefore } from './machine.actions.layout.js';
+import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
 import { Base } from '../../base/Base.js';
 
 const updateActiveWalkthroughState = () => machine.enqueueActions(({ context, enqueue }) => {

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -9,8 +9,8 @@ import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 

package/dist/likec4diagram/useLayoutConstraints.js

@@ -321,8 +321,8 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     }
   }
   const _edgeModifiers = [...edgeModifiers.values()];
-  function updateXYFlow() {
-    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges, nodeLookup: nodeLookup2 } = xyflowApi.getState();
+  function syncFromXYFlow() {
+    const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
     for (const id of editingNodeIds) {
       const rect = rects.get(id);
       if (!rect) {
@@ -336,6 +336,9 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
       }
       rect.positionAbsolute = node.internals.positionAbsolute;
     }
+  }
+  function updateXYFlow() {
+    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
     applyConstraints(rectsToUpdate);
     const nodeUpdates = [];
     const edgeUpdates = [];
@@ -376,11 +379,13 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   }
   function flushPending() {
     cancelPending();
+    syncFromXYFlow();
     updateXYFlow();
   }
   function onMove() {
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
+      syncFromXYFlow();
       updateXYFlow();
     });
   }

package/dist/likec4diagram/xyflow-diagram/diagram-view.js

@@ -111,8 +111,7 @@ function diagramToXY(opts) {
         data: {
           isViewGroup: true,
           ...compoundData
-        },
-        dragHandle: ".likec4-compound-title-container"
+        }
       });
       continue;
     }

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -17,13 +17,13 @@ import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
 import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, useNavigationActorSnapshot, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_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.1_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.1_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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.40.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.40.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.40.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.40.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.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const scopedKeydownHandler = createScopedKeydownHandler({
   siblingSelector: "[data-likec4-focusable]",

package/dist/navigationpanel/_common.js

@@ -4,7 +4,7 @@ import { navigationPanelActionIcon } from '@likec4/styles/recipes';
 import { Tooltip as Tooltip$1, ActionIcon, ThemeIcon, 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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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/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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.40.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';

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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutWarning = memo(() => {
   const [ctx, { toggleCompare }] = useDiagramCompareLayout();

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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.40.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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.js

@@ -9,7 +9,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function SearchControl() {
   const diagram = useDiagram();

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -8,8 +8,8 @@ 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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
 
 const selector = (ctx) => {
   const toggledFeatures = deriveToggledFeatures(ctx);

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.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/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.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
+import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.1_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.1_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.1_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.1_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.1_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.1_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.1_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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
+import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.40.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.40.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.40.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.40.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.40.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.40.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.40.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.40.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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/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.36.1_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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
+import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.40.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.40.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.40.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, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, ChangeEventHandler, InputEventHandler, ReactEventHandler, SubmitEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Key, Ref, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, ChangeEventHandler, InputEventHandler, ReactEventHandler, SubmitEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Ref, RefAttributes } from 'react';
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
     id?: string | undefined;
@@ -10,6 +10,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     className?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
+    key?: Key | null | undefined;
     dir?: string | undefined;
     property?: string | undefined;
     role?: AriaRole | undefined;
@@ -280,7 +281,6 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     is?: string | undefined;
     exportparts?: string | undefined;
     value?: string | number | readonly string[] | undefined;
-    key?: Key | null | undefined;
     ref?: Ref<HTMLButtonElement> | undefined;
     disabled?: boolean | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -10,7 +10,7 @@ import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { Tooltip } from '../_common.js';
 import { useNavigationActor } from '../hooks.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
 
 const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Button,

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { RichText } from '@likec4/core';
-import { css } from '@likec4/styles/css';
 import { styled } from '@likec4/styles/jsx';
 import { vstack } from '@likec4/styles/patterns';
 import { ScrollAreaAutosize } from '@mantine/core';
@@ -37,8 +36,26 @@ const WalkthroughPanel = memo(() => {
     m.div,
     {
       layout: "position",
-      className: css({
-        position: "relative"
+      className: vstack({
+        position: "relative",
+        layerStyle: "likec4.dropdown",
+        gap: "sm",
+        padding: "md",
+        paddingTop: "xxs",
+        pointerEvents: "all",
+        maxWidth: 300,
+        height: "max-content",
+        maxHeight: "calc(100cqh - 100px)",
+        width: "max-content",
+        cursor: "default",
+        overflow: "hidden",
+        "@/sm": {
+          minWidth: 400,
+          maxWidth: 550
+        },
+        "@/lg": {
+          maxWidth: 700
+        }
       }),
       initial: {
         opacity: 0,
@@ -52,48 +69,17 @@ const WalkthroughPanel = memo(() => {
         opacity: 0,
         translateX: -20
       },
-      children: /* @__PURE__ */ jsxs(
-        ScrollAreaAutosize,
-        {
-          className: vstack({
-            position: "absolute",
-            layerStyle: "likec4.dropdown",
-            gap: "sm",
-            padding: "md",
-            paddingTop: "xxs",
-            pointerEvents: "all",
-            maxWidth: "calc(100cqw - 32px)",
-            minWidth: "calc(100cqw - 50px)",
-            maxHeight: "calc(100cqh - 100px)",
-            width: "max-content",
-            cursor: "default",
-            overflow: "auto",
-            overscrollBehavior: "contain",
-            "@/sm": {
-              minWidth: 400,
-              maxWidth: 550
-            },
-            "@/lg": {
-              maxWidth: 700
-            }
-          }),
-          type: "scroll",
-          children: [
-            /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
-            /* @__PURE__ */ jsx(
-              Markdown,
-              {
-                value: notes,
-                fontSize: "sm",
-                emptyText: "No description",
-                className: css({
-                  userSelect: "all"
-                })
-              }
-            )
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxs(ScrollAreaAutosize, { type: "scroll", overscrollBehavior: "contain", children: [
+        /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
+        /* @__PURE__ */ jsx(
+          Markdown,
+          {
+            value: notes,
+            fontSize: "sm",
+            emptyText: "No description"
+          }
+        )
+      ] })
     }
   ) });
 });

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/createReactComponent.js

@@ -2,7 +2,7 @@ import { forwardRef, createElement } from 'react';
 import defaultAttributes from './defaultAttributes.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.js

@@ -1,5 +1,5 @@
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.36.1_react@19.2.4 → @tabler_icons-react@3.40.0_react@19.2.4}/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js

@@ -1,7 +1,7 @@
 import createReactComponent from '../createReactComponent.js';
 
 /**
- * @license @tabler/icons-react v3.36.1 - MIT
+ * @license @tabler/icons-react v3.40.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.