@likec4/diagram 1.55.1 → 1.56.0

package/dist/search/components/PickView.js

@@ -1,142 +1,118 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '@mantine/core';
-import { useWindowEvent, useCallbackRef } from '@mantine/hooks';
-import * as m from 'motion/react-m';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useSearchContext } from '../SearchContext.js';
-import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
-import { ViewButton } from './ViewsColum.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-
-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: 0.95,
-          originY: 0,
-          translateX: "-50%",
-          translateY: -20
-        },
-        animate: {
-          opacity: 1,
-          scale: 1,
-          translateY: 0
-        },
-        exit: {
-          opacity: 0,
-          scale: 0.98,
-          translateY: -20,
-          transition: {
-            duration: 0.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"
-    ) })
-  ] });
+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.js

@@ -1,97 +1,79 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { HStack } from '@likec4/styles/jsx';
-import { Button } from '@mantine/core';
-import { useRef } from 'react';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
-import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
-import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-
+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",
-              // 6px
-              flexWrap: "wrap",
-              opacity: isFiltered ? 1 : 0.3,
-              grayscale: isFiltered ? 0 : 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"
-          }
-        )
-      ]
-    }
-  );
+	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 };