@likec4/diagram 1.55.1 → 1.57.0

package/dist/search/components/ElementsColumn.js

@@ -1,299 +1,261 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ifilter, imap, toArray, isAncestor, stringHash, nameFromFqn } from '@likec4/core/utils';
-import { cx } from '@likec4/styles/css';
-import { Txt } from '@likec4/styles/jsx';
-import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip } from '@mantine/core';
-import * as m from 'motion/react-m';
-import { memo, useMemo, useEffect } from 'react';
-import { pipe, filter, hasAtLeast, reduce, only, first, last } from 'remeda';
-import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
-import { useCallbackRef } from '../../hooks/useCallbackRef.js';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useNormalizedSearch } from '../hooks.js';
-import { useSearchContext } from '../SearchContext.js';
-import { focusable, buttonsva } from './_shared.css.js';
-import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
-import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
-import { NothingFound } from './ViewsColum.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';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { IconOrShapeRenderer } from "../../context/IconRenderer.js";
+import { useCallbackRef } from "../../hooks/useCallbackRef.js";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+import { useSearchContext } from "../SearchContext.js";
+import { useNormalizedSearch } from "../hooks.js";
+import { buttonsva, focusable } from "./_shared.css.js";
+import { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree } from "./ElementsColumn.css.js";
+import { centerY, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent } from "./utils.js";
+import { NothingFound } from "./ViewsColum.js";
+import { cx } from "@likec4/styles/css";
+import { IconChevronRight } from "@tabler/icons-react";
+import { memo, useEffect, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { filter, first, hasAtLeast, last, only, pipe, reduce } from "remeda";
+import { ActionIcon, Box, Group, Highlight, Tooltip, Tree, UnstyledButton, useTree } from "@mantine/core";
+import { ifilter, imap, isAncestor, nameFromFqn, stringHash, toArray } from "@likec4/core/utils";
+import { Txt } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+//#region src/search/components/ElementsColumn.tsx
 function useElementsColumnData() {
-  const model = useLikeC4Model();
-  const allElements = useMemo(() => pipe(
-    model.elements(),
-    ifilter((i) => !i.imported),
-    imap((element) => ({
-      label: element.title,
-      value: element.id,
-      element,
-      // searchTerms,
-      viewsCount: [...element.views()].length,
-      children: []
-    })),
-    toArray()
-  ), [model]);
-  const search = useNormalizedSearch();
-  return useMemo(() => {
-    const searchTerms = search.split(".");
-    let elements;
-    if (search === "" || search === "kind:") {
-      elements = allElements;
-    } else if (search.startsWith("kind:")) {
-      const searchKind = search.slice(5);
-      elements = filter(allElements, ({ element }) => {
-        return element.kind.toLocaleLowerCase()[searchKind.length > 4 ? "startsWith" : "includes"](searchKind);
-      });
-    } else if (search.startsWith("#")) {
-      const searchTag = search.slice(1);
-      elements = filter(allElements, ({ element }) => {
-        return element.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
-      });
-    } else if (hasAtLeast(searchTerms, 2)) {
-      const satisfies = (element) => {
-        const fqnParts = element.id.toLocaleLowerCase().split(".");
-        if (fqnParts.length < searchTerms.length) {
-          return false;
-        }
-        let lastMatchIndex = 0;
-        for (let i = 0; i < fqnParts.length; i++) {
-          if (fqnParts[i].includes(searchTerms[lastMatchIndex])) {
-            lastMatchIndex++;
-            if (lastMatchIndex === searchTerms.length) {
-              return true;
-            }
-            continue;
-          }
-        }
-        return false;
-      };
-      elements = filter(allElements, ({ element }) => satisfies(element));
-    } else {
-      elements = filter(allElements, ({ element }) => {
-        const value = element.title + " " + element.name + " " + (element.summary.md || "");
-        return value.toLocaleLowerCase().includes(search);
-      });
-    }
-    const byid = {};
-    const { hash, all, roots } = pipe(
-      elements,
-      reduce((acc, treeItem) => {
-        treeItem.children = [];
-        byid[treeItem.value] = treeItem;
-        const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
-        if (parent) {
-          parent.children.push(treeItem);
-        } else {
-          acc.roots.push(treeItem);
-        }
-        acc.all.push(treeItem);
-        acc.hash = stringHash(acc.hash + treeItem.value);
-        return acc;
-      }, {
-        hash: "empty",
-        all: [],
-        roots: []
-      })
-    );
-    return {
-      hash,
-      all,
-      byid,
-      roots,
-      searchTerms: hasAtLeast(searchTerms, 1) ? searchTerms : [search]
-    };
-  }, [allElements, search]);
+	const model = useLikeC4Model();
+	const allElements = useMemo(() => pipe(model.elements(), ifilter((i) => !i.imported), imap((element) => ({
+		label: element.title,
+		value: element.id,
+		element,
+		viewsCount: [...element.views()].length,
+		children: [],
+		hasChildren: false
+	})), toArray()), [model]);
+	const search = useNormalizedSearch();
+	return useMemo(() => {
+		const searchTerms = search.split(".");
+		let elements;
+		if (search === "" || search === "kind:") elements = allElements;
+		else if (search.startsWith("kind:")) {
+			const searchKind = search.slice(5);
+			elements = filter(allElements, ({ element }) => {
+				return element.kind.toLocaleLowerCase()[searchKind.length > 4 ? "startsWith" : "includes"](searchKind);
+			});
+		} else if (search.startsWith("#")) {
+			const searchTag = search.slice(1);
+			elements = filter(allElements, ({ element }) => {
+				return element.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+			});
+		} else if (hasAtLeast(searchTerms, 2)) {
+			const satisfies = (element) => {
+				const fqnParts = element.id.toLocaleLowerCase().split(".");
+				if (fqnParts.length < searchTerms.length) return false;
+				let lastMatchIndex = 0;
+				for (let i = 0; i < fqnParts.length; i++) if (fqnParts[i].includes(searchTerms[lastMatchIndex])) {
+					lastMatchIndex++;
+					if (lastMatchIndex === searchTerms.length) return true;
+					continue;
+				}
+				return false;
+			};
+			elements = filter(allElements, ({ element }) => satisfies(element));
+		} else elements = filter(allElements, ({ element }) => {
+			return (element.title + " " + element.name + " " + (element.summary.md || "")).toLocaleLowerCase().includes(search);
+		});
+		const byid = {};
+		const { hash, all, roots } = pipe(elements, reduce((acc, treeItem) => {
+			treeItem.children = [];
+			treeItem.hasChildren = false;
+			byid[treeItem.value] = treeItem;
+			const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
+			if (parent) {
+				parent.children.push(treeItem);
+				parent.hasChildren = true;
+			} else acc.roots.push(treeItem);
+			acc.all.push(treeItem);
+			acc.hash = stringHash(acc.hash + treeItem.value);
+			return acc;
+		}, {
+			hash: "empty",
+			all: [],
+			roots: []
+		}));
+		return {
+			hash,
+			all,
+			byid,
+			roots,
+			searchTerms: hasAtLeast(searchTerms, 1) ? searchTerms : [search]
+		};
+	}, [allElements, search]);
 }
-const btn = buttonsva();
-const ElementsColumn = memo(() => {
-  const data = useElementsColumnData();
-  const handleClick = useHandleElementSelection();
-  if (data.all.length === 0) {
-    return /* @__PURE__ */ jsx(NothingFound, {});
-  }
-  return /* @__PURE__ */ jsx(ElementsTree, { data, handleClick });
+var btn = buttonsva();
+var ElementsColumn = memo(() => {
+	const data = useElementsColumnData();
+	const handleClick = useHandleElementSelection();
+	if (data.all.length === 0) return /* @__PURE__ */ jsx(NothingFound, {});
+	return /* @__PURE__ */ jsx(ElementsTree, {
+		data,
+		handleClick
+	});
 });
-const setHoveredNode = () => {
-};
-function ElementsTree({
-  data: {
-    searchTerms,
-    all,
-    byid,
-    hash,
-    roots
-  },
-  handleClick
-}) {
-  const tree = useTree({
-    multiple: false
-  });
-  tree.setHoveredNode = setHoveredNode;
-  useEffect(() => {
-    tree.collapseAllNodes();
-    for (const nd of all) {
-      if (nd.children.length > 0) {
-        tree.expand(nd.value);
-      }
-    }
-  }, [hash]);
-  const onKeyDownCapture = useCallbackRef((e) => {
-    const target = e.target;
-    const id = target.getAttribute("data-value");
-    const node = !!id && byid[id];
-    if (!node) return;
-    if (e.key === "ArrowUp") {
-      if (id === roots[0]?.value) {
-        stopAndPrevent(e);
-        moveFocusToSearchInput(target);
-      }
-      return;
-    }
-    if (e.key === "ArrowRight") {
-      const hasChildren = node.children.length > 0;
-      if (hasChildren && tree.expandedState[id] === false) {
-        return;
-      }
-      const label = e.target.querySelector(".mantine-Tree-label") ?? target;
-      const maxY = label.getBoundingClientRect().y;
-      const viewButtons = queryAllFocusable(target, "views");
-      let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
-      view ??= first(viewButtons);
-      if (view) {
-        stopAndPrevent(e);
-        view.focus();
-      }
-      return;
-    }
-    if (e.key === " " || e.key === "Enter") {
-      stopAndPrevent(e);
-      handleClick(node.element);
-      return;
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    Tree,
-    {
-      "data-likec4-search-elements": true,
-      allowRangeSelection: false,
-      clearSelectionOnOutsideClick: true,
-      selectOnClick: false,
-      tree,
-      data: roots,
-      levelOffset: "lg",
-      classNames: {
-        root: treeRoot,
-        node: cx(focusable, treeNode),
-        label: treeLabel,
-        subtree: treeSubtree
-      },
-      onKeyDownCapture,
-      renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, { ...p, searchTerms, handleClick })
-    }
-  );
+function ElementsTree({ data: { searchTerms, all, byid, hash, roots }, handleClick }) {
+	const tree = useTree({ multiple: false });
+	useEffect(() => {
+		tree.collapseAllNodes();
+		for (const nd of all) if (nd.children.length > 0) tree.expand(nd.value);
+	}, [hash]);
+	const onKeyDownCapture = useCallbackRef((e) => {
+		const target = e.target;
+		const id = target.getAttribute("data-value");
+		const node = !!id && byid[id];
+		if (!node) return;
+		if (e.key === "ArrowUp") {
+			if (id === roots[0]?.value) {
+				stopAndPrevent(e);
+				moveFocusToSearchInput(target);
+			}
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			if (node.children.length > 0 && tree.expandedState[id] !== true) return;
+			const maxY = (e.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y;
+			const viewButtons = queryAllFocusable(target, "views");
+			let view = viewButtons.length > 1 ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+			view ??= first(viewButtons);
+			if (view) {
+				stopAndPrevent(e);
+				view.focus();
+			}
+			return;
+		}
+		if (e.key === " " || e.key === "Enter") {
+			stopAndPrevent(e);
+			handleClick(node.element);
+			return;
+		}
+	});
+	return /* @__PURE__ */ jsx(Tree, {
+		"data-likec4-search-elements": true,
+		allowRangeSelection: false,
+		clearSelectionOnOutsideClick: true,
+		selectOnClick: false,
+		tree,
+		data: roots,
+		levelOffset: "md",
+		classNames: {
+			root: treeRoot,
+			node: cx(focusable, treeNode),
+			label: treeLabel,
+			subtree: treeSubtree
+		},
+		onKeyDownCapture,
+		renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, {
+			...p,
+			searchTerms,
+			handleClick
+		})
+	});
 }
-function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClick, searchTerms }) {
-  const { label, element, viewsCount } = node;
-  const elementIcon$1 = IconOrShapeRenderer({
-    element: {
-      id: element.id,
-      title: element.title,
-      shape: element.shape,
-      icon: element.icon
-    },
-    className: cx(btn.icon, elementIcon)
-  });
-  const key = `@tree.${node.value}`;
-  return /* @__PURE__ */ jsxs(m.div, { layoutId: key, ...elementProps, children: [
-    /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: "transparent",
-        size: 16,
-        tabIndex: -1,
-        className: cx(elementExpandIcon),
-        style: {
-          visibility: hasChildren ? "visible" : "hidden"
-        },
-        children: /* @__PURE__ */ jsx(
-          IconChevronRight,
-          {
-            stroke: 3.5,
-            style: {
-              transition: "transform 150ms ease",
-              transform: `rotate(${expanded ? "90deg" : "0"})`,
-              width: "100%"
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      UnstyledButton,
-      {
-        component: m.button,
-        layout: true,
-        tabIndex: -1,
-        "data-value": element.id,
-        className: cx(btn.root, "group", "likec4-element-button"),
-        ...viewsCount > 0 && {
-          onClick: (e) => {
-            if (!hasChildren || expanded) {
-              e.stopPropagation();
-              handleClick(element);
-            }
-          }
-        },
-        children: [
-          elementIcon$1,
-          /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
-            /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", className: elementTitleAndId, children: [
-              /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.title, children: label }),
-              /* @__PURE__ */ jsx(Tooltip, { label: element.id, withinPortal: false, fz: "xs", disabled: !element.id.includes("."), children: /* @__PURE__ */ jsx(
-                Highlight,
-                {
-                  component: "div",
-                  highlight: last(searchTerms),
-                  className: cx(elementId, btn.descriptionColor),
-                  children: nameFromFqn(element.id)
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Highlight,
-              {
-                component: "div",
-                highlight: element.summary.nonEmpty ? searchTerms : [],
-                className: btn.description,
-                lineClamp: 1,
-                children: element.summary.nonEmpty ? element.summary.text : "No description"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(Txt, { as: "div", className: cx(elementViewsCount, btn.descriptionColor), size: "xs", children: viewsCount === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
-            viewsCount,
-            " view",
-            viewsCount > 1 ? "s" : ""
-          ] }) })
-        ]
-      }
-    )
-  ] });
+function ElementTreeNode({ node, elementProps, expanded, handleClick, searchTerms }) {
+	const { label, element, viewsCount } = node;
+	const elementIcon$1 = IconOrShapeRenderer({
+		element: {
+			id: element.id,
+			title: element.title,
+			shape: element.shape,
+			icon: element.icon
+		},
+		className: cx(btn.icon, elementIcon)
+	});
+	const key = `@tree.${node.value}`;
+	return /* @__PURE__ */ jsxs(m.div, {
+		layoutId: key,
+		...elementProps,
+		children: [/* @__PURE__ */ jsx(ActionIcon, {
+			variant: "transparent",
+			size: 16,
+			tabIndex: -1,
+			className: cx(elementExpandIcon),
+			style: { visibility: node.hasChildren ? "visible" : "hidden" },
+			children: /* @__PURE__ */ jsx(IconChevronRight, {
+				stroke: 3.5,
+				style: {
+					transition: "transform 150ms ease",
+					transform: `rotate(${expanded ? "90deg" : "0"})`,
+					width: "100%"
+				}
+			})
+		}), /* @__PURE__ */ jsxs(UnstyledButton, {
+			component: m.button,
+			layout: true,
+			tabIndex: -1,
+			"data-value": element.id,
+			className: cx(btn.root, "group", "likec4-element-button"),
+			...viewsCount > 0 && { onClick: (e) => {
+				if (!node.hasChildren || expanded) {
+					e.stopPropagation();
+					handleClick(element);
+				}
+			} },
+			children: [
+				elementIcon$1,
+				/* @__PURE__ */ jsxs(Box, {
+					style: { flexGrow: 1 },
+					children: [/* @__PURE__ */ jsxs(Group, {
+						gap: "xs",
+						wrap: "nowrap",
+						align: "center",
+						className: elementTitleAndId,
+						children: [/* @__PURE__ */ jsx(Highlight, {
+							component: "div",
+							highlight: searchTerms,
+							className: btn.title,
+							children: label
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							label: element.id,
+							withinPortal: false,
+							fz: "xs",
+							disabled: !element.id.includes("."),
+							children: /* @__PURE__ */ jsx(Highlight, {
+								component: "div",
+								highlight: last(searchTerms),
+								className: cx(elementId, btn.descriptionColor),
+								children: nameFromFqn(element.id)
+							})
+						})]
+					}), /* @__PURE__ */ jsx(Highlight, {
+						component: "div",
+						highlight: element.summary.nonEmpty ? searchTerms : [],
+						className: btn.description,
+						lineClamp: 1,
+						children: element.summary.nonEmpty ? element.summary.text : "No description"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Txt, {
+					as: "div",
+					className: cx(elementViewsCount, btn.descriptionColor),
+					size: "xs",
+					children: viewsCount === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						viewsCount,
+						" view",
+						viewsCount > 1 ? "s" : ""
+					] })
+				})
+			]
+		})]
+	});
 }
 function useHandleElementSelection() {
-  const ctx = useSearchContext();
-  return useCallbackRef((element) => {
-    const views = [...element.views()];
-    if (views.length === 0) {
-      return;
-    }
-    const elementFqn = element.id;
-    const onlyOneViewId = only(views)?.id;
-    if (!onlyOneViewId) {
-      ctx.openPickView(elementFqn);
-      return;
-    }
-    ctx.navigateTo(onlyOneViewId, elementFqn);
-  });
+	const ctx = useSearchContext();
+	return useCallbackRef((element) => {
+		const views = [...element.views()];
+		if (views.length === 0) return;
+		const elementFqn = element.id;
+		const onlyOneViewId = only(views)?.id;
+		if (!onlyOneViewId) {
+			ctx.openPickView(elementFqn);
+			return;
+		}
+		ctx.navigateTo(onlyOneViewId, elementFqn);
+	});
 }
-
+//#endregion
 export { ElementsColumn };