@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const SequenceOutlinePanel: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.js

@@ -1,542 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../../hooks/safeContext.js";
-import { useOnDiagramEvent } from "../../../hooks/useDiagram.js";
-import { Markdown } from "../../../base-primitives/Markdown.js";
-import { PortalToContainer } from "../../../components/PortalToContainer.js";
-import { useTreeData } from "./state.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconAlertTriangle, IconArrowFork, IconArrowGuide, IconArrowRight, IconChevronRight, IconCornerDownRight, IconDirectionSignFilled, IconListTree, IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled, IconPlayerStop, IconRepeat } from "@tabler/icons-react";
-import { memo, useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { mapToObj, only } from "remeda";
-import { RichText, dynamicViewFlow, flowAncestors, hasProp, isDynamicView } from "@likec4/core";
-import { ActionIcon, Button, CloseButton, ScrollArea, Spoiler, Tooltip, Tree, useTree } from "@mantine/core";
-import { AnimatePresence, m } from "motion/react";
-import { Box as Box$1, HStack, Txt, VStack, styled } from "@likec4/styles/jsx";
-import { vstack } from "@likec4/styles/patterns";
-import { extractViewTitleFromPath } from "@likec4/core/model";
-//#region src/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.tsx
-/**
-* 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,
-		tag: "loop",
-		Icon: IconRepeat
-	},
-	opt: {
-		paletteClass: palette.opt,
-		tag: "opt",
-		Icon: IconArrowGuide
-	},
-	par: {
-		paletteClass: palette.par,
-		tag: "par",
-		Icon: IconArrowFork
-	},
-	break: {
-		paletteClass: palette.break,
-		tag: "break",
-		Icon: IconPlayerStop
-	},
-	alt: {
-		paletteClass: palette.alt,
-		tag: "alt",
-		Icon: IconArrowFork
-	},
-	"alt-when": {
-		paletteClass: palette.alt,
-		tag: "when",
-		Icon: IconCornerDownRight
-	},
-	"alt-else": {
-		paletteClass: palette.alt,
-		tag: "else",
-		Icon: IconCornerDownRight
-	},
-	"alt-if": {
-		paletteClass: palette.alt,
-		tag: "if",
-		Icon: IconCornerDownRight
-	},
-	try: {
-		paletteClass: palette.try,
-		tag: "try",
-		Icon: IconAlertTriangle
-	},
-	"try-block": {
-		paletteClass: palette.try,
-		tag: "block",
-		Icon: IconCornerDownRight
-	},
-	"try-catch": {
-		paletteClass: palette.break,
-		tag: "catch",
-		Icon: IconCornerDownRight
-	},
-	"try-finally": {
-		paletteClass: palette.break,
-		tag: "finally",
-		Icon: IconCornerDownRight
-	}
-};
-var SectionLabel = styled("div", { base: {
-	textStyle: "dimmed.xs",
-	fontWeight: "semibold",
-	letterSpacing: "wider",
-	textTransform: "uppercase",
-	userSelect: "none"
-} });
-/** Numeric step badge (e.g. `12`). */
-var StepNum = styled("div", { base: {
-	flex: "none",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	minWidth: "22px",
-	height: "18px",
-	paddingInline: "1",
-	rounded: "sm",
-	bg: "surface.sunken",
-	color: "text.dimmed",
-	fontSize: "[10px]",
-	fontWeight: "bold",
-	fontVariantNumeric: "tabular-nums",
-	userSelect: "none"
-} });
-/** Small pill tag for the sub-flow operator (`loop`, `par`, `try`, …). */
-var FlowTag = styled("div", { 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"
-} });
-var rowBase = css.raw({
-	display: "flex",
-	alignItems: "center",
-	gap: "2",
-	width: "100%",
-	paddingInline: "1.5",
-	paddingBlock: "1",
-	rounded: "md",
-	cursor: "pointer",
-	color: "text",
-	userSelect: "none",
-	transition: "background-color 120ms ease",
-	_hover: { bg: "surface.sunken/60" },
-	"&[data-selected=\"true\"]": {
-		bg: "mantine.primary.light",
-		color: "mantine.primary.lightColor"
-	}
-});
-var labelText = css.raw({
-	flex: "1",
-	minWidth: "0",
-	fontSize: "xs",
-	whiteSpace: "nowrap",
-	overflow: "hidden",
-	textOverflow: "ellipsis"
-});
-var LabelSpan = styled("span", { base: labelText });
-/**
-* Height of the leading step badge; also the line-height of the first label line
-* so that a multiline label keeps its first line aligned with the badge/arrow.
-*/
-var rowLeadingHeight = "18px";
-/** Groups the step badge and arrow so they stay centered against the first label line. */
-var leadingIcons = css.raw({
-	flex: "none",
-	display: "flex",
-	alignItems: "center",
-	gap: "2",
-	height: rowLeadingHeight
-});
-/** Multiline label: preserves explicit newlines, wraps long lines, first line aligned with the badge. */
-var multilineLabelText = css.raw({
-	flex: "1",
-	minWidth: "0",
-	fontSize: "xs",
-	lineHeight: rowLeadingHeight,
-	whiteSpace: "pre-line",
-	overflowWrap: "anywhere"
-});
-var MultilineLabelSpan = styled("span", { base: multilineLabelText });
-var selectFlow = selectDiagramContext((s) => {
-	const title = extractViewTitleFromPath(s.view.title ?? "Untitled");
-	const description = s.view.description;
-	const activeStep = s.activeWalkthrough?.stepId ?? null;
-	if (activeStep) return {
-		flow: isDynamicView(s.view) && hasProp(s.view, "flow") ? dynamicViewFlow(s.view) : null,
-		activeStep,
-		title,
-		description,
-		outlinePanelWidth: s.activeWalkthrough?.outlinePanelWidth ?? 0,
-		collapsed: s.collapsedSequenceFlows
-	};
-	return {
-		flow: null,
-		activeStep: null,
-		title,
-		description
-	};
-});
-var SequenceOutlinePanel = memo(() => {
-	const props = useDiagramSelector(selectFlow);
-	return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, {
-		propagate: true,
-		children: props.activeStep && props.flow && /* @__PURE__ */ jsx(m.div, {
-			layout: "position",
-			className: vstack({
-				position: "absolute",
-				top: "0",
-				left: "0",
-				layerStyle: "likec4.panel",
-				rounded: "0",
-				gap: "0",
-				padding: "0",
-				pointerEvents: "all",
-				maxWidth: "85cqw",
-				height: "100cqh",
-				maxHeight: "100cqh",
-				cursor: "default",
-				overflow: "hidden"
-			}),
-			style: { width: props.outlinePanelWidth },
-			initial: {
-				opacity: .5,
-				translateX: -40
-			},
-			animate: {
-				opacity: 1,
-				translateX: 0
-			},
-			exit: {
-				opacity: 0,
-				translateX: -props.outlinePanelWidth
-			},
-			children: /* @__PURE__ */ jsx(SequenceOutlinePanelBody, {
-				title: props.title,
-				description: props.description,
-				activeStep: props.activeStep,
-				flow: props.flow,
-				collapsed: props.collapsed
-			})
-		})
-	}) });
-});
-SequenceOutlinePanel.displayName = "SequenceOutlinePanel";
-function SequenceOutlinePanelBody(props) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OutlineHeader, {
-		title: props.title,
-		flow: props.flow,
-		description: props.description
-	}), /* @__PURE__ */ jsx(OutlineBody, {
-		activeStep: props.activeStep,
-		flow: props.flow,
-		collapsed: props.collapsed
-	})] });
-}
-var OutlineHeader = ({ title, flow, description }) => {
-	const diagram = useDiagram();
-	const stepCount = flow.stepsCount;
-	return /* @__PURE__ */ jsxs(VStack, {
-		css: {
-			gap: "2.5",
-			width: "100%",
-			paddingInline: "2.5",
-			paddingBlock: "2",
-			borderBottom: "1px solid {colors.likec4.panel.border}"
-		},
-		children: [/* @__PURE__ */ jsxs(HStack, {
-			css: {
-				gap: "2.5",
-				alignItems: "center",
-				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(Txt, {
-						size: "xxs",
-						dimmed: true,
-						noUserSelect: true,
-						children: [
-							stepCount,
-							" ",
-							stepCount === 1 ? "step" : "steps"
-						]
-					})]
-				}),
-				/* @__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"
-			})
-		})]
-	});
-};
-var OutlineBody = ({ activeStep, flow, collapsed }) => {
-	const diagram = useDiagram();
-	const treeData = useTreeData(flow, collapsed);
-	const initialExpandedState = useMemo(() => mapToObj(flowAncestors(activeStep), (id) => [id, true]), []);
-	const tree = useTree({
-		initialSelectedState: [activeStep],
-		initialExpandedState,
-		multiple: false,
-		onSelectedStateChange(selected) {
-			const step = only(selected);
-			if (step && flow.isStep(step)) diagram.walkthroughStep({ step });
-		}
-	});
-	useOnDiagramEvent("walkthroughStep", ({ stepId }) => {
-		if (!tree.selectedState.includes(stepId)) {
-			const ancestors = flowAncestors(stepId);
-			if (ancestors.length > 0) {
-				const expanded = { ...tree.expandedState };
-				for (const parent of ancestors) expanded[parent] = true;
-				tree.setExpandedState(expanded);
-			}
-			tree.setSelectedState([stepId]);
-		}
-	});
-	const allCollapsed = useMemo(() => Object.values(tree.expandedState).every((v) => !v), [tree.expandedState]);
-	const { prev, next } = flow.prevAndNext(activeStep, (flowId) => collapsed[flowId] ?? false);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(HStack, {
-		css: {
-			justifyContent: "space-between",
-			alignItems: "center",
-			width: "100%",
-			paddingInline: "2.5",
-			paddingTop: "2",
-			paddingBottom: "1"
-		},
-		children: [
-			/* @__PURE__ */ jsx(SectionLabel, {
-				flex: "1",
-				children: "Outline"
-			}),
-			/* @__PURE__ */ jsx(Tooltip, {
-				label: allCollapsed ? "Expand all" : "Collapse all",
-				fz: "xs",
-				openDelay: 500,
-				withinPortal: false,
-				children: /* @__PURE__ */ jsx(ActionIcon, {
-					tabIndex: -1,
-					variant: "subtle",
-					size: "sm",
-					onClick: () => allCollapsed ? tree.expandAllNodes() : tree.collapseAllNodes(),
-					children: /* @__PURE__ */ jsx(IconListTree, { size: 14 })
-				})
-			}),
-			/* @__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(ScrollArea, {
-		type: "auto",
-		overscrollBehavior: "contain",
-		className: css({
-			flex: "1",
-			width: "100%",
-			minHeight: "0"
-		}),
-		children: /* @__PURE__ */ jsx(Tree, {
-			levelOffset: "var(--spacing-2\\.5)",
-			data: treeData,
-			tree,
-			selectOnClick: true,
-			classNames: { root: css({
-				paddingInline: "2",
-				paddingBottom: "3"
-			}) },
-			styles: { node: { paddingInlineStart: "var(--label-offset)" } },
-			renderNode: renderTreeNode
-		})
-	})] });
-};
-var renderTreeNode = ((payload) => {
-	return payload.node.nodeProps.type === "step" ? /* @__PURE__ */ jsx(StepRow, { ...payload }) : /* @__PURE__ */ jsx(FlowRow, { ...payload });
-});
-var StepRow = ({ node, elementProps, selected }) => {
-	const { stepnum, source, target, label, notes } = node.nodeProps;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box$1, {
-		...elementProps,
-		className: cx(elementProps.className, css(rowBase, { alignItems: "flex-start" })),
-		children: [/* @__PURE__ */ jsxs(Box$1, {
-			className: css(leadingIcons),
-			children: [/* @__PURE__ */ jsx(StepNum, { children: stepnum }), /* @__PURE__ */ jsx(IconArrowRight, {
-				size: 13,
-				className: css({
-					flex: "none",
-					color: "text.dimmed"
-				})
-			})]
-		}), label ? /* @__PURE__ */ jsx(MultilineLabelSpan, { children: label }) : /* @__PURE__ */ jsxs(HStack, {
-			css: {
-				gap: "1",
-				minWidth: "0",
-				flex: "1",
-				minHeight: rowLeadingHeight
-			},
-			children: [
-				/* @__PURE__ */ jsx(LabelSpan, {
-					css: {
-						flex: "none",
-						color: "text.dimmed"
-					},
-					children: source
-				}),
-				/* @__PURE__ */ jsx(IconArrowRight, {
-					size: 11,
-					className: css({
-						flex: "none",
-						color: "text.dimmed"
-					})
-				}),
-				/* @__PURE__ */ jsx(LabelSpan, { children: target })
-			]
-		})]
-	}), notes && /* @__PURE__ */ jsx(Markdown, {
-		value: RichText.from(notes),
-		fontSize: "sm",
-		textScale: .9,
-		className: css({
-			background: "surface.sunken",
-			border: "1px solid {colors.surface.sunken.border}",
-			rounded: "md",
-			cursor: "default",
-			marginBlockStart: "1",
-			marginBlockEnd: "2",
-			paddingInline: "4",
-			paddingBlock: "2"
-		}),
-		style: {
-			marginInlineStart: "calc(-1 * var(--label-offset))",
-			display: selected ? "block" : "none"
-		}
-	})] });
-};
-var FlowRow = ({ node, expanded, elementProps }) => {
-	const { type, title } = node.nodeProps;
-	const { paletteClass, tag, Icon } = flowPresentation[type];
-	return /* @__PURE__ */ jsxs(Box$1, {
-		...elementProps,
-		className: cx(elementProps.className, paletteClass, css(rowBase)),
-		children: [
-			/* @__PURE__ */ jsx(IconChevronRight, {
-				size: 14,
-				className: css({
-					flex: "none",
-					color: "text.dimmed",
-					transition: "transform 150ms ease",
-					"&[data-expanded=\"true\"]": { transform: "rotate(90deg)" }
-				}),
-				"data-expanded": expanded
-			}),
-			/* @__PURE__ */ jsx(Icon, {
-				size: 14,
-				className: css({
-					flex: "none",
-					color: "colorPalette.text"
-				})
-			}),
-			/* @__PURE__ */ jsx(styled.span, {
-				css: {
-					...labelText,
-					fontWeight: "medium"
-				},
-				children: title ?? tag
-			}),
-			/* @__PURE__ */ jsx(FlowTag, { children: tag })
-		]
-	});
-};
-//#endregion
-export { SequenceOutlinePanel };

package/dist/likec4diagram/ui/sequence-outline/state.d.ts

@@ -1,36 +0,0 @@
-import { DynamicViewFlow, scalar, StepPath } from '@likec4/core';
-import { TreeNodeData } from '@mantine/core';
-import { DiagramContext } from '../../state/types';
-export interface OutlineTreeNodeStep extends TreeNodeData {
-    readonly value: StepPath;
-    readonly nodeProps: Readonly<{
-        readonly type: 'step';
-        /** Global step number (1-based) across all flows */
-        readonly stepnum: number;
-        /** Title of the source actor */
-        readonly source: string;
-        /** Title of the target actor */
-        readonly target: string;
-        /** Relationship label, if any */
-        readonly label: string | null;
-        readonly notes: scalar.MarkdownOrString | null;
-    }>;
-}
-export interface OutlineTreeNodeFlow extends TreeNodeData {
-    readonly value: StepPath;
-    readonly nodeProps: Readonly<{
-        readonly type: DynamicViewFlow.SubFlowType;
-        /** Friendly title of the sub-flow, if defined */
-        readonly title: string | undefined;
-    }>;
-    children: OutlineTreeNodeData[];
-}
-export type OutlineTreeNodeData = OutlineTreeNodeStep | OutlineTreeNodeFlow;
-export type OutlineTreeNodes = OutlineTreeNodeData[];
-/**
- * Type guard narrowing a tree node to a sub-flow node.
- * (The discriminant lives on the nested `nodeProps.type`, so an explicit guard
- * is needed for reliable narrowing.)
- */
-export declare function isOutlineFlowNode(node: OutlineTreeNodeData): node is OutlineTreeNodeFlow;
-export declare function useTreeData(flow: DynamicViewFlow, collapsed: DiagramContext['collapsedSequenceFlows']): OutlineTreeNodes;

package/dist/likec4diagram/ui/sequence-outline/state.js

@@ -1,55 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useMemo } from "react";
-import "@likec4/core";
-//#region src/likec4diagram/ui/sequence-outline/state.ts
-function buildTree(flow, collapsedFlows) {
-	const tree = [];
-	let currentFlow = tree;
-	let isCollapsed = false;
-	flow.walk({
-		step: ({ step, stepnum, source, target, edge }) => {
-			if (isCollapsed) return;
-			currentFlow.push({
-				label: edge.label ?? `${source.title} → ${target.title}`,
-				value: step,
-				nodeProps: {
-					type: "step",
-					stepnum: stepnum.global,
-					source: source.title,
-					target: target.title,
-					label: edge.label,
-					notes: edge.notes ?? null
-				}
-			});
-		},
-		subflow: ({ subflow }) => {
-			if (collapsedFlows[subflow.id]) {
-				isCollapsed = true;
-				return () => {
-					isCollapsed = false;
-				};
-			}
-			const node = {
-				label: subflow.title ?? subflow._type,
-				value: subflow.id,
-				nodeProps: {
-					type: subflow._type,
-					title: subflow.title
-				},
-				children: []
-			};
-			const parent = currentFlow;
-			parent.push(node);
-			currentFlow = node.children;
-			return () => {
-				currentFlow = parent;
-			};
-		}
-	});
-	return tree;
-}
-function useTreeData(flow, collapsed) {
-	return useMemo(() => buildTree(flow, collapsed), [flow, collapsed]);
-}
-//#endregion
-export { useTreeData };

package/dist/likec4diagram/useLayoutConstraints.d.ts

@@ -1,54 +0,0 @@
-import { NonEmptyArray } from '@likec4/core';
-import { Dimensions, XYPoint, BBox } from '@likec4/core/geometry';
-import { InternalNode as RFInternalNode, OnNodeDrag } from '@xyflow/react';
-import { XYStoreApi } from '../hooks';
-import { Types } from './types';
-type InternalNode = RFInternalNode<Types.AnyNode>;
-declare abstract class Rect {
-    static readonly LeftPadding = 42;
-    static readonly RightPadding = 42;
-    static readonly TopPadding = 60;
-    static readonly BottomPadding = 42;
-    id: string;
-    minX: number;
-    minY: number;
-    maxX: number;
-    maxY: number;
-    readonly initial: BBox;
-    get positionAbsolute(): XYPoint;
-    set positionAbsolute(pos: XYPoint);
-    get dimensions(): Dimensions;
-    get diff(): XYPoint;
-    get isMoved(): boolean;
-    get isResized(): boolean;
-    get position(): XYPoint;
-    protected abstract parent: CompoundRect | null;
-    constructor(xynode: InternalNode, parent?: CompoundRect | null);
-}
-declare class CompoundRect extends Rect {
-    readonly parent: CompoundRect | null;
-    readonly children: Rect[];
-    constructor(xynode: InternalNode, parent?: CompoundRect | null);
-}
-declare class Leaf extends Rect {
-    readonly parent: CompoundRect | null;
-    constructor(xynode: InternalNode, parent?: CompoundRect | null);
-}
-export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNodeIds: NonEmptyArray<string>): {
-    rects: ReadonlyMap<string, Leaf | CompoundRect>;
-    onMove: () => void;
-    updateXYFlow: () => void;
-    hasChanges: () => boolean;
-    cancelPending: () => void;
-    flushPending: () => void;
-};
-type LayoutConstraints = {
-    onNodeDragStart: OnNodeDrag<Types.Node>;
-    onNodeDrag: OnNodeDrag<Types.Node>;
-    onNodeDragStop: OnNodeDrag<Types.Node>;
-};
-/**
- * Keeps the layout constraints (parent nodes and children) when dragging a node
- */
-export declare function useLayoutConstraints(): LayoutConstraints;
-export {};