@likec4/diagram 1.41.0 → 1.42.1

package/dist/likec4diagram/xyflow-sequence/sequence-layout.js

@@ -0,0 +1,181 @@
+import { nonNullable } from '@likec4/core';
+import { RichText } from '@likec4/core/types';
+import { SeqZIndex, SeqParallelAreaColor } from './const.js';
+
+function sequenceLayoutToXY(view) {
+  const { actors, steps, compounds, parallelAreas, bounds } = view.sequenceLayout;
+  const xynodes = [];
+  const xyedges = [];
+  const getNode = (id) => {
+    return nonNullable(view.nodes.find((n) => n.id === id));
+  };
+  for (const compound of compounds) {
+    xynodes.push(toCompoundArea(compound, getNode(compound.origin), view));
+  }
+  for (const parallelArea of parallelAreas) {
+    xynodes.push(toSeqParallelArea(parallelArea, view));
+  }
+  for (const actor of actors) {
+    xynodes.push(toSeqActorNode(actor, getNode(actor.id), bounds, view));
+  }
+  for (const step of steps) {
+    const edge = view.edges.find((e) => e.id === step.id);
+    if (!edge) {
+      throw new Error(`Edge ${step.id} not found`);
+    }
+    xyedges.push(toSeqStepEdge(step, edge));
+  }
+  return {
+    bounds,
+    xynodes,
+    xyedges
+  };
+}
+function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
+  return {
+    id,
+    type: "view-group",
+    data: {
+      id: node.id,
+      title: node.title,
+      color: node.color ?? "gray",
+      shape: node.shape,
+      style: node.style,
+      tags: node.tags,
+      x,
+      y,
+      viewId: view.id,
+      depth,
+      isViewGroup: true
+    },
+    // zIndex: SeqZIndex.compound,
+    position: {
+      x,
+      y
+    },
+    draggable: false,
+    selectable: false,
+    focusable: false,
+    style: {
+      pointerEvents: "none"
+    },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height
+  };
+}
+function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
+  return {
+    id: `seq-parallel-${parallelPrefix}`,
+    type: "seq-parallel",
+    data: {
+      id: `seq-parallel-${parallelPrefix}`,
+      title: "PARALLEL",
+      technology: null,
+      color: SeqParallelAreaColor.default,
+      shape: "rectangle",
+      style: {},
+      tags: [],
+      x,
+      y,
+      level: 0,
+      icon: null,
+      width,
+      height,
+      description: RichText.EMPTY,
+      viewId: view.id,
+      parallelPrefix
+    },
+    zIndex: SeqZIndex.parallel,
+    position: {
+      x,
+      y
+    },
+    draggable: false,
+    deletable: false,
+    selectable: false,
+    focusable: false,
+    style: {
+      pointerEvents: "none"
+    },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height
+  };
+}
+function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view) {
+  return {
+    id,
+    type: "seq-actor",
+    data: {
+      id: actor.id,
+      x,
+      y,
+      level: 0,
+      icon: actor.icon ?? null,
+      isMultiple: actor.style.multiple ?? false,
+      title: actor.title,
+      width,
+      height,
+      color: actor.color,
+      navigateTo: actor.navigateTo ?? null,
+      shape: actor.shape,
+      style: actor.style,
+      tags: actor.tags,
+      modelFqn: actor.modelRef ?? null,
+      technology: actor.technology ?? null,
+      description: RichText.from(actor.description),
+      viewHeight: bounds.height,
+      viewId: view.id,
+      ports
+    },
+    deletable: false,
+    selectable: true,
+    zIndex: SeqZIndex.actor,
+    position: { x, y },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height
+  };
+}
+function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge) {
+  return {
+    id,
+    type: "seq-step",
+    data: {
+      id,
+      label: edge.label,
+      technology: edge.technology,
+      notes: RichText.from(edge.notes),
+      navigateTo: edge.navigateTo,
+      controlPoints: null,
+      labelBBox: {
+        x: 0,
+        y: 0,
+        width: labelBBox?.width ?? edge.labelBBox?.width ?? 32,
+        height: labelBBox?.height ?? edge.labelBBox?.height ?? 32
+      },
+      labelXY: null,
+      points: edge.points,
+      color: edge.color,
+      line: edge.line,
+      dir: "forward",
+      head: edge.head ?? "normal",
+      tail: edge.tail ?? "none",
+      astPath: edge.astPath
+    },
+    selectable: true,
+    focusable: false,
+    zIndex: 20,
+    interactionWidth: 40,
+    source: edge.source,
+    sourceHandle,
+    target: edge.target,
+    targetHandle
+  };
+}
+
+export { sequenceLayoutToXY };

package/dist/navigationpanel/NavigationPanel.js

@@ -1,16 +1,16 @@
 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 { 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 { useCurrentViewModel } from '../hooks/useCurrentViewModel.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';
@@ -22,7 +22,6 @@ import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughContro
 const NavigationPanel = memo(() => {
   const diagramActor = useDiagramActorRef();
   const viewModel = useCurrentViewModel();
-  const { portalProps } = useMantinePortalProps();
   const actorRef = useActorRef(
     navigationPanelActorLogic,
     {
@@ -42,13 +41,13 @@ const NavigationPanel = memo(() => {
   useUpdateEffect(() => {
     actorRef.send({ type: "update.inputs", inputs: { viewModel } });
   }, [viewModel]);
-  return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     VStack,
     {
-      className: "react-flow__panel",
       css: {
         alignItems: "flex-start",
         pointerEvents: "none",
+        position: "absolute",
         top: "0",
         left: "0",
         margin: "0",
@@ -74,7 +73,7 @@ const NavigationPanel = memo(() => {
         /* @__PURE__ */ jsx(WalkthroughPanel, {})
       ] })
     }
-  ) });
+  );
 });
 NavigationPanel.displayName = "NavigationPanel";
 const NavigationPanelImpl = ({ actor }) => {

package/dist/navigationpanel/NavigationPanelControls.js

@@ -35,8 +35,7 @@ const NavigationPanelControls = () => {
   const {
     enableSearch,
     enableNavigationButtons,
-    enableDynamicViewWalkthrough,
-    enableReadOnly
+    enableDynamicViewWalkthrough
   } = useEnabledFeatures();
   const {
     folders,
@@ -103,7 +102,7 @@ const NavigationPanelControls = () => {
       {
         layout: "position",
         className: hstack({
-          gap: "[3px]",
+          gap: "1",
           flexShrink: 1,
           flexGrow: 1,
           overflow: "hidden"
@@ -120,7 +119,7 @@ const NavigationPanelControls = () => {
       {
         layout: "position",
         className: hstack({
-          gap: "[1px]",
+          gap: "0.5",
           flexGrow: 0,
           _empty: {
             display: "none"

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -6,21 +6,24 @@ import { HStack, VStack, Box } from '@likec4/styles/jsx';
 import { vstack, hstack } from '@likec4/styles/patterns';
 import { PopoverDropdown, createScopedKeydownHandler, ScrollAreaAutosize, Input, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
 import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
+import { useMountEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
 import { deepEqual } from 'fast-equals';
+import { useRef } from 'react';
 import { isEmpty, pipe, sort, isArray } from 'remeda';
 import { NavigationLink } from '../components/NavigationLink.js';
-import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
 import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, 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.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.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';
-import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.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 IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
-import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
+import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
+import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
 
 const scopedKeydownHandler = createScopedKeydownHandler({
   siblingSelector: "[data-likec4-focusable]",
@@ -70,7 +73,7 @@ function NavigationPanelDropdown() {
         /* @__PURE__ */ jsx(
           ScrollAreaAutosize,
           {
-            scrollbars: "xy",
+            scrollbars: "x",
             type: "auto",
             offsetScrollbars: "present",
             classNames: {
@@ -81,6 +84,11 @@ function NavigationPanelDropdown() {
                 ]
               })
             },
+            styles: {
+              viewport: {
+                overscrollBehavior: "none"
+              }
+            },
             children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, { searchQuery: normalizeViewPath(searchQuery).toLowerCase() }) : /* @__PURE__ */ jsx(FolderColumns, {})
           }
         )
@@ -123,7 +131,7 @@ function SearchResults({ searchQuery }) {
           "calc(100cqh - 200px)"
         ]
       }),
-      children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: found.map((v) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: found.map((v) => /* @__PURE__ */ jsx(
         FoundedView,
         {
           view: v,
@@ -282,7 +290,7 @@ const ViewTypeIcon = {
     }
   ),
   deployment: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss }),
-  dynamic: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss })
+  dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, { size: 18, className: viewTypeIconCss })
 };
 const ColumnScrollArea = ScrollAreaAutosize.withProps({
   scrollbars: "y",
@@ -332,10 +340,18 @@ function FolderColumns() {
   const columns = useNavigationActorContext(selectColumns, deepEqual);
   return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i) => [
     i > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, "divider" + i),
-    /* @__PURE__ */ jsx(FolderColumn, { data: column }, column.folderPath)
+    /* @__PURE__ */ jsx(
+      FolderColumn,
+      {
+        data: column,
+        isLast: i == columns.length - 1
+      },
+      column.folderPath
+    )
   ]) });
 }
-function FolderColumn({ data }) {
+function FolderColumn({ data, isLast }) {
+  const ref = useRef(null);
   const actor = useNavigationActorRef();
   const onItemClicked = (item) => (e) => {
     e.stopPropagation();
@@ -345,7 +361,15 @@ function FolderColumn({ data }) {
       actor.send({ type: "select.view", viewId: item.viewId });
     }
   };
-  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
+  useMountEffect(() => {
+    if (isLast && ref.current) {
+      ref.current.scrollIntoView({
+        inline: "nearest",
+        behavior: "smooth"
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx(Box, { mb: "1", ref, children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
     FolderColumnItem,
     {
       columnItem: item,

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.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

package/dist/navigationpanel/actor.d.ts

@@ -1,6 +1,6 @@
 import { ViewId } from '@likec4/core/types';
 import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, MetaObject, ActorRefFromLogic, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
-import { CurrentViewModel } from '../likec4model/LikeC4ModelContext';
+import { CurrentViewModel } from '../hooks/useCurrentViewModel';
 export interface NavigationPanelActorInput {
     viewModel: CurrentViewModel;
 }

package/dist/navigationpanel/controls/BurgerButton.js

@@ -1,16 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { UnstyledButton } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { Logo, LogoIcon } from '../../components/Logo.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
-import { PanelActionIcon } from '../_common.js';
 import { useNavigationActor } from '../hooks.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';
 
 const BurgerButton = () => {
   const actor = useNavigationActor();
   const { onBurgerMenuClick } = useDiagramEventHandlers();
-  return /* @__PURE__ */ jsx(
-    PanelActionIcon,
+  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsxs(
+    UnstyledButton,
     {
-      layout: "position",
       onMouseEnter: () => {
         actor.send({ type: "breadcrumbs.mouseEnter.root" });
       },
@@ -26,9 +28,45 @@ const BurgerButton = () => {
         }
         actor.send({ type: "breadcrumbs.click.root" });
       },
-      children: /* @__PURE__ */ jsx(IconMenu2, { style: { width: "80%", height: "80%" } })
+      className: cx(
+        "mantine-active",
+        hstack({
+          padding: "0.5",
+          // _active: {
+          //   transform: 'translateY(1px)',
+          // },
+          width: {
+            base: "[20px]",
+            "@/md": "[64px]"
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Logo,
+          {
+            className: css({
+              display: {
+                base: "none",
+                "@/md": "block"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LogoIcon,
+          {
+            className: css({
+              display: {
+                base: "block",
+                "@/md": "none"
+              }
+            })
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 
 export { BurgerButton };

package/dist/navigationpanel/controls/NavigationButtons.js

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

package/dist/navigationpanel/controls/OpenSource.js

@@ -3,7 +3,7 @@ import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
 import { useCurrentViewId } from '../../hooks/useCurrentViewId.js';
 import { Tooltip, PanelActionIcon } from '../_common.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 IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const OpenSource = () => {
   const viewId = useCurrentViewId();

package/dist/navigationpanel/controls/SearchControl.js

@@ -6,7 +6,7 @@ import { UnstyledButton } from '@mantine/core';
 import { isMacOs } from '@xyflow/system';
 import * as m from 'motion/react-m';
 import { useDiagram } from '../../hooks/useDiagram.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function SearchControl() {
   const diagram = useDiagram();

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -4,8 +4,8 @@ import { hstack } from '@likec4/styles/patterns';
 import { UnstyledButton } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { useDiagramContext, useDiagram } from '../../hooks/useDiagram.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';
+import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
 
 const selector = (state) => ({
   visible: state.features.enableReadOnly !== true,

package/dist/navigationpanel/controls/ViewDetailsCard.js

@@ -9,10 +9,10 @@ import { Link } from '../../components/Link.js';
 import { useDiagram, 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.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
-import { ElementTag } from '../../base/primitives/element/ElementTags.js';
-import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import { ElementTag } from '../../base-primitives/element/ElementTags.js';
+import { Markdown } from '../../base-primitives/Markdown.js';
 
 const selector = ({ context }) => {
   const view = context.viewModel;
@@ -21,8 +21,7 @@ const selector = ({ context }) => {
     title: view.titleOrUntitled,
     description: view.description,
     tags: view.tags,
-    links: view.links,
-    relativePath: view.$view.relativePath
+    links: view.links
   };
 };
 const ViewDetailsCard = (props) => {
@@ -120,8 +119,7 @@ const ViewDetailsCardDropdown = ({
     title,
     description,
     tags,
-    links,
-    relativePath
+    links
   },
   onClose
 }) => {
@@ -161,7 +159,7 @@ const ViewDetailsCardDropdown = ({
           /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", lh: "sm", children: title }),
           /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-start", mt: "1", children: [
             /* @__PURE__ */ jsx(ViewBadge, { label: "id", value: id }),
-            /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag, i) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag) => /* @__PURE__ */ jsx(
               ElementTag,
               {
                 tag,
@@ -183,7 +181,7 @@ const ViewDetailsCardDropdown = ({
         description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
           /* @__PURE__ */ jsx(
-            MarkdownBlock,
+            Markdown,
             {
               value: description,
               fontSize: "sm",

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } 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 { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../likec4model/useLikeC4Project.js';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../hooks/useLikeC4Project.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
 
 function ProjectsMenu(props) {
   const { projects, onProjectChange } = useLikeC4ProjectsContext();

package/dist/navigationpanel/editorpanel/CenterCamera.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useDiagram } from '../../hooks/useDiagram.js';
 import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.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 IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
 
 const CenterCamera = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

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

package/dist/navigationpanel/editorpanel/LayoutDriftNotification.js

@@ -3,7 +3,7 @@ import { HoverCard, HoverCardTarget, ActionIcon, HoverCardDropdown, Notification
 import { css } from '@likec4/styles/css';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.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 IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutDriftNotification = () => {
   const portalProps = useMantinePortalProps();

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -6,15 +6,15 @@ import { useDiagram } from '../../hooks/useDiagram.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.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';
+import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
 
 const Action = ({
   label,

package/dist/navigationpanel/hooks.d.ts

@@ -1,10 +1,10 @@
 import { ViewId } from '@likec4/core';
-import { DependencyList, Provider } from 'react';
 import { NavigationPanelActorContext, NavigationPanelActorEvent, NavigationPanelActorRef, NavigationPanelActorSnapshot } from './actor';
+import { Provider } from 'react';
 export declare const NavigationPanelActorContextProvider: Provider<NavigationPanelActorRef>;
 export declare const useNavigationActorRef: () => NavigationPanelActorRef;
-export declare function useNavigationActorSnapshot<T = unknown>(selector: (context: NavigationPanelActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
-export declare function useNavigationActorContext<T = unknown>(selector: (context: NavigationPanelActorContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
+export declare function useNavigationActorSnapshot<T = unknown>(selector: (context: NavigationPanelActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+export declare function useNavigationActorContext<T = unknown>(selector: (context: NavigationPanelActorContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 export interface NavigationActor {
     readonly actorRef: NavigationPanelActorRef;
     send: (event: NavigationPanelActorEvent) => void;