@ptengine/inline-editor 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 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`，此后只在本仓改）。

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';
@@ -371,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)
@@ -447,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)
@@ -471,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/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;
 /**
@@ -69,6 +70,12 @@ export interface AiDescendant {
      * 信息，至少让模型知道它是新的；用户撤销后宿主会把它从清单里拿掉。写成行尾的 `[ai-inserted]`。
      */
     aiInserted?: boolean;
+    /**
+     * 这一行在**父级横排**里的位次（父级是 flex 行或多列 grid，见 `rowPositions`）：`after` 它会排到
+     * 它旁边，不是下方。来自树节点的排法事实（取树时请求 `SHELF_LAYOUT_FIELDS`）；父级竖排、或老扩展
+     * 没给事实时没有这个键。写成引用文本之后的 `[横排 i/n]`。
+     */
+    inRow?: RowPosition;
     /**
      * 区块身份（宿主按页面模型的 member 容器打的，如 `B2 首屏 h:740`），写成行尾的 `[…]`。
      * 没选中元素时「首屏下面」要有确定的锚：同一 `top`、同一段文字的包装行常有十几个，没有它

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}"`;
@@ -17,5 +20,5 @@ export function formatShelfRow(d) {
     const label = d.text || d.heading;
     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}`;
+    return `  ${indent}- ${d.selector}${tag}${d.hasChildren ? ' [container]' : ''}${imageTag(d)}${linkTag(d)}${inserted}${pos}${label ? ` ${quote(label, SHELF_TEXT_MAX)}` : ''}${rowTag(d)}${block}`;
 }

package/package.json

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