@likec4/diagram 1.40.0 → 1.42.0

package/dist/{base/primitives/MarkdownBlock.d.ts → base-primitives/Markdown.d.ts}

@@ -2,7 +2,7 @@ import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
 import { BoxProps } from '@likec4/styles/jsx';
 import { JsxStyleProps } from '@likec4/styles/types';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export type MarkdownBlockProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children'> & {
+export type MarkdownProps = 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.
@@ -18,16 +18,16 @@ export type MarkdownBlockProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'chi
      * Font size for the block
      * @default 'md'
      */
-    fontSize?: JsxStyleProps['fontSize'];
+    fontSize?: (JsxStyleProps['fontSize'] & string) | undefined;
     /**
      * If true, the component will not render anything if the value is empty.
      * @default false
      */
-    hideIfEmpty?: boolean;
+    hideIfEmpty?: boolean | undefined;
     /**
      * Text to show if the value is empty.
      * @default "no content"
      */
     emptyText?: string;
 };
-export declare const MarkdownBlock: ForwardRefExoticComponent<Omit<MarkdownBlockProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export declare const Markdown: ForwardRefExoticComponent<Omit<MarkdownProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/{base/primitives/MarkdownBlock.js → base-primitives/Markdown.js}

@@ -5,13 +5,15 @@ import { markdownBlock } from '@likec4/styles/recipes';
 import { Text } from '@mantine/core';
 import { forwardRef } from 'react';
 
-const MarkdownBlock = forwardRef(({
+const Markdown = forwardRef(({
   value,
   textScale = 1,
   uselikec4palette = false,
   hideIfEmpty = false,
   emptyText = "no content",
   className,
+  style,
+  fontSize,
   ...props
 }, ref) => {
   if (value.isEmpty && hideIfEmpty) {
@@ -31,8 +33,9 @@ const MarkdownBlock = forwardRef(({
         className
       ),
       style: {
-        ...props.fontSize && {
-          "--text-fz": `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`
+        ...style,
+        ...fontSize && {
+          "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))`
         },
         // @ts-expect-error
         ["--mantine-scale"]: textScale
@@ -41,6 +44,6 @@ const MarkdownBlock = forwardRef(({
     }
   );
 });
-MarkdownBlock.displayName = "MarkdownBlock";
+Markdown.displayName = "Markdown";
 
-export { MarkdownBlock };
+export { Markdown };

package/dist/{base/primitives → base-primitives}/NodeHandles.js

@@ -4,10 +4,17 @@ import { Handle, Position } from '@xyflow/react';
 const style = {
   top: "50%",
   left: "50%",
-  visibility: "hidden"
+  right: "unset",
+  bottom: "unset",
+  visibility: "hidden",
+  width: 5,
+  height: 5,
+  transform: "translate(-50%, -50%)"
 };
 const DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
+  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, style }),
+  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, style }),
   /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
 ] });
 

package/dist/{base/primitives → base-primitives}/compound/CompoundActionButton.d.ts

@@ -1,6 +1,6 @@
 import { Simplify } from 'type-fest';
-import { NodeProps } from '../../types';
-type CompoundActionButtonProps = Simplify<NodeProps<{}> & {
+import { BaseNodeProps } from '../../base/types';
+type CompoundActionButtonProps = Simplify<BaseNodeProps & {
     icon?: React.ReactNode;
     onClick: (e: React.MouseEvent) => void;
 }>;

package/dist/{base/primitives → base-primitives}/compound/CompoundActionButton.js

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

package/dist/{base/primitives → base-primitives}/compound/CompoundDetailsButton.d.ts

@@ -1,6 +1,6 @@
 import { Simplify } from 'type-fest';
-import { NodeProps } from '../../types';
-type CompoundDetailsButtonProps = Simplify<NodeProps<{}> & {
+import { BaseNodeProps } from '../../base/types';
+type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
     icon?: React.ReactNode;
     onClick: (e: React.MouseEvent) => void;
 }>;

package/dist/{base/primitives → base-primitives}/compound/CompoundDetailsButton.js

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

package/dist/{base/primitives → base-primitives}/compound/CompoundNodeContainer.d.ts

@@ -1,14 +1,14 @@
 import { Color, ElementStyle } from '@likec4/core/types';
 import { HTMLMotionProps } from 'motion/react';
 import { PropsWithChildren } from 'react';
-import { NodeProps } from '../../types';
+import { BaseNode, BaseNodeProps } from '../../base/types';
 export type RequiredData = {
     color: Color;
     depth: number;
     style: ElementStyle;
 };
 type CompoundNodeContainerProps = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren<{
-    nodeProps: NodeProps<RequiredData>;
+    nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
 }>;
-export declare function CompoundNodeContainer({ nodeProps: { selected: isSelected, data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/{base/primitives → base-primitives}/compound/CompoundNodeContainer.js

@@ -1,12 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { compoundNode } from '@likec4/styles/recipes';
-import { m } from 'motion/react';
+import * as m from 'motion/react-m';
 import { clamp } from 'remeda';
 
 function CompoundNodeContainer({
   nodeProps: {
-    selected: isSelected = false,
     data: {
       hovered: isHovered = false,
       dimmed: isDimmed = false,

package/dist/base-primitives/compound/CompoundTitle.d.ts

@@ -0,0 +1,13 @@
+import { Color, ComputedNodeStyle, NodeId } from '@likec4/core/types';
+type RequiredData = {
+    id: NodeId;
+    title: string;
+    color: Color;
+    style: ComputedNodeStyle;
+    icon?: string | null;
+};
+type CompoundTitleProps = {
+    data: RequiredData;
+};
+export declare function CompoundTitle({ data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/{base/primitives → base-primitives}/compound/CompoundTitle.js

@@ -1,14 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '@mantine/core';
-import { IconRenderer } from '../../../context/IconRenderer.js';
+import { IconRenderer } from '../../context/IconRenderer.js';
 
-function CompoundTitle({ id, data }) {
+function CompoundTitle({ data }) {
   const elementIcon = IconRenderer({
-    element: {
-      id,
-      title: data.title,
-      icon: data.icon
-    },
+    element: data,
     className: "likec4-compound-icon"
   });
   return /* @__PURE__ */ jsxs("div", { className: "likec4-compound-title-container", children: [

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

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '@likec4/styles/types';
+import { RecipeRuntimeFn } from '@likec4/styles';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {

package/dist/{base/primitives → base-primitives}/edge/EdgeActionButton.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
-import { stopPropagation } from '../../../utils/xyflow.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import { stopPropagation } from '../../utils/xyflow.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

package/dist/{base/primitives → base-primitives}/edge/EdgeContainer.d.ts

@@ -1,9 +1,9 @@
 import { DiagramEdge } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
-import { EdgeProps } from '../../types';
+import { BaseEdgePropsWithData } from '../../base/types';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'dir' | 'color'>>;
-type EdgeContainerProps = PropsWithChildren<EdgeProps<Data> & {
+type EdgeContainerProps = PropsWithChildren<BaseEdgePropsWithData<Data> & {
     component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;

package/dist/{base/primitives → base-primitives}/edge/EdgeLabel.d.ts

@@ -1,12 +1,12 @@
 import { DiagramEdge } from '@likec4/core/types';
 import { HTMLMotionProps } from 'motion/react';
 import { UndefinedOnPartialDeep } from 'type-fest';
-import { EdgeProps } from '../../types';
+import { BaseEdgePropsWithData } from '../../base/types';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
 type EdgeLabelProps = HTMLMotionProps<'div'> & {
     children?: React.ReactNode;
-    edgeProps: EdgeProps<Data>;
+    edgeProps: BaseEdgePropsWithData<Data>;
 };
 export declare const EdgeLabel: ForwardRefExoticComponent<Omit<EdgeLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export {};

package/dist/{base/primitives → base-primitives}/edge/EdgeLabel.js

@@ -19,7 +19,8 @@ const EdgeLabel = forwardRef(({
     selectable = false
   },
   className,
-  style,
+  style: _style,
+  // omit
   children,
   ...rest
 }, ref) => {

package/dist/{base/primitives → base-primitives}/edge/EdgeLabelContainer.d.ts

@@ -1,7 +1,7 @@
 import { DiagramEdge } from '@likec4/core/types';
 import { HTMLAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
-import { EdgeProps } from '../../types';
+import { BaseEdgePropsWithData } from '../../base/types';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'labelBBox' | 'color'>>;
 type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     /**
@@ -12,7 +12,7 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
         y?: number | undefined;
         translate?: string | undefined;
     } | undefined;
-    edgeProps: EdgeProps<Data>;
+    edgeProps: BaseEdgePropsWithData<Data>;
 };
 export declare function EdgeLabelContainer({ edgeProps: { id, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, }, labelPosition: labelXY, className, style, children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/{base/primitives → base-primitives}/edge/EdgeLabelContainer.js

@@ -3,8 +3,8 @@ import { cx } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import { useCallback } from 'react';
 import { isNumber } from 'remeda';
-import { ZIndexes } from '../../const.js';
-import { useXYStore } from '../../../hooks/useXYFlow.js';
+import { ZIndexes } from '../../base/const.js';
+import { useXYStore } from '../../hooks/useXYFlow.js';
 
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;

package/dist/{base/primitives → base-primitives}/edge/EdgePath.d.ts

@@ -1,10 +1,10 @@
 import { DiagramEdge } from '@likec4/core/types';
 import { PointerEventHandler, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
-import { EdgeProps } from '../../types';
+import { BaseEdgePropsWithData } from '../../base/types';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'line' | 'dir' | 'tail' | 'head'>>;
 type EdgePathProps = {
-    edgeProps: EdgeProps<Data>;
+    edgeProps: BaseEdgePropsWithData<Data>;
     svgPath: string;
     strokeWidth?: number;
     onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined;

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

@@ -0,0 +1,40 @@
+import { BaseNodeData } from '../../base/types';
+type ElementActionButtonsProps = {
+    selected?: boolean;
+    data: BaseNodeData;
+    buttons: ElementActionButtons.Item[];
+};
+/**
+ * Center-Bottom bar with action buttons. Intended to be used inside "leaf" nodes.
+ *
+ * @param selected - Whether the node is selected
+ * @param data - Node data
+ * @param buttons - Action buttons
+ *
+ * @example
+ * ```tsx
+ * <ElementActionButtons
+ *   {...nodeProps}
+ *   Buttons={[
+ *     {
+ *       key: 'action1',
+ *       icon: <IconZoomScan />,
+ *       onClick: (e) => {
+ *         e.stopPropagation()
+ *         console.log('action1 clicked')
+ *       },
+ *     },
+ *     //...
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace ElementActionButtons {
+    type Item = {
+        key?: string;
+        icon?: React.ReactNode;
+        onClick: (e: React.MouseEvent) => void;
+    };
+}
+export {};

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

@@ -0,0 +1,86 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { actionBtn } from '@likec4/styles/recipes';
+import { ActionIcon } from '@mantine/core';
+import { useId } from '@mantine/hooks';
+import * as m from 'motion/react-m';
+import { stopPropagation } from '../../utils/xyflow.js';
+import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
+
+const container = hstack({
+  position: "absolute",
+  zIndex: 1,
+  justifyContent: "center",
+  alignItems: "center",
+  _smallZoom: {
+    display: "none"
+  }
+});
+const actionButtons = hstack({
+  gap: "1.5",
+  justifyContent: "center",
+  alignItems: "center"
+});
+function ElementActionButtons({
+  selected = false,
+  data: {
+    hovered: isHovered = false
+  },
+  buttons
+}) {
+  const id = useId();
+  if (!buttons.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: container,
+      style: {
+        top: `calc(100% - 30px)`,
+        transform: "translateX(-50%)",
+        left: `50%`,
+        width: "auto",
+        minHeight: 30
+      },
+      children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          layoutRoot: true,
+          initial: false,
+          style: {
+            originY: 0
+          },
+          animate: {
+            opacity: isHovered || selected ? 1 : 0.75,
+            scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
+            y: isHovered || selected ? 6 : 0
+          },
+          "data-likec4-hovered": isHovered,
+          className: cx("nodrag nopan", actionButtons),
+          children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              component: m.button,
+              className: actionBtn({}),
+              initial: false,
+              whileTap: { scale: 1 },
+              whileHover: {
+                scale: 1.3
+              },
+              onClick: button.onClick,
+              onDoubleClick: stopPropagation,
+              children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
+            },
+            `${id}-${button.key ?? index}`
+          ))
+        },
+        `${id}-action-buttons`
+      )
+    }
+  );
+}
+
+export { ElementActionButtons };

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

@@ -0,0 +1,65 @@
+import { ComputedNodeStyle, NodeId } from '@likec4/core';
+import { Color, RichTextOrEmpty } from '@likec4/core/types';
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes } from 'react';
+type RequiredData = {
+    id: NodeId;
+    title: string;
+    technology?: string | null | undefined;
+    color: Color;
+    style: ComputedNodeStyle;
+    description?: RichTextOrEmpty;
+    icon?: string | null;
+};
+type ElementDataProps = {
+    data: RequiredData;
+    iconSize?: number;
+};
+type IconProps = {
+    data: {
+        id: string;
+        title: string;
+        icon?: string | null | undefined;
+    };
+    className?: string;
+    style?: CSSProperties;
+};
+type SlotProps = {
+    data: RequiredData;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Renders an element title, technology, description, and icon.
+ *
+ * @example
+ * ```tsx
+ * <ElementData {...nodeProps} />
+ * ```
+ * or
+ * ```tsx
+ * <ElementData.Root>
+ *   <ElementData.Icon {...nodeProps} />
+ *   <ElementData.Root>
+ *     <ElementData.Title {...nodeProps} />
+ *     <ElementData.Technology {...nodeProps} />
+ *     <ElementData.Description {...nodeProps} />
+ *   </ElementData.Root>
+ * </ElementData.Root>
+ * ```
+ */
+export declare function ElementData({ iconSize, data }: ElementDataProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ElementData {
+    var Root: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    var Icon: ({ data, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    var Content: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    var Title: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
+    var Technology: import("react").ForwardRefExoticComponent<((import("type-fest/source/merge-exclusive").Without<SlotProps, {
+        children?: import("react").ReactNode | undefined;
+    }> & {
+        children?: import("react").ReactNode | undefined;
+    }) | (import("type-fest/source/merge-exclusive").Without<{
+        children?: import("react").ReactNode | undefined;
+    }, SlotProps> & SlotProps)) & import("react").RefAttributes<HTMLDivElement>>;
+    var Description: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
+}
+export {};

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

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ensureSizes } 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 { IconRenderer } from '../../context/IconRenderer.js';
+import { Markdown } from '../Markdown.js';
+
+const Root = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cx(
+      className,
+      elementNodeData(),
+      "likec4-element"
+    )
+  }
+));
+const Icon = ({ data, ...props }) => /* @__PURE__ */ jsx(IconRenderer, { element: data, ...props });
+const Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    className: cx(
+      className,
+      "likec4-element-node-content"
+    ),
+    ref
+  }
+));
+const Title = forwardRef(({ data: { title, style }, className, ...props }, ref) => {
+  const { size } = ensureSizes(style);
+  const isSm = size === "sm" || size === "xs";
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      component: "div",
+      ...props,
+      className: cx(
+        className,
+        "likec4-element-title"
+      ),
+      "data-likec4-node-title": "",
+      lineClamp: isSm ? 2 : 3,
+      ref,
+      children: title
+    }
+  );
+});
+const Technology = forwardRef(({ data, children, className, ...props }, ref) => {
+  const text = data?.technology ?? children;
+  return isTruthy(text) ? /* @__PURE__ */ jsx(
+    Text,
+    {
+      component: "div",
+      ...props,
+      className: cx(
+        className,
+        "likec4-element-technology"
+      ),
+      "data-likec4-node-technology": "",
+      ref,
+      children: text
+    }
+  ) : null;
+});
+const Description = forwardRef(({ data: { description, style }, className, ...props }, ref) => {
+  if (!description?.nonEmpty) {
+    return null;
+  }
+  const { size } = ensureSizes(style);
+  const isSm = size === "sm" || size === "xs";
+  return /* @__PURE__ */ jsx(
+    Markdown,
+    {
+      ...props,
+      className: cx(
+        className,
+        "likec4-element-description"
+      ),
+      "data-likec4-node-description": "",
+      value: description,
+      uselikec4palette: true,
+      hideIfEmpty: true,
+      maxHeight: description.isMarkdown ? "8rem   " : void 0,
+      lineClamp: isSm ? 3 : 5,
+      ref
+    }
+  );
+});
+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 })
+        ] })
+      ]
+    }
+  );
+}
+ElementData.Root = Root;
+ElementData.Icon = Icon;
+ElementData.Content = Content;
+ElementData.Title = Title;
+ElementData.Technology = Technology;
+ElementData.Description = Description;
+
+export { ElementData };

package/dist/{base/primitives → base-primitives}/element/ElementDetailsButton.d.ts

@@ -1,5 +1,7 @@
-import { NodeProps } from '../../types';
-type ElementDetailsButtonProps = NodeProps & {
+import { BaseNodeData } from '../../base/types';
+type ElementDetailsButtonProps = {
+    selected?: boolean;
+    data: BaseNodeData;
     icon?: React.ReactNode;
     onClick: (e: React.MouseEvent) => void;
 };

package/dist/{base/primitives → base-primitives}/element/ElementDetailsButton.js

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