@likec4/diagram 1.7.3 → 1.8.0

package/dist/mantine.css.d.ts

@@ -1 +1,3 @@
+export declare const whereLight = ":where([data-mantine-color-scheme=\"light\"])";
+export declare const whereDark = ":where([data-mantine-color-scheme=\"dark\"])";
 export declare const mantine: import('@mantine/vanilla-extract').MantineVars;

package/dist/state/DiagramContext.d.ts

@@ -6,6 +6,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
     readonly: boolean;
     showElementLinks: boolean;
     showNavigationButtons: boolean;
+    showNotations: boolean;
     fitViewEnabled: boolean;
     fitViewPadding: number;
     zoomable: boolean;
@@ -79,6 +80,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
     onInit: (xyflow: import('..').XYFlowInstance) => void;
     onNodesChange: import('@xyflow/react').OnNodesChange<import('..').XYFlowNode>;
     onEdgesChange: import('@xyflow/react').OnEdgesChange<import('..').XYFlowEdge>;
+    highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
 }>, "subscribe"> & {
     subscribe: {
         (listener: (selectedState: {
@@ -86,6 +88,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             readonly: boolean;
             showElementLinks: boolean;
             showNavigationButtons: boolean;
+            showNotations: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -215,11 +218,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
                 reconnectable?: boolean | import('@xyflow/system').HandleType;
                 focusable?: boolean;
             }>;
+            highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
         }, previousSelectedState: {
             view: import('@likec4/core').DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
             showNavigationButtons: boolean;
+            showNotations: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -349,12 +354,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
                 reconnectable?: boolean | import('@xyflow/system').HandleType;
                 focusable?: boolean;
             }>;
+            highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
         }) => void): () => void;
         <U>(selector: (state: {
             view: import('@likec4/core').DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
             showNavigationButtons: boolean;
+            showNotations: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -484,6 +491,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
                 reconnectable?: boolean | import('@xyflow/system').HandleType;
                 focusable?: boolean;
             }>;
+            highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
         }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
             equalityFn?: (a: U, b: U) => boolean;
             fireImmediately?: boolean;
@@ -497,6 +505,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -626,11 +635,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             reconnectable?: boolean | import('@xyflow/system').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
     } | Partial<{
         view: import('@likec4/core').DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -760,11 +771,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             reconnectable?: boolean | import('@xyflow/system').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
     }> | ((state: {
         view: import('@likec4/core').DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -894,11 +907,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             reconnectable?: boolean | import('@xyflow/system').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
     }) => {
         view: import('@likec4/core').DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -1028,11 +1043,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             reconnectable?: boolean | import('@xyflow/system').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
     } | Partial<{
         view: import('@likec4/core').DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -1162,6 +1179,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             reconnectable?: boolean | import('@xyflow/system').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
     }>), replace?: boolean | undefined, action?: A | undefined): void;
 }> | null>;
 export type DiagramContextProviderProps = PropsWithChildren<Omit<DiagramInitialState, 'xystore' | 'xyflow' | 'getContainer'> & {

package/dist/state/diagramStore.d.ts

@@ -1,7 +1,7 @@
-import { DiagramNode, DiagramView, Fqn, NodeId, ViewChange, ViewID } from '@likec4/core';
+import { DiagramNode, DiagramView, ElementKind, ElementNotation, Fqn, NodeId, ViewChange, ViewID } from '@likec4/core';
 import { OnEdgesChange, OnNodesChange } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { Exact, Simplify } from 'type-fest';
+import { Simplify } from 'type-fest';
 import { XYStoreApi } from '../hooks/useXYFlow';
 import { ElementIconRenderer, LikeC4DiagramEventHandlers, WhereOperator } from '../LikeC4Diagram.props';
 import { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types';
@@ -14,6 +14,7 @@ export type DiagramInitialState = {
     readonly: boolean;
     showElementLinks: boolean;
     showNavigationButtons: boolean;
+    showNotations: boolean;
     fitViewEnabled: boolean;
     fitViewPadding: number;
     zoomable: boolean;
@@ -79,12 +80,14 @@ export type DiagramState = Simplify<DiagramInitialState & {
     onInit: (xyflow: XYFlowInstance) => void;
     onNodesChange: OnNodesChange<XYFlowNode>;
     onEdgesChange: OnEdgesChange<XYFlowEdge>;
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
 }>;
-export declare function createDiagramStore<T extends Exact<DiagramInitialState, T>>(props: T): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
+export declare function createDiagramStore(props: DiagramInitialState): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
     view: DiagramView;
     readonly: boolean;
     showElementLinks: boolean;
     showNavigationButtons: boolean;
+    showNotations: boolean;
     fitViewEnabled: boolean;
     fitViewPadding: number;
     zoomable: boolean;
@@ -158,6 +161,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
     onInit: (xyflow: XYFlowInstance) => void;
     onNodesChange: OnNodesChange<XYFlowNode>;
     onEdgesChange: OnEdgesChange<XYFlowEdge>;
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
 }>, "subscribe"> & {
     subscribe: {
         (listener: (selectedState: {
@@ -165,6 +169,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             readonly: boolean;
             showElementLinks: boolean;
             showNavigationButtons: boolean;
+            showNotations: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -294,11 +299,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
                 reconnectable?: boolean | import('@xyflow/react').HandleType;
                 focusable?: boolean;
             }>;
+            highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
         }, previousSelectedState: {
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
             showNavigationButtons: boolean;
+            showNotations: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -428,12 +435,14 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
                 reconnectable?: boolean | import('@xyflow/react').HandleType;
                 focusable?: boolean;
             }>;
+            highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
         }) => void): () => void;
         <U>(selector: (state: {
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
             showNavigationButtons: boolean;
+            showNotations: boolean;
             fitViewEnabled: boolean;
             fitViewPadding: number;
             zoomable: boolean;
@@ -563,6 +572,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
                 reconnectable?: boolean | import('@xyflow/react').HandleType;
                 focusable?: boolean;
             }>;
+            highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
         }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
             equalityFn?: (a: U, b: U) => boolean;
             fireImmediately?: boolean;
@@ -576,6 +586,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -705,11 +716,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             reconnectable?: boolean | import('@xyflow/react').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
     } | Partial<{
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -839,11 +852,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             reconnectable?: boolean | import('@xyflow/react').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
     }> | ((state: {
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -973,11 +988,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             reconnectable?: boolean | import('@xyflow/react').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
     }) => {
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -1107,11 +1124,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             reconnectable?: boolean | import('@xyflow/react').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
     } | Partial<{
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
         showNavigationButtons: boolean;
+        showNotations: boolean;
         fitViewEnabled: boolean;
         fitViewPadding: number;
         zoomable: boolean;
@@ -1241,6 +1260,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
             reconnectable?: boolean | import('@xyflow/react').HandleType;
             focusable?: boolean;
         }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
     }>), replace?: boolean | undefined, action?: A | undefined): void;
 }>;
 export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;