@likec4/diagram 1.55.1 → 1.57.0

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,502 +1,390 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { VIEW_FOLDERS_SEPARATOR, normalizeViewPath } from '@likec4/core/model';
-import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core/utils';
-import { css, cx } from '@likec4/styles/css';
-import { HStack, VStack, Box } from '@likec4/styles/jsx';
-import { vstack, hstack } from '@likec4/styles/patterns';
-import { PopoverDropdown, ScrollAreaAutosize, Input, Button, rem, Divider, createScopedKeydownHandler, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
-import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
-import { useMountEffect } from '@react-hookz/web';
-import { useSelector } from '@xstate/react';
-import { shallowEqual, deepEqual } from 'fast-equals';
-import { memo, useDeferredValue, useState, useEffect, useRef } from 'react';
-import { isEmpty, pipe, sort, isArray } from 'remeda';
-import { NavigationLink } from '../components/NavigationLink.js';
-import { useOnDiagramEvent } from '../hooks/useDiagram.js';
-import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
-import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
-import { useNavigationActor, useNavigationActorSnapshot, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
-import { breadcrumbTitle } from './styles.css.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
-import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
-import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-
-const scopedKeydownHandler = createScopedKeydownHandler({
-  siblingSelector: "[data-likec4-focusable]",
-  parentSelector: "[data-likec4-breadcrumbs-dropdown]",
-  activateOnFocus: false,
-  loop: true,
-  orientation: "vertical"
+import "../_virtual/_rolldown/runtime.js";
+import { useOnDiagramEvent } from "../hooks/useDiagram.js";
+import { useLikeC4Model } from "../hooks/useLikeC4Model.js";
+import { useNavigationActor, useNavigationActorContext, useNavigationActorRef, useNavigationActorSnapshot } 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, rem } 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"
 });
 function hasSearchQuerySelector(s) {
-  return s.context.searchQuery.trim().length >= 2;
+	return s.context.searchQuery.trim().length >= 2;
 }
-const NavigationPanelDropdown = memo(() => {
-  const actor = useNavigationActor();
-  const hasSearchQuery = useNavigationActorSnapshot(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, {})
-          }
-        )
-      ]
-    }
-  );
+var NavigationPanelDropdown = memo(() => {
+	const actor = useNavigationActor();
+	const hasSearchQuery = useNavigationActorSnapshot(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);
+	return normalizeViewPath(s.context.searchQuery);
 }
-const compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
-const 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 compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
+var SearchResults = memo(() => {
+	const likec4model = useLikeC4Model();
+	const actor = useNavigationActor();
+	const deferredSearchQuery = useDeferredValue(useSelector(actor.actorRef, selectSearchQuery));
+	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))
+		})
+	});
 });
-const foundedViewClass = hstack({
-  gap: "xxs",
-  rounded: "sm",
-  px: "xs",
-  py: "xxs",
-  _hover: {
-    backgroundColor: {
-      base: "mantine.colors.gray[1]",
-      _dark: "mantine.colors.dark[5]"
-    }
-  },
-  _focus: {
-    outline: "none",
-    color: "mantine.colors.primary.lightColor!",
-    backgroundColor: "mantine.colors.primary.lightHover!"
-  }
-});
-const inheritColor = css({
-  _groupFocus: {
-    color: "[inherit!]",
-    transition: "none"
-  }
+var foundedViewClass = hstack({
+	gap: "xxs",
+	rounded: "sm",
+	px: "xs",
+	py: "xxs",
+	_hover: { backgroundColor: {
+		base: "mantine.colors.gray[1]",
+		_dark: "mantine.colors.dark[5]"
+	} },
+	_focus: {
+		outline: "none",
+		color: "mantine.colors.primary.lightColor!",
+		backgroundColor: "mantine.colors.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.colors.yellow[2]/90",
-              _dark: "mantine.colors.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 })
-      ]
-    }
-  );
+	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.colors.yellow[2]/90",
+				_dark: "mantine.colors.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
+		})]
+	});
 }
-const btnRightSection = /* @__PURE__ */ jsx(IconChevronRight, { size: 12, stroke: 1.5, className: "mantine-rotate-rtl" });
-const folderIcon = /* @__PURE__ */ jsx(
-  IconFolderFilled,
-  {
-    size: 16,
-    className: css({
-      opacity: {
-        base: 0.3,
-        _groupHover: 0.5,
-        _groupActive: 0.5,
-        _groupFocus: 0.5
-      }
-    })
-  }
-);
-const viewTypeIconCss = css({
-  opacity: {
-    base: 0.3,
-    _dark: 0.5,
-    _groupHover: 0.8,
-    _groupActive: 0.8,
-    _groupFocus: 0.8
-  }
+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
+	} })
 });
-const 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 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
+	})
 };
-const ColumnScrollArea = ScrollAreaAutosize.withProps({
-  scrollbars: "y",
-  className: css({
-    maxHeight: [
-      "calc(100vh - 160px)",
-      "calc(100cqh - 160px)"
-    ]
-  })
+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
-      }))
-    ]
-  };
+	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
+		}))]
+	};
 }
-const selectColumns = (context) => {
-  const viewModel = context.viewModel;
-  if (!viewModel) {
-    return [];
-  }
-  const likec4model = viewModel.$model;
-  const columns = [
-    folderColumn(likec4model.rootViewFolder, context)
-  ];
-  const folder = likec4model.viewFolder(context.selectedFolder);
-  if (!folder.isRoot) {
-    for (const b of folder.breadcrumbs) {
-      columns.push(folderColumn(b, context));
-    }
-  }
-  return columns;
+var selectColumns = (context) => {
+	const viewModel = context.viewModel;
+	if (!viewModel) return [];
+	const likec4model = viewModel.$model;
+	const columns = [folderColumn(likec4model.rootViewFolder, context)];
+	const folder = likec4model.viewFolder(context.selectedFolder);
+	if (!folder.isRoot) for (const b of folder.breadcrumbs) columns.push(folderColumn(b, context));
+	return columns;
 };
-const FolderColumns = memo(() => {
-  const columns = useNavigationActorContext(selectColumns, deepEqual);
-  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
-    )
-  ]) });
+var FolderColumns = memo(() => {
+	const columns = useNavigationActorContext(selectColumns, deepEqual);
+	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, { 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}`
-  )) }) }) });
+	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(
-        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);
-  }
+	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(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: rem(26),
-      value: _value,
-      onKeyDown: scopedKeydownHandler,
-      onChange: (e) => handleChange(e.currentTarget.value),
-      "data-likec4-focusable": true,
-      classNames: {
-        wrapper: css({
-          flexGrow: 1,
-          backgroundColor: {
-            base: "mantine.colors.gray[1]",
-            _dark: "mantine.colors.dark[5]/80",
-            _hover: {
-              base: "mantine.colors.gray[2]",
-              _dark: "mantine.colors.dark[4]"
-            },
-            _focus: {
-              base: "mantine.colors.gray[2]",
-              _dark: "mantine.colors.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"
-        }
-      )
-    }
-  );
+	const [_value, handleChange] = useUncontrolled({
+		...props,
+		finalValue: ""
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		size: "xs",
+		placeholder: "Search by title or id",
+		variant: "unstyled",
+		height: rem(26),
+		value: _value,
+		onKeyDown: scopedKeydownHandler,
+		onChange: (e) => handleChange(e.currentTarget.value),
+		"data-likec4-focusable": true,
+		classNames: {
+			wrapper: css({
+				flexGrow: 1,
+				backgroundColor: {
+					base: "mantine.colors.gray[1]",
+					_dark: "mantine.colors.dark[5]/80",
+					_hover: {
+						base: "mantine.colors.gray[2]",
+						_dark: "mantine.colors.dark[4]"
+					},
+					_focus: {
+						base: "mantine.colors.gray[2]",
+						_dark: "mantine.colors.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 };