@ptengine/inline-editor 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.1.7
+
+依赖 `@ptengine/inline-core` ~0.2.1（新增 `historyShortcut` 流事件）：**先发 inline-core 0.2.1，再发本版**。
+
+**变更**
+
+- 整页模式下（宿主接了 `onPageContextReady`）选中元素时，AI 作用域 = 选中元素 ∪ 它的子树货架 ∪ **整页货架**，
+  并按整页货架那些行的真实祖先链收敛落盘；MOVE 也认货架里任意一行作 target。用户点中的常不是他说的那一层 ——
+  vivaia 首屏点哪都选中幻灯片的空覆盖链接，「首屏下面加评价」要 after 整个 section、「换这张图」要改它的兄弟 img，
+  此前都不在子树里，只能请用户取消选择（真机 2026-10-21）。并进来的仍是宿主发出去的那份货架，货架外拼出来的
+  selector 照拒；宿主选中时也要发 `<page-shelf>`。没有整页模式的老宿主行为不变。
+- 整页货架补上矮区块：页面模型的成员容器只要够宽就是候选、不看高度；块根父级（上下叠放的那一层）里不够高、但够宽、
+  有内容、不在 header / nav / footer 里的孩子补成块根，参与排序与叶子配额，也能写 `blockId`。此前低于 120px 的区块
+  （vivaia 手机首页 86px 的新闻区）等不到广度优先回填就被行数上限挤掉，标题进不了货架，改它的请求全部被拒。
+  装着 ≥2 个候选的外壳不再因「只认领了这一块」成块；分析路径的成员（`liftToBlockRoots`）同口径上提到矮块根。
+- 插入位置与移动位置统一使用组件库的 outline 单选 ToggleGroup；移动工具栏的位置选择单独一行，取消与确认固定在下方一行靠右，统一控件高度。移动先选位置，再确认执行，支持取消，提交期间阻止重复操作。
+
+**修复**
+
+- I01：设备切换先等待已开始的写入完成，再保存当前 live 清单并交还版本宿主；新会话从这份快照回放，回放期间阻止编辑与保存。版本和设备会话切换仍重置操作历史。
+- I02：宿主和画布的 Cmd/Ctrl+Z、Shift+Z / Ctrl+Y 接入已有操作历史；输入框和文字编辑期间保留原生撤销。
+- I04：样式读取当前生效值并随编辑/撤销刷新，仅已有覆盖提供清除入口；图片/背景图、视频、alt 读取 live DOM，点击动作回填当前版本的配置。读取失败显示错误。
+- I05：画布会话失败显示目标页加载提示、原因与返回入口，避免无反馈的空画布。
+- I09：文字、插入、移动及撤销/重做后刷新图层标签和结构，复用图层组件以保留搜索和折叠状态；纯样式编辑不重拉图层。
+- 复验既有 I03 浮层布局：全屏 z-index 1000 宿主、1024×480、拖拽及关闭重开，稳定后完整位于视口内。
+
 ## 0.1.6
 
 **变更**

package/dist/InlineEditor.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { EditorStatus } from './panels/EditorStatus.js';
+import { MovePositionControls } from './panels/MovePositionControls.js';
 import { ScreenshotCard } from './panels/ScreenshotCard.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +17,7 @@ import { ChangeListPanel } from './kernel/changelist/ChangeListPanel.js';
 import { ChangeListPopover } from './kernel/changelist/ChangeListPopover.js';
 import { frameRectToProductRect, measureFrameContext } from './kernel/selection/geometry.js';
 import { buildElementAiContext, extractPageLinks, linksFragment, ROOT_SHELF_LIMIT, SHELF_TREE_MAX_DEPTH, SHELF_TREE_MAX_NODES } from './kernel/selection/elementAiContext.js';
-import { getAncestorChain, getDomTree, getElementCapabilities, getElementImages, getOuterHtml, resolveCanvasSelector } from './kernel/canvasCommands.js';
+import { getAncestorChain, getDomTree, getElementCapabilities, getElementImages, getOuterHtml, resolveCanvasSelector, queryElements } from './kernel/canvasCommands.js';
 import { useAiSelectionContext } from './kernel/selection/useAiSelectionContext.js';
 import { buildDescendantShelf } from './kernel/selection/buildDescendantShelf.js';
 import { ROOT_SHELF_TREE_PARAMS, buildRootShelf } from './kernel/selection/buildRootShelf.js';
@@ -35,6 +36,7 @@ import { ImageSettingDialog } from './dialogs/ImageSettingDialog.js';
 import { InsertElementDialog } from './dialogs/InsertElementDialog.js';
 import { ReplaceVideoDialog } from './dialogs/ReplaceVideoDialog.js';
 import { StylePanel } from './panels/StylePanel.js';
+import { STYLE_SECTIONS } from './panels/styleFields.js';
 import { HtmlEditDialog } from './dialogs/HtmlEditDialog.js';
 import { setCode } from './kernel/canvasCommands.js';
 import { describeCanvasError } from './kernel/canvasErrors.js';
@@ -60,7 +62,9 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
     const canvasIframeRef = useRef(null);
     const insertedRemovedRef = useRef(null);
     const insertedRestoredRef = useRef(null);
+    const historyShortcutRef = useRef(() => { });
     const editor = useInlineEditor({
+        onHistoryShortcut: direction => historyShortcutRef.current(direction),
         onInsertedRemoved: selectors => insertedRemovedRef.current?.(selectors),
         onInsertedRestored: selectors => insertedRestoredRef.current?.(selectors),
         url,
@@ -80,6 +84,7 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
     const [showChangeList, setShowChangeList] = useState(false);
     const [stylePanelOpen, setStylePanelOpen] = useState(false);
     const [htmlDialog, setHtmlDialog] = useState({ open: false, seed: '' });
+    const [currentStyles, setCurrentStyles] = useState({});
     const [imageDialog, setImageDialog] = useState({ open: false, seed: '' });
     const [imageSettingDialog, setImageSettingDialog] = useState({ open: false, seed: '' });
     const [videoDialog, setVideoDialog] = useState({ open: false, seed: '' });
@@ -96,6 +101,25 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             return '';
         }
     }, [url]);
+    useEffect(() => {
+        if (!stylePanelOpen || !selection || !frameProps?.sessionId)
+            return;
+        let cancelled = false;
+        void queryElements(frameProps.sessionId, [selection.selector], {
+            fields: STYLE_SECTIONS.flatMap(section => section.fields.map(field => `computed:${field.property}`))
+        })
+            .then(result => {
+            if (!cancelled)
+                setCurrentStyles(result.results[0]?.matches[0]?.computed ?? {});
+        })
+            .catch(error => {
+            if (!cancelled)
+                setCommandError(describeCanvasError(error));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [stylePanelOpen, selection?.selector, frameProps?.sessionId, changeList.list]);
     const changeListRef = useRef(changeList);
     changeListRef.current = changeList;
     const versionChangesRef = useRef(versionChanges);
@@ -172,6 +196,27 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         }
         void run().catch(e => setCommandError(describeCanvasError(e)));
     }, [t]);
+    historyShortcutRef.current = direction => {
+        if (!domReady || textEditing || switchingRef.current)
+            return;
+        uiWrite(() => enqueue(() => direction === 'undo' ? changeListRef.current.undo() : changeListRef.current.redo()));
+    };
+    useEffect(() => {
+        const onKey = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.altKey)
+                return;
+            const target = event.target;
+            if (target?.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]'))
+                return;
+            const key = event.key.toLowerCase();
+            if (key !== 'z' && !(key === 'y' && event.ctrlKey))
+                return;
+            event.preventDefault();
+            historyShortcutRef.current(event.shiftKey || key === 'y' ? 'redo' : 'undo');
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, []);
     useEffect(() => {
         if (!hasVersions || !activeVersionId)
             return;
@@ -202,18 +247,43 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
     }, [sessionIdForAssets]);
     const hydratedSessionRef = useRef(null);
     const sessionIdForHydrate = frameProps?.sessionId;
-    const bootChanges = hasVersions && activeVersionId && versionChanges?.[activeVersionId]
-        ? versionChanges[activeVersionId]
-        : initialChanges;
+    const deviceSnapshot = useRef(null);
+    const changeDevice = (next) => {
+        if (next === device || switchingRef.current)
+            return;
+        switchingRef.current = true;
+        setSwitching(true);
+        void enqueue(async () => {
+            await changeListRef.current.whenIdle();
+            const live = changeListRef.current.peekList();
+            deviceSnapshot.current = { version: activeVersionId, changes: live.map(r => r.change) };
+            if (activeVersionId)
+                versionCallbacksRef.current.onVersionLeave?.(activeVersionId, live);
+            onDeviceChange(next);
+        })
+            .catch(error => setCommandError(describeCanvasError(error)))
+            .finally(() => {
+            switchingRef.current = false;
+            setSwitching(false);
+        });
+    };
+    const bootChanges = deviceSnapshot.current?.version === activeVersionId && deviceSnapshot.current
+        ? deviceSnapshot.current.changes
+        : hasVersions && activeVersionId && versionChanges?.[activeVersionId]
+            ? versionChanges[activeVersionId]
+            : initialChanges;
     useEffect(() => {
         if (!domReady || !sessionIdForHydrate)
             return;
         if (hydratedSessionRef.current === sessionIdForHydrate)
             return;
         hydratedSessionRef.current = sessionIdForHydrate;
+        deviceSnapshot.current = null;
         if (!bootChanges?.length)
             return;
         const versionId = hasVersions ? activeVersionId : undefined;
+        setSwitching(true);
+        switchingRef.current = true;
         void enqueue(async () => {
             const { outcome, idMap } = await changeListRef.current.replaceAll(bootChanges, prevIdsFor(versionId, bootChanges));
             if (versionId) {
@@ -222,7 +292,12 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                 versionCallbacksRef.current.onVersionEnter?.(versionId, idMap);
             }
             onHydrated?.(outcome);
-        }).catch(e => setCommandError(describeCanvasError(e)));
+        })
+            .catch(e => setCommandError(describeCanvasError(e)))
+            .finally(() => {
+            switchingRef.current = false;
+            setSwitching(false);
+        });
     }, [domReady, sessionIdForHydrate, bootChanges]);
     const commandsRef = useRef(commands);
     commandsRef.current = commands;
@@ -658,9 +733,15 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                 identifier: picked.selector,
                 descendants: () => [
                     ...descendantShelfRef.current.map(d => d.selector),
+                    ...(pageMode ? rootShelfRef.current.map(d => d.selector) : []),
                     ...aiInsertedRef.current
                 ],
-                ancestors: (selection?.chain ?? []).slice(1).map(n => n.selector)
+                ancestors: (selection?.chain ?? []).slice(1).map(n => n.selector),
+                ...(pageMode
+                    ? {
+                        ancestorsOf: (selector) => rootShelfAncestorsRef.current.get(selector)
+                    }
+                    : {})
             }
             : {
                 selector: 'body',
@@ -806,11 +887,40 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             return;
         }
         if (buttonId === 'replace-image') {
-            setImageDialog({ open: true, seed: '' });
+            void Promise.all([
+                getOuterHtml(sessionId, self.selector),
+                selection?.capabilities?.hasBackgroundImage && !selection?.capabilities?.isImg
+                    ? queryElements(sessionId, [self.selector], {
+                        fields: ['computed:background-image']
+                    })
+                    : Promise.resolve(null)
+            ])
+                .then(([{ html }, facts]) => {
+                const node = new DOMParser().parseFromString(html, 'text/html').body
+                    .firstElementChild;
+                const background = facts?.results[0]?.matches[0]?.computed?.['background-image'] ?? '';
+                const url = /^url\(["']?(.*?)["']?\)$/.exec(background)?.[1] ?? '';
+                setImageDialog({
+                    open: true,
+                    seed: facts ? url : (node?.getAttribute('src') ?? '')
+                });
+            })
+                .catch(error => setCommandError(describeCanvasError(error)));
             return;
         }
         if (buttonId === 'replace-video') {
-            setVideoDialog({ open: true, seed: '' });
+            void getOuterHtml(sessionId, self.selector)
+                .then(({ html }) => {
+                const node = new DOMParser().parseFromString(html, 'text/html').body
+                    .firstElementChild;
+                setVideoDialog({
+                    open: true,
+                    seed: node?.getAttribute('src') ??
+                        node?.querySelector('source')?.getAttribute('src') ??
+                        ''
+                });
+            })
+                .catch(error => setCommandError(describeCanvasError(error)));
             return;
         }
         if (buttonId === 'insert') {
@@ -818,11 +928,29 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             return;
         }
         if (buttonId === 'image-setting') {
-            setImageSettingDialog({ open: true, seed: '' });
+            void getOuterHtml(sessionId, self.selector)
+                .then(({ html }) => {
+                const node = new DOMParser().parseFromString(html, 'text/html').body
+                    .firstElementChild;
+                setImageSettingDialog({
+                    open: true,
+                    seed: node?.getAttribute('alt') ?? ''
+                });
+            })
+                .catch(error => setCommandError(describeCanvasError(error)));
             return;
         }
         if (buttonId === 'click-action') {
-            setActionDialog({ open: true, seed: null });
+            const existing = [...changeListRef.current.peekList()]
+                .reverse()
+                .find(r => r.change.type === 'changeElementAction' &&
+                r.change.selector === self.selector);
+            setActionDialog({
+                open: true,
+                seed: existing?.change.type === 'changeElementAction'
+                    ? existing.change.action
+                    : null
+            });
             return;
         }
         if (buttonId === 'edit-style') {
@@ -879,13 +1007,21 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                                                             targetIdentifier: targetSelector,
                                                             targetSelector,
                                                             mode: moveModeFromDropPos(pos)
-                                                        })) })) })] }) }), _jsx(ResizableHandle, { withHandle: true })] })), _jsx(ResizablePanel, { id: "canvas", order: 2, minSize: 30, children: _jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col", children: [_jsx(CanvasContextBar, { url: url, device: device, onDeviceChange: onDeviceChange }), _jsx("div", { ref: canvasAreaRef, className: "relative min-h-0 flex-1 overflow-hidden p-3", children: frameProps && (_jsx(CanvasFrame, { url: frameProps.url, sessionId: frameProps.sessionId, device: frameProps.device, panelWidth: panelWidth, targetViewportWidth: targetViewportWidth[frameProps.device], onFrameLoad: () => { }, domReady: domReady, iframeRef: canvasIframeRef }, frameProps.sessionId)) })] }) })] }), !capturing && shot && (_jsx(ScreenshotCard, { dataUrl: shot.dataUrl, truncated: shot.truncated, scale: shot.scale, uploadImage: uploadImage, onClose: () => {
+                                                        })) })) })] }) }), _jsx(ResizableHandle, { withHandle: true })] })), _jsx(ResizablePanel, { id: "canvas", order: 2, minSize: 30, children: _jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col", children: [_jsx(CanvasContextBar, { url: url, device: device, onDeviceChange: changeDevice }), _jsxs("div", { ref: canvasAreaRef, className: "relative min-h-0 flex-1 overflow-hidden p-3", children: [editor.session.state === 'failed' && (_jsxs("div", { role: "alert", "data-testid": "inline-editor-session-failed", className: "absolute inset-3 z-20 flex flex-col items-center justify-center gap-3 rounded-lg bg-white p-6 text-center text-sm", children: [_jsx("p", { className: "font-semibold", children: t('inlineCanvas.review.pageLoadFailed', '目标页面无法加载') }), _jsx("p", { children: [
+                                                                'NO_EXTENSION',
+                                                                'EXTENSION_ID_MISSING',
+                                                                'CONTRACT_MISMATCH'
+                                                            ].includes(editor.session.reason ?? '')
+                                                                ? describeCanvasError(editor.session.reason)
+                                                                : t('inlineCanvas.review.pageLoadHint', '请返回检查页面地址、网站访问权限和网络连接后重试。') }), _jsx("code", { className: "text-xs text-muted-foreground", children: editor.session.reason }), _jsx(Button, { variant: "secondary", onClick: onExit, children: t('inlineCanvas.review.backFromFailed', '返回修改') })] })), frameProps && (_jsx(CanvasFrame, { url: frameProps.url, sessionId: frameProps.sessionId, device: frameProps.device, panelWidth: panelWidth, targetViewportWidth: targetViewportWidth[frameProps.device], onFrameLoad: () => { }, domReady: domReady, iframeRef: canvasIframeRef }, frameProps.sessionId))] })] }) })] }), !capturing && shot && (_jsx(ScreenshotCard, { dataUrl: shot.dataUrl, truncated: shot.truncated, scale: shot.scale, uploadImage: uploadImage, onClose: () => {
                             setShot(null);
-                        } }, shot.dataUrl)), _jsx(ChangeListPopover, { open: showChangeList && !capturing, onClose: () => setShowChangeList(false), children: _jsx(ChangeListPanel, { list: changeList.list, onRevert: id => uiWrite(() => writes.revert(id)), onRevertAll: () => uiWrite(() => writes.revertAll()), lastError: changeList.lastError, onHover: s => void commands.hover(s), onSelect: s => void selectAndReveal(s) }) })] }), !capturing && (_jsx(SelectionOverlay, { geometry: geometry.latest, context: overlayContext, selectedLabel: self ? `<${self.tag}>` : undefined })), !capturing && blockOverlay && (_jsx(BlockOverlay, { blocks: blockOverlay.blocks, activeId: blockOverlay.activeId, onHover: blockOverlay.onHover, geometry: geometry.latest, context: overlayContext, scale: editor.mobileFit.scale })), !capturing && commandError && (_jsxs(EditorStatus, { tone: "error", "data-testid": "inline-editor-command-error", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [_jsx("span", { children: commandError }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setCommandError(null), children: t('inlineCanvas.chrome.close', '关闭') })] })), !capturing && aiApplyNote && (_jsxs(EditorStatus, { "data-testid": "inline-editor-ai-apply-note", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [_jsx("span", { role: "status", children: aiApplyNote }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setAiApplyNote(null), children: t('inlineCanvas.chrome.close', '关闭') })] })), !capturing && move && (_jsxs(EditorStatus, { "data-testid": "inline-editor-move-bar", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [move.target === null ? (_jsx(_Fragment, { children: _jsx("span", { children: move.rejected === 'same-element'
+                        } }, shot.dataUrl)), _jsx(ChangeListPopover, { open: showChangeList && !capturing, onClose: () => setShowChangeList(false), children: _jsx(ChangeListPanel, { list: changeList.list, onRevert: id => uiWrite(() => writes.revert(id)), onRevertAll: () => uiWrite(() => writes.revertAll()), lastError: changeList.lastError, onHover: s => void commands.hover(s), onSelect: s => void selectAndReveal(s) }) })] }), !capturing && (_jsx(SelectionOverlay, { geometry: geometry.latest, context: overlayContext, selectedLabel: self ? `<${self.tag}>` : undefined })), !capturing && blockOverlay && (_jsx(BlockOverlay, { blocks: blockOverlay.blocks, activeId: blockOverlay.activeId, onHover: blockOverlay.onHover, geometry: geometry.latest, context: overlayContext, scale: editor.mobileFit.scale })), !capturing && commandError && (_jsxs(EditorStatus, { tone: "error", "data-testid": "inline-editor-command-error", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [_jsx("span", { children: commandError }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setCommandError(null), children: t('inlineCanvas.chrome.close', '关闭') })] })), !capturing && aiApplyNote && (_jsxs(EditorStatus, { "data-testid": "inline-editor-ai-apply-note", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [_jsx("span", { role: "status", children: aiApplyNote }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setAiApplyNote(null), children: t('inlineCanvas.chrome.close', '关闭') })] })), !capturing && move && (_jsx("div", { role: "toolbar", "aria-label": t('inlineCanvas.move.title'), "data-testid": "inline-editor-move-bar", className: "fixed z-[903] -translate-x-1/2 rounded-lg border bg-popover p-3 text-xs text-popover-foreground shadow-md", style: {
+                    width: 'min(600px, calc(100vw - 32px))',
+                    left: `clamp(min(316px, 50vw), ${area.x + area.width / 2}px, max(calc(100vw - 316px), 50vw))`,
+                    top: `${area.y + 8}px`
+                }, children: move.target === null ? (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { children: move.rejected === 'same-element'
                                 ? '不能移到它自己里面，请另选一个目标'
-                                : t('inlineCanvas.move.pickTarget') }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('inlineCanvas.move.position') }), ['top', 'bottom', 'before', 'after'].map(pos => (_jsx(Button, { size: "sm", variant: "secondary", type: "button", "data-testid": `move-position-${pos}`, onClick: () => void commands
-                                    .confirmMove(pos)
-                                    .catch(e => setCommandError(describeCanvasError(e))), children: t(`inlineCanvas.move.${pos}`) }, pos)))] })), _jsx(Button, { size: "sm", variant: "secondary", type: "button", "data-testid": "move-cancel", onClick: () => commands.cancelMove(), children: t('inlineCanvas.move.cancel') })] })), !capturing && textEditing !== null && (_jsx(EditorStatus, { "data-testid": "inline-editor-text-editing-hint", style: {
+                                : t('inlineCanvas.move.pickTarget') }), _jsx(Button, { size: "default", variant: "secondary", type: "button", "data-testid": "move-cancel", onClick: () => commands.cancelMove(), children: t('inlineCanvas.move.cancel') })] })) : (_jsx(MovePositionControls, { onConfirm: commands.confirmMove, onCancel: commands.cancelMove, onError: e => setCommandError(describeCanvasError(e)) }, move.target)) })), !capturing && textEditing !== null && (_jsx(EditorStatus, { "data-testid": "inline-editor-text-editing-hint", style: {
                     left: `${area.x + area.width / 2}px`,
                     top: `${area.y + 8}px`
                 }, children: "\u6B63\u5728\u7F16\u8F91\u6587\u5B57 \u00B7 \u56DE\u8F66\u63D0\u4EA4 \u00B7 Esc \u53D6\u6D88" })), !capturing && !switching && !move && textEditing === null && (_jsx(SelectionToolbar, { selectedRect: selectedRect, area: area, capabilities: selection?.capabilities ?? null, isScrolling: geometry.isScrolling, onAction: onToolbarAction, host: { askAi: !!onAskAi } })), stylePanelOpen &&
@@ -895,7 +1031,15 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                 createPortal(_jsx("div", { className: `${CANVAS_UI_SCOPE} fixed z-[1000]`, children: _jsx(StylePanel, { anchor: {
                             x: Math.min(selectedRect.x + selectedRect.width + 12, area.x + area.width - 332),
                             y: Math.max(area.y + 8, selectedRect.y)
-                        }, tag: self.tag, capabilities: selection?.capabilities ?? null, declaredStyles: selection?.declaredStyles, onReset: property => {
+                        }, tag: self.tag, capabilities: selection?.capabilities ?? null, resettableProperties: changeList.list.flatMap(r => r.change.type === 'elementStyle' &&
+                            r.change.selector === self.selector
+                            ? [r.change.property]
+                            : []), declaredStyles: Object.assign({}, currentStyles, ...changeList.list
+                            .filter(r => r.change.type === 'elementStyle' &&
+                            r.change.selector === self.selector)
+                            .map(r => r.change.type === 'elementStyle'
+                            ? { [r.change.property]: r.change.value }
+                            : {})), onReset: property => {
                             void uiWrite(async () => {
                                 for (const record of changeList
                                     .peekList()

package/dist/dialogs/InsertElementDialog.js

@@ -3,7 +3,7 @@ import { CodeField } from './CodeField.js';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTriangle } from 'lucide-react';
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, ToggleGroup, ToggleGroupItem } from '@ptengine/design-components';
 import { pasteModes } from '../kernel/selection/toolbarButtons.js';
 import { validateHtml } from './htmlValidation.js';
 export function InsertElementDialog({ open, capabilities, onOpenChange, onApply }) {
@@ -21,7 +21,11 @@ export function InsertElementDialog({ open, capabilities, onOpenChange, onApply
     }, [open, modeKey]);
     const result = useMemo(() => validateHtml(html), [html]);
     const canApply = html.trim().length > 0 && result.ok && modes.length > 0;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), size: "md", className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "insert-element-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.insert.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.html') }), _jsx(CodeField, { "aria-label": t('inlineCanvas.insert.html'), "data-testid": "insert-html", rows: 8, className: "font-mono text-[12px]", value: html, onChange: e => setHtml(e.target.value) })] }), modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.position') }), _jsx("div", { className: "flex gap-1.5", children: modes.map(m => (_jsx(Button, { type: "button", "data-testid": `insert-mode-${m}`, "aria-pressed": mode === m, onClick: () => setMode(m), size: "sm", variant: mode === m ? 'secondary' : 'ghost', children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), html.trim().length > 0 && result.error && (_jsxs("p", { "data-testid": "insert-error", className: "flex items-start gap-1.5 text-xs leading-4 text-[#DE350B]", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), t(result.error)] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "insert-apply", disabled: !canApply, onClick: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), size: "md", className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "insert-element-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.insert.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.html') }), _jsx(CodeField, { "aria-label": t('inlineCanvas.insert.html'), "data-testid": "insert-html", rows: 8, className: "font-mono text-[12px]", value: html, onChange: e => setHtml(e.target.value) })] }), modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.position') }), _jsx(ToggleGroup, { type: "single", variant: "outline", value: mode, onValueChange: value => {
+                                        if (modes.includes(value)) {
+                                            setMode(value);
+                                        }
+                                    }, "aria-label": t('inlineCanvas.insert.position'), style: { justifyContent: 'flex-start', flexWrap: 'wrap' }, children: modes.map(m => (_jsx(ToggleGroupItem, { value: m, "data-testid": `insert-mode-${m}`, children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), html.trim().length > 0 && result.error && (_jsxs("p", { "data-testid": "insert-error", className: "flex items-start gap-1.5 text-xs leading-4 text-[#DE350B]", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), t(result.error)] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "insert-apply", disabled: !canApply, onClick: () => {
                                 void onApply({ html: html.trim(), mode });
                                 onOpenChange(false);
                             }, children: t('common.apply', '应用') })] })] }) }));

package/dist/kernel/ai/aiInlineApply.d.ts

@@ -248,10 +248,11 @@ export interface AiApplyDeps {
          */
         ancestors: string[];
         /**
-         * 货架里某一项的祖先链（由近及远，含作用域根自己）。**整页作用域专用**。
+         * 货架里某一项的祖先链（由近及远，含作用域根自己）。**整页货架那些行用**。
          *
-         * 元素作用域不传：那时 `ancestors` 就是选中元素的祖先链，而作用域里的后代都在它
-         * 底下，同一条链够用。整页作用域不一样 —— 根是 `body`，它的 `ancestors` 是空数组，
+         * 纯元素作用域不传：那时 `ancestors` 就是选中元素的祖先链，而作用域里的后代都在它
+         * 底下，同一条链够用。元素作用域并上了整页货架时（宿主有整页模式）传，查的是并进来的那些行。
+         * 整页作用域不一样 —— 根是 `body`，它的 `ancestors` 是空数组，
          * 拿它去判 `MOVE_ELEMENT` 的 target 会把**所有**移动判成非法（body 没有祖先）。
          * 这个函数让那道闸改为对着「被移动的那个元素」的祖先链判，规则本身没变。
          *

package/dist/kernel/changelist/useChangeList.d.ts

@@ -82,6 +82,7 @@ export interface UseChangeListResult {
         outcome: HydrateOutcome;
         idMap: Map<string, string>;
     }>;
+    whenIdle: () => Promise<unknown>;
     canUndo: boolean;
     canRedo: boolean;
     undo: () => Promise<void>;

package/dist/kernel/changelist/useChangeList.js

@@ -249,6 +249,7 @@ export function useChangeList(sessionId, options = {}) {
         clear,
         hydrate,
         replaceAll,
+        whenIdle: () => mutationQueue.current,
         peekList,
         canUndo: past.current.length > 0,
         canRedo: future.current.length > 0,

package/dist/kernel/selection/buildRootShelf.d.ts

@@ -16,6 +16,13 @@
  *   · 装着 ≥2 个候选区块 = 外壳，拆开；只装着 1 个 = 它自己就是这一块（外层赢，小圆点、
  *     进度条这些附属部件都在最外层里），但占页高 ≥60% 的单链节点是整页的框，让给内层；
  *   · 宿主给了页面模型（`blocks`）时，成员归属校正拆合，并在块根行写 `blockId`。
+ *
+ * **矮区块**（2026-10-21）：几何门槛（高 ≥120）挡掉了真正的矮区块 —— vivaia 手机首页的新闻区只有 86px，
+ * 父级是外壳，它既不是块根也不在块根里，只能等回填，100 行用完时它的标题还没轮到，「把新闻区标题改成…」
+ * 两次被拒、0 处落地。门槛本身不降（降了，section 里的标题条也成候选，section 被拆成外壳）。补两条：
+ *   · 页面模型的成员容器只要够宽就是候选，不看高度（热图说它是一块，它就是一块）；
+ *   · 块根的父级就是区块上下叠放的那一层：那里不够高、但够宽、有内容、不在 header/nav/footer 里的孩子，
+ *     也算一块（没有页面模型时的兜底）。
  * 旧规则「内层有 heading 就赢」不可用：kit 的 `heading` 是**子树里**第一个标题（没有就取第一段
  * 文字），section / 轮播轨道 / 每张幻灯片拿到的是同一句，规则又偏向内层 —— 真机 vivaia 首页的
  * 首屏只剩三张幻灯片，模型照「首屏下面」插进了轮播（2026-10-20）。

package/dist/kernel/selection/buildRootShelf.js

@@ -19,6 +19,8 @@ const SAME_TOP_PX = 2;
 const CHROME_ROWS_CAP = 5;
 const CHROME_TAGS = new Set(['header', 'nav', 'footer']);
 const TEXT_LEAF_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'a', 'button', 'span']);
+const isTextLeaf = (n) => n.tag === 'img' || (TEXT_LEAF_TAGS.has(n.tag) && n.textSummary.trim().length > 0);
+const hasContent = (n) => isTextLeaf(n) || !!n.image || n.textSummary.trim().length > 0 || n.children.some(c => !c.hidden && hasContent(c));
 function analyzeBlockRoots(root, opts) {
     const viewportWidth = typeof opts.viewportWidth === 'number' && opts.viewportWidth > 0
         ? opts.viewportWidth
@@ -76,13 +78,23 @@ function analyzeBlockRoots(root, opts) {
         for (const e of entries)
             e.demoted = false;
     }
-    const isCandidate = (e) => e.landmark && !e.demoted;
     const entryBySelector = new Map();
     for (const e of entries)
         if (!entryBySelector.has(e.node.selector))
             entryBySelector.set(e.node.selector, e);
+    const memberBoxes = new Set();
+    for (const b of opts.blocks ?? []) {
+        for (const member of b.members) {
+            const e = entryBySelector.get(member.selector);
+            const r = e?.node.rect;
+            if (e && r && r.height > 0 && r.width >= minWidth)
+                memberBoxes.add(e);
+        }
+    }
+    const isCandidate = (e) => (e.landmark || memberBoxes.has(e)) && !e.demoted;
     const claimed = new Map();
     const blocksIn = new Map();
+    const memberEntries = new Set();
     const addTo = (m, e, id) => {
         let set = m.get(e);
         if (!set)
@@ -91,14 +103,17 @@ function analyzeBlockRoots(root, opts) {
     };
     for (const b of opts.blocks ?? []) {
         for (const member of b.members) {
-            let e = entryBySelector.get(member.selector) ?? null;
-            while (e && !isCandidate(e))
-                e = e.parent;
-            if (!e)
+            const own = entryBySelector.get(member.selector);
+            if (!own)
                 continue;
-            addTo(claimed, e, b.id);
-            for (let a = e; a; a = a.parent)
+            memberEntries.add(own);
+            for (let a = own; a; a = a.parent)
                 addTo(blocksIn, a, b.id);
+            let e = own;
+            while (e && !isCandidate(e))
+                e = e.parent;
+            if (e)
+                addTo(claimed, e, b.id);
         }
     }
     const modelBlockCount = (e) => blocksIn.get(e)?.size ?? 0;
@@ -126,7 +141,7 @@ function analyzeBlockRoots(root, opts) {
     for (const e of [...candidates].reverse()) {
         const ks = kids.get(e) ?? [];
         let unit;
-        if (isAtomic(e))
+        if (isAtomic(e) && (memberEntries.has(e) || ks.length < 2))
             unit = true;
         else if (modelBlockCount(e) >= 2)
             unit = ks.length === 0;
@@ -148,6 +163,25 @@ function analyzeBlockRoots(root, opts) {
         }
     };
     takeRoots(tops);
+    const rootSet = new Set(blockRoots);
+    const holdsRoot = new Set();
+    for (const r of blockRoots)
+        for (let a = r.parent; a; a = a.parent)
+            holdsRoot.add(a);
+    const layers = new Set(blockRoots.map(r => r.parent?.node ?? root));
+    for (const layer of layers) {
+        if (laysOutInRow(layer))
+            continue;
+        for (const child of layer.children) {
+            const e = entryOf.get(child);
+            if (!e || rootSet.has(e) || holdsRoot.has(e) || e.landmark || e.demoted || e.chromeKey !== null)
+                continue;
+            const r = child.rect;
+            if (r && r.height > 0 && r.width >= minWidth && hasContent(child))
+                blockRoots.push(e);
+        }
+    }
+    blockRoots.sort((a, b) => a.order - b.order);
     const blockIdOf = (e) => {
         const ids = blocksIn.get(e);
         return ids && ids.size === 1 ? [...ids][0] : undefined;
@@ -226,7 +260,6 @@ export function buildRootShelf(root, opts) {
             chromeRows.set(e.chromeKey, (chromeRows.get(e.chromeKey) ?? 0) + 1);
         return true;
     };
-    const isTextLeaf = (n) => n.tag === 'img' || (TEXT_LEAF_TAGS.has(n.tag) && n.textSummary.trim().length > 0);
     const leavesPerBlock = landmarks.length
         ? Math.min(LEAVES_PER_LANDMARK, Math.max(1, Math.floor((limit - landmarks.length) / landmarks.length)))
         : LEAVES_PER_LANDMARK;

package/dist/locales.d.ts

@@ -54,6 +54,7 @@ export declare const zhCN: {
             title: string;
             pickTarget: string;
             cancel: string;
+            confirm: string;
             position: string;
             top: string;
             bottom: string;
@@ -234,6 +235,7 @@ export declare const enUS: {
             title: string;
             pickTarget: string;
             cancel: string;
+            confirm: string;
             position: string;
             top: string;
             bottom: string;
@@ -414,6 +416,7 @@ export declare const jaJP: {
             title: string;
             pickTarget: string;
             cancel: string;
+            confirm: string;
             position: string;
             top: string;
             bottom: string;
@@ -553,6 +556,9 @@ export declare const inlineEditorLocales: {
     readonly 'zh-CN': {
         readonly inlineCanvas: {
             readonly review: {
+                readonly pageLoadFailed: "目标页面无法加载";
+                readonly pageLoadHint: "请返回检查页面地址、网站访问权限和网络连接后重试。";
+                readonly backFromFailed: "返回修改";
                 readonly generating: "正在生成截图…";
                 readonly noLayers: "没有匹配的图层";
                 readonly clearSearch: "清除搜索";
@@ -641,6 +647,7 @@ export declare const inlineEditorLocales: {
                 title: string;
                 pickTarget: string;
                 cancel: string;
+                confirm: string;
                 position: string;
                 top: string;
                 bottom: string;
@@ -779,6 +786,9 @@ export declare const inlineEditorLocales: {
     readonly 'en-US': {
         readonly inlineCanvas: {
             readonly review: {
+                readonly pageLoadFailed: "Unable to load the target page";
+                readonly pageLoadHint: "Go back to check the page URL, site permissions and network connection, then retry.";
+                readonly backFromFailed: "Go back";
                 readonly generating: "Generating screenshot…";
                 readonly noLayers: "No matching layers";
                 readonly clearSearch: "Clear search";
@@ -867,6 +877,7 @@ export declare const inlineEditorLocales: {
                 title: string;
                 pickTarget: string;
                 cancel: string;
+                confirm: string;
                 position: string;
                 top: string;
                 bottom: string;
@@ -1005,6 +1016,9 @@ export declare const inlineEditorLocales: {
     readonly 'ja-JP': {
         readonly inlineCanvas: {
             readonly review: {
+                readonly pageLoadFailed: "対象ページを読み込めません";
+                readonly pageLoadHint: "戻ってページ URL、サイトへのアクセス権限、ネットワーク接続を確認して再試行してください。";
+                readonly backFromFailed: "戻って修正";
                 readonly generating: "スクリーンショットを生成中…";
                 readonly noLayers: "一致するレイヤーがありません";
                 readonly clearSearch: "検索をクリア";
@@ -1093,6 +1107,7 @@ export declare const inlineEditorLocales: {
                 title: string;
                 pickTarget: string;
                 cancel: string;
+                confirm: string;
                 position: string;
                 top: string;
                 bottom: string;

package/dist/locales.js

@@ -44,6 +44,7 @@ export const zhCN = {
             title: '移动元素',
             pickTarget: '在画布里点选目标元素',
             cancel: '取消移动',
+            confirm: '确认移动',
             position: '相对目标的位置',
             top: '移入开头',
             bottom: '移入末尾',
@@ -224,6 +225,7 @@ export const enUS = {
             title: 'Move element',
             pickTarget: 'Pick a target element on the canvas',
             cancel: 'Cancel move',
+            confirm: 'Confirm move',
             position: 'Position relative to target',
             top: 'Inside, first',
             bottom: 'Inside, last',
@@ -404,6 +406,7 @@ export const jaJP = {
             title: '要素を移動',
             pickTarget: 'キャンバスで対象要素を選択',
             cancel: '移動をキャンセル',
+            confirm: '移動を確定',
             position: '対象に対する位置',
             top: '内側の先頭',
             bottom: '内側の末尾',

package/dist/panels/MovePositionControls.d.ts

@@ -0,0 +1,6 @@
+import type { MovePosition } from '../kernel/moveState.js';
+export declare function MovePositionControls({ onConfirm, onCancel, onError }: {
+    onConfirm: (position: MovePosition) => Promise<void>;
+    onCancel: () => void;
+    onError: (error: unknown) => void;
+}): import("react").JSX.Element;

package/dist/panels/MovePositionControls.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ToggleGroup, ToggleGroupItem } from '@ptengine/design-components';
+const positions = ['top', 'bottom', 'before', 'after'];
+export function MovePositionControls({ onConfirm, onCancel, onError }) {
+    const { t } = useTranslation();
+    const [position, setPosition] = useState(null);
+    const [pending, setPending] = useState(false);
+    const submitting = useRef(false);
+    const confirm = async () => {
+        if (!position || submitting.current)
+            return;
+        submitting.current = true;
+        setPending(true);
+        try {
+            await onConfirm(position);
+        }
+        catch (error) {
+            onError(error);
+        }
+        finally {
+            submitting.current = false;
+            setPending(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex w-full min-w-0 flex-col gap-2.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: t('inlineCanvas.move.position') }), _jsxs("div", { className: "flex flex-col items-stretch gap-3", children: [_jsx(ToggleGroup, { type: "single", variant: "outline", value: position ?? '', disabled: pending, "aria-label": t('inlineCanvas.move.position'), onValueChange: value => {
+                            if (positions.includes(value)) {
+                                setPosition(value);
+                            }
+                        }, style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))'
+                        }, children: positions.map(pos => (_jsx(ToggleGroupItem, { value: pos, "data-testid": `move-position-${pos}`, children: t(`inlineCanvas.move.${pos}`) }, pos))) }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { size: "default", variant: "secondary", type: "button", "data-testid": "move-cancel", disabled: pending, onClick: onCancel, children: t('inlineCanvas.move.cancel') }), _jsx(Button, { size: "default", type: "button", "data-testid": "move-confirm", disabled: !position || pending, onClick: () => void confirm(), children: t('inlineCanvas.move.confirm') })] })] })] }));
+}

package/dist/panels/StylePanel.d.ts

@@ -22,9 +22,11 @@ export interface StylePanelProps {
     capabilities: ElementCapabilities | null;
     /** 元素当前的 author 层声明，用作输入框初值。 */
     declaredStyles?: Record<string, string>;
+    /** Only these properties have an editor override that can be cleared. */
+    resettableProperties?: string[];
     /** 提交一条样式改动。由宿主接到 `changeList.addStyle`。 */
     onApply: (property: string, value: string) => void | Promise<unknown>;
     onClose: () => void;
     onReset?: (property: string) => void;
 }
-export declare function StylePanel({ anchor, tag, capabilities, declaredStyles, onApply, onReset, onClose }: StylePanelProps): import("react").JSX.Element | null;
+export declare function StylePanel({ anchor, tag, capabilities, declaredStyles, resettableProperties, onApply, onReset, onClose }: StylePanelProps): import("react").JSX.Element | null;

package/dist/panels/StylePanel.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { X } from 'lucide-react';
 import { Button, InputGroup, InputGroupInput, InputGroupAddon, InputGroupText, Label, NativeSelect, Separator } from '@ptengine/design-components';
 import { composeStyleValue, visibleSections } from './styleFields.js';
-export function StylePanel({ anchor, tag, capabilities, declaredStyles = {}, onApply, onReset, onClose }) {
+export function StylePanel({ anchor, tag, capabilities, declaredStyles = {}, resettableProperties, onApply, onReset, onClose }) {
     const { t } = useTranslation();
     const sections = visibleSections(capabilities);
     const panelRef = useRef(null);
@@ -88,7 +88,10 @@ export function StylePanel({ anchor, tag, capabilities, declaredStyles = {}, onA
                     drag.current = null;
                 }, onLostPointerCapture: () => {
                     drag.current = null;
-                }, className: "flex cursor-grab touch-none select-none h-11 shrink-0 items-center justify-between border-b\n                border-[#EBECF0] bg-[#F4F5F7] px-3.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("code", { className: "text-xs text-[#6B778C]", children: ["<", tag, ">"] }), _jsx("span", { className: "text-[13px] font-semibold text-[#091E42]", children: t(`taginfo.${tag.toUpperCase()}`, tag) })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('inlineCanvas.chrome.close', '关闭'), "data-testid": "inline-style-panel-close", onClick: onClose, children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "min-h-0 flex-1 flex-col overflow-y-auto", children: sections.map((section, index) => (_jsxs("section", { "data-testid": `style-section-${section.id}`, className: "flex flex-col gap-3 px-3.5 py-3.5", children: [index > 0 && _jsx(Separator, { className: "-mt-3.5 mb-0.5" }), _jsx("p", { className: "text-xs font-semibold text-[#091E42]", children: t(section.labelKey) }), _jsx("div", { className: "grid grid-cols-2 gap-2.5", children: section.fields.map(field => (_jsx(StyleFieldInput, { field: field, initial: declaredStyles[field.property] ?? '', onApply: onApply, onReset: onReset }, field.property))) })] }, section.id))) }), _jsx("footer", { className: "shrink-0 bg-[#F7F8F9] px-3.5 py-3 text-xs leading-5 text-[#6B778C]", children: t('inlineCanvas.style.footnote', '每次改动都会记入改动清单，可单条撤销') })] }));
+                }, className: "flex cursor-grab touch-none select-none h-11 shrink-0 items-center justify-between border-b\n                border-[#EBECF0] bg-[#F4F5F7] px-3.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("code", { className: "text-xs text-[#6B778C]", children: ["<", tag, ">"] }), _jsx("span", { className: "text-[13px] font-semibold text-[#091E42]", children: t(`taginfo.${tag.toUpperCase()}`, tag) })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('inlineCanvas.chrome.close', '关闭'), "data-testid": "inline-style-panel-close", onClick: onClose, children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "min-h-0 flex-1 flex-col overflow-y-auto", children: sections.map((section, index) => (_jsxs("section", { "data-testid": `style-section-${section.id}`, className: "flex flex-col gap-3 px-3.5 py-3.5", children: [index > 0 && _jsx(Separator, { className: "-mt-3.5 mb-0.5" }), _jsx("p", { className: "text-xs font-semibold text-[#091E42]", children: t(section.labelKey) }), _jsx("div", { className: "grid grid-cols-2 gap-2.5", children: section.fields.map(field => (_jsx(StyleFieldInput, { field: field, initial: declaredStyles[field.property] ?? '', onApply: onApply, onReset: resettableProperties === undefined ||
+                                    resettableProperties.includes(field.property)
+                                    ? onReset
+                                    : undefined }, field.property))) })] }, section.id))) }), _jsx("footer", { className: "shrink-0 bg-[#F7F8F9] px-3.5 py-3 text-xs leading-5 text-[#6B778C]", children: t('inlineCanvas.style.footnote', '每次改动都会记入改动清单，可单条撤销') })] }));
 }
 function StyleFieldInput({ field, initial, onApply, onReset }) {
     const { t } = useTranslation();

package/dist/reviewLocales.d.ts

@@ -1,5 +1,8 @@
 export declare const reviewLocales: {
     readonly 'zh-CN': {
+        readonly pageLoadFailed: "目标页面无法加载";
+        readonly pageLoadHint: "请返回检查页面地址、网站访问权限和网络连接后重试。";
+        readonly backFromFailed: "返回修改";
         readonly generating: "正在生成截图…";
         readonly noLayers: "没有匹配的图层";
         readonly clearSearch: "清除搜索";
@@ -46,6 +49,9 @@ export declare const reviewLocales: {
         readonly align_justify: "两端对齐";
     };
     readonly 'en-US': {
+        readonly pageLoadFailed: "Unable to load the target page";
+        readonly pageLoadHint: "Go back to check the page URL, site permissions and network connection, then retry.";
+        readonly backFromFailed: "Go back";
         readonly generating: "Generating screenshot…";
         readonly noLayers: "No matching layers";
         readonly clearSearch: "Clear search";
@@ -92,6 +98,9 @@ export declare const reviewLocales: {
         readonly align_justify: "Justify";
     };
     readonly 'ja-JP': {
+        readonly pageLoadFailed: "対象ページを読み込めません";
+        readonly pageLoadHint: "戻ってページ URL、サイトへのアクセス権限、ネットワーク接続を確認して再試行してください。";
+        readonly backFromFailed: "戻って修正";
         readonly generating: "スクリーンショットを生成中…";
         readonly noLayers: "一致するレイヤーがありません";
         readonly clearSearch: "検索をクリア";

package/dist/reviewLocales.js

@@ -1,5 +1,8 @@
 export const reviewLocales = {
     'zh-CN': {
+        pageLoadFailed: '目标页面无法加载',
+        pageLoadHint: '请返回检查页面地址、网站访问权限和网络连接后重试。',
+        backFromFailed: '返回修改',
         generating: '正在生成截图…',
         noLayers: '没有匹配的图层', clearSearch: '清除搜索', searchLayers: '搜索图层',
         linkCopied: '链接已复制',
@@ -44,6 +47,9 @@ export const reviewLocales = {
         align_justify: '两端对齐'
     },
     'en-US': {
+        pageLoadFailed: 'Unable to load the target page',
+        pageLoadHint: 'Go back to check the page URL, site permissions and network connection, then retry.',
+        backFromFailed: 'Go back',
         generating: 'Generating screenshot…',
         noLayers: 'No matching layers', clearSearch: 'Clear search', searchLayers: 'Search layers',
         linkCopied: 'Link copied',
@@ -88,6 +94,9 @@ export const reviewLocales = {
         align_justify: 'Justify'
     },
     'ja-JP': {
+        pageLoadFailed: '対象ページを読み込めません',
+        pageLoadHint: '戻ってページ URL、サイトへのアクセス権限、ネットワーク接続を確認して再試行してください。',
+        backFromFailed: '戻って修正',
         generating: 'スクリーンショットを生成中…',
         noLayers: '一致するレイヤーがありません', clearSearch: '検索をクリア', searchLayers: 'レイヤーを検索',
         linkCopied: 'リンクをコピーしました',

package/dist/useInlineEditor.d.ts

@@ -42,6 +42,7 @@ export interface InlineEditorSelection {
     declaredStyles: Record<string, string>;
 }
 export interface UseInlineEditorInput {
+    onHistoryShortcut?: (direction: 'undo' | 'redo') => void;
     url: string;
     device: CanvasDevice;
     /** change list 变化时回调 —— 宿主自己决定存哪（本 hook 不做持久化）。 */

package/dist/useInlineEditor.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CANVAS_MSG_NAMESPACE } from '@ptengine/inline-core/protocol';
 import { useCanvasSession } from './kernel/useCanvasSession.js';
 import { useCanvasStream } from './kernel/useCanvasStream.js';
 import { useMobileFit } from './kernel/useMobileFit.js';
@@ -49,10 +50,21 @@ export function useInlineEditor(input) {
         documentSizeRef.current?.(payload);
     }, []);
     const stream = useCanvasStream(undefined, geometry.onGeometry, onTextEditCommit, onLifecycle, onDocumentSize);
+    const historyShortcutRef = useRef(input.onHistoryShortcut);
+    historyShortcutRef.current = input.onHistoryShortcut;
+    const onStreamEvent = useCallback((msg) => {
+        if (msg.namespace === CANVAS_MSG_NAMESPACE && msg.event === 'historyShortcut') {
+            const direction = msg.payload?.direction;
+            if (direction === 'undo' || direction === 'redo')
+                historyShortcutRef.current?.(direction);
+        }
+        else
+            stream.onStreamEvent(msg);
+    }, [stream.onStreamEvent]);
     const session = useCanvasSession({
         url: input.url,
         device: input.device,
-        onStreamEvent: stream.onStreamEvent
+        onStreamEvent
     });
     const sessionId = session.frameProps?.sessionId;
     const changeList = useChangeList(sessionId, {
@@ -147,6 +159,33 @@ export function useInlineEditor(input) {
             ? graftSubtree(prev, anchorId, root, { renderIcon: renderIconRef.current })
             : prev);
     }, [sessionId]);
+    const treeLoaded = tree !== null;
+    const contentRevision = changeList.list
+        .filter(record => ['elementContent', 'elementText', 'elementMove'].includes(record.change.type))
+        .map(record => record.changeId)
+        .join('|');
+    const refreshedContent = useRef('');
+    useEffect(() => {
+        if (!wantTree ||
+            !domReady ||
+            !sessionId ||
+            !treeRef.current ||
+            refreshedContent.current === contentRevision)
+            return;
+        let cancelled = false;
+        const loaded = Object.values(treeRef.current.nodes);
+        void getDomTree(sessionId, { maxDepth: 16, maxNodes: Math.max(1500, loaded.length) })
+            .then(root => {
+            if (!cancelled) {
+                refreshedContent.current = contentRevision;
+                setTree(adaptDomTree(root, { renderIcon: renderIconRef.current }));
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [contentRevision, domReady, sessionId, wantTree, treeLoaded]);
     const revealAttemptedRef = useRef(new Set());
     const selectedSelector = selection?.selector ?? null;
     const selectionChain = selection?.chain;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptengine/inline-editor",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
   "license": "UNLICENSED",
   "private": false,
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.577.0",
-    "@ptengine/inline-core": "~0.2.0"
+    "@ptengine/inline-core": "~0.2.1"
   },
   "devDependencies": {
     "@ptengine/design-components": "^0.10.0",