@likec4/diagram 1.59.4 → 1.60.0

package/dist/search/components/ViewsColum.mjs

@@ -0,0 +1,161 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { EmptyBox } from "../../components/EmptyBox.mjs";
+import { ViewIcon } from "../../components/ViewIcon.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { useNormalizedSearch } from "../hooks.mjs";
+import { buttonsva, focusable } from "./_shared.css.mjs";
+import { centerY, moveFocusToSearchInput, queryAllFocusable } from "./utils.mjs";
+import { viewButton } from "./ViewsColumn.css.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { first } from "remeda";
+import { Badge, Group, Highlight, Stack, ThemeIcon, UnstyledButton, VisuallyHidden, createScopedKeydownHandler } from "@mantine/core";
+import { m } from "motion/react";
+import { preferSummary } from "@likec4/core/types";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { vstack } from "@likec4/styles/patterns";
+
+//#region src/search/components/ViewsColum.tsx
+const NothingFound = () => /* @__PURE__ */ jsx(EmptyBox, {
+	fullsize: true,
+	as: m.div,
+	children: "Nothing found"
+});
+const useFoundViews = () => {
+	const { currentViewId } = useSearchContext();
+	const likec4model = useLikeC4Model();
+	const search = useNormalizedSearch();
+	return useMemo(() => {
+		let views = [...likec4model.views()];
+		if (search) {
+			if (search.startsWith("kind:")) views = [];
+			else {
+				const searchTag = search.startsWith("#") ? search.slice(1) : null;
+				views = views.filter((view) => {
+					if (searchTag) return view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+					const desc = preferSummary(view.$view)?.md || " ";
+					return `${view.id} ${view.title} ${desc}`.toLocaleLowerCase().includes(search);
+				});
+			}
+		}
+		return [
+			views,
+			search,
+			currentViewId
+		];
+	}, [
+		likec4model,
+		search,
+		currentViewId
+	]);
+};
+const ViewsColumn = memo(() => {
+	const ref = useRef(null);
+	const [views, search, currentViewId] = useFoundViews();
+	if (views.length === 0) return /* @__PURE__ */ jsx(NothingFound, {}, "nothing-found");
+	return /* @__PURE__ */ jsxs(m.div, {
+		ref,
+		layout: true,
+		className: vstack({ gap: "2" }),
+		"data-likec4-search-views": true,
+		onKeyDown: (e) => {
+			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+				const maxY = e.target.getBoundingClientRect().y;
+				const elementButtons = queryAllFocusable(ref.current, "elements", ".likec4-element-button");
+				let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+				elementButton ??= first(elementButtons);
+				if (elementButton) {
+					e.stopPropagation();
+					elementButton.focus();
+				}
+				return;
+			}
+		},
+		children: [views.length > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(UnstyledButton, {
+			"data-likec4-view": true,
+			tabIndex: -1,
+			onFocus: (e) => {
+				e.stopPropagation();
+				moveFocusToSearchInput(ref.current);
+			}
+		}) }), views.map((view, i) => /* @__PURE__ */ jsx(m.div, {
+			layout: "position",
+			children: /* @__PURE__ */ jsx(ViewButton, {
+				view,
+				currentViewId: currentViewId ?? "",
+				search,
+				tabIndex: i === 0 ? 0 : -1
+			})
+		}, `@view${view.id}`))]
+	}, "views-column");
+});
+const btn = buttonsva();
+function ViewButton({ className, view, loop = false, search, focusOnElement, currentViewId, ...props }) {
+	const ctx = useSearchContext();
+	const nextViewId = view.id;
+	const isCurrentView = nextViewId === currentViewId;
+	const navigate = () => {
+		ctx.navigateTo(nextViewId, focusOnElement);
+	};
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		...props,
+		className: cx(btn.root, "group", focusable, viewButton, className),
+		"data-likec4-view": view.id,
+		...isCurrentView && !focusOnElement && { "data-disabled": true },
+		onClick: (e) => {
+			e.stopPropagation();
+			navigate();
+		},
+		onKeyDown: createScopedKeydownHandler({
+			siblingSelector: "[data-likec4-view]",
+			parentSelector: "[data-likec4-search-views]",
+			activateOnFocus: false,
+			loop,
+			orientation: "vertical",
+			onKeyDown: (e) => {
+				if (e.nativeEvent.code === "Space") {
+					e.stopPropagation();
+					navigate();
+				}
+			}
+		}),
+		children: [/* @__PURE__ */ jsx(ThemeIcon, {
+			variant: "transparent",
+			className: btn.icon,
+			children: /* @__PURE__ */ jsx(ViewIcon, {
+				type: view._type,
+				size: 16
+			})
+		}), /* @__PURE__ */ jsxs(Box$1, {
+			style: { flexGrow: 1 },
+			children: [/* @__PURE__ */ jsxs(Group, {
+				gap: "xs",
+				wrap: "nowrap",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Highlight, {
+					component: "div",
+					highlight: search,
+					className: btn.title,
+					lineClamp: 1,
+					children: view.titleOrUntitled
+				}), isCurrentView && /* @__PURE__ */ jsx(Badge, {
+					size: "xs",
+					fz: 9,
+					radius: "sm",
+					children: "current"
+				})]
+			}), /* @__PURE__ */ jsx(Highlight, {
+				highlight: view.description.nonEmpty ? search : "",
+				component: "div",
+				className: btn.description,
+				lineClamp: 1,
+				children: view.description.text || "No description"
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { NothingFound, ViewButton, ViewsColumn };

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

@@ -0,0 +1,19 @@
+import { focusable } from "./_shared.css.mjs";
+import { css, cx } from "@likec4/styles/css";
+
+//#region src/search/components/ViewsColumn.css.ts
+const _viewBtn = "likec4-view-btn";
+const viewButton = cx(css({
+	flexWrap: "nowrap",
+	display: "flex",
+	"&[data-disabled] .mantine-ThemeIcon-root": { opacity: "0.45" }
+}), _viewBtn);
+const viewButtonDescription = css({
+	marginTop: "1",
+	fontSize: "sm",
+	lineHeight: "md",
+	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: "0.85" }
+});
+
+//#endregion
+export { viewButton };

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

@@ -0,0 +1,123 @@
+import { css, sva } from "@likec4/styles/css";
+import { emptyBox } from "@likec4/styles/recipes";
+
+//#region src/search/components/_shared.css.ts
+const buttonFocused = css.raw({
+	outline: "none",
+	background: "likec4.accent.8",
+	borderColor: "likec4.accent.9"
+});
+const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
+const button = css.raw({
+	display: "flex",
+	width: "100%",
+	background: "surface.default",
+	rounded: "sm",
+	padding: `[12px 8px 12px 14px]`,
+	minHeight: "[60px]",
+	gap: "2",
+	border: `default`,
+	_hover: {
+		...buttonFocused,
+		borderColor: "likec4.accent.9",
+		background: `likec4.accent.8/60`
+	},
+	_focus: buttonFocused,
+	[_treenodefocus]: buttonFocused,
+	_dark: {
+		borderColor: "transparent",
+		background: `mantine.dark[6]/80`
+	},
+	_light: {
+		background: `white/80`,
+		_hover: {
+			borderColor: "likec4.accent.6",
+			backgroundColor: "likec4.accent.5"
+		}
+	}
+});
+const focusable = "likec4-focusable";
+const iconSize = { ref: "24px" };
+const icon = css.raw({
+	color: {
+		base: "text.dimmed",
+		_groupHover: "likec4.accent.0",
+		_groupFocus: "likec4.accent.0"
+	},
+	[_treenodefocus]: { color: "likec4.accent.0" },
+	flex: `[0 0 ${iconSize.ref}]`,
+	boxSize: `[${iconSize.ref}]`,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	alignSelf: "flex-start",
+	["--ti-size"]: iconSize.ref,
+	[`& svg, & img`]: {
+		width: "100%",
+		height: "auto",
+		maxHeight: "100%",
+		pointerEvents: "none"
+	},
+	[`& img`]: { objectFit: "contain" },
+	"&.likec4-shape-icon svg": { strokeWidth: "[1.5]" }
+});
+const title = css.raw({
+	fontSize: "lg",
+	fontWeight: "medium",
+	lineHeight: "snug",
+	[`:where([data-disabled]) &`]: { opacity: "[0.4]" },
+	color: {
+		base: "mantine.dark[1]",
+		_light: "mantine.gray[7]",
+		_groupHover: {
+			base: "likec4.accent.1",
+			_light: "white"
+		},
+		_groupFocus: {
+			base: "likec4.accent.1",
+			_light: "white"
+		}
+	},
+	[_treenodefocus]: { color: {
+		base: "likec4.accent.1",
+		_light: "white"
+	} }
+});
+const descriptionColor = css.raw({
+	color: {
+		base: "text.dimmed",
+		_groupHover: {
+			base: "likec4.accent.1",
+			_light: "likec4.accent.0"
+		},
+		_groupFocus: "likec4.accent.0"
+	},
+	[_treenodefocus]: { color: "likec4.accent.0" }
+});
+const description = css.raw(descriptionColor, {
+	marginTop: "1",
+	fontSize: "sm",
+	lineHeight: "sm",
+	[`:where([data-disabled]) &`]: { opacity: "[0.85]" }
+});
+const emptyBoX = emptyBox({ fullsize: true });
+const buttonsva = sva({
+	slots: [
+		"root",
+		"icon",
+		"title",
+		"description",
+		"descriptionColor"
+	],
+	className: "search-button",
+	base: {
+		root: button,
+		icon,
+		title,
+		description,
+		descriptionColor
+	}
+});
+
+//#endregion
+export { buttonsva, focusable };

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

@@ -0,0 +1,56 @@
+import { focusable } from "./_shared.css.mjs";
+import { css } from "@likec4/styles/css";
+
+//#region src/search/components/styles.css.ts
+const input = css({
+	border: "transparent",
+	background: {
+		base: "transparent",
+		_focusWithin: {
+			base: `mantine.gray[4]/55 !important`,
+			_dark: `mantine.dark[5]/55 !important`
+		},
+		_groupHover: {
+			base: "mantine.gray[3]/35",
+			_dark: "mantine.dark[5]/35"
+		}
+	}
+});
+const pickviewBackdrop = css({
+	position: "absolute",
+	inset: "0",
+	width: "100%",
+	height: "100%",
+	backgroundColor: "[rgb(34 34 34 / 0.7)]",
+	zIndex: "[902]",
+	backdropFilter: "auto",
+	backdropBlur: "10px",
+	_light: { backgroundColor: "[rgb(255 255 255 / 0.6)]" }
+});
+const pickview = css({
+	position: "absolute",
+	top: "[2rem]",
+	left: "[50%]",
+	width: "100%",
+	maxWidth: "[600px]",
+	minWidth: "[200px]",
+	transform: "translateX(-50%)",
+	zIndex: "[903]"
+});
+const pickviewGroup = css({
+	marginTop: "2",
+	"& + &": { marginTop: "[32px]" }
+});
+const scrollArea = css({
+	height: ["100%", "100cqh"],
+	"& .mantine-ScrollArea-viewport": {
+		minHeight: "100%",
+		"& > div": {
+			minHeight: "100%",
+			height: "100%"
+		}
+	}
+});
+
+//#endregion
+export { input, pickview, pickviewBackdrop, pickviewGroup };

package/dist/search/components/utils.mjs

@@ -0,0 +1,57 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { focusable } from "./_shared.css.mjs";
+import { isFunction } from "remeda";
+
+//#region src/search/components/utils.ts
+function stopAndPrevent(e) {
+	e.stopPropagation();
+	e.preventDefault();
+}
+function centerY(element) {
+	const rect = element.getBoundingClientRect();
+	return rect.y + Math.floor(rect.height / 2);
+}
+function moveFocusToSearchInput(from) {
+	if (!from) {
+		console.error("moveFocusToSearchInput: from is null or undefined");
+		return;
+	}
+	const root = from.getRootNode();
+	if (!isFunction(root.querySelector)) {
+		console.error("moveFocusToSearchInput: root.querySelector is not a function");
+		return;
+	}
+	let input = root.querySelector("[data-likec4-search-input]");
+	if (input && root.activeElement !== input) {
+		const length = input.value.length;
+		input.focus();
+		input.setSelectionRange(length, length);
+	}
+}
+function focusToFirstFoundElement(from) {
+	if (!from) {
+		console.error("focusToFirstFoundElement: from is null or undefined");
+		return;
+	}
+	const root = from.getRootNode();
+	if (!isFunction(root.querySelector)) {
+		console.error("focusToFirstFoundElement: root.querySelector is not a function");
+		return;
+	}
+	root.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
+}
+function queryAllFocusable(from, where, selector = `.${focusable}`) {
+	if (!from) {
+		console.error("queryAllFocusable: from is null or undefined");
+		return [];
+	}
+	const root = from.getRootNode();
+	if (!isFunction(root.querySelectorAll)) {
+		console.error("queryAllFocusable: root.querySelectorAll is not a function");
+		return [];
+	}
+	return [...root.querySelectorAll(`[data-likec4-search-${where}] ${selector}`)];
+}
+
+//#endregion
+export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent };

package/dist/search/hooks.mjs

@@ -0,0 +1,18 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useSearchContext } from "./SearchContext.mjs";
+import { useCallback, useDeferredValue } from "react";
+
+//#region src/search/hooks.ts
+function useNormalizedSearch() {
+	const ctx = useSearchContext();
+	return useDeferredValue(ctx.normalizedSearch);
+}
+function useUpdateSearch() {
+	const { setSearchValue } = useSearchContext();
+	return useCallback((search) => {
+		setSearchValue(search);
+	}, [setSearchValue]);
+}
+
+//#endregion
+export { useNormalizedSearch, useUpdateSearch };

package/dist/search/searchActor.d.mts

@@ -0,0 +1,37 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Fqn, ViewId } from "@likec4/core/types";
+import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
+//#region src/search/searchActor.d.ts
+export type SearchActorEvent = {
+  type: 'open';
+  search?: string | undefined;
+} | {
+  type: 'close';
+} | {
+  type: 'change.search';
+  search: string;
+} | {
+  type: 'pickview.open';
+  elementFqn: Fqn;
+} | {
+  type: 'navigate.to';
+  viewId: ViewId;
+  focusOnElement?: Fqn | undefined;
+} | {
+  type: 'animation.presence.end';
+} | {
+  type: 'pickview.close';
+};
+export interface SearchContext {
+  openedWithSearch: string | null;
+  searchValue: string;
+  pickViewFor: Fqn | null;
+  navigateTo: {
+    viewId: ViewId;
+    focusOnElement?: Fqn | undefined;
+  } | null;
+}
+export interface SearchActorLogic extends StateMachine<SearchContext, SearchActorEvent, {}, any, any, any, any, 'inactive' | 'opened' | 'pickView' | 'waitAnimationEnd', never, never, any, any, any, any> {}
+export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;
+export interface SearchActorRef extends ActorRef<SearchActorSnapshot, SearchActorEvent> {}
+//#endregion

package/dist/search/searchActor.mjs

@@ -0,0 +1,104 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { typedSystem } from "../likec4diagram/state/utils.mjs";
+import { assertEvent, assign, enqueueActions, setup } from "xstate";
+
+//#region src/search/searchActor.ts
+const _searchActorLogic = setup({
+	types: {
+		context: {},
+		events: {}
+	},
+	delays: { "MAX_WAIT_ANIMATION_END": 1e3 },
+	actions: {
+		"reset navigateTo": assign(() => ({ navigateTo: null })),
+		"assign navigateTo": assign(({ event }) => {
+			assertEvent(event, ["navigate.to"]);
+			return { navigateTo: {
+				viewId: event.viewId,
+				focusOnElement: event.focusOnElement
+			} };
+		}),
+		"change searchValue": assign({ searchValue: ({ event, context }) => {
+			assertEvent(event, ["change.search", "open"]);
+			return event.search ?? context.searchValue;
+		} }),
+		"reset pickViewFor": assign(() => ({ pickViewFor: null }))
+	}
+}).createMachine({
+	id: "search",
+	context: {
+		openedWithSearch: null,
+		searchValue: "",
+		pickViewFor: null,
+		navigateTo: null
+	},
+	initial: "inactive",
+	states: {
+		inactive: {
+			entry: ["reset navigateTo", "reset pickViewFor"],
+			on: { "open": {
+				target: "opened",
+				actions: [assign({
+					openedWithSearch: ({ event }) => event.search ?? null,
+					searchValue: ({ event, context }) => event.search ?? context.searchValue
+				})]
+			} }
+		},
+		opened: { on: {
+			"open": { actions: "change searchValue" },
+			"change.search": { actions: "change searchValue" },
+			"pickview.open": {
+				target: "pickView",
+				actions: assign({ pickViewFor: ({ event }) => event.elementFqn })
+			},
+			"navigate.to": {
+				target: "waitAnimationEnd",
+				actions: "assign navigateTo"
+			},
+			"close": { target: "inactive" }
+		} },
+		pickView: { on: {
+			"pickview.close": {
+				target: "opened",
+				actions: "reset pickViewFor"
+			},
+			"navigate.to": {
+				target: "waitAnimationEnd",
+				actions: "assign navigateTo"
+			},
+			"close": { target: "inactive" }
+		} },
+		/**
+		* Wait for animation end before triggering navigation
+		* Otherwise, there could be weird artifacts when navigating to large diagrams.
+		*/
+		waitAnimationEnd: {
+			on: { "animation.presence.end": {
+				target: "inactive",
+				actions: enqueueActions(({ context, system, enqueue }) => {
+					const navigateTo = context.navigateTo;
+					if (!navigateTo) return;
+					const diagramActor = typedSystem(system).diagramActorRef;
+					if (navigateTo.focusOnElement) {
+						if (diagramActor.getSnapshot().context.view.id === navigateTo.viewId) {
+							enqueue.sendTo(diagramActor, {
+								type: "focus.node",
+								nodeId: navigateTo.focusOnElement
+							});
+							return;
+						}
+					}
+					enqueue.sendTo(diagramActor, {
+						type: "navigate.to",
+						...navigateTo
+					});
+				})
+			} },
+			after: { MAX_WAIT_ANIMATION_END: { target: "inactive" } }
+		}
+	}
+});
+const searchActorLogic = _searchActorLogic;
+
+//#endregion
+export { searchActorLogic };