@likec4/diagram 1.27.3 → 1.28.1

package/dist/context/DiagramFeatures.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { shallowEqual } from 'fast-equals';
-import { useContext, createContext, useState, useEffect } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { mapToObj, pick, map } from 'remeda';
 
 const FeatureNames = [
@@ -31,7 +31,7 @@ const AllDisabled = mapToObj(
   FeatureNames,
   (name) => [`enable${name}`, false]
 );
-const DiagramFeaturesContext = createContext(AllDisabled);
+const DiagramFeaturesContext = reactExports.createContext(AllDisabled);
 const validate = (features) => {
   let {
     enableReadOnly,
@@ -68,9 +68,9 @@ function DiagramFeatures({
   features,
   overrides
 }) {
-  const outerScope = useContext(DiagramFeaturesContext);
-  const [scope, setScope] = useState(outerScope);
-  useEffect(
+  const outerScope = reactExports.useContext(DiagramFeaturesContext);
+  const [scope, setScope] = reactExports.useState(outerScope);
+  reactExports.useEffect(
     () => {
       setScope((current) => {
         const next = validate({
@@ -99,10 +99,10 @@ DiagramFeatures.Overlays = ({ children }) => {
   );
 };
 function useEnabledFeature(...names) {
-  return pick(useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}`));
+  return pick(reactExports.useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}`));
 }
 function useEnabledFeatures() {
-  return useContext(DiagramFeaturesContext);
+  return reactExports.useContext(DiagramFeaturesContext);
 }
 function IfEnabled({
   feature,

package/dist/context/EnsureMantine.js

@@ -1,9 +1,9 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { MantineContext } from '@mantine/core';
-import { useContext } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 
 function EnsureMantine({ children }) {
-  const mantineCtx = useContext(MantineContext);
+  const mantineCtx = reactExports.useContext(MantineContext);
   if (!mantineCtx) {
     throw new Error("LikeC4Diagram must be a child of MantineProvider");
   }

package/dist/context/FramerMotionConfig.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMantineStyleNonce } from '@mantine/core';
-import { LazyMotion, domMax, MotionConfig } from 'framer-motion';
-import 'react';
+import { LazyMotion, domMax, MotionConfig } from 'motion/react';
+import '../_virtual/index.js';
 
 const FramerMotionConfig = ({
   reducedMotion = "user",

package/dist/context/IconRenderer.js

@@ -1,14 +1,14 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from '@tabler/icons-react';
 import clsx from 'clsx';
-import { useContext, createContext } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 
-const IconRendererContext = createContext(null);
+const IconRendererContext = reactExports.createContext(null);
 function IconRendererProvider({
   value,
   children
 }) {
-  const outerScope = useContext(IconRendererContext);
+  const outerScope = reactExports.useContext(IconRendererContext);
   if (outerScope) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
@@ -18,7 +18,7 @@ function IconRenderer({
   element,
   className
 }) {
-  const RenderIcon = useContext(IconRendererContext);
+  const RenderIcon = reactExports.useContext(IconRendererContext);
   if (!element || !element.icon || element.icon === "none") {
     return null;
   }

package/dist/context/ReduceGraphics.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { createSafeContext, createOptionalContext } from '@mantine/core';
 import { useStore } from '@nanostores/react';
 import { atom } from 'nanostores';
-import { useRef } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 
 const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext();
 function useIsReducedGraphics() {
@@ -16,7 +16,7 @@ const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
   "PanningAtomSafeCtx is not provided"
 );
 function ReduceGraphicsContext({ reduceGraphics, children }) {
-  const $isPanningRef = useRef(null);
+  const $isPanningRef = reactExports.useRef(null);
   if (!$isPanningRef.current) {
     $isPanningRef.current = atom(reduceGraphics);
   }

package/dist/context/RootContainer.js

@@ -1,18 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { useRef, useEffect, createContext, createRef, useContext } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { usePanningAtom } from './ReduceGraphics.js';
 
-const RootContainerContext = createContext(createRef());
+const RootContainerContext = reactExports.createContext(reactExports.createRef());
 function RootContainer({
   className,
   reduceGraphics = false,
   children
 }) {
-  const ref = useRef(null);
+  const ref = reactExports.useRef(null);
   const $isPanning = usePanningAtom();
-  useEffect(() => {
+  reactExports.useEffect(() => {
     return $isPanning.listen((isPanning) => {
       if (isPanning) {
         ref.current?.setAttribute("data-likec4-diagram-panning", "true");
@@ -25,10 +25,6 @@ function RootContainer({
     Box,
     {
       className: cx("likec4-root", className),
-      css: {
-        // '--likec4-background-color': 'mantine.colors.body',
-        // '--colors-likec4-background': 'var(--mantine-color-body)',
-      },
       ref,
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
@@ -38,7 +34,7 @@ function RootContainer({
   );
 }
 function useRootContainer() {
-  return useContext(RootContainerContext).current;
+  return reactExports.useContext(RootContainerContext).current;
 }
 
 export { RootContainer, useRootContainer };

package/dist/hooks/safeContext.js

@@ -1,9 +1,9 @@
-import { createContext, useContext } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 
-const DiagramActorSafeContext = createContext(null);
+const DiagramActorSafeContext = reactExports.createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 const useDiagramActorRef = () => {
-  const ctx = useContext(DiagramActorSafeContext);
+  const ctx = reactExports.useContext(DiagramActorSafeContext);
   if (ctx === null) {
     throw new Error("DiagramActorRef is not provided");
   }

package/dist/hooks/useCurrentViewId.js

@@ -2,7 +2,7 @@ import { useSelector } from '@xstate/react';
 import '@likec4/core';
 import '@mantine/hooks';
 import 'fast-equals';
-import 'react';
+import '../_virtual/index.js';
 import { useDiagramActorRef } from './safeContext.js';
 
 const selectViewId = (s) => s.context.view.id;

package/dist/hooks/useDiagram.d.ts

@@ -2031,7 +2031,7 @@ export declare function useDiagram(): {
                         readonly params: {
                             readonly duration: 0;
                         };
-                    }, "startSyncLayout", ActionFunction<DiagramContext, Events, Events, undefined, Values<{
+                    }, ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                         syncManualLayoutActorLogic: {
                             src: "syncManualLayoutActorLogic";
                             logic: StateMachine<Readonly< Input>, Events, {}, never, {
@@ -2284,7 +2284,7 @@ export declare function useDiagram(): {
                             }>;
                             id: "overlays";
                         };
-                    }>, never, never, never, never>];
+                    }>, never, never, never, never>, "startSyncLayout"];
                     readonly target: "ready";
                 }, {
                     readonly target: "initializing";
@@ -9775,11 +9775,7 @@ export declare function useDiagram(): {
             readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
                     type: "xyflow.applyEdgeChanges";
-                    changes: EdgeChange<
-                    /**
-                     * @warning Do not use in render phase
-                     */
-                    Types.Edge>[];
+                    changes: EdgeChange<Types.Edge>[];
                 }, Events, undefined, Values<{
                     syncManualLayoutActorLogic: {
                         src: "syncManualLayoutActorLogic";

package/dist/hooks/useDiagram.js

@@ -2,13 +2,13 @@ import '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
 function useDiagram() {
   const actor = useDiagramActorRef();
-  return useMemo(() => ({
+  return reactExports.useMemo(() => ({
     actor,
     send: actor.send,
     navigateTo: (viewId, fromNode) => {

package/dist/hooks/useMantinePortalProps.js

@@ -1,9 +1,9 @@
-import { useMemo } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { useRootContainer } from '../context/RootContainer.js';
 
 function useMantinePortalProps() {
   const target = useRootContainer();
-  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
+  return reactExports.useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
 }
 
 export { useMantinePortalProps };

package/dist/hooks/useSetState.js

@@ -1,9 +1,9 @@
 import { shallowEqual } from 'fast-equals';
-import { useState, useCallback } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 
 function useSetState(initialState) {
-  const [state, _setState] = useState(initialState);
-  const setState = useCallback(
+  const [state, _setState] = reactExports.useState(initialState);
+  const setState = reactExports.useCallback(
     (statePartial) => _setState((current) => {
       const next = {
         ...current,

package/dist/hooks/useUpdateEffect.js

@@ -1,6 +1,6 @@
 import { useFirstMountState, useCustomCompareEffect } from '@react-hookz/web';
 import { shallowEqual } from 'fast-equals';
-import 'react';
+import '../_virtual/index.js';
 
 const noop = () => {
 };

package/dist/likec4diagram/DiagramUI.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { memo } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
@@ -8,7 +8,7 @@ import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
 import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough.js';
 
-const DiagramUI = memo(() => {
+const DiagramUI = reactExports.memo(() => {
   const {
     enableViewTitle,
     enableNotations,

package/dist/likec4diagram/DiagramXYFlow.js

@@ -3,7 +3,7 @@ import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
 import { deepEqual, shallowEqual } from 'fast-equals';
-import { memo } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
@@ -31,7 +31,7 @@ const selectXYProps = (ctx) => ({
 });
 const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
 const compareProps = (a, b) => a.nodesDraggable === b.nodesDraggable && a.nodesSelectable === b.nodesSelectable && deepEqual(a.background, b.background) && deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {});
-const LikeC4DiagramXYFlow = memo(({
+const LikeC4DiagramXYFlow = reactExports.memo(({
   background = "dots",
   nodesDraggable = false,
   nodesSelectable = false,

package/dist/likec4diagram/custom/edges/NotePopover.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from '@mantine/core';
 import { useDebouncedEffect } from '@react-hookz/web';
-import { useState } from 'react';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { edgeNoteText, edgeNoteCloseButton } from './NotePopover.css.js';
@@ -21,7 +21,7 @@ const NotePopover = ({ notes, children }) => {
     hasPrevious: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) > 0
   }));
   const diagram = useDiagram();
-  const [isOpened, setIsOpened] = useState(false);
+  const [isOpened, setIsOpened] = reactExports.useState(false);
   const portalProps = useMantinePortalProps();
   useDebouncedEffect(
     () => {

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -4,7 +4,7 @@ import { useDebouncedEffect } from '@react-hookz/web';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import clsx from 'clsx';
 import { line, curveCatmullRomOpen } from 'd3-shape';
-import { useState, useRef, useEffect } from 'react';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { isTruthy, first, last } from 'remeda';
 import { ZIndexes } from '../../../base/const.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
@@ -28,7 +28,7 @@ const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
 const selectActiveStepId = (s) => s.context.activeWalkthrough?.stepId ?? null;
 const RelationshipEdge = customEdge((props) => {
   const isPanning = useIsPanning();
-  const [isControlPointDragging, setIsControlPointDragging] = useState(false);
+  const [isControlPointDragging, setIsControlPointDragging] = reactExports.useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
   const diagram = useDiagram();
@@ -83,12 +83,12 @@ const RelationshipEdge = customEdge((props) => {
     edgePath = bezierPath(points);
   }
   let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
-  const [labelPos, setLabelPos] = useState({
+  const [labelPos, setLabelPos] = reactExports.useState({
     x: labelXY?.x ?? labelX,
     y: labelXY?.y ?? labelY
   });
-  const svgPathRef = useRef(null);
-  useEffect(() => {
+  const svgPathRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
     const path = svgPathRef.current;
     if (!path) return;
     const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
@@ -265,7 +265,17 @@ const RelationshipEdge = customEdge((props) => {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
-      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
+      /* @__PURE__ */ jsx(
+        EdgePath,
+        {
+          edgeProps: props,
+          svgPath: edgePath,
+          ref: svgPathRef,
+          ...enableEdgeEditing && {
+            onEdgePointerDown
+          }
+        }
+      ),
       /* @__PURE__ */ jsx(
         EdgeLabelContainer,
         {
@@ -305,7 +315,7 @@ const RelationshipEdge = customEdge((props) => {
                 cy: Math.round(p.y),
                 r: 3
               },
-              i
+              "controlPoints" + edgeId + "#" + i
             ))
           }
         )

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -3,7 +3,7 @@ import { DiagramNode, nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from '@mantine/core';
 import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from '@tabler/icons-react';
-import { memo, useCallback, Fragment as Fragment$1, forwardRef } from 'react';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { pipe, map, filter, isTruthy, partition } from 'remeda';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
@@ -25,7 +25,7 @@ const Tooltip = Tooltip$1.withProps({
   offset: 8,
   withinPortal: false
 });
-const RelationshipsDropdownMenu = memo(({
+const RelationshipsDropdownMenu = reactExports.memo(({
   edgeId,
   source,
   target,
@@ -40,7 +40,7 @@ const RelationshipsDropdownMenu = memo(({
   const likec4model = useLikeC4Model(true);
   const diagram = useDiagram();
   const portalProps = useMantinePortalProps();
-  const onClickOpenOverlay = useCallback((e) => {
+  const onClickOpenOverlay = reactExports.useCallback((e) => {
     e.stopPropagation();
     diagram.openRelationshipDetails(edgeId);
   }, [edgeId]);
@@ -51,7 +51,7 @@ const RelationshipsDropdownMenu = memo(({
     diagramEdge.relations,
     map((id) => {
       try {
-        return likec4model.relationship(id);
+        return likec4model.findRelationship(id);
       } catch (e) {
         console.error(
           `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
@@ -63,7 +63,7 @@ const RelationshipsDropdownMenu = memo(({
     filter(isTruthy),
     partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id)
   );
-  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(reactExports.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(MenuDivider, { opacity: 0.65 }),
     /* @__PURE__ */ jsx(
       MenuItem,
@@ -130,7 +130,7 @@ const RelationshipsDropdownMenu = memo(({
     }
   );
 });
-const Relationship = forwardRef(({
+const Relationship = reactExports.forwardRef(({
   className,
   relationship: r,
   edge,

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { defaultTheme } from '@likec4/core';
 import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
 import { useUpdateEffect } from '@react-hookz/web';
-import { useState } from 'react';
+import { r as reactExports } from '../../../../_virtual/index.js';
 import { themedColors, colors } from './_shared.js';
 
 function ColorButton({
@@ -137,7 +137,7 @@ function OpacityOption({
   elementOpacity = 100,
   onOpacityChange
 }) {
-  const [value, setValue] = useState(elementOpacity);
+  const [value, setValue] = reactExports.useState(elementOpacity);
   useUpdateEffect(() => {
     setValue(elementOpacity);
   }, [elementOpacity]);

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@likec4/core';
 import { Box, SegmentedControl } from '@mantine/core';
-import { useState, useEffect } from 'react';
+import { r as reactExports } from '../../../../_virtual/index.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
@@ -92,8 +92,8 @@ function BorderStyleOption({
   elementBorderStyle = "dashed",
   onChange
 }) {
-  const [value, setValue] = useState(elementBorderStyle);
-  useEffect(() => {
+  const [value, setValue] = reactExports.useState(elementBorderStyle);
+  reactExports.useEffect(() => {
     setValue(elementBorderStyle);
   }, [elementBorderStyle]);
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(

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

@@ -3,7 +3,7 @@ import { invariant, defaultTheme } from '@likec4/core';
 import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { IconFileSymlink, IconTransform } from '@tabler/icons-react';
-import { useState } from 'react';
+import { r as reactExports } from '../../../../_virtual/index.js';
 import { keys } from 'remeda';
 import { useDiagram } from '../../../../hooks/useDiagram.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
@@ -36,7 +36,7 @@ const Tooltip = Tooltip$1.withProps({
 function useHandlers(target, props) {
   const { onChange: triggerOnChange } = useDiagramEventHandlers();
   const diagram = useDiagram();
-  const [originalColor, setOriginalColor] = useState(null);
+  const [originalColor, setOriginalColor] = reactExports.useState(null);
   const onColorPreview = useCallbackRef((color) => {
     if (color === null) {
       invariant(originalColor, "originalColor is null");

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js

@@ -3,7 +3,7 @@ import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text,
 import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
 import { useDebouncedCallback } from '@react-hookz/web';
 import { IconLayoutDashboard } from '@tabler/icons-react';
-import { useState, forwardRef } from 'react';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
@@ -18,8 +18,8 @@ const ChangeAutoLayoutButton = (props) => {
     onChange
   } = useDiagramEventHandlers();
   const diagram = useDiagram();
-  const [rootRef, setRootRef] = useState(null);
-  const [controlsRefs, setControlsRefs] = useState({});
+  const [rootRef, setRootRef] = reactExports.useState(null);
+  const [controlsRefs, setControlsRefs] = reactExports.useState({});
   const {
     autoLayout,
     viewId
@@ -103,7 +103,7 @@ const ChangeAutoLayoutButton = (props) => {
   );
 };
 const MAX_SPACING = 400;
-const SpacingSliders = forwardRef(({
+const SpacingSliders = reactExports.forwardRef(({
   isVertical,
   nodeSep,
   rankSep,

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core';
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react';
 import { clsx } from 'clsx';
-import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
-import { memo } from 'react';
+import { m, LayoutGroup } from 'motion/react';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
 import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from '../../../hooks/useDiagram.js';
 import { LikeC4Search } from '../search/LikeC4Search.js';
@@ -70,7 +70,7 @@ const ControlsDefaultLayout = ({
     ]
   }
 );
-const Controls = memo(() => {
+const Controls = reactExports.memo(() => {
   const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
     viewId: c.view.id,
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
@@ -92,7 +92,7 @@ const Controls = memo(() => {
   const notReadOnly = !enableReadOnly;
   const portalProps = useMantinePortalProps();
   const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout;
-  return /* @__PURE__ */ jsx(LayoutGroup, { inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     ControlsLayout,
     {
       burgerMenu: onBurgerMenuClick && /* @__PURE__ */ jsx(
@@ -137,7 +137,7 @@ const Controls = memo(() => {
         ) })
       ] })
     }
-  ) }) });
+  ) });
 });
 const SyncLayoutBadge = () => {
   const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
-import { AnimatePresence, m } from 'framer-motion';
+import { AnimatePresence, m } from 'motion/react';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { ActionIcon } from './_shared.js';
 

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -3,7 +3,7 @@ import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine
 import { useLocalStorage } from '@mantine/hooks';
 import { IconMenu } from '@tabler/icons-react';
 import clsx from 'clsx';
-import { AnimatePresence, m } from 'framer-motion';
+import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { card, title, description } from './DiagramTitlePanel.css.js';

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,13 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import '@likec4/styles/tokens';
 import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from '@tabler/icons-react';
 import clsx from 'clsx';
-import { AnimatePresence, m } from 'framer-motion';
-import { memo, useState } from 'react';
+import { AnimatePresence, m } from 'motion/react';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { ceil, isNonNullish } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
@@ -21,7 +20,7 @@ const ElementNotation = ({ value }) => {
     color = "primary",
     shape = "rectangle"
   } = value;
-  const [onlyKind, setOnlyKind] = useState(null);
+  const [onlyKind, setOnlyKind] = reactExports.useState(null);
   const diagram = useDiagram();
   const w = 300;
   const h = 200;
@@ -120,7 +119,7 @@ const selector = (s) => ({
   isVisible: true
   // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
 });
-const NotationPanel = memo(() => {
+const NotationPanel = reactExports.memo(() => {
   const height = useXYStore((s) => s.height);
   const {
     id,