@likec4/diagram 1.31.0 → 1.32.0

package/dist/likec4diagram/ui/search/LikeC4Search.css.js

@@ -1,87 +0,0 @@
-import { css } from '@likec4/styles/css';
-
-const backdrop = css({
-  position: "fixed",
-  zIndex: 900,
-  inset: "0px",
-  backgroundColor: "[rgb(34 34 34 / 0.95)]",
-  backdropFilter: "auto",
-  backdropBlur: "10px",
-  _light: {
-    backgroundColor: "[rgb(255 255 255 / 0.92 )]"
-  }
-});
-const root = css({
-  containerName: "likec4-search",
-  containerType: "size",
-  position: "fixed",
-  zIndex: 901,
-  top: 0,
-  left: 0,
-  width: "100%",
-  height: "100%",
-  maxHeight: "100vh",
-  overflow: "hidden",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "stretch",
-  gap: "md",
-  paddingTop: "32px",
-  paddingLeft: "16px",
-  paddingRight: "16px",
-  paddingBottom: 0
-});
-const input = css({
-  border: "transparent",
-  background: "transparent",
-  _focusWithin: {
-    background: `mantine.colors.gray[3]/55`,
-    _dark: {
-      background: `mantine.colors.dark[4]/55`
-    }
-  }
-});
-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: "8px",
-  "& + &": {
-    marginTop: "32px"
-  }
-});
-const scrollArea = css({
-  height: [
-    "100%",
-    "100cqh"
-  ],
-  "& .mantine-ScrollArea-viewport": {
-    minHeight: "100%",
-    "& > div": {
-      minHeight: "100%",
-      height: "100%"
-    }
-  }
-});
-
-export { backdrop, input, pickview, pickviewBackdrop, pickviewGroup, root, scrollArea };

package/dist/likec4diagram/ui/search/LikeC4Search.d.ts

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

package/dist/likec4diagram/ui/search/LikeC4Search.js

@@ -1,267 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { Portal, Group, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from '@mantine/core';
-import { useDisclosure, useHotkeys, useCallbackRef, useWindowEvent, useFocusTrap, useFocusReturn } from '@mantine/hooks';
-import { IconX } from '@tabler/icons-react';
-import { AnimatePresence, m, LayoutGroup } from 'motion/react';
-import { memo, useRef } from 'react';
-import { SearchControl } from '../../../components/SearchControl.js';
-import { ElementsColumn } from './ElementsColumn.js';
-import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from './LikeC4Search.css.js';
-import { LikeC4SearchInput } from './SearchInput.js';
-import { LikeC4SearchContext, useCloseSearch, useIsPickViewActive, wasResetPickView, usePickView, setPickView } from './state.js';
-import { stopAndPrevent } from './utils.js';
-import { ViewsColumn, ViewButton } from './ViewsColum.js';
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-
-const LikeC4Search = memo(() => {
-  const [searchOpened, searchOps] = useDisclosure(false);
-  useHotkeys([
-    ["mod+k", () => searchOps.toggle(), {
-      preventDefault: true
-    }],
-    ["mod+f", () => searchOps.toggle(), {
-      preventDefault: true
-    }]
-  ]);
-  const afterCloseCbRef = useRef(null);
-  const close = useCallbackRef((cb) => {
-    afterCloseCbRef.current = cb ?? null;
-    searchOps.close();
-  });
-  const onExitComplete = useCallbackRef(() => {
-    if (afterCloseCbRef.current) {
-      afterCloseCbRef.current();
-      afterCloseCbRef.current = null;
-    }
-  });
-  const { portalProps } = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(LikeC4SearchContext, { value: close, children: [
-    /* @__PURE__ */ jsx(
-      SearchControl,
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          searchOps.toggle();
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Portal, { ...portalProps, reuseTargetNode: true, children: /* @__PURE__ */ jsxs(AnimatePresence, { onExitComplete, children: [
-      searchOpened && /* @__PURE__ */ jsx(
-        m.div,
-        {
-          className: backdrop,
-          initial: { opacity: 0.7 },
-          animate: {
-            opacity: 1,
-            transition: {
-              duration: 0.13
-            }
-          },
-          exit: {
-            opacity: 0,
-            transition: {
-              duration: 0.13
-            }
-          }
-        },
-        "backdrop"
-      ),
-      searchOpened && /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
-    ] }) })
-  ] });
-});
-LikeC4Search.displayName = "LikeC4Search";
-const LikeC4SearchOverlay = () => {
-  const close = useCloseSearch();
-  const pickViewActive = useIsPickViewActive();
-  useWindowEvent(
-    "keydown",
-    (event) => {
-      if (event.key === "Escape") {
-        stopAndPrevent(event);
-        if (!wasResetPickView()) {
-          close();
-        }
-        return;
-      }
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    m.div,
-    {
-      className: root,
-      "data-likec4-search": "true",
-      initial: false,
-      animate: {
-        opacity: 1,
-        scale: 1,
-        translateY: 0
-      },
-      exit: {
-        opacity: 0,
-        scale: 0.9,
-        translateY: -30,
-        transition: {
-          duration: 0.13
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(Box, { flex: 1, px: "sm", children: /* @__PURE__ */ jsx(LikeC4SearchInput, {}) }),
-          /* @__PURE__ */ jsx(Box, { flex: "0 0 auto", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              size: "lg",
-              variant: "default",
-              onClick: (e) => {
-                e.stopPropagation();
-                close();
-              },
-              children: /* @__PURE__ */ jsx(IconX, {})
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs(Grid, { children: [
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", 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: "hover",
-                  className: scrollArea,
-                  pr: "xs",
-                  scrollbars: "y",
-                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-                ScrollArea,
-                {
-                  type: "hover",
-                  className: scrollArea,
-                  pr: "xs",
-                  scrollbars: "y",
-                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
-                }
-              ) })
-            ]
-          }
-        ),
-        pickViewActive && /* @__PURE__ */ jsx(PickView, {})
-      ]
-    }
-  );
-};
-function PickView() {
-  const pickview$1 = usePickView();
-  const focusTrapRef = useFocusTrap(!!pickview$1);
-  useFocusReturn({
-    opened: !!pickview$1
-  });
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-pickview", children: pickview$1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      m.div,
-      {
-        className: pickviewBackdrop,
-        onClick: (e) => {
-          e.stopPropagation();
-          setPickView(null);
-        }
-      },
-      "backdrop"
-    ),
-    /* @__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,
-        ref: focusTrapRef,
-        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();
-                  setPickView(null);
-                },
-                children: /* @__PURE__ */ jsx(IconX, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 8rem - 50px)", type: "never", children: [
-            pickview$1.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" }),
-              pickview$1.scoped.map((view, i) => /* @__PURE__ */ jsx(
-                ViewButton,
-                {
-                  view,
-                  search: "",
-                  loop: true,
-                  mod: {
-                    autofocus: i === 0
-                  }
-                },
-                view.id
-              ))
-            ] }),
-            pickview$1.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" }),
-              pickview$1.others.map((view, i) => /* @__PURE__ */ jsx(
-                ViewButton,
-                {
-                  view,
-                  search: "",
-                  loop: true,
-                  mod: {
-                    autofocus: i === 0 && pickview$1.scoped.length === 0
-                  }
-                },
-                view.id
-              ))
-            ] })
-          ] })
-        ]
-      },
-      "pickview"
-    )
-  ] }) }) });
-}
-
-export { LikeC4Search };

package/dist/likec4diagram/ui/search/SearchInput.d.ts

@@ -1 +0,0 @@
-export declare function LikeC4SearchInput(): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/ui/search/state.d.ts

@@ -1,19 +0,0 @@
-import { Fqn, LikeC4Model, ViewId } from '@likec4/core';
-export declare function setSearch(term: string): void;
-export declare function useSearch(): string;
-export declare function useNormalizedSearch(): string;
-export declare const LikeC4SearchContext: ({ children, value }: {
-    value: (cb?: () => void) => void;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useCloseSearch: () => (cb?: () => void) => void;
-type PickView = {
-    elementFqn: Fqn;
-    scoped: LikeC4Model.View[];
-    others: LikeC4Model.View[];
-};
-export declare function usePickView(): PickView | null;
-export declare function setPickView(data: PickView | null): void;
-export declare function wasResetPickView(): boolean;
-export declare function useIsPickViewActive(): boolean;
-export declare function useCloseSearchAndNavigateTo(): (viewId: ViewId, fromElementFqn?: Fqn) => void;
-export {};

package/dist/likec4diagram/ui/search/state.js

@@ -1,63 +0,0 @@
-import { DiagramNode } from '@likec4/core';
-import { createSafeContext } from '@mantine/core';
-import { useStore } from '@nanostores/react';
-import { computed, atom, onMount } from 'nanostores';
-import { useDeferredValue, useCallback } from 'react';
-import { useDiagram } from '../../../hooks/useDiagram.js';
-
-const $search = atom("");
-function setSearch(term) {
-  $search.set(term);
-}
-function useSearch() {
-  return useStore($search);
-}
-const $normalizedSearch = computed($search, (search) => {
-  const v = search.trim().toLowerCase();
-  return v.length > 1 ? v : "";
-});
-function useNormalizedSearch() {
-  return useDeferredValue(useStore($normalizedSearch));
-}
-const [LikeC4SearchContext, useCloseSearch] = createSafeContext("LikeC4Search");
-const $pickView = atom(null);
-onMount($search, () => {
-  $pickView.set(null);
-});
-function usePickView() {
-  return useStore($pickView);
-}
-function setPickView(data) {
-  $pickView.set(data);
-}
-function wasResetPickView() {
-  if ($pickView.get() !== null) {
-    $pickView.set(null);
-    return true;
-  }
-  return false;
-}
-const $pickViewActive = computed($pickView, (pickView) => pickView !== null);
-function useIsPickViewActive() {
-  return useStore($pickViewActive);
-}
-function useCloseSearchAndNavigateTo() {
-  const diagram = useDiagram();
-  const close = useCloseSearch();
-  return useCallback((viewId, fromElementFqn) => {
-    close(() => {
-      fromElementFqn ??= $pickView.get()?.elementFqn;
-      setPickView(null);
-      const fromNode = fromElementFqn ? diagram.getContext().view.nodes.find((n) => DiagramNode.modelRef(n) === fromElementFqn)?.id : void 0;
-      if (diagram.currentView.id !== viewId) {
-        diagram.navigateTo(viewId, fromNode);
-        return;
-      }
-      if (fromNode) {
-        diagram.focusNode(fromNode);
-      }
-    });
-  }, [close, diagram]);
-}
-
-export { LikeC4SearchContext, setPickView, setSearch, useCloseSearch, useCloseSearchAndNavigateTo, useIsPickViewActive, useNormalizedSearch, usePickView, useSearch, wasResetPickView };