@likec4/diagram 1.59.3 → 1.60.0

package/dist/ReactLikeC4.d.mts

@@ -0,0 +1,50 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from "./LikeC4Diagram.props.mjs";
+import { CSSProperties, ReactNode } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+import * as t from "@likec4/core/types";
+//#region src/ReactLikeC4.d.ts
+export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
+  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 function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, layoutType: initialLayoutType, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): JSX$1.Element;
+//#endregion

package/dist/ReactLikeC4.mjs

@@ -0,0 +1,47 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
+import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
+import { ErrorMessage, ViewNotFound } from "./components/ViewNotFound.mjs";
+import { ShadowRoot } from "./shadowroot/ShadowRoot.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region 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.
+*/
+function ReactLikeC4({ viewId, layoutType: initialLayoutType = "manual", className, colorScheme, injectFontCss = true, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }) {
+	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 = initialLayoutType === "manual" ? 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
+		})
+	});
+}
+
+//#endregion
+export { ReactLikeC4 };

package/dist/StaticLikeC4Diagram.d.mts

@@ -0,0 +1,14 @@
+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";
+//#region src/StaticLikeC4Diagram.d.ts
+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;
+//#endregion

package/dist/StaticLikeC4Diagram.mjs

@@ -0,0 +1,40 @@
+import { __name } from "./_virtual/_rolldown/runtime.mjs";
+import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+
+//#region 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
+	});
+}
+
+//#endregion
+export { StaticLikeC4Diagram };

package/dist/_virtual/_rolldown/runtime.mjs

@@ -0,0 +1,22 @@
+//#region \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;
+};
+
+//#endregion
+export { __exportAll, __name };

package/dist/base/Background.mjs

@@ -0,0 +1,32 @@
+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";
+
+//#region 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";
+
+//#endregion
+export { Background$1 as Background };

package/dist/base/Base.d.mts

@@ -0,0 +1,30 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+//#region src/base/Base.d.ts
+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;
+}
+//#endregion

package/dist/base/Base.mjs

@@ -0,0 +1,36 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { deepEqual } from "fast-equals";
+import { entries } from "remeda";
+
+//#region 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
+};
+
+//#endregion
+export { Base, hasSubObject$1 as hasSubObject };

package/dist/base/BaseXYFlow.mjs

@@ -0,0 +1,209 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { MaxZoom, MinZoom } from "./const.mjs";
+import { Background as Background$1 } from "./Background.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 { Base } from "./Base.mjs";
+import { getKeyboardZoomAction } from "./keyboardZoom.mjs";
+import { cx } from "@likec4/styles/css";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controls, ReactFlow, useStore } from "@xyflow/react";
+import { useMantineColorScheme } from "@mantine/core";
+
+//#region src/base/BaseXYFlow.tsx
+const likec4AriaLabelConfig = {
+	"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 = 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,
+		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: "var(--xy-edge-stroke)",
+		noDragClassName: "nodrag",
+		noPanClassName: "nopan",
+		noWheelClassName: "nowheel",
+		panOnScroll: pannable,
+		panOnDrag: pannable,
+		...!pannable && {
+			panActivationKeyCode: null,
+			selectionKeyCode: null
+		},
+		elementsSelectable: nodesSelectable,
+		nodesFocusable,
+		edgesFocusable,
+		nodesDraggable,
+		ariaLabelConfig: {
+			...likec4AriaLabelConfig,
+			...ariaLabelConfig
+		},
+		nodeDragThreshold: 4,
+		nodeClickDistance: 3,
+		paneClickDistance: 3,
+		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;
+};
+
+//#endregion
+export { BaseXYFlow };

package/dist/base/const.d.mts

@@ -0,0 +1,5 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+//#region src/base/const.d.ts
+export declare const MinZoom = 0.05;
+export declare const MaxZoom = 3;
+//#endregion

package/dist/base/const.mjs

@@ -0,0 +1,23 @@
+//#region 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";
+
+//#endregion
+export { FitViewPaddings, IS_SERVER, MaxZoom, MinZoom, ZIndexes };

package/dist/base/keyboardZoom.mjs

@@ -0,0 +1,22 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+//#region src/base/keyboardZoom.ts
+function isEditableKeyboardTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	const tagName = target.tagName.toLowerCase();
+	return tagName === "input" || tagName === "textarea" || tagName === "select" || target.isContentEditable;
+}
+function getKeyboardZoomAction(event) {
+	if (!event.ctrlKey && !event.metaKey || isEditableKeyboardTarget(event.target)) return null;
+	switch (event.key) {
+		case "+":
+		case "=": return "zoom-in";
+		case "-":
+		case "_": return "zoom-out";
+		case "0": return "reset";
+		default: return null;
+	}
+}
+
+//#endregion
+export { getKeyboardZoomAction, isEditableKeyboardTarget };

package/dist/base/types.d.mts

@@ -0,0 +1,62 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Base } from "./Base.mjs";
+import { Edge, EdgeProps, Node, NodeProps } from "@xyflow/react";
+import { OptionalKeysOf, SetRequired, Simplify } from "type-fest";
+//#region src/base/types.d.ts
+export type BaseNodeData = {
+  /**
+   * Whether the cursor is hovering over the node
+   */
+  hovered?: boolean;
+  /**
+   * Whether the node is dimmed
+   * 'immediate' means that the node is dimmed without delay
+   */
+  dimmed?: Base.Dimmed;
+};
+export type BaseEdgeData = {
+  /**
+   * Whether the cursor is hovering over the edge
+   */
+  hovered?: boolean;
+  /**
+   * Whether the edge is active (animated and highlighted)
+   */
+  active?: boolean;
+  /**
+   * Whether the edge is dimmed
+   * 'immediate' means that the edge is dimmed without delay
+   */
+  dimmed?: Base.Dimmed;
+};
+export type BaseNode<Data extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string> = SetRequired<Node<Data & BaseNodeData, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
+export interface BaseEdge<Data extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string = string> extends SetRequired<Edge<Data & BaseEdgeData, EdgeType>, 'type' | 'data'> {}
+/**
+ * ReactFlow Base Node properties with BaseNodeData at least
+ */
+export interface BaseNodeProps<N extends BaseNode = BaseNode> extends NodeProps<N> {}
+export type BaseNodePropsWithData<Data extends Record<string, unknown>> = BaseNodeProps<BaseNode<Data>>;
+/**
+ * ReactFlow Base Edge properties with BaseEdgeData at least
+ */
+export interface BaseEdgeProps<E extends BaseEdge = BaseEdge> extends EdgeProps<E> {}
+export type BaseEdgePropsWithData<Data extends Record<string, unknown>> = BaseEdgeProps<BaseEdge<Data>>;
+/**
+ * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
+ *
+ * @example
+ * interface User {
+ * 	name: string;
+ * 	surname?: string;
+ * 	luckyNumber?: number;
+ * }
+ *
+ * type NonOptionalUser = NonOptional<User>
+ * // NonOptionalUser = {
+ * //   name: string
+ * //   surname: string | undefined
+ * //   luckyNumber: number | undefined
+ * // }
+ */
+export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<{ [P in Exclude<keyof T, Keys>]: T[P]; } & { [P in Keys]-?: T[P] | undefined; }>;
+//#endregion

package/dist/base/updateEdges.mjs

@@ -0,0 +1,36 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { hasSubObject as hasSubObject$1 } from "./Base.mjs";
+import { deepEqual } from "fast-equals";
+import { isDefined, isShallowEqual, pickBy } from "remeda";
+
+//#region src/base/updateEdges.ts
+const EMPTY_OBJ = {};
+function _update(current, updated) {
+	if (current === updated) return current;
+	updated = updated.map((update) => {
+		const existing = current.find((n) => n.id === update.id && n.type === update.type && n.source === update.source && n.target === update.target);
+		if (!existing) return update;
+		if (existing === update) return existing;
+		const isSameData = hasSubObject$1(existing.data, update.data);
+		let data = isSameData ? existing.data : update.data;
+		if (!isSameData) {
+			if (isDefined(existing.data.hovered) && !isDefined(data.hovered)) data = Object.assign({ hovered: existing.data.hovered }, data);
+			if (isDefined(existing.data.dimmed) && !isDefined(data.dimmed)) data = Object.assign({ dimmed: existing.data.dimmed }, data);
+			if (isDefined(existing.data.active) && !isDefined(data.active)) data = Object.assign({ active: existing.data.active }, data);
+		} else if (deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.ariaLabel, update.ariaLabel ?? existing.ariaLabel) && deepEqual(existing.ariaRole, update.ariaRole ?? existing.ariaRole) && deepEqual(existing.className, update.className ?? existing.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle ?? existing.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle ?? existing.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
+		return {
+			...pickBy(existing, isDefined),
+			...pickBy(update, isDefined),
+			data
+		};
+	});
+	return isShallowEqual(current, updated) ? current : updated;
+}
+function updateEdges(current, update) {
+	if (isDefined(update)) return _update(current, update);
+	update = current;
+	return (current) => _update(current, update);
+}
+
+//#endregion
+export { updateEdges };