@likec4/diagram 1.57.0 → 1.59.0

package/dist/likec4diagram/custom/edges/SequenceStepEdge.d.ts

@@ -1,2 +1,2 @@
 import { Types } from '../../types';
-export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/edges/SequenceStepEdge.js

@@ -41,8 +41,10 @@ function SequenceStepEdge(props) {
 			labelX = props.sourceX + LABEL_OFFSET;
 			break;
 	}
+	const { state, stepnum } = props.data;
 	return /* @__PURE__ */ jsxs(EdgeContainer, {
 		...props,
+		...state && { "data-seq-edge-state": state },
 		children: [
 			/* @__PURE__ */ jsx(EdgePath, {
 				edgeProps: props,
@@ -61,10 +63,15 @@ function SequenceStepEdge(props) {
 				},
 				children: /* @__PURE__ */ jsx(EdgeLabel, {
 					edgeProps: props,
-					children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, { onClick: (e) => {
-						e.stopPropagation();
-						diagram.navigateTo(navigateTo);
-					} })
+					isSequenceStep: true,
+					stepNum: stepnum,
+					children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
+						ariaLabel: "Navigate to view",
+						onClick: (e) => {
+							e.stopPropagation();
+							diagram.navigateTo(navigateTo);
+						}
+					})
 				})
 			})
 		]

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,2 +1,3 @@
 export declare const controlPointsContainer: string;
+export declare const labelDraggable: string;
 export declare const controlPoint: string;

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -12,6 +12,10 @@ var controlPointsContainer = css({
 	},
 	zIndex: "[100]"
 });
+var labelDraggable = css({
+	cursor: "grab!",
+	_active: { cursor: "grabbing!" }
+});
 var controlPoint = css({
 	fill: `[var(--xy-edge-stroke)]`,
 	stroke: `transparent`,
@@ -34,11 +38,11 @@ var controlPoint = css({
 	[`:where([data-likec4-selected='true']) &`]: { r: 6 },
 	[`:is([data-likec4-hovered='true']) &`]: { r: 8 },
 	_hover: {
-		fill: "mantine.colors.primary.filledHover",
+		fill: "mantine.primary.filledHover",
 		r: 10,
 		transitionDuration: "100ms"
 	},
 	_groupActive: { cursor: "grabbing" }
 });
 //#endregion
-export { controlPoint, controlPointsContainer };
+export { controlPoint, controlPointsContainer, labelDraggable };

package/dist/likec4diagram/custom/index.d.ts

@@ -1,5 +1,5 @@
 import { SequenceStepEdge } from './edges/SequenceStepEdge';
-import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, SequenceActorNode, SequenceParallelArea, ViewGroupNode } from './nodes';
+import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, SequenceActorNode, SequenceParallelArea, SequenceSubflowArea, ViewGroupNode } from './nodes';
 import { FunctionComponent } from 'react';
 export declare const BuiltinNodes: {
     ElementNode: typeof ElementNode;
@@ -9,6 +9,7 @@ export declare const BuiltinNodes: {
     ViewGroupNode: typeof ViewGroupNode;
     SequenceActorNode: typeof SequenceActorNode;
     SequenceParallelArea: typeof SequenceParallelArea;
+    SequenceSubflowArea: typeof SequenceSubflowArea;
 };
 export declare const BuiltinEdges: {
     RelationshipEdge: FunctionComponent<import("../types").Types.EdgeProps<"relationship">>;

package/dist/likec4diagram/custom/index.js

@@ -1,7 +1,8 @@
-import { RelationshipEdge } from "./edges/RelationshipEdge.js";
-import { SequenceStepEdge } from "./edges/SequenceStepEdge.js";
 import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode } from "./nodes/nodes.js";
 import { SequenceActorNode, SequenceParallelArea } from "./nodes/SequenceActorNode.js";
+import { SequenceSubflowArea } from "./nodes/SequenceSubFlow.js";
+import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+import { SequenceStepEdge } from "./edges/SequenceStepEdge.js";
 //#region src/likec4diagram/custom/index.tsx
 var BuiltinNodes = {
 	ElementNode,
@@ -10,7 +11,8 @@ var BuiltinNodes = {
 	CompoundDeploymentNode,
 	ViewGroupNode,
 	SequenceActorNode,
-	SequenceParallelArea
+	SequenceParallelArea,
+	SequenceSubflowArea
 };
 var BuiltinEdges = {
 	RelationshipEdge,

package/dist/likec4diagram/custom/nodes/CompoundActions.d.ts

@@ -1,4 +1,4 @@
 import { Types } from '../../types';
 type CompoundActionsProps = Types.NodeProps<'compound-deployment' | 'compound-element'>;
-export declare const CompoundActions: (props: CompoundActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CompoundActions: (props: CompoundActionsProps) => import("react").JSX.Element | null;
 export {};

package/dist/likec4diagram/custom/nodes/CompoundActions.js

@@ -9,6 +9,7 @@ var CompoundActions = (props) => {
 	const diagram = useDiagram();
 	const { navigateTo } = props.data;
 	if (navigateTo && enableNavigateTo) return /* @__PURE__ */ jsx(CompoundActionButton, {
+		ariaLabel: "Navigate to view",
 		onClick: (e) => {
 			e.stopPropagation();
 			diagram.navigateTo(navigateTo, props.id);

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -26,7 +26,7 @@ type WithExtraButtons = {
 };
 export type ElementActionsProps = SimplifyDeep<{
     selected?: boolean;
-    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
 }> & WithExtraButtons;
 /**
  * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
@@ -53,10 +53,10 @@ export type ElementActionsProps = SimplifyDeep<{
  * />
  * ```
  */
-export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react").JSX.Element;
 export type DeploymentElementActionsProps = SimplifyDeep<{
     selected?: boolean;
-    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
 }> & WithExtraButtons;
 /**
  * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
@@ -83,5 +83,5 @@ export type DeploymentElementActionsProps = SimplifyDeep<{
  * />
  * ```
  */
-export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react").JSX.Element;
 export {};

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -1,6 +1,7 @@
 import "../../../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useDiagram } from "../../../hooks/safeContext.js";
+import { readableText } from "../../../utils/readableText.js";
 import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.js";
 import { IconTransform, IconZoomScan } from "@tabler/icons-react";
 import { useMemo } from "react";
@@ -35,11 +36,13 @@ import { hasAtLeast } from "remeda";
 function ElementActions({ extraButtons, ...props }) {
 	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
 	const diagram = useDiagram();
-	const { id, navigateTo, modelFqn } = props.data;
+	const { id, navigateTo, modelFqn, title } = props.data;
 	let buttons = useMemo(() => {
 		const buttons = [];
+		const labelTitle = readableText(title) || id;
 		if (navigateTo && enableNavigateTo) buttons.push({
 			key: "navigate",
+			ariaLabel: "Navigate to view",
 			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -48,6 +51,7 @@ function ElementActions({ extraButtons, ...props }) {
 		});
 		if (enableRelationshipBrowser) buttons.push({
 			key: "relationships",
+			ariaLabel: `Browse ${labelTitle} relationships`,
 			icon: /* @__PURE__ */ jsx(IconTransform, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -61,6 +65,7 @@ function ElementActions({ extraButtons, ...props }) {
 		modelFqn,
 		navigateTo,
 		id,
+		title,
 		diagram
 	]);
 	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
@@ -97,11 +102,13 @@ function ElementActions({ extraButtons, ...props }) {
 var DeploymentElementActions = ({ extraButtons, ...props }) => {
 	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
 	const diagram = useDiagram();
-	const { id, navigateTo, modelFqn } = props.data;
+	const { id, navigateTo, modelFqn, title } = props.data;
 	let buttons = useMemo(() => {
 		const buttons = [];
+		const labelTitle = readableText(title) || id;
 		if (navigateTo && enableNavigateTo) buttons.push({
 			key: "navigate",
+			ariaLabel: "Navigate to view",
 			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -110,6 +117,7 @@ var DeploymentElementActions = ({ extraButtons, ...props }) => {
 		});
 		if (enableRelationshipBrowser && !!modelFqn) buttons.push({
 			key: "relationships",
+			ariaLabel: `Browse ${labelTitle} relationships`,
 			icon: /* @__PURE__ */ jsx(IconTransform, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -122,7 +130,9 @@ var DeploymentElementActions = ({ extraButtons, ...props }) => {
 		enableRelationshipBrowser,
 		modelFqn,
 		navigateTo,
-		id
+		id,
+		title,
+		diagram
 	]);
 	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
 	return /* @__PURE__ */ jsx(ElementActionButtons, {

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.ts

@@ -2,4 +2,4 @@ import { Types } from '../../types';
 export type NodeDriftsProps = {
     nodeProps: Types.NodeProps;
 };
-export declare function NodeDrifts({ nodeProps: { data }, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NodeDrifts({ nodeProps: { data }, }: NodeDriftsProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/NodeNotes.d.ts

@@ -2,5 +2,5 @@ import { BaseNodePropsWithData } from '../../../base/types';
 import { Types } from '../../types';
 type RequiredData = Pick<Types.NodeData, 'id' | 'notes' | 'width' | 'height' | 'x' | 'y'>;
 export type NodeNotesProps = BaseNodePropsWithData<RequiredData>;
-export declare function NodeNotes({ data }: NodeNotesProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NodeNotes({ data }: NodeNotesProps): import("react").JSX.Element | null;
 export {};

package/dist/likec4diagram/custom/nodes/NodeNotes.js

@@ -31,10 +31,6 @@ function NodeNotesInternal({ data }) {
 		min: 250,
 		max: 500
 	});
-	clamp(data.height ?? 0, {
-		min: 200,
-		max: 600
-	});
 	const [expanded, handlers] = useDisclosure(false, {});
 	const id = stringHash(data.id + (markdown.md ?? markdown.txt));
 	const onClickCapture = useCallbackRef$1((e) => {

package/dist/likec4diagram/custom/nodes/SequenceActorNode.d.ts

@@ -1,3 +1,3 @@
 import { Types } from '../../types';
-export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react/jsx-runtime").JSX.Element;
-export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react").JSX.Element;
+export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/SequenceActorNode.js

@@ -12,6 +12,7 @@ import { css } from "@likec4/styles/css";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Handle, Position } from "@xyflow/react";
 import { isTruthy } from "remeda";
+import { m } from "motion/react";
 import { Box } from "@likec4/styles/jsx";
 //#region src/likec4diagram/custom/nodes/SequenceActorNode.tsx
 var positionMap = {
@@ -20,26 +21,37 @@ var positionMap = {
 	top: Position.Top,
 	bottom: Position.Bottom
 };
-var ActorStepPort = ({ data, port: p }) => {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+var ActorStepPort = ({ nodeProps: { selected, data }, port: p }) => {
+	let scaleX = 1;
+	let scaleY = 1;
+	if (data.hovered || selected) {
+		scaleX = 1.8;
+		scaleY = 1.1;
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(m.div, {
 		"data-likec4-color": data.color,
 		className: css({
 			position: "absolute",
 			backgroundColor: "var(--likec4-palette-fill)",
-			rounded: "xs",
-			width: {
-				base: "5px",
-				_whenHovered: "7px",
-				_whenSelected: "7px"
-			},
-			transition: "fast",
-			translateX: "-1/2",
-			translateY: "-1/2",
-			translate: "auto"
+			rounded: "xs"
 		}),
+		initial: false,
+		animate: {
+			scaleX,
+			scaleY
+		},
+		transition: {
+			type: "spring",
+			stiffness: 400,
+			damping: 30
+		},
 		style: {
+			x: "-50%",
+			y: "-50%",
 			top: p.cy,
 			left: p.cx,
+			width: 5,
+			visibility: p.hidden ? "hidden" : "visible",
 			height: p.height
 		}
 	}), /* @__PURE__ */ jsx(Handle, {
@@ -73,16 +85,15 @@ function SequenceActorNode(props) {
 				pointerEvents: "none",
 				transition: "fast",
 				translateX: "-1/2",
-				translate: "auto"
+				translate: "auto",
+				zIndex: "z-0"
 			}),
 			style: {
 				backgroundColor: "var(--likec4-palette-stroke)",
 				opacity: isHovered ? .6 : .4,
 				left: "50%",
 				width: isHovered ? 3 : 2,
-				height: viewHeight - positionAbsoluteY,
-				zIndex: -1,
-				pointerEvents: "none"
+				height: viewHeight - positionAbsoluteY
 			}
 		}),
 		/* @__PURE__ */ jsxs(ElementNodeContainer, {
@@ -90,7 +101,10 @@ function SequenceActorNode(props) {
 			children: [
 				enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
 				/* @__PURE__ */ jsx(ElementShape, { ...props }),
-				/* @__PURE__ */ jsx(ElementData, { ...props }),
+				/* @__PURE__ */ jsx(ElementData, {
+					...props,
+					"aria-hidden": true
+				}),
 				hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(ElementActions, { ...props }),
 					enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, {
@@ -104,7 +118,7 @@ function SequenceActorNode(props) {
 		}),
 		ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, {
 			port: p,
-			data: props.data
+			nodeProps: props
 		}, p.id))
 	] });
 }
@@ -116,7 +130,6 @@ function SequenceParallelArea(props) {
 			height: "100%",
 			border: "default",
 			rounded: "sm",
-			borderWidth: 1,
 			"--_color": {
 				base: "var(--likec4-palette-stroke)",
 				_dark: "[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"

package/dist/likec4diagram/custom/nodes/SequenceSubFlow.d.ts

@@ -0,0 +1,2 @@
+import { Types } from '../../types';
+export declare function SequenceSubflowArea(props: Types.NodeProps<'seq-subflow'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js

@@ -0,0 +1,234 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { css, cx, sva } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@likec4/core";
+import { hstack } from "@likec4/styles/patterns";
+//#region src/likec4diagram/custom/nodes/SequenceSubFlow.tsx
+var labelStyle = css.raw({
+	color: "colorPalette.text",
+	fontSize: "[9px]",
+	fontWeight: "bold",
+	lineHeight: "xs",
+	letterSpacing: "tight",
+	textTransform: "uppercase"
+});
+var withBorder = css.raw({ border: "{borderWidths.2} solid {colors.colorPalette.border}" });
+var withBackground = css.raw({
+	background: "colorPalette",
+	["&[data-state=\"hovered\"]"]: {
+		background: "colorPalette.hovered",
+		transition: "faster",
+		transitionDelay: "faster",
+		transitionTimingFunction: "out",
+		transitionProperty: "background"
+	},
+	["&[data-state=\"collapsed\"]"]: { background: "colorPalette.label" }
+});
+var recipe = sva({
+	slots: [
+		"root",
+		"content",
+		"label",
+		"title"
+	],
+	base: {
+		root: css.raw({
+			width: "100%",
+			height: "100%",
+			padding: "0"
+		}),
+		content: hstack.raw({
+			gap: "2",
+			width: "100%",
+			alignItems: "center"
+		}),
+		label: css.raw(labelStyle),
+		title: css.raw({
+			flex: "1",
+			color: `[oklch(from {colors.colorPalette.text} l calc(c - 0.15) h)]`,
+			fontSize: "xs",
+			lineHeight: "xxs",
+			fontWeight: "medium",
+			truncate: true
+		})
+	},
+	variants: { variant: {
+		subflow: {
+			root: css.raw(withBackground, withBorder, { rounded: "md" }),
+			label: css.raw(withBorder, {
+				alignSelf: "stretch",
+				paddingInline: "2",
+				paddingBlock: "1",
+				background: "colorPalette.label",
+				width: "max-content",
+				borderTopLeftRadius: "sm",
+				borderBottomRightRadius: "sm",
+				borderTop: "none",
+				borderLeft: "none",
+				[":is([data-state=\"collapsed\"]) &"]: {
+					background: "none",
+					borderColor: "transparent"
+				}
+			})
+		},
+		branch: {
+			root: css.raw(withBackground, withBorder, {
+				rounded: "0",
+				borderTopWidth: "1",
+				["&[data-is-last=\"true\"]"]: {
+					borderBottomLeftRadius: "md",
+					borderBottomRightRadius: "md"
+				},
+				["&:not([data-is-last=\"true\"])"]: { borderBottomWidth: "1" },
+				["&[data-state=\"collapsed\"]"]: { background: "colorPalette.header" }
+			}),
+			label: css.raw({
+				position: "relative",
+				background: "colorPalette.label",
+				paddingLeft: "4.5",
+				paddingRight: "2",
+				paddingBlock: "1",
+				marginBlock: "2",
+				marginInlineStart: "2",
+				rounded: "sm",
+				minWidth: "[40px]",
+				width: "min-content",
+				textAlign: "center",
+				_before: {
+					position: "absolute",
+					content: "\" \"",
+					background: "currentColor",
+					width: "[5px]",
+					height: "[5px]",
+					opacity: "[.6]",
+					rounded: "pill",
+					top: "[50%]",
+					left: "2",
+					transform: "translateY(-50%)"
+				}
+			})
+		},
+		withbranches: { content: css.raw(withBorder, {
+			width: "100%",
+			borderTopLeftRadius: "md",
+			borderTopRightRadius: "md",
+			paddingInline: "2",
+			borderBottomWidth: "1",
+			background: "colorPalette.header"
+		}) }
+	} },
+	defaultVariants: { variant: "subflow" },
+	className: "seq-subflow"
+});
+/**
+* PandaCSS `colorPalette` classes for each sub-flow palette.
+* Declared as literals so the static analyzer can extract them.
+*/
+var palette = {
+	loop: css({ colorPalette: "subflow.loop" }),
+	opt: css({ colorPalette: "subflow.opt" }),
+	par: css({ colorPalette: "subflow.par" }),
+	break: css({ colorPalette: "subflow.break" }),
+	alt: css({ colorPalette: "subflow.alt" }),
+	try: css({ colorPalette: "subflow.try" })
+};
+var flowPresentation = {
+	loop: {
+		paletteClass: palette.loop,
+		variant: "subflow",
+		label: "loop"
+	},
+	opt: {
+		paletteClass: palette.opt,
+		variant: "subflow",
+		label: "opt"
+	},
+	par: {
+		paletteClass: palette.par,
+		variant: "subflow",
+		label: "par"
+	},
+	break: {
+		paletteClass: palette.break,
+		variant: "subflow",
+		label: "break"
+	},
+	alt: {
+		paletteClass: palette.alt,
+		variant: "withbranches",
+		label: "alt"
+	},
+	"alt-when": {
+		paletteClass: palette.alt,
+		variant: "branch",
+		label: "when"
+	},
+	"alt-else": {
+		paletteClass: palette.alt,
+		variant: "branch",
+		label: "else"
+	},
+	"alt-if": {
+		paletteClass: palette.alt,
+		variant: "branch",
+		label: "if"
+	},
+	try: {
+		paletteClass: palette.try,
+		variant: "withbranches",
+		label: "try"
+	},
+	"try-block": {
+		paletteClass: palette.try,
+		variant: "branch",
+		label: "block"
+	},
+	"try-catch": {
+		paletteClass: palette.break,
+		variant: "branch",
+		label: "catch"
+	},
+	"try-finally": {
+		paletteClass: palette.break,
+		variant: "branch",
+		label: "finally"
+	}
+};
+function SequenceSubflowArea(props) {
+	const { data } = props;
+	const isDimmed = data.dimmed ?? false;
+	const diagram = useDiagram();
+	const toggleSequenceFlow = (event) => {
+		event.stopPropagation();
+		diagram.toggleSequenceFlow(data.flowId);
+	};
+	const { paletteClass, variant, label } = flowPresentation[data.flowType];
+	const classes = recipe({ variant });
+	const headerHeight = data.flowType === "alt" || data.flowType === "try" ? data.headerHeight : void 0;
+	let state = void 0;
+	if (data.collapsed === true) state = "collapsed";
+	else if (data.hovered) state = "hovered";
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.root, paletteClass),
+		"data-is-first": data.isFirst === true,
+		"data-is-last": data.isLast === true,
+		"data-state": state,
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classes.content,
+			style: { height: headerHeight },
+			children: [/* @__PURE__ */ jsx("div", {
+				className: classes.label,
+				onClick: toggleSequenceFlow,
+				children: label
+			}), data.title && /* @__PURE__ */ jsx("div", {
+				className: classes.title,
+				onClick: toggleSequenceFlow,
+				children: data.title
+			})]
+		})
+	});
+}
+//#endregion
+export { SequenceSubflowArea };

package/dist/likec4diagram/custom/nodes/index.d.ts

@@ -2,6 +2,7 @@ export { CompoundActions } from './CompoundActions';
 export { DeploymentElementActions, ElementActions } from './ElementActions';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
 export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode';
+export { SequenceSubflowArea } from './SequenceSubFlow';
 export { NodeDrifts, type NodeDriftsProps } from './NodeDrifts';
 export * from './CompoundActions';
 export * from './ElementActions';

package/dist/likec4diagram/custom/nodes/nodes.d.ts

@@ -7,13 +7,13 @@ export declare function ElementDetailsButtonWithHandler(props: {
     data: BaseNodeData & {
         modelFqn?: Fqn | null | undefined;
     };
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element | null;
+export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react").JSX.Element | null;
 /**
  * Renders an element node.
  */
-export declare function ElementNode(props: Types.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
-export declare function DeploymentNode(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundElementNode(props: Types.NodeProps<'compound-element'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundDeploymentNode(props: Types.NodeProps<'compound-deployment'>): import("react/jsx-runtime").JSX.Element;
-export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementNode(props: Types.NodeProps<'element'>): import("react").JSX.Element;
+export declare function DeploymentNode(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;
+export declare function CompoundElementNode(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
+export declare function CompoundDeploymentNode(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;
+export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react").JSX.Element;