@ptengine/inline-editor 0.1.6 → 0.1.8

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 0.1.8
+
+依赖不变（`@ptengine/inline-core` ~0.2.1），可以直接发。
+
+**新增**
+
+- 交互模式（对应 engage-editor 画布工具条上的「交互模式」）：画布条右侧新增开关，进入后关掉拾取，点击、悬停、输入都交给客户页，
+  用来打开弹窗、切换页签、展开折叠，再改那些交互之后才看得见的内容。
+  - 进入时清掉选中与悬停，收起选中框、工具条、样式面板、移动条与区块框；顶栏整条被「您当前正在交互模式 / 返回编辑模式」提示条盖住，
+    图层面板盖一层不可点的遮罩，设备切换禁用，画布发来的与宿主页的 Cmd/Ctrl+Z 都不再触发编辑器撤销；挂 beforeunload 防止页面把产品页带走。
+  - 退出时开回拾取、重拉图层树，并把当前改动按原 changeId 撤了重放一遍（页面脚本可能把改过的元素重渲染掉了；id 不变，AI 卡片的撤销仍对得上）。
+  - 交互中画布整页跳走过（点了链接 / 提交了表单，SW 派生的 `navAway`），退出时按实验地址重建会话，改动走与切设备相同的快照回放，不往跳走后的页面上放。
+  - 切版本、文字编辑、移动拾取、截图进行中时按钮禁用；关拾取失败则不进入。
+  - `InlineEditor` 新增 `interactiveMode`（默认 `true`，只读画布可传 `false`）与 `onInteractiveChange`；headless 层 `useInlineEditor` 新增
+    `interactive` / `setInteractive(on)`（退出返回 `{ navigated }`）与入参 `reloadKey`；`useChangeList` 新增 `reapplyAll()`。
+
+## 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.d.ts

@@ -184,6 +184,15 @@ export interface InlineEditorProps {
         activeId?: string | null;
         onHover?: (id: string | null) => void;
     };
+    /**
+     * 「交互模式」按钮。默认 `true`。分析画布这类只看不改的宿主传 `false` 关掉。
+     *
+     * 交互模式 = 拾取关掉、页面原样可点（打开弹窗 / 切页签 / 展开折叠后再改那些交互后才
+     * 看得见的内容），对应老编辑器（engage-editor）画布工具条上的同名开关。
+     */
+    interactiveMode?: boolean;
+    /** 进出交互模式时通知宿主（宿主自己的浮层要不要让路由它决定）。 */
+    onInteractiveChange?: (on: boolean) => void;
     /**
      * 选中变化 → 新的 AI 上下文。`null` = 选中被清空。
      *
@@ -354,4 +363,4 @@ export interface AiApplyApi {
     /** 当前版本 —— 宿主把 agent 给的版本**名**映射成 id 时要知道现在在哪一版。 */
     readonly activeVersionId?: string;
 }
-export declare function InlineEditor({ url, device, onDeviceChange, title, versionLabel, chrome, onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, removableVersionIds, onRemoveVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, pageBlocks, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedLinkUrls, viewportWidthOverride, blockOverlay }: InlineEditorProps): import("react").JSX.Element;
+export declare function InlineEditor({ url, device, onDeviceChange, title, versionLabel, chrome, onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, removableVersionIds, onRemoveVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, pageBlocks, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedLinkUrls, viewportWidthOverride, blockOverlay, interactiveMode, onInteractiveChange }: InlineEditorProps): import("react").JSX.Element;

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';
@@ -54,13 +56,17 @@ function imageTargetOf(caps) {
     return branch === 'background' ? 'background' : undefined;
 }
 const AI_ELEMENT_IMAGE_LIMIT = 4;
-export function InlineEditor({ url, device, onDeviceChange, title, versionLabel = 'V1', chrome = 'full', onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, removableVersionIds, onRemoveVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, pageBlocks, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedLinkUrls, viewportWidthOverride, blockOverlay }) {
+export function InlineEditor({ url, device, onDeviceChange, title, versionLabel = 'V1', chrome = 'full', onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, removableVersionIds, onRemoveVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, pageBlocks, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedLinkUrls, viewportWidthOverride, blockOverlay, interactiveMode = true, onInteractiveChange }) {
     const { t } = useTranslation();
     const canvasAreaRef = useRef(null);
     const canvasIframeRef = useRef(null);
     const insertedRemovedRef = useRef(null);
     const insertedRestoredRef = useRef(null);
+    const historyShortcutRef = useRef(() => { });
+    const [reloadKey, setReloadKey] = useState(0);
     const editor = useInlineEditor({
+        reloadKey,
+        onHistoryShortcut: direction => historyShortcutRef.current(direction),
         onInsertedRemoved: selectors => insertedRemovedRef.current?.(selectors),
         onInsertedRestored: selectors => insertedRestoredRef.current?.(selectors),
         url,
@@ -68,7 +74,7 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         iframeRef: canvasIframeRef,
         renderNodeIcon
     });
-    const { selection, tree, clipboard, move, capturing, textEditing, geometry, changeList, commands, frameProps, domReady } = editor;
+    const { selection, tree, clipboard, move, capturing, textEditing, geometry, changeList, commands, frameProps, domReady, interactive } = editor;
     const selectAndReveal = useCallback(async (selector) => {
         await commands.select(selector);
         await commands.reveal(selector);
@@ -80,6 +86,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 +103,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 +198,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 || interactive)
+            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 +249,81 @@ 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 snapshotForRebuild = 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);
+    };
+    const changeDevice = (next) => {
+        if (next === device || switchingRef.current || interactive)
+            return;
+        switchingRef.current = true;
+        setSwitching(true);
+        void enqueue(async () => {
+            await snapshotForRebuild();
+            onDeviceChange(next);
+        })
+            .catch(error => setCommandError(describeCanvasError(error)))
+            .finally(() => {
+            switchingRef.current = false;
+            setSwitching(false);
+        });
+    };
+    const interactiveChangeRef = useRef(onInteractiveChange);
+    interactiveChangeRef.current = onInteractiveChange;
+    const canEnterInteractive = interactiveMode && domReady && !switching && !capturing && textEditing === null && !move;
+    const enterInteractive = () => {
+        if (!canEnterInteractive || switchingRef.current)
+            return;
+        setStylePanelOpen(false);
+        setShowChangeList(false);
+        setPasteDialog(false);
+        void enqueue(() => editor.setInteractive(true))
+            .then(() => interactiveChangeRef.current?.(true))
+            .catch(error => setCommandError(describeCanvasError(error)));
+    };
+    const exitInteractive = () => {
+        void enqueue(async () => {
+            const { navigated } = await editor.setInteractive(false);
+            interactiveChangeRef.current?.(false);
+            if (navigated) {
+                await snapshotForRebuild();
+                setReloadKey(n => n + 1);
+                return;
+            }
+            await changeListRef.current.reapplyAll();
+        }).catch(error => setCommandError(describeCanvasError(error)));
+    };
+    useEffect(() => {
+        if (!interactive)
+            return;
+        const onBeforeUnload = (event) => {
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        return () => window.removeEventListener('beforeunload', onBeforeUnload);
+    }, [interactive]);
+    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 +332,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 +773,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 +927,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 +968,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') {
@@ -862,13 +1030,13 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         }
     }, [clipboard, commands, depsOf, frameProps?.sessionId, selection, t, uploadImage]);
     const self = selection?.chain[0];
-    return (_jsxs("div", { className: `${CANVAS_UI_SCOPE} flex h-full min-h-0 flex-col bg-[#F5F7FC]`, children: [_jsx(EditorChrome, { slotRight: capturing ? (_jsx("span", { role: "status", className: "text-xs text-muted-foreground", children: t('inlineCanvas.review.generating', '正在生成截图…') })) : undefined, variant: chrome, title: title, versionLabel: versionLabel, versions: versions, activeVersionId: activeVersionId, versionSwitching: switching, onVersionChange: onVersionChange, canUndo: !switching && textEditing === null && changeList.canUndo, canRedo: !switching && textEditing === null && changeList.canRedo, onUndo: () => uiWrite(() => enqueue(() => changeListRef.current.undo())), onRedo: () => uiWrite(() => enqueue(() => changeListRef.current.redo())), changeCount: changeList.list.length, onExit: onExit, onSave: () => {
-                    if (switchingRef.current) {
-                        setCommandError(t('inlineCanvas.version.switching', '正在切换版本，请稍候'));
-                        return;
-                    }
-                    onSave?.(editor);
-                }, onAddVersion: onAddVersion, onRenameVersion: onRenameVersion, removableVersionIds: removableVersionIds, onRemoveVersion: onRemoveVersion, onPreview: onPreview, onToggleChangeList: () => setShowChangeList(v => !v), changeListOpen: showChangeList, onToggleAi: onToggleAi, aiOpen: aiOpen }), _jsxs("div", { className: "relative flex min-h-0 flex-1", children: [_jsxs(ResizablePanelGroup, { direction: "horizontal", autoSaveId: "inline-editor-panes-v2", className: "flex min-h-0 w-full flex-1", children: [showLeftPanel && (_jsxs(_Fragment, { children: [_jsx(ResizablePanel, { id: "left", order: 1, defaultSize: 18, minSize: 12, maxSize: 40, className: "flex min-h-0 flex-col", children: _jsxs("aside", { "data-testid": "inline-editor-left-panel", className: "inline-editor-left flex h-full min-h-0 flex-col bg-white", children: [!!libraryComponents && (_jsx("div", { className: "flex h-9 shrink-0 items-center gap-1 border-b\n                            border-[#EBECF0] px-2", children: [
+    return (_jsxs("div", { className: `${CANVAS_UI_SCOPE} flex h-full min-h-0 flex-col bg-[#F5F7FC]`, children: [_jsxs("div", { className: "relative shrink-0", children: [interactive && (_jsxs("div", { role: "status", "data-testid": "inline-editor-interactive-bar", className: "absolute inset-0 z-20 flex items-center justify-center gap-3\n                        border-b border-[#ececef] bg-white text-[13px] text-[#1a1a1a]\n                        shadow-[0_4px_12px_0_rgba(9,30,66,0.12)]", children: [_jsx("span", { children: t('inlineCanvas.interactive.active', '您当前正在交互模式') }), _jsx(Button, { size: "sm", variant: "secondary", "data-testid": "inline-editor-interactive-exit", onClick: exitInteractive, children: t('inlineCanvas.interactive.exit', '返回编辑模式') })] })), _jsx(EditorChrome, { slotRight: capturing ? (_jsx("span", { role: "status", className: "text-xs text-muted-foreground", children: t('inlineCanvas.review.generating', '正在生成截图…') })) : undefined, variant: chrome, title: title, versionLabel: versionLabel, versions: versions, activeVersionId: activeVersionId, versionSwitching: switching, onVersionChange: onVersionChange, canUndo: !switching && textEditing === null && changeList.canUndo, canRedo: !switching && textEditing === null && changeList.canRedo, onUndo: () => uiWrite(() => enqueue(() => changeListRef.current.undo())), onRedo: () => uiWrite(() => enqueue(() => changeListRef.current.redo())), changeCount: changeList.list.length, onExit: onExit, onSave: () => {
+                            if (switchingRef.current) {
+                                setCommandError(t('inlineCanvas.version.switching', '正在切换版本，请稍候'));
+                                return;
+                            }
+                            onSave?.(editor);
+                        }, onAddVersion: onAddVersion, onRenameVersion: onRenameVersion, removableVersionIds: removableVersionIds, onRemoveVersion: onRemoveVersion, onPreview: onPreview, onToggleChangeList: () => setShowChangeList(v => !v), changeListOpen: showChangeList, onToggleAi: onToggleAi, aiOpen: aiOpen })] }), _jsxs("div", { className: "relative flex min-h-0 flex-1", children: [_jsxs(ResizablePanelGroup, { direction: "horizontal", autoSaveId: "inline-editor-panes-v2", className: "flex min-h-0 w-full flex-1", children: [showLeftPanel && (_jsxs(_Fragment, { children: [_jsx(ResizablePanel, { id: "left", order: 1, defaultSize: 18, minSize: 12, maxSize: 40, className: "flex min-h-0 flex-col", children: _jsxs("aside", { "data-testid": "inline-editor-left-panel", className: "inline-editor-left relative flex h-full min-h-0 flex-col bg-white", children: [interactive && (_jsx("div", { "data-testid": "inline-editor-left-veil", className: "absolute inset-0 z-10 cursor-not-allowed bg-white/60" })), !!libraryComponents && (_jsx("div", { className: "flex h-9 shrink-0 items-center gap-1 border-b\n                            border-[#EBECF0] px-2", children: [
                                                         ['layers', '图层'],
                                                         ['assets', '组件']
                                                     ].map(([tab, label]) => (_jsx("button", { type: "button", "data-testid": `left-tab-${tab}`, "aria-pressed": leftTab === tab, onClick: () => setLeftTab(tab), className: `rounded px-2 py-1 text-[12px] ${leftTab === tab
@@ -879,23 +1047,48 @@ 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, deviceDisabled: interactive, interactive: interactiveMode
+                                                ? {
+                                                    active: interactive,
+                                                    disabled: !interactive && !canEnterInteractive,
+                                                    onToggle: () => interactive
+                                                        ? exitInteractive()
+                                                        : enterInteractive()
+                                                }
+                                                : undefined }), _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 && !interactive && (_jsx(SelectionOverlay, { geometry: geometry.latest, context: overlayContext, selectedLabel: self ? `<${self.tag}>` : undefined })), !capturing && !interactive && 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 && !interactive && 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 &&
+                }, children: "\u6B63\u5728\u7F16\u8F91\u6587\u5B57 \u00B7 \u56DE\u8F66\u63D0\u4EA4 \u00B7 Esc \u53D6\u6D88" })), !capturing && !interactive && !switching && !move && textEditing === null && (_jsx(SelectionToolbar, { selectedRect: selectedRect, area: area, capabilities: selection?.capabilities ?? null, isScrolling: geometry.isScrolling, onAction: onToolbarAction, host: { askAi: !!onAskAi } })), stylePanelOpen &&
+                !interactive &&
                 !switching &&
                 selectedRect &&
                 self &&
                 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/CanvasContextBar.d.ts

@@ -19,5 +19,18 @@ export interface CanvasContextBarProps {
     url: string;
     device: CanvasDevice;
     onDeviceChange: (device: CanvasDevice) => void;
+    /** 交互模式下切设备会重建画布、把用户点出来的页面状态整个丢掉，所以一并禁用。 */
+    deviceDisabled?: boolean;
+    /**
+     * 「交互模式」开关，靠右。不传 = 没有这个按钮。
+     *
+     * 放在画布条而不是顶栏：它改变的是**画布**的行为（点击交给页面），与设备切换同属
+     * 「我在怎么看这一页」；老编辑器也是挨着设备切换放的。
+     */
+    interactive?: {
+        active: boolean;
+        disabled?: boolean;
+        onToggle: () => void;
+    };
 }
-export declare function CanvasContextBar({ url, device, onDeviceChange }: CanvasContextBarProps): import("react").JSX.Element;
+export declare function CanvasContextBar({ url, device, onDeviceChange, deviceDisabled, interactive }: CanvasContextBarProps): import("react").JSX.Element;

package/dist/kernel/CanvasContextBar.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
-import { Link2, Monitor, Smartphone } from 'lucide-react';
-import { ChromeSegment, ChromeSegmented } from '../chrome/topbarPrimitives.js';
-export function CanvasContextBar({ url, device, onDeviceChange }) {
+import { Link2, Monitor, MousePointerClick, Smartphone } from 'lucide-react';
+import { ChromeSegment, ChromeSegmented, ChromeTextButton } from '../chrome/topbarPrimitives.js';
+export function CanvasContextBar({ url, device, onDeviceChange, deviceDisabled, interactive }) {
     const { t } = useTranslation();
     const items = [
         ['pc', Monitor, t('inlineCanvas.chrome.pc', 'PC')],
         ['mobile', Smartphone, t('inlineCanvas.chrome.mobile', '移动')]
     ];
-    return (_jsxs("div", { "data-testid": "canvas-context-bar", className: "relative flex h-9 shrink-0 items-center border-b border-[#EBECF0]\n                bg-white px-3", children: [url && (_jsxs("a", { "data-testid": "canvas-context-url", href: url, target: "_blank", rel: "noopener noreferrer", title: url, className: "flex max-w-[calc(50%-60px)] items-center gap-1.5 truncate text-xs\n                        text-[#8a8f98] hover:text-[#52525b] hover:underline", children: [_jsx(Link2, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: url })] })), _jsx(ChromeSegmented, { "data-testid": "device-switch", className: "absolute left-1/2 -translate-x-1/2", children: items.map(([value, Icon, label]) => (_jsxs(ChromeSegment, { "data-testid": `device-${value}`, active: device === value, onClick: () => onDeviceChange(value), children: [_jsx(Icon, { className: "size-3.5" }), label] }, value))) })] }));
+    return (_jsxs("div", { "data-testid": "canvas-context-bar", className: "relative flex h-9 shrink-0 items-center border-b border-[#EBECF0]\n                bg-white px-3", children: [url && (_jsxs("a", { "data-testid": "canvas-context-url", href: url, target: "_blank", rel: "noopener noreferrer", title: url, className: "flex max-w-[calc(50%-60px)] items-center gap-1.5 truncate text-xs\n                        text-[#8a8f98] hover:text-[#52525b] hover:underline", children: [_jsx(Link2, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: url })] })), _jsx(ChromeSegmented, { "data-testid": "device-switch", className: "absolute left-1/2 -translate-x-1/2", children: items.map(([value, Icon, label]) => (_jsxs(ChromeSegment, { "data-testid": `device-${value}`, active: device === value, disabled: deviceDisabled, onClick: () => onDeviceChange(value), children: [_jsx(Icon, { className: "size-3.5" }), label] }, value))) }), interactive && (_jsxs(ChromeTextButton, { "data-testid": "canvas-interactive-toggle", className: "ml-auto h-7 gap-1.5 px-2 text-xs", active: interactive.active, disabled: interactive.disabled, title: t('inlineCanvas.interactive.tips', '切换到交互模式可以对页面进行交互，以修改需要交互后才能看到的内容。'), onClick: interactive.onToggle, children: [_jsx(MousePointerClick, { className: "size-3.5" }), interactive.active
+                        ? t('inlineCanvas.interactive.exit', '返回编辑模式')
+                        : t('inlineCanvas.interactive.enter', '交互模式')] }))] }));
 }

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,9 @@ export interface UseChangeListResult {
         outcome: HydrateOutcome;
         idMap: Map<string, string>;
     }>;
+    /** 当前清单原样重放（changeId 不变、不进撤销历史）。交互模式退出时用。 */
+    reapplyAll: () => Promise<void>;
+    whenIdle: () => Promise<unknown>;
     canUndo: boolean;
     canRedo: boolean;
     undo: () => Promise<void>;

package/dist/kernel/changelist/useChangeList.js

@@ -174,6 +174,7 @@ export function useChangeList(sessionId, options = {}) {
         target.push(entry);
         refreshHistory(n => n + 1);
     }, false), [guard, restoreSnapshot]);
+    const reapplyAll = useCallback(() => guard(() => restoreSnapshot(listRef.current), false), [guard, restoreSnapshot]);
     const undo = useCallback(() => travelHistory('undo'), [travelHistory]);
     const redo = useCallback(() => travelHistory('redo'), [travelHistory]);
     const addStyle = useCallback((input) => guard(() => push(buildStyleChange(input), input.ancestors)), [guard, push]);
@@ -249,6 +250,8 @@ export function useChangeList(sessionId, options = {}) {
         clear,
         hydrate,
         replaceAll,
+        reapplyAll,
+        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）。