@likec4/diagram 1.59.2 → 1.59.4

package/dist/navigationpanel/controls/LayoutWarning.js

@@ -4,7 +4,7 @@ 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 { 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";
@@ -14,78 +14,75 @@ import { navigationPanelActionIcon } from "@likec4/styles/recipes";
 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
+	const { drifts, state, isEnabled } = ctx;
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isEnabled && state !== "comparing" && /* @__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();
 			},
-			...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"
-						})
-					]
-				})
-			})]
-		})
-	});
+			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: /* @__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 drifts:", 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

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

@@ -1 +1 @@
-export declare const NavigationButtons: () => import("react").JSX.Element;
+export declare function NavigationButtons(): import("react").JSX.Element;

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -1,18 +1,18 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.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 = () => {
+var selectNavigationState = selectDiagramContext((s) => ({
+	hasStepBack: s.navigationHistory.currentIndex > 0,
+	hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
+}));
+function NavigationButtons() {
 	const diagram = useDiagram();
-	const { hasStepBack, hasStepForward } = useDiagramContext((s) => ({
-		hasStepBack: s.navigationHistory.currentIndex > 0,
-		hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
-	}));
+	const { hasStepBack, hasStepForward } = useDiagramSelector(selectNavigationState);
 	return /* @__PURE__ */ jsxs(m.div, {
 		layout: "position",
 		className: hstack({ gap: "0.5" }),
@@ -32,6 +32,6 @@ var NavigationButtons = () => {
 			children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
 		})]
 	});
-};
+}
 //#endregion
 export { NavigationButtons };

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

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

package/dist/navigationpanel/controls/OpenSource.js

@@ -1,22 +1,19 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
-import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { useCurrentViewId } from "../../hooks/useCurrentView.js";
+import { useDiagram } from "../../hooks/safeContext.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;
+	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(Tooltip, {
 		label: "Open View Source",
 		children: /* @__PURE__ */ jsx(PanelActionIcon, {
+			layout: "position",
 			onClick: (e) => {
 				e.stopPropagation();
-				onOpenSource?.({ view: viewId });
+				const viewId = diagram.currentView.id;
+				diagram.openSource({ view: viewId });
 			},
 			children: /* @__PURE__ */ jsx(IconFileSymlink, { style: {
 				width: "60%",

package/dist/navigationpanel/controls/SearchControl.js

@@ -2,16 +2,35 @@ import "../../_virtual/_rolldown/runtime.js";
 import { useDiagram } from "../../hooks/safeContext.js";
 import { cx } from "@likec4/styles/css";
 import { IconSearch } from "@tabler/icons-react";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { UnstyledButton } from "@mantine/core";
 import { isMacOs } from "@xyflow/system";
+import { m } from "motion/react";
 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();
+	const searchControlAnimation = useRef({
+		initial: {
+			opacity: 0,
+			translateX: -10
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			translateX: -20
+		},
+		whileTap: {
+			scale: .95,
+			translateY: 1
+		}
+	});
 	return /* @__PURE__ */ jsxs(UnstyledButton, {
 		component: m.button,
 		layout: "position",
@@ -19,14 +38,10 @@ function SearchControl() {
 			e.stopPropagation();
 			diagram.openSearch();
 		},
-		whileTap: {
-			scale: .95,
-			translateY: 1
-		},
+		...searchControlAnimation.current,
 		className: cx("group", hstack({
 			gap: "xxs",
 			paddingInline: "sm",
-			paddingBlock: "xxs",
 			userSelect: "none",
 			layerStyle: "likec4.panel.action.filled",
 			display: {
@@ -39,10 +54,10 @@ function SearchControl() {
 			stroke: 2.5
 		}), /* @__PURE__ */ jsx(Box$1, {
 			css: {
-				fontSize: "11px",
+				fontSize: "xs",
 				fontWeight: "bold",
-				lineHeight: 1,
-				opacity: .8,
+				lineHeight: "1",
+				opacity: "0.7",
 				whiteSpace: "nowrap"
 			},
 			children: isMac ? "⌘ + K" : "Ctrl + K"

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

@@ -1 +1,4 @@
-export declare const ToggleReadonly: () => import("react").JSX.Element;
+export declare function ToggleReadonly({ disabled, isReadOnly }: {
+    disabled: boolean;
+    isReadOnly: boolean;
+}): import("react").JSX.Element;

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -1,89 +1,69 @@
 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 { m } 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);
-	const hasEditor = ctx.features.enableEditor;
-	const isReadOnly = ctx.toggledFeatures.enableReadOnly ?? false;
-	return {
-		visible: hasEditor && noActiveWalkthrough,
-		disabled: comparingLatest,
-		isReadOnly
-	};
-};
-var ToggleReadonly = () => {
-	const { visible, disabled, isReadOnly } = useDiagramContext(selector);
+function ToggleReadonly({ disabled, isReadOnly }) {
 	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 }
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		component: m.button,
+		layout: "position",
+		layoutDependency: isReadOnly,
+		disabled,
+		onClick: (e) => {
+			e.stopPropagation();
+			!disabled && diagram.toggleFeature("ReadOnly");
+		},
+		initial: {
+			opacity: 0,
+			scale: .9,
+			translateX: -10
+		},
+		animate: {
+			opacity: 1,
+			scale: disabled ? .95 : 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .9,
+			translateX: -10
+		},
+		whileTap: { translateY: 1 },
+		className: cx("group", hstack({
+			gap: "0.5",
+			paddingInline: "xxs",
+			paddingBlock: "xxs",
+			userSelect: "none",
+			layerStyle: "likec4.panel.action"
+		})),
+		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 }
+			}),
+			isReadOnly && /* @__PURE__ */ jsx(m.div, {
+				layout: true,
+				className: css({
+					fontSize: "xxs",
+					fontWeight: "bold",
+					lineHeight: "snug",
+					opacity: "0.9"
 				}),
-				/* @__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"
-				})
-			]
-		})
+				children: "Edit"
+			})
+		]
 	});
-};
+}
 //#endregion
 export { ToggleReadonly };

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

@@ -0,0 +1,5 @@
+type ViewDetailsButtonProps = {
+    onOpen: () => void;
+};
+export declare function ViewDetailsButton({ onOpen }: ViewDetailsButtonProps): import("react").JSX.Element;
+export {};

package/dist/navigationpanel/controls/ViewDetailsButton.js

@@ -0,0 +1,121 @@
+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 +1,7 @@
-export { DetailsControls } from './DetailsControls';
 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';