@likec4/diagram 1.21.0 → 1.22.0

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

@@ -1,12 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { isScopedElementView, isDeploymentView } from "@likec4/core";
-import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
+import { Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
 import { useViewportSize, useSessionStorage } from "@mantine/hooks";
-import { useSyncedRef, useDebouncedCallback } from "@react-hookz/web";
+import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
 import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
 import { useDragControls, useMotionValue, m } from "framer-motion";
-import { useCallback, useRef } from "react";
+import { useState, useCallback, useRef } from "react";
 import { pipe, map, partition, only, clamp, isNullish } from "remeda";
+import { Link } from "../../components/Link.js";
 import { useDiagram } from "../../hooks/useDiagram.js";
 import { dialog, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, elementIcon, propertyLabel, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.js";
 import { TabPanelDeployments } from "./TabPanelDeployments.js";
@@ -16,7 +17,6 @@ import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { IconRenderer } from "../../context/IconRenderer.js";
 import { IfEnabled, DiagramFeatures } from "../../context/DiagramFeatures.js";
-import { Link } from "../../base/Link.js";
 const Divider = Divider$1.withProps({
   mb: 8,
   labelPosition: "left",
@@ -54,6 +54,7 @@ function ElementDetailsCard({
   onClose
 }) {
   var _a, _b, _c;
+  const [opened, setOpened] = useState(false);
   const windowSize = useViewportSize();
   const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
   const [activeTab, setActiveTab] = useSessionStorage({
@@ -138,11 +139,21 @@ function ElementDetailsCard({
     },
     className: elementIcon
   });
+  useTimeoutEffect(() => {
+    var _a2, _b2;
+    if (!((_a2 = ref.current) == null ? void 0 : _a2.open)) {
+      (_b2 = ref.current) == null ? void 0 : _b2.showModal();
+    }
+  }, 30);
+  useTimeoutEffect(() => {
+    setOpened(true);
+  }, 120);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref,
       className: dialog,
+      layout: true,
       initial: {
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "10%"
@@ -158,22 +169,18 @@ function ElementDetailsCard({
           duration: 0.1
         }
       },
-      onAnimationStart: () => {
-        var _a2;
-        (_a2 = ref.current) == null ? void 0 : _a2.showModal();
-      },
       onClick: (e) => {
-        var _a2, _b2;
+        var _a2, _b2, _c2;
         if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
           e.stopPropagation();
-          close();
+          (_c2 = ref.current) == null ? void 0 : _c2.close();
         }
       },
       onClose: (e) => {
         e.stopPropagation();
         close();
       },
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(
         Card,
         {
           drag: true,
@@ -347,7 +354,7 @@ function ElementDetailsCard({
                         enableRelationshipBrowser: false,
                         enableNavigateTo: false
                       },
-                      children: !!nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
+                      children: opened && !!nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
                         TabPanelRelationships,
                         {
                           element: elementModel,
@@ -399,7 +406,7 @@ function ElementDetailsCard({
             )
           ]
         }
-      ) })
+      )
     }
   );
 }

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from "@mantine/core";
 import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
 import { memo, useMemo, useEffect } from "react";
-import { useCurrentViewId } from "../../hooks/useCurrentViewId.js";
+import { useDiagram } from "../../hooks/useDiagram.js";
 import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
 import { stopPropagation } from "../../utils/xyflow.js";
@@ -18,7 +18,8 @@ const DeploymentNodeRenderer = ({
 const DeployedInstanceRenderer = ({
   instance
 }) => {
-  const currentViewId = useCurrentViewId();
+  const diagram = useDiagram();
+  const currentViewId = diagram.currentView().id;
   const views = [...instance.views()];
   return /* @__PURE__ */ jsxs(Group, { className: instanceLabel, gap: 4, children: [
     /* @__PURE__ */ jsx(ThemeIcon, { color: "gray", variant: "transparent", size: "xs", flex: 0, children: /* @__PURE__ */ jsx(IconTarget, { stroke: 1.2 }) }),
@@ -56,6 +57,7 @@ const DeployedInstanceRenderer = ({
                 },
                 onClick: (e) => {
                   e.stopPropagation();
+                  diagram.navigateTo(view.id);
                 },
                 children: view.title
               },

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

@@ -1,8 +1,12 @@
 import { HTMLMotionProps } from 'framer-motion';
-import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { PropsWithChildren } from 'react';
 type OverlayProps = PropsWithChildren<HTMLMotionProps<'dialog'> & {
+    classes?: {
+        dialog?: string;
+        body?: string;
+    };
     onClose: () => void;
     onClick?: never;
 }>;
-export declare const Overlay: ForwardRefExoticComponent<Omit<OverlayProps, "ref"> & RefAttributes<HTMLDialogElement>>;
+export declare function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/overlays/overlay/Overlay.js

@@ -1,12 +1,11 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { RemoveScroll, Box } from "@mantine/core";
-import { useMergedRef } from "@mantine/hooks";
-import { useSyncedRef, useDebouncedCallback } from "@react-hookz/web";
+import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
 import clsx from "clsx";
 import { m } from "framer-motion";
-import { forwardRef, useState, useRef, useLayoutEffect } from "react";
+import { useState, useRef } from "react";
 import { body, dialog } from "./Overlay.css.js";
-const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
+function Overlay({ children, onClose, className, classes, ...rest }) {
   const [opened, setOpened] = useState(false);
   const dialogRef = useRef(null);
   const onCloseRef = useSyncedRef(onClose);
@@ -17,23 +16,18 @@ const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
     [],
     50
   );
-  useLayoutEffect(() => {
-    var _a;
-    const cancel = (e) => {
-      e.preventDefault();
-      onCloseRef.current();
-    };
-    (_a = dialogRef.current) == null ? void 0 : _a.addEventListener("cancel", cancel, { capture: true });
-    return () => {
-      var _a2;
-      (_a2 = dialogRef.current) == null ? void 0 : _a2.removeEventListener("cancel", cancel, { capture: true });
-    };
-  }, []);
+  useTimeoutEffect(() => {
+    var _a, _b;
+    if (!((_a = dialogRef.current) == null ? void 0 : _a.open)) {
+      (_b = dialogRef.current) == null ? void 0 : _b.showModal();
+    }
+    setOpened(true);
+  }, 30);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
-      ref: useMergedRef(ref, dialogRef),
-      className: clsx(dialog, className),
+      ref: dialogRef,
+      className: clsx(dialog, classes == null ? void 0 : classes.dialog, className),
       initial: {
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "5%",
@@ -50,13 +44,8 @@ const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
         //   delay: 0.25,
         // }
       },
-      onAnimationStart: () => {
-        var _a;
-        (_a = dialogRef.current) == null ? void 0 : _a.showModal();
-        setOpened(true);
-      },
       exit: {
-        opacity: 0.1,
+        opacity: 0,
         translateY: -10,
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "0%",
@@ -65,22 +54,22 @@ const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
         }
       },
       onClick: (e) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (((_b = (_a = e.target) == null ? void 0 : _a.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
           e.stopPropagation();
-          close();
+          (_c = dialogRef.current) == null ? void 0 : _c.close();
+          return;
         }
       },
       onClose: (e) => {
-        e.preventDefault();
         e.stopPropagation();
         close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(Box, { className: body, children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(Box, { className: clsx(body, classes == null ? void 0 : classes.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
     }
   );
-});
+}
 export {
   Overlay
 };

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

@@ -81,7 +81,7 @@ const SelectEdge = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 420, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", children: edges.map((e) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", maw: 400, children: edges.map((e) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: edgeRow,
@@ -95,7 +95,6 @@ const SelectEdge = ({
                 Box,
                 {
                   className: edgeSource,
-                  maw: 160,
                   mod: {
                     "edge-id": e.id,
                     "likec4-color": e.source.color
@@ -108,7 +107,6 @@ const SelectEdge = ({
                 Box,
                 {
                   className: edgeTarget,
-                  maw: 160,
                   mod: {
                     "likec4-color": e.target.color
                   },

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

@@ -5,8 +5,8 @@ import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { ReactFlowProvider, useStoreApi, Panel } from "@xyflow/react";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
-import { AnimatePresence, m } from "framer-motion";
-import { useRef, memo, useEffect } from "react";
+import { AnimatePresence, LayoutGroup, m } from "framer-motion";
+import { useId, useRef, memo, useEffect } from "react";
 import { BaseXYFlow } from "../../base/BaseXYFlow.js";
 import { useRelationshipsView } from "./-useRelationshipsView.js";
 import { ViewPadding } from "./const.js";
@@ -15,6 +15,7 @@ import { nodeTypes } from "./custom/nodeTypes.js";
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
 import { SelectElement } from "./SelectElement.js";
 function RelationshipsBrowser({ actorRef }) {
+  const id = useId();
   const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
@@ -22,7 +23,7 @@ function RelationshipsBrowser({ actorRef }) {
       initialEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) });
+  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
 }
 const selector = (state) => ({
   initialized: state.context.initialized,
@@ -76,10 +77,10 @@ const RelationshipsBrowserXYFlow = memo(() => {
         browser.send({ type: "xyflow.resized" });
       }),
       onNodesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyNodeChages", changes });
+        browser.send({ type: "xyflow.applyNodeChanges", changes });
       }),
       onEdgesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyEdgeChages", changes });
+        browser.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
       nodesDraggable: false,
       fitView: false,

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

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ancestorsFqn } from "@likec4/core";
-import { useTree, useComputedColorScheme, Popover, PopoverTarget, Button, PopoverDropdown, ScrollAreaAutosize, Tree, Group, ActionIcon, Box, Text } from "@mantine/core";
+import { useTree, useComputedColorScheme, Box, Popover, PopoverTarget, Button, PopoverDropdown, ScrollAreaAutosize, Tree, Group, ActionIcon, Text } from "@mantine/core";
 import { IconSelector, IconChevronRight } from "@tabler/icons-react";
 import { useRef, useEffect } from "react";
 import * as SelectElement_css from "./SelectElement.css.js";
@@ -27,12 +27,12 @@ const SelectElement = ({
     tree.select(subjectId);
   }, [subjectId]);
   const theme = useComputedColorScheme();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { pos: "relative", children: /* @__PURE__ */ jsxs(
     Popover,
     {
-      position: "bottom",
+      position: "bottom-start",
       shadow: "md",
-      keepMounted: true,
+      keepMounted: false,
       withinPortal: false,
       closeOnClickOutside: true,
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
@@ -67,6 +67,10 @@ const SelectElement = ({
             classNames: SelectElement_css,
             levelOffset: 8,
             styles: {
+              root: {
+                maxWidth: 400,
+                overflow: "hidden"
+              },
               label: {
                 paddingTop: 5,
                 paddingBottom: 6
@@ -122,7 +126,7 @@ const SelectElement = ({
         ) }) })
       ]
     }
-  );
+  ) });
 };
 export {
   SelectElement

package/dist/overlays/relationships-browser/actor.d.ts

@@ -33,10 +33,10 @@ export type Events = {
     type: 'xyflow.edgeClick';
     edge: RelationshipsBrowserTypes.Edge;
 } | {
-    type: 'xyflow.applyNodeChages';
+    type: 'xyflow.applyNodeChanges';
     changes: NodeChange<RelationshipsBrowserTypes.Node>[];
 } | {
-    type: 'xyflow.applyEdgeChages';
+    type: 'xyflow.applyEdgeChanges';
     changes: EdgeChange<RelationshipsBrowserTypes.Edge>[];
 } | {
     type: 'xyflow.paneClick';

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

@@ -99,7 +99,7 @@ const relationshipsBrowserActor = setup({
       const currentSubjectNode = findRootSubject(currentNodes);
       const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
       if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
-        xyflow.setViewport(nextviewport);
+        await xyflow.setViewport(nextviewport);
         return updateXYData();
       }
       const nextSubjectCenter = {
@@ -168,7 +168,7 @@ const relationshipsBrowserActor = setup({
         return updateXYData();
       }
       await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 });
-      xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+      await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
       return updateXYData();
     })
   }
@@ -260,11 +260,11 @@ const relationshipsBrowserActor = setup({
                 xyedges: ({ event }) => event.xyedges
               })
             },
-            "xyflow.applyEdgeChages": {
-              // actions: log('layouting: ignore xyflow.applyEdgeChages'),
+            "xyflow.applyEdgeChanges": {
+              // actions: log('layouting: ignore xyflow.applyEdgeChanges'),
             },
-            "xyflow.applyNodeChages": {
-              // actions: log('layouting: ignore xyflow.applyNodeChages'),
+            "xyflow.applyNodeChanges": {
+              // actions: log('layouting: ignore xyflow.applyNodeChanges'),
             }
           }
         }
@@ -335,14 +335,14 @@ const relationshipsBrowserActor = setup({
     }
   },
   on: {
-    "xyflow.applyNodeChages": {
+    "xyflow.applyNodeChanges": {
       actions: assign({
         xynodes: ({ context, event }) => {
           return applyNodeChanges(event.changes, context.xynodes);
         }
       })
     },
-    "xyflow.applyEdgeChages": {
+    "xyflow.applyEdgeChanges": {
       actions: assign({
         xyedges: ({ context, event }) => {
           return applyEdgeChanges(event.changes, context.xyedges);

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -17,13 +17,13 @@ const nodeTypes = {
       /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
       /* @__PURE__ */ jsx(ElementActions, { ...props }),
       /* @__PURE__ */ jsx(ElementPorts, { ...props })
-    ] });
+    ] }, props.id);
   }),
   compound: customNode((props) => {
     return /* @__PURE__ */ jsxs(CompoundNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
       /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
       /* @__PURE__ */ jsx(CompoundPorts, { ...props })
-    ] });
+    ] }, props.id);
   }),
   empty: customNode((props) => {
     return /* @__PURE__ */ jsx(EmptyNode, { ...props });