@likec4/diagram 1.32.0 → 1.32.2

package/dist/search/components/SearchByTags.js

@@ -3,12 +3,14 @@ import { css } from '@likec4/styles/css';
 import { HStack } from '@likec4/styles/jsx';
 import { Button } from '@mantine/core';
 import { IconX } from '@tabler/icons-react';
+import { useRef } from 'react';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base/primitives/element/ElementTags.js';
 
 function SearchByTags() {
+  const ref = useRef(null);
   let tags = useLikeC4Model().tagsSortedByUsage;
   let setSearch = useUpdateSearch();
   let search = useNormalizedSearch();
@@ -24,6 +26,7 @@ function SearchByTags() {
   return /* @__PURE__ */ jsxs(
     HStack,
     {
+      ref,
       css: {
         gap: "md",
         paddingLeft: 48,
@@ -85,7 +88,7 @@ function SearchByTags() {
                     e.stopPropagation();
                     setSearch(`#${tag}`);
                     setTimeout(() => {
-                      focusToFirstFoundElement();
+                      focusToFirstFoundElement(ref.current);
                     }, 350);
                   }
                 },
@@ -102,7 +105,7 @@ function SearchByTags() {
             onClick: (e) => {
               e.stopPropagation();
               setSearch("");
-              moveFocusToSearchInput();
+              moveFocusToSearchInput(ref.current);
             },
             rightSection: /* @__PURE__ */ jsx(IconX, { size: 14 }),
             children: "Clear"

package/dist/search/components/SearchInput.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem, ComboboxDropdown, ComboboxOptions, ScrollAreaAutosize, ComboboxEmpty } from '@mantine/core';
-import { useFocusWithin, useWindowEvent } from '@mantine/hooks';
-import { usePreviousDistinct } from '@react-hookz/web';
+import { useFocusWithin, useWindowEvent, useMergedRef } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
-import { memo } from 'react';
-import { keys, only } from 'remeda';
+import { memo, useRef } from 'react';
+import { keys } from 'remeda';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
@@ -15,11 +14,11 @@ function startingWithKind(search) {
 }
 const SEARCH_PREFIXES = ["#", "kind:"];
 const LikeC4SearchInput = memo(() => {
-  const { close, searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   const likec4model = useLikeC4Model();
+  const inputRef = useRef(null);
   const { ref, focused } = useFocusWithin();
   const [search, setSearch] = useSearch();
-  usePreviousDistinct(search);
   const combobox = useCombobox({
     scrollBehavior: "smooth",
     loop: false
@@ -29,7 +28,7 @@ const LikeC4SearchInput = memo(() => {
     (event) => {
       try {
         if (!focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u))) {
-          moveFocusToSearchInput();
+          moveFocusToSearchInput(inputRef.current);
         }
       } catch (e) {
         console.warn(e);
@@ -51,12 +50,13 @@ const LikeC4SearchInput = memo(() => {
     case search.startsWith("#"): {
       const searchTag = search.toLocaleLowerCase().slice(1);
       const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag));
-      isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag;
       if (alloptions.length === 0) {
+        isExactMatch = false;
         options = [
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
         ];
       } else {
+        isExactMatch = likec4model.tags.some((tag) => tag.toLocaleLowerCase() === searchTag);
         options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `#${tag}`, children: [
           /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "#" }),
           tag
@@ -70,13 +70,14 @@ const LikeC4SearchInput = memo(() => {
       let alloptions = keys(likec4model.specification.elements);
       if (term) {
         alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
-        isExactMatch = only(alloptions)?.toLocaleLowerCase() === 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: 0.5, mr: 1, fz: "sm", children: "kind:" }),
           kind
@@ -94,7 +95,7 @@ const LikeC4SearchInput = memo(() => {
         if (!SEARCH_PREFIXES.includes(optionValue)) {
           combobox.closeDropdown();
           setTimeout(() => {
-            focusToFirstFoundElement();
+            focusToFirstFoundElement(inputRef.current);
           }, 350);
         }
       },
@@ -111,10 +112,11 @@ const LikeC4SearchInput = memo(() => {
         /* @__PURE__ */ jsx(ComboboxTarget, { children: /* @__PURE__ */ jsx(
           Input,
           {
-            ref,
-            id: "likec4searchinput",
+            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: input
@@ -129,7 +131,7 @@ const LikeC4SearchInput = memo(() => {
                   e.stopPropagation();
                   const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch;
                   if (search === "" || search === openedWithSearch) {
-                    close();
+                    searchActorRef.send({ type: "close" });
                   } else {
                     setSearch("");
                   }
@@ -197,7 +199,7 @@ const LikeC4SearchInput = memo(() => {
               search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
                 combobox.closeDropdown();
                 stopAndPrevent(e);
-                focusToFirstFoundElement();
+                focusToFirstFoundElement(inputRef.current);
                 return;
               }
             }

package/dist/search/components/ViewsColum.js

@@ -4,18 +4,19 @@ import { Box } from '@likec4/styles/jsx';
 import { Stack, VisuallyHidden, UnstyledButton, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from '@mantine/core';
 import { IconStack2, IconZoomScan } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 import { first } from 'remeda';
 import { useCurrentViewId } from '../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
-import { useNormalizedSearch } from '../hooks.js';
+import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
-import { moveFocusToSearchInput, centerY } from './utils.js';
+import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {
+  const ref = useRef(null);
   let views = [...useLikeC4Model().views()];
   let search = useNormalizedSearch();
   if (search) {
@@ -33,15 +34,14 @@ const ViewsColumn = memo(() => {
   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 = [...document.querySelectorAll(
-            `[data-likec4-search-elements] .likec4-focusable`
-          )];
+          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) {
@@ -60,7 +60,7 @@ const ViewsColumn = memo(() => {
             tabIndex: -1,
             onFocus: (e) => {
               e.stopPropagation();
-              moveFocusToSearchInput();
+              moveFocusToSearchInput(ref.current);
             }
           }
         ) }),
@@ -78,9 +78,16 @@ const ViewsColumn = memo(() => {
 });
 const btn = buttonsva();
 function ViewButton({ className, view, loop = false, search, ...props }) {
+  const searchActorRef = useSearchActor();
   const diagram = useDiagram();
   const currentViewId = useCurrentViewId();
   const isCurrentView = view.id === currentViewId;
+  const navigate = () => {
+    searchActorRef.send({ type: "close" });
+    setTimeout(() => {
+      diagram.navigateTo(view.id);
+    }, 100);
+  };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
@@ -90,7 +97,7 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
       ...isCurrentView && { "data-disabled": true },
       onClick: (e) => {
         e.stopPropagation();
-        diagram.navigateTo(view.id);
+        navigate();
       },
       onKeyDown: createScopedKeydownHandler({
         siblingSelector: "[data-likec4-view]",
@@ -101,7 +108,7 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
         onKeyDown: (e) => {
           if (e.nativeEvent.code === "Space") {
             e.stopPropagation();
-            diagram.navigateTo(view.id);
+            navigate();
           }
         }
       }),

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

@@ -1,4 +1,5 @@
 export declare function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent): void;
 export declare function centerY(element: HTMLElement): number;
-export declare function moveFocusToSearchInput(): void;
-export declare function focusToFirstFoundElement(): void;
+export declare function moveFocusToSearchInput(from: HTMLElement | null | undefined): void;
+export declare function focusToFirstFoundElement(from: HTMLElement | null | undefined): void;
+export declare function queryAllFocusable(from: HTMLElement | null | undefined, where: 'elements' | 'views', selector?: string): HTMLButtonElement[];

package/dist/search/components/utils.js

@@ -1,3 +1,4 @@
+import { isFunction } from 'remeda';
 import { focusable } from './_shared.css.js';
 
 function stopAndPrevent(e) {
@@ -10,17 +11,48 @@ function centerY(element) {
   const y = rect.y + Math.floor(rect.height / 2);
   return y;
 }
-function moveFocusToSearchInput() {
-  const input = document.getElementById("likec4searchinput");
+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) {
     const length = input.value.length;
     input.focus();
     input.setSelectionRange(length, length);
   }
 }
-function focusToFirstFoundElement() {
-  let firstFoundElement = document.querySelector(`[data-likec4-search] .${focusable}`);
+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;
+  }
+  let firstFoundElement = root.querySelector(`[data-likec4-search] .${focusable}`);
   firstFoundElement?.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 [];
+  }
+  const elements = root.querySelectorAll(`[data-likec4-search-${where}] ${selector}`);
+  return [...elements];
+}
 
-export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent };
+export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent };

package/dist/search/hooks.d.ts

@@ -1,15 +1,9 @@
 import { SearchActorRef } from './searchActor';
 import { Fqn } from '@likec4/core';
 export declare const SearchActorContext: ({ children, value }: {
-    value: {
-        searchActorRef: SearchActorRef;
-        close: (cb?: () => void) => void;
-    };
+    value: SearchActorRef;
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useSearchActor: () => {
-    searchActorRef: SearchActorRef;
-    close: (cb?: () => void) => void;
-};
+}) => import("react/jsx-runtime").JSX.Element, useSearchActor: () => SearchActorRef;
 export declare function useSearch(): [string, (search: string) => void];
 export declare function useNormalizedSearch(): string;
 export declare function useUpdateSearch(): (search: string) => void;

package/dist/search/hooks.js

@@ -5,7 +5,7 @@ import { useCallback, useDeferredValue } from 'react';
 const [SearchActorContext, useSearchActor] = createSafeContext("SearchActorContext");
 const selectSearchValue = (s) => s.context.searchValue;
 function useSearch() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   const searchValue = useSelector(searchActorRef, selectSearchValue);
   const updateSearch = useCallback((search) => {
     searchActorRef.send({ type: "change.search", search });
@@ -17,18 +17,18 @@ const selectNormalizedSearchValue = (s) => {
   return v.length > 1 ? v : "";
 };
 function useNormalizedSearch() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useDeferredValue(useSelector(searchActorRef, selectNormalizedSearchValue));
 }
 function useUpdateSearch() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useCallback((search) => {
     searchActorRef.send({ type: "change.search", search });
   }, [searchActorRef]);
 }
 const selectPickViewFor = (s) => s.context.pickViewFor;
 function usePickViewFor() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useSelector(searchActorRef, selectPickViewFor);
 }
 

package/dist/state/DiagramActorProvider.js

@@ -29,7 +29,7 @@ function DiagramActorProvider({
         "trigger:NavigateTo": (_, { viewId }) => {
           setTimeout(() => {
             handlersRef.current.onNavigateTo?.(viewId);
-          }, 30);
+          }, 40);
         },
         "trigger:OnChange": (_, params) => {
           handlersRef.current.onChange?.(params);

package/dist/state/diagram-machine.d.ts

@@ -2137,15 +2137,223 @@ declare const _diagramMachine: StateMachine<Context, Events, {
         };
         readonly navigating: {
             readonly id: "navigating";
-            readonly entry: readonly ["closeAllOverlays", "closeSearch", "stopSyncLayout", {
-                readonly type: "trigger:NavigateTo";
-                readonly params: ({ context }: {
-                    context: Context;
-                    event: Events;
-                }) => {
-                    viewId: ViewId;
+            readonly entry: readonly ["closeAllOverlays", "closeSearch", "stopSyncLayout", ActionFunction<Context, Events, Events, undefined, Values<{
+                syncManualLayoutActorLogic: {
+                    src: "syncManualLayoutActorLogic";
+                    logic: SyncLayoutActorLogic;
+                    id: "syncLayout";
                 };
-            }];
+                hotkeyActorLogic: {
+                    src: "hotkeyActorLogic";
+                    logic: HotkeyActorLogic;
+                    id: "hotkey";
+                };
+                overlaysActorLogic: {
+                    src: "overlaysActorLogic";
+                    logic: OverlaysActorLogic;
+                    id: "overlays";
+                };
+                searchActorLogic: {
+                    src: "searchActorLogic";
+                    logic: SearchActorLogic;
+                    id: "search";
+                };
+            }>, Values<{
+                onNodeMouseEnter: {
+                    type: "onNodeMouseEnter";
+                    params: {
+                        node: Types.Node;
+                    };
+                };
+                onNodeMouseLeave: {
+                    type: "onNodeMouseLeave";
+                    params: {
+                        node: Types.Node;
+                    };
+                };
+                onEdgeMouseEnter: {
+                    type: "onEdgeMouseEnter";
+                    params: {
+                        edge: Types.Edge;
+                    };
+                };
+                onEdgeMouseLeave: {
+                    type: "onEdgeMouseLeave";
+                    params: {
+                        edge: Types.Edge;
+                    };
+                };
+                "trigger:OnChange": {
+                    type: "trigger:OnChange";
+                    params: {
+                        change: ViewChange;
+                    };
+                };
+                "layout.align": {
+                    type: "layout.align";
+                    params: {
+                        mode: AlignmentMode;
+                    };
+                };
+                "notations.highlight": {
+                    type: "notations.highlight";
+                    params: {
+                        notation: ElementNotation;
+                        kind?: string;
+                    };
+                };
+                "tag.highlight": {
+                    type: "tag.highlight";
+                    params: NonReducibleUnknown;
+                };
+                "xyflow:fitDiagram": {
+                    type: "xyflow:fitDiagram";
+                    params: {
+                        duration?: number;
+                        bounds?: BBox;
+                    } | undefined;
+                };
+                closeAllOverlays: {
+                    type: "closeAllOverlays";
+                    params: NonReducibleUnknown;
+                };
+                "trigger:NavigateTo": {
+                    type: "trigger:NavigateTo";
+                    params: {
+                        viewId: ViewId;
+                    };
+                };
+                "trigger:OpenSource": {
+                    type: "trigger:OpenSource";
+                    params: OpenSourceParams;
+                };
+                "assign lastClickedNode": {
+                    type: "assign lastClickedNode";
+                    params: NonReducibleUnknown;
+                };
+                "open source of focused or last clicked node": {
+                    type: "open source of focused or last clicked node";
+                    params: NonReducibleUnknown;
+                };
+                "xyflow:fitFocusedBounds": {
+                    type: "xyflow:fitFocusedBounds";
+                    params: unknown;
+                };
+                "xyflow:setViewportCenter": {
+                    type: "xyflow:setViewportCenter";
+                    params: {
+                        x: number;
+                        y: number;
+                    };
+                };
+                "xyflow:setViewport": {
+                    type: "xyflow:setViewport";
+                    params: {
+                        viewport: Viewport;
+                        duration?: number;
+                    };
+                };
+                "xyflow:alignNodeFromToAfterNavigate": {
+                    type: "xyflow:alignNodeFromToAfterNavigate";
+                    params: {
+                        fromNode: NodeId;
+                        toPosition: XYPoint;
+                    };
+                };
+                "ensure overlays actor state": {
+                    type: "ensure overlays actor state";
+                    params: NonReducibleUnknown;
+                };
+                "ensure search actor state": {
+                    type: "ensure search actor state";
+                    params: NonReducibleUnknown;
+                };
+                updateFeatures: {
+                    type: "updateFeatures";
+                    params: NonReducibleUnknown;
+                };
+                closeSearch: {
+                    type: "closeSearch";
+                    params: NonReducibleUnknown;
+                };
+                startSyncLayout: {
+                    type: "startSyncLayout";
+                    params: NonReducibleUnknown;
+                };
+                stopSyncLayout: {
+                    type: "stopSyncLayout";
+                    params: NonReducibleUnknown;
+                };
+                "focus on nodes and edges": {
+                    type: "focus on nodes and edges";
+                    params: NonReducibleUnknown;
+                };
+                "undim everything": {
+                    type: "undim everything";
+                    params: NonReducibleUnknown;
+                };
+                "update active walkthrough": {
+                    type: "update active walkthrough";
+                    params: NonReducibleUnknown;
+                };
+            }>, Values<{
+                isReady: {
+                    type: "isReady";
+                    params: unknown;
+                };
+                "enabled: FitView": {
+                    type: "enabled: FitView";
+                    params: unknown;
+                };
+                "enabled: FocusMode": {
+                    type: "enabled: FocusMode";
+                    params: unknown;
+                };
+                "enabled: Readonly": {
+                    type: "enabled: Readonly";
+                    params: unknown;
+                };
+                "enabled: RelationshipDetails": {
+                    type: "enabled: RelationshipDetails";
+                    params: unknown;
+                };
+                "enabled: Search": {
+                    type: "enabled: Search";
+                    params: unknown;
+                };
+                "not readonly": {
+                    type: "not readonly";
+                    params: unknown;
+                };
+                "is dynamic view": {
+                    type: "is dynamic view";
+                    params: unknown;
+                };
+                "is another view": {
+                    type: "is another view";
+                    params: unknown;
+                };
+                "click: selected node": {
+                    type: "click: selected node";
+                    params: unknown;
+                };
+                "click: same node": {
+                    type: "click: same node";
+                    params: unknown;
+                };
+                "click: focused node": {
+                    type: "click: focused node";
+                    params: unknown;
+                };
+                "click: node has connections": {
+                    type: "click: node has connections";
+                    params: unknown;
+                };
+                "click: selected edge": {
+                    type: "click: selected edge";
+                    params: unknown;
+                };
+            }>, never, EventObject>];
             readonly on: {
                 readonly 'update.view': {
                     readonly actions: ActionFunction<Context, {

package/dist/state/diagram-machine.js

@@ -819,12 +819,14 @@ const _diagramMachine = setup({
         "closeAllOverlays",
         "closeSearch",
         "stopSyncLayout",
-        {
-          type: "trigger:NavigateTo",
-          params: ({ context }) => ({
-            viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-          })
-        }
+        enqueueActions(({ enqueue, context }) => {
+          enqueue({
+            type: "trigger:NavigateTo",
+            params: {
+              viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+            }
+          });
+        })
       ],
       on: {
         "update.view": {