@likec4/diagram 1.43.0 → 1.45.0

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

@@ -1,18 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import { invariant } from '@likec4/core';
 import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
-import { useState } from 'react';
-import { useDiagram } from '../../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.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';
-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.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.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';
 
-const SemanticColors = [
-  "primary",
-  "secondary",
-  "muted"
-];
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",
@@ -23,45 +18,6 @@ const Tooltip = Tooltip$1.withProps({
   offset: 4,
   withinPortal: false
 });
-function useHandlers(target, props) {
-  const { onChange: triggerOnChange } = useDiagramEventHandlers();
-  const diagram = useDiagram();
-  const [originalColor, setOriginalColor] = useState(null);
-  const onColorPreview = useCallbackRef((color) => {
-    if (color === null) {
-      invariant(originalColor, "originalColor is null");
-      setOriginalColor(null);
-      diagram.updateNodeData(props.data.id, {
-        color: originalColor
-      });
-      return;
-    }
-    setOriginalColor((value) => value ?? props.data.color);
-    diagram.updateNodeData(props.data.id, {
-      color
-    });
-  });
-  const onChange = useCallbackRef((change) => {
-    triggerOnChange?.({
-      change: {
-        op: "change-element-style",
-        style: change,
-        targets: [target]
-      }
-    });
-    const { shape, color, ...style } = change;
-    diagram.updateNodeData(props.data.id, {
-      ...shape && { shape },
-      ...color && { color },
-      style
-    });
-  });
-  return {
-    elementColor: originalColor ?? props.data.color,
-    onColorPreview,
-    onChange
-  };
-}
 function BrowseRelationshipsButton({ fqn }) {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", children: /* @__PURE__ */ jsx(
@@ -113,4 +69,4 @@ function GoToSourceButton(props) {
   ) });
 }
 
-export { BrowseRelationshipsButton, GoToSourceButton, SemanticColors, Tooltip, useHandlers };
+export { BrowseRelationshipsButton, GoToSourceButton, Tooltip };

package/dist/likec4diagram/custom/nodes/toolbar/types.d.ts

@@ -0,0 +1,5 @@
+import { ThemeColor, ViewChange } from '@likec4/core/types';
+export declare const SemanticColors: readonly ["primary", "secondary", "muted"];
+export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void;
+export type ThemeColorKey = typeof SemanticColors[number];
+export type ColorKey = Exclude<ThemeColor, ThemeColorKey>;

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

@@ -0,0 +1,7 @@
+const SemanticColors = [
+  "primary",
+  "secondary",
+  "muted"
+];
+
+export { SemanticColors };

package/dist/likec4diagram/custom/nodes/toolbar/useHandlers.d.ts

@@ -0,0 +1,8 @@
+import { DeploymentFqn, Fqn, ThemeColor } from '@likec4/core';
+import { Types } from '../../../types';
+import { OnStyleChange } from './types';
+export declare function useHandlers(target: Fqn | DeploymentFqn, props: Types.NodeProps): {
+    elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
+    onColorPreview: (color: ThemeColor | null) => void;
+    onChange: OnStyleChange;
+};

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

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useCallbackRef } from '../../../../hooks/useCallbackRef.js';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../../../hooks/safeContext.js';
+
+function useHandlers(target, props) {
+  const diagram = useDiagram();
+  const [originalColor, setOriginalColor] = useState(null);
+  const onColorPreview = useCallbackRef((color) => {
+    if (color === null) {
+      if (!originalColor) return;
+      setOriginalColor(null);
+      diagram.updateNodeData(props.data.id, {
+        color: originalColor
+      });
+      return;
+    }
+    setOriginalColor((value) => value ?? props.data.color);
+    diagram.updateNodeData(props.data.id, {
+      color
+    });
+  });
+  const onChange = useCallbackRef((change) => {
+    const { shape, color, ...style } = change;
+    diagram.updateNodeData(props.data.id, {
+      ...shape && { shape },
+      ...color && { color },
+      style
+    });
+    diagram.triggerChange({
+      op: "change-element-style",
+      style: change,
+      targets: [target]
+    });
+  });
+  return {
+    elementColor: originalColor ?? props.data.color,
+    onColorPreview,
+    onChange
+  };
+}
+
+export { useHandlers };

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

@@ -13,16 +13,17 @@ import { Link } from '../../components/Link.js';
 import { PortalToContainer } from '../../components/PortalToContainer.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useDiagram, useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { RelationshipPopoverActorLogic } from './actor.js';
 import { endpoint, title } from './styles.css.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.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 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';
+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 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.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
@@ -56,9 +57,6 @@ const RelationshipPopover = memo(() => {
   useOnDiagramEvent("edgeMouseLeave", () => {
     actorRef.send({ type: "xyedge.mouseLeave" });
   });
-  useOnDiagramEvent("edgeEditingStarted", () => {
-    actorRef.send({ type: "close" });
-  });
   useOnDiagramEvent("walkthroughStarted", () => {
     actorRef.send({ type: "close" });
   });
@@ -145,7 +143,7 @@ const RelationshipPopover = memo(() => {
   ) });
 });
 const getEdgeLabelElement = (edgeId, container) => {
-  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null;
+  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.react-flow__edge[data-id="${edgeId}"] .edge-center-point`) ?? null;
 };
 const POPOVER_PADDING = 8;
 const RelationshipPopoverInternal = ({
@@ -399,7 +397,7 @@ const Relationship = forwardRef(({
           /* @__PURE__ */ jsx(Label, { children: "technology" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.technology })
         ] }),
-        r.description.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(Label, { children: "description" }),
           /* @__PURE__ */ jsx(
             Box,
@@ -413,7 +411,7 @@ const Relationship = forwardRef(({
                   _dark: "mantine.colors.dark[4]"
                 }
               },
-              children: /* @__PURE__ */ jsx(Markdown, { value: r.description, fontSize: "sm" })
+              children: /* @__PURE__ */ jsx(Markdown, { value: r.summary, fontSize: "sm" })
             }
           )
         ] }),

package/dist/likec4diagram/relationship-popover/actor.d.ts

@@ -57,7 +57,7 @@ declare const _actorLogic: StateMachine<RelationshipPopoverActorContext, Relatio
         params: unknown;
     };
 }>, "open timeout" | "close timeout" | "long idle", "idle" | "opening" | {
-    active: "opened" | "hovered" | "closing";
+    active: "hovered" | "opened" | "closing";
 }, "opened", NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
     readonly id: "breadcrumbs";
     readonly context: () => {

package/dist/likec4diagram/state/DiagramActorProvider.d.ts

@@ -1,12 +1,13 @@
 import { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { ViewPadding } from '../../LikeC4Diagram.props';
-export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
+import { ViewPaddings } from '../../LikeC4Diagram.props';
+export declare function DiagramActorProvider({ view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
     view: DiagramView;
     zoomable: boolean;
     pannable: boolean;
-    fitViewPadding: ViewPadding;
+    nodesDraggable: boolean;
     nodesSelectable: boolean;
+    fitViewPadding: ViewPaddings;
     where: WhereOperator | null;
     dynamicViewVariant: DynamicViewDisplayVariant | undefined;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -1,52 +1,37 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web';
+import { useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
-import { shallowEqual, deepEqual } from 'fast-equals';
-import { useRef, useEffect, useMemo } from 'react';
+import { shallowEqual } from 'fast-equals';
+import { useState, useEffect, memo, useRef } from 'react';
+import { isNullish } from 'remeda';
 import { ErrorBoundary } from '../../components/ErrorFallback.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
 import { CurrentViewModelContext } from '../../context/LikeC4ModelContext.js';
-import { DiagramActorContextProvider } from '../../hooks/safeContext.js';
-import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { DiagramActorContextProvider, useDiagram } from '../../hooks/safeContext.js';
+import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { convertToXYFlow } from '../convert-to-xyflow.js';
-import { diagramMachine } from './diagram-machine.js';
-import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
+import { makeDiagramApi } from './diagram-api.js';
+import { diagramMachine } from './machine.js';
+import { DiagramToggledFeaturesPersistence } from './persistence.js';
 
-const selectDynamicViewVariant = (state) => {
-  return state.context.dynamicViewVariant;
-};
 function DiagramActorProvider({
   view,
   zoomable,
   pannable,
-  fitViewPadding,
+  nodesDraggable,
   nodesSelectable,
+  fitViewPadding,
   where,
   children,
   dynamicViewVariant: _defaultVariant
 }) {
-  const { handlersRef } = useDiagramEventHandlers();
   const xystore = useStoreApi();
-  const machineRef = useRef(null);
-  if (!machineRef.current) {
-    machineRef.current = diagramMachine.provide({
-      actors: {
-        syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
-          actions: {
-            "trigger:OnChange": ((_, params) => {
-              handlersRef.current.onChange?.(params);
-            })
-          }
-        })
-      }
-    });
-  }
   const actorRef = useActorRef(
-    machineRef.current,
+    diagramMachine,
     {
       id: `diagram`,
       systemId: "diagram",
@@ -57,96 +42,136 @@ function DiagramActorProvider({
         zoomable,
         pannable,
         fitViewPadding,
+        nodesDraggable,
         nodesSelectable,
         dynamicViewVariant: _defaultVariant
       }
     }
   );
+  const [api, setApi] = useState(() => makeDiagramApi(actorRef));
+  useEffect(() => {
+    setApi((api2) => {
+      if (api2.actor === actorRef) return api2;
+      return makeDiagramApi(actorRef);
+    });
+  }, [actorRef]);
+  if (api.actor !== actorRef) {
+    console.warn("DiagramApi instance changed, this should not happen during the lifetime of the actor");
+  }
   const features = useEnabledFeatures();
-  useCustomCompareEffect(
-    () => {
-      actorRef.send({ type: "update.features", features });
-    },
-    [features],
-    shallowEqual
-  );
   useEffect(
-    () => {
-      actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
-    },
-    [zoomable, pannable, fitViewPadding, nodesSelectable]
+    () => actorRef.send({ type: "update.features", features }),
+    [features, actorRef]
   );
-  const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant);
-  const update = useMemo(
-    () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
-    [view, where, nodesSelectable, dynamicViewVariant]
+  useEffect(
+    () => actorRef.send({
+      type: "update.inputs",
+      inputs: { zoomable, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
+    }),
+    [zoomable, pannable, fitViewPadding, actorRef, nodesDraggable, nodesSelectable]
   );
-  useRafEffect(() => {
-    actorRef.send({
-      type: "update.view",
-      ...update
-    });
-  }, [actorRef, update]);
   useUpdateEffect(() => {
     if (!_defaultVariant) return;
     actorRef.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
-  }, [_defaultVariant]);
-  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
-    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children }) }),
-    /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
+  }, [_defaultVariant, actorRef]);
+  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: api, children: [
+    /* @__PURE__ */ jsxs(ErrorBoundary, { children: [
+      /* @__PURE__ */ jsx(
+        DiagramXYFlowSyncProvider,
+        {
+          view,
+          where,
+          actorRef
+        }
+      ),
+      /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children })
+    ] }),
+    /* @__PURE__ */ jsx(DiagramActorEventListener, {})
   ] });
 }
-const selectViewIdAndToggledFeatures = (state) => {
-  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
-    return {
-      viewId: state.context.view.id,
-      toggledFeatures: {
-        ...state.context.toggledFeatures,
-        enableReadOnly: true
-      }
+const selectFromActor = ({ context }) => {
+  let toggledFeatures = context.toggledFeatures;
+  const hasDrifts = context.view.drifts != null;
+  const enableCompareWithLatest = context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough) && hasDrifts;
+  const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || context.dynamicViewVariant === "sequence" && context.view._type === "dynamic" || enableCompareWithLatest && context.view._layout === "auto";
+  if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) {
+    toggledFeatures = {
+      ...toggledFeatures,
+      enableCompareWithLatest,
+      enableReadOnly
     };
   }
   return {
-    viewId: state.context.view.id,
-    toggledFeatures: state.context.toggledFeatures
+    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, selectViewIdAndToggledFeatures, deepEqual);
+  const { viewId, toggledFeatures } = useSelector(
+    actorRef,
+    selectFromActor,
+    compareSelected
+  );
+  useUpdateEffect(() => {
+    DiagramToggledFeaturesPersistence.write(toggledFeatures);
+  }, [toggledFeatures]);
   const likec4model = useLikeC4Model();
   const viewmodel = likec4model.findView(viewId);
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
-function DiagramActorEventListener({ actorRef }) {
+const selectFromActor2 = (state) => {
+  return state.context.dynamicViewVariant;
+};
+function DiagramXYFlowSyncProvider({ view, where, actorRef }) {
+  const dynamicViewVariant = useSelector(actorRef, selectFromActor2);
+  useRafEffect(() => {
+    actorRef.send({
+      type: "update.view",
+      ...convertToXYFlow({ view, where, dynamicViewVariant })
+    });
+  }, [view, where, dynamicViewVariant, actorRef]);
+  return null;
+}
+const DiagramActorEventListener = memo(() => {
   const diagram = useDiagram();
   const {
     onNavigateTo,
     onOpenSource,
+    onChange,
+    onLayoutTypeChange,
     handlersRef
   } = useDiagramEventHandlers();
   useOnDiagramEvent("openSource", ({ params }) => onOpenSource?.(params));
   useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo?.(viewId));
+  useOnDiagramEvent("onChange", ({ change }) => onChange?.({ change }));
+  useOnDiagramEvent("onLayoutTypeChange", ({ layoutType }) => {
+    onLayoutTypeChange?.(layoutType);
+  });
   const wasEmitted = useRef(false);
   useEffect(() => {
     if (wasEmitted.current) return;
-    let subscription = actorRef.on(
+    let subscription = diagram.actor.on(
       "initialized",
       ({ instance: xyflow }) => {
         try {
           handlersRef.current.onInitialized?.({ diagram, xyflow });
         } catch (error) {
           console.error(error);
+        } finally {
+          wasEmitted.current = true;
+          subscription?.unsubscribe();
+          subscription = null;
         }
-        wasEmitted.current = true;
-        subscription?.unsubscribe();
-        subscription = null;
       }
     );
     return () => {
       subscription?.unsubscribe();
     };
-  }, [actorRef, diagram]);
+  }, [diagram]);
   return null;
-}
+});
 
 export { DiagramActorProvider };

package/dist/likec4diagram/state/assign.d.ts

@@ -1,17 +1,23 @@
+import { LayoutedView, XYPoint } from '@likec4/core';
+import { NodeLookup } from '@xyflow/system';
 import { Types } from '../types';
-import { ActionArg, Context as DiagramContext } from './diagram-machine';
+import { ActionArg, Context as DiagramContext } from './machine.setup';
 export declare function lastClickedNode(params: {
     context: DiagramContext;
     event: {
         node: Types.Node;
     };
 }): DiagramContext['lastClickedNode'];
-export declare function mergeXYNodesEdges({ context, event }: ActionArg): Partial<DiagramContext>;
+export declare function mergeXYNodesEdges(context: Pick<DiagramContext, 'xynodes' | 'xyedges' | 'view'>, event: {
+    view: LayoutedView;
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+}): {
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+    view: LayoutedView;
+};
 export declare function focusNodesEdges(params: ActionArg): Partial<DiagramContext>;
-export declare function updateNavigationHistory({ context, event }: ActionArg): Partial<DiagramContext>;
-export declare function navigateBack({ context }: ActionArg): Partial<DiagramContext>;
-export declare function navigateForward({ context }: ActionArg): Partial<DiagramContext>;
 export declare function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext>;
 export declare function updateEdgeData({ context, event }: ActionArg): Partial<DiagramContext>;
-export declare function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramContext>;
-export declare function updateActiveWalkthrough({ context }: ActionArg): Partial<DiagramContext>;
+export declare function resetEdgeControlPoints(nodeLookup: NodeLookup, edge: Types.Edge): [XYPoint] | [XYPoint, XYPoint];