@ptengine/inline-editor 0.1.5 → 0.1.7

package/dist/dialogs/ImageEditDialog.js

@@ -1,57 +1,95 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPreview } from './MediaPreview.js';
 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 { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Tabs, TabsList, TabsTrigger, Label } 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 [source, setSource] = useState('link');
+    const [uploaded, setUploaded] = useState('');
+    const [ready, setReady] = useState(false);
+    const epoch = useRef(0);
     const [uploading, setUploading] = useState(false);
     const [error, setError] = useState(null);
+    const lastFileRef = useRef(undefined);
     const fileRef = useRef(null);
     const branch = capabilities ? resolveImageBranch(capabilities) : 'insert';
     const modes = useMemo(() => (capabilities ? pasteModes(capabilities) : []), [capabilities]);
+    const modeKey = modes.join(',');
     const [mode, setMode] = useState('append');
     useEffect(() => {
         if (!open)
             return;
         setUrl(seed);
+        setUploaded('');
+        setSource('link');
+        setReady(false);
+        epoch.current++;
         setError(null);
+        setUploading(false);
         if (modes.length > 0)
             setMode(modes[0]);
-    }, [open, seed, modes]);
+        return () => {
+            epoch.current++;
+        };
+    }, [open, seed, modeKey]);
     const onPick = async (file) => {
         if (!file || !uploadImage)
             return;
+        if (!file.type.startsWith('image/') || file.size > 10 * 1024 * 1024) {
+            setError(t('inlineCanvas.review.imageLimit', '请选择不超过 10 MB 的图片'));
+            return;
+        }
+        lastFileRef.current = file;
+        const request = ++epoch.current;
         setUploading(true);
         setError(null);
         try {
-            setUrl(await uploadImage(file));
+            const next = await uploadImage(file);
+            if (request === epoch.current) {
+                setUploaded(next);
+                setReady(false);
+            }
         }
         catch (e) {
-            setError(String(e?.message ?? e));
+            if (request === epoch.current)
+                setError(String(e?.message ?? e));
         }
         finally {
-            setUploading(false);
+            if (request === epoch.current)
+                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'
+    const selectedUrl = source === 'upload' ? uploaded : url.trim();
+    const canApply = !!selectedUrl && ready && !uploading && !noPlace;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "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: [seed && (_jsxs("details", { children: [_jsx("summary", { className: "text-xs", children: t('inlineCanvas.review.currentMedia', '当前媒体') }), _jsx(MediaPreview, { url: seed })] })), uploadImage && (_jsx(Tabs, { value: source, onValueChange: v => {
+                                setSource(v);
+                                setReady(false);
+                            }, children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "upload", children: t('inlineCanvas.review.uploadFile', '上传文件') }), _jsx(TabsTrigger, { value: "link", children: t('inlineCanvas.review.useLink', '使用链接') })] }) })), _jsx("p", { "data-testid": "image-edit-branch", className: "rounded bg-[#F4F5F7] px-2 py-1 text-xs leading-4 text-[#6B778C]", children: branch === 'img-src'
+                                ? t('inlineCanvas.review.replaceImage', '替换当前图片')
                                 : 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.review.replaceBackground', '替换背景图片')
+                                    : t('inlineCanvas.review.insertImage', '插入新图片') }), _jsxs("div", { hidden: source !== 'link', children: [_jsx(Label, { htmlFor: "image-edit-url", children: t('inlineCanvas.image.url') }), _jsx(Input, { id: "image-edit-url", "aria-label": t('inlineCanvas.image.url'), "data-testid": "image-edit-url", value: url, onChange: e => {
+                                        setReady(false);
+                                        setUrl(e.target.value);
+                                    } })] }), uploadImage && (_jsxs("div", { hidden: source !== 'upload', onDragOver: e => e.preventDefault(), onDrop: e => {
+                                e.preventDefault();
+                                void onPick(e.dataTransfer.files[0]);
+                            }, className: "rounded-lg border border-dashed border-border p-4", children: [_jsx("p", { className: "mb-2 text-xs text-muted-foreground", children: t('inlineCanvas.review.dropImage', '拖入图片或选择文件，支持图片格式，最大 10 MB。上传只准备素材，应用后才修改画布。') }), _jsx("input", { ref: fileRef, type: "file", accept: "image/*", "data-testid": "image-edit-file", className: "hidden", onChange: e => {
+                                        void onPick(e.target.files?.[0]);
+                                        e.target.value = '';
+                                    } }), _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: () => {
+                                        : t('inlineCanvas.image.upload') })] })), selectedUrl && (_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-xs", children: t('inlineCanvas.review.pendingMedia', '待应用媒体') }), _jsx(MediaPreview, { url: selectedUrl, onReady: setReady }, source + selectedUrl)] })), 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), size: "sm", variant: mode === m ? 'secondary' : 'ghost', children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), error && (_jsxs("p", { "data-testid": "image-edit-error", className: "text-xs text-[#DE350B]", children: [error, source === 'upload' && lastFileRef.current && (_jsx(Button, { variant: "secondary", size: "sm", disabled: uploading, onClick: () => void onPick(lastFileRef.current), children: t('inlineCanvas.review.retry', '重试') }))] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "image-edit-apply", disabled: !canApply, onClick: () => {
                                 void onApply({
                                     branch,
-                                    url: url.trim(),
+                                    url: selectedUrl,
                                     mode: branch === 'insert' ? mode : undefined
                                 });
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/dialogs/ImageSettingDialog.js

@@ -1,7 +1,7 @@
 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';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label } from '@ptengine/design-components';
 export function ImageSettingDialog({ open, seed = '', onOpenChange, onApply }) {
     const { t } = useTranslation();
     const [alt, setAlt] = useState(seed);
@@ -10,8 +10,8 @@ export function ImageSettingDialog({ open, seed = '', onOpenChange, onApply }) {
             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: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "image-setting-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.image.settingTitle') }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "image-setting-alt", children: t('inlineCanvas.image.alt') }), _jsx(Input, { id: "image-setting-alt", "aria-label": t('inlineCanvas.image.alt'), "data-testid": "image-setting-alt", value: alt, onChange: e => setAlt(e.target.value) }), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: t('inlineCanvas.review.altHelp', '替代文本用于描述图片内容。装饰图片可留空。') })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "image-setting-apply", disabled: !changed, onClick: () => {
                                 void onApply(alt);
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/dialogs/InsertElementDialog.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeField } from './CodeField.js';
 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 { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, ToggleGroup, ToggleGroupItem } 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 modeKey = modes.join(',');
     const [mode, setMode] = useState('append');
     useEffect(() => {
         if (!open)
@@ -16,13 +18,15 @@ export function InsertElementDialog({ open, capabilities, onOpenChange, onApply
         setHtml('');
         if (modes.length > 0)
             setMode(modes[0]);
-    }, [open, modes]);
+    }, [open, modeKey]);
     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: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), size: "md", className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "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(CodeField, { "aria-label": t('inlineCanvas.insert.html'), "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(ToggleGroup, { type: "single", variant: "outline", value: mode, onValueChange: value => {
+                                        if (modes.includes(value)) {
+                                            setMode(value);
+                                        }
+                                    }, "aria-label": t('inlineCanvas.insert.position'), style: { justifyContent: 'flex-start', flexWrap: 'wrap' }, children: modes.map(m => (_jsx(ToggleGroupItem, { value: m, "data-testid": `insert-mode-${m}`, 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-xs leading-4 text-[#DE350B]", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), t(result.error)] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "insert-apply", disabled: !canApply, onClick: () => {
                                 void onApply({ html: html.trim(), mode });
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/dialogs/MediaPreview.d.ts

@@ -0,0 +1,5 @@
+export declare function MediaPreview({ url, kind, onReady }: {
+    url: string;
+    kind?: 'image' | 'video';
+    onReady?: (ready: boolean) => void;
+}): import("react").JSX.Element | null;

package/dist/dialogs/MediaPreview.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@ptengine/design-components';
+import { useTranslation } from 'react-i18next';
+export function MediaPreview({ url, kind = 'image', onReady }) {
+    const mediaRef = useRef(null);
+    const { t } = useTranslation();
+    const [state, setState] = useState('loading');
+    const [retry, setRetry] = useState(0);
+    useEffect(() => {
+        const media = mediaRef.current;
+        const loaded = media instanceof HTMLImageElement
+            ? media.complete && media.naturalWidth > 0
+            : media instanceof HTMLVideoElement && media.readyState >= 1;
+        setState(loaded ? 'ready' : 'loading');
+        onReady?.(!!loaded);
+    }, [url, retry]);
+    const ready = () => {
+        setState('ready');
+        onReady?.(true);
+    };
+    const fail = () => {
+        setState('error');
+        onReady?.(false);
+    };
+    if (!url)
+        return null;
+    const youtube = /^https:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\//i.test(url);
+    return (_jsxs("div", { className: "min-w-0 space-y-2", children: [kind === 'image' ? (_jsx("img", { ref: el => {
+                    mediaRef.current = el;
+                }, src: url, alt: t('inlineCanvas.review.mediaPreview', '媒体预览'), onLoad: ready, onError: fail, className: "max-h-48 w-full rounded-lg object-contain" })) : youtube ? (_jsx("iframe", { title: t('inlineCanvas.review.mediaPreview', '媒体预览'), src: url, onLoad: ready, onError: fail, className: "aspect-video w-full", allowFullScreen: true })) : (_jsx("video", { ref: el => {
+                    mediaRef.current = el;
+                }, src: url, controls: true, preload: "metadata", onLoadedMetadata: ready, onError: fail, className: "max-h-48 w-full" })), _jsx("div", { role: "status", className: "text-xs text-muted-foreground", children: state === 'loading' ? (t('inlineCanvas.review.loading', '正在加载预览…')) : state === 'error' ? (_jsxs(_Fragment, { children: [t('inlineCanvas.review.loadError', '预览加载失败'), ' ', _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setRetry(x => x + 1), children: t('inlineCanvas.review.retry', '重试') })] })) : (t('inlineCanvas.review.ready', '媒体已就绪，应用后修改画布')) })] }, `${url}-${retry}`));
+}

package/dist/dialogs/ReplaceVideoDialog.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPreview } from './MediaPreview.js';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label } from '@ptengine/design-components';
 export function ReplaceVideoDialog({ open, seed = '', onOpenChange, onApply }) {
     const { t } = useTranslation();
+    const [ready, setReady] = useState(false);
     const [url, setUrl] = useState(seed);
     useEffect(() => {
-        if (open)
+        if (open) {
             setUrl(seed);
+            setReady(false);
+        }
     }, [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: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "replace-video-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.video.title') }) }), _jsxs("div", { children: [seed && (_jsxs("details", { children: [_jsx("summary", { children: t('inlineCanvas.review.currentMedia', '当前媒体') }), _jsx(MediaPreview, { kind: "video", url: seed })] })), _jsx(Label, { htmlFor: "replace-video-url", children: t('inlineCanvas.video.url') }), _jsx(Input, { id: "replace-video-url", "aria-label": t('inlineCanvas.video.url'), "data-testid": "replace-video-url", value: url, onChange: e => setUrl(e.target.value) }), _jsx("p", { className: "mt-1.5 text-xs leading-4 text-[#6B778C]", children: t('inlineCanvas.review.videoLinkHint', '支持视频文件链接和 YouTube 嵌入链接。加载就绪后应用到画布。') })] }), _jsx(MediaPreview, { kind: "video", url: url.trim(), onReady: setReady }, url), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "replace-video-apply", disabled: !url.trim() || !ready, onClick: () => {
                                 void onApply(url.trim());
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/index.d.ts

@@ -79,6 +79,7 @@ export { SHELF_LAYOUT_FIELDS, laysOutInRow, rowPositions } from './kernel/select
 export type { RowPosition } from './kernel/selection/rowLayout.js';
 export { linkPath } from './kernel/linkHref.js';
 export { buildRootShelf } from './kernel/selection/buildRootShelf.js';
+export type { ShelfBlockHint } from './kernel/selection/buildRootShelf.js';
 export { LayersPanel } from './tree/LayersPanel.js';
 export { adaptDomTree, moveModeFromDropPos } from './tree/domTreeAdapter.js';
 export type { AdaptDomTreeOptions, TreeNodeIconInput } from './tree/domTreeAdapter.js';

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

@@ -248,10 +248,11 @@ export interface AiApplyDeps {
          */
         ancestors: string[];
         /**
-         * 货架里某一项的祖先链（由近及远，含作用域根自己）。**整页作用域专用**。
+         * 货架里某一项的祖先链（由近及远，含作用域根自己）。**整页货架那些行用**。
          *
-         * 元素作用域不传：那时 `ancestors` 就是选中元素的祖先链，而作用域里的后代都在它
-         * 底下，同一条链够用。整页作用域不一样 —— 根是 `body`，它的 `ancestors` 是空数组，
+         * 纯元素作用域不传：那时 `ancestors` 就是选中元素的祖先链，而作用域里的后代都在它
+         * 底下，同一条链够用。元素作用域并上了整页货架时（宿主有整页模式）传，查的是并进来的那些行。
+         * 整页作用域不一样 —— 根是 `body`，它的 `ancestors` 是空数组，
          * 拿它去判 `MOVE_ELEMENT` 的 target 会把**所有**移动判成非法（body 没有祖先）。
          * 这个函数让那道闸改为对着「被移动的那个元素」的祖先链判，规则本身没变。
          *

package/dist/kernel/blocks/BlockOverlay.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { frameRectToProductRect } from '../selection/geometry.js';
-const Z_INDEX = 2147482990;
+const Z_INDEX = 890;
 const CHIP_HEIGHT = 18;
 const COLORS = { base: '#1D4ED8', active: '#DB2777', none: '#94A3B8' };
 function boxStyle(rect, color, active, none) {

package/dist/kernel/blocks/resolveBlocks.d.ts

@@ -1,4 +1,5 @@
 import type { DomTreeNode, ElementsInBandResult, GetDomTreeParams, ResolveHeatmapSelectorResult } from '@ptengine/inline-core/protocol';
+import { type RowPosition } from '../selection/rowLayout.js';
 /**
  * 分析画布：把热图的**区块配置**（MySQL 里那份，apps/x 读来）画到客户活页面上，
  * 并给每块找一个锚点元素 + 一份 AI 能读的摘要（标题 / 文案 / CTA）。
@@ -24,6 +25,11 @@ import type { DomTreeNode, ElementsInBandResult, GetDomTreeParams, ResolveHeatma
  * 3. **none** —— 都没有：members 空。区块框照画（位置本来就来自配置，一样准），
  *    只是点不进任何元素、也没有 selector 可以交给 agent。
  *
+ * 三条路定下成员之后，**成员上提到块根**（`liftToBlockRoots`）：轮播的一张、并列的一列、区块里的一个小节点，
+ * 提到「只装着这一块的最外层容器」—— 与编辑器整页货架打 `[Bn]` 的那一行是同一个元素（同一份判定、同一份
+ * 取树口径）。真机 vivaia.jp 首页（2026-10-21）：B1 的成员是轮播第 1 张，`<page-block>` 的成员行与方案锚点
+ * 照抄它，首版 after 它把「首屏下方」的新模块插进了轮播。摘要（heading / text / cta / links）按上提后的成员取。
+ *
  * 编号 `B1..Bn` 按输入的 `yStart` 升序，与模型看到的瓦片标注一致（`annotateAndTile`）。
  *
  * 三条跨域命令经 `deps` 注入：编排逻辑不需要插件也不需要浏览器就能测。任何一条失败都
@@ -46,6 +52,11 @@ export interface PageModelBlockMember {
     /** 该 member 子树的文案摘要（折叠空白、≤80）。拉树失败为空串。 */
     text: string;
     hasChildren: boolean;
+    /**
+     * 它在父级横排里的位次（整页树上判，与整页货架行的 `inRow` 同一份）。`<page-block>` 的成员行据此打
+     * `[横排 i/n]`：成员行的父级不在它自己的子树里，只能从整页树带过来。不在横排里 / 判不了时不写这个键。
+     */
+    inRow?: RowPosition;
 }
 export interface PageModelBlock {
     /** `'B1'`,`'B2'`… 按 `yStart` 升序。 */
@@ -142,6 +153,11 @@ export interface ResolveBlocksOptions {
      * 三处共用这套坐标，由各自的消费者在画的时候乘比例。
      */
     scale?: number;
+    /**
+     * 画布视口宽（mobile 375 / pc 1440）。成员上提的块根判据按它算「够宽」门槛，与编辑器整页货架传的是
+     * 同一个数；缺省按 375（与 `buildRootShelf` 的缺省一致）。
+     */
+    viewportWidth?: number;
 }
 export declare function resolveBlocks(sessionId: string, blocks: HeatmapBlockConfig[], deps?: ResolveBlocksDeps, opts?: ResolveBlocksOptions): Promise<PageModelBlock[]>;
 /**

package/dist/kernel/blocks/resolveBlocks.js

@@ -1,6 +1,8 @@
 import { elementsInBand as elementsInBandCommand, getDomTree as getDomTreeCommand, resolveHeatmapSelector as resolveHeatmapSelectorCommand } from '../canvasCommands.js';
 import { linkPath } from '../linkHref.js';
+import { ROOT_SHELF_TREE_PARAMS, liftToBlockRoots } from '../selection/buildRootShelf.js';
 import { SHELF_TREE_MAX_DEPTH } from '../selection/elementAiContext.js';
+import { rowPositions } from '../selection/rowLayout.js';
 const defaultDeps = {
     resolveHeatmapSelector: resolveHeatmapSelectorCommand,
     elementsInBand: elementsInBandCommand,
@@ -104,7 +106,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
         catch {
         }
     }
-    const out = [];
+    const located = [];
     for (let i = 0; i < ordered.length; i++) {
         const cfg = ordered[i];
         const base = { id: idOf(i), name: cfg.name };
@@ -120,7 +122,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
             hits.push({ selector: m.kernelSelector, tag: m.tag ?? '', rect: m.rect });
         }
         if (hits.length > 0) {
-            out.push(await enrich(sessionId, deps, {
+            located.push({
                 ...base,
                 ...geometryOf(cfg),
                 members: hits.map(h => ({
@@ -132,7 +134,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
                 ctas: [],
                 text: '',
                 resolved: 'selector'
-            }));
+            });
             continue;
         }
         let candidate = null;
@@ -147,7 +149,7 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
             candidate = null;
         }
         if (candidate) {
-            out.push(await enrich(sessionId, deps, {
+            located.push({
                 ...base,
                 ...geometryOf(cfg),
                 members: [
@@ -162,10 +164,10 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
                 text: '',
                 resolved: 'geometry',
                 iou: candidate.iou
-            }));
+            });
             continue;
         }
-        out.push({
+        located.push({
             ...base,
             ...geometryOf(cfg),
             members: [],
@@ -174,8 +176,39 @@ export async function resolveBlocks(sessionId, blocks, deps = defaultDeps, opts
             resolved: 'none'
         });
     }
+    const lifted = await liftMembers(sessionId, deps, located, opts.viewportWidth);
+    const out = [];
+    for (const b of lifted)
+        out.push(b.members.length ? await enrich(sessionId, deps, b) : b);
     return out;
 }
+async function liftMembers(sessionId, deps, blocks, viewportWidth) {
+    if (!blocks.some(b => b.members.length))
+        return blocks;
+    try {
+        const tree = await deps.getDomTree(sessionId, ROOT_SHELF_TREE_PARAMS);
+        const liftOf = liftToBlockRoots(tree, { viewportWidth, blocks });
+        const inRowOf = rowPositions(tree);
+        return blocks.map(b => {
+            if (!b.members.length)
+                return b;
+            const byMember = liftOf.get(b.id);
+            const members = [];
+            for (const m of b.members) {
+                const root = byMember?.get(m.selector);
+                const next = root ? { ...m, selector: root.selector, tag: root.tag } : m;
+                if (members.some(x => x.selector === next.selector))
+                    continue;
+                const inRow = inRowOf.get(next.selector);
+                members.push(inRow ? { ...next, inRow } : next);
+            }
+            return { ...b, members };
+        });
+    }
+    catch {
+        return blocks;
+    }
+}
 export function isAutoGeneratedBlockName(name) {
     const n = name.trim();
     if (!n)

package/dist/kernel/changelist/ChangeListPanel.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { toWireFormat } from '@ptengine/inline-core/change-format';
-import { Code2, Crosshair, EyeOff, Image, Link2, Move, Plus, Trash2, Type, Undo2, Wand } from 'lucide-react';
+import { Code2, Crosshair, EyeOff, Image, Link2, Move, Plus, Trash2, Type, Undo2, Paintbrush } from 'lucide-react';
 import { Button } from '@ptengine/design-components';
 import { summarizeChange } from './changeSummary.js';
 import { classifySuppression } from './mergeForSave.js';
 const ICONS = {
-    style: Wand,
+    style: Paintbrush,
     delete: Trash2,
     text: Type,
     code: Code2,
@@ -16,19 +16,21 @@ const ICONS = {
     insert: Plus
 };
 export function ChangeListPanel({ list, onRevert, lastError, onHover, onSelect, onRevertAll }) {
+    const [confirmRevert, setConfirmRevert] = useState(false);
     const [view, setView] = useState('summary');
     const entries = useMemo(() => list.map(r => ({ change: r.change, ancestors: r.ancestors })), [list]);
     const json = useMemo(() => JSON.stringify(list.map(r => toWireFormat(r.change)), null, 2), [list]);
-    return (_jsxs("section", { "data-testid": "change-list-panel", className: "flex min-h-0 flex-1 flex-col", onMouseLeave: () => onHover?.(''), children: [_jsxs("header", { className: "flex h-10 shrink-0 items-center justify-between gap-2 border-b\n                border-[#f1f2f3] pl-3 pr-2", children: [_jsxs("span", { className: "truncate text-[13px] font-medium text-[#1a1a1a]", children: ["\u6539\u52A8\u6E05\u5355", _jsx("span", { "data-testid": "change-list-count", className: "ml-1.5 text-xs font-normal tabular-nums text-[#8a8f98]", children: list.length })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("div", { className: "flex items-center gap-px rounded-md bg-[#f3f4f4] p-0.5", children: [
+    return (_jsxs("section", { "data-testid": "change-list-panel", className: "flex min-h-0 flex-1 flex-col", onMouseLeave: () => onHover?.(''), children: [confirmRevert && (_jsxs("div", { role: "alert", className: "border-b p-3 text-xs", children: ["\u786E\u5B9A\u64A4\u9500\u6B64\u7248\u672C\u7684\u5168\u90E8\u6539\u52A8\uFF1F", _jsxs("div", { className: "mt-2 flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setConfirmRevert(false), children: "\u53D6\u6D88" }), _jsx(Button, { size: "sm", variant: "destructive", onClick: () => {
+                                    setConfirmRevert(false);
+                                    onRevertAll?.();
+                                }, children: "\u64A4\u9500\u5168\u90E8\u6539\u52A8" })] })] })), _jsxs("header", { className: "flex h-10 shrink-0 items-center justify-between gap-2 border-b\n                border-[#f1f2f3] pl-3 pr-2", children: [_jsxs("span", { className: "truncate text-[13px] font-medium text-[#1a1a1a]", children: ["\u6539\u52A8\u6E05\u5355", _jsx("span", { "data-testid": "change-list-count", className: "ml-1.5 text-xs font-normal tabular-nums text-[#8a8f98]", children: list.length })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("div", { className: "flex items-center gap-px rounded-md bg-[#f3f4f4] p-0.5", children: [
                                     ['summary', '摘要', undefined],
                                     [
                                         'wire',
-                                        '数值',
-                                        '落盘形态，可与线上存量数据逐字段比对'
+                                        '高级数据',
+                                        '查看此版本的高级修改数据'
                                     ]
-                                ].map(([v, label, hint]) => (_jsx("button", { type: "button", "data-testid": `change-list-view-${v}`, "aria-pressed": view === v, title: hint, onClick: () => setView(v), className: `rounded px-2 py-[3px] text-[11px] transition-colors ${view === v
-                                        ? 'bg-white font-medium text-[rgba(16,28,31,0.9)] shadow-[0_1px_2px_rgba(16,28,31,0.08)]'
-                                        : 'text-[#707779] hover:text-[rgba(16,28,31,0.7)]'}`, children: label }, v))) }), onRevertAll && list.length > 0 && (_jsx("button", { type: "button", "data-testid": "change-list-revert-all", onClick: onRevertAll, className: "rounded px-2 py-1 text-xs text-[#52525b] transition-colors\n                                hover:bg-[rgba(16,28,31,0.06)] hover:text-[rgba(16,28,31,0.9)]", children: "\u5168\u90E8\u64A4\u9500" }))] })] }), lastError && (_jsx("p", { "data-testid": "change-list-error", className: "px-3 py-2 text-xs text-[#DE350B]", children: lastError })), list.length === 0 ? (_jsx("p", { "data-testid": "change-list-empty", className: "px-3 py-8 text-center text-xs text-[#8a8f98]", children: "\u8FD8\u6CA1\u6709\u6539\u52A8\u3002\u5728\u753B\u5E03\u91CC\u9009\u4E2D\u5143\u7D20\u5F00\u59CB\u7F16\u8F91\u3002" })) : view === 'summary' ? (_jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto", children: list.map((record, index) => (_jsx(ChangeRow, { record: record, summary: summarizeChange(record.change), suppression: classifySuppression(entries, index), onRevert: onRevert, onHover: onHover, onSelect: onSelect }, record.changeId))) })) : (_jsx("pre", { "data-testid": "change-list-json", className: "min-h-0 flex-1 overflow-auto bg-[#FAFAFA] px-3 py-2 text-[11px]\n                        leading-4 text-[#344563]", children: json }))] }));
+                                ].map(([v, label, hint]) => (_jsx(Button, { type: "button", "data-testid": `change-list-view-${v}`, "aria-pressed": view === v, title: hint, onClick: () => setView(v), size: "sm", variant: view === v ? 'secondary' : 'ghost', children: label }, v))) }), onRevertAll && list.length > 0 && (_jsx(Button, { type: "button", "data-testid": "change-list-revert-all", onClick: () => setConfirmRevert(true), size: "sm", variant: "ghost", children: "\u5168\u90E8\u64A4\u9500" }))] })] }), lastError && (_jsx("p", { "data-testid": "change-list-error", className: "px-3 py-2 text-xs text-[#DE350B]", children: lastError })), list.length === 0 ? (_jsx("p", { "data-testid": "change-list-empty", className: "px-3 py-8 text-center text-xs text-[#8a8f98]", children: "\u8FD8\u6CA1\u6709\u6539\u52A8\u3002\u5728\u753B\u5E03\u91CC\u9009\u4E2D\u5143\u7D20\u5F00\u59CB\u7F16\u8F91\u3002" })) : view === 'summary' ? (_jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto", children: list.map((record, index) => (_jsx(ChangeRow, { record: record, summary: summarizeChange(record.change), suppression: classifySuppression(entries, index), onRevert: onRevert, onHover: onHover, onSelect: onSelect }, record.changeId))) })) : (_jsx("pre", { "data-testid": "change-list-json", className: "min-h-0 flex-1 overflow-auto bg-[#FAFAFA] px-3 py-2 text-[11px]\n                        leading-4 text-[#344563]", children: json }))] }));
 }
 const SUPPRESSION_TEXT = {
     'ancestor-hidden': {
@@ -43,5 +45,5 @@ const SUPPRESSION_TEXT = {
 function ChangeRow({ record, summary, suppression, onRevert, onHover, onSelect }) {
     const Icon = ICONS[summary.icon];
     const text = suppression ? SUPPRESSION_TEXT[suppression.reason] : null;
-    return (_jsxs("li", { "data-testid": "change-list-item", "data-suppressed": suppression ? suppression.reason : undefined, className: "group flex items-center gap-2.5 border-b border-[#f1f2f3] px-3 py-2.5\n                last:border-b-0 hover:bg-[rgba(16,28,31,0.04)]", onMouseEnter: () => onHover?.(summary.selector), children: [_jsx(Icon, { className: `size-4 shrink-0 ${suppression ? 'text-[#B3BAC5]' : 'text-[#6B778C]'}` }), _jsxs("button", { type: "button", "data-testid": "change-list-locate", onClick: () => onSelect?.(summary.selector), className: "flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left", title: summary.selector, children: [_jsxs("span", { className: `flex items-center gap-1.5 text-[13px] font-medium ${suppression ? 'text-[#8993A4]' : 'text-[#1a1a1a]'}`, children: [summary.action, onSelect && (_jsx(Crosshair, { className: "size-3 text-[#8993A4] opacity-0 group-hover:opacity-100" }))] }), text && (_jsxs("span", { "data-testid": "change-list-suppressed-badge", className: "flex items-center gap-1 rounded bg-[#FFF7E6] px-1.5 py-0.5\n                            text-[11px] leading-4 text-[#974F0C]", title: `${text.hint}（${suppression?.by}）`, children: [_jsx(EyeOff, { className: "size-3 shrink-0" }), text.badge] })), summary.detail && (_jsx("span", { className: `w-full truncate font-mono text-[11px] ${suppression ? 'text-[#8993A4] line-through' : 'text-[#344563]'}`, children: summary.detail })), _jsx("span", { className: "w-full truncate font-mono text-[11px] text-[#8993A4]", children: summary.selector })] }), _jsx(Button, { variant: "ghost", size: "icon", "data-testid": `change-list-revert-${record.changeId}`, "aria-label": "\u64A4\u9500", onClick: () => onRevert(record.changeId), children: _jsx(Undo2, { className: "size-4" }) })] }));
+    return (_jsxs("li", { "data-testid": "change-list-item", "data-suppressed": suppression ? suppression.reason : undefined, className: "group flex items-center gap-2.5 border-b border-[#f1f2f3] px-3 py-2.5\n                last:border-b-0 hover:bg-[rgba(16,28,31,0.04)]", onMouseEnter: () => onHover?.(summary.selector), children: [_jsx(Icon, { className: `size-4 shrink-0 ${suppression ? 'text-[#B3BAC5]' : 'text-[#6B778C]'}` }), _jsxs(Button, { type: "button", variant: "ghost", "data-testid": "change-list-locate", onClick: () => onSelect?.(summary.selector), className: "flex h-auto min-h-8 min-w-0 flex-1 flex-col items-start justify-start gap-0.5 whitespace-normal py-2 text-left", title: summary.selector, children: [_jsxs("span", { className: `flex items-center gap-1.5 text-[13px] font-medium ${suppression ? 'text-[#8993A4]' : 'text-[#1a1a1a]'}`, children: [summary.action, onSelect && (_jsx(Crosshair, { className: "size-3 text-[#8993A4] opacity-0 group-hover:opacity-100" }))] }), text && (_jsxs("span", { "data-testid": "change-list-suppressed-badge", className: "flex items-center gap-1 rounded bg-[#FFF7E6] px-1.5 py-0.5\n                            text-[11px] leading-4 text-[#974F0C]", title: `${text.hint}（${suppression?.by}）`, children: [_jsx(EyeOff, { className: "size-3 shrink-0" }), text.badge] })), summary.detail && (_jsx("span", { className: `w-full truncate font-mono text-[11px] ${suppression ? 'text-[#8993A4] line-through' : 'text-[#344563]'}`, children: summary.detail })), _jsx("span", { className: "w-full truncate font-mono text-[11px] text-[#8993A4]", children: summary.selector })] }), _jsx(Button, { variant: "ghost", size: "icon", "data-testid": `change-list-revert-${record.changeId}`, "aria-label": "\u64A4\u9500", onClick: () => onRevert(record.changeId), children: _jsx(Undo2, { className: "size-4" }) })] }));
 }

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

@@ -82,6 +82,11 @@ export interface UseChangeListResult {
         outcome: HydrateOutcome;
         idMap: Map<string, string>;
     }>;
+    whenIdle: () => Promise<unknown>;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
     lastError: string | null;
 }
 export interface HydrateOutcome {