@likec4/diagram 1.59.1 → 1.59.3

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -30,9 +30,7 @@ function StartWalkthroughButton() {
 	const actor = useNavigationActor();
 	let tooltipLabel = "Start Dynamic View Walkthrough";
 	switch (true) {
-		case enableCompareWithLatest:
-			tooltipLabel = "Walkthrough not available when Compare is active";
-			break;
+		case enableCompareWithLatest: tooltipLabel = "Walkthrough not available when Compare is active";
 	}
 	return /* @__PURE__ */ jsx(Tooltip$1, {
 		label: tooltipLabel,

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -79,8 +79,8 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 	const defaultLink = only(elementModel.links);
 	const controls = useDragControls();
 	const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
-	const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
-	const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
+	const _width = Math.min(700, windowWidth - 48);
+	const _height = Math.min(650, windowHeight - 48);
 	const fromPosition = rectFromNode ? {
 		x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
 		y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)

package/dist/overlays/overlaysActor.js

@@ -6,6 +6,20 @@ import { isString, last, reverse } from "remeda";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { assertEvent, fromCallback, setup } from "xstate";
 //#region src/overlays/overlaysActor.ts
+var hotkeyLogic = fromCallback(({ sendBack }) => {
+	const handler = getHotkeyHandler([[
+		"Escape",
+		(event) => {
+			event.stopPropagation();
+			sendBack({ type: "close" });
+		},
+		{ preventDefault: true }
+	]]);
+	document.body.addEventListener("keydown", handler, { capture: true });
+	return () => {
+		document.body.removeEventListener("keydown", handler, { capture: true });
+	};
+});
 var machine = setup({
 	types: {
 		context: {},
@@ -17,20 +31,7 @@ var machine = setup({
 		relationshipDetails: relationshipDetailsLogic,
 		elementDetails: elementDetailsLogic,
 		relationshipsBrowser: relationshipsBrowserLogic,
-		hotkey: fromCallback(({ sendBack }) => {
-			const handler = getHotkeyHandler([[
-				"Escape",
-				(event) => {
-					event.stopPropagation();
-					sendBack({ type: "close" });
-				},
-				{ preventDefault: true }
-			]]);
-			document.body.addEventListener("keydown", handler, { capture: true });
-			return () => {
-				document.body.removeEventListener("keydown", handler, { capture: true });
-			};
-		})
+		hotkey: hotkeyLogic
 	},
 	guards: {
 		"has overlays?": ({ context }) => context.overlays.length > 0,
@@ -167,9 +168,7 @@ var openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
 		case "open.relationshipDetails":
 			enqueue(openRelationshipDetails());
 			break;
-		case "open.relationshipsBrowser":
-			enqueue(openRelationshipsBrowser());
-			break;
+		case "open.relationshipsBrowser": enqueue(openRelationshipsBrowser());
 	}
 });
 var listenToEsc = () => machine.spawnChild("hotkey", { id: "hotkey" });

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -56,7 +56,8 @@ var SyncRelationshipDetailsXYFlow = memo(() => {
 		let data;
 		if ("edgeId" in subject && isTruthy(subject.edgeId)) {
 			invariant(view, `view ${subject.viewId} not found`);
-			data = computeEdgeDetailsViewData([nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`).id], view);
+			const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
+			data = computeEdgeDetailsViewData([edge.id], view);
 		} else if (!!subject.source && !!subject.target) data = computeRelationshipDetailsViewData({
 			source: likec4model.element(subject.source),
 			target: likec4model.element(subject.target)

package/dist/overlays/relationship-details/hooks.js

@@ -11,7 +11,8 @@ function useRelationshipDetailsActor() {
 }
 function useRelationshipDetailsState(selector, compare = shallowEqual) {
 	const select = useCallbackRef(selector);
-	return useSelector(useRelationshipDetailsActor(), select, compare);
+	const actor = useRelationshipDetailsActor();
+	return useSelector(actor, select, compare);
 }
 function useRelationshipDetails() {
 	const actor = useRelationshipDetailsActor();

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -152,9 +152,11 @@ var RelationshipsBrowserInner = memo(() => {
 	useEffect(() => {
 		browser.updateView(layouted);
 	}, [layouted, browser]);
+	const hasStepBack = current > 0;
+	const hasStepForward = current + 1 < history.length;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TopLeftPanel, {
-		hasStepBack: current > 0,
-		hasStepForward: current + 1 < history.length,
+		hasStepBack,
+		hasStepForward,
 		onStepBack: () => historyOps.back(),
 		onStepForward: () => historyOps.forward()
 	}), closeable && /* @__PURE__ */ jsx(Panel, {

package/dist/overlays/relationships-browser/actor.js

@@ -43,7 +43,8 @@ var layouter = fromPromise(async ({ input, self, signal }) => {
 		x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
 		y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
 	};
-	const currentSubjectCenter = getNodeCenter(xyflow.getInternalNode(currentSubjectNode.id));
+	const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
+	const currentSubjectCenter = getNodeCenter(currentSubjectInternalNode);
 	const nested = /* @__PURE__ */ new Set();
 	currentNodes.forEach((n) => {
 		if (n.id === existingNode.id) return;

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -16,45 +16,46 @@ var ElementActions = (props) => {
 	const browser = useRelationshipsBrowser();
 	const subject = useRelationshipsBrowserState(selectSubject);
 	const { navigateTo, fqn } = props.data;
+	const buttons = useMemo(() => {
+		const buttons = [];
+		if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) buttons.push({
+			key: "navigate",
+			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo);
+			}
+		});
+		if (fqn !== subject) buttons.push({
+			key: "relationships",
+			icon: /* @__PURE__ */ jsx(IconTransform, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				browser.navigateTo(fqn, props.id);
+			}
+		});
+		if (enableVscode) buttons.push({
+			key: "goToSource",
+			icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openSource({ element: fqn });
+			}
+		});
+		return buttons;
+	}, [
+		navigateTo,
+		enableNavigateTo,
+		currentViewId,
+		fqn,
+		subject,
+		enableVscode,
+		diagram,
+		browser,
+		props.id
+	]);
 	return /* @__PURE__ */ jsx(ElementActionButtons, {
-		buttons: useMemo(() => {
-			const buttons = [];
-			if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) buttons.push({
-				key: "navigate",
-				icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-				onClick: (e) => {
-					e.stopPropagation();
-					diagram.navigateTo(navigateTo);
-				}
-			});
-			if (fqn !== subject) buttons.push({
-				key: "relationships",
-				icon: /* @__PURE__ */ jsx(IconTransform, {}),
-				onClick: (e) => {
-					e.stopPropagation();
-					browser.navigateTo(fqn, props.id);
-				}
-			});
-			if (enableVscode) buttons.push({
-				key: "goToSource",
-				icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
-				onClick: (e) => {
-					e.stopPropagation();
-					diagram.openSource({ element: fqn });
-				}
-			});
-			return buttons;
-		}, [
-			navigateTo,
-			enableNavigateTo,
-			currentViewId,
-			fqn,
-			subject,
-			enableVscode,
-			diagram,
-			browser,
-			props.id
-		]),
+		buttons,
 		...props
 	});
 };

package/dist/overlays/relationships-browser/hooks.js

@@ -9,7 +9,8 @@ function useRelationshipsBrowserActor() {
 	return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
 function useRelationshipsBrowserState(selector, compare = shallowEqual) {
-	return useSelector(useRelationshipsBrowserActor(), selector, compare);
+	const actor = useRelationshipsBrowserActor();
+	return useSelector(actor, selector, compare);
 }
 function useRelationshipsBrowser() {
 	const actor = useRelationshipsBrowserActor();

package/dist/projects-overview/ProjectsOverview.js

@@ -36,16 +36,17 @@ function ProjectsOverview({ view, onNavigateToProject, fitViewPadding = {
 		};
 	}, [actorRef]);
 	const bounds = view.bounds;
+	const initialRef = useRef({
+		initialNodes: [],
+		initialEdges: [],
+		initialWidth: bounds.width,
+		initialHeight: bounds.height,
+		fitView: false
+	});
 	return /* @__PURE__ */ jsx(ProjectsOverviewActorContextProvider, {
 		value: actorRef,
 		children: /* @__PURE__ */ jsxs(ReactFlowProvider, {
-			...useRef({
-				initialNodes: [],
-				initialEdges: [],
-				initialWidth: bounds.width,
-				initialHeight: bounds.height,
-				fitView: false
-			}).current,
+			...initialRef.current,
 			children: [/* @__PURE__ */ jsx(LayoutGroup, {
 				id: actorRef.sessionId,
 				inherit: false,

package/dist/projects-overview/hooks.js

@@ -5,7 +5,8 @@ import { shallowEqual } from "fast-equals";
 import { useSelector } from "@xstate/react";
 //#region src/projects-overview/hooks.ts
 function useProjectsOverviewState(selector, compare = shallowEqual) {
-	return useSelector(useProjectsOverviewActor(), selector, compare);
+	const actor = useProjectsOverviewActor();
+	return useSelector(actor, selector, compare);
 }
 function useProjectsOverviewXYStoreApi() {
 	return useStoreApi();

package/dist/search/components/ViewsColum.js

@@ -25,14 +25,16 @@ var useFoundViews = () => {
 	const search = useNormalizedSearch();
 	return useMemo(() => {
 		let views = [...likec4model.views()];
-		if (search) if (search.startsWith("kind:")) views = [];
-		else {
-			const searchTag = search.startsWith("#") ? search.slice(1) : null;
-			views = views.filter((view) => {
-				if (searchTag) return view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
-				const desc = preferSummary(view.$view)?.md || " ";
-				return `${view.id} ${view.title} ${desc}`.toLocaleLowerCase().includes(search);
-			});
+		if (search) {
+			if (search.startsWith("kind:")) views = [];
+			else {
+				const searchTag = search.startsWith("#") ? search.slice(1) : null;
+				views = views.filter((view) => {
+					if (searchTag) return view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+					const desc = preferSummary(view.$view)?.md || " ";
+					return `${view.id} ${view.title} ${desc}`.toLocaleLowerCase().includes(search);
+				});
+			}
 		}
 		return [
 			views,

package/dist/search/hooks.js

@@ -3,7 +3,8 @@ import { useSearchContext } from "./SearchContext.js";
 import { useCallback, useDeferredValue } from "react";
 //#region src/search/hooks.ts
 function useNormalizedSearch() {
-	return useDeferredValue(useSearchContext().normalizedSearch);
+	const ctx = useSearchContext();
+	return useDeferredValue(ctx.normalizedSearch);
 }
 function useUpdateSearch() {
 	const { setSearchValue } = useSearchContext();

package/dist/shadowroot/ShadowRoot.js

@@ -78,8 +78,9 @@ function ShadowRoot({ children, theme, injectFontCss = true, styleNonce, colorSc
 		}
 		return "";
 	});
+	const nonce = getStyleNonce();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MemoizedStyle, {
-		nonce: getStyleNonce(),
+		nonce,
 		cssstyle
 	}), /* @__PURE__ */ jsx(ShadowRootHost, {
 		...props,
@@ -175,7 +176,8 @@ function createShadowRootStylesheets(csstext) {
 }
 var getComputedColorScheme = () => {
 	try {
-		const colorScheme = first((window.getComputedStyle(document.documentElement).colorScheme ?? "").split(" "));
+		const htmlScheme = window.getComputedStyle(document.documentElement).colorScheme ?? "";
+		const colorScheme = first(htmlScheme.split(" "));
 		if (colorScheme === "light" || colorScheme === "dark") return colorScheme;
 	} catch {}
 	return null;