@likec4/diagram 1.59.4 → 1.61.0

package/dist/LikeC4View.mjs

@@ -0,0 +1,154 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import IconX from "./node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { FitViewPaddings } from "./base/const.mjs";
+import { ErrorMessage } from "./components/ViewNotFound.mjs";
+import { customizable } from "./customization/customizable.mjs";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
+import { Overlay } from "./overlays/overlay/Overlay.mjs";
+import { ShadowRoot } from "./shadowroot/ShadowRoot.mjs";
+import { stopPropagation } from "./utils/xyflow.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isBoolean } from "remeda";
+import { ActionIcon } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+
+// src/LikeC4View.tsx
+const cssInteractive = css({
+	cursor: "pointer",
+	["--mantine-cursor-pointer"]: "pointer",
+	"& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": { cursor: "pointer" }
+});
+/**
+* Ready-to-use component to display embedded LikeC4 view,
+* OnClick allows to browse the model.
+*
+* {@link ReactLikeC4} gives you more control.
+*
+* Component is wrapped in ShadowRoot to isolate styles.
+*/
+const LikeC4View = customizable("LikeC4View")((properties) => {
+	let { viewId, className, pannable = false, zoomable = false, keepAspectRatio = true, colorScheme, injectFontCss = true, controls = false, layoutType: initialLayoutType = "manual", background = "transparent", browser = true, showNavigationButtons = false, enableNotations, enableFocusMode = false, enableDynamicViewWalkthrough = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = enableRelationshipDetails, enableNotes = false, reduceGraphics = "auto", mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props } = properties;
+	const likec4model = useOptionalLikeC4Model();
+	const [layoutType, setLayoutType] = useState(initialLayoutType);
+	const [browserViewId, _onNavigateTo] = useState(null);
+	const onNavigateTo = (viewId) => {
+		if (viewId && viewId !== browserViewId) setLayoutType(initialLayoutType);
+		_onNavigateTo(viewId);
+	};
+	const onNavigateToThisView = () => {
+		onNavigateTo(viewId);
+	};
+	const closeBrowser = () => {
+		onNavigateTo(null);
+	};
+	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
+	const viewModel = likec4model.findView(viewId);
+	if (!viewModel) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" not found in LikeC4Model.",
+		/* @__PURE__ */ jsx("br", {}),
+		"Available views: ",
+		[...likec4model.views()].map((v) => v.id).join(", ")
+	] });
+	if (!viewModel.isLayouted()) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" is not layouted.",
+		/* @__PURE__ */ jsx("br", {}),
+		"Make sure you have LikeC4ModelProvider with layouted model."
+	] });
+	const view = initialLayoutType !== "auto" ? viewModel.$layouted : viewModel.$view;
+	const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
+	const browserView = layoutType !== "auto" ? browserViewModel?.$layouted : browserViewModel?.$view;
+	const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+	const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
+	const isBrowserEnabled = browser !== false;
+	const browserProps = isBoolean(browser) ? {} : browser;
+	const bounds = pickViewBounds(view, props.dynamicViewVariant);
+	return /* @__PURE__ */ jsxs(ShadowRoot, {
+		injectFontCss,
+		theme: mantineTheme,
+		colorScheme,
+		styleNonce,
+		keepAspectRatio: keepAspectRatio ? bounds : false,
+		className: cx("likec4-view", className),
+		style,
+		children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+			view,
+			pannable,
+			zoomable,
+			background,
+			fitView: true,
+			fitViewPadding: FitViewPaddings.default,
+			enableNotations: hasNotations,
+			enableDynamicViewWalkthrough,
+			showNavigationButtons,
+			enableCompareWithLatest: false,
+			enableFocusMode,
+			enableRelationshipDetails,
+			enableElementDetails,
+			enableRelationshipBrowser,
+			enableElementTags: false,
+			enableNotes,
+			controls,
+			reduceGraphics,
+			className: cx("likec4-static-view", isBrowserEnabled && cssInteractive),
+			enableSearch: false,
+			...isBrowserEnabled && {
+				onCanvasClick: onNavigateToThisView,
+				onNodeClick: onNavigateToThisView,
+				onEdgeClick: onNavigateToThisView
+			},
+			reactFlowProps,
+			renderNodes,
+			...props,
+			children
+		}), browserView && /* @__PURE__ */ jsxs(Overlay, {
+			onClose: closeBrowser,
+			children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+				view: browserView,
+				pannable: true,
+				zoomable: true,
+				background: "dots",
+				onNavigateTo,
+				showNavigationButtons: true,
+				enableDynamicViewWalkthrough: true,
+				enableFocusMode: true,
+				enableRelationshipBrowser: true,
+				enableElementDetails: true,
+				enableRelationshipDetails: true,
+				enableSearch: true,
+				enableElementTags: true,
+				enableNotes: true,
+				enableCompareWithLatest: true,
+				controls: true,
+				fitView: true,
+				...props,
+				fitViewPadding: FitViewPaddings.withControls,
+				...browserProps,
+				enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
+				renderNodes,
+				onLayoutTypeChange: setLayoutType
+			}), /* @__PURE__ */ jsx(Box$1, {
+				pos: "absolute",
+				top: "4",
+				right: "4",
+				zIndex: "dropdown",
+				onClick: stopPropagation,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "default",
+					color: "gray",
+					onClick: closeBrowser,
+					children: /* @__PURE__ */ jsx(IconX, {})
+				})
+			})]
+		})]
+	});
+});
+
+export { LikeC4View };

package/dist/ReactLikeC4.d.mts

@@ -0,0 +1,48 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { Customizable } from "./customization/customization-types.mjs";
+import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from "./LikeC4Diagram.props.mjs";
+import { CSSProperties, ReactNode } from "react";
+import * as t from "@likec4/core/types";
+export type ReactLikeC4Props<A extends t.Any = t.Any> = {
+  viewId: t.aux.ViewId<A>;
+  /**
+   * Layout to display
+   * - `auto`: auto-layouted from the current sources
+   * - `manual`: manually layouted (if available, falls back to `auto`)
+   *
+   * Uncontrolled initial value, use `onLayoutTypeChange` to control it.
+   *
+   * @default 'manual'
+   */
+  layoutType?: t.LayoutType | undefined;
+  /**
+   * Keep aspect ratio of the diagram
+   *
+   * @default false
+   */
+  keepAspectRatio?: boolean | undefined;
+  /**
+   * By default determined by the user's system preferences.
+   */
+  colorScheme?: 'light' | 'dark' | undefined;
+  /**
+   * LikeC4 views are using 'IBM Plex Sans Variable' font.
+   * By default, component injects the CSS to document head.
+   * Set to false if you want to handle the font yourself.
+   *
+   * @default true
+   */
+  injectFontCss?: boolean | undefined;
+  style?: CSSProperties | undefined;
+  mantineTheme?: any;
+  /** Function to generate nonce attribute added to all generated `<style />` tags */
+  styleNonce?: string | (() => string | undefined) | undefined;
+  children?: ReactNode | undefined;
+} & Omit<LikeC4DiagramProperties<A>, 'view'> & LikeC4DiagramEventHandlers<A>;
+/**
+ * Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
+ * But provides more control over the diagram
+ *
+ * Component is wrapped in ShadowRoot to isolate styles.
+ */
+export declare const ReactLikeC4: Customizable<(<A extends t.Any = t.Any>(properties: ReactLikeC4Props<A>) => import("react").JSX.Element), "ReactLikeC4">;

package/dist/ReactLikeC4.mjs

@@ -0,0 +1,48 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { ErrorMessage, ViewNotFound } from "./components/ViewNotFound.mjs";
+import { customizable } from "./customization/customizable.mjs";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
+import { ShadowRoot } from "./shadowroot/ShadowRoot.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/ReactLikeC4.tsx
+/**
+* Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
+* But provides more control over the diagram
+*
+* Component is wrapped in ShadowRoot to isolate styles.
+*/
+const ReactLikeC4 = customizable("ReactLikeC4")((properties) => {
+	let { viewId, layoutType = "manual", className, colorScheme, injectFontCss = true, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props } = properties;
+	const likec4model = useOptionalLikeC4Model();
+	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
+	const viewModel = likec4model.findView(viewId);
+	if (!viewModel) return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+	if (!viewModel.isLayouted()) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View \"$",
+		viewId,
+		"\" is not layouted. Make sure you have LikeC4ModelProvider with layouted model."
+	] });
+	const view = layoutType !== "auto" ? viewModel.$layouted : viewModel.$view;
+	const bounds = pickViewBounds(view, props.dynamicViewVariant);
+	const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+	return /* @__PURE__ */ jsx(ShadowRoot, {
+		injectFontCss,
+		theme: mantineTheme,
+		colorScheme,
+		styleNonce,
+		keepAspectRatio: keepAspectRatio ? bounds : false,
+		className: cx("likec4-view", className),
+		style,
+		children: /* @__PURE__ */ jsx(LikeC4Diagram, {
+			view,
+			enableNotations: hasNotations,
+			...props
+		})
+	});
+});
+
+export { ReactLikeC4 };

package/dist/StaticLikeC4Diagram.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { LikeC4DiagramProperties } from "./LikeC4Diagram.props.mjs";
+import { JSX } from "react/jsx-runtime";
+import { Any, UnknownLayouted } from "@likec4/core/types";
+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)
+ *
+ * @internal
+ */
+export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): JSX.Element;

package/dist/StaticLikeC4Diagram.mjs

@@ -0,0 +1,39 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+
+// src/StaticLikeC4Diagram.tsx
+/**
+* StaticLikeC4Diagram is a component that renders a LikeC4 diagram in a static way.
+* (Export/Embed)
+*
+* @internal
+*/
+function StaticLikeC4Diagram({ view, fitView = true, fitViewPadding = "8px", enableRelationshipDetails = false, enableRelationshipBrowser = enableRelationshipDetails, background = "transparent", className, ...rest }) {
+	return /* @__PURE__ */ jsx(LikeC4Diagram, {
+		view,
+		className: cx(className, "likec4-static-view"),
+		fitView,
+		fitViewPadding,
+		pannable: false,
+		zoomable: false,
+		controls: false,
+		background,
+		enableNotations: false,
+		enableElementDetails: false,
+		enableRelationshipDetails,
+		enableRelationshipBrowser,
+		enableDynamicViewWalkthrough: false,
+		showNavigationButtons: false,
+		enableCompareWithLatest: false,
+		enableFocusMode: false,
+		enableSearch: false,
+		nodesSelectable: false,
+		enableElementTags: false,
+		enableNotes: false,
+		...rest
+	});
+}
+
+export { StaticLikeC4Diagram };

package/dist/_virtual/_rolldown/runtime.mjs

@@ -0,0 +1,21 @@
+// \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+	value,
+	configurable: true
+});
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+export { __exportAll, __name };

package/dist/base/Background.mjs

@@ -0,0 +1,31 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Background, BackgroundVariant } from "@xyflow/react";
+import { deepEqual } from "fast-equals";
+import { nonexhaustive } from "@likec4/core";
+
+// src/base/Background.tsx
+function literalToEnum(value) {
+	switch (value) {
+		case "dots": return BackgroundVariant.Dots;
+		case "lines": return BackgroundVariant.Lines;
+		case "cross": return BackgroundVariant.Cross;
+		default: nonexhaustive(value);
+	}
+}
+const compareProps = (prev, next) => {
+	if (typeof prev.background === "string" && typeof next.background === "string") return prev.background === next.background;
+	return deepEqual(prev.background, next.background);
+};
+const Background$1 = memo(({ background }) => {
+	if (typeof background === "string") return /* @__PURE__ */ jsx(Background, {
+		variant: literalToEnum(background),
+		size: 2,
+		gap: 20
+	});
+	return /* @__PURE__ */ jsx(Background, { ...background });
+}, compareProps);
+Background$1.displayName = "Background";
+
+export { Background$1 as Background };

package/dist/base/Base.d.mts

@@ -0,0 +1,29 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+type WithDimmed = {
+  data: {
+    dimmed?: Base.Dimmed;
+  };
+};
+type WithHovered = {
+  data: {
+    hovered?: boolean;
+  };
+};
+declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+type WithData<D> = {
+  data: D;
+};
+declare function setData<E extends WithData<any>>(value: E, data: Partial<E['data']>): E;
+declare function setData<E extends WithData<any>>(state: Partial<NoInfer<E>['data']>): (value: E) => E;
+export declare const Base: {
+  setDimmed: typeof setDimmed;
+  setHovered: typeof setHovered;
+  setData: typeof setData;
+};
+export declare namespace Base {
+  type Dimmed = 'immediate' | boolean;
+}
+export {};

package/dist/base/Base.mjs

@@ -0,0 +1,35 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { deepEqual } from "fast-equals";
+import { entries } from "remeda";
+
+// src/base/Base.ts
+const mergeData = (v, data) => Object.assign({}, v, { data: Object.assign({}, v.data, data) });
+const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : mergeData(v, { dimmed });
+function setDimmed(arg1, arg2) {
+	if (arg2 !== void 0) return _setDimmed(arg1, arg2);
+	return (v) => _setDimmed(v, arg1);
+}
+const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : mergeData(v, { hovered });
+function setHovered(arg1, arg2) {
+	if (arg2 !== void 0) return _setHovered(arg1, arg2);
+	return (v) => _setHovered(v, arg1);
+}
+function hasSubObject$1(value, subobl) {
+	return value === subobl || entries(subobl).every(([key, v]) => deepEqual(value[key] ?? void 0, v));
+}
+__name(hasSubObject$1, "hasSubObject");
+function _setData(value, data) {
+	if (hasSubObject$1(value.data, data)) return value;
+	return mergeData(value, data);
+}
+function setData(arg1, arg2) {
+	if (arg2 !== void 0) return _setData(arg1, arg2);
+	return (edge) => _setData(edge, arg1);
+}
+const Base = {
+	setDimmed,
+	setHovered,
+	setData
+};
+
+export { Base, hasSubObject$1 as hasSubObject };

package/dist/base/BaseXYFlow.mjs

@@ -0,0 +1,211 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.mjs";
+import { useIsZoomTooSmall, useXYFlow, useXYStoreApi } from "../hooks/useXYFlow.mjs";
+import { roundDpr } from "../utils/roundDpr.mjs";
+import { stopPropagation } from "../utils/xyflow.mjs";
+import { Background as Background$1 } from "./Background.mjs";
+import { Base } from "./Base.mjs";
+import { MaxZoom, MinZoom } from "./const.mjs";
+import { getKeyboardZoomAction } from "./keyboardZoom.mjs";
+import { cx } from "@likec4/styles/css";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReactFlow, useStore } from "@xyflow/react";
+import { isEmptyish } from "remeda";
+import { useMantineColorScheme } from "@mantine/core";
+import { defaultAriaLabelConfig } from "@xyflow/system";
+
+// src/base/BaseXYFlow.tsx
+const likec4AriaLabelConfig = {
+	...defaultAriaLabelConfig,
+	"node.a11yDescription.default": "Press Enter or Space to select this node and reveal its actions.",
+	"node.a11yDescription.keyboardDisabled": "Keyboard activation is disabled.",
+	"edge.a11yDescription.default": "Press Enter or Space to select this relationship and reveal its actions."
+};
+function activateFocusedElement(event) {
+	if (event.repeat || event.key !== "Enter" && event.key !== " ") return;
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	const interactive = target.closest("a,button,input,textarea,select,[role=\"button\"],[role=\"link\"],[contenteditable=\"true\"]");
+	if (interactive && !interactive.classList.contains("react-flow__node") && !interactive.classList.contains("react-flow__edge")) return;
+	const flowElement = target.closest(".react-flow__node[data-id], .react-flow__edge[data-id]");
+	const view = flowElement?.ownerDocument.defaultView;
+	if (!flowElement || !view) return;
+	event.preventDefault();
+	const rect = flowElement.getBoundingClientRect();
+	flowElement.dispatchEvent(new view.MouseEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		button: 0,
+		clientX: rect.left + rect.width / 2,
+		clientY: rect.top + rect.height / 2,
+		detail: 1,
+		view
+	}));
+}
+function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, 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,
+		maxZoom: Math.min(maxZoom, 1),
+		padding: fitViewPadding,
+		includeHiddenNodes: false
+	}), [
+		fitViewPadding,
+		minZoom,
+		maxZoom
+	]);
+	const isBgWithPattern = background !== "transparent" && background !== "solid";
+	const isZoomTooSmall = useIsZoomTooSmall();
+	const xyflow = useXYFlow();
+	const xystore = useXYStoreApi();
+	const { colorScheme } = useMantineColorScheme();
+	if (!colorMode) colorMode = colorScheme === "auto" ? "system" : colorScheme;
+	const tabIndex = props.tabIndex ?? (zoomable ? 0 : void 0);
+	const ariaLabel = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0 || tabIndex === void 0 ? props["aria-label"] : "Interactive diagram";
+	const onKeyDown = useCallbackRef((event) => {
+		props.onKeyDown?.(event);
+		if (event.defaultPrevented || !zoomable) return;
+		const action = getKeyboardZoomAction(event.nativeEvent);
+		if (!action) return;
+		event.preventDefault();
+		switch (action) {
+			case "zoom-in":
+				xyflow.zoomIn();
+				return;
+			case "zoom-out":
+				xyflow.zoomOut();
+				return;
+			case "reset":
+				xyflow.fitView(fitViewOptions);
+				return;
+		}
+	});
+	return /* @__PURE__ */ jsxs(ReactFlow, {
+		colorMode,
+		nodes,
+		edges,
+		className: cx(background === "transparent" && "bg-transparent", className),
+		...isZoomTooSmall && { ["data-likec4-zoom-small"]: true },
+		zoomOnPinch: zoomable,
+		zoomOnScroll: !pannable && zoomable,
+		...!zoomable && { zoomActivationKeyCode: null },
+		zoomOnDoubleClick,
+		maxZoom: zoomable ? maxZoom : 1,
+		minZoom: zoomable ? minZoom : 1,
+		fitViewOptions,
+		preventScrolling: zoomable || pannable,
+		defaultMarkerColor: null,
+		noDragClassName: "nodrag",
+		noPanClassName: "nopan",
+		noWheelClassName: "nowheel",
+		panOnScroll: pannable,
+		panOnDrag: pannable,
+		...!pannable && {
+			panActivationKeyCode: null,
+			selectionKeyCode: null
+		},
+		elementsSelectable: nodesSelectable,
+		nodesFocusable,
+		edgesFocusable,
+		nodesDraggable,
+		ariaLabelConfig: isEmptyish(ariaLabelConfig) ? likec4AriaLabelConfig : {
+			...likec4AriaLabelConfig,
+			...ariaLabelConfig
+		},
+		nodeDragThreshold: 4,
+		nodeClickDistance: 2,
+		paneClickDistance: 2,
+		elevateNodesOnSelect: false,
+		selectNodesOnDrag: false,
+		onNodesChange,
+		onEdgesChange,
+		onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
+			/**
+			* WORKAROUND
+			* Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+			* https://github.com/xyflow/xyflow/issues/3282
+			* https://github.com/likec4/likec4/issues/734
+			*/
+			const roundedX = roundDpr(x);
+			const roundedY = roundDpr(y);
+			if (x !== roundedX || y !== roundedY) xystore.setState({ transform: [
+				roundedX,
+				roundedY,
+				zoom
+			] });
+			onMoveEnd?.(event, {
+				x: roundedX,
+				y: roundedY,
+				zoom
+			});
+		}),
+		onNodeMouseEnter: useCallbackRef((event, node) => {
+			if (onNodeMouseEnter) {
+				onNodeMouseEnter(event, node);
+				return;
+			}
+			onNodesChange([{
+				id: node.id,
+				type: "replace",
+				item: Base.setHovered(node, true)
+			}]);
+		}),
+		onNodeMouseLeave: useCallbackRef((event, node) => {
+			if (onNodeMouseLeave) {
+				onNodeMouseLeave(event, node);
+				return;
+			}
+			onNodesChange([{
+				id: node.id,
+				type: "replace",
+				item: Base.setHovered(node, false)
+			}]);
+		}),
+		onEdgeMouseEnter: useCallbackRef((event, edge) => {
+			if (onEdgeMouseEnter) {
+				onEdgeMouseEnter(event, edge);
+				return;
+			}
+			onEdgesChange([{
+				id: edge.id,
+				type: "replace",
+				item: Base.setHovered(edge, true)
+			}]);
+		}),
+		onEdgeMouseLeave: useCallbackRef((event, edge) => {
+			if (onEdgeMouseLeave) {
+				onEdgeMouseLeave(event, edge);
+				return;
+			}
+			onEdgesChange([{
+				id: edge.id,
+				type: "replace",
+				item: Base.setHovered(edge, false)
+			}]);
+		}),
+		onNodeDoubleClick: stopPropagation,
+		onEdgeDoubleClick: stopPropagation,
+		onKeyDownCapture: useCallbackRef((event) => {
+			onKeyDownCapture?.(event);
+			if (!event.defaultPrevented) activateFocusedElement(event);
+		}),
+		...props,
+		"aria-label": ariaLabel,
+		tabIndex,
+		onKeyDown,
+		children: [
+			isBgWithPattern && /* @__PURE__ */ jsx(Background$1, { background }),
+			onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),
+			children
+		]
+	});
+}
+const selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
+const ViewportResizeHanlder = ({ onViewportResize }) => {
+	const square = useStore(selectDimensions);
+	useUpdateEffect(onViewportResize, [square]);
+	return null;
+};
+
+export { BaseXYFlow };

package/dist/base/const.d.mts

@@ -0,0 +1,3 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+export declare const MinZoom = 0.05;
+export declare const MaxZoom = 3;

package/dist/base/const.mjs

@@ -0,0 +1,22 @@
+// src/base/const.ts
+const ZIndexes = {
+	Compound: 1,
+	Edge: 20,
+	EdgeLabel: 25,
+	Element: 20,
+	Max: 30
+};
+const MinZoom = .05;
+const MaxZoom = 3;
+const FitViewPaddings = {
+	default: "16px",
+	withControls: {
+		top: "58px",
+		left: "16px",
+		right: "16px",
+		bottom: "16px"
+	}
+};
+const IS_SERVER = typeof window === "undefined";
+
+export { FitViewPaddings, IS_SERVER, MaxZoom, MinZoom, ZIndexes };