@likec4/diagram 1.59.4 → 1.61.0

package/dist/navigationpanel/dropdown/ProjectsMenu.mjs

@@ -0,0 +1,118 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronDown from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.mjs";
+import IconSearch from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
+import { useLikeC4ProjectId, useLikeC4ProjectsContext } from "../../hooks/useLikeC4Project.mjs";
+import { filterProjects, projectSearchHighlights } from "../../utils/filterProjects.mjs";
+import { css } from "@likec4/styles/css";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Highlight, Menu, MenuDropdown, MenuItem, MenuSearch, MenuTarget, ScrollArea } from "@mantine/core";
+import { Box as Box$1, HStack } from "@likec4/styles/jsx";
+
+// src/navigationpanel/dropdown/ProjectsMenu.tsx
+const ProjectsMenu = memo((_) => {
+	const { projects, onProjectChange } = useLikeC4ProjectsContext();
+	if (projects.length <= 1) return null;
+	return /* @__PURE__ */ jsx(WithProjectsMenu, {
+		projects,
+		onProjectChange
+	});
+});
+function WithProjectsMenu({ projects, onProjectChange }) {
+	const projectId = useLikeC4ProjectId();
+	const [search, setSearch] = useState("");
+	const found = filterProjects(projects, search);
+	const highlight = projectSearchHighlights(search);
+	return /* @__PURE__ */ jsxs(HStack, {
+		gap: "1",
+		alignItems: "baseline",
+		children: [/* @__PURE__ */ jsx(Box$1, {
+			css: {
+				fontWeight: "normal",
+				fontSize: "xxs",
+				color: "text.dimmed",
+				userSelect: "none"
+			},
+			children: "Project"
+		}), /* @__PURE__ */ jsxs(Menu, {
+			withinPortal: false,
+			shadow: "md",
+			position: "bottom-start",
+			width: 300,
+			classNames: { itemLabel: css({
+				fontSize: "xs",
+				truncate: true
+			}) },
+			offset: { mainAxis: 3 },
+			children: [/* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(Button, {
+				tabIndex: -1,
+				autoFocus: false,
+				variant: "subtle",
+				size: "compact-xs",
+				color: "gray",
+				radius: "sm",
+				maw: 300,
+				classNames: {
+					root: css({
+						fontWeight: "normal",
+						fontSize: "xxs",
+						height: "auto",
+						lineHeight: "tight",
+						px: "1",
+						py: "0.5"
+					}),
+					section: css({ "&:is([data-position=\"right\"])": { marginInlineStart: "1" } })
+				},
+				rightSection: /* @__PURE__ */ jsx(IconChevronDown, {
+					opacity: .5,
+					size: 12,
+					stroke: 1.5
+				}),
+				children: projectId
+			}) }), /* @__PURE__ */ jsxs(MenuDropdown, { children: [/* @__PURE__ */ jsx(MenuSearch, {
+				size: "xs",
+				mb: 4,
+				placeholder: `Search ${projects.length} projects (* wildcard)`,
+				leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 12 }),
+				value: search,
+				onChange: (e) => setSearch(e.currentTarget.value)
+			}), /* @__PURE__ */ jsxs(ScrollArea.Autosize, {
+				mah: "min(60vh, 420px)",
+				type: "auto",
+				children: [found.length === 0 && /* @__PURE__ */ jsx(Box$1, {
+					css: {
+						fontSize: "xs",
+						color: "text.dimmed",
+						px: "2",
+						py: "1"
+					},
+					children: "No matching project"
+				}), found.map(({ id, title }) => /* @__PURE__ */ jsx(MenuItem, {
+					fw: projectId === id ? 600 : void 0,
+					rightSection: title && title !== id && /* @__PURE__ */ jsx(Highlight, {
+						component: "span",
+						highlight,
+						fz: "10px",
+						c: "dimmed",
+						children: id
+					}),
+					onClick: (e) => {
+						if (projectId === id) {
+							e.stopPropagation();
+							return;
+						}
+						onProjectChange(id);
+					},
+					children: /* @__PURE__ */ jsx(Highlight, {
+						component: "span",
+						highlight,
+						inherit: true,
+						children: title ?? id
+					})
+				}, id))]
+			})] })]
+		})]
+	});
+}
+
+export { ProjectsMenu };

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.mjs

@@ -0,0 +1,38 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconSparkles from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSparkles.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { useEditorActorStateHasTag } from "../../hooks/useEditorActor.mjs";
+import { PanelActionIcon } from "../_common.mjs";
+import { Tooltip } from "./_common.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+// src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
+const ApplySemanticLayout = memo(({ visible = true }) => {
+	const diagram = useDiagram();
+	const isBusy = useEditorActorStateHasTag("ai-semantic-layout");
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Semantic Layout with AI",
+		children: /* @__PURE__ */ jsx(PanelActionIcon, {
+			loading: isBusy,
+			initial: { display: visible ? "block" : "none" },
+			animate: {
+				display: visible ? "block" : "none",
+				opacity: visible ? 1 : .2,
+				x: visible ? 0 : -5,
+				y: visible ? 0 : -8
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.editorActor().send({ type: "change.semantic-layout" });
+			},
+			children: /* @__PURE__ */ jsx(IconSparkles, {
+				size: 14,
+				stroke: 2
+			})
+		})
+	});
+});
+ApplySemanticLayout.displayName = "ApplySemanticLayout";
+
+export { ApplySemanticLayout };

package/dist/navigationpanel/editorpanel/CenterCamera.mjs

@@ -0,0 +1,20 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconFocusCentered from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { PanelActionIcon } from "../_common.mjs";
+import { Tooltip } from "./_common.mjs";
+import { jsx } from "react/jsx-runtime";
+
+// src/navigationpanel/editorpanel/CenterCamera.tsx
+const CenterCamera = () => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Center camera",
+		children: /* @__PURE__ */ jsx(PanelActionIcon, {
+			onClick: () => diagram.fitDiagram(),
+			children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+		})
+	});
+};
+
+export { CenterCamera };

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.mjs

@@ -0,0 +1,248 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconLayoutDashboard from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.mjs";
+import { useCurrentViewRouting } from "../../hooks/useCurrentView.mjs";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
+import { PanelActionIcon } from "../_common.mjs";
+import { Tooltip as Tooltip$1 } from "./_common.mjs";
+import { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb } from "./styles.mjs";
+import { forwardRef, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useDebouncedCallback } from "@react-hookz/web";
+import { deepEqual } from "fast-equals";
+import { Box, Flex, FloatingIndicator, Popover, PopoverDropdown, PopoverTarget, Text, UnstyledButton } from "@mantine/core";
+import { clampUseMovePosition, useHover, useMergedRef, useMove, useUncontrolled } from "@mantine/hooks";
+
+// src/navigationpanel/editorpanel/ChangeAutoLayoutButton.tsx
+const selector = selectDiagramContext((state) => ({
+	viewId: state.view.id,
+	isManualLayout: state.view._layout === "manual",
+	autoLayout: state.view.autoLayout
+}), deepEqual);
+const ChangeAutoLayoutButton = () => {
+	const diagram = useDiagram();
+	const [rootRef, setRootRef] = useState(null);
+	const [controlsRefs, setControlsRefs] = useState({});
+	const [routingRefs, setRoutingRefs] = useState({
+		spline: null,
+		ortho: null
+	});
+	const { autoLayout, viewId, isManualLayout } = useDiagramSelector(selector);
+	const portalProps = useMantinePortalProps();
+	const routing = useCurrentViewRouting();
+	const { ref, hovered: isSpacingHovered } = useHover();
+	const setControlRef = (name) => (node) => {
+		controlsRefs[name] = node;
+		setControlsRefs(controlsRefs);
+	};
+	const routingRef = useMemo(() => {
+		const callback = (name) => (node) => {
+			setRoutingRefs((refs) => refs[name] === node ? refs : {
+				...refs,
+				[name]: node
+			});
+		};
+		return {
+			spline: callback("spline"),
+			ortho: callback("ortho")
+		};
+	}, []);
+	const setAutoLayout = (direction) => (event) => {
+		event.stopPropagation();
+		diagram.fitDiagram();
+		diagram.triggerChange({
+			op: "change-autolayout",
+			layout: {
+				...autoLayout,
+				direction
+			}
+		});
+	};
+	const setSpacing = (nodeSep, rankSep) => {
+		diagram.fitDiagram();
+		diagram.triggerChange({
+			op: "change-autolayout",
+			layout: {
+				...autoLayout,
+				nodeSep,
+				rankSep
+			}
+		});
+	};
+	const setRouting = (value) => (event) => {
+		event.stopPropagation();
+		diagram.triggerChange({
+			op: "change-routing",
+			routing: value
+		});
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		position: "right-start",
+		clickOutsideEvents: ["pointerdown"],
+		offset: { mainAxis: 12 },
+		...portalProps,
+		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
+			label: "Layout options",
+			children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) }) })
+		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+			className: "likec4-top-left-panel",
+			p: 8,
+			pt: 6,
+			opacity: isSpacingHovered ? .6 : 1,
+			children: /* @__PURE__ */ jsxs(Box, {
+				pos: "relative",
+				ref: setRootRef,
+				children: [
+					!isManualLayout && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(FloatingIndicator, {
+							target: controlsRefs[autoLayout.direction],
+							parent: rootRef,
+							className: autolayoutIndicator
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							mb: 10,
+							children: /* @__PURE__ */ jsx(Text, {
+								inline: true,
+								fz: "xs",
+								c: "dimmed",
+								fw: 500,
+								children: "Auto layout:"
+							})
+						}),
+						/* @__PURE__ */ jsxs(Flex, {
+							gap: 2,
+							wrap: "wrap",
+							justify: "stretch",
+							maw: 160,
+							children: [
+								/* @__PURE__ */ jsx(UnstyledButton, {
+									className: autolayoutButton,
+									ref: setControlRef("TB"),
+									onClick: setAutoLayout("TB"),
+									children: "Top-Bottom"
+								}),
+								/* @__PURE__ */ jsx(UnstyledButton, {
+									className: autolayoutButton,
+									ref: setControlRef("BT"),
+									onClick: setAutoLayout("BT"),
+									children: "Bottom-Top"
+								}),
+								/* @__PURE__ */ jsx(UnstyledButton, {
+									className: autolayoutButton,
+									ref: setControlRef("LR"),
+									onClick: setAutoLayout("LR"),
+									children: "Left-Right"
+								}),
+								/* @__PURE__ */ jsx(UnstyledButton, {
+									className: autolayoutButton,
+									ref: setControlRef("RL"),
+									onClick: setAutoLayout("RL"),
+									children: "Right-Left"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							my: 10,
+							children: /* @__PURE__ */ jsx(Text, {
+								inline: true,
+								fz: "xs",
+								c: "dimmed",
+								fw: 500,
+								children: "Spacing:"
+							})
+						}),
+						/* @__PURE__ */ jsx(SpacingSliders, {
+							ref,
+							isVertical: autoLayout.direction === "TB" || autoLayout.direction === "BT",
+							nodeSep: autoLayout.nodeSep,
+							rankSep: autoLayout.rankSep,
+							onChange: setSpacing
+						}, viewId)
+					] }),
+					/* @__PURE__ */ jsx(FloatingIndicator, {
+						target: routingRefs[routing],
+						parent: rootRef,
+						className: autolayoutIndicator
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						mt: isManualLayout ? 0 : 10,
+						mb: 10,
+						children: /* @__PURE__ */ jsx(Text, {
+							inline: true,
+							fz: "xs",
+							c: "dimmed",
+							fw: 500,
+							children: "Routing:"
+						})
+					}),
+					/* @__PURE__ */ jsxs(Flex, {
+						gap: 2,
+						wrap: "wrap",
+						justify: "stretch",
+						maw: 160,
+						children: [/* @__PURE__ */ jsx(UnstyledButton, {
+							className: autolayoutButton,
+							ref: routingRef.spline,
+							onClick: setRouting("spline"),
+							children: "Spline"
+						}), /* @__PURE__ */ jsx(UnstyledButton, {
+							className: autolayoutButton,
+							ref: routingRef.ortho,
+							onClick: setRouting("ortho"),
+							children: "Ortho"
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+const MAX_SPACING = 400;
+const SpacingSliders = forwardRef(({ isVertical, nodeSep, rankSep, onChange }, _ref) => {
+	if (!isVertical) [nodeSep, rankSep] = [rankSep, nodeSep];
+	const propagateChange = useDebouncedCallback(({ x, y }) => {
+		if (!isVertical) [x, y] = [y, x];
+		onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING));
+	}, [onChange, isVertical], 250, 2e3);
+	const [value, setValue] = useUncontrolled({
+		defaultValue: clampUseMovePosition({
+			x: (nodeSep ?? 100) / MAX_SPACING,
+			y: (rankSep ?? 120) / MAX_SPACING
+		}),
+		onChange: propagateChange
+	});
+	const { ref } = useMove(setValue);
+	let nodeSepValue = Math.round(value.x * MAX_SPACING);
+	let rankSepValue = Math.round(value.y * MAX_SPACING);
+	if (!isVertical) [nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue];
+	const mergedRef = useMergedRef(ref, _ref);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: mergedRef,
+		className: spacingSliderBody,
+		pt: "100%",
+		children: [/* @__PURE__ */ jsx(Box, {
+			className: spacingSliderThumb,
+			style: {
+				left: `${value.x * 100}%`,
+				top: `${value.y * 100}%`
+			}
+		}), /* @__PURE__ */ jsx(Box, {
+			pos: "absolute",
+			left: 2,
+			bottom: 2,
+			children: /* @__PURE__ */ jsxs(Text, {
+				component: "div",
+				fz: 8,
+				c: "dimmed",
+				fw: 500,
+				children: [
+					rankSepValue,
+					", ",
+					nodeSepValue
+				]
+			})
+		})]
+	});
+});
+
+export { ChangeAutoLayoutButton };

package/dist/navigationpanel/editorpanel/EditorPanel.mjs

@@ -0,0 +1,64 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { useIsComparingLayouts } from "../../context/ComparingLayoutsContext.mjs";
+import { ApplySemanticLayout } from "./ApplySemanticLayout.mjs";
+import { CenterCamera } from "./CenterCamera.mjs";
+import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.mjs";
+import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.mjs";
+import { ToggleReadonly } from "./ToggleReadonly.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TooltipGroup } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { vstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+
+// src/navigationpanel/editorpanel/EditorPanel.tsx
+const variants = {
+	hidden: {
+		opacity: 0,
+		translateX: -20
+	},
+	visible: {
+		opacity: 1,
+		translateX: 0
+	},
+	exit: {
+		opacity: 0,
+		translateX: -20
+	}
+};
+function EditorPanel() {
+	const { enableReadOnly, enableAISemanticLayout } = useEnabledFeatures();
+	const showAiSemanticLayoutButton = !useIsComparingLayouts() && !enableReadOnly && enableAISemanticLayout;
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		propagate: true,
+		children: !enableReadOnly && /* @__PURE__ */ jsx(m$1.div, {
+			layout: "position",
+			className: vstack({
+				gap: "xs",
+				layerStyle: "likec4.panel",
+				position: "relative",
+				cursor: "pointer",
+				padding: "xxs",
+				pointerEvents: "all"
+			}),
+			initial: "hidden",
+			animate: "visible",
+			exit: "exit",
+			variants,
+			children: /* @__PURE__ */ jsxs(TooltipGroup, {
+				openDelay: 600,
+				closeDelay: 120,
+				children: [
+					/* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
+					/* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
+					/* @__PURE__ */ jsx(CenterCamera, {}),
+					/* @__PURE__ */ jsx(ToggleReadonly, {}),
+					/* @__PURE__ */ jsx(ApplySemanticLayout, { visible: showAiSemanticLayoutButton })
+				]
+			})
+		})
+	});
+}
+
+export { EditorPanel };

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.mjs

@@ -0,0 +1,142 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconLayoutAlignBottom from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.mjs";
+import IconLayoutAlignCenter from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.mjs";
+import IconLayoutAlignLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.mjs";
+import IconLayoutAlignMiddle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.mjs";
+import IconLayoutAlignRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.mjs";
+import IconLayoutAlignTop from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.mjs";
+import IconLayoutBoardSplit from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.mjs";
+import IconLayoutCollage from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.mjs";
+import IconRouteOff from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
+import { PanelActionIcon } from "../_common.mjs";
+import { Tooltip as Tooltip$1 } from "./_common.mjs";
+import { css } from "@likec4/styles/css";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverDropdown, PopoverTarget } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+
+// src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx
+const Action = ({ label, icon, onClick }) => /* @__PURE__ */ jsx(Tooltip$1, {
+	label,
+	withinPortal: false,
+	position: "top",
+	children: /* @__PURE__ */ jsx(PanelActionIcon, {
+		classNames: {
+			root: "action-icon",
+			icon: css({ "& > svg": {
+				width: "[70%]",
+				height: "[70%]"
+			} })
+		},
+		onClick,
+		children: icon
+	})
+});
+function manualLayoutTooltipProps(isPopoverOpen) {
+	return isPopoverOpen ? { opened: false } : {};
+}
+const ManualLayoutToolsButton = memo(() => {
+	const diagram = useDiagram();
+	const portalProps = useMantinePortalProps();
+	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		onChange: setIsPopoverOpen,
+		position: "right",
+		offset: { mainAxis: 12 },
+		clickOutsideEvents: ["pointerdown"],
+		...portalProps,
+		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
+			label: "Manual layouting tools",
+			...manualLayoutTooltipProps(isPopoverOpen),
+			children: /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) })
+		}) }), /* @__PURE__ */ jsxs(PopoverDropdown, {
+			className: hstack({
+				gap: "0.5",
+				layerStyle: "likec4.panel",
+				padding: "1",
+				pointerEvents: "all"
+			}),
+			children: [
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align in columns",
+					icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Column");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align left",
+					icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Left");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align center",
+					icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Center");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align right",
+					icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Right");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align in rows",
+					icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Row");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align top",
+					icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Top");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align middle",
+					icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Middle");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Align bottom",
+					icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.align("Bottom");
+					}
+				}),
+				/* @__PURE__ */ jsx(Action, {
+					label: "Reset all control points",
+					icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.resetEdgeControlPoints();
+					}
+				})
+			]
+		})]
+	});
+});
+ManualLayoutToolsButton.displayName = "ManualLayoutToolsButton";
+
+export { ManualLayoutToolsButton, manualLayoutTooltipProps };

package/dist/navigationpanel/editorpanel/ToggleReadonly.mjs

@@ -0,0 +1,23 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconLockOpen2 from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { PanelActionIcon } from "../_common.mjs";
+import { Tooltip } from "./_common.mjs";
+import { jsx } from "react/jsx-runtime";
+
+// src/navigationpanel/editorpanel/ToggleReadonly.tsx
+const ToggleReadonly = () => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Switch to Read-only",
+		children: /* @__PURE__ */ jsx(PanelActionIcon, {
+			onClick: () => diagram.toggleFeature("ReadOnly"),
+			children: /* @__PURE__ */ jsx(IconLockOpen2, {
+				size: 14,
+				stroke: 2
+			})
+		})
+	});
+};
+
+export { ToggleReadonly };

package/dist/navigationpanel/editorpanel/_common.mjs

@@ -0,0 +1,15 @@
+import { Tooltip } from "@mantine/core";
+
+// src/navigationpanel/editorpanel/_common.tsx
+const Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 600,
+	closeDelay: 120,
+	label: "",
+	children: null,
+	offset: 8,
+	position: "right"
+});
+
+export { Tooltip$1 as Tooltip };