@likec4/diagram 1.59.2 → 1.59.4

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -4,7 +4,7 @@ import { css } from "@likec4/styles/css";
 import { IconChevronDown } from "@tabler/icons-react";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Menu, MenuDropdown, MenuItem, MenuTarget } from "@mantine/core";
+import { Button, Menu, MenuDropdown, MenuItem, MenuTarget, ScrollArea } from "@mantine/core";
 import { Box as Box$1, HStack } from "@likec4/styles/jsx";
 //#region src/navigationpanel/dropdown/ProjectsMenu.tsx
 var ProjectsMenu = memo((_) => {
@@ -18,13 +18,13 @@ var ProjectsMenu = memo((_) => {
 function WithProjectsMenu({ projects, onProjectChange }) {
 	const projectId = useLikeC4ProjectId();
 	return /* @__PURE__ */ jsxs(HStack, {
-		gap: "0.5",
+		gap: "1",
 		alignItems: "baseline",
 		children: [/* @__PURE__ */ jsx(Box$1, {
 			css: {
 				fontWeight: "normal",
 				fontSize: "xxs",
-				color: "likec4.panel.text.dimmed",
+				color: "text.dimmed",
 				userSelect: "none"
 			},
 			children: "Project"
@@ -32,20 +32,28 @@ function WithProjectsMenu({ projects, onProjectChange }) {
 			withinPortal: false,
 			shadow: "md",
 			position: "bottom-start",
-			offset: { mainAxis: 2 },
+			classNames: { itemLabel: css({
+				fontSize: "xs",
+				truncate: true,
+				maxWidth: "[250px]"
+			}) },
+			offset: { mainAxis: 3 },
 			children: [/* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(Button, {
 				tabIndex: -1,
 				autoFocus: false,
 				variant: "subtle",
 				size: "compact-xs",
 				color: "gray",
+				radius: "sm",
+				maw: 300,
 				classNames: {
 					root: css({
 						fontWeight: "normal",
 						fontSize: "xxs",
 						height: "auto",
-						lineHeight: 1.1,
-						color: { _light: "mantine.gray[9]" }
+						lineHeight: "tight",
+						px: "1",
+						py: "0.5"
 					}),
 					section: css({ "&:is([data-position=\"right\"])": { marginInlineStart: "1" } })
 				},
@@ -55,16 +63,19 @@ function WithProjectsMenu({ projects, onProjectChange }) {
 					stroke: 1.5
 				}),
 				children: projectId
-			}) }), /* @__PURE__ */ jsx(MenuDropdown, { children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(MenuItem, {
-				onClick: (e) => {
-					if (projectId === id) {
-						e.stopPropagation();
-						return;
-					}
-					onProjectChange(id);
-				},
-				children: title ?? id
-			}, id)) })]
+			}) }), /* @__PURE__ */ jsx(MenuDropdown, { children: /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+				mah: "calc(100cqh - 200px)",
+				children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(MenuItem, {
+					onClick: (e) => {
+						if (projectId === id) {
+							e.stopPropagation();
+							return;
+						}
+						onProjectChange(id);
+					},
+					children: title ?? id
+				}, id))
+			}) })]
 		})]
 	});
 }

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.js

@@ -9,10 +9,11 @@ import { jsx } from "react/jsx-runtime";
 //#region src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
 var ApplySemanticLayout = memo(({ visible = true }) => {
 	const diagram = useDiagram();
+	const isBusy = useEditorActorStateHasTag("ai-semantic-layout");
 	return /* @__PURE__ */ jsx(Tooltip, {
 		label: "Semantic Layout with AI",
 		children: /* @__PURE__ */ jsx(PanelActionIcon, {
-			loading: useEditorActorStateHasTag("ai-semantic-layout"),
+			loading: isBusy,
 			initial: { display: visible ? "block" : "none" },
 			animate: {
 				display: visible ? "block" : "none",

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -1,6 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
 import { PanelActionIcon } from "../_common.js";
 import { Tooltip as Tooltip$1 } from "./_common.js";
 import { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb } from "./styles.js";
@@ -8,19 +8,21 @@ import { IconLayoutDashboard } from "@tabler/icons-react";
 import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDebouncedCallback } from "@react-hookz/web";
+import { deepEqual } from "fast-equals";
 import { Box, Flex, FloatingIndicator, Popover, PopoverDropdown, PopoverTarget, Text, UnstyledButton } from "@mantine/core";
 import { clampUseMovePosition, useHover, useMergedRef, useMove, useUncontrolled } from "@mantine/hooks";
 //#region src/navigationpanel/editorpanel/ChangeAutoLayoutButton.tsx
-var selector = (state) => ({
+var selector = selectDiagramContext((state) => ({
 	viewId: state.view.id,
 	isManualLayout: state.view._layout === "manual",
 	autoLayout: state.view.autoLayout
-});
+}), deepEqual);
 var ChangeAutoLayoutButton = () => {
 	const diagram = useDiagram();
 	const [rootRef, setRootRef] = useState(null);
 	const [controlsRefs, setControlsRefs] = useState({});
-	const { autoLayout, viewId, isManualLayout } = useDiagramContext(selector);
+	const { autoLayout, viewId, isManualLayout } = useDiagramSelector(selector);
+	const portalProps = useMantinePortalProps();
 	const { ref, hovered: isSpacingHovered } = useHover();
 	const setControlRef = (name) => (node) => {
 		controlsRefs[name] = node;
@@ -52,12 +54,11 @@ var ChangeAutoLayoutButton = () => {
 	return /* @__PURE__ */ jsxs(Popover, {
 		position: "right-start",
 		clickOutsideEvents: ["pointerdown"],
-		radius: "xs",
-		shadow: "lg",
-		offset: { mainAxis: 10 },
+		offset: { mainAxis: 12 },
+		...portalProps,
 		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
 			label: "Change Auto Layout",
-			children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) })
+			children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) }) })
 		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
 			className: "likec4-top-left-panel",
 			p: 8,
@@ -154,8 +155,9 @@ var SpacingSliders = forwardRef(({ isVertical, nodeSep, rankSep, onChange }, _re
 	let nodeSepValue = Math.round(value.x * MAX_SPACING);
 	let rankSepValue = Math.round(value.y * MAX_SPACING);
 	if (!isVertical) [nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue];
+	const mergedRef = useMergedRef(ref, _ref);
 	return /* @__PURE__ */ jsxs(Box, {
-		ref: useMergedRef(ref, _ref),
+		ref: mergedRef,
 		className: spacingSliderBody,
 		pt: "100%",
 		children: [/* @__PURE__ */ jsx(Box, {

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

@@ -1,2 +1,4 @@
+import { TooltipProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
+export declare function manualLayoutTooltipProps(isPopoverOpen: boolean): Pick<TooltipProps, 'opened'>;
 export declare const ManualLayoutToolsButton: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -5,9 +5,11 @@ import { PanelActionIcon } from "../_common.js";
 import { Tooltip as Tooltip$1 } from "./_common.js";
 import { css } from "@likec4/styles/css";
 import { IconLayoutAlignBottom, IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignMiddle, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutBoardSplit, IconLayoutCollage, IconRouteOff } from "@tabler/icons-react";
-import { memo } from "react";
+import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverDropdown, PopoverTarget, TooltipGroup } from "@mantine/core";
+import { Popover, PopoverDropdown, PopoverTarget } from "@mantine/core";
+import "@mantine/hooks";
+import { Box as Box$1 } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 //#region src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx
 var Action = ({ label, icon, onClick }) => /* @__PURE__ */ jsx(Tooltip$1, {
@@ -18,32 +20,39 @@ var Action = ({ label, icon, onClick }) => /* @__PURE__ */ jsx(Tooltip$1, {
 		classNames: {
 			root: "action-icon",
 			icon: css({ "& > svg": {
-				width: "70%",
-				height: "70%"
+				width: "[70%]",
+				height: "[70%]"
 			} })
 		},
 		onClick,
 		children: icon
 	})
 });
+function manualLayoutTooltipProps(isPopoverOpen) {
+	return isPopoverOpen ? { opened: false } : {};
+}
 var ManualLayoutToolsButton = memo(() => {
 	const diagram = useDiagram();
+	const portalProps = useMantinePortalProps();
+	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Popover, {
+		onChange: setIsPopoverOpen,
 		position: "right",
 		offset: { mainAxis: 12 },
 		clickOutsideEvents: ["pointerdown"],
-		...useMantinePortalProps(),
+		...portalProps,
 		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
 			label: "Manual layouting tools",
-			children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) })
-		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+			...manualLayoutTooltipProps(isPopoverOpen),
+			children: /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) })
+		}) }), /* @__PURE__ */ jsxs(PopoverDropdown, {
 			className: hstack({
 				gap: "0.5",
 				layerStyle: "likec4.panel",
 				padding: "1",
 				pointerEvents: "all"
 			}),
-			children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
+			children: [
 				/* @__PURE__ */ jsx(Action, {
 					label: "Align in columns",
 					icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
@@ -116,10 +125,10 @@ var ManualLayoutToolsButton = memo(() => {
 						diagram.resetEdgeControlPoints();
 					}
 				})
-			] })
+			]
 		})]
 	});
 });
 ManualLayoutToolsButton.displayName = "ManualLayoutToolsButton";
 //#endregion
-export { ManualLayoutToolsButton };
+export { ManualLayoutToolsButton, manualLayoutTooltipProps };

package/dist/navigationpanel/editorpanel/styles.js

@@ -10,32 +10,26 @@ css({
 	pointerEvents: "none",
 	"& :where(button, .action-icon, [role='dialog'])": { pointerEvents: "all" },
 	["& .action-icon"]: { ["--ai-size"]: "2rem" },
-	["& .tabler-icon"]: {
-		width: "65%",
-		height: "65%"
-	},
+	["& .tabler-icon"]: { boxSize: "[65%]" },
 	_reduceGraphics: { "& .action-icon": { "--ai-radius": "0px" } }
 });
 css({ shadow: {
 	base: "md",
 	_whenPanning: "none"
 } });
-css({ ["& .tabler-icon"]: {
-	width: "65%",
-	height: "65%"
-} });
+css({ ["& .tabler-icon"]: { boxSize: "[65%]" } });
 var autolayoutButton = css({
-	flex: "1 1 40%",
+	flex: "[1 1 40%]",
 	textAlign: "center",
 	fontWeight: "medium",
 	padding: "[4px 6px]",
-	fontSize: "11px",
-	zIndex: 1
+	fontSize: "[11px]",
+	zIndex: "base"
 });
 var autolayoutIndicator = css({
 	background: "mantine.gray[2]",
 	borderRadius: "sm",
-	border: `1px solid`,
+	border: `default`,
 	borderColor: "mantine.gray[4]",
 	_dark: {
 		background: "mantine.dark[5]",
@@ -51,9 +45,8 @@ var spacingSliderBody = css({
 });
 var spacingSliderThumb = css({
 	position: "absolute",
-	width: "8px",
-	height: "8px",
-	border: `2px solid`,
+	boxSize: "[8px]",
+	border: `strong`,
 	borderColor: "mantine.gray[5]",
 	borderRadius: "sm",
 	transform: "translate(-50%, -50%)"

package/dist/navigationpanel/hooks.d.ts

@@ -5,11 +5,15 @@ 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", any, any, any>) => T, compare: (a: T, b: T) => boolean] & {
+    Out: T;
+}, 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: {
+}, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean] & {
+    Out: T;
+}, 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;

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

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

package/dist/navigationpanel/styles.css.js

@@ -4,7 +4,6 @@ var breadcrumbTitle = cva({
 	base: {
 		fontSize: "sm",
 		fontWeight: "medium",
-		transition: "fast",
 		color: {
 			base: "likec4.panel.action",
 			_hover: "likec4.panel.action.hover"

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -32,10 +32,11 @@ var ParallelFrame = () => {
 			left: "0",
 			width: "100%",
 			height: "100%",
-			border: `2px solid`,
+			borderWidth: "strong",
+			borderStyle: "solid",
 			borderColor: "likec4.walkthrough.parallelFrame",
 			pointerEvents: "none",
-			md: { borderWidth: "4" }
+			md: { borderWidth: "extra" }
 		} })
 	});
 };

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

@@ -3,6 +3,7 @@ import { ForwardRefExoticComponent, Key, AriaRole, ClipboardEventHandler, Compos
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
     key?: Key | null | undefined;
+    disabled?: boolean | undefined;
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
@@ -188,7 +189,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
-    autoCapitalize?: (string & {}) | "none" | "on" | "off" | "sentences" | "words" | "characters" | undefined;
+    autoCapitalize?: "none" | (string & {}) | "on" | "off" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
@@ -229,7 +230,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" | "inline" | "both" | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -265,7 +266,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     "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-relevant"?: "text" | "all" | "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;
@@ -282,11 +283,11 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     name?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     ref?: Ref<HTMLButtonElement> | undefined;
-    disabled?: boolean | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
 } & MotionProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+export declare function StartWalkthroughButton(): import("react").JSX.Element;
 export declare function DynamicViewControls(): import("react").JSX.Element;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -1,15 +1,16 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
+import { useDiagram } from "../../hooks/safeContext.js";
 import { Tooltip as Tooltip$1 } from "../_common.js";
 import { useNavigationActor } from "../hooks.js";
+import { DynamicViewModeSwitcher } from "./DynamicViewModeSwitcher.js";
 import { css } from "@likec4/styles/css";
 import { IconPlayerPlayFilled } from "@tabler/icons-react";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { Button, SegmentedControl } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "@likec4/core";
+import { Button } from "@mantine/core";
+import "motion/react";
 import * as m$1 from "motion/react-m";
 //#region src/navigationpanel/walkthrough/DynamicViewControls.tsx
 var TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(Button, {
@@ -30,9 +31,7 @@ function StartWalkthroughButton() {
 	const actor = useNavigationActor();
 	let tooltipLabel = "Start Dynamic View Walkthrough";
 	switch (true) {
-		case enableCompareWithLatest:
-			tooltipLabel = "Walkthrough not available when Compare is active";
-			break;
+		case enableCompareWithLatest: tooltipLabel = "Walkthrough not available when Compare is active";
 	}
 	return /* @__PURE__ */ jsx(Tooltip$1, {
 		label: tooltipLabel,
@@ -44,7 +43,7 @@ function StartWalkthroughButton() {
 			},
 			initial: {
 				opacity: 0,
-				scale: .6,
+				scale: .9,
 				translateX: -10
 			},
 			animate: {
@@ -74,36 +73,8 @@ function StartWalkthroughButton() {
 		})
 	});
 }
-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 = useDiagramSelector(selectDynamicViewVariant);
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {
-		value: dynamicViewVariant,
-		onChange: (mode) => {
-			diagram.switchDynamicViewVariant(mode);
-		}
-	}), /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "trigger-dynamic-walkthrough")] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {}), /* @__PURE__ */ jsx(StartWalkthroughButton, {})] });
 }
 //#endregion
-export { DynamicViewControls, TriggerWalkthroughButton };
+export { DynamicViewControls, StartWalkthroughButton, TriggerWalkthroughButton };

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

@@ -0,0 +1 @@
+export declare function DynamicViewModeSwitcher(): import("react").JSX.Element;

package/dist/navigationpanel/walkthrough/DynamicViewModeSwitcher.js

@@ -0,0 +1,49 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
+import { css } from "@likec4/styles/css";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SegmentedControl } from "@mantine/core";
+import { m } from "motion/react";
+//#region src/navigationpanel/walkthrough/DynamicViewModeSwitcher.tsx
+var dynamicViewModes = [{
+	value: "diagram",
+	label: "Diagram"
+}, {
+	value: "sequence",
+	label: "Sequence"
+}];
+var selectDynamicViewVariant = selectDiagramContext((c) => c.dynamicViewVariant);
+function DynamicViewModeSwitcher() {
+	const value = useDiagramSelector(selectDynamicViewVariant);
+	const diagram = useDiagram();
+	const controlAnimation = useRef({
+		initial: {
+			opacity: 0,
+			translateX: -10
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			translateX: -10
+		}
+	});
+	return /* @__PURE__ */ jsx(m.div, {
+		layout: "position",
+		...controlAnimation.current,
+		children: /* @__PURE__ */ jsx(SegmentedControl, {
+			value,
+			data: dynamicViewModes,
+			onChange: (variant) => {
+				diagram.switchDynamicViewVariant(variant);
+			},
+			size: "xs",
+			classNames: { label: css({ fontSize: "xxs" }) }
+		})
+	});
+}
+//#endregion
+export { DynamicViewModeSwitcher };

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -1,5 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { selectDiagramActorContext, useDiagramSnapshot } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagramSelector } from "../../hooks/safeContext.js";
 import { Markdown } from "../../base-primitives/Markdown.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +17,7 @@ var SectionHeader = styled("div", { base: {
 	userSelect: "none",
 	mb: "xxs"
 } });
-var selectWalkthroughNotes = selectDiagramActorContext((s) => {
+var selectWalkthroughNotes = selectDiagramContext((s) => {
 	const isActive = isNonNull(s.activeWalkthrough);
 	const activeStepIndex = isActive ? s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) : -1;
 	return {
@@ -29,7 +29,7 @@ var selectWalkthroughNotes = selectDiagramActorContext((s) => {
 	};
 });
 var WalkthroughPanel = memo(() => {
-	const { isActive, notes: _notes } = useDiagramSnapshot(selectWalkthroughNotes);
+	const { isActive, notes: _notes } = useDiagramSelector(selectWalkthroughNotes);
 	const notes = _notes ? RichText.from(_notes) : RichText.EMPTY;
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && !notes.isEmpty && /* @__PURE__ */ jsx(m.div, {
 		layout: "position",
@@ -40,17 +40,17 @@ var WalkthroughPanel = memo(() => {
 			padding: "md",
 			paddingTop: "xxs",
 			pointerEvents: "all",
-			maxWidth: 300,
+			maxWidth: "[300px]",
 			height: "max-content",
-			maxHeight: "calc(100cqh - 100px)",
+			maxHeight: "[calc(100cqh - 100px)]",
 			width: "max-content",
 			cursor: "default",
 			overflow: "hidden",
 			"@/sm": {
-				minWidth: 400,
-				maxWidth: 550
+				minWidth: "[400px]",
+				maxWidth: "[550px]"
 			},
-			"@/lg": { maxWidth: 700 }
+			"@/lg": { maxWidth: "[700px]" }
 		}),
 		initial: {
 			opacity: 0,

package/dist/navigationpanel/windows/ViewDetailsWindow.d.ts

@@ -0,0 +1 @@
+export declare function ViewDetailsWindow(): import("react").JSX.Element;