@likec4/diagram 1.55.0 → 1.56.0

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -1,176 +1,125 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { hstack } from '@likec4/styles/patterns';
-import { Popover, PopoverTarget, PopoverDropdown, TooltipGroup } from '@mantine/core';
-import { memo } from 'react';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-import { PanelActionIcon } from '../_common.js';
-import { Tooltip } from './_common.js';
-import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
-import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
-import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
-import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
-import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
-import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
-import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
-import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
-import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
-
-const Action = ({
-  label,
-  icon,
-  onClick
-}) => /* @__PURE__ */ jsx(Tooltip, { label, withinPortal: false, position: "top", children: /* @__PURE__ */ jsx(
-  PanelActionIcon,
-  {
-    classNames: {
-      root: "action-icon",
-      icon: css({
-        "& > svg": {
-          width: "70%",
-          height: "70%"
-        }
-      })
-    },
-    onClick,
-    children: icon
-  }
-) });
-const ManualLayoutToolsButton = memo(() => {
-  const diagram = useDiagram();
-  const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "right",
-      offset: {
-        mainAxis: 12
-      },
-      clickOutsideEvents: [
-        "pointerdown"
-      ],
-      ...portalProps,
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Manual layouting tools", children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) }) }),
-        /* @__PURE__ */ jsx(
-          PopoverDropdown,
-          {
-            className: hstack({
-              gap: "0.5",
-              layerStyle: "likec4.panel",
-              padding: "1",
-              pointerEvents: "all"
-            }),
-            children: /* @__PURE__ */ jsxs(TooltipGroup, { 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();
-                  }
-                }
-              )
-            ] })
-          }
-        )
-      ]
-    }
-  );
+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 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverDropdown, PopoverTarget, TooltipGroup } from "@mantine/core";
+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
+	})
+});
+var ManualLayoutToolsButton = memo(() => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsxs(Popover, {
+		position: "right",
+		offset: { mainAxis: 12 },
+		clickOutsideEvents: ["pointerdown"],
+		...useMantinePortalProps(),
+		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
+			label: "Manual layouting tools",
+			children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) })
+		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+			className: hstack({
+				gap: "0.5",
+				layerStyle: "likec4.panel",
+				padding: "1",
+				pointerEvents: "all"
+			}),
+			children: /* @__PURE__ */ jsxs(TooltipGroup, { 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 };

package/dist/navigationpanel/editorpanel/ToggleReadonly.js

@@ -1,15 +1,22 @@
-import { jsx } from 'react/jsx-runtime';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { PanelActionIcon } from '../_common.js';
-import { Tooltip } from './_common.js';
-import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
-
-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 }) }) });
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { PanelActionIcon } from "../_common.js";
+import { Tooltip } from "./_common.js";
+import { IconLockOpen2 } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/navigationpanel/editorpanel/ToggleReadonly.tsx
+var 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
+			})
+		})
+	});
 };
-
+//#endregion
 export { ToggleReadonly };

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

@@ -1,6 +1,3 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { TooltipProps } from '@mantine/core';
-export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
-    component?: any;
-    renderRoot?: (props: Record<string, any>) => React.ReactNode;
-}>;
+import { NamedExoticComponent, RefAttributes } from 'react';
+import { TooltipProps, PlaceholderPolymorphicProps } from '@mantine/core';
+export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;

package/dist/navigationpanel/editorpanel/_common.js

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

package/dist/navigationpanel/editorpanel/styles.js

@@ -1,79 +1,62 @@
-import { css } from '@likec4/styles/css';
-
+import { css } from "@likec4/styles/css";
 css({
-  gap: "xxs",
-  _empty: {
-    display: "none"
-  }
+	gap: "xxs",
+	_empty: { display: "none" }
 });
 css({
-  top: "md",
-  left: "md",
-  margin: "0",
-  pointerEvents: "none",
-  "& :where(button, .action-icon, [role='dialog'])": {
-    pointerEvents: "all"
-  },
-  ["& .action-icon"]: {
-    ["--ai-size"]: "2rem"
-  },
-  ["& .tabler-icon"]: {
-    width: "65%",
-    height: "65%"
-  },
-  _reduceGraphics: {
-    "& .action-icon": {
-      "--ai-radius": "0px"
-    }
-  }
-});
-css({
-  shadow: {
-    base: "md",
-    _whenPanning: "none"
-  }
-});
-css({
-  ["& .tabler-icon"]: {
-    width: "65%",
-    height: "65%"
-  }
-});
-const autolayoutButton = css({
-  flex: "1 1 40%",
-  textAlign: "center",
-  fontWeight: "medium",
-  padding: "[4px 6px]",
-  fontSize: "11px",
-  zIndex: 1
-});
-const autolayoutIndicator = css({
-  background: "mantine.colors.gray[2]",
-  borderRadius: "sm",
-  border: `1px solid`,
-  borderColor: "mantine.colors.gray[4]",
-  _dark: {
-    background: "mantine.colors.dark[5]",
-    borderColor: "mantine.colors.dark[4]"
-  }
-});
-const spacingSliderBody = css({
-  position: "relative",
-  borderRadius: "sm",
-  background: "mantine.colors.gray[3]",
-  boxShadow: "inset 1px 1px 3px 0px #00000024",
-  _dark: {
-    background: "mantine.colors.dark[7]"
-  }
-});
-const spacingSliderThumb = css({
-  position: "absolute",
-  width: "8px",
-  height: "8px",
-  border: `2px solid`,
-  borderColor: "mantine.colors.gray[5]",
-  borderRadius: "sm",
-  transform: "translate(-50%, -50%)"
-});
-
+	top: "md",
+	left: "md",
+	margin: "0",
+	pointerEvents: "none",
+	"& :where(button, .action-icon, [role='dialog'])": { pointerEvents: "all" },
+	["& .action-icon"]: { ["--ai-size"]: "2rem" },
+	["& .tabler-icon"]: {
+		width: "65%",
+		height: "65%"
+	},
+	_reduceGraphics: { "& .action-icon": { "--ai-radius": "0px" } }
+});
+css({ shadow: {
+	base: "md",
+	_whenPanning: "none"
+} });
+css({ ["& .tabler-icon"]: {
+	width: "65%",
+	height: "65%"
+} });
+var autolayoutButton = css({
+	flex: "1 1 40%",
+	textAlign: "center",
+	fontWeight: "medium",
+	padding: "[4px 6px]",
+	fontSize: "11px",
+	zIndex: 1
+});
+var autolayoutIndicator = css({
+	background: "mantine.colors.gray[2]",
+	borderRadius: "sm",
+	border: `1px solid`,
+	borderColor: "mantine.colors.gray[4]",
+	_dark: {
+		background: "mantine.colors.dark[5]",
+		borderColor: "mantine.colors.dark[4]"
+	}
+});
+var spacingSliderBody = css({
+	position: "relative",
+	borderRadius: "sm",
+	background: "mantine.colors.gray[3]",
+	boxShadow: "inset 1px 1px 3px 0px #00000024",
+	_dark: { background: "mantine.colors.dark[7]" }
+});
+var spacingSliderThumb = css({
+	position: "absolute",
+	width: "8px",
+	height: "8px",
+	border: `2px solid`,
+	borderColor: "mantine.colors.gray[5]",
+	borderRadius: "sm",
+	transform: "translate(-50%, -50%)"
+});
+//#endregion
 export { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb };

package/dist/navigationpanel/hooks.js

@@ -1,38 +1,44 @@
-import { useSelector } from '@xstate/react';
-import { shallowEqual } from 'fast-equals';
-import { createContext, useMemo, useContext } from 'react';
-
-const NavigationPanelActorSafeContext = createContext(null);
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext, useMemo } from "react";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
+//#region src/navigationpanel/hooks.tsx
+var NavigationPanelActorSafeContext = createContext(null);
 NavigationPanelActorSafeContext.displayName = "NavigationPanelActorSafeContext";
-const NavigationPanelActorContextProvider = NavigationPanelActorSafeContext.Provider;
-const useNavigationActorRef = () => {
-  const ctx = useContext(NavigationPanelActorSafeContext);
-  if (ctx === null) {
-    throw new Error("NavigationPanelActorRef is not found in the context");
-  }
-  return ctx;
+var NavigationPanelActorContextProvider = NavigationPanelActorSafeContext.Provider;
+var useNavigationActorRef = () => {
+	const ctx = useContext(NavigationPanelActorSafeContext);
+	if (ctx === null) throw new Error("NavigationPanelActorRef is not found in the context");
+	return ctx;
 };
 function useNavigationActorSnapshot(selector, compare = shallowEqual) {
-  const actorRef = useNavigationActorRef();
-  return useSelector(actorRef, selector, compare);
+	return useSelector(useNavigationActorRef(), selector, compare);
 }
 function useNavigationActorContext(selector, compare = shallowEqual) {
-  return useNavigationActorSnapshot((snapshot) => selector(snapshot.context), compare);
+	return useNavigationActorSnapshot((snapshot) => selector(snapshot.context), compare);
 }
 function useNavigationActor() {
-  const actorRef = useNavigationActorRef();
-  return useMemo(() => ({
-    actorRef,
-    send: (event) => actorRef.send(event),
-    selectFolder: (folderPath) => actorRef.send({ type: "select.folder", folderPath }),
-    selectView: (viewId) => actorRef.send({ type: "select.view", viewId }),
-    isOpened: () => {
-      const snapshot = actorRef.getSnapshot();
-      return snapshot.hasTag("active");
-    },
-    clearSearch: () => actorRef.send({ type: "searchQuery.change", value: "" }),
-    closeDropdown: () => actorRef.send({ type: "dropdown.dismiss" })
-  }), [actorRef]);
+	const actorRef = useNavigationActorRef();
+	return useMemo(() => ({
+		actorRef,
+		send: (event) => actorRef.send(event),
+		selectFolder: (folderPath) => actorRef.send({
+			type: "select.folder",
+			folderPath
+		}),
+		selectView: (viewId) => actorRef.send({
+			type: "select.view",
+			viewId
+		}),
+		isOpened: () => {
+			return actorRef.getSnapshot().hasTag("active");
+		},
+		clearSearch: () => actorRef.send({
+			type: "searchQuery.change",
+			value: ""
+		}),
+		closeDropdown: () => actorRef.send({ type: "dropdown.dismiss" })
+	}), [actorRef]);
 }
-
+//#endregion
 export { NavigationPanelActorContextProvider, useNavigationActor, useNavigationActorContext, useNavigationActorRef, useNavigationActorSnapshot };

package/dist/navigationpanel/styles.css.js

@@ -1,30 +1,22 @@
-import { cva } from '@likec4/styles/css';
-
-const breadcrumbTitle = cva({
-  base: {
-    fontSize: "sm",
-    fontWeight: "medium",
-    transition: "fast",
-    color: {
-      base: "likec4.panel.action",
-      _hover: "likec4.panel.action.hover"
-    }
-  },
-  variants: {
-    truncate: {
-      "true": {
-        truncate: true
-      }
-    },
-    dimmed: {
-      "true": {
-        color: {
-          base: "likec4.panel.text.dimmed",
-          _hover: "likec4.panel.action"
-        }
-      }
-    }
-  }
+import { cva } from "@likec4/styles/css";
+//#region src/navigationpanel/styles.css.ts
+var breadcrumbTitle = cva({
+	base: {
+		fontSize: "sm",
+		fontWeight: "medium",
+		transition: "fast",
+		color: {
+			base: "likec4.panel.action",
+			_hover: "likec4.panel.action.hover"
+		}
+	},
+	variants: {
+		truncate: { "true": { truncate: true } },
+		dimmed: { "true": { color: {
+			base: "likec4.panel.text.dimmed",
+			_hover: "likec4.panel.action"
+		} } }
+	}
 });
-
+//#endregion
 export { breadcrumbTitle };