@likec4/diagram 1.46.4 → 1.48.0

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

@@ -1,28 +1,12 @@
 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 { actionButtons, 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.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.0_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 actionButtons = hstack({
-  gap: "1.5",
-  justifyContent: "center",
-  alignItems: "center"
-});
 function ElementActionButtons({
   selected = false,
   data: {
@@ -34,53 +18,42 @@ function ElementActionButtons({
   if (!buttons.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    Box,
+  return /* @__PURE__ */ jsx("div", { className: actionButtons(), children: /* @__PURE__ */ jsx(
+    m.div,
     {
-      className: container,
+      layoutRoot: true,
+      initial: false,
       style: {
-        top: `calc(100% - 30px)`,
-        transform: "translateX(-50%)",
-        left: `50%`,
-        width: "auto",
-        minHeight: 30
+        originY: 0
+      },
+      animate: {
+        opacity: isHovered || selected ? 1 : 0.75,
+        scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
+        y: isHovered || selected ? 6 : 0
       },
-      children: /* @__PURE__ */ jsx(
-        m.div,
+      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,7 +5,7 @@ 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.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",
@@ -64,6 +64,7 @@ function ElementDetailsButton({
       whileTap: { scale: 1.15 },
       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 { Color, ComputedNodeStyle, ElementShape } from '@likec4/core/types';
 import { MotionNodeLayoutOptions } from 'motion/react';
 import { CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { BaseNodePropsWithData } from '../../base/types';
 type RequiredData = {
     color: Color;
     shape: ElementShape;
-    style?: ElementStyle;
+    style?: ComputedNodeStyle;
 };
 /**
  * Top-level primitive to compose leaf nodes renderers.

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

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { ensureSizes } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
+import { elementNode } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import { container } from './ElementNodeContainer.css.js';
 
 const ElementNodeContainer = forwardRef(({
   nodeProps: {
@@ -39,9 +39,8 @@ const ElementNodeContainer = forwardRef(({
     {
       ref,
       className: cx(
-        container,
+        elementNode(),
         "group",
-        "likec4-element-node",
         className
       ),
       initial: false,
@@ -63,6 +62,7 @@ const ElementNodeContainer = forwardRef(({
       style: {
         ...style
       },
+      tabIndex: -1,
       ...rest,
       children
     }

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

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
 import { elementShapeRecipe } from '@likec4/styles/recipes';
 import { roundDpr } from '../../utils/roundDpr.js';
 
-function cylinderSVGPath(diameter, height, tilt = 0.065) {
+function cylinderSVGPath(diameter, height, tilt = 0.07) {
   const radius = Math.round(diameter / 2);
   const rx = radius;
   const ry = roundDpr(tilt * radius);
@@ -21,6 +21,48 @@ function cylinderSVGPath(diameter, height, tilt = 0.065) {
     rx
   };
 }
+function docSVGPath(width, height) {
+  const waveHeight = height / 8;
+  const baseY = roundDpr(height - waveHeight / 2);
+  const amplitude = roundDpr(height / 6);
+  const radius = 6;
+  const path = `
+    M 0 ${baseY}
+    V ${radius}
+    Q 0 0 ${radius} 0
+    H ${width - radius}
+    Q ${width} 0 ${width} ${radius}
+    V ${baseY}
+    C ${roundDpr(width * 0.75)} ${baseY + amplitude}, ${roundDpr(width * 0.5)} ${baseY - amplitude}, 0 ${baseY}
+  `.replace(/\s+/g, " ").trim();
+  return {
+    path
+  };
+}
+function bucketSVGPath(width, height) {
+  const cx = width / 2;
+  const topRx = roundDpr(cx);
+  const topRy = roundDpr(Math.min(height / 8, topRx * 0.08));
+  const bottomRx = roundDpr(topRx * 0.8);
+  const bottomRy = roundDpr(topRy * 1.05);
+  const topY = topRy;
+  const bottomY = height - bottomRy;
+  const leftBottomX = cx - bottomRx;
+  const path = `
+    M ${width},${topY}
+    a ${topRx},${topRy} 0,0,0 ${-width} 0
+    L ${leftBottomX},${bottomY}
+    a ${bottomRx},${bottomRy} 0,0,0 ${bottomRx * 2} 0
+    Z
+  `.replace(/\s+/g, " ").trim();
+  return {
+    path,
+    topRx,
+    topRy,
+    bottomRx,
+    bottomRy
+  };
+}
 function queueSVGPath(width, height, tilt = 0.185) {
   const diameter = height;
   const radius = Math.round(diameter / 2);
@@ -64,6 +106,17 @@ function ShapeSvg({ shape, w, h }) {
         ] })
       ] });
     }
+    case "document": {
+      const { path } = docSVGPath(w, h);
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: path,
+          "data-likec4-fill": "fill",
+          strokeWidth: 2
+        }
+      );
+    }
     case "browser": {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -123,12 +176,39 @@ function ShapeSvg({ shape, w, h }) {
         /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
+    case "bucket": {
+      const { path, topRx, topRy } = bucketSVGPath(w, h);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: w / 2,
+            cy: topRy,
+            rx: topRx,
+            ry: topRy,
+            "data-likec4-fill": "mix-stroke",
+            strokeWidth: 2
+          }
+        )
+      ] });
+    }
     case "storage":
     case "cylinder": {
       const { path, rx, ry } = cylinderSVGPath(w, h);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: rx,
+            cy: ry,
+            ry,
+            rx: rx - 0.75,
+            "data-likec4-fill": "mix-stroke",
+            strokeWidth: 2
+          }
+        )
       ] });
     }
     default: {
@@ -139,12 +219,18 @@ function ShapeSvg({ shape, w, h }) {
 function ShapeSvgOutline({ shape, w, h }) {
   let svg;
   switch (shape) {
+    case "bucket":
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: bucketSVGPath(w + 6, h + 6).path }) });
+      break;
     case "queue":
-      svg = /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: queueSVGPath(w + 6, h + 6).path }) });
+      break;
+    case "document":
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: docSVGPath(w + 6, h + 6).path }) });
       break;
     case "storage":
     case "cylinder": {
-      svg = /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path }) });
       break;
     }
     default: {
@@ -163,26 +249,29 @@ function ShapeSvgOutline({ shape, w, h }) {
   }
   return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
-function ShapeHtml({ multiple, withOutLine }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: elementShapeRecipe({
-        shapetype: "html"
-      }),
-      children: [
-        multiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
-        withOutLine && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
-      ]
-    }
-  );
-}
 function ElementShape({ data, width, height, showSeletionOutline = true }) {
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
   const isMultiple = data.style?.multiple ?? false;
+  const borderStyle = data.style?.border ?? "none";
+  const withBorder = borderStyle !== "none";
   if (data.shape === "rectangle") {
-    return /* @__PURE__ */ jsx(ShapeHtml, { multiple: isMultiple, withOutLine: showSeletionOutline });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderStyle
+        },
+        className: elementShapeRecipe({
+          shapetype: "html",
+          withBorder
+        }),
+        children: [
+          isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
+          showSeletionOutline && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
+        ]
+      }
+    );
   }
   const className = elementShapeRecipe({
     shapetype: "svg"

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 {};