@likec4/diagram 1.47.0 → 1.49.0

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

@@ -1,28 +1,32 @@
 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 { actionBtn, actionButtons } 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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
+import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/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 variants = {
+  normal: {
+    originY: 0,
+    opacity: 0.75,
+    scale: 0.8,
+    y: 0
+  },
+  selected: {
+    originY: 0,
+    opacity: 1,
+    scale: 0.9,
+    y: 7
+  },
+  hovered: {
+    originY: 0,
+    opacity: 1,
+    scale: 1.12,
+    y: 7
   }
-});
-const actionButtons = hstack({
-  gap: "1.5",
-  justifyContent: "center",
-  alignItems: "center"
-});
+};
 function ElementActionButtons({
   selected = false,
   data: {
@@ -34,53 +38,47 @@ function ElementActionButtons({
   if (!buttons.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    Box,
+  let variant;
+  switch (true) {
+    case isHovered:
+      variant = "hovered";
+      break;
+    case selected:
+      variant = "selected";
+      break;
+    default:
+      variant = "normal";
+  }
+  return /* @__PURE__ */ jsx("div", { className: actionButtons(), children: /* @__PURE__ */ jsx(
+    m.div,
     {
-      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,
+      variants,
+      animate: variant,
+      layoutDependency: `${isHovered}-${selected}`,
+      "data-likec4-hovered": isHovered,
+      className: cx("nodrag nopan"),
+      onClick: stopPropagation,
+      children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+        ActionIcon,
         {
-          layoutRoot: true,
+          component: m.button,
+          className: actionBtn({}),
           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
+          whileTap: { scale: 1 },
+          whileHover: {
+            scale: 1.3
           },
-          layoutDependency: `${isHovered}-${selected}`,
-          "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}`
-          ))
-        }
-      )
+          tabIndex: -1,
+          onClick: button.onClick,
+          onDoubleClick: stopPropagation,
+          children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
+        },
+        `${id}-${button.key ?? index}`
+      ))
     }
-  );
+  ) });
 }
 
 export { ElementActionButtons };

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

@@ -10,9 +10,8 @@ type RequiredData = {
     description?: MarkdownOrString | null | undefined;
     icon?: string | null;
 };
-type ElementDataProps = {
+export type ElementDataProps = {
     data: RequiredData;
-    iconSize?: number;
 };
 type IconProps = {
     data: {
@@ -27,6 +26,7 @@ type SlotProps = {
     data: RequiredData;
     className?: string;
     style?: CSSProperties;
+    [key: `data-${string}`]: string;
 };
 /**
  * Renders an element title, technology, description, and icon.
@@ -37,19 +37,19 @@ type SlotProps = {
  * ```
  * or
  * ```tsx
- * <ElementData.Root>
+ * <ElementData.Root {...nodeProps} >
  *   <ElementData.Icon {...nodeProps} />
- *   <ElementData.Root>
+ *   <ElementData.Content>
  *     <ElementData.Title {...nodeProps} />
  *     <ElementData.Technology {...nodeProps} />
  *     <ElementData.Description {...nodeProps} />
- *   </ElementData.Root>
+ *   </ElementData.Content>
  * </ElementData.Root>
  * ```
  */
-export declare function ElementData({ iconSize, data }: ElementDataProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementData({ 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 Root: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & 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>>;

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

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

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

@@ -5,8 +5,35 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
+const variants = {
+  normal: {
+    originX: 0.4,
+    originY: 0.6,
+    scale: 1,
+    opacity: 0.5
+  },
+  hovered: {
+    originX: 0.4,
+    originY: 0.6,
+    scale: 1.25,
+    opacity: 0.9
+  },
+  selected: {
+    originX: 0.4,
+    originY: 0.6,
+    scale: 1.25,
+    opacity: 0.9
+  },
+  whileHover: {
+    scale: 1.4,
+    opacity: 1
+  },
+  whileTap: {
+    scale: 1.15
+  }
+};
 const container = css({
   position: "absolute",
   top: "0.5",
@@ -40,30 +67,33 @@ function ElementDetailsButton({
   icon,
   onClick
 }) {
+  let variant;
+  switch (true) {
+    case isHovered:
+      variant = "hovered";
+      break;
+    case selected:
+      variant = "selected";
+      break;
+    default:
+      variant = "normal";
+  }
   return /* @__PURE__ */ jsx(Box, { className: cx(container, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
+      className: cx(
+        "nodrag nopan",
+        actionBtn({ variant: "transparent" })
+      ),
       component: m.button,
       initial: false,
-      style: {
-        originX: 0.45,
-        originY: 0.55
-      },
-      animate: isHovered || selected ? {
-        scale: 1.2,
-        opacity: 0.8
-      } : {
-        scale: 1,
-        opacity: 0.5
-      },
-      whileHover: {
-        scale: 1.4,
-        opacity: 1
-      },
-      whileTap: { scale: 1.15 },
+      variants,
+      animate: variant,
+      whileHover: "whileHover",
+      whileTap: "whileTap",
       onClick,
       onDoubleClick: stopPropagation,
+      tabIndex: -1,
       children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
     }
   ) });

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

@@ -1,11 +1,11 @@
-import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
-import { MotionNodeLayoutOptions } from 'motion/react';
-import { CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { Color, ComputedNodeStyle, ElementShape } from '@likec4/core/types';
+import { MotionNodeLayoutOptions, MotionStyle } from 'motion/react';
 import { BaseNodePropsWithData } from '../../base/types';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 type RequiredData = {
     color: Color;
     shape: ElementShape;
-    style?: ElementStyle;
+    style?: ComputedNodeStyle;
 };
 /**
  * Top-level primitive to compose leaf nodes renderers.
@@ -15,7 +15,7 @@ export declare const ElementNodeContainer: ForwardRefExoticComponent<{
     [key: `data-${string}`]: string | undefined;
     nodeProps: BaseNodePropsWithData<RequiredData>;
     className?: string | undefined;
-    style?: CSSProperties | undefined;
+    style?: MotionStyle | undefined;
 } & MotionNodeLayoutOptions & {
     children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;

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

@@ -5,6 +5,20 @@ import { elementNode } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
 
+const variants = {
+  normal: {
+    scale: 1
+  },
+  hovered: {
+    scale: 1.05
+  },
+  selected: {
+    scale: 1.02
+  },
+  tap: {
+    scale: 0.98
+  }
+};
 const ElementNodeContainer = forwardRef(({
   nodeProps: {
     selected = false,
@@ -20,14 +34,16 @@ const ElementNodeContainer = forwardRef(({
   children,
   ...rest
 }, ref) => {
-  let scale = 1;
+  let variant;
   switch (true) {
     case isHovered:
-      scale = 1.05;
+      variant = "hovered";
       break;
     case selected:
-      scale = 1.02;
+      variant = "selected";
       break;
+    default:
+      variant = "normal";
   }
   const {
     size,
@@ -43,12 +59,11 @@ const ElementNodeContainer = forwardRef(({
         "group",
         className
       ),
+      variants,
       initial: false,
       ...selectable && {
-        animate: {
-          scale
-        },
-        whileTap: { scale: 0.98 }
+        animate: variant,
+        whileTap: "tap"
       },
       "data-likec4-hovered": isHovered,
       "data-likec4-color": data.color,
@@ -59,9 +74,8 @@ const ElementNodeContainer = forwardRef(({
       ...isDimmed !== false && {
         "data-likec4-dimmed": isDimmed
       },
-      style: {
-        ...style
-      },
+      style,
+      tabIndex: -1,
       ...rest,
       children
     }

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

@@ -1,12 +1,12 @@
 import { ComputedNodeStyle, ElementShape } from '@likec4/core/types';
-type Data = {
+type RequiredData = {
     shape: ElementShape;
     width: number;
     height: number;
     style?: ComputedNodeStyle;
 };
 type ElementShapeProps = {
-    data: Data;
+    data: RequiredData;
     width?: number | undefined;
     height?: number | undefined;
     /**

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

@@ -86,8 +86,69 @@ const PersonIcon = {
   height: 120,
   path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
 };
-function ShapeSvg({ shape, w, h }) {
+const ComponentTopLeftRect = ({ index, size }) => {
+  let width, height, offsetX, offsetY, between;
+  switch (size) {
+    case "xs":
+    case "sm": {
+      width = 40;
+      height = 18;
+      offsetX = -16;
+      offsetY = 16;
+      between = 10;
+      break;
+    }
+    case "md": {
+      width = 60;
+      height = 26;
+      offsetX = -20;
+      offsetY = 22;
+      between = 14;
+      break;
+    }
+    case "lg":
+    case "xl": {
+      width = 70;
+      height = 32;
+      offsetX = -24;
+      offsetY = 32;
+      between = 18;
+      break;
+    }
+    default: {
+      nonexhaustive(size);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: offsetX,
+      y: offsetY + (height + between) * index,
+      width,
+      height,
+      rx: 3,
+      className: "top-left-rect",
+      strokeWidth: 2
+    }
+  );
+};
+function ShapeSvg({ shape, w, h, size = "md" }) {
   switch (shape) {
+    case "component": {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: w,
+            height: h,
+            rx: 6,
+            strokeWidth: 0
+          }
+        ),
+        /* @__PURE__ */ jsx(ComponentTopLeftRect, { index: 0, size }),
+        /* @__PURE__ */ jsx(ComponentTopLeftRect, { index: 1, size })
+      ] });
+    }
     case "mobile": {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -264,23 +325,25 @@ function ElementShape({ data, width, height, showSeletionOutline = true }) {
         },
         className: elementShapeRecipe({
           shapetype: "html",
-          withBorder
+          withBorder,
+          withOutline: showSeletionOutline
         }),
         children: [
           isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
-          showSeletionOutline && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
+          /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
         ]
       }
     );
   }
   const className = elementShapeRecipe({
-    shapetype: "svg"
+    shapetype: "svg",
+    withOutline: showSeletionOutline
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h }) }),
+    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, size: data.style?.size, w, h }) }),
     /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
-      showSeletionOutline && /* @__PURE__ */ jsx(ShapeSvgOutline, { shape: data.shape, w, h }),
-      /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h })
+      /* @__PURE__ */ jsx(ShapeSvgOutline, { shape: data.shape, w, h }),
+      /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, size: data.style?.size, w, h })
     ] })
   ] });
 }

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

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