@dimina-kit/inspect 0.4.0-dev.20260716163758 → 0.4.0-dev.20260717120050

package/README.md

@@ -44,13 +44,19 @@ wire-compatible.
     their source contracts: seed on the (enabled && active) rising edge, live
     updates via the push subscription, visibility gating, plus the
     panel-specific parts — hover inspection (WXML), write forwarding
-    (Storage), bridge-tab auto-follow of the active page (AppData), FIFO caps
+    (Storage), Pages-sidebar auto-follow of the active page plus `setData`
+    edit write-back when the source provides `setData` (AppData), FIFO caps
     and arrival-order `seq` stamping (编译). Hosts render them with their
     source implementation and never duplicate the wiring.
   - Styling uses Tailwind utility classes over CSS variables
     (`--color-code-blue`, `--color-surface-2`, …); the consuming app provides
     the Tailwind theme mapping and variable values, and must include this
     package's sources in its Tailwind content scan.
+  - The panels fill their host: their roots use `flex-1` / `h-full`, and
+    AppData's kept-alive per-page trees are `absolute inset-0`. The host must
+    mount them inside a sized flex container (`height: 100%; display: flex;
+    flex-direction: column`) — in a plain unsized block the AppData content
+    collapses to zero height and the panel reads as blank.
 - `WxmlPanelSource` (main entry, type-only) — the five-operation transport
   contract behind the WXML panel: `getSnapshot` / `subscribe` / `setActive` /
   `inspect` / `clearInspection`. Each host implements only how these travel

package/dist/appdata-panel-view.js

@@ -1,64 +1,161 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as jsonViewModule from '@uiw/react-json-view';
-const moduleDefault = jsonViewModule.default;
-// A type predicate (not a bare `in` check): plain `in` narrowing intersects
-// `Record<'default', unknown>` onto the component branch, degrading the
-// conditional's type to unknown.
-function isInteropNamespace(m) {
-    return 'default' in m;
-}
-const JsonView = isInteropNamespace(moduleDefault) ? moduleDefault.default : moduleDefault;
+// The pure AppData panel view, WeChat DevTools AppData layout: a Pages
+// sidebar over one merged, collapsible (and optionally editable) data tree
+// per page bridge, plus an expand/collapse/undo/redo toolbar. Pure
+// presentation — bridge selection and data feeds live in the connected
+// container (or the host, when it renders this view directly).
+import { useRef, useState } from 'react';
+import { AppDataTree } from './appdata-tree.js';
 function bridgeLabel(bridge) {
     return bridge.pagePath ?? bridge.id;
 }
-// Map the json-view CSS vars onto the panel's existing design tokens so the
-// component blends with both dark and light themes. CSS variables defined
-// here cascade to the json-view's internal vars (--w-rjv-*) via inline style.
-const JSON_VIEW_STYLE = {
-    '--w-rjv-font-family': 'var(--font-family-mono)',
-    '--w-rjv-background-color': 'transparent',
-    '--w-rjv-color': 'var(--color-code-blue)',
-    '--w-rjv-key-string': 'var(--color-code-blue)',
-    '--w-rjv-line-color': 'var(--color-border-subtle)',
-    '--w-rjv-arrow-color': 'var(--color-text-secondary)',
-    '--w-rjv-info-color': 'var(--color-code-label)',
-    '--w-rjv-curlybraces-color': 'var(--color-text-secondary)',
-    '--w-rjv-brackets-color': 'var(--color-text-secondary)',
-    '--w-rjv-quotes-color': 'var(--color-code-orange)',
-    '--w-rjv-quotes-string-color': 'var(--color-code-orange)',
-    '--w-rjv-type-string-color': 'var(--color-code-orange)',
-    '--w-rjv-type-int-color': 'var(--color-code-number)',
-    '--w-rjv-type-float-color': 'var(--color-code-number)',
-    '--w-rjv-type-bigint-color': 'var(--color-code-number)',
-    '--w-rjv-type-boolean-color': 'var(--color-code-keyword)',
-    '--w-rjv-type-null-color': 'var(--color-code-keyword)',
-    '--w-rjv-type-nan-color': 'var(--color-code-keyword)',
-    '--w-rjv-type-undefined-color': 'var(--color-code-keyword)',
-    '--w-rjv-type-date-color': 'var(--color-code-label)',
-    '--w-rjv-type-url-color': 'var(--color-code-blue)',
-    fontSize: 12,
-    padding: '6px 8px',
-    wordBreak: 'break-all',
-    whiteSpace: 'pre-wrap',
-};
-export function AppDataPanel({ state, onSelectBridge, isRuntimeRunning = true, }) {
+function isThenable(v) {
+    return v != null && (typeof v === 'object' || typeof v === 'function')
+        && typeof v.then === 'function';
+}
+/** One page's merged state: its component entries shallow-merged in insertion
+ * order (later entries win) — the single root object the tree renders. Copies
+ * via defineProperty, NOT Object.assign: an own enumerable `__proto__` data
+ * key (JSON.parse can produce one) would trigger the legacy setter under
+ * [[Set]], silently rebasing the merged object's prototype and dropping the
+ * key from the tree. */
+function mergeEntries(bridgeEntries) {
+    const merged = {};
+    for (const key of Object.keys(bridgeEntries)) {
+        const data = bridgeEntries[key];
+        if (!data || typeof data !== 'object')
+            continue;
+        for (const dataKey of Object.keys(data)) {
+            Object.defineProperty(merged, dataKey, {
+                value: data[dataKey],
+                enumerable: true,
+                writable: true,
+                configurable: true,
+            });
+        }
+    }
+    return merged;
+}
+function ToolbarButton({ title, disabled, onClick, children }) {
+    return (_jsx("button", { title: title, disabled: disabled, onClick: onClick, className: "px-1.5 py-0.5 text-[12px] rounded text-text-secondary hover:bg-surface-3 hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent", children: children }));
+}
+export function AppDataPanel({ state, onSelectBridge, isRuntimeRunning = true, onSetData, }) {
     const { bridges, activeBridgeId, entries } = state;
-    return (_jsxs("div", { className: "flex flex-col overflow-hidden flex-1", "data-testid": "appdata-panel", children: [bridges.length > 1 && (_jsx("div", { className: "flex gap-1 px-2 py-1 border-b border-border-subtle shrink-0 overflow-x-auto bg-bg-panel", children: bridges.map((b) => {
-                    const isActive = b.id === activeBridgeId;
-                    return (_jsx("button", { onClick: () => onSelectBridge(b.id), title: b.id, className: 'shrink-0 px-2 py-0.5 text-[11px] rounded border transition-colors '
-                            + (isActive
-                                ? 'border-accent text-accent bg-surface-3'
-                                : 'border-border-subtle text-text-dim hover:border-accent hover:text-accent'), children: bridgeLabel(b) }, b.id));
-                }) })), bridges.length === 0 ? (_jsx("div", { className: "text-[12px] text-text-dim text-center px-4 py-6", children: isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行' })) : (
-            // A bridge with zero entries still gets its keepalive container (with
-            // the per-bridge empty text) so live pushes land in a mounted tab.
-            // Keepalive: render every bridge's entries; hide non-active ones via
-            // `display: none` so the JsonView instances stay mounted and preserve
-            // their expand/collapse state across tab switches.
-            _jsx("div", { className: "flex-1 overflow-hidden relative", children: bridges.map((b) => {
-                    const isActive = b.id === activeBridgeId;
-                    const bridgeEntries = entries[b.id] ?? {};
-                    const keys = Object.keys(bridgeEntries);
-                    return (_jsx("div", { "data-bridge-id": b.id, className: "absolute inset-0 flex flex-col gap-2 p-2 overflow-y-auto", style: { display: isActive ? 'flex' : 'none' }, children: keys.length === 0 ? (_jsx("div", { className: "text-[12px] text-text-dim text-center px-4 py-6", children: isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行' })) : (keys.map((comp) => (_jsxs("div", { className: "border border-border-subtle rounded overflow-hidden shrink-0", children: [_jsx("div", { className: "bg-surface-3 px-2 py-0.5 text-[11px] text-code-label truncate", children: comp }), _jsx(JsonView, { value: (bridgeEntries[comp] ?? {}), collapsed: 1, displayDataTypes: false, displayObjectSize: false, enableClipboard: false, indentWidth: 12, style: JSON_VIEW_STYLE })] }, `${b.id}::${comp}`)))) }, b.id));
-                }) }))] }));
+    const [command, setCommand] = useState(null);
+    const [undoStack, setUndoStack] = useState([]);
+    const [redoStack, setRedoStack] = useState([]);
+    // The single write gate: at most ONE write (commit OR replay) is ever in
+    // flight. The ref blocks reentry synchronously — a concurrent replay would
+    // move the same record twice, a concurrent commit would settle out of
+    // action order (undo then reverts the wrong field) or resurrect a redo
+    // branch the commit just invalidated. The panel has no local echo, so a
+    // gated-away click is a clean no-op. The state mirror disables the
+    // undo/redo buttons while pending.
+    const writeInFlight = useRef(false);
+    const [writePending, setWritePending] = useState(false);
+    const emptyText = isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行';
+    const issueCommand = (mode) => {
+        if (!activeBridgeId)
+            return;
+        setCommand({ seq: (command?.seq ?? 0) + 1, mode, bridgeId: activeBridgeId });
+    };
+    /** Dispatch a write, then run `apply` with its acceptance: only an explicit
+     * `false` (sync or resolved) is a rejection — `void` keeps fire-and-forget
+     * hosts working. A synchronous result settles synchronously so the stacks
+     * (and their buttons) update in the same event turn as the click. A thrown
+     * error or rejected promise (IPC torn down mid-edit) settles as a rejection
+     * instead of escaping as an unhandled rejection. */
+    const dispatch = (bridgeId, patch, apply) => {
+        let result;
+        try {
+            result = onSetData?.(bridgeId, patch);
+        }
+        catch {
+            apply(false);
+            return;
+        }
+        // Duck-typed, not `instanceof Promise`: a cross-realm promise or plain
+        // thenable is still an ASYNC result — treating it as a sync truthy value
+        // would count it as an instant success and release the write gate early.
+        if (isThenable(result)) {
+            void Promise.resolve(result).then(v => v !== false, () => false).then(apply);
+            return;
+        }
+        apply(result !== false);
+    };
+    /** The only entry to `dispatch` — every write (commit and replay) passes
+     * through the gate so a second write can never start while one is pending. */
+    const performWrite = (bridgeId, patch, apply) => {
+        if (writeInFlight.current)
+            return;
+        writeInFlight.current = true;
+        setWritePending(true);
+        dispatch(bridgeId, patch, (ok) => {
+            writeInFlight.current = false;
+            setWritePending(false);
+            apply(ok);
+        });
+    };
+    const commitEdit = (bridgeId) => (path, next, prev) => {
+        performWrite(bridgeId, { [path]: next }, (ok) => {
+            if (!ok)
+                return;
+            setUndoStack(stack => [...stack, { bridgeId, path, before: prev, after: next }]);
+            setRedoStack([]);
+        });
+    };
+    const bridgeIsLive = (bridgeId) => bridges.some(b => b.id === bridgeId);
+    /** Replay one record in either direction through the shared write gate. */
+    const replay = (record, value, move) => {
+        performWrite(record.bridgeId, { [record.path]: value }, (ok) => {
+            // A rejected replay (runtime refused the write) leaves both stacks
+            // untouched so the UI state never claims an undo that didn't happen.
+            if (!ok)
+                return;
+            move(record);
+        });
+    };
+    const undo = () => {
+        const record = undoStack.at(-1);
+        if (!record)
+            return;
+        if (!bridgeIsLive(record.bridgeId)) {
+            // The page this edit targeted is gone — replaying it can only write into
+            // the void. Drop the record without dispatching.
+            setUndoStack(stack => stack.filter(r => r !== record));
+            return;
+        }
+        replay(record, record.before, (r) => {
+            setUndoStack(stack => stack.filter(item => item !== r));
+            setRedoStack(stack => [...stack, r]);
+        });
+    };
+    const redo = () => {
+        const record = redoStack.at(-1);
+        if (!record)
+            return;
+        if (!bridgeIsLive(record.bridgeId)) {
+            setRedoStack(stack => stack.filter(r => r !== record));
+            return;
+        }
+        replay(record, record.after, (r) => {
+            setRedoStack(stack => stack.filter(item => item !== r));
+            setUndoStack(stack => [...stack, r]);
+        });
+    };
+    if (bridges.length === 0) {
+        return (_jsx("div", { className: "flex flex-col overflow-hidden flex-1", "data-testid": "appdata-panel", children: _jsx("div", { className: "text-[12px] text-text-dim text-center px-4 py-6", children: emptyText }) }));
+    }
+    return (_jsxs("div", { className: "flex overflow-hidden flex-1", "data-testid": "appdata-panel", children: [_jsxs("div", { "data-testid": "appdata-pages", className: "w-40 shrink-0 border-r border-border-subtle bg-bg-panel flex flex-col overflow-hidden", children: [_jsx("div", { className: "px-2 py-1 text-[11px] text-text-secondary border-b border-border-subtle shrink-0", children: "Pages" }), _jsx("div", { className: "flex-1 overflow-y-auto", role: "listbox", children: bridges.map((b) => {
+                            const isActive = b.id === activeBridgeId;
+                            return (_jsx("button", { "data-testid": "appdata-page-item", role: "option", "aria-selected": isActive, title: b.id, onClick: () => onSelectBridge(b.id), className: 'block w-full text-left px-2 py-1 text-[11px] truncate '
+                                    + (isActive ? 'bg-accent/20 text-accent' : 'text-text-dim hover:bg-surface-3'), children: bridgeLabel(b) }, b.id));
+                        }) })] }), _jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [_jsxs("div", { "data-testid": "appdata-toolbar", className: "flex items-center gap-1 px-2 py-0.5 border-b border-border-subtle shrink-0 bg-bg-panel", children: [_jsx(ToolbarButton, { title: "\u5168\u90E8\u5C55\u5F00", onClick: () => issueCommand('expanded'), children: "\u2295" }), _jsx(ToolbarButton, { title: "\u5168\u90E8\u6536\u8D77", onClick: () => issueCommand('collapsed'), children: "\u2296" }), _jsx(ToolbarButton, { title: "\u64A4\u9500", disabled: undoStack.length === 0 || writePending, onClick: undo, children: "\u21B6" }), _jsx(ToolbarButton, { title: "\u91CD\u505A", disabled: redoStack.length === 0 || writePending, onClick: redo, children: "\u21B7" })] }), _jsx("div", { className: "flex-1 overflow-hidden relative", children: bridges.map((b) => {
+                            const isActive = b.id === activeBridgeId;
+                            const bridgeEntries = entries[b.id] ?? {};
+                            const hasData = Object.keys(bridgeEntries).length > 0;
+                            return (_jsx("div", { "data-bridge-id": b.id, className: "absolute inset-0 flex-col overflow-y-auto", style: { display: isActive ? 'flex' : 'none' }, children: hasData
+                                    ? (_jsx(AppDataTree, { root: mergeEntries(bridgeEntries), bridgeId: b.id, command: command, onCommit: onSetData ? commitEdit(b.id) : undefined }))
+                                    : (_jsx("div", { className: "text-[12px] text-text-dim text-center px-4 py-6", children: emptyText })) }, b.id));
+                        }) })] })] }));
 }

package/dist/appdata-tree.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The AppData tree: one page's merged setData state as a collapsible,
+// optionally editable tree (WeChat DevTools AppData semantics). Pure
+// presentation + local expansion/edit state; committed edits are reported
+// upward as (path, next, prev) — the panel owns the undo/redo stack and the
+// actual write-back, and the rendered VALUES always come from `root`, never
+// from a local echo of an edit.
+import { useState } from 'react';
+/** WeChat setData path syntax: dots between keys, indices in brackets. */
+function childPath(parent, key) {
+    if (typeof key === 'number')
+        return `${parent}[${key}]`;
+    return parent === '' ? key : `${parent}.${key}`;
+}
+function isContainer(v) {
+    return typeof v === 'object' && v !== null;
+}
+function sortedEntries(value) {
+    // Array.isArray narrows to any[]; the explicit unknown[] view keeps the
+    // elements typed (type-coverage counts every any-typed identifier).
+    if (Array.isArray(value))
+        return value.map((v, i) => [i, v]);
+    return Object.keys(value).sort().map((k) => [k, value[k]]);
+}
+function countLabel(value) {
+    return Array.isArray(value) ? `[${value.length}]` : `{${Object.keys(value).length}}`;
+}
+const ROOT_PATH = '';
+function isExpanded(state, path) {
+    const override = state.overrides.get(path);
+    if (override !== undefined)
+        return override;
+    if (state.baseline === 'expanded')
+        return true;
+    if (state.baseline === 'collapsed')
+        return false;
+    return path === ROOT_PATH;
+}
+function ValueCell({ path, value, editable, ctx }) {
+    if (typeof value === 'boolean') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 text-code-keyword", children: [editable && (_jsx("input", { type: "checkbox", checked: value, onChange: () => ctx.onCommit?.(path, !value, value), className: "accent-accent" })), String(value)] }));
+    }
+    if (value === null || value === undefined) {
+        return _jsx("span", { className: "text-code-keyword", children: String(value) });
+    }
+    if (ctx.state.editingPath === path) {
+        const commit = () => {
+            const prev = value;
+            if (typeof prev === 'number') {
+                const draft = ctx.state.draft.trim();
+                const next = Number(draft);
+                ctx.endEdit();
+                // Only finite numbers commit: Infinity/-Infinity (and 1e309-style
+                // overflow) are not serializable AppData values.
+                if (draft === '' || !Number.isFinite(next))
+                    return;
+                ctx.onCommit?.(path, next, prev);
+                return;
+            }
+            const next = ctx.state.draft;
+            ctx.endEdit();
+            ctx.onCommit?.(path, next, prev);
+        };
+        return (_jsx("input", { type: "text", autoFocus: true, value: ctx.state.draft, onChange: (e) => ctx.setDraft(e.target.value), onKeyDown: (e) => {
+                if (e.key === 'Enter')
+                    commit();
+                else if (e.key === 'Escape')
+                    ctx.endEdit();
+            }, onBlur: commit, className: "bg-surface-3 border border-accent rounded px-1 text-[12px] font-mono min-w-0 w-40" }));
+    }
+    const color = typeof value === 'number'
+        ? { color: 'var(--color-code-number)' }
+        : undefined;
+    return (_jsx("span", { "data-testid": "appdata-value", className: typeof value === 'string' ? 'text-code-orange' : undefined, style: color, onDoubleClick: editable ? () => ctx.beginEdit(path, String(value)) : undefined, children: String(value) }));
+}
+/** True when a key segment would be re-parsed by the runtime's lodash-style
+ * `toPath` (dots / brackets), or silently DROPPED by it (empty keys — toPath
+ * never pushes an empty segment, so `profile.` parses to just `['profile']`
+ * and a write would overwrite the parent). Array indices are numbers and
+ * always safe. */
+function segmentUnsafe(key) {
+    return typeof key === 'string' && (key === '' || /[.[\]]/.test(key));
+}
+function TreeNode({ path, label, value, depth, unsafeSegments, ctx }) {
+    const indent = { paddingLeft: depth * 14 };
+    if (isContainer(value)) {
+        const open = isExpanded(ctx.state, path);
+        return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-1 px-2 py-px cursor-pointer hover:bg-surface-3 text-[12px] font-mono", style: indent, onClick: () => ctx.toggle(path, value), children: [_jsx("span", { className: "text-text-secondary w-3 shrink-0 text-center select-none", children: open ? '▾' : '▸' }), _jsx("span", { className: "text-code-blue", children: label }), _jsx("span", { className: "text-text-secondary", children: countLabel(value) })] }), open && sortedEntries(value).map(([key, child]) => (_jsx(TreeNode, { path: childPath(path, key), label: String(key), value: child, depth: depth + 1, unsafeSegments: unsafeSegments || segmentUnsafe(key), ctx: ctx }, String(key))))] }));
+    }
+    const primitive = typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+    // A multi-segment path with an unsafe segment cannot round-trip through the
+    // runtime's string-path `set()` — the patch key would be re-split on the
+    // dots/brackets inside the key and write a DIFFERENT field. A single-segment
+    // (top-level) key is safe regardless of content: the runtime's own-key check
+    // short-circuits before path parsing. `__proto__` is unwritable at ANY
+    // depth: the runtime's isUnsafeProperty drops the write outright. Unsafe
+    // rows render read-only.
+    const pathAmbiguous = (depth > 1 && unsafeSegments) || label === '__proto__';
+    const editable = primitive && ctx.onCommit !== undefined && !pathAmbiguous;
+    return (_jsxs("div", { className: "flex items-center gap-1 px-2 py-px text-[12px] font-mono", style: indent, ...(editable ? { 'data-path': path } : {}), children: [_jsx("span", { className: "w-3 shrink-0" }), _jsx("span", { className: "text-code-blue", children: label }), _jsx("span", { className: "text-text-secondary", children: ":" }), _jsx(ValueCell, { path: path, value: value, editable: editable, ctx: ctx })] }));
+}
+export function AppDataTree({ root, bridgeId, command, onCommit }) {
+    const [baseline, setBaseline] = useState('default');
+    const [overrides, setOverrides] = useState(new Map());
+    const [appliedSeq, setAppliedSeq] = useState(0);
+    const [editingPath, setEditingPath] = useState(null);
+    const [draft, setDraft] = useState('');
+    // Applying a toolbar command during render (state-adjust-in-render, same
+    // pattern as useActiveBridgeId) keeps the frame it lands on consistent.
+    if (command && command.bridgeId === bridgeId && command.seq !== appliedSeq) {
+        setBaseline(command.mode);
+        setOverrides(new Map());
+        setAppliedSeq(command.seq);
+    }
+    const state = { baseline, overrides, editingPath, draft };
+    const ctx = {
+        state,
+        toggle: (path, value) => {
+            const next = new Map(overrides);
+            const opening = !isExpanded(state, path);
+            next.set(path, opening);
+            // Opening an array also opens its container elements: the elements are
+            // anonymous index rows, so surfacing their fields in the same click is
+            // what makes `list[0].id` reachable without a second dig.
+            if (opening && Array.isArray(value)) {
+                ;
+                value.forEach((element, i) => {
+                    if (isContainer(element))
+                        next.set(childPath(path, i), true);
+                });
+            }
+            setOverrides(next);
+        },
+        beginEdit: (path, initial) => {
+            setEditingPath(path);
+            setDraft(initial);
+        },
+        setDraft,
+        endEdit: () => setEditingPath(null),
+        onCommit,
+    };
+    return (_jsx("div", { "data-testid": "appdata-tree", className: "py-1", children: _jsx(TreeNode, { path: ROOT_PATH, label: "object", value: root, depth: 0, unsafeSegments: false, ctx: ctx }) }));
+}

package/dist/connected-appdata-panel.js

@@ -28,5 +28,13 @@ export function ConnectedAppDataPanel({ source, active = true, enabled = true, i
         },
     });
     const { activeBridgeId, setActiveBridge } = useActiveBridgeId(snapshot.bridges, activePagePath);
-    return (_jsx(AppDataPanel, { state: { bridges: snapshot.bridges, activeBridgeId, entries: snapshot.entries }, onSelectBridge: setActiveBridge, isRuntimeRunning: isRuntimeRunning }));
+    // Only a source with a write-back channel makes the tree editable. The
+    // dispatch result flows through to the panel: its undo/redo stacks only
+    // advance when the runtime actually accepted the write. The authoritative
+    // new VALUE still arrives back through the snapshot push, never locally.
+    const setData = source.setData?.bind(source);
+    const onSetData = setData
+        ? (bridgeId, patch) => setData(bridgeId, patch)
+        : undefined;
+    return (_jsx(AppDataPanel, { state: { bridges: snapshot.bridges, activeBridgeId, entries: snapshot.entries }, onSelectBridge: setActiveBridge, isRuntimeRunning: isRuntimeRunning, onSetData: onSetData }));
 }

package/dist/panel-view.js

@@ -6,7 +6,12 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * - 路径式 tag（含 `/`）= 页面或自定义组件，默认展开（让用户一眼看清组件层级）
  * - 普通 DOM 节点（view/text 等）默认折叠，需要用户手动点开
  */
-function isDefaultExpanded(node) {
+function isDefaultExpanded(node, depth) {
+    // The root always opens expanded: collapsed, it hides the entire tree
+    // behind one ▸ row and the panel reads as blank — regardless of what tag
+    // shape the runtime gives the root (plain `page`, a component path, …).
+    if (depth === 0)
+        return true;
     if (node.tagName === '#shadow-root')
         return true;
     if (node.tagName.includes('/'))
@@ -28,7 +33,7 @@ function WxmlFragmentNode({ node, depth, inspectedSid, onInspect }) {
 // Shadow root — synthetic boundary for custom component internals.
 // Clickable to collapse like WeChat DevTools; default expanded; no closing tag.
 function WxmlShadowRootNode({ node, depth, inspectedSid, onInspect }) {
-    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node));
+    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node, depth));
     const indent = depth * 16;
     const hasShadowChildren = (node.children ?? []).length > 0;
     return (_jsxs("div", { children: [_jsxs("div", { className: "py-px leading-[18px] hover:bg-surface-2 cursor-pointer", style: { paddingLeft: indent }, onClick: () => hasShadowChildren && setExpanded(!expanded), children: [_jsx("span", { className: "text-text-dim w-3 shrink-0 inline-block text-center select-none", children: hasShadowChildren ? (expanded ? '▾' : '▸') : ' ' }), _jsx("span", { className: "text-text-dim italic", children: "#shadow-root" })] }), expanded && node.children.map((child, i) => (_jsx(WxmlTreeNode, { node: child, depth: depth + 1, inspectedSid: inspectedSid, onInspect: onInspect }, i)))] }));
@@ -47,7 +52,7 @@ function WxmlBlockRow({ node, depth, indent, attrEntries, hasChildren, expanded,
 }
 // Ordinary element node — decides between the inline-text and block layouts.
 function WxmlElementNode({ node, depth, inspectedSid, onInspect }) {
-    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node));
+    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node, depth));
     const indent = depth * 16;
     const isInspected = Boolean(node.sid && node.sid === inspectedSid);
     const hasChildren = (node.children ?? []).length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimina-kit/inspect",
-  "version": "0.4.0-dev.20260716163758",
+  "version": "0.4.0-dev.20260717120050",
   "description": "Host-agnostic WXML tree extraction and inspection for dimina render layers: Vue runtime walk, stable-id registry, mutation-observing inspector, and a React tree panel.",
   "keywords": [
     "dimina",

package/src/appdata-edge-values.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * AppDataPanel edge-value contracts:
+ *
+ * 1. A write result that is a thenable but not a native `Promise` instance
+ *    (a cross-realm promise, a polyfill, any spec-conforming thenable) still
+ *    settles asynchronously through its own `then` — it is never treated as
+ *    an immediate synchronous success just because it is a truthy, non-`false`
+ *    object. The write gate stays held until the thenable actually resolves.
+ * 2. An own `__proto__` data key in a setData payload (as produced by
+ *    `JSON.parse`, which creates it as a normal own data property, not a
+ *    prototype rewire) renders as an ordinary tree row and never reaches the
+ *    merged object through a path that would trigger the legacy `__proto__`
+ *    accessor and rewire the merged object's prototype.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, waitFor, within } from '@testing-library/react'
+import { AppDataPanel, type AppDataPanelState as AppDataState } from './appdata-panel-view.js'
+
+function writableState(): AppDataState {
+  return {
+    bridges: [{ id: 'b1', pagePath: '/pages/index/index' }],
+    activeBridgeId: 'b1',
+    entries: {
+      b1: {
+        comp: {
+          flag: true,
+          label: 'hello',
+        },
+      },
+    },
+  }
+}
+
+function checkboxFor(container: HTMLElement, path: string): HTMLInputElement {
+  const row = container.querySelector(`[data-path="${path}"]`) as HTMLElement
+  return row.querySelector('input[type="checkbox"]') as HTMLInputElement
+}
+
+function valueElFor(container: HTMLElement, path: string): HTMLElement {
+  const row = container.querySelector(`[data-path="${path}"]`) as HTMLElement
+  return within(row).getByTestId('appdata-value')
+}
+
+/** Double-click a string/number row, replace its text, and commit on Enter. */
+function commitText(container: HTMLElement, path: string, value: string): void {
+  fireEvent.dblClick(valueElFor(container, path))
+  const input = within(container).getByRole('textbox') as HTMLInputElement
+  fireEvent.change(input, { target: { value } })
+  fireEvent.keyDown(input, { key: 'Enter' })
+}
+
+/** A thenable that is deliberately not a `Promise` instance — same shape a
+ * cross-realm promise or a promise polyfill returns. `settled` flips only
+ * once the thenable's own `then` callback actually runs (a real macrotask
+ * later), so tests can wait for genuine settlement instead of guessing at a
+ * delay. */
+function fakeThenable(resolveWith: boolean): { thenable: { then: (res: (v: boolean) => void) => void }; state: { settled: boolean } } {
+  const state = { settled: false }
+  const thenable = {
+    then(res: (v: boolean) => void) {
+      setTimeout(() => {
+        state.settled = true
+        res(resolveWith)
+      }, 0)
+    },
+  }
+  return { thenable, state }
+}
+
+describe('AppDataPanel: a thenable write result settles asynchronously, never as a same-tick success', () => {
+  it('keeps the commit off the undo stack until the thenable actually resolves, and rejects it once it does', async () => {
+    const { thenable, state } = fakeThenable(false)
+    expect(thenable).not.toBeInstanceOf(Promise)
+    const onSetData = vi.fn(() => thenable as unknown as Promise<boolean>)
+    const { container, getByTitle } = render(
+      <AppDataPanel state={writableState()} onSelectBridge={vi.fn()} onSetData={onSetData} />,
+    )
+
+    fireEvent.click(checkboxFor(container, 'flag'))
+    expect(onSetData).toHaveBeenCalledTimes(1)
+    // A truthy, non-`false` thenable is not a synchronous success — the gate
+    // must still be held in the same tick as the click that fired it.
+    expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(true)
+
+    await waitFor(() => expect(state.settled).toBe(true))
+    // The thenable resolved to `false` (a rejection) — the record never
+    // lands on the undo stack, even after real settlement.
+    expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('drops a second edit fired while the first thenable write is still pending', async () => {
+    const { thenable, state } = fakeThenable(true)
+    const onSetData = vi.fn(() => thenable as unknown as Promise<boolean>)
+    const { container, getByTitle } = render(
+      <AppDataPanel state={writableState()} onSelectBridge={vi.fn()} onSetData={onSetData} />,
+    )
+
+    fireEvent.click(checkboxFor(container, 'flag'))
+    expect(onSetData).toHaveBeenCalledTimes(1)
+    expect(state.settled).toBe(false)
+
+    // The write gate must still be held here — the first thenable has not
+    // resolved yet, so this edit has to be dropped outright, never queued.
+    commitText(container, 'label', 'ignored')
+    expect(onSetData).toHaveBeenCalledTimes(1)
+
+    await waitFor(() => expect(state.settled).toBe(true))
+    await waitFor(() => expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(false))
+    // Settlement only ever admitted the first write — the dropped edit never
+    // reached onSetData, not even after the gate freed up.
+    expect(onSetData).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('AppDataPanel: an own `__proto__` data key renders as a plain, read-only row', () => {
+  it('does not let the nested key leak onto the merged tree, keeps the sibling key intact, and keeps `__proto__` itself visible and read-only', () => {
+    const data = JSON.parse('{"__proto__":{"hidden":1},"safe":2}') as Record<string, unknown>
+    // JSON.parse creates `__proto__` as a normal own data property (per spec,
+    // via CreateDataProperty) — this is not a prototype rewire of `data`
+    // itself, only a risk if something later assigns `data` into another
+    // object through the legacy `[[Set]]` path (e.g. `Object.assign`).
+    expect(Object.getPrototypeOf(data)).toBe(Object.prototype)
+    expect(Object.keys(data).sort()).toEqual(['__proto__', 'safe'])
+
+    const state: AppDataState = {
+      bridges: [{ id: 'b1', pagePath: '/pages/index/index' }],
+      activeBridgeId: 'b1',
+      entries: { b1: { comp: data } },
+    }
+    const { container, queryByText } = render(
+      <AppDataPanel state={state} onSelectBridge={vi.fn()} onSetData={vi.fn(() => true)} />,
+    )
+
+    // The nested key never surfaces as a row of its own — a merge that runs
+    // `__proto__` through the legacy setter would rewire the merged object's
+    // prototype and make `hidden` an inherited (not own) property that no
+    // row is ever built for.
+    expect(queryByText('hidden')).toBeNull()
+    // The sibling key merges normally regardless of what happens to
+    // `__proto__` alongside it.
+    expect(valueElFor(container, 'safe').textContent).toBe('2')
+
+    // `__proto__` itself is real, visible data — a prototype-rewiring merge
+    // makes it vanish as an own key entirely, so this is the row that would
+    // never render on the unfixed merge.
+    expect(queryByText('__proto__')).not.toBeNull()
+    // And it stays read-only: no row for it may ever carry a write path.
+    expect(container.querySelector('[data-path="__proto__"]')).toBeNull()
+  })
+})