@likec4/diagram 1.27.3 → 1.28.0

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

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

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

@@ -59,22 +59,6 @@ const dialog = css.raw({
   xl: {
     [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.raw({
   position: "relative",
@@ -94,30 +78,6 @@ const overlay = sva({
   base: {
     dialog,
     body
-  },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: "0"
-        }
-      },
-      1: {
-        dialog: {
-          [level]: "1"
-        }
-      },
-      2: {
-        dialog: {
-          [level]: "2"
-        }
-      },
-      3: {
-        dialog: {
-          [level]: "3"
-        }
-      }
-    }
   }
 });
 

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

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 export declare const Overlay: ForwardRefExoticComponent<{
-    overlayLevel?: 0 | 1 | 2 | 3;
+    overlayLevel?: number;
     className?: string;
     classes?: {
         dialog?: string;

package/dist/overlays/overlay/Overlay.js

@@ -4,100 +4,109 @@ import { RemoveScroll, Box } from '@mantine/core';
 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 { overlay, backdropOpacity, backdropBlur } from './Overlay.css.js';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { overlay, backdropOpacity, backdropBlur, level } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
-const Overlay = forwardRef(
-  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
-    const [opened, setOpened] = useState(false);
-    const dialogRef = useRef(null);
-    const isClosingRef = useRef(false);
-    const motionNotReduced = useReducedMotionConfig() !== true;
-    const onCloseRef = useSyncedRef(onClose);
-    const close = useDebouncedCallback(
-      () => {
-        if (isClosingRef.current) return;
-        isClosingRef.current = true;
-        onCloseRef.current();
+const Overlay = forwardRef(({
+  onClose,
+  className,
+  classes,
+  overlayLevel = 0,
+  children,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(false);
+  const dialogRef = useRef(null);
+  const isClosingRef = useRef(false);
+  const motionNotReduced = useReducedMotionConfig() !== true;
+  const onCloseRef = useSyncedRef(onClose);
+  const close = useDebouncedCallback(
+    () => {
+      if (isClosingRef.current) return;
+      isClosingRef.current = true;
+      onCloseRef.current();
+    },
+    [],
+    50
+  );
+  useEffect(() => {
+    const cancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
+    return () => {
+      dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
+    };
+  }, []);
+  useTimeoutEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal();
+    }
+  }, 30);
+  useTimeoutEffect(() => {
+    setOpened(true);
+  }, 120);
+  const styles = overlay({
+    level: overlayLevel
+  });
+  return /* @__PURE__ */ jsx(
+    m.dialog,
+    {
+      ref: useMergedRef(dialogRef, ref),
+      className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
+      layout: true,
+      style: {
+        // @ts-ignore
+        [level]: overlayLevel
       },
-      [],
-      50
-    );
-    useLayoutEffect(() => {
-      const cancel = (e) => {
-        e.preventDefault();
-        close();
-      };
-      dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
-      return () => {
-        dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
-      };
-    }, []);
-    useTimeoutEffect(() => {
-      if (!dialogRef.current?.open) {
-        dialogRef.current?.showModal();
-      }
-    }, 20);
-    useTimeoutEffect(() => {
-      setOpened(true);
-    }, 120);
-    const styles = overlay({
-      level: overlayLevel
-    });
-    return /* @__PURE__ */ jsx(
-      m.dialog,
-      {
-        ref: useMergedRef(dialogRef, ref),
-        className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
-        layout: true,
-        ...motionNotReduced ? {
-          initial: {
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%",
-            scale: overlayLevel > 0 ? 0.9 : 1.075,
-            opacity: 0
-          },
-          animate: {
-            [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-            [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
-            scale: 1,
-            opacity: 1,
-            transition: {
-              delay: 0.075
-            }
-          },
-          exit: {
-            scale: 1.2,
-            opacity: 0,
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%"
-          }
-        } : {
-          initial: {
-            [backdropBlur]: "8px",
-            [backdropOpacity]: "60%"
-          }
+      ...motionNotReduced ? {
+        initial: {
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%",
+          scale: overlayLevel > 0 ? 0.9 : 1.075,
+          opacity: 0
         },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
-            dialogRef.current?.close();
-            return;
+        animate: {
+          [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+          [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
+          scale: 1,
+          opacity: 1,
+          transition: {
+            delay: 0.075
           }
         },
-        onDoubleClick: stopPropagation,
-        onPointerDown: stopPropagation,
-        onClose: (e) => {
-          e.stopPropagation();
-          close();
-        },
-        ...rest,
-        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 }) }) })
-      }
-    );
-  }
-);
+        exit: {
+          scale: 1.2,
+          opacity: 0,
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%"
+        }
+      } : {
+        initial: {
+          [backdropBlur]: "8px",
+          [backdropOpacity]: "60%"
+        }
+      },
+      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(styles.body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+    }
+  );
+});
 Overlay.displayName = "Overlay";
 
 export { Overlay };

package/dist/overlays/overlaysActor.js

@@ -7,7 +7,10 @@ import { relationshipsBrowserLogic } from './relationships-browser/actor.js';
 
 const hotkeyLogic = fromCallback(({ sendBack }) => {
   const handler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "close" }), {
+    ["Escape", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "close" });
+    }, {
       preventDefault: true
     }]
   ]);

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

@@ -1,6 +1,6 @@
 import { RelationshipDetailsActorRef } from './actor';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
+import { Position } from '@xyflow/react';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{

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

@@ -1,10 +1,9 @@
 import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType } from '@xyflow/react';
 import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
 import { Base } from '../../base';
 import { RelationshipDetailsTypes } from './_types';
 import { LayoutResult } from './layout';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
 type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>>;

package/dist/overlays/relationship-details/custom/edgeTypes.d.ts

@@ -1,5 +1,5 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
+import { Position } from '@xyflow/react';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const RelationshipEdge: NamedExoticComponent<{
     id: string;

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -27,7 +27,7 @@ const ElementDetailsButtonWithHandler = (props) => {
 const ElementNode = customNode((props) => {
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

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

@@ -1,8 +1,7 @@
 import { EdgeId, Fqn, ViewId, RelationId, Color, RelationshipLineType, BBox } from '@likec4/core';
 import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from './actor';
 import { Context, ReactNode, CSSProperties } from 'react';
-import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { GeneralHelpers, EdgeMarkerType, HandleType, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
 export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
 export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
@@ -57,7 +56,7 @@ export declare function useRelationshipDetails(): {
                 active?: boolean;
                 dimmed?: import("../../base").Base.Dimmed;
             };
-        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+        }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
         }) | null;
         xystore: {

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

@@ -1,6 +1,6 @@
 import { RelationshipsBrowserActorRef } from './actor';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
+import { Position } from '@xyflow/react';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{

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

@@ -1,10 +1,9 @@
 import { BBox, Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, PromiseActorLogic, EventObject, StateMachine, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction, DoneActorEvent } from 'xstate';
 import { Base } from '../../base';
 import { RelationshipsBrowserTypes } from './_types';
 import { LayoutRelationshipsViewResult } from './layout';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
 export type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>>;
@@ -1140,7 +1139,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     active?: boolean;
                                     dimmed?: Base.Dimmed;
                                 };
-                            }> & Omit< ViewportHelperFunctions, "initialized"> & {
+                            }> & ViewportHelperFunctions & {
                                 viewportInitialized: boolean;
                             };
                             xystore: {

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -1,5 +1,5 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
+import { Position } from '@xyflow/react';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const RelationshipEdge: NamedExoticComponent<{
     id: string;

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

@@ -29,7 +29,7 @@ const ElementDetailsButtonWithHandler = (props) => {
 const ElementNode = customNode((props) => {
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

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

@@ -2,8 +2,7 @@ import { Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } f
 import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, XYStoreApi, Events } from './actor';
 import { LayoutRelationshipsViewResult } from './layout';
 import { Context, ReactNode, CSSProperties } from 'react';
-import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { GeneralHelpers, EdgeMarkerType, HandleType, ViewportHelperFunctions } from '@xyflow/react';
 export declare const RelationshipsBrowserActorContext: Context<RelationshipsBrowserActorRef | null>;
 export declare function useRelationshipsBrowserActor(): RelationshipsBrowserActorRef;
 export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipsBrowserSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
@@ -57,7 +56,7 @@ export declare function useRelationshipsBrowser(): {
                 active?: boolean;
                 dimmed?: import("../../base").Base.Dimmed;
             };
-        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+        }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
         }) | null;
         xystore: XYStoreApi | null;

package/dist/state/diagram-machine.d.ts

@@ -1,6 +1,6 @@
 import { BBox, DiagramView, EdgeId, ElementNotation, Fqn, NodeId, StepEdgeId, ViewChange, ViewId, XYPoint, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType } from '@likec4/core';
-import { ReactFlowInstance, useStoreApi } from '@xyflow/react';
-import { EdgeChange, NodeChange, Rect, Viewport, EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
+import { ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType } from '@xyflow/react';
+import { EdgeChange, NodeChange, Rect, Viewport, XYPosition } from '@xyflow/system';
 import { ActorLogicFrom, ActorRef, AnyEventObject, Snapshot, StateMachine, ActorRefFromLogic, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, CallbackActorLogic, Values, RequiredActorOptions, GetConcreteByKey, CancelAction, StopAction } from 'xstate';
 import { Base } from '../base/types';
 import { EnabledFeatures, FeatureName } from '../context/DiagramFeatures';

package/dist/state/hotkeyActor.js

@@ -3,15 +3,24 @@ import { fromCallback } from 'xstate';
 
 const hotkeyActorLogic = fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "key.esc" }), {
+    ["Escape", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.esc" });
+    }, {
       preventDefault: true
     }]
   ]);
   const arrowshandler = getHotkeyHandler([
-    ["ArrowLeft", () => sendBack({ type: "key.arrow.left" }), {
+    ["ArrowLeft", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.left" });
+    }, {
       preventDefault: true
     }],
-    ["ArrowRight", () => sendBack({ type: "key.arrow.right" }), {
+    ["ArrowRight", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.right" });
+    }, {
       preventDefault: true
     }]
   ]);