@likec4/diagram 1.55.1 → 1.57.0

package/dist/navigationpanel/NavigationPanelControls.js

@@ -1,154 +1,128 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { extractViewTitleFromPath } from '@likec4/core/model';
-import { cx, css } from '@likec4/styles/css';
-import { hstack } from '@likec4/styles/patterns';
-import { UnstyledButton } from '@mantine/core';
-import { useSelector } from '@xstate/react';
-import { deepEqual } from 'fast-equals';
-import { AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { memo } from 'react';
-import { useEnabledFeatures } from '../context/DiagramFeatures.js';
-import { BreadcrumbsSeparator } from './_common.js';
-import { useNavigationActor } from './hooks.js';
-import { breadcrumbTitle } from './styles.css.js';
-import { LogoButton } from './controls/LogoButton.js';
-import { NavigationButtons } from './controls/NavigationButtons.js';
-import { DetailsControls } from './controls/DetailsControls.js';
-import { OpenSource } from './controls/OpenSource.js';
-import { ToggleReadonly } from './controls/ToggleReadonly.js';
-import { DynamicViewControls } from './walkthrough/DynamicViewControls.js';
-import { SearchControl } from './controls/SearchControl.js';
-import { LayoutWarning } from './controls/LayoutWarning.js';
-
-const selectBreadcrumbs = ({ context }) => {
-  const view = context.view;
-  const folder = context.viewModel?.folder;
-  return {
-    folders: !folder || folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
-      folderPath: s.path,
-      title: s.title
-    })),
-    viewId: view.id,
-    viewTitle: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
-    isDynamicView: (context.viewModel?._type ?? view._type) === "dynamic"
-  };
+import "../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../context/DiagramFeatures.js";
+import { BreadcrumbsSeparator } from "./_common.js";
+import { useNavigationActor } from "./hooks.js";
+import { DetailsControls } from "./controls/DetailsControls.js";
+import { LayoutWarning } from "./controls/LayoutWarning.js";
+import { LogoButton } from "./controls/LogoButton.js";
+import { NavigationButtons } from "./controls/NavigationButtons.js";
+import { OpenSource } from "./controls/OpenSource.js";
+import { SearchControl } from "./controls/SearchControl.js";
+import { ToggleReadonly } from "./controls/ToggleReadonly.js";
+import { breadcrumbTitle } from "./styles.css.js";
+import { DynamicViewControls } from "./walkthrough/DynamicViewControls.js";
+import { css, cx } from "@likec4/styles/css";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+import { UnstyledButton } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { useSelector } from "@xstate/react";
+import { hstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+import { extractViewTitleFromPath } from "@likec4/core/model";
+//#region src/navigationpanel/NavigationPanelControls.tsx
+var selectBreadcrumbs = ({ context }) => {
+	const view = context.view;
+	const folder = context.viewModel?.folder;
+	return {
+		folders: !folder || folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
+			folderPath: s.path,
+			title: s.title
+		})),
+		viewId: view.id,
+		viewTitle: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
+		isDynamicView: (context.viewModel?._type ?? view._type) === "dynamic"
+	};
 };
-const NavigationPanelControls = memo(() => {
-  const actor = useNavigationActor();
-  const {
-    enableNavigationButtons,
-    enableDynamicViewWalkthrough,
-    enableCompareWithLatest,
-    enableSearch
-  } = useEnabledFeatures();
-  const {
-    folders,
-    viewTitle,
-    isDynamicView
-  } = useSelector(actor.actorRef, selectBreadcrumbs, deepEqual);
-  const folderBreadcrumbs = folders.flatMap(({ folderPath, title }, i) => [
-    /* @__PURE__ */ jsx(
-      UnstyledButton,
-      {
-        component: m.button,
-        className: cx(
-          breadcrumbTitle({ dimmed: true, truncate: true }),
-          "mantine-active",
-          css({
-            userSelect: "none",
-            maxWidth: "200px",
-            display: {
-              base: "none",
-              "@/md": "block"
-            }
-          })
-        ),
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        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(BreadcrumbsSeparator, {}, `separator-${i}`)
-  ]);
-  const viewBreadcrumb = /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      component: m.button,
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      className: cx(
-        "mantine-active",
-        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
-    },
-    "view-title"
-  );
-  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, mode: "popLayout", children: [
-    /* @__PURE__ */ jsx(LogoButton, {}, "logo-button"),
-    enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
-    /* @__PURE__ */ jsxs(
-      m.div,
-      {
-        layout: "position",
-        className: hstack({
-          gap: "1",
-          flexShrink: 1,
-          flexGrow: 1,
-          overflow: "hidden"
-        }),
-        children: [
-          folderBreadcrumbs,
-          viewBreadcrumb
-        ]
-      },
-      "breadcrumbs"
-    ),
-    /* @__PURE__ */ jsxs(
-      m.div,
-      {
-        layout: "position",
-        className: hstack({
-          gap: "0.5",
-          flexGrow: 0,
-          _empty: {
-            display: "none"
-          }
-        }),
-        children: [
-          /* @__PURE__ */ jsx(DetailsControls, { onOpen: () => actor.closeDropdown() }),
-          /* @__PURE__ */ jsx(OpenSource, {}),
-          /* @__PURE__ */ jsx(ToggleReadonly, {})
-        ]
-      },
-      "actions"
-    ),
-    enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
-    enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
-    /* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
-  ] });
+var NavigationPanelControls = memo(() => {
+	const actor = useNavigationActor();
+	const { enableNavigationButtons, enableDynamicViewWalkthrough, enableCompareWithLatest, enableSearch } = useEnabledFeatures();
+	const { folders, viewTitle, isDynamicView } = useSelector(actor.actorRef, selectBreadcrumbs, deepEqual);
+	const folderBreadcrumbs = folders.flatMap(({ folderPath, title }, i) => [/* @__PURE__ */ jsx(UnstyledButton, {
+		component: m$1.button,
+		className: cx(breadcrumbTitle({
+			dimmed: true,
+			truncate: true
+		}), "mantine-active", css({
+			userSelect: "none",
+			maxWidth: "200px",
+			display: {
+				base: "none",
+				"@/md": "block"
+			}
+		})),
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		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(BreadcrumbsSeparator, {}, `separator-${i}`)]);
+	const viewBreadcrumb = /* @__PURE__ */ jsx(UnstyledButton, {
+		component: m$1.button,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		className: cx("mantine-active", 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
+	}, "view-title");
+	return /* @__PURE__ */ jsxs(AnimatePresence, {
+		propagate: true,
+		mode: "popLayout",
+		children: [
+			/* @__PURE__ */ jsx(LogoButton, {}, "logo-button"),
+			enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
+			/* @__PURE__ */ jsxs(m$1.div, {
+				layout: "position",
+				className: hstack({
+					gap: "1",
+					flexShrink: 1,
+					flexGrow: 1,
+					overflow: "hidden"
+				}),
+				children: [folderBreadcrumbs, viewBreadcrumb]
+			}, "breadcrumbs"),
+			/* @__PURE__ */ jsxs(m$1.div, {
+				layout: "position",
+				className: hstack({
+					gap: "0.5",
+					flexGrow: 0,
+					_empty: { display: "none" }
+				}),
+				children: [
+					/* @__PURE__ */ jsx(DetailsControls, { onOpen: () => actor.closeDropdown() }),
+					/* @__PURE__ */ jsx(OpenSource, {}),
+					/* @__PURE__ */ jsx(ToggleReadonly, {})
+				]
+			}, "actions"),
+			enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
+			enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+			/* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
+		]
+	});
 });
 NavigationPanelControls.displayName = "NavigationPanelControls";
-
+//#endregion
 export { NavigationPanelControls };