@likec4/diagram 1.36.1 → 1.37.0

package/dist/LikeC4Diagram.props.d.ts

@@ -6,7 +6,7 @@ import { ControlsCustomLayout } from './context/ControlsCustomLayout';
 import { CustomNodes } from './custom/customNodes';
 export type { CustomNodes, WhereOperator };
 export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>;
-type ElementIconRendererProps = {
+export type ElementIconRendererProps = {
     node: {
         id: string;
         title: string;
@@ -15,9 +15,9 @@ type ElementIconRendererProps = {
     className?: string;
 };
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
-export type OnNavigateTo<A extends Any> = (to: aux.ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
-export type OnNodeClick<A extends Any> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
-export type OnEdgeClick<A extends Any> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
+export type OnNavigateTo<A extends Any = Any> = (to: aux.ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
+export type OnNodeClick<A extends Any = Any> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
+export type OnEdgeClick<A extends Any = Any> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
 /**
  * On pane/canvas click (not on any node or edge)
  */
@@ -49,7 +49,7 @@ export type ViewPadding = PaddingWithUnit | {
     x?: PaddingWithUnit;
     y?: PaddingWithUnit;
 };
-export interface LikeC4DiagramProperties<A extends aux.Any> {
+export interface LikeC4DiagramProperties<A extends Any = Any> {
     view: LayoutedView<A>;
     className?: string | undefined;
     /**

package/dist/LikeC4Styles.js

@@ -1,7 +1,8 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ThemeColors, defaultTheme } from '@likec4/core';
 import { useMantineStyleNonce } from '@mantine/core';
 import { toRgba, mix, toHex, scale } from 'khroma';
+import { memo } from 'react';
 import { pipe, entries, map, join, range } from 'remeda';
 import globalsCss from './globals.css.js';
 import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
@@ -74,21 +75,22 @@ function generateCustomColorStyles(customColors) {
 }
 function LikeC4Styles() {
   const nonce = useMantineStyleNonce()?.();
-  const customColors = useLikeC4Specification().customColors;
+  const { customColors } = useLikeC4Specification();
   const customColorsStyles = customColors ? generateCustomColorStyles(customColors) : "";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-global": true, dangerouslySetInnerHTML: { __html: globalsCss }, nonce }),
-    /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-colors": true, dangerouslySetInnerHTML: { __html: builtInColors }, nonce }),
-    customColorsStyles && /* @__PURE__ */ jsx(
-      "style",
-      {
-        type: "text/css",
-        "data-likec4-custom-colors": true,
-        dangerouslySetInnerHTML: { __html: customColorsStyles },
-        nonce
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(MemoizedStyles, { nonce, customColorsStyles, builtInColors });
 }
+const MemoizedStyles = memo(({ nonce, customColorsStyles, builtInColors: builtInColors2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-global": true, dangerouslySetInnerHTML: { __html: globalsCss }, nonce }),
+  /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-colors": true, dangerouslySetInnerHTML: { __html: builtInColors2 }, nonce }),
+  customColorsStyles && /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      "data-likec4-custom-colors": true,
+      dangerouslySetInnerHTML: { __html: customColorsStyles },
+      nonce
+    }
+  )
+] }));
 
 export { LikeC4Styles };

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { Any, UnknownLayouted } from '@likec4/core/types';
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'where'>;
-export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/StaticLikeC4Diagram.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 
 function StaticLikeC4Diagram({
@@ -8,6 +9,7 @@ function StaticLikeC4Diagram({
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
   background = "transparent",
+  className,
   ...rest
 }) {
   return /* @__PURE__ */ jsx(
@@ -15,6 +17,7 @@ function StaticLikeC4Diagram({
     {
       view,
       readonly: true,
+      className: cx(className, "likec4-static-view"),
       fitView,
       fitViewPadding,
       pannable: false,

package/dist/base/BaseXYFlow.d.ts

@@ -12,4 +12,4 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
-export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,37 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx, cva } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
 import { Fragment } from 'react';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
+import { roundDpr } from '../utils/roundDpr.js';
 import { stopPropagation } from '../utils/xyflow.js';
 import { Background } from './Background.js';
 import { MinZoom, MaxZoom } from './const.js';
 import { setHovered } from './types.Base.js';
 
-const cssReactFlow = cva({
-  base: {
-    "& .react-flow__pane": {
-      WebkitUserSelect: "none"
-    },
-    "& .react-flow__attribution": {
-      display: "none"
-    }
-  },
-  variants: {
-    transparent: {
-      true: {
-        background: "transparent !important",
-        ["--xy-background-color"]: "transparent !important"
-      },
-      false: {
-        ["--xy-background-color"]: "{colors.likec4.background}",
-        ["--xy-background-pattern-color"]: "{colors.likec4.background.pattern}"
-      }
-    }
-  }
-});
 const BaseXYFlow = ({
   nodes,
   edges,
@@ -50,6 +29,10 @@ const BaseXYFlow = ({
   zoomOnDoubleClick = false,
   onViewportResize,
   onMoveEnd,
+  onNodeMouseEnter,
+  onNodeMouseLeave,
+  onEdgeMouseEnter,
+  onEdgeMouseLeave,
   ...props
 }) => {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
@@ -62,9 +45,7 @@ const BaseXYFlow = ({
       nodes,
       edges,
       className: cx(
-        cssReactFlow({
-          transparent: background === "transparent"
-        }),
+        background === "transparent" && "bg-transparent",
         className
       ),
       ...isZoomTooSmall && {
@@ -89,6 +70,7 @@ const BaseXYFlow = ({
       defaultMarkerColor: "var(--xy-edge-stroke)",
       noDragClassName: "nodrag",
       noPanClassName: "nopan",
+      noWheelClassName: "nowheel",
       panOnScroll: pannable,
       panOnDrag: pannable,
       ...!pannable && {
@@ -107,13 +89,17 @@ const BaseXYFlow = ({
       onNodesChange,
       onEdgesChange,
       onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
-        const roundedX = Math.round(x), roundedY = Math.round(y);
+        const roundedX = roundDpr(x), roundedY = roundDpr(y);
         if (x !== roundedX || y !== roundedY) {
           xystore.setState({ transform: [roundedX, roundedY, zoom] });
         }
         onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom });
       }),
       onNodeMouseEnter: useCallbackRef((_event, node) => {
+        if (onNodeMouseEnter) {
+          onNodeMouseEnter(_event, node);
+          return;
+        }
         if (!node.data.hovered) {
           onNodesChange([{
             id: node.id,
@@ -123,6 +109,10 @@ const BaseXYFlow = ({
         }
       }),
       onNodeMouseLeave: useCallbackRef((_event, node) => {
+        if (onNodeMouseLeave) {
+          onNodeMouseLeave(_event, node);
+          return;
+        }
         if (node.data.hovered) {
           onNodesChange([{
             id: node.id,
@@ -132,6 +122,10 @@ const BaseXYFlow = ({
         }
       }),
       onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+        if (onEdgeMouseEnter) {
+          onEdgeMouseEnter(_event, edge);
+          return;
+        }
         if (!edge.data.hovered) {
           onEdgesChange([{
             id: edge.id,
@@ -141,6 +135,10 @@ const BaseXYFlow = ({
         }
       }),
       onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+        if (onEdgeMouseLeave) {
+          onEdgeMouseLeave(_event, edge);
+          return;
+        }
         if (edge.data.hovered) {
           onEdgesChange([{
             id: edge.id,

package/dist/base/const.d.ts

@@ -1,8 +1,8 @@
 export declare const ZIndexes: {
-    readonly Compound: 0;
-    readonly Edge: 2;
-    readonly Element: 2;
-    readonly Max: 8;
+    readonly Compound: 1;
+    readonly Edge: 20;
+    readonly Element: 20;
+    readonly Max: 30;
 };
 export declare const MinZoom = 0.05;
 export declare const MaxZoom = 3;

package/dist/base/const.js

@@ -1,8 +1,9 @@
 const ZIndexes = {
-  Compound: 0,
-  Edge: 2,
-  Element: 2,
-  Max: 8
+  Compound: 1,
+  // XYFlow increments zIndexes of compounds
+  Edge: 20,
+  Element: 20,
+  Max: 30
 };
 const MinZoom = 0.05;
 const MaxZoom = 3;

package/dist/base/primitives/MarkdownBlock.js

@@ -17,7 +17,7 @@ const MarkdownBlock = forwardRef(({
   if (value.isEmpty && hideIfEmpty) {
     return null;
   }
-  const content = value.nonEmpty ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", style: { userSelect: "none" }, children: emptyText }) };
+  const content = value.nonEmpty ? value.isMarkdown ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx("p", { children: value.text }) } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", style: { userSelect: "none" }, children: emptyText }) };
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -30,6 +30,9 @@ const MarkdownBlock = forwardRef(({
         className
       ),
       style: {
+        ...props.fontSize && {
+          "--text-fz": `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`
+        },
         // @ts-expect-error
         ["--mantine-scale"]: textScale
       },

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

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
+import { cx } from '@likec4/styles/css';
 import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
@@ -19,49 +18,35 @@ function CompoundActionButton({
   const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
   const isHoverDebounced = debounced[0] && isHovered;
   return /* @__PURE__ */ jsx(
-    Box,
+    m.div,
     {
-      className: cx(
-        css({
-          position: "absolute",
-          top: "[5px]",
-          left: "[4px]",
-          _smallZoom: {
-            display: "none"
-          }
-        }),
-        "compound-action"
-      ),
+      initial: false,
+      animate: {
+        scale: isHoverDebounced ? 1.2 : 1,
+        x: isHoverDebounced ? -1 : 0,
+        y: isHoverDebounced ? -1 : 0
+      },
+      whileHover: {
+        scale: 1.4,
+        x: -3,
+        y: -1
+      },
+      className: "likec4-compound-navigation compound-action",
+      whileTap: { scale: 1 },
+      onClick: stopPropagation,
       children: /* @__PURE__ */ jsx(
-        m.div,
+        ActionIcon,
         {
-          initial: false,
-          animate: {
-            scale: isHoverDebounced ? 1.2 : 1,
-            x: isHoverDebounced ? -1 : 0,
-            y: isHoverDebounced ? -1 : 0
-          },
-          whileHover: {
-            scale: 1.4,
-            x: -2,
-            y: -2
-          },
-          whileTap: { scale: 1 },
-          children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              className: cx(
-                "nodrag nopan",
-                compoundActionBtn({
-                  delay: isHovered && !isHoverDebounced
-                }),
-                actionBtn()
-              ),
-              onClick,
-              onDoubleClick: stopPropagation,
-              children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
-            }
-          )
+          className: cx(
+            "nodrag nopan",
+            compoundActionBtn({
+              delay: isHovered && !isHoverDebounced
+            }),
+            actionBtn({ variant: "transparent" })
+          ),
+          onClick,
+          onDoubleClick: stopPropagation,
+          children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
         }
       )
     }

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

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
+import { cx } from '@likec4/styles/css';
 import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
@@ -19,55 +18,31 @@ function CompoundDetailsButton({
   const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
   const isHoverDebounced = debounced[0] && isHovered;
   return /* @__PURE__ */ jsx(
-    Box,
+    m.div,
     {
-      className: cx(
-        css({
-          position: "absolute",
-          top: "0.5",
-          right: "0.5",
-          _smallZoom: {
-            display: "none"
-          }
-        }),
-        "details-button"
-      ),
-      onClick: stopPropagation,
+      initial: false,
+      animate: {
+        scale: isHoverDebounced ? 1.2 : 1
+        // opacity: isHoverDebounced ? 1 : 0.6,
+      },
+      whileHover: {
+        scale: 1.4
+      },
+      whileTap: { scale: 1 },
+      className: "likec4-compound-details details-button",
       children: /* @__PURE__ */ jsx(
-        m.div,
+        ActionIcon,
         {
-          initial: false,
-          animate: {
-            scale: isHoverDebounced ? 1.2 : 1,
-            opacity: isHoverDebounced ? 1 : 0.6
-          },
-          whileHover: {
-            scale: 1.4
-          },
-          whileTap: { scale: 1 },
-          children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              className: cx(
-                "nodrag nopan",
-                compoundActionBtn({
-                  delay: isHovered && !isHoverDebounced
-                }),
-                css({
-                  _whenHovered: {
-                    opacity: 0.75
-                  },
-                  _hover: {
-                    opacity: 1
-                  }
-                }),
-                actionBtn({ variant: "transparent" })
-              ),
-              onClick,
-              onDoubleClick: stopPropagation,
-              children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-            }
-          )
+          className: cx(
+            "nodrag nopan",
+            compoundActionBtn({
+              delay: isHovered && !isHoverDebounced
+            }),
+            actionBtn({ variant: "transparent" })
+          ),
+          onClick,
+          onDoubleClick: stopPropagation,
+          children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
         }
       )
     }

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

@@ -1,9 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
+import { compoundNode } from '@likec4/styles/recipes';
 import { m } from 'motion/react';
-import { isNumber, clamp } from 'remeda';
-import { compound, borderOpacityPercent, borderRadius, borderWidth, compoundOpacity } from './CompoundNodeContainer.css.js';
-import { useIsReducedGraphics } from '../../../context/ReduceGraphics.js';
+import { clamp } from 'remeda';
 
 function CompoundNodeContainer({
   nodeProps: {
@@ -19,78 +18,47 @@ function CompoundNodeContainer({
   style,
   ...rest
 }) {
-  const isReducedGraphics = useIsReducedGraphics();
-  const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 99;
-  let opacity = clamp((data.style.opacity ?? 100) / 100, {
+  let opacity = clamp(data.style.opacity ?? 100, {
     min: 0,
-    max: 1
+    max: 100
   });
-  if (isTransparent && isHovered && !isReducedGraphics) {
-    opacity = Math.min(opacity + 0.08, 1);
-  }
+  const isTransparent = opacity < 99;
   const MIN_OPACITY = 65;
-  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * opacity, {
+  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
     min: 0,
     max: 100 - MIN_OPACITY
   });
-  const classes = compound({
-    isTransparent
+  const compoundClass = compoundNode({
+    isTransparent,
+    inverseColor: opacity < 60,
+    borderStyle: data.style.border ?? (isTransparent ? "dashed" : "none")
   });
   const depth = clamp(data.depth ?? 1, {
     min: 1,
     max: 5
   });
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     m.div,
     {
       className: cx(
-        classes.root,
-        "likec4-compound-node",
+        compoundClass,
         className
       ),
       initial: false,
       "data-likec4-hovered": isHovered,
       "data-likec4-color": data.color,
       "data-compound-depth": depth,
-      ...isTransparent && {
-        "data-compound-transparent": true,
-        "data-compound-title-inverse": opacity < 0.5
-      },
       ...isDimmed !== false && {
         "data-likec4-dimmed": isDimmed
       },
       style: {
         ...style,
         // @ts-expect-error
-        [compoundOpacity.var]: opacity,
-        [borderWidth.var]: `3px`,
-        [borderRadius.var]: `6px`,
-        [borderOpacityPercent.var]: `${borderOpacity}%`
+        ["--_border-transparency"]: `${borderOpacity}%`,
+        ["--_compound-transparency"]: `${opacity}%`
       },
       ...rest,
-      children: [
-        isTransparent && data.style.border !== "none" && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classes.compoundBorder,
-            style: {
-              borderStyle: data.style.border ?? "dashed"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx("svg", { className: classes.indicatorSvg, children: /* @__PURE__ */ jsx(
-          "rect",
-          {
-            className: classes.indicatorRect,
-            x: 0,
-            y: 0,
-            width: "100%",
-            height: "100%",
-            rx: 6
-          }
-        ) }),
-        children
-      ]
+      children
     }
   );
 }

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

@@ -1,73 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
 import { Text } from '@mantine/core';
 import { IconRenderer } from '../../../context/IconRenderer.js';
 
-const titleContainer = css({
-  position: "absolute",
-  display: "flex",
-  alignItems: "center",
-  gap: "1.5",
-  // 6px
-  left: "[14px]",
-  top: "[4px]",
-  right: "[30px]",
-  width: "auto",
-  minHeight: "30px",
-  [`:where(.react-flow__node.draggable) &`]: {
-    pointerEvents: "all",
-    cursor: "grab"
-  },
-  [`.likec4-compound-node:has(.compound-action) &`]: {
-    paddingLeft: "[22px]"
-  }
-});
-const titleText = css({
-  flex: "1",
-  fontFamily: "likec4.compound",
-  fontWeight: 600,
-  fontSize: "15px",
-  textTransform: "uppercase",
-  letterSpacing: "0.2px",
-  color: "var(--likec4-palette-loContrast)",
-  "[data-compound-title-inverse] &": {
-    color: {
-      base: "[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]",
-      _light: "var(--likec4-palette-stroke)"
-    }
-  }
-});
-const iconSize = "20px";
-const cssIcon = css({
-  flex: `0 0 ${iconSize}`,
-  height: `${iconSize}`,
-  width: `${iconSize}`,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  mixBlendMode: {
-    base: "hard-light",
-    _reduceGraphicsOnPan: "normal"
-  },
-  [`& svg, & img`]: {
-    width: "100%",
-    height: "auto",
-    maxHeight: "100%",
-    pointerEvents: "none",
-    filter: {
-      base: [
-        "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
-        "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
-        "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
-      ],
-      _reduceGraphicsOnPan: "none"
-    }
-  },
-  [`& img`]: {
-    objectFit: "contain"
-  }
-});
 function CompoundTitle({ id, data }) {
   const elementIcon = IconRenderer({
     element: {
@@ -75,21 +9,12 @@ function CompoundTitle({ id, data }) {
       title: data.title,
       icon: data.icon
     },
-    className: cssIcon
+    className: "likec4-compound-icon"
   });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: cx(
-        titleContainer,
-        "likec4-compound-title"
-      ),
-      children: [
-        elementIcon,
-        /* @__PURE__ */ jsx(Text, { className: titleText, truncate: "end", children: data.title })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "likec4-compound-title-container", children: [
+    elementIcon,
+    /* @__PURE__ */ jsx(Text, { component: "h3", className: "likec4-compound-title", truncate: "end", children: data.title })
+  ] });
 }
 
 export { CompoundTitle };