@likec4/diagram 1.26.2 → 1.27.0

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

@@ -1,7 +1,8 @@
-import "@likec4/core";
-import "@xyflow/system";
-import { setup, assign, sendTo, stopChild, spawnChild } from "xstate";
-import { relationshipsBrowserLogic } from "../relationships-browser/actor.js";
+import '@likec4/core';
+import '@xyflow/system';
+import { setup, assign, sendTo, stopChild, spawnChild } from 'xstate';
+import { relationshipsBrowserLogic } from '../relationships-browser/actor.js';
+
 const elementDetailsLogic = setup({
   types: {
     context: {},
@@ -14,16 +15,13 @@ const elementDetailsLogic = setup({
   }
 }).createMachine({
   id: "element-details",
-  context: ({ input }) => {
-    var _a, _b;
-    return {
-      ...input,
-      initiatedFrom: {
-        node: ((_a = input.initiatedFrom) == null ? void 0 : _a.node) ?? null,
-        clientRect: ((_b = input.initiatedFrom) == null ? void 0 : _b.clientRect) ?? null
-      }
-    };
-  },
+  context: ({ input }) => ({
+    ...input,
+    initiatedFrom: {
+      node: input.initiatedFrom?.node ?? null,
+      clientRect: input.initiatedFrom?.clientRect ?? null
+    }
+  }),
   initial: "active",
   states: {
     "active": {
@@ -31,8 +29,10 @@ const elementDetailsLogic = setup({
         id: ({ self }) => `${self.id}-relationships`,
         input: ({ context }) => ({
           subject: context.subject,
-          scope: context.currentView,
-          enableNavigationMenu: false,
+          viewId: context.currentView.id,
+          scope: "view",
+          enableSelectSubject: false,
+          enableChangeScope: true,
           closeable: false
         })
       }),
@@ -63,6 +63,5 @@ const elementDetailsLogic = setup({
   //   xynodes: [],
   // }),
 });
-export {
-  elementDetailsLogic
-};
+
+export { elementDetailsLogic };

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

@@ -1,4 +1,5 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext } from 'react';
+
 const ElementDetailsActorContext = createContext(null);
 ElementDetailsActorContext.displayName = "ElementDetailsActorContext";
 const useElementDetailsActorRef = () => {
@@ -8,7 +9,5 @@ const useElementDetailsActorRef = () => {
   }
   return ctx;
 };
-export {
-  ElementDetailsActorContext,
-  useElementDetailsActorRef
-};
+
+export { ElementDetailsActorContext, useElementDetailsActorRef };

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

@@ -1,4 +1,4 @@
-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 backdropBlur = "--_blur";
+export declare const backdropOpacity = "--_opacity";
 export declare const dialog: string;
 export declare const body: string;

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

@@ -1,98 +1,57 @@
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Paper/Paper.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Popover/Popover.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Loader/Loader.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/CloseButton/CloseButton.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Group/Group.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Input/Input.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Flex/Flex.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/FloatingIndicator/FloatingIndicator.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Accordion/Accordion.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Affix/Affix.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Alert/Alert.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Text/Text.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Anchor/Anchor.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/AppShell/AppShell.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Combobox/Combobox.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/InlineInput/InlineInput.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Checkbox/CheckboxCard/CheckboxCard.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Checkbox/Checkbox.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Avatar/Avatar.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/BackgroundImage/BackgroundImage.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Badge/Badge.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Blockquote/Blockquote.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Breadcrumbs/Breadcrumbs.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Burger/Burger.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Button/Button.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Card/Card.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Center/Center.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Chip/Chip.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Code/Code.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ColorSwatch/ColorSwatch.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ColorPicker/ColorPicker.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ColorInput/ColorInput.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Container/Container.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Dialog/Dialog.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Divider/Divider.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Drawer/Drawer.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Fieldset/Fieldset.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Grid/Grid.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Mark/Mark.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Image/Image.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Indicator/Indicator.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Kbd/Kbd.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/List/List.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/LoadingOverlay/LoadingOverlay.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Menu/Menu.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Modal/Modal.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Pill/Pill.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/PillsInput/PillsInput.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/NavLink/NavLink.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Notification/Notification.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/NumberInput/NumberInput.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Pagination/Pagination.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/PasswordInput/PasswordInput.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/PinInput/PinInput.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Progress/Progress.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Radio/RadioCard/RadioCard.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Radio/RadioIndicator/RadioIndicator.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Radio/Radio.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Rating/Rating.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/RingProgress/RingProgress.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/SegmentedControl/SegmentedControl.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/SemiCircleProgress/SemiCircleProgress.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/SimpleGrid/SimpleGrid.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Skeleton/Skeleton.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Slider/Slider.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Spoiler/Spoiler.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Stack/Stack.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Stepper/Stepper.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Switch/Switch.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Table/Table.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/TableOfContents/TableOfContents.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Tabs/Tabs.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Title/Title.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Tree/Tree.module.css.mjs.vanilla.css.js";
-import "../../node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/TypographyStylesProvider/TypographyStylesProvider.module.css.mjs.vanilla.css.js";
-/* empty css                           */
-var backdropBlur = "var(--_1njqisf0)";
-var backdropOpacity = "var(--_1njqisf1)";
-var dialog = "_1njqisf4";
-var body = "_1njqisf5";
-export {
-  backdropBlur,
-  backdropOpacity,
-  body,
-  dialog
-};
+import { css } from '@likec4/styles/css';
+
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const borderRadius = "8px";
+const dialog = css({
+  boxSizing: "border-box",
+  margin: 0,
+  position: "fixed",
+  inset: "3rem",
+  width: "auto",
+  height: "auto",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+  background: `mantine.colors.defaultBorder/50`,
+  shadow: "xl",
+  border: "transparent",
+  outline: "none",
+  borderRadius,
+  padding: "6px",
+  [backdropBlur]: "0px",
+  [backdropOpacity]: "0%",
+  _backdrop: {
+    cursor: "zoom-out",
+    backdropFilter: `blur(var(${backdropBlur}))`,
+    backgroundColor: {
+      _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+      _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`
+    }
+  },
+  mdDown: {
+    borderRadius: "sm",
+    inset: "2rem",
+    width: "calc(100vw - 4rem)",
+    height: "calc(100vh - 4rem)"
+  },
+  smDown: {
+    border: "none",
+    inset: 0,
+    padding: 0,
+    width: "100vw",
+    height: "100vh"
+  }
+});
+const body = css({
+  position: "relative",
+  containerName: "overlay-dialog",
+  containerType: "size",
+  border: `0 solid transparent`,
+  borderRadius: `calc(${borderRadius} - 2px)`,
+  background: "mantine.colors.body",
+  overflow: "hidden",
+  width: "100%",
+  height: "100%"
+});
+
+export { backdropBlur, backdropOpacity, body, dialog };

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

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

package/dist/overlays/overlay/Overlay.js

@@ -1,96 +1,98 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { RemoveScroll, Box } from "@mantine/core";
-import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { useState, useRef, useLayoutEffect } from "react";
-import { getVarName } from "../../utils/css.js";
-import { body, dialog, backdropBlur as backdropBlur$1, backdropOpacity as backdropOpacity$1 } from "./Overlay.css.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-const backdropBlur = getVarName(backdropBlur$1);
-const backdropOpacity = getVarName(backdropOpacity$1);
-function Overlay({ children, onClose, className, classes, ...rest }) {
-  const [opened, setOpened] = useState(false);
-  const dialogRef = useRef(null);
-  const isClosingRef = useRef(false);
-  const onCloseRef = useSyncedRef(onClose);
-  const close = useDebouncedCallback(
-    () => {
-      if (isClosingRef.current) return;
-      isClosingRef.current = true;
-      onCloseRef.current();
-    },
-    [],
-    50
-  );
-  useLayoutEffect(() => {
-    var _a;
-    const cancel = (e) => {
-      e.preventDefault();
-      close();
-    };
-    (_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: dialogRef,
-      className: clsx(dialog, classes == null ? void 0 : classes.dialog, className, RemoveScroll.classNames.fullWidth),
-      initial: {
-        [backdropBlur]: "0px",
-        [backdropOpacity]: "5%",
-        opacity: 0.85,
-        translateY: 12
-        // opacity: 02.8,
+import { jsx, Fragment } from 'react/jsx-runtime';
+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 { m } from 'framer-motion';
+import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
+import { body, backdropOpacity, backdropBlur, dialog } from './Overlay.css.js';
+import { stopPropagation } from '../../utils/xyflow.js';
+
+const Overlay = forwardRef(
+  ({ children, onClose, className, classes, ...rest }, ref) => {
+    const [opened, setOpened] = useState(false);
+    const dialogRef = useRef(null);
+    const isClosingRef = useRef(false);
+    const onCloseRef = useSyncedRef(onClose);
+    const close = useDebouncedCallback(
+      () => {
+        if (isClosingRef.current) return;
+        isClosingRef.current = true;
+        onCloseRef.current();
       },
-      animate: {
-        [backdropBlur]: "6px",
-        // [backdropOpacity]: '60%',
-        translateY: 0,
-        opacity: 1
-        // transition: {
-        //   delay: 0.25,
-        // }
-      },
-      exit: {
-        opacity: 0,
-        translateY: -10,
-        [backdropBlur]: "0px",
-        [backdropOpacity]: "0%",
-        transition: {
-          duration: 0.1
-        }
-      },
-      onClick: (e) => {
-        var _a, _b, _c;
-        e.stopPropagation();
-        if (((_b = (_a = e.target) == null ? void 0 : _a.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
-          (_c = dialogRef.current) == null ? void 0 : _c.close();
-          return;
-        }
-      },
-      onDoubleClick: stopPropagation,
-      onPointerDown: stopPropagation,
-      onClose: (e) => {
-        e.stopPropagation();
+      [],
+      50
+    );
+    useLayoutEffect(() => {
+      const cancel = (e) => {
+        e.preventDefault();
         close();
-      },
-      ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx(Box, { className: clsx(body, classes == null ? void 0 : classes.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
-    }
-  );
-}
-export {
-  Overlay
-};
+      };
+      dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
+      return () => {
+        dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
+      };
+    }, []);
+    useTimeoutEffect(() => {
+      if (!dialogRef.current?.open) {
+        dialogRef.current?.showModal();
+      }
+    }, 10);
+    useTimeoutEffect(() => {
+      setOpened(true);
+    }, 120);
+    return /* @__PURE__ */ jsx(
+      m.dialog,
+      {
+        ref: useMergedRef(dialogRef, ref),
+        className: cx(RemoveScroll.classNames.fullWidth, dialog, classes?.dialog, className),
+        initial: {
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%",
+          scale: 1.075,
+          opacity: 0.2
+          // originY: 0.45,
+          // translateY: '-10px',
+        },
+        animate: {
+          [backdropBlur]: "8px",
+          [backdropOpacity]: "60%",
+          scale: 1,
+          opacity: 1,
+          // translateY: '0px',
+          transition: {
+            delay: 0.06
+            // duration: 0.2,
+          }
+        },
+        exit: {
+          scale: 1.3,
+          opacity: 0,
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%"
+          // transition: {
+          //   duration: 0.2,
+          // },
+        },
+        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(body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      }
+    );
+  }
+);
+Overlay.displayName = "Overlay";
+
+export { Overlay };

package/dist/overlays/overlaysActor.d.ts

@@ -40,8 +40,8 @@ export type OverlayActorEmitedEvent = {
 };
 export declare const overlaysActorLogic: StateMachine<OverlaysContext, OverlayActorEvent, {
     [x: `elementDetails-${number}`]: ActorRefFromLogic<ElementDetailsLogic> | undefined;
-    [x: `relationshipDetails-${number}`]: ActorRefFromLogic<Overlays.RelationshipDetails.Logic> | undefined;
     [x: `relationshipsBrowser-${number}`]: ActorRefFromLogic<Overlays.RelationshipsBrowser.Logic> | undefined;
+    [x: `relationshipDetails-${number}`]: ActorRefFromLogic<Overlays.RelationshipDetails.Logic> | undefined;
     hotkey?: ActorRefFromLogic<CallbackActorLogic<EventObject, NonReducibleUnknown, EventObject>>;
 }, Values<{
     elementDetails: {
@@ -49,16 +49,16 @@ export declare const overlaysActorLogic: StateMachine<OverlaysContext, OverlayAc
         logic: ElementDetailsLogic;
         id: `elementDetails-${number}`;
     };
-    relationshipDetails: {
-        src: "relationshipDetails";
-        logic: Overlays.RelationshipDetails.Logic;
-        id: `relationshipDetails-${number}`;
-    };
     relationshipsBrowser: {
         src: "relationshipsBrowser";
         logic: Overlays.RelationshipsBrowser.Logic;
         id: `relationshipsBrowser-${number}`;
     };
+    relationshipDetails: {
+        src: "relationshipDetails";
+        logic: Overlays.RelationshipDetails.Logic;
+        id: `relationshipDetails-${number}`;
+    };
     hotkey: {
         src: "hotkey";
         logic: CallbackActorLogic<EventObject, NonReducibleUnknown, EventObject>;

package/dist/overlays/overlaysActor.js

@@ -1,9 +1,10 @@
-import { getHotkeyHandler } from "@mantine/hooks";
-import { last, isString, reverse } from "remeda";
-import { setup, stopChild, spawnChild, enqueueActions, fromCallback, assertEvent } from "xstate";
-import { elementDetailsLogic } from "./element-details/actor.js";
-import { relationshipDetailsLogic } from "./relationship-details/actor.js";
-import { relationshipsBrowserLogic } from "./relationships-browser/actor.js";
+import { getHotkeyHandler } from '@mantine/hooks';
+import { last, isString, reverse } from 'remeda';
+import { setup, stopChild, spawnChild, enqueueActions, fromCallback, assertEvent } from 'xstate';
+import { elementDetailsLogic } from './element-details/actor.js';
+import { relationshipDetailsLogic } from './relationship-details/actor.js';
+import { relationshipsBrowserLogic } from './relationships-browser/actor.js';
+
 const hotkeyLogic = fromCallback(({ sendBack }) => {
   const handler = getHotkeyHandler([
     ["Escape", () => sendBack({ type: "close" }), {
@@ -30,11 +31,10 @@ const overlaysActorLogic = setup({
   },
   actions: {
     "closeLastOverlay": enqueueActions(({ context, enqueue }) => {
-      var _a;
       if (context.overlays.length === 0) {
         return;
       }
-      const lastOverlay = (_a = last(context.overlays)) == null ? void 0 : _a.id;
+      const lastOverlay = last(context.overlays)?.id;
       if (!lastOverlay) {
         return;
       }
@@ -45,8 +45,7 @@ const overlaysActorLogic = setup({
       });
     }),
     "closeSpecificOverlay": enqueueActions(({ context, enqueue }, params) => {
-      var _a;
-      const toClose = (_a = context.overlays.find((o) => o.id === params.actorId)) == null ? void 0 : _a.id;
+      const toClose = context.overlays.find((o) => o.id === params.actorId)?.id;
       if (toClose) {
         enqueue.sendTo(toClose, { type: "close" });
         enqueue.stopChild(toClose);
@@ -87,7 +86,7 @@ const overlaysActorLogic = setup({
     "openRelationshipDetails": enqueueActions(({ context, enqueue, event }) => {
       assertEvent(event, "open.relationshipDetails");
       const currentOverlay = last(context.overlays);
-      if ((currentOverlay == null ? void 0 : currentOverlay.type) === "relationshipDetails") {
+      if (currentOverlay?.type === "relationshipDetails") {
         enqueue.sendTo(currentOverlay.id, {
           type: "navigate.to",
           edgeId: event.edgeId
@@ -113,10 +112,11 @@ const overlaysActorLogic = setup({
     "openRelationshipsBrowser": enqueueActions(({ context, enqueue, event }) => {
       assertEvent(event, "open.relationshipsBrowser");
       const currentOverlay = last(context.overlays);
-      if ((currentOverlay == null ? void 0 : currentOverlay.type) === "relationshipsBrowser") {
+      if (currentOverlay?.type === "relationshipsBrowser") {
         enqueue.sendTo(currentOverlay.id, {
           type: "navigate.to",
-          subject: event.subject
+          subject: event.subject,
+          viewId: event.viewId
         });
         return;
       }
@@ -150,11 +150,11 @@ const overlaysActorLogic = setup({
     },
     "last: is relationshipDetails?": ({ context }) => {
       const lastOverlay = last(context.overlays);
-      return (lastOverlay == null ? void 0 : lastOverlay.type) === "relationshipDetails";
+      return lastOverlay?.type === "relationshipDetails";
     },
     "last: is relationshipsBrowser?": ({ context }) => {
       const lastOverlay = last(context.overlays);
-      return (lastOverlay == null ? void 0 : lastOverlay.type) === "relationshipsBrowser";
+      return lastOverlay?.type === "relationshipsBrowser";
     }
   }
 }).createMachine({
@@ -228,6 +228,5 @@ const overlaysActorLogic = setup({
     "closeAllOverlays"
   ]
 });
-export {
-  overlaysActorLogic
-};
+
+export { overlaysActorLogic };