@likec4/diagram 1.55.1 → 1.56.0

package/dist/search/Search.js

@@ -1,190 +1,208 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { Box, VStack } from '@likec4/styles/jsx';
-import { Group, Grid, GridCol, Title, ScrollArea } from '@mantine/core';
-import { useHotkeys } from '@mantine/hooks';
-import { useTimeoutEffect } from '@react-hookz/web';
-import { useSelector } from '@xstate/react';
-import { LayoutGroup, AnimatePresence, usePresence } from 'motion/react';
-import { memo, useRef, Suspense, useMemo, useEffect } from 'react';
-import { isTruthy } from 'remeda';
-import { createEmptyActor } from 'xstate';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-import { useSearchActorRef } from '../hooks/useSearchActor.js';
-import { Overlay } from '../overlays/overlay/Overlay.js';
-import { ElementsColumn } from './components/ElementsColumn.js';
-import { PickView } from './components/PickView.js';
-import { SearchByTags } from './components/SearchByTags.js';
-import { LikeC4SearchInput } from './components/SearchInput.js';
-import { moveFocusToSearchInput, focusToFirstFoundElement } from './components/utils.js';
-import { ViewsColumn } from './components/ViewsColum.js';
-import { useSearchContext } from './SearchContext.js';
-import { XStateSearchAdapter } from './XStateSearchAdapter.js';
-
-const dialogCss = css({
-  backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
-  _light: {
-    backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]`
-  },
-  backdropFilter: "auto",
-  backdropBlur: "var(--_blur, 10px)"
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
+import { Overlay } from "../overlays/overlay/Overlay.js";
+import { useSearchActorRef } from "../hooks/useSearchActor.js";
+import { useSearchContext } from "./SearchContext.js";
+import { focusToFirstFoundElement, moveFocusToSearchInput } from "./components/utils.js";
+import { ViewsColumn } from "./components/ViewsColum.js";
+import { ElementsColumn } from "./components/ElementsColumn.js";
+import { PickView } from "./components/PickView.js";
+import { SearchByTags } from "./components/SearchByTags.js";
+import { LikeC4SearchInput } from "./components/SearchInput.js";
+import { XStateSearchAdapter } from "./XStateSearchAdapter.js";
+import { css } from "@likec4/styles/css";
+import { Suspense, memo, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTimeoutEffect } from "@react-hookz/web";
+import { isTruthy } from "remeda";
+import { Grid, GridCol, Group, ScrollArea, Title } from "@mantine/core";
+import { AnimatePresence, LayoutGroup, usePresence } from "motion/react";
+import { useSelector } from "@xstate/react";
+import { useHotkeys } from "@mantine/hooks";
+import { Box as Box$1, VStack } from "@likec4/styles/jsx";
+import { createEmptyActor } from "xstate";
+//#region src/search/Search.tsx
+var dialogCss = css({
+	backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
+	_light: { backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]` },
+	backdropFilter: "auto",
+	backdropBlur: "var(--_blur, 10px)"
 });
-const bodyCss = css({
-  width: "100%",
-  height: "100%",
-  maxHeight: "100vh",
-  overflow: "hidden",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "stretch",
-  gap: "sm",
-  paddingTop: "[20px]",
-  paddingLeft: "md",
-  paddingRight: "md",
-  paddingBottom: "sm",
-  background: "transparent"
+var bodyCss = css({
+	width: "100%",
+	height: "100%",
+	maxHeight: "100vh",
+	overflow: "hidden",
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "stretch",
+	gap: "sm",
+	paddingTop: "[20px]",
+	paddingLeft: "md",
+	paddingRight: "md",
+	paddingBottom: "sm",
+	background: "transparent"
 });
-const scrollAreaCss = css({
-  height: [
-    "100%",
-    "100cqh"
-  ],
-  "& .mantine-ScrollArea-viewport": {
-    minHeight: "100%",
-    "& > div": {
-      minHeight: "100%",
-      height: "100%"
-    }
-  }
+var scrollAreaCss = css({
+	height: ["100%", "100cqh"],
+	"& .mantine-ScrollArea-viewport": {
+		minHeight: "100%",
+		"& > div": {
+			minHeight: "100%",
+			height: "100%"
+		}
+	}
 });
-const selectIsOpened = (s) => {
-  try {
-    return s.status === "active" && (s.value === "opened" || s.value === "pickView");
-  } catch (e) {
-    console.error(e);
-    return false;
-  }
+var selectIsOpened = (s) => {
+	try {
+		return s.status === "active" && (s.value === "opened" || s.value === "pickView");
+	} catch (e) {
+		console.error(e);
+		return false;
+	}
 };
-const Search = memo(() => {
-  const searchActorRef = useSearchActorRef();
-  const emptyActorRef = useRef(createEmptyActor());
-  const isOpened = useSelector(searchActorRef ?? emptyActorRef.current, selectIsOpened);
-  const close = useCallbackRef(() => {
-    searchActorRef?.send({ type: "close" });
-  });
-  useHotkeys(
-    useMemo(() => {
-      const openSearch = () => searchActorRef?.send({ type: "open" });
-      return searchActorRef ? [
-        ["mod+k", openSearch, {
-          preventDefault: true
-        }],
-        ["mod+f", openSearch, {
-          preventDefault: true
-        }]
-      ] : [];
-    }, [searchActorRef])
-  );
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: searchActorRef && isOpened && /* @__PURE__ */ jsx(
-    Overlay,
-    {
-      fullscreen: true,
-      withBackdrop: false,
-      backdrop: {
-        opacity: 0.9
-      },
-      classes: {
-        dialog: dialogCss,
-        body: bodyCss
-      },
-      openDelay: 0,
-      onClose: close,
-      "data-likec4-search": "true",
-      children: /* @__PURE__ */ jsx(XStateSearchAdapter, { searchActorRef, children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef }) })
-    }
-  ) });
+var Search = memo(() => {
+	const searchActorRef = useSearchActorRef();
+	const emptyActorRef = useRef(createEmptyActor());
+	const isOpened = useSelector(searchActorRef ?? emptyActorRef.current, selectIsOpened);
+	const close = useCallbackRef$1(() => {
+		searchActorRef?.send({ type: "close" });
+	});
+	useHotkeys(useMemo(() => {
+		const openSearch = () => searchActorRef?.send({ type: "open" });
+		return searchActorRef ? [[
+			"mod+k",
+			openSearch,
+			{ preventDefault: true }
+		], [
+			"mod+f",
+			openSearch,
+			{ preventDefault: true }
+		]] : [];
+	}, [searchActorRef]));
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: searchActorRef && isOpened && /* @__PURE__ */ jsx(Overlay, {
+		fullscreen: true,
+		withBackdrop: false,
+		backdrop: { opacity: .9 },
+		classes: {
+			dialog: dialogCss,
+			body: bodyCss
+		},
+		openDelay: 0,
+		onClose: close,
+		"data-likec4-search": "true",
+		children: /* @__PURE__ */ jsx(XStateSearchAdapter, {
+			searchActorRef,
+			children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
+		})
+	}) });
 });
 Search.displayName = "Search";
-const SearchPanelContent = memo(() => {
-  const ref = useRef(null);
-  const { pickViewFor } = useSearchContext();
-  return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
-    /* @__PURE__ */ jsx(
-      Group,
-      {
-        className: "group",
-        wrap: "nowrap",
-        onClick: (e) => {
-          e.stopPropagation();
-          moveFocusToSearchInput(ref.current);
-        },
-        children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
-          /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
-          /* @__PURE__ */ jsx(SearchByTags, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Grid, { children: [
-      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
-      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      Grid,
-      {
-        className: css({
-          containerName: "likec4-search-elements",
-          containerType: "size",
-          overflow: "hidden",
-          flexGrow: 1
-        }),
-        children: [
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-            ScrollArea,
-            {
-              type: "scroll",
-              className: scrollAreaCss,
-              pr: "xs",
-              scrollbars: "y",
-              children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-            ScrollArea,
-            {
-              type: "scroll",
-              className: scrollAreaCss,
-              pr: "xs",
-              scrollbars: "y",
-              children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
-            }
-          ) })
-        ]
-      }
-    ),
-    pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
-  ] });
+/**
+* The shared search panel content used by both diagram and overview search.
+* Must be rendered inside a SearchContext.Provider.
+*/
+var SearchPanelContent = memo(() => {
+	const ref = useRef(null);
+	const { pickViewFor } = useSearchContext();
+	return /* @__PURE__ */ jsxs(Box$1, {
+		ref,
+		display: "contents",
+		children: [
+			/* @__PURE__ */ jsx(Group, {
+				className: "group",
+				wrap: "nowrap",
+				onClick: (e) => {
+					e.stopPropagation();
+					moveFocusToSearchInput(ref.current);
+				},
+				children: /* @__PURE__ */ jsxs(VStack, {
+					flex: 1,
+					px: "sm",
+					children: [/* @__PURE__ */ jsx(LikeC4SearchInput, {}), /* @__PURE__ */ jsx(SearchByTags, {})]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Grid, { children: [/* @__PURE__ */ jsx(GridCol, {
+				span: 6,
+				children: /* @__PURE__ */ jsx(Title, {
+					component: "div",
+					order: 6,
+					c: "dimmed",
+					pl: "sm",
+					children: "Elements"
+				})
+			}), /* @__PURE__ */ jsx(GridCol, {
+				span: 6,
+				children: /* @__PURE__ */ jsx(Title, {
+					component: "div",
+					order: 6,
+					c: "dimmed",
+					pl: "sm",
+					children: "Views"
+				})
+			})] }),
+			/* @__PURE__ */ jsxs(Grid, {
+				className: css({
+					containerName: "likec4-search-elements",
+					containerType: "size",
+					overflow: "hidden",
+					flexGrow: 1
+				}),
+				children: [/* @__PURE__ */ jsx(GridCol, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						type: "scroll",
+						className: scrollAreaCss,
+						pr: "xs",
+						scrollbars: "y",
+						children: /* @__PURE__ */ jsx(LayoutGroup, {
+							id: "likec4-search-elements",
+							children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsColumn, {}) })
+						})
+					})
+				}), /* @__PURE__ */ jsx(GridCol, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						type: "scroll",
+						className: scrollAreaCss,
+						pr: "xs",
+						scrollbars: "y",
+						children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LayoutGroup, {
+							id: "likec4-search-views",
+							children: /* @__PURE__ */ jsx(ViewsColumn, {})
+						}) })
+					})
+				})]
+			}),
+			pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
+		]
+	});
 });
 SearchPanelContent.displayName = "SearchPanelContent";
-const SearchOverlayBody = memo(function SearchOverlayBody2({ searchActorRef }) {
-  const ref = useRef(null);
-  useTimeoutEffect(() => {
-    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
-      focusToFirstFoundElement(ref.current);
-    }
-  }, 150);
-  const [isPresent, safeToRemove] = usePresence();
-  useEffect(() => {
-    if (isPresent) {
-      return;
-    }
-    safeToRemove();
-    try {
-      searchActorRef.send({ type: "animation.presence.end" });
-    } catch (e) {
-      console.debug("SearchOverlayBody: animation.presence.end failed", e);
-    }
-  }, [isPresent, searchActorRef, safeToRemove]);
-  return /* @__PURE__ */ jsx(Box, { ref, display: "contents", children: /* @__PURE__ */ jsx(SearchPanelContent, {}) });
+var SearchOverlayBody = memo(function SearchOverlayBody({ searchActorRef }) {
+	const ref = useRef(null);
+	useTimeoutEffect(() => {
+		if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) focusToFirstFoundElement(ref.current);
+	}, 150);
+	const [isPresent, safeToRemove] = usePresence();
+	useEffect(() => {
+		if (isPresent) return;
+		safeToRemove();
+		try {
+			searchActorRef.send({ type: "animation.presence.end" });
+		} catch (e) {
+			console.debug("SearchOverlayBody: animation.presence.end failed", e);
+		}
+	}, [
+		isPresent,
+		searchActorRef,
+		safeToRemove
+	]);
+	return /* @__PURE__ */ jsx(Box$1, {
+		ref,
+		display: "contents",
+		children: /* @__PURE__ */ jsx(SearchPanelContent, {})
+	});
 });
-
-export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };
+//#endregion
+export { Search, SearchPanelContent, bodyCss, dialogCss };

package/dist/search/SearchContext.js

@@ -1,20 +1,21 @@
-import { createContext, useContext } from 'react';
-
-const SearchContext = createContext(null);
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+//#region src/search/SearchContext.tsx
+var SearchContext = createContext(null);
 function useSearchContext() {
-  const ctx = useContext(SearchContext);
-  if (!ctx) {
-    throw new Error("useSearchContext must be used within a SearchContext.Provider");
-  }
-  return ctx;
+	const ctx = useContext(SearchContext);
+	if (!ctx) throw new Error("useSearchContext must be used within a SearchContext.Provider");
+	return ctx;
 }
+/**
+* Normalize a raw search string for comparison.
+* Extracted as a pure function so both XState and standalone adapters can reuse it.
+*/
 function normalizeSearch(value) {
-  if (value === "") return value;
-  const v = value.trim().toLowerCase();
-  if (v.startsWith("#") && v.length <= 2) {
-    return "";
-  }
-  return v.length > 1 ? v : "";
+	if (value === "") return value;
+	const v = value.trim().toLowerCase();
+	if (v.startsWith("#") && v.length <= 2) return "";
+	return v.length > 1 ? v : "";
 }
-
+//#endregion
 export { SearchContext, normalizeSearch, useSearchContext };

package/dist/search/XStateSearchAdapter.js

@@ -1,64 +1,70 @@
-import { jsx } from 'react/jsx-runtime';
-import { useSelector } from '@xstate/react';
-import { useMemo } from 'react';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-import { useCurrentViewId } from '../hooks/useCurrentView.js';
-import { normalizeSearch, SearchContext } from './SearchContext.js';
-
-const selectSearchValue = (s) => s.context.searchValue;
-const selectPickViewFor = (s) => s.context.pickViewFor;
-const selectOpenedWithSearch = (s) => s.context.openedWithSearch;
-function XStateSearchAdapter({
-  searchActorRef,
-  children
-}) {
-  const searchValue = useSelector(searchActorRef, selectSearchValue);
-  const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
-  const openedWithSearch = useSelector(searchActorRef, selectOpenedWithSearch);
-  const currentViewId = useCurrentViewId();
-  const setSearchValue = useCallbackRef((search) => {
-    searchActorRef.send({ type: "change.search", search });
-  });
-  const navigateTo = useCallbackRef((viewId, focusOnElement) => {
-    searchActorRef.send({
-      type: "navigate.to",
-      viewId,
-      focusOnElement
-    });
-  });
-  const openPickView = useCallbackRef((elementFqn) => {
-    searchActorRef.send({ type: "pickview.open", elementFqn });
-  });
-  const closePickView = useCallbackRef(() => {
-    searchActorRef.send({ type: "pickview.close" });
-  });
-  const close = useCallbackRef(() => {
-    searchActorRef.send({ type: "close" });
-  });
-  const value = useMemo(() => ({
-    searchValue,
-    setSearchValue,
-    normalizedSearch: normalizeSearch(searchValue),
-    navigateTo,
-    openPickView,
-    closePickView,
-    pickViewFor,
-    close,
-    currentViewId,
-    openedWithSearch
-  }), [
-    searchValue,
-    pickViewFor,
-    currentViewId,
-    openedWithSearch,
-    // stable refs from useCallbackRef — listed for exhaustive-deps lint rule
-    setSearchValue,
-    navigateTo,
-    openPickView,
-    closePickView,
-    close
-  ]);
-  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../hooks/useCallbackRef.js";
+import { useCurrentViewId } from "../hooks/useCurrentView.js";
+import { SearchContext, normalizeSearch } from "./SearchContext.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@xstate/react";
+//#region src/search/XStateSearchAdapter.tsx
+var selectSearchValue = (s) => s.context.searchValue;
+var selectPickViewFor = (s) => s.context.pickViewFor;
+var selectOpenedWithSearch = (s) => s.context.openedWithSearch;
+function XStateSearchAdapter({ searchActorRef, children }) {
+	const searchValue = useSelector(searchActorRef, selectSearchValue);
+	const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
+	const openedWithSearch = useSelector(searchActorRef, selectOpenedWithSearch);
+	const currentViewId = useCurrentViewId();
+	const setSearchValue = useCallbackRef((search) => {
+		searchActorRef.send({
+			type: "change.search",
+			search
+		});
+	});
+	const navigateTo = useCallbackRef((viewId, focusOnElement) => {
+		searchActorRef.send({
+			type: "navigate.to",
+			viewId,
+			focusOnElement
+		});
+	});
+	const openPickView = useCallbackRef((elementFqn) => {
+		searchActorRef.send({
+			type: "pickview.open",
+			elementFqn
+		});
+	});
+	const closePickView = useCallbackRef(() => {
+		searchActorRef.send({ type: "pickview.close" });
+	});
+	const close = useCallbackRef(() => {
+		searchActorRef.send({ type: "close" });
+	});
+	const value = useMemo(() => ({
+		searchValue,
+		setSearchValue,
+		normalizedSearch: normalizeSearch(searchValue),
+		navigateTo,
+		openPickView,
+		closePickView,
+		pickViewFor,
+		close,
+		currentViewId,
+		openedWithSearch
+	}), [
+		searchValue,
+		pickViewFor,
+		currentViewId,
+		openedWithSearch,
+		setSearchValue,
+		navigateTo,
+		openPickView,
+		closePickView,
+		close
+	]);
+	return /* @__PURE__ */ jsx(SearchContext.Provider, {
+		value,
+		children
+	});
 }
-
+//#endregion
 export { XStateSearchAdapter };