@likec4/diagram 1.55.1 → 1.56.0

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -1,85 +1,68 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { hstack } from '@likec4/styles/patterns';
-import { Menu, UnstyledButton, Tooltip } from '@mantine/core';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
-import { stopPropagation } from '../../utils/xyflow.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-
-function CompareActionsMenu({
-  disabled = false,
-  onApplyLatestToManual,
-  onResetManualLayout
-}) {
-  return /* @__PURE__ */ jsxs(
-    Menu,
-    {
-      withinPortal: false,
-      floatingStrategy: "absolute",
-      shadow: "lg",
-      position: "bottom-start",
-      offset: { mainAxis: 4 },
-      disabled,
-      children: [
-        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(
-          UnstyledButton,
-          {
-            disabled,
-            className: cx(
-              "mantine-active",
-              hstack({
-                gap: "2",
-                py: "1.5",
-                px: "2",
-                lineHeight: "1",
-                textStyle: "xs",
-                fontWeight: "medium",
-                layerStyle: "likec4.panel.action",
-                userSelect: "none"
-              })
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Box, { children: "Actions" }),
-              /* @__PURE__ */ jsx(IconChevronDown, { size: 12, stroke: 2, opacity: 0.7 })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-          /* @__PURE__ */ jsxs(
-            Menu.Item,
-            {
-              disabled: !onApplyLatestToManual,
-              onClick: onApplyLatestToManual,
-              rightSection: onApplyLatestToManual && /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  onClick: stopPropagation,
-                  position: "right-start",
-                  label: /* @__PURE__ */ jsxs(Fragment, { children: [
-                    "Applies changes from the latest auto-layouted",
-                    /* @__PURE__ */ jsx("br", {}),
-                    "to saved snapshot, preserving (as possible)",
-                    /* @__PURE__ */ jsx("br", {}),
-                    "manual adjustments.",
-                    /* @__PURE__ */ jsx("br", {}),
-                    /* @__PURE__ */ jsx("br", {}),
-                    "You can undo this action."
-                  ] }),
-                  children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 14, stroke: 1.7, opacity: 0.5 })
-                }
-              ),
-              children: [
-                "Sync with latest",
-                !onApplyLatestToManual && /* @__PURE__ */ jsx(Box, { textStyle: "xs", children: "view type is changed" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Menu.Item, { onClick: onResetManualLayout, children: "Remove manual layout" })
-        ] })
-      ]
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { cx } from "@likec4/styles/css";
+import { IconChevronDown, IconInfoCircle } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Menu, Tooltip, UnstyledButton } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+//#region src/navigationpanel/comparepanel/CompareActionsMenu.tsx
+function CompareActionsMenu({ disabled = false, onApplyLatestToManual, onResetManualLayout }) {
+	return /* @__PURE__ */ jsxs(Menu, {
+		withinPortal: false,
+		floatingStrategy: "absolute",
+		shadow: "lg",
+		position: "bottom-start",
+		offset: { mainAxis: 4 },
+		disabled,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, {
+			disabled,
+			className: cx("mantine-active", hstack({
+				gap: "2",
+				py: "1.5",
+				px: "2",
+				lineHeight: "1",
+				textStyle: "xs",
+				fontWeight: "medium",
+				layerStyle: "likec4.panel.action",
+				userSelect: "none"
+			})),
+			children: [/* @__PURE__ */ jsx(Box$1, { children: "Actions" }), /* @__PURE__ */ jsx(IconChevronDown, {
+				size: 12,
+				stroke: 2,
+				opacity: .7
+			})]
+		}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [/* @__PURE__ */ jsxs(Menu.Item, {
+			disabled: !onApplyLatestToManual,
+			onClick: onApplyLatestToManual,
+			rightSection: onApplyLatestToManual && /* @__PURE__ */ jsx(Tooltip, {
+				onClick: stopPropagation,
+				position: "right-start",
+				label: /* @__PURE__ */ jsxs(Fragment, { children: [
+					"Applies changes from the latest auto-layouted",
+					/* @__PURE__ */ jsx("br", {}),
+					"to saved snapshot, preserving (as possible)",
+					/* @__PURE__ */ jsx("br", {}),
+					"manual adjustments.",
+					/* @__PURE__ */ jsx("br", {}),
+					/* @__PURE__ */ jsx("br", {}),
+					"You can undo this action."
+				] }),
+				children: /* @__PURE__ */ jsx(IconInfoCircle, {
+					size: 14,
+					stroke: 1.7,
+					opacity: .5
+				})
+			}),
+			children: ["Sync with latest", !onApplyLatestToManual && /* @__PURE__ */ jsx(Box$1, {
+				textStyle: "xs",
+				children: "view type is changed"
+			})]
+		}), /* @__PURE__ */ jsx(Menu.Item, {
+			onClick: onResetManualLayout,
+			children: "Remove manual layout"
+		})] })]
+	});
 }
-
+//#endregion
 export { CompareActionsMenu };

package/dist/navigationpanel/comparepanel/ComparePanel.js

@@ -1,168 +1,139 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { HStack } from '@likec4/styles/jsx';
-import { hstack, vstack } from '@likec4/styles/patterns';
-import { Divider, Button } from '@mantine/core';
-import { useIsMounted } from '@react-hookz/web';
-import { AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { memo, useState } from 'react';
-import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
-import { Tooltip } from '../_common.js';
-import { ComparePanelControls } from './ComparePanelControls.js';
-import { DriftsSummary } from './DriftsSummary.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useCallbackRef } from '../../hooks/useCallbackRef.js';
-
-const variants = {
-  initial: {
-    opacity: 0,
-    translateX: -20
-  },
-  animate: {
-    opacity: 1,
-    translateX: 0
-  },
-  exit: {
-    opacity: 0,
-    translateX: -20
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../../hooks/useCallbackRef.js";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
+import { Tooltip as Tooltip$1 } from "../_common.js";
+import { ComparePanelControls } from "./ComparePanelControls.js";
+import { DriftsSummary } from "./DriftsSummary.js";
+import { css } from "@likec4/styles/css";
+import { memo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useIsMounted } from "@react-hookz/web";
+import { Button, Divider } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { HStack } from "@likec4/styles/jsx";
+import { hstack, vstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+//#region src/navigationpanel/comparepanel/ComparePanel.tsx
+var variants = {
+	initial: {
+		opacity: 0,
+		translateX: -20
+	},
+	animate: {
+		opacity: 1,
+		translateX: 0
+	},
+	exit: {
+		opacity: 0,
+		translateX: -20
+	}
 };
-const ComparePanel = memo(() => {
-  const portalProps = useMantinePortalProps();
-  const isMounted = useIsMounted();
-  const { enableCompareWithLatest } = useEnabledFeatures();
-  const [ctx, ops] = useDiagramCompareLayout();
-  const [isProcessing, setIsProcessing] = useState(false);
-  const resetProcessing = () => {
-    setTimeout(() => {
-      if (isMounted()) {
-        setIsProcessing(false);
-      }
-    }, 500);
-  };
-  const onApplyLatest = useCallbackRef((e) => {
-    if (!ctx.canApplyLatest || ctx.layout === "auto") {
-      window.alert(
-        "Cannot apply changes from latest version when using auto layout. Please switch to manual layout first."
-      );
-      return;
-    }
-    e.stopPropagation();
-    setIsProcessing(true);
-    setTimeout(() => {
-      ops.applyLatestToManual();
-      resetProcessing();
-    }, 200);
-  });
-  const onResetManualLayout = useCallbackRef((e) => {
-    e.stopPropagation();
-    setIsProcessing(true);
-    setTimeout(() => {
-      ops.resetManualLayout();
-      resetProcessing();
-    }, 200);
-  });
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      m.div,
-      {
-        layout: "size",
-        layoutDependency: ctx.drifts || ctx.layout,
-        className: hstack({
-          gap: "2",
-          layerStyle: "likec4.panel",
-          position: "relative",
-          px: "2",
-          py: "1",
-          pl: "3",
-          pointerEvents: "all"
-        }),
-        variants,
-        initial: "initial",
-        animate: "animate",
-        exit: "exit",
-        children: /* @__PURE__ */ jsx(ComparePanelControls, {})
-      },
-      "ComparePanel"
-    ),
-    /* @__PURE__ */ jsxs(
-      m.div,
-      {
-        layout: "size",
-        layoutDependency: ctx.drifts || ctx.layout,
-        variants,
-        initial: "initial",
-        animate: "animate",
-        exit: "exit",
-        className: vstack({
-          gap: "4",
-          layerStyle: "likec4.panel",
-          position: "relative",
-          p: "4",
-          pointerEvents: "all",
-          height: "auto",
-          overflow: "hidden",
-          maxHeight: "calc(100cqh - 180px)",
-          "@/md": {
-            minWidth: "200px"
-          }
-        }),
-        children: [
-          /* @__PURE__ */ jsx(DriftsSummary, {}),
-          ctx.canApplyLatest && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(m.div, { layout: "position", className: css({ flex: "0" }), children: [
-            /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", size: "xs", mb: "xs" }),
-            /* @__PURE__ */ jsxs(HStack, { children: [
-              /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  openDelay: 100,
-                  disabled: ctx.layout !== "auto",
-                  label: "Switch to manual layout to apply changes.",
-                  ...portalProps,
-                  children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      loading: isProcessing,
-                      size: "xs",
-                      color: "orange",
-                      variant: "light",
-                      onClick: onApplyLatest,
-                      disabled: ctx.layout === "auto",
-                      children: "Apply changes"
-                    }
-                  )
-                }
-              ),
-              !isProcessing && /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  openDelay: 100,
-                  disabled: ctx.layout !== "manual",
-                  label: "Reset manual layout",
-                  ...portalProps,
-                  children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      hidden: isProcessing,
-                      size: "xs",
-                      color: "orange",
-                      variant: "subtle",
-                      onClick: onResetManualLayout,
-                      children: "Reset"
-                    }
-                  )
-                }
-              )
-            ] })
-          ] }) })
-        ]
-      },
-      "ListOfDrifts"
-    )
-  ] }) });
+var ComparePanel = memo(() => {
+	const portalProps = useMantinePortalProps();
+	const isMounted = useIsMounted();
+	const { enableCompareWithLatest } = useEnabledFeatures();
+	const [ctx, ops] = useDiagramCompareLayout();
+	const [isProcessing, setIsProcessing] = useState(false);
+	const resetProcessing = () => {
+		setTimeout(() => {
+			if (isMounted()) setIsProcessing(false);
+		}, 500);
+	};
+	const onApplyLatest = useCallbackRef((e) => {
+		if (!ctx.canApplyLatest || ctx.layout === "auto") {
+			window.alert("Cannot apply changes from latest version when using auto layout. Please switch to manual layout first.");
+			return;
+		}
+		e.stopPropagation();
+		setIsProcessing(true);
+		setTimeout(() => {
+			ops.applyLatestToManual();
+			resetProcessing();
+		}, 200);
+	});
+	const onResetManualLayout = useCallbackRef((e) => {
+		e.stopPropagation();
+		setIsProcessing(true);
+		setTimeout(() => {
+			ops.resetManualLayout();
+			resetProcessing();
+		}, 200);
+	});
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(m$1.div, {
+		layout: "size",
+		layoutDependency: ctx.drifts || ctx.layout,
+		className: hstack({
+			gap: "2",
+			layerStyle: "likec4.panel",
+			position: "relative",
+			px: "2",
+			py: "1",
+			pl: "3",
+			pointerEvents: "all"
+		}),
+		variants,
+		initial: "initial",
+		animate: "animate",
+		exit: "exit",
+		children: /* @__PURE__ */ jsx(ComparePanelControls, {})
+	}, "ComparePanel"), /* @__PURE__ */ jsxs(m$1.div, {
+		layout: "size",
+		layoutDependency: ctx.drifts || ctx.layout,
+		variants,
+		initial: "initial",
+		animate: "animate",
+		exit: "exit",
+		className: vstack({
+			gap: "4",
+			layerStyle: "likec4.panel",
+			position: "relative",
+			p: "4",
+			pointerEvents: "all",
+			height: "auto",
+			overflow: "hidden",
+			maxHeight: "calc(100cqh - 180px)",
+			"@/md": { minWidth: "200px" }
+		}),
+		children: [/* @__PURE__ */ jsx(DriftsSummary, {}), ctx.canApplyLatest && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(m$1.div, {
+			layout: "position",
+			className: css({ flex: "0" }),
+			children: [/* @__PURE__ */ jsx(Divider, {
+				orientation: "horizontal",
+				size: "xs",
+				mb: "xs"
+			}), /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(Tooltip$1, {
+				openDelay: 100,
+				disabled: ctx.layout !== "auto",
+				label: "Switch to manual layout to apply changes.",
+				...portalProps,
+				children: /* @__PURE__ */ jsx(Button, {
+					loading: isProcessing,
+					size: "xs",
+					color: "orange",
+					variant: "light",
+					onClick: onApplyLatest,
+					disabled: ctx.layout === "auto",
+					children: "Apply changes"
+				})
+			}), !isProcessing && /* @__PURE__ */ jsx(Tooltip$1, {
+				openDelay: 100,
+				disabled: ctx.layout !== "manual",
+				label: "Reset manual layout",
+				...portalProps,
+				children: /* @__PURE__ */ jsx(Button, {
+					hidden: isProcessing,
+					size: "xs",
+					color: "orange",
+					variant: "subtle",
+					onClick: onResetManualLayout,
+					children: "Reset"
+				})
+			})] })]
+		}) })]
+	}, "ListOfDrifts")] }) });
 });
 ComparePanel.displayName = "ComparePanel";
-
+//#endregion
 export { ComparePanel };

package/dist/navigationpanel/comparepanel/ComparePanelControls.js

@@ -1,62 +1,54 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Box, HStack } from '@likec4/styles/jsx';
-import { Divider as Divider$1 } from '@mantine/core';
-import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
-import { PanelActionIcon } from '../_common.js';
-import { CompareActionsMenu } from './CompareActionsMenu.js';
-import { LayoutTypeSwitcher } from './LayoutTypeSwitcher.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-
-const Divider = Divider$1.withProps({
-  mx: 2,
-  size: "xs",
-  orientation: "vertical"
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
+import { PanelActionIcon } from "../_common.js";
+import { CompareActionsMenu } from "./CompareActionsMenu.js";
+import { LayoutTypeSwitcher } from "./LayoutTypeSwitcher.js";
+import { IconX } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Divider } from "@mantine/core";
+import { Box as Box$1, HStack } from "@likec4/styles/jsx";
+//#region src/navigationpanel/comparepanel/ComparePanelControls.tsx
+var Divider$1 = Divider.withProps({
+	mx: 2,
+	size: "xs",
+	orientation: "vertical"
 });
 function ComparePanelControls() {
-  const [ctx, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }] = useDiagramCompareLayout();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        css: {
-          textStyle: "xs",
-          color: "likec4.panel.text",
-          userSelect: "none"
-        },
-        children: "Compare"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      LayoutTypeSwitcher,
-      {
-        value: ctx.layout,
-        onChange: switchLayout
-      }
-    ),
-    ctx.hasEditor && /* @__PURE__ */ jsxs(HStack, { gap: "1", children: [
-      /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(
-        CompareActionsMenu,
-        {
-          disabled: ctx.layout === "auto",
-          onResetManualLayout: resetManualLayout,
-          onApplyLatestToManual: ctx.canApplyLatest ? applyLatestToManual : void 0
-        }
-      ),
-      /* @__PURE__ */ jsx(Divider, {})
-    ] }),
-    /* @__PURE__ */ jsx(
-      PanelActionIcon,
-      {
-        size: "sm",
-        onClick: (e) => {
-          e.stopPropagation();
-          toggleCompare();
-        },
-        children: /* @__PURE__ */ jsx(IconX, {})
-      }
-    )
-  ] });
+	const [ctx, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }] = useDiagramCompareLayout();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Box$1, {
+			css: {
+				textStyle: "xs",
+				color: "likec4.panel.text",
+				userSelect: "none"
+			},
+			children: "Compare"
+		}),
+		/* @__PURE__ */ jsx(LayoutTypeSwitcher, {
+			value: ctx.layout,
+			onChange: switchLayout
+		}),
+		ctx.hasEditor && /* @__PURE__ */ jsxs(HStack, {
+			gap: "1",
+			children: [
+				/* @__PURE__ */ jsx(Divider$1, {}),
+				/* @__PURE__ */ jsx(CompareActionsMenu, {
+					disabled: ctx.layout === "auto",
+					onResetManualLayout: resetManualLayout,
+					onApplyLatestToManual: ctx.canApplyLatest ? applyLatestToManual : void 0
+				}),
+				/* @__PURE__ */ jsx(Divider$1, {})
+			]
+		}),
+		/* @__PURE__ */ jsx(PanelActionIcon, {
+			size: "sm",
+			onClick: (e) => {
+				e.stopPropagation();
+				toggleCompare();
+			},
+			children: /* @__PURE__ */ jsx(IconX, {})
+		})
+	] });
 }
-
+//#endregion
 export { ComparePanelControls };