@likec4/diagram 1.59.4 → 1.60.0

package/dist/projects-overview/custom/nodeTypes.mjs

@@ -0,0 +1,43 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { ElementActionButtons } from "../../base-primitives/element/ElementActionButtons.mjs";
+import { ElementData } from "../../base-primitives/element/ElementData.mjs";
+import { ElementNodeContainer } from "../../base-primitives/element/ElementNodeContainer.mjs";
+import { ElementShape } from "../../base-primitives/element/ElementShape.mjs";
+import { DefaultHandles } from "../../base-primitives/NodeHandles.mjs";
+import { useProjectsOverviewActor } from "../context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallbackRef } from "@mantine/hooks";
+
+//#region src/projects-overview/custom/nodeTypes.tsx
+function ProjectNode(props) {
+	const actor = useProjectsOverviewActor();
+	const navigateTo = useCallbackRef((e) => {
+		e.stopPropagation();
+		actor.send({
+			type: "navigate.to",
+			fromNode: props.data.id,
+			projectId: props.data.projectId
+		});
+	});
+	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
+		layout: true,
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			/* @__PURE__ */ jsx(ElementActionButtons, {
+				...props,
+				buttons: [{
+					key: "navigate",
+					icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+					onClick: navigateTo
+				}]
+			}),
+			/* @__PURE__ */ jsx(DefaultHandles, {})
+		]
+	}, props.id);
+}
+
+//#endregion
+export { ProjectNode };

package/dist/projects-overview/hooks.mjs

@@ -0,0 +1,17 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useProjectsOverviewActor } from "./context.mjs";
+import { useReactFlow, useStoreApi } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
+
+//#region src/projects-overview/hooks.ts
+function useProjectsOverviewState(selector, compare = shallowEqual) {
+	const actor = useProjectsOverviewActor();
+	return useSelector(actor, selector, compare);
+}
+function useProjectsOverviewXYStoreApi() {
+	return useStoreApi();
+}
+
+//#endregion
+export { useProjectsOverviewState, useProjectsOverviewXYStoreApi };

package/dist/projects-overview/index.d.mts

@@ -0,0 +1,2 @@
+import { ProjectsOverviewProps } from "./ProjectsOverview.mjs";
+export type { ProjectsOverviewProps };

package/dist/projects-overview/layouted-to-xyflow.mjs

@@ -0,0 +1,55 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ZIndexes } from "../base/const.mjs";
+import { map } from "remeda";
+
+//#region src/projects-overview/layouted-to-xyflow.ts
+function layoutedProjectsViewToXYFlow(view) {
+	return {
+		xynodes: map(view.nodes, projectNodeToXY),
+		xyedges: map(view.edges, projectEdgeToXY)
+	};
+}
+function projectNodeToXY({ id, x, y, width, height, ...node }) {
+	return {
+		id,
+		position: {
+			x,
+			y
+		},
+		type: "project",
+		initialWidth: width,
+		initialHeight: height,
+		draggable: false,
+		deletable: false,
+		zIndex: ZIndexes.Element,
+		style: {
+			width,
+			height
+		},
+		data: {
+			id,
+			width,
+			height,
+			...node
+		}
+	};
+}
+function projectEdgeToXY({ id, source, target, ...edge }) {
+	return {
+		id,
+		source,
+		target,
+		type: "relationship",
+		zIndex: ZIndexes.Edge,
+		deletable: false,
+		data: {
+			id,
+			technology: null,
+			labelBBox: null,
+			...edge
+		}
+	};
+}
+
+//#endregion
+export { layoutedProjectsViewToXYFlow };

package/dist/projects-overview/panel/ProjectsOverviewPanel.mjs

@@ -0,0 +1,11 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { NavigationPanel } from "../../components/NavigationPanel.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/projects-overview/panel/ProjectsOverviewPanel.tsx
+const ProjectsOverviewPanel = () => {
+	return /* @__PURE__ */ jsx(NavigationPanel.Root, { children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [/* @__PURE__ */ jsx(NavigationPanel.Logo, {}), /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })] }) });
+};
+
+//#endregion
+export { ProjectsOverviewPanel };

package/dist/projects-overview/persistence.mjs

@@ -0,0 +1,26 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+//#region src/projects-overview/persistence.ts
+const key = `likec4:projects-overview:lastViewport`;
+const ProjectsOverviewViewportPersistence = {
+	read() {
+		try {
+			let fromStorage = sessionStorage.getItem(key);
+			if (fromStorage) return JSON.parse(fromStorage);
+			return null;
+		} catch (e) {
+			console.error(`Error reading fromStorage ${key}:`, e);
+			return null;
+		}
+	},
+	write(viewport) {
+		if (!viewport) {
+			sessionStorage.removeItem(key);
+			return;
+		}
+		sessionStorage.setItem(key, JSON.stringify(viewport));
+	}
+};
+
+//#endregion
+export { ProjectsOverviewViewportPersistence };

package/dist/search/Search.d.mts

@@ -0,0 +1,11 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import "./searchActor.mjs";
+//#region src/search/Search.d.ts
+export declare const dialogCss: string;
+export declare const bodyCss: string;
+/**
+ * The shared search panel content used by both diagram and overview search.
+ * Must be rendered inside a SearchContext.Provider.
+ */
+export declare const SearchPanelContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/search/Search.mjs

@@ -0,0 +1,201 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useDiagram } from "../hooks/safeContext.mjs";
+import { Overlay } from "../overlays/overlay/Overlay.mjs";
+import { useSearchContext } from "./SearchContext.mjs";
+import { focusToFirstFoundElement, moveFocusToSearchInput } from "./components/utils.mjs";
+import { ViewsColumn } from "./components/ViewsColum.mjs";
+import { ElementsColumn } from "./components/ElementsColumn.mjs";
+import { PickView } from "./components/PickView.mjs";
+import { SearchByTags } from "./components/SearchByTags.mjs";
+import { LikeC4SearchInput } from "./components/SearchInput.mjs";
+import { XStateSearchAdapter } from "./XStateSearchAdapter.mjs";
+import { css } from "@likec4/styles/css";
+import { forwardRef, memo, 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 } from "motion/react";
+import { useSelector } from "@xstate/react";
+import { useHotkeys, useMergedRef } from "@mantine/hooks";
+import { Box as Box$1, VStack } from "@likec4/styles/jsx";
+
+//#region src/search/Search.tsx
+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)"
+});
+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"
+});
+const 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;
+	}
+};
+const Search = memo(({ searchActorRef }) => {
+	const diagram = useDiagram();
+	const isOpened = useSelector(searchActorRef, selectIsOpened);
+	const close = () => {
+		diagram.searchActor().send({ type: "close" });
+	};
+	const open = (event) => {
+		event.stopPropagation();
+		diagram.searchActor().send({ type: "open" });
+	};
+	useHotkeys(isOpened ? [] : [[
+		"mod+k",
+		open,
+		{ preventDefault: true }
+	], [
+		"mod+f",
+		open,
+		{ preventDefault: true }
+	]]);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		onExitComplete: () => {
+			searchActorRef.send({ type: "animation.presence.end" });
+		},
+		children: isOpened && /* @__PURE__ */ jsx(Overlay, {
+			fullscreen: true,
+			withBackdrop: false,
+			backdrop: { opacity: .9 },
+			classes: {
+				dialog: dialogCss,
+				body: bodyCss
+			},
+			openDelay: 100,
+			onClose: close,
+			"data-likec4-search": "true",
+			children: /* @__PURE__ */ jsx(XStateSearchAdapter, {
+				searchActorRef,
+				children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
+			})
+		})
+	});
+});
+Search.displayName = "Search";
+function SearchOverlayBody({ searchActorRef }) {
+	const ref = useRef(null);
+	useTimeoutEffect(() => {
+		if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) focusToFirstFoundElement(ref.current);
+	}, 150);
+	return /* @__PURE__ */ jsx(SearchPanelContent, { ref });
+}
+/**
+* The shared search panel content used by both diagram and overview search.
+* Must be rendered inside a SearchContext.Provider.
+*/
+const SearchPanelContent = forwardRef((_, ref) => {
+	const contentRef = useRef(null);
+	const { pickViewFor } = useSearchContext();
+	return /* @__PURE__ */ jsxs(Box$1, {
+		ref: useMergedRef(ref, contentRef),
+		display: "contents",
+		children: [
+			/* @__PURE__ */ jsx(Group, {
+				className: "group",
+				wrap: "nowrap",
+				onClick: (e) => {
+					e.stopPropagation();
+					moveFocusToSearchInput(contentRef.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: "md",
+					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(AnimatePresence, {
+								initial: false,
+								children: /* @__PURE__ */ jsx(ElementsColumn, {})
+							})
+						})
+					})
+				}), /* @__PURE__ */ jsx(GridCol, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						type: "scroll",
+						className: scrollAreaCss,
+						pr: "xs",
+						scrollbars: "y",
+						children: /* @__PURE__ */ jsx(LayoutGroup, {
+							id: "likec4-search-views",
+							children: /* @__PURE__ */ jsx(AnimatePresence, {
+								initial: false,
+								children: /* @__PURE__ */ jsx(ViewsColumn, {})
+							})
+						})
+					})
+				})]
+			}),
+			pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
+		]
+	});
+});
+SearchPanelContent.displayName = "SearchPanelContent";
+
+//#endregion
+export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };

package/dist/search/SearchContext.d.mts

@@ -0,0 +1,23 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Fqn, ViewId } from "@likec4/core/types";
+//#region src/search/SearchContext.d.ts
+export interface SearchContextValue {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  normalizedSearch: string;
+  navigateTo: (viewId: ViewId, focusOnElement?: Fqn) => void;
+  openPickView: (elementFqn: Fqn) => void;
+  closePickView: () => void;
+  pickViewFor: Fqn | null;
+  close: () => void;
+  currentViewId: string | null;
+  openedWithSearch: string | null;
+}
+export declare const SearchContext: import("react").Context<SearchContextValue | null>;
+export declare function useSearchContext(): SearchContextValue;
+/**
+ * Normalize a raw search string for comparison.
+ * Extracted as a pure function so both XState and standalone adapters can reuse it.
+ */
+export declare function normalizeSearch(value: string): string;
+//#endregion

package/dist/search/SearchContext.mjs

@@ -0,0 +1,23 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+
+//#region src/search/SearchContext.tsx
+const SearchContext = createContext(null);
+function useSearchContext() {
+	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 : "";
+}
+
+//#endregion
+export { SearchContext, normalizeSearch, useSearchContext };

package/dist/search/XStateSearchAdapter.mjs

@@ -0,0 +1,72 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
+import { useCurrentViewId } from "../hooks/useCurrentView.mjs";
+import { SearchContext, normalizeSearch } from "./SearchContext.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@xstate/react";
+
+//#region src/search/XStateSearchAdapter.tsx
+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,
+		setSearchValue,
+		navigateTo,
+		openPickView,
+		closePickView,
+		close
+	]);
+	return /* @__PURE__ */ jsx(SearchContext.Provider, {
+		value,
+		children
+	});
+}
+
+//#endregion
+export { XStateSearchAdapter };

package/dist/search/components/ElementsColumn.css.mjs

@@ -0,0 +1,54 @@
+import { focusable } from "./_shared.css.mjs";
+import { css } from "@likec4/styles/css";
+import { container } from "@likec4/styles/patterns";
+
+//#region src/search/components/ElementsColumn.css.ts
+const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
+const treeNode = css({
+	outline: "none",
+	marginBottom: "2"
+});
+const treeRoot = css(container.raw({ containerName: "likec4-tree" }), {
+	containerType: "inline-size",
+	px: "4",
+	height: "100%"
+});
+const treeLabel = css({
+	display: "flex",
+	alignItems: "baseline",
+	outline: "none !important",
+	gap: "1"
+});
+const treeSubtree = css({ marginTop: "2" });
+const elementExpandIcon = css({ color: "text.dimmed" });
+const elementTitleAndId = css({ [whenContainerIsNarrow]: {
+	flexDirection: "column-reverse",
+	alignItems: "flex-start",
+	gap: "0.5"
+} });
+const elementId = css({
+	fontSize: "xxs",
+	lineHeight: "sm",
+	display: "block",
+	fontWeight: "medium",
+	whiteSpace: "nowrap",
+	padding: "[1px 5px]",
+	borderRadius: "sm",
+	background: `mantine.dark[9]/30`,
+	_light: { background: `mantine.gray[3]/20` }
+});
+const elementIcon = css({
+	["--likec4-icon-size"]: "24px",
+	[whenContainerIsNarrow]: { ["--likec4-icon-size"]: "18px" }
+});
+const elementViewsCount = css({
+	flex: "[0]",
+	fontSize: "xxs",
+	fontWeight: "medium",
+	whiteSpace: "nowrap",
+	lineHeight: "[1.1]",
+	[whenContainerIsNarrow]: { display: "none" }
+});
+
+//#endregion
+export { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree };