@vue/devtools-kit 7.2.0 → 7.3.0-beta.1

package/dist/index.d.ts

@@ -1,6 +1,9 @@
-import { App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary, VNode } from 'vue';
-import { RouteLocationNormalizedLoaded, RouteRecordNormalized, Router } from 'vue-router';
+import { App as App$1, ComponentInternalInstance, ComponentOptions, SuspenseBoundary, VNode } from 'vue';
+import * as hookable from 'hookable';
+import { Hookable, HookKeys } from 'hookable';
+import { Router, RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router';
 export { Router } from 'vue-router';
+import { BirpcOptions, ChannelOptions, BirpcGroup, BirpcReturn } from 'birpc';
 
 interface ComponentInspector {
     enabled: boolean;
@@ -22,62 +25,491 @@ interface ComponentInspector {
 declare function toggleComponentInspectorEnabled(enabled: boolean): void;
 declare function getComponentInspector(): Promise<ComponentInspector>;
 
-interface TimelineEvent {
-    event: {
-        groupId: number;
-        time: number;
-        title: string;
-        subtitle: string;
-        data: Record<string, unknown>;
+interface OpenInEditorOptions {
+    baseUrl?: string;
+    file?: string;
+    line?: number;
+    column?: number;
+}
+declare function setOpenInEditorBaseUrl(url: string): void;
+declare function openInEditor(options?: OpenInEditorOptions): void;
+
+type ComponentInstance = any;
+interface ComponentTreeNode {
+    uid: string | number;
+    id: string;
+    name: string;
+    renderKey: string | number;
+    inactive: boolean;
+    isFragment: boolean;
+    hasChildren: boolean;
+    children: ComponentTreeNode[];
+    domOrder?: number[];
+    consoleId?: string;
+    isRouterView?: boolean;
+    macthedRouteSegment?: string;
+    tags: InspectorNodeTag[];
+    autoOpen: boolean;
+    meta?: any;
+}
+type ComponentBuiltinCustomStateTypes = 'function' | 'map' | 'set' | 'reference' | 'component' | 'component-definition' | 'router' | 'store';
+interface ComponentCustomState extends ComponentStateBase {
+    value: CustomState;
+}
+interface StateBase {
+    key: string;
+    value: any;
+    editable?: boolean;
+    objectType?: 'ref' | 'reactive' | 'computed' | 'other';
+    raw?: string;
+}
+interface ComponentStateBase extends StateBase {
+    type: string;
+}
+interface ComponentPropState extends ComponentStateBase {
+    meta?: {
+        type: string;
+        required: boolean;
+        /** Vue 1 only */
+        mode?: 'default' | 'sync' | 'once';
+    };
+}
+interface CustomState {
+    _custom: {
+        type: ComponentBuiltinCustomStateTypes | string;
+        objectType?: string;
+        display?: string;
+        tooltip?: string;
+        value?: any;
+        abstract?: boolean;
+        file?: string;
+        uid?: number;
+        readOnly?: boolean;
+        /** Configure immediate child fields */
+        fields?: {
+            abstract?: boolean;
+        };
+        id?: any;
+        actions?: {
+            icon: string;
+            tooltip?: string;
+            action: () => void | Promise<void>;
+        }[];
+        /** internal */
+        _reviveId?: number;
     };
-    layerId: string;
 }
-interface TimelineLayerItem {
+type ComponentState = ComponentStateBase | ComponentPropState | ComponentCustomState;
+interface InspectedComponentData {
     id: string;
-    label: string;
-    color: number;
+    name: string;
+    file: string;
+    state: ComponentState[];
+    functional?: boolean;
+}
+interface ComponentBounds {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
 }
-declare function addTimelineLayer(payload: TimelineLayerItem): void;
-declare function getTimelineLayer(): TimelineLayerItem[];
 
-interface Inspector {
+interface CustomInspectorOptions {
     id: string;
-    nodeId: string;
-    filter: string;
-    treeFilterPlaceholder: string;
+    label: string;
+    icon?: string;
+    treeFilterPlaceholder?: string;
+    stateFilterPlaceholder?: string;
+    noSelectionText?: string;
     actions?: {
         icon: string;
-        tooltip: string;
-        action: (payload: unknown) => void;
+        tooltip?: string;
+        action: () => void | Promise<void>;
     }[];
     nodeActions?: {
         icon: string;
-        tooltip: string;
-        action: (payload: unknown) => void;
+        tooltip?: string;
+        action: (nodeId: string) => void | Promise<void>;
     }[];
 }
-interface InspectorApiPayload {
+interface InspectorNodeTag {
+    label: string;
+    textColor: number;
+    backgroundColor: number;
+    tooltip?: string;
+}
+type EditStatePayload = {
+    value: any;
+    newKey?: string | null;
+    remove?: undefined | false;
+} | {
+    value?: undefined;
+    newKey?: undefined;
+    remove: true;
+};
+interface CustomInspectorNode {
     id: string;
     label: string;
-    icon?: string;
-    treeFilterPlaceholder?: string;
-    actions?: {
-        icon: string;
-        tooltip: string;
-        action: (payload: unknown) => void;
+    children?: CustomInspectorNode[];
+    tags?: InspectorNodeTag[];
+    name?: string;
+    file?: string;
+}
+interface CustomInspectorState {
+    [key: string]: (StateBase | Omit<ComponentState, 'type'>)[];
+}
+
+interface DevToolsAppRecords extends AppRecord {
+}
+interface DevToolsState {
+    connected: boolean;
+    clientConnected: boolean;
+    vitePluginDetected: boolean;
+    appRecords: DevToolsAppRecords[];
+    activeAppRecordId: string;
+    tabs: CustomTab[];
+    commands: CustomCommand[];
+    highPerfModeEnabled: boolean;
+}
+declare const callStateUpdatedHook: (state: DevToolsState) => Promise<void>;
+declare const callConnectedUpdatedHook: (state: DevToolsState, oldState: DevToolsState) => Promise<void>;
+declare const devtoolsAppRecords: DevToolsAppRecords[] & {
+    value: DevToolsAppRecords[];
+};
+declare const addDevToolsAppRecord: (app: AppRecord) => void;
+declare const removeDevToolsAppRecord: (app: AppRecord['app']) => void;
+declare const activeAppRecord: AppRecord & {
+    value: AppRecord;
+    id: string;
+};
+declare function setActiveAppRecord(app: AppRecord): void;
+declare function setActiveAppRecordId(id: string): void;
+declare const devtoolsState: DevToolsState;
+declare function resetDevToolsState(): void;
+declare function updateDevToolsState(state: Partial<DevToolsState>): void;
+declare function onDevToolsConnected(fn: () => void): Promise<void>;
+declare function addCustomTab(tab: CustomTab): void;
+declare function addCustomCommand(action: CustomCommand): void;
+declare function removeCustomCommand(actionId: string): void;
+declare function toggleClientConnected(state: boolean): void;
+
+declare enum DevToolsV6PluginAPIHookKeys {
+    VISIT_COMPONENT_TREE = "visitComponentTree",
+    INSPECT_COMPONENT = "inspectComponent",
+    EDIT_COMPONENT_STATE = "editComponentState",
+    GET_INSPECTOR_TREE = "getInspectorTree",
+    GET_INSPECTOR_STATE = "getInspectorState",
+    EDIT_INSPECTOR_STATE = "editInspectorState",
+    INSPECT_TIMELINE_EVENT = "inspectTimelineEvent",
+    TIMELINE_CLEARED = "timelineCleared",
+    SET_PLUGIN_SETTINGS = "setPluginSettings"
+}
+interface DevToolsV6PluginAPIHookPayloads {
+    [DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]: {
+        app: App;
+        componentInstance: ComponentInstance;
+        treeNode: ComponentTreeNode;
+        filter: string;
+    };
+    [DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]: {
+        app: App;
+        componentInstance: ComponentInstance;
+        instanceData: InspectedComponentData;
+    };
+    [DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]: {
+        app: App;
+        inspectorId: string;
+        nodeId: string;
+        path: string[];
+        type: string;
+        state: EditStatePayload;
+        set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void;
+    };
+    [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]: {
+        app: App;
+        inspectorId: string;
+        filter: string;
+        rootNodes: CustomInspectorNode[];
+    };
+    [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]: {
+        app: App;
+        inspectorId: string;
+        nodeId: string;
+        state: CustomInspectorState;
+    };
+    [DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]: {
+        app: App;
+        inspectorId: string;
+        nodeId: string;
+        path: string[];
+        type: string;
+        state: EditStatePayload;
+        set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void;
+    };
+    [DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]: {
+        app: App;
+        layerId: string;
+        event: TimelineEvent;
+        all?: boolean;
+        data: any;
+    };
+    [DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]: Record<string, never>;
+    [DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]: {
+        app: App;
+        pluginId: string;
+        key: string;
+        newValue: any;
+        oldValue: any;
+        settings: any;
+    };
+}
+interface DevToolsV6PluginAPIHooks {
+    [DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]) => void;
+    [DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]) => void;
+    [DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]) => void;
+    [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]) => void;
+    [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]) => void;
+    [DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) => void;
+    [DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]) => void;
+    [DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]) => void;
+    [DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]) => void;
+}
+declare enum DevToolsContextHookKeys {
+    ADD_INSPECTOR = "addInspector",
+    SEND_INSPECTOR_TREE = "sendInspectorTree",
+    SEND_INSPECTOR_STATE = "sendInspectorState",
+    CUSTOM_INSPECTOR_SELECT_NODE = "customInspectorSelectNode",
+    TIMELINE_LAYER_ADDED = "timelineLayerAdded",
+    TIMELINE_EVENT_ADDED = "timelineEventAdded",
+    GET_COMPONENT_INSTANCES = "getComponentInstances",
+    GET_COMPONENT_BOUNDS = "getComponentBounds",
+    GET_COMPONENT_NAME = "getComponentName",
+    COMPONENT_HIGHLIGHT = "componentHighlight",
+    COMPONENT_UNHIGHLIGHT = "componentUnhighlight"
+}
+interface DevToolsContextHookPayloads {
+    [DevToolsContextHookKeys.ADD_INSPECTOR]: {
+        inspector: CustomInspectorOptions;
+        plugin: DevToolsPlugin;
+    };
+    [DevToolsContextHookKeys.SEND_INSPECTOR_TREE]: {
+        inspectorId: string;
+        plugin: DevToolsPlugin;
+    };
+    [DevToolsContextHookKeys.SEND_INSPECTOR_STATE]: {
+        inspectorId: string;
+        plugin: DevToolsPlugin;
+    };
+    [DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]: {
+        inspectorId: string;
+        nodeId: string;
+        plugin: DevToolsPlugin;
+    };
+    [DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]: {
+        options: TimelineLayerOptions;
+        plugin: DevToolsPlugin;
+    };
+    [DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]: {
+        options: TimelineEventOptions;
+        plugin: DevToolsPlugin;
+    };
+    [DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]: {
+        app: App;
+    };
+    [DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]: {
+        instance: ComponentInstance;
+    };
+    [DevToolsContextHookKeys.GET_COMPONENT_NAME]: {
+        instance: ComponentInstance;
+    };
+    [DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]: {
+        uid: string;
+    };
+    [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: Record<string, never>;
+}
+declare enum DevToolsMessagingHookKeys {
+    SEND_INSPECTOR_TREE_TO_CLIENT = "sendInspectorTreeToClient",
+    SEND_INSPECTOR_STATE_TO_CLIENT = "sendInspectorStateToClient",
+    SEND_TIMELINE_EVENT_TO_CLIENT = "sendTimelineEventToClient",
+    SEND_INSPECTOR_TO_CLIENT = "sendInspectorToClient",
+    SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT = "sendActiveAppUpdatedToClient",
+    DEVTOOLS_STATE_UPDATED = "devtoolsStateUpdated",
+    DEVTOOLS_CONNECTED_UPDATED = "devtoolsConnectedUpdated",
+    ROUTER_INFO_UPDATED = "routerInfoUpdated"
+}
+interface DevToolsMessagingHookPayloads {
+    [DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]: {
+        inspectorId: string;
+        rootNodes: CustomInspectorNode[];
+    };
+    [DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]: {
+        inspectorId: string;
+        nodeId: string;
+        state: CustomInspectorState;
+    };
+    [DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]: TimelineEventOptions;
+    [DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]: {
+        id: string;
+        label: string;
+        logo: string;
+        packageName: string | undefined;
+        homepage: string | undefined;
     }[];
-    nodeActions?: {
-        icon: string;
-        tooltip: string;
-        action: (payload: unknown) => void;
+    [DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]: {
+        state: DevToolsState;
+    };
+    [DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]: {
+        state: DevToolsState;
+        oldState: DevToolsState;
+    };
+    [DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]: {
+        state: RouterInfo;
+    };
+}
+interface DevToolsMessagingHooks {
+    [DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]) => void;
+    [DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]) => void;
+    [DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]) => void;
+    [DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT]: () => void;
+    [DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]) => void;
+    [DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]) => void;
+    [DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]) => void;
+    [DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]) => void;
+}
+interface DevToolsContextHooks extends DevToolsV6PluginAPIHooks {
+    [DevToolsContextHookKeys.ADD_INSPECTOR]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.ADD_INSPECTOR]) => void;
+    [DevToolsContextHookKeys.SEND_INSPECTOR_TREE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.SEND_INSPECTOR_TREE]) => void;
+    [DevToolsContextHookKeys.SEND_INSPECTOR_STATE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.SEND_INSPECTOR_STATE]) => void;
+    [DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]) => void;
+    [DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]) => void;
+    [DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]) => void;
+    [DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]) => void;
+    [DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]) => void;
+    [DevToolsContextHookKeys.GET_COMPONENT_NAME]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_NAME]) => void;
+    [DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]) => void;
+    [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: () => void;
+}
+declare function createDevToolsCtxHooks(): hookable.Hookable<DevToolsContextHooks & DevToolsMessagingHooks, hookable.HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>;
+
+declare function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>): {
+    getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], 'inspectorId' | 'filter'>): Promise<never[]>;
+    getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], 'inspectorId' | 'nodeId'>): Promise<CustomInspectorState>;
+    editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]): void;
+    inspectComponentInspector(): Promise<string>;
+    cancelInspectComponentInspector(): void;
+    getComponentRenderCode(id: string): any;
+    scrollToComponent(id: string): void;
+    openInEditor: typeof openInEditor;
+    getVueInspector: typeof getComponentInspector;
+    toggleApp(id: string): void;
+};
+type DevToolsApiType = ReturnType<typeof createDevToolsApi>;
+
+type DevToolsKitPluginBuffer = [PluginDescriptor, PluginSetupFunction];
+declare const devtoolsPluginBuffer: DevToolsKitPluginBuffer[];
+declare function addDevToolsPluginToBuffer(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
+
+interface DevToolsKitInspector {
+    options: CustomInspectorOptions;
+    descriptor: PluginDescriptor;
+    treeFilter: string;
+    selectedNodeId: string;
+    appRecord: unknown;
+}
+declare const devtoolsInspector: DevToolsKitInspector[];
+declare const callInspectorUpdatedHook: () => Promise<void>;
+declare function addInspector(inspector: CustomInspectorOptions, descriptor: PluginDescriptor): void;
+declare function getActiveInspectors(): {
+    id: string;
+    label: string;
+    logo: string;
+    packageName: string | undefined;
+    homepage: string | undefined;
+}[];
+declare function getInspectorInfo(id: string): {
+    id: string;
+    label: string;
+    logo: string | undefined;
+    packageName: string | undefined;
+    homepage: string | undefined;
+    timelineLayers: {
+        id: string;
+        label: string;
+        color: number;
     }[];
+} | undefined;
+declare function getInspector(id: string, app?: App$1): DevToolsKitInspector | undefined;
+declare function getInspectorActions(id: string): {
+    icon: string;
+    tooltip?: string | undefined;
+    action: () => void | Promise<void>;
+}[] | undefined;
+declare function getInspectorNodeActions(id: string): {
+    icon: string;
+    tooltip?: string | undefined;
+    action: (nodeId: string) => void | Promise<void>;
+}[] | undefined;
+
+declare function getDevToolsEnv(): {
+    vitePluginDetected: boolean;
+};
+declare function setDevToolsEnv(env: Partial<any>): void;
+
+declare const ROUTER_KEY = "__VUE_DEVTOOLS_ROUTER__";
+declare const ROUTER_INFO_KEY = "__VUE_DEVTOOLS_ROUTER_INFO__";
+declare const devtoolsRouterInfo: RouterInfo;
+declare const devtoolsRouter: {
+    value: Router;
+};
+
+interface DevtoolsContext {
+    hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>;
+    state: DevToolsState & {
+        activeAppRecordId: string;
+        activeAppRecord: DevToolsAppRecords;
+        appRecords: DevToolsAppRecords[];
+    };
+    api: DevToolsApiType;
 }
-declare function addInspector(payload: Inspector): void;
-declare function getInspector(inspectorId: string): Inspector | undefined;
-declare function updateInspector(inspectorId: string, payload: Partial<Inspector>): void;
+declare const devtoolsContext: DevtoolsContext;
 
-type PluginApi = DevToolsPluginApi;
-declare type PluginSettingsItem = {
+declare class DevToolsV6PluginAPI {
+    private plugin;
+    private hooks;
+    constructor({ plugin, ctx }: {
+        plugin: DevToolsPlugin;
+        ctx: DevtoolsContext;
+    });
+    get on(): {
+        visitComponentTree: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]) => void;
+        inspectComponent: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]) => void;
+        editComponentState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]) => void;
+        getInspectorTree: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]) => void;
+        getInspectorState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]) => void;
+        editInspectorState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) => void;
+        inspectTimelineEvent: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]) => void;
+        timelineCleared: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]) => void;
+        setPluginSettings: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]) => void;
+    };
+    notifyComponentUpdate(instance?: ComponentInstance): void;
+    addInspector(options: CustomInspectorOptions): void;
+    sendInspectorTree(inspectorId: string): void;
+    sendInspectorState(inspectorId: string): void;
+    selectInspectorNode(inspectorId: string, nodeId: string): void;
+    now(): number;
+    addTimelineLayer(options: TimelineLayerOptions): void;
+    addTimelineEvent(options: TimelineEventOptions): void;
+    getSettings(pluginId?: string): {};
+    getComponentInstances(app: App): Promise<ComponentInstance[]>;
+    getComponentBounds(instance: ComponentInstance): Promise<ComponentBounds>;
+    getComponentName(instance: ComponentInstance): Promise<string>;
+    highlightElement(instance: ComponentInstance): Promise<any>;
+    unhighlightElement(): Promise<any>;
+}
+
+declare const DevToolsPluginAPI: typeof DevToolsV6PluginAPI;
+
+type PluginSettingsItem = {
     label: string;
     description?: string;
 } & ({
@@ -95,10 +527,11 @@ declare type PluginSettingsItem = {
     type: 'text';
     defaultValue: string;
 });
+type PluginSetupFunction = (api: InstanceType<typeof DevToolsPluginAPI>) => void;
 interface PluginDescriptor {
     id: string;
     label: string;
-    app: App<any>;
+    app: App$1<any>;
     packageName?: string;
     homepage?: string;
     componentStateTypes?: string[];
@@ -112,7 +545,12 @@ interface PluginDescriptor {
     enableEarlyProxy?: boolean;
     settings?: Record<string, PluginSettingsItem>;
 }
-type PluginSetupFunction = (api: PluginApi) => void;
+interface DevToolsPlugin {
+    descriptor: PluginDescriptor;
+    setupFn: PluginSetupFunction;
+}
+
+type App = any;
 type VueAppInstance = ComponentInternalInstance & {
     type: {
         _componentTag: string | undefined;
@@ -155,28 +593,56 @@ type VueAppInstance = ComponentInternalInstance & {
     setupState: Record<string, unknown>;
     provides: Record<string | symbol, unknown>;
     ctx: Record<string, unknown>;
-} & App<any>;
+} & App;
 interface AppRecord {
-    id: string | number;
+    id: string;
     name: string;
     app?: App;
     version?: string;
     types?: Record<string, string | symbol>;
     instanceMap: Map<string, VueAppInstance>;
     rootInstance: VueAppInstance;
-    api?: PluginApi;
     routerId?: string;
-    moduleDetectives?: {
-        vueQuery: boolean;
-        vueRouter: boolean;
-        veeValidate: boolean;
-        pinia: boolean;
-        vuex: boolean;
-        vueI18n: boolean;
-    };
 }
 
-type HookAppInstance = App & VueAppInstance;
+interface TimelineEvent<TData = any, TMeta = any> {
+    time: number;
+    data: TData;
+    logType?: 'default' | 'warning' | 'error';
+    meta?: TMeta;
+    groupId?: number | string;
+    title?: string;
+    subtitle?: string;
+}
+interface ScreenshotOverlayEvent {
+    layerId: string;
+    renderMeta: any;
+}
+interface ScreenshotOverlayRenderContext<TData = any, TMeta = any> {
+    screenshot: ScreenshotData;
+    events: (TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent)[];
+    index: number;
+}
+type ScreenshotOverlayRenderResult = HTMLElement | string | false;
+interface ScreenshotData {
+    time: number;
+}
+interface TimelineLayerOptions<TData = any, TMeta = any> {
+    id: string;
+    label: string;
+    color: number;
+    skipScreenshots?: boolean;
+    groupsOnly?: boolean;
+    ignoreNoDurationGroups?: boolean;
+    screenshotOverlayRender?: (event: TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise<ScreenshotOverlayRenderResult>;
+}
+interface TimelineEventOptions {
+    layerId: string;
+    event: TimelineEvent;
+    all?: boolean;
+}
+
+type HookAppInstance = App$1 & VueAppInstance;
 declare enum DevToolsHooks {
     APP_INIT = "app:init",
     APP_UNMOUNT = "app:unmount",
@@ -193,13 +659,13 @@ declare enum DevToolsHooks {
     APP_CONNECTED = "app:connected",
     SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
 }
-interface DevToolsEvent$1 {
+interface DevToolsEvent {
     [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void | Promise<void>;
     [DevToolsHooks.APP_CONNECTED]: () => void;
     [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise<void>;
     [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>;
-    [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent$1['component:added'];
-    [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent$1['component:added'];
+    [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
+    [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
     [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
         target?: string;
     }) => void;
@@ -214,60 +680,22 @@ interface DevToolsHook {
     once: <T extends Function>(event: DevToolsHooks, handler: T) => void;
     off: <T extends Function>(event: DevToolsHooks, handler: T) => void;
     appRecords: AppRecord[];
-    apps: Record<number, {
-        componentCount: number;
-    }>;
+    apps: any;
     cleanupBuffer?: (matchArg: unknown) => boolean;
 }
 interface VueHooks {
     on: {
-        vueAppInit: (fn: DevToolsEvent$1[DevToolsHooks.APP_INIT]) => void;
-        vueAppUnmount: (fn: DevToolsEvent$1[DevToolsHooks.APP_UNMOUNT]) => void;
-        vueAppConnected: (fn: DevToolsEvent$1[DevToolsHooks.APP_CONNECTED]) => void;
-        componentAdded: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_ADDED]) => () => void;
-        componentUpdated: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
-        componentRemoved: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
-        setupDevtoolsPlugin: (fn: DevToolsEvent$1[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
+        vueAppInit: (fn: DevToolsEvent[DevToolsHooks.APP_INIT]) => void;
+        vueAppUnmount: (fn: DevToolsEvent[DevToolsHooks.APP_UNMOUNT]) => void;
+        vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void;
+        componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void;
+        componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
+        componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
+        setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
     };
     setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
 }
 
-interface CustomCommandAction {
-    type: 'url';
-    /**
-     * Url of the action, if set, execute the action will open the url
-     */
-    src: string;
-}
-interface CustomCommand {
-    /**
-     * The id of the command, should be unique
-     */
-    id: string;
-    title: string;
-    description?: string;
-    /**
-     * Order of the command, bigger number will be shown first
-     * @default 0
-     */
-    order?: number;
-    /**
-     * Icon of the tab, support any Iconify icons, or a url to an image
-     */
-    icon?: string;
-    /**
-     * - action of the command
-     * - __NOTE__: This will be ignored if `children` is set
-     */
-    action?: CustomCommandAction;
-    /**
-     * - children of action, if set, execute the action will show the children
-     */
-    children?: Omit<CustomCommand, 'children'>[];
-}
-declare function addCustomCommand(action: CustomCommand): void;
-declare function removeCustomCommand(actionId: string): void;
-
 type TabCategory = 'pinned' | 'app' | 'modules' | 'advanced';
 type ModuleView = ModuleIframeView | ModuleVNodeView;
 interface ModuleIframeView {
@@ -320,20 +748,38 @@ interface CustomTab {
     category?: TabCategory;
 }
 
-declare function addCustomTab(tab: CustomTab): void;
-
-interface DevToolsState {
-    connected: boolean;
-    clientConnected: boolean;
-    vitePluginDetected: boolean;
-    appRecords: AppRecord[];
-    activeAppRecord: AppRecord | null;
-    selectedComponentId: string | null;
-    pluginBuffer: [PluginDescriptor, PluginSetupFunction][];
-    tabs: CustomTab[];
-    commands: CustomCommand[];
-    activeAppRecordId: string | null;
-    highPerfModeEnabled: boolean;
+interface CustomCommandAction {
+    type: 'url';
+    /**
+     * Url of the action, if set, execute the action will open the url
+     */
+    src: string;
+}
+interface CustomCommand {
+    /**
+     * The id of the command, should be unique
+     */
+    id: string;
+    title: string;
+    description?: string;
+    /**
+     * Order of the command, bigger number will be shown first
+     * @default 0
+     */
+    order?: number;
+    /**
+     * Icon of the tab, support any Iconify icons, or a url to an image
+     */
+    icon?: string;
+    /**
+     * - action of the command
+     * - __NOTE__: This will be ignored if `children` is set
+     */
+    action?: CustomCommandAction;
+    /**
+     * - children of action, if set, execute the action will show the children
+     */
+    children?: Omit<CustomCommand, 'children'>[];
 }
 
 interface RouterInfo {
@@ -341,41 +787,81 @@ interface RouterInfo {
     routes: RouteRecordNormalized[];
 }
 
-interface DevToolsContext {
-    appRecord: AppRecord | null;
-    api: DevToolsPluginApi;
-    inspector: Inspector[];
-    timelineLayer: TimelineLayerItem[];
-    routerInfo: RouterInfo;
-    router: Router | null;
-    activeInspectorTreeId: string;
-    componentPluginHookBuffer: (() => void)[];
-    clear: () => void;
+declare function initDevTools(): void;
+declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
+
+declare function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, PluginSetupFunction];
+
+declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
+declare function callDevToolsPluginSetupFn(plugin: [PluginDescriptor, PluginSetupFunction], app: App): void;
+declare function registerDevToolsPlugin(app: App): void;
+
+declare function toggleHighPerfMode(state?: boolean): void;
+
+declare function setIframeServerContext(context: HTMLIFrameElement): void;
+
+interface EventEmitter$2 {
+    on: (name: string, handler: (data: any) => void) => void;
+    send: (name: string, ...args: any[]) => void;
+}
+interface ViteClientContext extends EventEmitter$2 {
 }
+interface ViteDevServer {
+    hot?: EventEmitter$2;
+    ws?: EventEmitter$2;
+}
+declare function setViteClientContext(context: ViteClientContext): void;
+declare function setViteServerContext(context: ViteDevServer): void;
 
-interface DevToolsEnv {
-    vitePluginDetected: boolean;
+interface EventEmitter$1 {
+    on: (name: string, handler: (data: any) => void) => void;
+    send: (name: string, ...args: any[]) => void;
+    emit: (name: string, ...args: any[]) => void;
+}
+interface ElectronClientContext extends EventEmitter$1 {
 }
+interface ElectronProxyContext extends EventEmitter$1 {
+}
+interface ElectronServerContext extends EventEmitter$1 {
+}
+declare function setElectronClientContext(context: ElectronClientContext): void;
+declare function setElectronProxyContext(context: ElectronProxyContext): void;
+declare function setElectronServerContext(context: ElectronServerContext): void;
 
-interface InspectorNodeTag {
-    label: string;
-    textColor: number;
-    backgroundColor: number;
-    tooltip?: string;
+interface EventEmitter {
+    onMessage: {
+        addListener: (listener: (name: string, ...args: any[]) => void) => void;
+    };
+    postMessage: (name: string, ...args: any[]) => void;
 }
-interface ComponentTreeNode {
-    uid: number | string;
-    id: string;
-    name: string;
-    renderKey: string | number;
-    inactive: boolean;
-    isFragment: boolean;
-    children: ComponentTreeNode[];
-    domOrder?: number[];
-    tags: InspectorNodeTag[];
-    autoOpen: boolean;
-    file: string;
+interface ExtensionClientContext extends EventEmitter {
 }
+declare function getExtensionClientContext(): ExtensionClientContext;
+declare function setExtensionClientContext(context: ExtensionClientContext): void;
+
+type Presets = 'iframe' | 'electron' | 'vite' | 'broadcast' | 'extension';
+
+interface CreateRpcClientOptions<RemoteFunctions> {
+    options?: BirpcOptions<RemoteFunctions>;
+    preset?: Presets;
+    channel?: ChannelOptions;
+}
+interface CreateRpcServerOptions<RemoteFunctions> {
+    options?: BirpcOptions<RemoteFunctions>;
+    preset?: Presets;
+    channel?: ChannelOptions;
+}
+declare function setRpcServerToGlobal<R, L>(rpc: BirpcGroup<R, L>): void;
+declare function getRpcClient<R, L extends object = Record<string, never>>(): BirpcReturn<R, L>;
+declare function getRpcServer<R, L extends object = Record<string, never>>(): BirpcGroup<R, L>;
+declare function setViteRpcClientToGlobal<R, L>(rpc: BirpcReturn<R, L>): void;
+declare function setViteRpcServerToGlobal<R, L>(rpc: BirpcGroup<R, L>): void;
+declare function getViteRpcClient<R, L extends object = Record<string, never>>(): BirpcReturn<R, L>;
+declare function getViteRpcServer<R, L extends object = Record<string, never>>(): BirpcGroup<R, L>;
+declare function createRpcClient<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(functions: LocalFunctions, options?: CreateRpcClientOptions<RemoteFunctions>): BirpcReturn<RemoteFunctions, LocalFunctions> | undefined;
+declare function createRpcServer<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(functions: LocalFunctions, options?: CreateRpcServerOptions<RemoteFunctions>): void;
+declare function createRpcProxy<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(options?: CreateRpcClientOptions<RemoteFunctions>): BirpcReturn<RemoteFunctions, LocalFunctions>;
+
 interface InspectorTreeApiPayload {
     app?: VueAppInstance;
     inspectorId?: string;
@@ -477,15 +963,6 @@ interface InspectorStateEditorPayload {
 
 type customTypeEnums = 'function' | 'bigint' | 'map' | 'set' | 'store' | 'router' | 'component' | 'component-definition' | 'HTMLElement' | 'component-definition' | 'date';
 
-interface OpenInEditorOptions {
-    baseUrl?: string;
-    file?: string;
-    line?: number;
-    column?: number;
-}
-declare function setOpenInEditorBaseUrl(url: string): void;
-declare function openInEditor(options?: OpenInEditorOptions): void;
-
 interface ComponentHighLighterOptions {
     bounds: ComponentBoundingRect;
     name?: string;
@@ -503,146 +980,10 @@ declare function cancelInspectComponentHighLighter(): void;
 declare function inspectComponentHighLighter(): Promise<string>;
 declare function scrollToComponent(options: ScrollToComponentOptions): void;
 
-declare enum DevToolsEvents {
-    DEVTOOLS_STATE_UPDATED = "devtools:state-updated",
-    DEVTOOLS_CONNECTED_UPDATED = "devtools:connected-updated",
-    ROUTER_INFO_UPDATED = "router-info:updated",
-    COMPONENT_STATE_INSPECT = "component-state:inspect",
-    COMPONENT_UPDATED = "component:updated",
-    TOGGLE_COMPONENT_HIGHLIGHTER = "component-highlighter:toggle",
-    GET_COMPONENT_BOUNDING_RECT = "component-bounding-rect:get",
-    SCROLL_TO_COMPONENT = "scroll-to-component",
-    GET_COMPONENT_RENDER_CODE = "component-render-code:get",
-    GET_INSPECTOR_TREE = "inspector-tree:get",
-    SEND_INSPECTOR_TREE = "inspector-tree:send",
-    GET_INSPECTOR_STATE = "inspector-state:get",
-    EDIT_INSPECTOR_STATE = "inspector-state:edit",
-    SEND_INSPECTOR_STATE = "inspector-state:send",
-    VISIT_COMPONENT_TREE = "component-tree:visit",
-    ADD_TIMELINE_EVENT = "timeline:add-event",
-    CUSTOM_TABS_UPDATED = "custom-tabs:updated",
-    CUSTOM_COMMANDS_UPDATED = "custom-commands:updated"
-}
-interface DevToolsEvent {
-    [DevToolsEvents.ADD_TIMELINE_EVENT]: (payload: TimelineEvent) => void;
-    [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void;
-    [DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER]: (payload: ComponentHighLighterOptions) => void;
-    [DevToolsEvents.SCROLL_TO_COMPONENT]: (payload: ScrollToComponentOptions) => void;
-    [DevToolsEvents.GET_COMPONENT_RENDER_CODE]: (id: string) => void;
-    [DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]: (payload: ComponentBoundingRectApiPayload) => void;
-    [DevToolsEvents.DEVTOOLS_STATE_UPDATED]: (state: DevToolsState, oldState: DevToolsState) => void;
-    [DevToolsEvents.DEVTOOLS_CONNECTED_UPDATED]: (state: DevToolsState, oldState: DevToolsState) => void;
-    [DevToolsEvents.COMPONENT_STATE_INSPECT]: (payload: {
-        componentInstance: VueAppInstance | undefined;
-        app: VueAppInstance | undefined;
-        instanceData: InspectorStateApiPayload['state'];
-    }) => void;
-    [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => Promise<void>;
-    [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: {
-        inspectorId: string;
-        data: InspectorTreeApiPayload['rootNodes'];
-    }) => void;
-    [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload, ctx: {
-        currentTab: string;
-    }) => Promise<void>;
-    [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => Promise<void>;
-    [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void;
-    [DevToolsEvents.VISIT_COMPONENT_TREE]: (payload: {
-        componentInstance: VueAppInstance | undefined;
-        app: VueAppInstance | undefined;
-        treeNode: ComponentTreeNode;
-        filter: string;
-    }) => void;
-    [DevToolsEvents.CUSTOM_TABS_UPDATED]: (payload: CustomTab[]) => void;
-    [DevToolsEvents.CUSTOM_COMMANDS_UPDATED]: (payload: CustomCommand[]) => void;
-    [DevToolsEvents.COMPONENT_UPDATED]: () => void;
-}
-type DevToolsEventParams<T extends keyof DevToolsEvent> = Parameters<DevToolsEvent[T]>;
-
-declare const on: {
-    readonly addTimelineEvent: (fn: DevToolsEvent[DevToolsEvents.ADD_TIMELINE_EVENT]) => void;
-    readonly inspectComponent: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_STATE_INSPECT]) => void;
-    readonly visitComponentTree: (fn: DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]) => void;
-    readonly setPluginSettings: () => void;
-    readonly getInspectorTree: (fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_TREE]) => void;
-    readonly getInspectorState: (fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_STATE]) => void;
-    readonly sendInspectorTree: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_TREE]) => void;
-    readonly sendInspectorState: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
-    readonly editInspectorState: (fn: DevToolsEvent[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
-    readonly editComponentState: () => void;
-    readonly componentUpdated: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_UPDATED]) => void;
-    readonly routerInfoUpdated: (fn: DevToolsEvent[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
-    readonly getComponentBoundingRect: (fn: DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
-    readonly customTabsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
-    readonly customCommandsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]) => void;
-    readonly devtoolsStateUpdated: (fn: DevToolsEvent[DevToolsEvents.DEVTOOLS_STATE_UPDATED]) => void;
-};
-
-declare function remove(): void;
-
-declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
-
-declare class DevToolsPluginApi {
-    on: typeof on;
-    clear: typeof remove;
-    constructor();
-    addTimelineLayer(payload: TimelineLayerItem): void;
-    addTimelineEvent(...params: DevToolsEventParams<DevToolsEvents.ADD_TIMELINE_EVENT>): void;
-    addInspector(payload: InspectorApiPayload): void;
-    getInspectorNodeActions(inspectorId: string): {
-        icon: string;
-        tooltip: string;
-    }[];
-    callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string): void;
-    getInspectorActions(inspectorId: string): {
-        icon: string;
-        tooltip: string;
-    }[];
-    callInspectorAction(inspectorId: string, actionIndex: number, nodeId: string): void;
-    highlightElement(instance: VueAppInstance): void;
-    unhighlightElement(): void;
-    getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<ComponentTreeNode[]>;
-    getInspectorState(payload?: {
-        inspectorId?: string;
-        nodeId?: string;
-    }): any;
-    editInspectorState(payload: InspectorStateEditorPayload): Promise<void>;
-    sendInspectorTree(inspectorId: string): Promise<void>;
-    sendInspectorState(inspectorId: string): Promise<void>;
-    getComponentInstances(app: VueAppInstance): Promise<VueAppInstance[]>;
-    visitComponentTree(...params: DevToolsEventParams<DevToolsEvents.VISIT_COMPONENT_TREE>): void;
-    notifyComponentUpdate(): void;
-    now(): number;
-    toggleComponentInspector(...params: DevToolsEventParams<DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER>): void;
-    inspectComponentInspector(): Promise<string>;
-    cancelInspectComponentInspector(): void;
-    scrollToComponent(...params: DevToolsEventParams<DevToolsEvents.SCROLL_TO_COMPONENT>): void;
-    getComponentRenderCode(id: string): any;
-    getComponentBoundingRect(...params: DevToolsEventParams<DevToolsEvents.GET_COMPONENT_BOUNDING_RECT>): string;
-    toggleApp(id: string): Promise<void>;
-    addCustomTab(tab: CustomTab): void;
-    addCustomCommand(action: CustomCommand): void;
-    removeCustomCommand(actionId: CustomCommand['id']): void;
-    openInEditor(payload: OpenInEditorOptions): void;
-    getVueInspector(): Promise<ComponentInspector>;
-}
-
-declare const hook: VueHooks;
-
-declare const devtoolsState: DevToolsState;
-
-declare const devtoolsContext: DevToolsContext;
-
-declare function setDevToolsEnv(env: Partial<DevToolsEnv>): void;
-
-declare function initDevTools(): void;
-declare function onDevToolsConnected(fn: () => void): Promise<void>;
-declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
-
-declare function toggleHighPerfMode(state?: boolean): void;
-
 declare function getInspectorStateValueType(value: any, raw?: boolean): string;
-declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
+declare function formatInspectorStateValue(value: any, quotes?: boolean, options?: {
+    customClass?: Partial<Record<'string', string>>;
+}): any;
 declare function getRaw(value: InspectorState['value']): {
     value: object | string | number | boolean | null;
     inherit: {} | {
@@ -663,20 +1004,40 @@ declare const NAN = "__vue_devtool_nan__";
 
 declare function isPlainObject(obj: unknown): boolean;
 
-interface DevToolsType {
-    state: typeof devtoolsState;
-    context: typeof devtoolsContext;
-    hook: typeof hook;
-    init: typeof initDevTools;
-    get api(): typeof devtoolsContext.api;
-}
-
 declare const devtools: {
-    state: DevToolsState;
-    context: DevToolsContext;
     hook: VueHooks;
-    init: typeof initDevTools;
-    readonly api: DevToolsPluginApi;
+    init: () => void;
+    readonly ctx: DevtoolsContext;
+    readonly api: {
+        getInspectorTree(payload: Pick<{
+            app: any;
+            inspectorId: string;
+            filter: string;
+            rootNodes: CustomInspectorNode[];
+        }, "inspectorId" | "filter">): Promise<never[]>;
+        getInspectorState(payload: Pick<{
+            app: any;
+            inspectorId: string;
+            nodeId: string;
+            state: CustomInspectorState;
+        }, "inspectorId" | "nodeId">): Promise<CustomInspectorState>;
+        editInspectorState(payload: {
+            app: any;
+            inspectorId: string;
+            nodeId: string;
+            path: string[];
+            type: string;
+            state: EditStatePayload;
+            set: (object: any, path?: string | string[] | undefined, value?: any, cb?: ((object: any, field: string, value: any) => void) | undefined) => void;
+        }): void;
+        inspectComponentInspector(): Promise<string>;
+        cancelInspectComponentInspector(): void;
+        getComponentRenderCode(id: string): any;
+        scrollToComponent(id: string): void;
+        openInEditor: typeof openInEditor;
+        getVueInspector: typeof getComponentInspector;
+        toggleApp(id: string): void;
+    };
 };
 
-export { type AddInspectorApiPayload, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentHighLighterOptions, type ComponentInspector, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, type DevToolsContext, type DevToolsEnv, type DevToolsEvent$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type DevToolsType, INFINITY, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, cancelInspectComponentHighLighter, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setOpenInEditorBaseUrl, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateInspector };
+export { type AddInspectorApiPayload, type App, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentBounds, type ComponentHighLighterOptions, type ComponentInspector, type ComponentInstance, type ComponentState, type ComponentTreeNode, type CreateRpcClientOptions, type CreateRpcServerOptions, type CustomCommand, type CustomCommandAction, type CustomInspectorNode, type CustomInspectorOptions, type CustomInspectorState, type CustomTab, type DevToolsApiType, type DevToolsAppRecords, DevToolsContextHookKeys, type DevToolsContextHookPayloads, type DevToolsContextHooks, type DevToolsEvent, type DevToolsHook, DevToolsHooks, DevToolsMessagingHookKeys, type DevToolsMessagingHookPayloads, type DevToolsMessagingHooks, type DevToolsPlugin, type DevToolsState, DevToolsV6PluginAPIHookKeys, type DevToolsV6PluginAPIHookPayloads, type DevToolsV6PluginAPIHooks, type DevtoolsContext, type EditStatePayload, INFINITY, type InspectedComponentData, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PluginDescriptor, type PluginSetupFunction, type Presets, type PropPath, ROUTER_INFO_KEY, ROUTER_KEY, type RouterInfo, type ScreenshotData, type ScreenshotOverlayEvent, type ScreenshotOverlayRenderContext, type ScreenshotOverlayRenderResult, type ScrollToComponentOptions, type StateBase, type TimelineEvent, type TimelineEventOptions, type TimelineLayerOptions, UNDEFINED, type VueAppInstance, type VueHooks, activeAppRecord, addCustomCommand, addCustomTab, addDevToolsAppRecord, addDevToolsPluginToBuffer, addInspector, callConnectedUpdatedHook, callDevToolsPluginSetupFn, callInspectorUpdatedHook, callStateUpdatedHook, cancelInspectComponentHighLighter, createComponentsDevToolsPlugin, createDevToolsApi, createDevToolsCtxHooks, createRpcClient, createRpcProxy, createRpcServer, type customTypeEnums, devtools, devtoolsAppRecords, devtoolsContext, devtoolsInspector, devtoolsPluginBuffer, devtoolsRouter, devtoolsRouterInfo, devtoolsState, formatInspectorStateValue, getActiveInspectors, getComponentInspector, getDevToolsEnv, getExtensionClientContext, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getInspectorStateValueType, getRaw, getRpcClient, getRpcServer, getViteRpcClient, getViteRpcServer, highlight, initDevTools, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, registerDevToolsPlugin, removeCustomCommand, removeDevToolsAppRecord, resetDevToolsState, scrollToComponent, setActiveAppRecord, setActiveAppRecordId, setDevToolsEnv, setElectronClientContext, setElectronProxyContext, setElectronServerContext, setExtensionClientContext, setIframeServerContext, setOpenInEditorBaseUrl, setRpcServerToGlobal, setViteClientContext, setViteRpcClientToGlobal, setViteRpcServerToGlobal, setViteServerContext, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleClientConnected, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateDevToolsState };