@likec4/diagram 1.18.0 → 1.19.0

package/dist/hooks/useXYFlow.d.ts

@@ -0,0 +1,270 @@
+import { DiagramFlowTypes } from '../xyflow/types';
+import { ReactFlowInstance, InternalNode, ReactFlowState } from '@xyflow/react';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { ReactNode, CSSProperties } from 'react';
+export declare const useXYFlow: () => ReactFlowInstance<DiagramFlowTypes.Node, {
+    id: string;
+    type: "relationship";
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+    animated?: boolean;
+    hidden?: boolean;
+    deletable?: boolean;
+    selectable?: boolean;
+    data: DiagramFlowTypes.DiagramEdgeData;
+    selected?: boolean;
+    markerStart?: EdgeMarkerType;
+    markerEnd?: EdgeMarkerType;
+    zIndex?: number;
+    ariaLabel?: string;
+    interactionWidth?: number;
+    label?: ReactNode;
+    labelStyle?: CSSProperties;
+    labelShowBg?: boolean;
+    labelBgStyle?: CSSProperties;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+    style?: CSSProperties;
+    className?: string;
+    reconnectable?: boolean | HandleType;
+    focusable?: boolean;
+}>;
+export declare const useXYNodesData: {
+    (nodeId: string): Pick<DiagramFlowTypes.Node, "id" | "type" | "data"> | null;
+    (nodeIds: string[]): Pick<DiagramFlowTypes.Node, "id" | "type" | "data">[];
+};
+export declare const useXYInternalNode: (id: string) => InternalNode<DiagramFlowTypes.Node> | undefined;
+export declare function useXYStore<StateSlice = unknown>(selector: (state: DiagramFlowTypes.XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
+export declare const useXYStoreApi: () => {
+    getState: () => ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }>;
+    setState: (partial: ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }> | Partial< ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }>> | ((state: ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }>) => ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }> | Partial< ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }>>), replace?: boolean | undefined) => void;
+    subscribe: (listener: (state: ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }>, prevState: ReactFlowState<DiagramFlowTypes.Node, {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }>) => void) => () => void;
+};
+export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
+export declare function useXYEdgesData(edgeIds: string[]): Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[];

package/dist/hooks/useXYFlow.js

@@ -0,0 +1,20 @@
+import { useReactFlow, useStoreApi, useInternalNode, useStore, useNodesData } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import "react";
+const useXYFlow = useReactFlow;
+const useXYNodesData = useNodesData;
+const useXYInternalNode = useInternalNode;
+function useXYStore(selector, equalityFn) {
+  return useStore(
+    selector,
+    shallowEqual
+  );
+}
+const useXYStoreApi = useStoreApi;
+export {
+  useXYFlow,
+  useXYInternalNode,
+  useXYNodesData,
+  useXYStore,
+  useXYStoreApi
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { LikeC4Diagram } from './LikeC4Diagram';
+export type { LikeC4DiagramProps } from './LikeC4Diagram';
+export { useLikeC4DiagramView, useLikeC4ElementModel, useLikeC4ElementsTree, useLikeC4Model, useLikeC4View, useLikeC4ViewModel, useLikeC4Views, } from './likec4model';
+export { LikeC4ModelProvider } from './LikeC4ModelProvider';
+export { useSetState } from './hooks/useSetState';
+export { useUpdateEffect } from './hooks/useUpdateEffect';
+export { vars, xyvars } from './theme-vars';
+export type * from './LikeC4Diagram.props';
+export type * from './xyflow/types';
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
+export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -0,0 +1,25 @@
+/* empty css                                          */
+import { LikeC4Diagram } from "./LikeC4Diagram.js";
+import { LikeC4ModelProvider } from "./LikeC4ModelProvider.js";
+import { useSetState } from "./hooks/useSetState.js";
+import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
+import { StaticLikeC4Diagram } from "./StaticLikeC4Diagram.js";
+import { useLikeC4DiagramView, useLikeC4ElementModel, useLikeC4Model, useLikeC4View, useLikeC4ViewModel, useLikeC4Views } from "./likec4model/useLikeC4Model.js";
+import { useLikeC4ElementsTree } from "./likec4model/useLikeC4ElementsTree.js";
+import { vars, xyvars } from "./theme-vars.css.js";
+export {
+  LikeC4Diagram,
+  LikeC4ModelProvider,
+  StaticLikeC4Diagram,
+  useLikeC4DiagramView,
+  useLikeC4ElementModel,
+  useLikeC4ElementsTree,
+  useLikeC4Model,
+  useLikeC4View,
+  useLikeC4ViewModel,
+  useLikeC4Views,
+  useSetState,
+  useUpdateEffect,
+  vars,
+  xyvars
+};

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -0,0 +1,3 @@
+import { LikeC4Model } from '@likec4/core';
+import { Context } from 'react';
+export declare const LikeC4ModelContext: Context<LikeC4Model<LikeC4Model.Any> | null>;

package/dist/likec4model/LikeC4ModelContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const LikeC4ModelContext = createContext(null);
+export {
+  LikeC4ModelContext
+};

package/dist/likec4model/index.d.ts

@@ -0,0 +1,2 @@
+export { useLikeC4ElementsTree, } from './useLikeC4ElementsTree';
+export { useLikeC4CurrentViewModel, useLikeC4DiagramView, useLikeC4ElementModel, useLikeC4Model, useLikeC4View, useLikeC4ViewModel, useLikeC4Views, } from './useLikeC4Model';

package/dist/likec4model/useLikeC4ElementsTree.d.ts

@@ -0,0 +1,12 @@
+import { Fqn, ViewId } from '@likec4/core';
+interface LikeC4ModelTreeNodeData {
+    label: string;
+    value: Fqn;
+    children: LikeC4ModelTreeNodeData[];
+}
+/**
+ * Returns a tree of elements in the model.
+ * If `viewId` is provided, returns the tree of elements in the view.
+ */
+export declare function useLikeC4ElementsTree(viewId?: ViewId): LikeC4ModelTreeNodeData[];
+export {};

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -0,0 +1,25 @@
+import { compareNatural } from "@likec4/core";
+import { useMemo } from "react";
+import { useLikeC4Model } from "./useLikeC4Model.js";
+const sortByLabel = (a, b) => compareNatural(a.label, b.label);
+function buildNode(element) {
+  return {
+    label: element.title,
+    value: element.id,
+    children: [...element.children()].map(buildNode).sort(sortByLabel)
+  };
+}
+function useLikeC4ElementsTree(viewId) {
+  const model = useLikeC4Model(true);
+  return useMemo(() => {
+    if (viewId) {
+      const view = model.view(viewId);
+      return [...view.roots()].map(buildNode).sort(sortByLabel);
+    } else {
+      return [...model.roots()].map(buildNode).sort(sortByLabel);
+    }
+  }, [model, viewId ?? null]);
+}
+export {
+  useLikeC4ElementsTree
+};

package/dist/likec4model/useLikeC4Model.d.ts

@@ -0,0 +1,20 @@
+import { ComputedView, DiagramView, Fqn, LikeC4Model, ViewId } from '@likec4/core';
+import { LiteralUnion } from 'type-fest';
+export declare function useLikeC4Model(): LikeC4Model | null;
+export declare function useLikeC4Model(strict: true): LikeC4Model;
+export declare function useLikeC4Model(strict: boolean): LikeC4Model | null;
+export declare function useLikeC4Model(strict: true, type: 'layouted'): LikeC4Model.Layouted;
+export declare function useLikeC4Model(strict: true, type: 'computed'): LikeC4Model.Computed;
+export declare function useLikeC4Model(strict: true, type: 'layouted' | 'computed' | undefined): LikeC4Model;
+export declare function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null;
+export declare function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null;
+export declare function useLikeC4Model(strict: boolean, type: 'layouted' | 'computed' | undefined): LikeC4Model | null;
+export declare function useLikeC4Views(): Record<ViewId, ComputedView | DiagramView>;
+export declare function useLikeC4ViewModel(viewId: LiteralUnion<ViewId, string>): LikeC4Model.View;
+export declare function useLikeC4CurrentViewModel(): LikeC4Model.View;
+/**
+ * Parsed view, computed or layouted
+ */
+export declare function useLikeC4View(viewId: LiteralUnion<ViewId, string>): ComputedView | DiagramView | null;
+export declare function useLikeC4DiagramView(viewId: LiteralUnion<ViewId, string>): DiagramView | null;
+export declare function useLikeC4ElementModel(fqn: LiteralUnion<Fqn, string>): LikeC4Model.Element;

package/dist/likec4model/useLikeC4Model.js

@@ -0,0 +1,55 @@
+import "@likec4/core";
+import { useContext } from "react";
+import { isString, isNonNullish, isDefined } from "remeda";
+import { LikeC4ModelContext } from "./LikeC4ModelContext.js";
+import { useCurrentViewId } from "../hooks/useDiagramState.js";
+function useLikeC4Model(strict, type) {
+  const model = useContext(LikeC4ModelContext);
+  if (isString(type) && isNonNullish(model) && model.type !== type) {
+    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`);
+  }
+  if (isDefined(strict) && strict === true && !model) {
+    throw new Error("No LikeC4Model found in context");
+  }
+  return model;
+}
+function useLikeC4Views() {
+  return useLikeC4Model(true).$model.views;
+}
+function useLikeC4ViewModel(viewId) {
+  return useLikeC4Model(true).view(viewId);
+}
+function useLikeC4CurrentViewModel() {
+  const viewId = useCurrentViewId();
+  return useLikeC4Model(true).view(viewId);
+}
+function useLikeC4View(viewId) {
+  const model = useLikeC4Model(true);
+  try {
+    return model.view(viewId).$view;
+  } catch (error) {
+    console.warn(error);
+    return null;
+  }
+}
+function useLikeC4DiagramView(viewId) {
+  const model = useLikeC4Model(true, "layouted");
+  try {
+    return model.view(viewId).$view;
+  } catch (error) {
+    console.warn(error);
+    return null;
+  }
+}
+function useLikeC4ElementModel(fqn) {
+  return useLikeC4Model(true).element(fqn);
+}
+export {
+  useLikeC4CurrentViewModel,
+  useLikeC4DiagramView,
+  useLikeC4ElementModel,
+  useLikeC4Model,
+  useLikeC4View,
+  useLikeC4ViewModel,
+  useLikeC4Views
+};

package/dist/overlays/OverlayContext.d.ts

@@ -0,0 +1,10 @@
+import { DiagramState } from '../hooks';
+import { Context } from 'react';
+export declare const OverlayContext: Context<{
+    openOverlay: DiagramState["openOverlay"];
+    close: (onClosed?: () => void) => void;
+}>;
+export declare function useOverlayDialog(): {
+    openOverlay: DiagramState["openOverlay"];
+    close: (onClosed?: () => void) => void;
+};

package/dist/overlays/OverlayContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const OverlayContext = createContext({});
+function useOverlayDialog() {
+  return useContext(OverlayContext);
+}
+export {
+  OverlayContext,
+  useOverlayDialog
+};

package/dist/overlays/Overlays.css.d.ts

@@ -0,0 +1,3 @@
+export declare const mixColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const container: string;
+export declare const cssReactflowMarker: string;

package/dist/overlays/Overlays.css.js

@@ -0,0 +1,7 @@
+/* empty css                            */
+var container = "_1u47gxi1";
+var cssReactflowMarker = "_1u47gxi2";
+export {
+  container,
+  cssReactflowMarker
+};

package/dist/overlays/Overlays.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const Overlays: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/overlays/Overlays.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RemoveScroll, Box, FocusTrap, ActionIcon, Notification, Text, Group, Button } from "@mantine/core";
+import { useHotkeys } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
+import { ReactFlowProvider } from "@xyflow/react";
+import { AnimatePresence, m } from "framer-motion";
+import { memo, useRef, useMemo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { isNullish } from "remeda";
+import { useDiagramStoreApi, useDiagramState } from "../hooks/useDiagramState.js";
+import { EdgeDetailsXYFlow } from "./edge-details/EdgeDetailsXYFlow.js";
+import { ElementDetailsCard } from "./element-details/ElementDetailsCard.js";
+import { OverlayContext } from "./OverlayContext.js";
+import { container } from "./Overlays.css.js";
+import { RelationshipsOverlay } from "./relationships-of/RelationshipsOverlay.js";
+function Fallback({ error, resetErrorBoundary }) {
+  const errorString = error instanceof Error ? error.message : "Unknown error";
+  return /* @__PURE__ */ jsx(Box, { className: container, p: "lg", children: /* @__PURE__ */ jsxs(
+    Notification,
+    {
+      icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
+      styles: {
+        icon: {
+          alignSelf: "flex-start"
+        }
+      },
+      color: "red",
+      title: "Oops, something went wrong",
+      py: "lg",
+      withCloseButton: false,
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              whiteSpace: "preserve-breaks"
+            },
+            children: errorString
+          }
+        ),
+        /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "sm", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
+      ]
+    }
+  ) });
+}
+const Overlays = memo(() => {
+  const diagramStore = useDiagramStoreApi();
+  const {
+    activeOverlay,
+    viewId
+  } = useDiagramState((s) => ({
+    activeOverlay: s.activeOverlay,
+    viewId: s.view.id
+  }));
+  const onCloseCbRef = useRef();
+  const ctxValue = useMemo(() => ({
+    openOverlay: (overlay) => {
+      diagramStore.getState().openOverlay(overlay);
+    },
+    close: (cb) => {
+      onCloseCbRef.current = cb;
+      diagramStore.getState().closeOverlay();
+    }
+  }), [diagramStore]);
+  const onExitComplete = () => {
+    var _a;
+    (_a = onCloseCbRef.current) == null ? void 0 : _a.call(onCloseCbRef);
+    onCloseCbRef.current = void 0;
+  };
+  const isActive = !!activeOverlay;
+  useHotkeys(
+    isActive ? [
+      ["Escape", (e) => {
+        e.stopPropagation();
+        ctxValue.close();
+      }, { preventDefault: true }]
+    ] : []
+  );
+  return /* @__PURE__ */ jsx(OverlayContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => ctxValue.close(), children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, onExitComplete, children: (activeOverlay == null ? void 0 : activeOverlay.elementDetails) && /* @__PURE__ */ jsx(ElementDetailsCard, { fqn: activeOverlay.elementDetails }, "details card") }, viewId),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, onExitComplete, children: activeOverlay && isNullish(activeOverlay.elementDetails) && /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: m.div,
+        className: container,
+        "data-likec4-color": "gray",
+        initial: {
+          "--backdrop-blur": "0px",
+          "--backdrop-opacity": "0%",
+          opacity: 0,
+          translateY: -15
+        },
+        animate: {
+          "--backdrop-blur": "10px",
+          "--backdrop-opacity": "70%",
+          opacity: 1,
+          translateY: 0
+        },
+        exit: {
+          "--backdrop-blur": "1px",
+          "--backdrop-opacity": "0%",
+          translateY: -5,
+          opacity: 0,
+          transition: {
+            duration: 0.2
+          }
+        },
+        children: /* @__PURE__ */ jsxs(FocusTrap, { children: [
+          activeOverlay.relationshipsOf && /* @__PURE__ */ jsx(RelationshipsOverlay, { subjectId: activeOverlay.relationshipsOf }),
+          activeOverlay.edgeDetails && /* @__PURE__ */ jsx(
+            ReactFlowProvider,
+            {
+              defaultNodes: [],
+              defaultEdges: [],
+              children: /* @__PURE__ */ jsx(EdgeDetailsXYFlow, { edgeId: activeOverlay.edgeDetails })
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "default",
+              size: "lg",
+              onClick: (e) => {
+                e.stopPropagation();
+                ctxValue.close();
+              },
+              children: /* @__PURE__ */ jsx(IconX, {})
+            }
+          ) })
+        ] })
+      }
+    ) }) })
+  ] }) });
+});
+export {
+  Overlays
+};

package/dist/overlays/edge-details/EdgeDetailsXYFlow.d.ts

@@ -0,0 +1,5 @@
+import { EdgeId } from '@likec4/core';
+import { NamedExoticComponent } from 'react';
+export declare const EdgeDetailsXYFlow: NamedExoticComponent<{
+    edgeId: EdgeId;
+}>;