@likec4/diagram 1.47.0 → 1.49.0

package/dist/base-primitives/element/ElementTags.js

@@ -5,13 +5,12 @@ import { Box, HStack } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { likec4tag } from '@likec4/styles/recipes';
 import { useHover, useDebouncedState } from '@mantine/hooks';
-import { NodeToolbar, Position } from '@xyflow/react';
+import { useStore, NodeToolbar, Position } from '@xyflow/react';
 import { deepEqual } from 'fast-equals';
 import { forwardRef, memo, useEffect, useCallback } from 'react';
+import { hasAtLeast } from 'remeda';
 import { useTagSpecification } from '../../context/TagStylesContext.js';
-import '@xstate/react';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { useCurrentZoom } from '../../hooks/useXYFlow.js';
+import { useCurrentZoomAtLeast } from '../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
 const ElementTag = forwardRef(
@@ -42,9 +41,38 @@ const ElementTag = forwardRef(
   }
 );
 const propsAreEqual = (prev, next) => {
-  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags) && (prev.data.hovered ?? false) === (next.data.hovered ?? false);
+  return prev.id === next.id && prev.data.width === next.data.width && (prev.data.hovered ?? false) === (next.data.hovered ?? false) && deepEqual(prev.data.tags, next.data.tags);
 };
-const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
+const ElementTags = memo(
+  ({ id, data: { tags, width, hovered = false }, onTagClick, onTagMouseEnter, onTagMouseLeave }) => {
+    if (!tags || !hasAtLeast(tags, 1)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      WithElementTags,
+      {
+        id,
+        tags,
+        width,
+        hovered,
+        onTagClick,
+        onTagMouseEnter,
+        onTagMouseLeave
+      }
+    );
+  },
+  propsAreEqual
+);
+ElementTags.displayName = "ElementTags";
+function WithElementTags({
+  id,
+  tags,
+  width,
+  hovered,
+  onTagClick,
+  onTagMouseEnter,
+  onTagMouseLeave
+}) {
   const {
     hovered: isTagsBarHovered,
     ref: tagsBarRef
@@ -62,19 +90,13 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
       return hovered || isTagsBarHovered || isTagsToolbarHovered;
     });
   }, [isTagsBarHovered, isTagsToolbarHovered, hovered]);
-  const zoom = useCurrentZoom();
-  const zoomIsLargeEnough = zoom > 1.2;
-  const diagram = useDiagram();
-  const onHover = (tag) => {
-    diagram.send({ type: "tag.highlight", tag });
-  };
-  const onLeave = useCallback(() => {
-    diagram.send({ type: "tag.unhighlight" });
-  }, []);
-  if (!tags || tags.length === 0) {
-    return null;
-  }
-  const maxWidth = Math.max(Math.round(width * zoom) - 10, 200);
+  const zoomIsLargeEnough = useCurrentZoomAtLeast(1.2);
+  const maxWidth = useStore(
+    useCallback(
+      (state) => Math.max(Math.round(width * state.transform[2]) - 10, 200),
+      [Math.round(width)]
+    )
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -115,11 +137,11 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              maxWidth: 50,
-              height: 5,
+              maxWidth: "50px",
+              height: "5px",
               _whenHovered: {
-                height: 12,
-                borderRadius: 4,
+                height: "12px",
+                borderRadius: "sm",
                 transitionDelay: ".08s"
               },
               transition: "fast"
@@ -139,7 +161,9 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
           flexWrap: "wrap",
           pb: "sm",
           translate: "auto",
-          x: "[-8px]",
+          x: "[-8px]"
+        },
+        style: {
           maxWidth
         },
         children: tags.map((tag) => /* @__PURE__ */ jsx(
@@ -151,24 +175,23 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
               userSelect: "none",
               ...zoomIsLargeEnough && {
                 fontSize: "lg",
-                borderRadius: "[4px]",
+                borderRadius: "sm",
                 px: "1.5"
                 // 6px
               }
             }),
-            onClick: (e) => {
+            onClick: onTagClick ? ((e) => {
               e.stopPropagation();
-              diagram.openSearch(`#${tag}`);
-            },
-            onMouseEnter: () => onHover(tag),
-            onMouseLeave: onLeave
+              onTagClick(`#${tag}`);
+            }) : void 0,
+            onMouseEnter: onTagMouseEnter ? () => onTagMouseEnter(`#${tag}`) : void 0,
+            onMouseLeave: onTagMouseLeave ? () => onTagMouseLeave(`#${tag}`) : void 0
           },
           tag
         ))
       }
     ) })
   ] });
-}, propsAreEqual);
-ElementTags.displayName = "ElementTags";
+}
 
 export { ElementTag, ElementTags };

package/dist/base-primitives/index.d.ts

@@ -13,7 +13,7 @@ export { ElementData } from './element/ElementData';
 export { ElementDetailsButton } from './element/ElementDetailsButton';
 export { ElementNodeContainer } from './element/ElementNodeContainer';
 export { ElementShape } from './element/ElementShape';
-export { ElementTag, ElementTags } from './element/ElementTags';
+export { ElementTag, type ElementTagProps, ElementTags, type ElementTagsProps } from './element/ElementTags';
 export { Markdown } from './Markdown';
 export { memoEdge } from './memoEdge';
 export { memoNode } from './memoNode';

package/dist/base-primitives/memoEdge.js

@@ -4,7 +4,7 @@ import { memo } from 'react';
 const isSame = (a, b) => {
   return Math.abs(a - b) < 2.5;
 };
-const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && isSame(prev.targetY, next.targetY) && isSame(prev.targetX, next.targetX) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && deepEqual(prev.data, next.data);
+const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.targetPosition, next.targetPosition) && deepEqual(prev.data, next.data);
 function memoEdge(Edge) {
   const Memo = memo(Edge, edgePropsEqual);
   Memo.displayName = `MemoEdge(${Edge.displayName || Edge.name})`;

package/dist/base-primitives/memoNode.js

@@ -2,7 +2,7 @@ import { deepEqual } from 'fast-equals';
 import { memo } from 'react';
 
 function nodePropsEqual(prev, next) {
-  return prev.id === next.id && deepEqual(prev.type, next.type) && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
+  return prev.id === next.id && deepEqual(prev.type, next.type) && deepEqual(prev.parentId ?? "", next.parentId ?? "") && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 }
 const isMemoized = /* @__PURE__ */ Symbol.for("isMemoized");
 function memoNode(Node, displayName = "Node") {

package/dist/components/ErrorFallback.js

@@ -4,7 +4,7 @@ import { HStack, VStack } from '@likec4/styles/jsx';
 import { ThemeIcon, Text, ScrollAreaAutosize, Button } from '@mantine/core';
 import { useRef, useEffect } from 'react';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";

package/dist/components/Link.js

@@ -4,8 +4,8 @@ import { styled } from '@likec4/styles/jsx';
 import { Badge, CopyButton, ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
 import { GithubIcon } from './GithubIcon.js';
-import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
+import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
 const GITHUB_PREFIX = "https://github.com/";
 const Link = forwardRef(
@@ -63,7 +63,7 @@ const Link = forwardRef(
           }),
           section: css({
             '&:is([data-position="left"])': {
-              color: "mantine.colors.dimmed",
+              color: "text.dimmed",
               userSelect: "none",
               pointerEvents: "none",
               _groupHover: {

package/dist/components/NavigationPanel.d.ts

@@ -1,7 +1,7 @@
 import { ForwardRefComponent, HTMLMotionProps } from 'motion/react';
 import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { StyleContextProvider, StyleContextConsumer } from '../../styled-system/jsx';
-import { NavigationPanelRecipe } from '../../styled-system/recipes';
+import { StyleContextProvider, StyleContextConsumer } from '@likec4/styles/jsx';
+import { NavigationPanelRecipe } from '@likec4/styles/recipes';
 export declare const NavigationPanel: {
     Root: StyleContextProvider<ForwardRefComponent<"div", HTMLMotionProps<"div">>, NavigationPanelRecipe>;
     Body: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;

package/dist/components/NavigationPanel.js

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { createStyleContext, isCssProperty } from '@likec4/styles/jsx';
 import { navigationPanel } from '@likec4/styles/recipes';
 import { isValidMotionProp } from 'motion/react';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import { Logo as Logo$1 } from './Logo.js';
+import { LogoIcon, Logo as Logo$1 } from './Logo.js';
 
 const { withProvider, withContext } = createStyleContext(navigationPanel);
-const shouldForwardProp = (prop, variantKeys) => isValidMotionProp(prop) || !variantKeys.includes(prop) && !isCssProperty(prop);
+const shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop));
 const LogoButton = forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     "button",
@@ -20,29 +20,8 @@ const LogoButton = forwardRef(({ className, ...props }, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", {}),
-        /* @__PURE__ */ jsx(
-          Logo$1,
-          {
-            className: css({
-              display: {
-                base: "none",
-                "@/md": "block"
-              }
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Logo$1,
-          {
-            className: css({
-              display: {
-                base: "block",
-                "@/md": "none"
-              }
-            })
-          }
-        )
+        /* @__PURE__ */ jsx(LogoIcon, { "data-logo-icon": true }),
+        /* @__PURE__ */ jsx(Logo$1, { "data-logo-full": true })
       ]
     }
   );

package/dist/components/PortalToContainer.js

@@ -1,14 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Portal } from '@mantine/core';
-import { useContext } from 'react';
-import { RootContainerContext } from '../context/RootContainerContext.js';
+import { useRootContainerContext } from '../context/RootContainerContext.js';
 
 function PortalToContainer({ children }) {
-  const ctx = useContext(RootContainerContext);
+  const ctx = useRootContainerContext();
   if (!ctx) {
     throw new Error("PortalToContainer must be used within RootContainer");
   }
-  return /* @__PURE__ */ jsx(Portal, { target: ctx.ref.current ?? `#${ctx.id}`, children });
+  return /* @__PURE__ */ jsx(Portal, { target: ctx.ref.current ?? ctx.selector, children });
 }
 
 export { PortalToContainer };

package/dist/components/RootContainer.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { useIsomorphicLayoutEffect } from '@react-hookz/web';
+import { useStore } from '@nanostores/react';
 import { atom } from 'nanostores';
-import { useState, useRef, useEffect, useMemo } from 'react';
-import { PanningAtomSafeCtx, ReduceGraphicsModeCtx, RootContainerContext } from '../context/RootContainerContext.js';
+import { useRef, useState, useMemo } from 'react';
+import { ReduceGraphicsModeProvider, PanningAtomSafeCtx, RootContainerContextProvider } from '../context/RootContainerContext.js';
 
 function RootContainer({
   id,
@@ -11,31 +11,21 @@ function RootContainer({
   reduceGraphics = false,
   children
 }) {
-  const [mounted, setMounted] = useState(false);
   const ref = useRef(null);
-  const $isPanningRef = useRef(null);
-  if (!$isPanningRef.current) {
-    $isPanningRef.current = atom(false);
-  }
-  useIsomorphicLayoutEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    return $isPanningRef.current?.subscribe((isPanning) => {
-      ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
-    });
-  }, []);
-  const ctx = useMemo(() => ({ id, ref }), [id, ref]);
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
+  const [$isPanning] = useState(() => atom(false));
+  const isPanning = useStore($isPanning);
+  const ctx = useMemo(() => ({ id, ref, selector: `#${id}` }), [id, ref]);
+  return /* @__PURE__ */ jsx(ReduceGraphicsModeProvider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanning, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
       className: cx("likec4-root", className),
       ref,
+      "data-likec4-diagram-panning": isPanning,
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
       },
-      children: mounted && !!ctx.ref.current && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
+      children: /* @__PURE__ */ jsx(RootContainerContextProvider, { value: ctx, children })
     }
   ) }) });
 }

package/dist/components/ViewNotFound.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare const ErrorMessage: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export declare const ViewNotFound: ({ viewId }: {
+export declare function ErrorMessage({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ViewNotFound({ viewId }: {
     viewId: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ViewNotFound.js

@@ -1,30 +1,34 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-const ErrorMessage = ({ children }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    style: {
-      margin: "1rem 0"
-    },
-    children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          margin: "0 auto",
-          display: "inline-block",
-          padding: "2rem",
-          background: "rgba(250,82,82,.15)",
-          color: "#ffa8a8"
-        },
-        children
-      }
-    )
-  }
-);
-const ViewNotFound = ({ viewId }) => /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-  "View ",
-  /* @__PURE__ */ jsx("code", { children: viewId }),
-  " not found"
-] });
+function ErrorMessage({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        margin: "1em 0"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            margin: "0 auto",
+            display: "inline-block",
+            padding: "2em",
+            background: "rgba(250,82,82,.15)",
+            color: "#ffa8a8"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function ViewNotFound({ viewId }) {
+  return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+    "View ",
+    /* @__PURE__ */ jsx("code", { children: viewId }),
+    " not found"
+  ] });
+}
 
 export { ErrorMessage, ViewNotFound };

package/dist/context/CurrentViewModelProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/context/CurrentViewModelProvider.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCurrentViewId } from '../hooks/useCurrentView.js';
+import { useOptionalLikeC4Model, CurrentViewModelContext } from './LikeC4ModelContext.js';
+
+function CurrentViewModelProvider({ children }) {
+  const viewId = useCurrentViewId();
+  const likec4model = useOptionalLikeC4Model();
+  const viewmodel = likec4model?.findView(viewId) ?? null;
+  return /* @__PURE__ */ jsx(CurrentViewModelContext, { value: viewmodel, children });
+}
+
+export { CurrentViewModelProvider };

package/dist/context/DefaultMantineProvider.d.ts

@@ -0,0 +1,2 @@
+import { MantineProviderProps } from '@mantine/core';
+export declare function DefaultMantineProvider({ children, theme, ...props }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/DefaultMantineProvider.js

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { MantineProvider, createTheme, Tooltip, Portal, SegmentedControl } from '@mantine/core';
+
+const DefaultTheme = createTheme({
+  autoContrast: true,
+  primaryColor: "indigo",
+  cursorType: "pointer",
+  defaultRadius: "sm",
+  fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
+  headings: {
+    fontWeight: "medium",
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: "bold"
+      },
+      h2: {
+        fontWeight: "medium"
+        // fontSize: '1.85rem',
+      }
+    }
+  },
+  fontSizes: {
+    xxs: "var(--font-sizes-xxs)",
+    xs: "var(--font-sizes-xs)",
+    sm: "var(--font-sizes-sm)",
+    md: "var(--font-sizes-md)",
+    lg: "var(--font-sizes-lg)",
+    xl: "var(--font-sizes-xl)"
+  },
+  spacing: {
+    xs: "var(--spacing-xs)",
+    sm: "var(--spacing-sm)",
+    md: "var(--spacing-md)",
+    lg: "var(--spacing-lg)",
+    xl: "var(--spacing-xl)"
+  },
+  components: {
+    SegmentedControl: SegmentedControl.extend({
+      vars: (theme, props) => ({
+        root: {
+          // @ts-expect-error
+          "--sc-font-size": theme.fontSizes[props.fz ?? props.size]
+        }
+      })
+    }),
+    Portal: Portal.extend({
+      defaultProps: {
+        reuseTargetNode: true
+      }
+    }),
+    Tooltip: Tooltip.extend({
+      defaultProps: {
+        color: "dark"
+      }
+    })
+  }
+});
+function DefaultMantineProvider({
+  children,
+  theme,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      defaultColorScheme: "auto",
+      theme: theme ?? DefaultTheme,
+      ...props,
+      children
+    }
+  );
+}
+
+export { DefaultMantineProvider };

package/dist/context/DiagramEventHandlers.d.ts

@@ -1,15 +1,15 @@
-import { aux } from '@likec4/core/types';
 import { PropsWithChildren, RefObject } from 'react';
 import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 type RequiredOrNull<T> = {
     [P in keyof T]-?: NonNullable<T[P]> | null;
 };
+type DiagramEventHandlersRef = RefObject<Required<LikeC4DiagramEventHandlers>>;
 export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers> & {
-    handlersRef: RefObject<Required<LikeC4DiagramEventHandlers>>;
+    handlersRef: DiagramEventHandlersRef;
 };
-export declare function DiagramEventHandlers<A extends aux.Any>({ handlers, children, }: PropsWithChildren<{
-    handlers: Required<LikeC4DiagramEventHandlers<A>>;
+export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
+    handlers: Required<LikeC4DiagramEventHandlers>;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
-export declare function useDiagramEventHandlersRef<A extends aux.Any = aux.Any>(): RefObject<LikeC4DiagramEventHandlers<A>>;
+export declare function useDiagramEventHandlersRef(): DiagramEventHandlersRef;
 export {};

package/dist/context/DiagramEventHandlers.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useSyncedRef } from '@react-hookz/web';
-import { useContext, createContext, useMemo } from 'react';
-import { keys, isFunction, mapToObj } from 'remeda';
+import { useContext, useMemo, createContext } from 'react';
+import { isFunction, mapToObj, keys } from 'remeda';
 
 const defaultHandlers = {
   onNavigateTo: null,
@@ -18,6 +18,9 @@ const defaultHandlers = {
   onLayoutTypeChange: null
 };
 const HandlerNames = keys(defaultHandlers);
+const DiagramEventHandlersRefContext = createContext({
+  current: defaultHandlers
+});
 const DiagramEventHandlersReactContext = createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
@@ -41,10 +44,13 @@ function DiagramEventHandlers({
     }),
     handlersRef
   }), [handlersRef, ...deps]);
-  return /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(DiagramEventHandlersRefContext.Provider, { value: handlersRef, children: /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children }) });
 }
 function useDiagramEventHandlers() {
   return useContext(DiagramEventHandlersReactContext);
 }
+function useDiagramEventHandlersRef() {
+  return useContext(DiagramEventHandlersRefContext);
+}
 
-export { DiagramEventHandlers, useDiagramEventHandlers };
+export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };

package/dist/context/DiagramFeatures.d.ts

@@ -1,6 +1,7 @@
 import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-declare const FeatureNames: readonly ["Controls", "Editor", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Vscode", "ElementTags"];
+import { JSX } from 'react/jsx-runtime';
+declare const FeatureNames: readonly ["Controls", "Editor", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
 export type EnabledFeatures = {
@@ -14,9 +15,9 @@ export declare function DiagramFeatures({ children, features, overrides, }: Prop
     overrides: {
         overrides: Partial<EnabledFeatures>;
     };
-}>>): import("react/jsx-runtime").JSX.Element;
+}>>): JSX.Element;
 export declare namespace DiagramFeatures {
-    var Overlays: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+    var Overlays: ({ children }: PropsWithChildren) => JSX.Element;
 }
 export declare function useEnabledFeatures(): EnabledFeatures;
 export type IfEnabledProps = PropsWithChildren<{
@@ -43,10 +44,10 @@ export type IfEnabledProps = PropsWithChildren<{
 export declare function IfEnabled({ feature, children, and, }: PropsWithChildren<{
     feature: FeatureName;
     and?: boolean;
-}>): import("react/jsx-runtime").JSX.Element | null;
+}>): JSX.Element | null;
 export declare function IfNotEnabled({ feature, children }: PropsWithChildren<{
     feature: FeatureName;
-}>): import("react/jsx-runtime").JSX.Element | null;
-export declare function IfReadOnly({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
-export declare function IfNotReadOnly({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+}>): JSX.Element | null;
+export declare function IfReadOnly({ children }: PropsWithChildren): JSX.Element | null;
+export declare function IfNotReadOnly({ children }: PropsWithChildren): JSX.Element | null;
 export {};