@likec4/diagram 1.43.0 → 1.45.0

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

@@ -1,16 +1,16 @@
-import { invariant, nonNullable, delay } from '@likec4/core/utils';
+import { nonNullable, invariant, delay } from '@likec4/core/utils';
 import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { getViewportForBounds } from '@xyflow/system';
-import { prop, omit, isNullish } from 'remeda';
-import { setup, assign, fromPromise, assertEvent, enqueueActions, cancel, raise } from 'xstate';
+import { hasAtLeast, omit, isNullish } from 'remeda';
+import { setup, assign, enqueueActions, cancel, raise, fromPromise, assertEvent } from 'xstate';
 import { MinZoom, ZIndexes } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';
 import { typedSystem } from '../../likec4diagram/state/utils.js';
+import { getNodeCenter } from '../../utils/xyflow.js';
 import { ViewPadding } from './const.js';
 import { viewToNodesEdge } from './useViewToNodesEdges.js';
-import { Base } from '../../base/types.js';
-import { centerXYInternalNode } from '../../utils/xyflow.js';
+import { Base } from '../../base/Base.js';
 
 const findRootSubject = (nodes) => nodes.find(
   (n) => n.data.column === "subjects" && isNullish(n.parentId)
@@ -54,7 +54,7 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
     y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
   };
   const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
-  const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode);
+  const currentSubjectCenter = getNodeCenter(currentSubjectInternalNode);
   const nested = /* @__PURE__ */ new Set();
   currentNodes.forEach((n) => {
     if (n.id === existingNode.id) {
@@ -108,17 +108,20 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
   if (signal.aborted) {
     return updateXYData();
   }
-  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 300 });
+  const duration = 300;
+  xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration, interpolate: "smooth" });
+  await delay(duration);
   await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
   return updateXYData();
 });
-const _relationshipsBrowserLogic = setup({
+const machine = setup({
   types: {
     context: {},
     tags: "",
     children: {},
     input: {},
     events: {}
+    // emitted: {} as EmittedEvents,
   },
   actors: {
     layouter
@@ -133,73 +136,93 @@ const _relationshipsBrowserLogic = setup({
       }
       return false;
     }
-  },
-  actions: {
-    "xyflow.init": assign(({ event }) => {
-      assertEvent(event, "xyflow.init");
-      return {
-        xyflow: event.instance,
-        xystore: event.store
-      };
-    }),
-    "update.view": assign(({ event }) => {
-      assertEvent(event, "update.view");
-      return {
-        layouted: event.layouted,
-        ...viewToNodesEdge(event.layouted)
-      };
-    }),
-    "xyflow:updateNodeInternals": ({ context }) => {
-      invariant(context.xystore, "xystore is not initialized");
-      const { domNode, updateNodeInternals } = context.xystore.getState();
-      const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
-      if (nodeIds.size === 0 || !domNode) {
-        return;
-      }
-      const updates = /* @__PURE__ */ new Map();
-      for (const updateId of nodeIds) {
-        const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${updateId}"]`);
-        if (nodeElement) {
-          updates.set(updateId, { id: updateId, nodeElement, force: true });
-        }
-      }
-      updateNodeInternals(updates, { triggerFitView: false });
-    },
-    "xyflow:fitDiagram": ({ context }, params) => {
-      let { duration, bounds } = params ?? {};
-      duration ??= 450;
-      const { xyflow, xystore } = context;
-      invariant(xyflow, "xyflow is not initialized");
-      invariant(xystore, "xystore is not initialized");
-      bounds ??= context.layouted?.bounds;
-      const maxZoom = Math.max(xyflow.getZoom(), 1);
-      if (bounds) {
-        const { width, height } = xystore.getState();
-        const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
-        xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
-      } else {
-        xyflow.fitView({
-          minZoom: MinZoom,
-          maxZoom,
-          padding: ViewPadding,
-          ...duration > 0 && { duration }
-        }).catch(console.error);
-      }
-    },
-    "xyflow.applyNodeChanges": assign(({ context, event }) => {
-      assertEvent(event, "xyflow.applyNodeChanges");
-      return {
-        xynodes: applyNodeChanges(event.changes, context.xynodes)
-      };
-    }),
-    "xyflow.applyEdgeChanges": assign(({ context, event }) => {
-      assertEvent(event, "xyflow.applyEdgeChanges");
-      return {
-        xyedges: applyEdgeChanges(event.changes, context.xyedges)
-      };
-    })
   }
-}).createMachine({
+});
+const xyflowInit = () => machine.assign(({ event }) => {
+  assertEvent(event, "xyflow.init");
+  return {
+    xyflow: event.instance,
+    xystore: event.store
+  };
+});
+const updateView = () => machine.assign(({ event }) => {
+  assertEvent(event, "update.view");
+  return {
+    layouted: event.layouted,
+    ...viewToNodesEdge(event.layouted)
+  };
+});
+const xyflowUpdateNodeInternals = () => machine.createAction(({ context }) => {
+  invariant(context.xystore, "xystore is not initialized");
+  const { domNode, updateNodeInternals } = context.xystore.getState();
+  const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
+  if (nodeIds.size === 0 || !domNode) {
+    return;
+  }
+  const updates = /* @__PURE__ */ new Map();
+  const domNodes = domNode.querySelectorAll(".react-flow__node");
+  for (const nodeElement of domNodes) {
+    const nodeId = nodeElement.getAttribute("data-id");
+    if (nodeId && nodeIds.has(nodeId)) {
+      updates.set(nodeId, { id: nodeId, nodeElement, force: true });
+    }
+  }
+  updateNodeInternals(updates, { triggerFitView: false });
+});
+const xyflowFitDiagram = (params) => machine.createAction(({ context, event }) => {
+  params ??= event.type === "fitDiagram" ? event : {};
+  let { duration, bounds } = params ?? {};
+  duration ??= 450;
+  const { xyflow, xystore } = context;
+  invariant(xyflow, "xyflow is not initialized");
+  invariant(xystore, "xystore is not initialized");
+  bounds ??= context.layouted?.bounds;
+  const maxZoom = Math.max(xyflow.getZoom(), 1);
+  if (bounds) {
+    const { width, height } = xystore.getState();
+    const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
+    xyflow.setViewport(viewport, duration > 0 ? { duration, interpolate: "smooth" } : void 0).catch(
+      console.error
+    );
+  } else {
+    xyflow.fitView({
+      minZoom: MinZoom,
+      maxZoom,
+      padding: ViewPadding,
+      ...duration > 0 && { duration, interpolate: "smooth" }
+    }).catch(console.error);
+  }
+});
+const xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "xyflow.applyNodeChanges");
+  return {
+    xynodes: applyNodeChanges(event.changes, context.xynodes)
+  };
+});
+const xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "xyflow.applyEdgeChanges");
+  return {
+    xyedges: applyEdgeChanges(event.changes, context.xyedges)
+  };
+});
+const openRelationshipSource = () => machine.enqueueActions(({ system, event }) => {
+  if (event.type !== "xyflow.edgeClick") {
+    return;
+  }
+  const diagramActor = typedSystem(system).diagramActorRef;
+  const relations = event.edge.data.relations;
+  if (hasAtLeast(relations, 1)) {
+    diagramActor.send({ type: "open.source", relation: relations[0] });
+  }
+});
+const dispose = () => machine.assign({
+  xyflow: null,
+  layouted: null,
+  xystore: null,
+  xyedges: [],
+  xynodes: []
+});
+const _relationshipsBrowserLogic = machine.createMachine({
   id: "relationships-browser",
   context: ({ input }) => ({
     subject: input.subject,
@@ -218,21 +241,21 @@ const _relationshipsBrowserLogic = setup({
   initial: "initializing",
   on: {
     "xyflow.applyNodeChanges": {
-      actions: "xyflow.applyNodeChanges"
+      actions: xyflowApplyNodeChanges()
     },
     "xyflow.applyEdgeChanges": {
-      actions: "xyflow.applyEdgeChanges"
+      actions: xyflowApplyEdgeChanges()
     }
   },
   states: {
     initializing: {
       on: {
         "xyflow.init": {
-          actions: "xyflow.init",
+          actions: xyflowInit(),
           target: "isReady"
         },
         "update.view": {
-          actions: "update.view",
+          actions: updateView(),
           target: "isReady"
         },
         "stop": "closed",
@@ -243,7 +266,7 @@ const _relationshipsBrowserLogic = setup({
       always: [{
         guard: "isReady",
         actions: [
-          { type: "xyflow:fitDiagram", params: { duration: 0 } },
+          xyflowFitDiagram({ duration: 0 }),
           raise({ type: "xyflow.updateNodeInternals" }, { delay: 150 })
         ],
         target: "active"
@@ -267,19 +290,26 @@ const _relationshipsBrowserLogic = setup({
             }
           })
         },
-        "xyflow.edgeClick": {
-          guard: "hasViewId",
-          actions: enqueueActions(({ event, context, system, enqueue }) => {
-            if (event.edge.selected || event.edge.data.relations.length > 1) {
-              enqueue.sendTo(typedSystem(system).overlaysActorRef, {
-                type: "open.relationshipDetails",
-                viewId: context.viewId,
-                source: event.edge.data.sourceFqn,
-                target: event.edge.data.targetFqn
-              });
-            }
-          })
-        },
+        "xyflow.edgeClick": [
+          {
+            guard: "hasViewId",
+            actions: enqueueActions(({ event, context, system, enqueue }) => {
+              if (event.edge.selected || event.edge.data.relations.length > 1) {
+                enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+                  type: "open.relationshipDetails",
+                  viewId: context.viewId,
+                  source: event.edge.data.sourceFqn,
+                  target: event.edge.data.targetFqn
+                });
+              } else {
+                enqueue(openRelationshipSource());
+              }
+            })
+          },
+          {
+            actions: openRelationshipSource()
+          }
+        ],
         "navigate.to": {
           actions: [
             assign({
@@ -290,10 +320,10 @@ const _relationshipsBrowserLogic = setup({
           ]
         },
         "xyflow.paneDblClick": {
-          actions: "xyflow:fitDiagram"
+          actions: xyflowFitDiagram()
         },
         "update.view": {
-          actions: "update.view",
+          actions: updateView(),
           target: ".layouting"
         },
         "change.scope": {
@@ -302,13 +332,10 @@ const _relationshipsBrowserLogic = setup({
           })
         },
         "xyflow.updateNodeInternals": {
-          actions: "xyflow:updateNodeInternals"
+          actions: xyflowUpdateNodeInternals()
         },
         "fitDiagram": {
-          actions: {
-            type: "xyflow:fitDiagram",
-            params: prop("event")
-          }
+          actions: xyflowFitDiagram()
         },
         "xyflow.resized": {
           actions: [
@@ -317,7 +344,7 @@ const _relationshipsBrowserLogic = setup({
           ]
         },
         "xyflow.init": {
-          actions: "xyflow.init"
+          actions: xyflowInit()
         },
         "xyflow.unmount": {
           target: "initializing"
@@ -409,8 +436,8 @@ const _relationshipsBrowserLogic = setup({
                   navigateFromNode: null
                 });
                 enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 50 });
-                for (let i = 0; i < 6; i++) {
-                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i * 100 });
+                for (let i = 1; i < 8; i++) {
+                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 120 + i * 75 });
                 }
               })
             }
@@ -434,16 +461,11 @@ const _relationshipsBrowserLogic = setup({
     },
     closed: {
       id: "closed",
-      type: "final"
+      type: "final",
+      entry: dispose()
     }
   },
-  exit: assign({
-    xyflow: null,
-    layouted: null,
-    xystore: null,
-    xyedges: [],
-    xynodes: []
-  })
+  exit: dispose()
 });
 const relationshipsBrowserLogic = _relationshipsBrowserLogic;
 

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

@@ -1,51 +1,58 @@
 import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useCurrentViewId } from '../../../hooks/useCurrentView.js';
+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 { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.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 IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.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 selectSubject = (state) => state.context.subject;
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();
   const diagram = useDiagram();
   const currentViewId = useCurrentViewId();
   const browser = useRelationshipsBrowser();
-  const subject = useRelationshipsBrowserState((s) => s.context.subject);
-  const buttons = [];
+  const subject = useRelationshipsBrowserState(selectSubject);
   const { navigateTo, fqn } = props.data;
-  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
-    buttons.push({
-      key: "navigate",
-      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.navigateTo(navigateTo);
-      }
-    });
-  }
-  if (fqn !== subject) {
-    buttons.push({
-      key: "relationships",
-      icon: /* @__PURE__ */ jsx(IconTransform, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        browser.navigateTo(fqn, props.id);
-      }
-    });
-  }
-  if (enableVscode) {
-    buttons.push({
-      key: "goToSource",
-      icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openSource({ element: fqn });
-      }
-    });
-  }
+  const buttons = useMemo(() => {
+    const buttons2 = [];
+    if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
+      buttons2.push({
+        key: "navigate",
+        icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigateTo(navigateTo);
+        }
+      });
+    }
+    if (fqn !== subject) {
+      buttons2.push({
+        key: "relationships",
+        icon: /* @__PURE__ */ jsx(IconTransform, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          browser.navigateTo(fqn, props.id);
+        }
+      });
+    }
+    if (enableVscode) {
+      buttons2.push({
+        key: "goToSource",
+        icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openSource({ element: fqn });
+        }
+      });
+    }
+    return buttons2;
+  }, [navigateTo, enableNavigateTo, currentViewId, fqn, subject, enableVscode, diagram, browser, props.id]);
   return /* @__PURE__ */ jsx(
     ElementActionButtons,
     {

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

@@ -2,7 +2,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { Tooltip } from '@mantine/core';
 import { getBezierPath } from '@xyflow/system';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { useRelationshipsBrowser } from '../hooks.js';
 import { memoEdge } from '../../../base-primitives/memoEdge.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';

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

@@ -1,7 +1,10 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Handle, Position } from '@xyflow/react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementActions } from './ElementActions.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';

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

@@ -1,5 +1,4 @@
 import { nonNullable } from '@likec4/core';
-import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { createContext, useMemo, useContext } from 'react';
@@ -10,7 +9,7 @@ function useRelationshipsBrowserActor() {
 }
 function useRelationshipsBrowserState(selector, compare = shallowEqual) {
   const actor = useRelationshipsBrowserActor();
-  return useSelector(actor, useCallbackRef(selector), compare);
+  return useSelector(actor, selector, compare);
 }
 function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor();
@@ -22,10 +21,12 @@ function useRelationshipsBrowser() {
     getState: () => actor.getSnapshot().context,
     send: actor.send,
     updateView: (layouted) => {
-      actor.send({
-        type: "update.view",
-        layouted
-      });
+      if (actor.getSnapshot().status === "active") {
+        actor.send({
+          type: "update.view",
+          layouted
+        });
+      }
     },
     changeScope: (scope) => {
       actor.send({

package/dist/overlays/relationships-browser/layout.d.ts

@@ -1,5 +1,5 @@
 import { RelationshipsViewData } from '@likec4/core/compute-view/relationships';
-import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, MarkdownOrString, ViewId } from '@likec4/core/types';
 import { LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipsBrowserTypes } from './_types';
 export type LayoutRelationshipsViewResult = {
@@ -12,7 +12,7 @@ export type LayoutRelationshipsViewResult = {
 export declare namespace LayoutRelationshipsViewResult {
     const Empty: ElementKind;
     type Node = Omit<DiagramNode, 'deploymentRef' | 'description' | 'inEdges' | 'outEdges'> & {
-        description: RichTextOrEmpty;
+        description: MarkdownOrString | null;
         column: RelationshipsBrowserTypes.Column;
         ports: RelationshipsBrowserTypes.Ports;
         existsInCurrentView: boolean;

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

@@ -1,7 +1,7 @@
 import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
-import { RichText, exact } from '@likec4/core/types';
+import { preferSummary, exact } from '@likec4/core/types';
 import { toArray, invariant, ifind, nonNullable, DefaultMap } from '@likec4/core/utils';
 import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, omit, find, only, unique, tap, reduce, sortBy } from 'remeda';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
@@ -329,7 +329,7 @@ function layoutRelationshipsView(data, scope) {
         x: position.x,
         y: position.y,
         title: "empty node",
-        description: RichText.EMPTY,
+        description: null,
         technology: null,
         tags: [],
         links: [],
@@ -372,7 +372,7 @@ function layoutRelationshipsView(data, scope) {
       x: position.x,
       y: position.y,
       title: element.title,
-      description: element.summary,
+      description: preferSummary(element.$element) ?? null,
       technology: element.technology,
       tags: [...element.tags],
       links: null,

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

@@ -37,9 +37,6 @@ function viewToNodesEdge(view) {
     const id = node.id;
     const base = {
       id,
-      draggable: false,
-      selectable: true,
-      focusable: true,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       style: {

package/dist/overlays/types.d.ts

@@ -1,29 +1,28 @@
-import { ActorRefFrom } from 'xstate';
-import { ElementDetailsLogic, Events as ElementDetailsEvents, Input as ElementDetailsInput } from './element-details/actor';
-import { Events as RelationshipDetailsEvents, Input as RelationshipDetailsInput, RelationshipDetailsLogic } from './relationship-details/actor';
-import { Events as RelationshipsBrowserEvents, Input as RelationshipsBrowserInput, RelationshipsBrowserLogic } from './relationships-browser/actor';
+import { ElementDetailsActorRef, ElementDetailsInput, ElementDetailsLogic } from './element-details/actor';
+import { RelationshipDetailsActorRef, RelationshipDetailsInput, RelationshipDetailsLogic } from './relationship-details/actor';
+import { RelationshipsBrowserActorRef, RelationshipsBrowserInput, RelationshipsBrowserLogic } from './relationships-browser/actor';
 export declare namespace Overlays {
     namespace ElementDetails {
-        type Events = ElementDetailsEvents;
-        type Input = ElementDetailsInput;
-        type Logic = ElementDetailsLogic;
-        interface ActorRef extends ActorRefFrom<ElementDetailsLogic> {
+        interface Input extends ElementDetailsInput {
+        }
+        interface Logic extends ElementDetailsLogic {
+        }
+        interface ActorRef extends ElementDetailsActorRef {
         }
     }
     namespace RelationshipDetails {
-        type Events = RelationshipDetailsEvents;
         type Input = RelationshipDetailsInput;
         interface Logic extends RelationshipDetailsLogic {
         }
-        interface ActorRef extends ActorRefFrom<RelationshipDetailsLogic> {
+        interface ActorRef extends RelationshipDetailsActorRef {
         }
     }
     namespace RelationshipsBrowser {
-        type Events = RelationshipsBrowserEvents;
-        type Input = RelationshipsBrowserInput;
+        interface Input extends RelationshipsBrowserInput {
+        }
         interface Logic extends RelationshipsBrowserLogic {
         }
-        interface ActorRef extends ActorRefFrom<RelationshipsBrowserLogic> {
+        interface ActorRef extends RelationshipsBrowserActorRef {
         }
     }
 }

package/dist/search/Search.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { Box, VStack } from '@likec4/styles/jsx';
 import { Group, Grid, GridCol, Title, ScrollArea } from '@mantine/core';
-import { useCallbackRef, useHotkeys } from '@mantine/hooks';
+import { useHotkeys } from '@mantine/hooks';
 import { useTimeoutEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
 import { AnimatePresence, LayoutGroup } from 'motion/react';
@@ -11,6 +11,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { isTruthy } from 'remeda';
 import { ErrorFallback } from '../components/ErrorFallback.js';
 import { DiagramFeatures } from '../context/DiagramFeatures.js';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
 import { Overlay } from '../overlays/overlay/Overlay.js';
 import { ElementsColumn } from './components/ElementsColumn.js';
 import { PickView } from './components/PickView.js';

package/dist/search/components/ElementsColumn.js

@@ -2,12 +2,14 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ifilter, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core/utils';
 import { cx } from '@likec4/styles/css';
 import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { memo, useMemo, useEffect } from 'react';
 import { isEmpty, pipe, reduce, only, first } from 'remeda';
 import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
-import { useDiagram } from '../../hooks/useDiagram.js';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { sortByLabel } from '../../hooks/useLikeC4ElementsTree.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
@@ -15,7 +17,7 @@ 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 { NothingFound } from './ViewsColum.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 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';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {

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.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.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';
 
 function PickView({ elementFqn }) {
   const searchActorRef = useSearchActor();