@likec4/diagram 1.40.0 → 1.42.0

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,

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -10,17 +10,17 @@ import { useSelector } from '@xstate/react';
 import { deepEqual } from 'fast-equals';
 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 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]",

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 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';
+import IconMenu2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
 
 const BurgerButton = () => {
   const actor = useNavigationActor();

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

@@ -4,14 +4,15 @@ import { HStack, Box, styled } from '@likec4/styles/jsx';
 import { hstack, vstack } from '@likec4/styles/patterns';
 import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
 import * as m from 'motion/react-m';
+import { useState } from 'react';
 import { Link } from '../../components/Link.js';
-import { useDiagram } from '../../hooks/useDiagram.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;
@@ -20,11 +21,11 @@ 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) => {
+  const [opened, setOpened] = useState(false);
   const data = useNavigationActorSnapshot(selector);
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
@@ -33,20 +34,21 @@ const ViewDetailsCard = (props) => {
       position: "bottom-end",
       shadow: "xl",
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      trapFocus: true,
       offset: {
         mainAxis: 4
       },
+      opened,
+      onChange: setOpened,
       ...portalProps,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length }),
-        /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data })
+        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length, onOpen: () => setOpened(true) }),
+        opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data, onClose: () => setOpened(false) })
       ]
     }
   );
 };
-const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
   UnstyledButton,
   {
     component: m.button,
@@ -55,6 +57,10 @@ const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.T
       scale: 0.95,
       translateY: 1
     },
+    onClick: (e) => {
+      e.stopPropagation();
+      onOpen();
+    },
     className: cx(
       "group",
       hstack({
@@ -113,11 +119,13 @@ const ViewDetailsCardDropdown = ({
     title,
     description,
     tags,
-    links,
-    relativePath
-  }
+    links
+  },
+  onClose
 }) => {
   const diagram = useDiagram();
+  useOnDiagramEvent("paneClick", onClose);
+  useOnDiagramEvent("nodeClick", onClose);
   return /* @__PURE__ */ jsxs(
     Popover.Dropdown,
     {
@@ -128,9 +136,10 @@ const ViewDetailsCardDropdown = ({
           layerStyle: "likec4.dropdown",
           gap: "md",
           padding: "md",
+          paddingBottom: "lg",
           pointerEvents: "all",
-          maxWidth: "calc(100cqw - 32px)",
-          minWidth: "calc(100cqw - 50px)",
+          maxWidth: "calc(100cqw - 52px)",
+          minWidth: "200px",
           maxHeight: "calc(100cqh - 100px)",
           width: "max-content",
           cursor: "default",
@@ -147,10 +156,10 @@ const ViewDetailsCardDropdown = ({
       ),
       children: [
         /* @__PURE__ */ jsxs("section", { children: [
-          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", children: title }),
+          /* @__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,
@@ -168,11 +177,11 @@ const ViewDetailsCardDropdown = ({
           /* @__PURE__ */ jsx(SectionHeader, { children: "Links" }),
           /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
         ] }),
-        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
+        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", style: { userSelect: "none" }, children: "No description" }),
         description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
           /* @__PURE__ */ jsx(
-            MarkdownBlock,
+            Markdown,
             {
               value: description,
               fontSize: "sm",
@@ -208,6 +217,7 @@ const ViewBadge = ({
             overflow: "visible",
             px: "1",
             color: {
+              _dark: "mantine.colors.gray[4]",
               _light: "mantine.colors.gray[8]"
             }
           }),

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;

package/dist/navigationpanel/hooks.js

@@ -12,11 +12,11 @@ const useNavigationActorRef = () => {
   }
   return ctx;
 };
-function useNavigationActorSnapshot(selector, compare = shallowEqual, deps) {
+function useNavigationActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useNavigationActorRef();
   return useSelector(actorRef, selector, compare);
 }
-function useNavigationActorContext(selector, compare = shallowEqual, deps) {
+function useNavigationActorContext(selector, compare = shallowEqual) {
   return useNavigationActorSnapshot((snapshot) => selector(snapshot.context), compare);
 }
 function useNavigationActor() {

package/dist/navigationpanel/styles.css.d.ts

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

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -7,9 +7,9 @@ import * as m from 'motion/react-m';
 import { isTruthy } from 'remeda';
 import { useDiagram, useDiagramContext } from '../../hooks/useDiagram.js';
 import { TriggerWalkthroughButton } from './DynamicViewControls.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 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 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';
+import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
+import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
+import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 
 const PrevNextButton = Button.withProps({