@likec4/diagram 1.34.2 → 1.35.0

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -10,12 +10,12 @@ import { findDiagramNode, findDiagramEdge } from '../../../state/utils.js';
 import { menuDropdown, endpoint, title, menuItemRelationship } from './RelationshipsDropdownMenu.css.js';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconInfoCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 import { useEnabledFeatures, IfEnabled } from '../../../context/DiagramFeatures.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
-import IconArrowRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconArrowRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -3,8 +3,8 @@ import { hasAtLeast } from '@likec4/core';
 import { useMemo } from 'react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
 const ElementActions = ({

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -6,8 +6,8 @@ import { stopPropagation } from '../../../../utils/xyflow.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -6,8 +6,8 @@ import { useState } from 'react';
 import { keys } from 'remeda';
 import { useDiagram } from '../../../../hooks/useDiagram.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const {
   primary,

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js

@@ -7,7 +7,7 @@ import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
-import IconLayoutDashboard from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
+import IconLayoutDashboard from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
 
 const selector = (state) => ({
   viewId: state.view.id,

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,11 +1,12 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core';
+import { hstack } from '@likec4/styles/patterns';
+import { ActionIconGroup, Stack, Group, Box } from '@mantine/core';
 import { m, LayoutGroup } from 'motion/react';
 import { memo } from 'react';
 import { SearchControl } from '../../../components/SearchControl.js';
 import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
-import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from '../../../hooks/useDiagram.js';
+import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
 import { LayoutDriftNotification } from './LayoutDriftNotification.js';
@@ -16,9 +17,9 @@ import { ToggleReadonly } from './ToggleReadonly.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconFocusCentered from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
-import IconMenu2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconFocusCentered from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+import IconMenu2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
 const ControlsDefaultLayout = ({
@@ -27,9 +28,8 @@ const ControlsDefaultLayout = ({
   search,
   actionsGroup
 }) => /* @__PURE__ */ jsxs(
-  Group,
+  m.div,
   {
-    component: m.div,
     initial: {
       opacity: 0.05,
       translateX: -30,
@@ -45,13 +45,15 @@ const ControlsDefaultLayout = ({
       translateX: -30,
       translateY: -10
     },
-    align: "flex-start",
     className: cx(
+      hstack({
+        gap: "sm",
+        alignItems: "flex-start"
+      }),
       "react-flow__panel",
       panel,
       "likec4-top-left-panel"
     ),
-    gap: "xs",
     onClick: stopPropagation,
     children: [
       /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
@@ -116,7 +118,6 @@ const Controls = memo(() => {
           }
         }
       ),
-      syncInProgressBadge: /* @__PURE__ */ jsx(SyncLayoutBadge, {}),
       actionsGroup: /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
         enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
           ActionIcon,
@@ -149,10 +150,5 @@ const Controls = memo(() => {
     }
   ) });
 });
-const SyncLayoutBadge = () => {
-  const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));
-  if (!isPending) return null;
-  return /* @__PURE__ */ jsx(Badge, { color: "pink", radius: "xs", size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(Loader, { color: "orange", size: 8 }), children: "Pending..." });
-};
 
 export { Controls };

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { HoverCard, HoverCardTarget, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
 import { css } from '@likec4/styles/css';
 import { ActionIcon } from './_shared.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
   HoverCard,

package/dist/likec4diagram/ui/controls/ManualLayoutToolsButton.js

@@ -2,15 +2,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from '@mantine/core';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
-import IconLayoutCollage from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
-import IconLayoutBoardSplit from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
-import IconLayoutAlignLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
-import IconLayoutAlignCenter from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
-import IconLayoutAlignRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
-import IconLayoutAlignTop from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
-import IconLayoutAlignMiddle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
-import IconLayoutAlignBottom from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
-import IconRouteOff from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
+import IconLayoutCollage from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
 
 const Action = ({
   label,

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { AnimatePresence, m } from 'motion/react';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { ActionIcon } from './_shared.js';
-import IconChevronLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const NavigationButtons = () => {
   const diagram = useDiagram();
@@ -18,6 +18,7 @@ const NavigationButtons = () => {
     hasStepBack && /* @__PURE__ */ jsx(
       ActionIcon,
       {
+        variant: "subtle",
         component: m.button,
         onClick: (e) => {
           e.stopPropagation();
@@ -37,6 +38,7 @@ const NavigationButtons = () => {
     hasStepForward && /* @__PURE__ */ jsx(
       ActionIcon,
       {
+        variant: "subtle",
         component: m.button,
         layout: true,
         initial: { opacity: 0.05, transform: "translateX(10px)" },

package/dist/likec4diagram/ui/controls/ToggleReadonly.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
-import IconLock from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
-import IconLockOpen2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLock from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
 
 const selector = (state) => ({
   visible: state.features.enableReadOnly !== true,

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { RichText } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
 import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
@@ -7,24 +6,27 @@ import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { card, title, description } from './DiagramTitlePanel.css.js';
-import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
+import { useCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
+import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
 import { MarkdownBlock } from '../../../base/primitives/MarkdownBlock.js';
 
 function selector(context) {
   return {
-    id: context.view.id,
-    title: context.view.title ?? "untitled",
-    description: RichText.from(context.view.description),
-    links: context.view.links,
+    // id: context.view.id,
+    // title: context.view.title ?? 'untitled',
+    // description: RichText.from(context.view.description),
+    // links: context.view.links,
     isNotActiveWalkthrough: context.activeWalkthrough === null
   };
 }
 function DiagramTitlePanel() {
-  const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext(selector);
+  const view = useCurrentViewModel();
+  const { isNotActiveWalkthrough } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
   });
+  const title$1 = view.title ?? "untitled";
   const toggle = () => setCollapsed((v) => !v);
   return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     m.div,
@@ -111,12 +113,12 @@ function DiagramTitlePanel() {
                         "id:",
                         " "
                       ] }),
-                      id
+                      view.id
                     ]
                   }
                 )
               ] }),
-              description$1.nonEmpty && /* @__PURE__ */ jsx(
+              view.description.nonEmpty && /* @__PURE__ */ jsx(
                 Spoiler,
                 {
                   maxHeight: 60,
@@ -127,12 +129,12 @@ function DiagramTitlePanel() {
                     {
                       className: description,
                       textScale: 0.9,
-                      value: description$1
+                      value: view.description
                     }
                   )
                 }
               ),
-              description$1.isEmpty && /* @__PURE__ */ jsx(
+              view.description.isEmpty && /* @__PURE__ */ jsx(
                 Text,
                 {
                   component: "div",
@@ -141,14 +143,14 @@ function DiagramTitlePanel() {
                   children: "no description"
                 }
               ),
-              links && /* @__PURE__ */ jsx(
+              view.links.length > 0 && /* @__PURE__ */ jsx(
                 Stack,
                 {
                   mt: "xs",
                   gap: 4,
                   justify: "stretch",
                   align: "stretch",
-                  children: links.map((link) => /* @__PURE__ */ jsx(Link, { value: link }, link.url))
+                  children: view.links.map((link) => /* @__PURE__ */ jsx(Link, { value: link }, link.url))
                 }
               )
             ] })

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

@@ -9,9 +9,9 @@ import { useDiagramContext, useDiagram } 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 IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 
 const ElementNotation = ({ value }) => {

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -6,10 +6,10 @@ import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { parallelStateFrame, btn, buttons, container } from './DynamicViewWalkthrough.css.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
-import IconPlayerPlayFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
-import IconPlayerSkipBackFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
-import IconPlayerStopFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
-import IconPlayerSkipForwardFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
+import IconPlayerPlayFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+import IconPlayerSkipBackFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
+import IconPlayerStopFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
+import IconPlayerSkipForwardFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s) => s.width <= 750);

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,3 +1,6 @@
-import { LikeC4Model } from '@likec4/core/model';
+import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
+import { aux, DiagramView } from '@likec4/core/types';
 import { Context } from 'react';
 export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;
+export type CurrentViewModel = LikeC4ViewModel<aux.UnknownLayouted, DiagramView<aux.UnknownLayouted>>;
+export declare const CurrentViewModelContext: Context<CurrentViewModel | null>;

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
+const CurrentViewModelContext = createContext(null);
 
-export { LikeC4ModelContext };
+export { CurrentViewModelContext, LikeC4ModelContext };

package/dist/likec4model/index.d.ts

@@ -1,2 +1,3 @@
+export { useCurrentViewModel, } from './useCurrentViewModel';
 export { useLikeC4ElementsTree, } from './useLikeC4ElementsTree';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './useLikeC4Model';

package/dist/likec4model/useCurrentViewModel.d.ts

@@ -0,0 +1,2 @@
+import { CurrentViewModel } from './LikeC4ModelContext';
+export declare function useCurrentViewModel(): CurrentViewModel;

package/dist/likec4model/useCurrentViewModel.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { CurrentViewModelContext } from './LikeC4ModelContext.js';
+
+function useCurrentViewModel() {
+  const vm = useContext(CurrentViewModelContext);
+  if (!vm) {
+    throw new Error("No LikeC4ViewModel in context found");
+  }
+  return vm;
+}
+
+export { useCurrentViewModel };

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,10 +1,7 @@
 import { aux, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
 import { TagSpecification, ElementSpecification, RelationshipSpecification, CustomColorDefinitions } from '@likec4/core';
-export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>;
-export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>;
-export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>;
-export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>;
-export declare function useLikeC4ViewModel<A extends aux.Any = aux.Unknown>(viewId: aux.LooseViewId<A>): LikeC4ViewModel<aux.toLayouted<A>> | null;
+export declare function useLikeC4Model<A extends aux.Any = aux.UnknownLayouted>(): LikeC4Model<A>;
+export declare function useLikeC4ViewModel<A extends aux.Any = aux.UnknownLayouted>(viewId: aux.ViewId<A>): LikeC4ViewModel<A>;
 export declare function useLikeC4Specification(): {
     tags: {
         [x: string]: TagSpecification;

package/dist/likec4model/useLikeC4Model.js

@@ -1,31 +1,25 @@
-import { useContext } from 'react';
-import { isString } from 'remeda';
+import { deepEqual } from 'fast-equals';
+import { useContext, useState, useEffect } from 'react';
 import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 
-function useLikeC4Model(type) {
+function useLikeC4Model() {
   const model = useContext(LikeC4ModelContext);
   if (!model) {
     throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
   }
-  if (isString(type) && model.stage !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
-  }
   return model;
 }
 function useLikeC4ViewModel(viewId) {
-  const model = useLikeC4Model("layouted");
-  const view = model.findView(viewId);
-  if (!view) {
-    return null;
-  }
-  if (!view.isDiagram()) {
-    throw new Error(`View "${viewId}" is not layouted`);
-  }
-  return view;
+  const model = useLikeC4Model();
+  return model.view(viewId);
 }
 function useLikeC4Specification() {
   const model = useLikeC4Model();
-  return model.$data.specification;
+  const [specification, setSpecification] = useState(model.$data.specification);
+  useEffect(() => {
+    setSpecification((current) => deepEqual(current, model.$data.specification) ? current : model.$data.specification);
+  }, [model]);
+  return specification;
 }
 
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel };

package/dist/navigationpanel/NavigationPanel.d.ts

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

package/dist/navigationpanel/NavigationPanel.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VStack } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { Portal, Popover, PopoverTarget } from '@mantine/core';
+import { useUpdateEffect } from '@react-hookz/web';
+import { useActorRef, useSelector } from '@xstate/react';
+import { LayoutGroup, AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { memo, useEffect } from 'react';
+import { useDiagramActorRef } from '../hooks/safeContext.js';
+import { useDiagramContext } from '../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
+import { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
+import { navigationPanelActorLogic } from './actor.js';
+import { NavigationPanelActorContextProvider } from './hooks.js';
+import { NavigationPanelControls } from './NavigationPanelControls.js';
+import { NavigationPanelDropdown } from './NavigationPanelDropdown.js';
+import { EditorPanel } from './editorpanel/EditorPanel.js';
+import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughControls.js';
+
+const NavigationPanel = memo(() => {
+  const diagramActor = useDiagramActorRef();
+  const viewModel = useCurrentViewModel();
+  const { portalProps } = useMantinePortalProps();
+  const actorRef = useActorRef(
+    navigationPanelActorLogic,
+    {
+      input: {
+        viewModel
+      }
+    }
+  );
+  useEffect(() => {
+    const subscription = actorRef.on("trigger.navigateTo", (event) => {
+      if (diagramActor.getSnapshot().context.view.id !== event.viewId) {
+        diagramActor.send({ type: "navigate.to", viewId: event.viewId });
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [actorRef, diagramActor]);
+  useUpdateEffect(() => {
+    actorRef.send({ type: "update.inputs", inputs: { viewModel } });
+  }, [viewModel]);
+  return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+    VStack,
+    {
+      className: "react-flow__panel",
+      css: {
+        gap: "sm",
+        margin: "sm",
+        alignItems: "flex-start",
+        pointerEvents: "none",
+        top: 0,
+        left: 0,
+        maxWidth: [
+          "calc(100vw - 2 * {spacing.sm})",
+          "calc(100cqw - 2 * {spacing.sm})"
+        ],
+        width: "max-content",
+        overflow: "hidden",
+        smDown: {
+          margin: 0,
+          width: "100%",
+          gap: "2xs",
+          maxWidth: [
+            "calc(100vw)",
+            "calc(100cqw)"
+          ]
+        }
+      },
+      children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
+        /* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
+        /* @__PURE__ */ jsx(EditorPanel, {})
+      ] })
+    }
+  ) });
+});
+NavigationPanel.displayName = "NavigationPanel";
+const NavigationPanelImpl = ({ actor }) => {
+  const opened = useSelector(actor, (s) => s.hasTag("active"));
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      offset: {
+        mainAxis: 4
+      },
+      middlewares: { flip: false },
+      opened,
+      shadow: "md",
+      position: "bottom-start",
+      trapFocus: true,
+      ...portalProps,
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
+      children: [
+        /* @__PURE__ */ jsx(NavigationPanelPopoverTarget, { actor }),
+        /* @__PURE__ */ jsx(NavigationPanelDropdown, {})
+      ]
+    }
+  );
+};
+const NavigationPanelPopoverTarget = ({ actor }) => {
+  const isActiveWalkthrough = useDiagramContext((c) => c.activeWalkthrough !== null);
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layout: true,
+      className: hstack({
+        layerStyle: "likec4.panel",
+        position: "relative",
+        gap: "xs",
+        cursor: "pointer",
+        paddingRight: "md",
+        pointerEvents: "all",
+        width: "100%"
+      }),
+      onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave" }),
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: isActiveWalkthrough ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {}) })
+    }
+  ) }) });
+};
+
+export { NavigationPanel };

package/dist/navigationpanel/NavigationPanelControls.d.ts

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