@likec4/diagram 1.55.1 → 1.56.0

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -1,84 +1,87 @@
-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 { AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { isTruthy } from 'remeda';
-import { useDiagramContext } from '../../hooks/useDiagram.js';
-import { deriveToggledFeatures } from '../../likec4diagram/state/machine.setup.js';
-import { useDiagram } from '../../hooks/safeContext.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';
-import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
-
-const selector = (ctx) => {
-  const toggledFeatures = deriveToggledFeatures(ctx);
-  const comparingLatest = toggledFeatures.enableCompareWithLatest && !!ctx.view.drifts && ctx.view._layout === "auto";
-  const noActiveWalkthrough = !isTruthy(ctx.activeWalkthrough);
-  const hasEditor = ctx.features.enableEditor;
-  return {
-    visible: hasEditor && noActiveWalkthrough,
-    disabled: comparingLatest,
-    isReadOnly: ctx.toggledFeatures.enableReadOnly ?? false
-  };
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { deriveToggledFeatures } from "../../likec4diagram/state/machine.setup.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconLock, IconLockOpen2 } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
+import { UnstyledButton } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { hstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+//#region src/navigationpanel/controls/ToggleReadonly.tsx
+var selector = (ctx) => {
+	const comparingLatest = deriveToggledFeatures(ctx).enableCompareWithLatest && !!ctx.view.drifts && ctx.view._layout === "auto";
+	const noActiveWalkthrough = !isTruthy(ctx.activeWalkthrough);
+	return {
+		visible: ctx.features.enableEditor && noActiveWalkthrough,
+		disabled: comparingLatest,
+		isReadOnly: ctx.toggledFeatures.enableReadOnly ?? false
+	};
 };
-const ToggleReadonly = () => {
-  const { visible, disabled, isReadOnly } = useDiagramContext(selector);
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visible && /* @__PURE__ */ jsxs(
-    UnstyledButton,
-    {
-      component: m.button,
-      layout: "position",
-      layoutDependency: isReadOnly,
-      disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        !disabled && diagram.toggleFeature("ReadOnly");
-      },
-      initial: { opacity: 0, scale: 0.6 },
-      animate: { opacity: 1, scale: disabled ? 0.95 : 1 },
-      exit: { opacity: 0, scale: 0.6 },
-      whileTap: {
-        translateY: 1
-      },
-      className: cx(
-        "group",
-        hstack({
-          gap: "0.5",
-          paddingInline: "xxs",
-          paddingBlock: "xxs",
-          userSelect: "none",
-          layerStyle: "likec4.panel.action",
-          backgroundColor: {
-            base: "none",
-            _notDisabled: {
-              _hover: "likec4.panel.action.bg.hover"
-            }
-          }
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsx(IconLockOpen2, { size: 14, stroke: 2, style: { display: isReadOnly ? "none" : void 0 } }),
-        /* @__PURE__ */ jsx(IconLock, { size: 14, stroke: 2, style: { display: !isReadOnly ? "none" : void 0 } }),
-        /* @__PURE__ */ jsx(
-          m.div,
-          {
-            className: css({
-              fontSize: "11px",
-              fontWeight: "bold",
-              lineHeight: 1,
-              opacity: 0.8
-            }),
-            style: {
-              display: isReadOnly ? "block" : "none"
-            },
-            children: "Edit"
-          }
-        )
-      ]
-    }
-  ) });
+var ToggleReadonly = () => {
+	const { visible, disabled, isReadOnly } = useDiagramContext(selector);
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "popLayout",
+		children: visible && /* @__PURE__ */ jsxs(UnstyledButton, {
+			component: m$1.button,
+			layout: "position",
+			layoutDependency: isReadOnly,
+			disabled,
+			onClick: (e) => {
+				e.stopPropagation();
+				!disabled && diagram.toggleFeature("ReadOnly");
+			},
+			initial: {
+				opacity: 0,
+				scale: .6
+			},
+			animate: {
+				opacity: 1,
+				scale: disabled ? .95 : 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .6
+			},
+			whileTap: { translateY: 1 },
+			className: cx("group", hstack({
+				gap: "0.5",
+				paddingInline: "xxs",
+				paddingBlock: "xxs",
+				userSelect: "none",
+				layerStyle: "likec4.panel.action",
+				backgroundColor: {
+					base: "none",
+					_notDisabled: { _hover: "likec4.panel.action.bg.hover" }
+				}
+			})),
+			children: [
+				/* @__PURE__ */ jsx(IconLockOpen2, {
+					size: 14,
+					stroke: 2,
+					style: { display: isReadOnly ? "none" : void 0 }
+				}),
+				/* @__PURE__ */ jsx(IconLock, {
+					size: 14,
+					stroke: 2,
+					style: { display: !isReadOnly ? "none" : void 0 }
+				}),
+				/* @__PURE__ */ jsx(m$1.div, {
+					className: css({
+						fontSize: "11px",
+						fontWeight: "bold",
+						lineHeight: 1,
+						opacity: .8
+					}),
+					style: { display: isReadOnly ? "block" : "none" },
+					children: "Edit"
+				})
+			]
+		})
+	});
 };
-
+//#endregion
 export { ToggleReadonly };

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -1,90 +1,72 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { HStack, Box } from '@likec4/styles/jsx';
-import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
-import { memo } from 'react';
-import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../hooks/useLikeC4Project.js';
-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';
-
-const ProjectsMenu = memo((_) => {
-  const { projects, onProjectChange } = useLikeC4ProjectsContext();
-  if (projects.length <= 1) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(WithProjectsMenu, { projects, onProjectChange });
+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 } 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: "0.5", alignItems: "baseline", children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        css: {
-          fontWeight: "normal",
-          fontSize: "xxs",
-          color: "likec4.panel.text.dimmed",
-          userSelect: "none"
-        },
-        children: "Project"
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Menu,
-      {
-        withinPortal: false,
-        shadow: "md",
-        position: "bottom-start",
-        offset: { mainAxis: 2 },
-        children: [
-          /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              tabIndex: -1,
-              autoFocus: false,
-              variant: "subtle",
-              size: "compact-xs",
-              color: "gray",
-              classNames: {
-                root: css({
-                  fontWeight: "normal",
-                  fontSize: "xxs",
-                  height: "auto",
-                  lineHeight: 1.1,
-                  color: {
-                    _light: "mantine.colors.gray[9]"
-                  }
-                }),
-                section: css({
-                  '&:is([data-position="right"])': {
-                    marginInlineStart: "1"
-                  }
-                })
-              },
-              rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 12, stroke: 1.5 }),
-              children: projectId
-            }
-          ) }),
-          /* @__PURE__ */ jsx(MenuDropdown, { children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              onClick: (e) => {
-                if (projectId === id) {
-                  e.stopPropagation();
-                  return;
-                }
-                onProjectChange(id);
-              },
-              children: title ?? id
-            },
-            id
-          )) })
-        ]
-      }
-    )
-  ] });
+function WithProjectsMenu({ projects, onProjectChange }) {
+	const projectId = useLikeC4ProjectId();
+	return /* @__PURE__ */ jsxs(HStack, {
+		gap: "0.5",
+		alignItems: "baseline",
+		children: [/* @__PURE__ */ jsx(Box$1, {
+			css: {
+				fontWeight: "normal",
+				fontSize: "xxs",
+				color: "likec4.panel.text.dimmed",
+				userSelect: "none"
+			},
+			children: "Project"
+		}), /* @__PURE__ */ jsxs(Menu, {
+			withinPortal: false,
+			shadow: "md",
+			position: "bottom-start",
+			offset: { mainAxis: 2 },
+			children: [/* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(Button, {
+				tabIndex: -1,
+				autoFocus: false,
+				variant: "subtle",
+				size: "compact-xs",
+				color: "gray",
+				classNames: {
+					root: css({
+						fontWeight: "normal",
+						fontSize: "xxs",
+						height: "auto",
+						lineHeight: 1.1,
+						color: { _light: "mantine.colors.gray[9]" }
+					}),
+					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: 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/CenterCamera.js

@@ -1,15 +1,19 @@
-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 IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
-
-const CenterCamera = () => {
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Center camera", children: /* @__PURE__ */ jsx(PanelActionIcon, { onClick: () => diagram.fitDiagram(), children: /* @__PURE__ */ jsx(IconFocusCentered, {}) }) });
+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 };