@likec4/diagram 1.26.1 → 1.27.0

package/dist/bundle/styles.css.js

@@ -0,0 +1,145 @@
+import { css } from '@likec4/styles/css';
+import { createTheme, Portal } from '@mantine/core';
+import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback } from '@mantine/hooks';
+import { useIsomorphicLayoutEffect } from '@react-hookz/web';
+import { useState, useId } from 'react';
+import { first, isString, isFunction } from 'remeda';
+import inlinedStyles from '../styles.css.js';
+import fontsCss from './font.css.js';
+
+const DefaultTheme = createTheme({
+  autoContrast: true,
+  primaryColor: "indigo",
+  cursorType: "pointer",
+  defaultRadius: "sm",
+  fontFamily: "var(--fonts-likec4)",
+  headings: {
+    fontWeight: "500",
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: "600"
+      },
+      h2: {
+        fontWeight: "500"
+        // fontSize: '1.85rem',
+      }
+    }
+  },
+  components: {
+    Portal: Portal.extend({
+      defaultProps: {
+        reuseTargetNode: true
+      }
+    })
+  }
+});
+const cssInteractive = css({
+  cursor: "pointer",
+  ["--mantine-cursor-pointer"]: "pointer",
+  "& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": {
+    cursor: "pointer"
+  }
+});
+function useBundledStyleSheet(injectFontCss, styleNonce) {
+  const [styleSheets, setStyleSheets] = useState([]);
+  useIsomorphicLayoutEffect(() => {
+    if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
+      const style = document.createElement("style");
+      style.setAttribute("type", "text/css");
+      style.setAttribute("data-likec4-font", "");
+      if (isString(styleNonce)) {
+        style.setAttribute("nonce", styleNonce);
+      }
+      if (isFunction(styleNonce)) {
+        style.setAttribute("nonce", styleNonce());
+      }
+      style.appendChild(document.createTextNode(fontsCss));
+      document.head.appendChild(style);
+    }
+  }, [injectFontCss]);
+  useIsomorphicLayoutEffect(() => {
+    const css2 = new CSSStyleSheet();
+    css2.replaceSync(
+      inlinedStyles.replaceAll(":where(:root, :host)", `.likec4-shadow-root`).replaceAll(":where(:host, :root)", `.likec4-shadow-root`).replaceAll(":root", `.likec4-shadow-root`).replaceAll("body {", `.likec4-shadow-root{`).replaceAll("body{", `.likec4-shadow-root{`)
+    );
+    setStyleSheets([css2]);
+    return () => {
+      css2.replaceSync("");
+    };
+  }, [inlinedStyles]);
+  return styleSheets;
+}
+const getComputedColorScheme = () => {
+  try {
+    const htmlScheme = window.getComputedStyle(document.documentElement).colorScheme ?? "";
+    const colorScheme = first(htmlScheme.split(" "));
+    if (colorScheme === "light" || colorScheme === "dark") {
+      return colorScheme;
+    }
+  } catch (_e) {
+  }
+  return null;
+};
+function useColorScheme(explicit) {
+  const preferred = useColorScheme$1();
+  const [computed, setComputed] = useState(getComputedColorScheme);
+  useMutationObserver(
+    useDebouncedCallback(() => setComputed(getComputedColorScheme), 100),
+    {
+      attributes: true,
+      childList: false,
+      subtree: false
+    },
+    () => document.documentElement
+  );
+  return explicit ?? computed ?? preferred;
+}
+function useShadowRootStyle(keepAspectRatio, view) {
+  const id = useId();
+  if (keepAspectRatio === false) {
+    return [
+      { "data-likec4-instance": id },
+      `
+:where([data-likec4-instance="${id}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  min-width: 80px;
+  min-height: 80px;
+}
+  `.trim()
+    ];
+  }
+  const isLandscape = view.bounds.width > view.bounds.height;
+  return [
+    { "data-likec4-instance": id },
+    `
+:where([data-likec4-instance="${id}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  overflow: hidden;
+  ${isLandscape ? "" : `
+  max-width: var(--likec4-view-max-width, ${Math.ceil(view.bounds.width)}px);
+  margin-left: auto;
+  margin-right: auto;`}
+  width: ${isLandscape ? "100%" : "auto"};
+  height: ${isLandscape ? "auto" : "100%"};
+  ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
+  aspect-ratio: ${Math.ceil(view.bounds.width)} / ${Math.ceil(view.bounds.height)};
+  max-height: var(--likec4-view-max-height, ${Math.ceil(view.bounds.height)}px);
+}
+`.trim()
+  ];
+}
+
+export { DefaultTheme, cssInteractive, useBundledStyleSheet, useColorScheme, useShadowRootStyle };

package/dist/components/Link.js

@@ -1,8 +1,54 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CopyButton, Anchor, ActionIcon, Box, Text } from "@mantine/core";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
-import { elementLink, linkIcon, linkTitleBox } from "./Link.css.js";
-import { stopPropagation } from "../utils/xyflow.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx, css, cva } from '@likec4/styles/css';
+import { CopyButton, Anchor, ActionIcon, Box, Text } from '@mantine/core';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { stopPropagation } from '../utils/xyflow.js';
+
+const link = cva({
+  base: {
+    display: "flex",
+    overflow: "hidden",
+    alignItems: "center",
+    gap: "micro",
+    justifyContent: "stretch",
+    transitionProperty: "all",
+    transitionDuration: "fast",
+    transitionTimingFunction: "inOut",
+    border: `1px dashed {colors.mantine.colors.defaultBorder}`,
+    rounded: "sm",
+    cursor: "pointer",
+    color: "mantine.colors.gray[7]",
+    _dark: {
+      color: "mantine.colors.dark[1]"
+    },
+    _hover: {
+      transitionTimingFunction: "out",
+      color: "mantine.colors.defaultColor",
+      background: "mantine.colors.defaultHover"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        minHeight: "22px",
+        padding: "2px 8px 2px 2px"
+      },
+      md: {
+        minHeight: "30px",
+        padding: "3px 16px 3px 3px"
+      }
+    }
+  }
+});
+const titleBox = css({
+  flex: "1 1 100%",
+  transition: `transform 100ms {easings.inOut}`,
+  _groupHover: {
+    transitionTimingFunction: "out",
+    transitionDelay: "50ms",
+    transform: "translateX(1px)"
+  }
+});
 function Link({
   value,
   size = "md"
@@ -15,14 +61,18 @@ function Link({
       href: url,
       target: "_blank",
       underline: "never",
-      className: elementLink,
-      "data-size": size,
+      className: cx(
+        "group",
+        link({ size })
+      ),
       onClick: stopPropagation,
       children: [
         /* @__PURE__ */ jsx(
           ActionIcon,
           {
-            className: linkIcon,
+            className: css({
+              flex: "0"
+            }),
             tabIndex: -1,
             size: isNormalSize ? 24 : 20,
             variant: copied ? "light" : "subtle",
@@ -35,7 +85,7 @@ function Link({
             children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { style: { width: "65%", opacity: 0.65 } })
           }
         ),
-        /* @__PURE__ */ jsxs(Box, { className: linkTitleBox, children: [
+        /* @__PURE__ */ jsxs(Box, { className: titleBox, children: [
           /* @__PURE__ */ jsx(
             Text,
             {
@@ -53,6 +103,5 @@ function Link({
     }
   ) });
 }
-export {
-  Link
-};
+
+export { Link };

package/dist/components/SearchControl.css.js

@@ -1,9 +1,72 @@
-/* empty css                                 */
-var root = "xmhqho2";
-var placeholder = "xmhqho3";
-var shortcut = "xmhqho4";
-export {
-  placeholder,
-  root,
-  shortcut
-};
+import { css } from '@likec4/styles/css';
+
+const root = css({
+  height: "30px",
+  paddingLeft: "sm",
+  paddingRight: "4px",
+  borderRadius: "sm",
+  // TODO
+  // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
+  border: "1px solid",
+  borderColor: {
+    base: "mantine.colors.defaultBorder",
+    _light: "mantine.colors.gray[4]",
+    _dark: "mantine.colors.dark[4]",
+    _hover: "mantine.colors.defaultBorder"
+  },
+  cursor: "pointer",
+  background: {
+    base: "mantine.colors.default",
+    _light: "mantine.colors.white",
+    _dark: "mantine.colors.dark[6]",
+    _hover: "mantine.colors.defaultHover"
+  },
+  width: "100%",
+  "& .tabler-icon": {
+    color: "mantine.colors.text"
+  },
+  transition: {
+    base: "fast",
+    _whenPanning: "none !important"
+  },
+  boxShadow: {
+    base: "xs",
+    _hover: "sm",
+    _whenPanning: "none !important"
+  }
+});
+const placeholder = css({
+  fontSize: "sm",
+  // mantine.fontSizes.sm,
+  fontWeight: 500,
+  paddingRight: "50px",
+  color: "mantine.colors.placeholder",
+  flex: "1"
+});
+const shortcut = css({
+  fontSize: "11px",
+  fontWeight: 600,
+  lineHeight: 1,
+  padding: "4px 7px",
+  borderRadius: "sm",
+  border: "1px solid",
+  transition: "fast",
+  _light: {
+    color: "mantine.colors.gray[7]",
+    borderColor: "mantine.colors.gray[2]"
+  },
+  _dark: {
+    color: "mantine.colors.dark[0]",
+    borderColor: "mantine.colors.dark[7]"
+  },
+  backgroundColor: {
+    _light: "mantine.colors.gray[2]/70",
+    _dark: "mantine.colors.dark[8]/70",
+    _groupHover: {
+      _light: "mantine.colors.gray[2]",
+      _dark: "mantine.colors.dark[8]"
+    }
+  }
+});
+
+export { placeholder, root, shortcut };

package/dist/components/SearchControl.js

@@ -1,17 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { UnstyledButton, Group, rem, Text } from "@mantine/core";
-import { IconSearch } from "@tabler/icons-react";
-import { isMacOs } from "@xyflow/system";
-import clsx from "clsx";
-import { placeholder, shortcut, root } from "./SearchControl.css.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { UnstyledButton, Group, Text } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import { isMacOs } from '@xyflow/system';
+import clsx from 'clsx';
+import { placeholder, shortcut, root } from './SearchControl.css.js';
+
 function SearchControl({ className, ...others }) {
   const isMac = isMacOs();
-  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx(root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-    /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(15), height: rem(15) }, stroke: 2 }),
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconSearch, { style: { width: "15px", height: "15px" }, stroke: 2 }),
     /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
     /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
   ] }) });
 }
-export {
-  SearchControl
-};
+
+export { SearchControl };

package/dist/context/ControlsCustomLayout.js

@@ -1,10 +1,9 @@
-import { createOptionalContext } from "@mantine/core";
-import "react";
+import { createOptionalContext } from '@mantine/core';
+import 'react';
+
 const [
   ControlsCustomLayoutProvider,
   useControlsCustomLayout
 ] = createOptionalContext(null);
-export {
-  ControlsCustomLayoutProvider,
-  useControlsCustomLayout
-};
+
+export { ControlsCustomLayoutProvider, useControlsCustomLayout };

package/dist/context/DiagramEventHandlers.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import { useSyncedRef } from "@react-hookz/web";
-import { useMemo, createContext, useContext } from "react";
-import { isFunction, mapToObj } from "remeda";
+import { jsx } from 'react/jsx-runtime';
+import { useSyncedRef } from '@react-hookz/web';
+import { useMemo, createContext, useContext } from 'react';
+import { isFunction, mapToObj } from 'remeda';
+
 const HandlerNames = [
   "onBurgerMenuClick",
   "onNavigateTo",
@@ -30,10 +31,7 @@ function DiagramEventHandlers({
   const value = useMemo(() => ({
     ...mapToObj(HandlerNames, (name) => {
       if (handlersRef.current[name]) {
-        return [name, (...args) => {
-          var _a, _b;
-          return (_b = (_a = handlersRef.current)[name]) == null ? void 0 : _b.call(_a, ...args);
-        }];
+        return [name, (...args) => handlersRef.current[name]?.(...args)];
       }
       return [name, null];
     }),
@@ -47,8 +45,5 @@ function useDiagramEventHandlers() {
 function useDiagramEventHandlersRef() {
   return useContext(DiagramEventHandlersContext).handlersRef;
 }
-export {
-  DiagramEventHandlers,
-  useDiagramEventHandlers,
-  useDiagramEventHandlersRef
-};
+
+export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };

package/dist/context/DiagramFeatures.js

@@ -1,7 +1,8 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { shallowEqual } from "fast-equals";
-import { useContext, createContext, useState, useEffect } from "react";
-import { mapToObj, pick, map } from "remeda";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { shallowEqual } from 'fast-equals';
+import { useContext, createContext, useState, useEffect } from 'react';
+import { mapToObj, pick, map } from 'remeda';
+
 const FeatureNames = [
   "Controls",
   "ReadOnly",
@@ -118,11 +119,5 @@ function IfNotEnabled({
   const notEnabled = useEnabledFeature(feature)[`enable${feature}`] !== true;
   return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
-export {
-  AllDisabled,
-  DiagramFeatures,
-  IfEnabled,
-  IfNotEnabled,
-  useEnabledFeature,
-  useEnabledFeatures
-};
+
+export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeature, useEnabledFeatures };

package/dist/context/EnsureMantine.js

@@ -1,6 +1,7 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { MantineContext } from "@mantine/core";
-import { useContext } from "react";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { MantineContext } from '@mantine/core';
+import { useContext } from 'react';
+
 function EnsureMantine({ children }) {
   const mantineCtx = useContext(MantineContext);
   if (!mantineCtx) {
@@ -9,6 +10,5 @@ function EnsureMantine({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 EnsureMantine.displayName = "EnsureMantine";
-export {
-  EnsureMantine
-};
+
+export { EnsureMantine };

package/dist/context/FramerMotionConfig.js

@@ -1,15 +1,14 @@
-import { jsx } from "react/jsx-runtime";
-import { useMantineStyleNonce } from "@mantine/core";
-import { LazyMotion, domMax, MotionConfig } from "framer-motion";
-import "react";
+import { jsx } from 'react/jsx-runtime';
+import { useMantineStyleNonce } from '@mantine/core';
+import { LazyMotion, domMax, MotionConfig } from 'framer-motion';
+import 'react';
+
 const FramerMotionConfig = ({
   reducedMotion = "user",
   children
 }) => {
-  var _a;
-  const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
+  const nonce = useMantineStyleNonce()?.();
   return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, ...nonce && { nonce }, children }) });
 };
-export {
-  FramerMotionConfig
-};
+
+export { FramerMotionConfig };

package/dist/context/IconRenderer.js

@@ -1,7 +1,8 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from "@tabler/icons-react";
-import clsx from "clsx";
-import { useContext, createContext } from "react";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from '@tabler/icons-react';
+import clsx from 'clsx';
+import { useContext, createContext } from 'react';
+
 const IconRendererContext = createContext(null);
 function IconRendererProvider({
   value,
@@ -74,8 +75,5 @@ function IconOrShapeRenderer({
     }
   );
 }
-export {
-  IconOrShapeRenderer,
-  IconRenderer,
-  IconRendererProvider
-};
+
+export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/ReduceGraphics.d.ts

@@ -1,13 +1,12 @@
+import { WritableAtom } from 'nanostores';
 import { PropsWithChildren } from 'react';
 /**
  * Hook to determine if reduced graphics mode is enabled.
  */
 export declare function useIsReducedGraphics(): boolean;
-/**
- * Reduce graphics when reduced mode is enabled and pan/zoom is active.
- */
-export declare function useLooseReducedGraphics(): boolean;
+declare const usePanningAtom: () => WritableAtom<boolean>;
+export { usePanningAtom, };
 export declare function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{
     reduceGraphics: boolean;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function ReduceGraphicsViewportListener(): null;
+export declare function useIsPanning(): boolean;

package/dist/context/ReduceGraphics.js

@@ -1,10 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { createSafeContext, createOptionalContext } from "@mantine/core";
-import { useTimeout } from "@mantine/hooks";
-import { useStore } from "@nanostores/react";
-import { useStoreApi } from "@xyflow/react";
-import { atom } from "nanostores";
-import { useRef, useMemo, useEffect } from "react";
+import { jsx } from 'react/jsx-runtime';
+import { createSafeContext, createOptionalContext } from '@mantine/core';
+import { useStore } from '@nanostores/react';
+import { atom } from 'nanostores';
+import { useRef } from 'react';
+
 const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext();
 function useIsReducedGraphics() {
   const isReduced = useReducedGraphics();
@@ -16,46 +15,15 @@ function useIsReducedGraphics() {
 const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
   "PanningAtomSafeCtx is not provided"
 );
-const [LooseReduceGraphicsAtomCtx, useLooseReduceGraphicsAtom] = createOptionalContext();
-const $defaultLooseReduceGraphics = atom(false);
-function useLooseReducedGraphics() {
-  const $isPanning = useLooseReduceGraphicsAtom() ?? $defaultLooseReduceGraphics;
-  return useStore($isPanning);
-}
 function ReduceGraphicsContext({ reduceGraphics, children }) {
   const $isPanningRef = useRef(null);
   if (!$isPanningRef.current) {
     $isPanningRef.current = atom(reduceGraphics);
   }
-  const looseReduceGraphics = useMemo(() => {
-    return reduceGraphics ? $isPanningRef.current : atom(false);
-  }, [reduceGraphics, $isPanningRef.current]);
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(LooseReduceGraphicsAtomCtx, { value: looseReduceGraphics, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx, { value: reduceGraphics, children }) }) });
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx, { value: reduceGraphics, children }) });
 }
-function ReduceGraphicsViewportListener() {
-  const store = useStoreApi();
-  const $isPanning = usePanningAtom();
-  const notPanning = useTimeout(() => {
-    $isPanning.set(false);
-  }, 150);
-  useEffect(() => {
-    store.setState({
-      onViewportChangeStart: () => {
-        notPanning.clear();
-      },
-      onViewportChange: () => {
-        $isPanning.set(true);
-      },
-      onViewportChangeEnd: () => {
-        notPanning.start();
-      }
-    });
-  }, [$isPanning, store]);
-  return null;
+function useIsPanning() {
+  return useStore(usePanningAtom());
 }
-export {
-  ReduceGraphicsContext,
-  ReduceGraphicsViewportListener,
-  useIsReducedGraphics,
-  useLooseReducedGraphics
-};
+
+export { ReduceGraphicsContext, useIsPanning, useIsReducedGraphics, usePanningAtom };

package/dist/context/RootContainer.js

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mantine/core";
-import clsx from "clsx";
-import { useRef, createContext, createRef, useContext } from "react";
-import { rootClassName } from "../theme-vars.js";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { useRef, useEffect, createContext, createRef, useContext } from 'react';
+import { usePanningAtom } from './ReduceGraphics.js';
+
 const RootContainerContext = createContext(createRef());
 function RootContainer({
   className,
@@ -10,10 +11,24 @@ function RootContainer({
   children
 }) {
   const ref = useRef(null);
+  const $isPanning = usePanningAtom();
+  useEffect(() => {
+    return $isPanning.listen((isPanning) => {
+      if (isPanning) {
+        ref.current?.setAttribute("data-likec4-diagram-panning", "true");
+      } else {
+        ref.current?.removeAttribute("data-likec4-diagram-panning");
+      }
+    });
+  }, [$isPanning]);
   return /* @__PURE__ */ jsx(
     Box,
     {
-      className: clsx(rootClassName, className),
+      className: cx("likec4-root", className),
+      css: {
+        // '--likec4-background-color': 'mantine.colors.body',
+        // '--colors-likec4-background': 'var(--mantine-color-body)',
+      },
       ref,
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
@@ -25,7 +40,5 @@ function RootContainer({
 function useRootContainer() {
   return useContext(RootContainerContext).current;
 }
-export {
-  RootContainer,
-  useRootContainer
-};
+
+export { RootContainer, useRootContainer };

package/dist/hooks/safeContext.js

@@ -1,15 +1,13 @@
-import "@mantine/core";
-import { createContext, use } from "react";
+import { createContext, useContext } from 'react';
+
 const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 const useDiagramActorRef = () => {
-  const ctx = use(DiagramActorSafeContext);
+  const ctx = useContext(DiagramActorSafeContext);
   if (ctx === null) {
     throw new Error("DiagramActorRef is not provided");
   }
   return ctx;
 };
-export {
-  DiagramActorSafeContext,
-  useDiagramActorRef
-};
+
+export { DiagramActorSafeContext, useDiagramActorRef };