@likec4/diagram 1.60.0 → 1.61.0

package/dist/navigationpanel/NavigationPanelControls.mjs

@@ -1,10 +1,8 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import IconChevronRight from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
 import { useEnabledFeatures } from "../context/DiagramFeatures.mjs";
-import { selectDiagramContext, useDiagramSelector } from "../hooks/safeContext.mjs";
 import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
-import { deriveToggledFeatures } from "../likec4diagram/state/machine.setup.mjs";
-import { useNavigationActor } from "./hooks.mjs";
+import { selectDiagramSnapshot, useDiagramSelector } from "../hooks/safeContext.mjs";
+import { isComparingLayouts } from "../likec4diagram/state/machine.setup.mjs";
 import { LayoutWarning } from "./controls/LayoutWarning.mjs";
 import { LogoButton } from "./controls/LogoButton.mjs";
 import { NavigationButtons } from "./controls/NavigationButtons.mjs";
@@ -12,138 +10,56 @@ import { OpenSource } from "./controls/OpenSource.mjs";
 import { SearchControl } from "./controls/SearchControl.mjs";
 import { ToggleReadonly } from "./controls/ToggleReadonly.mjs";
 import { ViewDetailsButton } from "./controls/ViewDetailsButton.mjs";
+import { NavigationBreadcrumbs } from "./controls/NavigationBreadcrumbs.mjs";
 import { ElementViewControls } from "./ElementViewControls.mjs";
-import { breadcrumbTitle } from "./styles.css.mjs";
+import { useNavigationActor } from "./hooks.mjs";
 import { DynamicViewControls } from "./walkthrough/DynamicViewControls.mjs";
-import { css, cx } from "@likec4/styles/css";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { isTruthy } from "remeda";
-import { UnstyledButton } from "@mantine/core";
-import { LayoutGroup } from "motion/react";
 import { extractViewTitleFromPath } from "@likec4/core/model";
 import { hstack } from "@likec4/styles/patterns";
-import * as m$1 from "motion/react-m";
+import * as m from "motion/react-m";
 
-//#region src/navigationpanel/NavigationPanelControls.tsx
-const selectViewData = selectDiagramContext((s) => {
-	const comparingLatest = deriveToggledFeatures(s).enableCompareWithLatest && !!s.view.drifts && s.view._layout === "auto";
+// src/navigationpanel/NavigationPanelControls.tsx
+const selectViewData = selectDiagramSnapshot((snapshot) => {
+	const s = snapshot.context;
+	const isElementView = s.view._type === "element";
+	const isComparing = isComparingLayouts(snapshot);
+	const comparingLatest = isComparing && s.view._layout === "auto";
+	const isGraphForceSimulation = isElementView && s.elementViewVariant === "graph";
 	const noActiveWalkthrough = !isTruthy(s.activeWalkthrough);
 	const hasEditor = s.features.enableEditor;
 	const isReadOnly = s.toggledFeatures.enableReadOnly ?? false;
+	const isEditing = !isReadOnly;
 	return {
 		viewId: s.view.id,
+		linksCount: s.view.links?.length ?? 0,
 		viewTitle: (s.view.title && extractViewTitleFromPath(s.view.title)) ?? "Untitled View",
 		isDynamicView: s.view._type === "dynamic",
 		isElementView: s.view._type === "element",
+		elementViewVariant: s.elementViewVariant,
 		editBtnVisible: hasEditor && noActiveWalkthrough,
-		editBtnDisabled: comparingLatest,
-		isReadOnly
+		editBtnDisabled: comparingLatest || isGraphForceSimulation,
+		isReadOnly,
+		isEditing,
+		isComparing
 	};
 });
-const breadcrumbAnimation = {
-	initial: {
-		opacity: .5,
-		translateX: -10,
-		translateY: 0
-	},
-	animate: {
-		opacity: 1,
-		translateX: 0,
-		translateY: 0
-	},
-	exit: {
-		opacity: 0,
-		translateX: -10,
-		translateY: 0
-	},
-	whileTap: { translateY: 1 }
-};
 const NavigationPanelControls = memo(() => {
 	const actor = useNavigationActor();
-	const { enableNavigationButtons, enableDynamicViewWalkthrough, enableCompareWithLatest, enableSearch, enableVscode } = useEnabledFeatures();
+	const { enableNavigationButtons, enableDynamicViewWalkthrough, enableSearch, enableVscode } = useEnabledFeatures();
 	const viewModel = useOptionalCurrentViewModel();
-	const { editBtnDisabled, editBtnVisible, isReadOnly, viewTitle, isDynamicView, isElementView } = useDiagramSelector(selectViewData);
-	const folder = viewModel?.folder;
-	const folderBreadcrumbs = (!folder || folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
-		folderPath: s.path,
-		title: s.title
-	}))).flatMap(({ folderPath, title }, index, all) => [/* @__PURE__ */ jsx(UnstyledButton, {
-		component: m$1.button,
-		layout: "position",
-		className: cx(breadcrumbTitle({
-			dimmed: true,
-			truncate: true
-		}), css({
-			userSelect: "none",
-			maxWidth: "[150px]",
-			display: {
-				base: "none",
-				"@/md": "block"
-			}
-		})),
-		...breadcrumbAnimation,
-		title,
-		onMouseEnter: () => actor.send({
-			type: "breadcrumbs.mouseEnter.folder",
-			folderPath
-		}),
-		onMouseLeave: () => actor.send({
-			type: "breadcrumbs.mouseLeave.folder",
-			folderPath
-		}),
-		onClick: (e) => {
-			e.stopPropagation();
-			actor.send({
-				type: "breadcrumbs.click.folder",
-				folderPath
-			});
-		},
-		children: title
-	}, folderPath), /* @__PURE__ */ jsx(m$1.div, {
-		layout: true,
-		className: css({
-			display: {
-				base: "none",
-				"@/md": "block"
-			},
-			color: "text.non-essential"
-		}),
-		children: /* @__PURE__ */ jsx(IconChevronRight, { size: 16 })
-	}, folderPath + "-separator")]);
-	const viewBreadcrumb = /* @__PURE__ */ jsx(UnstyledButton, {
-		layoutId: "view-title",
-		component: m$1.button,
-		layout: "position",
-		...breadcrumbAnimation,
-		className: cx(breadcrumbTitle({ truncate: true }), css({ userSelect: "none" })),
-		title: viewTitle,
-		onMouseEnter: () => actor.send({ type: "breadcrumbs.mouseEnter.viewtitle" }),
-		onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave.viewtitle" }),
-		onClick: (e) => {
-			e.stopPropagation();
-			actor.send({ type: "breadcrumbs.click.viewtitle" });
-		},
-		children: viewTitle
-	});
+	const { editBtnDisabled, editBtnVisible, isReadOnly, isEditing, viewTitle, isDynamicView, isElementView, elementViewVariant, linksCount, isComparing } = useDiagramSelector(selectViewData);
+	const hasModel = !!viewModel;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(LogoButton, {}, "logo-button"),
 		enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
-		/* @__PURE__ */ jsx(m$1.div, {
-			layout: "size",
-			className: hstack({
-				gap: "1",
-				flexShrink: 1,
-				flexGrow: 1,
-				flexWrap: "nowrap",
-				overflow: "hidden"
-			}),
-			children: /* @__PURE__ */ jsxs(LayoutGroup, {
-				id: "navigation-panel-breadcrumbs",
-				children: [folderBreadcrumbs, viewBreadcrumb]
-			})
+		/* @__PURE__ */ jsx(NavigationBreadcrumbs, {
+			viewTitle,
+			viewModel
 		}, "breadcrumbs"),
-		/* @__PURE__ */ jsxs(m$1.div, {
+		/* @__PURE__ */ jsxs(m.div, {
 			layout: "size",
 			className: hstack({
 				gap: "1.5",
@@ -152,15 +68,21 @@ const NavigationPanelControls = memo(() => {
 				flexGrow: 0
 			}),
 			children: [
-				/* @__PURE__ */ jsx(ViewDetailsButton, { onOpen: () => actor.closeDropdown() }, "details"),
+				hasModel && /* @__PURE__ */ jsx(ViewDetailsButton, {
+					linksCount,
+					onOpen: () => actor.closeDropdown()
+				}, "details"),
 				enableVscode && /* @__PURE__ */ jsx(OpenSource, {}, "open-source"),
 				editBtnVisible && /* @__PURE__ */ jsx(ToggleReadonly, {
 					disabled: editBtnDisabled,
 					isReadOnly
 				}, "toggle-readonly"),
 				enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
-				isElementView && /* @__PURE__ */ jsx(ElementViewControls, {}, "element-view-controls"),
-				enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+				isElementView && /* @__PURE__ */ jsx(ElementViewControls, {
+					elementViewVariant,
+					disabled: isComparing || isEditing
+				}, "element-view-controls"),
+				enableSearch && !isComparing && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
 				/* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
 			]
 		}, "actions")
@@ -168,5 +90,4 @@ const NavigationPanelControls = memo(() => {
 });
 NavigationPanelControls.displayName = "NavigationPanelControls";
 
-//#endregion
 export { NavigationPanelControls };

package/dist/navigationpanel/NavigationPanelDropdown.mjs

@@ -1,17 +1,17 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import IconChevronRight from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
-import IconSearch from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
-import IconFolderFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.mjs";
-import { useOnDiagramEvent } from "../hooks/useDiagram.mjs";
+import IconChevronRight from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconFolderFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.mjs";
+import IconSearch from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
+import { EmptyBox } from "../components/EmptyBox.mjs";
+import { ErrorBoundary } from "../components/ErrorFallback.mjs";
+import { NavigationLink } from "../components/NavigationLink.mjs";
+import { viewIcon } from "../components/ViewIcon.mjs";
 import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
+import { useOnDiagramEvent } from "../hooks/useDiagram.mjs";
 import { useLikeC4Model } from "../hooks/useLikeC4Model.mjs";
 import { Tooltip as Tooltip$1 } from "./_common.mjs";
-import { selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector } from "./hooks.mjs";
-import { EmptyBox } from "../components/EmptyBox.mjs";
-import { viewIcon } from "../components/ViewIcon.mjs";
-import { breadcrumbTitle } from "./styles.css.mjs";
-import { NavigationLink } from "../components/NavigationLink.mjs";
 import { ProjectsMenu } from "./dropdown/ProjectsMenu.mjs";
+import { selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector } from "./hooks.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { memo, useDeferredValue, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -24,8 +24,9 @@ import { useThrottledCallback, useUncontrolled } from "@mantine/hooks";
 import { Box as Box$1, HStack, VStack } from "@likec4/styles/jsx";
 import { VIEW_FOLDERS_SEPARATOR, normalizeViewPath } from "@likec4/core/model";
 import { hstack, vstack } from "@likec4/styles/patterns";
+import { navigationPanel } from "@likec4/styles/recipes";
 
-//#region src/navigationpanel/NavigationPanelDropdown.tsx
+// src/navigationpanel/NavigationPanelDropdown.tsx
 const scopedKeydownHandler = createScopedKeydownHandler({
 	siblingSelector: "[data-likec4-focusable]",
 	parentSelector: "[data-likec4-breadcrumbs-dropdown]",
@@ -53,7 +54,7 @@ const NavigationPanelDropdown = memo(() => {
 			value
 		});
 	}, 250);
-	return /* @__PURE__ */ jsxs(PopoverDropdown, {
+	return /* @__PURE__ */ jsx(PopoverDropdown, {
 		className: cx("nowheel", vstack({
 			layerStyle: "likec4.dropdown",
 			gap: "xs",
@@ -62,24 +63,28 @@ const NavigationPanelDropdown = memo(() => {
 		"data-likec4-breadcrumbs-dropdown": true,
 		onMouseLeave: () => actor.send({ type: "dropdown.mouseLeave" }),
 		onMouseEnter: () => actor.send({ type: "dropdown.mouseEnter" }),
-		children: [
-			/* @__PURE__ */ jsx(ProjectsMenu, {}),
-			/* @__PURE__ */ jsx(HStack, {
-				gap: "xs",
-				children: /* @__PURE__ */ jsx(SearchInput, {
-					defaultValue: searchQuery,
-					onChange: setSearchQuery
+		children: /* @__PURE__ */ jsxs(ErrorBoundary, {
+			variant: "message",
+			onReset: () => actor.closeDropdown(),
+			children: [
+				/* @__PURE__ */ jsx(ProjectsMenu, {}),
+				/* @__PURE__ */ jsx(HStack, {
+					gap: "xs",
+					children: /* @__PURE__ */ jsx(SearchInput, {
+						defaultValue: searchQuery,
+						onChange: setSearchQuery
+					})
+				}),
+				/* @__PURE__ */ jsx(ScrollAreaAutosize, {
+					scrollbars: "x",
+					type: "auto",
+					offsetScrollbars: "present",
+					classNames: { root: css({ maxWidth: ["[calc(100vw - 50px)]", "[calc(100cqw - 50px)]"] }) },
+					styles: { viewport: { overscrollBehavior: "none" } },
+					children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, {}) : /* @__PURE__ */ jsx(FolderColumns, {})
 				})
-			}),
-			/* @__PURE__ */ jsx(ScrollAreaAutosize, {
-				scrollbars: "x",
-				type: "auto",
-				offsetScrollbars: "present",
-				classNames: { root: css({ maxWidth: ["[calc(100vw - 50px)]", "[calc(100cqw - 50px)]"] }) },
-				styles: { viewport: { overscrollBehavior: "none" } },
-				children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, {}) : /* @__PURE__ */ jsx(FolderColumns, {})
-			})
-		]
+			]
+		})
 	});
 });
 NavigationPanelDropdown.displayName = "NavigationPanelDropdown";
@@ -152,12 +157,13 @@ const inheritColor = css({ _groupFocus: {
 	color: "[inherit!]",
 	transition: "none"
 } });
+const breadcrumbTitle = navigationPanel().breadcrumb;
 function FoundedView({ view, highlight, ...props }) {
 	const folder = view.folder;
 	const icon = viewIcon(view.id === "index" ? "index" : view._type);
 	const viewLabel = /* @__PURE__ */ jsx(Highlight, {
 		component: "div",
-		className: cx(inheritColor, breadcrumbTitle({ truncate: true }), css({ "& > mark": {
+		className: cx(inheritColor, breadcrumbTitle, css({ "& > mark": {
 			backgroundColor: {
 				base: "highlight.body/80",
 				_groupFocus: "transparent"
@@ -176,10 +182,8 @@ function FoundedView({ view, highlight, ...props }) {
 	});
 	const breadcrumbs = folder.breadcrumbs.map((b) => /* @__PURE__ */ jsx(Highlight, {
 		component: "div",
-		className: cx(css({ _groupHover: { color: "text.dimmed" } }), inheritColor, breadcrumbTitle({
-			dimmed: true,
-			truncate: true
-		})),
+		"data-dimmed": "true",
+		className: cx(css({ _groupHover: { color: "text.dimmed" } }), inheritColor, breadcrumbTitle),
 		maw: 170,
 		highlight: isArray(highlight) ? highlight : [],
 		children: b.title
@@ -371,5 +375,4 @@ function SearchInput(props) {
 	});
 }
 
-//#endregion
 export { NavigationPanelDropdown };

package/dist/navigationpanel/_common.mjs

@@ -1,12 +1,12 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { css, cx } from "@likec4/styles/css";
+import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ActionIcon, Breadcrumbs, ThemeIcon, Tooltip } from "@mantine/core";
+import { ActionIcon, ThemeIcon, Tooltip } from "@mantine/core";
 import * as m from "motion/react-m";
 import { navigationPanelActionIcon } from "@likec4/styles/recipes";
 
-//#region src/navigationpanel/_common.tsx
+// src/navigationpanel/_common.tsx
 const Tooltip$1 = Tooltip.withProps({
 	color: "dark",
 	fz: "xs",
@@ -46,5 +46,4 @@ const PanelActionIcon = forwardRef(({ variant = "default", className, disabled =
 	return content;
 });
 
-//#endregion
 export { PanelActionIcon, Tooltip$1 as Tooltip };

package/dist/navigationpanel/actor.actions.mjs

@@ -4,7 +4,7 @@ import { actor } from "./actor.setup.mjs";
 import { isNonNullish } from "remeda";
 import { assertEvent } from "xstate";
 
-//#region src/navigationpanel/actor.actions.ts
+// src/navigationpanel/actor.actions.ts
 const updateActivatedBy = () => actor.assign({ activatedBy: ({ context, event }) => {
 	switch (true) {
 		case event.type.includes("click"): return "click";
@@ -47,5 +47,4 @@ const emitNavigateTo = () => actor.enqueueActions(({ event, enqueue }) => {
 	});
 });
 
-//#endregion
 export { emitNavigateTo, keepDropdownOpen, resetSearchQuery, resetSelectedFolder, updateActivatedBy, updateInputs, updateSearchQuery, updateSelectedFolder };

package/dist/navigationpanel/actor.d.mts

@@ -1,7 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { Context, Events, Input, Tags } from "./actor.setup.mjs";
 import { ActorRef, SnapshotFrom, StateMachine, StateValueFrom } from "xstate";
-//#region src/navigationpanel/actor.d.ts
 declare const _actorLogic: StateMachine<Context, Events, {}, never, never, {
   type: "was opened on hover";
   params: unknown;
@@ -33,5 +32,4 @@ declare const _actorLogic: StateMachine<Context, Events, {}, never, never, {
 export interface NavigationPanelActorLogic extends StateMachine<Context, Events, any, any, any, any, any, StateValueFrom<typeof _actorLogic>, Tags, Input, any, any, any, any> {}
 export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
 export interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, Events, never> {}
-//#endregion
 export type { Context as NavigationPanelActorContext, Events as NavigationPanelActorEvent, Input as NavigationPanelActorInput };

package/dist/navigationpanel/actor.mjs

@@ -1,9 +1,9 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { Context, actor } from "./actor.setup.mjs";
 import { emitNavigateTo, keepDropdownOpen, resetSearchQuery, resetSelectedFolder, updateActivatedBy, updateInputs, updateSearchQuery, updateSelectedFolder } from "./actor.actions.mjs";
+import { Context, actor } from "./actor.setup.mjs";
 import { raise } from "xstate";
 
-//#region src/navigationpanel/actor.ts
+// src/navigationpanel/actor.ts
 const _actorLogic = actor.createMachine({
 	id: "navigationPanel",
 	context: ({ input }) => Context({ input }),
@@ -93,5 +93,4 @@ const _actorLogic = actor.createMachine({
 });
 const navigationPanelActorLogic = _actorLogic;
 
-//#endregion
 export { navigationPanelActorLogic };

package/dist/navigationpanel/actor.setup.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { ViewId } from "@likec4/core/types";
-//#region src/navigationpanel/actor.setup.d.ts
 export interface Input {
   viewId: ViewId;
   viewFolder: string;
@@ -69,5 +68,4 @@ export interface Context {
 export type Tags = 'active';
 export declare function Context({ input }: {
   input: Input;
-}): Context;
-//#endregion
+}): Context;

package/dist/navigationpanel/actor.setup.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { isEmpty } from "remeda";
 import { setup } from "xstate";
 
-//#region src/navigationpanel/actor.setup.ts
+// src/navigationpanel/actor.setup.ts
 function Context({ input }) {
 	return {
 		viewId: input.viewId,
@@ -30,5 +30,4 @@ const actor = setup({
 	}
 });
 
-//#endregion
 export { Context, actor };