@ptengine/inline-editor 0.0.0-stage → 0.1.0

package/dist/kernel/ai/aiInlineApply.js

@@ -0,0 +1,461 @@
+import { deleteElement, insertElement, replaceImage, setClickAction, setImageAlt } from '../changelist/useChangeList.js';
+import { resolveImageBranch } from '../../dialogs/imageEdit.js';
+import { buildActionObject } from '../../dialogs/actionTypes.js';
+import { evaluateApplyCheck } from './postApplyCheck.js';
+import { sanitizeInsertHtml } from './insertHtmlGate.js';
+import { sanitizeReplaceHtml } from './replaceHtmlGate.js';
+import { imageSourceAllowed } from './imageSource.js';
+export const AI_SAFE_OPS = [
+    'EDIT_TEXT',
+    'CHANGE_STYLE',
+    'INSERT_ELEMENT',
+    'MOVE_ELEMENT',
+    'DELETE_ELEMENT',
+    'CHANGE_IMAGE',
+    'SET_LINK',
+    'EDIT_HTML'
+];
+export const AI_INSERT_MODES = ['insert', 'append', 'before', 'after'];
+export const AI_MOVE_MODES = ['top', 'bottom', 'before', 'after'];
+const CSS_PROPERTY_RE = /^-?[a-zA-Z][a-zA-Z-]*$/;
+function isSafeStyleValue(value) {
+    const lower = value.toLowerCase();
+    return (!value.includes('{') &&
+        !value.includes('}') &&
+        !value.includes('<') &&
+        !lower.includes('javascript:'));
+}
+function isWhitelistedOp(op) {
+    return (op === 'EDIT_TEXT' ||
+        op === 'CHANGE_STYLE' ||
+        op === 'INSERT_ELEMENT' ||
+        op === 'MOVE_ELEMENT' ||
+        op === 'DELETE_ELEMENT' ||
+        op === 'CHANGE_IMAGE' ||
+        op === 'SET_LINK' ||
+        op === 'EDIT_HTML');
+}
+export function parseStyleDeclarations(content) {
+    const out = [];
+    for (const raw of content.split(';')) {
+        const pair = raw.trim();
+        if (!pair)
+            continue;
+        const at = pair.indexOf(':');
+        if (at <= 0)
+            continue;
+        const property = pair.slice(0, at).trim();
+        const value = pair.slice(at + 1).trim();
+        if (!property || !value)
+            continue;
+        if (!CSS_PROPERTY_RE.test(property))
+            continue;
+        if (!isSafeStyleValue(value))
+            continue;
+        out.push({ property, value });
+    }
+    return out;
+}
+function parseHttpUrl(raw) {
+    if (typeof raw !== 'string' || !raw)
+        return null;
+    let parsed;
+    try {
+        parsed = new URL(raw);
+    }
+    catch {
+        return null;
+    }
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed : null;
+}
+export async function applyAiChanges(changes, deps) {
+    const applied = [];
+    const rejected = [];
+    const htmlReplaced = new Set();
+    const capsOf = async (selector) => {
+        try {
+            return (await deps.getCapabilities?.(selector)) ?? null;
+        }
+        catch {
+            return null;
+        }
+    };
+    const postCheck = async (entry, before, measurable, mode) => {
+        const insertedSelectors = entry.changeIds.flatMap(id => deps.insertedSelectorsOf?.(id) ?? []);
+        if (insertedSelectors.length)
+            entry.insertedSelectors = insertedSelectors;
+        if (!measurable)
+            return;
+        try {
+            await deps.settle?.();
+            const measure = async (sel) => {
+                try {
+                    const r = await deps.resolve(sel);
+                    return r.matched && r.matchCount === 1 ? (r.viewportRect ?? null) : null;
+                }
+                catch {
+                    return null;
+                }
+            };
+            const targetAfter = await measure(entry.selector);
+            const inserted = [];
+            for (const sel of insertedSelectors)
+                inserted.push({ selector: sel, rect: await measure(sel) });
+            entry.check = evaluateApplyCheck({
+                op: entry.op,
+                mode,
+                targetBefore: before,
+                targetAfter,
+                inserted,
+                viewportWidth: deps.viewportWidth?.()
+            });
+        }
+        catch {
+        }
+    };
+    for (let index = 0; index < changes.length; index++) {
+        const change = changes[index];
+        const selector = typeof change?.selector === 'string' ? change.selector : '';
+        if (!change || !isWhitelistedOp(change.abTestType)) {
+            rejected.push({ index, selector, reason: 'NOT_IN_WHITELIST' });
+            continue;
+        }
+        const needsContent = change.abTestType === 'EDIT_TEXT' ||
+            change.abTestType === 'CHANGE_STYLE' ||
+            change.abTestType === 'INSERT_ELEMENT' ||
+            change.abTestType === 'EDIT_HTML';
+        const missingField = (needsContent && (typeof change.content !== 'string' || !change.content)) ||
+            (change.abTestType === 'CHANGE_IMAGE' &&
+                (typeof change.src !== 'string' || !change.src)) ||
+            (change.abTestType === 'SET_LINK' && (typeof change.url !== 'string' || !change.url));
+        if (!selector || missingField) {
+            rejected.push({ index, selector, reason: 'INVALID_SHAPE' });
+            continue;
+        }
+        const inLiveScope = selector === deps.scope.selector ||
+            (deps.scope.descendants?.() ?? []).includes(selector);
+        const grant = deps.scope.grant;
+        const inGrant = !!grant && (selector === grant.selector || grant.descendants.includes(selector));
+        if (!inLiveScope && !inGrant) {
+            rejected.push({
+                index,
+                selector,
+                reason: 'OUT_OF_SCOPE',
+                detail: `scope: ${deps.scope.selector}${grant ? `, granted: ${grant.selector}` : ''}`
+            });
+            continue;
+        }
+        const grantHit = !inLiveScope && grant ? grant : null;
+        let hit;
+        try {
+            hit = await deps.resolve(selector);
+        }
+        catch {
+            rejected.push({ index, selector, reason: 'ELEMENTS_NOT_FOUND' });
+            continue;
+        }
+        if (!hit.matched || hit.matchCount === 0) {
+            rejected.push({ index, selector, reason: 'ELEMENTS_NOT_FOUND' });
+            continue;
+        }
+        if (hit.matchCount > 1) {
+            rejected.push({ index, selector, reason: 'AMBIGUOUS_SELECTOR' });
+            continue;
+        }
+        const before = hit.viewportRect ?? null;
+        const measurable = before !== null;
+        const summary = change.rationale?.summary;
+        const ancestors = grantHit
+            ? selector === grantHit.selector
+                ? grantHit.ancestors
+                : [grantHit.selector, ...grantHit.ancestors]
+            :
+                (deps.scope.ancestorsOf?.(selector) ??
+                    (selector === deps.scope.selector
+                        ? deps.scope.ancestors
+                        : [deps.scope.selector, ...deps.scope.ancestors]));
+        const base = { identifier: selector, selector, ancestors };
+        const partialIds = [];
+        let partialOp = 'CHANGE_STYLE';
+        try {
+            if (change.abTestType === 'EDIT_TEXT') {
+                if (change.content.includes('<')) {
+                    rejected.push({ index, selector, reason: 'INVALID_TEXT_CONTENT' });
+                    continue;
+                }
+                const caps = await capsOf(selector);
+                if (caps && !caps.hasText && (caps.childElementCount ?? 0) >= 1) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'TEXT_TARGET_IS_CONTAINER',
+                        detail: `container: ${caps.childElementCount} child element(s), no direct text — target the text leaf inside it`
+                    });
+                    continue;
+                }
+                const changeId = await deps.addContent({
+                    ...base,
+                    html: change.content,
+                    mode: 'replace',
+                    isTextChange: true
+                });
+                const entry = { index, selector, op: 'EDIT_TEXT', summary, changeIds: [changeId] };
+                applied.push(entry);
+                await postCheck(entry, before, measurable);
+                continue;
+            }
+            if (change.abTestType === 'DELETE_ELEMENT') {
+                const changeId = await deleteElement({ ...base, addStyle: deps.addStyle, addContent: deps.addContent });
+                applied.push({ index, selector, op: 'DELETE_ELEMENT', summary, changeIds: [changeId] });
+                continue;
+            }
+            if (change.abTestType === 'EDIT_HTML') {
+                if (htmlReplaced.has(selector)) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INVALID_SHAPE',
+                        detail: 'this selector was already replaced in this batch'
+                    });
+                    continue;
+                }
+                const gate = sanitizeReplaceHtml(change.content, {
+                    allowedImageOrigins: deps.allowedImageOrigins,
+                    allowedImageUrls: deps.allowedImageUrls
+                });
+                if (gate.ok === false) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INVALID_HTML_CONTENT',
+                        detail: JSON.stringify(gate.problem)
+                    });
+                    continue;
+                }
+                const changeId = await deps.addContent({
+                    ...base,
+                    html: gate.html,
+                    mode: 'replace'
+                });
+                htmlReplaced.add(selector);
+                const entry = { index, selector, op: 'EDIT_HTML', summary, changeIds: [changeId] };
+                applied.push(entry);
+                await postCheck(entry, before, measurable);
+                continue;
+            }
+            if (change.abTestType === 'INSERT_ELEMENT') {
+                if (!AI_INSERT_MODES.includes(change.mode)) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INVALID_MODE',
+                        detail: `insert mode: ${String(change.mode)}`
+                    });
+                    continue;
+                }
+                const insertMode = change.mode;
+                const caps = await capsOf(selector);
+                if (caps && (insertMode === 'insert' || insertMode === 'append') && (caps.isImg || !caps.canHaveChildren)) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INSERT_TARGET_NO_CHILDREN',
+                        detail: `${caps.isImg ? '<img>' : 'this element'} cannot hold children — use before / after`
+                    });
+                    continue;
+                }
+                if (caps && (insertMode === 'before' || insertMode === 'after') && caps.canInsertSibling === false) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INSERT_NO_SIBLING',
+                        detail: 'this element cannot take a sibling here — use insert / append on its container'
+                    });
+                    continue;
+                }
+                const gate = sanitizeInsertHtml(change.content, {
+                    allowedImageOrigins: deps.allowedImageOrigins,
+                    allowedImageUrls: deps.allowedImageUrls
+                });
+                if (gate.ok === false) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INVALID_HTML_CONTENT',
+                        detail: JSON.stringify(gate.problem)
+                    });
+                    continue;
+                }
+                const changeId = await insertElement({ ...base, addStyle: deps.addStyle, addContent: deps.addContent }, { html: gate.html, mode: change.mode });
+                const entry = { index, selector, op: 'INSERT_ELEMENT', summary, changeIds: [changeId] };
+                applied.push(entry);
+                await postCheck(entry, before, measurable, insertMode);
+                continue;
+            }
+            if (change.abTestType === 'MOVE_ELEMENT') {
+                if (!AI_MOVE_MODES.includes(change.mode)) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INVALID_MODE',
+                        detail: `move mode: ${String(change.mode)}`
+                    });
+                    continue;
+                }
+                const target = change.targetSelector ?? '';
+                const moveAncestors = deps.scope.ancestorsOf?.(selector) ?? deps.scope.ancestors;
+                if (!target || !moveAncestors.includes(target)) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INVALID_MOVE_TARGET',
+                        detail: `not an ancestor: ${target || '(empty)'}`
+                    });
+                    continue;
+                }
+                let targetHit;
+                try {
+                    targetHit = await deps.resolve(target);
+                }
+                catch {
+                    rejected.push({ index, selector, reason: 'INVALID_MOVE_TARGET', detail: 'target unresolved' });
+                    continue;
+                }
+                if (!targetHit.matched || targetHit.matchCount !== 1) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'INVALID_MOVE_TARGET',
+                        detail: `target matches ${targetHit.matchCount}`
+                    });
+                    continue;
+                }
+                const changeId = await deps.addMove({
+                    ...base,
+                    targetIdentifier: target,
+                    targetSelector: target,
+                    mode: change.mode
+                });
+                applied.push({ index, selector, op: 'MOVE_ELEMENT', summary, changeIds: [changeId] });
+                continue;
+            }
+            if (change.abTestType === 'CHANGE_IMAGE') {
+                const src = parseHttpUrl(change.src);
+                if (!src ||
+                    !imageSourceAllowed(change.src, {
+                        allowedImageOrigins: deps.allowedImageOrigins,
+                        allowedImageUrls: deps.allowedImageUrls
+                    })) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'UNSAFE_IMAGE_SRC',
+                        detail: src ? `origin not allowed: ${src.origin}` : 'not an http(s) url'
+                    });
+                    continue;
+                }
+                let caps = null;
+                try {
+                    caps = (await deps.getCapabilities?.(selector)) ?? null;
+                }
+                catch {
+                    caps = null;
+                }
+                const branch = caps ? resolveImageBranch(caps) : null;
+                if (branch !== 'img-src' && branch !== 'background') {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'IMAGE_TARGET_UNSUPPORTED',
+                        detail: caps ? 'neither <img> nor a background-image box' : 'capabilities unavailable'
+                    });
+                    continue;
+                }
+                partialOp = 'CHANGE_IMAGE';
+                const imageDeps = {
+                    ...base,
+                    addStyle: deps.addStyle,
+                    addContent: deps.addContent,
+                    addAttribute: deps.addAttribute
+                };
+                partialIds.push(await replaceImage(imageDeps, { branch, url: change.src }));
+                if (typeof change.alt === 'string' && change.alt) {
+                    partialIds.push(await setImageAlt(imageDeps, change.alt));
+                }
+                const entry = { index, selector, op: 'CHANGE_IMAGE', summary, changeIds: partialIds };
+                applied.push(entry);
+                await postCheck(entry, before, measurable);
+                continue;
+            }
+            if (change.abTestType === 'SET_LINK') {
+                const url = parseHttpUrl(change.url);
+                const raw = change.url;
+                if (!url || (url.origin !== deps.pageOrigin && !deps.allowedLinkUrls.includes(raw))) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'UNSAFE_LINK_URL',
+                        detail: url ? `origin not allowed: ${url.origin}` : 'not an http(s) url'
+                    });
+                    continue;
+                }
+                let caps = null;
+                try {
+                    caps = (await deps.getCapabilities?.(selector)) ?? null;
+                }
+                catch {
+                    caps = null;
+                }
+                if (!caps?.canEditLink) {
+                    rejected.push({
+                        index,
+                        selector,
+                        reason: 'LINK_TARGET_UNSUPPORTED',
+                        detail: caps ? 'canEditLink is false' : 'capabilities unavailable'
+                    });
+                    continue;
+                }
+                const changeId = await setClickAction({
+                    ...base,
+                    addStyle: deps.addStyle,
+                    addContent: deps.addContent,
+                    addAction: deps.addAction
+                }, buildActionObject({
+                    type: 'link',
+                    config: { linkURL: raw, openNewTab: !!change.newTab }
+                }));
+                applied.push({ index, selector, op: 'SET_LINK', summary, changeIds: [changeId] });
+                continue;
+            }
+            const declarations = parseStyleDeclarations(change.content);
+            if (!declarations.length) {
+                rejected.push({ index, selector, reason: 'INVALID_STYLE_CONTENT' });
+                continue;
+            }
+            for (const d of declarations) {
+                partialIds.push(await deps.addStyle({ ...base, property: d.property, value: d.value }));
+            }
+            const entry = { index, selector, op: 'CHANGE_STYLE', summary, changeIds: partialIds };
+            applied.push(entry);
+            await postCheck(entry, before, measurable);
+        }
+        catch (e) {
+            if (partialIds.length) {
+                applied.push({
+                    index,
+                    selector,
+                    op: partialOp,
+                    summary,
+                    changeIds: partialIds
+                });
+            }
+            rejected.push({
+                index,
+                selector,
+                reason: 'APPLY_FAILED',
+                detail: String(e?.message ?? e)
+            });
+        }
+    }
+    return { applied, rejected };
+}

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

@@ -0,0 +1,24 @@
+/**
+ * AI 改动里**图片地址**的来源判定 —— 换图（`CHANGE_IMAGE`）、整块重写（`EDIT_HTML`）、
+ * 插入（`INSERT_ELEMENT`）三处共用这一份，免得三道闸各写一套、口径漂移。
+ *
+ * 两条路放行，其余一律拒（fail closed）：
+ *
+ * 1. **origin 白名单**：客户页自身 + 我们的上传 / 生图域名（宿主注入）。按 origin 比，
+ *    不按前缀比 —— `https://cdn.pt.com.evil.com/x.png` 的前缀与白名单项吻合，origin 却是另一个站。
+ * 2. **本页已出现过的图片地址**：编辑器这次会话在这个页面上**自己读到**的图（`anchor-image:` /
+ *    `element-image:` 行、发给 agent 的 html 里的 `<img src>`），整串精确相等才算。
+ *    存在的理由：Shopify 这类站的图全在 `cdn.shopify.com`，不在客户页 origin 下 —— 只认 origin 的话，
+ *    AI 连「把页面上已有的商品图放进新模块」「整块重写时把原图原样写回去」都会被拒。
+ *    按整串而不是按 origin 放：放行整个 `cdn.shopify.com` 等于允许任意 Shopify 店铺的任意图片。
+ *    与 `SET_LINK` 的 `allowedLinkUrls`（本会话出现过的链接）同一个思路。
+ */
+export interface ImageSourcePolicy {
+    /** 空数组 = 这一路全拒。 */
+    allowedImageOrigins: string[];
+    /** 本会话在这个页面上读到过的图片地址（完整 URL）。缺省 = 这一路不放行任何地址。 */
+    allowedImageUrls?: string[];
+}
+/** 只认 http(s) 的绝对地址；解析失败返回 null。 */
+export declare function parseImageUrl(raw: string | null | undefined): URL | null;
+export declare function imageSourceAllowed(raw: string | null | undefined, policy: ImageSourcePolicy): boolean;

package/dist/kernel/ai/imageSource.js

@@ -0,0 +1,19 @@
+export function parseImageUrl(raw) {
+    if (!raw)
+        return null;
+    try {
+        const url = new URL(raw);
+        return url.protocol === 'http:' || url.protocol === 'https:' ? url : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function imageSourceAllowed(raw, policy) {
+    const url = parseImageUrl(raw);
+    if (!url)
+        return false;
+    if (policy.allowedImageOrigins.includes(url.origin))
+        return true;
+    return (policy.allowedImageUrls ?? []).some(known => parseImageUrl(known)?.href === url.href);
+}

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

@@ -0,0 +1,71 @@
+/**
+ * AI 新增元素时那段 HTML 的闸。
+ *
+ * ## 为什么这一道单独存在
+ *
+ * 其余四个 op 的 content 都是「不含 `<` 的纯文本」或「CSS 声明」—— 注入面靠**禁字符**就
+ * 挡住了。`INSERT_ELEMENT` 不行:它的 content 就是要被当成标记写进客户页面的,而那段
+ * HTML 由模型产出。所以这里是本项目**唯一**一处真的要审查标记的地方。
+ *
+ * ## 用真解析器,不用正则
+ *
+ * 正则挡不住这类东西:`<img/src=x onerror=alert(1)>`(无空格属性)、`<svg><script>`、
+ * `<a href="java&#115;cript:...">`(实体编码)、`<div style="background:url(javascript:...)">`。
+ * 所以走 `DOMParser` 解析成真 DOM 再逐节点审,最后**从解析结果重新序列化** ——
+ * 这一步顺带把畸形标记规整掉,写进页面的是我们看过的那份,而不是模型给的原串。
+ *
+ * ## 拒绝,而不是清洗
+ *
+ * 遇到不允许的标签/属性一律**整条拒绝**,不做「摘掉再用」:
+ *   · 清洗会静默改变意图 —— 用户看到一个和 AI 描述不一样的元素,而没有任何提示;
+ *   · 与现役 engage-editor 的口径一致(`INVALID_TEXT_CONTENT` / `INVALID_STYLE_CONTENT`
+ *     都是整条拒绝),错误码也照这个思路加。
+ *
+ * 代价是模型偶尔会因为一个多余属性被打回整条。这是有意的取舍:被打回时用户看到「这条被
+ * 跳过」并可以再问一次,而清洗后的错误元素他看不出来。
+ */
+import { type ImageSourcePolicy } from './imageSource.js';
+/**
+ * 一段插入 HTML 的字节上限。
+ *
+ * 原来是 2048 —— 按「加一个小东西」定的。2026-09-30 起方案可以是**一整块新模块**（对比表、
+ * 评价区、FAQ、购买区块），内联样式写一个这样的模块 2KB 远远不够，于是与整块重写同一档
+ * （`REPLACE_HTML_BUDGET_BYTES`）。小元素照样小，这只是上限；模型偶尔会吐一整屏 markup，仍要封顶。
+ */
+export declare const INSERT_HTML_BUDGET_BYTES = 8192;
+export type InsertHtmlReject = {
+    reason: 'EMPTY';
+} | {
+    reason: 'TOO_LARGE';
+    bytes: number;
+} | {
+    reason: 'TAG_NOT_ALLOWED';
+    detail: string;
+} | {
+    reason: 'ATTR_NOT_ALLOWED';
+    detail: string;
+} | {
+    reason: 'UNSAFE_ATTR_VALUE';
+    detail: string;
+} | {
+    reason: 'UNSAFE_IMAGE_SRC';
+    detail: string;
+};
+export type InsertHtmlOutcome = 
+/** `html` 是**重新序列化后**的那份 —— 写进页面用它，不要用原串。 */
+{
+    ok: true;
+    html: string;
+} | {
+    ok: false;
+    problem: InsertHtmlReject;
+};
+/**
+ * 审查并规整一段将被插入客户页的 HTML。
+ *
+ * 依赖 `DOMParser`(产品页与 jsdom 都有)。拿不到解析器时**一律拒绝** ——
+ * 「审不了就放过」是这类闸最糟的降级。
+ */
+export declare function sanitizeInsertHtml(raw: string, 
+/** `img[src]` 的来源规则（见 `imageSource.ts`）。缺省 = 任何 img 都拒（fail closed）。 */
+images?: ImageSourcePolicy): InsertHtmlOutcome;