@likec4/diagram 1.59.4 → 1.61.0

package/dist/navigationpanel/comparepanel/DriftsSummary.js

@@ -1,220 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { deepEqual } from "fast-equals";
-import { filter, hasAtLeast, map, pipe } from "remeda";
-import { AnimatePresence, m, stagger } from "motion/react";
-import { useDebouncedCallback } from "@mantine/hooks";
-import { Txt, styled } from "@likec4/styles/jsx";
-import { vstack } from "@likec4/styles/patterns";
-//#region src/navigationpanel/comparepanel/DriftsSummary.tsx
-var hasDrifts = (item) => {
-	return !!item.drifts && hasAtLeast(item.drifts, 1);
-};
-var selectDrifts = selectDiagramContext((ctx) => ({
-	view: ctx.view.drifts ?? [],
-	nodes: pipe(ctx.view.nodes, map((node) => ({
-		id: node.id,
-		name: node.title,
-		drifts: node.drifts
-	})), filter(hasDrifts)),
-	edges: pipe(ctx.view.edges, map((edge) => ({
-		edgeId: edge.id,
-		drifts: edge.drifts
-	})), filter(hasDrifts))
-}), deepEqual);
-var variants = {
-	initial: {
-		opacity: 0,
-		translateY: -8
-	},
-	animate: {
-		opacity: 1,
-		translateY: 0,
-		transition: { delayChildren: stagger(.1) }
-	},
-	exit: {
-		opacity: 0,
-		translateY: -8,
-		transition: { delayChildren: stagger(.2, {
-			startDelay: .5,
-			from: "last"
-		}) }
-	}
-};
-function DriftsSummary() {
-	const selected = useDiagramSelector(selectDrifts);
-	const diagram = useDiagram();
-	const onMouseLeaveDebounced = useDebouncedCallback((e) => {
-		e.stopPropagation();
-		diagram.unhighlightAll();
-	}, 150);
-	const handlers = {
-		onMouseEnter: useCallbackRef$1((e) => {
-			const target = e.currentTarget.getAttribute("data-drift-type");
-			const id = e.currentTarget.getAttribute("data-drift-id");
-			if (target === "node" && id) {
-				e.stopPropagation();
-				onMouseLeaveDebounced.cancel();
-				diagram.highlightNode(id);
-				return;
-			}
-			if (target === "edge" && id) {
-				e.stopPropagation();
-				onMouseLeaveDebounced.cancel();
-				diagram.highlightEdge(id);
-				return;
-			}
-		}),
-		onMouseLeave: onMouseLeaveDebounced,
-		onClick: useCallbackRef$1((e) => {
-			const target = e.currentTarget.getAttribute("data-drift-type");
-			const id = e.currentTarget.getAttribute("data-drift-id");
-			if (target === "node" && id) {
-				e.stopPropagation();
-				diagram.centerViewportOnNode(id);
-				return;
-			}
-			if (target === "edge" && id) {
-				e.stopPropagation();
-				diagram.centerViewportOnEdge(id);
-				return;
-			}
-		})
-	};
-	const { view, nodes, edges } = selected;
-	const hasDrifts = view.length > 0 || nodes.length > 0 || edges.length > 0;
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: hasDrifts && /* @__PURE__ */ jsxs(m.div, {
-		layout: "size",
-		variants,
-		initial: "initial",
-		animate: "animate",
-		exit: "exit",
-		layoutDependency: selected,
-		className: vstack({
-			mx: "[calc({spacing.2} * -1)]",
-			px: "2",
-			flex: "1",
-			height: "100%",
-			overflow: "scroll",
-			gap: "4"
-		}),
-		children: [
-			hasAtLeast(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
-			nodes.length > 0 && /* @__PURE__ */ jsxs(m.div, {
-				layout: true,
-				children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Elements:" }), /* @__PURE__ */ jsx("div", {
-					className: vstack({
-						mt: "2",
-						gap: "2"
-					}),
-					children: map(nodes, (node) => /* @__PURE__ */ jsx(NodeDrifts, {
-						...node,
-						...handlers
-					}, node.id))
-				})]
-			}, `nodes-drifts`),
-			edges.length > 0 && /* @__PURE__ */ jsxs(m.div, {
-				layout: true,
-				children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Relationships:" }), /* @__PURE__ */ jsx("div", {
-					className: vstack({
-						mt: "2",
-						gap: "2"
-					}),
-					children: map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, {
-						...edge,
-						...handlers
-					}, edge.edgeId))
-				})]
-			}, `edges-drifts`)
-		]
-	}, `drifts-summary`) });
-}
-function ViewDrifts({ drifts }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(m.div, {
-		layout: "position",
-		className: vstack({ gap: "2" }),
-		children: [/* @__PURE__ */ jsx(SectionHeader, { children: "View drifts (summary):" }), /* @__PURE__ */ jsx(DriftsGroup, { children: map(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, drift)) }, `view-drifts`)]
-	}, `view-drifts-header`) });
-}
-function NodeDrifts({ id, name, drifts, ...handlers }) {
-	const key = `node-drifts-${id}`;
-	return /* @__PURE__ */ jsxs(DriftsGroup, {
-		"data-drift-type": "node",
-		"data-drift-id": id,
-		...handlers,
-		children: [/* @__PURE__ */ jsx(Txt, {
-			truncate: true,
-			medium: true,
-			css: { maxWidth: {
-				base: "[160px]",
-				"@/sm": "[180px]",
-				"@/md": "[250px]"
-			} },
-			color: "likec4.compare.outline",
-			fontSize: "xs",
-			lineHeight: "sm",
-			children: name
-		}), map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))]
-	}, key);
-}
-function EdgeDrifts({ edgeId, drifts, ...handlers }) {
-	const key = `edge-drifts-${edgeId}`;
-	return /* @__PURE__ */ jsx(DriftsGroup, {
-		"data-drift-type": "edge",
-		"data-drift-id": edgeId,
-		...handlers,
-		children: map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))
-	}, key);
-}
-var DriftsGroup = styled(m.div, { base: vstack.raw({
-	gap: "1",
-	px: "3",
-	py: "2",
-	cursor: "default",
-	rounded: "sm",
-	backgroundColor: "likec4.compare.manual/10",
-	borderWidth: "default",
-	borderStyle: "solid",
-	borderColor: "likec4.compare.outline/20",
-	_hover: {
-		backgroundColor: "likec4.compare.manual/20",
-		borderColor: "likec4.compare.outline/25"
-	}
-}) }, { defaultProps: {
-	className: "group",
-	variants,
-	layout: true,
-	initial: "initial",
-	animate: "animate",
-	exit: "exit"
-} });
-var SectionHeader = styled(m.div, { base: {
-	userSelect: "none",
-	fontWeight: "medium",
-	textStyle: "dimmed.xs",
-	pl: "2"
-} }, { defaultProps: {
-	variants,
-	layout: "position",
-	initial: "initial",
-	animate: "animate",
-	exit: "exit"
-} });
-var DriftLabel = styled(m.div, { base: {
-	userSelect: "none",
-	textStyle: "xs",
-	color: {
-		base: "text",
-		_groupHover: "text.bright"
-	}
-} }, { defaultProps: {
-	variants,
-	layout: "position",
-	initial: "initial",
-	animate: "animate",
-	exit: "exit"
-} });
-//#endregion
-export { DriftsSummary };

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.d.ts

@@ -1,5 +0,0 @@
-import { LayoutType } from '@likec4/core';
-export declare function LayoutTypeSwitcher({ value, onChange, }: {
-    value: LayoutType;
-    onChange: (layout: LayoutType) => void;
-}): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js

@@ -1,35 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { css } from "@likec4/styles/css";
-import { jsx } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { SegmentedControl } from "@mantine/core";
-import * as m from "motion/react-m";
-//#region src/navigationpanel/comparepanel/LayoutTypeSwitcher.tsx
-var data = [{
-	value: "manual",
-	label: "Saved manual"
-}, {
-	value: "auto",
-	label: "Latest auto"
-}];
-function LayoutTypeSwitcher({ value, onChange }) {
-	return /* @__PURE__ */ jsx(m.div, {
-		layout: "position",
-		children: /* @__PURE__ */ jsx(SegmentedControl, {
-			size: "xs",
-			color: value === "manual" ? "orange" : "green",
-			value,
-			onChange: (layout) => {
-				invariant(layout === "manual" || layout === "auto", "Invalid layout type");
-				onChange(layout);
-			},
-			classNames: { label: css({
-				fontSize: "xxs",
-				fontWeight: "medium"
-			}) },
-			data
-		})
-	});
-}
-//#endregion
-export { LayoutTypeSwitcher };

package/dist/navigationpanel/comparepanel/index.d.ts

@@ -1 +0,0 @@
-export { ComparePanel } from './ComparePanel';

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

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const LayoutWarning: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/controls/LayoutWarning.js

@@ -1,89 +0,0 @@
-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 { 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, 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();
-			},
-			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
-export { LayoutWarning };

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

@@ -1 +0,0 @@
-export declare const LogoButton: () => import("react").JSX.Element;

package/dist/navigationpanel/controls/LogoButton.js

@@ -1,48 +0,0 @@
-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.d.ts

@@ -1 +0,0 @@
-export declare function NavigationButtons(): import("react").JSX.Element;

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -1,37 +0,0 @@
-import "../../_virtual/_rolldown/runtime.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 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 } = useDiagramSelector(selectNavigationState);
-	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.d.ts

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

package/dist/navigationpanel/controls/OpenSource.js

@@ -1,26 +0,0 @@
-import "../../_virtual/_rolldown/runtime.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 diagram = useDiagram();
-	return /* @__PURE__ */ jsx(Tooltip, {
-		label: "Open View Source",
-		children: /* @__PURE__ */ jsx(PanelActionIcon, {
-			layout: "position",
-			onClick: (e) => {
-				e.stopPropagation();
-				const viewId = diagram.currentView.id;
-				diagram.openSource({ view: viewId });
-			},
-			children: /* @__PURE__ */ jsx(IconFileSymlink, { style: {
-				width: "60%",
-				height: "60%"
-			} })
-		})
-	});
-};
-//#endregion
-export { OpenSource };

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

@@ -1 +0,0 @@
-export declare function SearchControl(): import("react").JSX.Element;

package/dist/navigationpanel/controls/SearchControl.js

@@ -1,68 +0,0 @@
-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";
-//#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",
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.openSearch();
-		},
-		...searchControlAnimation.current,
-		className: cx("group", hstack({
-			gap: "xxs",
-			paddingInline: "sm",
-			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: "xs",
-				fontWeight: "bold",
-				lineHeight: "1",
-				opacity: "0.7",
-				whiteSpace: "nowrap"
-			},
-			children: isMac ? "⌘ + K" : "Ctrl + K"
-		})]
-	});
-}
-//#endregion
-export { SearchControl };

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

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

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -1,69 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconLock, IconLockOpen2 } from "@tabler/icons-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { UnstyledButton } from "@mantine/core";
-import { m } from "motion/react";
-import { hstack } from "@likec4/styles/patterns";
-//#region src/navigationpanel/controls/ToggleReadonly.tsx
-function ToggleReadonly({ disabled, isReadOnly }) {
-	const diagram = useDiagram();
-	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"
-				}),
-				children: "Edit"
-			})
-		]
-	});
-}
-//#endregion
-export { ToggleReadonly };

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

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