@likec4/diagram 1.18.0 → 1.19.0

package/dist/state/diagramStore.d.ts

@@ -0,0 +1,1705 @@
+import { ComputedNode, DiagramNode, DiagramView, EdgeId, ElementNotation, Fqn, NodeId, ViewChange, ViewId, StepEdgeId } from '@likec4/core';
+import { OnEdgesChange, OnNodesChange } from '@xyflow/react';
+import { MouseEvent as ReactMouseEvent, ReactNode, CSSProperties } from 'react';
+import { RequireExactlyOne, Simplify } from 'type-fest';
+import { XYStoreApi } from '../hooks/useXYFlow';
+import { ElementIconRenderer, LikeC4DiagramEventHandlers, WhereOperator } from '../LikeC4Diagram.props';
+import { DiagramFlowTypes } from '../xyflow/types';
+import { AlignmentMode } from './diagramStore.layout';
+import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import { StoreApi } from 'zustand/vanilla';
+import { OnChange, OnNavigateTo, OnNodeClick, OnCanvasClick, OnEdgeClick, OpenSourceParams } from '..';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
+type RequiredOrNull<T> = {
+    [P in keyof T]-?: NonNullable<T[P]> | null;
+};
+export type DiagramInitialState = {
+    view: DiagramView;
+    readonly: boolean;
+    hasLikeC4Model: boolean;
+    controls: boolean;
+    showNavigationButtons: boolean;
+    showNotations: boolean;
+    fitViewEnabled: boolean;
+    fitViewPadding: number;
+    zoomable: boolean;
+    pannable: boolean;
+    nodesDraggable: boolean;
+    nodesSelectable: boolean;
+    experimentalEdgeEditing: boolean;
+    enableFocusMode: boolean;
+    enableElementDetails: boolean;
+    enableRelationshipBrowser: boolean;
+    enableRelationshipDetails: boolean;
+    enableSearch: boolean;
+    renderIcon: ElementIconRenderer | null;
+    whereFilter: WhereOperator<string, string> | null;
+    enableDynamicViewWalkthrough: boolean;
+    xyflow: DiagramFlowTypes.XYFlowInstance;
+    xystore: XYStoreApi;
+    getContainer: () => HTMLDivElement | null;
+} & RequiredOrNull<LikeC4DiagramEventHandlers>;
+type NodeKind = ComputedNode['kind'];
+export type DiagramState = Simplify<DiagramInitialState & {
+    readonly storeDevId: string;
+    xynodes: DiagramFlowTypes.Node[];
+    xyedges: DiagramFlowTypes.Edge[];
+    viewSyncDebounceTimeout: number | null;
+    viewportChanged: boolean;
+    initialized: boolean;
+    activeOverlay: null | RequireExactlyOne<{
+        elementDetails: Fqn;
+        relationshipsOf: Fqn;
+        edgeDetails: EdgeId;
+    }>;
+    isEditable: () => boolean;
+    isDynamicView: boolean;
+    activeWalkthrough: null | {
+        stepId: StepEdgeId;
+        hasPrevious: boolean;
+        hasNext: boolean;
+        parallelPrefix: string | null;
+    };
+    lastClickedNodeId: string | null;
+    lastClickedEdgeId: string | null;
+    focusedNodeId: string | null;
+    hoveredEdgeId: string | null;
+    dimmed: ReadonlySet<string>;
+    lastOnNavigate: null | {
+        fromView: ViewId;
+        toView: ViewId;
+        fromNode: NodeId | null;
+    };
+    navigationHistory: Array<{
+        viewId: ViewId;
+        nodeId: NodeId | null;
+    }>;
+    navigationHistoryIndex: number;
+    updateView: (view: DiagramView) => void;
+    /**
+     * A function to set the focus on a specific node given its identifier.
+     * It can also be used to remove focus if the input is `false`.
+     */
+    focusOnNode: (nodeId: string | false) => void;
+    setHoveredEdge: (edgeId: string | null) => void;
+    setLastClickedNode: (nodeId: string | null) => void;
+    setLastClickedEdge: (edgeId: string | null) => void;
+    resetFocusAndLastClicked: () => void;
+    getElement(id: Fqn): DiagramNode | null;
+    triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+    /**
+     * @returns true if there was pending save layout
+     */
+    cancelSaveManualLayout: () => boolean;
+    scheduleSaveManualLayout: () => void;
+    triggerSaveManualLayout: () => void;
+    triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+    fitDiagram: (duration?: number) => void;
+    goBack: () => void;
+    goForward: () => void;
+    nextDynamicStep: (increment?: number) => void;
+    activateWalkthrough: (step: EdgeId | DiagramFlowTypes.Edge) => void;
+    stopWalkthrough: () => void;
+    openOverlay: (overlay: NonNullable<DiagramState['activeOverlay']>) => void;
+    closeOverlay: () => void;
+    onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+    onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+    onEdgesChange: OnEdgesChange<DiagramFlowTypes.Edge>;
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+    resetEdgeControlPoints: () => void;
+    align: (mode: AlignmentMode) => void;
+    onOpenSourceView: () => void;
+}>;
+export declare function createDiagramStore(props: DiagramInitialState): UseBoundStoreWithEqualityFn<Omit<Omit< StoreApi<{
+    view: DiagramView;
+    readonly: boolean;
+    hasLikeC4Model: boolean;
+    controls: boolean;
+    showNavigationButtons: boolean;
+    showNotations: boolean;
+    fitViewEnabled: boolean;
+    fitViewPadding: number;
+    zoomable: boolean;
+    pannable: boolean;
+    nodesDraggable: boolean;
+    nodesSelectable: boolean;
+    experimentalEdgeEditing: boolean;
+    enableFocusMode: boolean;
+    enableElementDetails: boolean;
+    enableRelationshipBrowser: boolean;
+    enableRelationshipDetails: boolean;
+    enableSearch: boolean;
+    renderIcon: ElementIconRenderer | null;
+    whereFilter: WhereOperator<string, string> | null;
+    enableDynamicViewWalkthrough: boolean;
+    xyflow: DiagramFlowTypes.XYFlowInstance;
+    xystore: XYStoreApi;
+    getContainer: () => HTMLDivElement | null;
+    onChange: OnChange | null;
+    onNavigateTo: OnNavigateTo<ViewId> | null;
+    onNodeClick: OnNodeClick | null;
+    onNodeContextMenu: OnNodeClick | null;
+    onCanvasContextMenu: OnCanvasClick | null;
+    onEdgeClick: OnEdgeClick | null;
+    onEdgeContextMenu: OnEdgeClick | null;
+    onCanvasClick: OnCanvasClick | null;
+    onCanvasDblClick: OnCanvasClick | null;
+    onBurgerMenuClick: (() => void) | null;
+    onOpenSource: ((params: OpenSourceParams) => void) | null;
+    readonly storeDevId: string;
+    xynodes: DiagramFlowTypes.Node[];
+    xyedges: DiagramFlowTypes.Edge[];
+    viewSyncDebounceTimeout: number | null;
+    viewportChanged: boolean;
+    initialized: boolean;
+    activeOverlay: null | RequireExactlyOne<{
+        elementDetails: Fqn;
+        relationshipsOf: Fqn;
+        edgeDetails: EdgeId;
+    }>;
+    isEditable: () => boolean;
+    isDynamicView: boolean;
+    activeWalkthrough: null | {
+        stepId: StepEdgeId;
+        hasPrevious: boolean;
+        hasNext: boolean;
+        parallelPrefix: string | null;
+    };
+    lastClickedNodeId: string | null;
+    lastClickedEdgeId: string | null;
+    focusedNodeId: string | null;
+    hoveredEdgeId: string | null;
+    dimmed: ReadonlySet<string>;
+    lastOnNavigate: null | {
+        fromView: ViewId;
+        toView: ViewId;
+        fromNode: NodeId | null;
+    };
+    navigationHistory: Array<{
+        viewId: ViewId;
+        nodeId: NodeId | null;
+    }>;
+    navigationHistoryIndex: number;
+    updateView: (view: DiagramView) => void;
+    focusOnNode: (nodeId: string | false) => void;
+    setHoveredEdge: (edgeId: string | null) => void;
+    setLastClickedNode: (nodeId: string | null) => void;
+    setLastClickedEdge: (edgeId: string | null) => void;
+    resetFocusAndLastClicked: () => void;
+    getElement: (id: Fqn) => DiagramNode | null;
+    triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+    cancelSaveManualLayout: () => boolean;
+    scheduleSaveManualLayout: () => void;
+    triggerSaveManualLayout: () => void;
+    triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+    fitDiagram: (duration?: number) => void;
+    goBack: () => void;
+    goForward: () => void;
+    nextDynamicStep: (increment?: number) => void;
+    activateWalkthrough: (step: EdgeId | DiagramFlowTypes.Edge) => void;
+    stopWalkthrough: () => void;
+    openOverlay: (overlay: NonNullable<DiagramState["activeOverlay"]>) => void;
+    closeOverlay: () => void;
+    onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+    onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+    onEdgesChange: OnEdgesChange<DiagramFlowTypes.Edge>;
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+    resetEdgeControlPoints: () => void;
+    align: (mode: AlignmentMode) => void;
+    onOpenSourceView: () => void;
+}>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: {
+            view: DiagramView;
+            readonly: boolean;
+            hasLikeC4Model: boolean;
+            controls: boolean;
+            showNavigationButtons: boolean;
+            showNotations: boolean;
+            fitViewEnabled: boolean;
+            fitViewPadding: number;
+            zoomable: boolean;
+            pannable: boolean;
+            nodesDraggable: boolean;
+            nodesSelectable: boolean;
+            experimentalEdgeEditing: boolean;
+            enableFocusMode: boolean;
+            enableElementDetails: boolean;
+            enableRelationshipBrowser: boolean;
+            enableRelationshipDetails: boolean;
+            enableSearch: boolean;
+            renderIcon: ElementIconRenderer | null;
+            whereFilter: WhereOperator<string, string> | null;
+            enableDynamicViewWalkthrough: boolean;
+            xyflow: DiagramFlowTypes.XYFlowInstance;
+            xystore: XYStoreApi;
+            getContainer: () => HTMLDivElement | null;
+            onChange: OnChange | null;
+            onNavigateTo: OnNavigateTo<ViewId> | null;
+            onNodeClick: OnNodeClick | null;
+            onNodeContextMenu: OnNodeClick | null;
+            onCanvasContextMenu: OnCanvasClick | null;
+            onEdgeClick: OnEdgeClick | null;
+            onEdgeContextMenu: OnEdgeClick | null;
+            onCanvasClick: OnCanvasClick | null;
+            onCanvasDblClick: OnCanvasClick | null;
+            onBurgerMenuClick: (() => void) | null;
+            onOpenSource: ((params: OpenSourceParams) => void) | null;
+            readonly storeDevId: string;
+            xynodes: DiagramFlowTypes.Node[];
+            xyedges: {
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }[];
+            viewSyncDebounceTimeout: number | null;
+            viewportChanged: boolean;
+            initialized: boolean;
+            activeOverlay: null | RequireExactlyOne<{
+                elementDetails: Fqn;
+                relationshipsOf: Fqn;
+                edgeDetails: EdgeId;
+            }>;
+            isEditable: () => boolean;
+            isDynamicView: boolean;
+            activeWalkthrough: null | {
+                stepId: StepEdgeId;
+                hasPrevious: boolean;
+                hasNext: boolean;
+                parallelPrefix: string | null;
+            };
+            lastClickedNodeId: string | null;
+            lastClickedEdgeId: string | null;
+            focusedNodeId: string | null;
+            hoveredEdgeId: string | null;
+            dimmed: ReadonlySet<string>;
+            lastOnNavigate: null | {
+                fromView: ViewId;
+                toView: ViewId;
+                fromNode: NodeId | null;
+            };
+            navigationHistory: Array<{
+                viewId: ViewId;
+                nodeId: NodeId | null;
+            }>;
+            navigationHistoryIndex: number;
+            updateView: (view: DiagramView) => void;
+            focusOnNode: (nodeId: string | false) => void;
+            setHoveredEdge: (edgeId: string | null) => void;
+            setLastClickedNode: (nodeId: string | null) => void;
+            setLastClickedEdge: (edgeId: string | null) => void;
+            resetFocusAndLastClicked: () => void;
+            getElement: (id: Fqn) => DiagramNode | null;
+            triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+            cancelSaveManualLayout: () => boolean;
+            scheduleSaveManualLayout: () => void;
+            triggerSaveManualLayout: () => void;
+            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+            fitDiagram: (duration?: number) => void;
+            goBack: () => void;
+            goForward: () => void;
+            nextDynamicStep: (increment?: number) => void;
+            activateWalkthrough: (step: EdgeId | {
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }) => void;
+            stopWalkthrough: () => void;
+            openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+                elementDetails: Fqn;
+                relationshipsOf: Fqn;
+                edgeDetails: EdgeId;
+            }> | null>) => void;
+            closeOverlay: () => void;
+            onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+            onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+            onEdgesChange: OnEdgesChange<{
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }>;
+            highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+            resetEdgeControlPoints: () => void;
+            align: (mode: AlignmentMode) => void;
+            onOpenSourceView: () => void;
+        }, previousSelectedState: {
+            view: DiagramView;
+            readonly: boolean;
+            hasLikeC4Model: boolean;
+            controls: boolean;
+            showNavigationButtons: boolean;
+            showNotations: boolean;
+            fitViewEnabled: boolean;
+            fitViewPadding: number;
+            zoomable: boolean;
+            pannable: boolean;
+            nodesDraggable: boolean;
+            nodesSelectable: boolean;
+            experimentalEdgeEditing: boolean;
+            enableFocusMode: boolean;
+            enableElementDetails: boolean;
+            enableRelationshipBrowser: boolean;
+            enableRelationshipDetails: boolean;
+            enableSearch: boolean;
+            renderIcon: ElementIconRenderer | null;
+            whereFilter: WhereOperator<string, string> | null;
+            enableDynamicViewWalkthrough: boolean;
+            xyflow: DiagramFlowTypes.XYFlowInstance;
+            xystore: XYStoreApi;
+            getContainer: () => HTMLDivElement | null;
+            onChange: OnChange | null;
+            onNavigateTo: OnNavigateTo<ViewId> | null;
+            onNodeClick: OnNodeClick | null;
+            onNodeContextMenu: OnNodeClick | null;
+            onCanvasContextMenu: OnCanvasClick | null;
+            onEdgeClick: OnEdgeClick | null;
+            onEdgeContextMenu: OnEdgeClick | null;
+            onCanvasClick: OnCanvasClick | null;
+            onCanvasDblClick: OnCanvasClick | null;
+            onBurgerMenuClick: (() => void) | null;
+            onOpenSource: ((params: OpenSourceParams) => void) | null;
+            readonly storeDevId: string;
+            xynodes: DiagramFlowTypes.Node[];
+            xyedges: {
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }[];
+            viewSyncDebounceTimeout: number | null;
+            viewportChanged: boolean;
+            initialized: boolean;
+            activeOverlay: null | RequireExactlyOne<{
+                elementDetails: Fqn;
+                relationshipsOf: Fqn;
+                edgeDetails: EdgeId;
+            }>;
+            isEditable: () => boolean;
+            isDynamicView: boolean;
+            activeWalkthrough: null | {
+                stepId: StepEdgeId;
+                hasPrevious: boolean;
+                hasNext: boolean;
+                parallelPrefix: string | null;
+            };
+            lastClickedNodeId: string | null;
+            lastClickedEdgeId: string | null;
+            focusedNodeId: string | null;
+            hoveredEdgeId: string | null;
+            dimmed: ReadonlySet<string>;
+            lastOnNavigate: null | {
+                fromView: ViewId;
+                toView: ViewId;
+                fromNode: NodeId | null;
+            };
+            navigationHistory: Array<{
+                viewId: ViewId;
+                nodeId: NodeId | null;
+            }>;
+            navigationHistoryIndex: number;
+            updateView: (view: DiagramView) => void;
+            focusOnNode: (nodeId: string | false) => void;
+            setHoveredEdge: (edgeId: string | null) => void;
+            setLastClickedNode: (nodeId: string | null) => void;
+            setLastClickedEdge: (edgeId: string | null) => void;
+            resetFocusAndLastClicked: () => void;
+            getElement: (id: Fqn) => DiagramNode | null;
+            triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+            cancelSaveManualLayout: () => boolean;
+            scheduleSaveManualLayout: () => void;
+            triggerSaveManualLayout: () => void;
+            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+            fitDiagram: (duration?: number) => void;
+            goBack: () => void;
+            goForward: () => void;
+            nextDynamicStep: (increment?: number) => void;
+            activateWalkthrough: (step: EdgeId | {
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }) => void;
+            stopWalkthrough: () => void;
+            openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+                elementDetails: Fqn;
+                relationshipsOf: Fqn;
+                edgeDetails: EdgeId;
+            }> | null>) => void;
+            closeOverlay: () => void;
+            onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+            onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+            onEdgesChange: OnEdgesChange<{
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }>;
+            highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+            resetEdgeControlPoints: () => void;
+            align: (mode: AlignmentMode) => void;
+            onOpenSourceView: () => void;
+        }) => void): () => void;
+        <U>(selector: (state: {
+            view: DiagramView;
+            readonly: boolean;
+            hasLikeC4Model: boolean;
+            controls: boolean;
+            showNavigationButtons: boolean;
+            showNotations: boolean;
+            fitViewEnabled: boolean;
+            fitViewPadding: number;
+            zoomable: boolean;
+            pannable: boolean;
+            nodesDraggable: boolean;
+            nodesSelectable: boolean;
+            experimentalEdgeEditing: boolean;
+            enableFocusMode: boolean;
+            enableElementDetails: boolean;
+            enableRelationshipBrowser: boolean;
+            enableRelationshipDetails: boolean;
+            enableSearch: boolean;
+            renderIcon: ElementIconRenderer | null;
+            whereFilter: WhereOperator<string, string> | null;
+            enableDynamicViewWalkthrough: boolean;
+            xyflow: DiagramFlowTypes.XYFlowInstance;
+            xystore: XYStoreApi;
+            getContainer: () => HTMLDivElement | null;
+            onChange: OnChange | null;
+            onNavigateTo: OnNavigateTo<ViewId> | null;
+            onNodeClick: OnNodeClick | null;
+            onNodeContextMenu: OnNodeClick | null;
+            onCanvasContextMenu: OnCanvasClick | null;
+            onEdgeClick: OnEdgeClick | null;
+            onEdgeContextMenu: OnEdgeClick | null;
+            onCanvasClick: OnCanvasClick | null;
+            onCanvasDblClick: OnCanvasClick | null;
+            onBurgerMenuClick: (() => void) | null;
+            onOpenSource: ((params: OpenSourceParams) => void) | null;
+            readonly storeDevId: string;
+            xynodes: DiagramFlowTypes.Node[];
+            xyedges: {
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }[];
+            viewSyncDebounceTimeout: number | null;
+            viewportChanged: boolean;
+            initialized: boolean;
+            activeOverlay: null | RequireExactlyOne<{
+                elementDetails: Fqn;
+                relationshipsOf: Fqn;
+                edgeDetails: EdgeId;
+            }>;
+            isEditable: () => boolean;
+            isDynamicView: boolean;
+            activeWalkthrough: null | {
+                stepId: StepEdgeId;
+                hasPrevious: boolean;
+                hasNext: boolean;
+                parallelPrefix: string | null;
+            };
+            lastClickedNodeId: string | null;
+            lastClickedEdgeId: string | null;
+            focusedNodeId: string | null;
+            hoveredEdgeId: string | null;
+            dimmed: ReadonlySet<string>;
+            lastOnNavigate: null | {
+                fromView: ViewId;
+                toView: ViewId;
+                fromNode: NodeId | null;
+            };
+            navigationHistory: Array<{
+                viewId: ViewId;
+                nodeId: NodeId | null;
+            }>;
+            navigationHistoryIndex: number;
+            updateView: (view: DiagramView) => void;
+            focusOnNode: (nodeId: string | false) => void;
+            setHoveredEdge: (edgeId: string | null) => void;
+            setLastClickedNode: (nodeId: string | null) => void;
+            setLastClickedEdge: (edgeId: string | null) => void;
+            resetFocusAndLastClicked: () => void;
+            getElement: (id: Fqn) => DiagramNode | null;
+            triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+            cancelSaveManualLayout: () => boolean;
+            scheduleSaveManualLayout: () => void;
+            triggerSaveManualLayout: () => void;
+            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+            fitDiagram: (duration?: number) => void;
+            goBack: () => void;
+            goForward: () => void;
+            nextDynamicStep: (increment?: number) => void;
+            activateWalkthrough: (step: EdgeId | {
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }) => void;
+            stopWalkthrough: () => void;
+            openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+                elementDetails: Fqn;
+                relationshipsOf: Fqn;
+                edgeDetails: EdgeId;
+            }> | null>) => void;
+            closeOverlay: () => void;
+            onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+            onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+            onEdgesChange: OnEdgesChange<{
+                id: string;
+                type: "relationship";
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                data: DiagramFlowTypes.DiagramEdgeData;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+            }>;
+            highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+            resetEdgeControlPoints: () => void;
+            align: (mode: AlignmentMode) => void;
+            onOpenSourceView: () => void;
+        }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: (a: U, b: U) => boolean;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+}, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: {
+        view: DiagramView;
+        readonly: boolean;
+        hasLikeC4Model: boolean;
+        controls: boolean;
+        showNavigationButtons: boolean;
+        showNotations: boolean;
+        fitViewEnabled: boolean;
+        fitViewPadding: number;
+        zoomable: boolean;
+        pannable: boolean;
+        nodesDraggable: boolean;
+        nodesSelectable: boolean;
+        experimentalEdgeEditing: boolean;
+        enableFocusMode: boolean;
+        enableElementDetails: boolean;
+        enableRelationshipBrowser: boolean;
+        enableRelationshipDetails: boolean;
+        enableSearch: boolean;
+        renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
+        enableDynamicViewWalkthrough: boolean;
+        xyflow: DiagramFlowTypes.XYFlowInstance;
+        xystore: XYStoreApi;
+        getContainer: () => HTMLDivElement | null;
+        onChange: OnChange | null;
+        onNavigateTo: OnNavigateTo<ViewId> | null;
+        onNodeClick: OnNodeClick | null;
+        onNodeContextMenu: OnNodeClick | null;
+        onCanvasContextMenu: OnCanvasClick | null;
+        onEdgeClick: OnEdgeClick | null;
+        onEdgeContextMenu: OnEdgeClick | null;
+        onCanvasClick: OnCanvasClick | null;
+        onCanvasDblClick: OnCanvasClick | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSource: ((params: OpenSourceParams) => void) | null;
+        readonly storeDevId: string;
+        xynodes: DiagramFlowTypes.Node[];
+        xyedges: {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }[];
+        viewSyncDebounceTimeout: number | null;
+        viewportChanged: boolean;
+        initialized: boolean;
+        activeOverlay: null | RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }>;
+        isEditable: () => boolean;
+        isDynamicView: boolean;
+        activeWalkthrough: null | {
+            stepId: StepEdgeId;
+            hasPrevious: boolean;
+            hasNext: boolean;
+            parallelPrefix: string | null;
+        };
+        lastClickedNodeId: string | null;
+        lastClickedEdgeId: string | null;
+        focusedNodeId: string | null;
+        hoveredEdgeId: string | null;
+        dimmed: ReadonlySet<string>;
+        lastOnNavigate: null | {
+            fromView: ViewId;
+            toView: ViewId;
+            fromNode: NodeId | null;
+        };
+        navigationHistory: Array<{
+            viewId: ViewId;
+            nodeId: NodeId | null;
+        }>;
+        navigationHistoryIndex: number;
+        updateView: (view: DiagramView) => void;
+        focusOnNode: (nodeId: string | false) => void;
+        setHoveredEdge: (edgeId: string | null) => void;
+        setLastClickedNode: (nodeId: string | null) => void;
+        setLastClickedEdge: (edgeId: string | null) => void;
+        resetFocusAndLastClicked: () => void;
+        getElement: (id: Fqn) => DiagramNode | null;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+        cancelSaveManualLayout: () => boolean;
+        scheduleSaveManualLayout: () => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        goBack: () => void;
+        goForward: () => void;
+        nextDynamicStep: (increment?: number) => void;
+        activateWalkthrough: (step: EdgeId | {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }) => void;
+        stopWalkthrough: () => void;
+        openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }> | null>) => void;
+        closeOverlay: () => void;
+        onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+        onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+        onEdgesChange: OnEdgesChange<{
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+        resetEdgeControlPoints: () => void;
+        align: (mode: AlignmentMode) => void;
+        onOpenSourceView: () => void;
+    } | Partial<{
+        view: DiagramView;
+        readonly: boolean;
+        hasLikeC4Model: boolean;
+        controls: boolean;
+        showNavigationButtons: boolean;
+        showNotations: boolean;
+        fitViewEnabled: boolean;
+        fitViewPadding: number;
+        zoomable: boolean;
+        pannable: boolean;
+        nodesDraggable: boolean;
+        nodesSelectable: boolean;
+        experimentalEdgeEditing: boolean;
+        enableFocusMode: boolean;
+        enableElementDetails: boolean;
+        enableRelationshipBrowser: boolean;
+        enableRelationshipDetails: boolean;
+        enableSearch: boolean;
+        renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
+        enableDynamicViewWalkthrough: boolean;
+        xyflow: DiagramFlowTypes.XYFlowInstance;
+        xystore: XYStoreApi;
+        getContainer: () => HTMLDivElement | null;
+        onChange: OnChange | null;
+        onNavigateTo: OnNavigateTo<ViewId> | null;
+        onNodeClick: OnNodeClick | null;
+        onNodeContextMenu: OnNodeClick | null;
+        onCanvasContextMenu: OnCanvasClick | null;
+        onEdgeClick: OnEdgeClick | null;
+        onEdgeContextMenu: OnEdgeClick | null;
+        onCanvasClick: OnCanvasClick | null;
+        onCanvasDblClick: OnCanvasClick | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSource: ((params: OpenSourceParams) => void) | null;
+        readonly storeDevId: string;
+        xynodes: DiagramFlowTypes.Node[];
+        xyedges: {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }[];
+        viewSyncDebounceTimeout: number | null;
+        viewportChanged: boolean;
+        initialized: boolean;
+        activeOverlay: null | RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }>;
+        isEditable: () => boolean;
+        isDynamicView: boolean;
+        activeWalkthrough: null | {
+            stepId: StepEdgeId;
+            hasPrevious: boolean;
+            hasNext: boolean;
+            parallelPrefix: string | null;
+        };
+        lastClickedNodeId: string | null;
+        lastClickedEdgeId: string | null;
+        focusedNodeId: string | null;
+        hoveredEdgeId: string | null;
+        dimmed: ReadonlySet<string>;
+        lastOnNavigate: null | {
+            fromView: ViewId;
+            toView: ViewId;
+            fromNode: NodeId | null;
+        };
+        navigationHistory: Array<{
+            viewId: ViewId;
+            nodeId: NodeId | null;
+        }>;
+        navigationHistoryIndex: number;
+        updateView: (view: DiagramView) => void;
+        focusOnNode: (nodeId: string | false) => void;
+        setHoveredEdge: (edgeId: string | null) => void;
+        setLastClickedNode: (nodeId: string | null) => void;
+        setLastClickedEdge: (edgeId: string | null) => void;
+        resetFocusAndLastClicked: () => void;
+        getElement: (id: Fqn) => DiagramNode | null;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+        cancelSaveManualLayout: () => boolean;
+        scheduleSaveManualLayout: () => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        goBack: () => void;
+        goForward: () => void;
+        nextDynamicStep: (increment?: number) => void;
+        activateWalkthrough: (step: EdgeId | {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }) => void;
+        stopWalkthrough: () => void;
+        openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }> | null>) => void;
+        closeOverlay: () => void;
+        onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+        onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+        onEdgesChange: OnEdgesChange<{
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+        resetEdgeControlPoints: () => void;
+        align: (mode: AlignmentMode) => void;
+        onOpenSourceView: () => void;
+    }> | ((state: {
+        view: DiagramView;
+        readonly: boolean;
+        hasLikeC4Model: boolean;
+        controls: boolean;
+        showNavigationButtons: boolean;
+        showNotations: boolean;
+        fitViewEnabled: boolean;
+        fitViewPadding: number;
+        zoomable: boolean;
+        pannable: boolean;
+        nodesDraggable: boolean;
+        nodesSelectable: boolean;
+        experimentalEdgeEditing: boolean;
+        enableFocusMode: boolean;
+        enableElementDetails: boolean;
+        enableRelationshipBrowser: boolean;
+        enableRelationshipDetails: boolean;
+        enableSearch: boolean;
+        renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
+        enableDynamicViewWalkthrough: boolean;
+        xyflow: DiagramFlowTypes.XYFlowInstance;
+        xystore: XYStoreApi;
+        getContainer: () => HTMLDivElement | null;
+        onChange: OnChange | null;
+        onNavigateTo: OnNavigateTo<ViewId> | null;
+        onNodeClick: OnNodeClick | null;
+        onNodeContextMenu: OnNodeClick | null;
+        onCanvasContextMenu: OnCanvasClick | null;
+        onEdgeClick: OnEdgeClick | null;
+        onEdgeContextMenu: OnEdgeClick | null;
+        onCanvasClick: OnCanvasClick | null;
+        onCanvasDblClick: OnCanvasClick | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSource: ((params: OpenSourceParams) => void) | null;
+        readonly storeDevId: string;
+        xynodes: DiagramFlowTypes.Node[];
+        xyedges: {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }[];
+        viewSyncDebounceTimeout: number | null;
+        viewportChanged: boolean;
+        initialized: boolean;
+        activeOverlay: null | RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }>;
+        isEditable: () => boolean;
+        isDynamicView: boolean;
+        activeWalkthrough: null | {
+            stepId: StepEdgeId;
+            hasPrevious: boolean;
+            hasNext: boolean;
+            parallelPrefix: string | null;
+        };
+        lastClickedNodeId: string | null;
+        lastClickedEdgeId: string | null;
+        focusedNodeId: string | null;
+        hoveredEdgeId: string | null;
+        dimmed: ReadonlySet<string>;
+        lastOnNavigate: null | {
+            fromView: ViewId;
+            toView: ViewId;
+            fromNode: NodeId | null;
+        };
+        navigationHistory: Array<{
+            viewId: ViewId;
+            nodeId: NodeId | null;
+        }>;
+        navigationHistoryIndex: number;
+        updateView: (view: DiagramView) => void;
+        focusOnNode: (nodeId: string | false) => void;
+        setHoveredEdge: (edgeId: string | null) => void;
+        setLastClickedNode: (nodeId: string | null) => void;
+        setLastClickedEdge: (edgeId: string | null) => void;
+        resetFocusAndLastClicked: () => void;
+        getElement: (id: Fqn) => DiagramNode | null;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+        cancelSaveManualLayout: () => boolean;
+        scheduleSaveManualLayout: () => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        goBack: () => void;
+        goForward: () => void;
+        nextDynamicStep: (increment?: number) => void;
+        activateWalkthrough: (step: EdgeId | {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }) => void;
+        stopWalkthrough: () => void;
+        openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }> | null>) => void;
+        closeOverlay: () => void;
+        onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+        onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+        onEdgesChange: OnEdgesChange<{
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+        resetEdgeControlPoints: () => void;
+        align: (mode: AlignmentMode) => void;
+        onOpenSourceView: () => void;
+    }) => {
+        view: DiagramView;
+        readonly: boolean;
+        hasLikeC4Model: boolean;
+        controls: boolean;
+        showNavigationButtons: boolean;
+        showNotations: boolean;
+        fitViewEnabled: boolean;
+        fitViewPadding: number;
+        zoomable: boolean;
+        pannable: boolean;
+        nodesDraggable: boolean;
+        nodesSelectable: boolean;
+        experimentalEdgeEditing: boolean;
+        enableFocusMode: boolean;
+        enableElementDetails: boolean;
+        enableRelationshipBrowser: boolean;
+        enableRelationshipDetails: boolean;
+        enableSearch: boolean;
+        renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
+        enableDynamicViewWalkthrough: boolean;
+        xyflow: DiagramFlowTypes.XYFlowInstance;
+        xystore: XYStoreApi;
+        getContainer: () => HTMLDivElement | null;
+        onChange: OnChange | null;
+        onNavigateTo: OnNavigateTo<ViewId> | null;
+        onNodeClick: OnNodeClick | null;
+        onNodeContextMenu: OnNodeClick | null;
+        onCanvasContextMenu: OnCanvasClick | null;
+        onEdgeClick: OnEdgeClick | null;
+        onEdgeContextMenu: OnEdgeClick | null;
+        onCanvasClick: OnCanvasClick | null;
+        onCanvasDblClick: OnCanvasClick | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSource: ((params: OpenSourceParams) => void) | null;
+        readonly storeDevId: string;
+        xynodes: DiagramFlowTypes.Node[];
+        xyedges: {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }[];
+        viewSyncDebounceTimeout: number | null;
+        viewportChanged: boolean;
+        initialized: boolean;
+        activeOverlay: null | RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }>;
+        isEditable: () => boolean;
+        isDynamicView: boolean;
+        activeWalkthrough: null | {
+            stepId: StepEdgeId;
+            hasPrevious: boolean;
+            hasNext: boolean;
+            parallelPrefix: string | null;
+        };
+        lastClickedNodeId: string | null;
+        lastClickedEdgeId: string | null;
+        focusedNodeId: string | null;
+        hoveredEdgeId: string | null;
+        dimmed: ReadonlySet<string>;
+        lastOnNavigate: null | {
+            fromView: ViewId;
+            toView: ViewId;
+            fromNode: NodeId | null;
+        };
+        navigationHistory: Array<{
+            viewId: ViewId;
+            nodeId: NodeId | null;
+        }>;
+        navigationHistoryIndex: number;
+        updateView: (view: DiagramView) => void;
+        focusOnNode: (nodeId: string | false) => void;
+        setHoveredEdge: (edgeId: string | null) => void;
+        setLastClickedNode: (nodeId: string | null) => void;
+        setLastClickedEdge: (edgeId: string | null) => void;
+        resetFocusAndLastClicked: () => void;
+        getElement: (id: Fqn) => DiagramNode | null;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+        cancelSaveManualLayout: () => boolean;
+        scheduleSaveManualLayout: () => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        goBack: () => void;
+        goForward: () => void;
+        nextDynamicStep: (increment?: number) => void;
+        activateWalkthrough: (step: EdgeId | {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }) => void;
+        stopWalkthrough: () => void;
+        openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }> | null>) => void;
+        closeOverlay: () => void;
+        onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+        onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+        onEdgesChange: OnEdgesChange<{
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+        resetEdgeControlPoints: () => void;
+        align: (mode: AlignmentMode) => void;
+        onOpenSourceView: () => void;
+    } | Partial<{
+        view: DiagramView;
+        readonly: boolean;
+        hasLikeC4Model: boolean;
+        controls: boolean;
+        showNavigationButtons: boolean;
+        showNotations: boolean;
+        fitViewEnabled: boolean;
+        fitViewPadding: number;
+        zoomable: boolean;
+        pannable: boolean;
+        nodesDraggable: boolean;
+        nodesSelectable: boolean;
+        experimentalEdgeEditing: boolean;
+        enableFocusMode: boolean;
+        enableElementDetails: boolean;
+        enableRelationshipBrowser: boolean;
+        enableRelationshipDetails: boolean;
+        enableSearch: boolean;
+        renderIcon: ElementIconRenderer | null;
+        whereFilter: WhereOperator<string, string> | null;
+        enableDynamicViewWalkthrough: boolean;
+        xyflow: DiagramFlowTypes.XYFlowInstance;
+        xystore: XYStoreApi;
+        getContainer: () => HTMLDivElement | null;
+        onChange: OnChange | null;
+        onNavigateTo: OnNavigateTo<ViewId> | null;
+        onNodeClick: OnNodeClick | null;
+        onNodeContextMenu: OnNodeClick | null;
+        onCanvasContextMenu: OnCanvasClick | null;
+        onEdgeClick: OnEdgeClick | null;
+        onEdgeContextMenu: OnEdgeClick | null;
+        onCanvasClick: OnCanvasClick | null;
+        onCanvasDblClick: OnCanvasClick | null;
+        onBurgerMenuClick: (() => void) | null;
+        onOpenSource: ((params: OpenSourceParams) => void) | null;
+        readonly storeDevId: string;
+        xynodes: DiagramFlowTypes.Node[];
+        xyedges: {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }[];
+        viewSyncDebounceTimeout: number | null;
+        viewportChanged: boolean;
+        initialized: boolean;
+        activeOverlay: null | RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }>;
+        isEditable: () => boolean;
+        isDynamicView: boolean;
+        activeWalkthrough: null | {
+            stepId: StepEdgeId;
+            hasPrevious: boolean;
+            hasNext: boolean;
+            parallelPrefix: string | null;
+        };
+        lastClickedNodeId: string | null;
+        lastClickedEdgeId: string | null;
+        focusedNodeId: string | null;
+        hoveredEdgeId: string | null;
+        dimmed: ReadonlySet<string>;
+        lastOnNavigate: null | {
+            fromView: ViewId;
+            toView: ViewId;
+            fromNode: NodeId | null;
+        };
+        navigationHistory: Array<{
+            viewId: ViewId;
+            nodeId: NodeId | null;
+        }>;
+        navigationHistoryIndex: number;
+        updateView: (view: DiagramView) => void;
+        focusOnNode: (nodeId: string | false) => void;
+        setHoveredEdge: (edgeId: string | null) => void;
+        setLastClickedNode: (nodeId: string | null) => void;
+        setLastClickedEdge: (edgeId: string | null) => void;
+        resetFocusAndLastClicked: () => void;
+        getElement: (id: Fqn) => DiagramNode | null;
+        triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void;
+        cancelSaveManualLayout: () => boolean;
+        scheduleSaveManualLayout: () => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        goBack: () => void;
+        goForward: () => void;
+        nextDynamicStep: (increment?: number) => void;
+        activateWalkthrough: (step: EdgeId | {
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }) => void;
+        stopWalkthrough: () => void;
+        openOverlay: (overlay: NonNullable<RequireExactlyOne<{
+            elementDetails: Fqn;
+            relationshipsOf: Fqn;
+            edgeDetails: EdgeId;
+        }> | null>) => void;
+        closeOverlay: () => void;
+        onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void;
+        onNodesChange: OnNodesChange<DiagramFlowTypes.Node>;
+        onEdgesChange: OnEdgesChange<{
+            id: string;
+            type: "relationship";
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            data: DiagramFlowTypes.DiagramEdgeData;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+        }>;
+        highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void;
+        resetEdgeControlPoints: () => void;
+        align: (mode: AlignmentMode) => void;
+        onOpenSourceView: () => void;
+    }>), replace?: boolean | undefined, action?: A | undefined): void;
+}>;
+export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;
+export type DiagramStoreApi = Readonly<Pick<DiagramZustandStore, 'getState' | 'setState' | 'subscribe'>>;
+export {};