@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/ui/notation/NotationPanel.mjs

@@ -0,0 +1,190 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import IconArrowDownRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.mjs";
+import IconHelpCircle from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.mjs";
+import { useXYStore } from "../../../hooks/useXYFlow.mjs";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../../hooks/safeContext.mjs";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.mjs";
+import { ElementShape } from "../../../base-primitives/element/ElementShape.mjs";
+import { card, container, elementNotation, icon, shapeBadge, tabPanel } from "./NotationPanel.css.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+import { ceil, isNonNullish } from "remeda";
+import { ActionIcon, Badge, Box, Card, Group, Paper, ScrollAreaAutosize, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, Tooltip } from "@mantine/core";
+import { AnimatePresence, m } from "motion/react";
+import { useLocalStorage } from "@mantine/hooks";
+
+//#region src/likec4diagram/ui/notation/NotationPanel.tsx
+const ElementNotation = ({ value }) => {
+	const { title, color = "primary", shape = "rectangle" } = value;
+	const [onlyKind, setOnlyKind] = useState(null);
+	const diagram = useDiagram();
+	const w = 300;
+	const h = 200;
+	return /* @__PURE__ */ jsx(Card, {
+		shadow: "none",
+		px: "xs",
+		py: "sm",
+		className: cx(elementNotation),
+		"data-likec4-color": color,
+		onMouseEnter: () => {
+			setOnlyKind(null);
+			diagram.highlightNotation(value);
+		},
+		onMouseLeave: () => {
+			setOnlyKind(null);
+			diagram.unhighlightNotation();
+		},
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: "sm",
+			align: "stretch",
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(Box, {
+				flex: "0 0 70px",
+				style: {
+					position: "relative",
+					width: 70,
+					height: ceil(70 * (h / w), 0)
+				},
+				children: /* @__PURE__ */ jsx(ElementShape, { data: {
+					shape,
+					width: w,
+					height: h
+				} })
+			}), /* @__PURE__ */ jsxs(Stack, {
+				gap: 4,
+				flex: 1,
+				children: [/* @__PURE__ */ jsx(Group, {
+					gap: 4,
+					flex: "0 0 auto",
+					children: value.kinds.map((kind) => /* @__PURE__ */ jsx(Badge, {
+						className: cx(shapeBadge),
+						onMouseEnter: () => {
+							setOnlyKind(kind);
+							diagram.highlightNotation(value, kind);
+						},
+						onMouseLeave: () => {
+							setOnlyKind(null);
+							diagram.highlightNotation(value);
+						},
+						opacity: isNonNullish(onlyKind) && onlyKind !== kind ? .25 : 1,
+						children: kind
+					}, kind))
+				}), /* @__PURE__ */ jsx(Text, {
+					component: "div",
+					fz: "sm",
+					fw: 500,
+					lh: "1.25",
+					style: { textWrap: "pretty" },
+					children: title
+				})]
+			})]
+		})
+	});
+};
+const selector = selectDiagramContext((s) => ({
+	id: s.view.id,
+	notations: s.view.notation?.nodes ?? []
+}), deepEqual);
+const NotationPanel = memo(() => {
+	const height = useXYStore((s) => s.height);
+	const { id, notations } = useDiagramSelector(selector);
+	const [isCollapsed, setCollapsed] = useLocalStorage({
+		key: "notation-webview-collapsed",
+		defaultValue: true
+	});
+	const hasNotations = notations.length > 0;
+	const portalProps = useMantinePortalProps();
+	if (!hasNotations) return null;
+	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [isCollapsed && /* @__PURE__ */ jsx(m.div, {
+		initial: {
+			opacity: .75,
+			translateX: "50%"
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			translateX: "100%",
+			opacity: .6
+		},
+		className: container,
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			label: "Show notation",
+			...portalProps,
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				size: "lg",
+				variant: "default",
+				className: icon,
+				onClick: () => setCollapsed(false),
+				children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
+			})
+		})
+	}, "collapsed"), !isCollapsed && /* @__PURE__ */ jsx(m.div, {
+		initial: {
+			opacity: .75,
+			scale: .2
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .25
+		},
+		className: cx("react-flow__panel", container),
+		style: { transformOrigin: "bottom right" },
+		children: /* @__PURE__ */ jsx(Paper, {
+			radius: "sm",
+			withBorder: true,
+			shadow: "lg",
+			className: card,
+			children: /* @__PURE__ */ jsxs(Tabs, {
+				defaultValue: "first",
+				radius: "xs",
+				children: [/* @__PURE__ */ jsxs(TabsList, { children: [
+					/* @__PURE__ */ jsx(ActionIcon, {
+						size: "md",
+						variant: "subtle",
+						color: "gray",
+						ml: 2,
+						style: {
+							alignSelf: "center",
+							opacity: .7
+						},
+						onClick: () => setCollapsed(true),
+						children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
+					}),
+					/* @__PURE__ */ jsx(TabsTab, {
+						value: "first",
+						fz: "xs",
+						children: "Elements"
+					}),
+					/* @__PURE__ */ jsx(TabsTab, {
+						value: "second",
+						fz: "xs",
+						disabled: true,
+						children: "Relationships"
+					})
+				] }), /* @__PURE__ */ jsx(TabsPanel, {
+					value: "first",
+					className: tabPanel,
+					hidden: isCollapsed,
+					children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+						viewportProps: { style: { maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)` } },
+						children: /* @__PURE__ */ jsx(Stack, {
+							gap: 0,
+							children: notations.map((n, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n }, i))
+						})
+					})
+				})]
+			})
+		})
+	}, id)] });
+});
+
+//#endregion
+export { NotationPanel };

package/dist/likec4diagram/ui/sequence-outline/ActiveTrail.mjs

@@ -0,0 +1,83 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { flowPresentation } from "./presentation.mjs";
+import { collectTrail, firstStepOf } from "./tree.mjs";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack, styled } from "@likec4/styles/jsx";
+
+//#region src/likec4diagram/ui/sequence-outline/ActiveTrail.tsx
+/**
+* Sticky "you are here" trail: the fragments the active step is nested inside.
+* Each segment jumps the walkthrough to the first step of that fragment.
+*/
+const ActiveTrail = ({ ancestors, tree }) => {
+	const diagram = useDiagram();
+	const trail = collectTrail(tree, ancestors);
+	if (trail.length === 0) return null;
+	return /* @__PURE__ */ jsx(HStack, {
+		css: {
+			gap: "1",
+			flexWrap: "wrap",
+			marginBottom: "1.5",
+			paddingInline: "2.5",
+			paddingBlock: "1.5",
+			bg: "likec4.panel.bg",
+			borderBottom: "panel",
+			textStyle: "dimmed.xxs",
+			fontWeight: "semibold",
+			letterSpacing: "caps.sm",
+			textTransform: "uppercase",
+			userSelect: "none",
+			"& svg": {
+				flex: "none",
+				opacity: "[0.5]"
+			}
+		},
+		children: trail.map((node, i) => {
+			const { paletteClass, tag } = flowPresentation[node.nodeProps.type];
+			const label = node.nodeProps.title ? `${tag} ${node.nodeProps.title}` : tag;
+			const last = i === trail.length - 1;
+			const firstStep = firstStepOf(node.children);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(IconChevronRight, { size: 10 }), /* @__PURE__ */ jsx(styled.button, {
+				type: "button",
+				className: last ? paletteClass : void 0,
+				title: `Jump to the first step of ${label}`,
+				disabled: !firstStep,
+				onClick: () => firstStep && diagram.walkthroughStep({ step: firstStep }),
+				css: {
+					appearance: "none",
+					border: "none",
+					background: "transparent",
+					padding: "0",
+					font: "inherit",
+					letterSpacing: "[inherit]",
+					textTransform: "inherit",
+					cursor: "pointer",
+					rounded: "sm",
+					transitionProperty: "colors",
+					transition: "fast",
+					maxWidth: "[200px]",
+					truncate: true,
+					...last ? {
+						fontWeight: "extrabold",
+						color: "colorPalette.text"
+					} : {
+						color: "inherit",
+						_hover: { color: "text" }
+					},
+					_disabled: { cursor: "default" },
+					_focusVisible: {
+						outline: "[2px solid {colors.primary.border}]",
+						outlineOffset: "[2px]"
+					}
+				},
+				children: label
+			})] }, node.value);
+		})
+	});
+};
+
+//#endregion
+export { ActiveTrail };

package/dist/likec4diagram/ui/sequence-outline/FlowRow.mjs

@@ -0,0 +1,72 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { flowPresentation } from "./presentation.mjs";
+import { recessed } from "./depth-of-field.mjs";
+import { css, cva } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { m } from "motion/react";
+import { HStack, styled } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+
+//#region src/likec4diagram/ui/sequence-outline/FlowRow.tsx
+/** Small pill tag for the sub-flow operator (`loop`, `par`, `try`, …). */
+const flowTagBase = cva({
+	base: {
+		flex: "none",
+		paddingInline: "1.5",
+		paddingBlock: "0.5",
+		rounded: "sm",
+		bg: "colorPalette.label",
+		color: "colorPalette.text",
+		fontSize: "[9px]",
+		fontWeight: "bold",
+		lineHeight: "xs",
+		letterSpacing: "tight",
+		textTransform: "uppercase",
+		userSelect: "none"
+	},
+	variants: { dimmed: { true: { opacity: "0.7" } } }
+});
+const FlowTag = styled("div", flowTagBase);
+/** The header line of a sub-flow: its icon, title and operator tag. */
+const FlowRow = ({ node, recession, isCollapsed }) => {
+	const { tag, Icon } = flowPresentation[node.nodeProps.type];
+	return /* @__PURE__ */ jsxs(m.div, {
+		layout: true,
+		className: hstack(css.raw(recessed, {
+			alignItems: "center",
+			gap: "1.5",
+			marginTop: "2",
+			marginBottom: "0.5",
+			paddingInline: "1.5",
+			paddingBlock: "0.5",
+			color: "text",
+			userSelect: "none"
+		}, isCollapsed ? { bg: "colorPalette.label" } : void 0)),
+		style: { ["--seq-r"]: recession },
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				size: 13,
+				className: css({
+					flex: "none",
+					color: "colorPalette.text"
+				})
+			}),
+			/* @__PURE__ */ jsx(styled.span, {
+				css: {
+					flex: "1",
+					minWidth: "0",
+					fontSize: "xs",
+					fontWeight: "medium",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: node.nodeProps.title ?? tag
+			}),
+			/* @__PURE__ */ jsx(FlowTag, { children: tag })
+		]
+	});
+};
+
+//#endregion
+export { FlowRow, FlowTag };

package/dist/likec4diagram/ui/sequence-outline/OutlineBody.mjs

@@ -0,0 +1,109 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import IconPlayerSkipBackFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.mjs";
+import IconPlayerSkipForwardFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { ActiveTrail } from "./ActiveTrail.mjs";
+import { recessionOf, shadedPanelBg } from "./depth-of-field.mjs";
+import { useSelectContext } from "./StoreProvider.mjs";
+import { OutlineNodes } from "./OutlineNodes.mjs";
+import { css } from "@likec4/styles/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { pick } from "remeda";
+import { flowAncestors } from "@likec4/core";
+import { Button, ScrollArea } from "@mantine/core";
+import { LayoutGroup } from "motion/react";
+import { HStack, styled } from "@likec4/styles/jsx";
+
+//#region src/likec4diagram/ui/sequence-outline/OutlineBody.tsx
+/** Prev/next controls, the "you are here" trail, and the scrollable outline itself. */
+const OutlineBody = () => {
+	const { activeStep, next, prev, tree, ancestors } = useSelectContext((s) => ({
+		activeStep: s.activeStep,
+		prev: s.prev,
+		next: s.next,
+		tree: s.outlineTree,
+		ancestors: s.ancestors
+	}));
+	const diagram = useDiagram();
+	const activeDepth = ancestors.length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(HStack, {
+			css: {
+				justifyContent: "space-between",
+				alignItems: "center",
+				width: "100%",
+				paddingInline: "2.5",
+				paddingTop: "2",
+				paddingBottom: "1"
+			},
+			children: [
+				/* @__PURE__ */ jsx(styled.div, {
+					css: {
+						flex: "1",
+						textStyle: "dimmed.xs",
+						fontWeight: "semibold",
+						letterSpacing: "caps.sm",
+						textTransform: "uppercase",
+						userSelect: "none"
+					},
+					children: "Outline"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					tabIndex: -1,
+					size: "compact-xs",
+					variant: "light",
+					className: css({ fontSize: "xxs" }),
+					leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
+					onClick: () => prev && diagram.walkthroughStep({ step: prev }),
+					disabled: !prev,
+					children: "Back"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					tabIndex: -1,
+					size: "compact-xs",
+					variant: "light",
+					className: css({ fontSize: "xxs" }),
+					rightSection: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, { size: 10 }),
+					onClick: () => next && diagram.walkthroughStep({ step: next }),
+					disabled: !next,
+					children: "Next"
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(ActiveTrail, {
+			ancestors,
+			tree
+		}),
+		/* @__PURE__ */ jsx(ScrollArea, {
+			type: "auto",
+			overscrollBehavior: "contain",
+			scrollbars: "y",
+			offsetScrollbars: "present",
+			className: css({
+				flex: "1",
+				width: "100%",
+				minHeight: "0"
+			}),
+			classNames: { viewport: css(shadedPanelBg, {
+				paddingInline: "2",
+				paddingBottom: "4",
+				transitionProperty: "background",
+				transition: "slow"
+			}) },
+			style: {
+				["--seq-r"]: recessionOf(0, activeDepth),
+				["--seq-badge-bg"]: "var(--colors-primary-body)",
+				["--seq-badge-fg"]: "var(--colors-primary-text)"
+			},
+			children: /* @__PURE__ */ jsx(OutlineNodes, {
+				nodes: tree,
+				depth: 0,
+				activeStep,
+				activeDepth
+			})
+		})
+	] });
+};
+
+//#endregion
+export { OutlineBody };

package/dist/likec4diagram/ui/sequence-outline/OutlineHeader.mjs

@@ -0,0 +1,142 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import IconDirectionSignFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { Markdown } from "../../../base-primitives/Markdown.mjs";
+import { useSelectContext } from "./StoreProvider.mjs";
+import { css } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RichText } from "@likec4/core";
+import { CloseButton, Spoiler } from "@mantine/core";
+import { Box as Box$1, HStack, Txt, VStack, styled } from "@likec4/styles/jsx";
+
+//#region src/likec4diagram/ui/sequence-outline/OutlineHeader.tsx
+/** View title, walkthrough progress and the (optional) view description. */
+const OutlineHeader = () => {
+	const diagram = useDiagram();
+	const { title, description, stepnum, stepCount } = useSelectContext((s) => ({
+		title: s.title,
+		description: s.description,
+		stepnum: s.stepNum,
+		stepCount: s.flow.steps.length
+	}));
+	const pad = String(stepCount).length;
+	return /* @__PURE__ */ jsxs(VStack, {
+		css: {
+			gap: "2.5",
+			width: "100%",
+			paddingInline: "2.5",
+			paddingBlock: "2",
+			borderBottom: "panel"
+		},
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			css: {
+				gap: "2.5",
+				alignItems: "flex-start",
+				width: "100%",
+				padding: "0"
+			},
+			children: [
+				/* @__PURE__ */ jsx(Box$1, {
+					css: {
+						flex: "none",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						boxSize: "[20px]",
+						rounded: "sm",
+						colorPalette: "subflow.loop",
+						bg: "colorPalette.label",
+						color: "colorPalette.text"
+					},
+					children: /* @__PURE__ */ jsx(IconDirectionSignFilled, { size: 14 })
+				}),
+				/* @__PURE__ */ jsxs(VStack, {
+					css: {
+						gap: "0",
+						alignItems: "stretch",
+						flex: "1",
+						minWidth: "0"
+					},
+					children: [
+						/* @__PURE__ */ jsx(styled.div, {
+							css: {
+								fontSize: "sm",
+								fontWeight: "semibold",
+								color: "text",
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: title ?? "Sequence"
+						}),
+						/* @__PURE__ */ jsxs(styled.div, {
+							css: {
+								marginTop: "0.5",
+								textStyle: "dimmed.xxs",
+								fontWeight: "medium",
+								letterSpacing: "caps.sm",
+								textTransform: "uppercase",
+								fontVariantNumeric: "tabular-nums",
+								userSelect: "none"
+							},
+							children: [
+								"Step ",
+								String(stepnum).padStart(pad, "0"),
+								" / ",
+								stepCount
+							]
+						}),
+						/* @__PURE__ */ jsx(Box$1, {
+							css: {
+								height: "[2px]",
+								marginTop: "1.5",
+								rounded: "xs",
+								bg: "border.subtle",
+								overflow: "hidden"
+							},
+							children: /* @__PURE__ */ jsx(styled.div, {
+								css: {
+									height: "100%",
+									rounded: "xs",
+									bg: "primary.body",
+									transitionProperty: "[width]",
+									transition: "slow"
+								},
+								style: { width: `${stepnum / stepCount * 100}%` }
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Box$1, {
+					css: {
+						flex: "none",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: /* @__PURE__ */ jsx(CloseButton, {
+						size: "sm",
+						onClick: () => diagram.stopWalkthrough()
+					})
+				})
+			]
+		}), description && /* @__PURE__ */ jsx(Spoiler, {
+			showLabel: /* @__PURE__ */ jsx(Txt, {
+				size: "xxs",
+				children: "show description"
+			}),
+			hideLabel: /* @__PURE__ */ jsx(Txt, {
+				size: "xxs",
+				children: "hide"
+			}),
+			maxHeight: 16,
+			children: /* @__PURE__ */ jsx(Markdown, {
+				value: RichText.from(description),
+				className: css({ color: "text.dimmed" }),
+				fontSize: "xxs"
+			})
+		})]
+	});
+};
+
+//#endregion
+export { OutlineHeader };

package/dist/likec4diagram/ui/sequence-outline/OutlineNodes.mjs

@@ -0,0 +1,85 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { SEQ_FRAME_LAYOUT_ID, SEQ_TRANSITION } from "./motion.mjs";
+import { flowPresentation } from "./presentation.mjs";
+import { isOutlineFlowNode } from "./types.mjs";
+import { activeFrame, activeFrameBorder, levelBand, nestedBand, recessionOf } from "./depth-of-field.mjs";
+import { FlowRow } from "./FlowRow.mjs";
+import { StepRow } from "./StepRow.mjs";
+import { useIsCollapsed, useSelectContext } from "./StoreProvider.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { Activity } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { m } from "motion/react";
+import { Box } from "@likec4/styles/jsx";
+
+//#region src/likec4diagram/ui/sequence-outline/OutlineNodes.tsx
+function renderNodes({ nodes, depth, activeStep, activeDepth }) {
+	const recession = recessionOf(depth, activeDepth);
+	return nodes.map((node) => {
+		if (!isOutlineFlowNode(node)) return /* @__PURE__ */ jsx(StepRow, {
+			node,
+			recession,
+			active: node.value === activeStep
+		}, node.value);
+		return /* @__PURE__ */ jsx(OutlineFlowNode, {
+			node,
+			depth,
+			activeStep,
+			activeDepth
+		}, node.value);
+	});
+}
+/**
+* Renders one nesting level of the outline, recursing into sub-flows.
+*
+* A fragment on the path to the active step is framed and tinted; every other level is
+* pushed back by {@link recessionOf}.
+*/
+function OutlineNodes(props) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: renderNodes(props) });
+}
+function OutlineFlowNode({ node, depth, activeStep, activeDepth }) {
+	const recession = recessionOf(depth, activeDepth);
+	const isCollapsed = useIsCollapsed(node.value);
+	const ancestorIndex = useSelectContext((s) => s.ancestors.indexOf(node.value));
+	const onPath = ancestorIndex >= 0;
+	const myDepth = onPath ? ancestorIndex + 1 : depth;
+	const isCurrentLevel = activeDepth === myDepth;
+	const { paletteClass } = flowPresentation[node.nodeProps.type];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(paletteClass, css(levelBand, isCurrentLevel && !onPath && nestedBand, isCurrentLevel && onPath && activeFrame)),
+		style: {
+			["--seq-r"]: recessionOf(myDepth, activeDepth),
+			["--seq-frame-bg"]: "var(--colors-color-palette)",
+			["--seq-badge-bg"]: "var(--colors-color-palette-text)",
+			["--seq-badge-fg"]: "var(--colors-likec4-panel-bg)"
+		},
+		children: [
+			isCurrentLevel && onPath && /* @__PURE__ */ jsx(m.div, {
+				layoutId: "likec4-seq-active-frame",
+				layout: "position",
+				layoutAnchor: false,
+				layoutCrossfade: false,
+				className: activeFrameBorder,
+				transition: SEQ_TRANSITION
+			}),
+			/* @__PURE__ */ jsx(FlowRow, {
+				node,
+				isCollapsed,
+				recession
+			}),
+			/* @__PURE__ */ jsx(Activity, {
+				mode: isCollapsed ? "hidden" : "visible",
+				children: /* @__PURE__ */ jsx(OutlineNodes, {
+					nodes: node.children,
+					depth: myDepth,
+					activeStep,
+					activeDepth
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { OutlineNodes };