@likec4/diagram 1.27.1 → 1.27.2

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

@@ -1,4 +1,28 @@
+import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
 export declare const backdropBlur = "--_blur";
 export declare const backdropOpacity = "--_opacity";
-export declare const dialog: string;
-export declare const body: string;
+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";
+            };
+        };
+    };
+}>;

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

@@ -1,9 +1,12 @@
-import { css } from '@likec4/styles/css';
+import { sva, css } from '@likec4/styles/css';
 
 const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
+const level = "--_level";
+const offset = "--_offset";
+const inset = "--_inset";
 const borderRadius = "--_border-radius";
-const dialog = css({
+const dialog = css.raw({
   boxSizing: "border-box",
   margin: 0,
   position: "fixed",
@@ -17,6 +20,9 @@ const dialog = css({
   outline: "none",
   borderRadius: `var(${borderRadius})`,
   [backdropBlur]: "0px",
+  [level]: "0",
+  [offset]: "0px",
+  [inset]: "calc((1 + var(--_level) * 0.5) * var(--_offset))",
   [backdropOpacity]: "0%",
   _backdrop: {
     cursor: "zoom-out",
@@ -31,35 +37,46 @@ const dialog = css({
     border: "none",
     inset: 0,
     padding: 0,
+    // [offset]: '0px',
+    // [inset]: '0px',
     width: "100vw",
     height: "100vh"
   },
   sm: {
+    inset: "[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]",
+    width: "calc(100vw - var(--_offset) - var(--_inset))",
+    height: "calc(100vh - var(--_offset) - var(--_inset))",
     [borderRadius]: "6px",
     padding: "6px",
-    inset: "1rem",
-    width: "calc(100vw - 2rem)",
-    height: "calc(100vh - 2rem)"
+    [offset]: "1rem"
   },
   md: {
-    inset: "2rem",
-    width: "calc(100vw - 4rem)",
-    height: "calc(100vh - 4rem)"
+    [offset]: "1rem"
   },
   lg: {
-    inset: "4rem",
-    width: "calc(100vw - 8rem)",
-    height: "calc(100vh - 8rem)"
+    [offset]: "2rem"
   },
   xl: {
-    [borderRadius]: "8px",
-    padding: "8px",
-    inset: "5rem",
-    width: "calc(100vw - 10rem)",
-    height: "calc(100vh - 10rem)"
+    [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({
+const body = css.raw({
   position: "relative",
   containerName: "overlay-dialog",
   containerType: "size",
@@ -72,5 +89,36 @@ const body = css({
     borderRadius: `calc(var(${borderRadius}) - 2px)`
   }
 });
+const overlay = sva({
+  slots: ["dialog", "body"],
+  base: {
+    dialog,
+    body
+  },
+  variants: {
+    level: {
+      0: {
+        dialog: {
+          [level]: "0"
+        }
+      },
+      1: {
+        dialog: {
+          [level]: "1"
+        }
+      },
+      2: {
+        dialog: {
+          [level]: "2"
+        }
+      },
+      3: {
+        dialog: {
+          [level]: "3"
+        }
+      }
+    }
+  }
+});
 
-export { backdropBlur, backdropOpacity, body, dialog };
+export { backdropBlur, backdropOpacity, level, overlay };

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

@@ -1,12 +1,13 @@
-import { HTMLMotionProps } from 'framer-motion';
-import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
-type OverlayProps = PropsWithChildren<HTMLMotionProps<'dialog'> & {
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+export declare const Overlay: ForwardRefExoticComponent<{
+    overlayLevel?: 0 | 1 | 2 | 3;
+    className?: string;
     classes?: {
         dialog?: string;
         body?: string;
     };
     onClose: () => void;
     onClick?: never;
-}>;
-export declare const Overlay: ForwardRefExoticComponent<Omit<OverlayProps, "ref"> & RefAttributes<HTMLDialogElement>>;
-export {};
+} & {
+    children?: ReactNode | undefined;
+} & RefAttributes<HTMLDialogElement>>;

package/dist/overlays/overlay/Overlay.js

@@ -5,11 +5,11 @@ 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 { body, backdropOpacity, backdropBlur, dialog } from './Overlay.css.js';
+import { overlay, backdropOpacity, backdropBlur } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
 const Overlay = forwardRef(
-  ({ children, onClose, className, classes, ...rest }, ref) => {
+  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
     const [opened, setOpened] = useState(false);
     const dialogRef = useRef(null);
     const isClosingRef = useRef(false);
@@ -38,28 +38,32 @@ const Overlay = forwardRef(
       if (!dialogRef.current?.open) {
         dialogRef.current?.showModal();
       }
-    }, 10);
+    }, 20);
     useTimeoutEffect(() => {
       setOpened(true);
     }, 120);
+    const styles = overlay({
+      level: overlayLevel
+    });
     return /* @__PURE__ */ jsx(
       m.dialog,
       {
         ref: useMergedRef(dialogRef, ref),
-        className: cx(RemoveScroll.classNames.fullWidth, dialog, classes?.dialog, className),
+        className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
         layout: true,
         ...motionNotReduced ? {
           initial: {
             [backdropBlur]: "0px",
             [backdropOpacity]: "0%",
-            scale: 1.075,
+            scale: overlayLevel > 0 ? 0.9 : 1.075,
             opacity: 0
           },
           animate: {
-            [backdropBlur]: "8px",
-            [backdropOpacity]: "60%",
+            [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+            [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
             scale: 1,
             opacity: 1,
+            translateY: 0,
             transition: {
               delay: 0.075
             }
@@ -91,7 +95,7 @@ const Overlay = forwardRef(
           close();
         },
         ...rest,
-        children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx(Box, { className: cx(body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+        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 }) }) })
       }
     );
   }

package/dist/overlays/overlaysActor.js

@@ -88,8 +88,8 @@ const overlaysActorLogic = setup({
       const currentOverlay = last(context.overlays);
       if (currentOverlay?.type === "relationshipDetails") {
         enqueue.sendTo(currentOverlay.id, {
-          type: "navigate.to",
-          edgeId: event.edgeId
+          ...event,
+          type: "navigate.to"
         });
         return;
       }

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

@@ -1,15 +1,21 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { invariant, nonNullable, ifind, isAncestor } from '@likec4/core';
 import { ActionIcon, Group } from '@mantine/core';
-import { useStateHistory, useCallbackRef } from '@mantine/hooks';
+import { useCallbackRef, useStateHistory } from '@mantine/hooks';
 import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
-import { ReactFlowProvider, Panel } from '@xyflow/react';
+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, useEffect } from 'react';
+import { useRef, memo, useMemo, useEffect } from 'react';
+import 'remeda';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsState } from './hooks.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from './compute.js';
+import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsState, useRelationshipDetailsActor } from './hooks.js';
+import { layoutRelationshipDetails } from './layout.js';
 import { SelectEdge } from './SelectEdge.js';
-import { useLayoutedDetails } from './useLayoutedDetails.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
 
@@ -28,50 +34,68 @@ function RelationshipDetails({ actorRef }) {
       defaultEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) }) }) });
+  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, {})
+  ] }) });
 }
-const selector = (state) => ({
-  edgeId: state.context.edgeId,
-  view: state.context.view,
-  initialized: state.context.initialized,
-  nodes: state.context.xynodes,
-  edges: state.context.xyedges
+const selectSubject = (state) => ({
+  ...state.context.subject,
+  viewId: state.context.viewId
+});
+function SyncRelationshipDetailsXYFlow() {
+  const actor = useRelationshipDetailsActor();
+  const subject = useSelector(actor, selectSubject, deepEqual);
+  const likec4model = useLikeC4Model(true);
+  const view = likec4model.findView(subject.viewId) ?? null;
+  const data = useMemo(() => {
+    let data2;
+    if ("edgeId" in subject) {
+      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 {
+      data2 = computeRelationshipDetailsViewData({
+        source: likec4model.element(subject.source),
+        target: likec4model.element(subject.target)
+      });
+    }
+    return layoutRelationshipDetails(data2, view);
+  }, [
+    subject,
+    view,
+    likec4model
+  ]);
+  const store = useStoreApi();
+  const instance = useReactFlow();
+  useEffect(() => {
+    if (instance.viewportInitialized) {
+      actor.send({ type: "xyflow.init", instance, store });
+    }
+  }, [store, instance.viewportInitialized, actor]);
+  useEffect(() => {
+    actor.send({ type: "update.layoutData", data });
+  }, [data, actor]);
+  return null;
+}
+const selector = ({ context }) => ({
+  // subject: context.subject,
+  // view: state.context.view,
+  initialized: context.initialized.xydata && context.initialized.xyflow,
+  nodes: context.xynodes,
+  edges: context.xyedges
 });
 const RelationshipDetailsInner = memo(() => {
   const browser = useRelationshipDetails();
   const {
-    edgeId,
-    view,
     initialized,
     nodes,
     edges
-  } = useRelationshipDetailsState(selector);
-  const {
-    edge,
-    xynodes,
-    xyedges,
-    bounds
-  } = useLayoutedDetails(edgeId, view);
-  useEffect(() => {
-    browser.send({ type: "update.xydata", xynodes, xyedges });
-  }, [xynodes, xyedges]);
-  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edgeId);
-  useEffect(() => {
-    if (historyEdgeId !== edgeId) {
-      historyOps.set(edgeId);
-    }
-  }, [edgeId]);
-  useEffect(() => {
-    if (historyEdgeId !== edgeId) {
-      browser.navigateTo(historyEdgeId);
-    }
-  }, [historyEdgeId]);
-  const hasStepBack = current > 0;
-  const hasStepForward = current + 1 < history.length;
+  } = useRelationshipDetailsState(selector, deepEqual);
   return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
-      id: `relationships-details-${browser.actor.sessionId}`,
+      id: browser.rootElementId,
       nodes,
       edges,
       className: clsx(initialized ? "initialized" : "not-initialized"),
@@ -84,29 +108,32 @@ const RelationshipDetailsInner = memo(() => {
         browser.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
       fitViewPadding: 0.05,
-      onInit: useCallbackRef((instance) => {
-        browser.send({ type: "xyflow.init", instance });
-      }),
       onNodeClick: useCallbackRef((e, node) => {
         e.stopPropagation();
         browser.send({ type: "xyflow.nodeClick", node });
       }),
-      onEdgeClick: useCallbackRef((e, edge2) => {
+      onEdgeClick: useCallbackRef((e, edge) => {
         e.stopPropagation();
-        browser.send({ type: "xyflow.edgeClick", edge: edge2 });
+        browser.send({ type: "xyflow.edgeClick", edge });
       }),
       onPaneClick: useCallbackRef((e) => {
-        e.stopPropagation();
         browser.send({ type: "xyflow.paneClick" });
       }),
+      onDoubleClick: useCallbackRef((e) => {
+        browser.send({ type: "xyflow.paneDblClick" });
+      }),
       onViewportResize: useCallbackRef(() => {
         browser.send({ type: "xyflow.resized" });
       }),
-      onEdgeMouseEnter: useCallbackRef((_event, edge2) => {
-        browser.send({ type: "xyflow.edgeMouseEnter", edge: edge2 });
+      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+        if (!edge.data.hovered) {
+          browser.send({ type: "xyflow.edgeMouseEnter", edge });
+        }
       }),
-      onEdgeMouseLeave: useCallbackRef((_event, edge2) => {
-        browser.send({ type: "xyflow.edgeMouseLeave", edge: edge2 });
+      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+        if (edge.data.hovered) {
+          browser.send({ type: "xyflow.edgeMouseLeave", edge });
+        }
       }),
       onSelectionChange: useCallbackRef((params) => {
         browser.send({ type: "xyflow.selectionChange", ...params });
@@ -116,17 +143,7 @@ const RelationshipDetailsInner = memo(() => {
       pannable: true,
       zoomable: true,
       children: [
-        /* @__PURE__ */ jsx(
-          TopLeftPanel,
-          {
-            edge,
-            view,
-            hasStepBack,
-            hasStepForward,
-            onStepBack: () => historyOps.back(),
-            onStepForward: () => historyOps.forward()
-          }
-        ),
+        /* @__PURE__ */ jsx(TopLeftPanel, {}),
         /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
@@ -143,15 +160,41 @@ const RelationshipDetailsInner = memo(() => {
     }
   );
 });
-const TopLeftPanel = ({
-  edge,
-  view,
-  hasStepBack,
-  hasStepForward,
-  onStepBack,
-  onStepForward
-}) => {
-  useRelationshipDetails();
+const topLeftPanelselector = ({ context }) => ({
+  subject: context.subject,
+  viewId: context.viewId
+});
+const TopLeftPanel = 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));
+  });
+  if (!edge) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(TopLeftPanelInner, { edge: edge.$edge, view: view.$view });
+});
+const TopLeftPanelInner = ({ edge, view }) => {
+  const browser = useRelationshipDetails();
+  const edgeId = edge.id;
+  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
+  useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      historyOps.set(edgeId);
+    }
+  }, [edgeId]);
+  useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      browser.navigateTo(historyEdgeId);
+    }
+  }, [historyEdgeId]);
+  const hasStepBack = current > 0;
+  const hasStepForward = current + 1 < history.length;
   return /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsx(Group, { gap: 4, wrap: "nowrap", children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
     hasStepBack && /* @__PURE__ */ jsx(
       m.div,
@@ -170,7 +213,7 @@ const TopLeftPanel = ({
             color: "gray",
             onClick: (e) => {
               e.stopPropagation();
-              onStepBack();
+              historyOps.back();
             },
             children: /* @__PURE__ */ jsx(IconChevronLeft, {})
           }
@@ -195,7 +238,7 @@ const TopLeftPanel = ({
             color: "gray",
             onClick: (e) => {
               e.stopPropagation();
-              onStepForward();
+              historyOps.forward();
             },
             children: /* @__PURE__ */ jsx(IconChevronRight, {})
           }

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

@@ -2,4 +2,4 @@ import { DiagramEdge, DiagramView } from '@likec4/core';
 export declare const SelectEdge: ({ edge, view, }: {
     edge: DiagramEdge;
     view: DiagramView;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -11,22 +11,28 @@ const SelectEdge = ({
   edge,
   view
 }) => {
-  const overlay = useRelationshipDetails();
+  const browser = useRelationshipDetails();
   const viewport = useRef(null);
   useMantinePortalProps();
   useComputedColorScheme();
   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.map((edge2) => {
+  const edges = view.edges.flatMap((edge2) => {
     const source = view.nodes.find((n) => n.id === edge2.source);
     const target = view.nodes.find((n) => n.id === edge2.target);
-    return {
-      id: edge2.id,
-      source,
-      target,
-      label: edge2.label
-    };
+    if (source && target) {
+      return {
+        id: edge2.id,
+        source,
+        target,
+        label: edge2.label
+      };
+    }
+    return [];
   });
+  if (!edgeSource$1 || !edgeTarget$1 || edges.length === 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -87,7 +93,7 @@ const SelectEdge = ({
             "data-selected": e.id === edge.id,
             onClick: (event) => {
               event.stopPropagation();
-              overlay.navigateTo(e.id);
+              browser.navigateTo(e.id);
             },
             children: [
               /* @__PURE__ */ jsx(

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

@@ -1,6 +1,7 @@
 import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipDetailsTypes {
+    type Column = 'sources' | 'targets';
     /**
      * The node's incoming and outgoing ports
      */
@@ -9,11 +10,13 @@ export declare namespace RelationshipDetailsTypes {
         out: string[];
     };
     type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style'>> & {
+        column: Column;
         fqn: Fqn;
         icon: IconUrl;
         ports: Ports;
     }>;
-    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
+    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'style'>> & {
+        column: Column;
         fqn: Fqn;
         depth: number;
         icon?: IconUrl;