@likec4/diagram 1.31.0 → 1.32.0

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

@@ -1,5 +1,60 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
+import { SlotRecipeRuntimeFn } 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", SlotRecipeVariantRecord<"body" | "dialog">>;
+export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
+    fullscreen: {
+        false: {
+            dialog: {
+                sm: {
+                    inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]";
+                    width: "calc(100vw - 2 * var(--_inset))";
+                    height: "calc(100vh - var(--_offset) - var(--_inset))";
+                    "--_border-radius": "6px";
+                    padding: "6px";
+                    "--_offset": "1rem";
+                };
+                md: {
+                    "--_offset": "1rem";
+                };
+                lg: {
+                    "--_offset": "2rem";
+                };
+                xl: {
+                    "--_offset": "4rem";
+                };
+            };
+            body: {
+                sm: {
+                    borderRadius: "calc(var(--_border-radius) - 2px)";
+                };
+            };
+        };
+        true: {
+            dialog: {
+                inset: number;
+                padding: number;
+            };
+        };
+    };
+    withBackdrop: {
+        false: {
+            dialog: {
+                _backdrop: {
+                    display: "none";
+                };
+            };
+        };
+        true: {
+            dialog: {
+                _backdrop: {
+                    backdropFilter: "blur(var(--_blur))";
+                    backgroundColor: {
+                        _dark: "[rgb(34 34 34 / var(--_opacity))]";
+                        _light: "[rgb(15 15 15/ var(--_opacity))]";
+                    };
+                };
+            };
+        };
+    };
+}>;

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

@@ -10,8 +10,8 @@ const dialog = css.raw({
   boxSizing: "border-box",
   margin: 0,
   position: "fixed",
-  width: "auto",
-  height: "auto",
+  width: "100vw",
+  height: "100vh",
   maxWidth: "100vw",
   maxHeight: "100vh",
   background: `mantine.colors.defaultBorder/50`,
@@ -24,60 +24,97 @@ const dialog = css.raw({
   [offset]: "0px",
   [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
   [backdropOpacity]: "0%",
+  [borderRadius]: "0px",
   _backdrop: {
-    cursor: "zoom-out",
-    backdropFilter: `blur(var(${backdropBlur}))`,
-    backgroundColor: {
-      _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-      _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`
-    }
-  },
-  smDown: {
-    [borderRadius]: "0px",
-    border: "none",
-    inset: 0,
-    padding: 0,
-    // [offset]: '0px',
-    // [inset]: '0px',
-    width: "100vw",
-    height: "100vh"
-  },
-  sm: {
-    inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
-    width: "calc(100vw - 2 * var(--_inset))",
-    height: "calc(100vh - var(--_offset) - var(--_inset))",
-    [borderRadius]: "6px",
-    padding: "6px",
-    [offset]: "1rem"
-  },
-  md: {
-    [offset]: "1rem"
-  },
-  lg: {
-    [offset]: "2rem"
+    cursor: "zoom-out"
   },
-  xl: {
-    [offset]: "4rem"
-  }
+  inset: 0,
+  padding: 0
 });
 const body = css.raw({
   position: "relative",
   containerName: "overlay-dialog",
   containerType: "size",
   border: `0 solid transparent`,
-  background: "mantine.colors.body",
   overflow: "hidden",
   width: "100%",
   height: "100%",
-  sm: {
-    borderRadius: `calc(var(${borderRadius}) - 2px)`
-  }
+  background: "mantine.colors.body"
 });
 const overlay = sva({
   slots: ["dialog", "body"],
   base: {
     dialog,
     body
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        dialog: {
+          sm: {
+            inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+            width: "calc(100vw - 2 * var(--_inset))",
+            height: "calc(100vh - var(--_offset) - var(--_inset))",
+            [borderRadius]: "6px",
+            padding: "6px",
+            [offset]: "1rem"
+          },
+          md: {
+            [offset]: "1rem"
+          },
+          lg: {
+            [offset]: "2rem"
+          },
+          xl: {
+            [offset]: "4rem"
+          }
+        },
+        body: {
+          sm: {
+            borderRadius: `calc(var(${borderRadius}) - 2px)`
+          }
+        }
+      },
+      true: {
+        dialog: {
+          inset: 0,
+          padding: 0
+        }
+      }
+    },
+    // transparent: {
+    //   false: {
+    //   },
+    //   true: {
+    //     dialog: {
+    //       background: 'transparent',
+    //     },
+    //   },
+    // },
+    withBackdrop: {
+      false: {
+        dialog: {
+          _backdrop: {
+            display: "none"
+          }
+        }
+      },
+      true: {
+        dialog: {
+          _backdrop: {
+            backdropFilter: `blur(var(${backdropBlur}))`,
+            backgroundColor: {
+              _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+              _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`
+            }
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    fullscreen: false,
+    withBackdrop: true
   }
 });
 

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

@@ -1,21 +1,33 @@
 import { PropsWithChildren, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 export type OverlayProps = PropsWithChildren<{
+    fullscreen?: boolean | undefined;
+    withBackdrop?: boolean | undefined;
     overlayLevel?: number;
     className?: string;
     classes?: {
         dialog?: string;
         body?: string;
     };
+    backdrop?: {
+        opacity?: number;
+    };
+    openDelay?: number;
     onClose: () => void;
     onClick?: never;
 }>;
 export declare const Overlay: ForwardRefExoticComponent<{
+    fullscreen?: boolean | undefined;
+    withBackdrop?: boolean | undefined;
     overlayLevel?: number;
     className?: string;
     classes?: {
         dialog?: string;
         body?: string;
     };
+    backdrop?: {
+        opacity?: number;
+    };
+    openDelay?: number;
     onClose: () => void;
     onClick?: never;
 } & {

package/dist/overlays/overlay/Overlay.js

@@ -2,9 +2,9 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { RemoveScroll } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
-import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
+import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useReducedMotionConfig, m } from 'motion/react';
-import { forwardRef, useState, useRef, useEffect } from 'react';
+import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
 import { overlay, backdropOpacity, backdropBlur, level } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
@@ -14,13 +14,18 @@ const Overlay = forwardRef(({
   classes,
   overlayLevel = 0,
   children,
+  fullscreen = false,
+  withBackdrop = true,
+  backdrop,
+  openDelay = 130,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = useState(false);
+  const [opened, setOpened] = useState(openDelay === 0);
   const dialogRef = useRef(null);
   const isClosingRef = useRef(false);
   const motionNotReduced = useReducedMotionConfig() !== true;
-  const onCloseRef = useSyncedRef(onClose);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
   const close = useDebouncedCallback(
     () => {
       if (isClosingRef.current) return;
@@ -30,33 +35,27 @@ const Overlay = forwardRef(({
     [],
     50
   );
-  useEffect(() => {
-    const cancel = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      close();
-    };
-    dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
-    return () => {
-      dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
-    };
-  }, []);
-  useTimeoutEffect(() => {
+  useLayoutEffect(() => {
     if (!dialogRef.current?.open) {
       dialogRef.current?.showModal();
     }
-  }, 30);
+  }, []);
   useTimeoutEffect(() => {
     setOpened(true);
-  }, 120);
+  }, openDelay > 0 ? openDelay : void 0);
   const styles = overlay({
-    level: overlayLevel
+    fullscreen,
+    withBackdrop
   });
+  let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
+  if (backdrop?.opacity !== void 0) {
+    targetBackdropOpacity = `${backdrop.opacity * 100}%`;
+  }
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref: useMergedRef(dialogRef, ref),
-      className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
+      className: cx(RemoveScroll.classNames.fullWidth, classes?.dialog, className, styles.dialog),
       layout: true,
       style: {
         // @ts-ignore
@@ -66,28 +65,35 @@ const Overlay = forwardRef(({
         initial: {
           [backdropBlur]: "0px",
           [backdropOpacity]: "0%",
-          scale: overlayLevel > 0 ? 0.9 : 1.075,
+          scale: 0.95,
+          originY: 0,
+          translateY: -20,
           opacity: 0
         },
         animate: {
           [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-          [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
+          [backdropOpacity]: targetBackdropOpacity,
           scale: 1,
           opacity: 1,
+          translateY: 0,
           transition: {
             delay: 0.075
           }
         },
         exit: {
-          scale: 1.2,
           opacity: 0,
+          scale: 0.98,
+          translateY: -20,
+          transition: {
+            duration: 0.1
+          },
           [backdropBlur]: "0px",
           [backdropOpacity]: "0%"
         }
       } : {
         initial: {
           [backdropBlur]: "8px",
-          [backdropOpacity]: "60%"
+          [backdropOpacity]: targetBackdropOpacity
         }
       },
       onClick: (e) => {
@@ -97,6 +103,11 @@ const Overlay = forwardRef(({
           return;
         }
       },
+      onCancel: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      },
       onDoubleClick: stopPropagation,
       onPointerDown: stopPropagation,
       onClose: (e) => {
@@ -104,7 +115,7 @@ const Overlay = forwardRef(({
         close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx("div", { className: cx(styles.body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx("div", { className: cx(classes?.body, styles.body, "overlay-body"), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
     }
   );
 });

package/dist/overlays/overlaysActor.d.ts

@@ -1,4 +1,4 @@
-import { Fqn } from '@likec4/core';
+import { Fqn } from '@likec4/core/types';
 import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, ActorRefFromLogic, CallbackActorLogic, EventObject, NonReducibleUnknown, Values, MetaObject } from 'xstate';
 import { Overlays } from './types';
 import { ElementDetailsLogic } from './element-details/actor';

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

@@ -1,6 +1,7 @@
 import { RelationshipDetailsActorRef } from './actor';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
+import { EdgeData, Dimmed } from '../../base/types.Base';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: FunctionComponent<{
@@ -30,10 +31,10 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: import("../../base").Base.EdgeData & {
+        data: EdgeData & {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
+            dimmed?: Dimmed;
             relationId: RelationId;
             color: Color | undefined;
             label: string | null;

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

@@ -46,7 +46,7 @@ const selectSubject = (state) => ({
 const SyncRelationshipDetailsXYFlow = memo(() => {
   const actor = useRelationshipDetailsActor();
   const subject = useSelector(actor, selectSubject, deepEqual);
-  const likec4model = useLikeC4Model(true);
+  const likec4model = useLikeC4Model();
   const view = likec4model.findView(subject.viewId) ?? null;
   const data = useMemo(() => {
     let data2;
@@ -170,14 +170,14 @@ const topLeftPanelselector = ({ context }) => ({
 });
 const TopLeftPanel = memo(() => {
   const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual);
-  const likec4model = useLikeC4Model(true);
+  const likec4model = useLikeC4Model();
   const view = likec4model.findView(viewId);
   if (!view || !view.isDiagram()) {
     return null;
   }
   const edges = [...view.edges()];
   let edge = "edgeId" in subject && isTruthy(subject.edgeId) ? edges.find((e) => e.id === subject.edgeId) : find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) || find(edges, (e) => {
-    return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "--", subject.source ?? "__")) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "", subject.target ?? "__"));
+    return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "__", subject.source ?? "__")) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "__", subject.target ?? "__"));
   });
   if (!edge) {
     return null;

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

@@ -1,4 +1,4 @@
-import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
+import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types';
 import { Simplify } from 'type-fest';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipDetailsTypes {
@@ -10,7 +10,7 @@ export declare namespace RelationshipDetailsTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style'>> & {
+    type ElementNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style' | 'tags'>> & {
         column: Column;
         fqn: Fqn;
         icon: IconUrl;

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

@@ -7,7 +7,7 @@ import { MinZoom } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';
 import { layoutResultToXYFlow } from './layout-to-xyflow.js';
-import { Base } from '../../base/types.js';
+import { setDimmed, setHovered, setData } from '../../base/types.Base.js';
 
 function inputToSubject(input) {
   if ("edgeId" in input) {
@@ -161,12 +161,12 @@ const relationshipDetailsLogic = setup({
                 );
                 return context.xyedges.map((edge) => {
                   if (edge.id === event.edge.id) {
-                    return Base.setData(edge, {
+                    return setData(edge, {
                       hovered: true,
                       dimmed: false
                     });
                   }
-                  return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                  return hasDimmed && !edge.selected ? setDimmed(edge, "immediate") : edge;
                 });
               }
             }),
@@ -180,7 +180,7 @@ const relationshipDetailsLogic = setup({
             assign({
               xyedges: ({ context, event }) => context.xyedges.map((edge) => {
                 if (edge.id === event.edge.id) {
-                  return Base.setHovered(edge, false);
+                  return setHovered(edge, false);
                 }
                 return edge;
               })
@@ -191,7 +191,7 @@ const relationshipDetailsLogic = setup({
         },
         "dim.nonhovered.edges": {
           actions: assign({
-            xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true))
+            xyedges: ({ context }) => context.xyedges.map((edge) => setDimmed(edge, edge.data.hovered !== true))
           })
         },
         "undim.edges": {
@@ -200,10 +200,10 @@ const relationshipDetailsLogic = setup({
               const hasSelected = context.xyedges.some((edge) => edge.selected === true);
               if (hasSelected) {
                 return context.xyedges.map(
-                  (edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
+                  (edge) => setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
                 );
               }
-              return context.xyedges.map(Base.setDimmed(false));
+              return context.xyedges.map(setDimmed(false));
             }
           })
         },

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

@@ -1,5 +1,6 @@
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
+import { EdgeData, Dimmed } from '../../../base/types.Base';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const RelationshipEdge: FunctionComponent<{
     id: string;
@@ -28,10 +29,10 @@ export declare const RelationshipEdge: FunctionComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: import("../../../base").Base.EdgeData & {
+    data: EdgeData & {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
+        dimmed?: Dimmed;
         relationId: RelationId;
         color: Color | undefined;
         label: string | null;

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

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ElementActions } from './ElementActions.js';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { customNode } from '../../../base/primitives/customNode.js';
 import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
@@ -9,6 +10,7 @@ import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.j
 import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { ElementTags } from '../../../base/primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
 
 const ElementDetailsButtonWithHandler = (props) => {
@@ -25,9 +27,11 @@ const ElementDetailsButtonWithHandler = (props) => {
   );
 };
 const ElementNode = customNode((props) => {
+  const { enableElementTags } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

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

@@ -3,6 +3,7 @@ import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from
 import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { Dimmed } from '../../base/types.Base';
 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;
@@ -50,7 +51,7 @@ export declare function useRelationshipDetails(): {
             data: {
                 hovered?: boolean;
                 active?: boolean;
-                dimmed?: import("../../base").Base.Dimmed;
+                dimmed?: Dimmed;
                 relationId: RelationId;
                 color: Color | undefined;
                 label: string | null;
@@ -93,7 +94,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -133,7 +134,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -172,7 +173,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -211,7 +212,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -250,7 +251,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -289,7 +290,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -329,7 +330,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -368,7 +369,7 @@ export declare function useRelationshipDetails(): {
                 data: {
                     hovered?: boolean;
                     active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;

package/dist/overlays/relationship-details/layout-to-xyflow.js

@@ -93,6 +93,7 @@ function layoutResultToXYFlow(layout) {
               icon: node.icon ?? "none",
               ports: node.ports,
               style: node.style,
+              tags: node.tags,
               ...navigateTo
             }
           }

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

@@ -236,11 +236,13 @@ function layoutRelationshipDetails(data, scope) {
     return {
       id,
       parent: parentId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,