@likec4/diagram 1.24.0 → 1.25.0

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,27 +1,80 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Group, Stack, ActionIconGroup } from "@mantine/core";
-import { IconMenu2, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from "@mantine/core";
+import { IconFileSymlink, IconFocusCentered, IconMenu2 } from "@tabler/icons-react";
 import { clsx } from "clsx";
-import { LayoutGroup } from "framer-motion";
+import { LayoutGroup, AnimatePresence, m } from "framer-motion";
 import { memo } from "react";
-import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
+import { useControlsCustomLayout } from "../../../context/ControlsCustomLayout.js";
+import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from "../../../hooks/useDiagram.js";
 import { LikeC4Search } from "../search/LikeC4Search.js";
-import { ActionIcon, Tooltip } from "./_shared.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
 import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
 import { NavigationButtons } from "./NavigationButtons.js";
-import { navigationButtons, actionIconGroup, panel } from "./styles.css.js";
+import { actionIconGroup, navigationButtons, panel } from "./styles.css.js";
 import { ToggleReadonly } from "./ToggleReadonly.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
+const ControlsDefaultLayout = ({
+  burgerMenu,
+  navigationButtons: navigationButtons$1,
+  search,
+  actionsGroup
+}) => /* @__PURE__ */ jsxs(
+  Group,
+  {
+    component: m.div,
+    initial: {
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -16
+    },
+    animate: {
+      opacity: 1,
+      translateX: 0,
+      translateY: 0
+    },
+    exit: {
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -10
+    },
+    align: "flex-start",
+    className: clsx(
+      "react-flow__panel",
+      panel,
+      "likec4-top-left-panel"
+    ),
+    gap: "xs",
+    onClick: stopPropagation,
+    children: [
+      /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
+        /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+          Group,
+          {
+            className: clsx(navigationButtons, "likec4-navigation-webview"),
+            gap: "xs",
+            children: [
+              burgerMenu,
+              navigationButtons$1
+            ]
+          }
+        ) }),
+        actionsGroup
+      ] }),
+      /* @__PURE__ */ jsx(Box, { children: search })
+    ]
+  }
+);
 const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext((c) => ({
+  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
     viewId: c.view.id,
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
-    viewportChanged: c.viewportChangedManually
+    viewportChanged: c.viewportChangedManually,
+    isNotActiveWalkthrough: c.activeWalkthrough === null
   }));
   const diagram = useDiagram();
   const {
@@ -37,73 +90,59 @@ const Controls = memo(() => {
   } = useEnabledFeatures();
   const notReadOnly = !enableReadOnly;
   const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(
-    Group,
+  const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout;
+  return /* @__PURE__ */ jsx(LayoutGroup, { inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
+    ControlsLayout,
     {
-      align: "flex-start",
-      className: clsx(
-        "react-flow__panel",
-        panel,
-        "likec4-top-left-panel"
+      burgerMenu: onBurgerMenuClick && /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onBurgerMenuClick();
+          },
+          children: /* @__PURE__ */ jsx(IconMenu2, {})
+        }
       ),
-      gap: "xs",
-      onClick: stopPropagation,
-      children: [
-        /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
-          /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
-            Group,
-            {
-              className: clsx(navigationButtons, "likec4-navigation-webview"),
-              gap: "xs",
-              children: [
-                onBurgerMenuClick && /* @__PURE__ */ jsx(
-                  ActionIcon,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onBurgerMenuClick();
-                    },
-                    children: /* @__PURE__ */ jsx(IconMenu2, {})
-                  }
-                ),
-                enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {})
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
-            enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
-                },
-                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
-              }
-            ) }),
-            enableControls && /* @__PURE__ */ jsx(ToggleReadonly, {}),
-            enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
-            enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
-              /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
-            ] }),
-            enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.fitDiagram();
-                },
-                children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-              }
-            ) })
-          ] })
+      navigationButtons: enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
+      search: enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
+      syncInProgressBadge: /* @__PURE__ */ jsx(SyncLayoutBadge, {}),
+      actionsGroup: /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
+        enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
+            },
+            children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
+          }
+        ) }),
+        enableControls && /* @__PURE__ */ jsx(ToggleReadonly, {}),
+        enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
+        enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+          /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
         ] }),
-        /* @__PURE__ */ jsx(Group, { children: enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}) })
-      ]
+        enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.fitDiagram();
+            },
+            children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+          }
+        ) })
+      ] })
     }
-  );
+  ) }) });
 });
+const SyncLayoutBadge = () => {
+  const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));
+  if (!isPending) return null;
+  return /* @__PURE__ */ jsx(Badge, { color: "pink", radius: "xs", size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(Loader, { color: "orange", size: 8 }), children: "Pending..." });
+};
 export {
   Controls
 };

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -14,8 +14,13 @@ const NavigationButtons = () => {
   }));
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
     hasStepBack && /* @__PURE__ */ jsx(
-      m.div,
+      ActionIcon,
       {
+        component: m.button,
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigate("back");
+        },
         layout: true,
         initial: { opacity: 0.05, transform: "translateX(-10px)" },
         animate: { opacity: 1, transform: "translateX(0)" },
@@ -23,22 +28,14 @@ const NavigationButtons = () => {
           opacity: 0.05,
           transform: "translateX(-10px)"
         },
-        children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              diagram.navigate("back");
-            },
-            children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-          }
-        )
+        children: /* @__PURE__ */ jsx(IconChevronLeft, {})
       },
       "back"
     ),
     hasStepForward && /* @__PURE__ */ jsx(
-      m.div,
+      ActionIcon,
       {
+        component: m.button,
         layout: true,
         initial: { opacity: 0.05, transform: "translateX(10px)" },
         animate: { opacity: 1, transform: "translateX(0)" },
@@ -46,16 +43,11 @@ const NavigationButtons = () => {
           opacity: 0,
           transform: "translateX(10px)"
         },
-        children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              diagram.navigate("forward");
-            },
-            children: /* @__PURE__ */ jsx(IconChevronRight, {})
-          }
-        )
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigate("forward");
+        },
+        children: /* @__PURE__ */ jsx(IconChevronRight, {})
       },
       "forward"
     )

package/dist/likec4diagram/ui/controls/_shared.js

@@ -1,4 +1,4 @@
-import { ActionIcon as ActionIcon$1, Tooltip as Tooltip$1 } from "@mantine/core";
+import { Tooltip as Tooltip$1, ActionIcon as ActionIcon$1 } from "@mantine/core";
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.d.ts

@@ -1,4 +1,3 @@
-export declare const container: string;
 export declare const card: string;
 export declare const title: string;
 export declare const description: string;

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.js

@@ -1,11 +1,9 @@
 /* empty css                                     */
-var container = "_1wkb4qe0";
-var card = "_1wkb4qe1";
-var title = "_1wkb4qe2";
-var description = "_1wkb4qe3";
+var card = "_1wkb4qe0";
+var title = "_1wkb4qe1";
+var description = "_1wkb4qe2";
 export {
   card,
-  container,
   description,
   title
 };

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { Link } from "../../../components/Link.js";
 import { useDiagramContext } from "../../../hooks/useDiagram.js";
-import { card, title, description, container } from "./DiagramTitlePanel.css.js";
+import { card, title, description } from "./DiagramTitlePanel.css.js";
 function DiagramTitlePanel() {
   const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext((s) => ({
     id: s.view.id,
@@ -29,14 +29,13 @@ function DiagramTitlePanel() {
         opacity: 0.05,
         scale: 0.6
       },
-      className: clsx("react-flow__panel", container),
+      className: clsx("react-flow__panel", "left", "bottom"),
       style: {
         transformOrigin: "left center"
       },
       children: /* @__PURE__ */ jsxs(
         Card,
         {
-          radius: "sm",
           className: card,
           withBorder: !isCollapsed,
           p: isCollapsed ? "sm" : "md",
@@ -115,8 +114,8 @@ function DiagramTitlePanel() {
                 Spoiler,
                 {
                   maxHeight: 42,
-                  showLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
-                  hideLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
+                  showLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
+                  hideLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
                   children: /* @__PURE__ */ jsx(
                     Text,
                     {
@@ -151,8 +150,7 @@ function DiagramTitlePanel() {
           ]
         }
       )
-    },
-    id
+    }
   ) });
 }
 export {

package/dist/likec4diagram/ui/notation/NotationPanel.css.d.ts

@@ -1,4 +1,5 @@
 export declare const container: string;
+export declare const icon: string;
 export declare const card: string;
 export declare const tabPanel: string;
 export declare const elementNotation: string;

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -1,13 +1,15 @@
 /* empty css                                 */
 var container = "r9c4gg0";
-var card = "r9c4gg1";
-var tabPanel = "r9c4gg2";
-var elementNotation = "r9c4gg3";
-var shapeBadge = "r9c4gg5";
+var icon = "r9c4gg1";
+var card = "r9c4gg2";
+var tabPanel = "r9c4gg3";
+var elementNotation = "r9c4gg4";
+var shapeBadge = "r9c4gg6";
 export {
   card,
   container,
   elementNotation,
+  icon,
   shapeBadge,
   tabPanel
 };

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -9,7 +9,7 @@ import { memo, useState } from "react";
 import { ceil, isNonNullish } from "remeda";
 import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
 import { useXYStore } from "../../../hooks/useXYFlow.js";
-import { container, card, tabPanel, elementNotation, shapeBadge } from "./NotationPanel.css.js";
+import { container, icon, card, tabPanel, elementNotation, shapeBadge } from "./NotationPanel.css.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
 import { vars } from "../../../theme-vars.css.js";
@@ -166,7 +166,7 @@ const NotationPanel = memo(() => {
             size: "lg",
             variant: "default",
             color: "gray",
-            radius: "md",
+            className: icon,
             onClick: () => setCollapsed(false),
             children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
           }

package/dist/likec4diagram/ui/search/SearchInput.js

@@ -25,7 +25,7 @@ function LikeC4SearchInput() {
   const search = useSearch();
   const previous = usePreviousDistinct(search);
   const isFirstRender = useIsFirstRender();
-  const [isEmptyForSomeTime] = useDebouncedValue(search === "" && !isFirstRender, isString(previous) ? 400 : 1e3);
+  const [isEmptyForSomeTime] = useDebouncedValue(search === "" && !isFirstRender, isString(previous) ? 500 : 2e3);
   useWindowEvent(
     "keydown",
     (event) => {

package/dist/likec4diagram/ui/search/ViewsColum.js

@@ -7,10 +7,9 @@ import { m } from "framer-motion";
 import { first } from "remeda";
 import { useCurrentViewId } from "../../../hooks/useCurrentViewId.js";
 import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
-import { emptyBoX } from "./_shared.css.js";
 import { useNormalizedSearch, useCloseSearchAndNavigateTo } from "./state.js";
 import { moveFocusToSearchInput, centerY } from "./utils.js";
-import { viewTitle, viewDescription, focusable, viewButton } from "./ViewsColumn.css.js";
+import { emptyBoX, viewTitle, viewDescription, focusable, viewButton } from "./ViewsColumn.css.js";
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 function ViewsColumn() {
   const search = useNormalizedSearch();

package/dist/likec4diagram/ui/search/ViewsColumn.css.d.ts

@@ -1,4 +1,4 @@
-export { focusable } from './_shared.css';
+export { emptyBoX, focusable } from './_shared.css';
 export declare const viewButton: string;
 export declare const viewTitle: string;
 export declare const viewDescription: string;

package/dist/likec4diagram/ui/search/ViewsColumn.css.js

@@ -1,10 +1,12 @@
 /* empty css                           */
 /* empty css                               */
+var emptyBoX = "_1cfw8gr7";
 var focusable = "_1cfw8gr4";
 var viewButton = "ia79t50 _1cfw8gr3";
 var viewTitle = "ia79t51 _1cfw8gr5";
 var viewDescription = "ia79t52 _1cfw8gr6";
 export {
+  emptyBoX,
   focusable,
   viewButton,
   viewDescription,

package/dist/likec4model/useLikeC4Model.js

@@ -1,4 +1,3 @@
-import "@likec4/core";
 import { useContext } from "react";
 import { isString, isNonNullish, isDefined } from "remeda";
 import { LikeC4ModelContext } from "./LikeC4ModelContext.js";

package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/overlays/element-details/ElementDetailsCard.css.d.ts

@@ -1,4 +1,6 @@
 export declare const cardBg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const backdropBlur: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const backdropOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const dialog: string;
 export declare const card: string;
 export declare const cardHeader: string;

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

@@ -1,19 +1,23 @@
 /* empty css                                      */
-var dialog = "paikoy2";
-var card = "paikoy3";
-var cardHeader = "paikoy4";
-var title = "paikoy5";
-var elementIcon = "paikoy6";
-var viewButton = "paikoy9";
-var viewButtonTitle = "paikoya";
-var tabsRoot = "paikoyb";
-var tabsList = "paikoyc";
-var tabsTab = "paikoyd";
-var tabsPanel = "paikoye";
-var propertiesGrid = "paikoyf";
-var propertyLabel = "paikoyg";
-var resizeHandle = "paikoyh";
+var backdropBlur = "var(--paikoy2)";
+var backdropOpacity = "var(--paikoy3)";
+var dialog = "paikoy4";
+var card = "paikoy5";
+var cardHeader = "paikoy6";
+var title = "paikoy7";
+var elementIcon = "paikoy8";
+var viewButton = "paikoyb";
+var viewButtonTitle = "paikoyc";
+var tabsRoot = "paikoyd";
+var tabsList = "paikoye";
+var tabsTab = "paikoyf";
+var tabsPanel = "paikoyg";
+var propertiesGrid = "paikoyh";
+var propertyLabel = "paikoyi";
+var resizeHandle = "paikoyj";
 export {
+  backdropBlur,
+  backdropOpacity,
   card,
   cardHeader,
   dialog,

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

@@ -1,22 +1,27 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { isScopedElementView, isDeploymentView } from "@likec4/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 { 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 { useViewportSize, useSessionStorage } from "@mantine/hooks";
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
 import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
+import clsx from "clsx";
 import { useDragControls, useMotionValue, m } from "framer-motion";
 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 { getVarName } from "../../utils/css.js";
+import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, dialog, propertyLabel, viewButton, viewButtonTitle, backdropOpacity as backdropOpacity$1, backdropBlur as backdropBlur$1 } from "./ElementDetailsCard.css.js";
 import { TabPanelDeployments } from "./TabPanelDeployments.js";
 import { TabPanelRelationships } from "./TabPanelRelationships.js";
 import { TabPanelStructure } from "./TabPanelStructure.js";
 import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { IconRenderer } from "../../context/IconRenderer.js";
+import { stopPropagation } from "../../utils/xyflow.js";
 import { IfEnabled, DiagramFeatures } from "../../context/DiagramFeatures.js";
+const backdropBlur = getVarName(backdropBlur$1);
+const backdropOpacity = getVarName(backdropOpacity$1);
 const Divider = Divider$1.withProps({
   mb: 8,
   labelPosition: "left",
@@ -144,44 +149,46 @@ function ElementDetailsCard({
     if (!((_a2 = ref.current) == null ? void 0 : _a2.open)) {
       (_b2 = ref.current) == null ? void 0 : _b2.showModal();
     }
-  }, 30);
+  }, 20);
   useTimeoutEffect(() => {
     setOpened(true);
-  }, 120);
+  }, 150);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref,
-      className: dialog,
+      className: clsx(dialog, RemoveScroll.classNames.fullWidth),
       layout: true,
       layoutRoot: true,
       initial: {
-        "--backdrop-blur": "0px",
-        "--backdrop-opacity": "10%"
+        [backdropBlur]: "0px",
+        [backdropOpacity]: "10%"
       },
       animate: {
-        "--backdrop-blur": "3px",
-        "--backdrop-opacity": "60%"
+        [backdropBlur]: "3px",
+        [backdropOpacity]: "60%"
       },
       exit: {
-        "--backdrop-blur": "0px",
-        "--backdrop-opacity": "0%",
+        [backdropBlur]: "0px",
+        [backdropOpacity]: "0%",
         transition: {
           duration: 0.1
         }
       },
       onClick: (e) => {
         var _a2, _b2, _c2;
+        e.stopPropagation();
         if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
-          e.stopPropagation();
           (_c2 = ref.current) == null ? void 0 : _c2.close();
         }
       },
+      onDoubleClick: stopPropagation,
+      onPointerDown: stopPropagation,
       onClose: (e) => {
         e.stopPropagation();
         close();
       },
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsxs(
         Card,
         {
           drag: true,
@@ -401,7 +408,7 @@ function ElementDetailsCard({
             )
           ]
         }
-      )
+      ) })
     }
   );
 }