@likec4/diagram 1.30.0 → 1.32.0

package/dist/{likec4diagram/ui/search → search/components}/_shared.css.js

@@ -6,20 +6,6 @@ const buttonFocused = css.raw({
   borderColor: "mantine.colors.primary[9]"
 });
 const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
-function colors(color, hover) {
-  return {
-    color,
-    _groupHover: {
-      color: hover
-    },
-    _groupFocus: {
-      color: hover
-    },
-    [_treenodefocus]: {
-      color: hover
-    }
-  };
-}
 const button = css.raw({
   display: "flex",
   width: "100%",
@@ -27,7 +13,7 @@ const button = css.raw({
   rounded: "sm",
   padding: `12px 8px 12px 14px`,
   minHeight: "60px",
-  gap: "8",
+  gap: 8,
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -65,9 +51,14 @@ const iconSize = {
   ref: "var(--likec4-icon-size, 24px)"
 };
 const icon = css.raw({
-  ...colors("mantine.colors.dimmed", "mantine.colors.primary[0]"),
-  _light: {
-    ...colors("mantine.colors.gray[6]", "mantine.colors.primary[3]")
+  color: {
+    base: "mantine.colors.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,
@@ -102,23 +93,23 @@ const title = css.raw({
   [`:where([data-disabled]) &`]: {
     opacity: 0.4
   },
-  // color: 'mantine.colors.dark[1]',
-  // _groupHover: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  // _groupFocus: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  ...colors("mantine.colors.dark[1]", "mantine.colors.primary[1]"),
-  _light: {
-    ...colors("mantine.colors.gray[6]", "mantine.colors.primary[3]")
-    // color: `mantine.colors.gray[6]`,
-    // _groupHover: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
-    // _groupFocus: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
+  color: {
+    base: "mantine.colors.dark[1]",
+    _light: "mantine.colors.gray[7]",
+    _groupHover: {
+      base: "mantine.colors.primary[1]",
+      _light: "mantine.colors.white"
+    },
+    _groupFocus: {
+      base: "mantine.colors.primary[1]",
+      _light: "mantine.colors.white"
+    }
+  },
+  [_treenodefocus]: {
+    color: {
+      base: "mantine.colors.primary[1]",
+      _light: "mantine.colors.white"
+    }
   }
 });
 const descriptionColor = css.raw({

package/dist/{likec4diagram/ui/search/LikeC4Search.css.d.ts → search/components/styles.css.d.ts}

@@ -1,6 +1,4 @@
 export { focusable } from './_shared.css';
-export declare const backdrop: string;
-export declare const root: string;
 export declare const input: string;
 export declare const pickviewBackdrop: string;
 export declare const pickview: string;

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

@@ -0,0 +1,60 @@
+import { css } from '@likec4/styles/css';
+
+const input = css({
+  border: "transparent",
+  background: {
+    base: "transparent",
+    _focusWithin: {
+      base: `mantine.colors.gray[4]/55 !important`,
+      _dark: `mantine.colors.dark[5]/55 !important`
+    },
+    _groupHover: {
+      base: "mantine.colors.gray[3]/35",
+      _dark: "mantine.colors.dark[5]/35"
+    }
+  }
+});
+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"
+  }
+});
+css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
+
+export { input, pickview, pickviewBackdrop, pickviewGroup };

package/dist/{likec4diagram/ui/search → search/components}/utils.d.ts

@@ -1,3 +1,4 @@
 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;

package/dist/{likec4diagram/ui/search → search/components}/utils.js

@@ -1,3 +1,5 @@
+import { focusable } from './_shared.css.js';
+
 function stopAndPrevent(e) {
   e.stopPropagation();
   e.preventDefault();
@@ -16,5 +18,9 @@ function moveFocusToSearchInput() {
     input.setSelectionRange(length, length);
   }
 }
+function focusToFirstFoundElement() {
+  let firstFoundElement = document.querySelector(`[data-likec4-search] .${focusable}`);
+  firstFoundElement?.focus();
+}
 
-export { centerY, moveFocusToSearchInput, stopAndPrevent };
+export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent };

package/dist/search/hooks.d.ts

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

package/dist/search/hooks.js

@@ -0,0 +1,35 @@
+import { createSafeContext } from '@mantine/core';
+import { useSelector } from '@xstate/react';
+import { useCallback, useDeferredValue } from 'react';
+
+const [SearchActorContext, useSearchActor] = createSafeContext("SearchActorContext");
+const selectSearchValue = (s) => s.context.searchValue;
+function useSearch() {
+  const { searchActorRef } = useSearchActor();
+  const searchValue = useSelector(searchActorRef, selectSearchValue);
+  const updateSearch = useCallback((search) => {
+    searchActorRef.send({ type: "change.search", search });
+  }, [searchActorRef]);
+  return [searchValue, updateSearch];
+}
+const selectNormalizedSearchValue = (s) => {
+  const v = s.context.searchValue.trim().toLowerCase();
+  return v.length > 1 ? v : "";
+};
+function useNormalizedSearch() {
+  const { searchActorRef } = useSearchActor();
+  return useDeferredValue(useSelector(searchActorRef, selectNormalizedSearchValue));
+}
+function useUpdateSearch() {
+  const { searchActorRef } = useSearchActor();
+  return useCallback((search) => {
+    searchActorRef.send({ type: "change.search", search });
+  }, [searchActorRef]);
+}
+const selectPickViewFor = (s) => s.context.pickViewFor;
+function usePickViewFor() {
+  const { searchActorRef } = useSearchActor();
+  return useSelector(searchActorRef, selectPickViewFor);
+}
+
+export { SearchActorContext, useNormalizedSearch, usePickViewFor, useSearch, useSearchActor, useUpdateSearch };

package/dist/search/searchActor.d.ts

@@ -0,0 +1,90 @@
+import { Fqn } from '@likec4/core/types';
+import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject, ActionFunction } from 'xstate';
+export type SearchActorEvent = {
+    type: 'open';
+    search?: string | undefined;
+} | {
+    type: 'close';
+} | {
+    type: 'change.search';
+    search: string;
+} | {
+    type: 'pickview.open';
+    elementFqn: Fqn;
+} | {
+    type: 'pickview.close';
+};
+export interface SearchContext {
+    openedWithSearch: string | null;
+    searchValue: string;
+    pickViewFor: Fqn | null;
+}
+declare const _searchActorLogic: StateMachine<SearchContext, SearchActorEvent, {}, never, Values<{
+    "change searchValue": {
+        type: "change searchValue";
+        params: NonReducibleUnknown;
+    };
+    "reset pickViewFor": {
+        type: "reset pickViewFor";
+        params: NonReducibleUnknown;
+    };
+}>, never, never, "inactive" | "opened" | "pickView", string, NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
+    readonly id: "search";
+    readonly context: {
+        readonly openedWithSearch: null;
+        readonly searchValue: "";
+        readonly pickViewFor: null;
+    };
+    readonly initial: "inactive";
+    readonly on: {
+        readonly close: {
+            readonly target: ".inactive";
+            readonly actions: "reset pickViewFor";
+        };
+    };
+    readonly states: {
+        readonly inactive: {
+            readonly on: {
+                readonly open: {
+                    readonly target: "opened";
+                    readonly actions: readonly [ ActionFunction<SearchContext, {
+                        type: "open";
+                        search?: string | undefined;
+                    }, SearchActorEvent, undefined, never, never, never, never, never>];
+                };
+            };
+        };
+        readonly opened: {
+            readonly on: {
+                readonly open: {
+                    readonly actions: "change searchValue";
+                };
+                readonly 'change.search': {
+                    readonly actions: "change searchValue";
+                };
+                readonly 'pickview.open': {
+                    readonly target: "pickView";
+                    readonly actions: ActionFunction<SearchContext, {
+                        type: "pickview.open";
+                        elementFqn: Fqn;
+                    }, SearchActorEvent, undefined, never, never, never, never, never>;
+                };
+            };
+        };
+        readonly pickView: {
+            readonly on: {
+                readonly 'pickview.close': {
+                    readonly target: "opened";
+                    readonly actions: "reset pickViewFor";
+                };
+            };
+        };
+    };
+}>;
+export interface SearchActorLogic extends ActorLogicFrom<typeof _searchActorLogic> {
+}
+export declare const searchActorLogic: SearchActorLogic;
+export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;
+export interface SearchActorRef extends ActorRefFrom<SearchActorLogic> {
+}
+export {};

package/dist/search/searchActor.js

@@ -0,0 +1,75 @@
+import { setup, assign, assertEvent } from 'xstate';
+
+const _searchActorLogic = setup({
+  types: {
+    context: {},
+    events: {}
+  },
+  actions: {
+    "change searchValue": assign({
+      searchValue: ({ event, context }) => {
+        assertEvent(event, ["change.search", "open"]);
+        return event.search ?? context.searchValue;
+      }
+    }),
+    "reset pickViewFor": assign({
+      pickViewFor: () => null
+    })
+  }
+}).createMachine({
+  id: "search",
+  context: {
+    openedWithSearch: null,
+    searchValue: "",
+    pickViewFor: null
+  },
+  initial: "inactive",
+  on: {
+    "close": {
+      target: ".inactive",
+      actions: "reset pickViewFor"
+    }
+  },
+  states: {
+    inactive: {
+      on: {
+        "open": {
+          target: "opened",
+          actions: [
+            assign({
+              openedWithSearch: ({ event }) => event.search ?? null,
+              searchValue: ({ event, context }) => event.search ?? context.searchValue
+            })
+          ]
+        }
+      }
+    },
+    opened: {
+      on: {
+        "open": {
+          actions: "change searchValue"
+        },
+        "change.search": {
+          actions: "change searchValue"
+        },
+        "pickview.open": {
+          target: "pickView",
+          actions: assign({
+            pickViewFor: ({ event }) => event.elementFqn
+          })
+        }
+      }
+    },
+    pickView: {
+      on: {
+        "pickview.close": {
+          target: "opened",
+          actions: "reset pickViewFor"
+        }
+      }
+    }
+  }
+});
+const searchActorLogic = _searchActorLogic;
+
+export { searchActorLogic };

package/dist/state/DiagramActorProvider.d.ts

@@ -1,9 +1,11 @@
-import { WhereOperator } from '@likec4/core';
+import { DiagramView, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { Input } from './diagram-machine';
-type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>;
-export declare function DiagramActorProvider({ input: { view, ...inputs }, where, children, }: PropsWithChildren<{
-    input: ActorContextInput;
-    where?: WhereOperator<string, string> | undefined;
+import { PaddingWithUnit } from '../LikeC4Diagram.props';
+export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, }: PropsWithChildren<{
+    view: DiagramView;
+    zoomable: boolean;
+    pannable: boolean;
+    fitViewPadding: PaddingWithUnit;
+    nodesSelectable: boolean;
+    where: WhereOperator | null;
 }>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/state/DiagramActorProvider.js

@@ -1,30 +1,30 @@
 import { jsx } from 'react/jsx-runtime';
-import { useDeepCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, useEffect } from 'react';
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
-import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 
 const selectToggledFeatures = (state) => state.context.toggledFeatures;
 function DiagramActorProvider({
-  input: {
-    view,
-    ...inputs
-  },
+  view,
+  zoomable,
+  pannable,
+  fitViewPadding,
+  nodesSelectable,
   where,
   children
 }) {
   const handlersRef = useDiagramEventHandlersRef();
   const xystore = useStoreApi();
-  const actorRef = useActorRef(
-    diagramMachine.provide({
+  const machineRef = useRef(null);
+  if (!machineRef.current) {
+    machineRef.current = diagramMachine.provide({
       actions: {
         "trigger:NavigateTo": (_, { viewId }) => {
           setTimeout(() => {
@@ -47,31 +47,37 @@ function DiagramActorProvider({
           }
         })
       }
-    }),
+    });
+  }
+  const actorRef = useActorRef(
+    machineRef.current,
     {
-      id: `diagram:${view.id}`,
+      id: `diagram`,
       systemId: "diagram",
       // ...inspector,
       input: {
         xystore,
         view,
-        ...inputs
+        zoomable,
+        pannable,
+        fitViewPadding,
+        nodesSelectable
       }
     }
   );
   const features = useEnabledFeatures();
-  useUpdateEffect(() => {
-    actorRef.send({ type: "update.inputs", inputs });
-  }, [inputs]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     actorRef.send({ type: "update.features", features });
   }, [features]);
+  useEffect(() => {
+    actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
+  }, [zoomable, pannable, fitViewPadding, nodesSelectable]);
   const { xyedges, xynodes } = useViewToNodesEdges({
     view,
     where,
-    nodesSelectable: inputs.nodesSelectable
+    nodesSelectable
   });
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);

package/dist/state/assign.d.ts

@@ -8,7 +8,6 @@ export declare function lastClickedNode(params: {
 }): DiagramContext['lastClickedNode'];
 export declare function mergeXYNodesEdges({ context, event }: ActionArg): Partial<DiagramContext>;
 export declare function focusNodesEdges(params: ActionArg): Partial<DiagramContext>;
-export declare function unfocusNodesEdges({ context }: ActionArg): Partial<DiagramContext>;
 export declare function updateNavigationHistory({ context, event }: ActionArg): Partial<DiagramContext>;
 export declare function navigateBack({ context }: ActionArg): Partial<DiagramContext>;
 export declare function navigateForward({ context }: ActionArg): Partial<DiagramContext>;

package/dist/state/assign.js

@@ -3,8 +3,8 @@ import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
 import { omit, mergeDeep, isEmpty } from 'remeda';
 import { assertEvent } from 'xstate';
-import { Base } from '../base/types.js';
 import { VectorImpl, vector } from '../utils/vector.js';
+import { setDimmed, setData } from '../base/types.Base.js';
 
 function lastClickedNode(params) {
   const { lastClickedNode: lastClickedNode2 } = params.context;
@@ -101,31 +101,21 @@ function focusNodesEdges(params) {
     if (edge.source === focusedNode || edge.target === focusedNode) {
       focused.add(edge.source);
       focused.add(edge.target);
-      return Base.setData(edge, {
+      return setData(edge, {
         dimmed: false,
         active: true
       });
     }
-    return Base.setData(edge, {
+    return setData(edge, {
       dimmed: true,
       active: false
     });
   });
   return {
-    xynodes: _xynodes.map((n) => Base.setDimmed(n, !focused.has(n.id))),
+    xynodes: _xynodes.map((n) => setDimmed(n, !focused.has(n.id))),
     xyedges
   };
 }
-function unfocusNodesEdges({ context }) {
-  const { xynodes, xyedges } = context;
-  return {
-    xynodes: xynodes.map(Base.setDimmed(false)),
-    xyedges: xyedges.map(Base.setData({
-      dimmed: false,
-      active: false
-    }))
-  };
-}
 function updateNavigationHistory({ context, event }) {
   assertEvent(event, "update.view");
   let {
@@ -296,8 +286,8 @@ function resetEdgeControlPoints({ context }) {
       const loopSize = 80;
       const centerOfTopBoundary = new VectorImpl(0, source.height || 0).mul(-0.5).add(sourceCenter);
       return [
-        centerOfTopBoundary.add(new VectorImpl(-80 / 2.5, -80)),
-        centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -80))
+        centerOfTopBoundary.add(new VectorImpl(-loopSize / 2.5, -loopSize)),
+        centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -loopSize))
       ];
     }
     const sourceToTargetVector = targetCenter.sub(sourceCenter);
@@ -332,16 +322,16 @@ function updateActiveWalkthrough({ context }) {
   return {
     xyedges: context.xyedges.map((edge) => {
       const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
-      return Base.setData(edge, {
+      return setData(edge, {
         active,
         dimmed: !active
       });
     }),
     xynodes: context.xynodes.map((node) => {
       const dimmed = step.source !== node.id && step.target !== node.id;
-      return Base.setDimmed(node, dimmed);
+      return setDimmed(node, dimmed);
     })
   };
 }
 
-export { focusNodesEdges, lastClickedNode, mergeXYNodesEdges, navigateBack, navigateForward, resetEdgeControlPoints, unfocusNodesEdges, updateActiveWalkthrough, updateEdgeData, updateNavigationHistory, updateNodeData };
+export { focusNodesEdges, lastClickedNode, mergeXYNodesEdges, navigateBack, navigateForward, resetEdgeControlPoints, updateActiveWalkthrough, updateEdgeData, updateNavigationHistory, updateNodeData };