@ptengine/inline-editor 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.1.2
+
+全部是新增：扩展不支持契约 v11 `feature:node-fields`（取树不回 `facts`）时，货架行与原来逐字一致。
+
+**新增**
+- AI 货架行标出父级横排：`AiDescendant.inRow`（`{ index, count }`），`formatShelfRow` 在引用文本之后、区块身份之前写
+  ` [横排 i/n]`（与 frontend-base `<page-block>` 的行尾逐字一致）。父级是 flex 行（不换行；换行的要孩子同一行）或多列 grid
+  时才写 —— `after` 这一行会排到它旁边而不是下方。对整棵树判：父级常是货架跳过的包装层（PageFly `.pf-c`）。
+  `buildDescendantShelf(WithPaths)` / `buildRootShelf` / `resolveInlinePlanAnchors` 都会写。
+- 编辑器给 AI 取树的三处（选中元素子树、整页、锚点子树）请求 `SHELF_LAYOUT_FIELDS`（display / flexDirection / flexWrap /
+  gridTemplateColumns / gridAutoFlow 的计算样式）；图层面板取树不变。
+- 导出 `SHELF_LAYOUT_FIELDS` / `laysOutInRow` / `rowPositions` / `rowTag` 与类型 `RowPosition`，宿主自己拼货架时可同口径调用。
+
+## 0.1.1
+
+自 frontend-base `feat/dp/inline-v2` 搬来编辑器包的改动（源仓 develop 已删 `packages/inline-editor`，此后只在本仓改）。
+全部是新增，不传新 props 的宿主行为不变。
+
+**新增**
+- `InlineEditor` 可选 props `onAiInsertedRemoved` / `onAiInsertedRestored`（`useInlineEditor` 的同名输入、
+  `useChangeList(sessionId, { onInsertedRemoved, onInsertedRestored })` 同步透传）：撤销（单条 / 整批 / 换版本）
+  拿掉 AI 插入的元素时回报其 selector，并从包内的 AI 作用域剔除；回放（切版本 / 切设备）把它们放回画布时回报，
+  并并回作用域。宿主据此同步 AI 的货架与授权票。
+- `AiDescendant.aiInserted` / `AiDescendant.block`：`formatShelfRow` 在能力位之后写 ` [ai-inserted]`，行尾写区块身份 ` [B2 首屏 h:740]`。
+- `AiRejectReason` 新增 `GARBLED_TEXT`（content / summary 含 U+FFFD，该条不落地）与 `RESOLVE_FAILED`
+  （selector 探测本身抛错，`detail` 带原文，应重试）；真找不到仍是 `ELEMENTS_NOT_FOUND`，并带 `detail`。
+
 ## 0.1.0
 
 首个发布版。自 frontend-base（`cecb6de77`）迁入 `inline-editor`，其内部依赖的 `canvas-ui` 并入本包的内部目录（不单独发布）。

package/dist/InlineEditor.d.ts

@@ -198,6 +198,13 @@ export interface InlineEditorProps {
      * 也不应该自己传 selector 进来 —— agent 编的 selector 正是这道闸要拦的东西。
      */
     onAiApplyReady?: (api: AiApplyApi | null) => void;
+    /**
+     * 用户撤销（单条 / 整批 / 换版本）拿掉了 AI 插入的元素 → 回报它们的 selector。宿主据此把这些行
+     * 从 AI 的货架 / 授权票里删掉；包自己同时把它们从作用域里剔除。没有插入类时不调用。
+     */
+    onAiInsertedRemoved?: (selectors: string[]) => void;
+    /** 回放把 AI 插入的元素放回画布（切版本 / 切设备）→ 回报它们的 selector；宿主把它们并回货架。 */
+    onAiInsertedRestored?: (selectors: string[]) => void;
     /**
      * 是否跟着选中实时刷新 AI 上下文。宿主在**右侧 AI 面板已打开**时给 true。
      *
@@ -339,4 +346,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, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedImageOrigins, allowedImageUrls, allowedLinkUrls, viewportWidthOverride, blockOverlay }: InlineEditorProps): import("react").JSX.Element;
+export declare function InlineEditor({ url, device, onDeviceChange, title, versionLabel, chrome, onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedImageOrigins, allowedImageUrls, allowedLinkUrls, viewportWidthOverride, blockOverlay }: InlineEditorProps): import("react").JSX.Element;

package/dist/InlineEditor.js

@@ -17,6 +17,7 @@ import { getAncestorChain, getDomTree, getElementCapabilities, getElementImages,
 import { useAiSelectionContext } from './kernel/selection/useAiSelectionContext.js';
 import { buildDescendantShelf } from './kernel/selection/buildDescendantShelf.js';
 import { buildRootShelf } from './kernel/selection/buildRootShelf.js';
+import { SHELF_LAYOUT_FIELDS } from './kernel/selection/rowLayout.js';
 import { backgroundImageAncestorFor, blockContainerFor, resolveInlinePlanAnchors, withImageRows } from './kernel/selection/resolveAnchors.js';
 import { elementGeometryForAi } from './kernel/selection/elementGeometryForAi.js';
 import { applyAiChanges } from './kernel/ai/aiInlineApply.js';
@@ -50,11 +51,15 @@ 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, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedImageOrigins, allowedImageUrls, allowedLinkUrls, viewportWidthOverride, blockOverlay }) {
+export function InlineEditor({ url, device, onDeviceChange, title, versionLabel = 'V1', chrome = 'full', onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedImageOrigins, allowedImageUrls, allowedLinkUrls, viewportWidthOverride, blockOverlay }) {
     const { t } = useTranslation();
     const canvasAreaRef = useRef(null);
     const canvasIframeRef = useRef(null);
+    const insertedRemovedRef = useRef(null);
+    const insertedRestoredRef = useRef(null);
     const editor = useInlineEditor({
+        onInsertedRemoved: selectors => insertedRemovedRef.current?.(selectors),
+        onInsertedRestored: selectors => insertedRestoredRef.current?.(selectors),
         url,
         device,
         iframeRef: canvasIframeRef,
@@ -367,7 +372,8 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             maxChildren: 20,
             maxNodes: SHELF_TREE_MAX_NODES,
             visibleOnly: true,
-            includeRect: true
+            includeRect: true,
+            fields: [...SHELF_LAYOUT_FIELDS]
         })
             .then(root => {
             if (!stale)
@@ -400,6 +406,21 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
     const pageContextSessionRef = useRef(null);
     const rootShelfRef = useRef([]);
     const aiInsertedRef = useRef([]);
+    const onAiInsertedRemovedRef = useRef(onAiInsertedRemoved);
+    onAiInsertedRemovedRef.current = onAiInsertedRemoved;
+    insertedRemovedRef.current = selectors => {
+        const gone = new Set(selectors);
+        aiInsertedRef.current = aiInsertedRef.current.filter(s => !gone.has(s));
+        onAiInsertedRemovedRef.current?.(selectors);
+    };
+    const onAiInsertedRestoredRef = useRef(onAiInsertedRestored);
+    onAiInsertedRestoredRef.current = onAiInsertedRestored;
+    insertedRestoredRef.current = selectors => {
+        for (const sel of selectors)
+            if (!aiInsertedRef.current.includes(sel))
+                aiInsertedRef.current.push(sel);
+        onAiInsertedRestoredRef.current?.(selectors);
+    };
     const rootShelfAncestorsRef = useRef(new Map());
     const anchorsResultRef = useRef(null);
     const anchorsRef = useRef(anchors);
@@ -428,7 +449,8 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                 maxChildren: 40,
                 maxNodes: 1500,
                 visibleOnly: true,
-                includeRect: true
+                includeRect: true,
+                fields: [...SHELF_LAYOUT_FIELDS]
             });
             const { html } = await getOuterHtml(sessionIdForAiContext, 'body');
             if (stale)
@@ -452,7 +474,8 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                         maxChildren: 20,
                         maxNodes: SHELF_TREE_MAX_NODES,
                         visibleOnly: true,
-                        includeRect: true
+                        includeRect: true,
+                        fields: [...SHELF_LAYOUT_FIELDS]
                     })
                 })
                 : null;

package/dist/index.d.ts

@@ -74,7 +74,9 @@ export type { ElementAiContext, AiDescendant, AiHtmlFragment, AiPageImage, Ancho
 export { resolveInlinePlanAnchors } from './kernel/selection/resolveAnchors.js';
 export type { InlinePlanAnchor, ResolvedAnchor, AnchorShelfResult } from './kernel/selection/resolveAnchors.js';
 export { buildDescendantShelf } from './kernel/selection/buildDescendantShelf.js';
-export { formatShelfRow, imageTag, linkTag, SHELF_TEXT_MAX } from './kernel/selection/shelfRow.js';
+export { formatShelfRow, imageTag, linkTag, rowTag, SHELF_TEXT_MAX } from './kernel/selection/shelfRow.js';
+export { SHELF_LAYOUT_FIELDS, laysOutInRow, rowPositions } from './kernel/selection/rowLayout.js';
+export type { RowPosition } from './kernel/selection/rowLayout.js';
 export { linkPath } from './kernel/linkHref.js';
 export { buildRootShelf } from './kernel/selection/buildRootShelf.js';
 export { LayersPanel } from './tree/LayersPanel.js';

package/dist/index.js

@@ -36,7 +36,8 @@ export { exportChangesForSave } from './kernel/changelist/exportForSave.js';
 export { buildElementAiContext, truncateHtml, AI_HTML_BUDGET_BYTES, AI_DESCENDANT_LIMIT, SHELF_TREE_MAX_DEPTH, SHELF_TREE_MAX_NODES, ROOT_SHELF_LIMIT, composeAnchorHtml, extractPageLinks, linksFragment } from './kernel/selection/elementAiContext.js';
 export { resolveInlinePlanAnchors } from './kernel/selection/resolveAnchors.js';
 export { buildDescendantShelf } from './kernel/selection/buildDescendantShelf.js';
-export { formatShelfRow, imageTag, linkTag, SHELF_TEXT_MAX } from './kernel/selection/shelfRow.js';
+export { formatShelfRow, imageTag, linkTag, rowTag, SHELF_TEXT_MAX } from './kernel/selection/shelfRow.js';
+export { SHELF_LAYOUT_FIELDS, laysOutInRow, rowPositions } from './kernel/selection/rowLayout.js';
 export { linkPath } from './kernel/linkHref.js';
 export { buildRootShelf } from './kernel/selection/buildRootShelf.js';
 export { LayersPanel } from './tree/LayersPanel.js';

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

@@ -99,7 +99,11 @@ export interface AiWireChange {
         summary?: string;
     };
 }
-export type AiRejectReason = 'NOT_IN_WHITELIST' | 'INVALID_SHAPE' | 'OUT_OF_SCOPE' | 'ELEMENTS_NOT_FOUND' | 'AMBIGUOUS_SELECTOR' | 'INVALID_TEXT_CONTENT' | 'INVALID_STYLE_CONTENT'
+export type AiRejectReason = 'NOT_IN_WHITELIST' | 'INVALID_SHAPE' | 'OUT_OF_SCOPE' | 'ELEMENTS_NOT_FOUND'
+/** content / summary 里有替换字符 U+FFFD（模型吐坏的字）：这一条不落地，让它只重发这一条。 */
+ | 'GARBLED_TEXT'
+/** 探测 selector 时通道 / 会话出错（不是「找不到」）：该重试，`detail` 带原文。 */
+ | 'RESOLVE_FAILED' | 'AMBIGUOUS_SELECTOR' | 'INVALID_TEXT_CONTENT' | 'INVALID_STYLE_CONTENT'
 /** 新增元素那段 HTML 没过闸（标签/属性/取值/体量），detail 里是具体原因。 */
  | 'INVALID_HTML_CONTENT'
 /** mode 不在该 op 的词表里（两套词表容易串）。 */

package/dist/kernel/ai/aiInlineApply.js

@@ -146,16 +146,32 @@ export async function applyAiChanges(changes, deps) {
             continue;
         }
         const grantHit = !inLiveScope && grant ? grant : null;
+        const garbledText = (typeof change.content === 'string' && change.content.includes('\uFFFD')) ||
+            (typeof change.rationale?.summary === 'string' && change.rationale.summary.includes('\uFFFD'));
+        if (garbledText) {
+            rejected.push({ index, selector, reason: 'GARBLED_TEXT', detail: 'replacement character U+FFFD in text' });
+            continue;
+        }
         let hit;
         try {
             hit = await deps.resolve(selector);
         }
-        catch {
-            rejected.push({ index, selector, reason: 'ELEMENTS_NOT_FOUND' });
+        catch (e) {
+            rejected.push({
+                index,
+                selector,
+                reason: 'RESOLVE_FAILED',
+                detail: String(e?.message ?? e)
+            });
             continue;
         }
         if (!hit.matched || hit.matchCount === 0) {
-            rejected.push({ index, selector, reason: 'ELEMENTS_NOT_FOUND' });
+            rejected.push({
+                index,
+                selector,
+                reason: 'ELEMENTS_NOT_FOUND',
+                detail: 'no match on the canvas (reverted or page changed)'
+            });
             continue;
         }
         if (hit.matchCount > 1) {

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

@@ -101,7 +101,22 @@ export interface HydrateOutcome {
         reason: string;
     }>;
 }
-export declare function useChangeList(sessionId: string | undefined): UseChangeListResult;
+export interface UseChangeListOptions {
+    /**
+     * 撤销（单条 / 整批 / 换版本）拿掉了插入类 change 时，回报它插入过的元素 selector。
+     *
+     * 宿主据此把这些行从 AI 的货架 / 授权票里删掉：此前只追加不删，用户撤销了模块、模型下一轮照着
+     * 货架去改一个已经不在的元素（真机 2026-10-16，线程 a303483f）。没有插入类时不调用。
+     */
+    onInsertedRemoved?: (selectors: string[]) => void;
+    /**
+     * 回放（切版本 / 切设备 / 开编辑器）把带 `insertedSelectors` 的记录放回画布时，回报那些 selector。
+     * 与 `onInsertedRemoved` 成对：切 A→B→A 时 A 的模块先被报「拿掉」、回放时再报「回来了」，
+     * 否则它掉出 AI 的作用域（复审 2026-10-19）。
+     */
+    onInsertedRestored?: (selectors: string[]) => void;
+}
+export declare function useChangeList(sessionId: string | undefined, options?: UseChangeListOptions): UseChangeListResult;
 export interface ButtonActionDeps {
     identifier: string;
     selector: string;

package/dist/kernel/changelist/useChangeList.js

@@ -14,11 +14,25 @@ function withResolvedStyleMode(change, applied) {
         ? { ...change, ...applied.resolvedStyleMode }
         : change;
 }
-export function useChangeList(sessionId) {
+export function useChangeList(sessionId, options = {}) {
     const [list, setList] = useState([]);
     const [lastError, setLastError] = useState(null);
     const listRef = useRef([]);
     listRef.current = list;
+    const onInsertedRemovedRef = useRef(options.onInsertedRemoved);
+    onInsertedRemovedRef.current = options.onInsertedRemoved;
+    const onInsertedRestoredRef = useRef(options.onInsertedRestored);
+    onInsertedRestoredRef.current = options.onInsertedRestored;
+    const reportRemoved = useCallback((records) => {
+        const gone = records.flatMap(r => r.insertedSelectors ?? []);
+        if (gone.length)
+            onInsertedRemovedRef.current?.(gone);
+    }, []);
+    const reportRestored = useCallback((records) => {
+        const back = records.flatMap(r => r.insertedSelectors ?? []);
+        if (back.length)
+            onInsertedRestoredRef.current?.(back);
+    }, []);
     const push = useCallback(async (change, ancestors = []) => {
         if (!sessionId)
             throw new Error('no canvas session');
@@ -73,14 +87,18 @@ export function useChangeList(sessionId) {
             records.push({
                 changeId,
                 change: withResolvedStyleMode(change, applied),
-                ancestors: []
+                ancestors: [],
+                ...(applied?.insertedSelectors?.length
+                    ? { insertedSelectors: applied.insertedSelectors }
+                    : {})
             });
         }
         listRef.current = records;
         setList(records);
         setLastError(null);
+        reportRestored(records);
         return { applied: records.length - failed.length, failed };
-    }, [sessionId]);
+    }, [sessionId, reportRestored]);
     const guard = useCallback(async (run) => {
         try {
             return await run();
@@ -99,19 +117,23 @@ export function useChangeList(sessionId) {
         if (!sessionId)
             throw new Error('no canvas session');
         await revertChange(sessionId, changeId);
+        const removed = listRef.current.filter(r => r.changeId === changeId);
         const next = listRef.current.filter(r => r.changeId !== changeId);
         listRef.current = next;
         setList(next);
-    }), [guard, sessionId]);
+        reportRemoved(removed);
+    }), [guard, sessionId, reportRemoved]);
     const revertAll = useCallback(() => guard(async () => {
         if (!sessionId)
             throw new Error('no canvas session');
-        for (const record of [...listRef.current].reverse()) {
+        const reverted = listRef.current;
+        for (const record of [...reverted].reverse()) {
             await revertChange(sessionId, record.changeId).catch(() => { });
         }
         listRef.current = [];
         setList([]);
-    }), [guard, sessionId]);
+        reportRemoved(reverted);
+    }), [guard, sessionId, reportRemoved]);
     const replaceAll = useCallback(async (next, prevIds) => {
         if (!sessionId)
             throw new Error('no canvas session');
@@ -124,6 +146,7 @@ export function useChangeList(sessionId) {
         catch (e) {
             listRef.current = previous;
             setList(previous);
+            reportRestored(previous);
             throw e;
         }
         const nextRecords = listRef.current;

package/dist/kernel/selection/buildDescendantShelf.js

@@ -1,5 +1,6 @@
 import '../linkHref.js';
 import { AI_DESCENDANT_LIMIT, AI_DESCENDANT_TEXT_CHARS } from './elementAiContext.js';
+import { rowPositions } from './rowLayout.js';
 const NOISE_TAGS = new Set(['br', 'wbr', 'hr', 'script', 'style', 'noscript', 'template', 'link', 'meta']);
 const INTERACTIVE_TAGS = new Set(['a', 'button', 'input', 'select', 'textarea', 'label', 'summary', 'details', 'form']);
 function hasChildrenOf(node) {
@@ -23,6 +24,7 @@ export function buildDescendantShelf(root, limit = AI_DESCENDANT_LIMIT) {
 export function buildDescendantShelfWithPaths(root, limit = AI_DESCENDANT_LIMIT) {
     const shelf = [];
     const ancestorsOf = new Map();
+    const inRowOf = rowPositions(root);
     const queue = root.children.map(node => ({ node, ancestors: [root.selector], depth: 0 }));
     while (queue.length && shelf.length < limit) {
         const { node, ancestors, depth } = queue.shift();
@@ -34,6 +36,7 @@ export function buildDescendantShelfWithPaths(root, limit = AI_DESCENDANT_LIMIT)
             continue;
         }
         const text = node.textSummary.trim().slice(0, AI_DESCENDANT_TEXT_CHARS);
+        const inRow = inRowOf.get(node.selector);
         shelf.push({
             selector: node.selector,
             tag: node.tag,
@@ -41,6 +44,7 @@ export function buildDescendantShelfWithPaths(root, limit = AI_DESCENDANT_LIMIT)
             hasChildren: hasChildrenOf(node),
             ...(node.image ? { image: node.image } : {}),
             ...(node.href ? { href: node.href } : {}),
+            ...(inRow ? { inRow } : {}),
             ...(depth > 0 ? { depth } : {})
         });
         ancestorsOf.set(node.selector, ancestors);

package/dist/kernel/selection/buildRootShelf.js

@@ -1,5 +1,6 @@
 import { buildDescendantShelfWithPaths } from './buildDescendantShelf.js';
 import { AI_DESCENDANT_TEXT_CHARS } from './elementAiContext.js';
+import { rowPositions } from './rowLayout.js';
 const LANDMARK_MIN_HEIGHT = 120;
 const LANDMARK_MIN_WIDTH_RATIO = 0.5;
 const DEFAULT_VIEWPORT_WIDTH = 375;
@@ -77,6 +78,7 @@ export function buildRootShelf(root, opts) {
         const dt = a.node.rect.top - b.node.rect.top;
         return dt !== 0 ? dt : a.order - b.order;
     });
+    const inRowOf = rowPositions(root);
     const shelf = [];
     const ancestorsOf = new Map();
     const emittedSelectors = new Set();
@@ -102,6 +104,9 @@ export function buildRootShelf(root, opts) {
             row.top = n.rect.top;
         if (n.image)
             row.image = n.image;
+        const inRow = inRowOf.get(n.selector);
+        if (inRow)
+            row.inRow = inRow;
         shelf.push(row);
         ancestorsOf.set(n.selector, e.ancestors);
         emittedSelectors.add(n.selector);

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

@@ -6,6 +6,7 @@
  */
 import type { CanvasDevice } from '@ptengine/inline-core/protocol';
 import type { ResolvedAnchor } from './resolveAnchors.js';
+import type { RowPosition } from './rowLayout.js';
 /** outerHTML 进 prompt 的预算。 */
 export declare const AI_HTML_BUDGET_BYTES = 4096;
 /**
@@ -64,6 +65,23 @@ export interface AiDescendant {
      * （`formatShelfRow`），不进授权判断。顶层行不写这个键（条件写入，与 `image` 同一条纪律）。
      */
     depth?: number;
+    /**
+     * 这一行是 AI 本会话插入的元素（宿主按回执的 `insertedSelectors` 追加进货架）。货架上它没有别的
+     * 信息，至少让模型知道它是新的；用户撤销后宿主会把它从清单里拿掉。写成行尾的 `[ai-inserted]`。
+     */
+    aiInserted?: boolean;
+    /**
+     * 这一行在**父级横排**里的位次（父级是 flex 行或多列 grid，见 `rowPositions`）：`after` 它会排到
+     * 它旁边，不是下方。来自树节点的排法事实（取树时请求 `SHELF_LAYOUT_FIELDS`）；父级竖排、或老扩展
+     * 没给事实时没有这个键。写成引用文本之后的 `[横排 i/n]`。
+     */
+    inRow?: RowPosition;
+    /**
+     * 区块身份（宿主按页面模型的 member 容器打的，如 `B2 首屏 h:740`），写成行尾的 `[…]`。
+     * 没选中元素时「首屏下面」要有确定的锚：同一 `top`、同一段文字的包装行常有十几个，没有它
+     * 「最外层容器」会被选成整页包装层（真机 2026-10-16）。只有恰好是区块容器的那一行才有。
+     */
+    block?: string;
 }
 /**
  * 区块级货架取树的口径（`<page-block>`、方案锚点子树、选中元素货架三处共用）。

package/dist/kernel/selection/resolveAnchors.js

@@ -1,4 +1,5 @@
 import { buildDescendantShelfWithPaths } from './buildDescendantShelf.js';
+import { rowPositions } from './rowLayout.js';
 import { AI_DESCENDANT_LIMIT, AI_DESCENDANT_TEXT_CHARS } from './elementAiContext.js';
 export function blockContainerFor(anchor, shelf, ancestorsOf) {
     const isBlockRow = (selector) => {
@@ -116,6 +117,7 @@ export async function resolveInlinePlanAnchors(input) {
     const outcomes = [];
     const seen = new Set();
     const rootAncestors = indexAncestors(rootTree);
+    const rootInRow = rowPositions(rootTree);
     const push = (row, chain) => {
         if (seen.has(row.selector))
             return;
@@ -148,6 +150,8 @@ export async function resolveInlinePlanAnchors(input) {
         }
         outcomes.push({ ...anchor, resolved: true, via });
         const ownAncestors = rootAncestors.get(resolvedSelector) ?? [];
+        const ownInRow = rootInRow.get(resolvedSelector);
+        const withOwnInRow = (row) => ownInRow ? { ...row, inRow: ownInRow } : row;
         let subtree = null;
         try {
             subtree = await getSubtree(resolvedSelector);
@@ -155,11 +159,11 @@ export async function resolveInlinePlanAnchors(input) {
         catch {
         }
         if (!subtree) {
-            push({ selector: resolvedSelector, tag: '', text: '', hasChildren: true }, ownAncestors);
+            push(withOwnInRow({ selector: resolvedSelector, tag: '', text: '', hasChildren: true }), ownAncestors);
             continue;
         }
         const anchorSelector = subtree.selector || resolvedSelector;
-        push(rowOf(subtree), ownAncestors);
+        push(withOwnInRow(rowOf(subtree)), ownAncestors);
         const { shelf: rows, ancestorsOf: within } = buildDescendantShelfWithPaths(subtree, limitPerAnchor);
         for (const row of rows) {
             const chainWithin = within.get(row.selector) ?? [];

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

@@ -0,0 +1,31 @@
+/**
+ * 「父级横着摆孩子吗」—— 货架行上的 ` [横排 i/n]`（`rowTag`）就从这里来。
+ *
+ * `after` X 落在 X 的**父级**怎么摆孩子的地方：父级横排就排到 X 右边。货架此前只有缩进，看不出
+ * 父级怎么排 —— 真机 2026-09-30 / 10-16 / 10-19 三次，模型锚了 PageFly `.pf-c`（flex 不换行）里
+ * 唯一的 Column，「下方加一行」落到文案右边、把文案挤窄；同一页另一次碰巧锚了 Column 里的 h2 就对了。
+ *
+ * 口径与 frontend-base `apps/x/src/stores/pageModel.ts` 的 `laysOutInRow` / `rowMarkIndex`
+ * （63112d497a，`<page-block>` 那份）逐字一致：同一个元素在 `<page-block>` 与 `<page-shelf>` /
+ * `<page-element>` 里必须打出同一个标记。那份以后可改成调用这里。
+ */
+import type { DomTreeNode, NodeField } from '@ptengine/inline-core/protocol';
+/**
+ * 判排法要的计算样式（契约 v11 `feature:node-fields`，挂在节点的 `facts.computed` 上）。货架取树时
+ * 随 `fields` 一起请求；老扩展不认 `fields`、静默忽略 —— 树上没有 facts，行不打标记，与原来逐字一致。
+ */
+export declare const SHELF_LAYOUT_FIELDS: readonly NodeField[];
+/** 在父级横排里的位次：第 `index` 项（从 1 起）/ 共 `count` 项。 */
+export interface RowPosition {
+    index: number;
+    count: number;
+}
+/**
+ * 树上每个节点 → 它在父级横排里的位次；父级竖排、或树上没有排法事实的不进表。
+ *
+ * 父级可能是货架上跳过的包装层（`.pf-c` 正是），所以对着**整棵树**判，不对着货架行判。
+ * 根自己的父级不在树里，判不了横竖，不进表。
+ */
+export declare function rowPositions(root: DomTreeNode): Map<string, RowPosition>;
+/** 这个节点把孩子横着摆吗：flex 行（不换行；换行的要孩子真排在同一行）或多列 grid。 */
+export declare function laysOutInRow(n: DomTreeNode): boolean;

package/dist/kernel/selection/rowLayout.js

@@ -0,0 +1,41 @@
+export const SHELF_LAYOUT_FIELDS = [
+    'computed:display',
+    'computed:flexDirection',
+    'computed:flexWrap',
+    'computed:gridTemplateColumns',
+    'computed:gridAutoFlow'
+];
+export function rowPositions(root) {
+    const positions = new Map();
+    const walk = (n) => {
+        if (laysOutInRow(n)) {
+            n.children.forEach((c, i) => positions.set(c.selector, { index: i + 1, count: n.children.length }));
+        }
+        n.children.forEach(walk);
+    };
+    walk(root);
+    return positions;
+}
+export function laysOutInRow(n) {
+    const c = n.facts?.computed;
+    if (!c)
+        return false;
+    if (c.display === 'flex' || c.display === 'inline-flex') {
+        if (c.flexDirection && !c.flexDirection.startsWith('row'))
+            return false;
+        if (c.flexWrap !== 'wrap' && c.flexWrap !== 'wrap-reverse')
+            return true;
+        const tops = n.children.flatMap(ch => (ch.rect ? [ch.rect.top] : []));
+        return tops.some((t, i) => tops.some((u, j) => j !== i && Math.abs(t - u) <= 1));
+    }
+    if (c.display === 'grid' || c.display === 'inline-grid') {
+        if (c.gridAutoFlow?.startsWith('column'))
+            return true;
+        const tracks = (c.gridTemplateColumns ?? '')
+            .replace(/\[[^\]]*\]/g, ' ')
+            .split(/\s+/)
+            .filter(t => t && t !== 'none');
+        return tracks.length >= 2;
+    }
+    return false;
+}

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

@@ -6,7 +6,7 @@
  * 一漂移就是「同一个元素在 `<page-block>` 与 `<page-element>` 里长得不一样」，而它会按其中
  * 一种去抄 selector。
  *
- * 行形：`  - selector <tag> [container] [image: …] [link→…] top:N "text"`，`depth` 每加一层在 `- ` 前
+ * 行形：`  - selector <tag> [container] [image: …] [link→…] top:N "text" [横排 i/n]`，`depth` 每加一层在 `- ` 前
  * 多两个空格。缩进是 2026-09-30 加的：平铺的货架看不出谁是谁的父级，agent 分不清
  * 「after 容器」与「after 容器里的标题」落在哪 —— 真机里它 after 了一个 flex 横排里的 Column，
  * 新加的一行跑到了标题右边。
@@ -29,5 +29,12 @@ export declare function imageTag(d: Pick<AiDescendant, 'image'>): string;
  * 方案卡据此断言「全页没有购买导线」，而那页几乎每张图都链到商品页。
  */
 export declare function linkTag(d: Pick<AiDescendant, 'href'>): string;
+/**
+ * 货架行上的横排位：` [横排 1/2]`，父级不是横排（或树上没有排法事实）时空串。
+ *
+ * `after` 这一行落在它的父级怎么摆孩子的地方：父级横排就排到它旁边、把它挤窄（真机 2026-09-30 /
+ * 10-16 / 10-19 三次）。写法与 `<page-block>`（frontend-base 63112d497a）逐字一致。
+ */
+export declare function rowTag(d: Pick<AiDescendant, 'inRow'>): string;
 /** 叶子行优先写自己的直接文本；容器行（自己没有文本）才写 heading。 */
 export declare function formatShelfRow(d: AiDescendant): string;

package/dist/kernel/selection/shelfRow.js

@@ -6,6 +6,9 @@ export function imageTag(d) {
 export function linkTag(d) {
     return d.href ? ` [link→${linkPath(d.href)}]` : '';
 }
+export function rowTag(d) {
+    return d.inRow ? ` [横排 ${d.inRow.index}/${d.inRow.count}]` : '';
+}
 function quote(text, max) {
     const clean = text.replace(/\s+/g, ' ').replace(/"/g, "'").trim();
     return `"${clean.length > max ? clean.slice(0, max) : clean}"`;
@@ -15,5 +18,7 @@ export function formatShelfRow(d) {
     const tag = d.tag ? ` <${d.tag}>` : '';
     const pos = typeof d.top === 'number' ? ` top:${Math.round(d.top)}` : '';
     const label = d.text || d.heading;
-    return `  ${indent}- ${d.selector}${tag}${d.hasChildren ? ' [container]' : ''}${imageTag(d)}${linkTag(d)}${pos}${label ? ` ${quote(label, SHELF_TEXT_MAX)}` : ''}`;
+    const inserted = d.aiInserted ? ' [ai-inserted]' : '';
+    const block = d.block ? ` [${d.block}]` : '';
+    return `  ${indent}- ${d.selector}${tag}${d.hasChildren ? ' [container]' : ''}${imageTag(d)}${linkTag(d)}${inserted}${pos}${label ? ` ${quote(label, SHELF_TEXT_MAX)}` : ''}${rowTag(d)}${block}`;
 }

package/dist/useInlineEditor.d.ts

@@ -53,6 +53,9 @@ export interface UseInlineEditorInput {
     iframeRef?: React.MutableRefObject<HTMLIFrameElement | null>;
     /** 图层树行首图标渲染器（宿主注入，见 `adaptDomTree`）。 */
     renderNodeIcon?: AdaptDomTreeOptions['renderIcon'];
+    /** 撤销拿掉了插入类 change → 回报它插入过的元素（见 `UseChangeListOptions.onInsertedRemoved`）。 */
+    onInsertedRemoved?: (selectors: string[]) => void;
+    onInsertedRestored?: (selectors: string[]) => void;
     /**
      * 是否在 `domReady` 后拉取页面结构树（图层面板的数据源）。默认 `true`。
      *

package/dist/useInlineEditor.js

@@ -55,7 +55,10 @@ export function useInlineEditor(input) {
         onStreamEvent: stream.onStreamEvent
     });
     const sessionId = session.frameProps?.sessionId;
-    const changeList = useChangeList(sessionId);
+    const changeList = useChangeList(sessionId, {
+        onInsertedRemoved: input.onInsertedRemoved,
+        onInsertedRestored: input.onInsertedRestored
+    });
     changeListRef.current = changeList;
     const restore = useSelectionRestore();
     const domReady = readySessionId !== null && readySessionId === sessionId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptengine/inline-editor",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
   "license": "UNLICENSED",
   "private": false,