@ptengine/inline-editor 0.0.0-stage → 0.1.1

package/dist/chrome/topbarPrimitives.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ChromeDivider() {
+    return _jsx("span", { "aria-hidden": true, className: "mx-2 h-[18px] w-px shrink-0 bg-[#e7e8e9]" });
+}
+export function ChromeIconButton({ label, active, className = '', children, ...rest }) {
+    return (_jsx("button", { type: "button", title: label, "aria-label": label, "aria-pressed": active, className: `inline-flex size-[30px] shrink-0 items-center justify-center rounded-lg
+                text-[rgba(16,28,31,0.7)] transition-colors
+                enabled:hover:bg-[rgba(16,28,31,0.08)] enabled:hover:text-[rgba(16,28,31,0.9)]
+                disabled:cursor-default disabled:text-[rgba(16,28,31,0.4)]
+                ${active ? 'bg-[rgba(16,28,31,0.08)] text-[rgba(16,28,31,0.9)]' : ''} ${className}`, ...rest, children: children }));
+}
+export function ChromeBackButton({ label, className = '', children, ...rest }) {
+    return (_jsx("button", { type: "button", title: label, "aria-label": label, className: `inline-flex size-[30px] shrink-0 items-center justify-center rounded-md
+                border border-[#e5e7eb] bg-white text-[#666] transition-colors
+                hover:border-[#d0d0d0] hover:bg-[#fafafa] hover:text-[#333] ${className}`, ...rest, children: children }));
+}
+export function ChromeTextButton({ active, className = '', children, ...rest }) {
+    return (_jsx("button", { type: "button", "aria-pressed": active, className: `inline-flex h-[30px] shrink-0 items-center gap-[5px] whitespace-nowrap
+                rounded-lg border border-[#ececef] bg-white px-3 text-xs font-medium
+                text-[#52525b] transition-colors
+                enabled:hover:border-[rgba(16,28,31,0.2)] enabled:hover:bg-[rgba(16,28,31,0.08)]
+                enabled:hover:text-[rgba(16,28,31,0.9)]
+                disabled:cursor-default disabled:opacity-50
+                ${active ? 'border-[rgba(16,28,31,0.2)] bg-[rgba(16,28,31,0.08)] text-[rgba(16,28,31,0.9)]' : ''} ${className}`, ...rest, children: children }));
+}
+export function ChromePrimaryButton({ className = '', children, ...rest }) {
+    return (_jsx("button", { type: "button", className: `inline-flex h-[30px] shrink-0 items-center gap-1.5 whitespace-nowrap
+                rounded-md bg-[#12262b] px-3 text-xs font-medium text-white transition-colors
+                enabled:hover:bg-[#1c3a42] disabled:cursor-default disabled:opacity-50 ${className}`, ...rest, children: children }));
+}
+export function ChromeSegmented({ children, className = '', ...rest }) {
+    return (_jsx("div", { className: `inline-flex shrink-0 items-center gap-px rounded-lg bg-[#f3f4f4] p-0.5 ${className}`, ...rest, children: children }));
+}
+export function ChromeSegment({ active, className = '', children, ...rest }) {
+    return (_jsx("button", { type: "button", "aria-pressed": active, className: `inline-flex h-[26px] shrink-0 items-center justify-center gap-1.5
+                rounded-md px-2.5 text-xs transition-colors ${active
+            ? 'bg-white font-medium text-[rgba(16,28,31,0.9)] shadow-[0_1px_2px_rgba(16,28,31,0.08)]'
+            : 'text-[#707779] enabled:hover:bg-[#e7e8e9] enabled:hover:text-[rgba(16,28,31,0.7)]'} ${className}`, ...rest, children: children }));
+}

package/dist/chrome/useDismissOnOutside.d.ts

@@ -0,0 +1,23 @@
+import { type RefObject } from 'react';
+/**
+ * 「ESC 关 + 点外部关」—— 编辑器里所有手写浮层共用的一条规则。
+ *
+ * 为什么手写而不是用 Radix 的 Popover/DropdownMenu：同 `EditorChrome` 当初拒掉 Radix
+ * `Select` 的理由 —— 它们在 jsdom 里点不开（要真实 pointer 事件 + ResizeObserver），
+ * 接进来等于这些入口**没人守**。而本包所有浮层（选中框、工具条、样式面板、7 个弹框）
+ * 本来就是手写定位的，不该为了两个下拉再引入第二套机制。
+ *
+ * ⚠️ **触发器必须被摘出去。** 不摘的话点触发器的顺序是：pointerdown → 本浮层关 →
+ * click → 触发器自己的 onClick 又把它打开，净效果是浮层**永远关不上**，且零报错。
+ * 触发器用 `data-<triggerAttr>` 自报家门，这里按 `closest()` 把它整棵子树排除
+ * （点到按钮里的图标也算）。
+ *
+ * ⚠️ 画布是跨域 iframe，**点画布不会触发这里** —— 里面的 pointerdown 不冒泡到产品页
+ * document。这是刻意留的：改动清单里点一条要在画布中选中那个元素，用户得在两边来回点。
+ *
+ * @param open      关着时不挂任何监听（不是挂了再判断）。
+ * @param ref       浮层根节点；它内部的点击一律放行。
+ * @param onClose   关闭回调。**引用要稳定**，否则每次 render 都重挂一轮监听。
+ * @param triggerAttr 触发器上的 data 属性名，不含 `data-` 前缀。
+ */
+export declare function useDismissOnOutside(open: boolean, ref: RefObject<HTMLElement | null>, onClose: () => void, triggerAttr: string): void;

package/dist/chrome/useDismissOnOutside.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+export function useDismissOnOutside(open, ref, onClose, triggerAttr) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        const onPointerDown = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            if (ref.current?.contains(target))
+                return;
+            if (target.closest?.(`[data-${triggerAttr}]`))
+                return;
+            onClose();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('pointerdown', onPointerDown);
+        };
+    }, [open, ref, onClose, triggerAttr]);
+}

package/dist/dialogs/ClickActionDialog.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 「点击动作」配置弹框。
+ *
+ * 字段**按类型动态渲染**（`INLINE_ACTION_TYPES[].fields`），不是把 7 种类型的字段全渲染
+ * 出来再靠 CSS 隐藏 —— 后者会让用户把电话号码填进一个其实不会被采用的框里。
+ *
+ * ⚠️ 每种类型的已填内容**各存一份**（`configs` 按类型分桶），切走再切回来还在。
+ * 这不只是体验：产出的 `clickActionConfig` 本来就是分桶的完整对象
+ * （见 `buildActionObject` 的注释），只留当前类型那一份会与现役产出对不上。
+ */
+export interface ClickActionDialogProps {
+    open: boolean;
+    /**
+     * 元素上已有的动作对象（`changeElementAction.action` 的形状）；`null` = 还没配过。
+     * 有值时回填，而不是从空白开始。
+     */
+    seed: {
+        clickActionType?: string;
+        clickActionConfig?: Record<string, unknown>;
+    } | null;
+    onOpenChange: (open: boolean) => void;
+    onApply: (action: Record<string, unknown>) => void | Promise<unknown>;
+}
+export declare function ClickActionDialog({ open, seed, onOpenChange, onApply }: ClickActionDialogProps): import("react").JSX.Element;

package/dist/dialogs/ClickActionDialog.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Switch, Textarea } from '@ptengine/design-components';
+import { INLINE_ACTION_TYPES, buildActionObject, isActionComplete } from './actionTypes.js';
+function seedToConfigs(seed) {
+    const configs = {};
+    for (const spec of INLINE_ACTION_TYPES) {
+        const fromSeed = seed?.clickActionConfig?.[spec.key];
+        configs[spec.key] = { ...spec.defaults, ...fromSeed };
+    }
+    return configs;
+}
+export function ClickActionDialog({ open, seed, onOpenChange, onApply }) {
+    const { t } = useTranslation();
+    const [type, setType] = useState('link');
+    const [configs, setConfigs] = useState(() => seedToConfigs(seed));
+    useEffect(() => {
+        if (!open)
+            return;
+        setType(seed?.clickActionType ?? 'link');
+        setConfigs(seedToConfigs(seed));
+    }, [open, seed]);
+    const spec = useMemo(() => INLINE_ACTION_TYPES.find(a => a.key === type), [type]);
+    const config = configs[type] ?? {};
+    const complete = isActionComplete(type, config);
+    const setField = (key, value) => setConfigs(prev => ({ ...prev, [type]: { ...prev[type], [key]: value } }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "click-action-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.action.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.action.type') }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: INLINE_ACTION_TYPES.map(item => (_jsx("button", { type: "button", "data-testid": `action-type-${item.key}`, "aria-pressed": type === item.key, onClick: () => setType(item.key), className: `rounded border px-2 py-1 text-[12px] ${type === item.key
+                                            ? 'border-[#00A92E] bg-[#E9F9EE] text-[#091E42]'
+                                            : 'border-[#DFE1E6] text-[#6B778C]'}`, children: t(item.labelKey) }, item.key))) })] }), spec?.fields.map(field => (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t(field.labelKey) }), field.kind === 'switch' ? (_jsx(Switch, { "data-testid": `action-field-${field.key}`, checked: Boolean(config[field.key]), onCheckedChange: checked => setField(field.key, checked) })) : field.kind === 'textarea' ? (_jsx(Textarea, { "data-testid": `action-field-${field.key}`, rows: 4, value: String(config[field.key] ?? ''), onChange: e => setField(field.key, e.target.value) })) : (_jsx(Input, { "data-testid": `action-field-${field.key}`, type: field.kind === 'tel' ? 'tel' : 'text', value: String(config[field.key] ?? ''), onChange: e => setField(field.key, e.target.value) }))] }, field.key)))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "action-apply", disabled: !complete, onClick: () => {
+                                const { [type]: current, ...others } = configs;
+                                void onApply(buildActionObject({ type, config: current, otherConfigs: others }));
+                                onOpenChange(false);
+                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+}

package/dist/dialogs/HtmlEditDialog.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `</>` 编辑 HTML —— 替掉画布调试页的第二个 `window.prompt`。
+ *
+ * 对齐现役 `HtmlEditDialog.vue`：
+ * - seed 是**整个元素的 outerHTML**（不是 innerHTML），且 seed 时就已剥 script/noscript
+ * - 确认后产出 `elementContent` + `mode: 'replace'`，**不带 `isTextChange`**
+ *   （带了就变成「换 innerHTML」，语义完全不同）
+ *
+ * 与现役的两点差异，都是有意的：
+ * 1. 现役用 CodeMirror；这里用等宽 `Textarea`。引一个编辑器依赖只为编辑一小段
+ *    HTML 不划算，而且 `</>` 的典型用法是微调而不是写整页。
+ * 2. 现役在**客户页文档**里建临时节点做校验；我们在产品页做（见 htmlValidation.ts）——
+ *    往客户页塞节点正是 C5 禁止的。
+ */
+export interface HtmlEditDialogProps {
+    open: boolean;
+    /** 由 `commands.readOuterHtml()` 取到的 outerHTML（已剥 script）。 */
+    seed: string;
+    onOpenChange: (open: boolean) => void;
+    /** 确认。宿主接到 `changeList.addContent({ mode:'replace', html })`。 */
+    onApply: (html: string) => void | Promise<unknown>;
+}
+export declare function HtmlEditDialog({ open, seed, onOpenChange, onApply }: HtmlEditDialogProps): import("react").JSX.Element;

package/dist/dialogs/HtmlEditDialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AlertTriangle } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Textarea } from '@ptengine/design-components';
+import { validateHtml } from './htmlValidation.js';
+export function HtmlEditDialog({ open, seed, onOpenChange, onApply }) {
+    const { t } = useTranslation();
+    const [html, setHtml] = useState(seed);
+    useEffect(() => {
+        if (open)
+            setHtml(seed);
+    }, [open, seed]);
+    const result = useMemo(() => validateHtml(html), [html]);
+    const changed = html.trim() !== seed.trim();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[640px]", "data-testid": "html-edit-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('inlineCanvas.html.title', '编辑 HTML') }), _jsx(DialogDescription, { children: t('inlineCanvas.html.tip', '编辑的是整个元素（outerHTML）。保存后 SDK 会用它整体替换原元素。') })] }), _jsx(Textarea, { "data-testid": "html-edit-input", value: html, onChange: e => setHtml(e.target.value), spellCheck: false, className: "h-72 font-mono text-xs leading-5" }), result.strippedScriptCount > 0 && (_jsxs("p", { "data-testid": "html-edit-script-warning", className: "flex items-center gap-1.5 text-xs text-[#8A6D00]", children: [_jsx(AlertTriangle, { className: "size-3.5" }), t('inlineCanvas.html.scriptStripped', {
+                            count: result.strippedScriptCount,
+                            defaultValue: '其中 {{count}} 段 script/noscript 会被移除'
+                        })] })), result.error && (_jsx("p", { "data-testid": "html-edit-error", className: "text-xs text-[#DE350B]", children: t(result.error) })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "html-edit-apply", disabled: !result.ok || !changed, onClick: () => {
+                                void onApply(html.trim());
+                                onOpenChange(false);
+                            }, children: t('common.apply', '应用') })] })] }) }));
+}

package/dist/dialogs/ImageEditDialog.d.ts

@@ -0,0 +1,30 @@
+import type { ElementCapabilities } from '@ptengine/inline-core/protocol';
+import { type ImageEditBranch } from './imageEdit.js';
+/**
+ * 「替换图片」弹框。
+ *
+ * ⚠️ **同一个按钮，按元素类型产出三种完全不同的 change**（见 `imageEdit.ts`）：
+ * `<img>` → 改 src；有背景图 → 改 `background-image`；其它 → 插一个新 `<img>`。
+ * 弹框只负责把分支和参数交出去，判分支的逻辑不在这里重写。
+ *
+ * 判错的后果不是报错，是「点了替换图片、图没变」—— 比如对一个背景图 div 产出
+ * `changeElementAttribute src`，属性确实被设上了，但 div 根本不吃 src。所以界面上
+ * **把分支显示出来**：用户能看见这次会改什么，不至于对着没反应的图猜。
+ */
+export interface ImageEditApply {
+    branch: ImageEditBranch;
+    url: string;
+    /** 仅 `insert` 分支用：插到哪。 */
+    mode?: 'insert' | 'append' | 'before' | 'after';
+}
+export interface ImageEditDialogProps {
+    open: boolean;
+    capabilities: ElementCapabilities | null;
+    /** 当前图片地址，用于回填。 */
+    seed?: string;
+    onOpenChange: (open: boolean) => void;
+    onApply: (input: ImageEditApply) => void | Promise<unknown>;
+    /** 本地选图后换成 URL。宿主注入（包里不碰后端端点）。不传则只能填 URL。 */
+    uploadImage?: (blob: Blob) => Promise<string>;
+}
+export declare function ImageEditDialog({ open, capabilities, seed, onOpenChange, onApply, uploadImage }: ImageEditDialogProps): import("react").JSX.Element;

package/dist/dialogs/ImageEditDialog.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input } from '@ptengine/design-components';
+import { pasteModes } from '../kernel/selection/toolbarButtons.js';
+import { resolveImageBranch } from './imageEdit.js';
+export function ImageEditDialog({ open, capabilities, seed = '', onOpenChange, onApply, uploadImage }) {
+    const { t } = useTranslation();
+    const [url, setUrl] = useState(seed);
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    const fileRef = useRef(null);
+    const branch = capabilities ? resolveImageBranch(capabilities) : 'insert';
+    const modes = useMemo(() => (capabilities ? pasteModes(capabilities) : []), [capabilities]);
+    const [mode, setMode] = useState('append');
+    useEffect(() => {
+        if (!open)
+            return;
+        setUrl(seed);
+        setError(null);
+        if (modes.length > 0)
+            setMode(modes[0]);
+    }, [open, seed, modes]);
+    const onPick = async (file) => {
+        if (!file || !uploadImage)
+            return;
+        setUploading(true);
+        setError(null);
+        try {
+            setUrl(await uploadImage(file));
+        }
+        catch (e) {
+            setError(String(e?.message ?? e));
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const noPlace = branch === 'insert' && modes.length === 0;
+    const canApply = url.trim().length > 0 && !uploading && !noPlace;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "image-edit-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.image.replaceTitle') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { "data-testid": "image-edit-branch", className: "rounded bg-[#F4F5F7] px-2 py-1 text-[11px] leading-4 text-[#6B778C]", children: branch === 'img-src'
+                                ? '改 <img> 的 src'
+                                : branch === 'background'
+                                    ? '改 background-image'
+                                    : '插入一个新的 <img>' }), _jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.image.url') }), _jsx(Input, { "data-testid": "image-edit-url", value: url, onChange: e => setUrl(e.target.value) })] }), uploadImage && (_jsxs("div", { children: [_jsx("input", { ref: fileRef, type: "file", accept: "image/*", "data-testid": "image-edit-file", className: "hidden", onChange: e => void onPick(e.target.files?.[0]) }), _jsx(Button, { variant: "secondary", size: "sm", "data-testid": "image-edit-upload", disabled: uploading, onClick: () => fileRef.current?.click(), children: uploading
+                                        ? t('inlineCanvas.image.uploading')
+                                        : t('inlineCanvas.image.upload') })] })), branch === 'insert' && modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.image.insertPosition') }), _jsx("div", { className: "flex gap-1.5", children: modes.map(m => (_jsx("button", { type: "button", "data-testid": `image-edit-mode-${m}`, "aria-pressed": mode === m, onClick: () => setMode(m), className: `rounded border px-2 py-1 text-[12px] ${mode === m
+                                            ? 'border-[#00A92E] bg-[#E9F9EE] text-[#091E42]'
+                                            : 'border-[#DFE1E6] text-[#6B778C]'}`, children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), error && (_jsx("p", { "data-testid": "image-edit-error", className: "text-[11px] text-[#DE350B]", children: error }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "image-edit-apply", disabled: !canApply, onClick: () => {
+                                void onApply({
+                                    branch,
+                                    url: url.trim(),
+                                    mode: branch === 'insert' ? mode : undefined
+                                });
+                                onOpenChange(false);
+                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+}

package/dist/dialogs/ImageSettingDialog.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 「图片设置」弹框 —— 本期**只有 alt**（与 `toolbarButtons.ts` 里那条注释一致）。
+ *
+ * 产出 `changeElementAttribute` 的 `alt`。⚠️ 清空 alt 与「不改 alt」是两回事：
+ * 前者要产出一条 `value` 省略的 change（= 移除属性），后者应该什么都不产出。
+ * 混为一谈的话，用户只是打开看一眼再关掉，也会莫名多出一条改动。
+ */
+export interface ImageSettingDialogProps {
+    open: boolean;
+    /** 当前 alt，用于回填。 */
+    seed?: string;
+    onOpenChange: (open: boolean) => void;
+    /** `alt` 为空串表示**移除该属性**。 */
+    onApply: (alt: string) => void | Promise<unknown>;
+}
+export declare function ImageSettingDialog({ open, seed, onOpenChange, onApply }: ImageSettingDialogProps): import("react").JSX.Element;

package/dist/dialogs/ImageSettingDialog.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input } from '@ptengine/design-components';
+export function ImageSettingDialog({ open, seed = '', onOpenChange, onApply }) {
+    const { t } = useTranslation();
+    const [alt, setAlt] = useState(seed);
+    useEffect(() => {
+        if (open)
+            setAlt(seed);
+    }, [open, seed]);
+    const changed = alt !== seed;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "image-setting-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.image.settingTitle') }) }), _jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.image.alt') }), _jsx(Input, { "data-testid": "image-setting-alt", value: alt, onChange: e => setAlt(e.target.value) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "image-setting-apply", disabled: !changed, onClick: () => {
+                                void onApply(alt);
+                                onOpenChange(false);
+                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+}

package/dist/dialogs/InsertElementDialog.d.ts

@@ -0,0 +1,23 @@
+import type { ElementCapabilities } from '@ptengine/inline-core/protocol';
+/**
+ * 「插入元素」—— 往选中元素的内部/前后插一段自己写的 HTML。
+ *
+ * 产出 `elementContent`(54)，mode 为 insert/append/before/after（**不是 replace** ——
+ * replace 会把目标元素整个换掉，那是 `</>` 的语义）。
+ *
+ * ⚠️ 用户写的 HTML **原样插入，不加包装**。这和「替换图片」那条分支刻意不同：
+ * 那里插的是我们自己生成的 `<img>`，包一层带防撞号的 `div` 是为了给它一个稳定的选择器
+ * 锚点；而用户手写的 HTML 该落成什么样就是什么样，凭空多一层 `div` 会把他的布局改坏，
+ * 且他完全不知道那层是哪来的。
+ */
+export interface InsertElementApply {
+    html: string;
+    mode: 'insert' | 'append' | 'before' | 'after';
+}
+export interface InsertElementDialogProps {
+    open: boolean;
+    capabilities: ElementCapabilities | null;
+    onOpenChange: (open: boolean) => void;
+    onApply: (input: InsertElementApply) => void | Promise<unknown>;
+}
+export declare function InsertElementDialog({ open, capabilities, onOpenChange, onApply }: InsertElementDialogProps): import("react").JSX.Element;

package/dist/dialogs/InsertElementDialog.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AlertTriangle } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Textarea } from '@ptengine/design-components';
+import { pasteModes } from '../kernel/selection/toolbarButtons.js';
+import { validateHtml } from './htmlValidation.js';
+export function InsertElementDialog({ open, capabilities, onOpenChange, onApply }) {
+    const { t } = useTranslation();
+    const [html, setHtml] = useState('');
+    const modes = useMemo(() => (capabilities ? pasteModes(capabilities) : []), [capabilities]);
+    const [mode, setMode] = useState('append');
+    useEffect(() => {
+        if (!open)
+            return;
+        setHtml('');
+        if (modes.length > 0)
+            setMode(modes[0]);
+    }, [open, modes]);
+    const result = useMemo(() => validateHtml(html), [html]);
+    const canApply = html.trim().length > 0 && result.ok && modes.length > 0;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[640px]", "data-testid": "insert-element-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.insert.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.html') }), _jsx(Textarea, { "data-testid": "insert-html", rows: 8, className: "font-mono text-[12px]", value: html, onChange: e => setHtml(e.target.value) })] }), modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.position') }), _jsx("div", { className: "flex gap-1.5", children: modes.map(m => (_jsx("button", { type: "button", "data-testid": `insert-mode-${m}`, "aria-pressed": mode === m, onClick: () => setMode(m), className: `rounded border px-2 py-1 text-[12px] ${mode === m
+                                            ? 'border-[#00A92E] bg-[#E9F9EE] text-[#091E42]'
+                                            : 'border-[#DFE1E6] text-[#6B778C]'}`, children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), html.trim().length > 0 && result.error && (_jsxs("p", { "data-testid": "insert-error", className: "flex items-start gap-1.5 text-[11px] leading-4 text-[#DE350B]", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), t(result.error)] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "insert-apply", disabled: !canApply, onClick: () => {
+                                void onApply({ html: html.trim(), mode });
+                                onOpenChange(false);
+                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+}

package/dist/dialogs/ReplaceVideoDialog.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 「替换视频」—— 产出 `changeElementAttribute`(55) 的 `src`。
+ *
+ * 覆盖两种元素（能力位 `isVideo` 的判据，见 capabilities.ts）：
+ * `<video>`，以及 src 含 YouTube 标记的 `<iframe>`。两者都是改 `src`，所以**不像
+ * 「替换图片」那样有三个分支** —— 那边要分 img/背景图/插入，这边只有一条路。
+ *
+ * ⚠️ `<video>` 可能把地址写在子 `<source>` 上而不是自己的 `src`。这时设 `src` 仍然有效：
+ * 按 HTML 规范，video 自己有 `src` 属性时，子 `<source>` 会被忽略。
+ */
+export interface ReplaceVideoDialogProps {
+    open: boolean;
+    /** 当前地址，用于回填。 */
+    seed?: string;
+    onOpenChange: (open: boolean) => void;
+    onApply: (url: string) => void | Promise<unknown>;
+}
+export declare function ReplaceVideoDialog({ open, seed, onOpenChange, onApply }: ReplaceVideoDialogProps): import("react").JSX.Element;

package/dist/dialogs/ReplaceVideoDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input } from '@ptengine/design-components';
+export function ReplaceVideoDialog({ open, seed = '', onOpenChange, onApply }) {
+    const { t } = useTranslation();
+    const [url, setUrl] = useState(seed);
+    useEffect(() => {
+        if (open)
+            setUrl(seed);
+    }, [open, seed]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "replace-video-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.video.title') }) }), _jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.video.url') }), _jsx(Input, { "data-testid": "replace-video-url", value: url, onChange: e => setUrl(e.target.value) }), _jsx("p", { className: "mt-1.5 text-[11px] leading-4 text-[#6B778C]", children: t('inlineCanvas.video.hint') })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "replace-video-apply", disabled: url.trim().length === 0, onClick: () => {
+                                void onApply(url.trim());
+                                onOpenChange(false);
+                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+}

package/dist/dialogs/actionTypes.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 点击动作的类型表 —— 逐字段移植现役
+ * `components/context-menu/actions/actions.config.ts`。
+ *
+ * ⚠️ **只保留 `effective` 含 `inline` 的 7 种。**
+ * 现役共 9 种，但 `closePopup` 只对 popup/form 生效、`showMessage` 只对 form 生效
+ * （`actions.config.ts:84-89, 123-129` 的 `effective` 字段）。画布是 inline 场景，
+ * 把那两种列出来会让用户配一个 SDK 侧根本不会执行的动作 —— 保存成功、上线无效果、
+ * 且没有任何报错。
+ *
+ * ⚠️ config 的**字段名逐字照抄**：它们直接进 `changeElementAction.action.object
+ * .clickActionConfig`，SDK 按名取值。改名不会报错，只会让动作静默失效。
+ */
+export type InlineActionKey = 'link' | 'line' | 'tel' | 'openPopup' | 'copiedText' | 'downloadFile' | 'runCode';
+export interface ActionFieldSpec {
+    /** 直接进 clickActionConfig 的 key，**不可改名**。 */
+    key: string;
+    labelKey: string;
+    kind: 'text' | 'url' | 'tel' | 'textarea' | 'switch';
+}
+export interface ActionTypeSpec {
+    key: InlineActionKey;
+    labelKey: string;
+    fields: ActionFieldSpec[];
+    /** 该类型的默认 config（现役 `xxxConfig` 常量，逐字段一致）。 */
+    defaults: Record<string, unknown>;
+}
+export declare const INLINE_ACTION_TYPES: ActionTypeSpec[];
+/**
+ * 组装写进 `changeElementAction.action` 的对象。
+ *
+ * ⚠️ 形状逐字段对齐 `defaultActionsConfig`：
+ * `clickActionConfig` 是**按类型分桶的完整对象**（每种类型一个 key），
+ * 不是「只放当前选中类型的那一份」。现役 `actions.config.ts:130+` 用 reduce 把 9 种
+ * 的默认 config 全铺开，切换类型时各自的填写内容都还在。
+ * 只塞当前类型的话，用户切走再切回来填过的内容就没了。
+ *
+ * ⚠️ `enableTrackEvent` 在 TS 声明 `ExperienceAction` 里**没有**，但实际组装有
+ * （`aiModificationService.ts:286`）。缺失是否影响 SDK 点击埋点**未确证** ——
+ * 这里照写，与现役产出保持一致。
+ */
+export interface BuildActionInput {
+    type: InlineActionKey;
+    /** 当前类型的字段值。 */
+    config: Record<string, unknown>;
+    /** 其余类型已填的内容（切换类型时保留）。 */
+    otherConfigs?: Record<string, Record<string, unknown>>;
+    enableTrackEvent?: boolean;
+    trackEventConfig?: Record<string, unknown>;
+}
+export declare function buildActionObject(input: BuildActionInput): Record<string, unknown>;
+/** 该类型的必填字段是否都填了。空的动作保存下去等于配了个不生效的按钮。 */
+export declare function isActionComplete(type: InlineActionKey, config: Record<string, unknown>): boolean;

package/dist/dialogs/actionTypes.js

@@ -0,0 +1,74 @@
+export const INLINE_ACTION_TYPES = [
+    {
+        key: 'link',
+        labelKey: 'inlineCanvas.action.link',
+        defaults: { linkType: 'absolute', linkURL: '', openNewTab: false, closePopup: false },
+        fields: [
+            { key: 'linkURL', labelKey: 'inlineCanvas.action.linkUrl', kind: 'url' },
+            { key: 'openNewTab', labelKey: 'inlineCanvas.action.openNewTab', kind: 'switch' }
+        ]
+    },
+    {
+        key: 'line',
+        labelKey: 'inlineCanvas.action.line',
+        defaults: { linkType: 'absolute', linkURL: '', openNewTab: true, closePopup: false },
+        fields: [
+            { key: 'linkURL', labelKey: 'inlineCanvas.action.lineUrl', kind: 'url' },
+            { key: 'openNewTab', labelKey: 'inlineCanvas.action.openNewTab', kind: 'switch' }
+        ]
+    },
+    {
+        key: 'tel',
+        labelKey: 'inlineCanvas.action.tel',
+        defaults: { phoneNumber: '' },
+        fields: [{ key: 'phoneNumber', labelKey: 'inlineCanvas.action.phone', kind: 'tel' }]
+    },
+    {
+        key: 'openPopup',
+        labelKey: 'inlineCanvas.action.openPopup',
+        defaults: { popupId: '' },
+        fields: [{ key: 'popupId', labelKey: 'inlineCanvas.action.popupId', kind: 'text' }]
+    },
+    {
+        key: 'copiedText',
+        labelKey: 'inlineCanvas.action.copiedText',
+        defaults: { text: '' },
+        fields: [{ key: 'text', labelKey: 'inlineCanvas.action.copyText', kind: 'textarea' }]
+    },
+    {
+        key: 'downloadFile',
+        labelKey: 'inlineCanvas.action.downloadFile',
+        defaults: { fileURL: '' },
+        fields: [{ key: 'fileURL', labelKey: 'inlineCanvas.action.fileUrl', kind: 'url' }]
+    },
+    {
+        key: 'runCode',
+        labelKey: 'inlineCanvas.action.runCode',
+        defaults: { code: '', codeId: '', closePopup: false },
+        fields: [{ key: 'code', labelKey: 'inlineCanvas.action.code', kind: 'textarea' }]
+    }
+];
+export function buildActionObject(input) {
+    const clickActionConfig = {};
+    for (const spec of INLINE_ACTION_TYPES) {
+        clickActionConfig[spec.key] =
+            spec.key === input.type
+                ? { ...spec.defaults, ...input.config }
+                : { ...spec.defaults, ...(input.otherConfigs?.[spec.key] ?? {}) };
+    }
+    return {
+        enableClickAction: true,
+        clickActionType: input.type,
+        clickActionConfig,
+        enableTrackEvent: input.enableTrackEvent ?? false,
+        trackEventConfig: input.trackEventConfig ?? { eventName: '', eventId: '' }
+    };
+}
+export function isActionComplete(type, config) {
+    const spec = INLINE_ACTION_TYPES.find(a => a.key === type);
+    if (!spec)
+        return false;
+    return spec.fields
+        .filter(f => f.kind !== 'switch')
+        .every(f => String(config[f.key] ?? '').trim().length > 0);
+}

package/dist/dialogs/htmlValidation.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `</>`（编辑 HTML）的输入校验 —— 移植现役 `HtmlEditDialog.vue:135-150` 的做法：
+ * 用 `<template>` 解析一遍，看解析结果是否与输入等价。
+ *
+ * ⚠️ **为什么用 `<template>` 而不是 `innerHTML` 到一个 `<div>`**：
+ * `<div>` 会对 `<td>` / `<tr>` / `<option>` 这类**需要正确宿主**的标签做纠错性丢弃 ——
+ * 用户编辑一个表格单元格时，`<td>x</td>` 会被解析成裸文本 `x`，校验「通过」了，
+ * 应用后单元格结构却塌掉。`<template>` 的解析上下文是 content model 无关的，不丢。
+ *
+ * ⚠️ 校验在**产品页文档**里做，不是客户页。现役是在客户页文档里建临时节点
+ * （`goog$dom$getOwnerDocument(this.appliedElement).createElement('template')`）——
+ * 我们不那么做：那是往客户页塞节点，正是 C5 禁止的。
+ * 代价是极少数依赖客户页自定义元素定义的解析差异；换来的是零注入。
+ */
+export interface HtmlValidationResult {
+    ok: boolean;
+    /** 解析后规范化的 HTML。用于提示「你的写法会被浏览器改写成这样」。 */
+    normalized: string;
+    /** 被剥掉的 `<script>`/`<noscript>` 数量 —— 应用侧无条件剥，这里提前告知。 */
+    strippedScriptCount: number;
+    /** 失败原因（i18n key 或裸文案）。`ok` 为真时为 null。 */
+    error: string | null;
+}
+export declare function validateHtml(input: string): HtmlValidationResult;

package/dist/dialogs/htmlValidation.js

@@ -0,0 +1,37 @@
+const EMPTY = {
+    ok: false,
+    normalized: '',
+    strippedScriptCount: 0,
+    error: 'inlineCanvas.html.errorEmpty'
+};
+export function validateHtml(input) {
+    const html = input.trim();
+    if (!html)
+        return EMPTY;
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const scriptLike = template.content.querySelectorAll('script, noscript');
+    const strippedScriptCount = scriptLike.length;
+    if (template.content.children.length === 0) {
+        return {
+            ok: false,
+            normalized: template.innerHTML,
+            strippedScriptCount,
+            error: 'inlineCanvas.html.errorNoElement'
+        };
+    }
+    if (template.content.children.length > 1) {
+        return {
+            ok: false,
+            normalized: template.innerHTML,
+            strippedScriptCount,
+            error: 'inlineCanvas.html.errorMultipleRoots'
+        };
+    }
+    return {
+        ok: true,
+        normalized: template.innerHTML,
+        strippedScriptCount,
+        error: null
+    };
+}