@likec4/diagram 1.27.3 → 1.28.1

package/dist/overlays/element-details/actorContext.js

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

package/dist/overlays/overlay/Overlay.css.d.ts

@@ -1,28 +1,5 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
 export declare const backdropBlur = "--_blur";
 export declare const backdropOpacity = "--_opacity";
 export declare const level = "--_level";
-export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
-    level: {
-        0: {
-            dialog: {
-                "--_level": "0";
-            };
-        };
-        1: {
-            dialog: {
-                "--_level": "1";
-            };
-        };
-        2: {
-            dialog: {
-                "--_level": "2";
-            };
-        };
-        3: {
-            dialog: {
-                "--_level": "3";
-            };
-        };
-    };
-}>;
+export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", SlotRecipeVariantRecord<"body" | "dialog">>;

package/dist/overlays/overlay/Overlay.css.js

@@ -59,22 +59,6 @@ const dialog = css.raw({
   xl: {
     [offset]: "4rem"
   }
-  //     inset: '[calc(2rem + var(--_level, 0) * 1rem), 2rem, 2rem, 2rem]',
-  //     width: 'calc(100vw - 4rem)',
-  //     height: 'calc(100vh - 4rem - var(--_level, 0) * 1rem)',
-  //   },
-  //   lg: {
-  //     inset: '[calc(4rem + var(--_level, 0) * 1rem), 4rem, 4rem, 4rem]',
-  //     width: 'calc(100vw - 8rem)',
-  //     height: 'calc(100vh - 8rem)',
-  //   },
-  //   xl: {
-  //     [borderRadius]: '8px',
-  //     padding: '8px',
-  //     inset: '[calc(5rem + var(--_level, 0) * 1rem), 5rem, 5rem, 5rem]',
-  //     width: 'calc(100vw - 10rem)',
-  //     height: 'calc(100vh - 10rem - var(--_level, 0) * 1rem)',
-  //   },
 });
 const body = css.raw({
   position: "relative",
@@ -94,30 +78,6 @@ const overlay = sva({
   base: {
     dialog,
     body
-  },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: "0"
-        }
-      },
-      1: {
-        dialog: {
-          [level]: "1"
-        }
-      },
-      2: {
-        dialog: {
-          [level]: "2"
-        }
-      },
-      3: {
-        dialog: {
-          [level]: "3"
-        }
-      }
-    }
   }
 });
 

package/dist/overlays/overlay/Overlay.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 export declare const Overlay: ForwardRefExoticComponent<{
-    overlayLevel?: 0 | 1 | 2 | 3;
+    overlayLevel?: number;
     className?: string;
     classes?: {
         dialog?: string;

package/dist/overlays/overlay/Overlay.js

@@ -3,101 +3,111 @@ import { cx } from '@likec4/styles/css';
 import { RemoveScroll, Box } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
-import { useReducedMotionConfig, m } from 'framer-motion';
-import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
-import { overlay, backdropOpacity, backdropBlur } from './Overlay.css.js';
+import { useReducedMotionConfig, m } from 'motion/react';
+import { r as reactExports } from '../../_virtual/index.js';
+import { overlay, backdropOpacity, backdropBlur, level } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
-const Overlay = forwardRef(
-  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
-    const [opened, setOpened] = useState(false);
-    const dialogRef = useRef(null);
-    const isClosingRef = useRef(false);
-    const motionNotReduced = useReducedMotionConfig() !== true;
-    const onCloseRef = useSyncedRef(onClose);
-    const close = useDebouncedCallback(
-      () => {
-        if (isClosingRef.current) return;
-        isClosingRef.current = true;
-        onCloseRef.current();
+const Overlay = reactExports.forwardRef(({
+  onClose,
+  className,
+  classes,
+  overlayLevel = 0,
+  children,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = reactExports.useState(false);
+  const dialogRef = reactExports.useRef(null);
+  const isClosingRef = reactExports.useRef(false);
+  const motionNotReduced = useReducedMotionConfig() !== true;
+  const onCloseRef = useSyncedRef(onClose);
+  const close = useDebouncedCallback(
+    () => {
+      if (isClosingRef.current) return;
+      isClosingRef.current = true;
+      onCloseRef.current();
+    },
+    [],
+    50
+  );
+  reactExports.useEffect(() => {
+    const cancel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+    };
+    dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
+    return () => {
+      dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
+    };
+  }, []);
+  useTimeoutEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal();
+    }
+  }, 30);
+  useTimeoutEffect(() => {
+    setOpened(true);
+  }, 120);
+  const styles = overlay({
+    level: overlayLevel
+  });
+  return /* @__PURE__ */ jsx(
+    m.dialog,
+    {
+      ref: useMergedRef(dialogRef, ref),
+      className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
+      layout: true,
+      style: {
+        // @ts-ignore
+        [level]: overlayLevel
       },
-      [],
-      50
-    );
-    useLayoutEffect(() => {
-      const cancel = (e) => {
-        e.preventDefault();
-        close();
-      };
-      dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
-      return () => {
-        dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
-      };
-    }, []);
-    useTimeoutEffect(() => {
-      if (!dialogRef.current?.open) {
-        dialogRef.current?.showModal();
-      }
-    }, 20);
-    useTimeoutEffect(() => {
-      setOpened(true);
-    }, 120);
-    const styles = overlay({
-      level: overlayLevel
-    });
-    return /* @__PURE__ */ jsx(
-      m.dialog,
-      {
-        ref: useMergedRef(dialogRef, ref),
-        className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
-        layout: true,
-        ...motionNotReduced ? {
-          initial: {
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%",
-            scale: overlayLevel > 0 ? 0.9 : 1.075,
-            opacity: 0
-          },
-          animate: {
-            [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-            [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
-            scale: 1,
-            opacity: 1,
-            transition: {
-              delay: 0.075
-            }
-          },
-          exit: {
-            scale: 1.2,
-            opacity: 0,
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%"
-          }
-        } : {
-          initial: {
-            [backdropBlur]: "8px",
-            [backdropOpacity]: "60%"
-          }
+      ...motionNotReduced ? {
+        initial: {
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%",
+          scale: overlayLevel > 0 ? 0.9 : 1.075,
+          opacity: 0
         },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
-            dialogRef.current?.close();
-            return;
+        animate: {
+          [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+          [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
+          scale: 1,
+          opacity: 1,
+          transition: {
+            delay: 0.075
           }
         },
-        onDoubleClick: stopPropagation,
-        onPointerDown: stopPropagation,
-        onClose: (e) => {
-          e.stopPropagation();
-          close();
-        },
-        ...rest,
-        children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx(Box, { className: cx(styles.body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
-      }
-    );
-  }
-);
+        exit: {
+          scale: 1.2,
+          opacity: 0,
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%"
+        }
+      } : {
+        initial: {
+          [backdropBlur]: "8px",
+          [backdropOpacity]: "60%"
+        }
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+          dialogRef.current?.close();
+          return;
+        }
+      },
+      onDoubleClick: stopPropagation,
+      onPointerDown: stopPropagation,
+      onClose: (e) => {
+        e.stopPropagation();
+        close();
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx(Box, { className: cx(styles.body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+    }
+  );
+});
 Overlay.displayName = "Overlay";
 
 export { Overlay };

package/dist/overlays/overlaysActor.js

@@ -7,7 +7,10 @@ import { relationshipsBrowserLogic } from './relationships-browser/actor.js';
 
 const hotkeyLogic = fromCallback(({ sendBack }) => {
   const handler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "close" }), {
+    ["Escape", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "close" });
+    }, {
       preventDefault: true
     }]
   ]);

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { invariant, nonNullable, ifind, isAncestor } from '@likec4/core';
+import { invariant, nonNullable, isAncestor } from '@likec4/core';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
 import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
@@ -7,9 +7,9 @@ import { useSelector } from '@xstate/react';
 import { ReactFlowProvider, Panel, useStoreApi, useReactFlow } from '@xyflow/react';
 import clsx from 'clsx';
 import { deepEqual } from 'fast-equals';
-import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
-import { useRef, memo, useMemo, useEffect } from 'react';
-import 'remeda';
+import { LayoutGroup, AnimatePresence, m } from 'motion/react';
+import { r as reactExports } from '../../_virtual/index.js';
+import { isTruthy, find } from 'remeda';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from './compute.js';
@@ -27,38 +27,40 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipDetails({ actorRef }) {
-  const initialRef = useRef(null);
+  const initialRef = reactExports.useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       defaultNodes: [],
       defaultEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
-    /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) }),
-    /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {})
-  ] }) });
+  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    /* @__PURE__ */ jsx(RelationshipDetailsInner, {}, "xyflow"),
+    /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {}, "sync")
+  ] }) }) }) });
 }
 const selectSubject = (state) => ({
   ...state.context.subject,
   viewId: state.context.viewId
 });
-function SyncRelationshipDetailsXYFlow() {
+const SyncRelationshipDetailsXYFlow = reactExports.memo(() => {
   const actor = useRelationshipDetailsActor();
   const subject = useSelector(actor, selectSubject, deepEqual);
   const likec4model = useLikeC4Model(true);
   const view = likec4model.findView(subject.viewId) ?? null;
-  const data = useMemo(() => {
+  const data = reactExports.useMemo(() => {
     let data2;
-    if ("edgeId" in subject) {
+    if ("edgeId" in subject && isTruthy(subject.edgeId)) {
       invariant(view, `view ${subject.viewId} not found`);
       const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
       data2 = computeEdgeDetailsViewData([edge.id], view);
-    } else {
+    } else if (!!subject.source && !!subject.target) {
       data2 = computeRelationshipDetailsViewData({
         source: likec4model.element(subject.source),
         target: likec4model.element(subject.target)
       });
+    } else {
+      return null;
     }
     return layoutRelationshipDetails(data2, view);
   }, [
@@ -68,16 +70,18 @@ function SyncRelationshipDetailsXYFlow() {
   ]);
   const store = useStoreApi();
   const instance = useReactFlow();
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (instance.viewportInitialized) {
       actor.send({ type: "xyflow.init", instance, store });
     }
   }, [store, instance.viewportInitialized, actor]);
-  useEffect(() => {
-    actor.send({ type: "update.layoutData", data });
+  reactExports.useEffect(() => {
+    if (data !== null) {
+      actor.send({ type: "update.layoutData", data });
+    }
   }, [data, actor]);
   return null;
-}
+});
 const selector = ({ context }) => ({
   // subject: context.subject,
   // view: state.context.view,
@@ -85,7 +89,7 @@ const selector = ({ context }) => ({
   nodes: context.xynodes,
   edges: context.xyedges
 });
-const RelationshipDetailsInner = memo(() => {
+const RelationshipDetailsInner = reactExports.memo(() => {
   const browser = useRelationshipDetails();
   const {
     initialized,
@@ -164,15 +168,16 @@ const topLeftPanelselector = ({ context }) => ({
   subject: context.subject,
   viewId: context.viewId
 });
-const TopLeftPanel = memo(() => {
+const TopLeftPanel = reactExports.memo(() => {
   const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual);
   const likec4model = useLikeC4Model(true);
   const view = likec4model.findView(viewId);
   if (!view || !view.isDiagram()) {
     return null;
   }
-  let edge = "edgeId" in subject ? view.findEdge(subject.edgeId) : ifind(view.edges(), (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) ?? ifind(view.edges(), (e) => {
-    return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "--", subject.source)) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "", subject.target));
+  const edges = [...view.edges()];
+  let edge = "edgeId" in subject && isTruthy(subject.edgeId) ? edges.find((e) => e.id === subject.edgeId) : find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) || find(edges, (e) => {
+    return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "--", subject.source ?? "__")) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "", subject.target ?? "__"));
   });
   if (!edge) {
     return null;
@@ -183,12 +188,12 @@ const TopLeftPanelInner = ({ edge, view }) => {
   const browser = useRelationshipDetails();
   const edgeId = edge.id;
   const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historyEdgeId !== edgeId) {
       historyOps.set(edgeId);
     }
   }, [edgeId]);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historyEdgeId !== edgeId) {
       browser.navigateTo(historyEdgeId);
     }

package/dist/overlays/relationship-details/SelectEdge.js

@@ -1,20 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@likec4/core';
-import { useComputedColorScheme, Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
+import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
 import { IconArrowRight, IconSelector } from '@tabler/icons-react';
-import { useRef } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 
 const SelectEdge = ({
   edge,
   view
 }) => {
   const browser = useRelationshipDetails();
-  const viewport = useRef(null);
-  useMantinePortalProps();
-  useComputedColorScheme();
+  const viewport = reactExports.useRef(null);
   const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
   const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
   const edges = view.edges.flatMap((edge2) => {

package/dist/overlays/relationship-details/actor.d.ts

@@ -21,6 +21,8 @@ export type Input = ExclusiveUnion<{
 }>;
 type Subject = {
     edgeId: EdgeId;
+    source?: never;
+    target?: never;
 } | {
     source: Fqn;
     target: Fqn;

package/dist/overlays/relationship-details/custom/edgeTypes.js

@@ -19,7 +19,7 @@ const RelationshipEdge = customEdge((props) => {
   const [svgPath, labelX, labelY] = getBezierPath(props);
   const diagram = useDiagram();
   return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
-    /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
+    /* @__PURE__ */ jsx(EdgePath, { edgeProps: props, svgPath }),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
       {

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -27,7 +27,7 @@ const ElementDetailsButtonWithHandler = (props) => {
 const ElementNode = customNode((props) => {
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

package/dist/overlays/relationship-details/hooks.d.ts

@@ -12,6 +12,8 @@ export declare function useRelationshipDetails(): {
     getState: () => Readonly<{
         subject: {
             edgeId: EdgeId;
+            source?: never;
+            target?: never;
         } | {
             source: Fqn;
             target: Fqn;
@@ -57,7 +59,7 @@ export declare function useRelationshipDetails(): {
                 active?: boolean;
                 dimmed?: import("../../base").Base.Dimmed;
             };
-        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+        }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
         }) | null;
         xystore: {

package/dist/overlays/relationship-details/hooks.js

@@ -2,11 +2,11 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { createContext, useMemo, useContext } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 
-const RelationshipDetailsActorContext = createContext(null);
+const RelationshipDetailsActorContext = reactExports.createContext(null);
 function useRelationshipDetailsActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
+  return nonNullable(reactExports.useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
 }
 function useRelationshipDetailsState(selector, compare = shallowEqual) {
   const select = useCallbackRef(selector);
@@ -15,7 +15,7 @@ function useRelationshipDetailsState(selector, compare = shallowEqual) {
 }
 function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor();
-  return useMemo(() => ({
+  return reactExports.useMemo(() => ({
     actor,
     get rootElementId() {
       return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -5,10 +5,9 @@ import { useCallbackRef, useStateHistory } from '@mantine/hooks';
 import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
-import { useRef, memo, useEffect } from 'react';
+import { LayoutGroup, AnimatePresence, m } from 'motion/react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { ViewPadding } from './const.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
@@ -24,7 +23,7 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipsBrowser({ actorRef }) {
-  const initialRef = useRef(null);
+  const initialRef = reactExports.useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       initialNodes: [],
@@ -39,7 +38,7 @@ const selector = (state) => ({
   edges: state.context.xyedges
 });
 const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
-const RelationshipsBrowserXYFlow = memo(() => {
+const RelationshipsBrowserXYFlow = reactExports.memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     isActive,
@@ -62,7 +61,6 @@ const RelationshipsBrowserXYFlow = memo(() => {
       nodeTypes,
       edgeTypes,
       fitView: false,
-      fitViewPadding: ViewPadding,
       onNodeClick: useCallbackRef((e, node) => {
         browser.send({ type: "xyflow.nodeClick", node });
       }),
@@ -110,7 +108,7 @@ const selector2 = (state) => ({
   scope: state.context.scope,
   closeable: state.context.closeable
 });
-const RelationshipsBrowserInner = memo(() => {
+const RelationshipsBrowserInner = reactExports.memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -120,24 +118,24 @@ const RelationshipsBrowserInner = memo(() => {
   } = useRelationshipsBrowserState(selector2);
   const store = useStoreApi();
   const instance = useReactFlow();
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (instance.viewportInitialized) {
       browser.send({ type: "xyflow.init", instance, store });
     }
   }, [store, instance.viewportInitialized, browser]);
   const layouted = useRelationshipsView(subjectId, viewId, scope);
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historySubjectId !== subjectId) {
       historyOps.set(subjectId);
     }
   }, [subjectId]);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historySubjectId !== subjectId) {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;