@likec4/diagram 1.59.3 → 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"
 });

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,11 +9,11 @@ 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();
@@ -36,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

@@ -229,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/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 });
@@ -308,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);
 	}) };
 });
@@ -477,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
@@ -537,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
 		});

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) => {

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;

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

@@ -37,18 +37,21 @@ var initializing = machine.createStateConfig({ on: {
 */
 var isReady = machine.createStateConfig({ always: [{
 	guard: "isReady",
-	actions: [
-		fitDiagram({ duration: 0 }),
-		assign(({ context }) => ({ navigationHistory: {
+	actions: machine.enqueueActions(({ context, enqueue }) => {
+		enqueue(fitDiagram({
+			duration: 0,
+			zoom: context.initialZoom ?? (context.fitView ? void 0 : 1)
+		}));
+		enqueue(assign(({ context }) => ({ navigationHistory: {
 			currentIndex: 0,
 			history: [{
 				viewId: context.view.id,
 				viewport: { ...context.xyflow.getViewport() },
 				viewportChangedManually: false
 			}]
-		} })),
-		emitInitialized()
-	],
+		} })));
+		enqueue(emitInitialized());
+	}),
 	target: "ready"
 }, { target: "initializing" }] });
 //#endregion

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

@@ -1,10 +1,10 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { roundDpr } from "../../utils/roundDpr.js";
 import { parsePaddings } from "../../utils/xyflow.js";
+import { convertToXYFlow } from "../convert-to-xyflow.js";
 import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef, viewBounds } from "./utils.js";
 import { machine, targetState, to } from "./machine.setup.js";
 import { mergeXYNodesEdges } from "./assign.js";
-import { convertToXYFlow } from "../convert-to-xyflow.js";
 import { cancelFitDiagram, raiseSetViewport } from "./machine.actions.layout.js";
 import { disableCompareWithLatest } from "./machine.actions.js";
 import { isTruthy } from "remeda";