@likec4/diagram 1.59.3 → 1.60.0

package/dist/search/components/PickView.js

@@ -1,118 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { useSearchContext } from "../SearchContext.js";
-import { ViewButton } from "./ViewsColum.js";
-import { pickview, pickviewBackdrop, pickviewGroup } from "./styles.css.js";
-import { IconX } from "@tabler/icons-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ActionIcon, FocusTrap, Group, ScrollAreaAutosize, Stack, Title } from "@mantine/core";
-import { useCallbackRef, useWindowEvent } from "@mantine/hooks";
-import * as m from "motion/react-m";
-//#region src/search/components/PickView.tsx
-function PickView({ elementFqn }) {
-	const ctx = useSearchContext();
-	const currentViewId = ctx.currentViewId ?? "";
-	const element = useLikeC4Model().element(elementFqn);
-	const scoped = [];
-	const others = [];
-	for (const view of element.views()) if (view.viewOf === element) scoped.push(view);
-	else others.push(view);
-	const closePickView = () => {
-		ctx.closePickView();
-	};
-	useWindowEvent("keydown", useCallbackRef((event) => {
-		try {
-			if (event.key === "Escape") {
-				event.stopPropagation();
-				event.preventDefault();
-				closePickView();
-			}
-		} catch (e) {
-			console.warn(e);
-		}
-	}), { capture: true });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(m.div, {
-		className: pickviewBackdrop,
-		onClick: (e) => {
-			e.stopPropagation();
-			closePickView();
-		}
-	}, "pickview-backdrop"), /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(m.div, {
-		initial: {
-			opacity: 0,
-			scale: .95,
-			originY: 0,
-			translateX: "-50%",
-			translateY: -20
-		},
-		animate: {
-			opacity: 1,
-			scale: 1,
-			translateY: 0
-		},
-		exit: {
-			opacity: 0,
-			scale: .98,
-			translateY: -20,
-			transition: { duration: .1 }
-		},
-		className: pickview,
-		"data-likec4-search-views": true,
-		children: [/* @__PURE__ */ jsxs(Group, {
-			px: "sm",
-			py: "md",
-			justify: "space-between",
-			children: [/* @__PURE__ */ jsx(Title, {
-				order: 2,
-				lh: 1,
-				children: "Select view"
-			}), /* @__PURE__ */ jsx(ActionIcon, {
-				size: "md",
-				variant: "default",
-				onClick: (e) => {
-					e.stopPropagation();
-					closePickView();
-				},
-				children: /* @__PURE__ */ jsx(IconX, {})
-			})]
-		}), /* @__PURE__ */ jsxs(ScrollAreaAutosize, {
-			mah: "calc(100vh - 110px)",
-			type: "never",
-			children: [scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, {
-				gap: "sm",
-				px: "sm",
-				className: pickviewGroup,
-				children: [/* @__PURE__ */ jsx(Title, {
-					order: 6,
-					c: "dimmed",
-					children: "scoped views of the element"
-				}), scoped.map((view, i) => /* @__PURE__ */ jsx(ViewButton, {
-					view,
-					currentViewId,
-					search: "",
-					loop: true,
-					focusOnElement: elementFqn,
-					mod: { autofocus: i === 0 }
-				}, view.id))]
-			}), others.length > 0 && /* @__PURE__ */ jsxs(Stack, {
-				gap: "sm",
-				px: "sm",
-				className: pickviewGroup,
-				children: [/* @__PURE__ */ jsx(Title, {
-					order: 6,
-					c: "dimmed",
-					children: "views including this element"
-				}), others.map((view, i) => /* @__PURE__ */ jsx(ViewButton, {
-					view,
-					currentViewId,
-					search: "",
-					loop: true,
-					focusOnElement: elementFqn,
-					mod: { autofocus: i === 0 && scoped.length === 0 }
-				}, view.id))]
-			})]
-		})]
-	}, "pickview") })] });
-}
-//#endregion
-export { PickView };

package/dist/search/components/SearchByTags.d.ts

@@ -1 +0,0 @@
-export declare function SearchByTags(): import("react").JSX.Element | null;

package/dist/search/components/SearchByTags.js

@@ -1,79 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { ElementTag } from "../../base-primitives/element/ElementTags.js";
-import { useNormalizedSearch, useUpdateSearch } from "../hooks.js";
-import { focusToFirstFoundElement, moveFocusToSearchInput } from "./utils.js";
-import { css } from "@likec4/styles/css";
-import { IconX } from "@tabler/icons-react";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@mantine/core";
-import { HStack } from "@likec4/styles/jsx";
-//#region src/search/components/SearchByTags.tsx
-function SearchByTags() {
-	const ref = useRef(null);
-	let tags = useLikeC4Model().tagsSortedByUsage;
-	let setSearch = useUpdateSearch();
-	let search = useNormalizedSearch();
-	let countBefore = tags.length;
-	let isFiltered = false;
-	if (search.startsWith("#")) {
-		const searchTag = search.slice(1);
-		tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag));
-		isFiltered = tags.length !== countBefore;
-	}
-	if (tags.length === 0) return null;
-	tags = tags.slice(0, 15);
-	return /* @__PURE__ */ jsxs(HStack, {
-		ref,
-		css: {
-			gap: "md",
-			paddingLeft: "[48px]",
-			flexWrap: "nowrap"
-		},
-		children: [/* @__PURE__ */ jsx(HStack, {
-			css: {
-				gap: "1.5",
-				flexWrap: "wrap",
-				opacity: isFiltered ? 1 : .3,
-				grayscale: isFiltered ? 0 : .9,
-				filter: "auto",
-				transition: "fast",
-				_groupHover: {
-					opacity: 1,
-					grayscale: 0
-				},
-				_groupFocusWithin: {
-					opacity: 1,
-					grayscale: 0
-				}
-			},
-			children: tags.map(({ tag }) => /* @__PURE__ */ jsx(ElementTag, {
-				tag,
-				className: css({
-					userSelect: "none",
-					cursor: "pointer"
-				}),
-				onClick: (e) => {
-					e.stopPropagation();
-					setSearch(`#${tag}`);
-					setTimeout(() => {
-						focusToFirstFoundElement(ref.current);
-					}, 350);
-				}
-			}, tag))
-		}), isFiltered && /* @__PURE__ */ jsx(Button, {
-			size: "compact-xs",
-			variant: "light",
-			onClick: (e) => {
-				e.stopPropagation();
-				setSearch("");
-				moveFocusToSearchInput(ref.current);
-			},
-			rightSection: /* @__PURE__ */ jsx(IconX, { size: 14 }),
-			children: "Clear"
-		})]
-	});
-}
-//#endregion
-export { SearchByTags };

package/dist/search/components/SearchInput.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const LikeC4SearchInput: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/search/components/SearchInput.js

@@ -1,191 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { useSearchContext } from "../SearchContext.js";
-import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from "./utils.js";
-import { input } from "./styles.css.js";
-import { IconSearch } from "@tabler/icons-react";
-import { memo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { keys } from "remeda";
-import { Combobox, ComboboxDropdown, ComboboxEmpty, ComboboxOption, ComboboxOptions, ComboboxTarget, Input, ScrollAreaAutosize, Text, rem, useCombobox } from "@mantine/core";
-import { useFocusWithin, useMergedRef, useWindowEvent } from "@mantine/hooks";
-//#region src/search/components/SearchInput.tsx
-function startingWithKind(search) {
-	return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
-}
-var SEARCH_PREFIXES = ["#", "kind:"];
-var LikeC4SearchInput = memo(() => {
-	const searchCtx = useSearchContext();
-	const likec4model = useLikeC4Model();
-	const inputRef = useRef(null);
-	const { ref, focused } = useFocusWithin();
-	const { searchValue: search, setSearchValue: setSearch } = searchCtx;
-	const combobox = useCombobox({
-		scrollBehavior: "smooth",
-		loop: false
-	});
-	useWindowEvent("keydown", (event) => {
-		try {
-			if (!focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u))) moveFocusToSearchInput(inputRef.current);
-		} catch (e) {
-			console.warn(e);
-		}
-	});
-	let options = [];
-	let isExactMatch = false;
-	switch (true) {
-		case search.startsWith("#"): {
-			const searchTag = search.toLocaleLowerCase().slice(1);
-			const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag));
-			if (alloptions.length === 0) {
-				isExactMatch = false;
-				options = [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")];
-			} else {
-				isExactMatch = alloptions.some((tag) => tag.toLocaleLowerCase() === searchTag);
-				options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, {
-					value: `#${tag}`,
-					children: [/* @__PURE__ */ jsx(Text, {
-						component: "span",
-						opacity: .5,
-						mr: 1,
-						fz: "sm",
-						children: "#"
-					}), tag]
-				}, tag));
-			}
-			break;
-		}
-		case search.startsWith("kind:"):
-		case startingWithKind(search): {
-			const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
-			let alloptions = keys(likec4model.specification.elements);
-			if (term) alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
-			if (alloptions.length === 0) {
-				isExactMatch = false;
-				options = [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")];
-			} else {
-				isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term);
-				options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, {
-					value: `kind:${kind}`,
-					children: [/* @__PURE__ */ jsx(Text, {
-						component: "span",
-						opacity: .5,
-						mr: 1,
-						fz: "sm",
-						children: "kind:"
-					}), kind]
-				}, kind));
-			}
-			break;
-		}
-	}
-	return /* @__PURE__ */ jsxs(Combobox, {
-		onOptionSubmit: (optionValue) => {
-			setSearch(optionValue);
-			combobox.resetSelectedOption();
-			if (!SEARCH_PREFIXES.includes(optionValue)) {
-				combobox.closeDropdown();
-				setTimeout(() => {
-					focusToFirstFoundElement(inputRef.current);
-				}, 350);
-			}
-		},
-		width: "max-content",
-		position: "bottom-start",
-		shadow: "md",
-		offset: {
-			mainAxis: 4,
-			crossAxis: 50
-		},
-		store: combobox,
-		withinPortal: false,
-		children: [/* @__PURE__ */ jsx(ComboboxTarget, { children: /* @__PURE__ */ jsx(Input, {
-			ref: useMergedRef(inputRef, ref),
-			placeholder: "Search by title, description or start with # or kind:",
-			autoFocus: true,
-			"data-autofocus": true,
-			"data-likec4-search-input": true,
-			tabIndex: 0,
-			classNames: { input },
-			size: "lg",
-			value: search,
-			leftSection: /* @__PURE__ */ jsx(IconSearch, {
-				style: { width: rem(20) },
-				stroke: 2
-			}),
-			rightSection: /* @__PURE__ */ jsx(Input.ClearButton, { onClick: (e) => {
-				e.stopPropagation();
-				if (search === "" || search === searchCtx.openedWithSearch) searchCtx.close();
-				else setSearch("");
-			} }),
-			rightSectionPointerEvents: "auto",
-			onChange: (event) => {
-				setSearch(event.currentTarget.value);
-				combobox.openDropdown();
-				combobox.updateSelectedOptionIndex();
-			},
-			onClick: () => combobox.openDropdown(),
-			onFocus: () => combobox.openDropdown(),
-			onBlur: () => combobox.closeDropdown(),
-			onKeyDownCapture: (e) => {
-				if (e.key === "Tab") {
-					switch (true) {
-						case combobox.getSelectedOptionIndex() >= 0:
-							combobox.clickSelectedOption();
-							return stopAndPrevent(e);
-						case options.length === 1:
-							if (combobox.selectFirstOption()) combobox.clickSelectedOption();
-							return stopAndPrevent(e);
-						case startingWithKind(search):
-							setSearch("kind:");
-							return stopAndPrevent(e);
-					}
-					return;
-				}
-				if (e.key === "Backspace" && combobox.dropdownOpened) {
-					if (search === "kind:") {
-						setSearch("");
-						combobox.resetSelectedOption();
-						return stopAndPrevent(e);
-					}
-					if (search.startsWith("kind:") && isExactMatch) {
-						setSearch("kind:");
-						combobox.resetSelectedOption();
-						return stopAndPrevent(e);
-					}
-					if (search.startsWith("#") && isExactMatch) {
-						setSearch("#");
-						combobox.resetSelectedOption();
-						return stopAndPrevent(e);
-					}
-				}
-				if (e.key === "Escape" && combobox.dropdownOpened && options.length > 0) {
-					stopAndPrevent(e);
-					combobox.closeDropdown();
-					return;
-				}
-				if (e.key === "ArrowUp" && combobox.dropdownOpened && search === "" && combobox.getSelectedOptionIndex() === 0) {
-					combobox.closeDropdown();
-					stopAndPrevent(e);
-					return;
-				}
-				if (e.key === "ArrowDown" && (!combobox.dropdownOpened || options.length === 0 || isExactMatch || search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
-					combobox.closeDropdown();
-					stopAndPrevent(e);
-					focusToFirstFoundElement(inputRef.current);
-					return;
-				}
-			}
-		}) }), /* @__PURE__ */ jsx(ComboboxDropdown, {
-			hidden: options.length === 0,
-			style: { minWidth: 300 },
-			children: /* @__PURE__ */ jsx(ComboboxOptions, { children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
-				mah: "min(322px, calc(100cqh - 50px))",
-				type: "scroll",
-				children: options
-			}) })
-		})]
-	});
-});
-//#endregion
-export { LikeC4SearchInput };

package/dist/search/components/ViewsColum.d.ts

@@ -1,13 +0,0 @@
-import { LikeC4Model } from '@likec4/core/model';
-import { Fqn } from '@likec4/core/types';
-import { ElementProps, UnstyledButtonProps } from '@mantine/core';
-import { MemoExoticComponent } from 'react';
-export declare const NothingFound: () => import("react").JSX.Element;
-export declare const ViewsColumn: MemoExoticComponent<() => import("react").JSX.Element>;
-export declare function ViewButton({ className, view, loop, search, focusOnElement, currentViewId, ...props }: {
-    view: LikeC4Model.View;
-    currentViewId: string;
-    search: string;
-    loop?: boolean;
-    focusOnElement?: Fqn;
-} & UnstyledButtonProps & ElementProps<'button'>): import("react").JSX.Element;

package/dist/search/components/ViewsColum.js

@@ -1,158 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { useSearchContext } from "../SearchContext.js";
-import { useNormalizedSearch } from "../hooks.js";
-import { buttonsva, emptyBoX, focusable } from "./_shared.css.js";
-import { centerY, moveFocusToSearchInput, queryAllFocusable } from "./utils.js";
-import { viewButton } from "./ViewsColumn.css.js";
-import { cx } from "@likec4/styles/css";
-import { IconStack2, IconZoomScan } from "@tabler/icons-react";
-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 { Box as Box$1 } from "@likec4/styles/jsx";
-import { preferSummary } from "@likec4/core/types";
-import * as m from "motion/react-m";
-//#region src/search/components/ViewsColum.tsx
-var NothingFound = () => /* @__PURE__ */ jsx(Box$1, {
-	className: emptyBoX,
-	children: "Nothing found"
-});
-var 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
-	]);
-};
-var ViewsColumn = memo(() => {
-	const ref = useRef(null);
-	const [views, search, currentViewId] = useFoundViews();
-	return /* @__PURE__ */ jsxs(Stack, {
-		ref,
-		renderRoot: (props) => /* @__PURE__ */ jsx(m.div, {
-			layout: true,
-			...props
-		}),
-		gap: 8,
-		"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(NothingFound, {}),
-			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, {
-				layoutId: `@view${view.id}`,
-				children: /* @__PURE__ */ jsx(ViewButton, {
-					view,
-					currentViewId: currentViewId ?? "",
-					search,
-					tabIndex: i === 0 ? 0 : -1
-				})
-			}, view.id))
-		]
-	});
-});
-var 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: view.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 })
-		}), /* @__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,
-					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.d.ts

@@ -1,3 +0,0 @@
-export { emptyBoX, focusable } from './_shared.css';
-export declare const viewButton: string;
-export declare const viewButtonDescription: string;

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

@@ -1,15 +0,0 @@
-import "./_shared.css.js";
-import { css, cx } from "@likec4/styles/css";
-var viewButton = cx(css({
-	flexWrap: "nowrap",
-	display: "flex",
-	"&[data-disabled] .mantine-ThemeIcon-root": { opacity: .45 }
-}), "likec4-view-btn");
-css({
-	marginTop: "1",
-	fontSize: "13px",
-	lineHeight: "1.4",
-	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: .85 }
-});
-//#endregion
-export { viewButton };

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +0,0 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system/types';
-export declare const focusable = "likec4-focusable";
-export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;