@ptengine/inline-editor 0.1.5 → 0.1.6

package/dist/kernel/blocks/BlockOverlay.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { frameRectToProductRect } from '../selection/geometry.js';
-const Z_INDEX = 2147482990;
+const Z_INDEX = 890;
 const CHIP_HEIGHT = 18;
 const COLORS = { base: '#1D4ED8', active: '#DB2777', none: '#94A3B8' };
 function boxStyle(rect, color, active, none) {

package/dist/kernel/blocks/resolveBlocks.d.ts

@@ -1,4 +1,5 @@
 import type { DomTreeNode, ElementsInBandResult, GetDomTreeParams, ResolveHeatmapSelectorResult } from '@ptengine/inline-core/protocol';
+import { type RowPosition } from '../selection/rowLayout.js';
 /**
  * 分析画布：把热图的**区块配置**（MySQL 里那份，apps/x 读来）画到客户活页面上，
  * 并给每块找一个锚点元素 + 一份 AI 能读的摘要（标题 / 文案 / CTA）。
@@ -24,6 +25,11 @@ import type { DomTreeNode, ElementsInBandResult, GetDomTreeParams, ResolveHeatma
  * 3. **none** —— 都没有：members 空。区块框照画（位置本来就来自配置，一样准），
  *    只是点不进任何元素、也没有 selector 可以交给 agent。
  *
+ * 三条路定下成员之后，**成员上提到块根**（`liftToBlockRoots`）：轮播的一张、并列的一列、区块里的一个小节点，
+ * 提到「只装着这一块的最外层容器」—— 与编辑器整页货架打 `[Bn]` 的那一行是同一个元素（同一份判定、同一份
+ * 取树口径）。真机 vivaia.jp 首页（2026-10-21）：B1 的成员是轮播第 1 张，`<page-block>` 的成员行与方案锚点
+ * 照抄它，首版 after 它把「首屏下方」的新模块插进了轮播。摘要（heading / text / cta / links）按上提后的成员取。
+ *
  * 编号 `B1..Bn` 按输入的 `yStart` 升序，与模型看到的瓦片标注一致（`annotateAndTile`）。
  *
  * 三条跨域命令经 `deps` 注入：编排逻辑不需要插件也不需要浏览器就能测。任何一条失败都
@@ -46,6 +52,11 @@ export interface PageModelBlockMember {
     /** 该 member 子树的文案摘要（折叠空白、≤80）。拉树失败为空串。 */
     text: string;
     hasChildren: boolean;
+    /**
+     * 它在父级横排里的位次（整页树上判，与整页货架行的 `inRow` 同一份）。`<page-block>` 的成员行据此打
+     * `[横排 i/n]`：成员行的父级不在它自己的子树里，只能从整页树带过来。不在横排里 / 判不了时不写这个键。
+     */
+    inRow?: RowPosition;
 }
 export interface PageModelBlock {
     /** `'B1'`,`'B2'`… 按 `yStart` 升序。 */
@@ -142,6 +153,11 @@ export interface ResolveBlocksOptions {
      * 三处共用这套坐标，由各自的消费者在画的时候乘比例。
      */
     scale?: number;
+    /**
+     * 画布视口宽（mobile 375 / pc 1440）。成员上提的块根判据按它算「够宽」门槛，与编辑器整页货架传的是
+     * 同一个数；缺省按 375（与 `buildRootShelf` 的缺省一致）。
+     */
+    viewportWidth?: number;
 }
 export declare function resolveBlocks(sessionId: string, blocks: HeatmapBlockConfig[], deps?: ResolveBlocksDeps, opts?: ResolveBlocksOptions): Promise<PageModelBlock[]>;
 /**

package/dist/kernel/blocks/resolveBlocks.js

@@ -1,6 +1,8 @@
 import { elementsInBand as elementsInBandCommand, getDomTree as getDomTreeCommand, resolveHeatmapSelector as resolveHeatmapSelectorCommand } from '../canvasCommands.js';
 import { linkPath } from '../linkHref.js';
+import { ROOT_SHELF_TREE_PARAMS, liftToBlockRoots } from '../selection/buildRootShelf.js';
 import { SHELF_TREE_MAX_DEPTH } from '../selection/elementAiContext.js';
+import { rowPositions } from '../selection/rowLayout.js';
 const defaultDeps = {
     resolveHeatmapSelector: resolveHeatmapSelectorCommand,
     elementsInBand: elementsInBandCommand,
@@ -104,7 +106,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
         catch {
         }
     }
-    const out = [];
+    const located = [];
     for (let i = 0; i < ordered.length; i++) {
         const cfg = ordered[i];
         const base = { id: idOf(i), name: cfg.name };
@@ -120,7 +122,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
             hits.push({ selector: m.kernelSelector, tag: m.tag ?? '', rect: m.rect });
         }
         if (hits.length > 0) {
-            out.push(await enrich(sessionId, deps, {
+            located.push({
                 ...base,
                 ...geometryOf(cfg),
                 members: hits.map(h => ({
@@ -132,7 +134,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
                 ctas: [],
                 text: '',
                 resolved: 'selector'
-            }));
+            });
             continue;
         }
         let candidate = null;
@@ -147,7 +149,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
             candidate = null;
         }
         if (candidate) {
-            out.push(await enrich(sessionId, deps, {
+            located.push({
                 ...base,
                 ...geometryOf(cfg),
                 members: [
@@ -162,10 +164,10 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
                 text: '',
                 resolved: 'geometry',
                 iou: candidate.iou
-            }));
+            });
             continue;
         }
-        out.push({
+        located.push({
             ...base,
             ...geometryOf(cfg),
             members: [],
@@ -174,8 +176,39 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
             resolved: 'none'
         });
     }
+    const lifted = await liftMembers(sessionId, deps, located, opts.viewportWidth);
+    const out = [];
+    for (const b of lifted)
+        out.push(b.members.length ? await enrich(sessionId, deps, b) : b);
     return out;
 }
+async function liftMembers(sessionId, deps, blocks, viewportWidth) {
+    if (!blocks.some(b => b.members.length))
+        return blocks;
+    try {
+        const tree = await deps.getDomTree(sessionId, ROOT_SHELF_TREE_PARAMS);
+        const liftOf = liftToBlockRoots(tree, { viewportWidth, blocks });
+        const inRowOf = rowPositions(tree);
+        return blocks.map(b => {
+            if (!b.members.length)
+                return b;
+            const byMember = liftOf.get(b.id);
+            const members = [];
+            for (const m of b.members) {
+                const root = byMember?.get(m.selector);
+                const next = root ? { ...m, selector: root.selector, tag: root.tag } : m;
+                if (members.some(x => x.selector === next.selector))
+                    continue;
+                const inRow = inRowOf.get(next.selector);
+                members.push(inRow ? { ...next, inRow } : next);
+            }
+            return { ...b, members };
+        });
+    }
+    catch {
+        return blocks;
+    }
+}
 export function isAutoGeneratedBlockName(name) {
     const n = name.trim();
     if (!n)

package/dist/kernel/changelist/ChangeListPanel.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { toWireFormat } from '@ptengine/inline-core/change-format';
-import { Code2, Crosshair, EyeOff, Image, Link2, Move, Plus, Trash2, Type, Undo2, Wand } from 'lucide-react';
+import { Code2, Crosshair, EyeOff, Image, Link2, Move, Plus, Trash2, Type, Undo2, Paintbrush } from 'lucide-react';
 import { Button } from '@ptengine/design-components';
 import { summarizeChange } from './changeSummary.js';
 import { classifySuppression } from './mergeForSave.js';
 const ICONS = {
-    style: Wand,
+    style: Paintbrush,
     delete: Trash2,
     text: Type,
     code: Code2,
@@ -16,19 +16,21 @@ const ICONS = {
     insert: Plus
 };
 export function ChangeListPanel({ list, onRevert, lastError, onHover, onSelect, onRevertAll }) {
+    const [confirmRevert, setConfirmRevert] = useState(false);
     const [view, setView] = useState('summary');
     const entries = useMemo(() => list.map(r => ({ change: r.change, ancestors: r.ancestors })), [list]);
     const json = useMemo(() => JSON.stringify(list.map(r => toWireFormat(r.change)), null, 2), [list]);
-    return (_jsxs("section", { "data-testid": "change-list-panel", className: "flex min-h-0 flex-1 flex-col", onMouseLeave: () => onHover?.(''), children: [_jsxs("header", { className: "flex h-10 shrink-0 items-center justify-between gap-2 border-b\n                border-[#f1f2f3] pl-3 pr-2", children: [_jsxs("span", { className: "truncate text-[13px] font-medium text-[#1a1a1a]", children: ["\u6539\u52A8\u6E05\u5355", _jsx("span", { "data-testid": "change-list-count", className: "ml-1.5 text-xs font-normal tabular-nums text-[#8a8f98]", children: list.length })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("div", { className: "flex items-center gap-px rounded-md bg-[#f3f4f4] p-0.5", children: [
+    return (_jsxs("section", { "data-testid": "change-list-panel", className: "flex min-h-0 flex-1 flex-col", onMouseLeave: () => onHover?.(''), children: [confirmRevert && (_jsxs("div", { role: "alert", className: "border-b p-3 text-xs", children: ["\u786E\u5B9A\u64A4\u9500\u6B64\u7248\u672C\u7684\u5168\u90E8\u6539\u52A8\uFF1F", _jsxs("div", { className: "mt-2 flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setConfirmRevert(false), children: "\u53D6\u6D88" }), _jsx(Button, { size: "sm", variant: "destructive", onClick: () => {
+                                    setConfirmRevert(false);
+                                    onRevertAll?.();
+                                }, children: "\u64A4\u9500\u5168\u90E8\u6539\u52A8" })] })] })), _jsxs("header", { className: "flex h-10 shrink-0 items-center justify-between gap-2 border-b\n                border-[#f1f2f3] pl-3 pr-2", children: [_jsxs("span", { className: "truncate text-[13px] font-medium text-[#1a1a1a]", children: ["\u6539\u52A8\u6E05\u5355", _jsx("span", { "data-testid": "change-list-count", className: "ml-1.5 text-xs font-normal tabular-nums text-[#8a8f98]", children: list.length })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("div", { className: "flex items-center gap-px rounded-md bg-[#f3f4f4] p-0.5", children: [
                                     ['summary', '摘要', undefined],
                                     [
                                         'wire',
-                                        '数值',
-                                        '落盘形态，可与线上存量数据逐字段比对'
+                                        '高级数据',
+                                        '查看此版本的高级修改数据'
                                     ]
-                                ].map(([v, label, hint]) => (_jsx("button", { type: "button", "data-testid": `change-list-view-${v}`, "aria-pressed": view === v, title: hint, onClick: () => setView(v), className: `rounded px-2 py-[3px] text-[11px] transition-colors ${view === v
-                                        ? 'bg-white font-medium text-[rgba(16,28,31,0.9)] shadow-[0_1px_2px_rgba(16,28,31,0.08)]'
-                                        : 'text-[#707779] hover:text-[rgba(16,28,31,0.7)]'}`, children: label }, v))) }), onRevertAll && list.length > 0 && (_jsx("button", { type: "button", "data-testid": "change-list-revert-all", onClick: onRevertAll, className: "rounded px-2 py-1 text-xs text-[#52525b] transition-colors\n                                hover:bg-[rgba(16,28,31,0.06)] hover:text-[rgba(16,28,31,0.9)]", children: "\u5168\u90E8\u64A4\u9500" }))] })] }), lastError && (_jsx("p", { "data-testid": "change-list-error", className: "px-3 py-2 text-xs text-[#DE350B]", children: lastError })), list.length === 0 ? (_jsx("p", { "data-testid": "change-list-empty", className: "px-3 py-8 text-center text-xs text-[#8a8f98]", children: "\u8FD8\u6CA1\u6709\u6539\u52A8\u3002\u5728\u753B\u5E03\u91CC\u9009\u4E2D\u5143\u7D20\u5F00\u59CB\u7F16\u8F91\u3002" })) : view === 'summary' ? (_jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto", children: list.map((record, index) => (_jsx(ChangeRow, { record: record, summary: summarizeChange(record.change), suppression: classifySuppression(entries, index), onRevert: onRevert, onHover: onHover, onSelect: onSelect }, record.changeId))) })) : (_jsx("pre", { "data-testid": "change-list-json", className: "min-h-0 flex-1 overflow-auto bg-[#FAFAFA] px-3 py-2 text-[11px]\n                        leading-4 text-[#344563]", children: json }))] }));
+                                ].map(([v, label, hint]) => (_jsx(Button, { type: "button", "data-testid": `change-list-view-${v}`, "aria-pressed": view === v, title: hint, onClick: () => setView(v), size: "sm", variant: view === v ? 'secondary' : 'ghost', children: label }, v))) }), onRevertAll && list.length > 0 && (_jsx(Button, { type: "button", "data-testid": "change-list-revert-all", onClick: () => setConfirmRevert(true), size: "sm", variant: "ghost", children: "\u5168\u90E8\u64A4\u9500" }))] })] }), lastError && (_jsx("p", { "data-testid": "change-list-error", className: "px-3 py-2 text-xs text-[#DE350B]", children: lastError })), list.length === 0 ? (_jsx("p", { "data-testid": "change-list-empty", className: "px-3 py-8 text-center text-xs text-[#8a8f98]", children: "\u8FD8\u6CA1\u6709\u6539\u52A8\u3002\u5728\u753B\u5E03\u91CC\u9009\u4E2D\u5143\u7D20\u5F00\u59CB\u7F16\u8F91\u3002" })) : view === 'summary' ? (_jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto", children: list.map((record, index) => (_jsx(ChangeRow, { record: record, summary: summarizeChange(record.change), suppression: classifySuppression(entries, index), onRevert: onRevert, onHover: onHover, onSelect: onSelect }, record.changeId))) })) : (_jsx("pre", { "data-testid": "change-list-json", className: "min-h-0 flex-1 overflow-auto bg-[#FAFAFA] px-3 py-2 text-[11px]\n                        leading-4 text-[#344563]", children: json }))] }));
 }
 const SUPPRESSION_TEXT = {
     'ancestor-hidden': {
@@ -43,5 +45,5 @@ const SUPPRESSION_TEXT = {
 function ChangeRow({ record, summary, suppression, onRevert, onHover, onSelect }) {
     const Icon = ICONS[summary.icon];
     const text = suppression ? SUPPRESSION_TEXT[suppression.reason] : null;
-    return (_jsxs("li", { "data-testid": "change-list-item", "data-suppressed": suppression ? suppression.reason : undefined, className: "group flex items-center gap-2.5 border-b border-[#f1f2f3] px-3 py-2.5\n                last:border-b-0 hover:bg-[rgba(16,28,31,0.04)]", onMouseEnter: () => onHover?.(summary.selector), children: [_jsx(Icon, { className: `size-4 shrink-0 ${suppression ? 'text-[#B3BAC5]' : 'text-[#6B778C]'}` }), _jsxs("button", { type: "button", "data-testid": "change-list-locate", onClick: () => onSelect?.(summary.selector), className: "flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left", title: summary.selector, children: [_jsxs("span", { className: `flex items-center gap-1.5 text-[13px] font-medium ${suppression ? 'text-[#8993A4]' : 'text-[#1a1a1a]'}`, children: [summary.action, onSelect && (_jsx(Crosshair, { className: "size-3 text-[#8993A4] opacity-0 group-hover:opacity-100" }))] }), text && (_jsxs("span", { "data-testid": "change-list-suppressed-badge", className: "flex items-center gap-1 rounded bg-[#FFF7E6] px-1.5 py-0.5\n                            text-[11px] leading-4 text-[#974F0C]", title: `${text.hint}（${suppression?.by}）`, children: [_jsx(EyeOff, { className: "size-3 shrink-0" }), text.badge] })), summary.detail && (_jsx("span", { className: `w-full truncate font-mono text-[11px] ${suppression ? 'text-[#8993A4] line-through' : 'text-[#344563]'}`, children: summary.detail })), _jsx("span", { className: "w-full truncate font-mono text-[11px] text-[#8993A4]", children: summary.selector })] }), _jsx(Button, { variant: "ghost", size: "icon", "data-testid": `change-list-revert-${record.changeId}`, "aria-label": "\u64A4\u9500", onClick: () => onRevert(record.changeId), children: _jsx(Undo2, { className: "size-4" }) })] }));
+    return (_jsxs("li", { "data-testid": "change-list-item", "data-suppressed": suppression ? suppression.reason : undefined, className: "group flex items-center gap-2.5 border-b border-[#f1f2f3] px-3 py-2.5\n                last:border-b-0 hover:bg-[rgba(16,28,31,0.04)]", onMouseEnter: () => onHover?.(summary.selector), children: [_jsx(Icon, { className: `size-4 shrink-0 ${suppression ? 'text-[#B3BAC5]' : 'text-[#6B778C]'}` }), _jsxs(Button, { type: "button", variant: "ghost", "data-testid": "change-list-locate", onClick: () => onSelect?.(summary.selector), className: "flex h-auto min-h-8 min-w-0 flex-1 flex-col items-start justify-start gap-0.5 whitespace-normal py-2 text-left", title: summary.selector, children: [_jsxs("span", { className: `flex items-center gap-1.5 text-[13px] font-medium ${suppression ? 'text-[#8993A4]' : 'text-[#1a1a1a]'}`, children: [summary.action, onSelect && (_jsx(Crosshair, { className: "size-3 text-[#8993A4] opacity-0 group-hover:opacity-100" }))] }), text && (_jsxs("span", { "data-testid": "change-list-suppressed-badge", className: "flex items-center gap-1 rounded bg-[#FFF7E6] px-1.5 py-0.5\n                            text-[11px] leading-4 text-[#974F0C]", title: `${text.hint}（${suppression?.by}）`, children: [_jsx(EyeOff, { className: "size-3 shrink-0" }), text.badge] })), summary.detail && (_jsx("span", { className: `w-full truncate font-mono text-[11px] ${suppression ? 'text-[#8993A4] line-through' : 'text-[#344563]'}`, children: summary.detail })), _jsx("span", { className: "w-full truncate font-mono text-[11px] text-[#8993A4]", children: summary.selector })] }), _jsx(Button, { variant: "ghost", size: "icon", "data-testid": `change-list-revert-${record.changeId}`, "aria-label": "\u64A4\u9500", onClick: () => onRevert(record.changeId), children: _jsx(Undo2, { className: "size-4" }) })] }));
 }

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

@@ -82,6 +82,10 @@ export interface UseChangeListResult {
         outcome: HydrateOutcome;
         idMap: Map<string, string>;
     }>;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
     lastError: string | null;
 }
 export interface HydrateOutcome {

package/dist/kernel/changelist/useChangeList.js

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { applyChange, revertChange } from '../canvasCommands.js';
 import { overrideOutcome } from './overrides.js';
 import { backgroundImageValue, buildInsertImageHtml, randomPtElementId } from '../../dialogs/imageEdit.js';
@@ -16,6 +16,16 @@ function withResolvedStyleMode(change, applied) {
 }
 export function useChangeList(sessionId, options = {}) {
     const [list, setList] = useState([]);
+    const past = useRef([]);
+    const future = useRef([]);
+    const [, refreshHistory] = useState(0);
+    const resetHistory = useCallback(() => {
+        past.current = [];
+        future.current = [];
+        refreshHistory(n => n + 1);
+    }, []);
+    useEffect(resetHistory, [sessionId, resetHistory]);
+    const mutationQueue = useRef(Promise.resolve());
     const [lastError, setLastError] = useState(null);
     const listRef = useRef([]);
     listRef.current = list;
@@ -50,7 +60,9 @@ export function useChangeList(sessionId, options = {}) {
         const stored = withResolvedStyleMode(change, applied);
         const ancestorsByChange = new Map(prev.map(r => [r.change, r.ancestors]));
         const insertedByChange = new Map(prev.map(r => [r.change, r.insertedSelectors]));
-        const insertedNow = applied.insertedSelectors?.length ? applied.insertedSelectors : undefined;
+        const insertedNow = applied.insertedSelectors?.length
+            ? applied.insertedSelectors
+            : undefined;
         const nextRecords = nextChanges.map(c => {
             const inserted = c === change ? insertedNow : insertedByChange.get(c);
             return {
@@ -99,15 +111,71 @@ export function useChangeList(sessionId, options = {}) {
         reportRestored(records);
         return { applied: records.length - failed.length, failed };
     }, [sessionId, reportRestored]);
-    const guard = useCallback(async (run) => {
+    const guard = useCallback((run, record = true) => {
+        const next = mutationQueue.current.then(async () => {
+            const before = listRef.current;
+            try {
+                const result = await run();
+                if (record && before !== listRef.current) {
+                    past.current.push({ before, after: listRef.current });
+                    future.current = [];
+                    refreshHistory(n => n + 1);
+                }
+                setLastError(null);
+                return result;
+            }
+            catch (e) {
+                setLastError(String(e?.message ?? e));
+                throw e;
+            }
+        });
+        mutationQueue.current = next.catch(() => { });
+        return next;
+    }, []);
+    const restoreSnapshot = useCallback(async (snapshot) => {
+        if (!sessionId)
+            throw new Error('no canvas session');
+        const current = listRef.current;
+        for (const record of [...current].reverse()) {
+            await revertChange(sessionId, record.changeId).catch(() => { });
+        }
+        reportRemoved(current);
+        listRef.current = [];
+        setList([]);
+        for (const record of snapshot) {
+            const applied = await applyChange(sessionId, record.changeId, record.change);
+            const restored = {
+                ...record,
+                change: withResolvedStyleMode(record.change, applied),
+                ...(applied?.insertedSelectors?.length
+                    ? { insertedSelectors: applied.insertedSelectors }
+                    : {})
+            };
+            listRef.current = [...listRef.current, restored];
+            setList(listRef.current);
+            reportRestored([restored]);
+        }
+    }, [sessionId, reportRemoved, reportRestored]);
+    const travelHistory = useCallback((direction) => guard(async () => {
+        const source = direction === 'undo' ? past.current : future.current;
+        const target = direction === 'undo' ? future.current : past.current;
+        const entry = source.at(-1);
+        if (!entry)
+            return;
+        const current = listRef.current;
         try {
-            return await run();
+            await restoreSnapshot(direction === 'undo' ? entry.before : entry.after);
         }
-        catch (e) {
-            setLastError(String(e?.message ?? e));
-            throw e;
+        catch (error) {
+            await restoreSnapshot(current);
+            throw error;
         }
-    }, []);
+        source.pop();
+        target.push(entry);
+        refreshHistory(n => n + 1);
+    }, 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]);
     const addContent = useCallback((input) => guard(() => push(buildContentChange(input), input.ancestors)), [guard, push]);
     const addAttribute = useCallback((input) => guard(() => push(buildAttributeChange(input), input.ancestors)), [guard, push]);
@@ -158,14 +226,16 @@ export function useChangeList(sessionId, options = {}) {
                     idMap.set(old, nextRecords[i].changeId);
             }
         }
+        resetHistory();
         return { previous, outcome, idMap };
-    }, [hydrate, revertAll, sessionId]);
+    }, [hydrate, revertAll, sessionId, resetHistory]);
     const peekList = useCallback(() => listRef.current, []);
     const clear = useCallback(() => {
+        resetHistory();
         listRef.current = [];
         setList([]);
         setLastError(null);
-    }, []);
+    }, [resetHistory]);
     return {
         list,
         changes: list.map(r => r.change),
@@ -180,6 +250,10 @@ export function useChangeList(sessionId, options = {}) {
         hydrate,
         replaceAll,
         peekList,
+        canUndo: past.current.length > 0,
+        canRedo: future.current.length > 0,
+        undo,
+        redo,
         lastError
     };
 }

package/dist/kernel/selection/SelectionOverlay.js

@@ -9,7 +9,7 @@ function rectStyle(rect) {
         width: `${rect.width}px`,
         height: `${rect.height}px`,
         boxSizing: 'border-box',
-        zIndex: 2147483000
+        zIndex: 900
     };
 }
 export function SelectionOverlay({ geometry, context, selectedLabel }) {

package/dist/kernel/selection/SelectionToolbar.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Camera, ClipboardPaste, Code, Copy, ImageIcon, MousePointerClick, Move, Paintbrush, Pencil, Plus, Settings2, Sparkles, Trash2, Video } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@ptengine/design-components';
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@ptengine/design-components';
 import { SELECTION_CLASS } from '../../canvas-ui/index.js';
 import { visibleButtons } from './toolbarButtons.js';
 const TOOLBAR_HEIGHT = 34;
@@ -23,7 +23,7 @@ const TOOLBAR_ICONS = {
     delete: Trash2,
     sparkles: Sparkles
 };
-const ICON_SIZE = 15;
+const ICON_SIZE = 16;
 const ICON_STROKE_WIDTH = 1.75;
 const TOOLTIP_DELAY = 200;
 export function computeToolbarPosition(rect, area, width) {
@@ -51,6 +51,7 @@ export function computeToolbarPosition(rect, area, width) {
 export function SelectionToolbar({ host = {}, selectedRect, area, capabilities, isScrolling, onAction, width = 240 }) {
     const { t } = useTranslation();
     const barRef = useRef(null);
+    const [focusIndex, setFocusIndex] = useState(0);
     const [measuredWidth, setMeasuredWidth] = useState(null);
     useLayoutEffect(() => {
         const measured = barRef.current?.offsetWidth ?? 0;
@@ -63,20 +64,37 @@ export function SelectionToolbar({ host = {}, selectedRect, area, capabilities,
     if (buttons.length === 0)
         return null;
     const { left, top } = computeToolbarPosition(selectedRect, area, measuredWidth ?? width);
-    return (_jsx("div", { ref: barRef, "data-testid": "canvas-selection-toolbar", className: SELECTION_CLASS.toolbar, style: {
+    return (_jsx("div", { ref: barRef, role: "toolbar", "aria-label": t('inlineCanvas.toolbar.label', '元素操作'), onKeyDown: e => {
+            const items = Array.from(barRef.current?.querySelectorAll('button:not(:disabled)') ??
+                []);
+            const current = items.indexOf(document.activeElement);
+            let next = current;
+            if (e.key === 'ArrowRight')
+                next = (current + 1) % items.length;
+            else if (e.key === 'ArrowLeft')
+                next = (current - 1 + items.length) % items.length;
+            else if (e.key === 'Home')
+                next = 0;
+            else if (e.key === 'End')
+                next = items.length - 1;
+            else
+                return;
+            e.preventDefault();
+            setFocusIndex(next);
+            items[next]?.focus();
+        }, "data-testid": "canvas-selection-toolbar", className: SELECTION_CLASS.toolbar, style: {
             position: 'fixed',
             left: `${left}px`,
             top: `${top}px`,
             transform: 'none',
-            zIndex: 2147483001
-        }, children: _jsx(TooltipProvider, { delayDuration: TOOLTIP_DELAY, children: buttons.map(button => {
+            zIndex: 901
+        }, children: _jsx(TooltipProvider, { delayDuration: TOOLTIP_DELAY, children: buttons.map((button, index) => {
                 const label = t(button.labelKey);
                 const Icon = TOOLBAR_ICONS[button.icon];
                 const isAi = button.id === 'ask-ai';
-                const className = `${SELECTION_CLASS.tool}${button.id === 'delete' ? ` ${SELECTION_CLASS.toolDanger}` : ''}${isAi ? ` ${SELECTION_CLASS.toolAi}` : ''}`;
                 if (isAi) {
-                    return (_jsxs("button", { type: "button", "data-testid": `canvas-toolbar-${button.id}`, className: className, onClick: () => onAction(button.id), children: ["\u2726 ", label] }, button.id));
+                    return (_jsxs(Button, { type: "button", "data-testid": `canvas-toolbar-${button.id}`, size: isAi ? 'sm' : 'icon-sm', variant: button.id === 'delete' ? 'destructive' : 'ghost', tabIndex: index === Math.min(focusIndex, buttons.length - 1) ? 0 : -1, onClick: () => onAction(button.id), children: ["\u2726 ", label] }, button.id));
                 }
-                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-testid": `canvas-toolbar-${button.id}`, "aria-label": label, className: className, onClick: () => onAction(button.id), children: _jsx(Icon, { size: ICON_SIZE, strokeWidth: ICON_STROKE_WIDTH, "aria-hidden": true }) }) }), _jsx(TooltipContent, { className: "z-[2147483003]", children: label })] }, button.id));
+                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", "data-testid": `canvas-toolbar-${button.id}`, "aria-label": label, size: isAi ? 'sm' : 'icon-sm', variant: button.id === 'delete' ? 'destructive' : 'ghost', tabIndex: index === Math.min(focusIndex, buttons.length - 1) ? 0 : -1, onClick: () => onAction(button.id), children: _jsx(Icon, { size: ICON_SIZE, strokeWidth: ICON_STROKE_WIDTH, "aria-hidden": true }) }) }), _jsx(TooltipContent, { children: label })] }, button.id));
             }) }) }));
 }

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

@@ -7,7 +7,18 @@
  *
  * 这里改成按**几何**挑区块：新 agent 的树带 `rect`（文档坐标）/ `hidden` / `heading`
  * （`getDomTree` 的 `includeRect` / `visibleOnly`），于是能先找出「够高、够宽」的可见区块，
- * 每块给 1 行容器 + 最多几行可改点，header/nav/footer 各封顶，隐藏节点一律不给。
+ * 每块给 1 行容器 + 几行可改点，header/nav/footer 各封顶，隐藏节点一律不给。
+ *
+ * **哪一层算「一个区块」**（2026-10-21 重写）：`after` X 落在 X 的父级里，按父级怎么排孩子
+ * 摆放。「X 下面插入」要落在 X 正下方，X 的父级就得是**上下堆叠区块**的那一层 —— 所以块根 =
+ * 「只装着这一个区块的最外层容器」：
+ *   · 父级横排（轮播的每一张、并列的列）里的大项不单独成块，连同子树归外层；
+ *   · 装着 ≥2 个候选区块 = 外壳，拆开；只装着 1 个 = 它自己就是这一块（外层赢，小圆点、
+ *     进度条这些附属部件都在最外层里），但占页高 ≥60% 的单链节点是整页的框，让给内层；
+ *   · 宿主给了页面模型（`blocks`）时，成员归属校正拆合，并在块根行写 `blockId`。
+ * 旧规则「内层有 heading 就赢」不可用：kit 的 `heading` 是**子树里**第一个标题（没有就取第一段
+ * 文字），section / 轮播轨道 / 每张幻灯片拿到的是同一句，规则又偏向内层 —— 真机 vivaia 首页的
+ * 首屏只剩三张幻灯片，模型照「首屏下面」插进了轮播（2026-10-20）。
  *
  * **兼容**：树上一个 `rect` 都没有 = 老 agent，整个函数退化成老算法，逐项一致。
  *
@@ -15,11 +26,47 @@
  * 里的项。MOVE 闸靠这张表判 target 是不是被移元素的祖先，两边一旦漂移就是「同一个
  * selector 有时能移有时不能，且不报错」（见 buildDescendantShelf 头部说明）。
  */
-import type { DomTreeNode } from '@ptengine/inline-core/protocol';
+import type { DomTreeNode, GetDomTreeParams } from '@ptengine/inline-core/protocol';
 import { type AiDescendant } from './elementAiContext.js';
+/**
+ * 整页货架取树的口径（`getDomTree`，以 body 为根）。编辑器的整页货架与分析路径的成员上提（`resolveBlocks`）
+ * 用**同一份**：块根判据吃的是几何与排法，两边取的树不一样，认出来的块根就可能不一样。
+ *
+ * 树要**深、宽、带几何**：真实站点的内容区块常在 `body > #root > .page > main > div > div > section`
+ * 第 6-7 层，`maxDepth: 4` 根本到不了；`visibleOnly` 把抽屉 / 隐藏菜单整棵剔掉（它们此前把货架吃光），
+ * `includeRect` 给块根判据按高度 / 宽度挑区块用。`maxNodes` 是总量安全阀（1500 个节点的 JSON 仍在一次
+ * sendMessage 的舒适范围内）。老 agent 不认识这几个字段会静默忽略 —— 树上就没有 `rect`，退回老算法。
+ */
+export declare const ROOT_SHELF_TREE_PARAMS: Readonly<Omit<GetDomTreeParams, 'command' | 'sessionId'>>;
+/**
+ * 页面模型的一个区块（热图区块配置解析出来的），只要 id 与成员容器的 selector。
+ * 与宿主的 `PageModelBlock` / `InlinePageBlock` 结构兼容，宿主原样传进来即可。
+ */
+export interface ShelfBlockHint {
+    id: string;
+    members: ReadonlyArray<{
+        selector: string;
+    }>;
+}
+/**
+ * 页面模型的成员 → 它所在的块根：整页货架上写着这个区块 `blockId` 的那一行（同一份判定）。
+ * 返回 区块 id → 成员 selector → 块根节点（输入树上的那个节点）。
+ *
+ * 分析路径（`resolveBlocks` → `<page-block>` → 方案锚点 → 首版 `anchors:`）此前用热图成员原样：真机
+ * vivaia 首页 B1 的成员是轮播第 1 张，方案锚点照抄它，首版 after 它就把「首屏下方」的新模块插进了轮播 ——
+ * 而编辑器货架上 `[B1]` 已经在整个首屏 section 上（2026-10-21）。两条路认块必须是同一个结果。
+ *
+ * 只提到「是成员自己或成员祖先、且只装着这一个区块」的块根。提不了的不进表，调用方保持原成员：
+ * 成员不在树上（截断 / 另一端版式）、所在容器还装着别的区块（两张幻灯片各是一块）、老 agent 没有几何。
+ */
+export declare function liftToBlockRoots(root: DomTreeNode, opts: {
+    viewportWidth?: number;
+    blocks: ReadonlyArray<ShelfBlockHint>;
+}): Map<string, Map<string, DomTreeNode>>;
 export declare function buildRootShelf(root: DomTreeNode, opts: {
     limit: number;
     viewportWidth?: number;
+    blocks?: ReadonlyArray<ShelfBlockHint>;
 }): {
     shelf: AiDescendant[];
     ancestorsOf: Map<string, string[]>;