@likec4/diagram 1.59.3 → 1.60.0

package/dist/navigationpanel/NavigationPanelControls.js

@@ -1,128 +0,0 @@
-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"
-	};
-};
-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 };

package/dist/navigationpanel/NavigationPanelDropdown.d.ts

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

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,398 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { useOnDiagramEvent } from "../hooks/useDiagram.js";
-import { useLikeC4Model } from "../hooks/useLikeC4Model.js";
-import { Tooltip as Tooltip$1 } from "./_common.js";
-import { selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector } from "./hooks.js";
-import { breadcrumbTitle } from "./styles.css.js";
-import { NavigationLink } from "../components/NavigationLink.js";
-import { ProjectsMenu } from "./dropdown/ProjectsMenu.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconChevronRight, IconDirectionSignFilled, IconFolderFilled, IconSearch, IconStack2, IconStarFilled, IconZoomScan } from "@tabler/icons-react";
-import { memo, useDeferredValue, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMountEffect } from "@react-hookz/web";
-import { deepEqual, shallowEqual } from "fast-equals";
-import { isArray, isEmpty, pipe, sort } from "remeda";
-import { Breadcrumbs, Button, Divider, Highlight, Input, PopoverDropdown, ScrollAreaAutosize, UnstyledButton, createScopedKeydownHandler } from "@mantine/core";
-import { compareNaturalHierarchically, ifilter, ifirst, nonexhaustive, toArray } from "@likec4/core/utils";
-import { useSelector } from "@xstate/react";
-import { useThrottledCallback, useUncontrolled } from "@mantine/hooks";
-import { Box as Box$1, HStack, VStack } from "@likec4/styles/jsx";
-import { hstack, vstack } from "@likec4/styles/patterns";
-import { VIEW_FOLDERS_SEPARATOR, normalizeViewPath } from "@likec4/core/model";
-//#region src/navigationpanel/NavigationPanelDropdown.tsx
-var scopedKeydownHandler = createScopedKeydownHandler({
-	siblingSelector: "[data-likec4-focusable]",
-	parentSelector: "[data-likec4-breadcrumbs-dropdown]",
-	activateOnFocus: false,
-	loop: true,
-	orientation: "vertical"
-});
-var hasSearchQuerySelector = selectNavigationContext((s) => s.searchQuery.trim().length >= 2);
-var NavigationPanelDropdown = memo(() => {
-	const actor = useNavigationActor();
-	const hasSearchQuery = useNavigationActorSelector(hasSearchQuerySelector);
-	useOnDiagramEvent("paneClick", () => {
-		actor.closeDropdown();
-	});
-	useOnDiagramEvent("nodeClick", () => {
-		actor.closeDropdown();
-	});
-	useOnDiagramEvent("edgeClick", () => {
-		actor.closeDropdown();
-	});
-	const setSearchQuery = useThrottledCallback((value) => {
-		actor.send({
-			type: "searchQuery.change",
-			value
-		});
-	}, 250);
-	return /* @__PURE__ */ jsxs(PopoverDropdown, {
-		className: cx("nowheel", vstack({
-			layerStyle: "likec4.dropdown",
-			gap: "xs",
-			pointerEvents: "all"
-		})),
-		"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: actor.actorRef.getSnapshot().context.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, {})
-			})
-		]
-	});
-});
-NavigationPanelDropdown.displayName = "NavigationPanelDropdown";
-function selectSearchQuery(s) {
-	return normalizeViewPath(s.context.searchQuery);
-}
-var compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
-var SearchResults = memo(() => {
-	const likec4model = useLikeC4Model();
-	const actor = useNavigationActor();
-	const searchQuery = useSelector(actor.actorRef, selectSearchQuery);
-	const deferredSearchQuery = useDeferredValue(searchQuery);
-	const isSearchByPath = deferredSearchQuery.includes(VIEW_FOLDERS_SEPARATOR);
-	const highlight = isSearchByPath ? deferredSearchQuery.split(VIEW_FOLDERS_SEPARATOR) : deferredSearchQuery;
-	const [found, setFound] = useState([]);
-	useEffect(() => {
-		setFound((current) => {
-			const results = pipe(likec4model.views(), ifilter((v) => {
-				if (isSearchByPath && v.$view.title) return normalizeViewPath(v.$view.title).toLowerCase().includes(deferredSearchQuery);
-				return v.id.toLowerCase().includes(deferredSearchQuery) || !!v.title?.toLowerCase().includes(deferredSearchQuery);
-			}), ifirst(20), toArray(), sort((a, b) => compare(a.folder.path, b.folder.path)));
-			return shallowEqual(results, current) ? current : results;
-		});
-	}, [
-		likec4model,
-		deferredSearchQuery,
-		isSearchByPath
-	]);
-	if (found.length === 0) return /* @__PURE__ */ jsx("div", { children: "no results" });
-	return /* @__PURE__ */ jsx(ScrollAreaAutosize, {
-		scrollbars: "xy",
-		offsetScrollbars: false,
-		className: css({
-			width: "100%",
-			maxWidth: ["[calc(100vw - 250px)]", "[calc(100cqw - 250px)]"],
-			maxHeight: ["[calc(100vh - 200px)]", "[calc(100cqh - 200px)]"]
-		}),
-		children: /* @__PURE__ */ jsx(VStack, {
-			gap: "0.5",
-			children: found.map((v) => /* @__PURE__ */ jsx(FoundedView, {
-				view: v,
-				highlight,
-				onClick: (e) => {
-					e.stopPropagation();
-					actor.selectView(v.id);
-				},
-				"data-likec4-focusable": true,
-				onKeyDown: scopedKeydownHandler
-			}, v.id))
-		})
-	});
-});
-var foundedViewClass = hstack({
-	gap: "xxs",
-	rounded: "sm",
-	px: "xs",
-	py: "xxs",
-	_hover: { backgroundColor: {
-		base: "mantine.gray[1]",
-		_dark: "mantine.dark[5]"
-	} },
-	_focus: {
-		outline: "none",
-		color: "mantine.primary.lightColor!",
-		backgroundColor: "mantine.primary.lightHover!"
-	}
-});
-var inheritColor = css({ _groupFocus: {
-	color: "[inherit!]",
-	transition: "none"
-} });
-function FoundedView({ view, highlight, ...props }) {
-	const folder = view.folder;
-	const viewIcon = ViewTypeIcon[view.id === "index" ? "index" : view._type];
-	const viewLabel = /* @__PURE__ */ jsx(Highlight, {
-		component: "div",
-		className: cx(inheritColor, breadcrumbTitle({ truncate: true }), css({ "& > mark": {
-			backgroundColor: {
-				base: "mantine.yellow[2]/90",
-				_dark: "mantine.yellow[5]/80",
-				_groupFocus: "[transparent]"
-			},
-			color: { _groupFocus: "[inherit!]" }
-		} })),
-		maw: 350,
-		highlight,
-		children: view.title ?? view.id
-	}, view.id);
-	const className = cx(props.className, "group", foundedViewClass);
-	if (folder.isRoot) return /* @__PURE__ */ jsxs(UnstyledButton, {
-		...props,
-		className,
-		children: [viewIcon, viewLabel]
-	});
-	const breadcrumbs = folder.breadcrumbs.map((b) => /* @__PURE__ */ jsx(Highlight, {
-		component: "div",
-		className: cx(css({ _groupHover: { color: "text.dimmed" } }), inheritColor, breadcrumbTitle({
-			dimmed: true,
-			truncate: true
-		})),
-		maw: 170,
-		highlight: isArray(highlight) ? highlight : [],
-		children: b.title
-	}, b.path));
-	breadcrumbs.push(/* @__PURE__ */ jsxs(HStack, {
-		gap: "[4px]",
-		children: [viewIcon, viewLabel]
-	}));
-	return /* @__PURE__ */ jsxs(UnstyledButton, {
-		...props,
-		className,
-		children: [folderIcon, /* @__PURE__ */ jsx(Breadcrumbs, {
-			separator: btnRightSection,
-			separatorMargin: 3,
-			children: breadcrumbs
-		})]
-	});
-}
-var btnRightSection = /* @__PURE__ */ jsx(IconChevronRight, {
-	size: 12,
-	stroke: 1.5,
-	className: "mantine-rotate-rtl"
-});
-var folderIcon = /* @__PURE__ */ jsx(IconFolderFilled, {
-	size: 16,
-	className: css({ opacity: {
-		base: .3,
-		_groupHover: .5,
-		_groupActive: .5,
-		_groupFocus: .5
-	} })
-});
-var viewTypeIconCss = css({ opacity: {
-	base: .3,
-	_dark: .5,
-	_groupHover: .8,
-	_groupActive: .8,
-	_groupFocus: .8
-} });
-var ViewTypeIcon = {
-	index: /* @__PURE__ */ jsx(IconStarFilled, {
-		size: 16,
-		className: viewTypeIconCss
-	}),
-	element: /* @__PURE__ */ jsx(IconZoomScan, {
-		size: 18,
-		stroke: 2,
-		className: viewTypeIconCss
-	}),
-	deployment: /* @__PURE__ */ jsx(IconStack2, {
-		size: 16,
-		stroke: 1.5,
-		className: viewTypeIconCss
-	}),
-	dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, {
-		size: 18,
-		className: viewTypeIconCss
-	})
-};
-var ColumnScrollArea = ScrollAreaAutosize.withProps({
-	scrollbars: "y",
-	className: css({ maxHeight: ["[calc(100vh - 160px)]", "[calc(100cqh - 160px)]"] })
-});
-function folderColumn(folder, context) {
-	return {
-		folderPath: folder.path,
-		items: [...folder.folders.map((s) => ({
-			type: "folder",
-			folderPath: s.path,
-			title: s.title,
-			selected: context.selectedFolder.startsWith(s.path)
-		})), ...folder.views.map((s) => ({
-			type: "view",
-			viewType: s.id === "index" ? "index" : s._type,
-			viewId: s.id,
-			title: s.title ?? s.id,
-			description: s.description.nonEmpty && s.description.text || null,
-			selected: s.id === context.viewModel?.id
-		}))]
-	};
-}
-var selectColumns = selectNavigationContext((ctx) => {
-	const viewModel = ctx.viewModel;
-	if (!viewModel) return [];
-	const likec4model = viewModel.$model;
-	const columns = [folderColumn(likec4model.rootViewFolder, ctx)];
-	const folder = likec4model.viewFolder(ctx.selectedFolder);
-	if (!folder.isRoot) for (const b of folder.breadcrumbs) columns.push(folderColumn(b, ctx));
-	return columns;
-}, deepEqual);
-var FolderColumns = memo(() => {
-	const columns = useNavigationActorSelector(selectColumns);
-	return /* @__PURE__ */ jsx(HStack, {
-		gap: "xs",
-		alignItems: "stretch",
-		children: columns.flatMap((column, i) => [i > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, "divider" + i), /* @__PURE__ */ jsx(FolderColumn, {
-			data: column,
-			isLast: i > 0 && i == columns.length - 1
-		}, column.folderPath)])
-	});
-});
-function FolderColumn({ data, isLast }) {
-	const ref = useRef(null);
-	const actor = useNavigationActorRef();
-	const onItemClicked = (item) => (e) => {
-		e.stopPropagation();
-		if (item.type === "folder") actor.send({
-			type: "select.folder",
-			folderPath: item.folderPath
-		});
-		else actor.send({
-			type: "select.view",
-			viewId: item.viewId
-		});
-	};
-	useMountEffect(() => {
-		if (isLast && ref.current) ref.current.scrollIntoView({
-			block: "nearest",
-			inline: "nearest",
-			behavior: "smooth"
-		});
-	});
-	return /* @__PURE__ */ jsx(Box$1, {
-		mb: "1",
-		ref,
-		children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, {
-			gap: "0.5",
-			children: data.items.map((item, i) => /* @__PURE__ */ jsx(FolderColumnItem, {
-				columnItem: item,
-				onClick: onItemClicked(item)
-			}, `${data.folderPath}/${item.type}/${i}`))
-		}) })
-	});
-}
-function FolderColumnItem({ columnItem, ...props }) {
-	switch (columnItem.type) {
-		case "folder": return /* @__PURE__ */ jsx(NavigationLink, {
-			variant: "light",
-			active: columnItem.selected,
-			label: columnItem.title,
-			leftSection: folderIcon,
-			rightSection: btnRightSection,
-			maw: "300px",
-			miw: "200px",
-			...props
-		}, columnItem.folderPath);
-		case "view": return /* @__PURE__ */ jsx(Tooltip$1, {
-			label: columnItem.description,
-			disabled: !columnItem.description,
-			multiline: true,
-			w: 260,
-			withinPortal: true,
-			position: "left",
-			children: /* @__PURE__ */ jsx(NavigationLink, {
-				variant: "filled",
-				active: columnItem.selected,
-				label: columnItem.title,
-				description: columnItem.description,
-				leftSection: ViewTypeIcon[columnItem.viewType],
-				maw: "300px",
-				miw: "200px",
-				...props
-			}, columnItem.viewId)
-		});
-		default: nonexhaustive(columnItem);
-	}
-}
-function SearchInput(props) {
-	const [_value, handleChange] = useUncontrolled({
-		...props,
-		finalValue: ""
-	});
-	return /* @__PURE__ */ jsx(Input, {
-		size: "xs",
-		placeholder: "Search by title or id",
-		variant: "unstyled",
-		height: 26,
-		value: _value,
-		onKeyDown: scopedKeydownHandler,
-		onChange: (e) => handleChange(e.currentTarget.value),
-		"data-likec4-focusable": true,
-		classNames: {
-			wrapper: css({
-				flexGrow: 1,
-				backgroundColor: {
-					base: "mantine.gray[1]",
-					_dark: "mantine.dark[5]/80",
-					_hover: {
-						base: "mantine.gray[2]",
-						_dark: "mantine.dark[4]"
-					},
-					_focus: {
-						base: "mantine.gray[2]",
-						_dark: "mantine.dark[4]"
-					}
-				},
-				rounded: "sm"
-			}),
-			input: css({
-				_placeholder: { color: "text.dimmed" },
-				_focus: { outline: "none" }
-			})
-		},
-		style: { ["--input-fz"]: "var(--mantine-font-size-sm)" },
-		leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 14 }),
-		rightSectionPointerEvents: "all",
-		rightSectionWidth: "min-content",
-		rightSection: !props.value || isEmpty(props.value) ? null : /* @__PURE__ */ jsx(Button, {
-			variant: "subtle",
-			h: "100%",
-			size: "compact-xs",
-			color: "gray",
-			onClick: (e) => {
-				e.stopPropagation();
-				handleChange("");
-			},
-			children: "clear"
-		})
-	});
-}
-//#endregion
-export { NavigationPanelDropdown };

package/dist/navigationpanel/_common.d.ts

@@ -1,9 +0,0 @@
-import { NavigationPanelActionIconVariant } from '../../styled-system/recipes';
-import { ActionIconProps, TooltipProps, PlaceholderPolymorphicProps, BreadcrumbsProps } from '@mantine/core';
-import { HTMLMotionProps } from 'motion/react';
-import { NamedExoticComponent, RefAttributes, ForwardRefExoticComponent } from 'react';
-export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
-export declare const BreadcrumbsSeparator: () => import("react").JSX.Element;
-export declare const Breadcrumbs: NamedExoticComponent< BreadcrumbsProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
-export type PanelActionIconProps = Partial<NavigationPanelActionIconVariant> & Omit<ActionIconProps, keyof NavigationPanelActionIconVariant> & Omit<HTMLMotionProps<'button'>, keyof NavigationPanelActionIconVariant>;
-export declare const PanelActionIcon: ForwardRefExoticComponent<Omit<PanelActionIconProps, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dist/navigationpanel/_common.js

@@ -1,60 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconChevronRight } from "@tabler/icons-react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { ActionIcon, Breadcrumbs, ThemeIcon, Tooltip } from "@mantine/core";
-import * as m from "motion/react-m";
-import { navigationPanelActionIcon } from "@likec4/styles/recipes";
-//#region src/navigationpanel/_common.tsx
-var Tooltip$1 = Tooltip.withProps({
-	color: "dark",
-	fz: "xs",
-	openDelay: 600,
-	closeDelay: 120,
-	label: "",
-	children: null,
-	offset: 8,
-	withinPortal: false
-});
-var BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(ThemeIcon, {
-	variant: "transparent",
-	size: 16,
-	className: css({
-		display: {
-			base: "none",
-			"@/md": "flex"
-		},
-		color: {
-			base: "mantine.gray[5]",
-			_dark: "mantine.dark[3]"
-		}
-	}),
-	children: /* @__PURE__ */ jsx(IconChevronRight, {})
-});
-Breadcrumbs.withProps({
-	separator: /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}),
-	separatorMargin: 4
-});
-var PanelActionIcon = forwardRef(({ variant = "default", className, disabled = false, type, ...others }, ref) => /* @__PURE__ */ jsx(ActionIcon, {
-	size: "md",
-	variant: "transparent",
-	radius: "sm",
-	component: m.button,
-	...!disabled && {
-		whileHover: { scale: 1.085 },
-		whileTap: {
-			scale: 1,
-			translateY: 1
-		}
-	},
-	disabled,
-	...others,
-	className: cx(className, navigationPanelActionIcon({
-		variant,
-		type
-	})),
-	ref
-}));
-//#endregion
-export { BreadcrumbsSeparator, PanelActionIcon, Tooltip$1 as Tooltip };

package/dist/navigationpanel/actor.actions.d.ts

@@ -1,19 +0,0 @@
-import { ActionFunction, EventObject } from 'xstate';
-import { Context, Events } from './actor.setup';
-export declare const updateActivatedBy: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const keepDropdownOpen: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const updateSelectedFolder: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const resetSelectedFolder: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const updateInputs: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const resetSearchQuery: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const updateSearchQuery: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const emitNavigateTo: () => ActionFunction<Context, Events, Events, undefined, never, never, {
-    type: "was opened on hover";
-    params: unknown;
-} | {
-    type: "has search query";
-    params: unknown;
-} | {
-    type: "search query is empty";
-    params: unknown;
-}, "open timeout" | "close timeout", EventObject>;

package/dist/navigationpanel/actor.actions.js

@@ -1,45 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { typedSystem } from "../likec4diagram/state/utils.js";
-import { actor } from "./actor.setup.js";
-import { assertEvent } from "xstate";
-//#region src/navigationpanel/actor.actions.ts
-var updateActivatedBy = () => actor.assign({ activatedBy: ({ context, event }) => {
-	switch (true) {
-		case event.type.includes("click"): return "click";
-		case event.type.includes("mouseEnter"): return "hover";
-		default: return context.activatedBy;
-	}
-} });
-var keepDropdownOpen = () => actor.assign({ activatedBy: "click" });
-var updateSelectedFolder = () => actor.assign(({ event }) => {
-	if (event.type === "breadcrumbs.click.root") return { selectedFolder: "" };
-	assertEvent(event, ["breadcrumbs.click.folder", "select.folder"]);
-	return { selectedFolder: event.folderPath };
-});
-var resetSelectedFolder = () => actor.assign({ selectedFolder: ({ context }) => context.viewModel?.folder.path ?? "" });
-var updateInputs = () => actor.assign(({ context, event }) => {
-	assertEvent(event, "update.inputs");
-	const viewChanged = event.inputs.viewModel?.id !== context.viewModel?.id;
-	let selectedFolder = context.selectedFolder;
-	if (!event.inputs.viewModel?.folder.path.startsWith(selectedFolder)) selectedFolder = event.inputs.viewModel?.folder.path ?? "";
-	return {
-		view: event.inputs.view,
-		viewModel: event.inputs.viewModel,
-		selectedFolder,
-		activatedBy: viewChanged ? "hover" : context.activatedBy
-	};
-});
-var resetSearchQuery = () => actor.assign({ searchQuery: "" });
-var updateSearchQuery = () => actor.assign(({ event }) => {
-	assertEvent(event, "searchQuery.change");
-	return { searchQuery: event.value ?? "" };
-});
-var emitNavigateTo = () => actor.enqueueActions(({ event, enqueue }) => {
-	assertEvent(event, "select.view");
-	enqueue.sendTo(typedSystem.diagramActor, {
-		type: "navigate.to",
-		viewId: event.viewId
-	});
-});
-//#endregion
-export { emitNavigateTo, keepDropdownOpen, resetSearchQuery, resetSelectedFolder, updateActivatedBy, updateInputs, updateSearchQuery, updateSelectedFolder };