@likec4/diagram 1.30.0 → 1.32.0

package/dist/hooks/useDiagram.js

@@ -1,16 +1,15 @@
-import '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
+import { useMemo, useCallback } from 'react';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
 function useDiagram() {
   const actor = useDiagramActorRef();
-  return reactExports.useMemo(() => ({
+  return useMemo(() => ({
     actor,
-    send: actor.send,
+    send: (event) => actor.send(event),
     navigateTo: (viewId, fromNode) => {
       actor.send({
         type: "navigate.to",
@@ -47,7 +46,6 @@ function useDiagram() {
       actor.send({
         type: "update.edgeData",
         edgeId,
-        // @ts-expect-error TODO: fix this
         data
       });
     },
@@ -114,6 +112,9 @@ function useDiagram() {
     },
     unhighlightNotation: () => {
       actor.send({ type: "notations.unhighlight" });
+    },
+    openSearch: (searchValue) => {
+      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
     }
   }), [actor]);
 }
@@ -125,9 +126,10 @@ function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
   const syncLayoutActorRef = useDiagramActorSnapshot((s) => s.context.syncLayoutActorRef);
   return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
 }
-function useDiagramContext(selector, compare = shallowEqual) {
+function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, useCallbackRef((s) => selector(s.context)), compare);
+  const select = useCallback((s) => selector(s.context), deps ?? []);
+  return useSelector(actorRef, select, compare);
 }
 
 export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useDiagramSyncLayoutState };

package/dist/hooks/useMantinePortalProps.d.ts

@@ -2,8 +2,8 @@ export declare function useMantinePortalProps(): {
     portalProps: {
         target: HTMLDivElement;
     };
-    withinPortal: boolean;
+    withinPortal: true;
 } | {
-    withinPortal: boolean;
+    withinPortal: false;
     portalProps?: never;
 };

package/dist/hooks/useMantinePortalProps.js

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { useMemo } from 'react';
 import { useRootContainer } from '../context/RootContainer.js';
 
 function useMantinePortalProps() {
   const target = useRootContainer();
-  return reactExports.useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
+  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
 }
 
 export { useMantinePortalProps };

package/dist/hooks/useSearchActor.d.ts

@@ -0,0 +1,2 @@
+import { SearchActorRef } from '../search/searchActor';
+export declare function useSearchActorRef(): SearchActorRef | null;

package/dist/hooks/useSearchActor.js

@@ -0,0 +1,10 @@
+import { useDiagramActorSnapshot } from './useDiagram.js';
+
+const select = (s) => {
+  return s.children.search ?? null;
+};
+function useSearchActorRef() {
+  return useDiagramActorSnapshot(select, Object.is);
+}
+
+export { useSearchActorRef };

package/dist/hooks/useSetState.js

@@ -1,9 +1,9 @@
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
+import { useState, useCallback } from 'react';
 
 function useSetState(initialState) {
-  const [state, _setState] = reactExports.useState(initialState);
-  const setState = reactExports.useCallback(
+  const [state, _setState] = useState(initialState);
+  const setState = useCallback(
     (statePartial) => _setState((current) => {
       const next = {
         ...current,

package/dist/hooks/useUpdateEffect.js

@@ -1,6 +1,5 @@
 import { useFirstMountState, useCustomCompareEffect } from '@react-hookz/web';
 import { shallowEqual } from 'fast-equals';
-import '../_virtual/index.js';
 
 const noop = () => {
 };
@@ -12,6 +11,9 @@ const depsShallowEqual = (d1, d2) => {
     return false;
   }
   for (const [i, element] of d1.entries()) {
+    if (element === d2[i]) {
+      continue;
+    }
     if (!shallowEqual(element, d2[i])) {
       return false;
     }

package/dist/hooks/useXYFlow.d.ts

@@ -2,7 +2,8 @@ import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
-import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
+import { Dimmed } from '../base/types.Base';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;
@@ -31,23 +32,23 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     focusable?: boolean;
     type: "relationship";
     data: {
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: Dimmed;
         id: EdgeId;
         label: string | null;
         points: NonEmptyArray<Point>;
-        technology: string | undefined;
         color: Color | undefined;
-        labelBBox: BBox | null | undefined;
-        dir: "forward" | "back" | "both" | undefined;
-        line: RelationshipLineType | undefined;
         head: RelationshipArrowType | undefined;
+        line: RelationshipLineType | undefined;
+        dir: "forward" | "back" | "both" | undefined;
+        technology: string | undefined;
         tail: RelationshipArrowType | undefined;
-        navigateTo: ViewId<string> | undefined;
+        labelBBox: BBox | null | undefined;
+        navigateTo: ViewId<string> | null | undefined;
         notes: string | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../base").Base.Dimmed;
     };
 }>;
 export declare function useXYStore<StateSlice = unknown>(selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
@@ -80,23 +81,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>;
     setState: (partial: ReactFlowState<Types.Node, {
@@ -127,23 +128,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }> | Partial<ReactFlowState<Types.Node, {
         id: string;
@@ -173,23 +174,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>> | ((state: ReactFlowState<Types.Node, {
         id: string;
@@ -219,23 +220,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>) => ReactFlowState<Types.Node, {
         id: string;
@@ -265,23 +266,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }> | Partial<ReactFlowState<Types.Node, {
         id: string;
@@ -311,23 +312,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>>), replace?: boolean | undefined) => void;
     subscribe: (listener: (state: ReactFlowState<Types.Node, {
@@ -358,23 +359,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>, prevState: ReactFlowState<Types.Node, {
         id: string;
@@ -404,26 +405,27 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>) => void) => () => void;
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
 export declare const useXYInternalNode: (id: string) => InternalNode<Types.Node> | undefined;
+export declare function useCurrentZoom(): number;
 export declare function useIsZoomTooSmall(): boolean;

package/dist/hooks/useXYFlow.js

@@ -1,19 +1,23 @@
 import { useCallbackRef } from '@mantine/hooks';
-import { useStoreApi, useStore, useReactFlow, useInternalNode } from '@xyflow/react';
+import { useReactFlow, useInternalNode, useStoreApi, useStore } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 
 const useXYFlow = useReactFlow;
 function useXYStore(selector, equalityFn) {
   return useStore(
     useCallbackRef(selector),
-    shallowEqual
+    equalityFn ?? shallowEqual
   );
 }
 const useXYStoreApi = useStoreApi;
 const useXYInternalNode = useInternalNode;
+const selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
+function useCurrentZoom() {
+  return useStore(selectCurrentZoom);
+}
 const selectZoom = (state) => state.transform[2] < 0.2;
 function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }
 
-export { useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi };
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi };

package/dist/index.d.ts

@@ -4,10 +4,8 @@ export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram } from './LikeC4Diagram';
 export type { LikeC4DiagramProps } from './LikeC4Diagram';
 export { Overlay } from './overlays/overlay/Overlay';
-export { useLikeC4ElementsTree, useLikeC4Model, } from './likec4model';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider';
-export { useSetState } from './hooks/useSetState';
-export { useUpdateEffect } from './hooks/useUpdateEffect';
-export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, WhereOperator, } from './LikeC4Diagram.props';
+export * from './custom/hooks';
+export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from './LikeC4Diagram.props';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -3,8 +3,13 @@ export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { Overlay } from './overlays/overlay/Overlay.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
+export { useDiagramEventHandlers } from './context/DiagramEventHandlers.js';
+export { useEnabledFeatures } from './context/DiagramFeatures.js';
+export { useCurrentViewId } from './hooks/useCurrentViewId.js';
+export { useDiagram, useDiagramContext } from './hooks/useDiagram.js';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
+export { useLikeC4Model, useLikeC4Specification } from './likec4model/useLikeC4Model.js';
+export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
 export { useSetState } from './hooks/useSetState.js';
 export { useUpdateEffect } from './hooks/useUpdateEffect.js';
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
-export { useLikeC4ElementsTree } from './likec4model/useLikeC4ElementsTree.js';
-export { useLikeC4Model } from './likec4model/useLikeC4Model.js';

package/dist/likec4diagram/DiagramUI.js

@@ -1,26 +1,31 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { r as reactExports } from '../_virtual/index.js';
+import { memo } from 'react';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
+import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
+import { Search } from '../search/Search.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { Controls } from './ui/controls/Controls.js';
 import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
 import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough.js';
 
-const DiagramUI = reactExports.memo(() => {
+const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,
-    enableDynamicViewWalkthrough
+    enableDynamicViewWalkthrough,
+    enableSearch
   } = useEnabledFeatures();
   const overlaysActorRef = useOverlaysActorRef();
+  const searchActorRef = useSearchActorRef();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
+    enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef })
   ] });
 });
 DiagramUI.displayName = "DiagramUI";

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren, NamedExoticComponent } from 'react';
+import { PropsWithChildren } from 'react';
+import { Simplify } from 'type-fest';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps'>>;
-export declare const LikeC4DiagramXYFlow: NamedExoticComponent<LikeC4DiagramXYFlowProps>;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps' | 'renderNodes'>>>;
+export declare function LikeC4DiagramXYFlow({ background, nodesDraggable, nodesSelectable, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): import("react/jsx-runtime").JSX.Element;