@likec4/diagram 1.55.0 → 1.56.0

package/dist/search/components/ViewsColum.js

@@ -1,146 +1,156 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { preferSummary } from '@likec4/core/types';
-import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { Stack, VisuallyHidden, UnstyledButton, ThemeIcon, Group, Highlight, Badge, createScopedKeydownHandler } from '@mantine/core';
-import * as m from 'motion/react-m';
-import { memo, useRef, useMemo } from 'react';
-import { first } from 'remeda';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useNormalizedSearch } from '../hooks.js';
-import { useSearchContext } from '../SearchContext.js';
-import { emptyBoX, focusable, buttonsva } from './_shared.css.js';
-import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
-import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-
-const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, 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]);
+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 * as m from "motion/react-m";
+import { preferSummary } from "@likec4/core/types";
+//#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
+	]);
 };
-const 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 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))
+		]
+	});
 });
-const btn = buttonsva();
+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, { 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"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+	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.js

@@ -1,29 +1,15 @@
-import { cx, css } from '@likec4/styles/css';
-
-const _viewBtn = "likec4-view-btn";
-const viewButton = cx(
-  css({
-    flexWrap: "nowrap",
-    display: "flex",
-    // '& .mantine-ThemeIcon-root': {
-    //   color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
-    //   '--ti-size': '24px',
-    // },
-    "&[data-disabled] .mantine-ThemeIcon-root": {
-      opacity: 0.45
-    }
-  }),
-  _viewBtn
-);
+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",
-  // transition: transitions.fast,
-  // color: `[var(${descriptionColor}, {colors.text.dimmed})]`,
-  fontSize: "13px",
-  lineHeight: "1.4",
-  [`:where(.likec4-view-btn[data-disabled]) &`]: {
-    opacity: 0.85
-  }
+	marginTop: "1",
+	fontSize: "13px",
+	lineHeight: "1.4",
+	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: .85 }
 });
-
+//#endregion
 export { viewButton };

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

@@ -1,162 +1,136 @@
-import { css, sva } from '@likec4/styles/css';
-
-const buttonFocused = css.raw({
-  outline: "none",
-  background: "mantine.colors.primary[8]",
-  borderColor: "mantine.colors.primary[9]"
+import { css, sva } from "@likec4/styles/css";
+//#region src/search/components/_shared.css.ts
+var buttonFocused = css.raw({
+	outline: "none",
+	background: "mantine.colors.primary[8]",
+	borderColor: "mantine.colors.primary[9]"
 });
-const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
-const button = css.raw({
-  display: "flex",
-  width: "100%",
-  background: "body",
-  rounded: "sm",
-  padding: `[12px 8px 12px 14px]`,
-  minHeight: "60px",
-  gap: "2",
-  // alignItems: 'flex-start',
-  // transition: `all 50ms ${easings.inOut}`,
-  border: `1px solid`,
-  borderColor: "default.border",
-  // [titleColor]: '{colors.mantine.colors.dark[1]}',
-  // [iconColor]: '{colors.text.dimmed}',
-  // [descriptionColor]: '{colors.text.dimmed}',
-  _hover: {
-    ...buttonFocused,
-    borderColor: "mantine.colors.primary[9]",
-    background: `mantine.colors.primary[8]/60`
-  },
-  _focus: buttonFocused,
-  [_treenodefocus]: buttonFocused,
-  _dark: {
-    borderColor: "transparent",
-    background: `mantine.colors.dark[6]/80`
-    // background: 'mantine.colors.dark[6]',
-  },
-  _light: {
-    background: `mantine.colors.white/80`,
-    // [iconColor]: '{colors.mantine.colors.gray[6]}',
-    // [titleColor]: '{colors.mantine.colors.gray[7]}',
-    _hover: {
-      borderColor: "mantine.colors.primary[6]",
-      backgroundColor: "mantine.colors.primary[5]"
-      // [iconColor]: '{colors.mantine.colors.primary[3])',
-      // [titleColor]: '{colors.mantine.colors.primary[0])',
-      // [descriptionColor]: '{colors.mantine.colors.primary[1]}',
-    }
-  }
+var _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
+var button = css.raw({
+	display: "flex",
+	width: "100%",
+	background: "body",
+	rounded: "sm",
+	padding: `[12px 8px 12px 14px]`,
+	minHeight: "60px",
+	gap: "2",
+	border: `1px solid`,
+	borderColor: "default.border",
+	_hover: {
+		...buttonFocused,
+		borderColor: "mantine.colors.primary[9]",
+		background: `mantine.colors.primary[8]/60`
+	},
+	_focus: buttonFocused,
+	[_treenodefocus]: buttonFocused,
+	_dark: {
+		borderColor: "transparent",
+		background: `mantine.colors.dark[6]/80`
+	},
+	_light: {
+		background: `mantine.colors.white/80`,
+		_hover: {
+			borderColor: "mantine.colors.primary[6]",
+			backgroundColor: "mantine.colors.primary[5]"
+		}
+	}
 });
-const focusable = "likec4-focusable";
-const iconSize = {
-  ref: "var(--likec4-icon-size, 24px)"
-};
-const icon = css.raw({
-  color: {
-    base: "text.dimmed",
-    _light: "mantine.colors.gray[5]",
-    _groupHover: "mantine.colors.primary[0]",
-    _groupFocus: "mantine.colors.primary[0]"
-  },
-  [_treenodefocus]: {
-    color: "mantine.colors.primary[0]"
-  },
-  flex: `0 0 ${iconSize.ref}`,
-  height: iconSize.ref,
-  width: 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": {
-    // color: `[var(${iconColor})]`,
-    strokeWidth: 1.5
-  }
-  // [iconSize]: '24px',
-  // [whenContainerIsNarrow]: {
-  //   [iconSize]: '18px',
-  // },
+var focusable = "likec4-focusable";
+var iconSize = { ref: "var(--likec4-icon-size, 24px)" };
+var icon = css.raw({
+	color: {
+		base: "text.dimmed",
+		_light: "mantine.colors.gray[5]",
+		_groupHover: "mantine.colors.primary[0]",
+		_groupFocus: "mantine.colors.primary[0]"
+	},
+	[_treenodefocus]: { color: "mantine.colors.primary[0]" },
+	flex: `0 0 ${iconSize.ref}`,
+	height: iconSize.ref,
+	width: 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: "16px",
-  fontWeight: "medium",
-  lineHeight: "1.1",
-  [`:where([data-disabled]) &`]: {
-    opacity: 0.4
-  },
-  color: {
-    base: "mantine.colors.dark[1]",
-    _light: "mantine.colors.gray[7]",
-    _groupHover: {
-      base: "mantine.colors.primary[1]",
-      _light: "white"
-    },
-    _groupFocus: {
-      base: "mantine.colors.primary[1]",
-      _light: "white"
-    }
-  },
-  [_treenodefocus]: {
-    color: {
-      base: "mantine.colors.primary[1]",
-      _light: "white"
-    }
-  }
+var title = css.raw({
+	fontSize: "16px",
+	fontWeight: "medium",
+	lineHeight: "1.1",
+	[`:where([data-disabled]) &`]: { opacity: .4 },
+	color: {
+		base: "mantine.colors.dark[1]",
+		_light: "mantine.colors.gray[7]",
+		_groupHover: {
+			base: "mantine.colors.primary[1]",
+			_light: "white"
+		},
+		_groupFocus: {
+			base: "mantine.colors.primary[1]",
+			_light: "white"
+		}
+	},
+	[_treenodefocus]: { color: {
+		base: "mantine.colors.primary[1]",
+		_light: "white"
+	} }
 });
-const descriptionColor = css.raw({
-  color: {
-    base: "text.dimmed",
-    _groupHover: {
-      base: "mantine.colors.primary[1]",
-      _light: "mantine.colors.primary[0]"
-    },
-    _groupFocus: "mantine.colors.primary[0]"
-  },
-  [_treenodefocus]: {
-    color: "mantine.colors.primary[0]"
-  }
+var descriptionColor = css.raw({
+	color: {
+		base: "text.dimmed",
+		_groupHover: {
+			base: "mantine.colors.primary[1]",
+			_light: "mantine.colors.primary[0]"
+		},
+		_groupFocus: "mantine.colors.primary[0]"
+	},
+	[_treenodefocus]: { color: "mantine.colors.primary[0]" }
 });
-const description = css.raw(descriptionColor, {
-  marginTop: "1",
-  fontSize: "12px",
-  lineHeight: "1.4",
-  [`:where([data-disabled]) &`]: {
-    opacity: 0.85
-  }
+var description = css.raw(descriptionColor, {
+	marginTop: "1",
+	fontSize: "12px",
+	lineHeight: "1.4",
+	[`:where([data-disabled]) &`]: { opacity: .85 }
 });
-const emptyBoX = css({
-  width: "100%",
-  height: "100%",
-  border: `2px dashed`,
-  borderColor: "default.border",
-  rounded: "md",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  fontSize: "md",
-  color: "text.dimmed",
-  padding: "md",
-  paddingBlock: "xl"
+var emptyBoX = css({
+	width: "100%",
+	height: "100%",
+	border: `2px dashed`,
+	borderColor: "default.border",
+	rounded: "md",
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	fontSize: "md",
+	color: "text.dimmed",
+	padding: "md",
+	paddingBlock: "xl"
 });
-const buttonsva = sva({
-  slots: ["root", "icon", "title", "description", "descriptionColor"],
-  className: "search-button",
-  base: {
-    root: button,
-    icon,
-    title,
-    description,
-    descriptionColor
-  }
+var buttonsva = sva({
+	slots: [
+		"root",
+		"icon",
+		"title",
+		"description",
+		"descriptionColor"
+	],
+	className: "search-button",
+	base: {
+		root: button,
+		icon,
+		title,
+		description,
+		descriptionColor
+	}
 });
-
+//#endregion
 export { buttonsva, emptyBoX, focusable };