@likec4/diagram 1.42.1 → 1.44.0

package/dist/node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/guards/dist/xstate-guards.cjs.js

@@ -0,0 +1,26 @@
+import { __exports as xstateGuards_cjs } from '../../../../../../../_virtual/xstate-guards.cjs2.js';
+import { __require as requireRaiseDa5b247f_cjs } from '../../dist/raise-da5b247f.cjs.js';
+import { __require as requireXstateDev_cjs } from '../../dev/dist/xstate-dev.cjs.js';
+
+var hasRequiredXstateGuards_cjs;
+
+function requireXstateGuards_cjs () {
+	if (hasRequiredXstateGuards_cjs) return xstateGuards_cjs;
+	hasRequiredXstateGuards_cjs = 1;
+
+	Object.defineProperty(xstateGuards_cjs, '__esModule', { value: true });
+
+	var guards_dist_xstateGuards = /*@__PURE__*/ requireRaiseDa5b247f_cjs();
+	requireXstateDev_cjs();
+
+
+
+	xstateGuards_cjs.and = guards_dist_xstateGuards.and;
+	xstateGuards_cjs.evaluateGuard = guards_dist_xstateGuards.evaluateGuard;
+	xstateGuards_cjs.not = guards_dist_xstateGuards.not;
+	xstateGuards_cjs.or = guards_dist_xstateGuards.or;
+	xstateGuards_cjs.stateIn = guards_dist_xstateGuards.stateIn;
+	return xstateGuards_cjs;
+}
+
+export { requireXstateGuards_cjs as __require };

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

@@ -1,22 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { ElementDetailsActorContext } from './actorContext.js';
 import { ElementDetailsCard } from './ElementDetailsCard.js';
 
+const selector = (s) => ({
+  viewId: s.context.currentView.id,
+  fromNode: s.context.initiatedFrom.node,
+  rectFromNode: s.context.initiatedFrom.clientRect,
+  fqn: s.context.subject
+});
 function ElementDetails({
   actorRef,
   onClose
 }) {
   const props = useSelector(
     actorRef,
-    useCallbackRef((s) => ({
-      viewId: s.context.currentView.id,
-      fromNode: s.context.initiatedFrom.node,
-      rectFromNode: s.context.initiatedFrom.clientRect,
-      fqn: s.context.subject
-    })),
+    selector,
     shallowEqual
   );
   return /* @__PURE__ */ jsx(ElementDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(

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

@@ -10,20 +10,23 @@ import { pipe, map, partition, only, clamp, isNullish, entries } from 'remeda';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
 import { Link } from '../../components/Link.js';
 import { useCurrentViewModel } from '../../hooks/useCurrentViewModel.js';
-import { useDiagram } from '../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
+import { MetadataProvider, MetadataValue } from './MetadataValue.js';
 import { TabPanelDeployments } from './TabPanelDeployments.js';
 import { TabPanelRelationships } from './TabPanelRelationships.js';
 import { TabPanelStructure } from './TabPanelStructure.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 
 const Divider = Divider$1.withProps({
   mb: 8,
@@ -340,7 +343,7 @@ function ElementDetailsCard({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(
               Tabs,
               {
                 value: activeTab,
@@ -420,7 +423,7 @@ function ElementDetailsCard({
                   /* @__PURE__ */ jsx(TabsPanel, { value: "Deployments", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: elementModel.id }) }) })
                 ]
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               m.div,
               {
@@ -476,97 +479,24 @@ function ElementProperty({
 function ElementMetata({
   value: metadata
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropertyLabel, { children: "metadata" }),
+  const metadataEntries = entries(metadata).sort(([a], [b]) => a.localeCompare(b));
+  return /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PropertyLabel, { style: { justifySelf: "end", textAlign: "right" }, children: "metadata" }),
     /* @__PURE__ */ jsx(
       Box,
       {
         className: css({
-          flex: 1,
           display: "grid",
           gridTemplateColumns: "min-content 1fr",
-          gridAutoRows: "min-content max-content",
-          gap: `[4px 4px]`,
+          gridAutoRows: "min-content",
+          gap: `[12px 16px]`,
           alignItems: "baseline",
-          justifyItems: "stretch",
-          paddingRight: "xxs"
+          justifyItems: "stretch"
         }),
-        children: entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "contents"
-            },
-            className: "group",
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: css({
-                    fontSize: "sm",
-                    fontWeight: 500,
-                    justifySelf: "end",
-                    whiteSpace: "nowrap"
-                  }),
-                  children: [
-                    key,
-                    ":"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: css({}),
-                  children: /* @__PURE__ */ jsx(
-                    ScrollArea.Autosize,
-                    {
-                      type: "auto",
-                      mah: 200,
-                      classNames: {
-                        root: css({
-                          transitionProperty: "all",
-                          transitionDuration: "fast",
-                          transitionTimingFunction: "inOut",
-                          rounded: "sm",
-                          color: "mantine.colors.gray[8]",
-                          _dark: {
-                            color: "mantine.colors.dark[1]"
-                          },
-                          _groupHover: {
-                            transitionTimingFunction: "out",
-                            color: "mantine.colors.defaultColor",
-                            background: "mantine.colors.defaultHover"
-                          }
-                        }),
-                        viewport: css({
-                          overscrollBehavior: "none"
-                        })
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: css({
-                            fontSize: "sm",
-                            padding: "xxs",
-                            whiteSpace: "pre",
-                            fontFamily: "mono",
-                            userSelect: "all"
-                          }),
-                          children: value
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          key
-        ))
+        children: metadataEntries.map(([key, value]) => /* @__PURE__ */ jsx(MetadataValue, { label: key, value }, key))
       }
     )
-  ] });
+  ] }) });
 }
 
 export { ElementDetailsCard };

package/dist/overlays/element-details/MetadataValue.d.ts

@@ -0,0 +1,9 @@
+export declare function MetadataProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+interface MetadataValueProps {
+    label: string;
+    value: string | string[];
+}
+export declare function MetadataValue({ label, value }: MetadataValueProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,261 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { UnstyledButton, Flex, Text, Box, Stack, Tooltip } from '@mantine/core';
+import { useState, useRef, useEffect } from 'react';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+
+function MetadataProvider({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function TruncatedValue({ value, isExpanded }) {
+  const [isTruncated, setIsTruncated] = useState(false);
+  const textRef = useRef(null);
+  useEffect(() => {
+    if (textRef.current) {
+      setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      label: isTruncated && !isExpanded ? value : null,
+      multiline: true,
+      w: 300,
+      withinPortal: true,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          ref: textRef,
+          component: "div",
+          className: css({
+            fontSize: "sm",
+            padding: "xs",
+            userSelect: "all",
+            color: "mantine.colors.text",
+            lineHeight: 1.4,
+            whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
+            overflow: isExpanded ? "visible" : "hidden",
+            textOverflow: isExpanded ? "unset" : "ellipsis",
+            wordBreak: isExpanded ? "break-word" : "normal",
+            minWidth: 0,
+            width: "100%"
+          }),
+          children: value
+        }
+      )
+    }
+  );
+}
+function MultiValueDisplay({
+  values,
+  isExpanded,
+  onToggle
+}) {
+  if (isExpanded) {
+    return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: css({
+            fontSize: "xs",
+            color: "mantine.colors.gray[5]",
+            fontWeight: 500,
+            flexShrink: 0,
+            _dark: {
+              color: "mantine.colors.dark[3]"
+            }
+          }),
+          children: "•"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: css({
+            minHeight: "32px",
+            display: "flex",
+            alignItems: "center",
+            flex: 1
+          }),
+          children: /* @__PURE__ */ jsx(TruncatedValue, { value, isExpanded: true })
+        }
+      )
+    ] }, index)) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: css({
+        minHeight: "32px",
+        display: "flex",
+        alignItems: "center",
+        padding: "xs",
+        gap: "xs",
+        flexWrap: "wrap",
+        minWidth: 0,
+        // Allow shrinking
+        overflow: "hidden"
+        // Prevent overflow
+      }),
+      children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: css({
+              fontSize: "sm",
+              padding: "[4px 8px]",
+              backgroundColor: "mantine.colors.white",
+              color: "mantine.colors.text",
+              borderRadius: "sm",
+              border: "1px solid",
+              borderColor: "mantine.colors.gray[3]",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: "min(200px, 100%)",
+              minWidth: "60px",
+              flex: "0 1 auto",
+              userSelect: "all",
+              _dark: {
+                backgroundColor: "mantine.colors.dark[9]",
+                color: "mantine.colors.text",
+                borderColor: "mantine.colors.dark[4]"
+              }
+            }),
+            title: value,
+            children: value
+          }
+        ),
+        index < values.length - 1 && /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: css({
+              fontSize: "xs",
+              color: "mantine.colors.gray[5]",
+              fontWeight: 500,
+              flexShrink: 0,
+              _dark: {
+                color: "mantine.colors.dark[3]"
+              }
+            }),
+            children: "•"
+          }
+        )
+      ] }, index))
+    }
+  );
+}
+function MetadataValue({ label, value }) {
+  const elements = Array.isArray(value) ? value : typeof value === "string" && value.includes("\n") ? value.split("\n").map((s) => s.trim()).filter(Boolean) : [value];
+  const hasMultipleElements = elements.length > 1;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMultipleElements ? /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        onClick: handleToggle,
+        className: css({
+          fontSize: "xs",
+          color: "mantine.colors.dimmed",
+          justifySelf: "end",
+          textAlign: "right",
+          userSelect: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: "xs",
+          padding: "[4px 8px]",
+          borderRadius: "sm",
+          whiteSpace: "nowrap",
+          transition: "all 150ms ease",
+          _hover: {
+            backgroundColor: "mantine.colors.gray[1]",
+            color: "mantine.colors.primary[6]",
+            _dark: {
+              backgroundColor: "mantine.colors.dark[7]",
+              color: "mantine.colors.primary[4]"
+            }
+          }
+        }),
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Text, { component: "span", size: "xs", fw: 700, children: [
+            label,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "span",
+              className: css({
+                fontSize: "xs",
+                fontWeight: 500,
+                color: "mantine.colors.gray[6]",
+                backgroundColor: "mantine.colors.gray[1]",
+                padding: "[1px 4px]",
+                borderRadius: "xs",
+                _dark: {
+                  color: "mantine.colors.dark[2]",
+                  backgroundColor: "mantine.colors.dark[6]"
+                }
+              }),
+              children: elements.length
+            }
+          ),
+          isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 12 })
+        ] })
+      }
+    ) : /* @__PURE__ */ jsxs(
+      Text,
+      {
+        component: "div",
+        className: css({
+          fontSize: "xs",
+          color: "mantine.colors.dimmed",
+          justifySelf: "end",
+          textAlign: "right",
+          userSelect: "none",
+          whiteSpace: "nowrap",
+          padding: "[4px 8px]",
+          fontWeight: 700
+        }),
+        children: [
+          label,
+          ":"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: css({
+          justifySelf: "stretch",
+          alignSelf: "start"
+        }),
+        children: hasMultipleElements ? /* @__PURE__ */ jsx(
+          MultiValueDisplay,
+          {
+            values: elements,
+            isExpanded,
+            onToggle: handleToggle
+          }
+        ) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: css({
+              minHeight: "32px",
+              display: "flex",
+              alignItems: "center"
+            }),
+            children: /* @__PURE__ */ jsx(TruncatedValue, { value: elements[0] || "", isExpanded })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { MetadataProvider, MetadataValue };

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

@@ -1,13 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from '@mantine/core';
 import { memo, useMemo, useEffect } from 'react';
-import { useDiagram } from '../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const DeploymentNodeRenderer = ({
   node

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

@@ -7,9 +7,9 @@ import { useOverlaysActorRef } from '../../hooks/useOverlaysActor.js';
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
 import { useElementDetailsActorRef } from './actorContext.js';
 import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
 import { useMemo, useEffect } from 'react';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 const ElementLabel = ({
   element

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

@@ -1,6 +1,6 @@
 import { DiagramView, Fqn, NodeId } from '@likec4/core/types';
 import { Rect } from '@xyflow/system';
-import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, StopAction } from 'xstate';
+import { ActorRefFromLogic, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, StopAction } from 'xstate';
 import { RelationshipsBrowserLogic } from '../relationships-browser/actor';
 export type Input = {
     subject: Fqn;
@@ -100,7 +100,8 @@ declare const _elementDetailsLogic: StateMachine<Context, Events, {
         };
     };
 }>;
-export interface ElementDetailsLogic extends ActorLogicFrom<typeof _elementDetailsLogic> {
+type InferredMachine = typeof _elementDetailsLogic;
+export interface ElementDetailsLogic extends InferredMachine {
 }
 export declare const elementDetailsLogic: ElementDetailsLogic;
 export interface ElementDetailsActorRef extends ActorRefFromLogic<ElementDetailsLogic> {