@likec4/diagram 1.55.1 → 1.56.0

package/dist/base/updateNodes.js

@@ -1,70 +1,51 @@
-import { getNodeDimensions } from '@xyflow/system';
-import { deepEqual, shallowEqual } from 'fast-equals';
-import { isDefined, hasSubObject, pickBy } from 'remeda';
-
-const EMPTY_OBJ = {};
+import "../_virtual/_rolldown/runtime.js";
+import { deepEqual, shallowEqual } from "fast-equals";
+import { hasSubObject, isDefined, pickBy } from "remeda";
+import { getNodeDimensions } from "@xyflow/system";
+//#region src/base/updateNodes.ts
+var EMPTY_OBJ = {};
 function _update(current, updated) {
-  if (current === updated) {
-    return current;
-  }
-  updated = updated.map((update) => {
-    const existing = current.find((n) => n.id === update.id && n.type === update.type);
-    if (!existing) {
-      return update;
-    }
-    if (existing === update) {
-      return existing;
-    }
-    const isSameData = hasSubObject(existing.data, update.data);
-    let data = isSameData ? existing.data : update.data;
-    if (!isSameData) {
-      if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) {
-        data = {
-          ...data,
-          hovered: existing.data.hovered
-        };
-      }
-      if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) {
-        data = {
-          ...data,
-          dimmed: existing.data.dimmed
-        };
-      }
-    }
-    const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-    const haveHandles = Object.hasOwn(existing, "handles") || Object.hasOwn(update, "handles");
-    const isSameHandles = !haveHandles || deepEqual(existing.handles ?? [], update.handles ?? []);
-    if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
-      return existing;
-    }
-    const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
-    return {
-      // Retain existing properties that are defined, except parentId and handles
-      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),
-      // Retain measured dimensions from existing if present
-      ..."measured" in existing && {
-        measured: {
-          width: update.width ?? update.initialWidth,
-          height: update.height ?? update.initialHeight
-        }
-      },
-      // Apply updates, omitting undefined values
-      ...pickBy(update, isDefined),
-      // Force dimensions
-      width: update.width ?? update.initialWidth,
-      height: update.height ?? update.initialHeight,
-      ...handles && { handles },
-      data
-    };
-  });
-  return shallowEqual(current, updated) ? current : updated;
+	if (current === updated) return current;
+	updated = updated.map((update) => {
+		const existing = current.find((n) => n.id === update.id && n.type === update.type);
+		if (!existing) return update;
+		if (existing === update) return existing;
+		const isSameData = hasSubObject(existing.data, update.data);
+		let data = isSameData ? existing.data : update.data;
+		if (!isSameData) {
+			if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) data = {
+				...data,
+				hovered: existing.data.hovered
+			};
+			if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) data = {
+				...data,
+				dimmed: existing.data.dimmed
+			};
+		}
+		const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
+		const haveHandles = Object.hasOwn(existing, "handles") || Object.hasOwn(update, "handles");
+		const isSameHandles = !haveHandles || deepEqual(existing.handles ?? [], update.handles ?? []);
+		if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
+		const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
+		return {
+			...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),
+			..."measured" in existing && { measured: {
+				width: update.width ?? update.initialWidth,
+				height: update.height ?? update.initialHeight
+			} },
+			...pickBy(update, isDefined),
+			width: update.width ?? update.initialWidth,
+			height: update.height ?? update.initialHeight,
+			...handles && { handles },
+			data
+		};
+	});
+	return shallowEqual(current, updated) ? current : updated;
 }
 function updateNodes(current, update) {
-  if (isDefined(update)) {
-    return _update(current, update);
-  }
-  update = current;
-  return (existing) => _update(existing, update);
+	if (isDefined(update)) return _update(current, update);
+	update = current;
+	return (existing) => _update(existing, update);
 }
-
+//#endregion
 export { updateNodes };

package/dist/base-primitives/Markdown.d.ts

@@ -29,7 +29,7 @@ export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySe
      */
     emptyText?: string;
 };
-export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "color" | "dangerouslySetInnerHTML"> & {
+export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children" | "dangerouslySetInnerHTML"> & {
     value: RichTextType;
     /**
      * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.

package/dist/base-primitives/Markdown.js

@@ -1,50 +1,35 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { markdownBlock } from '@likec4/styles/recipes';
-import { Text } from '@mantine/core';
-import { forwardRef } from 'react';
-
-const Markdown = forwardRef(({
-  value,
-  textScale = 1,
-  uselikec4palette = false,
-  hideIfEmpty = false,
-  emptyText = "no content",
-  className,
-  style,
-  fontSize,
-  ...props
-}, ref) => {
-  if (value.isEmpty && hideIfEmpty) {
-    return null;
-  }
-  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,
-    {
-      ...props,
-      ref,
-      className: cx(
-        markdownBlock({
-          uselikec4palette,
-          value: value.isMarkdown ? "markdown" : "plaintext"
-        }),
-        className
-      ),
-      style: {
-        ...style,
-        ...fontSize && {
-          "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))`
-        },
-        ...textScale !== 1 && {
-          ["--mantine-scale"]: textScale
-        }
-      },
-      ...content
-    }
-  );
+import "../_virtual/_rolldown/runtime.js";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Text } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { markdownBlock } from "@likec4/styles/recipes";
+//#region src/base-primitives/Markdown.tsx
+var Markdown = forwardRef(({ value, textScale = 1, uselikec4palette = false, hideIfEmpty = false, emptyText = "no content", className, style, fontSize, ...props }, ref) => {
+	if (value.isEmpty && hideIfEmpty) return null;
+	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$1, {
+		...props,
+		ref,
+		className: cx(markdownBlock({
+			uselikec4palette,
+			value: value.isMarkdown ? "markdown" : "plaintext"
+		}), className),
+		style: {
+			...style,
+			...fontSize && { "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))` },
+			...textScale !== 1 && { ["--mantine-scale"]: textScale }
+		},
+		...content
+	});
 });
 Markdown.displayName = "Markdown";
-
+//#endregion
 export { Markdown };

package/dist/base-primitives/NodeHandles.js

@@ -1,52 +1,42 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { nonexhaustive } from '@likec4/core';
-import { Position, Handle } from '@xyflow/react';
-
+import "../_virtual/_rolldown/runtime.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { nonexhaustive } from "@likec4/core";
+//#region src/base-primitives/NodeHandles.tsx
+/**
+* XYFlow requires handles to be defined on nodes.
+*/
 function DefaultHandles({ direction = "TB" }) {
-  let sourcePosition, targetPosition;
-  switch (direction) {
-    case "TB": {
-      sourcePosition = Position.Bottom;
-      targetPosition = Position.Top;
-      break;
-    }
-    case "BT": {
-      sourcePosition = Position.Top;
-      targetPosition = Position.Bottom;
-      break;
-    }
-    case "LR": {
-      sourcePosition = Position.Right;
-      targetPosition = Position.Left;
-      break;
-    }
-    case "RL": {
-      sourcePosition = Position.Left;
-      targetPosition = Position.Right;
-      break;
-    }
-    default: {
-      nonexhaustive(direction);
-    }
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "source",
-        position: sourcePosition,
-        className: "likec4-node-handle-center"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "target",
-        position: targetPosition,
-        className: "likec4-node-handle-center"
-      }
-    )
-  ] });
+	let sourcePosition;
+	let targetPosition;
+	switch (direction) {
+		case "TB":
+			sourcePosition = Position.Bottom;
+			targetPosition = Position.Top;
+			break;
+		case "BT":
+			sourcePosition = Position.Top;
+			targetPosition = Position.Bottom;
+			break;
+		case "LR":
+			sourcePosition = Position.Right;
+			targetPosition = Position.Left;
+			break;
+		case "RL":
+			sourcePosition = Position.Left;
+			targetPosition = Position.Right;
+			break;
+		default: nonexhaustive(direction);
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Handle, {
+		type: "source",
+		position: sourcePosition,
+		className: "likec4-node-handle-center"
+	}), /* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		position: targetPosition,
+		className: "likec4-node-handle-center"
+	})] });
 }
-
+//#endregion
 export { DefaultHandles };

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

@@ -1,72 +1,52 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-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 { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-
-const variants = {
-  normal: {
-    scale: 1,
-    x: 0,
-    y: 0
-  },
-  hovered: {
-    scale: 1.2,
-    x: -1,
-    y: -1
-  },
-  whileHover: {
-    scale: 1.4,
-    x: -3,
-    y: -1
-  },
-  whileTap: {
-    scale: 1
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { compoundActionBtn } from "./actionbtns.css.js";
+import { cx } from "@likec4/styles/css";
+import { IconZoomScan } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import * as m from "motion/react-m";
+import { actionBtn } from "@likec4/styles/recipes";
+//#region src/base-primitives/compound/CompoundActionButton.tsx
+var variants = {
+	normal: {
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	hovered: {
+		scale: 1.2,
+		x: -1,
+		y: -1
+	},
+	whileHover: {
+		scale: 1.4,
+		x: -3,
+		y: -1
+	},
+	whileTap: { scale: 1 }
 };
-function CompoundActionButton({
-  data: {
-    hovered: isHovered = false
-  },
-  icon,
-  onClick
-}) {
-  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
-  const isHoverDebounced = debounced[0] && isHovered;
-  let variant = isHoverDebounced ? "hovered" : "normal";
-  return /* @__PURE__ */ jsx(
-    m.div,
-    {
-      initial: false,
-      variants,
-      animate: variant,
-      whileHover: "whileHover",
-      whileTap: "whileTap",
-      className: "likec4-compound-navigation compound-action",
-      onClick: stopPropagation,
-      tabIndex: -1,
-      children: /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          className: cx(
-            "nodrag nopan",
-            compoundActionBtn({
-              delay: isHovered && !isHoverDebounced
-            }),
-            actionBtn({ variant: "transparent" })
-          ),
-          tabIndex: -1,
-          onClick,
-          onDoubleClick: stopPropagation,
-          children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
-        }
-      )
-    }
-  );
+function CompoundActionButton({ data: { hovered: isHovered = false }, icon, onClick }) {
+	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
+	let variant = isHoverDebounced ? "hovered" : "normal";
+	return /* @__PURE__ */ jsx(m.div, {
+		initial: false,
+		variants,
+		animate: variant,
+		whileHover: "whileHover",
+		whileTap: "whileTap",
+		className: "likec4-compound-navigation compound-action",
+		onClick: stopPropagation,
+		tabIndex: -1,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
+			tabIndex: -1,
+			onClick,
+			onDoubleClick: stopPropagation,
+			children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
+		})
+	});
 }
-
+//#endregion
 export { CompoundActionButton };

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

@@ -1,67 +1,42 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-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 { compoundActionBtn } from './actionbtns.css.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: {
-    scale: 1
-    // opacity: 0.6,
-  },
-  hovered: {
-    scale: 1.2
-    // opacity: 1,
-  },
-  whileHover: {
-    scale: 1.4
-  },
-  whileTap: {
-    scale: 1
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { compoundActionBtn } from "./actionbtns.css.js";
+import { cx } from "@likec4/styles/css";
+import { IconId } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import * as m from "motion/react-m";
+import { actionBtn } from "@likec4/styles/recipes";
+//#region src/base-primitives/compound/CompoundDetailsButton.tsx
+var variants = {
+	normal: { scale: 1 },
+	hovered: { scale: 1.2 },
+	whileHover: { scale: 1.4 },
+	whileTap: { scale: 1 }
 };
-function CompoundDetailsButton({
-  data: {
-    hovered: isHovered = false
-  },
-  icon,
-  onClick
-}) {
-  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
-  const isHoverDebounced = debounced[0] && isHovered;
-  const variant = isHoverDebounced ? "hovered" : "normal";
-  return /* @__PURE__ */ jsx(
-    m.div,
-    {
-      initial: false,
-      variants,
-      animate: variant,
-      whileHover: "whileHover",
-      whileTap: "whileTap",
-      className: "likec4-compound-details details-button",
-      tabIndex: -1,
-      children: /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          className: cx(
-            "nodrag nopan",
-            compoundActionBtn({
-              delay: isHovered && !isHoverDebounced
-            }),
-            actionBtn({ variant: "transparent" })
-          ),
-          tabIndex: -1,
-          onClick,
-          onDoubleClick: stopPropagation,
-          children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-        }
-      )
-    }
-  );
+function CompoundDetailsButton({ data: { hovered: isHovered = false }, icon, onClick }) {
+	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
+	const variant = isHoverDebounced ? "hovered" : "normal";
+	return /* @__PURE__ */ jsx(m.div, {
+		initial: false,
+		variants,
+		animate: variant,
+		whileHover: "whileHover",
+		whileTap: "whileTap",
+		className: "likec4-compound-details details-button",
+		tabIndex: -1,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
+			tabIndex: -1,
+			onClick,
+			onDoubleClick: stopPropagation,
+			children: icon ?? /* @__PURE__ */ jsx(IconId, {
+				stroke: 1.8,
+				style: { width: "75%" }
+			})
+		})
+	});
 }
-
+//#endregion
 export { CompoundDetailsButton };