@likec4/diagram 1.32.2 → 1.34.0

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';
 

package/dist/custom/components.d.ts

@@ -1,5 +1,5 @@
-export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementTitle, } from '../base/primitives';
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementTitle, MarkdownBlock, } from '../base/primitives';
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider, } from '../context/IconRenderer';
 export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, Toolbar, ViewGroupNode, } from '../likec4diagram/custom/nodes';
-export { IfEnabled, IfNotEnabled, IfNotReadOnly, } from '../context/DiagramFeatures';
+export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, } from '../context/DiagramFeatures';
 export { Overlay, type OverlayProps, } from '../overlays/overlay/Overlay';

package/dist/custom/customNodes.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { customNode } from '../base/primitives/customNode.js';
+
+function customDiagramNode(Node) {
+  return customNode((props) => {
+    const viewModel = useLikeC4Model().view(props.data.viewId);
+    const model = viewModel.node(props.id);
+    return /* @__PURE__ */ jsx(Node, { nodeProps: props, nodeModel: model });
+  });
+}
+const elementNode = customDiagramNode;
+const deploymentNode = customDiagramNode;
+const compoundElementNode = customDiagramNode;
+const compoundDeploymentNode = customDiagramNode;
+const viewGroupNode = customDiagramNode;
+
+export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, viewGroupNode };

package/dist/custom/hooks.d.ts

@@ -1,9 +1,9 @@
 export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../state/types';
 export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
-export { type EnabledFeatures, useEnabledFeatures, } from '../context/DiagramFeatures';
+export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { useCurrentViewId, } from '../hooks/useCurrentViewId';
-export { useDiagram, useDiagramContext, } from '../hooks/useDiagram';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, } from '../hooks/useXYFlow';
+export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, } from '../hooks/useDiagram';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, type XYFlowInstance, type XYStoreApi, } from '../hooks/useXYFlow';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../likec4model/useLikeC4Model';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
 export { useSetState } from '../hooks/useSetState';

package/dist/custom/index.js

@@ -0,0 +1,31 @@
+export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, viewGroupNode } from './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/hooks/safeContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";

package/dist/hooks/useXYFlow.d.ts

@@ -1,4 +1,4 @@
-import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
+import { ReactFlowInstance, ReactFlowState, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
@@ -51,6 +51,7 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
         controlPoints: XYPosition[] | undefined | null;
     };
 }>;
+export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>;
 export declare function useXYStore<StateSlice = unknown>(selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
     getState: () => ReactFlowState<Types.Node, {

package/dist/index.d.ts

@@ -1,11 +1,9 @@
 export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout';
 export { FramerMotionConfig } from './context/FramerMotionConfig';
 export { IconRendererProvider } from './context/IconRenderer';
-export { LikeC4Diagram } from './LikeC4Diagram';
-export type { LikeC4DiagramProps } from './LikeC4Diagram';
-export { Overlay } from './overlays/overlay/Overlay';
-export { LikeC4ModelProvider } from './LikeC4ModelProvider';
+export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
+export { Overlay, type OverlayProps, } from './overlays/overlay/Overlay';
+export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
 export * from './custom/hooks';
 export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from './LikeC4Diagram.props';
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
-export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';
+export { StaticLikeC4Diagram, type StaticLikeC4DiagramProps, } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -8,6 +8,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/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -2,7 +2,6 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from '@mantine/core';
-import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from '@tabler/icons-react';
 import { memo, useCallback, Fragment as Fragment$1, forwardRef } from 'react';
 import { pipe, map, filter, isTruthy, partition } from 'remeda';
 import { Link } from '../../../components/Link.js';
@@ -11,8 +10,12 @@ import { findDiagramNode, findDiagramEdge } from '../../../state/utils.js';
 import { menuDropdown, endpoint, title, menuItemRelationship } from './RelationshipsDropdownMenu.css.js';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import IconInfoCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 import { useEnabledFeatures, IfEnabled } from '../../../context/DiagramFeatures.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
+import IconArrowRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({
@@ -192,7 +195,7 @@ const Relationship = forwardRef(({
       ] })
     ] }),
     /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
-    r.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: r.description }),
+    r.description.nonEmpty && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: r.description.text }),
     links.length > 0 && /* @__PURE__ */ jsx(
       Stack,
       {

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { hasAtLeast } from '@likec4/core';
-import { IconZoomScan, IconTransform } from '@tabler/icons-react';
 import { useMemo } from 'react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.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';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
 const ElementActions = ({

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -1,11 +1,12 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
-import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
+import { CompoundElementToolbar, CompoundDeploymentToolbar } from './toolbar/CompoundToolbar.js';
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.js';
 import { customNode } from '../../../base/primitives/customNode.js';
+import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.js';
 import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.js';
 import { DefaultHandles } from '../../../base/primitives/NodeHandles.js';
@@ -13,7 +14,6 @@ import { ElementNodeContainer } from '../../../base/primitives/element/ElementNo
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
 import { ElementTags } from '../../../base/primitives/element/ElementTags.js';
-import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.js';
 import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
 
 function ElementDetailsButtonWithHandler(props) {

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ElementShapes } from '@likec4/core';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
-import { IconSelector, IconCheck } from '@tabler/icons-react';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.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';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -2,11 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import { invariant, defaultTheme } from '@likec4/core';
 import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
-import { IconFileSymlink, IconTransform } from '@tabler/icons-react';
 import { useState } from 'react';
 import { keys } from 'remeda';
 import { useDiagram } from '../../../../hooks/useDiagram.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const {
   primary,

package/dist/likec4diagram/types.d.ts

@@ -1,4 +1,4 @@
-import { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core/types';
+import { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { OptionalKeysOf, Simplify } from 'type-fest';
 import { Base, ReactFlowEdge, ReactFlowNode } from '../base/types';
@@ -8,7 +8,8 @@ type NonOptional<T extends object> = Simplify<{
     [P in OptionalKeysOf<T>]-?: T[P] | undefined;
 }>;
 export declare namespace Types {
-    type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'position'>> & {
+    type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'position'>> & {
+        description: RichTextOrEmpty;
         /**
          * View this node belongs to
          */

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js

@@ -2,12 +2,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text, Flex, UnstyledButton } from '@mantine/core';
 import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
 import { useDebouncedCallback } from '@react-hookz/web';
-import { IconLayoutDashboard } from '@tabler/icons-react';
 import { useState, forwardRef } from 'react';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
+import IconLayoutDashboard from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
 
 const selector = (state) => ({
   viewId: state.view.id,

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,7 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core';
-import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react';
 import { m, LayoutGroup } from 'motion/react';
 import { memo } from 'react';
 import { SearchControl } from '../../../components/SearchControl.js';
@@ -17,6 +16,9 @@ import { ToggleReadonly } from './ToggleReadonly.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconFocusCentered from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+import IconMenu2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
 const ControlsDefaultLayout = ({

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { HoverCard, HoverCardTarget, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
-import { IconAlertTriangle } from '@tabler/icons-react';
 import { css } from '@likec4/styles/css';
 import { ActionIcon } from './_shared.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
   HoverCard,

package/dist/likec4diagram/ui/controls/ManualLayoutToolsButton.js

@@ -1,8 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from '@mantine/core';
-import { IconLayoutCollage, IconLayoutBoardSplit, IconLayoutAlignLeft, IconLayoutAlignCenter, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignMiddle, IconLayoutAlignBottom, IconRouteOff } from '@tabler/icons-react';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
+import IconLayoutCollage from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
 
 const Action = ({
   label,

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { AnimatePresence, m } from 'motion/react';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { ActionIcon } from './_shared.js';
+import IconChevronLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const NavigationButtons = () => {
   const diagram = useDiagram();

package/dist/likec4diagram/ui/controls/ToggleReadonly.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { IconLock, IconLockOpen2 } from '@tabler/icons-react';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
+import IconLock from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
 
 const selector = (state) => ({
   visible: state.features.enableReadOnly !== true,

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -1,21 +1,26 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { RichText } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
 import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
-import { IconMenu } from '@tabler/icons-react';
 import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { card, title, description } from './DiagramTitlePanel.css.js';
+import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
+import { MarkdownBlock } from '../../../base/primitives/MarkdownBlock.js';
 
+function selector(context) {
+  return {
+    id: context.view.id,
+    title: context.view.title ?? "untitled",
+    description: RichText.from(context.view.description),
+    links: context.view.links,
+    isNotActiveWalkthrough: context.activeWalkthrough === null
+  };
+}
 function DiagramTitlePanel() {
-  const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext((s) => ({
-    id: s.view.id,
-    title: s.view.title ?? "untitled",
-    description: s.view.description,
-    links: s.view.links,
-    isNotActiveWalkthrough: s.activeWalkthrough === null
-  }));
+  const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
@@ -111,24 +116,23 @@ function DiagramTitlePanel() {
                   }
                 )
               ] }),
-              description$1 && /* @__PURE__ */ jsx(
+              description$1.nonEmpty && /* @__PURE__ */ jsx(
                 Spoiler,
                 {
-                  maxHeight: 42,
+                  maxHeight: 60,
                   showLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
                   hideLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
                   children: /* @__PURE__ */ jsx(
-                    Text,
+                    MarkdownBlock,
                     {
-                      component: "div",
-                      size: "sm",
                       className: description,
-                      children: description$1 || "no description"
+                      textScale: 0.9,
+                      value: description$1
                     }
                   )
                 }
               ),
-              !description$1 && /* @__PURE__ */ jsx(
+              description$1.isEmpty && /* @__PURE__ */ jsx(
                 Text,
                 {
                   component: "div",

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
-import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from '@tabler/icons-react';
 import { AnimatePresence, m } from 'motion/react';
 import { memo, useState } from 'react';
 import { ceil, isNonNullish } from 'remeda';
@@ -10,6 +9,9 @@ import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 
 const ElementNotation = ({ value }) => {

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -1,12 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box, Button, Badge, ButtonGroup } from '@mantine/core';
-import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from '@tabler/icons-react';
 import { AnimatePresence, m } from 'motion/react';
 import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { parallelStateFrame, btn, buttons, container } from './DynamicViewWalkthrough.css.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
+import IconPlayerPlayFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+import IconPlayerSkipBackFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
+import IconPlayerStopFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
+import IconPlayerSkipForwardFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s) => s.width <= 750);

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -1,4 +1,4 @@
-import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, invariant } from '@likec4/core';
+import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, RichText, invariant } from '@likec4/core';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { shallowEqual, deepEqual } from 'fast-equals';
 import { pick, hasAtLeast } from 'remeda';
@@ -88,7 +88,7 @@ function viewToNodesEdge(opts) {
       id: node.id,
       title: node.title,
       technology: node.technology,
-      description: node.description,
+      description: RichText.from(node.description),
       height: node.height,
       width: node.width,
       level: node.level,

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/createReactComponent.js

@@ -0,0 +1,41 @@
+import { forwardRef, createElement } from 'react';
+import defaultAttributes from './defaultAttributes.js';
+
+/**
+ * @license @tabler/icons-react v3.31.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
+  const Component = forwardRef(
+    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes[type],
+        width: size,
+        height: size,
+        className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
+        ...type === "filled" ? {
+          fill: color
+        } : {
+          strokeWidth: stroke,
+          stroke: color
+        },
+        ...rest
+      },
+      [
+        title && createElement("title", { key: "svg-title" }, title),
+        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    )
+  );
+  Component.displayName = `${iconNamePascal}`;
+  return Component;
+};
+
+export { createReactComponent as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.js

@@ -0,0 +1,30 @@
+/**
+ * @license @tabler/icons-react v3.31.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+};
+
+export { defaultAttributes as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js

@@ -0,0 +1,13 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.31.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+var IconAlertTriangle = createReactComponent("outline", "alert-triangle", "IconAlertTriangle", [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]]);
+
+export { IconAlertTriangle as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js

@@ -0,0 +1,13 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.31.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+var IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "IconArrowDownRight", [["path", { "d": "M7 7l10 10", "key": "svg-0" }], ["path", { "d": "M17 8l0 9l-9 0", "key": "svg-1" }]]);
+
+export { IconArrowDownRight as default };