@likec4/diagram 1.60.0 → 1.61.0

package/dist/ReactLikeC4.mjs

@@ -1,20 +1,22 @@
 import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { ErrorMessage, ViewNotFound } from "./components/ViewNotFound.mjs";
+import { customizable } from "./customization/customizable.mjs";
 import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
-import { pickViewBounds } from "./utils/view-bounds.mjs";
 import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
-import { ErrorMessage, ViewNotFound } from "./components/ViewNotFound.mjs";
 import { ShadowRoot } from "./shadowroot/ShadowRoot.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
 import { cx } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/ReactLikeC4.tsx
+// src/ReactLikeC4.tsx
 /**
 * Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
 * But provides more control over the diagram
 *
 * Component is wrapped in ShadowRoot to isolate styles.
 */
-function ReactLikeC4({ viewId, layoutType: initialLayoutType = "manual", className, colorScheme, injectFontCss = true, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }) {
+const ReactLikeC4 = customizable("ReactLikeC4")((properties) => {
+	let { viewId, layoutType = "manual", className, colorScheme, injectFontCss = true, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props } = properties;
 	const likec4model = useOptionalLikeC4Model();
 	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
 	const viewModel = likec4model.findView(viewId);
@@ -24,7 +26,7 @@ function ReactLikeC4({ viewId, layoutType: initialLayoutType = "manual", classNa
 		viewId,
 		"\" is not layouted. Make sure you have LikeC4ModelProvider with layouted model."
 	] });
-	const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
+	const view = layoutType !== "auto" ? viewModel.$layouted : viewModel.$view;
 	const bounds = pickViewBounds(view, props.dynamicViewVariant);
 	const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
 	return /* @__PURE__ */ jsx(ShadowRoot, {
@@ -41,7 +43,6 @@ function ReactLikeC4({ viewId, layoutType: initialLayoutType = "manual", classNa
 			...props
 		})
 	});
-}
+});
 
-//#endregion
 export { ReactLikeC4 };

package/dist/StaticLikeC4Diagram.d.mts

@@ -2,7 +2,6 @@ import { __name } from "./_virtual/_rolldown/runtime.mjs";
 import { LikeC4DiagramProperties } from "./LikeC4Diagram.props.mjs";
 import { JSX } from "react/jsx-runtime";
 import { Any, UnknownLayouted } from "@likec4/core/types";
-//#region src/StaticLikeC4Diagram.d.ts
 export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'relationshipBrowserScope' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'initialZoom' | 'maxZoom' | 'minZoom' | 'renderIcon' | 'renderNodes' | 'dynamicViewVariant' | 'where'>;
 /**
  * StaticLikeC4Diagram is a component that renders a LikeC4 diagram in a static way.
@@ -10,5 +9,4 @@ export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperti
  *
  * @internal
  */
-export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): JSX.Element;
-//#endregion
+export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): JSX.Element;

package/dist/StaticLikeC4Diagram.mjs

@@ -3,7 +3,7 @@ import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
 import { cx } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/StaticLikeC4Diagram.tsx
+// src/StaticLikeC4Diagram.tsx
 /**
 * StaticLikeC4Diagram is a component that renders a LikeC4 diagram in a static way.
 * (Export/Embed)
@@ -36,5 +36,4 @@ function StaticLikeC4Diagram({ view, fitView = true, fitViewPadding = "8px", ena
 	});
 }
 
-//#endregion
 export { StaticLikeC4Diagram };

package/dist/_virtual/_rolldown/runtime.mjs

@@ -1,4 +1,4 @@
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
 	value,
@@ -18,5 +18,4 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 
-//#endregion
 export { __exportAll, __name };

package/dist/base/Background.mjs

@@ -5,7 +5,7 @@ import { Background, BackgroundVariant } from "@xyflow/react";
 import { deepEqual } from "fast-equals";
 import { nonexhaustive } from "@likec4/core";
 
-//#region src/base/Background.tsx
+// src/base/Background.tsx
 function literalToEnum(value) {
 	switch (value) {
 		case "dots": return BackgroundVariant.Dots;
@@ -28,5 +28,4 @@ const Background$1 = memo(({ background }) => {
 }, compareProps);
 Background$1.displayName = "Background";
 
-//#endregion
 export { Background$1 as Background };

package/dist/base/Base.d.mts

@@ -1,5 +1,4 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-//#region src/base/Base.d.ts
 type WithDimmed = {
   data: {
     dimmed?: Base.Dimmed;
@@ -27,4 +26,4 @@ export declare const Base: {
 export declare namespace Base {
   type Dimmed = 'immediate' | boolean;
 }
-//#endregion
+export {};

package/dist/base/Base.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { deepEqual } from "fast-equals";
 import { entries } from "remeda";
 
-//#region src/base/Base.ts
+// src/base/Base.ts
 const mergeData = (v, data) => Object.assign({}, v, { data: Object.assign({}, v.data, data) });
 const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : mergeData(v, { dimmed });
 function setDimmed(arg1, arg2) {
@@ -32,5 +32,4 @@ const Base = {
 	setData
 };
 
-//#endregion
 export { Base, hasSubObject$1 as hasSubObject };

package/dist/base/BaseXYFlow.mjs

@@ -1,21 +1,24 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { MaxZoom, MinZoom } from "./const.mjs";
-import { Background as Background$1 } from "./Background.mjs";
 import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.mjs";
 import { useIsZoomTooSmall, useXYFlow, useXYStoreApi } from "../hooks/useXYFlow.mjs";
 import { roundDpr } from "../utils/roundDpr.mjs";
 import { stopPropagation } from "../utils/xyflow.mjs";
+import { Background as Background$1 } from "./Background.mjs";
 import { Base } from "./Base.mjs";
+import { MaxZoom, MinZoom } from "./const.mjs";
 import { getKeyboardZoomAction } from "./keyboardZoom.mjs";
 import { cx } from "@likec4/styles/css";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Controls, ReactFlow, useStore } from "@xyflow/react";
+import { ReactFlow, useStore } from "@xyflow/react";
+import { isEmptyish } from "remeda";
 import { useMantineColorScheme } from "@mantine/core";
+import { defaultAriaLabelConfig } from "@xyflow/system";
 
-//#region src/base/BaseXYFlow.tsx
+// src/base/BaseXYFlow.tsx
 const likec4AriaLabelConfig = {
+	...defaultAriaLabelConfig,
 	"node.a11yDescription.default": "Press Enter or Space to select this node and reveal its actions.",
 	"node.a11yDescription.keyboardDisabled": "Keyboard activation is disabled.",
 	"edge.a11yDescription.default": "Press Enter or Space to select this relationship and reveal its actions."
@@ -41,7 +44,7 @@ function activateFocusedElement(event) {
 		view
 	}));
 }
-function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable = true, zoomable = true, nodesSelectable = true, nodesDraggable = false, background = "dots", children, colorMode, fitViewPadding = 0, zoomOnDoubleClick = false, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable = nodesDraggable || nodesSelectable, edgesFocusable = false, showControls = false, minZoom = MinZoom, maxZoom = 3, ...props }) {
+function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background = "dots", children, colorMode, fitViewPadding = 0, zoomOnDoubleClick = false, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable = nodesDraggable || nodesSelectable, edgesFocusable = false, showControls = false, minZoom = MinZoom, maxZoom = 3, ...props }) {
 	const fitViewOptions = useMemo(() => ({
 		minZoom,
 		maxZoom: Math.min(maxZoom, 1),
@@ -92,7 +95,7 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 		minZoom: zoomable ? minZoom : 1,
 		fitViewOptions,
 		preventScrolling: zoomable || pannable,
-		defaultMarkerColor: "var(--xy-edge-stroke)",
+		defaultMarkerColor: null,
 		noDragClassName: "nodrag",
 		noPanClassName: "nopan",
 		noWheelClassName: "nowheel",
@@ -106,13 +109,13 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 		nodesFocusable,
 		edgesFocusable,
 		nodesDraggable,
-		ariaLabelConfig: {
+		ariaLabelConfig: isEmptyish(ariaLabelConfig) ? likec4AriaLabelConfig : {
 			...likec4AriaLabelConfig,
 			...ariaLabelConfig
 		},
 		nodeDragThreshold: 4,
-		nodeClickDistance: 3,
-		paneClickDistance: 3,
+		nodeClickDistance: 2,
+		paneClickDistance: 2,
 		elevateNodesOnSelect: false,
 		selectNodesOnDrag: false,
 		onNodesChange,
@@ -205,5 +208,4 @@ const ViewportResizeHanlder = ({ onViewportResize }) => {
 	return null;
 };
 
-//#endregion
 export { BaseXYFlow };

package/dist/base/const.d.mts

@@ -1,5 +1,3 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-//#region src/base/const.d.ts
 export declare const MinZoom = 0.05;
-export declare const MaxZoom = 3;
-//#endregion
+export declare const MaxZoom = 3;

package/dist/base/const.mjs

@@ -1,4 +1,4 @@
-//#region src/base/const.ts
+// src/base/const.ts
 const ZIndexes = {
 	Compound: 1,
 	Edge: 20,
@@ -19,5 +19,4 @@ const FitViewPaddings = {
 };
 const IS_SERVER = typeof window === "undefined";
 
-//#endregion
 export { FitViewPaddings, IS_SERVER, MaxZoom, MinZoom, ZIndexes };

package/dist/base/keyboardZoom.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 
-//#region src/base/keyboardZoom.ts
+// src/base/keyboardZoom.ts
 function isEditableKeyboardTarget(target) {
 	if (!(target instanceof HTMLElement)) return false;
 	const tagName = target.tagName.toLowerCase();
@@ -18,5 +18,4 @@ function getKeyboardZoomAction(event) {
 	}
 }
 
-//#endregion
 export { getKeyboardZoomAction, isEditableKeyboardTarget };

package/dist/base/types.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { Base } from "./Base.mjs";
 import { Edge, EdgeProps, Node, NodeProps } from "@xyflow/react";
 import { OptionalKeysOf, SetRequired, Simplify } from "type-fest";
-//#region src/base/types.d.ts
 export type BaseNodeData = {
   /**
    * Whether the cursor is hovering over the node
@@ -29,7 +28,7 @@ export type BaseEdgeData = {
    */
   dimmed?: Base.Dimmed;
 };
-export type BaseNode<Data extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string> = SetRequired<Node<Data & BaseNodeData, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
+export type BaseNode<Data extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string> = Simplify<SetRequired<Node<Data & BaseNodeData, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>>;
 export interface BaseEdge<Data extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string = string> extends SetRequired<Edge<Data & BaseEdgeData, EdgeType>, 'type' | 'data'> {}
 /**
  * ReactFlow Base Node properties with BaseNodeData at least
@@ -58,5 +57,4 @@ export type BaseEdgePropsWithData<Data extends Record<string, unknown>> = BaseEd
  * //   luckyNumber: number | undefined
  * // }
  */
-export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<{ [P in Exclude<keyof T, Keys>]: T[P]; } & { [P in Keys]-?: T[P] | undefined; }>;
-//#endregion
+export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<{ [P in Exclude<keyof T, Keys>]: T[P]; } & { [P in Keys]-?: T[P] | undefined; }>;

package/dist/base/updateEdges.mjs

@@ -3,7 +3,7 @@ import { hasSubObject as hasSubObject$1 } from "./Base.mjs";
 import { deepEqual } from "fast-equals";
 import { isDefined, isShallowEqual, pickBy } from "remeda";
 
-//#region src/base/updateEdges.ts
+// src/base/updateEdges.ts
 const EMPTY_OBJ = {};
 function _update(current, updated) {
 	if (current === updated) return current;
@@ -32,5 +32,4 @@ function updateEdges(current, update) {
 	return (current) => _update(current, update);
 }
 
-//#endregion
 export { updateEdges };

package/dist/base/updateNodes.mjs

@@ -3,7 +3,7 @@ import { deepEqual, shallowEqual } from "fast-equals";
 import { hasSubObject, isDefined, pickBy } from "remeda";
 import { getNodeDimensions } from "@xyflow/system";
 
-//#region src/base/updateNodes.ts
+// src/base/updateNodes.ts
 const EMPTY_OBJ = {};
 function _update(current, updated) {
 	if (current === updated) return current;
@@ -43,5 +43,4 @@ function updateNodes(current, update) {
 	return (existing) => _update(existing, update);
 }
 
-//#endregion
 export { updateNodes };

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

@@ -1,10 +1,11 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import "react";
+import { ComponentPropsWithoutRef } from "react";
 import { Tokens } from "@likec4/styles/tokens";
 import { RichTextOrEmpty } from "@likec4/core/types";
-//#region src/base-primitives/Markdown.d.ts
 export declare const Markdown: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children" | "dangerouslySetInnerHTML" | "translate"> & {
-  value: RichTextOrEmpty;
+  value: RichTextOrEmpty | {
+    html: string;
+  };
   /**
    * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
    * @default false
@@ -30,5 +31,4 @@ export declare const Markdown: import("react").ForwardRefExoticComponent<Omit<Om
    * @default "no content"
    */
   emptyText?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
-//#endregion
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/base-primitives/Markdown.mjs

@@ -3,25 +3,37 @@ import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Text } from "@mantine/core";
+import { nonNullable } from "@likec4/core/utils";
+import { isRichText } from "@likec4/core/types";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { markdownBlock } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/Markdown.tsx
+// src/base-primitives/Markdown.tsx
 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
-	}) };
+	if (isRichText(value) && value.isEmpty && hideIfEmpty) return null;
+	const isMarkdown = !isRichText(value) || value.nonEmpty && value.isMarkdown;
+	let content;
+	switch (true) {
+		case isMarkdown:
+			content = { dangerouslySetInnerHTML: { __html: nonNullable(value.html, "Markdown html is required") } };
+			break;
+		case isRichText(value) && value.nonEmpty:
+			content = { children: /* @__PURE__ */ jsx("p", { children: value.text }) };
+			break;
+		default: content = { 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"
+			value: isMarkdown ? "markdown" : "plaintext"
 		}), className),
 		style: {
 			...style,
@@ -33,5 +45,4 @@ const Markdown = forwardRef(({ value, textScale = 1, uselikec4palette = false, h
 });
 Markdown.displayName = "Markdown";
 
-//#endregion
 export { Markdown };

package/dist/base-primitives/NodeHandles.d.mts

@@ -1,10 +1,8 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { AutoLayoutDirection } from "@likec4/core/types";
-//#region src/base-primitives/NodeHandles.d.ts
 /**
  * XYFlow requires handles to be defined on nodes.
  */
 export declare function DefaultHandles({ direction }: {
   direction?: AutoLayoutDirection | undefined;
-}): import("react").JSX.Element;
-//#endregion
+}): import("react").JSX.Element;

package/dist/base-primitives/NodeHandles.mjs

@@ -3,7 +3,7 @@ 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
+// src/base-primitives/NodeHandles.tsx
 /**
 * XYFlow requires handles to be defined on nodes.
 */
@@ -40,5 +40,4 @@ function DefaultHandles({ direction = "TB" }) {
 	})] });
 }
 
-//#endregion
 export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.d.mts

@@ -2,11 +2,10 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { BaseNodeProps } from "../../base/types.mjs";
 import { MouseEvent, ReactNode } from "react";
 import { Simplify } from "type-fest";
-//#region src/base-primitives/compound/CompoundActionButton.d.ts
 type CompoundActionButtonProps = Simplify<BaseNodeProps & {
   icon?: ReactNode;
   ariaLabel?: string;
   onClick: (e: MouseEvent) => void;
 }>;
 export declare function CompoundActionButton({ selected, data: { hovered: isHovered }, icon, ariaLabel, onClick }: CompoundActionButtonProps): import("react").JSX.Element;
-//#endregion
+export {};

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

@@ -1,5 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
 import { stopPropagation } from "../../utils/xyflow.mjs";
 import { compoundActionBtn } from "./actionbtns.css.mjs";
 import { cx } from "@likec4/styles/css";
@@ -9,7 +9,7 @@ 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
+// src/base-primitives/compound/CompoundActionButton.tsx
 const variants = {
 	normal: {
 		scale: 1,
@@ -28,7 +28,7 @@ const variants = {
 	},
 	whileTap: { scale: 1 }
 };
-function CompoundActionButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Navigate to view", onClick }) {
+function CompoundActionButton({ selected, data: { hovered: isHovered = false }, icon, ariaLabel = "Navigate to view", onClick }) {
 	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
 	const isActionVisible = selected || isHoverDebounced;
 	let variant = isHoverDebounced ? "hovered" : "normal";
@@ -53,5 +53,4 @@ function CompoundActionButton({ selected = false, data: { hovered: isHovered = f
 	});
 }
 
-//#endregion
 export { CompoundActionButton };

package/dist/base-primitives/compound/CompoundDetailsButton.d.mts

@@ -2,11 +2,10 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { BaseNodeProps } from "../../base/types.mjs";
 import { MouseEvent, ReactNode } from "react";
 import { Simplify } from "type-fest";
-//#region src/base-primitives/compound/CompoundDetailsButton.d.ts
 type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
   icon?: ReactNode;
   ariaLabel?: string;
   onClick: (e: MouseEvent) => void;
 }>;
 export declare function CompoundDetailsButton({ selected, data: { hovered: isHovered }, icon, ariaLabel, onClick }: CompoundDetailsButtonProps): import("react").JSX.Element;
-//#endregion
+export {};

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

@@ -1,5 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
+import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
 import { stopPropagation } from "../../utils/xyflow.mjs";
 import { compoundActionBtn } from "./actionbtns.css.mjs";
 import { cx } from "@likec4/styles/css";
@@ -9,14 +9,14 @@ 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
+// src/base-primitives/compound/CompoundDetailsButton.tsx
 const variants = {
 	normal: { scale: 1 },
 	hovered: { scale: 1.2 },
 	whileHover: { scale: 1.4 },
 	whileTap: { scale: 1 }
 };
-function CompoundDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
+function CompoundDetailsButton({ selected, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
 	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
 	const isActionVisible = selected || isHoverDebounced;
 	const variant = isHoverDebounced ? "hovered" : "normal";
@@ -43,5 +43,4 @@ function CompoundDetailsButton({ selected = false, data: { hovered: isHovered =
 	});
 }
 
-//#endregion
 export { CompoundDetailsButton };

package/dist/base-primitives/compound/CompoundNodeContainer.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { BaseNode, BaseNodeProps } from "../../base/types.mjs";
 import { HTMLAttributes, PropsWithChildren } from "react";
 import { Color, ElementStyle } from "@likec4/core/types";
-//#region src/base-primitives/compound/CompoundNodeContainer.d.ts
 export type RequiredData = {
   color: Color;
   depth: number;
@@ -14,4 +13,4 @@ type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElemen
   nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
 }>;
 export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data } }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react").JSX.Element;
-//#endregion
+export {};

package/dist/base-primitives/compound/CompoundNodeContainer.mjs

@@ -6,7 +6,7 @@ import { clamp } from "remeda";
 import * as m from "motion/react-m";
 import { compoundNode } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/compound/CompoundNodeContainer.tsx
+// src/base-primitives/compound/CompoundNodeContainer.tsx
 function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, children, style, ...rest }) {
 	const styles = useLikeC4Styles();
 	let opacity = clamp(data.style.opacity ?? 100, {
@@ -45,5 +45,4 @@ function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered = false
 	});
 }
 
-//#endregion
 export { CompoundNodeContainer };

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

@@ -1,6 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { Color, ComputedNodeStyle, NodeId } from "@likec4/core/types";
-//#region src/base-primitives/compound/CompoundTitle.d.ts
 type RequiredData = {
   id: NodeId;
   title: string;
@@ -18,4 +17,4 @@ type CompoundTitleProps = {
   'aria-hidden'?: boolean | undefined;
 };
 export declare function CompoundTitle({ data, 'aria-hidden': ariaHidden }: CompoundTitleProps): import("react").JSX.Element;
-//#endregion
+export {};

package/dist/base-primitives/compound/CompoundTitle.mjs

@@ -2,7 +2,7 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { IconRenderer } from "../../context/IconRenderer.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/base-primitives/compound/CompoundTitle.tsx
+// src/base-primitives/compound/CompoundTitle.tsx
 function CompoundTitle({ data, "aria-hidden": ariaHidden }) {
 	const elementIcon = IconRenderer({
 		element: data,
@@ -18,5 +18,4 @@ function CompoundTitle({ data, "aria-hidden": ariaHidden }) {
 	});
 }
 
-//#endregion
 export { CompoundTitle };

package/dist/base-primitives/compound/actionbtns.css.mjs

@@ -1,6 +1,6 @@
 import { cva } from "@likec4/styles/css";
 
-//#region src/base-primitives/compound/actionbtns.css.ts
+// src/base-primitives/compound/actionbtns.css.ts
 const compoundActionBtn = cva({
 	base: { transitionDuration: "medium" },
 	variants: { delay: { true: { transitionDelay: {
@@ -9,5 +9,4 @@ const compoundActionBtn = cva({
 	} } } }
 });
 
-//#endregion
 export { compoundActionBtn };

package/dist/base-primitives/edge/EdgeActionButton.mjs

@@ -1,12 +1,12 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
 import { stopPropagation } from "../../utils/xyflow.mjs";
 import { cx } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
 import { ActionIcon } from "@mantine/core";
 import { edgeActionBtn } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/edge/EdgeActionButton.tsx
+// src/base-primitives/edge/EdgeActionButton.tsx
 function EdgeActionButton({ icon, ariaLabel = "Navigate to view", onClick }) {
 	return /* @__PURE__ */ jsx(ActionIcon, {
 		className: cx("nodrag nopan", edgeActionBtn()),
@@ -19,5 +19,4 @@ function EdgeActionButton({ icon, ariaLabel = "Navigate to view", onClick }) {
 	});
 }
 
-//#endregion
 export { EdgeActionButton };

package/dist/base-primitives/edge/EdgeContainer.mjs

@@ -4,8 +4,8 @@ import { jsx } from "react/jsx-runtime";
 import { pickBy } from "remeda";
 import { invariant } from "@likec4/core";
 
-//#region src/base-primitives/edge/EdgeContainer.tsx
-function EdgeContainer({ className, component = "g", selectable = false, selected = false, data: { color = "gray", hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, ...data }, animated = false, children, style, ...rest }) {
+// src/base-primitives/edge/EdgeContainer.tsx
+function EdgeContainer({ className, component = "g", selectable = false, selected = false, data: { color, hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, ...data }, animated = false, children, style, ...rest }) {
 	animated = animated || isActive;
 	const props = {
 		className: cx(className, "likec4-edge-container", selected && "selected", selectable && "selectable"),
@@ -31,5 +31,4 @@ function EdgeContainer({ className, component = "g", selectable = false, selecte
 	});
 }
 
-//#endregion
 export { EdgeContainer };

package/dist/base-primitives/edge/EdgeLabel.mjs

@@ -3,11 +3,12 @@ import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isTruthy } from "remeda";
+import { EdgeLabelMetrics } from "@likec4/core/styles";
 import { Box } from "@likec4/styles/jsx";
 import * as m from "motion/react-m";
 import { edgeLabel } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/edge/EdgeLabel.tsx
+// src/base-primitives/edge/EdgeLabel.tsx
 const EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hovered: isHovered = false }, selected = false, selectable = false }, isSequenceStep: isStepEdge = false, stepNum, pointerEvents = "all", className, children, ...rest }, ref) => {
 	const hasLabel = isTruthy(label) || isTruthy(technology);
 	return /* @__PURE__ */ jsxs(m.div, {
@@ -27,7 +28,7 @@ const EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hove
 			className: "likec4-edge-label__contents",
 			children: [
 				isTruthy(label) && /* @__PURE__ */ jsx(Box, {
-					lineClamp: 5,
+					lineClamp: EdgeLabelMetrics.label.maxLines,
 					className: "likec4-edge-label__text",
 					children: label
 				}),
@@ -42,5 +43,4 @@ const EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hove
 });
 EdgeLabel.displayName = "EdgeLabel";
 
-//#endregion
 export { EdgeLabel };