@likec4/diagram 1.59.2 → 1.59.4

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

@@ -1,7 +1,7 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '../../styled-system/types';
+import { JsxStyleProps } from '@likec4/styles/types';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
-export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
+export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color' | 'translate'> & {
     value: RichTextType;
     /**
      * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
@@ -29,7 +29,7 @@ export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySe
      */
     emptyText?: string;
 };
-export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children" | "dangerouslySetInnerHTML"> & {
+export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "translate" | "children" | "dangerouslySetInnerHTML"> & {
     value: RichTextType;
     /**
      * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.

package/dist/base-primitives/compound/CompoundNodeContainer.js

@@ -13,10 +13,9 @@ function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered = false
 		max: 100
 	});
 	const isTransparent = opacity < 98;
-	const MIN_OPACITY = 50;
-	const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
+	const borderOpacity = 50 + clamp(50 * (opacity / 100), {
 		min: 0,
-		max: 100 - MIN_OPACITY
+		max: 50
 	});
 	const compoundClass = compoundNode({
 		isTransparent,

package/dist/base-primitives/compound/CompoundTitle.js

@@ -3,13 +3,14 @@ import { IconRenderer } from "../../context/IconRenderer.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/base-primitives/compound/CompoundTitle.tsx
 function CompoundTitle({ data, "aria-hidden": ariaHidden }) {
+	const elementIcon = IconRenderer({
+		element: data,
+		className: "likec4-compound-icon"
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "likec4-compound-title-container",
 		"aria-hidden": ariaHidden,
-		children: [IconRenderer({
-			element: data,
-			className: "likec4-compound-icon"
-		}), /* @__PURE__ */ jsx("div", {
+		children: [elementIcon, /* @__PURE__ */ jsx("div", {
 			className: "likec4-compound-title",
 			children: data.title
 		})]

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,10 +1,10 @@
-import { RecipeRuntimeFn } from '../../../styled-system/types';
+import { RecipeRuntimeFn } from '@likec4/styles/types';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {
             transitionDelay: {
-                base: "0.2s";
-                _hover: "0s";
+                base: "[0.2s]";
+                _hover: "0";
             };
         };
     };

package/dist/base-primitives/compound/actionbtns.css.js

@@ -1,10 +1,10 @@
 import { cva } from "@likec4/styles/css";
 //#region src/base-primitives/compound/actionbtns.css.ts
 var compoundActionBtn = cva({
-	base: { transitionDuration: "normal" },
+	base: { transitionDuration: "medium" },
 	variants: { delay: { true: { transitionDelay: {
-		base: "0.2s",
-		_hover: "0s"
+		base: "[0.2s]",
+		_hover: "0"
 	} } } }
 });
 //#endregion

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

@@ -22,16 +22,21 @@ var resolveIconColor = (styles, data) => {
 	const colors = styles.colors(iconColor).elements;
 	return iconColor === data.color ? colors.stroke : colors.fill;
 };
+function shouldBlendIconWithPalette(icon, hasIconColor) {
+	return !hasIconColor && icon?.startsWith("bootstrap:") === true;
+}
 var Root = forwardRef(({ className, style, data, ...props }, ref) => {
 	const styles = useLikeC4Styles();
 	const iconSize = data.style.iconSize ? styles.nodeSizes(data.style).values.iconSize : void 0;
 	const resolvedIconColor = resolveIconColor(styles, data);
+	const hasIconColor = !!resolvedIconColor;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref,
 		className: cx(className, elementNodeData({
 			iconPosition: data.style.iconPosition,
-			withIconColor: !!resolvedIconColor
+			withIconColor: hasIconColor,
+			withIconBlend: shouldBlendIconWithPalette(data.icon, hasIconColor)
 		}), "likec4-element"),
 		style: {
 			...style,

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

@@ -22,7 +22,8 @@ function cylinderSVGPath(diameter, height, tilt = .07) {
 	};
 }
 function docSVGPath(width, height) {
-	const baseY = roundDpr(height - height / 8 / 2);
+	const waveHeight = height / 8;
+	const baseY = roundDpr(height - waveHeight / 2);
 	const amplitude = roundDpr(height / 6);
 	const radius = 6;
 	return { path: `
@@ -302,15 +303,13 @@ function ShapeSvgOutline({ shape, w, h }) {
 				children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path })
 			});
 			break;
-		default:
-			svg = /* @__PURE__ */ jsx("rect", {
-				x: -3,
-				y: -3,
-				width: w + 6,
-				height: h + 6,
-				rx: 8
-			});
-			break;
+		default: svg = /* @__PURE__ */ jsx("rect", {
+			x: -3,
+			y: -3,
+			width: w + 6,
+			height: h + 6,
+			rx: 8
+		});
 	}
 	return /* @__PURE__ */ jsx("g", {
 		className: "likec4-shape-outline",

package/dist/base-primitives/element/ElementTags.d.ts

@@ -3,11 +3,11 @@ import { BaseNodePropsWithData } from '../../base/types';
 export type ElementTagProps = {
     tag: string;
     cursor?: 'pointer' | 'default';
-} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'color'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'color' | 'translate'>;
 export declare const ElementTag: ForwardRefExoticComponent<{
     tag: string;
     cursor?: "pointer" | "default";
-} & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children"> & RefAttributes<HTMLDivElement>>;
+} & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "translate" | "children"> & RefAttributes<HTMLDivElement>>;
 type Data = {
     tags: readonly string[] | null | undefined;
     width: number;

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

@@ -19,7 +19,7 @@ var ElementTag = forwardRef(({ tag, cursor, className, style, ...props }, ref) =
 		className: cx(likec4tag(), className),
 		...props,
 		style: {
-			cursor,
+			...cursor && { cursor },
 			...style
 		},
 		children: [/* @__PURE__ */ jsx("span", { children: "#" }), /* @__PURE__ */ jsx("span", { children: tag })]
@@ -85,12 +85,12 @@ function WithElementTags({ id, tags, width, hovered, onTagClick, onTagMouseEnter
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "center",
-				maxWidth: "50px",
-				height: "5px",
+				maxWidth: "[50px]",
+				height: "[5px]",
 				_whenHovered: {
-					height: "12px",
+					height: "[12px]",
 					borderRadius: "sm",
-					transitionDelay: ".08s"
+					transitionDelay: "fastest"
 				},
 				transition: "fast"
 			})

package/dist/components/EmptyBox.d.ts

@@ -0,0 +1,3 @@
+import { StyledComponent } from '@likec4/styles/types';
+import { EmptyBoxVariantProps } from '@likec4/styles/recipes';
+export declare const EmptyBox: StyledComponent<"div", EmptyBoxVariantProps>;

package/dist/components/EmptyBox.js

@@ -0,0 +1,9 @@
+import "../_virtual/_rolldown/runtime.js";
+import { isCssProperty, styled } from "@likec4/styles/jsx";
+import { emptyBox } from "@likec4/styles/recipes";
+//#region src/components/EmptyBox.tsx
+var EmptyBox = styled("div", emptyBox, { shouldForwardProp(prop, variantKeys) {
+	return !variantKeys.includes(prop) && !isCssProperty(prop);
+} });
+//#endregion
+export { EmptyBox };

package/dist/components/ErrorFallback.js

@@ -17,20 +17,21 @@ function ErrorFallback({ error, resetErrorBoundary }) {
 			margin: "0",
 			padding: "0",
 			position: "fixed",
-			top: "10",
-			left: "10",
-			width: "[calc(100vw - ({spacing.10} * 2))]",
+			top: "5",
+			left: "5",
+			width: "[calc(100vw - ({spacing.5} * 2))]",
 			height: "max-content",
-			maxHeight: "[calc(100vh - ({spacing.10} * 3))]",
+			maxHeight: "[calc(100vh - ({spacing.5} * 3))]",
 			background: `likec4.overlay.body`,
 			rounded: "sm",
-			borderWidth: 3,
+			borderWidth: "extra",
 			borderColor: `likec4.overlay.border`,
 			shadow: "xl",
 			outline: "none",
+			zIndex: "toast",
 			_backdrop: {
 				cursor: "zoom-out",
-				backdropFilter: `blur(18px)`,
+				backdropFilter: `[blur(18px)]`,
 				bg: "[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]"
 			}
 		}),

package/dist/components/FloatingWindow.d.ts

@@ -0,0 +1,18 @@
+import { FloatingWindowProps as MantineFloatingWindowProps } from '@mantine/core';
+export interface FloatingWindowProps extends MantineFloatingWindowProps {
+    /**
+     * To make window position and size persistent, provide a stable id
+     */
+    windowId?: string | null;
+    /**
+     * If true, the window will not be resizable
+     * @default false
+     */
+    nonResizeable?: boolean;
+    /**
+     * Callback when the window is closed
+     * If provided, the window will render a close button
+     */
+    onClose?: () => void;
+}
+export declare function FloatingWindow({ children, windowId, onClose, dimensions, initialPosition, className, nonResizeable, ...props }: FloatingWindowProps): import("react").JSX.Element;

package/dist/components/FloatingWindow.js

@@ -0,0 +1,89 @@
+import { __name } from "../_virtual/_rolldown/runtime.js";
+import { useId as useId$1 } from "../hooks/useId.js";
+import { useMantinePortalProps } from "../hooks/useMantinePortalProps.js";
+import { cx } from "@likec4/styles/css";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRafCallback } from "@react-hookz/web";
+import { CloseButton, FloatingWindow } from "@mantine/core";
+import { useSessionStorage } from "@mantine/hooks";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { floatingWindow } from "@likec4/styles/recipes";
+//#region src/components/FloatingWindow.tsx
+function FloatingWindow$1({ children, windowId, onClose, dimensions, initialPosition, className, nonResizeable = false, ...props }) {
+	const portalProps = useMantinePortalProps();
+	const id = useId$1();
+	const [windowState, setWindowState] = useSessionStorage({
+		key: `likec4:window:${windowId ?? id}`,
+		getInitialValueInEffect: false,
+		defaultValue: {
+			dimensions: {
+				minWidth: 220,
+				minHeight: 250,
+				initialWidth: 260,
+				initialHeight: 360,
+				...dimensions
+			},
+			initialPosition: {
+				top: 65,
+				left: 32,
+				...initialPosition
+			}
+		}
+	});
+	const initialStateRef = useRef(windowState);
+	const [updateWindowState] = useRafCallback((update) => {
+		setWindowState((state) => ({
+			dimensions: {
+				...state.dimensions,
+				...update.dimensions
+			},
+			initialPosition: {
+				...state.initialPosition,
+				...update.initialPosition
+			}
+		}));
+	});
+	return /* @__PURE__ */ jsxs(FloatingWindow, {
+		constrainToViewport: true,
+		constrainOffset: 4,
+		dragHandleSelector: ".drag-handle",
+		excludeDragHandleSelector: "button, .nodrag, .mantine-ScrollArea-root",
+		className: cx(floatingWindow(), className),
+		...portalProps,
+		...props,
+		...initialStateRef.current,
+		onPositionChange: (position) => {
+			updateWindowState({ initialPosition: {
+				top: position.y,
+				left: position.x
+			} });
+			props.onPositionChange?.(position);
+		},
+		onSizeChange: (size) => {
+			updateWindowState({ dimensions: {
+				initialHeight: size.height,
+				initialWidth: size.width
+			} });
+			props.onSizeChange?.(size);
+		},
+		children: [
+			children,
+			!nonResizeable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FloatingWindow.ResizeHandle, {
+				"data-resize-handler": "right",
+				tabIndex: -1
+			}), /* @__PURE__ */ jsx(FloatingWindow.ResizeHandle, { "data-resize-handler": "bottom" })] }),
+			/* @__PURE__ */ jsx(Box$1, {
+				className: "drag-header drag-handle",
+				pr: "1",
+				children: onClose && /* @__PURE__ */ jsx(CloseButton, {
+					size: 16,
+					onClick: onClose
+				})
+			})
+		]
+	});
+}
+__name(FloatingWindow$1, "FloatingWindow");
+//#endregion
+export { FloatingWindow$1 as FloatingWindow };

package/dist/components/Link.js

@@ -23,9 +23,9 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 			timeout: 1500,
 			children: ({ copy, copied }) => /* @__PURE__ */ jsx(ActionIcon, {
 				className: css({
-					opacity: copied ? 1 : .45,
+					opacity: copied ? "1" : "0.45",
 					transition: "fast",
-					_hover: { opacity: 1 }
+					_hover: { opacity: "1" }
 				}),
 				tabIndex: -1,
 				size: "20",
@@ -45,8 +45,8 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 		classNames: {
 			root: css({
 				flexWrap: "nowrap",
-				minHeight: 24,
-				maxWidth: 500,
+				minHeight: "[24px]",
+				maxWidth: "[500px]",
 				userSelect: "all",
 				pr: "0",
 				backgroundColor: {
@@ -63,7 +63,7 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 				pointerEvents: "none",
 				_groupHover: {
 					color: "[var(--badge-color)]",
-					opacity: .7
+					opacity: "0.7"
 				}
 			} })
 		},
@@ -77,8 +77,8 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 			css: {
 				transition: "fast",
 				opacity: {
-					base: .7,
-					_hover: 1
+					base: "0.7",
+					_hover: "1"
 				},
 				textDecoration: {
 					base: "none",

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

@@ -3,9 +3,8 @@ import { Logo as Logo$1, LogoIcon } from "./Logo.js";
 import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidMotionProp } from "motion/react";
+import { isValidMotionProp, m } from "motion/react";
 import { createStyleContext, isCssProperty } from "@likec4/styles/jsx";
-import * as m$1 from "motion/react-m";
 import { navigationPanel } from "@likec4/styles/recipes";
 //#region src/components/NavigationPanel.tsx
 var { withProvider, withContext } = createStyleContext(navigationPanel);
@@ -19,11 +18,11 @@ var LogoButton = forwardRef(({ className, ...props }, ref) => {
 	});
 });
 var NavigationPanel = {
-	Root: withProvider(m$1.div, "root", { shouldForwardProp }),
-	Body: withContext(m$1.div, "body", { shouldForwardProp }),
+	Root: withProvider(m.div, "root", { shouldForwardProp }),
+	Body: withContext(m.div, "body", { shouldForwardProp }),
 	Logo: withContext(LogoButton, "logo", { shouldForwardProp }),
-	Label: withContext(m$1.div, "label", { shouldForwardProp }),
-	Dropdown: withContext(m$1.div, "dropdown", { shouldForwardProp })
+	Label: withContext(m.div, "label", { shouldForwardProp }),
+	Dropdown: withContext(m.div, "dropdown", { shouldForwardProp })
 };
 //#endregion
 export { NavigationPanel };

package/dist/components/SearchControl.css.js

@@ -1,23 +1,21 @@
 import { css } from "@likec4/styles/css";
 //#region src/components/SearchControl.css.ts
 var root = css({
-	height: "30px",
+	height: "control.sm",
 	paddingLeft: "sm",
 	paddingRight: "1",
 	borderRadius: "sm",
-	border: "1px solid",
+	border: "default",
 	borderColor: {
-		base: "default.border",
+		base: "border.default",
 		_light: "mantine.gray[4]",
 		_dark: "mantine.dark[4]",
-		_hover: "default.border"
+		_hover: "border.default"
 	},
 	cursor: "pointer",
 	background: {
-		base: "default",
-		_light: "white",
-		_dark: "mantine.dark[6]",
-		_hover: "default.hover"
+		base: "surface.default",
+		_hover: "surface.hover"
 	},
 	width: "100%",
 	"& .tabler-icon": { color: "text" },
@@ -35,18 +33,18 @@ var placeholder = css({
 	fontSize: "sm",
 	fontWeight: "medium",
 	paddingRight: "2.5",
-	color: "text.placeholder",
+	color: "text.non-essential",
 	flex: "1",
 	sm: { paddingRight: "[30px]" },
 	md: { paddingRight: "[50px]" }
 });
 var shortcut = css({
-	fontSize: "11px",
+	fontSize: "xxs",
 	fontWeight: "bold",
-	lineHeight: 1,
+	lineHeight: "tight",
 	padding: "[4px 7px]",
 	borderRadius: "sm",
-	border: "1px solid",
+	border: "default",
 	transition: "fast",
 	_light: {
 		color: "mantine.gray[7]",

package/dist/components/ViewIcon.d.ts

@@ -0,0 +1,11 @@
+import { IconProps } from '@tabler/icons-react';
+import { JSX } from 'react/jsx-runtime';
+/**
+ * Returns the appropriate icon component for a given view type.
+ * @param viewType - The type of view ('index', 'element', 'deployment', or 'dynamic')
+ * @returns The corresponding icon component
+ */
+export declare function viewIcon(viewType: 'index' | 'element' | 'deployment' | 'dynamic'): JSX.Element;
+export declare function ViewIcon({ type, className, ...props }: IconProps & {
+    type: 'index' | 'element' | 'deployment' | 'dynamic';
+}): JSX.Element;

package/dist/components/ViewIcon.js

@@ -0,0 +1,71 @@
+import "../_virtual/_rolldown/runtime.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconDirectionSignFilled, IconStack2, IconStarFilled, IconZoomScan } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+//#region src/components/ViewIcon.tsx
+var viewTypeIconCss = css({
+	verticalAlign: "middle",
+	opacity: {
+		base: "0.4",
+		_dark: "0.5",
+		_groupHover: "0.8",
+		_groupActive: "0.8",
+		_groupFocus: "0.8"
+	}
+});
+var viewIcons = {
+	index: /* @__PURE__ */ jsx(IconStarFilled, {
+		size: 16,
+		className: viewTypeIconCss
+	}),
+	element: /* @__PURE__ */ jsx(IconZoomScan, {
+		size: 18,
+		stroke: 2,
+		className: viewTypeIconCss
+	}),
+	deployment: /* @__PURE__ */ jsx(IconStack2, {
+		size: 16,
+		stroke: 1.5,
+		className: viewTypeIconCss
+	}),
+	dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, {
+		size: 18,
+		className: viewTypeIconCss
+	})
+};
+/**
+* Returns the appropriate icon component for a given view type.
+* @param viewType - The type of view ('index', 'element', 'deployment', or 'dynamic')
+* @returns The corresponding icon component
+*/
+function viewIcon(viewType) {
+	return viewIcons[viewType];
+}
+function ViewIcon({ type, className, ...props }) {
+	if (type === "index") return /* @__PURE__ */ jsx(IconStarFilled, {
+		size: 16,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "element") return /* @__PURE__ */ jsx(IconZoomScan, {
+		size: 18,
+		stroke: 2,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "deployment") return /* @__PURE__ */ jsx(IconStack2, {
+		size: 16,
+		stroke: 1.5,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "dynamic") return /* @__PURE__ */ jsx(IconDirectionSignFilled, {
+		size: 18,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	nonexhaustive(type);
+}
+//#endregion
+export { ViewIcon, viewIcon };

package/dist/context/CurrentViewModelProvider.js

@@ -5,8 +5,9 @@ import { jsx } from "react/jsx-runtime";
 //#region src/context/CurrentViewModelProvider.tsx
 function CurrentViewModelProvider({ children }) {
 	const viewId = useCurrentViewId();
+	const viewmodel = useOptionalLikeC4Model()?.findView(viewId) ?? null;
 	return /* @__PURE__ */ jsx(CurrentViewModelContext, {
-		value: useOptionalLikeC4Model()?.findView(viewId) ?? null,
+		value: viewmodel,
 		children
 	});
 }

package/dist/context/DiagramEventHandlers.js

@@ -16,7 +16,8 @@ var defaultHandlers = {
 	onLogoClick: null,
 	onOpenSource: null,
 	onInitialized: null,
-	onLayoutTypeChange: null
+	onLayoutTypeChange: null,
+	onRelationshipBrowserScopeChange: null
 };
 var HandlerNames = keys(defaultHandlers);
 var DiagramEventHandlersRefContext = createContext({ current: defaultHandlers });
@@ -26,13 +27,14 @@ var DiagramEventHandlersReactContext = createContext({
 });
 function DiagramEventHandlers({ handlers, children }) {
 	const handlersRef = useSyncedRef(handlers);
+	const deps = HandlerNames.map((name) => isFunction(handlers[name]));
 	const value = useMemo(() => ({
 		...mapToObj(HandlerNames, (name) => {
 			if (handlersRef.current[name]) return [name, (...args) => handlersRef.current[name]?.(...args)];
 			return [name, null];
 		}),
 		handlersRef
-	}), [handlersRef, ...HandlerNames.map((name) => isFunction(handlers[name]))]);
+	}), [handlersRef, ...deps]);
 	return /* @__PURE__ */ jsx(DiagramEventHandlersRefContext.Provider, {
 		value: handlersRef,
 		children: /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, {

package/dist/context/EnsureMantine.js

@@ -1,5 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
-import { DefaultMantineProvider } from "./DefaultMantineProvider.js";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.js";
 import { useContext, useEffect } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { MantineContext } from "@mantine/core";
@@ -7,9 +7,9 @@ import { MantineContext } from "@mantine/core";
 function EnsureMantine({ children }) {
 	const mantineCtx = useContext(MantineContext);
 	useEffect(() => {
-		if (!mantineCtx) console.warn("LikeC4Diagram must be a child of MantineProvider");
+		if (!mantineCtx) console.warn("LikeC4Diagram must be a child of LikeC4MantineProvider");
 	}, []);
-	if (!mantineCtx) return /* @__PURE__ */ jsx(DefaultMantineProvider, { children });
+	if (!mantineCtx) return /* @__PURE__ */ jsx(LikeC4MantineProvider, { children });
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 //#endregion

package/dist/context/IconRenderer.d.ts

@@ -1,6 +1,6 @@
 import { ElementShape } from '@likec4/core';
 import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
-import { ElementIconRenderer } from '../LikeC4Diagram.props';
+import { ElementIconRenderer, ElementIconRendererProps } from '../LikeC4Diagram.props';
 /**
  * Provider for custom element icon renderers
  *
@@ -37,3 +37,4 @@ export declare function IconOrShapeRenderer({ element, className, style, }: {
     className?: string;
     style?: CSSProperties | undefined;
 }): import("react").JSX.Element;
+export declare function DefaultIconRenderer({ node, ...props }: ElementIconRendererProps): import("react").JSX.Element | null;