@likec4/diagram 1.47.0 → 1.48.0

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

@@ -1,25 +1,57 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ensureSizes, RichText } from '@likec4/core/types';
-import { cx, css } from '@likec4/styles/css';
+import { RichText } from '@likec4/core/types';
+import { cx } from '@likec4/styles/css';
 import { elementNodeData } from '@likec4/styles/recipes';
-import { Text } from '@mantine/core';
 import { forwardRef } from 'react';
-import { isNumber, isTruthy } from 'remeda';
+import { isTruthy } from 'remeda';
 import { IconRenderer } from '../../context/IconRenderer.js';
+import { useLikeC4Styles } from '../../hooks/useLikeC4Styles.js';
 import { Markdown } from '../Markdown.js';
 
-const Root = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ...props,
-    ref,
-    className: cx(
-      className,
-      elementNodeData(),
-      "likec4-element"
-    )
+const resolveIconColor = (styles, data) => {
+  const iconColor = data.style.iconColor;
+  if (!iconColor) {
+    return void 0;
   }
-));
+  const colors = styles.colors(iconColor).elements;
+  return iconColor === data.color ? colors.stroke : colors.fill;
+};
+const 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);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx(
+        className,
+        elementNodeData({
+          iconPosition: data.style.iconPosition,
+          withIconColor: !!resolvedIconColor
+        }),
+        "likec4-element"
+      ),
+      style: {
+        ...style,
+        ...iconSize && {
+          // @ts-ignore
+          "--likec4-icon-size": `${iconSize}px`
+        },
+        ...resolvedIconColor && {
+          // @ts-ignore
+          "--likec4-icon-color": resolvedIconColor
+        }
+      }
+    }
+  );
+});
 const Icon = ({ data, ...props }) => /* @__PURE__ */ jsx(IconRenderer, { element: data, ...props });
 const Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
@@ -32,20 +64,16 @@ const Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx
     ref
   }
 ));
-const Title = forwardRef(({ data: { title, style }, className, ...props }, ref) => {
-  const { size } = ensureSizes(style);
-  const isSm = size === "sm" || size === "xs";
+const Title = forwardRef(({ data: { title }, className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    Text,
+    "div",
     {
-      component: "div",
       ...props,
       className: cx(
         className,
         "likec4-element-title"
       ),
       "data-likec4-node-title": "",
-      lineClamp: isSm ? 2 : 3,
       ref,
       children: title
     }
@@ -54,9 +82,8 @@ const Title = forwardRef(({ data: { title, style }, className, ...props }, ref)
 const Technology = forwardRef(({ data, children, className, ...props }, ref) => {
   const text = data?.technology ?? children;
   return isTruthy(text) ? /* @__PURE__ */ jsx(
-    Text,
+    "div",
     {
-      component: "div",
       ...props,
       className: cx(
         className,
@@ -68,23 +95,18 @@ const Technology = forwardRef(({ data, children, className, ...props }, ref) =>
     }
   ) : null;
 });
-const Description = forwardRef(({ data: { description, style }, className, ...props }, ref) => {
+const Description = forwardRef(({ data: { description }, className, ...props }, ref) => {
   if (!description) {
     return null;
   }
   const desc = RichText.from(description);
-  const { size } = ensureSizes(style);
-  const isSm = size === "sm" || size === "xs";
   return /* @__PURE__ */ jsx(
     Markdown,
     {
       ...props,
       className: cx(
         className,
-        "likec4-element-description",
-        css({
-          lineClamp: isSm ? 3 : 5
-        })
+        "likec4-element-description"
       ),
       "data-likec4-node-description": "",
       value: desc,
@@ -98,24 +120,15 @@ const Description = forwardRef(({ data: { description, style }, className, ...pr
     }
   );
 });
-function ElementData({ iconSize, data }) {
-  return /* @__PURE__ */ jsxs(
-    Root,
-    {
-      style: isNumber(iconSize) ? {
-        // @ts-ignore
-        ["--likec4-icon-size"]: `${iconSize}px`
-      } : void 0,
-      children: [
-        /* @__PURE__ */ jsx(Icon, { data }),
-        /* @__PURE__ */ jsxs(Content, { children: [
-          /* @__PURE__ */ jsx(Title, { data }),
-          /* @__PURE__ */ jsx(Technology, { data }),
-          /* @__PURE__ */ jsx(Description, { data })
-        ] })
-      ]
-    }
-  );
+function ElementData({ data }) {
+  return /* @__PURE__ */ jsxs(Root, { data, children: [
+    /* @__PURE__ */ jsx(Icon, { data }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(Title, { data }),
+      /* @__PURE__ */ jsx(Technology, { data }),
+      /* @__PURE__ */ jsx(Description, { data })
+    ] })
+  ] });
 }
 ElementData.Root = Root;
 ElementData.Icon = Icon;

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

@@ -5,7 +5,7 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",
@@ -64,6 +64,7 @@ function ElementDetailsButton({
       whileTap: { scale: 1.15 },
       onClick,
       onDoubleClick: stopPropagation,
+      tabIndex: -1,
       children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
     }
   ) });

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

@@ -1,11 +1,11 @@
-import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
+import { Color, ComputedNodeStyle, ElementShape } from '@likec4/core/types';
 import { MotionNodeLayoutOptions } from 'motion/react';
 import { CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { BaseNodePropsWithData } from '../../base/types';
 type RequiredData = {
     color: Color;
     shape: ElementShape;
-    style?: ElementStyle;
+    style?: ComputedNodeStyle;
 };
 /**
  * Top-level primitive to compose leaf nodes renderers.

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

@@ -62,6 +62,7 @@ const ElementNodeContainer = forwardRef(({
       style: {
         ...style
       },
+      tabIndex: -1,
       ...rest,
       children
     }

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

@@ -12,6 +12,10 @@ type Data = {
     tags: readonly string[] | null | undefined;
     width: number;
 };
-type ElementTagsProps = BaseNodePropsWithData<Data>;
-export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered } }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
+export type ElementTagsProps = BaseNodePropsWithData<Data> & {
+    onTagClick?: (tag: `#${string}`) => void;
+    onTagMouseEnter?: (tag: `#${string}`) => void;
+    onTagMouseLeave?: (tag: `#${string}`) => void;
+};
+export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};

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.0_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.0_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.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
 const GITHUB_PREFIX = "https://github.com/";
 const Link = forwardRef(

package/dist/components/Logo.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { forwardRef } from 'react';
 

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 })
       ]
     }
   );
@@ -57,13 +36,15 @@ const Logo = withContext(LogoButton, "logo");
 const Label = withContext(m.div, "label", {
   shouldForwardProp
 });
-withContext(m.div, "dropdown", {
+const Dropdown = withContext(m.div, "dropdown", {
   shouldForwardProp
 });
 const NavigationPanel = {
   Root,
   Body,
   Logo,
-  Label};
+  Label,
+  Dropdown
+};
 
 export { NavigationPanel };

package/dist/components/RootContainer.js

@@ -13,20 +13,17 @@ function RootContainer({
 }) {
   const [mounted, setMounted] = useState(false);
   const ref = useRef(null);
-  const $isPanningRef = useRef(null);
-  if (!$isPanningRef.current) {
-    $isPanningRef.current = atom(false);
-  }
+  const $isPanning = useRef(atom(false)).current;
   useIsomorphicLayoutEffect(() => {
     setMounted(true);
   }, []);
   useEffect(() => {
-    return $isPanningRef.current?.subscribe((isPanning) => {
+    return $isPanning.listen((isPanning) => {
       ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
     });
-  }, []);
+  }, [$isPanning]);
   const ctx = useMemo(() => ({ id, ref }), [id, ref]);
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanning, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
@@ -35,7 +32,7 @@ function RootContainer({
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
       },
-      children: mounted && !!ctx.ref.current && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
+      children: mounted && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
     }
   ) }) });
 }

package/dist/context/DefaultMantineProvider.d.ts

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

package/dist/context/DefaultMantineProvider.js

@@ -0,0 +1,66 @@
+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,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", theme: DefaultTheme, ...props, children });
+}
+
+export { DefaultMantineProvider };

package/dist/context/DiagramFeatures.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { shallowEqual } from 'fast-equals';
-import { useContext, createContext, useState, useEffect } from 'react';
+import { useContext, createContext, useEffect } from 'react';
+import { useSetState } from '../hooks/useSetState.js';
 
 const DefaultFeatures = {
   enableEditor: false,
@@ -27,19 +27,20 @@ function DiagramFeatures({
   overrides
 }) {
   const outerScope = useContext(DiagramFeaturesContext);
-  const [scope, setScope] = useState(outerScope);
+  const [scope, setScope] = useSetState(() => ({
+    ...outerScope,
+    ...features,
+    ...overrides
+  }));
   useEffect(
     () => {
-      setScope((current) => {
-        const next = {
-          ...outerScope,
-          ...features,
-          ...overrides
-        };
-        return shallowEqual(current, next) ? current : next;
+      setScope({
+        ...outerScope,
+        ...features,
+        ...overrides
       });
     },
-    [outerScope, features, overrides]
+    [outerScope, features, overrides, setScope]
   );
   return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
 }

package/dist/context/EnsureMantine.d.ts

@@ -1,7 +1,4 @@
 import { PropsWithChildren } from 'react';
 type EnsureMantineProps = PropsWithChildren<{}>;
 export declare function EnsureMantine({ children }: EnsureMantineProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace EnsureMantine {
-    var displayName: string;
-}
 export {};