@ptengine/inline-editor 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,8 +1,56 @@
 # Changelog
 
+## 0.1.6
+
+**变更**
+
+- 整页货架（没选中元素时交给 AI 的那份）的「区块」改为**只装着这一块的最外层容器**。此前「内层带 heading 就赢」，而 heading 是子树里
+  第一个标题，section / 轮播轨道 / 每张幻灯片拿到同一句 —— 首屏只剩轮播的几张幻灯片，「首屏下面插入」落进了轮播（真机 vivaia 首页）。
+  现在：父级横排里的几个大项（轮播的每一张、并列的列）不单独成块；装着 ≥2 个区块的是外壳、拆开；只装着 1 个的外层就是这一块；
+  占页高 ≥60% 的单链节点（main / 页面包装层）让给内层。区块很多时每块少给几行叶子，块根行一个不落。
+- 分析路径的区块成员（`resolveBlocks` → `<page-block>` → 方案锚点）同口径上提到块根：热图成员是轮播第 1 张时，成员与方案锚点
+  改为整个首屏 section，首版不再照锚点把「首屏下方」的新模块插进轮播。整页树拉不到、或容器还装着别的区块时，成员原样不动。
+- 编辑器交互与媒体流程统一：替换图片 / 视频、插入元素的对话框加上加载中与失败可见的媒体预览；元素截图改为结果卡片（放大预览、
+  下载、上传后复制链接，超出可视区或缩放时注明）；操作反馈统一成一种状态条；代码输入框统一等宽字体；版本菜单与顶栏重排，
+  图层树搜索补上无结果与清除。
+- 方案锚点可以带 MOVE 的目标：编辑器打开时，目标与锚点一样在活页面上重新解析（selector 唯一命中优先，失效按 `targetLabel` 找回），
+  找到的目标并进整页货架与祖先表 —— 目标不是块根时整页 MOVE 也不再因「不在货架上」被拒；找不到就按没解析到报、不授权。
+
+**修复**
+
+- 接通撤销和重做的操作历史；覆盖同一属性后可逐步还原，新增编辑会清空重做，切版本或会话会重置历史。回放保留 changeId，并同步插入元素的 AI 作用域。
+- 样式面板支持标题栏拖拽与视口边界约束；连续尺寸变化不再累加偏移，顶层浮层与全屏宿主正确叠放，保留后续弹窗的遮盖关系。
+- 修复改动清单的默认深色按钮及多行内容高度；全部撤销的确认文案与可恢复历史保持一致。
+- 版本菜单统一左对齐，新增版本使用中性样式，重命名图标 hover 不再出现背景块。
+- 点击动作类型改用 `@ptengine/design-components` 的 `RadioGroup / RadioGroupItem`，保留按类型切换字段和已填内容。
+
+**新增**
+
+- `InlineEditor` 的 `pageBlocks` prop（页面模型区块 `{ id, members }`）：传了之后块根行带 `AiDescendant.blockId` —— 热图成员是轮播第 1 张时，
+  id 落在整个首屏 section 上。宿主据此打 `[B1 …]`，不再按 selector 逐字匹配成员。每个会话读一次，与 `anchors` 同一条纪律。
+- 导出类型 `ShelfBlockHint`。
+- `resolveBlocks` 的 `opts.viewportWidth`（块根判据的宽度门槛，缺省 375）；`PageModelBlockMember.inRow`（成员在整页树上的横排位，
+  `<page-block>` 成员行据此打 `[横排 i/n]`，与整页货架同一份）。
+- `InlinePlanAnchor` 的 `targetSelector` / `targetLabel`（只给 MOVE_ELEMENT）；`ResolvedAnchor` 的 `targetResolved` / `targetVia` /
+  `resolvedTargetSelector`，宿主据此打印目标。
+
+## 0.1.5
+
+**变更**
+
+- 截图之后把画布滚回截图前的位置。截图只能拍可视区（元素截图先滚过去、整页图一屏屏滚到底），此前 agent 拍完不滚回来 ——
+  进编辑器首版自动拍整页图 + 锚点近景后，页面停在最后一张近景那里。`captureSelectedElement`、`InlineEditorHandle.capturePage`、
+  `PagePreviewHandle.capturePage` 都会滚回；锚点近景几张连拍，只在最后滚回一次。
+
+**新增**
+
+- `useInlineEditor().commands.preserveScroll(run)`：跑完 `run` 把画布滚回开始前的位置（取几何帧的 `scrollY`）。
+  嵌套时只有最外层还原；几何帧还没到（不知道原位置）就不滚；滚回失败不抛。
+
 ## 0.1.4
 
 **变更**
+
 - AI 改动里的图片地址（`CHANGE_IMAGE`、`EDIT_HTML` 与 `INSERT_ELEMENT` 里的 `img[src]`）**不再按域名放行**，只要求 http(s) 绝对地址。
   此前只认宿主注入的 origin 表 + 本会话读到过的地址，生图域名随部署环境变（测试区产图在 npstaticprod），漏配一个就整处改动被拒。
   `javascript:` / `data:` / 相对地址 / 没有 `src` 仍以 `UNSAFE_IMAGE_SRC` 拒；`srcset` 照旧剥掉，`style` 里的 `url()` 照旧禁止。
@@ -11,6 +59,7 @@
 ## 0.1.3
 
 **变更**
+
 - 整页作用域（没选中元素）里 AI 的 `MOVE_ELEMENT`：`targetSelector` 除了被移动元素的祖先，现在也可以是**整页货架里的任意一行**
   —— 「把 FAQ 整块挪到另一个区块后面」这类调换区块顺序的改动终于能落地（此前一律 `INVALID_MOVE_TARGET`）。
   仍然拒绝：不在货架上的（编出来的）target、被移动元素自己、在被移动元素里面的行（防环，靠建货架时记的祖先链判）、
@@ -23,6 +72,7 @@
 全部是新增：扩展不支持契约 v11 `feature:node-fields`（取树不回 `facts`）时，货架行与原来逐字一致。
 
 **新增**
+
 - AI 货架行标出父级横排：`AiDescendant.inRow`（`{ index, count }`），`formatShelfRow` 在引用文本之后、区块身份之前写
   ` [横排 i/n]`（与 frontend-base `<page-block>` 的行尾逐字一致）。父级是 flex 行（不换行；换行的要孩子同一行）或多列 grid
   时才写 —— `after` 这一行会排到它旁边而不是下方。对整棵树判：父级常是货架跳过的包装层（PageFly `.pf-c`）。
@@ -37,6 +87,7 @@
 全部是新增，不传新 props 的宿主行为不变。
 
 **新增**
+
 - `InlineEditor` 可选 props `onAiInsertedRemoved` / `onAiInsertedRestored`（`useInlineEditor` 的同名输入、
   `useChangeList(sessionId, { onInsertedRemoved, onInsertedRestored })` 同步透传）：撤销（单条 / 整批 / 换版本）
   拿掉 AI 插入的元素时回报其 selector，并从包内的 AI 作用域剔除；回放（切版本 / 切设备）把它们放回画布时回报，
@@ -50,6 +101,7 @@
 首个发布版。自 frontend-base（`cecb6de77`）迁入 `inline-editor`，其内部依赖的 `canvas-ui` 并入本包的内部目录（不单独发布）。
 
 **产物**
+
 - 仅 ESM，**逐模块输出**：每个源文件各出一个 `.js` 与 `.d.ts`，目录结构与源码一致，入口 `dist/index.js` / `dist/index.d.ts`；
   相对导入均带 `.js` 扩展名（Node ESM 可解析）；无 sourcemap。消费方打包器能像吃源码时一样按模块摇树、分 chunk
   （单文件产物会被主应用对 `inlineEditorLocales` 等的静态引用整个拉进主 chunk）。
@@ -61,12 +113,14 @@
   `lucide-react` / `@ptengine/inline-core`（dependencies）。
 
 **配置入口（不兼容变更，相对迁入前的源码级用法）**
+
 - 新增 `configureInlineEditor({ extensionId, disabledCapabilities })`，以及 `getInlineEditorConfig()` / `resetInlineEditorConfig()`。
   预构建产物不再读 `import.meta.env`，扩展 id 与禁用能力改由宿主在应用启动时显式传入。
   不配 `extensionId` = 内测模式（回退读 `<html data-ptengine-kit-id>`）；配了 = 严格模式，只认这一个 id。
 - 删除 `EXTENSION_ID` 常量导出；需要当前 id 请用 `getExtensionId()`。
 
 **发布前校验**
+
 - `pnpm build && pnpm test:build`：断言逐模块产物齐全、无测试文件、相对导入带扩展名且可解析、
   canvas-ui 的 CSS import 与 CSS 文件在位且被 `sideEffects` 命中、外部依赖未内联、d.ts 不引 Node 类型；
   在临时「装包方」目录里以 `--skipLibCheck false` 编译类型夹具（含 `DomTreeNode.href` 模块增强），

package/dist/InlineEditor.d.ts

@@ -3,6 +3,7 @@ import { type ChromeVariant } from './chrome/EditorChrome.js';
 import type { PageModelBlock } from './kernel/blocks/resolveBlocks.js';
 import type { AdaptDomTreeOptions } from './tree/domTreeAdapter.js';
 import { type AnchorShot, type ElementAiContext } from './kernel/selection/elementAiContext.js';
+import { type ShelfBlockHint } from './kernel/selection/buildRootShelf.js';
 import { type InlinePlanAnchor } from './kernel/selection/resolveAnchors.js';
 import { type AiApplyOutcome, type AiScopeGrant, type AiWireChange } from './kernel/ai/aiInlineApply.js';
 import { type LibraryComponent } from './assets/componentLibrary.js';
@@ -139,6 +140,17 @@ export interface InlineEditorProps {
      * 不传 = 与今天完全一致。
      */
     anchors?: InlinePlanAnchor[];
+    /**
+     * **页面模型的区块**（热图区块配置解析出来的 `{ id, members }`，宿主的 `PageModelBlock` 原样传）。
+     *
+     * 传了之后整页货架会按成员归属校正「哪一层算一块」，并在块根行（只装着这一个区块的最外层
+     * 容器）写 `blockId` —— 宿主据此打 `[B1 …]`。热图成员常是轮播的第 1 张：没有这一步，标签
+     * 打在那一张上，「首屏下面」就插进了轮播（真机 2026-10-20）。
+     *
+     * ⚠️ 与 `anchors` 同一条纪律：只在 `onPageContextReady` 那条路上生效，**每个会话读一次**，
+     * 用 ref 存最新值、不进采集 effect 的依赖。不传 = 不打 `blockId`，块根照结构判。
+     */
+    pageBlocks?: ReadonlyArray<ShelfBlockHint>;
     /**
      * 编辑器可用了（画布就绪、命令能发了）——**每个会话交一次**把手。
      *
@@ -222,6 +234,8 @@ export interface InlineEditorProps {
      * 名字是 experience 级状态（保存时作为 `summary` 落库），改不改得成由宿主说了算。
      */
     onRenameVersion?: (id: string, name: string) => void;
+    removableVersionIds?: string[];
+    onRemoveVersion?: (id: string) => void;
     /**
      * 真实页面预览。**不传则顶栏不渲染那个入口** —— 预览链接由后端按 experience + 版本
      * 签发（同详情页的「真实页面预览」），包里没有 experience 的概念，也不知道
@@ -340,4 +354,4 @@ export interface AiApplyApi {
     /** 当前版本 —— 宿主把 agent 给的版本**名**映射成 id 时要知道现在在哪一版。 */
     readonly activeVersionId?: string;
 }
-export declare function InlineEditor({ url, device, onDeviceChange, title, versionLabel, chrome, 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 }: InlineEditorProps): import("react").JSX.Element;
+export declare function InlineEditor({ url, device, onDeviceChange, title, versionLabel, chrome, 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 }: InlineEditorProps): import("react").JSX.Element;

package/dist/InlineEditor.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EditorStatus } from './panels/EditorStatus.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';
@@ -16,14 +19,14 @@ import { buildElementAiContext, extractPageLinks, linksFragment, ROOT_SHELF_LIMI
 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 { 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';
@@ -51,7 +54,7 @@ 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);
@@ -73,7 +76,6 @@ 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);
@@ -349,7 +351,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 +431,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 +451,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 +482,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 +511,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 {
@@ -561,20 +575,23 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
                     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;
-                }
+                ?
+                    () => commandsRef.current.preserveScroll(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({
@@ -648,7 +665,10 @@ export function InlineEditor({ url, device, onDeviceChange, title, versionLabel
             : {
                 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)
             };
@@ -682,7 +702,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 ?? [],
@@ -821,15 +845,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;
@@ -843,17 +862,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,
@@ -861,25 +879,38 @@ 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: 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 && (_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 && (_jsxs(EditorStatus, { "data-testid": "inline-editor-move-bar", 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
+                                : t('inlineCanvas.move.pickTarget') }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('inlineCanvas.move.position') }), ['top', 'bottom', 'before', 'after'].map(pos => (_jsx(Button, { size: "sm", variant: "secondary", type: "button", "data-testid": `move-position-${pos}`, 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: {
+                                    .catch(e => setCommandError(describeCanvasError(e))), children: t(`inlineCanvas.move.${pos}`) }, pos)))] })), _jsx(Button, { size: "sm", variant: "secondary", type: "button", "data-testid": "move-cancel", onClick: () => commands.cancelMove(), children: t('inlineCanvas.move.cancel') })] })), !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, declaredStyles: selection?.declaredStyles, 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;

package/dist/canvas-ui/tree/TreePanel.js

@@ -4,7 +4,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { TREE_CLASS, TREE_ROW_HEIGHT } from './classNames.js';
 import { dropPosition, rangeBetween, visibleOrder } from './order.js';
 const DRAG_MIME = 'text/x-tree-id';
-export function TreePanel({ nodes, rootId, selectedId, hoverId, query, onSelect, onShiftSelect, onHover, onMove, onExpand }) {
+export function TreePanel({ emptyLabel = 'No matching layers', nodes, rootId, selectedId, hoverId, query, onSelect, onShiftSelect, onHover, onMove, onExpand }) {
     const [collapsed, setCollapsed] = useState(new Set());
     const [drop, setDrop] = useState(null);
     const searching = !!query?.trim();
@@ -88,45 +88,85 @@ export function TreePanel({ nodes, rootId, selectedId, hoverId, query, onSelect,
             next.add(id);
         return next;
     });
-    return (_jsx("div", { ref: scrollRef, className: TREE_CLASS.tree, "data-testid": "tree-panel", onMouseLeave: () => onHover(null), children: rows.map(id => {
-            const node = nodes[id];
-            if (!node)
-                return null;
-            const depth = depthOf.get(id) ?? 0;
-            const needsLoad = node.children.length === 0 && !!node.truncated;
-            const hasChildren = node.children.length > 0 || (needsLoad && !!onExpand);
-            const dropHere = drop?.targetId === id ? drop.pos : null;
-            return (_jsxs("div", { "data-testid": "tree-row", "data-row-id": `tree-row-${id}`, "data-id": id, "data-depth": depth, className: `${TREE_CLASS.row}${selectedId === id ? ' is-selected' : ''}${hoverId === id ? ' is-hovered' : ''}${dropHere ? ` drop-${dropHere}` : ''}`, style: { paddingLeft: `${8 + depth * 12}px` }, draggable: onMove ? true : undefined, onMouseEnter: () => onHover(id), onClick: e => {
-                    if (e.shiftKey && selectedId && onShiftSelect) {
-                        onShiftSelect(rangeBetween(order, selectedId, id));
-                        return;
-                    }
-                    onSelect(id);
-                }, onDragStart: e => e.dataTransfer.setData(DRAG_MIME, id), onDragOver: e => {
-                    if (!onMove)
-                        return;
-                    e.preventDefault();
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    const pos = dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain);
-                    if (drop?.targetId !== id || drop.pos !== pos) {
-                        setDrop({ targetId: id, pos });
-                    }
-                }, onDragLeave: () => {
-                    if (drop?.targetId === id)
-                        setDrop(null);
-                }, onDrop: e => {
-                    const dragId = e.dataTransfer.getData(DRAG_MIME);
-                    setDrop(null);
-                    if (!dragId || dragId === id || !onMove)
-                        return;
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    onMove(dragId, id, dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain));
-                }, children: [hasChildren ? (_jsx("button", { type: "button", "data-testid": `tree-toggle-${id}`, className: TREE_CLASS.toggle, onClick: e => {
-                            e.stopPropagation();
-                            if (needsLoad)
+    return (_jsxs("div", { ref: scrollRef, role: "tree", "aria-label": "\u56FE\u5C42", className: TREE_CLASS.tree, "data-testid": "tree-panel", onMouseLeave: () => onHover(null), children: [rows.length === 0 && (_jsx("p", { role: "status", className: "p-3 text-xs text-muted-foreground", children: emptyLabel })), rows.map(id => {
+                const node = nodes[id];
+                if (!node)
+                    return null;
+                const depth = depthOf.get(id) ?? 0;
+                const needsLoad = node.children.length === 0 && !!node.truncated;
+                const hasChildren = node.children.length > 0 || (needsLoad && !!onExpand);
+                const dropHere = drop?.targetId === id ? drop.pos : null;
+                return (_jsxs("div", { role: "treeitem", tabIndex: id === selectedId ||
+                        (!rows.includes(selectedId ?? '') && id === rows[0])
+                        ? 0
+                        : -1, "aria-selected": id === selectedId, "aria-level": depth + 1, "aria-expanded": hasChildren ? !collapsed.has(id) : undefined, onKeyDown: e => {
+                        if (e.target !== e.currentTarget)
+                            return;
+                        let next;
+                        if (e.key === 'ArrowDown')
+                            next = rows[rows.indexOf(id) + 1];
+                        else if (e.key === 'ArrowUp')
+                            next = rows[rows.indexOf(id) - 1];
+                        else if (e.key === 'Home')
+                            next = rows[0];
+                        else if (e.key === 'End')
+                            next = rows[rows.length - 1];
+                        else if (e.key === 'ArrowRight') {
+                            if (hasChildren && collapsed.has(id))
+                                toggle(id);
+                            else if (needsLoad)
                                 onExpand?.(id);
                             else
+                                next = node.children[0];
+                        }
+                        else if (e.key === 'ArrowLeft') {
+                            if (hasChildren && !collapsed.has(id))
                                 toggle(id);
-                        }, children: collapsed.has(id) && !searching ? (_jsx(ChevronRight, { className: "size-3" })) : (_jsx(ChevronDown, { className: "size-3" })) })) : (_jsx("span", { className: "layer-chevron-spacer" })), node.icon && (_jsx("span", { className: TREE_CLASS.icon, children: node.icon })), _jsx("span", { className: TREE_CLASS.label, title: node.label, children: node.label })] }, id));
-        }) }));
+                            else
+                                next = parentOf.get(id);
+                        }
+                        else if (e.key === 'Enter' || e.key === ' ')
+                            onSelect(id);
+                        else
+                            return;
+                        e.preventDefault();
+                        if (next) {
+                            onSelect(next);
+                            Array.from(scrollRef.current?.querySelectorAll('[role="treeitem"]') ?? [])
+                                .find(row => row.dataset.id === next)
+                                ?.focus();
+                        }
+                    }, "data-testid": "tree-row", "data-row-id": `tree-row-${id}`, "data-id": id, "data-depth": depth, className: `${TREE_CLASS.row}${selectedId === id ? ' is-selected' : ''}${hoverId === id ? ' is-hovered' : ''}${dropHere ? ` drop-${dropHere}` : ''}`, style: { paddingLeft: `${8 + depth * 12}px` }, draggable: onMove ? true : undefined, onMouseEnter: () => onHover(id), onClick: e => {
+                        if (e.shiftKey && selectedId && onShiftSelect) {
+                            onShiftSelect(rangeBetween(order, selectedId, id));
+                            return;
+                        }
+                        onSelect(id);
+                    }, onDragStart: e => e.dataTransfer.setData(DRAG_MIME, id), onDragOver: e => {
+                        if (!onMove)
+                            return;
+                        e.preventDefault();
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        const pos = dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain);
+                        if (drop?.targetId !== id || drop.pos !== pos) {
+                            setDrop({ targetId: id, pos });
+                        }
+                    }, onDragLeave: () => {
+                        if (drop?.targetId === id)
+                            setDrop(null);
+                    }, onDrop: e => {
+                        const dragId = e.dataTransfer.getData(DRAG_MIME);
+                        setDrop(null);
+                        if (!dragId || dragId === id || !onMove)
+                            return;
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        onMove(dragId, id, dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain));
+                    }, children: [hasChildren ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": node.label, "aria-expanded": !collapsed.has(id), "data-testid": `tree-toggle-${id}`, className: TREE_CLASS.toggle, onClick: e => {
+                                e.stopPropagation();
+                                if (needsLoad)
+                                    onExpand?.(id);
+                                else
+                                    toggle(id);
+                            }, children: collapsed.has(id) && !searching ? (_jsx(ChevronRight, { className: "size-3" })) : (_jsx(ChevronDown, { className: "size-3" })) })) : (_jsx("span", { className: "layer-chevron-spacer" })), node.icon && _jsx("span", { className: TREE_CLASS.icon, children: node.icon }), _jsx("span", { className: TREE_CLASS.label, title: node.label, children: node.label })] }, id));
+            })] }));
 }

package/dist/chrome/EditorChrome.d.ts

@@ -50,6 +50,8 @@ export interface EditorChromeProps {
     onAddVersion?: () => void;
     /** 版本改名。**不传则下拉行里没有那支铅笔** —— 同上。 */
     onRenameVersion?: (id: string, name: string) => void;
+    removableVersionIds?: string[];
+    onRemoveVersion?: (id: string) => void;
     changeCount: number;
     onExit: () => void;
     onSave?: () => void;