@likec4/diagram 1.28.0 → 1.29.0

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/hooks/useXYFlow.d.ts

@@ -1,8 +1,8 @@
-import { ReactFlowState, ReactFlowInstance, EdgeMarkerType, HandleType, InternalNode } from '@xyflow/react';
+import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
+import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
-import { XYPosition } from '@xyflow/system';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;

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.d.ts

@@ -1,7 +1,7 @@
 import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
+import { XYPosition } from '@xyflow/react';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/react';
-import { XYPosition } from '@xyflow/system';
+import { Position } from '@xyflow/system';
 export declare const RelationshipEdge: NamedExoticComponent<{
     id: string;
     selected?: boolean;

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);
@@ -268,7 +268,7 @@ const RelationshipEdge = customEdge((props) => {
       /* @__PURE__ */ jsx(
         EdgePath,
         {
-          ...props,
+          edgeProps: props,
           svgPath: edgePath,
           ref: svgPathRef,
           ...enableEdgeEditing && {
@@ -315,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/index.d.ts

@@ -1,9 +1,8 @@
 import { Types } from '../types';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { NodeProps } from '../../base';
-import { Position } from '@xyflow/react';
+import { Position, XYPosition } from '@xyflow/system';
 import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
-import { XYPosition } from '@xyflow/system';
 export declare const nodeTypes: {
     element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
     deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;

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 { cx } from '@likec4/styles/css';
 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';
@@ -44,7 +44,7 @@ const ControlsDefaultLayout = ({
       translateY: -10
     },
     align: "flex-start",
-    className: clsx(
+    className: cx(
       "react-flow__panel",
       panel,
       "likec4-top-left-panel"
@@ -56,7 +56,7 @@ const ControlsDefaultLayout = ({
         /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
           Group,
           {
-            className: clsx(navigationButtons, "likec4-navigation-webview"),
+            className: cx(navigationButtons, "likec4-navigation-webview"),
             gap: "xs",
             children: [
               burgerMenu,
@@ -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

@@ -5,8 +5,8 @@ import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPan
 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';
@@ -20,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;
@@ -119,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,