@likec4/diagram 1.32.1 → 1.33.0

package/dist/base/primitives/MarkdownBlock.d.ts

@@ -0,0 +1,27 @@
+import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
+import { BoxProps } from '@likec4/styles/jsx';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type MarkdownBlockProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children'> & {
+    value: RichTextType;
+    /**
+     * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
+     * @default false
+     */
+    uselikec4palette?: boolean;
+    /**
+     * Scale factor for the font size.
+     * @default 1
+     */
+    textScale?: number;
+    /**
+     * If true, the component will not render anything if the value is empty.
+     * @default false
+     */
+    hideIfEmpty?: boolean;
+    /**
+     * Text to show if the value is empty.
+     * @default "no content"
+     */
+    emptyText?: string;
+};
+export declare const MarkdownBlock: ForwardRefExoticComponent<Omit<MarkdownBlockProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/base/primitives/MarkdownBlock.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { markdownBlock } from '@likec4/styles/recipes';
+import { Text } from '@mantine/core';
+import { forwardRef } from 'react';
+
+const MarkdownBlock = forwardRef(({
+  value,
+  textScale = 1,
+  uselikec4palette = false,
+  hideIfEmpty = false,
+  emptyText = "no content",
+  className,
+  ...props
+}, ref) => {
+  if (value.isEmpty && hideIfEmpty) {
+    return null;
+  }
+  const content = value.nonEmpty ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", children: emptyText }) };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      ...props,
+      className: cx(
+        markdownBlock({
+          uselikec4palette
+        }),
+        className
+      ),
+      style: {
+        // @ts-expect-error
+        ["--mantine-scale"]: textScale
+      },
+      ...content
+    }
+  );
+});
+MarkdownBlock.displayName = "MarkdownBlock";
+
+export { MarkdownBlock };

package/dist/base/primitives/compound/CompoundActionButton.js

@@ -4,10 +4,10 @@ import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
-import { IconZoomScan } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function CompoundActionButton({
   data: {

package/dist/base/primitives/compound/CompoundDetailsButton.js

@@ -4,10 +4,10 @@ import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
-import { IconId } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
+import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {

package/dist/base/primitives/edge/EdgeActionButton.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ActionIcon } from '@mantine/core';
-import { IconZoomScan } from '@tabler/icons-react';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { actionBtn } from './edge.css.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

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

@@ -4,9 +4,9 @@ import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
-import { IconId } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
+import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",

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

@@ -10,5 +10,5 @@ type Data = {
     width: number;
 };
 type ElementTagsProps = NodeProps<Data>;
-export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width } }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered } }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};

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

@@ -1,15 +1,15 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { isTagColorSpecified } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Box, HStack } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { likec4tag } from '@likec4/styles/recipes';
-import { HoverCard } from '@mantine/core';
+import { useHover, useDebouncedState } from '@mantine/hooks';
+import { NodeToolbar, Position } from '@xyflow/react';
 import { deepEqual } from 'fast-equals';
-import { memo, useCallback, forwardRef } from 'react';
+import { forwardRef, memo, useEffect, useCallback } from 'react';
 import { useTagSpecification } from '../../../context/TagStylesContext.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
 import { useCurrentZoom } from '../../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
@@ -37,140 +37,131 @@ const ElementTag = forwardRef(
   }
 );
 const propsAreEqual = (prev, next) => {
-  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags);
+  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags) && (prev.data.hovered ?? false) === (next.data.hovered ?? false);
 };
-const ElementTags = memo(({ id, data: { tags, width } }) => {
+const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
+  const {
+    hovered: isTagsBarHovered,
+    ref: tagsBarRef
+  } = useHover();
+  const {
+    hovered: isTagsToolbarHovered,
+    ref: tagsToolbarRef
+  } = useHover();
+  const [isVisible, setVisible] = useDebouncedState(false, hovered ? 120 : 300);
+  useEffect(() => {
+    setVisible((visibleNow) => {
+      if (!visibleNow) {
+        return hovered && (isTagsBarHovered || isTagsToolbarHovered);
+      }
+      return hovered || isTagsBarHovered || isTagsToolbarHovered;
+    });
+  }, [isTagsBarHovered, isTagsToolbarHovered, hovered]);
   const zoom = useCurrentZoom();
   const zoomIsLargeEnough = zoom > 1.2;
-  const portalProps = useMantinePortalProps();
+  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);
-  return /* @__PURE__ */ jsxs(
-    HoverCard,
-    {
-      ...portalProps,
-      floatingStrategy: "fixed",
-      position: "bottom-start",
-      offset: {
-        alignmentAxis: Math.round(4 * zoom),
-        mainAxis: 8
-      },
-      keepMounted: false,
-      openDelay: 300,
-      closeDelay: 500,
-      children: [
-        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tagsBarRef,
+        className: cx(
+          "likec4-element-tags",
+          hstack({
+            pointerEvents: "all",
+            gap: 4,
+            alignItems: "flex-end",
+            justifyItems: "stretch",
+            position: "absolute",
+            width: "100%",
+            bottom: 0,
+            left: 0,
+            padding: 4,
+            _shapeCylinder: {
+              bottom: 5
+            },
+            _shapeStorage: {
+              bottom: 5
+            },
+            _shapeQueue: {
+              bottom: 0,
+              paddingLeft: 14
+            }
+          })
+        ),
+        onClick: stopPropagation,
+        children: tags.map((tag) => /* @__PURE__ */ jsx(
+          Box,
           {
-            className: cx(
-              "likec4-element-tags",
-              hstack({
-                pointerEvents: "all",
-                gap: 4,
-                alignItems: "flex-end",
-                justifyItems: "stretch",
-                position: "absolute",
-                width: "100%",
-                bottom: 0,
-                left: 0,
-                padding: 4,
-                _shapeCylinder: {
-                  bottom: 5
-                },
-                _shapeStorage: {
-                  bottom: 5
-                },
-                _shapeQueue: {
-                  bottom: 0,
-                  paddingLeft: 14
-                }
-              })
-            ),
-            onClick: stopPropagation,
-            children: tags.map((tag) => /* @__PURE__ */ jsx(
-              Box,
-              {
-                "data-likec4-tag": tag,
-                className: css({
-                  layerStyle: "likec4.tag",
-                  flex: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  maxWidth: 50,
-                  height: 5,
-                  _whenHovered: {
-                    height: 12,
-                    borderRadius: 4,
-                    transitionDelay: ".08s"
-                  },
-                  transition: "fast"
-                })
+            "data-likec4-tag": tag,
+            className: css({
+              layerStyle: "likec4.tag",
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              maxWidth: 50,
+              height: 5,
+              _whenHovered: {
+                height: 12,
+                borderRadius: 4,
+                transitionDelay: ".08s"
               },
-              id + "#" + tag
-            ))
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          HoverCard.Dropdown,
+              transition: "fast"
+            })
+          },
+          id + "#" + tag
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(NodeToolbar, { isVisible, align: "start", position: Position.Bottom, children: /* @__PURE__ */ jsx(
+      HStack,
+      {
+        ref: tagsToolbarRef,
+        css: {
+          gap: 4,
+          flexWrap: "wrap",
+          pb: "sm",
+          translate: "auto",
+          x: -8,
+          maxWidth
+        },
+        children: tags.map((tag) => /* @__PURE__ */ jsx(
+          ElementTag,
           {
-            p: 0,
-            w: "auto",
-            maw: maxWidth,
+            tag,
             className: css({
-              background: "transparent",
-              border: "none"
+              userSelect: "none",
+              cursor: "pointer",
+              ...zoomIsLargeEnough && {
+                fontSize: "lg",
+                borderRadius: 4,
+                px: 6
+              }
             }),
-            children: /* @__PURE__ */ jsx(ElementTagsDropdown, { tags, zoomIsLargeEnough })
-          }
-        )
-      ]
-    }
-  );
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.openSearch(`#${tag}`);
+            },
+            onMouseEnter: () => onHover(tag),
+            onMouseLeave: onLeave
+          },
+          tag
+        ))
+      }
+    ) })
+  ] });
 }, propsAreEqual);
 ElementTags.displayName = "ElementTags";
-function ElementTagsDropdown({ tags, zoomIsLargeEnough }) {
-  const diagram = useDiagram();
-  const onHover = (tag) => {
-    diagram.send({ type: "tag.highlight", tag });
-  };
-  const onLeave = useCallback(() => {
-    diagram.send({ type: "tag.unhighlight" });
-  }, []);
-  return /* @__PURE__ */ jsx(
-    HStack,
-    {
-      css: {
-        gap: 4,
-        flexWrap: "wrap",
-        pb: "sm"
-      },
-      children: tags.map((tag) => /* @__PURE__ */ jsx(
-        ElementTag,
-        {
-          tag,
-          className: css({
-            userSelect: "none",
-            cursor: "pointer",
-            ...zoomIsLargeEnough && {
-              fontSize: "lg",
-              borderRadius: 4,
-              px: 6
-            }
-          }),
-          onClick: (e) => {
-            e.stopPropagation();
-            diagram.openSearch(`#${tag}`);
-          },
-          onMouseEnter: () => onHover(tag),
-          onMouseLeave: onLeave
-        },
-        tag
-      ))
-    }
-  );
-}
 
 export { ElementTag, ElementTags };

package/dist/base/primitives/element/ElementTitle.css.js

@@ -8,7 +8,8 @@ const title = css.raw({
   color: "likec4.palette.hiContrast"
 });
 const description = css.raw({
-  flex: "0 1 auto",
+  flexGrow: "0",
+  flexShrink: "1",
   textStyle: "likec4.node.secondary",
   color: "likec4.palette.loContrast",
   textAlign: "center",
@@ -82,6 +83,8 @@ const elementTitle = sva({
       flex: "1",
       height: "fit-content",
       width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
       margin: "0 auto",
       display: "flex",
       alignItems: "center",
@@ -133,6 +136,8 @@ const elementTitle = sva({
     textContainer: {
       height: "fit-content",
       width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
       flex: "0 1 auto",
       display: "flex",
       flexDirection: "column",

package/dist/base/primitives/element/ElementTitle.d.ts

@@ -1,7 +1,8 @@
-import { DiagramNode } from '@likec4/core/types';
+import { DiagramNode, RichTextOrEmpty } from '@likec4/core/types';
 import { Simplify } from 'type-fest';
 import { NodeProps, NonOptional } from '../../types';
-type Data = Simplify<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'style'>> & {
+type Data = Simplify<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'color' | 'style'>> & {
+    description?: RichTextOrEmpty;
     icon?: string | null;
 }>;
 type ElementTitleProps = NodeProps<Data> & {

package/dist/base/primitives/element/ElementTitle.js

@@ -4,6 +4,7 @@ import { Box } from '@likec4/styles/jsx';
 import { Text } from '@mantine/core';
 import { isTruthy, isEmpty, isNumber } from 'remeda';
 import { IconRenderer } from '../../../context/IconRenderer.js';
+import { MarkdownBlock } from '../MarkdownBlock.js';
 import { nodeSizes } from './ElementNodeContainer.js';
 import { elementTitle, iconSize, elementIcon } from './ElementTitle.css.js';
 
@@ -18,7 +19,7 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
   });
   const classes = elementTitle({
     hasIcon: isTruthy(elementIcon$1),
-    hasDescription: !isEmpty(data.description ?? ""),
+    hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? "")
   });
   const size = nodeSizes(data.style).size;
@@ -41,7 +42,7 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
           /* @__PURE__ */ jsx(
             Text,
             {
-              component: "h3",
+              component: "div",
               className: cx(classes.title, "likec4-element-title"),
               lineClamp: isSmOrXs ? 2 : 3,
               children: data.title
@@ -56,12 +57,14 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
             }
           ),
           data.description && /* @__PURE__ */ jsx(
-            Text,
+            MarkdownBlock,
             {
-              component: "div",
               className: cx(classes.description, "likec4-element-description"),
-              lineClamp: isSmOrXs ? 3 : 5,
-              children: data.description
+              value: data.description,
+              uselikec4palette: true,
+              hideIfEmpty: true,
+              maxHeight: data.description.isMarkdown ? "8rem" : void 0,
+              lineClamp: isSmOrXs ? 3 : 5
             }
           )
         ] })

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

@@ -16,4 +16,5 @@ export { ElementNodeContainer } from './element/ElementNodeContainer';
 export { ElementShape } from './element/ElementShape';
 export { ElementTag, ElementTags } from './element/ElementTags';
 export { ElementTitle } from './element/ElementTitle';
+export { MarkdownBlock } from './MarkdownBlock';
 export { DefaultHandles } from './NodeHandles';

package/dist/bundle/LikeC4View.js

@@ -2,7 +2,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box, ActionIcon } from '@mantine/core';
 import { shallowEqual } from '@mantine/hooks';
-import { IconX } from '@tabler/icons-react';
 import { memo, useState } from 'react';
 import { isBoolean } from 'remeda';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
@@ -12,6 +11,7 @@ import { Overlay } from '../overlays/overlay/Overlay.js';
 import { ShadowRoot } from './ShadowRoot.js';
 import { useColorScheme, useShadowRootStyle, cssInteractive } from './styles.css.js';
 import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function LikeC4View({
   viewId,

package/dist/bundle/custom.js

@@ -0,0 +1,31 @@
+export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, viewGroupNode } from '../custom/customNodes.js';
+export { CompoundActionButton } from '../base/primitives/compound/CompoundActionButton.js';
+export { CompoundDetailsButton } from '../base/primitives/compound/CompoundDetailsButton.js';
+export { CompoundNodeContainer } from '../base/primitives/compound/CompoundNodeContainer.js';
+export { CompoundTitle } from '../base/primitives/compound/CompoundTitle.js';
+export { DefaultHandles } from '../base/primitives/NodeHandles.js';
+export { ElementActionButtons } from '../base/primitives/element/ElementActionButtons.js';
+export { ElementDetailsButton } from '../base/primitives/element/ElementDetailsButton.js';
+export { ElementNodeContainer } from '../base/primitives/element/ElementNodeContainer.js';
+export { ElementShape } from '../base/primitives/element/ElementShape.js';
+export { ElementTag, ElementTags } from '../base/primitives/element/ElementTags.js';
+export { ElementTitle } from '../base/primitives/element/ElementTitle.js';
+export { MarkdownBlock } from '../base/primitives/MarkdownBlock.js';
+export { IconOrShapeRenderer, IconRenderer, IconRendererProvider } from '../context/IconRenderer.js';
+export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
+export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';
+export { CompoundDeploymentToolbar, CompoundElementToolbar } from '../likec4diagram/custom/nodes/toolbar/CompoundToolbar.js';
+export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
+export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
+export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
+export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from '../context/DiagramFeatures.js';
+export { Overlay } from '../overlays/overlay/Overlay.js';
+export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
+export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+export { useDiagramActorRef } from '../hooks/safeContext.js';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
+export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
+export { useSetState } from '../hooks/useSetState.js';
+export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/bundle/index.js

@@ -6,6 +6,7 @@ export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 export { useEnabledFeatures } from '../context/DiagramFeatures.js';
 export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+export { useDiagramActorRef } from '../hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';

package/dist/components/ErrorFallback.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box } from '@likec4/styles/jsx';
 import { Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
-import { IconX } from '@tabler/icons-react';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/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

@@ -1,8 +1,9 @@
 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';
+import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
 const link = cva({
   base: {

package/dist/components/SearchControl.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { UnstyledButton, Group, Text } from '@mantine/core';
-import { IconSearch } from '@tabler/icons-react';
 import { isMacOs } from '@xyflow/system';
 import { placeholder, shortcut, root } from './SearchControl.css.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function SearchControl({ className, ...others }) {
   const isMac = isMacOs();

package/dist/context/DiagramFeatures.d.ts

@@ -22,8 +22,9 @@ export declare function IfEnabled({ feature, children, and, }: PropsWithChildren
     feature: FeatureName;
     and?: boolean;
 }>): import("react/jsx-runtime").JSX.Element | null;
-export declare function IfNotEnabled({ feature, children, }: PropsWithChildren<{
+export declare function IfNotEnabled({ feature, children }: PropsWithChildren<{
     feature: FeatureName;
 }>): import("react/jsx-runtime").JSX.Element | null;
-export declare function IfNotReadOnly({ children, }: PropsWithChildren): 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;
 export {};

package/dist/context/DiagramFeatures.js

@@ -90,5 +90,20 @@ function IfEnabled({
   const enabled = useEnabledFeatures()[`enable${feature}`] === true;
   return enabled && and ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
+function IfNotEnabled({ feature, children }) {
+  const notEnabled = useEnabledFeatures()[`enable${feature}`] !== true;
+  return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+function IfReadOnly({ children }) {
+  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
+  return isReadOnly ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+function IfNotReadOnly({ children }) {
+  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
+  if (isReadOnly) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
 
-export { AllDisabled, DiagramFeatures, IfEnabled, useEnabledFeatures };
+export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };

package/dist/context/IconRenderer.js

@@ -1,7 +1,12 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from '@tabler/icons-react';
 import { useContext, createContext } from 'react';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({

package/dist/context/TagStylesContext.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { isTagColorSpecified } from '@likec4/core';
 import { useMantineStyleNonce } from '@mantine/core';
 import { useDeepCompareMemo } from '@react-hookz/web';
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 import { pipe, entries, flatMap, join } from 'remeda';
 import { useLikeC4Specification } from '../likec4model/useLikeC4Model.js';