@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,84 +1,95 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-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.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
-
-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
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { cx } from "@likec4/styles/css";
+import { IconBolt } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { useId } from "@mantine/hooks";
+import * as m from "motion/react-m";
+import { actionBtn, actionButtons } from "@likec4/styles/recipes";
+//#region src/base-primitives/element/ElementActionButtons.tsx
+var variants = {
+	normal: {
+		originY: 0,
+		opacity: .75,
+		scale: .8,
+		y: 0
+	},
+	selected: {
+		originY: 0,
+		opacity: 1,
+		scale: .9,
+		y: 7
+	},
+	hovered: {
+		originY: 0,
+		opacity: 1,
+		scale: 1.12,
+		y: 7
+	}
 };
-function ElementActionButtons({
-  selected = false,
-  data: {
-    hovered: isHovered = false
-  },
-  buttons
-}) {
-  const id = useId();
-  if (!buttons.length) {
-    return null;
-  }
-  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,
-    {
-      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,
-        {
-          component: m.button,
-          className: actionBtn({}),
-          initial: false,
-          whileTap: { scale: 1 },
-          whileHover: {
-            scale: 1.3
-          },
-          tabIndex: -1,
-          onClick: button.onClick,
-          onDoubleClick: stopPropagation,
-          children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
-        },
-        `${id}-${button.key ?? index}`
-      ))
-    }
-  ) });
+/**
+* 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')
+*       },
+*     },
+*     //...
+*   ]}
+* />
+* ```
+*/
+function ElementActionButtons({ selected = false, data: { hovered: isHovered = false }, buttons }) {
+	const id = useId();
+	if (!buttons.length) return null;
+	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, {
+			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, {
+				component: m.button,
+				className: actionBtn({}),
+				initial: false,
+				whileTap: { scale: 1 },
+				whileHover: { scale: 1.3 },
+				tabIndex: -1,
+				onClick: button.onClick,
+				onDoubleClick: stopPropagation,
+				children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
+			}, `${id}-${button.key ?? index}`))
+		})
+	});
 }
-
+//#endregion
 export { ElementActionButtons };

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

@@ -1,134 +1,115 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { RichText } from '@likec4/core/types';
-import { cx } from '@likec4/styles/css';
-import { elementNodeData } from '@likec4/styles/recipes';
-import { forwardRef } from 'react';
-import { isTruthy } from 'remeda';
-import { IconRenderer } from '../../context/IconRenderer.js';
-import { useLikeC4Styles } from '../../hooks/useLikeC4Styles.js';
-import { Markdown } from '../Markdown.js';
-
-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;
+import "../../_virtual/_rolldown/runtime.js";
+import { IconRenderer } from "../../context/IconRenderer.js";
+import { useLikeC4Styles } from "../../hooks/useLikeC4Styles.js";
+import { Markdown } from "../Markdown.js";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
+import { RichText } from "@likec4/core/types";
+import { elementNodeData } from "@likec4/styles/recipes";
+//#region src/base-primitives/element/ElementData.tsx
+/**
+* Resolve the icon color based on the node's style and color.
+*
+* If the node's style icon color is not defined, returns undefined.
+* If the node's style icon color is the same as the node's color, returns the stroke color.
+* Otherwise, returns the fill color.
+*/
+var resolveIconColor = (styles, data) => {
+	const iconColor = data.style.iconColor;
+	if (!iconColor) return;
+	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
-        }
-      }
-    }
-  );
+var 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 && { "--likec4-icon-size": `${iconSize}px` },
+			...resolvedIconColor && { "--likec4-icon-color": resolvedIconColor }
+		}
+	});
 });
-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 }, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "likec4-element-title"
-      ),
-      "data-likec4-node-title": "",
-      ref,
-      children: title
-    }
-  );
+var Icon = ({ data, ...props }) => /* @__PURE__ */ jsx(IconRenderer, {
+	element: data,
+	...props
 });
-const Technology = forwardRef(({ data, children, className, ...props }, ref) => {
-  const text = data?.technology ?? children;
-  return isTruthy(text) ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "likec4-element-technology"
-      ),
-      "data-likec4-node-technology": "",
-      ref,
-      children: text
-    }
-  ) : null;
+var Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: cx(className, "likec4-element-node-content"),
+	ref
+}));
+var Title = forwardRef(({ data: { title }, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(className, "likec4-element-title"),
+		"data-likec4-node-title": "",
+		ref,
+		children: title
+	});
 });
-const Description = forwardRef(({ data: { description }, className, ...props }, ref) => {
-  if (!description) {
-    return null;
-  }
-  const desc = RichText.from(description);
-  return /* @__PURE__ */ jsx(
-    Markdown,
-    {
-      ...props,
-      className: cx(
-        className,
-        "likec4-element-description"
-      ),
-      "data-likec4-node-description": "",
-      value: desc,
-      uselikec4palette: true,
-      hideIfEmpty: true,
-      style: {
-        // Workaround for lineClamp not working with nested TABLE elements (if markdown has tables)
-        maxHeight: desc.isMarkdown ? "8rem" : void 0
-      },
-      ref
-    }
-  );
+var Technology = forwardRef(({ data, children, className, ...props }, ref) => {
+	const text = data?.technology ?? children;
+	return isTruthy(text) ? /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(className, "likec4-element-technology"),
+		"data-likec4-node-technology": "",
+		ref,
+		children: text
+	}) : null;
 });
+var Description = forwardRef(({ data: { description }, className, ...props }, ref) => {
+	if (!description) return null;
+	const desc = RichText.from(description);
+	return /* @__PURE__ */ jsx(Markdown, {
+		...props,
+		className: cx(className, "likec4-element-description"),
+		"data-likec4-node-description": "",
+		value: desc,
+		uselikec4palette: true,
+		hideIfEmpty: true,
+		style: { maxHeight: desc.isMarkdown ? "8rem" : void 0 },
+		ref
+	});
+});
+/**
+* Renders an element title, technology, description, and icon.
+*
+* @example
+* ```tsx
+* <ElementData {...nodeProps} />
+* ```
+* or
+* ```tsx
+* <ElementData.Root {...nodeProps} >
+*   <ElementData.Icon {...nodeProps} />
+*   <ElementData.Content>
+*     <ElementData.Title {...nodeProps} />
+*     <ElementData.Technology {...nodeProps} />
+*     <ElementData.Description {...nodeProps} />
+*   </ElementData.Content>
+* </ElementData.Root>
+* ```
+*/
 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 })
-    ] })
-  ] });
+	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;
@@ -136,5 +117,5 @@ ElementData.Content = Content;
 ElementData.Title = Title;
 ElementData.Technology = Technology;
 ElementData.Description = Description;
-
+//#endregion
 export { ElementData };

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

@@ -1,102 +1,82 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-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.40.0_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
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconId } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+import { actionBtn } from "@likec4/styles/recipes";
+//#region src/base-primitives/element/ElementDetailsButton.tsx
+var variants = {
+	normal: {
+		originX: .4,
+		originY: .6,
+		scale: 1,
+		opacity: .5
+	},
+	hovered: {
+		originX: .4,
+		originY: .6,
+		scale: 1.25,
+		opacity: .9
+	},
+	selected: {
+		originX: .4,
+		originY: .6,
+		scale: 1.25,
+		opacity: .9
+	},
+	whileHover: {
+		scale: 1.4,
+		opacity: 1
+	},
+	whileTap: { scale: 1.15 }
 };
-const container = css({
-  position: "absolute",
-  top: "0.5",
-  right: "0.5",
-  _shapeBrowser: {
-    right: "[5px]"
-  },
-  _shapeCylinder: {
-    top: "[14px]"
-  },
-  _shapeStorage: {
-    top: "[14px]"
-  },
-  _shapeQueue: {
-    top: "[1px]",
-    right: "3"
-    // 12px
-  },
-  _smallZoom: {
-    display: "none"
-  },
-  _print: {
-    display: "none"
-  }
+var container = css({
+	position: "absolute",
+	top: "0.5",
+	right: "0.5",
+	_shapeBrowser: { right: "[5px]" },
+	_shapeCylinder: { top: "[14px]" },
+	_shapeStorage: { top: "[14px]" },
+	_shapeQueue: {
+		top: "[1px]",
+		right: "3"
+	},
+	_smallZoom: { display: "none" },
+	_print: { display: "none" }
 });
-function ElementDetailsButton({
-  selected = false,
-  data: {
-    hovered: isHovered = false
-  },
-  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" })
-      ),
-      component: m.button,
-      initial: false,
-      variants,
-      animate: variant,
-      whileHover: "whileHover",
-      whileTap: "whileTap",
-      onClick,
-      onDoubleClick: stopPropagation,
-      tabIndex: -1,
-      children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-    }
-  ) });
+function ElementDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, onClick }) {
+	let variant;
+	switch (true) {
+		case isHovered:
+			variant = "hovered";
+			break;
+		case selected:
+			variant = "selected";
+			break;
+		default: variant = "normal";
+	}
+	return /* @__PURE__ */ jsx(Box$1, {
+		className: cx(container, "details-button"),
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
+			component: m.button,
+			initial: false,
+			variants,
+			animate: variant,
+			whileHover: "whileHover",
+			whileTap: "whileTap",
+			onClick,
+			onDoubleClick: stopPropagation,
+			tabIndex: -1,
+			children: icon ?? /* @__PURE__ */ jsx(IconId, {
+				stroke: 1.8,
+				style: { width: "75%" }
+			})
+		})
+	});
 }
-
+//#endregion
 export { ElementDetailsButton };