@likec4/diagram 1.4.0 → 1.6.0

package/dist/state/diagramStore.d.ts

@@ -2,11 +2,12 @@ import { DiagramNode, DiagramView, Fqn, ViewID } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { Exact, Simplify } from 'type-fest';
-import { Changes, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
+import { Changes, ElementIconRenderer, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 import { XYStoreApi } from '../xyflow/hooks';
-import { XYFlowInstance, XYFlowNode } from '../xyflow/types';
+import { XYFlowInstance } from '../xyflow/types';
 
 export type DiagramStore = {
+    readonly storeDevId: string;
     view: DiagramView;
     readonly: boolean;
     showElementLinks: boolean;
@@ -17,8 +18,11 @@ export type DiagramStore = {
     nodesDraggable: boolean;
     nodesSelectable: boolean;
     experimentalEdgeEditing: boolean;
+    renderIcon: ElementIconRenderer | null;
+    getContainer: () => HTMLDivElement | null;
     viewSyncDebounceTimeout: number | null;
     xyflow: XYFlowInstance;
+    xystore: XYStoreApi;
     initialized: boolean;
     xyflowSynced: boolean;
     activeDynamicViewStep: number | null;
@@ -38,7 +42,7 @@ export type DiagramStore = {
     };
     viewportChanged: boolean;
 } & Required<LikeC4DiagramEventHandlers>;
-export type DiagramInitialState = Pick<DiagramStore, 'view' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable' | 'experimentalEdgeEditing'> & LikeC4DiagramEventHandlers;
+export type DiagramInitialState = Pick<DiagramStore, 'view' | 'renderIcon' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable' | 'experimentalEdgeEditing'> & LikeC4DiagramEventHandlers;
 interface DiagramStoreActions {
     isDynamicView: () => boolean;
     updateView: (view: DiagramView) => void;
@@ -51,15 +55,16 @@ interface DiagramStoreActions {
     getElement(id: Fqn): DiagramNode | null;
     triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
     cancelSaveManualLayout: () => void;
-    triggerSaveManualLayout: (xystore: XYStoreApi) => void;
+    triggerSaveManualLayout: () => void;
     triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
-    fitDiagram: (xyStore: XYStoreApi) => void;
+    fitDiagram: (duration?: number) => void;
     nextDynamicStep: (increment?: number) => void;
     stopDynamicView: () => void;
 }
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>;
-type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xyflow'>;
+export type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xystore' | 'xyflow' | 'getContainer'>;
 export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
+    readonly storeDevId: string;
     view: DiagramView;
     readonly: boolean;
     showElementLinks: boolean;
@@ -70,8 +75,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
     nodesDraggable: boolean;
     nodesSelectable: boolean;
     experimentalEdgeEditing: boolean;
+    renderIcon: ElementIconRenderer | null;
+    getContainer: () => HTMLDivElement | null;
     viewSyncDebounceTimeout: number | null;
     xyflow: XYFlowInstance;
+    xystore: XYStoreApi;
     initialized: boolean;
     xyflowSynced: boolean;
     activeDynamicViewStep: number | null;
@@ -82,13 +90,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
     hoveredEdgeId: string | null;
     dimmed: ReadonlySet<string>;
     previousViews: DiagramView[];
-    lastOnNavigate: {
+    lastOnNavigate: null | {
         fromView: ViewID;
         toView: ViewID;
         element: DiagramNode;
         elementScreenPosition: XYPosition;
         positionCorrected: boolean;
-    } | null;
+    };
     viewportChanged: boolean;
     onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
     onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -110,470 +118,15 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
     getElement: (id: Fqn) => DiagramNode | null;
     triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
     cancelSaveManualLayout: () => void;
-    triggerSaveManualLayout: (xystore: {
-        getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>;
-        setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>>), replace?: boolean | undefined) => void;
-        subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>) => void) => () => void;
-    }) => void;
-    triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-    fitDiagram: (xyStore: {
-        getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>;
-        setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>>), replace?: boolean | undefined) => void;
-        subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: import('@xyflow/react').EdgeMarkerType;
-            markerEnd?: import('@xyflow/react').EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: import('react').ReactNode;
-            labelStyle?: import('react').CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: import('react').CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: import('react').CSSProperties;
-            className?: string;
-            reconnectable?: boolean | import('@xyflow/react').HandleType;
-            focusable?: boolean;
-            data: import('../xyflow/types').RelationshipData;
-            readonly id: string;
-            readonly type: "relationship";
-        }>) => void) => () => void;
-    }) => void;
-    nextDynamicStep: (increment?: number | undefined) => void;
+    triggerSaveManualLayout: () => void;
+    triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+    fitDiagram: (duration?: number) => void;
+    nextDynamicStep: (increment?: number) => void;
     stopDynamicView: () => void;
 }>, "subscribe"> & {
     subscribe: {
         (listener: (selectedState: {
+            readonly storeDevId: string;
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
@@ -584,8 +137,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: ElementIconRenderer | null;
+            getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: XYFlowInstance;
+            xystore: XYStoreApi;
             initialized: boolean;
             xyflowSynced: boolean;
             activeDynamicViewStep: number | null;
@@ -596,13 +152,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             hoveredEdgeId: string | null;
             dimmed: ReadonlySet<string>;
             previousViews: DiagramView[];
-            lastOnNavigate: {
+            lastOnNavigate: null | {
                 fromView: ViewID;
                 toView: ViewID;
                 element: DiagramNode;
                 elementScreenPosition: XYPosition;
                 positionCorrected: boolean;
-            } | null;
+            };
             viewportChanged: boolean;
             onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
             onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -624,468 +180,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             getElement: (id: Fqn) => DiagramNode | null;
             triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
             cancelSaveManualLayout: () => void;
-            triggerSaveManualLayout: (xystore: {
-                getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>;
-                setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>>), replace?: boolean | undefined) => void;
-                subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => void) => () => void;
-            }) => void;
-            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-            fitDiagram: (xyStore: {
-                getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>;
-                setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>>), replace?: boolean | undefined) => void;
-                subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => void) => () => void;
-            }) => void;
-            nextDynamicStep: (increment?: number | undefined) => void;
+            triggerSaveManualLayout: () => void;
+            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+            fitDiagram: (duration?: number) => void;
+            nextDynamicStep: (increment?: number) => void;
             stopDynamicView: () => void;
         }, previousSelectedState: {
+            readonly storeDevId: string;
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
@@ -1096,8 +197,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: ElementIconRenderer | null;
+            getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: XYFlowInstance;
+            xystore: XYStoreApi;
             initialized: boolean;
             xyflowSynced: boolean;
             activeDynamicViewStep: number | null;
@@ -1108,13 +212,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             hoveredEdgeId: string | null;
             dimmed: ReadonlySet<string>;
             previousViews: DiagramView[];
-            lastOnNavigate: {
+            lastOnNavigate: null | {
                 fromView: ViewID;
                 toView: ViewID;
                 element: DiagramNode;
                 elementScreenPosition: XYPosition;
                 positionCorrected: boolean;
-            } | null;
+            };
             viewportChanged: boolean;
             onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
             onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -1136,469 +240,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             getElement: (id: Fqn) => DiagramNode | null;
             triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
             cancelSaveManualLayout: () => void;
-            triggerSaveManualLayout: (xystore: {
-                getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>;
-                setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>>), replace?: boolean | undefined) => void;
-                subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => void) => () => void;
-            }) => void;
-            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-            fitDiagram: (xyStore: {
-                getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>;
-                setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>>), replace?: boolean | undefined) => void;
-                subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => void) => () => void;
-            }) => void;
-            nextDynamicStep: (increment?: number | undefined) => void;
+            triggerSaveManualLayout: () => void;
+            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+            fitDiagram: (duration?: number) => void;
+            nextDynamicStep: (increment?: number) => void;
             stopDynamicView: () => void;
         }) => void): () => void;
         <U>(selector: (state: {
+            readonly storeDevId: string;
             view: DiagramView;
             readonly: boolean;
             showElementLinks: boolean;
@@ -1609,8 +258,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: ElementIconRenderer | null;
+            getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: XYFlowInstance;
+            xystore: XYStoreApi;
             initialized: boolean;
             xyflowSynced: boolean;
             activeDynamicViewStep: number | null;
@@ -1621,13 +273,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             hoveredEdgeId: string | null;
             dimmed: ReadonlySet<string>;
             previousViews: DiagramView[];
-            lastOnNavigate: {
+            lastOnNavigate: null | {
                 fromView: ViewID;
                 toView: ViewID;
                 element: DiagramNode;
                 elementScreenPosition: XYPosition;
                 positionCorrected: boolean;
-            } | null;
+            };
             viewportChanged: boolean;
             onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
             onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -1649,466 +301,10 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             getElement: (id: Fqn) => DiagramNode | null;
             triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
             cancelSaveManualLayout: () => void;
-            triggerSaveManualLayout: (xystore: {
-                getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>;
-                setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>>), replace?: boolean | undefined) => void;
-                subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => void) => () => void;
-            }) => void;
-            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-            fitDiagram: (xyStore: {
-                getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>;
-                setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>>), replace?: boolean | undefined) => void;
-                subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                    source: string;
-                    target: string;
-                    sourceHandle?: string | null;
-                    targetHandle?: string | null;
-                    animated?: boolean;
-                    hidden?: boolean;
-                    deletable?: boolean;
-                    selectable?: boolean;
-                    selected?: boolean;
-                    markerStart?: import('@xyflow/react').EdgeMarkerType;
-                    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                    zIndex?: number;
-                    ariaLabel?: string;
-                    interactionWidth?: number;
-                    label?: import('react').ReactNode;
-                    labelStyle?: import('react').CSSProperties;
-                    labelShowBg?: boolean;
-                    labelBgStyle?: import('react').CSSProperties;
-                    labelBgPadding?: [number, number];
-                    labelBgBorderRadius?: number;
-                    style?: import('react').CSSProperties;
-                    className?: string;
-                    reconnectable?: boolean | import('@xyflow/react').HandleType;
-                    focusable?: boolean;
-                    data: import('../xyflow/types').RelationshipData;
-                    readonly id: string;
-                    readonly type: "relationship";
-                }>) => void) => () => void;
-            }) => void;
-            nextDynamicStep: (increment?: number | undefined) => void;
+            triggerSaveManualLayout: () => void;
+            triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+            fitDiagram: (duration?: number) => void;
+            nextDynamicStep: (increment?: number) => void;
             stopDynamicView: () => void;
         }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
             equalityFn?: (a: U, b: U) => boolean;
@@ -2119,6 +315,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
     setState<A extends string | {
         type: string;
     }>(partial: {
+        readonly storeDevId: string;
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
@@ -2129,8 +326,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
+        getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
+        xystore: XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -2141,13 +341,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         hoveredEdgeId: string | null;
         dimmed: ReadonlySet<string>;
         previousViews: DiagramView[];
-        lastOnNavigate: {
+        lastOnNavigate: null | {
             fromView: ViewID;
             toView: ViewID;
             element: DiagramNode;
             elementScreenPosition: XYPosition;
             positionCorrected: boolean;
-        } | null;
+        };
         viewportChanged: boolean;
         onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
         onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -2169,468 +369,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         getElement: (id: Fqn) => DiagramNode | null;
         triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => void;
-        triggerSaveManualLayout: (xystore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-        fitDiagram: (xyStore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        nextDynamicStep: (increment?: number | undefined) => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        nextDynamicStep: (increment?: number) => void;
         stopDynamicView: () => void;
     } | Partial<{
+        readonly storeDevId: string;
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
@@ -2641,8 +386,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
+        getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
+        xystore: XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -2653,13 +401,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         hoveredEdgeId: string | null;
         dimmed: ReadonlySet<string>;
         previousViews: DiagramView[];
-        lastOnNavigate: {
+        lastOnNavigate: null | {
             fromView: ViewID;
             toView: ViewID;
             element: DiagramNode;
             elementScreenPosition: XYPosition;
             positionCorrected: boolean;
-        } | null;
+        };
         viewportChanged: boolean;
         onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
         onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -2681,468 +429,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         getElement: (id: Fqn) => DiagramNode | null;
         triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => void;
-        triggerSaveManualLayout: (xystore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-        fitDiagram: (xyStore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        nextDynamicStep: (increment?: number | undefined) => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        nextDynamicStep: (increment?: number) => void;
         stopDynamicView: () => void;
     }> | ((state: {
+        readonly storeDevId: string;
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
@@ -3153,8 +446,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
+        getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
+        xystore: XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -3165,13 +461,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         hoveredEdgeId: string | null;
         dimmed: ReadonlySet<string>;
         previousViews: DiagramView[];
-        lastOnNavigate: {
+        lastOnNavigate: null | {
             fromView: ViewID;
             toView: ViewID;
             element: DiagramNode;
             elementScreenPosition: XYPosition;
             positionCorrected: boolean;
-        } | null;
+        };
         viewportChanged: boolean;
         onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
         onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -3193,468 +489,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         getElement: (id: Fqn) => DiagramNode | null;
         triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => void;
-        triggerSaveManualLayout: (xystore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-        fitDiagram: (xyStore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        nextDynamicStep: (increment?: number | undefined) => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        nextDynamicStep: (increment?: number) => void;
         stopDynamicView: () => void;
     }) => {
+        readonly storeDevId: string;
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
@@ -3665,8 +506,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
+        getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
+        xystore: XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -3677,13 +521,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         hoveredEdgeId: string | null;
         dimmed: ReadonlySet<string>;
         previousViews: DiagramView[];
-        lastOnNavigate: {
+        lastOnNavigate: null | {
             fromView: ViewID;
             toView: ViewID;
             element: DiagramNode;
             elementScreenPosition: XYPosition;
             positionCorrected: boolean;
-        } | null;
+        };
         viewportChanged: boolean;
         onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
         onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -3705,468 +549,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         getElement: (id: Fqn) => DiagramNode | null;
         triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => void;
-        triggerSaveManualLayout: (xystore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-        fitDiagram: (xyStore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        nextDynamicStep: (increment?: number | undefined) => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        nextDynamicStep: (increment?: number) => void;
         stopDynamicView: () => void;
     } | Partial<{
+        readonly storeDevId: string;
         view: DiagramView;
         readonly: boolean;
         showElementLinks: boolean;
@@ -4177,8 +566,11 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
+        getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
+        xystore: XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -4189,13 +581,13 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         hoveredEdgeId: string | null;
         dimmed: ReadonlySet<string>;
         previousViews: DiagramView[];
-        lastOnNavigate: {
+        lastOnNavigate: null | {
             fromView: ViewID;
             toView: ViewID;
             element: DiagramNode;
             elementScreenPosition: XYPosition;
             positionCorrected: boolean;
-        } | null;
+        };
         viewportChanged: boolean;
         onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
         onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
@@ -4217,466 +609,10 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         getElement: (id: Fqn) => DiagramNode | null;
         triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
         cancelSaveManualLayout: () => void;
-        triggerSaveManualLayout: (xystore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
-        fitDiagram: (xyStore: {
-            getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>;
-            setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: import('@xyflow/react').EdgeMarkerType;
-                markerEnd?: import('@xyflow/react').EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: import('react').ReactNode;
-                labelStyle?: import('react').CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: import('react').CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: import('react').CSSProperties;
-                className?: string;
-                reconnectable?: boolean | import('@xyflow/react').HandleType;
-                focusable?: boolean;
-                data: import('../xyflow/types').RelationshipData;
-                readonly id: string;
-                readonly type: "relationship";
-            }>) => void) => () => void;
-        }) => void;
-        nextDynamicStep: (increment?: number | undefined) => void;
+        triggerSaveManualLayout: () => void;
+        triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
+        fitDiagram: (duration?: number) => void;
+        nextDynamicStep: (increment?: number) => void;
         stopDynamicView: () => void;
     }>), replace?: boolean | undefined, action?: A | undefined): void;
 }>;