@likec4/diagram 1.47.0 → 1.49.0

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 } 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, Text, ActionIcon, 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';
@@ -17,14 +17,14 @@ 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 { 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.3/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.3/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 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 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,
               {
@@ -294,7 +293,7 @@ const RelationshipPopoverInternal = ({
                 size: "compact-xs",
                 style: {
                   alignSelf: "flex-start",
-                  fontWeight: 500,
+                  fontWeight: "medium",
                   ["--button-fz"]: "var(--font-sizes-xxs)"
                 },
                 onClick: (e) => {
@@ -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(Text, { mt: 2, size: "sm", lh: "xs", children: [
-        "- ",
-        drift
-      ] }, drift))
-    }
-  );
-};
 const Relationship = forwardRef(({
   viewId,
   relationship: r,
@@ -363,7 +343,7 @@ const Relationship = forwardRef(({
       "div",
       {
         style: {
-          fontWeight: 600,
+          fontWeight: "bold",
           fontSize: "10px",
           color: "#868e96",
           marginBottom: "2px",
@@ -390,7 +370,7 @@ const Relationship = forwardRef(({
               "span",
               {
                 style: {
-                  fontWeight: 600,
+                  fontWeight: "bold",
                   minWidth: "110px",
                   color: "#495057"
                 },
@@ -436,9 +416,9 @@ const Relationship = forwardRef(({
       }),
       children: [
         /* @__PURE__ */ jsx(HStack, { gap: "0.5", children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 200, children: [
-          /* @__PURE__ */ jsx(Tooltip, { label: sourceId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId.short }) }),
+          /* @__PURE__ */ jsx(Tooltip, { label: sourceId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Endpoint, { likec4color: sourceNode.color, children: sourceId.short }) }),
           /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
-          /* @__PURE__ */ jsx(Tooltip, { label: targetId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId.short }) }),
+          /* @__PURE__ */ jsx(Tooltip, { label: targetId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Endpoint, { likec4color: targetNode.color, children: targetId.short }) }),
           navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
@@ -472,7 +452,7 @@ const Relationship = forwardRef(({
           ) })
         ] }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "xs", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+          /* @__PURE__ */ jsx(RelationshipTitle, { children: r.title || "untitled" }),
           metadataTooltipLabel && /* @__PURE__ */ jsx(
             Tooltip,
             {
@@ -540,10 +520,10 @@ const Label = styled("div", {
   base: {
     display: "block",
     fontSize: "xxs",
-    fontWeight: 500,
+    fontWeight: "medium",
     userSelect: "none",
     lineHeight: "sm",
-    color: "mantine.colors.dimmed"
+    color: "text.dimmed"
   }
 });
 const Tooltip = Tooltip$1.withProps({

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

@@ -0,0 +1,7 @@
+import { Color } from '@likec4/core/types';
+import { PropsWithChildren } from 'react';
+import { StyledComponent } from '@likec4/styles';
+export declare const Endpoint: ({ children, likec4color }: PropsWithChildren<{
+    likec4color: Color;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const RelationshipTitle: StyledComponent<"div", {}>;

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

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from '@likec4/styles/jsx';
+import { txt } from '@likec4/styles/patterns';
+
+const Endpoint = ({ children, likec4color }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-likec4-color": likec4color,
+      className: txt({
+        size: "xxs",
+        fontWeight: "medium",
+        whiteSpace: "nowrap",
+        paddingX: "1",
+        paddingY: "0.5",
+        rounded: "xs",
+        background: {
+          _light: "var(--likec4-palette-fill)/90",
+          _dark: "var(--likec4-palette-fill)/60"
+        },
+        color: {
+          _light: "var(--likec4-palette-hiContrast)",
+          _dark: "var(--likec4-palette-loContrast)"
+        }
+      }),
+      children
+    }
+  );
+};
+const RelationshipTitle = styled("div", {
+  base: {
+    whiteSpaceCollapse: "preserve-breaks",
+    fontSize: "sm",
+    lineHeight: "sm",
+    userSelect: "all"
+  }
+});
+
+export { Endpoint, RelationshipTitle };

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

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

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -1,36 +1,34 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRafEffect } from '@react-hookz/web';
-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 { omitBy, isNullish } from 'remeda';
+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 { useLikeC4Model } 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';
 import { DiagramToggledFeaturesPersistence } from './persistence.js';
 
 function DiagramActorProvider({
+  id,
   view,
   zoomable,
   pannable,
   nodesDraggable,
   nodesSelectable,
   fitViewPadding,
-  where,
+  where = null,
   children,
   dynamicViewVariant: _defaultVariant
 }) {
   const xystore = useStoreApi();
-  const editorActor = useEditorActorLogic(view.id);
+  const editorActor = useEditorActorLogic();
+  const features = useEnabledFeatures();
   const actor = useActorRef(
     diagramMachine.provide({
       actors: {
@@ -38,7 +36,7 @@ function DiagramActorProvider({
       }
     }),
     {
-      id: `diagram`,
+      id: `diagram-${id}`,
       systemId: "diagram",
       // ...inspector,
       input: {
@@ -50,6 +48,7 @@ function DiagramActorProvider({
         nodesDraggable,
         nodesSelectable,
         where,
+        features,
         dynamicViewVariant: _defaultVariant
       }
     }
@@ -57,10 +56,8 @@ function DiagramActorProvider({
   const actorRef = useRef(actor);
   if (actorRef.current !== actor) {
     console.warn("DiagramMachine actor instance changed", {
-      context: {
-        previous: actorRef.current.getSnapshot().context,
-        current: actor.getSnapshot().context
-      }
+      previous: actorRef.current.getSnapshot().context,
+      current: actor.getSnapshot().context
     });
     actorRef.current = actor;
   }
@@ -70,42 +67,40 @@ 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]);
-  useRafEffect(
+  }, [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 = 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";
+  const enableCompareWithLatest = hasDrifts && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
+  const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
   if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) {
     toggledFeatures = {
       ...toggledFeatures,
@@ -113,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 = useLikeC4Model();
-  const viewmodel = likec4model.findView(viewId);
-  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(omitBy(toggledFeatures, isNullish));
-  }, [toggledFeatures]);
   return null;
 });
 

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

@@ -23,4 +23,4 @@ export declare function focusNodesEdges(context: DiagramContext): {
 } | null;
 export declare function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext>;
 export declare function updateEdgeData({ context, event }: ActionArg): Partial<DiagramContext>;
-export declare function resetEdgeControlPoints(nodeLookup: NodeLookup, edge: Types.Edge): [XYPoint] | [XYPoint, XYPoint];
+export declare function resetEdgeControlPoints(nodeLookup: NodeLookup, edge: Types.Edge): [XYPoint, XYPoint];

package/dist/likec4diagram/state/createViewChange.js

@@ -1,5 +1,5 @@
 import { getNodeDimensions } from '@xyflow/system';
-import { map, omit, hasAtLeast } from 'remeda';
+import { map, hasAtLeast } from 'remeda';
 import { calcViewBounds } from '../../utils/view-bounds.js';
 import { isSamePoint, bezierControlPoints } from '../../utils/xyflow.js';
 
@@ -56,14 +56,26 @@ function createViewChange(parentContext) {
       controlPoints = bezierControlPoints(data.points);
     }
     const _updated = {
-      ...omit(edge, ["controlPoints", "labelBBox"]),
+      ...edge,
       points: data.points
     };
     if (data.labelBBox) {
-      _updated.labelBBox = data.labelBBox;
+      _updated.labelBBox = {
+        x: Math.round(data.labelBBox.x),
+        y: Math.round(data.labelBBox.y),
+        width: Math.round(data.labelBBox.width),
+        height: Math.round(data.labelBBox.height)
+      };
+    } else {
+      _updated.labelBBox = null;
     }
     if (hasAtLeast(controlPoints, 1)) {
-      _updated.controlPoints = controlPoints;
+      _updated.controlPoints = map(controlPoints, (v) => ({
+        x: Math.round(v.x),
+        y: Math.round(v.y)
+      }));
+    } else {
+      _updated.controlPoints = null;
     }
     return _updated;
   });

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 });
     }
   };
 }