@likec4/diagram 1.59.2 → 1.59.4

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -106,8 +106,8 @@ function DeploymentNode(props) {
 	});
 }
 var compoundHasDrifts = css({
-	outlineColor: "likec4.compare.manual.outline",
-	outlineWidth: "4px",
+	outlineColor: "likec4.compare.outline",
+	outlineWidth: "extra",
 	outlineStyle: "dashed",
 	outlineOffset: "1.5"
 });
@@ -116,8 +116,9 @@ var hasDrifts = (props) => {
 };
 function CompoundElementNode(props) {
 	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+	const showDrifts = enableCompareWithLatest && hasDrifts(props);
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		className: showDrifts ? compoundHasDrifts : void 0,
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
@@ -134,8 +135,9 @@ function CompoundElementNode(props) {
 }
 function CompoundDeploymentNode(props) {
 	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+	const showDrifts = enableCompareWithLatest && hasDrifts(props);
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		className: showDrifts ? compoundHasDrifts : void 0,
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
@@ -152,8 +154,9 @@ function CompoundDeploymentNode(props) {
 }
 function ViewGroupNode(props) {
 	const { enableCompareWithLatest } = useEnabledFeatures();
+	const showDrifts = enableCompareWithLatest && hasDrifts(props);
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		className: showDrifts ? compoundHasDrifts : void 0,
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js

@@ -73,7 +73,7 @@ function ColorSwatches({ theme, elementColor, onColorPreview, onChange }) {
 			openDelay: 1e3,
 			closeDelay: 300,
 			children: [/* @__PURE__ */ jsx(Flex$1, {
-				maxW: "120px",
+				maxW: "[120px]",
 				gap: "1.5",
 				justify: "flex-start",
 				align: "flex-start",
@@ -107,7 +107,7 @@ function ColorSwatches({ theme, elementColor, onColorPreview, onChange }) {
 				}, color))
 			}), /* @__PURE__ */ jsx(Flex$1, {
 				mt: "sm",
-				maxW: "110px",
+				maxW: "[110px]",
 				gap: "1.5",
 				justify: "flex-start",
 				align: "flex-start",

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -1,6 +1,6 @@
 import "../../../../_virtual/_rolldown/runtime.js";
 import { stopPropagation } from "../../../../utils/xyflow.js";
-import { useDiagramContext } from "../../../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagramSelector } from "../../../../hooks/safeContext.js";
 import { toolbarTitle } from "./styles.css.js";
 import { cx } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,20 +9,21 @@ import { Paper, Text } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { Box as Box$1, HStack, VStack } from "@likec4/styles/jsx";
 //#region src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx
-var selectSelectedNodesCount = (context) => {
+var selectSelectedNodesCount = selectDiagramContext((context) => {
 	return context.xynodes.filter((x) => x.selected).length;
-};
+});
 var useSelectedNodesCount = () => {
-	return useDiagramContext(selectSelectedNodesCount);
+	return useDiagramSelector(selectSelectedNodesCount);
 };
 function Toolbar({ title, children, nodeProps, ...props }) {
 	const selectedNodesCount = useSelectedNodesCount();
 	const { selected = false, dragging = false, data: { hovered = false } } = nodeProps;
 	const _isToolbarVisible = hovered && selectedNodesCount === 0 || selected && selectedNodesCount === 1;
 	let delay = 150;
-	if (_isToolbarVisible) if (selected) delay = 100;
-	else delay = 1e3;
-	else if (selectedNodesCount > 0) delay = 50;
+	if (_isToolbarVisible) {
+		if (selected) delay = 100;
+		else delay = 1e3;
+	} else if (selectedNodesCount > 0) delay = 50;
 	const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay);
 	if (!isToolbarVisible) return null;
 	return /* @__PURE__ */ jsx(NodeToolbar, {
@@ -35,7 +36,7 @@ function Toolbar({ title, children, nodeProps, ...props }) {
 			pb: 8,
 			pt: 4,
 			radius: "sm",
-			shadow: "xl",
+			shadow: "lg",
 			onDoubleClickCapture: stopPropagation,
 			onPointerDown: stopPropagation,
 			onClick: stopPropagation,

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -4,7 +4,7 @@ var toolbarTitle = css({
 	color: "text.dimmed",
 	fontSize: "xxs",
 	fontWeight: "bold",
-	maxWidth: "220px",
+	maxWidth: "[220px]",
 	cursor: "default",
 	userSelect: "all",
 	textOverflow: "ellipsis",

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -134,7 +134,6 @@ var RelationshipPopover = memo(() => {
 var getEdgeLabelElement = (edgeId, container) => {
 	return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
 };
-var POPOVER_PADDING = 8;
 var RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, sourceNode, targetNode, onMouseEnter, onMouseLeave }) => {
 	const ref = useRef(null);
 	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
@@ -180,7 +179,7 @@ var RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, source
 							})}px`
 						});
 					} }),
-					hide({ padding: POPOVER_PADDING * 2 })
+					hide({ padding: 16 })
 				]
 			}).then(({ x, y, middlewareData }) => {
 				if (wasCanceled) return;
@@ -230,6 +229,8 @@ var RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, source
 		} },
 		className: cx(css({
 			layerStyle: "likec4.dropdown",
+			border: "subtle",
+			rounded: "sm",
 			p: "0",
 			pointerEvents: {
 				base: "all",

package/dist/likec4diagram/relationship-popover/components.d.ts

@@ -1,6 +1,6 @@
 import { Color } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { StyledComponent } from '../../../styled-system/types';
+import { StyledComponent } from '@likec4/styles/types';
 export declare const Endpoint: ({ children, likec4color }: PropsWithChildren<{
     likec4color: Color;
 }>) => import("react").JSX.Element;

package/dist/likec4diagram/relationship-popover/components.js

@@ -12,7 +12,7 @@ var Endpoint = ({ children, likec4color }) => {
 			whiteSpace: "nowrap",
 			overflow: "hidden",
 			textOverflow: "ellipsis",
-			maxWidth: "160px",
+			truncate: true,
 			paddingX: "1",
 			paddingY: "0.5",
 			rounded: "xs",
@@ -25,6 +25,10 @@ var Endpoint = ({ children, likec4color }) => {
 				_dark: "var(--likec4-palette-loContrast)"
 			}
 		}),
+		style: {
+			minWidth: 0,
+			maxWidth: 160
+		},
 		children
 	});
 };
@@ -35,7 +39,7 @@ var RelationshipTitle = styled("div", { base: {
 	userSelect: "all",
 	overflowWrap: "anywhere",
 	wordBreak: "break-word",
-	minWidth: 0
+	minWidth: "0"
 } });
 //#endregion
 export { Endpoint, RelationshipTitle };

package/dist/likec4diagram/state/DiagramActorProvider.d.ts

@@ -1,14 +1,19 @@
 import { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { ViewPaddings } from '../../LikeC4Diagram.props';
-export declare function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
+import { RelationshipBrowserScope, ViewPaddings } from '../../LikeC4Diagram.props';
+export declare function DiagramActorProvider({ id, view, zoomable, pannable, fitView, initialZoom, nodesDraggable, nodesSelectable, fitViewPadding, where, minZoom, maxZoom, children, dynamicViewVariant: _defaultVariant, relationshipBrowserScope, }: PropsWithChildren<{
     id: string;
     view: DiagramView;
     zoomable: boolean;
     pannable: boolean;
+    fitView: boolean;
+    initialZoom?: number | undefined;
+    minZoom?: number | undefined;
+    maxZoom?: number | undefined;
     nodesDraggable: boolean;
     nodesSelectable: boolean;
     fitViewPadding: ViewPaddings;
     where?: WhereOperator | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+    relationshipBrowserScope: RelationshipBrowserScope;
 }>): import("react").JSX.Element;

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -1,4 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
+import { MinZoom } from "../../base/const.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { useDiagramEventHandlersRef } from "../../context/DiagramEventHandlers.js";
 import { DiagramFeatures, useEnabledFeatures } from "../../context/DiagramFeatures.js";
@@ -14,7 +15,7 @@ import { useStoreApi } from "@xyflow/react";
 import { isNullish } from "remeda";
 import { useActorRef } from "@xstate/react";
 //#region src/likec4diagram/state/DiagramActorProvider.tsx
-function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where = null, children, dynamicViewVariant: _defaultVariant }) {
+function DiagramActorProvider({ id, view, zoomable, pannable, fitView, initialZoom, nodesDraggable, nodesSelectable, fitViewPadding, where = null, minZoom = MinZoom, maxZoom = 3, children, dynamicViewVariant: _defaultVariant, relationshipBrowserScope }) {
 	const xystore = useStoreApi();
 	const editor = useEditorActorLogic();
 	const features = useEnabledFeatures();
@@ -26,12 +27,17 @@ function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, no
 			view,
 			zoomable,
 			pannable,
+			fitView,
+			initialZoom,
+			minZoom,
+			maxZoom,
 			fitViewPadding,
 			nodesDraggable,
 			nodesSelectable,
 			where,
 			features,
-			dynamicViewVariant: _defaultVariant
+			dynamicViewVariant: _defaultVariant,
+			relationshipBrowserScope
 		}
 	});
 	const actorRef = useRef(actor);
@@ -54,18 +60,28 @@ function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, no
 			zoomable,
 			where,
 			pannable,
+			fitView,
+			initialZoom,
+			minZoom,
+			maxZoom,
 			fitViewPadding,
 			nodesDraggable,
-			nodesSelectable
+			nodesSelectable,
+			relationshipBrowserScope
 		}
 	}), [
 		actor,
 		zoomable,
 		where,
 		pannable,
+		fitView,
+		initialZoom,
+		minZoom,
+		maxZoom,
 		fitViewPadding,
 		nodesDraggable,
-		nodesSelectable
+		nodesSelectable,
+		relationshipBrowserScope
 	]);
 	useUpdateEffect(() => {
 		if (!_defaultVariant) return;

package/dist/likec4diagram/state/assign.js

@@ -86,7 +86,7 @@ function resetEdgeControlPoints(nodeLookup, edge) {
 	if (source === target) {
 		const loopSize = 80;
 		const centerOfTopBoundary = vector(0, source.height || 0).multiply(-.5).add(sourceCenter);
-		return [centerOfTopBoundary.add(vector(-80 / 2.5, -80)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).round().toObject()];
+		return [centerOfTopBoundary.add(vector(-32, -80)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).round().toObject()];
 	}
 	const sourceToTargetVector = targetCenter.subtract(sourceCenter);
 	const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);

package/dist/likec4diagram/state/createViewChange.js

@@ -1,5 +1,4 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { bezierControlPoints, isSamePoint } from "../../utils/xyflow.js";
 import { calcViewBounds } from "../../utils/view-bounds.js";
 import { hasAtLeast, map } from "remeda";
 import { getNodeDimensions } from "@xyflow/system";
@@ -7,7 +6,6 @@ import { getNodeDimensions } from "@xyflow/system";
 function createViewChange(parentContext) {
 	const { view: { drifts: _1, _layout: _2, ...view }, xynodes, xystore } = parentContext;
 	const { nodeLookup, edgeLookup } = xystore.getState();
-	const movedNodes = /* @__PURE__ */ new Set();
 	const nodes = map(view.nodes, (node) => {
 		const internal = nodeLookup.get(node.id);
 		if (!internal) {
@@ -17,7 +15,6 @@ function createViewChange(parentContext) {
 		const xynodedata = xynodes.find((n) => n.data.id === node.id)?.data ?? internal.data;
 		const position = internal.internals.positionAbsolute;
 		const { width, height } = getNodeDimensions(internal);
-		if (!isSamePoint(position, node) || node.width !== width || node.height !== height) movedNodes.add(node.id);
 		return {
 			...node,
 			shape: xynodedata.shape,
@@ -36,9 +33,7 @@ function createViewChange(parentContext) {
 			return edge;
 		}
 		const data = xyedge.data;
-		let controlPoints = data.controlPoints ?? [];
-		const sourceOrTargetMoved = movedNodes.has(xyedge.source) || movedNodes.has(xyedge.target);
-		if (controlPoints.length === 0 && sourceOrTargetMoved) controlPoints = bezierControlPoints(data.points);
+		const controlPoints = data.controlPoints ?? [];
 		const _updated = {
 			...edge,
 			points: data.points

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -3,7 +3,7 @@ import { RefObject } from 'react';
 import { PartialDeep } from 'type-fest';
 import { TogglableFeature } from '../../context/DiagramFeatures';
 import { EditorActorRef } from '../../editor/actor/machine';
-import { OpenSourceParams } from '../../LikeC4Diagram.props';
+import { OpenSourceParams, RelationshipBrowserScope } from '../../LikeC4Diagram.props';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';
@@ -69,7 +69,7 @@ export declare class DiagramApi<A extends Any = Unknown> {
     /**
      * Open relationships browser
      */
-    openRelationshipsBrowser(fqn: Fqn<A>): void;
+    openRelationshipsBrowser(fqn: Fqn<A>, scope?: RelationshipBrowserScope): void;
     /**
      * If running in editor, trigger opening source file
      */

package/dist/likec4diagram/state/diagram-api.js

@@ -88,10 +88,11 @@ var DiagramApi = class DiagramApi {
 	/**
 	* Open relationships browser
 	*/
-	openRelationshipsBrowser(fqn) {
+	openRelationshipsBrowser(fqn, scope) {
 		this.send({
 			type: "open.relationshipsBrowser",
-			fqn
+			fqn,
+			...scope && { scope }
 		});
 	}
 	/**

package/dist/likec4diagram/state/machine.actions.js

@@ -1,10 +1,10 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { Base } from "../../base/Base.js";
+import { convertToXYFlow } from "../convert-to-xyflow.js";
 import { findDiagramEdge, findDiagramNode, typedSystem, viewBounds } from "./utils.js";
 import { machine } from "./machine.setup.js";
 import { createLayoutConstraints } from "../useLayoutConstraints.js";
 import { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints } from "./assign.js";
-import { convertToXYFlow } from "../convert-to-xyflow.js";
 import { getAligner, toNodeRect } from "./aligners.js";
 import { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter } from "./machine.actions.layout.js";
 import { hasAtLeast, isTruthy, mapToObj } from "remeda";
@@ -13,6 +13,7 @@ import { BBox as BBox$1 } from "@likec4/core/geometry";
 import { difference as difference$1, isString as isString$1 } from "@likec4/core/utils";
 import { nodeToRect } from "@xyflow/system";
 import { assertEvent } from "xstate";
+import { getViewFolderPath } from "@likec4/core/model";
 import { produce } from "immer";
 //#region src/likec4diagram/state/machine.actions.ts
 var resetSelection = () => machine.raise({ type: "xyflow.resetSelection" });
@@ -231,7 +232,7 @@ var emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, system, cont
 		return;
 	}
 	if (context.toggledFeatures.enableCompareWithLatest === true) {
-		if (currentLayoutType === "manual" && nextLayoutType === "auto") typedSystem(system).editorActorRef?.send({ type: "cancel" });
+		if (currentLayoutType === "manual" && nextLayoutType === "auto") enqueue.sendTo(typedSystem.editorActor, { type: "cancel" });
 		const currentViewport = context.viewport;
 		if (currentLayoutType === "auto") enqueue.assign({ viewportOnAutoLayout: currentViewport });
 		if (currentLayoutType === "manual") enqueue.assign({ viewportOnManualLayout: currentViewport });
@@ -250,7 +251,8 @@ var layoutAlign = (params) => machine.createAction(({ context, event }) => {
 	}
 	const xystore = nonNullable(context.xystore, "xystore is not initialized");
 	const { nodeLookup, parentLookup } = xystore.getState();
-	const nodesToAlign = [...difference$1(new Set(nodeLookup.values().filter((n) => n.selected).map((n) => n.id)), new Set(parentLookup.keys()))];
+	const selectedNodes = new Set(nodeLookup.values().filter((n) => n.selected).map((n) => n.id));
+	const nodesToAlign = [...difference$1(selectedNodes, new Set(parentLookup.keys()))];
 	if (!hasAtLeast(nodesToAlign, 2)) {
 		console.warn("At least 2 nodes must be selected to align");
 		return;
@@ -307,8 +309,9 @@ var notationsHighlight = () => machine.assign(({ context, event }) => {
 });
 var tagHighlight = () => machine.assign(({ context, event }) => {
 	assertEvent(event, "tag.highlight");
+	const tag = event.tag.startsWith("#") ? event.tag.slice(1) : event.tag;
 	return { xynodes: context.xynodes.map((n) => {
-		if (n.data.tags?.includes(event.tag)) return Base.setDimmed(n, false);
+		if (n.data.tags && n.data.tags.includes(tag)) return Base.setDimmed(n, false);
 		return Base.setDimmed(n, true);
 	}) };
 });
@@ -476,7 +479,7 @@ var openOverlay = () => machine.enqueueActions(({ context, event, enqueue, check
 				type: "open.relationshipsBrowser",
 				subject: event.fqn,
 				viewId: context.view.id,
-				scope: "view",
+				scope: event.scope ?? context.relationshipBrowserScope,
 				closeable: true,
 				enableChangeScope: true,
 				enableSelectSubject: true
@@ -536,12 +539,13 @@ var ensureNavigationPanelActor = () => machine.enqueueActions(({ enqueue, check,
 	const enabled = check("enabled: NavigationPanel");
 	const running = typedSystem(system).navigationActorRef;
 	if (enabled && !running) {
+		const viewFolder = context.view.title ? getViewFolderPath(context.view.title) : "";
 		enqueue.spawnChild("navigationPanel", {
 			id: "navigationPanel",
 			systemId: "navigationPanel",
 			input: {
-				view: context.view,
-				viewModel: null
+				viewId: context.view.id,
+				viewFolder: viewFolder ?? ""
 			},
 			syncSnapshot: true
 		});
@@ -737,7 +741,10 @@ var updateView = () => machine.enqueueActions(({ enqueue, event, context }) => {
 	let recenter = !context.viewportChangedManually && !context.focusedNode && !context.activeWalkthrough;
 	recenter = recenter || context.toggledFeatures.enableCompareWithLatest === true && !!nextView._layout && context.view._layout !== nextView._layout;
 	if (nextView._type === "dynamic" && context.view._type === "dynamic") {
-		if (nextView.variant === context.view.variant && nextView.variant !== context.dynamicViewVariant) enqueue(setViewportCenter(BBox$1.center(viewBounds(context, nextView))));
+		if (nextView.variant === context.view.variant && nextView.variant !== context.dynamicViewVariant) {
+			const nextCenter = BBox$1.center(viewBounds(context, nextView));
+			enqueue(setViewportCenter(nextCenter));
+		}
 	}
 	if (recenter) {
 		enqueue(cancelFitDiagram());

package/dist/likec4diagram/state/machine.actions.layout.d.ts

@@ -225,6 +225,7 @@ export declare const centerOnNodeOrEdge: () => ActionFunction<Context, Events, E
 export declare const fitDiagram: (params?: {
     duration?: number;
     bounds?: BBox;
+    zoom?: number | undefined;
 }) => ActionFunction<Context, Events, Events, unknown, {
     src: "search";
     logic: SearchActorLogic;

package/dist/likec4diagram/state/machine.actions.layout.js

@@ -1,5 +1,4 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { MinZoom } from "../../base/const.js";
 import { calcEdgeBounds } from "../../utils/view-bounds.js";
 import { activeSequenceBounds, focusedBounds, getEdgeBounds, viewBounds } from "./utils.js";
 import { isActiveSequenceWalkthrough, machine } from "./machine.setup.js";
@@ -77,15 +76,16 @@ var centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
 		bounds: getNodesBounds([node], xystate)
 	};
 });
-function fitBoundsInViewport(context, bounds, duration) {
+function fitBoundsInViewport(context, bounds, duration, zoom) {
 	let { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
 	let left = void 0;
 	if (isActiveSequenceWalkthrough(context)) {
 		left = context.activeWalkthrough.outlinePanelWidth;
 		width -= left;
 	}
-	const maxZoom = calcMaxZoom(context, transform);
-	const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
+	const minZoom = zoom ?? context.minZoom;
+	const maxZoom = zoom ?? calcMaxZoom(context, transform);
+	const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, context.fitViewPadding);
 	viewport.x = Math.round(viewport.x);
 	viewport.y = Math.round(viewport.y);
 	if (left !== void 0) viewport.x += left;
@@ -100,16 +100,18 @@ function fitBoundsInViewport(context, bounds, duration) {
 var fitDiagram = (params) => machine.createAction(({ context, event }) => {
 	let bounds;
 	let duration;
+	let zoom;
 	if (params) {
 		bounds = params.bounds;
 		duration = params.duration;
+		zoom = params.zoom;
 	} else if (event.type === "xyflow.fitDiagram") {
 		bounds = event.bounds;
 		duration = event.duration;
 	}
 	bounds ??= viewBounds(context);
 	duration ??= 450;
-	fitBoundsInViewport(context, bounds, duration);
+	fitBoundsInViewport(context, bounds, duration, zoom);
 });
 var fitFocusedBounds = (params) => machine.createAction(({ context }) => {
 	let { bounds, duration = 450 } = !!context.activeWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });

package/dist/likec4diagram/state/machine.setup.d.ts

@@ -6,7 +6,7 @@ import { PartialDeep } from 'type-fest';
 import { ActorRefFromLogic, StateMachine, StateValue, SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
 import { EnabledFeatures, TogglableFeature } from '../../context/DiagramFeatures';
 import { XYFlowInstance, XYStoreApi } from '../../hooks/useXYFlow';
-import { OpenSourceParams, ViewPaddings } from '../../LikeC4Diagram.props';
+import { OpenSourceParams, RelationshipBrowserScope, ViewPaddings } from '../../LikeC4Diagram.props';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
 import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
@@ -40,17 +40,23 @@ export interface Input {
     xystore: XYStoreApi;
     zoomable: boolean;
     pannable: boolean;
+    fitView?: boolean | undefined;
+    initialZoom?: number | undefined;
+    minZoom?: number | undefined;
+    maxZoom?: number | undefined;
     nodesDraggable: boolean;
     nodesSelectable: boolean;
     fitViewPadding: ViewPaddings;
     where: WhereOperator | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+    relationshipBrowserScope?: RelationshipBrowserScope | undefined;
     features?: EnabledFeatures;
 }
 export type ToggledFeatures = {
     [P in `enable${TogglableFeature}`]?: boolean;
 };
 export interface Context extends Input {
+    relationshipBrowserScope: RelationshipBrowserScope;
     xynodes: Types.Node[];
     xyedges: Types.Edge[];
     features: EnabledFeatures;
@@ -100,6 +106,8 @@ export interface Context extends Input {
     collapsedSequenceFlows: {
         [flowId: StepPath]: boolean;
     };
+    minZoom: number;
+    maxZoom: number;
 }
 export declare function Context({ input }: {
     input: Input;
@@ -206,6 +214,7 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
 } | {
     type: 'open.relationshipsBrowser';
     fqn: Fqn;
+    scope?: RelationshipBrowserScope | undefined;
 } | {
     type: 'open.search';
     search?: string;

package/dist/likec4diagram/state/machine.setup.js

@@ -1,4 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
+import "../../base/const.js";
 import { DefaultFeatures } from "../../context/DiagramFeatures.js";
 import { defineActors } from "../../utils/defineActors.js";
 import { editorActorLogic } from "../../editor/actor/machine.js";
@@ -16,6 +17,8 @@ import { assertEvent, setup } from "xstate";
 function Context({ input }) {
 	return {
 		...input,
+		fitView: input.fitView ?? true,
+		relationshipBrowserScope: input.relationshipBrowserScope ?? "view",
 		xynodes: [],
 		xyedges: [],
 		features: {
@@ -51,7 +54,9 @@ function Context({ input }) {
 		xyflow: null,
 		dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
 		activeWalkthrough: null,
-		collapsedSequenceFlows: {}
+		collapsedSequenceFlows: {},
+		minZoom: input.minZoom ?? .05,
+		maxZoom: input.maxZoom ?? 3
 	};
 }
 var deriveToggledFeatures = (context) => {
@@ -67,6 +72,14 @@ var isReadOnly = (context) => deriveToggledFeatures(context).enableReadOnly;
 function isActiveSequenceWalkthrough(context) {
 	return isDynamicView(context.view) && context.dynamicViewVariant === "sequence" && !!context.activeWalkthrough && hasProp(context.view, "flow");
 }
+var actors = defineActors({
+	hotkey: hotkeyActorLogic,
+	overlays: overlaysActorLogic,
+	search: searchActorLogic,
+	mediaPrint: mediaPrintActorLogic,
+	editor: editorActorLogic,
+	navigationPanel: navigationPanelActorLogic
+});
 var machine = setup({
 	types: {
 		context: {},
@@ -75,14 +88,7 @@ var machine = setup({
 		events: {},
 		emitted: {}
 	},
-	actors: defineActors({
-		hotkey: hotkeyActorLogic,
-		overlays: overlaysActorLogic,
-		search: searchActorLogic,
-		mediaPrint: mediaPrintActorLogic,
-		editor: editorActorLogic,
-		navigationPanel: navigationPanelActorLogic
-	}),
+	actors,
 	guards: {
 		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
 		"enabled: Editor": ({ context }) => context.features.enableEditor,

package/dist/likec4diagram/state/machine.state.initializing.d.ts

@@ -96,7 +96,7 @@ export declare const initializing: {
 export declare const isReady: {
     always: ({
         guard: "isReady";
-        actions: ( ActionFunction<Context, Events, Events, unknown, {
+        actions: ActionFunction<Context, Events, Events, undefined, {
             src: "search";
             logic: SearchActorLogic;
             id: "search";
@@ -198,31 +198,7 @@ export declare const isReady: {
         } | {
             type: "click: active walkthrough step";
             params: unknown;
-        }, never, EmittedEvents> | ActionFunction<Context, Events, Events, undefined, {
-            src: "search";
-            logic: SearchActorLogic;
-            id: "search";
-        } | {
-            src: "hotkey";
-            logic: HotkeyActorLogic;
-            id: "hotkey";
-        } | {
-            src: "overlays";
-            logic: OverlaysActorLogic;
-            id: "overlays";
-        } | {
-            src: "mediaPrint";
-            logic: MediaPrintActorLogic;
-            id: "mediaPrint";
-        } | {
-            src: "editor";
-            logic: EditorActorLogic;
-            id: "editor";
-        } | {
-            src: "navigationPanel";
-            logic: NavigationPanelActorLogic;
-            id: "navigationPanel";
-        }, never, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
+        }, never, EmittedEvents>;
         target: string;
     } | {
         target: string;