@lytjs/devtools 4.0.5 → 4.2.0

package/dist/types/perf-panel.d.ts

@@ -0,0 +1,231 @@
+/**
+ * Lyt.js DevTools 性能面板
+ *
+ * 增强版性能面板，集成 PerformanceCollector 和 ComponentProfiler，
+ * 提供实时 FPS、组件渲染排名、更新频率、代理对象计数等监控能力。
+ *
+ * 纯原生零依赖实现。
+ */
+import { PerformanceCollector, type PerformanceReport } from './perf-collector';
+import { ComponentProfiler, type ProfileResult } from './component-profiler';
+/** 性能条目（保持向后兼容） */
+export interface PerfEntry {
+    /** 组件名称 */
+    name: string;
+    /** 渲染次数 */
+    renders: number;
+    /** 总耗时 (ms) */
+    totalTime: number;
+    /** 平均耗时 (ms) */
+    avgTime: number;
+    /** 最大耗时 (ms) */
+    maxTime: number;
+    /** 最近一次耗时 (ms) */
+    lastTime: number;
+}
+/** 增强面板配置 */
+export interface EnhancedPerfPanelConfig {
+    /** 是否自动开始 FPS 监控 */
+    autoStartFPS?: boolean;
+    /** FPS 更新间隔 (ms) */
+    fpsUpdateInterval?: number;
+}
+/**
+ * 增强版性能面板
+ *
+ * 在原有 PerfPanel 基础上，集成 PerformanceCollector 和 ComponentProfiler，
+ * 提供更全面的性能监控能力。
+ */
+export declare class PerfPanel {
+    private container;
+    private entries;
+    /** 性能指标收集器 */
+    private collector;
+    /** 组件分析器 */
+    private profiler;
+    /** 是否正在录制 */
+    private isRecording;
+    /** FPS 更新定时器 */
+    private fpsUpdateTimer;
+    /** FPS 更新间隔 */
+    private fpsUpdateInterval;
+    /** 配置 */
+    private config;
+    constructor(container: HTMLElement, config?: EnhancedPerfPanelConfig);
+    /**
+     * 记录一次组件渲染
+     *
+     * @param componentName - 组件名称
+     * @param duration - 渲染耗时（毫秒）
+     */
+    recordRender(componentName: string, duration: number): void;
+    /**
+     * 获取所有性能统计（按总耗时降序排列）
+     *
+     * @returns 排序后的性能条目数组
+     */
+    getStats(): PerfEntry[];
+    /**
+     * 获取指定组件的性能数据
+     *
+     * @param componentName - 组件名称
+     * @returns 性能条目，如果不存在则返回 null
+     */
+    getEntry(componentName: string): PerfEntry | null;
+    /**
+     * 获取总渲染次数
+     *
+     * @returns 所有组件的总渲染次数
+     */
+    getTotalRenders(): number;
+    /**
+     * 获取总耗时
+     *
+     * @returns 所有组件的总耗时（毫秒）
+     */
+    getTotalTime(): number;
+    /**
+     * 清除所有性能数据
+     */
+    clear(): void;
+    /**
+     * 获取当前 FPS
+     *
+     * @returns 当前 FPS 值
+     */
+    getCurrentFPS(): number;
+    /**
+     * 开始 FPS 监控
+     */
+    startFPSMonitor(): void;
+    /**
+     * 停止 FPS 监控
+     */
+    stopFPSMonitor(): void;
+    /**
+     * 是否正在监控 FPS
+     */
+    isFPSMonitoring(): boolean;
+    /**
+     * 获取组件渲染时间排名（最慢优先）
+     *
+     * @returns 排序后的渲染统计数组
+     */
+    getRenderRankings(): {
+        componentName: string;
+        renderCount: number;
+        avgRenderTime: number;
+        maxRenderTime: number;
+        totalRenderTime: number;
+    }[];
+    /**
+     * 获取组件更新频率统计
+     *
+     * @returns 更新频率统计数组
+     */
+    getUpdateFrequencyStats(): {
+        componentName: string;
+        avgFrequency: number;
+    }[];
+    /**
+     * 记录代理对象计数
+     *
+     * @param proxyCount - 代理对象数量
+     * @param reactiveCount - 响应式状态对象数量
+     */
+    recordProxyCount(proxyCount: number, reactiveCount: number): void;
+    /**
+     * 获取当前代理对象计数
+     *
+     * @returns 代理对象数量
+     */
+    getProxyCount(): number;
+    /**
+     * 开始录制
+     */
+    startRecording(): void;
+    /**
+     * 停止录制
+     */
+    stopRecording(): void;
+    /**
+     * 是否正在录制
+     */
+    isRecordingActive(): boolean;
+    /**
+     * 导出收集的数据为 JSON 字符串
+     *
+     * @returns JSON 字符串
+     */
+    exportJSON(): string;
+    /**
+     * 获取性能报告
+     *
+     * @returns 性能报告
+     */
+    getReport(): PerformanceReport;
+    /**
+     * 开始分析指定组件
+     *
+     * @param componentName - 组件名称
+     * @returns 是否成功开始
+     */
+    startProfile(componentName: string): boolean;
+    /**
+     * 停止分析指定组件
+     *
+     * @param componentName - 组件名称
+     * @returns 分析结果
+     */
+    stopProfile(componentName: string): ProfileResult | null;
+    /**
+     * 获取组件分析快照
+     *
+     * @param componentName - 组件名称
+     * @returns 分析快照
+     */
+    getProfileSnapshot(componentName: string): ProfileResult | null;
+    /**
+     * 获取慢渲染列表
+     *
+     * @returns 慢渲染的 PerfEntry 数组
+     */
+    getSlowRenders(): PerfEntry[];
+    /**
+     * 获取性能收集器实例
+     */
+    getCollector(): PerformanceCollector;
+    /**
+     * 获取组件分析器实例
+     */
+    getProfiler(): ComponentProfiler;
+    /**
+     * 渲染增强版性能面板 UI
+     */
+    private render;
+    /**
+     * 创建统计卡片
+     */
+    private createStatCard;
+    /**
+     * 获取录制按钮样式
+     */
+    private getRecordButtonStyle;
+    /**
+     * 根据耗时返回颜色样式
+     */
+    private getPerfColor;
+    /**
+     * 启动 FPS 更新循环
+     */
+    private startFPSUpdateLoop;
+    /**
+     * 停止 FPS 更新循环
+     */
+    private stopFPSUpdateLoop;
+    /**
+     * 销毁面板，清理 DOM 和资源
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=perf-panel.d.ts.map

package/dist/types/perf-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf-panel.d.ts","sourceRoot":"","sources":["../../src/perf-panel.ts"],"names":[],"mappings":"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"}

package/dist/types/render-tracker.d.ts

@@ -0,0 +1,147 @@
+/**
+ * Lyt.js DevTools - 组件渲染追踪器
+ *
+ * 追踪组件渲染耗时，提供慢渲染检测、渲染统计和渲染时间线。
+ * 使用环形缓冲区限制内存占用。
+ *
+ * 纯原生零依赖实现。
+ */
+/** 渲染记录 */
+export interface RenderRecord {
+    /** 组件名称 */
+    componentName: string;
+    /** 渲染耗时 (ms) */
+    duration: number;
+    /** 渲染时间戳 */
+    timestamp: number;
+    /** 记录序号 */
+    index: number;
+}
+/** 慢渲染条目 */
+export interface SlowRenderEntry {
+    /** 组件名称 */
+    componentName: string;
+    /** 渲染耗时 (ms) */
+    duration: number;
+    /** 渲染时间戳 */
+    timestamp: number;
+    /** 超出阈值的量 (ms) */
+    overThreshold: number;
+}
+/** 渲染统计（按组件分组） */
+export interface RenderComponentStats {
+    /** 组件名称 */
+    componentName: string;
+    /** 渲染次数 */
+    renderCount: number;
+    /** 平均渲染耗时 (ms) */
+    avgDuration: number;
+    /** 最大渲染耗时 (ms) */
+    maxDuration: number;
+    /** 最小渲染耗时 (ms) */
+    minDuration: number;
+    /** 总渲染耗时 (ms) */
+    totalDuration: number;
+    /** 慢渲染次数 */
+    slowCount: number;
+}
+/** 整体渲染统计 */
+export interface RenderStats {
+    /** 总渲染次数 */
+    totalRenders: number;
+    /** 总渲染耗时 (ms) */
+    totalDuration: number;
+    /** 平均渲染耗时 (ms) */
+    avgDuration: number;
+    /** 最大渲染耗时 (ms) */
+    maxDuration: number;
+    /** 最小渲染耗时 (ms) */
+    minDuration: number;
+    /** 慢渲染次数 */
+    slowRenderCount: number;
+    /** 慢渲染占比 (0-1) */
+    slowRenderRatio: number;
+    /** 按组件分组的统计 */
+    byComponent: RenderComponentStats[];
+}
+/** 渲染时间线条目 */
+export interface RenderTimelineEntry {
+    /** 组件名称 */
+    componentName: string;
+    /** 渲染耗时 (ms) */
+    duration: number;
+    /** 渲染时间戳 */
+    timestamp: number;
+    /** 是否为慢渲染 */
+    isSlow: boolean;
+    /** 与前一次渲染的间隔 (ms)，第一条为 -1 */
+    gap: number;
+}
+/** 渲染追踪器配置 */
+export interface RenderTrackerConfig {
+    /** 环形缓冲区容量，默认 200 */
+    bufferSize?: number;
+    /** 慢渲染阈值 (ms)，默认 16 */
+    slowThreshold?: number;
+}
+/**
+ * 组件渲染追踪器
+ *
+ * 追踪组件渲染耗时，提供慢渲染检测、渲染统计和渲染时间线。
+ */
+export declare class RenderTracker {
+    /** 渲染记录缓冲区 */
+    private records;
+    /** 记录计数器（单调递增） */
+    private counter;
+    /** 配置 */
+    private readonly config;
+    constructor(config?: RenderTrackerConfig);
+    /**
+     * 记录一次渲染
+     *
+     * @param componentName - 组件名称
+     * @param duration - 渲染耗时 (ms)
+     */
+    trackRender(componentName: string, duration: number): void;
+    /**
+     * 获取慢渲染组件列表
+     *
+     * @param threshold - 慢渲染阈值 (ms)，默认使用配置值
+     * @returns 慢渲染条目数组，按耗时降序排列
+     */
+    getSlowRenderers(threshold?: number): SlowRenderEntry[];
+    /**
+     * 获取渲染统计
+     *
+     * @returns 渲染统计信息
+     */
+    getRenderStats(): RenderStats;
+    /**
+     * 获取渲染时间线
+     *
+     * @returns 渲染时间线条目数组
+     */
+    getRenderTimeline(): RenderTimelineEntry[];
+    /**
+     * 获取所有渲染记录
+     *
+     * @returns 渲染记录数组
+     */
+    getRecords(): RenderRecord[];
+    /**
+     * 获取记录数量
+     *
+     * @returns 记录数量
+     */
+    getRecordCount(): number;
+    /**
+     * 清除所有记录
+     */
+    clear(): void;
+    /**
+     * 销毁追踪器
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=render-tracker.d.ts.map

package/dist/types/render-tracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-tracker.d.ts","sourceRoot":"","sources":["../../src/render-tracker.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,WAAW;AACX,MAAM,WAAW,YAAY;IAC3B,WAAW;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,YAAY;AACZ,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,kBAAkB;AAClB,MAAM,WAAW,oBAAoB;IACnC,WAAW;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY;IACZ,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,aAAa;AACb,MAAM,WAAW,WAAW;IAC1B,YAAY;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY;IACZ,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe;IACf,WAAW,EAAE,oBAAoB,EAAE,CAAC;CACrC;AAED,cAAc;AACd,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,cAAc;AACd,MAAM,WAAW,mBAAmB;IAClC,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuED;;;;GAIG;AACH,qBAAa,aAAa;IACxB,cAAc;IACd,OAAO,CAAC,OAAO,CAA2B;IAC1C,kBAAkB;IAClB,OAAO,CAAC,OAAO,CAAa;IAC5B,SAAS;IACT,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgC;gBAE3C,MAAM,CAAC,EAAE,mBAAmB;IAYxC;;;;;OAKG;IACH,WAAW,CAAC,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAS1D;;;;;OAKG;IACH,gBAAgB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,eAAe,EAAE;IAevD;;;;OAIG;IACH,cAAc,IAAI,WAAW;IAkF7B;;;;OAIG;IACH,iBAAiB,IAAI,mBAAmB,EAAE;IAiB1C;;;;OAIG;IACH,UAAU,IAAI,YAAY,EAAE;IAI5B;;;;OAIG;IACH,cAAc,IAAI,MAAM;IAIxB;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}

package/dist/types/route-panel.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Lyt.js DevTools 路由面板
+ * 显示当前路由信息和导航历史
+ */
+/** 路由历史记录条目 */
+export interface RouteHistoryEntry {
+    /** 路由路径 */
+    path: string;
+    /** 路由参数 */
+    params?: Record<string, string>;
+    /** 查询参数 */
+    query?: Record<string, string>;
+    /** 导航时间戳 */
+    timestamp: number;
+}
+/** 路由面板配置 */
+export interface RoutePanelConfig {
+    /** 最大历史记录条数 */
+    maxHistory?: number;
+}
+/**
+ * 路由面板
+ *
+ * 显示当前路由信息和导航历史列表，
+ * 帮助开发者调试路由相关的问题。
+ */
+export declare class RoutePanel {
+    private container;
+    private history;
+    private maxHistory;
+    private currentPath;
+    private currentParams;
+    private currentQuery;
+    constructor(container: HTMLElement, config?: RoutePanelConfig);
+    /**
+     * 更新当前路由信息
+     *
+     * @param path - 路由路径
+     * @param params - 路由参数
+     * @param query - 查询参数
+     */
+    updateRoute(path: string, params?: Record<string, string>, query?: Record<string, string>): void;
+    /**
+     * 获取路由历史记录
+     *
+     * @returns 历史记录数组（最新在前）
+     */
+    getHistory(): RouteHistoryEntry[];
+    /**
+     * 获取当前路由路径
+     *
+     * @returns 当前路径
+     */
+    getCurrentPath(): string;
+    /**
+     * 清除历史记录
+     */
+    clearHistory(): void;
+    /**
+     * 渲染路由面板 UI
+     */
+    private render;
+    /**
+     * 销毁面板，清理 DOM
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=route-panel.d.ts.map

package/dist/types/route-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-panel.d.ts","sourceRoot":"","sources":["../../src/route-panel.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAe;AACf,MAAM,WAAW,iBAAiB;IAChC,WAAW;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW;IACX,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,YAAY;IACZ,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,aAAa;AACb,MAAM,WAAW,gBAAgB;IAC/B,eAAe;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;GAKG;AACH,qBAAa,UAAU;IACrB,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,YAAY,CAA6B;gBAErC,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,gBAAgB;IAM7D;;;;;;OAMG;IACH,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAsBhG;;;;OAIG;IACH,UAAU,IAAI,iBAAiB,EAAE;IAIjC;;;;OAIG;IACH,cAAc,IAAI,MAAM;IAIxB;;OAEG;IACH,YAAY,IAAI,IAAI;IAKpB;;OAEG;IACH,OAAO,CAAC,MAAM;IA4Gd;;OAEG;IACH,OAAO,IAAI,IAAI;CAIhB"}

package/dist/types/router-panel-enhanced.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Lyt.js DevTools — 路由面板（增强版）
+ *
+ * 独立的路由检查器，展示当前路由信息、导航历史和路由匹配信息。
+ * 支持历史记录查看、详情展示等功能。
+ *
+ * 纯原生零依赖实现。
+ */
+/** 路由位置信息 */
+export interface RouteLocation {
+    /** 路由路径 */
+    path: string;
+    /** 路由参数 */
+    params?: Record<string, string>;
+    /** 查询参数 */
+    query?: Record<string, string>;
+    /** 哈希 */
+    hash?: string;
+    /** 路由名称 */
+    name?: string;
+    /** 是否完全匹配 */
+    matched?: boolean;
+}
+/** 路由导航记录 */
+export interface RouteNavigation {
+    /** 导航序号 */
+    index: number;
+    /** 目标路由 */
+    to: RouteLocation;
+    /** 来源路由 */
+    from: RouteLocation;
+    /** 导航时间戳 */
+    timestamp: number;
+    /** 导航类型 */
+    type: 'push' | 'replace' | 'pop';
+}
+/** 路由面板配置 */
+export interface RouterPanelConfig {
+    /** 最大历史记录条数，默认 50 */
+    maxHistory?: number;
+    /** 面板标题，默认 "路由面板" */
+    title?: string;
+}
+/**
+ * 路由面板
+ *
+ * 展示当前路由信息、导航历史和路由匹配信息。
+ */
+export declare class RouterPanel {
+    /** 当前路由 */
+    private currentRoute;
+    /** 导航历史 */
+    private history;
+    /** 最大历史记录条数 */
+    private maxHistory;
+    /** 面板标题 */
+    private title;
+    /** 导航计数器 */
+    private navCounter;
+    /** DOM 根元素 */
+    private element;
+    /** 选中的历史条目索引 */
+    private selectedHistoryIndex;
+    constructor(config?: RouterPanelConfig);
+    /**
+     * 路由变化回调
+     *
+     * @param to - 目标路由
+     * @param from - 来源路由
+     * @param type - 导航类型
+     */
+    onRouteChange(to: RouteLocation, from: RouteLocation, type?: 'push' | 'replace' | 'pop'): void;
+    /**
+     * 获取当前路由
+     *
+     * @returns 当前路由信息，如果没有则为 null
+     */
+    getCurrentRoute(): RouteLocation | null;
+    /**
+     * 获取导航历史
+     *
+     * @returns 导航历史数组
+     */
+    getHistory(): RouteNavigation[];
+    /**
+     * 清除导航历史
+     */
+    clearHistory(): void;
+    /**
+     * 获取历史记录条数
+     */
+    getHistoryCount(): number;
+    /**
+     * 获取最大历史记录条数
+     */
+    getMaxHistory(): number;
+    /**
+     * 选中某条历史记录
+     *
+     * @param index - 历史记录在 getHistory() 返回数组中的索引
+     */
+    selectHistoryEntry(index: number): void;
+    /**
+     * 获取选中的历史记录
+     */
+    getSelectedHistoryEntry(): RouteNavigation | null;
+    /**
+     * 渲染面板 DOM 元素
+     *
+     * @returns 面板 DOM 元素
+     */
+    render(): HTMLElement;
+    /**
+     * 销毁面板
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=router-panel-enhanced.d.ts.map

package/dist/types/router-panel-enhanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router-panel-enhanced.d.ts","sourceRoot":"","sources":["../../src/router-panel-enhanced.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,aAAa;AACb,MAAM,WAAW,aAAa;IAC5B,WAAW;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW;IACX,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,aAAa;AACb,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW;IACX,EAAE,EAAE,aAAa,CAAC;IAClB,WAAW;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,YAAY;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW;IACX,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC;CAClC;AAED,aAAa;AACb,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;GAIG;AACH,qBAAa,WAAW;IACtB,WAAW;IACX,OAAO,CAAC,YAAY,CAA8B;IAClD,WAAW;IACX,OAAO,CAAC,OAAO,CAAyB;IACxC,eAAe;IACf,OAAO,CAAC,UAAU,CAAS;IAC3B,WAAW;IACX,OAAO,CAAC,KAAK,CAAS;IACtB,YAAY;IACZ,OAAO,CAAC,UAAU,CAAa;IAC/B,cAAc;IACd,OAAO,CAAC,OAAO,CAA4B;IAC3C,gBAAgB;IAChB,OAAO,CAAC,oBAAoB,CAAc;gBAE9B,MAAM,CAAC,EAAE,iBAAiB;IAStC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI;IAoB9F;;;;OAIG;IACH,eAAe,IAAI,aAAa,GAAG,IAAI;IAIvC;;;;OAIG;IACH,UAAU,IAAI,eAAe,EAAE;IAQ/B;;OAEG;IACH,YAAY,IAAI,IAAI;IAMpB;;OAEG;IACH,eAAe,IAAI,MAAM;IAIzB;;OAEG;IACH,aAAa,IAAI,MAAM;IAIvB;;;;OAIG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMvC;;OAEG;IACH,uBAAuB,IAAI,eAAe,GAAG,IAAI;IAgBjD;;;;OAIG;IACH,MAAM,IAAI,WAAW;IA8JrB;;OAEG;IACH,OAAO,IAAI,IAAI;CAQhB"}

package/dist/types/state-inspector.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Lyt.js DevTools — 状态检查器
+ *
+ * 显示和编辑当前选中组件的完整状态，包括 props、state、computed。
+ * 支持嵌套对象展开/折叠、实时更新高亮、双击编辑和变化历史记录。
+ *
+ * 核心功能：
+ * - StateInspector 类
+ * - 显示当前选中组件的完整状态（props/state/computed）
+ * - 状态值可展开/折叠（支持嵌套对象）
+ * - 状态变化实时更新（高亮变化的属性）
+ * - 手动编辑状态值（双击编辑）
+ * - 状态变化历史记录
+ *
+ * 纯原生零依赖实现。
+ */
+import type { DevToolsPanel } from './panel';
+/**
+ * 状态检查器
+ *
+ * 负责显示和编辑组件的 props、state、computed 状态。
+ */
+export declare class StateInspector {
+    /** 面板引用 */
+    private panel;
+    /** 当前内容容器 */
+    private container;
+    /** 展开的路径集合 */
+    private expandedPaths;
+    /** 最近变化的属性路径（用于高亮） */
+    private changedPaths;
+    /** 高亮清除定时器 */
+    private highlightTimer;
+    /** 当前显示历史记录模式 */
+    private showHistory;
+    /** 更新定时器 */
+    private updateTimer;
+    constructor(panel: DevToolsPanel);
+    /**
+     * 渲染状态检查器到指定容器
+     */
+    render(container: HTMLElement): void;
+    /**
+     * 渲染状态内容
+     */
+    private renderState;
+    /**
+     * 渲染状态分类区块
+     */
+    private renderCategory;
+    /**
+     * 渲染单个属性
+     */
+    private renderProperty;
+    /**
+     * 开始编辑状态值
+     */
+    private startEdit;
+    /**
+     * 渲染状态变化历史
+     */
+    private renderHistory;
+    /**
+     * 全局更新事件处理
+     */
+    private onUpdate;
+    /**
+     * 标记属性变化（用于高亮）
+     */
+    markChanged(path: string): void;
+    /**
+     * 强制刷新
+     */
+    refresh(): void;
+    /**
+     * 销毁检查器
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=state-inspector.d.ts.map

package/dist/types/state-inspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-inspector.d.ts","sourceRoot":"","sources":["../../src/state-inspector.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAWH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA8F7C;;;;GAIG;AACH,qBAAa,cAAc;IACzB,WAAW;IACX,OAAO,CAAC,KAAK,CAAgB;IAC7B,aAAa;IACb,OAAO,CAAC,SAAS,CAA4B;IAC7C,cAAc;IACd,OAAO,CAAC,aAAa,CAAoC;IACzD,sBAAsB;IACtB,OAAO,CAAC,YAAY,CAA6B;IACjD,cAAc;IACd,OAAO,CAAC,cAAc,CAA8C;IACpE,iBAAiB;IACjB,OAAO,CAAC,WAAW,CAAkB;IACrC,YAAY;IACZ,OAAO,CAAC,WAAW,CAA8C;gBAErD,KAAK,EAAE,aAAa;IAahC;;OAEG;IACH,MAAM,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;IAKpC;;OAEG;IACH,OAAO,CAAC,WAAW;IA0EnB;;OAEG;IACH,OAAO,CAAC,cAAc;IAkEtB;;OAEG;IACH,OAAO,CAAC,cAAc;IA0JtB;;OAEG;IACH,OAAO,CAAC,SAAS;IA+FjB;;OAEG;IACH,OAAO,CAAC,aAAa;IA0DrB;;OAEG;IACH,OAAO,CAAC,QAAQ,CAOd;IAEF;;OAEG;IACH,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAa/B;;OAEG;IACH,OAAO,IAAI,IAAI;IAQf;;OAEG;IACH,OAAO,IAAI,IAAI;CAchB"}