@likec4/diagram 1.45.0 → 1.46.2

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js

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

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.36.0_react@19.2.3}/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js

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

package/dist/overlays/Overlays.js

@@ -3,16 +3,15 @@ import { nonexhaustive } from '@likec4/core';
 import { useSelector } from '@xstate/react';
 import { animate } from 'motion';
 import { useReducedMotionConfig, LayoutGroup, AnimatePresence } from 'motion/react';
-import { useMemo, useEffect } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import { useEffect } from 'react';
 import { isNonNullish } from 'remeda';
-import { ErrorFallback } from '../components/ErrorFallback.js';
+import { ErrorBoundary } from '../components/ErrorFallback.js';
 import { ElementDetails } from './element-details/ElementDetails.js';
 import { Overlay } from './overlay/Overlay.js';
 import { RelationshipDetails } from './relationship-details/RelationshipDetails.js';
 import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser.js';
-import { useXYStore } from '../hooks/useXYFlow.js';
 import { DiagramFeatures } from '../context/DiagramFeatures.js';
+import { useDiagram } from '../hooks/safeContext.js';
 
 const selectOverlays = (s) => {
   return s.context.overlays.map((overlay) => {
@@ -43,23 +42,36 @@ const compareSelectOverlays = (a, b) => {
   });
 };
 function Overlays({ overlaysActorRef }) {
-  const xyflowDomNode = useXYStore((s) => s.domNode);
-  const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
-    xyflowDomNode
-  ]);
+  const diagram = useDiagram();
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
   const isMotionReduced = useReducedMotionConfig() ?? false;
   const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
   useEffect(() => {
+    const xyflowDomNode = diagram.getContext().xystore.getState().domNode;
+    const xyflowRendererDom = xyflowDomNode?.querySelector(".react-flow__renderer");
     if (!xyflowRendererDom || isMotionReduced) return;
-    animate(xyflowRendererDom, {
+    const current = animate(xyflowRendererDom, {
       opacity: isActiveOverlay ? 0.7 : 1,
       filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
       transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`
     }, {
       duration: isActiveOverlay ? 0.35 : 0.17
     });
-  }, [isActiveOverlay, xyflowRendererDom]);
+    let cleanupTm = null;
+    if (!isActiveOverlay) {
+      cleanupTm = setTimeout(() => {
+        xyflowRendererDom.style.transform = "";
+        xyflowRendererDom.style.filter = "";
+        cleanupTm = null;
+      }, 450);
+    }
+    return () => {
+      if (cleanupTm) {
+        clearTimeout(cleanupTm);
+      }
+      current.stop();
+    };
+  }, [isActiveOverlay]);
   const close = (actorRef) => {
     overlaysActorRef.send({ type: "close", actorId: actorRef.id });
   };
@@ -98,7 +110,7 @@ function Overlays({ overlaysActorRef }) {
         nonexhaustive(overlay);
     }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: overlaysReact }) }) }) });
 }
 
 export { Overlays };

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -30,22 +30,19 @@ const card = css({
   gap: "lg",
   justifyContent: "stretch",
   color: "mantine.colors.text",
-  backgroundColor: {
-    base: "mantine.colors.body",
-    _dark: "mantine.colors.dark[6]"
-  },
   boxShadow: "md",
   overflow: "hidden",
   border: "none",
-  backgroundImage: `
+  background: `[
     linear-gradient(180deg,
-      color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent),
-      color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px,
-      color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px,
-      transparent 80px
+    color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent),
+    color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px,
+    color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px,
+    transparent 80px
     ),
-    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
-  `,
+    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px),
+    {colors.likec4.overlay.body}
+  ]`,
   "& .react-flow__attribution": {
     display: "none"
   }

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -21,12 +21,12 @@ import { TabPanelStructure } from './TabPanelStructure.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 
 const Divider = Divider$1.withProps({
   mb: 8,

package/dist/overlays/element-details/MetadataValue.js

@@ -2,8 +2,8 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { UnstyledButton, Flex, Text, Box, Stack, Tooltip } from '@mantine/core';
 import { useState, useRef, useEffect } from 'react';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 function MetadataProvider({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
@@ -49,8 +49,7 @@ function TruncatedValue({ value, isExpanded }) {
 }
 function MultiValueDisplay({
   values,
-  isExpanded,
-  onToggle
+  isExpanded
 }) {
   if (isExpanded) {
     return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
@@ -239,8 +238,7 @@ function MetadataValue({ label, value }) {
           MultiValueDisplay,
           {
             values: elements,
-            isExpanded,
-            onToggle: handleToggle
+            isExpanded
           }
         ) : /* @__PURE__ */ jsx(
           Box,

package/dist/overlays/element-details/TabPanelDeployments.js

@@ -6,10 +6,10 @@ import 'fast-equals';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const DeploymentNodeRenderer = ({
   node

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -2,14 +2,16 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { nameFromFqn } from '@likec4/core';
 import { Stack, Group, Box, ThemeIcon, Text, Tooltip as Tooltip$1, ActionIcon, Paper } from '@mantine/core';
 import { useSelector } from '@xstate/react';
+import { useCallback } from 'react';
 import { unique } from 'remeda';
-import { useOverlaysActorRef } from '../../hooks/useOverlaysActor.js';
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
 import { useElementDetailsActorRef } from './actorContext.js';
 import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import 'fast-equals';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -25,9 +27,12 @@ function TabPanelRelationships({
   node,
   element
 }) {
-  const overlaysActor = useOverlaysActorRef();
+  const diagram = useDiagram();
   const delailsActor = useElementDetailsActorRef();
-  const relationshipsBrowserActor = useSelector(delailsActor, (s) => s.children[`${delailsActor.id}-relationships`]);
+  const relationshipsBrowserActor = useSelector(
+    delailsActor,
+    useCallback((s) => s.children[`${delailsActor.id}-relationships`], [delailsActor.id])
+  );
   const incoming = [...element.incoming()].map((r) => r.id);
   const outgoing = [...element.outgoing()].map((r) => r.id);
   const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
@@ -93,7 +98,7 @@ function TabPanelRelationships({
               scope,
               viewId
             } = relationshipsBrowserActor.getSnapshot().context;
-            overlaysActor.send({
+            diagram.overlays().send({
               type: "open.relationshipsBrowser",
               subject,
               scope,

package/dist/overlays/element-details/TabPanelStructure.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
 import { useMemo, useEffect } from 'react';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 const ElementLabel = ({
   element

package/dist/overlays/overlaysActor.js

@@ -93,7 +93,8 @@ const openElementDetails = () => machine.enqueueActions(({ context, enqueue, eve
   const id = `elementDetails-${context.seq}`;
   enqueue.spawnChild("elementDetails", {
     id,
-    input: event
+    input: event,
+    syncSnapshot: true
   });
   enqueue.assign({
     seq: context.seq + 1,
@@ -120,7 +121,8 @@ const openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue
   const id = `relationshipDetails-${context.seq}`;
   enqueue.spawnChild("relationshipDetails", {
     id,
-    input: event
+    input: event,
+    syncSnapshot: true
   });
   enqueue.assign({
     seq: context.seq + 1,
@@ -147,7 +149,8 @@ const openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueu
   const id = `relationshipsBrowser-${context.seq}`;
   enqueue.spawnChild("relationshipsBrowser", {
     id,
-    input: event
+    input: event,
+    syncSnapshot: true
   });
   enqueue.assign({
     seq: context.seq + 1,
@@ -162,7 +165,6 @@ const openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueu
   });
 });
 const openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
-  console.log("openOverlay event", event);
   assertEvent(event, [
     "open.elementDetails",
     "open.relationshipDetails",
@@ -186,7 +188,6 @@ const listenToEsc = () => machine.spawnChild("hotkey", {
 const stopListeningToEsc = () => machine.stopChild("hotkey");
 const checkState = () => machine.enqueueActions(({ enqueue, context }) => {
   if (context.overlays.length === 0) {
-    console.log("No overlays left, raising close event");
     enqueue.raise({ type: "close" });
   }
 });

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -17,9 +17,9 @@ import { layoutRelationshipDetails } from './layout.js';
 import { SelectEdge } from './SelectEdge.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,

package/dist/overlays/relationship-details/SelectEdge.js

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -6,9 +6,9 @@ import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -15,9 +15,9 @@ import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode } from './custom/EmptyNode.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,

package/dist/overlays/relationships-browser/SelectElement.js

@@ -7,8 +7,8 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -6,9 +6,9 @@ import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const selectSubject = (state) => state.context.subject;

package/dist/search/components/ElementsColumn.js

@@ -15,9 +15,9 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
-import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
+import { whenSearchAnimationEnds, stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {
@@ -247,17 +247,22 @@ function useHandleElementSelection() {
     if (views.length === 0) {
       return;
     }
-    const singleView = only(views);
-    if (singleView) {
-      searchActorRef.send({ type: "close" });
-      if (singleView.id !== diagram.currentView.id) {
-        setTimeout(() => {
-          diagram.navigateTo(singleView.id);
-        }, 100);
-      }
+    const elementFqn = element.id;
+    const onlyOneViewId = only(views)?.id;
+    if (!onlyOneViewId) {
+      searchActorRef.send({ type: "pickview.open", elementFqn });
       return;
     }
-    searchActorRef.send({ type: "pickview.open", elementFqn: element.id });
+    const isSameView = onlyOneViewId === diagram.currentView.id;
+    searchActorRef.send({ type: "close" });
+    whenSearchAnimationEnds(() => {
+      if (isSameView) {
+        diagram.focusOnElement(elementFqn);
+        return;
+      }
+      diagram.navigateTo(onlyOneViewId, void 0, elementFqn);
+    });
+    return;
   });
 }
 

package/dist/search/components/PickView.js

@@ -6,7 +6,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function PickView({ elementFqn }) {
   const searchActorRef = useSearchActor();
@@ -102,6 +102,7 @@ function PickView({ elementFqn }) {
                   view,
                   search: "",
                   loop: true,
+                  focusOnElement: elementFqn,
                   mod: {
                     autofocus: i === 0
                   }
@@ -117,6 +118,7 @@ function PickView({ elementFqn }) {
                   view,
                   search: "",
                   loop: true,
+                  focusOnElement: elementFqn,
                   mod: {
                     autofocus: i === 0 && scoped.length === 0
                   }

package/dist/search/components/SearchByTags.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;

package/dist/search/components/ViewsColum.d.ts

@@ -1,10 +1,12 @@
 import { LikeC4Model } from '@likec4/core/model';
+import { Fqn } from '@likec4/core/types';
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
 export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
 export declare const ViewsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
-export declare function ViewButton({ className, view, loop, search, ...props }: {
+export declare function ViewButton({ className, view, loop, search, focusOnElement, ...props }: {
     view: LikeC4Model.View;
     search: string;
     loop?: boolean;
+    focusOnElement?: Fqn;
 } & UnstyledButtonProps & ElementProps<'button'>): import("react/jsx-runtime").JSX.Element;

package/dist/search/components/ViewsColum.js

@@ -12,10 +12,10 @@ import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
-import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
+import { moveFocusToSearchInput, queryAllFocusable, centerY, whenSearchAnimationEnds } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {
@@ -80,16 +80,21 @@ const ViewsColumn = memo(() => {
   );
 });
 const btn = buttonsva();
-function ViewButton({ className, view, loop = false, search, ...props }) {
+function ViewButton({ className, view, loop = false, search, focusOnElement, ...props }) {
   const searchActorRef = useSearchActor();
   const diagram = useDiagram();
+  const nextViewId = view.id;
   const currentViewId = useCurrentViewId();
-  const isCurrentView = view.id === currentViewId;
+  const isCurrentView = nextViewId === currentViewId;
   const navigate = () => {
     searchActorRef.send({ type: "close" });
-    setTimeout(() => {
-      diagram.navigateTo(view.id);
-    }, 100);
+    whenSearchAnimationEnds(() => {
+      if (isCurrentView && focusOnElement) {
+        diagram.focusOnElement(focusOnElement);
+        return;
+      }
+      diagram.navigateTo(nextViewId, void 0, focusOnElement);
+    });
   };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
@@ -97,7 +102,7 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
       ...props,
       className: cx(btn.root, "group", focusable, viewButton, className),
       "data-likec4-view": view.id,
-      ...isCurrentView && { "data-disabled": true },
+      ...isCurrentView && !focusOnElement && { "data-disabled": true },
       onClick: (e) => {
         e.stopPropagation();
         navigate();