@likec4/diagram 1.56.0 → 1.57.0

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -1,5 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { ApplySemanticLayout } from "./ApplySemanticLayout.js";
 import { CenterCamera } from "./CenterCamera.js";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
@@ -10,41 +11,52 @@ import { AnimatePresence } from "motion/react";
 import { vstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 //#region src/navigationpanel/editorpanel/EditorPanel.tsx
+var variants = {
+	hidden: {
+		opacity: 0,
+		translateX: -20
+	},
+	visible: {
+		opacity: 1,
+		translateX: 0
+	},
+	exit: {
+		opacity: 0,
+		translateX: -20
+	}
+};
 function EditorPanel() {
-	const { enableReadOnly } = useEnabledFeatures();
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: !enableReadOnly && /* @__PURE__ */ jsx(m$1.div, {
-		layout: "position",
-		className: vstack({
-			gap: "xs",
-			layerStyle: "likec4.panel",
-			position: "relative",
-			cursor: "pointer",
-			padding: "xxs",
-			pointerEvents: "all"
-		}),
-		initial: {
-			opacity: 0,
-			translateX: -20
-		},
-		animate: {
-			opacity: 1,
-			translateX: 0
-		},
-		exit: {
-			opacity: 0,
-			translateX: -20
-		},
-		children: /* @__PURE__ */ jsxs(TooltipGroup, {
-			openDelay: 600,
-			closeDelay: 120,
-			children: [
-				/* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
-				/* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
-				/* @__PURE__ */ jsx(CenterCamera, {}),
-				/* @__PURE__ */ jsx(ToggleReadonly, {})
-			]
+	const { enableReadOnly, enableCompareWithLatest, enableAISemanticLayout } = useEnabledFeatures();
+	const showAiSemanticLayoutButton = !enableCompareWithLatest && !enableReadOnly && enableAISemanticLayout;
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		propagate: true,
+		children: !enableReadOnly && /* @__PURE__ */ jsx(m$1.div, {
+			layout: "position",
+			className: vstack({
+				gap: "xs",
+				layerStyle: "likec4.panel",
+				position: "relative",
+				cursor: "pointer",
+				padding: "xxs",
+				pointerEvents: "all"
+			}),
+			initial: "hidden",
+			animate: "visible",
+			exit: "exit",
+			variants,
+			children: /* @__PURE__ */ jsxs(TooltipGroup, {
+				openDelay: 600,
+				closeDelay: 120,
+				children: [
+					/* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
+					/* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
+					/* @__PURE__ */ jsx(CenterCamera, {}),
+					/* @__PURE__ */ jsx(ToggleReadonly, {}),
+					/* @__PURE__ */ jsx(ApplySemanticLayout, { visible: showAiSemanticLayoutButton })
+				]
+			})
 		})
-	}) });
+	});
 }
 //#endregion
 export { EditorPanel };

package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts

@@ -5,8 +5,8 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
     id?: string | undefined;
-    type?: "button" | "reset" | "submit" | undefined;
     form?: string | undefined;
     hidden?: boolean | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -17,68 +17,10 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     property?: string | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    lang?: string | undefined;
-    name?: string | undefined;
-    nonce?: string | undefined;
-    part?: string | undefined;
-    slot?: string | undefined;
-    tabIndex?: number | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "grid" | "true" | "dialog" | "listbox" | "menu" | "tree" | "false" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
     onCopy?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCopyCapture?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCut?: ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -243,16 +185,20 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onTransitionRunCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "on" | "off" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     enterKeyHint?: "search" | "next" | "previous" | "done" | "send" | "enter" | "go" | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
     radioGroup?: string | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
@@ -280,6 +226,60 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "move" | "copy" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "grid" | "true" | "dialog" | "listbox" | "menu" | "tree" | "false" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    name?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     ref?: Ref<HTMLButtonElement> | undefined;
     disabled?: boolean | undefined;

package/dist/overlays/overlay/Overlay.d.ts

@@ -11,7 +11,15 @@ export type OverlayProps = PropsWithChildren<{
     backdrop?: {
         opacity?: number;
     };
+    /**
+     * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+     * Default: `130ms`
+     * If set to `0`, the content will be shown immediately
+     */
     openDelay?: number;
+    /**
+     * Called when the overlay is closed by outside click or escape key
+     */
     onClose: () => void;
     onClick?: never;
 }>;
@@ -27,7 +35,15 @@ export declare const Overlay: ForwardRefExoticComponent<{
     backdrop?: {
         opacity?: number;
     };
+    /**
+     * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+     * Default: `130ms`
+     * If set to `0`, the content will be shown immediately
+     */
     openDelay?: number;
+    /**
+     * Called when the overlay is closed by outside click or escape key
+     */
     onClose: () => void;
     onClick?: never;
 } & {

package/dist/overlays/overlay/Overlay.js

@@ -1,11 +1,11 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { stopPropagation } from "../../utils/xyflow.js";
 import { cx } from "@likec4/styles/css";
-import { forwardRef, useLayoutEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-import { useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
+import { useTimeoutEffect } from "@react-hookz/web";
 import { RemoveScroll } from "@mantine/core";
-import { m, useReducedMotionConfig } from "motion/react";
+import { m, useIsPresent, useReducedMotionConfig } from "motion/react";
 import { useFocusTrap, useMergedRef } from "@mantine/hooks";
 import { overlay } from "@likec4/styles/recipes";
 //#region src/overlays/overlay/Overlay.tsx
@@ -13,27 +13,30 @@ var backdropBlur = "--_blur";
 var backdropOpacity = "--_opacity";
 var cssVarLevel = "--_level";
 var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, children, fullscreen = false, withBackdrop = true, backdrop, openDelay = 130, ...rest }, ref) => {
-	const [opened, setOpened] = useState(openDelay === 0);
+	const [opened, setOpened] = useState(false);
 	const focusTrapRef = useFocusTrap(opened);
 	const dialogRef = useRef(null);
-	const isClosingRef = useRef(false);
+	const onCloseRef = useRef(null);
 	const motionNotReduced = useReducedMotionConfig() !== true;
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-	const close = useDebouncedCallback(() => {
-		if (isClosingRef.current) return;
-		isClosingRef.current = true;
-		onCloseRef.current();
-	}, [], 50);
+	/**
+	* Close the overlay and call the onClose callback
+	*/
+	const cancelMe = () => {
+		onCloseRef.current = onClose;
+		dialogRef.current?.close();
+	};
+	const isPresent = useIsPresent();
+	useEffect(() => {
+		if (isPresent) return;
+		if (dialogRef.current?.open) {
+			onCloseRef.current = null;
+			dialogRef.current.close();
+		}
+	}, [isPresent]);
 	useLayoutEffect(() => {
-		if (!dialogRef.current?.open) dialogRef.current?.showModal();
 		const dialog = dialogRef.current;
-		return () => {
-			if (dialog?.open) {
-				isClosingRef.current = true;
-				dialog.close();
-			}
-		};
+		if (dialog && !dialog.open) dialog.showModal();
+		if (openDelay === 0) setOpened(true);
 	}, []);
 	useTimeoutEffect(() => {
 		setOpened(true);
@@ -44,55 +47,50 @@ var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, child
 	});
 	let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
 	if (backdrop?.opacity !== void 0) targetBackdropOpacity = `${backdrop.opacity * 100}%`;
+	const motionProps = useMemo(() => ({
+		initial: {
+			[backdropBlur]: "1px",
+			[backdropOpacity]: "10%",
+			scale: .95,
+			opacity: 0
+		},
+		animate: {
+			[backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+			[backdropOpacity]: targetBackdropOpacity,
+			scale: 1,
+			opacity: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .97,
+			[backdropBlur]: "0px",
+			[backdropOpacity]: "0%"
+		}
+	}), [overlayLevel, targetBackdropOpacity]);
 	return /* @__PURE__ */ jsx(m.dialog, {
 		ref: useMergedRef(dialogRef, focusTrapRef, ref),
 		className: cx(classes?.dialog, className, overlayRecipe, fullscreen && RemoveScroll.classNames.fullWidth),
 		layout: true,
 		style: { [cssVarLevel]: overlayLevel },
-		...motionNotReduced ? {
-			initial: {
-				[backdropBlur]: "0px",
-				[backdropOpacity]: "0%",
-				scale: .85,
-				opacity: 0
-			},
-			animate: {
-				[backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-				[backdropOpacity]: targetBackdropOpacity,
-				scale: 1,
-				opacity: 1,
-				translateY: 0
-			},
-			exit: {
-				opacity: 0,
-				scale: .98,
-				translateY: -20,
-				[backdropBlur]: "0px",
-				[backdropOpacity]: "0%"
-			}
-		} : { initial: {
+		...motionNotReduced ? motionProps : { initial: {
 			[backdropBlur]: "8px",
 			[backdropOpacity]: targetBackdropOpacity
 		} },
+		onDoubleClick: stopPropagation,
+		onPointerDown: stopPropagation,
+		...rest,
 		onClick: (e) => {
 			e.stopPropagation();
-			if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
-				dialogRef.current?.close();
-				return;
-			}
+			if (e.target === e.currentTarget) cancelMe();
 		},
 		onCancel: (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			close();
+			cancelMe();
 		},
-		onDoubleClick: stopPropagation,
-		onPointerDown: stopPropagation,
-		onClose: (e) => {
-			e.stopPropagation();
-			close();
+		onClose: () => {
+			onCloseRef.current?.();
 		},
-		...rest,
 		children: /* @__PURE__ */ jsx(RemoveScroll, {
 			forwardProps: true,
 			children: /* @__PURE__ */ jsx("div", {

package/dist/overlays/overlaysActor.js

@@ -5,7 +5,7 @@ import { relationshipDetailsLogic } from "./relationship-details/actor.js";
 import { isString, last, reverse } from "remeda";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { assertEvent, fromCallback, setup } from "xstate";
-import { not } from "xstate/guards";
+import "xstate/guards";
 //#region src/overlays/overlaysActor.ts
 var machine = setup({
 	types: {
@@ -35,9 +35,8 @@ var machine = setup({
 	},
 	guards: {
 		"has overlays?": ({ context }) => context.overlays.length > 0,
-		"close specific overlay?": ({ context, event }) => {
-			assertEvent(event, "close");
-			return isString(event.actorId) && context.overlays.some((o) => o.id === event.actorId);
+		"close specific overlay?": ({ event }) => {
+			return event.type === "close" && isString(event.actorId);
 		},
 		"last: is relationshipDetails?": ({ context }) => {
 			return last(context.overlays)?.type === "relationshipDetails";
@@ -176,9 +175,6 @@ var openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
 });
 var listenToEsc = () => machine.spawnChild("hotkey", { id: "hotkey" });
 var stopListeningToEsc = () => machine.stopChild("hotkey");
-var checkState = () => machine.enqueueActions(({ enqueue, context }) => {
-	if (context.overlays.length === 0) enqueue.raise({ type: "close" });
-});
 var overlaysActorLogic = machine.createMachine({
 	id: "overlays",
 	context: () => ({
@@ -186,34 +182,39 @@ var overlaysActorLogic = machine.createMachine({
 		overlays: []
 	}),
 	initial: "idle",
+	on: { "close.all": {
+		actions: closeAllOverlays(),
+		target: "#idle"
+	} },
 	states: {
 		idle: {
+			id: "idle",
 			entry: [emitIdle()],
 			on: { "open.*": {
 				actions: openOverlay(),
-				target: "active"
+				target: "opened"
 			} }
 		},
-		active: {
-			entry: [listenToEsc()],
-			exit: [stopListeningToEsc()],
-			on: {
-				"open.*": { actions: openOverlay() },
-				"close": [
-					{
-						guard: not("has overlays?"),
-						target: "idle"
-					},
-					{
+		opened: {
+			entry: listenToEsc(),
+			exit: stopListeningToEsc(),
+			initial: "hasOverlays",
+			states: {
+				hasOverlays: { on: {
+					"open.*": { actions: openOverlay() },
+					"close": [{
 						guard: "close specific overlay?",
-						actions: [closeSpecificOverlay(), checkState()]
-					},
-					{ actions: [closeLastOverlay(), checkState()] }
-				],
-				"close.all": {
-					actions: [closeAllOverlays()],
-					target: "idle"
-				}
+						actions: closeSpecificOverlay(),
+						target: "decide"
+					}, {
+						actions: closeLastOverlay(),
+						target: "decide"
+					}]
+				} },
+				decide: { always: [{
+					guard: "has overlays?",
+					target: "hasOverlays"
+				}, { target: "#idle" }] }
 			}
 		},
 		final: {

package/dist/overlays/relationship-details/custom/nodeTypes.d.ts

@@ -1,10 +1,9 @@
 import { BaseNodePropsWithData } from '../../../base';
 import { RelationshipDetailsTypes } from '../_types';
-import { FunctionComponent } from 'react';
-export declare const ElementNode: FunctionComponent<RelationshipDetailsTypes.NodeProps<"element">>;
-export declare const CompoundNode: FunctionComponent<RelationshipDetailsTypes.NodeProps<"compound">>;
+export declare function ElementNode(props: RelationshipDetailsTypes.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundNode(props: RelationshipDetailsTypes.NodeProps<'compound'>): import("react/jsx-runtime").JSX.Element;
 type ElementPortsProps = BaseNodePropsWithData<Pick<RelationshipDetailsTypes.ElementNodeData, 'ports' | 'height'>>;
-export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
+export declare function ElementPorts({ data: { ports, height: h } }: ElementPortsProps): import("react/jsx-runtime").JSX.Element;
 type CompoundPortsProps = BaseNodePropsWithData<Pick<RelationshipDetailsTypes.CompoundNodeData, 'ports'>>;
-export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
+export declare function CompoundPorts({ data }: CompoundPortsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -9,7 +9,6 @@ import { ElementDetailsButton } from "../../../base-primitives/element/ElementDe
 import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.js";
 import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
 import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.js";
-import { memoNode } from "../../../base-primitives/memoNode.js";
 import { ElementActions } from "./ElementActions.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Handle } from "@xyflow/react";
@@ -34,7 +33,7 @@ var ElementDetailsButtonWithHandler = (props) => {
 		}
 	});
 };
-var ElementNode = memoNode((props) => {
+function ElementNode(props) {
 	const { enableElementTags } = useEnabledFeatures();
 	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
 		nodeProps: props,
@@ -47,8 +46,8 @@ var ElementNode = memoNode((props) => {
 			/* @__PURE__ */ jsx(ElementPorts, { ...props })
 		]
 	});
-});
-var CompoundNode = memoNode((props) => {
+}
+function CompoundNode(props) {
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
 		nodeProps: props,
 		children: [
@@ -57,8 +56,8 @@ var CompoundNode = memoNode((props) => {
 			/* @__PURE__ */ jsx(CompoundPorts, { ...props })
 		]
 	});
-});
-var ElementPorts = ({ data: { ports, height: h } }) => {
+}
+function ElementPorts({ data: { ports, height: h } }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
 		id,
 		type: "target",
@@ -76,23 +75,25 @@ var ElementPorts = ({ data: { ports, height: h } }) => {
 			top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
 		}
 	}, id))] });
-};
-var CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [data.ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
-	id,
-	type: "target",
-	position: Position$1.Left,
-	style: {
-		visibility: "hidden",
-		top: `${20 * (i + 1)}px`
-	}
-}, id)), data.ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
-	id,
-	type: "source",
-	position: Position$1.Right,
-	style: {
-		visibility: "hidden",
-		top: `${20 * (i + 1)}px`
-	}
-}, id))] });
+}
+function CompoundPorts({ data }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [data.ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "target",
+		position: Position$1.Left,
+		style: {
+			visibility: "hidden",
+			top: `${20 * (i + 1)}px`
+		}
+	}, id)), data.ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "source",
+		position: Position$1.Right,
+		style: {
+			visibility: "hidden",
+			top: `${20 * (i + 1)}px`
+		}
+	}, id))] });
+}
 //#endregion
 export { CompoundNode, ElementNode };

package/dist/overlays/relationships-browser/SelectElement.js

@@ -108,7 +108,7 @@ var SelectElement = memo(() => {
 										paddingBottom: 6
 									}
 								},
-								renderNode: ({ node, selected, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsxs(Group, {
+								renderNode: ({ node, selected, expanded, elementProps }) => /* @__PURE__ */ jsxs(Group, {
 									gap: 2,
 									wrap: "nowrap",
 									...elementProps,
@@ -117,7 +117,7 @@ var SelectElement = memo(() => {
 										variant: "subtle",
 										size: 18,
 										c: "dimmed",
-										style: { visibility: hasChildren ? "visible" : "hidden" },
+										style: { visibility: node.hasChildren ? "visible" : "hidden" },
 										children: /* @__PURE__ */ jsx(IconChevronRight, {
 											stroke: 3.5,
 											style: {

package/dist/search/Search.d.ts

@@ -1,10 +1,13 @@
-import { MemoExoticComponent } from 'react';
+import { SearchActorRef } from './searchActor';
+import { MemoExoticComponent, ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const dialogCss: string;
 export declare const bodyCss: string;
 export declare const scrollAreaCss: string;
-export declare const Search: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const Search: MemoExoticComponent<({ searchActorRef }: {
+    searchActorRef: SearchActorRef;
+}) => import("react/jsx-runtime").JSX.Element>;
 /**
  * The shared search panel content used by both diagram and overview search.
  * Must be rendered inside a SearchContext.Provider.
  */
-export declare const SearchPanelContent: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const SearchPanelContent: ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>;