@ptengine/inline-editor 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 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

@@ -50,11 +50,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,
@@ -400,6 +404,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);

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/elementAiContext.d.ts

@@ -64,6 +64,17 @@ export interface AiDescendant {
      * （`formatShelfRow`），不进授权判断。顶层行不写这个键（条件写入，与 `image` 同一条纪律）。
      */
     depth?: number;
+    /**
+     * 这一行是 AI 本会话插入的元素（宿主按回执的 `insertedSelectors` 追加进货架）。货架上它没有别的
+     * 信息，至少让模型知道它是新的；用户撤销后宿主会把它从清单里拿掉。写成行尾的 `[ai-inserted]`。
+     */
+    aiInserted?: boolean;
+    /**
+     * 区块身份（宿主按页面模型的 member 容器打的，如 `B2 首屏 h:740`），写成行尾的 `[…]`。
+     * 没选中元素时「首屏下面」要有确定的锚：同一 `top`、同一段文字的包装行常有十几个，没有它
+     * 「最外层容器」会被选成整页包装层（真机 2026-10-16）。只有恰好是区块容器的那一行才有。
+     */
+    block?: string;
 }
 /**
  * 区块级货架取树的口径（`<page-block>`、方案锚点子树、选中元素货架三处共用）。

package/dist/kernel/selection/shelfRow.js

@@ -15,5 +15,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)}` : ''}${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.1",
   "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
   "license": "UNLICENSED",
   "private": false,