@likec4/diagram 1.55.1 → 1.57.0

package/dist/navigationpanel/controls/LayoutWarning.js

@@ -1,103 +1,92 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { hstack } from '@likec4/styles/patterns';
-import { navigationPanelActionIcon } from '@likec4/styles/recipes';
-import { HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Notification, Text, Button } from '@mantine/core';
-import { AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { memo, Fragment as Fragment$1 } from 'react';
-import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-
-const LayoutWarning = memo(() => {
-  const [ctx, { toggleCompare }] = useDiagramCompareLayout();
-  const portalProps = useMantinePortalProps();
-  const { drifts, isActive, isEnabled } = ctx;
-  return /* @__PURE__ */ jsx(AnimatePresence, { propagate: true, children: isEnabled && !isActive && /* @__PURE__ */ jsxs(
-    HoverCard,
-    {
-      position: "bottom-start",
-      openDelay: 600,
-      closeDelay: 200,
-      floatingStrategy: "absolute",
-      offset: {
-        mainAxis: 4,
-        crossAxis: -22
-      },
-      ...portalProps,
-      children: [
-        /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
-          UnstyledButton,
-          {
-            component: m.button,
-            layout: "position",
-            onClick: (e) => {
-              e.stopPropagation();
-              toggleCompare();
-            },
-            whileTap: {
-              scale: 0.95,
-              translateY: 1
-            },
-            className: cx(
-              "group",
-              navigationPanelActionIcon({
-                variant: "filled",
-                type: "warning"
-              }),
-              hstack({
-                gap: "xxs",
-                padding: "1.5",
-                rounded: "sm",
-                userSelect: "none",
-                cursor: "pointer",
-                fontSize: "xs",
-                fontWeight: "bold"
-              })
-            ),
-            children: isActive ? /* @__PURE__ */ jsx(Fragment, { children: "Stop Compare" }) : /* @__PURE__ */ jsx(IconAlertTriangle, { size: 18 })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
-          Notification,
-          {
-            color: "orange",
-            withBorder: false,
-            withCloseButton: false,
-            title: "View is out of sync",
-            children: [
-              /* @__PURE__ */ jsx(Text, { mt: 2, size: "sm", lh: "xs", children: "Model has changed since this view was last updated." }),
-              /* @__PURE__ */ jsxs(Text, { mt: 4, size: "sm", lh: "xs", children: [
-                "Detected changes:",
-                drifts.map((drift) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  /* @__PURE__ */ jsx("br", {}),
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    "- ",
-                    drift
-                  ] })
-                ] }, drift))
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  mt: "xs",
-                  size: "compact-sm",
-                  variant: "default",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    toggleCompare();
-                  },
-                  children: "Compare with current state"
-                }
-              )
-            ]
-          }
-        ) })
-      ]
-    }
-  ) });
+import "../../_virtual/_rolldown/runtime.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
+import { cx } from "@likec4/styles/css";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { Fragment, memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button, HoverCard, HoverCardDropdown, HoverCardTarget, Notification, Text, UnstyledButton } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { hstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+import { navigationPanelActionIcon } from "@likec4/styles/recipes";
+//#region src/navigationpanel/controls/LayoutWarning.tsx
+var LayoutWarning = memo(() => {
+	const [ctx, { toggleCompare }] = useDiagramCompareLayout();
+	const portalProps = useMantinePortalProps();
+	const { drifts, isActive, isEnabled } = ctx;
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		propagate: true,
+		children: isEnabled && !isActive && /* @__PURE__ */ jsxs(HoverCard, {
+			position: "bottom-start",
+			openDelay: 600,
+			closeDelay: 200,
+			floatingStrategy: "absolute",
+			offset: {
+				mainAxis: 4,
+				crossAxis: -22
+			},
+			...portalProps,
+			children: [/* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(UnstyledButton, {
+				component: m$1.button,
+				layout: "position",
+				onClick: (e) => {
+					e.stopPropagation();
+					toggleCompare();
+				},
+				whileTap: {
+					scale: .95,
+					translateY: 1
+				},
+				className: cx("group", navigationPanelActionIcon({
+					variant: "filled",
+					type: "warning"
+				}), hstack({
+					gap: "xxs",
+					padding: "1.5",
+					rounded: "sm",
+					userSelect: "none",
+					cursor: "pointer",
+					fontSize: "xs",
+					fontWeight: "bold"
+				})),
+				children: isActive ? /* @__PURE__ */ jsx(Fragment$1, { children: "Stop Compare" }) : /* @__PURE__ */ jsx(IconAlertTriangle, { size: 18 })
+			}) }), /* @__PURE__ */ jsx(HoverCardDropdown, {
+				p: "0",
+				children: /* @__PURE__ */ jsxs(Notification, {
+					color: "orange",
+					withBorder: false,
+					withCloseButton: false,
+					title: "View is out of sync",
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							mt: 2,
+							size: "sm",
+							lh: "xs",
+							children: "Model has changed since this view was last updated."
+						}),
+						/* @__PURE__ */ jsxs(Text, {
+							mt: 4,
+							size: "sm",
+							lh: "xs",
+							children: ["Detected changes:", drifts.map((drift) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), /* @__PURE__ */ jsxs("span", { children: ["- ", drift] })] }, drift))]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							mt: "xs",
+							size: "compact-sm",
+							variant: "default",
+							onClick: (e) => {
+								e.stopPropagation();
+								toggleCompare();
+							},
+							children: "Compare with current state"
+						})
+					]
+				})
+			})]
+		})
+	});
 });
 LayoutWarning.displayName = "ManualLayoutWarning";
-
+//#endregion
 export { LayoutWarning };

package/dist/navigationpanel/controls/LogoButton.js

@@ -1,72 +1,48 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { css, cx } from '@likec4/styles/css';
-import { hstack } from '@likec4/styles/patterns';
-import { UnstyledButton } from '@mantine/core';
-import * as m from 'motion/react-m';
-import { Logo, LogoIcon } from '../../components/Logo.js';
-import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
-import { useNavigationActor } from '../hooks.js';
-
-const LogoButton = () => {
-  const actor = useNavigationActor();
-  const { onLogoClick } = useDiagramEventHandlers();
-  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsxs(
-    UnstyledButton,
-    {
-      onMouseEnter: () => {
-        actor.send({ type: "breadcrumbs.mouseEnter.root" });
-      },
-      onMouseLeave: () => {
-        actor.send({ type: "breadcrumbs.mouseLeave.root" });
-      },
-      onClick: (e) => {
-        e.stopPropagation();
-        if (onLogoClick && actor.isOpened()) {
-          setTimeout(() => {
-            onLogoClick();
-          }, 100);
-        }
-        actor.send({ type: "breadcrumbs.click.root" });
-      },
-      className: cx(
-        "mantine-active",
-        hstack({
-          padding: "0.5",
-          // _active: {
-          //   transform: 'translateY(1px)',
-          // },
-          width: {
-            base: "[20px]",
-            "@/md": "[64px]"
-          }
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          Logo,
-          {
-            className: css({
-              display: {
-                base: "none",
-                "@/md": "block"
-              }
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          LogoIcon,
-          {
-            className: css({
-              display: {
-                base: "block",
-                "@/md": "none"
-              }
-            })
-          }
-        )
-      ]
-    }
-  ) });
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
+import { useNavigationActor } from "../hooks.js";
+import { Logo, LogoIcon } from "../../components/Logo.js";
+import { css, cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UnstyledButton } from "@mantine/core";
+import { hstack } from "@likec4/styles/patterns";
+import * as m from "motion/react-m";
+//#region src/navigationpanel/controls/LogoButton.tsx
+var LogoButton = () => {
+	const actor = useNavigationActor();
+	const { onLogoClick } = useDiagramEventHandlers();
+	return /* @__PURE__ */ jsx(m.div, {
+		layout: "position",
+		children: /* @__PURE__ */ jsxs(UnstyledButton, {
+			onMouseEnter: () => {
+				actor.send({ type: "breadcrumbs.mouseEnter.root" });
+			},
+			onMouseLeave: () => {
+				actor.send({ type: "breadcrumbs.mouseLeave.root" });
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+				if (onLogoClick && actor.isOpened()) setTimeout(() => {
+					onLogoClick();
+				}, 100);
+				actor.send({ type: "breadcrumbs.click.root" });
+			},
+			className: cx("mantine-active", hstack({
+				padding: "0.5",
+				width: {
+					base: "[20px]",
+					"@/md": "[64px]"
+				}
+			})),
+			children: [/* @__PURE__ */ jsx(Logo, { className: css({ display: {
+				base: "none",
+				"@/md": "block"
+			} }) }), /* @__PURE__ */ jsx(LogoIcon, { className: css({ display: {
+				base: "block",
+				"@/md": "none"
+			} }) })]
+		})
+	});
 };
-
+//#endregion
 export { LogoButton };

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -1,54 +1,37 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { hstack } from '@likec4/styles/patterns';
-import * as m from 'motion/react-m';
-import { useDiagramContext } from '../../hooks/useDiagram.js';
-import { PanelActionIcon } from '../_common.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-
-const NavigationButtons = () => {
-  const diagram = useDiagram();
-  const {
-    hasStepBack,
-    hasStepForward
-  } = useDiagramContext((s) => ({
-    hasStepBack: s.navigationHistory.currentIndex > 0,
-    hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
-  }));
-  return /* @__PURE__ */ jsxs(
-    m.div,
-    {
-      layout: "position",
-      className: hstack({
-        gap: "0.5"
-      }),
-      children: [
-        /* @__PURE__ */ jsx(
-          PanelActionIcon,
-          {
-            disabled: !hasStepBack,
-            onClick: (e) => {
-              e.stopPropagation();
-              diagram.navigate("back");
-            },
-            children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PanelActionIcon,
-          {
-            disabled: !hasStepForward,
-            onClick: (e) => {
-              e.stopPropagation();
-              diagram.navigate("forward");
-            },
-            children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
-          }
-        )
-      ]
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { PanelActionIcon } from "../_common.js";
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { hstack } from "@likec4/styles/patterns";
+import * as m from "motion/react-m";
+//#region src/navigationpanel/controls/NavigationButtons.tsx
+var NavigationButtons = () => {
+	const diagram = useDiagram();
+	const { hasStepBack, hasStepForward } = useDiagramContext((s) => ({
+		hasStepBack: s.navigationHistory.currentIndex > 0,
+		hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
+	}));
+	return /* @__PURE__ */ jsxs(m.div, {
+		layout: "position",
+		className: hstack({ gap: "0.5" }),
+		children: [/* @__PURE__ */ jsx(PanelActionIcon, {
+			disabled: !hasStepBack,
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigate("back");
+			},
+			children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 })
+		}), /* @__PURE__ */ jsx(PanelActionIcon, {
+			disabled: !hasStepForward,
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigate("forward");
+			},
+			children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
+		})]
+	});
 };
-
+//#endregion
 export { NavigationButtons };

package/dist/navigationpanel/controls/OpenSource.js

@@ -1,27 +1,29 @@
-import { jsx } from 'react/jsx-runtime';
-import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
-import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useCurrentViewId } from '../../hooks/useCurrentView.js';
-import { Tooltip, PanelActionIcon } from '../_common.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-
-const OpenSource = () => {
-  const viewId = useCurrentViewId();
-  const { enableVscode } = useEnabledFeatures();
-  const { onOpenSource } = useDiagramEventHandlers();
-  if (!enableVscode) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Open View Source", children: /* @__PURE__ */ jsx(
-    PanelActionIcon,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onOpenSource?.({ view: viewId });
-      },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { style: { width: "60%", height: "60%" } })
-    }
-  ) });
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { useCurrentViewId } from "../../hooks/useCurrentView.js";
+import { PanelActionIcon, Tooltip } from "../_common.js";
+import { IconFileSymlink } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/navigationpanel/controls/OpenSource.tsx
+var OpenSource = () => {
+	const viewId = useCurrentViewId();
+	const { enableVscode } = useEnabledFeatures();
+	const { onOpenSource } = useDiagramEventHandlers();
+	if (!enableVscode) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Open View Source",
+		children: /* @__PURE__ */ jsx(PanelActionIcon, {
+			onClick: (e) => {
+				e.stopPropagation();
+				onOpenSource?.({ view: viewId });
+			},
+			children: /* @__PURE__ */ jsx(IconFileSymlink, { style: {
+				width: "60%",
+				height: "60%"
+			} })
+		})
+	});
 };
-
+//#endregion
 export { OpenSource };

package/dist/navigationpanel/controls/SearchControl.js

@@ -1,64 +1,53 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { hstack } from '@likec4/styles/patterns';
-import { UnstyledButton } from '@mantine/core';
-import { isMacOs } from '@xyflow/system';
-import * as m from 'motion/react-m';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
-import { useDiagram } from '../../hooks/safeContext.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { cx } from "@likec4/styles/css";
+import { IconSearch } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UnstyledButton } from "@mantine/core";
+import { isMacOs } from "@xyflow/system";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+import * as m from "motion/react-m";
+//#region src/navigationpanel/controls/SearchControl.tsx
 function SearchControl() {
-  const diagram = useDiagram();
-  const isMac = isMacOs();
-  return /* @__PURE__ */ jsxs(
-    UnstyledButton,
-    {
-      component: m.button,
-      layout: "position",
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openSearch();
-      },
-      whileTap: {
-        scale: 0.95,
-        translateY: 1
-      },
-      className: cx(
-        "group",
-        hstack({
-          gap: "xxs",
-          paddingInline: "sm",
-          paddingBlock: "xxs",
-          userSelect: "none",
-          layerStyle: "likec4.panel.action.filled",
-          display: {
-            base: "none",
-            "@/md": "flex"
-          }
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsx(IconSearch, { size: 14, stroke: 2.5 }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            css: {
-              fontSize: "11px",
-              fontWeight: "bold",
-              lineHeight: 1,
-              opacity: 0.8,
-              whiteSpace: "nowrap"
-            },
-            children: isMac ? "⌘ + K" : "Ctrl + K"
-          }
-        )
-      ]
-    }
-  );
+	const diagram = useDiagram();
+	const isMac = isMacOs();
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		component: m.button,
+		layout: "position",
+		onClick: (e) => {
+			e.stopPropagation();
+			diagram.openSearch();
+		},
+		whileTap: {
+			scale: .95,
+			translateY: 1
+		},
+		className: cx("group", hstack({
+			gap: "xxs",
+			paddingInline: "sm",
+			paddingBlock: "xxs",
+			userSelect: "none",
+			layerStyle: "likec4.panel.action.filled",
+			display: {
+				base: "none",
+				"@/md": "flex"
+			}
+		})),
+		children: [/* @__PURE__ */ jsx(IconSearch, {
+			size: 14,
+			stroke: 2.5
+		}), /* @__PURE__ */ jsx(Box$1, {
+			css: {
+				fontSize: "11px",
+				fontWeight: "bold",
+				lineHeight: 1,
+				opacity: .8,
+				whiteSpace: "nowrap"
+			},
+			children: isMac ? "⌘ + K" : "Ctrl + K"
+		})]
+	});
 }
-
+//#endregion
 export { SearchControl };