@likec4/diagram 1.59.4 → 1.61.0

package/dist/navigationpanel/controls/ViewDetailsButton.js

@@ -1,121 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useRootContainer } from "../../context/RootContainerContext.js";
-import { selectDiagramContext, useDiagramSelector } from "../../hooks/safeContext.js";
-import { FloatingWindow as FloatingWindow$1 } from "../../components/FloatingWindow.js";
-import { ViewDetailsWindow } from "../windows/ViewDetailsWindow.js";
-import { cx } from "@likec4/styles/css";
-import { IconId, IconLink } from "@tabler/icons-react";
-import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { clamp } from "remeda";
-import { UnstyledButton } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { Box as Box$1, HStack } from "@likec4/styles/jsx";
-import { hstack } from "@likec4/styles/patterns";
-import * as m from "motion/react-m";
-//#region src/navigationpanel/controls/ViewDetailsButton.tsx
-var selector = selectDiagramContext(({ view }) => {
-	return {
-		id: view.id,
-		links: view.links?.length ?? 0
-	};
-});
-function ViewDetailsButton({ onOpen }) {
-	const { ref: rootRef } = useRootContainer();
-	const [opened, handlers] = useDisclosure(false);
-	const data = useDiagramSelector(selector);
-	const initialsRef = useRef({
-		dimensions: {
-			initialWidth: 200,
-			initialHeight: 200
-		},
-		initialPosition: {
-			top: 65,
-			left: 32
-		}
-	});
-	const toggle = () => {
-		if (opened) handlers.close();
-		else {
-			const rootElement = rootRef.current;
-			if (rootElement) {
-				const viewport = rootElement.getBoundingClientRect();
-				const panelRect = rootElement.querySelector("[data-panel=\"navigation\"]")?.getBoundingClientRect();
-				let height = viewport.height - 80;
-				if (panelRect) {
-					initialsRef.current.initialPosition.top = panelRect.bottom + 10;
-					initialsRef.current.initialPosition.left = panelRect.left + 55;
-					height = viewport.height - (panelRect.top - viewport.top + panelRect.height) - 32;
-				}
-				initialsRef.current.dimensions.initialHeight = Math.max(100, height);
-				initialsRef.current.dimensions.initialWidth = clamp(viewport.width * .3, {
-					min: 250,
-					max: 500
-				});
-			}
-			handlers.open();
-			onOpen();
-		}
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ViewDetailsCardTrigger, {
-		linksCount: data.links,
-		onClick: toggle,
-		opened
-	}), opened && /* @__PURE__ */ jsx(FloatingWindow$1, {
-		windowId: "view-details",
-		...initialsRef.current,
-		onClose: handlers.close,
-		children: /* @__PURE__ */ jsx(ViewDetailsWindow, {})
-	})] });
-}
-var ViewDetailsCardTrigger = ({ linksCount, onClick, opened }) => /* @__PURE__ */ jsxs(UnstyledButton, {
-	component: m.button,
-	layout: "position",
-	"aria-selected": opened,
-	whileTap: {
-		scale: .95,
-		translateY: 1
-	},
-	onClick: (e) => {
-		e.stopPropagation();
-		onClick();
-	},
-	className: cx("group", hstack({
-		gap: "2",
-		layerStyle: "likec4.panel.action",
-		display: {
-			base: "none",
-			"@/xs": "flex"
-		},
-		_selected: {
-			backgroundColor: {
-				base: "primary.body",
-				_hover: "primary.body.hover"
-			},
-			color: {
-				base: "primary.text",
-				_hover: "primary.text"
-			}
-		}
-	}), ``),
-	children: [/* @__PURE__ */ jsx(IconId, {
-		size: 16,
-		stroke: 1.8
-	}), linksCount > 0 && /* @__PURE__ */ jsxs(HStack, {
-		gap: "0.5",
-		children: [/* @__PURE__ */ jsx(IconLink, {
-			size: 14,
-			stroke: 2
-		}), /* @__PURE__ */ jsx(Box$1, {
-			css: {
-				fontSize: "xxs",
-				fontWeight: "bold",
-				lineHeight: "1",
-				opacity: "0.7"
-			},
-			children: linksCount
-		})]
-	})]
-});
-//#endregion
-export { ViewDetailsButton };

package/dist/navigationpanel/controls/index.d.ts

@@ -1,7 +0,0 @@
-export { LayoutWarning } from './LayoutWarning';
-export { LogoButton } from './LogoButton';
-export { NavigationButtons } from './NavigationButtons';
-export { OpenSource } from './OpenSource';
-export { SearchControl } from './SearchControl';
-export { ToggleReadonly } from './ToggleReadonly';
-export { ViewDetailsButton } from './ViewDetailsButton';

package/dist/navigationpanel/dropdown/ProjectsMenu.d.ts

@@ -1,2 +0,0 @@
-import { NamedExoticComponent } from 'react';
-export declare const ProjectsMenu: NamedExoticComponent<object>;

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -1,83 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useLikeC4ProjectId, useLikeC4ProjectsContext } from "../../hooks/useLikeC4Project.js";
-import { css } from "@likec4/styles/css";
-import { IconChevronDown } from "@tabler/icons-react";
-import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Menu, MenuDropdown, MenuItem, MenuTarget, ScrollArea } from "@mantine/core";
-import { Box as Box$1, HStack } from "@likec4/styles/jsx";
-//#region src/navigationpanel/dropdown/ProjectsMenu.tsx
-var 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();
-	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",
-			classNames: { itemLabel: css({
-				fontSize: "xs",
-				truncate: true,
-				maxWidth: "[250px]"
-			}) },
-			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__ */ jsx(MenuDropdown, { children: /* @__PURE__ */ jsx(ScrollArea.Autosize, {
-				mah: "calc(100cqh - 200px)",
-				children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(MenuItem, {
-					onClick: (e) => {
-						if (projectId === id) {
-							e.stopPropagation();
-							return;
-						}
-						onProjectChange(id);
-					},
-					children: title ?? id
-				}, id))
-			}) })]
-		})]
-	});
-}
-//#endregion
-export { ProjectsMenu };

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.d.ts

@@ -1,4 +0,0 @@
-import { NamedExoticComponent } from 'react';
-export declare const ApplySemanticLayout: NamedExoticComponent<{
-    visible?: boolean;
-}>;

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.js

@@ -1,37 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { PanelActionIcon } from "../_common.js";
-import { useEditorActorStateHasTag } from "../../hooks/useEditorActor.js";
-import { Tooltip } from "./_common.js";
-import { IconSparkles } from "@tabler/icons-react";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
-var 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";
-//#endregion
-export { ApplySemanticLayout };

package/dist/navigationpanel/editorpanel/CenterCamera.d.ts

@@ -1 +0,0 @@
-export declare const CenterCamera: () => import("react").JSX.Element;

package/dist/navigationpanel/editorpanel/CenterCamera.js

@@ -1,19 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { PanelActionIcon } from "../_common.js";
-import { Tooltip } from "./_common.js";
-import { IconFocusCentered } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-//#region src/navigationpanel/editorpanel/CenterCamera.tsx
-var CenterCamera = () => {
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsx(Tooltip, {
-		label: "Center camera",
-		children: /* @__PURE__ */ jsx(PanelActionIcon, {
-			onClick: () => diagram.fitDiagram(),
-			children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-		})
-	});
-};
-//#endregion
-export { CenterCamera };

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.d.ts

@@ -1 +0,0 @@
-export declare const ChangeAutoLayoutButton: () => import("react").JSX.Element | null;

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -1,188 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { PanelActionIcon } from "../_common.js";
-import { Tooltip as Tooltip$1 } from "./_common.js";
-import { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb } from "./styles.js";
-import { IconLayoutDashboard } from "@tabler/icons-react";
-import { forwardRef, useState } from "react";
-import { 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";
-//#region src/navigationpanel/editorpanel/ChangeAutoLayoutButton.tsx
-var selector = selectDiagramContext((state) => ({
-	viewId: state.view.id,
-	isManualLayout: state.view._layout === "manual",
-	autoLayout: state.view.autoLayout
-}), deepEqual);
-var ChangeAutoLayoutButton = () => {
-	const diagram = useDiagram();
-	const [rootRef, setRootRef] = useState(null);
-	const [controlsRefs, setControlsRefs] = useState({});
-	const { autoLayout, viewId, isManualLayout } = useDiagramSelector(selector);
-	const portalProps = useMantinePortalProps();
-	const { ref, hovered: isSpacingHovered } = useHover();
-	const setControlRef = (name) => (node) => {
-		controlsRefs[name] = node;
-		setControlsRefs(controlsRefs);
-	};
-	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
-			}
-		});
-	};
-	if (isManualLayout) return null;
-	return /* @__PURE__ */ jsxs(Popover, {
-		position: "right-start",
-		clickOutsideEvents: ["pointerdown"],
-		offset: { mainAxis: 12 },
-		...portalProps,
-		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
-			label: "Change Auto Layout",
-			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: [
-					/* @__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)
-				]
-			})
-		})]
-	});
-};
-var MAX_SPACING = 400;
-var 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
-				]
-			})
-		})]
-	});
-});
-//#endregion
-export { ChangeAutoLayoutButton };

package/dist/navigationpanel/editorpanel/EditorPanel.d.ts

@@ -1 +0,0 @@
-export declare function EditorPanel(): import("react").JSX.Element;

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -1,62 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { ApplySemanticLayout } from "./ApplySemanticLayout.js";
-import { CenterCamera } from "./CenterCamera.js";
-import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
-import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
-import { ToggleReadonly } from "./ToggleReadonly.js";
-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";
-//#region src/navigationpanel/editorpanel/EditorPanel.tsx
-var variants = {
-	hidden: {
-		opacity: 0,
-		translateX: -20
-	},
-	visible: {
-		opacity: 1,
-		translateX: 0
-	},
-	exit: {
-		opacity: 0,
-		translateX: -20
-	}
-};
-function EditorPanel() {
-	const { enableReadOnly, enableCompareWithLatest, enableAISemanticLayout } = useEnabledFeatures();
-	const showAiSemanticLayoutButton = !enableCompareWithLatest && !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 })
-				]
-			})
-		})
-	});
-}
-//#endregion
-export { EditorPanel };

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.d.ts

@@ -1,4 +0,0 @@
-import { TooltipProps } from '@mantine/core';
-import { MemoExoticComponent } from 'react';
-export declare function manualLayoutTooltipProps(isPopoverOpen: boolean): Pick<TooltipProps, 'opened'>;
-export declare const ManualLayoutToolsButton: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -1,134 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { PanelActionIcon } from "../_common.js";
-import { Tooltip as Tooltip$1 } from "./_common.js";
-import { css } from "@likec4/styles/css";
-import { IconLayoutAlignBottom, IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignMiddle, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutBoardSplit, IconLayoutCollage, IconRouteOff } from "@tabler/icons-react";
-import { memo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverDropdown, PopoverTarget } from "@mantine/core";
-import "@mantine/hooks";
-import { Box as Box$1 } from "@likec4/styles/jsx";
-import { hstack } from "@likec4/styles/patterns";
-//#region src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx
-var 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 } : {};
-}
-var 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";
-//#endregion
-export { ManualLayoutToolsButton, manualLayoutTooltipProps };

package/dist/navigationpanel/editorpanel/ToggleReadonly.d.ts

@@ -1 +0,0 @@
-export declare const ToggleReadonly: () => import("react").JSX.Element;