@ptengine/inline-editor 0.1.5 → 0.1.7

package/dist/InlineEditor.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EditorStatus } from './panels/EditorStatus.js';
+import { MovePositionControls } from './panels/MovePositionControls.js';
+import { ScreenshotCard } from './panels/ScreenshotCard.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
 import { CANVAS_UI_SCOPE } from './canvas-ui/index.js';
 import { EditorChrome } from './chrome/EditorChrome.js';
 import { CanvasFrame, TARGET_VIEWPORT_WIDTH, computeZoom } from './kernel/CanvasFrame.js';
@@ -13,17 +17,17 @@ import { ChangeListPanel } from './kernel/changelist/ChangeListPanel.js';
 import { ChangeListPopover } from './kernel/changelist/ChangeListPopover.js';
 import { frameRectToProductRect, measureFrameContext } from './kernel/selection/geometry.js';
 import { buildElementAiContext, extractPageLinks, linksFragment, ROOT_SHELF_LIMIT, SHELF_TREE_MAX_DEPTH, SHELF_TREE_MAX_NODES } from './kernel/selection/elementAiContext.js';
-import { getAncestorChain, getDomTree, getElementCapabilities, getElementImages, getOuterHtml, resolveCanvasSelector } from './kernel/canvasCommands.js';
+import { getAncestorChain, getDomTree, getElementCapabilities, getElementImages, getOuterHtml, resolveCanvasSelector, queryElements } from './kernel/canvasCommands.js';
 import { useAiSelectionContext } from './kernel/selection/useAiSelectionContext.js';
 import { buildDescendantShelf } from './kernel/selection/buildDescendantShelf.js';
-import { buildRootShelf } from './kernel/selection/buildRootShelf.js';
+import { ROOT_SHELF_TREE_PARAMS, buildRootShelf } from './kernel/selection/buildRootShelf.js';
 import { SHELF_LAYOUT_FIELDS } from './kernel/selection/rowLayout.js';
 import { backgroundImageAncestorFor, blockContainerFor, resolveInlinePlanAnchors, withImageRows } from './kernel/selection/resolveAnchors.js';
 import { elementGeometryForAi } from './kernel/selection/elementGeometryForAi.js';
 import { applyAiChanges } from './kernel/ai/aiInlineApply.js';
 import { APPLY_CHECK_SETTLE_MS } from './kernel/ai/postApplyCheck.js';
 import { deleteElement, editHtml, editStyle, insertElement, replaceImage, replaceVideo, setClickAction, setImageAlt } from './kernel/changelist/useChangeList.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@ptengine/design-components';
 import { pasteModes } from './kernel/selection/toolbarButtons.js';
 import { ClickActionDialog } from './dialogs/ClickActionDialog.js';
 import { ImageEditDialog } from './dialogs/ImageEditDialog.js';
@@ -32,6 +36,7 @@ import { ImageSettingDialog } from './dialogs/ImageSettingDialog.js';
 import { InsertElementDialog } from './dialogs/InsertElementDialog.js';
 import { ReplaceVideoDialog } from './dialogs/ReplaceVideoDialog.js';
 import { StylePanel } from './panels/StylePanel.js';
+import { STYLE_SECTIONS } from './panels/styleFields.js';
 import { HtmlEditDialog } from './dialogs/HtmlEditDialog.js';
 import { setCode } from './kernel/canvasCommands.js';
 import { describeCanvasError } from './kernel/canvasErrors.js';
@@ -51,13 +56,15 @@ function imageTargetOf(caps) {
     return branch === 'background' ? 'background' : undefined;
 }
 const AI_ELEMENT_IMAGE_LIMIT = 4;
-export function InlineEditor({ url, device, onDeviceChange, title, versionLabel = 'V1', chrome = 'full', onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedLinkUrls, viewportWidthOverride, blockOverlay }) {
+export function InlineEditor({ url, device, onDeviceChange, title, versionLabel = 'V1', chrome = 'full', onExit, onSave, libraryComponents, libraryLoading, onAddVersion, onRenameVersion, removableVersionIds, onRemoveVersion, onPreview, onToggleAi, aiOpen, uploadImage, initialChanges, onHydrated, onAskAi, onPageContextReady, anchors, pageBlocks, onEditorReady, onSessionReady, onAiContextChange, onAiApplyReady, onAiInsertedRemoved, onAiInsertedRestored, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedLinkUrls, viewportWidthOverride, blockOverlay }) {
     const { t } = useTranslation();
     const canvasAreaRef = useRef(null);
     const canvasIframeRef = useRef(null);
     const insertedRemovedRef = useRef(null);
     const insertedRestoredRef = useRef(null);
+    const historyShortcutRef = useRef(() => { });
     const editor = useInlineEditor({
+        onHistoryShortcut: direction => historyShortcutRef.current(direction),
         onInsertedRemoved: selectors => insertedRemovedRef.current?.(selectors),
         onInsertedRestored: selectors => insertedRestoredRef.current?.(selectors),
         url,
@@ -73,11 +80,11 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
     const [commandError, setCommandError] = useState(null);
     const [aiApplyNote, setAiApplyNote] = useState(null);
     const [shot, setShot] = useState(null);
-    const [shotUrl, setShotUrl] = useState(null);
     const [panelWidth, setPanelWidth] = useState(0);
     const [showChangeList, setShowChangeList] = useState(false);
     const [stylePanelOpen, setStylePanelOpen] = useState(false);
     const [htmlDialog, setHtmlDialog] = useState({ open: false, seed: '' });
+    const [currentStyles, setCurrentStyles] = useState({});
     const [imageDialog, setImageDialog] = useState({ open: false, seed: '' });
     const [imageSettingDialog, setImageSettingDialog] = useState({ open: false, seed: '' });
     const [videoDialog, setVideoDialog] = useState({ open: false, seed: '' });
@@ -94,6 +101,25 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             return '';
         }
     }, [url]);
+    useEffect(() => {
+        if (!stylePanelOpen || !selection || !frameProps?.sessionId)
+            return;
+        let cancelled = false;
+        void queryElements(frameProps.sessionId, [selection.selector], {
+            fields: STYLE_SECTIONS.flatMap(section => section.fields.map(field => `computed:${field.property}`))
+        })
+            .then(result => {
+            if (!cancelled)
+                setCurrentStyles(result.results[0]?.matches[0]?.computed ?? {});
+        })
+            .catch(error => {
+            if (!cancelled)
+                setCommandError(describeCanvasError(error));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [stylePanelOpen, selection?.selector, frameProps?.sessionId, changeList.list]);
     const changeListRef = useRef(changeList);
     changeListRef.current = changeList;
     const versionChangesRef = useRef(versionChanges);
@@ -170,6 +196,27 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         }
         void run().catch(e => setCommandError(describeCanvasError(e)));
     }, [t]);
+    historyShortcutRef.current = direction => {
+        if (!domReady || textEditing || switchingRef.current)
+            return;
+        uiWrite(() => enqueue(() => direction === 'undo' ? changeListRef.current.undo() : changeListRef.current.redo()));
+    };
+    useEffect(() => {
+        const onKey = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.altKey)
+                return;
+            const target = event.target;
+            if (target?.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]'))
+                return;
+            const key = event.key.toLowerCase();
+            if (key !== 'z' && !(key === 'y' && event.ctrlKey))
+                return;
+            event.preventDefault();
+            historyShortcutRef.current(event.shiftKey || key === 'y' ? 'redo' : 'undo');
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, []);
     useEffect(() => {
         if (!hasVersions || !activeVersionId)
             return;
@@ -200,18 +247,43 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
     }, [sessionIdForAssets]);
     const hydratedSessionRef = useRef(null);
     const sessionIdForHydrate = frameProps?.sessionId;
-    const bootChanges = hasVersions && activeVersionId && versionChanges?.[activeVersionId]
-        ? versionChanges[activeVersionId]
-        : initialChanges;
+    const deviceSnapshot = useRef(null);
+    const changeDevice = (next) => {
+        if (next === device || switchingRef.current)
+            return;
+        switchingRef.current = true;
+        setSwitching(true);
+        void enqueue(async () => {
+            await changeListRef.current.whenIdle();
+            const live = changeListRef.current.peekList();
+            deviceSnapshot.current = { version: activeVersionId, changes: live.map(r => r.change) };
+            if (activeVersionId)
+                versionCallbacksRef.current.onVersionLeave?.(activeVersionId, live);
+            onDeviceChange(next);
+        })
+            .catch(error => setCommandError(describeCanvasError(error)))
+            .finally(() => {
+            switchingRef.current = false;
+            setSwitching(false);
+        });
+    };
+    const bootChanges = deviceSnapshot.current?.version === activeVersionId && deviceSnapshot.current
+        ? deviceSnapshot.current.changes
+        : hasVersions && activeVersionId && versionChanges?.[activeVersionId]
+            ? versionChanges[activeVersionId]
+            : initialChanges;
     useEffect(() => {
         if (!domReady || !sessionIdForHydrate)
             return;
         if (hydratedSessionRef.current === sessionIdForHydrate)
             return;
         hydratedSessionRef.current = sessionIdForHydrate;
+        deviceSnapshot.current = null;
         if (!bootChanges?.length)
             return;
         const versionId = hasVersions ? activeVersionId : undefined;
+        setSwitching(true);
+        switchingRef.current = true;
         void enqueue(async () => {
             const { outcome, idMap } = await changeListRef.current.replaceAll(bootChanges, prevIdsFor(versionId, bootChanges));
             if (versionId) {
@@ -220,7 +292,12 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                 versionCallbacksRef.current.onVersionEnter?.(versionId, idMap);
             }
             onHydrated?.(outcome);
-        }).catch(e => setCommandError(describeCanvasError(e)));
+        })
+            .catch(e => setCommandError(describeCanvasError(e)))
+            .finally(() => {
+            switchingRef.current = false;
+            setSwitching(false);
+        });
     }, [domReady, sessionIdForHydrate, bootChanges]);
     const commandsRef = useRef(commands);
     commandsRef.current = commands;
@@ -349,7 +426,10 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         tag: self.tag,
         imageTarget: imageTargetOf(selection?.capabilities),
         images: elementImages?.selector === self.selector ? elementImages.images : undefined,
-        ancestors: (selection?.chain ?? []).map(n => n.selector).slice().reverse(),
+        ancestors: (selection?.chain ?? [])
+            .map(n => n.selector)
+            .slice()
+            .reverse(),
         outerHtml,
         descendants: descendantShelfRef.current,
         hasChildren: (selection?.capabilities?.childElementCount ?? 0) > 0,
@@ -426,6 +506,10 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
     useEffect(() => {
         anchorsRef.current = anchors;
     }, [anchors]);
+    const pageBlocksRef = useRef(pageBlocks);
+    useEffect(() => {
+        pageBlocksRef.current = pageBlocks;
+    }, [pageBlocks]);
     useEffect(() => {
         rootShelfRef.current = [];
         rootShelfAncestorsRef.current = new Map();
@@ -442,21 +526,14 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         pageContextSessionRef.current = sessionIdForAiContext;
         let stale = false;
         void (async () => {
-            const root = await getDomTree(sessionIdForAiContext, {
-                rootSelector: 'body',
-                maxDepth: 16,
-                maxChildren: 40,
-                maxNodes: 1500,
-                visibleOnly: true,
-                includeRect: true,
-                fields: [...SHELF_LAYOUT_FIELDS]
-            });
+            const root = await getDomTree(sessionIdForAiContext, ROOT_SHELF_TREE_PARAMS);
             const { html } = await getOuterHtml(sessionIdForAiContext, 'body');
             if (stale)
                 return;
             const { shelf, ancestorsOf } = buildRootShelf(root, {
                 limit: ROOT_SHELF_LIMIT,
-                viewportWidth: geometryRef.current?.viewportWidth
+                viewportWidth: geometryRef.current?.viewportWidth,
+                blocks: pageBlocksRef.current
             });
             const planAnchors = anchorsRef.current ?? [];
             const anchorOut = planAnchors.length
@@ -480,7 +557,11 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                 : null;
             if (stale)
                 return;
-            const anchorRows = anchorOut?.shelf ?? [];
+            const blockIdBySelector = new Map(shelf.flatMap(r => (r.blockId ? [[r.selector, r.blockId]] : [])));
+            const anchorRows = (anchorOut?.shelf ?? []).map(r => {
+                const blockId = blockIdBySelector.get(r.selector);
+                return blockId && !r.blockId ? { ...r, blockId } : r;
+            });
             const anchorSelectors = new Set(anchorRows.map(r => r.selector));
             const mergedShelf = [
                 ...anchorRows,
@@ -505,14 +586,22 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             for (const { anchor, selector } of anchorBlocks) {
                 try {
                     const { html: blockHtml } = await getOuterHtml(sessionIdForAiContext, selector);
-                    fragments.push({ label: anchor.blockId ?? anchor.label, selector, html: blockHtml });
+                    fragments.push({
+                        label: anchor.blockId ?? anchor.label,
+                        selector,
+                        html: blockHtml
+                    });
                 }
                 catch {
                 }
                 const backgroundUp = anchor.blockSelectors?.length
                     ? null
                     : backgroundImageAncestorFor(anchor.selector, mergedShelf, mergedAncestors);
-                const imageRoots = Array.from(new Set([...(anchor.blockSelectors ?? []), selector, ...(backgroundUp ? [backgroundUp] : [])])).slice(0, 3);
+                const imageRoots = Array.from(new Set([
+                    ...(anchor.blockSelectors ?? []),
+                    selector,
+                    ...(backgroundUp ? [backgroundUp] : [])
+                ])).slice(0, 3);
                 const seenUrls = new Set(images.map(i => i.url));
                 for (const root of imageRoots) {
                     try {
@@ -572,7 +661,9 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                                 label: anchor.label,
                                 selector: shotSelector
                             };
-                            shots.push('url' in shot ? { ...base, url: shot.url } : { ...base, error: shot.error });
+                            shots.push('url' in shot
+                                ? { ...base, url: shot.url }
+                                : { ...base, error: shot.error });
                         }
                         return shots;
                     })
@@ -642,14 +733,23 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                 identifier: picked.selector,
                 descendants: () => [
                     ...descendantShelfRef.current.map(d => d.selector),
+                    ...(pageMode ? rootShelfRef.current.map(d => d.selector) : []),
                     ...aiInsertedRef.current
                 ],
-                ancestors: (selection?.chain ?? []).slice(1).map(n => n.selector)
+                ancestors: (selection?.chain ?? []).slice(1).map(n => n.selector),
+                ...(pageMode
+                    ? {
+                        ancestorsOf: (selector) => rootShelfAncestorsRef.current.get(selector)
+                    }
+                    : {})
             }
             : {
                 selector: 'body',
                 identifier: 'body',
-                descendants: () => [...rootShelfRef.current.map(d => d.selector), ...aiInsertedRef.current],
+                descendants: () => [
+                    ...rootShelfRef.current.map(d => d.selector),
+                    ...aiInsertedRef.current
+                ],
                 ancestors: [],
                 ancestorsOf: (selector) => rootShelfAncestorsRef.current.get(selector)
             };
@@ -683,7 +783,11 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                     scope: opts?.grant ? { ...scope, grant: opts.grant } : scope,
                     resolve: async (selector) => {
                         const r = await resolveCanvasSelector(sessionIdForAiContext, selector);
-                        return { matched: r.matched, matchCount: r.matchCount, viewportRect: r.viewportRect };
+                        return {
+                            matched: r.matched,
+                            matchCount: r.matchCount,
+                            viewportRect: r.viewportRect
+                        };
                     },
                     insertedSelectorsOf: (changeId) => changeListRef.current.peekList().find(r => r.changeId === changeId)
                         ?.insertedSelectors ?? [],
@@ -783,11 +887,40 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             return;
         }
         if (buttonId === 'replace-image') {
-            setImageDialog({ open: true, seed: '' });
+            void Promise.all([
+                getOuterHtml(sessionId, self.selector),
+                selection?.capabilities?.hasBackgroundImage && !selection?.capabilities?.isImg
+                    ? queryElements(sessionId, [self.selector], {
+                        fields: ['computed:background-image']
+                    })
+                    : Promise.resolve(null)
+            ])
+                .then(([{ html }, facts]) => {
+                const node = new DOMParser().parseFromString(html, 'text/html').body
+                    .firstElementChild;
+                const background = facts?.results[0]?.matches[0]?.computed?.['background-image'] ?? '';
+                const url = /^url\(["']?(.*?)["']?\)$/.exec(background)?.[1] ?? '';
+                setImageDialog({
+                    open: true,
+                    seed: facts ? url : (node?.getAttribute('src') ?? '')
+                });
+            })
+                .catch(error => setCommandError(describeCanvasError(error)));
             return;
         }
         if (buttonId === 'replace-video') {
-            setVideoDialog({ open: true, seed: '' });
+            void getOuterHtml(sessionId, self.selector)
+                .then(({ html }) => {
+                const node = new DOMParser().parseFromString(html, 'text/html').body
+                    .firstElementChild;
+                setVideoDialog({
+                    open: true,
+                    seed: node?.getAttribute('src') ??
+                        node?.querySelector('source')?.getAttribute('src') ??
+                        ''
+                });
+            })
+                .catch(error => setCommandError(describeCanvasError(error)));
             return;
         }
         if (buttonId === 'insert') {
@@ -795,11 +928,29 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             return;
         }
         if (buttonId === 'image-setting') {
-            setImageSettingDialog({ open: true, seed: '' });
+            void getOuterHtml(sessionId, self.selector)
+                .then(({ html }) => {
+                const node = new DOMParser().parseFromString(html, 'text/html').body
+                    .firstElementChild;
+                setImageSettingDialog({
+                    open: true,
+                    seed: node?.getAttribute('alt') ?? ''
+                });
+            })
+                .catch(error => setCommandError(describeCanvasError(error)));
             return;
         }
         if (buttonId === 'click-action') {
-            setActionDialog({ open: true, seed: null });
+            const existing = [...changeListRef.current.peekList()]
+                .reverse()
+                .find(r => r.change.type === 'changeElementAction' &&
+                r.change.selector === self.selector);
+            setActionDialog({
+                open: true,
+                seed: existing?.change.type === 'changeElementAction'
+                    ? existing.change.action
+                    : null
+            });
             return;
         }
         if (buttonId === 'edit-style') {
@@ -822,15 +973,10 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         if (buttonId === 'screenshot') {
             setCommandError(null);
             setShot(null);
-            setShotUrl(null);
             commands
                 .captureSelectedElement(self.selector)
                 .then(async (outcome) => {
                 setShot(outcome);
-                if (!uploadImage)
-                    return;
-                const blob = await (await fetch(outcome.dataUrl)).blob();
-                setShotUrl(await uploadImage(blob));
             })
                 .catch(error => setCommandError(describeCanvasError(error)));
             return;
@@ -844,17 +990,16 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
         }
     }, [clipboard, commands, depsOf, frameProps?.sessionId, selection, t, uploadImage]);
     const self = selection?.chain[0];
-    return (_jsxs("div", { className: `${CANVAS_UI_SCOPE} flex h-full min-h-0 flex-col bg-[#F5F7FC]`, children: [_jsx(EditorChrome, { variant: chrome, title: title, versionLabel: versionLabel, versions: versions, activeVersionId: activeVersionId, versionSwitching: switching, onVersionChange: onVersionChange, changeCount: changeList.list.length, onExit: onExit, onSave: () => {
+    return (_jsxs("div", { className: `${CANVAS_UI_SCOPE} flex h-full min-h-0 flex-col bg-[#F5F7FC]`, children: [_jsx(EditorChrome, { slotRight: capturing ? (_jsx("span", { role: "status", className: "text-xs text-muted-foreground", children: t('inlineCanvas.review.generating', '正在生成截图…') })) : undefined, variant: chrome, title: title, versionLabel: versionLabel, versions: versions, activeVersionId: activeVersionId, versionSwitching: switching, onVersionChange: onVersionChange, canUndo: !switching && textEditing === null && changeList.canUndo, canRedo: !switching && textEditing === null && changeList.canRedo, onUndo: () => uiWrite(() => enqueue(() => changeListRef.current.undo())), onRedo: () => uiWrite(() => enqueue(() => changeListRef.current.redo())), changeCount: changeList.list.length, onExit: onExit, onSave: () => {
                     if (switchingRef.current) {
                         setCommandError(t('inlineCanvas.version.switching', '正在切换版本，请稍候'));
                         return;
                     }
                     onSave?.(editor);
-                }, onAddVersion: onAddVersion, onRenameVersion: onRenameVersion, onPreview: onPreview, onToggleChangeList: () => setShowChangeList(v => !v), changeListOpen: showChangeList, onToggleAi: onToggleAi, aiOpen: aiOpen }), _jsxs("div", { className: "relative flex min-h-0 flex-1", children: [_jsxs(ResizablePanelGroup, { direction: "horizontal", autoSaveId: "inline-editor-panes-v2", className: "flex min-h-0 w-full flex-1", children: [showLeftPanel && (_jsxs(_Fragment, { children: [_jsx(ResizablePanel, { id: "left", order: 1, defaultSize: 18, minSize: 12, maxSize: 40, className: "flex min-h-0 flex-col", children: _jsxs("aside", { "data-testid": "inline-editor-left-panel", className: "inline-editor-left flex h-full min-h-0 flex-col bg-white", children: [!!libraryComponents && (_jsx("div", { className: "flex h-9 shrink-0 items-center gap-1 border-b\n                            border-[#EBECF0] px-2", children: [
+                }, onAddVersion: onAddVersion, onRenameVersion: onRenameVersion, removableVersionIds: removableVersionIds, onRemoveVersion: onRemoveVersion, onPreview: onPreview, onToggleChangeList: () => setShowChangeList(v => !v), changeListOpen: showChangeList, onToggleAi: onToggleAi, aiOpen: aiOpen }), _jsxs("div", { className: "relative flex min-h-0 flex-1", children: [_jsxs(ResizablePanelGroup, { direction: "horizontal", autoSaveId: "inline-editor-panes-v2", className: "flex min-h-0 w-full flex-1", children: [showLeftPanel && (_jsxs(_Fragment, { children: [_jsx(ResizablePanel, { id: "left", order: 1, defaultSize: 18, minSize: 12, maxSize: 40, className: "flex min-h-0 flex-col", children: _jsxs("aside", { "data-testid": "inline-editor-left-panel", className: "inline-editor-left flex h-full min-h-0 flex-col bg-white", children: [!!libraryComponents && (_jsx("div", { className: "flex h-9 shrink-0 items-center gap-1 border-b\n                            border-[#EBECF0] px-2", children: [
                                                         ['layers', '图层'],
                                                         ['assets', '组件']
-                                                    ]
-                                                        .map(([tab, label]) => (_jsx("button", { type: "button", "data-testid": `left-tab-${tab}`, "aria-pressed": leftTab === tab, onClick: () => setLeftTab(tab), className: `rounded px-2 py-1 text-[12px] ${leftTab === tab
+                                                    ].map(([tab, label]) => (_jsx("button", { type: "button", "data-testid": `left-tab-${tab}`, "aria-pressed": leftTab === tab, onClick: () => setLeftTab(tab), className: `rounded px-2 py-1 text-[12px] ${leftTab === tab
                                                             ? 'bg-[#F4F5F7] font-semibold text-[#091E42]'
                                                             : 'text-[#6B778C]'}`, children: label }, tab))) })), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: leftTab === 'assets' && libraryComponents ? (_jsx(AssetsPanel, { components: libraryComponents, loading: libraryLoading, canInsert: !!selection?.chain[0] && !switching, onInsert: component => void insertComponent(component) })) : (_jsx(LayersPanel, { tree: tree, selectedSelector: selection?.selector ?? null, onSelect: s => void selectAndReveal(s), onHover: s => void commands.hover(s), onExpand: id => void commands.expandTreeNode(id), onMove: (dragSelector, targetSelector, pos) => uiWrite(() => writes.addMove({
                                                             identifier: dragSelector,
@@ -862,25 +1007,54 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                                                             targetIdentifier: targetSelector,
                                                             targetSelector,
                                                             mode: moveModeFromDropPos(pos)
-                                                        })) })) })] }) }), _jsx(ResizableHandle, { withHandle: true })] })), _jsx(ResizablePanel, { id: "canvas", order: 2, minSize: 30, children: _jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col", children: [_jsx(CanvasContextBar, { url: url, device: device, onDeviceChange: onDeviceChange }), _jsx("div", { ref: canvasAreaRef, className: "relative min-h-0 flex-1 overflow-hidden p-3", children: frameProps && (_jsx(CanvasFrame, { url: frameProps.url, sessionId: frameProps.sessionId, device: frameProps.device, panelWidth: panelWidth, targetViewportWidth: targetViewportWidth[frameProps.device], onFrameLoad: () => { }, domReady: domReady, iframeRef: canvasIframeRef }, frameProps.sessionId)) })] }) })] }), !capturing && shot && (_jsxs("section", { "data-testid": "inline-editor-shot", className: "absolute bottom-4 right-4 z-30 w-[260px] rounded-lg border\n                        border-[#DFE1E6] bg-white p-3\n                        shadow-[0_8px_24px_rgba(9,30,66,0.14),0_2px_8px_rgba(9,30,66,0.08)]", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "text-[13px] font-semibold text-[#091E42]", children: "\u622A\u56FE" }), _jsx("button", { type: "button", className: "text-[11px] text-[#6B778C]", onClick: () => {
-                                            setShot(null);
-                                            setShotUrl(null);
-                                        }, children: "\u5173\u95ED" })] }), _jsx("img", { src: shot.dataUrl, alt: "", className: "max-h-40 w-full rounded border border-[#EBECF0] object-contain" }), shot.truncated && (_jsx("p", { "data-testid": "inline-editor-shot-truncated", className: "mt-1.5 text-[11px] leading-4 text-[#DE350B]", children: "\u5143\u7D20\u8D85\u51FA\u53EF\u89C6\u533A\uFF0C\u53EA\u622A\u5230\u53EF\u89C1\u90E8\u5206" })), shot.scale < 1 && (_jsxs("p", { "data-testid": "inline-editor-shot-scale", className: "mt-1.5 text-[11px] leading-4 text-[#6B778C]", children: ["\u5F53\u524D\u7A97\u53E3\u8F83\u7A84\uFF0C\u622A\u56FE\u5206\u8FA8\u7387\u7EA6\u4E3A\u539F\u56FE\u7684", ` ${Math.round(shot.scale * 100)}%`] })), shotUrl && (_jsx("a", { "data-testid": "inline-editor-shot-url", href: shotUrl, target: "_blank", rel: "noopener noreferrer", className: "mt-1.5 block truncate text-[11px] text-[#0052CC] underline", children: shotUrl }))] })), _jsx(ChangeListPopover, { open: showChangeList && !capturing, onClose: () => setShowChangeList(false), children: _jsx(ChangeListPanel, { list: changeList.list, onRevert: id => uiWrite(() => writes.revert(id)), onRevertAll: () => uiWrite(() => writes.revertAll()), lastError: changeList.lastError, onHover: s => void commands.hover(s), onSelect: s => void selectAndReveal(s) }) })] }), !capturing && (_jsx(SelectionOverlay, { geometry: geometry.latest, context: overlayContext, selectedLabel: self ? `<${self.tag}>` : undefined })), !capturing && blockOverlay && (_jsx(BlockOverlay, { blocks: blockOverlay.blocks, activeId: blockOverlay.activeId, onHover: blockOverlay.onHover, geometry: geometry.latest, context: overlayContext, scale: editor.mobileFit.scale })), !capturing && commandError && (_jsx("div", { "data-testid": "inline-editor-command-error", className: "fixed z-[2147483003] -translate-x-1/2 rounded bg-[#DE350B] px-2.5\n                        py-1 text-[11px] leading-4 text-white shadow", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, onClick: () => setCommandError(null), children: commandError })), !capturing && aiApplyNote && (_jsx("div", { "data-testid": "inline-editor-ai-apply-note", className: "fixed z-[2147483003] max-w-[520px] -translate-x-1/2 rounded\n                        bg-[#253858] px-2.5 py-1 text-[11px] leading-4 text-white shadow", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, onClick: () => setAiApplyNote(null), children: aiApplyNote })), !capturing && move && (_jsxs("div", { "data-testid": "inline-editor-move-bar", className: "fixed z-[2147483003] flex -translate-x-1/2 items-center gap-2\n                        rounded bg-[#091E42] px-2.5 py-1.5 text-[11px] leading-4 text-white shadow", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [move.target === null ? (_jsx(_Fragment, { children: _jsx("span", { children: move.rejected === 'same-element'
+                                                        })) })) })] }) }), _jsx(ResizableHandle, { withHandle: true })] })), _jsx(ResizablePanel, { id: "canvas", order: 2, minSize: 30, children: _jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col", children: [_jsx(CanvasContextBar, { url: url, device: device, onDeviceChange: changeDevice }), _jsxs("div", { ref: canvasAreaRef, className: "relative min-h-0 flex-1 overflow-hidden p-3", children: [editor.session.state === 'failed' && (_jsxs("div", { role: "alert", "data-testid": "inline-editor-session-failed", className: "absolute inset-3 z-20 flex flex-col items-center justify-center gap-3 rounded-lg bg-white p-6 text-center text-sm", children: [_jsx("p", { className: "font-semibold", children: t('inlineCanvas.review.pageLoadFailed', '目标页面无法加载') }), _jsx("p", { children: [
+                                                                'NO_EXTENSION',
+                                                                'EXTENSION_ID_MISSING',
+                                                                'CONTRACT_MISMATCH'
+                                                            ].includes(editor.session.reason ?? '')
+                                                                ? describeCanvasError(editor.session.reason)
+                                                                : t('inlineCanvas.review.pageLoadHint', '请返回检查页面地址、网站访问权限和网络连接后重试。') }), _jsx("code", { className: "text-xs text-muted-foreground", children: editor.session.reason }), _jsx(Button, { variant: "secondary", onClick: onExit, children: t('inlineCanvas.review.backFromFailed', '返回修改') })] })), frameProps && (_jsx(CanvasFrame, { url: frameProps.url, sessionId: frameProps.sessionId, device: frameProps.device, panelWidth: panelWidth, targetViewportWidth: targetViewportWidth[frameProps.device], onFrameLoad: () => { }, domReady: domReady, iframeRef: canvasIframeRef }, frameProps.sessionId))] })] }) })] }), !capturing && shot && (_jsx(ScreenshotCard, { dataUrl: shot.dataUrl, truncated: shot.truncated, scale: shot.scale, uploadImage: uploadImage, onClose: () => {
+                            setShot(null);
+                        } }, shot.dataUrl)), _jsx(ChangeListPopover, { open: showChangeList && !capturing, onClose: () => setShowChangeList(false), children: _jsx(ChangeListPanel, { list: changeList.list, onRevert: id => uiWrite(() => writes.revert(id)), onRevertAll: () => uiWrite(() => writes.revertAll()), lastError: changeList.lastError, onHover: s => void commands.hover(s), onSelect: s => void selectAndReveal(s) }) })] }), !capturing && (_jsx(SelectionOverlay, { geometry: geometry.latest, context: overlayContext, selectedLabel: self ? `<${self.tag}>` : undefined })), !capturing && blockOverlay && (_jsx(BlockOverlay, { blocks: blockOverlay.blocks, activeId: blockOverlay.activeId, onHover: blockOverlay.onHover, geometry: geometry.latest, context: overlayContext, scale: editor.mobileFit.scale })), !capturing && commandError && (_jsxs(EditorStatus, { tone: "error", "data-testid": "inline-editor-command-error", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [_jsx("span", { children: commandError }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setCommandError(null), children: t('inlineCanvas.chrome.close', '关闭') })] })), !capturing && aiApplyNote && (_jsxs(EditorStatus, { "data-testid": "inline-editor-ai-apply-note", style: { left: `${area.x + area.width / 2}px`, top: `${area.y + 8}px` }, children: [_jsx("span", { role: "status", children: aiApplyNote }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setAiApplyNote(null), children: t('inlineCanvas.chrome.close', '关闭') })] })), !capturing && move && (_jsx("div", { role: "toolbar", "aria-label": t('inlineCanvas.move.title'), "data-testid": "inline-editor-move-bar", className: "fixed z-[903] -translate-x-1/2 rounded-lg border bg-popover p-3 text-xs text-popover-foreground shadow-md", style: {
+                    width: 'min(600px, calc(100vw - 32px))',
+                    left: `clamp(min(316px, 50vw), ${area.x + area.width / 2}px, max(calc(100vw - 316px), 50vw))`,
+                    top: `${area.y + 8}px`
+                }, children: move.target === null ? (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { children: move.rejected === 'same-element'
                                 ? '不能移到它自己里面，请另选一个目标'
-                                : t('inlineCanvas.move.pickTarget') }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('inlineCanvas.move.position') }), ['top', 'bottom', 'before', 'after'].map(pos => (_jsx("button", { type: "button", "data-testid": `move-position-${pos}`, className: "rounded bg-white/15 px-1.5 py-0.5 hover:bg-white/25", onClick: () => void commands
-                                    .confirmMove(pos)
-                                    .catch(e => setCommandError(describeCanvasError(e))), children: t(`inlineCanvas.move.${pos}`) }, pos)))] })), _jsx("button", { type: "button", "data-testid": "move-cancel", className: "ml-1 text-white/70 underline", onClick: () => commands.cancelMove(), children: t('inlineCanvas.move.cancel') })] })), !capturing && textEditing !== null && (_jsx("div", { "data-testid": "inline-editor-text-editing-hint", className: "pointer-events-none fixed z-[2147483003] -translate-x-1/2 rounded\n                        bg-[#091E42] px-2.5 py-1 text-[11px] leading-4 text-white shadow", style: {
+                                : t('inlineCanvas.move.pickTarget') }), _jsx(Button, { size: "default", variant: "secondary", type: "button", "data-testid": "move-cancel", onClick: () => commands.cancelMove(), children: t('inlineCanvas.move.cancel') })] })) : (_jsx(MovePositionControls, { onConfirm: commands.confirmMove, onCancel: commands.cancelMove, onError: e => setCommandError(describeCanvasError(e)) }, move.target)) })), !capturing && textEditing !== null && (_jsx(EditorStatus, { "data-testid": "inline-editor-text-editing-hint", style: {
                     left: `${area.x + area.width / 2}px`,
                     top: `${area.y + 8}px`
-                }, children: "\u6B63\u5728\u7F16\u8F91\u6587\u5B57 \u00B7 \u56DE\u8F66\u63D0\u4EA4 \u00B7 Esc \u53D6\u6D88" })), !capturing && !switching && (_jsx(SelectionToolbar, { selectedRect: selectedRect, area: area, capabilities: selection?.capabilities ?? null, isScrolling: geometry.isScrolling, onAction: onToolbarAction, host: { askAi: !!onAskAi } })), stylePanelOpen && !switching && selectedRect && self && (_jsx("div", { className: "fixed z-[2147483002]", style: {
-                    left: `${Math.min(selectedRect.x + selectedRect.width + 12, area.x + area.width - 332)}px`,
-                    top: `${Math.max(area.y + 8, selectedRect.y)}px`
-                }, children: _jsx(StylePanel, { tag: self.tag, capabilities: selection?.capabilities ?? null, declaredStyles: selection?.declaredStyles, onClose: () => setStylePanelOpen(false), onApply: (property, value) => uiWrite(() => editStyle(depsOf(self), property, value)) }) })), _jsx(Dialog, { open: pasteDialog, onOpenChange: setPasteDialog, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "paste-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.clipboard.pastePosition') }) }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: (selection?.capabilities ? pasteModes(selection.capabilities) : []).map(mode => (_jsx("button", { type: "button", "data-testid": `paste-mode-${mode}`, className: "rounded border border-[#DFE1E6] px-2 py-1 text-[12px]\n                                        text-[#344563] hover:border-[#00A92E]", onClick: () => {
+                }, children: "\u6B63\u5728\u7F16\u8F91\u6587\u5B57 \u00B7 \u56DE\u8F66\u63D0\u4EA4 \u00B7 Esc \u53D6\u6D88" })), !capturing && !switching && !move && textEditing === null && (_jsx(SelectionToolbar, { selectedRect: selectedRect, area: area, capabilities: selection?.capabilities ?? null, isScrolling: geometry.isScrolling, onAction: onToolbarAction, host: { askAi: !!onAskAi } })), stylePanelOpen &&
+                !switching &&
+                selectedRect &&
+                self &&
+                createPortal(_jsx("div", { className: `${CANVAS_UI_SCOPE} fixed z-[1000]`, children: _jsx(StylePanel, { anchor: {
+                            x: Math.min(selectedRect.x + selectedRect.width + 12, area.x + area.width - 332),
+                            y: Math.max(area.y + 8, selectedRect.y)
+                        }, tag: self.tag, capabilities: selection?.capabilities ?? null, resettableProperties: changeList.list.flatMap(r => r.change.type === 'elementStyle' &&
+                            r.change.selector === self.selector
+                            ? [r.change.property]
+                            : []), declaredStyles: Object.assign({}, currentStyles, ...changeList.list
+                            .filter(r => r.change.type === 'elementStyle' &&
+                            r.change.selector === self.selector)
+                            .map(r => r.change.type === 'elementStyle'
+                            ? { [r.change.property]: r.change.value }
+                            : {})), onReset: property => {
+                            void uiWrite(async () => {
+                                for (const record of changeList
+                                    .peekList()
+                                    .filter(r => r.change.type === 'elementStyle' &&
+                                    r.change.selector === self.selector &&
+                                    r.change.property === property)
+                                    .reverse())
+                                    await writes.revert(record.changeId);
+                            });
+                        }, onClose: () => setStylePanelOpen(false), onApply: (property, value) => uiWrite(() => editStyle(depsOf(self), property, value)) }, self.selector) }), document.body), _jsx(Dialog, { open: pasteDialog, onOpenChange: setPasteDialog, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "paste-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.clipboard.pastePosition') }) }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: (selection?.capabilities ? pasteModes(selection.capabilities) : []).map(mode => (_jsxs(Button, { variant: "secondary", type: "button", "data-testid": `paste-mode-${mode}`, onClick: () => {
                                     if (!self)
                                         return;
                                     setPasteDialog(false);
                                     void commands
                                         .pasteInto(self.selector, mode)
                                         .catch(e => setCommandError(describeCanvasError(e)));
-                                }, children: t(`inlineCanvas.clipboard.${mode}`) }, mode))) })] }) }), _jsx(ImageEditDialog, { open: imageDialog.open, capabilities: selection?.capabilities ?? null, seed: imageDialog.seed, uploadImage: uploadImage, onOpenChange: open => setImageDialog(prev => ({ ...prev, open })), onApply: (input) => self && uiWrite(() => replaceImage(depsOf(self), input)) }), _jsx(ReplaceVideoDialog, { open: videoDialog.open, seed: videoDialog.seed, onOpenChange: open => setVideoDialog(prev => ({ ...prev, open })), onApply: url => self && uiWrite(() => replaceVideo(depsOf(self), url)) }), _jsx(InsertElementDialog, { open: insertDialog, capabilities: selection?.capabilities ?? null, onOpenChange: setInsertDialog, onApply: input => self && uiWrite(() => insertElement(depsOf(self), input)) }), _jsx(ImageSettingDialog, { open: imageSettingDialog.open, seed: imageSettingDialog.seed, onOpenChange: open => setImageSettingDialog(prev => ({ ...prev, open })), onApply: alt => self && uiWrite(() => setImageAlt(depsOf(self), alt)) }), _jsx(ClickActionDialog, { open: actionDialog.open, seed: actionDialog.seed, onOpenChange: open => setActionDialog(prev => ({ ...prev, open })), onApply: action => self && uiWrite(() => setClickAction(depsOf(self), action)) }), _jsx(HtmlEditDialog, { open: htmlDialog.open, seed: htmlDialog.seed, onOpenChange: open => setHtmlDialog(prev => ({ ...prev, open })), onApply: html => self && uiWrite(() => editHtml(depsOf(self), html)) })] }));
+                                }, children: [t('inlineCanvas.clipboard.paste', '粘贴'), " \u00B7", ' ', t(`inlineCanvas.clipboard.${mode}`)] }, mode))) })] }) }), _jsx(ImageEditDialog, { open: imageDialog.open, capabilities: selection?.capabilities ?? null, seed: imageDialog.seed, uploadImage: uploadImage, onOpenChange: open => setImageDialog(prev => ({ ...prev, open })), onApply: (input) => self && uiWrite(() => replaceImage(depsOf(self), input)) }), _jsx(ReplaceVideoDialog, { open: videoDialog.open, seed: videoDialog.seed, onOpenChange: open => setVideoDialog(prev => ({ ...prev, open })), onApply: url => self && uiWrite(() => replaceVideo(depsOf(self), url)) }), _jsx(InsertElementDialog, { open: insertDialog, capabilities: selection?.capabilities ?? null, onOpenChange: setInsertDialog, onApply: input => self && uiWrite(() => insertElement(depsOf(self), input)) }), _jsx(ImageSettingDialog, { open: imageSettingDialog.open, seed: imageSettingDialog.seed, onOpenChange: open => setImageSettingDialog(prev => ({ ...prev, open })), onApply: alt => self && uiWrite(() => setImageAlt(depsOf(self), alt)) }), _jsx(ClickActionDialog, { open: actionDialog.open, seed: actionDialog.seed, onOpenChange: open => setActionDialog(prev => ({ ...prev, open })), onApply: action => self && uiWrite(() => setClickAction(depsOf(self), action)) }), _jsx(HtmlEditDialog, { open: htmlDialog.open, seed: htmlDialog.seed, onOpenChange: open => setHtmlDialog(prev => ({ ...prev, open })), onApply: html => self && uiWrite(() => editHtml(depsOf(self), html)) })] }));
 }

package/dist/canvas-ui/tree/TreePanel.d.ts

@@ -26,6 +26,7 @@ export interface TreePanelNode extends TreeNode {
     truncated?: boolean;
 }
 export interface TreePanelProps {
+    emptyLabel?: string;
     nodes: Record<string, TreePanelNode>;
     rootId: string;
     selectedId: string | null;
@@ -44,4 +45,4 @@ export interface TreePanelProps {
      */
     onExpand?: (id: string) => void;
 }
-export declare function TreePanel({ nodes, rootId, selectedId, hoverId, query, onSelect, onShiftSelect, onHover, onMove, onExpand }: TreePanelProps): React.JSX.Element;
+export declare function TreePanel({ emptyLabel, nodes, rootId, selectedId, hoverId, query, onSelect, onShiftSelect, onHover, onMove, onExpand }: TreePanelProps): React.JSX.Element;