@likec4/diagram 1.48.0 → 1.50.0

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

@@ -9,6 +9,7 @@ import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
+import { NodeNotes } from './NodeNotes.js';
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
@@ -70,7 +71,7 @@ function CompoundDetailsButtonWithHandler(props) {
   );
 }
 function ElementNode(props) {
-  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -79,11 +80,12 @@ function ElementNode(props) {
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
+    enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }
 function DeploymentNode(props) {
-  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -92,6 +94,7 @@ function DeploymentNode(props) {
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
+    enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }

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

@@ -7,11 +7,13 @@ import { BorderStyleOption, GoToSourceButton, BrowseRelationshipsButton } from '
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
 import { useHandlers } from './useHandlers.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
+const SortedElementShapes = [...ElementShapes].sort();
 function ElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
+  const { enableVscode, enableRelationshipBrowser, enableNotes } = useEnabledFeatures();
+  const increaseOffset = !!(enableNotes && props.data.notes);
   const {
     data: {
       shape,
@@ -25,6 +27,7 @@ function ElementToolbar(props) {
     {
       nodeProps: props,
       title: modelFqn,
+      offset: increaseOffset ? 20 : 10,
       align: "start",
       children: [
         /* @__PURE__ */ jsx(
@@ -129,9 +132,11 @@ function ElementShapeButton({
           {
             variant: "light",
             color: "gray",
-            size: "xs",
+            size: "compact-sm",
             fz: "xxs",
-            px: "xs",
+            px: 4,
+            pl: 8,
+            py: 2,
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
             children: elementShape
           }
@@ -141,11 +146,10 @@ function ElementShapeButton({
           {
             onDoubleClick: stopPropagation,
             onClick: stopPropagation,
-            children: ElementShapes.map((shape) => /* @__PURE__ */ jsx(
+            children: SortedElementShapes.map((shape) => /* @__PURE__ */ jsx(
               MenuItem,
               {
-                fz: "xs",
-                fw: "500",
+                fz: "sm",
                 value: shape,
                 rightSection: elementShape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
                 onClick: (e) => {

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

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { SegmentedControl, Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { SegmentedControl, ActionIcon, Tooltip as Tooltip$1 } from '@mantine/core';
 import { useState, useEffect } from 'react';
 import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -1,7 +1,7 @@
 import { css } from '@likec4/styles/css';
 
 const toolbarTitle = css({
-  color: "mantine.colors.dimmed",
+  color: "text.dimmed",
   fontSize: "xxs",
   fontWeight: "bold",
   maxWidth: "220px",

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -2,9 +2,9 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { autoUpdate, computePosition, offset, autoPlacement, size, hide } from '@floating-ui/dom';
 import { nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import { VStack, styled, HStack, Box, Txt } from '@likec4/styles/jsx';
+import { VStack, HStack, Box, styled } from '@likec4/styles/jsx';
 import { bleed } from '@likec4/styles/patterns';
-import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, ActionIcon, Text, Notification } from '@mantine/core';
+import { Divider, ScrollAreaAutosize, Button, TooltipGroup, ActionIcon, Text, Tooltip as Tooltip$1 } from '@mantine/core';
 import { useActorRef, useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { memo, useEffect, useCallback, useRef, useState, useLayoutEffect, Fragment, forwardRef } from 'react';
@@ -21,10 +21,10 @@ import { Endpoint, RelationshipTitle } from './components.js';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { useRootContainerRef } from '../../context/RootContainerContext.js';
 import { roundDpr } from '../../utils/roundDpr.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
@@ -158,7 +158,7 @@ const RelationshipPopoverInternal = ({
   onMouseLeave
 }) => {
   const ref = useRef(null);
-  const { enableNavigateTo, enableVscode, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
   const { onOpenSource } = useDiagramEventHandlers();
   const containerRef = useRootContainerRef();
   const [referenceEl, setReferenceEl] = useState(null);
@@ -285,7 +285,6 @@ const RelationshipPopoverInternal = ({
             paddingTop: "2"
           },
           children: [
-            enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, { diagramEdge }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -326,25 +325,6 @@ const RelationshipPopoverInternal = ({
     }
   );
 };
-const EdgeDrifts = ({ diagramEdge }) => {
-  const drifts = diagramEdge.drifts;
-  if (!drifts || drifts.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Notification,
-    {
-      color: "orange",
-      withBorder: false,
-      withCloseButton: false,
-      title: "Changes:",
-      children: drifts.map((drift) => /* @__PURE__ */ jsxs(Txt, { mt: "1", size: "xs", children: [
-        "- ",
-        drift
-      ] }, drift))
-    }
-  );
-};
 const Relationship = forwardRef(({
   viewId,
   relationship: r,
@@ -543,7 +523,7 @@ const Label = styled("div", {
     fontWeight: "medium",
     userSelect: "none",
     lineHeight: "sm",
-    color: "mantine.colors.dimmed"
+    color: "text.dimmed"
   }
 });
 const Tooltip = Tooltip$1.withProps({

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -1,17 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useActorRef, useSelector } from '@xstate/react';
+import { useActorRef } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
-import { shallowEqual } from 'fast-equals';
 import { useRef, useState, useEffect, memo } from 'react';
 import { isNullish } from 'remeda';
 import { ErrorBoundary } from '../../components/ErrorFallback.js';
-import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
+import { useDiagramEventHandlersRef } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
-import { CurrentViewModelContext } from '../../context/LikeC4ModelContext.js';
 import { useEditorActorLogic } from '../../editor/useEditorActorLogic.js';
 import { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram } from '../../hooks/safeContext.js';
-import { useOnDiagramEvent, useDiagramContext } from '../../hooks/useDiagram.js';
-import { useOptionalLikeC4Model } from '../../hooks/useLikeC4Model.js';
+import { useDiagramSnapshot, useOnDiagramEvent, selectDiagramActorContext } from '../../hooks/useDiagram.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { makeDiagramApi } from './diagram-api.js';
 import { diagramMachine } from './machine.js';
@@ -30,7 +27,8 @@ function DiagramActorProvider({
   dynamicViewVariant: _defaultVariant
 }) {
   const xystore = useStoreApi();
-  const editorActor = useEditorActorLogic(view.id);
+  const editorActor = useEditorActorLogic();
+  const features = useEnabledFeatures();
   const actor = useActorRef(
     diagramMachine.provide({
       actors: {
@@ -50,6 +48,7 @@ function DiagramActorProvider({
         nodesDraggable,
         nodesSelectable,
         where,
+        features,
         dynamicViewVariant: _defaultVariant
       }
     }
@@ -60,7 +59,6 @@ function DiagramActorProvider({
       previous: actorRef.current.getSnapshot().context,
       current: actor.getSnapshot().context
     });
-    actorRef.current.send({ type: "destroy" });
     actorRef.current = actor;
   }
   const [api, setApi] = useState(() => makeDiagramApi(actorRef));
@@ -69,38 +67,36 @@ function DiagramActorProvider({
       if (api2.ref === actorRef) {
         return api2;
       }
-      console.warn(
+      console.error(
         "DiagramMachine actorRef changed, creating new DiagramApi instance, this should not happen during the lifetime of the actor"
       );
       return makeDiagramApi(actorRef);
     });
   }, [actorRef]);
-  const features = useEnabledFeatures();
-  useEffect(
-    () => actor.send({ type: "update.features", features }),
-    [features, actor]
-  );
-  useEffect(
+  useEffect(() => {
+    actor.send({ type: "update.features", features });
+  }, [actor, features]);
+  useUpdateEffect(
     () => actor.send({
       type: "update.inputs",
       inputs: { zoomable, where, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
     }),
-    [zoomable, where, pannable, fitViewPadding, actor, nodesDraggable, nodesSelectable]
+    [actor, zoomable, where, pannable, fitViewPadding, nodesDraggable, nodesSelectable]
   );
   useUpdateEffect(() => {
     if (!_defaultVariant) return;
     actor.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
-  }, [_defaultVariant, actor]);
+  }, [actor, _defaultVariant]);
   useEffect(
     () => actor.send({ type: "update.view", view, source: "external" }),
     [actor, view]
   );
   return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actor, children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, { value: api, children: [
-    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef: actor, children }) }),
-    /* @__PURE__ */ jsx(DiagramActorEventListener, {})
+    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(ToggledFeatures, { children }) }),
+    /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})
   ] }) });
 }
-const selectFromActor = ({ context }) => {
+const selectToggledFeatures = selectDiagramActorContext((context) => {
   let toggledFeatures = context.toggledFeatures;
   const hasDrifts = context.view.drifts != null && context.view.drifts.length > 0;
   const enableCompareWithLatest = hasDrifts && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
@@ -112,56 +108,34 @@ const selectFromActor = ({ context }) => {
       enableReadOnly
     };
   }
-  return {
-    toggledFeatures,
-    viewId: context.view.id
-  };
-};
-const compareSelected = (a, b) => {
-  return a.viewId === b.viewId && shallowEqual(a.toggledFeatures, b.toggledFeatures);
-};
-function CurrentViewModelProvider({ children, actorRef }) {
-  const { viewId, toggledFeatures } = useSelector(
-    actorRef,
-    selectFromActor,
-    compareSelected
-  );
-  const likec4model = useOptionalLikeC4Model();
-  const viewmodel = likec4model?.findView(viewId) ?? null;
-  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
+  return toggledFeatures;
+});
+function ToggledFeatures({ children }) {
+  const toggledFeatures = useDiagramSnapshot(selectToggledFeatures);
+  useUpdateEffect(() => {
+    DiagramToggledFeaturesPersistence.write(toggledFeatures);
+  }, [toggledFeatures]);
+  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children });
 }
-const DiagramActorEventListener = memo(() => {
+const PropagateDiagramActorEvents = memo(() => {
   const diagram = useDiagram();
-  const {
-    onNavigateTo,
-    onOpenSource,
-    // onChange,
-    onLayoutTypeChange,
-    handlersRef
-  } = useDiagramEventHandlers();
-  useOnDiagramEvent("openSource", ({ params }) => onOpenSource?.(params));
-  useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo?.(viewId));
+  const handlers = useDiagramEventHandlersRef();
+  useOnDiagramEvent("openSource", ({ params }) => handlers.current.onOpenSource?.(params));
+  useOnDiagramEvent("navigateTo", ({ viewId }) => handlers.current.onNavigateTo?.(viewId));
   useOnDiagramEvent("onLayoutTypeChange", ({ layoutType }) => {
-    onLayoutTypeChange?.(layoutType);
+    handlers.current.onLayoutTypeChange?.(layoutType);
   });
   useOnDiagramEvent(
     "initialized",
     ({ instance: xyflow }) => {
       try {
-        handlersRef.current.onInitialized?.({ diagram, xyflow });
+        handlers.current.onInitialized?.({ diagram, xyflow });
       } catch (error) {
         console.error(error);
       }
     },
     { once: true }
   );
-  const toggledFeatures = useDiagramContext(
-    (ctx) => ctx.toggledFeatures,
-    shallowEqual
-  );
-  useUpdateEffect(() => {
-    DiagramToggledFeaturesPersistence.write(toggledFeatures);
-  }, [toggledFeatures]);
   return null;
 });
 

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -62,6 +62,17 @@ export interface DiagramApi<A extends Any = Unknown> {
     openRelationshipDetails(...params: [edgeId: EdgeId] | [source: Fqn<A>, target: Fqn<A>]): void;
     updateNodeData(nodeId: NodeId, data: PartialDeep<Types.NodeData>): void;
     updateEdgeData(edgeId: EdgeId, data: PartialDeep<Types.EdgeData>): void;
+    highlightNode(nodeId: NodeId): void;
+    highlightEdge(edgeId: EdgeId): void;
+    unhighlightAll(): void;
+    /**
+     * Center viewport on a given node
+     */
+    centerViewportOnNode(target: NodeId): void;
+    /**
+     * Center viewport on a given edge (centering on edge means including both source and target nodes in view)
+     */
+    centerViewportOnEdge(target: EdgeId): void;
     /**
      * Start editing, either node or edge
      */

package/dist/likec4diagram/state/diagram-api.js

@@ -133,6 +133,21 @@ function makeDiagramApi(actorRef) {
     },
     switchDynamicViewVariant: (variant) => {
       actorRef.current.send({ type: "switch.dynamicViewVariant", variant });
+    },
+    highlightNode: (nodeId) => {
+      actorRef.current.send({ type: "highlight.node", nodeId });
+    },
+    highlightEdge: (edgeId) => {
+      actorRef.current.send({ type: "highlight.edge", edgeId });
+    },
+    unhighlightAll: () => {
+      actorRef.current.send({ type: "unhighlight.all" });
+    },
+    centerViewportOnNode: (nodeId) => {
+      actorRef.current.send({ type: "xyflow.centerViewport", nodeId });
+    },
+    centerViewportOnEdge: (edgeId) => {
+      actorRef.current.send({ type: "xyflow.centerViewport", edgeId });
     }
   };
 }

package/dist/likec4diagram/state/machine.actions.d.ts

@@ -910,6 +910,33 @@ export declare const tagHighlight: () => ActionFunction<Context, Events, Events,
         id: "editor";
     };
 }>, never, never, never, never>;
+export declare const highlightNodeOrEdge: () => ActionFunction<Context, Events, Events, undefined, Values<{
+    hotkeyActorLogic: {
+        src: "hotkeyActorLogic";
+        logic: HotkeyActorLogic;
+        id: "hotkey";
+    };
+    overlaysActorLogic: {
+        src: "overlaysActorLogic";
+        logic: OverlaysActorLogic;
+        id: "overlays";
+    };
+    searchActorLogic: {
+        src: "searchActorLogic";
+        logic: SearchActorLogic;
+        id: "search";
+    };
+    mediaPrintActorLogic: {
+        src: "mediaPrintActorLogic";
+        logic: MediaPrintActorLogic;
+        id: "mediaPrint";
+    };
+    editorActor: {
+        src: "editorActor";
+        logic: EditorActorLogic;
+        id: "editor";
+    };
+}>, never, never, never, never>;
 export declare const assignToggledFeatures: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
         src: "hotkeyActorLogic";

package/dist/likec4diagram/state/machine.actions.js

@@ -1,4 +1,6 @@
-import { nonNullable, BBox, nonexhaustive, invariant } from '@likec4/core';
+import { exact, nonNullable, nonexhaustive, invariant } from '@likec4/core';
+import { BBox } from '@likec4/core/geometry';
+import { difference } from '@likec4/core/utils';
 import { nodeToRect } from '@xyflow/system';
 import { produce } from 'immer';
 import { hasAtLeast, isTruthy } from 'remeda';
@@ -8,7 +10,7 @@ import { createLayoutConstraints } from '../useLayoutConstraints.js';
 import { getAligner, toNodeRect } from './aligners.js';
 import { resetEdgeControlPoints, mergeXYNodesEdges, focusNodesEdges } from './assign.js';
 import { setViewport, setViewportCenter, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
-export { assignViewportBefore, fitDiagram, fitFocusedBounds, raiseSetViewport, raiseUpdateView, returnViewportBefore } from './machine.actions.layout.js';
+export { assignViewportBefore, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseSetViewport, raiseUpdateView, returnViewportBefore } from './machine.actions.layout.js';
 import { machine } from './machine.setup.js';
 import { typedSystem, findDiagramNode, findDiagramEdge, viewBounds } from './utils.js';
 import { Base } from '../../base/Base.js';
@@ -91,15 +93,18 @@ const assignFocusedNode = () => machine.assign(({ event }) => {
 const resetLastClickedNode = () => machine.assign(() => ({
   lastClickedNode: null
 }));
-const updateFeatures = () => machine.assign(({ event }) => {
+const updateFeatures = () => machine.assign(({ context, event }) => {
   assertEvent(event, "update.features");
   return {
-    features: { ...event.features }
+    features: {
+      ...context.features,
+      ...event.features
+    }
   };
 });
 const updateInputs = () => machine.assign(({ event }) => {
   assertEvent(event, "update.inputs");
-  return { ...event.inputs };
+  return exact({ ...event.inputs });
 });
 const assignXYDataFromView = (view) => machine.assign(({ context, event }) => {
   let xydata;
@@ -294,7 +299,7 @@ const layoutAlign = (params) => machine.createAction(({ context, event }) => {
   const xystore = nonNullable(context.xystore, "xystore is not initialized");
   const { nodeLookup, parentLookup } = xystore.getState();
   const selectedNodes = new Set(nodeLookup.values().filter((n) => n.selected).map((n) => n.id));
-  const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))];
+  const nodesToAlign = [...difference(selectedNodes, new Set(parentLookup.keys()))];
   if (!hasAtLeast(nodesToAlign, 2)) {
     console.warn("At least 2 nodes must be selected to align");
     return;
@@ -361,6 +366,49 @@ const tagHighlight = () => machine.assign(({ context, event }) => {
     })
   };
 });
+const highlightNodeOrEdge = () => machine.assign(({ context, event }) => {
+  assertEvent(event, ["highlight.edge", "highlight.node"]);
+  switch (event.type) {
+    case "highlight.node": {
+      const nodeId = event.nodeId;
+      const node = context.xynodes.find((n) => n.id === nodeId);
+      if (!node) {
+        console.warn(`Node with id ${nodeId} not found for highlighting`);
+        return {};
+      }
+      return {
+        xynodes: context.xynodes.map((n) => {
+          return Base.setDimmed(n, n.id === nodeId ? false : true);
+        }),
+        xyedges: context.xyedges.map(Base.setData({
+          dimmed: true,
+          active: false
+        }))
+      };
+    }
+    case "highlight.edge": {
+      const edgeId = event.edgeId;
+      let edge = context.xyedges.find((e) => e.id === edgeId);
+      if (!edge) {
+        console.warn(`Edge with id ${edgeId} not found for highlighting`);
+        return {};
+      }
+      return {
+        xynodes: context.xynodes.map((n) => {
+          return Base.setDimmed(n, edge.source !== n.id && edge.target !== n.id);
+        }),
+        xyedges: context.xyedges.map((e) => {
+          return Base.setData(e, {
+            dimmed: e.id !== edgeId,
+            active: e.id === edgeId
+          });
+        })
+      };
+    }
+    default:
+      nonexhaustive(event);
+  }
+});
 const assignToggledFeatures = () => machine.assign(({ context, event }) => {
   assertEvent(event, "toggle.feature");
   const feature = `enable${event.feature}`;
@@ -559,30 +607,39 @@ const openSourceOfFocusedOrLastClickedNode = () => machine.enqueueActions(({ con
   }
 });
 const ensureOverlaysActor = () => machine.enqueueActions(({ enqueue, check, system }) => {
-  const enableOverlays = check("enabled: Overlays");
-  const hasRunning = typedSystem(system).overlaysActorRef;
-  if (enableOverlays && !hasRunning) {
-    enqueue.spawnChild("overlaysActorLogic", { id: "overlays", systemId: "overlays" });
+  const enabled = check("enabled: Overlays");
+  const running = typedSystem(system).overlaysActorRef;
+  if (enabled && !running) {
+    enqueue.spawnChild("overlaysActorLogic", {
+      id: "overlays",
+      systemId: "overlays",
+      syncSnapshot: true
+    });
     return;
   }
-  if (!enableOverlays && hasRunning) {
-    enqueue.sendTo(hasRunning, {
+  if (!enabled && running) {
+    enqueue.sendTo(running, {
       type: "close.all"
     });
-    enqueue.stopChild("overlays");
+    enqueue.stopChild(running);
   }
 });
-const ensureSearchActor = () => machine.enqueueActions(({ enqueue, context: { features: { enableSearch } }, system }) => {
-  const hasRunning = typedSystem(system).searchActorRef;
-  if (enableSearch && !hasRunning) {
-    enqueue.spawnChild("searchActorLogic", { id: "search", systemId: "search" });
+const ensureSearchActor = () => machine.enqueueActions(({ enqueue, check, system }) => {
+  const enabled = check("enabled: Search");
+  const running = typedSystem(system).searchActorRef;
+  if (enabled && !running) {
+    enqueue.spawnChild("searchActorLogic", {
+      id: "search",
+      systemId: "search",
+      syncSnapshot: true
+    });
     return;
   }
-  if (!enableSearch && hasRunning) {
-    enqueue.sendTo(hasRunning, {
+  if (!enabled && running) {
+    enqueue.sendTo(running, {
       type: "close"
     });
-    enqueue.stopChild("search");
+    enqueue.stopChild(running);
   }
 });
 const onEdgeMouseEnter = () => machine.enqueueActions(({ enqueue, context, event }) => {
@@ -764,4 +821,4 @@ const updateView = () => machine.enqueueActions(
   }
 );
 
-export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, focusOnNodesAndEdges, handleNavigate, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, resetEdgesControlPoints, resetLastClickedNode, sendSynced, setViewport, setViewportCenter, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };
+export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, focusOnNodesAndEdges, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, resetEdgesControlPoints, resetLastClickedNode, sendSynced, setViewport, setViewportCenter, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };

package/dist/likec4diagram/state/machine.actions.layout.d.ts

@@ -254,6 +254,7 @@ export declare const setViewportCenter: (params?: {
         params: unknown;
     };
 }>, never, EmittedEvents>;
+export declare const centerOnNodeOrEdge: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
 export declare const fitDiagram: (params?: {
     duration?: number;
     bounds?: BBox;