@likec4/diagram 1.30.0 → 1.32.0

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

@@ -1,5 +1,3 @@
-import '@likec4/core';
-import '@xyflow/system';
 import { setup, assign, sendTo, stopChild, spawnChild } from 'xstate';
 import { relationshipsBrowserLogic } from '../relationships-browser/actor.js';
 

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

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../../_virtual/index.js';
+import { createContext, useContext } from 'react';
 
-const ElementDetailsActorContext = reactExports.createContext(null);
+const ElementDetailsActorContext = createContext(null);
 ElementDetailsActorContext.displayName = "ElementDetailsActorContext";
 const useElementDetailsActorRef = () => {
-  const ctx = reactExports.useContext(ElementDetailsActorContext);
+  const ctx = useContext(ElementDetailsActorContext);
   if (ctx === null) {
     throw new Error("ElementDetailsActorRef is not provided");
   }

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,11 +1,33 @@
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+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

@@ -1,26 +1,31 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { RemoveScroll, Box } from '@mantine/core';
+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 { r as reactExports } from '../../_virtual/index.js';
+import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
 import { overlay, backdropOpacity, backdropBlur, level } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
-const Overlay = reactExports.forwardRef(({
+const Overlay = forwardRef(({
   onClose,
   className,
   classes,
   overlayLevel = 0,
   children,
+  fullscreen = false,
+  withBackdrop = true,
+  backdrop,
+  openDelay = 130,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = reactExports.useState(false);
-  const dialogRef = reactExports.useRef(null);
-  const isClosingRef = reactExports.useRef(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 = reactExports.forwardRef(({
     [],
     50
   );
-  reactExports.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 = reactExports.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 = reactExports.forwardRef(({
           return;
         }
       },
+      onCancel: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      },
       onDoubleClick: stopPropagation,
       onPointerDown: stopPropagation,
       onClose: (e) => {
@@ -104,7 +115,7 @@ const Overlay = reactExports.forwardRef(({
         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 }) }) })
+      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';
@@ -38,7 +38,7 @@ export type OverlayActorEmitedEvent = {
 } | {
     type: 'idle';
 };
-export declare const overlaysActorLogic: StateMachine<OverlaysContext, OverlayActorEvent, {
+declare const _overlaysActorLogic: StateMachine<OverlaysContext, OverlayActorEvent, {
     [x: `elementDetails-${number}`]: ActorRefFromLogic<ElementDetailsLogic> | undefined;
     [x: `relationshipsBrowser-${number}`]: ActorRefFromLogic<Overlays.RelationshipsBrowser.Logic> | undefined;
     [x: `relationshipDetails-${number}`]: ActorRefFromLogic<Overlays.RelationshipDetails.Logic> | undefined;
@@ -183,8 +183,10 @@ export declare const overlaysActorLogic: StateMachine<OverlaysContext, OverlayAc
     };
     readonly exit: readonly ["stopListeningToEsc", "closeAllOverlays"];
 }>;
-export interface OverlaysActorLogic extends ActorLogicFrom<typeof overlaysActorLogic> {
+export interface OverlaysActorLogic extends ActorLogicFrom<typeof _overlaysActorLogic> {
 }
+export declare const overlaysActorLogic: OverlaysActorLogic;
 export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>;
 export interface OverlaysActorRef extends ActorRefFrom<OverlaysActorLogic> {
 }
+export {};

package/dist/overlays/overlaysActor.js

@@ -19,7 +19,7 @@ const hotkeyLogic = fromCallback(({ sendBack }) => {
     document.body.removeEventListener("keydown", handler, { capture: true });
   };
 });
-const overlaysActorLogic = setup({
+const _overlaysActorLogic = setup({
   types: {
     context: {},
     events: {},
@@ -231,5 +231,6 @@ const overlaysActorLogic = setup({
     "closeAllOverlays"
   ]
 });
+const overlaysActorLogic = _overlaysActorLogic;
 
 export { overlaysActorLogic };

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

@@ -1,17 +1,18 @@
 import { RelationshipDetailsActorRef } from './actor';
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+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: NamedExoticComponent<{
+    relationship: FunctionComponent<{
         id: string;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         style?: CSSProperties;
+        animated?: boolean;
         source: string;
         target: string;
-        animated?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;
@@ -30,11 +31,10 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: {
+        data: EdgeData & {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
-        } & {
+            dimmed?: Dimmed;
             relationId: RelationId;
             color: Color | undefined;
             label: string | null;
@@ -42,9 +42,6 @@ export declare const edgeTypes: {
             description?: string | undefined | undefined;
             navigateTo: ViewId | null;
             line: RelationshipLineType;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
         };
     }>;
 };

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

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { invariant, nonNullable, isAncestor } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
 import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { ReactFlowProvider, Panel, useStoreApi, useReactFlow } from '@xyflow/react';
-import clsx from 'clsx';
 import { deepEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useRef, memo, useMemo, useEffect } from 'react';
 import { isTruthy, find } from 'remeda';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
@@ -27,7 +27,7 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipDetails({ actorRef }) {
-  const initialRef = reactExports.useRef(null);
+  const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       defaultNodes: [],
@@ -43,12 +43,12 @@ const selectSubject = (state) => ({
   ...state.context.subject,
   viewId: state.context.viewId
 });
-const SyncRelationshipDetailsXYFlow = reactExports.memo(() => {
+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 = reactExports.useMemo(() => {
+  const data = useMemo(() => {
     let data2;
     if ("edgeId" in subject && isTruthy(subject.edgeId)) {
       invariant(view, `view ${subject.viewId} not found`);
@@ -70,12 +70,12 @@ const SyncRelationshipDetailsXYFlow = reactExports.memo(() => {
   ]);
   const store = useStoreApi();
   const instance = useReactFlow();
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (instance.viewportInitialized) {
       actor.send({ type: "xyflow.init", instance, store });
     }
   }, [store, instance.viewportInitialized, actor]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (data !== null) {
       actor.send({ type: "update.layoutData", data });
     }
@@ -89,7 +89,7 @@ const selector = ({ context }) => ({
   nodes: context.xynodes,
   edges: context.xyedges
 });
-const RelationshipDetailsInner = reactExports.memo(() => {
+const RelationshipDetailsInner = memo(() => {
   const browser = useRelationshipDetails();
   const {
     initialized,
@@ -102,7 +102,7 @@ const RelationshipDetailsInner = reactExports.memo(() => {
       id: browser.rootElementId,
       nodes,
       edges,
-      className: clsx(initialized ? "initialized" : "not-initialized"),
+      className: cx(initialized ? "initialized" : "not-initialized"),
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
@@ -168,16 +168,16 @@ const topLeftPanelselector = ({ context }) => ({
   subject: context.subject,
   viewId: context.viewId
 });
-const TopLeftPanel = reactExports.memo(() => {
+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;
@@ -188,12 +188,12 @@ const TopLeftPanelInner = ({ edge, view }) => {
   const browser = useRelationshipDetails();
   const edgeId = edge.id;
   const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historyEdgeId !== edgeId) {
       historyOps.set(edgeId);
     }
   }, [edgeId]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historyEdgeId !== edgeId) {
       browser.navigateTo(historyEdgeId);
     }

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

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
 import { IconArrowRight, IconSelector } from '@tabler/icons-react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
 
@@ -11,7 +10,7 @@ const SelectEdge = ({
   view
 }) => {
   const browser = useRelationshipDetails();
-  const viewport = reactExports.useRef(null);
+  const viewport = useRef(null);
   const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
   const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
   const edges = view.edges.flatMap((edge2) => {

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

@@ -1,4 +1,5 @@
-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 {
     type Column = 'sources' | 'targets';
@@ -9,24 +10,24 @@ 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;
         ports: Ports;
-    }>;
-    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'style'>> & {
+    };
+    type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'color' | 'style'>> & {
         column: Column;
         fqn: Fqn;
         depth: number;
         icon?: IconUrl;
         ports: Ports;
-    }>;
+    };
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
     type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
     type Node = ElementNode | CompoundNode;
     type NodeData = Node['data'];
-    type EdgeData = Base.EdgeData<{
+    type EdgeData = Simplify<Base.EdgeData & {
         relationId: RelationId;
         color: Color | undefined;
         label: string | null;