@likec4/diagram 1.47.0 → 1.48.0

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

@@ -5,6 +5,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
@@ -17,9 +18,27 @@ import { CompoundDetailsButton } from '../../../base-primitives/compound/Compoun
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
+import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
 
+function ElementTags(props) {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementTags$1,
+    {
+      onTagClick: useCallbackRef((tag) => {
+        diagram.openSearch(tag);
+      }),
+      onTagMouseEnter: useCallbackRef((tag) => {
+        diagram.send({ type: "tag.highlight", tag });
+      }),
+      onTagMouseLeave: useCallbackRef((_tag) => {
+        diagram.send({ type: "tag.unhighlight" });
+      }),
+      ...props
+    }
+  );
+}
 function ElementDetailsButtonWithHandler(props) {
   const diagram = useDiagram();
   const fqn = props.data.modelFqn;
@@ -60,7 +79,7 @@ function ElementNode(props) {
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
+    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }
 function DeploymentNode(props) {
@@ -73,7 +92,7 @@ function DeploymentNode(props) {
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
+    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }
 const compoundHasDrifts = css({
@@ -99,7 +118,7 @@ function CompoundElementNode(props) {
         /* @__PURE__ */ jsx(CompoundActions, { ...props }),
         enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
         !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );
@@ -118,7 +137,7 @@ function CompoundDeploymentNode(props) {
         /* @__PURE__ */ jsx(CompoundActions, { ...props }),
         enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
         !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );
@@ -134,7 +153,7 @@ function ViewGroupNode(props) {
       children: [
         enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
         /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
+import { Flex } from '@likec4/styles/jsx';
+import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
 import { useUpdateEffect } from '@react-hookz/web';
 import { useState } from 'react';
 import { keys } from 'remeda';
@@ -78,7 +79,7 @@ function ColorSwatches({
   };
   const otherColors = keys(theme.colors).filter((color) => !SemanticColors.includes(color));
   return /* @__PURE__ */ jsx(Stack, { gap: 2, onMouseLeave: () => onColorPreview(null), children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 1e3, closeDelay: 300, children: [
-    /* @__PURE__ */ jsx(Flex, { maw: 120, gap: "6", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Flex, { maxW: "120px", gap: "1.5", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
       Tooltip,
       {
         label: color,
@@ -106,8 +107,8 @@ function ColorSwatches({
       Flex,
       {
         mt: "sm",
-        maw: 110,
-        gap: "6",
+        maxW: "110px",
+        gap: "1.5",
         justify: "flex-start",
         align: "flex-start",
         direction: "row",

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

@@ -1,3 +1,8 @@
+import { Fqn } from '@likec4/core/types';
 import { Types } from '../../../types';
-export declare function ElementToolbar(props: Types.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementToolbar(props: Types.NodeProps<'element' | 'seq-actor'> & {
+    data: {
+        modelFqn: Fqn;
+    };
+}): import("react/jsx-runtime").JSX.Element;
 export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;

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

@@ -7,8 +7,8 @@ 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.3/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.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.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';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
@@ -119,7 +119,7 @@ function ElementShapeButton({
       offset: 2,
       styles: {
         item: {
-          padding: "calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)"
+          padding: "calc(var(--spacing-xs) / 1.5) var(--spacing-xs)"
         }
       },
       withinPortal: false,
@@ -130,7 +130,8 @@ function ElementShapeButton({
             variant: "light",
             color: "gray",
             size: "xs",
-            px: 8,
+            fz: "xxs",
+            px: "xs",
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
             children: elementShape
           }
@@ -143,8 +144,8 @@ function ElementShapeButton({
             children: ElementShapes.map((shape) => /* @__PURE__ */ jsx(
               MenuItem,
               {
-                fz: 12,
-                fw: 500,
+                fz: "xs",
+                fw: "500",
                 value: shape,
                 rightSection: elementShape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
                 onClick: (e) => {

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

@@ -5,8 +5,8 @@ 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.3/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.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.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';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -80,7 +80,7 @@ function BorderStyleOption({
     SegmentedControl,
     {
       size: "xs",
-      fz: 9,
+      fz: "xxs",
       fullWidth: true,
       withItemsBorders: false,
       value,

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

@@ -2,8 +2,8 @@ import { css } from '@likec4/styles/css';
 
 const toolbarTitle = css({
   color: "mantine.colors.dimmed",
-  fontSize: "10px",
-  fontWeight: 600,
+  fontSize: "xxs",
+  fontWeight: "bold",
   maxWidth: "220px",
   cursor: "default",
   userSelect: "all",

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, styled, HStack, Box, Txt } 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, Tooltip as Tooltip$1, ActionIcon, Text, Notification } 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.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 { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
@@ -294,7 +294,7 @@ const RelationshipPopoverInternal = ({
                 size: "compact-xs",
                 style: {
                   alignSelf: "flex-start",
-                  fontWeight: 500,
+                  fontWeight: "medium",
                   ["--button-fz"]: "var(--font-sizes-xxs)"
                 },
                 onClick: (e) => {
@@ -338,7 +338,7 @@ const EdgeDrifts = ({ diagramEdge }) => {
       withBorder: false,
       withCloseButton: false,
       title: "Changes:",
-      children: drifts.map((drift) => /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+      children: drifts.map((drift) => /* @__PURE__ */ jsxs(Txt, { mt: "1", size: "xs", children: [
         "- ",
         drift
       ] }, drift))
@@ -363,7 +363,7 @@ const Relationship = forwardRef(({
       "div",
       {
         style: {
-          fontWeight: 600,
+          fontWeight: "bold",
           fontSize: "10px",
           color: "#868e96",
           marginBottom: "2px",
@@ -390,7 +390,7 @@ const Relationship = forwardRef(({
               "span",
               {
                 style: {
-                  fontWeight: 600,
+                  fontWeight: "bold",
                   minWidth: "110px",
                   color: "#495057"
                 },
@@ -436,9 +436,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 +472,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,7 +540,7 @@ const Label = styled("div", {
   base: {
     display: "block",
     fontSize: "xxs",
-    fontWeight: 500,
+    fontWeight: "medium",
     userSelect: "none",
     lineHeight: "sm",
     color: "mantine.colors.dimmed"

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,10 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } 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 { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
@@ -12,20 +11,21 @@ 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 { useOptionalLikeC4Model } from '../../hooks/useLikeC4Model.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
 }) {
@@ -38,7 +38,7 @@ function DiagramActorProvider({
       }
     }),
     {
-      id: `diagram`,
+      id: `diagram-${id}`,
       systemId: "diagram",
       // ...inspector,
       input: {
@@ -57,11 +57,10 @@ 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.send({ type: "destroy" });
     actorRef.current = actor;
   }
   const [api, setApi] = useState(() => makeDiagramApi(actorRef));
@@ -92,7 +91,7 @@ function DiagramActorProvider({
     if (!_defaultVariant) return;
     actor.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
   }, [_defaultVariant, actor]);
-  useRafEffect(
+  useEffect(
     () => actor.send({ type: "update.view", view, source: "external" }),
     [actor, view]
   );
@@ -104,8 +103,8 @@ function DiagramActorProvider({
 const selectFromActor = ({ 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,
@@ -127,8 +126,8 @@ function CurrentViewModelProvider({ children, actorRef }) {
     selectFromActor,
     compareSelected
   );
-  const likec4model = useLikeC4Model();
-  const viewmodel = likec4model.findView(viewId);
+  const likec4model = useOptionalLikeC4Model();
+  const viewmodel = likec4model?.findView(viewId) ?? null;
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
 const DiagramActorEventListener = memo(() => {
@@ -161,7 +160,7 @@ const DiagramActorEventListener = memo(() => {
     shallowEqual
   );
   useUpdateEffect(() => {
-    DiagramToggledFeaturesPersistence.write(omitBy(toggledFeatures, isNullish));
+    DiagramToggledFeaturesPersistence.write(toggledFeatures);
   }, [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;
   });