@likec4/diagram 1.59.3 → 1.59.4

package/dist/LikeC4Diagram.d.ts

@@ -9,4 +9,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, enableNotes, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onRelationshipBrowserScopeChange, onInitialized, view, className, controls, fitView, initialZoom, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, relationshipBrowserScope, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, enableNotes, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, minZoom, maxZoom, children, }: LikeC4DiagramProps<A>): JSX.Element;

package/dist/LikeC4Diagram.js

@@ -12,10 +12,11 @@ import { TagStylesProvider } from "./context/TagStylesContext.js";
 import { useOptionalLikeC4Editor } from "./editor/LikeC4EditorProvider.js";
 import { useId } from "./hooks/useId.js";
 import { pickViewBounds } from "./utils/view-bounds.js";
+import { convertToXYFlow } from "./likec4diagram/convert-to-xyflow.js";
+import { LikeC4Styles } from "./LikeC4Styles.js";
 import { LikeC4DiagramUI } from "./likec4diagram/DiagramUI.js";
 import { LikeC4DiagramXYFlow } from "./likec4diagram/DiagramXYFlow.js";
 import { DiagramActorProvider } from "./likec4diagram/state/DiagramActorProvider.js";
-import { LikeC4Styles } from "./LikeC4Styles.js";
 import { Profiler, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCustomCompareMemo } from "@react-hookz/web";
@@ -30,7 +31,7 @@ var noop = () => {};
 *
 * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
 */
-function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls = true, fitView = true, fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default, pannable = true, zoomable = true, background = "dots", enableElementTags = false, enableFocusMode = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = false, enableCompareWithLatest = !!onLayoutTypeChange, nodesSelectable, enableNotations = false, showNavigationButtons = !!onNavigateTo, enableDynamicViewWalkthrough = false, dynamicViewVariant, enableSearch = false, enableNotes = true, initialWidth, initialHeight, reduceGraphics = "auto", renderIcon, where, reactFlowProps, renderNodes, children }) {
+function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onRelationshipBrowserScopeChange, onInitialized, view, className, controls = true, fitView = true, initialZoom, fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default, pannable = true, zoomable = true, background = "dots", enableElementTags = false, enableFocusMode = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = false, relationshipBrowserScope = "view", enableCompareWithLatest = !!onLayoutTypeChange, nodesSelectable, enableNotations = false, showNavigationButtons = !!onNavigateTo, enableDynamicViewWalkthrough = false, dynamicViewVariant, enableSearch = false, enableNotes = true, initialWidth, initialHeight, reduceGraphics = "auto", renderIcon, where, reactFlowProps, renderNodes, minZoom = MinZoom, maxZoom = 3, children }) {
 	const id = useId();
 	const initialRef = useRef(null);
 	const optionalLikeC4Model = useOptionalLikeC4Model();
@@ -42,19 +43,29 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 	nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
 	const bounds = pickViewBounds(view, dynamicViewVariant);
 	const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
-	if (initialRef.current == null) initialRef.current = {
-		defaultEdges: [],
-		defaultNodes: [],
-		initialWidth: initialWidth ?? bounds.width,
-		initialHeight: initialHeight ?? bounds.height,
-		initialFitViewOptions: {
-			maxZoom: 3,
-			minZoom: MinZoom,
-			padding: fitViewPadding
-		},
-		initialMaxZoom: 3,
-		initialMinZoom: MinZoom
-	};
+	const initialFitView = initialZoom === void 0 && fitView;
+	if (initialRef.current == null) {
+		const { xynodes, xyedges } = convertToXYFlow({
+			view,
+			dynamicViewVariant: dynamicViewVariant ?? "diagram",
+			where: where ?? null,
+			currentViewId: view.id,
+			collapsedSequenceFlows: {}
+		});
+		initialRef.current = {
+			initialNodes: xynodes,
+			initialEdges: xyedges,
+			initialWidth: initialWidth ?? bounds.width,
+			initialHeight: initialHeight ?? bounds.height,
+			initialFitViewOptions: {
+				maxZoom,
+				minZoom,
+				padding: fitViewPadding
+			},
+			initialMaxZoom: initialZoom ?? maxZoom,
+			initialMinZoom: initialZoom ?? minZoom
+		};
+	}
 	const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && view.bounds.width * view.bounds.height > 16e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
 	return /* @__PURE__ */ jsx(Profiler, {
 		id: "LikeC4Diagram",
@@ -76,11 +87,11 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 						enableRelationshipBrowser: enableRelationshipBrowser && hasLikeC4Model,
 						enableSearch: enableSearch && hasLikeC4Model,
 						enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-						enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
+						enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough && hasLikeC4Model,
 						enableNotations,
 						enableVscode: !!onOpenSource,
 						enableControls: controls,
-						enableElementTags,
+						enableElementTags: enableElementTags && hasLikeC4Model,
 						enableCompareWithLatest,
 						enableNotes
 					},
@@ -97,27 +108,31 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 							onOpenSource,
 							onLogoClick,
 							onInitialized,
-							onLayoutTypeChange
+							onLayoutTypeChange,
+							onRelationshipBrowserScopeChange
 						},
-						children: [/* @__PURE__ */ jsx(LikeC4Styles, { id }), /* @__PURE__ */ jsx(TagStylesProvider, {
-							id,
+						children: [/* @__PURE__ */ jsx(LikeC4Styles, { rootSelector: `#${id}` }), /* @__PURE__ */ jsx(TagStylesProvider, {
+							rootSelector: `#${id}`,
 							children: /* @__PURE__ */ jsx(RootContainer, {
 								id,
 								className,
 								reduceGraphics: isReducedGraphicsMode,
 								children: /* @__PURE__ */ jsx(ReactFlowProvider, {
-									fitView,
+									fitView: initialFitView,
 									...initialRef.current,
 									children: /* @__PURE__ */ jsx(DiagramActorProvider, {
 										id,
 										view,
 										zoomable,
 										pannable,
+										fitView,
+										initialZoom,
 										fitViewPadding,
 										nodesDraggable: hasEditor,
 										nodesSelectable,
 										where: where ?? null,
 										dynamicViewVariant,
+										relationshipBrowserScope,
 										children: /* @__PURE__ */ jsxs(CurrentViewModelProvider, { children: [/* @__PURE__ */ jsx(LikeC4DiagramXYFlow, {
 											background,
 											reactFlowProps,

package/dist/LikeC4Diagram.props.d.ts

@@ -26,6 +26,7 @@ export type ElementIconRendererProps = {
 };
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
 export type LikeC4ColorScheme = 'light' | 'dark';
+export type RelationshipBrowserScope = 'global' | 'view';
 export type OverrideReactFlowProps = Pick<ReactFlowProps<Types.AnyNode, Types.AnyEdge>, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold' | 'edgesFocusable'>;
 export type PaddingUnit = 'px' | '%';
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
@@ -78,6 +79,10 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default true
      */
     fitView?: boolean | undefined;
+    /**
+     * Initial centered zoom level. When set, it overrides automatic fit-to-view.
+     */
+    initialZoom?: number | undefined;
     /**
      * Padding around the diagram (number - pixels)
      * @default 16 - 16px
@@ -163,6 +168,12 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default false
      */
     enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * Initial scope for the relationship browser
+     *
+     * @default 'view'
+     */
+    relationshipBrowserScope?: RelationshipBrowserScope | undefined;
     /**
      * If Walkthrough for dynamic views should be enabled
      * @default false
@@ -216,6 +227,16 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * Override ReactFlow props
      */
     reactFlowProps?: OverrideReactFlowProps | undefined;
+    /**
+     * Minimum zoom level
+     * @default 0.05
+     */
+    minZoom?: number | undefined;
+    /**
+     * Maximum zoom level
+     * @default 3
+     */
+    maxZoom?: number | undefined;
 }
 export type OpenSourceParams<A extends Any = Unknown> = {
     element: Fqn<A>;
@@ -248,6 +269,7 @@ export type OnInitialized = (params: {
     xyflow: XYFlowInstance;
 }) => void;
 export type OnLayoutTypeChange = (layoutType: LayoutType) => void;
+export type OnRelationshipBrowserScopeChange = (scope: RelationshipBrowserScope) => void;
 export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;
@@ -267,4 +289,5 @@ export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
      * @param layoutType new layout type
      */
     onLayoutTypeChange?: OnLayoutTypeChange | null | undefined;
+    onRelationshipBrowserScopeChange?: OnRelationshipBrowserScopeChange | null | undefined;
 }

package/dist/LikeC4MantineProvider.d.ts

@@ -0,0 +1,24 @@
+import { DefaultMantineColor, MantineColorsTuple, MantineProviderProps } from '@mantine/core';
+import { JSX } from 'react';
+type LikeC4MantineProviderProps = MantineProviderProps;
+/**
+ * LikeC4 Mantine provider with custom theme and CSS variables resolver
+ */
+export declare function LikeC4MantineProvider({ children, defaultColorScheme, theme, ...props }: LikeC4MantineProviderProps): JSX.Element;
+/**
+ * This is a deprecated alias for LikeC4MantineProvider.
+ * @deprecated Use LikeC4MantineProvider instead
+ */
+export declare const DefaultMantineProvider: typeof LikeC4MantineProvider;
+type ExtendedCustomColors = 'likec4' | DefaultMantineColor;
+type ExtendedSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare module '@mantine/core' {
+    interface MantineThemeSizesOverride {
+        fontSizes: Record<ExtendedSizes, string>;
+        spacing: Record<ExtendedSizes, string>;
+    }
+    interface MantineThemeColorsOverride {
+        colors: Record<ExtendedCustomColors, MantineColorsTuple>;
+    }
+}
+export {};

package/dist/LikeC4MantineProvider.js

@@ -0,0 +1,156 @@
+import "./_virtual/_rolldown/runtime.js";
+import { css } from "@likec4/styles/css";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { map } from "remeda";
+import { Card, Code, MantineProvider, Menu, Paper, Popover, SegmentedControl, Table, Title, Tooltip, createTheme, mergeThemeOverrides } from "@mantine/core";
+import { token } from "@likec4/styles/tokens";
+//#region src/LikeC4MantineProvider.tsx
+function t(name) {
+	return token.var(name);
+}
+var tshirts = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var sizes = (tokenCategory) => {
+	return Object.fromEntries(tshirts.map((size) => [size, t(`${tokenCategory}.${size}`)]));
+};
+var shades = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+];
+var mapColor = (color) => {
+	return map(shades, (shade) => t(`colors.${color}.${shade}`));
+};
+var titles = [
+	css({ textStyle: "h1" }),
+	css({ textStyle: "h2" }),
+	css({ textStyle: "h3" }),
+	css({ textStyle: "h4" }),
+	css({ textStyle: "h5" }),
+	css({ textStyle: "h6" })
+];
+var likec4Theme = createTheme({
+	primaryColor: "likec4",
+	cursorType: "pointer",
+	autoContrast: true,
+	primaryShade: {
+		light: 5,
+		dark: 6
+	},
+	colors: { likec4: mapColor("likec4.accent") },
+	fontFamily: t("fonts.body"),
+	fontFamilyMonospace: t("fonts.mono"),
+	headings: {
+		fontFamily: t("fonts.display"),
+		fontWeight: t("fontWeights.bold")
+	},
+	defaultRadius: "sm",
+	fontWeights: {
+		regular: t("fontWeights.normal"),
+		medium: t("fontWeights.medium"),
+		semibold: t("fontWeights.semibold"),
+		bold: t("fontWeights.bold")
+	},
+	fontSizes: {
+		...sizes("fontSizes"),
+		xxs: t("fontSizes.xxs")
+	},
+	spacing: {
+		...sizes("spacing"),
+		xxs: t("spacing.xxs")
+	},
+	radius: sizes("radii"),
+	shadows: sizes("shadows"),
+	lineHeights: sizes("lineHeights"),
+	components: {
+		Card: Card.extend({
+			defaultProps: { radius: "md" },
+			classNames: { root: css({ bg: "surface.default" }) }
+		}),
+		Paper: Paper.extend({
+			defaultProps: { radius: "md" },
+			classNames: { root: css({ bg: "surface.default" }) }
+		}),
+		Title: Title.extend({ classNames: (_theme, props) => ({ root: titles[(props.order ?? 1) - 1] }) }),
+		Code: Code.extend({ classNames: { root: css({ bg: "surface.code" }) } }),
+		Table: Table.extend({ classNames: { th: css({
+			fontSize: "xxs",
+			fontWeight: "bold",
+			color: "text.dimmed",
+			textTransform: "uppercase",
+			letterSpacing: "caps.sm"
+		}) } }),
+		Tooltip: Tooltip.extend({ defaultProps: {
+			color: "dark",
+			fz: "xs",
+			withArrow: false,
+			openDelay: 600,
+			closeDelay: 120,
+			offset: 8
+		} }),
+		SegmentedControl: SegmentedControl.extend({ vars: (theme, props) => ({ root: { "--sc-font-size": theme.fontSizes[props.fz ?? props.size] } }) }),
+		Popover: Popover.extend({ defaultProps: {
+			withArrow: false,
+			radius: "sm",
+			shadow: "lg"
+		} }),
+		Menu: Menu.extend({ defaultProps: {
+			radius: "sm",
+			shadow: "lg"
+		} })
+	}
+});
+var semantic = (variables) => ({
+	dark: variables,
+	light: variables
+});
+var resolver = (_) => ({
+	variables: { "--mantine-radius-default": t("radii.sm") },
+	...semantic({
+		"--mantine-color-text": t("colors.text"),
+		"--mantine-color-body": t("colors.surface.default"),
+		"--mantine-color-placeholder": t("colors.text.non-essential"),
+		"--mantine-color-anchor": t("colors.text.link"),
+		"--mantine-color-disabled": t("colors.disabled.body"),
+		"--mantine-color-disabled-color": t("colors.disabled.text"),
+		"--mantine-color-disabled-hover": t("colors.disabled.body"),
+		"--mantine-color-disabled-border": t("colors.disabled.border"),
+		"--mantine-color-default": t("colors.surface.default"),
+		"--mantine-color-default-color": t("colors.text"),
+		"--mantine-color-default-border": t("colors.border.default"),
+		"--mantine-color-default-hover": t("colors.surface.hover")
+	})
+});
+/**
+* LikeC4 Mantine provider with custom theme and CSS variables resolver
+*/
+function LikeC4MantineProvider({ children, defaultColorScheme = "auto", theme, ...props }) {
+	const mergedTheme = useMemo(() => theme ? mergeThemeOverrides(likec4Theme, theme) : likec4Theme, [theme]);
+	return /* @__PURE__ */ jsx(MantineProvider, {
+		defaultColorScheme,
+		theme: mergedTheme,
+		cssVariablesResolver: resolver,
+		...props,
+		children
+	});
+}
+/**
+* This is a deprecated alias for LikeC4MantineProvider.
+* @deprecated Use LikeC4MantineProvider instead
+*/
+var DefaultMantineProvider = LikeC4MantineProvider;
+//#endregion
+export { DefaultMantineProvider, LikeC4MantineProvider };

package/dist/LikeC4ProjectsOverview.js

@@ -12,7 +12,7 @@ function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props
 	const onChangeLikeC4Project = useChangeLikeC4Project();
 	const id = useId();
 	onNavigateToProject ??= onChangeLikeC4Project;
-	return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [/* @__PURE__ */ jsx(LikeC4Styles, { id }), /* @__PURE__ */ jsx(RootContainer, {
+	return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [/* @__PURE__ */ jsx(LikeC4Styles, { rootSelector: `#${id}` }), /* @__PURE__ */ jsx(RootContainer, {
 		id,
 		className,
 		children: /* @__PURE__ */ jsx(ProjectsOverview, {

package/dist/LikeC4ProjectsProvider.d.ts

@@ -1,12 +1,26 @@
-import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { ProjectId } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { JSX } from 'react/jsx-runtime';
+type LandingPageConfig = {
+    redirect: true;
+} | {
+    include: string[];
+} | {
+    exclude: string[];
+};
+export interface LikeC4ProjectData {
+    readonly id: ProjectId;
+    readonly title?: string | undefined;
+    readonly path?: string | undefined;
+    readonly landingPage?: LandingPageConfig | undefined;
+    readonly exportFormats?: readonly string[] | undefined;
+}
 export interface LikeC4ProjectsProviderProps {
     /**
      * Projects to be used in the navigation panel.
      * Current project is taken from the LikeC4Model
      */
-    projects: ReadonlyArray<LikeC4Project>;
+    projects: ReadonlyArray<LikeC4ProjectData>;
     /**
      * Optional callback when another project is selected.
      */
@@ -16,3 +30,4 @@ export interface LikeC4ProjectsProviderProps {
  * Ensures LikeC4Projects context
  */
 export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange, }: PropsWithChildren<LikeC4ProjectsProviderProps>): JSX.Element;
+export {};

package/dist/LikeC4Styles.d.ts

@@ -1,4 +1,14 @@
 import { JSX } from 'react/jsx-runtime';
-export declare function LikeC4Styles({ id }: {
-    id: string;
-}): JSX.Element;
+interface LikeC4StylesProps {
+    /**
+     * Root element selector to scope the styles to (e.g., "#diagram-root")
+     * Must be a valid CSS selector
+     */
+    rootSelector: string;
+}
+/**
+ * Component that renders LikeC4 theme colors as CSS variables
+ * scoped to the provided root selector
+ */
+export declare function LikeC4Styles({ rootSelector }: LikeC4StylesProps): JSX.Element;
+export {};

package/dist/LikeC4Styles.js

@@ -43,13 +43,16 @@ function generateBuiltInColorStyles(styles, rootSelector) {
 		colors
 	})), join("\n"));
 }
-function LikeC4Styles({ id }) {
-	const rootSelector = `#${id}`;
+/**
+* Component that renders LikeC4 theme colors as CSS variables
+* scoped to the provided root selector
+*/
+function LikeC4Styles({ rootSelector }) {
 	const nonce = useMantineStyleNonce()?.();
 	const $styles = useLikeC4Styles();
 	const colorsStyles = useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles.fingerprint]);
 	return /* @__PURE__ */ jsx(MemoizedStyle, {
-		id,
+		id: $styles.fingerprint,
 		nonce,
 		colorsStyles
 	});
@@ -60,8 +63,8 @@ function LikeC4Styles({ id }) {
 var MemoizedStyle = memo(({ id, nonce, colorsStyles }) => /* @__PURE__ */ jsx("style", {
 	type: "text/css",
 	"data-likec4-colors": id,
-	dangerouslySetInnerHTML: { __html: colorsStyles },
-	nonce: nonce || void 0
+	nonce: nonce || void 0,
+	children: colorsStyles
 }));
 MemoizedStyle.displayName = "MemoizedStyle";
 //#endregion

package/dist/LikeC4View.js

@@ -1,6 +1,6 @@
 import "./_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "./utils/xyflow.js";
 import { FitViewPaddings } from "./base/const.js";
+import { stopPropagation } from "./utils/xyflow.js";
 import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.js";
 import { pickViewBounds } from "./utils/view-bounds.js";
 import { Overlay } from "./overlays/overlay/Overlay.js";
@@ -135,7 +135,7 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 				pos: "absolute",
 				top: "4",
 				right: "4",
-				zIndex: "999",
+				zIndex: "dropdown",
 				onClick: stopPropagation,
 				children: /* @__PURE__ */ jsx(ActionIcon, {
 					variant: "default",

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,7 +1,7 @@
 import { Any, UnknownLayouted } from '@likec4/core/types';
 import { JSX } from 'react/jsx-runtime';
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'dynamicViewVariant' | 'where'>;
+export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'relationshipBrowserScope' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'initialZoom' | 'maxZoom' | 'minZoom' | 'renderIcon' | 'renderNodes' | 'dynamicViewVariant' | 'where'>;
 /**
  * StaticLikeC4Diagram is a component that renders a LikeC4 diagram in a static way.
  * (Export/Embed)

package/dist/base/BaseXYFlow.d.ts

@@ -13,4 +13,4 @@ export type BaseXYFlowProps<NodeType extends BaseNode, EdgeType extends BaseEdge
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'fitViewOptions' | 'nodesSelectable' | 'nodesDraggable'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
-export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable, edgesFocusable, showControls, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react").JSX.Element;
+export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable, edgesFocusable, showControls, minZoom, maxZoom, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,4 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
+import { MinZoom } from "./const.js";
 import { Background as Background$1 } from "./Background.js";
 import { useCallbackRef } from "../hooks/useCallbackRef.js";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
@@ -6,7 +7,6 @@ import { useIsZoomTooSmall, useXYFlow, useXYStoreApi } from "../hooks/useXYFlow.
 import { roundDpr } from "../utils/roundDpr.js";
 import { stopPropagation } from "../utils/xyflow.js";
 import { Base } from "./Base.js";
-import { MinZoom } from "./const.js";
 import { getKeyboardZoomAction } from "./keyboardZoom.js";
 import { cx } from "@likec4/styles/css";
 import { useMemo } from "react";
@@ -40,13 +40,17 @@ function activateFocusedElement(event) {
 		view
 	}));
 }
-function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable = true, zoomable = true, nodesSelectable = true, nodesDraggable = false, background = "dots", children, colorMode, fitViewPadding = 0, fitView = true, zoomOnDoubleClick = false, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable = nodesDraggable || nodesSelectable, edgesFocusable = false, showControls = false, ...props }) {
+function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable = true, zoomable = true, nodesSelectable = true, nodesDraggable = false, background = "dots", children, colorMode, fitViewPadding = 0, zoomOnDoubleClick = false, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable = nodesDraggable || nodesSelectable, edgesFocusable = false, showControls = false, minZoom = MinZoom, maxZoom = 3, ...props }) {
 	const fitViewOptions = useMemo(() => ({
-		minZoom: MinZoom,
-		maxZoom: 1,
+		minZoom,
+		maxZoom: Math.min(maxZoom, 1),
 		padding: fitViewPadding,
 		includeHiddenNodes: false
-	}), [fitViewPadding]);
+	}), [
+		fitViewPadding,
+		minZoom,
+		maxZoom
+	]);
 	const isBgWithPattern = background !== "transparent" && background !== "solid";
 	const isZoomTooSmall = useIsZoomTooSmall();
 	const xyflow = useXYFlow();
@@ -83,9 +87,8 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 		zoomOnScroll: !pannable && zoomable,
 		...!zoomable && { zoomActivationKeyCode: null },
 		zoomOnDoubleClick,
-		maxZoom: zoomable ? 3 : 1,
-		minZoom: zoomable ? MinZoom : 1,
-		fitView,
+		maxZoom: zoomable ? maxZoom : 1,
+		minZoom: zoomable ? minZoom : 1,
 		fitViewOptions,
 		preventScrolling: zoomable || pannable,
 		defaultMarkerColor: "var(--xy-edge-stroke)",

package/dist/base/const.d.ts

@@ -17,3 +17,4 @@ export declare const FitViewPaddings: {
     };
 };
 export declare const MAX_COMPOUND_DEPTH = 5;
+export declare const IS_SERVER: boolean;

package/dist/base/const.js

@@ -7,6 +7,7 @@ var ZIndexes = {
 	Max: 30
 };
 var MinZoom = .05;
+var MaxZoom = 3;
 var FitViewPaddings = {
 	default: "16px",
 	withControls: {
@@ -16,5 +17,6 @@ var FitViewPaddings = {
 		bottom: "16px"
 	}
 };
+var IS_SERVER = typeof window === "undefined";
 //#endregion
-export { FitViewPaddings, MinZoom, ZIndexes };
+export { FitViewPaddings, IS_SERVER, MaxZoom, MinZoom, ZIndexes };

package/dist/base-primitives/Markdown.d.ts

@@ -1,7 +1,7 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '../../styled-system/types';
+import { JsxStyleProps } from '@likec4/styles/types';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
-export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
+export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color' | 'translate'> & {
     value: RichTextType;
     /**
      * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
@@ -29,7 +29,7 @@ export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySe
      */
     emptyText?: string;
 };
-export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children" | "dangerouslySetInnerHTML"> & {
+export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "translate" | "children" | "dangerouslySetInnerHTML"> & {
     value: RichTextType;
     /**
      * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,10 +1,10 @@
-import { RecipeRuntimeFn } from '../../../styled-system/types';
+import { RecipeRuntimeFn } from '@likec4/styles/types';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {
             transitionDelay: {
-                base: "0.2s";
-                _hover: "0s";
+                base: "[0.2s]";
+                _hover: "0";
             };
         };
     };

package/dist/base-primitives/compound/actionbtns.css.js

@@ -1,10 +1,10 @@
 import { cva } from "@likec4/styles/css";
 //#region src/base-primitives/compound/actionbtns.css.ts
 var compoundActionBtn = cva({
-	base: { transitionDuration: "normal" },
+	base: { transitionDuration: "medium" },
 	variants: { delay: { true: { transitionDelay: {
-		base: "0.2s",
-		_hover: "0s"
+		base: "[0.2s]",
+		_hover: "0"
 	} } } }
 });
 //#endregion

package/dist/base-primitives/element/ElementTags.d.ts

@@ -3,11 +3,11 @@ import { BaseNodePropsWithData } from '../../base/types';
 export type ElementTagProps = {
     tag: string;
     cursor?: 'pointer' | 'default';
-} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'color'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'color' | 'translate'>;
 export declare const ElementTag: ForwardRefExoticComponent<{
     tag: string;
     cursor?: "pointer" | "default";
-} & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children"> & RefAttributes<HTMLDivElement>>;
+} & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "translate" | "children"> & RefAttributes<HTMLDivElement>>;
 type Data = {
     tags: readonly string[] | null | undefined;
     width: number;