@ptengine/inline-editor 0.0.0-stage → 0.1.0

package/dist/InlineEditor.js

@@ -0,0 +1,867 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+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';
+import { CanvasContextBar } from './kernel/CanvasContextBar.js';
+import { SelectionOverlay } from './kernel/selection/SelectionOverlay.js';
+import { BlockOverlay } from './kernel/blocks/BlockOverlay.js';
+import { dataUrlToBlob } from './kernel/dataUrlToBlob.js';
+import { SelectionToolbar } from './kernel/selection/SelectionToolbar.js';
+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 { useAiSelectionContext } from './kernel/selection/useAiSelectionContext.js';
+import { buildDescendantShelf } from './kernel/selection/buildDescendantShelf.js';
+import { buildRootShelf } from './kernel/selection/buildRootShelf.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 { pasteModes } from './kernel/selection/toolbarButtons.js';
+import { ClickActionDialog } from './dialogs/ClickActionDialog.js';
+import { ImageEditDialog } from './dialogs/ImageEditDialog.js';
+import { resolveImageBranch } from './dialogs/imageEdit.js';
+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 { HtmlEditDialog } from './dialogs/HtmlEditDialog.js';
+import { setCode } from './kernel/canvasCommands.js';
+import { describeCanvasError } from './kernel/canvasErrors.js';
+import { LayersPanel } from './tree/LayersPanel.js';
+import { AssetsPanel } from './assets/AssetsPanel.js';
+import { componentInsertPayload } from './assets/componentLibrary.js';
+import { moveModeFromDropPos } from './tree/domTreeAdapter.js';
+import { useInlineEditor } from './useInlineEditor.js';
+import { shrinkImageForUpload } from './kernel/shrinkImageForUpload.js';
+const nodeSelectorOf = (n) => n.selector;
+function imageTargetOf(caps) {
+    if (!caps)
+        return undefined;
+    const branch = resolveImageBranch(caps);
+    if (branch === 'img-src')
+        return 'img';
+    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, trackAiSelection, renderNodeIcon, versions, activeVersionId, versionChanges, onVersionChange, onVersionLeave, onVersionEnter, resolveChangeId, allowedImageOrigins, allowedImageUrls, allowedLinkUrls, viewportWidthOverride, blockOverlay }) {
+    const { t } = useTranslation();
+    const canvasAreaRef = useRef(null);
+    const canvasIframeRef = useRef(null);
+    const editor = useInlineEditor({
+        url,
+        device,
+        iframeRef: canvasIframeRef,
+        renderNodeIcon
+    });
+    const { selection, tree, clipboard, move, capturing, textEditing, geometry, changeList, commands, frameProps, domReady } = editor;
+    const selectAndReveal = useCallback(async (selector) => {
+        await commands.select(selector);
+        await commands.reveal(selector);
+    }, [commands]);
+    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 [imageDialog, setImageDialog] = useState({ open: false, seed: '' });
+    const [imageSettingDialog, setImageSettingDialog] = useState({ open: false, seed: '' });
+    const [videoDialog, setVideoDialog] = useState({ open: false, seed: '' });
+    const [insertDialog, setInsertDialog] = useState(false);
+    const [pasteDialog, setPasteDialog] = useState(false);
+    const [showLeftPanel, setShowLeftPanel] = useState(true);
+    const [leftTab, setLeftTab] = useState('layers');
+    const [actionDialog, setActionDialog] = useState({ open: false, seed: null });
+    const pageOrigin = useMemo(() => {
+        try {
+            return new URL(url).origin;
+        }
+        catch {
+            return '';
+        }
+    }, [url]);
+    const imageOrigins = useMemo(() => Array.from(new Set([pageOrigin, ...(allowedImageOrigins ?? [])].filter(Boolean))), [pageOrigin, allowedImageOrigins]);
+    const changeListRef = useRef(changeList);
+    changeListRef.current = changeList;
+    const versionChangesRef = useRef(versionChanges);
+    versionChangesRef.current = versionChanges;
+    const versionCallbacksRef = useRef({ onVersionChange, onVersionLeave, onVersionEnter });
+    versionCallbacksRef.current = { onVersionChange, onVersionLeave, onVersionEnter };
+    const resolveChangeIdRef = useRef(resolveChangeId);
+    resolveChangeIdRef.current = resolveChangeId;
+    const hasVersions = !!versions?.length;
+    const hasVersionsRef = useRef(hasVersions);
+    hasVersionsRef.current = hasVersions;
+    const loadedVersionRef = useRef(activeVersionId);
+    const [loadedVersion, setLoadedVersion] = useState(activeVersionId);
+    const leftVersionIdsRef = useRef(new Map());
+    const [switching, setSwitching] = useState(false);
+    const switchingRef = useRef(false);
+    const queueRef = useRef(Promise.resolve());
+    const enqueue = useCallback((task) => {
+        const run = queueRef.current.then(task, task);
+        queueRef.current = run.then(() => undefined, () => undefined);
+        return run;
+    }, []);
+    const prevIdsFor = useCallback((versionId, next) => {
+        const remembered = versionId ? leftVersionIdsRef.current.get(versionId) : undefined;
+        if (remembered?.length === next.length)
+            return remembered;
+        const live = changeListRef.current.peekList().map(r => r.changeId);
+        if (live.length === next.length && live.length > 0)
+            return live;
+        const fromChanges = next.map(c => c.id ?? '');
+        return fromChanges.length > 0 && fromChanges.every(Boolean) ? fromChanges : undefined;
+    }, []);
+    const switchToVersion = useCallback(async (nextId) => {
+        const prevId = loadedVersionRef.current;
+        if (!hasVersionsRef.current || nextId === prevId)
+            return;
+        setSwitching(true);
+        switchingRef.current = true;
+        try {
+            const live = changeListRef.current.peekList();
+            if (prevId) {
+                versionCallbacksRef.current.onVersionLeave?.(prevId, live);
+                leftVersionIdsRef.current.set(prevId, live.map(r => r.changeId));
+            }
+            const next = versionChangesRef.current?.[nextId] ?? [];
+            const { idMap } = await changeListRef.current.replaceAll(next, prevIdsFor(nextId, next));
+            loadedVersionRef.current = nextId;
+            setLoadedVersion(nextId);
+            versionCallbacksRef.current.onVersionEnter?.(nextId, idMap);
+        }
+        finally {
+            setSwitching(false);
+            switchingRef.current = false;
+        }
+    }, [prevIdsFor]);
+    const rejectWhileSwitching = useCallback((run) => {
+        if (!switchingRef.current)
+            return run();
+        return Promise.reject(new Error('VERSION_SWITCHING'));
+    }, []);
+    const writes = useMemo(() => ({
+        addStyle: input => rejectWhileSwitching(() => changeListRef.current.addStyle(input)),
+        addContent: input => rejectWhileSwitching(() => changeListRef.current.addContent(input)),
+        addAttribute: input => rejectWhileSwitching(() => changeListRef.current.addAttribute(input)),
+        addAction: input => rejectWhileSwitching(() => changeListRef.current.addAction(input)),
+        addMove: input => rejectWhileSwitching(() => changeListRef.current.addMove(input)),
+        revert: id => rejectWhileSwitching(() => changeListRef.current.revert(id)),
+        revertAll: () => rejectWhileSwitching(() => changeListRef.current.revertAll())
+    }), [rejectWhileSwitching]);
+    const uiWrite = useCallback((run) => {
+        if (switchingRef.current) {
+            setCommandError(t('inlineCanvas.version.switching', '正在切换版本，请稍候'));
+            return;
+        }
+        void run().catch(e => setCommandError(describeCanvasError(e)));
+    }, [t]);
+    useEffect(() => {
+        if (!hasVersions || !activeVersionId)
+            return;
+        if (activeVersionId === loadedVersionRef.current)
+            return;
+        void enqueue(() => switchToVersion(activeVersionId)).catch(e => {
+            setCommandError(describeCanvasError(e));
+            const back = loadedVersionRef.current;
+            if (back)
+                versionCallbacksRef.current.onVersionChange?.(back);
+        });
+    }, [activeVersionId, hasVersions, enqueue, switchToVersion]);
+    useEffect(() => {
+        const el = canvasAreaRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(entries => {
+            const w = entries[0]?.contentRect.width;
+            if (w)
+                setPanelWidth(w);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const sessionIdForAssets = frameProps?.sessionId;
+    useEffect(() => {
+        injectedAssetsRef.current = [];
+    }, [sessionIdForAssets]);
+    const hydratedSessionRef = useRef(null);
+    const sessionIdForHydrate = frameProps?.sessionId;
+    const bootChanges = hasVersions && activeVersionId && versionChanges?.[activeVersionId]
+        ? versionChanges[activeVersionId]
+        : initialChanges;
+    useEffect(() => {
+        if (!domReady || !sessionIdForHydrate)
+            return;
+        if (hydratedSessionRef.current === sessionIdForHydrate)
+            return;
+        hydratedSessionRef.current = sessionIdForHydrate;
+        if (!bootChanges?.length)
+            return;
+        const versionId = hasVersions ? activeVersionId : undefined;
+        void enqueue(async () => {
+            const { outcome, idMap } = await changeListRef.current.replaceAll(bootChanges, prevIdsFor(versionId, bootChanges));
+            if (versionId) {
+                loadedVersionRef.current = versionId;
+                setLoadedVersion(versionId);
+                versionCallbacksRef.current.onVersionEnter?.(versionId, idMap);
+            }
+            onHydrated?.(outcome);
+        }).catch(e => setCommandError(describeCanvasError(e)));
+    }, [domReady, sessionIdForHydrate, bootChanges]);
+    const commandsRef = useRef(commands);
+    commandsRef.current = commands;
+    const sessionReady = domReady && !editor.mobileFit.pending;
+    const readySessionRef = useRef(null);
+    readySessionRef.current = sessionReady && sessionIdForHydrate ? sessionIdForHydrate : null;
+    const fitScaleRef = useRef(1);
+    fitScaleRef.current = editor.mobileFit.scale;
+    const sessionReadyRef = useRef(null);
+    useEffect(() => {
+        if (!onSessionReady || !sessionReady || !sessionIdForHydrate)
+            return;
+        if (sessionReadyRef.current === sessionIdForHydrate)
+            return;
+        sessionReadyRef.current = sessionIdForHydrate;
+        onSessionReady(sessionIdForHydrate);
+    }, [onSessionReady, sessionReady, sessionIdForHydrate]);
+    const editorHandleSessionRef = useRef(null);
+    useEffect(() => {
+        if (!onEditorReady || !sessionReady || !sessionIdForHydrate)
+            return;
+        if (editorHandleSessionRef.current === sessionIdForHydrate)
+            return;
+        editorHandleSessionRef.current = sessionIdForHydrate;
+        onEditorReady({
+            clearSelection: () => commandsRef.current.select(''),
+            peekList: () => changeListRef.current.peekList(),
+            hasUnsavedChanges: () => changeListRef.current.peekList().length > 0,
+            capturePage: async () => {
+                const outcome = await commandsRef.current.captureSelectedElement('body');
+                return dataUrlToBlob(outcome.dataUrl);
+            },
+            scrollToSelector: selector => commandsRef.current.reveal(selector),
+            getSessionId: () => readySessionRef.current,
+            getMobileFitScale: () => fitScaleRef.current
+        });
+    }, [onEditorReady, sessionReady, sessionIdForHydrate]);
+    const selectedSelector = selection?.selector;
+    useEffect(() => {
+        setStylePanelOpen(false);
+    }, [selectedSelector]);
+    const overridePc = viewportWidthOverride?.pc;
+    const overrideMobile = viewportWidthOverride?.mobile;
+    const targetViewportWidth = useMemo(() => ({
+        pc: overridePc ?? TARGET_VIEWPORT_WIDTH.pc,
+        mobile: overrideMobile ?? TARGET_VIEWPORT_WIDTH.mobile
+    }), [overridePc, overrideMobile]);
+    const zoom = computeZoom(panelWidth, targetViewportWidth[device]);
+    const iframeRect = canvasIframeRef.current?.getBoundingClientRect();
+    const overlayContext = useMemo(() => measureFrameContext(canvasIframeRef.current, zoom), [iframeRect?.left, iframeRect?.top, zoom]);
+    const canvasAreaRect = canvasAreaRef.current?.getBoundingClientRect();
+    const area = {
+        x: canvasAreaRect?.left ?? 0,
+        y: canvasAreaRect?.top ?? 0,
+        width: canvasAreaRect?.width ?? 0,
+        height: canvasAreaRect?.height ?? 0
+    };
+    const selectedRect = geometry.latest?.selectedViewportRect
+        ? frameRectToProductRect(geometry.latest.selectedViewportRect, overlayContext)
+        : null;
+    const depsOf = useCallback((self) => ({
+        identifier: self.selector,
+        selector: self.selector,
+        ancestors: (selection?.chain ?? []).slice(1).map(n => n.selector),
+        addStyle: writes.addStyle,
+        addContent: writes.addContent,
+        addAttribute: writes.addAttribute,
+        addAction: writes.addAction
+    }), [writes, selection]);
+    const injectedAssetsRef = useRef([]);
+    const insertComponent = useCallback(async (component) => {
+        const target = selection?.chain[0];
+        const sessionId = frameProps?.sessionId;
+        if (!target || !sessionId)
+            return;
+        if (switchingRef.current) {
+            setCommandError(t('inlineCanvas.version.switching', '正在切换版本，请稍候'));
+            return;
+        }
+        setCommandError(null);
+        try {
+            const { html, codeList } = componentInsertPayload(component);
+            if (codeList.length > 0) {
+                injectedAssetsRef.current = [...injectedAssetsRef.current, ...codeList];
+                await setCode(sessionId, injectedAssetsRef.current);
+            }
+            await writes.addContent({
+                identifier: target.selector,
+                selector: target.selector,
+                html,
+                mode: 'append'
+            });
+            if (component.js) {
+                setCommandError('组件已插入。它带有 JS，画布里不会执行（客户页没有 SDK 运行时），发布后才生效');
+            }
+        }
+        catch (error) {
+            setCommandError(describeCanvasError(error));
+        }
+    }, [writes, frameProps?.sessionId, selection, t]);
+    const captureAiShot = useCallback(async (selector) => {
+        if (!uploadImage)
+            return { error: 'host did not provide uploadImage' };
+        try {
+            const outcome = await commands.captureSelectedElement(selector);
+            const raw = await (await fetch(outcome.dataUrl)).blob();
+            const blob = await shrinkImageForUpload(raw);
+            const url = await uploadImage(blob);
+            return url ? { url } : { error: 'upload returned no url' };
+        }
+        catch (error) {
+            setCommandError(describeCanvasError(error));
+            return { error: error instanceof Error ? error.message : String(error) };
+        }
+    }, [uploadImage, commands]);
+    const captureAiScreenshot = useCallback(async (selector) => {
+        const shot = await captureAiShot(selector);
+        return 'url' in shot ? shot.url : null;
+    }, [captureAiShot]);
+    const descendantShelfRef = useRef([]);
+    const geometryRef = useRef(null);
+    geometryRef.current = geometry.latest;
+    const [elementImages, setElementImages] = useState(null);
+    const buildAiContext = useCallback((self, outerHtml) => buildElementAiContext({
+        selector: self.selector,
+        tag: self.tag,
+        imageTarget: imageTargetOf(selection?.capabilities),
+        images: elementImages?.selector === self.selector ? elementImages.images : undefined,
+        ancestors: (selection?.chain ?? []).map(n => n.selector).slice().reverse(),
+        outerHtml,
+        descendants: descendantShelfRef.current,
+        hasChildren: (selection?.capabilities?.childElementCount ?? 0) > 0,
+        geometry: elementGeometryForAi(geometryRef.current, device)
+    }), [selection, elementImages]);
+    const sessionIdForAiContext = frameProps?.sessionId;
+    const readOuterHtmlForAi = useCallback((selector) => getOuterHtml(sessionIdForAiContext, selector), [sessionIdForAiContext]);
+    const captureForAi = useCallback((selector) => () => captureAiScreenshot(selector), [captureAiScreenshot]);
+    useEffect(() => {
+        const picked = selection?.chain[0];
+        if (!trackAiSelection || !picked || !sessionIdForAiContext) {
+            descendantShelfRef.current = [];
+            return;
+        }
+        let stale = false;
+        void getDomTree(sessionIdForAiContext, {
+            rootSelector: picked.selector,
+            maxDepth: SHELF_TREE_MAX_DEPTH,
+            maxChildren: 20,
+            maxNodes: SHELF_TREE_MAX_NODES,
+            visibleOnly: true,
+            includeRect: true
+        })
+            .then(root => {
+            if (!stale)
+                descendantShelfRef.current = buildDescendantShelf(root);
+        })
+            .catch(() => {
+            descendantShelfRef.current = [];
+        });
+        return () => {
+            stale = true;
+        };
+    }, [trackAiSelection, selection, sessionIdForAiContext]);
+    useEffect(() => {
+        const picked = selection?.chain[0];
+        if (!trackAiSelection || !picked || !sessionIdForAiContext)
+            return;
+        let stale = false;
+        void getElementImages(sessionIdForAiContext, picked.selector, AI_ELEMENT_IMAGE_LIMIT)
+            .then(({ images }) => {
+            if (stale || !images.length)
+                return;
+            setElementImages({ selector: picked.selector, images });
+        })
+            .catch(() => {
+        });
+        return () => {
+            stale = true;
+        };
+    }, [trackAiSelection, selection, sessionIdForAiContext]);
+    const pageContextSessionRef = useRef(null);
+    const rootShelfRef = useRef([]);
+    const aiInsertedRef = useRef([]);
+    const rootShelfAncestorsRef = useRef(new Map());
+    const anchorsResultRef = useRef(null);
+    const anchorsRef = useRef(anchors);
+    useEffect(() => {
+        anchorsRef.current = anchors;
+    }, [anchors]);
+    useEffect(() => {
+        rootShelfRef.current = [];
+        rootShelfAncestorsRef.current = new Map();
+        aiInsertedRef.current = [];
+        anchorsResultRef.current = null;
+        pageContextSessionRef.current = null;
+        leftVersionIdsRef.current = new Map();
+    }, [sessionIdForAiContext]);
+    useEffect(() => {
+        if (!onPageContextReady || !domReady || !sessionIdForAiContext)
+            return;
+        if (pageContextSessionRef.current === sessionIdForAiContext)
+            return;
+        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
+            });
+            const { html } = await getOuterHtml(sessionIdForAiContext, 'body');
+            if (stale)
+                return;
+            const { shelf, ancestorsOf } = buildRootShelf(root, {
+                limit: ROOT_SHELF_LIMIT,
+                viewportWidth: geometryRef.current?.viewportWidth
+            });
+            const planAnchors = anchorsRef.current ?? [];
+            const anchorOut = planAnchors.length
+                ? await resolveInlinePlanAnchors({
+                    anchors: planAnchors,
+                    rootTree: root,
+                    resolveSelector: async (selector) => {
+                        const r = await resolveCanvasSelector(sessionIdForAiContext, selector);
+                        return { matched: r.matched, matchCount: r.matchCount };
+                    },
+                    getSubtree: (rootSelector) => getDomTree(sessionIdForAiContext, {
+                        rootSelector,
+                        maxDepth: SHELF_TREE_MAX_DEPTH,
+                        maxChildren: 20,
+                        maxNodes: SHELF_TREE_MAX_NODES,
+                        visibleOnly: true,
+                        includeRect: true
+                    })
+                })
+                : null;
+            if (stale)
+                return;
+            const anchorRows = anchorOut?.shelf ?? [];
+            const anchorSelectors = new Set(anchorRows.map(r => r.selector));
+            const mergedShelf = [
+                ...anchorRows,
+                ...shelf.filter(row => !anchorSelectors.has(row.selector))
+            ];
+            const mergedAncestors = new Map(ancestorsOf);
+            for (const [selector, chain] of anchorOut?.ancestorsOf ?? []) {
+                mergedAncestors.set(selector, chain);
+            }
+            rootShelfRef.current = mergedShelf;
+            rootShelfAncestorsRef.current = mergedAncestors;
+            anchorsResultRef.current = anchorOut?.anchors ?? null;
+            const resolvedAnchors = (anchorOut?.anchors ?? []).filter(a => a.resolved);
+            const anchorBlocks = [];
+            for (const anchor of resolvedAnchors) {
+                const selector = blockContainerFor(anchor, mergedShelf, mergedAncestors);
+                if (!anchorBlocks.some(b => b.selector === selector))
+                    anchorBlocks.push({ anchor, selector });
+            }
+            const fragments = [];
+            const images = [];
+            for (const { anchor, selector } of anchorBlocks) {
+                try {
+                    const { html: blockHtml } = await getOuterHtml(sessionIdForAiContext, selector);
+                    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 seenUrls = new Set(images.map(i => i.url));
+                for (const root of imageRoots) {
+                    try {
+                        const { images: found } = await getElementImages(sessionIdForAiContext, root);
+                        for (const im of found) {
+                            if (seenUrls.has(im.url))
+                                continue;
+                            seenUrls.add(im.url);
+                            images.push({
+                                ...(anchor.blockId ? { blockId: anchor.blockId } : {}),
+                                selector: im.selector,
+                                kind: im.kind,
+                                url: im.url
+                            });
+                        }
+                    }
+                    catch {
+                    }
+                }
+            }
+            if (stale)
+                return;
+            const onShelf = new Set(mergedShelf.map(r => r.selector));
+            const imageAncestors = new Map();
+            for (const selector of new Set(images.map(im => im.selector))) {
+                if (onShelf.has(selector))
+                    continue;
+                try {
+                    const { chain } = await getAncestorChain(sessionIdForAiContext, selector);
+                    if (chain.length)
+                        imageAncestors.set(selector, chain.slice(1).map(c => c.selector));
+                }
+                catch {
+                }
+            }
+            if (stale)
+                return;
+            const { shelf: pageShelf, added: imageRowCount } = withImageRows(mergedShelf, anchorRows.length, images.filter(im => onShelf.has(im.selector) || imageAncestors.has(im.selector)));
+            for (const [selector, chain] of imageAncestors)
+                mergedAncestors.set(selector, chain);
+            rootShelfRef.current = pageShelf;
+            rootShelfAncestorsRef.current = mergedAncestors;
+            if (fragments.length) {
+                const links = linksFragment(extractPageLinks(html));
+                if (links)
+                    fragments.push(links);
+            }
+            const captureAnchors = anchorBlocks.length
+                ? async () => {
+                    const shots = [];
+                    for (const { anchor, selector } of anchorBlocks) {
+                        const shotSelector = anchor.blockSelectors?.[0] ?? selector;
+                        const shot = await captureAiShot(shotSelector);
+                        const base = {
+                            ...(anchor.blockId ? { blockId: anchor.blockId } : {}),
+                            label: anchor.label,
+                            selector: shotSelector
+                        };
+                        shots.push('url' in shot ? { ...base, url: shot.url } : { ...base, error: shot.error });
+                    }
+                    return shots;
+                }
+                : undefined;
+            const frame = geometryRef.current;
+            onPageContextReady(buildElementAiContext({
+                selector: 'body',
+                tag: 'body',
+                ancestors: [],
+                outerHtml: html,
+                fragments,
+                images,
+                descendants: pageShelf,
+                descendantLimit: ROOT_SHELF_LIMIT + anchorRows.length + imageRowCount,
+                ...(anchorsResultRef.current ? { anchors: anchorsResultRef.current } : {}),
+                hasChildren: true,
+                ...(frame
+                    ? {
+                        geometry: {
+                            width: Math.round(frame.viewportWidth),
+                            height: Math.round(frame.viewportHeight),
+                            topInPage: 0,
+                            viewportWidth: Math.round(frame.viewportWidth),
+                            viewportHeight: Math.round(frame.viewportHeight),
+                            device
+                        }
+                    }
+                    : {})
+            }), () => captureAiScreenshot('body'), captureAnchors);
+        })().catch(error => {
+            if (!stale)
+                setCommandError(describeCanvasError(error));
+        });
+        return () => {
+            stale = true;
+        };
+    }, [
+        onPageContextReady,
+        domReady,
+        sessionIdForAiContext,
+        device,
+        captureAiScreenshot,
+        captureAiShot
+    ]);
+    useAiSelectionContext({
+        enabled: trackAiSelection,
+        picked: selection?.chain[0],
+        sessionId: sessionIdForAiContext,
+        readOuterHtml: readOuterHtmlForAi,
+        selectorOf: nodeSelectorOf,
+        buildContext: buildAiContext,
+        captureFor: captureForAi,
+        onChange: onAiContextChange
+    });
+    useEffect(() => {
+        if (!onAiApplyReady)
+            return;
+        const picked = selection?.chain[0];
+        const pageMode = !!onPageContextReady;
+        if (!sessionIdForAiContext || (!picked && !pageMode)) {
+            onAiApplyReady(null);
+            return;
+        }
+        const scope = picked
+            ? {
+                selector: picked.selector,
+                identifier: picked.selector,
+                descendants: () => [
+                    ...descendantShelfRef.current.map(d => d.selector),
+                    ...aiInsertedRef.current
+                ],
+                ancestors: (selection?.chain ?? []).slice(1).map(n => n.selector)
+            }
+            : {
+                selector: 'body',
+                identifier: 'body',
+                descendants: () => [...rootShelfRef.current.map(d => d.selector), ...aiInsertedRef.current],
+                ancestors: [],
+                ancestorsOf: (selector) => rootShelfAncestorsRef.current.get(selector)
+            };
+        onAiApplyReady({
+            activeVersionId: loadedVersion,
+            apply: async (changes, opts) => enqueue(async () => {
+                const target = opts?.versionId;
+                const rejectAll = (detail) => ({
+                    applied: [],
+                    rejected: changes.map((c, index) => ({
+                        index,
+                        selector: typeof c?.selector === 'string' ? c.selector : '',
+                        reason: 'VERSION_SWITCH_FAILED',
+                        detail
+                    })),
+                    versionId: loadedVersionRef.current ?? ''
+                });
+                if (target && target !== loadedVersionRef.current) {
+                    if (!hasVersionsRef.current) {
+                        return rejectAll('host did not pass `versions`');
+                    }
+                    try {
+                        await switchToVersion(target);
+                        versionCallbacksRef.current.onVersionChange?.(target);
+                    }
+                    catch (e) {
+                        return rejectAll(describeCanvasError(e));
+                    }
+                }
+                const outcome = await applyAiChanges(changes, {
+                    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 };
+                    },
+                    insertedSelectorsOf: (changeId) => changeListRef.current.peekList().find(r => r.changeId === changeId)
+                        ?.insertedSelectors ?? [],
+                    settle: () => new Promise(r => setTimeout(r, APPLY_CHECK_SETTLE_MS)),
+                    viewportWidth: () => geometryRef.current?.viewportWidth,
+                    getCapabilities: (selector) => getElementCapabilities(sessionIdForAiContext, selector),
+                    addStyle: changeList.addStyle,
+                    addContent: changeList.addContent,
+                    addMove: changeList.addMove,
+                    addAttribute: changeList.addAttribute,
+                    addAction: changeList.addAction,
+                    allowedImageOrigins: imageOrigins,
+                    allowedImageUrls: allowedImageUrls ?? [],
+                    allowedLinkUrls: allowedLinkUrls ?? [],
+                    pageOrigin
+                });
+                for (const a of outcome.applied) {
+                    for (const sel of a.insertedSelectors ?? []) {
+                        if (!aiInsertedRef.current.includes(sel))
+                            aiInsertedRef.current.push(sel);
+                    }
+                }
+                const skipped = outcome.rejected
+                    .map(r => `${r.reason}${r.detail ? `（${r.detail}）` : ''}`)
+                    .join('；');
+                setAiApplyNote(outcome.applied.length
+                    ? t('inlineCanvas.ai.applyNote', 'AI 改动：{{ok}} 条已应用{{skip}}', {
+                        ok: outcome.applied.length,
+                        skip: skipped
+                            ? `，${outcome.rejected.length} 条被跳过：${skipped}`
+                            : ''
+                    })
+                    : t('inlineCanvas.ai.applyNoneNote', 'AI 改动全部被跳过：{{skip}}', {
+                        skip: skipped
+                    }));
+                return { ...outcome, versionId: loadedVersionRef.current ?? '' };
+            }),
+            revert: async (changeIds) => {
+                const mapped = changeIds.map(id => resolveChangeIdRef.current?.(id) ?? id);
+                const live = new Set(changeListRef.current.peekList().map(r => r.changeId));
+                if (mapped.some(id => !live.has(id))) {
+                    return { ok: false, reason: 'VERSION_NOT_ACTIVE' };
+                }
+                for (const id of [...mapped].reverse()) {
+                    await changeListRef.current.revert(id);
+                }
+                return { ok: true };
+            }
+        });
+        return () => onAiApplyReady(null);
+    }, [
+        onAiApplyReady,
+        onPageContextReady,
+        selection,
+        sessionIdForAiContext,
+        changeList.addStyle,
+        changeList.addContent,
+        changeList.addMove,
+        changeList.addAttribute,
+        changeList.addAction,
+        imageOrigins,
+        allowedImageUrls,
+        allowedLinkUrls,
+        pageOrigin,
+        enqueue,
+        switchToVersion,
+        loadedVersion,
+        t
+    ]);
+    const onToolbarAction = useCallback((buttonId) => {
+        const self = selection?.chain[0];
+        const sessionId = frameProps?.sessionId;
+        if (!self || !sessionId)
+            return;
+        if (switchingRef.current) {
+            setCommandError(t('inlineCanvas.version.switching', '正在切换版本，请稍候'));
+            return;
+        }
+        if (buttonId === 'delete') {
+            uiWrite(() => deleteElement(depsOf(self)));
+            return;
+        }
+        if (buttonId === 'copy') {
+            setCommandError(null);
+            commands
+                .copyElement(self.selector)
+                .catch(error => setCommandError(describeCanvasError(error)));
+            return;
+        }
+        if (buttonId === 'paste') {
+            if (!clipboard) {
+                setCommandError(t('inlineCanvas.clipboard.nothingToPaste'));
+                return;
+            }
+            setPasteDialog(true);
+            return;
+        }
+        if (buttonId === 'move') {
+            setCommandError(null);
+            commands.startMove(self.selector);
+            return;
+        }
+        if (buttonId === 'replace-image') {
+            setImageDialog({ open: true, seed: '' });
+            return;
+        }
+        if (buttonId === 'replace-video') {
+            setVideoDialog({ open: true, seed: '' });
+            return;
+        }
+        if (buttonId === 'insert') {
+            setInsertDialog(true);
+            return;
+        }
+        if (buttonId === 'image-setting') {
+            setImageSettingDialog({ open: true, seed: '' });
+            return;
+        }
+        if (buttonId === 'click-action') {
+            setActionDialog({ open: true, seed: null });
+            return;
+        }
+        if (buttonId === 'edit-style') {
+            setStylePanelOpen(true);
+            return;
+        }
+        if (buttonId === 'edit-html') {
+            void getOuterHtml(sessionId, self.selector).then(r => setHtmlDialog({ open: true, seed: r.html }));
+            return;
+        }
+        if (buttonId === 'ask-ai') {
+            if (!onAskAi)
+                return;
+            setCommandError(null);
+            void getOuterHtml(sessionId, self.selector)
+                .then(r => onAskAi(buildAiContext(self, r.html), () => captureAiScreenshot(self.selector)))
+                .catch(error => setCommandError(describeCanvasError(error)));
+            return;
+        }
+        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;
+        }
+        if (buttonId === 'edit-text') {
+            canvasIframeRef.current?.focus();
+            setCommandError(null);
+            commands
+                .startTextEdit(self.selector)
+                .catch(error => setCommandError(describeCanvasError(error)));
+        }
+    }, [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: () => {
+                    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: [
+                                                        ['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
+                                                            ? '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,
+                                                            selector: dragSelector,
+                                                            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'
+                                ? '不能移到它自己里面，请另选一个目标'
+                                : 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: {
+                    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: () => {
+                                    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)) })] }));
+}