likec4 1.58.0 → 1.59.0

package/react/index.d.mts

@@ -2,13 +2,14 @@ import { Any } from '@likec4/core/types';
 import { AutoLayoutDirection } from '@likec4/core/types';
 import { aux } from '@likec4/core/types';
 import { BBox } from '@likec4/core/types';
-import { BBox as BBox_2 } from '@likec4/core/geometry';
-import { BBox as BBox_3 } from '@likec4/core';
+import { BBox as BBox_2 } from '@likec4/core';
+import { BBox as BBox_3 } from '@likec4/core/geometry';
 import { CamelCasedProperties } from 'type-fest';
 import { Color } from '@likec4/core/types';
+import { ComponentType } from 'react';
 import { ComputedNodeStyle } from '@likec4/core/types';
 import { ComputedNodeStyle as ComputedNodeStyle_2 } from '@likec4/core';
-import { Context as Context_4 } from 'react';
+import { Context as Context_5 } from 'react';
 import { ControlButton } from '@xyflow/react';
 import { CSSProperties } from 'react';
 import { DependencyList } from 'react';
@@ -19,17 +20,19 @@ import { DiagramNode } from '@likec4/core/types';
 import { DiagramNodeDriftReason } from '@likec4/core/types';
 import { DiagramView } from '@likec4/core/types';
 import { DynamicViewDisplayVariant } from '@likec4/core/types';
+import { DynamicViewFlow } from '@likec4/core/types';
 import { Edge } from '@xyflow/react';
-import { EdgeChange } from '@xyflow/system';
-import { EdgeChange as EdgeChange_2 } from '@xyflow/react';
-import { EdgeId } from '@likec4/core/types';
-import { EdgeId as EdgeId_2 } from '@likec4/core';
+import { EdgeChange } from '@xyflow/react';
+import { EdgeChange as EdgeChange_2 } from '@xyflow/system';
+import { EdgeId } from '@likec4/core';
+import { EdgeId as EdgeId_2 } from '@likec4/core/types';
 import { EdgeProps } from '@xyflow/react';
 import { EffectCallback } from 'react';
 import { ElementKind } from '@likec4/core/types';
 import { ElementProps } from '@mantine/core';
 import { ElementShape as ElementShape_2 } from '@likec4/core/types';
 import { ElementStyle } from '@likec4/core/types';
+import { ErrorInfo } from 'react';
 import { Except } from 'type-fest';
 import { ExclusiveUnion } from '@likec4/core/types';
 import { ExclusiveUnion as ExclusiveUnion_2 } from '@likec4/core';
@@ -63,8 +66,8 @@ import { MotionStyle } from 'motion/react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { NavigationPanelRecipe } from '../../styled-system/recipes';
 import { Node as Node_2 } from '@xyflow/react';
-import { NodeChange } from '@xyflow/system';
-import { NodeChange as NodeChange_2 } from '@xyflow/react';
+import { NodeChange } from '@xyflow/react';
+import { NodeChange as NodeChange_2 } from '@xyflow/system';
 import { NodeId } from '@likec4/core/types';
 import { NodeId as NodeId_3 } from '@likec4/core';
 import { NodeModel } from '@likec4/core/model';
@@ -96,7 +99,7 @@ import { RichTextOrEmpty } from '@likec4/core/types';
 import { SetRequired } from 'type-fest';
 import { Simplify } from 'type-fest';
 import { SimplifyDeep } from 'type-fest';
-import { StepEdgeId } from '@likec4/core/types';
+import { StepPath } from '@likec4/core/types';
 import { StyleContextConsumer } from '../../styled-system/jsx';
 import { StyleContextProvider } from '../../styled-system/jsx';
 import type * as t from '@likec4/core/types';
@@ -360,6 +363,39 @@ in TInput = NonReducibleUnknown, TSystem extends AnyActorSystem = AnyActorSystem
     getPersistedSnapshot: (snapshot: TSnapshot, options?: unknown) => Snapshot<unknown>;
 }
 
+declare const _actorLogic: StateMachine<Context_4, Events_4, {}, never, never, {
+    type: "was opened on hover";
+    params: unknown;
+} | {
+    type: "has search query";
+    params: unknown;
+} | {
+    type: "search query is empty";
+    params: unknown;
+}, "open timeout" | "close timeout", "pending" | "idle" | {
+    active: "search" | "opened" | "decide" | "closing";
+}, "active", Input_3, NonReducibleUnknown, EventObject, MetaObject, {
+    id: "navigationPanel";
+    states: {
+        readonly idle: {
+            id: "idle";
+        };
+        readonly pending: {};
+        readonly active: {
+            states: {
+                readonly decide: {};
+                readonly opened: {};
+                readonly search: {};
+                readonly closing: {};
+            };
+        };
+    };
+}>;
+
+declare type ActorLogicMap = {
+    [K in keyof ChildrenActors]: ActorRefFromLogic<ChildrenActors[K]> | undefined;
+};
+
 declare interface ActorOptions<TLogic extends AnyActorLogic> {
     /**
      * The clock that is responsible for setting and clearing timeouts, such as
@@ -518,6 +554,22 @@ declare type ActorRefFromLogic<T extends AnyActorLogic> = ActorRef<SnapshotFrom<
 
 declare type ActorRefLike = Pick<AnyActorRef, 'sessionId' | 'send' | 'getSnapshot'>;
 
+declare const actors: {
+    hotkey: HotkeyActorLogic;
+    overlays: OverlaysActorLogic;
+    search: SearchActorLogic;
+    mediaPrint: MediaPrintActorLogic;
+    editor: EditorActorLogic;
+    navigationPanel: NavigationPanelActorLogic;
+};
+
+declare const actors_2: {
+    hotkey: HotkeyActorLogic_2;
+    applyLatest: PromiseActorLogic<EditorCalls.ApplyLatestToManual.Output, EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    executeChange: PromiseActorLogic<EditorCalls.ExecuteChange.Output, EditorCalls.ExecuteChange.Input, EventObject>;
+    applySemanticLayout: PromiseActorLogic<EditorCalls.ApplySemanticLayout.Output, EditorCalls.ApplySemanticLayout.Input, EventObject>;
+};
+
 declare interface ActorScope<TSnapshot extends Snapshot<unknown>, TEvent extends EventObject, TSystem extends AnyActorSystem = AnyActorSystem, TEmitted extends EventObject = EventObject> {
     self: ActorRef<TSnapshot, TEvent, TEmitted>;
     id: string;
@@ -605,6 +657,12 @@ export declare namespace Base {
     export type Dimmed = 'immediate' | boolean;
 }
 
+/**
+ * Here is a trick to reduce inference types
+ */
+declare interface BaseDiagramMachineLogic<Actors extends Partial<ActorLogicMap> = ActorLogicMap, State extends StateValue = never> extends StateMachine<DiagramContext, DiagramEvents, Actors & Omit<ActorLogicMap, keyof Actors>, ChildrenActor, never, never, never, State, never, Input_4, never, DiagramEmittedEvents, never, never> {
+}
+
 export declare interface BaseEdge<Data extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string = string> extends SetRequired<Edge<Data & BaseEdgeData, EdgeType>, 'type' | 'data'> {
 }
 
@@ -632,6 +690,14 @@ export declare interface BaseEdgeProps<E extends BaseEdge = BaseEdge> extends Ed
 
 export declare type BaseEdgePropsWithData<Data extends Record<string, unknown>> = BaseEdgeProps<BaseEdge<Data>>;
 
+/**
+ * to workaround circular dependency issue between editor and diagram packages
+ */
+declare interface BaseEditorActorLogic<State extends StateValue = any> extends StateMachine<EditorActorContext, EditorActorEvent, inferChildrenRef<typeof actors_2>, inferProvidedActor<typeof actors_2>, never, never, never, State, EditorActorStateTag, EditorActorInput, never, EditorActorEmitedEvent, never, never> {
+}
+
+declare type BaseEditorActorRef = ActorRefFromLogic<BaseEditorActorLogic>;
+
 declare interface BaseInspectionEventProperties {
     rootId: string;
     /**
@@ -666,15 +732,32 @@ export declare interface BaseNodeProps<N extends BaseNode = BaseNode> extends No
 
 export declare type BaseNodePropsWithData<Data extends Record<string, unknown>> = BaseNodeProps<BaseNode<Data>>;
 
+declare type CallbackActorLogic<TEvent extends EventObject, TInput = NonReducibleUnknown, TEmitted extends EventObject = EventObject> = ActorLogic<CallbackSnapshot<TInput>, TEvent, TInput, AnyActorSystem, TEmitted>;
+
+declare type CallbackSnapshot<TInput> = Snapshot<undefined> & {
+    input: TInput;
+};
+
+declare type ChildrenActor = {
+    [K in keyof ChildrenActors]: {
+        id: K;
+        logic: ChildrenActors[K];
+        src: K;
+    };
+}[keyof ChildrenActors];
+
+declare type ChildrenActors = typeof actors;
+
 declare interface Clock {
     setTimeout(fn: (...args: any[]) => void, timeout: number): any;
     clearTimeout(id: any): void;
 }
 
-export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): JSX.Element;
+export declare function CompoundActionButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: CompoundActionButtonProps): JSX.Element;
 
 declare type CompoundActionButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: MouseEvent_2) => void;
 }>;
 
@@ -725,10 +808,11 @@ export declare type CompoundDeploymentNodeProps<A extends Any_5 = Unknown_3> = {
 
 export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): JSX.Element;
 
-export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): JSX.Element;
+export declare function CompoundDetailsButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: CompoundDetailsButtonProps): JSX.Element;
 
 declare type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: MouseEvent_2) => void;
 }>;
 
@@ -791,10 +875,16 @@ declare type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLD
     nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
 }>;
 
-export declare function CompoundTitle({ data }: CompoundTitleProps): JSX.Element;
+export declare function CompoundTitle({ data, 'aria-hidden': ariaHidden }: CompoundTitleProps): JSX.Element;
 
 declare type CompoundTitleProps = {
     data: RequiredData_2;
+    /**
+     * Opt-in: hide the title from assistive technologies. The main diagram sets
+     * this because the compound node's accessible label already conveys the
+     * title, so re-exposing it here would cause a duplicate announcement.
+     */
+    'aria-hidden'?: boolean | undefined;
 };
 
 declare type Compute<A> = {
@@ -820,7 +910,7 @@ declare interface Context_2 {
     enableSelectSubject: boolean;
     enableChangeScope: boolean;
     xyflow: XYFLowInstance | null;
-    xystore: XYStoreApi_2 | null;
+    xystore: XYStoreApi | null;
     layouted: LayoutRelationshipsViewResult | null;
     navigateFromNode: string | null;
     xynodes: RelationshipsBrowserTypes.Node[];
@@ -831,16 +921,37 @@ declare type Context_3 = Readonly<{
     subject: Subject;
     viewId: ViewId_3;
     xyflow: XYFLowInstance_2 | null;
-    xystore: XYStoreApi_3 | null;
+    xystore: XYStoreApi_2 | null;
     initialized: {
         xydata: boolean;
         xyflow: boolean;
     };
     xynodes: RelationshipDetailsTypes.Node[];
     xyedges: RelationshipDetailsTypes.Edge[];
-    bounds: BBox_3;
+    bounds: BBox_2;
 }>;
 
+declare function Context_4({ input }: {
+    input: Input_3;
+}): Context_4;
+
+declare interface Context_4 {
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
+    /**
+     * Who activated the dropdown
+     * (if `click` then the dropdown is always open until dismissed)
+     * @default 'hover'
+     */
+    activatedBy: 'hover' | 'click';
+    /**
+     * The folder that is currently selected in the dropdown
+     * By default it is the root
+     */
+    selectedFolder: string;
+    searchQuery: string;
+}
+
 declare type ContextFactory<TContext extends MachineContext, TActor extends ProvidedActor, TInput, TEvent extends EventObject = EventObject> = ({ spawn, input, self }: {
     spawn: Spawner<TActor>;
     input: TInput;
@@ -915,7 +1026,7 @@ export declare const DeploymentElementActions: ({ extraButtons, ...props }: Depl
 
 declare type DeploymentElementActionsProps = SimplifyDeep<{
     selected?: boolean;
-    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
 }> & WithExtraButtons;
 
 export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): JSX.Element;
@@ -983,25 +1094,24 @@ export declare interface DiagramActorRef extends DiagramMachineRef {
     system: System;
 }
 
-export declare type DiagramActorSnapshot = MachineSnapshot<DiagramContext, DiagramEvents, {
-    overlays: OverlaysActorRef | undefined;
-    search: SearchActorRef | undefined;
-    editor: EditorActorRef | undefined;
-}, any, any, any, {}, {}>;
+export declare type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>;
 
-export declare interface DiagramApi<A extends Any_3 = Unknown_2> {
+export declare class DiagramApi<A extends Any_3 = Unknown_2> {
+    private static cache;
+    static withActor(actorRef: RefObject<DiagramActorRef>): DiagramApi;
     /**
      * React ref to the diagram actor
      */
     readonly ref: RefObject<DiagramActorRef>;
+    private constructor();
     /**
      * @warning Do not use in render phase
      */
-    readonly actor: DiagramActorRef;
+    get actor(): DiagramActorRef;
     /**
      * @warning Do not use in render phase
      */
-    readonly currentView: t.DiagramView<A>;
+    get currentView(): t.DiagramView<A>;
     /**
      * Editor actor reference
      * @warning Do not use in render phase
@@ -1043,7 +1153,7 @@ export declare interface DiagramApi<A extends Any_3 = Unknown_2> {
     /**
      * If running in editor, trigger opening source file
      */
-    openSource(params: OpenSourceParams<A>): void;
+    openSource(params: OpenSourceParams<Unknown_2>): void;
     /**
      * Open element details card
      */
@@ -1110,21 +1220,31 @@ export declare interface DiagramApi<A extends Any_3 = Unknown_2> {
      * @warning Do not use in render phase
      */
     findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
-    startWalkthrough(): void;
-    walkthroughStep(direction?: 'next' | 'previous'): void;
+    startWalkthrough(stepId?: t.StepPath): void;
+    walkthroughStep(value?: 'next' | 'prev' | {
+        step: t.StepPath;
+    }): void;
     stopWalkthrough(): void;
-    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
+    toggleFeature(feature: TogglableFeature, forceValue?: boolean): void;
     highlightNotation(notation: NodeNotation, kind?: string): void;
     unhighlightNotation(): void;
     openSearch(searchValue?: string): void;
-    triggerChange(viewChange: ViewChange): void;
+    triggerChange(change: ViewChange): void;
     /**
      * Switch dynamic view display variant
      */
     switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
+    /**
+     * Toggle sequence flow collapse/expand
+     */
+    toggleSequenceFlow(flowId: t.StepPath): void;
 }
 
-export declare interface DiagramContext extends Input {
+export declare function DiagramContext({ input }: {
+    input: Input_4;
+}): DiagramContext;
+
+export declare interface DiagramContext extends Input_4 {
     xynodes: Types.Node[];
     xyedges: Types.Edge[];
     features: EnabledFeatures;
@@ -1167,8 +1287,12 @@ export declare interface DiagramContext extends Input {
     xyflow: XYFlowInstance | null;
     dynamicViewVariant: DynamicViewDisplayVariant;
     activeWalkthrough: null | {
-        stepId: StepEdgeId;
-        parallelPrefix: string | null;
+        stepId: StepPath;
+        activeFlow: StepPath | null;
+        outlinePanelWidth: number;
+    };
+    collapsedSequenceFlows: {
+        [flowId: StepPath]: boolean;
     };
 }
 
@@ -1205,6 +1329,7 @@ export declare type DiagramEmittedEvents = {
 } | {
     type: 'walkthroughStep';
     edge: Types.Edge;
+    stepId: StepPath;
 } | {
     type: 'walkthroughStopped';
 } | {
@@ -1223,8 +1348,8 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
     instance: XYFlowInstance;
 } | {
     type: 'xyflow.applyChanges';
-    edges?: EdgeChange<Types.Edge>[];
-    nodes?: NodeChange<Types.Node>[];
+    edges?: EdgeChange_2<Types.Edge>[];
+    nodes?: NodeChange_2<Types.Node>[];
 } | {
     type: 'xyflow.viewportMoved';
     viewport: Viewport;
@@ -1246,10 +1371,10 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.resized';
 } | {
     type: 'xyflow.nodeMouseEnter';
-    node: Types.Node;
+    node: Types.Node | NodeId;
 } | {
     type: 'xyflow.nodeMouseLeave';
-    node: Types.Node;
+    node: Types.Node | NodeId;
 } | {
     type: 'xyflow.edgeMouseEnter';
     edge: Types.Edge;
@@ -1261,7 +1386,7 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
 } | {
     type: 'xyflow.fitDiagram';
     duration?: number;
-    bounds?: BBox_2;
+    bounds?: BBox_3;
 } | {
     type: 'xyflow.setViewport';
     duration?: number;
@@ -1272,15 +1397,17 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
     duration?: number;
 } | {
     type: 'xyflow.centerViewport';
-    edgeId: EdgeId;
+    edgeId: EdgeId_2;
     duration?: number;
+} | {
+    type: 'xyflow.resetSelection';
 } | {
     type: 'update.nodeData';
     nodeId: NodeId;
     data: PartialDeep<Types.NodeData>;
 } | {
     type: 'update.edgeData';
-    edgeId: EdgeId;
+    edgeId: EdgeId_2;
     data: PartialDeep<Types.EdgeData>;
 } | {
     type: 'update.view';
@@ -1294,10 +1421,10 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
     xyedges: Types.Edge[];
 } | {
     type: 'update.view-bounds';
-    bounds: BBox_2;
+    bounds: BBox_3;
 } | {
     type: 'update.inputs';
-    inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant' | 'features'>>;
+    inputs: Partial<Omit<Input_4, 'view' | 'xystore' | 'dynamicViewVariant' | 'features'>>;
 } | {
     type: 'update.features';
     features: EnabledFeatures;
@@ -1310,7 +1437,7 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
 } | {
     type: 'open.relationshipDetails';
     params: {
-        edgeId: EdgeId;
+        edgeId: EdgeId_2;
     } | {
         source: Fqn;
         target: Fqn;
@@ -1348,18 +1475,34 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
     variant: DynamicViewDisplayVariant;
 } | {
     type: 'walkthrough.start';
-    stepId?: StepEdgeId;
+    stepId?: StepPath | undefined;
+} | {
+    type: 'walkthrough.step';
+    direction: 'next' | 'prev';
+    stepId?: never;
 } | {
     type: 'walkthrough.step';
-    direction: 'next' | 'previous';
+    stepId: StepPath;
+    direction?: never;
 } | {
     type: 'walkthrough.end';
+} | {
+    type: 'sequence.flow.collapse';
+    flowId: StepPath;
+} | {
+    type: 'sequence.flow.expand';
+    flowId: StepPath;
+} | {
+    type: 'sequence.flow.toggle';
+    flowId: StepPath;
+} | {
+    type: 'sequence.walkthrough.end';
 } | {
     type: 'highlight.node';
     nodeId: NodeId;
 } | {
     type: 'highlight.edge';
-    edgeId: EdgeId;
+    edgeId: EdgeId_2;
 } | {
     type: 'unhighlight.all';
 } | {
@@ -1387,6 +1530,152 @@ export declare type DiagramEvents = HotKeyEvent | MediaPrintEvent | {
     type: 'destroy';
 };
 
+declare const _diagramMachine: StateMachine<DiagramContext, DiagramEvents, {
+    search?: ActorRefFromLogic<SearchActorLogic>;
+    hotkey?: ActorRefFromLogic<HotkeyActorLogic>;
+    overlays?: ActorRefFromLogic<OverlaysActorLogic>;
+    mediaPrint?: ActorRefFromLogic<MediaPrintActorLogic>;
+    editor?: ActorRefFromLogic<EditorActorLogic>;
+    navigationPanel?: ActorRefFromLogic<NavigationPanelActorLogic>;
+}, {
+    src: "search";
+    logic: SearchActorLogic;
+    id: "search";
+} | {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "overlays";
+    logic: OverlaysActorLogic;
+    id: "overlays";
+} | {
+    src: "mediaPrint";
+    logic: MediaPrintActorLogic;
+    id: "mediaPrint";
+} | {
+    src: "editor";
+    logic: EditorActorLogic;
+    id: "editor";
+} | {
+    src: "navigationPanel";
+    logic: NavigationPanelActorLogic;
+    id: "navigationPanel";
+}, never, {
+    type: "isReady";
+    params: unknown;
+} | {
+    type: "enabled: Editor";
+    params: unknown;
+} | {
+    type: "enabled: FitView";
+    params: unknown;
+} | {
+    type: "enabled: FocusMode";
+    params: unknown;
+} | {
+    type: "enabled: Readonly";
+    params: unknown;
+} | {
+    type: "enabled: RelationshipDetails";
+    params: unknown;
+} | {
+    type: "enabled: Search";
+    params: unknown;
+} | {
+    type: "enabled: ElementDetails";
+    params: unknown;
+} | {
+    type: "enabled: OpenSource";
+    params: unknown;
+} | {
+    type: "enabled: DynamicViewWalkthrough";
+    params: unknown;
+} | {
+    type: "enabled: NavigationPanel";
+    params: unknown;
+} | {
+    type: "focus.node: autoUnfocus";
+    params: unknown;
+} | {
+    type: "enabled: Overlays";
+    params: unknown;
+} | {
+    type: "not readonly";
+    params: unknown;
+} | {
+    type: "is dynamic view";
+    params: unknown;
+} | {
+    type: "is dynamic view in sequence variant";
+    params: unknown;
+} | {
+    type: "is same view";
+    params: unknown;
+} | {
+    type: "is another view";
+    params: unknown;
+} | {
+    type: "click: node has modelFqn";
+    params: unknown;
+} | {
+    type: "click: selected node";
+    params: unknown;
+} | {
+    type: "click: same node";
+    params: unknown;
+} | {
+    type: "click: focused node";
+    params: unknown;
+} | {
+    type: "click: node.type = seq-subflow";
+    params: unknown;
+} | {
+    type: "click: node has connections";
+    params: unknown;
+} | {
+    type: "click: selected edge";
+    params: unknown;
+} | {
+    type: "click: active walkthrough step";
+    params: unknown;
+}, never, "final" | "isReady" | "navigating" | "initializing" | {
+    ready: "idle" | "walkthrough" | "focused" | "printing";
+}, string, Input_4, NonReducibleUnknown, DiagramEmittedEvents, MetaObject, {
+    states: {
+        readonly initializing: {};
+        readonly isReady: {};
+        readonly ready: {
+            states: {
+                idle: {
+                    id: string;
+                };
+                focused: {
+                    id: string;
+                };
+                walkthrough: {
+                    id: string;
+                };
+                printing: {
+                    id: string;
+                };
+            };
+        };
+        readonly navigating: {
+            id: string;
+        };
+        readonly final: {};
+    };
+}>;
+
+declare interface DiagramMachineLogic extends BaseDiagramMachineLogic<{
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+}, StateValueFrom<typeof _diagramMachine>> {
+}
+
 declare interface DiagramMachineRef extends ActorRef<DiagramActorSnapshot, DiagramEvents, DiagramEmittedEvents> {
 }
 
@@ -1500,10 +1789,7 @@ declare interface EditorActorInput {
     viewId: t.ViewId;
 }
 
-declare interface EditorActorLogic extends StateMachine<EditorActorContext, EditorActorEvent, any, any, any, any, any, {
-    editor: 'idle' | 'moving';
-    syncQueue: 'idle' | 'pending' | 'suspended' | 'process';
-}, EditorActorStateTag, EditorActorInput, any, EditorActorEmitedEvent, any, any> {
+declare interface EditorActorLogic extends BaseEditorActorLogic {
 }
 
 declare interface EditorActorRef extends ActorRef<EditorActorSnapshot, EditorActorEvent, EditorActorEmitedEvent> {
@@ -1513,6 +1799,46 @@ declare type EditorActorSnapshot = SnapshotFrom<EditorActorLogic>;
 
 declare type EditorActorStateTag = 'pending' | 'busy' | 'ai-semantic-layout';
 
+declare namespace EditorCalls {
+    type ApplyLatestToManual = (params: {
+        input: ApplyLatestToManual.Input;
+    }) => Promise<ApplyLatestToManual.Output>;
+    namespace ApplyLatestToManual {
+        type Input = {
+            viewId: t.ViewId;
+            current: t.LayoutedView | undefined;
+        };
+        type Output = {
+            updated: t.LayoutedView;
+        };
+    }
+    type ApplySemanticLayout = (params: {
+        input: ApplySemanticLayout.Input;
+    }) => Promise<ApplySemanticLayout.Output>;
+    namespace ApplySemanticLayout {
+        type Input = {
+            viewId: t.ViewId;
+        };
+        type Output = {};
+    }
+    type ExecuteChange = (params: {
+        input: ExecuteChange.Input;
+    }) => Promise<ExecuteChange.Output>;
+    namespace ExecuteChange {
+        type Input = {
+            viewId: t.ViewId;
+            changes: t.ViewChange[];
+        };
+        /**
+         * Returns the changes that were applied to the view
+         */
+        type Output = {
+            requested: t.ViewChange[];
+            applied: t.ViewChange[];
+        };
+    }
+}
+
 declare type EffectCallback_2 = (...args: any[]) => any;
 
 declare type EffectHook<Callback extends EffectCallback_2 = EffectCallback_2, Deps extends DependencyList | undefined = DependencyList | undefined, RestArgs extends any[] = any[]> = ((...args: [Callback, Deps, ...RestArgs]) => void) | ((...args: [Callback, Deps]) => void);
@@ -1547,6 +1873,7 @@ export declare function ElementActionButtons({ selected, data: { hovered: isHove
 export declare namespace ElementActionButtons {
     export type Item = {
         key?: string;
+        ariaLabel?: string;
         icon?: ReactNode;
         onClick: (e: MouseEvent_2) => void;
     };
@@ -1589,7 +1916,7 @@ export declare function ElementActions({ extraButtons, ...props }: ElementAction
 
 declare type ElementActionsProps = SimplifyDeep<{
     selected?: boolean;
-    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
 }> & WithExtraButtons;
 
 /**
@@ -1611,7 +1938,9 @@ declare type ElementActionsProps = SimplifyDeep<{
  * </ElementData.Root>
  * ```
  */
-export declare function ElementData({ data }: ElementDataProps): JSX.Element;
+export declare function ElementData({ data, 'aria-hidden': ariaHidden }: ElementDataProps & {
+    'aria-hidden'?: boolean | undefined;
+}): JSX.Element;
 
 export declare namespace ElementData {
     var Root: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & RefAttributes<HTMLDivElement>>;
@@ -1635,12 +1964,13 @@ declare type ElementDataProps = {
 declare interface ElementDetailsActorRef extends ActorRef<ElementDetailsSnapshot, Events> {
 }
 
-export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): JSX.Element;
+export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: ElementDetailsButtonProps): JSX.Element;
 
 declare type ElementDetailsButtonProps = {
     selected?: boolean;
     data: BaseNodeData;
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: MouseEvent_2) => void;
 };
 
@@ -1652,9 +1982,18 @@ export declare function ElementDetailsButtonWithHandler(props: {
     };
 }): JSX.Element | null;
 
+declare type ElementDetailsInput = {
+    subject: Fqn;
+    currentView: DiagramView;
+    initiatedFrom?: {
+        node?: NodeId;
+        clientRect?: Rect;
+    };
+};
+
 declare interface ElementDetailsLogic extends StateMachine<Context, Events, {
     [key: `${string}-relationships`]: RelationshipsBrowserActorRef | undefined;
-}, any, any, any, any, any, never, Input_2, any, any, any, any> {
+}, any, any, any, any, any, never, ElementDetailsInput, any, any, any, any> {
 }
 
 declare type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>;
@@ -1793,6 +2132,78 @@ declare interface ErrorActorEvent<TErrorData = unknown, TId extends string = str
     actorId: TId;
 }
 
+export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): JSX.Element;
+
+declare type ErrorBoundaryProps = ErrorBoundaryPropsWithFallback | ErrorBoundaryPropsWithComponent | ErrorBoundaryPropsWithRender;
+
+declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
+    fallback?: never;
+    /**
+     * React component responsible for returning a fallback UI based on a thrown value.
+     *
+     * ```tsx
+     * <ErrorBoundary FallbackComponent={Fallback} />
+     * ```
+     */
+    FallbackComponent: ComponentType<FallbackProps>;
+    fallbackRender?: never;
+};
+
+declare type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {
+    /**
+     * Static content to render in place of an error if one is thrown.
+     *
+     * ```tsx
+     * <ErrorBoundary fallback={<div className="text-red">Something went wrong</div>} />
+     * ```
+     */
+    fallback: ReactNode;
+    FallbackComponent?: never;
+    fallbackRender?: never;
+};
+
+declare type ErrorBoundaryPropsWithRender = ErrorBoundarySharedProps & {
+    fallback?: never;
+    FallbackComponent?: never;
+    /**
+     * [Render prop](https://react.dev/reference/react/Children#calling-a-render-prop-to-customize-rendering) function responsible for returning a fallback UI based on a thrown value.
+     *
+     * ```tsx
+     * <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => <div>...</div>} />
+     * ```
+     */
+    fallbackRender: (props: FallbackProps) => ReactNode;
+};
+
+declare type ErrorBoundarySharedProps = PropsWithChildren<{
+    /**
+     * Optional callback to enable e.g. logging error information to a server.
+     *
+     * @param error Value that was thrown; typically an instance of `Error`
+     * @param info React "component stack" identifying where the error was thrown
+     */
+    onError?: (error: unknown, info: ErrorInfo) => void;
+    /**
+     * Optional callback to be notified when an error boundary is reset so React can retry the failed render.
+     */
+    onReset?: (details: {
+        reason: "imperative-api";
+        args: unknown[];
+    } | {
+        reason: "keys";
+        prev: unknown[] | undefined;
+        next: unknown[] | undefined;
+    }) => void;
+    /**
+     * When changed, these keys will reset a triggered error boundary.
+     * This can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).
+     * See the documentation for examples of how to use this prop.
+     */
+    resetKeys?: unknown[];
+}>;
+
+export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): JSX.Element;
+
 declare interface ErrorMachineSnapshot<TContext extends MachineContext, TEvent extends EventObject, TChildren extends Record<string, AnyActorRef | undefined>, TStateValue extends StateValue, TTag extends string, TOutput, TMeta extends MetaObject, TStateSchema extends StateSchema> extends MachineSnapshotBase<TContext, TEvent, TChildren, TStateValue, TTag, TOutput, TMeta, TStateSchema> {
     status: 'error';
     output: undefined;
@@ -1821,7 +2232,7 @@ declare type Events = {
 declare type Events_2 = {
     type: 'xyflow.init';
     instance: XYFLowInstance;
-    store: XYStoreApi_2;
+    store: XYStoreApi;
 } | {
     type: 'xyflow.nodeClick';
     node: RelationshipsBrowserTypes.Node;
@@ -1830,10 +2241,10 @@ declare type Events_2 = {
     edge: RelationshipsBrowserTypes.Edge;
 } | {
     type: 'xyflow.applyNodeChanges';
-    changes: NodeChange_2<RelationshipsBrowserTypes.Node>[];
+    changes: NodeChange<RelationshipsBrowserTypes.Node>[];
 } | {
     type: 'xyflow.applyEdgeChanges';
-    changes: EdgeChange_2<RelationshipsBrowserTypes.Edge>[];
+    changes: EdgeChange<RelationshipsBrowserTypes.Edge>[];
 } | {
     type: 'xyflow.paneClick';
 } | {
@@ -1861,7 +2272,7 @@ declare type Events_2 = {
 } | {
     type: 'fitDiagram';
     duration?: number;
-    bounds?: BBox_3;
+    bounds?: BBox_2;
 } | {
     type: 'navigate.to';
     subject: Fqn_3;
@@ -1884,7 +2295,7 @@ declare type Events_2 = {
 declare type Events_3 = {
     type: 'xyflow.init';
     instance: XYFLowInstance_2;
-    store: XYStoreApi_3;
+    store: XYStoreApi_2;
 } | {
     type: 'xyflow.nodeClick';
     node: RelationshipDetailsTypes.Node;
@@ -1907,10 +2318,10 @@ declare type Events_3 = {
     edges: RelationshipDetailsTypes.Edge[];
 } | {
     type: 'xyflow.applyNodeChanges';
-    changes: NodeChange_2<RelationshipDetailsTypes.Node>[];
+    changes: NodeChange<RelationshipDetailsTypes.Node>[];
 } | {
     type: 'xyflow.applyEdgeChanges';
-    changes: EdgeChange_2<RelationshipDetailsTypes.Edge>[];
+    changes: EdgeChange<RelationshipDetailsTypes.Edge>[];
 } | {
     type: 'xyflow.paneClick';
 } | {
@@ -1925,11 +2336,11 @@ declare type Events_3 = {
 } | {
     type: 'fitDiagram';
     duration?: number;
-    bounds?: BBox_3;
+    bounds?: BBox_2;
 } | {
     type: 'navigate.to';
     params: {
-        edgeId: EdgeId_2;
+        edgeId: EdgeId;
         viewId?: ViewId_3;
     } | {
         source: Fqn_3;
@@ -1940,6 +2351,51 @@ declare type Events_3 = {
     type: 'close';
 };
 
+declare type Events_4 = {
+    type: 'update.inputs';
+    inputs: Input_3;
+} | {
+    type: 'searchQuery.change';
+    value: string;
+} | {
+    type: 'searchQuery.changed';
+} | {
+    type: 'select.folder';
+    folderPath: string;
+} | {
+    type: 'select.view';
+    viewId: ViewId;
+} | {
+    type: 'breadcrumbs.mouseLeave';
+} | {
+    type: 'breadcrumbs.mouseEnter.root';
+} | {
+    type: 'breadcrumbs.mouseLeave.root';
+} | {
+    type: 'breadcrumbs.mouseEnter.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.mouseLeave.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.mouseEnter.viewtitle';
+} | {
+    type: 'breadcrumbs.mouseLeave.viewtitle';
+} | {
+    type: 'breadcrumbs.click.root';
+} | {
+    type: 'breadcrumbs.click.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.click.viewtitle';
+} | {
+    type: 'dropdown.mouseEnter';
+} | {
+    type: 'dropdown.mouseLeave';
+} | {
+    type: 'dropdown.dismiss';
+};
+
 declare interface ExecutableActionObject {
     type: string;
     info: ActionArgs<MachineContext, EventObject, EventObject>;
@@ -1949,6 +2405,11 @@ declare interface ExecutableActionObject {
 
 declare type ExtractEvent<TEvent extends EventObject, TDescriptor extends EventDescriptor<TEvent>> = string extends TEvent['type'] ? TEvent : NormalizeDescriptor<TDescriptor> extends infer TNormalizedDescriptor ? TEvent extends any ? true extends EventDescriptorMatches<TEvent['type'], TNormalizedDescriptor> ? TEvent : never : never : never;
 
+declare type FallbackProps = {
+    error: unknown;
+    resetErrorBoundary: (...args: unknown[]) => void;
+};
+
 export declare type FeatureName = typeof FeatureNames[number];
 
 declare const FeatureNames: readonly ["Controls", "Editor", "AISemanticLayout", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
@@ -1991,6 +2452,12 @@ declare type GuardPredicate<TContext extends MachineContext, TExpressionEvent ex
 
 declare type HistoryValue<TContext extends MachineContext, TEvent extends EventObject> = Record<string, Array<StateNode<TContext, TEvent>>>;
 
+declare interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
+}
+
+declare interface HotkeyActorLogic_2 extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent_2> {
+}
+
 declare type HotKeyEvent = {
     type: 'key.esc' | `key.arrow.${'left' | 'right' | 'up' | 'down'}`;
 };
@@ -2049,6 +2516,18 @@ export declare function IfNotReadOnly({ children }: PropsWithChildren): JSX_2.El
 
 export declare function IfReadOnly({ children }: PropsWithChildren): JSX_2.Element | null;
 
+declare type inferChildrenRef<A> = A extends Record<string, AnyActorLogic> ? {
+    [K in keyof A & string]: ActorRefFromLogic<A[K]> | undefined;
+} : never;
+
+declare type inferProvidedActor<A> = A extends Record<string, AnyActorLogic> ? {
+    [K in keyof A & string]: {
+        id: K;
+        logic: A[K];
+        src: K;
+    };
+}[keyof A & string] : never;
+
 declare type InitialContext<TContext extends MachineContext, TActor extends ProvidedActor, TInput, TEvent extends EventObject> = TContext | ContextFactory<TContext, TActor, TInput, TEvent>;
 
 declare interface InitialTransitionConfig<TContext extends MachineContext, TEvent extends EventObject, TActor extends ProvidedActor, TAction extends ParameterizedObject, TGuard extends ParameterizedObject, TDelay extends string> extends TransitionConfig<TContext, TEvent, TEvent, TActor, TAction, TGuard, TDelay, TODO, // TEmitted
@@ -2061,29 +2540,7 @@ declare interface InitialTransitionDefinition<TContext extends MachineContext, T
     guard?: never;
 }
 
-declare interface Input {
-    view: DiagramView;
-    xystore: XYStoreApi;
-    zoomable: boolean;
-    pannable: boolean;
-    nodesDraggable: boolean;
-    nodesSelectable: boolean;
-    fitViewPadding: ViewPaddings;
-    where: WhereOperator | null;
-    dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
-    features?: EnabledFeatures;
-}
-
-declare type Input_2 = {
-    subject: Fqn;
-    currentView: DiagramView;
-    initiatedFrom?: {
-        node?: NodeId;
-        clientRect?: Rect;
-    };
-};
-
-declare type Input_3 = {
+declare type Input = {
     subject: Fqn_3;
     viewId: ViewId_3 | null;
     scope: 'global' | 'view';
@@ -2092,9 +2549,9 @@ declare type Input_3 = {
     enableChangeScope?: boolean;
 };
 
-declare type Input_4 = ExclusiveUnion_2<{
+declare type Input_2 = ExclusiveUnion_2<{
     Edge: {
-        edgeId: EdgeId_2;
+        edgeId: EdgeId;
         viewId: ViewId_3;
     };
     Between: {
@@ -2104,6 +2561,24 @@ declare type Input_4 = ExclusiveUnion_2<{
     };
 }>;
 
+declare interface Input_3 {
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
+}
+
+declare interface Input_4 {
+    view: DiagramView;
+    xystore: XYStoreApi_3;
+    zoomable: boolean;
+    pannable: boolean;
+    nodesDraggable: boolean;
+    nodesSelectable: boolean;
+    fitViewPadding: ViewPaddings;
+    where: WhereOperator | null;
+    dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+    features?: EnabledFeatures;
+}
+
 declare type InputFrom<T> = T extends StateMachine<infer _TContext, infer _TEvent, infer _TChildren, infer _TActor, infer _TAction, infer _TGuard, infer _TDelay, infer _TStateValue, infer _TTag, infer TInput, infer _TOutput, infer _TEmitted, infer _TMeta, infer _TStateSchema> ? TInput : T extends ActorLogic<infer _TSnapshot, infer _TEvent, infer TInput, infer _TSystem, infer _TEmitted> ? TInput : never;
 
 declare interface InspectedActionEvent extends BaseInspectionEventProperties {
@@ -3003,6 +3478,9 @@ export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTML
     emptyText?: string;
 } & RefAttributes<HTMLDivElement>>;
 
+declare interface MediaPrintActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, MediaPrintEvent> {
+}
+
 declare type MediaPrintEvent = {
     type: 'media.print.on';
 } | {
@@ -3034,7 +3512,7 @@ declare interface NavigationHistoryEntry_2 {
     };
     focusedNode?: NodeId | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | null;
-    activeWalkthrough?: null | StepEdgeId;
+    activeWalkthrough?: null | StepPath;
 }
 
 export declare const NavigationPanel: {
@@ -3045,6 +3523,14 @@ export declare const NavigationPanel: {
     Dropdown: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;
 };
 
+declare interface NavigationPanelActorLogic extends StateMachine<Context_4, Events_4, any, any, any, any, any, StateValueFrom<typeof _actorLogic>, Tags_3, Input_3, any, any, any, any> {
+}
+
+declare interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, Events_4, never> {
+}
+
+declare type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
+
 declare type NodeId_2 = t.aux.NodeId;
 
 export declare type NodeRenderers = Partial<CamelCasedProperties<Types.NodeRenderers>>;
@@ -3229,7 +3715,7 @@ export declare type OverlayProps = PropsWithChildren<{
 
 declare namespace Overlays {
     namespace ElementDetails {
-        interface Input extends Input_2 {
+        interface Input extends ElementDetailsInput {
         }
         interface Logic extends ElementDetailsLogic {
         }
@@ -3237,14 +3723,14 @@ declare namespace Overlays {
         }
     }
     namespace RelationshipDetails {
-        type Input = Input_4;
+        type Input = Input_2;
         interface Logic extends RelationshipDetailsLogic {
         }
         interface ActorRef extends RelationshipDetailsActorRef {
         }
     }
     namespace RelationshipsBrowser {
-        interface Input extends Input_3 {
+        interface Input extends Input {
         }
         interface Logic extends RelationshipsBrowserLogic {
         }
@@ -3281,7 +3767,7 @@ declare interface OverlaysContext {
     }>;
 }
 
-declare type OverrideReactFlowProps = Pick<ReactFlowProps<Types.AnyNode, Types.AnyEdge>, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
+declare type OverrideReactFlowProps = Pick<ReactFlowProps<Types.AnyNode, Types.AnyEdge>, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold' | 'edgesFocusable'>;
 
 export declare type PaddingUnit = 'px' | '%';
 
@@ -3302,7 +3788,7 @@ declare type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? Diag
  * Picks appropriate bounds from the view,
  * depending on its type and dynamic variant
  */
-export declare function pickViewBounds(view: LayoutedView, dynamicVariant?: DynamicViewDisplayVariant): BBox_2;
+export declare function pickViewBounds(view: LayoutedView, dynamicVariant?: DynamicViewDisplayVariant): BBox_3;
 
 /**
  * PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
@@ -3331,6 +3817,16 @@ declare type ProjectsOverviewXYProps = {
     colorScheme?: 'light' | 'dark' | undefined;
 };
 
+declare type PromiseActorLogic<TOutput, TInput = unknown, TEmitted extends EventObject = EventObject> = ActorLogic<PromiseSnapshot<TOutput, TInput>, {
+    type: string;
+    [k: string]: unknown;
+}, TInput, // input
+AnyActorSystem, TEmitted>;
+
+declare type PromiseSnapshot<TOutput, TInput> = Snapshot<TOutput> & {
+    input: TInput | undefined;
+};
+
 declare interface ProvidedActor {
     src: string;
     logic: UnknownActorLogic;
@@ -3378,7 +3874,7 @@ export declare type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted
     style?: CSSProperties | undefined;
     mantineTheme?: any;
     /** Function to generate nonce attribute added to all generated `<style />` tags */
-    styleNonce?: string | (() => string) | undefined;
+    styleNonce?: string | (() => string | undefined) | undefined;
     children?: ReactNode | undefined;
 } & Omit<LikeC4DiagramProperties<A>, 'view'> & LikeC4DiagramEventHandlers<A>;
 
@@ -3391,7 +3887,7 @@ declare type RelationId = t.aux.RelationId;
 declare interface RelationshipDetailsActorRef extends ActorRef<RelationshipDetailsSnapshot, Events_3> {
 }
 
-declare interface RelationshipDetailsLogic extends StateMachine<Context_3, Events_3, {}, any, any, any, any, any, Tags_2, Input_4, any, any, any, any> {
+declare interface RelationshipDetailsLogic extends StateMachine<Context_3, Events_3, {}, any, any, any, any, any, Tags_2, Input_2, any, any, any, any> {
 }
 
 declare type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsLogic>;
@@ -3453,7 +3949,7 @@ declare namespace RelationshipDetailsTypes {
 declare interface RelationshipsBrowserActorRef extends ActorRef<RelationshipsBrowserSnapshot, Events_2> {
 }
 
-declare interface RelationshipsBrowserLogic extends StateMachine<Context_2, Events_2, {}, any, any, any, any, any, Tags, Input_3, any, any, any, any> {
+declare interface RelationshipsBrowserLogic extends StateMachine<Context_2, Events_2, {}, any, any, any, any, any, Tags, Input, any, any, any, any> {
 }
 
 declare type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserLogic>;
@@ -3631,7 +4127,7 @@ declare type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;
 
 export declare const searchBodyCss: string;
 
-export declare const SearchContext: Context_4<SearchContextValue | null>;
+export declare const SearchContext: Context_5<SearchContextValue | null>;
 
 declare interface SearchContext_2 {
     openedWithSearch: string | null;
@@ -3669,6 +4165,60 @@ export declare const searchDialogCss: string;
  */
 export declare const SearchPanelContent: ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>;
 
+/**
+ * Tuple type for selector and compare function pair
+ */
+declare type SelectAndCompare<A, B> = [
+selector: (snapshot: A) => B,
+compare: (a: B, b: B) => boolean
+];
+
+export declare const selectDiagramContext: <T>(select: (state: DiagramContext) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>, T>;
+
+export declare const selectDiagramSnapshot: <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>, T>;
+
 export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): JSX.Element;
 
 export declare function sequenceActorNode<A extends Any_5 = Unknown_3>(component: FC<SequenceActorNodeProps<A>>): Types.NodeRenderer<'seq-actor'>;
@@ -3680,9 +4230,9 @@ export declare type SequenceActorNodeProps<A extends Any_5 = Unknown_3> = {
 
 export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): JSX.Element;
 
-declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+declare function setData<E extends WithData<any>>(value: E, data: Partial<E['data']>): E;
 
-declare function setData<E extends WithData<any>>(state: Partial<NoInfer<E['data']>>): (value: E) => E;
+declare function setData<E extends WithData<any>>(state: Partial<NoInfer<E>['data']>): (value: E) => E;
 
 declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
 
@@ -3771,6 +4321,8 @@ options?: {
 }
 ], IsNotNever<RequiredActorOptions<TActor>>> : never;
 
+declare type StateFrom<T extends AnyStateMachine | ((...args: any[]) => AnyStateMachine)> = T extends AnyStateMachine ? ReturnType<T['transition']> : T extends (...args: any[]) => AnyStateMachine ? ReturnType<ReturnType<T>['transition']> : never;
+
 declare type StateId<TSchema extends StateSchema, TKey extends string = '(machine)', TParentKey extends string | null = null> = (TSchema extends {
     id: string;
 } ? TSchema['id'] : TParentKey extends null ? TKey : `${TParentKey}.${TKey}`) | (TSchema['states'] extends Record<string, any> ? Values<{
@@ -4124,6 +4676,8 @@ declare type StatesDefinition<TContext extends MachineContext, TEvent extends Ev
  */
 declare type StateValue = string | StateValueMap;
 
+declare type StateValueFrom<TMachine extends AnyStateMachine> = Parameters<StateFrom<TMachine>['matches']>[0];
+
 declare interface StateValueMap {
     [key: string]: StateValue | undefined;
 }
@@ -4141,7 +4695,7 @@ declare interface StoppedMachineSnapshot<TContext extends MachineContext, TEvent
 declare type StrictViewId<A> = t.aux.StrictViewId<A>;
 
 declare type Subject = {
-    edgeId: EdgeId_2;
+    edgeId: EdgeId;
     source?: never;
     target?: never;
 } | {
@@ -4168,7 +4722,8 @@ declare type System = ActorSystem<{
         diagram: DiagramMachineRef;
         overlays: OverlaysActorRef;
         search: SearchActorRef;
-        editor: EditorActorRef;
+        editor: BaseEditorActorRef;
+        navigationPanel: NavigationPanelActorRef;
     };
 }>;
 
@@ -4176,6 +4731,8 @@ declare type Tags = 'active';
 
 declare type Tags_2 = never;
 
+declare type Tags_3 = 'active';
+
 declare type TODO = any;
 
 declare type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
@@ -4276,6 +4833,7 @@ export declare namespace Types {
         height: number;
         type: 'target' | 'source';
         position: 'left' | 'right' | 'top' | 'bottom';
+        hidden?: boolean;
     };
     export type SequenceActorNodeData = Simplify<LeafNodeData & {
         navigateTo: ViewId | null;
@@ -4283,6 +4841,34 @@ export declare namespace Types {
         ports: Array<SequenceActorNodePort>;
         viewHeight: number;
     }>;
+    /**
+     * Represents subflow area in the diagram
+     * `try` and `alt` flows have special handling in the diagram
+     */
+    export type SequenceSubflowData = LeafNodeData & {
+        flowId: StepPath;
+        title: string | undefined;
+        /**
+         * This is first subflow in current flow
+         */
+        isFirst?: boolean | undefined;
+        /**
+         * This is last subflow in current flow
+         */
+        isLast?: boolean | undefined;
+        collapsed: boolean;
+    } & ({
+        flowType: Exclude<DynamicViewFlow.SubFlowType, 'try' | 'alt'>;
+    } | SequenceSubflowData.AltOrTry);
+    export namespace SequenceSubflowData {
+        export type AltOrTry = {
+            flowType: 'try' | 'alt';
+            headerHeight: number;
+        };
+    }
+    /**
+     * @deprecated Use {@link SequenceSubflowData} instead
+     */
     export type SequenceParallelAreaData = Simplify<LeafNodeData & {
         parallelPrefix: string;
     }>;
@@ -4325,10 +4911,11 @@ export declare namespace Types {
     export type DeploymentElementNode = BaseNode<DeploymentElementNodeData, 'deployment'>;
     export type SequenceActorNode = BaseNode<SequenceActorNodeData, 'seq-actor'>;
     export type SequenceParallelArea = BaseNode<SequenceParallelAreaData, 'seq-parallel'>;
+    export type SequenceSubflowArea = BaseNode<SequenceSubflowData, 'seq-subflow'>;
     export type CompoundElementNode = BaseNode<CompoundElementNodeData, 'compound-element'>;
     export type CompoundDeploymentNode = BaseNode<CompoundDeploymentNodeData, 'compound-deployment'>;
     export type ViewGroupNode = BaseNode<ViewGroupNodeData, 'view-group'>;
-    export type AnyNode = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea;
+    export type AnyNode = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea | SequenceSubflowArea;
     export type NodeType = AnyNode['type'];
     export type NodeData = ExclusiveUnion<{
         ElementNodeData: ElementNodeData;
@@ -4338,6 +4925,7 @@ export declare namespace Types {
         ViewGroupNodeData: ViewGroupNodeData;
         SequenceActorNodeData: SequenceActorNodeData;
         SequenceParallelAreaData: SequenceParallelAreaData;
+        SequenceSubflowAreaData: SequenceSubflowData;
     }>;
     export type Node<Type extends NodeType = NodeType> = Extract<AnyNode, {
         type: Type;
@@ -4348,8 +4936,21 @@ export declare namespace Types {
         labelXY: XYPosition | null;
         isLabelCustomized?: boolean | undefined;
         controlPoints: XYPosition[] | undefined | null;
+        /**
+         * When dynamic view in "diagram" variant
+         * Edges are RelationshipEdgeData - stepnum is used to determine the step number
+         * (backward compatibility)
+         */
+        stepnum?: number;
     }>;
-    export type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+    export type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        id: StepPath;
+        state?: 'processed' | 'active' | 'skipped' | 'pending' | null;
+        stepnum: number;
+        parentFlow: null | {
+            id: StepPath;
+            type: DynamicViewFlow.SubFlowType;
+        };
         notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         labelBBox: BBox;
@@ -4435,15 +5036,64 @@ export declare function useCurrentViewModel(): CurrentViewModel;
 
 export declare function useDiagram(): DiagramApi;
 
-export declare function useDiagramActorRef(): DiagramActorRef;
+export declare const useDiagramActorRef: () => DiagramActorRef;
 
 /**
  * Read diagram context
+ * @deprecated use {@link useDiagramSelector}
  */
 export declare function useDiagramContext<T = unknown>(selector: (context: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
 
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
 
+export declare const useDiagramSelector: {
+    <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>) => T): T;
+    <T>(selectorCompare: SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>, T>): T;
+    <T>(selector: (snapshot: MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>) => T, compare: (a: T, b: T) => boolean): T;
+};
+
 export declare function useEnabledFeatures(): EnabledFeatures;
 
 /**
@@ -4651,18 +5301,18 @@ declare type XYFlowInstance = ReactFlowInstance<Types.AnyNode, Types.AnyEdge>;
 declare type XYFLowInstance_2 = ReactFlowInstance<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
 
 declare type XYStoreApi = {
-    getState: () => XYStoreState;
-    setState: (state: Partial<XYStoreState> | ((state: XYStoreState) => Partial<XYStoreState>)) => void;
-    subscribe: (listener: (state: XYStoreState, prevState: XYStoreState) => void) => () => void;
+    getState: () => XYStoreState_2;
+    setState: (state: XYStoreState_2) => void;
 };
 
 declare type XYStoreApi_2 = {
-    getState: () => XYStoreState_2;
-    setState: (state: XYStoreState_2) => void;
+    getState: () => XYStoreState_3;
 };
 
 declare type XYStoreApi_3 = {
-    getState: () => XYStoreState_3;
+    getState: () => XYStoreState;
+    setState: (state: Partial<XYStoreState> | ((state: XYStoreState) => Partial<XYStoreState>)) => void;
+    subscribe: (listener: (state: XYStoreState, prevState: XYStoreState) => void) => () => void;
 };
 
 export declare type XYStoreState = ReactFlowState<Types.AnyNode, Types.AnyEdge>;