@likec4/diagram 1.57.0 → 1.59.0

package/dist/navigationpanel/actor.setup.js

@@ -0,0 +1,31 @@
+import "../_virtual/_rolldown/runtime.js";
+import { isEmpty } from "remeda";
+import { setup } from "xstate";
+//#region src/navigationpanel/actor.setup.ts
+function Context({ input }) {
+	return {
+		...input,
+		activatedBy: "hover",
+		selectedFolder: "",
+		searchQuery: ""
+	};
+}
+var actor = setup({
+	types: {
+		context: {},
+		events: {},
+		tags: "",
+		input: {}
+	},
+	delays: {
+		"open timeout": 500,
+		"close timeout": 350
+	},
+	guards: {
+		"was opened on hover": ({ context }) => context.activatedBy === "hover",
+		"has search query": ({ context }) => !isEmpty(context.searchQuery),
+		"search query is empty": ({ context }) => isEmpty(context.searchQuery)
+	}
+});
+//#endregion
+export { Context, actor };

package/dist/navigationpanel/comparepanel/CompareActionsMenu.d.ts

@@ -2,4 +2,4 @@ export declare function CompareActionsMenu({ disabled, onApplyLatestToManual, on
     disabled?: boolean;
     onApplyLatestToManual?: undefined | (() => void);
     onResetManualLayout: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/ComparePanel.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const ComparePanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ComparePanel: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/comparepanel/ComparePanelControls.d.ts

@@ -1 +1 @@
-export declare function ComparePanelControls(): import("react/jsx-runtime").JSX.Element;
+export declare function ComparePanelControls(): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/DriftsSummary.d.ts

@@ -1 +1 @@
-export declare function DriftsSummary(): import("react/jsx-runtime").JSX.Element | null;
+export declare function DriftsSummary(): import("react").JSX.Element | null;

package/dist/navigationpanel/comparepanel/DriftsSummary.js

@@ -1,7 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { selectDiagramActorContext, useDiagramSnapshot } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { deepEqual } from "fast-equals";
 import { filter, hasAtLeast, map, pipe } from "remeda";
@@ -13,7 +12,7 @@ import { vstack } from "@likec4/styles/patterns";
 var hasDrifts = (item) => {
 	return !!item.drifts && hasAtLeast(item.drifts, 1);
 };
-var selectDrifts = selectDiagramActorContext((ctx) => ({
+var selectDrifts = selectDiagramContext((ctx) => ({
 	view: ctx.view.drifts ?? [],
 	nodes: pipe(ctx.view.nodes, map((node) => ({
 		id: node.id,
@@ -24,7 +23,7 @@ var selectDrifts = selectDiagramActorContext((ctx) => ({
 		edgeId: edge.id,
 		drifts: edge.drifts
 	})), filter(hasDrifts))
-}));
+}), deepEqual);
 var variants = {
 	initial: {
 		opacity: 0,
@@ -45,7 +44,7 @@ var variants = {
 	}
 };
 function DriftsSummary() {
-	const selected = useDiagramSnapshot(selectDrifts, deepEqual);
+	const selected = useDiagramSelector(selectDrifts);
 	const diagram = useDiagram();
 	const onMouseLeaveDebounced = useDebouncedCallback((e) => {
 		e.stopPropagation();

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.d.ts

@@ -2,4 +2,4 @@ import { LayoutType } from '@likec4/core';
 export declare function LayoutTypeSwitcher({ value, onChange, }: {
     value: LayoutType;
     onChange: (layout: LayoutType) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/navigationpanel/controls/DetailsControls.d.ts

@@ -1,2 +1,2 @@
 import { PopoverProps } from '@mantine/core';
-export declare const DetailsControls: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailsControls: (props: PopoverProps) => import("react").JSX.Element;

package/dist/navigationpanel/controls/DetailsControls.js

@@ -2,7 +2,7 @@ import "../../_virtual/_rolldown/runtime.js";
 import { useDiagram } from "../../hooks/safeContext.js";
 import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
 import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { useNavigationActorSnapshot } from "../hooks.js";
+import { selectNavigationContext, useNavigationActorSelector } from "../hooks.js";
 import { Markdown } from "../../base-primitives/Markdown.js";
 import { ElementTag } from "../../base-primitives/element/ElementTags.js";
 import { Link } from "../../components/Link.js";
@@ -10,15 +10,14 @@ import { css, cx } from "@likec4/styles/css";
 import { IconId, IconLink } from "@tabler/icons-react";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { deepEqual } from "fast-equals";
 import { Badge, Popover, Text, UnstyledButton } from "@mantine/core";
 import { Box as Box$1, HStack, styled } from "@likec4/styles/jsx";
+import { RichText } from "@likec4/core/types";
 import { hstack, vstack } from "@likec4/styles/patterns";
 import * as m from "motion/react-m";
-import { RichText } from "@likec4/core/types";
 import { extractViewTitleFromPath } from "@likec4/core/model";
 //#region src/navigationpanel/controls/DetailsControls.tsx
-var selector = ({ context }) => {
+var selector = selectNavigationContext((context) => {
 	const view = context.view;
 	return {
 		id: view.id,
@@ -27,10 +26,10 @@ var selector = ({ context }) => {
 		tags: view.tags ?? [],
 		links: view.links ?? []
 	};
-};
+});
 var DetailsControls = (props) => {
 	const [opened, setOpened] = useState(false);
-	const data = useNavigationActorSnapshot(selector, deepEqual);
+	const data = useNavigationActorSelector(selector);
 	return /* @__PURE__ */ jsxs(Popover, {
 		position: "bottom-end",
 		shadow: "xl",
@@ -199,8 +198,8 @@ var ViewBadge = ({ label, value }) => {
 					overflow: "visible",
 					px: "1",
 					color: {
-						_dark: "mantine.colors.gray[4]",
-						_light: "mantine.colors.gray[8]"
+						_dark: "mantine.gray[4]",
+						_light: "mantine.gray[8]"
 					}
 				}),
 				label: css({ overflow: "visible" }),

package/dist/navigationpanel/controls/LayoutWarning.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const LayoutWarning: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const LayoutWarning: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/controls/LogoButton.d.ts

@@ -1 +1 @@
-export declare const LogoButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoButton: () => import("react").JSX.Element;

package/dist/navigationpanel/controls/NavigationButtons.d.ts

@@ -1 +1 @@
-export declare const NavigationButtons: () => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationButtons: () => import("react").JSX.Element;

package/dist/navigationpanel/controls/OpenSource.d.ts

@@ -1 +1 @@
-export declare const OpenSource: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const OpenSource: () => import("react").JSX.Element | null;

package/dist/navigationpanel/controls/SearchControl.d.ts

@@ -1 +1 @@
-export declare function SearchControl(): import("react/jsx-runtime").JSX.Element;
+export declare function SearchControl(): import("react").JSX.Element;

package/dist/navigationpanel/controls/ToggleReadonly.d.ts

@@ -1 +1 @@
-export declare const ToggleReadonly: () => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleReadonly: () => import("react").JSX.Element;

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -45,7 +45,7 @@ function WithProjectsMenu({ projects, onProjectChange }) {
 						fontSize: "xxs",
 						height: "auto",
 						lineHeight: 1.1,
-						color: { _light: "mantine.colors.gray[9]" }
+						color: { _light: "mantine.gray[9]" }
 					}),
 					section: css({ "&:is([data-position=\"right\"])": { marginInlineStart: "1" } })
 				},

package/dist/navigationpanel/editorpanel/CenterCamera.d.ts

@@ -1 +1 @@
-export declare const CenterCamera: () => import("react/jsx-runtime").JSX.Element;
+export declare const CenterCamera: () => import("react").JSX.Element;

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.d.ts

@@ -1 +1 @@
-export declare const ChangeAutoLayoutButton: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const ChangeAutoLayoutButton: () => import("react").JSX.Element | null;

package/dist/navigationpanel/editorpanel/EditorPanel.d.ts

@@ -1 +1 @@
-export declare function EditorPanel(): import("react/jsx-runtime").JSX.Element;
+export declare function EditorPanel(): import("react").JSX.Element;

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const ManualLayoutToolsButton: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ManualLayoutToolsButton: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/editorpanel/ToggleReadonly.d.ts

@@ -1 +1 @@
-export declare const ToggleReadonly: () => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleReadonly: () => import("react").JSX.Element;

package/dist/navigationpanel/editorpanel/styles.js

@@ -33,28 +33,28 @@ var autolayoutButton = css({
 	zIndex: 1
 });
 var autolayoutIndicator = css({
-	background: "mantine.colors.gray[2]",
+	background: "mantine.gray[2]",
 	borderRadius: "sm",
 	border: `1px solid`,
-	borderColor: "mantine.colors.gray[4]",
+	borderColor: "mantine.gray[4]",
 	_dark: {
-		background: "mantine.colors.dark[5]",
-		borderColor: "mantine.colors.dark[4]"
+		background: "mantine.dark[5]",
+		borderColor: "mantine.dark[4]"
 	}
 });
 var spacingSliderBody = css({
 	position: "relative",
 	borderRadius: "sm",
-	background: "mantine.colors.gray[3]",
-	boxShadow: "inset 1px 1px 3px 0px #00000024",
-	_dark: { background: "mantine.colors.dark[7]" }
+	background: "mantine.gray[3]",
+	boxShadow: "[inset 1px 1px 3px 0px #00000024]",
+	_dark: { background: "mantine.dark[7]" }
 });
 var spacingSliderThumb = css({
 	position: "absolute",
 	width: "8px",
 	height: "8px",
 	border: `2px solid`,
-	borderColor: "mantine.colors.gray[5]",
+	borderColor: "mantine.gray[5]",
 	borderRadius: "sm",
 	transform: "translate(-50%, -50%)"
 });

package/dist/navigationpanel/hooks.d.ts

@@ -1,10 +1,25 @@
 import { ViewId } from '@likec4/core';
-import { NavigationPanelActorContext, NavigationPanelActorEvent, NavigationPanelActorRef, NavigationPanelActorSnapshot } from './actor';
+import { NavigationPanelActorEvent, NavigationPanelActorRef } from './actor';
 import { Provider } from 'react';
-export declare const NavigationPanelActorContextProvider: Provider<NavigationPanelActorRef>;
-export declare const useNavigationActorRef: () => NavigationPanelActorRef;
-export declare function useNavigationActorSnapshot<T = unknown>(selector: (context: NavigationPanelActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
-export declare function useNavigationActorContext<T = unknown>(selector: (context: NavigationPanelActorContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+import { Context } from './actor.setup';
+import { MachineSnapshot } from 'xstate';
+export declare const NavigationPanelActorContextProvider: Provider<NavigationPanelActorRef>, selectNavigationContext: <T>(select: (state: Context) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+}, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean], selectNavigationSnapshot: <T>(select: (state: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+}, "active", any, any, any>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+}, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean], useNavigationActorRef: () => NavigationPanelActorRef, useNavigationActorSelector: {
+    <T>(select: (state: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+    }, "active", any, any, any>) => T): T;
+    <T>(selectorCompare: [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+    }, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean]): T;
+    <T>(selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+    }, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean): T;
+};
 export interface NavigationActor {
     readonly actorRef: NavigationPanelActorRef;
     send: (event: NavigationPanelActorEvent) => void;

package/dist/navigationpanel/hooks.js

@@ -1,22 +1,8 @@
 import "../_virtual/_rolldown/runtime.js";
-import { createContext, useContext, useMemo } from "react";
-import { shallowEqual } from "fast-equals";
-import { useSelector } from "@xstate/react";
+import { createSafeContextForActor } from "../hooks/safeContext.js";
+import { useMemo } from "react";
 //#region src/navigationpanel/hooks.tsx
-var NavigationPanelActorSafeContext = createContext(null);
-NavigationPanelActorSafeContext.displayName = "NavigationPanelActorSafeContext";
-var NavigationPanelActorContextProvider = NavigationPanelActorSafeContext.Provider;
-var useNavigationActorRef = () => {
-	const ctx = useContext(NavigationPanelActorSafeContext);
-	if (ctx === null) throw new Error("NavigationPanelActorRef is not found in the context");
-	return ctx;
-};
-function useNavigationActorSnapshot(selector, compare = shallowEqual) {
-	return useSelector(useNavigationActorRef(), selector, compare);
-}
-function useNavigationActorContext(selector, compare = shallowEqual) {
-	return useNavigationActorSnapshot((snapshot) => selector(snapshot.context), compare);
-}
+var { ContextProvider: NavigationPanelActorContextProvider, selectContext: selectNavigationContext, selectSnapshot: selectNavigationSnapshot, useActorRef: useNavigationActorRef, useActorSelector: useNavigationActorSelector } = createSafeContextForActor("NavigationPanel");
 function useNavigationActor() {
 	const actorRef = useNavigationActorRef();
 	return useMemo(() => ({
@@ -41,4 +27,4 @@ function useNavigationActor() {
 	}), [actorRef]);
 }
 //#endregion
-export { NavigationPanelActorContextProvider, useNavigationActor, useNavigationActorContext, useNavigationActorRef, useNavigationActorSnapshot };
+export { NavigationPanelActorContextProvider, selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector };

package/dist/navigationpanel/styles.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '@likec4/styles';
+import { RecipeRuntimeFn } from '../../styled-system/types';
 export declare const breadcrumbTitle: RecipeRuntimeFn<{
     truncate: {
         true: {

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

@@ -1 +1 @@
-export declare function ActiveWalkthroughControls(): import("react/jsx-runtime").JSX.Element;
+export declare function ActiveWalkthroughControls(): import("react").JSX.Element;

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -44,7 +44,7 @@ function ActiveWalkthroughControls() {
 	const { isParallel, hasNext, hasPrevious, currentStep, totalSteps } = useDiagramContext((s) => {
 		const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
 		return {
-			isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+			isParallel: isTruthy(s.activeWalkthrough?.activeFlow),
 			hasNext: currentStepIndex < s.xyedges.length - 1,
 			hasPrevious: currentStepIndex > 0,
 			currentStep: currentStepIndex + 1,
@@ -69,7 +69,7 @@ function ActiveWalkthroughControls() {
 			}, "stop-walkthrough"),
 			/* @__PURE__ */ jsx(PrevNextButton, {
 				disabled: !hasPrevious,
-				onClick: () => diagram.walkthroughStep("previous"),
+				onClick: () => diagram.walkthroughStep("prev"),
 				leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
 				children: "Previous"
 			}, "prev"),

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

@@ -2,6 +2,7 @@ import { ButtonProps } from '@mantine/core';
 import { ForwardRefExoticComponent, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, ChangeEventHandler, InputEventHandler, ReactEventHandler, SubmitEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Ref, RefAttributes } from 'react';
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
+    key?: Key | null | undefined;
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
@@ -12,9 +13,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     draggable?: (boolean | "true" | "false") | undefined;
     className?: string | undefined;
     title?: string | undefined;
-    key?: Key | null | undefined;
     dir?: string | undefined;
-    property?: string | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -193,7 +192,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
-    enterKeyHint?: "search" | "next" | "previous" | "done" | "send" | "enter" | "go" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
@@ -204,6 +203,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
+    property?: string | undefined;
     rel?: string | undefined;
     resource?: string | undefined;
     rev?: string | undefined;
@@ -229,7 +229,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     part?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -289,4 +289,4 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
 } & MotionProps, "ref"> & RefAttributes<HTMLButtonElement>>;
-export declare function DynamicViewControls(): import("react/jsx-runtime").JSX.Element;
+export declare function DynamicViewControls(): import("react").JSX.Element;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -1,7 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
 import { Tooltip as Tooltip$1 } from "../_common.js";
 import { useNavigationActor } from "../hooks.js";
 import { css } from "@likec4/styles/css";
@@ -75,30 +74,29 @@ function StartWalkthroughButton() {
 		})
 	});
 }
-var DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => {
-	return /* @__PURE__ */ jsx(m$1.div, {
-		ref,
-		layout: "position",
-		children: /* @__PURE__ */ jsx(SegmentedControl, {
-			size: "xs",
-			value,
-			onChange: (variant) => {
-				invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
-				onChange(variant);
-			},
-			classNames: { label: css({ fontSize: "xxs" }) },
-			data: [{
-				value: "diagram",
-				label: "Diagram"
-			}, {
-				value: "sequence",
-				label: "Sequence"
-			}]
-		})
-	});
-});
+var DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => /* @__PURE__ */ jsx(m$1.div, {
+	ref,
+	layout: "position",
+	children: /* @__PURE__ */ jsx(SegmentedControl, {
+		size: "xs",
+		value,
+		onChange: (variant) => {
+			invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
+			onChange(variant);
+		},
+		classNames: { label: css({ fontSize: "xxs" }) },
+		data: [{
+			value: "diagram",
+			label: "Diagram"
+		}, {
+			value: "sequence",
+			label: "Sequence"
+		}]
+	})
+}));
+var selectDynamicViewVariant = selectDiagramContext((c) => c.dynamicViewVariant);
 function DynamicViewControls() {
-	const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+	const dynamicViewVariant = useDiagramSelector(selectDynamicViewVariant);
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {
 		value: dynamicViewVariant,

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

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const WalkthroughPanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const WalkthroughPanel: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -1,5 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { selectDiagramActorContext, useDiagramSnapshot } from "../../hooks/useDiagram.js";
 import { Markdown } from "../../base-primitives/Markdown.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,19 +17,19 @@ var SectionHeader = styled("div", { base: {
 	userSelect: "none",
 	mb: "xxs"
 } });
-function selectWalkthroughNotes(s) {
+var selectWalkthroughNotes = selectDiagramActorContext((s) => {
 	const isActive = isNonNull(s.activeWalkthrough);
 	const activeStepIndex = isActive ? s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) : -1;
 	return {
 		isActive,
-		isParallel: isActive && isTruthy(s.activeWalkthrough?.parallelPrefix),
+		isParallel: isActive && isTruthy(s.activeWalkthrough?.activeFlow),
 		hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
 		hasPrevious: isActive && activeStepIndex > 0,
 		notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? null : null
 	};
-}
+});
 var WalkthroughPanel = memo(() => {
-	const { isActive, notes: _notes } = useDiagramContext(selectWalkthroughNotes);
+	const { isActive, notes: _notes } = useDiagramSnapshot(selectWalkthroughNotes);
 	const notes = _notes ? RichText.from(_notes) : RichText.EMPTY;
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && !notes.isEmpty && /* @__PURE__ */ jsx(m.div, {
 		layout: "position",

package/dist/overlays/Overlays.d.ts

@@ -1,4 +1,6 @@
 import { OverlaysActorRef } from './overlaysActor';
-export declare function Overlays({ overlaysActorRef }: {
+type OverlaysProps = {
     overlaysActorRef: OverlaysActorRef;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare const Overlays: ({ overlaysActorRef }: OverlaysProps) => import("react").JSX.Element;
+export {};

package/dist/overlays/Overlays.js

@@ -4,6 +4,7 @@ import { useDiagram } from "../hooks/safeContext.js";
 import { ErrorBoundary } from "../components/ErrorFallback.js";
 import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
 import { ElementDetails } from "./element-details/ElementDetails.js";
+import { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor } from "./hooks.js";
 import { Overlay } from "./overlay/Overlay.js";
 import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
 import { useEffect } from "react";
@@ -11,10 +12,13 @@ import { jsx } from "react/jsx-runtime";
 import { isNonNullish } from "remeda";
 import { nonexhaustive } from "@likec4/core";
 import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from "motion/react";
-import { useSelector } from "@xstate/react";
 import { animate } from "motion";
 //#region src/overlays/Overlays.tsx
-var selectOverlays = (s) => {
+var Overlays = ({ overlaysActorRef }) => /* @__PURE__ */ jsx(OverlaysActorContext, {
+	value: overlaysActorRef,
+	children: /* @__PURE__ */ jsx(OverlaysSurface, { overlaysActorRef })
+});
+var selectOverlays = selectOverlaysSnapshot((s) => {
 	return s.context.overlays.map((overlay) => {
 		switch (overlay.type) {
 			case "relationshipsBrowser": return s.children[overlay.id] ? {
@@ -32,15 +36,10 @@ var selectOverlays = (s) => {
 			default: nonexhaustive(overlay);
 		}
 	}).filter(isNonNullish);
-};
-var compareSelectOverlays = (a, b) => {
-	return a.length === b.length && a.every((overlay, i) => {
-		return overlay.actorRef === b[i].actorRef;
-	});
-};
-function Overlays({ overlaysActorRef }) {
+}, (a, b) => !!a && !!b && a.length === b.length && a.every((overlay, i) => overlay.actorRef === b[i].actorRef));
+function OverlaysSurface({ overlaysActorRef }) {
 	const diagram = useDiagram();
-	const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
+	const overlays = useSelectOverlaysActor(selectOverlays);
 	const isMotionReduced = useReducedMotionConfig() ?? false;
 	const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
 	useEffect(() => {
@@ -90,6 +89,7 @@ function Overlays({ overlaysActorRef }) {
 	return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, {
 		onReset: () => overlaysActorRef.send({ type: "close.all" }),
 		children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+			propagate: true,
 			mode: "popLayout",
 			children: overlaysReact
 		}) })

package/dist/overlays/element-details/ElementDetails.d.ts

@@ -3,4 +3,4 @@ export type ElementDetailsProps = {
     actorRef: ElementDetailsActorRef;
     onClose: () => void;
 };
-export declare function ElementDetails({ actorRef, onClose, }: ElementDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementDetails({ actorRef, onClose, }: ElementDetailsProps): import("react").JSX.Element;